/* ==========================================================================
   Fatturama — sistema di design
   --------------------------------------------------------------------------
   Direzione cromatica: blu notte (fiducia, competenza, la leva psicologica
   del settore bancario) come colore strutturale, oro caldo come accento
   riservato alle azioni che fanno avanzare l'utente. L'oro compare poco e
   sempre nello stesso ruolo: è quello che lo rende magnetico invece che
   decorativo.

   Dimensionamento: pensato per l'uso con il pollice su smartphone. Nessuna
   area toccabile sotto i 56px, testo base 17px, etichette mai sotto i 14px.
   ========================================================================== */

:root {
  /* Fondali e superfici — neutri con bias blu, non grigi "di default" */
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-alt: #e7ecf4;
  --surface-sunken: #dde4ef;

  /* Testo */
  --text: #0d1f36;
  --text-muted: #55677f;
  --text-faint: #8494a8;

  /* Bordi */
  --border: #d8e0ec;
  --border-strong: #b9c6d8;

  /* Blu notte — colore strutturale del marchio */
  --navy: #123058;
  --navy-deep: #0a1e3a;
  --navy-bright: #1d4c86;
  --navy-soft: #e3ebf6;

  /* Oro — riservato alle azioni principali */
  --gold: #d8a53c;
  --gold-deep: #b78420;
  --gold-soft: #fbf1dc;

  /* Alias storici: il resto del codice usa --accent per il colore di marca */
  --accent: var(--navy);
  --accent-dark: var(--navy-deep);
  --accent-soft: var(--navy-soft);
  --accent-contrast: #ffffff;

  /* Colori semantici (stato), distinti dall'accento */
  --danger: #c62828;
  --danger-soft: #fdeaea;
  --success: #1b7a4b;
  --success-soft: #e4f5ec;
  --warning: #96650b;
  --warning-soft: #fdf1dc;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 3px rgba(13, 31, 54, 0.07);
  --shadow: 0 4px 14px rgba(13, 31, 54, 0.09);
  --shadow-lg: 0 12px 34px rgba(13, 31, 54, 0.18);
  --shadow-gold: 0 6px 18px rgba(183, 132, 32, 0.32);

  /* Scala tipografica — base 17px */
  --fs-xs: 13.5px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-md: 18px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-2xl: 31px;

  /* Altezza minima delle aree toccabili */
  --tap: 58px;

  --topbar-h: 64px;
  --bottomnav-h: 78px;
  --max-w: 560px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

img {
  max-width: 100%;
}

button {
  font-family: inherit;
}

a {
  color: var(--navy-bright);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Struttura                                                               */
/* ---------------------------------------------------------------------- */

.app-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--navy-deep);
  color: #fff;
  padding-top: env(safe-area-inset-top);
}

.topbar-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
  /* Niente sfondo quadrato: il PNG ha già lo sfondo rimosso (ritagliato
     attorno alla sagoma), così la mascotte sembra "appoggiata" direttamente
     sulla topbar invece di stare dentro un riquadro. Un'ombra leggera che
     segue la sagoma (non il riquadro) dà comunque un minimo di profondità. */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.topbar-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-sub {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

.topbar .icon-btn {
  color: #fff;
}

.topbar .icon-btn:hover,
.topbar .icon-btn:active {
  background: rgba(255, 255, 255, 0.14);
}

.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn:hover,
.icon-btn:active {
  background: var(--surface-alt);
}

.icon-btn svg {
  width: 26px;
  height: 26px;
}

main#view-root {
  flex: 1;
  padding: 20px 18px calc(var(--bottomnav-h) + 28px);
}

main#view-root.no-bottom-pad {
  padding-bottom: 28px;
}

/* Navigazione inferiore */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  min-height: var(--bottomnav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(13, 31, 54, 0.06);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 2px 6px;
  min-height: var(--bottomnav-h);
}

.bottom-nav-item svg {
  width: 27px;
  height: 27px;
}

.bottom-nav-item.active {
  color: var(--navy);
}

/* ---------------------------------------------------------------------- */
/* Home                                                                     */
/* ---------------------------------------------------------------------- */

.hero {
  padding: 4px 2px 20px;
}

.hero-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.hero-sub {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin: 0;
}

.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  min-height: 172px;
  color: var(--text);
}

.doc-card:active {
  transform: scale(0.98);
}

.doc-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}

.doc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy-soft);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-card-icon svg {
  width: 28px;
  height: 28px;
}

.doc-card-title {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.doc-card-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.35;
}

.section-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 30px 2px 12px;
}

.stat-row {
  display: flex;
  gap: 12px;
}

.stat-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px;
}

.stat-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Card e liste                                                            */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.card + .card {
  margin-top: 14px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  min-height: 76px;
}

