:root {
  --bg: #0B0F17;
  --surface: #151B27;
  --surface-2: #1C2433;
  --text: #F3EFE6;
  --text-soft: #9BA1B0;
  --border: #232C3C;
  --primary: #E7C04D;
  --primary-soft: rgba(231,192,77,.14);
  --entrata: #5BB98B;
  --entrata-soft: rgba(91,185,139,.14);
  --uscita: #D64B5C;
  --uscita-soft: rgba(214,75,92,.16);
  --warn: #E8A33D;
  --warn-soft: rgba(232,163,61,.16);
  --shared: #4FB3C9;
  --shared-soft: rgba(79,179,201,.16);
  --gold: #E7C04D;
  --gold-soft: rgba(231,192,77,.45);
  --shadow: 0 6px 18px rgba(0,0,0,.45);
  --radius: 16px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));     /* iPhone: env() · Android (guscio): la variabile che Capacitor inietta */
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --uscita-text: #EB7480;   /* rosso più chiaro: SOLO per testo piccolo (contrasto AA) */
  --dur-fast: .16s; --dur-base: .24s; --dur-slow: .4s;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

/* Accessibilità: indicatore di focus visibile per chi naviga da tastiera */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.fab:focus-visible, .icon-btn:focus-visible, .switch:focus-visible, .tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.amount-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
/* Solo per screen reader: invisibile a schermo ma letto dalle tecnologie assistive */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Tema scuro fisso: i colori vivono in :root (niente variante chiara) */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Barra superiore ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--primary);
  color: #fff;
  padding: calc(var(--safe-top) + 34px) 16px 14px;
  box-shadow: var(--shadow);
}
.appbar-title { font-size: 1.1rem; font-weight: 700; text-align: center; }
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.month-label { font-size: .98rem; font-weight: 600; min-width: 140px; text-align: center; text-transform: capitalize; }
.icon-btn {
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:active { background: rgba(255,255,255,.35); }
.icon-btn { position: relative; }
.icon-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* area toccabile ~44px senza ingrandire il cerchio */

/* ---------- Contenuto ---------- */
#main {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 16px calc(120px + var(--safe-bottom));
}
.view { animation: fade .18s ease; }
/* Impostazioni: più aria sotto la linea d'oro (qui il selettore non c'è). */
#view-categorie { padding-top: 10px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1; transform:none;} }

/* ---------- Cards riepilogo ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.card-saldo { grid-column: 1 / -1; }
.card-label { font-size: .8rem; color: var(--text-soft); margin-bottom: 4px; }
.card-value { font-size: 1.35rem; font-weight: 700; }
.card-entrate .card-value { color: var(--entrata); }
.card-uscite .card-value { color: var(--uscita); }
.card-saldo .card-value { color: var(--primary); font-size: 1.6rem; }

/* ---------- Pannelli ---------- */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel-title { font-size: .95rem; font-weight: 700; margin: 0 0 12px; }
.hint { font-size: .85rem; color: var(--text-soft); margin: 0 0 12px; }
.empty { text-align: center; color: var(--text-soft); padding: 18px 8px; font-size: .9rem; }

/* ---------- Grafico a torta ---------- */
.chart-area { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut {
  width: 140px; height: 140px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--border);
  position: relative;
}
.donut::after {
  content: "";
  position: absolute; inset: 28px;
  border-radius: 50%;
  background: var(--surface);
}
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; min-width: 160px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 3px 0; }
.legend .dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.legend .lg-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .lg-val { color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------- Lista movimenti ---------- */
.filterbar { margin-bottom: 12px; }
.filterbar input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 1rem;
}
.movement-list { list-style: none; margin: 0; padding: 0; }
.date-group-label {
  font-size: .78rem; color: var(--text-soft); font-weight: 600;
  text-transform: capitalize; margin: 14px 4px 6px;
}
.movement {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 8px;
}
.mv-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex: 0 0 auto;
}
.mv-icon.in { background: var(--entrata-soft); color: var(--entrata); }
.mv-icon.out { background: var(--uscita-soft); color: var(--uscita); }
.mv-main { flex: 1 1 auto; min-width: 0; }
.mv-cat { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-sub { font-size: .8rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mv-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-amount.in { color: var(--entrata); }
.mv-amount.out { color: var(--uscita-text); }
.mv-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }

/* ---------- Categorie ---------- */
.chip-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px 6px 12px; font-size: .88rem;
}
.chip button {
  border: none; background: none; color: var(--text-soft);
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.add-cat { display: flex; gap: 8px; }
.add-cat input {
  flex: 1 1 auto; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .95rem;
}
.btn-small {
  border: none; background: var(--primary); color: #fff;
  border-radius: 10px; padding: 0 16px; font-weight: 600; font-size: .9rem;
}
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pulsante + (FAB) ---------- */
.fab {
  position: fixed;
  inset-inline-end: 18px;
  bottom: calc(76px + var(--safe-bottom));
  z-index: 30;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 2rem; line-height: 1;
  box-shadow: 0 6px 16px rgba(37,99,235,.45);
}
.fab:active { transform: scale(.94); }

/* Avvisino "nuova versione disponibile": pill flottante sopra fab e tab bar, tocca per ricaricare. */
.update-banner {
  position: fixed; left: 50%; bottom: calc(148px + var(--safe-bottom));
  transform: translateX(-50%) translateY(12px);
  z-index: 65; max-width: calc(100vw - 32px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--surface);
  color: var(--gold); font-family: var(--sans); font-size: .9rem; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.update-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.update-banner.hidden { display: none; }
.update-banner .ub-ico { font-size: 1.05em; line-height: 1; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 25;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
}
.tab {
  flex: 1 1 0;
  border: none; background: none;
  padding: 8px 4px 10px;
  color: var(--text-soft);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem;
}
.tab .tab-ico { font-size: 1.25rem; line-height: 1; }
.tab.active { color: var(--primary); }

/* Pannello "Per portafoglio" (Riepilogo) */
.wallet-summary { list-style: none; margin: 0; padding: 0; }
.wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.wallet-row:first-child { border-top: 0; }
.wallet-name { font-weight: 600; }
.wallet-figs { display: flex; gap: 14px; font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
.w-in { color: var(--entrata); }
.w-out { color: var(--uscita); }

/* Selettore portafoglio nella barra filtri dei Movimenti */
.wallet-filter { width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: .92rem; }

/* Schermata "Andamento nel tempo" */
.trend-card { max-width: 720px; width: 100%; }
.onb-card.trend-card { max-width: 640px; }
.trend-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.trend-controls select { flex: 1 1 140px; min-width: 120px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: .9rem; }
.trend-controls .seg { flex: 1 1 140px; }
.trend-chart { width: 100%; }
.trend-svg { display: block; width: 100%; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 14px; font-size: 1.02rem; color: var(--text-soft); }
.trend-leg { display: inline-flex; align-items: center; gap: 7px; }
.trend-dot { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.trend-story { text-align: center; margin: 20px auto 0; max-width: 560px; font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--text); text-wrap: balance; }
.trend-summary { text-align: center; margin-top: 10px; font-size: 1.05rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.trend-summary strong { color: var(--gold); }
/* Promemoria "in arrivo" (avviso in-app) */
#reminders-panel { border-left: 3px solid var(--gold); }
.reminders-list { list-style: none; margin: 8px 0 0; padding: 0; }

/* Frase del momento (voce "pergamena") — saluto poetico del giorno */
.moment-line { text-align: center; margin: 2px auto 16px; max-width: 560px; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.45; color: var(--gold); opacity: .92; text-wrap: balance; }
.ach-moment { text-align: center; margin: 2px auto 14px; max-width: 460px; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.4; color: var(--gold); opacity: .9; text-wrap: balance; }

/* ---------- Foglio form ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.4);
  animation: fade .15s ease;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  overflow-y: auto;
  padding-bottom: calc(24px + var(--safe-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  animation: slideup .22s ease;
}
@keyframes slideup { from { transform: translateY(100%);} to { transform: none; } }
.sheet.closing { animation: slideDown .2s var(--ease-out) forwards; }
@keyframes slideDown { to { transform: translateY(100%); } }
.sheet-backdrop.closing { animation: fadeOut .2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 8px auto 0; }
.sheet-header {
  position: sticky; top: 0;
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.sheet-title { font-size: 1rem; font-weight: 700; margin: 0; }
.link-btn { border: none; background: none; color: var(--primary); font-size: .98rem; padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; }
.link-btn.strong { font-weight: 700; }
.sheet-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.type-toggle { display: flex; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 4px; }
.type-opt { flex: 1 1 0; }
.type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.type-opt span {
  display: block; text-align: center; padding: 10px; border-radius: 9px;
  font-weight: 600; color: var(--text-soft);
}
.type-opt input:checked + .type-uscita { background: var(--uscita); color: #fff; }
.type-opt input:checked + .type-entrata { background: var(--entrata); color: #fff; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: .82rem; color: var(--text-soft); font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1rem;
}
.amount-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; background: var(--surface); }
.amount-input .euro { font-size: 1.3rem; color: var(--text-soft); }
.amount-input input { flex: 1 1 0; min-width: 0; border: none; padding: 14px 0; font-size: 1.5rem; font-weight: 700; background: none; }
.amount-input input:focus { outline: none; }

.receipt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* due bottoni nel guscio Android */
.btn-secondary {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: .92rem;
}
.receipt-btn { display: inline-flex; align-items: center; }
.receipt-preview-wrap { position: relative; }
.receipt-preview { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.receipt-remove {
  position: absolute; top: -8px; inset-inline-end: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--uscita); color: #fff; font-size: .85rem; line-height: 1;
}
.btn-danger {
  border: 1px solid var(--uscita); background: var(--uscita-soft); color: var(--uscita);
  border-radius: 12px; padding: 12px; font-weight: 600; margin-top: 4px;
}

/* ---------- Visualizzatore foto ---------- */
.photo-viewer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.photo-viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom));
  transform: translateX(-50%);
  background: #111827; color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: .9rem; z-index: 70;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  animation: fade .2s ease;
}

@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr 1fr; }
  .card-saldo { grid-column: auto; }
}

/* ---------- Brindisi dei traguardi (festa allo sblocco) ---------- */
.brindisi {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 28px calc(28px + var(--safe-right, 0px)) 28px calc(28px + var(--safe-left, 0px));
  text-align: center; cursor: pointer;
  background:
    radial-gradient(circle at 50% 38%, rgba(231,192,77,.18), rgba(231,192,77,0) 48%),
    rgba(9,12,20,.95);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: briIn .26s ease both;
}
.brindisi.closing { animation: briOut .26s ease both; }
.brindisi-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.brindisi-stage { position: relative; z-index: 2; max-width: 360px; animation: briPop .5s cubic-bezier(.18,.9,.3,1.2) both; }
.brindisi-kicker { font-size: 1.9rem; line-height: 1; margin-bottom: 6px; animation: briKick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.brindisi-medal {
  width: 148px; height: 148px; margin: 4px auto 18px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(231,192,77,.34), rgba(231,192,77,.06) 70%);
  border: 2px solid var(--gold-soft);
  box-shadow: 0 0 0 6px rgba(231,192,77,.08), 0 14px 40px rgba(0,0,0,.5);
  animation: briGlow 2s ease-in-out infinite;
}
.brindisi-emoji { font-size: 4.6rem; line-height: 1; display: inline-block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); animation: briMedal .7s cubic-bezier(.18,.9,.3,1.4) both; }
.brindisi-name { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--gold); line-height: 1.18; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(231,192,77,.25); }
.brindisi-desc { font-size: 1rem; color: var(--text-soft); line-height: 1.45; }
@keyframes briIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes briOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes briPop { 0% { opacity: 0; transform: scale(.7) translateY(10px); } 60% { opacity: 1; transform: scale(1.04) translateY(0); } 100% { transform: scale(1) translateY(0); } }
@keyframes briMedal { 0% { transform: scale(0) rotate(-22deg); } 65% { transform: scale(1.22) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes briGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(231,192,77,.06), 0 14px 40px rgba(0,0,0,.5); }
  50% { box-shadow: 0 0 0 12px rgba(231,192,77,.14), 0 14px 50px rgba(231,192,77,.18); }
}
@keyframes briKick { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .brindisi, .brindisi.closing { animation: briIn .2s ease both; }
  .brindisi-stage { animation: briIn .25s ease both; }
  .brindisi-kicker, .brindisi-medal, .brindisi-emoji { animation: none; }
}

