:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2230; --muted:#5d6678; --line:#dde1e8; --accent:#2b5fb0; --accent-ink:#fff;
  --ok:#1f7a4d; --warn:#9a6700; --bad:#b3261e; --track:#e9ecf1;
  --s0:#3b6fb6; --s1:#e08a2c; --s2:#2f9e8f; --s3:#c4488b; --s4:#8a6bc2; --s5:#7aa63c; --s6:#d1564a; --s7:#a38a1f; --s8:#8b93a1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12151b; --card:#1b2029; --ink:#e8ebf1; --muted:#9aa3b5; --line:#2c3340; --accent:#6c9be0; --accent-ink:#0d1522;
    --ok:#5cc58c; --warn:#e3b341; --bad:#f0857d; --track:#262d3a;
    --s0:#6c9be0; --s1:#f0a95a; --s2:#4cc0b0; --s3:#e271ad; --s4:#a58ee0; --s5:#9ccc5a; --s6:#ef7d72; --s7:#d4bb4b; --s8:#8f98a8;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap { max-width:1040px; margin:0 auto; padding:20px 16px 48px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:17px; margin:0 0 12px; } h3 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--muted); } .small { font-size:13px; }
a { color:var(--accent); }
.top { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.top .brand { font-weight:700; margin-right:8px; }
.top nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.top nav a { text-decoration:none; color:var(--muted); padding:6px 10px; border-radius:8px; }
.top nav a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); }
.top .who { font-size:13px; color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
label.f { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
input, select, button { font:inherit; color:inherit; }
input, select { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-height:40px; max-width:100%; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button { cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 14px; min-height:40px; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
button.danger { color:var(--bad); }
button:disabled { opacity:.55; cursor:default; }
.badge { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:600; border:1px solid var(--line); }
.badge.submitted { color:var(--ok); border-color:var(--ok); } .badge.draft { color:var(--warn); border-color:var(--warn); } .badge.partial { color:var(--warn); border-color:var(--warn); }
.msg { padding:10px 12px; border-radius:8px; margin:12px 0; border:1px solid var(--line); }
.msg.err { color:var(--bad); border-color:var(--bad); } .msg.ok { color:var(--ok); border-color:var(--ok); }
.login { max-width:380px; margin:48px auto; } .login label.f { margin-bottom:12px; } .login input { width:100%; }
.weeknav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.weeknav .range { font-weight:600; flex:1; min-width:200px; }
.entry { display:grid; grid-template-columns: 1fr 1fr 110px 44px; gap:8px; margin-bottom:8px; align-items:center; }
.entry select, .entry input { width:100%; }
.total { display:flex; justify-content:space-between; font-weight:600; border-top:1px solid var(--line); padding-top:10px; margin-top:8px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
.kpi { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; }
.kpi .big { font-size:40px; font-weight:700; line-height:1.1; }
.up { color:var(--ok); } .down { color:var(--bad); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.hbar { display:grid; grid-template-columns: minmax(80px, 36%) 1fr; gap:6px 10px; align-items:center; font-size:14px; }
.hbar .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar .track { position:relative; background:var(--track); border-radius:6px; height:26px; }
.hbar .fill { height:100%; border-radius:6px; min-width:2px; }
.hbar .val { position:absolute; right:8px; top:0; line-height:26px; font-size:13px; font-variant-numeric:tabular-nums; }
.chart svg { width:100%; height:auto; display:block; }
.chart text { fill:var(--muted); font-size:11px; font-family:inherit; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:13px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { border:0; border-radius:0; background:transparent; }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.tabs { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.tabs button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
td input, td select { width:100%; min-width:110px; }
.pw { font-family:ui-monospace,monospace; font-size:16px; user-select:all; }
.fill0{background:var(--s0)} .fill1{background:var(--s1)} .fill2{background:var(--s2)} .fill3{background:var(--s3)}
.fill4{background:var(--s4)} .fill5{background:var(--s5)} .fill6{background:var(--s6)} .fill7{background:var(--s7)} .fill8{background:var(--s8)}
.sf0{fill:var(--s0)} .sf1{fill:var(--s1)} .sf2{fill:var(--s2)} .sf3{fill:var(--s3)} .sf4{fill:var(--s4)} .sf5{fill:var(--s5)} .sf6{fill:var(--s6)} .sf7{fill:var(--s7)} .sf8{fill:var(--s8)}
.ss0{stroke:var(--s0)} .ss1{stroke:var(--s1)} .ss2{stroke:var(--s2)} .ss3{stroke:var(--s3)} .ss4{stroke:var(--s4)} .ss5{stroke:var(--s5)} .ss6{stroke:var(--s6)} .ss7{stroke:var(--s7)} .ss8{stroke:var(--s8)}
.line { fill:none; stroke-width:2; stroke-linejoin:round; }
@media (max-width:640px) {
  .entry { grid-template-columns: 1fr 1fr; } .entry .hrs { grid-column:1; } .entry .rm { grid-column:2; justify-self:end; }
  .kpi .big { font-size:32px; } .hbar { grid-template-columns: 1fr; } .hbar .lbl { margin-bottom:-2px; }
}