:root{
  --ink:#0d0f14; --panel:#161a22; --panel-2:#1c212b; --line:#262c38;
  --text:#e6e9ef; --muted:#8b93a7; --rose:#ff4d6d; --rose-2:#ff7a90; --green:#3ddc97; --bad:#ff5d6c;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:40px 22px 60px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--rose),var(--rose-2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#14060a}
.brand .mark{font-weight:600;font-size:18px}
.brand .mark b{color:var(--rose)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
p{color:var(--muted);line-height:1.5;font-size:14px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
input{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:10px;font-size:15px;outline:none}
input:focus{border-color:var(--rose)}
button{cursor:pointer;border:0;border-radius:10px;font-family:var(--sans)}
.primary{background:var(--rose);color:#14060a;font-weight:650;padding:12px 18px;font-size:15px;width:100%;margin-top:16px}
.primary:hover{filter:brightness(1.08)}
.link{background:none;color:var(--rose-2);font-size:13px;text-decoration:underline;padding:0;margin-top:14px}
.ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);padding:8px 12px;font-size:13px}
.err{background:rgba(255,93,108,.14);border:1px solid var(--bad);color:#ffc2c8;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:14px;display:none}
.err.show{display:block}
.keyrow{display:flex;gap:8px;align-items:center;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:6px}
.keyrow code{font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:auto;white-space:nowrap;flex:1}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);display:inline-block;margin-right:8px}
.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.off{background:var(--bad)}
.status{font-size:14px;display:flex;align-items:center}
.muted{color:var(--muted);font-size:12.5px;line-height:1.5}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}