:root {
  color-scheme: light dark;
  /* Palette warm — Editorial Pro 2026-05-18.
     Tinta carta calda invece del grigio-blu freddo: il sito non era
     "povero", era senza temperatura. #fdfcf9 vs #fafafa cambia poco
     in stampa ma in light theme dà al fondo lo stesso registro
     visivo di un foglio Bloomberg / Sole 24 Ore. */
  --bg: #fdfcf9;
  --bg-elev: #ffffff;
  --fg: #0f172a;
  --fg-muted: #4a5468;
  --fg-subtle: #94a0b3;
  --border: #e8e3d5;
  --border-strong: #d4cdb8;
  --accent: #3b4f9e;
  --accent-hover: #2d3e80;
  --accent-soft: #eef0f9;
  /* --accent-2 / --accent-2-soft restano definiti per compat ma NON
     vengono più usati nella .security section (vedi note in stylesheet).
     Eliminarli del tutto romperebbe possibili usi futuri legittimi
     (es. badge "consulenza" verde, success state secondario). */
  --accent-2: #0a7857;
  --accent-2-soft: #ecf5f0;
  --surface-tint: #f6f3ec;
  --safe-bg: #d4f4dc; --safe-fg: #146d3c;
  --review-bg: #fcefc8; --review-fg: #a35e0e;
  --risk-bg: #fce0dc; --risk-fg: #a82a1f;
  --error: #a82a1f;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.06);
  /* shadow-paper: doppio layer (vicino-soft + lontano-indigo-tinted)
     emula la "ombra cartacea" che dà profondità senza che il foglio
     levitate troppo. Usata su .audience-card, .feature, .plan-card. */
  --shadow-paper:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(59, 79, 158, 0.07);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1424; --bg-elev: #151e30;
    --fg: #e6e9f2; --fg-muted: #9aa3b8; --fg-subtle: #6c768c;
    --border: #232d45; --border-strong: #2f3a55;
    --accent: #7c8de0; --accent-hover: #93a1e8;
    --accent-soft: #1d2647;
    --accent-2: #4ade94; --accent-2-soft: #122a23;
    --surface-tint: #131c33;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-md: 0 8px 22px rgba(0,0,0,0.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ======== TOP NAV ======== */
.topnav {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1.25rem;
}
.topnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  user-select: none;
}
.brand .dot { color: var(--accent); }
.nav-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
}
.nav-link {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}
.nav-link:hover { color: var(--fg); background: var(--accent-soft); }
.nav-cta {
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background 0.12s, color 0.12s;
}
.nav-cta:hover { background: var(--accent-soft); }
.nav-cta.primary { background: var(--accent); color: white; }
.nav-cta.primary:hover { background: var(--accent-hover); }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.user-chip button {
  background: none; border: none; color: var(--fg-muted);
  cursor: pointer; font-size: 0.85rem; padding: 0;
  text-decoration: underline; text-decoration-thickness: 1px;
}
.user-chip button:hover { color: var(--error); }

/* ======== LAYOUT CONTAINERS ======== */
main { flex: 1; padding: 0 1.5rem; }
.container { max-width: 1120px; margin: 0 auto; padding: 2.5rem 0; }
.container.narrow { max-width: 480px; padding-top: 4rem; }

/* ======== TYPOGRAPHY ======== */
h1 { font-size: 2.35rem; line-height: 1.15; margin: 0 0 1.1rem; letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.9rem; letter-spacing: -0.015em; font-weight: 600; }
h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 0.55rem; font-weight: 600; letter-spacing: -0.01em; }
.lead { color: var(--fg-muted); font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.7rem; max-width: 680px; font-weight: 400; }
.help { font-size: 0.88rem; color: var(--fg-muted); margin: 0 0 0.5rem; }

/* ============================================================
   EDITORIAL PRO HELPERS (2026-05-18)
   ============================================================
   .section-eyebrow      SMALL CAPS sopra h2 di ogni sezione landing,
                         dà ritmo "rivista finanziaria". Distinta dalla
                         .eyebrow pill usata nel hero (non sovrascrivere).
   .serif-accent         Source Serif 4 600 — usata sui 4 heading della
                         timeline how-it-works e sul titolo view-app.
                         Mai sul body: la leggibilità Inter resta sovrana.
   ============================================================ */
.section-eyebrow {
  display: block;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 0.7rem;
}
.serif-accent {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}
blockquote {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  color: var(--fg);
  margin: 1.2rem 0;
}

