:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6470; --card:#fff; --line:#dde2e8; --accent:#0b5fff; --ok:#1a7f37; --warn:#b26a00; --bad:#c62828; --info:#5a5f66; --chip:#eef1f5; --code:#f0f2f5; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1217; --fg:#e6e9ee; --muted:#9aa4b2; --card:#171b22; --line:#2a313b; --accent:#6ea0ff; --ok:#3fb950; --warn:#e3a008; --bad:#f06565; --info:#9aa4b2; --chip:#232a34; --code:#1e242d; } }
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin:0; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header.top { display:flex; align-items:center; gap:18px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header.top .brand { font-weight:600; } header.top nav a { margin-right:12px; color:var(--fg); } header.top nav a.active { color:var(--accent); font-weight:600; }
header.top .user { margin-left:auto; color:var(--muted); display:flex; gap:10px; align-items:center; }
main { max-width:1280px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:0 0 12px; } h2 { font-size:15px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } h3 { font-size:14px; margin:12px 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.grid { display:grid; gap:14px; grid-template-columns: 1fr; } @media (min-width: 960px) { .grid.two { grid-template-columns: 1.1fr .9fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }
.tiles { display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom:14px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .tile .n { font-size:22px; font-weight:600; } .tile .l { color:var(--muted); font-size:12px; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.b-attach { background:#e6f4ea; color:var(--ok); border-color:#b7e1c1; } .b-new { background:#e8f0fe; color:var(--accent); border-color:#c6d8fd; } .b-unsure { background:#fff4e0; color:var(--warn); border-color:#f6ddaa; } .b-nvt { background:var(--chip); color:var(--info); }
.b-juist { background:#e6f4ea; color:var(--ok); } .b-onjuist { background:#fdecea; color:var(--bad); } .b-wacht { background:var(--chip); color:var(--info); } .b-geen { background:var(--chip); color:var(--info); } .b-onzeker { background:#fff4e0; color:var(--warn); }
@media (prefers-color-scheme: dark) { .b-attach{background:#12321c;border-color:#1f5a2e} .b-new{background:#14233f;border-color:#243d6b} .b-unsure{background:#3a2a08;border-color:#5c4410} .b-juist{background:#12321c} .b-onjuist{background:#3f1717} .b-onzeker{background:#3a2a08} }
.chip { display:inline-block; background:var(--chip); border-radius:6px; padding:1px 7px; font-size:12px; margin:2px 4px 2px 0; color:var(--fg); }
.muted { color:var(--muted); } .small { font-size:12px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-weight:600; font-size:12px; }
tr.row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:end; } .filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
input, select, textarea, button { font: inherit; color: inherit; } input, select, textarea { background:var(--card); border:1px solid var(--line); border-radius:7px; padding:6px 8px; }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:7px; padding:7px 12px; cursor:pointer; } button.secondary, .btn.secondary { background:var(--chip); color:var(--fg); } button.danger { background:var(--bad); }
button.small { padding:4px 9px; font-size:12px; }
.field { margin:8px 0; } .field .k { font-size:12px; color:var(--muted); } .field .v { white-space:pre-wrap; } .field .v.pre { background:var(--code); border-radius:7px; padding:8px 10px; }
.field .k .copy { float:right; }
.reasons li { margin:2px 0; }
.bar { height:6px; background:var(--chip); border-radius:3px; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--accent); }
.cand { padding:10px 0; border-bottom:1px solid var(--line); } .cand:last-child { border-bottom:0; } .cand .t { font-weight:600; }
details { margin:8px 0; } summary { cursor:pointer; color:var(--accent); }
.transcript .turn { display:grid; grid-template-columns: 44px 90px 1fr; gap:8px; padding:3px 0; } .transcript .who { color:var(--muted); }
.flash { background:#e8f0fe; color:var(--accent); border:1px solid #c6d8fd; border-radius:8px; padding:8px 12px; margin-bottom:12px; }
.timeline li { margin:4px 0; } .ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }
.checks li { padding:3px 0; } .checks .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; } .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.error{background:var(--bad)}
.actions form { display:inline-block; margin:0 6px 6px 0; }
.login { max-width:380px; margin:60px auto; }
@media (max-width: 760px) { table.responsive thead { display:none; } table.responsive tr { display:block; border-bottom:1px solid var(--line); padding:8px 0; } table.responsive td { display:block; border:0; padding:2px 0; } table.responsive td::before { content: attr(data-l) ": "; color:var(--muted); font-size:12px; } main { padding:10px; } }