* { margin:0; padding:0; box-sizing:border-box; }

/* hide native number spinners globally */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

/* icon action buttons (✎ ×) */
.icon-btn { background:none; border:none; cursor:pointer; padding:3px var(--space-3); border-radius:var(--radius-xs); transition:color var(--duration-fast), background var(--duration-fast); }
.icon-btn:hover { color:var(--accent) !important; background:var(--accent-muted); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;   /* fallback per browser che non supportano dvh */
  min-height: 100dvh;  /* dynamic viewport height: gestisce la URL bar iOS Safari */
}

/* ── LOGIN ── */
/* Contenitori della porta d'ingresso (login Momento 1 + onboarding 2-4).
   Targettati per id per battere la specificità e imporre il pavimento scuro. */
#login-screen.porta, #onboarding-overlay.porta {
  position: fixed; inset: 0; z-index: var(--z-auth);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-page); overflow: hidden;
}
.login-backdrop {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 30%, transparent 75%);
  pointer-events: none;
}
/* Card del gate: superficie elevata nel mondo della porta, con alone accent.
   Usata solo dalle schermate sicurezza (Momento 1 è cardless). */
.login-card {
  position: relative; z-index: 1; width: min(400px, calc(100vw - 40px));
  padding: 40px 34px var(--space-12); background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-2xl);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, var(--shadow-xl), 0 0 90px rgba(var(--accent-rgb),0.07);
  text-align: center;
  animation: login-rise var(--duration-entrance) var(--ease-spring) both;
}
.login-card--auth {
  width: min(400px, calc(100vw - 40px));
  padding: 40px 34px var(--space-16);
}
.login-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--space-8); border-radius: 20px;
  color: var(--accent-light);
  background: linear-gradient(155deg, var(--bg-elevated), var(--bg-surface) 60%);
  border: 1px solid var(--border-default);
  box-shadow: 0 0 40px rgba(var(--accent-rgb),0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}
.login-overline {
  margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-light);
}
.login-title {
  margin: 0 0 var(--space-4); font-family: var(--font-serif); font-size: 26px; font-weight: var(--weight-bold);
  letter-spacing: -0.02em; color: var(--text-heading);
}
/* Link «Cambia account Google» nella riga trust (era inline #4a4f63) */
.login-security-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--text-sm); color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; }
.login-security-btn:hover { color: var(--text-secondary); }
.login-subtitle {
  margin: 0 0 var(--space-16); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary);
}
.login-action {
  display: flex; justify-content: center; margin-bottom: var(--space-12); min-height: 44px;
}
.login-divider {
  height: 1px; margin: 0 -40px var(--space-8); background: var(--border-subtle);
}
.login-security {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); font-size: var(--text-sm); color: var(--text-tertiary);
}
.login-security svg { flex-shrink: 0; color: var(--success); }
/* Bottone Google: pieno, dentro lo slot verticale della porta.
   Bianco/testo scuro sono fissi per requisito di brand Google. */
.sb-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; border: none; border-radius: var(--radius-lg); cursor: pointer;
  font-size: var(--text-lg); font-weight: var(--weight-semibold); font-family: inherit; letter-spacing: 0.01em;
  background: #fff; color: #1f1f1f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 22px rgba(0,0,0,0.35);
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal);
}
.sb-google-btn:hover  { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45); }
.sb-google-btn:active { transform: scale(0.98); }
.sb-google-btn svg { flex: none; }
.login-footer {
  position: relative; margin: 0; font-size: var(--text-sm);
  letter-spacing: 0.04em; color: var(--text-disabled);
  animation: login-rise var(--duration-entrance) var(--ease-spring) 0.1s both;
}
@keyframes login-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-card, .login-footer { animation: none; }
}


/* ══ PORTA D'INGRESSO ═══════════════════════════════════════════════════
   Momento 1 (login) + Momenti 2-4 (onboarding). Dark-only: i contenitori
   forzano data-theme=dark, quindi i token risolvono sempre ai valori Ardesia.
   Art direction «la luce che sale»: un glow ambientale sale coi momenti. */