/* ======== LANDING ======== */
.hero {
  position: relative;
  padding: 5.5rem 0 4.5rem;
  border-bottom: 1px solid var(--border-strong);
  /* Editorial Pro 2026-05-18: gradient carta-su-carta verticale, più
     sobrio del diagonale-tinta-blu precedente. Lascia respirare. */
  background: linear-gradient(180deg, var(--surface-tint), var(--bg) 80%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { padding: 3.5rem 0 3rem; }
}
.hero-right { display: flex; flex-direction: column; gap: 1.25rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero h1 { font-size: 3rem; max-width: 640px; line-height: 1.1; letter-spacing: -0.03em; }
@media (max-width: 640px) { .hero h1 { font-size: 2rem; } }
.hero p.lead { font-size: 1.18rem; max-width: 580px; margin-bottom: 1.8rem; }
.hero-cta { display: inline-flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
.trust-line {
  margin-top: 1.5rem;
  color: var(--fg-subtle);
  font-size: 0.88rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
}
.trust-line span { display: inline-flex; align-items: center; gap: 0.35rem; }
.trust-line .dotmark { color: var(--accent); font-weight: 700; }

/* Hero mockup — animated before/after PII transformation */
.hero-mockup {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-md);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  position: relative;
}
.hero-mockup .mockup-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem; align-items: center;
  margin-bottom: 0.5rem;
}
.hero-mockup .mockup-row:last-child { margin-bottom: 0; }
.hero-mockup pre {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.hero-mockup .mockup-arrow {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}
.hero-mockup .mockup-tag { color: var(--accent); font-weight: 700; }
.hero-mockup .mockup-label {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

/* ======== HERO STATS (Editorial Pro 2026-05-18) ========
   3 stat sotto il mockup PII→tag. Numeri grandi serif, label sopra
   in SMALL CAPS Inter, descrizione sotto in body Inter. Sostituisce
   il "vuoto compositivo" che faceva sembrare l'hero sguarnito. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
@media (max-width: 540px) {
  .hero-stats { grid-template-columns: 1fr; }
}
.hero-stat {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
@media (max-width: 540px) {
  .hero-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-stat:last-child { border-bottom: none; }
}
.hero-stat .stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin-bottom: 0.25rem;
}
.hero-stat .stat-value {
  display: block;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.hero-stat .stat-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-muted);
  line-height: 1.35;
}

/* Drop cap rimosso 2026-05-18 su feedback utente: la "I" iniziale
   tinta indigo distoglieva l'attenzione dall'headline. Tutto il
   titolo resta in Inter, color --fg, peso 700. */

/* ======== TRUST STRIP (Editorial Pro 2026-05-18) ========
   Riga sottile con 4 metriche reali, separatori middot, sopra
   l'audience. Sostituisce "loghi placeholder" coi numeri veri
   che il prodotto genera. Riga calma, no card, no shadow. */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 1.2rem 0;
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.6rem;
  padding: 0;
  font-size: 0.92rem;
  color: var(--fg-muted);
  text-align: center;
}
.trust-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}
.trust-item strong {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.trust-sep {
  color: var(--fg-subtle);
  font-weight: 400;
}
@media (max-width: 720px) {
  .trust-strip .container { gap: 0.6rem 1.1rem; font-size: 0.85rem; }
  .trust-sep { display: none; }
}

/* ======== AUDIENCE / "PER CHI" ========
   Editorial Pro 2026-05-18: counter "01. 02. 03." in alto a sinistra
   di ogni card, font display Source Serif 4 700, color indigo. Dà
   alle card l'impronta "rivista-numerata" senza appesantire. */
.audience {
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
  counter-reset: audience;
}
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.85rem 1.6rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  counter-increment: audience;
  box-shadow: var(--shadow-paper);
}
.audience-card::before {
  content: counter(audience, decimal-leading-zero) ".";
  display: block;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 0.85rem;
}
.audience-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 36px rgba(59, 79, 158, 0.12);
  border-color: var(--accent);
}
.audience-card .icon {
  width: 32px; height: 32px;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.audience-card h3 { margin: 0 0 0.5rem; }
.audience-card ul {
  margin: 0; padding: 0 0 0 1.1rem;
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.audience-card li { margin-bottom: 0.25rem; }

/* ======== FEATURES (6 card) ======== */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 3.5rem 0 1.5rem;
}
@media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.65rem 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--shadow-paper);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 36px rgba(59, 79, 158, 0.12);
  border-color: var(--accent);
}
.feature .feature-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.feature .feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.feature p { color: var(--fg-muted); margin: 0; font-size: 0.95rem; }

