/* ============================================================================
   LETSTRASH — UI v2 · "INSTRUMENT"
   ============================================================================
   Questo file si carica DOPO il <style> inline di index.html: vince per ordine
   di cascata a parita' di specificita'. Non tocca il markup ne' app.js, quindi
   si toglie in blocco cancellando una riga da index.html e si torna esatti
   alla v1.

   DIREZIONE — La v1 era un terminale di trading piatto (riferimento dichiarato:
   Coinbase Pro / Hyperliquid): giusta come disciplina dei dati, ma "piatto" e
   "niente ombre, niente glow" e' anche il motivo per cui non sembrava un
   prodotto costoso. La v2 non aggiunge decorazione: aggiunge MATERIALE.

   L'idea guida e' lo strumento di precisione — un oscilloscopio, un banco di
   misura: cornice metallica lavorata, vetro nero, riferimenti incisi agli
   angoli, numeri in mono. Futuristico senza essere cyberpunk, serio senza
   essere anonimo.

   Le tre mosse su cui si regge tutto:
   1. SUBSTRATO — il fondo non e' piu' un colore ma un materiale: due aloni
      cromatici lentissimi, griglia, vignettatura, grana. I pannelli sembrano
      appoggiati su qualcosa invece che disegnati sul nulla.
   2. BISELLO — ogni superficie prende luce sul bordo alto e proietta ombra.
      E' il dettaglio che il cervello legge come "oggetto" prima ancora del
      contenuto.
   3. RETICOLO — quattro trattini incisi agli angoli dei pannelli principali.
      E' la firma della v2, e viene dal mirino di uno strumento di misura, non
      da una libreria di componenti. Sta SOLO su hero, lista token, grafico e
      modale: se fosse ovunque non sarebbe una firma, sarebbe un motivo.

   Cosa NON e' cambiato di proposito: la densita' dei dati, il verde/rosso come
   semantica buy/sell, i numeri in tabular mono. Quelle scelte erano corrette.
   ========================================================================= */

/* ============================================================================
   1. TOKEN
   ========================================================================= */
:root{
  /* Raggi piu' generosi della v1 (6/10px): a 14px il pannello smette di
     sembrare un rettangolo e inizia a sembrare un componente. */
  --v2-r:12px;
  --v2-r-md:10px;
  --v2-r-sm:9px;

  /* Decelerazione forte. Le transizioni che "atterrano" invece di fermarsi
     sono meta' della sensazione di qualita'. */
  --v2-ease:cubic-bezier(.16,1,.3,1);
  --v2-ease-io:cubic-bezier(.62,.02,.34,1);

  /* Bordi come luce su uno spigolo, in rgba: valgono su ogni chain senza
     ridefinizione. */
  --v2-edge:rgba(255,255,255,.075);
  --v2-edge-hi:rgba(255,255,255,.15);
  --v2-tick:rgba(255,255,255,.20);

  /* Il vetro: chiaro in alto, trasparente sotto. Mai un gradiente colorato —
     quello e' il tell numero uno di una landing generata. */
  --v2-glass:linear-gradient(178deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 34%,rgba(255,255,255,0) 100%);
  --v2-glass-deep:linear-gradient(178deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.014) 26%,rgba(255,255,255,0) 100%);

  --v2-elev-1:inset 0 1px 0 var(--v2-edge),0 1px 2px rgba(0,0,0,.55);
  --v2-elev-2:inset 0 1px 0 var(--v2-edge),0 2px 6px rgba(0,0,0,.5),0 22px 44px -26px rgba(0,0,0,.95);
  --v2-elev-3:inset 0 1px 0 var(--v2-edge-hi),0 4px 10px rgba(0,0,0,.5),0 34px 64px -30px rgba(0,0,0,1);

  /* Alone d'accento: usato SOLO su CTA piena e spina della sidebar. */
  --v2-accent-glow:0 6px 22px -8px rgba(var(--green-rgb),.55);

  /* Campo ambientale. --v2-field-2 e' una seconda tinta FREDDA che non compare
     mai nell'interfaccia: vive solo nello sfondo. Serve a dare vita cromatica
     al nero senza toccare la semantica verde/rosso — un nero con due tinte
     dentro legge come profondita', un nero puro legge come vuoto. */
  --v2-field-1:var(--green-rgb);
  --v2-field-2:20,110,170;
  --v2-field-op:.24;

  /* Space Grotesk non si carica piu': il corpo del testo e' passato al font di
     sistema per allinearsi alla landing, e tenere un display diverso avrebbe
     rimesso due famiglie nella stessa schermata. Il carattere dei titoli lo
     fanno adesso peso e tracking, non un font a parte. */
  --font-display:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
:root[data-chain="arc"]{--v2-field-2:120,80,235;}
:root[data-chain="bsc"]{--v2-field-2:200,90,25;--v2-field-op:.13;}
/* Mancavano entrambe e ricadevano sui valori di Robinhood: --v2-field-1 e'
   var(--green-rgb), quindi su Solana il campo ambientale era viola pieno al
   24% — un alone viola dietro OGNI pagina, che si sommava ai pannelli gia'
   viola e faceva sembrare tinta l'intera interfaccia.
   Su Solana l'opacita' scende come su BSC: il viola e' un colore molto saturo
   e allo stesso valore delle altre chain rende il doppio. */
:root[data-chain="hyperevm"]{--v2-field-2:20,120,150;}
:root[data-chain="solana"]{--v2-field-2:40,110,190;--v2-field-op:.11;}
/* Sotto il marchio trash il campo ambientale non insegue piu' la chain:
   stessa tinta fredda e stessa opacita' su ogni rete. */
:root[data-brand="trash"]{--v2-field-2:20,110,170;--v2-field-op:.24;}

/* ============================================================================
   2. SUBSTRATO — il fondo come materiale
   ============================================================================
   Tre livelli sovrapposti, tutti pointer-events:none e sotto al contenuto:
     .v2-aurora  (z 0)    aloni che derivano lentissimi — iniettato da v2.js
     body::before(z 0)    griglia fine + vignettatura, statica
     body::after (z 9999) grana su tutto, contro il banding dei gradienti scuri
   Il canvas #starfield-bg preesistente resta e si somma: e' gia' una griglia
   con bagliore, qui diventa uno dei livelli invece che l'unico effetto.
   ========================================================================= */
html,body{background:var(--v2-bg-deep,#020304);}
/* IL FONDO ARRIVA DA chains.js, non da qui.
   applyChainTheme() scrive --chain-ground sulla radice con il groundColor
   della chain: e' lo STESSO valore che usano la landing (--bg) e la barra del
   browser (<meta name="theme-color">), quindi le tre superfici non possono
   piu' divergere. I letterali qui sotto restano come RIPIEGO per il primo
   paint, prima che chains.js giri: senza, si vedrebbe un lampo di nero
   neutro.
   Mancavano, prima: html/body leggono --v2-bg-deep, non --bg, quindi su
   HyperEVM e Solana il fondo della PAGINA restava il nero neutro di Robinhood
   mentre i pannelli sopra erano tinti. Il salto si vedeva ai bordi di ogni
   card. */
:root{--v2-bg-deep:var(--chain-ground,#020305);--v2-hero-glass:rgba(11,14,18,.86);}
:root[data-chain="arc"]{--v2-bg-deep:var(--chain-ground,#02040c);--v2-hero-glass:rgba(9,14,29,.86);}
:root[data-chain="bsc"]{--v2-bg-deep:var(--chain-ground,#030302);--v2-hero-glass:rgba(9,9,7,.88);}
:root[data-chain="hyperevm"]{--v2-bg-deep:var(--chain-ground,#020705);--v2-hero-glass:rgba(7,15,13,.87);}
:root[data-chain="solana"]{--v2-bg-deep:var(--chain-ground,#030206);--v2-hero-glass:rgba(9,7,14,.88);}
/* Sotto il marchio trash nessuna superficie cambia tinta con la chain: qui il
   ripiego e il vetro dell'hero tornano allo stesso valore per ogni rete,
   cosi' come --green diventa sempre ruggine. */
:root[data-brand="trash"]{--v2-bg-deep:var(--chain-ground,#020305);--v2-hero-glass:rgba(11,14,18,.86);}

.v2-aurora{
  position:fixed;inset:-20vmax;z-index:0;pointer-events:none;
  contain:layout paint style;overflow:hidden;
}
/* Niente filter:blur qui: su un cerchio di 60vmax un blur(90px) animato
   costringeva la GPU a rigenerare l'intera texture sfocata ad ogni frame —
   era il costo piu' alto della v2 su desktop. Stessa morbidezza, gratis,
   con piu' stop nel gradiente invece che con un filtro. */
.v2-aurora i{
  position:absolute;display:block;border-radius:50%;
  opacity:var(--v2-field-op);
  will-change:transform;
}
/* Alone d'accento: alto a sinistra, e' quello che tinge l'hero. */
.v2-aurora i:nth-child(1){
  width:58vmax;height:58vmax;left:-6vmax;top:-18vmax;
  background:radial-gradient(circle,
    rgba(var(--v2-field-1),.95) 0%,rgba(var(--v2-field-1),.5) 30%,
    rgba(var(--v2-field-1),.16) 56%,rgba(var(--v2-field-1),0) 80%);
  animation:v2Drift1 44s ease-in-out infinite alternate;
}
/* Alone freddo: basso a destra, chiude la diagonale e raffredda i mezzitoni. */
.v2-aurora i:nth-child(2){
  width:66vmax;height:66vmax;right:-14vmax;top:16vmax;
  background:radial-gradient(circle,
    rgba(var(--v2-field-2),.95) 0%,rgba(var(--v2-field-2),.45) 32%,
    rgba(var(--v2-field-2),.14) 58%,rgba(var(--v2-field-2),0) 82%);
  animation:v2Drift2 58s ease-in-out infinite alternate;
}
/* Solo traslazione, mai scale: il compositor sposta una texture gia' pronta
   invece di rigenerarla ad ogni frame. */
@keyframes v2Drift1{from{transform:translate3d(0,0,0);}to{transform:translate3d(7vmax,5vmax,0);}}
@keyframes v2Drift2{from{transform:translate3d(0,0,0);}to{transform:translate3d(-8vmax,-4vmax,0);}}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    /* griglia fine, appena percepibile — e' il foglio su cui si disegnano i
       grafici, quindi parla della stessa cosa di cui parla il prodotto */
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px) 0 0/64px 64px,
    /* vignettatura larga: concentra al centro senza che si veda */
    radial-gradient(130% 90% at 50% -8%,rgba(var(--green-rgb),.05),transparent 58%),
    radial-gradient(120% 100% at 50% 108%,rgba(0,0,0,.72),transparent 62%);
  mask-image:radial-gradient(140% 110% at 50% 0%,#000 32%,transparent 88%);
  -webkit-mask-image:radial-gradient(140% 110% at 50% 0%,#000 32%,transparent 88%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  /* mix-blend-mode qui obbligava il browser a ricomporre questo layer con
     tutto cio' che scorre sotto ad ogni frame — la seconda voce del costo
     "poco fluido" su desktop. Su un fondo quasi nero la differenza visiva e'
     minima, il costo continuo invece sparisce del tutto. */
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#starfield-bg{opacity:.55;}

/* ============================================================================
   3. TIPOGRAFIA
   ============================================================================
   Tensione fra tre registri, non uno:
     display  Space Grotesk, tracking NEGATIVO forte alle grandi dimensioni
     body     Inter, invariato — era gia' la scelta giusta
     dati     JetBrains Mono, tracking POSITIVO largo sulle micro-label
   Il contrasto fra un titolo serratissimo e label mono molto spaziate e' cio'
   che fa "respirare" la pagina in verticale. Nella v1 stavano quasi sulla
   stessa scala, quindi tutto sembrava allo stesso livello di importanza.
   ========================================================================= */
.hero h1,.wrap h1,.section-title,.modal h2,.feature-card h4,.how-step h4,
.pf-name,.docs-head h1,.tm-col-title,.st-head-main,.token-head .tk-name{
  font-family:var(--font-display);
  font-feature-settings:"ss01","tnum";
}
.hero h1{
  font-size:clamp(24px,1.9vw,31px);
  line-height:1.16;
  letter-spacing:-.027em;
  font-weight:600;
  margin-bottom:10px;
  max-width:26ch;
  /* Sfumatura verticale sul testo: dal bianco pieno al grigio chiaro. Da' al
     titolo lo stesso comportamento delle superfici (piu' luce in alto) invece
     di lasciarlo piatto. Nessun colore, quindi non sembra un titolo "arcobaleno". */
  background:linear-gradient(178deg,#fff 8%,#b9c2cd 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1 .accent{
  -webkit-text-fill-color:var(--green);
  background:none;
}
.wrap h1{font-size:23px;letter-spacing:-.025em;font-weight:600;}
.section-title{font-size:14px;letter-spacing:-.01em;font-weight:600;}
.modal h2{letter-spacing:-.018em;font-size:18px;}

/* Micro-label: tutto cio' che e' un'etichetta di un dato diventa mono largo.
   E' il segnale che quel testo NON e' contenuto, e' strumentazione. */
.side-label,.hero-stat .l,.token-mcap-l,.tok-head,.tr-lbl,.pf-stat-k,
.docs-head .eyebrow,.stat-label,.token-ca-l,.card h3{
  font-family:var(--font-mono);
  letter-spacing:.17em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:500;
}
.hero .eyebrow{
  font-family:var(--font-mono);letter-spacing:.2em;font-size:11px;font-weight:500;
}

/* ============================================================================
   4. RETICOLO — la firma
   ============================================================================
   Quattro angoli incisi, disegnati come 8 livelli di background invece che con
   pseudo-elementi: cosi' funziona anche sui pannelli generati da app.js e non
   entra in conflitto con nessun ::before/::after esistente.
   L'ultimo livello e' il vetro, quindi sta sotto a tutti gli altri.
   ========================================================================= */
.v2-reticle{
  background-image:
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    linear-gradient(var(--v2-tick),var(--v2-tick)),linear-gradient(var(--v2-tick),var(--v2-tick)),
    var(--v2-glass);
  background-repeat:no-repeat;
  background-size:
    10px 1px,1px 10px, 10px 1px,1px 10px,
    10px 1px,1px 10px, 10px 1px,1px 10px,
    auto;
  background-position:
    left 11px top 11px,left 11px top 11px,
    right 11px top 11px,right 11px top 11px,
    left 11px bottom 11px,left 11px bottom 11px,
    right 11px bottom 11px,right 11px bottom 11px,
    0 0;
  transition:background-color .25s var(--v2-ease);
}

/* ============================================================================
   5. SUPERFICI
   ========================================================================= */
.hero,.token-card,.panel,.card,.tok-panel,.chart-card,.feature-card,.how-step,
.pf-stat,.pf-panel,.trend-card,.tk-stat,.modal,.dex-embed-card,.saved-card,
.pf-summary-card,.pf-stock-card,.tm-col,.docs-sec,.stock-hero{
  border-color:var(--v2-edge);
}
.hero,.card,.tok-panel,.chart-card,.pf-panel,.modal,.dex-embed-card,
.pf-summary-card,.tm-col,.docs-sec{
  border-radius:var(--v2-r);
}
.token-card,.feature-card,.how-step,.pf-stat,.saved-card,.pf-stock-card,
.trending-row,.stock-hero,.trade-tab-row,.tk-stats{
  border-radius:var(--v2-r-md);
}

.card,.pf-panel,.feature-card,.how-step,.pf-stat,.pf-summary-card,
.pf-stock-card,.saved-card,.tm-col,.docs-sec,.dex-embed-card{
  background-image:var(--v2-glass);
  box-shadow:var(--v2-elev-1);
}
.tok-panel,.chart-card{box-shadow:var(--v2-elev-2);}
.hero{box-shadow:var(--v2-elev-3);}   /* .market-bar e' piatta: vedi piu' sotto */

/* ============================================================================
   6. SIDEBAR — rail con spina illuminata
   ============================================================================
   Il bordo destro non e' piu' una linea grigia ma un gradiente che si accende
   verso l'alto nel colore della chain: e' la prima cosa che si vede ed e' gia'
   un'informazione (su quale rete sei).
   ========================================================================= */
.app{padding-left:236px;}
.sidebar{
  width:236px;
  border-right:0;
  padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px));
  /* --bg-1 e' un colore pieno: dietro un fondo opaco un backdrop-filter non
     sfoca niente che si veda, costava GPU per zero risultato. Rimosso. */
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 26%),var(--bg-1);
}
.sidebar{
  /* La linea di destra e' un gradiente, non un colore: si accende in alto nel
     colore della chain e si spegne scendendo. E' border-image e non un
     ::after perche' la sidebar scorre, e un pseudo-elemento assoluto dentro un
     contenitore che scorre si sposta col contenuto invece di restare fermo. */
  border-right:1px solid transparent;
  border-image:linear-gradient(180deg,
    rgba(var(--green-rgb),.55) 0%,
    var(--v2-edge) 24%,
    var(--v2-edge) 100%) 1;
}
.logo{
  font-family:var(--font-display);
  font-size:17px;letter-spacing:-.032em;font-weight:700;
  padding:6px 8px 18px;
}
.logo-mark{width:25px;height:25px;margin-right:9px;}
.side-label{padding:15px 10px 6px;color:var(--text-mute);}

.side-link{
  border-radius:var(--v2-r-sm);
  padding:8px 10px;
  font-size:13px;
  transition:background .22s var(--v2-ease),color .22s var(--v2-ease),
             transform .22s var(--v2-ease);
}
.side-link:hover{transform:translateX(2px);}
.side-link.active{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.13),rgba(var(--green-rgb),.02));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.18);
}
.side-link.active::before{
  left:-14px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  box-shadow:0 0 14px 1px rgba(var(--green-rgb),.8);
}
.side-chain{border-radius:var(--v2-r-sm);}
.side-stats{border-top:1px solid var(--v2-edge);}
.side-stats tr{border-bottom:1px solid rgba(255,255,255,.045);}

/* CTA della sidebar: l'unico bottone del sito con un alone. Se ce l'hanno
   tutti non e' piu' una gerarchia, e' un effetto. */
.side-cta{
  border-radius:var(--v2-r-sm);
  padding:11px;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.008em;font-size:13px;
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--v2-accent-glow);
  transition:transform .2s var(--v2-ease),box-shadow .2s var(--v2-ease),filter .2s var(--v2-ease);
}
.side-cta:hover{
  transform:translateY(-1.5px);
  filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -8px rgba(var(--green-rgb),.75);
}
.side-cta:active{transform:translateY(0);}
.side-cta.stock{
  background:transparent;color:var(--text);
  border:1px solid var(--v2-edge-hi);
  box-shadow:var(--v2-elev-1);
}
.side-cta.stock:hover{background:rgba(255,255,255,.05);box-shadow:var(--v2-elev-2);}
.side-foot{border-top:1px solid var(--v2-edge);margin-top:12px;padding-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;}

/* ============================================================================
   7. TOPBAR — vetro
   ========================================================================= */
.topbar{
  padding:11px 22px;
  border-bottom:1px solid var(--v2-edge);
  background:linear-gradient(180deg,rgba(10,13,17,.86),rgba(10,13,17,.62));
  /* Sticky sopra una lista che scorre di continuo: blur(20px)+saturate
     ricalcolati ad ogni frame di scroll erano il costo piu' pesante della
     v2. Il fondo e' gia' quasi opaco, un raggio piu' piccolo senza saturate
     si vede appena meno e costa una frazione. */
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.search input{
  border-radius:999px;
  padding:9px 14px 9px 34px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--v2-edge);
  transition:border-color .22s var(--v2-ease),background .22s var(--v2-ease),box-shadow .22s var(--v2-ease);
}
.search input:focus{
  border-color:rgba(var(--green-rgb),.45);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
  outline:none;
}
.btn-connect{
  border-radius:999px;padding:9px 16px;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.5);
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease);
}
.btn-connect:hover{transform:translateY(-1px);}
.btn-connect:active{transform:translateY(0);}
.chain-trigger,.chain-switch{border-radius:999px;border-color:var(--v2-edge);}
.chain-menu{border-radius:var(--v2-r-md);border-color:var(--v2-edge-hi);box-shadow:var(--v2-elev-3);}

/* ============================================================================
   8. HERO — la tesi, disegnata
   ============================================================================
   Sopra i 1080px diventa una griglia: a sinistra il testo, a destra il grafico
   della curva dentro il suo bisello. Nella v1 la curva era in posizione
   assoluta dietro al testo e sotto i 1100px spariva del tutto — quindi su
   quasi tutti i portatili l'elemento che spiega il prodotto non c'era.
   ========================================================================= */
/* L'hero e' l'UNICO pannello traslucido del sito. Gli aloni del substrato lo
   attraversano appena, quindi la sua tinta cambia lentamente da sola: e' la
   differenza fra un riquadro disegnato sopra uno sfondo e un vetro appoggiato
   su qualcosa. Sugli altri pannelli sarebbe un problema — dietro una colonna
   di numeri un fondo che respira si legge come sfarfallio. */
.hero,.market-bar{
  padding:24px 26px;
  margin-bottom:24px;
  background-color:var(--v2-hero-glass);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
  overflow:hidden;
}
/* Filo d'accento sul bordo alto: sfuma ai lati, quindi non e' una barra ma un
   riflesso. */
.hero::before,.market-bar::before{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--green-rgb),.85),transparent);
  pointer-events:none;z-index:1;
}
/* Alone d'accento dietro il pannello: da' profondita' senza colorare il
   testo, unico elemento che aveva un vero "glow" era il CTA — ora l'hero
   nel suo insieme legge come lo strumento acceso, non solo il bottone. */
.hero::after,.market-bar::after{
  content:"";position:absolute;left:50%;top:-40%;width:70%;height:140%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(var(--green-rgb),.16),transparent 70%);
  filter:blur(2px);
}
.hero .eyebrow{margin-bottom:12px;color:var(--green);}

/* La barra di mercato riusa il vetro dell'hero. I suoi due strati (filo
   d'accento in alto, alone al centro) sono in position:absolute, quindi il
   contenuto va portato sopra o l'alone gli passa davanti. */
.market-bar{padding:18px 22px;}
.market-bar > *{position:relative;z-index:2;}
.market-bar .mb-top{border-bottom-color:rgba(var(--green-rgb),.18);}
.market-bar .ms-item dd{letter-spacing:-0.01em;}
.hero p{font-size:13px;line-height:1.6;max-width:58ch;color:var(--text-dim);}
.hero p.hero-sub{
  font-size:13px;line-height:1.6;font-weight:500;color:var(--text-dim);
  max-width:60ch;margin-top:12px;padding:0 0 0 13px;
  border-left:2px solid rgba(var(--green-rgb),.45);
  background:none;border-radius:0;
}
.hero-sub .check{color:var(--green);}
.hero-logo{width:44px;height:44px;}

@media (min-width:1080px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,380px);
    grid-template-areas:
      "copy curve"
      "proof curve"
      "verify curve";
    row-gap:0;column-gap:32px;
    align-items:start;
  }
  .hero-copy{grid-area:copy;}
  .hero-verified{grid-area:verify;}
  .hero-proof{grid-area:proof;}
  .v2-readout{grid-area:curve;align-self:center;justify-self:stretch;}
}
/* ---- AZIONE ----
   Un primario pieno e un secondario in cornice. Due, non tre: la terza voce e'
   sempre quella che nessuno clicca e che toglie peso alle altre due. */
.v2-cta-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px;}
/* Su desktop la sidebar (sempre visibile) ha gia' "+ Launch your token", e la
   lista e' a un breve scroll: qui sarebbero un secondo invito ridondante.
   Restano solo dove la sidebar e' un cassetto chiuso. */
