/* ============================================================================
   GNOSPHERA · css/gnosphera.css  (ex v2 — fedele al mockup app-tool.jsx)
   Re-skin shell sopra layout.css: STESSO DOM del sito (id/classi wf-*, hdr-*,
   mc-* invariati = motore JS intoccato), chrome "command center" del design:
   - top bar pillola centrata: brand · pillola ricerca ⌘K · icone · lang · avatar
   - pannello layer sx: accordion categorie (icona+nome+badge+chevron),
     righe layer dot+nome+count+src+pill ON/OFF (switch nativi NASCOSTI,
     restano nel DOM per layers.js; spinner caricamento sul dot via :has)
   - colonna moduli dx 300px + rail verticale
   - barra controlli mappa orizzontale basso-sx
   Tutto scopato sotto body.gv (carica DOPO layout.css e lo sovrascrive).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body.gv {
  --bg-0: #07070a;
  --bg-1: #0c0d11;
  --bg-2: #121319;
  --bg-3: #181a22;
  --line: #21232c;
  --line-2: #2d3039;
  --tx-hi: #eceef2;
  --tx-mid: #9a9ea8;
  --tx-low: #61656f;
  --accent: #ffc11e;
  --accent-2: #ffd54a;
  --accent-dim: rgba(255,193,30,.16);
  --accent-ink: #1a1206;
  --red: #d94a3d;
  --green: #34c24b;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Space Grotesk", var(--font-sans);
  --glass-bg: rgba(10,11,16,.72);
  --glass-bd: rgba(255,255,255,.09);

  background: var(--bg-0);
  color: var(--tx-hi);
  font-family: var(--font-sans);
}

/* colore identità per gruppo (dot layer, icona attiva) */
body.gv .wf-layer-group[data-group="realtime"]       { --gc: #ffc11e; }
body.gv .wf-layer-group[data-group="cyber"]          { --gc: #d94a3d; }
body.gv .wf-layer-group[data-group="space"]          { --gc: #38a7c9; }
body.gv .wf-layer-group[data-group="geofisica"]      { --gc: #f0832a; }
body.gv .wf-layer-group[data-group="geografia"]      { --gc: #5bbf8a; }
body.gv .wf-layer-group[data-group="infrastruttura"] { --gc: #9aa0b5; }
body.gv .wf-layer-group[data-group="sanita"]         { --gc: #34c24b; }
body.gv .wf-layer-group[data-group="meteo"]          { --gc: #4aa3ea; }
body.gv .wf-layer-group[data-group="geopolitica"]    { --gc: #a78bff; }
body.gv .wf-layer-group[data-group="umanitario"]     { --gc: #e08a4a; }

body.gv .glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
}

/* ============================================================
   GRID OFF → mappa full-bleed
   ============================================================ */
body.gv .app { display: block; height: 100vh; width: 100vw; }
body.gv .app-main { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
body.gv .app-main::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 46%, transparent 58%, rgba(5,6,16,.42) 92%);
}
body.gv #globe { position: absolute; inset: 0; }
body.gv .wf-deepdive { z-index: 80; background: var(--bg-0); }

/* ============================================================
   TOP BAR — pillola compatta centrata (gt-top)
   ============================================================ */
body.gv .app-header {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: calc(100vw - 120px);
  height: 52px; border-radius: 26px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
}
body.gv .hdr-left { display: flex; align-items: center; gap: 8px; flex: none; }
body.gv .hdr-right { display: flex; align-items: center; gap: 6px; flex: none; margin-left: 0; }
body.gv .hdr-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: 10px; }
body.gv .hdr-logo { height: 26px; width: auto; display: block; }
body.gv .hdr-logo-mark { display: none; }   /* desktop: wordmark; mobile: solo mark */
body.gv .hdr-brand-name {
  font: 700 14px var(--font-display); letter-spacing: .18em; color: var(--tx-hi);
}

/* pillola ricerca unificata (trigger overlay) */
body.gv .gv-cmdtrigger {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
  border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  color: var(--tx-low); font-size: 13px; cursor: text; min-width: 280px;
}
body.gv .gv-ct-txt { flex: 1; white-space: nowrap; overflow: hidden; }
body.gv .gv-kbd {
  font: 600 10px var(--font-mono); color: var(--tx-low);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 5px;
  background: rgba(255,255,255,.04);
}

/* icone tonde (quotazioni / campanella / tracker) */
body.gv .hdr-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; color: var(--tx-mid);
  display: grid; place-items: center; cursor: pointer;
  transition: background .14s, color .14s; position: relative;
}
body.gv .hdr-btn:hover { background: rgba(255,255,255,.07); color: var(--tx-hi); }
body.gv .hdr-btn-theme, body.gv .hdr-btn-sidebar { display: none; }

body.gv .hdr-quotes, body.gv .hdr-alert, body.gv .hdr-tracker { position: relative; }
body.gv .hdr-quotes-panel, body.gv .hdr-alert-panel {
  position: absolute; top: calc(100% + 16px); right: -8px;
  background: rgba(8,9,14,.97); border: 1px solid var(--line-2);
  border-radius: 14px; backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.85);
}

/* toggle lingua (design .lang-toggle) */
body.gv .gv-lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 10px; background: rgba(10,11,20,.55); border: 1px solid var(--line-2);
}
body.gv .gv-lang a {
  text-decoration: none; color: var(--tx-mid);
  font: 700 12px var(--font-mono); letter-spacing: .04em;
  padding: 6px 9px; border-radius: 7px; transition: all .14s;
}
body.gv .gv-lang a:hover { color: var(--tx-hi); }
body.gv .gv-lang a.on { background: var(--accent); color: var(--accent-ink); }

/* avatar account (design .gt-ava) */
body.gv .gv-ava {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #7c83ff, #38a7c9);
  display: grid; place-items: center; color: #fff; margin-left: 4px;
  text-decoration: none;
}
body.gv .gv-ava-guest { background: var(--bg-3); border: 1px solid var(--line-2); color: var(--tx-mid); }
body.gv .gv-ava-guest:hover { color: var(--tx-hi); border-color: var(--tx-low); }
/* avatar caricato: foto al posto del gradiente+icona (background-image inline) */
body.gv .gv-ava.has-img { background-size: cover; background-position: center; color: transparent; }

/* ============================================================
   BOOT SPLASH — copre il vuoto finché la mappa è pronta.
   Presente nell'HTML iniziale (paint immediato); globe.js la
   nasconde su evento 'load' via WF.hideSplash(). Barra
   indeterminata (i layer async non sono misurabili).
   ============================================================ */
body.gv .wf-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: radial-gradient(120% 120% at 50% 40%, var(--bg-1) 0%, var(--bg-0) 70%);
  transition: opacity .55s ease, visibility .55s ease;
}
body.gv .wf-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
body.gv .wf-splash-logo { width: 210px; height: auto; max-width: 70vw; animation: wf-splash-pulse 1.9s ease-in-out infinite; }
body.gv .wf-splash-name { font: 700 14px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--tx-hi); }
body.gv .wf-splash-bar { width: 180px; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
body.gv .wf-splash-bar i { display: block; height: 100%; width: 38%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: wf-splash-slide 1.15s ease-in-out infinite; }
body.gv .wf-splash-txt { font: 500 11px var(--font-mono); letter-spacing: .05em; color: var(--tx-low); }
@keyframes wf-splash-slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
@keyframes wf-splash-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ============================================================
   PANNELLO LAYER (sx) — accordion categorie (gt-side)
   ============================================================ */
body.gv .app-left {
  position: fixed; left: 14px; top: 90px; bottom: 96px; width: 272px;
  z-index: 40; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  transition: width .2s ease;
}
/* blur su pseudo separato: backdrop-filter sull'elemento che contiene lo
   scroller causa repaint mancati in Chromium/Edge (righe "sparite" dopo
   lo scroll) — il filtro deve vivere su un layer senza contenuto scrollabile */
body.gv .app-left::before, body.gv .app-right::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
body.gv .gv-sh {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-bottom: 1px solid var(--line-2); flex: none;
}
body.gv .gv-sh .ttl {
  flex: 1; font: 600 11px var(--font-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-mid);
  white-space: nowrap; overflow: hidden;
}
body.gv .gv-cl {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center; color: var(--tx-mid);
  cursor: pointer; border: none; background: transparent; font-size: 14px;
}
body.gv .gv-cl:hover { background: rgba(255,255,255,.06); color: #fff; }
body.gv .gv-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; transform: translateZ(0); }

/* --- testata categoria (gt-cathead) --- */
body.gv .wf-layer-group { background: transparent; border: none; margin: 0; padding: 0; }
body.gv .wf-layer-group-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px; cursor: pointer;
  background: transparent; border: none; white-space: nowrap; transition: .12s;
  user-select: none;
}
body.gv .wf-layer-group-header:hover { background: rgba(255,255,255,.05); }
body.gv .wf-layer-group:not(.is-collapsed) .wf-layer-group-header { background: rgba(255,193,30,.1); }
body.gv .wf-layer-group-header .wf-group-switch { display: none; }   /* switch gruppo via accordion */
/* icone categoria: SVG monocromatici (currentColor). Bianche di default,
   gialle SOLO quando la categoria ha almeno un layer attivo (.has-active). */
body.gv .gv-gico { width: 24px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx-hi); flex: none; }
body.gv .gv-gico svg { width: 16px; height: 16px; display: block; }
body.gv .wf-layer-group.has-active .gv-gico { color: var(--accent); }
body.gv .wf-layer-group-title {
  flex: 1; font: 400 13.5px var(--font-sans); color: var(--tx-hi);
  overflow: hidden; text-overflow: ellipsis;
  text-transform: none; letter-spacing: 0;
}
body.gv .wf-layer-group-count {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--accent); flex: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: #1a1206 !important; line-height: 18px; text-align: center;
  letter-spacing: 0; display: none;
}
body.gv .wf-layer-group.has-active .wf-layer-group-count { display: inline-block; }
body.gv .gv-chev { color: var(--tx-low); font-size: 10px; flex: none; width: 10px; }
body.gv .gv-chev::before { content: '▾'; }
body.gv .wf-layer-group.is-collapsed .gv-chev::before { content: '▸'; }
body.gv .wf-rmod.is-collapsed .gv-chev::before { content: '▸'; }

