*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);min-height:100vh;padding:28px 32px 64px;background:linear-gradient(135deg,var(--color-bgFrom) 0%,var(--color-bgTo) 100%);background-attachment:fixed}.wrap{width:100%;margin:0}.topbar{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--color-surfaceBorder)}.brand{display:flex;align-items:center;gap:12px}.brand h1{font-size:var(--font-size-h1);font-weight:800;letter-spacing:-.02em}.badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-accent);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}.topbar__right{display:flex;align-items:center;gap:16px}.lang{display:flex;align-items:center;gap:4px}.lang__label{font-size:13px;font-weight:600;color:var(--color-textMuted);margin-right:6px}.lang__btn{background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;line-height:0;padding:4px 6px;opacity:.45}.lang__btn.is-active{opacity:1;border-color:var(--color-surfaceBorder);background:var(--color-surface)}.lang__btn .flag{display:block;width:24px;height:16px;border-radius:2px;box-shadow:0 0 0 1px #0000001f}.meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.meta__live{display:flex;align-items:center;gap:8px}.meta__updated{font-size:15px;font-weight:600;color:var(--color-text)}.meta__updated .mono{font-family:var(--font-mono)}.meta__sub{font-size:12px;color:var(--color-textMuted)}.meta__sub .mono{font-family:var(--font-mono)}.tabrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px;border-bottom:1px solid var(--color-surfaceBorder)}.tabrow__meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;color:var(--color-textMuted);line-height:1.4;padding-bottom:8px}.tabrow__meta .mono{font-family:var(--font-mono)}.tabbar{display:flex;gap:6px}.tabbar__btn{background:transparent;border:none;cursor:pointer;color:var(--color-textMuted);font-family:inherit;font-size:15px;padding:10px 18px;border-bottom:2px solid transparent}.tabbar__btn.is-active{color:var(--color-text);border-bottom-color:var(--color-accent);font-weight:600}.range-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;padding:12px 14px;background:var(--color-surface);border:1px solid var(--color-surfaceBorder);border-radius:12px}.range-bar__label{font-weight:600;margin-right:4px}.range-bar__unit{color:var(--color-textMuted)}.range-bar__sep{margin:0 8px;font-weight:700}.range-bar input[type=date],.range-bar select{padding:6px 8px;border:1px solid var(--color-surfaceBorder);border-radius:6px;background:#fff;color:var(--color-text);font-size:14px}.range-bar select.spin{width:60px;text-align:center}.range-bar select.station{min-width:100px;margin-right:20px}.range-bar__btn{margin-left:12px;padding:7px 16px;border:none;border-radius:8px;background:var(--color-accent);color:#fff;font-weight:600;cursor:pointer}.range-bar__btn--ghost{margin-left:8px;background:transparent;color:var(--color-accent);border:1px solid var(--color-accent)}.range-bar__warn{color:#dc2626;font-size:13px;margin-left:8px}.range-bar__stats{margin-left:auto;display:flex;align-items:baseline;gap:24px;padding-left:12px}.range-stat{display:flex;align-items:baseline;gap:8px}.range-stat__label{font-size:18px;font-weight:600;color:var(--color-textMuted)}.range-stat__value{font-size:22px;font-weight:700;font-family:var(--font-mono)}.range-stat__value--wl{color:var(--color-waterLevel)}.range-stat__value--rain{color:var(--color-rainfall)}section{margin-bottom:28px}.section__title{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:var(--color-text);margin:0 0 14px}.section__title:before{content:"";width:4px;height:18px;border-radius:2px;background:var(--color-accent)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid--power{grid-template-columns:1fr auto 1fr}.grid--hydro3{grid-template-columns:4fr 4fr 3fr}.grid--hydro3>*:nth-child(1){grid-column:1}.grid--hydro3>*:nth-child(2){grid-column:2}.grid--hydro3>*:nth-child(3){grid-column:3}@media(max-width:1100px){.grid--3,.grid--power,.grid--hydro3{grid-template-columns:1fr}.grid--hydro3>:nth-child(n){grid-column:auto}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.grid--2{grid-template-columns:1fr}}@media(max-width:520px){.grid--4{grid-template-columns:1fr}}.card{background:var(--color-surface);border:1px solid var(--color-surfaceBorder);border-radius:14px;padding:20px 22px;box-shadow:0 1px 3px #0f172a0a}.card__title{font-size:15px;font-weight:600;color:var(--color-text);margin-bottom:14px}.card__sub{font-size:13px;color:var(--color-textMuted);margin:-8px 0 12px;font-family:var(--font-mono);white-space:pre-line;line-height:1.5}.card__sub--flash{animation:subFlash 4s ease-in-out;border-radius:4px}@keyframes subFlash{0%{background-color:#60a5fa00}45%{background-color:#60a5fa73}55%{background-color:#60a5fa73}to{background-color:#60a5fa00}}.card__body{position:relative;height:240px}.card--tall .card__body{height:300px}.card__photo{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}.card__photo-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-textMuted);font-size:13px;border:1px dashed var(--color-surfaceBorder);border-radius:8px}.col-span-2{grid-column:1 / -1}.card{cursor:zoom-in}.zoom-backdrop{position:fixed;inset:0;background:#0f172a73;z-index:900;opacity:0;visibility:hidden;transition:opacity .2s}.zoom-backdrop.is-on{opacity:1;visibility:visible}.card--zoom{position:fixed;top:50%;left:50%;z-index:901;transform-origin:center center;cursor:zoom-out;box-shadow:0 24px 70px #0f172a59}.gauge-matrix{--gauge-cell-pad: 10px;--gauge-col: 140px;display:grid;grid-template-columns:auto repeat(var(--cols, 2),var(--gauge-col));grid-template-rows:auto 1fr 1fr;gap:4px}.gauge-matrix__colhead{align-self:center;text-align:center;font-size:13px;font-weight:600;color:var(--color-textMuted)}.gauge-matrix__rowhead{align-self:center;justify-self:center;font-size:13px;font-weight:600;color:var(--color-textMuted);padding-right:4px}.gauge-matrix__cell{position:relative;min-height:0;min-width:0;padding:var(--gauge-cell-pad) 0}.settings{max-width:1000px}.settings__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.settings__box{background:var(--color-surface);border:1px solid var(--color-surfaceBorder);border-radius:12px;padding:16px 18px}.settings__group{font-size:14px;font-weight:700;color:var(--color-accent);margin:0 0 12px}.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}.field__label{color:var(--color-textMuted);font-size:13px;flex:0 0 160px;word-break:keep-all}.input{flex:1;min-width:0;background:var(--color-surface);border:1px solid var(--color-surfaceBorder);color:var(--color-text);font-family:var(--font-mono);font-size:13px;padding:8px 10px;border-radius:8px}.color-field{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.color-field input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--color-surfaceBorder);border-radius:8px;background:none;cursor:pointer;flex:0 0 auto}.color-field .input{flex:1}.settings__actions{display:flex;gap:10px;margin-top:22px}@media(max-width:720px){.settings__grid{grid-template-columns:1fr}}.btn{cursor:pointer;font-family:inherit;font-size:14px;padding:9px 18px;border-radius:9px;border:1px solid var(--color-surfaceBorder)}.btn--primary{background:var(--color-accent);color:var(--color-bgFrom);border-color:transparent;font-weight:700}.btn--ghost{background:transparent;color:var(--color-textMuted)}.footer{margin-top:40px;padding-top:22px;border-top:1px solid var(--color-surfaceBorder);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--color-textMuted)}.footer__brand{display:flex;align-items:center;gap:9px}.footer__logo{height:24px;width:auto}.footer__name{font-weight:700;font-size:15px;color:var(--color-text);letter-spacing:.02em}.footer__copy{font-size:12px}.footer__meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}