:root { --ink:#1d1f23; --muted:#5f6670; --line:#d9dde3; --bg:#f6f7f9; --card:#fff; --accent:#1f5f8b; --accent-ink:#fff; --ok:#1d7a4a; --warn:#9a5b00; --err:#a32d2d; --pos:#1d7a4a; --neg:#a32d2d; }
* { box-sizing:border-box; }
html { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
body { margin:0; }
a { color:var(--accent); }
header.top { background:var(--card); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; gap:1.5rem; padding:.6rem 1.2rem; flex-wrap:wrap; }
header.top .brand { font-weight:700; text-decoration:none; color:var(--ink); }
header.top nav a { text-decoration:none; color:var(--muted); padding:.3rem .2rem; border-bottom:2px solid transparent; margin-right:.9rem; }
header.top nav a.active { color:var(--ink); border-color:var(--accent); }
header.top .spacer { flex:1; }
header.top .who { color:var(--muted); font-size:.9rem; }
main { max-width:1100px; margin:1.2rem auto; padding:0 1.2rem; }
h1 { font-size:1.45rem; margin:.2rem 0 1rem; }
h2 { font-size:1.1rem; margin:1.4rem 0 .6rem; }
h3 { font-size:1rem; margin:1rem 0 .4rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:.8rem; margin-bottom:1rem; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; }
.tile .label { color:var(--muted); font-size:.85rem; }
.tile .value { font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; }
.tile .sub { color:var(--muted); font-size:.85rem; }
table { width:100%; border-collapse:collapse; font-size:.93rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.badge { display:inline-block; font-size:.75rem; padding:.1rem .45rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:#fff; }
.badge.todo { border-color:var(--warn); color:var(--warn); }
.badge.ok { border-color:var(--ok); color:var(--ok); }
.badge.closed { border-color:var(--err); color:var(--err); }
form.inline { display:inline; }
.row { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:1 1 160px; }
.row > .narrow { flex:0 1 110px; }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.15rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=file], select, textarea { width:100%; padding:.42rem .5rem; border:1px solid var(--line); border-radius:6px; font:inherit; background:#fff; }
textarea { min-height:4rem; }
input[type=checkbox] { width:auto; }
button, .btn { font:inherit; padding:.45rem .9rem; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary, .btn.secondary { background:#fff; color:var(--accent); }
button.danger { background:#fff; color:var(--err); border-color:var(--err); }
button.small, .btn.small { padding:.25rem .6rem; font-size:.85rem; }
.flash { padding:.6rem .9rem; border-radius:6px; margin-bottom:1rem; background:#e8f3ec; color:var(--ok); border:1px solid #bfe0cb; }
.flash.error { background:#fbeaea; color:var(--err); border-color:#efc3c3; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.6rem 0; }
.filters { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:.8rem; }
.filters > * { flex:1 1 140px; }
.pager { display:flex; gap:.6rem; align-items:center; margin:.8rem 0; color:var(--muted); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:800px) { .split { grid-template-columns:1fr; } }
.login { max-width:380px; margin:4rem auto; }
.total-check { font-variant-numeric:tabular-nums; }
.total-check.bad { color:var(--err); font-weight:600; }
.total-check.good { color:var(--ok); font-weight:600; }
details summary { cursor:pointer; color:var(--accent); }
.htmx-request .htmx-indicator { display:inline; }
.htmx-indicator { display:none; }
@media print { header.top, .no-print, .flash { display:none !important; } main { max-width:none; margin:0; } .card { border:none; padding:0; } }
footer.site { border-top:1px solid var(--line); margin-top:2rem; background:var(--card); font-size:.85rem; color:var(--muted); }
footer.site .wrap { max-width:1100px; margin:0 auto; padding:.9rem 1.2rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
footer.site a { color:var(--muted); text-decoration:none; }
footer.site a:hover { color:var(--ink); text-decoration:underline; }
.cookie-banner { position:fixed; left:1rem; right:1rem; bottom:1rem; max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px -16px rgba(29,31,35,.5); padding:.8rem 1rem; display:flex; gap:1rem; align-items:center; font-size:.88rem; z-index:20; }
.cookie-banner p { margin:0; flex:1; }
.cookie-banner form { margin:0; }
.legal { max-width:820px; margin:1rem auto; line-height:1.55; }
.legal h2 { margin-top:1.6rem; }
.legal table td, .legal table th { font-size:.9rem; }
.legal .todo { background:#fff3cd; color:var(--warn); padding:0 .3rem; border-radius:4px; }
.check label { display:flex; gap:.5rem; align-items:flex-start; color:var(--ink); font-size:.92rem; }
.check input { margin-top:.25rem; }
.login.wide { max-width:560px; }
@media print { footer.site, .cookie-banner { display:none !important; } }