@media (min-width:901px){.v2-cta-row{display:none;}}
.v2-cta{
  padding:11px 20px;border-radius:var(--v2-r-sm);border:1px solid transparent;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-.008em;
  background:linear-gradient(180deg,var(--green-hi),var(--green));color:var(--on-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--v2-accent-glow);
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease),
             box-shadow .18s var(--v2-ease),background .18s var(--v2-ease);
}
.v2-cta:hover{
  transform:translateY(-1.5px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 12px 32px -10px rgba(var(--green-rgb),.8);
}
.v2-cta:active{transform:translateY(0);}
.v2-cta.ghost{
  background:rgba(255,255,255,.035);color:var(--text);
  border-color:var(--v2-edge-hi);box-shadow:var(--v2-elev-1);
}
.v2-cta.ghost:hover{background:rgba(255,255,255,.07);box-shadow:var(--v2-elev-2);}
@media (max-width:640px){.v2-cta{flex:1;padding:11px 14px;}}

/* ---- CURVA ----
   Il grafico vettoriale della bonding curve, cornice dello strumento
   costruita da v2.js intorno a .hero-curve al caricamento. */
.v2-readout{
  border-radius:var(--v2-r-md);border:1px solid var(--v2-edge);
  background:rgba(255,255,255,.018);box-shadow:var(--v2-elev-1);
  padding:10px 12px 6px;min-width:0;
}
.v2-readout-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.v2-readout-title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-mute);
}
.v2-readout-key{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);opacity:.85;
}
.v2-readout-key i{width:7px;height:7px;border-radius:2px;background:rgba(var(--green-rgb),.4);border:1px solid var(--green);display:block;}
.hero-curve{width:100%;height:auto;display:block;}
@media (max-width:1079px){.v2-readout{display:none;}}

.hero-verified{
  font-size:11.5px;line-height:1.5;color:var(--text-mute);
  margin-top:16px;padding-top:13px;
  border-top:1px solid var(--v2-edge);
  max-width:none;
}
.hero-verified strong{color:var(--text-dim);font-weight:500;}

/* Striscia dati: un readout, non una tabella.
   La v1 la incorniciava con bordo, sfondo e raggio — quattro celle in una
   scatola. Qui la scatola sparisce: resta una sola linea sopra e separatori
   sottilissimi che sfumano alle estremita'. I numeri diventano l'oggetto, non
   il contenitore. */
.hero-proof{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:22px 0 0;padding-top:18px;
  border:0;border-top:1px solid var(--v2-edge);
  border-radius:0;background:transparent;overflow:visible;
  gap:0;
}
#view-stocks .hero-proof{margin:22px 0 0;}
.hp-item{padding:0 18px;position:relative;border-right:0;}
.hp-item:first-child{padding-left:0;}
.hp-item + .hp-item::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,var(--v2-edge) 30%,var(--v2-edge) 70%,transparent);
}
.hp-item dt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:6px;
}
.hp-item dd{
  font-family:var(--font-mono);font-size:19px;
  font-weight:600;letter-spacing:-.015em;color:var(--text);line-height:1.1;
}
.hp-item.accent dd{
  color:var(--green);
  text-shadow:0 0 26px rgba(var(--green-rgb),.4);
}
@media (max-width:720px){
  .hero-proof{grid-template-columns:1fr 1fr;row-gap:18px;}
  .hp-item{padding:0 0 0 18px;border-bottom:0;border-right:0;}
  .hp-item:nth-child(2n+1){padding-left:0;}
  .hp-item:nth-child(2n+1)::before{display:none;}
}

/* ============================================================================
   9. INTESTAZIONI DI SEZIONE
   ============================================================================
   Il titolo ha un trattino d'accento e la linea prosegue fino a fine riga: la
   sezione si legge come una tacca su una scala graduata.
   ========================================================================= */
.section-head{
  margin-bottom:14px;padding-bottom:11px;
  border-bottom:1px solid var(--v2-edge);
  position:relative;
}

/* Quante persone ci sono, in testa alla chat. Sta a destra del titolo, sulla
   stessa riga: e' un contorno del titolo, non un dato a se'. Il pallino
   pulsa come quello di "Live" altrove nel sito, cosi' si legge subito come
   "adesso" e non come un totale storico. */
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.gc-live{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-family:var(--font-mono);font-size:12px;color:var(--text-mute);
  letter-spacing:.03em;
}
.gc-live b{color:var(--text);font-weight:600;}
.gc-live .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:livePulse 1.7s ease-in-out infinite;
}
.section-title::before{
  width:3px;height:15px;border-radius:2px;
  background:var(--green);
  box-shadow:0 0 12px rgba(var(--green-rgb),.75);
}
/* La tacca d'accento sotto il titolo esiste solo dove un titolo c'e': la
   riga dei filtri usa la stessa classe .section-head ma non e' una sezione,
   e li' la tacca sembrerebbe la sottolineatura di un tab attivo. */
.section-head:has(.section-title)::after{
  content:"";position:absolute;left:0;bottom:-1px;width:58px;height:1px;
  background:var(--green);
  box-shadow:0 0 10px rgba(var(--green-rgb),.6);
}

.feed-tab,.chip,.pf-tab,.tm-tab,.docs-tab,.chart-tf,.chart-type{
  border-radius:999px;
  border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.feed-tab:hover,.chip:hover,.pf-tab:hover{
  border-color:var(--v2-edge-hi);
  background:rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.feed-tab.active,.chip.active,.pf-tab.active,.tm-tab.active,
.chart-tf.active,.chart-type.active{
  background:rgba(var(--green-rgb),.12);
  border-color:rgba(var(--green-rgb),.42);
  color:var(--text);
}
/* NIENTE ALONE FUORI DAL BORDO.
   C'erano due bagliori: uno da 18px attorno alla pillola attiva e uno da 8px
   sulla sua barretta. Su fondo scuro il colore usciva dal contorno e sfumava
   sul nero attorno, e a schermo si legge come una macchia che sborda, non
   come una selezione. La pillola e' gia' distinta: ha il fondo tinto, il
   contorno acceso e il testo nel colore dell'accento. */

/* ============================================================================
   10. LISTA TOKEN — il cuore della home
   ========================================================================= */
.tok-panel{background-color:var(--panel);}
.tok-head{
  background:rgba(255,255,255,.022);
  border-bottom:1px solid var(--v2-edge);
  padding:11px 16px;
  color:var(--text-mute);
}
.tok-row{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:transparent;
  transition:background .22s var(--v2-ease),box-shadow .22s var(--v2-ease);
  position:relative;
}
/* Barra d'accento che entra da sinistra al passaggio: sostituisce il cambio di
   sfondo come segnale di "questa e' la riga sotto il puntatore". Costa una
   trasformazione, non un repaint. */
.tok-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);
  transform:scaleY(0);transform-origin:center;
  transition:transform .28s var(--v2-ease);
  box-shadow:0 0 12px rgba(var(--green-rgb),.7);
}
.tok-row:hover{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.055),rgba(255,255,255,.018) 40%,transparent);
}
.tok-row:hover::before{transform:scaleY(1);}
.tr-img{
  /* Niente alone scuro esterno: su un cerchio da 40px `0 3px 10px rgba(0,0,0,.55)`
     si legge come un bordo nero invece che come profondita'. Resta il filo
     interno chiaro, definito una volta sola in index.html. */
  transition:transform .28s var(--v2-ease),box-shadow .28s var(--v2-ease);
}
.tok-row:hover .tr-img{
  transform:scale(1.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(var(--green-rgb),.35);
}
.tr-n1{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.tr-num{font-size:13.5px;font-weight:500;}
.tr-bar{height:5px;background:rgba(255,255,255,.07);}
.tr-bar-fill{
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 10px rgba(var(--green-rgb),.65);
  transition:width .6s var(--v2-ease);
}
.tok-tag{border-color:var(--v2-edge-hi);}

/* ============================================================================
   11. TRENDING
   ========================================================================= */
.trending-row{background:var(--v2-edge);border-color:var(--v2-edge);overflow:hidden;}
.trend-card{
  background:var(--panel);
  background-image:var(--v2-glass);
  transition:background .24s var(--v2-ease),transform .24s var(--v2-ease);
}
.trend-card:hover{transform:translateY(-2px);background-color:var(--panel-2);}
.trend-rank{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--text-mute);letter-spacing:.06em;
  top:10px;right:12px;
}
.trend-card:hover .trend-rank{color:rgba(var(--green-rgb),.9);}
/* .trend-img eredita tutto dalla regola comune degli avatar: qui non serve
   piu' niente. Era proprio la coppia border-color + alone scuro a farla
   sembrare diversa da quella della lista. */

/* ============================================================================
   12. SCHEDE TOKEN (anteprima creazione, watchlist)
   ========================================================================= */
.token-card{
  background-color:var(--panel);
  background-image:var(--v2-glass);
  box-shadow:var(--v2-elev-1);
  transition:transform .26s var(--v2-ease),box-shadow .26s var(--v2-ease),
             border-color .26s var(--v2-ease);
}
.token-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--green-rgb),.3);
  box-shadow:var(--v2-elev-2),0 0 30px -14px rgba(var(--green-rgb),.6);
}
.token-img{
  border-color:var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.5);
}
.token-badge{border-radius:999px;padding:3px 9px;letter-spacing:.04em;}
.token-badge.live{
  box-shadow:0 0 16px -4px rgba(var(--green-rgb),.75);
}
.token-progress-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);}
.token-progress-fill{
  border-radius:999px;
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 10px rgba(var(--green-rgb),.6);
}

/* ============================================================================
   13. PAGINA TOKEN — grafico, statistiche, pannello scambi
   ========================================================================= */
/* Lo spazio in fondo era 100px, e sommato ai 24px di margine del footer
   lasciava un buco nero di oltre 120px fra l'ultima card e il piede pagina —
   su un telefono e' quasi mezza schermata di niente. Nessun elemento fisso lo
   giustifica: l'unica cosa ancorata in basso e' l'avviso del wallet, che
   compare per pochi secondi e galleggia sopra al contenuto. */
.token-container{padding:24px 20px 40px;gap:16px;}
.tk-stats{background:var(--v2-edge);overflow:hidden;}
.tk-stat{
  background:var(--panel);
  background-image:var(--v2-glass);
  padding:13px 14px;
  transition:background-color .22s var(--v2-ease);
}
.tk-stat:hover{background-color:var(--panel-2);}
.tk-stat .v{font-size:15px;letter-spacing:-.012em;font-family:var(--font-mono);}
.tk-stat-subbar{height:4px;border-radius:999px;background:rgba(255,255,255,.07);}
.tk-stat-subbar-fill{
  background:linear-gradient(90deg,var(--green-dim),var(--green));
  box-shadow:0 0 8px rgba(var(--green-rgb),.6);
}
.chart-card{background-color:var(--panel);}

.trade-tab-row{
  background:rgba(0,0,0,.35);
  border-color:var(--v2-edge);
  padding:5px;
}
.trade-tab{border-radius:var(--v2-r-sm);font-family:var(--font-display);letter-spacing:-.005em;}
.trade-tab.trade-tab-active-buy{
  background:linear-gradient(180deg,rgba(var(--buy-rgb),.2),rgba(var(--buy-rgb),.08));
  box-shadow:inset 0 0 0 1px rgba(var(--buy-rgb),.35),0 2px 10px -3px rgba(var(--buy-rgb),.5);
}
.trade-tab.trade-tab-active-sell{
  background:linear-gradient(180deg,rgba(var(--sell-rgb),.2),rgba(var(--sell-rgb),.08));
  box-shadow:inset 0 0 0 1px rgba(var(--sell-rgb),.35),0 2px 10px -3px rgba(var(--sell-rgb),.5);
}

.btn-main,.btn-launch,.btn-enter,.pf-btn-primary{
  border-radius:var(--v2-r-sm);
  font-family:var(--font-display);font-weight:600;letter-spacing:-.008em;
  transition:transform .18s var(--v2-ease),filter .18s var(--v2-ease),
             box-shadow .18s var(--v2-ease);
}
/* .btn-buy e' stato TOLTO da questo gruppo: "Launch"/"Enter" sono identita'
   della chain e devono restare sull'accento (oro su BNB, blu su Arc), mentre
   il bottone di acquisto deve essere verde su qualunque rete. Raggruppati,
   su BNB il bottone "Buy" usciva giallo. */
