:root { color-scheme: dark; --bg:#0f172a; --card:#1e293b; --fg:#e2e8f0; --muted:#94a3b8; --acc:#3b82f6; --danger:#ef4444; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display:none !important; }
.view { min-height:100%; }
#connectView { display:flex; align-items:center; justify-content:center; padding:16px; }
.card { background:var(--card); border-radius:14px; padding:22px; width:100%; max-width:420px; box-shadow:0 10px 30px #0006; }
.small-card { max-width:360px; text-align:center; }
h1 { margin:0 0 6px; display:flex; gap:10px; align-items:center; font-size:24px; }
.muted { color:var(--muted); } .small { font-size:13px; }
label { display:block; margin:12px 0; font-size:14px; color:var(--muted); }
label.row { display:flex; gap:8px; align-items:center; }
input:not([type=checkbox]) { display:block; width:100%; margin-top:4px; padding:12px; font-size:18px; border-radius:10px; border:1px solid #334155; background:#0b1222; color:var(--fg); letter-spacing:1px; }
button { cursor:pointer; border:0; border-radius:10px; padding:12px 16px; font-size:16px; background:var(--acc); color:white; }
button.secondary { background:#334155; } button.danger { background:var(--danger); }
button:disabled { opacity:.5; cursor:default; }
form > button { width:100%; margin-top:8px; }
details { margin:8px 0; color:var(--muted); font-size:14px; }
.status { min-height:1.4em; margin:12px 0 0; }
.status.err { color:#fca5a5; } .status.ok { color:#86efac; }
#sessionView { position:fixed; inset:0; background:#000; }
#stage { position:absolute; inset:0; overflow:hidden; touch-action:none; }
#remoteVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin:0 0; cursor:none; outline:none; }
#remoteVideo.local-cursor { cursor:default; }
#cursorDot { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid #fff; background:#3b82f6aa; pointer-events:none; z-index:2; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#000a; z-index:5; padding:16px; }
.sas { margin:14px 0 4px; font-size:18px; } .sas b { font-size:28px; letter-spacing:3px; font-family:ui-monospace, monospace; color:#fde68a; }
#toolbar { position:absolute; top:max(8px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:6px; align-items:center; background:#0f172acc; padding:6px; border-radius:12px; max-width:calc(100% - 16px); }
#toolbar button { padding:8px 10px; font-size:14px; background:#334155; white-space:nowrap; }
#toolbar button.danger { background:var(--danger); }
#toolbarItems { display:flex; gap:6px; align-items:center; overflow-x:auto; }
.stats { font:12px ui-monospace, monospace; color:var(--muted); white-space:nowrap; padding:0 6px; }
#kbdSink { position:fixed; left:-1000px; bottom:0; width:10px; height:10px; opacity:0; }
/* persetujuan lewat email */
#approvalBox { margin-top:10px; text-align:left; }
#codeForm { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
#codeForm label { flex:1; min-width:160px; margin:0; }
.code-input { font-size:26px; letter-spacing:8px; text-align:center; font-family:ui-monospace,Menlo,monospace; }
.errtext { color:#f87171; }