/* ==========================================================================
   Terminal Rate — Investor Hub
   Design system ispirato al logo: sfera di vetro, cromo, teal profondo.

   REGOLE DEL SISTEMA (da rispettare in ogni aggiunta futura)
   1. Tipografia: SOLO i 6 livelli --t-*. Niente px scritti a mano.
   2. Spazi: SOLO --s1…--s8 (griglia da 4px). Niente 13px/17px/22px.
   3. Forma: un raggio per livello — --r-control (comandi), --r-card (card),
      --r-panel (pannelli sovrapposti), --r-pill (badge).
   4. Elevazione: tre soli livelli — riposo (solo bordo), --e-raise (hover),
      --e-over (menu, dialoghi). Nessuna ombra inventata sul posto.
   5. Movimento: --d-fast per colore/sfondo, --d-base per trasformazioni.
      Tutto si spegne sotto prefers-reduced-motion.
   ========================================================================== */

:root {
  /* ---- Superfici — blu-nero profondo con leggera dominante fredda ---- */
  --bg:          #080B10;
  --bg-2:        #0C1118;
  --surface:     #111823;
  --surface-2:   #16202D;
  --surface-3:   #1C2836;
  --border:      #202C3B;
  --border-2:    #2B3A4D;
  --border-glow: rgba(143, 199, 212, 0.22);

  /* ---- Testo — i tre livelli passano tutti AA sulle superfici scure ---- */
  --text:        #E9F0F7;   /* 15.6:1 su --surface */
  --text-2:      #A7B6C7;   /*  8.6:1 */
  --text-3:      #7C8FA4;   /*  4.9:1 — era #6B7C90 (4.2:1), sotto la soglia AA */

  /* ---- Brand — teal cromato del logo ---- */
  --brand:       #6FB3C6;
  --brand-2:     #9ED8E4;
  --brand-deep:  #3E6B78;
  --brand-soft:  rgba(111, 179, 198, 0.14);
  --chrome:      linear-gradient(180deg, #FFFFFF 0%, #C7D6E2 45%, #8FA5B8 60%, #E8F1F7 100%);

  /* ---- Semantica di mercato ---- */
  --up:          #00C48C;
  --up-soft:     rgba(0, 196, 140, 0.13);
  --down:        #FF4D5E;
  --down-soft:   rgba(255, 77, 94, 0.13);
  --warn:        #F5B544;
  --warn-soft:   rgba(245, 181, 68, 0.13);

  /* ---- Partiti USA ---- */
  --dem:         #6FA0E8;
  --rep:         #E87A7A;
  --ind:         #A8B4C4;

  /* ---- Rampa per i grafici ---------------------------------------------
     Una sola tinta — il teal del brand — in otto gradini dal chiaro allo
     scuro. Le fette sono ORDINATE per grandezza, quindi la rampa codifica il
     peso: il colore dice qualcosa invece di essere decorazione. Otto tinte
     diverse facevano sembrare categorie indipendenti dei dati che sono solo
     quote della stessa torta.
     NON si usano --up/--down: qui verde e rosso vogliono dire comprato/venduto. */
  --cat-1: #DCF2F8;  --cat-2: #B0E1EF;  --cat-3: #84CDE2;  --cat-4: #5AB3CE;
  --cat-5: #4194B0;  --cat-6: #357792;  --cat-7: #2E5D75;  --cat-8: #2C4859;
  --cat-rest: #3A4450;

  /* ---- Tipografia: sei livelli, nient'altro ---- */
  --t-display: clamp(30px, 3.4vw, 42px);
  --t-title:   26px;
  --t-section: 17px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* ---- Spazi: griglia da 4px ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Forma: un raggio per livello ---- */
  --r-control: 8px;
  --r-card:    12px;
  --r-panel:   16px;
  --r-pill:    999px;

  /* ---- Elevazione: tre livelli ---- */
  --e-raise: 0 6px 20px -6px rgba(0,0,0,.55);
  --e-over:  0 18px 44px -12px rgba(0,0,0,.7);

  /* ---- Movimento ---- */
  --d-fast: 120ms;
  --d-base: 180ms;
  --ease:   cubic-bezier(.2,.7,.35,1);

  /* ---- Layout ---- */
  --maxw:  1240px;
  --nav-h: 64px;
  --gutter: var(--s5);

  /* Stack di sistema: zero byte scaricati, nessuna licenza da verificare, e
     SF Pro / Segoe UI / Roboto hanno tutti cifre tabulari vere — che è
     l'unica cosa che a un prodotto finanziario serve davvero da un font. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}

@media (max-width: 760px) { :root { --gutter: var(--s4); } }

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 620px at 50% -220px, rgba(111,179,198,.09), transparent 65%),
    radial-gradient(760px 420px at 88% 4%, rgba(62,107,120,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; }

/* Le cifre non devono MAI ballare tra una riga e l'altra. */
.mono, .tbl, .screener-table, .kv, .mv, .fv, .big, .pstats b, .pol-hero-kpi b,
.idx-card .p, .stat .v, .lg-val, .cnt, .hw, .ch, .px, .mch, .eng {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.mono { font-family: var(--mono); letter-spacing: -0.01em; }

/* Un solo anello di focus in tutto il sito, sempre visibile su ogni fondo. */
:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: var(--r-control);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(111,179,198,.3); }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4d63; }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 11, 16, .78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--nav-h); display: flex; align-items: center; gap: var(--s5);
}

