/* ============================================================================
   LOCALSTREAM — "SIGNAL BOX" redesign (July 2026)
   Dark broadcast-console base · Anton headlines · Space Mono equipment labels.
   Every id/class the player + guide JS touches is unchanged; this block only
   restyles them. Functional rules (fullscreen, pseudo-fs, subs) preserved.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #0E0C10;
  --s1:       #16141A;
  --s2:       #1C1922;
  --s3:       #221E29;
  --border:   #2B2733;
  --border2:  #3B3646;
  --orange:   #FF5E1F;
  --orange-dk:#E04D12;
  --accent2:  #2FC8FF;
  --accent2-dk:#2FC8FF;
  --text:     #F2EDE4;
  --text2:    #A39DAD;
  --text3:    #6A6376;
  --green:    #2BD94E;
  --red:      #FF3B30;
  --blue:     #2FC8FF;
  --tally:    #FF3B30;
  --radius:   0px;
  --bar1:#FF5E1F; --bar2:#FF3EA5; --bar3:#FFC400; --bar4:#2BD94E; --bar5:#2FC8FF; --bar6:#7B6CFF;
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fh: 'Anton', sans-serif;
  --fm: 'Space Mono', monospace;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--fd); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; overflow-x: hidden;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px; }
a { color: var(--text); }
a:hover { color: var(--orange); }
::selection { background: var(--orange); color: var(--bg); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.22} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lsmarq { to { transform: translateX(-50%); } }

/* STATUS STRIP */
.status-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 20px; border-bottom: 1px solid var(--border); font-family: var(--fm); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); flex-wrap: wrap; }
.status-strip .sig { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 6px; height: 6px; background: var(--tally); border-radius: 50%; animation: blink 1.2s steps(2,start) infinite; }
@media(max-width:640px){ .status-hide-sm { display: none; } }

/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: var(--s1); border-bottom: 2px solid var(--border2); padding: 0; min-height: 60px; display: flex; align-items: stretch; gap: 0; }
.logo-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-right: 1px solid var(--border); text-decoration: none; flex-shrink: 0; }
.ls-mark { width: 38px; height: 38px; background: var(--bg); border: 2px solid var(--text); display: flex; flex-direction: column; flex-shrink: 0; }
.ls-mark b { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 400; font-size: 17px; color: var(--text); letter-spacing: .02em; line-height: 1; }
.ls-mark i { height: 8px; display: flex; font-style: normal; }
.ls-mark i u, .ls-bug i u { flex: 1; text-decoration: none; }
.ls-mark i u:nth-child(1){background:var(--bar1)} .ls-mark i u:nth-child(2){background:var(--bar2)} .ls-mark i u:nth-child(3){background:var(--bar3)}
.ls-mark i u:nth-child(4){background:var(--bar4)} .ls-mark i u:nth-child(5){background:var(--bar5)} .ls-mark i u:nth-child(6){background:var(--bar6)}
.ls-word { display: flex; flex-direction: column; gap: 1px; }
.ls-word strong { font-family: var(--fh); font-weight: 400; font-size: 19px; letter-spacing: .03em; color: var(--text); line-height: 1; }
.ls-word small { font-family: var(--fm); font-size: 8px; letter-spacing: .3em; color: var(--text3); text-transform: uppercase; }
.live-badge { display: flex; align-items: center; gap: 6px; background: var(--tally); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; font-family: var(--fm); align-self: center; margin-left: 14px; }
.live-dot { width: 5px; height: 5px; background: var(--bg); border-radius: 50%; animation: blink 1.2s steps(2,start) infinite; }
.nav-right { display: flex; align-items: stretch; margin-left: auto; }
.nav-link { font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); text-decoration: none; transition: color .15s, background .15s; padding: 0 18px; border-left: 1px solid var(--border); display: flex; align-items: center; }
.nav-link:hover { color: var(--bg); background: var(--text); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border2); color: var(--text2); font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; align-self: center; margin-left: auto; margin-right: 12px; }
.nav-toggle:hover { color: var(--text); border-color: var(--orange); }
.nav-drawer { display: none; }
.nav-drawer.open { display: flex; }
@media(max-width:640px){
  .logo-wrap { padding: 8px 12px; }
  .ls-word strong { font-size: 16px; }
  .live-badge { margin-left: 8px; }
  .nav-right { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer.open { position: sticky; top: 60px; background: var(--s1); border-bottom: 2px solid var(--border2); flex-direction: column; z-index: 99; padding: 8px 0; }
  .nav-drawer .nav-link { border-left: none; border-bottom: 1px solid var(--border); padding: 16px 20px; display: flex; min-height: 44px; }
  .nav-drawer .nav-link:last-child { border-bottom: none; }
}

/* HERO */
.hero { max-width: 1240px; margin: 0 auto; padding: clamp(36px,5.5vw,64px) 28px clamp(20px,3vw,32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero-head { flex-shrink: 0; }
.eyebrow { font-family: var(--fm); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content:''; display:block; width:34px; height:2px; background:var(--orange); }
.hero h1 { font-family: var(--fh); font-weight: 400; font-size: clamp(46px,8.5vw,118px); line-height: .92; letter-spacing: .004em; color: var(--text); text-transform: uppercase; max-width: none; margin-bottom: 0; }
.hero h1 .accent { color: var(--orange); }
.hero-sub { font-size: 16px; color: var(--text2); max-width: 380px; line-height: 1.65; font-weight: 400; padding-bottom: 10px; }
@media(max-width:640px){ .hero { padding: 28px 16px 16px; align-items: flex-start; gap: 14px; } .hero-sub { padding-bottom: 0; } }

/* TICKER */
.ticker { overflow: hidden; background: var(--s1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
.ticker-inner { display: flex; width: max-content; animation: lsmarq 30s linear infinite; }
.ticker-inner span { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); white-space: nowrap; padding-right: 48px; }

/* PANELS */
.ch-panel { display: none; }
.ch-panel.active { display: block; }
.main-grid { max-width: 1240px; margin: 0 auto; padding: clamp(16px,2.5vw,28px) 28px 56px; display: flex; flex-direction: column; gap: 14px; }
@media(max-width:880px){ .main-grid { padding: 16px 16px 44px; } }

/* MODULE HEADER RAIL */
.mod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--s2); border: 1px solid var(--border); border-bottom: 0; font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text2); }
.mod-onair { display: flex; align-items: center; gap: 7px; color: var(--tally); letter-spacing: .18em; }
.mod-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 8px rgba(255,59,48,.9); animation: blink 1.2s steps(2,start) infinite; }

