:root{
  --bg:#0e0f12; --fg:#e6e7eb; --muted:#9aa0a6; --primary:#6ee7ff;
  --card:#17181d; --accent:#2a2f3a; --danger:#ff5c5c;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--accent);position:sticky;top:0;background:var(--bg);z-index:2}
.title{font-weight:700;font-size:18px;letter-spacing:.5px}
.conn{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--accent)}
.conn-on{color:#0f0;border-color:#0f0}
.conn-off{color:#999}
.h{margin:14px 16px 10px}
.screen{display:none;max-width:900px;margin:0 auto;padding-bottom:80px}
.screen.active{display:block}
.list{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.item{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:12px}
.item button{width:100%;text-align:left}
.btn{appearance:none;border:1px solid var(--accent);background:var(--card);color:var(--fg);padding:10px 14px;border-radius:10px}
.btn:hover{filter:brightness(1.05)}
.btn.primary{border-color:var(--primary);color:var(--bg);background:var(--primary)}
.btn.danger{border-color:var(--danger);color:#fff;background:var(--danger)}
.btn.block{width:100%}
.icon{display:flex;flex-direction:column;align-items:center;gap:4px}
.icon span{font-size:12px}
nav.bar{display:flex;gap:10px;position:sticky;bottom:0;padding:10px;border-top:1px solid var(--accent);background:linear-gradient(180deg, #0e0f1200, var(--bg))}
nav.bar .btn{flex:1}
nav.dock{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:8px 12px;background:var(--bg);border-top:1px solid var(--accent)}
.form{display:flex;flex-direction:column;gap:10px;padding:0 12px}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--accent);background:#0f1116;color:var(--fg)}
textarea.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
dialog{border:none;border-radius:16px;padding:16px;background:#12141a;color:var(--fg);max-width:92%;width:420px}
.modal-actions{margin-top:14px;display:flex;gap:8px;justify-content:flex-end}
@media (min-width:780px){
  nav.dock{position:sticky;bottom:0;max-width:900px;margin:0 auto}
}