/* ==========================================================================
   v4 — "CINEMA"
   ==========================================================================
   COS'E'.

   Un livello di REGIA sopra v2/v3. Non ridisegna le schermate — quelle
   funzionano — ma cambia il modo in cui sono illuminate.

   Il sito, prima di questo foglio, era corretto e piatto: superfici grigie
   su fondo nero, bordi a un pixel, nessuna profondita'. Legge bene, ma non
   dice niente su chi l'ha fatto. Un launchpad che tiene i soldi della gente
   deve sembrare costato qualcosa.

   LE QUATTRO LEVE, in ordine di quanto si vedono:

   1. LUCE. Un fondo che non e' piu' una tinta ma uno spazio: alone caldo in
      alto (la sorgente), vignetta che chiude in basso, grana di pellicola
      sopra tutto. La grana e' la cosa che, da sola, toglie il "fatto col
      CSS" da un'interfaccia scura.
   2. MATERIA. Ogni pannello prende un bordo a GRADIENTE — chiaro dove la
      luce lo colpisce, spento sotto — piu' un filo interno di luce e
      un'ombra vera. E' quello che fa leggere una card come un oggetto
      appoggiato invece che come un rettangolo dipinto.
   3. FUOCO. Il puntatore porta con se' un alone: la superficie sotto il
      mouse si accende nel colore della chain. Costa due variabili aggiornate
      da v4.js dentro un rAF, e nient'altro.
   4. TEMPO. Niente compare di colpo: le sezioni salgono di 14px quando
      entrano nello schermo, le cifre contano, i bottoni hanno un riflesso
      che passa. Una sola curva, una sola durata di base.

   COSA NON FA, di proposito:
   - non tocca le misure. Nessun padding, nessuna colonna, nessun font-size
     dei dati cambia: le schermate dense restano dense. Aggiunge ombre,
     gradienti, transizioni — proprieta' che non spostano niente.
   - non colora i dati. Verde = compra, rosso = vendi, accento = chain:
     valgono le regole di v2 e non le tocco.
   - non usa !important se non dove v3 spegne esplicitamente qualcosa che
     qui deve tornare (sono cinque righe, tutte marcate).

   ORDINE: va caricato PER ULTIMO. A parita' di specificita' vince l'ordine
   di cascata, ed e' cosi' che questo foglio riaccende cio' che v3 aveva
   spento sulla home senza dover salire di specificita' ovunque.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN
   ==========================================================================
   Tutto quello che segue legge da qui. --green-rgb e' l'accento della chain
   attiva ed e' gia' definito da index.html: v4 non ridichiara nessun colore
   di marca, si limita a comporne le sfumature.
   ========================================================================== */
:root{
  --v4-ease:cubic-bezier(.22,1,.36,1);
  --v4-ease-soft:cubic-bezier(.16,1,.3,1);
  --v4-t:.42s;          /* durata di base: tutto il resto e' una frazione o un multiplo */
  --v4-t-fast:.22s;

  /* Bordi. Il "hi" e' il lato illuminato, il "lo" quello in ombra: sono i
     due estremi del gradiente che disegna il contorno dei pannelli. */
  --v4-edge-hi:rgba(255,255,255,.14);
  --v4-edge-lo:rgba(255,255,255,.035);
  --v4-edge-accent:rgba(var(--green-rgb),.38);

  /* Vetro. Due fermate in piu' rispetto a --v2-glass: la seconda tiene il
     mezzotono, senza la superficie sbiadisce subito sotto il bordo. */
  --v4-glass:linear-gradient(176deg,
    rgba(255,255,255,.062) 0%,
    rgba(255,255,255,.022) 18%,
    rgba(255,255,255,.008) 46%,
    rgba(255,255,255,0) 100%);
  --v4-glass-soft:linear-gradient(176deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.012) 24%,
    rgba(255,255,255,0) 100%);

  /* Ombre. Tre livelli, la terza ha la caduta lunga che serve a far
     galleggiare i pannelli grandi. */
  --v4-lift-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.8);
  --v4-lift-2:0 2px 6px rgba(0,0,0,.45), 0 18px 40px -22px rgba(0,0,0,.9);
  --v4-lift-3:0 4px 12px rgba(0,0,0,.5), 0 40px 80px -34px rgba(0,0,0,1);
  --v4-inner:inset 0 1px 0 rgba(255,255,255,.075);

  --v4-glow-sm:0 0 0 1px rgba(var(--green-rgb),.14), 0 8px 26px -12px rgba(var(--green-rgb),.5);
  --v4-glow-md:0 10px 40px -14px rgba(var(--green-rgb),.62);

  --v4-r-xl:20px;
  --v4-r-lg:16px;
  --v4-r-md:12px;
  --v4-r-sm:9px;

  /* Posizione del puntatore dentro l'elemento illuminato. v4.js le riscrive;
     il ripiego mette l'alone al centro, cosi' senza JS non si vede niente di
     sbagliato — si vede solo meno. */
  --v4-mx:50%;
  --v4-my:0%;
}

/* Tema chiaro: le stesse leve, invertite. Su fondo chiaro la luce non si
   aggiunge in bianco ma si toglie in nero, altrimenti i pannelli diventano
   lattiginosi e i bordi spariscono. */
:root[data-theme="light"]{
  --v4-edge-hi:rgba(9,14,22,.14);
  --v4-edge-lo:rgba(9,14,22,.05);
  --v4-glass:linear-gradient(176deg,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.55) 30%,
    rgba(255,255,255,.2) 100%);
  --v4-glass-soft:linear-gradient(176deg,rgba(255,255,255,.7),rgba(255,255,255,.2));
  --v4-lift-1:0 1px 2px rgba(18,26,38,.06), 0 4px 14px -8px rgba(18,26,38,.14);
  --v4-lift-2:0 2px 6px rgba(18,26,38,.07), 0 16px 34px -20px rgba(18,26,38,.22);
  --v4-lift-3:0 4px 12px rgba(18,26,38,.08), 0 34px 68px -30px rgba(18,26,38,.3);
  --v4-inner:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ==========================================================================
   2. LO SPAZIO
   ==========================================================================
   Tre strati fissi dietro tutto, in quest'ordine dal fondo:
     a. l'alone della sorgente in alto + la vignetta in basso  (body::before)
     b. la grana                                              (.v4-grain)
     c. il contenuto
   Nessuno dei tre intercetta il puntatore e nessuno anima proprieta' che
   costringano a ridisegnare: la grana e' una texture statica, l'alone e' un
   gradiente fermo.
   ========================================================================== */

/* v2 usa gia' body::before per la griglia e body::after per la vignetta. Qui
   NON li tocco: aggiungo uno strato mio, in un elemento vero creato da v4.js,
   cosi' i due sistemi non si contendono lo stesso pseudo-elemento. */
.v4-stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  contain:strict;
}
.v4-stage::before{
  /* LA SORGENTE. Un'ellisse larga in alto, nel colore della chain, con una
     seconda fermata quasi neutra: senza quella il colore resta appiccicato
     al bordo superiore invece di diffondersi.
     Le alfe sono scese di circa il quaranta per cento. Sommate all'aurora di
     v2 e al campo stellato facevano un fondo che si guardava da solo: passando
     dall'ingresso all'applicazione sembrava di cambiare sito, perche' li' il
     fondo e' quasi fermo e qui era acceso. Ora la sorgente si vede ancora,
     ma sta dietro il contenuto invece che accanto. */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 62% at 50% -12%,
      rgba(var(--green-rgb),.085) 0%,
      rgba(var(--green-rgb),.032) 26%,
      rgba(255,255,255,.012) 46%,
      transparent 72%),
    radial-gradient(90% 50% at 8% 4%, rgba(255,255,255,.02), transparent 60%);
}
.v4-stage::after{
  /* LA CHIUSURA. Scurisce i bordi e soprattutto il fondo pagina: e' quello
     che impedisce alla lista di token di "finire nel nulla" quando scorre. */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(140% 100% at 50% 100%, rgba(0,0,0,.62) 0%, transparent 55%),
    radial-gradient(100% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.45) 100%);
}
:root[data-theme="light"] .v4-stage::before{
  background:
    radial-gradient(120% 62% at 50% -12%,
      rgba(var(--green-rgb),.07) 0%, rgba(var(--green-rgb),.025) 30%, transparent 70%);
}
:root[data-theme="light"] .v4-stage::after{
  background:radial-gradient(120% 100% at 50% 100%, rgba(18,26,38,.06), transparent 55%);
}

/* LA GRANA.
   E' l'ingrediente che si nota di meno e cambia di piu'. Senza, un fondo
   scuro con gradienti mostra le bande di quantizzazione a 8 bit — quelle
   fasce concentriche visibili negli aloni — e l'occhio le legge come
   "immagine compressa". Un rumore all'1.8% le rompe.
   E' una SVG in data URI: nessuna richiesta di rete, nessun canvas, nessun
   frame ridisegnato. La dimensione fissa in px (non in %) evita che il
   pattern si stiri su schermi larghi diventando visibile. */
.v4-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:160px 160px;
  contain:strict;
}
:root[data-theme="light"] .v4-grain{opacity:.03;mix-blend-mode:multiply;}

/* L'AURORA DI v2, RIPORTATA AL PESO DELL'INGRESSO.
   Sono due cerchi da 58 e 66vmax — piu' larghi dello schermo — uno nel colore
   della rete in alto a sinistra e uno freddo in basso a destra, che derivano
   lentamente. A .34 erano la cosa piu' luminosa della pagina dopo i bottoni:
   il fondo aveva un colore proprio e i pannelli ci galleggiavano sopra invece
   di appoggiarci. La landing usa aloni fermi al 16 e all'11 per cento e si
   legge molto piu' calma; qui si scende alla stessa fascia.
   Non spariscono: senza, il fondo diventa nero piatto e i pannelli, che sono
   quasi neri anche loro, perdono il bordo. */
:root{--v2-field-op:.13;}
:root[data-chain="bsc"]{--v2-field-op:.09;}
:root[data-chain="solana"]{--v2-field-op:.085;}
:root[data-theme="light"]{--v2-field-op:.05;}

/* IL CAMPO STELLATO.
   A .85 i punti si contavano, e su una lista di token si leggevano come
   sporco sopra il contenuto. E' texture, non decorazione: deve dare
   profondita' al nero senza che si noti da cosa. */
#starfield-bg{z-index:0;opacity:.4;}
:root[data-theme="light"] #starfield-bg{opacity:0;}

/* Sopra gli strati di regia deve stare TUTTO il resto: l'applicazione non
   dichiara uno z-index sul proprio contenitore e senza questo la grana ci
   finirebbe sopra. */
/* NIENTE z-index SU .app, ed e' importante.
   .app e' gia' position:relative (index.html) senza z-index: posizionato ma
   NON un contesto di impilamento. Cosi' il cassetto mobile (.sidebar,
   z-index 60, dentro .app) puo' salire sopra il velo #mBackdrop (z-index 50,
   fuori da .app). Il primo v4 gli dava z-index:2 per stare sopra la grana:
   ha chiuso il cassetto dentro un contesto e il velo lo copriva. Gli strati
   di regia stanno a 0 e vengono PRIMA nel DOM: e' l'ordine a tenerli sotto,
   come gia' per aurora e reticolo di v2. */
.app{position:relative;}

/* ==========================================================================
   3. TIPOGRAFIA
   ==========================================================================
   Non cambio famiglie ne' corpo dei dati. Cambio la GERARCHIA: i titoli
   diventano piu' stretti e piu' grandi, le microetichette piu' larghe e piu'
   spente. E' il contrasto fra questi due estremi che si legge come "curato".
   ========================================================================== */
h1,h2,h3,.section-title{
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1{letter-spacing:-.042em;}

/* Il titolo dell'hero prende una rampa di bianco: pieno in alto, appena
   velato in basso. E' un dettaglio da due righe che fa sembrare il testo
   illuminato da sopra invece che stampato. */
.pitch h1,
.hero h1{
  background:linear-gradient(180deg,#fff 4%,rgba(255,255,255,.78) 92%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* Il ritaglio sul testo taglia le code di g/y/p quando line-height e'
     sotto 1: si restituisce lo spazio e lo si riassorbe col margine, come
     gia' fatto sulla landing. */
  padding-bottom:.12em;margin-bottom:-.1em;
}
:root[data-theme="light"] .hero h1{
  background:linear-gradient(180deg,#0d141d 4%,rgba(13,20,29,.82) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* La parte accentata del titolo resta accentata: e' identita' di chain e non
   deve essere mangiata dalla rampa qui sopra. */
.hero h1 .accent{
  -webkit-text-fill-color:var(--green);
  background:none;color:var(--green);
}

/* MICROETICHETTE. Ovunque compaia un'etichetta in maiuscoletto sopra un
   numero, deve essere piccola, spaziata e spenta: il numero e' il
   protagonista, l'etichetta e' la didascalia. */
.ms-item dt,.stat-label,.tk-stat-label,.pf-stat-k,.tr-lbl,
.tok-head,.section-head .head-k,.feat-k,.docs-tab{
  letter-spacing:.14em;
}

/* NUMERI. Cifre a larghezza fissa ovunque un valore possa cambiare: senza,
   la riga "balla" ad ogni aggiornamento live. v2 lo fa gia' in alcuni punti,
   qui vale per tutti. */
.mono,.ms-item dd,.stat-value,.tr-num,.pf-stat-v,.feat-nums b,.tk2-v,
.proof b,.v4-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1;
}

/* ==========================================================================
   4. MATERIA — le superfici
   ==========================================================================
   IL BORDO A GRADIENTE, spiegato una volta sola perche' ricorre ovunque.

   Un `border:1px solid` ha un colore solo: illumina il pannello in modo
   uniforme e lo appiattisce. Serve invece un contorno piu' chiaro in alto e
   spento in basso — cioe' un GRADIENTE dentro un bordo, che il CSS non
   permette direttamente.

   La tecnica: un ::before assoluto che copre il pannello, riempito col
   gradiente, ritagliato a ciambella da due maschere sovrapposte in
   `xor` (una piena, una rientrata di 1px con padding-box). Resta solo il
   contorno. Costa un pseudo-elemento e nessun ridisegno.

   Perche' non `border-image`: border-image non segue border-radius sui
   bordi arrotondati compositi e su Safari lascia gli angoli tagliati. */
.hero,.card,.tok-panel,.chart-card,.pf-panel,.modal,.dex-embed-card,
.pf-summary-card,.tm-col,.docs-sec,.feature-card,.how-step,.pf-stat,
.saved-card,.pf-stock-card,.token-card,.market-bar,.trend-card,.stock-hero{
  position:relative;
  isolation:isolate;
}
.hero::after,.card::after,.tok-panel::after,.chart-card::after,
.pf-panel::after,.modal::after,.dex-embed-card::after,.pf-summary-card::after,
.tm-col::after,.docs-sec::after,.feature-card::after,
.pf-stat::after,.saved-card::after,.token-card::after,.market-bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(160deg,
    var(--v4-edge-hi) 0%,
    var(--v4-edge-lo) 38%,
    rgba(255,255,255,.02) 62%,
    var(--v4-edge-hi) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
  opacity:.9;
  transition:opacity var(--v4-t) var(--v4-ease);
}
/* .how-step E' L'ECCEZIONE, e va spiegata perche' l'ho gia' sbagliata una
   volta.
   Il suo ::after e' la FRECCIA che collega un passo al successivo, messa da
   v2 a right:-14px, cioe' fuori dal riquadro. Includendolo nel gruppo qui
   sopra, `position:absolute;inset:0` gli riscriveva la posizione e la
   freccia finiva incollata al bordo SINISTRO della card, dentro il testo.
   Qui il bordo passa quindi sul ::before — che v2 dichiara gia' come
   sovrapposizione vuota a inset:0, quindi non tolgo niente a nessuno. */
.how-step::before{
  padding:1px;overflow:visible;
  background:linear-gradient(160deg,
    var(--v4-edge-hi) 0%,var(--v4-edge-lo) 38%,
    rgba(255,255,255,.02) 62%,var(--v4-edge-hi) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--v4-t) var(--v4-ease);
}

/* Il corpo del pannello: vetro + rilievo + filo di luce interno. */
.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(--v4-glass);
  box-shadow:var(--v4-inner),var(--v4-lift-1);
  border-radius:var(--v4-r-lg);
  transition:box-shadow var(--v4-t) var(--v4-ease),
             transform var(--v4-t) var(--v4-ease),
             border-color var(--v4-t) var(--v4-ease);
}
.tok-panel,.chart-card{
  box-shadow:var(--v4-inner),var(--v4-lift-2);
  border-radius:var(--v4-r-xl);
}
.hero,.modal{
  box-shadow:var(--v4-inner),var(--v4-lift-3);
  border-radius:var(--v4-r-xl);
}

/* IL FUOCO. L'alone che segue il puntatore.
   Sta su un ::before (l'::after e' gia' il bordo) sotto al contenuto, e vive
   solo mentre il mouse e' dentro: opacity 0 -> 1 in transizione, cosi'
   entrare e uscire non e' uno scatto. Il gradiente e' ancorato a --v4-mx/my,
   che v4.js aggiorna solo per l'elemento sotto il puntatore. */
.card,.tok-panel,.chart-card,.pf-panel,.feature-card,.how-step,.pf-stat,
.docs-sec,.tm-col,.pf-summary-card,.saved-card{
  --v4-spot:0;
}
.card::before,.tok-panel::before,.chart-card::before,.pf-panel::before,
.feature-card::before,.pf-stat::before,.docs-sec::before,.tm-col::before,
.pf-summary-card::before,.saved-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px circle at var(--v4-mx) var(--v4-my),
    rgba(var(--green-rgb),.1) 0%,
    rgba(var(--green-rgb),.035) 32%,
    transparent 68%);
  opacity:var(--v4-spot);
  transition:opacity .5s var(--v4-ease);
  /* z-index:-1 e NON 0.
     Il primo tentativo metteva l'alone a 0 e spingeva i figli diretti a
     `position:relative;z-index:2` per tenerli sopra. Ha rotto ogni figlio
     GIA' in posizione assoluta — le icone in alto a destra delle schede del
     profilo sono tornate in flusso e sono finite addosso alle etichette.
     Con -1 non serve toccare i figli: dentro un contesto di impilamento
     (--isolation:isolate qui sopra) uno strato negativo si dipinge SOPRA lo
     sfondo del pannello e SOTTO il contenuto, che e' esattamente l'ordine
     voluto. */
  pointer-events:none;z-index:-1;
}

