/* ── Reset & tokens ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* panel family */
  --bg-hover:    #1b476c;
  --border:      rgba(116,174,224,.24);

  /* text */
  --text:        #f0f4f8;
  --text-muted:  #9fbdd8;
  --text-dim:    #7090ad;

  /* amber accent — matches outdoordx.org */
  --amber:       #f5a623;
  --amber-dim:   rgba(245,166,35,.15);

  /* source palette */
  --pota:        #4ade80;
  --pota-dim:    rgba(74,222,128,.12);
  --sota:        #facc15;
  --sota-dim:    rgba(250,204,21,.12);
  --wwff:        #60a5fa;
  --wwff-dim:    rgba(96,165,250,.12);
  --wwbota:      #c084fc;
  --wwbota-dim:  rgba(192,132,252,.12);

  /* pastel accents for mode / continent filters */
  --pastel-cyan:   #7dd3fc;
  --pastel-cyan-d: rgba(125,211,252,.18);
  --pastel-green:  #86efac;
  --pastel-green-d:rgba(134,239,172,.17);
  --pastel-amber:  #fde68a;
  --pastel-amber-d:rgba(253,230,138,.2);
  --pastel-rose:   #f9a8d4;
  --pastel-rose-d: rgba(249,168,212,.18);
  --pastel-lilac:  #c4b5fd;
  --pastel-lilac-d:rgba(196,181,253,.2);
  --pastel-mint:   #99f6e4;
  --pastel-mint-d: rgba(153,246,228,.18);
  --pastel-peach:  #fdba74;
  --pastel-peach-d:rgba(253,186,116,.2);
  --pastel-cyan-t: #4ea3c7;
  --pastel-rose-t: #cc78a4;
  --pastel-mint-t: #5fbdae;
  --pastel-lilac-t:#8f81d8;
  --pastel-amber-t:#c8a14a;
  --pastel-peach-t:#c88d52;
  --pastel-green-t:#58bc7e;
  --pastel-sa-t:   #45b287;

  /* state */
  --flash-new:   rgba(74,222,128,.08);
  --flash-upd:   rgba(245,166,35,.08);

  --conn-ok:     #4ade80;
  --conn-err:    #f87171;
  --conn-wait:   #f5a623;

  /* light table surface */
  --table-bg:    #edf2ef;
  --table-text:  #17261f;

  --radius:      8px;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Consolas', monospace;
}

html { scroll-behavior: smooth; }

body {
  background:
    linear-gradient(180deg, #113e65 0%, #0d3252 22%, #0a2944 46%, #0a2f3a 72%, #0d4d35 100%);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 138px;
  background:
    radial-gradient(110% 230% at 50% -20%, rgba(84,150,205,.2) 0%, rgba(84,150,205,0) 60%),
    rgba(6,26,43,.42);
}

.hero-scene-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  opacity: .86;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.logo-dx { color: var(--amber); }

.conn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--conn-wait);
  flex-shrink: 0;
  transition: background .4s;
}

.conn-dot.ok    { background: var(--conn-ok); box-shadow: 0 0 8px var(--conn-ok); }
.conn-dot.error { background: var(--conn-err); }
.conn-dot.wait  { background: var(--conn-wait); }


/* ── Dashboard section ────────────────────────────────────────────────────── */
#spots {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* ── Filters ──────────────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(8,30,50,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120,180,230,.14);
  box-shadow:
    inset 0 1px 0 rgba(187,228,255,.08),
    0 2px 16px rgba(0,0,0,.18);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.filter-group + .filter-group {
  padding-left: 12px;
  border-left: 1px solid rgba(156,209,255,.1);
}

.filter-group label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(159,189,216,.7);
  line-height: 1;
}

.filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(173,213,243,.5);
  box-shadow: 0 0 0 1px rgba(7,28,45,.35) inset;
  opacity: .92;
}

.filter-label-source::before {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #6cc1ff 0%, #1c6fa7 72%);
}

.filter-label-mode::before {
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 2px, rgba(166,219,255,.7) 2px 3px, transparent 3px 5px, rgba(166,219,255,.7) 5px 6px, transparent 6px),
    linear-gradient(180deg, #1b5d8e 0%, #174b72 100%);
}

.filter-label-continent::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, #8bd4ff 0%, #226d9d 58%, #19567d 100%);
}

.filter-label-band::before {
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0 1px, transparent 1px 3px, rgba(255,255,255,.75) 3px 4px, transparent 4px 6px, rgba(255,255,255,.75) 6px 7px, transparent 7px),
    linear-gradient(180deg, #1f7355 0%, #15523d 100%);
}

.toggle-group {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
}

.toggle {
  padding: 3px 11px;
  border: 1px solid rgba(156,209,255,.28);
  border-radius: 100px;
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .12s, box-shadow .16s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.18);
  white-space: nowrap;
}

.toggle:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 8px rgba(0,0,0,.22);
}

.toggle:active { transform: translateY(0); }

/* active state uses source color when available, amber otherwise */
.toggle.active {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: rgba(245,166,35,.4);
  box-shadow: 0 0 10px rgba(245,166,35,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.toggle.active.pota {
  background: var(--pota-dim);
  color: var(--pota);
  border-color: rgba(74,222,128,.4);
  box-shadow: 0 0 10px rgba(74,222,128,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.toggle.active.sota {
  background: var(--sota-dim);
  color: var(--sota);
  border-color: rgba(250,204,21,.4);
  box-shadow: 0 0 10px rgba(250,204,21,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.toggle.active.wwff {
  background: var(--wwff-dim);
  color: var(--wwff);
  border-color: rgba(96,165,250,.4);
  box-shadow: 0 0 10px rgba(96,165,250,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
.toggle.active.wwbota {
  background: var(--wwbota-dim);
  color: var(--wwbota);
  border-color: rgba(192,132,252,.4);
  box-shadow: 0 0 10px rgba(192,132,252,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

/* mode-specific pastel active colors */
#filter-mode .toggle.active[data-value="cw"] {
  background: var(--pastel-cyan-d);
  color: var(--pastel-cyan);
  border-color: rgba(125,211,252,.45);
  box-shadow: 0 0 10px rgba(125,211,252,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
#filter-mode .toggle.active[data-value="ssb"] {
  background: var(--pastel-rose-d);
  color: var(--pastel-rose);
  border-color: rgba(249,168,212,.45);
  box-shadow: 0 0 10px rgba(249,168,212,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
#filter-mode .toggle.active[data-value="fm"] {
  background: var(--pastel-mint-d);
  color: var(--pastel-mint);
  border-color: rgba(153,246,228,.45);
  box-shadow: 0 0 10px rgba(153,246,228,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
#filter-mode .toggle.active[data-value="digi"] {
  background: var(--pastel-lilac-d);
  color: var(--pastel-lilac);
  border-color: rgba(196,181,253,.45);
  box-shadow: 0 0 10px rgba(196,181,253,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
#filter-mode .toggle.active[data-value="other"] {
  background: var(--pastel-amber-d);
  color: var(--pastel-amber);
  border-color: rgba(253,230,138,.45);
  box-shadow: 0 0 10px rgba(253,230,138,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

/* continent-specific pastel active colors */
#filter-continent .toggle.active[data-value="AF"] {
  background: var(--pastel-peach-d);
  color: var(--pastel-peach);
  border-color: rgba(253,186,116,.45);
}
#filter-continent .toggle.active[data-value="AN"] {
  background: var(--pastel-cyan-d);
  color: var(--pastel-cyan);
  border-color: rgba(125,211,252,.45);
}
#filter-continent .toggle.active[data-value="AS"] {
  background: var(--pastel-rose-d);
  color: var(--pastel-rose);
  border-color: rgba(249,168,212,.45);
}
#filter-continent .toggle.active[data-value="EU"] {
  background: var(--pastel-lilac-d);
  color: var(--pastel-lilac);
  border-color: rgba(196,181,253,.45);
}
#filter-continent .toggle.active[data-value="NA"] {
  background: var(--pastel-green-d);
  color: var(--pastel-green);
  border-color: rgba(134,239,172,.45);
}
#filter-continent .toggle.active[data-value="OC"] {
  background: var(--pastel-mint-d);
  color: var(--pastel-mint);
  border-color: rgba(153,246,228,.45);
}
#filter-continent .toggle.active[data-value="SA"] {
  background: rgba(110,231,183,.2);
  color: #6ee7b7;
  border-color: rgba(110,231,183,.5);
  box-shadow: 0 0 10px rgba(110,231,183,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
#filter-continent .toggle.active[data-value="UNK"] {
  background: var(--pastel-amber-d);
  color: var(--pastel-amber);
  border-color: rgba(253,230,138,.45);
}

select {
  padding: 4px 9px;
  background: linear-gradient(180deg, rgba(22,56,86,.88) 0%, rgba(14,40,62,.94) 100%);
  border: 1px solid rgba(156,209,255,.28);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.2);
  min-height: 28px;
}

select:hover { border-color: rgba(255,255,255,.28); }
select:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(245,166,35,.14); }

.filter-group--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.checkbox-label input { cursor: pointer; accent-color: var(--amber); }

.btn-clear {
  padding: 4px 12px;
  border: 1px solid rgba(156,209,255,.28);
  border-radius: 100px;
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .12s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  white-space: nowrap;
}

.btn-clear:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.btn-clear:active { transform: translateY(0); }

/* Compact desktop only; switch representation on smaller viewports */
@media (max-width: 1100px) {
  .filters {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    overflow: visible;
  }

  .filter-group {
    gap: 5px;
  }

  .filter-group + .filter-group {
    padding-left: 0;
    border-left: none;
  }

  .toggle-group {
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-group--inline {
    margin-left: auto;
    align-items: center;
  }
}

/* ── Stats bar ────────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 24px;
  background: rgba(6,26,42,.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(80,140,180,.14);
  font-size: 12px;
  font-weight: 500;
}

.stat-total { color: var(--text); }

.stat-sep {
  flex: 1;
}

.stat-source         { color: var(--text-muted); }
.stat-source b       { font-weight: 700; }
.stat-source.pota b  { color: var(--pota); }
.stat-source.sota b  { color: var(--sota); }
.stat-source.wwff b  { color: var(--wwff); }
.stat-source.wwbota b{ color: var(--wwbota); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  flex: 1;
  background:
    radial-gradient(140% 40% at 50% 0%, rgba(120,180,160,.1) 0%, transparent 60%),
    linear-gradient(180deg, #edf2ef 0%, #e8ede9 100%);
  border-top: 1px solid rgba(30,80,55,.12);
}

tbody { background: var(--table-bg); }

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.head-main th {
  position: sticky;
  top: 0;
  background: rgba(13,48,72,.88);
  color: rgba(160,195,220,.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(100,160,210,.18);
  text-align: left;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.head-main th.sortable {
  cursor: pointer;
  user-select: none;
}

.head-main th.sortable::after {
  content: " \2195";
  opacity: .35;
}

.head-main th.sortable.sort-asc::after {
  content: " \2191";
  opacity: .85;
}

.head-main th.sortable.sort-desc::after {
  content: " \2193";
  opacity: .85;
}

.head-search th {
  background: rgba(14,50,75,.66);
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
}

.head-search input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(84,133,168,.5);
  border-radius: 5px;
  background: rgba(8,31,49,.35);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 11px;
}

.head-search input::placeholder { color: rgba(190,214,231,.6); }
.head-search input:focus { outline: none; border-color: var(--amber); }

.col-time     { width: 72px; }
.col-source   { width: 72px; }
.col-activator{ width: 154px; }
.col-freq     { width: 92px; }
.col-band     { width: 58px; }
.col-mode     { width: 62px; }
.col-ref      { width: 142px; }
.col-name     { width: auto; }
.col-cont     { width: 54px; }

tbody tr {
  border-bottom: 1px solid rgba(30,70,55,.10);
  background: #f8fbf9;
  transition: background .14s, box-shadow .14s;
  position: relative;
}

tbody tr:nth-child(even) { background: #eef4f0; }
tbody tr:hover {
  background: rgba(255,255,255,1);
  box-shadow:
    inset 3px 0 0 var(--pota),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(100,160,130,.15),
    0 2px 8px rgba(30,80,55,.06);
}

tbody td {
  padding: 10px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: var(--table-text);
  font-size: 13px;
}

/* tertiary metadata — smallest, most muted */
td.col-time {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #5a7870;
  letter-spacing: .01em;
}

td.col-band {
  font-size: 12px;
  font-weight: 600;
  color: #2e5248;
  letter-spacing: .02em;
  padding-left: 8px;
  padding-right: 8px;
}

td.col-mode {
  font-size: 11.5px;
  color: #5a7870;
  font-weight: 500;
  letter-spacing: .03em;
  padding-left: 8px;
  padding-right: 8px;
}

td.col-cont {
  font-size: 11px;
  font-weight: 600;
  color: #7a9890;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 7px;
  padding-right: 7px;
}

/* reference — secondary, monospace-adjacent */
td.col-ref {
  font-size: 12px;
  font-weight: 500;
  color: #3d6058;
  letter-spacing: .01em;
  padding-left: 8px;
  padding-right: 9px;
}

.ref-link {
  color: #214f7a;
  text-decoration: none;
  font-weight: 600;
}

.ref-link:hover {
  color: #c27a00;
  text-decoration: underline;
}

.col-name {
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
  color: #3a5250;
  line-height: 1.35;
}

/* source badge */
.badge {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}

.badge-pota   { color: #18a84c; }
.badge-sota   { color: #a07c00; }
.badge-wwff   { color: #2563c0; }
.badge-wwbota { color: #8b3fcf; }

/* table text-only palette mapping for mode / continent */
td.col-mode.mode-cw    { color: var(--pastel-cyan-t); }
td.col-mode.mode-ssb   { color: var(--pastel-rose-t); }
td.col-mode.mode-fm    { color: var(--pastel-mint-t); }
td.col-mode.mode-digi  { color: var(--pastel-lilac-t); }
td.col-mode.mode-other { color: var(--pastel-amber-t); }
td.col-mode.mode-ft8,
td.col-mode.mode-ft4,
td.col-mode.mode-rtty,
td.col-mode.mode-psk,
td.col-mode.mode-js8,
td.col-mode.mode-js8call { color: var(--pastel-lilac-t); }

td.col-cont.cont-af  { color: var(--pastel-peach-t); }
td.col-cont.cont-an  { color: var(--pastel-cyan-t); }
td.col-cont.cont-as  { color: var(--pastel-rose-t); }
td.col-cont.cont-eu  { color: var(--pastel-lilac-t); }
td.col-cont.cont-na  { color: var(--pastel-green-t); }
td.col-cont.cont-oc  { color: var(--pastel-mint-t); }
td.col-cont.cont-sa  { color: var(--pastel-sa-t); }
td.col-cont.cont-unk { color: var(--pastel-amber-t); }

/* frequency — primary technical data */
th.col-freq,
td.col-freq {
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

th.col-source,
td.col-source,
th.col-band,
th.col-mode {
  padding-left: 8px;
  padding-right: 8px;
}

td.col-freq {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #1a4a42;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* activator — primary identifier, largest & boldest */
.act-link {
  font-size: 14px;
  font-weight: 700;
  color: #0f261e;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: visible;
}
.act-link:hover { color: #b36e00; text-decoration: none; }

.act-flag {
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
}

/* QRT */
.status-qrt td              { color: #a0b0ae; }
.status-qrt .badge          { opacity: .35; }
.status-qrt .act-link       { text-decoration: line-through; color: #a0b0ae; font-weight: 500; }

/* flash */
@keyframes flash-new { 0%,100% { background: transparent; } 40% { background: var(--flash-new); } }
@keyframes flash-upd { 0%,100% { background: transparent; } 40% { background: var(--flash-upd); } }

.flash-new { animation: flash-new 1s ease; }
.flash-upd { animation: flash-upd 1s ease; }

/* empty */
.empty-row td {
  text-align: center;
  color: #48615e;
  padding: 72px 24px;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(239,244,241,.88) 0%, rgba(231,238,234,.92) 100%);
}

tr.hidden { display: none; }

/* ── Credit note ──────────────────────────────────────────────────────────── */
.credit-note {
  text-align: center;
  padding: 10px 12px;
  background: rgba(8,33,52,.64);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
}

.credit-note a {
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
}

.credit-note a:hover { text-decoration: underline; }
.credit-heart { color: var(--amber); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(8,33,52,.74);
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.footer-logo { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet: ≤ 900px */
@media (max-width: 900px) {
  nav { padding: 14px 16px; }

  .filters {
    gap: 8px;
    padding: 8px 10px;
  }

  .filter-group {
    padding: 6px 8px;
    border: 1px solid rgba(137,186,226,.16);
    border-radius: 10px;
    background: rgba(7,31,51,.52);
  }

  .filter-group + .filter-group {
    padding-left: 8px;
    border-left: none;
  }

  .toggle { padding: 3px 9px; font-size: 10.5px; }
  select { font-size: 10.5px; min-height: 26px; }

  .filter-group--inline {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    border: none;
    background: transparent;
    padding: 0;
  }

  .stats-bar { padding: 6px 16px; gap: 10px; }
  .stat-sep  { display: none; }

  .col-cont,
  .col-band { display: none; }

  .hero { min-height: 120px; }
  .hero-scene-top { height: 106px; }

  .credit-note { font-size: 12px; }

  footer { padding: 12px 16px; }
}

/* Phone: ≤ 600px */
@media (max-width: 600px) {
  /* Nav */
  nav { padding: 12px 14px; }
  .logo { font-size: 17px; }
  #conn-label { display: none; }   /* keep the dot, drop the text */

  /* Filters: tighter, labels hidden to save height */
  .filters {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px;
    gap: 8px;
  }

  .filter-group {
    width: 100%;
    padding: 7px 8px;
    border-radius: 9px;
  }

  .filter-group label { display: inline-flex; }
  .filter-group + .filter-group { padding-left: 8px; }
  .filter-group--inline {
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .toggle { padding: 4px 9px; font-size: 10px; }
  select  { font-size: 10px; padding: 4px 7px; min-height: 26px; max-width: 100%; }

  /* Stats: wrap into two lines */
  .stats-bar {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 5px 12px;
    font-size: 11px;
  }

  /* Table: show only the essentials */
  .col-name, .col-mode { display: none; }

  /* Mobile-only: tighten key columns to free space for reference search */
  .col-freq      { width: 82px; }
  .col-activator { width: 136px; }
  .col-ref       { width: 128px; }

  th.col-freq, td.col-freq,
  th.col-activator, td.col-activator,
  th.col-ref, td.col-ref {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Tighten row padding */
  tbody td  { padding: 6px 8px; }
  .head-main th { padding: 7px 8px; }
  .head-search th { padding: 3px 5px 5px; }
  .head-search input { padding: 3px 5px; font-size: 10px; }

  /* Less padding on the "waiting" message */
  .empty-row td { padding: 30px 16px; font-size: 13px; }

  .hero { min-height: 106px; }
  .hero-scene-top { height: 90px; }

  .credit-note {
    padding: 8px 10px;
    font-size: 11px;
  }

  /* Footer stacks */
  footer { flex-direction: column; gap: 4px; text-align: center; padding: 10px 14px; }
}