:root{
  --navy:#102a43;--blue:#176b87;--teal:#0b7a75;--paper:#fff;--bg:#edf3f5;
  --line:#d5e0e5;--ink:#18313d;--muted:#647985;--accent:#0d8a82;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(135deg,#edf3f5 0%,#f8fafb 48%,#e8f1f2 100%);
  color:var(--ink);font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select,a{font:inherit}

/* ===== Shell ===== */
.shell{width:min(1600px,calc(100vw - 32px));margin:16px auto 26px}

/* ===== Header ===== */
.hero{display:flex;justify-content:space-between;align-items:flex-end;
  padding:18px 22px;background:linear-gradient(115deg,#102a43,#176b87);color:#fff;
  border-radius:16px 16px 0 0;box-shadow:0 16px 40px rgba(16,42,67,.18)}
.brand-lockup{display:flex;align-items:center;gap:15px}.brand-logo{width:68px;height:68px;flex:0 0 auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.22em;color:#9dd8e0;font-weight:700}
.hero h1{margin:0;font-size:clamp(22px,3vw,34px);letter-spacing:.02em}
.subtitle{margin:7px 0 0;color:#d5edf1;font-size:13px}
.download{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);
  border-radius:9px;padding:9px 14px;background:rgba(255,255,255,.08);white-space:nowrap}
.download:hover{background:rgba(255,255,255,.17)}

/* ===== Tab Bar ===== */
.tab-bar{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-top:none;
  border-bottom:none;overflow:hidden}
.tab{flex:1;border:0;background:transparent;padding:14px 20px;font-size:15px;font-weight:600;
  color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:all .18s}
.tab:hover{color:var(--ink);background:#f7fafb}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);background:#f0f8f7}

/* ===== Tab Panels ===== */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===== Control Panel ===== */
.control-panel,.chart-card{margin-top:0;background:rgba(255,255,255,.96);
  border:1px solid var(--line)}
.control-panel{padding:12px 16px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.control-row+.control-row{border-top:1px solid #e8eef1;margin-top:10px;padding-top:10px}
.field-group{display:flex;align-items:center;gap:8px}
.label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;white-space:nowrap}

/* Segmented control */
.segmented{display:flex;padding:3px;background:#eaf0f2;border-radius:8px}
.segmented button{border:0;background:transparent;padding:6px 12px;border-radius:6px;
  color:#4b626e;cursor:pointer;touch-action:manipulation}
.segmented button[aria-pressed="true"],.segmented button.active{background:#fff;color:var(--teal);font-weight:700;
  box-shadow:0 2px 8px rgba(28,66,78,.14)}

/* Select */
.select-box{padding:7px 10px;border:1px solid #cbd9df;border-radius:8px;color:var(--ink);
  background:#fbfdfe;cursor:pointer;min-width:260px}

/* Range inputs */
.range-row label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.range-row input{width:88px;padding:7px 8px;border:1px solid #cbd9df;border-radius:7px;
  color:var(--ink);background:#fbfdfe}
.action{border:1px solid #bfd0d7;background:#fff;color:#34505d;padding:7px 12px;
  border-radius:7px;cursor:pointer}
.action.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.action:hover{opacity:.85}
.error{font-size:12px;color:#b42318}
.hint{font-size:11px;color:var(--muted);font-style:italic}

/* Series chips */
.chip{--chip:#667085;display:flex;align-items:center;gap:7px;border-left:4px solid var(--chip);
  padding:5px 10px 5px 8px;border-radius:6px;background:#f6f8f9;font-size:13px;cursor:pointer}
.chip input{accent-color:var(--chip)}
.chip.total{--chip:#17212b}
.chip.rayleigh{--chip:#00897b}
.chip.o3{--chip:#7e57c2}
.chip.o2{--chip:#2979ff}
.chip.h2o{--chip:#d67c00}
.chip.co2{--chip:#d84343}

/* ===== Chart Card ===== */
.chart-card{overflow:hidden;border:1px solid var(--line);border-top:none;
  box-shadow:0 10px 30px rgba(31,61,76,.08)}
.chart-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 0}
.chart-head strong{font-size:16px}
.chart-head span{margin-left:10px;color:var(--muted);font-size:12px}
.chart-head p{margin:0;color:var(--muted);font-size:12px}
.chart-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.dpi-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600}
.dpi-control input{width:68px;height:32px;padding:0 8px;border:1px solid #cbdbe1;border-radius:8px;
  background:#f9fcfd;color:var(--ink);font:inherit;outline:none}
.dpi-control input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,122,117,.12)}
.export-btn{height:34px;padding:0 14px;white-space:nowrap}
.chart{height:clamp(520px,68vh,820px);width:100%}

/* ===== Source Info ===== */
.source-info{margin-top:10px;padding:14px 18px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:0 0 14px 14px;font-size:13px;color:var(--ink)}
.source-info table{width:100%;border-collapse:collapse;margin-top:8px}
.source-info th,.source-info td{padding:6px 10px;text-align:left;border-bottom:1px solid #eef3f5;
  font-size:12px}
.source-info th{color:var(--muted);font-weight:600;width:120px}
.source-info a{color:var(--teal);text-decoration:none}
.source-info a:hover{text-decoration:underline}

/* ===== Footer ===== */
footer{text-align:center;color:#69808b;font-size:11px;padding:14px;line-height:1.7}

/* ===== Responsive ===== */
@media(max-width:800px){
  .shell{width:calc(100vw - 14px);margin:7px auto}
  .hero{align-items:flex-start;gap:16px;border-radius:12px 12px 0 0}
  .subtitle{max-width:75vw}
  .primary-controls .field-group{width:calc(50% - 10px);justify-content:space-between}
  .select-box{min-width:100%}
  .range-row{gap:8px}
  .chart-head{align-items:flex-start}
  .chart-actions{flex-wrap:wrap;gap:7px}
  .chart-head p{display:none}
  .chart{height:600px}
}