/* ============================================================
   SALDO — identita' visiva
   Base inchiostro-petrolio, ottone per il denaro, cifre monospaziate.
   L'elemento firma e' "il nastro": la lista movimenti disegnata come
   uno scontrino continuo, con bordo perforato e importi in colonna.
   ============================================================ */

:root {
  --fondo:        #0C1418;
  --fondo-alto:   #101B20;
  --superficie:   #16232A;
  --rilievo:      #1D2E36;
  --linea:        #24383F;
  --linea-tenue:  #1B2C33;

  --ottone:       #E0AC4E;
  --ottone-scuro: #B4832F;
  --sfera-nome:   "personale";
  --entrata:      #45C48D;
  --uscita:       #E4695A;

  --testo:        #EDF4F3;
  --testo-medio:  #9FB4BA;
  --testo-tenue:  #63797F;

  --sans: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --molla: cubic-bezier(.22, 1.15, .36, 1);
  --dolce: cubic-bezier(.4, 0, .2, 1);
  --sicuro-basso: env(safe-area-inset-bottom, 0px);
  --sicuro-alto: env(safe-area-inset-top, 0px);
}

/* La sfera aziendale ha un colore suo. Non e' decorazione: e' il modo
   piu' rapido per accorgersi, prima ancora di leggere, in quale dei due
   archivi ci si trova. */
body[data-ambito="azienda"] {
  --ottone:       #5E9BD8;
  --ottone-scuro: #3A6FA8;
  --sfera-nome:   "azienda";
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  background-image:
    radial-gradient(120% 60% at 80% -10%,
      color-mix(in srgb, var(--ottone) 16%, transparent), transparent 60%),
    radial-gradient(90% 50% at -10% 0%, rgba(69, 196, 141, .07), transparent 55%);
  background-attachment: fixed;
  transition: background-image .4s var(--dolce);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: var(--ottone); }
:focus-visible { outline: 2px solid var(--ottone); outline-offset: 2px; border-radius: 6px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── etichette e titoli ─────────────────────────────────────── */
.occhiello {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }

/* ============================================================
   ACCESSO
   ============================================================ */
.accesso {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(32px + var(--sicuro-alto)) 22px calc(32px + var(--sicuro-basso));
  max-width: 460px; margin-inline: auto;
}
.marchio { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.marchio .sigillo {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(150deg, var(--ottone), var(--ottone-scuro));
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 20px; color: #201704;
  box-shadow: 0 8px 24px rgba(224, 172, 78, .28);
  animation: sigillo-entra .7s var(--molla) both;
}
@keyframes sigillo-entra { from { transform: rotate(-12deg) scale(.6); opacity: 0 } }
.marchio h1 { font-size: 30px; }
.marchio p { margin: 2px 0 0; color: var(--testo-medio); font-size: 13.5px; }

.profili-rapidi { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; }
.profilo-chip {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 7px 13px 7px 7px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linea);
  font-size: 13.5px; transition: transform .2s var(--molla), border-color .2s;
}
.profilo-chip:active { transform: scale(.95); }
.profilo-chip:hover { border-color: var(--ottone); }
.pallino { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #16110300; }
.pallino span { color: #1a1305; }

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  /* Altezza fissa e non "quel che viene": input e select hanno riempimenti
     interni diversi in ogni browser, e affiancati in .due si disallineano.
     appearance:none toglie anche la freccia di sistema, che aggiungeva
     qualche pixel suo. */
  width: 100%; height: 52px; padding: 0 15px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--linea);
  font-size: 15px; line-height: normal;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;          /* calendario e menu di sistema in scuro */
  transition: border-color .18s, background .18s, transform .18s var(--molla);
}
.campo textarea { height: auto; padding: 14px 15px; }
.campo select {
  /* la freccia se la ridisegna il foglio di stile, cosi' e' identica ovunque */
  background-image: linear-gradient(45deg, transparent 50%, var(--testo-medio) 50%),
                    linear-gradient(135deg, var(--testo-medio) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.campo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7); opacity: .6; cursor: pointer;
}
/* i campi affiancati devono chiudere alla stessa altezza anche se una
   etichetta va a capo e l'altra no */
.due { align-items: end; margin-bottom: 14px; }
.due .campo { margin-bottom: 0; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--ottone); background: var(--rilievo); outline: none;
}
.campo input::placeholder { color: var(--testo-tenue); }