.btn-launch,.btn-enter,.pf-btn-primary{
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--v2-accent-glow);
}
.btn-launch:hover:not(:disabled),
.btn-enter:hover:not(:disabled),.pf-btn-primary:hover{
  transform:translateY(-1.5px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 12px 32px -10px rgba(var(--green-rgb),.8);
}
/* Pieno PIATTO, non un gradiente: il verde e il rosso devono essere
   esattamente quelli dei badge BUY/SELL della tabella trade. Col gradiente
   180deg il bordo alto del bottone partiva da --buy-hi e, accostato a un
   badge --buy, si leggeva come un altro colore. Resta solo il filo di luce
   interno, che non altera la tinta. */
.btn-buy{
  background:var(--buy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 6px 22px -8px rgba(var(--buy-rgb),.55);
}
.btn-buy:hover:not(:disabled){
  transform:translateY(-1.5px);background:var(--buy-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 12px 32px -10px rgba(var(--buy-rgb),.8);
}
.btn-buy:active:not(:disabled),.btn-launch:active:not(:disabled){transform:translateY(0);}
.btn-sell{
  background:var(--sell);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 6px 22px -8px rgba(var(--sell-rgb),.55);
}
.btn-sell:hover:not(:disabled){
  transform:translateY(-1.5px);background:var(--sell-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 32px -10px rgba(var(--sell-rgb),.8);
}
/* Il disabilitato non deve ereditare ne' alone ne' sollevamento dei pieni. */
.btn-main:disabled{transform:none !important;box-shadow:inset 0 0 0 1px var(--border-2) !important;}
.btn-secondary,.qa-btn,.pf-btn,.upload-btn,.page-btn,.page-num{
  border-radius:var(--v2-r-sm);border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.btn-secondary:hover:not(:disabled),.qa-btn:hover,.pf-btn:hover{
  border-color:var(--v2-edge-hi);background:rgba(255,255,255,.06);transform:translateY(-1px);
}
.page-btn,.page-num{border-radius:999px;}
.page-num.active{
  background:rgba(var(--green-rgb),.14);
  border-color:rgba(var(--green-rgb),.45);
  color:var(--text);
  box-shadow:0 0 18px -6px rgba(var(--green-rgb),.7);
}

/* ============================================================================
   14. FORM
   ========================================================================= */
/* NIENTE max-width qui. .tm-wrap (1600px) e .docs-wrap (820px) sono
   dichiarate DOPO .wrap nel CSS inline e vincono per ordine di sorgente: e'
   cosi' che Terminal e Docs sono larghi. Ridichiarando .wrap in questo file,
   che si carica dopo TUTTO l'inline, il suo max-width tornava a vincere e le
   due viste finivano schiacciate in una colonna da 660px. */
.wrap{padding:26px 20px 100px;}
.card{background-color:var(--panel);padding:18px;}
.card h3{color:var(--text-mute);margin-bottom:13px;}
.field label{font-size:12.5px;font-weight:500;color:var(--text-dim);margin-bottom:9px;}
/* :not([type=range]): i cursori non sono campi di testo e non devono ereditare
   fondo, bordo e padding — era il padding a far sembrare che la barra non si
   riempisse mai fino in fondo. Il loro stile e' in fondo a questo file. */
.field input:not([type=range]),.field textarea{
  border-radius:var(--v2-r-sm);
  background:rgba(0,0,0,.32);
  border:1px solid var(--v2-edge);
  padding:11px 13px;
  transition:border-color .2s var(--v2-ease),box-shadow .2s var(--v2-ease),background .2s var(--v2-ease);
}
.field input:not([type=range]):focus,.field textarea:focus{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
}
.feemode-opt,.pair-opt,.stock-opt,.wallet-pick-item{
  border-radius:var(--v2-r-sm);border-color:var(--v2-edge);
  transition:all .2s var(--v2-ease);
}
.feemode-opt:hover,.pair-opt:hover,.stock-opt:hover,.wallet-pick-item:hover{
  border-color:var(--v2-edge-hi);background:rgba(255,255,255,.04);
}
.feemode-opt.selected,.pair-opt.selected,.stock-opt.selected{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(var(--green-rgb),.07);
  box-shadow:0 0 24px -10px rgba(var(--green-rgb),.6);
}

/* ============================================================================
   15. PROFILO
   ========================================================================= */
.pf-banner{border-radius:var(--v2-r);overflow:hidden;}
.pf-avatar{
  border-radius:var(--v2-r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px -8px rgba(0,0,0,.9);
}
.pf-name{font-size:18px;letter-spacing:-.018em;font-weight:600;}
.pf-stat{
  background-color:var(--panel);
  transition:transform .24s var(--v2-ease),border-color .24s var(--v2-ease),
             box-shadow .24s var(--v2-ease);
}
.pf-stat:hover{
  transform:translateY(-2px);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-2);
}
.pf-stat-v{font-size:19px;letter-spacing:-.016em;}
.pf-tabs{border-bottom:1px solid var(--v2-edge);}
.pf-activity-row{border-color:var(--v2-edge);}

/* ============================================================================
   16. TERMINAL
   ============================================================================
   Le tre colonne sono uno stato della curva, non tre liste qualsiasi: appena
   creato, oltre meta' strada, gia' bondato. La barra sopra ogni colonna lo
   dice — spenta a sinistra, accesa a destra. E' struttura che porta
   informazione, non decorazione.
   ========================================================================= */
.tm-grid{gap:14px;}
.tm-col{background-color:var(--panel);position:relative;}
.tm-col::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:rgba(255,255,255,.1);
}
.tm-col[data-col="soon"]::before{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.15),rgba(var(--green-rgb),.75));
}
.tm-col[data-col="bonded"]::before{
  background:var(--green);
  box-shadow:0 0 14px rgba(var(--green-rgb),.7);
}
.tm-col-head{
  border-bottom:1px solid var(--v2-edge);
  padding:14px;
  background:rgba(255,255,255,.022);
}
.tm-col-title{font-size:13.5px;font-weight:600;letter-spacing:-.008em;}
.tm-col-sub{font-size:11.5px;color:var(--text-mute);margin-top:3px;line-height:1.45;}
.tm-filter-btn{border-radius:10px;border-color:var(--v2-edge);}
.tm-filter-btn:hover{border-color:var(--v2-edge-hi);}
.tm-filters{background:rgba(0,0,0,.28);border-bottom:1px solid var(--v2-edge);}
.tm-filters input,.tm-filters select{
  border-radius:10px;border-color:var(--v2-edge);background:rgba(0,0,0,.35);
}
.tm-filters input:focus,.tm-filters select:focus{
  border-color:rgba(var(--green-rgb),.5);box-shadow:0 0 0 3px rgba(var(--green-rgb),.1);
}
.tm-filter-clear{border-radius:10px;border-color:var(--v2-edge);}

.tm-row{
  border-color:rgba(255,255,255,.04);
  padding:11px 14px;position:relative;
  transition:background .22s var(--v2-ease);
}
.tm-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);transform:scaleY(0);
  transition:transform .26s var(--v2-ease);
  box-shadow:0 0 12px rgba(var(--green-rgb),.7);
}
.tm-row:hover{background:linear-gradient(90deg,rgba(var(--green-rgb),.05),transparent 60%);}
.tm-row:hover::before{transform:scaleY(1);}
.tm-img{
  border-radius:999px;border:1px solid var(--v2-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 2px 8px rgba(0,0,0,.5);
  transition:transform .26s var(--v2-ease);
}
.tm-row:hover .tm-img{transform:scale(1.06);}
.tm-bar{width:72px;height:4px;background:rgba(255,255,255,.07);box-shadow:none;}
.tm-bar span{box-shadow:0 0 8px rgba(var(--green-rgb),.6);}
.tm-list::-webkit-scrollbar{width:8px;}
.tm-h{font-family:var(--font-display);font-size:21px;letter-spacing:-.025em;}
.tm-tabs{gap:6px;}
.tm-tab{flex:1;}

/* ---- DOCS ---- */
.docs-sec{background-color:var(--panel);}
.docs-table{border-color:var(--v2-edge);}

/* ============================================================================
   17. MODALE
   ========================================================================= */
.modal-backdrop{
  background:rgba(1,2,3,.86);
  backdrop-filter:blur(10px) saturate(.8);
  -webkit-backdrop-filter:blur(10px) saturate(.8);
}
.modal{
  padding:26px;
  background-color:var(--panel);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-3),0 0 90px -30px rgba(var(--green-rgb),.5);
  animation:v2ModalIn .5s var(--v2-ease) both;
}
@keyframes v2ModalIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.modal .modal-sub{letter-spacing:.14em;text-transform:uppercase;font-size:11px;}
.modal .accept-row{
  border-radius:var(--v2-r-sm);
  border-color:var(--v2-edge);
  background:rgba(0,0,0,.32);
  transition:border-color .2s var(--v2-ease);
}
.modal .accept-row:hover{border-color:var(--v2-edge-hi);}
.modal .accept-row input{border-radius:6px;border-color:var(--v2-edge-hi);}
.modal .accept-row input:checked{box-shadow:0 0 18px -4px rgba(var(--green-rgb),.85);}

/* ============================================================================
   18. HOW / FEATURE — le tre tessere
   ============================================================================
   Il numero del passo diventa una cifra grande e cava sullo sfondo: e' un
   ordinale vero (il processo E' una sequenza), quindi puo' pesare.
   ========================================================================= */
.how-grid,.feature-row{gap:10px;}
.how-step,.feature-card{
  background-color:var(--panel);
  padding:17px;
  position:relative;overflow:hidden;
  transition:transform .26s var(--v2-ease),border-color .26s var(--v2-ease),
             box-shadow .26s var(--v2-ease);
}
/* overflow:hidden serve alle card per ritagliare i loro sfondi, ma su .how-step
   ritagliava anche la freccia "→" che collega un passo al successivo: e'
   ::after posizionato a right:-14px, quindi fuori dal riquadro, e non si e'
   mai vista. Misurato: 12px di contenuto tagliato a ogni larghezza desktop.
   Il ritaglio resta sullo sfondo, la freccia torna visibile. */
.how-step{overflow:visible;}
.how-step::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  overflow:hidden;pointer-events:none;z-index:0;
}
.how-step:hover,.feature-card:hover{
  transform:translateY(-3px);
  border-color:var(--v2-edge-hi);
  box-shadow:var(--v2-elev-2);
}
.how-step .step-num{
  width:26px;height:26px;border-radius:7px;background:none;
  border:1px solid rgba(var(--green-rgb),.45);
  font-family:var(--font-mono);font-size:12px;font-weight:600;line-height:1;
  color:var(--green);margin-bottom:12px;letter-spacing:0;
  transition:border-color .24s var(--v2-ease),box-shadow .24s var(--v2-ease);
}
.how-step:hover .step-num{border-color:rgba(var(--green-rgb),.9);box-shadow:0 0 14px -4px rgba(var(--green-rgb),.8);}
.how-step h4,.feature-card h4{font-size:14px;font-weight:600;letter-spacing:-.012em;margin-bottom:6px;}
.how-step p,.feature-card p{font-size:13px;line-height:1.6;}
.how-step:not(:last-child)::after{color:rgba(var(--green-rgb),.55);}
.feature-ico{
  width:32px;height:32px;border-radius:var(--v2-r-sm);
  background:linear-gradient(180deg,rgba(var(--green-rgb),.18),rgba(var(--green-rgb),.05));
  border-color:rgba(var(--green-rgb),.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px -8px rgba(var(--green-rgb),.7);
}
.feature-ico svg{width:16px;height:16px;}

/* ============================================================================
   19. VUOTI, SCHELETRI, BANNER
   ========================================================================= */
.empty-state{
  border-radius:var(--v2-r);border-color:var(--v2-edge);
  background:rgba(255,255,255,.015);padding:58px 22px;
}
.skel-line{border-radius:999px;background:rgba(255,255,255,.055);}
.banner,.bonded-banner,.chain-notice,.wallet-notice{border-radius:var(--v2-r-sm);}

/* ============================================================================
   20. FOOTER
   ========================================================================= */
.site-foot,.site-footer{border-top:1px solid var(--v2-edge);padding-top:20px;}
.foot-name,.site-foot .fl{font-family:var(--font-display);letter-spacing:-.03em;}

/* ============================================================================
   21. RIVELAZIONE ALLO SCORRIMENTO
   ============================================================================
   Una regia sola all'ingresso, non effetti sparsi. Le classi le mette v2.js.
   ========================================================================= */
.v2-rise{opacity:0;transform:translateY(18px);}
.v2-in{
  opacity:1;transform:none;
  transition:opacity .75s var(--v2-ease),transform .75s var(--v2-ease);
}
/* Sequenza d'ingresso dell'hero: occhiello, titolo, testo, dati. */
.v2-boot .hero-copy > *,.v2-boot .hero-verified,.v2-boot .hp-item{
  animation:v2BootIn .85s var(--v2-ease) both;
}
.v2-boot .v2-readout{animation:v2BootIn 1s var(--v2-ease) .12s both;}
.v2-boot .hero-copy > *:nth-child(1){animation-delay:.05s;}
.v2-boot .hero-copy > *:nth-child(2){animation-delay:.11s;}
.v2-boot .hero-copy > *:nth-child(3){animation-delay:.17s;}
.v2-boot .hero-copy > *:nth-child(4){animation-delay:.23s;}
.v2-boot .hero-copy > *:nth-child(5){animation-delay:.29s;}
.v2-boot .hero-verified{animation-delay:.26s;}
.v2-boot .hp-item:nth-child(1){animation-delay:.3s;}
.v2-boot .hp-item:nth-child(2){animation-delay:.36s;}
.v2-boot .hp-item:nth-child(3){animation-delay:.42s;}
.v2-boot .hp-item:nth-child(4){animation-delay:.48s;}
@keyframes v2BootIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* La curva si disegna da sola una volta. Non e' un ornamento: e' la tesi del
   prodotto che si costruisce sotto gli occhi. Prima il reticolo e gli assi,
   poi il tratto — l'ordine in cui uno strumento vero disegna una traccia.
   La lunghezza di ogni tratto la misura v2.js sul path, quindi la velocita' e'
   uniforme invece che proporzionale alla lunghezza. */
.v2-draw{
  stroke-dasharray:var(--v2-len);
  stroke-dashoffset:var(--v2-len);
  animation:v2Draw var(--v2-dur,1.3s) var(--v2-ease-io) var(--v2-delay,.3s) both;
}
@keyframes v2Draw{to{stroke-dashoffset:0;}}
/* La campitura della zona rimborsabile entra dopo il tratto che la delimita. */
.v2-fade-in{animation:v2BootIn .9s var(--v2-ease) var(--v2-delay,.9s) both;}

/* ============================================================================
   22. FUOCO DA TASTIERA
   ========================================================================= */
/* Le cifre cave (rank del trending, numero del passo) sono testo con contorno
   e riempimento trasparente. Dove il contorno non e' supportato resterebbe
   testo invisibile: qui tornano piene e attenuate. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================================
   23. SCROLLBAR
   ========================================================================= */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);border-radius:999px;
  border:3px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--green-rgb),.5);background-clip:padding-box;}

/* ============================================================================
   24. MOBILE
   ========================================================================= */
@media (max-width:900px){
  .app{padding-left:0;}
  .sidebar{width:282px;}
  .sidebar{border-image:none;border-right:1px solid var(--v2-edge);}
  .topbar{padding:11px 16px;}
  /* Sotto i 900px la casella si stringe (menu, ricerca, switch chain e
     wallet sulla stessa riga): "Search tokens..." non ci sta e si vedeva
     tagliato in "Sea". Meglio l'input vuoto con solo la lente. */
  .search input::placeholder{color:transparent;}
  .page{padding:18px 16px 8px;}
  .hero{padding:18px 16px;border-radius:var(--v2-r-md);}
  .hero h1{font-size:23px;letter-spacing:-.024em;max-width:none;}
  .hero p{font-size:13px;}
  .hero-logo{width:36px;height:36px;}
  .hp-item dd{font-size:17px;}
  .token-container{padding:18px 14px 22px;}
  .modal{padding:20px;}
  .v2-reticle{background-position:
    left 8px top 8px,left 8px top 8px,
    right 8px top 8px,right 8px top 8px,
    left 8px bottom 8px,left 8px bottom 8px,
    right 8px bottom 8px,right 8px bottom 8px,
    0 0;}
}
@media (min-width:1441px){
  .page{max-width:1440px;padding:26px 28px 8px;}
}

/* ============================================================================
   25. MOVIMENTO RIDOTTO
   ============================================================================
   Chi lo chiede ottiene la stessa interfaccia, ferma. Nessun elemento sparisce
   e nessuno resta invisibile per un'animazione che non parte.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .v2-aurora i{animation:none;}
  .v2-boot .hero-copy > *,.v2-boot .hero-verified,.v2-boot .hp-item,
  .v2-boot .v2-readout{animation:none;opacity:1;transform:none;}
  .hero-curve path{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}
  .v2-cta:hover{transform:none;}
  .v2-rise{opacity:1;transform:none;}
  .modal{animation:none;}
  .side-link:hover,.token-card:hover,.trend-card:hover,.how-step:hover,
  .feature-card:hover,.pf-stat:hover,.side-cta:hover,.btn-connect:hover,
  .btn-buy:hover:not(:disabled),.btn-launch:hover:not(:disabled){transform:none;}
}

/* ============================================================================
   26. CURSORI — riempimento reale da 0% a 100%
   ============================================================================
   Erano <input type=range> nativi affidati ad accent-color, e avevano due
   difetti sommati:

   1. stando dentro .field ereditavano bordo, padding e fondo da campo di
      testo, quindi la pista era incassata in un riquadro piu' largo di lei:
      da fuori sembrava una barra che al massimo non arrivava mai in fondo.
      Corretto con :not([type=range]) sulle regole di .field.

   2. il riempimento nativo si ferma al CENTRO del pollice, non al bordo della
      pista: al massimo resta scoperto mezzo pollice, al minimo ne avanza
      mezzo gia' colorato. Non e' aggirabile con accent-color.

   Qui la pista e' un gradiente che va da 0 a --range-pct, variabile che
   range-fill.js tiene allineata al valore. Al massimo e' piena fino
   all'ultimo pixel, al minimo e' completamente vuota. Il pollice ci scorre
   sopra e a fondo corsa sborda leggermente oltre l'estremo: e' voluto, e' il
   modo in cui la pista puo' risultare piena davvero.
   ========================================================================= */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:20px;
  margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;cursor:pointer;
  /* Valore di ripiego se lo script non e' ancora passato: barra vuota, mai
     una barra piena per sbaglio. */
  --range-pct:0%;
  --range-track:rgba(255,255,255,.09);
  --range-fill:var(--green);
}
input[type=range]:focus{outline:none;}
input[type=range]:focus-visible{outline:2px solid var(--green-border);outline-offset:4px;}
input[type=range]:disabled{opacity:.45;cursor:not-allowed;}

