: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: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 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) + 12px) 16px 12px;
  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); }

/* ---------- Contenuto ---------- */
#main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(120px + var(--safe-bottom));
}
.view { animation: fade .18s ease; }
@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); }
.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); }

/* ---------- 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); }

/* ---------- 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-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: 6px; }
.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; }
.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; }
}

/* ---------- 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);
  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); }

/* ============================================================
   TEMA PREMIUM "NOTTE & ORO"
   ============================================================ */
html { color-scheme: dark; }
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: .14em; font-size: .72rem; }

/* 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); }

/* 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; }

/* Pallino di stato accanto al nome categoria */
.mv-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  font-size: .68rem; font-weight: 700; line-height: 1;
  margin-inline-end: 7px; flex: 0 0 auto; vertical-align: middle;
}
.mv-cat { display: flex; align-items: center; }
.mv-status.ok { background: var(--entrata); color: #06231A; }
.mv-status.warn { background: var(--warn); color: #241A05; }

/* Filtro a segmenti: Tutti · Da verificare · Da rivedere */
.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); }
.seg-count {
  font-size: .7rem; font-weight: 700;
  background: var(--surface-2); color: var(--text-soft);
  border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.seg-btn.active .seg-count { background: rgba(231,192,77,.22); color: var(--gold); }
.seg-count:empty { display: none; }

/* 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.left { left: 0; }
.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 .mv-act-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.22); font-size: .85rem; line-height: 1;
}
.mv-act.verde { background: var(--entrata); }
.mv-act.ambra { background: var(--warn); color: #241A05; }
.mv-act.ambra .mv-act-ico { background: rgba(36,26,5,.18); }
.mv-act.rosso { background: var(--uscita); min-width: 96px; }
.mv-act:active { filter: brightness(.92); }
.mv-act.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }

/* Pulsanti stato dentro la scheda del movimento */
.status-toggle { display: flex; gap: 8px; }
.status-opt {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 12px; padding: 12px; font-weight: 600; font-size: .92rem;
}
.status-opt .so-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); font-size: .78rem; font-weight: 700; line-height: 1;
}
.status-opt[data-status="verificato"].on { border-color: var(--entrata); background: var(--entrata-soft); color: var(--entrata); }
.status-opt[data-status="verificato"].on .so-ico { background: var(--entrata); color: #06231A; }
.status-opt[data-status="rivedere"].on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.status-opt[data-status="rivedere"].on .so-ico { background: var(--warn); color: #241A05; }

/* ============================================================
   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; padding: 0 2px; cursor: pointer;
}

/* 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 */
#view-mode { margin-bottom: 12px; }

/* 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); }
.yt-saldo.pos { color: var(--text); font-weight: 700; }
.yt-saldo.neg { color: var(--uscita); 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 --- */
.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 {
  position: sticky; top: 0; z-index: 19;
  display: flex; gap: 6px;
  padding: 8px 16px;
  background: #0C111B;
  border-bottom: 1px solid var(--border);
}
.bs-btn {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft);
  border-radius: 10px; padding: 8px 6px;
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-btn[data-book="personale"].active {
  border-color: var(--gold-soft); color: var(--gold); background: var(--primary-soft);
}
.bs-btn[data-book="condivisa"].active {
  border-color: var(--shared); color: var(--shared); background: var(--shared-soft);
}

/* 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 "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;
}
.btn-shared.solid {
  background: var(--shared); color: #06222A; border-color: var(--shared);
}

/* ============================================================
   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: .76rem; 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 lo splash (200), mai sotto. */
#lock-screen { z-index: 250; }
.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, .status-opt, .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, .status-opt:active, .conv-swap:active, .link-btn:active {
  transform: scale(.97);
}
.tab:active { transform: scale(.92); }

/* Toast: entrata morbida dal basso */
.toast { animation: toastIn .28s cubic-bezier(.22,.61,.36,1); }
@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;
  animation: insightIn .45s ease both;
}
@keyframes insightIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .insight { animation: none; } }

/* 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; }
.yw-big { font-family: var(--serif); font-weight: 700; font-size: 2.3rem; color: var(--gold); line-height: 1.12; margin: 6px 0 12px; word-break: break-word; filter: drop-shadow(0 1px 6px rgba(231,192,77,.3)); }

/* 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); opacity: .55; font-size: .8rem; letter-spacing: .06em; margin-top: 14px; }

/* ---------- 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; margin: -2px 0 12px; }
.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: rgba(243,239,230,.6); 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); opacity: .5; }
.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: 11.5px; color: rgba(243,239,230,.6); line-height: 1.35; }
.ach-state { margin-top: 8px; font-size: 10.5px; color: rgba(243,239,230,.5); }