.bottone {
  width: 100%; padding: 15px; border-radius: var(--r-m);
  background: linear-gradient(160deg, var(--ottone), var(--ottone-scuro));
  color: #1a1305; font-weight: 800; letter-spacing: -.01em;
  transition: transform .16s var(--molla), filter .2s;
}
.bottone:active { transform: scale(.97); filter: brightness(1.08); }
.bottone[disabled] { opacity: .5; pointer-events: none; }
.bottone.fantasma {
  background: none; border: 1px solid var(--linea); color: var(--testo);
}
.bottone.pericolo { background: none; border: 1px solid var(--uscita); color: var(--uscita); }

.faceid {
  width: 100%; padding: 14px; border-radius: var(--r-m); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--superficie); border: 1px solid var(--ottone); color: var(--ottone);
  font-weight: 700; font-size: 14.5px;
  transition: transform .16s var(--molla), background .2s;
}
.faceid svg { width: 22px; height: 22px; }
.faceid:active { transform: scale(.97); background: var(--rilievo); }
.faceid[disabled] { opacity: .45; pointer-events: none; }

.separatore {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 16px;
  font-size: 11.5px; color: var(--testo-tenue);
}
.separatore::before, .separatore::after {
  content: ""; flex: 1; height: 1px; background: var(--linea-tenue);
}

.alterna { margin-top: 18px; text-align: center; font-size: 14px; color: var(--testo-medio); }
.alterna button { color: var(--ottone); font-weight: 600; }

.avviso {
  padding: 12px 14px; border-radius: var(--r-m); font-size: 13.5px; margin-bottom: 14px;
  background: rgba(228, 105, 90, .12); border: 1px solid rgba(228, 105, 90, .4); color: #FFC0B6;
  animation: scuoti .4s;
}
@keyframes scuoti { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

/* ============================================================
   SCHERMATA DI BLOCCO — PIN e Face ID
   ============================================================ */
.blocco {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(28px + var(--sicuro-alto)) 22px calc(28px + var(--sicuro-basso));
  max-width: 420px; margin-inline: auto; text-align: center;
}
.blocco .chi {
  display: flex; align-items: center; gap: 13px; margin-bottom: 30px;
  animation: risali .5s var(--molla) both;
}
.blocco .chi .gettone {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #1a1305; flex: 0 0 auto;
}
.blocco .chi h1 { font-size: 21px; text-align: left; }
.blocco .chi p { margin: 3px 0 0; font-size: 13px; color: var(--testo-medio); text-align: left; }

.pallini { display: flex; gap: 13px; justify-content: center; margin-bottom: 22px; height: 15px; }
.pallini i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.6px solid var(--linea); background: transparent;
  transition: background .18s var(--molla), transform .18s var(--molla), border-color .18s;
}
.pallini i.pieno {
  background: var(--ottone); border-color: var(--ottone); transform: scale(1.12);
}
.pallini.sbagliato { animation: scuoti-forte .45s; }
.pallini.sbagliato i { border-color: var(--uscita); background: transparent; }
.pallini.giusto i { background: var(--entrata); border-color: var(--entrata); }
@keyframes scuoti-forte {
  15%, 45%, 75% { transform: translateX(-9px) }
  30%, 60%, 90% { transform: translateX(9px) }
}

.tastierino {
  display: grid; grid-template-columns: repeat(3, 76px); gap: 16px;
  justify-content: center; margin-bottom: 26px;
}
.tastierino button {
  width: 76px; height: 76px; border-radius: 50%;
  font-family: var(--mono); font-size: 26px; font-weight: 500;
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  display: grid; place-items: center;
  transition: transform .12s var(--molla), background .18s;
}
.tastierino button:active { transform: scale(.9); background: var(--rilievo); }
.tastierino button.ausiliario { background: none; border-color: transparent; color: var(--ottone); }
.tastierino button.ausiliario svg { width: 27px; height: 27px; }
.tastierino button.ausiliario:active { background: var(--superficie); }

.blocco .uscita {
  font-size: 13.5px; color: var(--testo-tenue); padding: 10px 16px;
  border-radius: 999px; transition: color .2s;
}
.blocco .uscita:active { color: var(--testo-medio); }
.blocco .avviso { text-align: center; }
.blocco .nota-legale { text-align: left; margin-top: 18px; }

/* ============================================================
   IMPALCATURA APP
   ============================================================ */
.schermo {
  padding: calc(14px + var(--sicuro-alto)) 18px calc(104px + var(--sicuro-basso));
  max-width: 560px; margin-inline: auto;
}
.vista { display: none; }
.vista.attiva { display: block; animation: vista-entra .34s var(--dolce) both; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(14px) } }