/* PLAYER (functional rules preserved) */
.player-outer { background: #000; aspect-ratio: 16/9; position: relative; border: 1px solid var(--border2); overflow: hidden; }
#ch01-player { pointer-events: auto; object-fit: cover; }
.player-outer:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: none; }
.player-outer:fullscreen #ch01-player { object-fit: contain; }
.player-outer:-webkit-full-screen { width: 100vw; height: 100vh; }
.player-outer:-webkit-full-screen #ch01-player { object-fit: contain; }
.player-outer.pseudo-fs { position: fixed; inset: 0; z-index: 9999; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; aspect-ratio: auto; border: none; background: #000; }
.player-outer.pseudo-fs #ch01-player { object-fit: cover; }
.player-outer.pseudo-fs .player-subs { bottom: 8%; font-size: clamp(16px,4.2vw,28px); }
@media (orientation: portrait) {
  .player-outer.pseudo-fs { width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; }
}
.live-pill { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; background: var(--tally); color: var(--bg); font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; pointer-events: none; }
.live-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bg); animation: blink 1.2s steps(2,start) infinite; }
.player-controls { position: absolute; bottom: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.player-btn { display: flex; align-items: center; gap: 7px; background: rgba(10,8,12,.78); color: var(--text); border: 1px solid rgba(242,237,228,.3); padding: 9px 12px; font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.player-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.player-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.player-btn.icon-only { padding: 9px; }
.player-btn.is-on #ch01SoundLabel { display: none; }
.player-btn.cc-on { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.player-loading { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(8,6,10,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .35s; }
.player-loading.hidden { opacity: 0; pointer-events: none; }
.player-loading-spinner { width: 30px; height: 30px; border: 2px solid rgba(242,237,228,.14); border-top-color: rgba(242,237,228,.85); border-radius: 50%; animation: spin .75s linear infinite; }
.player-loading-text { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text3); }
.player-subs { position: absolute; left: 50%; transform: translateX(-50%); bottom: 58px; z-index: 2; max-width: 86%; background: rgba(0,0,0,.72); color: #fff; font-family: var(--fd); font-weight: 600; font-size: clamp(13px,2.3vw,19px); line-height: 1.4; padding: 6px 14px; border-radius: 4px; text-align: center; pointer-events: none; display: none; }
.player-outer:fullscreen .player-subs { bottom: 72px; font-size: clamp(16px,2vw,26px); }

/* CHANNEL BUG (monochrome, per ident spec) */
.ls-bug { position: absolute; bottom: 12px; left: 12px; z-index: 2; width: 32px; height: 32px; border: 2px solid rgba(242,237,228,.6); opacity: .55; display: flex; flex-direction: column; pointer-events: none; }
.ls-bug b { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-weight: 400; font-size: 14px; color: rgba(242,237,228,.85); line-height: 1; }
.ls-bug i { height: 6px; display: flex; font-style: normal; }
.ls-bug i u:nth-child(odd) { background: rgba(242,237,228,.7); }
.ls-bug i u:nth-child(even) { background: rgba(242,237,228,.4); }

/* NOW PLAYING META + PROGRESS */
.player-meta { margin-top: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-top: none; background: var(--s1); padding: 12px 14px; }
.show-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--s2); color: var(--text); }
.show-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.show-name { font-size: 14px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
.show-until { font-family: var(--fm); font-size: 10px; color: var(--text3); margin-top: 2px; letter-spacing: .06em; text-transform: uppercase; }
.progress-rail { height: 4px; background: var(--bg); border: 1px solid var(--border); border-top: none; overflow: hidden; margin-top: 0; }
.progress-fill { height: 100%; }
.progress-fill.orange { width: 0%; background: var(--orange); transition: width 1s linear; }

/* GUIDE (classes are generated by loadGuide() — keep names) */
.guide-card { background: var(--s1); border: 1px solid var(--border); overflow: hidden; }
.guide-head { padding: 9px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--s2); }
.guide-head-title { font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.guide-head-date { font-family: var(--fm); font-size: 9px; color: var(--text3); letter-spacing: .14em; text-transform: uppercase; }
.guide-strip { display: flex; gap: 1px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--border); }
.guide-strip::-webkit-scrollbar { height: 8px; }
.guide-strip::-webkit-scrollbar-track { background: var(--bg); }
.guide-strip::-webkit-scrollbar-thumb { background: var(--border2); }
.guide-item { flex: 0 0 190px; background: var(--s1); padding: 12px 14px 14px; border-top: 3px solid transparent; transition: background .1s; cursor: default; }
.guide-item:hover { background: var(--s2); }
.guide-item.on { background: var(--s2); border-top-color: var(--orange); }
.guide-time { font-family: var(--fm); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; display: block; }
.on .guide-time { color: var(--orange); }
.guide-icon { display: none; }
.g-title { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; }
.g-desc { font-family: var(--fm); font-size: 9.5px; color: var(--text3); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
@media(max-width:640px){ .guide-item { flex: 0 0 165px; padding: 10px 12px 12px; } }

/* STRAIGHT UP */
.whatson { max-width: 1240px; margin: clamp(28px,4vw,44px) auto 0; padding: 0 28px; }
.whatson-inner { border-left: 4px solid var(--orange); padding: 6px 0 6px 22px; max-width: 820px; }
.whatson-eyebrow { font-family: var(--fm); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.whatson-text { font-size: clamp(16px,2vw,19px); line-height: 1.6; color: var(--text); font-weight: 500; }
@media(max-width:760px){ .whatson { padding: 0 16px; } .whatson-text { font-size: 15px; } }

/* ACCORDIONS */
.acc-wrap { max-width: 1240px; margin: 28px auto 0; padding: 0 28px; }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--s1); border: 1px solid var(--border); border-radius: 0; padding: 16px 20px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--fd); transition: background .15s, border-color .15s; }
.acc-head:hover { background: var(--s2); border-color: var(--border2); }
.acc-head-title { display: block; font-family: var(--fh); font-weight: 400; font-size: clamp(18px,2.4vw,24px); color: var(--text); letter-spacing: .02em; text-transform: uppercase; }
.acc-head-sub { display: block; font-family: var(--fm); font-size: 10px; color: var(--text3); margin-top: 5px; letter-spacing: .1em; text-transform: uppercase; }
.acc-chev { flex-shrink: 0; font-size: 13px; color: var(--orange); transition: transform .25s; }
.acc-head[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-body[hidden] { display: none; }
section.adcta.acc-body { margin-top: 10px; }
@media(max-width:760px){ .acc-wrap { padding: 0 16px; } }

/* ADVERTISE */
.adcta { max-width: 1240px; margin: 48px auto 0; padding: 0 28px; }
.adcta-box { border: 1px solid var(--border); background: var(--s1); }
.adcta-top { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: clamp(20px,3vw,36px); }
.adcta-text { flex: 1; min-width: 280px; }
.adcta-eyebrow { font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text2); margin-bottom: 14px; }
.adcta-text h2 { font-family: var(--fh); font-weight: 400; font-size: clamp(28px,3.6vw,44px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--text); margin: 0 0 14px; }
.adcta-text p { font-size: 14px; line-height: 1.65; color: var(--text2); max-width: 470px; margin: 0; }
.adcta-tag { display: inline-block; margin-left: 8px; background: var(--orange); color: var(--bg); font-family: var(--fm); font-size: 8px; font-weight: 700; letter-spacing: .14em; padding: 3px 7px; vertical-align: middle; text-transform: uppercase; }
.adcta-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 15px; background: var(--s2); border-left: 3px solid var(--bar3); font-size: 12.5px; line-height: 1.5; color: var(--text2); max-width: 470px; }
.adcta-note b { color: var(--text); font-weight: 700; }
.adcta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: var(--bg); font-family: var(--fm); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 15px 24px; text-decoration: none; border: 1px solid #000; box-shadow: 0 4px 0 #000; white-space: nowrap; transition: filter .15s; }
.adcta-btn:hover { filter: brightness(1.12); color: var(--bg); }
.adcta-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.adcta-tiers { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.adcta-tier { padding: 16px 18px; background: var(--s1); border-right: none; }
.adcta-tier-name { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.adcta-tier-price { font-family: var(--fh); font-weight: 400; font-size: 26px; color: var(--text); line-height: 1; }
.adcta-tier-price span { font-family: var(--fm); font-size: 11px; font-weight: 400; color: var(--text3); }
.adcta-tier-desc { font-family: var(--fm); font-size: 9.5px; color: var(--text3); margin-top: 7px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
@media(max-width:760px){ .adcta { padding: 0 16px; } .adcta-top { padding: 24px 18px; } .adcta-tiers { grid-template-columns: repeat(2,1fr); } }

/* CREATOR TEASER */
.creator-teaser { border-top: none; padding: 0 28px; }
.creator-teaser.acc-body { max-width: 1240px; margin: 10px auto 0; }
.creator-teaser-inner { max-width: none; margin: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; background: var(--s1); border: 1px solid var(--border); padding: clamp(20px,3vw,36px); }
.teaser-eyebrow { font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.teaser-eyebrow::before { content:''; display:block; width:20px; height:1px; background:var(--orange); }
.creator-teaser-title { font-family: var(--fh); font-weight: 400; font-size: clamp(30px,4.2vw,52px); color: var(--text); line-height: .95; letter-spacing: .01em; margin-bottom: 12px; text-transform: uppercase; }
.creator-teaser-title span { color: var(--orange); }
.creator-teaser-sub { font-size: 14px; color: var(--text2); line-height: 1.7; max-width: 480px; }
.creator-teaser-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.btn-apply { background: var(--orange); color: var(--bg); font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 15px 26px; text-decoration: none; display: inline-block; border: 1px solid #000; box-shadow: 0 4px 0 #000; transition: filter .15s; white-space: nowrap; }
.btn-apply:hover { filter: brightness(1.12); color: var(--bg); }
.btn-apply:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.btn-login-link { font-family: var(--fm); font-size: 9px; color: var(--text3); text-decoration: none; transition: color .15s; white-space: nowrap; letter-spacing: .14em; text-transform: uppercase; }
.btn-login-link:hover { color: var(--text); }
@media(max-width:760px){ .creator-teaser { padding: 0 16px; } }

/* FOOTER */
footer { padding: 18px 28px; border-top: 2px solid var(--border2); background: var(--s1); margin-top: 48px; }
.footer-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-family: var(--fm); font-size: 9px; color: var(--text3); letter-spacing: .14em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; }
.footer-links a { font-family: var(--fm); font-size: 9px; color: var(--text3); text-decoration: none; transition: color .15s; padding: 4px 12px; border-left: 1px solid var(--border); letter-spacing: .1em; text-transform: uppercase; }
.footer-links a:first-child { border-left: none; }
.footer-links a:hover { color: var(--orange); }

/* APP INSTALL SECTION */
.app-section { max-width: 1240px; margin: 0 auto; padding: 40px 28px 48px; border-top: none; }
.app-card { background: var(--s1); border: 1px solid var(--border); padding: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.app-card-icon { flex-shrink: 0; color: var(--text); display: inline-flex; }
.app-card-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app-card-text { flex: 1; min-width: 220px; }
.app-card-eyebrow { font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.app-card-title { font-family: var(--fd); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: 0; margin-bottom: 6px; }
.app-card-sub { font-size: 13px; color: var(--text2); line-height: 1.6; }
.app-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.app-install-btn { background: var(--orange); color: var(--bg); border: 1px solid #000; box-shadow: 0 4px 0 #000; padding: 12px 22px; font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: filter .15s; }
.app-install-btn:hover { filter: brightness(1.12); }
.app-install-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.app-instructions { background: var(--s2); border-left: 2px solid var(--orange); padding: 14px 16px; margin-top: 14px; font-size: 12px; color: var(--text2); line-height: 1.65; display: none; }
.app-instructions.show { display: block; }
.app-instructions strong { color: var(--text); }
@media (max-width:640px) { .app-section { padding: 32px 16px 40px; } .app-card { padding: 18px; gap: 16px; } }

/* legacy banner — keep harmless */
.pwa-banner { display: none; }

/* ACCESSIBILITY: kill decorative motion on request */
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-pill-dot, .status-dot, .mod-dot { animation: none; }
  .ticker-inner { animation: none; }
}