.porta-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.porta-glow {
  position: absolute; left: 50%; top: 100%;
  width: 920px; height: 680px; transform: translate(-50%, -26%);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), transparent 70%);
  transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-slow) var(--ease-spring);
}
.porta-glow-2 {
  left: auto; right: -180px; top: -160px;
  width: 560px; height: 520px; opacity: 0.4; transform: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.10), transparent 70%);
  transition: opacity var(--duration-slow) var(--ease-spring);
}
/* la luce sale attraverso i momenti dell'onboarding */
#onboarding-overlay[data-step="3"] .porta-glow   { transform: translate(-50%, -92%); }
#onboarding-overlay[data-step="3"] .porta-glow-2 { opacity: 0.8; }
#onboarding-overlay[data-step="4"] .porta-glow   { transform: translate(-50%, -110%); opacity: 0.85; }
#onboarding-overlay[data-step="4"] .porta-glow-2 { opacity: 1; }

/* semi sospesi: derivano lentissimi */
.porta-speck {
  position: absolute; border-radius: 50%; width: 2px; height: 2px;
  background: rgba(var(--accent-rgb), 0.3);
  animation: porta-drift 12s ease-in-out infinite alternate;
}
.porta-speck:nth-child(3) { width: 3px; height: 3px; }
.porta-speck:nth-child(4) { animation-duration: 15s; }
.porta-speck:nth-child(5) { animation-duration: 10s; }
.porta-speck:nth-child(6) { animation-duration: 17s; }
.porta-speck:nth-child(7) { width: 3px; height: 3px; animation-duration: 14s; }
@keyframes porta-drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* progresso: due semi (nome, luce) */
.porta-dots {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 5;
}
.porta-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-default); transition: background var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-spring); }
.porta-dots i.done { background: var(--accent); }
.porta-dots i.cur  { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); }

/* palcoscenico onboarding (i momenti si sovrappongono e scorrono) */
.porta-stage { position: relative; z-index: 1; width: 100%; min-height: 100dvh; display: grid; place-items: center; padding: 56px 20px 72px; }
.porta-step { position: relative; z-index: 1; width: min(420px, 100%); text-align: center; }
.porta-stage .porta-step {
  grid-area: 1 / 1;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-spring), transform var(--duration-slow) var(--ease-spring);
}
.porta-stage .porta-step.active { opacity: 1; transform: none; pointer-events: auto; }

/* entrata scaglionata dei blocchi (--i imposta il ritardo) */
.porta-in { opacity: 0; }
#login-screen .porta-in,
.porta-step.active .porta-in {
  animation: porta-rise var(--duration-entrance) var(--ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
@keyframes porta-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Momento 1 · accesso ── */
.porta-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 23px;
  background: linear-gradient(155deg, var(--bg-elevated), var(--bg-surface) 60%);
  border: 1px solid var(--border-default);
  box-shadow: 0 0 48px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--accent-light); margin-bottom: 26px;
  animation: porta-float 6s ease-in-out infinite;
}
@keyframes porta-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.porta-wordmark { font-size: 31px; font-weight: var(--weight-bold); letter-spacing: -0.03em; color: var(--text-heading); margin-bottom: 8px; }
.porta-tagline  { font-family: var(--font-serif); font-style: italic; font-size: var(--text-xl); color: var(--text-secondary); margin-bottom: 40px; }
/* slot accesso: colonna, pronta ad accogliere un secondo metodo domani */
.auth-slot { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); margin: 0 auto 18px; }
.porta-trust { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-tertiary); }
.porta-trust svg { flex: none; opacity: 0.9; color: var(--success); }
.porta-foot { position: fixed; left: 0; right: 0; bottom: 40px; text-align: center; font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--text-disabled); z-index: 1; }

