:root { --bg:#f6f7f9; --card:#fff; --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --primary:#2563eb; --primary-fg:#fff; --ok:#047857; --err:#b91c1c; --warn:#b45309; --radius:10px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b0f17; --card:#111827; --fg:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --primary:#3b82f6; } }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; color:var(--fg); }
.brand .mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--primary); color:#fff; font-weight:700; }
header.top { display:flex; align-items:center; gap:24px; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; }
header.top nav { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
header.top nav a { padding:6px 10px; border-radius:6px; color:var(--muted); }
header.top nav a.on, header.top nav a:hover { background:var(--bg); color:var(--fg); text-decoration:none; }
header.top .me { display:flex; gap:12px; align-items:center; }
main.page { max-width:1100px; margin:24px auto; padding:0 16px; }
main.auth { max-width:420px; margin:8vh auto; padding:0 16px; }
main.auth .brand { justify-content:center; margin-bottom:20px; font-size:20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
h1 { font-size:20px; margin:0 0 16px; } h2 { font-size:16px; margin:0 0 12px; } h3 { font-size:14px; margin:16px 0 8px; }
.muted { color:var(--muted); } .small { font-size:12px; }
label { display:block; font-weight:500; margin:10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], select, textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; }
textarea { min-height:90px; font-family: ui-monospace, monospace; font-size:12px; }
input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb, var(--primary) 40%, transparent); border-color:var(--primary); }
.check { display:flex; align-items:center; gap:8px; margin:8px 0; font-weight:400; }
button, .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; cursor:pointer; }
button.primary, .btn.primary { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }
button.danger { color:var(--err); }
button.link { border:0; background:none; padding:0; color:var(--primary); }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row > * { flex:1; min-width:180px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; align-items:center; }
form.inline { display:inline; }
.alert { padding:10px 14px; border-radius:8px; margin-bottom:12px; border:1px solid; }
.alert.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); background:color-mix(in srgb, var(--ok) 8%, transparent); }
.alert.err { color:var(--err); border-color:color-mix(in srgb, var(--err) 30%, transparent); background:color-mix(in srgb, var(--err) 8%, transparent); }
.alert.warn { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); background:color-mix(in srgb, var(--warn) 8%, transparent); }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:500; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.badge.ok { color:var(--ok); } .badge.err { color:var(--err); } .badge.warn { color:var(--warn); } .badge.run { color:var(--primary); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; flex-wrap:wrap; }
.tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--muted); }
.tabs button.on { color:var(--fg); border-bottom-color:var(--primary); }
.codes { display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; font-family: ui-monospace, monospace; }
.qr svg { width:200px; height:200px; background:#fff; padding:8px; border-radius:8px; }
.steps li { margin:6px 0; } .steps .t { font-weight:500; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width:760px) { .grid2 { grid-template-columns:1fr; } header.top { flex-wrap:wrap; } }
.stat { font-size:24px; font-weight:600; }
code { font-family: ui-monospace, monospace; font-size:12px; background:var(--bg); padding:1px 4px; border-radius:4px; }