.sim-rain-page { background:#07171e; }
.sim-rain-main { max-width:1420px; }
.sim-rain-aside { margin:auto 8px 18px; padding:16px; border:1px solid rgba(143,190,196,.16); border-radius:12px; background:linear-gradient(145deg,rgba(45,139,164,.13),rgba(8,30,37,.8)); }
.sim-rain-aside span,.sim-rain-layer-controls>div>span { color:#75c6d6; font-size:.61rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.sim-rain-aside strong { display:block; margin-top:8px; color:#f0f6f5; font-size:.85rem; }.sim-rain-aside p { margin:9px 0 0; color:#91a9af; font-size:.68rem; line-height:1.55; }
.sim-rain-header>div>p:last-child { max-width:720px; }
.sim-rain-period { margin-top:28px; padding:21px 23px; }
.sim-rain-presets { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding-bottom:17px; border-bottom:1px solid rgba(149,190,196,.13); }.sim-rain-presets>span { margin-right:8px; color:#829aa1; font-size:.62rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.sim-rain-presets button,.sim-rain-layer-controls button { padding:8px 11px; border:1px solid rgba(152,193,198,.18); border-radius:8px; color:#a9bdc1; background:#0b2027; font:inherit; font-size:.66rem; font-weight:850; cursor:pointer; }.sim-rain-presets button:hover,.sim-rain-layer-controls button:hover { color:#fff; border-color:rgba(116,199,214,.45); }.sim-rain-presets button.is-active,.sim-rain-layer-controls button.is-active { color:#071a21; border-color:#70c8d8; background:#70c8d8; }
.sim-rain-period-row { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-top:19px; }.sim-rain-period-row h2 { margin:4px 0 0; color:#eef5f4; font-family:Georgia,"Times New Roman",serif; font-size:1.55rem; font-weight:500; }.sim-rain-date-fields { display:flex; gap:10px; align-items:end; }.sim-rain-date-fields>span { margin-bottom:10px; color:#607b83; }.sim-rain-date-fields>button { min-height:38px; padding:10px 15px; border:0; border-radius:8px; color:#fff; background:#e76531; font:inherit; font-size:.7rem; font-weight:900; cursor:pointer; }.sim-rain-date-fields .rainfall-date-input-shell input { box-sizing:border-box; width:100%; min-width:0; min-height:36px; padding:8px 5px 8px 11px; border:0; border-radius:0; outline:0; color:#edf5f4; background:transparent; font:760 .7rem "Aptos","Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.02em; }.sim-rain-date-fields .rainfall-date-input-shell input::placeholder { color:#577078; font-weight:650; }.sim-rain-period-status { margin:13px 0 0; color:#789096; font-size:.66rem; }.sim-rain-period-status.is-error { color:#ff9972; }
.sim-rain-calendar-jump { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; }.sim-rain-calendar-jump select { min-height:34px; border:1px solid rgba(151,190,197,.2); border-radius:8px; outline:0; padding:0 29px 0 10px; color:#e7f2f1; background:#102a32; color-scheme:dark; font:800 .68rem "Aptos","Segoe UI",sans-serif; cursor:pointer; }.sim-rain-calendar-jump select:focus-visible { border-color:#ff8655; box-shadow:0 0 0 2px rgba(255,119,67,.16); }.sim-rain-calendar-jump #simRainCalendarMonth { min-width:122px; text-transform:capitalize; }.sim-rain-calendar-jump #simRainCalendarYear { min-width:86px; }
.sim-rain-metrics { margin-top:14px; }
.sim-rain-map-panel { margin-top:14px; padding:0; overflow:hidden; }.sim-rain-map-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding:22px 23px; border-bottom:1px solid rgba(145,184,192,.13); }.sim-rain-map-head h2 { margin:5px 0 0; color:#eef5f5; font-family:Georgia,"Times New Roman",serif; font-size:1.75rem; font-weight:500; }.sim-rain-map-head>div:first-child>p:last-child { margin:8px 0 0; color:#829aa0; font-size:.67rem; }
.sim-rain-layer-controls { display:flex; gap:18px; }.sim-rain-layer-controls>div { display:grid; gap:7px; }.sim-rain-layer-controls>div>div { display:flex; gap:5px; }
.sim-rain-map-wrap { position:relative; height:650px; background:#0b2026; }.sim-rain-map { width:100%; height:100%; background:radial-gradient(circle at 50% 45%,#17343c,#06161c 76%); }.sim-rain-map .leaflet-tile-pane img { filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(1.08) saturate(.62); }.sim-rain-map .leaflet-control-zoom { overflow:hidden; border:1px solid rgba(151,190,197,.24); border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.25); }.sim-rain-map .leaflet-control-zoom a { border-color:rgba(151,190,197,.18); color:#e8f3f3; background:#0c2229; }.sim-rain-map .leaflet-tooltip { border:1px solid #34545c; border-radius:8px; color:#dceceb; background:rgba(5,22,28,.95); box-shadow:0 8px 22px rgba(0,0,0,.3); font-size:.67rem; }.sim-rain-map .leaflet-tooltip-top:before { border-top-color:rgba(5,22,28,.95); }.sim-rain-map .leaflet-popup-content-wrapper,.sim-rain-map .leaflet-popup-tip { color:#dceceb; background:#0a252c; }.sim-rain-map .leaflet-popup-content { margin:14px 16px; line-height:1.55; }.sim-rain-map .leaflet-popup-content strong { display:block; margin-bottom:6px; color:#fff; }
.sim-rain-legend { position:absolute; z-index:700; left:18px; bottom:18px; min-width:175px; padding:14px 15px; border:1px solid rgba(151,193,198,.2); border-radius:11px; color:#dbe8e8; background:rgba(5,24,30,.92); box-shadow:0 12px 30px rgba(0,0,0,.25); backdrop-filter:blur(8px); }.sim-rain-legend>p { margin:0 0 10px; color:#fff; font-size:.68rem; font-weight:900; }.sim-rain-legend>div { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:.61rem; }.sim-rain-legend i { width:13px; height:9px; border-radius:2px; background:var(--legend-color); }.sim-rain-legend small { display:block; margin-top:9px; color:#829aa0; font-size:.58rem; line-height:1.45; }.sim-rain-legend.is-hidden { display:none; }
.sim-rain-opacity { position:absolute; z-index:700; right:18px; bottom:18px; display:grid; grid-template-columns:auto 115px auto; gap:9px; align-items:center; padding:10px 12px; border:1px solid rgba(151,193,198,.2); border-radius:10px; color:#a9bdc1; background:rgba(5,24,30,.92); font-size:.6rem; font-weight:800; }.sim-rain-opacity input { accent-color:#70c8d8; }.sim-rain-opacity output { min-width:31px; color:#fff; text-align:right; }
.sim-rain-station-status { margin:0; padding:13px 22px; border-top:1px solid rgba(145,184,192,.12); color:#8ca2a7; font-size:.67rem; }.sim-rain-station-status.is-warning { color:#f2b071; }
.sim-rain-method { display:grid; grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr); gap:45px; margin-top:14px; padding:27px; }.sim-rain-method h2 { margin:5px 0 0; color:#eef5f4; font-family:Georgia,"Times New Roman",serif; font-size:1.7rem; font-weight:500; }.sim-rain-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(148,187,192,.12); }.sim-rain-method-grid article { padding:19px; background:#0c2229; }.sim-rain-method-grid span { color:#70c8d8; font-size:.61rem; font-weight:900; }.sim-rain-method-grid strong { display:block; margin-top:8px; color:#edf5f4; font-size:.76rem; }.sim-rain-method-grid p { margin:8px 0 0; color:#849ba1; font-size:.65rem; line-height:1.55; }
.sim-rain-station-dot { border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.85),0 2px 7px rgba(0,0,0,.4); }.sim-rain-station-label { display:flex; align-items:center; justify-content:center; border:0; background:transparent; }.sim-rain-station-label span { display:block; min-width:43px; padding:3px 5px; border:1px solid rgba(255,255,255,.82); border-radius:6px; color:#fff; background:var(--station-color); box-shadow:0 3px 9px rgba(0,0,0,.35); font-size:.59rem; font-weight:900; line-height:1; text-align:center; white-space:nowrap; }
@media(max-width:1050px){.sim-rain-map-head,.sim-rain-period-row{align-items:flex-start;flex-direction:column}.sim-rain-layer-controls{width:100%;justify-content:space-between}.sim-rain-map-wrap{height:590px}.sim-rain-method{grid-template-columns:1fr}}
@media(max-width:720px){.sim-rain-main{padding-inline:14px}.sim-rain-period{padding:17px}.sim-rain-date-fields{display:grid;grid-template-columns:1fr 1fr;width:100%}.sim-rain-date-fields>span{display:none}.sim-rain-date-fields>button{grid-column:1/-1}.sim-rain-date-fields input{min-width:0;width:100%;box-sizing:border-box}.sim-rain-calendar-jump{gap:5px}.sim-rain-calendar-jump select{padding-inline:8px 23px}.sim-rain-calendar-jump #simRainCalendarMonth{min-width:108px}.sim-rain-calendar-jump #simRainCalendarYear{min-width:76px}.sim-rain-layer-controls{flex-direction:column}.sim-rain-layer-controls>div>div{display:grid;grid-template-columns:repeat(2,1fr)}.sim-rain-map-wrap{height:520px}.sim-rain-opacity{left:14px;right:auto;bottom:14px}.sim-rain-legend{left:14px;bottom:67px}.sim-rain-method-grid{grid-template-columns:1fr}.sim-rain-map-head{padding:19px}}