:root {
  --bg:#f4f6f8; --surface:#fff; --soft:#f8fafc; --border:#dbe2e8;
  --text:#1d2733; --muted:#667382; --accent:#224f73; --accent-dark:#173a55;
  --accent-soft:#e8f0f6; --warning:#9a5a00; --warning-soft:#fff2d8;
  --success:#17623a; --success-soft:#e8f5ed; --shadow:0 16px 40px rgba(31,42,55,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
.page-shell{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:36px 0 56px}
.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
h1,h2,p{margin-top:0}
h1{margin-bottom:5px;font-size:clamp(2rem,5vw,3.2rem);line-height:1;letter-spacing:-.04em}
h2{margin-bottom:0;font-size:1.25rem}.subtitle{margin-bottom:0;color:var(--muted);font-size:1.05rem}
.eyebrow{margin-bottom:7px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mode-badge{padding:9px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.82rem;font-weight:700;white-space:nowrap}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.toolbar{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:18px;margin-bottom:18px}
.period-form{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.period-form label{display:grid;gap:6px}
.period-form label span,.summary-label{color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
select,input{min-height:42px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text)}
.button{min-height:42px;padding:9px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-weight:750}
.button-primary{border-color:var(--accent);background:var(--accent);color:#fff}.button-primary:hover{background:var(--accent-dark)}
.button:disabled,.button-muted{opacity:.55}
.summary-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:12px;margin-bottom:18px}
.summary-card{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(31,42,55,.05)}
.summary-card strong{display:block;margin-top:6px;font-size:clamp(1.2rem,2.5vw,1.65rem);letter-spacing:-.025em}
.table-card,.details-card{padding:18px}.table-card{margin-bottom:18px}
.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:16px}
.section-note{max-width:470px;margin-bottom:0;color:var(--muted);font-size:.88rem;text-align:right}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:13px}
table{width:100%;border-collapse:collapse;min-width:820px}
th,td{padding:13px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
th{background:var(--soft);color:var(--muted);font-size:.73rem;font-weight:850;text-transform:uppercase;letter-spacing:.055em}
td{font-size:.92rem}tbody tr{cursor:pointer}tbody tr:hover,tbody tr:focus,tbody tr.selected{outline:none;background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}.pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:.7rem;font-weight:850}
.needs{display:inline-block;padding:5px 8px;border-radius:8px;background:var(--warning-soft);color:var(--warning);font-weight:750}
.detail-content{min-height:88px;padding:14px;border-radius:12px;background:var(--soft);white-space:pre-line;line-height:1.6}
.action-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.empty-state{display:grid;gap:7px;padding:36px 18px;border:1px dashed var(--border);border-radius:13px;text-align:center}.empty-state span{color:var(--muted)}
@media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-card:first-child{grid-column:span 2}}
@media(max-width:680px){
  .page-shell{width:min(100% - 20px,1240px);padding-top:18px}.app-header{display:grid}.mode-badge{justify-self:start}
  .toolbar{align-items:stretch;display:grid}.period-form{display:grid;grid-template-columns:1fr 110px}.period-form .button{grid-column:1/-1;width:100%}
  .summary-grid{grid-template-columns:1fr 1fr}.summary-card:first-child{grid-column:1/-1}.section-heading{display:grid}.section-note{text-align:left}
  .table-wrap{overflow:visible;border:0}table,thead,tbody,tr,td{display:block;min-width:0}thead{display:none}tbody{display:grid;gap:12px}
  tbody tr{padding:12px;border:1px solid var(--border);border-radius:13px;background:#fff}
  td{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:7px 0;border-bottom:0}
  td::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
}