:root { --ink:#1d2a1f; --muted:#5f6b61; --line:#d9dfd6; --bg:#f7f8f4; --card:#fff; --accent:#2f6b3a; --accent-ink:#fff; --warn:#8a5a00; --err:#a32020; }
@media (prefers-color-scheme: dark) { :root { --ink:#e6ece4; --muted:#a3ada2; --line:#334036; --bg:#141a15; --card:#1b231c; --accent:#7fbf8a; --accent-ink:#0f1a11; --warn:#e0b25a; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
header.top { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; color:var(--ink); }
.brand span { font-weight:400; color:var(--muted); margin-left:.4rem; }
.menu { display:flex; flex-wrap:wrap; gap:.2rem; flex:1; }
.menu a { padding:.3rem .55rem; border-radius:6px; text-decoration:none; color:var(--ink); }
.menu a.on, .menu a:hover { background:var(--accent); color:var(--accent-ink); }
.who { display:flex; gap:.8rem; align-items:center; color:var(--muted); }
.who form { margin:0; }
button { font:inherit; padding:.35rem .8rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer; }
.who button { background:none; color:var(--accent); }
main { padding:1rem; max-width:100%; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; }
.login { max-width:360px; margin:8vh auto; background:var(--card); padding:1.5rem; border:1px solid var(--line); border-radius:10px; }
.login label, .filters label { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.8rem; color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; margin-bottom:.8rem; }
.filters label { margin:0; }
input { font:inherit; padding:.35rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); }
.count { color:var(--muted); }
.error { color:var(--err); } .notice { color:var(--warn); } .empty { color:var(--muted); }
.grid-wrap { overflow:auto; max-height:75vh; border:1px solid var(--line); border-radius:8px; background:var(--card); }
table.grid { border-collapse:collapse; width:max-content; min-width:100%; }
.grid th { position:sticky; top:0; background:var(--card); text-align:left; font-weight:600; border-bottom:2px solid var(--line); padding:.4rem .6rem; white-space:nowrap; }
.grid th a { color:var(--ink); text-decoration:none; }
.grid td { padding:.3rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.grid .number { text-align:right; font-variant-numeric:tabular-nums; }
.grid th.w90 { min-width:90px; } .grid th.w120 { min-width:120px; } .grid th.w200 { min-width:200px; }
.grid tbody tr:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.tiles { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.8rem; }
.tiles a { display:block; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:10px; text-decoration:none; font-weight:600; }
.accounts span { display:inline-block; margin:0 .6rem .3rem 0; padding:.15rem .5rem; border:1px solid var(--line); border-radius:999px; }
footer { padding:1rem; color:var(--muted); font-size:.85rem; }
@media (max-width:640px) { .who { width:100%; justify-content:space-between; } }