/* ---- WebKit / Blink ---- */
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--range-fill) 0 var(--range-pct),
      transparent var(--range-pct) 100%),
    var(--range-track);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--range-fill);
  border:2px solid var(--bg-1);
  box-shadow:0 1px 3px rgba(0,0,0,.65);
  /* (altezza pista - altezza pollice) / 2, per centrarlo sulla pista. */
  margin-top:-5px;
  transition:transform .16s var(--v2-ease,ease),box-shadow .16s var(--v2-ease,ease);
}
input[type=range]:hover::-webkit-slider-thumb{
  box-shadow:0 1px 3px rgba(0,0,0,.65),0 0 0 5px rgba(var(--green-rgb),.12);
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);}

/* ---- Firefox ----
   ::-moz-range-progress soffre dello stesso arresto a meta' pollice, quindi
   resta trasparente e il riempimento lo fa lo stesso gradiente della pista. */
input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--range-fill) 0 var(--range-pct),
      var(--range-track) var(--range-pct) 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-progress{height:6px;background:transparent;}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--range-fill);
  border:2px solid var(--bg-1);
  box-shadow:0 1px 3px rgba(0,0,0,.65);
}
input[type=range]:active::-moz-range-thumb{transform:scale(1.14);}

@media (prefers-reduced-motion:reduce){
  input[type=range]::-webkit-slider-thumb{transition:none;}
  input[type=range]:active::-webkit-slider-thumb,
  input[type=range]:active::-moz-range-thumb{transform:none;}
}

/* ============================================================================
   27. MOBILE — tabelle e righe dense
   ============================================================================
   La causa principale del "tagliato" non e' quasi mai la larghezza dichiarata:
   e' che un elemento di griglia o di flex ha `min-width:auto` per impostazione
   predefinita, quindi NON puo' restringersi sotto il suo contenuto. Un
   indirizzo di contratto, un link referral o un nome di token lungo sono
   stringhe che non vanno a capo: la colonna si allarga oltre lo schermo, la
   riga sfora, e la pagina prende una barra di scorrimento orizzontale che
   taglia tutto il resto.
   Da qui in poi: min-width:0 dove serve, e le tabelle che si ripiegano invece
   di essere compresse.
   ========================================================================= */
@media (max-width:640px){

  /* ---- niente scorrimento orizzontale di pagina ----
     Non con overflow:hidden sul body, che romperebbe position:sticky: si
     toglie la causa, cioe' la larghezza minima automatica dei figli. */
  .tok-row,.tr-row,.trades-head,.hl-row,.hl-top,.hl-addr,
  .pf-activity-row,.pf-activity-main,.tm-card,.token-meta,
  .row-between,.stk-row{min-width:0;}
  .tok-row > *,.pf-activity-row > *,.tm-card > *{min-width:0;}

  /* Indirizzi e link lunghi: possono andare a capo invece di sfondare. */
  .token-ca-v,.tok-ca,.pf-addr,.docs-addr,.foot-addr{
    overflow-wrap:anywhere;word-break:break-word;
  }

  /* ---- tabella dei trade ----
     Era una griglia 60px / 1fr / 78px / 50px: 212px di colonne fisse piu' i
     vuoti, dentro una card che su un telefono stretto lascia poco piu' di
     300px. L'indirizzo veniva schiacciato a pochi caratteri e la colonna
     dell'eta' finiva sotto il bordo. Qui il tipo e l'importo restano sulla
     prima riga, indirizzo ed eta' scendono sotto: nessuna colonna fissa. */
  .trades-head{display:none;}
  .trades-list{max-height:none;}
  .tr-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"type eth" "acct age";
    gap:3px 10px;padding:10px 0;
  }
  .tr-row .tr-type{grid-area:type;justify-self:start;}
  .tr-row .tr-eth{grid-area:eth;text-align:right;}
  .tr-row .tr-acct{grid-area:acct;font-size:12px;}
  .tr-row .tr-age{grid-area:age;text-align:right;font-size:12px;}

  /* ---- distribuzione holders ----
     .hl-addr e' un flex con dentro rango, indirizzo ed eventuale etichetta
     "You": senza min-width:0 (sopra) l'indirizzo monospace spingeva fuori la
     percentuale a destra. */
  .hl-addr span[data-go-profile]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hl-pct{font-size:12px;}

  /* ---- attivita' del profilo ----
     Titolo e importo stavano sulla stessa riga con l'importo a larghezza
     fissa: con un nome di token lungo il titolo veniva troncato a meta'
     parola. */
  .pf-activity-row{gap:9px;padding:10px 8px;}
  .pf-activity-title,.pf-activity-sub{overflow-wrap:anywhere;}
  .pf-activity-amt{font-size:12px;}

  /* ---- terminal ---- */
  .tm-tabs{
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:7px 2px;margin:-5px -2px 6px;
  }
  .tm-tabs::-webkit-scrollbar{display:none;}
  .tm-tab{flex:0 0 auto;}

  /* ---- statistiche in tre colonne ----
     Su schermi stretti tre valori affiancati diventano due cifre e i puntini:
     meglio due colonne piene. */
  #marketStats,.tk-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  #marketStats .tk-stat .v,.tk-stats .tk-stat .v{font-size:14px;}

  /* ---- schede del profilo ----
     Stesso trattamento dei feed tab: scorrono e hanno aria sopra, cosi'
     l'alone della scheda attiva non viene tagliato. */
  .pf-tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:7px 2px 14px;margin:-5px -2px 8px;
  }
  .pf-tabs::-webkit-scrollbar{display:none;}
  .pf-tab{flex:0 0 auto;}

  /* ---- bersagli tattili ----
     Sotto i 40px un bottone si sbaglia a colpire col pollice. */
  .btn-main{padding:14px;font-size:15px;}
  .feed-tab,.chart-tf,.pf-tab,.tm-tab{min-height:34px;display:inline-flex;align-items:center;}
  .trade-tab{min-height:40px;}
}



/* ============================================================================
   28. TOPBAR SU MOBILE — la ricerca diventa un pannello
   ============================================================================
   Misurato a 375px: hamburger 36 + selettore chain 120 + bottone wallet 144 +
   spaziature lasciavano alla ricerca 19px di larghezza, con dentro un input da
   50px. Non era stretta: era rotta.
   Sotto la soglia la ricerca esce dal flusso e si apre da un'icona. Il pannello
   che si apre deve sembrare parte della barra, non un input capitato li':
   stessa altezza dei controlli accanto, lente dentro il campo, e il campo che
   riempie la barra invece di galleggiarci.

   LA SOGLIA E' 1360, NON PIU' 900.
   Non era un problema dei soli telefoni. La barra interna e' larga al massimo
   1360px (la misura unica del sito), la navigazione in alto compare sopra i
   1081, e la ricerca e' l'unico elemento elastico: e' sempre lei a cedere.
   Misurato con la barra al completo: a 1440 restano 180px al campo — stretto
   ma vero — mentre fra 1081 e 1360 ne restano ZERO, cioe' un campo presente
   nel flusso, invisibile e non utilizzabile.
   In quella fascia vale ora la stessa soluzione del telefono, che non e' un
   ripiego: un campo intero che si apre su tutta la barra, invece di un campo
   da zero pixel. La scorciatoia da tastiera continua a funzionare: apri() in
   v4.js apre il pannello prima di mettere a fuoco.
   ========================================================================= */
.m-search-btn,.m-search-close,.search-glyph{display:none;}

@media (max-width:1360px){
  .m-search-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;padding:0;
    border-radius:var(--v2-r-sm);background:var(--panel);
    border:1px solid var(--v2-edge);color:var(--text-dim);
    transition:color .14s var(--v2-ease),border-color .14s var(--v2-ease);
  }
  .m-search-btn:hover,.m-search-btn:active{color:var(--text);border-color:var(--v2-edge-hi);}
  .m-search-btn svg{width:17px;height:17px;}

  /* Chiusa per impostazione predefinita. Niente display:none: l'input deve
     restare nel DOM e mettibile a fuoco, perche' altrove nel codice ci si
     scrive dentro. */
  .topbar .search{
    position:absolute;inset:0;z-index:3;
    display:flex;align-items:center;gap:6px;
    padding:0 11px;margin:0;max-width:none;
    background:var(--bg-1);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .14s var(--v2-ease);
  }
  .topbar.search-open .search{opacity:1;visibility:visible;pointer-events:auto;}
  .topbar.search-open .m-search-btn{visibility:hidden;}

  /* Il campo: stessa altezza e stesso raggio dei bottoni accanto, spazio a
     sinistra per la lente. */
  .topbar .search input{
    flex:1;min-width:0;height:36px;
    padding:0 12px 0 34px;
    border-radius:var(--v2-r-sm);
    background:var(--panel);border:1px solid var(--v2-edge);
    /* 16px NON e' una scelta tipografica: e' la soglia sotto la quale iOS
       Safari ingrandisce l'intera pagina quando il campo prende il fuoco.
       Qui c'era 15px, e il commento diceva pure il motivo. Il risultato era
       che al tocco la pagina si ingrandiva, la barra usciva dallo schermo e
       la X di chiusura finiva quasi fuori vista. */
    font-size:16px;
  }
  /* Anello di fuoco leggero: sul campo di ricerca il bordo pieno d'accento
     era piu' vistoso del testo che ci si scrive dentro. */
  .topbar .search input:focus{
    border-color:var(--v2-edge-hi);
    box-shadow:0 0 0 3px rgba(var(--green-rgb),.08);
  }
  /* La lente CSS di .search e' un cerchietto con un'ombra a fare il manico:
     regge a 12px in una barra desktop, ma accanto all'icona vera del bottone
     si vedeva che erano due disegni diversi. Su mobile si usa l'SVG. */
  .topbar .search::before{display:none;}
  .search-glyph{
    display:block;position:absolute;left:23px;top:50%;
    transform:translateY(-50%);
    width:15px;height:15px;color:var(--text-mute);pointer-events:none;z-index:1;
  }
  .m-search-close{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:36px;flex-shrink:0;padding:0;
    background:transparent;border:0;color:var(--text-mute);
  }
  .m-search-close:hover,.m-search-close:active{color:var(--text);}
  .m-search-close svg{width:18px;height:18px;}

  /* Su Docs, Profilo, Terminal e le altre rotte non cercabili l'input viene
     disabilitato da syncSearchBoxForRoute(): li' l'icona aprirebbe un campo
     morto, quindi sparisce. */
  .search:has(input:disabled) + .m-search-btn{display:none;}
}

/* ============================================================================
   29. MOBILE — testo lungo che non va a capo
   ============================================================================
   Un indirizzo di contratto e' una stringa unica di 42 caratteri senza spazi:
   nessun punto di andata a capo, quindi impone la propria larghezza alla
   colonna e sfonda la card. Verificato a 375px sulla lista token, dove la
   riga CONTRACT usciva oltre il bordo destro del pannello.
   ========================================================================= */
