:root{
  --bg:#0f1720;
  --panel:#ffffff;
  --ink:#1a2330;
  --muted:#6b7787;
  --line:#e6e9ef;
  --brand:#2563eb;
  --brand-ink:#1e40af;
  --ok-bg:#e7f6ec; --ok-ink:#1a7a3f;
  --err-bg:#fdeaea; --err-ink:#b42318;
  --chip:#eef2fb;
  --radius:14px;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:#f4f6fa;line-height:1.5;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:var(--bg);color:#fff;
}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:9px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.25)}
.nav{display:flex;align-items:center;gap:14px}
.who{color:#c9d2de;font-size:.9rem;display:flex;align-items:center;gap:8px}
.role{font-size:.7rem;padding:2px 8px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.role-editor{background:#1f6feb33;color:#8fbaff}
.role-viewer{background:#8a94a633;color:#cfd6e0}

.wrap{max-width:920px;margin:24px auto;padding:0 16px}
.foot{text-align:center;color:var(--muted);font-size:.82rem;padding:24px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px;margin-bottom:20px}
h1{font-size:1.4rem;margin:0 0 4px}
h2{font-size:1.05rem;margin:18px 0 10px}
.muted{color:var(--muted);margin:0 0 14px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:12px}
.form input,.form textarea,.form select{
  width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:inherit;background:#fbfcfe;color:var(--ink);
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15);background:#fff}
.grid-form{display:grid;grid-template-columns:1fr 1fr 140px;gap:0 16px}
.grid-form .full{grid-column:1/-1}
@media(max-width:640px){.grid-form{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:10px;
  padding:10px 16px;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{background:transparent;border-color:#c9d2de;color:#e8edf4}
.wrap .btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.wrap .btn-ghost:hover{background:#f4f6fa}
.btn-tiny{padding:5px 10px;font-size:.78rem;border-color:var(--line);background:#fff;color:var(--ink)}
.btn-tiny:hover{background:#f4f6fa}
.btn-danger{color:var(--err-ink);border-color:#f3c9c5}
.btn-danger:hover{background:var(--err-bg)}
.inline{display:inline}

.login-card{max-width:380px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.login-card h1{margin-bottom:2px}

.flashes{margin-bottom:16px;display:grid;gap:8px}
.flash{padding:11px 14px;border-radius:10px;font-size:.9rem;font-weight:500}
.flash-ok{background:var(--ok-bg);color:var(--ok-ink)}
.flash-error{background:var(--err-bg);color:var(--err-ink)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 14px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;text-decoration:none;color:inherit}
.stat-big{background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;border:none}
.stat-action{background:#eef4ff;border-color:#cfe0ff;color:var(--brand-ink);font-weight:600}
.stat-action:hover{background:#e2edff}
.stat-num{font-size:1.7rem;font-weight:700;line-height:1}
.stat-lbl{font-size:.76rem;color:var(--muted);margin-top:6px}
.stat-big .stat-lbl{color:#dbe6ff}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 6px}
.chip{background:var(--chip);color:var(--brand-ink);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600}

.month-form input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:.9rem;background:#fff;color:var(--ink)}
.hdr-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ts{font-size:.8rem;color:var(--muted);white-space:nowrap}
.edited{color:var(--brand-ink);font-size:.74rem}

.table-scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:6px}
.tbl th{text-align:left;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--line);padding:8px 10px;font-weight:700}
.tbl td{border-bottom:1px solid var(--line);padding:9px 10px;vertical-align:top}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .desc{min-width:260px}
.nowrap{white-space:nowrap}
.actions{white-space:nowrap;display:flex;gap:6px}
.empty{color:var(--muted);padding:14px 0}

.bars{display:grid;gap:10px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:130px 1fr 60px;align-items:center;gap:10px}
.bar-label{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:#eef2f8;border-radius:999px;height:12px;overflow:hidden}
.bar-fill{background:linear-gradient(90deg,#3b82f6,#2563eb);height:100%;border-radius:999px}
.bar-val{text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(max-width:640px){.bar-row{grid-template-columns:100px 1fr 50px}}