.testata { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.testata .saluto { font-size: 13px; color: var(--testo-medio); }
.avatar {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 800; color: #1a1305; font-size: 15px;
  transition: transform .2s var(--molla);
}
.avatar:active { transform: scale(.92) rotate(-4deg); }

/* ── selettore di sfera ─────────────────────────────────────── */
.sfere {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea-tenue);
  position: relative;
}
.sfere button {
  flex: 1; padding: 11px 8px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--testo-tenue);
  transition: color .25s, background .35s var(--molla);
}
.sfere button svg { width: 16px; height: 16px; }
.sfere button.attivo { background: var(--rilievo); color: var(--ottone); }
.sfere button.attivo::after {
  content: ""; position: absolute; bottom: -1px; height: 2px; width: 34px;
  border-radius: 2px; background: var(--ottone); opacity: 0;
}

.nastro-sfera {          /* banda sempre visibile: dove sono, adesso */
  height: 3px; border-radius: 3px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--ottone), transparent 78%);
}

/* ── patrimonio ─────────────────────────────────────────────── */
.patrimonio { margin-bottom: 22px; }
.patrimonio .cifra {
  font-family: var(--mono); font-size: 44px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1.05; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.patrimonio .cifra .cent { font-size: .55em; color: var(--testo-medio); }
.flussi { display: flex; gap: 10px; margin-top: 14px; }
.flusso {
  flex: 1; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  animation: risali .5s var(--molla) both;
}
.flusso:nth-child(2) { animation-delay: .07s; }
@keyframes risali { from { opacity: 0; transform: translateY(16px) } }
.flusso .valore { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-top: 3px; }
.flusso.entrata .valore { color: var(--entrata); }
.flusso.uscita .valore { color: var(--uscita); }

/* ── mazzo di carte portafoglio (firma 1) ───────────────────
   Carte di altezza fissa, tre fasce: intestazione, saldo, piede.
   In basso una barra sottile con la proporzione fra entrate e uscite
   del mese: si legge il rapporto senza aprire nulla.
   ─────────────────────────────────────────────────────────── */
.sezione-titolo { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.sezione-titolo button { font-size: 13px; color: var(--ottone); font-weight: 600; }

.mazzo {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 18px 14px; margin: 0 -18px;
  scrollbar-width: none;
}
.mazzo::-webkit-scrollbar { display: none; }

.carta {
  position: relative; flex: 0 0 208px; height: 152px; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 15px 0; border-radius: 18px; overflow: hidden; text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linea);
  transition: transform .2s var(--molla), border-color .2s;
  animation: carta-entra .45s var(--molla) both;
}
@keyframes carta-entra { from { opacity: 0; transform: translateY(16px) scale(.96) } }
.carta:active { transform: scale(.97); }
.carta:hover { border-color: color-mix(in srgb, var(--tinta, var(--ottone)) 55%, var(--linea)); }
.carta::before {          /* velo diagonale nel colore del portafoglio */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(158deg, var(--tinta, var(--ottone)) -18%, transparent 58%);
  opacity: .16;
}
.carta > * { position: relative; }

.carta .riga-alta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carta .tipo {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta, var(--ottone));
}
.carta h3 {
  font-size: 14px; font-weight: 600; margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carta .saldo {
  font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.035em;
  white-space: nowrap;
}
.carta .saldo.rosso { color: var(--uscita); }
.carta .piede {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 11px;
}
.carta .conteggio { font-family: var(--mono); font-size: 10px; color: var(--testo-tenue); }
.carta .membri { display: flex; }
.carta .membri .pallino {
  width: 20px; height: 20px; font-size: 9px; margin-left: -6px;
  border: 2px solid var(--superficie);
}
.carta .membri .pallino:first-child { margin-left: 0; }

.carta .bilancia {          /* proporzione entrate/uscite del mese */
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  display: flex; background: var(--linea-tenue);
}
.carta .bilancia i { height: 100%; width: 0; transition: width .8s var(--molla) .15s; }
.carta .bilancia .dentro { background: var(--entrata); }
.carta .bilancia .fuori  { background: var(--uscita); }

.spilla-banca {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--entrata);
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.spilla-banca i { width: 5px; height: 5px; border-radius: 50%; background: var(--entrata);
  animation: pulsa 2.4s infinite; }
@keyframes pulsa { 50% { opacity: .25; transform: scale(1.5) } }

.carta.aggiungi {
  flex-basis: 116px; align-items: center; justify-content: center; padding-bottom: 14px;
  border-style: dashed; color: var(--testo-medio); text-align: center;
}
.carta.aggiungi .piu { font-size: 24px; color: var(--ottone); line-height: 1; margin-bottom: 5px; }
.carta.aggiungi span { font-size: 12px; }

/* ── testata del dettaglio portafoglio ──────────────────────── */
.indietro {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 13px; color: var(--testo-medio);
}
.indietro:active { transform: translateX(-3px); }

.stemma {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.stemma .gettone {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; color: #1a1305; flex: 0 0 auto;
}
.stemma .occhiello { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stemma h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.riga-fatti { display: flex; gap: 8px; margin-bottom: 16px; }
.riga-fatti > div {
  flex: 1; min-width: 0; padding: 10px 11px; border-radius: var(--r-m);
  background: var(--fondo-alto); border: 1px solid var(--linea-tenue);
}
.riga-fatti .occhiello { font-size: 9.5px; letter-spacing: .12em; }
.riga-fatti .valore {
  font-family: var(--mono); font-size: 14px; font-weight: 700; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em;
}

.membro-riga {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--linea-tenue); font-size: 14px;
}
.membro-riga:last-child { border-bottom: 0; }
.membro-riga .ruolo { margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo-tenue); }
.membro-riga .togli { color: var(--uscita); font-size: 12px; }

/* ── il nastro (firma 2) ────────────────────────────────────── */
.nastro {
  position: relative; padding-left: 18px;
  border-radius: var(--r-m);
}
.nastro::before {   /* bordo perforato dello scontrino */
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background-image: radial-gradient(circle, var(--linea) 1px, transparent 1.2px);
  background-size: 2px 9px;
}
.giorno { margin-bottom: 6px; }
.giorno .marca {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 2px 8px;
}
.giorno .marca .data { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--testo-tenue); }
.giorno .marca .netto { font-family: var(--mono); font-size: 11px; margin-left: auto; color: var(--testo-tenue); }

