:root { color-scheme: dark; font-family: Inter, Segoe UI, system-ui, sans-serif; background:#0b0d10; color:#f4f6f8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#0b0d10; overscroll-behavior:none; }
body { min-height:100vh; }
.shell { width:min(560px,92vw); margin:8vh auto; }
.brand { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.logo { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; font-weight:900; background:#f2f4f6; color:#101216; }
h1 { margin:0 0 4px; font-size:28px; } p { margin:0; color:#9ca6b2; }
.card { background:#14181d; border:1px solid #242b33; border-radius:22px; padding:22px; box-shadow:0 20px 80px #0008; }
label { display:block; margin:15px 0 7px; color:#b9c1ca; font-size:14px; }
input { width:100%; padding:14px 15px; border-radius:12px; border:1px solid #2e3740; background:#0e1115; color:#fff; outline:none; font-size:17px; }
input:focus { border-color:#6f7b88; }
button { border:0; border-radius:12px; background:#f2f4f6; color:#101216; font-weight:750; padding:12px 16px; cursor:pointer; }
.card button { width:100%; margin-top:18px; font-size:16px; }
.secondary { background:#262d35; color:#eef2f5; }
.secondary.active { background:#dce8ff; color:#111820; }
.danger { background:#3a1d21; color:#ffdce0; }
.status { margin-top:13px; font-size:14px; min-height:20px; }
.hidden { display:none !important; }
.session { height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.toolbar { min-height:58px; display:flex; gap:8px; align-items:center; padding:8px 10px; background:#11151a; border-bottom:1px solid #252b33; overflow-x:auto; flex:none; scrollbar-width:none; }
.toolbar::-webkit-scrollbar { display:none; }
.toolbar strong { margin-right:auto; white-space:nowrap; }
.toolbar span { color:#98a3ae; font-size:12px; white-space:nowrap; }
.toolbar button { white-space:nowrap; }
.compact { min-width:44px; padding:10px 12px; }
.screen-wrap { flex:1; min-height:0; position:relative; overflow:hidden; display:grid; place-items:center; background:#050607; outline:none; touch-action:none; user-select:none; -webkit-user-select:none; }
#screen { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; transform-origin:center center; will-change:transform; }
#emptyScreen { position:absolute; color:#7e8994; pointer-events:none; }
.cursor-dot { position:absolute; width:16px; height:16px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #0008; transform:translate(-50%,-50%); pointer-events:none; z-index:3; }
.cursor-dot::after { content:""; position:absolute; left:5px; top:5px; width:2px; height:2px; border-radius:50%; background:#fff; }
.gesture-hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); max-width:min(620px,90%); padding:7px 11px; border-radius:12px; background:#0a0d10cc; color:#b8c0c9; font-size:12px; pointer-events:none; opacity:.9; text-align:center; transition:opacity .3s; }
.keyboard-dock { display:flex; gap:8px; background:#11151a; border-top:1px solid #252b33; padding:8px; flex:none; }
.keyboard-dock input { flex:1; margin:0; font-size:16px; padding:11px 12px; }
.keyboard-dock button { flex:none; }
.mobilebar { display:none; background:#11151a; border-top:1px solid #252b33; padding:8px; gap:6px; flex:none; }
.mobilebar button { flex:1; background:#252c34; color:#fff; min-width:0; padding:10px 7px; font-size:12px; }
.mobilebar button.active { background:#dce8ff; color:#111820; }
@media (max-width:720px) {
  .toolbar { min-height:54px; }
  .toolbar span { display:none; }
  .toolbar strong { font-size:13px; max-width:125px; overflow:hidden; text-overflow:ellipsis; }
  .toolbar button { padding:9px 10px; font-size:12px; }
  .mobilebar { display:flex; }
  .gesture-hint { bottom:10px; font-size:11px; }
}