/* valuebetfinder.xyz — built against design/DESIGN_SYSTEM.md
   Tokens are the single source of truth. Do not hardcode a color below the :root block. */

@font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jbmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Neutri con una punta di blu invece che grigi puri: su uno schermo il grigio
     neutro sembra sporco accanto ai verdi e ai rossi saturi, e i pannelli si
     staccano meglio se ogni superficie sale di un gradino vero. */
  --bg-base: #080A0E;
  --bg-surface: #10141B;
  --bg-raised: #181D26;
  --bg-inset: #0B0E13;
  --border-subtle: #1E242E;
  --border-default: #2B3340;
  --border-strong: #414B5C;

  --text-primary: #EAEEF4;
  --text-secondary: #A3ADBB;
  /* Era 3,89 su fondo pannello: sotto la soglia leggibile, e ci stanno tutte le
     etichette e le note. Ora 4,6. */
  --text-tertiary: #7B8593;

  --long: #3DDC84;
  --short: #FF5C5C;
  --funding: #F5A623;
  /* Era #4DA3FF: saturazione 100%, e su fondo scuro un blu a croma piena
     fosforeggia. Il difetto non era il contrasto — 7,03 su pannello, sopra
     soglia — ma il fatto che indirizzi e link gridassero piu' dei valori che
     accompagnano, e sono la cosa che si guarda meno e si vede di piu'. Stessa
     famiglia di tinta (211° -> 205°), saturazione 46%, e il contrasto sale
     invece di scendere: 8,78 su pannello, 9,43 su fondo pagina, 8,04 su riga
     alzata. Spento, non sbiadito. */
  --accent: #8FB8D6;
  --whale: #A78BFA;
  --neutral-bar: #3A4350;

  /* I colori dei grafici stanno qui e non nel JavaScript: erano esadecimali
     fissi, e con i temi le curve sarebbero rimaste dell'unico colore pensato
     per il fondo scuro — leggibili su uno dei tre e basta. */
  --viz-series: #3987e5;
  --viz-volume: #d95926;
  --viz-price: #7d8894;
  --viz-grid: #1F242D;
  --viz-axis: #2A313C;
  --viz-ink: #6B7480;
  --viz-surface: #0D1016;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Altezza REALE occupata dalla topbar: 48 di contenuto piu' 1 di bordo.
     Le intestazioni sticky ci si ancorano. Ancorate a 48 restava un varco di
     un pixel fra barra e testata, e in quel varco si vedevano scorrere i
     numeri delle righe sotto — una banda sottile in movimento. */
  --topbar-h: 49px;

  /* Stretti di proposito: la tabella principale e la colonna eventi stanno
     affiancate, e ogni pixel di margine e' uno in meno per i dati. */
  --pad-page: 16px;
  --max-w: 1860px;

  /* Larghezza della colonna eventi. Sotto i 340 le righe dei wallet vanno a
     capo e la lettura a colpo d'occhio si perde, che e' il suo unico scopo. */
  --events-w: 380px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
}

/* Il foglio non aveva una regola base per <a>, e questo era il vero blu acceso.
   I link con una classe passavano dai token; quelli senza — Explorer nella tabella
   accumulatori e nel registro entita' — cadevano sul link di default del browser,
   #0000EE, che nessuna palette qui ha mai scelto e che su fondo scuro e' fuori
   scala. Non era il token a essere sbagliato: era che meta' dei link non lo
   usavano. La sottolineatura compare al passaggio, non a riposo: in una tabella
   con un link per riga sottolineare sempre disegna una griglia che non c'e'. */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pos  { color: var(--long); }
.neg  { color: var(--short); }
.warn { color: var(--funding); }
.muted{ color: var(--text-tertiary); }

/* Tendine dei filtri.
 *
 * Select native e non un menu costruito a mano: si aprono col tocco su mobile,
 * si navigano da tastiera, e non c'e' nessun elenco fluttuante da posizionare
 * dentro una tabella che scorre — che e' dove i menu fatti in casa si rompono.
 * Della resa nativa si toglie solo la freccia del sistema, sostituita da un
 * chevron disegnato, perche' quella e' l'unica parte che stonava col resto. */
.sel-group { display: flex; align-items: center; gap: 6px; }
.sel-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap;
}
.sel-wrap { position: relative; display: inline-flex; }
.sel-wrap::after {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.4px solid var(--text-tertiary);
  border-bottom: 1.4px solid var(--text-tertiary);
  transform: rotate(45deg); pointer-events: none;
}
.sel-wrap:hover::after { border-color: var(--text-secondary); }
.sel {
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: 12px; line-height: 1.2;
  color: var(--text-primary); background: var(--bg-inset);
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 5px 26px 5px 9px; cursor: pointer;
  min-width: 108px;
}
.sel:hover { border-color: var(--border-strong); }
.sel:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(143, 184, 214, 0.22);
}
/* L'elenco aperto lo disegna il sistema operativo: gli si puo' dare solo il
 * fondo e il testo, ed e' giusto darglieli — un menu bianco su una pagina
 * scura acceca chi lo apre. */
.sel option { background: var(--bg-surface); color: var(--text-primary); }

/* Scala di calore per la quota di circolante: piu' alta, piu' calda.
 *
 * Nessun colore nuovo — sono i quattro token semantici che esistono gia', usati
 * come rampa. Qui il rosso non vuol dire "male" ma "alto": la quota e' una
 * misura di intensita', non un guadagno o una perdita, e su questa colonna
 * l'unica lettura possibile e' quella. Sta scritto anche nel tooltip.
 *
 * Le soglie vengono dalla distribuzione misurata sul circolante l'8 agosto
 * 2026 (128 righe): mediana 1,7% · p75 8,1% · p90 14,2% · p95 25,1%. Tarate
 * cosi', i quattro livelli dividono le righe invece di colorarne una sola —
 * con le vecchie soglie del totale, 1% e 5%, il 55% e il 32% delle righe
 * finivano tutte nella fascia alta e la colonna non ordinava piu' niente. */
.quota-1 { color: var(--text-secondary); }                     /* < 1%  */
.quota-2 { color: var(--long); }                               /* 1-5%  */
.quota-3 { color: var(--funding); }                            /* 5-15% */
.quota-4 { color: var(--short); font-weight: 500; }            /* >= 15% */

/* Skip link — first tab stop, hidden until focused */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-raised); color: var(--text-primary);
  padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 4px;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: 48px;
  /* Una superficie, non il colore della pagina: portata a --bg-base la barra
     spariva, restava solo un filo di bordo e la testata non si leggeva piu
     come barra. Le tabelle sotto ci si ancorano in sticky. */
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--pad-page);
}
.wordmark {
  font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  color: var(--text-primary); white-space: nowrap;
}
.wordmark span { color: var(--text-tertiary); letter-spacing: 0.1em; }
.wordmark .wm-long { color: inherit; letter-spacing: inherit; }

/* La seconda dashboard, non ancora aperta. Spenta come le etichette secondarie
   della barra: deve dire che esistera', non competere con il nome di quella su
   cui si sta lavorando. Il separatore e' un bordo e non uno slash, cosi' le due
   voci restano due voci anche quando la seconda diventera' cliccabile. */
.wordmark-soon {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}
.wordmark-soon .soon { letter-spacing: 0.08em; }
/* Adesso e' un <a>: serve tolto il sottolineato del browser e un segnale al
   passaggio del mouse, se no e' un link che non sembra un link. Il colore resta
   terziario a riposo — e' una voce secondaria, non deve competere col titolo. */
a.wordmark-soon { text-decoration: none; }
a.wordmark-soon:hover { color: var(--text-secondary); }
a.wordmark-soon:hover .pill.new { border-color: var(--accent); }
/* NEW, non COMING SOON: l'accento, perche' una cosa nuova che si puo' aprire
   deve farsi notare. Con letter-spacing come l'altra, se no le quattro lettere
   si stringono e sembrano un refuso accanto a un titolo spaziato. */
.pill.new {
  color: var(--accent); border-color: var(--accent);
  letter-spacing: 0.08em;
}
/* Sotto i 700px sparisce: la barra deve tenere sync, campanella e utente, e la
   voce secondaria e' la prima a cedere il posto. */
@media (max-width: 700px) { .wordmark-soon { display: none; } }

.topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 20px;
  font-size: 11px; color: var(--text-tertiary); white-space: nowrap;
}
.chainset { display: flex; gap: 6px; }
.chain-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 6px; border: 1px solid var(--border-default); border-radius: 4px;
  color: var(--text-secondary); background: var(--bg-raised);
}
.sync { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--long); flex: none; }
.dot.lag { background: var(--funding); }
.dot.stale { background: var(--short); }

/* ---------- Demo banner ---------- */

.banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--funding);
  padding: 8px var(--pad-page);
  font-size: 11px; color: var(--text-secondary);
}
.banner strong {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--funding); border: 1px solid var(--funding);
  border-radius: 4px; padding: 2px 6px; flex: none;
}

/* ---------- Tabs ---------- */

.tabs {
  display: flex; gap: 2px;
  padding: 0 var(--pad-page);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 14px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text-secondary); }
.tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Sotto-tab: secondo livello, e deve leggersi come secondo livello. Le tab
   principali cambiano pagina, queste scelgono quale tabella della stessa pagina
   guardare — se avessero lo stesso peso tipografico si smetterebbe di capire
   quale delle due barre comanda. Quindi: niente maiuscoletto, testo piu' vicino
   alla prosa, e il selezionato lo dice una pillola piena invece di una linea
   sotto, che e' gia' il segno della barra sopra. */
.subtabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.subtab {
  appearance: none; background: none; border: none;
  color: var(--text-tertiary);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 4px;
  cursor: pointer; white-space: nowrap;
}
.subtab:hover { color: var(--text-secondary); background: var(--bg-raised); }
.subtab[aria-selected="true"] {
  color: var(--text-primary);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--border-default);
}
.subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Una linguetta la cui sezione non ha nulla da mostrare sparisce, non si
   disabilita: lo spazio in una barra stretta vale piu' del promemoria. */
.subtab[hidden] { display: none; }

/* ---------- Menu del telefono ----------
 *
 * Sotto i 768px la barra delle linguette non e' una barra: sei voci con i loro
 * contatori misurano circa 640px, ne restano 390, e le ultime due — Alert e
 * Admin, cioe' le due che dicono se qualcosa si e' rotto — stavano fuori
 * schermo dietro uno scroll orizzontale con la sua barra nascosta. Non erano
 * disabilitate: erano invisibili, che e' peggio, perche' la pagina sembrava
 * completa.
 *
 * Il cassetto non duplica niente: e' la stessa <nav>, lo stesso set di bottoni
 * e gli stessi gestori. Su desktop l'involucro e' `display: contents` e
 * scompare dal layout — la barra resta quella di prima, pixel per pixel. */
.drawer { display: contents; }
.drawer-foot { display: none; }
.navtoggle { display: none; }
.nav-backdrop { display: none; }

/* La soglia non e' solo la larghezza, ed e' la correzione che mancava: un
   iPhone girato di lato e' largo 844 o 932, quindi passava per desktop — la
   barra tornava a portare tema, utente e «Esci» e finiva a 945 su 844 di
   schermo, cioe' cento pixel oltre il vetro. La seconda condizione prende il
   telefono coricato per quello che e': schermo basso e dito grosso. Un browser
   da tavolo ridotto in altezza no, perche' li' il puntatore e' fine. */
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {
  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    /* 40px di bersaglio: sotto i 40 un pollice sbaglia, e questo e' il bottone
       da cui passa tutta la navigazione. */
    width: 40px; height: 40px; margin-left: -8px; flex: none;
    appearance: none; background: none; border: none; border-radius: 6px;
    color: var(--text-secondary); cursor: pointer;
  }
  .navtoggle:hover { color: var(--text-primary); background: var(--bg-raised); }
  body.nav-open .navtoggle { color: var(--text-primary); background: var(--bg-raised); }

  .drawer {
    display: flex; flex-direction: column;
    position: fixed; z-index: 60;
    top: var(--topbar-h); left: 0; bottom: 0;
    width: min(82vw, 300px);
    background: var(--bg-surface);
    border-right: 1px solid var(--border-default);
    overflow-y: auto;
    /* Chiuso e' fuori schermo, non `display:none`: cosi' entra ed esce con una
       transizione sola, e i bottoni restano nel DOM per chi naviga da tastiera
       — che comunque sotto non li raggiunge, perche' l'attributo inert li
       toglie dal giro quando il cassetto e' chiuso. */
    transform: translateX(-100%);
    transition: transform 160ms ease-out;
    visibility: hidden;
  }
  body.nav-open .drawer { transform: translateX(0); visibility: visible; }

  .nav-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 55;
    background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  }
  .nav-backdrop[hidden] { display: none; }
  /* Col cassetto aperto la pagina sotto sta ferma: un fondale che si puo'
     scorrere dice che la pagina e' ancora viva mentre il tocco, li' sotto,
     serve solo a chiudere. */
  body.nav-open { overflow: hidden; }

  /* La barra diventa un elenco. Il selezionato lo dice una barra verticale a
     sinistra e non piu' una linea sotto: in colonna, il sotto di una voce e'
     il sopra della successiva. */
  .drawer .tabs {
    flex-direction: column; gap: 2px;
    padding: 8px; overflow: visible;
    background: none; border-bottom: none;
  }
  .drawer .tab {
    width: 100%; text-align: left;
    padding: 12px 12px; font-size: 12px; letter-spacing: 0.04em;
    border-bottom: none; border-left: 2px solid transparent; border-radius: 4px;
  }
  .drawer .tab[aria-selected="true"] {
    background: var(--bg-raised); border-left-color: var(--accent);
  }
  /* Nel cassetto lo spazio c'e': i nomi tornano interi. */
  .drawer .tab .tab-long { display: inline; }

  .drawer-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: auto; padding: 14px 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px; color: var(--text-tertiary);
  }
  .drawer-foot .pill { padding: 7px 12px; }

  /* Quello che resta in barra: menu, nome, stato, campanella. Niente altro —
     ogni voce in piu' qui e' un pixel tolto al nome del sito, che e' l'unica
     cosa che dice su quale delle due dashboard si e'. */
  .topbar { gap: 10px; }
  .topbar-right { gap: 12px; }

  /* Il notch. Con viewport-fit=cover la pagina prende tutto il vetro, e in
     orizzontale la tacca sta su un fianco: senza questi margini il nome del
     sito o il pulsante del menu ci finirebbero sotto. Si prende il maggiore
     fra il margine di pagina e l'incavo, non la somma — dove non c'e' notch
     env() vale zero e resta il margine di sempre. */
  .topbar, main, .drawer-foot {
    padding-left: max(var(--pad-page), env(safe-area-inset-left));
    padding-right: max(var(--pad-page), env(safe-area-inset-right));
  }
  .drawer .tabs { padding-left: max(8px, env(safe-area-inset-left)); }
}

@media (max-width: 560px) {
  .tab { padding: 12px 7px; letter-spacing: 0.02em; }
  .tab-long { display: none; }
  .tab-count { margin-left: 4px; padding: 1px 4px; }

  /* La topbar non ci stava: 376px di roba a destra piu' la wordmark su uno
     schermo da 390 spingevano l'intera pagina in scroll orizzontale, e bastava
     un pollice di traverso per portarsi via la tabella. Sul telefono resta il
     segnale che si legge a colpo d'occhio — il pallino e LIVE — mentre il
     numero del blocco, che nessuno legge in piedi sul tram, torna appena c'e'
     spazio. Il dato non e' rimosso, e' fuori dalla vista stretta. */
  .wordmark .wm-long { display: none; }
  .sync .muted { display: none; }
  .topbar { gap: 10px; }
  .topbar-right { gap: 10px; }
}

/* ---------- Layout ---------- */

main { max-width: var(--max-w); margin: 0 auto; padding: 16px var(--pad-page) 64px; }

/* Hero — riempie il viewport sotto la topbar, meno il padding di main.
   Diceva 52px quando la barra ne occupa 49: ora usa il token, cosi' non c'e'
   un secondo numero da tenere allineato a mano. */
.hero {
  min-height: calc(100dvh - var(--topbar-h) - 80px);
  display: flex; align-items: center; justify-content: center;
}
.hero-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 9vw, 96px);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text-primary);
}
.hero-nav { margin: 24px 0 0; text-align: center; font-size: 13px; }
.hero-nav a {
  color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 2px;
}
.hero-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.section { margin-bottom: 40px; }
.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.section-head h2 {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.section-sub {
  font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em;
}
.section-head .right { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }

/* La testata di «Token in accumulo»: titolo, punto interrogativo e conto delle
   righe, e basta. I sei controlli che ci stavano dentro sono scesi nella barra
   qui sotto — vedi `.tablebar`. `align-items: center` perche' la linea di base
   di un pulsante non e' quella di un titolo, e il «?» risulterebbe alto. */
#accum-section .section-head { align-items: center; }
/* Il conto delle righe sta ACCANTO al titolo e non spinto a destra: su 1860px
   di pagina, appeso al bordo opposto, era un numero senza nessuno vicino che
   dicesse di cosa fosse il conto. */
.section-count { font-size: 11px; color: var(--text-tertiary); }

/* ---------- La barra dei filtri di una tabella ----------
 *
 * Una riga propria fra la testata e il pannello, per i controlli che valgono
 * per QUELLA tabella. Incassata e senza il filo d'accento a sinistra: quello
 * appartiene a `.controlbar`, che governa tutta la vista, e due barre identiche
 * a un centimetro di distanza non si distinguono piu'.
 * `flex-wrap: wrap` non e' un dettaglio: e' l'intera ragione per cui questa
 * barra esiste. Nella testata i controlli stavano in un flex che non andava a
 * capo, quindi sotto una certa larghezza non si spostavano — si stringevano,
 * fino a diventare fessure illeggibili. */
.tablebar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.tablebar .filter-group { gap: 7px; }
/* Fondo `surface` e non incassato, cioe' lo stesso della barra in cima: i
   segmenti e il campo di ricerca hanno il fondo incassato: su una barra
   incassata sparirebbero dentro di essa, e resterebbe visibile solo il bordo.
   Sono gli stessi controlli della `.controlbar`, e devono avere lo stesso
   aspetto: quello che cambia fra le due barre e' il filo d'accento, cioe'
   l'ampiezza di cio' che comandano. */
.tablebar .filter-group.grow { flex: 0 1 240px; }
.tablebar .filter-group.grow .select { width: 100%; min-width: 0; max-width: none; }
.tablebar input[type="search"] { font-size: 12px; padding: 5px 10px; }
/* L'ordinamento in fondo: non filtra niente, e in mezzo ai filtri sembrava il
   quarto di una serie. */
.tablebar .filter-group.end { margin-left: auto; }
/* Nessuna casella di spunta nella barra: «senza perp» e' diventato la terza
   posizione del segmento Universo il 03/09/2026, e una spunta in mezzo a
   quattro segmenti era comunque l'unico controllo di un'altra famiglia. */

/* ---------- Panel ---------- */

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.panel-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 8px 16px;
  font-size: 11px; line-height: 16px; color: var(--text-tertiary);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}

/* ---------- pagine ---------- */

/* La barra sta fra la tabella e il piede, non dentro il piede: il piede dice da
   dove vengono i dati e cosa e' stato escluso, e sono due discorsi diversi.
   Il totale accanto alle frecce non e' decorazione — e' la riga che impedisce
   al taglio a venticinque di sembrare "questo e' tutto quello che c'e'". */
.pager {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px; color: var(--text-tertiary);
}
.pager-btn {
  appearance: none;
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1;
  min-width: 26px; height: 24px;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.pager-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Il bordo di un pulsante spento resta visibile: sparire farebbe saltare la
   posizione dell'altro a ogni cambio di pagina. */
.pager-btn:disabled { opacity: 0.35; cursor: default; }
/* Nowrap: a 390px «1 di 20» andava a capo fra «di» e «20», e un contatore
   spezzato in due righe fra le due frecce sembra un guasto, non un contatore. */
.pager-stato { color: var(--text-primary); font-size: 12px; white-space: nowrap; }
.pager-tot { margin-left: auto; }

@media (max-width: 560px) {
  .pager { gap: 8px; padding: 8px 12px; }
  .pager-tot { margin-left: 0; width: 100%; order: 3; }
}

/* ---------- KPI grid ---------- */

/* ---------- Thermometers ---------- */

.thermo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px; padding: 16px;
}
.thermo-top {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;
}
.thermo-name {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.thermo-val {
  margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.thermo-track {
  position: relative; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--short) 0%, var(--funding) 50%, var(--long) 100%);
}
.thermo-marker {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--text-primary);
  transform: translateX(-1px);
}
.thermo-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--text-tertiary);
}
.thermo-norm {
  margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--text-tertiary);
}

