/* Monitoring layout, tuned for a 1920 x 1080 display. */
:root{--bg:#09131f;--panel:#112133;--line:#293e53;--muted:#a5bad0;--text:#edf5fc;--accent:#64dfc5}
body{background:radial-gradient(ellipse at 15% 0,#152b3e 0,transparent 45%),var(--bg)}
header{background:#0c1927e8;border-bottom:1px solid #2b4054}.brand-icon{font-size:32px;color:#71e4ce}h1{font-weight:650;letter-spacing:.03em}.brand p{color:#87a7bf}.toolbar button,.toolbar select{background:#192e42;border:1px solid #35506a;border-radius:8px;font-size:12px}.toolbar #historyOpen,.toolbar #notificationOpen{font-size:12px}#refresh{color:#84e8d2}.toolbar{gap:9px}
.overview{align-items:center;gap:12px;font-size:13px;color:#d5e5f3}.overview small{color:#93afc7}.overview #modeStatus{margin:0;padding:3px 11px;border:1px solid #2c5e59;border-radius:20px;color:#8be3ce;font-size:11px;background:#14342f}.overview #sync{margin-left:auto;color:#8daac2;font-size:11px}.warning.panel{border-radius:10px;border-left-width:4px;background:#142a37}.warning.good{background:linear-gradient(100deg,#12342f,#132736)}.warning strong{font-size:15px}.warning small{color:#a3becd}.panel{border-radius:14px;border:1px solid #2a4055;background:linear-gradient(135deg,#142639,#102031);box-shadow:0 5px 18px #00000012}.section-top h2,.panel>h2{color:#e8f3fc;font-size:16px;letter-spacing:.02em}.tag{background:#223c50;color:#afdaed;border-radius:5px;font-size:11px;padding:3px 8px}.temp{font-size:76px;font-weight:500;letter-spacing:-4px}.temp small{font-size:27px}.condition{font-size:13px;color:#c3d8e9}.condition .muted{font-size:11px;display:block;margin-top:4px}.stats label{font-size:11px;color:#9cb8cf}.stats strong{font-size:27px;font-weight:550}.stats small{font-size:12px}.stats>div{border-top-color:#2a435b}.footnote{font-size:10px;color:#91acc2;line-height:1.5}
.chart-top{margin-bottom:7px}#legend{font-size:12px;gap:18px}.legend-dot{width:8px;height:8px}.segmented{padding:3px;background:#0d1d2d;border:1px solid #2b4057;border-radius:8px}.segmented button{font-size:12px;padding:4px 11px}.segmented button.selected{background:#245349;color:#a1f2df;border-radius:5px}#range{padding:4px 8px;border-radius:6px}.hourly{padding-top:7px;border-top-color:#29445b}.hour{font-size:10px}.hour b{font-size:14px;line-height:1.5}.hour .rain{font-size:11px;color:#91c4ef}.spread-bar{padding:5px 8px;border-radius:7px;background:#1b3448;margin-top:7px;font-size:11px;color:#c0e0ee}.spread-bar button{font-size:10px;padding:2px 7px;background:#244458;border:0;white-space:nowrap}
.radar-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;min-height:0}.radar-map-area{min-height:0;display:flex;flex-direction:column;gap:8px}.radar #map{border:1px solid #37516b;border-radius:10px;flex:1;min-height:180px;height:260px;background:#233d54}.radar-control{font-size:11px;margin:0;gap:10px}.radar-control input{flex:1;min-width:70px}.rain-scale{font-size:10px;margin:0;gap:0}.rain-scale span{padding:1px 9px}.radar-outlook-area{display:flex;flex-direction:column;gap:8px;background:#0c1c2b;border:1px solid #294359;border-radius:10px;padding:14px;min-width:0;min-height:0;overflow:auto}.radar-outlook-title{font-size:11px;font-weight:600;color:#8fb2cc;letter-spacing:.07em;margin:0}.radar-outlook-area .rain-outlook{margin:0;color:#b3f0dd;font-size:18px;font-weight:550;line-height:1.5;display:block}.rain-details{margin:0;display:grid;grid-template-columns:45px 1fr;column-gap:8px;row-gap:5px;font-size:12px;line-height:1.5}.rain-details dt{color:#89a8c2}.rain-details dd{margin:0;color:#d4e5f3}.radar-outlook-area #rainDirection{margin:0;font-size:11px;line-height:1.5;color:#9cb7ce}.radar-outlook-area .rain-timeline{height:20px;min-height:20px;flex:none;margin:2px 0 14px}.radar-outlook-area .rain-timeline small{top:21px;font-size:8px}.radar-outlook-area .rain-timeline>span:nth-child(even) small{display:none}.radar-outlook-area .rain-test{float:none;margin:0;padding:3px 7px;font-size:10px;align-self:flex-start;background:transparent;border-color:#355066;color:#8eaec6}.radar-outlook-area .text-link{margin-top:auto;font-size:11px;line-height:1.4;color:#8dcef3}.pin{font-size:12px}.pin span{width:12px;height:12px}.map-credit{font-size:9px}#mapStatus{font-size:11px;max-width:95%;padding:4px 8px;border-radius:4px}
.day-row{font-size:13px;grid-template-columns:73px minmax(70px,1fr) 37px 37px 66px;gap:7px;padding:11px 0}.day-row .high{font-weight:650;color:#ffc397}.day-row .low{color:#9bc9ff}.day-row .amount{font-size:12px}.official .forecast-day{padding:11px 0;font-size:14px;line-height:1.5}.official .forecast-day strong{font-size:13px;color:#9dbbd2}.official .forecast-day p{margin:4px 0;font-size:15px;font-weight:500}.official .forecast-day .muted{font-size:11px;color:#a4bed1;line-height:1.5}.typhoon-selector{gap:7px;margin:2px 0 8px}.typhoon-selector select{font-size:12px;background:#1c354a;border-color:#35526e}.typhoon-selector button{font-size:11px}.typhoon-image{height:145px;border:1px solid #34516c;border-radius:8px;background:#1a3149}.wind-summary p{font-size:11px;line-height:1.45;margin:7px 0}.wind-storm{color:#d9e9f6}.wind-gale{color:#9fb7cd}.links>h2,.sources h2{font-size:13px}.link-grid{margin-top:9px;gap:7px}.link-grid a{padding:7px 11px;font-size:12px;background:#142a3c;border-color:#304b63;border-radius:8px}.link-grid a:hover{background:#1b3d50;border-color:#5a958f}.link-grid small{font-size:10px;margin-top:2px;color:#91b0c8}.source{background:#0e2030;border:1px solid #223b50;border-radius:6px;line-height:1.4;font-size:10px;padding:3px 6px}.source small{font-size:9px;color:#92aec4}.sources .section-top{margin-bottom:4px}#healthSummary{font-size:10px;margin-bottom:6px;color:#9cc9c4}#sources{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.sources .section-top>.muted{font-size:10px}footer{font-size:9px;color:#829fb7;margin-top:10px}footer a{color:#96c4d9}
dialog{border-color:#375c76;border-radius:16px;background:#112337}.dialog-head h2{font-size:23px}.feature-table{font-size:13px}.feature-table th,.feature-table td{padding:10px}.feature-table th{color:#bdd7e9}.event-list strong{font-size:13px}.event-list p{font-size:12px}#historySummary{font-size:12px;line-height:1.5}#historyChart svg text{font-size:12px}#rainRadarHost .radar-body{height:auto;min-height:0}#rainRadarHost #map{height:min(48vh,480px);min-height:250px;flex:none}#rainRadarHost .radar-outlook-area{justify-content:flex-start}#rainRadarHost .radar-outlook-title{display:none}
@media(min-width:1440px) and (min-height:900px){
 header{padding:12px 24px}h1{font-size:25px}h1 span{font-size:19px}.brand p{font-size:9px}main{padding:0 24px 12px;max-width:2000px}.overview{padding:9px 0}.warning.panel{padding:10px 15px;margin-bottom:12px}.warning small{font-size:10px}.grid{gap:12px;grid-template-columns:1.08fr 1.32fr 1.32fr 1.08fr;height:calc(100dvh - 216px);min-height:720px;grid-template-rows:.36fr .47fr .17fr}.grid>.panel{padding:16px;min-height:0;overflow:auto}.grid>.links,.grid>.sources{padding:12px}.section-top{margin-bottom:10px}.temp{font-size:76px}.condition{margin:9px 0 15px}.stats strong{font-size:27px}.stats{gap:9px}.stats label{font-size:11px}.current .footnote{margin-top:13px}.forecast .section-top{margin-bottom:7px}#chart{height:130px}.hour{min-width:62px;font-size:10px}.hour b{font-size:14px}.hourly{padding-top:6px}.spread-bar{font-size:11px}.radar-body{height:calc(100% - 38px)}.radar #map{height:auto;min-height:170px}.radar .section-top h2{font-size:16px}.radar-control{font-size:11px}.rain-scale{font-size:10px}.rain-scale span{padding:1px 9px}.weekly .section-top{margin-bottom:5px}.day-row{font-size:13px;padding:10px 0}.official .forecast-day{font-size:14px;padding:10px 0}.official .forecast-day p{font-size:15px}.official .forecast-day .muted{font-size:11px}.typhoon-image{height:140px}.wind-summary p{font-size:11px}.footnote{font-size:10px}#sources{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.source{font-size:10px;padding:3px 6px}.source small{font-size:9px}.sources h2{font-size:13px}.link-grid a{padding:6px 11px}.link-grid small{font-size:10px}
 body.storm-mode .grid{grid-template-columns:1.08fr 1.32fr 1.32fr 1.08fr;grid-template-rows:.36fr .47fr .17fr}body.storm-mode .typhoon{grid-column:1/3;grid-row:1/3}body.storm-mode .forecast{grid-column:3/5;grid-row:1}body.storm-mode .radar{grid-column:3/5;grid-row:2}body.storm-mode .current,body.storm-mode .weekly,body.storm-mode .official{display:none}body.storm-mode .typhoon-image{height:calc(100% - 140px);min-height:300px}body.storm-mode #typhoon{height:calc(100% - 40px)}body.storm-mode .wind-summary p{font-size:13px;line-height:1.5}body.storm-mode .typhoon .section-top h2{font-size:18px}body.storm-mode .typhoon-selector select{font-size:14px}body.storm-mode .radar #map{height:auto;min-height:170px}body.storm-mode #stormOverview{font-size:11px;padding:5px 10px;margin-bottom:7px}body.storm-mode .grid{height:calc(100dvh - 245px)}
}
@media(min-width:1440px) and (min-height:900px){
 header{padding:8px 24px}h1{font-size:23px;line-height:1.25}.overview{padding:4px 0}.warning.panel{padding:8px 15px}.temp{font-size:68px}.condition{margin:6px 0 10px}.current .footnote{margin-top:10px}#chart{height:105px}.chart-top{margin-bottom:2px}.spread-bar{padding:3px 8px;margin-top:4px}.typhoon-image{height:128px}.radar-body{height:calc(100% - 49px)}.link-grid{margin-top:6px;gap:5px}.link-grid a{padding:4px 11px}.link-grid small{line-height:1.2}.links>h2{line-height:1.4}.source{padding:2px 6px}.grid>.links,.grid>.sources{padding:10px}main{padding-bottom:8px}footer{margin-top:6px}body.storm-mode .grid{grid-template-rows:302px minmax(0,1fr) 140px}
}
@media(max-width:1439px){#sources{grid-template-columns:repeat(2,minmax(0,1fr))}.radar-body{display:block;height:auto}.radar-outlook-area{margin-top:12px;overflow:visible}.radar #map{height:260px;min-height:200px}.radar-outlook-area .text-link{margin-top:5px}.typhoon-image{height:130px}.day-row{font-size:11px;padding:7px 0;grid-template-columns:60px 1fr 30px 30px 60px}.temp{font-size:60px}.stats strong{font-size:22px}.radar-outlook-area .rain-outlook{font-size:15px}.radar-outlook-area .rain-timeline>span:nth-child(even) small{display:block}}
@media(min-width:1200px) and (max-width:1439px){.grid{height:auto;grid-template-rows:280px auto auto}.radar{min-height:620px}.sources{min-height:230px}body.storm-mode .grid{height:auto;grid-template-rows:280px auto auto}body.storm-mode .radar{min-height:620px}body.storm-mode .typhoon{min-height:580px}}
@media(max-width:650px){header{padding:14px 12px;gap:8px}.brand h1{font-size:20px}.brand h1 span{font-size:11px}.toolbar{gap:5px;max-width:192px}.toolbar button,.toolbar select{font-size:10px;padding:4px 6px}.toolbar #historyOpen,.toolbar #notificationOpen{font-size:10px}.overview{font-size:11px;gap:5px;flex-wrap:wrap}.overview #modeStatus{font-size:9px;padding:2px 7px;display:inline-block}.overview #sync{font-size:9px}.section-top h2{font-size:14px}.warning strong{font-size:12px}.warning small{font-size:10px}.panel{border-radius:11px}.temp{font-size:62px}.stats strong{font-size:24px}.radar #map{height:270px}.radar-outlook-area{padding:14px}.radar-outlook-area .rain-outlook{font-size:17px}.rain-details{font-size:12px}.day-row{font-size:12px;padding:9px 0;grid-template-columns:70px 1fr 32px 32px 60px}.source{font-size:10px}.sources .section-top{flex-wrap:wrap}.spread-bar{font-size:10px}.link-grid a{font-size:11px}.link-grid small{font-size:9px}#rainRadarHost .radar-body{display:block}#rainRadarHost #map{height:35vh;min-height:200px}.dialog-head h2{font-size:18px}.feature-table{font-size:10px}.feature-table th,.feature-table td{padding:6px}}