@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Prompt:wght@300;400;500;600&display=swap');
:root{--navy:#14284b;--navy2:#1e3a6b;--sky:#4aa8e0;--sky2:#e8f4fc;--gold:#d4a843;--gold2:#fbf3dd;--bg:#f4f7fb;--card:#fff;--ink:#22324a;--mut:#7187a3;--line:#e3eaf3;--ok:#2fae7a;--okb:#e5f6ee;--bad:#e0605c;--badb:#fdecea;--warn:#e39a2d;--warnb:#fdf3e2;--r:20px;--sh:0 6px 24px rgba(20,40,75,.07),0 1px 3px rgba(20,40,75,.05)}
*{box-sizing:border-box}html,body{margin:0}body{font-family:Prompt,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.k{font-family:Kanit,Prompt,sans-serif;font-weight:600;margin:0}a{color:var(--sky);text-decoration:none}
.top{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;padding:14px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;box-shadow:0 2px 14px rgba(0,0,0,.12)}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#f0cf7d);display:grid;place-items:center;color:var(--navy);font:700 18px Kanit}
.top .t{font:600 17px Kanit;line-height:1.1}.top .s{font-size:11.5px;opacity:.7}.top .sp{flex:1}
.wrap{max-width:1180px;margin:0 auto;padding:20px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px;border:1px solid rgba(227,234,243,.7)}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.btn{border:0;border-radius:14px;padding:11px 18px;font:500 14.5px Prompt;cursor:pointer;background:var(--sky);color:#fff;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:.15s;min-height:44px;text-decoration:none}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn:active{transform:none}.btn.navy{background:var(--navy)}.btn.gold{background:var(--gold);color:var(--navy)}.btn.ghost{background:var(--sky2);color:var(--navy2)}.btn.red{background:var(--badb);color:var(--bad)}.btn.sm{padding:7px 12px;min-height:36px;font-size:13px;border-radius:11px}.btn.block{width:100%}.btn:disabled{opacity:.5;pointer-events:none}
input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;font:400 15px Prompt;background:#fbfdff;color:var(--ink);outline:none;min-height:44px}input:focus,select:focus{border-color:var(--sky);background:#fff;box-shadow:0 0 0 4px rgba(74,168,224,.12)}
label{font-size:12.5px;color:var(--mut);display:block;margin:0 0 5px 3px;font-weight:500}.f{margin-bottom:12px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:500;background:var(--sky2);color:var(--navy2);white-space:nowrap}.pill.ok{background:var(--okb);color:var(--ok)}.pill.bad{background:var(--badb);color:var(--bad)}.pill.warn{background:var(--warnb);color:var(--warn)}.pill.gold{background:var(--gold2);color:#9a7419}
.mut{color:var(--mut);font-size:13px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sp{flex:1}
table{width:100%;border-collapse:collapse}th{font:500 12px Prompt;color:var(--mut);text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 10px;border-bottom:1px solid #f0f4f9;font-size:14px;vertical-align:middle}tr:last-child td{border:0}.tw{overflow-x:auto}
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--sky2),var(--gold2));display:inline-grid;place-items:center;font:600 15px Kanit;color:var(--navy2);flex:none}
.stat .n{font:600 30px Kanit;color:var(--navy)}.stat .l{color:var(--mut);font-size:13px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;background:#fff;border-radius:16px;box-shadow:var(--sh);margin-bottom:18px}.tabs button{border:0;background:none;padding:10px 16px;border-radius:12px;font:500 14px Prompt;color:var(--mut);cursor:pointer;white-space:nowrap}.tabs button.on{background:var(--navy);color:#fff}
.modal{position:fixed;inset:0;background:rgba(15,30,55,.45);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;z-index:50}.modal.show{display:flex}.modal .card{width:100%;max-width:620px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;animation:up .25s ease}@media(min-width:700px){.modal{align-items:center}.modal .card{border-radius:24px}}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 20px;border-radius:14px;z-index:99;box-shadow:var(--sh);font-size:14px;display:none;max-width:90vw}.toast.show{display:block;animation:up .2s}
.cam{position:relative;border-radius:22px;overflow:hidden;background:#0d1a30;aspect-ratio:4/3}.cam video,.cam canvas{width:100%;height:100%;object-fit:cover;display:block}.cam video{transform:scaleX(-1)}.cam .ov{position:absolute;inset:0;pointer-events:none}
.ring{position:absolute;left:50%;top:48%;width:52%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.55);border-radius:50%}
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 60%,#2a5590 100%);color:#fff;border-radius:26px;padding:28px;position:relative;overflow:hidden}.hero:after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,67,.35),transparent 70%)}
.empty{text-align:center;color:var(--mut);padding:30px}
@media(max-width:640px){.wrap{padding:14px}.card{padding:16px}.hide-m{display:none}}