.brand { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.brand img {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(158,216,228,.28), 0 3px 14px rgba(0,0,0,.5);
}
.brand .bt {
  font-weight: 800; font-size: var(--t-section); letter-spacing: -0.02em; line-height: 1;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .bs {
  display: block; font-size: 10px; letter-spacing: .18em;
  color: var(--brand); font-weight: 700; margin-top: var(--s1);
}

.nav-links {
  display: flex; gap: var(--s1); flex: 1 1 auto;
  overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

/* Pulsante del menu: compare solo dove le voci non ci stanno in orizzontale.
   Il selettore è .nav-tools .nav-toggle e non .nav-toggle perché .icon-btn
   (che il pulsante ha anch'esso) è dichiarato più sotto con display:grid: a
   parità di specificità vincerebbe quello e il panino comparirebbe anche su
   desktop. */
.nav-tools .nav-toggle { display: none; }
.nav-toggle .bars { display: block; width: 17px; height: 12px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 5px; }
.nav-toggle .bars::after { bottom: 0; }
/* Aperto: le barre diventano una croce, così il pulsante dice anche "chiudi". */
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
.nav-links a {
  padding: var(--s2) var(--s3); border-radius: var(--r-control); color: var(--text-2);
  font-weight: 600; font-size: var(--t-small); white-space: nowrap; scroll-snap-align: start;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  position: relative; display: inline-flex; align-items: center; min-height: 36px;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-links a.active::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 2px;
}

.nav-tools { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

.nav-search { position: relative; width: 260px; }
.nav-search input {
  width: 100%; height: 38px; padding: 0 var(--s3) 0 var(--s6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control);
  color: var(--text); font-size: var(--t-small); outline: none;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.nav-search input::placeholder { color: var(--text-3); }
.nav-search input:focus {
  border-color: var(--brand); background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.nav-search .ico {
  position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none; display: grid; place-items: center;
}

.search-results {
  position: absolute; top: calc(100% + var(--s2)); left: 0; right: 0;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-panel); box-shadow: var(--e-over);
  overflow: hidden; max-height: 400px; overflow-y: auto; display: none;
}
.search-results.open { display: block; }
.sr-item {
  padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3);
  cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background var(--d-fast) var(--ease);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover, .sr-item.sel { background: var(--surface-3); }
.sr-sym { font-weight: 700; min-width: 62px; font-size: var(--t-small); }
.sr-name { color: var(--text-2); font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sr-ex { color: var(--text-3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-control); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
.icon-btn:active { background: var(--surface-3); }

.lang-wrap { position: relative; }
.lang-btn { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); width: auto; font-weight: 700; font-size: var(--t-small); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + var(--s2)); min-width: 158px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-panel); box-shadow: var(--e-over); overflow: hidden; display: none; z-index: 120;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4);
  font-size: var(--t-small); color: var(--text-2); text-align: left; min-height: 40px;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.lang-menu button:hover { background: var(--surface-3); color: var(--text); }
.lang-menu button.on { color: var(--brand-2); font-weight: 700; }

/* ==========================================================================
   Layout & tipografia
   ========================================================================== */
main { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); }

.page-head { margin: 0 0 var(--s6); }
.page-head h1 {
  margin: 0; font-size: var(--t-title); font-weight: 800; letter-spacing: -0.025em;
  line-height: var(--lh-tight);
}
.page-head p {
  margin: var(--s2) 0 0; color: var(--text-3); font-size: var(--t-body);
  max-width: 62ch; line-height: var(--lh-snug);
}

.section-title {
  font-size: var(--t-micro); font-weight: 700; margin: var(--s7) 0 var(--s4);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: var(--s3);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Prima sezione subito sotto il titolo di pagina: non serve lo stacco pieno. */
.page-head + .section-title, .tabs + .section-title { margin-top: 0; }
.section-title .sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-3); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s5); margin-top: var(--s4);
}
.card > h3 {
  margin: 0 0 var(--s4); font-size: var(--t-section); font-weight: 700; letter-spacing: -0.015em;
  display: flex; align-items: baseline; gap: var(--s2); line-height: var(--lh-snug);
}
.card > h3 .sub { font-weight: 500; font-size: var(--t-small); color: var(--text-3); }
/* Riga di aiuto sotto un titolo di card: sempre lo stesso attacco. */
.card > h3 + .hint { margin: calc(var(--s3) * -1) 0 var(--s4); }
.hint { color: var(--text-3); font-size: var(--t-small); line-height: var(--lh-snug); margin: 0 0 var(--s4); max-width: 68ch; }

.grid { display: grid; gap: var(--s4); }
/* Quando due card della stessa riga hanno contenuti di lunghezza molto
   diversa, stirarle produce un vuoto: `top` le fa vivere alla propria altezza. */
.grid.top { align-items: start; }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1000px) { .cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px)  { .cols-4, .cols-3, .cols-2 { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  position: relative; padding: var(--s7) var(--s7) var(--s6); margin-bottom: var(--s5);
  border-radius: var(--r-panel); overflow: hidden;
  background:
    radial-gradient(700px 300px at 12% -80px, rgba(111,179,198,.16), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, rgba(17,24,35,.35) 100%);
  border: 1px solid var(--border);
}
.hero-logo {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  margin-bottom: var(--s5);
  box-shadow: 0 0 0 1px rgba(158,216,228,.3), 0 6px 22px rgba(0,0,0,.6);
}
/* Occhiello: etichetta la fascia di cifre, quindi ci sta attaccato sopra. */
.hero-eyebrow {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border);
}
.hero h1 {
  margin: 0; font-size: var(--t-display); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-2), var(--brand) 55%, #d8ecf2);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p {
  margin: var(--s4) 0 0; color: var(--text-2); font-size: var(--t-body);
  max-width: 56ch; line-height: var(--lh-snug);
}

/* Fascia di cifre agganciata all'hero: è QUESTO l'elemento che vince la home. */
.hero-figures {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s5); margin-top: var(--s4); align-items: end;
}
.hero-figures .fig-v {
  font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-figures .fig-k {
  color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s2);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
/* La prima cifra è la testata: pesa il doppio delle altre. */
.hero-figures .fig:first-child .fig-v { font-size: var(--t-display); line-height: .95; }
.hero-figures .fig:first-child .fig-k { color: var(--text-2); }
@media (max-width: 860px) {
  .hero { padding: var(--s6) var(--s5) var(--s5); }
  .hero-figures { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5) var(--s4); margin-top: var(--s6); }
}
@media (max-width: 460px) { .hero-figures .fig:first-child .fig-v { font-size: 34px; } }

/* ==========================================================================
   Market strip (indici)
   ========================================================================== */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
@media (max-width: 1000px) { .strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.idx-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s4); cursor: pointer;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
  position: relative; overflow: hidden;
}
.idx-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--border-2); transition: background var(--d-base) var(--ease);
}
.idx-card.pos::before { background: var(--up); }
.idx-card.neg::before { background: var(--down); }
.idx-card:hover { transform: translateY(-2px); border-color: var(--border-2); background: var(--surface-2); box-shadow: var(--e-raise); }
.idx-card:active { transform: translateY(0); }
.idx-card .n { font-size: var(--t-micro); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.idx-card .p { font-size: var(--t-section); font-weight: 700; margin-top: var(--s2); letter-spacing: -0.02em; }
.idx-card .c { font-size: var(--t-small); font-weight: 700; margin-top: var(--s1); }

/* ==========================================================================
   Tiles (trending / explore)
   ========================================================================== */
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s4); cursor: pointer;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.tile:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--e-raise); }
.tile:active { transform: translateY(0); }
.tile .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.tile .sym { font-weight: 800; font-size: var(--t-body); letter-spacing: -0.01em; }
.tile .price { font-weight: 700; font-size: var(--t-body); }
.tile .r2 { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s2); gap: var(--s2); }
.tile .co { color: var(--text-3); font-size: var(--t-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Card "Esplora": la freccia scivola al passaggio, il resto sta fermo. */
.nav-card {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s5) var(--s4);
  transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease),
              transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.nav-card:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--e-raise); }
