:root { --bg:#f5f6f8; --card:#fff; --text:#1c2430; --muted:#5f6b7a; --accent:#0b5cad; --on-accent:#fff; --line:#d9dee5; --ok:#1a7f3c; --bad:#b3261e; --on-bad:#fff; --field:#fff; --tint:#eaeff5; --head:#0f1f33; --head-link:#cfe2ff; --bad-bg:#fdecea; --bad-line:#e8b4b0; --bad-text:#b3261e; --ok-bg:#e3f4e8; --ok-text:#1a6a35; --warn-bg:#fdf1d8; --warn-text:#8a5a00; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10151a; --card:#1a212a; --text:#e6e9ed; --muted:#9aa5b1; --accent:#6aa9ff; --on-accent:#0b1220; --line:#323b46; --ok:#5fd086; --bad:#ff8b82; --on-bad:#1a0505; --field:#14181d; --tint:#252d38; --head:#0b1320; --head-link:#a9cbff; --bad-bg:#3a1f22; --bad-line:#6b3338; --bad-text:#ff9a92; --ok-bg:#16301f; --ok-text:#7fe0a0; --warn-bg:#3b2d12; --warn-text:#f2c46d; }
}
* { box-sizing:border-box; }
html { color-scheme: light dark; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, "Segoe UI", sans-serif; }
/* one font everywhere: form controls do not inherit it unless told to */
input, button, select, textarea { font:inherit; color:inherit; }
a, a:visited { color:var(--accent); }
header { background:var(--head); color:#fff; border-bottom:1px solid var(--line); padding:10px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
header nav { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
header a, header a:visited { color:var(--head-link); text-decoration:none; }
header a:hover { color:#fff; }
header button.secondary { color:var(--head-link); border-color:var(--head-link); }
main { max-width:1000px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
/* only four text styles: 24 semibold (page title, big numbers), 16 semibold (headings, labels, names, buttons), 16 regular (body), 14 regular (notes, table headings, pills) */
strong, b, th, h1, h2, h3 { font-weight:600; }
h1 { font-size:1.5rem; margin:.2em 0 .6em; } h2 { font-size:1rem; margin:.2em 0 .6em; }
label { display:block; margin:10px 0 4px; font-weight:600; }
label input[type=checkbox] { margin-right:6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea { width:100%; max-width:420px; padding:9px; border:1px solid var(--line); border-radius:6px; background:var(--field); color:var(--text); }
input[type=file] { max-width:100%; }
input[type=file]::file-selector-button { font:inherit; background:var(--card); color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:7px 14px; margin-right:10px; cursor:pointer; }
button, .btn { background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:6px; padding:9px 16px; cursor:pointer; text-decoration:none; display:inline-block; font-weight:600; }
button.secondary { background:transparent; color:var(--accent); }
button.danger { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad-text); }
button.small { padding:1px 10px; font-size:1rem; line-height:1.4; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:4px 10px; border-bottom:1px solid var(--line); vertical-align:middle; line-height:1.35; }
th { background:var(--tint); color:var(--muted); font-size:.875rem; font-weight:400; }
.tablewrap { overflow-x:auto; padding:8px 12px; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:12px; border:1px solid var(--line); background:var(--card); }
.flash.danger { border-color:var(--bad); color:var(--bad); } .flash.success { border-color:var(--ok); color:var(--ok); }
.muted { color:var(--muted); } .stats { display:flex; flex-wrap:wrap; gap:12px; }
.stat { flex:1 1 140px; background:var(--tint); border-radius:8px; padding:12px 14px; } .stat b { font-size:1.5rem; display:block; }
.subnav { background:var(--tint); border-radius:8px; padding:10px 14px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:0 0 14px; }
.pager { font-size:.875rem; display:flex; gap:16px; align-items:center; justify-content:center; color:var(--muted); }
form.inline { display:inline; }
@media (max-width:600px) { main { padding:12px; } }
.small { font-size:.875rem; } .right { text-align:right; }
.tiles { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 16px; }
.tile { flex:1 1 180px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; }
.tile b { font-size:1.5rem; line-height:1.3; }
.tile.warn { border-color:var(--warn-text); } .tile.warn b { color:var(--warn-text); }
.dropzone { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--tint); border:1px dashed var(--accent); border-radius:10px; padding:12px 18px; margin:0 0 16px; }
.dropzone.over { background:var(--card); border-style:solid; }
.dropzone h2 { margin:0 0 4px; } .dropzone p { margin:4px 0; }
.dropactions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:0 0 6px; }
.tabs { display:flex; gap:18px; flex-wrap:wrap; }
.tabs a { text-decoration:none; padding:8px 0; border-bottom:2px solid transparent; color:var(--muted); }
.tabs a span { font-size:.875rem; font-weight:400; margin-left:4px; }
.tabs a.on { color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters input[type=search] { width:16em; max-width:100%; } .filters select { width:auto; }
.filecell { display:flex; gap:12px; align-items:center; }
.pill { display:inline-block; padding:3px 12px; border-radius:99px; font-size:.875rem; font-weight:400; }
.pill.ok { background:var(--ok-bg); color:var(--ok-text); } .pill.warn { background:var(--warn-bg); color:var(--warn-text); }
.actionsrow { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:8px 0 12px; }
.dropinfo { flex:1 1 360px; }  .dropinfo p { margin:2px 0; } .dropactions { flex:0 0 auto; margin-left:auto; }
.pill { white-space:nowrap; }
a.tile { text-decoration:none; color:inherit; } a.tile:hover { border-color:var(--accent); }
.pill.bad { background:var(--bad-bg); color:var(--bad-text); }
.tight { padding:6px 10px; }
table.compact { table-layout:auto; } table.compact th, table.compact td { padding:3px 8px; }
.nowrap { white-space:nowrap; } .clip { max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.addrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px; }
.addrow input { flex:1 1 150px; max-width:none; } .addrow input.acct { flex:0 0 11em; }
.addrow .rowhint { flex:1 1 100%; }
.whoami { color:#dbe6ee; font-size:.875rem; padding:0 6px 0 10px; border-left:1px solid rgba(255,255,255,.25); line-height:1.25; } .whoami strong { display:block; font-size:.875rem; font-weight:600; color:#fff; }
.greetrow { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-start; justify-content:space-between; margin:0 0 6px; }
.greetrow h1 { margin-bottom:0; } .greetrow .sub { margin:2px 0 10px; color:var(--muted); }
.signedin { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 14px; line-height:1.3; text-align:right; margin-top:4px; }
.signedin span { display:block; font-size:.875rem; color:var(--muted); } .signedin strong { display:block; }