/* Sollevamento al passaggio. Due pixel, non di piu': su una lista densa un
   movimento maggiore fa "saltare" le righe vicine. */
.feature-card:hover,.how-step:hover,.pf-stat:hover,.saved-card:hover,
.pf-stock-card:hover,.docs-sec:hover{
  transform:translateY(-2px);
  box-shadow:var(--v4-inner),var(--v4-lift-2);
}
.feature-card:hover::after,.pf-stat:hover::after,
.card:hover::after,.tok-panel:hover::after{opacity:1;}

/* ==========================================================================
   5. LA BARRA IN ALTO
   ==========================================================================
   Da "riga con un bordo sotto" a barra sospesa: il vetro si fa piu' denso
   quando la pagina scorre (classe messa da v4.js), e sotto compare una linea
   che si accende al centro nel colore della chain. E' l'unico elemento
   sempre visibile: e' li' che si giudica se un sito e' curato.
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,
    rgba(var(--v4-bar-rgb,6,9,13),.72),
    rgba(var(--v4-bar-rgb,6,9,13),.42));
  border-bottom:1px solid transparent;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:background var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
:root[data-chain="arc"]{--v4-bar-rgb:6,10,22;}
:root[data-chain="bsc"]{--v4-bar-rgb:7,7,6;}
:root[data-chain="hyperevm"]{--v4-bar-rgb:5,13,11;}
:root[data-chain="solana"]{--v4-bar-rgb:7,6,12;}
:root[data-theme="light"]{--v4-bar-rgb:250,251,253;}

/* La linea sotto la barra: spenta ai lati, accesa al centro. Un bordo pieno
   taglia la pagina in due; questa la sottolinea. */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--v4-edge-lo) 12%,
    rgba(var(--green-rgb),.42) 50%,
    var(--v4-edge-lo) 88%,
    transparent 100%);
  opacity:.75;pointer-events:none;
}
.topbar.v4-scrolled{
  background:linear-gradient(180deg,
    rgba(var(--v4-bar-rgb,6,9,13),.94),
    rgba(var(--v4-bar-rgb,6,9,13),.82));
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 18px 40px -28px rgba(0,0,0,1);
}

/* I link: la sottolineatura cresce dal centro invece di comparire. */
.topnav-link{
  position:relative;
  transition:color var(--v4-t-fast) var(--v4-ease);
}
.topnav-link::after{
  content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  transition:left var(--v4-t) var(--v4-ease),right var(--v4-t) var(--v4-ease),
             opacity var(--v4-t) var(--v4-ease);
  opacity:0;
}
.topnav-link:hover::after{left:24%;right:24%;opacity:.7;}
.topnav-link.active::after{left:16%;right:16%;opacity:1;}
.topnav-link.active{color:var(--text);}

/* Il marchio: il logo prende un alone tenue nel colore della chain, cosi'
   l'angolo in alto a sinistra non e' un buco scuro. */
.topbar .brand-top .hero-logo{
  filter:drop-shadow(0 0 12px rgba(var(--green-rgb),.45));
  transition:filter var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease);
}
.topbar .brand-top:hover .hero-logo{
  filter:drop-shadow(0 0 18px rgba(var(--green-rgb),.7));
  transform:rotate(-8deg) scale(1.06);
}
.topbar .brand-top .brand-name{letter-spacing:-.028em;}

/* La ricerca: da campo a "comando". Si allarga quando prende il fuoco. */
.search input{
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--v4-edge-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color var(--v4-t) var(--v4-ease),
             background var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
.search input:focus{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(var(--green-rgb),.1),
             inset 0 1px 0 rgba(255,255,255,.06),
             0 8px 26px -14px rgba(var(--green-rgb),.7);
}

/* ==========================================================================
   6. I BOTTONI
   ==========================================================================
   Il bottone pieno prende tre cose che prima non aveva: una rampa a tre
   fermate (non due: la terza tiene il colore vivo al centro invece di
   spegnerlo), un alone che cresce al passaggio, e un RIFLESSO che attraversa
   la superficie. Il riflesso e' un gradiente obliquo che scorre in 0.7s: e'
   la firma piu' riconoscibile di una UI costosa, e costa una traslazione.
   ========================================================================== */
.btn-launch,.btn-enter,.pf-btn-primary,.btn-launch-top:not(.ghost),.side-cta:not(.stock){
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,
    var(--green-hi) 0%,
    var(--green) 52%,
    var(--green-dim) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(0,0,0,.18),
             0 2px 8px -2px rgba(var(--green-rgb),.4),
             0 12px 30px -14px rgba(var(--green-rgb),.75);
  transition:transform var(--v4-t-fast) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),
             filter var(--v4-t-fast) var(--v4-ease);
}
.btn-launch::after,.btn-enter::after,.pf-btn-primary::after,
.btn-launch-top:not(.ghost)::after,.side-cta:not(.stock)::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,
    transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:left .7s var(--v4-ease);
}
.btn-launch:hover::after,.btn-enter:hover::after,.pf-btn-primary:hover::after,
.btn-launch-top:not(.ghost):hover::after,.side-cta:not(.stock):hover::after{left:130%;}
.btn-launch:hover:not(:disabled),.btn-enter:hover:not(:disabled),
.pf-btn-primary:hover,.btn-launch-top:not(.ghost):hover,.side-cta:not(.stock):hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
             0 4px 12px -2px rgba(var(--green-rgb),.5),
             0 20px 44px -14px rgba(var(--green-rgb),.9);
}
.btn-launch:active:not(:disabled),.btn-enter:active:not(:disabled),
.btn-launch-top:not(.ghost):active{transform:translateY(0) scale(.985);}

/* I DUE BOTTONI IN FONDO AL CASSETTO: uno pieno, uno no.
   Erano entrambi gialli, uno sopra l'altro: due azioni con lo stesso peso
   sono nessuna azione. "Launch your token" e' quella principale del sito e
   resta piena (e' gia' nel gruppo dei pieni qui sopra); lo stock token
   diventa il secondario — contorno nel colore della chain, fondo
   trasparente — cosi' si legge come variante e non come doppione.
   Specificita' .sidebar .side-cta (0,3,0) e non !important: batte sia la
   regola di index.html sia quella di v3, che sono a (0,2,0). */
.sidebar .side-cta:not(.stock){border-radius:var(--v4-r-md);color:var(--on-green);border-color:transparent;}
.sidebar .side-cta.stock{
  border-radius:var(--v4-r-md);
  background:rgba(var(--green-rgb),.06);
  background-image:none;
  color:var(--chain-accent,var(--green));
  border:1px solid var(--chain-accent-line,rgba(var(--green-rgb),.4));
  box-shadow:none;
  transition:background var(--v4-t) var(--v4-ease),border-color var(--v4-t) var(--v4-ease),
             transform var(--v4-t-fast) var(--v4-ease);
}
.sidebar .side-cta.stock::after{display:none;}
.sidebar .side-cta.stock:hover{
  background:rgba(var(--green-rgb),.12);
  border-color:var(--chain-accent,var(--green));
  transform:translateY(-1px);
  box-shadow:0 8px 22px -14px rgba(var(--green-rgb),.9);
}

/* Compra e vendi: stessa fisica, colore invariato (verde e rosso, su ogni
   chain — e' semantica, non identita'). */
.btn-buy,.btn-sell{
  position:relative;overflow:hidden;
  transition:transform var(--v4-t-fast) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),background var(--v4-t-fast) var(--v4-ease);
}
.btn-buy{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
  0 2px 8px -2px rgba(var(--buy-rgb),.4),0 12px 30px -14px rgba(var(--buy-rgb),.7);}
.btn-sell{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
  0 2px 8px -2px rgba(var(--sell-rgb),.4),0 12px 30px -14px rgba(var(--sell-rgb),.7);}
.btn-buy:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
  0 20px 44px -14px rgba(var(--buy-rgb),.9);}
.btn-sell:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
  0 20px 44px -14px rgba(var(--sell-rgb),.9);}

/* I secondari: contorno che si accende, fondo che si schiarisce appena. */
.btn-secondary,.qa-btn,.pf-btn,.upload-btn,.page-btn,.page-num,
.btn-launch-top.ghost{
  border-radius:999px;
  border:1px solid var(--v4-edge-lo);
  background-image:var(--v4-glass-soft);
  transition:border-color var(--v4-t) var(--v4-ease),
             background var(--v4-t) var(--v4-ease),
             transform var(--v4-t-fast) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
.btn-secondary:hover:not(:disabled),.qa-btn:hover,.pf-btn:hover,
.upload-btn:hover,.btn-launch-top.ghost:hover{
  border-color:rgba(var(--green-rgb),.45);
  transform:translateY(-1px);
  box-shadow:0 8px 24px -14px rgba(var(--green-rgb),.8);
}

/* Il bottone del wallet in alto a destra: e' l'invito principale della
   barra, quindi e' l'unico elemento chiaro su fondo scuro. */
.btn-connect{
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
             0 2px 6px rgba(0,0,0,.4),
             0 10px 26px -14px rgba(255,255,255,.45);
  transition:transform var(--v4-t-fast) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
.btn-connect:hover{
  transform:translateY(-1.5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 34px -16px rgba(255,255,255,.55);
}

/* ==========================================================================
   7. I CAMPI
   ==========================================================================
   Un campo scuro dentro un pannello scuro non si vede: qui e' INCASSATO —
   ombra interna in alto, filo di luce in basso — cosi' si legge come un
   buco nella superficie invece che come un altro rettangolo.
   ========================================================================== */
.field input:not([type=range]),.field textarea,.field select,
.buy-input-row input,.tm-filters input,.ref-code-row input{
  border-radius:var(--v4-r-md);
  border:1px solid var(--v4-edge-lo);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.05);
  transition:border-color var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),
             background var(--v4-t) var(--v4-ease);
}
.field input:not([type=range]):focus,.field textarea:focus,
.buy-input-row input:focus,.tm-filters input:focus{
  border-color:rgba(var(--green-rgb),.55);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 4px rgba(var(--green-rgb),.11),
             inset 0 2px 6px rgba(0,0,0,.3),
             0 10px 30px -18px rgba(var(--green-rgb),.9);
  outline:none;
}
:root[data-theme="light"] .field input:not([type=range]),
:root[data-theme="light"] .field textarea{
  background:rgba(18,26,38,.035);
  box-shadow:inset 0 2px 5px rgba(18,26,38,.07);
}

/* ==========================================================================
   8. PILLOLE, SCHEDE, BADGE
   ==========================================================================
   Tutte le liste di scelte del sito (filtri della home, schede dei docs,
   schede del profilo, timeframe del grafico) sono la stessa cosa: una fila
   di pillole con una attiva. Qui prendono lo stesso trattamento, cosi' il
   sito smette di avere quattro dialetti per lo stesso comando.
   ========================================================================== */
.feed-tab,.docs-tab,.pf-tab,.chart-tf,.trade-tab,.mode,.chain-pill{
  border-radius:999px;
  transition:background var(--v4-t) var(--v4-ease),
             color var(--v4-t-fast) var(--v4-ease),
             border-color var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),
             transform var(--v4-t-fast) var(--v4-ease);
}
.feed-tab:hover,.docs-tab:hover,.pf-tab:hover,.chart-tf:hover,.tk2-tab:hover{
  transform:translateY(-1px);
}
/* .tk2-tab e' fuori da questo elenco di proposito.
   E' una scheda con la sottolineatura, non una pillola: l'anello dorato le
   disegnava intorno un ovale alto quanto tutta la barra, e la barra ha
   overflow-x:auto, che taglia anche in verticale. Risultato, un anello
   tagliato sopra e sotto — che e' esattamente cio' che si vedeva. */
.feed-tab.active,.docs-tab.active,.pf-tab.active,.chart-tf.active,
.trade-tab.active{
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4),
             0 6px 20px -12px rgba(var(--green-rgb),.9);
}

/* Il pallino "vivo". Prima era un cerchio pieno che pulsava; ora ha
   un'ONDA che si espande e svanisce — la stessa cosa che fa un segnale
   radar, e si legge come "in tempo reale" senza bisogno della parola. */
.pulse,.feed-pulse,.tk2-dot{
  position:relative;
  box-shadow:0 0 10px rgba(var(--green-rgb),.9);
}
.pulse::after,.feed-pulse::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:inherit;
  animation:v4Ping 2.4s var(--v4-ease) infinite;
  pointer-events:none;
}
@keyframes v4Ping{
  0%{transform:scale(1);opacity:.55;}
  70%,100%{transform:scale(3.4);opacity:0;}
}

/* ==========================================================================
   9. LISTE E RIGHE
   ==========================================================================
   La lista dei token e' il cuore del sito: e' li' che uno passa il tempo.
   Ogni riga prende (a) un fondo che si accende da sinistra al passaggio,
   (b) una barra verticale d'accento sul bordo sinistro che cresce, (c) una
   transizione sola. Nessuna riga si muove: su una tabella, un translate al
   passaggio e' fastidioso perche' fa perdere la riga che si stava leggendo.
   ========================================================================== */
#view-home .tok-row,.tr-row,.tok-row{
  position:relative;
  transition:background var(--v4-t) var(--v4-ease);
}
#view-home .tok-row::before,#view-stocks .tok-row::before,.tr-row::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,transparent,var(--green),transparent);
  transform:scaleY(0);transform-origin:center;
  transition:transform var(--v4-t) var(--v4-ease);
  pointer-events:none;
}
#view-home .tok-row:hover::before,#view-stocks .tok-row:hover::before,.tr-row:hover::before{transform:scaleY(1);}
#view-home .tok-row:hover,#view-stocks .tok-row:hover,.tr-row:hover{
  background:linear-gradient(90deg,
    rgba(var(--green-rgb),.055) 0%,
    rgba(255,255,255,.022) 30%,
    transparent 92%);
}

/* L'immagine del token: bordo sottile e ombra, cosi' i loghi quadrati non
   sembrano incollati sul fondo. */
.tr-img,.tk2-ib,.token-img{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 4px 12px -6px rgba(0,0,0,.9);
  transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease);
}
.tok-row:hover .tr-img,.tr-row:hover .tr-img{
  transform:scale(1.06);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.35),
             0 6px 18px -6px rgba(var(--green-rgb),.6);
}

/* L'intestazione delle colonne: si stacca dalla lista e resta ferma mentre
   la lista scorre sotto. */
.tok-head{
  position:sticky;top:0;z-index:3;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ==========================================================================
   10. LE BARRE DI AVANZAMENTO
   ==========================================================================
   Dicono quanto manca alla migrazione: e' il numero piu' guardato del sito,
   e finora era una barretta piatta. Ora e' una rampa nel colore della chain
   con un alone e una luce che la percorre — l'unica animazione continua che
   mi concedo nelle liste, perche' significa "sta succedendo adesso".
   ========================================================================== */
.tr-bar,.token-progress,.feat-bar{
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
#view-home .tr-bar-fill,.tr-bar-fill,.token-progress-fill,.feat-bar > i{
  position:relative;
  background:linear-gradient(90deg,
    rgba(var(--green-rgb),.55) 0%,
    var(--green) 62%,
    var(--green-hi) 100%);
  box-shadow:0 0 12px -2px rgba(var(--green-rgb),.75);
  transition:width .8s var(--v4-ease);
}
/* LA LUCE CHE PERCORRE LA BARRA STA SU UNA BARRA SOLA.
   Il primo tentativo la metteva su tutte, comprese le dodici righe della
   lista: partendo tutte insieme diventava un'onda che attraversa la tabella
   ogni 2.8 secondi, cioe' esattamente il tipo di movimento che rende
   faticoso leggere una colonna di numeri.
   Resta dove significa qualcosa: il token in evidenza e la pagina di un
   token, dove la barra e' UNA e sta dicendo "questo sta succedendo adesso". */
#view-home .feature .feat-bar > i::after,
#view-token .token-progress-fill::after,
#view-stock .token-progress-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:v4Sweep 2.8s var(--v4-ease-soft) infinite;
}
@keyframes v4Sweep{
  0%{transform:translateX(-100%);}
  60%,100%{transform:translateX(220%);}
}

/* ==========================================================================
   11. LE CIFRE DELLA PIATTAFORMA
   ==========================================================================
   La striscia dei quattro numeri sulla home era un rettangolo diviso in
   quattro. Ora ogni cella e' un blocco a se': l'icona vive in un quadrato
   con l'alone della chain, il numero e' grande e con una rampa, e la cella
   sotto il mouse si accende.

   NOTA sulle regole con !important: v3.css spegne esplicitamente ombre e
   gradienti su .market-bar (righe 427-437). Qui li riaccendo, e siccome
   quelle regole hanno la stessa specificita' ma vengono da un file caricato
   prima, basterebbe l'ordine — tranne dove v3 usa `background-image:none`
   sullo stesso selettore identico. Sono le uniche cinque, tutte qui.
   ========================================================================== */
#view-home .market-bar{
  background-color:var(--panel);
  background-image:var(--v4-glass) !important;
  border:1px solid transparent;
  border-radius:var(--v4-r-xl);
  box-shadow:var(--v4-inner),var(--v4-lift-2) !important;
  overflow:hidden;
}
#view-home .ms-item{
  position:relative;
  transition:background var(--v4-t) var(--v4-ease);
}
#view-home .ms-item:hover{
  background:radial-gradient(120% 140% at 50% 0%,
    rgba(var(--green-rgb),.09),transparent 70%) !important;
}
#view-home .ms-item + .ms-item{
  /* La linea di separazione sfuma alle estremita': un filo pieno da bordo a
     bordo taglia la striscia in scomparti. */
  border-left:0;
}
#view-home .ms-item + .ms-item::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,var(--v4-edge-hi) 30%,
    var(--v4-edge-hi) 70%,transparent);
}
#view-home .ms-item dt svg{
  background:linear-gradient(160deg,
    rgba(var(--green-rgb),.24),rgba(var(--green-rgb),.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24),
             0 6px 16px -10px rgba(var(--green-rgb),.9);
  transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease);
}
#view-home .ms-item:hover dt svg{
  transform:translateY(-1px) scale(1.06);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4),
             0 10px 24px -10px rgba(var(--green-rgb),1);
}
#view-home .ms-item dd{
  letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff 10%,rgba(255,255,255,.7) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="light"] #view-home .ms-item dd{
  background:linear-gradient(180deg,#0d141d 10%,rgba(13,20,29,.72) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Il rimborso resta l'unica cifra accentata: e' la promessa del prodotto. */
#view-home .ms-item:last-child dd{
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(var(--green-rgb),.35));
}
/* SUL CHIARO L'ACCENTO VA SCURITO, non solo desaturato.
   Gli accenti delle chain sono tarati per il fondo scuro: l'oro di BNB su
   bianco sta a 1.9:1, cioe' sotto qualsiasi soglia leggibile, e su un numero
   grande si vede come una macchia sbiadita invece che come la cifra piu'
   importante della striscia. Un filtro sulla luminosita' scurisce la rampa
   MANTENENDO la tinta della rete — che e' il punto: deve restare
   riconoscibile come "il colore di questa chain". L'alone sparisce, perche'
   su bianco un bagliore e' solo sfocatura. */