/* ---------- Schermata di accesso ---------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px calc(24px) calc(24px + var(--safe-bottom));
  padding-top: calc(24px + var(--safe-top));
  overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px 22px;
  text-align: center;
}
.auth-logo {
  width: 64px; height: 64px; margin: 0 auto 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff; font-size: 2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.auth-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: .5px; margin-bottom: 18px; }
.auth-loading { color: var(--text-soft); padding: 16px; font-size: .95rem; }
.auth-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.auth-sub { font-size: .88rem; color: var(--text-soft); margin: 0 0 20px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.auth-form input {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1rem;
}
.auth-error {
  margin: 2px 0 0; font-size: .85rem; color: var(--uscita-text);
  background: var(--uscita-soft); padding: 8px 10px; border-radius: 8px;
}
.auth-submit {
  margin-top: 4px; border: none; border-radius: 12px;
  background: var(--primary); color: #fff;
  padding: 14px; font-size: 1rem; font-weight: 700;
}
.auth-submit:disabled { opacity: .6; }
.auth-link { color: var(--primary); text-decoration: none; font-size: .9rem; }
#auth-forgot { display: inline-block; margin-top: 14px; }
.auth-switch { margin-top: 16px; font-size: .9rem; color: var(--text-soft); }
/* (A5) La riga gentile: stesso posto dell'errore, tono opposto — nessun rosso, nessun
   rimprovero. Chi ha dimenticato la password tocca il link d'istinto, senza aver scritto
   nulla: quella non è una sua distrazione, è la normalità. */
.auth-note {
  margin: 10px 0 0; font-size: .85rem; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 8px 10px; border-radius: 8px; text-align: start;
}

/* ---------- (A1) Chiudere l'account: il riquadro e la conferma in due tempi ---------- */
.acct-danger { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.acct-danger .ls-title { display: block; margin-bottom: 6px; }
.acct-danger .hint { margin-bottom: 14px; }
/* Fondo vuoto e bordo rosso: dice «attenzione» senza gridare, e non si confonde
   con i bottoni di servizio grigi che gli stanno intorno. */
.btn-danger-outline {
  width: 100%; padding: 13px; border-radius: 12px; font-size: .95rem; font-weight: 600;
  background: transparent; color: var(--uscita); border: 1px solid var(--uscita);
  font-family: inherit;
}
/* Pieno: solo dentro la finestra della conferma, dove il gesto è già stato scelto. */
.btn-danger {
  width: 100%; padding: 14px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: var(--uscita); color: #fff; border: none; font-family: inherit;
}
.btn-danger:disabled { opacity: .6; }
.sheet-spacer { width: 52px; }
.del-list { list-style: none; margin: 0; padding: 0; }
.del-list li {
  position: relative; padding-inline-start: 22px; margin: 0 0 10px;
  font-size: .92rem; line-height: 1.5;
}
.del-list li::before { content: "—"; position: absolute; inset-inline-start: 0; top: 0; color: var(--text-soft); }
/* L'unica riga che rassicura invece di avvertire porta il fleuron della casa: è la cosa
   che più preoccuperebbe chi divide una contabilità con qualcuno. */
.del-list li.keeps::before { content: "❦"; color: var(--gold); font-size: .8rem; top: 1px; }
.del-warning {
  margin: 4px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--uscita-soft); color: var(--uscita-text);
  font-size: .88rem; line-height: 1.5;
}
/* La riga «ci vorrà qualche istante» compare solo mentre si sta cancellando */
.del-working { text-align: center; margin: 14px 0 0; visibility: hidden; }
.del-working.on { visibility: visible; }

/* Il congedo. Non un avvisino che scappa via dopo tre secondi: una carta ferma, che se ne
   va quando l'ha letta chi doveva leggerla. È l'ultima cosa che l'app dice a una persona. */
.farewell {
  /* Sopra ogni cosa che potrebbe essere ancora in piedi in quel momento — compreso il
     lucchetto (3000), che dopo la chiusura dell'account non deve poter coprire il congedo. */
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
}
.farewell-card {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--surface); border-radius: 20px;
  box-shadow: var(--shadow); padding: 30px 24px 24px;
}
.farewell-fleuron { color: var(--gold); font-size: 1.5rem; margin-bottom: 14px; }
.farewell-text {
  margin: 0 0 22px; font-size: .95rem; line-height: 1.65; color: var(--text);
  font-family: var(--serif);
}
.farewell-card .auth-submit { width: 100%; }

/* ---------- (A3) La pagina del ripristino — password.html ---------- */
/* Il campo dell'email in sola lettura. Non si può togliere né nascondere: è l'unico modo
   perché il portachiavi capisca a quale account appartiene la password nuova. Quindi lo si
   veste da etichetta — spento, non toccabile, ma presente e leggibile. */
.pw-fixed {
  background: var(--surface-2) !important; color: var(--text-soft) !important;
  cursor: default;
}
.pw-fixed:focus { outline: none; border-color: var(--border) !important; }
/* Un collegamento vestito da bottone (il «Entra in Cioffi Count» di fine corsa) */
.pw-as-btn {
  display: block; margin-top: 18px; text-decoration: none; text-align: center;
}
.pw-back { display: inline-block; margin-top: 16px; }

/* ============================================================
   TEMA PREMIUM "NOTTE & ORO"
   ============================================================ */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ===== TEMA CHIARO "PERGAMENA" (avorio caldo + inchiostro sepia + oro profondo) ===== */
