:root { --bg:#f8fafc; --fg:#0f172a; --muted:#64748b; --card:#fff; --line:#e2e8f0; --accent:#4f46e5; --danger:#dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8; --card:#111827; --line:#1f2937; --accent:#818cf8; --danger:#f87171; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main { max-width:560px; margin:0 auto; padding:16px; }
h1 { margin:8px 0 16px; font-size:28px; }
h2 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:28px 0 8px; }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.error { color:var(--danger); min-height:1.4em; }
.center { text-align:center; padding-top:18vh; }
input { width:100%; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); }
button { padding:12px 16px; font-size:16px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; }
button.ghost { background:none; color:var(--muted); padding:6px 8px; font-size:14px; }
button.big { width:100%; padding:16px; font-size:18px; }
button:disabled { opacity:.5; }
.row { display:flex; gap:8px; align-items:center; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.card > div { padding:12px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.card > div:last-child { border-bottom:0; }
.card .grow { flex:1; min-width:0; }
.tag { font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:1px 8px; }
.link { word-break:break-all; font-size:14px; padding:10px; background:var(--card); border:1px dashed var(--line); border-radius:10px; margin:8px 0; }
header.top { display:flex; justify-content:space-between; align-items:center; }