/* ── Tipografia condivisa (Momenti 2-4) ── */
.porta-eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 18px; }
.porta-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 7.2vw, 33px); font-weight: var(--weight-bold);
  color: var(--text-heading); letter-spacing: -0.02em; line-height: 1.18;
  text-wrap: balance; margin-bottom: 14px;
}
.porta-title em {
  font-style: italic;
  background: var(--gradient-word);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.porta-sub { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.7; max-width: 340px; margin: 0 auto 30px; }

/* ── Momento 2 · nome ── */
.porta-field-label { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-heading); margin-bottom: 12px; }
.porta-name-input {
  display: block; width: min(320px, 100%); margin: 0 auto;
  background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  color: var(--text-heading); font-size: var(--text-xl); font-family: inherit;
  text-align: center; padding: 14px 18px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.porta-name-input::placeholder { color: var(--text-tertiary); }
.porta-name-input:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18), 0 0 28px rgba(var(--accent-rgb), 0.12);
}
.porta-greet {
  min-height: 30px; margin: 12px auto 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: var(--text-base); font-style: italic; color: var(--accent-light);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--duration-normal) var(--ease-spring), transform var(--duration-normal) var(--ease-spring);
}
.porta-greet.on { opacity: 1; transform: none; }
/* il germoglio si disegna col nome — stesso indaco del saluto, non verde:
   legge come segno disegnato, non come pittogramma-emoji */
.porta-sprout { width: 18px; height: 18px; flex: none; }
.porta-sprout path {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--duration-normal) ease-out;
}
.porta-greet.on .porta-sprout path:nth-child(1) { stroke-dashoffset: 0; }
.porta-greet.on .porta-sprout path:nth-child(2) { stroke-dashoffset: 0; transition-delay: 0.12s; }
.porta-greet.on .porta-sprout path:nth-child(3) { stroke-dashoffset: 0; transition-delay: 0.2s; }

/* CTA primaria della porta */
.porta-btn {
  display: block; width: min(320px, 100%); margin: 0 auto;
  height: 52px; border: none; border-radius: var(--radius-lg);
  background: var(--gradient-cta); color: var(--on-accent);
  font-size: var(--text-lg); font-weight: var(--weight-semibold); font-family: inherit; letter-spacing: 0.01em;
  opacity: 0.5; box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.18);
  transition: opacity var(--duration-normal), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal), filter var(--duration-fast);
}
.porta-btn.ready { opacity: 1; box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.38); }
.porta-btn.ready:hover { transform: translateY(-1px); filter: brightness(1.07); }
.porta-btn.ready:active { transform: scale(0.98); }
.porta-skip {
  display: inline-block; margin-top: 18px; background: none; border: none; padding: 6px 10px;
  font-size: var(--text-base); color: var(--text-tertiary); cursor: pointer; font-family: inherit;
  transition: color var(--duration-fast);
}
.porta-skip:hover { color: var(--text-secondary); }

/* ── Momento 3 · luce ── */
.porta-mode-cap { min-height: 24px; font-size: var(--text-base); color: var(--text-secondary); margin: 14px 0 26px; transition: opacity var(--duration-fast); }
.porta-mode-cap.tick { opacity: 0; }
.porta-mode-cap b { color: var(--text-heading); font-weight: var(--weight-semibold); }

/* anteprima app: due pelli, la scelta sposta il confine.
   NB: colori letterali di proposito — sono uno swatch illustrativo delle DUE
   palette (Ardesia e Neve) mostrate insieme, non superfici a tema. In dark
   forzato i token Neve non sarebbero disponibili. */
