/* EWR "bridge night-watch" palette, from ewr-tts-fullapp/lib/widgets/bridge_palette.dart */
:root{
  --bridge-black:#080B0A;--panel-black:#101412;--panel-raised:#161B18;
  --surface-dim:#0A0E0C;--surface-muted:#0F1411;--surface-active:#172019;
  --red:#B71C1C;--red-bright:#E53935;--red-dim:#7A1B1B;
  --green:#3DDC84;--green-bright:#5CFF9B;--green-dim:#1F5C3A;--green-muted:#6BAF82;--green-ghost:#3A5C47;
  --text-dim:#4F6B58;--text-muted:#6E9078;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface-dim);color:var(--green-muted);font-family:var(--mono);line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--green)}
button{font-family:var(--mono);cursor:pointer}
.wrap{max-width:980px;margin:0 auto;padding:0 14px}

/* top bar */
.topbar{background:var(--bridge-black);border-bottom:1px solid var(--green-dim)}
.topbar .wrap{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green-bright);flex:1 1 auto;min-width:0}
.brand img{width:40px;height:40px;border-radius:9px;border:1px solid var(--green-ghost);flex:none}
.brand b{font-size:15px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-size:10px;letter-spacing:.12em;color:var(--text-muted);font-weight:400}
.search{display:flex;gap:6px;flex:0 1 260px}
.search input{flex:1;min-width:0;background:var(--surface-muted);border:1px solid var(--green-dim);color:var(--green-bright);border-radius:8px;padding:9px 10px;font-family:var(--mono);font-size:13px}
.search input::placeholder{color:var(--text-dim);text-transform:uppercase}
.search input:focus{outline:none;border-color:var(--green-bright)}
.search button{background:var(--surface-muted);border:1px solid var(--green-ghost);color:var(--green-muted);border-radius:8px;padding:0 12px;font-weight:600}