@media (max-width:900px){
  .tr-ca,.tok-ca,.token-ca-v,.pf-addr,.hl-addr,
  .tr-acct,.mb-desc,.docs-sec code{
    overflow-wrap:anywhere;word-break:break-word;min-width:0;
  }
  /* L'indirizzo del contratto in lista: meglio troncarlo con i puntini che
     mandarlo a capo su due righe dentro una riga di tabella. */
  .tr-ca{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ============================================================================
   30. TOPBAR SU SCHERMI STRETTI — i controlli non escono dallo schermo
   ============================================================================
   Misurato a 360px: hamburger 36 + icona ricerca 36 + selettore chain 120 +
   bottone wallet 144 + spaziature e padding sommavano 392px su 360 disponibili.
   .top-right ha flex-shrink:0, quindi niente si restringeva: il bottone
   "Connect Wallet" finiva 16px OLTRE il bordo destro, tagliato a meta'.
   Sotto i 420px i due controlli si compattano fino a rientrare.
   ========================================================================= */
@media (max-width:420px){
  .topbar{padding-left:11px;padding-right:11px;gap:6px;}
  /* L'etichetta della chain RESTA. Toglierla lasciava un pallino e una
     freccia: nessuno puo' capire su che rete sta guardando i prezzi, ed e'
     l'informazione piu' importante della barra. Si stringe solo il contorno. */
  .chain-trigger{padding:0 8px;gap:6px;}
  .chain-trigger .chain-caret{margin-left:0;}
  /* NIENTE testo generato dal CSS qui. Prima questa regola nascondeva il
     contenuto del bottone e ne disegnava un altro con ::after: il markup e il
     JavaScript dicevano "Login", ma su schermo stretto compariva "Connect",
     perche' il testo vero era invisibile e quello mostrato viveva solo nel
     foglio di stile. Un testo che si vede deve stare in un posto solo.
     Per far rientrare il bottone bastano padding e corpo piu' piccoli. */
  #connectBtn{padding:0 11px;font-size:12.5px;}
  .btn-connect{padding:0 10px;}
}

/* ============================================================================
   31. BARRA MERCATO — il nome del sito non viene tagliato
   ============================================================================
   Misurato a 375px: .mb-top e' un flex con marchio 36 + nome (flex:1) +
   stato 139, piu' due spaziature da 12. Al nome restavano 98px mentre
   "letstrash" ne chiede 110, e siccome .mb-id ha min-width:0 si stringeva
   sotto il contenuto tagliando le ultime lettere.
   Sotto i 640px lo stato scende su una riga propria: il nome del sito ha la
   precedenza su un'etichetta che ripete quello che dice gia' il selettore
   di chain in alto.
   ========================================================================= */
@media (max-width:640px){
  .mb-top{flex-wrap:wrap;row-gap:6px;}
  .mb-id{flex:1 1 auto;min-width:auto;}
  .mb-status{flex-basis:100%;margin-left:0;}
}

/* ============================================================================
   32. PAGINA TOKEN SU MOBILE — la colonna non si allarga oltre lo schermo
   ============================================================================
   Misurato a 375px: la traccia della griglia risultava larga 387px dentro un
   contenitore di 375, e tutto il contenuto ereditava quei 12px in piu' uscendo
   di 26px oltre il bordo destro — intestazione del prezzo, statistiche,
   grafico, card.
   E' il "grid blowout": una traccia `1fr` ha min-width:auto, quindi NON si
   stringe sotto la larghezza minima intrinseca del suo contenuto. Basta un
   solo elemento che non sa andare a capo perche' l'intera colonna, e con lei
   la pagina, si allarghi. minmax(0,1fr) toglie quel pavimento.
   ========================================================================= */
@media (max-width:1024px){
  .token-container{grid-template-columns:minmax(0,1fr);}
  .token-container > *{min-width:0;}
}

/* ============================================================================
   33. LIVELLO FLUIDO — adattamento senza soglie
   ============================================================================
   Un "auto-adattatore" per ogni schermo non esiste come interruttore, ma
   esiste come TECNICA, ed e' quella che usano i siti fatti bene: invece di
   scrivere una regola per 360, una per 390, una per 412, si scrivono griglie
   che sanno da sole quante colonne ci stanno.

   repeat(auto-fit, minmax(min(100%, Npx), 1fr)) legge cosi': "colonne larghe
   almeno N, quante ce ne stanno; se N non ci sta, larga quanto il contenitore".
   Il min(100%, Npx) e' la parte che evita lo sfondamento su schermi piu'
   stretti di N. Da 280px a 4K la griglia passa da 1 a 2 a 3 colonne da sola,
   senza che nessuno abbia previsto quelle larghezze.

   Le regole a soglia che coprivano gli stessi elementi sono state RIMOSSE piu'
   sopra: due meccanismi sullo stesso elemento si contraddicono al primo
   cambio.
   ========================================================================= */

/* Le statistiche del token sono sempre SEI riquadri, un numero fisso: qui
   l'auto-fit e' controproducente, perche' a 1440px ne calcolava cinque e
   lasciava "Age" da sola su una seconda riga. Con un numero noto di elementi
   conviene dire quante colonne, scegliendo divisori di sei. */
#marketStats,.tk-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:640px){#marketStats,.tk-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Le statistiche del profilo sono SEI, un numero fisso: l'auto-fit ne
   calcolava cinque e lasciava l'ultima orfana su una seconda riga, lo stesso
   difetto gia' corretto per #marketStats. Con un numero noto di elementi si
   scelgono divisori di sei. */
.pf-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:640px){.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* "Come funziona": era repeat(3,1fr) fisso. A 1024px, con la barra laterale
   che si prende la sua parte, le tre colonne si stringevano sotto la
   larghezza minima del testo e la griglia sfondava di 14px. */
.how-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}

/* Colonne del terminal e relativi filtri. */
.tm-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.tm-filters{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}

/* Trending e piede pagina. */
.trending-row{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.foot-cols{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}

/* ---- spaziature fluide ----
   clamp(minimo, valore che scala, massimo): il margine cresce col viewport
   invece di saltare da 14 a 22 a una soglia. Su un Fold da 280px recupera
   spazio utile, su un tablet non lascia il contenuto incollato ai bordi. */
.wrap,.page{
  padding-left:clamp(10px,3.2vw,22px);
  padding-right:clamp(10px,3.2vw,22px);
}
.topbar{
  padding-left:clamp(9px,2.6vw,22px);
  padding-right:clamp(9px,2.6vw,22px);
  gap:clamp(5px,1.6vw,8px);
}

/* ============================================================================
   34. TOPBAR — regge fino a 280px senza una soglia dedicata
   ============================================================================
   Misurato a 280px (Galaxy Fold chiuso): il bottone wallet usciva di 16px.
   .top-right aveva flex-shrink:0, quindi nessuno dei suoi figli cedeva un
   pixel e l'ultimo veniva spinto fuori.
   La soluzione non e' un'altra soglia: e' lasciare che l'etichetta della chain
   si accorci con i puntini quando lo spazio finisce. Cosi' la barra regge a
   QUALSIASI larghezza, comprese quelle che nessuno ha previsto.
   ========================================================================= */
.top-right{min-width:0;flex-shrink:1;}
.chain-switch{min-width:0;}
/* max-width:100% e' la parte che conta: .chain-switch si restringeva con la
   barra, ma .chain-trigger dentro restava alla sua larghezza naturale e a
   280px finiva 21px SOTTO il bottone Connect. Un figlio non eredita il limite
   del padre: glielo si deve dire. */
.chain-trigger{min-width:0;max-width:100%;}
.chain-trigger-label,.chain-trigger-short{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto;
}
/* Il bottone wallet non si accorcia mai sotto il suo testo: e' l'azione
   principale della barra, ed e' gia' corto. A cedere e' l'etichetta accanto. */
.btn-connect{flex-shrink:0;}

/* ============================================================================
   33. LAYOUT CHE SI ADATTA DA SOLO, SENZA SOGLIE
   ============================================================================
   Non esiste un "adattatore automatico" da attivare: quello che fanno i siti
   fatti bene e' smettere di dichiarare misure fisse e lasciare che sia il
   layout a decidere. Due strumenti, entrambi supportati ovunque oggi:

   - repeat(auto-fit, minmax(N, 1fr)): la griglia calcola DA SOLA quante
     colonne ci stanno. Nessun @media, nessuna soglia da indovinare: a 320px ne
     mette una, a 700 due, a 1100 tre, e su un formato che non abbiamo previsto
     fa comunque la cosa giusta.
   - clamp(min, preferito, max): un valore che scorre con la larghezza dello
     schermo fra due estremi, invece di saltare a scalini.

   Le @media che restano piu' sopra servono a cose che una formula non sa fare
   (ripiegare una tabella, nascondere una colonna). Queste tolgono le soglie
   dove non servivano.
   ========================================================================= */

/* ---- griglie che contano da sole le colonne ----
   ATTENZIONE al limite della tecnica, verificato a 768px: auto-fit va bene
   quando gli elementi sono un numero qualunque, ma su una SEQUENZA di tre
   passi produceva due colonne con il terzo orfano accanto a un vuoto, e con
   le frecce di collegamento che puntavano nella direzione sbagliata.
   .how-grid resta quindi a soglie esplicite (tre in fila oppure uno per
   riga, mai due), perche' li' il numero di elementi e' fisso e l'ordine
   significa qualcosa. Le sei card di .feature-row invece non sono una
   sequenza e stanno bene comunque si dispongano. */
.feature-row{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.how-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:900px){
  .how-grid{grid-template-columns:minmax(0,1fr);}
}

/* NIENTE auto-fit qui: era una regola rimasta da un giro precedente, e stando
   piu' in basso vinceva su quella a colonne fisse. Nella colonna centrale
   della pagina token (~700px) calcolava quattro colonne, quindi i sei
   riquadri uscivano 4 + 2: due righe sbilanciate.
   Sei elementi vogliono un divisore di sei — 3 + 3 — e la larghezza della
   colonna non c'entra. */
.tm-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.foot-cols{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
}
/* min(100%,N) e' la parte che evita il classico incidente di auto-fit: sotto
   N pixel di viewport una colonna da N sfonderebbe il contenitore. Con min()
   la colonna non chiede mai piu' del 100% dello spazio disponibile. */

/* ---- misure che scorrono invece di saltare ---- */
:root{
  /* Margini di pagina: 14px su un telefono stretto, fino a 26 su desktop,
     con tutti i valori intermedi al posto di due scalini. */
  --pad-page:clamp(14px,3.4vw,26px);
}
.wrap,.page-wrap,.tm-wrap{
  padding-left:var(--pad-page);padding-right:var(--pad-page);
}
.hero h1{font-size:clamp(26px,5.4vw,44px);line-height:1.12;}
.section-title{font-size:clamp(15px,2.2vw,19px);}
.tk-price-val{font-size:clamp(20px,4.6vw,30px);}

/* ---- ultima rete di sicurezza ----
   Qualunque cosa arrivi dall'utente o dalla chain (un nome di token assurdo,
   un simbolo lunghissimo, un numero enorme) non deve poter allargare la
   pagina. Vale a ogni larghezza, non solo sotto una soglia. */
.tok-name,.tok-sym,.token-name,.token-sym,.tk-name,
.pf-activity-title,.hl-addr,.tr-acct{
  overflow-wrap:anywhere;min-width:0;
}
img,svg,canvas,video,iframe{max-width:100%;}

/* ============================================================================
   35. iOS / SAFARI SU MOBILE
   ============================================================================
   Raccolta dei comportamenti che su WebKit differiscono da Chrome e che, presi
   insieme, facevano sembrare l'interfaccia rotta su iPhone.
   ========================================================================= */

/* ---- 1. lo zoom automatico sui campi ----
   E' il difetto piu' grave dei quattro. Quando un input con font-size sotto i
   16px prende il fuoco, iOS Safari INGRANDISCE tutta la pagina per rendere
   leggibile il campo. Non torna indietro da solo. Da li' in poi il sito e' piu'
   largo del vetro: la barra di ricerca esce a destra, la X di chiusura finisce
   fuori vista, e tutto sembra "non adattato".
   Ogni campo del sito era sotto quella soglia — 13, 14 e 15px. Su mobile
   passano tutti a 16px; sul desktop, dove il problema non esiste, restano
   come sono. */
/* La soglia va legata al DISPOSITIVO, non alla larghezza. Un iPhone ruotato e'
   largo 852px CSS: nessun breakpoint "mobile" scatta, i campi tornano a 14px e
   lo zoom si ripresenta identico in orizzontale. (hover:none) and
   (pointer:coarse) descrive esattamente cio' che conta: si tocca con un dito,
   non c'e' un puntatore. Vale in entrambi gli orientamenti e anche sui tablet.
   L'!important serve a battere le regole per singolo campo, piu' specifiche. */
@media (hover:none) and (pointer:coarse){
  input,textarea,select{font-size:16px !important;}
}

@media (max-width:900px){
  input,textarea,select,
  .field input,.field textarea,.buy-input-row input,
  .tm-filters input,.tm-filters select,.ref-code-row input,
  .search input{
    font-size:16px;
  }
  /* iOS disegna di suo bordi arrotondati e un'ombra interna sui campi di
     testo, ignorando border-radius: i campi non somigliavano a quelli
     progettati. */
  input,textarea{
    -webkit-appearance:none;appearance:none;
    border-radius:var(--v2-r-sm);
  }
}

/* ---- 2. testo ingrandito in orizzontale ----
   Ruotando il telefono, Safari gonfia di sua iniziativa il corpo del testo di
   alcuni blocchi. Il risultato e' un'impaginazione che cambia proporzioni fra
   verticale e orizzontale senza che nessuna regola lo chieda. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* ---- 3. il lampo grigio al tocco ----
   Su iOS ogni elemento toccabile lampeggia di un rettangolo grigio, angoli
   compresi: su bottoni tondi e righe di tabella si vede il rettangolo dietro
   la forma. Lo togliamo e lasciamo che siano gli stati :active a dare il
   riscontro. */
*{-webkit-tap-highlight-color:transparent;}

/* ---- 4. l'altezza dello schermo ----
   Su iOS 100vh vale l'altezza CON la barra degli indirizzi nascosta, quindi e'
   piu' alta di quel che si vede: un elemento alto 100vh sborda sotto e crea
   uno scorrimento che non dovrebbe esistere. dvh e' l'altezza reale, che
   cambia mentre la barra si ritrae. Il fallback resta per i browser che non la
   conoscono. */
body{min-height:100vh;min-height:100dvh;}
.app{min-height:100vh;min-height:100dvh;}
.tm-list{max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);}

/* ---- 5. le zone sicure ----
   Il meta viewport dichiara viewport-fit=cover, quindi la pagina si estende
   SOTTO la tacca e la barra di gesto. In verticale si nota poco; in
   orizzontale il margine laterale vale ~44px e li' finiva la X di chiusura
   della ricerca, che infatti risultava "quasi fuori visuale".
   env(safe-area-inset-*) vale 0 dove non serve, quindi si puo' sommare sempre. */
.topbar{
  padding-left:max(clamp(9px,2.6vw,22px),env(safe-area-inset-left));
  padding-right:max(clamp(9px,2.6vw,22px),env(safe-area-inset-right));
}
@media (max-width:900px){
  .topbar .search{
    padding-left:max(11px,env(safe-area-inset-left));
    padding-right:max(11px,env(safe-area-inset-right));
  }
  .wrap,.page{
    padding-left:max(clamp(10px,3.2vw,22px),env(safe-area-inset-left));
    padding-right:max(clamp(10px,3.2vw,22px),env(safe-area-inset-right));
  }
  /* Il menu laterale entra da sinistra: senza questo, in orizzontale le voci
     finiscono sotto la tacca. E in fondo serve spazio per la barra di gesto,
     altrimenti l'ultima voce non e' toccabile. */
  .sidebar{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
}

/* ---- 6. il rimbalzo ----
   Trascinando dentro un pannello che scorre, iOS continua il gesto sulla
   pagina sotto: si chiude il menu per sbaglio, o la pagina scivola mentre si
   scorre una lista. overscroll-behavior ferma la catena. */
.sidebar,.trades-list,.holders-list,.tm-list,.modal-card{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ============================================================================
   36. HOME IN MODO RICERCA
   ============================================================================
   Con una ricerca attiva la barra di mercato e la nota sull'OG si tolgono di
   mezzo. Su telefono quell'intestazione riempie da sola tutta la schermata:
   si digitava il nome di un token e non cambiava niente di visibile, perche'
   il risultato compariva sotto la piega. La striscia Trending gia' si
   nascondeva da sola (renderTrending), l'intestazione no.
   La classe la mette renderTokens() in base a currentSearch.
   ========================================================================= */
#view-home.is-searching .market-bar,
#view-home.is-searching .list-note,
/* La pagina Stocks ha la stessa intestazione e lo stesso problema. */
#view-stocks.is-searching .market-bar,
#view-stocks.is-searching .list-note,
#view-stocks.is-searching .how,
/* Anche "How it works": e' materiale di presentazione, e sotto l'unico
   risultato di una ricerca diventa rumore lungo tre schermate. */
#view-home.is-searching #how{
  display:none;
}
/* Le schede di ordinamento restano, ma senza il titolo di sezione che le
   staccherebbe dai risultati. */
#view-home.is-searching #discover{margin-top:0;}

/* ============================================================================
   37. FOOTER SU MOBILE — tre colonne, sempre
   ============================================================================
   La regola auto-fit della sezione 33 e' quella giusta per le griglie di
   contenuto, ma qui no: con una larghezza minima di 150px, su un telefono ci
   stavano due colonne e la terza andava a capo da sola, sbilanciando il
   piede pagina. Le tre voci del footer sono un blocco unico e vanno lette
   affiancate, quindi la larghezza la si impone e sono i testi ad andare a capo.
   ========================================================================= */
@media (max-width:720px){
  .foot-cols{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 10px;
  }
  .foot-col a,.foot-col h4{
    font-size:11.5px;line-height:1.5;
    /* "Contracts on explorer" e "Launch a token" non ci stanno su una riga in
       un terzo di schermo: vanno a capo invece di sfondare la colonna. */
    overflow-wrap:anywhere;word-break:normal;
  }
  .foot-col a{display:block;margin-bottom:5px;}
}

/* ============================================================================
   38. TABELLE DEI DOCS SU MOBILE
   ============================================================================
   Erano due celle sulla stessa riga: etichetta a sinistra, valore a destra in
   monospazio. Su un telefono la seconda cella contiene frasi come
   "1% — 75% platform, 25% creator", che in monospazio a 13px chiedono piu'
   spazio di mezza riga: il testo usciva dalla cella e finiva oltre il bordo.
   Sotto i 640px la tabella si impila — etichetta sopra, valore sotto, a
   sinistra — e nessuna delle due deve piu' stare in meta' larghezza.
   ========================================================================= */
@media (max-width:640px){
  .docs-table,.docs-table tbody,.docs-table tr,.docs-table td{display:block;width:100%;}
  .docs-table tr{
    padding:9px 0;border-bottom:1px solid var(--hairline);
  }
  .docs-table td{
    padding:0;border-bottom:0;
    overflow-wrap:anywhere;
  }
  .docs-table td:first-child{
    color:var(--text-mute);font-size:11px;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;
  }
  .docs-table td:last-child{
    text-align:left;color:var(--text);font-size:13px;line-height:1.5;
  }
  /* Il resto del testo dei docs: indirizzi, percorsi e frammenti di codice
     sono stringhe senza spazi e non sanno andare a capo da sole. */
  .docs-sec p,.docs-sec li,.docs-note,.docs-mode span{overflow-wrap:anywhere;}
  .docs-sec code{
    overflow-wrap:anywhere;word-break:break-all;
    font-size:12px;
  }
}

/* ============================================================================
   39. GRAFICO SU MOBILE — legenda e bottone di reset
   ============================================================================
   Sul telefono la riga O/H/L/C piu' la variazione percentuale non ci sta in
   larghezza: l'ultimo valore finiva mezzo tagliato e si sovrapponeva
   all'etichetta rossa del prezzo disegnata dal grafico. Qui la legenda va a
   capo su piu' righe e la percentuale sta su una riga sua, cosi' non si
   scontra con niente.
   ========================================================================= */
@media (max-width:640px){
  /* ---- la legenda esce dall'area dei dati ----
     Sul desktop e' sovrapposta in alto a sinistra e va bene: il grafico e' alto
     340px e le candele hanno spazio sotto. Su un telefono il riquadro e' alto
     208px, e tre righe di legenda sovrapposte coprivano proprio la parte dove
     stanno i dati: le candele passavano SOTTO le scritte e non si leggeva ne'
     l'una ne' l'altra cosa.
     Qui il riquadro diventa una colonna: legenda sopra, grafico sotto, niente
     sovrapposizione. Il canvas si misura da solo (vedi chart-engine.js, che
     osserva #priceChart e non il wrap). */
  .chart-wrap{
    display:flex;flex-direction:column;
    height:250px;   /* 208 di grafico + la legenda sopra */
  }
  .chart-ohlc-legend{
    position:static;order:-1;flex:0 0 auto;
    max-width:none;padding:7px 9px 5px;
    font-size:10px;line-height:1.4;
    text-shadow:none;   /* non serve piu': non sta piu' sopra ai dati */
    border-bottom:1px solid var(--hairline);
  }
  .chart-wrap > div[id$="PriceChart"],
  .chart-wrap > #priceChart{flex:1 1 auto;min-height:0;height:auto !important;}
  /* La riga va a capo da sola dentro il max-width: la percentuale finisce
     accanto alla chiusura sulla seconda riga invece di occuparne una terza.
     Su un grafico alto 210px ogni riga di legenda e' spazio tolto ai dati. */
  .chart-ohlc-legend .ol-row{gap:5px;row-gap:1px;}
  .chart-ohlc-legend .ol-head{font-size:9px;letter-spacing:.05em;}

  /* Stava sopra l'asse dei tempi e ne copriva le etichette. Si alza quanto
     basta a liberarlo, restando in basso a destra: in alto darebbe fastidio
     alla scala dei prezzi, che li' scrive i suoi valori. */
  .chart-reset{
    right:8px;bottom:28px;
    padding:3px 8px;font-size:10px;
  }
}

/* ============================================================================
   40. SEZIONI DEI DOCS — il padding che mancava
   ============================================================================
   Nella sezione 8 .docs-sec e' stata inclusa fra gli elementi che diventano
   card: bordo, raggio, sfondo vetro, ombra. Ma il padding orizzontale non
   gliel'ha dato nessuno, perche' nel disegno originale era un semplice blocco
   di testo separato da una riga in basso (padding:0 0 24px) e li' andava bene.
   Da quando ha un bordo intorno, il testo ci finisce appiccicato: misurato a
   393px, le righe arrivavano a 2-4px dal bordo su entrambi i lati e sembrava
   uscissero dal riquadro.
   ========================================================================= */
.docs-sec{
  padding:18px 20px 20px;
  /* La riga di separazione in basso non ha piu' senso ora che ogni sezione ha
     un contorno suo: sommate, si vedeva un doppio bordo. */
  border-bottom-width:1px;
}
@media (max-width:640px){
  .docs-sec{padding:14px 14px 16px;}
  .docs-sec h3{font-size:16px;}
}

/* ============================================================================
   41. GRAFICO — riquadro grande e intestazione da terminale
   ============================================================================
   Il riquadro era alto 260px sul desktop e 250 su mobile: troppo poco perche'
   una serie di candele si legga: con quaranta candele in 200px di altezza
   utile i corpi diventano trattini e i massimi si schiacciano.
   L'intestazione non e' piu' sovrapposta ai dati: e' una barra sopra il
   grafico, con a sinistra cosa si sta guardando e a destra i tre numeri che
   si cercano davvero — market cap, prezzo in nativo, prezzo in dollari.
   L'O/H/L/C resta, ma su una riga sua e attenuato: serve muovendo il
   crosshair, non a colpo d'occhio.
   ========================================================================= */
/* L'ALTEZZA SEGUE LO SCHERMO, NON UN NUMERO FISSO.
   440 pixel fissi erano poco: accanto a una tabella di scambi lunga il doppio
   il grafico sembrava una miniatura, e su un monitor grande restava una
   miniatura lo stesso mentre sotto avanzava spazio vuoto. Su un terminale il
   grafico e' la cosa piu' grande della pagina. Con clamp() cresce con la
   finestra e resta dentro due limiti: mai sotto i 460 (le candele tornano
   illeggibili) e mai sopra i 760 (oltre, la tabella finisce fuori schermo e
   per vedere gli scambi bisogna scorrere ogni volta). */
.chart-wrap{
  height:clamp(460px, 58vh, 760px);
  display:flex;flex-direction:column;
}
.chart-wrap > #priceChart,
.chart-wrap > #stkPriceChart{flex:1 1 auto;min-height:0;height:auto !important;}

.chart-ohlc-legend{
  position:static;order:-1;flex:0 0 auto;
  max-width:none;margin:0;padding:9px 12px 8px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  border-bottom:1px solid var(--hairline);
  text-shadow:none;pointer-events:none;
  font-family:var(--font-mono);font-size:12px;line-height:1.4;
}
.chart-ohlc-legend .ol-left{display:flex;align-items:baseline;gap:8px;margin-right:auto;}
.chart-ohlc-legend .ol-title{color:var(--text-dim);font-size:12px;}
.chart-ohlc-legend .ol-tf{
  color:var(--text-mute);font-size:11px;letter-spacing:.04em;
}
.chart-ohlc-legend .ol-right{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
/* Il market cap e' il numero grosso: e' quello che si guarda per primo. */
.chart-ohlc-legend .ol-mcap{color:var(--text);font-size:16px;font-weight:600;letter-spacing:-.01em;}
.chart-ohlc-legend .ol-px{color:var(--text-dim);font-size:11.5px;}
.chart-ohlc-legend .ol-sep{color:var(--text-mute);}
.chart-ohlc-legend .ol-chg{font-size:12px;font-weight:600;margin-left:2px;}
/* Il periodo su cui e' calcolata la percentuale, subito dopo di essa. Un
   "+412%" senza un periodo accanto e' un numero che ognuno legge come gli
   pare: piccolo e smorto perche' e' l'unita' di misura, non il dato. */
.chart-ohlc-legend .ol-span{color:var(--text-mute);font-size:10.5px;letter-spacing:.03em;}
/* Riga secondaria, a tutta larghezza sotto le altre due. */
.chart-ohlc-legend .ol-ohlc{
  flex-basis:100%;display:flex;flex-wrap:wrap;gap:3px 11px;
  color:var(--text-mute);font-size:11px;
}
.chart-ohlc-legend .ol-ohlc b{color:var(--text-dim);font-weight:600;}

@media (max-width:640px){
  /* Sul telefono il grafico si prende meta' schermo abbondante: e' la cosa
     che si guarda, e la tabella sta comunque uno scorrimento piu' giu'. */
  .chart-wrap{height:clamp(340px, 52vh, 520px);}
  .chart-ohlc-legend{padding:8px 10px 7px;gap:3px 10px;font-size:11px;}
  .chart-ohlc-legend .ol-mcap{font-size:14px;}
  .chart-ohlc-legend .ol-px{font-size:10.5px;}
  .chart-ohlc-legend .ol-ohlc{font-size:10px;gap:2px 9px;}
  .chart-reset{bottom:8px;}
}

/* ---- il bottone del tema ---- */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;padding:0;
  border-radius:var(--v2-r-sm);background:var(--panel);
  border:1px solid var(--v2-edge);color:var(--text-dim);cursor:pointer;
  transition:color .14s var(--v2-ease),border-color .14s var(--v2-ease);
}
.theme-btn:hover{color:var(--text);border-color:var(--v2-edge-hi);}

/* ---- il bottone dell'unita' ($ o nativo) ----
   Stessa scatola del tema, perche' e' la stessa famiglia di scelte: come si
   guarda il sito. Dentro c'e' testo e non un'icona — il simbolo cambia con la
   rete e disegnarne cinque non avrebbe senso — quindi la larghezza e' minima
   e non fissa, cosi' "BNB" ci sta senza uscire e "$" non balla. */
.unit-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;flex-shrink:0;padding:0 9px;
  border-radius:var(--v2-r-sm);background:var(--panel);
  border:1px solid var(--v2-edge);color:var(--text-dim);cursor:pointer;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  transition:color .14s var(--v2-ease),border-color .14s var(--v2-ease);
}
.unit-btn:hover{color:var(--text);border-color:var(--v2-edge-hi);}
/* In dollari il bottone e' acceso: e' lo stato in cui i numeri NON sono nella
   moneta della catena, e vale la pena che si veda a colpo d'occhio. */
.unit-btn[aria-pressed="true"]{color:var(--text);}
.theme-btn .theme-ico{width:17px;height:17px;}
/* Si mostra l'icona di DOVE SI VA, non di dove si e': sul tema scuro il
   bottone offre il sole, sul chiaro offre la luna. */
.theme-ico-sun{display:block;}
.theme-ico-moon{display:none;}
@media (max-width:344px){
  /* Solo sugli schermi davvero stretti (Fold chiuso e simili) lo spazio va ai
     controlli indispensabili. A 360 e 393px ci sta: misurato, i cinque
     controlli piu' spaziature chiedono 347px e a 360 ne restano liberi 13. */
  .theme-btn{display:none;}
}
/* Il selettore dell'unita' cede lo spazio prima del tema: cambiare moneta e'
   una scelta che si fa una volta, cambiare tema si guarda subito. Sotto i
   400px la barra ha gia' cinque controlli. */
@media (max-width:400px){
  .unit-btn{display:none;}
}

/* ============================================================================
   43. BOTTONI — correzioni viste sul tema chiaro
   ============================================================================ */

/* Il testo non era centrato in verticale: il bottone ha altezza fissa
   (--control-h) E un padding verticale di 9px. Sommati, il riquadro del
   contenuto resta piu' basso della riga di testo, che quindi sborda e si
   appoggia in alto invece di stare al centro. Con altezza fissa il padding
   verticale non serve: centra il flex. */
.btn-connect{padding:0 16px;line-height:1;}

/* ============================================================================
   44. PANNELLO ACCOUNT E SCHEDA WALLET
   ============================================================================ */
.ac-modal{position:relative;max-width:460px;width:100%;}
.ac-close{
  position:absolute;top:10px;right:12px;width:30px;height:30px;
  background:transparent;border:0;color:var(--text-mute);font-size:22px;
  line-height:1;cursor:pointer;
}
.ac-close:hover{color:var(--text);}
.ac-title{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px;}
.ac-field{display:block;margin-bottom:12px;}
.ac-field span{
  display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;font-weight:500;
}
.ac-field input,.ac-field textarea{
  width:100%;background:var(--bg-1);border:1px solid var(--hairline-strong);
  color:var(--text);padding:11px 13px;border-radius:var(--v2-r-sm);
  font-size:15px;font-family:inherit;
}
.ac-field textarea{resize:vertical;font-family:var(--font-mono);font-size:13px;}
.ac-field input:focus,.ac-field textarea:focus{
  outline:none;border-color:var(--green-border);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.12);
}
.ac-wide{width:100%;margin-top:8px;}
.ac-link{
  display:block;width:100%;margin-top:10px;background:transparent;border:0;
  color:var(--text-dim);font-size:13px;cursor:pointer;
}
.ac-link:hover{color:var(--text);}
.ac-sep{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-mute);font-size:12px;}
.ac-sep::before,.ac-sep::after{content:"";flex:1;height:1px;background:var(--hairline);}
.ac-fine{font-size:12.5px;color:var(--text-mute);line-height:1.6;margin-top:12px;}
.ac-error{
  background:var(--sell-bg);border:1px solid var(--sell-border);color:var(--sell);
  padding:9px 12px;border-radius:var(--v2-r-sm);font-size:13px;margin-bottom:12px;
}
.ac-busy{
  background:var(--panel-2);border:1px solid var(--hairline);color:var(--text-dim);
  padding:9px 12px;border-radius:var(--v2-r-sm);font-size:13px;margin-bottom:12px;
}
.ac-warn{
  background:var(--amber-bg,rgba(217,164,65,.10));
  border:1px solid rgba(217,164,65,.30);color:var(--text-dim);
  padding:10px 12px;border-radius:var(--v2-r-sm);font-size:12.5px;
  line-height:1.6;margin:10px 0;
}
.ac-warn b{color:var(--text);}
.ac-warn-strong{border-color:var(--sell-border);background:var(--sell-bg);}

