:root{--bg:#070d1f;--bg2:#0d1730;--card:#0f1b38;--line:#1d2c52;--teal:#22e6d4;--teal2:#0ea5e9;--orange:#ff8a1f;--red:#ff4757;--yellow:#ffd23f;--txt:#e9f1fb;--mut:#93a4c3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--txt);
 background:radial-gradient(1200px 600px at 80% -10%,#12305a55,transparent),radial-gradient(900px 500px at -10% 30%,#0b3b4a44,transparent),var(--bg);min-height:100vh}
a{color:var(--teal)}
h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.muted{color:var(--mut);margin:0 0 14px;line-height:1.45}
.fine{color:var(--mut);font-size:12px;margin:8px 0 0}
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#070d1fcc;backdrop-filter:blur(10px);position:sticky;top:0;z-index:1000}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.word{font-size:26px;font-weight:800;letter-spacing:-.03em}
.word b{color:var(--teal);font-weight:800}
.tagline{margin:0;color:var(--mut);font-size:14px;flex:1;min-width:200px}
.tagline span{color:var(--orange);font-weight:600}
nav{display:flex;gap:16px;align-items:center}
nav a{color:var(--txt);text-decoration:none;font-size:14px;opacity:.85}
nav a:hover{opacity:1;color:var(--teal)}
.btn-sm{background:var(--orange);color:#1a0d00!important;padding:7px 14px;border-radius:999px;font-weight:700;opacity:1!important}
.demo-banner{font-size:12.5px;color:var(--mut);text-align:center;padding:8px 14px;background:#0a1430;border-bottom:1px solid var(--line)}
main{max-width:1280px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:18px}
.card{background:linear-gradient(180deg,var(--card),#0c1630);border:1px solid var(--line);border-radius:18px;padding:20px}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.tag.demo{background:#ff8a1f22;color:var(--orange);border:1px solid #ff8a1f66}
.tag.soon{background:#22e6d41a;color:var(--teal);border:1px solid #22e6d455}
.tag.live{background:#22e6d41a;color:var(--teal);border:1px solid #22e6d455}
.btn{border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.primary{background:linear-gradient(90deg,var(--teal),var(--teal2));color:#03121a}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.pill{font-size:12px;background:#22e6d422;color:var(--teal);border-radius:999px;padding:2px 9px;vertical-align:middle}
.empty{color:var(--mut);padding:16px;border:1px dashed var(--line);border-radius:12px;text-align:center;font-size:14px}

/* radar */
.radar-wrap{display:grid;grid-template-columns:1fr 360px;gap:18px}
.map-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:560px;background:#050a18}
#map{position:absolute;inset:0;background:#050a18}
.map-ui{position:absolute;left:12px;right:12px;bottom:12px;z-index:500;display:flex;gap:10px;flex-wrap:wrap;align-items:center;pointer-events:none}
.map-ui>*{pointer-events:auto}
.layer-toggles,.player{background:#070d1fdd;border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;gap:12px;align-items:center;font-size:13px;backdrop-filter:blur(6px)}
.layer-toggles input{accent-color:var(--teal)}
.player{flex:1;min-width:240px}
.player button{width:36px;height:36px;border-radius:50%;border:0;background:var(--orange);color:#1a0d00;font-size:14px;font-weight:900;cursor:pointer;flex:none}
.player input{flex:1;accent-color:var(--teal)}
#frameTime{font-variant-numeric:tabular-nums;min-width:120px;text-align:right;color:var(--mut)}
.legend{position:absolute;top:12px;left:56px;z-index:500;display:flex;gap:6px;align-items:center;font-size:11px;color:var(--mut);background:#070d1fcc;padding:5px 9px;border-radius:8px;border:1px solid var(--line)}
.legend i{display:block;width:110px;height:8px;border-radius:4px;background:linear-gradient(90deg,#00e5ff,#00c853,#ffeb3b,#ff9800,#f44336,#e040fb)}
.leaflet-container{font-family:inherit}
.leaflet-control-attribution{background:#070d1fbb!important;color:#7d8db0!important;font-size:10px}
.leaflet-control-attribution a{color:#9fb3d9!important}
.leaflet-bar a{background:#0f1b38;color:var(--txt);border-color:var(--line)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0f1b38;color:var(--txt)}
.me-dot{width:16px;height:16px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 6px #ff8a1f55}
.side{background:linear-gradient(180deg,var(--card),#0c1630);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;max-height:560px}
.side-head h2{display:flex;align-items:center;gap:8px}
.seg{display:flex;background:#081127;border:1px solid var(--line);border-radius:10px;padding:3px;margin:6px 0 12px}
.seg button{flex:1;border:0;background:transparent;color:var(--mut);padding:7px 4px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.seg button.on{background:#22e6d422;color:var(--teal)}
.alert-list{overflow:auto;display:flex;flex-direction:column;gap:10px;flex:1;-webkit-overflow-scrolling:touch}
.al{border:1px solid var(--line);border-left:4px solid var(--c,#22e6d4);border-radius:12px;padding:11px 12px;background:#0a1430;cursor:pointer}
.al:hover{background:#0d1a3d}
.al h3{margin:0 0 4px;font-size:15px;color:var(--c)}
.al .area{font-size:12.5px;color:var(--txt);opacity:.85;line-height:1.35}
.al .meta{font-size:11.5px;color:var(--mut);margin-top:5px}
.al details{margin-top:6px;font-size:12.5px;color:var(--mut)}
.al details p{white-space:pre-line;margin:6px 0 0}

/* me */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.forecast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.fc{background:#0a1430;border:1px solid var(--line);border-radius:12px;padding:12px}
.fc .n{font-size:12px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fc .t{font-size:28px;font-weight:800;margin:4px 0;color:var(--txt)}
.fc .t small{font-size:13px;color:var(--mut)}
.fc .s{font-size:13px;color:var(--mut);line-height:1.3}
.fc img{width:44px;height:44px;border-radius:8px;float:right}
.phone-wrap{display:flex;justify-content:center;align-items:center}
.phone{width:300px;height:560px;border-radius:44px;padding:12px;background:#02050d;border:2px solid #24345e;box-shadow:0 30px 80px #000a,0 0 0 1px #0b1430 inset;position:relative}
.notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:14px;background:#000;z-index:2}
.phone-screen{height:100%;border-radius:34px;overflow:hidden;padding:64px 12px 12px;background:radial-gradient(400px 300px at 30% 0%,#1a3f7a,transparent),linear-gradient(180deg,#0c1b3d,#060b1a);display:flex;flex-direction:column;gap:10px}
.phone-time{position:absolute;top:66px;left:0;right:0;text-align:center;font-size:54px;font-weight:300;color:#ffffffdd;letter-spacing:-.02em;pointer-events:none}
.push{margin-top:auto;background:#1a2747e6;border:1px solid #2b3c66;border-radius:18px;padding:12px;backdrop-filter:blur(8px);position:relative}
.push+.push{margin-top:0}
.push-head{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);letter-spacing:.06em}
.push-head img{width:18px;height:18px}
.push-head em{margin-left:auto;font-style:normal}
.push-title{font-weight:800;margin-top:6px;font-size:15px}
.push-body{font-size:13px;color:#c9d6ee;margin-top:3px;line-height:1.35}
.push.warn{border-color:var(--red);box-shadow:0 0 0 2px #ff475744,0 0 30px #ff475744}
.push.warn .push-title{color:#ff8a95}
.push.watch{border-color:var(--orange)}
.push.watch .push-title{color:var(--orange)}
.push.clear .push-title{color:var(--teal)}
.push.sample .tag{position:absolute;top:10px;right:46px}
.push.sample{opacity:.9}

/* tropics */
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.link{font-size:14px;text-decoration:none}
.storms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.storm{background:#0a1430;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:12px}
.storm h3{margin:0 0 4px;font-size:16px}
.storm .k{font-size:13px;color:var(--mut);line-height:1.5}
.storm a{font-size:13px}
.outlook{margin:16px 0 0}
.outlook img{width:100%;max-width:760px;display:block;border-radius:12px;border:1px solid var(--line);background:#fff}
.outlook figcaption{font-size:12px;color:var(--mut);margin-top:6px}

/* join */
.join form{display:flex;gap:10px;flex-wrap:wrap}
.join input{flex:1;min-width:160px;background:#081127;border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit}
.join input:focus{outline:2px solid var(--teal);border-color:transparent}
.thanks{background:#22e6d414;border:1px solid #22e6d455;border-radius:12px;padding:14px}
.thanks b{color:var(--teal);font-size:17px}
.thanks p{margin:6px 0 0}
.pro{position:relative;background:radial-gradient(400px 200px at 100% 0%,#ff8a1f22,transparent),linear-gradient(180deg,var(--card),#0c1630)}
.pro h2 b{color:var(--orange)}
.pro ul{margin:8px 0 12px;padding-left:20px;line-height:1.7;color:#cfdbf0}
.pro .price{font-size:15px;color:var(--mut)}
.pro .price b{font-size:28px;color:var(--txt)}
.foot{border-top:1px solid var(--line);margin-top:20px;padding:18px;text-align:center;color:var(--mut);font-size:12.5px;line-height:1.8}

@media (max-width:980px){
 .radar-wrap{grid-template-columns:1fr}
 .side{max-height:none}
 .alert-list{max-height:420px}
 .map-card{min-height:62vh}
}
@media (max-width:720px){
 .grid2{grid-template-columns:1fr}
 nav a:not(.btn-sm){display:none}
 .tagline{order:3;flex-basis:100%;font-size:13px}
 .top{gap:10px}
 main{padding:12px;gap:14px}
 .phone{transform:scale(.92)}
 #frameTime{min-width:0;font-size:12px}
 .legend{left:50px}
}
.city-tip{background:#070d1fcc;border:1px solid #1d2c52;color:#bdf7f0;font-size:11px;font-weight:600;box-shadow:none;padding:1px 6px}
.city-tip:before{display:none}
.push.advisory{border-color:var(--teal)}
.push.advisory .push-title{color:var(--teal)}
.storm .tag{float:right}
[hidden]{display:none!important}