.nav-card:active { transform: translateY(0); }
.nav-card .nc-t {
  font-weight: 700; font-size: var(--t-body); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--s2);
}
.nav-card .nc-t .arw {
  color: var(--brand); transition: transform var(--d-base) var(--ease); display: inline-block;
}
.nav-card:hover .nc-t .arw { transform: translateX(3px); }
.nav-card .nc-d { color: var(--text-3); font-size: var(--t-small); line-height: var(--lh-snug); }

.pill { display: inline-block; padding: 2px var(--s2); border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 700; }
.pill.up { background: var(--up-soft); color: var(--up); }
.pill.down { background: var(--down-soft); color: var(--down); }

/* Movers */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.movers.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .movers.three { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .movers, .movers.three { grid-template-columns: 1fr; } }
.mv-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.mv-head {
  padding: var(--s3) var(--s4); font-weight: 700; font-size: var(--t-small);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s2); letter-spacing: .02em;
}
.mv-row {
  display: flex; align-items: center; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background var(--d-fast) var(--ease);
}
.mv-row:last-child { border-bottom: none; }
.mv-row:hover { background: var(--surface-2); }
.mv-row .sym { font-weight: 700; width: 72px; font-size: var(--t-small); }
.mv-row .px { margin-left: auto; margin-right: var(--s4); font-weight: 600; font-size: var(--t-small); }
.mv-row .ch { width: 74px; text-align: right; font-weight: 700; font-size: var(--t-small); }

/* ==========================================================================
   Scheda titolo
   ========================================================================== */
.q-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s5); margin: 0 0 var(--s4); }
.q-title h1 { margin: 0; font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: var(--lh-tight); }
.q-title h1 .tk { color: var(--text-3); font-weight: 700; margin-left: var(--s1); }
.q-title .meta { color: var(--text-3); font-size: var(--t-small); margin-top: var(--s1); }
.q-price { display: flex; align-items: baseline; gap: var(--s3); margin-left: auto; }
.q-price .big { font-size: var(--t-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.q-price .chg { font-size: var(--t-body); font-weight: 700; }

.ranges { display: flex; gap: var(--s1); margin: 0 0 var(--s3); flex-wrap: wrap; }
.ranges button {
  padding: var(--s2) var(--s3); border-radius: var(--r-control); font-weight: 700; font-size: var(--t-small);
  color: var(--text-3); min-height: 32px;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.ranges button:hover { color: var(--text); background: var(--surface-2); }
.ranges button.active { color: var(--bg); background: var(--text); }

#chart { width: 100%; height: 370px; }
.chart-wrap { position: relative; }
.chart-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-3); font-size: var(--t-small); pointer-events: none;
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 var(--s5); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat { padding: var(--s3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.stat .k { color: var(--text-3); font-size: var(--t-micro); font-weight: 500; }
.stat .v { font-weight: 700; font-size: var(--t-body); margin-top: var(--s1); overflow: hidden; text-overflow: ellipsis; }

/* Analisti */
.analyst-wrap { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--s6); }
@media (max-width: 820px) { .analyst-wrap { grid-template-columns: minmax(0,1fr); gap: var(--s5); } }
.rating-badge {
  display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-weight: 800; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
}
.rb-buy { background: var(--up-soft); color: var(--up); }
.rb-hold { background: var(--warn-soft); color: var(--warn); }
.rb-sell { background: var(--down-soft); color: var(--down); }

.target-bar { position: relative; height: 6px; background: var(--surface-3); border-radius: var(--r-pill); margin: var(--s7) 0 var(--s6); }
.target-fill { position: absolute; inset: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--down), var(--warn) 50%, var(--up)); opacity: .42; }
.target-mark { position: absolute; top: -8px; width: 2px; height: 22px; background: var(--text-2); border-radius: 2px; }
.target-mark .lbl { position: absolute; top: -21px; left: 50%; transform: translateX(-50%); font-size: var(--t-micro); font-weight: 700; white-space: nowrap; }
.target-cur { background: var(--brand-2); box-shadow: 0 0 0 4px var(--brand-soft); }
.tgt-row { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--text-3); }

.bar-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; font-size: var(--t-small); }
.bar-row .lab { width: 82px; color: var(--text-2); flex: 0 0 auto; }
.bar-row .track { display: block; flex: 1; min-width: 0; height: 10px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
/* `display:block` è indispensabile: .fill è uno <span> e su un elemento inline
   width/height vengono ignorati — le barre non disegnavano proprio nulla.
   Inoltre il riempimento parte da --brand pieno: il gradiente da --brand-deep
   era comunque indistinguibile dal binario. */
.bar-row .fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width .5s var(--ease); }
.bar-row .cnt { width: 26px; text-align: right; font-weight: 700; flex: 0 0 auto; }

/* Financials */
.fin-chart { display: flex; align-items: flex-end; gap: var(--s3); height: 178px; padding-top: var(--s2); }
.fin-q { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s2); height: 100%; justify-content: flex-end; }
.fin-bars { display: flex; align-items: flex-end; gap: var(--s1); height: 100%; width: 100%; justify-content: center; }
.fin-bar { width: 40%; border-radius: 3px 3px 0 0; min-height: 3px; transition: height .5s var(--ease); }
.fin-bar.rev { background: linear-gradient(180deg, var(--brand), var(--brand-deep)); }
.fin-bar.ni { background: linear-gradient(180deg, var(--up), #067a58); }
.fin-q .qlab { font-size: var(--t-micro); color: var(--text-3); }
.legend { display: flex; gap: var(--s5); font-size: var(--t-small); color: var(--text-2); margin-top: var(--s4); flex-wrap: wrap; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: var(--s2); vertical-align: middle; }

/* ==========================================================================
   Tabelle — leggibili senza zebratura pesante: separatori sottili e hover
   ========================================================================== */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tbl th {
  text-align: left; color: var(--text-3); font-weight: 600; font-size: var(--t-micro);
  padding: var(--s3) var(--s3); border-bottom: 1px solid var(--border-2);
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
.tbl td { padding: var(--s3); border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: none; }
.tbl th.r, .tbl td.r { text-align: right; }
/* Ogni cella numerica è tabellare, senza doverlo ricordare caso per caso. */
.tbl td.r, .tbl td .mono { font-variant-numeric: tabular-nums; }
.tbl tbody tr.clickable { cursor: pointer; transition: background var(--d-fast) var(--ease); }
.tbl tbody tr.clickable:hover { background: var(--surface-2); }
.tbl tbody tr.clickable:focus-visible { background: var(--surface-2); outline-offset: -2px; }
.tbl-scroll { overflow-x: auto; margin: 0 calc(var(--s1) * -1); padding: 0 var(--s1); }

/* Profilo */
.about p { color: var(--text-2); line-height: var(--lh-loose); font-size: var(--t-small); max-width: 72ch; }
.about .facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 var(--s5); margin-top: var(--s4); }
@media (max-width: 660px) { .about .facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==========================================================================
   News
   ========================================================================== */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s5); }
.chips button {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  padding: var(--s2) var(--s4); border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-small);
  min-height: 34px; display: inline-flex; align-items: center; gap: var(--s2);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.chips button:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.chips button.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
/* Pallino "in corso": sostituisce l'emoji 🔴 nel filtro conflitti. */
.chips .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--down); flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--down-soft);
}
.chips button.active .live-dot { box-shadow: 0 0 0 3px rgba(255,77,94,.25); }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
@media (max-width: 980px) { .news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: minmax(0,1fr); } }