.list-item-avatar {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.list-item-avatar svg {
  width: 26px;
  height: 26px;
}

.list-item-body {
  flex: 1;
  min-width: 0;
}

.list-item-title {
  font-weight: 700;
  font-size: var(--fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-meta {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.list-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  color: var(--text-faint);
}

.empty-state-title {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--text);
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: var(--fs-base);
  max-width: 330px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* Badge                                                                    */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  background: var(--navy-soft);
  color: var(--navy);
  white-space: nowrap;
}

.badge-neutral {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.badge-pro {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--navy-deep);
  box-shadow: var(--shadow-sm);
}

.badge-pro svg {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------------- */
/* Form                                                                     */
/* ---------------------------------------------------------------------- */

.field {
  margin-bottom: 20px;
}

.field-checkbox {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.field-label .req {
  color: var(--danger);
  margin-left: 3px;
}

.input,
select.input,
textarea.input {
  width: 100%;
  min-height: var(--tap);
  border: 2px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  font-family: inherit;
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.input:focus,
select.input:focus,
textarea.input:focus {
  border-color: var(--navy-bright);
  box-shadow: 0 0 0 4px rgba(29, 76, 134, 0.13);
}

.input-error {
  border-color: var(--danger);
}

textarea.input {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.field-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 7px;
  line-height: 1.4;
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--danger);
  margin-top: 7px;
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  padding: 16px 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 66px;
  line-height: 1.35;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.checkbox-row:hover {
  border-color: var(--border-strong);
}

.checkbox-row:has(input:checked) {
  border-color: var(--navy);
  background: var(--navy-soft);
}

.checkbox-row input[type="checkbox"] {
  width: 26px;
  height: 26px;
  accent-color: var(--navy);
  flex-shrink: 0;
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 12px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Bottoni                                                                  */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-sm);
  border: none;
  padding: 17px 22px;
  min-height: var(--tap);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease;
}

.btn:active {
  transform: scale(0.985);
}

.btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Azione principale: oro su testo blu notte. È l'unico elemento oro pieno
   della schermata, e questo è ciò che lo rende impossibile da mancare. */
.btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  background: var(--gold-deep);
}

/* Azione principale "sobria", per contesti dove l'oro sarebbe eccessivo */
.btn-navy {
  background: var(--navy);
  color: #fff;
}

.btn-navy:hover {
  background: var(--navy-deep);
}

.btn-secondary {
  background: var(--surface);
  color: var(--navy);
  border: 2px solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--navy);
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.btn-ghost {
  background: transparent;
  color: var(--navy-bright);
  width: auto;
  padding: 14px 16px;
}

.btn-ghost:hover {
  background: var(--surface-alt);
}

.btn-sm {
  padding: 12px 16px;
  min-height: 50px;
  font-size: var(--fs-sm);
  width: auto;
}

.btn-row {
  display: flex;
  gap: 12px;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.fab-actions {
  position: sticky;
  bottom: calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.fab-actions .btn {
  width: auto;
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
  border-radius: 999px;
  padding: 17px 26px;
}

/* ---------------------------------------------------------------------- */
/* Wizard                                                                   */
/* ---------------------------------------------------------------------- */

.wizard-progress {
  display: flex;
  gap: 6px;
  padding: 14px 18px 0;
}

.wizard-progress-seg {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-sunken);
  transition: background 0.2s ease;
}

.wizard-progress-seg.done {
  background: var(--navy);
}

.wizard-progress-seg.active {
  background: var(--gold);
}

.wizard-step-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 800;
  margin: 18px 2px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wizard-step-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0 2px 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.wizard-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 72%, rgba(238, 241, 246, 0));
  padding: 20px 0 calc(12px + env(safe-area-inset-bottom));
  margin-top: 14px;
}

.wizard-footer .btn-row {
  background: transparent;
}

/* Anteprima documento */

.preview-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 700;
}

.preview-canvas-wrap {
  width: 100%;
  max-height: 60vh;
  overflow: auto;
  background: var(--surface-sunken);
  display: flex;
  justify-content: center;
  padding: 16px;
}

.preview-canvas-wrap canvas,
.preview-canvas-wrap img {
  box-shadow: 0 3px 14px rgba(13, 31, 54, 0.2);
  background: #fff;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.summary-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.4;
}

.summary-table td:first-child {
  color: var(--text-muted);
  width: 44%;
  font-weight: 600;
  padding-right: 12px;
}

.summary-table td:last-child {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-table tr:last-child td {
  border-bottom: none;
}

.summary-total {
  font-weight: 800;
  color: var(--navy);
  font-size: var(--fs-lg);
}

/* ---------------------------------------------------------------------- */
/* Abbonamento: contatore, paywall, piani                                  */
/* ---------------------------------------------------------------------- */

/* Banner "Installa l'app": stesso linguaggio visivo della quota-card, ma
   distinguibile (sfondo azzurrino invece che bianco) perché è un suggerimento,
   non uno stato dell'account. */
.install-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy-soft);
  border-radius: var(--radius);
  padding: 14px 10px 14px 16px;
  margin-bottom: 18px;
}

.install-banner-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-banner-icon svg {
  width: 20px;
  height: 20px;
}

