:root{
  --bg:#07100d;--panel:#0d1915;--panel2:#101f1a;--line:rgba(226,255,240,.095);
  --text:#f3f8f5;--muted:#91a39b;--green:#7cf0a5;--lime:#b7f34b;--blue:#58bff7;
  --yellow:#ffd84a;--orange:#fb923c;--red:#f65e67;--shadow:0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 65% 0%,#123226 0,#07100d 35%,#050b09 100%);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select,input{font:inherit}.app-shell{min-height:100vh;padding:18px 22px 28px}.topbar{height:64px;max-width:1480px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#143529,#0c1f18);border:1px solid rgba(140,255,184,.2);position:relative;box-shadow:inset 0 0 20px rgba(99,255,159,.05)}.brand-mark:before,.brand-mark:after,.brand-mark span{content:"";position:absolute;border:1.6px solid #82f2a8;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.brand-mark:before{width:25px;height:25px;opacity:.32}.brand-mark:after{width:16px;height:16px;opacity:.62}.brand-mark span{width:5px;height:5px;background:#a7ffcb;border:0;box-shadow:0 0 13px #7fffa9}.brand-mark i{position:absolute;width:14px;height:2px;background:#7fffa9;left:20px;top:19px;transform-origin:left center;transform:rotate(-34deg);box-shadow:0 0 8px rgba(124,240,165,.8)}.brand-title{font-weight:730;letter-spacing:-.02em;font-size:18px}.brand-subtitle{color:var(--muted);font-size:12px;margin-top:2px}.top-actions{display:flex;align-items:center;gap:9px}.badge{font-size:10px;letter-spacing:.08em;font-weight:800;border:1px solid var(--line);padding:6px 9px;border-radius:999px}.badge-demo{color:#ffe58a;background:rgba(255,206,71,.08);border-color:rgba(255,216,74,.28)}.badge-live{color:#8ff4b1;background:rgba(68,222,123,.08);border-color:rgba(124,240,165,.24)}.badge-neutral{color:#a9b7b1}.icon-button,.map-controls button,.play-button{border:1px solid var(--line);background:#0e1d18;color:#e9f4ef;display:grid;place-items:center;cursor:pointer}.icon-button{width:38px;height:38px;border-radius:12px}.icon-button svg,.secondary-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.icon-button svg{stroke-linecap:round}.layout{max-width:1480px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}.panel{background:linear-gradient(180deg,rgba(15,29,24,.96),rgba(9,20,16,.98));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.map-panel{min-width:0}.map-toolbar{height:76px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.location-control{display:flex;align-items:center;gap:10px}.location-icon{width:38px;height:38px;display:grid;place-items:center;background:rgba(91,192,247,.1);color:#80d6ff;border-radius:12px;font-size:21px}.location-copy{display:flex;flex-direction:column;gap:3px}.location-copy span,.eyebrow{font-size:9px;font-weight:800;letter-spacing:.12em;color:#748a80}.location-copy select{appearance:none;border:0;background:transparent;color:white;font-weight:700;font-size:15px;padding:0 24px 0 0;outline:0;background-image:linear-gradient(45deg,transparent 50%,#91a39b 50%),linear-gradient(135deg,#91a39b 50%,transparent 50%);background-position:calc(100% - 8px) 50%,calc(100% - 3px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.location-copy option{background:#10201a;color:white}.secondary-button{height:38px;border:1px solid var(--line);color:#dce9e3;background:#0d1d17;border-radius:11px;padding:0 12px;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px}.map-wrap{height:clamp(440px,62vh,700px);position:relative;background:#091411;overflow:hidden;touch-action:none}.map-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.map-vignette{position:absolute;pointer-events:none;inset:0;box-shadow:inset 0 0 100px rgba(0,0,0,.28)}.map-top-left{position:absolute;left:14px;top:14px;display:flex;gap:7px}.map-chip{background:rgba(8,17,14,.82);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);padding:6px 8px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#6ed4ff}.map-chip.nowcast{color:#91f5b2}.map-chip.subtle{color:#c7d6cf;font-weight:600;letter-spacing:0}.map-controls{position:absolute;right:13px;top:13px;display:flex;flex-direction:column;gap:5px}.map-controls button{width:34px;height:34px;border-radius:10px;font-size:18px;background:rgba(9,20,16,.86);backdrop-filter:blur(8px)}.legend{position:absolute;right:14px;bottom:14px;width:145px;border:1px solid rgba(255,255,255,.1);background:rgba(7,15,12,.82);padding:9px;border-radius:11px;backdrop-filter:blur(8px)}.legend-gradient{height:6px;border-radius:99px;background:linear-gradient(90deg,#39bdf3,#22c55e,#b5df21,#facc15,#fb8c35,#ef4444,#d946ef)}.legend-labels{display:flex;justify-content:space-between;color:#8da096;font-size:8px;margin-top:6px}.timeline-card{padding:13px 18px 15px;border-top:1px solid var(--line);background:#0a1612}.timeline-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:9px;letter-spacing:.1em;font-weight:800;color:#68c8f6}.timeline-mode{display:flex;align-items:center;gap:6px}.timeline-mode.nowcast{justify-content:flex-end;color:#7deaa3}.history-dot,.forecast-dot{width:6px;height:6px;border-radius:50%;background:#58bff7;box-shadow:0 0 8px #58bff7}.forecast-dot{background:#7cf0a5;box-shadow:0 0 8px #7cf0a5}.timeline-now{color:#f2f7f4;font-size:9px}.intensity-chart{height:33px;margin:9px 38px -3px;display:flex;align-items:flex-end;gap:2px}.intensity-bar{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:#3cbef1;opacity:.75;transition:height .15s,opacity .15s}.intensity-bar.forecast{background:#69e69b}.intensity-bar.active{opacity:1;filter:brightness(1.35);box-shadow:0 0 7px rgba(124,240,165,.35)}.scrubber-row{display:grid;grid-template-columns:32px 1fr 54px;gap:10px;align-items:center}.play-button{width:32px;height:32px;border-radius:50%}.play-button svg{width:15px;height:15px;fill:#eaf4ef}.now-button{height:28px;border-radius:8px;border:1px solid rgba(124,240,165,.2);background:rgba(124,240,165,.08);color:#8cf0ad;font-size:9px;font-weight:800;cursor:pointer}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,#3db6e7 0 50%,#68e89c 50% 100%);outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:white;border:3px solid #0d1e18;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 14px rgba(255,255,255,.22)}.timeline-ticks{display:flex;justify-content:space-between;margin:5px 48px 0;color:#63776e;font-size:8px}.side-column{display:flex;flex-direction:column;gap:14px}.status-card{padding:20px}.status-topline{display:flex;justify-content:space-between;gap:10px}.status-pill,.confidence-pill{padding:5px 7px;border-radius:7px;font-size:9px;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.04);color:#91a39b}.status-pill.fresh{color:#84efaa;background:rgba(61,214,112,.09)}.status-pill.delayed{color:#ffd66a;background:rgba(255,205,68,.08)}.status-pill.stale{color:#ff878d;background:rgba(255,80,92,.08)}.headline{font-size:29px;line-height:1.05;letter-spacing:-.035em;font-weight:760;margin-top:20px}.detail{color:#c7d7d0;font-size:15px;margin-top:7px;min-height:40px}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.metric{padding:13px;border:1px solid var(--line);background:rgba(255,255,255,.022);border-radius:14px}.metric-label{display:block;color:#71867c;font-size:8px;letter-spacing:.1em;font-weight:800}.metric strong{display:block;font-size:20px;margin:7px 0 2px}.metric small{display:block;color:#6f8279;font-size:9px;line-height:1.3}.event-strip{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.event-strip div:not(.event-arrow){display:flex;flex-direction:column}.event-strip div:last-child{text-align:right}.event-strip span{font-size:9px;color:#75897f}.event-strip strong{font-size:13px;margin-top:3px}.event-arrow{color:#50675d}.source-row{display:flex;justify-content:space-between;gap:8px;margin-top:13px;color:#5f766b;font-size:9px}.alert-card{padding:18px}.section-title-row{display:flex;align-items:flex-start;justify-content:space-between}.section-title-row h2{font-size:16px;margin:5px 0 0;letter-spacing:-.02em}.tiny-button{border:1px solid rgba(124,240,165,.18);background:rgba(124,240,165,.06);color:#8cf3af;border-radius:9px;padding:7px 10px;font-size:10px;cursor:pointer}.alert-preview{margin-top:14px;padding:12px;border-radius:14px;display:flex;gap:11px;align-items:center;background:rgba(62,188,244,.07);border:1px solid rgba(84,190,242,.12)}.alert-preview.active{background:rgba(124,240,165,.08);border-color:rgba(124,240,165,.16)}.alert-preview.muted{opacity:.72}.alert-symbol{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-size:18px}.alert-preview strong{display:block;font-size:12px}.alert-preview span{display:block;color:#82958c;font-size:10px;margin-top:3px;line-height:1.35}.settings-list{margin-top:12px;border-top:1px solid var(--line)}.setting-row{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);cursor:pointer}.setting-row strong{display:block;font-size:11px;font-weight:650}.setting-row span{display:block;font-size:9px;color:#6c8177;margin-top:3px}.setting-row input{display:none}.setting-row i{width:34px;height:19px;border-radius:99px;background:#22352c;position:relative;transition:.2s;flex:none}.setting-row i:after{content:"";width:13px;height:13px;position:absolute;left:3px;top:3px;border-radius:50%;background:#789086;transition:.2s}.setting-row input:checked+i{background:#176c3b}.setting-row input:checked+i:after{left:18px;background:#93f4b4}.about-card{padding:14px 17px}.about-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px}.about-row span{color:#6c8077}.about-row strong{font-weight:600}.about-card p{color:#53685e;font-size:8px;line-height:1.4;margin:10px 0 2px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 14px;background:#eaf5ef;color:#102019;border-radius:10px;font-size:11px;font-weight:650;opacity:0;pointer-events:none;transition:.25s;z-index:20;box-shadow:0 10px 35px rgba(0,0,0,.35)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1020px){.layout{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr}.about-card{grid-column:1/-1}.map-wrap{height:55vh}}
@media(max-width:680px){.app-shell{padding:8px 0 20px}.topbar{height:58px;padding:0 13px;margin-bottom:5px}.brand-subtitle{display:none}.layout{gap:7px}.panel{border-radius:0;border-left:0;border-right:0}.map-toolbar{height:66px;padding:10px 12px}.secondary-button{width:38px;padding:0;justify-content:center}.secondary-button span{display:none}.secondary-button{font-size:0}.map-wrap{height:54vh;min-height:390px}.timeline-card{padding-left:12px;padding-right:12px}.side-column{display:flex;gap:7px}.status-card,.alert-card{padding:16px}.headline{font-size:27px}.metrics-grid{gap:6px}.top-actions .badge{font-size:8px}.source-row{font-size:8px}.legend{width:125px}.brand-mark{width:36px;height:36px}.brand-title{font-size:16px}}