.porta-preview {
  position: relative; width: min(320px, 100%); height: 186px;
  margin: 0 auto 30px; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-xl);
}
.porta-preview .pv-skin { position: absolute; inset: 0; display: flex; }
.porta-preview .pv-side { width: 54px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 11px; padding-top: 16px; }
.porta-preview .pv-side i { width: 9px; height: 9px; border-radius: 50%; }
.porta-preview .pv-main { flex: 1; padding: 16px 16px 0; text-align: left; }
.porta-preview .pv-bar { border-radius: 4px; height: 5px; }
.porta-preview .pv-saldo { font-size: 21px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 8px 0 4px; }
.porta-preview .pv-batt { height: 12px; border-radius: var(--radius-full); margin: 12px 0 14px; overflow: hidden; display: flex; gap: 2px; padding: 2px; }
.porta-preview .pv-batt i { border-radius: var(--radius-full); height: 100%; }
.porta-preview .pv-cols { display: flex; gap: 6px; align-items: flex-end; height: 30px; }
.porta-preview .pv-cols i { flex: 1; border-radius: 3px 3px 0 0; }
.pv-dark { background: #171717; }
.pv-dark .pv-side { background: #1f1f1f; border-right: 1px solid #262626; }
.pv-dark .pv-side i { background: #3a3a3a; }
.pv-dark .pv-side i:first-child { background: var(--lavanda-600); }
.pv-dark .pv-bar { background: #333333; }
.pv-dark .pv-saldo { color: #f5f5f5; }
.pv-dark .pv-batt { background: #262626; }
.pv-dark .pv-batt i:nth-child(1) { background: var(--lavanda-600); width: 58%; }
.pv-dark .pv-batt i:nth-child(2) { background: rgba(99,99,254,0.35); width: 20%; }
.pv-dark .pv-cols i { background: var(--lavanda-600); }
.pv-dark .pv-cols i:nth-child(even) { opacity: 0.45; }
.pv-light { background: #fbf9f5; clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); transition: clip-path var(--duration-slow) var(--ease-spring); }
.pv-light .pv-side { background: #ffffff; border-right: 1px solid #e7e4df; }
.pv-light .pv-side i { background: #d4d4d4; }
.pv-light .pv-side i:first-child { background: var(--lavanda-700); }
.pv-light .pv-bar { background: #e7e4df; }
.pv-light .pv-saldo { color: #171717; }
.pv-light .pv-batt { background: #f6f2ec; }
.pv-light .pv-batt i:nth-child(1) { background: var(--lavanda-700); width: 58%; }
.pv-light .pv-batt i:nth-child(2) { background: rgba(79,71,226,0.3); width: 20%; }
.pv-light .pv-cols i { background: var(--lavanda-700); }
.pv-light .pv-cols i:nth-child(even) { opacity: 0.4; }
.porta-preview[data-mode="dark"]  .pv-light { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.porta-preview[data-mode="light"] .pv-light { clip-path: polygon(0 0, 102% 0, 102% 100%, 0 100%); }

/* fioritura al click su «Entra» */
.porta-btn-enter { position: relative; overflow: visible; }
.porta-btn-enter::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); opacity: 0;
}
.porta-btn-enter.bloom::after { animation: porta-bloom var(--duration-slow) ease-out forwards; }
@keyframes porta-bloom { from { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); } to { opacity: 0; box-shadow: 0 0 0 26px rgba(var(--accent-rgb), 0); } }

/* ── Momento 4 · transizione ── */
.porta-fin-mark { color: var(--accent-light); font-size: 26px; margin-bottom: 18px; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .porta-stage { padding: 48px 18px 72px; }
  .porta-mark { width: 68px; height: 68px; border-radius: 21px; }
  .porta-sub { font-size: var(--text-md); }
  .porta-foot { bottom: 28px; }
}

/* ── Rispetto per chi preferisce la quiete ── */
@media (prefers-reduced-motion: reduce) {
  .porta-glow, .porta-glow-2, .porta-speck, .porta-mark,
  #login-screen .porta-in, .porta-step.active .porta-in,
  .porta-stage .porta-step { animation: none !important; transition: none !important; }
  #login-screen .porta-in, .porta-step.active .porta-in { opacity: 1; }
  .porta-greet.on .porta-sprout path { stroke-dashoffset: 0; transition: none; }
}


/* ── GATE SICUREZZA ── (biometria/PIN + setup, nel mondo della porta come card
   contenuta — validato 12 lug 2026, mockup docs/mockups/gate-sicurezza-v1.html) */
#local-auth-screen,
#local-auth-setup {
  position: fixed; inset: 0; z-index: var(--z-popover);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-12); background: var(--bg-page); overflow: hidden;
}

/* Azione primaria (biometria / registra): bottone pieno indigo come la porta.
   La secondaria (salva PIN) è outline su superficie elevata. */
.auth-action-btn {
  position: relative; z-index: 1;
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-10); border-radius: 14px; font-size: var(--text-lg); font-weight: var(--weight-semibold);
  background: var(--gradient-cta); border: none; color: var(--on-accent); cursor: pointer;
  box-shadow: 0 8px 30px rgba(var(--accent-rgb),0.35);
  transition: transform var(--duration-fast) var(--ease-spring), filter var(--duration-fast), box-shadow var(--duration-normal);
  flex-direction: column;
}
.auth-action-btn:hover  { transform: translateY(-1px); filter: brightness(1.07); }
.auth-action-btn:active { transform: scale(0.97); }
.auth-action-btn > svg  { align-self: center; }
/* row layout when no sub-label */
.auth-action-btn:not(:has(.auth-action-sub)) { flex-direction: row; }

.auth-action-secondary {
  background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-heading);
  box-shadow: none;
}
.auth-action-secondary:hover { background: color-mix(in srgb, var(--bg-elevated) 92%, var(--text-heading)); border-color: var(--border-strong); filter: none; transform: none; }

.auth-action-sub {
  font-size: 11px; font-weight: 400; opacity: 0.6; margin-top: 2px;
}

.auth-pin-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--text-md); text-align: center;
  padding: var(--space-5) var(--space-8); letter-spacing: 3px; outline: none;
  transition: border-color var(--duration-fast);
}
.auth-pin-input:focus { border-color: var(--accent); }

.auth-error-row {
  color: var(--error); font-size: var(--text-sm); margin-top: var(--space-4); padding: var(--space-4) var(--space-6);
  background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius-md); width: 100%; text-align: center;
}

/* ── PIN Cells ── */
.pin-cells {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 8px;
}
.pin-cell {
  width: 48px; height: 58px; border-radius: 14px;
  background: var(--bg-input); border: 1.5px solid var(--border-subtle);
  color: var(--text-primary); font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  text-align: center; line-height: 58px; caret-color: transparent;
  outline: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pin-cell:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow-md), 0 0 16px rgba(var(--accent-rgb),0.1);
}
.pin-cell.filled {
  border-color: rgba(var(--accent-rgb),0.4);
  box-shadow: var(--shadow-glow-sm);
}
.pin-cell.error {
  border-color: var(--error);
  box-shadow: var(--shadow-glow-error);
  animation: pin-shake var(--duration-slow) ease-out;
}
@keyframes pin-cell-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pin-cell-pop { animation: pin-cell-pop var(--duration-normal) var(--ease-spring); }
@keyframes pin-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
.pin-cell.cursor-blink {
  animation: cell-blink var(--duration-blink) step-end infinite;
}
@keyframes cell-blink {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: var(--border-subtle); }
}
.pin-error-text {
  color: var(--error); font-size: var(--text-base); margin: var(--space-4) 0 0; text-align: center;
}

/* ── Auth link button ── */
.auth-link-btn {
  background: none; border: none; color: var(--text-disabled); font-size: var(--text-base);
  cursor: pointer; padding: var(--space-4) 0; margin-top: var(--space-8);
  transition: color var(--duration-slow) var(--ease-spring);
}
.auth-link-btn:hover { color: var(--text-secondary); }

/* ── State crossfade ── */
#auth-state-bio, #auth-state-pin {
  width: 100%;
  transition: opacity 0.2s ease;
}

