:root { --bg:#f5f6f8; --card:#fff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb; --accent:#2563eb; --bad:#fee2e2; --bad-text:#991b1b; --exp:#f8fafc; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--text); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:24px; padding:10px 20px; background:#111827; color:#fff; }
.topbar .brand { color:#fff; font-weight:600; font-size:16px; }
.topbar nav { display:flex; gap:16px; flex:1; } .topbar nav a { color:#d1d5db; } .topbar nav a.muted { color:#6b7280; }
.topbar form { margin:0; } .topbar .muted { color:#9ca3af; margin-right:8px; }
main { padding:20px; max-width:1600px; margin:0 auto; }
h1 { font-size:22px; margin:0 0 12px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:15px; margin:18px 0 8px; }
.page-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:18px; margin-bottom:18px; }
.card.narrow { max-width:520px; margin:30px auto; }
.muted { color:var(--muted); } .small { font-size:12px; } .zero { color:#c4c8cf; } .danger { color:var(--bad-text); }
.nowrap { white-space:nowrap; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px; }
.flash.success { background:#dcfce7; color:#166534; } .flash.error { background:var(--bad); color:var(--bad-text); }
label { display:block; margin-bottom:12px; font-weight:500; }
label input, label select, label textarea { display:block; width:100%; margin-top:4px; padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; }
label.check input { display:inline; width:auto; margin-right:6px; }
label small { display:block; font-weight:400; margin-top:3px; }
.row { display:flex; gap:12px; } .row label { flex:1; }
.inline { display:inline-flex; align-items:center; gap:8px; } .inline label { margin:0; display:flex; align-items:center; gap:6px; }
.inline label select { margin:0; width:auto; }
button, .button { font:inherit; padding:7px 14px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; color:var(--text); display:inline-block; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.link { border:0; background:none; padding:0; color:var(--accent); cursor:pointer; } button.link.danger { color:var(--bad-text); }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:8px; }
table { border-collapse:collapse; width:100%; }
th, td { padding:6px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:#f9fafb; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#374151; position:sticky; top:0; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.grid td.client { min-width:200px; font-weight:500; } .grid td.cur { font-weight:500; color:var(--muted); }
.grid td.label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.grid tr.expected td { background:var(--exp); }
.grid tr.actual td { border-bottom:2px solid #d1d5db; }
.grid td.annual, .grid th.annual { font-weight:600; border-left:2px solid #d1d5db; }
.grid td.project, .grid th.project { border-left:1px dashed #d1d5db; }
.grid td.mismatch { background:var(--bad) !important; color:var(--bad-text); font-weight:600; }
.grid tfoot td { font-weight:600; background:#f3f4f6; }
.grid.compact td, .grid.compact th { padding:4px 6px; }
table.list { background:var(--card); }
table.list tr.inactive td { color:var(--muted); text-decoration:line-through; }
table.list tfoot td { font-weight:600; }