:root{--bg:#f6f7f9;--card:#fff;--ink:#1c2330;--mute:#5d6778;--line:#dde1e8;--acc:#1f5fd6}
@media (prefers-color-scheme:dark){:root{--bg:#10141b;--card:#181e28;--ink:#e8ecf3;--mute:#9aa5b8;--line:#2a3342;--acc:#6ea0ff}}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:0 16px 40px}
header,.bar,#app{max-width:900px;margin:0 auto}
h1{font-size:1.6rem;margin:32px 0 4px}.sub{margin:0 0 20px;color:var(--mute)}
.bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-bottom:16px}
.loginform{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);min-width:200px}
button{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:10px 20px;font:inherit;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}
button:disabled{opacity:.55;cursor:wait}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;color:inherit;text-decoration:none}
.tile:hover,.tile:focus-visible{border-color:var(--acc);outline:none}
.tile h2{margin:0 0 6px;font-size:1.25rem;color:var(--acc)}
.tile p{margin:0;color:var(--mute)}