/* Righe etichetta/valore, usate sia nel backup sia nella scheda Account. */
.ac-row{
  display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.ac-lbl{flex:0 0 108px;font-size:11px;color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.06em;}
.ac-val{flex:1;min-width:0;font-size:13px;color:var(--text);}
/* Seed e chiavi vanno a capo: sono stringhe lunghe e senza spazi, e troncarle
   sarebbe peggio che inutile — l'utente deve poterle leggere per intero. */
.ac-mono{font-family:var(--font-mono);font-size:12.5px;overflow-wrap:anywhere;
  user-select:all;}

.ac-panel{padding:2px;}
.ac-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px;}
.ac-secrets{margin-top:12px;}
.ac-note{font-size:12.5px;color:var(--text-mute);line-height:1.6;margin-top:12px;}
.ac-note b{color:var(--text-dim);}

@media (max-width:640px){
  .ac-modal{max-width:none;}
  .ac-row{flex-direction:column;gap:3px;}
  .ac-lbl{flex:none;}
  .ac-actions .qa-btn{flex:1 1 calc(50% - 4px);}
}

/* ---- pannello account: resa piu' curata ----
   La prima versione era una pila di rettangoli tutti uguali: stessa altezza,
   stesso peso, nessuna gerarchia. Qui l'azione principale resta piena, le
   secondarie diventano piu' leggere, e le due strade (crea account / usa un
   wallet tuo) sono visibilmente separate. */
.ac-modal{padding:22px 22px 20px;}
.ac-title{
  font-family:var(--font-display);font-size:21px;letter-spacing:-.03em;
  margin:0 0 4px;
}
.ac-sub{
  font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 18px;
}
#acChoose .btn-enter{
  height:48px;font-size:15px;letter-spacing:-.01em;margin-bottom:9px;
}
#acChoose .qa-btn{
  height:46px;font-size:14px;border-radius:var(--v2-r-sm);
  background:transparent;border:1px solid var(--v2-edge);color:var(--text-dim);
  font-family:inherit;letter-spacing:0;
}
#acChoose .qa-btn:hover{border-color:var(--v2-edge-hi);color:var(--text);}
/* Il bottone dei wallet esterni porta i due marchi: si riconosce prima di
   leggerlo, ed e' il motivo per cui esiste. */
.ac-wallet-btn{display:flex;align-items:center;justify-content:center;gap:9px;}
.ac-wallet-icons{display:inline-flex;align-items:center;gap:5px;}
.ac-wallet-icons svg{width:17px;height:17px;display:block;}
.ac-sep{margin:16px 0 12px;}
.ac-fine{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:12px;line-height:1.6;
}

/* ---- pannello account: gerarchia e marchi dei wallet ---- */
.ac-modal{padding:22px 22px 20px;max-width:440px;}
.ac-title{font-family:var(--font-display);font-size:21px;letter-spacing:-.03em;margin:0 0 6px;}
.ac-sub{font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 16px;}

/* Azione principale: due righe, cosi' dice anche quanto costa in tempo. */
.ac-primary{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;padding:12px;border:0;border-radius:var(--v2-r-sm);cursor:pointer;
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  color:var(--on-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--v2-accent-glow);
  transition:transform .16s var(--v2-ease),filter .16s var(--v2-ease);
}
.ac-primary:hover{transform:translateY(-1px);filter:brightness(1.04);}
.ac-primary-t{font-family:var(--font-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;}
.ac-primary-s{font-size:11.5px;opacity:.75;font-weight:500;}

.ac-link-btn{
  display:block;width:100%;margin-top:9px;padding:11px;
  background:transparent;border:1px solid var(--v2-edge);border-radius:var(--v2-r-sm);
  color:var(--text-dim);font-size:13.5px;font-family:inherit;cursor:pointer;
  transition:border-color .14s var(--v2-ease),color .14s var(--v2-ease);
}
.ac-link-btn:hover{border-color:var(--v2-edge-hi);color:var(--text);}

/* I due wallet esterni, affiancati: si riconoscono dal contrassegno prima che
   dal testo, ed e' il motivo per cui hanno un bottone ciascuno invece di
   un'etichetta astratta tipo "connetti wallet". */
.ac-wallets{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ac-wallet{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 8px;border-radius:var(--v2-r-sm);cursor:pointer;
  background:var(--panel-2);border:1px solid var(--v2-edge);
  color:var(--text-dim);font-size:13px;font-family:inherit;
  transition:border-color .14s var(--v2-ease),color .14s var(--v2-ease);
}
.ac-wallet:hover{border-color:var(--v2-edge-hi);color:var(--text);}
.ac-wallet-mark{width:16px;height:16px;border-radius:5px;flex-shrink:0;display:block;}
/* Contrassegni cromatici, non i loghi dei marchi: quelli sono materiale
   altrui e non vanno ridisegnati a mano. */
.ac-mark-mm{background:linear-gradient(140deg,#f6851b,#e2761b);}
.ac-mark-ph{background:linear-gradient(140deg,#ab9ff2,#8a7cf0);}

.ac-sep{margin:16px 0 12px;}
.ac-fine{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:12px;line-height:1.6;color:var(--text-mute);
}

/* Loghi dei wallet: senza una misura esplicita un SVG in un flex si prende
   tutta l'altezza disponibile, ed erano usciti grandi quanto il bottone. */
.ac-wlogo{width:20px;height:20px;flex-shrink:0;display:block;}
.ac-wallet{gap:9px;padding:12px 10px;}
.ac-wallet span{font-size:13.5px;}
/* L'azione principale ora e' una riga sola: niente sottotitolo da centrare. */
.ac-primary{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.01em;padding:14px;}

/* Sign in aveva il corpo del testo piu' grande di Sign up: ereditava la
   dimensione del bottone generico, mentre l'azione principale ha la sua.
   Ora la coppia e' allineata — l'unica differenza deve essere il peso, non
   la misura. */
#acChoose .ac-primary,
#acChoose .ac-link-btn{
  font-size:15.5px;font-family:var(--font-display);letter-spacing:-.01em;
  padding:14px;line-height:1.2;
}
#acChoose .ac-link-btn{font-weight:500;}

/* ---- elenco dei wallet nella scheda Account ---- */
.ac-wallets-list{margin:14px 0 4px;}
.ac-wrow{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin-bottom:6px;border-radius:var(--v2-r-sm);
  background:var(--panel-2);border:1px solid var(--v2-edge);
}
.ac-wrow.is-active{border-color:var(--buy-border);background:var(--buy-bg);}
.ac-wdot{width:8px;height:8px;border-radius:50%;background:var(--text-mute);flex-shrink:0;}
.ac-wrow.is-active .ac-wdot{background:var(--buy);}
.ac-wname{font-size:13.5px;color:var(--text);font-weight:500;}
.ac-waddr{flex:1;min-width:0;font-size:12px;color:var(--text-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-wtag{font-size:10.5px;color:var(--buy);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.ac-wuse{
  padding:5px 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--v2-edge-hi);
  color:var(--text-dim);font-size:12px;font-family:inherit;
}
.ac-wuse:hover{color:var(--text);border-color:var(--text-mute);}
@media (max-width:640px){
  .ac-wrow{flex-wrap:wrap;gap:6px 8px;}
  .ac-waddr{flex-basis:100%;}
}

/* Stato della copia sul server, nella scheda Account. */
.ac-sync{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding:10px 12px;border-radius:var(--v2-r-sm);
  background:var(--panel-2);border:1px solid var(--v2-edge);
  font-size:12.5px;color:var(--text-mute);line-height:1.5;
}
.ac-sync-t{flex:1;min-width:0;}
.ac-sync.ok{border-color:var(--buy-border);background:var(--buy-bg);color:var(--text-dim);}
.ac-sync.warn{border-color:var(--sell-border);background:var(--sell-bg);color:var(--text-dim);}

/* ---- tabella delle ricompense stock ---- */
.sr-table{border:1px solid var(--v2-edge);border-radius:var(--v2-r-sm);overflow:hidden;}
.sr-head,.sr-row{
  display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 1fr auto;
  gap:12px;align-items:center;padding:11px 14px;
}
.sr-head{
  background:rgba(255,255,255,.022);border-bottom:1px solid var(--v2-edge);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);
}
.sr-row{border-bottom:1px solid var(--hairline);}
.sr-row:last-child{border-bottom:0;}
.sr-token{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sr-sym{font-weight:600;font-size:13.5px;color:var(--text);}
.sr-pays{font-size:11.5px;color:var(--text-mute);}
.sr-num{display:flex;flex-direction:column;gap:2px;text-align:right;}
.sr-head .sr-num{text-align:right;}
.sr-lbl{display:none;}
.sr-v{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);}
/* Solo cio' che si puo' riscuotere ora e' acceso: e' l'unico numero su cui
   si puo' agire, e deve saltare all'occhio in una colonna di cifre. */
.sr-live{color:var(--buy);font-weight:600;}
.sr-act{text-align:right;}
.sr-none{color:var(--text-mute);}
.sr-claim{padding:6px 13px;font-size:12.5px;}

@media (max-width:640px){
  /* Quattro colonne su un telefono danno celle da 70px: la tabella si
     impila e ogni numero si porta dietro la sua etichetta. */
  .sr-head{display:none;}
  .sr-row{grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 14px;}
  .sr-token{grid-column:1/-1;}
  .sr-num{text-align:left;}
  .sr-lbl{display:block;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--text-mute);}
  .sr-act{grid-column:1/-1;text-align:left;}
  .sr-claim{width:100%;}
}

/* ---- intestazione del profilo: l'avatar non tocca piu' il banner ----
   .pf-head e' un flex con align-items:flex-end, quindi il fondo dell'avatar si
   allineava al fondo della colonna di testo. Quella colonna cambia altezza
   (nome, ruolo, bottoni), e l'avatar veniva spinto in giu' fino a incollarsi
   al bordo inferiore del banner — l'effetto "attaccato" che si vede.
   Ancorandolo in alto la sovrapposizione e' sempre la stessa, e il bordo
   spesso dell'avatar la stacca dal banner invece di combaciarci. */
.pf-head{align-items:flex-start;}
.pf-avatar{
  margin-top:6px;
  border-width:4px;
  box-shadow:0 0 0 1px var(--border),0 6px 18px -8px rgba(0,0,0,.7);
}
.pf-ident{padding-top:52px;}
@media (max-width:640px){
  /* Su telefono la colonna va sotto l'avatar: niente rientro. */
  .pf-ident{padding-top:8px;}
  .pf-avatar{width:72px;height:72px;font-size:24px;}
}

/* Badge dello stock token nella lista unificata. Le due liste sono unite,
   quindi serve un modo per distinguere a colpo d'occhio una riga che paga
   dividendi da una normale. Colore d'accento della chain, non verde/rosso:
   non e' un segnale di prezzo. */
.tok-tag.stock{
  background:rgba(var(--green-rgb),.12);
  color:var(--green);
  border:1px solid rgba(var(--green-rgb),.30);
}

/* Il filtro "Stocks" fra le schede: si distingue appena, perche' e' un taglio
   della lista e non un ordinamento come gli altri. */
.feed-tab-stock.active{border-color:var(--green-border);}
/* Card del trending che e' uno stock token. */
.trend-card.is-stock .trend-sym .tr-dot{opacity:.5;margin:0 2px;}

/* ---- curva classica ---- */
/* Badge nella lista: dice l'unica cosa che conta a chi sta per comprare. */
/* Classic: neutro. Non e' un token peggiore, e' un token diverso; il rosso
   lo faceva sembrare un avvertimento di pericolo su ogni riga. */
.tok-tag.classic{
  background:rgba(148,163,184,.12);color:var(--text-dim);
  border:1px solid var(--v2-edge-hi);
}
/* Refundable: nel colore della piattaforma. E' la caratteristica che
   distingue questo launchpad, quindi va detta, non sottintesa. */
.tok-tag.protected{
  background:var(--buy-bg);color:var(--buy);
  border:1px solid var(--buy-border);
}
/* Avviso nella pagina token: non allarmista, ma impossibile da non vedere. */
.curve-note{border-color:var(--sell-border);background:var(--sell-bg);}
.curve-note-t{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sell);margin-bottom:5px;
}
.curve-note-b{font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.curve-note-b strong{color:var(--text);}
/* "consigliata" accanto all'opzione protetta. */
.opt-tag{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 6px;border-radius:6px;margin-left:6px;
  background:var(--buy-bg);color:var(--buy);
}
.hint.warn{color:var(--sell);}

/* ============================================================================
   TERMINAL — leggibilita' e segnale
   ============================================================================ */
.tm-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--v2-r-sm);border:1px solid transparent;
  transition:background .12s var(--v2-ease),border-color .12s var(--v2-ease);
}
.tm-row:hover{background:rgba(255,255,255,.035);border-color:var(--v2-edge);}
/* Creato da meno di un'ora: un filo sul bordo, non un fondo colorato che
   griderebbe su sessanta righe. */
.tm-row.is-fresh{box-shadow:inset 2px 0 0 var(--green);}
.tm-fresh{color:var(--green);font-weight:600;}
.tm-img{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  background-size:cover;background-position:center;
  background-color:var(--panel-2);border:1px solid var(--v2-edge);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--text-mute);
}
.tm-mid{flex:1;min-width:0;}
.tm-name{display:flex;align-items:baseline;gap:6px;min-width:0;}
.tm-sym{font-weight:600;font-size:13px;color:var(--text);flex-shrink:0;}
.tm-full{font-size:12px;color:var(--text-mute);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tm-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 5px;border-radius:6px;flex-shrink:0;
}
.tm-badge.stock{background:rgba(var(--green-rgb),.14);color:var(--green);}
.tm-meta{display:flex;align-items:center;gap:9px;margin-top:2px;
  font-size:11px;color:var(--text-mute);font-family:var(--font-mono);}
.tm-meta b{color:var(--text-dim);font-weight:600;}
/* Pieno = ha canali, vuoto = non ne ha. Un simbolo invece di una parola: in una
   riga densa il testo compete con i numeri. */
.tm-ok{color:var(--buy);}
.tm-no{color:var(--text-mute);opacity:.6;}
.tm-warn{color:var(--sell);background:var(--sell-bg);
  padding:0 4px;border-radius:3px;font-weight:600;}
.tm-check{display:flex;align-items:center;gap:7px;grid-column:1/-1;
  font-size:12px;color:var(--text-dim);cursor:pointer;}
.tm-check input{width:15px;height:15px;accent-color:var(--green);cursor:pointer;}

/* ============================================================================
   CHAT DEL TOKEN
   ============================================================================ */
.cm-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:10px;padding:2px 2px 8px;}
.cm-empty{color:var(--text-mute);font-size:13px;padding:14px 2px;text-align:center;}
.cm-row{padding:9px 11px;border-radius:var(--v2-r-sm);
  background:var(--panel-2);border:1px solid var(--v2-edge);}
/* I propri messaggi si distinguono senza allinearli a destra: in una lista
   fitta l'allineamento alternato e' piu' faticoso da leggere che utile. */
.cm-row.is-me{border-color:rgba(var(--green-rgb),.28);background:rgba(var(--green-rgb),.05);}
.cm-head{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.cm-who{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);cursor:pointer;}
.cm-who:hover{color:var(--text);}
.cm-who.dev{color:var(--green);}
.cm-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 5px;border-radius:6px;background:var(--green-bg);color:var(--green);}
.cm-time{font-size:10.5px;color:var(--text-mute);margin-left:auto;}
.cm-body{font-size:13.5px;color:var(--text);line-height:1.5;overflow-wrap:anywhere;}
.cm-box{display:flex;gap:8px;align-items:flex-end;margin-top:10px;}
.cm-box textarea{
  flex:1;resize:none;min-height:38px;max-height:96px;
  background:var(--bg-1);border:1px solid var(--hairline-strong);
  color:var(--text);border-radius:var(--v2-r-sm);padding:10px 12px;
  font-family:inherit;font-size:14px;line-height:1.4;
}
.cm-box textarea:focus{outline:none;border-color:var(--green-border);}
.cm-box .qa-btn{height:38px;padding:0 16px;flex-shrink:0;}
.cm-hint{font-size:11.5px;color:var(--text-mute);margin-top:7px;}
.cm-hint.warn{color:var(--sell);}

