:root{
  --bg:#f6f9ff; --card:#ffffff; --muted:#4a5a78; --text:#0b1736;
  --accent:#0050b3; --accent2:#1b6fe6;
  --border:#dbe7ff; --table:#f2f7ff; --ok:#0a8f5a; --bad:#d9363e;
  --shadow:0 10px 30px rgba(0,30,80,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.app{max-width:1220px;margin:24px auto;padding:0 16px}
header{margin-bottom:12px}
h1{margin:0 0 6px}
.sub{margin:0;color:var(--muted)}
.top-actions{margin-top:10px}
.top-actions .back{display:inline-block;background:#1b6fe6;color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none}
.top-actions .back:hover{background:#0f4ebd}

main{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:980px){main{grid-template-columns:1fr}}

.left .card, .right .results{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.left h2{color:var(--accent);margin:0 0 8px}
.row{display:flex;flex-direction:column;margin:10px 0}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row label{font-weight:600;margin-bottom:6px}
.row input{background:#fff;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:8px 12px;border-radius:10px;cursor:pointer}
.hint{font-size:12px;color:var(--muted)}

.results h2{margin:0 0 10px;color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:var(--table);border:1px solid var(--border);border-radius:14px;padding:12px}
.kpi-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi-value{font-weight:800;font-size:20px}
.kpi-value.ok{color:var(--ok)} .kpi-value.bad{color:var(--bad)}

.chart-card{padding:12px;border:1px solid var(--border);border-radius:14px}
canvas{width:100%;height:auto;background:linear-gradient(180deg,#fff,#f6fbff);border:1px solid var(--border);border-radius:8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:8px}
.lg{display:inline-block;width:14px;height:6px;border-radius:999px;margin-right:6px}
.lg1{background:#6b7b8c}.lg2{background:#1b6fe6}.lg3{background:#0a8f5a}.lg4{background:#ff7a45}

.cards{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}
.cards .info{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fbfdff}
.cards .cta{border:2px dashed var(--accent2);border-radius:14px;padding:12px;background:#f0f6ff}
.cards h3{margin:0 0 8px;color:var(--accent)}
.cards p{margin:0}

.flex-row{display:flex;gap:8px;align-items:center}
.flex-row .spacer{flex:1}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
thead{background:#eaf2ff;color:var(--muted)}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
.hidden{display:none}