:root{
  --bg:#f6f9ff;
  --card:#ffffff;
  --muted:#4a5a78;
  --text:#0b1736;
  --accent:#0050b3;
  --accent-2:#1b6fe6;
  --ok:#0a8f5a;
  --bad:#d9363e;
  --border:#dbe7ff;
  --table:#f2f7ff;
  --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:16px}
h1{font-size:28px;margin:0 0 6px}
.beta{font-size:14px;background:var(--accent-2);color:#fff;padding:2px 8px;border-radius:999px;margin-left:8px}
.sub{color:var(--muted);margin:0}

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

.left .card{background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px;border:1px solid var(--border)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.card h2{font-size:18px;margin:0;color:var(--accent)}
.mode-switch label{margin-right:12px;color:var(--muted);font-size:14px}
.mode-switch input{margin-right:6px}

.row{display:flex;flex-direction:column;margin:10px 0}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.align-end{display:flex;align-items:flex-end;justify-content:flex-end}
.row label{font-weight:600;margin-bottom:6px}
.row input, .row select{background:#fff;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.secondary.small{padding:6px 10px;font-size:12px}

.hint{color:var(--muted);font-size:12px;margin-top:6px}
.hidden{display:none}

.right .results{background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--border)}
.results h2{margin:0 0 12px;color:var(--accent)}
.grid{display:grid;grid-template-columns: repeat(2,1fr); gap:12px}
.grid .wide{grid-column: span 2}
@media (max-width: 640px){ .grid{grid-template-columns:1fr} .grid .wide{grid-column: span 1} }

.kpi{background:var(--table);border:1px solid var(--border);border-radius:14px;padding:12px}
.kpi-label{color:var(--muted);font-size:12px;margin-bottom:6px}
.kpi-value{font-size:20px;font-weight:800}

.kpi-value.bad{color:var(--bad)}
.kpi-value.ok{color:var(--ok)}

.kpi-multi{display:grid;grid-template-columns:1fr;gap:6px}
.kpi-multi b{color:var(--text)}

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

.tables h3{margin:16px 0 8px}
.flex-row{display:flex;align-items:center;gap:8px}
.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}
tbody tr:nth-child(even){background:#f9fbff}

.readonly-box{background:#f9fbff;border:1px dashed var(--border);padding:10px 12px;border-radius:12px}