/* ---------- Chart ---------- */

.chart-wrap { padding: 16px; }
.chart-box { background: var(--bg-inset); border-radius: 4px; padding: 12px 8px 4px; }
svg.chart { display: block; width: 100%; height: auto; }

.readouts {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid var(--border-subtle);
}
.readout { padding: 12px 16px; border-right: 1px solid var(--border-subtle); min-width: 0; }
.readout:last-child { border-right: none; }
.readout-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.readout-value {
  font-family: var(--mono); font-size: 16px; font-weight: 500; margin-top: 6px;
  white-space: nowrap;
}

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px 0; font-size: 11px; color: var(--text-tertiary); }
/* The intent legend carries a pill plus a sentence per entry; without wrapping,
   five of those force the panel wider than a phone. */
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; }

/* Range switch */
.seg { display: flex; border: 1px solid var(--border-default); border-radius: 4px; overflow: hidden; }
/* Le sotto-schede di Correlazioni perps: sei linguette, che su uno schermo
   stretto devono andare a capo invece di stringersi fino a diventare
   illeggibili. Il margine sotto la stacca dal riquadro che comanda. */
.co-tabs { flex-wrap: wrap; margin: 0 0 12px; width: fit-content; max-width: 100%; }
.co-tabs button { white-space: nowrap; }
.seg button {
  appearance: none; background: var(--bg-surface); border: none;
  color: var(--text-tertiary); font-family: var(--mono); font-size: 11px;
  padding: 4px 10px; cursor: pointer; border-right: 1px solid var(--border-default);
}
.seg button:last-child { border-right: none; }
.seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-primary); }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; }
/* Stessa cosa, altro nome: la tabella Monitor usa questo involucro e non
   .table-scroll. Non aveva nessuna regola — il selettore non esisteva proprio
   nel foglio — quindi le sue nove colonne (945px misurati) non scorrevano
   dentro il pannello: spingevano la PAGINA, e su 390px di telefono si portavano
   dietro barra, linguette e tutto il resto. */
.tablewrap { overflow-x: auto; }

/* La tabella principale scorre dentro il proprio pannello, non con la pagina.
   Cosi' le intestazioni restano visibili su una tabella da cinquanta righe e
   undici colonne, che e' il motivo per cui erano sticky in partenza.
   L'altezza e' relativa al viewport e non una costante da tenere allineata: se
   sbaglia di qualche pixel la tabella e' un po' piu' alta o piu' bassa, mentre
   la costante sbagliata di prima nascondeva una riga di dati. Fallire in modo
   innocuo conta piu' che azzeccare il numero.
   Da quando la tabella e' a piena pagina lo scorrimento orizzontale sparisce
   sopra i 1400px: le undici colonne ci stanno tutte. Resta solo il verticale,
   che e' quello che tiene le intestazioni attaccate in alto. */
.panel-lead .table-scroll {
  max-height: calc(100dvh - 13rem);
  overflow-y: auto;
}
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }

thead th {
  /* top:0 e NON l'altezza della topbar, ed e' controintuitivo: lo sticky si
     misura rispetto al piu' vicino contenitore che scorre, e qui non e' la
     pagina — e' .table-scroll, che ha overflow-x:auto e quindi (per specifica)
     overflow-y calcolato ad auto. Ancorate a 49px venivano spinte
     quarantanove pixel DENTRO il pannello: sopra restava una fascia vuota, e la
     prima riga della tabella ci scorreva sotto sparendo a meta'.
     Un commento precedente sosteneva che a top:0 le intestazioni finissero
     dietro la barra: vero solo se il contenitore fosse la pagina, che non e'
     il caso. */
  position: sticky; top: 0; z-index: 2;
  /* Sfondo pieno e non trasparente: le righe le scorrono sotto, e con uno
     sfondo semitrasparente si vedrebbero attraverso i nomi delle colonne. */
  background: var(--bg-raised);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
  text-align: left; white-space: nowrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
}
thead th.num-h { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-secondary); }
/* La freccia occupa il suo posto anche quando la colonna non e' quella
   ordinata: senza, al primo click tutte le intestazioni si spostano di sei
   pixel e la riga di testa "salta". Invisibile, non assente. */
th.sortable::after {
  content: '▾'; margin-left: 4px; font-size: 9px;
  opacity: 0; transition: opacity .12s;
}
th.sortable:hover::after { opacity: .35; }
th.sortable.ord-desc::after { content: '▾'; opacity: 1; color: var(--text-primary); }
th.sortable.ord-asc::after  { content: '▴'; opacity: 1; color: var(--text-primary); }
th.sortable.ord-asc, th.sortable.ord-desc { color: var(--text-primary); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th .arrow { color: var(--text-primary); margin-left: 4px; }

tbody td {
  padding: 9px 12px; height: 36px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
tbody tr:hover td { background: var(--bg-raised); }

/* Frozen identity column */
.freeze { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); }
thead th.freeze { z-index: 3; background: var(--bg-raised); }
tbody tr:hover .freeze { background: var(--bg-raised); }
.freeze::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: var(--border-default);
}

.row-label {
  font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em;
  color: #fff; white-space: nowrap;
}
/* Il ticker che ha una descrizione sotto il puntatore.
   Punteggiato e non pieno, e sotto il testo e non attorno: deve dire «qui c'e'
   dell'altro» a chi scorre la colonna, senza competere col nome — che resta la
   cosa piu' importante della riga — e senza sembrare un link, perche' cliccarlo
   apre il dettaglio del token e non la descrizione. Le righe senza restano
   esattamente come prima: la mancanza si legge dall'assenza del segno. */
.row-label.ha-descrizione {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}
.row-label.ha-descrizione:hover { border-bottom-color: var(--accent); }
.row-addr {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; color: var(--text-secondary);
  text-decoration: none;
}
.row-addr:hover { color: var(--accent); text-decoration: underline; }

/* Motivo per cui il wallet e' monitorato. Troncata: la prima colonna e'
   sticky, e una nota lunga la allargherebbe spingendo fuori le metriche.
   Il testo intero resta nel title. */
.row-note {
  display: block; margin-top: 3px; max-width: 28ch;
  font-size: 11px; line-height: 1.35; color: var(--text-tertiary, var(--text-secondary));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pill {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-default); background: var(--bg-raised);
  color: var(--text-secondary); white-space: nowrap;
}
.pill.long  { border-color: var(--long);  color: var(--long); }
.pill.short { border-color: var(--short); color: var(--short); }
.pill.flat  { border-color: var(--border-strong); color: var(--text-secondary); }
.pill.est   { border-color: var(--funding); color: var(--funding); }
/* Custody move — neither a buy nor a sell, so it must not wear long or short.
   --accent is the third hue; --whale was rejected here because the palette
   validator put it at ΔE 1.7 from --accent under deuteranopia, i.e. the two are
   the same colour to a red-green colourblind reader. */
.pill.cold  { border-color: var(--accent); color: var(--accent); }

.density { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.density-track { flex: 1; height: 6px; border-radius: 2px; background: var(--neutral-bar); overflow: hidden; }
.density-fill { height: 100%; border-radius: 2px; }

/* ---------- Sources ---------- */

.sources { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.source-pill {
  font-size: 11px; color: var(--text-secondary); text-decoration: none;
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 4px 8px; background: var(--bg-surface);
}
.source-pill:hover { color: var(--text-primary); border-color: var(--border-strong); }

footer.page-foot {
  border-top: 1px solid var(--border-subtle);
  margin-top: 40px; padding-top: 16px;
  font-size: 11px; line-height: 18px; color: var(--text-tertiary);
}

/* ---------- Tooltip ---------- */

[data-tip] {
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}
#tooltip {
  position: fixed; z-index: 90;
  max-width: 320px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px; line-height: 17px; color: var(--text-primary);
  pointer-events: none;
  display: none;
}
#tooltip .tip-src {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border-default);
  /* Era al livello piu' tenue: la riga della fonte e' quella che si va a
     cercare quando un numero non torna, e cercarla non deve costare fatica. */
  font-size: 11px; color: var(--text-secondary);
}
#tooltip[data-open="true"] { display: block; }

/* Dettaglio per wallet dentro il tooltip: una riga per wallet, incolonnata.
   Larghezza sua, piu' generosa del tooltip testuale, altrimenti le etichette
   dei wallet vanno a capo a ogni riga. */
#tooltip .tip-table { min-width: 260px; }
.tip-row {
  display: grid; grid-template-columns: 1fr auto 3.5ch;
  gap: 2px 10px; align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid var(--border-default);
}
.tip-row:first-child { border-top: 0; padding-top: 0; }
.tip-name { font-weight: 500; color: var(--text-primary); }
.tip-num  { font-family: var(--mono); font-size: 12px; }   /* colore da .pos / .neg */
.tip-pct  { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); text-align: right; }
.tip-note {
  grid-column: 1 / -1;
  font-size: 11px; color: var(--text-tertiary);
}

/* Le singole operazioni dietro una riga della scheda accumulatore. Piu' larga
   della tabellina per wallet: qui le colonne sono tre e la terza e' una frase
   ("da exchange"), non una percentuale. */
#tooltip .tip-mosse { min-width: 300px; }
.tip-mosse .tip-row { grid-template-columns: 5.5ch auto 1fr; }
.tip-mosse .tip-pct { text-align: right; color: var(--text-tertiary); }
.tip-mosse-head {
  margin-top: 8px; padding-bottom: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary);
}
.tip-mosse-head:first-child { margin-top: 0; }
/* La riga dopo un'intestazione non porta il filetto: lo porta gia' l'intestazione. */
.tip-mosse-head + .tip-row { border-top: 0; padding-top: 0; }
.tip-nota-fase {
  margin-top: 6px;
  font-size: 11px; line-height: 15px; color: var(--text-tertiary);
}
.tip-vuoto { font-size: 12px; line-height: 17px; color: var(--text-secondary); }

/* L'aggancio e' la riga intera, quindi il tratteggio del tooltip qui non va:
   su un <tr> disegnerebbe una riga sotto ogni token. Si segnala evidenziando
   la riga, che e' anche il modo in cui il resto della pagina dice "questa". */
tr[data-tip] { border-bottom: 0; cursor: help; }
tr[data-tip]:hover > td { background: var(--bg-raised); }

/* ---------- Celle composite delle due tabelle di token ---------- */

/* Nate per Token in accumulo, usate anche da Tutti i token: le classi restano
   senza tabella davanti apposta, perche' le due tabelle mostrano gli stessi
   token e devono dirli nello stesso modo. Chi le lega a un #id costringe a
   duplicarle alla prima cella condivisa. */

/* Controvalore sopra, quantita sotto: e' l'importo in dollari che deve
   saltare all'occhio scorrendo la colonna. In Tutti i token il netto puo'
   essere negativo, quindi li' .qty-main porta anche .pos o .neg — il segno
   e' l'informazione, e si legge dal colore prima che dal meno. */
.qty-main { display: block; font-family: var(--mono); font-size: 13px; }
.qty-sub {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; color: var(--text-secondary);
}

/* Numero di wallet. Il tratteggio del tooltip sta qui e non sul <td>. */
.wcount { font-family: var(--mono); }

/* I tre orizzonti impilati: leggerli in colonna rende immediato il confronto
   fra 1G e 7G, che e' l'unica domanda che questa cella deve far rispondere. */
/* ---------- Chi ha comprato (dentro la tesi) ---------- */

.buyers {
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.buyer { margin-top: 10px; }
.buyer:first-of-type { margin-top: 8px; }

.buyer-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.buyer-name {
  font-weight: 500; color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}
.buyer-name:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* L'importo in dollari e' il numero che si cerca: sta subito dopo il nome e
   piu' grande della quantita' in token, che e' la stessa cosa in un'unita' che
   non si confronta fra wallet diversi. */
.buyer-usd { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.buyer-verso { margin: 2px 0 5px; font-size: 11px; color: var(--funding); }
/* Le uscite si distinguono dalla riga, non solo dal numero: una lista mista
   letta di fretta deve dire il verso prima della cifra. */
.tx-out { background: color-mix(in srgb, var(--short) 7%, var(--bg-inset)); }
.tx-out .tx-kind { color: var(--short); font-weight: 500; }
.buyer-qty { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); }
.buyer-net {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--text-tertiary);
  border-bottom: 1px dotted var(--border-strong); cursor: help;
}

/* Una transazione per riga, incolonnata, tutta cliccabile verso l'explorer. */
.tx-list { display: flex; flex-direction: column; gap: 1px; }
.tx {
  display: grid;
  grid-template-columns: 9ch 15ch 1fr 8ch minmax(0, 16ch);
  gap: 0 10px; align-items: baseline;
  padding: 4px 8px; border-radius: 4px;
  background: var(--bg-inset);
  color: var(--text-secondary); text-decoration: none;
  font-size: 11px;
}
.tx:hover { background: var(--bg-raised); color: var(--text-primary); }
.tx-when { font-family: var(--mono); color: var(--text-tertiary); }
.tx-kind { color: var(--text-tertiary); }
.tx-qty  { font-family: var(--mono); text-align: right; }
.tx-usd  { font-family: var(--mono); text-align: right; color: var(--long); }
/* Il verso vince sul colore di casa, e serve dirlo qui.
   Il JS mette gia' `.pos` o `.neg` su questa cella, ma `.pos`/`.neg` stanno in
   cima al foglio e hanno la stessa specificita' di `.tx-usd`, che sta qui sotto:
   a parita' vince l'ULTIMA, quindi il colore verde di casa si riprendeva la
   cella e l'importo di un DEPOSITO SU CEX — l'unica riga che deve saltare
   all'occhio — si leggeva in verde con accanto la parola in rosso. Verificato
   col colore calcolato: var(--long), cioe' #3DDC84, su una riga `.tx-out .neg`.
   Le due righe qui sotto rimettono il verso al comando senza toccare `.pos` e
   `.neg`, che servono a mezza pagina. */
.tx-usd.pos { color: var(--long); }
.tx-usd.neg { color: var(--short); }
.tx-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.buyer-foot, .buyer-none {
  margin-top: 4px;
  font-size: 11px; color: var(--text-tertiary);
}

@media (max-width: 720px) {
  /* Le colonne strette diventano illeggibili prima di rompersi: sotto questa
     soglia la riga va a capo invece di comprimere gli importi. */
  .tx { grid-template-columns: 9ch 1fr 8ch; }
  .tx-kind, .tx-from { grid-column: 2 / -1; }
}

/* Market cap sopra, FDV sotto, entrambi assoluti ed etichettati.
   Ogni riga e' una griglia a due colonne: l'etichetta a sinistra, l'importo a
   destra. Cosi' gli importi restano incolonnati fra le due righe e fra le righe
   della tabella, che e' il motivo per cui la colonna e allineata a destra. */
/* Due importi incolonnati a destra, senza etichette: le toglie l'intestazione
 * della colonna, che dice MC / FDV nello stesso ordine. Restano allineati sulle
 * cifre — che e' il punto di una colonna di numeri — grazie alle tabular-nums
 * del monospazio. */
.mcap-cell { line-height: 1.3; }
.mcap-main, .mcap-sub {
  display: block; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.mcap-sub { margin-top: 2px; }
.mcap-main .mcap-val { font-size: 13px; }
.mcap-sub  .mcap-val { font-size: 11px; color: var(--text-secondary); }
.mcap-val { text-align: right; }

.horizons { line-height: 1.3; }
/* La colonna profondita' riusa l'impianto di .horizons — righe impilate — ma
   ogni riga porta un'etichetta a sinistra, se no i tre numeri non si sa a cosa
   si riferiscano. */
.depth .hz { display: flex; gap: 4px; justify-content: flex-end; align-items: baseline; }

/* Il tooltip della profondita': una scheda per sede, impilate.
   Niente tabella: con i numeri a `nowrap` la larghezza minima diventava
   incomprimibile e il contenuto traboccava fuori dal riquadro invece di
   stringersi. In verticale ogni riga e' corta per costruzione. */
#tooltip.tip-wide { max-width: min(340px, calc(100vw - 24px)); }
.tip-depth .tip-sede { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); }
.tip-depth .tip-sede:last-of-type { border-bottom: 0; }
.tip-depth .tip-sede.in-cella { background: var(--bg-inset); margin: 0 -6px; padding: 5px 6px; }
.tip-depth .tip-sede-testa {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px;
}
/* Il volume sta accanto al nome, non spinto a destra: `margin-left: auto` lo
   mandava al bordo e apriva un vuoto fra la sede e i numeri sotto, che e'
   proprio lo spazio che non serviva a niente. */
.tip-depth .tip-vol { font-size: 10px; color: var(--text-secondary); }
/* Le due bande incolonnate senza tabella: la griglia tiene allineati i numeri
   fra una sede e l'altra, che e' l'unica cosa per cui serviva la tabella.
   `max-content` e non `1fr`: le colonne elastiche si spartivano tutta la
   larghezza del riquadro e lasciavano aria fra l'etichetta e i valori. Cosi'
   ogni colonna e' larga quanto il suo contenuto piu' lungo — i numeri restano
   incolonnati fra una sede e l'altra — e il blocco si stringe a sinistra. */
.tip-depth .tip-banda {
  display: grid;
  grid-template-columns: 26px max-content max-content max-content max-content;
  justify-content: start;
  gap: 0 6px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; line-height: 17px;
}
/* "in acquisto" / "in vendita" sono etichette, non contorno: al livello
   intermedio si leggono, al terziario si perdono sotto i numeri. */
.tip-depth .tip-banda .muted {
  font-family: var(--sans); font-size: 10px; color: var(--text-secondary);
}
.tip-depth .tip-nota {
  font-size: 11px; line-height: 16px; color: var(--text-primary);
  margin-top: 6px; white-space: normal;
}
.tip-depth .tip-nota .depth-lab { margin-right: 6px; }

/* Tooltip del volume futures: stessa impaginazione verticale della profondita',
   per la stessa ragione — niente colonne rigide che possano traboccare. */
/* Due colonne: etichetta a sinistra, valore a destra. La terza colonna delle
   note c'era e stava in centoventi pixel: le note andavano a capo e il riquadro
   sembrava ammassato. Adesso ogni fatto ha la sua riga e le note sono diventate
   voci, quindi non c'e' piu' niente che possa spezzarsi. */
.tip-perp .tip-riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-family: var(--mono); font-size: 11px; line-height: 19px;
  white-space: nowrap;
}
/* Le etichette al livello intermedio, non al piu' tenue.
   `--text-tertiary` e' #7B8593: sul fondo del riquadro passa appena, ed e'
   pensato per le note di contorno di una pagina piena, non per un pannello
   che si legge in due secondi mentre il mouse e' fermo. */
.tip-perp .tip-lab {
  font-family: var(--sans); font-size: 11px; color: var(--text-secondary);
}
.tip-perp .ls-val { display: inline-flex; align-items: center; gap: 6px; }
.tip-perp .tip-nota-inline { font-family: var(--sans); font-size: 10px; }
/* L'intestazione di blocco: e' quello che divide le tre domande — quanto e'
   passato, quanto e' aperto, da che parte stanno — che prima erano una lista
   sola. Il primo blocco non ha la riga sopra, se no il riquadro si apre con un
   filo staccato dal bordo. */
.tip-perp .tip-sep {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin: 9px 0 3px; padding-top: 7px;
  border-top: 1px solid var(--border-subtle);
}
.tip-perp .tip-sep:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* La barra long/short: verde quanto la quota long, il resto rosso. Due colori
   e nessun numero da sottrarre. */