/* --- lista layer dentro la categoria (gt-sub) --- */
body.gv .wf-layer-list { padding: 2px 4px 8px 8px; }
body.gv .wf-layer-group.is-collapsed .wf-layer-list { display: none; }

/* riga layer (gt-lr): dot · nome · count · src · pill ON/OFF */
body.gv .wf-layer {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: 10px; cursor: pointer;
  border: none; background: transparent; margin: 0; user-select: none;
}
body.gv .wf-layer:hover { background: rgba(255,255,255,.05); }

/* switch nativo nascosto (resta nel DOM per layers.js) */
body.gv .wf-layer > .wf-switch { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* dot stato */
body.gv .wf-layer::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--line-2); transition: background .15s, box-shadow .15s;
}
body.gv .wf-layer.is-on::before {
  background: var(--gc, var(--accent));
  box-shadow: 0 0 8px var(--gc, var(--accent));
}
/* spinner caricamento: il dot diventa anello rotante */
body.gv .wf-layer:has(.wf-switch.is-loading)::before {
  background: transparent; border: 2px solid var(--gc, var(--accent));
  border-top-color: transparent; box-shadow: none; box-sizing: border-box;
  animation: gv-spin .7s linear infinite;
}
@keyframes gv-spin { to { transform: rotate(360deg); } }

