/* =====================================================================
   Daily Budget — foglio di stile
   Una schermata sola, da manifesto: un numero enorme e il colore che dice
   subito come stai andando. Tarato su iPhone 15 Pro Max (430 × 932 pt).
   ===================================================================== */

@font-face{
  font-family:'Anton';
  src:url('fonts/anton.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ─────────── umori ───────────
   Il colore di tutta la pagina segue il budget di oggi, a soglie fisse in
   euro (vedi moodOf() in app.js): blu ≥ 15, arancione < 15, rosso < 10, nero < 5.
   Ogni umore ridefinisce le stesse variabili: il resto del foglio usa solo
   quelle. La status bar di iOS in standalone è sempre bianca: per questo
   tutti i fondi sono abbastanza saturi da reggere del testo bianco sopra. */
:root,
html[data-mood="bene"]{            /* budget di oggi da 15 € in su */
  --bg:#2F2BFF;
  --ink:#FFFFFF;
  --soft:rgba(255,255,255,.74);
  --faint:rgba(255,255,255,.4);
  --rule:rgba(255,255,255,.9);
  --hot:#E6FF3D;                   /* il numero grande */
  --panel:#FFFFFF;
  --panel-ink:#15127A;
  --panel-soft:rgba(21,18,122,.58);
  --panel-dim:rgba(21,18,122,.12);
  --panel-hot:#2F2BFF;
  --cta:#E6FF3D;
  --cta-ink:#15127A;
  --pos:#0A9A4A;                   /* entrate, sulla card bianca */
  --neg:#E0143C;                   /* uscite */
}
html[data-mood="attento"]{         /* sotto 15 € */
  --bg:#FF6414;
  --ink:#1A0900;
  --soft:rgba(26,9,0,.72);
  --faint:rgba(26,9,0,.4);
  --rule:rgba(26,9,0,.85);
  --hot:#1A0900;
  --panel:#1A0900;
  --panel-ink:#FFFFFF;
  --panel-soft:rgba(255,255,255,.6);
  --panel-dim:rgba(255,255,255,.14);
  --panel-hot:#FF7A33;
  --cta:#1A0900;
  --cta-ink:#FF7A33;
  --pos:#3DDC84;
  --neg:#FF4D63;
}
html[data-mood="stretto"]{         /* sotto 10 € */
  --bg:#F0164A;
  --ink:#FFFFFF;
  --soft:rgba(255,255,255,.78);
  --faint:rgba(255,255,255,.42);
  --rule:rgba(255,255,255,.9);
  --hot:#FFFFFF;
  --panel:#2B0012;
  --panel-ink:#FFFFFF;
  --panel-soft:rgba(255,255,255,.6);
  --panel-dim:rgba(255,255,255,.14);
  --panel-hot:#FF6B8F;
  --cta:#FFFFFF;
  --cta-ink:#C4003A;
  --pos:#3DDC84;
  --neg:#FF5A70;
}
html[data-mood="vuoto"]{           /* sotto 5 €, saldo finito compreso */
  --bg:#111111;
  --ink:#FFFFFF;
  --soft:rgba(255,255,255,.7);
  --faint:rgba(255,255,255,.36);
  --rule:rgba(255,255,255,.8);
  --hot:#FF3B3B;
  --panel:#222222;
  --panel-ink:#FFFFFF;
  --panel-soft:rgba(255,255,255,.55);
  --panel-dim:rgba(255,255,255,.12);
  --panel-hot:#FF3B3B;
  --cta:#FF3B3B;
  --cta-ink:#FFFFFF;
  --pos:#3DDC84;
  --neg:#FF4D63;
}

:root{
  --display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --text:'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;

  --pad:22px;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* I ritagli dello schermo, con un tetto massimo. In standalone iOS può
     dichiarare un inset inferiore ben più grande dei 34pt dell'home
     indicator: senza limite il fondo si gonfia fino a mangiarsi il contenuto.
     Se invece li dichiara a zero, fissaBordoBasso() in app.js impone un minimo. */
  --sb:min(env(safe-area-inset-bottom, 0px), 34px);
  --st:min(env(safe-area-inset-top, 0px), 62px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* ─────────── impalcatura ───────────
   Il guscio non scorre mai: body è una colonna alta quanto la finestra, il
   contenuto la riempie e scorre per conto suo (solo su schermi piccoli); il
   simulatore scende al fondo col suo margin-top:auto.
   ⚠️ Niente position:fixed per ciò che sta sul fondo: agganciato a
   un'altezza di finestra che iOS al primo disegno non ha ancora deciso, si
   vedeva sospeso sopra il bordo.
   ⚠️ La colonna da sola non basta: il 100% qui sotto si appoggia all'altezza
   che il CSS aveva al primo disegno, e in standalone iOS la cambia dopo
   senza emettere `resize`. L'altezza vera la riscrive in pixel
   `fissaGuscio()` in app.js: fa parte dell'impalcatura, non toglierla. */
html{
  background:var(--bg);
  transition:background-color .7s var(--ease);
}
html,body{ height:100%; }

body{
  margin:0;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.35;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  transition:background-color .7s var(--ease), color .5s var(--ease);
}

button,input{ font:inherit; color:inherit; }
button{ border:0; background:none; cursor:pointer; padding:0; }
[hidden]{ display:none !important; }

.app{
  position:relative;
  flex:1; min-height:0;
  width:100%; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* Grana e luce: il fondo non è mai una tinta piatta. Stanno sotto a tutto e
   non toccano il flusso della colonna. */
.app::before,
.app::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
}
.app::before,
.gate::before{
  background:radial-gradient(120% 60% at 12% -5%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
             radial-gradient(90% 50% at 100% 105%, rgba(0,0,0,.22), rgba(0,0,0,0) 65%);
}
.app::after{
  opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* L'unica parte che scorre, e solo se lo schermo è piccolo. overflow-x:hidden
   non è decorativo: con un solo asse dichiarato l'altro diventa auto da solo. */
.stage{
  position:relative; z-index:1;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  /* 26px: a 12 la data finiva a filo della status bar e sembrava sfocata. */
  /* In fondo il ritaglio dell'home indicator: il simulatore gli sta sopra. */
  /* 28/09: tutto più in basso di ~18px. Sull'iPhone la fascia alta (segno
     delle fisse, freccia, titoletti) finiva nella zona della status bar e si
     vedeva tagliata; il pulsante in fondo scende fin quasi al bordo. */
  padding:calc(var(--st) + 44px) var(--pad) calc(4px + var(--sb));
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}

/* Dal basso: pulsante, subito sopra saldo e giorni, sopra ancora il simulatore,
   a distanze fisse. Tutto lo spazio che resta va al numero grande (.hero e
   .big-box crescono, fitBig() lo allunga in verticale): niente vuoti in giro. */
.update{ margin-top:14px; }

/* ─────────── testata ─────────── */
/* Vuota finché c'è rete: senza figli visibili non occupa spazio. */
.head{
  display:flex; align-items:center; justify-content:flex-end;
  font-weight:700; text-transform:uppercase;
}
.sync{
  padding:4px 10px; border-radius:99px;
  background:var(--ink); color:var(--bg);
  font-size:11px; letter-spacing:.12em;
}

/* Titoletto a due voci: maiuscoletto + corsivo con le grazie. */
.kicker{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.4em;
  font-size:14px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--soft);
}
/* In em: se fitKicker() ingrandisce il titoletto, "oggi" cresce con lui. */
.kicker em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:2.5em; line-height:1; letter-spacing:0; text-transform:none;
  color:var(--ink);
}
/* "budget di oggi sabato 26 settembre": la data in pieno. */
.kicker-date{ color:var(--ink); letter-spacing:.1em; }
/* Il titoletto sopra il numero è largo quanto la card bianca: su una riga,
   largo quanto il suo testo, e fitKicker() gli sceglie la misura giusta.
   Il margine negativo toglie lo spazio che letter-spacing lascia dopo
   l'ultima lettera, che altrimenti non arriverebbe al bordo. */
.hero .kicker{ flex-wrap:nowrap; white-space:nowrap; width:max-content; }
.hero .kicker-date{ margin-right:-.1em; }

/* ─────────── il numero ─────────── */

.hero{ flex:1 0 auto; display:flex; flex-direction:column; }

/* Il riquadro del numero si prende tutta l'altezza libera; il numero sta sul
   suo fondo, vicino al simulatore. Largo esattamente quanto la card bianca:
   fitBig() porta il numero a quella larghezza.
   L'animazione d'ingresso sta qui e non su .big: su .big c'è lo scaleY di
   fitBig(), e un'animazione di transform lo cancellerebbe. */
/* ⚠️ pointer-events:none non è decorativo. La zona di tocco del testo segue le
   misure del font, non la riga (line-height .8): col numero allungato scendeva
   invisibile fin sopra il simulatore e si mangiava i tocchi sul "−" (il "+",
   più a destra, restava fuori). Il numero si legge e basta. */
.big-box{
  flex:1 0 auto;
  display:flex; align-items:flex-end;
  animation:pop .7s var(--ease) both;
  pointer-events:none;
}
/* Accanto al numero, in alto come un esponente: ",91 €" su una riga.
   (Provato anche ",91 €" in basso sulla linea di base: la virgola di Anton
   resta staccata dal 7 e a Gaetano non piaceva. Non riproporlo.)
   Largo quanto lo schermo al massimo (fitBig), poi allungato in verticale fino
   a riempire lo spazio: da manifesto, e resta sempre la cosa più grande. */
.big{
  position:relative; /* offsetParent del 17: serve a fitBig() per trovare la linea di base */
  display:flex; align-items:flex-start;
  margin-top:26px;
  font-family:var(--display); font-weight:400;
  font-size:min(270px, 28vh);
  line-height:.8;
  letter-spacing:-.005em;
  color:var(--hot);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transform-origin:0 100%;
}
.big-side{
  flex:none;
  display:flex; align-items:baseline; gap:.08em;
  margin-left:.05em; padding-top:.03em;
  font-size:.33em; line-height:.92;
}
/* L'euro accanto ai centesimi, sulla loro linea, più piccolo di loro. */
.big-cur{ font-size:.7em; color:var(--ink); opacity:.9; }

.hero-note{
  margin:14px 0 0;
  font-size:15px; font-weight:600; color:var(--ink);
}

/* Saldo e giorni, fra il simulatore e il pulsante, aperti sopra da una riga piena. */
.facts{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:20px; padding-top:12px;
  border-top:3px solid var(--rule);
}
.fact{ min-width:0; }
.fact + .fact{ padding-left:16px; border-left:3px solid var(--rule); }
.fact .k{
  display:block;
  font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--soft);
}
.fact strong{
  display:block; margin-top:4px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(36px, 5vh, 48px); line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Senza simulatore (l'ultimo giorno, o sotto zero) saldo e giorni restano
   della loro misura normale: allungati erano troppo grandi e sproporzionati
   (Gaetano, 09/10/2026). Lo spazio che avanza lo gestisce fitBig. */
.senza-sim .facts{ margin-top:28px; }
/* Il saldo non deve toccare la riga che lo separa dai giorni. */
.facts .fact:first-child{ padding-right:12px; }

.sheet-panel .kicker{ display:block; }

/* ─────────── mese da cominciare ─────────── */
.empty{ flex:1 0 auto; margin-top:clamp(20px, 6vh, 60px); }
.empty-title{
  margin:10px 0 0;
  font-family:var(--display); font-size:min(96px, 12vh, 21vw); line-height:.86;
  text-transform:uppercase; color:var(--hot);
}

/* ─────────── simulatore ─────────── */
/* Vicino al numero verde: distanza fissa, niente auto. */
.sim{
  /* Sopra al numero grande, che è posizionato e trasformato: senza z-index lo
     coprirebbe anche solo in pittura. */
  position:relative; z-index:2;
  margin-top:22px;
  background:var(--panel); color:var(--panel-ink);
  border-radius:26px;
  padding:14px 16px;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.55);
  transition:background-color .7s var(--ease), color .5s var(--ease);
}
.sim-q{ margin:0; font-size:14px; font-weight:600; color:var(--panel-soft); }
.sim-q em{ font-family:var(--serif); font-size:21px; font-weight:400; color:var(--panel-ink); }

.sim-ctrl{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:4px;
}
.step{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  border:2.5px solid var(--panel-ink);
  color:var(--panel-ink);
  transition:transform .15s var(--ease), background-color .2s, color .2s;
}
.step svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.step:active{ transform:scale(.9); background:var(--panel-ink); color:var(--panel); }
.step:disabled{ opacity:.25; }

.sim-n{ display:flex; align-items:baseline; gap:10px; }
.sim-n strong{
  font-family:var(--display); font-weight:400;
  font-size:52px; line-height:.9;
  font-variant-numeric:tabular-nums;
}
.sim-n span{
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-soft);
}

/* Una tacca per ogni giorno che manca: tratteggiate quelle senza spese,
   piena quella da cui parte il budget nuovo. Si trascina col dito. */
.strip{
  display:flex; gap:3px;
  height:32px; margin-top:10px;
  touch-action:none; cursor:pointer;
}
/* Niente opacity né scaleY sulle tacche: sbiadirebbero e schiaccerebbero anche
   il numero del giorno che c'è dentro. */
.cell{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px;
  background:var(--panel-dim);
  transition:background-color .18s, margin .18s var(--ease);
}
.cell::after{
  content:attr(data-day);
  font-size:12px; font-weight:700; font-style:normal; letter-spacing:0;
  color:var(--panel-ink); opacity:.45;
  pointer-events:none;
}
.cell.skip{
  background:repeating-linear-gradient(135deg, var(--panel-soft) 0 2px, transparent 2px 6px);
}
.cell.target{ background:var(--panel-hot); margin:-3px 0; }
.cell.target::after{ color:var(--panel); opacity:.8; }
.strip.dense .cell::after{ content:none; }
.strip.dense .cell.target::after{ content:attr(data-day); font-size:9px; }

/* "da domenica 27" su una riga, a sinistra; la cifra a destra, sulla stessa base. */
.sim-out{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:10px; padding-top:8px;
  border-top:2px dashed var(--panel-dim);
}
.sim-from{
  margin:0; min-width:0;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* Il corsivo sporge a destra della sua scatola: senza questo margine
     overflow:hidden tagliava l'ultima cifra ("domenica 27", il 7). */
  padding-right:.4em;
}
.sim-from b{
  margin-left:.3em;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:22px; letter-spacing:0; text-transform:none;
  color:var(--panel-ink);
}
.sim-val{
  flex:none;
  font-family:var(--display); font-weight:400;
  font-size:42px; line-height:.9;
  color:var(--panel-hot);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
/* La cifra simulata col colore della SUA fascia (blu da 15 €, arancione
   sotto 15, rosso sotto 10, nero/rosso sotto 5). Solo la cifra: la card no.
   Sulle card scure il blu della pagina non si leggerebbe: uno più chiaro.
   Quando la fascia è quella di oggi resta il colore della card. */
html:not([data-mood="bene"]) .sim-val[data-mood="bene"]{ color:#8A87FF; }
.sim-val[data-mood="attento"]{ color:#FF7A33; }
.sim-val[data-mood="stretto"]{ color:#FF6B8F; }
.sim-val[data-mood="vuoto"]{ color:#FF3B3B; }

/* ─────────── pulsanti ─────────── */
.cta{
  width:100%; height:68px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px;
  background:var(--cta); color:var(--cta-ink);
  font-size:17px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  transition:transform .15s var(--ease), background-color .7s var(--ease), color .5s;
}
.cta svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cta:active{ transform:scale(.97); }
.cta-solid{ background:var(--panel-hot); color:var(--panel); box-shadow:none; }

.btn-line{
  flex:none; height:58px; padding:0 22px;
  border-radius:999px;
  border:2.5px solid var(--panel-dim);
  font-weight:700; color:var(--panel-soft);
}

/* ─────────── foglio "quanto ti resta" ─────────── */
/* Il foglio scende dall'alto: la tastiera dell'iPhone sale dal basso e, con il
   foglio in fondo, copriva proprio la cifra da scrivere. */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center; }
.sheet-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fade .25s var(--ease) both;
}
.sheet-panel{
  position:relative;
  width:100%; max-width:520px;
  background:var(--panel); color:var(--panel-ink);
  border-radius:0 0 32px 32px;
  padding:calc(var(--st) + 32px) var(--pad) 18px;
  /* Entrata corta, senza partire da fuori schermo: il campo prende il focus
     subito e iOS non deve inseguirlo mentre scorre. */
  animation:drop-in .28s var(--ease) both;
}
.sheet-panel .kicker{ color:var(--panel-soft); }
.sheet-panel .kicker em{ color:var(--panel-ink); }

.amount{
  display:flex; align-items:baseline; gap:10px;
  margin-top:10px; padding-bottom:4px;
  border-bottom:3px solid var(--panel-ink);
}
.amount input{
  flex:1; min-width:0;
  border:0; outline:none; background:none; padding:0;
  font-family:var(--display); font-weight:400;
  font-size:76px; line-height:1.05;
  color:var(--panel-ink);
  font-variant-numeric:tabular-nums;
}
.amount input::placeholder{ color:var(--panel-dim); }
.amount span{ font-family:var(--display); font-size:42px; color:var(--panel-soft); }

.sheet-actions{ display:flex; gap:10px; margin-top:24px; }
.sheet-actions .cta{ flex:1; height:58px; }

.version{
  margin:12px 0 0; text-align:center;
  font-size:10.5px; letter-spacing:.08em; color:var(--panel-soft); opacity:.7;
}

/* ─────────── ingresso nascosto alle fisse ─────────── */
/* Un calendarietto di 13px nell'angolo in alto a destra, sopra la data: fuori
   dalla colonna (position:absolute), quindi non sposta niente. La zona di
   tocco è di 44px, il segno si vede appena. */
.peek{
  position:absolute; z-index:3;
  /* 28/09: più in basso, a mezza strada fra la status bar e la data (non
     attaccato: stonava), e a pieno colore. Grigio e sottile com'era, sul
     telefono si vedeva sbiadito, come fuori fuoco. */
  top:calc(var(--st) + 16px); right:calc(var(--pad) - 15px);
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--ink);
}
.peek svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.peek:active{ opacity:.5; }
/* Il tasto del menu: quattro quadratini; aperto diventa una X. */
.peek{ z-index:6; }
/* Da solo nell'angolo: un po' più grande delle tre icone di prima. */
.peek svg{ width:19px; height:19px; stroke-width:2; }
.peek .ico-chiudi{ display:none; }
.peek[aria-expanded="true"] .ico-apri{ display:none; }
.peek[aria-expanded="true"] .ico-chiudi{ display:block; }

/* Il menu a tendina: si apre SOTTO il tasto, allineato a destra, così il
   tasto resta scoperto e un secondo tocco lo richiude. Il velo trasparente
   dietro prende i tocchi fuori dal menu e lo chiude. */
.menu-velo{ position:fixed; inset:0; z-index:4; }
.menu{
  position:absolute; z-index:5;
  top:calc(var(--st) + 16px + 44px + 4px); right:calc(var(--pad) - 6px);
  min-width:236px; padding:8px;
  display:flex; flex-direction:column;
  background:var(--panel); color:var(--panel-ink);
  border-radius:24px;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.6);
  transform-origin:calc(100% - 22px) 0;
  animation:menu-in .2s var(--ease) both;
}
.menu[hidden]{ display:none; }
.menu-voce{
  display:flex; align-items:center; gap:14px;
  width:100%; min-height:52px; padding:0 14px;
  border-radius:16px;
  font-size:16px; font-weight:700; text-align:left;
  color:var(--panel-ink);
}
.menu-voce + .menu-voce{ margin-top:2px; }
.menu-voce svg{ flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-voce:active{ background:var(--panel-dim); }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-6px) scale(.96); } to{ opacity:1; transform:none; } }


/* ─────────── piano ─────────── */
.pn-avviso{
  margin:14px 0 0; padding:10px 14px;
  border-radius:16px; background:#E0143C; color:#FFFFFF;
  font-size:14px; font-weight:700; line-height:1.3;
}
.pn-card, .pn-res{ padding:14px 16px 16px; }
.pn-h{
  margin:0 0 6px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-soft);
}
.pn-h small{ margin-left:6px; font-size:11px; letter-spacing:.06em; text-transform:none; font-weight:600; }
.pn-h b{
  font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:0;
  color:var(--panel-ink);
}

/* Il consiglio: una riga per destinazione, con il perché sotto. */
.pn-alloc{ list-style:none; margin:4px 0 0; padding:0; }
.pn-alloc li{ padding:12px 0; border-top:2px dashed var(--panel-dim); }
.pn-alloc li:first-child{ border-top:0; padding-top:6px; }
.pn-alloc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pn-alloc-top span{
  font-family:var(--display); font-size:22px; line-height:1.05; text-transform:uppercase;
}
.pn-alloc-top b{
  font-family:var(--display); font-weight:400; font-size:30px; line-height:1;
  color:var(--panel-hot); white-space:nowrap;
}
.pn-alloc .pn-fondo .pn-alloc-top b,
.pn-alloc .pn-ass .pn-alloc-top b{ color:var(--pos); }
.pn-alloc p{ margin:6px 0 0; font-size:14px; line-height:1.4; color:var(--panel-ink); }
.pn-alloc .pn-eff{ font-weight:700; color:var(--pos); }
.pn-alt{ margin-top:8px; padding-top:10px; border-top:2px dashed var(--panel-dim); }
.pn-alt summary{
  cursor:pointer; list-style:none;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-soft);
}
.pn-alt summary::-webkit-details-marker{ display:none; }
.pn-alt summary::after{ content:' +'; }
.pn-alt[open] summary::after{ content:' −'; }
.pn-alt ul{ margin:8px 0 0; padding:0; list-style:none; }
.pn-alt li{ margin-top:8px; font-size:13.5px; line-height:1.4; color:var(--panel-ink); }
.pn-alt li b{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-soft); }
.pn-azioni{ display:flex; gap:10px; margin-top:16px; }
.pn-azioni .cta{ flex:1; height:56px; font-size:16px; }
.pn-azioni .btn-line{ height:56px; padding:0 18px; }

