:root { --bg:#f6f7f9; --card:#fff; --text:#16181d; --muted:#5f6672; --line:#e3e6ea; --accent:#0b7a5a;
        --accent-text:#fff; --warn:#a33a1c; --ok:#0b7a5a; --radius:14px; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111317; --card:#1a1d23; --text:#eceef1; --muted:#9aa1ac; --line:#2b3038; --accent:#2fbf8f;
          --accent-text:#08140f; --warn:#ff8a6b; --ok:#2fbf8f; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header, main { max-width:560px; margin:0 auto; padding:0 16px; }
header { padding-top:24px; }
h1 { font-size:26px; margin:0; }
h2 { font-size:20px; margin:0 0 8px; }
.sub, .muted { color:var(--muted); margin:4px 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 12px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.name { font-weight:600; font-size:17px; }
.chip { font-size:13px; padding:2px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.chip.ok { color:var(--ok); border-color:var(--ok); }
.chip.warn { color:var(--warn); border-color:var(--warn); }
.login { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; color:var(--muted); font-size:14px; }
button, .btn { font:inherit; font-weight:600; border-radius:10px; border:1px solid var(--accent); background:var(--accent);
  color:var(--accent-text); padding:12px 16px; min-height:48px; width:100%; margin-top:12px; cursor:pointer;
  text-align:center; text-decoration:none; display:block; }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); }
button.small { width:auto; min-height:36px; padding:6px 12px; margin:0; font-size:14px; background:transparent;
  color:var(--warn); border-color:var(--warn); }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
label { display:block; font-weight:600; margin:14px 0 4px; }
.hint { color:var(--muted); font-size:14px; margin:4px 0 0; }
input, textarea { font:inherit; width:100%; padding:12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); }
textarea { min-height:140px; font-family:ui-monospace,monospace; font-size:13px; }
.code { font:700 34px/1.2 ui-monospace,monospace; letter-spacing:4px; text-align:center; padding:16px;
  border:2px dashed var(--accent); border-radius:var(--radius); margin:12px 0; user-select:all; word-break:break-all; }
.err { color:var(--warn); }
ol { padding-left:20px; margin:8px 0; }
li { margin:4px 0; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--muted); border-top-color:transparent;
  border-radius:50%; animation:s 1s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes s { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }
footer { color:var(--muted); font-size:13px; padding:8px 0 32px; }