body.gv .wf-layer-name {
  flex: 1; font: 400 13.5px var(--font-sans); color: var(--tx-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.gv .wf-layer.is-on .wf-layer-name { color: var(--tx-hi); }
body.gv .wf-layer-count {
  font: 600 11px var(--font-mono); color: var(--tx-mid); flex: none;
}
body.gv .wf-layer-src {
  font: 600 8px var(--font-mono); letter-spacing: .05em; color: var(--tx-low);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; flex: none;
}
body.gv .wf-layer-live-badge { display: none; }

/* pill ON/OFF */
body.gv .wf-layer::after {
  content: 'OFF'; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 9px; border-radius: 99px;
  font: 600 10px var(--font-sans); letter-spacing: .03em;
  border: 1px solid var(--line-2); color: var(--tx-mid);
}
body.gv .wf-layer.is-on::after {
  content: 'ON';
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}

/* sub-panel filtri layer (popolati dai source) */
body.gv .wf-sublist {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 9px; margin: 2px 6px 6px 16px;
}
body.gv .wf-layer-group.is-collapsed .wf-sublist,
body.gv .wf-layer-group.is-collapsed .wf-pulse-embed { display: none; }

/* --- collassato: solo icone categoria (scoped a .app-left: .gv-sh/.gv-chev
   sono condivisi col pannello dx, vanno limitati a sinistra) --- */
body.gv.gv-side-col .app-left { width: 56px; }
body.gv.gv-side-col .app-left .gv-sh .ttl { display: none; }
body.gv.gv-side-col .app-left .gv-sh { justify-content: center; }
body.gv.gv-side-col .app-left .wf-layer-group-title,
body.gv.gv-side-col .app-left .gv-chev,
body.gv.gv-side-col .app-left .wf-layer-list { display: none !important; }
body.gv.gv-side-col .app-left .wf-layer-group-header { justify-content: center; padding: 10px 0; position: relative; background: transparent; }
/* rail icone: badge numero layer attivi in alto a dx dell'icona */
body.gv.gv-side-col .wf-layer-group-count {
  position: absolute; top: 2px; right: 4px;
  min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px;
  font-size: 9.5px; line-height: 15px;
}

/* ============================================================
   COLONNA MODULI (dx) — accordion moduli (mirror pannello sx)
   ============================================================ */
body.gv .app-right {
  position: fixed; right: 14px; top: 90px; bottom: 96px; width: 300px;
  z-index: 40; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  transition: width .2s ease;
}
body.gv .gv-rscroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; transform: translateZ(0); }

/* sezione modulo = accordion (mirror .wf-layer-group) */
body.gv .wf-rmod { background: transparent; border: none; margin: 0; padding: 0; }
body.gv .wf-rmod-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; transition: .12s; user-select: none;
}
body.gv .wf-rmod-header:hover { background: rgba(255,255,255,.05); }
body.gv .wf-rmod:not(.is-collapsed) .wf-rmod-header { background: rgba(255,193,30,.1); }
/* icona modulo: bianca, gialla quando il modulo è aperto (selezionato) */
body.gv .gv-rico { width: 24px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx-hi); flex: none; }
body.gv .gv-rico svg { width: 16px; height: 16px; display: block; }
body.gv .wf-rmod:not(.is-collapsed) .gv-rico { color: var(--accent); }
body.gv .wf-rmod-title {
  flex: 1; font: 400 13.5px var(--font-sans); color: var(--tx-hi);
  overflow: hidden; text-overflow: ellipsis;
}
body.gv .wf-rmod-body { padding: 2px 4px 10px; }
body.gv .wf-rmod.is-collapsed .wf-rmod-body { display: none; }

/* contenuto moduli (ex .gv-rbody) */
body.gv .wf-rmod-body > section {
  background: transparent; border: none; border-radius: 0; margin: 0; padding: 6px 6px 0;
}
body.gv .wf-live-header, body.gv .wf-news-header, body.gv .wf-rmod-body .wf-pulse-header {
  background: transparent; border: none; padding: 0 0 11px;
}
/* titolo già nella testata accordion → nascondi i titoli interni */
body.gv .wf-rmod-body .wf-live-title, body.gv .wf-rmod-body .wf-news-title,
body.gv .wf-rmod-body .wf-pulse-title { display: none; }
body.gv .wf-live-header { display: flex; align-items: center; gap: 8px; }
body.gv .wf-live-count, body.gv .wf-news-count {
  font: 600 10px var(--font-mono); color: var(--tx-low); margin-left: auto;
}
/* griglia canali TV (design gt-tvgrid) */
body.gv #wf-live-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.gv .wf-live-ch {
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.02); transition: .13s; cursor: pointer;
}
body.gv .wf-live-ch:hover { border-color: var(--line-2); transform: translateY(-1px); }

body.gv .app-right-panels { padding: 6px 8px 10px; }
body.gv .app-right-panels:empty { display: none; }
body.gv .app-right-panels .wf-pulse { display: block; padding: 12px 0 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; margin: 0; }

/* --- collassato: solo icone moduli (mirror gv-side-col, scoped a .app-right:
   .gv-sh/.gv-chev sono condivisi col pannello sx) --- */