.tip-perp .ls-bar {
  display: inline-block; width: 52px; height: 7px; border-radius: 3px;
  background: color-mix(in srgb, var(--short) 55%, transparent);
  overflow: hidden;
}
.tip-perp .ls-bar .ls-long {
  display: block; height: 100%;
  background: color-mix(in srgb, var(--long) 75%, transparent);
}
.tip-perp .tip-nota {
  font-family: var(--sans); font-size: 11px; line-height: 16px;
  color: var(--text-primary); margin-top: 7px; white-space: normal;
  max-width: 280px;
}
.depth-lab {
  color: var(--text-tertiary); font-size: 10px; margin-right: 2px;
  min-width: 24px; text-align: left;
}
.hz { display: block; font-family: var(--mono); font-size: 11px; }
.hz:first-child { font-size: 12px; }
.horizons.building .hz:first-child { font-weight: 600; }

/* ---------- Empty state ---------- */

.empty {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--text-secondary);
}

/* Lo stato vuoto di una vista intera: non e' una riga mancante in una tabella,
   e' una tab che ancora non ha contenuto. Dice cosa manca e da dove si riparte,
   invece di lasciare un rettangolo nero che sembra un errore. */
.view-empty { padding: 56px 24px; max-width: 62ch; }
.view-empty p { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.view-empty p:last-child { margin-bottom: 0; }
.view-empty .muted { color: var(--text-tertiary); font-size: 12px; line-height: 1.6; }

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  :root { --pad-page: 24px; }
  
  .readouts { grid-template-columns: repeat(4, 1fr); }
  .readout:nth-child(4) { border-right: none; }
}

@media (max-width: 767px) {
  :root { --pad-page: 16px; }
  body { font-size: 13px; }
  
  
  .thermo-grid { grid-template-columns: 1fr; }
  .readouts { grid-template-columns: repeat(2, 1fr); }
  .readout:nth-child(2n) { border-right: none; }
  .topbar { gap: 12px; }
  .topbar-right { gap: 12px; }
  .chainset { display: none; }
  .wordmark span { display: none; }
  .section-head { flex-wrap: wrap; }
  .section-head .right { margin-left: 0; width: 100%; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Accumulation table ---------- */
/* Built against design/STYLE.md: opaque surfaces, 1px borders, no shadows,
   pills outlined, 2px radius on bars. Nothing here introduces a colour that is
   not already a token. */

tr.clickable { cursor: pointer; }
tr.clickable:hover > td { background: var(--bg-raised); }

/* Sulla riga sotto il mouse il segnale si accende: e' li' che serve, e tenerlo
   acceso su tutte le righe lo trasformerebbe in decorazione. */
tr.clickable:hover .caret {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Riga aperta: il segnale resta acceso anche senza mouse, o si perderebbe
   quale delle righe ha prodotto il pannello aperto sotto. */
tr.clickable[data-open="1"] .caret {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Un filo d'accento a sinistra sulla riga aperta, che la lega al suo
   dettaglio: senza, il pannello sembra appartenere alla riga sbagliata. */
tr.clickable[data-open="1"] > .freeze { box-shadow: inset 2px 0 0 var(--accent); }
tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tok-head { display: flex; align-items: center; gap: 6px; }

/* Il segnale che la riga si apre.
 *
 * Era un triangolino grigio da dieci pixel dentro una tabella con undici
 * colonne di numeri: non si leggeva come un controllo, e chi non lo notava non
 * sapeva che sotto ci fosse il dettaglio. Ora e' un riquadro con un bordo — la
 * forma che in tutta la pagina significa "ci si preme sopra" — che si accende
 * quando il mouse passa sulla riga e cambia stato quando la riga e' aperta. */
.caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--border-default);
  border-radius: 3px;
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-size: 8px; line-height: 1;
  transition: color 90ms linear, border-color 90ms linear, background 90ms linear;
}

.pill.tiny { font-size: 9px; padding: 0 4px; letter-spacing: 0.06em; }

.score-val { color: var(--text-primary); font-weight: 500; }

td.links { white-space: nowrap; }
td.links a { margin-right: 10px; }

/* ---------- Drill-down ---------- */

tr.breakdown > td { background: var(--bg-inset); padding: 0; }
.breakdown-box { padding: 12px 16px 14px; border-top: 1px solid var(--border-subtle); }

.wallet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.wallet-chip {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--sans); font-size: 12px;
  color: var(--text-primary);
  text-align: left;
}
.wallet-chip:hover { border-color: var(--border-strong); background: var(--bg-raised); }
.wallet-chip .muted { font-size: 11px; }

.breakdown-hint { margin-top: 10px; font-size: 11px; }

/* ---------- Active filter ---------- */

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px 2px 8px;
  font-size: 11px;
  color: var(--accent);
  margin-right: 10px;
}
.chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 14px; line-height: 1;
  padding: 0 2px;
}
.chip-x:hover { color: var(--text-primary); }

@media (max-width: 767px) {
  .wallet-chips { flex-direction: column; }
  .wallet-chip { width: 100%; }
}

/* ---------- Filter bar ---------- */
/* One row, scoping everything below. Per-panel controls were the alternative and
   they let two tables disagree about what they are showing. */

/* Etichetta accanto al controllo, non sopra: sopra costava una riga intera per
   due parole, e la barra e' l'unica cosa fra la testata e i dati. */
.filter-group { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.filter-label {
  font-family: var(--sans); font-size: 10px; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}

.scope-note { font-size: 11px; color: var(--text-tertiary); padding-bottom: 6px; }

/* Il menu wallet e' l'unico controllo di sistema della pagina e si vedeva:
   alto il doppio dei segmenti accanto, largo 190px anche per scrivere 'Tutti i
   wallet'. Ora ha la stessa altezza, lo stesso fondo e lo stesso raggio del
   selettore finestra — sono due controlli della stessa barra e devono
   somigliarsi — e la larghezza la decide il contenuto. */
.select-wrap { position: relative; display: inline-flex; }
.select {
  appearance: none;
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  font-family: var(--sans); font-size: 12px; line-height: 1;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
  max-width: 15rem;
  text-overflow: ellipsis;
  transition: border-color 90ms linear, background 90ms linear;
}
.select:hover { border-color: var(--border-strong); background: var(--bg-raised); }
.select:focus-visible { border-color: var(--accent); }
/* La freccia e' due segmenti ruotati, non un carattere: un glifo cambierebbe
   forma col font e non si allineerebbe ai bordi del riquadro. */
.select-wrap::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  pointer-events: none;
}
.select-wrap:hover::after { border-color: var(--text-secondary); }

/* ---------- Info button + modal ---------- */

.info-btn {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--sans); font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0;
}
.info-btn:hover { color: var(--accent); border-color: var(--accent); }

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 12, 16, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.overlay[hidden] { display: none; }

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  max-width: 640px; width: 100%;
  max-height: 80vh; display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-head h3 {
  margin: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-primary);
}
.modal-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-size: 20px; line-height: 1; padding: 0 4px;
}
.modal-x:hover { color: var(--text-primary); }
.modal-body { padding: 4px 16px 16px; overflow-y: auto; }

.info-item { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.info-item:last-child { border-bottom: none; }
.info-term {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.info-def { color: var(--text-secondary); font-size: 13px; line-height: 19px; }

/* ---------- Charts ---------- */

.chart-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.chart-card {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 14px 10px;
  min-width: 0;
}
.chart-sub { font-size: 11px; line-height: 16px; margin: 2px 0 8px; }
.chart { position: relative; }
/* The container includes the axis band — a fixed height that excluded it would
   give the card its own tiny scrollbar. */
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-tick {
  fill: var(--text-tertiary);
  font-family: var(--mono); font-size: 10px;
}
.chart-ref {
  fill: var(--text-tertiary);
  font-family: var(--sans); font-size: 10px;
}
.chart-readout {
  display: flex; gap: 10px; align-items: baseline;
  min-height: 16px; margin-top: 4px;
  font-size: 11px;
}
.chart-empty {
  color: var(--text-tertiary); font-size: 12px; line-height: 17px;
  padding: 18px 0;
}
/* --- la scheda Charts ------------------------------------------------------
   Due colonne, non tre. A tre le carte erano anteprime da guardare e poi aprire
   altrove; con i pannelli sui derivati sotto il prezzo la carta E' il grafico
   che si studia, e a un terzo di schermo l'RSI diventa una riga da tre pixel.
   Si scorre di piu' e si legge davvero, che e' lo scambio giusto. */
.chart-grid-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .chart-grid-due { grid-template-columns: 1fr; } }
/* La riga degli indicatori sta attaccata a quella dei filtri, non staccata: e'
   lo stesso pannello, separato da un filo. */
.ch-indicatori {
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px; padding-top: 8px;
}
.ch-piu { margin: -4px 0 16px; }

.ch-carta { padding: 10px 12px 8px; }
.ch-testa {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px; min-width: 0;
}
.ch-sym { font-weight: 600; font-size: 13px; }
/* I numeri si accorciano invece di mandare a capo la testata: la riga deve
   restare alta uguale su tutte le carte, o la griglia si scalina. */
.ch-num {
  color: var(--text-tertiary); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ch-var { margin-left: auto; font-size: 11px; font-family: var(--mono); }
.ch-var.su { color: var(--long); }
.ch-var.giu { color: var(--short); }
/* Un bottone piatto: la pagina non ne aveva uno generico — i suoi bottoni sono
   linguette, pastiglie o icone — e inventarne uno vistoso qui vorrebbe dire
   dare a «azzera» piu' peso visivo dei filtri che azzera. */
.btn-ghost {
  background: var(--bg-inset); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 4px;
  padding: 3px 10px; font-size: 12px; font-family: var(--sans); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); }
.btn-ghost:focus-visible { border-color: var(--accent); outline: none; }
.ch-tv-btn { font-size: 10px; padding: 1px 6px; }
.ch-link { color: var(--text-tertiary); text-decoration: none; font-size: 12px; }
.ch-link:hover { color: var(--accent); }
/* `min-height` per la curva nostra, che si disegna in un'altezza sua; le carte
   di TradingView ricevono invece un'altezza VERA in pixel da JS, perche' un
   iframe non sa dire quanto e' alto il suo contenuto e con un solo min-height
   il widget non ha nessuna altezza da riempire. */
.ch-plot { min-height: 150px; }

/* Il riquadro di TradingView riempie il contenitore, punto.
   I due `!important` non sono decorazione: lo script dell'embed scrive `height`
   INLINE su questo nodo — «100%» all'avvio, e dei pixel piu' tardi se il widget
   manda un messaggio di ridimensionamento — e senza di loro deciderebbe lui
   quanto e' alta la carta. Con l'altezza in pixel sulla `.ch-plot`, questo 100%
   e' finalmente un numero vero. */
.tv-box { width: 100%; height: 100% !important; overflow: hidden; border-radius: 4px; }
.tv-box iframe { width: 100% !important; height: 100% !important; border: 0; }

/* I campi numerici dei filtri: stretti, perche' contengono soglie a due o tre
   cifre e un campo largo suggerisce che ci vada dentro una frase. */
.num-in {
  width: 78px; padding: 3px 6px;
  background: var(--bg-inset); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 4px;
  font-family: var(--mono); font-size: 12px;
}
.num-in:focus-visible { border-color: var(--accent); outline: none; }

.spark { display: block; }
.trend-cell { width: 92px; }

/* ---------- Colour lift ---------- */
/* More colour, still inside the contrast contract: hues arrive on marks, chips
   and rails — never as body text, which stays on the three ink tiers. */

.section-head h2 { color: var(--text-primary); }

/* The affinity value carries a heat cue on the mark, with the number beside it
   doing the actual telling — colour never carries it alone. */
.score-val { position: relative; padding-left: 12px; }
.score-val::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 2px;
  background: var(--neutral-bar);
}
tr[data-rank="hot"] .score-val::before { background: var(--funding); }
tr[data-rank="top"] .score-val::before { background: var(--long); }

@media (max-width: 1023px) {
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  
  .select { min-width: 150px; }
}

/* ============================================================ MASTHEAD
   The header carries one figure, the controls that scope it, and nothing else.
   Everything here is opaque surfaces and hairlines — no shadow, no gradient
   behind data, per STYLE.md. The only ornament is a single hairline rule that
   picks up the accent, and it sits above the block rather than around it. */

/* A single 2px accent rule along the top edge. A three-stop gradient was tried
   here and rejected: this register is an institutional research terminal, and a
   rainbow rule reads as consumer product. Restraint is the thing that makes a
   dense screen look designed rather than decorated — one solid accent, opaque,
   no blur, consistent with every other surface on the page. */

/* Proportional figures, not tabular: at 46px equal-width digits make a number
   like 121 read loose. tabular-nums belongs in the columns, not here. */

/* ---------- Controls, restyled ---------- */

.seg { border-radius: 4px; background: var(--bg-inset); }
.seg button {
  background: transparent;
  padding: 6px 10px;
  font-weight: 500; letter-spacing: 0.04em;
  transition: color 90ms linear;
}
.seg button:hover { color: var(--text-secondary); }
.seg button[aria-pressed="true"] {
  background: var(--bg-raised);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ---------- KPI tiles, restyled ---------- */

/* The rail identifies the tile; the label beside it is what actually names it.
   Assigned by role, never by rank — a tile keeps its hue when ordering changes. */

.sync-state {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--text-secondary);
}
.sync-sep { color: var(--border-strong); }
/* A solid ring, not a translucent glow: surfaces on this page are fully opaque
   and a soft halo on near-black reads as a smudge. */
.dot { width: 7px; height: 7px; outline: 1px solid var(--border-strong); outline-offset: 2px; }

.section-head h2 { letter-spacing: 0.08em; }

/* ---------- Control bar ---------- */
/* What is left of the masthead. The hero figure and the tile row that used to
   sit here restated the table and pushed it below the fold. */

.controlbar {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
/* La riga d'accento era alta 2px su una barra alta 60: adesso che la barra e'
   compatta pesava piu' del contenuto. Ridotta a un filo laterale, che dice la
   stessa cosa senza prendersi il bordo superiore. */
.controlbar::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--accent);
}

/* Il fondale di mercato — i riquadri col volume DEX per catena in coda ai
   filtri — e' stato tolto il 03/09/2026 insieme al suo CSS: nessuno decideva
   niente guardandolo, e sul telefono costava una riga intera. */

.controlbar .scope-note {
  font-family: var(--sans); font-size: 11px;
  color: var(--text-tertiary);
  flex-basis: 100%;    /* su riga propria solo quando c'e' davvero */
}
.controlbar .scope-note:empty { display: none; }

/* Token tipografico `box-label` di STYLE.md: Inter 500, 11/14, 0.06em, maiuscolo.
   Era usato in quattro punti del drill-down senza essere mai stato definito, quindi
   quelle intestazioni finora ereditavano il corpo del testo. */
.box-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Il sommario in coda a un `box-label`: quanti wallet, in che verso, e la somma
   dei netti. Corpo normale e non maiuscoletto — e' un numero da leggere, non
   un'etichetta — e piu' chiaro del titolo perche' non deve competerci. */
.box-label-n {
  margin-left: 8px; text-transform: none; letter-spacing: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--text-secondary);
}

/* ---------- Thesis ---------- */

.thesis {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 14px 10px;
  margin-bottom: 16px;
}
.thesis-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.thesis-tally { margin-left: auto; display: flex; gap: 8px; }
.tally {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 2px 7px; color: var(--text-tertiary);
}
.tally.pro    { border-color: var(--long);  color: var(--long); }
.tally.contro { border-color: var(--short); color: var(--short); }

.thesis-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  padding: 10px 0 4px;
}
.thesis-item { min-width: 0; }
.thesis-term {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
/* The mark is a glyph, not a colour: the sign survives greyscale and CVD. */
.thesis-mark {
  width: 14px; height: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; font-size: 11px; line-height: 1;
  border: 1px solid var(--border-default); color: var(--text-tertiary);
}
.thesis-item.pro    .thesis-mark { border-color: var(--long);    color: var(--long); }
.thesis-item.contro .thesis-mark { border-color: var(--short);   color: var(--short); }
.thesis-item.nota   .thesis-mark { border-color: var(--funding); color: var(--funding); }
.thesis-text { font-size: 12px; line-height: 18px; color: var(--text-secondary); }

.thesis-foot {
  margin-top: 8px; padding-top: 9px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px; line-height: 16px; color: var(--text-tertiary);
}

@media (max-width: 1023px) {
  .thesis-list { grid-template-columns: 1fr; }
}
.tally.nota { border-color: var(--funding); color: var(--funding); }

/* ---------- Score meter ---------- */
/* Single hue stepped by value, not a categorical colour: these rows differ by
   how much, not by kind. The track is a lighter step of the same ramp so the
   state reads across the whole bar, per the meter spec. */

.score-cell { min-width: 92px; }
.score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.score-val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--text-primary);
}
.score-meter {
  width: 64px; height: 3px; border-radius: 2px;
  background: var(--neutral-bar);
  overflow: hidden;
}
.score-fill { height: 100%; background: var(--accent); border-radius: 2px; }
tr[data-rank="top"] .score-fill { background: var(--long); }
tr[data-rank="hot"] .score-fill { background: var(--funding); }

/* ---------- Lead panel ---------- */
/* The accumulation table is the page's subject; the tables under it are context.
   One accent hairline says so without another box. */

.panel-lead { position: relative; overflow: hidden; }
.panel-lead::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent); z-index: 4;
}

/* A tick before each section title: quiet identity, no extra chrome. */
.section-head h2::before {
  content: ''; display: inline-block;
  width: 3px; height: 11px; margin-right: 8px;
  border-radius: 1px;
  background: var(--border-strong);
  vertical-align: -1px;
}
/* Non `:first-of-type`: il primo <section> di main e la barra dei controlli, che
   non porta la classe .section, quindi quel selettore non matchava nulla. */
.section-lead .section-head h2::before { background: var(--accent); }

/* ==================================================================== tabs */

/* The .tabs / .tab rules further up already describe this bar — they were
   written for a tab strip that had been removed, leaving the CSS with no markup.
   The two views below reuse it rather than adding a second, competing
   definition; only the count chip is new. */
.tab-count {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: 8px; background: var(--bg-raised);
  color: var(--text-tertiary);
  font: 400 10px/1.5 var(--mono);
}
/* Non letti sulla tab Alert. Il colore da solo non basta a dire "nuovo": chi
   non distingue il blu dal grigio vede comunque un numero che prima non c'era,
   e il tooltip lo nomina. */
.tab-count.unread {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised));
  color: var(--text-primary);
}

/* ==================================================================== bell */

.bell-wrap { position: relative; display: inline-flex; }

.bell {
  appearance: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none; border: 1px solid var(--border-default); border-radius: 6px;
  color: var(--text-secondary); cursor: pointer;
}
.bell:hover { color: var(--text-primary); border-color: var(--border-strong); }
.bell.has-unread { color: var(--text-primary); }

/* The badge is the only thing on the page allowed to demand attention, so it
   gets the one saturated colour nothing else uses for a value. */
.bell-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--short); color: #14161A;
  font: 600 10px/1 var(--mono);
  border: 2px solid var(--bg-surface);
}

.bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(460px, calc(100vw - 32px));
  background: var(--bg-raised);
  border: 1px solid var(--border-default); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.bell-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.bell-title {
  font: 600 11px/1 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.bell-filters { display: flex; gap: 2px; margin-left: auto; }
.bell-filters button {
  appearance: none; background: none; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 7px;
  color: var(--text-tertiary); font: 500 10px/1.4 var(--sans); cursor: pointer;
}
.bell-filters button[aria-pressed="true"] {
  color: var(--text-primary); border-color: var(--border-default);
  background: var(--bg-raised);
}
.bell-read {
  appearance: none; background: none; border: 0;
  color: var(--text-tertiary); font: 400 10px/1.4 var(--sans);
  cursor: pointer; text-decoration: underline;
}
.bell-read:hover { color: var(--text-secondary); }

.bell-list { max-height: min(60vh, 520px); overflow-y: auto; }

.bell-item {
  display: block; width: 100%; text-align: left;
  appearance: none; background: none; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--border-subtle);
  padding: 10px 12px;
}
.bell-item:hover { background: var(--bg-surface); }
.bell-item.unread { border-left: 2px solid var(--accent); padding-left: 10px; }

.bell-item-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }

/* Severity as a dot, not a word: three levels read faster as a colour ramp than
   as three labels competing with the category chip beside them. */