/* ======== SECURITY SECTION (GDPR & sicurezza) ========
   Editorial Pro 2026-05-18: rimosso il gradient verde menta
   (--accent-2-soft) che spezzava la palette indigo del resto del
   sito. Ora la sezione vive su una tinta indigo soft (carta-blu),
   con un border-left indigo "marker editoriale" sul container che
   fa da ancora visiva ("questa è la zona trust"). Icone outline
   indigo coerenti con tutto il resto. */
.security {
  padding: 5rem 0 4.5rem;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: var(--accent-soft);
}
.security .container {
  position: relative;
}
.security .container::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
@media (max-width: 880px) {
  .security .container::before { left: -0.6rem; }
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
@media (max-width: 760px) { .security-grid { grid-template-columns: 1fr; } }
.security-item {
  display: flex; gap: 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-paper);
}
.security-item .icon {
  width: 30px; height: 30px; flex-shrink: 0;
  color: var(--accent);
}
.security-item h3 { margin: 0 0 0.3rem; }
.security-item p { margin: 0; font-size: 0.9rem; color: var(--fg-muted); }
.security-cta {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--fg-muted);
}
.security-cta a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease;
}
.security-cta a:hover { border-bottom-color: var(--accent); }

.how-it-works {
  padding: 4.5rem 0 5rem;
  border-top: 1px solid var(--border-strong);
}
/* ======== HOW-IT-WORKS TIMELINE (Editorial Pro 2026-05-18) ========
   Da grid 4-col flat a timeline verticale: linea indigo 2px a sinistra,
   ogni step ha un dot indigo cerchiato bianco posizionato sulla linea.
   Heading step in Source Serif 4 (gli unici h3-equivalenti serif del
   sito, oltre al titolo view-app). Più lettura "editoriale", meno
   "feature grid". */
.how-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 2rem 0 0;
  position: relative;
  max-width: 760px;
}
.how-list::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    var(--accent) 96%,
    transparent 100%);
}
.how-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 2.2rem 3rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.how-list li:last-child { padding-bottom: 0; }
.how-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  letter-spacing: -0.01em;
}
.how-list li b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.how-list li code {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ======== PRICING ======== */
.pricing {
  padding: 4.5rem 0;
  border-top: 1px solid var(--border);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 36px rgba(59, 79, 158, 0.10);
}
.plan-card.featured {
  border-color: var(--accent);
  border-top: 3px solid var(--accent);
  padding-top: 1.7rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 22px 44px rgba(59, 79, 158, 0.18);
  position: relative;
}
.plan-card.featured::before {
  content: "Più scelto";
  position: absolute; top: -0.75rem; right: 1rem;
  background: var(--accent); color: white;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.18rem;
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 600;
}
.plan-tagline { color: var(--fg-muted); font-size: 0.88rem; margin: 0 0 0.85rem; min-height: 2.4rem; }
.plan-price {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
}
.plan-price .per { font-size: 0.85rem; font-weight: 400; color: var(--fg-muted); font-family: "Inter", sans-serif; }
.plan-price-yearly { font-size: 0.82rem; color: var(--fg-subtle); margin: 0.3rem 0 1rem; }
.plan-features {
  list-style: none; padding: 0; margin: 0 0 1.2rem;
  font-size: 0.9rem;
}
.plan-features li {
  padding-left: 1.3rem;
  position: relative;
  margin-bottom: 0.35rem;
  color: var(--fg-muted);
}
.plan-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan-cta { margin-top: auto; }
.plan-cta button { width: 100%; }
.pricing-fallback {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--fg-muted);
}

/* ======== CARDS / FORMS ======== */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.card.elevated { box-shadow: var(--shadow-md); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; } }

label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="file"], textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--fg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(59, 79, 158, 0.12);
  transition: border-color 0.16s ease, box-shadow 0.18s ease;
}
textarea {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88rem;
  min-height: 140px;
  resize: vertical;
}