/* ============================================================================
   LEADERBOARD
   ============================================================================ */
.lb-prize{padding:13px 15px;border-radius:var(--v2-r-sm);margin-bottom:14px;
  background:rgba(var(--green-rgb),.07);border:1px solid rgba(var(--green-rgb),.22);}
.lb-prize-t{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green);}
.lb-prize-b{font-size:12.5px;color:var(--text-dim);line-height:1.6;margin-top:4px;}
.lb-prize-b strong{color:var(--text);}
.lb-table{border:1px solid var(--v2-edge);border-radius:var(--v2-r-sm);overflow:hidden;}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--hairline);}
.lb-row:last-child{border-bottom:0;}
.lb-row:hover{background:rgba(255,255,255,.03);}
/* I primi dieci prendono il premio: la riga lo dice da sola. */
.lb-row.in-prize{box-shadow:inset 2px 0 0 rgba(var(--green-rgb),.5);}
.lb-pos{width:26px;flex-shrink:0;text-align:center;
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-mute);}
.lb-pos.gold{color:#f0b90b;}
.lb-pos.silver{color:#c3cbd6;}
.lb-pos.bronze{color:#cd7f32;}
.lb-main{flex:1;min-width:0;}
.lb-name{font-size:13.5px;font-weight:600;color:var(--text);}
.lb-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 5px;border-radius:6px;background:var(--buy-bg);color:var(--buy);margin-left:6px;}
.lb-sub{font-size:11.5px;color:var(--text-mute);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-right{text-align:right;flex-shrink:0;}
.lb-val{font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--text);}

@media (max-width:640px){
  .tm-row{padding:10px;gap:9px;}
  .tm-full{display:none;}
  .tm-meta{gap:7px;font-size:10.5px;}
  .cm-list{max-height:280px;}
  /* 16px: sotto quella misura iOS ingrandisce la pagina al focus. */
  .cm-box textarea{font-size:16px;}
  .lb-row{padding:11px;gap:9px;}
  .lb-pos{width:20px;font-size:12px;}
  .lb-sub{font-size:10.5px;}
}

/* ============================================================================
   46. TOKEN PAGE v2
   ============================================================================
   La vecchia pagina impilava nove card senza gerarchia: grafico, contratti,
   holder, referral e migrazione forzata avevano tutte lo stesso peso, e chi
   arrivava non sapeva dove guardare per primo.
   Qui l'ordine e': chi e' (intestazione) -> come va (numeri + schede) ->
   cosa posso farci (colonna destra). Le azioni secondarie ci sono ancora,
   ma raccolte in un blocco invece che sparse fra i contenuti.
   ========================================================================= */

.tk2-head{
  display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:14px;
  background:linear-gradient(180deg,var(--panel),var(--bg-1));
  border:1px solid var(--border);border-radius:16px;
}
.tk2-img{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--panel-2);border:1px solid var(--border-2);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:21px;color:var(--text-mute);
}
.tk2-id{flex:1;min-width:0;}
.tk2-name-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.tk2-name{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.tk2-sym{
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
  padding:2px 7px;border-radius:6px;background:var(--panel-2);border:1px solid var(--border);
}
.tk2-meta{display:flex;align-items:center;gap:7px;margin-top:5px;
  font-size:11.5px;color:var(--text-mute);flex-wrap:wrap;}
.tk2-meta a{color:var(--text-mute);text-decoration:none;border-bottom:1px dotted var(--border-2);}
.tk2-meta a:hover{color:var(--text-dim);}
.tk2-dot{opacity:.4;}
.tk2-px{text-align:right;flex-shrink:0;}
.tk2-px-v{font-family:var(--font-mono);font-size:23px;font-weight:700;
  color:var(--text);line-height:1;letter-spacing:-.02em;}
.tk2-px-l{font-size:10.5px;color:var(--text-mute);margin-top:5px;}
.tk2-btns{display:flex;gap:8px;flex-shrink:0;}
.tk2-ib{
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:15px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.tk2-ib:hover{color:var(--text);border-color:var(--border-2);}

/* Numeri chiave: una fascia continua, non riquadri staccati. */
.tk2-kpi{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.tk2-kpi>div{padding:13px 18px;border-right:1px solid var(--hairline);min-width:0;}
.tk2-kpi>div:last-child{border-right:0;}
.tk2-k{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);}
.tk2-v{font-family:var(--font-mono);font-size:17px;font-weight:700;
  color:var(--text);margin-top:4px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk2-v.accent{color:var(--green);}
.tk2-subbar{height:3px;border-radius:2px;background:var(--panel-2);margin-top:7px;overflow:hidden;}
.tk2-subbar-fill{height:100%;background:var(--green);border-radius:2px;width:0;}

.tk2-body{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:14px;align-items:start;}
.tk2-main{min-width:0;}
.tk2-card{padding:0;overflow:hidden;}

/* Schede: grafico, scambi, chat, holder e dettagli sono lo stesso tipo di
   contenuto, quindi vivono nello stesso contenitore invece di cinque card
   impilate. La pagina diventa corta e si naviga. */
.tk2-tabs{display:flex;gap:2px;padding:0 18px;border-bottom:1px solid var(--border);overflow-x:auto;}
.tk2-tab{
  padding:12px 14px;cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap;
  color:var(--text-mute);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tk2-tab:hover{color:var(--text-dim);}
.tk2-tab.active{color:var(--text);border-bottom-color:var(--green);}
.tk2-n{font-size:10px;color:var(--text-mute);margin-left:4px;}
.tk2-pane{padding:16px 18px;}

/* Colonna operativa: resta a schermo mentre si scorre, perche' comprare e'
   l'azione principale e risalire ogni volta e' un attrito inutile. */
.tk2-side{position:sticky;top:16px;}
.tk2-side>.card{margin-bottom:14px;}

/* Azioni secondarie raccolte. */
.tk2-acts{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;margin-bottom:14px;
}
.tk2-act{
  display:flex;align-items:center;gap:11px;padding:13px 16px;width:100%;
  border:0;border-bottom:1px solid var(--hairline);background:none;
  cursor:pointer;text-align:left;font-family:inherit;
}
.tk2-act:last-child{border-bottom:0;}
.tk2-act:hover{background:rgba(255,255,255,.02);}
.tk2-act:disabled{cursor:default;}
.tk2-act:disabled .tk2-act-n,.tk2-act:disabled .tk2-act-i{opacity:.5;}
.tk2-act-i{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;font-size:13px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
.tk2-act-t{flex:1;min-width:0;display:block;}
.tk2-act-n{display:block;font-size:12.5px;font-weight:600;color:var(--text);}
.tk2-act-d{display:block;font-size:10.5px;color:var(--text-mute);margin-top:1px;}
.tk2-act-c{color:var(--text-mute);font-size:13px;flex-shrink:0;}

@media (max-width:1024px){
  .tk2-body{grid-template-columns:minmax(0,1fr);}
  /* Su schermi stretti il pannello non e' piu' appiccicato: occuperebbe
     mezza pagina. */
  .tk2-side{position:static;}
  .tk2-kpi{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tk2-kpi>div:nth-child(3n){border-right:0;}
  .tk2-kpi>div:nth-child(n+4){border-top:1px solid var(--hairline);}
}
@media (max-width:640px){
  .tk2-head{flex-wrap:wrap;gap:12px;padding:14px;}
  .tk2-id{order:2;flex:1 1 100%;}
  .tk2-px{order:3;text-align:left;flex:1;}
  .tk2-btns{order:4;}
  .tk2-name{font-size:17px;}
  .tk2-px-v{font-size:20px;}
  .tk2-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tk2-kpi>div{padding:11px 13px;}
  .tk2-kpi>div:nth-child(3n){border-right:1px solid var(--hairline);}
  .tk2-kpi>div:nth-child(2n){border-right:0;}
  .tk2-kpi>div:nth-child(n+3){border-top:1px solid var(--hairline);}
  .tk2-v{font-size:15px;}
  .tk2-pane{padding:14px;}
  .tk2-tabs{padding:0 12px;}
  .tk2-tab{padding:11px 10px;font-size:12px;}
}

/* ---- TERMINAL: barra di controllo unica ----
   I filtri stavano dentro ogni colonna, dietro un'icona: per chiedere "solo
   quelli con social" bisognava aprire tre pannelli identici. Qui valgono per
   tutte e tre le colonne insieme. */
.tmx-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 13px;margin-bottom:12px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
}
.tmx-search{
  flex:1;min-width:180px;padding:7px 12px;border-radius:10px;
  background:var(--bg-1);border:1px solid var(--hairline-strong);
  color:var(--text);font-family:inherit;font-size:13px;outline:none;
}
.tmx-search:focus{border-color:var(--green-border);}
.tmx-f{
  padding:6px 12px;border-radius:10px;cursor:pointer;font-size:12px;font-family:inherit;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
}
.tmx-f:hover{color:var(--text);border-color:var(--border-2);}
.tmx-f.on{background:var(--green-bg);border-color:var(--green-border);color:var(--green);}
.tmx-count{font-size:11.5px;color:var(--text-mute);font-family:var(--font-mono);margin-left:auto;}
@media (max-width:640px){
  .tmx-search{flex:1 1 100%;font-size:16px;}  /* 16px: sotto, iOS ingrandisce */
  .tmx-count{margin-left:0;}
}


/* Le icone filtro dentro ogni colonna sono ridondanti da quando c'e' la barra
   in cima: tre pannelli identici per la stessa domanda. Nascoste, non
   rimosse dal markup — il codice che le gestisce resta valido e i filtri per
   colonna continuano a funzionare se un giorno servissero di nuovo. */
.tm-filter-btn{display:none;}

/* Avanzamento verso il bond: una riga sotto le schede, non due valori uguali
   a mezza pagina di distanza come prima. */
.tk2-bond{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--border);}
.tk2-bond-bar{flex:1;height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;}
.tk2-bond-bar>span{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--green-dim),var(--green));transition:width .3s var(--v2-ease);}
.tk2-bond-t{font-size:11.5px;color:var(--text-mute);white-space:nowrap;}
.tk2-bond-t b{color:var(--green);font-family:var(--font-mono);font-size:13px;}

/* Sei celle: due righe da tre. */
.tk2-kpi{grid-template-columns:repeat(3,minmax(0,1fr));}
.tk2-kpi>div:nth-child(3n){border-right:0;}
.tk2-kpi>div:nth-child(n+4){border-top:1px solid var(--hairline);}
@media (max-width:640px){
  .tk2-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tk2-kpi>div:nth-child(3n){border-right:1px solid var(--hairline);}
  .tk2-kpi>div:nth-child(2n){border-right:0;}
  .tk2-kpi>div:nth-child(n+3){border-top:1px solid var(--hairline);}
}
/* La riga di force migration non deve mai sfondare il blocco. */
.tk2-act-d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk2-act-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Tipo di curva nell'intestazione del token: una parola non merita una cella
   intera nella fascia, ma va detta subito a chi apre la pagina. */
.tk2-curve-badge{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:5px;
}
.tk2-curve-badge.protected{background:var(--buy-bg);color:var(--buy);}
.tk2-curve-badge.classic{background:rgba(148,163,184,.14);color:var(--text-dim);}

/* La nota di modalita' c'e' su OGNI token, quindi il colore deve distinguere
   l'informazione dall'avvertenza: rosso solo dove si puo' perdere per il
   movimento del prezzo (curva classica), neutro altrove. Un banner rosso su
   tutto smette di voler dire "attenzione" dopo il terzo token. */
.curve-note{border-color:var(--border);background:var(--panel);}
.curve-note .curve-note-t{color:var(--text-dim);}
.curve-note.warn{border-color:var(--sell-border);background:var(--sell-bg);}
.curve-note.warn .curve-note-t{color:var(--sell);}

/* ---- divisori della lista token ----
   Il bordo delle righe era rgba(255,255,255,.045): praticamente invisibile su
   fondo scuro, e la lista si leggeva come un blocco unico. Le card del
   Trending usano --v2-edge (.075) e li' la separazione si vede. Stessa misura
   qui, piu' il bordo esterno della tabella, cosi' la lista ha un contorno
   invece di sfumare nel fondo. */
.tok-row{border-bottom:1px solid var(--v2-edge);}
.tok-row:last-child{border-bottom:0;}

/* .tok-panel e' il contenitore che avvolge intestazione + righe. */
.tok-panel{
  border:1px solid var(--v2-edge);
  border-radius:var(--v2-r);
  overflow:hidden;
}
/* L'intestazione della tabella si stacca dalle righe. */
.tok-head{
  border-bottom:1px solid var(--v2-edge-hi,var(--v2-edge));
  background:var(--panel-2);
}

/* Stesso trattamento per le altre liste della pagina token: scambi recenti e
   holder. Erano senza contorno e senza divisori netti, quindi si leggevano
   come un blocco unico dentro la scheda. */
.trades-list,.holders-list{
  border:1px solid var(--v2-edge);
  border-radius:var(--v2-r-sm);
  /* overflow-x e -y separati, NON la scorciatoia `overflow:hidden`.
     Serviva a ritagliare gli angoli arrotondati, ma essendo una scorciatoia
     imposta anche l'asse verticale e cancellava l'`overflow-y:auto`
     dichiarato in index.html. Con max-height a 260px il risultato era una
     lista tagliata a meta' senza modo di arrivare in fondo: i vecchi scambi
     c'erano, erano solo irraggiungibili. Gli angoli restano ritagliati. */
  overflow-x:hidden;
  overflow-y:auto;
}
.tr-row{border-bottom:1px solid var(--v2-edge);padding-left:12px;padding-right:12px;}
.tr-row:last-child{border-bottom:0;}

/* ---- conferma della migrazione forzata ----
   Sostituisce il confirm() del browser, che mostrava "letstrash.fun dice" e
   i pulsanti nella lingua del sistema. Su un'azione irreversibile che costa
   una fee, i numeri vanno visti prima di firmare. */
.fb-modal{max-width:420px;text-align:center;}
.fb-icon{
  width:46px;height:46px;border-radius:13px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);
}
.fb-modal h3{margin:0 0 9px;font-size:17px;color:var(--text);}
.fb-modal p{margin:0;font-size:13px;line-height:1.6;color:var(--text-dim);}
.fb-rows{
  margin:16px 0;padding:4px 14px;border-radius:11px;
  background:var(--bg-1);border:1px solid var(--v2-edge);text-align:left;
}
.fb-row{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;}
.fb-row:last-child{border-bottom:0;}
.fb-row span{color:var(--text-mute);}
.fb-row b{color:var(--text);font-family:var(--font-mono);font-weight:600;}
.fb-note{font-size:11.5px !important;color:var(--text-mute) !important;}
.fb-btns{display:flex;gap:9px;margin-top:18px;}
.fb-btns>button{flex:1;padding:11px;border-radius:11px;font-family:inherit;
  font-size:13.5px;font-weight:600;cursor:pointer;}

/* Avviso nella finestra di conferma quando la soglia non e' ancora raggiunta.
   La finestra si apre comunque: vedere cosa fa l'azione e quanto manca e' piu'
   utile di un bottone che non risponde. */
.fb-blocked{
  margin-top:-4px;margin-bottom:14px;padding:11px 13px;border-radius:10px;
  font-size:12px;line-height:1.55;text-align:left;
  background:var(--sell-bg);border:1px solid var(--sell-border);color:var(--text-dim);
}
.fb-blocked strong{color:var(--sell);}
.fb-btns>button:disabled{opacity:.45;cursor:not-allowed;}

/* ============================================================================
   CHAT GLOBALE
   ========================================================================= */
.gc-card{padding:14px 16px;}
.gc-list{
  max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:9px;padding:2px 2px 10px;
}
.gc-row{
  padding:9px 12px;border-radius:var(--v2-r-sm);
  background:var(--panel-2);border:1px solid var(--v2-edge);
}
.gc-row.is-me{border-color:rgba(var(--green-rgb),.26);background:rgba(var(--green-rgb),.05);}
/* Il messaggio della piattaforma si distingue a colpo d'occhio: in una stanza
   aperta, sapere chi parla per il progetto e' l'informazione piu' importante. */
.gc-row.is-admin{
  border-color:var(--green-border);
  background:linear-gradient(180deg,rgba(var(--green-rgb),.1),rgba(var(--green-rgb),.03));
  box-shadow:inset 2px 0 0 var(--green);
}
.gc-head{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.gc-who{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);cursor:pointer;}
.gc-who:hover{color:var(--text);}
.gc-row.is-admin .gc-who{color:var(--green);}
.gc-badge{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 6px;border-radius:6px;background:var(--green);color:var(--on-green);
}
.gc-time{font-size:10.5px;color:var(--text-mute);margin-left:auto;}
.gc-body{font-size:13.5px;color:var(--text);line-height:1.55;overflow-wrap:anywhere;}

/* I comandi di moderazione compaiono solo passandoci sopra: sempre visibili
   sarebbero rumore su ogni riga. */
.gc-tools{display:flex;gap:4px;opacity:0;transition:opacity .15s var(--v2-ease);}
.gc-row:hover .gc-tools{opacity:1;}
.gc-t{
  width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:12px;
  background:var(--panel);border:1px solid var(--border);color:var(--text-mute);
  display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;
}
.gc-t:hover{color:var(--text);border-color:var(--border-2);}

/* Messaggio in evidenza: sopra la stanza, sempre visibile mentre si scorre. */
.gc-pin{
  position:relative;padding:12px 40px 12px 15px;border-radius:var(--v2-r-sm);margin-bottom:12px;
  background:rgba(var(--green-rgb),.07);border:1px solid rgba(var(--green-rgb),.24);
}
.gc-pin-t{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);margin-bottom:4px;
}
.gc-pin-b{font-size:13px;color:var(--text);line-height:1.55;overflow-wrap:anywhere;}
.gc-pin-x{
  position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:6px;
  background:none;border:1px solid var(--border);color:var(--text-mute);
  cursor:pointer;font-size:13px;line-height:1;font-family:inherit;
}
.gc-pin-x:hover{color:var(--text);}

@media (max-width:640px){
  .gc-list{max-height:52vh;}
  .gc-card{padding:12px;}
  /* 16px: sotto quella misura iOS ingrandisce la pagina al focus. */
  #gcInput{font-size:16px;}
  /* Su touch il passaggio del mouse non esiste: i comandi restano visibili. */
  .gc-tools{opacity:1;}
}

/* I log delle transazioni: compaiono solo quando hanno qualcosa da dire
   (logTo() toglie .hidden), e devono staccarsi dal resto della colonna. */
#stkLog:not(.hidden), #statusLog:not(.hidden), #createStatusLog:not(.hidden){
  margin-top:12px;padding:11px 13px;border-radius:var(--v2-r-sm);
  background:var(--bg-1);border:1px solid var(--v2-edge);
  font-size:12.5px;line-height:1.55;color:var(--text-dim);
  max-height:190px;overflow-y:auto;
}
#stkLog .err, #statusLog .err, #createStatusLog .err{color:var(--sell);}
#stkLog .ok, #statusLog .ok, #createStatusLog .ok{color:var(--buy);}
#stkLog .warn, #statusLog .warn, #createStatusLog .warn{color:var(--green);}


