body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:24px;max-width:980px}
.card{border:1px solid #ddd;border-radius:12px;padding:16px;margin:12px 0}
.row{display:flex;gap:12px;flex-wrap:wrap}
label{display:block;font-size:14px;margin:8px 0 4px}
input,select,button{padding:10px;border:1px solid #ccc;border-radius:10px;font-size:14px}
button{cursor:pointer}
.small{font-size:13px;color:#555}
.ok{color:#0a7a2f}
.err{color:#b00020}
nav a{margin-right:10px}


.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:8px;text-align:left;vertical-align:top}
.table th{font-size:13px;color:#444}
.badge{display:inline-block;padding:2px 8px;border:1px solid #ddd;border-radius:999px;font-size:12px}
.right{text-align:right}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 820px){ .grid2{grid-template-columns:1fr;} }


/* ---- Forecast layout ---- */
.topbar{
  background:#3f78a6;
  color:#fff;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:0;
  margin:-24px -24px 14px -24px;
}
.topbar .brand{
  display:flex;align-items:center;gap:10px;font-weight:700
}
.topbar .brand .dot{
  width:10px;height:10px;border-radius:3px;background:#fff;opacity:.9
}
.topbar a{color:#fff;text-decoration:none}
.shell{max-width:1400px;margin:0 auto}
.subnav{display:flex;align-items:center;gap:10px;margin:10px 0 14px}
.pill{border:1px solid #cfe0ee;background:#fff;border-radius:10px;padding:6px 10px}
.kpiBar{
  background:linear-gradient(180deg,#2d6b99,#1e557f);
  color:#fff;
  border-radius:0;
  padding:10px 14px;
  display:flex;
  gap:18px;
  align-items:center;
  overflow:auto;
}
.kpi{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding-right:12px;border-right:1px solid rgba(255,255,255,.25)
}
.kpi:last-child{border-right:none}
.kpi .val{font-weight:700}
.kpi .warn{
  width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#d00000;color:#fff;font-size:12px;font-weight:700
}
.mainGrid{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap:14px;
  margin-top:14px;
}
@media (max-width: 1100px){
  .mainGrid{grid-template-columns:1fr}
}
.panel{border:1px solid #ddd;border-radius:12px;background:#fff}
.panelHead{display:flex;gap:6px;align-items:center;border-bottom:1px solid #eee;background:#f5f7f9}
.tab{
  padding:10px 14px;border-right:1px solid #e6e6e6;cursor:pointer;
  font-weight:600
}
.tab.active{background:#d9d9d9}
.panelBody{padding:12px}
.tableMini{width:100%;border-collapse:collapse}
.tableMini th,.tableMini td{border-bottom:1px solid #eee;padding:8px;text-align:left}
.tableMini th{background:#d9d9d9}
.chartHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid #eee;background:#f5f7f9
}
.rangeBtns button{
  padding:6px 8px;border-radius:6px;border:1px solid #c9d6e2;background:#fff;
}
.rangeBtns button.active{background:#dbe9f6}