*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;background:#0f1420;color:#e8ecf3}
.app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#161d2e;border-bottom:1px solid #263049}
.brand{font-weight:700;font-size:18px}
.pill{font-size:12px;padding:3px 10px;border-radius:99px;background:#3a2330;color:#ff9aa8}
.pill.on{background:#18382a;color:#7be3a6}
.banner{margin:10px 16px;padding:10px;border-radius:8px;background:#4a3a12;color:#ffe08a;font-size:14px}
.view{padding:12px 16px}
.hidden{display:none!important}
.card{background:#161d2e;border:1px solid #263049;border-radius:12px;padding:14px;margin-top:12px}
.form label,.card label{display:block;margin-bottom:10px;font-size:14px}
input,select{width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #33405e;background:#0f1420;color:#e8ecf3;font-size:15px}
input[type=checkbox]{width:auto;margin-right:6px}
label.inline{display:flex;align-items:center;font-size:14px}
.btn{cursor:pointer;border:1px solid #33405e;background:#1f2840;color:#e8ecf3;border-radius:8px;padding:8px 14px;font-size:14px;text-decoration:none;display:inline-block}
.btn:hover{background:#2a3655}
.btn.primary{background:#2f6fed;border-color:#2f6fed;width:100%}
.btn.link{background:none;border:none;color:#8fb3ff;width:100%;margin-top:6px}
.btn.small{padding:5px 10px;font-size:13px}
.btn.green{background:#1f9d55;border-color:#1f9d55}
.btn.red{background:#d64545;border-color:#d64545}
.btn.round{border-radius:40px;padding:12px 18px;margin:6px}
.btn.active{background:#8a5a12;border-color:#c98a2a}
.error{color:#ff8a8a;font-size:14px;min-height:18px;margin-top:6px}
.muted{color:#8b97b0}.small{font-size:12px}
.me-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.row-gap{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
.tabs{display:flex;gap:6px;margin:12px 0}
.tab{flex:1;cursor:pointer;padding:9px;border-radius:8px;border:1px solid #263049;background:#161d2e;color:#c9d2e3}
.tab.active{background:#2f6fed;border-color:#2f6fed;color:#fff}
.badge{background:#d64545;color:#fff;border-radius:99px;padding:1px 7px;font-size:12px;margin-left:4px}
.search{margin-bottom:10px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #263049;background:#161d2e;border-radius:10px;margin-bottom:8px;gap:8px}
.list li.missed .who{color:#ff8a8a}
.who{font-weight:600}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555f78;margin-right:6px}
.dot.on{background:#3ad07a}.dot.busy{background:#e0a030}
#user-list li.offline .who{opacity:.6}
.btn:disabled,.btn.offline{opacity:.45;filter:grayscale(1);cursor:not-allowed}
.takeover{display:block;width:calc(100% - 32px);text-align:left;border:0;cursor:pointer;font:inherit;background:#5a2a12;color:#ffd0a0}
.takeover.hidden,.wv-guide.hidden{display:none}
.wv-guide .row-gap{margin-top:8px}
.call.offline-state .call-status{color:#ffb070;font-weight:600}
.call{position:fixed;inset:0;background:rgba(10,14,24,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;text-align:center;padding:20px}
.call-peer{font-size:26px;font-weight:700}
.call-status{margin-top:8px;color:#9fb0d0}
.call-timer{font-size:40px;font-variant-numeric:tabular-nums;margin:16px 0 4px}
.call-actions{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center}
/* test page */
.tp-head{padding:10px 16px;background:#161d2e;border-bottom:1px solid #263049;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;height:calc(100vh - 110px)}
.tp-grid iframe{width:100%;height:100%;border:1px solid #33405e;border-radius:10px;background:#0f1420}
.tp-log{font-family:monospace;font-size:12px;color:#9fb0d0;padding:0 16px}
@media (max-width:800px){.tp-grid{grid-template-columns:1fr;height:auto}.tp-grid iframe{height:640px}}
/* admin */
.admin{max-width:980px;margin:0 auto;padding:12px 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){.grid2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:6px;border-bottom:1px solid #263049}
textarea{width:100%;min-height:60px;padding:8px;border-radius:8px;border:1px solid #33405e;background:#0f1420;color:#e8ecf3;font-family:monospace}
.ok{color:#7be3a6}
/* ---------- video call (mobile-first) ---------- */
.call.video-mode{justify-content:flex-end;padding:0;background:#000}
.video-stage{position:absolute;inset:0;background:#000;overflow:hidden}
.video-stage #remote-video{width:100%;height:100%;object-fit:cover;background:#000}
.cam-off{position:absolute;top:40%;left:0;right:0;text-align:center;color:#9fb0d0;font-size:16px}
.local-wrap{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:28vw;max-width:150px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.35);background:#111;z-index:2}
.local-wrap video,.local-wrap canvas{width:100%;height:100%;object-fit:cover;display:block}
.local-wrap.mirror video,.local-wrap.mirror canvas{transform:scaleX(-1)}
.track-debug{position:absolute;left:8px;top:calc(8px + env(safe-area-inset-top,0px));z-index:3;margin:0;padding:6px 8px;max-width:70vw;background:rgba(0,0,0,.62);color:#9f9;font:11px/1.35 ui-monospace,monospace;border-radius:8px;pointer-events:none;white-space:pre}
.call.video-mode .call-info{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;text-align:left;z-index:2;text-shadow:0 1px 3px #000}
.call.video-mode .call-peer{font-size:18px}.call.video-mode .call-timer{font-size:20px;margin:4px 0}
.call.video-mode .call-actions{position:relative;z-index:3;width:100%;padding:10px 6px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.75));margin:0}
.call.video-mode .btn.round{padding:12px 14px;min-width:56px;min-height:48px;margin:4px;background:rgba(40,48,70,.85)}
.call.video-mode .btn.round.red{background:#d64545}.call.video-mode .btn.round.active{background:#8a5a12}
.call-quality{margin-top:4px}
/* Beauty bottom sheet */
.beauty-sheet{position:relative;z-index:3;width:100%;background:rgba(12,16,26,.92);border-top:1px solid #263049;padding:8px 8px 4px;text-align:left}
.beauty-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.beauty-int{display:flex;align-items:center;gap:6px;flex:1;min-width:180px;font-size:13px}
.beauty-int input{flex:1;margin:0;padding:0;height:32px}
.beauty-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.bf{flex:0 0 auto;width:76px;scroll-snap-align:start;background:none;border:2px solid transparent;border-radius:12px;padding:2px;color:#e8ecf3;cursor:pointer}
.bf img{width:68px;height:68px;border-radius:10px;object-fit:cover;display:block;background:#222}
.bf span{display:block;font-size:11px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf.sel{border-color:#ff7aa8}
.beauty-advanced.hidden{display:none}
.beauty-adjust{max-height:34vh;overflow-y:auto;padding:4px 2px}
.adj{display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 0}
.adj span{flex:0 0 110px}.adj input[type=range]{flex:1;margin:0;height:30px}.adj input[type=color]{width:40px;height:30px;padding:0;margin:0}
/* Filter Studio */
.studio{max-width:1180px;margin:0 auto;padding:12px 16px}
.studio-grid{display:grid;grid-template-columns:300px 1fr 360px;gap:12px}
@media (max-width:1000px){.studio-grid{grid-template-columns:1fr}}
.flist{list-style:none;margin:0;padding:0;max-height:75vh;overflow:auto}
.flist li{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid #263049;border-radius:10px;margin-bottom:6px;background:#161d2e;cursor:pointer}
.flist li.sel{border-color:#ff7aa8}.flist img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.flist .meta{flex:1;min-width:0}.flist .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:99px;background:#263049;margin-right:3px}
.tag.pub{background:#18382a;color:#7be3a6}.tag.off{background:#3a2330;color:#ff9aa8}.tag.dirty{background:#4a3a12;color:#ffe08a}
.preview-box canvas,.preview-box video{width:100%;border-radius:12px;background:#000}
.lab{padding:12px}
.sdk-video{width:100%;background:#000;border-radius:10px;min-height:120px}
.logbox{max-height:280px;overflow:auto;font-family:monospace;font-size:11px;background:#0f1420;border:1px solid #263049;border-radius:8px;padding:6px}
.log-error{color:#ff8a8a}.log-warn{color:#ffd27a}.log-info{color:#9fb0d0}
h4{margin:14px 0 6px;color:#9fb0d0}
/* filter status line (loading % / unavailable / no face / applied) */
.fx-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(170px + env(safe-area-inset-bottom,0px));max-width:88vw;background:rgba(0,0,0,.72);color:#fff;padding:7px 14px;border-radius:16px;font-size:14px;line-height:1.35;z-index:60;pointer-events:none;text-align:center}
.fx-hint.hidden{display:none}
.fx-hint.bad{background:rgba(160,20,30,.85)}.fx-hint.warn{background:rgba(150,100,0,.85)}.fx-hint.ok{background:rgba(20,120,60,.85)}