/* =========================================================================
   25. IL CORPO DEL TESTO, OSPITATO QUI.
   Rubik era la scelta giusta sulla carta e quella sbagliata nei fatti: a 15px
   su un telefono e' indistinguibile dal sans di sistema, e un carattere che
   nessuno nota e' un carattere che non e' stato scelto. Il proprietario lo ha
   detto due volte guardando il sito vero, e aveva ragione due volte.

   Ora e' BRICOLAGE GROTESQUE, e il nome non e' un caso: bricolage e' cio' che
   si mette insieme con quello che si trova. Ha proporzioni irregolari di
   proposito, terminazioni tagliate storte e una g che sembra disegnata a mano,
   ma resta un grottesco: a 13px dentro una tabella si legge, che era il
   vincolo da non rompere.

   E' OSPITATO QUI, non preso da Google, e questo risolve una classe di
   problemi invece di un problema:
     - niente dipendenza da un dominio esterno che puo' essere bloccato da una
       rete aziendale, da un blocco pubblicita' o da una CSP futura;
     - niente sfarfallio all'avvio, perche' il file parte dallo stesso server
       della pagina;
     - e soprattutto: non c'e' modo che "il carattere non arrivi". Se la pagina
       si carica, si carica anche lui.
   La licenza e' OFL, che permette esplicitamente di ospitarlo. Il testo della
   licenza sta accanto ai file, come la OFL richiede.

   Titan One per i titoli e JetBrains Mono per i numeri restano da Google:
   quelli arrivano gia' (il titolo grosso e tondo del sito lo dimostra) e non
   c'e' motivo di aggiungere altri 250 KB per sostituirli.
   ========================================================================= */
@font-face{
  font-family:'Bricolage';
  src:url('/fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bricolage';
  src:url('/fonts/BricolageGrotesque-Bold.ttf') format('truetype');
  /* Dichiarato per l'intervallo 500-800: il browser prende il Bold per tutti
     e non prova a ingrassare il Regular, che sui grotteschi impasta le
     controforme. */
  font-weight:500 800; font-style:normal; font-display:swap;
}

/* =========================================================================
   letstrash.fun: LA PELLE.
   Caricata per ULTIMA, dopo v4.css, attiva solo con data-brand="trash"
   sulla radice (lo mette brand.js). Zero logica di prodotto: contratti, dati
   e funzioni restano quelli di sempre. BRAND='clean' e il sito torna serio.

   LA DIREZIONE VIENE DAL DISEGNO, NON DA UN'IDEA DI "TRASH".
   Il marchio e' una discarica: gatti sciacalli, lamiera arrugginita, muschio,
   fango, lanterne, insegne dipinte a mano su metallo corrugato. Quindi niente
   fluo, niente Comic Sans, niente arcobaleno: quella e' un'altra estetica e
   accanto a questo disegno sembrerebbe un errore di montaggio.
   I colori qui sotto sono CAMPIONATI dal banner, non scelti a occhio: le
   dodici tinte piu' frequenti sono olive scure, bruni e ruggine.

   L'unica regola che non si piega: si sporca la grafica, non i numeri. Gli
   importi, i saldi e il pannello di acquisto restano leggibili.
   ========================================================================= */

:root[data-brand="trash"]{
  /* dal disegno */
  --lt-fango:#0e0f0a;      /* il fondo, quasi nero ma verde */
  --lt-lamiera:#1c1d14;    /* la piastra */
  --lt-lamiera-hi:#2a2b1e; /* la piastra illuminata */
  --lt-ruggine:#b4551f;
  --lt-ruggine-hi:#d2703a;
  --lt-lanterna:#e0a33c;   /* la luce calda delle finestre */
  --lt-muschio:#7d8f5a;
  --lt-osso:#e6e0cd;       /* la vernice delle insegne */
  --lt-nastro:#c9bb92;     /* il nastro adesivo */
  --lt-fumo:#9c9683;

  /* si riscrivono i token che il sito gia' usa, cosi' la pelle arriva
     ovunque senza inseguire ogni singola classe */
  --green:#b4551f; --green-hi:#d2703a; --green-rgb:180,85,31; --on-green:#f4efe0;
  --green-bg:rgba(180,85,31,.12); --green-border:rgba(180,85,31,.38);
  --accent-txt:#e0a33c;
  --bg-0:#0e0f0a; --bg-1:#16180f; --panel:#1c1d14;
  --text:#e6e0cd; --text-dim:#c3bda9; --text-mute:#9c9683;
  --border:#3a3a28;
  /* TITAN ONE. La scelta viene dal disegno, non dal gusto: il nome sul
     cartello del banner e' dipinto a pennello, lettere grosse con le
     terminazioni tonde e un contorno che non e' mai perfettamente dritto.
     Titan One e' il carattere comune che ci somiglia di piu'. I ripieghi
     restano i tondi di sistema, cosi' su una macchina senza il font scaricato
     il titolo resta grosso e tondo invece di diventare un grottesco qualunque.
     Ha un peso solo: non si chiede il grassetto, e' gia' tutto grassetto. */
  --font-display:'Titan One','Arial Rounded MT Bold','Trebuchet MS',Verdana,system-ui,sans-serif;
  /* Il corpo e' Bricolage, ospitato qui sopra. Il ripiego resta Rubik, che
     index.html carica comunque. */
  --font-body:'Bricolage','Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* Il monospazio si ridichiara qui perche' la pelle lo usa dappertutto e deve
     reggere anche se la definizione di base cambia. JetBrains Mono PER PRIMO:
     dodici punti di questo foglio scrivevano la pila a mano col monospazio di
     SISTEMA per primo, e i numeri uscivano in due caratteri diversi nella
     stessa schermata. Vedi la sezione 24. */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* la landing scrive --ac inline a ogni cambio di rete: serve !important */
  --ac:#e0a33c !important; --ac-rgb:224,163,60 !important; --bg:#0e0f0a !important;
  --h1-grad:linear-gradient(92deg,#e6e0cd 0%,#e6e0cd 46%,#e0a33c 62%,#b4551f 100%) !important;
  --ac-grad-btn:linear-gradient(180deg,#c96a2a,#a04a1a) !important;
  --ac-glow-1:rgba(224,163,60,.07) !important;
  --ac-glow-2:rgba(125,143,90,.06) !important;
}

/* ---- 1. IL FONDO: fango, lamiera corrugata, sporco. ---- */
:root[data-brand="trash"] canvas#scena,
:root[data-brand="trash"] #starfield{ display:none !important; }

:root[data-brand="trash"] body{ background-color:var(--lt-fango) !important; }
:root[data-brand="trash"] #app, :root[data-brand="trash"] .app,
:root[data-brand="trash"] main, :root[data-brand="trash"] [id^="view-"]{
  background-color:transparent !important; background-image:none !important;
}
/* La lamiera corrugata: righe verticali larghe, appena piu' chiare, come le
   nervature di un pannello ondulato visto di taglio. */
:root[data-brand="trash"] body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--lt-fango);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.018) 0 2px, transparent 2px 9px, rgba(0,0,0,.20) 9px 11px, transparent 11px 18px),
    radial-gradient(120% 80% at 50% 0%, rgba(224,163,60,.05) 0%, transparent 60%);
}
/* La sporcizia: grana grossa, visibile, non un velo educato. */
:root[data-brand="trash"] body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.20; 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='.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 2. TIPOGRAFIA. Le insegne del disegno sono dipinte a pennello su
   metallo: pesanti, arrotondate, un po' storte. Niente stampatello severo. */
:root[data-brand="trash"] h1, :root[data-brand="trash"] h2,
:root[data-brand="trash"] h3, :root[data-brand="trash"] .pitch h1{
  font-family:var(--font-display) !important;
  /* Titan One esiste in un peso solo. Chiedere 800 o 900 fa "ingrassare" le
     lettere al browser e i contorni si impastano, che su un carattere gia'
     grosso si vede subito. Si chiede 400 e si lascia stare. */
  font-weight:400 !important;
  text-transform:uppercase !important; letter-spacing:.005em !important;
  color:var(--lt-osso) !important;
  text-shadow:2px 2px 0 rgba(0,0,0,.75), 3px 4px 0 rgba(180,85,31,.35);
  transform:rotate(-.5deg);
}
:root[data-brand="trash"] .pitch h1 em, :root[data-brand="trash"] h1 em{
  font-style:normal; color:var(--lt-lanterna) !important;
  -webkit-text-fill-color:var(--lt-lanterna) !important; background:none !important;
}

/* ---- 3. OGNI PANNELLO E' UNA PIASTRA DI LAMIERA.
   Bordo scuro, fondo con una sfumatura appena obliqua (la luce che scivola
   sul metallo), ombra dura, e QUATTRO RIVETTI negli angoli, fatti con dei
   gradienti radiali invece che con quattro elementi in piu'. ---- */
:root[data-brand="trash"] .tok-row, :root[data-brand="trash"] .token-card,
:root[data-brand="trash"] .card, :root[data-brand="trash"] .panel,
:root[data-brand="trash"] .tok-panel, :root[data-brand="trash"] .market-bar,
:root[data-brand="trash"] .rete, :root[data-brand="trash"] .tk2-card{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px,       #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg, #24251a 0%, #1a1b12 46%, #2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
}
/* .split e .section sono CONTENITORI di impaginazione, non pannelli: dargli
   un fondo e un bordo creava una cassa vuota accanto al titolo. */
:root[data-brand="trash"] .split, :root[data-brand="trash"] .section{
  background:none !important; border:none !important; box-shadow:none !important;
}

/* ---- 4. LA RUGGINE che cola. Una striscia irregolare sul bordo alto di ogni
   carta, come le colature del disegno. ---- */
:root[data-brand="trash"] .tok-row{ position:relative; }
:root[data-brand="trash"] .tok-row::after{
  content:''; position:absolute; left:0; right:0; top:-2px; height:14px;
  pointer-events:none; opacity:.75;
  background:
    linear-gradient(180deg, rgba(180,85,31,.55), transparent),
    repeating-linear-gradient(90deg,
      transparent 0 13px, rgba(180,85,31,.5) 13px 15px, transparent 15px 31px,
      rgba(140,64,22,.42) 31px 34px, transparent 34px 52px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
}
:root[data-brand="trash"] .tok-row:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 8px 0 rgba(0,0,0,.6) !important;
  border-color:var(--lt-ruggine) !important;
}

/* ---- 5. LE ETICHETTE SONO PEZZI DI NASTRO ADESIVO. Storte, opache, col
   bordo strappato. Nel disegno il nastro tiene insieme tutto. ---- */