.voce {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--linea-tenue);
  animation: voce-entra .38s var(--dolce) both;
  transition: background .2s;
}
@keyframes voce-entra { from { opacity: 0; transform: translateX(-10px) } }
.voce:active { background: var(--superficie); }
.voce .segno {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
  background: var(--superficie); border: 1px solid var(--linea);
}
.voce.in .segno { color: var(--entrata); border-color: rgba(69,196,141,.35); }
.voce.out .segno { color: var(--uscita); border-color: rgba(228,105,90,.35); }
.voce .corpo { flex: 1; min-width: 0; }
.voce .titolo { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce .sotto { font-size: 11.5px; color: var(--testo-tenue); display: flex; gap: 7px; margin-top: 2px; }
.voce .sotto .fonte { color: var(--ottone); }
.voce .importo { font-family: var(--mono); font-size: 15px; font-weight: 700; white-space: nowrap; }
.voce.in .importo { color: var(--entrata); }
.voce.out .importo { color: var(--testo); }

.vuoto {
  text-align: center; padding: 46px 20px; color: var(--testo-medio);
  border: 1px dashed var(--linea); border-radius: var(--r-l);
}
.vuoto .icona { font-size: 30px; margin-bottom: 10px; opacity: .6; }
.vuoto p { margin: 0 0 16px; font-size: 14px; }

/* ── grafico ────────────────────────────────────────────────── */
.pannello {
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  border-radius: var(--r-l); padding: 16px; margin-bottom: 14px;
}
.grafico { width: 100%; height: 168px; display: block; }
.grafico-vuoto {
  height: 168px; display: grid; place-items: center; text-align: center;
  font-size: 13px; color: var(--testo-tenue);
  border: 1px dashed var(--linea-tenue); border-radius: var(--r-m);
}
.grafico path.tracciato { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: traccia 1.1s var(--dolce) forwards; }
@keyframes traccia { to { stroke-dashoffset: 0 } }
.grafico .area { opacity: 0; animation: sfuma .8s .3s forwards; }
@keyframes sfuma { to { opacity: 1 } }

.barra-cat { margin-bottom: 12px; }
.barra-cat .riga { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.barra-cat .traccia { height: 7px; border-radius: 4px; background: var(--rilievo); overflow: hidden; }
.barra-cat .riempi {
  height: 100%; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--ottone-scuro), var(--ottone));
  transition: width .9s var(--molla);
}

