:root{
  --bg:#f5f7f9; --surface:#ffffff; --surface-2:#eef2f5; --border:#dbe2e8; --border-strong:#c3ced8;
  --text:#17212b; --muted:#5b6b79; --faint:#8695a2;
  --accent:#215686; --accent-ink:#10334F; --accent-soft:#e3edf6;
  --ok:#2f7d4f; --warn:#b26b00; --bad:#b3261e;
  --radius:10px; --shadow:0 1px 2px rgba(16,51,79,.06),0 2px 8px rgba(16,51,79,.05);
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:20px;
  --font:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-size:var(--text-base);color:var(--text);background:var(--bg);line-height:1.4;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
h1,h2{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--text-xl);color:var(--accent-ink)}
h2{font-size:var(--text-lg);color:var(--accent-ink)}
.muted{color:var(--muted)} .small{font-size:var(--text-xs)}
.num,.tab{font-variant-numeric:tabular-nums}

.topbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex;flex-direction:column}
.brand .sub{font-size:var(--text-xs);color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.field-inline{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted)}
select,input[type=search],input[type=number],input[type=text]{border:1px solid var(--border-strong);background:var(--surface);border-radius:7px;padding:5px 8px;font-size:var(--text-sm);color:var(--text)}
select:focus,input:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{display:inline-flex;align-items:center;border:1px solid var(--border-strong);background:var(--surface);border-radius:7px;padding:6px 12px;font-size:var(--text-sm);font-weight:500;cursor:pointer;color:var(--accent-ink);white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}

.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:16px 24px 0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.kpi .lab{font-size:var(--text-xs);color:var(--muted);font-weight:500}
.kpi .val{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-ink);margin-top:2px}
.kpi .cmp{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .cmp.good{color:var(--ok)} .kpi .cmp.bad{color:var(--bad)}

.layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:16px 24px 32px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.viz{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.hint{margin:0 0 10px;font-size:var(--text-xs);color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters input[type=search]{width:140px}
.chk{display:inline-flex;gap:4px;align-items:center;font-size:var(--text-sm);color:var(--muted)}

.table-wrap{overflow:auto;max-width:100%}
.roster-panel .table-wrap{max-height:calc(100vh - 250px);min-height:420px;border:1px solid var(--border);border-radius:8px}
table{border-collapse:collapse;width:100%}
.roster th{position:sticky;top:0;background:var(--surface-2);z-index:2;text-align:left;font-size:var(--text-xs);color:var(--muted);font-weight:500;padding:7px 4px;border-bottom:1px solid var(--border);white-space:nowrap}
.roster td{padding:4px 4px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;font-size:var(--text-sm)}
.roster tr.leader td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.roster tr.hl td{background:#fff7e0}
.roster tr.sel td{background:var(--accent-soft)}
.roster tr.grp td{background:var(--surface-2);font-weight:700;font-size:var(--text-xs);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.04em;padding:6px}
.roster input.name{width:124px;border-color:transparent;background:transparent;padding:4px 6px}
.roster input.name:hover{border-color:var(--border)}
.roster select{padding:3px 2px;font-size:var(--text-xs)}
.roster select.role{width:96px}
.roster select.st{width:80px}
.roster select.pd{width:52px}
.roster .end{display:block;margin-top:1px}
.roster .end{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--text-xs)}
.th-num,.roster td.num{text-align:right;font-variant-numeric:tabular-nums}
.chips{display:inline-flex;gap:3px}
.chip{width:25px;height:25px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);font-size:11px;font-weight:700;color:var(--faint);cursor:pointer;padding:0}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.wk{border-style:dashed}
.chip.wk.on{border-style:solid;background:var(--accent-ink)}
.flag{display:inline-block;font-size:11px;font-weight:700;padding:1px 5px;border-radius:5px;margin:1px 3px 1px 0}
.flag.bad{background:#fbe5e3;color:var(--bad)}
.flag.warn{background:#fdf0d9;color:#8a5300}
.flag.ok{background:#e3f1e8;color:var(--ok)}
.icon-btn{border:none;background:none;cursor:pointer;color:var(--faint);padding:3px 5px;border-radius:5px;font-size:var(--text-sm)}
.icon-btn:hover{background:var(--surface-2);color:var(--accent-ink)}

.viz{position:sticky;top:84px;max-height:calc(100vh - 96px);overflow-y:auto;padding-bottom:2px;scrollbar-width:thin}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.seg button{border:none;background:var(--surface);padding:5px 10px;font-size:var(--text-xs);font-weight:500;cursor:pointer;color:var(--muted);border-right:1px solid var(--border)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--accent);color:#fff}
.heat-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}
.heat-controls input{width:64px}
.legend{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--muted)}
.legend .bar{width:120px;height:10px;border-radius:3px;border:1px solid var(--border)}
.heat-scroll{overflow-x:auto}
.heat{display:grid;grid-template-columns:34px repeat(24,minmax(21px,1fr));gap:2px;min-width:578px;font-variant-numeric:tabular-nums}
.heat .hh{font-size:10px;color:var(--faint);text-align:center;padding-bottom:2px}
.heat .dl{font-size:var(--text-xs);font-weight:700;color:var(--muted);display:flex;align-items:center}
.heat .c{height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;cursor:pointer;position:relative;letter-spacing:-.02em;border:1px solid transparent}
.heat .c:hover{outline:2px solid var(--accent-ink);z-index:2}
.heat .c.pick{outline:2px solid var(--text);outline-offset:1px;z-index:3}
.heat .c.mine{border:2px solid #f2a900}
.heat .tot{font-size:10px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.hour-detail{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;font-size:var(--text-sm);max-height:190px;overflow:auto}
.hour-detail h3{margin:0 0 6px;font-size:var(--text-sm);color:var(--accent-ink)}
.hour-detail .stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px;color:var(--muted);font-size:var(--text-xs)}
.hour-detail .stats b{color:var(--text);font-variant-numeric:tabular-nums}
.names{display:flex;flex-wrap:wrap;gap:4px}
.names span{background:var(--surface-2);border-radius:5px;padding:2px 7px;font-size:var(--text-xs)}
.names span.ld{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.chart-box{position:relative;height:250px}
.matrix th,.matrix td{padding:5px 8px;border-bottom:1px solid var(--border);font-size:var(--text-sm);text-align:center;font-variant-numeric:tabular-nums}
.matrix th{background:var(--surface-2);font-size:var(--text-xs);color:var(--muted);font-weight:500}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix tbody tr{cursor:pointer}
.matrix tbody tr:hover td{background:var(--accent-soft)}
.matrix tfoot td{font-weight:700;background:var(--surface-2)}
.matrix td.z{color:var(--border-strong)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--accent-ink);color:#fff;padding:8px 16px;border-radius:8px;font-size:var(--text-sm);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

@media (max-width:1280px){
  .layout{grid-template-columns:1fr}
  .viz{position:static;max-height:none;overflow:visible}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .roster-panel{order:2}
  .roster-panel .table-wrap{max-height:70vh}
}
@media (max-width:640px){
  .topbar{position:static;padding:12px 14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 14px 0}
  .layout{padding:12px 14px 24px}
  .panel{padding:12px}
  .seg button{padding:5px 7px}
}
@media print{
  .topbar{position:static}.viz{position:static;max-height:none;overflow:visible}
  .roster-panel .table-wrap{max-height:none}
  .heat .c{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.roster td.flags{white-space:normal;min-width:64px}