button {
  font-family: inherit;
}
button.primary, button.secondary {
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.16s ease, border-color 0.16s ease,
              transform 0.12s ease, box-shadow 0.16s ease;
}
button.primary {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(59, 79, 158, 0.18);
}
button.primary:active:not(:disabled) { transform: translateY(0); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
button.secondary:hover:not(:disabled) { background: var(--accent-soft); }
button.secondary:disabled { opacity: 0.5; cursor: not-allowed; }
button.large { padding: 0.95rem 1.8rem; font-size: 1.05rem; border-radius: 12px; }

.button-row {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.checkbox-row {
  display: flex; align-items: center;
  gap: 0.5rem; margin: 0.65rem 0; font-size: 0.9rem;
}
.checkbox-row input { width: auto; }
.checkbox-row label { font-weight: 400; margin: 0; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge.SAFE { background: var(--safe-bg); color: var(--safe-fg); }
.badge.REVIEW { background: var(--review-bg); color: var(--review-fg); }
.badge.RISK { background: var(--risk-bg); color: var(--risk-fg); }

pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(15, 23, 42, 0.04);
  padding: 0.75rem;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  pre { background: rgba(255,255,255,0.04); }
}

/* ============================================================
   EDITOR DOCUMENTO (Fase 1, 2026-05-28)
   #out-text resta un <pre> (monospace, pre-wrap) ma ora contiene token:
   literal (testo selezionabile) + tag-chip (atomici, rimovibili). I chip
   sono inline-flex così non rompono il flusso pre-wrap e il markup
   <<<...>>> non è mai editabile carattere-per-carattere (impossibile
   romperlo). Le correzioni vanno a /retag.
   ============================================================ */
#out-text.editor-mode { cursor: text; }
.ed-lit { white-space: pre-wrap; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: baseline;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0 0.15rem 0 0.4rem;
  margin: 0 1px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  user-select: none;
}
.tag-chip-label { letter-spacing: 0.01em; overflow-wrap: anywhere; }
.tag-chip-valued { max-width: 100%; }
.tag-chip-x {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  opacity: 0.6;
}
.tag-chip-x:hover { opacity: 1; background: var(--risk-bg); color: var(--risk-fg); }

.ed-add-popover {
  position: absolute;
  z-index: 9999;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 320px;
}
.ed-add-popover .ed-pop-title {
  width: 100%;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 0.15rem;
}
.ed-add-popover button {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.ed-add-popover button:hover { background: var(--accent); color: #fff; }

.entities-editor-hint { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--fg-muted); }

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}
.editor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--fg-muted);
  font-weight: 600;
}
.editor-toolbar-hint { color: var(--fg-subtle); font-size: 0.78rem; }

/* Area admin (FASE 2) */
.admin-stats-box { margin: 0.75rem 0; }
.admin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0 1rem;
}
.admin-controls select { margin-left: 0.4rem; }

.error {
  color: var(--error);
  font-size: 0.9rem;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: var(--risk-bg);
  border-radius: 6px;
}
.warn {
  color: var(--review-fg);
  font-size: 0.85rem;
  padding: 0.55rem 0.75rem;
  background: var(--review-bg);
  border-radius: 6px;
  margin-top: 0.6rem;
}
.warn-error {
  color: var(--risk-fg);
  background: var(--risk-bg);
}
.hidden { display: none !important; }

/* ======== BUSY STATE (long-running pipeline operations) ========
   Visual feedback for actions that may take several minutes
   (LLM extraction on long documents hitting Groq TPM limits).
   The persistent banner + button label change together prevent
   the "no feedback = looks frozen" UX failure documented as
   EX-03 in docs/failure_ledger.md. */
.busy-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: busy-spin 0.8s linear infinite;
}
@keyframes busy-spin {
  to { transform: rotate(360deg); }
}
button:disabled,
button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.busy-banner {
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: #eef4ff;
  border: 1px solid #b6cdf5;
  border-radius: 6px;
  color: #1a3b7a;
  font-size: 0.92rem;
  line-height: 1.4;
}
.busy-banner .busy-spinner {
  border-color: rgba(26, 59, 122, 0.25);
  border-top-color: #1a3b7a;
}
.busy-banner b { color: #0f2a5c; }

/* ======== RESTORED-TEXT HIGHLIGHTS ========
   Two-tone scheme matching the broader UI:
   - .tag-unresolved (amber) = well-formed segnaposto missing in mapping;
     the AI invented something that looks like a tag but doesn't exist.
   - .tag-broken (red) = segnaposto whose shape is wrong; the AI
     altered an existing tag (most dangerous case — silent loss). */
.restored-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,0.04);
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  max-height: 360px;
  overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  .restored-text { background: rgba(255,255,255,0.04); }
}
.tag-unresolved {
  background: var(--review-bg);
  color: var(--review-fg);
  padding: 0 0.25rem;
  border-radius: 3px;
  border: 1px dashed var(--review-fg);
  cursor: help;
}
.tag-broken {
  background: var(--risk-bg);
  color: var(--risk-fg);
  padding: 0 0.25rem;
  border-radius: 3px;
  border: 1px solid var(--risk-fg);
  cursor: help;
  font-weight: 700;
}

/* Drag-over visual cue on the restore textarea. */
textarea.dragover {
  border-color: var(--accent);
  border-style: dashed;
  background: rgba(30, 64, 175, 0.06);
}