/* receiver */
.receiver{margin:14px 0;background:linear-gradient(180deg,var(--panel-raised),var(--panel-black));border:1px solid var(--green-ghost);border-radius:16px;padding:14px;box-shadow:0 0 0 4px var(--bridge-black) inset,0 10px 30px rgba(0,0,0,.5)}
.receiver.on{border-color:var(--red-dim);box-shadow:0 0 0 4px var(--bridge-black) inset,0 0 24px rgba(183,28,28,.18)}
.lcd{background:#050807;border:1px solid var(--green-dim);border-radius:10px;padding:12px 14px;position:relative;overflow:hidden}
.lcd::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(92,255,155,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.lcd-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase}
.onair{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--green-ghost);color:var(--text-dim)}
.onair i{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.on .onair{border-color:var(--red-dim);color:var(--red-bright)}
.on .onair i{background:var(--red-bright);box-shadow:0 0 8px var(--red-bright);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.freq{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px;color:var(--green-bright);text-shadow:0 0 10px rgba(92,255,155,.35)}
.freq .mhz{font-size:clamp(34px,10vw,56px);font-weight:700;letter-spacing:.02em;line-height:1}
.freq .unit{font-size:13px;color:var(--green-muted)}
.station{font-size:clamp(15px,4.4vw,19px);font-weight:700;color:var(--green-bright);letter-spacing:.06em;text-transform:uppercase}
.station small{color:var(--text-muted);font-weight:400;letter-spacing:.1em}
.alert-badge{display:inline-block;font-size:10px;letter-spacing:.12em;padding:3px 8px;border-radius:6px;border:1px solid var(--green-ghost);color:var(--green-muted);text-transform:uppercase}
.alert-badge.active{background:var(--red);border-color:var(--red-bright);color:#fff;animation:blink 1.6s infinite}
.alert-badge.warn{border-color:var(--red-dim);color:var(--red-bright)}

/* dial */
.dial{margin:14px 0 6px;position:relative;height:30px;border-radius:6px;background:var(--surface-muted);border:1px solid var(--green-dim);overflow:hidden}
.dial .ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--green-ghost) 0 1px,transparent 1px 10px);opacity:.6;mask:linear-gradient(180deg,transparent 45%,#000 45%)}
.dial .scale{position:absolute;left:8px;right:8px;top:3px;display:flex;justify-content:space-between;font-size:9px;color:var(--text-dim)}
.dial .needle{position:absolute;top:0;bottom:0;width:2px;background:var(--red-bright);box-shadow:0 0 8px var(--red-bright);left:50%;transition:left .5s cubic-bezier(.3,1.4,.5,1)}
.band{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
@media(min-width:620px){.band{grid-template-columns:repeat(3,1fr)}}
.preset{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface-muted);border:1px solid var(--green-ghost);color:var(--green-muted);border-radius:10px;padding:10px;min-height:56px;text-decoration:none}
.preset .ico{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--green-dim);display:grid;place-items:center}
.preset .ico svg{width:16px;height:16px;fill:none;stroke:var(--green-muted);stroke-width:2}
.preset b{display:block;font-size:13px;color:var(--green-bright);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset span{display:block;font-size:10px;color:var(--text-muted);letter-spacing:.06em}
.preset:hover{border-color:var(--green)}
.preset[aria-pressed="true"]{background:var(--surface-active);border-color:var(--green-bright);box-shadow:0 0 0 1px var(--green-bright) inset}
.preset[aria-pressed="true"] .ico{border-color:var(--red-bright)}
.preset[aria-pressed="true"] .ico svg{stroke:var(--red-bright)}

/* controls */
.ctl{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{background:var(--surface-muted);border:1px solid var(--green-dim);color:var(--green-muted);border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.btn.stop{border-color:var(--red-dim);color:var(--red-bright)}
.btn[hidden]{display:none}
.status{font-size:11px;color:var(--text-muted);flex:1 1 200px}

/* panels */
.panel{background:var(--panel-black);border:1px solid var(--green-dim);border-radius:12px;padding:12px 14px;margin:12px 0}
.panel h3{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.panel ul{margin:0;padding-left:18px}.panel li{margin:4px 0;font-size:13px}
.panel li strong{color:var(--green-bright)}
#alerts li.hot{color:#ffb3b0}#alerts li.hot strong{color:var(--red-bright)}
.script{font-size:14px;line-height:1.65;color:var(--green-muted);white-space:normal}
.script .s{transition:color .2s,background .2s;border-radius:3px}
.script .s.now{color:var(--bridge-black);background:var(--green);box-shadow:0 0 0 2px var(--green)}
.cols{display:grid;gap:0 12px}
@media(min-width:760px){.cols{grid-template-columns:1fr 1fr}}
.intro{font-size:12px;color:var(--text-muted);margin:12px 2px}

/* tap overlay (fallback only) */
.tap{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(8,11,10,.82);backdrop-filter:blur(3px)}
.tap.show{display:grid}
.tap button{background:var(--green-dim);color:var(--green-bright);border:1.5px solid var(--green-bright);border-radius:999px;padding:16px 28px;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 30px rgba(92,255,155,.25)}

footer{max-width:980px;margin:22px auto 30px;padding:14px;color:var(--text-dim);font-size:11px;border-top:1px solid var(--green-dim)}
footer p{margin:.75rem 0 0}
#rosary{display:none;background:var(--panel-black);border:1px solid var(--green-dim);border-radius:12px;padding:12px 14px;max-width:980px;margin:1rem auto}
#rosary pre{white-space:pre-wrap;font-family:var(--mono)}
#rosary button{background:var(--surface-muted);border:1px solid var(--red-dim);color:var(--red-bright);border-radius:999px;padding:6px 12px}
.rosary-on #rosary{display:block}.rosary-on main>.cols,.rosary-on main>.panel,.rosary-on main>.intro{display:none}
.rosary-on #rosary{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* v3: 10 stations — compact presets on small phones */
@media(max-width:619px){
  .band{gap:6px}
  .preset{padding:8px;gap:8px;min-height:50px}
  .preset .ico{width:26px;height:26px}.preset .ico svg{width:13px;height:13px}
  .preset b{font-size:12px}.preset span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:900px){.band{grid-template-columns:repeat(5,1fr)}}
.band>.preset{min-width:0}.preset>span:last-child{min-width:0;flex:1}
.band{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:620px){.band{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:900px){.band{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:430px){.preset{gap:6px;padding:8px 6px}.preset .ico{width:22px;height:22px}.preset .ico svg{width:11px;height:11px}.preset span{letter-spacing:0;font-size:9px}.preset b{font-size:11.5px;letter-spacing:.02em}}

/* VU needle meters (preview) */
.freq-row{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin:8px 0 2px;min-width:0}
.freq-row .freq{margin:0;flex:0 0 auto}
.vu-row{display:flex;gap:6px;flex:0 0 auto;margin:0}
.vu-row .vu{width:92px}
.vu{position:relative;background:radial-gradient(120% 140% at 50% 100%,#0d1a12 0%,#060a08 70%);border:1px solid var(--green-dim);border-radius:8px;padding:6px 6px 2px;box-shadow:inset 0 2px 10px rgba(0,0,0,.7)}
.vu-face{display:block;width:100%;height:auto;max-height:110px}
.vu-scale{fill:none;stroke:var(--green-muted);stroke-width:2}
.vu-red{fill:none;stroke:var(--red-bright);stroke-width:4}
.vu-tick{stroke:var(--green-muted);stroke-width:1.5}.vu-tick.red{stroke:var(--red-bright)}
.vu-num{fill:var(--green-muted);font:600 10px var(--mono);text-anchor:middle}.vu-num.red{fill:var(--red-bright)}
.vu-label{fill:var(--green-bright);font:700 15px var(--mono);letter-spacing:.15em;text-anchor:middle;opacity:.85}
.vu-ch{fill:var(--text-muted);font:600 10px var(--mono)}
.vu-needle{transform-origin:100px 118px;transform:rotate(-48deg)}
.vu-needle line{stroke:#d9ffe6;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(92,255,155,.6))}
.vu-hub{fill:#0a0e0c;stroke:var(--green-dim);stroke-width:2}
.vu-peak{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red-dim);opacity:.6}
.vu-peak.on{background:var(--red-bright);opacity:1;box-shadow:0 0 8px var(--red-bright)}
.vu{padding:3px 3px 1px;border-radius:6px}
.vu-peak{top:4px;right:5px;width:5px;height:5px}
@media(max-width:560px){.freq-row{gap:14px}.freq{flex-direction:column;align-items:flex-start;gap:2px}.freq .unit{font-size:11px}.vu-row{gap:4px}.vu-row .vu{width:64px}}
@media(max-width:400px){.freq .mhz{font-size:34px}.vu-row .vu{width:58px}.vu-num{display:none}}
@media(max-width:340px){.freq .mhz{font-size:28px}.vu-row .vu{width:46px}}
.rosary-on .freq .mhz{font-size:clamp(26px,7.6vw,52px)}
@media(prefers-reduced-motion:reduce){.on .onair i,.alert-badge.active{animation:none}.dial .needle{transition:none}}
#rosary h2{margin:0 0 4px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-bright)}
#rosary .meta{font-size:11px;color:var(--text-muted);margin:0 0 8px}
.rosary-steps{list-style:none;margin:10px 0 0;padding:0;max-height:60vh;overflow:auto}
.rosary-steps li{padding:6px 8px;border-left:2px solid transparent;font-size:13px;color:var(--green-muted)}
.rosary-steps li b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.rosary-steps li.head b{color:var(--red-bright)}
.rosary-steps li.now{border-left-color:var(--green-bright);background:var(--surface-active);color:var(--green-bright)}
.rosary-on .freq .unit{display:none}.rosary-on .freq .mhz{letter-spacing:.04em}