/* ── DASHBOARD ── */
#dashboard { display: none; }

/* ── SIDEBAR (desktop only, >768px) ── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w); z-index: var(--z-sidebar); display: none;
  flex-direction: column;
  background: var(--bg-input); border-right: 1px solid var(--border-subtle);
}
.sidebar-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 16px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-logo {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md);
  color: var(--accent); background: var(--accent-muted); border: 1px solid rgba(var(--accent-rgb),0.25);
}
.header-greeting {
  font-size: var(--text-2xl);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: var(--r-md);
  color: var(--text-primary); font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background 0.15s var(--ease-spring), color 0.15s var(--ease-spring), box-shadow 0.15s var(--ease-spring);
  position: relative;
}
.sidebar-nav-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text-heading);
}
.sidebar-nav-item.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text-heading);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-nav-item.active .icon { color: var(--accent-light); }
.sidebar-nav-item .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-nav-item[data-badge]::after {
  content: attr(data-badge); margin-left: auto;
  min-width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--error); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-black);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--space-2);
}
.nav-label,
.btn-label { transition: opacity 0.15s ease; }

/* ── SIDEBAR FOOTER ── */
.sidebar-footer {
  padding: 8px 8px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-footer .last-update {
  display: block;
  font-size: 10px;
  color: var(--text-xdim);
  padding: 4px 10px 6px;
  min-height: 14px;
}
.sidebar-footer-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background 0.12s, color 0.12s;
}
.sidebar-footer-btn:hover { background: var(--border-subtle); color: var(--text-primary); }
.sidebar-footer-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-footer-btn.active { background: var(--border-subtle); color: var(--accent-light); }
.sidebar-footer-btn--danger { color: var(--error); }
.sidebar-footer-btn--danger:hover { background: rgba(248,113,113,0.08); color: var(--error); }
.sidebar-footer-btn.loading, .btn.loading { opacity: var(--opacity-muted); pointer-events: none; }
.sidebar-footer-btn.loading .icon, .btn.loading .icon { animation: spin var(--duration-spin) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SIDEBAR TOGGLE — maniglia a cavallo del bordo (validata 12 lug 2026) ──
   position:fixed la sfila dall'overflow:hidden della sidebar, così il
   semicerchio esterno resta visibile sopra il contenuto. */
.sidebar-toggle {
  position: fixed;
  top: 24px;
  left: calc(var(--sidebar-w) - var(--sidebar-handle-size) / 2);
  width: var(--sidebar-handle-size); height: var(--sidebar-handle-size);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-secondary); cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: calc(var(--z-sticky) + 1);
  transition: left 0.2s var(--ease-default), border-color 0.15s, color 0.15s;
}
.sidebar-toggle:hover { border-color: var(--accent); color: var(--text-heading); }
.sidebar-toggle svg { transition: transform 0.2s ease; flex-shrink: 0; }

