:root { --ink:#222; --mute:#666; --line:#d9d9d9; --bg:#fff; --soft:#f3f3f3; --bad:#9b1c1c; --good:#1f6f3f; --warn:#8a5a00; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; }
header.top { display:flex; align-items:center; gap:18px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--soft); flex-wrap:wrap; }
header .brand { font-weight:700; text-decoration:none; }
header nav a { margin-right:12px; text-decoration:none; color:var(--mute); }
header nav a:hover { color:var(--ink); }
header .who { margin-left:auto; color:var(--mute); }
main { padding:18px; max-width:1500px; }
footer { padding:12px 18px; color:var(--mute); border-top:1px solid var(--line); font-size:12px; }
h1 { font-size:20px; margin:0 0 12px; } h2 { font-size:16px; margin:22px 0 8px; } h3 { font-size:14px; margin:14px 0 6px; }
.flash { margin:12px 18px 0; padding:10px 12px; border:1px solid var(--line); background:#fafafa; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--soft); font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; white-space:nowrap; }
tr:hover td { background:#fafafa; }
.badge { display:inline-block; padding:1px 7px; border:1px solid var(--line); border-radius:10px; font-size:12px; white-space:nowrap; }
.badge.valid, .badge.ok { border-color:var(--good); color:var(--good); }
.badge.invalid, .badge.needs_credit_note, .badge.bad { border-color:var(--bad); color:var(--bad); }
.badge.incomplete, .badge.pending, .badge.submitted, .badge.warn { border-color:var(--warn); color:var(--warn); }
.badge.ready, .badge.approved { border-color:var(--ink); }
.env { font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border:1px solid var(--ink); }
.env.production { background:var(--ink); color:#fff; }
.env.mock { border-style:dashed; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.card { border:1px solid var(--line); padding:12px 14px; }
.card .counts a { display:inline-block; margin:2px 8px 2px 0; text-decoration:none; }
.missing { color:var(--bad); font-weight:600; }
.derived { color:var(--mute); font-size:12px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 1000px) { .cols { grid-template-columns:1fr; } }
pre { background:var(--soft); padding:10px; overflow:auto; max-height:520px; font-size:12px; border:1px solid var(--line); }
form.inline { display:inline; }
button, .btn { font:inherit; padding:5px 12px; border:1px solid var(--ink); background:#fff; cursor:pointer; }
button.primary { background:var(--ink); color:#fff; }
button.danger { border-color:var(--bad); color:var(--bad); }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
label { display:block; font-size:12px; color:var(--mute); margin-top:8px; }
input[type=text], input[type=password], input[type=date], select, textarea { font:inherit; padding:5px 7px; border:1px solid var(--line); width:100%; max-width:420px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:4px 16px; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:4px 16px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.filters label { margin:0; }
.filters input, .filters select { width:auto; min-width:120px; }
.problems li { margin:3px 0; } .problems code { color:var(--mute); font-size:11px; }
.kv td:first-child { color:var(--mute); width:200px; }
.small { font-size:12px; color:var(--mute); }
.login { max-width:360px; margin:60px auto; }
details summary { cursor:pointer; color:var(--mute); }