body.gv.gv-rail-col .app-right { width: 56px; }
body.gv.gv-rail-col .app-right .gv-sh .ttl { display: none; }
body.gv.gv-rail-col .app-right .gv-sh { justify-content: center; }
body.gv.gv-rail-col .app-right .wf-rmod-title,
body.gv.gv-rail-col .app-right .gv-chev,
body.gv.gv-rail-col .app-right .wf-rmod-body,
body.gv.gv-rail-col .app-right .app-right-panels { display: none !important; }
body.gv.gv-rail-col .app-right .wf-rmod-header { justify-content: center; padding: 10px 0; background: transparent; }

/* ============================================================
   BARRA CONTROLLI MAPPA — pillola orizzontale basso-sx (gt-views)
   ============================================================ */
body.gv .map-controls {
  position: fixed; left: 18px; bottom: 22px; top: auto; right: auto;
  z-index: 40; flex-direction: row; align-items: center; gap: 5px;
  padding: 6px; border-radius: 16px; display: flex; flex-wrap: nowrap;
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  width: auto; max-width: calc(100vw - 360px);
}
body.gv .mc-toggle { display: flex; flex-direction: row; gap: 5px; background: transparent; border: none; padding: 0; margin: 0; }
body.gv .mc-toggle button {
  padding: 8px 12px; border-radius: 11px; border: none; background: transparent;
  font: 600 11px var(--font-sans); letter-spacing: .04em; color: var(--tx-mid); cursor: pointer;
  min-width: 0; width: auto;
}
body.gv .mc-toggle button:hover { color: var(--tx-hi); background: rgba(255,255,255,.05); }
body.gv .mc-toggle button.is-active { background: var(--accent); color: var(--accent-ink); }
body.gv .mc-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 3px; }
body.gv .mc-zoom-bar { display: flex; flex-direction: row; align-items: center; gap: 4px; background: transparent; border: none; padding: 0; margin: 0; }
body.gv .mc-zoom-btn, body.gv .mc-pegman-btn, body.gv .mc-locate-btn, body.gv .mc-fullscreen-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent;
  display: grid; place-items: center; color: var(--tx-mid); cursor: pointer; font-size: 16px;
}
body.gv .mc-zoom-btn:hover, body.gv .mc-pegman-btn:hover, body.gv .mc-locate-btn:hover,
body.gv .mc-fullscreen-btn:hover { color: var(--tx-hi); background: rgba(255,255,255,.05); }
body.gv .mc-zoom-display { font: 600 11px var(--font-mono); color: var(--tx-low); min-width: 30px; text-align: center; }

/* freccetta collasso barra (chiude il "layer" a pillola minima) */
body.gv .mc-collapse-btn {
  width: 26px; height: 34px; border-radius: 10px; border: none; background: transparent;
  display: grid; place-items: center; color: var(--tx-mid); cursor: pointer; font-size: 14px;
}
body.gv .mc-collapse-btn:hover { color: var(--tx-hi); background: rgba(255,255,255,.05); }
body.gv.gv-mc-col .map-controls > *:not(.mc-collapse-btn) { display: none; }
body.gv.gv-mc-col .mc-collapse-btn { width: 34px; }

/* ============================================================
   CHIP LAYER ATTIVI — bottom center (gt-active)
   ============================================================ */