/* ── SIDEBAR COLLAPSED STATE ── */
.sidebar { transition: width 0.2s var(--ease-default); overflow: hidden; }
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed + .main-wrapper { margin-left: var(--sidebar-w-collapsed); }
.sidebar-brand-text { transition: opacity 0.15s ease; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 20px 0 16px; gap: 0; }
/* Logo scala in collapsed (48px sidebar - 32px logo = 8px respiro per lato) */
.sidebar.collapsed .sidebar-logo { width: 32px; height: 32px; }
.sidebar.collapsed .sidebar-logo svg { width: 20px; height: 20px; }
.sidebar.collapsed .sidebar-brand-text { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-toggle { left: calc(var(--sidebar-w-collapsed) - var(--sidebar-handle-size) / 2); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: 10px 0; gap: 0; }
.sidebar.collapsed .sidebar-nav-item .nav-label { opacity: 0; pointer-events: none; width: 0; overflow: hidden; white-space: nowrap; }
.sidebar-nav-section-label {
  font-size: var(--nav-section-label-size);
  font-weight: var(--nav-section-label-weight);
  color: var(--nav-section-label-color);
  letter-spacing: var(--nav-section-label-tracking);
  text-transform: uppercase;
  padding: var(--nav-section-label-pad-y) var(--nav-section-label-pad-x);
  margin-top: var(--nav-section-label-gap-top);
  user-select: none;
}
.sidebar-nav-section-label:first-child { margin-top: 0; }
.sidebar.collapsed .sidebar-nav-section-label { opacity: 0; height: 0; padding: 0; margin: var(--space-3) 0 0; overflow: hidden; pointer-events: none; }
.sidebar.collapsed .sidebar-footer { padding: 10px 4px 14px; align-items: center; }
.sidebar.collapsed .sidebar-footer .last-update { display: none; }
.sidebar.collapsed .sidebar-footer-btn { justify-content: center !important; padding: 8px 0; gap: 0; width: 100%; }
.sidebar.collapsed .sidebar-footer-btn .nav-label,
.sidebar.collapsed .sidebar-footer-btn .btn-label { opacity: 0; pointer-events: none; width: 0; overflow: hidden; white-space: nowrap; }

/* ── MAIN WRAPPER ── */
.main-wrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px var(--gap-lg); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.header-title { min-width: 0; flex: 1; }
.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.last-update { font-size: 11px; color: var(--text-xdim); }

#main-content { padding: var(--gap-lg); flex: 1; }

/* ── TABS (tablet fallback: shown 641–768px) ── */
.tabs-wrap { display: none; margin-bottom: 20px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 16px; border-radius: var(--r-md); cursor: pointer; font-size: 13px;
  font-weight: 600; border: none; background: transparent; color: var(--text-dim);
  transition: all 0.15s; white-space: nowrap; position: relative;
}
.tab.active { background: var(--border-subtle); color: var(--text-primary); }
.tab[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--error); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-black);
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── ENTRANCE STAGGER (cambio tab) ── */
.rise-item {
  animation: rise-in var(--duration-slow) var(--ease-spring) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

/* ── BOTTOM NAV (mobile only, <640px) ── */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bottom-nav);
  background: var(--bg-surface); border-top: 1px solid var(--border-subtle);
  padding: 0 var(--space-2) env(safe-area-inset-bottom, 0);
}
.bottom-nav-inner { display: flex; height: 60px; align-items: stretch; }
.bottom-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 10px; font-weight: 600;
  padding: 0 2px; transition: color 0.12s; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bottom-tab .icon { width: 20px; height: 20px; flex-shrink: 0; }
