/* PHAI Trading - stile dell'app. Estratto da templates/index.html (2026-07-22).
   Se modifichi questo file BUMPA ?v= nel <link> di index.html: il service worker
   fa cache-first per URL sugli statici, senza bump serve la versione vecchia. */
:root{
  --bg:#0a0e18; --panel:#121829; --panel2:#1a2236; --border:#283149;
  --text:#e9ebf2; --muted:#8b94ab; --accent:#cba65c;
  --green:#3ddc97; --red:#f1707b;
  /* LA SUPERFICIE DI UNA CARD. `--card` e `--card2` erano definite SOLO dentro
     `#sec-elezioni` e usate anche fuori — da `.equity-box`, `.price-wrap`, `.osc-card`
     e da due `box-shadow`: sei regole a cui il browser buttava via l'intera
     dichiarazione, cioe' sei riquadri senza sfondo. Stesso difetto di `var(--gold)`,
     trovato dalla stessa guardia il 07/08/2026 dopo averla resa consapevole dello
     scope. I valori sono quelli del pannello, che e' quello che quelle regole
     volevano; `#sec-elezioni` continua a sovrascriverli coi suoi. */
  --card:#121829; --card2:#1a2236;
  /* il grigio piu' spento, sotto `--muted`: date, contatori, etichette di servizio.
     Le nove regole del «quadro del mondo» e del calendario lo usavano gia' senza che
     esistesse, quindi non applicavano NESSUN colore (una var sconosciuta invalida
     l'intera dichiarazione) ed ereditavano quello del testo. Trovato il 07/08/2026 dal
     controllo delle variabili in `controlla_js.py`. */
  --text-faint:#6f7893;
  /* altezza reale dell'header (misurata in JS: su phone va a capo) e della barra
     di navigazione in basso: servono a far riempire alla chat esattamente lo schermo */
  --hdr-h:54px; --navbar-h:0px;
  /* quanto spazio si prende la banda in basso, misurato da `_bannerSpazio()`.
     Zero quando non ce n'e' nessuna: il contenuto non paga niente. */
  --banner-h:0px;
  --banner-h-top:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}
