:root{
  /* Light theme palette */
  --bg:#f8fafc;          /* slate-50 */
  --panel:#ffffff;       /* white */
  --muted:#64748b;       /* slate-500 */
  --text:#0f172a;        /* slate-900 */
  --accent:#22c55e;      /* emerald-500 */
  --warn:#b45309;        /* orange-700 */
  --danger:#dc2626;      /* red-600 */
  --table-border:#e5e7eb;/* gray-200 */
}
/* Dark theme (matches original) */
[data-theme="dark"]{
  --bg:#0f1223;
  --panel:#171a2e;
  --muted:#8a92b2;
  --text:#e8ebff;
  --accent:#5dd6a4;
  --warn:#e5a03f;
  --danger:#ff6b6b;
  --table-border:#2a2f4d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif}
header,footer{padding:16px 20px;background:var(--panel);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--table-border);display:flex;align-items:center;gap:16px}
header h1{margin:0;font-size:20px}
footer{top:auto;bottom:0;font-size:12px;color:var(--muted);border-top:1px solid var(--table-border)}
.theme-toggle{margin-left:auto;background:var(--accent);color:#052e16;border:none;padding:8px 12px;border-radius:8px;font-weight:600;cursor:pointer}
[data-theme="dark"] .theme-toggle{background:#3fb4e5;color:#073346}
.theme-toggle:focus{outline:2px solid #111}

.inputs-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:16px}
.input-block{grid-column:span 12;background:var(--panel);padding:12px;border-radius:10px}
.input-block label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.input-block textarea{width:100%;min-height:100px;border:1px solid var(--table-border);background:var(--bg);color:var(--text);border-radius:8px;padding:8px}
.input-block input[type="text"],
.input-block input[type="number"],
.input-block input[type="month"],
.input-block input[type="month"]{width:100%;border:1px solid var(--table-border);background:var(--bg);color:var(--text);border-radius:8px;padding:8px}
.buttons-block{grid-column:span 12;display:flex;gap:10px;align-items:center}
.buttons-block button{background:var(--accent);color:#052e16;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:600}
.buttons-block button#resetBtn{background:#e5e7eb;color:#111827}
.buttons-block button#exportCsvBtn{background:#38bdf8;color:#083344}
.buttons-block button:focus{outline:2px solid #111}

@media (min-width: 900px){
  .input-block{grid-column:span 4}
  .buttons-block{grid-column:span 12}
}

.warnings{margin:0 16px 16px;background:#fff7ed;color:#9a3412;border:1px solid #f59e0b;padding:10px;border-radius:10px;position:relative}
.warnings .dismiss{position:absolute;right:8px;top:8px;background:none;color:inherit;border:1px solid currentColor;border-radius:6px;padding:2px 6px;cursor:pointer}

.summary-cards{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:0 16px 16px}
.card{grid-column:span 12;background:var(--panel);border:1px solid var(--table-border);border-radius:10px;padding:12px}
.card h3{margin:0 0 8px 0;font-size:12px;color:var(--muted)}
.card .value{font-size:22px;font-weight:700}
@media (min-width: 900px){.card{grid-column:span 3}}

.charts{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:0 16px 16px}
.chart-wrapper{grid-column:span 12;background:var(--panel);border:1px solid var(--table-border);border-radius:10px;padding:12px}
@media (min-width: 900px){.chart-wrapper{grid-column:span 4}}

.table-wrapper{padding:0 16px 80px}
#dataTable{width:100%;border-collapse:separate;border-spacing:0;min-width:900px;background:var(--panel);border:1px solid var(--table-border);border-radius:10px;overflow:hidden;table-layout:fixed}
#dataTable thead th{position:sticky;top:0;background:#f1f5f9;padding:10px;font-size:12px;color:#0f172a;border-bottom:1px solid var(--table-border);z-index:1;white-space:nowrap}
#dataTable tbody td{padding:10px;border-bottom:1px solid var(--table-border);font-size:13px;white-space:nowrap}
/* Align numeric columns to the right and use tabular numbers for perfect alignment */
#dataTable thead th:nth-child(n+2),
#dataTable tbody td:nth-child(n+2){
  text-align:right;
  font-variant-numeric: tabular-nums;
}
#dataTable thead th:first-child,
#dataTable tbody td:first-child{ text-align:left }
.table-wrapper{overflow-x:auto}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:11px;margin-left:6px}
.badge.warn{background:#fff7ed;color:#9a3412;border:1px solid #f59e0b}