html[data-theme="light"] {
  --bg: #EFE6D2;
  --surface: #FAF4E6;
  --surface-2: #FFFDF6;
  --text: #2B2316;
  --text-soft: #756A52;
  --border: #DED1B2;
  --primary: #9A6E12;
  --primary-soft: rgba(154,110,18,.12);
  --entrata: #2F8B5A;
  --entrata-soft: rgba(47,139,90,.14);
  --uscita: #C0392B;
  --uscita-soft: rgba(192,57,43,.10);
  --uscita-text: #A52A1C;
  --warn: #B07A12;
  --warn-soft: rgba(176,122,18,.16);
  --shared: #2C7C8F;
  --shared-soft: rgba(44,124,143,.12);
  --gold: #9A6E12;
  --gold-soft: rgba(154,110,18,.40);
  --shadow: 0 6px 18px rgba(120,95,40,.16);
}
/* Sfondi e barre "scuri a mano" → versione chiara (le altre tinte vivono nelle variabili sopra) */
html[data-theme="light"] body {
  background:
    radial-gradient(120% 60% at 50% -10%, #FBF6E8 0%, rgba(239,230,210,0) 60%),
    var(--bg);
}
html[data-theme="light"] .appbar,
html[data-theme="light"] .book-switch { background: #F4EAD2; }
html[data-theme="light"] .splash {
  background: radial-gradient(120% 70% at 50% 38%, #FBF6E8 0%, rgba(239,230,210,0) 62%), var(--bg);
}
html[data-theme="light"] .onboarding {
  background: radial-gradient(circle at 50% 28%, #FBF6E8, #EFE6D2 70%);
}
/* Card del saldo (la "hero"): da notte a pergamena calda */
html[data-theme="light"] .card-saldo {
  background: linear-gradient(160deg, #FBF3DD 0%, #F1E4C0 100%);
}
/* Toast: pillola inchiostro-sepia su pergamena (al posto del navy) */
html[data-theme="light"] .toast { background: #2B2316; color: #F4ECD6; }
/* Marchio "Cioffi Count": in oro CHIARO (gradiente) sparisce sul fondo pergamena → oro SCURO
   leggibile (splash d'avvio + titolo in alto in Riepilogo/Movimenti/Impostazioni + schermata
   d'accesso — .auth-brand era rimasta fuori dal giro, registro tema chiaro v260). Niente alone. */
html[data-theme="light"] .appbar-title,
html[data-theme="light"] .splash-brand,
html[data-theme="light"] .auth-brand {
  background: linear-gradient(135deg, #A87A18 0%, #8A6310 52%, #5E430A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
}
/* La linguetta «La storia»: l'oro-antico inciso (#CDB06A) è distinzione voluta nella notte,
   ma sulla barra crema annegava (contrasto ~1,6:1) → sul chiaro veste l'oro profondo del tema. */
html[data-theme="light"] .tab-story { color: var(--gold); }
/* Il gemello del Condividi d'oro (Impostazioni, v256): stessa cura della pillola della Storia —
   sfumatura dal miele e filetto, o l'estremità si confonde con la pergamena. */
html[data-theme="light"] .btn-gold-app {
  background: linear-gradient(135deg, #F2CF6B 0%, #DFAE3C 50%, #A8781A 100%);
  border: 1px solid rgba(138,99,16,.35);
}
/* (v261, rilievo di Claudio) La stellina ⭐ della casa madre: l'emoji ha la sfumatura con
   punte CHIARE che sulla pillola crema svaniscono → un'ombretta oro-scuro ne ridisegna il
   contorno (drop-shadow segue la sagoma; sulle icone già scure 👤👥 è impercettibile). */
html[data-theme="light"] .bs-btn .bs-ico { filter: drop-shadow(0 0 1px rgba(94,67,10,.55)); }
/* (v261, rilievo di Claudio) «Cioffi ti dice…»: il velo d'oro era ALPHA pensato per la notte —
   sulla pergamena non contrastava per niente → velo e filetto in oro profondo, stessa idea
   rifatta in tinta pergamena. */
html[data-theme="light"] .insight {
  background: rgba(154,110,18,.10);
  border-color: rgba(154,110,18,.32);
}
/* (v262, rilievo di Claudio) Le pillole turchesi PIENE delle Impostazioni: sul chiaro il
   turchese di servizio (#2C7C8F, nato per i TESTI piccoli) le rendeva cupe → da piene
   vestono il turchese della notte (#4FB3C9), più chiaro e fresco; l'inchiostro scuro
   #06222A ci legge benissimo. I testi e i bordi turchesi restano su var(--shared). */
html[data-theme="light"] .btn-shared.solid {
  background: #4FB3C9;
  border-color: #4FB3C9;
  color: #06222A; /* (v283) l'inchiostro scuro, ora che la base è a testo chiaro */
}
body {
  font-family: var(--sans);
  background:
    radial-gradient(120% 60% at 50% -10%, #131C2C 0%, rgba(11,15,23,0) 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Barra superiore: scura, filetto oro, marchio serif dorato */
.appbar { background: #0C111B; border-bottom: 1px solid var(--gold-soft); box-shadow: none; }
.appbar-title {
  font-family: var(--serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; padding-left: .16em; font-size: 1.1rem;
  background: linear-gradient(135deg,#FFF1BE 0%,#F0C95A 48%,#C79A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.icon-btn { background: rgba(231,192,77,.12); color: var(--gold); }
.icon-btn:active { background: rgba(231,192,77,.26); }
.month-label { color: var(--text); }

/* Card e pannelli */
.card, .panel, .movement {
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.card-value, .mv-amount { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.card-label, .field-label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

/* Saldo protagonista */
.card-saldo {
  border: 1px solid var(--gold-soft);
  background: linear-gradient(160deg,#1A2230 0%,#121826 100%);
  text-align: center;
}
.card-saldo .card-value { font-size: 2rem; }

/* Titoli di sezione: maiuscoletto con trattino dorato */
.panel-title {
  text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 600;
  color: var(--gold); display: flex; align-items: center; gap: 8px;
}
.panel-title::before { content: ""; width: 14px; height: 2px; background: var(--gold); display: inline-block; }

/* Pulsanti oro */
.btn-small, .auth-submit, .fab {
  background: linear-gradient(135deg,#FFF1BE 0%,#F0C95A 52%,#C99B28 100%);
  color: #241A05;
}
.btn-small { font-weight: 600; }
.auth-submit { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.fab { color: #241A05; box-shadow: 0 8px 22px rgba(231,192,77,.35); }
.link-btn { color: var(--gold); }

/* Icona movimento = categoria, a linea dorata */
.mv-icon, .mv-icon.in, .mv-icon.out {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--gold);
}
.mv-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Tab attivo dorato */
.tab.active { color: var(--gold); }
/* La linguetta «La storia» (cantiere 1, v247): il santuario della leggenda, staccata
   dalle stanze di lavoro da un separatore; in tinta oro-antica anche quando è a riposo. */
.tab-story { color: #CDB06A; border-right: 1px solid var(--border); flex: 0 0 72px; }
/* Nelle lingue da destra a sinistra la Storia resta la PRIMA linguetta (che lì è a destra):
   il separatore passa sul lato sinistro. */
[dir="rtl"] .tab-story { border-right: none; border-left: 1px solid var(--border); }
.tab-story.active { color: var(--gold); }
/* Con cinque linguette le etichette lunghe non devono andare a capo né spingere le sorelle. */
.tab { min-width: 0; }
.tab .tab-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (v263, rilievo di Claudio: «non si capisce in quale menù si è») La voce attiva non si
   affida più al SOLO colore del testo — troppo timido in entrambi i temi, e nel chiaro
   «La storia» è oro comunque. La stanza in cui sei veste la PILLOLINA di casa: velo e
   anellino d'oro, la stessa lingua delle pillole dei libri. È un ::before assoluto:
   la geometria della barra non cambia di un pixel (niente etichette che si spingono). */
.tab { position: relative; z-index: 0; }
.tab::before { content: ""; position: absolute; inset: 4px 4px 6px; border-radius: 12px; z-index: -1; }
.tab.active::before { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--gold-soft); }

/* Schermata di accesso: stemma a "stanghette" */
.auth-logo {
  width: 76px; height: 76px; border-radius: 50%;
  background: transparent; border: 1.6px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(231,192,77,.06), 0 6px 18px rgba(0,0,0,.4);
}
.auth-brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem; text-align: center; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .34em; padding-left: .34em;
  background: linear-gradient(135deg,#FFF1BE 0%,#F0C95A 48%,#C79A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(231,192,77,.35));
}
.auth-title { font-family: var(--serif); }
.tally { position: relative; width: 32px; height: 26px; }
.tally i { position: absolute; top: 0; width: 2px; height: 100%; background: var(--gold); border-radius: 1px; }
.tally i:nth-child(1) { left: 3px; } .tally i:nth-child(2) { left: 11px; }
.tally i:nth-child(3) { left: 19px; } .tally i:nth-child(4) { left: 27px; }
.tally .slash { position: absolute; top: 12px; left: -2px; width: 38px; height: 2px; background: var(--gold); border-radius: 1px; transform: rotate(-20deg); }

/* Pulsante "termina" ricorrenza */
.rec-del { border: none; background: none; color: var(--text-soft); font-size: 1.05rem; line-height: 1; padding: 0 2px; cursor: pointer; }
.rec-del:active { color: var(--uscita); }

/* ============================================================
   RICONCILIAZIONE — badge di stato, filtro, swipe
   ============================================================ */

/* Evita che il gesto orizzontale del trackpad faccia "indietro/avanti" nel browser */
html, body { overscroll-behavior-x: none; }

.mv-cat { display: flex; align-items: center; }

/* Filtro a segmenti (ambito ricerca: Sempre · Quest'anno · Questo mese) */
.seg { display: flex; gap: 6px; margin-top: 10px; }
.seg-btn {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft);
  border-radius: 10px; padding: 9px 6px;
  font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
}
.seg-btn.active { border-color: var(--gold-soft); color: var(--gold); background: var(--primary-soft); }

/* Riga con swipe: la card scorre, le azioni stanno dietro ai due lati */
.mv-swipe {
  position: relative; overflow: hidden;
  border-radius: 14px; margin-bottom: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.mv-swipe .movement {
  position: relative; z-index: 1;
  margin-bottom: 0; box-shadow: none;
  background: var(--surface);
  touch-action: pan-y;        /* lo scroll verticale resta al browser; l'orizzontale lo gestiamo noi */
  will-change: transform;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.mv-actions {
  position: absolute; top: 0; bottom: 0; z-index: 0;
  display: flex; align-items: stretch;
}
.mv-actions.right { right: 0; }
.mv-act {
  border: none; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 86px; padding: 0 12px;
  font-size: .74rem; font-weight: 700;
}
.mv-act.rosso { background: var(--uscita); min-width: 96px; }
.mv-act:active { filter: brightness(.92); }

/* ============================================================
   BUDGET — pulsante nei chip + pannello "Budget del mese"
   ============================================================ */

/* Pulsante budget dentro il chip di una categoria di uscita */
.chip-budget {
  border: 1px dashed var(--border); background: transparent; color: var(--text-soft);
  border-radius: 999px; padding: 2px 9px;
  font-size: .8rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
.chip-budget.has {
  border: 1px solid transparent;
  background: rgba(231,192,77,.18); color: var(--gold);
}
.chip-budget:active { filter: brightness(.92); }
.chip-remove {
  border: none; background: none; color: var(--text-soft);
  font-size: 1rem; line-height: 1; cursor: pointer;
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.rec-del { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* Pannello "Budget del mese" nel Riepilogo */
.budget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.budget-row { display: flex; flex-direction: column; gap: 6px; }
.b-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; }
.b-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-amt { color: var(--text-soft); font-family: var(--sans); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.b-amt em { font-style: normal; color: var(--text-soft); margin-inline-start: 4px; }
.b-bar { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.b-fill { height: 100%; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.b-fill.ok { background: var(--entrata); }
.b-fill.warn { background: var(--warn); }
.b-fill.over { background: var(--uscita); }

/* ============================================================
   RIEPILOGO ANNUALE — toggle Mese/Anno + 2 grafici a barre + tabella
   ============================================================ */

/* Il toggle riusa .seg / .seg-btn del filtro Movimenti, qui solo distanziato */
#stats-mode { margin-bottom: 12px; } /* (c2: #view-mode ora vive nella riga-insegna della Home — la spazia .home-sec-row;
   il margine per-ID avrebbe vinto sulla riga e disallineato l'interruttore) */

/* ===== Statistiche 2.0 — S1 (v253): il quadro e le due porte ===== */
/* Le carte del quadro EREDITANO la geometria delle carte della Home (field-test di Claudio,
   16/7: «troppo piccole, le voglio più visibili»): Entrate+Uscite affiancate, SALDO grande
   a tutta larghezza; a 600px si passa a tre colonne, come in Home. */
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.st-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.st-card.s { grid-column: 1 / -1; }
/* Corpi ALZATI due volte su field-test di Claudio (16/7): le carte superano di proposito
   quelle della Home — qui i confronti si devono LEGGERE, non intuire. */
.st-lbl { font-size: .9rem; color: var(--text-soft); margin-bottom: 5px; }
.st-val { font-weight: 700; font-size: 1.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-card.e .st-val { color: var(--entrata); }
.st-card.u .st-val { color: var(--uscita); }
.st-card.s .st-val { color: var(--gold); font-size: 1.9rem; }
@media (min-width: 600px) {
  .st-cards { grid-template-columns: 1fr 1fr 1fr; }
  .st-card.s { grid-column: auto; }
}
/* I confronti ▲▼: il colore segue il BENEFICIO (uscite in calo = verde), non la freccia. */
.delta { display: block; font-size: .86rem; margin-top: 8px; color: var(--text-soft); line-height: 1.55; }
.delta .up { color: var(--entrata); font-weight: 600; }
.delta .down { color: var(--uscita-text); font-weight: 600; }
.delta .dmute { color: var(--text-soft); }
#stats-save { padding: 12px 14px; }
.st-save-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .92rem; }
.st-save-head strong { color: var(--gold); font-size: 1.12rem; }
.savebar { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 8px 0 6px; }
.savebar i { display: block; height: 100%; background: linear-gradient(90deg, #C79A2A, var(--gold)); border-radius: 99px; }
.st-plain { color: var(--text-soft); font-size: .84rem; display: block; }
.st-pct { color: var(--gold); font-size: 1.05rem; }
/* La quota «già decisa in partenza»: barra impilata oro/spento.
   «st-stack», NON «stack»: il nome nudo collideva con la finestrella «mini-actions stack»
   della riclassifica v244, schiacciandole i bottoni a 14px (rilievo ALTO revisione S1). */
.st-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 9px 0 7px; }
.st-stack .a { background: linear-gradient(90deg, #C79A2A, var(--gold)); }
.st-stack .b { flex: 1; background: var(--surface-2); }
/* ===== Statistiche 2.0 — S2 (v257): l'Esploratore =====
   Corpi GENEROSI (≥ .85rem): lezione del quadro — le scritte si leggono, non si intuiscono. */
.ex-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ex-ctl { flex: 1 1 140px; min-width: 130px; display: flex; flex-direction: column; gap: 4px; }
.ex-lbl { font-size: .85rem; color: var(--text-soft); }
.ex-ctl select { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: .95rem; }
.ex-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 8px 2px; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; text-align: start; }
.ex-row:active { filter: brightness(1.1); }
.ex-name { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-bar { flex: 1; height: 16px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.ex-bar > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #C79A2A, var(--gold)); }
.ex-val { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-total { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; }
.ex-hint { color: var(--text-soft); font-size: .85rem; margin: 8px 0 0; }
.ex-empty { color: var(--text-soft); font-size: .95rem; padding: 8px 2px; }
/* La finestrella del gruppo: righe-movimento vere, lista scorrevole.
   (v258, field-test di Claudio: «troppo corta, scritte quasi sempre mozzate») GRANDE —
   quasi tutto schermo — e dentro le scritte vanno A CAPO, non si mozzano.
   «.mini-card.explore-card», non «.explore-card»: la base .mini-card (max 340px, riga ~1729)
   vive più in basso nel foglio e vincerebbe per ordine — la specificità composta no. */
.mini-card.explore-card { max-width: min(92vw, 560px); width: 92vw; }
.explore-card .movement-list { max-height: 62vh; overflow-y: auto; margin: 10px 0 0; }
.explore-card .mv-cat, .explore-card .mv-sub { white-space: normal; overflow: visible; text-overflow: clip; }
/* La legenda della torta ora si tocca */
#chart-legend li { cursor: pointer; }
#chart-legend li:active { filter: brightness(1.15); }

/* La festa, in fondo: abito tratteggiato oro per racconti e traguardi.
   var(--gold), non #CDB06A fisso: nel TEMA CHIARO l'oro cambia e il fisso non passava
   il contrasto (rilievo revisione S1). */
/* (v280) .btn-secondary.festa PENSIONATA: le pilloline tratteggiate sono diventate card-vetrina. */

/* ===== (v280) LE CARD DELLA FESTA: il racconto in anteprima e la sala dei trofei ===== */
.festa-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin: 0 0 12px; cursor: pointer;
}
.festa-card:active { border-color: var(--gold-soft); }
.fc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fc-title { font-size: .95rem; font-weight: 700; }
.fc-cta { color: var(--gold); font-size: .88rem; font-weight: 700; white-space: nowrap; }
.fc-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-stats.hidden { display: none; }
.fc-stat {
  flex: 1 1 30%; min-width: 105px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px;
}
.fc-stat .e { font-size: 1rem; }
.fc-stat .v { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-stat .v.in { color: var(--entrata); }
.fc-stat .l { font-size: .72rem; color: var(--text-soft); margin-top: 1px; }
.medals { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.medal {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: var(--primary-soft); border: 1px solid var(--gold-soft);
}
.medal.off { filter: grayscale(1); opacity: .32; border-style: dashed; }
.fc-sub { font-size: .82rem; color: var(--text-soft); }

/* ===== Cantiere 3 (v250): rifiniture ===== */
/* In Impostazioni il mese non governa nulla: via le frecce (resta il marchio). */
.appbar.no-month .month-nav { display: none; }
/* La porta degli estratti conto nei Movimenti (v251: pannello vestito, come stava in
   Impostazioni — titolo oro, spiegazione, bottone comodo a tutta larghezza). */
.stmt-entry .data-actions .btn-secondary { width: 100%; }

/* ===== Cantiere 2 (v249): le insegne della Home, i patti e «Oggi» ===== */
/* Insegna di sezione: stessa voce dei titoli-card (oro, maiuscolo, trattino), ma fuori dai pannelli. */
.home-sec {
  text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 600;
  color: var(--gold); display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px;
}
.home-sec::before { content: ""; width: 14px; height: 2px; background: var(--gold); display: inline-block; }
/* Riga insegna + interruttore Mese/Anno affiancati */
.home-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.home-sec-row .home-sec { margin: 0; }
.home-sec-row .seg { margin: 0; }
/* Card-invito («Scrivi il tuo primo proposito»): il pannello si veste da fantasma tratteggiato. */
.panel.is-ghost { background: transparent; border: 1.5px dashed var(--gold-soft); box-shadow: none; }
.pact-ghost {
  width: 100%; text-align: center; padding: 8px 6px; background: none; border: none;
  color: var(--gold); font: inherit; font-size: .95rem; cursor: pointer;
}
.pact-ghost:active { filter: brightness(1.2); }
.pact-ghost-soft { font-size: .9rem; opacity: .8; }
/* Budget in forma compatta (la card è tutta un bottone che apre la finestra) */
.be-open { display: block; width: 100%; text-align: start; background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } /* start, non left: in RTL (ar/fa) la riga del budget si àncora al lato giusto (rilievo c2) */
.be-head { display: flex; align-items: center; justify-content: space-between; }
.be-head .panel-title { margin: 0; }
.be-line { display: block; margin: 8px 0 0; font-size: .9rem; color: var(--text-soft); }
.be-worst { display: block; margin-top: 10px; }
/* Finestra dei budget: la lista scorre se le barre sono tante */
.budget-card { max-width: 380px; }
.budget-card .budget-list { max-height: 56vh; overflow-y: auto; margin: 10px 0 0; padding: 0; list-style: none; }
/* Riga viva di «Oggi» (variabili da inserire) */
.viva-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: none; padding: 2px; color: inherit; font: inherit; font-size: .92rem; cursor: pointer;
}

/* Contenitore base dei due grafici annuali: 12 colonne uguali su tutta la larghezza */
.months-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 160px;
  padding-top: 6px;
}

/* --- Grafico saldo (signed): metà superiore positivo verde, metà inferiore negativo rosso --- */
.months-chart.saldo .s-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.s-top, .s-bot {
  flex: 1 1 0;
  display: flex;
  padding: 0 12%;
  position: relative;
}
.s-top { align-items: flex-end; }
.s-bot { align-items: flex-start; border-top: 1px solid rgba(243,239,230,.10); }
.s-bar {
  width: 100%;
  border-radius: 3px;
  min-height: 0;
}
.s-bar.pos { background: var(--entrata); }
.s-bar.neg { background: var(--uscita); }
.s-lbl {
  text-align: center;
  font-size: .68rem;
  color: var(--text-soft);
  line-height: 16px;
  padding-top: 4px;
}

/* --- Grafico entrate/uscite affiancate per mese --- */
.months-chart.bars .b-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.b-bars {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 8%;
}
.b-bar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 3px 3px 0 0;
  min-height: 0;
}
.b-bar.in { background: var(--entrata); }
.b-bar.out { background: var(--uscita); }

/* --- Tabella mese per mese --- */
.year-table { list-style: none; margin: 0; padding: 0; }
.year-table li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  align-items: baseline;
}
.year-table li:last-child { border-bottom: none; }
.yt-month { font-weight: 600; text-transform: capitalize; }
.yt-in, .yt-out, .yt-saldo {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.yt-in { color: var(--entrata); }
.yt-out { color: var(--uscita-text); }
.yt-saldo.pos { color: var(--text); font-weight: 700; }
.yt-saldo.neg { color: var(--uscita-text); font-weight: 700; }

/* Su schermi stretti rendiamo i numeri leggermente più piccoli per evitare wrap */
@media (max-width: 380px) {
  .year-table li { font-size: .82rem; gap: 6px; }
}

/* ============================================================
   BLOCCO APP — toggle nei settings + schermata di sblocco
   ============================================================ */

/* --- Setting nel pannello Account --- */
/* (tappa 4) la tendina degli anticipi nel riquadro Promemoria: piccola, in riga col testo */
.prom-select { font: inherit; font-size: .85rem; color: var(--text); background: var(--primary-soft); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; }
.lock-setting {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.ls-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ls-title { font-weight: 600; font-size: .95rem; color: var(--text); }
.ls-hint { margin-top: 8px; }
.lock-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.lock-actions .btn-secondary { padding: 10px 12px; font-size: .85rem; }

/* Interruttore acceso/spento, coerente col tema oro */
.switch {
  position: relative;
  width: 50px; height: 28px;
  border: none; border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background .2s ease;
  padding: 0;
  flex: 0 0 auto;
}
.switch-thumb {
  position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-soft);
  transition: inset-inline-start .2s ease, background .2s ease;
}
.switch[aria-checked="true"] {
  background: linear-gradient(135deg,#FFF1BE 0%,#F0C95A 52%,#C99B28 100%);
}
.switch[aria-checked="true"] .switch-thumb {
  inset-inline-start: 25px;
  background: #241A05;
}

/* --- Schermata di sblocco --- */
/* riusa la stragrande maggioranza di .auth-screen/.auth-card, qui solo i pezzi nuovi */
.lock-card { max-width: 320px; }
.lock-title { font-family: var(--serif); }

.lock-bio-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%; margin: 18px 0 4px;
  padding: 14px;
  border: 1px solid var(--gold-soft);
  background: var(--primary-soft);
  color: var(--gold);
  border-radius: 12px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.lock-bio-btn:active { filter: brightness(.92); }
.lock-bio-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  font-size: .85rem;
}

.lock-pin-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lock-pin-input {
  width: 100%; padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text);
  text-align: center;
  font-size: 1.6rem; letter-spacing: .35em;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
}
.lock-pin-input::placeholder { color: var(--text-soft); letter-spacing: .35em; }
.lock-exit { display: inline-block; margin-top: 18px; }

/* ============================================================
   CONTABILITÀ CONDIVISA — interruttore libro, fascia, pannello
   ============================================================ */

/* Interruttore "I miei conti / Contabilità condivisa" sotto l'appbar */
.book-switch {
  display: flex; flex-direction: column; gap: 16px;   /* aria TRA i due gruppi */
  max-width: 720px; margin: 0 auto;                   /* allineato al contenuto */
  padding: 32px 16px 12px;                            /* aria SOPRA (staccato dalla linea d'oro) */
}
.book-switch::-webkit-scrollbar { display: none; }
.bs-btn {
  flex: 0 0 auto; max-width: 48vw;  /* pill a larghezza contenuto: scorrono, non si schiacciano */
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft);
  border-radius: 10px; padding: 8px 12px;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-btn.active {
  border-color: var(--gold-soft); color: var(--gold); background: var(--primary-soft);
}
.bs-btn.kind-shared.active {
  border-color: var(--shared); color: var(--shared); background: var(--shared-soft);
}
/* «＋» per una contabilità NORMALE: oro, come le normali (che da attive sono oro). */
.bs-btn.bs-add {
  color: var(--gold); border-color: var(--gold-soft); border-style: dashed;
  font-weight: 800; font-size: 1.05rem; line-height: 1; padding: 8px 14px;
}
.bs-btn.bs-add:active { background: var(--primary-soft); }
/* «＋👥» per una contabilità CONDIVISA: teal, come la condivisa, con l'iconcina persone. */
.bs-btn.bs-add-shared {
  color: var(--shared); border-color: var(--shared-soft);
  display: inline-flex; align-items: center; gap: 3px; font-size: .95rem; padding: 8px 12px;
}
.bs-btn.bs-add-shared:active { background: var(--shared-soft); }
.bs-shared-ico { font-size: .85em; line-height: 1; }
/* Separatore sottile tra il gruppo delle normali e quello delle condivise. */
.bs-sep { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 3px 5px; background: var(--border); }
/* Selettore in DUE GRUPPI etichettati: personali (⭐/👤) e condivise (👥). Ognuno con
   il suo titolo, la sua lineetta e le sue pill che vanno a capo per conto proprio. */
.bs-group { display: flex; flex-direction: column; gap: 7px; }
.bs-grouplbl {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--gold);
}
.bs-grouplbl.is-shared { color: var(--shared); }
.bs-grouptxt { white-space: nowrap; }
.bs-groupline { flex: 1 1 auto; height: 1px; min-width: 8px; background: var(--border); }
.bs-grouplbl.is-shared .bs-groupline { background: var(--shared-soft); }
.bs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bs-ico { font-size: .95em; }
/* Matitina su OGNI pillola: apre il menù di gestione di quella contabilità.
   Discreta sulle pillole spente, un filo più presente su quella attiva. */
.bs-edit { font-size: .78em; opacity: .55; margin-left: 2px; }
.bs-btn.active .bs-edit { opacity: .85; }

/* Fascia ben visibile in modalità condivisa */
.shared-banner {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 8px 16px;
  background: var(--shared-soft);
  border-bottom: 1px solid var(--shared);
  color: var(--shared);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.shared-banner .sb-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--shared); flex: 0 0 auto;
}

/* In modalità condivisa, un filo teal sull'appbar per non sbagliarsi mai */
body.shared-mode .appbar { border-bottom-color: var(--shared); }

/* Pannello "Le mie contabilità" (elenco con rinomina/elimina) */
.books-intro { font-size: .88rem; color: var(--text-soft); margin: 0 0 14px; }
#books-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.book-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.book-row.active { border-color: var(--gold-soft); background: var(--primary-soft); }
.book-row.kind-shared.active { border-color: var(--shared); background: var(--shared-soft); }
.book-row-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; text-align: left;
  color: var(--text); font: inherit; cursor: pointer;
}
.book-row-ico { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.book-row-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; font-size: .95rem;
}
.book-row.active .book-row-name { color: var(--gold); }
.book-row.kind-shared.active .book-row-name { color: var(--shared); }
.book-row-badge {
  flex: 0 0 auto; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold); opacity: .85;
}
.book-row.kind-shared.active .book-row-badge { color: var(--shared); }
.book-row-act {
  flex: 0 0 auto;
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--text-soft); font-size: 1rem; line-height: 1;
  border-radius: 8px;
}
.book-row-act:active { background: var(--primary-soft); }
#books-add { width: 100%; }
#books-add:disabled { opacity: .5; }

/* Card «Patrimonio» in cima al Riepilogo: fotografia «quanto valgo» (liquidità + investimenti),
   in oro/serif e staccata dal saldo del mese per non confondere stato e flussi. */
.wealth-wrap { margin: 0 0 12px; }
.wealth-card {
  padding: 14px 16px;
  border: 1px solid var(--gold-soft); border-radius: 16px;
  background: var(--primary-soft);
}
.wealth-head { display: flex; align-items: center; gap: 10px; }
.wealth-ic { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; }
.wealth-t {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); opacity: .9;
}
.wealth-total {
  /* Inter (v248): scelto da Claudio per la leggibilità estrema — pensionato il Georgia «cicciotto».
     Peso 600 (il 700 di Inter non è caricato); cifre tabellari così il totale non balla
     quando i prezzi vivi lo aggiornano da soli. */
  font-family: var(--sans);
  font-size: 1.7rem; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15; color: var(--gold);
  margin: 6px 0 2px;
}
/* Le due voci cliccabili (Liquidità / Investimenti) dentro il blocco Patrimonio. */
.wealth-rows { margin-top: 8px; border-top: 1px solid var(--gold-soft); }
/* Riga = [spunta] + [resto cliccabile]. La spunta include/esclude la voce dal totale (scorporo
   simmetrico); il resto della riga continua ad aprire il dettaglio. */
.wealth-row {
  display: flex; align-items: center; gap: 2px; width: 100%;
  border-bottom: 1px solid var(--gold-soft);
}
.wealth-row:last-child { border-bottom: none; }
/* Spunta: bersaglio AMPIO (tutta l'altezza della riga: niente zone morte, niente tap che finiscono per
   sbaglio sul dettaglio) con dentro il quadratino visibile. Da SPENTA la casella resta ben visibile,
   altrimenti non si scopre che la si può riaccendere. Rilievi revisione. */
.wealth-chk {
  flex: 0 0 auto; width: 38px; align-self: stretch; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
}
.wealth-chk > span {
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold); border-radius: 6px; color: var(--gold);
  font-size: .78rem; line-height: 1;
}
.wealth-chk:active > span { filter: brightness(1.25); }
.wealth-chk:focus-visible { outline: none; }
.wealth-chk:focus-visible > span { box-shadow: 0 0 0 3px var(--gold-soft); }
.wealth-row.is-off .wealth-chk > span { border-color: var(--text-soft); }
.wealth-row-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; background: transparent; border: none;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.wealth-row-main:active { filter: brightness(1.06); }
.wealth-row.is-off .wealth-row-main { opacity: .42; }
/* Cosa sta sommando il totale (compare solo quando qualche voce è esclusa). */
.wealth-summing { font-size: .74rem; color: var(--text-soft); margin: 1px 0 2px; }
.wealth-row-l { flex: 0 0 auto; font-size: .95rem; }
.wealth-row-v {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; font-size: .95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wealth-row-v.is-add { font-weight: 500; color: var(--text-soft); }
.wealth-row-arrow { flex: 0 0 auto; color: var(--gold); opacity: .55; font-size: 1.1rem; }
.wealth-empty { font-size: .85rem; color: var(--text-soft); }

/* Bollino "stima" accanto alla voce Immobili nel Patrimonio (valore soggettivo, non un dato). */
.wealth-estimate {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-soft); vertical-align: middle;
}
/* Finestra «Immobili»: card con la lista + aggiungi/modifica/elimina. */
.re-card { max-width: 380px; }
.re-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; max-height: 46vh; overflow-y: auto; }
.re-empty { font-size: .88rem; color: var(--text-soft); text-align: center; padding: 16px 4px; margin: 0; }
.re-item {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,.14);
}
.re-item-main {
  flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
  background: transparent; border: none; color: inherit; font: inherit; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.re-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.re-item-name { font-size: .96rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-item-net { flex: 0 0 auto; font-weight: 700; color: var(--gold); }
.re-item-sub { font-size: .74rem; color: var(--text-soft); line-height: 1.35; }
.re-upd { opacity: .85; }
.re-item-del {
  flex: 0 0 auto; width: 42px; border: none; border-left: 1px solid var(--border);
  background: transparent; color: var(--text-soft); font-size: 1rem; cursor: pointer; border-radius: 0 12px 12px 0;
}
.re-item-del:active { filter: brightness(1.25); }
.re-add {
  width: 100%; padding: 10px; border-radius: 11px; cursor: pointer;
  border: 1px dashed var(--gold-soft); background: transparent; color: var(--gold);
  font: inherit; font-weight: 600; font-size: .9rem;
}
.re-add:active { filter: brightness(1.1); }
.re-hint { font-size: .76rem; color: var(--text-soft); line-height: 1.4; margin: 10px 2px 0; text-align: left; }

/* Etichette nei mini-pannelli con più campi (es. liquidità: banca / contanti) */
.mini-lbl { display: block; font-size: .78rem; color: var(--text-soft); margin: 4px 2px 3px; text-align: left; }

/* Pannello "Contabilità condivisa" nelle impostazioni (Categorie) */
.shared-intro { font-size: .88rem; color: var(--text-soft); margin: 0 0 14px; }
.shared-buttons { display: flex; flex-direction: column; gap: 10px; }
.shared-members {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px;
}
.shared-member {
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem;
}
.shared-member .sm-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--shared); flex: 0 0 auto;
}
.shared-member .sm-you { color: var(--text-soft); font-size: .82rem; }
.shared-pending {
  font-size: .85rem; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 14px;
}
.share-link-box {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; margin: 10px 0 0;
  font-size: .8rem; color: var(--text-soft);
  word-break: break-all;
}
.btn-shared {
  border: 1px solid var(--shared); background: var(--shared-soft); color: var(--shared);
  border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: .92rem;
}
/* (v283, rilievo di Claudio) Sui temi scuri il turchese pieno (#4FB3C9) «sparava»:
   le pillole piene vestono ora un teal notturno profondo con bordo di servizio e
   inchiostro chiaro — primarie ma eleganti. Sul chiaro resta la cura v262 (riga ~566). */
.btn-shared.solid {
  background: #14424F; color: #C9E9F2; border-color: #2C7C8F;
}
/* Pannello "Contabilità condivise" — elenco di card, una per condivisa. */
.shared-cards { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
.shared-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.shared-card.active { border-color: var(--shared); }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--shared-soft); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: 0 0 auto; }
.sc-name { flex: 1 1 auto; font-weight: 600; font-size: .98rem; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-status { flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.sc-status.full { color: var(--shared); background: var(--shared-soft); }
.sc-status.waiting { color: var(--warn); background: var(--warn-soft); }
.sc-rename { flex: 0 0 auto; background: none; border: 0; -webkit-appearance: none; appearance: none; color: var(--text-soft); font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 8px; cursor: pointer; opacity: .85; }
.sc-rename:active { background: var(--shared-soft); }
.sc-members { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sc-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px 4px 4px; }
.sc-av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--shared-soft); color: var(--shared); flex: 0 0 auto; }
.sc-chip.is-you .sc-av { background: var(--primary-soft); color: var(--gold); }
.sc-nm { font-size: .84rem; color: var(--text); }
.sc-you { font-size: .74rem; color: var(--text-soft); }
.sc-free { font-size: .8rem; color: var(--text-soft); border: 1px dashed var(--shared-soft); border-radius: 999px; padding: 5px 12px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sc-actions .btn-shared { flex: 1 1 auto; padding: 10px 12px; font-size: .86rem; }
.sc-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.btn-leave { padding: 7px 14px; font-size: .84rem; }
.sc-new { width: 100%; }

/* ============================================================
   VALUTE — selettore nell'importo, equivalente nelle righe, convertitore
   ============================================================ */

/* Selettore valuta dentro il campo importo (al posto del "€" fisso) */
.amount-input .cur-select {
  border: none; background: none; color: var(--text-soft);
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  padding: 0; padding-inline-end: 8px; margin-inline-end: 6px;
  border-inline-end: 1px solid var(--border);
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  flex: 0 0 auto; width: 5.4em;   /* larghezza contenuta: non deve "mangiarsi" il campo importo */
}
.amount-input .cur-select:focus { outline: none; color: var(--gold); }

/* Equivalente convertito accanto all'importo nella riga ("≈ 26 €") */
.mv-conv {
  font-size: .82rem; color: var(--text-soft);
  font-weight: 400; font-family: var(--sans);
  white-space: nowrap;
}

/* Convertitore rapido */
.converter { margin-top: 18px; }
.conv-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.conv-row input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1rem; font-variant-numeric: tabular-nums;
}
.conv-row select {
  flex: 0 0 auto; max-width: 38%;
  padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: .9rem;
}
.conv-arrow { color: var(--text-soft); flex: 0 0 auto; }
/* Pulsante per invertire le due valute (⇄) */
.conv-swap {
  flex: 0 0 auto;
  width: 36px; height: 40px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--gold); border-radius: 10px;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.conv-swap:active { filter: brightness(1.25); transform: scale(.94); }
.conv-result {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 10px;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.05rem; text-align: center;
}
.conv-note { margin: 6px 0 0; text-align: center; font-size: .78rem; }

/* Avviso "tassi di cambio non disponibili" nel Riepilogo */
.rates-warning {
  background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
  font-size: .84rem; line-height: 1.35;
}

/* ============================================================
   RIFINITURE ESTETICHE — schermata d'avvio (splash) + micro-animazioni
   ============================================================ */

/* --- Schermata d'avvio --- */
.splash {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background:
    radial-gradient(120% 70% at 50% 38%, #141d2e 0%, rgba(11,15,23,0) 62%),
    var(--bg);
  transition: opacity .45s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
/* La schermata di blocco deve stare SOPRA TUTTO: sopra lo splash (1100) alla riapertura a
   freddo, e sopra le finestrelle .mini-overlay (2000) — altrimenti al ri-blocco un saldo
   resta visibile e modificabile DAVANTI al lucchetto (rilievi I01 e I02 della revisione totale). */
#lock-screen { z-index: 3000; }
.splash-logo {
  width: 98px; height: 98px; border-radius: 50%;
  border: 1.6px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(231,192,77,.06), 0 8px 26px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  animation: splashLogo .8s cubic-bezier(.22,.61,.36,1) both;
}
.splash-logo .tally { transform: scale(1.45); }
.splash-brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.55rem; text-align: center; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .36em; padding-left: .36em;
  background: linear-gradient(135deg,#FFF1BE 0%,#F0C95A 48%,#C79A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 6px rgba(231,192,77,.35));
  animation: splashBrand .8s ease .15s both;
}
@keyframes splashLogo { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes splashBrand { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* --- Micro-animazioni: feedback morbido al tocco --- */
.btn-secondary, .btn-small, .btn-shared, .btn-danger, .icon-btn,
.seg-btn, .bs-btn, .chip-budget, .conv-swap, .link-btn, .fab, .tab {
  transition: transform .12s ease, filter .12s ease,
              background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-secondary:active, .btn-small:active, .btn-shared:active, .btn-danger:active,
.seg-btn:active, .bs-btn:active, .conv-swap:active, .link-btn:active {
  transform: scale(.97);
}
.tab:active { transform: scale(.92); }

/* Toast: entrata morbida dal basso */
.toast { animation: toastIn .28s var(--ease-out); }
.toast.out { animation: toastOut .2s ease forwards; }
@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(8px); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Transizione fra le viste, un filo più morbida */
.view { animation: viewIn .26s cubic-bezier(.22,.61,.36,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Sezioni vuote: piccola illustrazione a linea dorata sopra il testo --- */
.empty-art {
  width: 58px; height: 58px;
  display: block; margin: 4px auto 12px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
  animation: emptyArtIn .4s ease both;
}
.empty-text { margin: 0; }
@keyframes emptyArtIn { from { opacity: 0; transform: translateY(4px); } to { opacity: .5; transform: none; } }

/* Accessibilità: chi preferisce poco movimento, niente animazioni vistose */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .splash { transition: opacity .2s ease; }
}

/* SPUNTA DI SALVATAGGIO (save-check) */
.save-check {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: scFade .25s ease both;
}
.save-check.out { animation: scFadeOut .3s ease both; }
.save-check svg { width: 92px; height: 92px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
.save-check .sc-ring {
  fill: rgba(21,27,39,.92);
  stroke: var(--gold); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: scRing .5s ease-out forwards;
}
.save-check .sc-tick {
  fill: none; stroke: var(--gold); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: scTick .35s .35s ease-out forwards;
}
@keyframes scRing { to { stroke-dashoffset: 0; } }
@keyframes scTick { to { stroke-dashoffset: 0; } }
@keyframes scFade { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes scFadeOut { to { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .save-check .sc-ring, .save-check .sc-tick { animation: none; stroke-dashoffset: 0; }
  .save-check { animation: scFade .2s ease both; }
}

/* "CIOFFI TI DICE…" — insight in cima al Riepilogo */
.insight {
  margin: 2px 0 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(231,192,77,.08);
  border: 1px solid rgba(231,192,77,.18);
  color: var(--text);
  font-size: .92rem; line-height: 1.4;
}
@keyframes insightIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.insight.anim-in, .moment-line.anim-in { animation: insightIn var(--dur-slow) var(--ease-out) both; }

/* OBIETTIVO DI RISPARMIO */
.goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.goal-dl { font-size: .8rem; color: var(--text-soft); white-space: nowrap; }
.goal-month { font-size: .9rem; color: var(--text-soft); margin: 12px 0 6px; }
.b-bar.small { height: 6px; }
.goal-line { font-size: .95rem; margin-bottom: 7px; }
.goal-line strong { color: var(--text); }
.goal-line em { color: var(--text-soft); font-style: normal; }

/* ONBOARDING (benvenuto primo avvio) */
.onboarding { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 28px; background: radial-gradient(circle at 50% 28%, #141c2b, #0B0F17 70%); animation: viewIn .35s ease both; }
.onb-card { width: 100%; max-width: 380px; text-align: center; }
.onb-art { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.onb-art .tally { transform: scale(1.7); }
.onb-emoji { font-size: 3.4rem; }
.onb-title { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); margin: 0 0 12px; }
.onb-text { color: var(--text-soft); font-size: 1.02rem; line-height: 1.5; margin: 0 auto; max-width: 300px; }
.onb-dots { display: flex; gap: 8px; justify-content: center; margin: 30px 0; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(231,192,77,.25); transition: all .25s ease; }
.onb-dot.active { background: var(--gold); width: 22px; border-radius: 4px; }
.onb-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.onb-actions .auth-submit { width: 100%; }
.onb-skip { background: none; border: 0; color: var(--text-soft); padding: 6px 10px; font-size: .95rem; cursor: pointer; }
/* (v288) .yw-big PENSIONATA con le slide del racconto (oggi la pagella usa .rc-vbig/.rc-val). */

/* INFO (firma, in fondo a Categorie) */
.info-panel { text-align: center; padding-top: 26px; padding-bottom: 26px; }
.info-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.info-logo .tally { transform: scale(1.5); }
.info-brand { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .26em; padding-left: .26em; font-size: 1.15rem; color: var(--gold); }
.info-sign { color: var(--text); font-size: 1.05rem; margin: 12px 0 4px; }
.info-note { margin-top: 2px; }
.info-ver { color: var(--text-soft); font-size: .8rem; letter-spacing: .06em; margin-top: 14px; }
/* (v252) Il Condividi sotto la firma: il punto di ritrovo fisso della diffusione.
   (v256, richiesta di Claudio) D'ORO: l'abito esatto del bottone in cima alla Storia
   (#landing .btn-gold), portato fuori dalla vetrina — le variabili --btn-gold* vivono
   solo là, quindi qui gradiente e inchiostro sono scritti in chiaro. */
.info-share { margin-top: 14px; }
.btn-gold-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 340px;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: #241A05;
  background: linear-gradient(135deg, #FFF1BE 0%, #F0C95A 48%, #C79A2A 100%);
  border: none; border-radius: var(--radius);
  padding: 16px 28px; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gold-app:hover { filter: brightness(1.04); box-shadow: 0 8px 26px rgba(231,192,77,.30); transform: translateY(-1px); }
.btn-gold-app:active { transform: translateY(0); }

/* ---------- Selettore lingua (schermata d'accesso) ---------- */
.auth-lang { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.auth-lang select {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
}

/* ---------- Selettore lingua (pagina Riepilogo) ---------- */
.summary-lang-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -2px 0 12px; }
/* (v285) I QUATTRO SIGILLI del tema in Home — variante B del bozzetto: le quattro
   vesti sempre in vista, l'attiva cerchiata d'oro, la Veste bloccata col lucchetto.
   Tutto via variabili: si adatta da sé a scuro, chiaro e Conte. */
.theme-quick { display: inline-flex; gap: 6px; }
.tq-btn {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-soft); font-size: .9rem; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tq-btn.attivo {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(240,201,90,.3);
}
.tq-btn.locked { opacity: .55; }
/* (v287) La targhetta del sigillo: al posarsi del cursore l'etichetta — già tradotta,
   è la stessa che parla agli screen reader — si mostra sotto l'icona. Solo dove un
   cursore esiste (sul telefono l'hover non c'è: lì parla il gesto stesso). */
.tq-btn { position: relative; }
.tq-btn::after {
  content: attr(aria-label);
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--gold-soft); border-radius: 8px;
  padding: 4px 10px; font: 500 .72rem var(--sans); white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translateY(-2px);
  transition: opacity .15s ease .4s, transform .15s ease .4s;
  z-index: 30;
}
@media (hover: hover) and (pointer: fine) {
  .tq-btn:hover::after { opacity: 1; transform: translateY(0); }
}
.tq-btn:focus-visible::after { opacity: 1; transform: translateY(0); }
.summary-lang {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 10px;
  cursor: pointer;
}

/* ===== Selettore lingua con bandiere disegnate (flags.js) =====
   I <select> nativi restano nel DOM come motore (nascosti solo a
   componente pronto: .flagpick.ready). */
.flagpick { position: relative; display: inline-block; }
.flagpick.ready > select { display: none; }
.flagpick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .85rem; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 10px; cursor: pointer;
}
.flagpick-btn:active { transform: scale(.97); }
.fp-flag {
  display: inline-flex; flex: none; line-height: 0;
  border-radius: 2.5px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
}
.fp-flag svg { width: 21px; height: 14px; display: block; }
.fp-caret { color: var(--text-soft); flex: none; }
.flagpick-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 300;
  min-width: 205px; max-height: 56vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px; box-shadow: var(--shadow);
}
.flagpick-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: none; border-radius: 9px;
  font-family: var(--sans); font-size: .9rem; color: var(--text);
  cursor: pointer; text-align: start;
}
.flagpick-item:hover { background: var(--surface-2); }
.flagpick-item.sel { background: var(--primary-soft); color: var(--primary); }
.flagpick-item.sel .fp-name { font-weight: 600; }
/* Variante "campo modulo" (Impostazioni): occupa tutta la larghezza */
.field .flagpick { display: block; }
.field .flagpick-btn {
  width: 100%; justify-content: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface); font-size: 1rem; color: var(--text);
}
.field .flagpick-btn .fp-name { flex: 1 1 auto; text-align: start; }
.field .flagpick-menu { inset-inline-start: 0; inset-inline-end: 0; }

/* ===== RTL (arabo/persiano) — il resto del layout si specchia da solo
   grazie a flexbox e alle proprietà logiche qui sopra ===== */
[dir="rtl"] .month-nav .icon-btn { transform: scaleX(-1); }   /* frecce ‹ › specchiate */
[dir="rtl"] .mv-row { direction: rtl; }

/* ===== Bacheca dei traguardi (badge) ===== */
.ach-head { text-align: center; margin-bottom: 6px; }
.ach-title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.5rem; color: var(--gold); }
.ach-count { font-size: .82rem; color: var(--text-soft); margin-top: 2px; }
.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 58vh; overflow-y: auto; margin: 14px 0 4px; padding: 2px; }
.ach-tile { background: rgba(231,192,77,.06); border: 1px solid var(--gold-soft); border-radius: 14px; padding: 14px 8px; text-align: center; }
.ach-tile.locked { background: rgba(255,255,255,.03); border-color: var(--border); }
.ach-tile.locked .ach-emoji { opacity: .45; }
.ach-emoji { font-size: 30px; line-height: 1; }
.ach-name { margin-top: 6px; font-weight: 600; font-size: 13px; color: var(--gold); }
.ach-tile.locked .ach-name { color: var(--text); }
.ach-desc { margin-top: 3px; font-size: 12.5px; color: var(--text-soft); line-height: 1.35; }
.ach-state { margin-top: 8px; font-size: 12px; color: var(--text-soft); }

/* ---- Ricorrenti: spese intelligenti (Abbonamenti + Spese fisse) ---- */
.ric-entry-wrap { margin: 0 0 14px; }
.ric-entry { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; background: var(--surface); border: 1px solid var(--gold-soft); border-radius: 14px; padding: 12px 14px; color: var(--text); cursor: pointer; }
.ric-entry:hover { background: var(--surface-2); }
.ric-entry-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(231,192,77,.14); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ric-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ric-entry-t { font-size: .95rem; }
.ric-entry-s { font-size: .8rem; color: var(--text-soft); }
.ric-entry-s em { color: var(--gold); font-style: normal; }
.ric-entry-arrow { color: var(--gold); font-size: 1.4rem; line-height: 1; flex: none; }

.ric-card { max-width: 560px; max-height: 88vh; overflow-y: auto; text-align: left; }
.ric-hero { text-align: center; background: var(--surface); border: 1px solid var(--gold-soft); border-radius: 16px; padding: 16px; margin: 4px 0 6px; }
.ric-hero-label { font-size: .8rem; color: var(--text-soft); }
.ric-hero-big { font-family: var(--serif); color: var(--gold); font-size: 2.1rem; line-height: 1.15; margin: 2px 0; }
.ric-hero-sub { font-size: .8rem; color: var(--text-soft); }
.ric-seg { justify-content: center; margin: 12px 0 6px; }
.ric-seg .seg-btn { font-size: .76rem; padding: 6px 4px; line-height: 1.15; white-space: normal; }
.ric-group { margin-top: 14px; }
.ric-group-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 4px; }
.ric-group-head > span:first-child { color: var(--gold); font-size: .9rem; }
.ric-group-sub { color: var(--text-soft); font-size: .8rem; }
.ric-row { align-items: flex-start; }
.ric-row .mv-sub { white-space: normal; }
.ric-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ric-cancel { color: var(--gold); font-size: .78rem; text-decoration: none; }
.ric-cancel:hover { text-decoration: underline; }
.ric-move { background: none; border: none; padding: 0; color: var(--text-soft); font-size: .78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ric-move:hover { color: var(--text); }
.ric-del-rule { background: none; border: none; padding: 0; color: var(--uscita-text); font-size: .78rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ric-del-rule:hover { opacity: .8; }
/* (v302) Sui telefoni stretti la riga-ricorrente si piega con grazia invece di affollarsi:
   l'importo scende su una riga sua, a destra, e nome e azioni riprendono fiato. */
@media (max-width: 420px) {
  .ric-row { flex-wrap: wrap; }
  .ric-row .mv-main { flex: 1 1 0; }
  .ric-row .mv-right { flex: 1 1 100%; justify-content: flex-end; margin-top: 2px; }
  .ric-row .ric-actions { gap: 8px 12px; }
}
.ric-fixed-teaser { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; margin-top: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; color: var(--text-soft); cursor: pointer; }
.ric-fixed-teaser:hover { background: var(--surface-2); }
.ric-fixed-teaser .ric-entry-t { color: var(--text-soft); font-size: .9rem; }
.ric-fixed-teaser .ric-entry-s { font-size: .78rem; }

/* ---- Ricorrenti "previste" nei Movimenti (forecast) + "completa importo" ---- */
.movement.is-forecast { opacity: .72; }
.mv-forecast {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary); background: rgba(176,141,42,.14); border: 1px solid rgba(176,141,42,.38);
  vertical-align: middle;
}
.mv-complete {
  background: rgba(214,158,46,.16); border: 1px solid var(--warn); color: var(--warn);
  padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.mv-complete:hover { background: rgba(214,158,46,.26); }

/* mini-finestra "completa importo" */
.mini-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: 20px;
}
.mini-card {
  width: 100%; max-width: 340px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.mini-title { margin: 0 0 2px; font-size: 1.02rem; color: var(--text); }
.mini-sub { margin: 0 0 13px; font-size: .82rem; color: var(--text-soft); }
.mini-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 1.1rem;
  background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 11px; color: var(--text);
}
.mini-input.err { border-color: var(--uscita); }
.mini-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.mini-actions button {
  padding: 9px 16px; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);
}
.mini-actions .mini-ok { background: var(--primary); border-color: var(--primary); color: #1a1205; }
/* Variante impilata: due scelte con etichette lunghe (22 lingue) — una sopra l'altra, larghezza piena */
.mini-actions.stack { flex-direction: column; }
.mini-actions.stack button { width: 100%; }
/* In RTL la freccia «vecchia → nuova» va specchiata (stesso idioma delle frecce di navigazione) */
[dir="rtl"] .mini-arrow { display: inline-block; transform: scaleX(-1); }

/* Menù di gestione della contabilità attiva (dalla matitina sulla pillola) */
.bookmenu-card { width: min(340px, 92vw); }
.bookmenu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bookmenu-btn {
  text-align: left; padding: 12px 14px; border-radius: 12px; font: inherit; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.bookmenu-btn.bm-danger { color: var(--uscita); border-color: rgba(214,75,92,.35); background: var(--uscita-soft); }

/* Finestra Ricorrenti: riquadrone col saldo netto (Tutto) e con le entrate — verde se
   positivo/entrate, rosso leggibile se negativo (stessa famiglia del Patrimonio). */
.ric-hero-big.net-pos { color: var(--entrata); }
.ric-hero-big.net-neg { color: var(--uscita-text); }

/* Obiettivo di risparmio: spunta «Conta anche il passato» (pregresso). Spenta = foglio bianco. */
.goal-past {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: none; border: 0; padding: 4px 0; font: inherit; cursor: pointer;
}
.goal-past-box {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--text-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
}
.goal-past[aria-pressed="true"] .goal-past-box { border-color: var(--primary); background: var(--primary-soft); }
.goal-past-lbl { font-size: .85rem; color: var(--text-soft); }

/* Finestra Ricorrenti: l'importo della riga è un BOTTONE (tocca per inserire/modificare).
   Reset da bottone nudo + matitina (riusa .bs-edit); zona di tocco comoda senza cambiare l'aspetto. */
.ric-amt {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 6px 0 6px 8px; margin: -6px 0;
  font: inherit; color: inherit; cursor: pointer;
}

/* Debiti nel Patrimonio: il valore della riga (col suo meno) in rosso uscita.
   --uscita-text, non --uscita: è la variante per TESTO piccolo (contrasto AA). Rilievo revisione. */
.wealth-neg { color: var(--uscita-text); }
/* Totale del patrimonio quando è negativo (debiti > attivi): si veste di rosso, non d'oro */
.wealth-total-neg { color: var(--uscita-text); }

/* Ricorrente VARIABILE: etichetta al posto dell'importo + badge nella riga movimento */
.mv-variable { color: var(--text-soft); font-size: .82rem; font-style: italic; white-space: nowrap; }
.mv-varbadge {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--warn); background: rgba(214,158,46,.14); border: 1px solid rgba(214,158,46,.38);
  vertical-align: middle;
}

/* Matita "modifica" visibile su ogni riga movimento (un tocco solo) */
.mv-edit {
  flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 6px; margin-left: 4px;
  color: var(--text-soft); border-radius: 8px; line-height: 0;
}
.mv-edit:hover { color: var(--primary); background: rgba(255,255,255,.06); }
.mv-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mv-tocomplete { color: var(--text-soft); font-size: .82rem; font-style: italic; white-space: nowrap; }
/* Importo di una variabile GIÀ inserito: mostrato come importo ma cliccabile per ri-modificarlo */
.mv-varamount { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--uscita-text); font-weight: 600; border-bottom: 1px dashed var(--text-soft); white-space: nowrap; }
.mv-varamount:hover { color: var(--text); border-bottom-color: var(--warn); }

/* ---------- Cripto: il gruzzolo ---------- */
.cr-hero { text-align: center; padding: 6px 0 14px; }
.cr-patlabel { font-size: .82rem; color: var(--text-soft); letter-spacing: .04em; text-transform: uppercase; }
.cr-patrimonio { font-family: var(--serif); font-size: 1.9rem; font-weight: 800; color: var(--gold); margin: 2px 0; }
.cr-patsub { font-size: .88rem; color: var(--text-soft); }
.cr-updrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.cr-upd { font-size: .8rem; color: var(--text-soft); }
.cr-refresh { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: .82rem; cursor: pointer; }
.cr-refresh:hover { background: var(--surface-2); }
.cr-note { font-size: .8rem; color: var(--warn); margin: 0 0 8px; }
.cr-list { margin: 0 0 14px; }
.cr-badge { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; letter-spacing: .02em; }
.cr-row .mv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cr-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.cr-chip.up { color: var(--entrata); background: var(--entrata-soft); }
.cr-chip.down { color: var(--uscita-text); background: var(--uscita-soft); }
.cr-addwrap { padding-top: 2px; }
.cr-addtitle { font-size: .9rem; font-weight: 700; margin: 0 0 8px; }
.cr-add { display: flex; gap: 8px; align-items: center; }
.cr-sel { flex: 1; min-width: 0; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: .9rem; }
.cr-qty { width: 110px; flex: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: .9rem; }
.cr-qty.err { border-color: var(--uscita); }
.cr-addbtn { flex: none; background: var(--gold); color: var(--bg); border: none; border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 420px) {
  .cr-add { flex-wrap: wrap; }
  .cr-sel { flex: 1 1 100%; }
  .cr-qty { flex: 1; width: auto; }
}
.cr-herochip { margin-top: 2px; }
.crypto-toggle { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; align-self: stretch; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; margin: 8px 0; }
.crypto-toggle.on { border-color: var(--gold); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--gold-soft); }
.inv-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 2px 8px; padding-top: 14px; border-top: 1px solid var(--border); font-weight: 700; color: var(--gold); font-size: 1.02rem; }
.inv-sec.inv-first { border-top: none; padding-top: 0; }
.inv-subtot { font-size: .92rem; color: var(--text-soft); font-weight: 600; }
.st-badge { font-size: .62rem; letter-spacing: 0; }
.st-search { flex: 1 1 0; }
.st-results { margin-top: 8px; }
.st-results li { list-style: none; }
.st-pick { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 6px; cursor: pointer; text-align: left; }
.st-pick:hover { border-color: var(--gold); }
.st-sym { font-weight: 700; color: var(--gold); flex: none; }
.st-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.st-exch { flex: none; font-size: .78rem; color: var(--text-soft); }
.st-picked { align-items: center; }
.st-pickedname { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.st-cancel { flex: none; }

/* Foglio + su schermi LARGHI: non più a tutta larghezza (dispersivo su un 27"),
   ma colonna centrata leggermente PIÙ LARGA dell'app (720px → 820px): lo sbordo
   dà lo "stacco netto" scelto da Claudio. Centrato con margin auto (niente
   transform: l'animazione di scivolata resta intatta). Su telefono: invariato. */
@media (min-width: 900px) {
  .sheet {
    max-width: 820px;
    margin-inline: auto;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 48px rgba(0, 0, 0, .5), 0 0 0 1px var(--border);
  }
}
.card-edit { background: none; border: none; padding: 0 2px; margin-left: 4px; font-size: .92rem; cursor: pointer; opacity: .75; vertical-align: baseline; }
.card-edit:hover { opacity: 1; }

/* ===== Statistiche 2.0 — S3 (v259): l'andamento promosso + i pesi massimi ===== */
/* Le pillole della metrica: generose (mai sotto ~.85rem — le scritte piccole sono «da fatica»). */
.tm-pills { display: flex; gap: 8px; margin-bottom: 10px; }
.tm-pill { border: 1px solid var(--border); background: transparent; color: var(--text-soft);
  border-radius: 999px; padding: 7px 14px; font-size: .88rem; cursor: pointer; }
.tm-pill.on { border-color: var(--gold); color: var(--gold); font-weight: 600; background: var(--primary-soft); }
.tm-svg { display: block; width: 100%; height: 96px; }
.tm-years { display: flex; justify-content: space-between; color: var(--text-soft); font-size: .84rem; margin-top: 4px; }
.tm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tm-foot .st-plain { flex: 1 1 auto; }

/* I pesi massimi: righe che si LEGGONO (tocco deliberato v258 — la matitina è l'unica porta). */
.top-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.top-row:last-of-type { border-bottom: 0; }
.top-rank { color: var(--gold); font-weight: 700; min-width: 1.5em; text-align: center; font-size: .95rem; flex: none; }
.top-name { flex: 1 1 0; min-width: 0; font-size: .95rem; }
.top-name .top-cat { display: block; color: var(--text-soft); font-size: .86rem; }
.top-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .95rem; color: var(--uscita-text); flex: none; }
.top-row .mv-edit { flex: none; }
.top-more { text-align: center; margin-top: 6px; }

/* RTL (rilievo revisione S3, confermato): l'SVG della mini NON si specchia con dir="rtl",
   il flex delle etichette sì — i mesi finirebbero rovesciati rispetto alla linea.
   Si inchioda l'ordine al disegno: vecchio a sinistra, recente a destra. */
[dir="rtl"] .tm-years { direction: ltr; }

/* (v264) Il riquadro dell'ESCI, ultimo prima del sigillo: un solo gesto, a tutta larghezza. */
#logout-panel { text-align: center; }
#logout-panel .btn-secondary { width: 100%; max-width: 340px; }

/* ===== (v274) IL TOTALONE dei Movimenti: lo «scontrino» in fondo all'elenco =====
   Corpi generosi di proposito (lezione v255: sotto ~.85rem è «da fatica»). Vive di
   token (--surface/--gold-soft/--entrata/--uscita-text): si veste da solo nei due temi. */
.mov-total {
  margin: 10px 0 14px; background: var(--surface);
  border: 1px solid var(--gold-soft); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 16px;
}
.mt-eyebrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: .85rem; color: var(--text-soft); font-weight: 600; margin-bottom: 6px;
}
.mt-count { flex: none; font-size: .8rem; font-variant-numeric: tabular-nums; }
.mt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; }
.mt-label { font-size: .95rem; font-weight: 600; }
.mt-val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.3rem; white-space: nowrap; }
.mt-val.in { color: var(--entrata); }
.mt-val.out { color: var(--uscita-text); }
.mt-tear { border: none; border-top: 2px dashed var(--gold-soft); margin: 8px 0 4px; }
.mt-row.diff .mt-label { font-size: 1rem; }
.mt-row.diff .mt-val { font-size: 1.7rem; font-weight: 800; color: var(--gold); }

/* ===== (v279) LE TACCHE DELLA COSTANZA: il fregio in cima alla Home (variante A) ===== */
.streak-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0 0 10px;
  background: var(--primary-soft); border: 1px solid var(--gold-soft); border-radius: 12px;
}
.streak-strip svg { display: block; flex: 0 0 auto; }
.streak-txt { font-size: .9rem; font-weight: 700; }
.streak-txt small { display: block; font-weight: 600; color: var(--text-soft); font-size: .78rem; }
[dir="rtl"] .streak-strip svg { transform: scaleX(-1); } /* il tally cresce dal lato di lettura */

/* (v279) SET 2 della barra: icone a filo dentro .tab-ico (geometria della barra INTATTA) */
.tab-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ===== (v281) RACCONTO 2.0: le scene nuove dello slideshow ===== */
/* (v288) .yw-duo e .yw-podio PENSIONATE con le slide del racconto: la pagella ha
   le sue .rc-cell/.rc-podio-row (blocco in coda al file). */

/* ===== (v281) LA VESTE DEL CONTE — il premio dei 10 traguardi: non si compra, si guadagna =====
   Una notte più profonda e più d'oro: blu-notte del cielo, oro caldo, e la filigrana del tally
   sulle superfici (il segno del Count, appena sussurrato). Tutto via variabili: le regole del
   tema scuro base valgono e la veste le ARRICCHISCE. */
html[data-theme="conte"] {
  --bg: #0A0C1A; --surface: #141930; --surface-2: #1B2140;
  --text: #F6F0DF; --text-soft: #A6AABC; --border: #2A3152;
  --primary: #F0C95A; --primary-soft: rgba(240,201,90,.16);
  --gold: #F0C95A; --gold-soft: rgba(240,201,90,.5);
  --entrata: #63C795; --uscita: #E05A6B; --uscita-text: #F2808D;
  --shared: #5BC0d6; --shared-soft: rgba(91,192,214,.16);
  --warn: #F0B24A; --warn-soft: rgba(240,178,74,.18);
  --shadow: 0 8px 24px rgba(0,0,0,.55);
}
html[data-theme="conte"] body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(240,201,90,.07) 0%, rgba(10,12,26,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Cg stroke='%23F0C95A' stroke-opacity='.045' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='10' y1='10' x2='10' y2='30'/%3E%3Cline x1='17' y1='10' x2='17' y2='30'/%3E%3Cline x1='24' y1='10' x2='24' y2='30'/%3E%3Cline x1='31' y1='10' x2='31' y2='30'/%3E%3Cline x1='5' y1='27' x2='36' y2='13'/%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
}
html[data-theme="conte"] .appbar { background: #0B0E20; border-bottom-color: var(--gold-soft); }
html[data-theme="conte"] .card, html[data-theme="conte"] .panel, html[data-theme="conte"] .movement {
  border-color: rgba(240,201,90,.16);
}
/* (v283) Le pillole piene delle condivise, in Veste: il teal si fa un filo più
   notturno, intonato al blu-notte del Conte. */
html[data-theme="conte"] .btn-shared.solid {
  background: #103240; color: #C4E4EE; border-color: #2A6478;
}
/* (v284) Le card della festa in Veste: il doppio filetto d'oro del frontespizio. */
html[data-theme="conte"] .festa-card {
  border: 3px double rgba(240,201,90,.45);
}
/* il lucchetto della veste nel selettore Aspetto — e la sua RIGA PROPRIA (lente v281: a 375px
   l'etichetta sforava la fila a 4): i tre temi base sopra, la Veste a tutta larghezza sotto. */
#theme-seg { flex-wrap: wrap; }
#theme-seg [data-theme-opt="conte"] { flex-basis: 100%; }
#theme-seg [data-theme-opt="conte"].locked { opacity: .55; }

/* (v275) Il campo «Tipo di ricorrenza» è timido: si rivela solo quando scegli la cadenza in
   «Ripeti» — e al field-test non s'era fatto trovare. Ora si presenta con la dissolvenza di
   casa: l'animazione CSS riparte da sola ogni volta che il campo esce dal nascondiglio
   (display:none → flex), e NON riparte se cambi solo opzione nella tendina (campo già visibile). */
#field-repeat-kind { animation: fade var(--dur-base) var(--ease-out); }

/* ---------- (v288) IL RACCONTO-PAGELLA: la festa in un solo colpo d'occhio ---------- */
/* Bozzetto approvato da Claudio (23/7/2026): «Cioffi Count - Bozzetto Racconto Manifesto.html».
   Corpi da manifesto (sua richiesta esplicita): mai far faticare l'occhio. Solo variabili
   di casa: tema chiaro e Veste del Conte vestono da soli (il chiaro ridefinisce --gold & co.). */
#yearwrap .onb-card.rc-card { max-height: 88vh; display: flex; flex-direction: column; text-align: left; }
.rc-card #yw-slides { overflow-y: auto; min-height: 0; padding: 2px; margin-bottom: 12px; }
.rc-title { font-family: var(--serif); color: var(--gold); font-size: 1.45rem; font-weight: 700; line-height: 1.22; margin: 2px 0 10px; filter: drop-shadow(0 1px 6px rgba(231,192,77,.3)); }
.rc-verdict { text-align: center; padding: 16px 12px 15px; margin: 0 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.rc-vlab { color: var(--text-soft); font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; }
.rc-vbig { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--gold); margin: 5px 0 3px; line-height: 1.1; word-break: break-word; font-variant-numeric: tabular-nums; filter: drop-shadow(0 1px 6px rgba(231,192,77,.3)); }
.rc-pill { display: inline-block; margin-top: 10px; padding: 6px 15px; border-radius: 999px; background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--gold-soft); color: var(--gold); font-size: .97rem; font-weight: 600; }
.rc-deficit { margin-top: 8px; color: var(--text-soft); font-size: .95rem; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-cell { padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.rc-lab { color: var(--text-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.rc-val { font-weight: 800; font-size: 1.34rem; margin-top: 5px; font-variant-numeric: tabular-nums; word-break: break-word; }
.rc-sub { color: var(--text-soft); font-size: .92rem; margin-top: 2px; }
.rc-val.in { color: var(--entrata); } .rc-val.out { color: var(--uscita-text); } .rc-val.gold { color: var(--gold); }
.rc-podio, .rc-mov { grid-column: 1 / -1; }
.rc-podio-row { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 1.14rem; padding: 4px 0; }
/* margin-INLINE-start, non left: proprietà logica, così in RTL (ar/fa) l'importo va al
   margine di lettura e la colonna resta allineata (rilievo della lente v288). */
.rc-podio-row .pv { margin-inline-start: auto; color: var(--text-soft); font-weight: 600; font-size: 1.04rem; font-variant-numeric: tabular-nums; }
.rc-podio .rc-podio-row:first-of-type { margin-top: 6px; }
.rc-chiusa { text-align: center; padding: 20px 6px 6px; }
/* Fuori dai contenitori flex lo span del tally resterebbe inline (largh./alt. ignorate,
   aste collassate): qui va bloccato a mano. Stanato al banco visivo del 23/7. */
.rc-chiusa .tally { display: inline-block; transform: scale(1.25); }
.rc-frase { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.14rem; margin: 12px 0 0; }
.rc-empty { text-align: center; padding: 26px 8px; }
.rc-empty .rc-emoji { font-size: 2.2rem; margin-bottom: 10px; }
.rc-share { max-width: none; }  /* nella bottoniera del modale il Condividi d'oro prende tutta la riga */
/* Su schermo largo il foglio si allarga e respira su TRE colonne (precedente di casa:
   .onb-card.trend-card 640px). L'ordine delle celle cambia col guardaroba: order espliciti
   + dense, così le celle facoltative (confronto, podio corto) non lasciano buchi. */
@media (min-width: 720px) {
  #yearwrap .onb-card.rc-card { max-width: 760px; }
  .rc-grid { grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: dense; }
  .rc-in { order: 1; } .rc-out { order: 2; } .rc-vs { order: 3; }
  .rc-podio { order: 4; grid-column: span 2; }
  .rc-topday { order: 5; } .rc-topmov { order: 6; } .rc-days { order: 7; }
  .rc-mov { order: 8; grid-column: auto; }
}

/* ---------- (v289) LA TARGHETTA DELLE MEDAGLIE: il nome del traguardo al cursore ---------- */
/* Richiesta di Claudio (23/7): tooltip sulle medagliette della card festa (in bacheca il nome
   è già scritto). Pattern dei sigilli v287: content: attr(aria-label) = già tradotta ×22,
   visibile solo dove un cursore esiste — sul telefono parla il tocco (apre la bacheca). */
.medal { position: relative; }
.medal::after {
  content: attr(aria-label);
  position: absolute; top: calc(100% + 8px); left: 50%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--gold-soft); border-radius: 8px;
  padding: 4px 10px; font: 500 .72rem var(--sans); white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translate(-50%, -2px);
  transition: opacity .15s ease .4s, transform .15s ease .4s;
  z-index: 30;
}
@media (hover: hover) and (pointer: fine) {
  .medal:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- (v296) Le quattro piccole modifiche di Claudio (3/8/2026) ---------- */
/* ① Il valore-del-mese delle variabili: il tratteggio dice «questo è il numero di QUESTO
   mese — il prossimo si riscrive». */
.ric-var-filled { text-decoration: underline dashed; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* ③ Il concetto del patrimonio, in punta di piedi sotto il titolo della card. */
.wealth-concept { font-size: .8rem; color: var(--text-soft); line-height: 1.45; margin: 2px 2px 10px; }
/* ④ La fila dei sigilli su un piano ALTO: il motto qui sotto ha un'animazione con fill both
   che su alcuni motori (PC del socio) manteneva un contesto proprio e passava DAVANTI alla
   targhetta. La fila, posizionata e con z-index, vince l'ordine di pittura su ogni browser. */
.theme-quick { position: relative; z-index: 40; }

/* ---------- (v299) Gli obiettivi a tre vie: mensile · annuale · libero ---------- */
/* La targhetta del tipo accanto al titolo della card (MENSILE · 2026 · LIBERO). */
.tag-tipo { font-size: .66rem; color: var(--text-soft); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; letter-spacing: .04em; white-space: nowrap; }
/* I bottoni della finestrella «Che obiettivo è?»: titolo + riga di spiegazione. */
.tipo-btn { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 8px 0; cursor: pointer; color: var(--text); font: inherit; }
.tipo-btn b { display: block; font-size: .98rem; }
.tipo-btn small { display: block; color: var(--text-soft); font-size: .8rem; margin-top: 2px; line-height: 1.35; }
/* Più obiettivi nella stessa card (scelta B): un filetto sottile li separa. */
.goal-multi + .goal-multi { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.goal-multi + .pact-ghost { margin-top: 12px; }

/* ---------- (cantiere B) Il tetto AI: riposo e avviso ---------- */
/* Il riposo è una COMUNICAZIONE, non un guasto: fregio dorato, mai rosso. */
.ai-riposo {
  margin: 16px; padding: 14px 16px;
  border-left: 2px solid var(--gold-soft); background: rgba(231,192,77,.07);
  border-radius: 0 10px 10px 0;
  font-size: .92rem; line-height: 1.6; text-align: start;
}
.ai-riposo-firma { margin-top: 10px; color: var(--text-soft); font-size: .84rem; }
/* La riga quieta dell'avviso, in fondo al pannello import */
.ai-warn-line { margin: 10px 2px 0; text-align: start; }