/* ================================================================
   DMR TERMINAL v6.0 — Z31AMB
   RADIO LCD STYLE — inspired by Kenwood/Yaesu mobile radio
================================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  /* chassis colors */
  --ch-bg:    #1a1a1a;
  --ch-bg2:   #222222;
  --ch-brd:   #3a3a3a;
  --ch-brd2:  #4a4a4a;
  --ch-scrw:  #2e2e2e;

  /* LCD display colors */
  --lcd-bg:   #1c2a1e;
  --lcd-bg2:  #162018;
  --lcd-brd:  #0a1a0c;
  --lcd-fg:   #a8e6a0;
  --lcd-fgd:  #4a7a48;
  --lcd-fgm:  #70b868;
  --lcd-hi:   #d4f5cc;
  --lcd-dim:  #2a4028;

  /* PTT bar colors */
  --ptt-grn:  #22cc44;
  --ptt-yel:  #ddcc00;
  --ptt-red:  #ff2222;
  --ptt-bg:   #0e1a0e;

  /* button colors */
  --btn-bg:   #2a2a2a;
  --btn-brd:  #444;
  --btn-hi:   #555;
  --btn-fg:   #cccccc;
  --btn-fgd:  #888;

  /* RX active accent */
  --rx-clr:   #22ff44;
  --rx-glow:  rgba(34,255,68,.3);

  --ffh: 'Share Tech Mono', monospace;
  --ffm: 'Share Tech Mono', monospace;
  --r:   3px;
}

@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes rxglow  { 0%,100%{box-shadow:0 0 6px var(--rx-glow)} 50%{box-shadow:0 0 18px var(--rx-glow), 0 0 36px rgba(34,255,68,.15)} }
@keyframes fadein  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes scan    { 0%{top:-40px} 100%{top:100%} }

html, body {
  min-height:100vh;
  background:#111;
  color:var(--lcd-fg);
  font-family:var(--ffm);
}
body {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.5rem;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, #1a2a1a 0%, #0d0d0d 100%);
}

/* CRT scanlines over everything */
body::before {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 1px, transparent 3px);
}

/* ── CHASSIS ─────────────────────────────────────────────── */
.chassis {
  width:100%; max-width:860px;
  background:linear-gradient(180deg, #2c2c2c 0%, #1e1e1e 40%, #1a1a1a 100%);
  border:2px solid var(--ch-brd);
  border-radius:8px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.8),
    0 2px 0 rgba(255,255,255,.06) inset,
    0 -2px 0 rgba(0,0,0,.4) inset;
  position:relative; overflow:hidden;
}
/* brushed-metal texture */
.chassis::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(90deg, transparent 0px, rgba(255,255,255,.015) 1px, transparent 2px, transparent 4px);
}

/* ── TOP INFO BAR ─────────────────────────────────────────── */
.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem .9rem;
  background:linear-gradient(180deg, #252525 0%, #1e1e1e 100%);
  border-bottom:1px solid var(--ch-brd);
  position:relative; z-index:2;
}
.top-left  { display:flex; align-items:center; gap:.6rem; }
.top-right { display:flex; align-items:center; gap:.8rem; }

.brand {
  font-family:var(--ffh); font-weight:700; font-size:.72rem;
  letter-spacing:.25em; color:#aaa;
}
.badge {
  font-size:.5rem; letter-spacing:.1em; color:#666;
  border:1px solid #3a3a3a; padding:.06rem .28rem; border-radius:2px;
}