.sev { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.sev-strong { background: var(--short); }
.sev-watch  { background: var(--funding); }
.sev-info   { background: var(--text-tertiary); }

.bell-cat {
  padding: 1px 5px; border-radius: 3px;
  font: 600 9px/1.6 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.cat-in  { background: rgba(61, 220, 132, 0.14); color: var(--long); }
.cat-out { background: rgba(255, 92, 92, 0.14);  color: var(--short); }
.cat-mid { background: rgba(167, 139, 250, 0.14); color: var(--whale); }

.bell-kind { font: 500 11px/1.4 var(--sans); color: var(--text-secondary); }
.bell-time { margin-left: auto; font-size: 10px; color: var(--text-tertiary); }

.bell-headline {
  font: 500 12px/1.45 var(--sans); color: var(--text-primary);
  margin-bottom: 3px;
}
/* The reason the notification exists, in prose. Without it the panel is a log. */
.bell-why { font: 400 11px/1.5 var(--sans); color: var(--text-secondary); }
.bell-evidence { margin-top: 4px; font-size: 10px; color: var(--text-tertiary); }

.bell-empty, .bell-foot {
  padding: 14px 12px; font: 400 11px/1.5 var(--sans); color: var(--text-secondary);
}
.bell-foot {
  padding: 8px 12px; border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface); font-size: 10px; color: var(--text-tertiary);
}

/* Where a notification lands. Brief, and on the row itself rather than the whole
   table, so the reader's eye is told where to go and then left alone. */
@keyframes vbf-flash {
  from { background: rgba(77, 163, 255, 0.18); }
  to   { background: transparent; }
}
tr.flash > td { animation: vbf-flash 1.6s ease-out; }

/* =============================================================== watchlist */

.wl-row { cursor: pointer; }
.wl-row:hover { background: var(--bg-surface); }

.wl-reasons { margin-bottom: 14px; }
.wl-reason {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--border-default);
  font: 400 12px/1.5 var(--sans); color: var(--text-secondary);
}
/* The weight of a term is a border colour, not a number: the reader needs to
   know which reason carried the ranking, not to re-add the score by hand. */
.wl-reason.r-alto   { border-left-color: var(--long); }
.wl-reason.r-medio  { border-left-color: var(--accent); }
.wl-reason.r-basso  { border-left-color: var(--border-strong); }
.wl-reason.r-contro { border-left-color: var(--short); }

.wl-reason-tag {
  flex: 0 0 auto; min-width: 92px;
  font: 600 9px/1.6 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
}