:root[data-theme="light"] #view-home .ms-item:last-child dd,
:root[data-theme="light"] .hero h1 .accent{
  filter:saturate(1.25) brightness(.62);
}

/* ==========================================================================
   12. IL TOKEN IN EVIDENZA
   ==========================================================================
   E' il pannello che vende: primo schermo, a destra del titolo. Prende
   l'unica cornice accentata della pagina.
   ========================================================================== */
#view-home .feature{
  border-radius:var(--v4-r-xl);
  box-shadow:var(--v4-inner),var(--v4-lift-2);
  overflow:hidden;
}
#view-home .feature::after{
  background:linear-gradient(160deg,
    rgba(var(--green-rgb),.4) 0%,
    var(--v4-edge-lo) 42%,
    rgba(var(--green-rgb),.16) 100%);
}
#view-home .feat-main{position:relative;}
#view-home .feat-main::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 12% 0%,
    rgba(var(--green-rgb),.1),transparent 62%);
}
#view-home .feat-name{letter-spacing:-.035em;}

/* ==========================================================================
   13. MODALI
   ==========================================================================
   Il fondo si sfoca: e' quello che fa sembrare la finestra "sopra" invece
   che "dentro" la pagina. Ed entra scalando da 0.97, non da 0.8: una
   finestra che rimbalza sembra un giocattolo.
   ========================================================================== */
.modal-backdrop{
  backdrop-filter:blur(10px) saturate(.9);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(var(--green-rgb),.07),transparent 55%),rgba(2,4,7,.72);
}
.modal{
  animation:v4Modal .5s var(--v4-ease) both;
}
@keyframes v4Modal{
  from{opacity:0;transform:translateY(14px) scale(.972);}
  to{opacity:1;transform:none;}
}
.modal h2{letter-spacing:-.03em;}
.modal .accept-row{
  border-radius:var(--v4-r-md);
  transition:border-color var(--v4-t) var(--v4-ease),background var(--v4-t) var(--v4-ease);
}

/* ==========================================================================
   14. IL PIEDE
   ==========================================================================
   Chiude la pagina invece di finirla: una linea che si accende al centro,
   come sotto la barra in alto. Le due si rispondono.
   ========================================================================== */
.site-foot,.site-footer{
  position:relative;
  border-top:0;
}
.site-foot::before,.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--v4-edge-hi) 22%,
    rgba(var(--green-rgb),.32) 50%,var(--v4-edge-hi) 78%,transparent);
}
.site-foot a,.site-footer a{
  transition:color var(--v4-t-fast) var(--v4-ease),transform var(--v4-t-fast) var(--v4-ease);
}
.site-foot a:hover,.site-footer a:hover{color:var(--green);}

/* ==========================================================================
   15. IL TEMPO — comparse
   ==========================================================================
   Ogni blocco entra una volta sola, quando lo si raggiunge. La classe
   .v4-in la mette v4.js con un IntersectionObserver; senza JS gli elementi
   restano visibili (lo stato di partenza e' applicato dal JS stesso, non
   dal CSS: e' la sola regola che garantisce che una pagina senza script
   resti leggibile).
   ========================================================================== */
.v4-rise{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--v4-ease),transform .7s var(--v4-ease);
  transition-delay:var(--v4-d,0ms);
  will-change:opacity,transform;
}
.v4-rise.v4-in{opacity:1;transform:none;}

/* La comparsa della schermata quando si cambia rotta. Corta: una transizione
   di pagina lunga si trasforma in attesa. */
#view-home,#view-token,#view-create,#view-profile,#view-docs,
#view-terminal,#view-stocks,#view-stock,#view-watchlist,#view-chat,
#view-create-stock{
  animation:v4View .5s var(--v4-ease) both;
}
@keyframes v4View{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}

/* ==========================================================================
   16. DETTAGLI DI SISTEMA
   ========================================================================== */
::selection{background:rgba(var(--green-rgb),.32);color:#fff;}

/* Barra di scorrimento: sottile, senza frecce, con il pollice che si accende
   al passaggio. Su una pagina scura una scrollbar di sistema chiara e' la
   cosa che rompe l'illusione piu' in fretta. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--green-rgb),.45);
  background-clip:content-box;
}

/* Il fuoco da tastiera deve essere VISIBILE e uguale ovunque: e' l'unico
   modo in cui il sito e' usabile senza mouse. :focus-visible e non :focus,
   o l'anello comparirebbe anche al click del mouse. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(var(--green-rgb),.75);
  outline-offset:2px;
  border-radius:var(--v4-r-sm);
}

/* ==========================================================================
   17. SCHERMI STRETTI
   ==========================================================================
   Su telefono si spengono le cose che costano e non si vedono: il fuoco che
   segue il puntatore (non c'e' un puntatore), la grana (su un pannello
   piccolo e' rumore e basta), le ombre lunghe.
   ========================================================================== */
@media (max-width:760px){
  .v4-grain{opacity:.03;}
  .card::before,.tok-panel::before,.chart-card::before,.pf-panel::before,
  .feature-card::before,.pf-stat::before,.docs-sec::before,.tm-col::before{display:none;}
  :root{
    --v4-lift-2:0 2px 6px rgba(0,0,0,.45),0 12px 24px -18px rgba(0,0,0,.9);
    --v4-lift-3:0 4px 10px rgba(0,0,0,.5),0 20px 40px -24px rgba(0,0,0,1);
  }
}

/* ==========================================================================
   18. LE SINGOLE SCHERMATE
   ==========================================================================
   Fin qui il foglio ha lavorato sul linguaggio comune. Qui ci sono le poche
   cose che valgono per una schermata sola e che, senza, restavano indietro
   rispetto al resto.
   ========================================================================== */

/* ---- 18.1 LANCIA UN TOKEN ----
   Il titolo era della stessa taglia di un'intestazione di sezione, in cima a
   una pagina che chiede di compilare undici campi: chi arriva qui ha appena
   deciso di fare la cosa piu' importante del sito e la pagina non lo
   festeggiava affatto. */
#view-create > .wrap > h1,
#view-create-stock > .wrap > h1{
  /* La taglia e' in sezione 22, con quella della home e della landing: erano
     tre scale diverse per tre titoli dello stesso sito. */
  margin-top:6px;
  background:linear-gradient(180deg,#fff 8%,rgba(255,255,255,.74) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;margin-bottom:-.04em;
}
#view-create > .wrap > .sub,
#view-create-stock > .wrap > .sub{
  font-size:15px;max-width:62ch;line-height:1.65;margin-top:12px;
}
/* Il titoletto di ogni scheda del modulo: prima era testo grigio in
   maiuscoletto e si confondeva con le etichette dei campi. Ora ha un trattino
   nel colore della rete che lo precede — costa una riga e separa i due
   livelli senza aggiungere una linea. */
#view-create .card > h3,
#view-create-stock .card > h3{
  display:flex;align-items:center;gap:10px;
}
#view-create .card > h3::before,
#view-create-stock .card > h3::before{
  content:"";width:16px;height:2px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(90deg,var(--green),transparent);
}
/* L'anteprima segue chi scorre: e' il senso di un'anteprima, e prima usciva
   dallo schermo al secondo campo. */
@media (min-width:1080px){
  #view-create .create-side,
  #view-create-stock .create-side{position:sticky;top:88px;align-self:start;}
}
/* Il riquadro del logo: da quadrato grigio a bersaglio. Tratteggio che si
   accende, e l'invito a caricare che diventa il colore della rete. */
.img-preview{
  border-radius:var(--v4-r-lg);
  border:1.5px dashed var(--v4-edge-hi);
  background-image:var(--v4-glass-soft);
  transition:border-color var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease);
}
.img-preview:hover{
  border-color:rgba(var(--green-rgb),.6);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -16px rgba(var(--green-rgb),.9);
}

/* ---- 18.1b LE SCHEDE DEI TOKEN ----
   ==========================================================================
   E' la schermata dove si passa il tempo, ed era la piu' anonima: dodici
   righe grigie con un logo da 36px, tre numeri della stessa taglia e una
   barretta piatta. Tutto leggibile, niente gerarchia — l'occhio non sapeva
   dove posarsi per primo, quindi le leggeva tutte, quindi non ne leggeva
   nessuna.

   La riga resta una RIGA: la griglia a card fa sembrare ogni token un post,
   e dodici riquadri uguali non si confrontano perche' i numeri stanno in
   punti diversi di ognuno. Quello che cambia e' il peso relativo:

     - il logo cresce e prende un anello, cosi' e' un oggetto e non una
       macchia. E' anche l'unica immagine della riga: se non tira l'occhio
       lui, non lo tira niente.
     - il NOME sale di corpo e di peso; simbolo ed eta' scendono nel
       monospaziato spento. Erano quasi uguali, e il nome e' l'unica cosa che
       uno cerca davvero.
     - il MARKET CAP e' il numero grande. E' quello su cui si ordina la lista
       nove volte su dieci, ed era della stessa taglia del volume.
     - la barra diventa un termometro leggibile con la percentuale accanto, e
       si accende quando manca poco: sopra il 90% e' arancio, a 100 e' pieno.
       Prima un token al 12% e uno al 96% avevano la stessa barra grigia con
       un pezzetto colorato di lunghezza diversa, e la differenza — che e' la
       cosa piu' importante della lista — si leggeva solo dal numero.
     - al passaggio del mouse l'indirizzo del contratto lascia il posto a
       "Trade", perche' e' quello che il click fa. Il contratto resta
       copiabile: torna appena il mouse esce.
   ========================================================================== */
#view-home .tok-row,#view-stocks .tok-row,#view-watchlist .tok-row{
  padding-block:15px;
}

/* Il logo: 44px, angoli piu' morbidi, anello sottile e ombra propria. */
#view-home .tr-img,#view-stocks .tr-img,#view-watchlist .tr-img{
  width:44px;height:44px;border-radius:13px;font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),
             0 6px 16px -8px rgba(0,0,0,1);
}

/* Nome e sottotitolo: due pesi diversi, non due grigi diversi. */
#view-home .tr-n1,#view-stocks .tr-n1,#view-watchlist .tr-n1{
  font-size:15px;font-weight:600;letter-spacing:-.022em;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
#view-home .tr-n2,#view-stocks .tr-n2,#view-watchlist .tr-n2{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--text-mute);margin-top:4px;
}

/* LE ETICHETTE, RIPORTATE A DUE COLORI.
   Prima erano cinque tinte diverse nella stessa riga — verde, oro, viola,
   blu, arancio — e una lista lunga diventava un arcobaleno in cui nessuna
   delle cinque significava piu' niente: quando tutto e' evidenziato, non lo
   e' nulla. E' esattamente cio' che fa sembrare un prodotto messo insieme a
   pezzi invece che disegnato.
   Ora il colore lo prendono solo le due etichette che cambiano una decisione:
   "Refundable" (si puo' ancora uscire a prezzo di costo) e "Graduated" (non
   piu': ora e' mercato aperto). Tutto il resto — modalita' delle fee, tipo di
   prodotto — descrive com'e' fatto il token, non cosa rischi, e resta in
   grigio: si legge se la si cerca, non urla se non la si cerca. */
.tok-tag{
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:3px 8px;border-radius:99px;line-height:1.5;
  color:var(--text-dim);
  background:rgba(255,255,255,.045);
  border:1px solid var(--v4-edge-lo);
}
:root[data-theme="light"] .tok-tag{background:rgba(15,23,32,.04);}
/* Ridichiarate una per una: in v2.css queste hanno gia' una classe di tipo
   (.tok-tag.stock e compagnia), quindi pesano piu' della regola generica qui
   sopra e la vincerebbero comunque. Stesso grigio, esplicito. */
.tok-tag.stock,.tok-tag.classic,.tok-tag.burn,.tok-tag.lp{
  color:var(--text-dim);
  background:rgba(255,255,255,.045);
  border:1px solid var(--v4-edge-lo);
}
:root[data-theme="light"] .tok-tag.stock,
:root[data-theme="light"] .tok-tag.classic,
:root[data-theme="light"] .tok-tag.burn,
:root[data-theme="light"] .tok-tag.lp{background:rgba(15,23,32,.04);}
.tok-tag.refundable{
  color:#4ade80;background:rgba(74,222,128,.09);border-color:rgba(74,222,128,.24);
}
:root[data-theme="light"] .tok-tag.refundable{
  color:#137a3d;background:rgba(19,122,61,.07);border-color:rgba(19,122,61,.22);
}
.tok-tag.grad{
  color:var(--green);background:rgba(var(--green-rgb),.1);
  border-color:rgba(var(--green-rgb),.28);
}

/* Il market cap comanda, il volume lo accompagna. */
#view-home .tr-num[data-col="mcap"],#view-stocks .tr-num:first-of-type{
  font-size:15.5px;font-weight:600;letter-spacing:-.03em;color:var(--text);
}
#view-home .tr-num[data-col="vol"]{
  font-size:12.5px;color:var(--text-dim);
}

/* La sparkline aveva 96px e ci stava dentro una linea che non diceva niente.
   Piu' spazio e piu' altezza: o e' leggibile o e' decorazione. */
#view-home .tr-spark{height:30px;opacity:.9;transition:opacity var(--v4-t) var(--v4-ease);}
#view-home .tok-row:hover .tr-spark{opacity:1;}

/* IL TERMOMETRO.
   La barra sale a 6px e prende una scala di colore: verde-accento fino al
   70%, ambra oltre il 90, pieno acceso a 100. La percentuale accanto passa
   al monospaziato a larghezza fissa, o le cifre ballano da riga a riga. */
#view-home .tr-prog,#view-stocks .tr-prog{display:flex;align-items:center;gap:10px;}
#view-home .tr-bar,#view-stocks .tr-bar{
  flex:1;height:6px;border-radius:99px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
#view-home .tr-pct,#view-stocks .tr-pct{
  font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--text-dim);min-width:44px;text-align:right;flex-shrink:0;
}
/* Vicino al traguardo. La soglia e' scritta nel markup? No: la larghezza
   della barra e' l'unica cosa che il CSS vede, e da una larghezza non si
   ricava una condizione. Quindi il segnale sta sul colore del riempimento,
   che app.js gia' imposta in percentuale — qui aggiungo solo l'alone piu'
   forte man mano che la barra si riempie, che e' l'effetto voluto: piu' e'
   lunga, piu' brilla. */
#view-home .tr-bar-fill,#view-stocks .tr-bar-fill{
  box-shadow:0 0 10px -1px rgba(var(--green-rgb),.8),
             inset 0 1px 0 rgba(255,255,255,.25);
}

/* IL CONTRATTO CHE DIVENTA "TRADE".
   Il click sulla riga porta al token: la colonna a destra deve dirlo. Resta
   l'indirizzo, che serve a chi vuole copiarlo, e scompare solo mentre il
   mouse e' sulla riga. Le due etichette sono impilate nello stesso spazio,
   quindi niente si sposta quando si scambiano. */
#view-home .tr-ca,#view-stocks .tr-ca{position:relative;}
#view-home .tr-ca .token-ca-v,#view-stocks .tr-ca .token-ca-v{
  transition:opacity var(--v4-t) var(--v4-ease);
}
#view-home .tr-ca::after,#view-stocks .tr-ca::after{
  content:"Trade \2192";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-end;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--green);
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease);
  pointer-events:none;
}
#view-home .tok-row:hover .tr-ca .token-ca-v,#view-stocks .tok-row:hover .tr-ca .token-ca-v{opacity:0;}
#view-home .tok-row:hover .tr-ca::after,#view-stocks .tok-row:hover .tr-ca::after{opacity:1;transform:none;}
/* Mentre si punta l'indirizzo per copiarlo, l'indirizzo torna: altrimenti si
   clicca su "Trade" credendo di copiare. */
#view-home .tr-ca:hover .token-ca-v,#view-stocks .tr-ca:hover .token-ca-v{opacity:1 !important;}
#view-home .tr-ca:hover::after,#view-stocks .tr-ca:hover::after{opacity:0 !important;}

/* L'intestazione delle colonne, allineata al nuovo peso della riga. */
#view-home .tok-head,#view-stocks .tok-head{
  padding-block:13px;
  background:linear-gradient(180deg,var(--panel-2) 70%,transparent);
}

/* Su schermo stretto la griglia a sei colonne diventa una scheda impilata:
   li' le etichette per riga tornano, perche' non c'e' piu' una testata di
   colonna a cui riferirsi. */
@media (max-width:900px){
  #view-home .tr-n1,#view-stocks .tr-n1,#view-watchlist .tr-n1{font-size:15.5px;}
  #view-home .tr-num[data-col="mcap"],#view-stocks .tr-num:first-of-type{font-size:16px;}
  #view-home .tr-ca::after,#view-stocks .tr-ca::after{display:none;}
}

/* ---- 18.1c IL SELETTORE DI RETE ----
   ==========================================================================
   E' l'unico punto del prodotto in cui si passa da una rete all'altra, ed era
   un elenco di cinque righe di testo con un puntino davanti. Ora ogni voce
   porta il proprio logo, il gas con cui si paga e il DEX su cui migra: le tre
   cose che distinguono una rete dall'altra, e le stesse che la landing mostra
   sulle carte — cosi' chi arriva dalla landing ritrova la stessa scheda.
   Il colore di ogni riga e' quello della SUA rete (--i-rgb, messa da
   chains.js), non dell'attiva: in un menu le voci devono distinguersi fra
   loro, o tornano a essere cinque righe grigie.
   ========================================================================== */