:root[data-brand="trash"] .tok-tag{
  border-radius:0 !important; border:none !important;
  background:var(--lt-nastro) !important; color:#241f14 !important;
  font-weight:800; text-transform:uppercase; letter-spacing:0 !important;
  padding:2px 6px !important; transform:rotate(-2.5deg);
  box-shadow:1px 2px 3px rgba(0,0,0,.5);
  clip-path:polygon(2% 0,98% 3%,100% 96%,3% 100%);
}
:root[data-brand="trash"] .tok-tag:nth-of-type(2n){
  transform:rotate(2deg); background:#a8b17e !important;
}
:root[data-brand="trash"] .tok-tag.classic,
:root[data-brand="trash"] .tok-tag.graduated{ background:var(--lt-ruggine-hi) !important; color:#1a1408 !important; }

/* ---- 6. I BOTTONI SONO PIASTRE IMBULLONATE. ---- */
:root[data-brand="trash"] .head-cta, :root[data-brand="trash"] .btn-1,
:root[data-brand="trash"] .cta-primary, :root[data-brand="trash"] .cta{
  border-radius:2px !important;
  background-image:linear-gradient(180deg, var(--lt-ruggine-hi), #97441a) !important;
  color:#f6efdd !important; border:2px solid #6b3313 !important;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; box-shadow:3px 3px 0 rgba(0,0,0,.55);
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
:root[data-brand="trash"] .head-cta:hover, :root[data-brand="trash"] .btn-1:hover{
  background-image:linear-gradient(180deg,#e07d40,#a8501f) !important;
  transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(0,0,0,.55);
}
:root[data-brand="trash"] .btn-2, :root[data-brand="trash"] .fl-btn{
  border-radius:2px !important; border:2px solid #4a4632 !important;
  background:var(--lt-lamiera-hi) !important; color:var(--lt-osso) !important;
  text-transform:uppercase; font-weight:400;
}

/* ---- 7. LE PILLOLE DELLE RETI: targhette di metallo. ---- */
:root[data-brand="trash"] .chain-pill{
  border-radius:2px !important; border:2px solid #4a4632 !important;
  background:var(--lt-lamiera-hi) !important; text-transform:uppercase;
  font-weight:700; letter-spacing:.01em;
}
:root[data-brand="trash"] .chain-pill.active{
  background-image:linear-gradient(180deg,#c96a2a,#97441a) !important;
  color:#f6efdd !important; border-color:#6b3313 !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}

/* ---- 8. IL MARCHIO. Il gatto del logo accanto alla parola. ---- */
:root[data-brand="trash"] .wm{
  display:inline-flex !important; align-items:baseline; gap:0;
  white-space:nowrap !important; line-height:1;
  font-family:var(--font-display); font-weight:400; letter-spacing:-.02em;
  text-transform:lowercase;
}
:root[data-brand="trash"] .wm > span{ color:inherit; white-space:nowrap; }
:root[data-brand="trash"] .topbar .brand-top .brand-name .wm,
:root[data-brand="trash"] .topbar .brand-top .brand-name > .wm,
:root[data-brand="trash"] .brand .wm, :root[data-brand="trash"] .foot-name .wm{
  color:var(--lt-osso) !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.7);
}
:root[data-brand="trash"] .wm .wm-p, :root[data-brand="trash"] svg.wm-p{
  width:5px !important; height:4px !important; min-width:0 !important;
  margin:0 2px 2px !important; fill:var(--lt-ruggine-hi) !important;
  align-self:flex-end; flex:0 0 auto;
}
/* Il gatto sciacallo prende il posto della spirale, in tutte le testate. */
/* NIENTE content:url() QUI. Sostituire l'immagine dal CSS significa che il
   browser dipinge prima quella del markup e POI la scambia: per un istante si
   vedeva ancora il logo del marchio precedente, e su una connessione lenta
   quell'istante erano secondi. Il markup punta gia' al file giusto, quindi
   qui resta solo la forma. */
:root[data-brand="trash"] .hero-logo{
  display:inline-block !important;
  width:26px !important; height:26px !important;
  border-radius:3px; border:1px solid #4a4632; object-fit:cover;
}
:root[data-brand="trash"] .hero-logo ~ .hero-logo{ display:none !important; }
:root[data-brand="trash"] .brand img, :root[data-brand="trash"] .logowrap img{
  border-radius:3px; border:1px solid #4a4632;
}

/* ---- 9. LE ETICHETTINE DEI DATI: stampigliate. ---- */
:root[data-brand="trash"] .stat-label, :root[data-brand="trash"] .token-mcap-l{
  text-transform:uppercase; letter-spacing:.10em; font-weight:700;
  color:var(--lt-fumo) !important;
}
/* I NUMERI restano in monospazio e non si sporcano: una cifra e' un dato. */
:root[data-brand="trash"] .mono, :root[data-brand="trash"] code,
:root[data-brand="trash"] .stat b, :root[data-brand="trash"] .tok-row b{
  font-family:var(--font-mono) !important;
  text-shadow:none !important;
}

/* ---- 10. LE DUE STRISCE: insegne di lamiera appese sopra la testata. ---- */
/* LE DUE STRISCE NON STANNO PIU' IN CIMA ALLA FINESTRA.
   Erano due fasce fisse sopra la testata: mangiavano 56 px di schermo su
   OGNI pagina, restavano li' anche mentre si legge, e su telefono si
   sovrapponevano al menu che si apre (era il difetto segnalato: "il menu nel
   mobile poi viene coperto"). Adesso scorrono con la pagina e stanno dove
   servono, appena sopra la fascia dei totali, come le insegne appese sopra
   il bancone. Dalla landing sono sparite del tutto: li' l'insegna e' il
   banner, e due strisce di testo in movimento davanti a un disegno dipinto
   a mano sono rumore sopra la cosa migliore che abbiamo.
   Da qui in poi sono in FLUSSO, non fisse: niente z-index da difendere,
   niente offset da compensare, niente da coprire. */
:root[data-brand="trash"] .tr-marquee{
  position:relative; z-index:1;
  overflow:hidden; white-space:nowrap;
  background-image:linear-gradient(180deg,#3a3526,#26221a);
  color:var(--lt-nastro); border-bottom:2px solid #14140e;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:12px; padding:5px 0; text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
:root[data-brand="trash"] .tr-marquee.b{
  background-image:linear-gradient(180deg,#5c3a1c,#3d2411);
  border-top:1px solid #14140e;
  color:#f0d7a8; border-bottom:2px solid #14140e;
}
:root[data-brand="trash"] .tr-marquee > span{
  display:inline-block; padding-left:100%; animation:trScorri 26s linear infinite;
}
:root[data-brand="trash"] .tr-marquee.b > span{ animation:trScorriB 34s linear infinite; }
@keyframes trScorri{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@keyframes trScorriB{ from{transform:translateX(-100%);} to{transform:translateX(0);} }
@media (prefers-reduced-motion:reduce){
  :root[data-brand="trash"] .tr-marquee > span{ animation:none; padding-left:0; }
}
/* Le strisce non sono piu' fisse in cima, quindi la testata torna al suo
   posto e il corpo non ha piu' bisogno dei 56 px di respiro. */
:root[data-brand="trash"] .tr-marquee:first-child{ margin-top:0; }
:root[data-brand="trash"] .tr-marquee + .tr-marquee{ margin-bottom:14px; }
:root[data-brand="trash"] .topbar{
  background-image:linear-gradient(180deg,#202116,#15160f) !important;
  border-bottom:2px solid #3a3a28 !important;
}

/* ---- 11. LA PRIMA SCHERMATA DELLA LANDING E' IL BANNER.
   Il disegno c'e' gia' ed e' la cosa migliore che abbiamo: si mette dietro il
   titolo, scurito quanto basta perche' il testo si legga sopra. ---- */
:root[data-brand="trash"] .hero{
  background-image:
    linear-gradient(180deg, rgba(14,15,10,.62) 0%, rgba(14,15,10,.80) 55%, var(--lt-fango) 100%),
    url('/lt-banner.png') !important;
  background-size:cover !important;
  background-position:center 38% !important;
  background-repeat:no-repeat !important;
}

/* ---- 12. LA PAGINA DI UN TOKEN RESTA SOBRIA.
   Non e' un ripensamento: e' dove si preme Buy. Niente rotazioni, niente
   ombre colorate, niente colature addosso a chi digita un importo. ---- */
:root[data-brand="trash"] #view-token h1, :root[data-brand="trash"] #view-token h2{
  transform:none !important; text-shadow:1px 1px 0 rgba(0,0,0,.6) !important;
}
:root[data-brand="trash"] #view-token .tok-tag{ transform:none !important; clip-path:none !important; }
:root[data-brand="trash"] #view-token .card::after,
:root[data-brand="trash"] #view-token .tok-row::after{ display:none !important; }
:root[data-brand="trash"] .buy-panel, :root[data-brand="trash"] #buyPanel{
  border:2px solid var(--lt-ruggine) !important;
}
:root[data-brand="trash"] #view-token .card *{ text-shadow:none !important; }

/* =========================================================================
   19. IL FONDO, SUL SERIO.
   Segnalato guardando il sito online: "non ricorda ancora una discarica".
   Aveva ragione. Quello che c'era (lamiera corrugata a righe sottili piu' un
   velo di grana) e' una TEXTURE, e una texture discreta a fondo pagina non la
   nota nessuno. Una discarica non e' discreta.
   Qui il fondo diventa un elemento, non uno sfondo: sacchi neri, pozzanghere,
   assi, ruggine che cola dall'alto, e la luce sporca delle lanterne.
   ========================================================================= */

:root[data-brand="trash"] body::before{
  background-color:#0b0c07 !important;
  background-image:
    /* (a) la luce delle lanterne, calda e bassa, da due lati */
    radial-gradient(70% 45% at 8% 0%,   rgba(224,163,60,.16) 0%, transparent 65%),
    radial-gradient(60% 40% at 94% 12%, rgba(210,112,58,.13) 0%, transparent 62%),
    /* (b) le colature di ruggine dal bordo alto, irregolari */
    repeating-linear-gradient(90deg,
      transparent 0 47px, rgba(150,70,26,.16) 47px 52px, transparent 52px 96px,
      rgba(120,56,20,.12) 96px 103px, transparent 103px 191px),
    /* (c) i sacchi: cerchi scuri sfalsati, come mucchi visti dall'alto */
    radial-gradient(circle at 12% 78%, rgba(0,0,0,.55) 0 74px, transparent 76px),
    radial-gradient(circle at 31% 91%, rgba(0,0,0,.45) 0 58px, transparent 60px),
    radial-gradient(circle at 68% 84%, rgba(0,0,0,.50) 0 88px, transparent 90px),
    radial-gradient(circle at 88% 95%, rgba(0,0,0,.42) 0 64px, transparent 66px),
    /* (d) le assi, larghe e storte */
    repeating-linear-gradient(101deg,
      rgba(64,54,34,.20) 0 3px, transparent 3px 58px),
    /* (e) la lamiera corrugata, ora piu' marcata */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.030) 0 3px, transparent 3px 12px,
      rgba(0,0,0,.34) 12px 15px, transparent 15px 26px),
    /* (f) il muschio che sale dal fondo */
    linear-gradient(0deg, rgba(125,143,90,.14) 0%, transparent 26%) !important;
  background-size:auto, auto, auto, auto, auto, auto, auto, 340px 340px, auto, auto !important;
  opacity:1 !important;
}

/* La grana sale ancora e passa a moltiplicazione: si legge come stampa
   sporca invece che come un filtro sopra. */
:root[data-brand="trash"] body::after{
  opacity:.26 !important; mix-blend-mode:multiply !important;
}

/* =========================================================================
   20. LE STRISCE ERANO TROPPO VELOCI.
   Segnalato guardando il sito. A 26 e 34 secondi il testo passava piu' veloce
   di quanto si legge, e una scritta che non fai in tempo a leggere non e' una
   scritta, e' un disturbo. Piu' che raddoppiate, e la seconda va piu' lenta
   della prima cosi' non "battono" insieme creando un ritmo.
   ========================================================================= */
:root[data-brand="trash"] .tr-marquee > span{ animation-duration:62s !important; }
:root[data-brand="trash"] .tr-marquee.b > span{ animation-duration:81s !important; }

/* =========================================================================
   21. OGNI IMMAGINE DEL MARCHIO, IN UN POSTO SOLO.
   Segnalato guardando il sito online: la finestra di benvenuto mostrava
   ancora il logo vecchio. Non era una svista isolata, era un metodo
   sbagliato: stavo togliendo i riferimenti uno alla volta man mano che
   saltavano fuori. Qui invece si copre TUTTA la superficie in una volta,
   trovata con una scansione di ogni src, href e url() del progetto.
   Il logo del sito diventa il gatto ovunque; i loghi delle CHAIN (Arc, BNB,
   HyperEVM, Solana) restano i loro, perche' li' l'immagine dice su quale
   rete sei e sostituirla sarebbe togliere un'informazione.
   ========================================================================= */

/* (a) la finestra dei termini: il ::before con l'immagine, in tutte le sue
   varianti per rete e per tema. La rete la dicono gia' il titolo e il
   sottotitolo del modale, quindi qui il segno e' quello del sito. */
:root[data-brand="trash"] #termsModal .modal::before,
:root[data-brand="trash"][data-chain="arc"] #termsModal .modal::before,
:root[data-brand="trash"][data-chain="bsc"] #termsModal .modal::before,
:root[data-brand="trash"][data-chain="hyperevm"] #termsModal .modal::before,
:root[data-brand="trash"][data-chain="solana"] #termsModal .modal::before,
:root[data-brand="trash"][data-chain="robinhood"] #termsModal .modal::before{
  background-image:url("lt-logo.png") !important;
  width:88px !important; height:88px !important;
  border-radius:4px; border:2px solid #4a4632;
  /* L'alone verde acceso era il marchio di prima. Qui la luce e' quella
     delle lanterne del disegno, calda e bassa. */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) !important;
}

/* (b) il segno nella testata, in tutte le varianti di rete.
   Le due varianti per il tema chiaro sono sparite con il tema chiaro. */
:root[data-brand="trash"] .logo-mark-rh,
:root[data-brand="trash"] .hero-logo-rh,
:root[data-brand="trash"] .logo-mark{
  content:url("lt-logo.png") !important;
}

/* (c) il modale del benvenuto e quello dell'account: fondo di lamiera come
   il resto, non il vetro scuro di prima. */
:root[data-brand="trash"] #termsModal .modal,
:root[data-brand="trash"] .modal{
  background-color:var(--lt-lamiera) !important;
  background-image:linear-gradient(163deg,#24251a 0%,#1a1b12 46%,#2a2b1e 100%) !important;
  border:3px solid #4a4632 !important; border-radius:2px !important;
  box-shadow:6px 7px 0 rgba(0,0,0,.6) !important;
  backdrop-filter:none !important;
}

/* 22. Le altre stanze del cortile. Solo superfici e contrasti: nessuna
   trasformazione sugli importi, sui grafici o sui controlli di acquisto. */
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(
.tm-col, .tm-filters, .wl-al, .wl-chart, .lb-card, .gc-card, .gc-pin,
.pf-hero, .pf-stat, .pf-panel, .pf-maker, .pf-summary-card, .claim-bar){
  color:var(--lt-osso);
  border:2px solid #4a4632 !important;
  border-radius:2px !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg, #24251a, #1a1b12 46%, #2a2b1e) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
}
/* =========================================================================
   22.1 UNA SOLA GRAMMATICA: LA PIASTRA E IL SOLCO.

   Misurato a 1280 su cinque rotte (terminale, classifica, chat, profilo,
   token): accanto alla famiglia unica - fondo rgb(28,29,20), raggio 2,
   bordo 2, rivetti - ne conviveva una SECONDA, fondo rgb(42,43,30) con
   RAGGIO 0 E BORDO 0. Coerente nel colore, incoerente nella costruzione:
   una piastra senza nessun bordo appoggiata accanto a quelle bordate e
   rivettate.

   La causa era la riga che stava qui: dava il fondo (--lt-lamiera-hi) e il
   COLORE del bordo, ma non la larghezza ne' lo stile, e su questi elementi
   la base dichiara border:0. Un border-color da solo non disegna niente.

   Una grammatica sola, con due usi dichiarati:

   1. LA PIASTRA, per quello che e' un pannello a se': bordo 2px, raggio 2,
      ombra dura, quattro rivetti. Qui e' il caso della fila delle schede del
      profilo, che sta nuda dentro .page fra due piastre, e della fascia in
      cima alla pagina token.
   2. IL SOLCO, per una RIGA dentro un pannello GIA' bordato: li' un bordo
      pieno sarebbe un bordo dentro un bordo. E' la stessa scanalatura che
      divide gia' le card dei token (sezione in fondo al foglio):
      un'incisione scura da un pixel piu' il filo chiaro di lamiera-hi. E il
      fondo della riga diventa quello della piastra che la contiene, cosi'
      la riga smette di essere una piastra e torna a essere una riga.
   ========================================================================= */

/* ---- 22.1a IL SOLCO, dove la riga puo' restare TRASPARENTE: sotto c'e' la
   piastra e basta, niente che scorra. ---- */
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(.lb-head, .wl-al-h){
  background:none !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.55) !important;
  box-shadow:0 1px 0 var(--lt-lamiera-hi) !important;
  backdrop-filter:none !important;
}

/* ---- 22.1b IL SOLCO, dove la riga deve restare OPACA.
   La testata delle colonne del terminale e' appiccicata in cima (sticky) e
   la lista le scorre SOTTO: trasparente lascerebbe passare le righe. La
   casella della chat sta in fondo alla sua carta per lo stesso motivo.
   Restano opache, ma col fondo della piastra che le contiene, non con un
   fondo piu' chiaro tutto loro: e' quello che le faceva leggere come una
   seconda piastra. ---- */
:root[data-brand="trash"] #view-terminal .tm-col-head{
  background-color:var(--lt-lamiera) !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.55) !important;
  box-shadow:0 1px 0 var(--lt-lamiera-hi) !important;
  backdrop-filter:none !important;
}
/* Il solco della casella della chat sta sul bordo ALTO, perche' e' li' che
   finisce la conversazione. Stesse due righe, stesso ordine (prima l'incisione
   scura, poi il filo chiaro andando verso il basso): il filo va all'interno,
   o finirebbe fuori dalla carta. */
:root[data-brand="trash"] #view-chat .cm-box{
  background-color:var(--lt-lamiera) !important;
  background-image:none !important;
  border:0 !important;
  border-top:1px solid rgba(0,0,0,.55) !important;
  box-shadow:inset 0 1px 0 var(--lt-lamiera-hi) !important;
  backdrop-filter:none !important;
}

/* ---- 22.1c LA PIASTRA: la fila delle schede del profilo.
   Non e' dentro nessun pannello, sta nuda dentro .page fra la fila dei
   riquadri e la carta del contenuto: qui il bordo pieno non e' troppo, e'
   proprio quello che mancava. Su telefono la fila scorre col dito, e i
   rivetti restano agli angoli della scatola perche' lo sfondo di un
   contenitore che scorre non scorre col contenuto. ---- */
:root[data-brand="trash"] #view-profile .pf-tabs{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px,       #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg, #24251a 0%, #1a1b12 46%, #2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
  /* Il margine negativo di due pixel per lato serviva a non far tagliare
     l'alone della scheda attiva dal contenitore che scorre. Con un bordo
     vero quel margine sposterebbe la piastra fuori dall'allineamento delle
     altre due, quindi l'aria torna come padding invece che come margine. */
  padding:8px 10px !important;
  margin:0 0 16px !important;
}
/* L'INCHIOSTRO DELLA SCHEDA ATTIVA si riancora alla scheda invece che al
   fondo della fila. Prima era `bottom:0` e finiva sul bordo basso della
   fila, che era una riga da un pixel; adesso li' c'e' una lamiera da due,
   e il JavaScript aggiunge di suo un `transform: translate(x, y)` dove y e'
   la distanza della scheda dall'alto: le due cose insieme spingevano la
   riga arancione QUATTRO PIXEL FUORI dalla piastra. Misurato: piastra
   556..610, inchiostro 614..616.
   Ancorandolo in alto la somma torna: 32px (l'altezza della scheda meno lo
   spessore della riga) piu' la traslazione del JavaScript lo mettono esatto
   sotto la scheda attiva, che e' anche il posto piu' giusto per un
   sottolineato. */
:root[data-brand="trash"] #view-profile .pf-tabs .v4-ink{
  top:32px !important; bottom:auto !important;
}
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(
.tm-sub, .list-note, .lb-note, .pf-stat-sub, .pf-summary-note, .cm-hint, .gc-time){
  color:var(--lt-fumo) !important;
}
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(
.lb-when, .gc-pin-t, .wl-al-t){
  display:inline-block;
  color:var(--lt-fango) !important;
  background:var(--lt-nastro) !important;
  border:0 !important;
  border-radius:0 !important;
  padding:3px 8px;
  text-shadow:none !important;
  transform:rotate(-1deg);
  clip-path:polygon(1% 0,98% 2%,100% 86%,97% 100%,2% 96%,0 18%);
}
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(
.pf-btn-primary, .wl-al-b, #gcSend, #stocksClaimBtn){
  color:var(--lt-osso) !important;
  background:#853c16 !important;
  border:2px solid var(--lt-ruggine-hi) !important;
  border-radius:2px !important;
  box-shadow:3px 3px 0 rgba(0,0,0,.55) !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :is(input, textarea, select){
  color:var(--lt-osso) !important;
  background:var(--lt-fango) !important;
  border-color:#6a6448 !important;
  border-radius:2px !important;
}
:root[data-brand="trash"] :is(#view-terminal, #view-chat, #view-watchlist,
#view-leaderboard, #view-profile, #view-stocks) :focus-visible{
  outline:2px solid var(--lt-lanterna);
  outline-offset:3px;
}
:root[data-brand="trash"] :is(#view-token, #view-stock) :is(h1, h2, h3){
  transform:none !important;
  text-shadow:none !important;
}

/* ---- 22.2 LE DUE SUPERFICI DELLA PAGINA TOKEN che erano rimaste fuori
   dalla grammatica (vedi 22.1). Qui si tocca SOLO il telaio: nessun colore
   di testo, nessuna cifra, nessun controllo di acquisto. ---- */

/* La fascia in cima: era l'altra piastra senza bordo (fondo rgb(42,43,30),
   bordo 1px). Prende il telaio delle altre, e basta: niente rivetti, perche'
   dentro c'e' un'immagine con object-fit:cover che copre tutta la superficie
   e li nasconderebbe. Il disegno del banner e' del token, non nostro. */
:root[data-brand="trash"] :is(#view-token, #view-stock) .tk2-banner{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
}

/* La cassa del grafico era la terza costruzione: fondo rgb(22,24,15), raggio
   2, bordo 1px e un filo bianco sotto. Sta DENTRO una carta gia' bordata,
   quindi non prende un bordo: prende l'INCAVO, cioe' lo stesso solco dei
   divisori letto al contrario (incisione scura dentro, filo di lamiera
   fuori). E' la stessa cosa che fa gia' la traccia della barra di
   avanzamento. Il grafico si disegna dentro e non cambia di un pixel. */
:root[data-brand="trash"] :is(#view-token, #view-stock) .chart-wrap{
  border:0 !important;
  background-color:var(--lt-fango) !important;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.6), 0 1px 0 var(--lt-lamiera-hi) !important;
}
:root[data-brand="trash"] :is(#view-token, #view-stock) .chart-empty{
  background:none !important;
}

@media (prefers-reduced-motion:reduce){
  :root[data-brand="trash"] .tr-marquee > span{ animation:none !important; }
}

/* =========================================================================
   23. LA LISTA DEI TOKEN: ROBA STESA SU UN TELO.
   Era la parte piu' importante della schermata ed era rimasta una tabella
   scura qualunque: sei colonne, righe uguali, zero materia. Qui diventa la
   cosa che e' nel disegno: una striscia di lamiera fa da intestazione, le
   etichette sono stampigliate a mascherina, e ogni riga e' un ritaglio
   piatto di cartone o di metallo appoggiato sul telo, uno un po' piu'
   sporco dell'altro. Il fondo del pannello e' strappato.
   I NUMERI NON SI TOCCANO: restano monospazio, senza ombre e senza storture.
   ========================================================================= */

/* Il pannello. Il bordo basso se ne va: il bordo, qui, e' lo strappo. */
:root[data-brand="trash"] .tok-panel{
  position:relative;
  overflow:hidden !important;
  border-bottom:0 !important;
  padding-bottom:15px !important;
}
/* L'alone che segue il puntatore (v4) qui non serve: il pannello e' opaco. */
:root[data-brand="trash"] .tok-panel::before{ content:none !important; }
/* IL BORDO STRAPPATO. Un dente di sega del colore del fondo pagina mangia
   gli ultimi quindici pixel, piu' una fila di intacchi irregolari sotto:
   due periodi diversi (19px e 15px) perche' uno solo si legge come una
   decorazione ripetuta invece che come uno strappo. */
