:root { --ink:#071d26; --ink-2:#0d2b35; --teal:#0e7d79; --teal-bright:#20a7a0; --lime:#b5e45d; --mist:#e2f1ec; --paper:#f5f7f3; --line:#cbded8; --muted:#6a817e; --orange:#f0a052; --red:#e36d59; --shadow:0 16px 40px rgba(7,29,38,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope','Noto Sans SC',sans-serif; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid rgba(32,167,160,.35); outline-offset:3px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); }
.sidebar { background:var(--ink); color:#d8ebe7; min-height:100vh; padding:30px 20px 22px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden; }
.sidebar:before { content:''; position:absolute; width:260px; height:260px; border:1px solid rgba(181,228,93,.13); border-radius:50%; right:-155px; bottom:50px; box-shadow:0 0 0 28px rgba(181,228,93,.04),0 0 0 56px rgba(181,228,93,.025); }
.brand-lockup { display:flex; align-items:center; gap:11px; margin-bottom:62px; }
.brand-mark { width:32px; height:32px; position:relative; border:1px solid rgba(181,228,93,.7); border-radius:50%; display:flex; align-items:center; justify-content:center; transform:rotate(-12deg); }
.brand-mark span { height:11px; width:4px; background:var(--lime); margin:0 1px; border-radius:5px; opacity:.9; }
.brand-mark span:nth-child(2) { height:17px; opacity:.65; }.brand-mark span:nth-child(3) { height:7px; opacity:.4; }
.eyebrow,.panel-index,.section-kicker,.sidebar-label,.breadcrumb { margin:0; font-family:'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow { color:var(--lime); font-size:9px; line-height:1.4; }.brand-name { margin:3px 0 0; font-size:16px; letter-spacing:.14em; font-weight:700; }
.sidebar-label { color:#71958f; font-size:10px; padding:0 10px 12px; }.nav-list { display:flex; flex-direction:column; gap:6px; }.nav-item { text-decoration:none; color:#8eaba6; display:flex; align-items:center; gap:12px; padding:12px 11px; border-radius:8px; font-size:13px; transition:background .2s,color .2s; }.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }.nav-item.active { color:#eff9e5; background:rgba(181,228,93,.12); }.nav-icon { color:var(--lime); font-size:19px; width:18px; text-align:center; line-height:1; }.nav-dot { margin-left:auto; height:6px; width:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(181,228,93,.12); }
.station-card { margin-top:auto; background:var(--ink-2); border:1px solid rgba(181,228,93,.16); border-radius:11px; padding:15px; position:relative; }.station-card-top { display:flex; align-items:center; gap:7px; color:#93b0a9; font-size:10px; letter-spacing:.04em; }.live-pulse,.sync-dot { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(181,228,93,.1); }.station-status { margin-left:auto; color:var(--lime); }.station-card h3 { margin:13px 0 4px; font-size:14px; color:#f0f7ed; }.station-card p { margin:0; color:#759590; font-size:11px; }.station-meta { display:flex; gap:13px; color:#759590; border-top:1px solid rgba(255,255,255,.08); padding-top:11px; margin-top:12px; font:9px 'DM Mono',monospace; }.sidebar-footer { position:relative; padding:26px 10px 0; }.mini-legend { display:inline-flex; align-items:center; gap:7px; margin-right:13px; color:#71958f; font-size:10px; }.legend-swatch { height:7px; width:7px; border-radius:50%; display:inline-block; }.legend-swatch.safe { background:var(--lime); }.legend-swatch.warning { background:var(--orange); }.sidebar-footnote { margin:15px 0 0; color:#517570; font-size:9px; line-height:1.6; }
.main-content { max-width:1500px; width:100%; padding:28px clamp(28px,5vw,78px) 35px; margin:0 auto; }.topbar { display:flex; justify-content:space-between; align-items:center; padding-bottom:25px; border-bottom:1px solid var(--line); }.breadcrumb { font-size:10px; color:var(--teal); }.topbar-date { margin:7px 0 0; color:var(--muted); font-size:11px; }.topbar-actions { display:flex; align-items:center; gap:19px; color:var(--muted); font-size:11px; }.sync-status { display:flex; align-items:center; gap:7px; }.sync-status strong { color:var(--ink); font-weight:600; }.icon-button { border:0; background:transparent; color:var(--teal); font-size:22px; position:relative; cursor:pointer; padding:4px; }.notification-badge { position:absolute; top:0; right:0; background:var(--orange); color:#fff; width:13px; height:13px; line-height:13px; border-radius:50%; font:9px Manrope; }.user-chip { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:12px; }.avatar { height:27px; width:27px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--teal); color:#fff; font-size:11px; }.chevron { color:var(--muted); font-size:17px; margin-left:3px; }
.hero-section { display:grid; grid-template-columns:1fr 270px; gap:20px; align-items:center; min-height:280px; padding:38px 0 29px; }.section-kicker { display:flex; align-items:center; gap:10px; color:var(--teal); font-size:10px; }.kicker-line { width:30px; height:1px; background:var(--teal); }.hero-copy h1 { margin:17px 0 14px; color:var(--ink); letter-spacing:-.055em; line-height:1.1; font-size:clamp(36px,4.5vw,62px); font-weight:700; }.hero-copy h1 em { color:var(--teal); font-style:normal; }.hero-description { margin:0; max-width:490px; color:var(--muted); font-size:14px; line-height:1.8; }.jump-link { display:inline-flex; align-items:center; gap:12px; margin-top:22px; color:var(--teal); font-size:12px; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(14,125,121,.28); padding-bottom:4px; }.jump-link span { font-size:17px; }
.hero-signal { height:256px; width:256px; position:relative; margin:0 auto; display:flex; align-items:center; justify-content:center; }.signal-ring { height:192px; width:192px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#37b4a6 0%,var(--teal) 42%,#09605f 100%); box-shadow:0 0 0 1px rgba(32,167,160,.22),0 0 0 13px rgba(14,125,121,.09),0 0 0 27px rgba(14,125,121,.05), inset 0 0 35px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }.signal-ring:after { content:''; position:absolute; inset:11px; border:1px dashed rgba(226,241,236,.45); border-radius:50%; }.signal-inner { text-align:center; color:#e9f7e7; position:relative; z-index:1; }.signal-overline { display:block; color:var(--lime); font:9px 'DM Mono',monospace; letter-spacing:.14em; }.signal-inner strong { display:block; color:#fff; font-size:37px; line-height:1.2; letter-spacing:-.05em; margin-top:6px; }.signal-caption { color:#bcddd5; font-size:11px; }.signal-orbit { position:absolute; border:1px solid rgba(14,125,121,.28); border-radius:50%; }.orbit-one { inset:9px 0 39px 36px; transform:rotate(40deg); }.orbit-two { inset:38px 25px 10px 5px; transform:rotate(-34deg); border-color:rgba(181,228,93,.25); }.signal-label { position:absolute; z-index:3; background:var(--paper); color:var(--muted); font:10px 'DM Mono',monospace; padding:4px 7px; border-left:2px solid var(--lime); box-shadow:0 4px 12px rgba(7,29,38,.08); }.signal-label b { color:var(--ink); font-family:Manrope; font-size:14px; margin-left:4px; }.signal-label small { font-size:8px; margin-left:2px; }.label-top { top:15px; right:0; }.label-bottom { bottom:12px; left:0; border-color:var(--teal-bright); }
.summary-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; margin-bottom:17px; }.metric-card { background:#fff; border:1px solid #e1ece8; border-radius:10px; min-height:147px; padding:17px 19px 14px; box-shadow:0 5px 18px rgba(7,29,38,.025); }.metric-primary { background:var(--ink); color:#e4f2ed; border-color:var(--ink); }.metric-heading { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }.metric-primary .metric-heading { color:#8cafaa; }.metric-trend { color:var(--lime); font:10px 'DM Mono',monospace; }.metric-value { display:flex; align-items:baseline; gap:7px; margin:11px 0 5px; }.metric-value strong { font-size:38px; letter-spacing:-.06em; line-height:1; }.metric-value span { color:#91aea8; font:11px 'DM Mono',monospace; }.metric-value.compact strong { font-size:30px; color:var(--ink); }.metric-value.compact span { color:var(--muted); }.meter { height:5px; border-radius:4px; background:#193b42; overflow:hidden; margin:14px 0 8px; }.meter span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal-bright),var(--lime)); transition:width .35s ease; }.metric-card p { margin:0; color:#7b9590; font-size:10px; }.metric-primary p { color:#8cafaa; }.metric-card p b { color:var(--ink); font-weight:700; }.metric-primary p b { color:var(--lime); }.muted { color:#91aaa5; }.status-pill,.forecast-badge { font:9px 'DM Mono',monospace; padding:4px 7px; border-radius:20px; }.pill-safe { color:var(--teal); background:#e4f3e8; }.pill-attention { color:#a76d1c; background:#fff0dc; }.pill-alert { color:#b24c3d; background:#fde4df; }.micro-chart { height:27px; display:flex; align-items:end; gap:5px; margin:11px 0 10px; }.micro-chart i { display:block; width:calc((100% - 40px)/9); border-radius:2px 2px 0 0; background:rgba(14,125,121,.2); }.micro-chart i.last { background:var(--teal-bright); }.chart-lime i { background:rgba(181,228,93,.26); }.chart-lime i.last { background:#99c952; }
.content-grid { display:grid; grid-template-columns:1fr 1.12fr; gap:17px; }.panel { background:#fff; border:1px solid #e1ece8; border-radius:10px; padding:22px 24px 19px; box-shadow:0 5px 18px rgba(7,29,38,.025); }.panel-header,.section-header { display:flex; justify-content:space-between; align-items:flex-start; }.panel-index { color:var(--teal); font-size:9px; }.panel h2,.section-header h2 { margin:6px 0 0; font-size:20px; letter-spacing:-.04em; }.required-note { color:#8da29e; font-size:10px; }.panel-intro { color:var(--muted); font-size:11px; line-height:1.7; margin:14px 0 18px; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field { display:block; color:var(--ink); font-size:12px; font-weight:700; }.field i { color:var(--red); font-style:normal; }.input-wrap { display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; margin-top:7px; overflow:hidden; background:#fbfdfb; transition:border .2s,box-shadow .2s; }.input-wrap:focus-within { border-color:var(--teal-bright); box-shadow:0 0 0 3px rgba(32,167,160,.1); }.input-wrap input { color:var(--ink); border:0; outline:0; background:transparent; width:100%; min-width:0; padding:10px 10px; font-size:18px; font-weight:700; }.input-wrap span { color:var(--muted); font:10px 'DM Mono',monospace; padding:0 10px 0 0; }.field small { display:block; color:#92a6a3; font:9px 'DM Mono',monospace; margin-top:6px; font-weight:400; }.preset-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:16px; color:#8a9e9b; font-size:10px; }.preset-btn { border:1px solid var(--line); background:#f8fbf8; color:var(--teal); border-radius:5px; padding:6px 8px; font-size:10px; cursor:pointer; transition:.2s; }.preset-btn:hover { border-color:var(--teal); background:var(--mist); }.form-actions { display:flex; align-items:center; gap:16px; margin-top:21px; }.primary-button { border:0; color:var(--ink); background:var(--lime); border-radius:5px; padding:11px 15px; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 4px 13px rgba(181,228,93,.25); transition:transform .2s,background .2s; }.primary-button:hover { transform:translateY(-1px); background:#c7ed7a; }.primary-button span { margin-left:10px; font-size:16px; }.text-button { border:0; padding:4px 0; background:transparent; color:var(--teal); font-size:11px; cursor:pointer; }.input-note { display:flex; gap:8px; align-items:flex-start; border-top:1px solid #edf2ef; padding-top:13px; margin-top:17px; color:#8da29e; font-size:9px; line-height:1.5; }.info-mark { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--mist); color:var(--teal); font:10px Georgia; flex:none; }
.forecast-header { align-items:center; }.forecast-badge { color:var(--teal); background:#e5f4e7; }.forecast-badge.attention { color:#a76d1c; background:#fff0dc; }.forecast-badge.alert { color:#b24c3d; background:#fde4df; }.forecast-chart-wrap { margin:20px 0 0 30px; position:relative; }.chart-y-labels { position:absolute; left:-30px; top:0; bottom:25px; display:flex; flex-direction:column; justify-content:space-between; color:#a0b1ae; font:8px 'DM Mono',monospace; }.forecast-chart { position:relative; height:152px; overflow:visible; }.forecast-chart svg { position:absolute; width:100%; height:100%; left:0; top:0; overflow:visible; }.chart-gridline { position:absolute; height:1px; left:0; right:0; border-top:1px dashed #dae6e2; }.grid-high { top:6px; }.grid-mid { top:73px; }.grid-low { bottom:12px; }.forecast-line { fill:none; stroke:var(--teal); stroke-width:3; vector-effect:non-scaling-stroke; }.chart-point { fill:var(--paper); stroke:var(--teal); stroke-width:2; vector-effect:non-scaling-stroke; }.p7 { fill:var(--lime); stroke:var(--ink); }.chart-tooltip { position:absolute; right:-6px; top:12px; min-width:106px; padding:8px 9px; background:var(--ink); color:#d6ebe5; border-radius:5px; font-size:9px; box-shadow:var(--shadow); }.chart-tooltip:after { content:''; position:absolute; left:14px; bottom:-5px; border:5px solid transparent; border-top-color:var(--ink); border-bottom:0; }.chart-tooltip b,.chart-tooltip strong,.chart-tooltip span { display:block; }.chart-tooltip b { color:#8cafaa; font:8px 'DM Mono',monospace; margin-bottom:5px; }.chart-tooltip strong { color:var(--lime); font-size:12px; }.chart-tooltip span { color:#8cafaa; margin-top:3px; }.chart-x-labels { display:flex; justify-content:space-between; color:#9badab; font:8px 'DM Mono',monospace; margin-top:10px; }.forecast-summary { border-top:1px solid #edf2ef; margin-top:20px; padding-top:13px; display:flex; gap:11px; }.forecast-summary-icon { width:28px; height:28px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#e8f4da; color:var(--teal); font-size:19px; }.forecast-summary strong { display:block; color:var(--ink); font-size:12px; }.forecast-summary p { color:var(--muted); font-size:10px; margin:5px 0 0; }
.alert-strip { display:flex; align-items:center; gap:13px; min-height:58px; border:1px solid #d9e9cb; border-left:4px solid var(--lime); border-radius:7px; padding:10px 15px; background:#f5f9ee; margin-top:17px; }.alert-strip.attention { border-color:#f4dfbf; border-left-color:var(--orange); background:#fffaf0; }.alert-strip.alert { border-color:#f3cdc5; border-left-color:var(--red); background:#fff7f5; }.alert-icon { width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--lime); color:var(--ink); font-weight:800; }.attention .alert-icon { background:var(--orange); color:#fff; }.alert .alert-icon { background:var(--red); color:#fff; }.alert-strip strong { display:block; font-size:12px; }.alert-strip span:not(.alert-time) { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.alert-time { margin-left:auto; color:#8da29e; font:9px 'DM Mono',monospace; white-space:nowrap; }.history-section { margin-top:31px; }.section-header { align-items:flex-end; }.history-table-wrap { margin-top:14px; background:#fff; border:1px solid #e1ece8; border-radius:9px; overflow:auto; }.history-table-wrap table { border-collapse:collapse; width:100%; min-width:600px; }.history-table-wrap th,.history-table-wrap td { padding:13px 17px; text-align:left; border-bottom:1px solid #edf2ef; font-size:11px; white-space:nowrap; }.history-table-wrap th { color:#8da29e; font:9px 'DM Mono',monospace; letter-spacing:.05em; background:#fbfdfb; }.history-table-wrap td { color:var(--muted); }.history-table-wrap td:first-child { color:var(--ink); font:10px 'DM Mono',monospace; }.history-table-wrap tr:last-child td { border-bottom:0; }.result-text { font-weight:700; }.result-safe { color:var(--teal); }.result-attention { color:#b47726; }.result-alert { color:var(--red); }.trend-up { color:#b47726; }.trend-safe { color:var(--teal); }.page-footer { display:flex; justify-content:space-between; gap:15px; margin-top:28px; color:#91a5a1; font:9px 'DM Mono',monospace; }
@media (max-width:1050px) { .app-shell { grid-template-columns:210px minmax(0,1fr); }.sidebar { padding-left:14px; padding-right:14px; }.main-content { padding-left:30px; padding-right:30px; }.content-grid { grid-template-columns:1fr; }.forecast-panel { min-height:340px; } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { position:relative; height:auto; min-height:0; padding:16px 18px; flex-direction:row; align-items:center; gap:22px; overflow:visible; }.brand-lockup { margin:0; }.sidebar-section,.station-card,.sidebar-footer { display:none; }.main-content { padding:18px 16px 26px; }.topbar { align-items:flex-start; gap:15px; }.topbar-actions { gap:10px; }.sync-status { display:none; }.user-chip span:not(.avatar) { display:none; }.hero-section { min-height:0; grid-template-columns:1fr; padding:32px 0 18px; }.hero-copy h1 { font-size:39px; }.hero-signal { width:230px; height:230px; margin:4px auto 0; transform:scale(.9); }.summary-grid { grid-template-columns:1fr; }.metric-card { min-height:132px; }.field-grid { grid-template-columns:1fr; }.panel { padding:19px 17px; }.forecast-panel { min-height:0; }.alert-strip { align-items:flex-start; }.alert-time { display:none; }.page-footer { flex-direction:column; }.history-table-wrap { margin-right:-17px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.map-section { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(240px,.66fr); gap:17px; margin:0 0 17px; }
.map-panel,.map-aside { background:#fff; border:1px solid #e1ece8; border-radius:10px; box-shadow:0 5px 18px rgba(7,29,38,.025); }
.map-panel { padding:20px 21px 15px; overflow:hidden; }
.map-panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.map-panel-heading h2 { margin:6px 0 0; font-size:20px; letter-spacing:-.04em; }
.map-controls-note { display:flex; align-items:center; gap:7px; color:#78928d; font:9px 'DM Mono',monospace; white-space:nowrap; padding-top:4px; }
.map-live-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(181,228,93,.15); }
.map-frame { height:335px; border-radius:7px; overflow:hidden; background:#d8e9e0; border:1px solid #d2e4dd; }
.map-caption { display:flex; align-items:center; gap:17px; padding:12px 2px 0; color:#8da29e; font:9px 'DM Mono',monospace; }
.map-caption a { color:var(--teal); text-decoration:none; margin-left:auto; }
.map-caption a:hover { text-decoration:underline; }
.station-marker-key { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(227,109,89,.17); margin-right:8px; vertical-align:middle; }
.map-aside { background:var(--ink); color:#d8ebe7; padding:22px 21px; display:flex; flex-direction:column; }
.map-aside .panel-index { color:var(--lime); }
.map-station-name { display:flex; align-items:center; gap:10px; margin-top:17px; }
.map-station-name h3 { margin:0; color:#f4fbf1; font-size:18px; letter-spacing:-.04em; }
.station-ping { width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(227,109,89,.16); flex:none; }
.map-aside-copy { color:#8eaba6; font-size:11px; line-height:1.75; margin:13px 0 21px; }
.map-aside-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.09); }
.map-aside-grid div { background:var(--ink-2); padding:12px 10px; }
.map-aside-grid span { display:block; color:#71958f; font:9px 'DM Mono',monospace; margin-bottom:6px; }
.map-aside-grid strong { color:#eff9e5; font-size:14px; }
.map-aside-grid .safe-text { color:var(--lime); }
.map-aside-callout { display:flex; gap:8px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.1); margin-top:auto; padding-top:16px; }
.map-aside-callout span { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:rgba(181,228,93,.14); color:var(--lime); font:10px Georgia; flex:none; }
.map-aside-callout p { color:#71958f; font-size:9px; line-height:1.6; margin:0; }
.custom-map-marker { width:28px; height:28px; border-radius:50% 50% 50% 0; background:var(--red); border:3px solid #fff; box-shadow:0 4px 12px rgba(7,29,38,.3); transform:rotate(-45deg); position:relative; }
.custom-map-marker:after { content:''; width:7px; height:7px; background:#fff; border-radius:50%; position:absolute; top:7px; left:7px; }
@media (max-width:1050px) { .map-section { grid-template-columns:1fr; }.map-aside { min-height:218px; }.map-aside-callout { margin-top:18px; } }
@media (max-width:720px) { .map-panel { padding:18px 16px 13px; }.map-panel-heading { gap:8px; }.map-panel-heading h2 { font-size:18px; }.map-frame { height:280px; }.map-caption { align-items:flex-start; flex-direction:column; gap:7px; }.map-caption a { margin-left:0; }.map-aside { padding:20px 17px; } }
.offline-map { position:relative; background:#dcece4; }
.basin-svg { display:block; width:100%; height:100%; }
.map-ridge { fill:#b9d5c7; opacity:.62; }
.ridge-b { fill:#a8cbb9; opacity:.56; }
.map-boundary { fill:none; stroke:#9bc1b1; stroke-width:1.5; stroke-dasharray:5 8; opacity:.68; }
.map-reservoir { fill:url(#waterFill); stroke:#0e7d79; stroke-width:2; opacity:.93; }
.map-river { fill:none; stroke:#0e7d79; stroke-width:7; stroke-linecap:round; opacity:.85; }
.river-branch { stroke:#3ba69d; stroke-width:3; opacity:.75; }
.map-road { fill:none; stroke:#f4faf7; stroke-width:3; stroke-dasharray:9 8; opacity:.92; }
.map-label { font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; fill:#315f5a; pointer-events:none; }
.label-title text:first-child { font-size:23px; font-weight:800; letter-spacing:.12em; fill:#174c4a; }
.label-title text:last-child { font:9px 'DM Mono',monospace; letter-spacing:.16em; fill:#4c8178; }
.label-reservoir text:first-child { font-size:12px; font-weight:700; }
.label-reservoir text:last-child { font-size:9px; fill:#4d8c82; }
.label-river text { font-size:11px; font-weight:700; fill:#1c716c; }
.svg-station { cursor:pointer; outline:none; }
.svg-station:focus .station-dot,.svg-station:hover .station-dot,.svg-station.selected .station-dot { stroke:#fff; stroke-width:3; }
.station-halo { fill:#e36d59; opacity:.18; animation:stationPulse 2.6s ease-in-out infinite; }
.station-dot { fill:#e36d59; stroke:#fff; stroke-width:2; transition:transform .2s ease; transform-box:fill-box; transform-origin:center; }
.station-secondary .station-dot { fill:#0e7d79; }
.station-stem { stroke:#e36d59; stroke-width:2; stroke-dasharray:2 3; }
.station-name { font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; font-size:11px; font-weight:700; fill:#164a48; paint-order:stroke; stroke:#e8f3ee; stroke-width:4px; stroke-linejoin:round; }
.map-scale path { stroke:#2f655d; stroke-width:2; }.map-scale text { font:9px 'DM Mono',monospace; fill:#507d74; }
.map-station-tooltip { position:absolute; left:18px; bottom:17px; min-width:190px; padding:10px 12px; border-left:3px solid var(--red); border-radius:5px; background:rgba(7,29,38,.92); color:#d7ebe5; box-shadow:0 7px 17px rgba(7,29,38,.18); pointer-events:none; }
.map-station-tooltip strong,.map-station-tooltip span { display:block; }.map-station-tooltip strong { color:#fff; font-size:11px; }.map-station-tooltip span { color:#9bc4ba; font:9px 'DM Mono',monospace; margin-top:4px; }
@keyframes stationPulse { 0%,100% { transform:scale(.82); opacity:.16; } 50% { transform:scale(1.08); opacity:.3; } }
.app-shell { display:block; min-height:100vh; }
.sidebar { min-height:74px; height:auto; padding:15px clamp(24px,4vw,62px); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:25px; position:relative; top:auto; overflow:visible; }
.sidebar:before { right:6%; bottom:auto; top:-145px; }
.brand-lockup { margin:0; }
.sidebar-section { display:flex; align-items:center; gap:18px; min-width:0; }
.sidebar-label { display:none; }
.nav-list { flex-direction:row; gap:5px; }
.nav-item { padding:10px 12px; white-space:nowrap; }
.station-card { margin:0; padding:9px 13px; display:flex; align-items:center; gap:10px; }
.station-card-top { gap:6px; }.station-card h3 { margin:0; font-size:12px; }.station-card p,.station-meta,.sidebar-footer { display:none; }
.main-content { max-width:1600px; padding-left:clamp(24px,4vw,62px); padding-right:clamp(24px,4vw,62px); }
@media (max-width:1050px) { .sidebar { grid-template-columns:auto minmax(0,1fr); }.station-card { display:none; }.sidebar-section { justify-self:end; }.map-section { grid-template-columns:minmax(0,1fr) 260px; }.content-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:720px) { .sidebar { display:flex; min-height:0; padding:16px 18px; gap:22px; }.brand-lockup { margin:0; }.sidebar-section,.station-card,.sidebar-footer { display:none; }.main-content { padding-left:16px; padding-right:16px; }.map-section { grid-template-columns:1fr; }.content-grid { grid-template-columns:1fr; }.basin-svg { min-width:650px; }.offline-map { overflow-x:auto; }.map-station-tooltip { left:12px; bottom:12px; }.hero-section { grid-template-columns:1fr; } }

/* Evaluation workbench expansion */
.assessment-settings { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:10px; margin:0 0 15px; padding:11px; background:#f1f7f4; border:1px solid #dbeae4; border-radius:8px; }
.assessment-settings label { display:block; min-width:0; }.assessment-settings span { display:block; color:#68827c; font:9px 'DM Mono',monospace; margin:0 0 5px; }
.assessment-settings select { appearance:none; width:100%; background:#fff; border:1px solid #cbded8; border-radius:5px; padding:7px 25px 7px 8px; color:var(--ink); font-size:11px; font-weight:700; background-image:linear-gradient(45deg,transparent 50%,#0e7d79 50%),linear-gradient(135deg,#0e7d79 50%,transparent 50%); background-position:calc(100% - 12px) 11px,calc(100% - 8px) 11px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.indicator-group { margin-top:14px; border:1px solid #e1ece8; border-radius:7px; background:#fcfefd; overflow:hidden; }
.indicator-group summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; padding:11px 12px; color:var(--ink); font-size:11px; font-weight:800; }
.indicator-group summary::-webkit-details-marker { display:none; }.indicator-group summary:before { content:'+'; color:var(--teal); font:18px Georgia; margin-right:8px; }.indicator-group[open] summary:before { content:'–'; }.indicator-group summary span { margin-right:auto; }.indicator-group summary small { color:#8da29e; font:9px 'DM Mono',monospace; font-weight:400; }
.indicator-group .field-grid { padding:0 12px 13px; }.field-grid-three { grid-template-columns:repeat(3,1fr); }.field-grid-four { grid-template-columns:repeat(4,1fr); }.indicator-group .input-wrap { margin-top:6px; }.indicator-group .input-wrap input { padding:8px; font-size:15px; }
/* Four-column algal-risk inputs reserve space for the full reading first, then pin the unit at the edge. */
.field-grid-four .input-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.field-grid-four .input-wrap input { width:100%; min-width:0; padding:8px 3px 8px 10px; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.field-grid-four .input-wrap input::-webkit-outer-spin-button,.field-grid-four .input-wrap input::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.field-grid-four .input-wrap span { padding:0 8px 0 2px; white-space:nowrap; font-size:9px; }
.results-section { margin-top:18px; }.method-tag { align-self:flex-end; color:var(--teal); background:#e3f1eb; border:1px solid #cde4da; border-radius:20px; padding:5px 9px; font:9px 'DM Mono',monospace; }
.result-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:14px; margin-top:14px; }.result-card { min-height:178px; padding:17px 19px; background:#fff; border:1px solid #e1ece8; border-radius:10px; box-shadow:0 5px 18px rgba(7,29,38,.025); }.result-card > p { margin:0; color:#78928d; font:9px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.result-card h3 { font-size:15px; letter-spacing:-.03em; margin:8px 0 0; }.result-card-primary { background:linear-gradient(135deg,#08242d,#123f44); border-color:#08242d; color:#eff8ef; }.result-card-primary > p { color:#b5e45d; }.result-score { margin-top:7px; display:flex; align-items:baseline; gap:6px; }.result-score strong { font-size:43px; letter-spacing:-.07em; line-height:1; }.result-score span { color:#9fc4ba; font:11px 'DM Mono',monospace; }.result-card-primary h3 { color:#fff; }.result-copy { color:#6e8882; font-size:10px; line-height:1.65; margin:9px 0 0!important; letter-spacing:0!important; text-transform:none!important; font-family:Manrope!important; }.result-card-primary .result-copy { color:#b3cec6; }.risk-band { display:flex; align-items:center; gap:8px; margin-top:13px; }.risk-band span { width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(181,228,93,.16); }.risk-band strong { font-size:27px; letter-spacing:-.05em; }.driver-list { list-style:none; padding:0; margin:11px 0 0; counter-reset:drivers; }.driver-list li { display:grid; grid-template-columns:46px 1fr; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid #edf2ef; color:#78928d; font-size:10px; }.driver-list li:last-child { border-bottom:0; }.driver-list b { color:var(--teal); font:10px 'DM Mono',monospace; }.single-factor-panel { background:#fff; border:1px solid #e1ece8; border-radius:10px; padding:18px 19px 16px; margin-top:14px; }.single-factor-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }.single-factor-head h3 { margin:5px 0 0; font-size:17px; letter-spacing:-.04em; }.single-factor-head > p { margin:0; color:#6d8781; font-size:10px; text-align:right; }.factor-list { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:15px; }.factor { padding:10px 9px; border-radius:6px; border:1px solid #e1ece8; background:#fbfdfc; min-width:0; }.factor-head { display:flex; justify-content:space-between; gap:5px; color:#728983; font-size:9px; }.factor-head b { color:var(--ink); font:10px 'DM Mono',monospace; }.factor-status { display:block; margin-top:7px; font-size:11px; font-weight:800; color:var(--teal); }.factor small { display:block; color:#91a5a1; font-size:8px; margin-top:3px; }.factor.watch { border-color:#f4dfbf; background:#fffaf2; }.factor.watch .factor-status { color:#b47726; }.factor.fail { border-color:#f3cdc5; background:#fff8f6; }.factor.fail .factor-status { color:#c85645; }.recommendation { display:flex; align-items:flex-start; gap:11px; margin-top:14px; border-left:4px solid var(--teal); background:#eaf5f0; border-radius:0 7px 7px 0; padding:12px 14px; }.recommendation-mark { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; background:var(--teal); color:#fff; font-size:15px; flex:none; }.recommendation strong { display:block; font-size:12px; }.recommendation p { color:#638078; font-size:10px; line-height:1.55; margin:4px 0 0; }.reference-note { color:#8da29e; font-size:9px; line-height:1.65; margin:10px 2px 0; }
@media (max-width:1050px) { .result-grid { grid-template-columns:1fr 1fr; }.result-card-primary { grid-column:span 2; }.field-grid-four { grid-template-columns:repeat(2,1fr); }.factor-list { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px) { .assessment-settings,.field-grid-three,.field-grid-four { grid-template-columns:1fr; }.indicator-group summary small { display:none; }.result-grid { grid-template-columns:1fr; }.result-card-primary { grid-column:auto; }.single-factor-head { display:block; }.single-factor-head > p { margin-top:7px; text-align:left; }.factor-list { grid-template-columns:repeat(2,1fr); }.result-card { min-height:auto; } }