:root{
  --bg:#0b1220;
  --bg-2:#131c30;
  --card:#172136;
  --fg:#e6edf7;
  --muted:#8996ae;
  --danger:#ef4444;
  --ok:#22c55e;
  --theme:#0ea5e9;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--theme);text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}

/* ----- auth (login) ----- */
.auth{max-width:380px;margin:0 auto;padding:clamp(2rem,8vh,5rem) 1.25rem 2rem}
.brand{text-align:center;margin-bottom:2rem}
.logo{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:22px;background:var(--theme);color:#fff;font-weight:700;font-size:1.8rem;letter-spacing:-1px;margin-bottom:1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.brand h1{font-size:1.5rem;margin:0 0 .25rem;font-weight:600}
form label{display:block;margin-bottom:.9rem}
form label span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
form input{width:100%;padding:.85rem 1rem;font-size:1rem;color:var(--fg);background:var(--card);border:1px solid #233049;border-radius:12px;outline:none}
form input:focus{border-color:var(--theme);box-shadow:0 0 0 3px color-mix(in srgb, var(--theme) 25%, transparent)}
button,.primary{width:100%;padding:.95rem 1rem;font-size:1rem;font-weight:600;color:#fff;background:var(--theme);border:0;border-radius:12px;cursor:pointer;display:inline-block;text-align:center}
button.ghost,.ghost{background:transparent;border:1px solid #2a3753;color:var(--fg)}
.alert{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fecaca;padding:.7rem .9rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem}
footer{margin-top:2rem;text-align:center}

/* ----- home ----- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #1a2540}
.brand-sm{display:flex;align-items:center;gap:.6rem;font-weight:600}
.logo-sm{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--theme);color:#fff;border-radius:8px;font-size:.75rem;font-weight:700}
.home{max-width:520px;margin:0 auto;padding:1.25rem 1.25rem 3rem}
.hero{text-align:center;padding:1.5rem 0 1rem}
.dial{position:relative;width:200px;height:200px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--theme) 18%,var(--bg-2)), var(--bg-2) 70%);border:1px solid #253253;color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;letter-spacing:.2px;box-shadow:0 20px 50px rgba(14,165,233,.12),inset 0 0 0 1px rgba(255,255,255,.04)}
.dial .ring{position:absolute;inset:8px;border-radius:50%;border:2px solid color-mix(in srgb, var(--theme) 55%, transparent);opacity:.7}
.dial .dot{position:absolute;top:26px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--theme);transform:translateX(-50%);box-shadow:0 0 14px var(--theme)}
.dial .label{position:relative;z-index:2}
.dial.is-active .ring{border-color:var(--ok);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:.35}}
.server-line{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;padding:.45rem .9rem;border:1px solid #253253;border-radius:999px;font-size:.9rem;color:var(--muted)}
.dotg{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
#status{margin-top:.6rem}

.card{background:var(--card);border:1px solid #1f2a45;border-radius:16px;padding:1.1rem;margin-top:1.25rem}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.card-head h2{font-size:1rem;margin:0;font-weight:600}
.fp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.75rem;color:var(--muted)}
.qr-wrap{display:flex;justify-content:center;padding:.6rem;background:#fff;border-radius:12px}
.qr{width:min(260px,100%);height:auto;image-rendering:pixelated}
.row{display:flex;gap:.6rem;margin-top:.9rem}
.row .primary,.row .ghost{flex:1;padding:.75rem}
.raw{margin-top:.8rem}
.raw summary{color:var(--muted);font-size:.85rem;cursor:pointer}
.raw code{display:block;word-break:break-all;background:#0c1426;border:1px solid #1d2944;border-radius:10px;padding:.6rem .7rem;margin-top:.5rem;font-size:.8rem;color:#cbd5e1;font-family:ui-monospace,Menlo,Consolas,monospace}
.copy.copied{background:var(--ok);border-color:var(--ok);color:#07120b}