:root{--navy:#102e49;--navy2:#173b5c;--ink:#172e41;--muted:#788a9a;--line:#e7ecf0;--canvas:#f3f7fa;--white:#fff;--teal:#0f9f92;--blue:#3e91d8;--orange:#ec9e32;--red:#de685a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--canvas);color:var(--ink);margin:0}button,input,select{font:inherit}button,select{cursor:pointer}.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}.sidebar{background:linear-gradient(170deg,var(--navy),#0b2137);color:#fff;padding:29px 18px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 45px}.brand-mark{border-radius:13px;background:linear-gradient(135deg,#18c3ac,#1a90d6);width:43px;height:43px;display:grid;place-items:center;font-size:30px}.brand strong{display:block;letter-spacing:1.1px;font-size:15px}.brand small{display:block;color:#92b8d0;font-size:10px;margin-top:4px}.nav-heading{padding:0 13px 13px;color:#6f9bb9;font-weight:700;font-size:10px;letter-spacing:1.6px}.nav{display:flex;align-items:center;gap:14px;padding:14px 14px;text-decoration:none;color:#bdccdb;border-radius:9px;margin:2px 0;font-size:13px;transition:.2s}.nav:first-letter{font-size:17px}.nav:hover,.nav.active{background:#24506c;color:#fff}.nav.active{border-left:3px solid #26d0be}.side-info{margin-top:auto;padding:18px 12px 10px;display:flex;gap:10px;border-top:1px solid #27465d}.side-info strong,.side-info small{display:block}.side-info strong{font-size:10px;letter-spacing:.7px}.side-info small{font-size:11px;color:#96b0c5;margin-top:5px}.heartbeat{width:9px;height:9px;border-radius:50%;background:#21c89d;box-shadow:0 0 0 4px #1e6b69;flex-shrink:0;margin-top:4px}main{padding:0 34px 18px;max-width:1720px;min-width:0}.topline{height:65px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.crumb{font-size:10px;letter-spacing:1.15px;color:#7f95a5;font-weight:700}.crumb span{margin:0 11px;color:#c4ced6}.top-right{display:flex;align-items:center;gap:21px;font-size:12px;color:var(--muted)}.pill,.status-badge{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:8px 12px;border:1px solid #d8e5e6;background:#edf7f5;color:#107f72;font-weight:700;font-size:11px;white-space:nowrap}.pill.bad,.status-badge.bad{background:#fcf1f0;border-color:#f4d1cb;color:#bc5548}.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:27px 0 22px}.overline,.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--teal);margin-bottom:10px}.heading h1{font-size:27px;letter-spacing:-.75px;line-height:1.18;margin:0 0 8px;font-weight:800}.heading p,.panel-title p{color:var(--muted);margin:0;font-size:12px;line-height:1.55}.live-box{font-size:10px;display:flex;align-items:center;gap:9px;color:#3d7480;font-weight:800;white-space:nowrap;background:#eaf8f6;border:1px solid #d5ebe7;padding:12px 15px;border-radius:10px}.live-box small{font-weight:500;color:#669a9c}.live-dot{width:8px;height:8px;background:#1cb89d;border-radius:50%;box-shadow:0 0 0 4px #c7ebe5}.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:17px}.stat{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px;min-height:140px;box-shadow:0 2px 8px #16374c07;position:relative}.stat-icon{position:absolute;right:20px;top:19px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:19px}.stat-icon.sky{color:#3b90cb;background:#e9f4fd}.stat-icon.emerald{color:#0d9788;background:#e4f7f3}.stat-icon.grey{color:#8b9ca8;background:#eff2f5}.stat-icon.amber{color:#dc8a1d;background:#fcf1dd}.stat-meta{font-size:10px;font-weight:800;letter-spacing:1.0px;color:#8191a0;margin-bottom:11px}.stat strong{font-size:35px;font-weight:800;line-height:1.2;display:block}.stat small{color:#98a6b1;display:block;font-size:11px;margin-top:5px}.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:17px;margin-bottom:17px;min-width:0}.panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px #16374c06}.panel-title{min-height:77px;padding:20px 22px 14px;display:flex;justify-content:space-between;align-items:center;gap:14px}.panel-title h2{font-size:15px;margin:0 0 6px;letter-spacing:-.1px}.mini-label{font-size:10px;font-weight:800;color:#66869b;background:#eef5f8;padding:8px 10px;border-radius:7px;white-space:nowrap}#stationMap{height:350px;margin:0 17px;background:radial-gradient(circle at 40% 45%,#edf6f7,#dcebf2);border:1px solid #e8eef0;border-radius:9px;overflow:hidden;position:relative;z-index:0}.map-fallback{height:100%;display:grid;place-items:center;text-align:center;color:#6c8396;font-size:12px;padding:35px;max-width:420px;margin:auto}.legend{display:flex;gap:16px;padding:15px 22px;color:#8293a0;font-size:10px;flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:6px}.dot.green{background:#15a88e}.dot.red{background:#e16c65}.dot.orange{background:#efaa39}.search{border:1px solid var(--line);margin:0 19px 14px;border-radius:9px;padding:9px 12px;display:flex;align-items:center;gap:8px;color:#93a5b0;font-size:21px}.search input{outline:0;border:0;width:100%;font-size:12px;color:var(--ink)}.station-list{padding:0 12px 15px;max-height:362px;overflow:auto}.station-item{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:9px;padding:12px 9px;background:#fff;margin:2px 0;text-align:left;width:100%;transition:.15s;cursor:pointer}.station-item:hover{background:#f5fafb}.station-item.selected{border-color:#b6e2db;background:#edf8f5}.station-pin{height:35px;width:35px;border-radius:10px;background:#e8f5fa;color:#3a8ab3;display:grid;place-items:center;font-size:18px;flex-shrink:0}.station-body{flex:1;min-width:0}.station-name{display:block;font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.station-location{display:block;color:#8b9aa7;font-size:10px;margin-top:5px}.station-right{flex-shrink:0;text-align:right}.station-reading{font-size:14px;font-weight:800;display:block}.station-reading small{font-size:9px;color:#95a2aa;font-weight:500}.state{font-size:10px;font-weight:700;color:#239f8a;display:block;margin-top:5px}.state.off{color:#bc706e}.state.warn{color:#ca9024}.detail-panel{margin-bottom:17px}.detail-actions{display:flex;align-items:center;gap:9px}select{background:#fff;border:1px solid #dfe7ec;color:#4c687d;border-radius:8px;padding:9px 12px;font-size:12px;min-width:130px;outline-color:#0f9f92}.metric-groups{padding:4px 22px 20px}.group-heading{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:1px;color:#607d8e;font-weight:900;margin:18px 0 12px}.group-heading span{font-weight:400;color:#9aaab4;letter-spacing:0;text-transform:none}.metric-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.metric{background:#f8fafb;border:1px solid #edf1f3;border-radius:9px;padding:14px 11px;min-width:0}.metric .metric-name{font-size:11px;font-weight:800;color:#647d8e;white-space:nowrap}.metric .metric-val{font-size:23px;font-weight:800;color:#1b3b52;margin:9px 0 5px;letter-spacing:-.6px}.metric .metric-unit{font-size:10px;color:#96a8b3}.aqi-info{border-top:1px solid #edf1f3;display:flex;align-items:center;gap:16px;padding:15px 22px;background:#fcfefe;border-radius:0 0 12px 12px;flex-wrap:wrap}.aqi-title{border-radius:7px;background:#e9f4f7;color:#37798a;padding:11px;font-weight:900;font-size:11px}.aqi-info>div:nth-child(2){display:flex;align-items:center;gap:10px}.aqi-info strong{font-size:23px}.aqi-info span{font-size:11px;color:#678392}.aqi-info p{font-size:10px;color:#93a4ae;line-height:1.6;flex:1;margin:0;min-width:180px}.lower{grid-template-columns:1.4fr 1fr}.chart-panel{padding-bottom:9px}.chart-controls{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:0 20px 8px;flex-wrap:wrap}.segmented{display:flex;background:#f0f5f7;padding:3px;border-radius:8px;gap:2px}.segmented button{border:0;background:transparent;font-size:11px;padding:8px 10px;border-radius:6px;color:#698394}.segmented button.selected{background:white;box-shadow:0 1px 4px #192f421c;color:#147e7e;font-weight:800}.secondary-button{background:#f0f8f7;color:#178b82;border:1px solid #d5e8e5;border-radius:8px;font-size:11px;padding:9px 12px;font-weight:800}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.chart-wrap{position:relative;padding:7px 15px 0;height:280px}.chart-wrap canvas{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#9daeb9;font-size:12px;pointer-events:none}.chart-foot{display:flex;justify-content:space-between;color:#95a5b2;font-size:10px;padding:12px 23px}.alert-list{padding:0 20px 8px;max-height:230px;overflow:auto}.alert-row{border-bottom:1px solid #f0f2f5;display:flex;align-items:flex-start;gap:10px;padding:12px 2px}.alert-icon{width:30px;height:30px;border-radius:8px;background:#fff3e4;display:grid;place-items:center;color:#dca043;flex-shrink:0}.alert-row strong{display:block;font-size:12px}.alert-row p{font-size:11px;line-height:1.5;color:#8a9ba7;margin:5px 0 0}.notice{margin:14px 20px 20px;border-left:3px solid #dba94d;padding:12px;background:#fff9ee;color:#88734e;font-size:11px;line-height:1.6;border-radius:0 7px 7px 0}.empty{font-size:12px;color:#9aabb7;text-align:center;padding:35px 12px}footer{text-align:center;color:#9dacb7;font-size:11px;padding:8px 0 25px}.leaflet-popup-content{font:12px system-ui,sans-serif;line-height:1.7}.leaflet-popup-content b{font-size:13px}
@media(max-width:1200px){main{padding:0 19px 15px}.metric-grid{grid-template-columns:repeat(4,1fr)}.sidebar{padding-left:10px;padding-right:10px}.shell{grid-template-columns:205px minmax(0,1fr)}}@media(max-width:900px){.shell{display:block}.sidebar{height:auto;min-height:auto;position:relative;padding:12px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:5px}.brand{padding:0 15px 0 4px}.nav-heading,.side-info{display:none}.nav{padding:8px;margin:0}.two-col,.lower{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,1fr)}.heading h1{font-size:23px}#stationMap{height:330px}.station-list{max-height:265px}}@media(max-width:580px){main{padding:0 12px}.topline{height:auto;padding:13px 0;gap:8px;flex-wrap:wrap}.top-right{gap:8px}.heading{align-items:start;flex-direction:column}.heading h1{font-size:21px}.summary{gap:8px}.stat{padding:15px;min-height:123px}.stat strong{font-size:30px}.stat-icon{right:9px;top:11px}.metric-grid{grid-template-columns:repeat(3,1fr)}.metric .metric-val{font-size:20px}.metric{padding:12px 9px}.detail-actions{flex-wrap:wrap}.panel-title{padding:16px;flex-wrap:wrap}.metric-groups{padding:4px 13px 13px}.group-heading{flex-direction:column;align-items:start;gap:5px}.sidebar .nav{font-size:10px;gap:4px}.brand{width:100%;margin-bottom:5px}.live-box{font-size:9px}.chart-wrap{height:250px}}