/* ── segmenti / filtri ──────────────────────────────────────── */
.segmenti {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linea-tenue); margin-bottom: 16px;
}
.segmenti button {
  flex: 1; padding: 9px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--testo-medio); transition: color .2s, background .3s var(--molla);
}
.segmenti button.attivo { background: var(--rilievo); color: var(--testo); }

.cerca {
  width: 100%; padding: 13px 15px; border-radius: var(--r-m); margin-bottom: 14px;
  background: var(--superficie); border: 1px solid var(--linea);
}

/* ── barra inferiore + FAB ──────────────────────────────────── */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 8px 8px calc(8px + var(--sicuro-basso));
  background: rgba(12, 20, 24, .86);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--linea-tenue);
}
.barra button {
  display: grid; justify-items: center; gap: 3px; padding: 6px 0;
  font-size: 10px; color: var(--testo-tenue); transition: color .2s;
}
.barra button .glifo { display: block; transition: transform .3s var(--molla); }
.barra button .glifo svg { width: 21px; height: 21px; display: block; }
.barra button.attivo { color: var(--ottone); }
.barra button.attivo .glifo { transform: translateY(-2px) scale(1.08); }

.fab {
  position: relative; top: -14px;
  width: 54px; height: 54px; border-radius: 18px; justify-self: center;
  background: linear-gradient(160deg, var(--ottone), var(--ottone-scuro));
  color: #1a1305; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(224, 172, 78, .34);
  transition: transform .2s var(--molla);
}
.fab svg { width: 24px; height: 24px; }
.fab:active { transform: scale(.9) rotate(90deg); }

/* ── foglio modale ──────────────────────────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 50; background: rgba(4, 8, 10, .65);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--dolce);
}
.velo.aperto { opacity: 1; pointer-events: auto; }
.foglio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 92dvh; overflow-y: auto;
  padding: 10px 20px calc(26px + var(--sicuro-basso));
  background: var(--fondo-alto);
  border-radius: var(--r-l) var(--r-l) 0 0;
  border-top: 1px solid var(--linea);
  transform: translateY(102%);
  transition: transform .38s var(--molla);
  max-width: 560px; margin-inline: auto;
}
.foglio.aperto { transform: translateY(0); }
.maniglia { width: 38px; height: 4px; border-radius: 2px; background: var(--linea);
  margin: 6px auto 16px; }
.foglio h2 { margin-bottom: 16px; }

.interruttore { display: flex; gap: 8px; margin-bottom: 18px; }
.interruttore button {
  flex: 1; padding: 13px; border-radius: var(--r-m); font-weight: 700; font-size: 14px;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--testo-medio);
  transition: all .22s var(--molla);
}
.interruttore button.scelto.in { background: rgba(69,196,141,.14); border-color: var(--entrata); color: var(--entrata); }
.interruttore button.scelto.out { background: rgba(228,105,90,.14); border-color: var(--uscita); color: var(--uscita); }

.tastiera-importo {
  font-family: var(--mono); font-size: 38px; font-weight: 700; text-align: center;
  letter-spacing: -.03em; padding: 6px 0 18px; margin-bottom: 22px; width: 100%;
  height: auto; border-radius: 0;
  background: none; border: 0; border-bottom: 1px solid var(--linea);
}
.tastiera-importo:focus { outline: none; border-color: var(--ottone); }

.pastiglie { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.pastiglia {
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--testo-medio);
  transition: all .2s var(--molla);
}
.pastiglia.scelta { background: var(--ottone); border-color: var(--ottone); color: #1a1305; font-weight: 700; }
.pastiglia:active { transform: scale(.93); }

.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── righe elenco (impostazioni, banca) ─────────────────────── */
.riga-elenco {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 16px; border-radius: var(--r-m); margin-bottom: 9px;
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  text-align: left; transition: transform .18s var(--molla), border-color .2s;
}
.riga-elenco:active { transform: scale(.985); }
.riga-elenco .testo { flex: 1; min-width: 0; }
.riga-elenco .testo small { display: block; color: var(--testo-tenue); font-size: 12px; margin-top: 2px; }
.riga-elenco .freccia { color: var(--testo-tenue); }

.nota-legale {
  font-size: 12px; line-height: 1.6; color: var(--testo-tenue);
  border-left: 2px solid var(--linea); padding-left: 12px; margin: 14px 0;
}

