/* ⭐⭐ LO STILE A, «NERO REVOLUT» (capo 24/09/2026: «per la grafica mi piace A»).
 *
 * Tutto nero, bianco pieno, l'oro solo per indicare. La fonte delle regole è il
 * blocco `body.A` di `anteprima_grafica.html`, la pagina che il capo ha guardato
 * dal telefono e scelto: qui quelle regole diventano la veste di OGNI pagina che
 * sta dentro la cornice.
 *
 * ⛔ La CORNICE resta com'è (capo 18/09, «bruttissimo, molto meglio come
 * prima»): questo file veste le pagine, non la colonna del menu.
 *
 * ⛔ Il file si carica DOPO lo stile scritto dentro ogni pagina, quindi a pari
 * peso vince lui. Le pagine tengono le loro regole di forma (griglie, tabelle,
 * grafici): qui si cambia la VESTE, cioè colori, raggi, caratteri e respiri.
 *
 * Le regole del capo che restano vive, dentro la veste nuova:
 *  · i comandi cliccabili sono DORATI (12/08) , l'oro qui «indica» proprio
 *    quello: il gesto da fare. Il secondario resta vuoto col bordo.
 *  · il rosso è del marchio e dei numeri in perdita, mai di un bottone;
 *  · verde e rosso SOLO dove il segno è un giudizio;
 *  · al passaggio del mouse si colora il testo, mai uno sfondo dorato.
 */

:root{
  --bg:#000; --card:#0f0f12; --pannello:#0f0f12; --bordo:#1b1b1f; --linea:#1b1b1f;
  --testo:#fff; --muto:#8b8b98;
  /* i quattro toni della casa nuova, presi dall'anteprima */
  --tondo:#1d1d22;    /* il cerchio delle icone */
  --tasto:#1a1a1e;    /* i tasti d'azione tondi */
  --pillola:#1d1a10;  /* la pillola che indica, in oro */
  --campo:#141417;    /* dove si scrive o si sceglie */
  --luce:#17171b;     /* la riga sotto il dito */
}

