:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --muted:#6b7280; --accent:#2563eb; --err:#b91c1c; --ok:#15803d; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111418; --card:#1b2027; --fg:#e8eaed; --muted:#9aa3ad; --accent:#60a5fa; --err:#f87171; --ok:#4ade80; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
main { max-width:640px; margin:0 auto; padding:16px 16px 88px; }
h1 { font-size:1.4rem; margin:8px 0 16px; }
h2 { font-size:1.05rem; margin:0 0 8px; }
.card { background:var(--card); border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
label { display:block; margin-bottom:10px; font-size:.9rem; color:var(--muted); }
input, select { display:block; width:100%; margin-top:4px; padding:10px; font-size:1rem; border:1px solid #c9ced6; border-radius:8px; background:var(--card); color:var(--fg); }
button { width:100%; padding:12px; font-size:1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button.small { width:auto; padding:6px 10px; font-size:.85rem; }
.muted { color:var(--muted); font-size:.9rem; }
.error { color:var(--err); }
.flash { background:var(--card); border-left:4px solid var(--accent); padding:10px; margin-bottom:12px; border-radius:8px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.big { font-size:1.6rem; font-weight:600; }
.row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(127,127,127,.15); }
.row img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.row .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row a { color:inherit; text-decoration:none; }
.preview { background:var(--bg); border-radius:8px; padding:10px; white-space:pre-wrap; }
nav.bottom { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--card); border-top:1px solid rgba(127,127,127,.2); }
nav.bottom a { flex:1; text-align:center; padding:8px 0 10px; color:var(--muted); text-decoration:none; font-size:1.1rem; }
nav.bottom a span { display:block; font-size:.7rem; }
nav.bottom a.active { color:var(--accent); }
.switch { width:auto; }