body.gv .gv-active {
  position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 30; align-items: center;
  max-width: max(320px, calc(100vw - 720px)); flex-wrap: wrap; justify-content: center;
  padding: 7px 12px; border-radius: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.8);
}
body.gv .gv-active .lbl {
  font: 600 10px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-low); margin-right: 2px;
}
body.gv .gv-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px;
  border-radius: 99px; font: 500 12px var(--font-sans); white-space: nowrap; color: var(--tx-hi);
}
body.gv .gv-chip .cd { width: 7px; height: 7px; border-radius: 50%; }
body.gv .gv-chip .x { color: var(--tx-low); cursor: pointer; margin-left: 2px; }
body.gv .gv-chip .x:hover { color: var(--red); }
body.gv .gv-more { position: relative; cursor: default; }
body.gv .gv-pop {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: 284px; max-height: 340px; overflow-y: auto; border-radius: 14px; padding: 8px; z-index: 50;
  background: rgba(6,8,13,.98); border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.85); backdrop-filter: blur(8px);
}
body.gv .gv-pop::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
body.gv .gv-pop-h { display: flex; align-items: center; padding: 6px 8px 10px; }
body.gv .gv-pop-h .t { font: 600 10px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-mid); }
body.gv .gv-pop-h .clr { margin-left: auto; font: 600 11px var(--font-sans); color: var(--tx-low); cursor: pointer; }
body.gv .gv-pop-h .clr:hover { color: var(--red); }
body.gv .gv-pop-r { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 9px; }
body.gv .gv-pop-r:hover { background: rgba(255,255,255,.06); }
body.gv .gv-pop-r .cd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
body.gv .gv-pop-r .nm { flex: 1; font-size: 13px; color: var(--tx-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gv .gv-pop-r .x { color: var(--tx-low); cursor: pointer; font-size: 13px; width: 18px; text-align: center; }
body.gv .gv-pop-r .x:hover { color: var(--red); }

/* ============================================================
   ⌘K — overlay ricerca layer + luoghi (gt-ovl)
   ============================================================ */
body.gv .gv-ovl {
  position: fixed; inset: 0; z-index: 90; background: rgba(4,5,12,.6);
  display: flex; justify-content: center; padding-top: 14vh;
}
body.gv .gv-ovl[hidden] { display: none; }
body.gv .gv-search { width: min(620px, 92vw); border-radius: 18px; padding: 8px; align-self: flex-start; }
body.gv .gv-si { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
body.gv .gv-si input {
  flex: 1; background: none; border: none; outline: none; color: var(--tx-hi);
  font: 500 17px var(--font-sans);
}
body.gv .gv-sres { max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--line); padding: 6px; }
body.gv .gv-shead {
  font: 600 10px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-low); padding: 10px 12px 4px;
}
body.gv .gv-sr { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
body.gv .gv-sr:hover, body.gv .gv-sr.sel { background: rgba(255,255,255,.06); }
body.gv .gv-sr .d { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
body.gv .gv-sr.on .d { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
body.gv .gv-sr .nm { flex: 1; font-size: 14px; color: var(--tx-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gv .gv-sr .cat {
  font: 600 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-low);
}
body.gv .gv-sr .st { font: 600 10px var(--font-mono); color: var(--accent); }
body.gv .gv-nores { padding: 18px; color: var(--tx-low); font-size: 14px; text-align: center; }

/* ============================================================
   FOOTER — micro-strip mono in basso, non invasiva
   ============================================================ */
body.gv .app-footer {
  position: fixed; left: 0; right: 0; bottom: 0; height: 26px;
  background: transparent; border: none; z-index: 20; padding: 0 14px;
  font-family: var(--font-mono); font-size: 10px; color: var(--tx-low);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
body.gv .app-footer * { pointer-events: auto; }
body.gv .ftr-stat-label { color: var(--tx-low); }
body.gv .ftr-stat-val { color: var(--tx-mid); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  body.gv .app-header { max-width: calc(100vw - 16px); padding: 0 8px; gap: 4px; }
  body.gv .gv-cmdtrigger { min-width: 0; flex: 1; }
  body.gv .gv-ct-txt { display: none; }
  body.gv .hdr-brand-name { display: none; }
  body.gv .hdr-btn-sidebar { display: grid; }
  body.gv .app-left, body.gv .app-right {
    transform: translateX(-110%); transition: transform .2s ease;
    width: min(300px, 86vw); top: 80px; bottom: 60px;
  }
  body.gv .app-right { right: 8px; left: auto; transform: translateX(120%); }
  body.gv .app-left { left: 8px; }
  body.gv .app-left.is-open, body.gv .app-right.is-open { transform: none; }
  body.gv .gv-vrail { display: none; }
  body.gv .gv-active { display: none; }
  body.gv .map-controls { left: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
  /* scrim legacy (layout.css z55) stava SOPRA i pannelli re-skin (z40):
     copriva il menu aperto e mangiava i tap → "tutto sfuocato, non clicco".
     Lo riporto sotto i pannelli: header 50 > pannello 40 > scrim 35 > mappa. */
  body.gv .sidebar-overlay { z-index: 35; top: 80px; bottom: 60px; }
}

/* scrollbar */
body.gv *::-webkit-scrollbar { width: 9px; height: 9px; }
body.gv *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
body.gv *::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   POPUP MARKER (re-skin Gnosphera del popup MapLibre wf-maplibre-popup)
   Sovrascrive lo stile worldfeed in layout.css: glass card ambra,
   raggio 14px, font IBM Plex, niente freccia (card flottante).
   ============================================================ */
body.gv .wf-maplibre-popup { z-index: 35; }
body.gv .wf-maplibre-popup .maplibregl-popup-content {
  background: rgba(12,13,18,.88);
  color: var(--tx-hi);
  border: 1px solid var(--glass-bd);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
}
body.gv .wf-maplibre-popup .maplibregl-popup-tip { display: none; }
body.gv .wf-maplibre-popup .maplibregl-popup-close-button {
  color: var(--tx-low);
  font-size: 17px;
  line-height: 1;
  padding: 4px 9px;
  right: 4px;
  top: 4px;
  border-radius: 8px;
}
body.gv .wf-maplibre-popup .maplibregl-popup-close-button:hover {
  color: var(--accent);
  background: var(--accent-dim);
}
body.gv .wf-popup-tag {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  border-radius: 5px;
  padding: 3px 7px;
}
body.gv .wf-popup-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-hi);
}
body.gv .wf-popup-subtitle { color: var(--tx-mid); }
body.gv .wf-popup-section { border-top-color: var(--line-2); }
body.gv .wf-popup-section-title { color: var(--tx-low); letter-spacing: .14em; }
body.gv .wf-popup-row span { color: var(--tx-mid); }
body.gv .wf-popup-row strong { color: var(--tx-hi); font-family: var(--font-mono); }
body.gv .wf-popup-foot { color: var(--tx-low); border-top-color: var(--line-2); }
body.gv .wf-popup-link { color: var(--accent); }
body.gv .wf-popup-link:hover { color: var(--accent-2); }

/* ─────────────────────────────────────────────────────────────
   HUD MSI-style hover sui marker (js/markers.js — design
   app-tool.jsx: card con angoli, scanline, righe animate, ping
   sul puntino; colore categoria via --hc)
   ───────────────────────────────────────────────────────────── */
body.gv .gv-hud { position: fixed; inset: 0; z-index: 46; pointer-events: none; --hc: #ffc11e; }
body.gv .gv-hud-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--hc); transform: translate(-50%,-50%);
  box-shadow: 0 0 12px var(--hc);
  animation: gvHudPing 1s ease-out infinite;
}
@keyframes gvHudPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hc) 60%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
body.gv .gv-hud-wrap { position: absolute; }
body.gv .gv-hud-card {
  position: relative; width: 240px; padding: 13px 14px 11px;
  background: linear-gradient(160deg, rgba(14,16,24,.92), rgba(8,10,16,.92));
  border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent);
  border-radius: 4px;
  box-shadow: 0 10px 34px -10px rgba(0,0,0,.7),
              0 0 22px -6px color-mix(in srgb, var(--hc) 60%, transparent),
              inset 0 0 22px -14px var(--hc);
  animation: gvHudPop .16s cubic-bezier(.2,.8,.3,1.2) both;
  overflow: hidden;
  font-family: var(--font-sans);
}
@keyframes gvHudPop { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
body.gv .gv-hud-card .b {
  position: absolute; width: 12px; height: 12px;
  border: 1.5px solid var(--hc);
  animation: gvHudBr .3s ease both .08s;
}
body.gv .gv-hud-card .b.tl { left: 1px; top: 1px; border-right: none; border-bottom: none; }
body.gv .gv-hud-card .b.tr { right: 1px; top: 1px; border-left: none; border-bottom: none; }
body.gv .gv-hud-card .b.bl { left: 1px; bottom: 1px; border-right: none; border-top: none; }
body.gv .gv-hud-card .b.br { right: 1px; bottom: 1px; border-left: none; border-top: none; }
@keyframes gvHudBr { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
body.gv .gv-hud-card .scan {
  position: absolute; left: 0; right: 0; height: 24px; top: -24px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hc) 26%, transparent), transparent);
  animation: gvHudScan .55s ease-out .05s 1 forwards;
}
@keyframes gvHudScan { from { top: -24px; } to { top: 100%; } }
body.gv .gv-hud-card .hh { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
body.gv .gv-hud-card .hh .g { color: var(--hc); font-size: 14px; }
body.gv .gv-hud-card .hh .ti {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; color: #fff; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.gv .gv-hud-card .hh .lv {
  font-family: var(--font-mono); font-weight: 700; font-size: 8px; letter-spacing: .14em;
  color: var(--hc); border: 1px solid color-mix(in srgb, var(--hc) 50%, transparent);
  border-radius: 4px; padding: 2px 5px;
}
body.gv .gv-hud-card .bar {
  height: 2px; background: linear-gradient(90deg, var(--hc), transparent);
  margin-bottom: 9px; transform-origin: left; animation: gvHudBar .32s ease both .1s;
}
@keyframes gvHudBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.gv .gv-hud-card .rows .r {
  display: flex; align-items: center; gap: 10px; padding: 3px 0;
  font-size: 11.5px; opacity: 0; animation: gvHudRow .26s ease forwards;
}
body.gv .gv-hud-card .rows .r:nth-child(1) { animation-delay: .12s; }
body.gv .gv-hud-card .rows .r:nth-child(2) { animation-delay: .18s; }
body.gv .gv-hud-card .rows .r:nth-child(3) { animation-delay: .24s; }
body.gv .gv-hud-card .rows .r:nth-child(4) { animation-delay: .30s; }
body.gv .gv-hud-card .rows .r:nth-child(5) { animation-delay: .36s; }
@keyframes gvHudRow { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
body.gv .gv-hud-card .rows .r span {
  width: 70px; flex: none; font-family: var(--font-mono); font-weight: 600;
  font-size: 9px; letter-spacing: .1em; color: var(--tx-low); text-transform: uppercase;
}
body.gv .gv-hud-card .rows .r b {
  color: #e9ebf0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.gv .gv-hud-card .rows .r b.mono { font-family: var(--font-mono); font-size: 11px; }
body.gv .gv-hud-card .ft {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-low); opacity: 0; animation: gvHudRow .26s ease forwards .34s;
}
/* niente HUD su dispositivi touch (hover assente) */
@media (hover: none) { body.gv .gv-hud { display: none; } }

/* ─────────────────────────────────────────────────────────────
   POPUP CLICK = stessa veste della HUD card (design mockup,
   vale per TUTTE le popup .wf-maplibre-popup dei 67 source).
   --hc = colore categoria, iniettato da markers.js all'apertura
   (ultimo marker in hover); fallback ambra. Angoli L disegnati
   con background multipli (niente markup extra nei source).
   ───────────────────────────────────────────────────────────── */
body.gv .wf-maplibre-popup { --hc: var(--accent); }
body.gv .wf-maplibre-popup .maplibregl-popup-content {
  background-image:
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(var(--hc), var(--hc)),
    linear-gradient(160deg, rgba(14,16,24,.95), rgba(8,10,16,.95));
  background-size:
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    100% 100%;
  background-position:
    left 1px top 1px,  left 1px top 1px,
    right 1px top 1px, right 1px top 1px,
    left 1px bottom 1px,  left 1px bottom 1px,
    right 1px bottom 1px, right 1px bottom 1px,
    0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent);
  border-radius: 4px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 34px -10px rgba(0,0,0,.7),
              0 0 22px -6px color-mix(in srgb, var(--hc) 60%, transparent),
              inset 0 0 22px -14px var(--hc);
}
body.gv .wf-maplibre-popup .maplibregl-popup-close-button:hover {
  color: var(--hc);
  background: color-mix(in srgb, var(--hc) 16%, transparent);
}
body.gv .wf-popup-tag {
  background: transparent !important;   /* i source mettono background inline */
  color: var(--hc) !important;
  border: 1px solid color-mix(in srgb, var(--hc) 50%, transparent);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
}
body.gv .wf-popup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: #fff;
}
body.gv .wf-popup-subtitle {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

/* ============================================================
   PANNELLI HEADER (campanella avvisi + quotazioni) — re-skin
   card Gnosphera, uniforme a popup marker e pannelli laterali:
   glass scuro blur 14, raggio 14, label mono uppercase, accent.
   ============================================================ */
body.gv .hdr-quotes-panel, body.gv .hdr-alert-panel {
  width: 340px;
  background: rgba(12,13,18,.92);
  border: 1px solid var(--glass-bd);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  padding: 8px;
}
body.gv .wf-alert-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 2px;
}
body.gv .wf-alert-title {
  font: 600 11px var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-mid);
}
body.gv .wf-alert-total {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 6px;
  padding: 2px 7px;
}
body.gv .wf-alert-group {
  padding: 11px 10px 5px;
  margin-top: 4px;
  border-top: 1px solid var(--line-1, rgba(255,255,255,.04));
}
body.gv .wf-alert-head + .wf-alert-group,
body.gv .wf-alert-group:first-child { border-top: none; }
body.gv .wf-alert-group-lbl {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-low);
}
body.gv .wf-alert-group-cnt {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tx-low);
}
body.gv .wf-alert-row { border-radius: 8px; padding: 7px 10px; }
body.gv .wf-alert-row:hover { background: var(--accent-dim); }
body.gv .wf-alert-row-name { font-size: 12px; color: var(--tx-hi); }
body.gv .wf-alert-row-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tx-low);
}
body.gv .wf-alert-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
}
body.gv .wf-alert-empty { color: var(--tx-mid); }
body.gv .wf-alert-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--tx-low);
  border-top: 1px solid var(--line-2);
}
body.gv .wf-popup-section {
  border-top: none;
  position: relative;
  margin-top: 9px;
  padding-top: 10px;
}
body.gv .wf-popup-section::before {
  content: '';
  position: absolute;
  left: 0; right: 30%; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hc), transparent);
}
/* label sinistra: mono uppercase, ma leggibile (non più grigio scuro) */
body.gv .wf-popup-row span {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
/* valore secondario (span di destra): bianco e leggibile, non più stile-label */
body.gv .wf-popup-row > span:last-child:not(:first-child),
body.gv .wf-popup-row > span:last-child:not(:first-child) * {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  opacity: 1 !important;
}
body.gv .wf-popup-row strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11.5px;
  color: #fff;
}
body.gv .wf-popup-foot {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  border-top: 1px solid var(--line);
}
body.gv .wf-popup-link { color: var(--hc); }
body.gv .wf-popup-link:hover { color: #fff; }

/* popup lunghe (es. voli): altezza max + scroll interno, niente taglio */
body.gv .wf-maplibre-popup .wf-popup {
  max-height: min(58vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hc) 45%, transparent) transparent;
}
body.gv .wf-maplibre-popup .wf-popup::-webkit-scrollbar { width: 5px; }
body.gv .wf-maplibre-popup .wf-popup::-webkit-scrollbar-track { background: transparent; }
body.gv .wf-maplibre-popup .wf-popup::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--hc) 45%, transparent);
  border-radius: 3px;
}
/* scrollbar a tema su QUALUNQUE elemento scrollabile dentro la popup
   (.wf-popup o .maplibregl-popup-content): batte la generica body.gv * 9px grigia */