.chain-menu{
  border-radius:var(--v4-r-lg);
  padding:6px;min-width:246px;
  background-image:var(--v4-glass);
  box-shadow:var(--v4-inner),var(--v4-lift-3);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.chain-item{
  display:flex;align-items:center;gap:11px;
  width:100%;padding:9px 11px;border-radius:var(--v4-r-md);
  position:relative;
  transition:background var(--v4-t) var(--v4-ease);
}
.chain-item-logo{
  width:22px;height:22px;flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(var(--i-rgb,255,255,255),.5));
}
.chain-item-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;flex:1;}
.chain-item-label{font-size:13.5px;font-weight:550;letter-spacing:-.015em;}
.chain-item-sub{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.chain-item:hover{background:rgba(var(--i-rgb,255,255,255),.09);}
.chain-item.active{
  background:rgba(var(--i-rgb,255,255,255),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--i-rgb,255,255,255),.28);
}
/* Il pallino passa a destra e diventa lo stato "sei qui": a sinistra
   duplicava il logo, che il colore della rete lo porta gia'. */
.chain-item .chain-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-left:auto;
  opacity:0;transition:opacity var(--v4-t) var(--v4-ease);
}
.chain-item.active .chain-dot{
  opacity:1;box-shadow:0 0 10px rgba(var(--i-rgb,255,255,255),.9);
}
.chain-soon{
  margin-left:auto;flex-shrink:0;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;border:1px solid currentColor;
  opacity:.75;
}
/* Il bottone che apre il menu: il logo della rete attiva accanto al nome. */
.chain-trigger{
  border-radius:999px;
  border-color:var(--v4-edge-lo);
  background-image:var(--v4-glass-soft);
  transition:border-color var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease),
             transform var(--v4-t-fast) var(--v4-ease);
}
.chain-trigger:hover{
  border-color:rgba(var(--green-rgb),.45);
  transform:translateY(-1px);
  box-shadow:0 8px 22px -14px rgba(var(--green-rgb),1);
}

/* ---- 18.1d I TITOLI DI SEZIONE E IL RITMO DELLE SCHERMATE ----
   ==========================================================================
   Ogni schermata dell'applicazione apre con un titolo da 15px preceduto da
   una barretta colorata. A quella taglia un titolo non e' un titolo: e'
   un'etichetta, e infatti "Chat", "Watchlist" e "How it works" si leggevano
   come voci di menu finite in mezzo alla pagina.

   Qui salgono a una misura da titolo e la barretta diventa un filo che si
   spegne — la stessa figura della linea sotto la barra in alto e sopra il
   piede, cosi' le tre ricorrono e la pagina ha una punteggiatura sola.
   Nessuna misura di layout cambia: solo corpo, peso e crenatura.
   ========================================================================== */
.section-title{
  font-size:21px;font-weight:640;letter-spacing:-.032em;
}
#view-home .section-title{font-size:21px;}
.section-head{
  gap:12px;margin-block:34px 16px;
  align-items:center;
}
/* LA BARRETTA D'ACCENTO STA SU .section-title::before, NON SU .section-head.
   Ci ho messo la regola sbagliata al primo tentativo: .section-head::before
   in v3 e' tutt'altro — il filo orizzontale che fa da bordo superiore al
   pannello della lista — e con un width:3px !important glielo avevo
   accorciato a una scheggia. Qui si tocca solo il trattino verticale
   davanti al titolo, che e' l'elemento che intendevo: diventa un filo che
   si spegne verso il basso invece di un rettangolo pieno, e cresce con il
   titolo che ora e' piu' alto. */
.section-title::before{
  width:3px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,var(--green),rgba(var(--green-rgb),.15));
  box-shadow:0 0 14px rgba(var(--green-rgb),.6);
}

/* IL BLOCCO "COSA SI PUO' LANCIARE".
   Chiuso era una riga di testo grigio con una freccia in fondo, appoggiata
   su una linea: non sembrava un comando, sembrava un residuo. Ora e' una
   superficie con un bordo, e la freccia sta in un tondo — cioe' ha l'aspetto
   di una cosa che si apre. */
#view-home .modes{
  border-radius:var(--v4-r-lg);
  border:1px solid transparent;
  background-image:var(--v4-glass-soft);
  box-shadow:var(--v4-inner),var(--v4-lift-1);
  margin-block:4px 16px;
  transition:box-shadow var(--v4-t) var(--v4-ease);
}
#view-home .modes:hover{box-shadow:var(--v4-inner),var(--v4-lift-2);}
#view-home .modes summary{
  padding:15px 18px;font-size:13.5px;font-weight:550;color:var(--text-dim);
}
#view-home .modes summary:hover{color:var(--text);}
#view-home .modes summary i{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--v4-edge-lo);
  transform:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  transition:transform .4s var(--v4-ease),border-color .4s var(--v4-ease),
             background .4s var(--v4-ease);
}
/* La freccia dentro il tondo: due lati di un quadrato ruotato, come prima,
   ma disegnati da un ::before cosi' il tondo puo' restare fermo mentre la
   punta gira. */
#view-home .modes summary i::before{
  content:"";width:7px;height:7px;margin-top:-3px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s var(--v4-ease);
}
#view-home .modes summary:hover i{
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(var(--green-rgb),.08);
}
#view-home .modes[open] summary i::before{transform:rotate(-135deg);margin-top:3px;}
#view-home .modes[open]{
  border-color:transparent;
  background-image:var(--v4-glass);
  box-shadow:var(--v4-inner),var(--v4-lift-2);
}
#view-home .mode{
  border-radius:var(--v4-r-md);
  background-image:var(--v4-glass-soft);
  box-shadow:inset 0 0 0 1px var(--v4-edge-lo);
  transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease);
}
#view-home .mode:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3),
             0 10px 26px -16px rgba(var(--green-rgb),.9);
}

/* GLI STATI VUOTI, con qualcosa da guardare.
   "Nothing starred yet" in grigio al centro di un riquadro alto 130px si
   legge come un errore di caricamento. Il tratteggio dice "qui ci va
   qualcosa e non c'e' ancora", che e' la verita', e costa una riga. */
.empty-state,.pf-empty,#view-watchlist .empty-state{
  border:1px dashed var(--v4-edge-lo);
  border-radius:var(--v4-r-lg);
  padding-block:52px;
  font-size:13.5px;
}

/* LA COLONNA DI SINISTRA DELL'HERO.
   Il titolo e il paragrafo occupano 250px in una colonna alta 420: sotto
   restava un buco. Le tre garanzie lo riempiono con l'unica cosa che manca
   davvero li' — il motivo per cui fidarsi — e sono le stesse tre della
   landing, quindi chi arriva da li' le ritrova.
   Il markup non c'e': queste regole servono a .pitch-facts, che aggiungo in
   index.html. Restano inerti se quel blocco non esiste. */
#view-home .pitch{display:flex;flex-direction:column;}
#view-home .pitch-facts{
  margin-top:auto;padding-top:24px;
  display:flex;flex-direction:column;gap:1px;
}
#view-home .pf-line{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-top:1px solid var(--v4-edge-lo);
}
#view-home .pf-line:last-child{border-bottom:1px solid var(--v4-edge-lo);}
#view-home .pf-line svg{
  width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--green);
}
#view-home .pf-line b{font-size:13.5px;font-weight:600;letter-spacing:-.018em;color:var(--text);}
#view-home .pf-line span{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text-dim);
}
@media (max-width:1080px){
  /* Il markup di .pitch-facts e' stato tolto da index.html: la regola resta
   solo perche' l'hero delle chain non ancora attive lo ricostruirebbe, e in
   quel caso deve restare invisibile come qui. */
#view-home .pitch-facts{display:none;}   /* sotto, la lista arriva subito */
}

/* ---- 18.1e IL CASSETTO SU TELEFONO ----
   E' la navigazione intera del sito su schermo stretto, ed era un pannello
   opaco color fondo con sette voci grigie. Vetro sfocato sopra la pagina,
   voci piu' alte (sono bersagli per il dito, 34px erano pochi), il logo di
   ogni rete al posto del pallino, e i due bottoni in fondo con i ruoli
   giusti. La transizione passa dalla curva lineare di 200ms alla curva del
   resto del sito: un cassetto che scatta sembra un menu di sistema. */
@media (max-width:900px){
  .sidebar{
    width:292px;
    background:linear-gradient(180deg,
      rgba(var(--v4-bar-rgb,6,9,13),.92),rgba(var(--v4-bar-rgb,6,9,13),.86));
    backdrop-filter:blur(22px) saturate(1.3);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);
    border-right:1px solid var(--v4-edge-lo);
    box-shadow:30px 0 80px -30px rgba(0,0,0,1);
    transition:transform .5s var(--v4-ease);
    padding-inline:14px;
  }
  .sidebar .side-label{padding-top:20px;letter-spacing:.16em;}
  .sidebar .side-link{
    padding:12px 12px;border-radius:var(--v4-r-md);font-size:15px;gap:12px;
    transition:background var(--v4-t) var(--v4-ease),color var(--v4-t-fast) var(--v4-ease);
  }
  .sidebar .side-link svg{width:18px;height:18px;}
  .sidebar .side-link.active{
    background:rgba(var(--green-rgb),.1);
    box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24);
  }
  .sidebar .side-link.active::before{display:none;}
  .backdrop{
    background:rgba(2,4,7,.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    transition:opacity .5s var(--v4-ease);
  }
  .m-menu-btn,.m-search-btn,.theme-btn{
    border-radius:999px;
    border-color:var(--v4-edge-lo);
    background-image:var(--v4-glass-soft);
  }
}
/* Il logo della rete nel cassetto e nella colonna laterale, al posto del
   pallino: e' messo da chains.js (initSidebarChains). */
.side-chain-logo{
  width:20px;height:20px;flex-shrink:0;
  filter:drop-shadow(0 0 8px var(--chain-accent-soft,transparent));
}
.side-chain .side-chain-dot{display:none;}

/* ---- 18.2 PROFILO ----
   Lo striscione era un rettangolo con un gradiente e nient'altro: la prima
   cosa che si vede della propria pagina, ed era la meno curata del sito.
   Qui prende tre strati — la luce della rete in alto a sinistra, un
   reticolo finissimo che sfuma verso destra, e una linea accesa in basso su
   cui l'avatar si appoggia. */
.pf-banner{
  height:132px;border-radius:var(--v4-r-xl);
  background:
    radial-gradient(90% 200% at 4% 0%, rgba(var(--green-rgb),.3), transparent 58%),
    radial-gradient(70% 160% at 96% 10%, rgba(var(--green-rgb),.1), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 70%),
    var(--panel-2);
  box-shadow:var(--v4-inner),var(--v4-lift-2);
  overflow:hidden;
}
.pf-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(100deg,#000,transparent 62%);
  mask-image:linear-gradient(100deg,#000,transparent 62%);
}
.pf-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--green-rgb),.7),transparent 62%);
  opacity:1;
}
.pf-avatar{
  border-radius:var(--v4-r-lg);
  box-shadow:0 0 0 3px var(--bg),
             inset 0 1px 0 rgba(255,255,255,.18),
             0 14px 34px -12px rgba(0,0,0,1),
             0 0 34px -12px rgba(var(--green-rgb),.7);
  transition:transform var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease);
}
.pf-avatar:hover{transform:translateY(-2px) scale(1.02);}
.pf-name{letter-spacing:-.035em;}

/* ---- 18.3 DOCS ----
   Due problemi, uno di forma e uno di sostanza.

   FORMA: la pagina era una colonna sola con sette schede in cima e, sotto,
   un riquadro alto trecento pixel in mezzo a mille di vuoto. Su uno schermo
   da desktop sembrava una pagina non finita di caricare.
   Sopra i 1040px diventa quindi una documentazione vera: indice a sinistra,
   fisso mentre si legge, e testo a destra. Nessuna riga di markup cambia —
   .docs-wrap diventa una griglia e i tre pezzi che gia' contiene vengono
   collocati. I pannelli nascosti sono display:none e quindi escono dal
   flusso della griglia: quello visibile finisce sempre nella stessa cella.

   SOSTANZA: e' una pagina di sola lettura, quindi conta solo quanto e'
   facile leggerla. Misura di riga piu' corta, interlinea piu' alta, e le
   frasi marcate che smettono di essere grassetto e diventano evidenziate nel
   colore della rete. */
@media (min-width:1040px){
  #view-docs .docs-wrap{
    display:grid;
    /* La cornice e' quella di tutte le altre pagine (sezione 29), ma la
       colonna del testo si ferma a 760: sopra i settanta caratteri per riga
       l'occhio perde il capo della riga successiva, e questa e' una pagina
       che si legge dall'inizio alla fine. Il blocco si ancora a sinistra,
       quindi l'indice parte dove parte il titolo di ogni altra schermata. */
    /* Era 216px + 760px fissi, ancorati a sinistra: su uno schermo da 1440
       restavano 290px di pagina vuota alla destra del riquadro, e il blocco
       sembrava caduto in un angolo. La MISURA DI LETTURA pero' va difesa: e'
       il motivo per cui c'era il 760.
       Le due cose non sono in conflitto, perche' sono due cose diverse. La
       SUPERFICIE (il riquadro, il suo fondo, il suo bordo) puo' arrivare fino
       in fondo; il TESTO dentro resta a 72 caratteri per riga, come dice la
       regola piu' sotto. E' esattamente come e' fatta ogni documentazione
       tecnica che si legge volentieri. */
    grid-template-columns:216px minmax(0,1fr);
    justify-content:start;
    column-gap:48px;
    align-items:start;
    max-width:1360px;
  }
  #view-docs .docs-head{grid-column:1/-1;margin-bottom:30px;}
  #view-docs .docs-toc{
    grid-column:1;grid-row:2;
    position:sticky;top:88px;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    padding-right:16px;
    border-right:1px solid var(--v4-edge-lo);
  }
  #view-docs .docs-tab{
    text-align:left;border-radius:var(--v4-r-sm);
    padding:9px 12px;letter-spacing:0;
    border:0;background:none;
    position:relative;
  }
  #view-docs .docs-tab::before{
    content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;
    border-radius:0 2px 2px 0;background:var(--green);
    transform:scaleY(0);transform-origin:center;
    transition:transform var(--v4-t) var(--v4-ease);
  }
  #view-docs .docs-tab.active::before{transform:scaleY(1);}
  #view-docs .docs-tab.active{background:rgba(var(--green-rgb),.08);box-shadow:none;}
  #view-docs .docs-tab:hover{transform:none;background:rgba(255,255,255,.045);}
  #view-docs .docs-panel{grid-column:2;grid-row:2;}
  #view-docs .docs-foot{grid-column:2;margin-top:36px;}
}
#view-docs .docs-panel p,#view-docs .docs-sec p{
  line-height:1.75;max-width:72ch;font-size:14.5px;
}
#view-docs .docs-panel strong,#view-docs .docs-sec strong{
  color:var(--text);
  box-shadow:inset 0 -.36em 0 rgba(var(--green-rgb),.22);
}
#view-docs .docs-sec,#view-docs .docs-panel{padding-block:26px;}
#view-docs .docs-sec h2,#view-docs .docs-sec h3,#view-docs .docs-panel h3{
  letter-spacing:-.03em;
}
#view-docs > .wrap > h1{
  font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 8%,rgba(255,255,255,.74) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;margin-bottom:-.04em;
}

/* ---- 18.4 TERMINAL ----
   Le tre colonne sono gia' la schermata piu' riuscita del sito. Qui prendono
   solo la testata appiccicata in cima — scorrendo una colonna lunga si
   perdeva di vista quale delle tre si stava leggendo. */
#view-terminal .tm-col-head{
  position:sticky;top:0;z-index:4;
  background:linear-gradient(180deg,var(--panel) 72%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ---- 18.5 GLI STATI VUOTI ----
   Una lista vuota diceva una riga di testo grigio in mezzo al niente. Non
   posso cambiare le parole da qui, ma posso far sembrare quel vuoto una
   scelta invece di un caricamento andato male. */
.empty-state,.pf-empty{
  border-radius:var(--v4-r-lg);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(var(--green-rgb),.05), transparent 70%);
}

/* ---- 18.6 LA PAGINA DI UN TOKEN ----
   ==========================================================================
   E' la schermata dove si spendono i soldi, ed era la piu' timida del sito.
   Tre cose non funzionavano, e sono tre problemi di GERARCHIA, non di stile:

   1. LA TESTATA non diceva di che token si trattava. Logo da 56px, nome da
      20px e prezzo da 23px stavano tutti sulla stessa riga con lo stesso
      peso, e il prezzo — il numero per cui uno apre la pagina — finiva
      schiacciato a destra sotto una didascalia da 10px.
   2. LA FASCIA DEI NUMERI erano sei riquadri da 60px di altezza su due righe:
      metà della prima schermata spesa per sei valori che stanno in una riga.
   3. LA CARD DENTRO LA CARD. Il grafico e' una .chart-card dentro una
      .tk2-card: due bordi e due fondi concentrici a 14px di distanza, che e'
      il difetto piu' visibile della pagina appena si sa riconoscerlo.
   ========================================================================== */

/* --- 1. la testata --- */
#view-token .tk2-head,#view-stock .tk2-head{
  padding:24px 26px;
  border-radius:var(--v4-r-xl);
  background:
    radial-gradient(80% 160% at 0% 0%, rgba(var(--green-rgb),.13), transparent 58%),
    linear-gradient(180deg,var(--panel),var(--bg-1));
  box-shadow:var(--v4-inner),var(--v4-lift-2);
  align-items:flex-start;
}
#view-token .tk2-img,#view-stock .tk2-img{
  width:72px;height:72px;border-radius:20px;font-size:26px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             0 10px 28px -10px rgba(0,0,0,1),
             0 0 34px -14px rgba(var(--green-rgb),.8);
}
#view-token .tk2-name,#view-stock .tk2-name{
  font-size:clamp(24px,2.6vw,34px);font-weight:650;letter-spacing:-.038em;
  line-height:1.1;
}
#view-token .tk2-sym,#view-stock .tk2-sym{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  padding:4px 9px;border-radius:8px;
  background:rgba(var(--green-rgb),.1);
  border-color:rgba(var(--green-rgb),.26);
  color:var(--green);
}
#view-token .tk2-meta,#view-stock .tk2-meta{margin-top:9px;font-size:12px;}
/* Il prezzo e' il motivo per cui si apre la pagina: prende la taglia che
   merita, e l'etichetta gli va SOPRA in maiuscoletto invece che sotto in
   grigio — cosi' il numero e' l'ultima cosa che si legge e quella che resta. */
