:root { --bg:#f4f6f9; --card:#fff; --text:#1f2933; --muted:#7b8794; --accent:#2f6fde;
        --in:#2e9d5b; --out:#d9534f; --warn:#e6a23c; --border:#e1e5eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
.topbar { display:flex; align-items:center; gap:24px; padding:10px 24px; background:#1f2d3d; color:#fff; }
.topbar .brand { font-weight:600; font-size:16px; }
.topbar nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.topbar nav a { color:#cfd8e3; text-decoration:none; padding:6px 10px; border-radius:4px; }
.topbar nav a.active, .topbar nav a:hover { background:#34495e; color:#fff; }
.logout { display:flex; gap:8px; align-items:center; }
.logout button { background:none; border:1px solid #607080; color:#fff; border-radius:4px; padding:4px 10px; cursor:pointer; }
main { padding:20px 24px; max-width:1400px; margin:0 auto; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:16px; margin:0 0 12px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; }
.login { max-width:380px; margin:60px auto; }
.login input { width:100%; padding:8px; border:1px solid var(--border); border-radius:4px; }
.muted { color:var(--muted); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:16px; }
.tile { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; cursor:default; }
.tile.clickable { cursor:pointer; } .tile.clickable:hover { border-color:var(--accent); }
.tile-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.tile-value { font-size:24px; font-weight:600; margin-top:6px; }
.tile-sub { color:var(--muted); font-size:12px; margin-top:4px; }
.tile.in .tile-value { color:var(--in); } .tile.out .tile-value { color:var(--out); } .tile.alert .tile-value { color:var(--out); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns:1fr; } }
table { width:100%; border-collapse:collapse; }
th, td { padding:6px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:#f8f9fb; font-weight:600; font-size:12px; color:#52606d; }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
tr.total td { font-weight:600; background:#f8f9fb; }
tr.sub td { color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; }
input, select, textarea { font:inherit; padding:5px 8px; border:1px solid var(--border); border-radius:4px; background:#fff; }
button, .btn { font:inherit; padding:6px 12px; border:1px solid var(--border); border-radius:4px; background:#fff; cursor:pointer; text-decoration:none; color:var(--text); display:inline-block; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger, .btn.danger { color:var(--out); border-color:var(--out); }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.seg button { border:none; border-radius:0; } .seg button.active { background:var(--accent); color:#fff; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#eef1f5; }
.badge.expected { background:#eef1f5; } .badge.done { background:#e3f4ea; color:var(--in); }
.badge.partial { background:#fff3dd; color:#a86b00; } .badge.overdue { background:#fde8e7; color:var(--out); }
.badge.wont { background:#eee; color:#888; text-decoration:line-through; } .badge.stale { background:#fff3dd; color:#a86b00; }
.messages { list-style:none; padding:0; } .messages li { padding:8px 12px; border-radius:4px; background:#e8f0fe; margin-bottom:8px; }
.messages li.error { background:#fde8e7; } .messages li.success { background:#e3f4ea; } .messages li.warning { background:#fff3dd; }
.errorlist { color:var(--out); margin:4px 0; padding-left:16px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px 16px; }
.form-grid label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tabs a { padding:8px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; }
.tabs a.active { color:var(--text); border-bottom-color:var(--accent); }
.in { color:var(--in); } .out { color:var(--out); }
.chart-box { position:relative; height:320px; }
.detail { margin-top:12px; }