:root{
  --brand-blue:#022851;
  --brand-gold:#FFBF00;
  --white:#FFFFFF;
  --gray-100:#F5F5F5;
  --gray-300:#D1D5DB;
  --gray-700:#374151;
  --stroke:rgba(2,40,81,.25);
  --txt:#FFFFFF;
  --muted:#F5F5F5;
  --card-bg: rgba(2, 40, 81, 0.85);
  --card-shadow: 0 4px 12px rgba(0,0,0,.18);
  --radius: 8px;
  --card-pad: 12px 14px;
  --bg-image: url("/static/white_background.png");
  --logo-exclusion-width: 390px;
  --logo-exclusion-height: 140px;
  --gutter: 12px;
  --footer-height: 170px;
  --kdvs-scale: 0.5;
  --footer-left-shift: 480px;
}

body.display-tv1080{
  --gutter: 16px;
  --card-pad: 16px 18px;
  --logo-exclusion-width: 460px;
  --logo-exclusion-height: 170px;
  --footer-height: 200px;
  font-size: 18px;
}

body.display-tv4k{
  --gutter: 22px;
  --card-pad: 20px 24px;
  --logo-exclusion-width: 540px;
  --logo-exclusion-height: 210px;
  --footer-height: 240px;
  font-size: 22px;
}

body.density-compact{
  --gutter: 10px;
  --card-pad: 12px 14px;
  font-size: 15px;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  overscroll-behavior-y: none;
}
body{
  margin:0;
  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--txt);
  background: #ffffff;
  overflow-x: hidden;
}
body.demo-overlay-day::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,200,120,0.1), rgba(255,255,255,0) 45%, rgba(120,200,255,0.06));
  z-index: -1;
}
body.theme-gold{
  --bg-image: url("/static/gold_background.png");
  --card-pad: 14px 16px;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: -2;
}

.frame{
  max-width: 96vw;
  margin: 16px auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-layout{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.main-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.weather-topbar{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(2,40,81,.35);
  font-size: 11px;
  color: rgba(255,255,255,.85);
}
.weather-topbar #topbarWeatherIcon{
  font-size: 14px;
}
.weather-topbar #topbarWeatherTemp{
  font-weight: 800;
}
.weather-topbar #topbarWeatherLater{
  color: rgba(255,255,255,.7);
}