#view-token .tk2-px,#view-stock .tk2-px{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:7px;}
#view-token .tk2-px-v,#view-stock .tk2-px-v{
  font-size:clamp(26px,2.8vw,36px);letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff 12%,rgba(255,255,255,.72) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="light"] #view-token .tk2-px-v,:root[data-theme="light"] #view-stock .tk2-px-v{
  background:linear-gradient(180deg,#0d141d 12%,rgba(13,20,29,.74) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#view-token .tk2-px-l,#view-stock .tk2-px-l{
  margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);
}
#view-token .tk2-ib,#view-stock .tk2-ib{
  width:40px;height:40px;border-radius:13px;
  border-color:var(--v4-edge-lo);background-image:var(--v4-glass-soft);
  transition:transform var(--v4-t-fast) var(--v4-ease),
             border-color var(--v4-t) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
#view-token .tk2-ib:hover,#view-stock .tk2-ib:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--green-rgb),.5);
  box-shadow:0 8px 22px -12px rgba(var(--green-rgb),1);
}

/* --- 2. la fascia dei numeri ---
   Sei celle in UNA riga sopra i 1080px: e' una fascia di strumenti, non una
   griglia di riquadri. I separatori sfumano alle estremita', come sulla home:
   un filo pieno da bordo a bordo taglia la fascia in scomparti. */
#view-token .tk2-kpi,#view-stock .tk2-kpi{
  border-radius:var(--v4-r-lg);
  background-image:var(--v4-glass-soft);
  box-shadow:var(--v4-inner),var(--v4-lift-1);
}
@media (min-width:1080px){
  #view-token .tk2-kpi,#view-stock .tk2-kpi{grid-template-columns:repeat(6,minmax(0,1fr));}
  #view-token .tk2-kpi>div:nth-child(n+4),#view-stock .tk2-kpi>div:nth-child(n+4){border-top:0;}
  #view-token .tk2-kpi>div:nth-child(3n),#view-stock .tk2-kpi>div:nth-child(3n){border-right:0;}
}
#view-token .tk2-kpi>div,#view-stock .tk2-kpi>div{
  position:relative;padding:15px 18px;border-right:0;border-top:0;
  transition:background var(--v4-t) var(--v4-ease);
}
#view-token .tk2-kpi>div:hover,#view-stock .tk2-kpi>div:hover{
  background:radial-gradient(130% 150% at 50% 0%,rgba(var(--green-rgb),.08),transparent 72%);
}
#view-token .tk2-kpi>div + div::before,#view-stock .tk2-kpi>div + div::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,var(--v4-edge-hi) 30%,
    var(--v4-edge-hi) 70%,transparent);
}
#view-token .tk2-k,#view-stock .tk2-k{letter-spacing:.15em;font-size:9px;}
#view-token .tk2-v,#view-stock .tk2-v{font-size:18px;letter-spacing:-.03em;margin-top:6px;}

/* --- 3. via la card dentro la card ---
   Il grafico e le altre schede vivono gia' dentro .tk2-card: qui perdono il
   proprio bordo, il proprio fondo e la propria ombra, e restano solo il
   contenuto. Nessun elemento si sposta — spariscono un bordo e un padding. */
#view-token .tk2-pane > .card,
#view-token .tk2-pane > .chart-card,
#view-stock .tk2-pane > .card,#view-stock .tk2-pane > .chart-card{
  background:none;background-image:none;
  border:0;box-shadow:none;border-radius:0;
  padding-inline:18px;
}
#view-token .tk2-pane > .card::after,#view-stock .tk2-pane > .card::after,#view-stock .tk2-pane > .chart-card::after,#view-stock .tk2-pane > .chart-card::before,
#view-token .tk2-pane > .chart-card::after,
#view-token .tk2-pane > .card::before,
#view-token .tk2-pane > .chart-card::before{display:none;}

/* --- la barra verso la migrazione ---
   E' la barra piu' importante del prodotto: dice quanto manca alla fine del
   rimborso. Sale a 8px, prende l'alone della rete e la luce che la percorre
   (qui si', perche' e' UNA e sta dicendo "sta succedendo adesso"). */
#view-token .tk2-bond,#view-stock .tk2-bond{padding:14px 18px;}
#view-token .tk2-bond-bar,#view-stock .tk2-bond-bar{
  height:8px;border-radius:99px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
#view-token .tk2-bond-bar > span,#view-stock .tk2-bond-bar > span{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,
    rgba(var(--green-rgb),.5) 0%,var(--green) 60%,var(--green-hi) 100%);
  box-shadow:0 0 14px -2px rgba(var(--green-rgb),.9);
}
#view-token .tk2-bond-bar > span::after,#view-stock .tk2-bond-bar > span::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42) 50%,transparent);
  transform:translateX(-100%);
  animation:v4Sweep 2.8s var(--v4-ease-soft) infinite;
}
#view-token .tk2-bond-t b,#view-stock .tk2-bond-t b{font-size:15px;letter-spacing:-.02em;}

/* --- il pannello di acquisto ---
   Deve essere l'oggetto piu' presente dello schermo, non uno dei riquadri.
   Su schermo alto resta appiccicato mentre il grafico scorre: e' l'unica
   cosa della pagina che si usa, e scorrere per ritrovarla e' assurdo. */
#view-token .tk2-side > .card:first-child,
#view-token .trade-card,#view-token .buy-card,#view-stock .trade-card{
  box-shadow:var(--v4-inner),var(--v4-lift-3);
}
@media (min-width:1080px) and (min-height:820px){
  #view-token .tk2-side,#view-stock .tk2-side{position:sticky;top:82px;}
}
#view-token .trade-tab-row,#view-stock .trade-tab-row{
  border-radius:99px;padding:4px;
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
#view-token .trade-tab,#view-stock .trade-tab{border-radius:99px;font-weight:600;}
#view-token .trade-tab.active{
  box-shadow:inset 0 0 0 1px rgba(var(--buy-rgb),.4),
             0 6px 18px -10px rgba(var(--buy-rgb),.9);
}

#view-token .tk2-sym,#view-token .tk-name,#view-stock .tk-name{letter-spacing:-.035em;}

/* ==========================================================================
   19. L'INGRESSO
   ==========================================================================
   E' il pezzo che mancava, e spiega perche' l'applicazione "sembrava uguale".

   v2.js aveva una sequenza d'ingresso vera: hero in tre tempi, curva che si
   disegna, numeri che contano. Puntava a .hero, .hero-curve e .hero-copy,
   e v3 ha rifatto la home senza quegli elementi. Da allora l'app non ha
   nessun ingresso: si accende e basta, tutto insieme, allo stesso istante.
   La luce e i materiali di v4 non potevano bastare, perche' si vedono solo
   quando uno li cerca; l'ingresso lo vede chiunque, perche' e' la prima cosa
   che succede.

   COME FUNZIONA. v4.js mette `v4-intro` su <html> quando l'app e' pronta a
   entrare (dopo il benvenuto se c'e', altrimenti subito). Le regole qui
   sotto valgono SOLO con quella classe, con un ritardo scalato per ogni
   pezzo: la barra scende, il titolo sale riga per riga da sotto una maschera,
   il pannello in evidenza scivola da destra e si mette a fuoco, i numeri
   contano (v4.js), le righe della lista entrano in cascata. Un secondo e
   mezzo in tutto, una volta per caricamento, mai al cambio di rotta.

   SENZA JS non succede niente: lo stato nascosto esiste solo sotto
   html.v4-intro, quindi una pagina senza script e' semplicemente ferma.
   ========================================================================== */
/* PERCHE' E' STATO RIFATTO.
   C'erano quindici elementi con quindici ritardi diversi, distribuiti su
   1,1 secondi: la barra, poi la prima riga del titolo, poi la seconda, poi
   il paragrafo, poi le tre garanzie una alla volta, poi il pannello che
   arrivava da destra sfocato, poi la fascia dei numeri, poi i quattro numeri
   uno per uno, poi le modalita', poi la lista, poi le righe della lista in
   sedici passi. Ogni singolo pezzo era curato; messi insieme davano
   l'impressione che la pagina si stesse ancora caricando, o che si fosse
   rotta a meta'. Un ingresso si nota quando e' UNO: quindici ingressi sono
   quindici attese.

   Restano due movimenti. La prima schermata (titolo e pannello) sale insieme
   come un blocco solo; quello che sta sotto la piega la segue subito dopo,
   sempre tutto insieme. Mezzo secondo in tutto invece di uno e mezzo, e
   niente sfocature: era la sfocatura a far sembrare il pannello un'immagine
   che non aveva finito di scaricarsi. */
html.v4-intro .topbar{
  animation:v4TopIn .5s var(--v4-ease) backwards;
}
@keyframes v4TopIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}

/* PRIMO MOVIMENTO: la prima schermata, in un pezzo solo.
   Il titolo NON si anima riga per riga. Una maschera per riga e' bella su una
   copertina, dove non c'e' altro; qui c'era anche un pannello che entrava da
   un'altra direzione nello stesso istante, e due movimenti contrari sulla
   stessa schermata si leggono come un errore. */
html.v4-intro #view-home .pitch,
html.v4-intro #view-home .feature{
  animation:v4Up .55s var(--v4-ease) .06s backwards;
}
@keyframes v4Up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* SECONDO MOVIMENTO: tutto il resto, insieme, appena dopo. */
html.v4-intro #view-home .market-bar,
html.v4-intro #view-home .trust,
html.v4-intro #view-home .modes,
html.v4-intro #view-home .tok-panel{
  animation:v4Up .55s var(--v4-ease) .2s backwards;
}

/* ==========================================================================
   20. IL FONDO DELL'HERO: NIENTE
   ==========================================================================
   Qui c'erano due effetti, e sono stati tolti tutti e due.

   LA CURVA. Un SVG largo quanto la colonna, dietro il titolo, con l'area
   sfumata sotto e un punto luminoso che la percorreva ogni sette secondi.
   Il problema non era l'esecuzione, era il soggetto: una curva ascendente
   su fondo scuro e' lo sfondo di ogni progetto del settore, e a forza di
   stare ovunque ha smesso di significare qualcosa. Non diceva "questo
   prodotto e' una curva di bonding", diceva "sito di criptovalute", che e'
   esattamente l'impressione da cui un launchpad serio deve stare lontano.
   In piu' passava DIETRO il paragrafo: una riga di testo attraversata da un
   tratto luminoso si legge peggio e sembra un errore di montaggio.

   LA LUCE CHE PASSA. Una banda chiara che attraversava l'hero in diagonale
   ogni nove secondi. Stessa storia: e' l'effetto "shimmer" dei modelli
   comprati, e su una schermata che mostra prezzi veri un luccichio
   periodico non aggiunge fiducia, la toglie.

   Il fondo dell'hero adesso e' il fondo della pagina. A portare la
   schermata restano la frase, i numeri e il token in evidenza, che sono
   cose vere. Una curva il sito ce l'ha gia', ed e' quella del grafico
   accanto, con i suoi dati sotto e la sua scala.
   ========================================================================== */
#view-home .pitch{position:relative;isolation:isolate;}
#view-home .split{position:relative;}

/* L'INSEGNA DELLE RETI NON ANCORA ATTIVE.
   Con la scheda del token nascosta, v3 porta la griglia a una colonna e ferma
   la colonna del titolo a 62 caratteri: su uno schermo da 1440 restavano
   settecento pixel vuoti a destra, e Arc e Solana sembravano una pagina
   diversa dalle altre tre. Ora nella cella libera va il riquadro che descrive
   la rete, e la geometria torna quella di tutte: due colonne, testo a
   sinistra, stato a destra.
   Stessa specificita' della regola di v3 (id + classe + :has con due classi),
   e questo foglio viene dopo: vince senza !important. */
#view-home .split:has(> .chain-notice:not(.hidden)){
  grid-template-columns:1fr 1.15fr;
}
#view-home .split > .chain-notice:not(.hidden){
  grid-column:2;grid-row:1;align-self:start;margin:0;
}
#view-home .split:has(> .chain-notice:not(.hidden)) .pitch{
  max-width:none;padding:4px;
}
/* Il titolo torna alla scala delle reti attive: accanto ha di nuovo un
   contrappeso, quindi non ha piu' bisogno di crescere per riempire. */
#view-home .split:has(> .chain-notice:not(.hidden)) .pitch h1{
  font-size:clamp(27px,2.75vw,40px);
}
@media (max-width:1080px){
  /* A colonna unica il riquadro torna in cima, dove stava: e' la prima cosa
     da sapere prima di leggere qualunque altra. */
  #view-home .split > .chain-notice:not(.hidden){order:0;margin-bottom:14px;}
}

/* ==========================================================================
   21. INCLINAZIONE
   ==========================================================================
   Il pannello in evidenza e le carte grandi si inclinano di pochi gradi
   verso il puntatore (v4.js scrive --v4-rx/--v4-ry). E' il gesto delle
   carte-prodotto di Apple: la superficie risponde alla mano. Quattro gradi
   e non di piu', perche' oltre i bordi del testo si distorcono.
   ========================================================================== */
.v4-tilt{
  transform:perspective(1100px) rotateX(var(--v4-rx,0deg)) rotateY(var(--v4-ry,0deg)) translateZ(0);
  transition:transform .6s var(--v4-ease);
  transform-style:preserve-3d;
}
.v4-tilt.v4-tilting{transition:transform .12s ease-out;}

/* ==========================================================================
   22. IL BENVENUTO
   ==========================================================================
   La prima cosa che un nuovo utente vede e' il modale dei termini. Era una
   finestra grigia con quattro paragrafi e una casella: l'inizio piu' triste
   possibile per un prodotto che vuole sembrare costato qualcosa.
   Il markup non cambia (e' legale, e app.js ne legge gli id). Cambia tutto
   il resto: il logo della rete grande e in luce, il titolo da titolo, i
   quattro paragrafi come quattro righe con una tacca colorata, la casella
   che si accende, il bottone pieno con il riflesso. Dietro, l'aurora della
   rete che si muove: e' l'unica cosa sullo schermo, quindi puo' permettersi
   di essere piu' forte che altrove.
   ========================================================================== */
#termsModal{
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(var(--green-rgb),.22), transparent 60%),
    radial-gradient(60% 55% at 85% 90%, rgba(var(--v2-field-2,20,110,170),.18), transparent 60%),
    rgba(2,4,7,.86);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
#termsModal::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 40% at 50% 50%, rgba(var(--green-rgb),.16), transparent 70%);
  animation:v4Aurora 14s ease-in-out infinite alternate;
}
@keyframes v4Aurora{from{transform:translate3d(-8%,-6%,0) scale(1);}to{transform:translate3d(8%,6%,0) scale(1.15);}}
#termsModal .modal{
  max-width:560px;padding:44px 44px 38px;
  border-radius:28px;
  text-align:left;
  animation:v4Welcome .9s var(--v4-ease) .1s both;
}
@keyframes v4Welcome{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}}
/* Il logo: un ::before con l'immagine della rete attiva. Le cinque classi
   data-chain sotto scelgono il file, cosi' il benvenuto ha il marchio giusto
   su ogni rete senza toccare il markup. */
#termsModal .modal::before{
  content:"";display:block;width:64px;height:64px;margin:0 0 22px;
  background:url("logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(var(--green-rgb),.75));
  animation:v4LogoIn 1.2s var(--v4-ease) .2s both;
}
:root[data-chain="arc"] #termsModal .modal::before{background-image:url("logo-arc.png");}
:root[data-chain="bsc"] #termsModal .modal::before{background-image:url("logo-bsc.png");}
:root[data-chain="hyperevm"] #termsModal .modal::before{background-image:url("logo-hyper.png");}
:root[data-chain="solana"] #termsModal .modal::before{background-image:url("logo-solana.png");}
@keyframes v4LogoIn{from{opacity:0;transform:scale(.6) rotate(-30deg);}to{opacity:1;transform:none;}}
#termsModal h2{
  font-size:clamp(26px,3vw,34px);font-weight:650;letter-spacing:-.04em;line-height:1.08;
  margin-bottom:10px;
}
#termsModal .modal-sub{
  font-size:10px;letter-spacing:.2em;color:var(--green);margin-bottom:26px;
}
#termsModal .modal > p{
  position:relative;padding:12px 0 12px 22px;margin:0;
  font-size:13.5px;line-height:1.6;color:var(--text-dim);
  border-top:1px solid var(--v4-edge-lo);
}
#termsModal .modal > p:last-of-type{border-bottom:1px solid var(--v4-edge-lo);}
#termsModal .modal > p::before{
  content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 12px rgba(var(--green-rgb),.9);
}
#termsModal .modal > p strong{color:var(--text);}
#termsModal .accept-row{
  margin-top:24px;padding:14px 16px;border-radius:var(--v4-r-md);
  background:rgba(255,255,255,.03);
  border:1px solid var(--v4-edge-lo);
  transition:border-color var(--v4-t) var(--v4-ease),background var(--v4-t) var(--v4-ease);
}
#termsModal .accept-row:has(input:checked){
  border-color:rgba(var(--green-rgb),.5);
  background:rgba(var(--green-rgb),.07);
}
#termsModal .btn-enter{
  margin-top:16px;width:100%;padding:16px;
  border-radius:999px;font-size:15px;
}
#termsModal .btn-enter:disabled{opacity:.45;}

/* ==========================================================================
   23. LA HOME, CON UN RITMO
   ==========================================================================
   Tutti i blocchi della home avevano lo stesso peso: stessa larghezza,
   stesso fondo, stesso raggio, stessa distanza. Un elenco di pannelli, non
   una pagina. Qui si decide cosa domina in ogni schermata:
     - il titolo su DUE righe, non tre ("Change / your mind." orfano);
     - le cifre piu' grandi, perche' sono la prova;
     - una riga di fiducia subito sotto le cifre, dove uno se la chiede;
     - i titoli di sezione con una riga sotto, e piu' aria sopra.
   ========================================================================== */
/* 60px erano tarati su un titolo di due parole per riga. La frase ora e' una
   sola e deve stare in due righe dentro una colonna larga meta' schermo: a 44
   ci sta, a 60 andava a quattro righe e spingeva giu' tutto il resto.
   La taglia vera e' piu' sotto, nella sezione 22: qui restano solo le regole
   di impaginazione delle due righe. */
