:root { --bg:#f4f6f9; --card:#fff; --text:#1c2430; --muted:#5f6b7a; --accent:#1f6feb; --danger:#c62828; --border:#dde3ea; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161c; --card:#1b212a; --text:#e6ebf1; --muted:#98a4b3; --accent:#4c93ff; --danger:#ef6b6b; --border:#2c3541; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, sans-serif; }
main { max-width:720px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:1.5rem; margin:0 0 4px; }
h2 { font-size:1.1rem; margin:32px 0 12px; }
p.sub { color:var(--muted); margin:0 0 24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px; }
.narrow { max-width:420px; margin:12vh auto 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
a.app { display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; }
a.app:hover, a.app:focus-visible { border-color:var(--accent); }
a.app strong { display:block; font-size:1.05rem; }
a.app span { color:var(--muted); font-size:.9rem; }
button, .btn { font:inherit; padding:10px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .btn.secondary { background:transparent; color:var(--accent); }
button.danger { background:transparent; color:var(--danger); border-color:var(--danger); padding:4px 10px; }
button:disabled { opacity:.6; cursor:wait; }
input { font:inherit; width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); margin:4px 0 14px; }
label { font-size:.9rem; color:var(--muted); }
.msg { min-height:1.4em; margin-top:12px; color:var(--danger); }
.msg.ok { color:#2e7d32; }
ul.creds { list-style:none; padding:0; margin:0; }
ul.creds li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); }
ul.creds small { color:var(--muted); display:block; }
header.bar { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.hidden { display:none; }