/* ======== LEGAL & STATIC PAGES ========
   Pagine "informative" (privacy, cookie, terms, subprocessor,
   security, contatti). Tipografia leggermente diversa dal resto
   dell'app: text più largo, lead più scuro, tabelle leggibili,
   stampa-friendly. */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  line-height: 1.65;
}
.legal-page h1 {
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.legal-page h2 {
  font-size: 1.15rem;
  margin: 1.8rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.legal-page h3 {
  font-size: 0.98rem;
  margin: 1.1rem 0 0.4rem;
  color: var(--fg);
}
.legal-page p, .legal-page li { font-size: 0.95rem; }
.legal-page ul, .legal-page ol { padding-left: 1.4rem; }
.legal-page li { margin-bottom: 0.3rem; }
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.2rem;
  font-size: 0.85rem;
}
.legal-page th, .legal-page td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
}
.legal-page th {
  background: rgba(0,0,0,0.03);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .legal-page th { background: rgba(255,255,255,0.04); }
}
.legal-page .lead {
  color: var(--fg-subtle);
  font-size: 1rem;
  margin: 0.4rem 0 1.5rem;
}
.legal-page .updated {
  color: var(--fg-subtle);
  font-size: 0.8rem;
  margin: 2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.legal-draft-banner {
  background: var(--review-bg);
  color: var(--review-fg);
  border: 1px solid var(--review-fg);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
}
.legal-draft-banner b { display: block; margin-bottom: 0.2rem; font-size: 0.95rem; }
.legal-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  margin: 0.5rem 0 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.legal-meta dt { color: var(--fg-subtle); font-weight: 600; margin: 0; }
.legal-meta dd { margin: 0; word-break: break-word; }

/* Print: nascondi nav/footer, ottimizza tipografia. Avvocati e
   responsabili compliance vorranno stampare le pagine legali. */
@media print {
  nav.topnav, footer { display: none !important; }
  body { background: white; color: black; }
  .legal-page {
    max-width: none; padding: 0;
    font-size: 11pt; line-height: 1.45;
  }
  .legal-page h1 { font-size: 18pt; }
  .legal-page h2 { font-size: 13pt; border-bottom-color: #888; }
  .legal-page table { font-size: 10pt; }
  .legal-draft-banner { border: 1px solid #b54708; }
  a { color: black; text-decoration: underline; }
}

/* Footer expanded: link legali + brand. */
footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  text-align: left;
}
@media (max-width: 720px) { footer .footer-cols { grid-template-columns: 1fr; gap: 1rem; } }
footer .footer-col h4 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
footer .footer-col li { margin-bottom: 0.3rem; }
footer .footer-col a { color: var(--fg-muted); text-decoration: none; font-size: 0.88rem; }
footer .footer-col a:hover { color: var(--accent); }
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  justify-content: center;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}
footer .footer-links a {
  color: var(--fg-muted);
  text-decoration: none;
}
footer .footer-links a:hover { color: var(--accent); }
footer .footer-brand {
  color: var(--fg-subtle);
  font-size: 0.82rem;
}

/* ======== FOOTER ======== */
footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 0.85rem;
  margin-top: 3rem;
}
footer a { color: var(--fg-muted); text-decoration: none; }
footer a:hover { color: var(--accent); }
/* Bundle (multi-file) UI — Week 3 Step 2 */
.bundle-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.bundle-dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.bundle-dropzone p { margin: 0.3rem 0; }
.bundle-file-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--fg);
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}
.bundle-file-row.done  { background: var(--safe-bg); color: var(--safe-fg); }
.bundle-file-row.error { background: var(--risk-bg); color: var(--risk-fg); }
.bundle-file-row .bundle-file-rm {
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1;
}
#bundle-progress-files {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
}
#bundle-progress-files li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-soft, #eee);
}
#bundle-progress-files li:last-child { border-bottom: none; }
.bundle-result-file {
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.bundle-result-file pre {
  max-height: 120px;
  overflow: auto;
  font-size: 0.78rem;
  margin: 0.4rem 0 0;
  padding: 0.4rem;
  background: var(--accent-soft);
  color: var(--fg);
  border-radius: 3px;
}

/* Step 5 — I miei documenti + privacy banner */
.privacy-banner {
  background: var(--accent-soft);
  color: var(--fg);
  border-left: 4px solid var(--accent);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
}
.privacy-banner b { color: var(--accent); }

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.docs-table th, .docs-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.docs-table th {
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.docs-table tbody tr:hover { background: var(--accent-soft); }
.docs-table .doc-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}
.docs-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.docs-actions button {
  padding: 0.25rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.2;
}
.badge-retention {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-retention.active   { background: var(--safe-bg);   color: var(--safe-fg); }
.badge-retention.warn     { background: var(--review-bg); color: var(--review-fg); }
.badge-retention.expired  { background: var(--risk-bg);   color: var(--risk-fg); }
.docs-empty {
  padding: 1rem;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* ======== AUTH FORMS (signup / verify / forgot / reset) ======== */
.auth-card {
  max-width: 440px;
  margin: 3rem auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
}
.auth-card h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
.auth-card .lead { font-size: 0.95rem; margin: 0 0 1.25rem; }
.auth-card label { margin-top: 0.85rem; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card .button-row { margin-top: 1.2rem; }
.auth-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--fg-muted);
  text-align: center;
}
.auth-foot a { color: var(--accent); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.password-strength {
  font-size: 0.78rem;
  margin-top: 0.3rem;
  color: var(--fg-subtle);
}
.password-strength.weak { color: var(--risk-fg); }
.password-strength.medium { color: var(--review-fg); }
.password-strength.strong { color: var(--safe-fg); }
.success-banner {
  background: var(--safe-bg);
  color: var(--safe-fg);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0;
  font-size: 0.92rem;
}

/* ======== DASHBOARD (account view) ========
   Editorial Pro 2026-05-18: dashboard cards ricevono shadow-paper e
   border-strong per coerenza con landing. Heading h2 esistono già in
   HTML — aggiungo helper .dash-eyebrow su .card per la riga SMALL
   CAPS sopra al titolo (uso opzionale, applicato via index.html). */
.dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
#view-dashboard .card,
#view-app .card {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-paper);
}
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }
.usage-gauge {
  margin: 0.5rem 0;
}
.usage-gauge .gauge-track {
  height: 12px;
  background: var(--accent-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.usage-gauge .gauge-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s;
}
.usage-gauge .gauge-fill.warn { background: var(--review-fg); }
.usage-gauge .gauge-fill.risk { background: var(--risk-fg); }
.usage-gauge .gauge-label {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-top: 0.35rem;
  display: flex; justify-content: space-between;
}
.trial-banner {
  background: var(--review-bg);
  color: var(--review-fg);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.dash-stat {
  display: flex; justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.dash-stat:last-child { border-bottom: none; }
.dash-stat .label { color: var(--fg-muted); }
.dash-stat .value { font-weight: 600; }

/* ======== HELP TIP (contextual help popover) ======== */
.help-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.4rem;
  cursor: help;
  border: 1px solid transparent;
  padding: 0;
  font-family: inherit;
  vertical-align: -0.15em;
  user-select: none;
}
.help-tip-trigger:hover,
.help-tip-trigger:focus-visible {
  background: var(--accent);
  color: white;
  outline: none;
}
.help-tip-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px var(--accent);
}
.help-tip-popover {
  position: absolute;
  z-index: 1000;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  max-width: 320px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.help-tip-popover h4 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--accent);
}
.help-tip-popover p { margin: 0 0 0.5rem; color: var(--fg-muted); }
.help-tip-popover p:last-child { margin-bottom: 0; }
.help-tip-popover a {
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: none;
}
.help-tip-popover a:hover { text-decoration: underline; }

/* ======== MICROINTERAZIONI ========
   Reveal-on-scroll: elementi marcati .reveal partono invisibili,
   diventano .reveal.visible quando l'IntersectionObserver li intercetta.
   Riduce il "tutto-subito" della landing senza appesantire (zero dep).
   Rispettiamo prefers-reduced-motion: utenti che hanno disabilitato
   le animazioni vedono tutto già renderizzato. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Stagger delay tra card sorelle: la 1° appare subito, le altre +80ms l'una.
   Limita a 6 card per evitare attese fastidiose su sezioni molto lunghe. */
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }

/* ======== ENTITIES TABLE + FEEDBACK (Fase B mining) ========
   Compattata 2026-05-18 su feedback utente: padding minimo, font
   piccolo ma leggibile, badge stretti. Su un atto legale tipo si
   passa da ~50 a ~30 righe di altezza visuale.
*/
.entities-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  line-height: 1.35;
}
.entities-table th, .entities-table td {
  padding: 0.28rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.entities-table th {
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
}
.entities-table tbody tr:hover { background: var(--accent-soft); }
.entities-table .entity-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  word-break: break-word;
  color: var(--fg);
}
.entities-table .entity-score,
.entities-table .entity-src {
  color: var(--fg-muted);
  font-size: 0.76rem;
  white-space: nowrap;
}
.entities-table .badge-pii {
  font-size: 0.66rem;
  padding: 0.1rem 0.45rem;
}

/* Cella conteggio occorrenze (vista "Uniche") */
.entities-table .entity-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--fg-subtle);
  text-align: right;
  white-space: nowrap;
  min-width: 2.4rem;
}
.entities-table .entity-count-multi {
  color: var(--accent);
  font-weight: 700;
}

/* Toolbar sopra la tabella entità — riscritta 2026-05-18 per non
   produrre spazi verticali quando va a capo. Tutto su una riga,
   line-height stretto, gap orizzontale piccolo. */