#view-home .pitch h1{letter-spacing:-.035em;line-height:1.1;}
#view-home .pitch h1 > span,
#view-home .pitch h1 > em{display:block;font-style:normal;}
#view-home .pitch h1 > br{display:none;}   /* con span ed em a blocco, il br e' una riga vuota */
#view-home .ms-item dd{font-size:30px;}
@media (max-width:760px){#view-home .ms-item dd{font-size:19px;letter-spacing:-.04em;}}

/* La riga della fiducia. Quattro voci con un segno di spunta nel colore
   della rete, in una riga sola, senza riquadro: e' una didascalia delle
   cifre, non un altro pannello. Sotto i 900px va su due colonne. */
#view-home .trust{
  list-style:none;margin:0 0 18px;padding:14px 22px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;
  border-radius:var(--v4-r-lg);
  background:linear-gradient(90deg,rgba(var(--green-rgb),.05),transparent 60%);
  box-shadow:inset 0 0 0 1px var(--v4-edge-lo);
}
#view-home .trust li{
  display:flex;align-items:center;gap:0;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--text-dim);
  min-width:0;line-height:1.35;
}
#view-home .trust li svg{
  width:18px;height:18px;padding:3.5px;border-radius:50%;flex-shrink:0;margin-right:10px;
  color:var(--green);
  background:rgba(var(--green-rgb),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3);
}
#view-home .trust .dexn{color:var(--text);font-weight:600;margin-left:.32em;}
@media (max-width:900px){
  #view-home .trust{grid-template-columns:1fr 1fr;padding:14px 16px;}
}
@media (max-width:520px){#view-home .trust{grid-template-columns:1fr;}}

/* I titoli di sezione, con la riga sotto e l'aria sopra. Il margine di
   .how e' inline nel markup (32px): l'unico !important di questa sezione. */
#view-home .how{margin-top:72px !important;}
#view-home .why{margin-top:64px;}
#view-home .how .section-head,#view-home .why .section-head{
  background:none;border:0;box-shadow:none;border-radius:0;
  padding:0;margin:0 0 6px;overflow:visible;
}
#view-home .how .section-head::before,#view-home .why .section-head::before{display:none;}
#view-home .how .section-title,#view-home .why .section-title{font-size:26px;}
#view-home .section-lede{
  margin:0 0 24px 15px;font-size:14.5px;line-height:1.6;color:var(--text-dim);
  max-width:60ch;
}
#view-home .why .section-lede{margin-bottom:18px;}

/* ==========================================================================
   24. L'INCHIOSTRO SOTTO LE SCHEDE
   ==========================================================================
   Le file di schede (filtri della home, schede del token, del profilo)
   cambiavano lo sfondo della voce attiva: la voce nuova si accende, la
   vecchia si spegne, e fra le due non succede niente. Ora un'unica pillola
   SCIVOLA dalla vecchia alla nuova (v4.js la posiziona). E' il controllo
   segmentato di iOS, ed e' il dettaglio che piu' di ogni altro fa sembrare
   un'interfaccia "nativa" invece che "web".
   La pillola sta SOTTO la voce (z-index 0, voci a 1) cosi' il testo resta
   leggibile e il fondo della voce attiva, che gia' c'e', si somma.
   ========================================================================== */
.feed-tabs,.tk2-tabs,.pf-tabs{position:relative;}
.feed-tabs > *,.tk2-tabs > *,.pf-tabs > *{position:relative;z-index:1;}
.v4-ink{
  position:absolute;left:0;top:0;height:0;width:0;z-index:0 !important;
  border-radius:999px;pointer-events:none;
  background:rgba(var(--green-rgb),.13);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.35),
             0 8px 22px -12px rgba(var(--green-rgb),.9);
  opacity:0;
  transition:transform .45s var(--v4-ease),width .45s var(--v4-ease),
             height .45s var(--v4-ease),opacity .3s var(--v4-ease);
}
.v4-ink.on{opacity:1;}
/* Quando l'inchiostro c'e', la voce attiva non ha piu' bisogno del proprio
   fondo: si sommerebbero due pillole. Resta il colore del testo. */
.feed-tabs.v4-inked .feed-tab.active,.pf-tabs.v4-inked .pf-tab.active,
.tk2-tabs.v4-inked .tk2-tab.active{
  background:transparent;box-shadow:none;
}
/* Sulle schede del token l'inchiostro e' una sottolineatura, non una pillola.
   bottom:0 e non -1: la barra ha overflow-x:auto, quindi quel pixel fuori
   veniva tagliato e la sottolineatura si vedeva alta uno invece che due.
   La riga sotto la voce attiva la disegna gia' l'inchiostro: il bordo di v2
   sparisce, o si vedono due righe dello stesso colore a un pixel di
   distanza. */
.tk2-tabs .v4-ink{
  border-radius:2px 2px 0 0;height:2px !important;top:auto;bottom:0;
  background:var(--green);box-shadow:0 0 12px rgba(var(--green-rgb),.8);
}
.tk2-tabs.v4-inked .tk2-tab.active{border-bottom-color:transparent;}

/* ==========================================================================
   25. LE COSE CHE ARRIVANO
   ==========================================================================
   Una riga nuova nella lista o un nuovo scambio nell'attivita' live si
   accende per un secondo e mezzo: e' l'unico modo in cui uno si accorge che
   la pagina si e' aggiornata senza fissarla. Un lampo nel colore della rete
   che sfuma, e nient'altro si muove.
   ========================================================================== */
.v4-new{animation:v4Flash 1.6s var(--v4-ease) both;}
@keyframes v4Flash{
  0%{background-color:rgba(var(--green-rgb),.16);box-shadow:inset 3px 0 0 var(--green);}
  100%{background-color:transparent;box-shadow:inset 3px 0 0 transparent;}
}

/* Gli scheletri di caricamento scintillano invece di stare fermi in grigio:
   "fermo" si legge come "rotto", "scintilla" come "sta arrivando". */
.skel-line{
  background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 100%) !important;
  background-size:220% 100% !important;
  animation:v4Shimmer 1.5s ease-in-out infinite;
  border-radius:6px;
}
@keyframes v4Shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}}

/* Il cambio di rete non e' piu' uno scatto: il fondo e la barra passano al
   colore nuovo in un secondo, come sulla landing. */
html,body{transition:background-color .9s var(--v4-ease);}

/* ==========================================================================
   26. L'ATTIVITA' DAL VIVO
   ==========================================================================
   La colonna accanto al token in evidenza: gli scambi che arrivano adesso.
   Era il 40% del riquadro con dentro "No trades yet." in grigio, e quando
   gli scambi c'erano erano sei righe da 11px. Ora la colonna e' piu'
   stretta (250px), ogni scambio e' una riga con l'avatar del token, il
   verso in una pastiglia verde o rossa e l'importo in monospaziato; e il
   vuoto e' un'attesa disegnata, non una frase.
   ========================================================================== */
#view-home .feature{grid-template-columns:1fr 250px;}
@media (max-width:1080px){#view-home .feature{grid-template-columns:1fr;}}
/* La pillola sopra il titolo. Stessa forma e stesso pallino della landing:
   e' il primo elemento che si vede entrando, e ritrovarlo identico e' meta'
   del lavoro di far sembrare i due un posto solo. */
#view-home .pitch-kick{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px 6px 10px;margin-bottom:16px;border-radius:999px;
  border:1px solid rgba(var(--green-rgb),.26);
  background:rgba(var(--green-rgb),.07);
  font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--green);
}
#view-home .pitch-kick::before{
  content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--green);box-shadow:0 0 10px rgba(var(--green-rgb),.9);
}
/* L'onda che si espande: la stessa del pallino "vivo" altrove nel sito.
   Le coordinate ricalcano quelle del pallino qui sopra — 10px di padding a
   sinistra, centrato in verticale — perche' un pseudo-elemento assoluto non
   sa dove sia il fratello che deve seguire. */
#view-home .pitch-kick::after{
  content:"";position:absolute;left:10px;top:calc(50% - 3px);
  width:6px;height:6px;border-radius:50%;
  background:var(--green);opacity:0;
  animation:v4KickPing 2.6s var(--v4-ease) infinite;
  pointer-events:none;
}
@keyframes v4KickPing{
  0%{transform:scale(1);opacity:.55;}
  70%,100%{transform:scale(3.4);opacity:0;}
}
@media (prefers-reduced-motion:reduce){#view-home .pitch-kick::after{animation:none;}}

#view-home .feat-side{padding:16px 16px 10px;}

/* L'ALTEZZA DELL'INSEGNA NON LA DECIDE PIU' L'ATTIVITA' DAL VIVO.
   Il pannello e' una griglia di due celle e la riga e' alta quanto la piu'
   alta delle due. A destra c'e' un elenco che arriva dalla chain: su una rete
   con sei scambi recenti diventava piu' alto della scheda del token a
   sinistra, e allora il pannello cresceva, la colonna del titolo — che ha
   sempre le stesse due frasi — restava centrata in mezzo a un vuoto, e la
   scheda del token si ritrovava mezzo pannello vuoto sotto.
   Il risultato era che la stessa schermata aveva un aspetto diverso su ogni
   rete: su HyperEVM, con tre scambi, era giusta; su Robinhood, con sei, era
   sbilanciata. Non era una scelta di disegno, era il numero di righe che
   arrivava dal server.
   Con flex-basis:0 l'elenco non porta piu' la propria altezza al calcolo:
   l'insegna e' alta quanto la scheda del token, sempre, su tutte le reti, e
   le righe che non ci stanno restano sotto, raggiungibili scorrendo.

   QUATTRO RIGHE, E LE ALTRE SI RAGGIUNGONO SCORRENDO.
   Prima le righe in eccesso venivano tagliate: si vedeva mezza riga sfumata
   e quello che c'era sotto non si poteva raggiungere. Ora l'elenco scorre —
   dodici scambi dentro l'altezza di quattro — e il pannello resta della
   stessa taglia su qualunque rete, con qualunque quantita' di scambi. */
@media (min-width:1081px){
  #view-home .feature{align-items:stretch;min-height:232px;}
  #view-home .feat-side{display:flex;flex-direction:column;min-height:0;}
  #view-home .feat-side > .k{flex:none;}
  #view-home .feat-side > #trendingRow{
    flex:1 1 0;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    /* La barra e' sottile e nel colore del bordo: deve dire che si puo'
       scorrere senza diventare un elemento grafico. */
    scrollbar-width:thin;scrollbar-color:var(--v4-edge-hi) transparent;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  }
}
#view-home .feat-side .k{letter-spacing:.16em;margin-bottom:6px;}
/* 12px e non 10: quattro righe riempiono esattamente l'altezza visibile
   dell'elenco, quindi non se ne vede mezza tagliata sotto, e ogni riga ha
   il bersaglio piu' comodo da toccare. */
#view-home .ev{
  padding:12px 4px;gap:10px;border-radius:var(--v4-r-sm);
  transition:background var(--v4-t) var(--v4-ease),transform var(--v4-t) var(--v4-ease);
}
#view-home .ev:hover{background:rgba(255,255,255,.04);transform:translateX(2px);}
#view-home .ev-av{
  width:28px;height:28px;border-radius:9px;font-size:11px;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 4px 10px -6px rgba(0,0,0,1);
}
#view-home .ev-b{
  font-size:8.5px;letter-spacing:.1em;padding:3px 7px;border-radius:99px;
  border:1px solid transparent;
}
#view-home .ev-b.buy{color:#4ade80;background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.28);}
#view-home .ev-b.sell{color:#ff6b78;background:rgba(255,79,98,.1);border-color:rgba(255,79,98,.28);}
#view-home .ev-b.new{color:var(--green);background:rgba(var(--green-rgb),.12);border-color:rgba(var(--green-rgb),.3);}
#view-home .ev-n{font-size:12.5px;font-weight:600;letter-spacing:-.01em;}
#view-home .ev-v{font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums;}

/* Il vuoto: un anello che respira e due righe. "No trades yet." lo scrive
   app.js; la seconda riga e la figura le mette il CSS. */
#view-home #trendingRow .hl-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:34px 8px 30px !important;
  font-size:13px;color:var(--text-dim);min-height:220px;
}
#view-home #trendingRow .hl-empty::before{
  content:"";width:38px;height:38px;border-radius:50%;margin-bottom:16px;
  border:1.5px solid rgba(var(--green-rgb),.5);
  box-shadow:0 0 0 6px rgba(var(--green-rgb),.06),0 0 24px -6px rgba(var(--green-rgb),.8);
  background:radial-gradient(circle,rgba(var(--green-rgb),.35) 0%,transparent 60%);
  animation:v4Breathe 2.8s ease-in-out infinite;
}
@keyframes v4Breathe{
  0%,100%{box-shadow:0 0 0 6px rgba(var(--green-rgb),.06),0 0 24px -6px rgba(var(--green-rgb),.8);transform:scale(1);}
  50%{box-shadow:0 0 0 12px rgba(var(--green-rgb),.03),0 0 34px -4px rgba(var(--green-rgb),1);transform:scale(1.06);}
}
#view-home #trendingRow .hl-empty::after{
  content:"Trades on this chain show up here the moment they land.";
  display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--text-mute);
  max-width:20ch;
}

/* ==========================================================================
   27. LA CHAT
   ==========================================================================
   Era una card con una lista di righe bordate e una casella di testo: leggibile
   e anonima. Ora ogni messaggio e' una riga con un avatar, il mittente in
   monospaziato accentato, l'ora a destra e il testo sotto; i propri messaggi
   hanno una barra nel colore della rete; il team porta la pastiglia "dev";
   la casella sta appoggiata in fondo su vetro e il bottone e' pieno. Il
   markup non cambia: app.js lo genera.
   ========================================================================== */
#view-chat .section-title{font-size:26px;}
#view-chat .list-note{font-size:14.5px;color:var(--text-dim);margin:0 0 20px 15px;max-width:60ch;}
#view-chat .gc-card{padding:0;overflow:hidden;border-radius:var(--v4-r-xl);}
#view-chat .gc-list{
  max-height:min(62vh,640px);overflow-y:auto;padding:8px 0;
  overscroll-behavior:contain;
}
#view-chat .cm-row,#view-chat .gc-row{
  display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:13px;
  padding:13px 20px;border:0;border-radius:0;background:none;
  border-bottom:1px solid var(--v4-edge-lo);
  transition:background var(--v4-t) var(--v4-ease);
}
#view-chat .cm-row:last-child,#view-chat .gc-row:last-child{border-bottom:0;}
#view-chat .cm-row:hover,#view-chat .gc-row:hover{background:rgba(255,255,255,.025);}
/* L'avatar: un tondo con la prima lettera sarebbe la cosa giusta, ma il
   markup non porta un'iniziale leggibile (e' un indirizzo). Un tondo con il
   gradiente della rete, piu' pieno per il team, distingue abbastanza. */
#view-chat .cm-row::before,#view-chat .gc-row::before{
  content:"";grid-row:1 / span 2;width:36px;height:36px;border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
#view-chat .cm-row:has(.cm-badge)::before,#view-chat .gc-row.is-admin::before{
  background:linear-gradient(150deg,rgba(var(--green-rgb),.55),rgba(var(--green-rgb),.15));
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.4),0 0 18px -6px rgba(var(--green-rgb),.9);
}
#view-chat .cm-row.is-me,#view-chat .gc-row.is-me{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.07),transparent 50%);
  box-shadow:inset 3px 0 0 var(--green);
}
#view-chat .cm-head,#view-chat .gc-head{margin-bottom:4px;gap:8px;}
#view-chat .cm-who,#view-chat .gc-who{font-size:12px;letter-spacing:.02em;color:var(--text);font-weight:500;}
#view-chat .cm-who:hover,#view-chat .gc-who:hover{color:var(--green);}
#view-chat .cm-badge,#view-chat .gc-badge{
  padding:2px 7px;border-radius:99px;font-size:8.5px;letter-spacing:.12em;
  color:var(--green);background:rgba(var(--green-rgb),.12);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.3);
}
#view-chat .cm-time,#view-chat .gc-time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;margin-left:auto;}
#view-chat .gc-tools{display:flex;gap:4px;}
#view-chat .gc-t{border-radius:8px;}
#view-chat .cm-body,#view-chat .gc-body{font-size:14px;line-height:1.55;}
#view-chat .cm-empty{
  margin:14px 16px;padding:44px 16px;border-radius:var(--v4-r-lg);
  border:1px dashed var(--v4-edge-lo);font-size:13.5px;
}
/* La casella: appoggiata in fondo, su vetro, sempre visibile mentre la
   lista scorre sopra. */
#view-chat .cm-box{
  margin:0;padding:14px 16px 6px;gap:10px;
  background:linear-gradient(180deg,transparent,rgba(var(--v4-bar-rgb,6,9,13),.7) 30%);
  border-top:1px solid var(--v4-edge-lo);
}
#view-chat .cm-box textarea{
  border-radius:var(--v4-r-md);padding:12px 14px;font-size:14px;
  background:rgba(0,0,0,.28);border:1px solid var(--v4-edge-lo);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
  transition:border-color var(--v4-t) var(--v4-ease),box-shadow var(--v4-t) var(--v4-ease);
}
#view-chat .cm-box textarea:focus{
  border-color:rgba(var(--green-rgb),.55);
  box-shadow:0 0 0 4px rgba(var(--green-rgb),.1),inset 0 2px 6px rgba(0,0,0,.3);
}
#view-chat #gcSend{
  padding:12px 20px;border-radius:999px;font-weight:600;
  color:var(--on-green);border:0;
  background:linear-gradient(168deg,var(--green-hi),var(--green) 55%,var(--green-dim));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 10px 26px -12px rgba(var(--green-rgb),.9);
}
#view-chat #gcSend:hover{transform:translateY(-1px);filter:brightness(1.05);}
#view-chat .cm-hint{padding:0 16px 14px;margin:0;font-size:11.5px;}
#view-chat .gc-pin{
  border-radius:var(--v4-r-lg);padding:14px 18px;margin-bottom:14px;
  background:linear-gradient(90deg,rgba(var(--green-rgb),.1),transparent 60%);
  box-shadow:inset 3px 0 0 var(--green),inset 0 0 0 1px var(--v4-edge-lo);
}