/* Situazione e regole: etichetta a sinistra, cifra modificabile a destra. */
.pn-row{
  display:flex; align-items:center; gap:8px;
  min-height:46px; padding:4px 0;
  border-top:1.5px solid var(--panel-dim);
}
.pn-campi .pn-row:first-child{ border-top:0; }
.pn-row > span{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--panel-ink); }
.pn-row input{
  width:112px; flex:none;
  padding:4px 0; border:0; border-bottom:2px solid var(--panel-dim); border-radius:0;
  outline:none; background:none; text-align:right;
  font-family:var(--display); font-weight:400; font-size:21px; color:var(--panel-ink);
}
.pn-row input:focus{ border-bottom-color:var(--panel-hot); }
.pn-row input[type="month"]{ -webkit-appearance:none; appearance:none; width:150px; font-size:18px; min-height:34px; }
.pn-row i{ width:34px; flex:none; font-style:normal; font-size:12px; font-weight:700; color:var(--panel-soft); }
.pn-seg-row{ border-top:1.5px solid var(--panel-dim); }
.pn-seg-row .seg{ width:200px; flex:none; }
.pn-seg-row .seg-btn{ height:36px; font-size:13px; }
.pn-seg-row .seg-btn.on{ background:var(--panel-ink); color:var(--panel); }
/* Una frase che non ci sta nel rigo va a capo intera (vedi frasi() in piano.js). */
.frase{ display:inline-block; }
.tp-txt .frase{ margin:0; }