.brand{
  font-weight: 800;
  letter-spacing:.5px;
  padding: 4px 12px;
  border-left: 4px solid var(--brand-gold);
  background: rgba(2,40,81,.22);
  border-radius: 8px;
}
.title{ flex:1; font-weight:700; }
.clock{ font-variant-numeric: tabular-nums; color: var(--muted); }
.clock-mode{
  font-size: 11px;
  color: var(--muted);
  border-left: 1px solid var(--stroke);
  padding-left: 10px;
}
.admin-btn{
  margin-left: 8px;
}
.admin-panel{
  margin: 10px 24px 0;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--card-bg);
  padding: 12px;
}
.admin-panel-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 700;
}
.admin-panel-actions{
  display:flex;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-playback-controls{
  flex-wrap: wrap;
  align-items: center;
}
.admin-playback-controls select{
  margin-left: 6px;
}
.admin-playback-controls .badge{
  margin-left: auto;
}
.admin-frame{
  width: 100%;
  height: 480px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: transparent;
}

.test-clock-banner{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(2,40,81,.72);
  border: 2px solid rgba(255, 200, 120, 0.9);
  color: #fff3d6;
  padding: 12px 18px;
  margin: 8px 24px 0;
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.test-clock-label{
  font-weight: 800;
  color: #ffd88a;
}

.test-clock-time{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 800;
  color: #ffffff;
}

.test-clock-link{
  margin-left: auto;
  color: #ffe6b3;
  text-decoration: none;
  border: 1px solid rgba(255, 230, 179, 0.45);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.demo-live-strike{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 120, 120, 0.95);
  opacity: 0.95;
}

.admin-pages-note{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 120, 0.5);
  background: rgba(2,40,81,.35);
  color: #ffe9bf;
  font-size: 12px;
  line-height: 1.35;
}
.emergency-overlay{
  position: fixed;
  inset: 0;
  background: rgba(80,0,0,.92);
  color: #fff;
  display: none;
  z-index: 1000;
  padding: 24px;
}
.emergency-overlay.active{ display: block; }
.emergency-banner{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.emergency-body{
  max-width: 900px;
  font-size: 18px;
  line-height: 1.6;
}
.emergency-transcript{
  margin-top: 12px;
  font-size: 16px;
  background: rgba(255,255,255,.08);
  padding: 12px 14px;
  border-radius: 10px;
}
.emergency-i18n{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  border-radius: 10px;
}
.emergency-image{
  display: none;
  width: 100%;
  max-width: 640px;
  margin: 12px 0;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.6);
}
.alert-ticker{
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  display:flex;
  gap:10px;
  align-items:center;
  overflow:hidden;
}
.alert-ticker-label{
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.alert-ticker-text{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-ticker.amber{ border-color: rgba(255,191,0,.6); }
.alert-ticker.silver{ border-color: rgba(192,192,192,.6); }
.alert-ticker.red{ border-color: rgba(255,80,80,.6); }
.emergency-guidance{
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
}
.emergency-disclaimer{
  margin-top: 10px;
  font-size: 14px;
  opacity: .85;
}
.playback-indicator{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
}
.playback-indicator.active{
  border-color: rgba(243,194,79,.6);
  color: #f3c24f;
  background: rgba(243,194,79,.12);
}

.controls{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  padding: 6px 8px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(2,40,81,.25);
}
.card.controls-card .controls{
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
}
.card.controls-card .control-group{
  flex: 0 0 auto;
  gap: 6px;
  font-size: 11px;
}
.card.controls-card .badge{
  display: inline-flex;
  align-items: center;
}
.card.controls-card .btn{
  padding: 6px 10px;
  font-size: 11px;
}
.card.controls-card select{
  padding: 4px 6px;
  font-size: 11px;
}
.card.controls-card label[for="speedSelect"]{
  display: none;
}
.control-group{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.btn{
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(2,40,81,.35);
  color: var(--txt);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.btn.secondary{
  background: rgba(2,40,81,.2);
}
 .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  color: var(--muted);
 }
 .tooltip{
  position: relative;
  cursor: help;
 }
 .tooltip .tip{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  min-width: 200px;
  max-width: 320px;
  background: rgba(4,20,35,.95);
  color: var(--txt);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
 }
 .tooltip:hover .tip{
  opacity: 1;
  transform: translateY(0);
 }
select{
  background: rgba(0,0,0,.25);
  color: var(--txt);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 8px;
  border-radius: 8px;
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 0.6fr 1.9fr;
  grid-template-areas:
    "similar_day_chart similar_day_chart similar_day_chart similar_day_chart alert alert"
    "power_chart power_chart power_chart power_chart water_chart water_chart"
    "unitrans unitrans unitrans unitrans unitrans_side unitrans_side";
  gap: 12px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.card{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  overflow:hidden;
}
.card.transit{
  min-height: 560px;
}
.card.alert{ grid-area: alert; height: 100%; display: flex; flex-direction: column; }
.card.lines.power{ grid-area: power_chart; }
.card.lines.waterChart{ grid-area: water_chart; }
.card.lines.similar{ grid-area: similar_day_chart; }
.card.lines.energy-stack{ grid-area: similar_day_chart; }
.card.sun{ grid-area: time_display; }
.card.guidance{ grid-area: guidance; }
.card.map{ grid-area: unitrans; }
.card.unitrans-side{ grid-area: unitrans_side; }
.card.map,
.card.unitrans-side{
  height: calc(100% - 70px);
  align-self: start;
  max-height: calc(100% - 70px);
}
.card.future.video{ grid-area: video; }
.card.future.audio{ grid-area: audio; }
.card.controls-card{ grid-area: controls; }
.card.controls-card{
  padding: 4px 6px;
}
.card.future.ticker{ grid-area: ticker; }
.card.future.audio{
  min-height: 225px;
  max-height: none;
  overflow: hidden;
}
.footer-zone{
  height: var(--footer-height);
  display: flex;
  align-items: flex-end;
  gap: var(--gutter);
  padding: 8px var(--gutter);
  padding-left: calc(var(--logo-exclusion-width) + var(--gutter));
  box-sizing: border-box;
}
.footer-zone .card{
  margin: 0;
  transform: translateX(calc(var(--footer-left-shift) * -1));
}
.footer-zone .card.future.audio{
  flex: 1 1 auto;
  min-width: 420px;
  min-height: 0;
  max-height: calc(var(--footer-height) - 16px);
  height: calc(var(--footer-height) - 16px);
  padding: 8px 10px;
  overflow: hidden;
}
.footer-zone .card.controls-card{
  flex: 0 0 auto;
  align-self: flex-end;
  max-height: calc(var(--footer-height) - 16px);
}
.footer-zone .card.central-plant{
  flex: 0 0 280px;
  min-height: 0;
  max-height: calc(var(--footer-height) - 16px);
  height: calc(var(--footer-height) - 16px);
  overflow: hidden;
  padding: 8px 10px;
}
.footer-zone .card.central-plant .kv{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
}
.footer-zone .card.central-plant .k,
.footer-zone .card.central-plant .v{
  font-size: 11px;
}
.footer-zone .card.future.video{
  flex: 0 0 260px;
  min-height: 0;
  max-height: calc(var(--footer-height) - 16px);
  height: calc(var(--footer-height) - 16px);
  overflow: hidden;
  padding: 8px 10px;
}
.footer-zone .card.future.video .placeholder{
  min-height: 84px;
  font-size: 12px;
}
.footer-zone .card.emissions-profile{
  flex: 0 0 340px;
  min-height: 0;
  max-height: calc(var(--footer-height) - 16px);
  height: calc(var(--footer-height) - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px;
}
.footer-zone .card.emissions-profile .emissions-list{
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}
.footer-zone .card.emissions-profile .subnote{
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px;
}
.bottom-row .card{
  margin: 0;
}
.bottom-row .card.future.audio{
  flex: 1 1 auto;
  min-width: 420px;
}
.bottom-row .card.controls-card{
  flex: 0 0 auto;
}

@media (max-width: 1200px){
  .footer-zone{
    overflow-x: auto;
    align-items: flex-start;
    padding-left: calc(var(--logo-exclusion-width) + var(--gutter));
  }
  .footer-zone .card.future.audio,
  .footer-zone .card.central-plant,
  .footer-zone .card.future.video,
  .footer-zone .card.controls-card,
  .footer-zone .card.emissions-profile{
    flex: 0 0 auto;
  }
}
.audio-layout{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  height: 100%;
  transform: scale(0.92);
  transform-origin: center;
}
.footer-zone .card.future.audio .audio-layout{
  gap: 6px;
  width: calc(100% / var(--kdvs-scale));
  height: calc(100% / var(--kdvs-scale));
  transform: scale(var(--kdvs-scale));
  transform-origin: top left;
}
.audio-subcard{
  height: 100%;
}
.audio-info{
  min-width: 0;
}
.audio-guidance{
  min-width: 0;
}
.audio-guidance .card-title{
  margin-bottom: 8px;
}
.audio-guidance #guidanceText{
  font-size: 12px;
  margin-bottom: 8px;
}
.audio-guidance .window-ui{
  transform: scale(0.9);
  transform-origin: left top;
}
.audio-time{
  display: grid;
  place-items: center;
}
.audio-time .time-display{
  width: 100%;
  max-width: 320px;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.audio-time .time-countdown{
  text-align: center;
}
.audio-time .countdown-value{
  font-size: 22px;
}
.audio-time .sun-path{
  height: 90px;
}
.audio-time .moon-svg{
  width: 80px;
  height: 80px;
}
.audio-qr-wrap{
  display: grid;
  place-items: center;
}
.audio-subcard{
  min-width: 0;
  height: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  display: grid;
  align-content: start;
  gap: 6px;
}
.audio-subcard .card-title{
  margin-bottom: 4px;
}
.audio-subcard .placeholder{
  padding: 6px 8px;
}
.audio-qr{
  width: 150px;
  max-width: 90%;
}
.audio-qr-wrap{
  align-content: center;
}
.alert-overview{
  margin-top: 10px;
}
.alert-overview .kv{
  grid-template-columns: 1fr auto;
  row-gap: 6px;
}
.alert-overview .v{
  font-size: 22px;
}
.cost-inline{
  margin-top: 8px;
}
.alert-bottom{
  margin-top: auto;
}
.audio-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.icon-btn{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.card.future.audio{
  position: relative;
}
.audio-qr{
  position: static;
  width: 150px;
  max-width: 100%;
  padding: 6px;
  border-radius: 10px;
}
.card.future.audio .audio-controls{
  margin-bottom: 6px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.card.future.audio .placeholder{
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.2;
}
.card.future.audio .subnote{
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
}
.card.future.audio .astro-meta{
  font-size: 10px;
  gap: 2px;
}

.card-title{
  font-size: 12px;
  letter-spacing:.4px;
  text-transform:none;
  color: rgba(255,255,255,.70);
  margin-bottom: 10px;
}

.card.central-plant .v{
  font-size: 22px;
}
.card.central-plant .subnote{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  row-gap: 8px;
  column-gap: 10px;
  align-items: baseline;
}

.k{ color: var(--muted); font-size: 12px; }
.v{ font-size: 28px; font-weight: 800; }
.v small{ font-size: 12px; font-weight: 600; color: var(--muted); }

.water-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.75);
  font-size: 12px;
}
.dot{ width:8px; height:8px; border-radius:99px; display:inline-block; }
.dot.water{ background:#2aa9ff; }
.dot.oat{ background:#56d364; }
.dot.idx{ background:#f3c24f; }
.dot.avail{ background:#ffd27a; }

.alert{
  background: var(--card-bg);
  border-color: var(--stroke);
}
.alert-title{ font-weight:800; }
.alert-meta{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}
.alert-pill{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}
.alert-pill.secondary{
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.15);
}
.alert.high{
  border-color: rgba(255,80,80,.6);
  box-shadow: 0 0 14px rgba(255,80,80,.2);
}
.alert.medium{
  border-color: rgba(255,191,0,.6);
  box-shadow: 0 0 14px rgba(255,191,0,.2);
}
.alert.low{
  border-color: rgba(120,220,140,.4);
  box-shadow: 0 0 14px rgba(120,220,140,.15);
}
.alert-body{ font-size: 12px; color: rgba(255,255,255,.85); margin-top: auto; }

.costRow{
  display:flex;
  justify-content: space-between;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  padding: 4px 0;
}
.card.cost{
  min-height: 260px;
}
.hint{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.gauge{
  position: relative;
  height: 90px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 90px 90px 8px 8px;
  overflow: hidden;
  border: 1px solid var(--stroke);
}
.gauge-fill{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--brand-gold);
  transition: width .4s ease;
}
.gauge-label{
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-size: 12px;
  color: var(--muted);
}

.lines .canvasWrap{
  height: auto;
  width: 100%;
}
.card.lines.power{
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.card.lines.power .canvasWrap{
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
}
.card.lines.waterChart{
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.card.lines.waterChart .canvasWrap{
  flex: 1;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
}

.card.lines.power,
.card.lines.waterChart{
  padding-bottom: 20px;
}
.card.lines.energy-stack{
  display: grid;
  grid-template-rows: auto 1fr auto 1fr;
  gap: 8px;
}
.card.lines.energy-stack .canvasWrap{
  height: 200px;
}
canvas{
  width: 100% !important;
  height: 100% !important;
}

.time-display{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.time-countdown{
  display: grid;
  gap: 6px;
  text-align: left;
}
.countdown-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
}
.countdown-value{
  font-size: 30px;
  font-weight: 800;
  color: #fff;
}
.countdown-sub{
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.astro-visual{
  display: grid;
  place-items: center;
}
.sun-path{
  width: 100%;
  height: 130px;
}
#sunPathTrack{
  fill: none;
  stroke: rgba(255,255,255,.2);
  stroke-width: 3;
}
#sunPathProgress{
  fill: none;
  stroke: rgba(255,200,80,.9);
  stroke-width: 3;
  stroke-linecap: round;
}
.sun-dot{
  fill: #ffd15b;
  stroke: rgba(255,255,255,.5);
  stroke-width: 1;
}
.sun-tick{
  fill: rgba(255,255,255,.35);
}
.moon-visual{
  display: grid;
  place-items: center;
  gap: 6px;
}
.moon-svg{
  width: 110px;
  height: 110px;
}
.moon-dark{
  fill: rgba(255,255,255,.08);
}
.moon-light{
  fill: rgba(255,255,255,.9);
}
.moon-label{
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.astro-meta{
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.stale-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  justify-self: start;
}
.guidance{ font-size: 12px; color: rgba(255,255,255,.80); }
#guidanceText{
  max-height: 96px;
  overflow: auto;
  padding-bottom: 4px;
}
.card.guidance{
  min-height: 176px;
  max-height: 260px;
}
.card.cost{
  min-height: 176px;
  max-height: 260px;
}
.card.sun{
  min-height: 176px;
  max-height: 260px;
}
.window-ui{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  margin: 14px 0 6px;
}
.window-frame{
  width: 100%;
  max-width: 240px;
  height: 140px;
  border: 3px solid rgba(255,255,255,.45);
  border-radius: 10px;
  position: relative;
  background: rgba(2,40,81,.35);
  display:flex;
  overflow: hidden;
}
.window-pane{
  flex:1;
  border-right: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  transition: transform .25s ease;
}
.window-pane.right{ border-right: 0; }
.window-crossbar{
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255,255,255,.4);
}
.window-crossbar.vertical{
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 2px;
  height: auto;
}
.window-ui.open .window-pane.left{ transform: translateX(-28%); }
.window-ui.open .window-pane.right{ transform: translateX(28%); }
.window-label{
  font-size: 12px;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.window-breeze{
  position:absolute;
  left: 10px;
  right: 10px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(180,230,255,.35);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .3s ease;
}
.window-breeze.one{ top: 18px; }
.window-breeze.two{ top: 40px; }
.window-breeze.three{ top: 62px; }
.window-ui.open .window-breeze{
  opacity: 1;
  transform: translateX(6px);
  background: rgba(160,220,255,.25);
}
.muted{ color: var(--muted); }
.future .placeholder{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.4;
  padding: 10px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.15);
}
.future .subnote{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.qr-image{
  width: min(220px, 70%);
  height: auto;
  margin: 10px auto 0;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
  padding: 8px;
}
.card.future.qr{
  min-height: 320px;
  display: flex;
  flex-direction: column;
  max-height: 280px;
}
.card.future.qr .qr-image{
  margin-top: 12px;
  margin-bottom: 8px;
}
.card.future.ticker{
  display: none;
}
.unitrans-list{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}
.unitrans-map{
  margin: 10px 0 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  height: 480px;
  position: relative;
}
.unitrans-map-canvas{
  width: 100%;
  height: 100%;
  display: block;
  font-size: 12px;
  color: var(--muted);
  min-height: 320px;
}
.unitrans-map-layer{
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.unitrans-marker{
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffd100;
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 0 8px rgba(255,209,0,.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.unitrans-stop{
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
  pointer-events: none;
}
.unitrans-marker-label{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.unitrans-zoom-controls{
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  gap: 6px;
  z-index: 2;
}
.unitrans-zoom-controls .zoom-btn{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.unitrans-zoom-controls .zoom-btn:hover{
  background: rgba(255,255,255,.12);
}
.unitrans-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 12px;
}
.unitrans-meta{
  display:flex;
  gap: 8px;
  align-items:center;
}
.unitrans-pill{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}
.unitrans-muted{
  color: var(--muted);
  font-size: 11px;
}

.demo-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: auto;
}
.demo-card{
  min-height: 220px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.demo-kv{
  display:grid;
  grid-template-columns: 1fr auto;
  row-gap: 6px;
  column-gap: 10px;
}
.demo-note{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
}
.demo-quality{
  font-size: 11px;
  color: rgba(255,255,255,.65);
}
.demo-actions{
  margin-top: auto;
}
.map-wrap{
  height: auto;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
  min-height: 0;
}
.card.map{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}
.card.map .map-wrap{
  flex: 1;
  height: auto;
}
.unitrans-side{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.unitrans-countdowns{
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
  max-height: 440px;
  overflow: auto;
  padding-right: 4px;
}
.unitrans-countdown-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.unitrans-countdown-meta{
  display: grid;
  gap: 2px;
}
.unitrans-countdown-route{
  font-weight: 700;
  color: rgba(255,255,255,.9);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.route-chip{
  font-weight: 800;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.12);
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
}
.route-chip-outline{
  border: 1px solid currentColor;
  background: rgba(255,255,255,.9);
  padding: 2px 6px;
  border-radius: 999px;
}
.unitrans-countdown-stop{
  color: rgba(255,255,255,.7);
  font-size: 11px;
}
.unitrans-countdown-stop-inline{
  color: rgba(255,255,255,.7);
  font-weight: 600;
  font-size: 11px;
}
.unitrans-countdown-dest{
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
.unitrans-countdown-dest.dest-silo{
  color: #ffd27a;
  border-color: rgba(255,210,122,.4);
  background: rgba(255,210,122,.15);
}
.unitrans-countdown-dest.dest-mu{
  color: #7fb6ff;
  border-color: rgba(127,182,255,.45);
  background: rgba(127,182,255,.15);
}
.unitrans-countdown-time{
  font-weight: 700;
  color: rgba(255,255,255,.9);
}
.map-table{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}
.map-table-head{
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1.2fr 0.6fr;
  gap: 8px;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.map-table-body{
  max-height: 220px;
  overflow: auto;
}
.map-table-row{
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 1.2fr 0.6fr;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.map-table-row:last-child{
  border-bottom: none;
}
.map-canvas{
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-actions{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.map-incidents{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0,0,0,.18);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  max-height: 160px;
  overflow: hidden;
}
.map-incidents-list{
  overflow: auto;
  max-height: 140px;
  padding-right: 6px;
}
.map-incidents-empty{
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  color: rgba(255,255,255,.6);
  padding: 12px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.map-incidents-empty .dot-row{
  display: flex;
  gap: 6px;
}
.map-incidents-empty .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.map-incidents-coords{
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;
  min-width: 86px;
  text-align: right;
  color: rgba(255,255,255,.6);
  font-size: 11px;
}
.chp-marker{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b6b;
  border: 2px solid rgba(0,0,0,.5);
  box-shadow: 0 0 8px rgba(255,90,90,.6);
}

@media (max-width: 1200px){
  .grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .lines .canvasWrap{ height: 240px; }
  .card.lines.power,
  .card.lines.waterChart{
    min-height: 320px;
  }
  .card.lines.power .canvasWrap,
  .card.lines.waterChart .canvasWrap{
    min-height: 260px;
    padding-bottom: 16px;
  }
}

.emissions-profile .emissions-list{
  margin-top: 8px;
  display: grid;
  gap: 4px;
  max-height: none;
  overflow: hidden;
  padding-right: 4px;
}

.emissions-profile .emissions-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
}