/* ==========================================================================
   v2.01 — CONTINUITA' CON LA LANDING
   --------------------------------------------------------------------------
   STA IN FONDO A v2.css PER UN MOTIVO PRECISO.
   Le stesse regole erano nel blocco <style> di index.html, che pero' viene
   caricato PRIMA di questo foglio: a parita' di specificita' vince l'ultimo,
   quindi v2.css le annullava tutte e non si vedeva alcun cambiamento. Da qui
   invece hanno l'ultima parola.
   ========================================================================== */

/* ---- 1. FONT DI SISTEMA, come la landing ----
   Era il colpevole principale dello stacco: la landing usa il font di sistema
   (San Francisco su Mac e iPhone), l'app caricava Inter e Space Grotesk da
   Google. Famiglie diverse, e il salto si sente prima di guardare il layout. */
:root{
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
body,button,input,select,textarea{font-family:var(--font-body);}

/* ---- 2. L'INTESTAZIONE IN VETRO ----
   Un fondo pieno copre la scena e la card sembra incollata sopra un'immagine.
   Traslucida e sfocata lascia passare l'orizzonte: l'elemento POGGIA sullo
   sfondo invece di nasconderlo. */
/* Piatta come tutto il resto: il gradiente, la sfocatura e l'ombra erano
   della versione precedente, in cui questa era l'intestazione della pagina.
   Ora e' una riga di dati e deve pesare come tale. Vale anche per la barra
   della sezione Stocks, che usa la stessa classe. */
.market-bar{
  text-align:left;
  padding:22px 24px 20px;
  border:1px solid var(--hairline);
  border-radius:14px;
  background:var(--panel);
  box-shadow:none;
}
.market-bar .mb-top{border-bottom:0;padding-bottom:0;}
.market-bar .hero-logo{width:24px;height:24px;opacity:.8;}

/* Il badge dice la CHAIN. Lo slogan lo ha gia' detto la landing tre secondi
   prima; su quale rete si sta, invece, serve su ogni schermata. */
.mb-kicker{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1px solid rgba(var(--green-rgb),.24);
  background:rgba(var(--green-rgb),.10);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);font-weight:600;
}
.mb-kicker::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
}
.mb-title{
  font-size:clamp(22px,3.4vw,36px);font-weight:600;letter-spacing:-.045em;
  color:var(--text);margin-top:14px;line-height:1.02;
}
.mb-grad{
  background:linear-gradient(100deg,#fff 14%,var(--green) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Spazio per la coda della "g": con background-clip:text il riquadro di
     riga taglia i tratti discendenti. Il margine negativo lo riassorbe. */
  display:inline-block;padding-bottom:.2em;margin-bottom:-.16em;
}
.mb-sub{font-size:13px;color:var(--text-dim);margin-top:9px;letter-spacing:-.005em;}

.market-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:20px 0 0;padding:17px 0 0;max-width:none;
  border-top:1px solid rgba(255,255,255,.07);
}
.ms-item{display:flex;flex-direction:column;text-align:left;min-width:0;padding-right:14px;border-left:0;}
.ms-item dd{
  order:1;margin:0;font-family:var(--font-mono);font-size:21px;font-weight:600;
  color:var(--text);letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.ms-item dt{
  order:2;font-size:9px;color:var(--text-mute);letter-spacing:.14em;
  text-transform:uppercase;margin:7px 0 0;
}
.ms-item.accent dd{color:var(--green);}

/* ---- 3. LE RIGHE IN VETRO ---- */
.tok-row{
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.008)),rgba(6,10,13,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.tok-row:hover{
  transform:translateY(-2px);border-color:rgba(var(--green-rgb),.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px -24px #000,
             0 0 44px -24px rgba(var(--green-rgb),.9);
}
.tr-img{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 14px -7px #000;}
.tr-bar-fill{box-shadow:0 0 11px rgba(var(--green-rgb),.7);}

/* ---- 4. IL MENU ----
   Era anonimo perche' l'elemento attivo si limitava a schiarirsi. Tingendolo
   del colore della chain il menu dice anche DOVE sei, non solo cosa hai
   selezionato. */
/* NIENTE backdrop-filter.
   Serviva quando la barra era traslucida; ora il fondo e' opaco e la
   sfocatura non ha nulla da sfocare, ma costringe comunque il dispositivo a
   ricalcolare l'intera area dietro a ogni frame. Su telefono, dove il
   cassetto copre mezzo schermo, il risultato e' un pannello che appare
   sfocato e scatta mentre scorre. E' un effetto che si paga sempre e si vede
   solo quando qualcosa sotto e' visibile. */
.sidebar{
  background:var(--bg-1);
  border-right:1px solid rgba(255,255,255,.06);
  padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px));
}
.side-link{
  border-radius:10px;padding:9px 11px;font-size:12.5px;letter-spacing:-.005em;
  transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.side-link.active{
  background:rgba(var(--green-rgb),.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.side-link.active::before{
  left:-12px;top:9px;bottom:9px;width:2px;border-radius:2px;
  box-shadow:0 0 10px rgba(var(--green-rgb),.9);
}
.side-link.active svg{filter:drop-shadow(0 0 7px rgba(var(--green-rgb),.85));}
.side-cta,.btn-launch{
  box-shadow:0 14px 32px -14px rgba(var(--green-rgb),.9),inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---- 5. GRANA ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

@media (max-width:900px){
  .market-bar{padding:16px 16px 14px;}
  .mb-title{font-size:clamp(19px,5.4vw,26px);}
  .market-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px;}
  .ms-item dd{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){
  .tok-row:hover{transform:none;}
}

/* ---- 6. UN SOLO SFONDO ----
   Ce n'erano TRE sovrapposti: la griglia dritta di body::before qui sotto,
   gli aloni di .v2-aurora iniettati da v2.js, e l'orizzonte in prospettiva di
   starfield.js. Insieme davano quell'effetto "doppio" — reticoli con angoli
   diversi che si incrociano non fanno profondita', fanno rumore.
   Resta SOLO l'orizzonte, che e' quello scelto e l'unico che ha una
   direzione. Gli altri due si spengono qui invece di essere cancellati dai
   loro file: cosi' basta togliere queste due regole per riaverli. */
body::before{display:none;}
.v2-aurora{display:none;}

/* ---- 7. IL MENU: GERARCHIA, NON STILE ----
   Non era "generico" per come e' colorato — quello era gia' a posto. Lo era
   per COSA conteneva: nove voci con lo stesso peso, in cui Privacy e Terms
   pesavano quanto Tokens. Un elenco, non un menu.
   Le note legali sono scese nel piede, e le voci che hanno un numero adesso
   lo mostrano: un menu che dice "3" accanto a Tokens da' un'informazione,
   uno che ripete solo l'etichetta no. */
.side-count{
  margin-left:auto;font-style:normal;
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-mute);background:rgba(255,255,255,.05);
  padding:1px 7px;border-radius:20px;line-height:1.6;
}
.side-count:empty{display:none;}          /* niente pillola vuota in attesa dei dati */
.side-link.active .side-count{
  color:var(--green);background:rgba(var(--green-rgb),.14);
}

.side-foot{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--v2-edge);
  font-size:11px;color:var(--text-mute);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.side-foot a{color:var(--text-mute);text-decoration:none;transition:color .3s var(--ease);}
.side-foot a:hover{color:var(--text-dim);}
.side-foot [data-chain-name]{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  color:var(--text-mute);opacity:.7;
}

/* ==========================================================================
   v2 SI FERMA FUORI DALLA HOME
   --------------------------------------------------------------------------
   Tutto cio' che riguardava #view-home e' stato tolto da qui e riscritto in
   v3.css. Lasciarlo avrebbe rimesso in piedi il problema di sempre: due fogli
   che descrivono la stessa cosa in modo diverso, e nessuno dei due che vince
   in modo prevedibile.
   Quando anche le altre viste saranno passate a v3, questo file si cancella.
   ========================================================================== */

/* ==========================================================================
   L'INVOLUCRO: barra in alto e colonna laterale
   --------------------------------------------------------------------------
   Queste regole NON riguardano la home: valgono su tutte le schermate, quindi
   restano qui e non in v3.css. Erano finite nello stesso blocco delle regole
   della home e le ho cancellate insieme a quelle — da cui i link della barra
   ammassati senza stile e la colonna laterale ricomparsa sul desktop.
   ========================================================================== */

/* Sul desktop la colonna laterale sparisce: le sue voci sono nella barra in
   alto, e tenerle in due posti significa due menu con gli stessi link. Sotto
   i 1000px torna, perche' li' sei voci in orizzontale piu' la ricerca non ci
   stanno e serve il cassetto. */
@media (min-width:1001px){
  .sidebar{display:none;}
  .app{padding-left:0;}
  /* Il contenuto non corre da bordo a bordo: a 1900px una riga di tabella
     diventa illeggibile perche' l'occhio perde la corrispondenza fra il nome
     a sinistra e il valore all'altra estremita'. */
  .topbar,.page{max-width:1360px;margin-left:auto;margin-right:auto;}
  .topbar{padding-left:20px;padding-right:20px;}
}

/* Il marchio nella barra: senza la colonna laterale, e' l'unico posto dove
   puo' stare. Su mobile resta nascosto perche' lo spazio serve alla ricerca,
   e li' il marchio e' dentro il cassetto. */
.topbar .brand-top{
  display:none;align-items:center;gap:9px;flex-shrink:0;
  text-decoration:none;color:var(--text);
  font-size:15px;font-weight:600;letter-spacing:-.022em;
  white-space:nowrap;margin-right:4px;cursor:pointer;
}
.topbar .brand-top span{color:var(--green);}
/* .hero-logo e' definita a 34px per l'intestazione: dentro la barra va
   rimpicciolita, o alza la riga di 11px. Le regole di visibilita' per chain
   restano quelle, quindi si vede solo il logo della rete attiva. */
.topbar .brand-top .hero-logo{width:23px;height:23px;}
@media (min-width:1001px){ .topbar .brand-top{display:flex;} }

/* Le otto voci di questa barra si contendono la larghezza con il campo di
   ricerca, che e' l'unico elemento elastico e quindi l'unico che cede: con
   12px di respiro per voce alla ricerca ne restavano 125, dentro cui il
   segnaposto "Search tokens..." non ci sta. Nove per voce e un pixel di
   distanza fra loro fanno lo stesso menu, meno stretto il resto della barra.
   Nessuna voce si accorcia: cambia solo lo spazio che si prende attorno. */
.topnav{display:flex;gap:1px;flex-shrink:0;}
.topnav-link{
  display:flex;align-items:center;padding:7px 9px;border-radius:10px;
  font-size:13.5px;color:var(--text-dim);text-decoration:none;cursor:pointer;
  white-space:nowrap;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1);
}
.topnav-link:hover{background:rgba(255,255,255,.05);color:var(--text);}
.topnav-link.active{background:rgba(255,255,255,.08);color:var(--text);}
@media (max-width:1000px){ .topnav{display:none;} }

/* Il lancio e' l'azione che vuoi far compiere, e in fondo alla colonna
   laterale si vedeva solo scorrendo. */
.btn-launch-top{
  display:flex;align-items:center;padding:8px 14px;border-radius:10px;
  background:var(--green);color:var(--on-green);
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .3s cubic-bezier(.16,1,.3,1);
}
.btn-launch-top:hover{filter:brightness(1.07);}
@media (max-width:760px){ .btn-launch-top{display:none;} }

/* Il nome del marchio come UN blocco: dentro un flex con gap, il testo e lo
   span erano due voci separate e il gap si infilava fra "letstrash" e
   ".fun". */
.topbar .brand-top .brand-name{display:inline;white-space:nowrap;}

/* Il secondo bottone di lancio (stock) e' secondario: stessa forma, ma vuoto.
   Due bottoni pieni affiancati competono, e quello che conta di piu' perde. */
.btn-launch-top.ghost{
  background:transparent;color:var(--green);
  border:1px solid rgba(var(--green-rgb),.35);
}
.btn-launch-top.ghost:hover{background:rgba(var(--green-rgb),.10);filter:none;}