.entities-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
  line-height: 1;
}
.entities-toolbar-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-right: 0.25rem;
}
.entities-dup-hint {
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-left: 0.3rem;
}
.entities-table-wrap {
  /* Niente scroll interno (2026-05-22): out-entities non è più un <pre>
     con overflow, quindi una sola scrollbar (quella di pagina). Evita le
     "2 scrollbar annidate" che confondevano l'utente. */
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ent-mode-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ent-mode-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.ent-mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ent-mode-btn.active:hover { background: var(--accent-hover); }

/* Legenda confidenza — riga singola, sidenote.
   Riscritta 2026-05-18: ogni "item" (badge + numero + nota) è un
   .legend-item atomico in inline-block con white-space: nowrap. In
   questo modo il browser può solo andare a capo TRA gli item, mai
   spezzare un item al suo interno (era il bug: ALTA e 13 finivano
   su righe diverse perché il flex parent rompeva tra span e text). */
.confidence-legend {
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
.confidence-legend .legend-item {
  display: inline-block;
  margin-right: 0.9rem;
  white-space: nowrap;
}
.confidence-legend .legend-item:last-child { margin-right: 0; }
.confidence-legend i {
  font-style: normal;
  color: var(--fg-subtle);
  font-size: 0.72rem;
  margin-left: 0.15rem;
}
.confidence-legend .conf-badge { vertical-align: 1px; }

/* FN form collassabile.
   Default: solo riga summary visibile. Aperto: contesto breve +
   riga inline input/select/button. */
.fn-form-details {
  /* Stacco visivo netto dalla tabella (2026-05-22): margine ampio +
     bordo, e quando aperto bordo indigo + ombra → diventa chiaramente
     una sezione a sé, leggibile, non "incastrata" sotto la tabella. */
  margin-top: 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fn-form-details[open] {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(59, 79, 158, 0.12);
}
.fn-form-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fg);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.3;
}
.fn-form-details[open] > summary { background: var(--accent-soft); }
.fn-form-details > summary::-webkit-details-marker { display: none; }
.fn-form-details > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  width: 0.8rem;
  transition: transform 0.15s ease;
}
.fn-form-details[open] > summary::before { transform: rotate(90deg); }
.fn-form-details > summary:hover { background: rgba(59, 79, 158, 0.04); }
.fn-form-details[open] > summary {
  border-bottom: 1px solid var(--border);
}
/* FN form — layout a 2 righe leggibile (rivisto 2026-05-22):
   label + input full-width, poi select + button. Più respiro del
   single-row precedente che risultava schiacciato. */
.fn-form-body {
  padding: 0.8rem 0.9rem 0.9rem;
}
.fn-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin: 0 0 0.3rem;
}
.fn-form-body .fn-text {
  width: 100%;
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.92rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--fg);
}
.fn-form-row2 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.fn-form-row2 .fn-type {
  flex: 1 1 240px;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--fg);
}
.fn-form-row2 .fn-submit {
  flex: 0 0 auto;
  padding: 0.55rem 1.2rem !important;
}
.fn-feedback {
  margin: 0.6rem 0 0;
  min-height: 0;
  font-size: 0.85rem;
}
.fn-feedback:empty { display: none; }

/* ======== LEAK HIGHLIGHT nel testo anonimizzato (2026-05-22) ========
   <mark class="leak-highlight"> wrappato dal frontend agli offset degli
   issues kind=leaked_pii. L'utente vede ESATTAMENTE dove sono i 30 leak
   segnalati nel riassunto qualità, e può giudicare/segnalare. */
mark.leak-highlight {
  background: var(--risk-bg);
  color: var(--risk-fg);
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: underline wavy var(--risk-fg);
  text-underline-offset: 2px;
}

/* ======== UNSAFE OUTPUT BANNER (2026-05-22) ========
   Compare sopra l'output anonimizzato quando il SafeGate ha bloccato
   l'USO (gate.allowed=False). Il testo è comunque mostrato per
   consentire la revisione/segnalazione umana; il banner ricorda
   all'utente di NON usarlo prima di aver verificato. */
.unsafe-banner {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--risk-bg);
  color: var(--risk-fg);
  border: 1px solid var(--risk-fg);
  border-left: 4px solid var(--risk-fg);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.unsafe-banner > b:first-child {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}
