:root { --bg:#0f1115; --panel:#181b22; --line:#2a2f3a; --text:#e6e8ee; --muted:#8b93a3; --accent:#4c8dff; --err:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, sans-serif; overscroll-behavior:none; }
[hidden] { display:none !important; }
.card { max-width:420px; margin:0 auto; padding:max(24px, env(safe-area-inset-top)) 16px 24px; }
h1 { font-size:1.4rem; margin:0 0 16px; }
form { display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
label.check { flex-direction:row; align-items:center; gap:8px; }
input, select { background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px 12px; font-size:1rem; width:100%; }
input[type=checkbox] { width:auto; }
.row { display:flex; gap:8px; } .grow { flex:1; } .port { width:90px; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:12px; font-size:1rem; cursor:pointer; }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
details { border:1px solid var(--line); border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; gap:12px; }
summary { cursor:pointer; color:var(--muted); }
.err { color:var(--err); min-height:1.2em; margin:0; }

#session { position:fixed; inset:0; background:#000; }
#display { position:absolute; inset:0; overflow:hidden; outline:none; cursor:none; }
#display > div { margin:auto; }
#bar { position:absolute; top:max(8px, env(safe-area-inset-top)); right:8px; display:flex; gap:6px; opacity:.35; transition:opacity .2s; }
#bar:hover, #bar:focus-within { opacity:1; }
#bar button { padding:8px 12px; background:#000a; border:1px solid #fff3; }
#kbProxy { position:fixed; left:-1000px; top:0; width:1px; height:1px; opacity:0; }
#status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 16px; border-radius:8px; background:#000c; display:none; max-width:80%; text-align:center; }
#status.show { display:block; }