:root {
  color-scheme: dark;
  --bg:#0a0a0a; --fg:#f5f5f0; --muted:#9b9b94; --card:#141414; --line:#2a2a2a;
  --accent:#e8ff2e; --err:#ff6b6b; --ok:#7dffa1;
  --display:'Anton','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html { background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); }
body { margin:0; min-height:100dvh; color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.logo { font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:22px;
  text-decoration:none; color:var(--fg); margin:calc(20px + env(safe-area-inset-top)) 0 8px; align-self:flex-start; max-width:440px; width:100%; }
main { width:100%; max-width:440px; flex:1; display:flex; flex-direction:column; justify-content:center; padding:16px 0 40px; }
h1 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:44px; line-height:1; margin:0 0 10px; }
h1 em { font-style:normal; color:var(--accent); }
.sub { color:var(--muted); margin:0 0 24px; }
label { display:block; font-weight:600; margin:0 0 6px; }
.field { margin-bottom:16px; }
input { width:100%; font:inherit; font-size:16px; color:var(--fg); background:var(--card);
  border:1.5px solid var(--line); border-radius:14px; padding:14px; min-height:52px; }
input:focus { outline:none; border-color:var(--accent); }
input[readonly] { color:var(--muted); background-color:rgba(255,255,255,.04); border-color:transparent; cursor:not-allowed; padding-right:44px; -webkit-user-select:none; user-select:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239b9b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
input[readonly]:focus { border-color:transparent; }
.btn { display:block; width:100%; min-height:54px; border:0; border-radius:16px; font:inherit; font-weight:700; font-size:17px;
  text-transform:uppercase; letter-spacing:.04em; background:var(--accent); color:#0a0a0a; cursor:pointer;
  text-align:center; text-decoration:none; padding:15px; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); margin-top:12px; }
.link { color:var(--muted); text-align:center; margin:16px 0 0; font-size:15px; }
.link a { color:var(--accent); }
.msg { min-height:1.4em; margin:12px 0 0; font-size:14px; text-align:center; color:var(--err); }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; margin:0 0 16px; }
.row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; } .row span:first-child { color:var(--muted); }
.badge { display:inline-block; padding:3px 12px; border-radius:999px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
.badge.on { background:var(--accent); color:#0a0a0a; } .badge.off { background:#2a1517; color:var(--err); }
.spin { width:32px; height:32px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--accent);
  animation:r 1s linear infinite; margin:0 0 16px; }
@keyframes r { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spin { animation:none; } }