.ncard {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.ncard:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--e-raise); }
.ncard:active { transform: translateY(-1px); }
.ncard .nimg {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface-3);
  flex: 0 0 auto;
}
.ncard .nimg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.ncard:hover .nimg img { transform: scale(1.04); }
.ncard .nsrc-tag {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2;
  background: rgba(8,11,16,.82); backdrop-filter: blur(6px);
  color: var(--brand-2); font-size: var(--t-micro); font-weight: 700;
  padding: 2px var(--s2); border-radius: var(--r-pill); letter-spacing: .03em;
  border: 1px solid rgba(158,216,228,.2);
}
.ncard .nbody { padding: var(--s4); display: flex; flex-direction: column; flex: 1; gap: var(--s2); }
.ncard .ntitle { font-weight: 700; font-size: var(--t-body); line-height: var(--lh-snug); letter-spacing: -0.012em; }
.ncard .nsum {
  color: var(--text-3); font-size: var(--t-small); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ncard .nfoot {
  margin-top: auto; padding-top: var(--s3); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s2); font-size: var(--t-micro); color: var(--text-3);
}
/* Fonte come testo quando non c'è immagine su cui appoggiare il badge. */
.ncard .nsrc-line { font-weight: 700; color: var(--brand); letter-spacing: .03em; }

/* Senza immagine NON mettiamo un finto riquadro: diventa una card di testo,
   che legge come una scelta editoriale e non come un'immagine rotta. */
.ncard.noimg .nbody {
  padding: var(--s5);
  /* Il blocco di testo si centra nella cella invece di lasciare il timestamp
     inchiodato in fondo con un buco sopra: così l'aria legge come scelta. */
  justify-content: center;
}
.ncard.noimg .ntitle { font-size: var(--t-section); line-height: var(--lh-snug); }
.ncard.noimg .nsum { -webkit-line-clamp: 4; }
.ncard.noimg .nfoot { margin-top: var(--s4); }
.ncard.noimg::before {
  content: ""; display: block; height: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--brand-deep), transparent 70%);
}
/* La card in evidenza senza immagine non deve diventare un muro di testo. */
.ncard.feat.noimg .ntitle { font-size: var(--t-title); letter-spacing: -0.025em; }

.ncard.feat { grid-column: span 2; }
.ncard.feat .nimg { aspect-ratio: 2 / 1; }
.ncard.feat .nbody { padding: var(--s5); }
.ncard.feat .ntitle { font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: -0.025em; }
.ncard.feat .nsum { -webkit-line-clamp: 3; font-size: var(--t-body); color: var(--text-2); }
@media (max-width: 980px) { .ncard.feat .ntitle { font-size: 22px; } }
@media (max-width: 640px) { .ncard.feat { grid-column: span 1; } .ncard.feat .ntitle { font-size: var(--t-section); } }

.war-tag {
  background: var(--down-soft); color: var(--down); font-weight: 800; font-size: var(--t-micro);
  padding: 1px var(--s2); border-radius: var(--r-control); letter-spacing: .08em; text-transform: uppercase;
}

/* ==========================================================================
   Screener
   ========================================================================== */
.screener-bar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--s4); }
.screener-bar input {
  height: 38px; padding: 0 var(--s4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-control); color: var(--text); min-width: 230px; outline: none; font-size: var(--t-small);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.screener-bar input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.seg button { padding: var(--s2) var(--s4); font-weight: 700; font-size: var(--t-small); color: var(--text-3); min-height: 36px; transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--text); color: var(--bg); }
.count-tag { color: var(--text-3); font-size: var(--t-small); margin-left: auto; }

/* Niente contenitore di scroll su desktop: un ancestor con overflow!=visible
   romperebbe lo sticky del thead (si aggancerebbe al contenitore, non al viewport). */
.screener-wrap { overflow: visible; }
@media (max-width: 900px) {
  .screener-wrap { overflow-x: auto; }
  .screener-table th { position: static; }
}
.screener-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.screener-table th {
  position: sticky; top: var(--nav-h); z-index: 5; background: var(--bg-2);
  text-align: left; color: var(--text-3); font-weight: 600; font-size: var(--t-micro);
  padding: var(--s3); border-bottom: 1px solid var(--border-2);
  cursor: pointer; user-select: none; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .07em;
  transition: color var(--d-fast) var(--ease);
}
.screener-table th:hover { color: var(--text); }
.screener-table th.r, .screener-table td.r { text-align: right; }
.screener-table th .arw { opacity: .6; font-size: 9px; margin-left: var(--s1); }
.screener-table td { padding: var(--s3); border-bottom: 1px solid var(--border); }
.screener-table tbody tr { cursor: pointer; transition: background var(--d-fast) var(--ease); }
.screener-table tbody tr:hover { background: var(--surface-2); }
.screener-table .sy { font-weight: 800; }
.screener-table .nm { color: var(--text-2); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge-idx { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px var(--s1); border-radius: 4px; margin-left: var(--s2); letter-spacing: .04em; vertical-align: middle; }
.bi-ndx { background: var(--brand-soft); color: var(--brand-2); }

/* ==========================================================================
   Macro
   ========================================================================== */
.macro-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
@media (max-width: 1000px) { .macro-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .macro-grid { grid-template-columns: minmax(0,1fr); } }

.macro-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); display: flex; flex-direction: column;
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.macro-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--e-raise); }
.macro-card .ml { color: var(--text-2); font-size: var(--t-small); font-weight: 600; line-height: var(--lh-snug); }
.macro-card .mv { font-size: var(--t-title); font-weight: 800; margin-top: var(--s2); letter-spacing: -0.03em; line-height: 1; }
.macro-card .mv .u { font-size: 0.6em; font-weight: 700; color: var(--text-3); margin-left: 1px; }
.macro-card .md { font-size: var(--t-small); font-weight: 700; margin-top: var(--s2); }
.macro-card .mdate { color: var(--text-3); font-size: var(--t-micro); margin-top: auto; padding-top: var(--s3); }
.macro-card .spark { margin-top: var(--s3); display: block; width: 100%; }

