@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;900&display=swap');
:root {
  color-scheme:dark;
  --cyan:#38d9ed;
  --muted:#8b9db6;
  --border:rgba(66,177,215,.22);
  --bg:#050a14;
  --panel:rgba(9,19,35,.88);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  color:#e4edf8;
  font-family:'Plus Jakarta Sans','Noto Sans TC',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% -15%,#123052 0,transparent 55%),#050a14;
  background-image:linear-gradient(rgba(56,189,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.025) 1px,transparent 1px),radial-gradient(ellipse at 50% -15%,#123052 0,transparent 55%);
  background-size:40px 40px,40px 40px,100% 100%;
  min-width:320px;
}

button,input {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.6;
}

button,input,a {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,input:focus-visible,a:focus-visible,[role=button]:focus-visible {
  outline:2px solid #9befff;
  outline-offset:4px;
}

a {
  color:#83e5f3;
  text-underline-offset:3px;
}

h1,h2,p {
  margin:0;
}

.glass-card {
  background:linear-gradient(125deg,rgba(25,52,73,.18),transparent 60%),var(--panel);
  border:1px solid var(--border);
  box-shadow:0 12px 35px -15px #000c,inset 0 1px 0 #ffffff08;
}

.command-header {
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:16px 26px;
  border-bottom:1px solid #36c4e13b;
  background:#07101deb;
  box-shadow:0 2px 35px #00b5ed0a;
}

.brand {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.brand-mark {
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:43px;
  height:43px;
  border-radius:12px;
  color:#72ecff;
  background:linear-gradient(145deg,#0c344e,#0a152e);
  border:1px solid #3bc4e775;
  box-shadow:0 0 24px #00b3f526,inset 0 0 18px #1d91d330;
}

.brand-mark svg {
  width:26px;
}

.brand-mark i {
  position:absolute;
  right:-3px;
  top:-3px;
  width:9px;
  height:9px;
  border:2px solid #06101e;
  background:#5ae5c0;
  border-radius:50%;
  box-shadow:0 0 10px #5ae5c0;
}

.brand-title {
  display:flex;
  align-items:center;
  gap:10px;
}

h1 {
  font-size:19px;
  font-weight:900;
  letter-spacing:.3px;
}

.public-badge {
  font-size:10px;
  color:#68e6ca;
  border:1px solid #36b5984d;
  border-radius:12px;
  padding:3px 7px;
  white-space:nowrap;
  background:#1d967a15;
}

.brand p {
  font-size:9px;
  letter-spacing:2px;
  color:#7992ac;
  margin-top:5px;
}

.header-pulse {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  white-space:nowrap;
  color:#a7c9db;
  background:#0b1e2a;
  border:1px solid #25617a5c;
  border-radius:30px;
  padding:9px 14px;
}

.signal-dot {
  display:inline-block;
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px #38d9ed80;
  animation:signal-breathe 3s ease-in-out infinite;
}

.amber-dot {
  background:#fbbf24;
  box-shadow:0 0 10px #fbbf2440;
}

.header-controls {
  display:flex;
  align-items:center;
  gap:17px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:100%;
}

.clock-block {
  padding-left:17px;
  border-left:1px solid #23384b;
  text-align:right;
  white-space:nowrap;
}

.clock-block span {
  display:block;
  font-size:8px;
  letter-spacing:1.5px;
  color:#7890ab;
  margin-bottom:4px;
}

.clock-block time {
  font:11px ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#69ddeb;
}

.control-button {
  border:1px solid #2a5269;
  border-radius:7px;
  padding:8px 12px;
  font-size:11px;
  color:#bce6f2;
  background:#102234;
  white-space:nowrap;
  transition:background .2s,border-color .2s;
}

.control-button:hover {
  border-color:#46bed7;
  background:#17344a;
}

.dashboard-shell {
  max-width:1920px;
  margin:auto;
  padding:18px 24px 15px;
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-bottom:17px;
}

.metric {
  position:relative;
  border-radius:10px;
  padding:14px 15px;
  overflow:hidden;
  min-width:0;
}

.metric:after {
  content:'';
  position:absolute;
  bottom:0;
  left:20%;
  width:60%;
  height:1px;
  background:linear-gradient(90deg,transparent,#3acde34d,transparent);
}

.metric-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  color:#b1c2d5;
  font-size:11px;
  min-height:19px;
  white-space:nowrap;
}

.mini-tag {
  border:1px solid #24546e80;
  background:#0a2336;
  color:#6bc3de;
  border-radius:4px;
  font-size:9px;
  padding:2px 5px;
  white-space:nowrap;
}

.metric-number {
  display:flex;
  gap:6px;
  align-items:baseline;
  margin:8px 0 5px;
  white-space:nowrap;
}

.metric-number strong {
  font:700 clamp(20px,1.8vw,29px) ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-1px;
}

.metric-number>span {
  color:#8297b0;
  font-size:10px;
}

.cyan {
  color:#68e4f4;
}

.amber {
  color:#ffcf6b;
}

.metric p {
  font-size:9px;
  color:#7c93ab;
  line-height:1.6;
}

.mini-progress {
  height:5px;
  flex:1;
  align-self:center;
  background:#1b2f43;
  border-radius:5px;
  overflow:hidden;
  margin-left:3px;
}

.mini-progress i {
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#0d85af,#5df6eb);
  transition:width .8s;
}

.war-room {
  border-radius:14px;
  padding:20px 20px 0;
  position:relative;
  overflow:hidden;
}

.war-room:before {
  content:'';
  pointer-events:none;
  position:absolute;
  left:20%;
  top:0;
  width:60%;
  height:1px;
  background:linear-gradient(90deg,transparent,#67deed8f,transparent);
}

.stage-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:0 0 15px;
  border-bottom:1px solid #203347;
}

.eyebrow {
  color:#6a8d9e;
  font-size:8px;
  letter-spacing:2.4px;
  margin-bottom:5px;
}

h2 {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  font-weight:900;
  letter-spacing:1px;
}

.legend {
  display:flex;
  align-items:center;
  gap:15px;
  color:#9eb4ca;
  font-size:10px;
}

.legend span {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.legend i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--dot);
  box-shadow:0 0 8px color-mix(in srgb,var(--dot),transparent 60%);
}

.toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0 10px;
}

.search-field {
  display:flex;
  align-items:center;
  gap:8px;
  background:#071421;
  border:1px solid #254158;
  border-radius:6px;
  padding:8px 10px;
  width:220px;
  flex-shrink:1;
  min-width:150px;
}

.search-field svg {
  width:14px;
  height:14px;
  color:#75a2bc;
  flex:none;
}

.search-field input {
  min-width:0;
  width:100%;
  background:transparent;
  color:#d6edf6;
  border:0;
  padding:0;
  font-size:11px;
  outline-offset:5px;
}

.search-field input::placeholder {
  color:#68849e;
}

.region-filters,.angle-switch {
  display:flex;
  padding:3px;
  background:#081421;
  border:1px solid #233c50;
  border-radius:7px;
  gap:3px;
}

.region-filters button,.angle-switch button {
  border:0;
  color:#8ba6bf;
  background:transparent;
  border-radius:4px;
  font-size:11px;
  padding:6px 12px;
  white-space:nowrap;
  transition:color .2s,background .2s;
}

.region-filters button:hover,.angle-switch button:hover {
  color:#d6f6ff;
}

.region-filters .is-active,.angle-switch .is-active {
  background:#154158;
  color:#81e8f2;
  box-shadow:inset 0 0 0 1px #33859e4f;
}

.result-count {
  font:10px ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#688ba4;
  margin-right:auto;
  white-space:nowrap;
}

.reload-button {
  padding:8px 11px;
}

.reload-button span {
  font-size:16px;
  line-height:10px;
  display:inline-block;
  margin-right:3px;
}

.reload-button.is-loading span {
  animation:spin 1s linear infinite;
}

.data-status {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  min-height:28px;
  color:#839fb6;
  line-height:1.7;
  padding-bottom:7px;
}

.data-status.is-warning {
  color:#e5b765;
}

.data-status.is-error {
  color:#f4a3a7;
}

.data-status.is-warning .signal-dot {
  background:#fbbf24;
}

.data-status.is-error .signal-dot {
  background:#fb7185;
}

.map-grid {
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(0,2.1fr) minmax(250px,1fr);
  gap:14px;
  align-items:start;
  min-height:780px;
  padding:5px 0 18px;
}

.cards-column {
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  z-index:2;
  min-width:0;
}

.reservoir-card {
  display:flex;
  align-items:center;
  text-align:left;
  gap:10px;
  width:100%;
  padding:10px 11px;
  border-radius:9px;
  color:#dcebf7;
  cursor:pointer;
  min-height:76px;
  border-color:#24516880;
  position:relative;
  transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;
}

.reservoir-card:hover {
  border-color:#50c5de9c;
  background-color:#10293d;
  transform:translateX(2px);
}

.reservoir-card.active-selected {
  border-color:var(--water);
  background:linear-gradient(110deg,#123148e8,#0a1e31);
  box-shadow:0 0 20px color-mix(in srgb,var(--water),transparent 88%),inset 3px 0 var(--water);
}

.card-info {
  flex:1;
  min-width:0;
}

.card-topline {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:4px;
  min-width:0;
}

.card-name {
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.card-county {
  font-size:9px;
  color:#7793ad;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card-data {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  font-size:10px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#b1dce8;
}

.card-data small {
  font-size:8px;
  color:#6f8da6;
}

.card-rate {
  color:var(--water);
  font-weight:700;
}

.capacity-track {
  height:2px;
  background:#203449;
  margin-top:6px;
  border-radius:2px;
  overflow:hidden;
}

.capacity-track i {
  display:block;
  height:100%;
  width:var(--fill);
  background:var(--water);
  box-shadow:0 0 8px var(--water);
}

.card-time {
  font-size:8px;
  color:#6d8ba3;
  margin-top:4px;
  white-space:nowrap;
}

.card-time.is-stale {
  color:#d6af75;
}

.orb {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  flex:none;
  width:43px;
  height:43px;
  overflow:hidden;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--water),transparent 35%);
  background:#071623;
  box-shadow:inset 0 0 12px #000a,0 0 12px color-mix(in srgb,var(--water),transparent 90%);
}

.orb-level {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:var(--fill);
  background:linear-gradient(0deg,color-mix(in srgb,var(--water),#005073 55%),color-mix(in srgb,var(--water),transparent 20%));
  transition:height .8s;
}

.orb-wave {
  position:absolute;
  bottom:calc(var(--fill) - 2px);
  left:-50%;
  width:200%;
  height:10px;
  background-repeat:repeat-x;
  background-size:44px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0 5Q11 -3 22 5T44 5V10H0Z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E");
  animation:water-wave 3s linear infinite;
}

.orb-wave.second {
  opacity:.5;
  bottom:calc(var(--fill) - 4px);
  animation:water-wave 4.7s linear infinite reverse;
}

.orb>span {
  position:relative;
  z-index:2;
  color:#fff;
  font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  text-shadow:0 1px 4px #001a31,0 0 6px #001a31;
}

.orb.is-empty .orb-wave {
  display:none;
}

.map-stage {
  position:sticky;
  top:12px;
  min-height:850px;
  align-self:start;
  overflow:hidden;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 42%,#0d223d4a,transparent 68%);
}

.map-top-label,.map-bottom-label {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:space-between;
  left:18px;
  right:18px;
  top:10px;
  font:8px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:1.8px;
  color:#517993;
  z-index:2;
  pointer-events:none;
}

.map-north {
  font-size:13px;
  color:#8ce0ed;
}

.map-bottom-label {
  top:auto;
  bottom:12px;
  font-size:6px;
  color:#40627d;
  letter-spacing:1px;
}

.map-visual {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:700px;
  overflow:hidden;
}

#taiwan-bg-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(1.08) contrast(1.13);
  opacity:.94;
  transition:opacity .6s;
}

.ocean-vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 49%,transparent 42%,#07132130 68%,#091321 100%);
}

#stage-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.scan-beam {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0,transparent 42%,#66eaff04 47%,#66eaff1a 49.8%,#96ffff47 50%,#66eaff05 50.3%,transparent 53%,transparent 100%);
  transform:translateY(-60%);
  animation:scan-sweep 7.5s linear infinite;
  mix-blend-mode:screen;
}

.radar-orbit {
  position:absolute;
  left:50%;
  top:47%;
  width:82%;
  aspect-ratio:1;
  border:1px dashed #6ee8ff0f;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 60px #67d9ee03,0 0 0 120px #67d9ee02;
  pointer-events:none;
}

.radar-orbit:after {
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid transparent;
  border-top-color:#4ee8ff21;
  border-radius:50%;
  animation:spin 30s linear infinite;
}

.map-particles {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.map-particles i {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:2px;
  height:2px;
  background:#80edff;
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 6px #4dddff;
  animation:particle-drift var(--duration) linear var(--delay) infinite;
}

.leader-line {
  stroke:#4fa9ce;
  stroke-opacity:.2;
  stroke-width:1;
  stroke-dasharray:2 6;
}

.leader-light {
  stroke:var(--water);
  stroke-opacity:.5;
  stroke-width:1.3;
  stroke-dasharray:2 120;
  animation:flow-dash 9s linear infinite;
  filter:drop-shadow(0 0 3px var(--water));
}

.leader-selected {
  stroke-opacity:.85;
  stroke-width:2;
  stroke-dasharray:10 7;
  animation:flow-dash 3s linear infinite;
  filter:drop-shadow(0 0 4px var(--water));
}

.map-pin {
  cursor:pointer;
  outline:0;
}

.pin-hit {
  fill:transparent;
}

.pin-dot {
  fill:var(--water);
  stroke:#dcfaff;
  stroke-width:1;
  filter:drop-shadow(0 0 5px var(--water));
  transition:r .2s;
}

.map-pin text {
  font-family:'Noto Sans TC',sans-serif;
  font-size:11px;
  font-weight:500;
  fill:#a8ccda;
  paint-order:stroke;
  stroke:#071424;
  stroke-width:4px;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}

.map-pin.active-selected text,.map-pin:hover text,.map-pin:focus-visible text {
  fill:#ddfbff;
  font-weight:700;
  opacity:1;
}

.map-pin:focus-visible .pin-hit {
  stroke:#a2f7ff;
  stroke-width:2;
}

.pin-ripple {
  fill:none;
  stroke:var(--water);
  stroke-width:1;
  transform-box:fill-box;
  transform-origin:center;
  animation:pin-ripple 2.8s ease-out infinite;
}

.pin-ripple.second {
  animation-delay:1.4s;
}

.map-caption {
  position:absolute;
  top:668px;
  left:5%;
  width:90%;
  text-align:center;
  font-size:9px;
  line-height:1.6;
  color:#688ca5;
  letter-spacing:.3px;
}

.inspection-hud {
  position:absolute;
  left:6%;
  right:6%;
  top:707px;
  z-index:2;
  border-radius:10px;
  padding:15px 17px;
  border-color:#348fa77d;
  background:linear-gradient(120deg,#10283cf2,#071321f5);
  box-shadow:0 0 32px #007da614,0 12px 25px #0008;
}

.hud-top {
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid #25495d88;
}

.hud-title {
  flex:1;
  min-width:0;
}

.hud-title h3 {
  font-size:16px;
  margin:0 0 3px;
  font-weight:900;
}

.hud-title p {
  font-size:8px;
  color:#7e9cb3;
}

.hud-badge {
  font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace;
  padding:6px 8px;
  border:1px solid color-mix(in srgb,var(--water),transparent 60%);
  color:var(--water);
  background:color-mix(in srgb,var(--water),transparent 94%);
  border-radius:5px;
  white-space:nowrap;
}

.hud-data {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 15px;
  padding-top:10px;
  margin:0;
}

.hud-data div {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.hud-data dt {
  color:#7995ad;
  font-size:9px;
}

.hud-data dd {
  margin:0;
  color:#c6e8f0;
  font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:nowrap;
}

.hud-data small {
  font-size:8px;
  font-weight:400;
  color:#7794ac;
}

.hud-time {
  color:#7a9cb1;
  font-size:8px;
  margin-top:10px;
  line-height:1.6;
}

.hud-time.is-stale {
  color:#dfb577;
}

.hud-placeholder p {
  font-size:11px;
  color:#8bb1c6;
  margin-top:10px;
  line-height:1.8;
}

.positive {
  color:#65dcb6!important;
}

.negative {
  color:#ec9cac!important;
}

.empty-state {
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:28px;
  color:#9ab4c9;
  font-size:12px;
}

.empty-state[hidden] {
  display:none;
}

.empty-state strong {
  color:#d2e4f1;
}

.map-grid.is-empty {
  grid-template-columns:1fr;
  min-height:550px;
}

.map-grid.is-empty .map-stage {
  grid-column:1;
  grid-row:1;
  position:relative;
  min-height:430px;
  opacity:.4;
}

.map-grid.is-empty .map-visual {
  height:430px;
}

.map-grid.is-empty .map-caption,.map-grid.is-empty .inspection-hud,.map-grid.is-empty .cards-column {
  display:none;
}

.source-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid #223c50;
  padding:14px 0;
  color:#688da5;
  font-size:9px;
  line-height:1.8;
}

.source-footer>div {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.source-footer a {
  text-decoration:none;
  color:#88c7da;
}

.source-footer a:hover {
  text-decoration:underline;
}

.source-separator {
  color:#30485c;
}

#cache-time {
  white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.method-note {
  font-size:9px;
  line-height:1.8;
  color:#537089;
  margin-top:12px;
  text-align:center;
}

.loading-card {
  border:1px dashed #2b526a;
  border-radius:9px;
  color:#6d9cb6;
  font-size:11px;
  padding:26px 15px;
  text-align:center;
  animation:signal-breathe 2s infinite;
}

.noscript-message {
  padding:20px;
  text-align:center;
  color:#f3c57b;
}

.map-stage:has(.hud-data) {
  min-height:970px;
}

@keyframes water-wave {
  to {
    background-position-x:44px;
  }
}

@keyframes flow-dash {
  to {
    stroke-dashoffset:-244;
  }
}

@keyframes pin-ripple {
  0% {
    transform:scale(.7);
    opacity:.8;
  }
  100% {
    transform:scale(3);
    opacity:0;
  }
}

@keyframes scan-sweep {
  to {
    transform:translateY(60%);
  }
}

@keyframes particle-drift {
  0% {
    transform:translate(0,12px);
    opacity:0;
  }
  25% {
    opacity:.5;
  }
  75% {
    opacity:.25;
  }
  100% {
    transform:translate(18px,-90px);
    opacity:0;
  }
}

@keyframes signal-breathe {
  50% {
    opacity:.45;
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

body.effects-off *,body.effects-off *:before,body.effects-off *:after {
  animation:none!important;
  transition:none!important;
}

.effects-off .scan-beam,.effects-off .map-particles,.effects-off .pin-ripple,.effects-off .leader-light {
  display:none;
}

.effects-off .leader-selected {
  display:block;
  stroke-dasharray:none;
}

.effects-off .reservoir-card:hover {
  transform:none;
}

@media(min-width:1600px) {
  .metric-heading {
    font-size:12px;
  }
  .metric p {
    font-size:10px;
  }
  .reservoir-card {
    min-height:80px;
    padding:11px 14px;
    gap:13px;
  }
  .orb {
    width:47px;
    height:47px;
  }
  .card-name {
    font-size:13px;
  }
  .card-data {
    font-size:11px;
  }
  .card-time {
    font-size:9px;
  }
  .map-grid {
    grid-template-columns:minmax(300px,1fr) minmax(0,2.1fr) minmax(300px,1fr);
  }
  .map-stage:has(.hud-data) {
    min-height:985px;
  }
}

@media(max-width:1300px) {
  .command-header {
    padding:14px 20px;
  }
  .header-pulse {
    display:none;
  }
  .dashboard-shell {
    padding:16px;
  }
  .summary-grid {
    gap:9px;
  }
  .metric {
    padding:12px;
  }
  .metric-heading {
    font-size:10px;
  }
  .metric-heading .mini-tag {
    font-size:8px;
  }
  .metric-number strong {
    font-size:23px;
  }
  .map-grid {
    grid-template-columns:minmax(228px,1fr) minmax(0,1.8fr) minmax(228px,1fr);
    gap:10px;
  }
  .war-room {
    padding:16px 15px 0;
  }
  .card-county {
    display:none;
  }
  .inspection-hud {
    left:2%;
    right:2%;
    padding:12px;
  }
  .hud-data dd {
    font-size:11px;
  }
  .legend {
    gap:10px;
  }
  .result-count {
    font-size:9px;
  }
  .toolbar {
    gap:9px;
  }
  .region-filters button,.angle-switch button {
    padding:6px 9px;
  }
  .search-field {
    width:190px;
  }
}

@media(max-width:1050px) {
  .summary-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .metric-number strong {
    font-size:25px;
  }
  .metric-heading {
    font-size:11px;
  }
  .metric p {
    font-size:10px;
  }
  .map-grid {
    grid-template-columns:minmax(210px,1fr) minmax(0,1.6fr) minmax(210px,1fr);
  }
  .stage-heading {
    align-items:flex-start;
  }
  .legend {
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:280px;
    gap:8px 12px;
  }
  .toolbar {
    flex-wrap:wrap;
  }
  .result-count {
    margin-right:auto;
  }
  .search-field {
    width:200px;
  }
  .header-controls {
    gap:10px;
  }
  .clock-block {
    padding-left:10px;
  }
  .brand-title {
    gap:7px;
  }
  h1 {
    font-size:16px;
  }
  .brand p {
    font-size:8px;
    letter-spacing:1px;
  }
  .hud-title h3 {
    font-size:14px;
  }
  .hud-badge {
    font-size:9px;
    padding:5px;
  }
  .hud-data {
    gap:10px;
  }
  .hud-data dd {
    font-size:10px;
  }
  .card-name {
    font-size:11px;
  }
  .card-data {
    font-size:9px;
  }
  .orb {
    width:37px;
    height:37px;
  }
  .reservoir-card {
    gap:8px;
    padding:10px 8px;
  }
  .source-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

@media(max-width:850px) {
  .command-header {
    padding:14px 16px;
    gap:10px;
    flex-wrap:wrap;
  }
  .brand {
    flex:1;
  }
  .header-controls .clock-block {
    display:none;
  }
  .header-controls .control-button {
    font-size:10px;
    padding:7px 9px;
  }
  .brand-mark {
    width:37px;
    height:37px;
  }
  .public-badge {
    font-size:8px;
    padding:3px 5px;
  }
  .brand p {
    font-size:7px;
  }
  .dashboard-shell {
    padding:12px;
  }
  .map-grid {
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:start;
  }
  .map-stage {
    grid-column:1/-1;
    grid-row:1;
    position:relative;
    min-height:840px;
    max-width:650px;
    width:100%;
    margin:0 auto;
  }
  .map-stage:has(.hud-data) {
    min-height:970px;
  }
  .map-visual {
    height:700px;
  }
  .cards-column {
    grid-row:2;
    gap:8px;
  }
  .reservoir-card {
    min-height:83px;
    padding:10px 12px;
    gap:11px;
  }
  .card-name {
    font-size:13px;
  }
  .card-county {
    display:inline;
    font-size:9px;
  }
  .card-data {
    font-size:11px;
  }
  .card-time {
    font-size:9px;
  }
  .orb {
    width:44px;
    height:44px;
  }
  .inspection-hud {
    left:10%;
    right:10%;
    top:710px;
    padding:15px;
  }
  .hud-title h3 {
    font-size:16px;
  }
  .hud-badge {
    font-size:11px;
  }
  .hud-data dd {
    font-size:12px;
  }
  .map-caption {
    top:673px;
  }
  .map-bottom-label {
    bottom:8px;
  }
  .toolbar .search-field {
    flex:1;
    min-width:180px;
  }
  .region-filters {
    margin-left:auto;
  }
  .result-count {
    order:5;
    margin-right:auto;
    width:auto;
    flex:1;
  }
  .angle-switch {
    order:6;
  }
  .reload-button {
    order:7;
  }
  .toolbar {
    gap:9px 12px;
  }
  .stage-heading {
    gap:10px;
  }
  .legend {
    max-width:260px;
  }
  .map-grid.is-empty .map-stage {
    max-width:none;
  }
  .empty-state {
    grid-row:2;
  }
  .map-grid.is-empty .cards-column {
    display:none;
  }
  .method-note {
    text-align:left;
  }
}

@media(max-width:520px) {
  .command-header {
    padding:12px;
    align-items:flex-start;
  }
  .brand {
    gap:9px;
  }
  .brand-mark {
    width:33px;
    height:35px;
    flex:none;
  }
  .brand-mark svg {
    width:22px;
  }
  .brand-title {
    display:block;
  }
  h1 {
    font-size:14px;
    line-height:1.4;
  }
  .public-badge {
    display:none;
  }
  .brand p {
    font-size:6px;
    letter-spacing:.65px;
    max-width:215px;
  }
  .header-controls {
    align-self:center;
  }
  .header-controls .control-button {
    font-size:9px;
    padding:6px 7px;
  }
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:12px;
  }
  .metric {
    padding:11px;
  }
  .metric-heading {
    font-size:10px;
  }
  .metric-heading .mini-tag {
    font-size:7px;
  }
  .metric-number strong {
    font-size:23px;
    letter-spacing:-.7px;
  }
  .metric-number>span {
    font-size:9px;
  }
  .metric p {
    font-size:8px;
  }
  .metric-number {
    margin:7px 0 4px;
  }
  .war-room {
    padding:13px 11px 0;
  }
  .eyebrow {
    font-size:6px;
    letter-spacing:1.8px;
  }
  h2 {
    font-size:14px;
    letter-spacing:.5px;
  }
  .stage-heading {
    flex-direction:column;
    gap:12px;
    padding-bottom:12px;
  }
  .legend {
    max-width:none;
    justify-content:flex-start;
    font-size:8px;
    gap:8px 10px;
  }
  .legend i {
    width:6px;
    height:6px;
  }
  .toolbar {
    gap:9px 6px;
    padding-top:12px;
  }
  .toolbar .search-field {
    min-width:0;
    flex-basis:100%;
    padding:10px;
  }
  .region-filters {
    margin:0;
    flex:1;
  }
  .region-filters button {
    padding:6px 10px;
    flex:1;
    font-size:10px;
  }
  .result-count {
    flex:initial;
    order:0;
    font-size:8px;
    margin-left:auto;
    margin-right:0;
  }
  .angle-switch {
    order:6;
    flex:1;
  }
  .angle-switch button {
    flex:1;
    font-size:10px;
  }
  .reload-button {
    order:7;
    font-size:10px;
    padding:9px 11px;
  }
  .data-status {
    font-size:9px;
    align-items:flex-start;
    min-height:34px;
  }
  .data-status .signal-dot {
    margin-top:6px;
  }
  .map-grid {
    gap:8px;
    grid-template-columns:1fr;
  }
  .map-stage,.map-stage:has(.hud-data) {
    grid-column:1;
    min-height:765px;
    margin-top:0;
  }
  .map-visual {
    height:500px;
  }
  .map-caption {
    top:486px;
    left:3%;
    width:94%;
    font-size:8px;
  }
  .inspection-hud {
    top:520px;
    left:2%;
    right:2%;
    padding:13px;
  }
  .hud-data {
    gap:11px;
  }
  .hud-data dd {
    font-size:12px;
  }
  .hud-top {
    gap:7px;
  }
  .hud-title h3 {
    font-size:15px;
  }
  .hud-time {
    font-size:8px;
  }
  .map-top-label {
    left:8px;
    right:8px;
    font-size:6px;
  }
  .map-bottom-label {
    font-size:5px;
    left:12px;
    right:12px;
  }
  .cards-column {
    grid-column:1;
    grid-row:auto;
    gap:8px;
  }
  .reservoir-card {
    min-height:79px;
    padding:11px 13px;
  }
  .card-name {
    font-size:13px;
  }
  .card-county {
    font-size:10px;
  }
  .card-data {
    font-size:11px;
  }
  .card-time {
    font-size:9px;
  }
  .orb {
    width:45px;
    height:45px;
  }
  .source-footer {
    font-size:8px;
    padding:12px 0;
  }
  .source-footer>div {
    gap:6px;
  }
  .method-note {
    font-size:8px;
  }
  .map-grid.is-empty .map-stage {
    min-height:370px;
  }
  .map-grid.is-empty .map-visual {
    height:370px;
  }
}

@media(prefers-reduced-motion:reduce) {
  body:not(.effects-on),body:not(.effects-on) *,body:not(.effects-on):before,body:not(.effects-on):after,body:not(.effects-on) *:before,body:not(.effects-on) *:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  body:not(.effects-on) .scan-beam,body:not(.effects-on) .map-particles,body:not(.effects-on) .pin-ripple,body:not(.effects-on) .leader-light {
    display:none;
  }
  body:not(.effects-on) .leader-selected {
    display:block;
    stroke-dasharray:none;
  }
  body:not(.effects-on) .reservoir-card:hover {
    transform:none;
  }
}

/* 放大水情內容與操作文字，維持各尺寸的閱讀舒適度。 */
h1 { font-size:21px; }
.brand p { font-size:10px; }
.public-badge { font-size:12px; }
.header-pulse { font-size:13px; }
.clock-block span { font-size:10px; }
.clock-block time { font-size:13px; }
.control-button,
.header-controls .control-button,
.region-filters button,
.angle-switch button,
.search-field input { font-size:13px; }
.metric-heading { font-size:13px; white-space:normal; flex-wrap:wrap; gap:5px; }
.mini-tag,
.metric-heading .mini-tag { font-size:11px; }
.metric-number { flex-wrap:wrap; row-gap:3px; }
.metric-number strong { font-size:32px; }
.metric-number>span,
.metric p { font-size:12px; }
.eyebrow { font-size:10px; }
h2 { font-size:19px; }
.legend { font-size:12px; flex-wrap:wrap; gap:10px 15px; }
.result-count { font-size:12px; }
.data-status { font-size:12px; }
.toolbar { flex-wrap:wrap; }
.reservoir-card { min-height:98px; padding:12px; }
.card-name { font-size:16px; }
.card-county { font-size:12px; }
.card-topline { flex-wrap:wrap; gap:4px 7px; }
.card-data { font-size:14px; flex-wrap:wrap; row-gap:3px; }
.card-data small,
.card-time { font-size:12px; }
.card-time { white-space:normal; line-height:1.5; margin-top:5px; }
.orb>span { font-size:12px; }
.map-top-label { font-size:10px; }
.map-bottom-label { font-size:8px; }
.map-pin text { font-size:13px; }
.map-caption { font-size:12px; }
.hud-title h3 { font-size:19px; }
.hud-title p,
.hud-data dt,
.hud-data small,
.hud-time { font-size:12px; }
.hud-data dd { font-size:14px; white-space:normal; line-height:1.5; }
.hud-badge { font-size:13px; }
.hud-top { flex-wrap:wrap; }
.hud-data { gap:12px 15px; }
.hud-placeholder p,
.loading-card,
.empty-state { font-size:14px; }
.source-footer,
.method-note { font-size:12px; }
.source-footer { flex-wrap:wrap; }
.map-stage:has(.hud-data) { min-height:1060px; }

/* 掃描光、雷達與流動亮點均只作用於裝飾層，文字及操作區保持穩定。 */
.orb { animation:orb-bob 3.2s ease-in-out infinite; }
.reservoir-card:nth-child(3n + 1) .orb { animation-delay:-1.1s; }
.reservoir-card:nth-child(3n + 2) .orb { animation-delay:-2.2s; }
.reservoir-card.active-selected { animation:selected-glow 3.4s ease-in-out infinite; }
.scan-beam {
  background:linear-gradient(180deg,transparent 0,transparent 41%,#66eaff07 46%,#66eaff26 49.6%,#c2ffffa6 50%,#66eaff0b 50.4%,transparent 54%,transparent 100%);
  animation-duration:6s;
}
.radar-orbit:before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 295deg,#35e8ff05 320deg,#35e8ff24 354deg,#a1faff70 359deg,transparent 360deg);
  mask-image:radial-gradient(circle,transparent 4%,#000 28%,#000 65%,transparent 72%);
  animation:radar-sweep 12s linear infinite;
  pointer-events:none;
}
.map-particles i {
  width:3px;
  height:3px;
  background:#b0fcff;
  box-shadow:0 0 7px 2px #28d5ff66;
}
.leader-light { stroke-opacity:.65; stroke-width:1.5; animation-duration:6s; }
.leader-selected { stroke-opacity:.95; stroke-width:2.5; animation-duration:1.8s; }
@keyframes orb-bob {
  0%,100% { transform:translateY(7px); }
  50% { transform:translateY(-7px); }
}
@keyframes selected-glow {
  0%,100% { box-shadow:0 0 16px color-mix(in srgb,var(--water),transparent 86%),inset 3px 0 var(--water); }
  50% { box-shadow:0 0 30px color-mix(in srgb,var(--water),transparent 67%),inset 3px 0 var(--water); }
}
@keyframes radar-sweep { to { transform:rotate(360deg); } }
@keyframes particle-drift {
  0% { transform:translate(0,12px); opacity:0; }
  25% { opacity:.8; }
  75% { opacity:.45; }
  100% { transform:translate(24px,-100px); opacity:0; }
}
body.effects-off .radar-orbit:before { display:none; }

@media(max-width:1450px) {
  .header-pulse { display:none; }
}
@media(max-width:1300px) {
  .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1050px) {
  h1 { font-size:19px; }
  .brand p { font-size:10px; }
  .legend { max-width:340px; }
  .metric-number strong { font-size:30px; }
  .hud-title h3 { font-size:18px; }
}
@media(max-width:850px) {
  .header-controls .control-button { font-size:12px; }
  .public-badge { font-size:11px; }
  .card-name { font-size:16px; }
  .card-data { font-size:14px; }
  .card-time { font-size:12px; }
  .map-stage:has(.hud-data) { min-height:1060px; }
  .map-caption { top:669px; }
}
@media(max-width:520px) {
  h1 { font-size:17px; }
  .brand p { font-size:8px; line-height:1.6; }
  .header-controls .control-button { font-size:12px; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-heading { font-size:12px; }
  .metric-heading .mini-tag { font-size:10px; }
  .metric-number strong { font-size:28px; }
  .metric-number>span,
  .metric p { font-size:12px; }
  .eyebrow { font-size:9px; }
  h2 { font-size:17px; }
  .legend { font-size:12px; gap:9px 12px; max-width:none; }
  .region-filters button,
  .angle-switch button,
  .reload-button,
  .result-count,
  .data-status { font-size:12px; }
  .region-filters button { padding:7px 9px; }
  .map-stage:has(.hud-data) { min-height:875px; }
  .map-caption { top:480px; font-size:12px; }
  .inspection-hud { top:525px; }
  .hud-title h3 { font-size:18px; }
  .hud-title p { font-size:11px; }
  .hud-data dd { font-size:14px; }
  .hud-time { font-size:12px; }
  .map-top-label { font-size:8px; }
  .map-bottom-label { font-size:7px; }
  .reservoir-card { min-height:98px; }
  .card-name { font-size:16px; }
  .card-county,
  .card-time,
  .source-footer,
  .method-note { font-size:12px; }
  .card-data { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  body:not(.effects-on) .radar-orbit:before { display:none; }
}

/* 窄螢幕將偏好開關排在標題下方，保留完整按鈕文字。 */
@media(max-width:700px) {
  .command-header .brand { flex-basis:100%; }
  .command-header .header-controls { width:100%; gap:8px; }
}

/* 原文字保留尺寸與讀屏內容，2077 翻字只呈現在不影響排版的視覺疊層。 */
.is-decoding { position:relative; }
.is-decoding > .decode-source { opacity:0; }
.decode-overlay {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  white-space:pre;
  color:#8ff8ff;
  text-shadow:-1px 0 #ff5fd2,1px 0 #31e9ff,0 0 12px #31e9ff88;
  animation:decode-flicker .14s steps(2,end) infinite;
}
.decode-overlay:before { content:attr(data-text); }
@keyframes decode-flicker {
  0%,100% { opacity:1; transform:translateX(0); }
  50% { opacity:.8; transform:translateX(1px); }
}

/* One geographic map: independent of reservoir filtering and the old illustration layout. */
.map-stage.live-map,
.map-stage.live-map:has(.hud-data) {
  min-height:0;
  padding:0 0 32px;
  background:#050e19;
  border:1px solid #19404d;
  box-shadow:inset 0 0 40px #04121c;
  isolation:isolate;
}
.live-map #tactical-map { width:100%; height:700px; }
.live-map .map-top-label { top:14px; z-index:3; right:54px; text-shadow:0 1px 4px #000; }
.live-map .inspection-hud { position:relative; top:auto; left:auto; right:auto; margin:12px; }
.live-map .map-bottom-label { bottom:10px; }
.map-readout, .ais-readout { position:relative; display:flex; flex-wrap:wrap; gap:6px 12px; padding:10px 14px; color:#86aebf; font-size:12px; line-height:1.6; border-top:1px solid #163443; }
.map-readout { justify-content:space-between; }
.ais-readout { align-items:center; background:#081825; color:#a6d4df; }
.ais-readout #ais-status { flex:1; min-width:0; }
.vessel-hud { position:relative; margin:12px; padding:16px; border-color:#287b81; background:linear-gradient(120deg,#103134,#071824); }
.vessel-hud[hidden] { display:none; }
#close-vessel { position:absolute; right:8px; top:8px; font-size:22px; padding:0 10px; }
.vessel-hud h3 { margin:8px 30px 14px 0; color:#b7fff3; font-size:20px; overflow-wrap:anywhere; }
.vessel-data { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.vessel-data dt { color:#82acb5; font-size:12px; }
.vessel-data dd { margin:3px 0 0; color:#d1f0ef; font-size:15px; }
.vessel-data > div:last-child { grid-column:1/-1; }
.map-grid.is-empty .live-map { opacity:1; grid-row:1; max-width:100%; }
.map-grid.is-empty .live-map .inspection-hud { display:block; }
.map-grid.is-empty .empty-state { grid-row:2; }
.method-note a { color:#74bbc9; text-decoration:underline; text-underline-offset:3px; }
@media (min-width:1600px) { .live-map #tactical-map { height:780px; } }
@media (max-width:850px) { .live-map #tactical-map { height:640px; } }
@media (max-width:520px) {
  .live-map #tactical-map { height:540px; }
  .live-map .inspection-hud { margin:8px; }
  .map-readout, .ais-readout { font-size:12px; padding:9px 10px; }
  .live-map .map-top-label { left:12px; font-size:9px; letter-spacing:1px; }
}

/* Pointer-transparent reservoir-to-card callout, animated entirely in SVG/CSS. */
.reservoir-links { position:absolute; inset:0; width:100%; height:100%; z-index:12; pointer-events:none; overflow:hidden; }
.reservoir-links path { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.reservoir-link-underlay { stroke-width:6; opacity:.16; }
.reservoir-link-flow { stroke-width:2; stroke-dasharray:9 7; animation:reservoir-link-flow .7s linear infinite; }
.reservoir-links circle { stroke:currentColor; stroke-width:2; fill:#061722; }
@keyframes reservoir-link-flow { to { stroke-dashoffset:-32; } }
.effects-off .reservoir-link-flow { animation:none; }
#model-status { color:#c8e4e5; padding:4px 12px 8px; font-size:12px; pointer-events:none; }

.vessel-bubble { z-index:15; }
.vessel-bubble .maplibregl-popup-content { padding:0; background:#071824; border:1px solid #48cfc1; border-radius:12px; box-shadow:0 8px 28px #0009; }
.vessel-bubble .vessel-hud { margin:0; border:0; border-radius:12px; max-height: min(360px, 60vh); overflow-y:auto; }
.vessel-bubble.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.vessel-bubble.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.vessel-bubble.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color:#48cfc1; }
.vessel-bubble.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.vessel-bubble.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.vessel-bubble.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color:#48cfc1; }
.vessel-bubble.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:#48cfc1; }
.vessel-bubble.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:#48cfc1; }

.tactical-lighthouse-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.lighthouse-detail { padding:16px; max-height:min(440px,65vh); overflow-y:auto; color:#d1f0ef; }
.lighthouse-detail h3 { margin:8px 25px 10px 0; color:#ffe6a3; font-size:20px; }
.lighthouse-detail dd { white-space:pre-line; overflow-wrap:anywhere; }
.lighthouse-detail .vessel-data > div:first-child { grid-column:1/-1; }
.lighthouse-detail a { color:#ffd98a; }
.lighthouse-status { color:#c1ad7e; font-size:12px; }
.lighthouse-bubble .maplibregl-popup-content { border-color:#cfb56c; }
.lighthouse-bubble .maplibregl-popup-close-button { color:#ffe6a3; font-size:24px; right:5px; top:3px; }

/* Compact command layout: four card lanes around a single map. */
.summary-panel > summary, .sources-panel > summary, .inspection-panel > summary {
  cursor:pointer; color:#a6dce5; padding:8px 12px; font-size:13px;
}
.summary-panel > summary span { margin-left:12px; color:#799ba9; font-size:12px; }
.summary-panel .summary-grid { margin:8px 0 12px; }
.inspection-panel { position:relative; z-index:3; background:#081825; border-top:1px solid #19404d; }
.inspection-panel[open] { max-height:45%; overflow:auto; }
.sources-panel { margin-top:4px; }
@media (min-width:1280px) {
  body { height:100dvh; display:flex; flex-direction:column; }
  .command-header { flex:none; padding:10px 18px; gap:12px; }
  .command-header .header-pulse { display:none; }
  .dashboard-shell { width:100%; max-width:none; padding:4px 12px 6px; flex:1; min-height:0; display:flex; flex-direction:column; }
  .summary-panel, .sources-panel { flex:none; }
  .war-room { flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 12px 6px; }
  .stage-heading { flex:none; margin-bottom:6px; }
  .stage-heading .eyebrow { display:none; }
  .toolbar { flex:none; gap:7px; margin-bottom:4px; }
  .toolbar .control-button { padding:7px 9px; font-size:12px; }
  .search-field { max-width:200px; }
  .data-status { flex:none; padding:5px 8px; font-size:12px; }
  .map-grid { flex:1; min-height:420px; grid-template-columns:minmax(300px,1fr) minmax(350px,1.45fr) minmax(300px,1fr); gap:10px; padding:4px 0; align-items:stretch; }
  .cards-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(64px,1fr); gap:6px; align-content:start; }
  .reservoir-card { min-height:0; padding:7px; gap:6px; align-items:center; }
  .reservoir-card .orb { width:30px; height:30px; }
  .reservoir-card .orb > span { font-size:10px; }
  .card-name { font-size:15px; white-space:normal; line-height:1.25; }
  .card-topline { gap:2px 5px; margin-bottom:3px; }
  .card-county { font-size:11px; }
  .card-data { font-size:12px; flex-wrap:wrap; gap:1px 5px; }
  .card-data small { font-size:10px; }
  .card-rate { display:none; }
  .card-time { font-size:10px; white-space:normal; line-height:1.3; }
  .map-stage.live-map, .map-stage.live-map:has(.hud-data) { position:relative; top:auto; align-self:stretch; height:100%; min-height:0; padding:0; display:flex; flex-direction:column; }
  .live-map #tactical-map { flex:1; min-height:220px; height:auto; }
  .live-map .map-bottom-label { display:none; }
  .map-readout, .ais-readout { flex:none; padding:4px 8px; font-size:11px; }
  .map-readout > span:last-child { display:none; }
  .source-footer { flex:none; padding-top:5px; font-size:11px; gap:8px; }
  .summary-panel[open] ~ .war-room { min-height:620px; }
}
@media (min-width:1600px) {
  .map-grid { grid-template-columns:minmax(390px,1fr) minmax(440px,1.6fr) minmax(390px,1fr); }
  .card-name { font-size:16px; }
  .card-data { font-size:14px; }
  .card-time { font-size:11px; }
  .reservoir-card .orb { width:38px; height:38px; }
}
@media (min-width:1280px) {
  .stage-heading { padding-bottom:6px; }
  .toolbar { padding:5px 0; }
  .source-footer { padding:5px 0; }
  .map-grid { grid-template-rows:minmax(0,1fr); }
  .cards-column { min-height:0; grid-auto-rows:minmax(0,1fr); }
  .map-stage.live-map, .map-stage.live-map:has(.hud-data) { height:auto; }
  .war-room { min-height:590px; }
}