/* Shared look for the login page, the dashboard and the top bar on every app. */
:root {
  color-scheme: light;
  --paper:#f5f4f7; --surface:#fff; --ink:#182029; --ink-2:#4a5560; --muted:#7a8590; --line:#d8ddd7;
  --accent:#146f6a; --gain:#2c7a4b; --loss:#a53a34; --warn:#a9651a; --warn-soft:#f7ecdc;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper:#131a20; --surface:#1a2229; --ink:#e7ebe9; --ink-2:#b4bdc2; --muted:#7e8a93; --line:#2c363e;
  --accent:#5fc2b9; --gain:#7cc79a; --loss:#e2857e; --warn:#e0a55c; --warn-soft:#33281a;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#131a20; --surface:#1a2229; --ink:#e7ebe9; --ink-2:#b4bdc2; --muted:#7e8a93; --line:#2c363e;
  --accent:#5fc2b9; --gain:#7cc79a; --loss:#e2857e; --warn:#e0a55c; --warn-soft:#33281a;
}
/* One family everywhere: Inter (variable weight, served locally), with tabular numbers so changing figures do not shift. */
@font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:13px/1.5 Inter, Roboto, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; font-variant-numeric:tabular-nums; padding:24px 16px 64px; }
h1 { font-size:16px; font-weight:700; margin:0; }
.sub { color:var(--muted); font-size:12px; font-weight:400; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:16px 18px; }

.topbar { display:flex; align-items:center; gap:10px; margin:-8px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:13px; }
.topbar .brand { color:var(--accent); font-weight:600; text-decoration:none; }
.topbar .brand:hover { text-decoration:underline; }
.topbar .crumb, .topbar .who { color:var(--muted); }
.topbar .spacer { flex:1; }
.topbar form { margin:0; }
.topbar button { font:inherit; font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink-2); cursor:pointer; }
.topbar button:hover { border-color:var(--accent); color:var(--accent); }

.apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-top:24px; }
.app { display:block; text-decoration:none; color:inherit; transition:border-color .12s, transform .12s; }
.app:hover, .app:focus-visible { border-color:var(--accent); transform:translateY(-1px); }
.app .icon { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; background:var(--accent); color:#fff; font-size:20px; margin-bottom:12px; }
.app h2 { font-size:16px; font-weight:600; margin:0 0 4px; }
.app p { margin:0; color:var(--ink-2); font-size:13px; }
.app .open { display:inline-block; margin-top:12px; color:var(--accent); font-size:12px; font-weight:600; }

.login { max-width:380px; margin:10vh auto 0; }
.login h1 { margin-bottom:4px; }
.login form { display:grid; gap:14px; margin-top:18px; }
.login label { display:grid; gap:4px; font-size:12px; color:var(--ink-2); }
.login input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); width:100%; }
.login input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.login button { font:inherit; font-weight:600; padding:9px 12px; border:0; border-radius:4px; background:var(--accent); color:#fff; cursor:pointer; }
.notice { margin-top:14px; padding:10px 14px; border-left:4px solid var(--warn); background:var(--warn-soft); font-size:13px; }
.notice.error { border-left-color:var(--loss); }

.topbar .link { color:var(--ink-2); text-decoration:none; }
.topbar .link:hover { color:var(--accent); text-decoration:underline; }
.notice.ok { border-left-color:var(--gain); }
.notice .secret { display:inline-block; margin-left:6px; padding:2px 8px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:14px; font-weight:600; letter-spacing:.02em; user-select:all; }

.admin { display:grid; gap:20px; margin-top:20px; }
.admin h2 { font-size:14px; font-weight:600; margin:0 0 10px; }
.admin table { border-collapse:collapse; width:100%; font-size:12px; }
.admin th, .admin td { padding:9px 10px; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.admin thead th { border-top:0; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.admin .tablewrap { overflow-x:auto; }
.admin .muted { color:var(--muted); }
.admin .badge { font-size:10px; padding:0 6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); margin-left:4px; }
.admin .actions { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-start; }
.admin summary { cursor:pointer; color:var(--accent); font-size:12px; font-weight:600; }
.admin details form, .admin .addform { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.admin details form { margin-top:8px; }
.admin form.inline { margin:0; }
.admin label { display:grid; gap:4px; font-size:12px; color:var(--ink-2); }
.admin input, .admin select { font:inherit; font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); min-width:220px; }
.admin select { min-width:110px; }
.admin button { font:inherit; font-size:12px; font-weight:600; padding:7px 12px; border:0; border-radius:4px; background:var(--accent); color:#fff; cursor:pointer; }
.admin button.danger { background:none; padding:0; color:var(--loss); }
.admin button.danger:hover { text-decoration:underline; }