/* ─────────── le tappe del piano ─────────── */
.pn-tappe .pn-h{ display:flex; align-items:center; gap:8px; }
.pn-tappe .pn-h small{ margin-left:auto; }
.tp-stato{
  padding:2px 8px; border-radius:999px;
  background:var(--pos); color:#FFFFFF;
  font-size:10.5px; letter-spacing:.12em;
}
.tp-stato.ritardo{ background:var(--neg); }
.tp-list{ list-style:none; margin:4px 0 0; padding:0; }
/* Una tappa: il cerchio da spuntare, cosa fare ed entro quando, la cifra. */
.tp{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:10px 0; cursor:pointer;
  border-top:1.5px solid var(--panel-dim);
}
.tp:first-child{ border-top:0; }
.tp-check{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; border:2.5px solid var(--panel-ink);
  color:transparent;
  transition:background-color .15s, color .15s, border-color .15s;
}
.tp-check svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tp.fatta .tp-check{ background:var(--pos); border-color:var(--pos); color:#FFFFFF; }
.tp.scaduta .tp-check{ border-color:var(--neg); }
.tp-traguardo .tp-check{ border-style:dashed; color:var(--panel-soft); }
.tp-traguardo .tp-check svg{ stroke-width:1.8; }
.tp-traguardo.fatta .tp-check{ border-style:solid; color:#FFFFFF; }
.tp-maxi .tp-check{ border-color:var(--panel-hot); }
.tp-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tp-txt small{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--panel-soft);
}
.tp.scaduta .tp-txt small{ color:var(--neg); }
.tp-txt b{ margin-top:2px; font-size:15.5px; font-weight:700; line-height:1.25; color:var(--panel-ink); }
.tp-maxi .tp-txt b{ color:var(--panel-hot); }
.tp-txt span{ margin-top:2px; font-size:12.5px; line-height:1.35; color:var(--panel-soft); }
.tp.fatta .tp-txt b{ text-decoration:line-through; text-decoration-thickness:2px; opacity:.55; }
.tp.fatta .tp-txt span{ opacity:.55; }
.tp-cifra{
  flex:none; font-family:var(--display); font-weight:400; font-size:21px; line-height:1;
  color:var(--pos); white-space:nowrap;
}
.tp-carta .tp-cifra{ color:var(--panel-hot); }
.tp-uscita .tp-cifra{ color:var(--neg); }
.tp-isp .tp-cifra{ color:var(--panel-hot); }
.tp.fatta .tp-cifra{ opacity:.55; }
/* Una cifra divisa fra due fondi (la tredicesima): una riga per fondo, con
   la sua parte a destra e il totale aggiornato sotto. */
.tp-div{ margin-top:8px; display:flex; flex-direction:column; gap:7px; }
.tp-div-r{
  display:grid; grid-template-columns:1fr auto; column-gap:10px; align-items:baseline;
  padding-left:10px; border-left:3px solid var(--panel-dim);
}
.tp-div-n{ font-size:13px; font-weight:700; line-height:1.3; color:var(--panel-ink); }
.tp-div-v{ font-size:13px; font-weight:700; color:var(--pos); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tp-div-t{ grid-column:1 / -1; font-size:12px; line-height:1.3; color:var(--panel-soft); }
.tp.fatta .tp-div{ opacity:.55; }
/* Il mese, con le frecce per andare avanti e indietro. */
.tp-mesi{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:6px 0 2px; padding-bottom:8px;
  border-bottom:2px dashed var(--panel-dim);
}
.tp-mese{
  margin:0; flex:1; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:26px; line-height:1.1;
  color:var(--panel-ink);
}
.tp-mese-box{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.tp-mese-box .tp-mese{ flex:none; }
.tp-oggi{
  margin-top:4px; padding:3px 10px;
  border-radius:999px; background:var(--panel-hot); color:var(--panel);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tp-oggi:active{ transform:scale(.95); }
.tp-freccia{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; border:2.5px solid var(--panel-ink);
  color:var(--panel-ink);
}
.tp-freccia svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.tp-freccia:active{ background:var(--panel-ink); color:var(--panel); }
.tp-freccia:disabled{ opacity:.2; }

/* Sotto il Fondo auto, piccolo: quanto manca alla maxi rata. */
.pn-manca{
  display:block; margin-top:4px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--soft);
}

/* Situazione: nome e prossimo addebito a sinistra, cifra a destra. */
.pn-voce{
  display:flex; align-items:center; gap:10px;
  min-height:58px; padding:8px 0;
  border-top:1.5px solid var(--panel-dim);
}
.pn-voce:first-child{ border-top:0; }
.pn-voce[data-voce="carta"], .pn-voce[data-voce="prestito"]{ cursor:pointer; }
.pn-voce-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pn-voce-txt span{ font-size:15px; font-weight:700; color:var(--panel-ink); }
.pn-voce-txt small{ margin-top:2px; font-size:12px; font-weight:600; color:var(--panel-soft); }
.pn-voce > b{
  flex:none; font-family:var(--display); font-weight:400; font-size:24px; line-height:1;
  color:var(--panel-ink); white-space:nowrap;
}
/* La "i" nel cerchio accanto al nome: apre il piano di ammortamento. La
   zona di tocco è più grande del cerchio. */
.pn-info{
  position:relative;
  display:inline-grid; place-items:center;
  width:19px; height:19px; margin-left:8px; vertical-align:-3px;
  border-radius:50%; border:1.8px solid var(--panel-ink);
  font-family:var(--serif); font-style:italic; font-size:14px; line-height:1; font-weight:400;
  color:var(--panel-ink);
}
.pn-info::after{ content:''; position:absolute; inset:-12px; }
.pn-info:active{ background:var(--panel-ink); color:var(--panel); }

/* Il piano di ammortamento: un foglio alto che scorre. */
.sheet-amm .sheet-panel{
  display:flex; flex-direction:column;
  max-height:calc(100% - 24px);
}
.amm-wrap{
  flex:1; min-height:0; margin-top:12px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.amm{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.amm th{
  position:sticky; top:0; background:var(--panel);
  padding:6px 4px; text-align:right;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--panel-soft); border-bottom:2px solid var(--panel-dim);
}
.amm td{
  padding:8px 4px; text-align:right; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--panel-ink);
  border-bottom:1px solid var(--panel-dim);
}
.amm th:first-child, .amm td:first-child{ text-align:left; padding-left:0; }
.amm td:first-child{ font-weight:700; }
.amm td.amm-int{ color:var(--neg); font-weight:500; }
.amm td:last-child{ font-family:var(--display); font-weight:400; font-size:16px; }
.sheet-amm.senza-int .amm-int{ display:none; }
/* "Fondo assicurazione" in alto nel piano: su una riga sola. */
.fact .k.k-lunga{ font-size:11px; letter-spacing:.08em; white-space:nowrap; }
/* Carta Intesa: la riga in cui si riprende lo spazio per la maxi rata. */
.amm tr.amm-prel td{ color:var(--neg); }
.amm-nota{ margin:12px 0 0; font-size:13px; line-height:1.45; font-weight:600; color:var(--panel-soft); }
.sheet-amm .sheet-actions{ margin-top:14px; }
.pn-piu{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  border-radius:50%; background:var(--pos); color:#FFFFFF;
  font-size:24px; font-weight:700; line-height:1;
}
.pn-piu:active{ transform:scale(.92); }
.pn-nota{ margin:16px 4px 8px; font-size:12px; line-height:1.45; color:var(--soft); }

/* ─────────── fisse ─────────── */
/* Stessa impalcatura della schermata di oggi: colonna, la lista scorre, il
   pulsante sta in fondo sotto il pollice. */
.fx{
  position:relative; z-index:1;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  padding:calc(var(--st) + 28px) var(--pad) calc(4px + var(--sb));
  animation:rise .35s var(--ease) both;
}
/* Durante lo swipe indietro: la pagina delle tappe si stacca e scorre sopra
   quella di oggi, che le sta sotto. L'animazione d'ingresso va spenta, sennò
   il suo transform prevarrebbe su quello del dito. */
.fx.swipe{
  position:absolute; inset:0; z-index:4;
  animation:none;
  background:var(--bg);
  box-shadow:-24px 0 48px rgba(0,0,0,.35);
  will-change:transform;
}
.fx-scroll{
  flex:1; min-height:0;
  margin:0 calc(-1 * var(--pad)); padding:0 var(--pad) 6px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
/* Fuori dalla parte che scorre: il tasto indietro resta sempre lì. */
.fx-head{ flex:none; position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fx-back{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  margin-left:-4px;
  border-radius:50%; border:2.5px solid var(--ink);
  color:var(--ink);
}
.fx-back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.fx-back:active{ background:var(--ink); color:var(--bg); }
.fx-head .kicker{ flex-wrap:nowrap; white-space:nowrap; }
/* Il mese da solo, grande, nel colore forte della pagina (lime sul blu). */
.fx-head .kicker em{ font-size:44px; line-height:1; color:var(--hot); padding-right:.08em; }

.fx-facts{ margin-top:16px; }
.fx-facts .fact strong{ font-size:34px; }

.fx-card{
  margin-top:18px;
  background:var(--panel); color:var(--panel-ink);
  border-radius:26px;
  padding:10px 14px 12px 12px;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.55);
}
.fx-list{ list-style:none; margin:0; padding:0; }

/* Una tappa: il giorno in un cerchio sulla linea del mese, la descrizione,
   l'importo, il cestino. Le tappe raggiunte sono piene e sbiadite, la
   prossima è accesa, le altre sono solo contornate. */
.tappa{ position:relative; display:flex; align-items:center; gap:4px; min-height:56px; }
.tappa::before,
.oggi-segno::before{
  content:''; position:absolute; left:21px; top:0; bottom:0;
  border-left:2.5px dashed var(--panel-dim);
}
.tappa.fatta::before,
.oggi-segno.dopo-fatte::before{ border-left-style:solid; border-left-color:var(--panel-ink); }
.fx-list > li:first-child::before{ top:50%; }
.fx-list > li:last-child::before{ bottom:50%; }
.fx-list > li:only-child::before{ content:none; }

.tappa-main{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  padding:6px 0; text-align:left;
}
.tappa-day{
  position:relative; z-index:1;
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  border:2.5px solid var(--panel-ink);
  background:var(--panel);
  font-family:var(--display); font-size:21px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.tappa.fatta .tappa-day{ background:var(--panel-ink); color:var(--panel); }
.tappa.prossima .tappa-day{ background:var(--panel-hot); border-color:var(--panel-hot); color:var(--panel); }

.tappa-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tappa-txt b{
  font-size:16px; font-weight:700; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tappa-txt small{
  margin-top:2px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-soft);
}
.tappa.prossima .tappa-txt small{ color:var(--panel-hot); }
.tappa-amt{
  flex:none;
  font-family:var(--display); font-size:24px; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Verde le entrate, rosso le uscite: si distinguono a colpo d'occhio. */
.tappa.entrata .tappa-amt{ color:var(--pos); }
.tappa.uscita .tappa-amt{ color:var(--neg); }
.tappa.fatta .tappa-txt{ opacity:.45; }
.tappa.fatta .tappa-amt{ opacity:.6; }

.tappa-del{
  flex:none; height:36px; min-width:32px;
  display:grid; place-items:center;
  margin-right:-6px; padding:0 4px;
  border-radius:999px;
  color:var(--panel-soft);
  font-size:13px; font-weight:700;
  transition:background-color .15s, color .15s;
}
.tappa-del svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Primo tocco sul cestino: diventa "Elimina", rosso; il secondo elimina. */
.tappa-del.conferma{ padding:0 14px; background:#E5153F; color:#FFFFFF; }

/* La riga di oggi, fra le tappe raggiunte e quelle che mancano. */
.oggi-segno{ position:relative; display:flex; align-items:center; height:34px; }
.oggi-segno span{
  position:relative; z-index:1;
  margin-left:4px; padding:3px 10px;
  border-radius:999px;
  background:var(--panel-hot); color:var(--panel);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.oggi-segno::after{
  content:''; flex:1; margin-left:10px;
  border-top:2px dashed var(--panel-hot); opacity:.6;
}

.fx-empty{ margin:14px 6px; font-size:15px; font-weight:600; color:var(--panel-soft); }
.fx-tot{
  display:flex; justify-content:space-between; gap:10px;
  margin:8px 0 0 2px; padding-top:10px;
  border-top:2px dashed var(--panel-dim);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--panel-soft);
}
.fx-tot b{ font-family:var(--display); font-weight:400; font-size:17px; letter-spacing:0; }
.fx-tot .entrate b{ color:var(--pos); }
.fx-tot .uscite b{ color:var(--neg); }
/* Netto: verde se avanza, rosso se le uscite superano le entrate. */
.fx-tot .netto b{ color:var(--pos); }
.fx-tot .netto.neg b{ color:var(--neg); }

/* Foglio della voce: uscita/entrata, giorno + descrizione, importo. */
/* Uscita/entrata e, accanto, il conto (Intesa o Revolut): una riga sola. */
.fx-scelte{ display:grid; grid-template-columns:1.5fr 1fr; gap:10px; margin-top:12px; }
.seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px;
  border-radius:999px; background:var(--panel-dim);
}
.seg-btn{
  height:42px; border-radius:999px;
  font-size:15px; font-weight:700; color:var(--panel-soft);
  transition:background-color .15s, color .15s;
}
.seg-btn.on{ background:var(--neg); color:#FFFFFF; }
.seg-btn.on[data-kind="entrata"]{ background:var(--pos); }
.seg-banca .seg-btn{ display:grid; place-items:center; }
.seg-banca .logo-banca{ width:28px; height:28px; margin:0; transition:opacity .15s, filter .15s; }
.seg-banca .seg-btn:not(.on) .logo-banca{ opacity:.35; filter:grayscale(1); }
.seg-banca .seg-btn.on,
.seg-banca .seg-btn.on[data-banca]{ background:var(--panel); box-shadow:inset 0 0 0 2.5px var(--panel-ink); }

/* Il logo del conto accanto ad "addebitato" / "tra 3 giorni" nella lista. */
.logo-banca{
  display:inline-block; flex:none;
  width:18px; height:18px; margin-left:8px;
  vertical-align:-5px; border-radius:5px;
  box-shadow:0 0 0 1px var(--panel-dim);
}
.fx-row{ display:flex; gap:12px; margin-top:14px; }
.fld{ display:flex; flex-direction:column; min-width:0; }
.fld span{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panel-soft);
}
.fld input{
  width:100%; height:46px;
  margin-top:2px; padding:4px 0;
  border:0; border-bottom:3px solid var(--panel-ink); border-radius:0;
  outline:none; background:none;
  font-size:20px; font-weight:700; color:var(--panel-ink);
}
.fld-day{ flex:none; width:72px; }
.fld-day input{ font-family:var(--display); font-weight:400; font-size:30px; line-height:1; }
.fld-name{ flex:1; }
.fld-full{ margin-top:14px; }
/* Il calendario di iOS: la data scelta, grande, a sinistra. */
.fld-date input{
  -webkit-appearance:none; appearance:none;
  display:block; min-height:46px; text-align:left;
  font-family:var(--display); font-weight:400; font-size:26px; line-height:1.2;
}
.fld-date input::-webkit-date-and-time-value{ text-align:left; }

/* ─────────── scadenze ─────────── */
/* Righe senza linea del tempo: descrizione, sotto la data, sotto ancora
   quanto manca. Scaduta (o in scadenza oggi): data e scritta in rosso. */
.sc-list .tappa::before{ content:none; }
.sc-list .tappa + .tappa{ border-top:2px dashed var(--panel-dim); }
.sc-list .tappa-main{ padding:10px 0 10px 4px; }
/* Descrizione grande e in maiuscolo, la data sotto in minuscolo (scelta di
   Gaetano: prima era il contrario). */
.sc-list .tappa-txt b{
  font-family:var(--display); font-weight:400;
  font-size:20px; line-height:1.1; letter-spacing:.01em;
  text-transform:uppercase;
}
.scad-data{
  margin-top:3px;
  font-size:15px; font-weight:600; line-height:1.2;
}
.sc-list .tappa-txt small{ margin-top:3px; color:var(--panel-soft); }
.tappa.scaduta .scad-data,
.tappa.scaduta .tappa-txt small,
.tappa.scaduta .tappa-amt{ color:var(--neg); }
.pill-scaduta{
  display:inline-block; padding:2px 8px;
  border-radius:999px; background:var(--neg); color:#FFFFFF;
  letter-spacing:.14em;
}
/* Se c'è qualcosa di scaduto, la cifra in alto si accende di rosso. */
#sc-scadute.allarme{
  display:inline-block; max-width:100%;
  margin-top:6px; padding:2px 10px 0;
  border-radius:12px; background:#E0143C; color:#FFFFFF;
}
.fx-amount{ margin-top:14px; }
.fx-amount input{ font-size:56px; }
.fx-amount span{ font-size:32px; }

/* ─────────── accesso ─────────── */
.gate{
  flex:1; min-height:0;
  display:flex; align-items:flex-end;
  padding:calc(var(--st) + 24px) var(--pad) calc(28px + var(--sb));
  position:relative; overflow:hidden;
}
.gate::before{ content:''; position:absolute; inset:0; pointer-events:none; }
.gate-inner{ position:relative; width:100%; max-width:440px; margin:0 auto; animation:rise .6s var(--ease) both; }
.gate-brand{
  margin:0 0 22px;
  font-family:var(--display); font-size:112px; line-height:.84;
  text-transform:uppercase; color:var(--hot);
}
#gate-form{ display:grid; gap:12px; margin-top:18px; }
#gate-key{
  height:62px; padding:0 24px;
  border-radius:999px; border:2.5px solid var(--ink);
  background:transparent; color:var(--ink);
  font-size:17px; outline:none;
}
#gate-key::placeholder{ color:var(--faint); }
.gate-error{ min-height:20px; margin:14px 0 0; font-size:14px; font-weight:600; }

/* ─────────── avvisi ─────────── */
.toast{
  position:fixed; left:50%; top:calc(var(--st) + 24px); z-index:90;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 40px);
  text-align:center;
  /* Si legge e basta: non deve fermare i tocchi sui tasti che copre (la
     freccia per tornare indietro, il menu). */
  pointer-events:none;
  padding:12px 20px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:14.5px; font-weight:700;
  box-shadow:0 16px 36px -16px rgba(0,0,0,.6);
  animation:drop .35s var(--ease) both;
}
.toast.err{ background:#111; color:#FF6B6B; }

@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes drop-in{ from{ opacity:0; transform:translateY(-24px) } to{ opacity:1; transform:none } }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes drop{ from{ opacity:0; transform:translate(-50%, -10px) } to{ opacity:1; transform:translate(-50%, 0) } }
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.96) } to{ opacity:1; transform:none } }

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



/* ─────────── i fondi ─────────── */
.fo-list{ list-style:none; margin:4px 0 0; padding:0; }
.fo{ padding:12px 0; border-top:1.5px solid var(--panel-dim); }
.fo:first-child{ border-top:0; padding-top:6px; }
.fo-top{ display:flex; align-items:center; gap:10px; }
.fo-n{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--panel-ink); color:var(--panel);
  font-size:13px; font-weight:700;
}
.fo-txt{ flex:1; min-width:0; display:flex; flex-direction:column; cursor:pointer; }
.fo-txt b{ font-size:15.5px; font-weight:700; line-height:1.25; color:var(--panel-ink); }
.fo-txt small{ margin-top:2px; font-size:12px; font-weight:600; line-height:1.35; color:var(--panel-soft); }
.fo-chip{
  display:inline-block; margin-left:7px; padding:1px 7px; vertical-align:2px;
  border-radius:99px; border:1.5px solid var(--panel-dim);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-soft);
}
.fo-frecce{ flex:none; display:flex; gap:4px; }
.fo-freccia{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; border:2px solid var(--panel-ink); color:var(--panel-ink);
}
.fo-freccia svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.fo-freccia:disabled{ opacity:.2; }
.fo-freccia:active{ background:var(--panel-ink); color:var(--panel); }
.fo-bar{ height:7px; margin:10px 0 0 36px; border-radius:99px; background:var(--panel-dim); overflow:hidden; }
.fo-bar i{ display:block; height:100%; border-radius:99px; background:var(--pos); }
.fo-giu{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:8px; padding-left:36px; }
.fo-cifra{
  flex:1; font-family:var(--display); font-weight:400; font-size:24px; line-height:1;
  color:var(--panel-ink); white-space:nowrap; cursor:pointer;
}
.fo-cifra small{ margin-left:6px; font-family:var(--text); font-size:12.5px; font-weight:700; letter-spacing:0; color:var(--panel-soft); }
.fo-piu{ width:34px; height:34px; }
.fo-carta .fo-cifra{ color:var(--neg); cursor:default; }
.fo-pagato .fo-txt, .fo-pagato .fo-cifra, .fo-pagato .fo-bar,
.fo-dopo .fo-txt, .fo-dopo .fo-cifra, .fo-dopo .fo-bar{ opacity:.5; }
.fo-raggiunto .fo-bar i{ background:var(--panel-hot); }
.fo-scaduto .fo-txt small{ color:var(--neg); }
.fo-regola{ margin:12px 0 0; font-size:12.5px; line-height:1.4; font-weight:600; color:var(--panel-soft); }
.fo-elimina{
  display:block; margin:14px auto 0; padding:8px 12px;
  font-size:14px; font-weight:700; color:var(--neg);
}
.fo-elimina.conferma{ text-decoration:underline; }