/* La card di testa di ogni gruppo occupa due colonne e respira di più; le
   ultime della griglia si allargano per non lasciare righe monche. */
.macro-card.lead { grid-column: span 2; padding: var(--s5); }
.macro-card.lead .mv { font-size: var(--t-display); }
.macro-card.lead .spark { margin-top: var(--s4); }
.macro-card.sp2 { grid-column: span 2; }
@media (max-width: 1000px) { .macro-card.lead, .macro-card.sp2 { grid-column: span 2; } }
@media (max-width: 560px) { .macro-card.lead, .macro-card.sp2 { grid-column: span 1; } }

/* ==========================================================================
   Smart Money / Congress
   ========================================================================== */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); margin: 0 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border-bottom: 2px solid transparent; color: var(--text-3); font-weight: 700;
  font-size: var(--t-body); padding: var(--s3); white-space: nowrap; min-height: 44px;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.tabs button:hover { color: var(--text-2); }
.tabs button.active { color: var(--text); border-bottom-color: var(--brand); }

.fund-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); cursor: pointer; display: flex; flex-direction: column;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.fund-card:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--e-raise); }
.fund-card:active { transform: translateY(0); }
.fund-card .fn { font-weight: 800; font-size: var(--t-body); letter-spacing: -0.015em; line-height: var(--lh-snug); }
.fund-card .mgr { color: var(--brand); font-size: var(--t-small); font-weight: 600; margin-top: 1px; }
.fund-card .fv { font-size: var(--t-title); font-weight: 800; margin-top: var(--s4); letter-spacing: -0.03em; line-height: 1; }
.fund-card .fmeta { color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s2); }
/* margin-top:auto → i blocchi "top 3" si allineano su tutta la riga anche
   quando i nomi dei fondi vanno a capo in modo diverso. */
.fund-card .top3 { margin-top: auto; padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.fund-card .top3::before { content: ""; display: block; height: 1px; background: var(--border); margin-bottom: var(--s3); }
.h3row { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-small); align-items: baseline; }
.h3row .hn { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.h3row .hw { color: var(--text); font-weight: 700; flex: 0 0 auto; }

/* Elenco a righe dentro una card (consenso fondi, mosse) */
.rank-row {
  display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--border); font-size: var(--t-small);
}
.rank-row:last-child { border-bottom: none; }
.rank-row .rk { color: var(--text-3); font-size: var(--t-micro); font-variant-numeric: tabular-nums; width: 16px; flex: 0 0 auto; }
.rank-row .rn { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.rank-row .rv { font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Intestazione di card con pastiglia di stato al posto dell'emoji */
.h-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.h-dot.buy { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.h-dot.sell { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.h-dot.hold { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.h-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

.move-tag { display: inline-block; padding: 1px var(--s2); border-radius: 5px; font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.mt-new, .mt-buy { background: var(--up-soft); color: var(--up); }
.mt-add { background: var(--brand-soft); color: var(--brand-2); }
.mt-reduce, .mt-sell_partial { background: var(--warn-soft); color: var(--warn); }
.mt-exit, .mt-sell { background: var(--down-soft); color: var(--down); }
.mt-exchange, .mt-other { background: var(--surface-3); color: var(--text-2); }

.pol-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); display: flex; flex-direction: column;
  transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease), background var(--d-base) var(--ease);
  position: relative; overflow: hidden; cursor: pointer;
}
.pol-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--e-raise); background: var(--surface-2); }
.pol-card:active { transform: translateY(0); }
.pol-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-2);
}
.pol-card.p-D::before { background: var(--dem); }
.pol-card.p-R::before { background: var(--rep); }
.pol-card.p-I::before { background: var(--ind); }
.pol-head { display: flex; align-items: center; gap: var(--s3); }
.pol-photo {
  position: relative; width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: var(--surface-3);
  border: 1.5px solid var(--border-2); display: grid; place-items: center;
}
.pol-photo > span {           /* iniziali: fallback sotto la foto */
  /* --text-3 su --surface-3 dava 4.50, esattamente sul filo AA: --text-2 porta
     il rapporto a ~7:1 e i monogrammi smettono di sembrare sbiaditi. */
  font-weight: 800; font-size: var(--t-small); color: var(--text-2); letter-spacing: -.02em;
}
.pol-photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.pol-photo.ph-D { border-color: rgba(111,160,232,.55); }
.pol-photo.ph-R { border-color: rgba(232,122,122,.55); }
.pol-id { min-width: 0; flex: 1; }
.pol-card .pn { font-weight: 800; font-size: var(--t-body); line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-card .pm { color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s1);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.party-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--s1);
  border-radius: 5px; font-size: var(--t-micro); font-weight: 800; letter-spacing: .02em;
}
.pb-D { background: rgba(90,140,220,.16); color: var(--dem); }
.pb-R { background: rgba(212,90,90,.16); color: var(--rep); }
.pb-I { background: rgba(150,160,175,.16); color: var(--ind); }
/* margin-top:auto → le tre cifre stanno sulla stessa linea in tutta la riga,
   anche se un nome va a capo. */
.pol-card .pstats {
  display: flex; gap: var(--s5); margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--border); font-size: var(--t-micro);
}
.pol-card .pstats b { display: block; font-size: var(--t-section); font-weight: 800; margin-bottom: 1px; letter-spacing: -0.02em; }
.pol-tk { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.pol-tk span {
  background: var(--surface-3); color: var(--text-2); font-size: var(--t-micro); font-weight: 700;
  padding: 2px var(--s2); border-radius: 5px; cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.pol-tk span:hover { background: var(--brand-soft); color: var(--brand-2); }

/* ==========================================================================
   Trump
   ========================================================================== */
.trump-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .trump-grid { grid-template-columns: minmax(0,1fr); } }
/* La colonna dati segue la lettura del feed invece di lasciare un vuoto. */
.trump-side { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
@media (max-width: 900px) { .trump-side { position: static; } }

.truth-post {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); margin-bottom: var(--s3);
  transition: border-color var(--d-base) var(--ease);
}
.truth-post:hover { border-color: var(--border-2); }
.truth-post.rel { border-left: 3px solid var(--warn); }
.truth-post .th { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.truth-post .av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #c9302c, #6d1512); display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: var(--t-small);
}
.truth-post .who { font-weight: 800; font-size: var(--t-small); }
.truth-post .when { color: var(--text-3); font-size: var(--t-micro); }
.truth-post .rel-tag { margin-left: auto; flex: 0 0 auto; }
.truth-post .body {
  font-size: var(--t-small); line-height: var(--lh-body); white-space: pre-wrap;
  word-break: break-word; color: var(--text-2); max-width: 78ch;
}
.truth-post .eng { color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--s2); }