.bottom-tab.active { color: var(--accent-light); }
.bottom-tab.active .icon { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),0.5)); }
.bottom-tab.active::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: var(--accent); border-radius: 0 0 2px 2px;
}
.bottom-tab[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: 6px; right: calc(50% - 18px);
  min-width: 15px; height: 15px; border-radius: var(--radius-full);
  background: var(--error); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-black);
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ── RESPONSIVE ── */

/* Desktop (>768px): sidebar + content. Header visibile per il greeting
   sopra hero; i bottoni Aggiorna/Esci vivono gia' nella sidebar-footer. */
@media (min-width: 769px) {
  .sidebar { display: flex; }
  .main-wrapper { margin-left: var(--sidebar-w); }
  .header-right { display: none; }
}

/* Tablet + mobile (<=768px): no sidebar, bottom-nav sempre fisso.
   Coerente: dove sparisce la sidebar deve apparire una navigazione
   equivalente. Il bottom-nav e' fixed, quindi resta visibile su scroll. */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-wrapper { margin-left: 0; }
  .tabs-wrap { display: none; }
  .bottom-nav { display: block; }
  #main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  #toast { bottom: 72px; }
  .header { margin-bottom: 0; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-row .kpi:last-child { grid-column: span 2; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .header { flex-wrap: wrap; gap: 8px; }
  .header-right .btn-label { display: none; }
}

/* ── GRIDS ── */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }

/* ── LOADING ── */
.loading { text-align: center; padding: 40px; color: var(--text-dim); font-size: 14px; }
.spinner {
  width: 32px; height: 32px; border: 2px solid var(--border);
  border-top-color: var(--purple); border-radius: 50%;
  animation: spin var(--duration-spin) linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--border);
  border: 1px solid var(--border-mid); border-radius: 10px; padding: 12px 18px;
  font-size: 13px; color: var(--text); opacity: 0; transform: translateY(8px);
  transition: all 0.25s; pointer-events: none; z-index: 999;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast .toast-check {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
  fill: none; stroke: var(--success); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
#toast .toast-check path {
  stroke-dasharray: 26;
  animation: check-draw var(--duration-slow) var(--ease-spring) 80ms backwards;
}
@keyframes check-draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #dashboard { padding: 12px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-row .kpi:last-child { grid-column: span 2; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .header { flex-wrap: wrap; gap: 8px; }
  .mov-search { width: 140px; }
  .bucket-name { min-width: 120px; }
  .inv-target { display: none; }
  .riepilogo-fiscale { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-value { font-size: var(--text-2xl); }
  .riepilogo-fiscale { grid-template-columns: 1fr; }
}