:root[data-brand="trash"] .tok-panel::after{
  content:'' !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:15px !important;
  width:auto !important;
  opacity:1 !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(135deg, #0b0c07 50%, transparent 50%) 0 0/19px 15px repeat-x,
    linear-gradient(225deg, #0b0c07 50%, transparent 50%) 0 0/19px 15px repeat-x,
    linear-gradient(135deg, #0b0c07 50%, transparent 50%) 7px 5px/15px 10px repeat-x,
    linear-gradient(225deg, #0b0c07 50%, transparent 50%) 7px 5px/15px 10px repeat-x !important;
  -webkit-mask-image:none !important;
          mask-image:none !important;
}
:root[data-brand="trash"] .tok-panel:hover::after{ opacity:1 !important; }

/* L'INTESTAZIONE: una striscia di lamiera imbullonata sopra la fila. */
:root[data-brand="trash"] .tok-head{
  background-color:#2c2a1d !important;
  background-image:
    radial-gradient(circle at 10px 50%, #6a6448 0 2px, rgba(0,0,0,.55) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) 50%, #6a6448 0 2px, rgba(0,0,0,.55) 2px 3.4px, transparent 3.4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px, rgba(0,0,0,.22) 9px 11px, transparent 11px 20px),
    linear-gradient(180deg, #3a3526 0%, #262418 100%) !important;
  border-bottom:2px solid #0d0e08 !important;
  box-shadow:0 2px 0 rgba(106,100,72,.30) !important;
}
/* Le etichette: vernice a mascherina su metallo. Sono PAROLE, non cifre,
   quindi qui il carattere pesante e l'ombra dura sono ammessi. */
:root[data-brand="trash"] .tok-head > *{
  font-weight:400 !important;
  font-size:11px !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:#c2b48c !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.7) !important;
}

/* LE RIGHE: ritagli piatti, non piastre. Niente rivetti, niente ombra
   proiettata (dentro un pannello che taglia il traboccamento si vedeva solo
   meta' ombra), solo un filo chiaro sotto il taglio scuro. */
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row{
  border:0 !important;
  border-bottom:2px solid #0c0d07 !important;
  box-shadow:0 1px 0 rgba(106,100,72,.26) !important;
  transition:background-color .1s linear;
}
/* Lo sporco, alternato. Due fondi diversi e due smerigliature diverse: una
   riga su due e' passata piu' volte, come il piano di un banco. */
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row:nth-child(odd){
  background-color:#1b1c13 !important;
  background-image:
    radial-gradient(90% 130% at 4% 50%, rgba(0,0,0,.34) 0%, transparent 58%),
    repeating-linear-gradient(97deg, rgba(255,255,255,.016) 0 2px, transparent 2px 26px) !important;
}
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row:nth-child(even){
  background-color:#16170f !important;
  background-image:
    radial-gradient(80% 120% at 96% 40%, rgba(90,70,34,.16) 0%, transparent 62%),
    repeating-linear-gradient(83deg, rgba(0,0,0,.20) 0 3px, transparent 3px 34px) !important;
}
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row:hover{
  background-color:#25261a !important;
  transform:none !important;
  border-bottom-color:var(--lt-ruggine) !important;
}
/* La colatura di ruggine in cima alla riga (sezione 4) su venti righe di
   fila diventava una grata. Qui torna a essere un caso: forte una riga su
   tre, quasi spenta sulle altre. */
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row::after{ opacity:.28 !important; }
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row:nth-child(3n)::after{ opacity:.72 !important; }
:root[data-brand="trash"] .tok-panel:not(.is-cards) .tok-row:last-child{ border-bottom:0 !important; box-shadow:none !important; }

/* Il marchio del token: una targhetta inchiodata, appena storta. Non e' un
   numero, quindi puo' pendere. */
:root[data-brand="trash"] .tok-panel .tr-img{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.55) !important;
  transform:rotate(-1.5deg);
}
:root[data-brand="trash"] .tok-panel .tok-row:nth-child(even) .tr-img{ transform:rotate(1.5deg); }
:root[data-brand="trash"] .tok-panel .tok-row:hover .tr-img{ transform:rotate(0deg); }

/* Il nome e il sottotitolo. */
:root[data-brand="trash"] .tok-panel .tr-n1{
  font-weight:400 !important;
  color:var(--lt-osso) !important;
}
:root[data-brand="trash"] .tok-panel .tr-n2{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .tok-panel .tr-dot{ color:var(--lt-ruggine-hi) !important; opacity:.8 !important; }

/* Le etichette di colonna che compaiono sul telefono: stampigliate anche
   loro, cosi' la riga stretta non diventa un elenco di parole neutre. */
:root[data-brand="trash"] .tok-panel .tr-lbl{
  font-weight:400 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:#8d876f !important;
}

/* LA BARRA DEL PROGRESSO: un indicatore di livello arrugginito. Fondo
   scavato, riempimento pieno di ruggine, spigoli vivi. */
:root[data-brand="trash"] .tr-bar,
:root[data-brand="trash"] .feat-bar,
:root[data-brand="trash"] .token-progress{
  border-radius:2px !important;
  background-color:#0c0d07 !important;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px) !important;
  border:1px solid #3a3a28 !important;
  box-shadow:none !important;
}
:root[data-brand="trash"] .tr-bar-fill,
:root[data-brand="trash"] #view-home .tr-bar-fill,
:root[data-brand="trash"] .feat-bar > i,
:root[data-brand="trash"] .token-progress-fill{
  border-radius:0 !important;
  background-image:linear-gradient(180deg,#d2703a,#8f4116) !important;
  box-shadow:none !important;
}
:root[data-brand="trash"] .feat-bar > i::after,
:root[data-brand="trash"] .tr-bar-fill::after{ content:none !important; }

/* LA VISTA A SCHEDE. Qui invece la piastra ci sta: ogni token e' un pezzo
   appoggiato per conto suo. Il pannello dietro pero' deve sparire, o resta
   una cassa vuota intorno alla griglia: la sezione 3 gliela dava con
   !important e vinceva sul foglio che la spegneva. */
:root[data-brand="trash"] .tok-panel.is-cards,
:root[data-brand="trash"] #view-home .tok-panel.is-cards{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding-bottom:0 !important;
}
:root[data-brand="trash"] .tok-panel.is-cards::after{ content:none !important; }
:root[data-brand="trash"] .tok-panel.is-cards .tok-row{
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
}
:root[data-brand="trash"] .tok-panel.is-cards .tok-row:nth-child(2n){ transform:rotate(-.35deg); }
:root[data-brand="trash"] .tok-panel.is-cards .tok-row:nth-child(3n){ transform:rotate(.4deg); }
:root[data-brand="trash"] .tok-panel.is-cards .tok-row:hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:7px 8px 0 rgba(0,0,0,.6) !important;
}
/* Le righe finte del caricamento non devono lampeggiare come una vetrina. */
:root[data-brand="trash"] .tok-row.skel-row{ opacity:.5; }

/* =========================================================================
   24. I FILTRI: linguette di lamiera verniciata e nastro scritto a mano.
   ========================================================================= */
:root[data-brand="trash"] .fl-bar{
  border-top:2px solid #3a3a28 !important;
  border-bottom:0 !important;
}
:root[data-brand="trash"] :is(.fl-btn, .fl-ghost, .fl-o, .fs-p, .lv-b, .page-btn, .page-num){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:#22231a !important;
  background-image:linear-gradient(180deg,#2a2b1e,#1b1c13) !important;
  color:var(--lt-nastro) !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
:root[data-brand="trash"] :is(.fl-btn, .fl-ghost, .fl-o, .fs-p, .lv-b):hover{
  color:var(--lt-osso) !important;
  border-color:#6a6448 !important;
  background-image:linear-gradient(180deg,#343524,#232418) !important;
}
:root[data-brand="trash"] .fl-ghost{
  border-style:dashed !important;
  background-image:none !important;
  color:var(--lt-fumo) !important;
}
/* Acceso: la linguetta e' stata riverniciata di ruggine. */
:root[data-brand="trash"] :is(.fl-btn.is-on, .fl-o.on, .fs-p.is-on, .lv-b.on, .page-num.active){
  color:#f6efdd !important;
  border-color:#6b3313 !important;
  background-color:#a04a1a !important;
  background-image:linear-gradient(180deg,#c96a2a,#97441a) !important;
}
:root[data-brand="trash"] .fl-n{
  border-radius:2px !important;
  background:var(--lt-lanterna) !important;
  color:#1a1408 !important;
  font-family:var(--font-mono) !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] .fl-panel{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg,#24251a 0%,#1a1b12 46%,#2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
}
/* Il nome del gruppo di filtri: scritto col pennarello sul nastro. */
:root[data-brand="trash"] .fl-k{
  display:inline-block;
  font-size:10px !important;
  font-weight:400 !important;
  letter-spacing:.16em !important;
  color:#241f14 !important;
  background:var(--lt-nastro) !important;
  padding:2px 7px !important;
  align-self:flex-start;
  transform:rotate(-1.2deg);
  clip-path:polygon(2% 0,98% 4%,100% 95%,3% 100%);
  text-shadow:none !important;
}
:root[data-brand="trash"] .fl-g:nth-child(2n) .fl-k{ transform:rotate(1deg); background:#a8b17e !important; }
:root[data-brand="trash"] .lv{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background:#14150e !important;
}
:root[data-brand="trash"] .fs-bell{ color:var(--lt-lanterna) !important; }
:root[data-brand="trash"] .fs-x{ color:var(--lt-fumo) !important; }

/* =========================================================================
   25. LA PAGINAZIONE: targhette numerate inchiodate in fondo al telo.
   Il numero della pagina resta in monospazio: e' una cifra.
   ========================================================================= */
:root[data-brand="trash"] .page-num{
  font-family:var(--font-mono) !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] :is(.page-btn, .page-num):hover:not(:disabled):not(.active){
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .page-btn:disabled{ opacity:.32 !important; box-shadow:none !important; }
:root[data-brand="trash"] .page-ellipsis{ color:var(--lt-fumo) !important; }

/* =========================================================================
   26. QUANDO NON C'E' NIENTE: un pezzo di cartone con su scritto niente.
   ========================================================================= */
:root[data-brand="trash"] .empty-state{
  position:relative;
  border-radius:2px !important;
  border:2px dashed #4a4632 !important;
  background-color:#15160e !important;
  background-image:repeating-linear-gradient(101deg, rgba(64,54,34,.16) 0 3px, transparent 3px 46px) !important;
  color:var(--lt-fumo) !important;
  font-weight:400 !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
:root[data-brand="trash"] .empty-state a{
  color:var(--lt-lanterna) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Il nastro che lo tiene su. */
:root[data-brand="trash"] .empty-state::before{
  content:'';
  position:absolute; top:-9px; left:50%; width:96px; height:22px;
  margin-left:-48px;
  background:rgba(201,187,146,.55);
  transform:rotate(-2deg);
  clip-path:polygon(2% 0,98% 6%,100% 94%,3% 100%);
  pointer-events:none;
}

/* =========================================================================
   27. LA FASCIA DEL MERCATO: l'insegna dipinta sopra il cancello.
   Le cifre restano monospazio e pulite: sono la cosa vera della fascia.
   ========================================================================= */
:root[data-brand="trash"] .market-bar{ position:relative; }
:root[data-brand="trash"] .mb-top{
  border-bottom:2px solid #0d0e08 !important;
  box-shadow:0 2px 0 rgba(106,100,72,.24);
}
:root[data-brand="trash"] .mb-kicker{
  border-radius:0 !important;
  border:0 !important;
  background:var(--lt-nastro) !important;
  color:#241f14 !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  padding:3px 9px !important;
  transform:rotate(-1.5deg);
  box-shadow:1px 2px 3px rgba(0,0,0,.5);
  clip-path:polygon(2% 0,98% 4%,100% 94%,3% 100%);
  text-shadow:none !important;
}
:root[data-brand="trash"] .mb-brand img{
  border-radius:2px;
  border:2px solid #4a4632;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
:root[data-brand="trash"] .mb-name{
  font-weight:400 !important;
  color:var(--lt-osso) !important;
  text-transform:uppercase;
}
:root[data-brand="trash"] .mb-desc{ color:var(--lt-fumo) !important; }
/* Le quattro caselle: ognuna un riquadro graffiato, con la sua targhetta. */
:root[data-brand="trash"] .ms-item{
  border-left:2px solid #33321f;
  padding-left:12px;
  min-width:0;
}
:root[data-brand="trash"] .ms-item:first-child{ border-left:0; padding-left:0; }
:root[data-brand="trash"] .ms-item dt{
  font-weight:400 !important;
  letter-spacing:.13em !important;
  color:#8d876f !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
:root[data-brand="trash"] .ms-item dt svg{ color:var(--lt-ruggine-hi); }
:root[data-brand="trash"] .ms-item dd{
  font-family:var(--font-mono) !important;
  color:var(--lt-osso) !important;
  text-shadow:none !important;
  transform:none !important;
}
:root[data-brand="trash"] .ms-item.accent dd,
:root[data-brand="trash"] .ms-item:last-child dd{ color:var(--lt-lanterna) !important; }
:root[data-brand="trash"] .ms-usd{
  font-family:var(--font-mono) !important;
  color:var(--lt-fumo) !important;
  text-shadow:none !important;
}
@media (max-width:520px){
  /* A 400px le quattro caselle stanno su due colonne: la riga divisoria
     verticale al centro basta, quella a inizio riga diventa un bordo
     appeso nel vuoto. */
  :root[data-brand="trash"] .ms-item:nth-child(odd){ border-left:0; padding-left:0; }
}

/* =========================================================================
   28. IL TOKEN IN EVIDENZA: il pezzo migliore, messo davanti sul bancone.
   ========================================================================= */
:root[data-brand="trash"] #trendingSection,
:root[data-brand="trash"] .feature{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg,#26271a 0%,#1a1b12 52%,#2c2d1f 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  overflow:hidden;
}
:root[data-brand="trash"] .feat-main{ background:transparent !important; }
:root[data-brand="trash"] .feat-k{
  display:inline-block;
  font-weight:400 !important;
  color:#241f14 !important;
  background:var(--lt-lanterna) !important;
  padding:3px 9px !important;
  letter-spacing:.12em !important;
  transform:rotate(-1.4deg);
  clip-path:polygon(2% 0,98% 5%,100% 94%,3% 100%);
  text-shadow:none !important;
}
:root[data-brand="trash"] .feat-k::before{ content:none !important; }
:root[data-brand="trash"] .feat-name{
  font-weight:400 !important;
  color:var(--lt-osso) !important;
  text-shadow:2px 2px 0 rgba(0,0,0,.7);
}
:root[data-brand="trash"] .feat-sub{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .feat-av{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.55) !important;
}
:root[data-brand="trash"] .feat-nums b{
  font-family:var(--font-mono) !important;
  color:var(--lt-osso) !important;
  text-shadow:none !important;
  transform:none !important;
}
:root[data-brand="trash"] .feat-nums span{
  font-weight:400 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:#8d876f !important;
}
:root[data-brand="trash"] .feat-note{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .feat-side{
  border-left:2px solid #3a3a28 !important;
  background-color:rgba(0,0,0,.22) !important;
}
:root[data-brand="trash"] .feat-side .k{
  font-weight:400 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:#c2b48c !important;
}
/* La lanterna che respira: e' l'unica luce viva della schermata. */
:root[data-brand="trash"] .feed-pulse{
  background:var(--lt-lanterna) !important;
  border-radius:2px !important;
  animation:ltLanterna 3.4s steps(1,end) infinite;
}
:root[data-brand="trash"] .feed-pulse::after{ content:none !important; }
@keyframes ltLanterna{
  0%,54%,62%,100%{ opacity:1; }
  58%{ opacity:.42; }
  72%{ opacity:.66; }
}
@media (max-width:900px){
  :root[data-brand="trash"] .feat-side{ border-left:0 !important; border-top:2px solid #3a3a28 !important; }
}

/* =========================================================================
   29. I MODULI. Fuori dalla pagina di un token, dove non si digitano
   importi da spendere subito, i campi diventano lastre incise: fondo di
   fango, filo di metallo, etichetta stampigliata sopra.
   L'elenco delle viste e' esplicito: #view-token e #view-stock NON ci sono
   e non devono entrarci mai (vedi la sezione 34).
   ========================================================================= */
:root[data-brand="trash"] :is(#view-create, #view-create-stock, #view-docs,
#view-profile, #view-watchlist, #view-terminal, #view-chat,
.modal, .fl-panel) :is(label, .field label){
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.09em !important;
  font-size:11.5px !important;
  color:#b9ad86 !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);
}
:root[data-brand="trash"] :is(#view-create, #view-create-stock, #view-docs,
#view-profile, #view-watchlist, #view-terminal, #view-chat,
.modal) :is(input:not([type=range]), textarea, select){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:#0f100a !important;
  background-image:linear-gradient(180deg, rgba(0,0,0,.35), transparent 22px) !important;
  color:var(--lt-osso) !important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.45) !important;
}
:root[data-brand="trash"] :is(#view-create, #view-create-stock, #view-docs,
#view-profile, #view-watchlist, #view-terminal, #view-chat,
.modal) :is(input:not([type=range]), textarea, select):focus{
  border-color:var(--lt-ruggine) !important;
  outline:none !important;
}
:root[data-brand="trash"] :is(#view-create, #view-create-stock, .modal)
:is(input, textarea)::placeholder{ color:#6f6a58 !important; }
/* Le caselle e i pallini prendono il colore delle lanterne. */
:root[data-brand="trash"] input[type=checkbox],
:root[data-brand="trash"] input[type=radio],
:root[data-brand="trash"] input[type=range]{ accent-color:var(--lt-ruggine-hi); }
/* GLI IMPORTI RESTANO CIFRE: monospazio anche dentro un campo. */
:root[data-brand="trash"] #devBuyInput,
:root[data-brand="trash"] #stDevBuy,
:root[data-brand="trash"] #stTax,
:root[data-brand="trash"] input[type=number],
:root[data-brand="trash"] input[inputmode=decimal]{
  font-family:var(--font-mono) !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] .hint{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .hint.err{ color:#e07a5a !important; }
:root[data-brand="trash"] .hint.ok{ color:var(--lt-muschio) !important; }
:root[data-brand="trash"] .hint.warn{ color:var(--lt-lanterna) !important; }
:root[data-brand="trash"] .opt, :root[data-brand="trash"] .lb-opt{
  color:#6f6a58 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:lowercase !important;
}
:root[data-brand="trash"] .upload-btn{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-image:linear-gradient(180deg,#2a2b1e,#1b1c13) !important;
  color:var(--lt-nastro) !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .upload-btn:hover{ border-color:#6a6448 !important; color:var(--lt-osso) !important; }
:root[data-brand="trash"] .upload-btn.ghost{ border-style:dashed !important; background-image:none !important; }
/* Le due caselle in cui si trascina un'immagine: due riquadri vuoti
   inchiodati, non due rettangoli col bordo tratteggiato educato. */
/* IL RIQUADRO DEL LOGO, E UN DIFETTO CHE HO INTRODOTTO IO.
   Segnalato: "quando creo un token e metto il logo non appare nella
   anteprima". Riprodotto e trovato: il JavaScript, quando si sceglie un file,
   scrive l'immagine come background-image INLINE su questo riquadro. Ma qui
   c'era un background-image con !important, e un !important del foglio batte
   uno stile inline senza. Risultato: l'immagine veniva scritta e subito
   coperta dalla texture delle assi. Il caricamento funzionava, il file
   arrivava, il token si creava col suo logo: semplicemente non si vedeva.

   La texture passa su ::before, che sta SOTTO il contenuto e non contende
   piu' la proprieta' all'immagine. Il riquadro resta vestito uguale quando e'
   vuoto, e quando l'immagine c'e' la mostra.
   pointer-events:none perche' il riquadro e' cliccabile: senza, lo strato
   decorativo si mangerebbe il click che apre il selettore dei file. */
:root[data-brand="trash"] .img-preview,
:root[data-brand="trash"] .bn-drop{
  position:relative;
  border-radius:2px !important;
  border:2px dashed #4a4632 !important;
  background-color:#12130c !important;
  background-size:cover;
  background-position:center;
  color:var(--lt-fumo) !important;
}
:root[data-brand="trash"] .img-preview::before,
:root[data-brand="trash"] .bn-drop::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(101deg, rgba(64,54,34,.18) 0 3px, transparent 3px 40px);
}
/* Quando l'immagine c'e', la texture sparisce: le assi sopra un logo lo
   sporcherebbero, e chi carica un logo vuole vedere il logo. */
:root[data-brand="trash"] .img-preview[style*="background-image"]::before,
:root[data-brand="trash"] .bn-drop[style*="background-image"]::before{ display:none; }
:root[data-brand="trash"] .img-preview > *,
:root[data-brand="trash"] .bn-drop > *{ position:relative; z-index:1; }
:root[data-brand="trash"] .img-preview:hover,
:root[data-brand="trash"] .bn-drop:hover{ border-color:var(--lt-ruggine) !important; }
:root[data-brand="trash"] .char-count{
  font-family:var(--font-mono) !important;
  color:var(--lt-fumo) !important;
}
/* Le scelte a riquadro (curva, modalita', coppia): piastrelle di metallo. */
:root[data-brand="trash"] :is(.pair-opt, .mode, .mode-btn){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:#1a1b12 !important;
}
:root[data-brand="trash"] :is(.pair-opt.selected, .mode.active, .mode-btn.active){
  border-color:var(--lt-ruggine) !important;
  background-color:rgba(180,85,31,.14) !important;
}
:root[data-brand="trash"] .pair-opt-title{ color:var(--lt-osso) !important; }
:root[data-brand="trash"] .pair-opt-desc{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .create-preview-label{
  font-weight:400 !important;
  color:#8d876f !important;
  letter-spacing:.13em !important;
}
:root[data-brand="trash"] .bond-out{
  font-family:var(--font-mono) !important;
  color:var(--lt-lanterna) !important;
  text-shadow:none !important;
}

/* =========================================================================
   30. LA DOCUMENTAZIONE: fogli inchiodati a una bacheca di compensato.
   Qui la grafica si sporca ma il testo NO: e' il posto in cui si va a
   capire prima di mettere dei soldi, quindi corpo pieno, niente storture
   sui paragrafi, niente ombre sotto le righe lunghe.
   ========================================================================= */
:root[data-brand="trash"] #view-docs .docs-sec{
  position:relative;
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 11px 11px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) 11px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 11px calc(100% - 11px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg,#24251a 0%,#1a1b12 46%,#2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  padding-inline:18px !important;
}
:root[data-brand="trash"] #view-docs .docs-sec::before{ content:none !important; }
:root[data-brand="trash"] #view-docs .docs-sec:hover{ transform:none !important; }
:root[data-brand="trash"] #view-docs :is(.docs-sec p, .docs-sec li, .docs-panel p){
  color:var(--text-dim) !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] #view-docs :is(h2, h3){
  transform:none !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.6) !important;
}
/* Le linguette dell'indice: cartelli avvitati, quello aperto e' ruggine. */
:root[data-brand="trash"] .docs-tab{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-image:linear-gradient(180deg,#2a2b1e,#1b1c13) !important;
  color:var(--lt-nastro) !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .docs-tab:hover{ border-color:#6a6448 !important; color:var(--lt-osso) !important; transform:none !important; }
:root[data-brand="trash"] .docs-tab.active{
  color:#f6efdd !important;
  border-color:#6b3313 !important;
  background-color:#a04a1a !important;
  background-image:linear-gradient(180deg,#c96a2a,#97441a) !important;
}
:root[data-brand="trash"] #view-docs .docs-tab.active::before{ content:none !important; }
:root[data-brand="trash"] :is(.docs-toc, .docs-nav){
  border-radius:2px !important;
}
:root[data-brand="trash"] :is(.docs-toc, .docs-nav) a{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-image:linear-gradient(180deg,#2a2b1e,#1b1c13) !important;
  color:var(--lt-nastro) !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
}
/* Il riquadro di avvertimento: un foglio attaccato col nastro sopra. */
:root[data-brand="trash"] .docs-note{
  position:relative;
  border-radius:2px !important;
  border:2px solid #6b5a2a !important;
  border-left:5px solid var(--lt-lanterna) !important;
  background-color:#1e1c11 !important;
  color:var(--lt-osso) !important;
  box-shadow:3px 3px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .docs-note strong{ color:var(--lt-lanterna) !important; }
/* Le righe "nome: cosa fa": due colonne separate da un filo di metallo. */
:root[data-brand="trash"] .docs-mode{
  border-top:2px solid #33321f !important;
  padding-block:12px !important;
}
:root[data-brand="trash"] .docs-mode b{
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
  color:var(--lt-nastro) !important;
}
:root[data-brand="trash"] .docs-mode span{ color:var(--text-dim) !important; }
/* Le tabelle: righe scavate nel metallo, il valore a destra in monospazio. */
:root[data-brand="trash"] :is(.docs-table, #view-docs table){
  border-collapse:collapse !important;
  width:100% !important;
}
:root[data-brand="trash"] :is(.docs-table, #view-docs table) :is(td, th){
  border-bottom:2px solid #2b2b1c !important;
  color:var(--text-dim) !important;
}
:root[data-brand="trash"] :is(.docs-table, #view-docs table) th{
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  color:#8d876f !important;
  background:#22231a !important;
}
:root[data-brand="trash"] :is(.docs-table, #view-docs table) tr:nth-child(even) td{
  background:rgba(0,0,0,.18) !important;
}
:root[data-brand="trash"] :is(.docs-table, #view-docs table) td:last-child{
  font-family:var(--font-mono) !important;
  color:var(--lt-osso) !important;
  text-shadow:none !important;
}
:root[data-brand="trash"] .docs-head p{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .docs-foot{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .docs-foot a{ color:var(--lt-lanterna) !important; }

/* =========================================================================
   31. FINESTRE, MENU, BARRA LATERALE, BARRA DEL TELEFONO.
   Tutto quello che si apre sopra la pagina: nessun vetro, nessuna sfocatura,
   solo lamiera e ombra dura.
   ========================================================================= */
:root[data-brand="trash"] .modal-backdrop{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-color:rgba(7,8,4,.82) !important;
}
:root[data-brand="trash"] .modal::after,
:root[data-brand="trash"] .modal::before{ content:none !important; }
:root[data-brand="trash"] .modal-sub{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .modal .accept-row label{ color:var(--text-dim) !important; }

/* Il menu a tendina scritto a mano (sel2) e il menu delle reti. */
:root[data-brand="trash"] :is(.sel2-btn, .chain-trigger){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-image:linear-gradient(180deg,#2a2b1e,#1b1c13) !important;
  color:var(--lt-nastro) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] :is(.sel2-pan, .chain-menu){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:linear-gradient(163deg,#24251a,#1a1b12 46%,#2a2b1e) !important;
  box-shadow:5px 6px 0 rgba(0,0,0,.6) !important;
  backdrop-filter:none !important;
}
:root[data-brand="trash"] .sel2-pan::before{ content:none !important; }
:root[data-brand="trash"] .sel2-tit{
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.13em !important;
  color:#8d876f !important;
}
:root[data-brand="trash"] :is(.sel2-op, .chain-item){
  border-radius:2px !important;
  color:var(--lt-nastro) !important;
}
:root[data-brand="trash"] :is(.sel2-op:hover, .chain-item:hover){
  background:#2a2b1e !important;
  color:var(--lt-osso) !important;
}
:root[data-brand="trash"] :is(.sel2-op.is-sel, .chain-item.active){
  background:rgba(180,85,31,.20) !important;
  color:var(--lt-osso) !important;
}
:root[data-brand="trash"] .sel2-velo{ background:rgba(7,8,4,.78) !important; }

/* La barra laterale: una fila di cartelli avvitati a un montante. */
:root[data-brand="trash"] .sidebar{
  background-color:#15160f !important;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 11px, rgba(0,0,0,.26) 11px 13px, transparent 13px 24px) !important;
  border-right:2px solid #3a3a28 !important;
  backdrop-filter:none !important;
}
:root[data-brand="trash"] .side-label{
  font-weight:400 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:#8d876f !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
:root[data-brand="trash"] .side-link{
  border-radius:2px !important;
  color:var(--lt-nastro) !important;
  font-weight:400 !important;
  letter-spacing:.02em;
  border:2px solid transparent !important;
}
:root[data-brand="trash"] .side-link:hover{
  background:#22231a !important;
  border-color:#3a3a28 !important;
  color:var(--lt-osso) !important;
}
:root[data-brand="trash"] .side-link.active{
  background-color:#2a2b1e !important;
  background-image:linear-gradient(90deg, rgba(180,85,31,.30), transparent 70%) !important;
  border-color:#4a4632 !important;
  color:var(--lt-osso) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .side-link.active::before{
  background:var(--lt-ruggine-hi) !important;
  border-radius:0 !important;
}
:root[data-brand="trash"] .sidebar .side-cta{
  border-radius:2px !important;
  border:2px solid #6b3313 !important;
  background-image:linear-gradient(180deg,#c96a2a,#97441a) !important;
  color:#f6efdd !important;
  font-family:var(--font-display) !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  box-shadow:3px 3px 0 rgba(0,0,0,.55) !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.5) !important;
}
:root[data-brand="trash"] .sidebar .side-cta::after{ content:none !important; }
:root[data-brand="trash"] .sidebar .side-cta.stock{
  border-color:#4a4632 !important;
  background-image:linear-gradient(180deg,#3a3526,#262418) !important;
  color:var(--lt-nastro) !important;
}
:root[data-brand="trash"] .sidebar .side-cta:hover{ transform:translate(-1px,-1px); }
:root[data-brand="trash"] .side-foot{ color:var(--lt-fumo) !important; border-top:2px solid #2b2b1c !important; }
:root[data-brand="trash"] .side-foot a{ color:var(--lt-fumo) !important; }
:root[data-brand="trash"] .side-foot a:hover{ color:var(--lt-lanterna) !important; }
:root[data-brand="trash"] .side-chain{ border-radius:2px !important; color:var(--lt-nastro) !important; }

/* La barra in fondo sul telefono: una lastra appoggiata di traverso. */
:root[data-brand="trash"] .tabbar{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-color:#191a11 !important;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px, rgba(0,0,0,.30) 10px 12px, transparent 12px 22px) !important;
  box-shadow:0 -2px 0 #3a3a28 !important;
}
:root[data-brand="trash"] .tb-item{
  color:#8d876f !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
}
:root[data-brand="trash"] .tb-item.active,
:root[data-brand="trash"] .tb-item[aria-current="page"]{ color:var(--lt-lanterna) !important; }

/* =========================================================================
   32. LE BARRE DI SCORRIMENTO: due guide arrugginite.
   ========================================================================= */
:root[data-brand="trash"] *{
  scrollbar-width:thin;
  scrollbar-color:#8a4318 #12130c;
}
:root[data-brand="trash"] ::-webkit-scrollbar{ width:12px; height:12px; }
:root[data-brand="trash"] ::-webkit-scrollbar-track{
  background-color:#12130c;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px);
}
:root[data-brand="trash"] ::-webkit-scrollbar-thumb{
  border-radius:2px;
  border:2px solid #12130c;
  background-color:#8a4318;
  background-image:linear-gradient(90deg,#6b3313,#b4551f 45%,#6b3313);
}
:root[data-brand="trash"] ::-webkit-scrollbar-thumb:hover{
  background-image:linear-gradient(90deg,#8a4318,#d2703a 45%,#8a4318);
}
:root[data-brand="trash"] ::-webkit-scrollbar-corner{ background:#12130c; }

/* =========================================================================
   33. IL FONDO, TERZA PASSATA: adesso e' una discarica, non una texture.
   Cosa mancava: la roba. Una trama di lamiera e quattro macchie scure si
   leggono come "carta da parati sporca", non come un posto. Qui in fondo
   allo schermo c'e' un orizzonte di sacchi ammucchiati con dentro copertoni,
   una cassa, un'asse, un carrello; dal bordo alto colano le solite colature;
   e le lanterne fanno tre pozze calde invece di due fredde.
   Tutto in CSS: due SVG in linea e una pila di gradienti, nessun file nuovo.
   Lo strato e' `position:fixed` e viene promosso a livello suo con una
   trasformazione nulla, cosi' lo scorrimento non lo ridipinge.
   ========================================================================= */
:root[data-brand="trash"] body::before{
  transform:translateZ(0);
  background-color:#0b0c07 !important;
  background-image:
    /* (a) le colature dal bordo alto, a sinistra e a destra */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='430'%3E%3Cg fill='%23b4551f' fill-opacity='.16'%3E%3Cpath d='M6 0h7v210q0 12-3.5 12T6 210z'/%3E%3Ccircle cx='9.5' cy='222' r='5'/%3E%3Cpath d='M24 0h5v122q0 10-2.5 10T24 122z'/%3E%3Ccircle cx='26.5' cy='132' r='3.6'/%3E%3Cpath d='M40 0h9v300q0 13-4.5 13T40 300z'/%3E%3Ccircle cx='44.5' cy='313' r='6'/%3E%3Cpath d='M60 0h4v76q0 8-2 8t-2-8z'/%3E%3Ccircle cx='62' cy='84' r='3'/%3E%3Cpath d='M74 0h7v168q0 11-3.5 11T74 168z'/%3E%3Ccircle cx='77.5' cy='179' r='4.6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='430'%3E%3Cg fill='%23e0a33c' fill-opacity='.12'%3E%3Cpath d='M10 0h6v148q0 10-3 10t-3-10z'/%3E%3Ccircle cx='13' cy='159' r='4'/%3E%3Cpath d='M30 0h9v256q0 12-4.5 12T30 256z'/%3E%3Ccircle cx='34.5' cy='269' r='5.6'/%3E%3Cpath d='M52 0h4v92q0 8-2 8t-2-8z'/%3E%3Ccircle cx='54' cy='101' r='3.2'/%3E%3Cpath d='M68 0h8v196q0 11-4 11t-4-11z'/%3E%3Ccircle cx='72' cy='208' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    /* (b) L'ORIZZONTE DI RIFIUTI. Sacchi ammucchiati, due copertoni, una
       cassa a doghe, un'asse piantata, un carrello, una bottiglia. Nero
       quasi pieno: e' una sagoma contro il buio, non un disegno da guardare. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='210' viewBox='0 0 1200 210'%3E%3Cpath d='M0 210V150a40 34 0 0 1 80 0 55 46 0 0 1 110 0 32 26 0 0 1 64 0 48 52 0 0 1 96 0 38 30 0 0 1 76 0 60 44 0 0 1 120 0 34 40 0 0 1 68 0 50 34 0 0 1 100 0 42 50 0 0 1 84 0 58 38 0 0 1 116 0 36 30 0 0 1 72 0 52 46 0 0 1 104 0 30 26 0 0 1 60 0 25 34 0 0 1 50 0V210Z' fill='%23070803'/%3E%3Cg fill='none' stroke='%23090a05' stroke-width='13'%3E%3Ccircle cx='302' cy='118' r='26'/%3E%3Ccircle cx='856' cy='132' r='22'/%3E%3C/g%3E%3Cpath d='M552 108h56v44h-56z' fill='%23090a05'/%3E%3Cg stroke='%23161a0d' stroke-width='3'%3E%3Cpath d='M552 120h56M552 132h56M552 144h56'/%3E%3C/g%3E%3Cpath d='M980 152l52-72 12 9-52 72z' fill='%23090a05'/%3E%3Cg fill='none' stroke='%23090a05' stroke-width='5'%3E%3Cpath d='M636 118h58l-9 30h-49z'/%3E%3Cpath d='M636 118l-8-10h-12'/%3E%3Ccircle cx='646' cy='155' r='6'/%3E%3Ccircle cx='684' cy='155' r='6'/%3E%3C/g%3E%3Cpath d='M196 150v-20l3-6v-7h7v7l3 6v20z' fill='%23121608'/%3E%3Cpath d='M380 130h118v9H380z' fill='%230a0b05' transform='rotate(-6 439 134)'/%3E%3C/svg%3E"),
    /* (c) le tre pozze di lanterna: due in alto ai lati, una bassa al centro
       sopra il mucchio, che e' quella che fa sembrare il posto abitato */
    radial-gradient(46% 26% at 50% 96%, rgba(224,163,60,.20) 0%, transparent 68%),
    radial-gradient(70% 45% at 8% 0%, rgba(224,163,60,.17) 0%, transparent 65%),
    radial-gradient(60% 40% at 94% 12%, rgba(210,112,58,.14) 0%, transparent 62%),
    /* (d) due copertoni grandi, quasi invisibili, a mezza altezza */
    radial-gradient(circle at 14% 46%, transparent 0 64px, rgba(0,0,0,.40) 64px 88px, transparent 89px),
    radial-gradient(circle at 89% 62%, transparent 0 48px, rgba(0,0,0,.34) 48px 68px, transparent 69px),
    /* (e) la ruggine che cola dall'alto, irregolare */
    repeating-linear-gradient(90deg,
      transparent 0 47px, rgba(150,70,26,.16) 47px 52px, transparent 52px 96px,
      rgba(120,56,20,.12) 96px 103px, transparent 103px 191px),
    /* (f) le assi, larghe e storte */
    repeating-linear-gradient(101deg, rgba(64,54,34,.20) 0 3px, transparent 3px 58px),
    /* (g) la lamiera corrugata */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.030) 0 3px, transparent 3px 12px,
      rgba(0,0,0,.34) 12px 15px, transparent 15px 26px),
    /* (h) il muschio che sale dal fondo */
    linear-gradient(0deg, rgba(125,143,90,.16) 0%, transparent 30%) !important;
  background-repeat:
    no-repeat, no-repeat, repeat-x,
    no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat,
    repeat, repeat, repeat, no-repeat !important;
  background-position:
    left top, right top, left bottom,
    0 0, 0 0, 0 0,
    0 0, 0 0,
    0 0, 0 0, 0 0, 0 0 !important;
  background-size:
    90px 430px, 90px 430px, 1200px 210px,
    auto, auto, auto,
    auto, auto,
    auto, auto, auto, auto !important;
  opacity:1 !important;
}

/* =========================================================================
   34. LA GARANZIA, RIPETUTA IN FONDO PERCHE' E' L'ULTIMA PAROLA.
   Tutto quello che sta sopra puo' sporcare quanto vuole. Qui no.
   Vale per la pagina di un token, per quella di uno stock token e per
   qualunque pannello in cui si digita un importo: niente ombre sul testo,
   niente inclinazioni, niente ritagli, e ogni cifra in monospazio.
   Se domani si aggiunge un altro posto in cui si scrivono soldi, si
   aggiunge QUI, non si spera che nessuna regola lo raggiunga.
   ========================================================================= */
:root[data-brand="trash"] :is(#view-token, #view-stock, .buy-panel, #buyPanel) *{
  text-shadow:none !important;
}
:root[data-brand="trash"] :is(#view-token, #view-stock, .buy-panel, #buyPanel)
:is(h1, h2, h3, h4, h5, label, .tok-tag, .stat-label, .tk-k, .k, .feat-k, .fl-k,
.tr-lbl, .docs-mode b, legend, caption, th, .mb-kicker){
  transform:none !important;
  clip-path:none !important;
}
/* Le cifre: monospazio, dritte, senza ritagli, ovunque nel sito. */
:root[data-brand="trash"] :is(.mono, code, kbd, samp, .tr-num, .tr-pct, .tr-ca,
.ms-item dd, .ms-usd, .feat-nums b, .stat-value, .pf-stat-v, .tk2-v, .lb-val,
.bond-out, .page-num, output),
:root[data-brand="trash"] .stat b,
:root[data-brand="trash"] .tok-row b{
  font-family:var(--font-mono) !important;
  text-shadow:none !important;
  transform:none !important;
  clip-path:none !important;
  font-variant-numeric:tabular-nums;
}
/* Il pannello di acquisto resta quello che era: bordo di ruggine per dire
   dove si preme, e nient'altro addosso. */
:root[data-brand="trash"] :is(.buy-panel, #buyPanel) :is(input, button, .amt, .amount){
  border-radius:2px !important;
  text-shadow:none !important;
  transform:none !important;
}

/* =========================================================================
   35. CHI NON VUOLE MOVIMENTO NON LO AVRA'.
   Vale per tutto quello aggiunto qui sopra: la lanterna che pulsa, i
   sollevamenti al passaggio, le strisce.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  :root[data-brand="trash"] .feed-pulse{ animation:none !important; opacity:1 !important; }
  :root[data-brand="trash"] :is(.tok-row, .fl-btn, .fl-o, .fs-p, .page-btn,
  .page-num, .side-cta, .upload-btn, .docs-sec, .docs-tab, .tok-panel.is-cards .tok-row):hover{
    transform:none !important;
  }
  :root[data-brand="trash"] :is(.tok-row, .fl-btn, .fl-o, .page-btn, .page-num){
    transition:none !important;
  }
}

/* =========================================================================
   36. ALLINEARE LE CARD: NON DOVEVANO ESSERE TRE FAMIGLIE.
   Segnalato guardando il sito online, e da foto del telefono: "il background
   e le cards non le hai fatte uguali". Aveva ragione, e il difetto non era
   uno solo. Convivevano TRE famiglie di superfici:
     1. le piastre di lamiera fatte bene (le carte dei token, con i rivetti);
     2. pannelli BLU NAVY con gli angoli arrotondati, rimasti al tema
        precedente (il pie' di pagina, le carte degli scambi recenti, i passi
        della documentazione, la fascia del profilo, le carte trending degli
        azionari);
     3. la fascia fredda sopra la lista (.section-head), grigio-blu in mezzo
        a una pagina tutta marrone-oliva.

   IL METODO, perche' la prossima volta non si trovino a pezzi.
   Misurato nel browser su ogni rotta, per ogni elemento visibile:
     - FREDDO: il canale BLU del fondo e' maggiore del ROSSO. La discarica e'
       calda (R >= G > B), quindi B > R vuol dire "rimasto indietro". Si
       guarda l'alfa prima di allarmarsi: un velo rgba(180,85,31,.12) sopra
       una piastra scura risulta freddo alla misura ma caldo all'occhio.
     - TONDO: border-radius maggiore di 4px su un pannello. Qui il raggio e'
       2px ovunque, quindi un angolo morbido e' la firma del tema vecchio
       anche quando il colore e' gia' stato corretto.

   LA CAUSA, che e' il motivo per cui erano sfuggiti: NON erano classi
   dimenticate, erano VARIABILI dimenticate. La pelle riscriveva --panel,
   --bg-0, --border e i colori d'accento, ma non --pane-bg, --panel-2,
   --v3-panel e i raggi: v3 e v4 costruiscono meta' delle superfici su
   QUELLE, e per ogni chain c'e' un blocco che le ridichiara. Correggere le
   variabili sistema l'intera famiglia in un colpo; le regole qui sotto
   servono solo a dare il materiale (rivetti, ombra dura, bordo) a chi
   ancora non ce l'aveva.
   ========================================================================= */

/* ---- 36.1 LE VARIABILI FREDDE RIMASTE. Un posto solo.
   Stanno su :root in v3/v4 e nei blocchi per chain: qui la specificita' e'
   pari e trash.css e' l'ultimo foglio, quindi vince l'ordine. ---- */
:root[data-brand="trash"]{
  /* le superfici di v4 (pannelli "pane": section-head, footer, rt-c,
     feature-card, how-step, tok-panel) */
  --pane-bg:var(--lt-lamiera);
  --pane-bg-2:var(--lt-lamiera-hi);
  --pane-line:rgba(230,224,205,.13);
  --pane-inner:rgba(230,224,205,.07);
  --pane-line-hi:rgba(224,163,60,.30);
  --pane-edge:inset 0 1px 0 rgba(230,224,205,.05);
  --pane-lift:4px 5px 0 rgba(0,0,0,.55);
  /* le superfici di v3 (carte della griglia, menu, righe del terminale) */
  --v3-panel:var(--lt-lamiera);
  --v3-panel-2:var(--lt-lamiera-hi);
  --v3-line:#3a3a28;
  --v3-txt:var(--lt-osso);
  --v3-dim:#c3bda9;
  --v3-mute:var(--lt-fumo);
  /* le superfici di base rimaste: --panel-2 e' il piano RIALZATO rispetto a
     --panel, e cosi' resta (lamiera illuminata). Ci vivono gli avatar, i
     bottoni disattivati e le fasce dei banner. */
  --panel-2:var(--lt-lamiera-hi);
  --row-alt:#16180f;
  --border-2:#4a4632;

  /* ---- I RAGGI. Qui non si arrotonda: e' lamiera tagliata. ---- */
  --v2-r:2px;
  --v4-r-xl:2px; --v4-r-lg:2px; --v4-r-md:2px; --v4-r-sm:2px;
  --pane-r:2px;
}

/* ---- 36.2 LA PIASTRA, DATA A CHI NON CE L'AVEVA.
   Stessa ricetta della sezione 3, parola per parola: bordo 2px, sfumatura
   obliqua, quattro rivetti agli angoli con radial-gradient, ombra dura.
   L'elenco e' esplicito e non generico, cosi' si legge cosa e' stato
   vestito e cosa no. ---- */
:root[data-brand="trash"] :is(
  #discover,                    /* la fascia delle pillole chain e dei filtri */
  #stocksToolbar,               /* la stessa fascia nella vista azionari */
  .site-footer,                 /* il pie' di pagina, su OGNI rotta */
  .rt-c,                        /* le carte degli scambi recenti, in fondo */
  .how-step, .feature-card,     /* i passi e le carte della documentazione */
  .trend-card,                  /* le carte trending, vista azionari */
  .pf-banner,                   /* la fascia in testa al profilo */
  .tmx-bar, .tp,                /* la barra e il nastro del terminale */
  .tk2-kpi, .tk2-acts,          /* le fasce dei dati di una pagina token */
  .pf-empty, .trending-row
){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px,       #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg, #24251a 0%, #1a1b12 46%, #2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
}

/* Il pie' di pagina prende tutta la larghezza: senza un margine sotto,
   l'ombra dura finirebbe fuori dal documento e la piastra sembrerebbe
   incollata al bordo. */
:root[data-brand="trash"] .site-footer{ margin-bottom:34px !important; }

/* La fascia sopra la lista e la tabella sono due piastre impilate, non un
   pezzo unico: v4 le saldava togliendo il bordo in mezzo. Qui il bordo
   torna, ed e' giusto cosi' - sono due lamiere accostate. */
:root[data-brand="trash"] #discover{ border-bottom:2px solid #4a4632 !important; }

/* La fascia del profilo tiene i suoi aloni (ora color ruggine, perche'
   --green-rgb e' gia' riscritto in cima) SOPRA la lamiera: i rivetti
   restano visibili agli angoli. */
:root[data-brand="trash"] .pf-banner{
  background-image:
    radial-gradient(90% 200% at 4% 0%, rgba(180,85,31,.26), transparent 58%),
    radial-gradient(70% 160% at 96% 10%, rgba(224,163,60,.10), transparent 60%),
    radial-gradient(circle at 9px 9px,       #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg, #24251a 0%, #1a1b12 46%, #2a2b1e 100%) !important;
}

/* Al passaggio le carte si sollevano come le altre: stesso gesto, cosi' non
   si capisce piu' quali erano "le altre". */
:root[data-brand="trash"] :is(.rt-c, .how-step, .feature-card, .trend-card):hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 8px 0 rgba(0,0,0,.6) !important;
  border-color:var(--lt-ruggine) !important;
}

/* ---- 36.3 GLI ANGOLI MORBIDI RIMASTI.
   Quelli che non nascono da una variabile ma da un numero scritto a mano.
   Qui si tocca SOLO il raggio: colore e contrasto restano quelli che sono,
   perche' molti di questi sono gia' caldi e leggibili. ---- */
:root[data-brand="trash"] :is(
  .trust, .tm-row, .tmx-f, .tmx-search, .feemode-opt, .tax-summary, .chart-wrap, .pos-lead, .trade-tab-row, .trade-tab,
  .tk2-head, .tk2-banner, .sel2-pan, .chart-tf, .chart-type,
  #createStatusLog, #stkLog, .stat, .pf-stat, .lb-row, .wl-row,
  /* LE DUE FILE DI SCHEDE RIMASTE TONDE. v4 mette nello stesso gruppo
     .feed-tab, .docs-tab, .pf-tab, .chart-tf, .trade-tab, .chain-pill
     ("una fila di pillole con una attiva") e la pelle le aveva gia' squadrate
     tutte tranne queste due. Misurato: .chart-tf 2px, .trade-tab 2px,
     .docs-tab 2px, .chain-pill 2px, e .pf-tab 999px, .feed-tab 10px.
     Saltava all'occhio appena la fila delle schede del profilo e' diventata
     una piastra (sezione 22.1c): pillole del tema vecchio dentro la lamiera. */
  .pf-tab, .feed-tab
){
  border-radius:2px !important;
}

/* ---- 36.4 I BOTTONI SPENTI. Erano l'ultima cosa fredda rimasta, e stanno
   proprio dove si sta per spendere: "Connect wallet first" sotto il campo
   dell'importo e il bottone di lancio in fondo al modulo.
   Restano SPENTI e restano LEGGIBILI: piastra morta, testo fumo. Misurato
   4,9:1, sopra la soglia. Non si scurisce il testo per fare atmosfera. ---- */
:root[data-brand="trash"] :is(.btn-main, .btn-launch, .btn-primary, .btn-1,
.cta, .cta-primary, .side-cta):disabled{
  border-radius:2px !important;
  background-color:#1d1e15 !important;
  background-image:linear-gradient(180deg,#26271b,#15160e) !important;
  color:var(--lt-fumo) !important;
  -webkit-text-fill-color:var(--lt-fumo) !important;
  box-shadow:inset 0 0 0 2px #4a4632 !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* ---- 36.5 LE SUPERFICI CHE UNA SFUMATURA OPACA GIA' COPRIVA.
   .upload-btn e .sel2-btn avevano gia' il gradiente caldo addosso ma il
   background-color sotto era rimasto quello vecchio: all'occhio non si
   vedeva, alla misura risultavano freddi. Si allinea anche il colore, cosi'
   la prossima scansione non da' due falsi allarmi da inseguire. ---- */
:root[data-brand="trash"] :is(.upload-btn, .sel2-btn, .chain-trigger){
  background-color:#1b1c13 !important;
}

/* =========================================================================
   37. IL FONDO: SUOLO, NON FOSCHIA.
   Segnalato dalle foto del telefono: "adesso sembra una foschia verdastra
   piu' che il terreno di una discarica". Aveva ragione, e la causa non era
   il disegno del fondo: era che IL FONDO NON C'ERA.

   Due cose, misurate nel browser e non dedotte dal codice:

   1. `body::before` - dove vivono le sezioni 19 e 33, cioe' tutta la
      discarica: sacchi, copertoni, assi, orizzonte - risultava
      `display:none`. Lo spengono v2.css (riga 3293) e v3.css (riga 450),
      che sono piu' brevi come selettore ma dichiarano una proprieta' che
      qui non veniva mai ridichiarata: si scriveva il disegno e si lasciava
      il display a chi l'aveva spento. Due sezioni intere di questo foglio
      non sono MAI state visibili sul sito.

   2. Quello che si vedeva al loro posto era il campo di particelle,
      `#starfield-bg`. La sezione 1 provava a spegnerlo con `#starfield`,
      che e' un id che non esiste nel markup: quello vero ha il suffisso
      `-bg`. Restava acceso con `opacity:.75` e dipingeva due gradienti a
      tutto schermo nel colore `--star-tint`, che su Robinhood vale
      150,225,210 - un verde menta. ERA QUELLA LA FOSCHIA VERDE: non una
      velatura del tema, un cielo stellato color menta sopra una discarica.

   Qui si spegne il cielo, si riaccende il terreno, e il terreno viene
   rifatto perche' legga come SUOLO: terra battuta, ghiaia, chiazze di
   fango, la nervatura della lamiera sepolta e l'orizzonte di rifiuti in
   fondo. Niente aloni colorati a mezza pagina: sono loro a fare "nebbia".
   Restano tutte tinte della tavolozza campionata dal banner e le alfe
   stanno sotto il 5% dove passa del testo, quindi il contrasto delle
   piastre sopra non cala.
   ========================================================================= */

/* ---- 37.1 IL CIELO SE NE VA. Un campo stellato sopra una discarica era
   la cosa piu' fuori posto della pagina, e nessuno l'aveva vista perche'
   si presentava come "un fondo un po' verde". ---- */
:root[data-brand="trash"] #starfield-bg,
:root[data-brand="trash"] canvas#starfield-bg{ display:none !important; }
/* Se domani qualcosa lo riaccende, almeno la tinta e' quella giusta. */
:root[data-brand="trash"]{ --star-tint:180,85,31; }

/* ---- 37.2 LA TELA DEL DOCUMENTO. `html` restava a rgb(10,12,15), cioe'
   freddo: si vede oltre il fondo di `body` quando il documento e' piu'
   corto della finestra e nel rimbalzo dello scorrimento. ---- */
:root[data-brand="trash"]{ background-color:var(--lt-fango) !important; }

/* ---- 37.3 IL TERRENO. `display:block` e' la riga che mancava.
   ------------------------------------------------------------------------
   RIFATTO IL 2026-09-11, terza passata, su richiesta esplicita: "legge come
   una foschia verdastra invece che come il terreno di una discarica".
   Aveva ragione anche dopo la seconda passata, e il motivo si vede solo
   guardando i pixel invece del codice.

   COS'E' CHE FA "FOSCHIA": un alone largo e SFUMATO. Il disegno di prima
   aveva tre gradienti radiali da 180-320px con la sfumatura lunga, uno dei
   quali (rgba(42,43,30,.22) al 6% dell'altezza) SCHIARIVA la parte alta
   dello schermo fino quasi al valore di una piastra. Un alone morbido che
   schiarisce e' la definizione grafica della nebbia: non c'e' modo di
   leggerlo come materia. Fine degli aloni.

   COS'E' CHE FA "TERRA": la materia a scala PICCOLA. Grumi da dieci a
   trenta pixel, bordi frastagliati, valore basso. Qui i grumi sono due
   turbolenze SVG con la soglia alta - sotto la soglia non c'e' niente,
   sopra ci sono i grumi - una nera (il fango bagnato) e una bruna (la terra
   smossa). Una trappola pagata: senza `color-interpolation-filters='sRGB'`
   i filtri SVG lavorano in luce lineare, e un bruno scurissimo scritto come
   0.149 esce a schermo come un beige chiaro. Alla prima prova i grumi
   sembravano faville sospese, cioe' esattamente il campo stellato che
   abbiamo appena tolto.

   E LA LAMIERA, perche' il suolo di una discarica e' fango E lamiera: sotto
   la terra ci sono le piastre calpestate, con la giunzione scura e il filo
   di luce sul bordo alzato. Sono le stesse pieghe delle card, ma dieci
   volte piu' grandi, molto piu' scure e mezze coperte: si leggono come
   pavimento, non come un'altra card.

   MISURATO sulla striscia di fondo nudo della pagina profilo, a 1280:
   il valore medio scende da L=.0049 a L=.0040 e il punto PIU' CHIARO del
   fondo da L=.0134 a L=.0083. Conta il secondo: la piastra di lamiera vale
   L=.0138, quindi prima nel suo punto piu' chiaro il fondo la raggiungeva
   (1,01:1, cioe' la piastra spariva) e adesso resta sotto (1,09:1). E' per
   questo che le piastre staccano di piu' pur essendo rimaste identiche.

   SUL TELEFONO la giunzione VERTICALE si spegne (sotto i 560px): a 390 una
   sola riga verticale fissa taglia lo schermo in due dietro al testo del
   titolo, e a quel punto compete con il bordo di una card invece di stargli
   sotto. Restano le giunzioni orizzontali, che si leggono come fasce di
   terreno.

   Tre varianti guardate a schermo intero prima di scegliere: solo terra;
   terra con le piastre sepolte; terra con la nervatura del corrugato. La
   terza schiariva il fondo e riportava un reticolo verticale fitto su tutta
   la pagina, cioe' la cosa da cui veniva la foschia. ---- */
:root[data-brand="trash"] body::before{
  display:block !important;
  transform:translateZ(0);
  background-color:#090a05 !important;
  background-image:
    /* (a) l'orizzonte di rifiuti in fondo allo schermo: sacchi ammucchiati,
       due copertoni, una cassa a doghe, un'asse, un carrello. E' l'unica
       figura del fondo, e sta dove non passa quasi mai del testo. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='210' viewBox='0 0 1200 210'%3E%3Cpath d='M0 210V150a40 34 0 0 1 80 0 55 46 0 0 1 110 0 32 26 0 0 1 64 0 48 52 0 0 1 96 0 38 30 0 0 1 76 0 60 44 0 0 1 120 0 34 40 0 0 1 68 0 50 34 0 0 1 100 0 42 50 0 0 1 84 0 58 38 0 0 1 116 0 36 30 0 0 1 72 0 52 46 0 0 1 104 0 30 26 0 0 1 60 0 25 34 0 0 1 50 0V210Z' fill='%23070803'/%3E%3Cg fill='none' stroke='%23090a05' stroke-width='13'%3E%3Ccircle cx='302' cy='118' r='26'/%3E%3Ccircle cx='856' cy='132' r='22'/%3E%3C/g%3E%3Cpath d='M552 108h56v44h-56z' fill='%23090a05'/%3E%3Cg stroke='%23161a0d' stroke-width='3'%3E%3Cpath d='M552 120h56M552 132h56M552 144h56'/%3E%3C/g%3E%3Cpath d='M980 152l52-72 12 9-52 72z' fill='%23090a05'/%3E%3Cg fill='none' stroke='%23090a05' stroke-width='5'%3E%3Cpath d='M636 118h58l-9 30h-49z'/%3E%3Cpath d='M636 118l-8-10h-12'/%3E%3Ccircle cx='646' cy='155' r='6'/%3E%3Ccircle cx='684' cy='155' r='6'/%3E%3C/g%3E%3Cpath d='M196 150v-20l3-6v-7h7v7l3 6v20z' fill='%23121608'/%3E%3Cpath d='M380 130h118v9H380z' fill='%230a0b05' transform='rotate(-6 439 134)'/%3E%3C/svg%3E"),
    /* (b) IL FANGO BAGNATO: grumi neri dal bordo frastagliato. La soglia e'
       nel canale alfa della matrice (alfa = 1,8 * rosso - 1,0): sotto non
       esce niente, sopra escono le chiazze. Niente sfumature lunghe. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='ltfango' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.038' numOctaves='3' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23ltfango)'/%3E%3C/svg%3E"),
    /* (c) LA TERRA SMOSSA: gli stessi grumi ma bruni e piu' fitti. E' la
       sola tinta calda del fondo, e resta sotto al valore della piastra. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230'%3E%3Cfilter id='ltterra' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055' numOctaves='3' seed='31'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.149 0 0 0 0 0.106 0 0 0 0 0.047 1.7 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='230' height='230' filter='url(%23ltterra)'/%3E%3C/svg%3E"),
    /* (d) la ghiaia: due trame di puntini sfalsate, una chiara e una scura.
       La chiara scende da .14 a .10 perche' a .14 un puntino da un pixel
       risultava PIU' CHIARO della piastra di lamiera. */
    radial-gradient(circle at 3px 3px,   rgba(156,150,131,.10) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 11px 17px, rgba(0,0,0,.55) 0 1.7px, transparent 1.8px),
    /* (e) LE PIASTRE SEPOLTE: giunzione scura da tre pixel piu' il filo di
       luce sul bordo alzato. Passo 235 x 181: abbastanza largo da non
       leggersi come una trama, abbastanza stretto da vedersene due o tre
       per schermata. */
    repeating-linear-gradient(90deg,
      transparent 0 233px, rgba(0,0,0,.45) 233px 236px, rgba(230,224,205,.020) 236px 238px),
    repeating-linear-gradient(0deg,
      transparent 0 179px, rgba(0,0,0,.45) 179px 182px, rgba(230,224,205,.018) 182px 184px),
    /* (f) il valore del terreno: piu' scuro in cima, appena alzato in mezzo.
       Obliquo come la luce che scivola sulle piastre delle card. */
    linear-gradient(163deg,#080904 0%, #0d0e08 46%, #090a05 100%)
  !important;
  background-repeat:repeat-x, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat !important;
  background-position:left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
  background-size:1200px 210px, 300px 300px, 230px 230px, 23px 23px, 31px 29px, auto, auto, auto !important;
  opacity:1 !important;
}
/* Sul telefono la giunzione verticale se ne va: vedi sopra, a 390px una riga
   verticale fissa dietro al titolo compete con il bordo di una card. Le
   giunzioni orizzontali si stringono a 145, cosi' se ne vedono due per
   schermata invece di una sola. */
@media (max-width:560px){
  :root[data-brand="trash"] body::before{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='210' viewBox='0 0 1200 210'%3E%3Cpath d='M0 210V150a40 34 0 0 1 80 0 55 46 0 0 1 110 0 32 26 0 0 1 64 0 48 52 0 0 1 96 0 38 30 0 0 1 76 0 60 44 0 0 1 120 0 34 40 0 0 1 68 0 50 34 0 0 1 100 0 42 50 0 0 1 84 0 58 38 0 0 1 116 0 36 30 0 0 1 72 0 52 46 0 0 1 104 0 30 26 0 0 1 60 0 25 34 0 0 1 50 0V210Z' fill='%23070803'/%3E%3Cg fill='none' stroke='%23090a05' stroke-width='13'%3E%3Ccircle cx='302' cy='118' r='26'/%3E%3Ccircle cx='856' cy='132' r='22'/%3E%3C/g%3E%3Cpath d='M552 108h56v44h-56z' fill='%23090a05'/%3E%3Cg stroke='%23161a0d' stroke-width='3'%3E%3Cpath d='M552 120h56M552 132h56M552 144h56'/%3E%3C/g%3E%3Cpath d='M980 152l52-72 12 9-52 72z' fill='%23090a05'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='ltfango2' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.038' numOctaves='3' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23ltfango2)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230'%3E%3Cfilter id='ltterra2' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055' numOctaves='3' seed='31'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.149 0 0 0 0 0.106 0 0 0 0 0.047 1.7 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='230' height='230' filter='url(%23ltterra2)'/%3E%3C/svg%3E"),
      radial-gradient(circle at 3px 3px,   rgba(156,150,131,.10) 0 1.1px, transparent 1.2px),
      radial-gradient(circle at 11px 17px, rgba(0,0,0,.55) 0 1.7px, transparent 1.8px),
      repeating-linear-gradient(0deg,
        transparent 0 142px, rgba(0,0,0,.45) 142px 145px, rgba(230,224,205,.018) 145px 147px),
      linear-gradient(163deg,#080904 0%, #0d0e08 46%, #090a05 100%)
    !important;
    background-repeat:repeat-x, repeat, repeat, repeat, repeat, repeat, no-repeat !important;
    background-position:left bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    background-size:1200px 210px, 300px 300px, 230px 230px, 23px 23px, 31px 29px, auto, auto !important;
  }
}

/* ---- 37.4 LA GRANA sopra: resta, ma leggera. A moltiplicazione e al 26%
   era il velo che chiudeva il fondo in una patina unica. ---- */
:root[data-brand="trash"] body::after{
  opacity:.14 !important; mix-blend-mode:multiply !important;
}

/* =========================================================================
   38. LA BARRA IN CIMA, IL CANCELLO DELLA DISCARICA.
   Guardando le schermate renderizzate: tutto sotto era diventato lamiera e
   ruggine, e la barra in cima era rimasta l'unica riga di interfaccia pulita
   della pagina. Pillole arrotondate, bottoni tondi, "Login" bianco su nero.
   E' anche la riga che si vede per prima e che non scorre mai via.
   ========================================================================= */
:root[data-brand="trash"] .topnav-link{
  border-radius:2px !important;
  /* NIENTE MAIUSCOLETTO QUI, e non e' una dimenticanza.
     Provato e misurato a 1280px: otto voci in maiuscolo con la spaziatura
     in piu' allargano la fila quanto basta a spingere fuori dallo schermo
     il selettore della rete e il bottone di accesso. La barra in cima e'
     l'unico posto del sito dove la larghezza e' contesa davvero, e un
     bottone di accesso irraggiungibile costa piu' di quanto renda una
     scritta stampigliata. Il segno stampigliato ce l'hanno gia' il peso
     del carattere e il colore. */
  font-weight:700; color:var(--lt-nastro) !important;
}
:root[data-brand="trash"] .topnav-link:hover{
  background:var(--lt-lamiera-hi) !important; color:var(--lt-osso) !important;
}
:root[data-brand="trash"] .topnav-link.active{
  background:var(--lt-lamiera-hi) !important; color:var(--lt-lanterna) !important;
  box-shadow:inset 0 0 0 2px #4a4632 !important;
}
/* I bottoni tondi (tema, valuta, ricerca) diventano targhette quadre. */
:root[data-brand="trash"] :is(.unit-btn, .m-search-btn, .m-menu-btn,
.chain-switch, .btn-launch-top, .btn-connect, .tb-fab, #termsEnterBtn, .search input){
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background:var(--lt-lamiera-hi) !important;
  color:var(--lt-osso) !important;
  box-shadow:2px 2px 0 rgba(0,0,0,.5) !important;
  backdrop-filter:none !important;
}
:root[data-brand="trash"] :is(.unit-btn, .m-search-btn, .chain-switch,
.btn-launch-top, .btn-connect):hover{
  border-color:var(--lt-ruggine) !important; background:#353626 !important;
}
/* I due che chiamano all'azione restano di ruggine: sono i soli bottoni
   della barra che portano da qualche parte invece di cambiare una vista. */
:root[data-brand="trash"] :is(.btn-launch-top:not(.ghost), .btn-connect, #termsEnterBtn:not(:disabled)){
  background:linear-gradient(180deg,var(--lt-ruggine-hi),#97441a) !important;
  border-color:#6b3313 !important; color:#f6efdd !important;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
/* La casella di ricerca: una fessura scavata nella lamiera, non un vetro. */
:root[data-brand="trash"] .search input{
  background:var(--lt-fango) !important; color:var(--lt-osso) !important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.45) !important;
}

/* 39. LA FASCIA DEI TOTALI: una piastra come tutte le altre, non un riquadro
   piatto in mezzo alle piastre. Le CIFRE dentro restano quelle che sono,
   per la regola della sezione 34. */
:root[data-brand="trash"] .market-stats{
  border-radius:2px !important;
  border:2px solid #4a4632 !important;
  background-color:var(--lt-lamiera) !important;
  background-image:
    radial-gradient(circle at 9px 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) 9px, #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at 9px calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #6a6448 0 2px, rgba(0,0,0,.5) 2px 3.4px, transparent 3.4px),
    linear-gradient(163deg,#24251a 0%,#1a1b12 46%,#2a2b1e 100%) !important;
  box-shadow:4px 5px 0 rgba(0,0,0,.55) !important;
}
:root[data-brand="trash"] .ms-item + .ms-item{ border-left:2px solid #3a3a28 !important; }

/* Il numero dentro un passo della documentazione: stampigliato con uno
   stampino. La CARTA del passo la veste gia' la sezione 36. */
:root[data-brand="trash"] .step-num{
  border-radius:2px !important;
  font-family:var(--font-mono) !important;
  background:var(--lt-lamiera-hi) !important;
  color:var(--lt-lanterna) !important;
  border:2px solid #4a4632 !important;
  text-shadow:none !important;
}

/* =========================================================================
   40. TELEFONO: QUELLO CHE NON CI STAVA.
   Segnalato guardando il sito sul telefono: "alcune tabelle non centrano
   nello schermo". Misurato a 390px, la fascia dei totali era la colpevole:
   due colonne da 162px dentro 325px di spazio utile, con l'etichetta a
   `white-space:nowrap` e la spaziatura fra lettere che la pelle aggiunge.
   Non traboccava la pagina (per quello il controllo automatico non la
   vedeva), traboccava se stessa: il testo usciva dalla sua cella.
   La cura non e' rimpicciolire il carattere, che sotto i 9px non si legge:
   e' togliere il nowrap e lasciare che l'etichetta vada a capo, che e' cosa
   fanno le etichette quando lo spazio finisce.
   ========================================================================= */
@media (max-width:560px){
  /* Le celle possono restringersi: senza min-width:0 un figlio in flex si
     rifiuta di scendere sotto la sua larghezza naturale e spinge fuori. */
  :root[data-brand="trash"] .market-stats,
  :root[data-brand="trash"] .ms-item,
  :root[data-brand="trash"] .ms-item > *{ min-width:0 !important; }
  :root[data-brand="trash"] .ms-item{ padding:10px !important; }
  :root[data-brand="trash"] .ms-item dt{
    white-space:normal !important;      /* l'etichetta va a capo invece di uscire */
    letter-spacing:.04em !important;    /* .10em su 9px sono 4px persi per parola */
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  /* Le CIFRE restano intere e non vanno a capo: mezzo importo su due righe e'
     peggio di un importo stretto. Se proprio non ci sta, si restringe il
     carattere della cifra, non si spezza. */
  :root[data-brand="trash"] .ms-item dd{
    white-space:nowrap; font-size:clamp(15px,5.2vw,22px) !important;
  }
  /* Il bordo fra una cella e l'altra su due colonne diventa una croce: in
     verticale serve, in orizzontale no. */
  :root[data-brand="trash"] .ms-item + .ms-item{ border-left:0 !important; }
  :root[data-brand="trash"] .market-stats{ overflow:hidden; }
}

/* =========================================================================
   41. IL FIATO SPRECATO FRA UN BLOCCO E L'ALTRO.
   Segnalato: "rimuovi spazi inutili da cards a altre o da cards a footer".
   Misurato sul reso, non stimato. Il vuoto non era MAI un margine solo: era
   una pila di margini piccoli che si sommano, e ognuno preso da solo sembra
   ragionevole. Fra l'ultima carta e il piede, per dire, c'erano 22px sopra la
   riga della documentazione, 4 sotto, 20 di margine del piede e 26 di suo
   padding: 72px per separare due cose gia' separate da un bordo di lamiera e
   da un'ombra dura.
   Una discarica e' fitta. Le cose stanno addosso le une alle altre, ed e' il
   vuoto a sembrare fuori posto, non il pieno.
   Si stringe, non si azzera: sotto i 10px due piastre imbullonate si leggono
   come una piastra sola e il bordo smette di fare il suo mestiere.
   ========================================================================= */
:root[data-brand="trash"] #view-home .trust{
  margin-bottom:10px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
:root[data-brand="trash"] #view-home .section-head{ margin-top:10px !important; }
:root[data-brand="trash"] .home-docs{ margin-top:12px !important; margin-bottom:2px !important; }
:root[data-brand="trash"] .site-footer{ margin-top:10px !important; }
/* La riga sopra il piede e la paginazione: stesso trattamento. */
:root[data-brand="trash"] .pagination{ margin-top:14px !important; }
:root[data-brand="trash"] #view-home .rt{ margin-top:14px !important; }
/* Fra una carta e l'altra nella griglia: il bordo di lamiera e l'ombra dura
   separano gia' meglio di quanto faccia il vuoto, quindi il vuoto puo'
   scendere. Non sotto i 10px, o le ombre di due carte vicine si toccano. */
:root[data-brand="trash"] .token-grid{ gap:10px !important; }

/* =========================================================================
   42. IL TELEFONO, SUL SERIO.
   Segnalato: "il lato mobile non e' molto ottimizzato". Guardato a 390px e
   misurato, non stimato. Tre cose non andavano, e sono tutte e tre la stessa
   cosa detta in modi diversi: su un telefono lo spazio verticale e' l'unica
   risorsa scarsa, e lo stavamo spendendo prima di mostrare il prodotto.

   1. LA PRIMA CARTA DI UN TOKEN STAVA A 840px DAL BORDO ALTO, cioe' due
      schermate di scorrimento. Sopra c'erano 339px di presentazione (di cui
      182 di un solo paragrafo su sette righe) e 392 di fascia dei totali.
      Un launchpad e' la sua lista: la presentazione la si legge una volta e
      la lista si guarda ogni giorno.
   2. LE DUE STRISCHE si mangiavano 60px per mostrare testo tagliato a meta'
      parola ("GOOD TRASH BETTER", "OSED TO LOOK LIKE THIS"). Su uno schermo
      largo scorrono e si leggono; a 390px sono rumore che costa spazio.
      Su telefono spariscono: sono decorazione, e la decorazione e' la prima
      cosa che si taglia quando lo spazio finisce.
   3. LA TESTATA NON AVEVA IL MARCHIO. .brand-top era display:none e restava
      un buco fra il bottone di ricerca e quello di accesso. Torna il solo
      gatto, senza la parola: 26px, riempie il buco e dice dove sei.
   ========================================================================= */
@media (max-width:560px){
  /* (2) le strisce: decorazione, via. */
  :root[data-brand="trash"] .tr-marquee{ display:none !important; }

  /* (3) il marchio torna, ma solo il segno: la parola non ci starebbe
     accanto al selettore della rete senza spingere fuori il bottone. */
  :root[data-brand="trash"] .brand-top{
    display:inline-flex !important; align-items:center; margin-right:auto;
  }
  :root[data-brand="trash"] .brand-top .brand-name,
  :root[data-brand="trash"] .brand-top .wm{ display:none !important; }
  :root[data-brand="trash"] .brand-top .hero-logo{
    width:26px !important; height:26px !important;
  }

  /* (1) la presentazione si stringe. Il testo resta INTERO: si legge, non si
     taglia con i puntini. Cala il corpo, cala l'interlinea, calano i margini,
     e sette righe diventano cinque senza togliere una parola. */
  :root[data-brand="trash"] #view-home .pitch{
    padding-top:14px !important; padding-bottom:14px !important;
  }
  :root[data-brand="trash"] #view-home .pitch h1{
    /* 7.4vw arrivava a 28,9px a 390 e la riga piu' lunga toccava il bordo
       destro con l'ombra: il margine laterale c'era, se lo mangiava l'ombra.
       Scende il corpo e si accorcia l'ombra, che a questa misura serviva
       comunque meno. */
    font-size:clamp(22px,6.8vw,27px) !important; line-height:1.08 !important;
    text-shadow:2px 2px 0 rgba(0,0,0,.8) !important;
    overflow-wrap:break-word;
  }
  :root[data-brand="trash"] #view-home .pitch p{
    font-size:14px !important; line-height:1.5 !important; margin-top:10px !important;
  }
  /* La fascia dei totali: stesso trattamento, meno respiro interno. */
  :root[data-brand="trash"] .market-bar{ padding-top:10px !important; padding-bottom:10px !important; }
  :root[data-brand="trash"] .mb-top{ margin-bottom:8px !important; }
  :root[data-brand="trash"] .market-stats{ margin-top:8px !important; }
  /* Le etichette delle celle arrivavano a filo del bordo destro. Un filo di
     respiro in piu' e un corpo appena piu' piccolo: sono etichette, non
     cifre, e le cifre sotto restano quelle che sono. */
  :root[data-brand="trash"] .ms-item{ padding-right:12px !important; }
  :root[data-brand="trash"] .ms-item dt{ font-size:8.5px !important; }
  /* I bottoni di lancio su telefono: uno sotto l'altro occupano due righe
     intere. Restano due, ma bassi. */
  :root[data-brand="trash"] .mb-actions .head-cta{ padding-top:11px !important; padding-bottom:11px !important; }

  /* La barra delle schede in fondo e' fissa: il contenuto deve poterle
     scorrere sotto senza finirci dietro. Il valore e' quello che il layout
     riserva gia', piu' la tacca dei telefoni senza cornice. */
  :root[data-brand="trash"] .app{
    padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* =========================================================================
   I DIVISORI DENTRO LE CARD DEI TOKEN.
   Segnalato guardando la pagina di creazione sul telefono: la carta era
   diventata una piastra di lamiera con i rivetti, ma le righe che separano
   Market cap, Volume, il contratto e il piede erano rimaste le stesse
   sottili linee grigie del tema pulito. Dentro una piastra di metallo una
   riga grigia da un pixel si legge come un residuo, non come un bordo.
   Vale per l'anteprima dei token normali E di quelli azionari, perche'
   condividono le stesse classi, e per tutte le carte della lista.

   Non una riga: una SCANALATURA. L'ombra scura incisa piu' il filo chiaro
   sotto e' il modo in cui una lamiera piegata riflette la luce sul bordo di
   una piega, ed e' la stessa grammatica dei pannelli (ombra dura, nessuna
   sfocatura). Un pixel per parte, quindi non aggiunge altezza percepita.
   ========================================================================= */
:root[data-brand="trash"] .token-mcap,
:root[data-brand="trash"] .token-foot{
  border-top:1px solid rgba(0,0,0,.55) !important;
  box-shadow:0 1px 0 var(--lt-lamiera-hi);
}

/* La traccia della barra di avanzamento era un incavo dai bordi arrotondati
   del tema precedente: qui e' una fessura squadrata nella piastra, con lo
   stesso incavo scuro dei divisori. */
:root[data-brand="trash"] .token-progress-track{
  border-radius:0 !important;
  background:rgba(0,0,0,.5) !important;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.6), 0 1px 0 var(--lt-lamiera-hi);
}

/* =========================================================================
   22. I FONT ARRIVANO DAVVERO DOVE DEVONO.
   Misurato dopo il cambio, e due cose non tornavano.

   (a) Il corpo del testo restava sul sans di sistema. --font-body era gia'
       Rubik, ma v3.css riga 52 scrive la pila di sistema DIRETTAMENTE su
       #view-home, senza passare dalla variabile: una regola piu' specifica
       che vince, e la schermata principale e' proprio quella. Qui si rimette
       in riga, e si prende anche tutto cio' che eredita da li'.

   (b) Marchio e bottoni chiedevano il peso 800 a Titan One, che di pesi ne ha
       UNO. Il browser allora lo ingrassa da solo, e su un carattere gia'
       grosso i contorni si impastano e le controforme si chiudono. Si chiede
       400 ovunque compaia.
   ========================================================================= */

:root[data-brand="trash"] #view-home,
:root[data-brand="trash"] #view-home p,
:root[data-brand="trash"] #view-home div,
:root[data-brand="trash"] #view-home span,
:root[data-brand="trash"] #view-home li,
:root[data-brand="trash"] #view-home label,
:root[data-brand="trash"] body,
:root[data-brand="trash"] button,
:root[data-brand="trash"] input,
:root[data-brand="trash"] select,
:root[data-brand="trash"] textarea{
  font-family:var(--font-body) !important;
}

/* I NUMERI RESTANO IN MONOSPAZIO. Vale piu' di tutto il resto di questo file:
   una cifra e' un dato, e un dato lo si legge a colpo d'occhio solo se le
   colonne si incolonnano. Questa regola viene DOPO quella qui sopra apposta,
   cosi' vince su di essa. */
:root[data-brand="trash"] .mono,
:root[data-brand="trash"] code,
:root[data-brand="trash"] .stat b,
:root[data-brand="trash"] .tok-row b,
:root[data-brand="trash"] .stat-label,
:root[data-brand="trash"] [class*="mcap"],
:root[data-brand="trash"] #view-home .mono,
:root[data-brand="trash"] #view-home code{
  font-family:var(--font-mono) !important;
}

/* Titan One ha un peso solo: ovunque compaia, si chiede 400. */
:root[data-brand="trash"] .wm,
:root[data-brand="trash"] .head-cta,
:root[data-brand="trash"] .btn-1,
:root[data-brand="trash"] .btn-2,
:root[data-brand="trash"] .cta,
:root[data-brand="trash"] .cta-primary,
:root[data-brand="trash"] .rete h3,
:root[data-brand="trash"] .rete-go,
:root[data-brand="trash"] h1, :root[data-brand="trash"] h2,
:root[data-brand="trash"] h3, :root[data-brand="trash"] h4{
  font-weight:400 !important;
}

/* =========================================================================
   23. VERDE E ROSSO SCALDATI, NON SOSTITUITI.
   Le sparkline e i badge di scambio usavano #0bbb63 e #ff4f62: un verde
   freddo e un rosso rosa, che in mezzo a ruggine e muschio sembravano presi
   da un altro sito.
   Ma verde-sale e rosso-scende NON sono decorazione: sono la convenzione con
   cui si legge un prezzo a colpo d'occhio, su una pagina dove la gente
   compra. Sostituirli con muschio e ruggine avrebbe reso il sito piu' bello e
   piu' difficile da leggere, che su un launchpad e' un cattivo affare.
   Quindi si scaldano: il verde vira all'oliva, il rosso alla ruggine, ma
   restano inequivocabilmente verde e rosso.

   CHI HA SCRITTO QUESTI DUE COLORI AVEVA PAREGGIATO LE LUMINANZE A MANO (il
   commento in index.html spiega perche': nella formula della luminanza il
   canale verde pesa 0.7152 e il rosso 0.2126, quindi a pari saturazione il
   rosso sembra piu' scuro). Quel lavoro non si butta: i valori nuovi tengono
   lo STESSO scarto, misurato.

     colore          luminanza   scarto   contrasto sulla lamiera
     #0bbb63 (era)     0.365              6.72:1
     #ff4f62 (era)     0.277      24%     5.30:1
     #8fbe3f (ora)     0.430              7.78:1
     #ff6a4a (ora)     0.321      25%     6.00:1

   Stesso rapporto fra i due, e tutti e due si staccano MEGLIO dal fondo di
   lamiera di quanto facessero dal fondo precedente.
   Restano solo nella pelle: BRAND='clean' riporta i colori originali.
   ========================================================================= */
:root[data-brand="trash"]{
  --buy:#8fbe3f;  --buy-rgb:143,190,63;  --buy-hi:#a3d14e;
  --on-buy:#12180a;
  --buy-bg:rgba(143,190,63,.10); --buy-border:rgba(143,190,63,.32);

  --sell:#ff6a4a; --sell-rgb:255,106,74; --sell-hi:#ff8467;
  --on-sell:#1d0a05;
  --sell-bg:rgba(255,106,74,.10); --sell-border:rgba(255,106,74,.32);
}

/* =========================================================================
   24. LA SCALA TIPOGRAFICA. SEI CORPI, DUE PESI, TRE INTERLINEE.

   Il carattere del corpo ora e' Bricolage (sezione 25, in cima al file) e si
   vede. Ma "alcuni testi non hanno lo stesso font" aveva anche altre tre
   cause, tutte dentro questo foglio, tutte misurate elemento per elemento su
   sette schermate a 1440 e a 393. Nessuna era un difetto di caricamento.

   (1) I NUMERI ERANO IN DUE MONOSPAZI DIVERSI. Dodici punti di questo file
       scrivevano la pila a mano come "ui-monospace,'JetBrains Mono',...",
       cioe' col monospazio DI SISTEMA per primo. Tutto il resto del sito
       passa da --font-mono, che ha JetBrains Mono per primo. Sulla pagina di
       lancio l'anteprima della curva usciva in ui-monospace e il market cap
       venti pixel piu' in la' in JetBrains Mono: due cifre affiancate in due
       caratteri diversi. Era letteralmente il sintomo segnalato. Corretto
       alla radice: tutte e dodici passano da var(--font-mono).

   (2) IL TITOLO PIU' GRANDE DEL SITO ERA MEZZO E MEZZO. In home il titolo e'
       <h1><span>Dump your junk.</span><em>Somebody wants it.</em></h1>. La
       regola della sezione 22, quella che rimetteva in riga il corpo del
       testo, elencava "#view-home span" - e quello span e' PROPRIO la prima
       riga del titolo. Si prendeva il carattere del corpo mentre l'em sotto
       restava Titan One: prima riga e seconda riga dello stesso titolo in due
       caratteri diversi, a corpo 36. Qui sotto il titolo torna intero.

   (3) TITAN ONE VENIVA INGRASSATO DAL BROWSER. Ha un peso solo, ma ventuno
       blocchi gli chiedevano 700 o 800 e altri nove non dichiaravano il peso
       e si prendevano quello che arrivava da fuori. Senza una faccia piu'
       nera il browser se la fabbrica spalmando i contorni, e su un carattere
       gia' grosso si impasta. Corretto blocco per blocco: ovunque compaia, 400.

   E poi il motivo per cui il giro precedente "non si vedeva". Non era timido:
   era scritto in una lingua che lo schermo non parla.

   I PESI. Bricolage e' dichiarato in due facce: Regular a 400 e Bold per
   TUTTO l'intervallo 500-800. Misurato in pagina con la stessa stringa a
   corpo 100: 400 e' larga 429, e 500, 600, 700, 800 e 900 sono larghe 447
   tutte e cinque. Cioe' sono LO STESSO DISEGNO. Poi si e' contato chi chiede
   cosa, sulla sola home: 326 elementi a 400 e 545 fra 500 e 800. Il foglio
   nominava sei pesi, lo schermo ne mostrava due, e due terzi del testo
   finivano nel grassetto. Una gerarchia scritta con 500 / 600 / 700 non e'
   timida, e' invisibile: sono lo stesso pixel.
   Quindi qui si scrivono DUE PESI e basta, 400 e 700, e si sceglie a mano chi
   sta di qua e chi di la'. Il grassetto torna a voler dire qualcosa perche'
   smette di essere la norma.
   (Stessa prudenza sul monospazio: index.html carica JetBrains Mono solo a
   400;500;600. Chiedergli 700 lo farebbe scivolare sul 600 senza dirlo, per
   cui qui non si chiede mai.)

   I CORPI. Contati sulla sola home, erano venti: 8,5 9 9,5 10 10,5 11 11,5
   12 12,5 13 13,5 14 15 15,5 17 18 19 21 23 24. Passi da mezzo pixel che
   nessuno percepisce come una scelta: si percepisce solo che niente e'
   allineato. Qui il TESTO scende a sei gradini.

     corpo              ruolo
     9,5px  --t-plate   targhetta: chiave di tabella, occhiello, marchietto
     11px   --t-meta    dato secondario, nota, targhetta di sezione
     12px   --t-svc     servizio: piede, schede, testo di supporto
     13px   --t-ui      interfaccia: tabelle, moduli, voci di menu
     15px   --t-prose   paragrafo
     17px   --t-lead    sottotitolo, nome in evidenza

   Titan One, le cifre e i bottoni non entrano nella scala, e il perche' sta
   nella 24.8: non sono testo che si legge, sono misure di layout.

     peso   ruolo
     400    paragrafi, righe di tabella, campi, voci di menu, note
     700    targhette, valori, stati attivi, nomi, bottoni
     400    Titan One, sempre e solo (ha una faccia sola)
     400/500/600  JetBrains Mono: mai 700, non e' caricato

     interlinea
     1,6    paragrafo          --lh-prose
     1,45   interfaccia        --lh-ui
     1,2    targhetta          --lh-plate

   UNA NOTA CONTRO L'ISTINTO, perche' e' stata misurata e non indovinata.
   Si direbbe che Bricolage, avendo l'aria piu' stretta e l'occhio piu'
   grande, permetta di stringere i corpi. Misurato a corpo 100 contro Rubik:
   occhio 52 contro 52 (identico) e la stessa riga larga 1864 contro 1851,
   cioe' Bricolage e' lo 0,7% piu' LARGO, non piu' stretto. Metricamente e'
   quasi un rimpiazzo esatto di Rubik. Quindi la scala non si e' potuta
   appoggiare a un guadagno di larghezza che non esiste: i corpi scendono
   dove scendono perche' quel passo era rumore (13,5 e 12,5 verso 13 e 12),
   non perche' il carattere lo regalasse.
   Dove invece cambia davvero e' il MAIUSCOLO: le maiuscole di Bricolage sono
   alte 66 contro le 70 di Rubik, cioe' il 6% piu' basse a parita' di corpo.
   Siccome quasi tutte le targhette del sito sono in maiuscoletto, col
   cambio di carattere si erano rimpicciolite da sole. Per questo le
   targhette salgono a 9,5px invece di scendere: e' il pareggio di quel 6%,
   non un capriccio.
   ========================================================================= */

:root[data-brand="trash"]{
  --t-plate:9.5px; --t-meta:11px;  --t-svc:12px;
  --t-ui:13px;     --t-prose:15px; --t-lead:17px;

  /* due, non sei: sono gli unici due che Bricolage sa disegnare */
  --w-text:400;    --w-strong:700;

  --lh-prose:1.6;  --lh-ui:1.45;   --lh-plate:1.2;
  --ls-plate:.10em;
}

/* ---- 24.1 IL TITOLO TORNA INTERO. ----
   Piu' specifica della regola della sezione 22 che gli rubava lo span. Vale
   per ogni intestazione, non solo per quella della home: se un titolo ha
   dentro uno span o un em, quelli sono titolo anche loro. */
:root[data-brand="trash"] #view-home .pitch h1 > span,
:root[data-brand="trash"] #view-home .pitch h1 > em,
:root[data-brand="trash"] #view-home h1 > span,
:root[data-brand="trash"] #view-home h1 > em,
:root[data-brand="trash"] #view-home h2 > span,
:root[data-brand="trash"] #view-home h2 > em,
:root[data-brand="trash"] h1 > span, :root[data-brand="trash"] h1 > em,
:root[data-brand="trash"] h2 > span, :root[data-brand="trash"] h2 > em,
:root[data-brand="trash"] h3 > span, :root[data-brand="trash"] h3 > em{
  font-family:var(--font-display) !important;
  font-weight:400 !important;
}

/* ---- 24.2 IL PARAGRAFO. ----
   Leggero e con l'interlinea larga. Il 400 qui non e' pigrizia, e' la regola:
   in un blocco lungo ogni grado di peso in piu' si paga in fatica di lettura,
   e su fondo scuro il testo chiaro "fiorisce" gia' di suo. */
:root[data-brand="trash"] p,
:root[data-brand="trash"] .lede,
:root[data-brand="trash"] .sub,
:root[data-brand="trash"] .disc,
:root[data-brand="trash"] .hint,
:root[data-brand="trash"] .tm-sub,
:root[data-brand="trash"] .lb-note,
:root[data-brand="trash"] .bn-hint,
:root[data-brand="trash"] .foot-disc,
:root[data-brand="trash"] .foot-risk,
:root[data-brand="trash"] .docs-sec p{
  font-weight:var(--w-text) !important;
  line-height:var(--lh-prose);
}
:root[data-brand="trash"] #view-home .pitch p,
:root[data-brand="trash"] .docs-sec p,
:root[data-brand="trash"] .tm-sub{
  font-size:var(--t-prose) !important;
}
/* Il testo di servizio sta un gradino sotto il paragrafo. */
:root[data-brand="trash"] .foot-risk,
:root[data-brand="trash"] .lb-note,
:root[data-brand="trash"] .bn-hint,
:root[data-brand="trash"] .foot-col a,
:root[data-brand="trash"] footer a{
  font-size:var(--t-svc) !important;
}

/* ---- 24.3 L'INTERFACCIA: UN CORPO SOLO, E IL PESO DEL TESTO. ----
   Erano 12,5 / 13 / 13,5, cioe' tre corpi per un ruolo solo; e quasi tutta
   a peso 500, che con Bricolage vuol dire grassetto. Adesso e' un corpo solo
   e il peso del testo: una voce di menu, una riga di tabella e un campo non
   sono enfasi, sono il pavimento su cui l'enfasi si appoggia. */
:root[data-brand="trash"] .topnav-link,
:root[data-brand="trash"] .tr-num,
:root[data-brand="trash"] .tm-col-title,
:root[data-brand="trash"] .feed-tab,
:root[data-brand="trash"] .ev-n,
:root[data-brand="trash"] .dexn,
:root[data-brand="trash"] .unit-btn,
:root[data-brand="trash"] .tok-panel li,
:root[data-brand="trash"] .tp-s,
:root[data-brand="trash"] .pf-empty-p{
  font-size:var(--t-ui) !important;
}
:root[data-brand="trash"] .topnav-link,
:root[data-brand="trash"] .foot a,
:root[data-brand="trash"] footer a,
:root[data-brand="trash"] .fl-o,
:root[data-brand="trash"] .tm-full,
:root[data-brand="trash"] .lb-small,
:root[data-brand="trash"] .feat-note,
:root[data-brand="trash"] .feat-sub,
:root[data-brand="trash"] .tr-pct,
:root[data-brand="trash"] .tok-panel li,
:root[data-brand="trash"] select,
:root[data-brand="trash"] input,
:root[data-brand="trash"] textarea,
:root[data-brand="trash"] input::placeholder{
  font-weight:var(--w-text) !important;
}
/* Il dato secondario e la nota: un gradino sotto l'interfaccia, stesso peso.
   Erano 10,5 / 11 / 11,5. */
:root[data-brand="trash"] .feat-note,
:root[data-brand="trash"] .feat-sub,
:root[data-brand="trash"] .lb-small,
:root[data-brand="trash"] .rt-v,
:root[data-brand="trash"] .ev-v,
:root[data-brand="trash"] .tm-col-sub{
  font-size:var(--t-meta) !important;
}

/* ---- 24.4 L'ENFASI: 700, E SOLO DOVE SIGNIFICA. ----
   Il nome di una cosa, il suo valore, la scheda che sei, il bottone che
   preme. Tutto il resto e' 400. Con due facce sole e' questa la gerarchia:
   non ci sono gradini intermedi da inventare. */
:root[data-brand="trash"] .feed-tab.active,
:root[data-brand="trash"] .tm-sym,
:root[data-brand="trash"] .tp-s,
:root[data-brand="trash"] .ev-n,
:root[data-brand="trash"] .rt-ch,
:root[data-brand="trash"] .tn-text,
:root[data-brand="trash"] .tr-name,
:root[data-brand="trash"] .token-name,
:root[data-brand="trash"] .btn-connect,
:root[data-brand="trash"] .tr-marquee span,
:root[data-brand="trash"] .k{
  font-weight:var(--w-strong) !important;
}
/* Il nome del token era 15,5px/800: un corpo fuori scala e un peso che non
   esiste. Torna al corpo del paragrafo, col peso dell'enfasi. */
:root[data-brand="trash"] .tn-text{ font-size:var(--t-prose) !important; }
/* .feat-name NON e' in questi elenchi: la pelle lo scrive in Titan One, e
   Titan One ha una faccia sola. Chiedergli 600 rifarebbe il difetto (3). */

/* ---- 24.5 LE TARGHETTE. ----
   Le etichettine strutturali - chiavi delle tabelle, occhielli, intestazioni
   di colonna, marchietti - avevano sei corpi (8,5 9 9,5 10 10,5 12), quattro
   pesi e sette spaziature diverse, da 0,06em a 0,24em. Sono lo stesso
   oggetto: una targhetta stampigliata. Quindi un corpo, un peso, una
   spaziatura. E' questa la regola che si VEDE, perche' queste etichette sono
   dappertutto e adesso si riconoscono a colpo d'occhio come una famiglia.
   0,10em e non 0,13: su un corpo di 9,5px ogni centesimo di em costa quasi un
   pixel per lettera, e in una cella stretta e' la differenza fra una riga e
   due. Il maiuscoletto spaziato serve a dire "etichetta", non a spezzarla. */
:root[data-brand="trash"] .tr-lbl,
:root[data-brand="trash"] .rt-k,
:root[data-brand="trash"] .rt-t,
:root[data-brand="trash"] .rt-n,
:root[data-brand="trash"] .rt-b,
:root[data-brand="trash"] .ev-b,
:root[data-brand="trash"] .lb-when,
:root[data-brand="trash"] .tok-tag,
:root[data-brand="trash"] .feat-k,
:root[data-brand="trash"] .feat-side .k,
:root[data-brand="trash"] .feat-nums span,
:root[data-brand="trash"] .ms-item dt,
:root[data-brand="trash"] .tk-stat .k,
:root[data-brand="trash"] .stat-label{
  font-size:var(--t-plate) !important;
  letter-spacing:var(--ls-plate) !important;
  text-transform:uppercase !important;
  line-height:var(--lh-plate);
}
/* Le targhette di SEZIONE stanno un gradino sopra: aprono un blocco invece di
   stare dentro una riga. Stesso trattamento, corpo maggiore. */
:root[data-brand="trash"] .foot-col h4,
:root[data-brand="trash"] footer h4,
:root[data-brand="trash"] .sec-kick,
:root[data-brand="trash"] .eyebrow,
:root[data-brand="trash"] .fl-k,
:root[data-brand="trash"] .tok-head > *,
:root[data-brand="trash"] .create-preview-label{
  font-size:var(--t-meta) !important;
  letter-spacing:var(--ls-plate) !important;
  text-transform:uppercase !important;
  line-height:var(--lh-plate);
}
/* Il 700 vale SOLO per le targhette scritte col carattere del corpo. Quelle
   che la pelle ha gia' messo in Titan One non compaiono qui: chi sta in quale
   elenco e' stato verificato riga per riga su questo file, non indovinato. */
:root[data-brand="trash"] .rt-k,
:root[data-brand="trash"] .rt-t,
:root[data-brand="trash"] .rt-n,
:root[data-brand="trash"] .rt-b,
:root[data-brand="trash"] .ev-b,
:root[data-brand="trash"] .lb-when,
:root[data-brand="trash"] .tok-tag,
:root[data-brand="trash"] .stat-label,
:root[data-brand="trash"] .tk-stat .k,
:root[data-brand="trash"] .foot-col h4,
:root[data-brand="trash"] footer h4,
:root[data-brand="trash"] .sec-kick,
:root[data-brand="trash"] .eyebrow{
  font-weight:var(--w-strong) !important;
}

/* ---- 24.6 IL CARATTERE DA INSEGNA NON FA FRASI. ----
   Sulla pagina di lancio le tre descrizioni della modalita' di commissione
   ("Your share of the trading fee goes...") erano in Titan One a 13px,
   maiuscole e spaziate. Titan One e' un carattere da cartello: a corpo 13,
   per una frase intera, le controforme si chiudono e la riga diventa un muro.
   Un titolo si guarda, una descrizione si legge. Torna al corpo. */
:root[data-brand="trash"] .feemode-opt-desc,
:root[data-brand="trash"] .pair-opt-desc,
:root[data-brand="trash"] .curve-opt-desc{
  font-family:var(--font-body) !important;
  font-weight:var(--w-text) !important;
  font-size:var(--t-svc) !important;
  line-height:var(--lh-prose) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
/* Il titolo della stessa piastrella resta in insegna: e' due parole, ed e' li'
   che serve la voce alta. Ma a 400, che e' l'unico peso che ha. */
:root[data-brand="trash"] .feemode-opt-title,
:root[data-brand="trash"] .pair-opt-title,
:root[data-brand="trash"] .curve-opt-title{
  font-weight:400 !important;
  font-size:var(--t-ui) !important;
  letter-spacing:.04em !important;
}

/* ---- 24.7 I NUMERI. NON SI TOCCANO. ----
   Vale piu' di tutto il resto di questo file: una cifra e' un dato, e un dato
   si legge a colpo d'occhio solo se le colonne si incolonnano. Restano in
   monospazio, in UN monospazio solo, e con le cifre a larghezza fissa cosi'
   un importo che cambia non fa ballare la riga sotto. Questa regola viene per
   ultima apposta, cosi' vince su tutto quello scritto sopra. */
:root[data-brand="trash"] .mono,
:root[data-brand="trash"] code,
:root[data-brand="trash"] .stat b,
:root[data-brand="trash"] .tok-row b,
:root[data-brand="trash"] .stat-value,
:root[data-brand="trash"] .token-mcap-v,
:root[data-brand="trash"] .bond-out,
:root[data-brand="trash"] .char-count,
:root[data-brand="trash"] .page-num,
:root[data-brand="trash"] .back,
:root[data-brand="trash"] .tm-mc,
:root[data-brand="trash"] .tp-v,
:root[data-brand="trash"] .lb-who,
:root[data-brand="trash"] .lb-pos,
:root[data-brand="trash"] .lb-big,
:root[data-brand="trash"] .ms-item dd,
:root[data-brand="trash"] .ms-usd,
:root[data-brand="trash"] .feat-nums b,
:root[data-brand="trash"] .cv-nums b,
:root[data-brand="trash"] .proof b,
:root[data-brand="trash"] .fig b,
:root[data-brand="trash"] [class*="mcap"],
:root[data-brand="trash"] input[type=number],
:root[data-brand="trash"] input[inputmode=decimal],
:root[data-brand="trash"] #view-home .mono,
:root[data-brand="trash"] #view-home code{
  font-family:var(--font-mono) !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---- 24.8 LA SCALA APPLICATA FINO IN FONDO. ----
   Le regole qui sopra mettono in riga i ruoli principali, ma da sole lasciano
   fuori la coda lunga: rimisurato dopo il primo giro, i corpi distinti erano
   ancora venti su ventuno. Una scala che copre meta' del sito non e' una
   scala, e' un'intenzione. Quindi qui c'e' l'elenco COMPLETO di chi restava
   fuori, ricavato rilevando le sette schermate a 1440 e a 393 e confrontando
   ogni elemento di testo con i sei gradini: trentuno classi, mappate ognuna
   sul gradino piu' vicino. Quasi tutte scendono, e quelle che salgono sono le
   targhette in maiuscoletto, per il pareggio del 6% di cui sopra.

   COSA NON ENTRA NELLA SCALA, e non e' una scappatoia ma una regola:
     - TITAN ONE. I titoli li dimensiona il layout, con clamp sulla larghezza
       della finestra. Una scala a passi fissi li spezzerebbe.
     - LE CIFRE. Un numero e' dimensionato dal pannello che lo contiene, non
       dal discorso: le quattro cifre della pagina d'ingresso sono alte 38px
       perche' quello e' il loro riquadro. Restano in monospazio e tabellari,
       che e' il vincolo vero.
     - I BOTTONI. La loro misura dice quanto contano, e non e' un fatto di
       lettura: .btn della pagina d'ingresso, .btn-launch, .pf-empty-btn.
     - .cp-glyph, che non e' testo ma un segno grafico dentro il suo riquadro.
   La scala governa IL TESTO CHE SI LEGGE, che e' dove l'incoerenza si vedeva. */

/* -> targhetta, 9,5px. Erano 8, 8,5, 9 e 10. */
:root[data-brand="trash"] .tp-b,
:root[data-brand="trash"] .tp-t,
:root[data-brand="trash"] .ev-av,
:root[data-brand="trash"] .rete-live,
:root[data-brand="trash"] .pitch-kick > span,
:root[data-brand="trash"] .rete-n span{
  font-size:var(--t-plate) !important;
}
/* -> dato secondario, 11px. Erano 10,5 e 11,5. */
:root[data-brand="trash"] .tp-o,
:root[data-brand="trash"] .rete-dex,
:root[data-brand="trash"] .rete-dex b,
:root[data-brand="trash"] .disc{
  font-size:var(--t-meta) !important;
}
/* -> servizio, 12px. Erano 12,5. */
:root[data-brand="trash"] .tr-pct,
:root[data-brand="trash"] .trust li,
:root[data-brand="trash"] .home-docs,
:root[data-brand="trash"] .home-docs a,
:root[data-brand="trash"] .conta,
:root[data-brand="trash"] .btn-connect{
  font-size:var(--t-svc) !important;
}
/* -> interfaccia, 13px. Erano 13,5 e 14. */
:root[data-brand="trash"] .hnav a,
:root[data-brand="trash"] .pane p,
:root[data-brand="trash"] .pane li,
:root[data-brand="trash"] .claim p,
:root[data-brand="trash"] .rt-id b{
  font-size:var(--t-ui) !important;
}
/* -> paragrafo, 15px, e sottotitolo, 17px. Erano 15,5 e 17,5. */
:root[data-brand="trash"] .lede,
:root[data-brand="trash"] .lede b{ font-size:var(--t-prose) !important; }
:root[data-brand="trash"] .sub,
:root[data-brand="trash"] .sub em{ font-size:var(--t-lead) !important; }

/* ---- I PESI, LO STESSO LAVORO. ----
   Chi chiedeva 500, 600, 640 o 800 al carattere del corpo finisce di qua o di
   la', perche' di facce ce ne sono due. La scelta non e' automatica: una voce
   di scheda non attiva e' testo, la stessa scheda attiva e' enfasi. */
:root[data-brand="trash"] .tr-num,
:root[data-brand="trash"] .feed-tab,
:root[data-brand="trash"] .pf-tab,
:root[data-brand="trash"] .tm-tab,
:root[data-brand="trash"] .chain-trigger-label,
:root[data-brand="trash"] .chain-trigger-short,
:root[data-brand="trash"] .trust li,
:root[data-brand="trash"] .bond-scale span,
:root[data-brand="trash"] .cp-glyph{
  font-weight:var(--w-text) !important;
}
:root[data-brand="trash"] .feed-tab.active,
:root[data-brand="trash"] .pf-tab.active,
:root[data-brand="trash"] .tm-tab.active,
:root[data-brand="trash"] .tm-img,
:root[data-brand="trash"] .rt-av,
:root[data-brand="trash"] .tr-img,
:root[data-brand="trash"] .ev-av,
:root[data-brand="trash"] .feat-av,
:root[data-brand="trash"] .rt-id b,
:root[data-brand="trash"] .rt-v,
:root[data-brand="trash"] .tp-t,
:root[data-brand="trash"] .dexn,
:root[data-brand="trash"] .unit-btn,
:root[data-brand="trash"] .btn-launch,
:root[data-brand="trash"] .pf-empty-t,
:root[data-brand="trash"] .pf-empty-btn,
:root[data-brand="trash"] .rete-dex b,
:root[data-brand="trash"] .tag,
:root[data-brand="trash"] .pitch-kick > span,
:root[data-brand="trash"] .sub em,
:root[data-brand="trash"] .lede b,
:root[data-brand="trash"] p strong{
  font-weight:var(--w-strong) !important;
}

/* ---- 24.9 GLI ULTIMI TITAN ONE INGRASSATI. ----
   Dopo la correzione blocco per blocco ne restavano cinque, e non stanno in
   questo file: il peso arriva da v4.css e da landing.html, che non si
   toccano. Si rimettono in riga da qui. Titan One ha una faccia sola: 400. */
:root[data-brand="trash"] .logo,
:root[data-brand="trash"] .logo *,
:root[data-brand="trash"] .wm small,
:root[data-brand="trash"] .chain-soon,
:root[data-brand="trash"] .btn-launch-top,
:root[data-brand="trash"] .tm-col-title,
:root[data-brand="trash"] .create-preview-hint{
  font-weight:400 !important;
}

/* ---- 24.10 ANCHE LA PAGINA D'INGRESSO HA UN MONOSPAZIO SOLO. ----
   landing.html dichiara una SUA variabile, --mono, e dentro c'e' il
   monospazio di sistema. Quindi le cifre della pagina d'ingresso uscivano in
   un carattere e quelle dell'app in un altro, a un clic di distanza: e' la
   stessa causa del difetto (1), sull'altra pagina. Il file non si puo'
   toccare, ma trash.css si carica DOPO il suo foglio interno, quindi da qui
   si riscrive la variabile e si raddrizzano le quattro pile scritte a mano.
   Le scritte dentro il disegno della curva sono un attributo del markup, e
   una regola CSS batte sempre un attributo di presentazione. */
:root[data-brand="trash"]{ --mono:var(--font-mono) !important; }
:root[data-brand="trash"] .proof b,
:root[data-brand="trash"] .rete-n b,
:root[data-brand="trash"] .rete-gas b,
:root[data-brand="trash"] .rete-gas,
:root[data-brand="trash"] .step .n,
:root[data-brand="trash"] .fig b,
:root[data-brand="trash"] .fig:last-child b,
:root[data-brand="trash"] svg text{
  font-family:var(--font-mono) !important;
  font-variant-numeric:tabular-nums;
}

/* ---- 24.11 LA DEROGA DELLA SEZIONE 40 RESTA UNA DEROGA. ----
   Chi ha scritto quel blocco aveva gia' stretto la spaziatura delle chiavi
   del riquadro sotto i 560px, con la ragione accanto: "0,10em su 9px sono 4
   pixel persi per parola". Le regole delle targhette qui sopra hanno la
   stessa specificita' ma vengono dopo, quindi gliela stavano riscrivendo: a
   393px "escaped the heap" passava da una riga a due. Misurato guardando la
   schermata, non dedotto. Qui la deroga si rimette al suo posto. */
@media (max-width:560px){
  :root[data-brand="trash"] .ms-item dt{
    letter-spacing:.04em !important;
    line-height:1.25;
  }
}

/* Il marchio nel piede chiedeva a Titan One il peso 600, che non ha: il
   browser lo ingrassava da solo e i contorni si impastavano. Era l'ultimo dei
   duecento punti che lo facevano. */
:root[data-brand="trash"] .foot-name,
:root[data-brand="trash"] .foot-name .wm{ font-weight:400 !important; }

/* =========================================================================
   LA GRAMMATICA DEI RUOLI, sopra la scala.
   ==========================================================================
   La scala qui sopra dice quanto grande e quanto pesante puo' essere il testo.
   Questa dice CHI prende cosa, e senza di lei la scala non basta: misurando
   gli elementi raggruppati per RUOLO invece che per classe, i bottoni
   ricevevano nove trattamenti diversi. Due bottoni che portano allo stesso
   posto erano vestiti diversi ("+ Launch your token" a 15px, "+ Launch a
   token" a 13px), "LOGIN" era 700 a 12px e il selettore della rete accanto
   500 a 13px, "FILTERS" era 400 e le pillole delle reti 700.

   Non e' gusto: un sito con nove modi di disegnare un bottone non ha una
   grammatica, e chi lo usa non impara mai "le cose che si premono sono fatte
   cosi'". Che per una discarica sarebbe pure tematico, se non rendesse piu'
   difficile capire cosa si puo' premere.

   UNA NOTA CHE VALE PIU' DELLE REGOLE. Un giro precedente aveva distinto i
   ruoli con 500 contro 700, e non si vedeva niente: il @font-face mappa
   l'intervallo 500-800 sullo stesso file Bold, quindi 500, 600, 700, 800 e
   900 sono LO STESSO DISEGNO. Misurato: 400 rende a 1084px, tutti gli altri a
   1126px. I pesi utilizzabili sono DUE, e le regole qui sotto usano solo
   quelli.
   ========================================================================= */

/* AZIONE: tutto cio' che si preme, allo stesso modo. 700, maiuscolo, 13px. */
:root[data-brand="trash"] button,
:root[data-brand="trash"] .btn,
:root[data-brand="trash"] .btn-2,
:root[data-brand="trash"] .fl-btn,
:root[data-brand="trash"] .fl-o,
:root[data-brand="trash"] .fl-ghost,
:root[data-brand="trash"] .page-btn,
:root[data-brand="trash"] .chain-pill,
:root[data-brand="trash"] .chain-switch,
:root[data-brand="trash"] .feed-tab,
:root[data-brand="trash"] .lv-b,
:root[data-brand="trash"] .fs-p{
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* INSEGNA: l'invito principale. Stesso corpo ovunque compaia, e Titan One
   sempre a 400 perche' e' l'unico peso che ha. */
:root[data-brand="trash"] .head-cta,
:root[data-brand="trash"] .btn-1,
:root[data-brand="trash"] .cta-primary,
:root[data-brand="trash"] .side-cta,
:root[data-brand="trash"] .sidebar .side-cta,
:root[data-brand="trash"] .sidebar .btn-launch,
:root[data-brand="trash"] .btn-launch-top:not(.ghost),
:root[data-brand="trash"] #termsEnterBtn{
  font-family:var(--font-display) !important;
  font-weight:400 !important;
  font-size:14px !important;
  text-transform:uppercase;
  letter-spacing:.015em;
}

/* DEROGA DICHIARATA: i numeri di pagina restano in monospazio, perche' sono
   cifre e le cifre si incolonnano. Non e' un'eccezione alla grammatica, e'
   il ruolo DATO che vince su quello AZIONE quando il contenuto e' un numero. */
:root[data-brand="trash"] .page-num{
  font-family:var(--font-mono) !important;
  font-weight:400 !important;
}

/* LOGIN stava a 12px dove il suo ruolo ne dice 13: e' un bottone come gli
   altri della testata e non c'e' motivo perche' sia piu' piccolo. */
:root[data-brand="trash"] .btn-connect,
:root[data-brand="trash"] .btn-login,
:root[data-brand="trash"] .topbar button:not(.head-cta):not(.btn-launch-top){
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  font-size:13px !important;
  text-transform:uppercase;
}

/* L'AVVISO CHE LA CHAIN NON SI LEGGE.
   Vestito come un cartello inchiodato sul mucchio, non come un errore di
   sistema: e' la stessa voce del resto del sito, e chi lo legge deve capire
   che il posto funziona e il problema e' momentaneo. */
:root[data-brand="trash"] #chainDownNotice{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 18px; padding:18px 22px;
  background:linear-gradient(178deg,#8d4419 0%,#b4551f 40%,#8a4016 100%);
  border:3px solid #4a2a12; border-radius:8px;
  box-shadow:0 10px 0 rgba(6,7,4,.45), inset 0 -8px 18px rgba(0,0,0,.35);
}
:root[data-brand="trash"] #chainDownNotice strong{
  font-family:'Bricolage',system-ui,sans-serif; font-weight:700;
  font-size:16px; color:#efe9d6; letter-spacing:-.01em;
}
:root[data-brand="trash"] #chainDownNotice span{
  font-family:'Bricolage',system-ui,sans-serif; font-weight:400;
  font-size:13.5px; line-height:1.5; color:#e3d6ba;
}
/* Fuori dalla pelle trash resta leggibile e sobrio. */
#chainDownNotice{
  display:flex; flex-direction:column; gap:6px;
  margin:0 0 16px; padding:14px 18px; border-radius:10px;
  background:rgba(180,85,31,.12); border:1px solid rgba(180,85,31,.4);
}
#chainDownNotice strong{ font-size:15px; }
#chainDownNotice span{ font-size:13px; line-height:1.5; opacity:.85; }