*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#0f1117;
    --surface:#181a20;
    --surface2:#1e2028;
    --border:#2a2d38;
    --txt:#e4e4e7;
    --txt-dim:#9ca3af;
    --accent:#6366f1;
    --accent-glow:rgba(99,102,241,.15);
    --green:#22c55e;
    --red:#ef4444;
    --radius:10px;
}

body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--txt);
    line-height:1.6;
    min-height:100vh;
}

/* Header */
.dash-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:24px 32px;border-bottom:1px solid var(--border);
    flex-wrap:wrap;gap:16px;
}
.dash-header h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.header-sub{color:var(--txt-dim);font-size:.85rem;margin-top:2px}
.back-link{
    color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:500;
    transition:opacity .2s;
}
.back-link:hover{opacity:.8}

/* Controls */
.controls{
    display:flex;gap:16px;padding:20px 32px;flex-wrap:wrap;
    border-bottom:1px solid var(--border);background:var(--surface);
}
.control-group{display:flex;flex-direction:column;gap:4px}
.control-group label{font-size:.75rem;color:var(--txt-dim);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.control-group select{
    background:var(--surface2);color:var(--txt);border:1px solid var(--border);
    padding:8px 12px;border-radius:6px;font-size:.85rem;font-family:inherit;
    cursor:pointer;min-width:160px;
}
.control-group select:focus{outline:none;border-color:var(--accent)}

/* KPI Row */
.kpi-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    padding:24px 32px;
}
.kpi-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;display:flex;flex-direction:column;gap:4px;
}
.kpi-label{font-size:.75rem;color:var(--txt-dim);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.kpi-value{font-size:1.75rem;font-weight:700;font-family:'JetBrains Mono',monospace}
.kpi-change{font-size:.8rem;font-weight:500}
.kpi-change.up{color:var(--green)}
.kpi-change.down{color:var(--red)}
.kpi-change.neutral{color:var(--txt-dim)}

/* Chart Grid */
.chart-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
    padding:16px 32px;
}
.chart-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;
}
.chart-card h2{font-size:.9rem;font-weight:600;margin-bottom:16px;color:var(--txt-dim)}
.chart-wide{grid-column:1/-1}
.chart-card canvas{width:100%!important;max-height:320px}

/* Insights */
.insights-section{padding:24px 32px}
.insights-section h2{font-size:1.1rem;font-weight:600;margin-bottom:16px}
.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.insight-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px;border-left:3px solid var(--accent);
}
.insight-card h3{font-size:.85rem;font-weight:600;margin-bottom:6px}
.insight-card p{font-size:.8rem;color:var(--txt-dim);line-height:1.5}

/* Footer */
.dash-footer{
    padding:24px 32px;border-top:1px solid var(--border);
    text-align:center;color:var(--txt-dim);font-size:.8rem;
    margin-top:32px;
}
.dash-footer p+p{margin-top:4px}

/* Responsive */
@media(max-width:900px){
    .kpi-row{grid-template-columns:repeat(2,1fr)}
    .chart-grid{grid-template-columns:1fr}
    .dash-header,.controls,.kpi-row,.chart-grid,.insights-section,.dash-footer{padding-left:16px;padding-right:16px}
}
@media(max-width:500px){
    .kpi-row{grid-template-columns:1fr}
    .controls{flex-direction:column}
    .control-group select{min-width:100%}
}