html{background:#000}
body{background:#000; color:#fff; -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale}

/* ── l'intestazione della pagina: un titolo grande a sinistra, come le app ── */
.ptcard{text-align:left; padding:6px 4px 2px}
.ptcard .vaultname, .vaultname{font-size:28px; font-weight:800; letter-spacing:-.6px;
  text-transform:none; color:#fff; line-height:1.15}
.ptcard .sotto{font-size:13px; color:var(--muto); line-height:1.55; margin-top:6px}

/* le pagine dei sistemi (medio e lungo) hanno il numero grande DENTRO la loro
   prima carta: lì il titolo resta al centro, piccolo, e il numero è l'eroe */
.card.ptcard{text-align:center; padding-top:20px}
.card.ptcard .vaultname{font-size:15px; font-weight:700; letter-spacing:0; color:#c9c9d4}
.card.ptcard .vaultlevel{text-transform:none; letter-spacing:0; font-size:12px}
.card.ptcard .num{font-size:44px; font-weight:800; letter-spacing:-1.3px; margin-top:4px;
  line-height:1.12}

/* il titoletto di sezione fuori dalle carte: a sinistra, bianco, niente maiuscolo */
.vaultsub{font-size:14px !important; font-weight:800; letter-spacing:.1px !important;
  text-transform:none !important; color:#fff !important; text-align:left !important;
  justify-content:flex-start !important; padding:0 4px}

/* ── le carte: niente bordo, angoli larghi, un grigio appena sopra il nero ── */
.card{background:var(--card); border:0; border-radius:22px; padding:18px 18px}
.card h2{font-size:13.5px; font-weight:800; letter-spacing:.1px; text-transform:none;
  color:#fff; margin-bottom:10px}
.card h2 .muto, .card h2 small{font-weight:600; color:var(--muto)}

/* ── le righe etichetta-cifra ── */
.riga{font-size:13.5px; color:#9a9aa6}
.riga b{color:#fff; font-weight:700}
.riga.tot{border-top-color:var(--linea) !important}
.nota{color:#62626e}
.spiega{color:#8b8b98}

/* ── i comandi: la pillola dorata (la regola del 12/08, nella forma nuova) ── */
button{border-radius:999px}
button.quieto{background:transparent; border:1px solid #2a2a31; color:#fff; border-radius:999px}
button.quieto:hover{background:transparent; border-color:var(--oro, #D4AF37);
  color:var(--oro, #D4AF37)}

/* ── i campi: pieni, senza filo, angoli morbidi ── */
/* ⛔ 24/09 (lettore avversario): i campi del Bilancio che si modificano in
   riga (.pctin, .nomein) hanno la loro veste dorata e restano fuori */
input[type=text]:not(.pctin):not(.nomein), input[type=number], input[type=email],
input[type=password], input[type=date], input:not([type]):not(.pctin):not(.nomein),
textarea, select{
  background:var(--campo); border-color:transparent; border-radius:14px; color:#fff}
input:focus, textarea:focus, select:focus{border-color:var(--oroS, #8a6f24); outline:none}
input[type=checkbox]:focus-visible, input[type=range]:focus-visible{
  outline:2px solid var(--oro, #D4AF37); outline-offset:2px}
input::placeholder, textarea::placeholder{color:#55555f}

/* le tendine vestite (tendine.js): stessa pasta dei campi. ⛔ `body` davanti
   perché il vestito delle tendine entra nella pagina dopo questo file. */
/* ⛔ 9 px sopra e sotto: la tendina resta alta 38 px come i campi (regola del
   capo del 18/08, un campo è alto uguale sempre) */
body .tendbtn{background:var(--campo); border-color:transparent; border-radius:14px;
  padding:9px 14px}
body .tendbtn:hover{border-color:#2a2a31}
body .tend.aperta .tendbtn{background:#17171b; border-color:#5c4a17}
body .tendlista{background:#121215; border:1px solid #26262c; border-radius:16px;
  padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.7)}
body .tendvoce{border-radius:10px; padding:9px 11px}
body .tendvoce:hover, body .tendvoce.mirata{background:#1c1c21}
body .tendvoce b{color:#e6e6ec}
body .tendlab b{color:#fff}

/* ── le tabelle: righe sottili, niente griglia ── */
table th{color:var(--muto); border-color:var(--linea) !important}
table td{border-color:var(--linea) !important}

/* ── la pillola che indica (nuova: la usano le pagine rifatte) ── */
.pillolaA{display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px;
  padding:5px 11px; background:var(--pillola); color:var(--oro, #D4AF37)}
.pillolaA.rossa{background:#1e0f11; color:#ff6b6b}
.pillolaA.verde{background:#0e1b15; color:#3fbf85}
.pillolaA.grigia{background:#16161a; color:#9a9aa6}

/* ── la lista delle app di banca: tondo, nome con sotto, cifra a destra ── */
.listaA{background:var(--card); border-radius:22px; overflow:hidden}
.listaA .voceA{display:flex; align-items:center; gap:13px; padding:14px 16px;
  text-decoration:none; color:inherit}
.listaA .voceA + .voceA{border-top:1px solid var(--linea)}
.listaA a.voceA:hover .cosaA b, .listaA button.voceA:hover .cosaA b{color:var(--oro, #D4AF37)}
.tondoA{width:40px; height:40px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:14px;
  background:var(--tondo); color:#fff}
.tondoA svg{width:18px; height:18px}
.cosaA{min-width:0; flex:1}
.cosaA b{display:block; font-size:14.5px; font-weight:700; color:#fff}
.cosaA em{display:block; font-style:normal; font-size:12px; color:#8b8b98; margin-top:1px;
  overflow-wrap:anywhere}
.quantoA{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap; color:#fff}
.quantoA em{display:block; font-style:normal; font-size:11.5px; font-weight:600;
  color:#8b8b98}

/* ── il titolo di sezione fuori dalle carte, col conto a destra ── */
.sezA{font-size:13.5px; font-weight:800; letter-spacing:.1px; color:#fff;
  display:flex; justify-content:space-between; align-items:baseline; padding:0 4px}
.sezA span{font-weight:600; color:#8b8b98; font-size:12.5px}

/* ── i tasti d'azione tondi, sotto il numero grande ── */
.azioniA{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.azioniA .az{display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  font:600 12.5px 'Montserrat', -apple-system, sans-serif; color:#e6e6ec}
.azioniA .az i{width:54px; height:54px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-style:normal; font-size:20px;
  background:var(--tasto); color:#fff; transition:color .14s}
.azioniA .az:hover{background:none; color:var(--oro, #D4AF37)}
.azioniA .az:hover i{color:var(--oro, #D4AF37)}
.azioniA .az:disabled{opacity:.4; cursor:default}
.azioniA .az svg{width:21px; height:21px}

/* ── i tasti a segmenti (scelta fra poche voci), bianco pieno sulla scelta ── */
.segmentiA{display:flex; gap:6px; flex-wrap:wrap}
.segmentiA button{background:#141417; color:#bdbdc6; border:0; border-radius:999px;
  padding:8px 14px; font:700 12.5px 'Montserrat', -apple-system, sans-serif}
.segmentiA button:hover{background:#141417; color:#fff}
.segmentiA button.on{background:#fff; color:#000}

/* le schede di una pagina (il Bilancio): i segmenti dell'anteprima, bianco
   pieno sulla scelta, in fila a sinistra; sul telefono scorrono di lato */
.schede{justify-content:flex-start !important; padding:0 2px}
.scheda{background:#141417 !important; border:0 !important; color:#bdbdc6 !important;
  border-radius:999px !important; padding:8px 15px !important; font-weight:700}
.scheda:hover{color:#fff !important}
.scheda.on{background:#fff !important; color:#000 !important}
@media (max-width:640px){
  .schede{flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
    margin-left:-16px !important; margin-right:-16px !important; padding:0 16px}
  .schede::-webkit-scrollbar{display:none}
  .scheda{flex:none}
}

/* il comando in testa alla pagina sta sotto il titolo, a sinistra come lui */
.aggiorna{text-align:left !important; padding:0 4px}

/* ── il telefono: il respiro ai lati delle app, 16 px ── */
@media (max-width:640px){
  body{padding-left:16px !important; padding-right:16px !important}
  .card{border-radius:20px; padding:16px 16px}
  .ptcard .vaultname, .vaultname{font-size:25px}
}
@media (max-width:380px){ .card.ptcard .num{font-size:36px} }