/* ==========================================================================
   28. UNA VOCE SOLA PER I TITOLI
   ==========================================================================
   Il titolo della home, quello della landing e quello degli stock token
   avevano tre trattamenti diversi: bianco, gradiente oro su meta' frase,
   gradiente oro su meta' frase con un'altra angolazione. Tre modi di scrivere
   la stessa cosa nello stesso sito sono la ragione per cui, scorrendo, sembra
   che ogni pagina venga da un progetto diverso.
   Da qui in poi i titoli sono monocromatici ovunque. Il colore della rete non
   sparisce: sta nei bottoni, nelle pillole, nelle barre di avanzamento, nei
   numeri che contano e nella curva — dove indica qualcosa, invece di
   decorare una frase. */
/* L'ECCEZIONE, UNA SOLA E RICONOSCIBILE.
   La seconda riga dell'insegna — "Change your mind." nella home, la stessa
   sulla landing — corre dal bianco all'accento della rete. E' l'unico testo
   del sito che prende colore, e cambia quando si cambia catena: e' li' che si
   vede, senza doverlo scrivere, che il prodotto e' lo stesso su cinque
   catene. Tutti gli altri titoli restano monocromatici, quindi questa resta
   un'eccezione e non un terzo trattamento tipografico.
   Il ritaglio sul testo taglia le code di g/y/p quando l'interlinea sta sotto
   1: lo spazio si restituisce col padding e si riassorbe col margine. */
#view-home .pitch h1 > em{
  background:linear-gradient(96deg,#ffffff 0%,var(--green) 78%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.14em;margin-bottom:-.14em;
}
/* Su fondo chiaro il bianco iniziale sarebbe bianco su bianco, e l'accento
   di BSC e HyperEVM misura 1,68:1 contro #f6f7f9 — non "debole": illeggibile.
   Stessa idea (da un estremo neutro all'accento) partendo dall'inchiostro, e
   con --green-ink, gia' calibrato sopra 4,6:1 per ogni rete in v3.css. */
:root[data-theme="light"] #view-home .pitch h1 > em{
  background:linear-gradient(96deg,var(--text) 0%,var(--green-ink,#0b6b3a) 78%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* A parita' di colore il testo scuro su chiaro appare piu' sottile. */
  font-weight:650;
}
/* Solana ha due colori, non uno: la sfumatura li attraversa entrambi. */
:root:not([data-theme="light"])[data-chain="solana"] #view-home .pitch h1 > em{
  background:linear-gradient(96deg,#ffffff 0%,#9945ff 52%,#14f195 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
:root[data-theme="light"][data-chain="solana"] #view-home .pitch h1 > em{
  background:linear-gradient(96deg,var(--text) 0%,#7b2ff5 46%,#0b9c63 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Se il ritaglio sul testo non e' supportato, il riempimento trasparente
   lascerebbe la frase INVISIBILE invece che sfumata: si torna al colore
   pieno, nessun effetto ma si legge. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  #view-home .pitch h1 > em{
    background:none;-webkit-text-fill-color:var(--green);color:var(--green);
  }
  :root[data-theme="light"] #view-home .pitch h1 > em{
    -webkit-text-fill-color:var(--green-ink,#0b6b3a);color:var(--green-ink,#0b6b3a);
  }
}

.mb-grad{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:inherit;
  /* Il ritaglio sul testo non c'e' piu': lo spazio per la coda della "g" era
     compensato da un margine negativo, e senza ritaglio quei due valori
     sfalsavano la riga. */
  display:inline;padding-bottom:0;margin-bottom:0;
}
/* Il titolo degli stock token adesso e' una frase intera e non due parole:
   piu' respiro fra le righe, e un corpo che non lo fa diventare un cartello. */
.mb-title{font-size:clamp(21px,2.6vw,32px);line-height:1.12;}

/* ==========================================================================
   29. UNA MISURA SOLA PER TUTTE LE PAGINE
   ==========================================================================
   E' il motivo piu' grosso per cui, passando da una schermata all'altra, il
   sito sembrava un insieme di pezzi presi da progetti diversi. Nove pagine
   avevano OTTO larghezze:

     home, chat        1360
     terminal          1600
     stocks            1440
     profilo, token    1240
     create            1080
     docs              1060
     watchlist          640

   Tutte centrate, quindi il bordo sinistro del contenuto saltava da 0 a 40 a
   100 a 180 a 400 pixel a ogni click del menu: il titolo si spostava, la
   prima colonna si spostava, e il cervello lo legge come "un'altra pagina di
   un altro sito" anche quando i colori sono identici.

   Ora la cornice e' una sola, e le colonne interne conservano la misura che
   serve a loro: un modulo non diventa largo 1360 solo perche' la pagina lo e',
   e un testo da leggere resta sotto i settanta caratteri per riga. Cambia il
   contenuto, non il punto da cui parte.
   ========================================================================== */
@media (min-width:1001px){
  .wrap,
  #view-create .wrap,
  #view-create-stock .wrap,
  #view-stocks .wrap,
  .tm-wrap,
  #view-profile .page,
  .token-container{
    max-width:1360px;
    margin-left:auto;margin-right:auto;
  }
  /* Il modulo di creazione resta largo quanto deve: un campo di testo da 900
     pixel non e' piu' facile da compilare, e' solo piu' largo. La colonna
     dell'anteprima resta una scheda. Il blocco si ancora a sinistra, cosi'
     il titolo sopra e la prima colonna sotto partono dallo stesso punto di
     ogni altra pagina. */
  .create-grid{
    grid-template-columns:minmax(0,660px) minmax(0,390px);
    justify-content:start;
  }
}

/* ==========================================================================
   30. IL CASSETTO SU TELEFONI CORTI
   ==========================================================================
   .sidebar e' un flex in colonna. Su un telefono alto (844, 896, 932) il
   contenuto ci sta e va tutto bene. Su un 667, un 640 o un 568 il contenuto
   misura 834px e non ci sta: flex allora RESTRINGE gli elementi, perche' un
   figlio di flex ha flex-shrink:1 se nessuno dice il contrario. Il bottone di
   lancio passava da 46px a 30, cioe' schiacciato a due terzi, con il testo
   che toccava i bordi. E' il "mezzo tagliato" che si vedeva.

   Due righe lo risolvono: nessun figlio del cassetto si restringe, e i due
   bottoni hanno un'altezza minima da dito (44px, il minimo di Apple). Il
   cassetto scorre gia' (overflow-y:auto), quindi su schermi corti si arriva
   in fondo scorrendo, con i bottoni interi invece che compressi.
   ========================================================================== */
.sidebar > *{flex-shrink:0;}
/* Stessa altezza per tutti e due: 46 il pieno e 48 il contornato facevano
   sembrare il primo compresso accanto al secondo, che e' l'altra meta' del
   "mezzo tagliato". 46px superano il minimo di 44 e i due bottoni finiscono
   identici. */
.sidebar .side-cta{
  /* Altezza fissa e non minima: con box-sizing:border-box il bordo del
     secondo bottone rientra nei 46, mentre con min-height il piu' alto dei
     due restava 48 e la differenza si vedeva. Il testo lo centra il flex,
     quindi il padding verticale non serve piu'. */
  height:46px;padding-top:0;padding-bottom:0;
  display:flex;align-items:center;justify-content:center;
}

/* SU TELEFONI CORTI I BOTTONI SALGONO SOPRA LE ALTRE RETI.
   Il contenuto del cassetto misura 850px. Su un 667, un 640 o un 568 i due
   bottoni finiscono sotto il bordo dello schermo: si aprono le voci di menu e
   l'azione principale non si vede, va cercata scorrendo. Spostati sopra
   "Other chains" stanno a circa 500px dall'alto, cioe' dentro lo schermo di
   qualunque telefono; l'elenco delle altre reti e il piede scorrono sotto,
   ed e' li' che uno si aspetta di dover scorrere.
   Si fa con l'ordine del flex, senza toccare il documento: l'ordine di
   lettura per chi usa la tastiera o uno screen reader resta quello del
   markup. */
@media (max-width:900px) and (max-height:760px){
  .sidebar .side-cta{order:1;}
  .sidebar .side-label-chains,
  .sidebar #sidebarChains{order:2;}
  .sidebar .side-foot{order:3;}
  /* Un filo d'aria sopra i bottoni, che ora seguono l'ultima voce di menu. */
  .sidebar .side-cta:first-of-type{margin-top:14px;}
}

/* ==========================================================================
   31. IL TASTO DELLA RICERCA
   ==========================================================================
   Il segno "/" in fondo al campo. Non e' decorazione: e' l'unico modo in cui
   qualcuno scopre che la scorciatoia esiste. Sparisce appena il campo viene
   usato, e su telefono non compare affatto perche' non c'e' una tastiera
   fisica a cui riferirsi (lo decide v4.js). */
.search{position:relative;}
.v4-kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;line-height:1;
  color:var(--text-mute);
  border-radius:5px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--v4-edge-lo),0 1px 0 var(--v4-edge-lo);
  pointer-events:none;
}
:root[data-theme="light"] .v4-kbd{background:rgba(15,23,32,.05);}
/* Il campo lascia spazio al tasto, o il testo digitato ci finisce sotto. */
.search input{padding-right:34px;}

/* Chi ha chiesto meno movimento riceve meno movimento: restano i colori e i
   materiali, spariscono le animazioni continue e le comparse. */
@media (prefers-reduced-motion:reduce){
  .v4-rise{opacity:1 !important;transform:none !important;}
  #view-home .feature .feat-bar > i::after,
  #view-token .token-progress-fill::after,
  #view-stock .token-progress-fill::after,
  .pulse::after,.feed-pulse::after{animation:none;}
  .btn-launch::after,.btn-enter::after,.pf-btn-primary::after,
  .btn-launch-top::after,.side-cta::after{display:none;}
  #view-home,#view-token,#view-create,#view-profile,#view-docs,
  #view-terminal,#view-stocks,#view-stock,#view-watchlist,#view-chat,
  #view-create-stock,.modal{animation:none;}
}


/* ==========================================================================
   INGRESSI DI LANCIO SU UNA CHAIN NON ANCORA ATTIVA
   --------------------------------------------------------------------------
   Li marca initLaunchGates() in chains.js. Il bottone resta al suo posto,
   perche' e' anche una promessa, ma smette di sembrare premibile: perde il
   pieno d'accento, prende il contorno di un elemento inattivo e porta
   l'etichetta "soon" a destra, la stessa che il selettore di rete usa gia'
   per Arc e Solana. Cosi' la parola "soon" significa la stessa cosa in tutti
   i punti del sito.
   ========================================================================== */
.is-soon-gate{
  background:transparent !important;
  background-image:none !important;
  color:var(--text-mute) !important;
  border:1px dashed var(--border-2) !important;
  box-shadow:none !important;
  cursor:default !important;
  /* filter e transform restano fermi: un bottone spento che si illumina al
     passaggio rimanderebbe esattamente il messaggio che stiamo togliendo. */
  filter:none !important;
  transform:none !important;
  /* NIENTE display QUI. C'era `display:inline-flex !important`, e con una
     specificita' di 0-1-0 piu' !important vinceva sulla media query che su
     telefono nasconde .btn-launch-top: su Solana a 393px il bottone tornava
     nella testata largo 146px, spingeva il selettore di rete a "Sola..." e
     buttava "Login" fuori dallo schermo. Verificato: su BNB alla stessa
     larghezza quel bottone e' display:none, su Solana era display:flex.
     Questa regola dice come si VEDE un ingresso non ancora attivo, non SE si
     vede: quello lo decidono le media query, ed e' la terza volta che me lo
     riscrivo. Le proprieta' di allineamento restano perche' sono inerti su un
     elemento che non e' flex, e i due che lo sono (.head-cta, .btn-launch-top)
     le usano gia'. */
  align-items:center;justify-content:center;
}
.is-soon-gate:hover,.is-soon-gate:active{
  filter:none !important;transform:none !important;
  background:transparent !important;
}
.is-soon-gate::after{display:none !important;}
/* La larghezza si', il display no: nel cassetto il bottone occupa la riga
   intera come quello delle chain attive. */
.side-cta.is-soon-gate,.head-cta.is-soon-gate{width:100%;}

/* margin invece di gap sul contenitore: cosi' l'etichetta sta alla giusta
   distanza sia dentro un bottone flex sia dentro uno a blocco, senza che il
   contenitore debba dichiarare un display che non gli spetta. */
.soon-gate-tag{
  margin-left:9px;vertical-align:middle;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  line-height:1;padding:3px 6px;border-radius:6px;
  color:var(--chain-accent,var(--green));
  border:1px solid color-mix(in srgb, var(--chain-accent,var(--green)) 34%, transparent);
  background:color-mix(in srgb, var(--chain-accent,var(--green)) 10%, transparent);
  flex-shrink:0;
}

/* Il pannello che spiega perche', quando si tocca un ingresso spento. Un
   lampo solo: se pulsasse a ripetizione diventerebbe un allarme, e non e'
   un errore, e' una data che non e' ancora arrivata. */
@keyframes soonPulsa{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--chain-accent,var(--green)) 45%, transparent);}
  100%{box-shadow:0 0 0 14px transparent;}
}
.chain-notice.pulsa{animation:soonPulsa 1.1s ease-out 1;}


/* ==========================================================================
   22. UNA SOLA VOCE FRA L'INGRESSO E L'APPLICAZIONE
   --------------------------------------------------------------------------
   Misurato prima di scrivere questa sezione, a 1440px:

     landing   h1  68px   peso 640   spaziatura -2.584px   fondo rgb(3,4,10)
     home app  h1  39,6px peso 600   spaziatura -1.386px   fondo rgb(3,3,2)
     crea      h1  44px   peso 600   spaziatura -1.76px

   Tre titoli, tre scale, tre pesi. Nessuno dei tre e' sbagliato da solo; messi
   in fila raccontano tre prodotti. Peggio: sotto i 1080px la colonna del
   titolo in home passa da 603px a TUTTA la larghezza (980px a 1024) e il
   titolo, invece di crescere, SCENDE a 27px. Un titolo da 27px steso su 980px
   e' la cosa che fa sembrare una pagina un modello non finito.

   Qui il peso e la spaziatura diventano uno solo, quello della landing, e la
   taglia resta l'unica cosa che cambia — perche' quella si', deve cambiare:
   un'insegna sopra una tabella di token non e' un manifesto.
   ========================================================================== */

/* Il peso e la spaziatura della landing, su ogni titolo di prima riga
   dell'applicazione. 640 non e' un capriccio: e' il valore a cui il grassetto
   di sistema smette di sembrare un grassetto e comincia a sembrare una
   scelta. Dove il font non e' variabile il browser lo arrotonda a 600 o 700,
   esattamente come fa gia' sulla landing: le due superfici restano pari. */
#view-home .pitch h1,
#view-create > .wrap > h1,
#view-create-stock > .wrap > h1{
  font-weight:640;
  letter-spacing:-.038em;
  line-height:1.03;
  /* Righe bilanciate come sulla landing: senza, l'ultima riga resta con una
     parola sola e il titolo sembra spezzato invece che impaginato. Dove non
     e' supportato si torna all'a capo normale. */
  text-wrap:balance;
}

/* --- LA HOME, A DUE COLONNE (sopra i 1080px) ---
   La colonna misura 482px a 1100 e 603px a 1600. La frase piu' lunga e'
   "Launch a token on a curve": 25 caratteri, che a questa spaziatura occupano
   circa 0,46em l'uno. 48px x 25 x 0,46 = 552px, dentro i 595 disponibili al
   massimo della scala. La pendenza e' calcolata sui due estremi, non a
   occhio: 40px a 1100, 48px a 1600. */
#view-home .pitch h1{
  /* Era clamp(34px, 22.4px+1.6vw, 48px), cioe' 45,4px a 1440, e su tre righe
     faceva 229px di solo titolo. Su una LANDING quella taglia e' giusta: la
     pagina non ha altro da fare. Qui sopra c'e' una tabella di token, e un
     titolo che si prende un quarto della prima schermata sposta il prodotto
     sotto la piega. 36px restano una frase che si legge da lontano e stanno
     in due righe: meta' dell'altezza, stessa voce. */
  font-size:clamp(29px, 15px + 1.45vw, 40px);
}

/* --- LA HOME, A UNA COLONNA (sotto i 1080px) ---
   Qui il titolo ha tutta la larghezza e puo' finalmente prenderne: e' la
   stessa curva della landing, 5.1vw, con un tetto piu' basso perche' sotto
   c'e' una lista di token e non un manifesto. A 1024 fa 52px su 980 di
   colonna, a 900 ne fa 46, a 412 tocca il minimo della landing.
   max-width in caratteri e non in pixel: e' la misura che tiene una riga
   leggibile a qualunque taglia. */
@media (max-width:1080px){
  #view-home .pitch h1{
    font-size:clamp(31px,5.1vw,52px);
    max-width:21ch;
  }
}
/* Sotto i 380px la prima riga andrebbe a capo su tre righe: 2px di meno la
   riportano a due, che e' come e' scritta. */
@media (max-width:379px){
  #view-home .pitch h1{font-size:29px;}
}

/* --- LE PAGINE DI CREAZIONE ---
   Stessa scala della home a due colonne: sono due prime righe dello stesso
   sito e non c'e' motivo che una sia piu' piccola dell'altra. Il tetto sale
   da 44 a 48. */
#view-create > .wrap > h1,
#view-create-stock > .wrap > h1{
  font-size:clamp(32px, 22.4px + 1.6vw, 48px);
}


/* ==========================================================================
   23. LA SCALA DEI TITOLI
   --------------------------------------------------------------------------
   Misurato a 1440px, prima di questa sezione, il titolo di ogni schermata:

     home / crea / crea azionario   45,4px   peso 640
     documentazione                 28px     peso 600
     chat                           26px     peso 640
     terminale / watchlist          21px     peso 600
     profilo                        18px     peso 600

   Sei taglie e due pesi per la stessa cosa: la prima riga di una pagina. Non
   e' una gerarchia, e' deriva — ognuna di quelle regole e' stata scritta in
   un momento diverso guardando solo la propria schermata. L'effetto, passando
   da una all'altra, e' che il sito sembra assemblato da persone che non si
   parlano.

   Restano TRE gradini, e sono tre ruoli diversi, non tre capricci:

     insegna   home, crea, crea azionario   la frase che vende il prodotto
     pagina    terminale, watchlist, doc,   il nome di una schermata di lavoro
               chat
     identita' profilo                      il nome di chi sta guardando

   Peso e spaziatura sono uno solo su tutti e tre, ed e' quello della landing:
   640 e -.035em. E' la parte che si nota davvero passando da una pagina
   all'altra — la taglia cambia con il ruolo, la VOCE no.
   ========================================================================== */