/* ─────────── cronologia del saldo ─────────── */
.fact-tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fact-tap:active{ opacity:.6; }
.cr-list{ list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums; }
.cr-giorno{
  position:sticky; top:0; z-index:1; background:var(--panel);
  padding:12px 0 6px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-soft);
}
.cr-giorno:first-child{ padding-top:2px; }
.cr-voce{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-top:1px solid var(--panel-dim);
}
.cr-sx, .cr-dx{ display:flex; flex-direction:column; }
.cr-dx{ align-items:flex-end; text-align:right; }
.cr-sx b{ font-size:15px; font-weight:700; color:var(--panel-ink); }
.cr-sx small{ margin-top:2px; font-size:12px; font-weight:600; color:var(--panel-soft); }
.cr-dx b{ font-family:var(--display); font-weight:400; font-size:22px; line-height:1; color:var(--panel-ink); white-space:nowrap; }
.cr-dx small{ margin-top:4px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.cr-piu{ color:var(--pos); }
.cr-meno{ color:var(--neg); }
.cr-zero{ color:var(--panel-soft); }

/* ─────────── in alto nel piano: quale salvadanaio ─────────── */
.fact-sc{ position:relative; }
.fact-scegli{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:6px 0; margin:-6px 0; cursor:pointer;
  color:var(--soft); text-align:left;
}
.fact-scegli span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fact-scegli svg{ flex:none; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.fact-scegli:active{ opacity:.6; }
#pn-emerg, #pn-fondo{ cursor:pointer; }
.pn-velo{ position:fixed; inset:0; z-index:5; }
.pn-scegli{
  position:absolute; z-index:6;
  min-width:230px; max-width:calc(100% - 8px); padding:6px;
  display:flex; flex-direction:column;
  background:var(--panel); color:var(--panel-ink);
  border-radius:20px; box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
  animation:menu-in .18s var(--ease) both;
}
.pn-scegli button{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; min-height:48px; padding:0 12px; border-radius:14px;
  font-size:15px; font-weight:700; text-align:left; color:var(--panel-ink);
}
.pn-scegli button small{ font-size:13px; font-weight:700; color:var(--panel-soft); white-space:nowrap; }
.pn-scegli button.on{ color:var(--panel-hot); }
.pn-scegli button.on small{ color:var(--panel-hot); }
.pn-scegli button:active{ background:var(--panel-dim); }
.fx-scroll{ position:relative; }

/* ─────────── fino a quando (fine mese o stipendio) ─────────── */
.fact .k .k-freccia{ display:inline-block; width:12px; height:12px; margin-left:5px; vertical-align:-1px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.pe-seg{ margin-top:14px; }
.pe-seg .seg-btn{ flex:1; }
#pe-giorno-box{ margin-top:14px; }
.pe-nota{ margin:12px 0 0; font-size:13.5px; line-height:1.45; font-weight:600; color:var(--panel-soft); }
.pe-seg .seg-btn.on{ background:var(--panel-hot); color:var(--panel); }

/* ─────────── foglio del saldo: resta o speso ─────────── */
.rem-seg{ width:100%; }
.rem-seg .seg-btn{ flex:1; white-space:nowrap; }
.rem-seg .seg-btn.on{ background:var(--panel-hot); color:var(--panel); }
.rem-seg .seg-btn:disabled{ opacity:.35; }
.rem-crono{
  display:block; margin:12px auto 0; padding:6px 10px;
  font-size:13.5px; font-weight:700; color:var(--panel-soft);
  text-decoration:underline; text-underline-offset:3px;
}