/* ── pagina profilo ─────────────────────────────────────────── */
.tessera {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 16px; border-radius: var(--r-l);
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  animation: risali .45s var(--molla) both;
}
.gettone-grande {
  width: 54px; height: 54px; border-radius: 18px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #1a1305;
  transition: transform .2s var(--molla);
}
.gettone-grande:active { transform: scale(.93) rotate(-5deg); }
.tessera-testo { display: flex; flex-direction: column; min-width: 0; }
.tessera-testo strong { font-size: 18px; letter-spacing: -.01em; }
.tessera-testo span { font-size: 12.5px; color: var(--testo-tenue); margin-top: 2px; }

.colori-riga { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
.colori-riga::-webkit-scrollbar { display: none; }
.colori-riga .pastiglia { flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; display: grid; place-items: center; font-size: 11px; }

.riga-campo { display: flex; gap: 9px; align-items: stretch; }
.riga-campo input { flex: 1; min-width: 0; }
.bottone.compatto { width: auto; flex: 0 0 auto; padding: 0 20px; height: 52px; }

/* ── sezioni richiudibili ───────────────────────────────────── */
.piega {
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  border-radius: var(--r-l); margin-bottom: 9px; overflow: hidden;
}
.piega > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer; list-style: none;
  transition: background .18s;
}
.piega > summary::-webkit-details-marker { display: none; }
.piega > summary:active { background: var(--rilievo); }
.piega-nome { flex: 1; font-size: 14.5px; font-weight: 700; }
.piega-stato {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--testo-tenue);
}
.piega-stato.acceso { color: var(--entrata); }
.piega > summary::after {          /* la freccetta, disegnata qui */
  content: ""; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 1.8px solid var(--testo-tenue);
  border-bottom: 1.8px solid var(--testo-tenue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--molla);
}
.piega[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.piega[open] > summary { border-bottom: 1px solid var(--linea-tenue); }
.piega-corpo { padding: 16px; animation: piega-apre .28s var(--dolce) both; }
@keyframes piega-apre { from { opacity: 0; transform: translateY(-6px) } }
.piega-corpo .campo:last-of-type { margin-bottom: 14px; }

/* ── proposte del primo accesso ─────────────────────────────── */
.proposta {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px; border-radius: var(--r-m); margin-bottom: 10px;
  background: var(--superficie); border: 1px solid var(--linea);
  transition: transform .18s var(--molla), border-color .2s, opacity .2s;
}
.proposta:active { transform: scale(.985); }
.proposta[data-fatto="1"] { border-color: var(--entrata); }
.proposta[data-fatto="1"] .proposta-esito { color: var(--entrata); }
.proposta[disabled] { opacity: .5; pointer-events: none; }
.proposta-icona {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--ottone);
  background: var(--rilievo);
}
.proposta-icona svg { width: 21px; height: 21px; }
.proposta-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.proposta-testo strong { font-size: 14.5px; }
.proposta-testo small { font-size: 12px; color: var(--testo-tenue); margin-top: 2px; }
.proposta-esito {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ottone); flex: 0 0 auto;
}

.gruppo { margin-top: 26px; }
.gruppo-titolo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--testo-tenue); margin: 0 4px 10px;
}
.scheda {
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  border-radius: var(--r-l); padding: 16px; margin-bottom: 9px;
}
.scheda-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 13px;
}
.scheda-nome { font-size: 14.5px; font-weight: 700; }
.scheda .stato {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.scheda .bottone { margin-top: 3px; }
.micro { margin: 11px 0 0; font-size: 12px; line-height: 1.55; color: var(--testo-tenue); }
.segno-riga {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 14px;
  background: var(--rilievo); color: var(--testo-medio);
}

/* ── brindisi (toast) ───────────────────────────────────────── */
.brindisi {
  position: fixed; left: 50%; bottom: calc(96px + var(--sicuro-basso)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--rilievo); border: 1px solid var(--linea);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: all .3s var(--molla);
}
.brindisi.visibile { opacity: 1; transform: translate(-50%, 0); }
.brindisi.errore { border-color: var(--uscita); color: #FFC0B6; }

/* ── scheletri di caricamento ───────────────────────────────── */
.scheletro {
  background: linear-gradient(100deg, var(--superficie) 30%, var(--rilievo) 50%, var(--superficie) 70%);
  background-size: 240% 100%; border-radius: var(--r-m);
  animation: scorri 1.3s infinite linear;
}
@keyframes scorri { to { background-position: -240% 0 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}