:root { --bg:#f6f7f9; --card:#fff; --line:#dfe3e8; --text:#1f2937; --muted:#6b7280; --blue:#2f5496; --green:#1e7b34; --red:#b42318; --amber:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--bg); }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
a { color: var(--blue); }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 18px 0 6px; color: var(--blue); display:flex; justify-content:space-between; }
h2 .sub { color: var(--muted); font-weight: normal; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 8px 16px; background:var(--blue); color:#fff; }
.topbar a, .topbar .link { color:#fff; text-decoration:none; margin-left:14px; background:none; border:0; font:inherit; cursor:pointer; padding:0; }
.topbar .brand { font-weight:bold; margin:0; }
.topbar nav { display:flex; align-items:center; }
.topbar form { display:inline; }
.flash { padding: 8px 12px; border-radius: 6px; margin: 8px auto; max-width: 1200px; }
.flash.notice { background:#e6f4ea; color:var(--green); }
.flash.alert { background:#fde8e6; color:var(--red); }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { width: 320px; text-align:center; }
.login-card input[type=password] { width:100%; margin-bottom:10px; }
input, select, textarea { font: inherit; padding: 5px 7px; border:1px solid var(--line); border-radius:5px; background:#fff; }
input[type=submit], button, .btn { cursor:pointer; background:var(--blue); color:#fff; border:0; padding:6px 12px; border-radius:5px; text-decoration:none; font: inherit; }
input.small, button.small { padding: 3px 8px; font-size: 12px; }
.danger { background: var(--red); }
.secondary { background: var(--muted); }
input:disabled, select:disabled { background:#f3f4f6; color:#4b5563; border-color:#eee; cursor: default; opacity: 1; }
[hidden] { display:none !important; }
form.inline { display:inline; }
label { display:block; margin-bottom: 8px; color: var(--muted); font-size:12px; }
label input, label select, label textarea { display:block; width:100%; color:var(--text); font-size:14px; margin-top:2px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.muted { color: var(--muted); }
.tag { font-size: 11px; background:#e5e7eb; color:var(--muted); padding:1px 6px; border-radius: 10px; vertical-align: middle; }
table { border-collapse: collapse; width:100%; }
td, th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align:left; vertical-align: middle; }
th { color: var(--muted); font-weight: normal; font-size:12px; }
.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
.list td, .list th { padding: 6px 10px; }
.pos { color: var(--green); } .neg { color: var(--red); }
tr.total td { font-weight: bold; border-top: 2px solid var(--line); }
.list td:first-child a { font-weight: bold; }
.month-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.month-head .actions { display:flex; gap:8px; }
.cols { display:grid; grid-template-columns: 1fr 360px; gap: 24px; align-items:start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.entries { background:var(--card); border:1px solid var(--line); border-radius:8px; padding: 8px 16px 16px; }
.results { background:var(--card); border:1px solid var(--line); border-radius:8px; padding: 8px 16px 16px; position: sticky; top: 12px; }
.results h2:first-child { margin-top: 6px; }
.entries-table td { padding: 3px 4px; }
.entries-table input[type=text], .entries-table input[type=number] { width:100%; }
.entries-table td.st { width: 104px; } .entries-table td.amt { width: 130px; } .entries-table td.ops { width: 1%; white-space:nowrap; }
.entries-table td.amt input { text-align:right; }
.entries-table td.notes { width: 28%; }
.entries-table tr.ok input[type=text], .entries-table tr.ok input[type=number] { background:#f0faf2; }
.entries-table tr.pending input[type=text], .entries-table tr.pending input[type=number] { background:#fff8e1; }
.entries-table tr.add td { border-bottom: 0; }
.entries-table tr.subtotal td { font-weight: bold; background: #f3f6fa; border-top: 2px solid var(--line); }
.entries-table tr.subtotal td.amt { padding-right: 10px; }
.entries-table tr.add input { background:#fafafa; }
.status { width: 100%; padding: 3px 4px; border-radius: 4px; font-weight: bold; font-size: 12px; border: 1px solid transparent; cursor: pointer; }
.legend .status { display:inline-block; width:auto; padding: 1px 6px; margin: 0 2px; }
.status.open { background:#e5e7eb; color:var(--muted); }
.status.pending { background:#ffeb9c; color:var(--amber); }
.status.ok { background:#c6efce; color:var(--green); }
.results tr.ok td:first-child { color: var(--green); } .results tr.pending td:first-child { color: var(--amber); }
hr { border:0; border-top:1px solid var(--line); margin: 20px 0; }
.groups td.ord { width: 70px; } .groups td.ord input { width: 60px; }
.groups td.ctr { text-align:center; }
.groups input[type=text] { width: 100%; }
.groups tr.add td { border-bottom: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }