/**
 * temp_all.css — CSS complet extrait de index.php
 * Fichier temporaire pour tester index_new.php sur betadx.f1led.fr
 * Remplace tous les modules CSS (themes.css, main.css, rig.css, rbn.css,
 * terminal.css) le temps que la structure modulaire soit validée.
 *
 * À supprimer une fois les modules CSS individuels remplis et validés.
 * Source : index.php lignes 167–3072
 */

/* ═══════════════════════════════════════
   VARIABLES
═══════════════════════════════════════ */
:root,
body[data-theme="dark"] {
  --bg:       #141c2e;
  --bg2:      #1a2540;
  --bg3:      #1f2d4f;
  --bg4:      #273660;
  --dim:      #2e3f6e;
  --dim2:     #3d538f;
  --text:     #e8f0ff;
  --text2:    #a8bcdf;
  --muted:    #6680a8;
  --green:    #10e87e;
  --amber:    #fbbf24;
  --red:      #f87171;
  --cyan:     #38bdf8;
  --indigo:   #818cf8;
  --accent:   #38bdf8;
  --pill-bg:  rgba(30,45,80,.7);
  --pill-bd:  rgba(56,189,248,.25);
  --header-h: 44px;
  --mono:     'JetBrains Mono', monospace;
  --font-size: 13px;
}
body[data-theme="light"] {
  --bg:       #f0f4f8;   /* blanc bleuté très clair */
  --bg2:      #e2e8f0;   /* header/sidebar gris clair */
  --bg3:      #cbd5e1;   /* éléments secondaires gris moyen */
  --bg4:      #b8c4d4;   /* boutons, inputs */
  --dim:      #94a3b8;   /* séparateurs visibles */
  --dim2:     #64748b;   /* bordures actives marquées */
  --text:     #0f172a;   /* texte principal noir ardoise */
  --text2:    #334155;   /* texte secondaire ardoise foncé */
  --muted:    #64748b;   /* texte discret */
  --green:    #15803d;   /* vert foncé bien visible */
  --amber:    #b45309;   /* ambre foncé bien visible */
  --red:      #b91c1c;   /* rouge foncé */
  --cyan:     #0369a1;   /* bleu foncé bien lisible */
  --indigo:   #4338ca;   /* indigo foncé */
  --accent:   #0369a1;   /* accent bleu principal */
  --pill-bg:  rgba(203,213,225,.9);
  --pill-bd:  rgba(3,105,161,.3);
  --header-h: 44px;
  --mono:     'JetBrains Mono', monospace;
  --font-size: 13px;
}
body[data-theme="tropical"] {
  --bg:       #fffbf0;   /* fond crème chaud */
  --bg2:      #fff3d6;   /* header/sidebar jaune pâle */
  --bg3:      #ffe8b0;   /* éléments secondaires */
  --bg4:      #ffd97a;   /* boutons, inputs */
  --dim:      #f0c040;   /* séparateurs dorés */
  --dim2:     #e0a020;   /* bordures actives */
  --text:     #1a1200;   /* texte principal très sombre chaud */
  --text2:    #5a3800;   /* texte secondaire marron */
  --muted:    #a06020;   /* texte discret */
  --green:    #00875a;   /* vert tropical foncé */
  --amber:    #e05c00;   /* orange vif */
  --red:      #d42020;   /* rouge franc */
  --cyan:     #006eb5;   /* bleu océan foncé */
  --indigo:   #7c20d4;   /* violet */
  --accent:   #006eb5;
  --pill-bg:  rgba(0,110,181,.08);
  --pill-bd:  rgba(0,110,181,.3);
  --header-h: 44px;
  --mono:     'JetBrains Mono', monospace;
  --font-size: 13px;
}
body[data-theme="arctic"] {
  --bg:       #0d1117;   /* fond quasi-noir froid */
  --bg2:      #141b24;   /* header/sidebar */
  --bg3:      #1c2535;   /* éléments secondaires */
  --bg4:      #243040;   /* boutons, inputs */
  --dim:      #2d3d52;   /* séparateurs */
  --dim2:     #3d5570;   /* bordures actives */
  --text:     #e0f4ff;   /* texte blanc glacé */
  --text2:    #90b8d8;   /* texte secondaire bleu-gris */
  --muted:    #4a7090;   /* texte discret */
  --green:    #00e5b0;   /* vert menthe */
  --amber:    #60d0ff;   /* cyan clair comme amber */
  --red:      #ff6b8a;   /* rose-rouge */
  --cyan:     #00d4ff;   /* cyan pur et brillant */
  --indigo:   #00d4ff;   /* cyan = accent principal */
  --accent:   #00d4ff;
  --pill-bg:  rgba(10,20,35,.85);
  --pill-bd:  rgba(0,212,255,.2);
  --header-h: 44px;
  --mono:     'JetBrains Mono', monospace;
  --font-size: 13px;
}

/* ── Light mode ── */


* { box-sizing:border-box; margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--font-size);
  line-height: 1.5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
header {
  background: var(--bg2);
  border-bottom: 2px solid var(--bg3);
  box-shadow: none;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
header.split-active {
  /* hauteur auto — s'adapte au RIG */
}
.logo-block {
  display: flex; flex-direction: column;
  gap: 1px; flex-shrink: 0;
}
.logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 2px;
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.logo span { color: var(--indigo); }
.logo-beta {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--amber); opacity: .7;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 3px; padding: 1px 5px;
  text-transform: uppercase;
  font-family: var(--mono);
}
.logo-updated {
  font-size: 10px; color: var(--muted);
  letter-spacing: .3px; padding-left: 1px;
}
.logo span { color: var(--indigo); }



@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }


.header-info span { color: var(--text2); }

.header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}

/* Bouton générique header */
.hbtn {
  background: var(--bg4);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.hbtn:hover { border-color: var(--text2); color: var(--text); }
.theme-toggle {
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
  background: rgba(251,191,36,.12) !important;
  font-weight: 600;
}
.theme-toggle:hover {
  background: rgba(251,191,36,.22) !important;
}
.hbtn.active { border-color: var(--green); color: var(--green); background: rgba(0,217,126,.08); }

/* Bouton taille police */
.font-group {
  display: flex; align-items: center;
  background: var(--bg3);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  overflow: hidden;
}
.font-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--dim2);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  width: 28px; height: 30px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.font-btn:last-child { border-right: none; }
.font-btn:hover { background: var(--dim); color: var(--text); }

/* ═══════════════════════════════════════
   ONGLETS
═══════════════════════════════════════ */
.tabs-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--dim);
  padding: 8px 16px 0;
  display: flex; align-items: flex-end; gap: 4px;
}
.tab {
  background: #1a2035;                 /* inactif : plus sombre que la filter-bar */
  border: 1px solid var(--dim2);
  border-bottom: 3px solid var(--dim); /* barre basse = limite visuelle */
  border-radius: 6px 6px 0 0;
  color: var(--muted);                 /* texte atténué sur inactif */
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
  position: relative;
  top: 1px;
  box-shadow: 0 -1px 3px rgba(0,0,0,.35);
}
.tab:hover { color: var(--text2); background: var(--bg3); border-bottom-color: var(--dim2); }
.tab.active {
  color: var(--indigo);
  background: var(--bg3);             /* identique à la filter-bar (#1f2d4f) */
  border-color: var(--dim);
  border-bottom: 3px solid var(--bg3);/* efface la barre → fondu parfait */
  font-weight: 700;
  box-shadow: 0 -2px 6px rgba(99,102,241,.15);
  z-index: 1;
}
.tab[disabled] { opacity: .25; cursor: not-allowed; box-shadow: none; }
.tab[disabled]:hover { background: #1a2035; color: var(--muted); border-bottom-color: var(--dim); }
.tab .tab-icon  { font-size: 2em; line-height: 1; display: block; margin-bottom: 4px; }
.tab .tab-label { font-size: 12px; letter-spacing: 1px; display: block; }
.tab:has(.tab-icon) { padding: 6px 14px; line-height: 1; }

/* ═══════════════════════════════════════
   BARRE DE FILTRES
═══════════════════════════════════════ */
.filter-bar {
  background: var(--bg3);
  border-bottom: 1px solid var(--dim);
  padding: 6px 20px;
  display: flex; flex-direction: column; gap: 0;
}
.filter-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 5px 0;
}
.filter-row + .filter-row {
  border-top: 1px solid rgba(255,255,255,.04);
}
/* Champ recherche callsign */
.callsign-search-wrap {
  display: flex; align-items: center; gap: 4px;
}
.callsign-search {
  background: var(--bg1);
  border: 1px solid var(--dim2);
  color: var(--text);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 20px; width: 90px;
  text-transform: uppercase; letter-spacing: .5px;
  transition: border-color .15s, width .2s;
}
.callsign-search:focus {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(129,140,248,.15);
  width: 150px;
}
.callsign-search::placeholder { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.search-btn {
  background: var(--indigo);
  border: none; border-radius: 20px;
  color: #fff; cursor: pointer;
  font-size: 11px; padding: 3px 8px; line-height: 1;
  transition: background .15s, opacity .15s;
  flex-shrink: 0;
}
.search-btn:hover { background: #6366f1; }
.search-btn:active { opacity: .8; }
.search-clear {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
  display: none; flex-shrink: 0;
}
.search-clear.visible { display: inline; }
.search-clear:hover { color: var(--red); }
/* Badge recherche active */
.filter-bar.searching .callsign-search { border-color: var(--amber); color: var(--amber); }
.filter-bar.searching .callsign-search:focus { border-color: var(--amber); }
.filter-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--muted);
  text-transform: uppercase;
}
.filter-group { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-btn {
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--text2); color: var(--text2); }
.filter-btn.active {
  background: rgba(99,102,241,.15);
  border-color: var(--indigo);
  color: #818cf8;
}
.lotw-filter-btn.active {
  background: rgba(0,217,126,.15);
  border-color: var(--green);
  color: var(--green);
}
.time-filter-btn.active {
  background: rgba(251,191,36,.15);
  border-color: #fbbf24;
  color: #fbbf24;
}
.filter-sep { width: 1px; height: 20px; background: var(--dim); margin: 0 4px; }

/* ── Groupes de filtres avancés (LoTW / CQ Zone / Search) ── */
.filter-advanced-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 4px 0 3px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.filter-advanced-group {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--dim);
  border-radius: 8px;
  padding: 3px 8px;
}
.filter-advanced-group .filter-label {
  font-size: 9px; letter-spacing: 1.2px;
  margin-right: 2px; white-space: nowrap;
}
.filter-advanced-group--search {
  flex: 0 1 220px; min-width: 140px; max-width: 220px;
  margin-left: auto;
}
.filter-advanced-group--search .callsign-search-wrap {
  margin-left: 0; flex: 1;
}
/* Light theme */
body[data-theme="light"] .filter-advanced-group {
  background: rgba(0,0,0,.03) !important;
  border-color: var(--dim) !important;
}
/* Tropical */
body[data-theme="tropical"] .filter-advanced-group {
  background: rgba(255,200,50,.05) !important;
  border-color: rgba(200,130,0,.3) !important;
}
/* Arctic */
body[data-theme="arctic"] .filter-advanced-group {
  background: rgba(100,180,255,.05) !important;
  border-color: rgba(100,180,255,.2) !important;
}

/* Stats */
.stat-chips { display:flex; gap:6px; margin-left:auto; align-items:center; }
/* ── Boutons taille police spots ───────────────────────── */
.font-size-btn {
  background: none;
  border: 1px solid var(--dim2);
  color: var(--muted);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--sans);
  line-height: 1.4;
}
.font-size-btn:hover { border-color: var(--indigo); color: var(--indigo); }
#font-size-up { font-size: 13px; }
#font-size-dn { font-size: 11px; }

.stat-chip { font-size:12px; color:var(--muted); }
.stat-chip strong { color:var(--amber); }

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.tab-content { display:none; flex-direction:column; }
.tab-content.active { display:flex; }

.table-wrap { overflow:auto; flex:1; }

table {
  width: 100%;
  border-collapse: collapse;
}
/* largeurs gérées par initColResize() via localStorage */
thead th {
  background: var(--bg3);
  border-bottom: none;
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 6px;
  text-align: left;
  border-bottom: 2px solid var(--dim);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky; top: 0; z-index: 5;
}
thead th:hover { color: var(--text2); }
thead th.sorted { color: var(--indigo); }
thead th.sorted::after { content: ' ↕'; font-size: 10px; }

tbody tr {
  border-bottom: 1px solid var(--dim);
  transition: background .1s;
}
tbody tr:nth-child(odd)  { background: rgba(255,255,255,.00); }
tbody tr:nth-child(even) { background: rgba(255,255,255,.06); }
tbody tr:hover { background: rgba(129,140,248,.12) !important; }
tbody tr.new-spot {
  background: rgba(129,140,248,.10) !important;
  border-left: 3px solid var(--indigo);
}
body[data-theme="light"] tbody tr.new-spot { border-left-color: var(--indigo); }

td { padding: 5px 6px; vertical-align: middle; white-space: nowrap; }

/* Colonnes */
.td-time    { color: var(--text2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-date    { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Barre de pagination ── */
#pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15); flex-shrink: 0; gap: 8px;
}
#pagination-bar.hidden { display: none; }
.pag-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color: #94a3b8;
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.pag-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #e2e8f0; }
.pag-btn:disabled { opacity: .3; cursor: default; }
.pag-info { font-size: 11px; color: #64748b; flex: 1; text-align: center; }
.td-freq    { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-country { text-align: center; white-space: nowrap; padding: 0 4px; }
.td-dx      { color: #f0f4ff; font-weight: 700; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-spotter { color: var(--text2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-comment { color: var(--text2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lien callsign */
a.call-link {
  color: inherit; text-decoration: none;
}
a.call-link:hover { text-decoration: underline; opacity: .85; }

/* ── Frequence cliquable QSY ────────────────────────── */
.freq-qsy {
  cursor: default;
  border-radius: 4px;
  padding: 1px 4px;
  transition: all .15s;
  display: inline-block;
}
body.rig-connected .freq-qsy {
  cursor: pointer;
}
body.rig-connected .freq-qsy:hover {
  background: rgba(251,191,36,.2);
  color: var(--amber);
}
body.rig-connected .freq-qsy:hover::after {
  content: ' \2607';
  font-size: 9px;
}
.freq-qsy.qsy-ok {
  background: rgba(0,217,126,.2) !important;
  color: var(--green) !important;
}
.freq-qsy.qsy-err {
  background: rgba(248,113,113,.2) !important;
  color: var(--red) !important;
}
/* pill-freq cliquable */
body.rig-connected .pill-freq {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
}
body.rig-connected .pill-freq:hover {
  background: rgba(251,191,36,.2);
  color: var(--amber);
}

/* ── Widget rig centré dans le header ──────────────── */
/* ══════════════════════════════════════════
   RIG WIDGET — deux lignes
   Ligne 1 : VFO A · MODE · INDICATIF
   Ligne 2 : VFO B · SWAP · SPLIT · OFFSET
   ══════════════════════════════════════════ */
.rig-widget {
  position: relative;
  display: flex; flex-direction: column;
  align-items: stretch;
  background: #0a1228;
  border: 2px solid rgba(99,102,241,.45);
  border-radius: 8px;
  font-family: var(--mono);
  cursor: default;
  transition: opacity .2s, border-color .3s, box-shadow .3s;
  pointer-events: none;
  min-width: 340px;
  max-width: 520px;
  box-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.rig-widget.connected {
  border-color: rgba(0,217,126,.55);
  box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 14px rgba(0,217,126,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.rig-widget.simulated {
  border-color: rgba(251,191,36,.55);
  box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 14px rgba(251,191,36,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.rig-widget.disconnected { opacity: .75; }

/* ── Sous-texte CTA quand déconnecté ── */
/* ── Nom du rig (inline à droite du mode) ── */
.rig-name-lbl {
  font-size: 9px; letter-spacing: 1px; font-weight: 600;
  color: #4a9eff; text-transform: uppercase; opacity: .85;
  margin-left: 6px; white-space: nowrap;
}
.rig-widget.simulated .rig-name-lbl { color: #f59e0b; }
.rig-widget.disconnected .rig-name-lbl { display: none; }

/* ── CTA déconnecté ── */
.rig-cta-line {
  display: none;
  justify-content: center; align-items: center;
  gap: 6px; padding: 0 10px 6px;
  font-family: var(--mono);
}
.rig-widget.disconnected .rig-cta-line { display: flex; }
.rig-widget.connected   .rig-cta-line,
.rig-widget.simulated   .rig-cta-line { display: none; }
.rig-cta-hint {
  font-size: 9px; letter-spacing: .8px; color: #94a3b8;
  opacity: .8;
}

/* ── DOT statut ── */
.rig-status-grp {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px; flex-shrink: 0;
}
.rig-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.rig-status-lbl {
  font-size: 7px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--muted); text-transform: uppercase;
  line-height: 1;
}
.rig-widget.connected   .rig-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.rig-widget.connected   .rig-status-lbl { color: var(--green); }
.rig-widget.simulated   .rig-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.rig-widget.simulated   .rig-status-lbl { color: var(--amber); }
.rig-widget.disconnected .rig-dot { background: #64748b; }
.rig-widget.disconnected .rig-status-lbl { color: #64748b; }

/* ── Indicatif DX avec label QRV ── */
.rig-dx-wrap {
  align-items: baseline; gap: 5px; flex: 1; min-width: 0;
}
.rig-dx-label {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(0,229,255,.55); text-transform: uppercase;
  flex-shrink: 0;
}
 6px var(--amber); }
/* ── Séparateur vertical ── */
.rig-sep-v {
  width: 1px; background: rgba(255,255,255,.1);
  align-self: stretch; flex-shrink: 0;
}

/* ── LIGNE 1 : VFO A + mode + indicatif ── */
.rig-row1 {
  display: flex; align-items: center;
  gap: 10px; padding: 6px 10px 4px;
}

/* Fréquence principale VFO A */
.rig-freq {
  font-weight: 700; font-size: 22px;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}
.rig-widget.disconnected .rig-freq { opacity: .35; }
.rig-f-mhz { color: #fbbf24; }
.rig-f-dot { color: rgba(251,191,36,.35); }
.rig-f-khz { color: #fb923c; }
.rig-f-hz  { color: rgba(251,191,36,.7); }

/* ── MODE badge + menu déroulant ── */
.rig-mode-wrap {
  position: relative; flex-shrink: 0;
}
.rig-mode {
  color: var(--text); font-size: 11px; font-weight: 700;
  background: var(--bg3);
  border: 1px solid var(--dim2);
  border-radius: 4px; padding: 2px 7px;
  letter-spacing: 1.2px;
  cursor: pointer; user-select: none;
  transition: border-color .15s, color .15s;
  display: block;
}
.rig-mode:hover { border-color: var(--indigo); color: #a5b4fc; }
.rig-widget.disconnected .rig-mode { opacity: .35; cursor: default; }

/* Menu déroulant modes */
.rig-mode-menu {
  display: none;
  position: fixed;
  background: var(--bg2);
  border: 1px solid rgba(129,140,248,.35);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  z-index: 99999;
  overflow: hidden;
  min-width: 90px;
}
.rig-mode-menu.open { display: block; }
.rig-mode-item {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--text2); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 7px 16px; text-align: center;
  cursor: pointer; transition: background .1s, color .1s;
}
.rig-mode-item:hover { background: rgba(129,140,248,.15); color: #a5b4fc; }
.rig-mode-item.active { color: var(--amber); }

/* ── INDICATIF DX ── */
.rig-dx {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 800;
  letter-spacing: 1.5px;
  color: #00e5ff;
  text-shadow: 0 0 10px rgba(0,229,255,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .5s, text-shadow .5s, opacity .5s;
}
.rig-dx.faded {
  color: var(--muted);
  text-shadow: none;
  opacity: .5;
}

/* Lien aide */
.rig-help {
  color: #38bdf8; font-size: 10px; font-weight: 600;
  background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.35);
  border-radius: 10px; padding: 2px 9px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; flex-shrink: 0;
  letter-spacing: .5px; white-space: nowrap;
  transition: all .2s;
}
.rig-help:hover { background: rgba(56,189,248,.2); border-color: #38bdf8; color: #fff; }
.rig-widget.connected .rig-help,
.rig-widget.simulated .rig-help { display: none; }

/* ── LIGNE 2 : VFO B + swap + split ── */
.rig-row2 {
  display: flex; align-items: center;
  gap: 8px; padding: 2px 10px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Label VFO B */
.rig-vfo-label {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase;
  flex-shrink: 0;
}

/* Fréquence VFO B */
.rig-vfo-freq {
  font-size: 13px; font-weight: 700;
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
  color: #fb923c;
  padding: 1px 4px;
  flex-shrink: 0;
}

/* Bouton swap */
.rig-swap-btn {
  background: none; border: 1px solid var(--dim2);
  color: var(--muted); font-size: 11px;
  width: 20px; height: 20px; border-radius: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.rig-swap-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* Badge SPLIT */
.rig-split-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: var(--amber); background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 3px; padding: 2px 6px;
  cursor: pointer; user-select: none;
  transition: all .15s; flex-shrink: 0;
}
.rig-split-badge:hover { background: rgba(251,191,36,.25); }
.rig-split-badge.split-off {
  color: var(--muted); background: transparent;
  border-color: var(--dim2);
}
.rig-split-badge.split-off:hover { border-color: var(--amber); color: var(--amber); }

/* Offset +/- */
.rig-split-offset {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.rig-split-khz {
  font-size: 11px; font-weight: 700; color: var(--amber);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center;
}
.rig-split-btn {
  background: none; border: 1px solid var(--dim2);
  color: var(--muted); font-size: 12px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 3px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0; line-height: 1;
}
.rig-split-btn:hover { border-color: var(--amber); color: var(--amber); }

/* Rétablir pointer-events sur éléments cliquables */
.rig-widget .rig-help,
.rig-widget .rig-cta-line,
.rig-widget .rig-mode,
.rig-widget .rig-mode-menu,
.rig-widget .rig-swap-btn,
.rig-widget .rig-split-btn,
.rig-widget .rig-split-badge,
.rig-widget .rig-row2 { pointer-events: auto; }

/* Drapeaux */
.flag {
  display: inline-block;
  width: 28px; height: 21px;
  border-radius: 2px;
  outline: 1px solid rgba(255,255,255,.18);
  vertical-align: middle;
  cursor: default;
  background-size: cover !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.flag-spotter {
  display: inline-block;
  width: 18px; height: 13px;
  border-radius: 2px;
  outline: 1px solid rgba(255,255,255,.10);
  vertical-align: middle;
  margin-right: 7px;
  cursor: default;
  background-size: cover !important;
  image-rendering: crisp-edges;
  opacity: 0.5;
  filter: grayscale(40%);
}

/* ── Badges bande — pilule arrondie ── */
.band-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1px solid;
  border-radius: 20px;
}
.band-160m { color:#c084fc; border-color:rgba(192,132,252,.4); background:rgba(192,132,252,.06); }
.band-80m  { color:#f97316; border-color:rgba(249,115,22,.4);  background:rgba(249,115,22,.06); }
.band-40m  { color:#facc15; border-color:rgba(250,204,21,.4);  background:rgba(250,204,21,.06); }
.band-30m  { color:#a3e635; border-color:rgba(163,230,53,.4);  background:rgba(163,230,53,.06); }
.band-20m  { color:#00e5ff; border-color:rgba(0,229,255,.4);   background:rgba(0,229,255,.06); }
.band-17m  { color:#38bdf8; border-color:rgba(56,189,248,.4);  background:rgba(56,189,248,.06); }
.band-15m  { color:#818cf8; border-color:rgba(129,140,248,.4); background:rgba(129,140,248,.06); }
.band-12m  { color:#f472b6; border-color:rgba(244,114,182,.4); background:rgba(244,114,182,.06); }
.band-10m  { color:#fb923c; border-color:rgba(251,146,60,.4);  background:rgba(251,146,60,.06); }
.band-6m   { color:#4ade80; border-color:rgba(74,222,128,.4);  background:rgba(74,222,128,.06); }
.band-2m   { color:#e879f9; border-color:rgba(232,121,249,.4); background:rgba(232,121,249,.06); }
.band-70cm { color:#94a3b8; border-color:rgba(148,163,184,.4); background:rgba(148,163,184,.06); }
.band-OOB  { color:#475569; border-color:rgba(71,85,105,.4);   background:transparent; }

/* ── Badges mode — carré arrondi ── */
.mode-guessed {
  opacity: .7;
  border-style: dashed !important;
}
.mode-badge {
  display: inline-block;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: var(--text2);
  border-color: var(--dim2);
}
.mode-FT8  { color:#00eeff; border-color:rgba(0,238,255,.35);  background:rgba(0,238,255,.06); }
.mode-FT4  { color:#99ddff; border-color:rgba(153,221,255,.35);background:rgba(153,221,255,.06); }
.mode-FT2  { color:#b8aaff; border-color:rgba(184,170,255,.35);background:rgba(184,170,255,.06); }
.mode-CW   { color:#ffd040; border-color:rgba(255,208,64,.35); background:rgba(255,208,64,.06); }
.mode-SSB  { color:#66ffaa; border-color:rgba(102,255,170,.35);background:rgba(102,255,170,.06); }
.mode-RTTY { color:#ffaacc; border-color:rgba(255,170,204,.35);background:rgba(255,170,204,.06); }
.mode-PSK  { color:#cc99ff; border-color:rgba(204,153,255,.35);background:rgba(204,153,255,.06); }
.mode-DIGI { color:#66ffcc; border-color:rgba(102,255,204,.35);background:rgba(102,255,204,.06); }

/* ── Badges LoTW / eQSL ── */
.lotw {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid;
  vertical-align: middle;
  position: relative; top: -1px;
  margin-left: 14px;
  cursor: default;
  opacity: .9;
}
.lotw-green  { color:#00d97e; border-color:rgba(0,217,126,.5);  background:rgba(0,217,126,.1); }
.lotw-blue   { color:#4a9eff; border-color:rgba(74,158,255,.5); background:rgba(74,158,255,.1); }
.lotw-purple { color:#a78bfa; border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.1); }
.lotw-red    { color:#ef4444; border-color:rgba(239,68,68,.5);  background:rgba(239,68,68,.1); }
.eqsl        { color:#f59e0b; border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.1); }

/* ── Etat vide / chargement ── */
.state-msg { text-align:center; padding:60px 20px; color:var(--muted); }
.state-msg .big { font-size:36px; margin-bottom:12px; opacity:.3; }

/* ── Barre d'erreur ── */
#error-bar {
  display: none;
  background: rgba(239,68,68,.1);
  border-bottom: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  font-size: 12px;
  padding: 8px 20px;
}

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin .7s linear infinite; display:inline-block; }

/* ── Icône POTA dans commentaire ── */
.pota-hl { color:var(--amber); font-weight:700; }
/* ── Icône ARRL DX dans commentaire ── */
.arrl-hl  { color:#ffe000; font-weight:700; text-shadow: 0 0 6px rgba(255,224,0,0.6); }
.hl-qo100 { color:#00ffcc; font-weight:700; text-shadow: 0 0 8px rgba(0,255,204,0.7); letter-spacing:.3px; }
.hl-pota  { color:var(--amber); font-weight:700; }

/* ── Layout principal ── */
.main-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar gauche bandes ── */
#band-sidebar {
  width: 90px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 3px;
  overflow-y: auto;
  overflow-x: hidden;
}
#band-sidebar::-webkit-scrollbar { width: 3px; }
#band-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius:2px; }

/* Séparateur entre groupes HF/VHF/UHF */
.band-side-sep {
  width: 36px; height: 1px;
  background: rgba(255,255,255,.08);
  margin: 3px 0;
}

.band-side-pill {
  width: 58px;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #a0aec0;               /* repos : bien visible */
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  position: relative;
}
.band-side-pill:hover {
  background: rgba(255,255,255,.05);
  color: #94a3b8;
}
/* ALL pill */
.band-side-pill.all-pill {
  font-size: 12px;
  letter-spacing: 1px;
  color: #718096;
  margin-bottom: 2px;
}
.band-side-pill.all-pill.all-active {
  color: #e2e8f0;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
/* Bandes actives — couleur douce de la bande */
.band-side-pill.active {
  border-color: currentColor;
  background: rgba(128,128,128,.1);
  opacity: 1;
}
/* Couleurs douces par bande (moins saturées) */
.band-side-pill[data-band="160m"] { --bc: #a78bfa; }
.band-side-pill[data-band="80m"]  { --bc: #f0abcc; }
.band-side-pill[data-band="60m"]  { --bc: #fdba74; }
.band-side-pill[data-band="40m"]  { --bc: #fcd34d; }
.band-side-pill[data-band="30m"]  { --bc: #bef264; }
.band-side-pill[data-band="20m"]  { --bc: #6ee7b7; }
.band-side-pill[data-band="17m"]  { --bc: #67e8f9; }
.band-side-pill[data-band="15m"]  { --bc: #93c5fd; }
.band-side-pill[data-band="12m"]  { --bc: #a5b4fc; }
.band-side-pill[data-band="10m"]  { --bc: #fca5a5; }
.band-side-pill[data-band="6m"]   { --bc: #86efac; }
.band-side-pill[data-band="vhf"]  { --bc: #d8b4fe; }
.band-side-pill[data-band="uhf"]  { --bc: #c4b5fd; }
.band-side-pill[data-band="shf"]  { --bc: #a8a29e; }
/* Appliquer la couleur quand active */
.band-side-pill.active {
  color: var(--bc, #94a3b8) !important;
  border-color: var(--bc, #94a3b8) !important;
  background: color-mix(in srgb, var(--bc, #94a3b8) 12%, transparent) !important;
}

/* ── Séparateur double entre sections ── */
.section-sep {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 8px;
  box-sizing: border-box;
}
.section-sep-line {
  height: 1px;
  background: rgba(255,255,255,.15);
  border-radius: 1px;
}

/* ── Label section dans sidebar ── */
.band-side-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: #64748b; text-transform: uppercase; text-align: center;
  width: 100%; padding: 0 0 6px;
}

/* ── Pills MODE ── */
.mode-side-pill {
  width: 58px;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #d4c97a;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.mode-side-pill:hover {
  background: rgba(255,255,255,.05);
  color: #94a3b8;
}
.mode-side-pill.all-mode-pill.all-mode-active {
  color: #e2e8f0;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
/* Couleurs par mode */
.mode-side-pill[data-mode="FT8"]  { --mc: #38bdf8; }
.mode-side-pill[data-mode="FT4"]  { --mc: #818cf8; }
.mode-side-pill[data-mode="FT2"]  { --mc: #a78bfa; }
.mode-side-pill[data-mode="CW"]   { --mc: #fbbf24; }
.mode-side-pill[data-mode="SSB"]  { --mc: #34d399; }
.mode-side-pill[data-mode="RTTY"] { --mc: #f87171; }
.mode-side-pill[data-mode="DIGI"] { --mc: #c084fc; }
.mode-side-pill.active {
  color: var(--mc, #94a3b8) !important;
  border-color: var(--mc, #94a3b8) !important;
  background: color-mix(in srgb, var(--mc, #94a3b8) 12%, transparent) !important;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.main-content .tabs-bar { flex-shrink: 0; }
.main-content .tab-content { flex: 1; overflow: hidden; }
.main-content .tab-content.active { display: flex; flex-direction: column; }

/* ── Sidebar droite ── */
.right-panel {
  width: 35%;
  min-width: 260px;
  max-width: 500px;
  background: var(--bg2);
  border-left: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.rp-header {
  background: var(--bg3);
  border-bottom: none;
  padding: 11px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--indigo);
  text-transform: uppercase;
}
.rp-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
.rp-placeholder {
  text-align: center;
  padding: 30px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.rp-icon {
  font-size: 28px;
  margin-bottom: 12px;
  opacity: .3;
}

/* ── Expédition DX — surbrillance très visible ── */
tbody tr.dxped-spot {
  background: rgba(255,180,0,.13) !important;
  border-left: 4px solid #fbbf24 !important;
  box-shadow: inset 0 0 20px rgba(255,180,0,.07);
}
tbody tr.dxped-spot .td-dx {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(255,180,0,.5);
}
tbody tr.dxped-spot .td-country {
  color: #fde68a !important;
  font-weight: 600;
}
.dxped-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid #fbbf24;
  background: rgba(251,191,36,.18);
  color: #fbbf24;
  margin-left: 8px;
  vertical-align: middle;
  position: relative; top: -1px;
  animation: dxped-pulse 2s ease-in-out infinite;
  cursor: default;
}
@keyframes dxped-pulse {
  0%,100% { box-shadow: 0 0 4px rgba(251,191,36,.4); }
  50%      { box-shadow: 0 0 10px rgba(251,191,36,.9); }
}

/* ── Sidebar onglets ── */
.rp-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
  background: var(--bg2);
  border-bottom: none;
  flex-shrink: 0;
}
.rp-tab {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--dim2);
  border-bottom: none;
  border-radius: 8px 8px 4px 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 4px;
  cursor: pointer;
  transition: all .15s;
  text-transform: uppercase;
  text-align: center;
}
.rp-tab:hover {
  color: var(--text2);
  background: var(--bg4);
  border-color: var(--dim2);
}
.rp-tab.active {
  color: var(--text);
  background: var(--bg4);
  border-color: var(--dim2);
}

.rp-panel { display: none; flex: 1; overflow-y: auto; padding: 12px; background: var(--bg4); }
.rp-panel.active { display: block; }
#rp-bandbar.active { display: flex !important; flex-direction: column; }

/* ── Liste expéditions ── */
/* styles dxped déplacés plus bas */
.rp-loading { text-align:center; padding:30px 10px; color:var(--muted); font-size:12px; }

/* ── Mini calendrier Gantt ── */
.gantt-wrap {
  margin-bottom: 10px;
  background: var(--bg3);
  border-radius: 5px;
  border: 1px solid var(--dim2);
  overflow: hidden;
}
.gantt-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--text2); text-transform: uppercase;
  padding: 6px 10px; background: var(--bg3);
  border-bottom: 1px solid var(--dim);
  display: flex; justify-content: space-between; align-items: center;
}
.gantt-month { color: var(--indigo); }
.gantt-grid {
  padding: 6px 6px 4px;
  overflow-x: auto;
}
.gantt-days {
  display: flex;
  gap: 1px;
  margin-bottom: 3px;
}
.gantt-day {
  flex: 1; min-width: 6px;
  text-align: center;
  font-size: 7px;
  color: var(--muted);
  line-height: 1.2;
}
.gantt-day.today { color: #fbbf24; font-weight: 700; }
.gantt-row {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-bottom: 2px;
  height: 14px;
}
.gantt-cell {
  flex: 1; min-width: 6px; height: 12px;
  border-radius: 1px;
  background: transparent;
}
.gantt-cell.active  { background: #fbbf24; opacity: .9; }
.gantt-cell.future  { background: var(--indigo); opacity: .7; }
.gantt-cell.past    { background: var(--muted); opacity: .4; }
.gantt-cell.today-col { outline: 1px solid rgba(251,191,36,.5); }
.gantt-label {
  font-size: 8px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex-shrink: 0; width: 56px;
  padding-right: 3px; text-align: right;
}
.gantt-label.active-lbl { color: #fbbf24; font-weight: 700; }

/* ── Items expéditions — présentation pro ── */
.dxped-item {
  padding: 8px 10px 7px;
  margin-bottom: 6px;
  border-radius: 7px;
  border: 1px solid var(--dim2);
  background: var(--bg3);
  transition: border-color .15s, background .15s;
}
.dxped-item:hover { border-color: rgba(129,140,248,.5); background: rgba(129,140,248,.04); }
.dxped-item.active-ped { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.05); }

/* ── Ligne unique : callsign · pays · dates · âge · statut ── */
.dxped-row1 {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; min-width: 0; margin-bottom: 5px;
}
.dxped-call {
  font-size: 15px; font-weight: 900; letter-spacing: 1.2px;
  color: var(--text2); white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
}
.dxped-call:hover { text-decoration: underline; }
.dxped-country {
  font-size: 11px; color: var(--text2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
/* Pill dates */
.dxped-dates-pill {
  display: inline-flex; align-items: center;
  font-size: 9px; font-family: var(--mono); font-weight: 600;
  color: var(--muted); white-space: nowrap; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 1px 6px;
}
.dxped-age   { font-size: 9px; color: var(--amber); font-weight: 700; flex-shrink: 0; }
.dxped-status {
  font-size: 8px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Lien DXPEDITION INFOS — inline dans le header ── */
.dxped-infolink {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  color: #a5b4fc; text-decoration: none;
  background: rgba(129,140,248,.12);
  border: 1px solid rgba(129,140,248,.35);
  border-radius: 4px; padding: 1px 7px;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.dxped-infolink:hover {
  background: rgba(129,140,248,.25);
  border-color: rgba(129,140,248,.7);
  color: #e0e7ff;
}

/* Couleurs callsign selon activité — jaune-orange */
.dxped-item .dxped-call { color: #ffaa00; }
.dxped-item.spot-hot  .dxped-call { color: #ffcc00; text-shadow: 0 0 10px rgba(255,180,0,.5); }
.dxped-item.spot-warm .dxped-call { color: #ffaa00; text-shadow: 0 0 6px rgba(255,150,0,.3); }
.dxped-item.spot-cold .dxped-call { color: #cc8800; }

/* ── Spot pills — colonnes par mode ── */
.spot-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.spot-mode-col {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 72px;
}
.spot-mode-badge {
  font-size: 9px; font-family: var(--mono); font-weight: 900;
  letter-spacing: .6px; text-transform: uppercase;
  border-radius: 4px; padding: 2px 6px;
  text-align: center; border: 1px solid currentColor;
  width: 100%; box-sizing: border-box; display: block;
}
/* Couleurs vives avec glow */
/* ── Badges de mode ── */
.smbadge-FT8  { color: #00e5ff; background: rgba(0,229,255,.15);   border-color: rgba(0,229,255,.65);   text-shadow: 0 0 6px rgba(0,229,255,.5);   }
.smbadge-FT4  { color: #d4aaff; background: rgba(179,136,255,.15); border-color: rgba(179,136,255,.65); text-shadow: 0 0 6px rgba(179,136,255,.5); }
.smbadge-CW   { color: #ffe033; background: rgba(255,215,64,.15);  border-color: rgba(255,215,64,.65);  text-shadow: 0 0 6px rgba(255,215,64,.5);  }
.smbadge-SSB  { color: #6fff44; background: rgba(105,255,71,.15);  border-color: rgba(105,255,71,.65);  text-shadow: 0 0 6px rgba(105,255,71,.5);  }
.smbadge-RTTY { color: #ff7043; background: rgba(255,110,64,.15);  border-color: rgba(255,110,64,.65);  text-shadow: 0 0 6px rgba(255,110,64,.5);  }
.smbadge-AM   { color: #f06aff; background: rgba(234,128,252,.15); border-color: rgba(234,128,252,.65); text-shadow: 0 0 6px rgba(234,128,252,.5); }
.smbadge-FM   { color: #29d4ff; background: rgba(64,196,255,.15);  border-color: rgba(64,196,255,.65);  text-shadow: 0 0 6px rgba(64,196,255,.5);  }
.smbadge-DIGI { color: #00ffcc; background: rgba(100,255,218,.15); border-color: rgba(100,255,218,.65); text-shadow: 0 0 6px rgba(100,255,218,.5); }
.smbadge-PSK  { color: #ff5fa0; background: rgba(255,128,171,.15); border-color: rgba(255,128,171,.65); text-shadow: 0 0 6px rgba(255,128,171,.5); }
.smbadge-JS8  { color: #c6ff5e; background: rgba(204,255,144,.15); border-color: rgba(204,255,144,.65); text-shadow: 0 0 6px rgba(204,255,144,.5); }
.smbadge-OTHER{ color: #a0aec0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3);  }

/* ── Pills fréquences — base ── */
.spot-freq-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 2px 6px;
  font-size: 10px; font-family: var(--mono);
  white-space: nowrap; cursor: default;
  transition: background .12s, border-color .12s;
}
.spot-freq-pill:hover { background: rgba(255,255,255,.09); }
.sfp-freq { font-weight: 600; cursor: pointer; }
.sfp-freq:hover { text-decoration: underline; }
.sfp-age  { font-size: 9px; opacity: .65; }

/* Thématiques couleurs par mode — foncé→clair selon âge via sfp-hot */
/* FT8 — famille cyan */
.spot-freq-pill.sfp-FT8  { border-color: rgba(0,229,255,.25); background: rgba(0,229,255,.06); }
.spot-freq-pill.sfp-FT8  .sfp-freq { color: #5fd8e8; }
.spot-freq-pill.sfp-FT8  .sfp-age  { color: rgba(0,229,255,.55); }
.spot-freq-pill.sfp-FT8.sfp-hot  { border-color: rgba(0,229,255,.6); background: rgba(0,229,255,.14); }
.spot-freq-pill.sfp-FT8.sfp-hot  .sfp-freq { color: #00e5ff; text-shadow: 0 0 5px rgba(0,229,255,.5); }
.spot-freq-pill.sfp-FT8.sfp-hot  .sfp-age  { color: rgba(0,229,255,.8); }
/* FT4 — famille violet */
.spot-freq-pill.sfp-FT4  { border-color: rgba(179,136,255,.25); background: rgba(179,136,255,.06); }
.spot-freq-pill.sfp-FT4  .sfp-freq { color: #aa88ee; }
.spot-freq-pill.sfp-FT4  .sfp-age  { color: rgba(179,136,255,.55); }
.spot-freq-pill.sfp-FT4.sfp-hot  { border-color: rgba(179,136,255,.6); background: rgba(179,136,255,.14); }
.spot-freq-pill.sfp-FT4.sfp-hot  .sfp-freq { color: #d4aaff; text-shadow: 0 0 5px rgba(179,136,255,.5); }
.spot-freq-pill.sfp-FT4.sfp-hot  .sfp-age  { color: rgba(179,136,255,.8); }
/* CW — famille jaune/or */
.spot-freq-pill.sfp-CW   { border-color: rgba(255,215,64,.25); background: rgba(255,215,64,.06); }
.spot-freq-pill.sfp-CW   .sfp-freq { color: #c8a800; }
.spot-freq-pill.sfp-CW   .sfp-age  { color: rgba(255,215,64,.55); }
.spot-freq-pill.sfp-CW.sfp-hot   { border-color: rgba(255,215,64,.6); background: rgba(255,215,64,.14); }
.spot-freq-pill.sfp-CW.sfp-hot   .sfp-freq { color: #ffe033; text-shadow: 0 0 5px rgba(255,215,64,.5); }
.spot-freq-pill.sfp-CW.sfp-hot   .sfp-age  { color: rgba(255,215,64,.8); }
/* SSB — famille verte */
.spot-freq-pill.sfp-SSB  { border-color: rgba(105,255,71,.25); background: rgba(105,255,71,.05); }
.spot-freq-pill.sfp-SSB  .sfp-freq { color: #48a830; }
.spot-freq-pill.sfp-SSB  .sfp-age  { color: rgba(105,255,71,.5); }
.spot-freq-pill.sfp-SSB.sfp-hot  { border-color: rgba(105,255,71,.6); background: rgba(105,255,71,.12); }
.spot-freq-pill.sfp-SSB.sfp-hot  .sfp-freq { color: #6fff44; text-shadow: 0 0 5px rgba(105,255,71,.5); }
.spot-freq-pill.sfp-SSB.sfp-hot  .sfp-age  { color: rgba(105,255,71,.8); }
/* RTTY — famille orange-rouge */
.spot-freq-pill.sfp-RTTY { border-color: rgba(255,110,64,.25); background: rgba(255,110,64,.06); }
.spot-freq-pill.sfp-RTTY .sfp-freq { color: #c04020; }
.spot-freq-pill.sfp-RTTY .sfp-age  { color: rgba(255,110,64,.55); }
.spot-freq-pill.sfp-RTTY.sfp-hot { border-color: rgba(255,110,64,.6); background: rgba(255,110,64,.14); }
.spot-freq-pill.sfp-RTTY.sfp-hot .sfp-freq { color: #ff7043; text-shadow: 0 0 5px rgba(255,110,64,.5); }
.spot-freq-pill.sfp-RTTY.sfp-hot .sfp-age  { color: rgba(255,110,64,.8); }
/* AM — famille magenta */
.spot-freq-pill.sfp-AM   { border-color: rgba(234,128,252,.25); background: rgba(234,128,252,.06); }
.spot-freq-pill.sfp-AM   .sfp-freq { color: #b050cc; }
.spot-freq-pill.sfp-AM   .sfp-age  { color: rgba(234,128,252,.55); }
.spot-freq-pill.sfp-AM.sfp-hot   { border-color: rgba(234,128,252,.6); background: rgba(234,128,252,.14); }
.spot-freq-pill.sfp-AM.sfp-hot   .sfp-freq { color: #f06aff; text-shadow: 0 0 5px rgba(234,128,252,.5); }
.spot-freq-pill.sfp-AM.sfp-hot   .sfp-age  { color: rgba(234,128,252,.8); }
/* FM — famille bleu ciel */
.spot-freq-pill.sfp-FM   { border-color: rgba(64,196,255,.25); background: rgba(64,196,255,.06); }
.spot-freq-pill.sfp-FM   .sfp-freq { color: #1888bb; }
.spot-freq-pill.sfp-FM   .sfp-age  { color: rgba(64,196,255,.55); }
.spot-freq-pill.sfp-FM.sfp-hot   { border-color: rgba(64,196,255,.6); background: rgba(64,196,255,.14); }
.spot-freq-pill.sfp-FM.sfp-hot   .sfp-freq { color: #29d4ff; text-shadow: 0 0 5px rgba(64,196,255,.5); }
.spot-freq-pill.sfp-FM.sfp-hot   .sfp-age  { color: rgba(64,196,255,.8); }
/* DIGI — famille teal */
.spot-freq-pill.sfp-DIGI { border-color: rgba(0,255,204,.25); background: rgba(0,255,204,.05); }
.spot-freq-pill.sfp-DIGI .sfp-freq { color: #00a882; }
.spot-freq-pill.sfp-DIGI .sfp-age  { color: rgba(0,255,204,.5); }
.spot-freq-pill.sfp-DIGI.sfp-hot { border-color: rgba(0,255,204,.6); background: rgba(0,255,204,.12); }
.spot-freq-pill.sfp-DIGI.sfp-hot .sfp-freq { color: #00ffcc; text-shadow: 0 0 5px rgba(0,255,204,.5); }
.spot-freq-pill.sfp-DIGI.sfp-hot .sfp-age  { color: rgba(0,255,204,.8); }
/* PSK — famille rose */
.spot-freq-pill.sfp-PSK  { border-color: rgba(255,128,171,.25); background: rgba(255,128,171,.06); }
.spot-freq-pill.sfp-PSK  .sfp-freq { color: #cc3070; }
.spot-freq-pill.sfp-PSK  .sfp-age  { color: rgba(255,128,171,.55); }
.spot-freq-pill.sfp-PSK.sfp-hot  { border-color: rgba(255,128,171,.6); background: rgba(255,128,171,.14); }
.spot-freq-pill.sfp-PSK.sfp-hot  .sfp-freq { color: #ff5fa0; text-shadow: 0 0 5px rgba(255,128,171,.5); }
.spot-freq-pill.sfp-PSK.sfp-hot  .sfp-age  { color: rgba(255,128,171,.8); }
/* JS8 — famille vert-jaune */
.spot-freq-pill.sfp-JS8  { border-color: rgba(204,255,144,.25); background: rgba(204,255,144,.05); }
.spot-freq-pill.sfp-JS8  .sfp-freq { color: #7aaa30; }
.spot-freq-pill.sfp-JS8  .sfp-age  { color: rgba(204,255,144,.5); }
.spot-freq-pill.sfp-JS8.sfp-hot  { border-color: rgba(204,255,144,.6); background: rgba(204,255,144,.12); }
.spot-freq-pill.sfp-JS8.sfp-hot  .sfp-freq { color: #c6ff5e; text-shadow: 0 0 5px rgba(204,255,144,.5); }
.spot-freq-pill.sfp-JS8.sfp-hot  .sfp-age  { color: rgba(204,255,144,.8); }
/* OTHER */
.spot-freq-pill.sfp-OTHER { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.spot-freq-pill.sfp-OTHER .sfp-freq { color: #a0aec0; }
.spot-freq-pill.sfp-OTHER .sfp-age  { color: rgba(255,255,255,.35); }
.spot-freq-pill.sfp-OTHER.sfp-hot .sfp-freq { color: #d0dae8; }
.dxped-age {
  color: var(--amber); font-weight: 600;
}

/* ON AIR < 1h — vert vif animé */
.dxped-on-air {
  background: rgba(255,120,0,.2); border: 1px solid #ff7800; color: #ff9500;
  text-shadow: 0 0 8px rgba(255,140,0,.7);
  box-shadow: 0 0 6px rgba(255,120,0,.3);
  animation: dxped-pulse 2s infinite;
}
/* Récent 1-2h — ambre */
.dxped-recent {
  background: rgba(251,191,36,.15); border: 1px solid #fbbf24; color: #fbbf24;
}
/* Inactif >2h mais dans la période — gris neutre */
.dxped-inactive {
  background: rgba(107,128,168,.1); border: 1px solid var(--muted); color: var(--muted);
}
/* Upcoming — indigo */
.dxped-upcoming {
  background: rgba(129,140,248,.15); border: 1px solid var(--indigo); color: var(--indigo);
}

/* Surbrillance item selon activité */
.dxped-item.spot-hot {
  border-color: rgba(255,140,0,.5);
  background: rgba(255,140,0,.05);
}
.dxped-item.spot-warm {
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.04);
}
.dxped-item.spot-cold {
  border-color: var(--dim2);
  background: transparent;
}

/* ── Solar / Propagation ── */
/* ── Propagation : en-tête indices ── */
.propag-header {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
  line-height: 1.8;
}
.propag-header-date {
  font-size: 9px;
  color: #a0aec0;
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.ph-idx {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-right: 10px;
}
.ph-idx-lbl {
  font-size: 9px;
  color: #a0aec0;
  text-transform: uppercase;
}
.ph-idx-val {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.ph-idx-val.good { color: #00d97e; }
.ph-idx-val.fair { color: #fbbf24; }
.ph-idx-val.poor { color: #e8445a; }
.ph-idx-val.neut { color: #e2e8f0; }

/* ── Tableau bandes HF ── */
.bands-table-wrap {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.bands-table-head {
  display: grid;
  grid-template-columns: 68px 1fr 1fr;
  background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 5px 8px;
}
.bands-table-head div {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.bands-th-band  { color: #a0aec0; }
.bands-th-day   { color: #f5a623; text-align: center; }
.bands-th-night { color: #7eb8f7; text-align: center; }

.propag-band-row {
  display: grid;
  grid-template-columns: 68px 1fr 1fr;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.propag-band-row:last-child { border-bottom: none; }
.propag-band-row:hover { background: rgba(255,255,255,.03); }

.pb-name {
  font-size: 10px; font-weight: 700;
  color: #cbd5e0; letter-spacing: .3px;
}
.pb-cond {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
}
.pb-bar-wrap {
  width: 100%; height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.pb-bar { height: 100%; border-radius: 3px; transition: width .5s ease; }
.pb-bar.good     { background: #00d97e; width: 90%; }
.pb-bar.fair     { background: #fbbf24; width: 55%; }
.pb-bar.poor     { background: #e8445a; width: 25%; }
.pb-bar.enhanced { background: #00d97e; width: 100%; }
.pb-bar.degraded { background: #e8445a; width: 15%; }
.pb-bar.none     { background: #4a5568; width: 8%; }

.pb-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.pb-label.good     { color: #00d97e; }
.pb-label.fair     { color: #fbbf24; }
.pb-label.poor     { color: #e8445a; }
.pb-label.enhanced { color: #00d97e; }
.pb-label.degraded { color: #e8445a; }
.pb-label.none     { color: #718096; }

/* ── Alertes ── */
.solar-alert {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 8px; border-radius: 4px; margin-bottom: 5px;
  font-size: 10px; line-height: 1.4;
}
.solar-alert.ok   { background: rgba(0,217,126,.1);  border: 1px solid rgba(0,217,126,.25);  color: #4ade80; }
.solar-alert.warn { background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.25); color: #fcd34d; }
.solar-alert.bad  { background: rgba(232,68,90,.1);   border: 1px solid rgba(232,68,90,.25);  color: #f87171; }
.solar-alert-ico  { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.solar-alert-txt  { flex: 1; }

/* ── Extra data ── */
.solar-section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #718096;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 4px; margin: 10px 0 6px;
}
.solar-extra-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 10px;
}
.solar-extra-lbl { color: #a0aec0; }
.solar-extra-val { color: #e2e8f0; font-weight: 600; }


/* ── Heatmap Band Activity ── */
.hm-controls {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 8px;
}
.hm-title {
  font-size: 14px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: #e2e8f0;
  display: flex; align-items: center; gap: 6px;
}
.hm-title-globe {
  font-size: 16px; line-height: 1;
}
.hm-ctrl-group { display:flex; align-items:center; gap:6px; }
.hm-ctrl-label {
  font-size: 10px; color: #718096; font-style: italic; white-space: nowrap;
}
.hm-select {
  background: #f0f4f8; color: #1a202c;
  border: 1px solid #cbd5e0; border-radius: 3px;
  font-size: 11px; padding: 2px 6px; cursor: pointer; font-family: inherit;
  transition: border-color .15s;
}
.hm-select:hover { border-color: #718096; }
.hm-select:focus { outline: none; border-color: #4299e1; }
.hm-btn {
  background: rgba(255,255,255,.08); color: #cbd5e0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 3px;
  font-size: 12px; padding: 2px 7px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.hm-btn:hover { border-color:rgba(255,255,255,.4); color:#fff; }

#hm-canvas-wrap {
  position: relative; width: 100%; overflow: visible;
}
canvas#hm-canvas {
  width: 100%; display: block; border-radius: 4px;
  transition: opacity .2s;
}
#hm-loading {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  color:rgba(255,255,255,.18); font-size:9px; letter-spacing:1px;
}
#hm-labels {
  position:absolute; inset:0; pointer-events:none;
}
.hm-label-band {
  position:absolute; font-size:12px; font-weight:700; color:#e2e8f0;
  text-align:right; transform:translateY(-50%);
  white-space:nowrap; line-height:1;
}
.hm-label-cont {
  position:absolute; font-size:12px; font-weight:700; letter-spacing:.5px;
  color:#cbd5e0; text-align:center; transform:translateX(-50%);
  line-height:1;
}
/* .hm-label-cont.sel supprimé */

/* Tooltip */
#hm-tooltip {
  position:fixed;
  background:rgba(8,10,18,.97);
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  padding:9px 13px;
  pointer-events:none; z-index:9999; display:none;
  min-width:130px;
}
.tip-band  { font-size:14px; font-weight:700; color:#e2e8f0; letter-spacing:.2px; }
.tip-route { font-size:11px; color:#94a3b8; margin-top:2px; }
.tip-sep   { height:1px; background:rgba(255,255,255,.1); margin:7px 0; }
.tip-bottom { display:flex; align-items:baseline; gap:6px; }
.tip-count { font-size:26px; font-weight:700; letter-spacing:-1px; line-height:1; }
.tip-spots-word { font-size:13px; font-weight:600; color:#cbd5e0; }
.tip-lbl   { font-size:9px; color:#718096; text-transform:uppercase; letter-spacing:.8px; margin-top:3px; }

/* Légende */
.hm-legend { display:flex; align-items:center; gap:5px; margin-top:7px; }
.hm-legend-bar {
  flex:1; height:3px; border-radius:2px;
  background:linear-gradient(to right,rgba(0,0,0,0),#1440a0,#00c864,#ffcc00,#ff2200);
}
.hm-legend-lbl { font-size:11px; color:#94a3b8; }
#hm-info { font-size:10px; color:#94a3b8; text-align:right; margin-top:3px; }

.rp-section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase;
  margin: 8px 0 4px; padding-left: 2px;
}

/* ── Redimensionnement colonnes ── */
thead th {
  position: relative;
}
.col-resizer {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
}
.col-resizer:hover,
.col-resizer.dragging {
  background: var(--indigo);
  opacity: .7;
}

/* ── Config panel ── */
.help-btn  { border-color: #2d6a4f !important; color: #34d399 !important; text-decoration: none; }
.help-btn:hover  { border-color: #34d399 !important; color: #6ee7b7 !important; }
.config-btn { border-color: #6b80a8 !important; color: #6b80a8 !important; }
.config-btn:hover { border-color: var(--indigo) !important; color: var(--indigo) !important; }

.config-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 900;
  backdrop-filter: blur(2px);
}
.config-overlay.open { display: block; }

.config-panel {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; max-width: 96vw;
  max-height: 88vh;
  background: var(--bg2);
  border: 1px solid rgba(129,140,248,.3);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(129,140,248,.1);
  z-index: 901;
  flex-direction: column;
  overflow: hidden;
}
.config-panel.open { display: flex; }

.config-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  background: rgba(129,140,248,.08);
  border-bottom: none;
  flex-shrink: 0;
}
.config-title {
  font-size: 16px; font-weight: 800; letter-spacing: 1.2px;
  color: #a5b4fc;
  text-transform: uppercase;
}
.config-close {
  background: none; border: none; color: #64748b;
  font-size: 20px; cursor: pointer; padding: 0 4px;
  line-height: 1; transition: color .15s;
}
.config-close:hover { color: #e2e8f0; }

.config-body {
  overflow-y: auto; padding: 20px 24px;
  flex: 1;
}
.config-section-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase;
  color: #a5b4fc !important; margin-bottom: 12px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(129,140,248,.2) !important;
}
.config-label {
  font-size: 13px !important; color: #cbd5e0 !important;
  font-weight: 600 !important;
}
.config-hint {
  font-size: 11px !important; color: #64748b !important;
}
.config-input {
  font-size: 13px !important; color: #e2e8f0 !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.config-input:focus {
  border-color: rgba(129,140,248,.5) !important;
  background: rgba(129,140,248,.08) !important;
}
.config-section {
  margin-bottom: 20px;
}
.config-section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--dim); padding-bottom: 6px;
  margin-bottom: 12px;
}
.config-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.config-label {
  font-size: 11px; font-weight: 700; color: var(--text2);
  width: 100px; flex-shrink: 0;
}
.config-input {
  background: var(--bg3) !important;
  border: 1px solid var(--dim2);
  color: var(--text) !important;
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  width: 160px;
  transition: border-color .15s;
  color-scheme: dark;
}
.config-input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(129,140,248,.15);
}
.config-select { cursor: pointer; }
.config-select option {
  background: var(--bg3);
  color: var(--text);
}
.config-hint {
  font-size: 10px; color: var(--muted);
  flex: 1;
}

/* Toggle switch */
.config-toggle {
  position: relative; display: inline-block;
  width: 38px; height: 20px; flex-shrink: 0;
}
.config-toggle input { opacity: 0; width: 0; height: 0; }
.config-slider {
  position: absolute; inset: 0;
  background: var(--dim2); border-radius: 20px; cursor: pointer;
  transition: .2s;
}
.config-slider:before {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted);
  left: 3px; top: 3px;
  transition: .2s;
}
.config-toggle input:checked + .config-slider { background: rgba(129,140,248,.3); }
.config-toggle input:checked + .config-slider:before {
  background: var(--indigo);
  transform: translateX(18px);
}

.config-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--bg3);
  border-top: 1px solid var(--dim);
  flex-shrink: 0;
}
.config-save-group {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.config-save-row {
  display: flex; gap: 8px; align-items: center;
}
.config-btn-server {
  flex: 1; padding: 7px 12px; font-size: 12px; font-weight: 700;
  border-radius: 5px; border: 1px solid rgba(99,179,237,.4);
  background: rgba(99,179,237,.1); color: #63b3ed;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.config-btn-server:hover { background: rgba(99,179,237,.2); }
.config-btn-export {
  flex: 1; padding: 7px 12px; font-size: 12px; font-weight: 700;
  border-radius: 5px; border: 1px solid rgba(52,211,153,.4);
  background: rgba(52,211,153,.1); color: #34d399;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.config-btn-export:hover { background: rgba(52,211,153,.2); }
.config-btn-import {
  flex: 1; padding: 7px 12px; font-size: 12px; font-weight: 700;
  border-radius: 5px; border: 1px solid rgba(251,191,36,.4);
  background: rgba(251,191,36,.1); color: #fbbf24;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.config-btn-import:hover { background: rgba(251,191,36,.2); }
.config-save {
  background: rgba(129,140,248,.15);
  border: 1px solid var(--indigo);
  color: var(--indigo);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 16px; border-radius: 4px; cursor: pointer;
  transition: all .15s;
}
.config-save:hover { background: rgba(129,140,248,.3); }
.config-reset {
  background: transparent;
  border: 1px solid var(--dim2);
  color: var(--muted);
  font-family: var(--mono); font-size: 11px;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  transition: all .15s;
}
.config-reset:hover { border-color: var(--red); color: var(--red); }
.config-saved-msg {
  font-size: 11px; color: var(--green);
  margin-left: 8px; opacity: 0;
  transition: opacity .3s;
}
.config-saved-msg.show { opacity: 1; }

/* Credits */
/* credits CSS → moved to HELP panel */

/* ── Panneau HELP ── */


/* ── Band Bar ───────────────────────────────────────────────── */
#bb-container {
  display: flex; flex-direction: column; height: 100%;
  padding: 8px 6px 4px; box-sizing: border-box; gap: 6px;
}
#bb-controls {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
#bb-band-select {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #e2e8f0; font-size: 12px; border-radius: 5px; padding: 4px 6px;
  cursor: pointer; font-family: inherit;
}
#bb-minutes-select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8; font-size: 11px; border-radius: 5px; padding: 4px 5px;
  cursor: pointer; font-family: inherit;
}
#bb-wrap {
  flex: 1; position: relative;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.2) transparent;
}
#bb-wrap::-webkit-scrollbar { width: 4px; }
#bb-wrap::-webkit-scrollbar-track { background: transparent; }
#bb-wrap::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.2); border-radius: 2px;
}
#bb-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); }
#bb-svg {
  display: block;
  /* width et height fixés dynamiquement par JS */
}
/* Tooltip */
#bb-tooltip {
  position: fixed; pointer-events: none;
  background: rgba(15,20,40,.95); border: 1px solid rgba(129,140,248,.3);
  border-radius: 6px; padding: 7px 10px; font-size: 11px;
  color: #e2e8f0; line-height: 1.6; z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  display: none; white-space: nowrap;
}
#bb-legend {
  display: flex; gap: 10px; flex-shrink: 0;
  justify-content: center; padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.bb-legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #64748b;
}
.bb-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* Highlight own callsign dans tableau */
tbody tr.own-spot td { color: var(--amber) !important; }
tbody tr.own-spot { background: rgba(251,191,36,.08) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--dim2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ═══════════════════════════════════════════════════════
   MODALE CQ ZONES
═══════════════════════════════════════════════════════ */
#cq-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
#cq-modal-overlay.open {
  display: flex;
}
#cq-modal-box {
  background: #0d1b2e;
  border: 1px solid rgba(0,230,118,.3);
  border-radius: 8px;
  width: 92vw;
  max-width: 1100px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,230,118,.15);
}
#cq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,230,118,.2);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}
#cq-modal-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: .8rem;
  color: #00e676;
  letter-spacing: 2px;
  flex-shrink: 0;
}
#cq-modal-mode-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .7rem;
  color: #00b4d8;
  letter-spacing: 2px;
  flex-shrink: 0;
}
#cq-modal-selected-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.cq-badge {
  background: rgba(0,230,118,.12);
  border: 1px solid rgba(0,230,118,.4);
  color: #00e676;
  font-family: monospace;
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}
.cq-badge:hover {
  background: rgba(255,60,60,.2);
  border-color: #ff4444;
  color: #ff6666;
}
#cq-modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cq-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(0,230,118,.3);
  background: none;
  color: rgba(0,230,118,.6);
  transition: all .2s;
}
.cq-btn:hover { border-color: #00e676; color: #00e676; }
.cq-btn.primary {
  background: rgba(0,230,118,.15);
  border-color: #00e676;
  color: #00e676;
}
.cq-btn.primary:hover { background: rgba(0,230,118,.3); }
.cq-btn.danger { border-color: rgba(255,68,68,.4); color: rgba(255,68,68,.6); }
.cq-btn.danger:hover { border-color: #ff4444; color: #ff4444; }
#cq-modal-map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #0d2040;
}
#cq-modal-map-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
/* Réutiliser les classes de la carte originale */
#cq-modal-map-wrap .country { fill:#b87a3d; stroke:#e8c080; stroke-width:.55; pointer-events:none; }
#cq-modal-map-wrap .graticule { fill:none; stroke:rgba(100,180,255,.07); stroke-width:.4; }
#cq-modal-map-wrap .equator { fill:none; stroke:rgba(100,200,255,.28); stroke-width:.9; stroke-dasharray:6,4; }
#cq-modal-map-wrap .sphere-outline { fill:none; stroke:rgba(100,200,255,.2); stroke-width:.8; }
#cq-modal-map-wrap .cq-zone { fill:transparent; stroke:#00d45a; stroke-width:1.8; stroke-linejoin:round; cursor:pointer; }
#cq-modal-map-wrap .cq-zone.dx-selected  { fill:rgba(0,180,255,.25); stroke:#00b4ff; stroke-width:2.5; }
#cq-modal-map-wrap .cq-zone.spt-selected { fill:rgba(255,180,0,.22); stroke:#ffb400; stroke-width:2.5; }
#cq-modal-map-wrap .cq-zone:hover:not(.dx-selected):not(.spt-selected) { fill:rgba(0,255,120,.12); stroke:#00ff88; stroke-width:2.2; }
#cq-modal-map-wrap .zone-label-grp { pointer-events:none; }
#cq-modal-map-wrap .zone-bg { fill:rgba(4,12,28,.75); stroke:#00c853; stroke-width:1; }
#cq-modal-map-wrap .zone-bg.dx-sel  { fill:rgba(0,180,255,.5); stroke:#00b4ff; stroke-width:1.5; }
#cq-modal-map-wrap .zone-bg.spt-sel { fill:rgba(255,180,0,.5); stroke:#ffb400; stroke-width:1.5; }
#cq-modal-map-wrap .zone-bg.hov { fill:rgba(0,180,80,.32); stroke:#00ff88; }
#cq-modal-map-wrap .zone-num { font-family:monospace; font-weight:700; font-size:11px; fill:#80ffb0; text-anchor:middle; dominant-baseline:middle; pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.85); stroke-width:2.5px; }
#cq-modal-map-wrap .zone-num.dx-sel  { fill:#ffffff; }
#cq-modal-map-wrap .zone-num.spt-sel { fill:#fff8cc; }
#cq-modal-map-wrap .zone-num.hov { fill:#ffffff; }

/* Indicateur de mode actif dans la modale */
#cq-mode-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cq-mode-tab {
  font-family: 'Share Tech Mono', monospace;
  font-size: .65rem;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s;
  opacity: .5;
}
.cq-mode-tab.dx  { border-color:rgba(0,180,255,.4); color:#00b4ff; }
.cq-mode-tab.spt { border-color:rgba(255,180,0,.4); color:#ffb400; }
.cq-mode-tab.dx.active  { background:rgba(0,180,255,.2); border-color:#00b4ff; opacity:1; }
.cq-mode-tab.spt.active { background:rgba(255,180,0,.2); border-color:#ffb400; opacity:1; }

/* Pills CQ dans la filter-bar */
.cq-zone-filter-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cq-zone-pill-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
  border: 1.5px solid rgba(100,116,139,.55);
  background: rgba(100,116,139,.13);
  color: #b0bec5;
  transition: all .2s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.cq-zone-pill-btn:hover {
  border-color: #94a3b8;
  color: #e2e8f0;
  background: rgba(148,163,184,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.cq-zone-pill-btn.dx-active {
  border-color: rgba(0,180,255,.8);
  background: rgba(0,180,255,.18);
  color: #38d8ff;
  box-shadow: 0 0 10px rgba(0,180,255,.35), 0 2px 6px rgba(0,0,0,.3);
  text-shadow: 0 0 8px rgba(0,200,255,.5);
}
.cq-zone-pill-btn.spt-active {
  border-color: rgba(255,180,0,.8);
  background: rgba(255,180,0,.18);
  color: #ffd040;
  box-shadow: 0 0 10px rgba(255,180,0,.35), 0 2px 6px rgba(0,0,0,.3);
  text-shadow: 0 0 8px rgba(255,200,0,.5);
}
.cq-active-zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
  padding: 1px 5px;
  font-size: .6rem;
  cursor: pointer;
}
.cq-active-zone-badge .cq-rm {
  opacity: .6;
  font-size: .55rem;
  transition: opacity .15s;
}
.cq-active-zone-badge:hover .cq-rm { opacity: 1; color: #ff4444; }



/* ═══════════════════════════════════════════════════════
   SÉLECTEUR DE THÈME
═══════════════════════════════════════════════════════ */
#theme-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--dim2);
  border-radius: 24px;
  padding: 4px 8px;
}
.theme-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.2);
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.theme-dot:hover { transform: scale(1.12); border-color: rgba(255,255,255,.6); }
.theme-dot.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent);
}
.theme-dot[data-theme="dark"]   { background: radial-gradient(circle at 35% 35%, #273660, #141c2e); }
.theme-dot[data-theme="light"]  { background: radial-gradient(circle at 35% 35%, #e2e8f0, #94a3b8); }
.theme-dot[data-theme="tropical"] { background: radial-gradient(circle at 35% 35%, #ff9f1c, #2ec4b6); }
.theme-dot[data-theme="arctic"] { background: radial-gradient(circle at 35% 35%, #1c3a5a, #0d1117); }
.theme-dot-label {
  font-size: 10px; font-weight: 800;
  font-family: monospace; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.8);
}
.theme-dot[data-theme="dark"]   .theme-dot-label { color: #60c8ff; }
.theme-dot[data-theme="light"]  .theme-dot-label { color: #0369a1; }
.theme-dot[data-theme="tropical"] .theme-dot-label { color: #1a1200; text-shadow: none; }
.theme-dot[data-theme="arctic"] .theme-dot-label { color: #00d4ff; text-shadow: 0 0 5px rgba(0,212,255,.6); }

/* ═══════════════════════════════════════════════════════
   CORRECTIFS THÈMES — éléments avec bg hardcodé
═══════════════════════════════════════════════════════ */

/* band-sidebar et sidebars */
body { background: var(--bg); color: var(--text); }
#band-sidebar { scrollbar-color: var(--dim2) transparent; }

/* ─── LIGHT ─────────────────────────────────────────── */
body[data-theme="light"] #band-sidebar { background: var(--bg2) !important; border-right-color: var(--dim) !important; }
body[data-theme="light"] .rp-sidebar   { background: var(--bg2) !important; border-color: var(--dim) !important; }
body[data-theme="light"] #bb-container { background: var(--bg) !important; }
body[data-theme="light"] #bb-wrap      { background: var(--bg) !important; }
body[data-theme="light"] header        { background: var(--bg2) !important; border-bottom: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
body[data-theme="light"] .main-layout  { background: var(--bg); }
body[data-theme="light"] .logo         { color: #0369a1 !important; }
body[data-theme="light"] .live-dot     { background: #15803d !important; }
body[data-theme="light"] .hbtn         { background: #fff !important; border-color: var(--dim2) !important; color: var(--text2) !important; }
body[data-theme="light"] .hbtn:hover, body[data-theme="light"] .hbtn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
body[data-theme="light"] #theme-selector { background: rgba(0,0,0,.06) !important; border-color: var(--dim2) !important; }
body[data-theme="light"] .font-btn     { background: #fff !important; color: var(--text2) !important; }
body[data-theme="light"] .font-btn:hover { background: var(--bg3) !important; color: var(--text) !important; }
body[data-theme="light"] .filter-btn   { background: #fff !important; border-color: var(--dim2) !important; color: var(--text) !important; }
body[data-theme="light"] .filter-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
body[data-theme="light"] .filter-label { color: var(--text2) !important; font-weight: 600 !important; }
body[data-theme="light"] .table-wrap, body[data-theme="light"] #spots-table { background: #fff; }
body[data-theme="light"] #spots-table thead th { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--dim) !important; font-weight: 700 !important; }
body[data-theme="light"] #spots-table tbody td { border-color: var(--dim) !important; color: var(--text) !important; }
body[data-theme="light"] tbody tr:hover td { background: rgba(3,105,161,.08) !important; }
body[data-theme="light"] tbody tr:nth-child(even) td { background: rgba(226,232,240,.5) !important; }
body[data-theme="light"] tbody tr:nth-child(even):hover td { background: rgba(3,105,161,.08) !important; }
body[data-theme="light"] .panel, body[data-theme="light"] .config-panel { background: #fff !important; border-color: var(--dim) !important; color: var(--text) !important; box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; }
body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] textarea { background: #fff !important; border-color: var(--dim2) !important; color: var(--text) !important; }
body[data-theme="light"] .stat-chip  { background: #fff !important; border-color: var(--dim) !important; color: var(--text) !important; }
/* ═══════════════════════════════════════════════════════════════
   TERMINAL TELNET
═══════════════════════════════════════════════════════════════ */

/* ── Onglet RBN ─────────────────────────────────────────────────── */
.tab-rbn-btn { color: #94a3b8 !important; opacity: .6; transition: all .3s; pointer-events: none; cursor: not-allowed; }
.tab-rbn-btn.rbn-live { pointer-events: auto; cursor: pointer;
  color: #fbbf24 !important; opacity: 1 !important;
  text-shadow: 0 0 8px rgba(251,191,36,.5);
  animation: rbn-pulse 2s infinite;
}
.tab-rbn-btn.rbn-live.active {
  border-color: #fbbf2444 !important;
  box-shadow: 0 -2px 8px rgba(251,191,36,.25) !important;
}
@keyframes rbn-pulse {
  0%,100% { text-shadow: 0 0 6px rgba(251,191,36,.4); }
  50%      { text-shadow: 0 0 14px rgba(251,191,36,.9); }
}
#tab-rbn { display:none; flex-direction:column; height:100%; overflow:hidden; }
#tab-rbn.active { display:flex; }
#rbn-toolbar {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:var(--bg2); border-bottom:1px solid var(--dim); flex-shrink:0;
  flex-wrap:wrap;
}
#rbn-count-badge {
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3);
  color:#fbbf24; border-radius:4px; padding:2px 8px;
}
#rbn-filter-call {
  font-family:var(--mono); font-size:12px; padding:3px 8px;
  border:1px solid var(--dim); border-radius:4px;
  background:var(--bg); color:var(--fg); outline:none; width:120px;
}
#rbn-filter-call:focus { border-color:#fbbf24; }
.rbn-clear-btn {
  font-family:var(--mono); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:4px; border:1px solid var(--dim);
  background:transparent; color:var(--dim2); cursor:pointer; transition:all .15s;
}
.rbn-clear-btn:hover { border-color:#f87171; color:#f87171; }
#rbn-status { font-family:var(--mono); font-size:11px; color:var(--dim2); margin-left:auto; }
#rbn-table-wrap { flex:1; overflow-y:auto; }
#rbn-table { width:100%; border-collapse:collapse; }
#rbn-table thead th {
  position:sticky; top:0; z-index:2; background:var(--bg2);
  padding:7px 10px; text-align:left; font-size:10px; font-weight:700;
  letter-spacing:.6px; color:var(--dim2); text-transform:uppercase;
  border-bottom:1px solid var(--dim); white-space:nowrap;
  cursor:pointer; user-select:none; transition:color .15s;
}
#rbn-table thead th:hover { color:var(--fg); }
#rbn-table tbody tr {
  border-bottom:1px solid var(--dim); transition:background .1s;
}
#rbn-table tbody tr:hover { background:var(--bg2); }
#rbn-table td { padding:6px 10px; white-space:nowrap; font-size:12px; font-family:var(--mono); }
.rbn-date   { color:var(--dim2); font-size:11px; }
.rbn-time   { color:var(--dim2); font-size:11px; }
.rbn-flag   { font-size:16px; line-height:1; }
.rbn-dx     { color:var(--green); font-weight:700; font-size:13px; letter-spacing:.3px; }
.rbn-freq   { color:var(--amber,#fbbf24); font-weight:700; }
.rbn-snr    { font-weight:700; font-size:11px; }
.rbn-quality { font-family:var(--mono); font-size:11px; font-weight:700; white-space:nowrap; }
/* CQ Zone pills — carrées, couleurs distinctes par continent */
.rbn-zones   { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.rbn-zone-pill {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:800;
  min-width:26px; height:22px; padding:0 6px;
  border-radius:4px; cursor:default; white-space:nowrap;
  border:1.5px solid transparent; letter-spacing:.3px;
  transition:transform .12s;
}
.rbn-zone-pill:hover { transform:scale(1.18); }
.rbn-zone-EU { background:#1a3557; color:#7dd3fc; border-color:#3b82f6; }
.rbn-zone-NA { background:#561a1a; color:#fca5a5; border-color:#ef4444; }
.rbn-zone-AS { background:#57341a; color:#fed7aa; border-color:#f97316; }
.rbn-zone-AF { background:#1a4228; color:#86efac; border-color:#22c55e; }
.rbn-zone-OC { background:#361a57; color:#d8b4fe; border-color:#a855f7; }
.rbn-zone-SA { background:#433500; color:#fde68a; border-color:#eab308; }
.rbn-zone-AN { background:#1e2a3a; color:#cbd5e1; border-color:#64748b; }
/* RBN badge dans commentaire POTA */
.hl-rbn { color:#fbbf24; font-weight:700; font-family:var(--mono); font-size:10px;
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3);
  border-radius:3px; padding:0 4px; letter-spacing:.3px; }
/* Spotter cell — drapeau plus discret */
.rbn-spotter-cell { display:flex; align-items:center; gap:5px; }
.rbn-spotter-cell .rbn-flag { opacity:.45; font-size:13px; }
.rbn-spotter { color:var(--dim2); font-size:11px; }

#rbn-mode-filters { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rbn-mode-pill {
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.4px;
  padding:3px 10px; border-radius:20px; border:1.5px solid var(--dim);
  background:transparent; color:var(--dim2); cursor:pointer; transition:all .15s;
  text-transform:uppercase;
}
.rbn-mode-pill:hover { border-color:var(--fg); color:var(--fg); }
.rbn-mode-pill.active { background:rgba(255,255,255,.08); color:var(--fg); border-color:var(--fg); }
.rbn-mode-pill[data-mode="ALL"]  { border-color:#64748b; color:#94a3b8; }
.rbn-mode-pill[data-mode="ALL"].active { border-color:#e2e8f0; color:#e2e8f0; background:rgba(226,232,240,.1); }
.rbn-mode-pill[data-mode="FT8"].active  { border-color:#00eeff; color:#00eeff; background:rgba(0,238,255,.08); }
.rbn-mode-pill[data-mode="CW"].active   { border-color:#ffd040; color:#ffd040; background:rgba(255,208,64,.08); }
.rbn-mode-pill[data-mode="FT4"].active  { border-color:#99ddff; color:#99ddff; background:rgba(153,221,255,.08); }
.rbn-mode-pill[data-mode="FT2"].active  { border-color:#b8aaff; color:#b8aaff; background:rgba(184,170,255,.08); }
.rbn-mode-pill[data-mode="SSB"].active  { border-color:#66ffaa; color:#66ffaa; background:rgba(102,255,170,.08); }
.rbn-mode-pill[data-mode="RTTY"].active { border-color:#ff9966; color:#ff9966; background:rgba(255,153,102,.08); }
.rbn-mode-pill[data-mode="PSK"].active  { border-color:#cc88ff; color:#cc88ff; background:rgba(204,136,255,.08); }

#rbn-empty {
  text-align:center; padding:60px 20px; color:var(--dim2);
  font-family:var(--mono); font-size:13px; line-height:1.8;
}

.tab-terminal-btn { color: var(--green) !important; }
.tab-terminal-btn.active { color: #22d3a0 !important; border-color: #22d3a044 !important; box-shadow: 0 -2px 8px rgba(34,211,160,.18) !important; }
#tab-terminal { display:none; flex-direction:column; height:100%; background:#0a0f0f; }
#tab-terminal.active { display:flex; }

/* ── Modal SPOT ─────────────────────────────────────────────────── */
#spot-modal-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  align-items:center; justify-content:center;
}
#spot-modal-overlay.open { display:flex; }
#spot-modal {
  background:#f1f5f9; border-radius:10px; padding:28px 36px 24px;
  width:540px; max-width:96vw; box-shadow:0 6px 30px rgba(0,0,0,.28);
  font-family: system-ui, sans-serif; color:#1e293b;
  position:relative;
}
#spot-modal h2 {
  margin:0 0 20px; font-size:17px; font-weight:700; color:#0f172a;
  display:flex; align-items:center; gap:8px;
}
#spot-modal h2 span.spot-icon { font-size:20px; }
.spot-field { margin-bottom:14px; }
.spot-field label {
  display:block; font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:#64748b; margin-bottom:5px;
}
.spot-field input, .spot-field select {
  width:100%; box-sizing:border-box;
  border:1.5px solid #cbd5e1; border-radius:6px;
  padding:9px 12px; font-size:14px; font-family:monospace;
  background:#fff; color:#0f172a; outline:none;
  transition:border-color .2s;
}
.spot-field input:focus, .spot-field select:focus { border-color:#3b82f6; }
.spot-field input:read-only { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.spot-field select { font-family:system-ui, sans-serif; cursor:pointer; }
.spot-field select option[value=""] { color:#94a3b8; }
#spot-dx-preview {
  display:flex; align-items:center; gap:8px; margin-top:6px;
  min-height:22px; font-size:13px; color:#334155;
}
#spot-dx-preview .fi { font-size:28px; }
#spot-dx-country { font-weight:700; font-size:15px; color:#1e40af; }
#spot-modal-footer { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }
#spot-cancel-btn {
  padding:9px 18px; border-radius:6px; border:1.5px solid #cbd5e1;
  background:#fff; color:#64748b; font-size:13px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
#spot-cancel-btn:hover { border-color:#94a3b8; color:#334155; }
#spot-send-btn {
  padding:9px 22px; border-radius:6px; border:none;
  background:#e2e8f0; color:#94a3b8; font-size:13px; font-weight:700;
  cursor:not-allowed; transition:all .2s; letter-spacing:.3px;
}
#spot-send-btn.ready {
  background:#3b82f6; color:#fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(59,130,246,.3);
}
#spot-send-btn.ready:hover {
  background:#2563eb;
  box-shadow:0 3px 12px rgba(59,130,246,.4);
  transform:translateY(-1px);
}

#spot-quick-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.spot-tag {
  padding:3px 9px; border-radius:4px; border:1px solid #cbd5e1;
  background:#fff; color:#475569; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .12s; user-select:none;
}
.spot-tag:hover { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }

#spot-close-x {
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:18px; color:#94a3b8; cursor:pointer; line-height:1;
}
#spot-close-x:hover { color:#334155; }

#term-connect-bar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:#0d1414; border-bottom:1px solid #1e3030; flex-shrink:0; }
#term-callsign-input { background:#0f1e1e; border:1px solid #2a4040; border-radius:4px; color:#22d3a0; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:2px; padding:5px 10px; width:130px; text-transform:uppercase; outline:none; }
#term-callsign-input:focus { border-color:#22d3a0; box-shadow:0 0 0 2px rgba(34,211,160,.15); }
#term-callsign-input::placeholder { color:#3a5555; letter-spacing:1px; font-weight:400; }
.term-btn { background:transparent; border:1px solid; border-radius:4px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:1px; padding:5px 12px; cursor:pointer; transition:all .2s; }
.term-btn-connect    { border-color:#22d3a0; color:#22d3a0; }
.term-btn-connect:hover  { background:rgba(34,211,160,.12); }
.term-btn-disconnect { border-color:#f87171; color:#f87171; }
.term-btn-disconnect:hover { background:rgba(248,113,113,.12); }
.term-btn-clear      { border-color:#22d3a0; color:#22d3a0; text-shadow:0 0 6px rgba(34,211,160,.5); }
.term-btn-clear:hover { background:rgba(34,211,160,.15); color:#fff; border-color:#22d3a0; box-shadow:0 0 8px rgba(34,211,160,.4); }
#term-status-badge { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:1px; padding:3px 10px; border-radius:3px; border:1px solid transparent; transition:all .3s; }
#term-status-badge.offline    { background:#1a1a1a; border-color:#333; color:#555; }
#term-status-badge.connecting { background:rgba(251,191,36,.1); border-color:#fbbf24; color:#fbbf24; animation:term-blink .8s infinite; }
#term-status-badge.online     { background:rgba(34,211,160,.1); border-color:#22d3a0; color:#22d3a0; }
#term-status-badge.error      { background:rgba(248,113,113,.1); border-color:#f87171; color:#f87171; }
@keyframes term-blink { 0%,100%{opacity:1} 50%{opacity:.4} }
#term-auto-cmds { display:flex; gap:6px; flex-wrap:wrap; margin-left:4px; }
.term-quick-btn { background:#0f1e1e; border:1px solid #2a4040; border-radius:3px; color:#6aacac; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.5px; padding:3px 8px; cursor:pointer; transition:all .15s; }
.term-quick-btn:hover { background:#1a3535; color:#22d3a0; border-color:#22d3a0; }
.term-quick-btn:disabled { opacity:.3; cursor:not-allowed; }
#term-output { flex:1; overflow-y:auto; padding:10px 14px; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:#a0c8c8; background:#080d0d; scroll-behavior:smooth; }
#term-output::-webkit-scrollbar { width:6px; }
#term-output::-webkit-scrollbar-track { background:#0d1414; }
#term-output::-webkit-scrollbar-thumb { background:#2a4040; border-radius:3px; }
.term-line { padding:0; margin:0; white-space:pre-wrap; word-break:break-all; }
.term-line-dx      { color:#7dd3c8; }
.term-line-own     { color:#fbbf24; font-weight:700; }
.term-line-info    { color:#4a7070; font-style:italic; }
.term-line-error   { color:#f87171; }
.term-line-welcome { color:#22d3a0; font-weight:700; }
.term-line-cmd     { color:#818cf8; }
.term-line-sys     { color:#fbbf24; }
#term-input-bar { display:flex; align-items:center; padding:6px 14px; background:#0d1414; border-top:1px solid #1e3030; flex-shrink:0; }
#term-prompt { font-family:var(--mono); font-size:13px; color:#22d3a0; font-weight:700; margin-right:6px; user-select:none; }
#term-input { flex:1; background:transparent; border:none; outline:none; font-family:var(--mono); font-size:13px; color:#e2f0f0; caret-color:#22d3a0; }
#term-input::placeholder { color:#2a4040; }
#term-input:disabled { opacity:.4; cursor:not-allowed; }
#term-send-btn { background:rgba(34,211,160,.08); border:1px solid #22d3a0; border-radius:3px; color:#22d3a0; font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 12px; cursor:pointer; transition:all .15s; margin-left:8px; text-shadow:0 0 6px rgba(34,211,160,.4); }
#term-send-btn:hover:not(:disabled) { background:rgba(34,211,160,.2); color:#fff; border-color:#22d3a0; box-shadow:0 0 10px rgba(34,211,160,.5); }
#term-send-btn:disabled { opacity:.2; cursor:not-allowed; }
#term-hint { padding:4px 14px 2px; font-family:var(--mono); font-size:10px; color:#2e4848; background:#0d1414; border-top:1px solid #121e1e; flex-shrink:0; }

body[data-theme="light"] .tabs-bar { background: var(--bg2) !important; border-bottom-color: var(--dim) !important; }
body[data-theme="light"] .tab        { background: var(--bg4) !important; color: var(--muted) !important; border-color: var(--dim) !important; border-bottom: 3px solid var(--dim) !important; box-shadow: 0 -1px 3px rgba(0,0,0,.1) !important; }
body[data-theme="light"] .tab:hover  { background: var(--bg2) !important; }
body[data-theme="light"] .tab.active { background: var(--bg3) !important; color: var(--accent) !important; border-color: var(--dim) !important; border-bottom: 3px solid var(--bg3) !important; font-weight: 700 !important; box-shadow: 0 -2px 6px rgba(99,102,241,.12) !important; }
body[data-theme="light"] .tab[disabled] { box-shadow: none !important; }
body[data-theme="light"] .tab[disabled]:hover { background: var(--bg3) !important; color: var(--text2) !important; }
body[data-theme="light"] .tab-content { background: #fff !important; border-color: var(--dim) !important; }
body[data-theme="light"] .rp-tab     { color: var(--text2) !important; }
body[data-theme="light"] .rp-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
body[data-theme="light"] .rp-panel   { background: var(--bg2) !important; }
body[data-theme="light"] .band-side-pill { background: #fff !important; border-color: var(--dim) !important; color: var(--text) !important; }
body[data-theme="light"] .band-side-pill.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
body[data-theme="light"] .filter-sep { background: var(--dim) !important; }
body[data-theme="light"] .callsign-search { background: #fff !important; border-color: var(--dim2) !important; color: var(--text) !important; }
body[data-theme="light"] tbody tr.new-spot { border-left-color: var(--accent) !important; }
body[data-theme="light"] .dxped-item  { background: #fff !important; border-color: var(--dim) !important; }
body[data-theme="light"] .dxped-call  { color: var(--text) !important; }
body[data-theme="light"] .dxped-country { color: var(--text2) !important; }
body[data-theme="light"] .dxped-dates  { color: var(--muted) !important; }
body[data-theme="light"] .rp-section-title { color: var(--text2) !important; border-bottom-color: var(--dim) !important; }
body[data-theme="light"] .gantt-label { color: var(--text2) !important; }
body[data-theme="light"] .gantt-day   { color: var(--muted) !important; }
body[data-theme="light"] .gantt-day.today { color: var(--accent) !important; }
body[data-theme="light"] .gantt-title { color: var(--text) !important; }
/* Pills — fond sombre → fond clair */
body[data-theme="light"] .spot-pill {
  background: rgba(3,105,161,.07) !important;
  border: 1px dashed rgba(3,105,161,.35) !important;
  color: var(--text2) !important;
}

body[data-theme="light"] .header-info { color: var(--text2) !important; }
body[data-theme="light"] .theme-dot[data-theme="light"] { border-color: var(--dim2) !important; }

/* mode-badge tableau principal */
body[data-theme="light"] .mode-badge    { background: rgba(0,0,0,.04) !important; border-color: var(--dim2) !important; color: var(--text2) !important; }
body[data-theme="light"] .mode-FT8  { color:#0369a1 !important; border-color:rgba(3,105,161,.4) !important;  background:rgba(3,105,161,.08) !important; }
body[data-theme="light"] .mode-FT4  { color:#4338ca !important; border-color:rgba(67,56,202,.4) !important;  background:rgba(67,56,202,.08) !important; }
body[data-theme="light"] .mode-FT2  { color:#6d28d9 !important; border-color:rgba(109,40,217,.4) !important;  background:rgba(109,40,217,.08) !important; }
body[data-theme="light"] .mode-CW   { color:#92400e !important; border-color:rgba(146,64,14,.4) !important;  background:rgba(146,64,14,.08) !important; }
body[data-theme="light"] .mode-SSB  { color:#15803d !important; border-color:rgba(21,128,61,.4) !important;  background:rgba(21,128,61,.08) !important; }
body[data-theme="light"] .mode-RTTY { color:#9f1239 !important; border-color:rgba(159,18,57,.4) !important;  background:rgba(159,18,57,.08) !important; }
body[data-theme="light"] .mode-PSK  { color:#6d28d9 !important; border-color:rgba(109,40,217,.4) !important; background:rgba(109,40,217,.08) !important; }
body[data-theme="light"] .mode-DIGI { color:#0f766e !important; border-color:rgba(15,118,110,.4) !important; background:rgba(15,118,110,.08) !important; }

/* filtres mode barre gauche */
body[data-theme="light"] .mode-side-pill { color: var(--text2) !important; }
body[data-theme="light"] .mode-side-pill:hover { background: rgba(0,0,0,.06) !important; color: var(--text) !important; }
body[data-theme="light"] .mode-side-pill.all-mode-pill.all-mode-active { color: var(--text) !important; background: rgba(0,0,0,.08) !important; border-color: var(--dim2) !important; }
body[data-theme="light"] .mode-side-pill[data-mode="FT8"]  { --mc: #0369a1; }
body[data-theme="light"] .mode-side-pill[data-mode="FT4"]  { --mc: #4338ca; }
body[data-theme="light"] .mode-side-pill[data-mode="FT2"]  { --mc: #6d28d9; }
body[data-theme="light"] .mode-side-pill[data-mode="CW"]   { --mc: #92400e; }
body[data-theme="light"] .mode-side-pill[data-mode="SSB"]  { --mc: #15803d; }
body[data-theme="light"] .mode-side-pill[data-mode="RTTY"] { --mc: #9f1239; }
body[data-theme="light"] .mode-side-pill[data-mode="DIGI"] { --mc: #6d28d9; }

/* ── Onglet PROPAG complet ── */
body[data-theme="light"] #rp-propagation  { background: #f0f4f8 !important; }

/* heatmap Band Activity */
body[data-theme="light"] #hm-widget       { background: #fff !important; border-radius: 6px; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 8px; }
body[data-theme="light"] .hm-title        { color: #0f172a !important; }
body[data-theme="light"] .hm-ctrl-label   { color: #334155 !important; }
body[data-theme="light"] .hm-select       { background: #fff !important; color: #0f172a !important; border-color: #94a3b8 !important; }
body[data-theme="light"] .hm-btn          { background: #e2e8f0 !important; color: #334155 !important; border-color: #94a3b8 !important; }
body[data-theme="light"] .hm-btn:hover    { background: #0369a1 !important; color: #fff !important; border-color: #0369a1 !important; }
body[data-theme="light"] .hm-label-band   { color: #0f172a !important; font-weight: 700 !important; }
body[data-theme="light"] .hm-label-cont   { color: #334155 !important; font-weight: 700 !important; }
body[data-theme="light"] .hm-legend-lbl   { color: #334155 !important; }
body[data-theme="light"] #hm-info         { color: #64748b !important; }
body[data-theme="light"] #hm-loading      { color: #64748b !important; }
body[data-theme="light"] #hm-tooltip      { background: #fff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 16px rgba(0,0,0,.15) !important; }
body[data-theme="light"] .tip-band        { color: #0f172a !important; }
body[data-theme="light"] .tip-route       { color: #334155 !important; }
body[data-theme="light"] .tip-sep         { background: #cbd5e1 !important; }
body[data-theme="light"] .tip-count       { color: #0f172a !important; }
body[data-theme="light"] .tip-spots-word  { color: #334155 !important; }
body[data-theme="light"] .tip-lbl         { color: #64748b !important; }

/* indices solaires header */
body[data-theme="light"] .propag-header   { background: #e2e8f0 !important; border-radius: 5px; padding: 6px 8px; margin-bottom: 8px; }
body[data-theme="light"] .propag-header-date { color: #64748b !important; }
body[data-theme="light"] .ph-idx-lbl      { color: #64748b !important; }
body[data-theme="light"] .ph-idx-val.good { color: #15803d !important; }
body[data-theme="light"] .ph-idx-val.fair { color: #92400e !important; }
body[data-theme="light"] .ph-idx-val.poor { color: #b91c1c !important; }
body[data-theme="light"] .ph-idx-val.neut { color: #0f172a !important; }

/* tableau bandes HF jour/nuit */
body[data-theme="light"] .bands-table-wrap   { background: #fff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; }
body[data-theme="light"] .bands-table-head   { background: #e2e8f0 !important; border-bottom: 1px solid #cbd5e1 !important; }
body[data-theme="light"] .bands-th-band      { color: #334155 !important; }
body[data-theme="light"] .bands-th-day       { color: #92400e !important; }
body[data-theme="light"] .bands-th-night     { color: #0369a1 !important; }
body[data-theme="light"] .propag-band-row    { border-bottom: 1px solid #e2e8f0 !important; }
body[data-theme="light"] .propag-band-row:hover { background: rgba(3,105,161,.06) !important; }
body[data-theme="light"] .pb-name            { color: #0f172a !important; }
body[data-theme="light"] .pb-bar-wrap        { background: #e2e8f0 !important; }
body[data-theme="light"] .pb-bar.good        { background: #15803d !important; }
body[data-theme="light"] .pb-bar.fair        { background: #d97706 !important; }
body[data-theme="light"] .pb-bar.poor        { background: #b91c1c !important; }
body[data-theme="light"] .pb-bar.enhanced    { background: #15803d !important; }
body[data-theme="light"] .pb-bar.degraded    { background: #b91c1c !important; }
body[data-theme="light"] .pb-bar.none        { background: #94a3b8 !important; }
body[data-theme="light"] .pb-label.good      { color: #15803d !important; }
body[data-theme="light"] .pb-label.fair      { color: #92400e !important; }
body[data-theme="light"] .pb-label.poor      { color: #b91c1c !important; }
body[data-theme="light"] .pb-label.enhanced  { color: #15803d !important; }
body[data-theme="light"] .pb-label.degraded  { color: #b91c1c !important; }
body[data-theme="light"] .pb-label.none      { color: #64748b !important; }

/* alertes météo spatiale */
body[data-theme="light"] .solar-section-title { color: #64748b !important; border-bottom: 1px solid #cbd5e1 !important; }
body[data-theme="light"] .solar-alert.ok   { background: rgba(21,128,61,.08) !important;  border: 1px solid rgba(21,128,61,.35) !important;  color: #15803d !important; }
body[data-theme="light"] .solar-alert.warn { background: rgba(146,64,14,.08) !important;  border: 1px solid rgba(146,64,14,.35) !important;  color: #92400e !important; }
body[data-theme="light"] .solar-alert.bad  { background: rgba(185,28,28,.08) !important;  border: 1px solid rgba(185,28,28,.35) !important;  color: #b91c1c !important; }

/* extra data (SFI, A, K...) */
body[data-theme="light"] .solar-extra-row  { border-bottom: 1px solid #e2e8f0 !important; }
body[data-theme="light"] .solar-extra-lbl  { color: #334155 !important; }
body[data-theme="light"] .solar-extra-val  { color: #0f172a !important; font-weight: 700 !important; }

/* ── Badges bandes (tableau) ── */
body[data-theme="light"] .band-badge  { background: rgba(0,0,0,.04) !important; }
body[data-theme="light"] .band-160m { color:#7c3aed !important; border-color:rgba(124,58,237,.4) !important; background:rgba(124,58,237,.07) !important; }
body[data-theme="light"] .band-80m  { color:#c2410c !important; border-color:rgba(194,65,12,.4)  !important; background:rgba(194,65,12,.07)  !important; }
body[data-theme="light"] .band-40m  { color:#a16207 !important; border-color:rgba(161,98,7,.4)   !important; background:rgba(161,98,7,.07)   !important; }
body[data-theme="light"] .band-30m  { color:#4d7c0f !important; border-color:rgba(77,124,15,.4)  !important; background:rgba(77,124,15,.07)  !important; }
body[data-theme="light"] .band-20m  { color:#0e7490 !important; border-color:rgba(14,116,144,.4) !important; background:rgba(14,116,144,.07) !important; }
body[data-theme="light"] .band-17m  { color:#0369a1 !important; border-color:rgba(3,105,161,.4)  !important; background:rgba(3,105,161,.07)  !important; }
body[data-theme="light"] .band-15m  { color:#4338ca !important; border-color:rgba(67,56,202,.4)  !important; background:rgba(67,56,202,.07)  !important; }
body[data-theme="light"] .band-12m  { color:#be185d !important; border-color:rgba(190,24,93,.4)  !important; background:rgba(190,24,93,.07)  !important; }
body[data-theme="light"] .band-10m  { color:#c2410c !important; border-color:rgba(194,65,12,.4)  !important; background:rgba(194,65,12,.07)  !important; }
body[data-theme="light"] .band-6m   { color:#15803d !important; border-color:rgba(21,128,61,.4)  !important; background:rgba(21,128,61,.07)  !important; }
body[data-theme="light"] .band-2m   { color:#7e22ce !important; border-color:rgba(126,34,206,.4) !important; background:rgba(126,34,206,.07) !important; }
body[data-theme="light"] .band-70cm { color:#475569 !important; border-color:rgba(71,85,105,.4)  !important; background:rgba(71,85,105,.07)  !important; }

/* ── Badges LoTW / eQSL ── */
body[data-theme="light"] .lotw-green  { color:#15803d !important; border-color:rgba(21,128,61,.45)  !important; background:rgba(21,128,61,.09)  !important; }
body[data-theme="light"] .lotw-blue   { color:#0369a1 !important; border-color:rgba(3,105,161,.45)  !important; background:rgba(3,105,161,.09)  !important; }
body[data-theme="light"] .lotw-purple { color:#6d28d9 !important; border-color:rgba(109,40,217,.45) !important; background:rgba(109,40,217,.09) !important; }
body[data-theme="light"] .lotw-red    { color:#b91c1c !important; border-color:rgba(185,28,28,.45)  !important; background:rgba(185,28,28,.09)  !important; }
body[data-theme="light"] .eqsl        { color:#92400e !important; border-color:rgba(146,64,14,.45)  !important; background:rgba(146,64,14,.09)  !important; }
body[data-theme="light"] .dxped-status.dxped-on-air  { color:#15803d !important; border-color:rgba(21,128,61,.5)   !important; background:rgba(21,128,61,.09)  !important; }
body[data-theme="light"] .dxped-status.dxped-recent  { color:#92400e !important; border-color:rgba(146,64,14,.5)   !important; background:rgba(146,64,14,.09)  !important; }
body[data-theme="light"] .dxped-status.dxped-inactive { color:#64748b !important; border-color:rgba(100,116,139,.4) !important; background:rgba(100,116,139,.07) !important; }
body[data-theme="light"] .dxped-status.dxped-upcoming { color:#0369a1 !important; border-color:rgba(3,105,161,.4)   !important; background:rgba(3,105,161,.07)  !important; }

/* ── Pills bandes barre gauche ── */
body[data-theme="light"] .band-side-pill[data-band="160m"] { --bc: #7c3aed; }
body[data-theme="light"] .band-side-pill[data-band="80m"]  { --bc: #c2410c; }
body[data-theme="light"] .band-side-pill[data-band="60m"]  { --bc: #b45309; }
body[data-theme="light"] .band-side-pill[data-band="40m"]  { --bc: #a16207; }
body[data-theme="light"] .band-side-pill[data-band="30m"]  { --bc: #4d7c0f; }
body[data-theme="light"] .band-side-pill[data-band="20m"]  { --bc: #0e7490; }
body[data-theme="light"] .band-side-pill[data-band="17m"]  { --bc: #0369a1; }
body[data-theme="light"] .band-side-pill[data-band="15m"]  { --bc: #4338ca; }
body[data-theme="light"] .band-side-pill[data-band="12m"]  { --bc: #be185d; }
body[data-theme="light"] .band-side-pill[data-band="10m"]  { --bc: #c2410c; }
body[data-theme="light"] .band-side-pill[data-band="6m"]   { --bc: #15803d; }
body[data-theme="light"] .band-side-pill[data-band="vhf"]  { --bc: #7e22ce; }
body[data-theme="light"] .band-side-pill[data-band="uhf"]  { --bc: #6d28d9; }
body[data-theme="light"] .band-side-pill[data-band="shf"]  { --bc: #475569; }

/* Band Bar SVG — fond et textes */
body[data-theme="light"] #bb-container,
body[data-theme="light"] #bb-wrap         { background: #f0f4f8 !important; }
body[data-theme="light"] #bb-tooltip      { background: #fff !important; color: var(--text) !important; border-color: var(--dim) !important; box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; }

/* ─── TROPICAL ───────────────────────────────────────── */
body[data-theme="tropical"] #band-sidebar { background: var(--bg2) !important; border-right: 2px solid #f0c040 !important; }
body[data-theme="tropical"] .rp-sidebar   { background: var(--bg2) !important; border-color: #f0c040 !important; }
body[data-theme="tropical"] #bb-container, body[data-theme="tropical"] #bb-wrap { background: var(--bg3) !important; }
body[data-theme="tropical"] header        { background: linear-gradient(90deg, #ff9f1c, #ffbf69, #cbf3f0, #2ec4b6) !important; border-bottom: 1px solid transparent !important; box-shadow: 0 2px 12px rgba(46,196,182,.3) !important; }
body[data-theme="tropical"] .logo         { color: #1a1200 !important; text-shadow: 0 1px 3px rgba(255,159,28,.4); letter-spacing: 2px !important; }
body[data-theme="tropical"] .live-dot     { background: #00875a !important; box-shadow: 0 0 8px rgba(0,135,90,.5) !important; }
body[data-theme="tropical"] .header-info  { color: #5a3800 !important; }
body[data-theme="tropical"] .hbtn         { background: #fff3d6 !important; border-color: #e0a020 !important; color: #5a3800 !important; }
body[data-theme="tropical"] .hbtn:hover, body[data-theme="tropical"] .hbtn.active { background: #2ec4b6 !important; border-color: #2ec4b6 !important; color: #fff !important; }
body[data-theme="tropical"] .font-btn     { background: #fff3d6 !important; color: #5a3800 !important; }
body[data-theme="tropical"] .font-btn:hover { background: #ffd97a !important; color: #1a1200 !important; }
body[data-theme="tropical"] #theme-selector { background: rgba(255,255,255,.3) !important; border-color: #e0a020 !important; }
body[data-theme="tropical"] .filter-label { color: #a06020 !important; font-weight: 700 !important; }
body[data-theme="tropical"] .filter-btn   { background: #fff3d6 !important; border-color: #e0a020 !important; color: #5a3800 !important; }
body[data-theme="tropical"] .filter-btn.active { background: #2ec4b6 !important; border-color: #2ec4b6 !important; color: #fff !important; }
body[data-theme="tropical"] .band-side-pill { background: #fff3d6 !important; border-color: #e0a020 !important; color: #5a3800 !important; }
body[data-theme="tropical"] .band-side-pill.active { background: #ff9f1c !important; border-color: #e07800 !important; color: #fff !important; }
body[data-theme="tropical"] .mode-side-pill { color: #5a3800 !important; }
body[data-theme="tropical"] .mode-side-pill:hover { background: rgba(0,0,0,.06) !important; color: #1a1200 !important; }
body[data-theme="tropical"] .mode-side-pill[data-mode="FT8"]  { --mc: #006eb5; }
body[data-theme="tropical"] .mode-side-pill[data-mode="FT4"]  { --mc: #7c20d4; }
body[data-theme="tropical"] .mode-side-pill[data-mode="FT2"]  { --mc: #9333ea; }
body[data-theme="tropical"] .mode-side-pill[data-mode="CW"]   { --mc: #c07000; }
body[data-theme="tropical"] .mode-side-pill[data-mode="SSB"]  { --mc: #00875a; }
body[data-theme="tropical"] .mode-side-pill[data-mode="RTTY"] { --mc: #c01040; }
body[data-theme="tropical"] .mode-side-pill[data-mode="DIGI"] { --mc: #2ec4b6; }

/* Tableau */
body[data-theme="tropical"] .table-wrap, body[data-theme="tropical"] #spots-table { background: #fff !important; }
body[data-theme="tropical"] #spots-table thead th { background: #ffe8b0 !important; color: #1a1200 !important; border-color: #f0c040 !important; }
body[data-theme="tropical"] #spots-table tbody td { color: #1a1200 !important; border-color: #ffe8b0 !important; }
body[data-theme="tropical"] tbody tr:nth-child(even) td { background: rgba(255,243,214,.6) !important; }
body[data-theme="tropical"] tbody tr:hover td { background: rgba(46,196,182,.08) !important; }
body[data-theme="tropical"] tbody tr.new-spot { border-left-color: #ff9f1c !important; }
body[data-theme="tropical"] .tabs-bar { background: var(--bg2) !important; border-bottom-color: #f0c040 !important; }
body[data-theme="tropical"] .tab        { background: var(--bg4) !important; color: #a06020 !important; border-color: #f0c040 !important; border-bottom: 3px solid #f0c040 !important; box-shadow: 0 -1px 3px rgba(0,0,0,.1) !important; }
body[data-theme="tropical"] .tab:hover  { background: var(--bg2) !important; }
body[data-theme="tropical"] .tab.active { background: var(--bg3) !important; color: #006eb5 !important; border-color: #f0c040 !important; border-bottom: 3px solid var(--bg3) !important; font-weight: 700 !important; box-shadow: 0 -2px 6px rgba(0,110,181,.12) !important; }
body[data-theme="tropical"] .tab[disabled] { box-shadow: none !important; }
body[data-theme="tropical"] .tab[disabled]:hover { background: var(--bg3) !important; color: #5a3800 !important; }
body[data-theme="tropical"] .tab-content { background: #fff !important; }
body[data-theme="tropical"] .rp-tab.active { color: #006eb5 !important; border-bottom-color: #006eb5 !important; }
body[data-theme="tropical"] .stat-chip  { background: #fff3d6 !important; border-color: #f0c040 !important; color: #5a3800 !important; }
body[data-theme="tropical"] input, body[data-theme="tropical"] select, body[data-theme="tropical"] textarea { background: #fff !important; border-color: #e0a020 !important; color: #1a1200 !important; }
body[data-theme="tropical"] .panel, body[data-theme="tropical"] .config-panel { background: #fff !important; border-color: #f0c040 !important; color: #1a1200 !important; }
body[data-theme="tropical"] .callsign-search { background: #fff !important; border-color: #e0a020 !important; color: #1a1200 !important; }

/* Badges mode */
body[data-theme="tropical"] .mode-FT8  { color:#006eb5 !important; border-color:rgba(0,110,181,.5)  !important; background:rgba(0,110,181,.09)  !important; }
body[data-theme="tropical"] .mode-FT4  { color:#7c20d4 !important; border-color:rgba(124,32,212,.5)  !important; background:rgba(124,32,212,.09)  !important; }
body[data-theme="tropical"] .mode-FT2  { color:#9333ea !important; border-color:rgba(147,51,234,.5)  !important; background:rgba(147,51,234,.09)  !important; }
body[data-theme="tropical"] .mode-CW   { color:#c07000 !important; border-color:rgba(192,112,0,.5)   !important; background:rgba(192,112,0,.09)   !important; }
body[data-theme="tropical"] .mode-SSB  { color:#00875a !important; border-color:rgba(0,135,90,.5)    !important; background:rgba(0,135,90,.09)    !important; }
body[data-theme="tropical"] .mode-RTTY { color:#c01040 !important; border-color:rgba(192,16,64,.5)   !important; background:rgba(192,16,64,.09)   !important; }
body[data-theme="tropical"] .mode-DIGI { color:#2ec4b6 !important; border-color:rgba(46,196,182,.5)  !important; background:rgba(46,196,182,.09)  !important; }

/* Badges bandes — palette arc-en-ciel tropical */
body[data-theme="tropical"] .band-160m { color:#7c20d4 !important; border-color:rgba(124,32,212,.5)  !important; background:rgba(124,32,212,.09)  !important; }
body[data-theme="tropical"] .band-80m  { color:#c01040 !important; border-color:rgba(192,16,64,.5)   !important; background:rgba(192,16,64,.09)   !important; }
body[data-theme="tropical"] .band-40m  { color:#c07000 !important; border-color:rgba(192,112,0,.5)   !important; background:rgba(192,112,0,.09)   !important; }
body[data-theme="tropical"] .band-30m  { color:#8a9a00 !important; border-color:rgba(138,154,0,.5)   !important; background:rgba(138,154,0,.09)   !important; }
body[data-theme="tropical"] .band-20m  { color:#2ec4b6 !important; border-color:rgba(46,196,182,.5)  !important; background:rgba(46,196,182,.09)  !important; }
body[data-theme="tropical"] .band-17m  { color:#006eb5 !important; border-color:rgba(0,110,181,.5)   !important; background:rgba(0,110,181,.09)   !important; }
body[data-theme="tropical"] .band-15m  { color:#0055a0 !important; border-color:rgba(0,85,160,.5)    !important; background:rgba(0,85,160,.09)    !important; }
body[data-theme="tropical"] .band-12m  { color:#c040a0 !important; border-color:rgba(192,64,160,.5)  !important; background:rgba(192,64,160,.09)  !important; }
body[data-theme="tropical"] .band-10m  { color:#e05c00 !important; border-color:rgba(224,92,0,.5)    !important; background:rgba(224,92,0,.09)    !important; }
body[data-theme="tropical"] .band-6m   { color:#00875a !important; border-color:rgba(0,135,90,.5)    !important; background:rgba(0,135,90,.09)    !important; }

/* Pills */
body[data-theme="tropical"] .spot-pill { background: rgba(46,196,182,.08) !important; border: 1px dashed rgba(46,196,182,.4) !important; color: #5a3800 !important; }


/* LoTW / eQSL */
body[data-theme="tropical"] .lotw-green  { color:#00875a !important; border-color:rgba(0,135,90,.5)   !important; background:rgba(0,135,90,.09)   !important; }
body[data-theme="tropical"] .lotw-blue   { color:#006eb5 !important; border-color:rgba(0,110,181,.5)  !important; background:rgba(0,110,181,.09)  !important; }
body[data-theme="tropical"] .lotw-purple { color:#7c20d4 !important; border-color:rgba(124,32,212,.5) !important; background:rgba(124,32,212,.09) !important; }
body[data-theme="tropical"] .lotw-red    { color:#c01040 !important; border-color:rgba(192,16,64,.5)  !important; background:rgba(192,16,64,.09)  !important; }
body[data-theme="tropical"] .eqsl        { color:#c07000 !important; border-color:rgba(192,112,0,.5)  !important; background:rgba(192,112,0,.09)  !important; }

/* DXped sidebar */
body[data-theme="tropical"] .dxped-item    { background: #fff !important; border-color: #f0c040 !important; }
body[data-theme="tropical"] .dxped-call    { color: #1a1200 !important; }
body[data-theme="tropical"] .dxped-country { color: #5a3800 !important; }
body[data-theme="tropical"] .dxped-status.dxped-on-air   { color:#00875a !important; border-color:rgba(0,135,90,.5)   !important; background:rgba(0,135,90,.1)   !important; }
body[data-theme="tropical"] .dxped-status.dxped-recent   { color:#c07000 !important; border-color:rgba(192,112,0,.5)  !important; background:rgba(192,112,0,.1)  !important; }
body[data-theme="tropical"] .dxped-status.dxped-inactive { color:#a06020 !important; border-color:rgba(160,96,32,.4)  !important; background:rgba(160,96,32,.07) !important; }
body[data-theme="tropical"] .dxped-status.dxped-upcoming { color:#006eb5 !important; border-color:rgba(0,110,181,.4)  !important; background:rgba(0,110,181,.08) !important; }
body[data-theme="tropical"] .rp-section-title { color: #a06020 !important; border-bottom-color: #f0c040 !important; }
body[data-theme="tropical"] .gantt-label   { color: #5a3800 !important; }
body[data-theme="tropical"] .gantt-day     { color: #a06020 !important; }
body[data-theme="tropical"] .gantt-day.today { color: #006eb5 !important; font-weight: 700 !important; }

/* Propag */
body[data-theme="tropical"] #rp-propagation { background: #fffbf0 !important; }
body[data-theme="tropical"] #hm-widget     { background: #fff !important; border: 1px solid #f0c040 !important; border-radius: 6px; padding: 8px; }
body[data-theme="tropical"] .hm-title      { color: #1a1200 !important; }
body[data-theme="tropical"] .hm-ctrl-label { color: #5a3800 !important; }
body[data-theme="tropical"] .hm-select     { background: #fff !important; color: #1a1200 !important; border-color: #e0a020 !important; }
body[data-theme="tropical"] .hm-btn        { background: #fff3d6 !important; color: #5a3800 !important; border-color: #e0a020 !important; }
body[data-theme="tropical"] .hm-btn:hover  { background: #2ec4b6 !important; color: #fff !important; border-color: #2ec4b6 !important; }
body[data-theme="tropical"] .hm-label-band { color: #1a1200 !important; font-weight: 700 !important; }
body[data-theme="tropical"] .hm-label-cont { color: #5a3800 !important; font-weight: 700 !important; }
body[data-theme="tropical"] .hm-legend-lbl { color: #5a3800 !important; }
body[data-theme="tropical"] #hm-info       { color: #a06020 !important; }
body[data-theme="tropical"] .bands-table-wrap { background: #fff !important; border: 1px solid #f0c040 !important; }
body[data-theme="tropical"] .bands-table-head { background: #ffe8b0 !important; border-bottom: 1px solid #f0c040 !important; }
body[data-theme="tropical"] .bands-th-band { color: #5a3800 !important; }
body[data-theme="tropical"] .bands-th-day  { color: #e05c00 !important; }
body[data-theme="tropical"] .bands-th-night { color: #006eb5 !important; }
body[data-theme="tropical"] .propag-band-row { border-bottom: 1px solid #ffe8b0 !important; }
body[data-theme="tropical"] .propag-band-row:hover { background: rgba(46,196,182,.07) !important; }
body[data-theme="tropical"] .pb-name       { color: #1a1200 !important; }
body[data-theme="tropical"] .pb-bar-wrap   { background: #ffe8b0 !important; }
body[data-theme="tropical"] .pb-bar.good, body[data-theme="tropical"] .pb-bar.enhanced { background: #00875a !important; }
body[data-theme="tropical"] .pb-bar.fair   { background: #e05c00 !important; }
body[data-theme="tropical"] .pb-bar.poor, body[data-theme="tropical"] .pb-bar.degraded { background: #c01040 !important; }
body[data-theme="tropical"] .pb-bar.none   { background: #c8b080 !important; }
body[data-theme="tropical"] .pb-label.good, body[data-theme="tropical"] .pb-label.enhanced { color: #00875a !important; }
body[data-theme="tropical"] .pb-label.fair { color: #c07000 !important; }
body[data-theme="tropical"] .pb-label.poor, body[data-theme="tropical"] .pb-label.degraded { color: #c01040 !important; }
body[data-theme="tropical"] .pb-label.none { color: #a06020 !important; }
body[data-theme="tropical"] .solar-section-title { color: #a06020 !important; border-bottom: 1px solid #f0c040 !important; }
body[data-theme="tropical"] .solar-alert.ok   { background:rgba(0,135,90,.08)   !important; border:1px solid rgba(0,135,90,.4)   !important; color:#00875a !important; }
body[data-theme="tropical"] .solar-alert.warn { background:rgba(192,112,0,.08)  !important; border:1px solid rgba(192,112,0,.4)  !important; color:#c07000 !important; }
body[data-theme="tropical"] .solar-alert.bad  { background:rgba(192,16,64,.08)  !important; border:1px solid rgba(192,16,64,.4)  !important; color:#c01040 !important; }
body[data-theme="tropical"] .solar-extra-row  { border-bottom: 1px solid #ffe8b0 !important; }
body[data-theme="tropical"] .solar-extra-lbl  { color: #5a3800 !important; }
body[data-theme="tropical"] .solar-extra-val  { color: #1a1200 !important; font-weight: 700 !important; }
body[data-theme="tropical"] .propag-header     { background: #ffe8b0 !important; border-radius: 5px; padding: 6px 8px; margin-bottom: 8px; }
body[data-theme="tropical"] .propag-header-date { color: #a06020 !important; }
body[data-theme="tropical"] .ph-idx-lbl       { color: #a06020 !important; }
body[data-theme="tropical"] .ph-idx-val.good  { color: #00875a !important; }
body[data-theme="tropical"] .ph-idx-val.fair  { color: #c07000 !important; }
body[data-theme="tropical"] .ph-idx-val.poor  { color: #c01040 !important; }
body[data-theme="tropical"] .ph-idx-val.neut  { color: #1a1200 !important; }

/* Band side pills couleurs arc-en-ciel */
body[data-theme="tropical"] .band-side-pill[data-band="160m"] { --bc: #7c20d4; }
body[data-theme="tropical"] .band-side-pill[data-band="80m"]  { --bc: #c01040; }
body[data-theme="tropical"] .band-side-pill[data-band="60m"]  { --bc: #c07000; }
body[data-theme="tropical"] .band-side-pill[data-band="40m"]  { --bc: #c07000; }
body[data-theme="tropical"] .band-side-pill[data-band="30m"]  { --bc: #8a9a00; }
body[data-theme="tropical"] .band-side-pill[data-band="20m"]  { --bc: #2ec4b6; }
body[data-theme="tropical"] .band-side-pill[data-band="17m"]  { --bc: #006eb5; }
body[data-theme="tropical"] .band-side-pill[data-band="15m"]  { --bc: #0055a0; }
body[data-theme="tropical"] .band-side-pill[data-band="12m"]  { --bc: #c040a0; }
body[data-theme="tropical"] .band-side-pill[data-band="10m"]  { --bc: #e05c00; }
body[data-theme="tropical"] .band-side-pill[data-band="6m"]   { --bc: #00875a; }

/* ─── ARCTIC ─────────────────────────────────────────── */
body[data-theme="arctic"] #band-sidebar { background: var(--bg2) !important; border-right-color: var(--dim2) !important; }
body[data-theme="arctic"] .rp-sidebar   { background: var(--bg2) !important; border-color: var(--dim2) !important; }
body[data-theme="arctic"] #bb-container { background: var(--bg2) !important; }
body[data-theme="arctic"] #bb-wrap      { background: var(--bg2) !important; }
body[data-theme="arctic"] header        { background: linear-gradient(90deg, #141b24, #1c2535) !important; border-bottom: none !important; box-shadow: 0 2px 12px rgba(0,212,255,.12) !important; }
body[data-theme="arctic"] .logo         { color: var(--cyan) !important; text-shadow: 0 0 20px rgba(0,212,255,.5); letter-spacing: 3px; }
body[data-theme="arctic"] .live-dot     { background: var(--cyan) !important; box-shadow: 0 0 8px var(--cyan); }
body[data-theme="arctic"] .hbtn.active, body[data-theme="arctic"] .hbtn:hover { background: rgba(0,212,255,.1) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; }
body[data-theme="arctic"] .filter-btn.active { background: rgba(0,212,255,.1) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; }
body[data-theme="arctic"] .tabs-bar  { background: var(--bg2) !important; border-bottom-color: var(--dim2) !important; }
body[data-theme="arctic"] .tab       { background: var(--bg4) !important; color: var(--muted) !important; border-bottom: 3px solid var(--dim2) !important; }
body[data-theme="arctic"] .tab.active { color: var(--cyan) !important; background: var(--bg3) !important; border-color: var(--dim2) !important; border-bottom: 3px solid var(--bg3) !important; box-shadow: 0 -2px 6px rgba(0,212,255,.12) !important; }
body[data-theme="arctic"] .band-side-pill.active { background: rgba(0,212,255,.12) !important; border-color: var(--cyan) !important; color: var(--cyan) !important; }
body[data-theme="arctic"] .rp-tab.active { color: var(--cyan) !important; border-color: var(--dim2) !important; }
body[data-theme="arctic"] thead th      { border-bottom-color: var(--cyan) !important; }
body[data-theme="arctic"] tbody tr:hover { background: rgba(0,212,255,.05) !important; }

/* ── Azimut tooltip (compass style) ──────────────────────────────────────── */
#az-tooltip {
  position: fixed; pointer-events: none; z-index: 9999;
  background: rgba(10,14,30,.97);
  border: 1px solid rgba(100,160,255,.3);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  display: none; white-space: nowrap;
  font-family: var(--mono);
  color: #e2e8f0;
  min-width: 260px; max-width: 320px;
}
.az-title {
  font-size: 14px; font-weight: 800; letter-spacing: .3px;
  color: #f0f8ff; margin-bottom: 10px;
  text-align: center;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.az-body {
  display: flex; align-items: flex-start; gap: 12px;
}
.az-flag-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.az-flag-big { font-size: 42px; line-height: 1; margin-bottom: 4px; }
.az-info-line {
  font-size: 11px; color: #94a3b8; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.az-info-line b { color: #cbd5e1; font-weight: 600; }
.az-compass-wrap {
  flex-shrink: 0; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.az-compass-wrap svg { width: 100px; height: 100px; display: block; }
/* Light / Tropical overrides */
body[data-theme="light"] #az-tooltip,
body[data-theme="tropical"] #az-tooltip {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(0,100,200,.2) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.15) !important;
  color: #1e293b !important;
}
body[data-theme="light"] .az-title,
body[data-theme="tropical"] .az-title { color: #0f172a !important; }
body[data-theme="light"] .az-info-line,
body[data-theme="tropical"] .az-info-line { color: #64748b !important; }
body[data-theme="light"] .az-info-line b,
body[data-theme="tropical"] .az-info-line b { color: #334155 !important; }


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR DOUBLE COLONNE — Mode | Bande
   Desktop : 130px fixe, pills 12px, centré
   Responsive : masquée sous 900px, bouton ☰ → drawer
═══════════════════════════════════════════════════════════════ */

/* Bouton hamburger — masqué sur desktop */
#sb-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg2);
  border: 1px solid var(--dim2);
  border-radius: 6px;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 6px;
  transition: all .15s;
}
#sb-toggle-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

/* Overlay drawer (mobile) */
#sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}
#sb-overlay.open { display: block; }

#band-sidebar {
  width: 130px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
  transition: transform .25s ease;
}
#band-sidebar::-webkit-scrollbar { width: 3px; }
#band-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius:2px; }

/* En-têtes colonnes */
.sb-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--dim);
  flex-shrink: 0;
}
.sb-col-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0 5px;
}
.sb-col-title:first-child {
  border-right: 1px solid var(--dim);
}

/* Grille double colonne */
.sb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}
.sb-col-modes {
  border-right: 1px solid var(--dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 4px;
}
.sb-col-bands {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 4px;
}

/* Pills bandes et modes */
.band-side-pill,
.mode-side-pill {
  width: 100%;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Couleurs repos */
.band-side-pill { color: #6680a8; }
.mode-side-pill { color: #6680a8; }

/* Hover */
.band-side-pill:hover,
.mode-side-pill:hover {
  background: rgba(255,255,255,.05);
  color: #94a3b8;
}

/* ALL pills */
.band-side-pill.all-pill,
.mode-side-pill.all-mode-pill {
  color: #718096;
  margin-bottom: 2px;
}
.band-side-pill.all-pill.all-active,
.mode-side-pill.all-mode-pill.all-mode-active {
  color: #e2e8f0;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

/* Couleurs bandes actives */
.band-side-pill[data-band="160m"] { --bc: #a78bfa; }
.band-side-pill[data-band="80m"]  { --bc: #f0abcc; }
.band-side-pill[data-band="60m"]  { --bc: #fdba74; }
.band-side-pill[data-band="40m"]  { --bc: #fcd34d; }
.band-side-pill[data-band="30m"]  { --bc: #bef264; }
.band-side-pill[data-band="20m"]  { --bc: #6ee7b7; }
.band-side-pill[data-band="17m"]  { --bc: #67e8f9; }
.band-side-pill[data-band="15m"]  { --bc: #93c5fd; }
.band-side-pill[data-band="12m"]  { --bc: #a5b4fc; }
.band-side-pill[data-band="10m"]  { --bc: #fca5a5; }
.band-side-pill[data-band="6m"]   { --bc: #86efac; }
.band-side-pill[data-band="vhf"]  { --bc: #d8b4fe; }
.band-side-pill[data-band="uhf"]  { --bc: #c4b5fd; }

.band-side-pill.active {
  color: var(--bc, #94a3b8) !important;
  border-color: var(--bc, #94a3b8) !important;
  background: color-mix(in srgb, var(--bc, #94a3b8) 12%, transparent) !important;
}

/* Couleurs modes actifs */
.mode-side-pill[data-mode="FT8"]  { --mc: #38bdf8; }
.mode-side-pill[data-mode="FT4"]  { --mc: #818cf8; }
.mode-side-pill[data-mode="FT2"]  { --mc: #a78bfa; }
.mode-side-pill[data-mode="CW"]   { --mc: #fbbf24; }
.mode-side-pill[data-mode="SSB"]  { --mc: #34d399; }
.mode-side-pill[data-mode="RTTY"] { --mc: #f87171; }
.mode-side-pill[data-mode="DIGI"] { --mc: #c084fc; }
.mode-side-pill[data-mode="AM"]   { --mc: #94a3b8; }
.mode-side-pill[data-mode="FM"]   { --mc: #7dd3fc; }

.mode-side-pill.active {
  color: var(--mc, #94a3b8) !important;
  border-color: var(--mc, #94a3b8) !important;
  background: color-mix(in srgb, var(--mc, #94a3b8) 12%, transparent) !important;
}

/* Séparateur VHF/UHF */
.band-side-sep {
  width: 80%;
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 3px auto;
}

/* Filtres communs bas de sidebar */
.sb-filters {
  flex-shrink: 0;
  border-top: 1px solid var(--dim);
  padding: 7px 5px 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.sb-filter-tag {
  border: 1px solid var(--dim2);
  border-radius: 4px;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: center;
  font-family: var(--mono);
  transition: all .12s;
  letter-spacing: .3px;
}
.sb-filter-tag:hover {
  border-color: var(--text2);
  color: var(--text2);
}
.sb-filter-tag[data-active="1"] {
  border-color: var(--green);
  color: var(--green);
  background: rgba(16,232,126,.08);
}
.sb-filter-wide { width: 100%; }
.sb-search-wrap { margin-top: 2px; }
.sb-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--dim2);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 6px;
  font-size: 10px;
  font-family: var(--mono);
  box-sizing: border-box;
}
.sb-search:focus { outline: none; border-color: var(--indigo); }
.sb-search::placeholder { color: var(--muted); }

/* ── RESPONSIVE : masquer sidebar < 900px ── */
@media (max-width: 900px) {
  #sb-toggle-btn { display: flex; }

  #band-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  #band-sidebar.sb-open {
    transform: translateX(0);
  }
}


/* header défini ligne 123 */

/* Zone gauche : logo */
.hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-block {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.logo-block svg {
  width: 120px;
  height: auto;
}

/* Zone centre : RIG widget */
.hdr-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Zone droite : boutons */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── RESPONSIVE : header mobile ── */
@media (max-width: 900px) {
  header {
    grid-template-columns: auto 1fr auto;
    padding: 8px 10px;
    gap: 8px;
  }

  /* Logo plus petit */
  .logo-block svg { width: 80px; }

  /* RIG masqué sur mobile */
  .hdr-center { display: none; }

  /* Droite : garder seulement l'essentiel */
  .hdr-right .font-group,
  .hdr-right #spin-icon,
  .hdr-right #refresh-btn,
  .hdr-right .help-btn { display: none; }

  /* Thème + Config restent visibles */
  .hdr-right #theme-selector,
  .hdr-right #auto-refresh-btn,
  .hdr-right .config-btn { display: flex; }
}

@media (max-width: 480px) {
  /* Sur smartphone : seulement logo + config */
  .hdr-right #theme-selector,
  .hdr-right #auto-refresh-btn { display: none; }
}