.inner-table { width: 100%; border-collapse: collapse; }
.inner-table th {
  text-align: left; padding: 6px 10px 6px 0;
  font: 500 9px/1.4 var(--sans); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.inner-table th.num-h { text-align: right; }
.inner-table td {
  padding: 7px 10px 7px 0;
  font: 400 12px/1.4 var(--sans); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.inner-table td.num { text-align: right; font-family: var(--mono); font-size: 11px; }
.inner-table tr:last-child td { border-bottom: 0; }

.sym { font: 500 12px/1.4 var(--sans); color: var(--text-primary); margin-right: 6px; }
.muted-pill { background: var(--bg-inset); color: var(--text-tertiary); }
.neg-pill { background: rgba(255, 92, 92, 0.12); color: var(--short); }

/* ---------- Eventi rilevati, ora nella pagina ---------- */

/* Il pannello non e' piu' una tendina: niente altezza fissa, niente ombra. */
#events-section .bell-list { max-height: none; box-shadow: none; overflow: visible; }
#events-section .section-head .right { display: flex; align-items: center; gap: 12px; }

.bell-money {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 4px;
}
/* L'importo e' il primo numero che si cerca leggendo un evento: piu' grande
   della quantita' in token, che senza un prezzo accanto non dice nulla. */
.bell-usd { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.bell-qty { font-family: var(--mono); font-size: 11px; color: var(--text-tertiary); }
/* Compare solo quando l'aggregato contraddice il titolo: segnala che si stanno
   leggendo due ambiti diversi, non due numeri in disaccordo. */
.bell-flag {
  margin-left: auto; padding: 1px 5px; border-radius: 3px;
  background: var(--bg-inset); border: 1px solid var(--border-default);
  font-size: 9px; letter-spacing: 0.04em; color: var(--text-tertiary);
  cursor: help;
}

.bell-wallets {
  margin-top: 6px; display: flex; flex-direction: column; gap: 2px;
}
.bell-wallet {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr) auto 7ch;
  gap: 0 10px; align-items: baseline;
  font-size: 11px;
}
/* Il verbo prima del nome: si legge "accumula / scarica" scorrendo la colonna,
   senza dover interpretare il segno di un numero. */
.bw-verb { font-weight: 500; }
.bw-name {
  color: var(--text-secondary); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-name:hover { color: var(--accent); }
.bw-usd { font-family: var(--mono); text-align: right; color: var(--text-primary); }
.bw-mov { font-family: var(--mono); color: var(--text-tertiary); text-align: right; }

@media (max-width: 640px) {
  .bell-wallet { grid-template-columns: 7ch 1fr auto; }
  .bw-mov { display: none; }
}

/* ---------- Colonna Fase ---------- */

.phase-cell { white-space: nowrap; }
.phase {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--border-default); background: var(--bg-raised);
  font-size: 11px; font-weight: 500;
  cursor: help;
}
/* Il verso e' il colore, l'intensita' sono le tacche. Tenerli separati fa si'
   che "accumulo lieve" e "distribuzione lieve" si distinguano a colpo d'occhio
   per verso, e "lieve" da "pesante" per quantita' di tacche accese: due domande
   diverse, due canali visivi diversi. */
.phase-acc  { color: var(--long);  border-color: color-mix(in srgb, var(--long) 35%, transparent); }
.phase-dist { color: var(--short); border-color: color-mix(in srgb, var(--short) 35%, transparent); }

.phase-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.phase-bars i {
  width: 3px; border-radius: 1px;
  background: currentColor; opacity: 0.22;
}
.phase-bars i:nth-child(1) { height: 5px; }
.phase-bars i:nth-child(2) { height: 8px; }
.phase-bars i:nth-child(3) { height: 11px; }
.phase-bars i.on { opacity: 1; }

/* Il livello pesante e' l'unico che merita di essere visto senza leggere. */
.phase.lvl-3 { background: color-mix(in srgb, currentColor 12%, var(--bg-raised)); }

/* Il ricircolo sotto la pastiglia: e' una qualifica dell'accumulo, non un
   verso opposto, quindi non prende il rosso della distribuzione. */
.phase-recycle {
  display: block; margin-top: 3px;
  font-size: 10px; color: var(--funding);
  cursor: help;
}

/* Il tooltip della fase e' una frase intera, non un'etichetta. */
#tooltip { max-width: 380px; }

/* ---------- Tab Alert: posizioni aperte e feed eventi ---------- */

/* Comprati ed Eventi stavano in una colonna da 380px accanto alla tabella
   principale. Costavano alla tabella un terzo della pagina — undici colonne in
   mille pixel, quindi barra orizzontale sotto e due colonne sempre fuori vista —
   e in cambio davano una lista che si leggeva a fatica. Adesso hanno una tab
   loro e la pagina intera.

   Comprati resta stretto: e' una pila di posizioni, e allargarla non aggiunge
   niente. Gli Eventi prendono il resto e si dispongono a griglia di card, cosi'
   a colpo d'occhio se ne leggono tre invece di uno. */
.alert-grid {
  display: grid;
  grid-template-columns: var(--events-w) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.alert-grid > .section { margin-bottom: 24px; }

/* La colonna Comprati resta ferma mentre si scorre il feed: e' la risposta a
   "cosa ho aperto", e serve mentre si legge cosa sta succedendo. */
#bought-section {
  position: sticky; top: calc(var(--topbar-h) + 12px);
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#events-section .section-head { flex-wrap: wrap; gap: 6px 10px; }
#events-section .section-sub { flex-basis: 100%; }

/* Il feed a griglia. auto-fill con un minimo di 360px: sotto quella larghezza
   le righe wallet vanno a capo e si perde la lettura a colpo d'occhio, che e'
   l'unico scopo del pannello. Su schermi stretti diventa una colonna sola.

   Le colonne si separano con un bordo sull'item e non con un gap colorato: il
   fondo della card codifica quanto denaro si e' mosso e da che parte va, e un
   gap dipinto sotto card semitrasparenti si vedrebbe attraverso. */
#events-section .bell-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0;
}
#events-section .bell-item { border-right: 1px solid var(--border-subtle); }

@media (max-width: 1100px) {
  /* Sotto questa soglia le due colonne non convivono: Comprati torna in flusso
     normale sopra il feed, e la pagina scorre da sola.

     A piena larghezza la pila di posizioni sprecherebbe due terzi della riga —
     una posizione per riga su mille pixel significa scorrere per vedere quattro
     token. Diventa griglia come il feed, stesso minimo di 320px. */
  .alert-grid { grid-template-columns: minmax(0, 1fr); }
  #bought-section { position: static; max-height: none; overflow: visible; }
  #bought-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  #bought-list > .bought { border-right: 1px solid var(--border-subtle); }
}

@media (max-width: 700px) {
  /* Una colonna sola: sotto i 320px di minimo la griglia collasserebbe comunque,
     ma dichiararlo evita che una card resti larga mezza riga. */
  #bought-list { grid-template-columns: minmax(0, 1fr); }
  #bought-list > .bought { border-right: 0; }
}

/* ---------- Importanza dell'evento, letta dallo sfondo ---------- */

/* Il pallino della severita' c'era gia' ma e' sei pixel: per trovarlo bisogna
   gia' star leggendo la riga, e questo pannello serve a decidere QUALE riga
   leggere. Lo sfondo si vede senza fissare nulla.

   Due variabili indipendenti, due canali:
     --flusso   la tinta: verde se il denaro esce da un exchange (si compra),
                rosso se ci entra (si vende). E' il verso.
     data-money quanto e' carica quella tinta, su quattro gradini. E' la taglia.

   Una rampa e non una soglia perche' con l'interruttore a un milione due
   movimenti da 678.000 dollari restavano indistinguibili da un airdrop da
   cinque centesimi. */

.bell-item { --flusso: var(--text-tertiary); }
.bell-item[data-flow="in"]  { --flusso: var(--long); }
.bell-item[data-flow="out"] { --flusso: var(--short); }

/* Il gradino 0 non prende niente: e' il 54% del feed, e colorarlo
   toglierebbe significato a tutto il resto. */
.bell-item[data-money="1"] { background: color-mix(in srgb, var(--flusso)  6%, transparent); }
.bell-item[data-money="2"] { background: color-mix(in srgb, var(--flusso) 12%, transparent); }
.bell-item[data-money="3"] { background: color-mix(in srgb, var(--flusso) 20%, transparent); }
.bell-item[data-money="4"] { background: color-mix(in srgb, var(--flusso) 30%, transparent); }

/* Il filetto parte dal secondo gradino: sotto, la tinta di sfondo basta e un
   bordo in piu' sarebbe rumore su meta' delle righe. */
.bell-item[data-money="2"],
.bell-item[data-money="3"],
.bell-item[data-money="4"] {
  border-left: 3px solid var(--flusso);
  padding-left: 9px;
}
.bell-item[data-money="4"] { font-weight: 500; }

.bell-item[data-money]:hover { background: var(--bg-raised); }

/* Il bordo del non-letto convive con quello della severita': l'accento va
   sopra, perche' 'nuovo' e' l'informazione piu' deperibile delle due. */
.bell-item.unread { border-left-color: var(--accent); }

/* ---------- Sedi dove aprire il perp ---------- */

.venues-cell { white-space: nowrap; }
.venues { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.venue {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  padding: 2px 4px; border-radius: 3px;
  border: 1px solid var(--border-default); background: var(--bg-inset);
  color: var(--text-secondary); cursor: help;
}
/* Binance ha il book piu' profondo su questi ticker ed e' la sede di
   riferimento: si distingue, le altre restano neutre per non trasformare la
   cella in un semaforo. */
.venue.v-binance { color: var(--funding); border-color: color-mix(in srgb, var(--funding) 40%, transparent); }

/* Sono link, e devono sembrarlo al passaggio senza diventare rumore a riposo. */
a.venue { text-decoration: none; }
a.venue:hover {
  background: var(--bg-raised);
  border-color: currentColor;
  color: var(--text-primary);
}
a.venue.v-binance:hover { color: var(--funding); }

/* ---------- CoinGecko accanto al ticker ---------- */

/* Sostituisce la colonna Mercati: il link vive dove sta il nome del token,
   che e' dove lo si cerca, e restituisce una colonna alla tabella. */
/* L'icona del grafico: spenta a riposo perche' e' una scorciatoia e non un
   dato, ma abbastanza carica da leggersi come cliccabile — era il difetto del
   marchio precedente, che a quella dimensione sembrava decorazione. */
.cg-link {
  display: inline-flex; align-items: center;
  line-height: 0; text-decoration: none;
  color: var(--text-tertiary);
  transition: color 0.12s, background 0.12s;
  padding: 1px; border-radius: 3px;
}
.cg-link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cg-link svg { display: block; }

/* Il tag e' sulla minoranza, quindi resta spento: segnala un'eccezione, non
   una categoria. */
.pill.tiny.muted { color: var(--text-tertiary); border-color: var(--border-default); }

/* La catena accanto al ticker.
 *
 * Due stati e non sette colori. Misurato il 31/08/2026 sui payload pubblicati:
 * nelle tabelle costruite sui wallet monitorati le righe sono BSC al 100% —
 * 310 su Monitor, 1.532 su Tutti i token, 54 in accumulo, 21 negli alert.
 * Colorare una pastiglia su ognuna vuol dire colorare tutta la colonna, e una
 * colonna tutta accesa nasconde proprio la riga che vale la pena vedere: quella
 * che su BSC non e'. Quindi BSC spenta come 'no perp', tutte le altre accese.
 *
 * Il testo della pastiglia porta l'identita' (ETH, BASE, ARB, SOL): il colore
 * dice solo "questa riga e' l'eccezione", e da solo non deve mai bastare. */
.pill.tiny.chain { color: var(--text-tertiary); border-color: var(--border-default); }
.pill.tiny.chain.altra {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Nelle celle che impilano le pastiglie a mano — Monitor, l'elenco delle
   espansioni di un accumulatore, gli alert — non c'e' nessun flex con gap:
   senza questo la catena e 'alpha' si toccherebbero, e 'alpha' e 'no perp' si
   toccavano gia' prima. Quattro pixel, la stessa aria che .sym lascia dopo il
   ticker. */
#monitor-table td.freeze .pill + .pill,
.inner-table td .pill + .pill { margin-left: 4px; }
/* Nella tabella degli alert il ticker non lascia aria dopo di se (.tk-sym ha
   solo il margine a sinistra), quindi lo spazio lo mette la pastiglia. */
#alerts-table td .pill.chain { margin-left: 6px; }

/* ---------- Segnalibro e pannello Comprati ---------- */

.buy-mark {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 0 4px 0 0; margin: 0;
  font-size: 13px; line-height: 1;
  color: var(--text-tertiary);
}
.buy-mark:hover { color: var(--funding); }
/* Acceso e' uno stato, non una decorazione: si vede scorrendo la colonna
   senza doverlo cercare. */
.buy-mark.on { color: var(--funding); }

.bought {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.bought:last-child { border-bottom: 0; }
.bought-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.bought-chg { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.bought-rm {
  margin-left: auto; appearance: none; border: 0; background: none;
  color: var(--text-tertiary); cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0 2px;
}
.bought-rm:hover { color: var(--short); }

.bought-row {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 0 8px; align-items: baseline;
  margin-top: 3px; font-size: 11px;
}
.bought-k { color: var(--text-tertiary); }
.bought-hz { display: flex; gap: 8px; flex-wrap: wrap; }
.bought-hz .hz { display: inline; font-size: 11px; }
.bought-ev {
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.bought-win { margin-top: 5px; font-size: 10px; color: var(--text-tertiary); }
.bought-quiet { font-size: 11px; color: var(--text-tertiary); }

/* Stato del feed: distingue il silenzio dal guasto. Su riga propria perche' e'
   una risposta a una domanda diversa dal conteggio degli eventi. */
.feed-state { flex-basis: 100%; font-size: 11px; }
.feed-state::before { content: '· '; color: var(--text-tertiary); }

/* ---------- Taglia dell'accumulatore ---------- */

/* Testa del dettaglio di un accumulatore: parole a sinistra, grafico a destra.
   Prima era tutto impilato a tutta larghezza e il grafico a bolle si prendeva
   la riga intera per pochi punti, allungando la scheda al punto che la tabella
   dei pump finiva fuori schermo. La colonna di sinistra ha un tetto: oltre i
   340px il testo corto si sparpaglia e il grafico si stringe senza motivo. */
.wl-testa {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 14px;
}
.wl-testa-parole { min-width: 0; }
/* Dentro la colonna il margine lo mette il contenitore, non le fasce. */
.wl-testa-parole > .wl-reasons { margin-bottom: 0; }
@media (max-width: 900px) {
  /* Sotto questa soglia affiancarle spreme tutte e due: si torna in colonna. */
  .wl-testa { grid-template-columns: 1fr; }
}
/* TOP WALLET: acceso, ma non quanto NEW. NEW dice "sta cominciando adesso",
   che e' la notizia; questo dice "chi compra ha una buona resa", che e' un
   contesto forte ma non urgente. Colore proprio per non confondersi con
   nessuno dei due stati di fase. */
.pill.top-wallet {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: help;
}
/* Spenta: il wallet e dentro ma sotto il suo peso equo. Deve leggersi come una
   presenza, non come un segnale — stesso colore per dire "e lui", nessun fondo
   e minuscolo per dire "non ci sta puntando". Senza questa, "non c'e'" e "c'e'
   ma pesa lo 0,2%" erano lo stesso vuoto. */
.pill.top-wallet.sotto-peso {
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
}
.wl-size { margin-bottom: 12px; }
.wl-size-row {
  display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  margin-top: 6px;
}
/* Il verdetto per primo e in parole: e' la domanda che si fa aprendo la riga —
   vale la pena seguirlo o e' un pesciolino? */
.wl-verdict {
  font-weight: 600; font-size: 13px;
  padding: 2px 8px; border-radius: 4px;
  border: 1px solid currentColor; cursor: help;
}
.wl-size-k { font-size: 11px; color: var(--text-tertiary); }
.wl-size-v { font-family: var(--mono); font-size: 13px; font-weight: 500; }

.prov-pos   { color: var(--long);  border-color: color-mix(in srgb, var(--long) 35%, transparent); }
.prov-neg   { color: var(--short); border-color: color-mix(in srgb, var(--short) 35%, transparent); }
.prov-muted { color: var(--text-tertiary); }

/* La corsa recente sotto la probabilita': un fatto accanto alla stima, non
   dentro. Colore di attenzione e non verde, perche' "e gia salito" e' tanto un
   argomento a favore quanto il segno che il movimento e' gia' avvenuto. */
/* La corsa gia' fatta, colorata come qualita' dell'ingresso: verde non e'
   ancora partito, arancione si sta muovendo, rosso e' gia' esploso. Il criterio
   e' il rapporto fra salita e drawdown misurato, non l'entusiasmo. */
.p-corsa {
  display: block; margin-top: 3px;
  font-size: 10px; cursor: help; font-weight: 500;
}
.ing-verde   { color: var(--long); }
.ing-arancio { color: var(--funding); }
.ing-rosso   { color: var(--short); }

/* Le tre gambe dell'indice squeeze, sotto il numero. Monospaziate e spente:
   sono la scomposizione di quello che sta sopra, non tre numeri da leggere in
   colonna — se avessero lo stesso peso visivo della cifra, la cella
   chiederebbe di confrontare quattro valori per riga invece di uno. */
.sq-gambe {
  font-family: var(--mono);
  color: var(--text-tertiary); letter-spacing: .02em; cursor: help;
}

/* Il ritmo sotto il volume futures. Spento di default: la cifra che si legge
   per prima e' quanto passa dal perpetuo, il moltiplicatore e' il commento.
   Si accende solo quando dice qualcosa — verde sopra il doppio della media,
   grigio sotto la meta', niente colore in mezzo, dove non c'e' notizia. */
.p-ritmo {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.p-ritmo.pos   { color: var(--long); font-weight: 500; }
.p-ritmo.muted { color: var(--text-tertiary); }

/* Il tag NEW e' acceso, a differenza di NO ALPHA che e' spento: segnala un
   caso da guardare, non un'eccezione da annotare. */
.pill.tiny.nuovo {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 600;
}

/* ---------- Movimenti in tempo reale sui token comprati ---------- */

.bought-flows { display: flex; flex-direction: column; gap: 1px; }
.bf {
  display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto;
  gap: 0 6px; align-items: baseline;
  padding: 3px 6px; border-radius: 3px;
  background: var(--bg-inset);
  color: var(--text-secondary); text-decoration: none;
  font-size: 10px;
}
.bf:hover { background: var(--bg-raised); color: var(--text-primary); }
.bf-when { font-family: var(--mono); color: var(--text-tertiary); }
.bf-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-what { grid-column: 2 / 3; grid-row: 2; color: var(--text-tertiary); }
.bf-qty { font-family: var(--mono); grid-row: 1 / 3; align-self: center; }

/* Il deposito su exchange e' il momento che chi e' dentro deve vedere subito:
   e' il desk che smette di credere al proprio trade. */
.bf-alert { background: color-mix(in srgb, var(--short) 14%, transparent); }
.bf-alert .bf-what { color: var(--short); font-weight: 600; }
.bf-alert .bf-qty { color: var(--short); }
.bf-out .bf-qty { color: var(--short); }

/* Lampeggio quando il portafoglio porta a una scheda gia' presente. */
.bought.flash { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.buy-mark svg { display: block; }

/* Selettore del periodo dentro il grafico: piccolo e in alto a destra, perche'
   e' un controllo del riquadro e non della pagina. */
.chart-card { position: relative; }
.chart-seg {
  position: absolute; top: 8px; right: 10px;
  z-index: 1;
}
.chart-seg button { padding: 3px 8px; font-size: 10px; }

/* I comandi del grafico di un accumulatore, su una riga e divisi.
   Qui i gruppi sono DUE — token e periodo — e `.chart-seg` li mandava tutti e
   due in `position:absolute` nello stesso angolo in alto a destra: si
   sovrapponevano, e quello che si vedeva era un nastro unico di pulsanti senza
   un confine ne' un'etichetta. La regola assoluta resta per le schede che di
   gruppi ne hanno uno solo, dove e' giusta; qui si torna nel flusso. */
.chart-comandi {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 18px;
  margin: 4px 0 10px;
}
.chart-comandi .chart-seg { position: static; flex-wrap: wrap; }
.chart-gruppo {
  display: flex; align-items: center; gap: 7px;
  min-width: 0; flex-wrap: wrap;
}
/* Il periodo non va mai a capo: sono tre pulsanti, e spezzarli farebbe saltare
   la riga proprio mentre i token, che sono tanti, si riordinano. */
.chart-gruppo:last-child { flex-wrap: nowrap; flex-shrink: 0; }
.chart-gruppo-et {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}
.chart-slot { min-height: 168px; }

/* ---------- Popup sui pallini del grafico ---------- */

.tip-mk { min-width: 210px; }
.tip-mk-head {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-default);
}
.tip-mk-row {
  display: grid; grid-template-columns: 5.5em 1fr;
  gap: 0 10px; align-items: baseline;
  font-size: 11px; line-height: 1.5;
}
.tip-mk-k { color: var(--text-tertiary); }
.tip-mk-v { font-family: var(--mono); color: var(--text-primary); }

/* I pallini sono interattivi: il cursore lo dice. */
.chart-svg circle[data-tip] { cursor: pointer; }

/* ---------- Scheda Comprati: gerarchia per chi e' gia' dentro ---------- */

/* Il verdetto sull'uscita e' la prima cosa e l'unica in grassetto: se i desk
   stanno scaricando, e' l'informazione che vale tutta la scheda. */
.bought-verdict {
  margin: 2px 0 6px;
  padding: 4px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  border: 1px solid currentColor; cursor: help;
}
.bought-verdict.pos  { color: var(--long); }
.bought-verdict.warn { color: var(--funding); }
.bought-verdict.neg  {
  color: var(--short);
  background: color-mix(in srgb, var(--short) 12%, transparent);
}

.bought-corsa { font-family: var(--mono); font-size: 11px; cursor: help; }
.bought-corsa.pos  { color: var(--long); }
.bought-corsa.warn { color: var(--funding); }
.bought-corsa.neg  { color: var(--short); }
.bought-px { font-family: var(--mono); font-size: 11px; color: var(--text-primary); }
.bought-desk { font-size: 11px; }

/* ---------- Copia indirizzo ---------- */

.addr-riga { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.addr-riga .row-addr { margin-top: 0; }

/* Spento a riposo come l'icona del grafico: e' un'azione, non un dato, e su una
   tabella da cinquanta righe cinquanta icone accese sarebbero rumore. */
.copy-btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 1px; margin: 0; border-radius: 3px; line-height: 0;
  color: var(--border-strong);
  transition: color 0.12s, background 0.12s;
}
.copy-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.copy-btn.ok { color: var(--long); background: color-mix(in srgb, var(--long) 16%, transparent); }
.copy-btn.ko { color: var(--short); }
.copy-btn svg { display: block; }

/* ---------- Taglia del movimento, letta dallo sfondo della riga ---------- */

/* Stessa grammatica del pannello eventi: la tinta e' il verso, la carica e' la
   taglia. Soglie sui percentili misurati — mediana 9.800 dollari, 85esimo
   320.000 — quindi il gradino piu' alto resta raro abbastanza da trovarlo
   senza leggere. Il gradino 0 non prende niente: sono i due terzi inferiori
   del feed, e colorarli toglierebbe senso al resto. */
#flows-table tbody tr { --flusso: var(--text-tertiary); }
#flows-table tbody tr[data-flow="in"]  { --flusso: var(--long); }
#flows-table tbody tr[data-flow="out"] { --flusso: var(--short); }

#flows-table tbody tr[data-money="1"] td { background: color-mix(in srgb, var(--flusso) 5%, transparent); }
#flows-table tbody tr[data-money="2"] td { background: color-mix(in srgb, var(--flusso) 10%, transparent); }
#flows-table tbody tr[data-money="3"] td { background: color-mix(in srgb, var(--flusso) 16%, transparent); }
#flows-table tbody tr[data-money="4"] td { background: color-mix(in srgb, var(--flusso) 24%, transparent); }

/* La colonna congelata ha un fondo proprio, o scorrendo in orizzontale le
   altre righe le passerebbero sotto: va tinta anche lei o resterebbe l'unica
   cella grigia in una riga colorata. */
#flows-table tbody tr[data-money="1"] .freeze { background: color-mix(in srgb, var(--flusso) 5%, var(--bg-surface)); }
#flows-table tbody tr[data-money="2"] .freeze { background: color-mix(in srgb, var(--flusso) 10%, var(--bg-surface)); }
#flows-table tbody tr[data-money="3"] .freeze { background: color-mix(in srgb, var(--flusso) 16%, var(--bg-surface)); }
#flows-table tbody tr[data-money="4"] .freeze { background: color-mix(in srgb, var(--flusso) 24%, var(--bg-surface)); }

#flows-table tbody tr:hover td { background: var(--bg-raised); }


/* ==================================================================== temi
 *
 * Tre palette sugli stessi token. Il resto del foglio non cambia: ogni regola
 * legge una variabile, quindi un tema e' una dichiarazione di colori e non una
 * seconda copia dello stile — che si sarebbe scollata al primo ritocco.
 */

/* ---------- Chiaro ----------
   Non e' lo scuro invertito: su fondo bianco il verde e il rosso saturi del
   tema scuro perdono contrasto e vibrano. Verde e rosso scendono di
   luminosita', i grigi salgono, e le superfici restano vicine fra loro perche'
   su carta le ombre non servono a separare — bastano i bordi. */
:root[data-theme="light"] {
  /* Grigi, non bianco. Il bianco pieno su un pannello di numeri riflette come
     un foglio sotto una lampada: la luminanza e' alta ovunque e l'occhio non
     ha un punto dove riposare. Qui la superficie piu' chiara sta all'88% e il
     fondo pagina all'82%, quindi il contrasto lo fa il testo e non lo sfondo.
     Toni leggermente caldi perche' il grigio neutro puro vira all'azzurro su
     quasi tutti gli schermi e diventa freddo. */
  --bg-base: #DEDDD9;
  --bg-surface: #E9E8E4;
  --bg-raised: #D6D5D0;
  --bg-inset: #D0CFC9;
  --border-subtle: #C8C7C1;
  --border-default: #B4B3AC;
  --border-strong: #8A8981;

  --text-primary: #1A1C1F;
  --text-secondary: #454A51;
  --text-tertiary: #5F646C;   /* misurato: a #6A6F77 era 4,12 */

  --long: #0A6636;
  --short: #A81F22;
  --funding: #7A4A00;
  --accent: #10508F;
  --whale: #5B2FB0;
  --neutral-bar: #B4B3AC;

  --viz-series: #10508F;
  --viz-volume: #A8481B;
  --viz-price: #7A7F86;
  --viz-grid: #CBCAC4;
  --viz-axis: #ADACA5;
  --viz-ink: #6A6F77;
  --viz-surface: #E9E8E4;
}

/* ---------- Ambra ----------
   Fosforo su nero, come un monitor CRT. Il verde e' il colore del testo, non
   solo dei numeri positivi: per distinguere il segno servono ambra e rosso,
   scelti fra quelli che i fosfori davvero producevano. Nessun blu — su un CRT
   non esisteva, e messo qui stonerebbe. */
:root[data-theme="degen"] {
  /* Ambra su fondo caldo scuro, non fosforo verde.
     Il verde su nero e' la cosa che stanca di piu': luminanza alta, tinta
     satura, e su uno schermo moderno nessuno dei difetti che sui CRT lo
     rendevano tollerabile. L'ambra era la risposta che diedero allora — i
     monitor P3 vennero venduti proprio come i meno faticosi — e qui funziona
     per lo stesso motivo: tinta calda, saturazione bassa, luminanza tenuta
     sotto quella del bianco.
     Il fondo non e' nero ma bruno molto scuro: il nero puro accanto a un testo
     chiaro crea l'alone che costringe l'occhio a rimettere a fuoco. */
  --bg-base: #14120F;
  --bg-surface: #1C1915;
  --bg-raised: #26221C;
  --bg-inset: #100E0B;
  --border-subtle: #2E2921;
  --border-default: #423A2E;
  --border-strong: #6B5C46;

  --text-primary: #EBD3A8;
  --text-secondary: #B69B72;
  --text-tertiary: #93805F;   /* misurato: a #8A7554 era 3,96 */

  /* Il segno non lo porta l'ambra, che e' il colore del testo: verde salvia e
     terracotta, tenuti alla stessa luminanza cosi' nessuno dei due grida. */
  --long: #8FBF6A;
  --short: #D9705C;
  --funding: #D9A441;
  --accent: #7FB0C4;
  --whale: #B08BC4;
  --neutral-bar: #423A2E;

  --viz-series: #7FB0C4;
  --viz-volume: #D9A441;
  --viz-price: #6B5C46;
  --viz-grid: #241F19;
  --viz-axis: #423A2E;
  --viz-ink: #8A7554;
  --viz-surface: #100E0B;
}

/* Nel terminale tutto e' a spaziatura fissa: e' la scelta che fa il tema, piu'
   dei colori. */
:root[data-theme="degen"] body,
:root[data-theme="degen"] .row-label,
:root[data-theme="degen"] .section-head h2,
:root[data-theme="degen"] .wordmark { font-family: var(--mono); }
:root[data-theme="degen"] .wordmark { letter-spacing: 0.12em; }

/* ---------- Selettore ---------- */

.theme-seg { display: flex; gap: 2px; }
.theme-seg button {
  appearance: none; cursor: pointer;
  width: 22px; height: 20px; padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-tertiary);
  font-family: var(--mono); font-size: 9px; line-height: 1;
  transition: color 90ms linear, border-color 90ms linear;
}
.theme-seg button:hover { color: var(--text-secondary); border-color: var(--border-strong); }
.theme-seg button[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}


/* ---------- Rifiniture per tema ----------
 *
 * Solo dove il tema ne ha bisogno, e mai a scapito della leggibilita': i
 * contrasti sono misurati e nessuna di queste regole li tocca.
 */

/* Chiaro: su un fondo grigio i pannelli si staccano gia' per differenza di
   tono, quindi l'ombra serve appena a dire quale sta sopra. Piu' marcata
   diventerebbe sporco su una tavolozza che di contrasto ne ha poco per
   scelta. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .controlbar {
  box-shadow: 0 1px 2px rgba(26, 28, 31, 0.06);
}
/* Le righe alternate aiutano su carta, dove non c'e' il contrasto dello
   schermo a tenere insieme una riga lunga undici colonne. */
:root[data-theme="light"] tbody tr:nth-child(even) > td {
  background: color-mix(in srgb, var(--bg-raised) 45%, transparent);
}
:root[data-theme="light"] tbody tr:hover > td { background: var(--bg-raised); }

/* Niente alone e niente scanline: erano le due cose che stancavano davvero.
   Un testo con un'ombra colorata costringe l'occhio a rimettere a fuoco a ogni
   riga, e una texture fissa sopra tutta la pagina non si smette mai di
   percepire. Il tema si regge sulla palette, che e' il posto giusto. */
:root[data-theme="degen"] .panel { border-color: var(--border-subtle); }
:root[data-theme="degen"] tr.clickable:hover > td {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}
:root[data-theme="degen"] .pill,
:root[data-theme="degen"] .venue,
:root[data-theme="degen"] .seg button { letter-spacing: 0.06em; }

/* ============================================================ registro entita' */

/* La copertura, in cima al pannello. La barra non e' decorazione: e' l'unico
   modo in cui "166 su 4.692" si legge come una frazione piccola invece che come
   due numeri grandi. Il colore da solo non dice niente — accanto c'e' sempre la
   percentuale scritta e il conteggio di chi resta fuori. */
.coverage {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.cov-head { font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
.cov-bar {
  display: block; height: 6px; border-radius: 2px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.cov-fill { display: block; height: 100%; background: var(--accent); }
.cov-note { margin-top: 7px; font-size: 11px; color: var(--text-tertiary); line-height: 1.6; }

.ent-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.search {
  appearance: none; min-width: 260px; flex: 0 1 320px;
  background: var(--bg-inset); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 6px 10px; font: 400 12px/1.5 var(--sans);
}
.search::placeholder { color: var(--text-tertiary); }
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  appearance: none; cursor: pointer;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 3px 8px; font: 400 11px/1.5 var(--sans);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip.on {
  background: var(--bg-raised); color: var(--text-primary);
  border-color: var(--accent);
}

/* La pastiglia di categoria. Sedici categorie non possono avere sedici colori
   distinguibili, quindi ne hanno sei: il colore raggruppa (exchange, operatore,
   codice, trappola, ignoto) e la parola distingue. Il colore non porta mai da
   solo il significato — la parola c'e' sempre dentro la pastiglia. */
.kpill {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font: 500 10px/1.7 var(--sans); letter-spacing: 0.04em;
  white-space: nowrap; cursor: help;
  border: 1px solid var(--border-default); color: var(--text-secondary);
  background: var(--bg-surface);
}
.k-cex     { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
             color: var(--accent); }
.k-desk    { border-color: color-mix(in srgb, var(--whale) 55%, transparent);
             color: var(--whale); }
/* Market maker in arancione, pieno e non solo bordato.
 *
 * Sono nove indirizzi su cinquemila e vanno trovati a colpo d'occhio scorrendo
 * la tabella: sapere che una controparte e' Wintermute cambia come si legge
 * tutto il resto della riga, e cercarla filtrando ogni volta significa non
 * accorgersene mai. Il riempimento e' quello che li fa saltare fuori — il solo
 * bordo si perde fra le altre dieci categorie. */
.k-mm      { border-color: color-mix(in srgb, var(--funding) 70%, transparent);
             color: var(--funding);
             background: color-mix(in srgb, var(--funding) 14%, transparent);
             font-weight: 600; }

/* Verde per chi ha trattato con i nostri desk.
 *
 * Non e' un tipo, e' una relazione: sta su una pastiglia sua accanto al nome, e
 * il verde e' lo stesso di un accumulo perche' dice la stessa cosa — «questo
 * tocca il giro che ci interessa». Quattrocentonovantanove indirizzi su
 * cinquemila, quindi deve distinguersi senza gridare. */
.pill.rete {
  border-color: color-mix(in srgb, var(--long) 55%, transparent);
  color: var(--long);
  background: color-mix(in srgb, var(--long) 12%, transparent);
}
/* Chi ne tocca piu' di uno pesa di piu' e si vede di piu'. */
.pill.rete.multi { border-color: var(--long); font-weight: 600; }
.k-bot     { border-color: var(--border-strong); color: var(--text-secondary); }
.k-trader  { border-color: color-mix(in srgb, var(--long) 50%, transparent);
             color: var(--long); }
.k-code    { border-color: var(--border-default); color: var(--text-tertiary); }
.k-burn    { border-color: var(--border-default); color: var(--text-tertiary); }
.k-trap    { border-color: color-mix(in srgb, var(--short) 55%, transparent);
             color: var(--short); }
.k-unknown { border-color: var(--border-subtle); color: var(--text-tertiary);
             background: var(--bg-inset); }

/* Stati del monitor. Stesso componente, altra semantica: qui il colore replica
   una parola che c'e' gia' scritta dentro. */
.st-ok   { border-color: color-mix(in srgb, var(--long) 50%, transparent); color: var(--long); }
.st-run  { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.st-warn { border-color: color-mix(in srgb, var(--funding) 55%, transparent); color: var(--funding); }
.st-bad  { border-color: color-mix(in srgb, var(--short) 55%, transparent); color: var(--short); }
.st-none { border-color: var(--border-subtle); color: var(--text-tertiary); }

.ent-cell { white-space: normal; }
.ent-name { display: inline-block; margin-right: 6px; }
.pill.squad {
  border-color: color-mix(in srgb, var(--whale) 60%, transparent);
  color: var(--whale);
}

/* ------------------------------------------------------------------ squadre */

.squad { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.squad:last-child { border-bottom: 0; }
.squad-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.squad-n { font-size: 12px; color: var(--text-primary); }
.squad-funder { font-size: 11px; color: var(--text-secondary); }
.squad-why {
  margin: 6px 0 10px; font-size: 11px; color: var(--text-tertiary);
  line-height: 1.6; max-width: 78ch;
}
.squad-members { display: grid; gap: 4px; }
.squad-member {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; padding: 4px 0;
  border-top: 1px solid var(--border-subtle);
}
.squad-pumps { font: 400 11px/1.5 var(--mono); color: var(--text-tertiary); }

/* ================================================================== monitor */

/* Il verdetto: una riga, letta senza leggere. Se serve interpretarlo, ha gia'
   fallito il suo scopo. */
.adm-verdict { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.verdict {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-primary);
}
.verdict-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--long); }
.verdict.warn .verdict-dot { background: var(--funding); }
.verdict.bad  .verdict-dot { background: var(--short); }
.verdict.warn { color: var(--funding); }
.verdict.bad  { color: var(--short); }

.adm-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
}
.tile {
  padding: 14px 16px;
  border-right: 1px solid var(--border-subtle);
}
.tile:last-child { border-right: 0; }
.tile-k {
  font: 500 11px/1.5 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px;
}
.tile-v { font-size: 22px; color: var(--text-primary); }
.tile-v.neg { color: var(--short); }
.tile-s { margin-top: 4px; font-size: 11px; color: var(--text-tertiary); }

/* La barra della quota. Sotto l'80% e' neutra: colorarla sempre insegnerebbe a
   ignorarla, e il giorno che conta non la guarderebbe nessuno. */
.quota {
  display: inline-block; vertical-align: middle;
  width: 110px; height: 6px; border-radius: 2px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  overflow: hidden; margin-right: 8px;
}
.quota-fill { display: block; height: 100%; background: var(--neutral-bar); }
.quota-fill.warn { background: var(--funding); }
.quota-fill.bad  { background: var(--short); }
.quota-n { font-size: 11px; color: var(--text-secondary); }

.adm-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0; align-items: start;
}
.adm-side { padding: 14px 16px; border-left: 1px solid var(--border-subtle); }
.kv {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.kv:last-of-type { border-bottom: 0; }
.kv-k { color: var(--text-tertiary); }
.kv-v { color: var(--text-primary); }

.adm-cron { padding: 10px 16px; }
.cron-row {
  padding: 5px 0; font-size: 11px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle); word-break: break-all;
}
.cron-row:last-child { border-bottom: 0; }

/* Il puntino sulla linguetta Admin: l'unico posto da cui si vede che qualcosa
   si e' rotto mentre si sta guardando un'altra tab. */
.tab-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 6px; vertical-align: middle; background: var(--funding);
}
.tab-dot.bad { background: var(--short); }

.small { font-size: 11px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .adm-cols { grid-template-columns: minmax(0, 1fr); }
  .adm-side { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .tile { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ==================================================================== ticker
 *
 * La scheda dei token manipolabili. Riusa quasi tutto — pannello, tabella,
 * chart-card, pastiglie — e aggiunge le due sole cose che non esistevano
 * altrove: il termometro long/short e il pallino d'allarme.
 */

/* Il chip filtro segna lo stato con aria-pressed e non con una classe: e' lo
   stesso attributo che lo annuncia allo screen reader, e tenerne due
   sincronizzati e' il modo classico di farli divergere. */
.chip[aria-pressed="true"] {
  background: var(--bg-raised); color: var(--text-primary);
  border-color: var(--border-strong);
}
.chip-n {
  margin-left: 6px; font-size: 10px; color: var(--text-tertiary);
}
.chip[aria-pressed="true"] .chip-n { color: var(--text-secondary); }

.k-chain { border-color: var(--border-strong); color: var(--text-secondary); }
.k-meme  { border-color: color-mix(in srgb, var(--funding) 55%, transparent);
           color: var(--funding); }
/* Cold → hot. Rosso perche' e' il movimento che precede, non perche' sia una
   perdita: la parola sta dentro la pastiglia, quindi il colore non porta il
   significato da solo. */
.k-hot   { border-color: color-mix(in srgb, var(--short) 60%, transparent);
           color: var(--short); }

/* ---------- il pallino d'allarme ---------- */

.tk-nome { display: flex; align-items: center; gap: 8px; }
.tk-base { font-weight: 500; }

/* Il grafico a destra del ticker. Spento finche' non lo si cerca — e' una via
 * d'uscita, non un dato — e acceso sull'accento al passaggio, come i link. Il
 * bersaglio del clic e' 20px anche se il segno ne misura 11: sotto quella
 * soglia si manca, e questa e' una cella che si clicca per aprire la riga,
 * quindi mancare l'icona significa aprire altro. */
.tk-chart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px; margin-left: -2px;
  color: var(--text-tertiary); border-radius: 4px;
}
.tk-chart:hover, .tk-chart:focus-visible {
  color: var(--accent); background: var(--bg-raised);
}

.tk-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--neutral-bar);
  cursor: help;
}
/* Lo spazio resta occupato anche senza allarme: senza, il nome dei ticker
   tranquilli sarebbe rientrato di otto pixel e la colonna non si leggerebbe
   piu' come colonna. */
.tk-dot-vuoto { background: transparent; cursor: default; }
.tk-dot-watch { background: var(--funding); }
.tk-dot-forte { background: var(--short); }

/* Il lampeggio e' un'opacita', non un colore che va e viene: cosi' il pallino
   non sparisce mai del tutto e resta trovabile anche a meta' ciclo. */
@keyframes tk-pulsa {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--short) 55%, transparent); }
  50%      { opacity: 0.45; box-shadow: 0 0 0 4px transparent; }
}
.tk-lampeggia { animation: tk-pulsa 1.6s ease-in-out infinite; }

/* Chi ha chiesto meno movimento al sistema operativo lo ottiene: il pallino
   resta acceso e distinguibile, semplicemente non pulsa. Non e' un dettaglio
   di cortesia — per chi soffre di disturbi vestibolari un'animazione che non
   si ferma mai rende la pagina inutilizzabile. */
@media (prefers-reduced-motion: reduce) {
  .tk-lampeggia { animation: none; }
}

/* ---------- il termometro ---------- */

.tk-term { margin-top: 12px; }
.tk-term:first-of-type { margin-top: 6px; }
.tk-term-testa { display: flex; align-items: baseline; gap: 8px; }
.tk-term-nota { font-size: 10px; }
.tk-term-vuoto { font-size: 11px; margin-top: 4px; }

/* Una barra sola divisa in due, non due barre: long e short sommano a uno, e
   mostrarli come grandezze indipendenti costringe a fare la sottrazione a
   mente per rispondere all'unica domanda che conta — da che parte pende. */
.tk-barra {
  position: relative; display: flex; height: 10px; margin-top: 6px;
  border-radius: 2px; overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
}
.tk-barra-long  { background: var(--long); }
.tk-barra-short { background: var(--short); }

/* La tacca del pari. E' quello che rende la barra una misura invece di una
   decorazione: senza un riferimento, il 52% e il 79% si somigliano. */
.tk-barra-pari {
  position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px;
  background: var(--bg-base);
}

.tk-term-piede {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; font-size: 11px;
}
.tk-term-piede .mono { font-size: 11px; }

/* ---------- la barra in tabella ---------- */

.tk-mini { display: flex; align-items: center; gap: 8px; cursor: help; }
.tk-mini .tk-barra-mini {
  width: 88px; height: 6px; margin-top: 0; flex: 0 0 88px;
}
.tk-mini-num { font-size: 12px; color: var(--text-secondary); }

/* ---------- la colonna LONG RATIO, in tabella accumulo ---------- */

/* Due barre impilate nella stessa cella, non una accanto all'altra: la colonna
   e' larga quanto le altre e affiancarle avrebbe dato quaranta pixel a testa,
   cioe' due barre in cui il 55% e il 75% si somigliano. Impilate mantengono la
   larghezza della barra della scheda Ticker, e le due percentuali finiscono
   incolonnate — che e' il confronto che si fa davvero, W contro R sulla stessa
   riga di token.

   La sigla sta a sinistra e non dentro il tooltip perche' senza di essa le due
   barre sono indistinguibili, e quale delle due sia il denaro e quale la testa
   e' l'unica cosa che rende la cella leggibile. */
.lr-cella { white-space: nowrap; }
.lr-riga { display: flex; align-items: center; gap: 6px; justify-content: flex-end; cursor: help; }
.lr-riga + .lr-riga { margin-top: 3px; }
.lr-lab {
  font-size: 10px; color: var(--text-tertiary); letter-spacing: .06em;
  width: 9px; text-align: left;
}
.lr-riga .tk-barra-mini { width: 52px; height: 6px; margin-top: 0; flex: 0 0 52px; }
.lr-num { font-size: 12px; min-width: 30px; text-align: right; }
/* Lo scarto non e' un terzo valore, e' il commento ai due sopra: resta piccolo
   e spento, e si accende solo il segno attraverso la parola. */
.lr-div { font-size: 10px; color: var(--funding); text-align: right; margin-top: 2px; }

/* ---------- soglia superata, in tabella ---------- */

/* Il colore non basta: il numero porta gia' la 'x' e il tooltip dice quale
   soglia e' stata passata, quindi la tinta e' un rinforzo e non il messaggio. */
.tk-forte { color: var(--short); font-weight: 500; }
.tk-watch { color: var(--funding); }

/* ---------- sedi ---------- */

.tk-sedi { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- la tendina ---------- */

.tk-wallet-box { margin-top: 16px; }
.tk-mosse { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.tk-mossa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
}
.tk-mossa .mono { font-size: 12px; }

.tk-allarmi { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tk-allarme {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12px; padding-left: 8px;
  border-left: 2px solid var(--border-default);
}
.tk-allarme.forte { border-left-color: var(--short); }
.tk-allarme.watch { border-left-color: var(--funding); }
.tk-allarme-quando { font-size: 11px; color: var(--text-tertiary); flex: 0 0 auto; }

@media (max-width: 767px) {
  /* Le due carte si impilano: affiancate su 390px il grafico del volume
     diventa una striscia in cui non si legge nessun punto. La tabella NON si
     impila in schede — scorre in orizzontale, come tutte le altre. */
  .tk-mini .tk-barra-mini { width: 56px; flex: 0 0 56px; }
}

/* ---------- il book a pronti ---------- */

.tk-book { margin-top: 16px; }
.tk-book-riga {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 6px; font-size: 12px; line-height: 18px;
}
/* Il numero prima della frase e allineato a larghezza fissa: le due righe si
   leggono come una coppia, non come due frasi che cominciano in punti diversi. */
.tk-book-num {
  flex: 0 0 92px; text-align: right;
  font-size: 14px; color: var(--text-primary);
}
.tk-sedi { margin-bottom: 10px; }

/* Due filtri, non undici pastiglie in fila.
   Senza l'etichetta davanti a ciascun gruppo, "base 5" e "tutte 54" finivano
   attaccate e si leggevano come lo stesso filtro: cliccando la seconda si
   perdeva la prima senza capire perche'. */
.chip-group { display: flex; align-items: center; gap: 8px; }
.chip-group-label {
  font: 500 11px/1.4 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .chip-group { flex-wrap: wrap; }
}

/* ---------- la tendina non esce dallo schermo ---------- */

/* La tendina vive dentro una tabella che scorre in orizzontale, quindi per
   default e' larga quanto la tabella: su 390px meta' del contenuto finiva fuori
   vista, e l'unico modo di trovarlo era scorrere di lato una tabella che
   sembrava gia' finita.
   `sticky` la tiene incollata al bordo sinistro della vista mentre la tabella
   scorre sotto, e la larghezza e' quella misurata dal JS sul contenitore. */
.tk-dett { padding: 0; }
.tk-dett > .breakdown-box {
  position: sticky;
  left: 0;
  width: var(--tk-vista, 100%);
  box-sizing: border-box;
}

/* `hidden` non basta quando il CSS dichiara un display.
   L'attributo vale display:none dal foglio dell'user agent, che qualunque
   regola di questo file batte per specificita': .chip-group restava flex e
   .tab-count restava inline-block, quindi le due cose che il JS credeva di
   aver nascosto continuavano a occupare spazio — un'etichetta CATENA senza
   pastiglie sotto, e un rettangolo grigio accanto al nome della linguetta che
   si legge come un trattino. */
.chip-group[hidden] { display: none; }
.tab-count[hidden]  { display: none; }

/* --- pannello del wallet ------------------------------------------------
 *
 * La barra sopra la griglia dei grafici: cosa si sta guardando a sinistra, e a
 * destra la via per i movimenti uno per uno — che prima era quello che il click
 * sulla riga faceva, e adesso e' un'azione dichiarata invece che nascosta. */
.wallet-drill-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
/* Un bottone che non compete con i dati: e' una via d'uscita, non un comando
 * primario, e in un pannello fatto di grafici il colore deve restare ai
 * grafici. */
.ghost-btn {
  background: none; border: 1px solid var(--border-default);
  border-radius: 4px; color: var(--text-secondary);
  font: inherit; font-size: 11px; line-height: 16px;
  padding: 3px 9px; cursor: pointer;
}
.ghost-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* Tre per riga invece di due: qui i riquadri sono dodici e non due, e sono piu'
 * bassi (132px contro 168). A due colonne il pannello diventava una colonna da
 * scorrere per mezzo schermo, che e' l'opposto della panoramica per cui esiste. */
.breakdown-box .chart-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Il dettaglio di «Token in accumulo» fa eccezione: i riquadri sono QUATTRO —
   prezzo, volume del perpetuo, open interest, divergenza — e a tre per riga il
   quarto restava solo su una seconda riga larga un terzo. Due per due, e il
   prezzo (che e' il soggetto della scheda) tiene meta' larghezza invece di un
   terzo. La regola sta dopo quella generale e non prima: stessa specificita',
   vince l'ultima. */
.breakdown-box .chart-grid-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .breakdown-box .chart-grid-due { grid-template-columns: minmax(0, 1fr); }
}

/* La barra del periodo, in cima al dettaglio.
   Il selettore stava nell'angolo del riquadro del prezzo, in `position:absolute`,
   perche' comandava quel grafico soltanto. Adesso ne comanda quattro, quindi
   torna nel flusso e sta sopra la griglia: un comando che governa piu' riquadri
   e non puo' stare dentro uno di essi, o si legge come suo. */
.breakdown-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-bottom: 10px;
}
.breakdown-bar .chart-seg { position: static; margin: 0; }
.breakdown-bar .chart-seg-label { margin: 0; }
@media (max-width: 1100px) {
  .breakdown-box .chart-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .breakdown-box .chart-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- Selezionatore: testa
 *
 * Il blocco sopra la tabella diceva le cose giuste in un modo che non si
 * leggeva: tre paragrafi di prosa a piena larghezza, uno dei quali di otto
 * righe, sopra una tabella. Chi apre una tabella li salta tutti — e uno dei tre
 * era l'avvertenza che nessuno di quei numeri e' una previsione, cioe' proprio
 * quella che deve arrivare.
 *
 * Qui ogni fatto e' una riga con la sua etichetta a sinistra, incolonnata: si
 * scorre con l'occhio invece di leggerla, e le due righe che avvertono si
 * distinguono dalle altre senza gridare. */
.cand-riga {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  /* Settantasei caratteri, non centootto. La misura tipografica classica sta
   * fra 60 e 80: oltre, tornando a capo l'occhio perde la riga e rilegge la
   * stessa o ne salta una. A 108 il testo attraversava tutto lo schermo su un
   * monitor largo e diventava una fascia illeggibile — che e' esattamente il
   * difetto per cui questo blocco era gia' stato rifatto una volta. */
  max-width: 76ch;
}
.cand-riga + .cand-riga { border-top: 1px solid var(--border-subtle); }

.cand-k {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
  white-space: nowrap;
}

/* Un avvertimento non e' un errore: niente rosso. Cambia il colore
 * dell'etichetta, non del testo, cosi' si vede scorrendo la colonna di
 * sinistra senza che la riga urli piu' delle altre. */
.cand-avviso .cand-k { color: var(--warn, var(--text-secondary)); font-weight: 600; }

@media (max-width: 640px) {
  .cand-riga { grid-template-columns: 1fr; gap: 2px; }
  .cand-k { text-align: left; }
}

/* ------------------------------------------- Selezionatore: scheda aperta */
.cand-termometri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.cand-term-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* La barra si ferma al metro invece di scalare su un massimo teorico: il metro
 * e' il desk confermato piu' debole, e sopra la soglia "quanto sopra" non
 * cambia la decisione. Il colore pieno segna il superamento, che e' l'unica
 * lettura binaria che serve. */
.cand-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--border-subtle);
  overflow: hidden;
  margin: 5px 0 4px;
}
.cand-bar-f { display: block; height: 100%; background: var(--text-tertiary); }
.cand-bar-f.ok { background: var(--whale, var(--text-secondary)); }
.cand-term-n { font-size: 10px; line-height: 1.4; }

.cand-perche { margin: 12px 0; }
.cand-curva { margin-top: 14px; }

/* Una riga che si apre deve dirlo prima di essere cliccata. */
#cand-table tbody tr.clickable { cursor: pointer; }
#cand-table tbody tr.clickable:hover { background: var(--row-hover, rgba(127,127,127,0.06)); }

/* Il menu dei token nella scheda del Selezionatore. Un indirizzo che ne ha
 * lavorati quarantatre stendeva una fila di bottoni che andava a capo tre
 * volte: si vedeva tutto e non si trovava niente. */
.chart-select { max-width: 320px; font-size: 12px; padding: 3px 6px; }
.chart-seg-label {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); margin-right: 8px; white-space: nowrap;
}

/* L'indirizzo accanto al nome del wallet nella barra dei filtri. Il nome e'
 * un'etichetta che gli abbiamo messo noi; l'indirizzo e' l'unica cosa che lo
 * identifica davvero, ed e' quello che si copia. */
.scope-addr {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
}
.scope-addr:hover { color: var(--text-primary); }

/* Zerion accanto all'explorer. Discreto: e' una scorciatoia, non un dato. */
.lnk-zerion {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
}
.lnk-zerion:hover { color: var(--text-primary); }

/* Il piu' che mette un candidato sotto osservazione. Discreto finche' non serve:
 * e' un'azione con una conseguenza (parte l'ingestione, che costa quota), non
 * una scorciatoia da premere per curiosita'. */
.btn-piu {
  margin-left: 8px;
  min-width: 20px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.btn-piu:hover:not(:disabled) { color: var(--text-primary); border-color: var(--text-tertiary); }
.btn-piu:disabled { cursor: default; }
.btn-piu.fatto { color: var(--whale, var(--text-secondary)); border-style: dashed; }

/* Il prezzo del token sopra la curva. Era leggibile solo passando il mouse su
 * un pallino da quattro pixel: la domanda «a quanto sta» viene prima di «quanto
 * ha comprato», e non si risponde dietro un'interazione. */
.chart-prezzo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.chart-prezzo-v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-prezzo-d { font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-prezzo-q { font-size: 11px; padding: 1px 5px; border-radius: 3px; }
.chart-tkr { margin-left: 4px; }

/* ---------------------------------------------------- grafico Monitor
 *
 * I colori vengono dalle variabili VERE del tema, e vale la pena scriverlo
 * perche' la prima versione non lo faceva: usava `--panel`, `--muted`, `--fg`,
 * `--pos`, `--warn` — nomi plausibili e inesistenti. Una variabile CSS non
 * definita non fallisce, cade sul valore predefinito della proprieta': su un
 * `fill` di SVG quel valore e' NERO. Il risultato era un grafico con i pannelli
 * neri, il testo nero sopra, e nessun errore da nessuna parte a segnalarlo.
 *
 * La tavolozza `--viz-*` esiste gia' ed e' fatta per questo: `--viz-surface`
 * per il fondo dei riquadri, `--viz-grid` per le righe, `--viz-axis` per i
 * bordi. Le serie prendono i colori semantici del tema — `--funding` per
 * l'open interest, `--long` e `--short` per compra e scarica — cosi' un pallino
 * verde qui vuol dire la stessa cosa che vuol dire in tabella. */
.mon-chart-wrap { position: relative; margin: 6px 0 0; }
.mon-chart-head {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 8px;
  /* Allineata con l'AREA DEL GRAFICO, non col bordo del riquadro: l'svg ha un
   * viewBox largo 1000 con 62 unita' di margine per le etichette dell'asse,
   * quindi i pannelli cominciano al 6,2%. In percentuale e non in pixel perche'
   * il grafico si allarga con la finestra mentre il viewBox resta fisso. */
  padding-left: 6.2%; padding-right: 1.4%;
}
.mon-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.mon-pick > span { color: var(--text-tertiary); }
.mon-pick select {
  background-color: var(--bg-raised); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: 5px;
  padding: 3px 6px; font-size: 12px; max-width: 320px; font-family: var(--sans);
}
.mon-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--text-tertiary);
}
.mon-leg { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.mon-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.mon-swatch-buy { width: 8px; height: 8px; border-radius: 50%; background-color: var(--long); }
.mon-swatch-sagoma { height: 0; border-top: 2px dashed var(--text-tertiary); border-radius: 0; }
.mon-swatch-innesco { background-color: var(--funding); opacity: .55; height: 10px; width: 4px; }
.mon-swatch-decollo { background-color: var(--short); height: 10px; width: 2px; }

.mon-chart { width: 100%; overflow-x: auto; }
/* Altezza fissa: il grafico si allarga con la finestra ma non si schiaccia in
 * verticale, perche' e' l'altezza a decidere se una differenza si vede. */
/* 620 e non 460: il viewBox e' alto 686 unita' da quando i pannelli sono
 * quattro, e un'altezza CSS piu' bassa con preserveAspectRatio="none" non
 * taglia — schiaccia. La divergenza, che e' stata allargata apposta perche' si
 * leggesse, sarebbe tornata piatta per un motivo diverso da prima. */
.mon-svg { width: 100%; height: 620px; display: block; }

.mon-pane { fill: var(--viz-surface); stroke: var(--viz-axis); stroke-width: 1; }
.mon-griglia { stroke: var(--viz-grid); stroke-width: 1; }
.mon-zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
/* Le etichette degli assi si LEGGONO: `--viz-ink` e' pensato per l'inchiostro
 * dentro il disegno, non per i numeri che ci si legge accanto. */
.mon-tick { fill: var(--text-secondary); font-size: 10px; font-family: var(--mono); }
.mon-titolo { fill: var(--text-tertiary); font-size: 11px; font-family: var(--sans); }
.mon-vuoto { fill: var(--text-tertiary); font-size: 11px; font-family: var(--sans); }

.mon-linea { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mon-prezzo { stroke: var(--viz-series); }
.mon-oi { stroke: var(--funding); }
.mon-div { stroke: var(--whale); }

/* Tratteggiata e smorzata APPOSTA: e' una mediana del passato, e disegnarla
 * col peso della serie vera la farebbe leggere come una previsione. */
.mon-sagoma {
  fill: none; stroke: var(--text-tertiary); stroke-width: 1.4;
  stroke-dasharray: 5 4; opacity: .6; vector-effect: non-scaling-stroke;
}
.mon-innesco { fill: var(--funding); opacity: .14; }
.mon-decollo { stroke: var(--short); stroke-width: 1; opacity: .55; stroke-dasharray: 2 3; }

.mon-buy { stroke: var(--viz-surface); stroke-width: 1; }
.mon-buy.in { fill: var(--long); fill-opacity: .85; }
/* Vuoto e non rosso pieno: un desk che scarica e' un fatto, non un allarme. */
.mon-buy.out { fill: none; stroke: var(--short); stroke-width: 1.6; }

/* --- la riga che si apre, il mirino, la targhetta ------------------------- */
.mon-cliccabile { cursor: pointer; }
.mon-cliccabile:hover { background-color: var(--bg-raised); }
tr.mon-aperta { background-color: var(--bg-raised); }
tr.mon-aperta td { border-bottom-color: transparent; }
.mon-riga-chart > td { padding: 0 8px 14px; background-color: var(--bg-inset); }

.mon-mirino { stroke: var(--border-strong); stroke-width: 1; pointer-events: none; }
.mon-punto { fill: var(--text-primary); stroke: var(--viz-surface); stroke-width: 1.5; pointer-events: none; }
.mon-punto.mon-prezzo { fill: var(--viz-series); }
.mon-punto.mon-oi { fill: var(--funding); }
.mon-punto.mon-div { fill: var(--whale); }

.mon-targa {
  position: absolute; top: 8px; z-index: 3; pointer-events: none;
  background-color: var(--bg-raised); border: 1px solid var(--border-default);
  border-radius: 6px; padding: 7px 9px; font-size: 11px; min-width: 200px;
  color: var(--text-primary); box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.mon-targa-t { color: var(--text-tertiary); margin-bottom: 5px; font-size: 10px; }
.mon-targa-r { display: flex; justify-content: space-between; gap: 14px; line-height: 1.65; }
.mon-targa-k { color: var(--text-secondary); }

.mon-chart-wrap > .cov-note { padding-left: 6.2%; padding-right: 1.4%; }
/* Le barre del volume: stesso arancione dell'open interest sarebbe confusione,
 * quindi il colore dedicato che il tema tiene per il volume. */
.mon-barra { fill: var(--viz-volume); fill-opacity: .65; }
.mon-punto.mon-vol { fill: var(--viz-volume); }
/* Il promemoria sul book: visibile ma non allarmante. Non e' un guasto, e' un
 * vincolo con una data — e quando la data arriva il riquadro cambia da solo. */
.mon-promemoria {
  background-color: var(--bg-raised);
  /* Forma estesa: `border-left: 3px solid var(--x)` abbreviata non si
   * risolve ovunque, ed e' lo stesso inciampo di `background:`. */
  border-left-width: 3px; border-left-style: solid; border-left-color: var(--funding);
  border-radius: 4px; padding: 8px 11px; margin: 6px 0 10px;
  color: var(--text-secondary); line-height: 1.55;
}
.mon-promemoria strong { color: var(--text-primary); }
/* Il selettore di finestra: segmenti, come quello delle finestre in cima. */
.mon-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: 5px; overflow: hidden; }
.mon-seg button {
  background-color: transparent; color: var(--text-tertiary);
  border: 0; padding: 3px 9px; font-size: 11px; cursor: pointer;
  font-family: var(--sans);
}
.mon-seg button + button { border-left: 1px solid var(--border-subtle); }
.mon-seg button:hover { color: var(--text-primary); }
.mon-seg button[aria-pressed="true"] { background-color: var(--bg-raised); color: var(--text-primary); }

/* Le pastiglie della rete non sono tipi: si combinano con quelli, quindi vanno
 * distinte a vista o si legge la fila come un elenco solo. */
.chip-rete { border-style: dashed; }
.chip-rete.on { border-style: solid; }
/* Il «?» in mezzo a una fila di pastiglie: piu' piccolo di quello dei titoli,
 * perche' spiega un gruppo di filtri e non una sezione intera. */
.info-btn.info-inline { width: 18px; height: 18px; font-size: 10px; margin-right: 2px; }
/* La riga del wallet scelto nel report: si vede quale filtro e' attivo senza
 * doverlo cercare nelle intestazioni sotto. */
#rep-wallet tbody tr.clickable { cursor: pointer; }
#rep-wallet tbody tr.clickable:hover { background: var(--row-hover, rgba(127,127,127,0.06)); }
#rep-wallet tbody tr.selezionata { background: color-mix(in srgb, var(--whale) 12%, transparent); }

/* ---------- Le viste sul telefono ----------
 *
 * Una regola sola dietro tutto quello che segue: sul telefono l'unica cosa che
 * scorre in verticale e' la PAGINA, e l'unica cosa che scorre in orizzontale e'
 * la tabella dentro il suo pannello. Ogni altro scorrimento — un pannello alto
 * dentro una pagina alta, una barra di filtri piu' larga dello schermo — e' un
 * posto dove il pollice fa una cosa diversa da quella che ci si aspetta.
 *
 * Le tabelle restano tabelle e scorrono di lato, con la colonna del token
 * inchiodata a sinistra: undici colonne di numeri riscritte come schede
 * perderebbero l'unica cosa che le rende leggibili, cioe' che i valori stanno
 * incolonnati fra una riga e l'altra. */
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {

  /* Niente scorrimento dentro lo scorrimento. Su desktop il pannello principale
     tiene le intestazioni attaccate in alto entro un'altezza fissa; sul telefono
     quel riquadro alto quanto lo schermo dentro una pagina lunga significa che a
     seconda di dove poggia il dito si muove una cosa o l'altra. */
  .panel-lead .table-scroll { max-height: none; overflow-y: visible; }

  /* Le intestazioni qui NON restano appese in alto, ed e' una rinuncia
     dichiarata: sticky si misura sul contenitore che scorre, che resta
     .table-scroll — e un contenitore con overflow-x:auto non puo' avere
     overflow-y:visible, la specifica lo forza ad auto. O si tiene il riquadro
     alto quanto lo schermo dentro la pagina lunga (due scorrimenti sovrapposti,
     che sul telefono e' il difetto peggiore), o si perdono le testate quando si
     scende. Sul telefono si scende poco e si scorre di lato molto: vince la
     pagina che scorre normale. */

  .controlbar { padding: 10px 12px; gap: 10px 12px; }

  /* La pulsantiera della finestra deve stare in una riga da 390: cinque bottoni
     a 24H/7G/14G/30G/90G ci stanno solo togliendo il respiro laterale. */
  .seg { flex-wrap: wrap; }
  .seg button { padding: 6px 10px; }

  /* ---------- Campi e tendine ----------
   *
   * Il corpo a 16px non e' una scelta tipografica, e' l'unico modo di impedire
   * a Safari di INGRANDIRE la pagina quando si tocca un campo: sotto i 16px lo
   * zoom scatta da solo, la pagina resta ingrandita anche dopo, e da li' in poi
   * si naviga un sito largo il doppio dello schermo. Succedeva su «cerca
   * ticker» e su ogni tendina dei filtri.
   * L'altezza minima e' il bersaglio del dito: 26px erano quelli di un mouse. */
  .select, .sel, .search, .ent-controls input, .controlbar input,
  select, input[type="search"], input[type="text"] {
    font-size: 16px; min-height: 38px;
  }
  .seg button, .chip, .bell-filters button { min-height: 34px; }
  /* Anche la ricerca della barra dei filtri, che sul desktop e' piu' piccola
     del resto: sotto i 16px Safari ingrandisce la pagina al tocco e non la
     rimpicciolisce piu'. */
  .tablebar input[type="search"] { font-size: 16px; }

  /* Bersagli. Il punto interrogativo apre la spiegazione della tabella, ed e'
     l'unico modo di leggere sul telefono quello che sul desktop dice il
     passaggio del mouse: se e' un quadratino da 16px non lo prende nessuno. */
  .info-btn { width: 26px; height: 26px; flex: 0 0 26px; font-size: 13px; }
  .bell { width: 34px; height: 34px; }

  /* Le pastiglie dei filtri a pallini vanno a capo invece di uscire. */
  .bell-filters, .chips, .sources { flex-wrap: wrap; }

  /* Il feed degli eventi. Le colonne chiedevano 360px minimi: su un telefono da
     375, tolti i margini del pannello, ne restano 343 — la griglia non poteva
     rimpicciolire e sforava di due pixel, che bastano a far scorrere di lato
     l'intera pagina. Qui la colonna e' una e prende quello che c'e'.
     Via anche il tetto d'altezza: un feed che scorre dentro una pagina che
     scorre e' il solito scorrimento dentro lo scorrimento. */
  #events-section .bell-list { grid-template-columns: minmax(0, 1fr); }
  .bell-list { max-height: none; overflow-y: visible; }
  #events-section .bell-item { border-right: 0; }

  /* La finestra delle spiegazioni prende quasi tutto lo schermo: a 320px fissi
     dentro un telefono da 390 restava un francobollo di testo con i margini
     piu' larghi delle righe. */
  .modal { width: calc(100vw - 24px); max-width: none; max-height: 82dvh; }

  /* Il tooltip non arriva mai piu' largo dello schermo. Sul desktop e' 320 o
     560 secondo il contenuto; qui il piu' largo dei due uscirebbe da entrambi
     i lati insieme. */
  #tooltip { max-width: calc(100vw - 24px); }

  /* ---------- Piu' dati per schermata ----------
   *
   * Misurato prima: la prima riga di numeri cominciava a 491px su uno schermo
   * da 844, cioe' sotto la meta'. Sopra c'erano 159px di barra dei filtri, 105
   * di sotto-linguette a tre file e una riga alta 66. Non e' che mancasse
   * spazio: era speso in margini. Qui le stesse cose stanno in meno pixel,
   * senza togliere nessun numero dalla pagina. */
  tbody td { padding: 6px 8px; font-size: 12px; }
  thead th { padding: 7px 8px; font-size: 10px; }
  .section { margin-bottom: 16px; }
  .section-head { gap: 6px; margin-bottom: 8px; }
  .section-head h2 { font-size: 12px; }
  .panel-foot, .cov-note, .coverage { padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
  main { padding-top: 10px; }

  /* ---------- Il pannello che si apre sotto una riga ----------
   *
   * Era la cosa piu' rotta di tutte e non si vedeva dall'audit delle larghezze,
   * perche' tecnicamente stava dentro un contenitore che scorre: aprendo un
   * token, la scheda con i grafici veniva disegnata larga 1464px — quanto la
   * tabella — dentro uno schermo da 390. Per vedere un grafico bisognava
   * scorrere di lato a cercarlo, e il grafico stesso era rimpicciolito.
   *
   * `sticky` con `left: 0` incolla il contenuto al bordo sinistro dello schermo
   * mentre la tabella sotto scorre: la cella resta larga quanto la tabella (il
   * colspan non si tocca), ma quello che ci sta dentro sta sempre davanti agli
   * occhi, largo quanto il vetro. */
  tbody td[colspan] { padding-left: 0; padding-right: 0; }
  tbody td[colspan] > * {
    position: sticky; left: 0;
    width: calc(100vw - 2 * var(--pad-page) - 2px);
    box-sizing: border-box;
  }
  .chart-card { padding: 10px 10px 8px; }
  /* I comandi del grafico non stanno piu' in un angolo sopra il disegno: su
     questa larghezza ci finivano sopra. */
  .chart-seg { position: static; margin-bottom: 8px; }

  /* Il cassetto sta sopra la barra in basso, non sotto. */
  .drawer { z-index: 60; }
}

/* ---------- Il telefono coricato ----------
 *
 * Trecentonovanta pixel di altezza, meno la barra in cima, i filtri, il titolo
 * e la testata della tabella: restavano due righe di dati. Qui sparisce la
 * prosa — la riga che spiega la tabella e il piede delle fonti — e non un solo
 * numero: chi gira il telefono lo fa per vedere piu' colonne, e la spiegazione
 * la ritrova rigirandolo. */
@media (max-height: 520px) and (pointer: coarse) {
  .section-sub { display: none; }
  .page-foot { display: none; }
  main { padding-top: 6px; }
  .section-head { margin-bottom: 6px; }
}

/* ---------- Quello che dipende dalla LARGHEZZA e non dal telefono ----------
 *
 * Le regole qui sotto impilano i comandi uno per riga e portano le
 * sotto-linguette in fondo allo schermo. Valgono solo sotto i 768px di
 * larghezza, e non nella condizione del blocco sopra: un telefono coricato e'
 * largo 844 e alto 390, cioe' ha spazio di lato da vendere e niente in
 * verticale. Impilare li' i filtri lasciava UNA riga di tabella visibile, e una
 * barra fissa in fondo si sarebbe presa un ottavo dell'altezza per sempre. */
@media (max-width: 768px) {

  /* I filtri: uno per riga, larghi quanto lo schermo. Nella scheda Ticker sono
     cinque tendine in fila — a 390px le ultime due finivano tagliate dal bordo
     del pannello, e siccome il pannello non scorre erano irraggiungibili. */
  .ent-controls { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .ent-controls .search { min-width: 0; width: 100%; flex: 1 1 auto; }
  .ent-controls .chips { width: 100%; }
  .sel-group { width: 100%; gap: 8px; }
  .sel-group .sel-label { flex: none; min-width: 72px; }
  .sel-group .sel-wrap { flex: 1 1 auto; }
  .sel-group .sel { width: 100%; }

  /* Stessa cosa nella barra che scopa la vista Movimenti. */
  .controlbar .filter-group { width: 100%; }
  .controlbar .select-wrap, .controlbar .select { width: 100%; }
  .controlbar .filters { width: 100%; flex-wrap: wrap; }
  #pf-search { flex: 1 1 100%; min-width: 0; }

  /* ---------- Le pastiglie accanto al ticker, sul telefono ----------
   *
   * NEW, TOP WALLET (58%) e NO ALPHA spariscono sotto i 768px, chiesto da
   * Raffaele il 03/09/2026. Nella colonna Token, che sul telefono e' larga un
   * terzo di schermo, ognuna di queste va a capo e si porta dietro una riga
   * intera di altezza: tre pastiglie facevano una riga alta il triplo per dire
   * cose che non cambiano la decisione mentre si scorre.
   * Restano dove servono: la catena — senza la quale due token con lo stesso
   * ticker sono lo stesso token — e «fuori», che e' la ragione per cui quella
   * riga sta in tabella e senza la quale sembrerebbe un difetto.
   * Sul desktop non cambia niente: li' lo spazio c'e', e la pastiglia si legge
   * con la coda dell'occhio invece che aprendo il dettaglio. */
  #accum-table .pill.tiny.nuovo,
  #accum-table .pill.top-wallet,
  #accum-table .pill.tiny.muted { display: none; }

  /* ---------- La barra dei filtri di una tabella, sul telefono ----------
   *
   * Un controllo per riga, etichetta a sinistra incolonnata e segmento largo
   * quanto resta: le stesse proporzioni delle tendine della scheda Ticker qui
   * sopra, perche' sono la stessa cosa vista da un'altra tabella.
   * Prima questi sei controlli stavano appesi alla testata in un flex che non
   * andava a capo: a 390px non traboccavano — si stringevano, e diventavano sei
   * fessure di pochi pixel in cui non si leggeva niente e non si prendeva
   * niente col dito. E' il difetto che questa regola esiste per chiudere.
   * La ricerca prende la sua riga intera: e' l'unico campo da scrivere della
   * barra, e un campo stretto su un telefono si tocca male. */
  .tablebar { gap: 8px; padding: 8px; margin-bottom: 8px; }
  .tablebar .filter-group:not(.grow) { width: 100%; }
  .tablebar .filter-group .filter-label { flex: none; min-width: 60px; }
  .tablebar .filter-group .seg { flex: 1 1 auto; flex-wrap: nowrap; }
  .tablebar .filter-group .seg button { flex: 1 1 0; text-align: center; padding: 6px 4px; }
  .tablebar .filter-group.grow { flex: 1 1 100%; min-width: 0; }
  .tablebar .filter-group.end { margin-left: 0; }

  /* Una colonna sola: due grafici affiancati su 356px sono due francobolli. */
  .chart-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* ---------- Le sotto-linguette, in basso ----------
   *
   * Sono la barra che si tocca di piu' e stavano in cima, dove costavano 105px
   * di tre file prima del primo numero. In fondo allo schermo sono dove sta il
   * pollice, non si portano via niente alla pagina, e restano ferme mentre la
   * tabella scorre. Una fila sola che scorre di lato: sei voci a capo
   * sarebbero di nuovo tre file, solo in basso. */
  .subtabs {
    position: fixed; z-index: 50;
    left: 0; right: 0; bottom: 0;
    margin: 0; border-radius: 0;
    border: none; border-top: 1px solid var(--border-default);
    background: var(--bg-surface);
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    padding: 6px max(8px, env(safe-area-inset-left))
             calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    gap: 6px;
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { flex: none; padding: 9px 12px; font-size: 12px; }
  /* Lo spazio che la barra in basso occupa, e solo nelle viste che ce l'hanno:
     senza, l'ultima riga della tabella e il piede del pannello restano sotto la
     barra e non si leggono mai; messo sempre, le quattro viste senza
     sotto-linguette finirebbero con settantasei pixel di vuoto in fondo.
     La condizione e' «la vista visibile ha una barra di sotto-linguette»:
     l'attributo hidden sta sulla vista, non sulla barra. */
  main:has(> div:not([hidden]) > .subtabs) { padding-bottom: 76px; }
}

/* ---------- La tabella dei token di un wallet, e la sua tendina ----------

   Sostituisce la griglia di riquadri che stava sotto la riga di un wallet
   monitorato. Venti curve alte centotrenta pixel, tre per riga, erano venti
   grafici che nessuno guardava: troppo piccoli per leggerci un movimento e
   troppi per confrontarli fra loro. La domanda che ci si fa davanti a un desk
   e' prima di tutto «su cosa sta pesando», che si risponde con un elenco
   ordinato; il grafico serve dopo, su UNO solo, e allora deve essere grande.

   Densita' e allineamento vengono dalle tabelle token di Nansen — numeri a
   destra in tabellare, righe basse, nessun bordo fra le righe e solo il fondo
   che cambia. I colori no: restano quelli di qui. */

.token-table { width: 100%; border-collapse: collapse; }

.token-table thead th {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left; padding: 4px 10px 6px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.token-table thead th.num { text-align: right; }

.token-table th.sortable { cursor: pointer; user-select: none; }
.token-table th.sortable:hover { color: var(--text-secondary); }
/* La colonna su cui si sta ordinando. Sottolineata e non colorata: il colore
   qui dentro e' gia' preso dal segno del netto, e un terzo significato sullo
   stesso canale non si distingue piu'. */
.token-table th.sortable.attivo {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.token-row { cursor: pointer; }
.token-row > td {
  padding: 5px 10px; font-size: 12px; line-height: 18px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.token-row > td.num {
  text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.token-row:hover > td { background: var(--bg-inset); }
.token-row.aperta > td {
  background: var(--bg-inset);
  border-bottom-color: transparent;
}
.token-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

.token-row .tk-sym {
  font-family: var(--mono); font-weight: 500; color: var(--text-primary);
  margin-left: 8px;
}
.token-row.aperta .tk-sym { color: var(--accent); }

/* La tendina. Il fondo incassato la lega alla riga che l'ha aperta, e i lati
   restano a filo del riquadro perche' la curva dentro deve avere tutta la
   larghezza: e' l'unica ragione per cui questa tendina esiste invece di un
   riquadro in griglia. */
.token-open > td {
  padding: 0 0 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-default);
}

.pila-pannelli {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 0;
}
/* Niente spazio verticale fra un pannello e l'altro oltre ai due pixel qui
   sopra: i tre grafici condividono l'asse dei tempi, e allontanarli farebbe
   perdere proprio la lettura verticale — cosa faceva l'open interest MENTRE il
   prezzo era compresso — che e' la ragione per cui sono impilati. */
.pila-pannelli .pannello { min-width: 0; }
.pila-pannelli .pannello .box-label { margin-bottom: 2px; }
.pila-pannelli .chart-sub { margin-top: 6px; }

/* Le colonne di peso della tabella token. `% supply` riusa la stessa scala di
   calore della colonna «Quota» nella tabella dei token — stesse soglie (1, 5,
   15) e stesse classi: un secondo modo di colorare lo stesso numero
   costringerebbe a impararli tutti e due. */
.token-table td.quota-1, .token-table td.quota-2,
.token-table td.quota-3, .token-table td.quota-4 { font-variant-numeric: tabular-nums; }
.wallet-drill-head .chart-sub { margin: 0 0 0 auto; padding-right: 12px; }

/* La stazza accanto al nome: si legge insieme a lui, non in coda al link.
   Colore pieno e cifre tabellari — e' il numero che decide se aprire la riga. */
.wallet-worth {
  margin-left: 9px;
  padding: 1px 7px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-inset);
  color: var(--text-primary);
  font-size: 11.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}

/* Il motivo per cui il wallet e' in lista: un segno, non una riga di testo
   tagliata a meta' parola. Il testo intero sta nel title. */
.row-nota-segno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 7px;
  border: 1px solid var(--border-default); border-radius: 50%;
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-family: var(--mono); font-size: 9px; font-style: italic;
  vertical-align: 1px; cursor: help;
}
.row-nota-segno:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ---------- La pila dei grafici: barra, legenda, pannelli attaccati ----------

   I pannelli stanno appiccicati per una ragione precisa: la lettura che serve
   e' VERTICALE — cosa faceva l'open interest mentre il prezzo era li'. Ogni
   pixel di spazio fra un riquadro e l'altro e' un pixel in cui l'occhio perde
   l'allineamento, ed e' esattamente la cosa che i pannelli impilati esistono
   per mostrare. Niente bordi fra loro, niente margini: solo l'etichetta. */

.pila-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}
.pila-passi { display: flex; gap: 2px; flex: none; }
.pila-passi button {
  padding: 2px 8px; font-size: 10px; letter-spacing: 0.04em;
  font-family: var(--mono);
}
.pila-passi button.attivo {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* La legenda: una riga, tutti i pannelli alla stessa ora. */
.pila-legenda {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  min-height: 18px; font-size: 11px; line-height: 18px;
  margin-left: auto;
}
.pila-legenda .lg-ora { color: var(--text-secondary); }
.pila-legenda .lg-voce { display: inline-flex; gap: 5px; align-items: baseline; }
.pila-legenda .lg-k {
  color: var(--text-tertiary); text-transform: uppercase;
  font-size: 9px; letter-spacing: 0.06em;
}
.pila-legenda .lg-v { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.pila-grafici { display: flex; flex-direction: column; gap: 0; }
.pila-grafici .pannello + .pannello { margin-top: -4px; }
.pila-grafici .pannello .box-label { margin: 0 0 -2px 2px; opacity: 0.75; }
/* Il readout locale di ogni grafico non serve piu': lo dice la legenda. */
.pila-grafici .chart-readout,
.pila-grafici .chart-readout[hidden] { display: none !important; }
/* Serrati: la lettura e' verticale, ogni pixel in mezzo la indebolisce. */
.pila-grafici .pannello + .pannello { margin-top: -10px; }
.pila-grafici .chart { margin: 0; }
.pila-grafici .chart-svg { display: block; }

/* Il conteggio dei token accanto alla stazza: e' quello che distingue un
   patrimonio da un campione, quindi sta accanto al numero e non in un tooltip. */
.wallet-worth-n {
  margin-left: 5px;
  font-family: var(--mono); font-size: 10px;
  color: var(--text-tertiary);
  vertical-align: 1px;
}
/* Lettura al tetto: il numero e' un pavimento. Bordo tratteggiato — la stessa
   convenzione delle soglie sui grafici: un confine, non una misura. */
.wallet-worth.parziale { border-style: dashed; }
/* Non riletto da oltre un giorno. Spento, perche' un numero vecchio mostrato
   come fresco e' l'errore che ci e' costato un badge gonfiato cento volte. */
.wallet-worth.vecchio { color: var(--text-tertiary); border-color: var(--border-subtle); }
.wallet-worth.scartato {
  color: var(--short); border-color: var(--short);
  font-size: 10.5px; cursor: help;
}

/* Il riquadro dei valori che segue il puntatore.
   Appeso alla pila e non al documento: scorre con lei, e le coordinate restano
   quelle del contenitore invece di dover inseguire lo scroll della pagina. */
.pila-pannelli { position: relative; }
.pila-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 168px; padding: 7px 9px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-size: 11px; line-height: 16px;
}
.pila-tip[hidden] { display: none; }
.pila-tip .tip-ora {
  color: var(--text-tertiary); font-size: 10px;
  padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.pila-tip .tip-riga {
  display: flex; justify-content: space-between; gap: 14px; white-space: nowrap;
}
.pila-tip .tip-k {
  color: var(--text-tertiary); text-transform: uppercase;
  font-size: 9px; letter-spacing: 0.05em;
}
.pila-tip .tip-v { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------- La scheda Alert ---------- */

/* Le cifre in cima. Grandi, ma con il campione scritto sotto: un ROI mediano
   senza il numero di eventi accanto si legge come un rendimento, e con sei casi
   non lo e'. */
.alert-cifre {
  display: flex; flex-wrap: wrap; gap: 28px;
  padding: 14px 16px;
}
.alert-cifra { min-width: 128px; }
.alert-cifra .ac-k {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.alert-cifra .ac-v {
  font-size: 21px; line-height: 28px; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.alert-cifra .ac-n { font-size: 10px; color: var(--text-tertiary); }

/* L'avviso sul campione: bordo a sinistra, non un riquadro giallo da errore.
   Non e' un guasto, e' un limite di lettura — e va detto con la stessa calma
   con cui si dice un dato. */
.alert-avviso {
  margin: 0 16px 14px;
  padding: 8px 11px;
  border-left: 2px solid var(--funding, var(--border-strong));
  background: var(--bg-inset);
  font-size: 11px; line-height: 16px; color: var(--text-secondary);
}

/* Lo stadio: stessi due colori delle verticali sul grafico e delle palline su
   Telegram. Arancione lo scatto, rosso la conferma. */
.pill.alert-stadio { font-size: 9px; letter-spacing: 0.05em; }
.pill.alert-stadio.flash { color: #ff9f0a; border-color: #ff9f0a; }
.pill.alert-stadio.conf  { color: #ff3b30; border-color: #ff3b30; }

#alerts-table td { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
#alerts-table td.num { font-variant-numeric: tabular-nums; }

/* Trascinamento sull'asse dei tempi: il puntatore dice che si puo' afferrare.
   Niente selezione del testo mentre si scorre, o il browser evidenzia le
   etichette degli assi invece di muovere il grafico. */
.pila-grafici .chart-svg { user-select: none; -webkit-user-select: none; }

/* Righe con troppi pochi scatti perche' la mediana significhi qualcosa.
   Spente, non nascoste: il desk resta visibile e confrontabile a occhio, ma il
   suo numero non compete con quelli misurati su decine di eventi. */
#alerts-wallet-table tr.poco-misurato td { opacity: 0.55; }
#alerts-wallet-table td { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
#alerts-wallet-table td.num { font-variant-numeric: tabular-nums; }

/* Le quattro schede della stessa catena.
   Wallet monitorati -> chi si muove. Wallet report -> cosa ha reso quel
   movimento. Alert -> cosa e' scattato dopo. Report -> il riepilogo.
   Sono una storia sola letta in quattro momenti, e il colore lo dice prima che
   uno debba scoprirlo aprendole una per una. Solo il testo: un fondo colorato
   competerebbe con la linguetta selezionata, che deve restare l'unica cosa che
   grida. */
.subtab[data-famiglia="wallet"] { color: #7cc4ff; }
.subtab[data-famiglia="wallet"]:hover { color: #a8d8ff; }
.subtab[data-famiglia="wallet"][aria-selected="true"] { color: #cfe9ff; }

/* Il denominatore della quota di supply, quando non e' il circolante.
   Piccolo ma visibile senza passare il mouse: due righe con denominatori
   diversi nella stessa colonna non sono confrontabili, e chi legge deve
   accorgersene guardando, non indagando. */
.supply-tot {
  margin-left: 5px; padding: 0 4px;
  border: 1px solid var(--funding, #f0a020); border-radius: 3px;
  color: var(--funding, #f0a020);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  vertical-align: 1px; cursor: help;
}

/* ---------- Token in accumulo: entrare senza barra orizzontale ----------

   Quella tabella porta undici colonne, alcune con due o tre numeri incolonnati
   dentro la stessa cella (profondita', volume futures, correlazione). Con il
   passo generico sforava a destra e la colonna Correlazione — che e' quella per
   cui la tabella esiste — restava tagliata fuori, raggiungibile solo scorrendo.
   Una colonna che si vede solo se la si va a cercare non conta.

   Si stringe la spaziatura e si scende di mezzo punto sul corpo, non oltre: piu'
   giu' i numeri smettono di essere leggibili a colpo d'occhio, che e' il solo
   modo in cui questa tabella viene usata. */
#accum-table { min-width: 0; }
#accum-table tbody td { padding: 7px 8px; height: 34px; font-size: 11.5px; }
#accum-table thead th { padding-left: 8px; padding-right: 8px; font-size: 9.5px; }
/* Le celle a piu' righe: interlinea piu' stretta, cosi' l'altezza non cresce
   mentre la larghezza si riduce. */
#accum-table tbody td .sub,
#accum-table tbody td small { line-height: 14px; }

/* I link agli explorer nella riga del wallet: uno per catena su cui si e'
   mosso, non piu' un solo «BscScan» buono per tutte. In riga con una virgola
   visiva fra l'uno e l'altro, per non farne una colonna alta come le catene. */
.wallet-link a + a { margin-left: 8px; }
.wallet-link a { white-space: nowrap; }

/* ===================================================== correlazioni perps
 *
 * Le costellazioni: una carta per grappolo, dentro una griglia che si riempie
 * da sola. Larghezza minima 300px e non 260: sotto, un grappolo da diciotto
 * token comprime le bolle piu' piccole fino a far sparire il ticker, e una
 * bolla senza nome non e' un dato — e' una macchia.
 *
 * Nessun colore esadecimale qui dentro: le bolle prendono --long e --short dal
 * tema, e la forza sta nell'opacita' decisa dal JavaScript. */

.co-verdict { padding: 14px 16px 0; }

.co-verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.co-vcard {
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--bg-inset);
  padding: 10px 12px;
}
.co-vcard.co-si   { border-left-color: var(--long); }
.co-vcard.co-no   { border-left-color: var(--short); }
.co-vcard.co-nota { border-left-color: var(--border-strong); }
/* «Forse»: misurato, positivo, e sotto i due punti di t. Non e' verde perche'
   non e' un si', non e' rosso perche' non e' un no. Una scheda che ha solo due
   colori costringe a mentire su meta' dei risultati. `--funding` e' l'ambra del
   tema ed e' definita in tutti e tre: `--warn` non esiste, e una variabile che
   non esiste non fallisce, cade sul nero. */
.co-vcard.co-forse { border-left-color: var(--funding); }

.co-vtitle {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 5px;
}
.co-si   .co-vtitle { color: var(--long); }
.co-forse .co-vtitle { color: var(--funding); }
.co-no   .co-vtitle { color: var(--short); }
.co-nota .co-vtitle { color: var(--text-secondary); }

.co-vbody { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

.co-vfoot {
  font-size: 11px; color: var(--text-tertiary);
  padding: 10px 0 2px; line-height: 1.5;
}

.co-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
}

.co-cluster {
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  background: var(--bg-inset);
  padding: 10px 10px 8px;
  display: flex; flex-direction: column;
}

.co-cluster-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px;
}
.co-cluster-name {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  margin-right: 2px;
}
.co-cluster-var {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.co-up   { color: var(--long); }
.co-down { color: var(--short); }
.co-forte { color: var(--text-primary); font-weight: 500; }

.co-badge, .co-tag {
  font-size: 10px; letter-spacing: 0.03em;
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 3px; padding: 1px 5px;
  font-family: var(--mono); white-space: nowrap;
}
.co-tag { border-style: dashed; }

/* Il disegno. `height: auto` con l'aspetto tenuto dal viewBox: i grappoli hanno
   forme diverse — due token in fila, diciotto su tre anelli — e un'altezza
   fissa avrebbe lasciato mezza carta vuota a uno e schiacciato l'altro. */
.co-svg { width: 100%; height: auto; display: block; overflow: visible; }

.co-link { stroke: var(--border-strong); stroke-opacity: 0.5; }
.co-link-forte { stroke: var(--accent); stroke-opacity: 0.55; }

.co-bubble circle { cursor: default; transition: stroke-opacity 0.12s ease; }
.co-bubble:hover circle { stroke-opacity: 1; }

.co-lab {
  font-family: var(--mono); fill: var(--text-primary);
  text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--bg-inset); stroke-width: 2.5px;
  stroke-linejoin: round;
}
.co-lab-out { fill: var(--text-tertiary); }

.co-cluster-foot {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px; color: var(--text-tertiary);
  font-family: var(--mono);
}
.co-warn { color: var(--funding); }

/* Su telefono la griglia va a una colonna sola e le carte diventano larghe
   quanto lo schermo: e' l'unico modo perche' i ticker restino leggibili. */
@media (max-width: 560px) {
  .co-map { grid-template-columns: 1fr; padding: 12px; }
  .co-verdict { padding: 12px 12px 0; }
}

/* --- correlazioni: il ritardo, e le bolle a due righe ---------------------- */

/* Un grappolo da diciotto token e' largo 347px. In una colonna da 300 i ticker
   si riducono a tre pixel: prende due colonne. La soglia la decide il payload
   (`largo`), che e' l'unico posto che conosce la larghezza vera del disegno. */
.co-cluster.co-largo { grid-column: span 2; }
@media (max-width: 700px) { .co-cluster.co-largo { grid-column: span 1; } }

.co-val {
  font-family: var(--mono); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--bg-inset); stroke-width: 2.5px;
  stroke-linejoin: round;
}
.co-val.co-up   { fill: var(--long); }
.co-val.co-down { fill: var(--short); }
.co-val.co-flat { fill: var(--text-tertiary); }

.co-rit-verdict { padding: 14px 16px 0; }
.co-rit-verdict .co-vcard { border-left-width: 3px; }

/* La tabellina dei tre metri. Griglia e non <table>: sta dentro una carta, non
   e' ordinabile e non e' impaginata — farne una tabella vera vorrebbe dire
   ereditare tutto il vestito delle altre, che qui stona. */
.co-rit-tab {
  margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px;
  font-family: var(--mono); font-size: 11px;
}
.co-rit-riga {
  display: grid;
  grid-template-columns: 58px 44px 1fr 1fr 1fr 1fr 1.5fr 40px 50px;
  gap: 6px; padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.co-agg-riga {
  display: grid;
  grid-template-columns: 58px 1.2fr 1fr 1fr 1fr 42px 56px 60px;
  gap: 6px; padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.co-agg-riga > span { text-align: right; }
.co-agg-riga > span:first-child, .co-agg-riga > span:nth-child(2) { text-align: left; }
.co-rit-riga > span { text-align: right; }
.co-rit-riga > span:first-child { text-align: left; }
.co-rit-testa {
  color: var(--text-tertiary); font-size: 10px; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-subtle); padding-bottom: 5px;
}
@media (max-width: 560px) {
  .co-rit-riga { grid-template-columns: 48px 34px 1fr 1fr 1fr 1fr 1.5fr 32px 40px; font-size: 9px; }
  .co-agg-riga { grid-template-columns: 48px 1.1fr 1fr 1fr 1fr 34px 46px 48px; font-size: 9px; }
  .co-rit-verdict { padding: 12px 12px 0; }
}

#co-lag td.freeze { font-weight: 500; }

/* ------------------------------------------------------------- money flow
 *
 * La mappa della rotazione e' un piano cartesiano, non un grafico a barre: il
 * significato sta nei QUADRANTI, quindi il fondo e' un riquadro solo e le due
 * linee dello zero sono l'unica griglia. Aggiungere righe orizzontali farebbe
 * leggere l'altezza come una scala, che qui non vuol dire niente. */
.fl-marea {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; padding: 12px 14px 14px;
}
.fl-marea-c { display: flex; flex-direction: column; gap: 3px; }
.fl-marea-k {
  font-size: 10px; letter-spacing: 0.03em; color: var(--text-tertiary);
  text-transform: uppercase;
}
.fl-marea-v {
  font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.fl-map { padding: 8px 6px 0; }
.fl-svg { width: 100%; height: auto; display: block; }
.fl-quad {
  font-family: var(--mono); font-size: 10px; fill: var(--text-tertiary);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.fl-bolla {
  font-family: var(--mono); font-size: 9px; fill: var(--text-primary);
  pointer-events: none;
}
.fl-ax { font-family: var(--mono); font-size: 9.5px; fill: var(--viz-ink); }
.fl-ver-riga {
  display: grid;
  grid-template-columns: 62px 84px 1fr 1fr 1fr 1fr 1.8fr;
  gap: 6px; padding: 3px 0;
  font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fl-ver-riga > span { text-align: right; }
.fl-ver-riga > span:first-child { text-align: left; }
.fl-tipo { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 560px) {
  .fl-ver-riga { grid-template-columns: 46px 60px 1fr 1fr 1fr 1fr 1.6fr; font-size: 9px; }
  .fl-marea-v { font-size: 15px; }
}
.fl-lab {
  font-family: var(--mono); font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

/* Il popup di una bolla: chi c'e' dentro il gruppo.
   Cinque colonne strette dentro i 340px del tooltip largo. Le larghezze sono
   in `ch` e non in frazioni perche' le colonne sono numeri incolonnati: con
   `1fr` la colonna del market cap si allargava a seconda di quanto era lungo
   il ticker piu' lungo, e le cifre ballavano da una bolla all'altra. */
.tip-fl { min-width: 288px; }
.tip-fl-testa {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.tip-fl-nome { font-weight: 600; color: var(--text-primary); }
.tip-fl-tipo {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.tip-fl-riga { font-size: 11px; line-height: 15px; color: var(--text-secondary); }
.tip-fl-tab {
  margin-top: 7px; padding-top: 5px;
  border-top: 1px solid var(--border-default);
}
.tip-fl-r {
  display: grid;
  grid-template-columns: 1fr 6.5ch 7ch 7ch 7.5ch;
  gap: 0 7px; padding: 1px 0;
  font-family: var(--mono); font-size: 11px; line-height: 15px;
  font-variant-numeric: tabular-nums;
}
.tip-fl-r > span { text-align: right; }
.tip-fl-r > span:first-child { text-align: left; }
.tip-fl-h {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-tertiary); padding-bottom: 2px;
}
.tip-fl-sym { color: var(--text-primary); }
.tip-fl .tip-nota {
  margin-top: 6px; font-size: 10px; line-height: 14px; color: var(--text-tertiary);
}

/* La striscia dei pannelli caduti. Compare solo quando un render lancia: dice
   quali pannelli non ci sono invece di lasciarli vuoti, che si legge come
   «nessun dato» ed e' il modo in cui un guasto vive per settimane. */
.render-rotti {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 6px;
  font-size: 12px; line-height: 1.45;
  color: var(--short);
  background: color-mix(in srgb, var(--short) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--short) 34%, transparent);
}