.install-banner-body {
  flex: 1;
  min-width: 0;
}

.install-banner-title {
  font-size: var(--fs-base);
  font-weight: 800;
  margin-bottom: 2px;
}

.install-banner-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.35;
}

.install-banner .btn-sm {
  flex-shrink: 0;
}

.install-banner-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
}

.install-banner-close svg {
  width: 18px;
  height: 18px;
}

/* Contatore documenti gratuiti rimasti */
.quota-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.quota-card.quota-exhausted {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.quota-card.quota-pro {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

.quota-body {
  flex: 1;
  min-width: 0;
}

.quota-title {
  font-size: var(--fs-base);
  font-weight: 800;
  margin-bottom: 3px;
}

.quota-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.35;
}

.quota-card.quota-pro .quota-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* Indicatore a pallini: quanti documenti restano, leggibile a colpo d'occhio */
.quota-dots {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.quota-dot {
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: var(--navy);
}

.quota-dot.spent {
  background: var(--surface-sunken);
}

.quota-card.quota-exhausted .quota-dot.spent {
  background: rgba(183, 132, 32, 0.24);
}

/* Paywall */
.paywall-hero {
  text-align: center;
  padding: 8px 4px 26px;
}

.paywall-crest {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-gold);
}

.paywall-crest svg {
  width: 40px;
  height: 40px;
}

.paywall-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  line-height: 1.15;
  text-wrap: balance;
}

.paywall-sub {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: var(--fs-base);
  line-height: 1.4;
}

.benefit-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.benefit-check svg {
  width: 17px;
  height: 17px;
}

.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.plan-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 20px 18px;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  min-height: 92px;
}

.plan-card:hover {
  border-color: var(--navy);
}

.plan-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 165, 60, 0.18);
}

.plan-radio {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-card.selected .plan-radio {
  border-color: var(--gold-deep);
  background: var(--gold);
}

.plan-card.selected .plan-radio::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--navy-deep);
}

.plan-body {
  flex: 1;
  min-width: 0;
}

.plan-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 800;
  margin-bottom: 3px;
}

.plan-detail {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.35;
}

.plan-price {
  display: block;
  text-align: right;
  flex-shrink: 0;
}

.plan-price-value {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.plan-price-period {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.plan-flag {
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--navy-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.paywall-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 16px;
}

/* ---------------------------------------------------------------------- */
/* Toast                                                                    */
/* ---------------------------------------------------------------------- */

#toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(100% - 36px);
  max-width: calc(var(--max-w) - 36px);
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--navy-deep);
  color: #fff;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

/* ---------------------------------------------------------------------- */
/* Modale                                                                   */
/* ---------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 58, 0.55);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-sheet {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: var(--max-w);
  padding: 26px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  /* Gli avvisi sui dati locali sono piu' lunghi di una conferma breve: su un
     telefono piccolo devono poter scorrere invece di far finire i pulsanti
     fuori dallo schermo, dove l'utente non li troverebbe mai. */
  max-height: 88dvh;
  overflow-y: auto;
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.modal-desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* Selettore cliente                                                       */
/* ---------------------------------------------------------------------- */

.picker-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.picker-toggle button {
  flex: 1;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  padding: 14px 10px;
  min-height: 56px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.picker-toggle button.active {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-soft);
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                  */
/* ---------------------------------------------------------------------- */

.muted {
  color: var(--text-muted);
}

.text-center {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}
.mt-8 {
  margin-top: 10px;
}
.mt-16 {
  margin-top: 18px;
}
.mb-0 {
  margin-bottom: 0;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
  border: none;
}

.logo-preview {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-alt);
  flex-shrink: 0;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.offline-banner {
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
}

/* Avviso di cambio dominio, mostrato solo sul vecchio fatturaveloce.me
   (vedi public/js/lib/migrazione.js). Deve leggersi come una comunicazione
   di servizio, non come un errore: fondo blu di marca, non giallo allarme. */
.migrazione-banner {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.migrazione-banner-testo {
  flex: 1 1 260px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.migrazione-banner-testo strong {
  display: block;
  margin-bottom: 2px;
}

.migrazione-banner-testo a {
  color: var(--gold);
  font-weight: 700;
}

.migrazione-banner-azioni {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.migrazione-banner-azioni .icon-btn {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

/* Promemoria backup in cima alla home. Tono informativo, non allarme: e'
   una cosa che l'utente puo' fare adesso, non un errore che ha commesso. */
.backup-promemoria {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.backup-promemoria-testo {
  flex: 1 1 220px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--navy-deep);
}

.backup-promemoria-testo strong {
  display: block;
  margin-bottom: 2px;
}

.backup-promemoria-azioni {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Riga di stato del backup in Impostazioni. */
.backup-stato {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  background: var(--navy-soft);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Nota informativa in linea (spiegazioni in linguaggio semplice) */
.info-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--navy-soft);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  font-size: var(--fs-sm);
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 18px;
}

.info-note svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}