/* --- il gradino "pagina" --- */
#view-terminal .tm-h,
#view-watchlist .tm-h,
#view-docs .docs-head h2,
#view-chat .section-title{
  font-size:clamp(26px, 17px + 1.05vw, 34px);
  font-weight:640;
  letter-spacing:-.035em;
  line-height:1.08;
  /* La stessa rampa di bianco dei titoli della landing e della home: dove
     c'e' un titolo, la luce viene da sopra. */
  background:linear-gradient(180deg,#fff 6%,rgba(255,255,255,.76) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding-bottom:.1em;margin-bottom:-.08em;
}
/* Sul tema chiaro la rampa va rovesciata, o il titolo sparisce. */
:root[data-theme="light"] #view-terminal .tm-h,
:root[data-theme="light"] #view-watchlist .tm-h,
:root[data-theme="light"] #view-docs .docs-head h2,
:root[data-theme="light"] #view-chat .section-title{
  background:linear-gradient(180deg,#0d141d 6%,rgba(13,20,29,.8) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- il gradino "identita'" ---
   Niente rampa qui: questo testo diventa l'indirizzo del wallet quando ci si
   collega, ed e' cliccabile per copiarlo. Un titolo che si puo' premere deve
   restare di un colore solo, o non sembra piu' un bottone. */
.pf-name{
  font-size:clamp(22px, 16px + .62vw, 28px);
  font-weight:640;
  letter-spacing:-.035em;
  line-height:1.1;
}

/* Il sottotitolo del terminale e della watchlist stava a filo del titolo, che
   ora e' dieci punti piu' grande: senza questo respiro le due righe si
   toccano. */
#view-terminal .tm-top .tm-sub,
#view-watchlist .tm-top .tm-sub{margin-top:8px;}


/* ==========================================================================
   24. TRE COSE VISTE GUARDANDO LE PAGINE UNA A UNA
   ========================================================================== */

/* --- 24.1 LA RIGA LEGALE DELLA DOCUMENTAZIONE ---
   Era centrata dentro la colonna del testo, che sopra i 1040px e' larga 760
   su una pagina larga 1360: il risultato e' una riga centrata su NIENTE, a un
   terzo dello schermo. Allineata a sinistra torna in colonna con il testo che
   chiude, che e' l'unica cosa a cui appartiene. */
@media (min-width:1040px){
  #view-docs .docs-foot{text-align:left;}
}

/* --- 24.2 IL BOTTONE DI LANCIO NEL CASSETTO MOBILE ---
   Misurato su iPhone SE e Galaxy S: 263x39. E' l'azione principale del sito
   dentro il menu del telefono, e stava sotto i 44pt che Apple indica come
   minimo per un bersaglio da toccare col pollice (Material dice 48dp). Non e'
   pignoleria: 39px con il pollice in movimento si mancano.
   Solo padding e corpo del testo: la regola sta dentro la media query del
   cassetto, e non tocca display, che e' il modo in cui mi sono gia' rimangiato
   due media query per sbaglio. */
@media (max-width:900px){
  .sidebar .side-cta,
  .sidebar .btn-launch{
    padding:15px 12px;
    font-size:14px;
    line-height:1.15;
  }
}

/* --- 24.3 IL FONDO DELLE ETICHETTE MINUSCOLE ---
   8,5px e 9,5px sono le taglie a cui una maiuscoletto smette di essere letta e
   comincia a essere indovinata. Sono dentro il selettore delle reti, cioe' il
   controllo che dice su quale catena stai per spendere dei soldi: e' il posto
   peggiore del sito dove strizzare gli occhi. */
.chain-item-sub{font-size:10.5px;letter-spacing:.06em;}
.chain-soon{font-size:9.5px;letter-spacing:.12em;padding:3px 8px;}
#view-home .ev-b{font-size:9.5px;letter-spacing:.08em;}

/* --- 24.4 LO STATO VUOTO DEL PROFILO ---
   Il riquadro tratteggiato della sezione 18.5 resta, ma dentro ha qualcosa da
   fare invece di una riga di testo grigio. Le tre parti stanno in colonna e
   centrate, con il bottone a chiudere: e' la forma di uno stato vuoto che
   propone un'azione, ed e' la stessa che usa la landing quando una rete non
   ha ancora token. */
.pf-empty-cta{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0;padding:44px 24px 40px;
}
.pf-empty-glifo{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--green);
  background:radial-gradient(circle at 50% 30%, rgba(var(--green-rgb),.18), rgba(var(--green-rgb),.05) 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--green-rgb),.24);
}
.pf-empty-glifo svg{width:23px;height:23px;}
.pf-empty-t{
  margin-top:18px;font-size:17px;font-weight:640;letter-spacing:-.025em;color:var(--text);
}
.pf-empty-p{
  margin-top:8px;max-width:46ch;
  font-size:13.5px;line-height:1.6;color:var(--text-dim);
}
.pf-empty-btn{
  margin-top:22px;
  min-height:44px;padding:0 26px;border:0;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  color:var(--on-green);
  background:var(--chain-grad-btn,var(--green));
  box-shadow:0 14px 30px -16px rgba(var(--green-rgb),.9),
             inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform var(--v4-t-fast) var(--v4-ease),
             box-shadow var(--v4-t) var(--v4-ease);
}
.pf-empty-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px -16px rgba(var(--green-rgb),1),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.pf-empty-btn:active{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .pf-empty-btn:hover{transform:none;}
}

/* --- 24.5 LA MISURA DI LETTURA DELLA DOCUMENTAZIONE ---
   Il riquadro ora e' largo quanto la pagina, quindi la misura va difesa su
   OGNI blocco di testo e non solo sui paragrafi: senza, gli elenchi e le note
   si stendono su 1096px e la riga successiva non si trova piu'. */
#view-docs .docs-panel li,
#view-docs .docs-sec li,
#view-docs .docs-note,
#view-docs .docs-panel h3,
#view-docs .docs-sec h3{max-width:72ch;}


/* ==========================================================================
   25. L'HERO PIU' BASSO
   --------------------------------------------------------------------------
   Misurato a 1440x900, prima: la prima riga di token cominciava a 1001px.
   Su uno schermo da portatile vuol dire che di un launchpad non si vede un
   solo token senza scorrere. La colpa non era di un elemento, era della
   somma: sette fasce orizzontali una sotto l'altra prima del primo dato.

     81   la testata
     627  l'hero (testo 482 | scheda in evidenza 482, piu' i totali 125)
     46   la riga delle garanzie
     58   la fisarmonica "what you can launch here"
     137  le pillole delle reti piu' quelle dei filtri
     44   l'intestazione della tabella

   Sotto, ogni pezzo perde altezza senza perdere niente di cio' che dice.

   UNA COSA SPARISCE DEL TUTTO: le tre garanzie nella colonna di sinistra.
   Non per far posto, ma perche' erano un DOPPIONE. Dicevano "il creatore non
   puo' prosciugarlo / il rimborso e' esatto / nessuno puo' spegnerlo" in 238
   pixel, e centoventi pixel piu' sotto la riga delle garanzie diceva
   "rimborso e' una funzione pubblica del contratto / LP bruciata / nessuna
   chiave di amministrazione / contratti verificati" in 46. Le stesse cose,
   due volte, in due stili diversi: e' esattamente il difetto che fa sembrare
   una pagina montata con pezzi presi altrove. Resta la versione corta, che e'
   anche la piu' concreta, e sta accanto ai numeri invece che accanto al
   titolo.
   ========================================================================== */

#view-home .pitch-facts{display:none;}

/* La colonna del testo non deve piu' allungarsi per pareggiare la scheda
   accanto: erano le garanzie a farlo, con margin-top:auto. */
#view-home .pitch{justify-content:flex-start;padding-block:2px 0;}
#view-home .pitch > p{margin-top:16px;max-width:54ch;}
/* Il testo si allinea al CENTRO della scheda accanto, non al suo bordo alto.
   Senza le tre garanzie la colonna e' alta 180px contro i 340 della scheda:
   ancorata in alto lasciava 160px di vuoto sotto, che si leggono come un
   pezzo che non e' arrivato. Centrata, lo spazio si divide sopra e sotto e
   la riga torna a essere una composizione: due elementi di peso diverso su
   un asse comune, che e' come si impagina una prima schermata. */
@media (min-width:1081px){
  #view-home .split > .pitch{align-self:center;}
}

/* --- LA SCHEDA IN EVIDENZA ---
   480px per un token. Ogni misura qui sotto e' la stessa informazione con
   meno aria intorno: il nome resta il nome, il grafico resta un grafico, le
   tre cifre restano tre cifre. Quello che se ne va e' lo spazio fra loro,
   che era tarato su una scheda che doveva reggere una colonna intera. */
#view-home .feat-main{padding:13px 18px;}
/* 9px li avevo tolti per guadagnare quattro pixel di scheda, ma e'
   maiuscoletto spaziato: sotto i 9,5 si indovina invece di leggerlo, ed e'
   l'etichetta che dice PERCHE' quel token sta li'. I quattro pixel li da'
   il padding. */
#view-home .feat-k{padding:4px 10px;font-size:9.5px;}
#view-home .feat-id{margin-top:8px;gap:11px;}
#view-home .feat-av{width:38px;height:38px;font-size:15px;border-radius:11px;}
#view-home .feat-name{font-size:23px;letter-spacing:-.03em;}
#view-home .feat-sub{margin-top:7px;}
#view-home .feat-nums{margin-top:9px;gap:28px;}
#view-home .feat-nums b{font-size:19px;}
/* Il grafico da 104px era la meta' della scheda, poi 58. Ora 34.
   E' la sola misura che si poteva ancora togliere senza perdere
   un'informazione: la curva qui dice se il token sale o scende, e per dirlo
   bastano trentaquattro pixel. Sotto ci sono la barra e la percentuale alla
   migrazione, che e' il dato vero della scheda.
   Serviva per portare il pannello all'altezza di quattro righe di attivita':
   312px erano un blocco che si prendeva mezza prima schermata. */
#view-home .feat-chart{height:22px;margin-top:8px;}
/* La curva del token in evidenza e' contesto, non un segnale operativo: il
   dato che conta in quel pannello e' la percentuale alla migrazione, scritta
   una riga sotto. A piena saturazione il rosso era la cosa piu' accesa della
   prima schermata — su una pagina verde o oro attirava l'occhio piu' del nome
   del token. Il verso resta leggibile, sale o scende, a meta' intensita'. */
#view-home .feat-chart .spark-line{stroke-width:1.5;opacity:.72;}
#view-home .feat-chart .spark-area{opacity:.45;}
#view-home .feat-bar{margin-top:10px;height:5px;}
#view-home .feat-note{margin-top:6px;}

/* --- I TOTALI ---
   Quattro numeri in una fascia da 125px. La cifra scende da 30 a 24: e'
   ancora il testo piu' grande della fascia, che e' tutto cio' che deve
   essere. */
#view-home .ms-item{padding:13px 20px;}
#view-home .ms-item dd{font-size:24px;}
@media (max-width:760px){#view-home .ms-item dd{font-size:18px;}}
#view-home .ms-item dt{gap:8px;}

/* --- I TOTALI E LE GARANZIE SONO UN PANNELLO SOLO ---
   Erano due riquadri con due bordi separati da 16px di vuoto, e dicevano una
   cosa sola: "ecco i numeri, ed ecco perche' ci si puo' credere". Uniti, la
   riga delle garanzie diventa il piede della fascia dei totali invece di una
   sesta fascia. Un bordo invece di due, e sedici pixel in meno. */
#view-home .market-bar{
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom:0;
}
/* Il margine inferiore della griglia dell'hero era 16px e teneva separate le
   due fasce: qui e' esattamente cio' che non vogliamo piu'. */
#view-home .split{margin-bottom:0;}
#view-home .trust{
  margin-top:0;
  /* Il raggio in basso combacia con quello in alto della fascia dei totali
     (20px, non 16): erano due riquadri diversi e si vedeva anche da qui. */
  border-radius:0 0 20px 20px;
  border-top:1px solid var(--v4-edge-lo);
  background:linear-gradient(90deg,rgba(var(--green-rgb),.04),transparent 60%);
  box-shadow:inset -1px -1px 0 0 var(--v4-edge-lo), inset 1px 0 0 0 var(--v4-edge-lo);
}

/* --- L'ATTIVITA' DAL VIVO: I NOMI NON DEVONO TRONCARE ---
   Misurato: la riga e' larga 217px e i quattro pezzi ne chiedevano
   28 + 42 + 40 + 69. Al NOME toccavano 40px, cioe' la fetta piu' piccola
   della riga, e "SOLAPE" diventava "SOLA...", "PEPER" diventava "PEP...".
   Un elenco di scambi in cui i simboli sono tagliati non dice piu' quale
   token si sta muovendo, che e' l'unica cosa per cui esiste.
   L'avatar e l'etichetta cedono qualche pixel, e il nome prende quello che
   avanza invece di una larghezza fissa. */
#view-home .ev{gap:8px;}
#view-home .ev-av{width:24px;height:24px;font-size:10px;}
#view-home .ev-b{padding:3px 6px;letter-spacing:.06em;}
/* La cifra porta il simbolo della rete, e il simbolo cambia lunghezza: con
   "HYPE" la riga arrivava a 217px esatti su 217 disponibili e il nome cedeva
   i suoi ultimi quattro pixel ("PEPER" -> "PEPE..."). Mezzo punto di corpo e
   due pixel di spazio in meno danno dieci pixel di margine: bastano anche per
   un simbolo da cinque lettere. */
#view-home .ev-v{font-size:11px;}
#view-home .ev-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-home .ev-v{flex-shrink:0;margin-left:0;}

/* --- LA BARRA DEI FILTRI, PIU' BASSA ---
   137px per due file di pillole. La fila delle reti porta ancora il suo
   margin-top da 18px, che aveva senso quando stava da sola nella pagina e
   ora si somma al padding della barra che la contiene: e' un margine che
   spinge verso il basso l'unica cosa per cui si apre un launchpad. */
#view-home .section-head .chain-row{margin-top:0;}
#view-home .section-head{padding-top:10px;}

/* --- LA RIGA DELLE GARANZIE: IL TESTO DEVE ANDARE A CAPO COME TESTO ---
   Ogni voce era `display:flex`, e in un contenitore flex OGNI figlio diventa
   un elemento a se': lo <span> attorno al nome del DEX smetteva di essere una
   parola dentro una frase e diventava una colonna. A 1180px, dove le quattro
   voci si stringono, "LP burned on PancakeSwap, forever" si spezzava in tre
   pezzi allineati come una tabella, con la virgola orfana su una riga sua.
   Con display:block il testo torna a essere testo: va a capo dove serve, lo
   span resta dentro la frase, e l'icona si allinea alla prima riga con
   vertical-align invece che al centro di un blocco di due righe (che e' anche
   il posto giusto: un segno di spunta guarda l'inizio della frase). */
#view-home .trust li{display:block;}
#view-home .trust li svg{
  display:inline-block;vertical-align:-4px;margin-right:9px;
}

/* --- L'ACCENTO USATO COME TESTO ---
   --accent-txt lo calcola applyChainTheme() in chains.js: e' l'accento della
   rete schiarito quel tanto che basta a reggere 4,6:1 sul pannello scuro.
   Su BNB, HyperEVM, Robinhood e Arc non cambia niente, perche' passano gia';
   su Solana il viola #9945ff (4,13:1) diventa #a55bff (4,92:1).

   L'elenco e' esplicito e non un `color:var(--green) -> var(--accent-txt)` a
   tappeto: `--green` e' anche il PIENO dei bottoni e il colore di cifre
   grandi, dove la soglia e' 3:1 e schiarire toglierebbe forza all'accento.
   Qui ci sono solo i punti in cui l'accento e' testo PICCOLO, che sono quelli
   che la misura ha segnalato. Se se ne aggiunge uno, va aggiunto qui. */
#view-home .tagline,
#view-home .chain-preview .cp-soon,
#view-home .chain-preview .cp-foot a,
#view-home .feat-k,
#view-home .ev-b.new,
#view-home .feed-tab.active,
.feed-tab.active,
.chain-notice a,
.side-label .soon,
.soon-gate-tag{
  color:var(--accent-txt, var(--green));
}
/* Sul chiaro la direzione e' opposta: li' l'accento va SCURITO, non
   schiarito, e --accent-txt (calcolato per il fondo scuro) andrebbe nella
   direzione sbagliata. Sul tema chiaro si torna all'accento pieno, che su
   bianco e' gia' il valore giusto. */
:root[data-theme="light"] #view-home .tagline,
:root[data-theme="light"] #view-home .chain-preview .cp-soon,
:root[data-theme="light"] #view-home .chain-preview .cp-foot a,
:root[data-theme="light"] #view-home .feat-k,
:root[data-theme="light"] #view-home .ev-b.new,
:root[data-theme="light"] #view-home .feed-tab.active,
:root[data-theme="light"] .feed-tab.active{
  color:var(--green-dim, var(--green));
}

/* --- I BOTTONI PRIMARI DISATTIVATI ---
   Erano il gradiente pieno dell'accento a opacity:.4. Due problemi in uno.
   Il primo e' che si legge male: sul modulo di creazione, "Connect wallet to
   create" e' testo scuro su oro al 40% sopra il nero, e la misura dice 1,1:1.
   Il secondo e' peggio: un bottone sbiadito ma ancora ORO non dice "non si
   puo' ancora premere", dice "questo bottone e' rotto".
   La forma giusta il sito ce l'ha gia' in due punti: .btn-enter:disabled
   (superficie piatta, testo spento) e .is-soon-gate (contorno, nessun pieno).
   Qui si allineano a quella, cosi' "non premibile" ha UN aspetto solo in
   tutto il prodotto invece di tre. */
.btn-launch:disabled,
.btn-secondary:disabled,
.btn-claim:disabled,
.pf-btn-primary:disabled,
.btn-main:disabled{
  opacity:1;
  background:var(--panel-2) !important;
  background-image:none !important;
  color:var(--text-mute) !important;
  -webkit-text-fill-color:var(--text-mute);
  box-shadow:inset 0 0 0 1px var(--border-2) !important;
  text-shadow:none;
  cursor:default;
}
.btn-launch:disabled::after,
.btn-secondary:disabled::after,
.btn-claim:disabled::after,
.pf-btn-primary:disabled::after{content:none;}