.trump-asset { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.trump-asset:last-of-type { border-bottom: none; }
.trump-asset .al { font-weight: 700; font-size: var(--t-small); }
.trump-asset .an { color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s1); line-height: var(--lh-snug); }
.trump-asset > div:last-child { flex: 0 0 auto; text-align: right; }

.mention-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--d-fast) var(--ease); }
.mention-row:last-child { border-bottom: none; }
.mention-row:hover { background: var(--surface-2); }
.mention-row .mtk { font-weight: 800; width: 58px; flex: 0 0 auto; font-size: var(--t-small); }
.mention-row .mex { color: var(--text-2); font-size: var(--t-small); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-row .mch { font-weight: 700; width: 66px; text-align: right; flex: 0 0 auto; font-size: var(--t-small); }

/* ==========================================================================
   Stati: loading / empty / errore / banner
   ========================================================================== */
.spinner {
  width: 24px; height: 24px; border: 2.5px solid var(--border-2);
  border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { display: grid; place-items: center; padding: var(--s8) 0; gap: var(--s4); }
.center-load .msg { color: var(--text-3); font-size: var(--t-small); }

/* Scheletri: la forma segue il contenuto reale, non blocchi generici. */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-control);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-line { height: 10px; border-radius: var(--r-pill); }
.skel-shell {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s4);
}
.skel-fig { display: flex; flex-direction: column; gap: var(--s3); }
.skel-avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.skel-thumb { aspect-ratio: 16/9; border-radius: 0; }

.banner {
  background: var(--warn-soft); border: 1px solid rgba(245,181,68,.28); color: #f3cd85;
  padding: var(--s4); border-radius: var(--r-card); font-size: var(--t-small); line-height: var(--lh-body);
}
.banner strong { color: #ffd98f; }
.banner.info { background: var(--brand-soft); border-color: rgba(158,216,228,.25); color: var(--brand-2); }
/* Nota di metodo: informativa, non un allarme. Peso visivo basso. */
.note {
  border-left: 2px solid var(--border-2); padding: var(--s1) 0 var(--s1) var(--s4);
  color: var(--text-3); font-size: var(--t-small); line-height: var(--lh-body); max-width: 82ch;
}
.note strong { color: var(--text-2); font-weight: 700; }
/* Avviso di metodo: resta ben visibile ma non urla come un banner pieno. */
.note.warn { border-left-color: var(--warn); color: var(--text-2); }
.note.warn strong { color: var(--warn); }

.err-box { text-align: center; padding: var(--s8) var(--s5); color: var(--text-2); }
.err-box h2 { font-size: var(--t-section); margin: 0 0 var(--s2); }

/* Stato vuoto: dice cosa manca, non lascia un buco. */
.empty {
  display: grid; place-items: center; gap: var(--s3); text-align: center;
  padding: var(--s7) var(--s5); color: var(--text-3);
  border: 1px dashed var(--border-2); border-radius: var(--r-card);
}
.empty svg { color: var(--border-2); }
.empty .et { font-size: var(--t-small); font-weight: 600; color: var(--text-2); }
.empty .ed { font-size: var(--t-small); max-width: 44ch; line-height: var(--lh-snug); }

.back-link {
  color: var(--text-3); font-size: var(--t-small); font-weight: 600; display: inline-flex;
  gap: var(--s2); align-items: center; margin-bottom: var(--s3); min-height: 32px;
  transition: color var(--d-fast) var(--ease);
}
.back-link:hover { color: var(--text); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); margin-top: var(--s8); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s7) var(--gutter); }
@media (max-width: 480px) {
  .footer { margin-top: var(--s6); }
  .footer-inner { padding: var(--s6) var(--gutter) var(--s5); }
  .foot-bottom { margin-top: var(--s5); padding-top: var(--s4); gap: var(--s3); }
  .disclaimer-strip { margin-top: var(--s4); padding: var(--s3); }
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* Su telefono NON si scende a una colonna: quattro blocchi impilati facevano
   un footer altissimo che l'utente scorreva a vuoto. Il blocco del marchio va
   a tutta larghezza, le tre liste di link restano affiancate su due colonne. */
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-desc { max-width: none; }
  .foot-col a, .foot-col span { padding: var(--s2) 0; }   /* bersagli comodi al tocco */
}
.foot-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.foot-brand img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(158,216,228,.22); }
.foot-brand .bt { font-weight: 800; font-size: var(--t-body); letter-spacing: -0.02em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.foot-desc { color: var(--text-3); font-size: var(--t-small); line-height: var(--lh-body); max-width: 38ch; }
.foot-col h4 { margin: 0 0 var(--s3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 700; }
.foot-col a, .foot-col span { display: block; color: var(--text-2); font-size: var(--t-small); padding: var(--s1) 0; transition: color var(--d-fast) var(--ease); }
.foot-col a:hover { color: var(--brand-2); }
.foot-bottom {
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  color: var(--text-3); font-size: var(--t-micro); line-height: var(--lh-body);
}
.foot-x { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); font-weight: 600; min-height: 32px; }
.foot-x:hover { color: var(--brand-2); }
.disclaimer-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); color: var(--text-3); font-size: var(--t-micro); line-height: var(--lh-body); margin-top: var(--s5);
}

/* ==========================================================================
   Cookie banner
   ========================================================================== */
.cookie {
  position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 300;
  max-width: 760px; margin: 0 auto;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-panel); box-shadow: var(--e-over);
  padding: var(--s5); display: none;
  animation: slideUp var(--d-base) var(--ease);
}
.cookie.show { display: block; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie h4 { margin: 0 0 var(--s2); font-size: var(--t-body); font-weight: 700; }
.cookie p { margin: 0; color: var(--text-2); font-size: var(--t-small); line-height: var(--lh-body); }
.cookie p a { color: var(--brand-2); text-decoration: underline; }
.cookie-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }

.btn {
  padding: var(--s3) var(--s5); border-radius: var(--r-control); font-weight: 700; font-size: var(--t-small);
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); background: var(--surface); }
.btn .arw { transition: transform var(--d-base) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ==========================================================================
   Pagine legali
   ========================================================================== */
.legal { max-width: 68ch; }
.legal h1 { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 var(--s2); line-height: var(--lh-tight); }
.legal .upd { color: var(--text-3); font-size: var(--t-small); margin-bottom: var(--s6); }
.legal h2 { font-size: var(--t-section); font-weight: 700; margin: var(--s6) 0 var(--s3); letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--text-2); font-size: var(--t-body); line-height: var(--lh-loose); }
.legal ul { padding-left: var(--s5); }
.legal li { margin-bottom: var(--s2); }
.legal a { color: var(--brand-2); text-decoration: underline; }
.legal strong { color: var(--text); }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: var(--t-small); }
.legal th, .legal td { text-align: left; padding: var(--s3); border: 1px solid var(--border); }
.legal th { background: var(--surface); color: var(--text-3); font-weight: 600; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em; }

/* ==========================================================================
   Utility
   ========================================================================== */
.flex { display: flex; }
.between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-8 { gap: var(--s2); }
.mt-0 { margin-top: 0; }
.hide-sm { }
@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .nav-search { width: 150px; }
  .q-price .big { font-size: 28px; }
  .nav-inner { gap: var(--s3); }
}

/* --------------------------------------------------------------------------
   Navigazione su schermi stretti: menu a comparsa.
   La barra scorrevole orizzontale non funzionava — la voce ATTIVA finiva
   tagliata a metà sotto la sfumatura, quindi l'utente non vedeva nemmeno in
   che pagina si trovava. Qui le voci diventano un pannello a tutta larghezza.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .nav-tools .nav-toggle { display: grid; order: 2; }   /* il panino resta l'ultimo a destra */
  /* Con le voci nascoste, logo e comandi restavano appiccicati a sinistra e
     la barra sembrava vuota: i comandi vanno spinti al bordo opposto. */
  .nav-tools { margin-left: auto; }

  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    display: none; flex-direction: column; gap: var(--s1);
    padding: var(--s3) var(--gutter) var(--s4);
    background: rgba(8, 11, 16, .97);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--e-over);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    overscroll-behavior: contain;
    animation: navDrop var(--d-base) var(--ease);
  }
  .nav-links.open { display: flex; }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .nav-links a {
    min-height: 48px; font-size: var(--t-body); font-weight: 600;
    padding: var(--s3) var(--s4); border-radius: var(--r-control);
  }
  /* La sottolineatura non serve: qui la voce attiva si distingue col fondo. */
  .nav-links a.active::after { display: none; }
  .nav-links a.active { background: var(--surface-2); color: var(--text); }
  .nav-links a.active::before {
    content: ""; position: absolute; left: 0; top: 25%; bottom: 25%;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
  }

  /* Il velo sotto al pannello chiude toccando fuori. */
  .nav-scrim {
    position: fixed; inset: var(--nav-h) 0 0; z-index: 90;
    background: rgba(0,0,0,.45); display: none;
  }
  .nav-scrim.open { display: block; }

  /* Selettore lingua dentro il pannello. Il pulsante col mappamondo sparisce
     dalla barra: a 15px l'icona era illeggibile su telefono e il suo menu a
     tendina finiva sopra questo pannello. */
  .lang-wrap { display: none; }
  .nav-langs {
    display: flex; flex-direction: column; gap: var(--s1);
    margin-top: var(--s3); padding-top: var(--s3);
    border-top: 1px solid var(--border);
  }
  .nav-langs-t {
    font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em;
    color: var(--text-3); font-weight: 700; padding: var(--s2) var(--s4);
  }
  .nav-langs button {
    display: flex; align-items: center; gap: var(--s3);
    min-height: 48px; padding: var(--s3) var(--s4);
    border-radius: var(--r-control); font-size: var(--t-body); font-weight: 600;
    color: var(--text-2); text-align: left;
    transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  }
  .nav-langs button:hover { background: var(--surface); color: var(--text); }
  .nav-langs button.on { color: var(--brand-2); background: var(--surface-2); }
}
/* Su desktop le lingue restano nel menu a tendina della barra. */
@media (min-width: 721px) { .nav-langs { display: none; } }
@media (min-width: 721px) { .nav-scrim { display: none !important; } }

/* Sui dispositivi a puntamento grossolano ogni bersaglio arriva a 44px. */
@media (pointer: coarse) {
  .nav-links a, .chips button, .ranges button, .seg button,
  .lang-menu button, .btn, .back-link, .foot-col a { min-height: 44px; }
  .chips button, .seg button { padding-top: var(--s3); padding-bottom: var(--s3); }
  .icon-btn { width: 44px; height: 44px; }
  .pol-tk span { padding: var(--s2) var(--s3); }
}

/* Riga tabella Congresso con foto membro */
.tr-member { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.tr-member .pol-photo { width: 30px; height: 30px; border-width: 1px; }
.tr-member .pol-photo > span { font-size: 10px; }
.tr-member .tm-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700;
  color: var(--text); transition: color var(--d-fast) var(--ease);
}
.tr-member .tm-name:hover { color: var(--brand-2); }
.tr-member .tm-meta { font-size: var(--t-micro); color: var(--text-3); display: inline-flex; align-items: center; gap: var(--s1); }

/* Ticker dell'ETF sulla card indice: chiarisce che il prezzo è quello dell'ETF */
.idx-card .n { display: flex; align-items: center; gap: var(--s2); }
.idx-card .idx-tk {
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  background: var(--surface-3); color: var(--text-2);
  padding: 1px var(--s1); border-radius: 4px; text-transform: none;
}

/* ===================== Congresso — analisi estese ===================== */
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4);
}
.kpi .kv { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.kpi .kl { color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s2); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }

.pty-row { margin-bottom: var(--s5); }
.pty-row:last-child { margin-bottom: 0; }
.pty-h { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); margin-bottom: var(--s2); flex-wrap: wrap; }
.pty-bar { display: flex; height: 9px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.up-seg { background: var(--up); }
.down-seg { background: var(--down); }
.pty-l { display: flex; justify-content: space-between; font-size: var(--t-micro); margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.pty-mini { display: inline-flex; gap: var(--s1); }
.pty-mini span { font-size: var(--t-micro); font-weight: 800; padding: 1px var(--s1); border-radius: 4px; }
.pty-mini .pb-D { background: rgba(111,160,232,.16); color: var(--dem); }
.pty-mini .pb-R { background: rgba(232,122,122,.16); color: var(--rep); }

.tl-wrap { display: flex; align-items: flex-end; gap: var(--s1); height: 130px; justify-content: flex-start; }
.tl-col { flex: 1; min-width: 0; max-width: 64px; display: flex; flex-direction: column; height: 100%;
  justify-content: flex-end; gap: var(--s2); }
.tl-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; justify-content: center; }
.tl-b { width: 46%; min-height: 2px; border-radius: 2px 2px 0 0; }
/* Una etichetta ogni tre: sotto i 40px di colonna si sovrapporrebbero sempre. */
.tl-lab { font-size: var(--t-micro); color: var(--text-3); text-align: center; height: 14px; white-space: nowrap; }
.tl-lab.hide { visibility: hidden; }

/* ===================== Pagina singolo politico ===================== */
.pol-hero {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--r-card); padding: var(--s5);
}
.pol-hero.p-D { border-left-color: var(--dem); }
.pol-hero.p-R { border-left-color: var(--rep); }
.pol-hero.p-I { border-left-color: var(--ind); }
.pol-hero h1 { margin: 0; font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: var(--lh-tight); }
.pol-hero .pm { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  color: var(--text-3); font-size: var(--t-small); }
.pol-hero-kpi { display: flex; gap: var(--s6); margin-left: auto; }
.pol-hero-kpi div { text-align: right; }
.pol-hero-kpi b { display: block; font-size: var(--t-section); font-weight: 800; letter-spacing: -0.02em; }
.pol-hero-kpi span { color: var(--text-3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 700px) { .pol-hero-kpi { margin-left: 0; gap: var(--s5); } .pol-hero-kpi b { font-size: var(--t-body); } }

/* Il donut e la sua legenda stanno in colonna: così la card non resta
   vuota per due terzi quando le voci sono poche. */
.pie-wrap { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.donut { flex: 0 0 auto; }
.donut circle { transition: opacity var(--d-fast) var(--ease); }
.donut:hover circle { opacity: .5; }
.donut circle:hover { opacity: 1; }
.pie-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: var(--s2); }
/* A piena larghezza la legenda va su due colonne: il donut da solo lascerebbe
   metà card vuota. */
.pie-wrap.wide { gap: var(--s7); }
.pie-wrap.wide .pie-legend {
  display: grid; grid-template-columns: repeat(2, minmax(220px, 320px));
  gap: var(--s2) var(--s7); align-content: center; justify-content: start;
}
@media (max-width: 760px) {
  .pie-wrap.wide { gap: var(--s5); }
  .pie-wrap.wide .pie-legend { grid-template-columns: minmax(0,1fr); }
}
.lg-row { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); }
.lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.lg-name { color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.lg-val { margin-left: auto; font-weight: 700; font-family: var(--mono); font-size: var(--t-micro); flex: 0 0 auto; }
.lg-share { color: var(--text-3); font-size: var(--t-micro); width: 44px; text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ============================ Sezione Learn ============================ */
.learn-card { display: flex; gap: var(--s4); align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s5);
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease), background var(--d-base) var(--ease); }
.learn-card:hover { transform: translateY(-2px); border-color: var(--border-2); background: var(--surface-2); }
.lc-icon { font-size: var(--t-title); line-height: 1; flex: 0 0 auto; }
.lc-t { font-weight: 800; font-size: var(--t-section); letter-spacing: -0.015em; }
.lc-d { color: var(--text-3); font-size: var(--t-small); margin-top: var(--s1); line-height: var(--lh-snug); }

.calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
@media (max-width: 720px) { .calc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.calc-f label { display: block; color: var(--text-3); font-size: var(--t-micro); margin-bottom: var(--s2); }
.calc-in { position: relative; display: flex; align-items: center; }
.calc-in input { width: 100%; height: 42px; padding: 0 var(--s6) 0 var(--s3); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text);
  font-size: var(--t-section); font-weight: 700; font-family: var(--mono); outline: none; }
.calc-in input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.calc-in span { position: absolute; right: var(--s3); color: var(--text-3); font-size: var(--t-small); pointer-events: none; }

.calc-chart { display: flex; align-items: flex-end; gap: 3px; height: 190px; margin-top: var(--s5); }
.cg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; gap: var(--s2); }
.cg-stack { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.cg-paid { background: var(--brand); border-radius: 0 0 3px 3px; min-height: 1px; }
.cg-gain { background: var(--up); border-radius: 3px 3px 0 0; min-height: 0; }
.cg-lab { font-size: var(--t-micro); color: var(--text-3); text-align: center; height: 14px; }

/* ---- ritratti dei gestori (immagini a licenza libera, con attribuzione) ---- */
.fund-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.mgr-photo { position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: var(--surface-3);
  border: 1.5px solid var(--border-2); display: grid; place-items: center;
  transition: border-color var(--d-base) var(--ease); }
.mgr-photo > span { font-weight: 800; font-size: var(--t-small); color: var(--text-2); letter-spacing: -.02em; }
.mgr-photo > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block; }
.fund-card:hover .mgr-photo { border-color: var(--brand); }

.img-credits { margin-top: var(--s5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.img-credits summary { cursor: pointer; color: var(--text-3); font-size: var(--t-small); font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.img-credits summary:hover { color: var(--text-2); }
.img-credits ul { margin: var(--s3) 0 0; padding-left: var(--s5); }
.img-credits li { color: var(--text-3); font-size: var(--t-micro); line-height: var(--lh-loose); }
.img-credits a { color: var(--text-2); text-decoration: underline; }
.img-credits p { color: var(--text-3); font-size: var(--t-micro); margin: var(--s3) 0 0; line-height: var(--lh-body); }

/* ------------------------- Trump: ritratto ufficiale ------------------------- */
.trump-hero { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--rep); border-radius: var(--r-card);
  padding: var(--s5); margin-bottom: var(--s5); }
.trump-portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  object-position: center top; flex: 0 0 auto;
  border: 2px solid var(--border-2); box-shadow: var(--e-raise); }
.trump-hero h1 { margin: 0; font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: var(--lh-tight); }
.trump-hero p { margin: var(--s2) 0 0; color: var(--text-3); font-size: var(--t-small); max-width: 62ch; line-height: var(--lh-snug); }
.trump-credit { font-size: var(--t-micro) !important; margin-top: var(--s3) !important; }
.trump-credit a { color: var(--text-3); text-decoration: underline; }
.truth-post .av.av-img { object-fit: cover; object-position: center top; padding: 0; }

/* ==========================================================================
   Movimento ridotto: si spegne tutto ciò che si muove, restano gli stati.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ncard:hover, .tile:hover, .idx-card:hover, .macro-card:hover,
  .fund-card:hover, .pol-card:hover, .nav-card:hover { transform: none; }
  .ncard:hover .nimg img { transform: none; }
  .skel { animation: none; background: var(--surface-2); }
}