.net-indicator { display:flex; align-items:center; gap:.32rem; }
.net-dot { width:7px; height:7px; border-radius:50%; background:#444; flex-shrink:0; transition:background .4s, box-shadow .4s; }
.net-txt { font-size:.6rem; letter-spacing:.16em; color:#666; transition:color .4s; }
.chassis.on .net-dot { background:var(--ptt-grn); box-shadow:0 0 6px var(--ptt-grn); animation:pulse 2s infinite; }
.chassis.on .net-txt { color:var(--lcd-fgm); }

.sig-bars { display:flex; align-items:flex-end; gap:2px; }
.sig-bar  { width:5px; border-radius:1px; background:#333; opacity:.4; transition:background .25s, opacity .25s; }
.sig-bar.on { background:var(--lcd-fgm); opacity:1; }

.utc { font-size:.62rem; color:#666; letter-spacing:.04em; font-variant-numeric:tabular-nums; }

/* ── BODY ROW ─────────────────────────────────────────────── */
.body-row { display:flex; position:relative; z-index:2; }

/* ── SIDE PANELS ──────────────────────────────────────────── */
.side {
  width:90px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:.8rem .5rem;
  background:linear-gradient(180deg, #252525 0%, #1e1e1e 100%);
}
.side.left  { border-right:1px solid var(--ch-brd); }
.side.right { border-left:1px solid var(--ch-brd); }

/* ── ROTARY KNOB ──────────────────────────────────────────── */
.knob-group { display:flex; flex-direction:column; align-items:center; gap:.28rem; }
.knob {
  width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #3a3a3a, #181818);
  border:3px solid #444;
  position:relative; cursor:grab; touch-action:none; user-select:none;
  box-shadow:
    0 4px 12px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -2px 0 rgba(0,0,0,.5) inset;
  transition:border-color .2s;
}
.knob:focus  { outline:none; border-color:#666; }
.knob:active { cursor:grabbing; }
.knob-ring {
  position:absolute; inset:8px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #2a2a2a, #111);
  border:1px solid #3a3a3a;
  transition:transform .06s;
}
.knob-dot {
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:4px; height:10px; background:#aaa; border-radius:2px;
}
.knob-val { font-size:.62rem; color:var(--lcd-fgm); letter-spacing:.06em; }
.knob-lbl { font-size:.5rem; letter-spacing:.16em; color:#666; }

/* ── PF BUTTONS ───────────────────────────────────────────── */
.pf {
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.4rem .3rem;
  border:1px solid var(--btn-brd);
  border-radius:var(--r);
  background:linear-gradient(180deg, #2e2e2e 0%, #222 100%);
  color:var(--btn-fg);
  font-family:var(--ffm); font-size:.6rem; letter-spacing:.1em;
  cursor:pointer; transition:all .15s;
  box-shadow:0 2px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
.pf:hover  { background:linear-gradient(180deg, #383838 0%, #2a2a2a 100%); color:#fff; }
.pf:active { box-shadow:0 0 0 rgba(0,0,0,.5), inset 0 2px 4px rgba(0,0,0,.5); transform:translateY(1px); }
.pf.lit    { background:linear-gradient(180deg, #1a3a1a 0%, #102010 100%); color:var(--ptt-grn); border-color:#2a5a2a; box-shadow:0 0 6px rgba(34,204,68,.3); }
.pf-n      { font-size:.46rem; color:#666; }

/* ── CENTER ───────────────────────────────────────────────── */
.center { flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; padding:.7rem .75rem; }

/* ── LCD DISPLAY ──────────────────────────────────────────── */
.display {
  position:relative; overflow:hidden;
  background:var(--lcd-bg);
  border:2px solid var(--lcd-brd);
  border-radius:4px;
  padding:.55rem .7rem .6rem;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.6),
    inset 0 2px 8px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.8);
  transition:box-shadow .4s;
}
/* LCD inner glow */
.display::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(34,80,34,.18) 0%, transparent 70%);
}
/* CRT scanlines on LCD */
.display::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 2px);
}
.display.rx {
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.6),
    inset 0 2px 8px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.8),
    0 0 12px var(--rx-glow);
  animation:rxglow 2s ease-in-out infinite;
}

/* ── LCD HEADER ROW ───────────────────────────────────────── */
.disp-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.32rem; position:relative; z-index:2;
}
.disp-left  { display:flex; align-items:center; gap:.5rem; }
.disp-right { display:flex; align-items:center; gap:.35rem; }

.disp-label { font-size:.52rem; letter-spacing:.18em; color:var(--lcd-fgd); }
.disp-ch    { font-size:.6rem; letter-spacing:.12em; color:var(--lcd-fgm); }

.disp-status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--lcd-fgd); flex-shrink:0; transition:background .3s;
}
.display.rx .disp-status-dot { background:var(--rx-clr); box-shadow:0 0 6px var(--rx-clr); animation:pulse .8s infinite; }

.disp-status {
  font-size:.65rem; letter-spacing:.2em; font-weight:700;
  color:var(--lcd-fgd); transition:color .3s;
}
.display.rx .disp-status { color:var(--rx-clr); }

/* ── LCD MAIN TG ROW ──────────────────────────────────────── */
.disp-main {
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2;
  padding-bottom:.28rem;
  border-bottom:1px solid var(--lcd-dim);
}
.disp-tg {
  font-size:2rem; font-weight:700; letter-spacing:.04em;
  color:var(--lcd-fg); line-height:1;
  transition:color .3s, text-shadow .3s;
}
.display.rx .disp-tg { color:var(--lcd-hi); text-shadow:0 0 12px rgba(168,230,160,.5); }

.disp-tg-right { display:flex; flex-direction:column; align-items:flex-end; gap:.12rem; }
.disp-name { font-size:.68rem; letter-spacing:.1em; color:var(--lcd-fgm); }
.disp-dn   { font-size:.62rem; letter-spacing:.12em; color:var(--lcd-fgd); }

/* ── LCD CALLSIGN ROW ─────────────────────────────────────── */
.disp-call-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.28rem 0;
  border-bottom:1px solid var(--lcd-dim);
  position:relative; z-index:2;
}
.disp-call-lbl { font-size:.5rem; letter-spacing:.18em; color:var(--lcd-fgd); }
.disp-call {
  font-size:1.05rem; font-weight:700; letter-spacing:.1em;
  color:var(--lcd-fgd); transition:color .3s, text-shadow .3s;
}
.display.rx .disp-call { color:var(--lcd-hi); text-shadow:0 0 8px rgba(168,230,160,.4); }

/* ── LCD BOTTOM BARS ──────────────────────────────────────── */
.disp-foot {
  display:flex; flex-direction:column; gap:.22rem;
  margin-top:.28rem; position:relative; z-index:2;
}
.lcd-bar-row { display:flex; align-items:center; gap:.42rem; }
.lcd-bar-lbl { font-size:.5rem; letter-spacing:.16em; color:var(--lcd-fgd); width:28px; flex-shrink:0; }
.lcd-bar-track {
  flex:1; height:7px;
  background:var(--ptt-bg);
  border:1px solid #0a1a0a;
  border-radius:1px; overflow:hidden;
  position:relative;
}
.lcd-bar-fill {
  height:100%; width:var(--w, 0%);
  border-radius:1px;
  transition:width .15s;
  background:linear-gradient(90deg, var(--ptt-grn) 0%, var(--ptt-grn) 60%, var(--ptt-yel) 78%, var(--ptt-red) 100%);
}
.lcd-bar-fill.vol { background:linear-gradient(90deg, var(--ptt-grn) 0%, var(--ptt-grn) 72%, var(--ptt-yel) 88%, var(--ptt-red) 100%); }
.lcd-bar-right { font-size:.5rem; letter-spacing:.12em; color:var(--lcd-fgd); width:28px; text-align:right; flex-shrink:0; }

/* net status pill */
.disp-net {
  font-size:.52rem; letter-spacing:.16em; color:var(--lcd-fgd); transition:color .3s;
  align-self:flex-end;
}
.display.rx .disp-net, .display.on .disp-net { color:var(--lcd-fgm); }

.zone-ptt   { position:absolute; bottom:0; left:0; right:0; height:2px; background:transparent; transition:background .4s; z-index:4; }
.zone-ptt.rx { background:linear-gradient(90deg, transparent, var(--rx-clr), transparent); }

/* ── LCD CLOCK ─────────────────────────────────────────────── */
.disp-center-head { flex:1; text-align:center; }
.disp-utc {
  font-family:var(--ffm); font-size:.72rem; letter-spacing:.14em;
  color:var(--lcd-fgm); text-shadow:0 0 6px var(--rx-clr);
}

/* ── QSO TIMER ─────────────────────────────────────────────── */
.disp-qso-timer {
  font-family:var(--ffm); font-size:.6rem; letter-spacing:.1em;
  color:var(--rx-clr); margin-left:auto; margin-right:.4rem;
  min-width:3.5rem; text-align:right;
  transition:opacity .3s;
}
.disp-qso-timer:empty { opacity:0; }

/* ── S-METER ───────────────────────────────────────────────── */
.smeter-row {
  display:flex; align-items:center; gap:.4rem;
  padding:.3rem 0 .1rem;
  border-bottom:1px solid var(--lcd-brd);
}
.smeter-lbl {
  font-family:var(--ffm); font-size:.5rem; letter-spacing:.18em; color:var(--lcd-fgd);
  flex-shrink:0;
}
.smeter-track {
  flex:1; position:relative;
  height:10px;
  background:var(--lcd-bg2); border:1px solid var(--lcd-brd); border-radius:1px; overflow:visible;
}
.smeter-fill {
  position:absolute; top:0; left:0; height:100%;
  width:var(--sw, 0%);
  border-radius:1px;
  background:linear-gradient(90deg, #1e7a1e 0%, #2db82d 45%, #aacc00 65%, #f0a800 82%, #cc2200 100%);
  transition:width .1s;
}
.smeter-labels {
  position:absolute; top:calc(100% + 2px); left:0; right:0;
  display:flex; justify-content:space-between;
  pointer-events:none;
}
.smeter-labels span {
  font-family:var(--ffm); font-size:.36rem; color:var(--lcd-fgd); line-height:1;
}
.smeter-val {
  font-family:var(--ffm); font-size:.6rem; letter-spacing:.1em; color:var(--lcd-fgm);
  min-width:2.2rem; text-align:right; flex-shrink:0;
}

/* ── LAST HEARD PANEL ──────────────────────────────────────── */
.lh-panel {
  background:var(--lcd-bg);
  border:1px solid var(--lcd-brd); border-radius:var(--r);
  overflow:hidden;
}
.lh-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.28rem .6rem;
  background:var(--lcd-bg2); border-bottom:1px solid var(--lcd-brd);
}
.lh-ttl { font-family:var(--ffm); font-size:.52rem; letter-spacing:.2em; color:var(--lcd-fgd); }
.lh-tg  { font-family:var(--ffm); font-size:.52rem; letter-spacing:.14em; color:var(--lcd-fgm); }
.lh-list { padding:.2rem .4rem; display:flex; flex-direction:column; gap:1px; }
.lh-empty { font-family:var(--ffm); font-size:.5rem; color:var(--lcd-fgd); padding:.3rem 0; text-align:center; }
.lh-row {
  display:grid; grid-template-columns:1fr auto auto auto;
  align-items:center; gap:.4rem;
  padding:.22rem .2rem;
  border-bottom:1px solid rgba(34,100,34,.08);
  transition:background .2s;
}
.lh-row:last-child { border-bottom:none; }
.lh-row.fresh { background:rgba(34,180,68,.06); }
.lh-cs   { font-family:var(--ffm); font-size:.62rem; letter-spacing:.08em; color:var(--lcd-fgm); }
.lh-tgn  { font-family:var(--ffm); font-size:.5rem;  letter-spacing:.08em; color:var(--lcd-fgd); }
.lh-dur  { font-family:var(--ffm); font-size:.5rem;  letter-spacing:.06em; color:var(--lcd-fgd); min-width:2.2rem; text-align:right; }
.lh-time { font-family:var(--ffm); font-size:.48rem; letter-spacing:.06em; color:#3a5a3a; min-width:2.8rem; text-align:right; }

/* ── SPECTRUM ─────────────────────────────────────────────── */
.spec-wrap { display:flex; flex-direction:column; gap:.35rem; }
.spec-head { display:flex; align-items:center; justify-content:space-between; }
.spec-lbl  { font-size:.56rem; letter-spacing:.2em; color:#666; }
.vu-row    { display:flex; align-items:center; gap:.4rem; }
.vu-l      { font-size:.5rem; color:#555; }
.vu-track  { width:54px; height:5px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:1px; overflow:hidden; }
.vu-fill   { height:100%; width:0; background:linear-gradient(90deg, #1a8a1a, #44cc44); transition:width .06s; border-radius:1px; }

.spec-canvas-box {
  position:relative; width:100%; height:72px;
  border:1px solid #222; border-radius:3px; overflow:hidden;
  background:#0a0f0a;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9);
  transition:border-color .3s;
}
.spec-canvas-box::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(90deg, rgba(34,100,34,.04) 1px, transparent 1px) 0 0/12.5% 100%,
    linear-gradient(0deg,  rgba(34,100,34,.04) 1px, transparent 1px) 0 0/100% 25%;
}
.spec-canvas-box::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:20px;
  pointer-events:none; z-index:2;
  background:linear-gradient(transparent, #0a0f0a);
}
.spec-canvas-box.active { border-color:#1a4a1a; box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 8px rgba(34,200,68,.1); }
#specCanvas { width:100%; height:100%; display:block; position:relative; z-index:1; }

/* ── OP LINE ──────────────────────────────────────────────── */
.op-bar {
  display:flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem;
  background:#111; border:1px solid #252525; border-radius:var(--r);
  transition:border-color .3s;
}
.op-bar.active { border-color:#2a4a2a; }
.op-arrow { color:#444; font-size:.65rem; flex-shrink:0; transition:color .3s; }
.op-bar.active .op-arrow { color:var(--lcd-fgm); }
#opTxt {
  font-size:.6rem; letter-spacing:.07em; color:#555;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:color .3s;
}
.op-bar.active #opTxt { color:var(--lcd-fgm); }

/* ── CTRL BUTTONS ─────────────────────────────────────────── */

/* full-width row sitting directly below body-row */
.bottom-ctrl-row {
  display:flex; align-items:stretch;
  border-top:1px solid var(--ch-brd);
  justify-content:center;
}
/* left group — now just part of the centered group */
.bottom-ctrl-left {
  display:flex; gap:.38rem; align-items:center; justify-content:center;
  padding:.45rem .5rem;
  flex-shrink:0;
}
/* center stretch — hidden, no longer needed for spacing */
.bottom-ctrl-center {
  display:none;
}
/* right group — mirrors left, part of centered group */
.bottom-ctrl-right {
  display:flex; gap:.38rem; align-items:center; justify-content:center;
  padding:.45rem .5rem;
  flex-shrink:0;
}

/* keep old .ctrl-row / .ctrl-group / .ctrl-divider inert (no longer in HTML) */
.ctrl-row, .ctrl-group, .ctrl-divider { display:none; }
.ctrl {
  display:flex; flex-direction:column; align-items:center; gap:.26rem;
  padding:.45rem .3rem;
  border:1px solid var(--btn-brd); border-radius:var(--r);
  background:linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
  color:var(--btn-fgd);
  font-family:var(--ffm); font-size:.56rem; letter-spacing:.1em;
  cursor:pointer; transition:all .15s;
  box-shadow:0 2px 0 rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.04) inset;
}
.ctrl svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ctrl:not(:disabled):hover { background:linear-gradient(180deg, #363636 0%, #282828 100%); color:#ccc; }
.ctrl:active { transform:translateY(1px); box-shadow:none; }
.ctrl.active, .ctrl.on { background:linear-gradient(180deg, #1a3a1a 0%, #102010 100%); color:var(--ptt-grn); border-color:#2a5a2a; box-shadow:0 0 6px rgba(34,204,68,.2); }
.ctrl:disabled { opacity:.25; cursor:not-allowed; }

/* ── POWER BAR ────────────────────────────────────────────── */
.power-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .9rem;
  background:linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
  border-top:1px solid var(--ch-brd);
  position:relative; z-index:2;
}
.power-btn {
  display:flex; align-items:center; gap:.45rem; padding:.4rem 1rem;
  border:1px solid #444; border-radius:var(--r);
  background:linear-gradient(180deg, #2e2e2e 0%, #222 100%);
  color:#999;
  font-family:var(--ffh); font-weight:700; font-size:.62rem; letter-spacing:.24em;
  cursor:pointer; transition:all .2s;
  box-shadow:0 2px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
}
.power-btn:hover { color:#fff; border-color:#666; }
.power-btn:active { transform:translateY(1px); box-shadow:none; }
.power-btn.on { border-color:#2a5a2a; background:linear-gradient(180deg, #1a3a1a 0%, #0e2010 100%); color:var(--ptt-grn); box-shadow:0 0 10px rgba(34,204,68,.25); }
.power-btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

.bm-info { display:flex; align-items:center; gap:.38rem; }
.bm-icon { width:12px; height:12px; fill:none; stroke:#555; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s; }
.chassis.on .bm-icon { stroke:var(--lcd-fgm); animation:pulse 3s infinite; }
.bm-txt  { font-size:.58rem; letter-spacing:.18em; color:#555; transition:color .4s; }
.chassis.on .bm-txt { color:var(--lcd-fgm); }

/* ── STATS BAR ────────────────────────────────────────────── */
.stats-bar { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--ch-brd); background:#111; }
.stats-bar.hidden { display:none; }
.sc { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.55rem .5rem; border-right:1px solid #222; }
.sc:last-child { border-right:none; }
.sl { font-size:.48rem; letter-spacing:.16em; color:#555; }
.sv { font-size:.82rem; font-weight:700; color:var(--lcd-fgm); font-variant-numeric:tabular-nums; }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { margin-top:.7rem; font-size:.5rem; letter-spacing:.2em; color:#444; opacity:.6; text-align:center; }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-bg { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.92); backdrop-filter:blur(4px); }
.modal-bg.open { display:flex; animation:fadein .18s ease; }
.modal-box {
  width:100%; max-width:440px; max-height:88vh;
  background:#1a1a1a; border:1px solid #3a3a3a; border-radius:4px;
  box-shadow:0 0 30px rgba(0,0,0,.8);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; border-bottom:1px solid #2a2a2a; background:#222; flex-shrink:0; }
.modal-ttl { font-size:.68rem; font-weight:700; letter-spacing:.22em; color:var(--lcd-fgm); }
.modal-x   { background:none; border:none; color:#666; font-size:1.1rem; line-height:1; padding:.2rem .4rem; cursor:pointer; transition:color .15s; }
.modal-x:hover { color:#ccc; }
.modal-body { flex:1; overflow-y:auto; padding:.8rem; }
.modal-ftr  { padding:.6rem .9rem; border-top:1px solid #2a2a2a; flex-shrink:0; background:#1e1e1e; }

.tg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.38rem; }
.tg-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:.5rem .3rem; border:1px solid #2a2a2a; border-radius:3px;
  background:#222; cursor:pointer; transition:all .15s;
}
.tg-btn:hover { border-color:#444; background:#2a2a2a; }
.tg-btn.sel   { border-color:#2a5a2a; background:#1a3a1a; box-shadow:0 0 8px rgba(34,204,68,.15); }
.tg-num  { font-size:.72rem; font-weight:700; color:#ccc; letter-spacing:.06em; }
.tg-btn.sel .tg-num { color:var(--ptt-grn); }
.tg-name { font-size:.44rem; color:#666; text-align:center; letter-spacing:.08em; }

.modal-close-btn { width:100%; padding:.42rem; border:1px solid #2a2a2a; border-radius:3px; background:none; color:#777; font-family:var(--ffm); font-size:.56rem; letter-spacing:.16em; cursor:pointer; transition:all .15s; }
.modal-close-btn:hover { border-color:#444; color:#ccc; }

/* ── TOOLS MODAL ──────────────────────────────────────────── */
.tools-box   { max-width:360px; }
.tools-body  { display:flex; flex-direction:column; gap:.5rem; padding:.7rem .9rem; max-height:70vh; overflow-y:auto; }
.tool-row    { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .6rem; border:1px solid #1e1e1e; border-radius:3px; background:#181818; }
.tool-info   { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.tool-name   { font-family:var(--ffm); font-size:.56rem; letter-spacing:.14em; color:var(--lcd-fgm); }
.tool-desc   { font-size:.48rem; color:#555; letter-spacing:.06em; line-height:1.3; }
.tool-btn    { display:flex; align-items:center; gap:.25rem; padding:.3rem .55rem; background:none; border:1px solid #2a2a2a; border-radius:3px; color:#777; font-family:var(--ffm); font-size:.5rem; letter-spacing:.12em; cursor:pointer; white-space:nowrap; transition:all .15s; flex-shrink:0; }
.tool-btn svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }
.tool-btn:hover { border-color:var(--lcd-fgm); color:var(--lcd-fgm); }
.tool-stat   { font-family:var(--ffm); font-size:.6rem; color:var(--grn); letter-spacing:.1em; flex-shrink:0; min-width:50px; text-align:right; }
.tool-section-hdr { font-family:var(--ffm); font-size:.46rem; letter-spacing:.2em; color:#444; padding:.2rem .2rem 0; }
.tool-tg-history { display:flex; flex-wrap:wrap; gap:.3rem; }
.tool-hist-btn  { padding:.28rem .5rem; background:none; border:1px solid #2a2a2a; border-radius:3px; color:#666; font-family:var(--ffm); font-size:.5rem; letter-spacing:.1em; cursor:pointer; transition:all .15s; }
.tool-hist-btn span { color:#444; margin-left:.25rem; }
.tool-hist-btn:hover { border-color:var(--lcd-fgm); color:var(--lcd-fgm); }
.tool-empty  { font-size:.5rem; color:#444; letter-spacing:.1em; }
.tool-kbd-grid { display:flex; flex-direction:column; gap:.22rem; }
.tool-kbd-row  { display:flex; align-items:center; gap:.5rem; }
.tool-kbd-row kbd { font-family:var(--ffm); font-size:.48rem; padding:.1rem .3rem; border:1px solid #333; border-radius:2px; background:#1a1a1a; color:#888; white-space:nowrap; }
.tool-kbd-row span { font-size:.5rem; color:#555; letter-spacing:.06em; }

.qso-head { display:grid; grid-template-columns:1fr 1fr 1fr .7fr; gap:.28rem; padding:.28rem .9rem; border-bottom:1px solid #222; flex-shrink:0; font-size:.46rem; letter-spacing:.12em; color:#555; background:#1a1a1a; }
.qso-scroll { max-height:240px; }
.qso-empty  { display:flex; align-items:center; justify-content:center; height:70px; font-size:.58rem; letter-spacing:.2em; color:#555; }
.qso-row    { display:grid; grid-template-columns:1fr 1fr 1fr .7fr; gap:.28rem; padding:.34rem .9rem; border-bottom:1px solid #1e1e1e; transition:background .1s; }
.qso-row:hover { background:#222; }
.qt { font-size:.54rem; color:#666; }
.qc { font-size:.54rem; color:var(--lcd-fgm); }
.qg { font-size:.54rem; color:#aaa; }
.qd { font-size:.54rem; color:#555; }

.qso-ftr { display:flex; gap:.38rem; }
.qso-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:.28rem; padding:.42rem; border:1px solid #2a2a2a; border-radius:3px; background:none; color:#666; font-family:var(--ffm); font-size:.54rem; letter-spacing:.12em; cursor:pointer; transition:all .15s; }
.qso-btn:hover { border-color:#444; color:#ccc; }
.qso-btn.danger { color:#cc4422; border-color:rgba(204,68,34,.25); }
.qso-btn.danger:hover { background:rgba(204,68,34,.06); }
.qso-btn svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:#1a1a1a; }
::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:#444; }

/* ── old vb/vbars kept for compat ─────────────────────────── */
.vb-row { display:flex; align-items:center; gap:.28rem; }
.vb-lbl { font-size:.5rem; color:#555; }
.vbars  { display:flex; align-items:flex-end; gap:1px; }
.vb     { width:5px; height:8px; border-radius:1px; background:#1a2a1a; }
.vb.on  { background:var(--ptt-grn); }

@media(max-width:580px){
  .side { width:68px!important; padding:.6rem .35rem!important; }
  .center { padding:.5rem!important; }
  .disp-tg { font-size:1.5rem!important; }
  .bottom-ctrl-left, .bottom-ctrl-right { gap:.22rem!important; padding:.4rem .28rem!important; }
  .knob { width:50px!important; height:50px!important; }
  .stats-bar { grid-template-columns:repeat(3,1fr)!important; }
  .sc:nth-child(3){ border-right:none!important; }
  .sc:nth-child(4){ border-top:1px solid #222!important; }
}

/* ================================================================
   THEMES — applied via data-theme on <body>
================================================================ */

/* ── THEME: GREEN (default) ─────────────────────────────────── */
body[data-theme="green"] {
  --lcd-bg:   #1c2a1e; --lcd-bg2: #162018; --lcd-brd: #0a1a0c;
  --lcd-fg:   #a8e6a0; --lcd-fgd: #4a7a48; --lcd-fgm: #70b868;
  --lcd-hi:   #d4f5cc; --lcd-dim: #2a4028;
  --rx-clr:   #22ff44; --rx-glow: rgba(34,255,68,.3);
  --ptt-grn:  #22cc44; --ptt-yel: #ddcc00; --ptt-red: #ff2222;
  --spec-hue: 125;
}

/* ── THEME: BLUE (Police/Aviation) ──────────────────────────── */
body[data-theme="blue"] {
  --lcd-bg:   #0e1a2e; --lcd-bg2: #091422; --lcd-brd: #071224;
  --lcd-fg:   #8ad4f8; --lcd-fgd: #2a5a8a; --lcd-fgm: #4a9acc;
  --lcd-hi:   #c0e8ff; --lcd-dim: #122040;
  --rx-clr:   #22ccff; --rx-glow: rgba(34,200,255,.3);
  --ptt-grn:  #22aaff; --ptt-yel: #aa88ff; --ptt-red: #ff4488;
  --spec-hue: 200;
}
body[data-theme="blue"] .display {
  background:var(--lcd-bg);
}
body[data-theme="blue"] .smeter-fill {
  background:linear-gradient(90deg, #1a4a8a 0%, #2266cc 45%, #44aaff 65%, #aa88ff 82%, #ff4488 100%);
}
body[data-theme="blue"] .lh-row.fresh { background:rgba(34,160,255,.06); }
body[data-theme="blue"] .spec-canvas-box { background:#060c14; }
body[data-theme="blue"] .spec-canvas-box.active { border-color:#1a3a5a; box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 8px rgba(34,150,255,.15); }
body[data-theme="blue"] body { background:radial-gradient(ellipse 80% 60% at 50% 40%, #0e1a2e 0%, #060c18 100%); }

/* ── THEME: AMBER (Vintage) ──────────────────────────────────── */
body[data-theme="amber"] {
  --lcd-bg:   #1e1600; --lcd-bg2: #160e00; --lcd-brd: #1a0e00;
  --lcd-fg:   #e8c460; --lcd-fgd: #7a5a18; --lcd-fgm: #c0960c;
  --lcd-hi:   #fff0a0; --lcd-dim: #3a2800;
  --rx-clr:   #ffcc00; --rx-glow: rgba(255,200,0,.3);
  --ptt-grn:  #ffaa00; --ptt-yel: #ff6600; --ptt-red: #ff2200;
  --spec-hue: 40;
}
body[data-theme="amber"] .display {
  background:var(--lcd-bg);
}
body[data-theme="amber"] .smeter-fill {
  background:linear-gradient(90deg, #7a4400 0%, #cc8800 45%, #ffcc00 65%, #ff7700 82%, #ff2200 100%);
}
body[data-theme="amber"] .lh-row.fresh { background:rgba(255,180,0,.05); }
body[data-theme="amber"] .spec-canvas-box { background:#0e0800; }
body[data-theme="amber"] .spec-canvas-box.active { border-color:#3a2800; box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 8px rgba(255,160,0,.12); }
body[data-theme="amber"] .display::after {
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(80,50,0,.18) 0%, transparent 70%);
}

/* ── THEME: NIGHT OPS RED ────────────────────────────────────── */
body[data-theme="night"] {
  --lcd-bg:   #1e0808; --lcd-bg2: #160404; --lcd-brd: #1a0404;
  --lcd-fg:   #e85050; --lcd-fgd: #6a1a1a; --lcd-fgm: #cc2828;
  --lcd-hi:   #ffaaaa; --lcd-dim: #3a0a0a;
  --rx-clr:   #ff2222; --rx-glow: rgba(255,34,34,.3);
  --ptt-grn:  #ff2222; --ptt-yel: #ff8800; --ptt-red: #ff0000;
  --spec-hue: 0;
  --ch-bg: #111010; --ch-bg2: #181212;
}
body[data-theme="night"] .chassis {
  background:linear-gradient(180deg, #1e1212 0%, #141010 40%, #111010 100%);
}
body[data-theme="night"] .display {
  background:var(--lcd-bg);
}
body[data-theme="night"] .smeter-fill {
  background:linear-gradient(90deg, #5a0a0a 0%, #aa1a1a 45%, #ff2222 65%, #ff8800 82%, #ffff00 100%);
}
body[data-theme="night"] .lh-row.fresh { background:rgba(255,50,50,.05); }
body[data-theme="night"] .spec-canvas-box { background:#0e0404; }
body[data-theme="night"] .spec-canvas-box.active { border-color:#3a0808; box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 8px rgba(255,34,34,.12); }
body[data-theme="night"] .display::after {
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(80,10,10,.18) 0%, transparent 70%);
}
body[data-theme="night"] .pf.lit { background:linear-gradient(180deg,#3a0a0a,#1e0404); color:var(--ptt-red); border-color:#5a1010; box-shadow:0 0 6px rgba(255,34,34,.25); }

/* ── THEME PICKER OVERLAY ────────────────────────────────────── */
.theme-picker {
  display:none; position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,.96); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:1rem;
}
.theme-picker.visible { display:flex; animation:fadein .25s ease; }

.theme-picker-inner {
  width:100%; max-width:700px;
  display:flex; flex-direction:column; gap:1.4rem;
}

.tp-header { text-align:center; }
.tp-title {
  display:block; font-family:'Orbitron', monospace; font-weight:700;
  font-size:1rem; letter-spacing:.3em; color:#ccc; margin-bottom:.3rem;
}
.tp-sub { font-family:'Share Tech Mono', monospace; font-size:.6rem; letter-spacing:.2em; color:#555; }

.tp-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
}
@media(max-width:700px){ .tp-grid { grid-template-columns:repeat(2,1fr); } }

.tp-card {
  display:flex; flex-direction:column; gap:.6rem;
  border:1px solid #2a2a2a; border-radius:6px;
  background:#141414; cursor:pointer;
  transition:border-color .2s, transform .15s, box-shadow .2s;
  overflow:hidden; padding:0;
}
.tp-card:hover { border-color:#555; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.6); }
.tp-card.selected { border-color:#aaa; box-shadow:0 0 16px rgba(255,255,255,.1); }

/* preview mini-LCD */
.tp-preview {
  padding:.6rem .7rem .5rem;
  font-family:'Share Tech Mono', monospace;
  display:flex; flex-direction:column; gap:.2rem;
  position:relative; overflow:hidden;
}
.tp-preview::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);
}
.tp-prev-header { display:flex; justify-content:space-between; font-size:.44rem; letter-spacing:.1em; opacity:.7; }
.tp-prev-tg     { font-size:1.1rem; font-weight:700; letter-spacing:.04em; line-height:1; }
.tp-prev-name   { font-size:.46rem; letter-spacing:.1em; opacity:.7; }
.tp-prev-cs     { font-size:.6rem; letter-spacing:.08em; }
.tp-prev-status { }
.tp-prev-bar {
  height:5px; border-radius:1px; margin-top:.15rem;
  background:linear-gradient(90deg, #22cc44 60%, #ddcc00 78%, #ff2222 100%);
}

/* Green theme preview */
.tp-prev-green  { background:#1c2a1e; color:#a8e6a0; }
/* Blue theme preview */
.tp-prev-blue   { background:#0e1a2e; color:#8ad4f8; }
.tp-prev-bar-blue { background:linear-gradient(90deg, #22aaff 60%, #aa88ff 78%, #ff4488 100%); }
/* Amber theme preview */
.tp-prev-amber  { background:#1e1600; color:#e8c460; }
.tp-prev-bar-amber { background:linear-gradient(90deg, #ffaa00 60%, #ff6600 78%, #ff2200 100%); }
/* Night theme preview */
.tp-prev-night  { background:#1e0808; color:#e85050; }
.tp-prev-bar-night { background:linear-gradient(90deg, #ff2222 60%, #ff8800 78%, #ffff00 100%); }

.tp-card-label {
  padding:.45rem .7rem .55rem;
  display:flex; flex-direction:column; gap:.18rem;
  border-top:1px solid #1e1e1e;
}
.tp-card-name { font-family:'Orbitron', monospace; font-size:.52rem; letter-spacing:.14em; color:#ccc; }
.tp-card-desc { font-family:'Share Tech Mono', monospace; font-size:.45rem; letter-spacing:.08em; color:#555; }

.tp-hint { text-align:center; font-family:'Share Tech Mono',monospace; font-size:.48rem; letter-spacing:.12em; color:#444; }

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────── */
.theme-toggle-btn {
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0;
  border:1px solid #333; border-radius:3px;
  background:none; color:#555; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.theme-toggle-btn:hover { color:#aaa; border-color:#555; }
.theme-toggle-btn svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ================================================================
   NEW THEMES — APCO P25 · HYTERA · KENWOOD · MILITARY GREEN
================================================================ */

/* ── THEME: APCO P25 (Law enforcement cyan) ─────────────────── */
body[data-theme="p25"] {
  --lcd-bg:   #071a1e; --lcd-bg2: #040f12; --lcd-brd: #051418;
  --lcd-fg:   #80f0f4; --lcd-fgd: #1a6a72; --lcd-fgm: #38b8c0;
  --lcd-hi:   #c0faff; --lcd-dim: #0a2a30;
  --rx-clr:   #00e8f8; --rx-glow: rgba(0,232,248,.28);
  --ptt-grn:  #00ccdd; --ptt-yel: #00aacc; --ptt-red: #ff2255;
  --spec-hue: 185;
}
body[data-theme="p25"] .display          { background:var(--lcd-bg); }
body[data-theme="p25"] .chassis          { background:linear-gradient(180deg,#121e22 0%,#0a1418 40%,#070e10 100%); }
body[data-theme="p25"] .smeter-fill      { background:linear-gradient(90deg,#004455 0%,#007a8a 45%,#00ccdd 65%,#00aacc 82%,#ff2255 100%); }
body[data-theme="p25"] .lh-row.fresh     { background:rgba(0,200,220,.06); }
body[data-theme="p25"] .spec-canvas-box  { background:#040c0e; }
body[data-theme="p25"] .spec-canvas-box.active {
  border-color:#0a3a42;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 10px rgba(0,220,240,.14);
}
body[data-theme="p25"] .pf.lit {
  background:linear-gradient(180deg,#0a2a30,#051418);
  color:var(--rx-clr); border-color:#0a3a42;
  box-shadow:0 0 6px rgba(0,220,240,.2);
}

/* ── THEME: HYTERA (Corporate ice white) ────────────────────── */
body[data-theme="hytera"] {
  --lcd-bg:   #0e1620; --lcd-bg2: #091020; --lcd-brd: #0c1428;
  --lcd-fg:   #c8deff; --lcd-fgd: #2a4070; --lcd-fgm: #6080c8;
  --lcd-hi:   #eef4ff; --lcd-dim: #141e34;
  --rx-clr:   #98c8ff; --rx-glow: rgba(152,200,255,.28);
  --ptt-grn:  #4488ff; --ptt-yel: #88aaff; --ptt-red: #ff4466;
  --spec-hue: 220;
}
body[data-theme="hytera"] .display          { background:var(--lcd-bg); }
body[data-theme="hytera"] .chassis          { background:linear-gradient(180deg,#1a1e28 0%,#121620 40%,#0c1018 100%); }
body[data-theme="hytera"] .smeter-fill      { background:linear-gradient(90deg,#1a2a50 0%,#2244aa 45%,#4488ff 65%,#88aaff 82%,#ff4466 100%); }
body[data-theme="hytera"] .lh-row.fresh     { background:rgba(100,160,255,.06); }
body[data-theme="hytera"] .spec-canvas-box  { background:#070c14; }
body[data-theme="hytera"] .spec-canvas-box.active {
  border-color:#1a2a48;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 10px rgba(100,160,255,.12);
}
body[data-theme="hytera"] .disp-tg {
  font-family:'Rajdhani', 'Orbitron', monospace;
  font-weight:700; letter-spacing:.06em;
}
body[data-theme="hytera"] .pf.lit {
  background:linear-gradient(180deg,#141e34,#091020);
  color:var(--rx-clr); border-color:#1e2e50;
  box-shadow:0 0 6px rgba(100,160,255,.18);
}

/* ── THEME: KENWOOD (Marine teal) ───────────────────────────── */
body[data-theme="kenwood"] {
  --lcd-bg:   #0a1e1a; --lcd-bg2: #061410; --lcd-brd: #081a16;
  --lcd-fg:   #7ae8cc; --lcd-fgd: #1a6050; --lcd-fgm: #3ab898;
  --lcd-hi:   #c0fff0; --lcd-dim: #0e2e28;
  --rx-clr:   #00f0c0; --rx-glow: rgba(0,240,192,.28);
  --ptt-grn:  #00cc99; --ptt-yel: #aacc00; --ptt-red: #ff5500;
  --spec-hue: 165;
}
body[data-theme="kenwood"] .display          { background:var(--lcd-bg); }
body[data-theme="kenwood"] .chassis          { background:linear-gradient(180deg,#141e1c 0%,#0c1614 40%,#081010 100%); }
body[data-theme="kenwood"] .smeter-fill      { background:linear-gradient(90deg,#005540 0%,#00996a 45%,#00cc99 65%,#aacc00 82%,#ff5500 100%); }
body[data-theme="kenwood"] .lh-row.fresh     { background:rgba(0,200,160,.06); }
body[data-theme="kenwood"] .spec-canvas-box  { background:#040e0a; }
body[data-theme="kenwood"] .spec-canvas-box.active {
  border-color:#0a3028;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 10px rgba(0,200,160,.12);
}
body[data-theme="kenwood"] .pf.lit {
  background:linear-gradient(180deg,#0e2e28,#061410);
  color:var(--rx-clr); border-color:#0e3a30;
  box-shadow:0 0 6px rgba(0,200,160,.2);
}

/* ── THEME: MILITARY GREEN (Tactical field ops) ──────────────── */
body[data-theme="military"] {
  --lcd-bg:   #101808; --lcd-bg2: #0a1005; --lcd-brd: #0c1406;
  --lcd-fg:   #90c850; --lcd-fgd: #3a5818; --lcd-fgm: #608830;
  --lcd-hi:   #c8f070; --lcd-dim: #182808;
  --rx-clr:   #88dd22; --rx-glow: rgba(136,221,34,.28);
  --ptt-grn:  #55aa00; --ptt-yel: #aaaa00; --ptt-red: #dd2200;
  --spec-hue: 90;
  --ffm: 'Share Tech Mono', monospace;
}
body[data-theme="military"] .display          { background:var(--lcd-bg); }
body[data-theme="military"] .chassis          {
  background:linear-gradient(180deg,#1c2210 0%,#141a0c 40%,#0e1208 100%);
  border-color:#2a3618;
}
body[data-theme="military"] .smeter-fill      { background:linear-gradient(90deg,#224400 0%,#447700 45%,#88dd22 65%,#aaaa00 82%,#dd2200 100%); }
body[data-theme="military"] .lh-row.fresh     { background:rgba(100,180,20,.06); }
body[data-theme="military"] .spec-canvas-box  { background:#060a02; }
body[data-theme="military"] .spec-canvas-box.active {
  border-color:#1a2a08;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9), 0 0 10px rgba(100,180,20,.12);
}
body[data-theme="military"] .disp-tg { font-family:'Share Tech Mono', monospace; letter-spacing:.1em; }
body[data-theme="military"] .pf.lit {
  background:linear-gradient(180deg,#182808,#0a1005);
  color:var(--rx-clr); border-color:#223610;
  box-shadow:0 0 6px rgba(100,180,20,.2);
}
body[data-theme="military"] .top-bar {
  border-bottom-color:#1a2408;
}

/* New theme preview swatches — keep at end */
.tp-prev-p25      { background:#071a1e; color:#80f0f4; }

/* ================================================================
   USER INFO CARD · QRZ LINK · MULTI-TG MONITOR
================================================================ */

/* ── Callsign QRZ link inside LCD display ─────────────────── */
.cs-link {
  color:inherit; text-decoration:none;
  border-bottom:1px dotted var(--lcd-fgd);
  cursor:pointer; transition:color .2s, border-color .2s;
}
.cs-link:hover { color:var(--lcd-hi); border-bottom-color:var(--lcd-fgm); }

/* ── User info card (slides in below LCD on RX) ───────────── */
.user-info-card {
  background:var(--lcd-bg2);
  border:1px solid var(--lcd-brd); border-radius:var(--r);
  padding:.32rem .6rem;
  display:none; gap:.22rem; flex-direction:column;
  animation:fadein .2s ease;
  overflow:hidden;
}
.user-info-card.visible { display:flex; }
.ui-row { display:flex; align-items:baseline; gap:.5rem; }
.ui-lbl {
  font-family:var(--ffm); font-size:.44rem; letter-spacing:.18em;
  color:var(--lcd-fgd); flex-shrink:0; width:1.8rem;
}
.ui-val {
  font-family:var(--ffm); font-size:.6rem; letter-spacing:.08em;
  color:var(--lcd-fgm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ui-qrz {
  display:inline-block; align-self:flex-end;
  font-family:var(--ffm); font-size:.44rem; letter-spacing:.14em;
  color:var(--lcd-fgd); border:1px solid var(--lcd-brd);
  padding:.1rem .4rem; border-radius:2px; text-decoration:none;
  transition:color .2s, border-color .2s;
}
.ui-qrz:hover { color:var(--lcd-hi); border-color:var(--lcd-fgm); }

/* ── Multi-TG monitor panel ───────────────────────────────── */
.mon-panel {
  background:var(--lcd-bg);
  border:1px solid var(--lcd-brd); border-radius:var(--r);
  overflow:hidden;
}
.mon-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.28rem .6rem;
  background:var(--lcd-bg2); border-bottom:1px solid var(--lcd-brd);
}
.mon-ttl { font-family:var(--ffm); font-size:.52rem; letter-spacing:.2em; color:var(--lcd-fgd); }
.mon-sub { font-family:var(--ffm); font-size:.44rem; letter-spacing:.14em; color:#2a4828; }

.mon-list { padding:.2rem .4rem; display:flex; flex-direction:column; gap:1px; }
.mon-row {
  display:grid; grid-template-columns:10px 3.2rem 1fr 2.4rem 2rem;
  align-items:center; gap:.35rem;
  padding:.24rem .2rem;
  border-bottom:1px solid rgba(34,100,34,.08);
  transition:background .25s;
}
.mon-row:last-child { border-bottom:none; }
.mon-row.mon-active { background:rgba(34,200,68,.05); animation:fadein .2s ease; }

.mon-dot {
  width:6px; height:6px; border-radius:50%;
  background:#2a3a28; border:1px solid #1a2a18;
  transition:background .3s, box-shadow .3s;
  flex-shrink:0;
}
.mon-dot.active {
  background:var(--rx-clr);
  box-shadow:0 0 5px var(--rx-glow);
  animation:pulse 1s infinite;
}
.mon-tgid   { font-family:var(--ffm); font-size:.52rem; letter-spacing:.06em; color:var(--lcd-fgd); }
.mon-tgname { font-family:var(--ffm); font-size:.52rem; letter-spacing:.08em; color:var(--lcd-fgm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-cs     { font-family:var(--ffm); font-size:.52rem; letter-spacing:.06em; color:var(--lcd-fg);  text-align:right; }
.mon-stat   { font-family:var(--ffm); font-size:.44rem; letter-spacing:.1em;  color:var(--lcd-fgd); text-align:right; }
.mon-row.mon-active .mon-stat { color:var(--rx-clr); }

/* ================================================================
   PWA INSTALL / UPDATE BANNERS
================================================================ */
#installBanner,
#updateBanner,
#iosBanner {
  position:fixed; bottom:0; left:0; right:0; z-index:8000;
  padding:.6rem;
  pointer-events:none;
}

.pwa-banner {
  display:flex; align-items:center; gap:.75rem;
  background:#0e160e; border:1px solid #1a3a1a;
  border-radius:6px 6px 0 0;
  padding:.65rem .8rem;
  box-shadow:0 -4px 24px rgba(0,0,0,.7);
  pointer-events:all;
  /* slide-up animation */
  transform:translateY(120%); opacity:0;
  transition:transform .32s cubic-bezier(.22,.68,0,1.2), opacity .25s ease;
}
.pwa-banner.pwa-banner-in  { transform:translateY(0); opacity:1; }
.pwa-banner.pwa-banner-out { transform:translateY(120%); opacity:0; }

.pwa-update-banner { border-color:#3a2a0a; background:#120e04; }
.pwa-ios-banner    { border-color:#0a2a3a; background:#040e14; }

.pwa-icon svg {
  width:28px; height:28px; fill:var(--rx-clr); flex-shrink:0;
  filter:drop-shadow(0 0 5px var(--rx-glow));
}
.pwa-text { flex:1; display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.pwa-title {
  font-family:var(--ffm); font-size:.56rem; letter-spacing:.18em; color:var(--lcd-fgm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-sub {
  font-family:var(--ffm); font-size:.46rem; letter-spacing:.1em; color:var(--lcd-fgd);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-sub strong { color:var(--lcd-fgm); }

.pwa-btn {
  font-family:var(--ffm); font-size:.52rem; letter-spacing:.14em;
  border:1px solid; border-radius:3px; cursor:pointer;
  background:none; white-space:nowrap; flex-shrink:0;
  transition:color .2s, border-color .2s, background .2s;
  padding:.32rem .7rem;
}
.pwa-install {
  color:var(--rx-clr); border-color:var(--rx-clr);
}
.pwa-install:hover { background:rgba(34,204,68,.08); }
.pwa-dismiss {
  color:var(--lcd-fgd); border-color:var(--lcd-brd);
  font-size:.7rem; padding:.2rem .5rem;
}
.pwa-dismiss:hover { color:var(--lcd-fgm); border-color:var(--lcd-fgm); }

/* ================================================================
   SCAN MODE · FAVORITES · CUSTOM TG
================================================================ */

/* ── Scan LED in LCD call-row ─────────────────────────────── */
.scan-led-wrap {
  display:flex; align-items:center; gap:.2rem;
  margin-left:auto; margin-right:.3rem;
}
.scan-led {
  width:5px; height:5px; border-radius:50%;
  background:#1a2a1a; border:1px solid #0e1a0e;
  transition:background .2s, box-shadow .2s;
}
.scan-led.on {
  background:var(--rx-clr);
  box-shadow:0 0 5px var(--rx-glow);
  animation:pulse .7s infinite;
}
.scan-led-txt {
  font-family:var(--ffm); font-size:.4rem; letter-spacing:.16em;
  color:var(--lcd-fgd); transition:color .2s;
}
.scan-led.on + .scan-led-txt { color:var(--rx-clr); }

/* scan active — LCD border flashes */
.display.scan {
  animation:rxglow .8s infinite;
  border-color:var(--rx-clr) !important;
}

/* ── SCAN button state ────────────────────────────────────── */
.ctrl#btnScan.active {
  color:var(--rx-clr);
  border-color:var(--rx-clr);
  box-shadow:0 0 8px var(--rx-glow);
}

/* ── TG modal — section labels + subgrid + star buttons ──── */
.tg-grid { display:flex; flex-direction:column; gap:.5rem; }

.tg-section-label {
  font-family:var(--ffm); font-size:.44rem; letter-spacing:.22em; color:var(--lcd-fgd);
  padding:.18rem 0 .1rem; border-bottom:1px solid #222;
}

.tg-subgrid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.38rem;
}

.tg-btn-wrap {
  position:relative; display:flex;
}
.tg-btn-wrap .tg-btn {
  flex:1; padding-right:1.6rem;  /* room for star */
}

/* star button */
.tg-star {
  position:absolute; top:50%; right:.3rem; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0;
  background:none; border:none; cursor:pointer;
  color:#333; transition:color .15s, transform .15s;
}
.tg-star svg {
  width:11px; height:11px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.tg-star:hover { color:#777; transform:translateY(-50%) scale(1.2); }
.tg-star.active { color:#ffcc00; }
.tg-star.active svg { fill:#ffcc00; stroke:#ffcc00; }

/* fav TG button highlight */
.tg-btn.fav { border-color:#2a2a18; }

/* ── TG modal footer — custom TG form ────────────────────── */
.tg-ftr {
  display:flex; flex-direction:column; gap:.45rem;
}
.custom-tg-form {
  display:flex; align-items:center; gap:.4rem;
}
.custom-tg-lbl {
  font-family:var(--ffm); font-size:.46rem; letter-spacing:.16em; color:var(--lcd-fgd);
  white-space:nowrap; flex-shrink:0;
}
.custom-tg-input {
  flex:1; min-width:0;
  padding:.3rem .5rem;
  background:#111; border:1px solid #333; border-radius:3px;
  color:var(--lcd-fgm); font-family:var(--ffm); font-size:.62rem; letter-spacing:.08em;
  outline:none; transition:border-color .15s;
  -moz-appearance:textfield;
}
.custom-tg-input::-webkit-inner-spin-button,
.custom-tg-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.custom-tg-input:focus { border-color:var(--lcd-fgm); }
.custom-tg-input::placeholder { color:#444; }
.custom-tg-btn {
  padding:.3rem .7rem;
  background:none; border:1px solid #333; border-radius:3px;
  color:var(--lcd-fgm); font-family:var(--ffm); font-size:.5rem; letter-spacing:.14em;
  cursor:pointer; flex-shrink:0; transition:border-color .15s, color .15s;
}
.custom-tg-btn:hover { border-color:var(--lcd-fgm); color:var(--lcd-hi); }
.tp-prev-bar-p25  { background:linear-gradient(90deg,#00ccdd 60%,#00aacc 78%,#ff2255 100%); }

.tp-prev-hytera      { background:#0e1620; color:#c8deff; }
.tp-prev-bar-hytera  { background:linear-gradient(90deg,#4488ff 60%,#88aaff 78%,#ff4466 100%); }

.tp-prev-kenwood      { background:#0a1e1a; color:#7ae8cc; }
.tp-prev-bar-kenwood  { background:linear-gradient(90deg,#00cc99 60%,#aacc00 78%,#ff5500 100%); }

.tp-prev-military      { background:#101808; color:#90c850; }
.tp-prev-bar-military  { background:linear-gradient(90deg,#55aa00 60%,#aaaa00 78%,#dd2200 100%); }