.messages,.signal-list,.tabs{-webkit-overflow-scrolling:touch}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3450;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a4564}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Header ---------- */
header{background:linear-gradient(180deg,#101627,#0a0e18);border-bottom:1px solid var(--border);padding:0 18px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:18px;height:54px;flex-shrink:0}
/* il logo PHAI Trading resta SEMPRE nell'header, in ogni sezione (Dock compreso) e a ogni
   larghezza: non si restringe e non si nasconde mai (su phone sparisce solo la scritta) */
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{display:block!important}
.brand-mark{width:32px;height:32px;display:block;flex-shrink:0}
/* ---------- Dock al lavoro: i passi della consultazione ----------
   Mostrare CHE COSA sta guardando (e non solo che "sta scrivendo") copre l'attesa del
   secondo giro di rete e, soprattutto, dice all'utente che i numeri vengono dai dati
   e non dalla fantasia del modello. Alla fine il riquadro si richiude in una riga di
   FONTI che resta sotto la risposta: la provenienza non e' un dettaglio, e' la prova. */
.dock-figs{display:flex;flex-direction:column}
.dock-chart{margin:10px 0 4px;background:linear-gradient(180deg,rgba(18,25,42,.75),rgba(10,14,24,.55));
  border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.28);
  border-radius:13px;padding:11px 12px 5px;animation:stepIn .35s cubic-bezier(.2,.8,.3,1) both}
.dock-chart figcaption{font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:6px;
  letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.dock-chart figcaption::before{content:'';width:3px;height:12px;border-radius:2px;
  background:var(--accent);flex-shrink:0}   /* filetto d'oro: dice "questo e' un dato nostro" */
.dock-chart svg{width:100%;height:auto;display:block;overflow:visible}
.dock-chart .gnota{font-size:10px;color:var(--muted);margin:3px 0 5px;line-height:1.45}
.dock-chart .gtit{flex:1;min-width:0}
/* il badge della direzione: pastiglia piena, si legge PRIMA del grafico */
.dock-chart .gbadge{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:3px 10px;border-radius:999px;color:#0a0e18;box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* la linea del prezzo si TRACCIA da sinistra a destra all'apparire (pathLength=1 nel path) */
.dock-chart path.gserie{stroke-dasharray:1;stroke-dashoffset:1;
  animation:gdraw 1.1s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes gdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.dock-chart path.gserie{animation:none;stroke-dashoffset:0}}
.dock-steps{display:flex;flex-direction:column;gap:8px;padding:2px 0;min-width:230px}
.dstep{display:flex;align-items:center;gap:10px;font-size:13px;color:#9aa6bd;
  animation:stepIn .3s cubic-bezier(.2,.8,.3,1) both}
.dstep:nth-child(2){animation-delay:.07s}.dstep:nth-child(3){animation-delay:.14s}
.dstep:nth-child(4){animation-delay:.21s}
@keyframes stepIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.dstep .dico{width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;
  border-radius:8px;background:rgba(203,166,92,.09);border:1px solid rgba(203,166,92,.20);color:var(--accent)}
.dstep .dico svg{width:13px;height:13px}
.dstep.run .dico{animation:icoGlow 1.5s ease-in-out infinite}
@keyframes icoGlow{0%,100%{box-shadow:0 0 0 0 rgba(203,166,92,0)}50%{box-shadow:0 0 0 4px rgba(203,166,92,.13)}}
.dstep .dlbl{flex:1;min-width:0}
.dstep.run .dlbl{background:linear-gradient(90deg,var(--muted) 20%,var(--accent) 45%,var(--muted) 70%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 1.5s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.dstep.done{color:#9fb0c6}
.dstep .dtick{opacity:0;color:var(--green,#3fb950);font-weight:800;font-size:12px;transition:opacity .3s}
.dstep.done .dtick{opacity:1}
/* riga FONTI sotto la risposta */
.dock-sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:11px 0 0;
  padding-top:10px;border-top:1px solid rgba(40,49,73,.7);font-size:11px;color:#8b95ad}
.dock-sources>span:first-child{letter-spacing:.3px;text-transform:uppercase;font-size:10px;font-weight:600}
.dock-sources .src{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:20px;
  background:rgba(203,166,92,.07);border:1px solid rgba(203,166,92,.18);color:#c8b384;
  white-space:nowrap;transition:.15s}
.dock-sources .src:hover{background:rgba(203,166,92,.13);border-color:rgba(203,166,92,.35)}
.dock-sources .src svg{width:11px;height:11px;flex-shrink:0}
/* cursore mentre scrive */
.md-live::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;
  background:var(--accent);vertical-align:-2px;animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* copia la risposta */
.msg.bot .copy-btn{position:absolute;top:7px;right:8px;background:transparent;border:1px solid var(--border);
  color:var(--muted);border-radius:7px;padding:3px 8px;font-size:11px;cursor:pointer;opacity:0;transition:.15s}
.msg.bot:hover .copy-btn,.msg.bot .copy-btn:focus{opacity:1}
.msg.bot .copy-btn:hover{color:var(--accent);border-color:var(--accent)}
@media(hover:none){.msg.bot .copy-btn{opacity:.55}}
.rd-risk{font-size:12px;color:#9fb0c6;margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rd-risk b{color:var(--accent)}
.rd-risk .u{color:var(--muted);font-size:11px}
.rd-risk .sig-calc{margin-top:0}
.sig-risk{font-size:12px;color:#9fb0c6;margin-top:3px}
.sig-risk .rk-lbl{color:var(--muted)}
.sig-risk b{color:var(--accent)}
.sig-risk .u{color:var(--muted);font-size:11px}
.sig-calc{margin-top:7px;background:transparent;border:1px solid rgba(203,166,92,.35);color:var(--accent);
  border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s}
.sig-calc:hover{background:rgba(203,166,92,.12);border-color:var(--accent)}
.dock-tooling{color:var(--muted);font-style:italic;font-size:13px;display:inline-flex;align-items:center;gap:6px}
/* ⚠ `align-items:center` NO, `margin:auto` SI' (06/08/2026, misurato). Centrare con
   `align-items` un contenuto PIU' ALTO del riquadro fa uscire l'eccedenza dal lato
   ALTO, dove nessuno scorrimento arriva: col mosaico il benvenuto e' diventato alto
   680px in un riquadro da 424 e il logo finiva a −54px, irraggiungibile. Sembrava
   «tutto tagliato» ed era esattamente cio' che era. Il margine automatico centra
   quando c'e' spazio e CEDE quando non ce n'e', lasciando tutto scorribile. */
.dock-welcome{text-align:center;display:flex;align-items:flex-start;justify-content:center;min-height:56vh;
  background:transparent!important;border:0!important;box-shadow:none!important;
  /* la bolla dei messaggi e' max-width 88% ancorata a sinistra: il benvenuto invece
     occupa TUTTA la colonna e si centra da solo (flex:1 = riempi la chat vuota) */
  align-self:stretch!important;width:100%;max-width:100%!important;flex:1}
/* ⚠ MA SOLO FINCHE' E' SOLO (06/08/2026). `flex:1` + `min-height:56vh` riempiono la
   chat vuota, ed e' giusto. Quando pero' arriva una risposta, quella scatola resta
   alta 403px con dentro 761px di mosaico: il contenuto TRABOCCA e si disegna SOPRA i
   messaggi — la risposta usciva accavallata al benvenuto (fotografato a 390px).
   Appena c'e' qualcos'altro in chat il benvenuto torna un blocco normale, alto quanto
   il suo contenuto, e i messaggi gli vanno sotto. E' la stessa lezione del centraggio:
   in una colonna flex, ciò che può crescere non si vincola all'altezza del riquadro. */
.dock-welcome:not(:only-child){flex:0 0 auto;min-height:0}
.dock-welcome-inner{max-width:640px;margin:auto}
.dock-hello{margin:0 0 18px;font-size:15px;line-height:1.5}
.dock-hero{width:150px;max-width:55%;height:auto;display:block;margin:0 auto 14px;filter:drop-shadow(0 4px 18px rgba(203,166,92,.15))}
.dock-welcome .who{display:none}
/* "Cosa posso fare per te": la lista sta a SINISTRA dentro un benvenuto centrato —
   un elenco centrato si legge male, e questo e' il punto in cui l'utente capisce
   davvero cos'e' Dock. La nota finale dice cosa NON fa: e' la parte che ci tiene
   dalla parte giusta (nessun consiglio personalizzato, nessuna promessa). */
.dock-can{text-align:left;margin:16px auto 0;max-width:420px;background:rgba(10,14,24,.5);
  border:1px solid var(--border);border-radius:13px;padding:13px 15px 11px}
.dock-can h4{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--accent)}
.dock-can ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dock-can li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.dock-can .ci{font-size:15px;flex-shrink:0;width:20px;text-align:center}
.dock-can li b{display:block;font-size:13.5px;font-weight:650;color:var(--text)}
.dock-can li i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}
.dock-can .can-note{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.5;color:var(--muted)}
.dock-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:4px}
.dock-welcome .can-note{margin:16px auto 0;max-width:460px;font-size:11px;color:var(--muted);opacity:.8;border:0;padding:0}
@media (max-width:640px){ .dock-welcome{min-height:48vh} .dock-hero{width:120px} .dock-hello{font-size:14px} }
.dock-chip{font-size:13px;font-weight:600;color:var(--text);background:var(--panel2);border:1px solid var(--border);border-radius:20px;padding:9px 15px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;line-height:1}
.dock-chip span{font-size:14px}
.dock-chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(203,166,92,.10);transform:translateY(-1px)}
.brand-name{display:flex;flex-direction:column;line-height:1;font-weight:800;font-size:16px;letter-spacing:2px;color:var(--text)}
.brand-name i{font-style:normal;font-size:8.5px;letter-spacing:3.5px;color:var(--accent);font-weight:700;margin-top:3px}
/* MENU SCORREVOLE: si deve CAPIRE che continua. Due segnali insieme:
   1) l'ultimo chip resta tagliato a meta' (padding-right piccolo, niente centratura)
   2) una sfumatura al bordo, che compare solo dal lato in cui c'e' ancora roba.
   La barra di scorrimento resta nascosta ma il gesto funziona (touch e trackpad). */
.tabs-wrap{position:relative;flex:1;min-width:0}
/* sfumatura AMPIA ai bordi: si vede anche di sfuggita, e dice da che parte continuare */
.tabs-wrap::before,.tabs-wrap::after{content:'';position:absolute;top:-2px;bottom:-2px;width:56px;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.tabs-wrap::before{left:0;background:linear-gradient(90deg,var(--bg) 45%,rgba(11,17,32,0))}
.tabs-wrap::after{right:0;background:linear-gradient(270deg,var(--bg) 45%,rgba(11,17,32,0))}
.tabs-wrap.can-left::before{opacity:1}
.tabs-wrap.can-right::after{opacity:1}
/* FRECCE: pulsanti veri, non decorazioni. Si vedono, e toccandole il menu scorre —
   cosi' chi non conosce il gesto dello scorrimento ha comunque un modo per arrivarci. */
.tabs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:#1a2236;color:var(--text);font-size:16px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;font-family:inherit;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.tabs-arrow:hover{background:#232d46;border-color:var(--accent);color:var(--accent)}
.tabs-arrow.left{order:-1} .tabs-arrow.right{order:1}
.tabs-wrap.can-left .tabs-arrow.left{display:flex}
.tabs-wrap.can-right .tabs-arrow.right{display:flex}
/* LE FRECCE ESCONO DA SOPRA LA FILA E CI SI METTONO ACCANTO.
   Erano sovrapposte (position:absolute, z-index 3) e coprivano qualunque
   linguetta capitasse sotto: misurato il 37% di «PHAI Traders» a 430px, cioe'
   un terzo non premibile. Un primo tentativo col `padding` sulla fila NON
   bastava, ed era prevedibile: il padding sposta solo il FONDO dello
   scorrimento, mentre la freccia galleggia sempre nello stesso punto dello
   schermo. Finche' due elementi non stanno nello stesso flusso, nessuna
   regola puo' impedirgli di incontrarsi — la stessa lezione dei comandi
   sopra la scena dell'Atlas. */
.tabs-wrap{display:flex;align-items:center;gap:4px}
.tabs-wrap .tabs{flex:1;min-width:0;order:0}
.tabs-arrow{position:static;transform:none;flex:0 0 auto}
/* al primo caricamento la freccia destra pulsa un paio di volte: un invito, poi si ferma */
.tabs-wrap.can-right .tabs-arrow.right{animation:cuePulse 1.5s ease-out 2}
@keyframes cuePulse{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.45)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 6px rgba(203,166,92,.18)}
}
/* LA STRISCIA DEI CONTI NEL GRAFO sta a destra del titolo e non deve ALLARGARSI a
   riempire lo spazio: `.tabs-wrap` porta flex:1 perche' nella nav principale occupa
   tutta la riga, e qui i tab scivolerebbero a sinistra cambiando faccia alla testata.
   Deve pero' poter RESTRINGERSI (min-width:0), altrimenti l'overflow non scatta mai
   e le frecce non compaiono — che e' esattamente il bug per cui esiste questa riga:
   comparso il tab del conto proprio, "Mercato" e' uscito dal bordo in silenzio. */
#graph-conti-wrap{flex:0 1 auto;min-width:0;max-width:100%}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth;padding:0 30px 0 0}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:20px;background:#1a2236;border:1px solid var(--border);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.tab:hover{background:#232d46;color:var(--text)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#0a0e18}
.tab .tdot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
/* "A mercato" NON e' un quarto motore ma un interruttore a parte: il separatore e il verde
   (invece dell'oro dei motori) lo dicono a colpo d'occhio, cosi' non sembra una scelta esclusiva. */
.tab-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--border);flex:0 0 1px}
/* QUALE CONTO si guarda: solo per i Custode, che ne hanno due. Volutamente diverso dai
   chip dei motori — non filtra, cambia la FONTE di tutti i numeri della pagina. */
.scope-sw{display:inline-flex;background:#0f1626;border:1px solid var(--border);border-radius:10px;padding:2px}
.scope-sw .sc-b{padding:6px 12px;border:0;background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;border-radius:8px;cursor:pointer;font-family:inherit}
.scope-sw .sc-b.on{background:var(--accent);color:#0a0e18}
/* ANTEPRIMA DI RUOLO (solo owner): "con quali occhi guardo". E' un asse DIVERSO dal conto —
   quello dice quali numeri, questo dice chi li sta vedendo — quindi non deve somigliargli,
   o si scambiano. Colore d'allarme: si sta guardando qualcosa che non e' il proprio stato. */
.vista-sw{display:inline-flex;background:#1a1206;border:1px dashed #d29922;border-radius:10px;padding:2px;margin-left:8px}
.vista-sw .sc-b{padding:5px 10px;border:0;background:transparent;color:#d29922;
  font-size:11.5px;font-weight:700;border-radius:8px;cursor:pointer;font-family:inherit}
.vista-sw .sc-b.on{background:#d29922;color:#0a0e18}
.vista-banner{margin:8px 0;padding:8px 12px;border:1px dashed #d29922;border-radius:10px;
  background:rgba(210,153,34,.10);color:#d29922;font-size:13px;font-weight:600}
.tab.tab-man.active{background:#d29922;border-color:#d29922;color:#0a0e18}
.tab.tab-man:not(.active) .tcount{background:rgba(210,153,34,.22);color:#d29922}
/* l'avviso sulla provenienza dei numeri: UNO, in cima, non su ogni riquadro */
.scope-note{margin:10px 0 2px;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.5;
  color:var(--muted);background:rgba(92,168,203,.07);border:1px solid rgba(92,168,203,.22)}
.scope-note:empty{display:none}
.rd-empty{grid-column:1/-1;padding:22px 18px;text-align:center;color:var(--muted);font-size:13.5px;
  border:1px dashed var(--border);border-radius:12px}
.rd-empty div{margin-top:6px;font-size:12px;opacity:.85}
.tab.tab-mkt.active{background:#2ea043;border-color:#2ea043;color:#fff}
.tab .tcount{min-width:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.16);
  font-size:11px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.tab.tab-mkt:not(.active) .tcount{background:rgba(46,160,67,.22);color:#3fb950}
.user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);flex-shrink:0}
.user .email{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig-locked{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.55}
.user .logout{cursor:pointer;color:var(--accent);font-weight:600}
.user .logout:hover{text-decoration:underline}
.lang-sel{background:#1a2236;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 7px;font-size:12px;font-weight:600;cursor:pointer;outline:none;flex-shrink:0}
.lang-sel:hover{border-color:var(--accent)}
.install-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.install-btn:hover{background:rgba(203,166,92,.12)}
.notif-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#1a2236;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.notif-btn:hover{color:var(--text);border-color:#3a4564}
.notif-btn.on{color:var(--accent);border-color:var(--accent);background:rgba(203,166,92,.12)}
.toasts{position:fixed;top:64px;right:14px;right:max(14px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px;z-index:60;max-width:min(330px,90vw)}
.toast{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:11px 14px;box-shadow:0 10px 28px rgba(0,0,0,.45);animation:rise .2s}
.toast .tt{font-weight:700;font-size:13px}
.toast .tb{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}

/* ---------- Stat cards ---------- */
.cards{display:flex;gap:12px;padding:14px 18px 0;flex-shrink:0}
.cards.stats-row{padding-top:10px;padding-bottom:4px}
.card{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;min-width:0}
.cards.account .card{background:linear-gradient(180deg,#161e30,#121829)}
.card.sm{padding:9px 14px}
.card-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-val{font-size:23px;font-weight:700;line-height:1}
.card.sm .card-val{font-size:19px}
.card-val.pos{color:var(--green)} .card-val.neg{color:var(--red)}
.card-val.accent{color:var(--accent)}
.tab .pct{font-size:11px;font-weight:700;opacity:.95}
.tab .pct.pos{color:var(--green)} .tab .pct.neg{color:var(--red)}
.tab.active .pct.pos,.tab.active .pct.neg{color:#0a0e18}

/* ---------- Layout ---------- */
.container{display:flex;flex:1;gap:14px;padding:0 18px 16px;overflow:hidden}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.chat-panel{flex:1}
.signals-panel{flex:1}
.panel-head{padding:13px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.panel-head .scope{color:var(--accent)}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10px;color:var(--green);text-transform:none;letter-spacing:0}
.live .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}


/* ---------- Chat ---------- */
.messages{flex:1 1 auto;min-height:170px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55;animation:rise .2s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.user{background:linear-gradient(135deg,#22324f,#1a2740);align-self:flex-end;border-bottom-right-radius:4px}
.msg.bot{background:var(--panel2);align-self:flex-start;border:1px solid var(--border);border-bottom-left-radius:4px;color:#dfe2e7;position:relative}
.msg.bot .who{font-weight:700;color:var(--accent);font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.msg.bot .who-ico{width:15px;height:15px;flex-shrink:0;opacity:.95}
/* mentre scrive, la bolla respira: un filo di luce sul bordo, niente di piu' */
.msg.bot.streaming{border-color:rgba(203,166,92,.34);box-shadow:0 0 0 1px rgba(203,166,92,.10),0 6px 22px -12px rgba(203,166,92,.45)}
.msg.bot.streaming .who-ico{animation:pulseIco 1.6s ease-in-out infinite}
@keyframes pulseIco{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
/* chi preferisce meno movimento non deve subirlo: nessuna animazione, solo lo stato finale */
@media(prefers-reduced-motion:reduce){
  .msg,.dstep,.dstep.run .dlbl,.msg.bot.streaming .who-ico,.md-live::after{animation:none!important}
  .dstep.run .dlbl{background:none;-webkit-text-fill-color:currentColor;color:var(--accent)}
}
.msg.bot strong{color:var(--accent)}
.msg.bot .md-h{font-weight:700;color:var(--accent);margin:9px 0 3px;font-size:14px}
.msg.bot p{margin:6px 0}.msg.bot p:first-child,.msg.bot .md-h:first-child{margin-top:0}
.msg.bot ul,.msg.bot ol{margin:6px 0 6px 20px}.msg.bot li{margin:3px 0}
.msg.bot code{background:#0e1422;padding:1px 6px;border-radius:4px;font-size:13px}
.msg.bot table{border-collapse:collapse;margin:8px 0;font-size:13px;display:block;overflow-x:auto}
.msg.bot th,.msg.bot td{border:1px solid var(--border);padding:5px 10px;text-align:left;white-space:nowrap}
.msg.bot th{background:#0e1422;color:var(--accent)}
.typing{display:inline-flex;gap:4px;padding:2px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.input-bar{display:flex;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));gap:10px;border-top:1px solid var(--border)}
/* il campo si stringe, i bottoni MAI fuori schermo (bug mobile col 3° bottone) */
.input-bar input{flex:1 1 auto;min-width:0}
.input-bar button{flex-shrink:0}
@media(max-width:520px){.input-bar{gap:6px;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .mic-btn{width:38px;min-width:38px;padding:6px}
  #chat-btn{padding:8px 12px;font-size:13px}}
.input-bar input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:#0e1422;color:var(--text);font-size:14px;outline:none;transition:.15s}
.input-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(203,166,92,.12)}
.input-bar button{padding:12px 22px;border-radius:10px;border:none;background:var(--accent);color:#0a0e18;font-weight:700;cursor:pointer;font-size:14px;transition:.15s}
.input-bar button:hover{filter:brightness(1.08)}
.input-bar button:disabled{opacity:.4;cursor:not-allowed}
.mic-btn{padding:0!important;width:44px;height:44px;flex-shrink:0;border-radius:10px!important;border:1px solid var(--border)!important;background:#0e1422!important;color:var(--muted)!important;display:flex;align-items:center;justify-content:center}
.mic-btn:hover{filter:none!important;color:var(--text)!important;border-color:#3a4564!important}
.mic-btn.rec{color:#fff!important;background:var(--red)!important;border-color:var(--red)!important;animation:micpulse 1.3s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.5)}50%{box-shadow:0 0 0 9px rgba(248,113,113,0)}}

/* ---------- Signals ---------- */
.signal-list{flex:1;overflow-y:auto;padding:8px}
.sig{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;margin-bottom:4px;transition:.12s;position:relative}
.sig:hover{background:var(--panel2)}
.sig .bar{width:3px;align-self:stretch;border-radius:3px;background:var(--c,#4fc3f7);flex-shrink:0}
.sig-main{flex:1;min-width:0}
.sig-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sym{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;color:var(--c,#4fc3f7);background:color-mix(in srgb,var(--c,#4fc3f7) 16%,transparent)}
.action{font-weight:700;padding:2px 7px;border-radius:5px;font-size:10px;letter-spacing:.3px}
.action.open{background:rgba(52,211,153,.16);color:var(--green)}
.action.close{background:rgba(248,113,113,.16);color:var(--red)}
.action.skip{background:#2a2f3a;color:var(--muted)}
.sig-pat{font-size:12px;color:#c4c9d2;font-weight:600}
.sig-setup{font-size:11.5px;color:#aeb4c0;margin-top:3px;line-height:1.4}
.sig-setup .lab{color:var(--accent);font-weight:600}
.sig-sub{font-size:11px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl{font-weight:700;font-size:13px;flex-shrink:0}
.pnl.pos{color:var(--green)} .pnl.neg{color:var(--red)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#565d6a;gap:10px;text-align:center;padding:30px}
.empty svg{opacity:.4}

/* ===== Pulsante fluttuante (FAB) ===== */
.fab{position:fixed;right:24px;bottom:24px;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;border:none;background:var(--accent);color:#0a0e18;cursor:pointer;
  box-shadow:0 10px 28px rgba(203,166,92,.45);z-index:30;display:flex;align-items:center;justify-content:center;transition:.2s}
.fab:hover{transform:scale(1.06)}
.fab.hidden{opacity:0;pointer-events:none;transform:scale(.7)}

/* ===== Drawer chat ===== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.25s;z-index:40}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:440px;max-width:100vw;background:var(--panel);
  border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:50;box-shadow:-14px 0 44px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer.left{right:auto;left:0;border-left:none;border-right:1px solid var(--border);transform:translateX(-105%);box-shadow:14px 0 44px rgba(0,0,0,.5)}
.drawer.left.open{transform:none}
.hdr-btn{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:#1a2236;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:.15s}
.hdr-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Storico */
.st-body{flex:1;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch}
.st-tot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.st-tot .c{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.st-tot .l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.st-tot .v{font-size:18px;font-weight:700;margin-top:3px}
/* Legenda dei tre motori (sempre visibile nello storico e nell'hero) */
.eng-legend{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.eng-legend .eng-h{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:7px}
.eng-pills{display:flex;flex-wrap:wrap;gap:7px}
.eng-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:#141b2b;color:#cfd6e6}
.eng-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ec)}
.eng-pill.base{--ec:#5b9dff}
.eng-pill.rev{--ec:#c9a14a}
.eng-pill.orologio{--ec:#cba65c}
.eng-pill.reversione{--ec:#5ca8cb}
.eng-pill.crypto{--ec:#8c5ccb}
.eng-pill.on{outline:2px solid var(--ec);background:#1a2236}
.eng-pill.empty{opacity:.6}
.eng-soon{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:#2a3146;color:#aeb7cc;padding:1px 6px;border-radius:6px}
.eng-note{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.eng-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:6px;margin-left:6px;color:#0a0e18}
.eng-tag.base{background:#5b9dff}
.eng-tag.rev{background:#c9a14a}
.eng-tag.orologio{background:#cba65c}
.eng-tag.reversione{background:#5ca8cb}
/* IL MOTORE TREND. La chiave che il codice produce e' `trend`, e questa classe non
   esisteva: il cartellino restava SENZA sfondo, con il testo #0a0e18 del `.eng-tag`
   su pannello scuro — nero su nero, illeggibile.
   `crypto` e' il vecchio nome dello stesso motore (si legge Trend dalla v4.10) e
   prende lo STESSO colore: un motore, un colore. Prima erano due — viola qui, verde
   in ENG_COLORS — e la stessa cosa cambiava tinta a seconda di dove la guardavi.
   Il viola e' schiarito da #8c5ccb: col testo quasi nero del cartellino il contrasto
   era 4,14, sotto il minimo di 4,5. Ora e' 6,47. Resta nella famiglia viola (e non
   diventa verde) perche' verde e rosso in quest'app vogliono dire soldi. */
.eng-tag.crypto,.eng-tag.trend{background:#a984de}
.brk-eng{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:10px 0 4px;font-weight:700}
.eq-chart{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 10px 4px;margin-bottom:12px}
.eq-lbl{font-size:11px;color:var(--muted);margin-bottom:6px}
.eq-svg{width:100%;height:90px;display:block}
.rep-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rep-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:8px 12px;border-radius:8px;background:#1a2236;border:1px solid var(--border);color:var(--accent);text-decoration:none;white-space:nowrap;line-height:1.2}
.rep-link:hover{background:#232d46}
/* DOCUMENTI ORIGINALI: pulsante + descrizione; impila su mobile (niente inline grid-column che rompeva) */
.bt-docrow{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:8px 14px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center}
.bt-docrow:last-child{border-bottom:none}
.bt-docrow .bt-xs{font-size:12px;color:#aeb4c0;line-height:1.5}
@media(max-width:560px){
  .bt-docrow{grid-template-columns:1fr;gap:4px}
  .bt-docrow .rep-link{width:100%;justify-content:center}
  .rep-links{gap:9px}
  .rep-links .rep-link{flex:1 1 auto;justify-content:center;min-width:44%}
}
.acc-row{border:1px solid var(--border);border-radius:10px;margin-bottom:6px;overflow:hidden;background:var(--panel2)}
.acc-head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
.acc-head:hover{background:#222c44}
.acc-head .yr{font-weight:700;font-size:15px;min-width:54px}
.acc-head .meta{font-size:11px;color:var(--muted);flex:1}
.acc-head .pnl{font-weight:700;font-size:14px}
.acc-sub{padding:0 8px 8px}
.mn-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.mn-row:hover{background:#222c44}
.mn-row .nm{min-width:74px;color:var(--text);font-weight:600}
.mn-row .mt{flex:1;font-size:11px;color:var(--muted)}
.brk-lab{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:9px 10px 3px;font-weight:700}
.mn-row.sym{cursor:default;background:#1a2236}
.mn-row.sym:hover{background:#1a2236}
.mn-row.sym .nm{color:#6fb1ff}
.tr-row{padding:6px 10px;font-size:11.5px;color:#aeb4c0;border-top:1px solid var(--border)}
.tr-row .pp{font-weight:700}
.pos{color:var(--green)} .neg{color:var(--red)}
/* Stato mercato */
.mk-head{margin-bottom:10px}
.mk-block{margin-bottom:22px}
.mk-block:last-child{margin-bottom:0}
.mk-details{margin-top:12px;border-top:1px solid var(--border)}
.mk-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:11px 2px 6px;font-size:12px;font-weight:600;color:var(--muted);user-select:none}
.mk-details>summary::-webkit-details-marker{display:none}
.mk-details>summary:hover{color:#e8eefc}
.mk-details[open]>summary{color:#e8eefc}
.mk-details .mk-count{background:#1a2236;color:var(--muted);font-size:11px;padding:1px 8px;border-radius:999px}
.mk-details .mk-chevron{margin-left:auto;transition:transform .2s;font-size:13px}
.mk-details[open] .mk-chevron{transform:rotate(180deg)}
.mk-filter{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.mk-fbtn{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer}
.mk-fbtn.on{background:var(--accent);border-color:var(--accent);color:#0e1420}
.bias{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px}
.bias.buy{color:#5fd07f;background:rgba(95,208,127,.14)}
.bias.sell{color:#f1a06a;background:rgba(241,160,106,.14)}
.bias.wait{color:var(--muted);background:#1a2236}
.bias.soft{opacity:.9}
.verdict{margin-top:13px;padding:12px 14px;border-radius:11px;display:flex;align-items:center;gap:11px;border:1px solid}
.verdict .vi{font-size:22px;line-height:1}
.verdict .vt{font-size:15px;font-weight:800;letter-spacing:.3px}
.verdict .vr{font-size:12px;color:var(--muted);margin-top:2px}
.verdict.buy{background:rgba(95,208,127,.10);border-color:rgba(95,208,127,.38)}
.verdict.buy .vt{color:#5fd07f}
.verdict.sell{background:rgba(241,160,106,.10);border-color:rgba(241,160,106,.38)}
.verdict.sell .vt{color:#f1a06a}
.verdict.wait{background:#141b2b;border-color:var(--border)}
.verdict.wait .vt{color:#b9c2d6}
.chat-quota{margin:0 12px 10px;padding:9px 13px;border-radius:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;line-height:1.3;color:var(--muted);
  background:linear-gradient(180deg,#18212f,#131a27);border:1px solid var(--border);box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.chat-quota .cq-ico{font-size:15px;flex-shrink:0;line-height:1}
.chat-quota .cq-text{flex:1 1 auto;min-width:130px}
.chat-quota .cq-text b{color:#e8eefc;font-weight:700}
.chat-quota .cq-dots{display:flex;gap:5px;flex-shrink:0}
.chat-quota .cq-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .2s}
.chat-quota .cq-dots i.on{background:var(--accent);box-shadow:0 0 6px rgba(203,166,92,.5)}
.chat-quota .cq-cta{flex-shrink:0;margin-left:auto;padding:5px 13px;border-radius:999px;background:var(--accent);color:#0e1420;
  font-weight:800;font-size:12px;letter-spacing:.2px;text-decoration:none;white-space:nowrap}
.chat-quota.low{background:linear-gradient(180deg,rgba(241,160,106,.16),rgba(241,160,106,.05));border-color:rgba(241,160,106,.42);color:#f4b183}
.chat-quota.low .cq-text b{color:#f1a06a}
.chat-quota.low .cq-dots i.on{background:#f1a06a;box-shadow:0 0 6px rgba(241,160,106,.55)}
@media(max-width:430px){.chat-quota{gap:8px;padding:8px 11px;font-size:12px}.chat-quota .cq-text{min-width:100%;order:-1}}

/* ---------- LA SESSIONE OPERATIVA — dentro la conversazione ----------
   Rifatta il 03/08/2026. Prima era una fascia sopra la chat: su telefono rubava lo
   spazio alla conversazione e metteva il comando nel punto piu' lontano dal pollice.
   Adesso ci sono solo due cose: una RIGA DI LANCIO appoggiata sopra la tastiera, e
   dei MESSAGGI (`.sess-voce`) che sono messaggi come tutti gli altri — stessa
   larghezza, stesso scorrimento, stesso posto dove si guarda gia'. */
/* SU TELEFONO occupa tutta la riga (il pollice ringrazia), su SCRIVANIA no: misurato
   a 1920px, il pulsante veniva largo 1648 pixel. Un rettangolo d'oro lungo quanto lo
   schermo non si legge come un comando, si legge come un banner — e i banner si
   imparano a saltare. Si ferma dove finisce la colonna leggibile della chat. */
/* ---- L'INVITO SOTTO IL LOGO ----
   UNA porta grande e due domande piccole. La storia di questo blocco e' una sottrazione
   continua, ed e' andata bene ogni volta: prima sei chip di domande d'esempio (tutte
   uguali, nessuna che fosse il mestiere del prodotto), poi tre pulsanti, adesso uno solo
   grande — «Guidami live» — con sotto le due domande sul conto, che non costano un
   turno di modello. Le domande al modello sono sparite da qui perche' il mosaico qui
   sopra risponde gia', gratis, alla stessa curiosita'. */
.dw-azioni{display:flex;flex-direction:column;gap:9px;width:100%;max-width:420px;
  margin:16px auto 4px}
.dw-b{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  padding:13px 16px;border-radius:14px;font-family:inherit;transition:.16s;
  border:1px solid var(--border);background:linear-gradient(180deg,#18202f,#141b28)}
.dw-b b{font-size:14px;font-weight:800;letter-spacing:.2px}
.dw-b i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.45}
.dw-b.guida{border-color:rgba(61,220,151,.45);
  background:linear-gradient(180deg,rgba(61,220,151,.13),rgba(61,220,151,.04))}
.dw-b.guida b{color:var(--green)}
.dw-b.guida:hover{border-color:var(--green);
  background:linear-gradient(180deg,rgba(61,220,151,.2),rgba(61,220,151,.07))}
/* LE DUE DOMANDE SUL CONTO, sotto la porta grande. Deliberatamente piu' piccole:
   «Guidami live» e' il mestiere e deve restare la cosa piu' grande della schermata,
   queste due sono informazioni che si chiedono di passaggio. Affiancate perche' sono
   la stessa famiglia — e perche' su una riga sola non rubano altezza al mosaico. */
.dw-conto{display:flex;gap:8px;margin-top:2px}
.dw-c{flex:1 1 0;min-width:0;padding:9px 10px;border-radius:11px;cursor:pointer;
  border:1px solid var(--border);background:linear-gradient(180deg,#18202f,#141b28);
  color:var(--text);font-family:inherit;font-size:12.5px;font-weight:700;transition:.16s}
.dw-c:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:430px){.dw-c{font-size:12px;padding:9px 8px}}

/* «e posso anche fare tutto il resto»: senza questa riga, togliere le chip faceva
   sembrare Dock un'app di due pulsanti — cioe' meta' di quello che e'. */
.dw-oltre{max-width:460px;margin:14px auto 0;font-size:12px;line-height:1.55;
  color:var(--muted);text-align:center}
@media(max-width:430px){.dw-azioni{max-width:100%}.dw-b{padding:12px 14px}}

/* IL SELETTORE DEGLI AGENTI. Piccolo apposta: e' una scelta che si fa una volta e
   si dimentica, non un comando che si preme ogni giorno. Sta sopra i pulsanti perche'
   decide QUALI pulsanti si vedono — l'ordine di lettura segue l'ordine di causa. */
.sl-btn.conto{flex:1 1 auto;border-color:rgba(203,166,92,.32);color:var(--text);
  background:linear-gradient(180deg,#18202f,#141b28);font-weight:700}
.sl-btn.conto:hover{border-color:var(--accent)}
.sl-btn.conto .sl-ico{background:var(--muted);box-shadow:none}
.sess-lancio{display:flex;align-items:center;gap:8px;margin:0 12px 8px;
  max-width:620px;width:calc(100% - 24px)}
@media(min-width:900px){.sess-lancio{margin-left:12px}}
.sl-btn{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;min-height:42px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(203,166,92,.45);color:var(--accent);
  background:linear-gradient(180deg,rgba(203,166,92,.14),rgba(203,166,92,.05));
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.2px;transition:.15s}
.sl-btn:hover{background:linear-gradient(180deg,rgba(203,166,92,.22),rgba(203,166,92,.08))}
.sl-btn:disabled{opacity:.6;cursor:progress}
/* DUE COMANDI, non uno. «Guarda il campo» e' l'esplorazione, «Guidami live» e' il
   lavoro: stanno accanto perche' sono due passi dello stesso percorso, e il secondo
   non deve stare nascosto dentro una cartellina — da una chat appena aperta era
   irraggiungibile. Verde contro oro: il verde e' lo stesso della striscia viva, cosi'
   premendolo si capisce COSA si accende. */
.sl-btn.guida{flex:0 1 auto;border-color:rgba(61,220,151,.45);color:var(--green);
  background:linear-gradient(180deg,rgba(61,220,151,.13),rgba(61,220,151,.04))}
.sl-btn.guida:hover{background:linear-gradient(180deg,rgba(61,220,151,.22),rgba(61,220,151,.07));
  border-color:rgba(61,220,151,.65)}
.sl-btn.guida .sl-play{font-size:10px;line-height:1;flex-shrink:0}
.sl-btn.guida.acceso{background:linear-gradient(180deg,rgba(61,220,151,.26),rgba(61,220,151,.1));
  border-color:var(--green);color:#eafff5}
/* sui telefoni la riga va a capo invece di comprimere i due bersagli sotto il dito */
@media(max-width:520px){
  /* UNA RIGA SOLA, non due (06/08). Con `flex:1 1 100%` i due comandi andavano a capo
     e la riga costava 90px su uno schermo che ne ha 780: la meta' del prezzo di un
     grafico, per due bottoni. Stanno affiancati, e le parole di troppo («per me»)
     spariscono invece di mandare a capo il bottone. */
  .sess-lancio{flex-wrap:nowrap}
  .sl-btn{flex:1 1 0;padding:10px 8px;font-size:12.5px}
  .sl-btn.guida{flex:1 1 0}
  .sl-stato{flex:0 0 auto}
  .solo-largo{display:none}
}
.sl-btn .sl-ico{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 8px rgba(203,166,92,.6)}
.sl-btn:disabled .sl-ico{animation:sessLavoro 1.2s ease-in-out infinite}
@keyframes sessLavoro{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sl-btn:disabled .sl-ico{animation:none}}
/* la pastiglia di cio' che sto guardando: e' l'UNICO pezzo che sopravvive a un
   ricaricamento, quindi e' li' che lo stato di una veglia deve vivere */
.sl-stato{flex-shrink:0;padding:9px 13px;min-height:42px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);background:#161d2e;color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:700;transition:.15s}
.sl-stato:hover{border-color:var(--accent);color:var(--text)}
.sl-stato.veglia{color:var(--accent);border-color:rgba(203,166,92,.5);
  background:linear-gradient(180deg,rgba(203,166,92,.14),rgba(203,166,92,.05))}
@media(max-width:430px){
  .sess-lancio{margin:0 10px 7px;gap:6px}
  .sl-btn{font-size:12.5px;padding:10px 10px}
  .sl-stato{padding:9px 10px;font-size:11.5px}
}

/* ---- LA SESSIONE DAL VIVO: un pannello, non una riga ----
   Sopra il grafico dello strumento a fuoco (dove siamo, cosa aspettiamo, la
   previsione), sotto una riga per ogni strumento sorvegliato. Regola che non cambia:
   mentre e' acceso non si deve MAI poter dubitare che stia lavorando — i pallini
   battono e i pip scendono da soli. Un'attesa senza un numero che si muove e'
   indistinguibile da un'app bloccata, e a quel punto si entra a caso. */
/* IL PANNELLO E' UNA COLONNA, e chi cede e' l'ELENCO, non il disegno. Misurato:
   col pannello a 160px e il grafico che ne chiede 216, l'svg finiva FUORI e
   `overflow:hidden` lo tagliava via — restavano la didascalia e le righe, cioe'
   «mi manda messaggi ma non mostra nessun disegno». Il grafico ora non si stringe
   (`flex:0 0 auto`); a stringersi e' l'elenco, che ha il suo scorrimento e quindi
   non perde niente. */
/* `flex:0 0 auto` — il pannello NON cede. Misurato: la colonna aveva spazio (742px
   per 708 di contenuto), ma i messaggi sono `flex:1 1 auto` con una base grande
   quanto la conversazione, quindi si prendevano tutto e il pannello si stringeva a
   160px tagliando via il grafico. A cedere devono essere i MESSAGGI, che scorrono
   gia' e hanno il loro pavimento: perdere due righe di chat non toglie niente,
   perdere il disegno toglie la ragione per cui si e' aperta la sessione. */
.sess-live{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;
  margin:0 12px 8px;max-width:620px;width:calc(100% - 24px);
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(61,220,151,.42);
  background:linear-gradient(180deg,rgba(61,220,151,.10),rgba(61,220,151,.03))}
/* IL DISEGNO NELLA CONVERSAZIONE (06/08). `.sv-grafico` non esiste piu' nel pannello:
   il grafico vive dentro la card del piano, che e' un messaggio come gli altri. Cosi'
   c'e' UNO scorrimento solo e la chat non perde il suo spazio. */
.sess-graf{margin:8px 0 2px}
.sess-graf:empty{display:none}
.sess-graf .dock-chart{margin:0;border:none;box-shadow:none;background:transparent;padding:0}
.sess-graf .dock-chart + .dock-chart{margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.07)}
/* IL QUADRO DELLE 20 ORE, dietro un tocco su telefono: la lente e' quella con cui si
   agisce, il quadro e' contesto. Chiuso pesa una riga invece di 190px. */
.sv-quadro{margin-top:6px}
.sv-quadro>summary{cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0;
  list-style:none}
.sv-quadro>summary::-webkit-details-marker{display:none}
.sv-quadro>summary::before{content:'▸ ';color:var(--accent)}
.sv-quadro[open]>summary::before{content:'▾ '}
.sv-quadro>summary:hover{color:var(--text)}
/* LA DIDASCALIA CHE SI CHIUDE. Il testo non si accorcia (dice da dove vengono i
   numeri): si mette dietro una riga sola quando lo schermo e' stretto e la nota e'
   lunga — misurato: otto righe di didascalia sotto un disegno alto quattro. */
.gnota-chiusa>summary{cursor:pointer;list-style:none;font-size:11.5px;color:var(--muted);
  padding:2px 0}
.gnota-chiusa>summary::-webkit-details-marker{display:none}
.gnota-chiusa>summary::before{content:'▸ ';color:var(--accent)}
.gnota-chiusa[open]>summary::before{content:'▾ '}
/* DUE DISEGNI, non uno (05/08): la vista larga e sotto la LENTE su M1, dove il pip fra
   la riga d'attesa e il take profit si vede. Il tetto con lo scorrimento c'e' perche'
   il pannello NON deve rubare il pavimento alla chat: e' la stessa lezione di quando
   il grafico singolo finiva tagliato — solo che qui a cedere e' l'altezza del riquadro
   dei disegni, che scorre, e non il disegno, che verrebbe amputato. */

/* IL PANNELLO CEDE, LA CHAT NO — la stessa regola gia' applicata al riquadro della
   sessione. Con tre strumenti e il grafico ai messaggi restavano 134px: due righe.
   Qui si stringe l'elenco (che ha il suo scorrimento, quindi non perde niente) e piu'
   sotto la chat prende un pavimento a OGNI larghezza, non solo su telefono. */
.sv-righe{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  max-height:150px;overflow-y:auto}
.sv-riga{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.05);transition:background .15s}
.sv-riga:first-child{border-top:none}
.sv-riga:hover{background:rgba(255,255,255,.04)}
/* a FUOCO = quello disegnato sopra. Senza un segno, con tre righe non si capisce di
   chi sia il grafico — e un grafico attribuito allo strumento sbagliato e' peggio di
   nessun grafico. */
.sv-riga.fuoco{background:rgba(61,220,151,.10);box-shadow:inset 3px 0 0 var(--green)}
.sv-riga .sv-pulse{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--green);animation:svBattito 1.6s ease-out infinite}
@keyframes svBattito{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}
  70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
@media (prefers-reduced-motion:reduce){.sv-riga .sv-pulse{animation:none}}
/* collegamento perso: il battito si ferma e il colore vira. Il silenzio, qui, si
   leggerebbe come «sta ancora aspettando» — la bugia piu' facile da dire. */
.sv-riga.muto .sv-pulse{background:#f1a06a;animation:none}
.sv-riga.muto .sv-titolo{color:#f4b183}
/* DENTRO = soldi a mercato: il pallino diventa d'oro, la riga si scalda appena.
   ESCI = il momento in cui la riga deve URLARE piu' delle altre: battito veloce e
   rosso — e' l'unica condizione in cui l'attesa e' un errore. */
.sv-riga.dentro{background:rgba(203,166,92,.07)}
.sv-riga.dentro .sv-pulse{background:var(--accent)}
.sv-riga.esci{background:rgba(241,112,123,.10)}
.sv-riga.esci .sv-pulse{background:var(--red);animation:svBattito .8s ease-out infinite}
.sv-riga.esci .sv-titolo{color:var(--red)}
.sv-corpo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.sv-titolo{font-size:12.5px;font-weight:800;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-dett{font-style:normal;font-size:11px;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-stop{flex-shrink:0;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:#161d2e;color:var(--muted);
  font-family:inherit;font-size:11px;line-height:1}
.sv-stop:hover{color:var(--text);border-color:var(--accent)}
@media(max-width:430px){
  .sess-live{margin:0 10px 7px}
  .sv-righe{max-height:150px}
  .sv-titolo{font-size:12px}
}

/* ---- i messaggi della sessione: sono messaggi, con un filetto che dice da dove
        vengono (lo stesso segno dei grafici di Dock: dato nostro, non frase del
        modello). Tutto il resto lo eredita da `.msg.bot`. ---- */
.sess-voce{border-left:3px solid var(--accent)}
.sess-voce>b:first-child{display:block;font-size:13.5px;margin-bottom:2px}
.sess-voce .sv-sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:6px}
.sess-voce .sess-perche{margin:6px 0 0;padding-left:17px;font-size:12px;color:var(--muted);line-height:1.55}
.sc-verso{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:2px 8px;border-radius:999px;vertical-align:2px;
  background:rgba(139,148,171,.16);color:var(--muted)}
.sc-verso.su{background:rgba(61,220,151,.14);color:var(--green)}
.sc-verso.giu{background:rgba(241,112,123,.14);color:var(--red)}
/* L'AVVISO DI DEBOLEZZA. Sta SOPRA il piano, non sotto: una riga d'onesta' messa in
   fondo si legge dopo aver gia' deciso. Arancione e non rosso — non e' un errore, e'
   una misura che non aiuta. */
.sess-debole{margin-top:8px;padding:9px 11px;border-radius:10px;font-size:12px;line-height:1.5;
  background:rgba(241,160,106,.12);border:1px solid rgba(241,160,106,.4);color:#f4b183}
.sess-debole b{display:block;color:#f4b183;font-size:12.5px;margin-bottom:3px}
.sess-debole span{display:block;color:var(--muted)}
.sp-riga .sp-nota{display:block;font-style:normal;font-weight:500;font-size:11px;
  color:var(--muted);line-height:1.45;margin-top:2px}
.sess-piano{display:flex;flex-direction:column;gap:4px;font-size:12.5px;margin-top:8px;
  background:rgba(255,255,255,.03);border-radius:10px;padding:9px 11px}
.sp-riga{display:flex;gap:10px;align-items:baseline}
.sp-riga span{flex:0 0 38%;color:var(--muted);font-size:11.5px}
.sp-riga b{flex:1 1 auto;min-width:0;font-weight:700}
.sp-riga b i{font-style:normal;font-weight:600;color:var(--muted);font-size:11px}
.sess-cand{border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:#131a29;
  margin-top:8px}
.sess-cand .sc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sess-cand .sc-top b{font-size:14px;font-weight:800}
.sess-cand ul{margin:7px 0 9px;padding-left:17px;font-size:12px;color:var(--muted);line-height:1.55}
.sess-fuori{font-size:11.5px;color:var(--muted);margin-top:9px}
.sess-fuori summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:28px;
  display:flex;align-items:center}
.sess-fuori ul{margin:6px 0 0;padding-left:17px;line-height:1.65}
.sess-fuori b{color:#b9c2d6;font-weight:600}
.sess-azioni{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
/* i bottoni dentro un messaggio: pieni su telefono (il dito non prende un bordino) */
.sess-b{padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:#182034;
  color:var(--text);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  min-height:38px;transition:.15s}
.sess-b:hover{filter:brightness(1.15)}
.sess-b.prim{background:var(--accent);border-color:var(--accent);color:#0a0e18}
.sess-b:disabled{opacity:.5;cursor:not-allowed}
.sess-cand .sess-b{width:100%}
@media(max-width:560px){
  .sp-riga span{flex:0 0 42%}
  .sess-azioni .sess-b{flex:1 1 auto}
}
/* il puntino sulla voce Dock quando una veglia e' armata (vale in ogni schermata) */
.nav-item.veglia{position:relative}
.nav-item.veglia::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 7px rgba(203,166,92,.75);top:9px;right:9px}
@media(max-width:900px){.nav-item.veglia::after{top:5px;right:calc(50% - 16px)}}
.equity-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:0 0 16px}
.equity-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);margin-bottom:8px}
.equity-head .equity-delta{font-weight:800;font-size:13px;text-align:right;line-height:1.25}
.equity-head .equity-delta .eq-sub{display:block;font-style:normal;font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.2px}
.chart-box{width:100%;height:120px}
/* il markdown dei resoconti: gli stessi stili della chat, che erano legati a .msg.bot */
.rd-risk-pos{margin-top:6px;font-size:12.5px;line-height:1.45;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.rd-risk-pos .u{opacity:.72}
.rd-risk-open{background:rgba(255,86,86,.10);border-color:rgba(255,86,86,.32)}
.rd-risk-para{background:rgba(120,170,255,.08);border-color:rgba(120,170,255,.24)}
.rd-approx{font-style:normal;font-size:11px;opacity:.6}
.rd-lotwrap{margin-top:7px}
.rd-lotbtn{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(203,166,92,.42);background:rgba(203,166,92,.10);color:var(--accent);font-weight:700;font-size:12.5px;cursor:pointer}
.rd-lotbtn:hover{background:rgba(203,166,92,.18)}
.rd-lotto{margin-top:7px;font-size:12.5px;line-height:1.45}
.rd-lot-ok{padding:8px 10px;border-radius:8px;background:rgba(80,200,140,.10);border:1px solid rgba(80,200,140,.28)}
.rd-lot-no{padding:8px 10px;border-radius:8px;background:rgba(255,86,86,.10);border:1px solid rgba(255,86,86,.30)}
.rd-ask{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.rd-askrow{display:flex;gap:6px;margin-top:6px}
.rd-capin{flex:1;min-width:0;padding:7px 9px;border-radius:7px;border:1px solid var(--border);background:#0e1422;color:#e8eaee;font-size:13px}
.rd-capok{padding:7px 14px;border-radius:7px;border:1px solid rgba(203,166,92,.42);background:rgba(203,166,92,.14);color:var(--accent);font-weight:700;cursor:pointer}
.rd-capchg{margin-top:6px;background:none;border:none;padding:0;color:var(--muted);font-size:11.5px;text-decoration:underline;cursor:pointer;display:block}
.rd-asklbl{font-weight:700;margin-bottom:2px}
.rd-capccy{padding:7px 6px;border-radius:7px;border:1px solid var(--border);background:#0e1422;color:#e8eaee;font-size:13px}
.rd-capfix{align-self:center;color:var(--muted);font-size:12.5px;padding:0 2px}
.rd-err{margin-top:5px;color:#ff8a8a;font-size:11.5px}
.rd-timer{margin-top:7px;font-size:13px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.rd-timer.rd-timer-in{color:#d9c48a}
.rd-brk{font-style:normal;font-size:10px;color:var(--muted);font-weight:500}
.rd-badge{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:6px;white-space:nowrap}
.rd-badge.on{background:rgba(61,220,151,.16);color:var(--green)}
.rd-badge.el{background:rgba(203,166,92,.16);color:var(--accent)}
.rd-badge.off{background:#222b3d;color:var(--muted)}
.rd-badge.no{background:rgba(224,101,95,.16);color:#e0655f}
/* BARRA DELL'OSCILLATORE nelle card segnali (31/07). Prefisso rdo- e NON osc-: quel
   nome era gia' preso dalle card oscillatore del Mercato (.osc-wrap = flex column) e la
   collisione sfasciava la barra su schermo stretto (trovata 01/08). */
.rdo-wrap{margin:6px 0 2px;width:100%}
.rdo-track{position:relative;height:10px;border-radius:6px;background:#222b3d}
.rdo-zone{position:absolute;top:0;bottom:0;border-radius:6px}
.rdo-zone.zb{left:0;background:rgba(61,220,151,.28)}
.rdo-zone.zs{background:rgba(224,101,95,.28)}
.rdo-tick{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.35)}
.rdo-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px rgba(203,166,92,.8);transition:left .6s ease}
.rdo-dot.hot{background:var(--green);box-shadow:0 0 8px rgba(61,220,151,.9)}
.rdo-lbl{display:flex;justify-content:space-between;gap:4px;font-size:10px;color:var(--muted);margin-top:3px}
.rd-card.rd-off{opacity:.72}
.rd-card.rd-wait{border-color:rgba(203,166,92,.32)}
.rd-card.rd-no{border-color:rgba(224,101,95,.35);opacity:.88}
.rd-click{cursor:pointer;transition:transform .1s,box-shadow .1s}
.rd-click:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.rd-hint{margin-top:8px;font-size:10.5px;color:var(--muted);text-align:right}
/* campanellina promemoria, di fianco al badge "In operazione" (ex bottone in card) */
.rd-bell{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:transparent;font-size:13px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;opacity:.8;margin-left:auto;margin-right:7px}
.rd-bell:hover{border-color:var(--accent);opacity:1}
.rd-bell.on{border-color:var(--green);background:rgba(61,220,151,.14);opacity:1;cursor:default}
.rd-bell~.rd-badge{margin-left:0}
.alarm-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(120,10,15,.55);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:20px;animation:alarmpulse 1s infinite}
@keyframes alarmpulse{0%,100%{background:rgba(150,12,18,.42)}50%{background:rgba(220,20,28,.72)}}
.alarm-box{background:var(--panel);border:2px solid var(--red);border-radius:18px;max-width:420px;width:100%;padding:26px 22px;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.alarm-emoji{font-size:40px;animation:alarmpulse2 .7s infinite}
@keyframes alarmpulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.alarm-title{font-size:26px;font-weight:900;color:var(--red);letter-spacing:1px;margin:6px 0}
.alarm-sub{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:18px}
.alarm-btn{width:100%;padding:14px;border:0;border-radius:11px;background:var(--green);color:#08160e;font-weight:900;font-size:15px;cursor:pointer}
.alarm-btn:hover{filter:brightness(1.06)}
.sd-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(6,9,16,.72);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px}
.sd-box{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:18px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.sd-sym{font-size:18px;font-weight:800}
.sd-sub{font-size:12px;color:var(--muted);margin-top:2px}
.sd-x{background:#1a2236;border:1px solid var(--border);color:var(--muted);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:14px;flex-shrink:0}
.sd-x:hover{color:var(--text)}
.sd-kpis{display:flex;gap:10px;margin:0 0 14px}
.sd-kpis>div{flex:1;background:#0f1420;border:1px solid var(--border);border-radius:10px;padding:9px 8px;text-align:center}
.sd-kpis b{display:block;font-size:17px;color:var(--accent)}
.sd-kpis b.sd-stars{font-size:15px;letter-spacing:1px}
.sd-kpis span{font-size:10px;color:var(--muted)}
.sd-sec{margin:0 0 13px}
.sd-sec-t{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px}
.sd-sec-b{font-size:13px;line-height:1.55;color:#c7cede}
.sd-list{margin:0;padding-left:0;list-style:none}
.sd-list li{position:relative;padding:0 0 0 18px;margin:6px 0;font-size:13px;line-height:1.5;color:#c7cede}
.sd-list li::before{content:'•';position:absolute;left:3px;top:-1px;color:var(--accent);font-weight:800}
.sd-brief{background:linear-gradient(180deg,rgba(203,166,92,.12),rgba(203,166,92,.04));border:1px solid rgba(203,166,92,.32);border-radius:12px;padding:12px 14px;margin-top:6px;position:relative}
.sd-brief-t{font-size:11.5px;font-weight:800;color:var(--accent);margin-bottom:5px}
.sd-brief-b{font-size:13px;line-height:1.55;color:#e7ecf6}
.sd-copy{margin-top:9px;padding:6px 12px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:8px;font-weight:700;font-size:12px;cursor:pointer}
.sd-copy:hover{background:rgba(203,166,92,.14)}
/* ====== TESTATA DEL CONTO in Dashboard (01/08) ==============================
   PREFISSO chd- e non acc-: `.acc-head` esisteva GIA' nel CSS (riga ~376, le righe del
   track record annuale) ed era `display:flex` — la collisione mandava il chip del punto
   di partenza a destra in una colonna stretta. Terza collisione di nomi in due giorni:
   quando si aggiunge un blocco, si controlla che il nome sia libero. */
.chd-box{display:block;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--border);border-radius:14px;padding:13px 15px;margin:0 0 14px}
.chd-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chd-id{flex:1 1 180px;min-width:0}
.chd-name{font-size:16px;font-weight:800;letter-spacing:.2px;color:var(--text);line-height:1.25}
.chd-desc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.chd-sw{flex:0 0 auto}
.chd-sw .sc-b{white-space:nowrap}
/* tolta la riga del nome (ora sta nella testata), l'anteprima di ruolo e i chip
   diventano la PRIMA cosa del riquadro: senza questo restava sopra il loro stacco,
   cioe' undici pixel di vuoto in cima al riquadro. */
.chd-vista:first-child{margin-top:0}
#conto-sw-overview:empty + .chd-meta{margin-top:0}
.chd-vista{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.06)}
.chd-vlbl{font-size:11px;font-weight:700;color:#d29922;letter-spacing:.2px;white-space:nowrap}
.chd-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.chd-meta:empty{display:none}
.chd-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;line-height:1.35;
  padding:7px 11px;border-radius:9px;border:1px solid transparent;background:#161d2e;min-width:0}
.chd-chip .ico{font-size:12.5px;line-height:1;flex:0 0 auto}
.chd-chip b{font-variant-numeric:tabular-nums;white-space:nowrap}
.chd-chip.start{color:var(--accent);background:rgba(203,166,92,.10);border-color:rgba(203,166,92,.28)}
.chd-chip.ref{color:var(--muted)}
.chd-chip.ref a{color:var(--accent);text-decoration:none;font-weight:700;white-space:nowrap}
.chd-chip.ref a:hover{text-decoration:underline}
/* TABLET E TELEFONO: il selettore va a tutta riga come GRIGLIA (colonne uguali, testo
   su una riga sola), l'anteprima di ruolo diventa 4 colonne pari. Niente parole spezzate
   a meta' dentro i bottoni: le etichette sono gia' corte (le accorcia renderContoSw). */
@media(max-width:720px){
  .chd-box{padding:12px;border-radius:12px}
  .chd-top{align-items:flex-start}
  .chd-name{font-size:15px}
  .chd-sw{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px}
  .chd-sw .sc-b{text-align:center;padding:8px 6px;font-size:12px}
  .chd-vista{flex-direction:column;align-items:stretch;gap:7px}
  .chd-vista .vista-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin-left:0;gap:2px}
  .chd-vista .vista-sw .sc-b{text-align:center;padding:7px 2px;font-size:10.5px}
  .chd-chip{width:100%}
}
/* ====== RETE DI SICUREZZA RESPONSIVE (01/08) ================================
   Nessuna schermata deve scorrere in orizzontale: le tabelle hanno il LORO scroll.
   NIENTE white-space:normal sui segmented (spezzava le etichette a meta' parola). */
.scope-sw,.vista-sw{max-width:100%}
.rc-result,.rc-result .rcr-row{max-width:100%;min-width:0}
.rc-result .rcr-sym,.rc-result .rcr-val{min-width:0;overflow-wrap:anywhere}
.pos-sort{max-width:100%}
@media(max-width:600px){
  html,body{overflow-x:hidden}
  .rc-result .rcr-row{flex-direction:column;gap:2px}
  .rdo-lbl{font-size:9px}
  .rdo-lbl span:first-child,.rdo-lbl span:last-child{display:none}
  .htab-wrap{max-height:60vh}
  .pos-sort{margin-left:0;width:100%}
  .pos-sort button{flex:1;text-align:center}
}
/* ====== QUANTO SI MUOVERA' — sezione Mercato (01/08) ========================
   L'unica previsione del progetto: l'AMPIEZZA del movimento, misurata sui giorni
   passati simili a questo. Blu-ghiaccio di proposito: verde/rosso vorrebbero dire
   direzione, e la direzione qui non esiste. */
.bd-box{margin-top:12px;padding:13px 15px;border-radius:12px;
  background:linear-gradient(180deg,rgba(90,176,255,.10),rgba(90,176,255,.03));
  border:1px solid rgba(90,176,255,.28)}
.bd-head{font-size:12.5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bd-head .bd-sub{font-size:10.5px;color:var(--muted);font-weight:400}
/* i due giorni affiancati, con la variazione in mezzo */
.bd-duo{display:flex;align-items:center;gap:10px;margin:10px 0 4px;flex-wrap:wrap}
.bd-day{flex:1 1 110px;min-width:0;display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:8px 11px}
.bd-lbl{font-size:9.5px;font-weight:800;letter-spacing:.8px;color:var(--muted)}
.bd-why{font-size:10.5px;color:var(--muted)}
.bd-pip{font-size:21px;font-weight:800;letter-spacing:.2px;color:#8cc6ff;
  font-variant-numeric:tabular-nums;line-height:1.15}
.bd-pip em{font-size:11px;font-style:normal;font-weight:600;color:var(--muted);margin-left:4px}
.bd-arrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:15px;font-weight:800;min-width:56px}
.bd-arrow span{font-size:11.5px;font-variant-numeric:tabular-nums}
.bd-up{color:#8cc6ff}
.bd-dn{color:#9aa4bb}
.bd-flat{color:var(--muted)}
.bd-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:8px}
.bd-verso{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:8px;background:#161d2e}
/* la spiegazione a parole: e' il pezzo che rende il numero comprensibile */
.bd-say{margin-top:8px;font-size:12px;line-height:1.6;color:var(--text)}
.bd-say b{color:#8cc6ff}
.bd-bar{position:relative;height:7px;border-radius:5px;background:#222b3d;margin:10px 0 5px;overflow:hidden}
.bd-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  background:linear-gradient(90deg,rgba(90,176,255,.45),#5ab0ff)}
.bd-note{font-size:11px;color:var(--muted);line-height:1.45}
.bd-warn{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;color:var(--muted);line-height:1.5}
@media(max-width:600px){
  .bd-box{padding:12px}
  .bd-duo{gap:8px}
  .bd-day{flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px}
  .bd-day .bd-why{flex:1 1 100%}
  .bd-pip{font-size:19px}
  .bd-arrow{flex-direction:row;gap:8px;width:100%;justify-content:center}
}
/* Pulsante «Calcola» del lotto (01/08): oro pieno, coerente col segmented control */
.rc-go{border:0;border-radius:9px;background:var(--accent);color:#141927;font-weight:800;
  font-size:12px;padding:6px 14px;cursor:pointer;box-shadow:0 1px 8px rgba(203,166,92,.3);
  transition:filter .15s ease}
.rc-go:hover{filter:brightness(1.08)}
.rc-hint.ok{color:var(--green)}
/* RISULTATO del calcolo lotto (01/08): riga per ordine aperto, tutto sotto il bottone */
.rc-result{flex-basis:100%;margin-top:8px;padding:9px 12px;background:#161d2e;
  border:1px solid var(--border);border-radius:10px;font-size:12.5px}
.rc-result .rcr-title{font-weight:700;margin-bottom:6px}
.rc-result .rcr-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.rc-result .rcr-row:last-of-type{border-bottom:0}
.rc-result .rcr-val b{font-variant-numeric:tabular-nums}
.rc-result .rcr-val em{color:var(--accent);font-style:normal;font-size:11px}
.rc-result .rcr-note{margin-top:7px;font-size:11px;color:var(--muted);line-height:1.45}
/* ORDINAMENTO operazioni aperte (01/08): segmented control — pillola scura, segmento
   attivo in oro. I vecchi bottoni grezzi stonavano accanto al titolo della sezione. */
.pos-sort{margin-left:auto;display:inline-flex;align-items:center;gap:2px;padding:2px;
  background:#161d2e;border:1px solid var(--border);border-radius:10px;font-weight:400}
/* min-height 24: con `padding:4px` e testo da 11px venivano alti 22, sotto il minimo
   sotto il quale nemmeno un mouse ci prende alla prima. Due pixel, e il collaudo
   smette di avere ragione. */
.pos-sort button{border:0;background:transparent;color:var(--muted);font-size:11px;
  min-height:24px;
  font-weight:700;letter-spacing:.2px;padding:4px 12px;border-radius:8px;cursor:pointer;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;white-space:nowrap}
.pos-sort button:hover{color:var(--text)}
.pos-sort button.on{background:var(--accent);color:#141927;
  box-shadow:0 1px 8px rgba(203,166,92,.35)}
/* MOBILE (01/08): il selettore va a tutta riga sotto il titolo, i due segmenti si
   dividono lo spazio; la barra dell'oscillatore asciuga le etichette (via gli estremi
   0/100: le zone colorate li dicono gia'); le tabelle sticky un filo piu' basse. */
@media(max-width:600px){
  .pos-sort{margin-left:0;width:100%}
  .pos-sort button{flex:1;text-align:center}
  .rdo-lbl{font-size:9px}
  .rdo-lbl span:first-child,.rdo-lbl span:last-child{display:none}
  .htab-wrap{max-height:60vh}
}
/* La tabella scorre DENTRO il suo riquadro (01/08): con lo scroll di pagina lo sticky
   dell'intestazione era inerte (l'overflow-x creava il contesto ma non scrollava in
   verticale). Con l'altezza massima, thead resta incollato in alto e tfoot in basso —
   vale per Storico, Operazioni aperte in Dashboard e la card Backtest dei Segnali. */
/* SI SCORRE, E SI VEDE CHE SI SCORRE. La tabella e' larga 1.128px dentro un
   riquadro da 380 sul telefono: scorre come deve (mai la PAGINA), ma senza un
   segno l'ultima colonna tagliata dal bordo si legge come un difetto invece che
   come «continua di la'». La sfumatura a destra e' lo stesso richiamo che l'app
   usa gia' per le file di linguette. */
.htab-wrap{overflow:auto;max-height:70vh;position:relative;
  background:linear-gradient(90deg,var(--bg) 30%,transparent) left/28px 100% no-repeat,
             linear-gradient(270deg,var(--bg) 30%,transparent) right/28px 100% no-repeat;
  background-attachment:local,local}
.htab{width:100%;border-collapse:collapse;font-size:12.5px}
.htab th{text-align:right;color:var(--muted);font-weight:600;padding:7px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2}
.htab tfoot td{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--border)}
.htab th:first-child,.htab th:nth-child(2),.htab th:nth-child(3){text-align:left}
.htab td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.05);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.htab td:first-child,.htab td:nth-child(2),.htab td:nth-child(3){text-align:left}
.htab tbody tr:hover{background:#161e30}
.price-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.price-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;margin-bottom:10px;flex-wrap:wrap;gap:6px}
.price-head .ph-sub{font-size:11px;color:var(--muted);font-weight:500}
#price-chart{width:100%;height:300px}
@media(max-width:600px){#price-chart{height:240px}}
/* il riquadro del grafico a candele: sta DENTRO #price-chart (o #mkt-candele, il
   ripiego del pannello Mercato) e gli lascia la riga della dichiarazione (passo M1 +
   eta'). Senza altezza propria autoSize misurerebbe zero e non comparirebbe niente.
   L'altezza NON si calcola a mano (era height:calc(100% - 22px)): su telefono la
   didascalia va a capo, diventa due righe e il disegno sbordava di dieci pixel.
   Colonna flessibile: la riga si prende quello che le serve, il grafico il resto. */
#price-chart,#mkt-candele{display:flex;flex-direction:column}
.pc-box{width:100%;flex:1 1 auto;min-height:0}
#mkt-candele{width:100%;height:300px}
@media(max-width:600px){#mkt-candele{height:240px}}
.mk-sym{font-size:20px;font-weight:800;letter-spacing:1px}
.mk-sub{font-size:11px;color:var(--muted);margin-top:2px}
.mk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.mk-chip{font-size:11px;font-weight:600;padding:4px 9px;border-radius:7px;border:1px solid var(--border)}
.mk-chip.pos{color:var(--green);background:rgba(61,220,151,.10)}
.mk-chip.neg{color:var(--red);background:rgba(241,112,123,.10)}
.mk-table{width:100%;border-collapse:collapse;font-size:13px}
.mk-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border)}
.mk-table td{padding:9px 8px;border-bottom:1px solid var(--border)}
.mk-table td.v{font-weight:700}
.mk-table td.mu{color:var(--muted)}
/* `.mu` serviva solo sulle celle; il ritmo dell'onda lo usa anche dentro le
   INTESTAZIONI (l'unità sotto il nome della colonna) e dentro una cella per il
   trattino di «non misurato». Senza questa riga restavano del colore normale,
   cioè l'unità pesava quanto il dato. */
.mk-table .mu{color:var(--muted)}
.mk-table th .mu{display:block;font-weight:400;font-size:9.5px;letter-spacing:0;text-transform:none}
.lvl{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;white-space:nowrap}
.lvl.alto{color:var(--accent);background:rgba(203,166,92,.14)}
.lvl.basso{color:#5ab0ff;background:rgba(90,176,255,.12)}
.lvl.media{color:var(--muted);background:#1a2236}
.osc-head{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.osc-head .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
.osc-wrap{display:flex;flex-direction:column;gap:10px}
.osc-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.osc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.osc-sym{font-weight:700;font-size:14px;letter-spacing:.5px}
.osc-val{font-weight:700;font-size:14px}
.osc-bar{position:relative;height:9px;border-radius:6px;background:linear-gradient(90deg,rgba(95,208,127,.30),rgba(127,176,255,.10) 25%,rgba(127,176,255,.10) 75%,rgba(241,160,106,.30))}
.osc-fill{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--bg)}
.osc-info{font-size:12px;color:var(--muted);margin-top:9px}
.osc-metrics{margin-top:11px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.osc-m{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.osc-m span{color:var(--muted)}
.osc-m b{font-weight:700;margin-left:12px}
.osc-legend{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid var(--border)}
.drawer-title{flex:1;font-weight:700;font-size:15px}
.drawer-title .scope{color:var(--accent);font-weight:600}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:#1a2236;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.icon-btn:hover{background:#232d46;color:var(--text)}
.icon-btn.primary{background:var(--accent);border-color:var(--accent);color:#0a0e18}
/* cronologia */
.history{flex:1;overflow-y:auto;padding:8px;-webkit-overflow-scrolling:touch}
.hist-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:.12s}
.hist-item:hover{background:var(--panel2)}
.hist-main{flex:1;min-width:0}
.hist-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-date{font-size:11px;color:var(--muted);margin-top:2px}
.hist-del{background:none;border:none;color:#566;cursor:pointer;font-size:15px;padding:4px;flex-shrink:0;border-radius:6px}
.hist-del:hover{color:var(--red);background:rgba(248,113,113,.12)}
.hist-empty{color:#565d6a;text-align:center;padding:40px 20px;font-size:13px}

/* ---------- Grafo dell'organismo ---------- */
.graph-wrap{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;height:min(62dvh,560px);margin-top:8px}
#graph-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#graph-canvas.drag{cursor:grabbing}
.graph-zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.graph-zoom button{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:rgba(18,24,41,.92);color:var(--text);font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;backdrop-filter:blur(3px)}
.graph-zoom button:hover{background:#232d46;border-color:var(--accent);color:var(--accent)}
.graph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:20px}
.graph-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}
.gl-chip{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:4px 10px}
.gl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.gl-ring{width:11px;height:11px;border-radius:50%;border:2px solid var(--green);flex-shrink:0}
.graph-info{margin-top:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--muted);min-height:56px}
.graph-info .gi-t{font-size:14px;font-weight:800;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.graph-info .gi-pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:6px;background:#2a3550;color:#9fb3d8}
.gi-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* UN SOLO STRATO (dal 02/08 il grafo non carica piu' il backtest): il riquadro
   occupa tutta la riga. Lasciato a meta' con l'altra colonna vuota si leggeva
   come 'qui non abbiamo fatto niente'. */
.gi-cols.gi-cols-1{grid-template-columns:1fr}
.gi-col{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.gi-col h5{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:5px;font-weight:800}
.gi-col .v{font-size:13px;color:var(--text);font-weight:700}
.gi-col .s{font-size:11.5px;color:var(--muted);margin-top:2px}
/* LA NOTA DEL PANNELLO, rivestita (04/08). Era tutta ambra — fondo, bordo e TESTO —
   e sei note in fila facevano un muro d'oro in cui niente spiccava piu': quando ogni
   cosa e' un'evidenziazione, nessuna lo e'. Ora la nota e' un pannello neutro con un
   filo d'ambra sul fianco; l'ambra resta ai VALORI (i <b>), che e' il posto suo. */
.gi-note{margin-top:9px;font-size:12px;line-height:1.55;padding:8px 11px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--border);border-left:3px solid rgba(203,166,92,.55);
  color:var(--muted)}
.gi-note b{color:var(--text)}
.gi-warn{font-size:10.5px;font-weight:700;color:#e8a878;border:1px solid rgba(232,168,120,.5);
  border-radius:8px;padding:0 6px;white-space:nowrap}
/* Sui grafi larghi le note fluiscono su due colonne: sei riquadri impilati erano un
   metro di scorrimento, affiancati sono mezzo. `break-inside` tiene intera la nota. */
@media(min-width:1100px){
  .gi-flow{columns:2;column-gap:10px}
  .gi-flow>*{break-inside:avoid}
  .gi-flow>.gi-cols{column-span:all}
}

/* ── LE CARTE SOTTO IL GRAFO ──────────────────────────────────────────────────
   Un vestito solo per lettura pratica, bersagli e glossario: testata cliccabile con
   titolo maiuscoletto + RIASSUNTO a destra (la carta chiusa deve dire comunque
   l'essenziale), freccia che ruota, corpo che si apre. Niente animazioni di altezza:
   e' un <details>, si apre e basta — su un corpo da 1700px una transizione mentirebbe
   comunque. */
.gcarta{margin-top:12px;background:linear-gradient(180deg,var(--panel),#101625);
  border:1px solid var(--border);border-radius:14px;overflow:hidden}
.gcarta>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;
  cursor:pointer;list-style:none;user-select:none;transition:background .15s}
.gcarta>summary::-webkit-details-marker{display:none}
.gcarta>summary::before{content:'▸';color:var(--accent);font-size:11px;flex:0 0 auto;
  transition:transform .18s ease}
.gcarta[open]>summary::before{transform:rotate(90deg)}
.gcarta>summary:hover{background:rgba(203,166,92,.06)}
.gcarta[open]>summary{border-bottom:1px solid var(--border)}
.gc-tit{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text)}
/* il riassunto sta a destra e puo' accorciarsi: e' un'anteprima, non un dato da
   difendere — il dato intero sta dentro la carta */
.gc-sum{margin-left:auto;font-size:12px;color:var(--muted);text-align:right;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-sum b{color:var(--text);font-variant-numeric:tabular-nums}
.gc-body{padding:11px 16px 14px}
.gc-body .prat,.gc-body .gbers{margin-top:0}
.gc-body .gnum-ul{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){
  .gcarta>summary{padding:11px 13px}
  .gc-body{padding:9px 13px 12px}
  /* sul telefono il riassunto scende sotto il titolo invece di sparire nei puntini */
  .gcarta>summary{flex-wrap:wrap}
  .gc-sum{margin-left:21px;flex-basis:100%;text-align:left}
}
.gi-ask{margin-top:9px;padding:8px 13px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:9px;font-weight:700;cursor:pointer;font-size:12.5px}
@media(max-width:560px){.gi-cols{grid-template-columns:1fr}.graph-wrap{height:min(52dvh,420px)}}

/* ===== Tablet landscape ===== */
@media(max-width:1024px){
  .signals-panel{width:330px}
  .cards.account .card-val{font-size:20px}
}
/* ===== Tablet portrait & phone: impila, il body scorre ===== */
@media(max-width:860px){
  body{height:auto;min-height:100dvh;overflow-y:auto}
  header{position:sticky;top:0;z-index:20}
  .container{flex-direction:column;overflow:visible;height:auto;gap:12px}
  .panel{height:auto}
  .chat-panel{min-height:56dvh}
  /* DOCK: la chat riempie ESATTAMENTE lo schermo (sotto l'header, sopra la barra di nav),
     cosi' scorrono solo i messaggi. La barra di Dock e' l'header stesso (logo + comandi):
     una sola, gia' sticky, senza il doppione che c'era qui dentro. */
  /* `flex:none` NON e' decorativo: senza, questa altezza non veniva MAI applicata.
     `.section` porta `flex:1`, cioe' `flex-basis:0` + crescita — e in un contenitore
     flex verticale la base vince sull'altezza dichiarata. Finche' il contenuto stava
     dentro lo schermo non si vedeva; aggiungendo il pannello della sessione la colonna
     e' cresciuta a 1260px su una finestra di 1112, la pagina ha cominciato a scorrere
     e la barra di navigazione e' finita fuori (misurato a 834×1112 il 03/08/2026).
     Con la base tolta l'altezza vale davvero: la sezione sta esattamente fra header e
     barra, e a restringersi sono i MESSAGGI, che hanno il loro scorrimento. */
  #sec-assistant{flex:none;height:calc(100dvh - var(--hdr-h) - var(--navbar-h));
                 min-height:0;overflow:hidden}
  #sec-assistant .chat-panel{height:100%;min-height:0}
  /* stessa regola per l'Atlas: l'iframe deve stare ESATTAMENTE fra header e barra
     di navigazione, altrimenti la scena 3D finisce sotto la barra in basso */
  #sec-atlas{height:calc(100dvh - var(--hdr-h) - var(--navbar-h));min-height:0;overflow:hidden}
  /* IL PAVIMENTO DELLA CHAT. 170px sono circa quattro righe: sotto, la chat smette di
     essere una chat e diventa una fessura. E' questo numero a decidere quanto puo'
     prendersi il pannello della sessione, non il contrario. */
  #sec-assistant .messages{flex:1 1 auto;min-height:170px;overflow-y:auto}
  .signals-panel{width:100%}
  /* le sezioni a lista fluiscono col body (niente scroll interno che schiaccia) */
  #sec-signals,#sec-storico,#sec-mercato{overflow:visible;height:auto;min-height:0}
  #sec-signals .panel,#sec-storico .panel,#sec-mercato .panel{height:auto}
  .signal-list{max-height:none;overflow:visible}
  .sig-radar{margin:18px 0 16px}
  .sec-head{padding-bottom:6px}
  .cards{flex-wrap:wrap}
  .cards.account .card{flex:1 1 calc(33.333% - 8px)}
  .cards.stats-row .card{flex:1 1 calc(50% - 6px)}
  .input-bar input{font-size:16px}      /* >=16px: evita lo zoom automatico iOS */
  .tab{padding:9px 15px}                 /* target touch piu' ampi */
}
/* ---------- App shell: topbar + sidebar + content ---------- */
.topbar-title{flex:1;font-weight:700;font-size:15px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* In Dock: il logo prende il posto del titolo di testo e i comandi della chat stanno
   nella STESSA barra. Il titolo resta come spaziatore (vuoto) e spinge tutto a destra. */
.topbar-logo{height:26px;width:auto;display:block;flex-shrink:0;
  padding-left:14px;border-left:1px solid var(--border)}   /* filetto: PHAI | dock, non due loghi appiccicati */
.dock-ctl{display:flex;align-items:center;gap:8px;flex-shrink:0}
header:has(#page-logo:not([hidden])){gap:14px}
.shell{display:flex;flex:1;min-height:0;overflow:hidden}
.sidenav{display:flex;flex-direction:column;gap:4px;width:210px;flex-shrink:0;padding:14px 12px;border-right:1px solid var(--border);background:linear-gradient(180deg,#0f1525,#0a0e18);overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;text-align:left;width:100%;transition:.14s;position:relative}
.nav-item svg{width:19px;height:19px;flex-shrink:0}
.nav-item .nav-dock{width:21px;height:21px;flex-shrink:0}
.nav-item:hover{background:#161e30;color:var(--text)}
.nav-item.active{background:rgba(203,166,92,.14);color:var(--accent);border-color:rgba(203,166,92,.35)}
.nav-item .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:auto;animation:pulse 1.6s infinite;flex-shrink:0}
.content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.section{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.section .sec-inner{flex:1;overflow-y:auto;padding:16px 18px 24px;-webkit-overflow-scrolling:touch}
.sec-head{padding:12px 18px 0;flex-shrink:0}
/* ---------- Atlas 3D dentro l'app ----------
   L'iframe e BASTA: prende tutto lo spazio della sezione. La barra che stava qui
   sopra (sorgente + a tutto schermo) e' entrata nel menu' dell'Atlas — vedi il
   commento su #sec-atlas in index.html. L'Atlas si comporta come una schermata
   dell'app, non come un link che porta via. */
#sec-atlas{overflow:hidden}
.atlas-wrap{flex:1;min-height:0;position:relative;background:#02060b}
/* La Ricerca: stessa cornice dell'Atlas — l'iframe prende tutto lo spazio della
   sezione, e la pagina dentro si arrangia da sola (ha il suo foglio di stile). */
#sec-ricerca{overflow:hidden}
.ricerca-wrap{flex:1;min-height:0;position:relative;background:#080b13}
#ricerca-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#atlas-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Il Diario di Dock: stessa cornice di Atlas e Ricerca. La pagina dentro ha il suo
   foglio di stile e, con `?dentro=1`, non disegna la propria testata ne' la propria
   barra — quelle le mette l'app, una volta sola. */
#sec-diario{overflow:hidden}
.diario-wrap{flex:1;min-height:0;position:relative;background:var(--bg)}
#diario-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:20px 2px 9px}
.group-title:first-child{margin-top:2px}
/* Radar segnali */
.risk-calc{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:10px 0 4px;padding:9px 13px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(203,166,92,.06),rgba(0,0,0,0))}
.rc-title{font-weight:700;font-size:13px;color:var(--accent)}
.risk-calc label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.rc-bal{width:110px;background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:5px 9px;font-size:13px;font-weight:600}
.rc-profiles{display:flex;gap:4px}
.rc-pf{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;transition:.15s}
.rc-pf.on{background:var(--accent);color:#1a130a;border-color:var(--accent)}
.rc-hint{font-size:11.5px;color:var(--muted);margin-left:auto}
.rc-hint.warn{color:var(--accent)}
.sig-mylot{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:3px;display:flex;align-items:center;gap:6px}
.sig-mylot .u{font-weight:500;color:var(--muted);font-size:11px}
.sd-calc{margin-top:4px;padding:12px 14px;border:1px solid rgba(203,166,92,.3);border-radius:10px;background:rgba(203,166,92,.05)}
.sd-calc h4{margin:0 0 8px;font-size:13px;color:var(--accent)}
.sd-calc .big{font-size:24px;font-weight:800;color:var(--accent)}
.mkt-status{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 2px;font-size:12.5px}
.mkt-chip{display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--muted);flex-wrap:wrap;max-width:100%}
.mkt-chip.mkt-click{cursor:pointer}
.mkt-chip.mkt-click:hover{border-color:var(--accent)}
.tc-chev{color:var(--muted);margin-left:2px}
/* card "oggi per motore": nomi per esteso al posto dei pallini (click sul chip) */
.today-card{flex-basis:100%;max-width:420px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.tc-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}
.tc-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.tc-k{flex:1}
.tc-n{color:var(--muted);font-size:11px}
.tc-tot{border-top:1px solid var(--border);margin-top:4px;padding-top:6px;font-weight:700}
.mkt-chip b{color:var(--text);font-weight:600}
.mkt-dot{width:8px;height:8px;border-radius:50%;flex:none}
@keyframes mktpulse{0%,100%{opacity:1}50%{opacity:.45}}
.mkt-dot.on{background:var(--green);box-shadow:0 0 8px rgba(61,220,151,.7);animation:mktpulse 2.2s infinite}
.mkt-dot.off{background:var(--red)}
.mkt-dot.cry{background:#8c5ccb;box-shadow:0 0 8px rgba(140,92,203,.7);animation:mktpulse 2.2s infinite}
.rd-group{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:8px 0 -2px;font-size:12.5px;color:var(--muted)}
.rd-gbar{width:13px;height:13px;border-radius:4px;flex:none}
.rd-group b{color:var(--text);font-size:13px;letter-spacing:.3px}
.rd-gcount{margin-left:auto;font-size:11.5px}
.rd-card.rd-active{border-color:rgba(61,220,151,.45);box-shadow:0 0 16px rgba(61,220,151,.10)}
@keyframes signew{0%{background:rgba(203,166,92,.15);box-shadow:inset 3px 0 0 var(--accent)}100%{background:transparent}}
.sig-new{animation:signew 2.4s ease-out}
/* Colonne CONTATE, non auto-fill: su schermi larghi l'auto-fill arrivava a 5-6 card
   per riga e diventavano strisce illeggibili. Massimo 3 su desktop, 2 su tablet, 1 sul
   telefono: la card ha spazio per i suoi numeri. minmax(0,1fr) evita che un contenuto
   largo (barre, livelli) sfondi la colonna. */
/* Dal 31/07 le card vivono nel CORPO di ogni gruppo-tendina (.rd-gbody): il contenitore
   va in colonna (intestazioni a tutta riga) e la griglia 3/2/1 sta nel corpo del gruppo.
   Le regole grid-column:1/-1 di rd-group/rd-mytrack/rd-empty restano valide li' dentro. */
.sig-radar{display:block;margin:16px 0 16px;flex-shrink:0}
.rd-gbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
@media(max-width:1024px){.rd-gbody{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rd-gbody{grid-template-columns:1fr}}
.rd-card{border:1px solid var(--border);border-radius:12px;padding:12px 13px;background:var(--panel);position:relative;transition:.2s}
.rd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rd-sym{font-weight:800;font-size:14px}
.rd-osc{font-size:11px;color:var(--muted);background:#1a2236;border:1px solid var(--border);padding:2px 7px;border-radius:20px}
.rd-state{font-weight:800;font-size:15px;letter-spacing:.2px}
.rd-reason{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
.rd-levels{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12.5px}
.rd-levels b{font-variant-numeric:tabular-nums}
/* ---- "dove siamo adesso" nelle card (aggiornato dall'EA ogni minuto) ---- */
.rd-pl{margin-top:8px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.rd-pl span{font-size:11.5px;font-weight:600;color:var(--muted)}
.rd-pl.pl-up{color:#3fb950} .rd-pl.pl-dn{color:#f85149}
.rd-osc{margin-top:10px}
/* barra 0-100 dell'oscillatore: tacche alle soglie che fanno agire il motore */
.rd-osc-bar{position:relative;height:7px;border-radius:4px;background:linear-gradient(90deg,
  rgba(63,185,80,.35) 0%,rgba(63,185,80,.12) 20%,var(--border) 42%,var(--border) 58%,
  rgba(248,81,73,.12) 80%,rgba(248,81,73,.35) 100%)}
.rd-osc-bar i{position:absolute;top:-3px;width:1px;height:13px;background:var(--muted);opacity:.55}
.rd-osc-bar i.t20{left:20%} .rd-osc-bar i.t50{left:50%;opacity:.85} .rd-osc-bar i.t80{left:80%}
.rd-osc-bar b{position:absolute;top:-5px;width:3px;height:17px;border-radius:2px;
  background:var(--accent);transform:translateX(-1.5px);box-shadow:0 0 0 2px var(--card)}
.rd-osc-lab{display:flex;justify-content:space-between;margin-top:4px;font-size:9.5px;color:var(--muted)}
.rd-osc-txt{margin-top:6px;font-size:12.5px;line-height:1.45}
.rd-osc-txt b{font-variant-numeric:tabular-nums}
.rd-upd{margin-top:4px;font-size:10px;color:var(--muted)}
/* le due distanze che contano, ognuna con la sua riga: si leggono in un colpo d'occhio */
.rd-goal{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:12.5px;line-height:1.45}
.rd-goal .g-ico{flex:0 0 auto;font-size:14px;line-height:1.3}
.rd-goal b{font-variant-numeric:tabular-nums}
.rd-goal .g-sub{margin-top:2px;font-size:10.5px;color:var(--muted);line-height:1.4}
/* la posizione aperta: il blocco piu' importante della card */
/* «Su questo strumento c'è anche altro»: quello che è aperto ACCANTO a questo motore.
   Bordo solo a sinistra e niente riquadro, per non sembrare un'altra posizione di questa
   card — è un rimando, non un ordine in più. Il colore d'accento sul filo perché è la
   riga che, se non la leggi, ti fa credere che «esce alle 18:00» valga per tutto quello
   che hai sul simbolo. */
.rd-altrove{margin-top:9px;padding:7px 0 2px 10px;border-left:2px solid var(--accent);
  font-size:12.5px;line-height:1.5}
.rd-alt-h{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--muted);
  text-transform:uppercase;margin-bottom:3px}
.rd-alt-net{margin-top:3px}
.rd-alt-note{margin-top:4px;font-size:12px;color:var(--muted)}
.rd-pos{margin-top:9px;border:1px solid var(--border);border-radius:9px;padding:9px 10px}
.rd-pos-h{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--muted);text-transform:uppercase}
.rd-pos-pips{margin-top:5px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rd-pos-pips span{font-size:12px;font-weight:600;color:var(--muted)}
.rd-pos-pips.pl-up{color:#3fb950} .rd-pos-pips.pl-dn{color:#f85149}
.rd-pos-cmp{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.45}
.rd-pos-cmp .c-note{font-size:10px;opacity:.8}
/* SOPRA o SOTTO la media: i due numeri affiancati, la barra e il verdetto in chiaro */
.rd-cmp{margin-top:9px;padding-top:8px;border-top:1px solid var(--border)}
.rd-cmp .cmp-rows>div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;padding:2px 0}
.rd-cmp .cmp-rows span{color:var(--muted)}
.rd-cmp .cmp-rows b{font-variant-numeric:tabular-nums;font-size:13.5px}
.rd-cmp .cmp-tot{margin-top:3px;padding-top:4px;border-top:1px dotted var(--border)}
.rd-cmp .cmp-bar{position:relative;height:4px;border-radius:2px;background:var(--border);margin:7px 0 6px}
/* SCALA del confronto: leggibile a colpo d'occhio, senza tornare ai numeri sopra.
   Rosso a sinistra (perdite), verde a destra (guadagni), zero marcato, cursore con valore. */
.rd-cmp .cmp-scale{margin:34px 0 12px}   /* 34px sopra: la pastiglia del valore sta a -27px */
.rd-cmp .s-bar{position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,rgba(248,81,73,.28),rgba(248,81,73,.08) 45%,
    var(--border) 50%,rgba(63,185,80,.08) 55%,rgba(63,185,80,.28))}
.rd-cmp .s-fill{position:absolute;top:0;height:100%;border-radius:4px;opacity:.85}
.rd-cmp .s-fill.f-up{background:#3fb950} .rd-cmp .s-fill.f-dn{background:#f85149}
.rd-cmp .s-bar i{position:absolute;top:-3px;width:1px;height:14px;background:var(--muted);opacity:.6}
.rd-cmp .s-bar i.t-zero{opacity:.95;height:16px;top:-4px}
.rd-cmp .s-bar b{position:absolute;top:-6px;width:4px;height:20px;border-radius:2px;
  transform:translateX(-2px);box-shadow:0 0 0 2px var(--card)}
.rd-cmp .s-bar b.up{background:#3fb950} .rd-cmp .s-bar b.dn{background:#f85149}
/* il valore di ADESSO scritto sul cursore: e' il numero che si cerca per primo */
.rd-cmp .s-now{position:absolute;top:-27px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;padding:1px 6px;
  border-radius:9px;border:1px solid var(--border);background:var(--card)}
.rd-cmp .s-now.up{color:#3fb950} .rd-cmp .s-now.dn{color:#f85149}
.rd-cmp .s-ends{position:relative;display:flex;justify-content:space-between;margin-top:8px;min-height:26px;
  font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.rd-cmp .s-ends em{display:block;font-style:normal;font-size:9px;opacity:.8}
.rd-cmp .s-ends .e-dn{color:#f85149;text-align:left;max-width:44%}
.rd-cmp .s-ends .e-up{color:#3fb950;text-align:right;max-width:44%}
.rd-cmp .s-ends .e-zero{position:absolute;top:0;transform:translateX(-50%);opacity:.7}
.rd-cmp .cmp-verdict.v-mid{color:var(--text);font-weight:600;font-size:12.5px}
.rd-cmp .cmp-bar i{position:absolute;left:50%;top:-4px;width:1px;height:12px;background:var(--muted);opacity:.8}
.rd-cmp .cmp-bar b{position:absolute;top:-5px;width:3px;height:14px;border-radius:2px;transform:translateX(-1.5px)}
.rd-cmp .cmp-bar b.up{background:#3fb950} .rd-cmp .cmp-bar b.dn{background:#f85149}
.rd-cmp .cmp-verdict{margin-top:2px;font-size:13px;font-weight:800;letter-spacing:.2px;line-height:1.45}
.rd-cmp .cmp-verdict.v-up{color:#3fb950} .rd-cmp .cmp-verdict.v-dn{color:#f85149}
.rd-cmp .cmp-note{margin-top:4px;font-size:10.5px;color:var(--muted);line-height:1.45}
/* media storica mostrata anche in attesa (nessuna posizione aperta) */
.rd-avgbox{margin-top:8px;padding:7px 9px;border:1px dashed var(--border);border-radius:8px;
  font-size:12px;line-height:1.45}
.rd-avgbox .a-pat{font-size:10.5px;font-weight:800;letter-spacing:.3px;color:var(--muted)}
.rd-avgbox .a-sub{margin-top:3px;font-size:10.5px;color:var(--muted)}
/* chi ha aperto/chiuso: EA, a mano, o il server del broker (TP / SL / stop-out) */
.og{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;font-size:9px;font-weight:800;
  letter-spacing:.3px;border:1px solid var(--border);vertical-align:middle}
.og-e{color:var(--muted)} .og-m{color:#d29922;border-color:rgba(210,153,34,.4)}
.og-b{color:#f85149;border-color:rgba(248,81,73,.4)}
.og-tp{color:#3fb950;border-color:rgba(63,185,80,.4)}
.og-sl{color:#f85149;border-color:rgba(248,81,73,.4)}
.eng-tag.manuale{color:#d29922;border-color:rgba(210,153,34,.4)}
/* SCHEDA TECNICA del dettaglio: riquadri di dati invece di elenchi di parole */
.sd-grp{margin:16px 0 4px}
.sd-grp-t{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.sd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.sd-tile{background:#161d2e;border:1px solid var(--border);border-radius:10px;padding:9px 10px;
  min-width:0}
.sd-tile b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1.2;overflow-wrap:anywhere}
.sd-tile span{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);line-height:1.3}
.sd-tile em{display:block;margin-top:4px;font-style:normal;font-size:9.5px;color:var(--muted);
  opacity:.75;line-height:1.35}
.sd-tile.tone-up b{color:#3fb950} .sd-tile.tone-dn b{color:#f85149}
/* riga del confronto: contro cosa si misura questo numero e di quanto se ne discosta */
.sd-ref{display:block;margin-top:6px;padding-top:5px;border-top:1px dotted var(--border);
  text-decoration:none;font-size:9.5px;color:var(--muted);line-height:1.35}
.sd-ref b{display:inline;font-size:10.5px;color:var(--text);font-weight:700}
.sd-ref i{font-style:normal;font-weight:800;font-size:10px}
.sd-ref i{display:block;margin-top:2px}
.sd-ref i.r-up{color:#3fb950} .sd-ref i.r-dn{color:#f85149}
.sd-ref i.r-mid{color:var(--muted)}
.rd-stale{margin-top:6px;font-size:10.5px;color:#d29922;line-height:1.4}
/* livelli messi da TE su una posizione: vanno distinti da quelli del motore */
.rd-mine{margin-top:6px;font-size:11px;color:#d29922;line-height:1.45}
/* il track record delle operazioni fatte a mano (non una statistica di strategia) */
.rd-mytrack{grid-column:1/-1;margin:2px 0 10px;padding:10px 12px;border:1px dashed rgba(210,153,34,.35);
  border-radius:10px;background:rgba(210,153,34,.05);font-size:12.5px}
.rd-mytrack>b{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#d29922}
.rd-mytrack .mt-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:5px}
.rd-mytrack .mt-sub{margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.45}
/* legenda del grafico: equity (piena) e saldo (tratteggiata). La distanza fra le due
   e' il P/L flottante, quindi vanno distinte a colpo d'occhio. */
.equity-legend{display:flex;gap:14px;margin:2px 0 4px;font-size:10px;color:var(--muted)}
.equity-legend .eq-k{display:flex;align-items:center;gap:5px}
.equity-legend i{width:14px;height:2px;border-radius:1px;display:inline-block}
.equity-legend i.dash{background:repeating-linear-gradient(90deg,rgba(203,166,92,.85) 0 4px,transparent 4px 7px);height:2px}
.rd-pos-dur{margin-top:8px}
.rd-pos-dur .d-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.rd-pos-dur .d-bar b{display:block;height:100%;background:var(--accent);opacity:.75}
.rd-pos-dur .d-txt{margin-top:4px;font-size:11px;color:var(--muted);line-height:1.45}
.rd-pos-dur .d-txt span{font-size:10px;opacity:.85}
.rd-pats{margin-top:10px;display:grid;gap:8px}
.rd-pat{border:1px solid var(--border);border-radius:8px;padding:8px 9px}
.rd-pat-h{font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--muted)}
.rd-pat-on{color:var(--accent);font-weight:700;letter-spacing:0}
.rd-pat .rd-levels{margin-top:5px;gap:8px;font-size:11.5px}
/* verso del prossimo ordine: si sa in anticipo perche' l'ingresso e' un incrocio */
.rd-next{margin-top:6px;font-size:12.5px;font-weight:700;line-height:1.4}
.rd-next.n-buy{color:#3fb950} .rd-next.n-sell{color:#f85149}
.rd-next .n-sub{display:block;margin-top:3px;font-size:10.5px;font-weight:500;color:var(--muted);line-height:1.45}
.rd-next .n-warn{color:#d29922}
.rd-exit{margin-top:9px;border-top:1px solid var(--border);padding-top:8px}
.rd-exit-lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.rd-exit-lbl b{color:var(--text);font-size:12.5px;font-variant-numeric:tabular-nums}
.rd-exit-bar{height:7px;border-radius:5px;background:#1a2236;overflow:hidden}
.rd-exit-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,rgba(61,220,151,.5),var(--green));transition:width .6s}
.rd-exit-next{font-size:11px;color:var(--muted);margin-top:5px}
.rd-buy{border-color:rgba(61,220,151,.4)} .rd-buy .rd-state{color:var(--green)}
.rd-sell{border-color:rgba(241,112,123,.4)} .rd-sell .rd-state{color:var(--red)}
.rd-wait .rd-state{color:var(--muted)}
.rd-active{border-color:var(--green);background:linear-gradient(180deg,rgba(61,220,151,.15),rgba(61,220,151,.04));box-shadow:0 0 0 1px rgba(61,220,151,.4)}
.rd-active .rd-state{color:var(--green)}
@keyframes rdpulse{0%,100%{box-shadow:0 0 0 1px rgba(61,220,151,.4)}50%{box-shadow:0 0 0 3px rgba(61,220,151,.25)}}
.rd-active{animation:rdpulse 2.4s ease-in-out infinite}
.sec-inner .cards{padding:0;flex-wrap:wrap}
.sec-inner .cards .card{flex:1 1 130px}
/* sezioni con un pannello a tutta altezza (segnali/storico/mercato/chat) */
#sec-signals,#sec-storico,#sec-mercato,#sec-assistant{padding:14px 18px 16px}
#sec-signals .panel,#sec-storico .panel,#sec-mercato .panel,#sec-assistant .panel{flex:1;min-height:0}
/* SEGNALI scrolla da se' su desktop: il suo scroller era la vecchia .signal-list
   (rimossa il 20/07) e da allora il radar cresciuto restava TAGLIATO dentro la
   section overflow:hidden — "la pagina non scorre" (23/07). Solo >860px: sotto,
   la sezione e' overflow:visible e scorre col body (regola nella media query). */
@media(min-width:861px){#sec-signals{overflow-y:auto}}
/* ---------- Account menu ---------- */
/* ===== «Stai guardando — Automatico», nella testata di ogni schermata ===== */
/* LA PASTIGLIA E' L'UNICA COSA CHE PUO' CEDERE SPAZIO, e per anni non lo faceva:
   con `flex-shrink:0` i puntini di sospensione qui sotto non entravano MAI in
   funzione, e quando la somma superava la larghezza l'unico esito possibile era che
   il menu ☰ andasse a capo (visto il 10/08/2026 a 320, 360 e 411px — sforavano di
   tre pixel). Marchio, comandi della chat, campanella e menu sono COMANDI: o ci
   sono tutti o non servono. Il nome del conto e' un'etichetta, e un'etichetta si
   accorcia. */
.conto-hd{position:relative;flex-shrink:1;min-width:0}
.conto-chip{display:flex;align-items:center;gap:7px;max-width:100%;font:inherit;
  font-size:12px;color:var(--muted);background:#161e30;border:1px solid var(--border);
  border-radius:999px;padding:6px 11px;cursor:pointer;line-height:1.1;white-space:nowrap}
.conto-chip:hover{border-color:var(--accent);color:var(--text)}
.conto-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.conto-chip svg{width:14px;height:14px;flex-shrink:0;opacity:.8}
.conto-chip .cc-chev{width:12px;height:12px;opacity:.6}
.cc-pre{opacity:.85}
/* il NOME e' l'unica cosa che deve restare leggibile: e' l'ultimo a stringersi e,
   se proprio non entra, si tronca coi puntini invece di spingere fuori il resto */
.cc-lbl{color:var(--accent);font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}
.conto-pop{position:absolute;top:40px;right:0;width:270px;max-width:82vw;z-index:60;
  background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.45)}
.cp-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);padding:4px 10px 8px}
.cp-r{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;font:inherit;
  padding:9px 10px;border-radius:8px;background:transparent;border:1px solid transparent;
  color:var(--text);cursor:pointer}
.cp-r:hover{background:#222c44}
.cp-r.on{background:rgba(203,166,92,.10);border-color:rgba(203,166,92,.34)}
.cp-n{font-size:13px;font-weight:700}
.cp-r.on .cp-n{color:var(--accent)}
.cp-d{font-size:11px;color:var(--muted);line-height:1.35;white-space:normal}
.acct{position:relative;flex-shrink:0}
.acct-btn{display:flex;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;padding:3px}
/* Il menu e' SOLO le tre linee, identico su ogni larghezza (deciso 2026-07-22:
   l'avatar con l'iniziale non si riconosceva come menu, ed e' stato tolto del tutto). */
.burger{display:flex;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#161e30;color:var(--text);align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.burger svg{width:20px;height:20px}
.acct-btn:hover .burger{background:#222c44;border-color:var(--accent);color:var(--accent)}
.acct-menu{position:absolute;top:48px;right:0;width:248px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:70;display:flex;flex-direction:column;gap:3px}
.acct-id{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.acct-id .email{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-line{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--text);background:transparent;border:none;cursor:pointer;text-align:left;width:100%;font-weight:600}
.acct-line:hover{background:#222c44}
.acct-line svg{width:18px;height:18px;flex-shrink:0}
.acct-line.danger{color:var(--red)}
.acct-line select{margin-left:auto}
.acct-line.on{color:var(--accent)}
/* ---------- Showroom Strategie (catalogo EA) ---------- */
.strat-h{font-size:20px;font-weight:800;margin:2px 2px 2px}
.strat-sub{font-size:12px;color:var(--muted);margin:0 2px 16px}
.strat-lbl{font-size:14px;font-weight:800;margin:22px 2px 10px;letter-spacing:.2px}
.eng-block{margin-bottom:22px}
.eng-block-h{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.eng-block-h .dot{width:11px;height:11px;border-radius:50%;background:var(--ec)}
.eng-block-h .nm{font-size:15px;font-weight:800}
.eng-block-h .tg{font-size:11px;color:var(--muted)}
.ea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ea-card{background:linear-gradient(180deg,#161e30,#121829);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.ea-card:hover{border-color:var(--ec);transform:translateY(-2px)}
.ea-card .ea-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ea-card .ea-nm{font-size:16px;font-weight:800}
.ea-card .ea-tg{font-size:12px;color:#aeb4c0;line-height:1.45;min-height:34px}
.ea-spark{height:46px;margin:10px 0 8px}
.ea-spark svg{width:100%;height:46px;display:block}
.ea-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:10px 14px;margin-top:6px}
.ea-kpis .k{font-size:11px;color:var(--muted)}
.ea-kpis .k b{display:block;font-size:15px;color:var(--text);margin-top:1px}
.ea-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:7px}
.ea-status.on{background:rgba(61,220,151,.16);color:var(--green)}
.ea-status.lock{background:rgba(203,166,92,.16);color:var(--accent)}
.ea-status.soon{background:#2a3146;color:#aeb7cc}
.ea-eng-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:6px;color:#0a0e18;background:var(--ec)}
/* Pagina-EA (dettaglio) */
.ea-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;margin-bottom:14px;padding:0}
.ea-hero{background:linear-gradient(180deg,#161e30,#121829);border:1px solid var(--border);border-radius:16px;padding:18px}
.ea-hero .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ea-hero .nm{font-size:24px;font-weight:800}
.ea-hero .tg{font-size:14px;color:#c4c9d2;margin:8px 0 14px}
.ea-detail .eq-chart{margin-bottom:14px}
.ea-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 16px}
.ea-kpi-row .kp{background:#0f1420;border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center}
.ea-kpi-row .kp .kn{font-size:18px;font-weight:800}
.ea-kpi-row .kp .kl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:3px}
.ea-sec{margin-top:14px}
.ea-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);margin-bottom:6px}
.ea-sec p{font-size:13.5px;line-height:1.6;color:#cfd4de}
.bt-table{background:var(--panel2);border:1px solid var(--border);border-radius:10px;overflow:hidden;font-size:12.5px}
.bt-tr{display:grid;grid-template-columns:1.3fr .8fr .7fr 1.2fr .9fr;gap:6px;padding:7px 11px;border-bottom:1px solid var(--border)}
.bt-tr:last-child{border-bottom:none}
.bt-tr span:not(:first-child){text-align:right}
.bt-th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:rgba(255,255,255,.02)}
.bt-tot{font-weight:800;background:rgba(203,166,92,.08);border-top:1px solid var(--border)}
.bt-tr .pos{color:var(--green)} .bt-tr .neg{color:var(--red)}
/* tabella dei valori SPIEGATI: nome | valore | spiegazione in parole semplici */
.bt-expl{font-size:12.5px}
.bt-xrow{display:grid;grid-template-columns:1.15fr .95fr 2.6fr;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);align-items:baseline}
.bt-xrow:last-child{border-bottom:none}
.bt-xk{font-weight:700;color:#e7eaf0}
.bt-xv{font-weight:800;text-align:right;white-space:nowrap}
.bt-xv.pos{color:var(--green)} .bt-xv.neg{color:var(--red)}
.bt-xs{color:#aeb4c0;line-height:1.5;font-size:12px}
.bt-xbig{background:rgba(203,166,92,.07)}
.bt-xbig .bt-xk,.bt-xbig .bt-xv{font-size:14px}
@media(max-width:760px){.bt-xrow{grid-template-columns:1fr auto;gap:4px 10px}.bt-xs{grid-column:1/3}}
.ea-cta{margin-top:18px}
.ea-cta .owned{display:inline-flex;align-items:center;gap:8px;background:rgba(61,220,151,.14);color:var(--green);border:1px solid rgba(61,220,151,.4);border-radius:12px;padding:12px 18px;font-weight:700;font-size:14px}
.offer{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px}
.offer-card{background:#0f1420;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;position:relative}
.offer-card.rec{border-color:var(--accent);box-shadow:0 0 0 1px rgba(203,166,92,.3)}
.offer-card .ot{font-size:13px;font-weight:700}
.offer-card .op{font-size:24px;font-weight:800}.offer-card .op span{font-size:12px;color:var(--muted);font-weight:600}
.offer-card .obadge{position:absolute;top:-9px;left:14px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:var(--accent);color:#0a0e18;padding:2px 8px;border-radius:6px}
.offer-card .obadge.best{background:var(--green)}
.offer-card button{margin-top:4px;padding:10px;border:none;border-radius:9px;background:var(--accent);color:#0a0e18;font-weight:800;cursor:pointer;font-size:13px}
.offer-card.rec button{filter:brightness(1.05)}
.ea-soon-box{margin-top:16px;background:#0f1420;border:1px dashed var(--border);border-radius:12px;padding:16px;text-align:center;color:var(--muted);font-size:13px}
.ea-soon-box button{margin-top:10px;padding:10px 16px;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:9px;font-weight:700;cursor:pointer}
/* ===== ORDINI IN CORSO, COPERTI (chi non ha i segnali) =====
   Sfocato invece che sostituito: si deve VEDERE che sotto c'e' qualcosa. Le righe
   dietro sono finte apposta — il server non manda i dati veri a chi non li ha (403),
   quindi non c'e' niente da recuperare guardando la pagina. */
.lk-wrap{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;min-height:230px}
.lk-dietro{filter:blur(4px);opacity:.85;user-select:none;pointer-events:none;padding:16px;display:grid;gap:10px}
.lk-riga{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:9px;padding:12px}
.lk-sym{font-size:11px;font-weight:800;background:#1b2540;color:#9fb4e6;padding:3px 8px;border-radius:5px}
.lk-badge{font-size:11px;font-weight:800;background:rgba(61,220,151,.16);color:var(--green);padding:3px 8px;border-radius:5px}
.lk-txt{font-size:13px;color:var(--muted);flex:1}
.lk-num{font-size:13px;font-weight:700}
.lk-sopra{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px 20px;background:linear-gradient(180deg,rgba(10,14,24,.58),rgba(10,14,24,.82))}
.lk-lucchetto{font-size:26px;margin-bottom:6px}
.lk-t{font-size:17px;font-weight:800;margin-bottom:7px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.lk-s{font-size:13.5px;color:#cfd4de;line-height:1.6;max-width:440px;margin-bottom:14px;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.lk-btn{background:var(--accent);color:#0a0e18;border:0;border-radius:10px;padding:11px 20px;
  font-weight:800;font-size:14.5px;cursor:pointer}
.lk-btn:hover{filter:brightness(1.08)}
.lk-nota{margin-top:10px;font-size:11.5px;color:var(--muted);opacity:.8}
@media(max-width:560px){.lk-s{font-size:13px}.lk-t{font-size:16px}.lk-wrap{min-height:260px}}
/* ===== Finestrella "Ho una licenza" =====
   La porta che mancava: chi compra e' gia' registrato (la Demo lo richiede), quindi la
   chiave non poteva entrare da nessuna parte. Si apre dal menu del profilo, oppure da
   sola quando si torna dal checkout con ?licenza=… nell'indirizzo. */
.lic-bg{position:fixed;inset:0;z-index:9996;background:rgba(6,9,16,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.lic-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:22px 20px;width:min(420px,100%);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lic-t{font-size:18px;font-weight:800;margin-bottom:6px}
.lic-s{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.lic-card input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:#0e1422;color:var(--text);font-size:16px;outline:none;
  font-family:ui-monospace,Menlo,monospace;letter-spacing:.5px}
.lic-card input:focus{border-color:var(--accent)}
.lic-msg{font-size:13px;min-height:18px;margin-top:9px}
.lic-row{display:flex;gap:10px;margin-top:12px}
.lic-row button{flex:1;padding:11px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;border:none}
.lic-no{background:transparent;border:1px solid var(--border)!important;color:var(--text)}
.lic-si{background:var(--accent);color:#0a0e18}
.lic-si:disabled{opacity:.55;cursor:not-allowed}
/* ===== Banner di sistema (notifiche, installazione) =====
   Galleggiano sopra l'app. In ALTO su desktop; su telefono coprivano esattamente la
   riga delle schede della sezione Segnali (misurato: 36px di sovrapposizione a 360px),
   e quello di installazione, fissato a bottom:12px, finiva sopra la barra inferiore.
   `--navbar-h` vale 0 su desktop e l'altezza vera della barra sotto i 760px, quindi la
   stessa regola serve entrambi i casi senza numeri ripetuti. */
.app-banner{position:fixed;left:12px;right:12px;z-index:9997;max-width:520px;margin:0 auto}
/* SOTTO LA TESTATA, non sopra. Con `top:12px` la banda galleggiava addosso all'header
   (z-index 9997 contro 20) e ci copriva i comandi: i due bottoni di Dock (cronologia e
   nuova conversazione) erano coperti — si vedevano e non si premevano — e dal 03/08 ci
   finiva sotto anche il segnaposto del conto, con la X della banda proprio sopra.
   L'header e' alto 54px e non si restringe finche' non va a capo, cosa che succede solo
   sotto i 560px — dove pero' la banda e' gia' passata in basso (regola qui sotto). */
.app-banner-top{top:66px}
/* e il contenuto le lascia il posto, come fa con quella in basso: senza, la banda si
   metteva davanti alla prima riga utile — l'interruttore del conto in Dashboard, le
   linguette Live/Backtest in Elezioni. Misurata da `_bannerSpazio()`. */
body.con-banner-top .content{padding-top:var(--banner-h-top,0px)}
.app-banner-bottom{bottom:calc(12px + var(--navbar-h))}
@media(max-width:760px){
  .app-banner-top{top:auto;bottom:calc(12px + var(--navbar-h))}
}
/* ===== Tablet/Mobile: la sidebar diventa barra inferiore ===== */
@media(max-width:760px){
  /* qui la sidebar diventa barra in basso: la sua altezza entra nel calcolo della chat */
  :root{--navbar-h:calc(58px + env(safe-area-inset-bottom))}
  .shell{flex-direction:column}
  .sidenav{position:fixed;left:0;right:0;bottom:0;flex-direction:row;width:auto;order:2;border-right:none;border-top:1px solid var(--border);padding:6px 6px;padding-bottom:max(6px,env(safe-area-inset-bottom));gap:2px;z-index:60;background:linear-gradient(180deg,#0f1525,#0a0e18);box-shadow:0 -6px 18px rgba(0,0,0,.35)}
  .nav-item{flex-direction:column;gap:3px;flex:1;padding:7px 3px;font-size:10px;justify-content:center;text-align:center;min-width:0}
  .nav-item span{font-size:10px;line-height:1.1}
  /* Le etichette DEBORDAVANO dalla loro cella e si toccavano fra loro ("DashboardSegnali"):
     otto voci in 360px lasciano 42px a testa, e "Dashboard" ne chiedeva 56. Oltre ad
     accorciare le due piu' lunghe, qui si impedisce comunque a un'etichetta di invadere
     la vicina — se un domani se ne aggiunge una lunga, si tronca invece di sovrapporsi. */
  .nav-item span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-item .live-dot{position:absolute;top:5px;left:calc(50% + 9px);margin:0}
  .content{order:1}
  .brand-name{display:none}
  #sec-signals,#sec-storico,#sec-mercato,#sec-assistant{padding:10px 12px 12px}
  .section .sec-inner{padding:12px 12px calc(80px + env(safe-area-inset-bottom))}
  /* LA BANDA NON COPRE PIU': il contenuto le lascia il posto. Prima nascondeva
     l'ultima parte di ogni pagina, e sul Dock il campo per scrivere.
     LO SPAZIO STA SUL CONTENITORE COMUNE, non sulle singole sezioni: alcune ne
     hanno piu' d'una dentro (il Grafo), e mettendolo sulla prima l'ultimo blocco
     restava sotto la banda lo stesso — misurato, 18px di legenda coperti. */
  body.con-banner .content{padding-bottom:var(--banner-h)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* CON UNA BANDA APERTA il fondo si abbassa di quel tanto. E' QUI che va
     fatto e non sulle altezze delle sezioni: quelle sono elementi flex e il
     contenitore le stira comunque fino al bordo del body — misurato, il
     `calc` diceva 718px e il layout ne dava 811. */
  body.con-banner{padding-bottom:calc(58px + var(--banner-h) + env(safe-area-inset-bottom))}
  .fab{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* Sotto i 400px lo spazio per voce scende sotto i 46px: testo un filo piu' piccolo e
   margini interni ridotti, cosi' le etichette entrano invece di essere troncate. */
/* SCALINI DEL TESTO NELLA BARRA IN BASSO.
   Otto voci si dividono la larghezza dello schermo: a 360px restano 38px utili a testa,
   e "Mercato" a 10px ne chiede 42. I puntini di sospensione non bastano — troncano
   invece di far entrare la parola, ed e' proprio il taglio che si vuole evitare.
   Le soglie qui sotto sono MISURATE, non stimate: a ogni scalino nessuna etichetta
   viene piu' troncata (verificato a 430/414/390/375/360/344/320px). */
@media(max-width:430px){
  .nav-item{padding:7px 1px}
  .nav-item span{font-size:9px}
}
@media(max-width:380px){
  .nav-item span{font-size:8.2px;letter-spacing:-.1px}
}
@media(max-width:340px){
  .nav-item span{font-size:8px;letter-spacing:-.2px}
  .nav-item svg{width:17px;height:17px}
}
/* ===== Phone ===== */
@media(max-width:560px){
  /* UNA RIGA, SEMPRE. `flex-wrap:wrap` era la porta da cui il menu scappava sotto:
     bastavano tre pixel di troppo e la testata passava da 63 a 115px, con una
     fascia vuota fra i comandi e la conversazione. Adesso non c'e' piu' un "sotto"
     dove andare — chi deve stringersi si stringe (la pastiglia del conto), e chi
     non puo' resta dov'e'. */
  header{flex-wrap:nowrap;height:auto;gap:9px;padding:9px 12px}
  .brand{font-size:15px}
  /* SUL TELEFONO RESTA IL NOME, non la frase. «Stai guardando» sono 14 caratteri
     accanto al titolo di pagina e al menu: sparisce lui e resta l'occhio, che dice la
     stessa cosa in 14 pixel. Il nome no: e' l'informazione. */
  .cc-pre{display:none}
  .conto-chip{padding:5px 9px;gap:5px;max-width:42vw}
  /* IN DOCK, UNA RIGA SOLA (03/08/2026). Sul telefono la testata di Dock andava a
     capo e diventava alta 111px invece di 54: due righe di comandi rubate alla
     conversazione, su un telefono, per un'informazione che c'era gia'. Il motivo
     era che in Dock i loghi sono DUE — il marchio PHAI a sinistra e la scritta
     «dock» che prende il posto del titolo — e insieme al conto e ai due comandi non
     ci stanno in 390px. Sul telefono resta il marchio: che sei in Dock te lo dice
     gia' la voce accesa nella barra in fondo, e ripeterlo costava una riga intera. */
  #page-logo{display:none}
  /* L'ORDINE DELLA TESTATA SU TELEFONO, e non e' estetica: e' dove cade il pollice.
        [PHAI] [cronologia][nuova]  ·········  [conto ▾] [☰]
     I comandi della chat stanno ATTACCATI al marchio, a sinistra; il conto e il menu
     in fondo a destra; in mezzo il titolo, che in Dock e' vuoto e fa da spaziatore —
     ed e' proprio lui a tenere i due gruppi separati. Senza `order` il titolo si
     trova PRIMA dei comandi nel documento, e spingerebbe tutto a destra in un
     blocco solo: comandi e conto appiccicati, e il marchio isolato in fondo a
     sinistra. Le classi restano quelle: si sposta la posizione, non il contenuto. */
  .dock-ctl{order:1}
  .topbar-title{order:2;flex:1 1 0;min-width:0}
  .conto-hd{order:3}
  .acct{order:4}
  /* I 14px DI RESPIRO NON SERVONO QUI. `header:has(#page-logo:not([hidden])){gap:14px}`
     esiste per separare i DUE loghi di Dock — ma su telefono `#page-logo` e'
     `display:none`, quindi quel respiro separava due cose di cui una non c'e'. Cinque
     spazi da 14 invece che da 10 sono venti pixel: quelli che a 411px mandavano a capo
     il menu. Si sovrascrive con lo STESSO selettore, o la specificita' vince lei. */
  header,header:has(#page-logo:not([hidden])){gap:10px}
  /* la campanella e' un comando: non si schiaccia per far posto a un'etichetta */
  .feed-hd{flex-shrink:0}
}
/* sotto i 400px il menu andava a capo per una manciata di pixel: la pastiglia del
   conto si stringe quel tanto che basta (il nome ci sta ancora per intero) */
@media(max-width:400px){
  .conto-chip{max-width:32vw}
  /* LO SPAZIO FRA I COMANDI. `header{gap:8px}` da solo NON basta: in Dock vince
     `header:has(#page-logo:not([hidden])){gap:14px}`, che ha piu' specificita' — e
     restava a 14 anche qui, dove il logo di Dock e' nascosto e quel respiro non
     serve piu' a separare due loghi che non ci sono. Quattro spazi da 14 invece che
     da 8 sono 24 pixel: esattamente quelli che a 320px facevano andare a capo il
     menu. Si sovrascrive con lo stesso selettore, o non vale niente. */
  header,header:has(#page-logo:not([hidden])){gap:8px}
  .tabs{order:3;flex-basis:100%}
  .user{margin-left:auto}
  .user .email{display:none}
  .cards{padding:12px 12px 0;gap:8px}
  .cards.stats-row{padding-top:8px}
  .cards.account .card{flex:1 1 calc(50% - 4px)}
  .card-val{font-size:20px}
  .card.sm .card-val{font-size:17px}
  .container{padding:0 12px 12px}
  .msg{max-width:92%}
  .signal-list{max-height:none}
  .input-bar button{padding:12px 16px}
  .ea-kpi-row{grid-template-columns:1fr 1fr}
  .offer{grid-template-columns:1fr}
  .strat-h{font-size:18px}
  .ea-hero{padding:14px}
  .ea-hero .nm{font-size:20px}
  .ea-grid{grid-template-columns:1fr}
}
/* nota swap sotto il P/L in euro: spiega i segni "discordi" del carry (v. loadStoricoTrades) */
.pl-swap{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px}
/* ---------- Card "Andamento del conto" (Panoramica) ---------- */
.andamento{margin-bottom:14px}   /* il resto della veste sta nella regola sotto */
/* la card del conto: un pannello con profondita' (gradiente + bagliore d'accento in
   alto a sinistra), non una lista su fondo piatto. Il numero grande e' IL numero. */
.andamento{position:relative;background:
    radial-gradient(600px 180px at 12% 0%,rgba(212,175,55,.10),transparent 60%),
    linear-gradient(180deg,rgba(20,27,45,.85),rgba(10,14,24,.6));
  border:1px solid var(--border);border-radius:14px;padding:14px 16px 10px;
  box-shadow:0 10px 30px rgba(0,0,0,.30)}
/* le chips: aperto adesso / massimo toccato / peggior discesa */
.anda-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.anda-chip{display:inline-flex;align-items:baseline;gap:6px;font-size:11px;
  background:rgba(15,20,32,.85);border:1px solid var(--border);border-radius:999px;
  padding:4px 11px}
.anda-chip i{font-style:normal;color:var(--muted)}
.anda-chip b{font-weight:800;font-variant-numeric:tabular-nums}
.anda-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
@media(max-width:1024px){.anda-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.anda-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* il bordo sinistro porta il SEGNO del periodo: verde/rosso prima ancora di leggere */
.anda-tile{background:#0f1420;border:1px solid var(--border);border-left-width:3px;
  border-radius:10px;padding:10px 11px;transition:transform .15s ease,box-shadow .15s ease}
.anda-tile.pos{border-left-color:var(--green)}
.anda-tile.neg{border-left-color:var(--red)}
.anda-tile:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.anda-tile .at-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.anda-tile .at-p{font-size:12px;font-weight:700;margin-top:1px}
.anda-tile .at-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:6px}
.anda-tile .at-r{font-size:10px;color:var(--muted);margin-top:2px}
/* il confronto realta'/simulazione: la riga piu' onesta della card */
.anda-conf{background:rgba(15,20,32,.7);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;margin:0 0 12px}
.anda-conf:empty{display:none}
.anda-conf .cf-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:700;margin-bottom:6px}
.anda-conf .cf-early{font-size:12px;line-height:1.5;color:var(--text)}
.anda-conf .cf-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.anda-conf .cf-badge{font-size:10.5px;font-weight:800;letter-spacing:.4px;
  padding:3px 10px;border-radius:999px;color:#0a0e18}
.anda-conf .cf-badge.pos{background:var(--green)} .anda-conf .cf-badge.neg{background:var(--red)}
.anda-conf .cf-num{font-size:13px} .anda-conf .cf-num b{font-size:15px}
.anda-conf .cf-bar{position:relative;height:7px;background:#0e1422;border-radius:4px;
  overflow:visible;margin:8px 0 4px}
.anda-conf .cf-bar i{display:block;height:100%;border-radius:4px;background:var(--accent);
  transition:width .6s cubic-bezier(.2,.8,.3,1)}
.anda-conf .cf-bar i.pos{background:var(--green)} .anda-conf .cf-bar i.neg{background:var(--red)}
/* la tacca del 100%: dove la realta' pareggia la simulazione */
.anda-conf .cf-bar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--muted);
  border-radius:1px;opacity:.8}
.anda-conf .cf-sub{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.45}
/* contabilità "dove è finita ogni operazione": lista leggibile, impila su mobile */
.anda-conf .cf-contab{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.5;
  display:flex;flex-direction:column;gap:3px}
.anda-conf .cf-contab .cf-cq{display:block;padding-left:12px;position:relative}
.anda-conf .cf-contab .cf-cq::before{content:"•";position:absolute;left:2px;color:var(--accent)}
.anda-conf .cf-contab b{color:var(--text);font-variant-numeric:tabular-nums}
/* capitale e rischio: due righe con l'etichetta a sinistra, tutto in percentuale */
.anda-conf .cf-mets{margin-top:8px;border-top:1px solid var(--border);padding-top:7px;
  display:flex;flex-direction:column;gap:4px}
.anda-conf .cf-met{font-size:11.5px;line-height:1.5;color:var(--text)}
.anda-conf .cf-met b{font-variant-numeric:tabular-nums}
.anda-conf .cf-ml{display:inline-block;min-width:64px;margin-right:6px;font-size:9.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
/* SU COSA E' CALCOLATO un numero: si legge accanto al numero, non lo copre. Sta
   in tono minore apposta — e' una precisazione, non un secondo dato. */
.anda-conf .cf-base{font-size:10px;color:var(--muted);font-weight:600;white-space:nowrap;
  border-bottom:1px dotted var(--muted);cursor:help}
.andamento .equity-box{margin:0 0 12px}
.anda-brk .brk-t{font-size:12.5px;font-weight:700;margin:2px 0 8px}
.anda-brk .brk-t em{color:var(--muted);font-weight:600;font-style:normal}
.anda-brk .brk-empty{color:var(--muted);font-weight:600}
.anda-brk .brk-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:8px 0 4px}
/* etichetta AUTO-dimensionata, mai tagliata: "Motore (senza etichetta)" a 110px fissi
   diventava "Motore (senza…" e sembrava un errore */
.brk-row{display:grid;grid-template-columns:minmax(90px,max-content) 1fr auto auto;gap:8px;align-items:center;padding:3px 0;font-size:12.5px}
.brk-k{white-space:nowrap}
.brk-bar{height:8px;background:#0e1422;border-radius:4px;overflow:hidden}
.brk-bar i{display:block;height:100%;border-radius:4px}
.brk-bar i.pos{background:var(--green)} .brk-bar i.neg{background:var(--red)}
.brk-v{font-weight:700;min-width:92px;text-align:right}
.brk-n{color:var(--muted);font-size:11px;min-width:40px;text-align:right}
@media(max-width:560px){.brk-row{grid-template-columns:minmax(72px,max-content) 1fr auto}.brk-n{display:none}}
/* saldo accanto all'equity (testata card Andamento) e dentro le tile */
.at-b{font-size:11px;font-weight:700;margin-top:2px;opacity:.85}
/* didascalia sopra le tile del profitto */
.anda-cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:10px 0 6px}
/* nota piccola dentro le metriche del confronto realta'/simulazione */
.cf-note{color:var(--muted);font-style:normal;font-size:11px}

/* bottone voce di Dock: acceso = accent */
#voice-btn.on{color:var(--accent);border-color:var(--accent)}

/* ---------- LA SFERA (modalita' vocale alla Jarvis, col marchio PHAI nel cuore) ---------- */
#voice-orb{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 42%,rgba(30,24,10,.55),rgba(4,6,12,.97) 68%),rgba(4,6,12,.92);
  backdrop-filter:blur(10px)}
#orb-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:18px;width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid var(--border);color:var(--muted);font-size:16px;cursor:pointer}
#orb-close:hover{color:var(--accent);border-color:var(--accent)}
.orb-wrap{position:relative;width:250px;height:250px;cursor:pointer}
/* alone che respira dietro tutto */
.orb-wrap::before{content:'';position:absolute;inset:-40px;border-radius:50%;
  background:radial-gradient(circle,rgba(203,166,92,.28),rgba(203,166,92,.07) 45%,transparent 70%);
  animation:orbBreath 4s ease-in-out infinite;filter:blur(6px)}
/* il globo: vetro scuro, non piu' palla piena — il logo deve brillarci dentro */
.orb{position:absolute;inset:34px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(246,231,195,.32),transparent 42%),
    radial-gradient(circle at 68% 78%,rgba(203,166,92,.14),transparent 50%),
    radial-gradient(circle at 50% 50%,#1a1508 0%,#0b0906 62%,#060505 100%);
  box-shadow:0 0 90px rgba(203,166,92,.35),inset 0 0 46px rgba(203,166,92,.16),inset 0 -14px 34px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  animation:orbBreath 3.6s ease-in-out infinite}
.orb-logo{width:56%;height:56%;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(203,166,92,.75)) drop-shadow(0 0 34px rgba(203,166,92,.35));
  animation:orbLogo 4.2s ease-in-out infinite}
@keyframes orbLogo{0%,100%{opacity:.88;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
/* anelli: due scie luminose controrotanti + un anello sottile fisso di cornice */
.orb-ring{position:absolute;inset:6px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 235deg,rgba(203,166,92,.15) 265deg,rgba(239,224,166,.95) 320deg,#fff8e0 337deg,transparent 348deg);
  -webkit-mask:radial-gradient(circle,transparent 68%,#000 69%,#000 73%,transparent 74%);
          mask:radial-gradient(circle,transparent 68%,#000 69%,#000 73%,transparent 74%);
  animation:orbSpin 3.8s linear infinite;filter:drop-shadow(0 0 6px rgba(203,166,92,.8))}
.orb-ring.r2{inset:16px;animation-duration:6.4s;animation-direction:reverse;opacity:.55;
  background:conic-gradient(from 180deg,transparent 0 265deg,rgba(122,220,170,.0) 280deg,rgba(203,166,92,.8) 330deg,transparent 345deg)}
.orb-ring.r3{inset:0;animation:none;background:none;
  border:1px solid rgba(203,166,92,.22);
  -webkit-mask:none;mask:none;filter:none}
/* satellite: un punto di luce in orbita */
.orb-sat{position:absolute;inset:16px;border-radius:50%;animation:orbSpin 6.4s linear infinite reverse;pointer-events:none}
.orb-sat::after{content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:#f6e7c3;box-shadow:0 0 10px 3px rgba(246,231,195,.8)}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* stati: ascolto = respiro verde-oro · penso = anelli rapidi, logo acceso · parlo = tutto pulsa */
#voice-orb.listen .orb{box-shadow:0 0 100px rgba(120,220,160,.4),inset 0 0 46px rgba(120,220,160,.14),inset 0 -14px 34px rgba(0,0,0,.7)}
#voice-orb.listen .orb-ring{animation-duration:7s}
#voice-orb.listen .orb-sat::after{background:#9fe8c3;box-shadow:0 0 10px 3px rgba(120,220,160,.8)}
#voice-orb.think .orb-ring{animation-duration:1s}
#voice-orb.think .orb-ring.r2{animation-duration:1.6s}
#voice-orb.think .orb-sat{animation-duration:1.6s}
#voice-orb.think .orb-logo{animation-duration:1.2s}
#voice-orb.speak .orb{animation:orbTalk .55s ease-in-out infinite}
#voice-orb.speak .orb-logo{animation:orbTalk .55s ease-in-out infinite}
#voice-orb.speak .orb-wrap::before{animation-duration:1.1s}
@keyframes orbTalk{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.orb-state{font-size:15px;font-weight:600;color:var(--text);letter-spacing:.3px}
.orb-heard{max-width:80%;min-height:20px;text-align:center;font-size:13px;color:var(--muted)}
/* chip rapide sotto la risposta di Dock: "Mostrami EURGBP" — un tocco, parte la domanda */
.dock-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dchip{padding:7px 14px;border-radius:999px;font:inherit;font-size:12.5px;cursor:pointer;
  background:rgba(203,166,92,.08);border:1px solid rgba(203,166,92,.35);color:var(--accent)}
.dchip:hover{background:rgba(203,166,92,.16)}
/* ---------- tendina dei resoconti (chiusa di default) ---------- */
/* orario assoluto d'uscita accanto al conto alla rovescia (card in operazione) */
.rd-exit-at{font-size:12px;color:var(--muted);margin-top:3px}
.rd-exit-at b{color:var(--text)}

/* ================= GRAFO: testata "aurora" (hero + viste + tessere + legenda) =================
   Tutto scopato su #sec-grafo/.ghero: il resto dell'app non cambia faccia. */
.ghero{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(203,166,92,.22);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(203,166,92,.10), transparent 45%),
    radial-gradient(120% 160% at 100% 0%, rgba(92,168,203,.10), transparent 45%),
    radial-gradient(140% 200% at 50% 130%, rgba(140,92,203,.10), transparent 55%),
    var(--panel);
  padding:16px 16px 13px;margin-top:8px}
/* il respiro dietro la testata: un cono di colore sfocato che ruota piano */
.ghero-glow{position:absolute;inset:-40%;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(203,166,92,.14), rgba(92,168,203,.10),
    rgba(140,92,203,.12), rgba(203,166,92,.14));
  filter:blur(60px);animation:gheroSpin 22s linear infinite}
@keyframes gheroSpin{to{transform:rotate(360deg)}}
.ghero>*:not(.ghero-glow){position:relative;z-index:1}
.ghero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ghero-heading{min-width:0}
.ghero-title{font-weight:800;font-size:clamp(19px,4.2vw,27px);letter-spacing:.5px;
  text-transform:uppercase;line-height:1.15;
  background:linear-gradient(92deg,#f4e3c2 0%,var(--accent) 38%,#f7f2e6 52%,var(--accent) 66%,#e8cf9f 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gheroShine 7s ease-in-out infinite}
@keyframes gheroShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.ghero-sub{font-size:12.5px;color:var(--muted);margin-top:4px;max-width:56ch}
/* selettore viste: segmented pill (vince sui .tab generici via id) */
#graph-tabs{display:inline-flex;gap:4px;background:rgba(10,14,24,.55);border:1px solid var(--border);
  border-radius:999px;padding:4px;backdrop-filter:blur(6px);flex:0 0 auto;overflow:visible}
#graph-tabs .tab{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;
  padding:8px 18px;border-radius:999px;transition:all .25s ease}
#graph-tabs .tab:hover{color:var(--text);background:rgba(255,255,255,.05)}
#graph-tabs .tab.active{background:linear-gradient(135deg,#e8cf9f,var(--accent));color:#1a1206;
  box-shadow:0 2px 14px rgba(203,166,92,.45), inset 0 1px 0 rgba(255,255,255,.35)}
/* tessere dei totali (bt / live / celle / stati) */
.graph-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:13px}
.gs-card{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:12px;
  padding:9px 12px;backdrop-filter:blur(4px);transition:transform .2s ease,border-color .2s ease}
.gs-card:hover{transform:translateY(-2px);border-color:rgba(203,166,92,.45)}
.gs-card .k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);display:flex;align-items:center;gap:6px}
.gs-card .v{font-size:clamp(15px,2.6vw,19px);font-weight:800;color:var(--text);margin-top:3px;
  font-variant-numeric:tabular-nums}
.gs-card .v.pos{color:var(--green)} .gs-card .v.neg{color:var(--red)}
.gs-card .s{font-size:11px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:gsPulse 2s infinite}
@keyframes gsPulse{70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
/* legenda: chip di vetro */
.graph-legend{margin-top:11px}
.gl-chip{background:rgba(255,255,255,.04);backdrop-filter:blur(4px);transition:border-color .2s}
.gl-chip:hover{border-color:rgba(203,166,92,.4)}
/* cornice del canvas: anello sfumato + trama puntinata + vignetta */
.graph-wrap{height:min(66dvh,640px);border:0;border-radius:16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(30,40,66,.55), rgba(10,14,24,.92) 78%),
    radial-gradient(rgba(139,148,171,.13) 1px, transparent 1.3px) 0 0/22px 22px,
    var(--panel)}
.graph-wrap::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  z-index:2;pointer-events:none;
  background:linear-gradient(135deg, rgba(203,166,92,.6), rgba(203,166,92,.08) 30%,
    rgba(92,168,203,.35) 55%, rgba(140,92,203,.08) 75%, rgba(203,166,92,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.graph-zoom button{width:40px;height:40px;background:rgba(14,19,33,.8);backdrop-filter:blur(6px)}
/* telefono: testata in colonna, viste a tutta larghezza, legenda che scorre */
@media(max-width:640px){
  .ghero{padding:13px 12px 11px}
  .ghero-top{flex-direction:column;gap:10px}
  #graph-tabs{display:flex;width:100%}
  #graph-tabs .tab{flex:1;justify-content:center;text-align:center}
  .graph-stats{grid-template-columns:1fr 1fr}
  .graph-legend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .graph-legend::-webkit-scrollbar{display:none}
  .gl-chip{flex:0 0 auto}
}
@media(max-width:560px){.graph-wrap{height:min(56dvh,470px)}}
/* chi chiede meno movimento lo ottiene: niente aurora, niente shimmer, niente pulsazioni */
@media(prefers-reduced-motion:reduce){
  .ghero-glow,.ghero-title,.gs-live-dot{animation:none}
  .gs-card,.gs-card:hover{transform:none}
}

/* ===== Grafico del piano nella card del segnale + latenza dichiarata ===== */
.rd-chartwrap{margin-top:9px;cursor:default}
.rd-chartbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s ease}
.rd-chartbtn:hover{color:var(--text);border-color:rgba(203,166,92,.45)}
.rd-chartbtn.on{background:rgba(203,166,92,.14);border-color:var(--accent);color:var(--accent)}
.rd-chart{margin-top:6px}
.rd-chart .dock-chart{margin:6px 0 2px}
.rd-lat{font-size:11px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}

/* ===== Card segnale compatta: riga bottoni + tendina «Dettagli» ===== */
.rd-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;cursor:default}
.rd-abtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);
  font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s ease}
.rd-abtn:hover{color:var(--text);border-color:rgba(203,166,92,.45)}
.rd-abtn.on{background:rgba(203,166,92,.14);border-color:var(--accent);color:var(--accent)}
.rd-more{margin-top:9px;border-top:1px dashed var(--border);padding-top:4px}
.rd-lvlnote{font-size:10.5px;color:var(--muted);margin-top:3px;font-style:italic}

/* ===== Sezione Mercato: UN grafico a tutta larghezza + filtro a pulsanti ===== */
.mkt-grid{display:block;margin-top:8px}
.mkt-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mkt-tab{position:relative;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;
  border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;transition:all .2s ease}
.mkt-tab:hover{color:var(--text);border-color:rgba(203,166,92,.45)}
.mkt-tab.on{background:linear-gradient(135deg,#e8cf9f,var(--accent));color:#1a1206;border-color:var(--accent);
  box-shadow:0 2px 12px rgba(203,166,92,.35)}
.mkt-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 6px rgba(61,220,151,.8)}
.mkt-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.mkt-panel .dock-chart{margin:2px 0}
/* resoconto ordini: badge e parole, niente bottoni */
.mkt-reso{margin-top:10px;border-top:1px dashed var(--border);padding-top:10px}
.mkt-reso-h{font-size:12px;font-weight:800;color:var(--text);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mo-tot{font-size:12px;font-weight:800}
.mkt-ord{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;
  border-bottom:1px dashed rgba(40,49,73,.6);font-size:12.5px;color:var(--muted)}
.mkt-ord:last-child{border-bottom:0}
.mkt-ord b{color:var(--text)}
.eng-b{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:10.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--c,#8b94ab);
  border:1px solid var(--c,#8b94ab);background:color-mix(in srgb,var(--c,#8b94ab) 14%,transparent)}
.mo-pl{font-weight:800;font-variant-numeric:tabular-nums}
.mo-why{flex-basis:100%;font-size:11px;color:var(--muted);font-style:italic;margin-top:1px}
/* percentuale accanto al P/L flottante: stessa riga, mai a capo da sola */
.card-val .pl-pct{font-size:.68em;font-weight:700;opacity:.85;white-space:nowrap}

/* la guida operativa di base: la regola della casa in una scatola */
.mkt-guida{margin-top:10px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(203,166,92,.35);background:rgba(203,166,92,.07);
  font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.mkt-guida b{color:var(--text)}
.mkt-guida .mg-t{font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--accent)}
.mkt-guida .mg-sub{font-size:11px;color:var(--muted);font-style:italic;margin-top:2px}
/* feature D1 a valori nudi + righe di stato motore */
.mkt-feat{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.mf-lbl{flex-basis:100%;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted)}
.mf-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.035);font-size:11.5px;color:var(--muted)}
.mf-chip b{color:var(--text);font-variant-numeric:tabular-nums}
.mkt-eng-line{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:12.5px;
  color:var(--muted);border-bottom:1px dashed rgba(40,49,73,.6)}
.mkt-eng-line:last-child{border-bottom:0}
.mkt-eng-line b{color:var(--text)}
@media(max-width:640px){
  .mkt-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  .mkt-tabs::-webkit-scrollbar{display:none}
  .mkt-tab{flex:0 0 auto}
}
/* vecchia griglia: classe rimasta solo per compatibilita' */
.mkt-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px 12px}

/* ==================================================================
   NOTIZIE — calendario economico spiegato
   ================================================================== */
.news-filtri{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:18px}
.news-filtro{display:flex;flex-direction:column;gap:4px}
.news-filtro label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.news-filtro select{background:var(--panel,#101a24);color:inherit;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:7px 10px;font-size:12px;min-width:150px}
.news-stato{flex:1;min-width:200px;font-size:11px;color:var(--text-faint);text-align:right;padding-bottom:8px}

/* Il calendario vuole TUTTA la larghezza. Restava una griglia a colonne da 330px
   (serviva alle vecchie card) e il mese ci finiva dentro schiacciato in una
   colonnina: era quello a rendere la sezione illeggibile. */
.news-lista{display:block}
.news-attesa{color:var(--text-faint);font-size:13px;padding:24px 0}

.news-card{background:var(--panel,#101a24);border:1px solid rgba(255,255,255,.08);
  border-left-width:3px;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
/* il bordo dice l'importanza senza bisogno di leggere l'etichetta */
.news-card--alta{border-left-color:#ff655f}
.news-card--media{border-left-color:#ffb34c}
.news-card--bassa{border-left-color:rgba(255,255,255,.18)}
.news-card--passato{opacity:.72}

.news-card header{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-faint)}
.news-quando{font-variant-numeric:tabular-nums;font-weight:600;color:inherit}
.news-imp{text-transform:uppercase;letter-spacing:.06em;font-size:9px;padding:2px 6px;border-radius:4px}
.news-imp--alta{background:rgba(255,101,95,.16);color:#ff8a85}
.news-imp--media{background:rgba(255,179,76,.14);color:#ffc478}
.news-imp--bassa{background:rgba(255,255,255,.06)}
.news-valuta{margin-left:auto;font-weight:600}
.news-card h4{margin:0;font-size:14px;line-height:1.35}

.news-valori{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.news-val{display:flex;flex-direction:column;gap:1px;font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}
.news-val i{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);font-weight:400}
.news-val--eff{color:#4fd7f2}
.news-sorpresa{font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.07)}

.news-spieg{font-size:12px;line-height:1.5;color:var(--text-soft,#b9c7d6)}
.news-spieg p{margin:0 0 6px}
.news-spieg b{color:inherit;font-weight:600}
.news-att{color:var(--text-faint);font-size:11px}
.news-spieg--vuota{color:var(--text-faint);font-style:italic}
.news-fonte{font-size:11px;color:var(--cyan,#36c9f2);text-decoration:none;margin-top:auto}
.news-fonte:hover{text-decoration:underline}

@media (max-width:640px){
  .news-stato{text-align:left}
}


/* ==================================================================
   NOTIZIE — il mese come calendario, il giorno come pop-up
   Tre livelli, ognuno si apre solo se richiesto: la griglia dice la FORMA del
   mese, il pop-up l'elenco della giornata, la tendina il singolo evento.
   ================================================================== */
.cal-testa{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 14px}
.cal-mese{font-weight:700;font-size:1.25rem;text-transform:capitalize;letter-spacing:.01em}
.cal-nav{display:flex;gap:8px}
.cal-nav button{background:var(--panel,#101a24);color:inherit;border:1px solid var(--border,rgba(255,255,255,.14));
  border-radius:9px;width:38px;height:38px;font-size:17px;cursor:pointer;line-height:1}
.cal-nav button:hover:not(:disabled){border-color:var(--accent,#cba65c);color:var(--accent,#cba65c)}
.cal-nav button:disabled{opacity:.25;cursor:default}

.cal-griglia{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%}
.cal-gg{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);
  text-align:center;padding:0 0 6px}
.cal-cella{position:relative;aspect-ratio:1/.78;min-height:76px;
  border:1px solid var(--border,rgba(255,255,255,.09));border-radius:12px;
  background:var(--panel,#101a24);padding:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-align:left;color:inherit;font:inherit;transition:transform .12s,border-color .12s}
.cal-cella:disabled{cursor:default;opacity:.3}
.cal-cella:hover:not(:disabled){border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
.cal-cella--vuota{border:0;background:none;pointer-events:none}
.cal-cella--oggi{border-color:var(--accent,#cba65c)}
.cal-cella--oggi .cal-num{color:var(--accent,#cba65c)}
.cal-num{font-size:15px;font-weight:600;line-height:1}
.cal-punti{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto;max-width:100%}
.cal-punto{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26)}
.cal-punto--alta{background:#e0603a}
.cal-punto--media{background:var(--accent,#cba65c)}
.cal-conta{font-size:10px;color:var(--text-faint);letter-spacing:.03em}

/* ── il giorno: asse delle ore ───────────────────────────────────────────────
   Come un'agenda: le ore a sinistra, gli eventi accanto. Su un calendario
   economico serve piu' del pop-up, perche' gli eventi si ADDENSANO in poche
   fasce (l'apertura di Londra, le 14:30 americane) e il grappolo si vede solo
   se le ore hanno una posizione. Le ore vuote restano: sono l'informazione. */
.gio-testa{display:flex;align-items:center;gap:14px;margin:4px 0 16px}
.gio-back{background:var(--panel,#101a24);color:inherit;border:1px solid var(--border,rgba(255,255,255,.14));
  border-radius:9px;height:38px;padding:0 14px;cursor:pointer;font:inherit;font-size:.86rem;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gio-back:hover{border-color:var(--accent,#cba65c);color:var(--accent,#cba65c)}
.gio-tit{font-weight:700;font-size:1.2rem;text-transform:capitalize;line-height:1.15}
.gio-sub{font-size:.8rem;opacity:.65;margin-top:2px}
.gio-nav{margin-left:auto;display:flex;gap:8px}

.gio-asse{border-top:1px solid rgba(255,255,255,.07)}
.gio-ora{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid rgba(255,255,255,.07);
  min-height:46px}
.gio-ora--vuota{min-height:30px;opacity:.4}
.gio-ora--adesso{background:linear-gradient(90deg,rgba(203,166,92,.10),transparent 60%)}
.gio-etichetta{font-variant-numeric:tabular-nums;font-size:.76rem;opacity:.5;padding:9px 12px 0 0;
  text-align:right;border-right:1px solid rgba(255,255,255,.07)}
.gio-ora--adesso .gio-etichetta{opacity:1;color:var(--accent,#cba65c);font-weight:600}
.gio-eventi{padding:5px 0}
.gio-vuoto{padding:6px 14px;font-size:.74rem;opacity:.35}

.cal-voce{border-radius:9px;margin:0 0 4px 10px;background:rgba(255,255,255,.035)}
.cal-voce:last-child{margin-bottom:0}
.cal-voce-riga{width:100%;display:flex;align-items:center;gap:11px;padding:9px 13px;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left;border-radius:9px}
.cal-voce-riga:hover{background:rgba(255,255,255,.05)}
.cal-imp{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:rgba(255,255,255,.26)}
.cal-imp--alta{background:#e0603a}
.cal-imp--media{background:var(--accent,#cba65c)}
.cal-ora{font-variant-numeric:tabular-nums;font-size:.84rem;opacity:.8;flex:0 0 auto;min-width:50px}
.cal-val{font-size:.7rem;letter-spacing:.05em;opacity:.6;flex:0 0 auto;min-width:32px}
.cal-nome{flex:1;font-size:.89rem;line-height:1.32}
.cal-freccia{opacity:.4;font-size:.66rem;flex:0 0 auto;transition:transform .15s}
.cal-voce--aperta{background:rgba(203,166,92,.08)}
.cal-voce--aperta .cal-freccia{transform:rotate(90deg)}
.cal-dett{padding:0 14px 13px 34px;font-size:.87rem;line-height:1.55;opacity:.92}
.cal-dett p{margin:7px 0}
.cal-numeri{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.cal-numero{background:rgba(255,255,255,.06);border-radius:7px;padding:4px 9px;font-size:.8rem}
.cal-numero i{font-style:normal;opacity:.55;margin-right:5px;font-size:.72rem}

@media (max-width:720px){
  .cal-mese{font-size:1.08rem}
  .cal-griglia{gap:5px}
  .cal-cella{min-height:56px;padding:5px;border-radius:9px;aspect-ratio:1/.9}
  .cal-num{font-size:13px}
  .cal-conta{display:none}
  .gio-tit{font-size:1.04rem}
  .gio-ora{grid-template-columns:50px 1fr}
  .gio-etichetta{font-size:.7rem;padding-right:8px}
  .cal-voce{margin-left:6px}
  .cal-dett{padding-left:16px}
}

/* ===== LABORATORIO — registro della ricerca a sfera (solo proprietario) =====
   Tela grande a sinistra, scheda scelta a destra; su telefono impilate. La tela
   ha un'altezza ESPLICITA e non in percentuale: il canvas si dimensiona da JS
   leggendo clientWidth/clientHeight, e con un'altezza in % dentro un flex senza
   riga definita quei valori valgono zero e non si disegna niente. */
.lab-body{display:flex;gap:14px;align-items:stretch;margin-top:12px}
#mappa-canvas,
#lab-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.lab-canvas-wrap{position:relative;flex:1 1 auto;min-width:0;height:min(68vh,620px);
  border:1px solid rgba(203,166,92,.14);border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(94,124,190,.07),transparent 60%),#0a0e18}
#lab-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#lab-canvas.drag{cursor:grabbing}
.lab-side{flex:0 0 288px;max-width:288px;padding:14px;border-radius:16px;
  border:1px solid rgba(120,134,166,.16);background:rgba(14,19,32,.72);
  font-size:12.5px;line-height:1.5;overflow:auto;height:min(68vh,620px)}
.lab-tit{font-weight:700;font-size:14px;color:#e9ebf2;margin-bottom:7px}
.lab-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;
  font-weight:700;border:1px solid;margin-bottom:9px;text-transform:capitalize}
.lab-desc{color:#b7c0d4;margin-bottom:9px}
.lab-num{color:#8b94ab;font-size:11.5px}
.lab-warn{margin-top:9px;padding:7px 9px;border-radius:9px;font-size:11.5px;
  color:#e0b96c;background:rgba(224,185,108,.10);border:1px solid rgba(224,185,108,.24)}
.lab-side code{font-size:11px;color:#cba65c;background:rgba(203,166,92,.10);
  padding:1px 4px;border-radius:4px}
@media (max-width:900px){
  .lab-body{flex-direction:column}
  .lab-canvas-wrap{height:min(56vh,460px)}
  .lab-side{flex:1 1 auto;max-width:none;height:auto;max-height:none}
}

/* ── come si leggono i numeri del calendario ──────────────────────────────
   Lo scarto e il verso in chiaro (cambiano a ogni evento), la parte didattica
   dentro un <details> chiuso: chi la sa non la vede, chi non la sa la trova. */
.leg-scarto{margin:.5rem 0 .15rem;font-size:.93rem}
.leg-verso{margin:0 0 .5rem;font-size:.86rem;opacity:.78}
details.leg{margin:.4rem 0 .7rem;border-left:2px solid rgba(255,255,255,.12);padding-left:.7rem}
details.leg > summary{cursor:pointer;font-size:.84rem;opacity:.72;list-style:none;
  padding:.15rem 0;user-select:none}
details.leg > summary::-webkit-details-marker{display:none}
details.leg > summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
details.leg[open] > summary::before{content:'▾ '}
details.leg > summary:hover{opacity:1}
.leg-voci{margin:.35rem 0;padding-left:1.05rem;font-size:.85rem;line-height:1.5}
.leg-voci li{margin:.22rem 0}
.leg-voci b{text-transform:lowercase}
.leg-regola{margin:.45rem 0 .2rem;font-size:.85rem;line-height:1.5}
.leg-unita{margin:.2rem 0 .35rem;font-size:.82rem;opacity:.72;line-height:1.45}
/* Le pastiglie ora hanno un suggerimento: si deve capire che sono interrogabili. */
.cal-numero[title]{cursor:help}

/* ── migliorato o peggiorato ───────────────────────────────────────────────
   Il verde/rosso e' del DATO ECONOMICO, mai del prezzo: dove non sappiamo il
   verso dell'indicatore (inflazione, tassi) la fascia resta neutra e mostra
   solo la freccia. Un colore su un giudizio che non abbiamo sarebbe una
   previsione fatta col foglio di stile. */
.and{display:flex;gap:.5rem;align-items:baseline;margin:.55rem 0 .35rem;
  padding:.4rem .6rem;border-radius:.4rem;font-size:.9rem;line-height:1.45;
  border-left:3px solid transparent;background:rgba(255,255,255,.04)}
.and-glifo{font-size:1rem;line-height:1;flex:0 0 auto}
.and--meglio{border-left-color:#2fa36b;background:rgba(47,163,107,.10)}
.and--meglio .and-glifo{color:#2fa36b}
.and--peggio{border-left-color:#d1584f;background:rgba(209,88,79,.10)}
.and--peggio .and-glifo{color:#d1584f}
.and--neutro{border-left-color:rgba(255,255,255,.22)}
.and--neutro .and-glifo{opacity:.6}
/* la stessa freccia sulla riga chiusa, per scorrere la giornata a colpo d'occhio */
.cal-frec{flex:0 0 auto;font-size:.75rem;opacity:.55;margin-left:.3rem;cursor:help}
.cal-frec--meglio{color:#2fa36b;opacity:1}
.cal-frec--peggio{color:#d1584f;opacity:1}

/* Intestazione di gruppo nel menu account. Le voci owner non sono funzioni
   dell'app: sono il banco di lavoro, e stanno sotto un loro titolo invece che
   sparse in mezzo alle voci del cliente. */
.acct-sez{padding:.55rem .85rem .2rem;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;opacity:.45;font-weight:600;
  border-top:1px solid rgba(255,255,255,.08);margin-top:.3rem}

/* Il rimando dalla scheda di ricerca alle sue prove nell'Atlas. */
.lab-prova{display:block;width:100%;margin-top:.8rem;padding:.55rem .7rem;
  border:1px solid rgba(255,255,255,.16);border-radius:.45rem;background:transparent;
  color:inherit;font:inherit;font-size:.85rem;text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s}
.lab-prova:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05)}
.lab-prova span{display:block;font-size:.75rem;opacity:.55;margin-top:.15rem}

/* ── Laboratorio: il numero e la copertura ─────────────────────────────────
   Il numero che ha deciso un verdetto e' il contenuto di questo registro, non
   una nota a margine: sta subito sotto l'esito, non in fondo alla descrizione. */
.lab-numero{margin:.5rem 0 .2rem;padding:.45rem .6rem;font-size:.86rem;line-height:1.45;
  border-left:2px solid;border-radius:0 .3rem .3rem 0;background:rgba(255,255,255,.045)}
/* La copertura: i buchi dichiarati. Verde solo quando e' davvero pieno. */
.lab-cop{margin:.9rem 0;padding:.6rem .7rem;border:1px solid rgba(255,255,255,.09);
  border-radius:.45rem;font-size:.8rem}
.lab-cop-tit{opacity:.6;margin-bottom:.4rem;font-size:.76rem}
.lab-cop-riga{display:flex;gap:.5rem;align-items:baseline;padding:.15rem 0;flex-wrap:wrap}
.lab-cop-n{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600;
  min-width:3.2em;color:#cba65c}
.lab-cop-riga.ok .lab-cop-n{color:#3ddc97}
.lab-cop-riga em{flex-basis:100%;font-style:normal;opacity:.45;font-size:.73rem;
  padding-left:3.7em}

/* LA SCALA DELLE AFFERMAZIONI nel Laboratorio: una riga di tessere sotto quelle
   degli esiti. Separata di proposito — l'esito dice SE una cosa e' viva, il
   gradino dice QUANTO e' solida la prova che la tiene in piedi. */
.lab-scala{grid-column:1/-1;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--border)}
.lab-scala-righe{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.lab-scala-tit{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8b94ab;margin-bottom:9px}
.lab-scala-nota{margin-top:10px;font-size:12.5px;font-style:italic;color:#cba65c}

/* ===== MAPPA DELLE GRANDEZZE — riusa il corpo del Laboratorio (stessa forma) ===== */
.mappa-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 4px}
/* L'INTESTAZIONE DELL'APP SPEDISCE `.tabs` IN FONDO: sotto i 560px c'e' una
   regola `.tabs{order:3;flex-basis:100%}` che serve alla barra in cima (le tab
   dei conti vanno sotto il nome del conto). Qui dentro faceva salire il
   SELETTORE DEL SIMBOLO sopra i due gruppi di filtri: si leggeva "Consenso"
   prima ancora di sapere fra cosa si sta scegliendo. Due classi battono una,
   quindi questa vince senza dover rincorrere la media query. */
.mappa-bar .tabs{order:0;flex:0 1 auto}
.map-fam{margin:6px 0;font-size:12px;color:#b7c0d4;line-height:1.45}
.map-lnk{display:flex;justify-content:space-between;gap:8px;padding:3px 0;
  border-bottom:1px solid rgba(120,134,166,.10);font-size:12px;color:#b7c0d4}
.map-perche{font-size:11px;color:#8b94ab;font-style:italic;padding:3px 0 6px}
.mappa-sel{background:rgba(14,19,32,.85);color:#e9ebf2;border:1px solid rgba(120,134,166,.28);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;
  max-width:100%}
.mappa-sel:focus{outline:none;border-color:rgba(203,166,92,.55)}
/* Le tessere dei totali: qui dentro sono TESTO, non numeri soli. Una riga unica
   con i puntini non le taglierebbe soltanto — le allarga: `1fr` in una griglia
   vale almeno il minimo del contenuto, e con `white-space:nowrap` quel minimo e'
   la frase intera (175px). Due colonne da 175 in un pannello da 310 uscivano dal
   bordo destro, ed e' quello che si vedeva sul telefono. */
#sec-mappa .gs-card{min-width:0}
#sec-mappa .gs-card .k{white-space:normal}
#sec-mappa .gs-card .s{white-space:normal;overflow:visible;text-overflow:clip}

/* ── La Mappa su telefono ──────────────────────────────────────────────────
   Tre gruppi di comandi affiancati non ci stanno in 310px: diventano tre righe
   intere. I gruppi passano da flex a GRIGLIA perche' `.tabs` scorre di lato con
   la barra nascosta — e una fila che scorre senza nessun segno e' una fila
   troncata: a 360px "Mosso" spariva e niente lo diceva. */
@media (max-width:640px){
  #sec-mappa .ghero{padding:14px 13px}
  #sec-mappa .ghero-sub{font-size:12px}
  .mappa-bar{gap:7px;margin:10px 0 2px}
  .mappa-bar .tabs{flex-basis:100%;overflow:visible;gap:6px}
  .mappa-bar .mb-modo{display:grid;grid-template-columns:1fr 1fr}
  .mappa-bar .mb-regime{display:grid;grid-template-columns:repeat(4,1fr)}
  .mappa-bar .tab{padding:9px 4px;min-width:0;font-size:12px;justify-content:center}
  .mappa-sel{flex-basis:100%;width:100%;padding:9px 12px;font-size:12.5px;text-align:center}
  #sec-mappa .graph-stats{grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:7px}
  #sec-mappa .gs-card{padding:9px 10px}
  #sec-mappa .gs-card .s{font-size:10.5px;line-height:1.35}
  #mappa-info{padding:12px;font-size:12px}
}
@media (max-width:400px){
  #sec-mappa .graph-stats{grid-template-columns:1fr 1fr}
}
/* Sotto i 330px quattro regimi darebbero pastiglie da 55px: la parola piu' lunga
   ("Normale") non ci sta piu' e si taglierebbe. Due file da due. */
@media (max-width:330px){
  .mappa-bar .mb-regime{grid-template-columns:1fr 1fr}
}

/* ═══ ELEZIONI DELL'OROLOGIO ═══════════════════════════════════════════════
   Era una pagina a se' (/elezioni): usciva dall'app e faceva sparire il menu
   sopra e quello sotto. Ora e' una sezione come le altre, e per questo il suo
   foglio di stile vive tutto sotto #sec-elezioni: nomi generici come .box
   .cell .kpi .rank avrebbero investito il resto dell'app. */
#sec-elezioni{--bg:#0b1120;--card:#141c2f;--card2:#0f1626;--border:#243050;--text:#e9eefa;
 --muted:#8794ae;--accent:#cba65c;--green:#3fb950;--red:#f85149;--blue:#5ca8cb}
#sec-elezioni *{box-sizing:border-box}
/* Nata dal `body` della vecchia pagina a se': dentro l'app niente sfondo a
   tutto schermo, niente min-height, niente margini di pagina — la cornice ce
   l'ha gia' l'app. Restano solo colori e passo del testo. */
/* NIENTE `font:` qui. La vecchia pagina dichiarava il suo carattere di
   sistema; dentro l'app quella riga faceva stonare la sezione rispetto a tutto
   il resto. Si eredita dall'app: si impostano solo misura e passo. */
#sec-elezioni{color:var(--text);font-size:14px;line-height:1.55}
#sec-elezioni .page{max-width:1180px;margin:0 auto}
#sec-elezioni a{color:var(--accent);text-decoration:none}
#sec-elezioni header{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:6px}
#sec-elezioni h1{font-size:clamp(20px,3.4vw,28px);margin:0;letter-spacing:-.4px}
#sec-elezioni .sub{color:var(--muted);font-size:13px;margin:4px 0 20px;max-width:62ch}
#sec-elezioni .seg{display:inline-flex;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:3px}
#sec-elezioni .seg a{padding:7px 15px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
#sec-elezioni .seg a.on{background:var(--accent);color:#0a0e18}
#sec-elezioni .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px}
#sec-elezioni .kpi{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--border);
 border-radius:13px;padding:13px 14px}
#sec-elezioni .kpi b{display:block;font-size:clamp(19px,2.6vw,25px);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
#sec-elezioni .kpi span{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);line-height:1.3}
#sec-elezioni .box{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:16px 18px;margin-bottom:16px}
#sec-elezioni .box h2{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
#sec-elezioni .verdict{font-size:15px;line-height:1.6}
#sec-elezioni .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
 font-size:11.5px;color:var(--muted)}
#sec-elezioni .legend b{color:var(--text)}
#sec-elezioni /* --- griglia delle celle: responsive per costruzione, #sec-elezioni niente tabella che sborda --- */
.torn{margin-bottom:14px}
#sec-elezioni .torn-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;
 padding:9px 12px;background:var(--card2);border:1px solid var(--border);border-radius:11px;margin-bottom:9px}
#sec-elezioni .torn-h b{font-size:14px;font-variant-numeric:tabular-nums}
#sec-elezioni .torn-h .meta{font-size:11.5px;color:var(--muted)}
#sec-elezioni .cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
#sec-elezioni .cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 12px;
 display:flex;flex-direction:column;gap:7px;transition:.15s}
#sec-elezioni .cell:hover{border-color:#33436d;transform:translateY(-1px)}
#sec-elezioni .c-top{display:flex;align-items:center;gap:7px}
#sec-elezioni .c-sym{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
#sec-elezioni .tag{font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:20px;border:1px solid var(--border)}
#sec-elezioni .tag.buy{color:var(--green);border-color:rgba(63,185,80,.4)}
#sec-elezioni .tag.sell{color:var(--red);border-color:rgba(248,81,73,.4)}
#sec-elezioni .tag.b{color:var(--blue)}
#sec-elezioni .tag.l{color:var(--accent)}
#sec-elezioni .tag.new{color:var(--accent);border-color:rgba(203,166,92,.45)}
#sec-elezioni .c-when{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
#sec-elezioni .c-vote{margin-top:1px}
#sec-elezioni .vrow{display:flex;align-items:baseline;justify-content:space-between;font-size:10.5px;color:var(--muted)}
#sec-elezioni .vrow b{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
#sec-elezioni .vbar{height:5px;border-radius:3px;background:#1c2540;margin-top:4px;overflow:hidden}
#sec-elezioni .vbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#5ca8cb,var(--accent))}
#sec-elezioni .c-res{display:flex;align-items:baseline;justify-content:space-between;padding-top:8px;
 border-top:1px dashed var(--border)}
#sec-elezioni .c-res b{font-size:16px;font-variant-numeric:tabular-nums}
#sec-elezioni .c-res span{font-size:10px;color:var(--muted)}
#sec-elezioni .pos{color:var(--green)}
#sec-elezioni .neg{color:var(--red)}
#sec-elezioni .nil{color:var(--muted);font-size:12px!important}
#sec-elezioni .warn{color:#d29922}
#sec-elezioni /* --- classifica per simbolo --- */
.rank{display:grid;gap:7px}
#sec-elezioni .rk{display:grid;grid-template-columns:82px 1fr auto;gap:10px;align-items:center;
 background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
#sec-elezioni .rk .s{font-weight:800;font-size:14px}
#sec-elezioni .rk .bar{height:6px;border-radius:3px;background:#1c2540;overflow:hidden}
#sec-elezioni .rk .bar i{display:block;height:100%;border-radius:3px}
#sec-elezioni .rk .n{text-align:right;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;white-space:nowrap}
#sec-elezioni .rk .sub2{font-size:10px;color:var(--muted);font-weight:500}
#sec-elezioni .empty{color:var(--muted);font-size:13px;padding:18px 0;text-align:center}
@media(max-width:560px){
#sec-elezioni{padding:14px 11px 44px}
#sec-elezioni .cells{grid-template-columns:1fr 1fr}
#sec-elezioni .cell{padding:9px 10px}
#sec-elezioni .c-sym{font-size:14px}
#sec-elezioni .rk{grid-template-columns:70px 1fr}
#sec-elezioni .rk .n{grid-column:1/-1;text-align:left}
}
@media(max-width:380px){
#sec-elezioni .cells{grid-template-columns:1fr}
}

/* ── schermo stretto: niente deve uscire dai bordi ────────────────────────
   La pagina originale era pensata a tutta finestra. Dentro l'app lo spazio e'
   minore (c'e' la barra laterale) e su telefono i due punti che sfondavano
   erano la classifica (tre colonne di cui una a larghezza fissa) e le celle. */
#sec-elezioni .page{max-width:100%}
#sec-elezioni .rk .n{white-space:normal}          /* il numero puo' andare a capo */
#sec-elezioni .box{overflow-x:auto}               /* mai far scorrere la PAGINA */
@media(max-width:760px){
  #sec-elezioni{padding:0}
  #sec-elezioni .kpis{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  #sec-elezioni .cells{grid-template-columns:1fr 1fr}
  #sec-elezioni header{gap:8px}
  #sec-elezioni .sub{margin-bottom:12px}
}
@media(max-width:480px){
  #sec-elezioni .cells{grid-template-columns:1fr}
  #sec-elezioni .rk{grid-template-columns:1fr;gap:5px}
  #sec-elezioni .rk .n{text-align:left}
  #sec-elezioni .kpis{grid-template-columns:1fr 1fr}
}

/* ── Laboratorio su schermo stretto ────────────────────────────────────────
   I nomi delle schede sono lunghi e senza spazi (orologio-vol-costo-non-
   direzione): dentro un pannello da 320px escono dal bordo e trascinano la
   pagina in orizzontale. Vale per la descrizione, per il numero che ha deciso
   il verdetto e per l'elenco dei buchi nella copertura. */
.lab-side, .lab-desc, .lab-numero, .lab-cop, .lab-prova{overflow-wrap:anywhere}
.lab-side code{overflow-wrap:anywhere}
/* Nessuno di questi blocchi deve poter allargare la pagina. */
#sec-laboratorio .sec-inner{max-width:100%}
.lab-body{min-width:0}

@media (max-width:560px){
  /* Il cappello ruba altezza alla sfera, che e' la cosa da guardare. */
  #sec-laboratorio .ghero{padding:14px 13px}
  #sec-laboratorio .ghero-sub{font-size:12px}
  .lab-canvas-wrap{height:min(48vh,380px)}
  .lab-side{padding:12px;font-size:12px}
  /* L'elenco dei nomi mancanti era rientrato di 3,7em per allinearlo al
     conteggio: su telefono quel rientro si mangia meta' riga. */
  .lab-cop-riga em{padding-left:0}
  .lab-cop-n{min-width:2.9em}
  .lab-cop{padding:.5rem .55rem}
  .lab-prova{padding:.5rem .55rem}
}

/* ── Laboratorio: le card in alto non devono essere tagliate ───────────────
   `.gs-card .s` era su una riga sola con i puntini: le spiegazioni degli esiti
   ("misurato e morto: dice cosa non riprovare") arrivavano al cliente monche.
   Qui sono TESTO, non un numero: vanno a capo. */
#sec-laboratorio .gs-card .s{white-space:normal;overflow:visible;text-overflow:clip}
#sec-laboratorio .gs-card{min-width:0}
#sec-laboratorio .gs-card .k{white-space:normal}
@media (max-width:620px){
  /* Due colonne da 150px + margini non ci stanno su un telefono: la terza card
     finiva mezza fuori dallo schermo. Sotto questa soglia il minimo scende. */
  #sec-laboratorio .graph-stats{grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:7px}
  #sec-laboratorio .gs-card{padding:9px 10px}
  #sec-laboratorio .gs-card .s{font-size:10.5px;line-height:1.35}
}
@media (max-width:400px){
  #sec-laboratorio .graph-stats{grid-template-columns:1fr 1fr}
}

/* ── Elezioni: chi e' rimasto fuori ────────────────────────────────────────
   Chiuso di default: e' la parte di approfondimento, non il titolo. */
#sec-elezioni details.sc{margin-top:10px;border-top:1px dashed var(--border);padding-top:8px}
#sec-elezioni details.sc > summary{cursor:pointer;font-size:11.5px;color:var(--muted);
  list-style:none;user-select:none;padding:2px 0}
#sec-elezioni details.sc > summary::-webkit-details-marker{display:none}
#sec-elezioni details.sc > summary::before{content:'▸ '}
#sec-elezioni details.sc[open] > summary::before{content:'▾ '}
#sec-elezioni .sc-nota{font-size:11px;color:var(--muted);margin:6px 0 8px;line-height:1.45}
#sec-elezioni .sc-lista{display:grid;gap:4px}
#sec-elezioni .sc-riga{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;
  font-size:11.5px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.03)}
#sec-elezioni .sc-riga.alto{background:rgba(203,166,92,.10)}
#sec-elezioni .sc-sym{font-weight:800;font-size:12.5px}
#sec-elezioni .sc-det{color:var(--muted);overflow-wrap:anywhere}
#sec-elezioni .sc-voto{font-variant-numeric:tabular-nums;font-weight:700}
#sec-elezioni .sc-riga.alto .sc-voto{color:var(--accent)}
@media(max-width:480px){
  #sec-elezioni .sc-riga{grid-template-columns:1fr auto}
  #sec-elezioni .sc-det{grid-column:1/-1}
}

/* ── Elezioni: tendine, filtri, il perche' ─────────────────────────────────
   62 tornate e ~570 righe: tutto aperto insieme non si legge. Ogni tornata e'
   una tendina chiusa (la piu' recente aperta), e i filtri lavorano su quello
   che e' gia' in pagina. */
#sec-elezioni details.torn{border:1px solid var(--border);border-radius:12px;
  background:var(--card2);margin-bottom:9px;overflow:hidden}
#sec-elezioni details.torn > summary{cursor:pointer;list-style:none;user-select:none;
  padding:11px 13px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
#sec-elezioni details.torn > summary::-webkit-details-marker{display:none}
#sec-elezioni details.torn > summary::before{content:'▸';color:var(--accent);
  margin-right:7px;font-size:11px}
#sec-elezioni details.torn[open] > summary::before{content:'▾'}
#sec-elezioni details.torn > summary:hover{background:rgba(255,255,255,.03)}
#sec-elezioni details.torn > summary b{font-size:14px;font-variant-numeric:tabular-nums}
#sec-elezioni details.torn > summary .meta{font-size:11px;color:var(--muted)}
#sec-elezioni details.torn .cells{padding:0 13px 11px}
#sec-elezioni .c-why{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.4}

/* la barra dei filtri */
#sec-elezioni .elez-filtri{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
#sec-elezioni .elez-filtri label{font-size:10.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px}
#sec-elezioni .elez-filtri select{background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:8px;padding:5px 8px;font-size:12px;font:inherit;
  font-size:12px;max-width:150px}
#sec-elezioni .f-btn{background:transparent;color:var(--muted);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;font:inherit;font-size:11.5px;cursor:pointer}
#sec-elezioni .f-btn:hover{color:var(--text);border-color:var(--accent)}
#sec-elezioni .f-conta{font-size:11px;color:var(--muted);margin-left:auto;
  font-variant-numeric:tabular-nums}

/* la legenda dei tre motivi: si legge una volta e poi si capisce ogni riga */
#sec-elezioni .legenda-mot{display:grid;gap:4px;margin-bottom:12px;font-size:11px;
  color:var(--muted);line-height:1.45}
#sec-elezioni .legenda-mot b{color:var(--text);font-weight:700}

/* le righe di chi e' rimasto fuori */
#sec-elezioni .sc-lista{display:grid;gap:5px;padding:0 13px 12px}
#sec-elezioni .sc-riga{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;
  align-items:baseline;font-size:11.5px;padding:7px 10px;border-radius:9px;
  background:rgba(255,255,255,.03);border-left:3px solid var(--border)}
#sec-elezioni .sc-riga.mot-simbolo{border-left-color:var(--accent)}
#sec-elezioni .sc-riga.mot-soglia{border-left-color:#7d8aa6}
#sec-elezioni .sc-riga.mot-posti{border-left-color:#39445f}
#sec-elezioni .sc-sym{font-weight:800;font-size:12.5px}
#sec-elezioni .sc-voto{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)}
#sec-elezioni .sc-det{color:var(--muted);overflow-wrap:anywhere}
#sec-elezioni .sc-perche{grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.45;
  overflow-wrap:anywhere}
#sec-elezioni .sc-perche b{color:var(--text)}
@media(max-width:560px){
  #sec-elezioni .elez-filtri{gap:6px 8px}
  #sec-elezioni .elez-filtri label{font-size:10px}
  #sec-elezioni .f-conta{margin-left:0;flex-basis:100%}
  #sec-elezioni .sc-riga{grid-template-columns:1fr auto}
  #sec-elezioni .sc-det{grid-column:1/-1}
  #sec-elezioni details.torn .cells,#sec-elezioni .sc-lista{padding-left:10px;padding-right:10px}
}

/* ── Laboratorio: il corpo di una verifica ────────────────────────────────
   Le schede non arrivano mai al browser; le verifiche sì, perché sono scritte
   apposta per essere lette. Qui si legge come un articolo, non come una card. */
.lab-doc{margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.lab-doc h3{font-size:13.5px;margin:.9rem 0 .3rem;color:#e9ebf2}
.lab-doc h4{font-size:12.5px;margin:.8rem 0 .25rem;color:#cba65c}
.lab-doc h5{font-size:12px;margin:.7rem 0 .2rem;color:#b7c0d4}
.lab-doc p{margin:.35rem 0;color:#b7c0d4}
.lab-doc p.lab-li{padding-left:.8rem;position:relative}
.lab-doc p.lab-li::before{content:'·';position:absolute;left:.15rem;color:#cba65c}
.lab-doc b{color:#e9ebf2}
.lab-doc i{color:#cba65c;font-style:normal}
.lab-doc code{font-size:11px;color:#cba65c;background:rgba(203,166,92,.10);
  padding:1px 4px;border-radius:4px}
.lab-doc pre{font-size:10.5px;line-height:1.45;background:rgba(0,0,0,.28);
  padding:.5rem .6rem;border-radius:.4rem;overflow-x:auto;color:#b7c0d4;margin:.5rem 0}
.lab-doc table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:11px}
.lab-doc td{padding:.28rem .4rem;border-bottom:1px solid rgba(255,255,255,.06);
  color:#b7c0d4;vertical-align:top}
.lab-doc tr:first-child td{color:#8b94ab;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom-color:rgba(255,255,255,.14)}

/* ---- "Cosa sono questi numeri" (grafo): la tendina sotto le tessere della testata.
   Chiusa di default; testo tenue perche' e' una spiegazione, non un dato. ---- */
/* TENDINA «Cosa sono questi numeri» (rifatta 01/08): era un elenco puntato grigio
   sotto la mappa. Ora: intestazione a pillola con freccia che ruota, e le voci in
   schede a due colonne — titolo in evidenza, spiegazione sotto (le prepara applyI18n
   spezzando "Titolo: testo"). */
.gnum-ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gnum-ul li{display:flex;flex-direction:column;gap:3px;line-height:1.55;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
  border-left:2px solid rgba(203,166,92,.5);border-radius:9px;padding:9px 12px}
.gnum-ul li b{color:var(--text);font-size:11.5px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase}
.gnum-ul li span{font-size:11.5px;color:var(--muted)}
@media(max-width:600px){.gnum ul{grid-template-columns:1fr}}

/* ====== POP-UP DI SPIEGAZIONE (01/08) =======================================
   Ogni numero delle card può essere cliccato e spiegarsi da solo. Il segno è la ⓘ:
   piccola, dorata, non invadente — ma abbastanza da far capire che c'è dell'altro. */
.sp-link{cursor:pointer;border-bottom:1px dotted rgba(203,166,92,.45)}
.sp-link:hover{border-bottom-color:var(--accent)}
/* la «i» in un tondo, disegnata: vedi il commento su `_sp` in app.js */
.sp-i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;
  margin-left:4px;border-radius:50%;border:1px solid rgba(203,166,92,.55);
  color:var(--accent);font:700 9px/1 Georgia,'Times New Roman',serif;font-style:italic;
  opacity:.9;vertical-align:middle}
.sp-link:hover .sp-i{opacity:1;background:rgba(203,166,92,.16)}
.sp-ov{position:fixed;inset:0;z-index:9999;background:rgba(6,9,16,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;animation:spIn .14s ease}
@keyframes spIn{from{opacity:0}to{opacity:1}}
.sp-box{max-width:520px;width:100%;background:var(--panel,#121a2b);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.sp-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:linear-gradient(180deg,rgba(203,166,92,.14),rgba(203,166,92,.03));
  border-bottom:1px solid var(--border)}
.sp-head b{font-size:14px;color:var(--text);flex:1}
.sp-x{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:2px 4px}
.sp-x:hover{color:var(--text)}
.sp-body{padding:14px 16px;font-size:13px;line-height:1.65;color:var(--muted)}
/* previsione dentro la card del nodo simbolo (vista Mercato del grafo) */
.gi-prev{background:linear-gradient(180deg,rgba(90,176,255,.10),rgba(90,176,255,.03));
  border:1px solid rgba(90,176,255,.28);border-radius:11px;padding:10px 12px}
.gi-prev-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px}
.gi-prev-h span{font-size:10.5px;color:var(--muted)}
.gi-prev .bd-duo{margin:8px 0 4px}
.gi-forte{color:#8cc6ff}
.gi-debole{color:var(--muted)}
@media(max-width:600px){.sp-box{max-height:80vh;overflow:auto}}

/* ====== SEZIONE MERCATO: barra di ricerca e testata del pannello (01/08) =====
   Con 16 strumenti la fila di pillole non bastava più: qui c'è la ricerca testuale,
   il filtro «con posizione» e il contatore. La testata del pannello dice SUBITO chi
   stai guardando e com'è messo adesso (mercato aperto, spread, polso dei tick). */
.mkt-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.mkt-search{position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center}
.mkt-search .mkt-mag{position:absolute;left:11px;font-size:12px;opacity:.7;pointer-events:none}
.mkt-search input{width:100%;padding:9px 32px 9px 32px;border-radius:10px;
  border:1px solid var(--border);background:#0f1626;color:var(--text);font-size:13px;
  font-family:inherit;outline:none;transition:border-color .15s ease}
.mkt-search input:focus{border-color:rgba(203,166,92,.55)}
.mkt-search input::-webkit-search-cancel-button{display:none}
/* 23x21 misurati: sotto la soglia in cui un dito ci prende alla prima, e sta
   DENTRO il campo di ricerca — sbagliare mira qui significa rimettersi a scrivere. */
.mkt-clear{position:absolute;right:6px;border:0;background:transparent;color:var(--muted);
  font-size:13px;cursor:pointer;padding:4px 6px;line-height:1;
  min-width:28px;min-height:28px;display:grid;place-items:center}
.mkt-clear:hover{color:var(--text)}
.mkt-fpos{border:1px solid var(--border);background:#161d2e;color:var(--muted);
  font-size:11.5px;font-weight:700;padding:8px 13px;border-radius:10px;cursor:pointer;
  white-space:nowrap;transition:.15s}
.mkt-fpos:hover{color:var(--text)}
.mkt-fpos.on{background:rgba(61,220,151,.14);color:var(--green);border-color:rgba(61,220,151,.4)}
.mkt-count{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.mkt-none{font-size:12.5px;color:var(--muted);padding:10px 2px}
/* testata del pannello */
.mkh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.mkh-sym{font-size:19px;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:9px}
.mkh-pos{font-size:10px;font-weight:700;color:var(--green);background:rgba(61,220,151,.13);
  padding:3px 8px;border-radius:7px;letter-spacing:.2px}
.mkh-chips{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.mkh-chip{font-size:11px;color:var(--muted);background:#161d2e;border:1px solid var(--border);
  padding:4px 9px;border-radius:8px;white-space:nowrap}
.mkh-chip b{color:var(--text);font-variant-numeric:tabular-nums}
.mkh-chip.ok{color:var(--green);border-color:rgba(61,220,151,.3)}
.mkh-chip.off{color:var(--muted);opacity:.85}
@media(max-width:600px){
  .mkt-count{margin-left:0;width:100%}
  .mkt-fpos{flex:1}
  .mkh{gap:8px}
  .mkh-sym{font-size:17px;width:100%}
  .mkh-chips{margin-left:0}
  .mkt-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .mkt-tab{flex:0 0 auto}
}

.mkt-fpos:disabled{opacity:.45;cursor:not-allowed}
.mkt-link{border:0;background:transparent;color:var(--accent);font-size:12.5px;
  cursor:pointer;text-decoration:underline;padding:0;font-family:inherit}

/* AVVERTENZE SOTTO LA CHAT (02/08/2026). Dock ora da' sempre una direzione: la cautela
   non vive piu' dentro la risposta — sta qui, una volta sola, sempre visibile. Discreta
   di proposito: deve essere leggibile senza rubare la scena all'operativita'. */
.chat-disclaimer{margin:0 12px 10px;padding:0 2px;font-size:11px;line-height:1.45;
  color:var(--muted,#8b94ab);opacity:.85;text-align:center;max-width:760px;
  margin-left:auto;margin-right:auto}
@media (max-width:520px){.chat-disclaimer{font-size:10px;line-height:1.4}}

/* ---------- La lente della mappa delle grandezze (grafo Mercato, owner) ---------- */
/* Sta sotto le tab e occupa tutta la riga: sono due gruppi di interruttori piccoli,
   non una barra di navigazione, e non devono competere coi tab dei conti. */
.lente{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.lente-t{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.lente-g{display:inline-flex;border:1px solid var(--border);border-radius:14px;overflow:hidden}
/* 22px misurati: sotto la soglia in cui un dito ci prende alla prima, come i menu'
   del grafo dell'Atlas che erano a 23. Sono i comandi con cui si cambia lente sulle
   grandezze — non un dettaglio decorativo. */
.lente-b{background:#141b2c;border:0;color:var(--muted);font-family:inherit;font-size:11.5px;
  font-weight:600;padding:4px 10px;cursor:pointer;transition:.15s;
  min-height:28px;display:inline-flex;align-items:center}
.lente-b+.lente-b{border-left:1px solid var(--border)}
.lente-b:hover{background:#1e273d;color:var(--text)}
.lente-b.on{background:#a98ad8;color:#0a0e18}   /* viola: e' il colore delle grandezze */
.lente-n{font-size:11.5px;color:var(--muted)}
/* L'ATTESA DELLA LENTE: pulsa, cosi' si vede che sta lavorando. Nessuna barra di
   avanzamento: non sappiamo quanto manca (dipende da quali cache sono calde), e una
   barra che non sa dove sta e' una bugia animata. */
.lente-att{color:var(--accent);animation:lenteAtt 1.1s ease-in-out infinite}
@keyframes lenteAtt{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.lente-att{animation:none;opacity:.8}}
/* MOSTRA TUTTO: bottone SOLO, quindi il bordo e l'arrotondamento se li deve mettere
   da se' — `.lente-b` nudo li lascia al gruppo `.lente-g` che lo contiene, e fuori da
   un gruppo si leggeva come testo cliccabile. Acceso prende l'accento della casa e
   non il viola della lente: quello vuol dire «grandezze», e qui non si cambia
   grandezza — si toglie la potatura. */
.lente-tutto .lente-b{border:1px solid var(--border);border-radius:14px}
.lente-tutto .lente-b.on{background:var(--accent);color:#0a0e18;border-color:var(--accent)}

/* ---------- I quattro bersagli della mappa delle grandezze (grafo Mercato) ---------- */
.gbers{margin-top:10px;display:grid;gap:8px}
.gbers-r{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:860px){.gbers-r{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gbers-r{grid-template-columns:1fr}}
.gbers-c{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:9px 11px}
.gbers-t{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.gbers-v{font-size:19px;font-weight:800;margin:2px 0 1px;font-variant-numeric:tabular-nums}
.gbers-s{font-size:11.5px;color:var(--muted);line-height:1.35}
/* i bersagli di DOMANI sono la domanda che conta: bordo viola come le grandezze */
.gbers-c.dom{border-color:rgba(169,138,216,.45)}
.gbers-f{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:9px 11px;
  font-size:11.5px;color:var(--muted);line-height:1.6}
.gbers-f b{color:var(--text)}

/* LA X DEGLI AVVISI. Era scritta in linea in due punti diversi, con misure diverse
   (font 19 e 20) e nessuna area premibile: 11x23 misurati, il bersaglio piu' piccolo
   di tutta l'app — e sta accanto al pulsante «Installa», quindi chi sbaglia mira
   ottiene l'opposto di quello che voleva. Una regola sola, cosi' la prossima X nasce
   gia' giusta invece di essere la terza copia da correggere. */
.banner-x{background:transparent;border:none;color:inherit;opacity:.6;font-size:20px;
  cursor:pointer;line-height:1;min-width:32px;min-height:32px;display:grid;
  place-items:center;flex:none;border-radius:8px}
.banner-x:hover{opacity:1;background:rgba(255,255,255,.06)}

/* ---------- Secondo piano della navigazione del Grafo: i conti dimostrativi -------- */
/* Stanno SOTTO il Mercato e il proprio conto, e pesano meno: piu' piccoli, senza
   riempimento, con un'etichetta che dice cosa sono. Sulla stessa fila avevano lo
   stesso peso visivo delle due mappe che si guardano davvero — e con tre voci la
   striscia andava in overflow, spingendo "Mercato" fuori dal bordo. */
.demo-sw{flex-basis:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.demo-t{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;opacity:.75}
.tab-demo{padding:4px 11px;font-size:11.5px;font-weight:600;background:transparent;
  border-color:rgba(255,255,255,.10);color:var(--muted)}
.tab-demo:hover{background:#1a2236;color:var(--text)}
.tab-demo.active{background:transparent;border-color:var(--accent);color:var(--accent)}

/* ---------- La lettura pratica sotto il grafo ---------- */
.prat{margin-top:10px;display:grid;gap:8px}
.prat-top{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:720px){.prat-top{grid-template-columns:1fr}}
.prat-c{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.prat-t{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.prat-v{font-size:17px;font-weight:800;margin:3px 0 2px}
.prat-s{font-size:12px;color:var(--muted);line-height:1.45}
.prat-c.buona{border-color:rgba(126,200,176,.5)}
.prat-c.scarsa{border-color:rgba(255,150,120,.45)}
.prat-r{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--border)}
.prat-r:first-of-type{border-top:0}
.prat-sym{font-weight:800;font-size:13px;min-width:78px}
.prat-f{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.prat-f b{color:var(--text);font-weight:700}
.prat-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:9px;
  border:1px solid var(--border);margin-right:5px;white-space:nowrap}
.prat-tag.att{border-color:rgba(208,138,106,.55);color:#d08a6a}
.prat-tag.rot{border-color:rgba(232,168,120,.55);color:#e8a878}
.prat-tag.zon{border-color:rgba(169,138,216,.55);color:#a98ad8}
.prat-tag.ban{border-color:rgba(126,200,176,.55);color:#7ec8b0}
.prat-note{font-size:11.5px;color:var(--muted);line-height:1.55;opacity:.9}

/* il LATO che il sistema ha preso: verde/rosso qui vogliono dire BUY/SELL e basta —
   in questa card non ci sono soldi, quindi il colore non ha l'altro significato */
.prat-dir{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;
  border-radius:9px;border:1px solid var(--border);margin-top:3px}
.prat-dir.buy{border-color:rgba(61,220,151,.6);color:#3ddc97}
.prat-dir.sell{border-color:rgba(255,107,107,.6);color:#ff6b6b}
.prat-dir.cand{border-color:var(--border);color:var(--muted);opacity:.7}
.prat-dsub{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.prat-sym{min-width:118px}

/* ---------- Il meter dei bersagli: una quantita' su scala FISSA -1..+1 ----------
   Traccia neutra, un colore solo (il viola delle grandezze: il colore segue
   l'entita', non il valore). Il segno lo porta la POSIZIONE rispetto allo zero, non
   la tinta — verde/rosso in quest'app vogliono gia' dire soldi.
   La scala NON si adatta al valore: e' il punto. Su tutta la scala possibile si vede
   che +0,106 e' quasi niente, mentre in cifre sembrava un numero.                */
.bm{position:relative;height:22px;margin:7px 0 6px;border-radius:6px;
  background:linear-gradient(90deg,rgba(40,49,73,.28),rgba(40,49,73,.55),rgba(40,49,73,.28));
  overflow:hidden}
.bm-vuoto{opacity:.35}
/* la zona di rumore: |rho| < 0,05 su una scala che va da -1 a +1 */
.bm-rumore{position:absolute;left:47.5%;width:5%;top:0;bottom:0;background:rgba(139,148,171,.14)}
.bm-zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(233,235,242,.45)}
/* la banda min-max fra i simboli: il pezzo che i numeri da soli non danno */
.bm-banda{position:absolute;top:5px;bottom:5px;background:rgba(169,138,216,.30);
  border-radius:3px;box-shadow:0 0 0 1px rgba(169,138,216,.22) inset}
/* il valore di consenso: 4px di raggio, ancorato alla traccia */
.bm-mark{position:absolute;top:3px;bottom:3px;width:4px;margin-left:-2px;border-radius:2px;
  background:#a98ad8;box-shadow:0 0 0 2px var(--panel)}
.gbers-c.dom .bm-mark{background:#c4a9ea}
.gbers-c.dom .bm-banda{background:rgba(196,169,234,.34)}
.gbers-scala{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  letter-spacing:.3px;opacity:.75;padding:0 2px}
.gbers-v{font-variant-numeric:proportional-nums}
/* le due celle di OGGI sono contesto: piu' spente di quelle di DOMANI (emphasis) */
.gbers-c:not(.dom){opacity:.72}
.gbers-c:not(.dom):hover{opacity:1}

/* ---------- Le 24 ore di un simbolo eletto: striscia di colonne ----------
   Asse del TEMPO: ordinato per ora, mai per valore. Un colore spento per tutte le
   ore + l'oro dell'accento sull'ora d'ingresso (emphasis: una sola cosa in evidenza,
   il resto contesto). L'altezza porta Q e parte da zero — una scala troncata
   inventerebbe differenze che nei dati non ci sono. */
.oq{margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.oq:first-of-type{border-top:0;margin-top:2px;padding-top:0}
.oq-head{font-size:12.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.oq-sub{font-size:11.5px;color:var(--muted)}
.oq-strip{display:flex;align-items:flex-end;gap:2px;height:44px;margin:6px 0 3px}
.oq-strip i{flex:1;background:rgba(126,200,176,.34);border-radius:2px 2px 0 0;min-height:3px;
  transition:background .12s}
.oq-strip i:hover{background:rgba(126,200,176,.7)}
.oq-strip i.mia{background:var(--accent);box-shadow:0 0 0 1px rgba(203,166,92,.35)}
.oq-ax{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);
  opacity:.7;letter-spacing:.3px}
.oq-det{margin-top:5px}
.oq-det summary{font-size:11.5px;color:var(--muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:5px}
.oq-det summary::before{content:'▸';font-size:10px;transition:transform .15s}
.oq-det[open] summary::before{transform:rotate(90deg)}
.oq-det summary:hover{color:var(--text)}
.oq-det table{width:100%;border-collapse:collapse;margin-top:6px;font-size:11.5px;
  font-variant-numeric:tabular-nums}
.oq-det th{text-align:right;color:var(--muted);font-weight:600;padding:2px 6px;
  border-bottom:1px solid var(--border)}
.oq-det th:first-child,.oq-det td:first-child{text-align:left}
.oq-det td{text-align:right;padding:2px 6px;color:var(--muted)}
.oq-det tr.mia td{color:var(--accent);font-weight:700}

/* ---------- La riga di un simbolo, ridisegnata ----------
   Il NUMERO guida, la parola lo spiega. La pastiglia porta gia' il verbo, quindi la
   frase non lo ripete: prima diceva ADDOSSO e poi «e' addosso a», e il numero che
   conta finiva sepolto a meta' frase. */
.prat-r{align-items:flex-start;gap:14px;padding:9px 0}
.pf-sym{display:block;font-weight:800;font-size:14px;letter-spacing:.2px}
.prat-sym{min-width:132px}
/* il voto dell'ora: cinque tacche, come il segnale del telefono. Una sola tinta —
   e' una quantita' ordinata, non cinque categorie; il livello lo porta QUANTE sono
   accese, non di che colore. */
.pf-voto{display:flex;align-items:center;gap:2px;margin-top:5px}
.pf-voto i{width:4px;height:9px;border-radius:1px;background:rgba(139,148,171,.25)}
.pf-voto i.on{background:#7ec8b0}
.pf-voto.v0 i.on{background:#c86a6a}          /* sotto costo: il movimento non copre lo spread */
.pf-voto.v1 i.on{background:#c8956a}
.pf-voto em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:5px;
  font-weight:700;letter-spacing:.2px}
/* i fatti: pastiglia · numero · descrizione · proporzione */
.pf{display:flex;align-items:baseline;gap:8px;padding:2px 0;flex-wrap:wrap}
.pf-v{min-width:62px;font-size:12.5px}
.pf-n{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.pf-t{font-size:12px;color:var(--muted);flex:1;min-width:150px}
.pf-px{font-variant-numeric:tabular-nums;opacity:.85}
/* quanto pesa la distanza sulla banda attesa di oggi: una percentuale si guarda
   meglio di quanto si legga */
.pf-b{position:relative;display:inline-block;width:52px;height:5px;border-radius:3px;
  background:rgba(139,148,171,.20);overflow:hidden;flex-shrink:0}
.pf-b i{position:absolute;left:0;top:0;bottom:0;background:#d08a6a;border-radius:3px}
.pf-cost{font-size:11px;color:var(--muted);opacity:.8;margin-top:4px}
@media(max-width:640px){.prat-sym{min-width:0}.prat-r{flex-direction:column;gap:6px}}

/* ---------- Le notifiche, divise per attivita' ---------- */
.nt-list{display:grid;gap:2px;margin-bottom:12px}
/* le due domande separate: «che cosa» e «da quale conto». Senza intestazione erano
   sei interruttori in fila e non si capiva che i primi tre e gli altri sono due tagli
   diversi, in AND fra loro. */
.nt-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin:2px 0 6px;padding-top:2px}
.nt-s{font-size:11.5px;color:var(--muted);line-height:1.5;margin:-2px 0 8px}
/* il silenzio va detto mentre lo si sceglie, non scoperto la settimana dopo */
.nt-muto{font-size:11.5px;line-height:1.5;color:#e8b44a;background:rgba(232,180,74,.10);
  border:1px solid rgba(232,180,74,.32);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.nt-r{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:#141b2c;
  cursor:pointer;transition:.13s}
.nt-r:hover{background:#1a2236;border-color:#39456b}
.nt-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nt-txt b{font-size:13.5px;font-weight:700}
.nt-txt span{font-size:11.5px;color:var(--muted);line-height:1.4}
/* interruttore vero, non una spunta: si capisce che e' acceso/spento a colpo d'occhio */
.nt-r input{appearance:none;width:40px;height:22px;border-radius:11px;background:#2c3450;
  border:1px solid var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:.15s}
.nt-r input::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#8b94ab;transition:.15s}
.nt-r input:checked{background:rgba(61,220,151,.28);border-color:rgba(61,220,151,.6)}
.nt-r input:checked::after{left:20px;background:#3ddc97}
.nt-r input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nt-fissa{font-size:11.5px;color:var(--muted);line-height:1.5;opacity:.85;margin-bottom:14px;
  padding-left:12px;border-left:2px solid var(--border)}
.nt-azioni{display:flex;gap:8px;justify-content:space-between}
.nt-off,.nt-ok{font-family:inherit;font-size:13px;font-weight:700;padding:10px 16px;
  border-radius:10px;cursor:pointer;border:1px solid var(--border)}
.nt-off{background:transparent;color:var(--muted)}
.nt-off:hover{color:#ff6b6b;border-color:rgba(255,107,107,.5)}
.nt-ok{background:var(--accent);color:#0a0e18;border-color:var(--accent)}

/* ===== Campanella: il registro delle notifiche (la cassetta della posta) ===== */
/* stessa taglia e umore del burger accanto: nell'header sono fratelli */
.feed-hd{position:relative;display:flex;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--border);background:#161e30;color:var(--text);align-items:center;
  justify-content:center;flex-shrink:0;cursor:pointer;transition:.15s;padding:0}
.feed-hd:hover{background:#222c44;border-color:var(--accent);color:var(--accent)}
.feed-hd svg{width:19px;height:19px}
.feed-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#e0565f;color:#fff;font-size:10.5px;font-weight:800;
  line-height:17px;text-align:center;font-style:normal}
/* la barra dei gesti di massa: a sinistra QUANTE da leggere, a destra cosa farci */
.nf-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;margin:2px 0 4px}
.nf-conta{font-size:12px;font-weight:700;color:var(--muted)}
.nf-bar-b{display:flex;gap:6px}
.nf-az{font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 10px;
  border-radius:8px;cursor:pointer;background:transparent;color:var(--muted);
  border:1px solid var(--border);transition:.13s}
.nf-az:hover:not(:disabled){color:var(--text);border-color:#39456b;background:#1a2236}
/* un bottone che non farebbe niente si vede che non lo fa, invece di mentire */
.nf-az:disabled{opacity:.38;cursor:default}
.nf-az.caldo{color:#ff6b6b;border-color:rgba(255,107,107,.5)}
.nf-list{max-height:min(62vh,460px);overflow-y:auto;margin:8px 0 14px;
  display:flex;flex-direction:column;gap:6px}
/* il GIORNO: senza questo, dieci righe di ieri sopra a una di stamattina si leggono
   tutte uguali — era il motivo per cui il pannello non si capiva piu' */
.nf-g{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:8px 2px 0;
  flex-shrink:0}
.nf-g:first-child{margin-top:0}
.nf-g::after{content:'';flex:1;height:1px;background:var(--border)}
/* flex-shrink:0 NON e' decorazione: la lista e' una colonna flex ALTA AL MASSIMO
   62vh, e con `overflow:hidden` sulla riga salta la dimensione minima automatica —
   con cinquanta notifiche le righe si schiacciavano a mezzo pixel. Beccato dal
   banco a pixel: sullo schermo dello sviluppatore, con tre righe, non si vedeva. */
.nf-r{display:flex;align-items:stretch;width:100%;overflow:hidden;flex:0 0 auto;
  background:#121927;border:1px solid var(--border);border-radius:11px;transition:.13s}
.nf-r:hover{background:#1a2236;border-color:#39456b}
/* non ancora vista: il bordo acceso resta finche' NON la si tocca (o non si preme
   «segna tutte») — e' il "cosa mi sono perso" che si stava cercando */
.nf-r.nuova{background:#18233a;border-color:#2c3c5c}
.nf-main{flex:1;min-width:0;display:block;text-align:left;font-family:inherit;
  color:inherit;background:none;border:0;padding:10px 12px;cursor:pointer}
.nf-x{flex-shrink:0;width:38px;background:none;border:0;border-left:1px solid transparent;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;
  transition:.13s}
.nf-x:hover{color:#ff6b6b;background:rgba(255,107,107,.09);border-left-color:var(--border)}
/* la riga tolta lascia il posto all'annulla, alta uguale: la lista non salta sotto il dito */
.nf-r.via{align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  background:#0f1420;border-style:dashed}
.nf-via{font-size:12.5px;color:var(--muted)}
.nf-r.via .nf-annulla{font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 10px;
  border-radius:8px;cursor:pointer;background:transparent;color:var(--accent);
  border:1px solid var(--border)}
.nf-t{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  font-weight:700;font-size:13.5px;line-height:1.3}
/* il titolo si prende lo spazio che avanza: senza, con lo `space-between` e TRE
   pezzi (titolo, ora, freccina) l'ora finiva a mezz'aria in mezzo alla riga */
.nf-t>span:first-child{flex:1 1 auto;min-width:0}
.nf-quando{font-weight:400;font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
/* ANTEPRIMA, non testo: due righe e poi si apre. Senza il taglio una notifica lunga
   occupava mezza lista e nessuno si accorgeva che sotto ce n'erano altre; col taglio
   e basta, invece, il testo spariva — per questo il taglio arriva INSIEME al
   dettaglio, mai da solo. */
.nf-b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
/* la freccina: dice che la riga si APRE. Senza, il tocco e' una funzione nascosta */
.nf-cv{flex-shrink:0;margin-left:-5px;font-size:15px;line-height:1;color:var(--muted);
  font-weight:400}
.nf-r:hover .nf-cv{color:var(--text)}
.nf-vuoto{font-size:13.5px;color:var(--muted);text-align:center;padding:20px 6px 24px}
/* sentinella (solo owner): un invio andato a NESSUNO — bordo d'allarme */
.nf-r.sent{border-color:rgba(224,86,95,.55)}
/* ---- la notifica APERTA: stessa scheda, un piano sotto ---------------------- */
.nf-d{max-height:min(62vh,460px);overflow-y:auto;margin:8px 0 14px}
/* il «torna indietro» e' l'unica via d'uscita dal dettaglio: si dimensiona come un
   bersaglio da pollice (>=34px alti), non come un link. Il banco lo misura. */
.nf-back{display:inline-flex;align-items:center;min-height:34px;font-family:inherit;
  font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid var(--border);transition:.13s}
.nf-back:hover{color:var(--text);border-color:#39456b;background:#1a2236}
.nf-d-t{font-size:15px;font-weight:800;line-height:1.35;margin:13px 2px 4px;
  overflow-wrap:anywhere}
.nf-d-q{font-size:11.5px;color:var(--muted);margin:0 2px 10px}
.nf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 10px}
.nf-chip{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
/* pre-wrap: i corpi delle push vanno a capo dove li ha mandati chi li ha scritti */
.nf-d-b{font-size:13.5px;line-height:1.55;color:var(--text);white-space:pre-wrap;
  overflow-wrap:anywhere;background:#121927;border:1px solid var(--border);
  border-radius:11px;padding:12px}
.nf-d-b.vuoto{color:var(--muted);font-style:italic}
.nf-d-n{font-size:11.5px;color:var(--muted);margin:9px 2px 0;line-height:1.4}
.nf-d-az{display:flex;justify-content:flex-end;margin-top:13px}


/* ---- IL MOSAICO DEGLI STRUMENTI (06/08/2026) ----------------------------------
   La sezione Mercato tarata sullo scalping, dentro Dock: una casella per strumento,
   VERDE quando c'e' un piano seguibile adesso — cioe' quando ha passato il cancello
   intero (candidatura + condizione del motore di famiglia), non quando «sembra
   interessante». Gli spenti restano visibili col loro motivo: sapere perche' NO vale
   quanto sapere dove SI', ed e' anche cio' che impedisce di leggere la griglia come
   una plancia di semafori da inseguire. */
.dw-mosaico{margin:14px 0 4px;width:100%}
.mos-tit{font-size:12.5px;color:var(--muted);margin:0 2px 8px;text-align:left}
.mos-tit b{color:var(--text)}
.mos-griglia{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.mos-c{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:9px 11px;min-height:58px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid var(--border);background:#141b2b;color:var(--muted);
  font-family:inherit;transition:.15s}
.mos-c:hover{border-color:var(--accent);color:var(--text)}
.mos-c b{font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--text)}
.mos-c .mos-no{font-size:10.5px;line-height:1.25;opacity:.75;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ACCESA = si puo' seguire. Verde come la striscia della guida: premendola si capisce
   cosa si sta per accendere, che e' la stessa cosa. */
.mos-c.on{border-color:rgba(61,220,151,.5);color:var(--text);
  background:linear-gradient(180deg,rgba(61,220,151,.14),rgba(61,220,151,.04))}
.mos-c.on:hover{background:linear-gradient(180deg,rgba(61,220,151,.22),rgba(61,220,151,.07))}
.mos-v{font-size:10.5px;font-weight:800;letter-spacing:.4px}
.mos-v.su{color:var(--green)} .mos-v.giu{color:var(--red)}
/* c'e' gia' una posizione qui: cambia il senso del semaforo, quindi si vede subito */
.mos-c.pos{box-shadow:inset 3px 0 0 var(--accent)}
.mos-pos{font-size:10px;font-style:normal;opacity:.9}
.mos-pos.pos{color:var(--green)} .mos-pos.neg{color:var(--red)}
.mos-attesa{font-size:12px;color:var(--muted);padding:10px 2px}

/* ---- IL POPUP DELLO STRUMENTO: quello che serve per seguirlo, e si aggiorna ---- */
/* IL POPUP PRENDE LO SCHERMO (07/08/2026, richiesta di Pietro). Era una finestrella da
   680px alta al massimo 760: dentro ci stanno diciotto sezioni, sei scale, i grafici e
   le tabelle dei voti — cioe' tutto quello che sappiamo di uno strumento — e leggerlo
   da una feritoia voleva dire scorrere all'infinito. Su telefono adesso e' pieno
   schermo senza bordi (una finestra dentro una finestra, su 390px, e' solo margine
   sprecato); su desktop e' largo quanto lo schermo meno un margine, con un tetto alto
   perche' righe lunghissime su un monitor ampio non si leggono. */
.mos-pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center}
.mos-pop[hidden]{display:none}
.mp-velo{position:absolute;inset:0;background:rgba(4,8,16,.72);backdrop-filter:blur(2px)}
.mp-box{position:relative;z-index:1;width:min(1280px,calc(100vw - 48px));
  height:calc(100vh - 48px);max-height:none;overflow-y:auto;overscroll-behavior:contain;
  border-radius:16px;border:1px solid rgba(61,220,151,.42);background:var(--panel);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* SU TELEFONO PIENO SCHERMO: niente angoli, niente margini, niente bordo. Il velo resta
   sotto ma non si vede piu' — e va bene: li' il popup NON e' una finestra sopra la
   pagina, e' la pagina dello strumento. */
@media(max-width:760px){
  .mp-box{width:100vw;height:100vh;height:100dvh;max-width:none;border-radius:0;
    border:none}
}
.mp-testa{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:12px 14px;background:var(--panel);
  border-bottom:1px solid var(--border)}
.mp-testa b{font-size:15px;letter-spacing:.4px}
.mp-x{border:none;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;
  padding:4px 8px;border-radius:8px}
.mp-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.mp-corpo{padding:12px 14px 14px}
.mp-riga .sv-riga{border-top:none;padding:8px 0;cursor:default}
/* la riga della guida porta la sua ✕ per smettere di seguire quello strumento: dentro
   il popup finiva a due centimetri dalla ✕ che CHIUDE il popup, e due croci vicine che
   fanno cose diverse sono un errore in attesa. Qui si spegne: per smettere c'e' il
   pulsante scritto in fondo, che dice cosa fa. */
.mp-riga .sv-stop{display:none}
.mp-aperte{margin-top:10px;padding:9px 11px;border-radius:10px;
  border:1px solid rgba(203,166,92,.35);background:rgba(203,166,92,.07);font-size:12.5px}
.mp-aperte i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}

/* ---------- IL PANNELLO DEL SIMBOLO (06/08/2026) ----------------------------
   Quattro blocchi visivamente DIVERSI, ed e' il punto: la differenza fra un voto
   (si somma), un'ampiezza (non vota mai), un semaforo (non si compensa) e il piano
   si deve guardare, non spiegare. Per questo il blocco 3 non e' una `<details>` come
   gli altri: e' la risposta, e sta sempre aperto. */
.dos{margin-top:12px;font-size:12.5px}
.dos-fermo{margin-bottom:8px;padding:7px 10px;border-radius:8px;font-size:11.5px;
  border:1px solid rgba(241,112,123,.4);background:rgba(241,112,123,.08);color:var(--text)}
.dos-avviso{padding:9px 11px;border-radius:8px;background:var(--panel2);color:var(--muted)}
.dos-testa{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dos-verso{font-size:16px;font-weight:800;letter-spacing:.5px}
.dos-verso.su{color:var(--green)} .dos-verso.giu{color:var(--red)}
.dos-forza{color:var(--muted)} .dos-forza b{color:var(--text);font-size:14px}
.dos-et{font-size:10.5px;letter-spacing:.4px;color:var(--muted);
  border:1px solid var(--border);border-radius:20px;padding:1px 8px}
/* LA CONFIDENZA ATTACCATA ALLA FORZA. Sono due numeri diversi — quanto le voci
   concordano ADESSO, quanto quel consenso e' valso NELLA STORIA — e una schermata che
   mostra solo il primo fa sembrare solido cio' che magari non lo e'. */
.dos-conf{margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.45}
.dos-conf i{font-style:normal;color:var(--text);font-weight:700}
.dos-pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:1px 7px;border-radius:20px;border:1px solid var(--border);white-space:nowrap}
.dos-pill.paga{color:var(--green);border-color:rgba(61,220,151,.5);background:rgba(61,220,151,.1)}
.dos-pill.perde{color:var(--red);border-color:rgba(241,112,123,.5);background:rgba(241,112,123,.1)}
.dos-pill.rumore{color:var(--accent);border-color:rgba(203,166,92,.5);background:rgba(203,166,92,.1)}

.dos-b{margin-top:9px;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}
.dos-b>summary{cursor:pointer;padding:8px 11px;list-style:none;display:flex;gap:8px;
  align-items:baseline;flex-wrap:wrap}
.dos-b>summary::-webkit-details-marker{display:none}
.dos-b>summary::before{content:'▸';color:var(--muted);font-size:10px}
.dos-b[open]>summary::before{content:'▾'}
.dos-b>summary b{font-size:12.5px}
.dos-b>summary i{font-style:normal;font-size:10.5px;color:var(--muted)}
/* LA TESTA DEL PANNELLO, in chiaro. Le due cose che decidono — quante volte ha
   indovinato e cosa restava dopo i costi — sono GRANDI; le provenienze piccole. Prima
   stava tutto su una riga sola, e una riga sola con dentro quattro affermazioni non e'
   densa: e' illeggibile. */
.dos-fbar{width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.07);
  overflow:hidden;margin-top:6px}
.dos-fbar i{display:block;height:100%;border-radius:3px}
.dos-fbar i.su{background:var(--green)} .dos-fbar i.giu{background:var(--red)}
.dc-tit{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px}
.dc-vuoto{margin-top:5px;font-size:12px;color:var(--muted)}
.dc-domanda{margin-top:7px;font-size:12px;color:var(--muted)}
.dc-grande{font-size:16px;font-weight:800;line-height:1.35;margin-top:1px}
.dc-grande b{font-size:22px}
.dc-grande.ok{color:var(--green)} .dc-grande.ko{color:var(--red)}
/* LA SCALA: da 40 a 60, col 50 marcato. Il riferimento di tutto il blocco era una
   frase; qui e' una tacca, e da che parte si sta si vede senza fare la sottrazione. */
.dc-scala{position:relative;height:26px;margin:8px 0 2px;border-radius:4px;
  background:linear-gradient(90deg,rgba(241,112,123,.20),rgba(255,255,255,.05) 50%,rgba(61,220,151,.20))}
.dc-scala i{position:absolute;top:0;bottom:9px;width:2px}
.dc-scala .dc-50{left:50%;background:var(--muted);opacity:.75}
.dc-scala .dc-io{width:3px;background:var(--text);border-radius:2px;
  box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.dc-scala span{position:absolute;bottom:0;font-size:9.5px;color:var(--muted)}
.dc-e40{left:0} .dc-e60{right:0} .dc-e50{left:50%;transform:translateX(-50%);white-space:nowrap}
.dc-scarto{margin-top:4px;font-size:12px;font-weight:700}
.dc-scarto.ok{color:var(--green)} .dc-scarto.ko{color:var(--red)}
.dc-netto{margin-top:9px;font-size:14px;font-weight:700;line-height:1.4}
.dc-netto.ok{color:var(--green)} .dc-netto.ko{color:var(--red)}
.dc-netto-det{margin-top:2px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.dc-fonte{margin-top:7px;font-size:10.5px;color:var(--muted);opacity:.85}
@media(max-width:760px){ .dc-grande{font-size:14.5px} .dc-grande b{font-size:19px}
  .dc-netto{font-size:13px} }
/* IL VERDETTO, la prima cosa che si legge aprendo uno strumento. Grande apposta: la
   stessa risposta esisteva in una riga da undici pixel e in una sezione a meta'
   pannello, e da lontano non si vedeva. Verde e rosso pieni, non accennati. */
.mp-verdetto{margin:10px 12px 0;padding:12px 14px;border-radius:13px;border:1px solid}
.mp-verdetto.si{border-color:rgba(61,220,151,.5);background:rgba(61,220,151,.10)}
.mp-verdetto.no{border-color:rgba(241,112,123,.45);background:rgba(241,112,123,.09)}
.mv-testa{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mv-testa b{font-size:17px;letter-spacing:.4px}
.mp-verdetto.si .mv-testa b{color:var(--green)}
.mp-verdetto.no .mv-testa b{color:var(--red)}
.mv-verso{font-size:12.5px;font-weight:700}
.mv-verso.su{color:var(--green)} .mv-verso.giu{color:var(--red)}
.mv-perche{margin:6px 0 0;padding-left:17px;font-size:12px;line-height:1.55;color:var(--muted)}
.mv-perche li{margin-top:2px}
.mv-perche-uno{margin-top:5px;font-size:12px;line-height:1.55;color:var(--muted)}
@media(max-width:760px){ .mp-verdetto{margin:10px 0 0;border-radius:0;border-left:none;
  border-right:none} .mv-testa b{font-size:15.5px} }
/* UNA COLONNA SOLA, anche sul largo (07/08/2026, decisione di Pietro dopo averle viste
   affiancate). Due colonne facevano vedere piu' sezioni insieme, ma rompevano l'ordine
   di lettura: le diciassette schede sono in una sequenza voluta — prima chi vota, poi
   se si puo' entrare, poi quanto si muove — e su due colonne l'occhio salta da destra a
   sinistra e quella sequenza sparisce. Al posto della larghezza c'e' l'INDICE qui
   sotto, che e' il modo giusto di non scorrere: si va dove si vuole invece di vedere
   tutto insieme. Il corpo resta incolonnato e leggibile a qualunque larghezza. */
.dos{max-width:940px;margin:0 auto}

/* L'INDICE DELLE SEZIONI. Con diciassette schede chiuse, trovare «Il piano» voleva dire
   scorrere e leggere titoli; adesso e' un tocco. Le pastiglie vanno a capo invece di
   scorrere di lato: una riga che scorre in orizzontale nasconde meta' delle voci, e una
   voce nascosta in un indice e' una voce che non esiste. */
.dos-indice{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;padding-bottom:10px;
  border-bottom:1px solid var(--border)}
.dos-i{padding:5px 11px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:700;min-height:26px;transition:.15s;
  border:1px solid var(--border);background:var(--panel2);color:var(--muted)}
.dos-i:hover{color:var(--text);border-color:var(--accent)}
.dos-i.mira{background:rgba(203,166,92,.16);border-color:var(--accent);color:var(--accent)}
@media(max-width:760px){ .dos-i{font-size:11px;padding:5px 9px} }
.dos-corpo{padding:0 11px 10px}

/* IL TEMPO DI UNA DISTANZA. Due colori diversi perche' sono due cose diverse: quello
   pieno e' il tempo MISURATO sui tick, quello smorzato e' l'equivalente in movimento
   tipico — la stessa distanza in un'altra unita', non una previsione. */
.li-tempo{color:var(--accent)} .li-tempo.eq{color:var(--muted);opacity:.85}
.pl-tempo{margin-top:2px;font-size:11px;color:var(--accent)}
.pl-tempo.eq{color:var(--muted)}
/* IL PREZZO E LE SUE RIGHE NEL TEMPO. La scala qui sotto risponde a «sono ammassate?»;
   questo risponde a «ci sto andando incontro?», che e' la domanda che si fa guardando un
   grafico e che un asse dei prezzi non puo' fare. Le medie hanno la LORO traiettoria: su
   un asse fermo sembravano righe orizzontali come i supporti, e non lo sono. */
.lg{position:relative;height:150px;margin:8px 0 4px;padding-right:64px;
  border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,.015);
  overflow:hidden}
.lg-svg{position:absolute;left:0;top:0;bottom:0;right:64px;width:calc(100% - 64px);
  height:100%;display:block}
.lg-px{stroke:var(--text);stroke-width:1.8px;stroke-linejoin:round}
.lg-m{stroke-width:1.1px;opacity:.85}
.lg-m.med{stroke:#c07ad8} .lg-m.ma14{stroke:var(--accent)}
.lg-m.ma30{stroke:#6ea8ff} .lg-m.ma121{stroke:var(--muted)}
.lg-m.ma365{stroke:var(--green);opacity:.6}
.lg-fissa{stroke-width:1px;stroke-dasharray:4 4;opacity:.5}
.lg-fissa.sr{stroke:#6ea8ff} .lg-fissa.rev{stroke:var(--green)}
/* le etichette stanno nella colonna a destra: dentro l'svg si deformerebbero */
.lg-e{position:absolute;right:4px;transform:translateY(-50%);font-size:9.5px;
  font-weight:700;white-space:nowrap;background:var(--bg);padding:0 3px;border-radius:3px}
.lg-e.med{color:#c07ad8} .lg-e.ma14{color:var(--accent)}
.lg-e.ma30{color:#6ea8ff} .lg-e.ma121{color:var(--muted)}
.lg-e.ma365{color:var(--green)}
/* la riga che sta FUORI dalla scala: la freccia dice da che parte, e l'etichetta resta
   appesa al bordo invece di sparire o di stiracchiare il grafico */
.lg-e.fuori{opacity:.6}
.lg-ora{position:absolute;left:0;right:64px;height:0;transform:translateY(-50%);
  border-top:1px dashed var(--text);opacity:.55}
.lg-ora-e{position:absolute;right:4px;transform:translateY(-50%);font-size:10px;
  font-weight:800;color:var(--text);background:var(--bg);padding:0 3px;border-radius:3px}
@media(max-width:760px){ .lg{height:126px;padding-right:56px}
  .lg-svg{right:56px;width:calc(100% - 56px)} .lg-ora{right:56px} }
/* LA SCALA DELLE LINEE. Non un grafico dei prezzi — quello sta in cima al popup — ma
   un ASSE DEI PREZZI su cui le righe si vedono AMMASSATE o sparse: tre livelli allo
   stesso prezzo sono un muro, tre sparsi no, e in elenco hanno lo stesso aspetto.
   La tacca sta al suo posto vero; l'etichetta puo' scivolare in giu' per non
   sovrapporsi — e' il compromesso giusto, perche' la posizione la porta la tacca. */
.li-sc{position:relative;margin:10px 0 4px;padding-left:96px;
  border-left:1px solid var(--border)}
.li-t{position:absolute;left:-4px;width:9px;height:2px;border-radius:1px}
.li-t.ma{background:var(--accent)} .li-t.sr{background:#6ea8ff}
.li-t.sw{background:var(--muted)} .li-t.rev{background:var(--green)}
.li-t.med{background:#c07ad8} .li-t.al{background:var(--muted)}
.li-ora{position:absolute;left:-8px;right:0;height:1px;background:var(--text);opacity:.55}
.li-ora-e{position:absolute;left:0;width:88px;text-align:right;font-size:11px;
  font-weight:800;color:var(--text)}
.li-e{position:absolute;left:104px;right:0;font-size:10.5px;line-height:1.3;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.li-e>b{font-weight:800;font-size:11px}
.li-e>span{color:var(--muted)}
.li-e>em{font-style:normal;color:var(--muted);margin-left:auto;white-space:nowrap}
.li-e.ma>b{color:var(--accent)} .li-e.sr>b{color:#6ea8ff}
.li-e.rev>b{color:var(--green)} .li-e.med>b{color:#c07ad8}
.li-lon{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.li-lon span{font-size:11px;color:var(--muted)}
.li-lon b{color:var(--text);font-weight:700}
.li-lon em{font-style:normal}
@media(max-width:760px){
  .li-sc{padding-left:74px}
  .li-ora-e{width:66px;font-size:10px}
  .li-e{left:82px;font-size:10px}
  /* `nowrap` qui debordava di 21px sul telefono: la riga porta pip, percentuale E il
     tempo, e su 396px non ci sta. Va a capo — la colonna e' gia' tutta sua. */
  .li-e>em{margin-left:0;width:100%;white-space:normal}
}
/* GLI ANNI DEL BACKTEST, IN DENARO. Niente scala sull'asse Y: si vede il VERSO e la
   proporzione, mai il totale in euro — che e' la regola delle vetrine e vale anche qui.
   Serve a smontare la media di quindici anni: su EURUSD i primi tredici sono verdi e
   gli ultimi tre rossi, e una media sola non lo puo' dire. */
/* LO ZERO STA A META': le barre positive salgono, le negative SCENDONO. Prima
   crescevano tutte verso l'alto e il verso lo diceva solo il colore — chi non
   distingue rosso e verde leggeva «crescita» su tre anni di perdite. */
.bt-anni{display:flex;align-items:flex-start;gap:3px;height:78px;margin:9px 0 2px;
  padding:0 2px;position:relative}
.bt-anni::before{content:'';position:absolute;left:2px;right:2px;top:32px;height:1px;
  background:var(--border)}
.bt-a{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;
  position:relative;height:100%}
.bt-a>i{display:block;width:100%;max-width:22px;border-radius:2px}
.bt-a.su{justify-content:flex-end}
.bt-a.su>i{background:var(--green);opacity:.75}
.bt-a.giu>i{background:var(--red);opacity:.75}
/* l'anno senza operazioni resta VUOTO e largo come gli altri: comprimendolo, cinque
   anni di silenzio sparivano e le colonne si toccavano come se fossero consecutive */
.bt-a.vuoto>i{height:0}
.bt-a.vuoto>span{opacity:.35}
/* l'ultimo anno e' parziale: tratteggiato, non pieno */
.bt-a.parziale>i{opacity:.4;outline:1px dashed currentColor;outline-offset:-1px}
.bt-a>span{font-size:9px;color:var(--muted);margin-top:3px;line-height:1;
  position:absolute;bottom:0}
@media(max-width:760px){ .bt-anni{height:52px;gap:2px} .bt-a>span{font-size:8px} }
/* LA FORMA DEL MESE. Un disegno solo, e risponde alla domanda che il titolo fa: due
   mesi con lo stesso massimo, lo stesso minimo e la stessa variazione possono essere
   una salita dritta o cinquanta rimbalzi, e in elenco sono identici.
   preserveAspectRatio="none" allunga il tracciato a tutta larghezza — a qualunque
   schermo — e `vector-effect:non-scaling-stroke` gli impedisce di deformare il tratto,
   che e' l'unico difetto vero di quel trucco. I punti stanno FUORI dall'svg, in
   percentuale sul contenitore, cosi' restano tondi. */
.sk{position:relative;height:132px;margin:8px 0 10px;border-radius:9px;
  border:1px solid var(--border);background:rgba(255,255,255,.015);overflow:hidden}
.sk-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk-linea{fill:none;stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round}
.sk-linea.su{stroke:var(--green)} .sk-linea.giu{stroke:var(--red)}
.sk-area{stroke:none;opacity:.12}
.sk-area.su{fill:var(--green)} .sk-area.giu{fill:var(--red)}
/* la scatola della Reversione dietro la serie: si vede se il mese ci ha vissuto dentro */
.sk-zona{position:absolute;left:0;right:0;background:var(--accent);opacity:.09;
  border-top:1px dashed rgba(255,255,255,.18);border-bottom:1px dashed rgba(255,255,255,.18)}
.sk-p{position:absolute;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--bg)}
.sk-p.max{background:var(--green)} .sk-p.min{background:var(--red)}
/* il prezzo di ADESSO viene da un'altra fonte: tratteggiato, non un punto della serie */
.sk-ora{position:absolute;left:0;right:0;height:0;transform:translateY(-50%);
  border-top:1px dashed var(--text);opacity:.5}
.sk-ora-e{position:absolute;right:5px;transform:translateY(-50%);font-size:10.5px;
  font-weight:800;color:var(--text);background:var(--bg);padding:0 4px;border-radius:4px}
.sk-est{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:3px 0;
  font-size:11.5px}
.sk-est>b{font-weight:700;min-width:132px;font-size:11.5px}
.sk-est>b.max{color:var(--green)} .sk-est>b.min{color:var(--red)}
.sk-est>span{font-weight:800;font-variant-numeric:tabular-nums}
.sk-est>i{font-style:normal;font-size:10.5px;color:var(--muted)}
.sk-est>em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:auto;
  white-space:nowrap}
.sk-bil{display:flex;height:4px;border-radius:3px;overflow:hidden;margin:1px 0 5px}
.sk-bil>i{display:block} .sk-bil>i.su{background:var(--green);opacity:.7}
.sk-bil>i.giu{background:var(--red);opacity:.7}
@media(max-width:760px){
  .sk{height:112px}
  .sk-est>b{min-width:100%}
  .sk-est>em{margin-left:0}
}
/* IL RITMO. Un gradino per riga, e sotto le TRE SESSIONI — il numero piu' azionabile
   che abbiamo per lo scalping, calcolato da mesi e mai mostrato: 2 pip su EURUSD sono
   2,2 minuti a New York e 8,8 in Asia. La piu' veloce e' evidenziata. */
.ri{padding:8px 10px;border-radius:9px;border:1px solid var(--border);margin-top:7px;
  background:rgba(255,255,255,.015)}
.ri-t{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ri-t>b{font-size:13px;font-weight:800;min-width:56px}
.ri-m{font-size:12.5px;font-weight:700;color:var(--accent)}
.ri-sp{margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
.ri-r{margin-top:2px;font-size:11px;color:var(--muted)}
.ri-ses{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.ri-ses span{padding:2px 8px;border-radius:20px;font-size:10.5px;color:var(--muted);
  background:rgba(255,255,255,.04)}
.ri-ses span>b{font-weight:800}
.ri-ses span.best{background:rgba(61,220,151,.14);color:var(--green)}
@media(max-width:760px){ .ri-sp{margin-left:0;width:100%} }
/* IL PROSSIMO ORDINE, riordinato. La riga «quando» e' la domanda: sta prima e in
   grande. Le regole generali — identiche per ogni simbolo — vanno in fondo, piccole:
   stavano in cima e spingevano giu' proprio la risposta. */
.pn-q{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.pn-q>span{min-width:104px;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted)}
.pn-q>b{flex:1;min-width:150px;font-size:13px;font-weight:800}
.dos-pm>.pn-q:first-of-type>b{font-size:14.5px;color:var(--accent)}
.pn-c{margin-top:2px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.pn-r{margin-top:2px;font-size:11px;line-height:1.5;color:var(--muted)}
.pn-r.ko{color:var(--red)}
/* «mercato chiuso»: non e' un errore e non e' un dettaglio — e' la ragione per cui
   il numero sopra e' piu' grande di quanto l'orologio da parete direbbe. */
.pn-r.mkt{color:var(--accent);border-left:2px solid var(--accent);padding-left:6px}
.pn-mis{margin-top:6px;padding:6px 8px;border-radius:7px;background:rgba(203,166,92,.08);
  font-size:11.5px;line-height:1.5}
.pn-mis>b{color:var(--accent)}
.pn-mis>em{display:block;font-style:normal;font-size:10.5px;color:var(--muted)}
.pn-reg{margin-top:7px;font-size:10px;line-height:1.5;color:var(--muted);opacity:.8}
.dos-pm.operante{border-color:rgba(61,220,151,.4)}
.dos-pm.non_eletto{opacity:.7}
@media(max-width:760px){ .pn-q>span{min-width:100%} }
/* HAI GIA' DEI SOLDI QUI. Una scheda per posizione, col bordo del segno. La riga che
   conta per chi GESTISCE una pendente e' «mancano 1h42» — quella che prima non c'era:
   si sapeva da quante ore era aperta, non quante ne restassero. */
.po{padding:9px 11px;border-radius:10px;border:1px solid var(--border);margin-top:8px;
  background:rgba(255,255,255,.015);border-left:3px solid var(--border)}
.po.su{border-left-color:var(--green)} .po.giu{border-left-color:var(--red)}
.po-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.po-t>b{font-size:12.5px;font-weight:800}
.po-t>b.su{color:var(--green)} .po-t>b.giu{color:var(--red)}
.po-l{font-size:11px;color:var(--muted)}
.po-p{margin-left:auto;font-size:14px;font-weight:800;white-space:nowrap}
.po-p.su{color:var(--green)} .po-p.giu{color:var(--red)}
.po-p i{font-style:normal;font-size:11px;opacity:.85}
.po-n{margin-top:3px;font-size:11.5px;color:var(--muted)}
.po-u{margin-top:4px;font-size:12px;font-weight:700}
.po-u.ok{color:var(--accent)} .po-u.ko{color:var(--red)}
.po-c{margin-top:2px;font-size:11px;color:var(--muted)}
/* I TRE MOTORI, tre schede separate. Prima erano un flusso unico diviso da filetti e
   non si capiva dove finisse uno e cominciasse l'altro — proprio la cosa che questa
   scheda deve rendere evidente, visto che i tre possono dire cose opposte. Il bordo
   sinistro porta lo stato: verde chi opera, rosso chi non e' nemmeno eletto. */
.mo{padding:9px 11px;border-radius:10px;border:1px solid var(--border);margin-top:8px;
  background:rgba(255,255,255,.015);border-left:3px solid var(--border)}
.mo.operante{border-left-color:var(--green);background:rgba(61,220,151,.05)}
.mo.non_eletto{border-left-color:rgba(241,112,123,.5);opacity:.72}
.mo-t{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.mo-t>b:first-child{font-size:12.5px;font-weight:800}
.mo-v{margin-left:auto;font-size:12.5px;font-weight:800}
.mo-v.su{color:var(--green)} .mo-v.giu{color:var(--red)}
.mo-muto{margin-left:auto;font-size:11px;color:var(--muted)}
.mo-cond{margin-top:1px;font-size:10.5px;color:var(--muted)}
.mo-n{margin-top:5px;font-size:12px}
.mo-stato{margin-top:3px;font-size:12px;font-weight:700;color:var(--muted)}
.mo-stato.ok{color:var(--green)}
.mo-r{margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--muted)}
/* LA SCALA DELL'OSCILLATORE. «77, compra sotto 20, vende sopra 80» chiede di tenere a
   mente tre numeri; una tacca su una riga si guarda e basta. */
.mo-osc{position:relative;display:flex;height:10px;margin:7px 0 2px;border-radius:5px;
  overflow:hidden;background:rgba(255,255,255,.05)}
.mo-osc i{display:block;height:100%}
.mo-osc i.zc{background:rgba(61,220,151,.30)}
.mo-osc i.zn{background:rgba(255,255,255,.05)}
.mo-osc i.zv{background:rgba(241,112,123,.30)}
.mo-osc b{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;
  background:var(--text);border-radius:2px;box-shadow:0 0 0 2px rgba(10,14,24,.7)}
.mo-osc-e{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.mo-osc-ora{color:var(--text);font-weight:800;font-size:11.5px}
.mo-ma{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:3px;
  font-size:11.5px}
.mo-ma>span{min-width:52px;color:var(--muted)}
.mo-ma>b{font-weight:700}
.mo-ma>i{font-style:normal;color:var(--muted)}
/* LA VARIAZIONE IN PERCENTUALE. Sta sempre attaccata al numero che confronta, e ha
   sempre lo stesso aspetto: e' una pastiglia, non una parola, cosi' l'occhio la trova
   senza leggere. Verde sopra il riferimento, rossa sotto, grigia a parita'. */
.dv-pct{display:inline-block;padding:0 5px;border-radius:20px;font-size:10px;
  font-weight:800;letter-spacing:.2px;vertical-align:1px;
  background:rgba(255,255,255,.07);color:var(--muted)}
.dv-pct.su{background:rgba(61,220,151,.16);color:var(--green)}
.dv-pct.giu{background:rgba(241,112,123,.16);color:var(--red)}
/* COSA ESCE / COS'E' USCITO. La meta' passata e' la piu' utile: e' l'unico posto in
   cui la previsione dello studio («allarga x1,91») si mette accanto a quello che e'
   successo davvero. Se un giorno smettono di somigliarsi, si vede qui. */
.ev-r{padding:8px 10px;border-radius:9px;border:1px solid var(--border);margin-top:7px;
  background:rgba(255,255,255,.015)}
.ev-r.passato{border-left:3px solid rgba(203,166,92,.5)}
.ev-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ev-t>b{font-size:12.5px;font-weight:800}
.ev-q{margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
.ev-x{margin-top:3px;font-size:11.5px;color:var(--text)}
.ev-x.ko{color:var(--red)}
.ev-n{margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.ev-n b{color:var(--text)} .ev-n em{font-style:normal;color:var(--accent)}
.ev-mos{margin-top:3px;font-size:11.5px;line-height:1.5}
.ev-mos.forte{color:var(--accent);font-weight:700}
.ev-mos.ko{color:var(--muted);opacity:.85}
.ev-conf{margin-top:2px;font-size:11px;color:var(--muted)}
/* ── NEWS: le due meta' si distinguono a colpo d'occhio ────────────────────────
   In arrivo = bordo acceso a sinistra (e' quello che devi ancora subire); gia' uscite
   = spento. Prima erano righe identiche una sotto l'altra e la scheda sembrava una
   lista sola. */
/* LE DUE GAMBE, una accanto all'altra col ruolo sotto. Prima erano un `em` dentro uno
   `span` con display:block: «EUR base · USD quota» usciva impilato in quattro righe. */
/* ── CHI SI STA MUOVENDO: la classifica delle valute, zero al centro.
   Le due gambe dello strumento sono ACCESE: la risposta e' vedere dove stanno loro
   dentro la fila, non leggere due numeri. */
.fz{margin:8px 0 4px;padding:7px 9px;border-radius:9px;border:1px solid var(--border);
  background:rgba(255,255,255,.015)}
.fz-r{display:grid;grid-template-columns:38px 1fr 58px 62px;align-items:center;gap:7px;
  padding:2px 0;font-size:10.5px;color:var(--muted)}
.fz-c{font-weight:700;letter-spacing:.5px}
.fz-b{position:relative;height:9px;border-radius:2px;
  background:linear-gradient(90deg,transparent 49.6%,var(--border) 49.6%,
    var(--border) 50.4%,transparent 50.4%)}
.fz-b>i{position:absolute;top:1px;bottom:1px;border-radius:2px;opacity:.55}
.fz-b>i.su{background:var(--green)} .fz-b>i.giu{background:var(--red)}
.fz-r>b{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.fz-r>b.su{color:var(--green)} .fz-r>b.giu{color:var(--red)}
.fz-r>em{font-style:normal;font-size:9px;opacity:.6;text-align:right}
/* la gamba dello strumento: accesa, e con la sua riga in rilievo */
.fz-r.sua{color:var(--text);background:rgba(203,166,92,.09);border-radius:5px}
.fz-r.sua .fz-c{color:var(--accent);font-size:12px}
.fz-r.sua .fz-b>i{opacity:1}
@media(max-width:760px){
  .fz-r{grid-template-columns:34px 1fr 52px;gap:5px}
  .fz-r>em{display:none}
  /* i rientri seguono le colonne del telefono: 34+5 a sinistra, 52+5 a destra */
  .fz-asse{padding-left:39px;padding-right:57px}
}
.ctx-gambe{display:flex;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.ctx-g{flex:1;min-width:130px;padding:7px 10px;border-radius:9px;
  border:1px solid var(--border);background:rgba(255,255,255,.015)}
.ctx-g>b{display:block;font-size:15px;font-weight:800;color:var(--accent);
  letter-spacing:.5px}
.ctx-g>span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
/* quanto si e' mossa questa gamba, dentro il suo riquadro */
.ctx-g>u{display:inline-block;text-decoration:none;margin-top:4px;font-size:13px;
  font-weight:800;font-variant-numeric:tabular-nums}
.ctx-g>u.su{color:var(--green)} .ctx-g>u.giu{color:var(--red)}
/* e le sue news: e' il PERCHE' del numero qui sopra */
.ctx-g>em{display:block;font-style:normal;font-size:10px;color:var(--muted);
  margin-top:2px;line-height:1.4}
.ctx-g>em.quiete{opacity:.5}
/* la gamba che comanda: cornice accesa, cosi' la risposta si vede prima di leggere */
.ctx-g.capo{border-color:rgba(203,166,92,.55);background:rgba(203,166,92,.07)}
/* gli estremi dell'asse: senza, la riga in mezzo non si sa cosa sia */
/* ⚠ NON UNA GRIGLIA: con tre `span` tutti in colonna 2 e due margini negativi le tre
   parole si ammucchiavano a sinistra sul telefono. Qui e' una riga sola, larga
   ESATTAMENTE quanto la barra (i rientri sono le colonne fisse piu' i vuoti), e le tre
   parole si spingono agli estremi da sole. */
.fz-asse{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);
  opacity:.65;margin-bottom:3px;padding-left:45px;padding-right:134px}
.ev-r.futuro{border-left:3px solid var(--accent)}
.ev-r.passato{border-left:3px solid var(--border)}
.ev-vuoto{padding:9px 10px;border-radius:9px;border:1px dashed var(--border);
  margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.5}
.ev-nota{margin-top:4px;font-size:10.5px;color:var(--accent);opacity:.9}
/* le uscite dello stesso orario, una riga ciascuna dentro il gruppo */
.ev-u{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:3px 0;font-size:11.5px;border-top:1px solid rgba(40,49,73,.55)}
.ev-u:first-of-type{border-top:none}
.ev-u>b{font-weight:700;color:var(--text)}
.ev-u>span{color:var(--muted)}
.ev-sor{font-style:normal;margin-left:auto;font-size:10.5px;color:var(--accent);
  white-space:nowrap}
.ev-multi{margin-left:8px;font-size:10px;color:var(--accent);
  border:1px solid rgba(203,166,92,.45);border-radius:20px;padding:0 6px}
/* ⚠ IL MOVIMENTO NON E' BUONO NE' CATTIVO: e' ampiezza. Niente verde e niente rosso —
   solo «notevole» quando supera il solito di un terzo. La pastiglia rossa sotto 1,00
   diceva che muoversi poco e' un difetto, e non lo e'. */
.ev-mos{color:var(--muted)}
.ev-mos.forte{color:var(--text);font-weight:600}
.ev-mos.forte::before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
/* i pallini dell'importanza: pieni quanti ne dichiara il calendario, spenti gli altri */
.ev-imp{font-size:8px;letter-spacing:1px;color:var(--accent);white-space:nowrap}
.ev-imp>i{font-style:normal;color:var(--border)}
.db-esito.quiete{color:var(--muted);font-weight:700}
@media(max-width:760px){
  .ev-q{margin-left:0;width:100%}
  .ev-sor{margin-left:0;width:100%}
}
/* LA BARRA DELLE PROPORZIONI. Non un secondo grafico dei prezzi — quello c'e' gia' in
   cima al popup — ma la risposta a un'altra domanda: quanto e' lontano ciascuno dei due
   rispetto all'altro. Il rischio/rendimento smette di essere un rapporto da leggere e
   diventa una forma. L'asse e' il prezzo: a sinistra il livello piu' basso. */
.pl-barra{margin:10px 0 4px}
.pl-b-eti{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;
  color:var(--muted)}
.pl-b-eti span.re{color:var(--red);font-weight:700}
.pl-b-eti span.ob{color:var(--green);font-weight:700}
.pl-b-ora{color:var(--text);font-weight:800;font-size:11.5px}
.pl-b-riga{position:relative;display:flex;height:9px;margin:3px 0;border-radius:5px;
  overflow:hidden;background:rgba(255,255,255,.05)}
.pl-b-riga i{display:block;height:100%}
.pl-b-riga i.re{background:linear-gradient(90deg,rgba(241,112,123,.75),rgba(241,112,123,.28))}
.pl-b-riga i.ob{background:linear-gradient(90deg,rgba(61,220,151,.28),rgba(61,220,151,.75))}
.pl-b-px{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;
  background:var(--text);border-radius:2px;box-shadow:0 0 0 2px rgba(10,14,24,.7)}
@media(max-width:760px){ .pl-b-eti{font-size:10px} }
/* IL PIANO. I due livelli come schede, non come righe: ognuno porta il suo prezzo, la
   distanza in pip E in giornate tipiche (l'unico metro con cui due strumenti si
   confrontano) e SOPRATTUTTO la sua ragione — «una resistenza toccata 3 volte» e' il
   motivo per cui l'obiettivo sta li'; «182,616» non e' un motivo. */
.pl-testa{margin:8px 0 6px;font-size:12.5px;font-weight:700}
.pl-liv{display:flex;flex-direction:column;gap:7px}
.pl-l{padding:8px 10px;border-radius:9px;border:1px solid var(--border);
  background:rgba(255,255,255,.015);border-left-width:3px}
.pl-l.ob{border-left-color:var(--green)} .pl-l.re{border-left-color:var(--red)}
.pl-l-t{display:flex;align-items:baseline;gap:8px}
.pl-l-t>b{font-size:12px;font-weight:800;letter-spacing:.2px}
.pl-px{margin-left:auto;font-size:14px;font-weight:800}
.pl-d{margin-top:2px;font-size:11.5px;color:var(--text)}
.pl-perche{margin-top:1px;font-size:11px;color:var(--muted)}
.pl-rr{margin-top:8px;font-size:12.5px;font-weight:700}
.pl-rr.ok{color:var(--green)} .pl-rr.ko{color:var(--red)}
.pl-c{margin-top:4px;font-size:11.5px;line-height:1.55}
.pl-c.ko{color:var(--red)}
.pl-c b.ko{color:var(--red)}
.dos-b.b-piano{border-color:rgba(203,166,92,.28)}
/* QUANTO SI MUOVE. Il numero che conta e' uno: quante volte il movimento di
   quest'ora vale il costo d'ingresso. Prima era «Q 11,69» — il nome di una variabile
   nostra — accanto a «ORO», che e' il nome interno del regime migliore: due gerghi in
   quattro centimetri, e il numero piu' utile della scheda illeggibile. */
.qm-grande{margin:8px 0 2px;font-size:15px;font-weight:800;line-height:1.35}
.qm-rif{font-size:12px;line-height:1.5;color:var(--muted)}
.qm-rif.ko{color:var(--red)}
.qm-attesa{margin-top:8px;font-size:12.5px;line-height:1.5}
.qm-attesa b.su{color:var(--green)} .qm-attesa b.giu{color:var(--red)}
.qm-tit{margin:11px 0 3px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted)}
.qm-lista{display:flex;flex-direction:column;gap:1px}
.qm-g{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 7px;
  border-radius:6px;font-size:11.5px}
.qm-g:nth-child(odd){background:rgba(255,255,255,.02)}
.qm-g>b{min-width:88px;font-weight:700}
.qm-g>span{flex:1;min-width:130px;color:var(--text)}
.qm-g>em{font-style:normal;font-size:10.5px;color:var(--muted)}
@media(max-width:760px){ .qm-g>b{min-width:100%} .qm-g>span{min-width:100%} }
/* IL MOMENTO. Due fatti, non due giudici: la gamba in corso dice DOVE sei, l'istante
   dice QUANDO premere — dentro una direzione scelta altrove. Il colore sta solo su M1,
   che e' l'unica condizione vera: colorare M5 di rosso perche' «va dall'altra parte»
   direbbe pericolo dove c'e' un fatto neutro, ed e' misurato che non filtra. */
.dm-lead{margin:8px 0 6px;padding:8px 10px;border-radius:9px;font-size:12px;
  line-height:1.5;background:rgba(255,255,255,.03);color:var(--muted)}
.dm-lead.ok{background:rgba(61,220,151,.10);color:var(--green)}
.dm-lead.ko{background:rgba(255,255,255,.04)}
.dm-r{padding:8px 10px;border-radius:9px;border:1px solid var(--border);margin-top:7px;
  background:rgba(255,255,255,.015)}
.dm-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dm-t>b{font-size:12.5px;font-weight:800}
.dm-t>em{font-style:normal;font-size:10.5px;color:var(--muted)}
.dm-v{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.dm-v.ok{color:var(--green)} .dm-v.ko{color:var(--red)}
.dm-n{margin-top:3px;font-size:12px;line-height:1.5}
.dm-rif{margin-top:2px;font-size:11px;line-height:1.5;color:var(--muted)}
.dm-fonte{margin-top:2px;font-size:10px;color:var(--muted);opacity:.8}
/* LA LISTA DEI CONTROLLI. Ogni condizione con il suo esito — anche quando passa: una
   scheda che risponde solo quando la risposta e' no e' mezza scheda, e si finisce per
   riempirla con quello che avanza. Il segno a sinistra, l'etichetta al centro, il
   valore a destra: e' il valore che dice se una riga verde sta per girare. */
.dos-ctrl{display:flex;flex-direction:column;gap:1px;margin:8px 0 4px}
.dc-r{display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:7px;
  font-size:12px}
.dc-r>b{width:13px;text-align:center;font-size:12.5px;font-weight:800}
.dc-r>span{flex:1;min-width:0}
.dc-r>i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.dc-r.ok>b{color:var(--green)}
.dc-r.ko{background:rgba(241,112,123,.10)}
.dc-r.ko>b{color:var(--red)} .dc-r.ko>span{color:var(--red);font-weight:700}
.dc-r.ignoto{background:rgba(255,255,255,.04)}
.dc-r.ignoto>b,.dc-r.ignoto>span{color:var(--muted)}
/* IL MOMENTO: le due scale, con il loro RUOLO scritto accanto. «M5» e «M1» da soli
   sono due sigle; «la scala che decide» e «il cronometro» dicono a cosa servono. */
.dos-b.b-momento{border-color:rgba(203,166,92,.28)}
.dos-scala em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:6px}
/* LA FACCIA DELLA SCHEDA porta la risposta anche da chiusa: diciassette tendine che
   dicono solo il proprio titolo sono un menu, non un cruscotto — e per saperne una
   bisogna aprirla. E' l'unico motivo per cui vale la pena farle sembrare card. */
.db-esito{margin-left:auto;font-size:13px;font-weight:800;letter-spacing:.2px;
  white-space:nowrap}
.db-esito em{font-style:normal;font-size:9.5px;opacity:.7;font-weight:700}
.db-esito.su{color:var(--green)} .db-esito.giu{color:var(--red)}
.dos-b>summary{position:relative}
/* CHI VOTA — la frase che spiega il meccanismo, e i numeri detti a parole */
.dv-come{margin:8px 0 2px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.dv-dice{margin-top:2px;font-size:11.5px;line-height:1.5}
.dv-dice b{font-weight:800}
.dv-dice b.su{color:var(--green)} .dv-dice b.giu{color:var(--red)} .dv-dice b.zero{color:var(--muted)}
.dv-dice span{color:var(--muted)}
.dv-eq-p{margin-top:5px;font-size:11px;line-height:1.5;color:var(--muted)}
/* CHI VOTA — una scheda per voce, uguale a ogni larghezza. C'era una tabella a SEI
   colonne dentro un contenitore che su telefono scorreva di lato: per leggere il
   contributo si trascinava, e trascinando spariva il nome della voce. Sei colonne su
   390 pixel non si stringono — si tolgono. */
.dv-sunto{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:11.5px;
  font-weight:700}
.dv-sunto .su{color:var(--green)} .dv-sunto .giu{color:var(--red)}
.dv-sunto .zero{color:var(--muted)}
.dv-lista{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dv{padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.015)}
.dv.top{border-color:rgba(203,166,92,.45);background:rgba(203,166,92,.06)}
.dv.muta{opacity:.62}
.dv-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dv-t>b{font-size:12.5px;font-weight:800}
.dv-top{font-style:normal;font-size:9.5px;letter-spacing:.3px;color:var(--accent);
  text-transform:uppercase}
/* IL CONTRIBUTO A DESTRA E GRANDE: e' il numero per cui questa riga esiste, e nella
   tabella era la quinta colonna — cioe' quella che su telefono non si vedeva mai. */
.dv-c{margin-left:auto;font-size:15px;font-weight:800;white-space:nowrap}
.dv-c i{font-style:normal;font-size:12px;opacity:.85}
.dv-c.su{color:var(--green)} .dv-c.giu{color:var(--red)} .dv-c.zero{color:var(--muted);font-size:11px;font-weight:700}
.dv-f{margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.dv .db{position:relative;height:6px;margin:7px 0 4px;border-radius:3px;
  background:rgba(255,255,255,.05)}
.dv .db::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:rgba(255,255,255,.22)}
.dv .db i{position:absolute;top:0;height:100%;border-radius:3px}
.dv .db i.su{background:var(--green)} .dv .db i.giu{background:var(--red)}
.dv-conto{font-size:10px;color:var(--muted);opacity:.8}
@media(max-width:760px){ .dv-c{font-size:14px} .dv-t>b{font-size:12px} }

.dos-t tr:last-child td{border-bottom:none}
.dos-t .dos-val{color:var(--muted);font-size:10.5px;max-width:190px;line-height:1.35}
.dos-t .dos-nm{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dos-t .dos-dir{text-align:center;font-weight:800}
.dos-t .dos-dir.su{color:var(--green)} .dos-t .dos-dir.giu{color:var(--red)}
/* una voce MUTA resta a video in grigio: non e' uno zero, e' una voce che non si
   esprime — toglierla la renderebbe invisibile, che e' il guasto che stiamo togliendo */
.dos-t tr.dos-muta td{color:var(--muted);opacity:.65;font-style:italic}
.dos-barra{position:relative;min-width:96px}
.dos-barra i{position:absolute;left:6px;top:6px;height:7px;border-radius:2px;
  background:var(--muted);opacity:.55}
.dos-barra i.su{background:var(--green)} .dos-barra i.giu{background:var(--red)}
.dos-barra span{position:relative;display:block;text-align:right;
  font-variant-numeric:tabular-nums}
/* L'ARITMETICA IN CHIARO: somma / peso = forza si controlla a occhio. E' anche il modo
   in cui un peso 0 non rispettato tornerebbe VISIBILE (il bug del 03/08). */
.dos-conto{margin-top:7px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dos-conto.pareggio{color:var(--accent)}

/* IL BLOCCO 3 non e' una `<details>`: e' la risposta, e sta sempre aperto. */
.dos-b3{margin-top:9px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel2)}
.dos-b3.ok{border-color:rgba(61,220,151,.45);background:linear-gradient(180deg,rgba(61,220,151,.1),transparent)}
.dos-b3.ko{border-color:rgba(241,112,123,.35)}
.dos-b3-tit{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dos-b3-tit i{font-style:normal;font-size:10.5px;color:var(--muted)}
.dos-b3-esito{margin-top:4px;font-weight:800;font-size:13px}
.dos-b3.ok .dos-b3-esito{color:var(--green)} .dos-b3.ko .dos-b3-esito{color:var(--red)}
.dos-motivi{margin:6px 0 0;padding-left:2px;list-style:none;font-size:11.5px;
  color:var(--muted);line-height:1.5}
.dos-scala{margin-top:5px;font-size:11.5px;color:var(--muted)}
.dos-scala b{color:var(--text)}
.dos-scala .ok{color:var(--green)} .dos-scala .ko{color:var(--red)}
.dos-scala i{display:block;font-style:normal;font-size:10px;opacity:.8}
.dos-serve{margin-top:6px;font-size:11.5px;color:var(--text)}

.dos-riga{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:3px 0;
  border-bottom:1px solid rgba(40,49,73,.5)}
.dos-riga:last-child{border-bottom:none}
.dos-riga>span:first-child{color:var(--muted);min-width:132px;font-size:11.5px}
.dos-riga b{font-variant-numeric:tabular-nums}
.dos-riga i{font-style:normal;font-size:10.5px;color:var(--muted)}
.dos-riga i.ko{color:var(--red)}
.dos-riga2{margin-top:5px;font-size:11px;color:var(--muted)}
.dos-riga2.ok{color:var(--green)} .dos-riga2.ko{color:var(--red)}
.dos-griglia{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11.5px;
  color:var(--muted)}
.dos-griglia b{color:var(--text)}
/* i buchi restano in fondo e chiusi, ma ci SONO: un buco taciuto diventa
   un'affermazione falsa il giorno che qualcuno ci costruisce sopra */
.dos-b.b-buchi{background:transparent;border-style:dashed}
.dos-b.b-buchi ul{margin:0;padding-left:16px;font-size:10.5px;color:var(--muted);line-height:1.6}
.dos-b.b-buchi b{color:var(--text);font-weight:600}

@media(max-width:760px){
  .dos-riga>span:first-child{min-width:100%}
  .dos-t .dos-val{max-width:150px}
}
/* SU TELEFONO IL BENVENUTO DEVE STARCI. Misurato a 390×780: il blocco era alto 956px
   contro 424 di chat visibile — logo grande, due righe di presentazione, due bottoni
   alti e QUATTORDICI caselle a due colonne (514px di solo mosaico). Il risultato era
   che si atterrava in mezzo alla griglia e sembrava tutto tagliato.
   Qui si stringe tutto quello che NON e' informazione: il logo, i margini, il motivo
   della casella (una riga invece di due) e il numero di colonne (tre invece di due).
   Le caselle restano bersagli da 44px, che e' il minimo perche' un dito ci prenda. */
@media(max-width:520px){
  /* 94 e non 101: la griglia dentro il benvenuto e' larga 304px su un telefono da
     390 (margini della bolla), e 3×101+2×6 = 315 non ci sta — restavano DUE colonne
     e il mosaico tornava alto 400px. Con 94: 3×94+12 = 294, tre colonne. Misurato. */
  .mos-griglia{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:6px}
  .mos-c{min-height:46px;padding:6px 8px;gap:1px}
  .mos-c b{font-size:12px}
  .mos-c .mos-no{-webkit-line-clamp:1;font-size:9.5px}
  .mos-v{font-size:9.5px}
  .mos-pos{font-size:9px}
  .mos-tit{font-size:11.5px;margin-bottom:6px}
  .dw-mosaico{margin:10px 0 2px}
  .dock-hero{max-width:150px}
  .dock-hello{font-size:12.5px;line-height:1.35;margin:6px 0 0}
  .dw-b{padding:9px 11px}
  .dw-b i{font-size:10.5px;-webkit-line-clamp:2;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden}
  .dw-oltre,.can-note{font-size:10.5px;line-height:1.3}
  .mp-box{width:calc(100vw - 12px);max-height:92vh}
}

/* ---- LA PLANCIA: i comandi si distinguono dalla conversazione (06/08/2026) -------
   Rilievo di Pietro: «la barra sotto si distingue a fatica dalla chat». Non era un
   problema di spazio (misurato: 114-163px di ingombro) ma di GERARCHIA: quattro cose
   di natura diversa — i chip dell'agente, i comandi, la striscia viva, la scrittura —
   avevano tutte lo stesso fondo della conversazione, quindi sembravano messaggi.
   Qui diventano un blocco solo, con un suo fondo e un filo di luce in cima: sopra si
   legge, sotto si comanda. Niente sparisce e niente si sposta. */
.chat-console{flex:0 0 auto;background:linear-gradient(180deg,#0e1424,#0b101c);
  border-top:1px solid rgba(203,166,92,.18);
  box-shadow:0 -10px 24px -20px rgba(0,0,0,.9);padding-top:8px}
/* le domande dentro il popup: piccole, in fila, non pulsanti primari */
.mp-chiedi{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mp-chiedi button{flex:1 1 auto;padding:7px 10px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:#161d2e;color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:600;transition:.15s}
.mp-chiedi button:hover{border-color:var(--accent);color:var(--text)}
@media(max-width:520px){ .mp-chiedi button{flex:1 1 100%} }/* il pannello: i blocchi aggiunti il 06/08 (motori, ritmo, posizioni, consuntivo) */
.dos-mot{font-weight:800;letter-spacing:.3px}
.dos-mot.su{color:var(--green)} .dos-mot.giu{color:var(--red)}
.dos-riga>span.ok{color:var(--green)} .dos-riga>span.ko{color:var(--red)}
.dos-riga em{font-style:normal;font-size:10px;opacity:.75;display:block}
/* «hai già dei soldi qui» si vede a colpo d'occhio: cambia il senso di tutto il resto */
/* IL PROSSIMO ORDINE (06/08/2026). Una SCHEDA per motore, staccata dalle altre da un
   filo: le tre non vanno lette come un elenco continuo ma come tre piani distinti, e
   senza un bordo l'occhio le fonde. La riga della prossima entrata e' la sola in
   rilievo — e' la domanda per cui si apre il blocco. */
/* l'intestazione delle 24 ore: senza, le barre sono una forma senza unita' di misura */
/* la riga che dice quanto la confidenza ha TENUTO fuori campione. Sta attaccata al
   numero perche' letta altrove non la legge nessuno, e senza di lei quel numero e' una
   promessa che non abbiamo verificato. */
/* LA FIRMA A 32 TRATTI. Non e' un grafico del prezzo: e' quanto si e' MOSSO in ogni
   trentaduesimo della finestra, normalizzato sul tratto mediano. Serve a confrontare
   scale diverse a colpo d'occhio, ed e' per questo che dev'essere identica riga per
   riga — stessa altezza, stessa larghezza, stesso numero di barre. */
.dos-firma{display:flex;align-items:flex-end;gap:1px;height:26px;margin:5px 0 3px;
  padding:2px 3px;border-radius:5px;background:rgba(255,255,255,.03)}
/* ⚠ `var(--gold)` NON ESISTE — la variabile si chiama `--accent`. Una variabile CSS
   sconosciuta invalida l'INTERA dichiarazione, quindi qui non c'era nessuno sfondo: la
   firma a 32 tratti e' stata un rettangolo grigio vuoto in tutte e sei le scale, su ogni
   simbolo, da quando esiste. Le 206 prove su di lei passavano tutte — provavano il DATO.
   Trovata il 07/08/2026 guardando la figura. */
.dos-firma{position:relative}
.dos-firma i{flex:1;min-width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(203,166,92,.35));
  border-radius:1px 1px 0 0}
/* il tratto che vale tre volte la mediana satura: la saturazione E' l'informazione */
.dos-firma i.pieno{background:var(--accent)}
/* il filo della mediana: 1,00 su un fondo scala di 3 sta a un terzo dell'altezza */
.dos-firma u.fir-med{position:absolute;left:3px;right:3px;bottom:33%;height:0;
  border-top:1px dashed var(--muted);opacity:.45;text-decoration:none}
.dos-fir-n{font-size:10px;color:var(--muted);font-weight:400;line-height:1.4}
@media(max-width:760px){ .dos-firma{height:20px} }
.dos-cal{margin-top:4px;font-size:10.5px;line-height:1.45;padding:4px 7px;border-radius:6px}
.dos-cal.ko{color:var(--red);background:rgba(241,112,123,.08)}
.dos-cal.ok{color:var(--green);background:rgba(61,220,151,.08)}
.dos-ore-t{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;
  font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dos-ore-t b{color:var(--text);text-transform:none;letter-spacing:0;font-size:11px}

/* LE RELAZIONI FRA I VALORI — la scheda `mpx-` (11/08/2026, su segnalazione di Pietro
   con lo screenshot del telefono). Prima erano tre elenchi in fila: i gruppi come muri
   di nomi in grassetto separati da puntini (tredici di seguito, che su 360px vanno a
   capo quattro volte), il conteggio, le coppie, e in fondo una griglia di sigle del
   server. Tutto grassetto, nessuna gerarchia, e la RISPOSTA — quante cose diverse
   stiamo misurando — annegata in mezzo.
   Adesso la scheda ha una forma sola: il numerone, una barra a CELLE (una per misura,
   raggruppate come le famiglie: si legge «tredici dicono la stessa cosa, undici stanno
   da sole» senza leggere niente), e poi ogni famiglia con dentro le sue misure e la
   barretta di dove stiamo ORA. Il «dove siamo ora» non e' piu' una lista a parte:
   sta accanto al nome della misura, che e' l'unico posto dove serve.
   ⚠ NIENTE PALETTE A SEI COLORI: l'identita' dei gruppi la portano i titoli, non il
   colore, e sei tinte su questo fondo o cadono fuori dalla banda di luminosita' o
   diventano indistinguibili per chi non vede i rossi (provate col validatore: la
   prima proposta a cinque tinte falliva tre controlli su cinque). Un solo colore —
   l'oro dell'app — piu' il vuoto per «non fa gruppo». */
.mpx-hero{margin-top:4px;padding:10px 11px 9px;border-radius:10px;
  border:1px solid rgba(203,166,92,.28);
  background:linear-gradient(180deg,rgba(203,166,92,.10),rgba(203,166,92,.02))}
/* IL NUMERO SOPRA, LA PAROLA SOTTO: affiancati, la parola lunga andava a capo e
   spingeva la freccia fuori asse — due riquadri storti invece di un confronto. */
.mpx-h-n{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mpx-h-n>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.mpx-h-n b{font-size:27px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.mpx-h-n .acc b{color:var(--accent)}
.mpx-h-n em{font-style:normal;font-size:11px;line-height:1.3;color:var(--muted)}
.mpx-h-n u{text-decoration:none;color:var(--text-faint);font-size:17px}
/* una cella per misura; i blocchi sono le famiglie. Il distacco fra i blocchi e' il
   dato: separa cio' che si somiglia da cio' che non si somiglia. */
.mpx-unit{display:flex;align-items:center;gap:6px;margin-top:10px}
.mpx-u-g{display:flex;gap:2px;flex-basis:0;min-width:0}
.mpx-u-g>i{flex:1 1 0;min-width:2px;height:14px;border-radius:2px;
  background:var(--accent);opacity:.85}
.mpx-u-g.sola{gap:3px}
.mpx-u-g.sola>i{background:transparent;box-shadow:inset 0 0 0 1px rgba(139,148,171,.7)}
.mpx-leg{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px;
  font-size:10.5px;color:var(--muted)}
.mpx-leg>span{flex:none;width:9px;height:9px;border-radius:2px}
.mpx-leg .k-fam{background:var(--accent);opacity:.85}
.mpx-leg .k-sola{margin-left:9px;box-shadow:inset 0 0 0 1px rgba(139,148,171,.7)}
.mpx-p{margin-top:7px;font-size:11px;line-height:1.5;color:var(--muted)}
.mpx-dove{margin-top:12px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-faint)}
.mpx-dove i{display:block;margin-top:1px;font-style:normal;font-size:10.5px;
  letter-spacing:0;text-transform:none;color:var(--muted)}
.mpx-g{margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;
  background:rgba(255,255,255,.015)}
/* «non fanno gruppo» NON e' un gruppo, e il tratteggio lo dice prima delle parole */
.mpx-g.sola{border-style:dashed;background:transparent}
.mpx-g-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid rgba(40,49,73,.7)}
.mpx-g-t>b{font-size:12.5px}
.mpx-g-t>span{margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
.mpx-g-t em{font-style:normal;color:var(--text-faint)}
.mpx-ms{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:2px 16px}
.mpx-m{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:11px}
.mpx-m>em{flex:1 1 auto;min-width:0;font-style:normal;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpx-tr{flex:none;width:54px;height:5px;border-radius:3px;text-decoration:none;
  overflow:hidden;background:rgba(139,148,171,.18)}
.mpx-tr>i{display:block;height:100%;border-radius:3px;background:var(--accent);opacity:.65}
/* agli estremi della sua storia: e' l'unica cosa che si guarda, e si vede */
.mpx-tr.est>i{opacity:1}
.mpx-tr.vuota{opacity:.4}
.mpx-m>b{flex:none;width:34px;text-align:right;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.mpx-m>b.est{color:var(--text);font-weight:800}
.mpx-cop{margin-top:12px;padding-top:8px;border-top:1px solid rgba(40,49,73,.7)}
.mpx-cop-t{margin-bottom:4px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-faint)}
.mpx-cop-t i{display:block;margin-top:1px;font-style:normal;font-size:10.5px;
  letter-spacing:0;text-transform:none;color:var(--muted)}
.mpx-c{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:3px 0;
  border-bottom:1px solid rgba(40,49,73,.5)}
.mpx-c:last-child{border-bottom:none}
.mpx-c>span{flex:1 1 auto;font-size:11.5px;color:var(--muted)}
.mpx-c>span u{margin:0 5px;text-decoration:none;color:var(--text-faint)}
.mpx-c>b{font-size:12px;font-variant-numeric:tabular-nums}
.mpx-c>b.ko{color:var(--red)}
.mpx-c>i{flex:1 1 100%;font-style:normal;font-size:10.5px;color:var(--text-faint)}
@media(max-width:760px){
  .mpx-h-n b{font-size:23px}
  .mpx-ms{grid-template-columns:1fr}
  .mpx-tr{width:46px}
  /* il conteggio va SOTTO il titolo, sempre: spinto a destra si spostava a seconda
     di quanto e' lungo il titolo, e cinque schede di fila avevano cinque teste diverse */
  .mpx-g-t>span{margin-left:0;flex:1 1 100%}
}
.dos-pm{margin-top:10px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;
  background:rgba(255,255,255,.015)}
.dos-pm:first-child{margin-top:4px}
.dos-pm-t{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:5px;
  padding-bottom:5px;border-bottom:1px solid rgba(40,49,73,.7)}
.dos-pm-t>b:first-child{font-size:12.5px}
.dos-pm .dos-riga>span:first-child{min-width:112px;color:var(--muted)}
.dos-pm-chiave{padding:5px 7px;margin-left:-7px;margin-right:-7px;border-radius:7px;
  background:rgba(203,166,92,.08)}
.dos-pm-chiave>b{color:var(--text);font-weight:700}
.dos-pm-ord{align-items:flex-start}
.dos-pm-ord>span{display:flex;flex-direction:column;gap:1px;max-width:270px}
.dos-pm-ord em{font-style:normal;font-size:10px;color:var(--muted);line-height:1.45}
.dos-pm-f{margin-top:7px;font-size:9.5px;color:var(--muted);opacity:.75}
.dos-b.b-pm{border-color:rgba(203,166,92,.32)}
@media(max-width:760px){
  .dos-pm .dos-riga>span:first-child{min-width:100%}
  .dos-pm-ord>span{max-width:100%}
}
.dos-b.b-pos{border-color:rgba(203,166,92,.45);background:rgba(203,166,92,.06)}
.dos-graf{margin-top:8px;overflow-x:auto}
.dos-graf svg{max-width:100%;height:auto}
/* le scatole della scheda Mercato riusate dentro il popup: stesso stile, larghezza del popup */
.dos-mkt .bd-box{margin-top:9px}
/* la tabella del ritmo e' a 5 colonne e non rimpicciolisce: dentro un corpo da
   408px scorrerebbe fuori dal blocco. Scorre DENTRO di se', come `.dos-graf`. */
.dos-mkt{margin-top:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dos .bd-box{margin-top:9px}
/* IL VERDETTO NEL TITOLO della tendina: da quando i blocchi sono tutti chiusi di
   default, la risposta deve stare sulla riga che si vede senza aprire. */
.dos-b>summary .dos-b3-esito{font-weight:800;font-size:12px}
.dos-b.b-gate.ok>summary .dos-b3-esito{color:var(--green)}
.dos-b.b-gate.ko>summary .dos-b3-esito{color:var(--red)}
.dos-b.b-gate.ok{border-color:rgba(61,220,151,.45)}
.dos-b.b-gate.ko{border-color:rgba(241,112,123,.35)}
.dos-riga b.ok{color:var(--green)} .dos-riga b.ko{color:var(--red)}
.dos-dopo{padding:4px 0 2px}
.dos-dopo-t{width:100%;opacity:.8;font-size:10.5px}
.dos-dopo span.ko{color:var(--red)}
/* LE 24 ORE, come forma. Un profilo orario in tabella non si legge: in barre si vede
   in un secondo dove sta l'oro e dove la fossa — e l'ora di adesso e' marcata. */
/* ⚠ LE DUE TACCHE SONO IL METRO. Senza, «Q 17,04» non si giudica: la barra piu' lunga
   e' sempre lunga, qualunque cosa valga. Il PAREGGIO (Q=1) e la MEDIANA delle sue 24
   ore stanno dietro le barre, a tutta altezza, e ogni riga si legge senza cifre. */
/* LE COLONNE SONO FISSE TRANNE LA BARRA, e le tacche devono cadere DENTRO la barra:
   `left` in percentuale sul contenitore le metteva dentro la colonna delle ore.
   LA GEOMETRIA STA QUI, non nel disegnatore: le tacche si posizionano con un `calc`
   che ha dentro la larghezza delle colonne fisse, e a 430px quelle colonne cambiano.
   Scritte a mano in JS (184px / 40px) erano giuste sul desktop e sbagliate sul telefono
   — la riga del pareggio sarebbe caduta fuori posto proprio dove serve. */
.dos-ore{--or-fissi:184px; --or-barra:40px;
  position:relative;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.dos-ore.fiacco{opacity:.55}
.or-rif{position:absolute;top:0;bottom:0;width:1px;z-index:0}
.or-rif.par{background:var(--red);opacity:.6}
.or-rif.med{border-left:1px dashed var(--muted);opacity:.45}
.dos-ora{position:relative;z-index:1;display:grid;
  grid-template-columns:34px 1fr 40px 92px;align-items:center;gap:6px;
  font-size:10.5px;color:var(--muted)}
.dos-ora>span{display:flex;gap:4px;align-items:baseline}
.dos-ora>span em{font-style:normal;opacity:.6;font-size:9px}
.dos-ora i{height:8px;border-radius:2px;background:var(--accent);opacity:.45;min-width:2px}
.dos-ora b{text-align:right;font-variant-numeric:tabular-nums}
/* movimento / spread dell'ora: il PERCHE' di Q, che finora non usciva mai */
/* ⚠ NIENTE `nowrap`: su XAUUSD «701,0 pip / 11,20» e' piu' largo dei 92px della sua
   colonna e faceva debordare il blocco di 24px. La colonna resta FISSA (le tacche del
   pareggio e della mediana sono posizionate su quella misura), il testo va a capo. */
.dos-ora u{text-decoration:none;text-align:right;font-size:9.5px;opacity:.75;
  font-variant-numeric:tabular-nums;white-space:normal;line-height:1.25}
.dos-ora.sotto i{background:var(--red);opacity:.5}
.dos-ora.sotto b{color:var(--red)}
/* poche barre: la riga c'e' ma non pesa come le altre, che e' la verita' */
.dos-ora.pochi{opacity:.45}
.dos-ora.ora-now{color:var(--text)} .dos-ora.ora-now i{opacity:.95;background:var(--green)}
.dos-ora.ora-now.sotto i{background:var(--red);opacity:.95}
.dos-ora.ora-now span{font-weight:800}
@media(max-width:760px){
  /* 32 + 36 + 2 gap da 6 = 80px fissi, e la barra comincia a 38px */
  .dos-ore{--or-fissi:80px; --or-barra:38px}
  .dos-ora{grid-template-columns:32px 1fr 36px;font-size:10px}
  .dos-ora u{grid-column:2 / -1;text-align:left;margin-top:-2px}
}
/* LA SCHEDA DI OGNI MOTORE: intestazione con verso, condizione d'ingresso e i tag */
.dos-motv{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:9px 0 3px;
  padding-top:7px;border-top:1px solid rgba(40,49,73,.7);font-size:12px;font-weight:700}
.dos-motv:first-child{border-top:none;margin-top:2px;padding-top:0}
.dos-motv em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--muted)}
.dos-tag{font-size:9.5px;letter-spacing:.3px;padding:1px 6px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);font-weight:600}
.dos-tag.on{color:var(--text);border-color:rgba(203,166,92,.5)}
.dos-tag.gov{color:var(--accent);border-color:rgba(203,166,92,.6);background:rgba(203,166,92,.1)}
.dos-riga2.ok{color:var(--green)}
/* IL CONFRONTO, sempre scritto allo stesso modo: un numero senza termine di paragone
   non e' un'informazione, e' una cifra. Colore e forma unici in tutto il pannello. */
.dos-vs{display:inline-block;font-size:10px;color:var(--accent);opacity:.9;
  border:1px solid rgba(203,166,92,.3);border-radius:20px;padding:0 7px;margin-left:6px;
  white-space:nowrap}
.dos-vs-riga{margin-top:3px;font-size:10.5px;color:var(--accent);opacity:.9}
.dos-griglia span em{display:block;font-style:normal;font-size:9.5px;color:var(--muted);
  opacity:.85;max-width:190px;line-height:1.3}
/* LE AZIONI IN CIMA (06/08): sono le due cose che si fanno da qui — farsi guidare o
   farsi spiegare. In fondo, dopo sedici sezioni di numeri, non le trovava nessuno. */
.mp-azioni{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.mp-azioni .sess-b{flex:1 1 auto;min-width:150px}
@media(max-width:520px){ .mp-azioni .sess-b{flex:1 1 100%} }

/* ═══ IL PANNELLO, SECONDA PASSATA (06/08/2026) ═══════════════════════════════
   Due cose chieste guardando lo schermo.

   1. LA TENDINA DEVE SEMBRARE UNA TENDINA. Da quando i blocchi sono tutti chiusi di
      default, un titolo con un trattino grigio da 10px non dice a nessuno che sotto
      c'e' qualcosa: si legge come un'intestazione morta. Ora la riga e' un BOTTONE —
      sfondo, bordo, la freccia dentro un tondo, e al passaggio si accende e compare
      «tocca per aprire».
   2. LA BARRA DEI CONTRIBUTI PARTE DAL CENTRO. Prima partivano tutte da sinistra: un
      -3,00 e un +3,00 avevano la stessa forma e cambiavano solo colore. Centrate sullo
      zero e' la FORMA a dire da che parte pende il conto, e si legge senza leggere. */

.dos-b{border-radius:12px;overflow:hidden;transition:border-color .15s,background .15s}
.dos-b>summary{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  padding:10px 12px;align-items:center;gap:9px;position:relative}
.dos-b>summary:hover{background:linear-gradient(180deg,rgba(203,166,92,.12),transparent)}
.dos-b:not([open])>summary::after{content:attr(data-apri);position:absolute;right:12px;
  font-size:9.5px;letter-spacing:.3px;color:var(--muted);opacity:0;transition:opacity .15s}
.dos-b:not([open])>summary:hover::after{opacity:.85}
/* la freccia in un tondo: un bersaglio, non un segno di punteggiatura */
.dos-b>summary::before{content:'\203A';display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--muted);
  font-size:14px;font-weight:800;line-height:1;
  transition:transform .18s,color .15s,border-color .15s}
.dos-b[open]>summary::before{transform:rotate(90deg);color:var(--accent);
  border-color:rgba(203,166,92,.55);background:rgba(203,166,92,.14)}
.dos-b>summary:hover::before{color:var(--accent);border-color:rgba(203,166,92,.5)}
.dos-b[open]{border-color:rgba(203,166,92,.28)}
.dos-b[open]>summary{border-bottom:1px solid var(--border)}

.dos-t td{padding:6px}
.dos-t tr.dos-top td{background:rgba(203,166,92,.07)}
.dos-t tr.dos-top td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.dos-t tbody tr:hover td{background:rgba(255,255,255,.035)}
/* ⚠ QUI STAVA `.dos-peso`, la pastiglia piena del peso. La classe non e' piu' disegnata
   da nessuna parte in app.js (verificato il 07/08/2026): il riempimento si faceva con
   `width:var(--w)` scritto inline, e senza quella riga inline la regola era morta due
   volte. Tolto invece di lasciarlo: uno stile che nessuno applica e' un pezzo di codice
   che sembra vivo, e la prossima persona che lo legge crede che il peso sia disegnato. */
/* la barra divergente: lo zero al centro, il segno E' la direzione */
.dos-barra{min-width:124px}
.dos-barra .db{position:relative;height:12px;margin-bottom:1px}
.dos-barra .db::before{content:'';position:absolute;left:50%;top:-1px;bottom:-1px;
  width:1px;background:var(--border)}
.dos-barra .db i{position:absolute;top:2px;height:8px;border-radius:2px;
  background:var(--muted);opacity:.5;transition:width .3s}
.dos-barra .db i.su{background:var(--green);opacity:.9}
.dos-barra .db i.giu{background:var(--red);opacity:.9}
.dos-barra>span{display:block;text-align:center;font-size:10.5px;
  font-variant-numeric:tabular-nums;opacity:.9}
.dos-barra>span.su{color:var(--green)} .dos-barra>span.giu{color:var(--red)}

/* l'aritmetica come EQUAZIONE: e' un conto, e un conto si guarda */
.dos-eq{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid var(--border)}
.eq-n{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px}
.eq-n.su{color:var(--green)} .eq-n.giu{color:var(--red)}
.eq-op{color:var(--muted);font-size:12px}
.eq-forza{position:relative;display:inline-flex;align-items:baseline;gap:2px;
  padding:3px 12px 6px;border-radius:9px;background:rgba(203,166,92,.13);
  border:1px solid rgba(203,166,92,.45);overflow:hidden}
.eq-forza b{font-size:18px;font-weight:800;letter-spacing:-.5px}
.eq-forza em{font-style:normal;font-size:10px;color:var(--muted)}
.eq-forza i{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);
  opacity:.95;transition:width .4s}
.eq-lbl{font-size:10px;color:var(--muted);flex:1 1 100%;opacity:.85}
/* LA ⓘ DISEGNATA, non scritta. Il carattere U+24D8 non c'e' in Montserrat e il browser
   ripiegava sul quadratino: un difetto che nessun controllo automatico vede, perche'
   l'HTML e' corretto — si vede solo guardando lo schermo (06/08/2026, segnalato da
   Pietro con uno screenshot). Un tondo col bordo e una «i» dentro non dipende da
   nessun font esotico e sta bene in tutte le lingue. */
.dos-sp{display:inline-flex;align-items:center;justify-content:center;width:15px;
  height:15px;margin-left:6px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  font:700 10px/1 Georgia,'Times New Roman',serif;font-style:italic;
  transition:color .15s,border-color .15s,background .15s;vertical-align:middle}
.dos-sp:hover{color:var(--accent);border-color:rgba(203,166,92,.6);
  background:rgba(203,166,92,.14)}
.dos-onda{font-size:17px;font-weight:800;color:var(--accent)}
/* LA GAMBA IN CORSO non e' come le confermate: puo' ancora annullarsi, e si distingue
   a colpo d'occhio invece di stare in fila con le altre come se fosse un fatto. */
.dos-riga.el-viva{background:rgba(203,166,92,.06);border-radius:6px;
  padding-left:6px;padding-right:6px;border-bottom-color:transparent}
.dos-riga.el-viva>span:first-child{color:var(--accent)}
/* «a cosa serve» sotto il nome della scala: la riga che mancava a chi apre l\x27app
   la prima volta — il nome dice COS\x27E\x27, questa dice A COSA SERVE */
.dos-riga>span em{display:block;font-style:normal;font-size:9.5px;color:var(--muted);
  opacity:.85;line-height:1.3;margin-top:1px;max-width:210px}

/* ═══ IL MOSAICO PER MOTORE (06/08/2026) ══════════════════════════════════════
   Tre gruppi e tre stati, gli stessi dei segnali: verde = sta operando, neutro =
   eletto ma fermo, rosso = quel motore non lavora questo simbolo. Prima «spento»
   confondeva gli ultimi due, che sono due cose diversissime. */
/* la riga dei filtri: ricerca + «solo dove ho posizioni». Su telefono la pillola
   della ricerca si stringe e il tasto resta intero — e' lui il comando, la ricerca
   ha gia' il suo segnaposto per dire cos'e'. */
/* ⚠ QUESTA RIGA VA A CAPO, E NON E' PIGRIZIA. Il mosaico vive dentro la BOLLA del
   benvenuto, che si allarga per contenere quello che ha dentro: un tasto che non si
   spezza (`white-space:nowrap`) tira la bolla oltre lo schermo — misurato il
   10/08/2026, mosaico a 439px su un telefono da 320, e a 411 sbordava di 28. Senza
   il tasto era 234px, cioe' larghissimo: l'ho rotto io aggiungendolo.
   Il rimedio giusto e' lasciarlo scendere sotto la ricerca quando non ci sta —
   qui e' un filtro, non una barra di comandi, e una riga in piu' non costa niente
   (nella testata invece andare a capo era proprio il difetto: li' si vuole
   `nowrap`, qui l'opposto). L'ellissi resta come ultima rete se una traduzione
   futura fosse piu' lunga di uno schermo intero. */
.mos-barra{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 2px 10px}
.mos-cerca{display:flex;align-items:center;gap:7px;flex:1 1 150px;min-width:0;padding:2px 11px;
  border:1px solid var(--border);border-radius:22px;background:var(--panel2);cursor:text}
.mos-fpos{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--border);background:#161d2e;color:var(--muted);
  font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:22px;cursor:pointer;
  white-space:nowrap;transition:.15s;min-height:30px}
.mos-fpos:hover{color:var(--text)}
.mos-fpos.on{background:rgba(61,220,151,.14);color:var(--green);border-color:rgba(61,220,151,.4)}
/* min-height sull'INPUT, non solo sulla pillola: il dito preme l'input, e il suo
   riquadro era alto sedici pixel dentro un contenitore alto trentadue. Ventotto piu'
   i due di bordo stanno sopra la soglia dei ventiquattro e restano comodi da toccare. */
.mos-cerca input{flex:1;border:none;background:transparent;color:var(--text);
  font-size:13px;outline:none;font-family:inherit;min-height:28px;padding:0}
.mos-cerca input::placeholder{color:var(--muted)}
.mos-mag{opacity:.6;font-size:12px}
.mos-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;
  padding:0 2px}
.mos-x:hover{color:var(--text)}
.mos-gr{margin-bottom:13px}
.mos-gr-t{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 2px 7px}
.mos-gr-t b{font-size:12.5px;letter-spacing:.3px}
.mos-gr-t span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mos-gr-t i{flex:1 1 100%;font-style:normal;font-size:10px;color:var(--muted);opacity:.85;
  line-height:1.35}
/* NON ELETTO: rosso spento, non allarmante. Non e' un guasto — e' un motore che non
   lavora quel simbolo, e deve leggersi come un fatto, non come un avviso. */
.mos-c.ko{border-color:rgba(241,112,123,.32);opacity:.62}
.mos-c.ko b{color:var(--red);opacity:.85}
.mos-c.ko:hover{opacity:.95;border-color:rgba(241,112,123,.55)}
@media(max-width:520px){ .mos-gr-t i{display:none} }