body.gv .wf-maplibre-popup .maplibregl-popup-content {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--hc) 55%, transparent) transparent;
}
body.gv .wf-maplibre-popup ::-webkit-scrollbar { width: 6px; height: 6px; }
body.gv .wf-maplibre-popup ::-webkit-scrollbar-track { background: transparent; }
body.gv .wf-maplibre-popup ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--hc) 55%, transparent);
  border-radius: 99px;
}
body.gv .wf-maplibre-popup ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--hc) 80%, transparent);
}

/* ============================================================
   MODULO WEBCAM (menu destro) — griglia thumbnail live + lightbox
   (js/webcam-panel.js). Feature Premium (configuratore account/webcam).
   ============================================================ */
body.gv .wf-webcam { padding: 4px 2px 2px; }
body.gv .wf-wc-msg {
  padding: 16px 12px; font: 400 12.5px var(--font-sans); line-height: 1.5;
  color: var(--tx-mid); text-align: center;
}
body.gv .wf-wc-msg strong { color: var(--tx-hi); }
body.gv .wf-wc-msg a {
  display: inline-block; margin-top: 8px; color: var(--accent-ink);
  background: var(--accent); padding: 6px 12px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 12px;
}
body.gv .wf-wc-msg a:hover { background: var(--accent-2); }
body.gv .wf-wc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 8px; font: 600 11px var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tx-low);
}
body.gv .wf-wc-cfg { color: var(--accent); text-decoration: none; }
body.gv .wf-wc-cfg:hover { color: var(--accent-2); }
body.gv .wf-wc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
body.gv .wf-wc-tile {
  position: relative; padding: 0; border: 1px solid var(--line-2);
  border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--bg-3);
  aspect-ratio: 16/10; display: block; transition: border-color .14s, transform .14s;
}
body.gv .wf-wc-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
body.gv .wf-wc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.gv .wf-wc-media { position: absolute; inset: 0; background: var(--bg-3); }
body.gv .wf-wc-media img,
body.gv .wf-wc-media video,
body.gv .wf-wc-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
body.gv .wf-wc-exp {
  position: absolute; top: 5px; left: 5px; z-index: 3;
  width: 24px; height: 24px; border: none; border-radius: 6px; cursor: pointer;
  background: rgba(8,9,14,.66); color: #fff; font-size: 12px; line-height: 1;
  display: grid; place-items: center; opacity: 0; transition: opacity .14s;
}
body.gv .wf-wc-tile:hover .wf-wc-exp { opacity: 1; }
body.gv .wf-wc-noimg {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--tx-low); font-size: 22px;
}
body.gv .wf-wc-noimg.big { font-size: 48px; min-height: 240px; }
body.gv .wf-wc-badge {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  background: rgba(8,9,14,.78); color: #fff; font: 700 9px var(--font-mono);
  letter-spacing: .06em; padding: 2px 6px; border-radius: 5px;
}
body.gv .wf-wc-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 7px 5px; text-align: left;
  background: linear-gradient(transparent, rgba(6,7,12,.92));
  display: flex; flex-direction: column; gap: 1px;
}
body.gv .wf-wc-cap b {
  font: 600 11px var(--font-sans); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.gv .wf-wc-cap i {
  font: 400 9.5px var(--font-sans); font-style: normal; color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* lightbox */
body.gv .wf-wc-lb {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(4,5,10,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 4vh 4vw;
}
body.gv .wf-wc-lb.is-open { display: flex; }
body.gv .wf-wc-lb-in {
  position: relative; width: min(900px, 92vw); background: var(--bg-1);
  border: 1px solid var(--glass-bd); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
body.gv .wf-wc-lb-x {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(8,9,14,.7); color: #fff; font-size: 20px; line-height: 1;
}
body.gv .wf-wc-lb-x:hover { background: var(--accent); color: var(--accent-ink); }
body.gv .wf-wc-lb-media { width: 100%; aspect-ratio: 16/9; background: #000; }
body.gv .wf-wc-lb-media img,
body.gv .wf-wc-lb-media video,
body.gv .wf-wc-lb-media iframe { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; }
body.gv .wf-wc-lb-cap {
  padding: 10px 14px; font: 400 13px var(--font-sans); color: var(--tx-hi);
  display: flex; align-items: center; gap: 8px;
}
body.gv .wf-wc-lb-cap span { margin-left: auto; color: var(--tx-low); font-size: 11px; }

/* ============================================================
   LEGENDA sub-panel (pallino colore + label, chip non spezzabili)
   ============================================================ */
body.gv .wf-sublist-legend {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  padding: 8px 2px 2px; font: 500 11px var(--font-sans); color: var(--tx-mid);
}
body.gv .wf-sublist-legend .wf-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
body.gv .wf-sublist-legend .wf-leg i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ============================================================
   MODULO METEO (Windy Map Forecast) — sidebar dx
   ============================================================ */
body.gv .wf-windy { display: flex; flex-direction: column; gap: 7px; }
body.gv .wf-windy-bar { display: flex; flex-wrap: wrap; gap: 4px; }
body.gv .wf-windy-ov {
  font: 600 11px var(--font-sans); padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--tx-mid); cursor: pointer; transition: .13s;
}
body.gv .wf-windy-ov:hover { color: var(--tx-hi); }
body.gv .wf-windy-ov.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
body.gv .wf-windy-map {
  width: 100%; height: 300px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
}
body.gv .wf-windy-load { font: 500 12px var(--font-sans); color: var(--tx-low); padding: 10px; text-align: center; }

/* ============================================================
   MOBILE (≤991px) — header compatto + pannello avvisi centrato
   - solo il logo MARK (libera spazio → hamburger dx visibile)
   - hamburger sx/dx un filo più grandi (target touch)
   - pannello "Avvisi in tempo reale" centrato a schermo (non ancorato
     al bordo destro, dove sforava)
   ============================================================ */
@media (max-width: 991px) {
  /* header full-width ancorato (non pillola centrata): così l'ultimo
     elemento — l'hamburger destro — non sfora oltre il bordo e non viene
     tagliato dall'overflow:hidden del body. La ricerca (flex:1) assorbe. */
  body.gv .app-header {
    left: 8px; right: 8px;
    width: auto; max-width: none;
    transform: none;
  }

  body.gv .hdr-logo-full { display: none; }
  body.gv .hdr-logo-mark { display: block; height: 30px; }
  body.gv .hdr-brand { margin-right: 4px; }

  body.gv .hdr-btn-sidebar { display: grid; width: 38px; height: 38px; }

  /* comandi mappa: scroll orizzontale (non si tagliano più i bottoni a destra) */
  body.gv .map-controls {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    flex-wrap: nowrap;
  }
  body.gv .map-controls::-webkit-scrollbar { display: none; }   /* WebKit: barra nascosta */
  body.gv .map-controls > * { flex: 0 0 auto; }                 /* i bottoni non si comprimono */

  /* barra "ATTIVI" (layer/pannelli attivi): visibile su mobile, full-width
     scrollabile sopra i comandi mappa (era display:none) */
  body.gv .gv-active {
    display: flex;
    left: 8px; right: 8px; transform: none;
    bottom: 60px;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.gv .gv-active::-webkit-scrollbar { display: none; }
  body.gv .gv-active > * { flex: 0 0 auto; }

  /* TV in diretta: su mobile righe orizzontali (thumb fisso sx + nome dx).
     La griglia 2-col + max-height:38vh schiacciava 22 canali in poco spazio
     (con overflow:hidden sulla card si vedeva solo una striscia di thumb).
     1 colonna, niente max-height interno → scorre la sidebar. */
  body.gv #wf-live-list {
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }
  body.gv #wf-live-list .wf-live-ch {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px;
  }
  body.gv #wf-live-list .wf-live-ch-thumb {
    width: 96px;
    flex: 0 0 96px;
    aspect-ratio: 16 / 9;   /* altezza ~54px, non più schiacciata */
  }
  body.gv #wf-live-list .wf-live-ch-body { flex: 1 1 auto; min-width: 0; }

  /* niente layer borse ($) su mobile (declutter header) */
  body.gv .hdr-quotes { display: none; }

  /* niente hint tastiera ⌘K su mobile (non c'è tastiera) */
  body.gv .gv-kbd { display: none; }

  body.gv .hdr-alert-panel {
    position: fixed;
    top: 80px; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(420px, 94vw);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    z-index: 60;
  }
}