.unsafe-banner .unsafe-banner-reason {
  font-style: italic;
  margin-bottom: 0.4rem;
  opacity: 0.95;
}
.unsafe-banner .unsafe-banner-hint {
  font-size: 0.85rem;
  background: rgba(168, 42, 31, 0.06);
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
}

/* ======== QUALITY SUMMARY (riassunto leggibile, 2026-05-22) ======== */
.quality-box { font-size: 0.9rem; }
.quality-box .quality-ok {
  margin: 0;
  color: var(--safe-fg);
  font-weight: 600;
}
.quality-summary {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quality-summary li {
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
.quality-summary li:last-child { margin-bottom: 0; }
.quality-summary .quality-alert {
  background: var(--risk-bg);
  color: var(--risk-fg);
}
.quality-summary .quality-note {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.quality-raw {
  margin-top: 0.6rem;
  font-size: 0.8rem;
}
.quality-raw summary { cursor: pointer; color: var(--fg-subtle); }
.quality-raw pre {
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  max-height: 240px;
  overflow: auto;
}

/* ======== TOAST non-bloccante (2026-05-22) ======== */
#velarion-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  background: var(--fg);
  color: var(--bg-elev);
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2000;
}
#velarion-toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#velarion-toast.toast-ok { background: var(--safe-fg); color: #fff; }
#velarion-toast.toast-err { background: var(--risk-fg); color: #fff; }

/* Admin mode (display-only): ?admin=1 in URL o localStorage flag.
   Espone il source breakdown e la colonna Fonte nella tabella.
   Visivamente discreto (banda micro indigo) per non sembrare un
   pulsante / un errore. */
.admin-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  text-transform: uppercase;
  user-select: none;
  cursor: help;
}
.admin-stats {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.admin-stats-label {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.2rem;
}
.admin-stat-item {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  background: var(--accent-soft);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.admin-stat-item b { color: var(--accent); }

/* ======== CONFIDENCE BADGES (2026-05-18) ========
   Tre soglie di colore sul score di estrazione, derivate dal GLiNER
   score (0..1) — i regex Tier 1 non hanno score, ricevono badge neutro
   "deterministico" che comunica "validato via checksum / pattern".

   Soglie scelte sulla scorta dell'eval suite 13-case:
   - >= 0.8  → alta (verde safe-bg): di solito coincide con identità
                strutturate (CF, IBAN) o nomi propri in posizioni canoniche
   - 0.6-0.8 → media (giallo review-bg): consigliato controllo umano
   - < 0.6   → bassa (rosso risk-bg): probabile FP o entità ambigua
   - none    → tag deterministico (regex), neutro */
.conf-badge {
  display: inline-block;
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  vertical-align: 1px;
}
.conf-badge.conf-hi   { background: var(--safe-bg);   color: var(--safe-fg); }
.conf-badge.conf-mid  { background: var(--review-bg); color: var(--review-fg); }
.conf-badge.conf-lo   { background: var(--risk-bg);   color: var(--risk-fg); }
.conf-badge.conf-na   {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.entities-table tr.row-conf-lo { background: rgba(168, 42, 31, 0.04); }
.entities-table tr.row-conf-lo:hover { background: rgba(168, 42, 31, 0.08); }
.entities-table tr.row-conf-mid { background: rgba(163, 94, 14, 0.03); }
.entities-table tr.row-conf-mid:hover { background: rgba(163, 94, 14, 0.07); }
.entity-score-num {
  color: var(--fg-subtle);
  font-size: 0.72rem;
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.badge-pii {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Bottone "Da verificare" — semantica review/uncertainty (non
   accusatoria). Sobrio, testuale, niente emoji né colori d'allarme.
   Filosofia UX: l'utente segnala un dubbio per revisione, non un
   "errore del sistema". Sull'hover diventa indigo filled per dare
   affordance di click. */
.fp-btn {
  padding: 0.15rem 0.6rem !important;
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
  border-radius: 999px !important;
  min-width: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fp-btn:hover:not(:disabled) {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.fn-submit {
  padding: 0.4rem 0.9rem !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
}
.fn-form select, .fn-form input[type="text"] {
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  border-radius: 6px;
}

/* Pulsante "press": leggero shrink al click — feedback fisico */
button.primary:active:not(:disabled),
button.secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

/* Output anonimizzato: header con score "Qualità" inline a destra
   (FASE UX 2026-06-03 — sostituisce la card "Qualità detection" affiancata.
   La card output ora occupa l'intera larghezza della pagina). */
.card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.score-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--fg-muted);
}
.score-inline #out-score {
  font-weight: 600;
  color: var(--fg);
}