/* ============================================================
   ChatDNA — global styles
   Design tokens estratti da ui-reference/styles.css (palette mint default)
   ============================================================ */

:root {
  --paper:        oklch(0.98 0.012 130);
  --paper-2:      oklch(0.96 0.022 145);
  --ink:          oklch(0.18 0.025 180);
  --ink-2:        oklch(0.32 0.025 180);
  --muted:        oklch(0.55 0.02 180);
  --line:         oklch(0.88 0.02 160);
  --primary:      oklch(0.74 0.16 162);
  --primary-deep: oklch(0.52 0.14 165);
  --primary-soft: oklch(0.92 0.08 162);
  --accent:       oklch(0.78 0.18 90);
  --accent-2:     oklch(0.72 0.21 25);
  --accent-3:     oklch(0.74 0.18 305);
  --shadow:       0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.18);

  /* Superficie scura "drammatica" + testo: resta scuro/chiaro in OGNI tema
     (i temi scuri la ridefiniscono a un valore scuro adatto alla loro palette). */
  --invert-bg: var(--ink);
  --invert-fg: var(--paper);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }
input, select, textarea { font-family: inherit; }

/* Typography helpers */
.font-display { font-family: "Bricolage Grotesque", "Geist", sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.font-mono { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; }

h1, h2, h3 { font-family: "Bricolage Grotesque", "Geist", sans-serif; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 44px; line-height: 1.05; }
h2 { font-size: 30px; line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.15; }
p { margin: 0; }

.bubble-underline {
  background-image: linear-gradient(transparent 65%, var(--accent) 65% 90%, transparent 90%);
  background-repeat: no-repeat;
}

/* ============================================================
   Reusable components
   ============================================================ */

.bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.35;
  max-width: 360px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.bubble.them { border-bottom-left-radius: 4px; }
.bubble.me   { background: var(--primary); border-bottom-right-radius: 4px; }
.bubble.alt  { background: var(--accent); }
.bubble.alt2 { background: var(--accent-3); }
.bubble .name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.sticker.solid   { background: var(--ink); color: var(--paper); }
.sticker.primary { background: var(--primary); }
.sticker.accent  { background: var(--accent); }
.sticker.accent-2{ background: var(--accent-2); color: var(--paper); }
.sticker.accent-3{ background: var(--accent-3); }
.sticker.danger  { background: var(--accent-2); color: var(--paper); }

.card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 20px;
}
.card.flat { box-shadow: none; background: var(--paper); }
.card.primary-bg { background: var(--primary-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 100px;
  border: 1.5px solid var(--ink);
  background: var(--primary);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 80ms ease, box-shadow 80ms ease;
  text-decoration: none;
  text-align: center;
}
.btn:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--ink); }

/* Click "pop" sui report-tile + reveal-on-scroll generico */
.report-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Prefer-reduced-motion: disabilita animation, drift, marquee */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .floating-sticker { animation: none !important; }
  .marquee-track { animation: none !important; }
  .phone-card .stream-row { animation: none !important; }
  .typing-dots span { animation: none !important; opacity: 0.6; }
}
.btn.ghost { background: var(--paper); }
.btn.dark  { background: var(--ink); color: var(--paper); }
.btn-apple { background: var(--ink); color: var(--paper); margin-top: 10px; }
.btn .provider-logo { flex: 0 0 auto; display: block; }
.btn.small { padding: 8px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.btn.block { width: 100%; }

/* Animations */
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.typing-dots span {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 100%;
  background: currentColor;
  margin: 0 2px;
  animation: typingDot 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.confetti-bg {
  background-image:
    radial-gradient(var(--accent) 2px, transparent 2px),
    radial-gradient(var(--primary) 2px, transparent 2px),
    radial-gradient(var(--accent-3) 2px, transparent 2px);
  background-size: 28px 28px, 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px, 7px 21px;
}

/* ============================================================
   Layout app
   ============================================================ */

.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--line);
}
.app-nav .brand {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.app-nav .brand .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
  border-radius: 100%;
  margin-right: 6px;
  vertical-align: middle;
}
.app-nav .user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.section { margin-bottom: 48px; }
.section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.section-title h2 { font-size: 26px; }
.section-title .hint { color: var(--muted); font-size: 14px; }

/* Login */
.login-screen {
  max-width: 420px;
  margin: 64px auto;
  text-align: center;
}
.login-screen h1 { font-size: 56px; margin-bottom: 12px; }
.login-screen p.lead { color: var(--muted); margin-bottom: 32px; font-size: 17px; }
.login-screen .card { padding: 32px; }
.login-screen .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-screen .divider::before,
.login-screen .divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--line);
}
.login-screen input[type=email] {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 15px;
  margin-bottom: 12px;
}
.login-screen input[type=email]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Upload / dropzone */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  border: 2.5px dashed var(--ink);
  border-radius: 20px;
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  transition: background 120ms;
  position: relative;
}
.dropzone:hover { background: var(--primary-soft); }
.dropzone.is-drag { background: var(--primary-soft); border-style: solid; }
.dropzone .big-emoji { font-size: 48px; margin-bottom: 12px; }
.dropzone h3 { margin-bottom: 8px; }
.dropzone p { color: var(--muted); margin-bottom: 16px; }
.dropzone input[type=file] { display: none; }

/* Preview stats */
.preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.preview-stats .stat-cell {
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.preview-stats .stat-cell .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.preview-stats .stat-cell .value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
}

/* Selezione report type */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.report-card-option {
  position: relative;
  text-align: left;
  padding: 20px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 80ms;
  font: inherit;
  color: inherit;
}
.report-card-option:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.report-card-option .emoji { font-size: 32px; line-height: 1; margin-bottom: 12px; }
.report-card-option .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; margin-bottom: 6px; }
.report-card-option .desc  { font-size: 14px; color: var(--muted); line-height: 1.5; }
.report-card-option.selected { background: var(--primary-soft); }

/* Capsula email field */
.capsule-email-block {
  margin-top: 16px;
  padding: 16px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
}
.capsule-email-block input[type=email] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 15px;
  margin-top: 8px;
}

/* Loading */
.loading-screen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.loading-screen .typing-dots {
  font-size: 48px;
  color: var(--primary-deep);
}
.loading-screen .loading-text {
  font-size: 18px;
  color: var(--muted);
  text-align: center;
  max-width: 360px;
}

/* Dashboard */
.dashboard-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dashboard-item {
  padding: 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.dashboard-item .participants {
  font-size: 14px;
  color: var(--ink-2);
}
.dashboard-item .countdown {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.dashboard-item .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Report view */
.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
}
.report-toolbar .share-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--muted);
  background: var(--paper);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

#report-root { max-width: 880px; margin: 0 auto; }

.report-hero {
  text-align: center;
  padding: 32px 16px;
  margin-bottom: 24px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
}
.report-hero .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.report-hero h1 { font-size: 42px; margin-bottom: 8px; }
.report-hero p.subtitle { color: var(--ink-2); font-size: 18px; }

.report-section { margin-bottom: 24px; }
.report-section h2 { margin-bottom: 16px; }
.report-section .lead { font-size: 16px; color: var(--ink-2); line-height: 1.6; }

/* ─── Watermark "Generato con ChatDNA" (in cima e in fondo a ogni report) ─── */
.report-watermark-row { display: flex; }
.report-watermark-row.is-top { justify-content: flex-start; margin-bottom: 20px; }
.report-watermark-row.is-bottom { justify-content: flex-end; margin-top: 28px; }
.report-watermark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: transform 120ms, box-shadow 120ms;
}
.report-watermark:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.report-watermark .wm-logo {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.report-watermark .wm-logo::after {
  content: "";
  width: 15px; height: 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 6px 6px 6px 2px;
}
.report-watermark .wm-copy { display: flex; flex-direction: column; line-height: 1.2; }
.report-watermark .wm-made { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.report-watermark .wm-made strong {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: var(--ink);
}
.report-watermark .wm-host {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.04em; color: var(--muted);
}

/* ─── "Il momento epico": chat animata (riusa lo stile bolle della hero) ─── */
.epic-moment { margin-top: 32px; }
.epic-moment .epic-context {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: -8px 0 16px;
}
.epic-phone {
  max-width: 440px;
  margin: 0 auto;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.epic-head {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.epic-head-title { font-weight: 700; font-size: 14px; }
.epic-head-dots { font-family: "JetBrains Mono", monospace; font-size: 10px; opacity: 0.8; }
.epic-stream {
  background: var(--paper-2);
  height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.epic-stream-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  gap: 10px;
  padding: 16px 14px;
}
.epic-stream-list .stream-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  animation: streamIn 360ms cubic-bezier(.16,.84,.44,1);
}
.epic-stream-list .stream-row.me { flex-direction: row-reverse; }
.epic-stream-list .chat-avatar { background: var(--paper); }
.epic-stream-list .chat-avatar.av-me   { background: var(--primary); }
.epic-stream-list .chat-avatar.av-them { background: var(--paper); }
.epic-stream-list .chat-avatar.av-alt  { background: var(--accent); }
.epic-stream-list .chat-avatar.av-alt2 { background: var(--accent-3); }
.epic-stream-list .bubble {
  max-width: 260px;
  font-size: 14px;
  padding: 8px 13px;
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1.35;
}
.epic-stream-list .bubble .name { font-size: 10px; margin-bottom: 1px; }
.epic-stream-list .stream-row.typing .bubble {
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .epic-stream-list .stream-row { animation: none !important; }
}
@media (max-width: 520px) {
  .epic-stream-list .bubble { max-width: 72%; }
  .epic-stream { height: 320px; }
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.kv-cell {
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
}
.kv-cell .k {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.kv-cell .v {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin: 4px 0;
}
.kv-cell .who { font-size: 13px; color: var(--ink-2); }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.persona-card {
  padding: 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 3px 3px 0 var(--ink);
}
.persona-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.persona-card .head .emoji { font-size: 24px; }
.persona-card .name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; }
.persona-card .role { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }

.award-card {
  padding: 16px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.award-card.alt { background: var(--accent-3); }
.award-card.alt2 { background: var(--primary-soft); }
.award-card .emoji { font-size: 26px; line-height: 1; }
.award-card .body .title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 2px;
}
.award-card .body .winner { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.award-card .body .motivation { font-size: 14px; line-height: 1.4; }

.flag-card {
  padding: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  border-left: 6px solid var(--accent-2);
}
.flag-card.sev-medio  { border-left-color: var(--accent); }
.flag-card.sev-basso  { border-left-color: var(--primary); }
.flag-card .head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.flag-card .head .name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px; }
.flag-card .desc { font-size: 14.5px; line-height: 1.5; }
.flag-card .example { margin-top: 8px; padding: 10px 12px; background: var(--paper-2); border-radius: var(--radius-sm); font-style: italic; font-size: 14px; }

.level-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
}
.level-banner.lvl-verde     { background: var(--primary); }
.level-banner.lvl-giallo    { background: var(--accent); }
.level-banner.lvl-arancione { background: oklch(0.78 0.18 60); }
.level-banner.lvl-rosso     { background: var(--accent-2); color: var(--paper); }

.observation {
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.observation blockquote {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--paper-2);
  border-left: 4px solid var(--primary);
  border-radius: 6px;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}

.episode {
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.episode .code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.episode .ep-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.episode .syn { font-size: 14.5px; line-height: 1.5; }

.chapter {
  padding: 16px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.chapter .h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.chapter .name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; }
.chapter .period { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.chapter .mood { font-style: italic; font-size: 14px; color: var(--ink-2); }

.prophecy {
  padding: 18px;
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  position: relative;
}
.prophecy .who { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.prophecy .fate { font-size: 15.5px; line-height: 1.55; font-style: italic; }

.message-out {
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.message-out .to {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.message-out .msg + .msg { margin-top: 6px; }
.message-out .msg .bubble { font-size: 14px; padding: 8px 12px; }

.letter {
  padding: 24px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.7;
}

.dedication {
  padding: 20px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
}

.moments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: m;
}
.moments-list li {
  padding: 14px 16px 14px 56px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  position: relative;
  counter-increment: m;
  font-size: 15px;
  line-height: 1.55;
}
.moments-list li::before {
  content: counter(m);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
  border-radius: 100%;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Expired screen (per /r/:id scaduto) */
.expired-screen {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 40px 24px;
}
.expired-screen .emoji { font-size: 64px; margin-bottom: 16px; }
.expired-screen h1 { font-size: 38px; margin-bottom: 12px; }
.expired-screen p { color: var(--ink-2); font-size: 17px; margin-bottom: 24px; }

/* Public share banner */
.share-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  flex-wrap: wrap;
}
.share-banner .btn {
  background: var(--primary);
  color: var(--ink);
  padding: 8px 16px;
  font-size: 14px;
  box-shadow: 2px 2px 0 var(--paper);
}
.share-banner .btn:hover { box-shadow: 3px 3px 0 var(--paper); }
.share-banner .btn:active { box-shadow: 1px 1px 0 var(--paper); }
.share-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-banner .btn.ghost { background: transparent; color: var(--paper); border: 1.5px solid var(--paper); }
.share-banner .btn.ghost:hover { background: rgba(255,255,255,0.12); }

/* Toast */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  padding: 12px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 14px;
  font-weight: 600;
  pointer-events: auto;
  animation: drift 2.4s ease-in-out infinite;
}
.toast.error { background: var(--accent-2); color: var(--paper); }
.toast.success { background: var(--primary); }

/* ============================================================
   Landing page
   ============================================================ */

.landing { background: var(--paper); color: var(--ink); overflow: hidden; }

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.landing-nav .brand { min-width: 0; flex-shrink: 1; }
.landing-nav .links { flex-shrink: 0; }
.landing-nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.landing-nav .brand .logo {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--primary);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.landing-nav .brand .logo::after {
  content: "";
  width: 20px; height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 8px 8px 8px 2px;
}
.landing-nav .brand .name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.landing-nav .links {
  display: flex; align-items: center; gap: 24px;
  font-size: 14px;
}
.landing-nav .links a { color: var(--ink); text-decoration: none; }
.landing-nav .links a:hover { text-decoration: underline; }

.landing-hero {
  padding: 70px 40px 100px;
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}
.landing-hero .inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.landing-hero .eyebrow-row {
  display: inline-flex;
  margin-bottom: 18px;
}
.landing-hero h1 {
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.95;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
}
.landing-hero h1 .accent { color: var(--primary-deep); }
.landing-hero .lead {
  font-size: 19px;
  line-height: 1.5;
  max-width: 540px;
  color: var(--ink-2);
}
.landing-hero .cta-row {
  display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
}
.landing-hero .badges {
  display: flex; gap: 24px; margin-top: 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  height: 540px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-card {
  width: 380px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
  transform: rotate(-2deg);
}
.phone-card .head {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-card .head .title { font-weight: 700; font-size: 14px; }
.phone-card .head .sub { font-size: 11px; opacity: 0.7; }
.phone-card .stream {
  position: relative;
  height: 380px;
  background: var(--paper-2);
  overflow: hidden;
}
.phone-card .stream-list {
  position: absolute;
  inset: 0;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%);
}
.phone-card .stream-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: streamIn 360ms cubic-bezier(.16,.84,.44,1);
  flex-shrink: 0;
}
.phone-card .stream-row.me { flex-direction: row-reverse; }

.chat-avatar {
  width: 28px; height: 28px;
  border-radius: 100%;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--ink);
}
.phone-card .stream-row .bubble {
  max-width: 200px;
  font-size: 13px;
  padding: 7px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1.3;
}
.phone-card .stream-row .bubble .name {
  font-size: 10px;
  margin-bottom: 1px;
}
.phone-card .stream-row.typing .bubble {
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
}

@keyframes streamIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.floating-sticker {
  position: absolute;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 12px;
  border-radius: 100px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: drift 3.4s ease-in-out infinite;
}

.marquee-strip {
  border-bottom: 1.5px solid var(--ink);
  background: var(--accent);
  color: var(--ink);
  padding: 14px 0;
  overflow: hidden;
}
.marquee-strip.dark { background: var(--ink); color: var(--paper); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-track span {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-right: 36px;
}
.marquee-track .sep { opacity: 0.3; margin: 0 12px 0 24px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.landing-section {
  padding: 80px 40px;
  border-bottom: 1.5px solid var(--ink);
}
.landing-section .inner { max-width: 1280px; margin: 0 auto; }

.landing-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.landing-section-head .kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.landing-section-head h2 {
  font-size: clamp(36px, 5vw, 56px);
  margin: 8px 0 0;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 820px;
}
.landing-section-head .sub {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 380px;
  line-height: 1.5;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step-card {
  padding: 28px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.step-card.featured { background: var(--primary); }
.step-card .num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 0.9;
  color: var(--ink-2);
}
.step-card .t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 26px;
  margin-top: 12px;
  line-height: 1.05;
}
.step-card .b { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }

/* Catalogo report */
.reports-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.report-tile {
  text-align: left;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 24px;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.report-tile:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.report-tile:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.report-tile .emoji { font-size: 36px; line-height: 1; }
.report-tile .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; }
.report-tile .desc { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.report-tile .cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-deep);
  font-weight: 700;
}
.report-tile.tile-primary  { background: var(--primary-soft); --tile: var(--primary); }
.report-tile.tile-accent   { background: var(--accent); --tile: var(--accent); }
.report-tile.tile-accent3  { background: var(--accent-3); --tile: var(--accent-3); }

/* Palette tile selezionabili: 6 pastello accesi, uno per tile.
   `.selectable.tile-cN` (0,3,0) batte il default su `.report-tile.selectable`. */
.report-tile.selectable.tile-c1 { --tile: oklch(0.78 0.15 162); }  /* verde menta */
.report-tile.selectable.tile-c2 { --tile: oklch(0.74 0.17 28); }   /* corallo */
.report-tile.selectable.tile-c3 { --tile: oklch(0.83 0.15 92); }   /* giallo sole */
.report-tile.selectable.tile-c4 { --tile: oklch(0.72 0.16 305); }  /* lavanda */
.report-tile.selectable.tile-c5 { --tile: oklch(0.74 0.14 240); }  /* azzurro */
.report-tile.selectable.tile-c6 { --tile: oklch(0.76 0.15 350); }  /* rosa */

.privacy-strip {
  background: var(--paper-2);
}
.privacy-strip .grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}
.privacy-strip .promises {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.privacy-strip .promise {
  padding: 18px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.privacy-strip .promise .e { font-size: 28px; }
.privacy-strip .promise .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; margin-top: 6px; }
.privacy-strip .promise .d { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }

.final-cta {
  padding: 100px 40px;
  background: var(--primary);
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.9;
  margin: 0;
  letter-spacing: -0.04em;
}
.final-cta p {
  font-size: 19px;
  line-height: 1.5;
  opacity: 0.85;
  margin-top: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.landing-footer {
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-legal a:hover { border-bottom-color: var(--ink-2); }

/* ── Pagine legali (Termini, Privacy) ── */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  line-height: 1.65;
  color: var(--ink-2);
}
.legal-page h1 { font-size: 38px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; }
.legal-page h2 { font-size: 20px; color: var(--ink); margin: 32px 0 8px; }
.legal-page p { margin: 0 0 12px; }
.legal-page ul { margin: 0 0 12px; padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--ink); text-decoration: underline; }
.legal-updated {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--muted); margin-bottom: 24px !important;
}
.legal-intro { font-size: 16px; }
.legal-foot { margin-top: 40px; padding-top: 20px; border-top: 1.5px solid var(--line, var(--ink)); }

/* ── Checkbox "Accetto i Termini" (login) ── */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
  cursor: pointer;
  margin: 4px 0;
}
.terms-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}
.terms-check a { color: var(--ink); text-decoration: underline; }

/* Seconda spunta: approvazione specifica delle clausole vessatorie
   (artt. 1341-1342 c.c.). Distinta e più sobria, ma sempre leggibile. */
.terms-check-vexatious {
  font-size: 11.5px;
  line-height: 1.35;
  opacity: .9;
}

/* ============================================================
   Upload step (dopo aver scelto un report dalla landing)
   ============================================================ */

.upload-step {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 20px;
}
.upload-step .chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  margin-bottom: 24px;
}
.upload-step .chosen .emoji { font-size: 36px; }
.upload-step .chosen .label { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.upload-step .chosen .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; }

.upload-step h2 { margin-bottom: 8px; font-size: 32px; }
.upload-step .sub { color: var(--muted); margin-bottom: 24px; }

/* ============================================================
   PROCESSING — animazione con micro-reveal progressivi
   ============================================================ */
.processing-screen {
  min-height: 64vh;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}
.processing-screen .proc-emoji {
  font-size: 56px;
  line-height: 1;
  animation: procPop 600ms ease;
}
@keyframes procPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.processing-screen .typing-dots { font-size: 40px; color: var(--primary-deep); }
.processing-screen .proc-text {
  font-size: 20px;
  font-weight: 500;
  min-height: 56px;
  transition: opacity 180ms ease, transform 180ms ease;
}
.processing-screen .proc-text.swap { opacity: 0; transform: translateY(6px); }
.processing-screen .proc-text strong { color: var(--primary-deep); }
.proc-bar {
  width: 100%;
  max-width: 360px;
  height: 8px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.proc-fill { width: 0; height: 100%; background: var(--primary); }
.proc-reveals { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; margin-top: 4px; }
.proc-chip {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  text-align: left;
  animation: chipIn 280ms ease;
}
.proc-chip span { margin-right: 4px; }
.proc-chip strong { color: var(--primary-deep); }
@keyframes chipIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   PREVIEW / PAYWALL
   ============================================================ */
.preview-page {
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
}
.preview-page .chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  margin-bottom: 24px;
}
.preview-page .chosen .emoji { font-size: 36px; }
.preview-page .chosen .label { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.preview-page .chosen .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; }
.preview-page h2 { font-size: 34px; margin-bottom: 8px; }
.preview-page .sub { color: var(--muted); margin-bottom: 16px; font-size: 16px; }
.period-pill {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: 8px;
}

/* Paywall trigger cards */
.paywall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.paywall-card {
  position: relative;
  padding: 20px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--paper-2);
  overflow: hidden;
}
.paywall-card.rose  { background: oklch(0.94 0.05 350); }
.paywall-card.amber { background: oklch(0.95 0.07 85); }
.paywall-card.red   { background: oklch(0.93 0.07 28); }
.paywall-card .lock { position: absolute; top: 12px; right: 14px; font-size: 18px; }
.paywall-card .pw-emoji { font-size: 28px; margin-bottom: 10px; }
.paywall-card .pw-text { font-size: 14px; line-height: 1.4; color: var(--ink); }
.paywall-card .pw-blur {
  margin-top: 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 20px;
  filter: blur(5px);
  user-select: none;
  letter-spacing: 0.04em;
}

/* Report sfocato + box di sblocco */
.preview-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}
.fake-wrap {
  position: relative;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 22px;
  max-height: 460px;
  overflow: hidden;
}
.fake-report { filter: blur(3px); opacity: 0.85; pointer-events: none; }
.fake-hero { margin-bottom: 20px; }
.fake-sec { margin-bottom: 18px; }
.blur-line {
  height: 12px;
  border-radius: 6px;
  background: var(--paper-2);
  margin: 8px 0;
}
.blur-line.big { height: 26px; }
.blur-h {
  height: 18px;
  width: 35%;
  border-radius: 6px;
  background: var(--primary-soft);
  margin-bottom: 12px;
}
.fake-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(transparent, var(--paper));
}
.unlock-box {
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--accent);
  padding: 24px;
  position: sticky;
  top: 20px;
}
.unlock-box .unlock-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.unlock-box .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.unlock-box .price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
}
.unlock-box .price-note { font-size: 12px; color: var(--ink-2); }
.unlock-box .benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.unlock-box .benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.unlock-box .benefits .check {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--primary-deep);
}

/* Preview: banda numeri grezzi */
.big-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.big-stat {
  text-align: center;
  padding: 18px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.big-stat .bs-emoji { font-size: 24px; margin-bottom: 6px; }
.big-stat .bs-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.big-stat .bs-label { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.3; }

/* Preview: due colonne (distribuzione + curiosità) */
.preview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 8px;
}
.prev-card {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: 20px;
}
.prev-card h3 { font-size: 18px; margin-bottom: 14px; }

.dist-list { display: flex; flex-direction: column; gap: 11px; }
.dist-row { display: grid; grid-template-columns: 90px 1fr 42px; align-items: center; gap: 10px; }
.dist-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-track { height: 12px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--radius-pill); overflow: hidden; }
.dist-fill { height: 100%; background: var(--accent); }
.dist-fill.lead { background: var(--primary); }
.dist-pct { font-family: "JetBrains Mono", monospace; font-size: 12px; text-align: right; }

.fun-facts { display: flex; flex-direction: column; gap: 12px; }
.fun-fact { display: flex; align-items: center; gap: 12px; }
.fun-fact .ff-emoji { font-size: 24px; flex-shrink: 0; }
.fun-fact .ff-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fun-fact .ff-value { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; line-height: 1.1; }

/* Preview: intro paywall */
.paywall-intro { text-align: center; margin: 36px 0 4px; }
.paywall-intro h2 { font-size: 30px; margin-bottom: 6px; }
.paywall-intro p { color: var(--ink-2); }

/* Preview: tag sul report sfocato */
.fake-wrap .fake-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* SELECT — scelta report dopo l'upload */
.select-step { max-width: 1040px; margin: 32px auto; padding: 0 20px 120px; }
.select-intro { text-align: center; margin-bottom: 24px; }
.select-intro .sticker { margin-bottom: 12px; }
.select-intro h2 { font-size: 40px; margin-bottom: 8px; }
.select-intro .sub { color: var(--ink-2); max-width: 620px; margin: 0 auto 12px; font-size: 16px; }
.chat-detail-bar {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.chat-detail-bar .preview-stats { margin: 14px 0 0; }
.select-head { text-align: center; margin: 18px 0 24px; }
.select-head h2 { font-size: 34px; margin-bottom: 6px; }
.select-head .sub { color: var(--muted); max-width: 620px; margin: 0 auto; }

/* Riga di teaser sfocati (sopra la scelta del report) */
.teaser-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 6px;
}
.teaser-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  font-size: 13.5px;
  box-shadow: 2px 2px 0 var(--ink);
}
.teaser-chip .t-emoji { font-size: 16px; }
.teaser-chip .t-text { white-space: nowrap; }
.teaser-chip .blur-chunk {
  filter: blur(4px);
  user-select: none;
  font-weight: 700;
  color: var(--primary-deep);
  padding: 0 2px;
}
@media (max-width: 720px) {
  .teaser-chip { font-size: 12px; padding: 7px 11px; }
}

/* ============================================================
   Tile selezionabili — multiselect, giocose, stato "selected" netto
   ============================================================ */
.selectable-grid { gap: 16px; }
.report-tile.selectable {
  --tile: var(--accent-2);            /* 4° colore (le varianti sovrascrivono) */
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 40px 18px 16px;
  gap: 8px;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, background 140ms ease;
}
/* striscia colorata in alto, dà identità a ogni report */
.report-tile.selectable::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--tile);
}
.report-tile.selectable:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 7px 9px 0 var(--ink); }
.report-tile.selectable:active { transform: translateY(0) rotate(0); box-shadow: 3px 3px 0 var(--ink); }

/* emoji in un badge tondo colorato */
.report-tile.selectable .tile-emoji {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: color-mix(in oklch, var(--tile) 30%, var(--paper));
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 140ms ease;
}
.report-tile.selectable:hover .tile-emoji { transform: rotate(-8deg) scale(1.06); }
.report-tile.selectable .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; line-height: 1.1; }
.report-tile.selectable .desc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* footer: stato "aggiungi/aggiunto" + link esempio */
.report-tile.selectable .tile-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.report-tile.selectable .tile-add {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.report-tile.selectable .tile-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  padding: 5px 11px 5px 5px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  transition: transform 80ms ease, background 100ms ease, color 100ms ease;
}
.report-tile.selectable .tile-info-link .ti-badge {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tile);
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 700; font-size: 12px;
}
.report-tile.selectable .tile-info-link:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.report-tile.selectable .tile-info-link:hover .ti-badge { background: var(--paper); color: var(--ink); }

/* tick d'angolo */
.report-tile.selectable .tile-tick {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  color: transparent;
  transition: transform 140ms cubic-bezier(.34,1.56,.64,1), background 120ms ease;
}

/* icona "i" d'angolo — ben visibile, riempita col colore del tile */
.report-tile.selectable .tile-info {
  position: absolute;
  top: 12px; left: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--tile);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 700; font-size: 19px; line-height: 1;
  cursor: pointer; z-index: 2;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}
.report-tile.selectable .tile-info:hover { background: var(--ink); color: var(--paper); transform: scale(1.14) rotate(6deg); }

/* ── STATO SELEZIONATO: colorato col colore del report ── */
.report-tile.selectable.selected {
  background: color-mix(in oklch, var(--tile) 34%, var(--paper));
  border-color: color-mix(in oklch, var(--tile) 70%, var(--ink));
  box-shadow: 6px 6px 0 var(--tile);
  transform: translateY(-2px);
}
.report-tile.selectable.selected .tile-emoji {
  background: var(--tile);
  transform: rotate(-6deg) scale(1.05);
}
.report-tile.selectable.selected .tile-tick {
  background: var(--tile);
  color: var(--ink);
  transform: scale(1.12) rotate(8deg);
}
.report-tile.selectable.selected .tile-add { color: var(--ink); }
.report-tile.selectable.selected .tile-add::before { content: ""; }

/* Toggle tra i report generati (schermata result) */
.result-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.result-toggle .rt-label { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.result-toggle .rt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.result-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: transform 80ms ease, background 100ms ease;
  white-space: nowrap;
}
.result-chip:hover { transform: translateY(-1px); }
.result-chip.active { background: var(--ink); color: var(--paper); }

.loading-text .lp-count { font-family: "JetBrains Mono", monospace; opacity: 0.7; font-size: 0.85em; }

@media (max-width: 720px) {
  .result-toggle { padding: 10px; }
  .report-tile.selectable .tile-emoji { width: 48px; height: 48px; font-size: 26px; }
}

/* Modale "Esempio del report" */
.example-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 22, 22, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.example-modal {
  position: relative;
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.example-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.example-title { display: flex; align-items: center; gap: 12px; }
.example-title .ex-emoji { font-size: 30px; }
.example-title .ex-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.example-title .ex-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; }
.example-header .close-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.example-header .close-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.example-fakebanner {
  background: var(--accent);
  border-bottom: 1.5px solid var(--ink);
  padding: 10px 20px;
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}
.example-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
  background: var(--paper-2);
}
.example-body #report-root { max-width: 680px; margin: 0 auto; }
.example-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1.5px solid var(--ink);
  background: var(--paper);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.example-footer .ex-foot-note { font-size: 13px; color: var(--ink-2); }

@media (max-width: 720px) {
  .example-overlay { padding: 0; }
  .example-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
  .example-footer .ex-foot-note { display: none; }
  .example-footer .btn { flex: 1; }
}

/* Popup di login (compare dopo "paga" per l'utente anonimo) */
.login-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}
.login-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1.5px solid var(--ink);
}
.login-modal-head .lm-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.login-modal-head .lm-heads { flex: 1; min-width: 0; }
.login-modal-head .lm-title { font-weight: 800; font-size: 22px; line-height: 1.1; }
.login-modal-head .lm-lead { color: var(--ink-2); font-size: 14px; line-height: 1.4; margin-top: 4px; }
.login-modal-body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.login-modal-body .divider { margin: 4px 0; }

@media (max-width: 720px) {
  .login-overlay { padding: 16px; align-items: flex-end; }
  .login-modal { max-width: 100%; }
}

/* Pay bar sticky in fondo */
.pay-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1.5px solid var(--ink);
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.25);
}
.pay-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pay-info { flex: 1; min-width: 180px; }
.pay-chosen { font-size: 15px; line-height: 1.2; }
.pay-price { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pay-price .price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.pay-price .price-note { font-size: 12px; color: var(--ink-2); }
.pay-email { max-width: 240px; flex: 1 1 200px; }
.pay-btn { white-space: nowrap; }
.pay-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Controlli a destra del pay-bar (cambiano per fase: email → codice → paga) */
.pay-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-google { white-space: nowrap; }
.pay-or { font-size: 13px; color: var(--ink-2); }
.otp-input {
  max-width: 160px; flex: 0 0 auto;
  letter-spacing: 0.4em; text-align: center;
  font-family: "Bricolage Grotesque", monospace; font-weight: 700; font-size: 18px;
}
.otp-verified, .otp-sent { font-size: 13px; color: var(--ink-2); }
.otp-verified { color: var(--primary-deep); font-weight: 600; }

/* Seconda riga del pay-bar (azioni OTP: reinvia / cambia email) */
.pay-extra {
  max-width: 1040px; margin: 0 auto;
  padding: 0 20px 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.pay-extra[hidden] { display: none; }
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary-deep); font: inherit; font-size: 13px; text-decoration: underline;
}
.linklike:hover { color: var(--ink); }

/* Azioni sotto il campo codice nella schermata di login (reinvia / cambia) */
.otp-actions { display: flex; gap: 14px; justify-content: center; }
.otp-input.block { max-width: none; width: 100%; }

@media (max-width: 720px) {
  .select-intro h2 { font-size: 28px; }
  .pay-inner { padding: 12px 16px; gap: 10px; }
  .pay-info { flex-basis: 100%; }
  .pay-controls { flex-basis: 100%; }
  .pay-email { max-width: none; flex: 1 1 100%; }
  .otp-input { max-width: none; flex: 1 1 100%; }
  .pay-btn { flex: 1; }
  .pay-extra { padding: 0 16px 12px; }
}

/* LANDING — sezione upload + tutorial inline */
.analizza-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}
.analizza-grid .dropzone { padding: 40px 24px; }
.dropzone .dz-note { margin-top: 14px; font-size: 12px; color: var(--muted); }
.tut-inline {
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tut-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--ink);
  gap: 12px;
}
.tut-inline-head .kicker { font-family: "JetBrains Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tut-inline .tut-body {
  grid-template-columns: 1fr 320px;
  gap: 20px;
  padding: 22px;
}

@media (max-width: 860px) {
  .analizza-grid { grid-template-columns: 1fr; }
  .tut-inline .tut-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .preview-split { grid-template-columns: 1fr; }
  .preview-cols { grid-template-columns: 1fr; }
  .unlock-box { position: static; }
  .preview-page h2 { font-size: 26px; }
  .processing-screen .proc-text { font-size: 17px; }
  .big-stat .bs-value { font-size: 22px; }
  .select-head h2 { font-size: 28px; }
  .dist-row { grid-template-columns: 76px 1fr 38px; }
}

/* Login gate (mostrato dopo upload, prima della generazione) */
.login-gate {
  max-width: 480px;
  margin: 64px auto;
  padding: 0 20px;
  text-align: center;
}
.login-gate .icon { font-size: 48px; margin-bottom: 12px; }
.login-gate h2 { font-size: 32px; margin-bottom: 12px; }
.login-gate .sub { color: var(--ink-2); margin-bottom: 28px; font-size: 16px; line-height: 1.5; }
.login-gate .card { padding: 28px; }

/* Login full screen (dal nav) — alias visivo del login-gate */
.login-full {
  max-width: 480px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
}
.login-full h1 { font-size: 48px; margin-bottom: 12px; }
.login-full .lead { color: var(--ink-2); margin-bottom: 32px; }
.login-full .card { padding: 28px; }

/* divider riutilizzato */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--line);
}

input[type=email].input-pill {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 15px;
  margin-bottom: 12px;
}
input[type=email].input-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ============================================================
   Tutorial modale (come esportare la chat WhatsApp)
   ============================================================ */

.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 22, 22, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: tutFadeIn 200ms ease;
}
@keyframes tutFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tut-modal {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink);
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: tutPop 280ms cubic-bezier(.16,.84,.44,1);
}
@keyframes tutPop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1.5px solid var(--ink);
  gap: 12px;
  flex-shrink: 0;
}
.tut-header h2 {
  font-size: 20px;
  margin: 0;
}
.tut-header .close-btn {
  width: 36px; height: 36px;
  border-radius: 100%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 80ms;
}
.tut-header .close-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.tut-header .close-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* Segmented toggle iOS / Android */
.tut-toggle {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  padding: 3px;
  background: var(--paper-2);
  gap: 0;
}
.tut-toggle button {
  border: 0;
  background: transparent;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  color: var(--ink-2);
  transition: background 120ms, color 120ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tut-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}

/* Body: stage with phone + caption */
.tut-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding: 28px 28px 24px;
  overflow-y: auto;
  flex: 1;
  align-items: center;
}

.tut-caption {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tut-caption .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.tut-caption .step-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  min-height: 80px;
}
.tut-caption .step-title .accent { color: var(--primary-deep); }
.tut-caption .step-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  min-height: 70px;
}
.tut-caption .step-title,
.tut-caption .step-sub {
  transition: opacity 280ms ease, transform 280ms ease;
}
.tut-caption.changing .step-title,
.tut-caption.changing .step-sub {
  opacity: 0;
  transform: translateY(10px);
}

/* Step progress bars */
.tut-progress {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tut-progress .bar {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  overflow: hidden;
  transition: flex .3s ease;
  flex: 1;
}
.tut-progress .bar.active { flex: 2.5; }
.tut-progress .bar .fill {
  height: 100%;
  background: var(--ink);
  width: 0%;
  transition: width 80ms linear;
}
.tut-progress .bar.done .fill { width: 100% !important; }
.tut-progress .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-left: 6px;
  white-space: nowrap;
}

.tut-replay {
  align-self: flex-start;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tut-replay:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.tut-replay:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* Phone mock */
.tut-phone-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tut-phone-frame {
  width: 320px;
  height: 620px;
  border: 0;
  background: transparent;
  display: block;
}
.tut-phone {
  width: 280px;
  height: 560px;
  border-radius: 36px;
  background: var(--ink);
  padding: 10px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), 4px 4px 0 var(--ink);
  flex-shrink: 0;
}
.tut-phone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.tut-phone.ios .notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: var(--ink);
  border-radius: 14px;
  z-index: 40;
}
.tut-phone.android .punch-hole {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 40;
}
.tut-phone .home-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 4px;
  border-radius: 99px;
  background: rgba(0,0,0,.32);
  z-index: 41;
}
.tut-phone .status-bar {
  position: absolute;
  top: 12px;
  left: 18px;
  right: 18px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Geist", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  z-index: 30;
  color: var(--ink);
}
.tut-phone .status-bar .icons {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.tut-phone .status-bar .battery {
  width: 22px; height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  position: relative;
}
.tut-phone .status-bar .battery::after {
  content: ""; position: absolute; right: -3px; top: 2px;
  width: 2px; height: 4px; background: var(--ink); border-radius: 0 1px 1px 0;
}
.tut-phone .status-bar .battery::before {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 14px; height: 4px; background: var(--ink); border-radius: 1px;
}

/* Generic screen layers (one shown at a time, fade between) */
.tut-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;
}
.tut-screen.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Cursor (finger indicator) */
.tut-cursor {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: rgba(26,22,20,0.15);
  border: 1.5px solid rgba(26,22,20,0.6);
  box-shadow: 0 4px 12px rgba(26,22,20,0.18);
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  transition: left 700ms cubic-bezier(.5,.0,.2,1), top 700ms cubic-bezier(.5,.0,.2,1), transform 220ms cubic-bezier(.34,1.56,.64,1);
  will-change: left, top, transform;
}
.tut-cursor.tap { transform: translate(-50%, -50%) scale(.78); }
.tut-cursor.tap::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 100%;
  border: 2px solid var(--primary-deep);
  animation: tutRipple 600ms ease-out;
}
@keyframes tutRipple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── iOS screen mocks ─────────────────────────────────────── */
.ios-list, .ios-chat, .ios-info, .android-list, .android-chat {
  padding-top: 44px;
  height: 100%;
  background: #fff;
  font-family: -apple-system, "Geist", sans-serif;
}

.ios-list .nav-row,
.android-chat .nav-row {
  padding: 8px 16px 4px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.ios-list .search {
  margin: 8px 16px 12px;
  height: 28px;
  background: #ececec;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
}
.ios-list .chat-row,
.android-list .chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.ios-list .chat-row.hi,
.android-list .chat-row.hi {
  background: var(--primary-soft);
}
.ios-list .chat-row .avatar,
.android-list .chat-row .avatar,
.ios-chat .header .avatar,
.android-chat .header .avatar {
  width: 38px; height: 38px;
  border-radius: 100%;
  background: var(--accent-3);
  display: flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  flex-shrink: 0;
}
.ios-list .chat-row.r2 .avatar, .android-list .chat-row.r2 .avatar { background: var(--accent); }
.ios-list .chat-row.r3 .avatar, .android-list .chat-row.r3 .avatar { background: var(--primary); }
.ios-list .chat-row .body,
.android-list .chat-row .body {
  flex: 1;
  min-width: 0;
}
.ios-list .chat-row .name,
.android-list .chat-row .name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-list .chat-row .preview,
.android-list .chat-row .preview {
  font-size: 12px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-list .chat-row .time {
  font-size: 11px;
  color: #aaa;
  align-self: flex-start;
  margin-top: 4px;
}

/* iOS chat screen */
.ios-chat .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 10px;
  border-bottom: 1px solid #eee;
  background: rgba(245, 245, 245, .9);
  backdrop-filter: blur(8px);
  position: relative;
}
.ios-chat .header .top-row {
  position: absolute;
  top: 6px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 11px;
  color: var(--primary-deep);
  font-weight: 500;
}
.ios-chat .header.hi { background: var(--primary-soft); }
.ios-chat .header .avatar { margin-top: 16px; }
.ios-chat .header .title {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ios-chat .messages {
  padding: 14px 12px 50px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ios-chat .messages .msg {
  max-width: 80%;
  padding: 7px 11px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.3;
}
.ios-chat .messages .msg.them { background: #ececec; align-self: flex-start; border-bottom-left-radius: 4px; }
.ios-chat .messages .msg.me   { background: #c3f0e0; align-self: flex-end;   border-bottom-right-radius: 4px; color: var(--ink); }

/* iOS group info screen */
.ios-info {
  padding-top: 60px;
  background: #f2f2f7;
}
.ios-info .top-row {
  position: absolute;
  top: 38px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--primary-deep);
  font-weight: 500;
}
.ios-info .big-avatar {
  margin: 0 auto 8px;
  width: 70px; height: 70px;
  border-radius: 100%;
  background: var(--accent-3);
  display: flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--ink);
}
.ios-info .group-name {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
}
.ios-info .members {
  text-align: center;
  font-size: 11px;
  color: #888;
  margin-bottom: 14px;
}
.ios-info .section {
  background: #fff;
  margin: 0 12px 10px;
  border-radius: 12px;
  overflow: hidden;
}
.ios-info .row {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ios-info .row:last-child { border-bottom: none; }
.ios-info .row.danger { color: var(--accent-2); }
.ios-info .row.hi {
  background: var(--primary-soft);
}

/* iOS action sheet */
.ios-sheet {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(0,0,0,0);
  transition: background 360ms;
}
.ios-sheet.show { background: rgba(0,0,0,0.4); top: 0; }
.ios-sheet .sheet {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 8px;
  background: rgba(245,245,245,.95);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  overflow: hidden;
  transform: translateY(120%);
  transition: transform 380ms cubic-bezier(.16,.84,.44,1);
}
.ios-sheet.show .sheet { transform: translateY(0); }
.ios-sheet .item {
  padding: 13px;
  text-align: center;
  font-size: 14px;
  color: var(--primary-deep);
  border-bottom: 0.5px solid #ddd;
  font-weight: 500;
}
.ios-sheet .item:last-child { border-bottom: none; font-weight: 700; }
.ios-sheet .item.hi { background: var(--primary-soft); color: var(--ink); font-weight: 700; }
.ios-sheet .cancel {
  margin-top: 8px;
  background: rgba(245,245,245,.95);
  border-radius: 14px;
  padding: 13px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-deep);
}

/* ─── Android screen mocks ─────────────────────────────────── */
.android-list .top-bar,
.android-chat .top-bar {
  padding: 38px 14px 10px;
  background: var(--primary);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.android-list .top-bar .title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
}
.android-chat .top-bar .back { font-size: 18px; }
.android-chat .top-bar .name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}
.android-chat .top-bar .more {
  font-size: 20px;
  padding: 4px 8px;
  font-weight: 700;
  border-radius: 50%;
}
.android-chat .top-bar .more.hi {
  background: rgba(0,0,0,0.18);
}
.android-chat .messages {
  background: #ece5dd;
  height: calc(100% - 60px);
  padding: 12px 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.android-chat .messages .msg {
  max-width: 78%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: #fff;
  align-self: flex-start;
  box-shadow: 0 1px 0.5px rgba(0,0,0,.1);
}
.android-chat .messages .msg.me {
  background: #d2f8c6;
  align-self: flex-end;
}

/* Android overflow menu (popup) */
.android-menu {
  position: absolute;
  top: 60px; right: 6px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  min-width: 160px;
  overflow: hidden;
  z-index: 55;
  transform-origin: top right;
  transform: scale(0);
  opacity: 0;
  transition: transform 200ms cubic-bezier(.16,.84,.44,1), opacity 200ms;
}
.android-menu.show {
  transform: scale(1);
  opacity: 1;
}
.android-menu .item {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--ink);
}
.android-menu .item.hi { background: var(--primary-soft); font-weight: 700; }

/* Android dialog */
.android-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  transition: background 240ms;
}
.android-dialog-backdrop.show {
  background: rgba(0,0,0,0.4);
  pointer-events: auto;
}
.android-dialog {
  background: #fff;
  border-radius: 4px;
  padding: 18px;
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  opacity: 0;
  transform: scale(.9);
  transition: opacity 240ms, transform 240ms cubic-bezier(.16,.84,.44,1);
}
.android-dialog-backdrop.show .android-dialog {
  opacity: 1; transform: scale(1);
}
.android-dialog h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.android-dialog .item {
  padding: 10px 0;
  font-size: 13.5px;
  border-bottom: 0.5px solid #eee;
}
.android-dialog .item.hi { background: var(--primary-soft); margin: 0 -18px; padding: 10px 18px; font-weight: 700; }

/* CTA "Come esportare?" sopra al dropzone */
.tut-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  box-shadow: 3px 3px 0 var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: transform 80ms, box-shadow 80ms;
}
.tut-trigger:hover  { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.tut-trigger:active { transform: translate(1px,1px);   box-shadow: 1px 1px 0 var(--ink); }
.tut-trigger .icon { font-size: 18px; }

/* Responsive */
@media (max-width: 760px) {
  .tut-overlay { padding: 8px; }
  .tut-modal { border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); max-height: 96vh; }
  .tut-header { padding: 10px 14px; }
  .tut-header h2 { font-size: 15px; }
  .tut-toggle button { padding: 5px 10px; font-size: 11px; }
  .tut-header .close-btn { width: 30px; height: 30px; font-size: 13px; }
  .tut-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
  }
  .tut-phone {
    width: 240px; height: 480px;
    padding: 8px;
    margin: 0 auto;
  }
  .tut-phone .screen { border-radius: 22px; }
  .tut-phone-frame { width: 220px; height: 430px; margin: 0 auto; }
  .tut-caption { min-height: 0; gap: 8px; }
  .tut-caption .step-title { font-size: 22px; min-height: 0; line-height: 1.05; }
  .tut-caption .step-sub { font-size: 13px; min-height: 0; line-height: 1.4; }
  .tut-caption .eyebrow { font-size: 10px; }
  .tut-progress { gap: 4px; }
  .tut-progress .bar { height: 4px; }
  .tut-progress .label { font-size: 10px; }
  .tut-replay { padding: 6px 12px; font-size: 11px; }
  .ios-info .big-avatar { width: 56px; height: 56px; font-size: 22px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .tut-phone-frame { width: 200px; height: 380px; }
  .tut-caption .step-title { font-size: 20px; }
}

/* Language switcher */
.lang-select {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  max-width: 140px;
}
.lang-select:hover { background: var(--paper-2); }
.lang-select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Wrapper + overlay bandiera: di default invisibile (desktop mostra il nome). */
.lang-switch { position: relative; display: inline-flex; }
.lang-flag { display: none; }

@media (max-width: 560px) {
  /* Su mobile: bandiera + freccietta nel controllo chiuso. Il testo del <select>
     viene reso trasparente (resta cliccabile e apre il picker nativo coi nomi). */
  .lang-switch { width: 56px; }
  .lang-select {
    width: 100%; max-width: none; padding: 6px 0;
    color: transparent;
    text-align: center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
  }
  .lang-flag {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    position: absolute; inset: 0;
    font-size: 16px;
    pointer-events: none;
  }
  /* Freccietta: segnala che è un menu a tendina. */
  .lang-flag::after {
    content: "▾";
    font-size: 11px;
    color: var(--ink);
  }
}

/* Utility */
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* ============================================================
   Mobile breakpoints
   ============================================================ */

/* Tablet & smaller laptop */
@media (max-width: 900px) {
  .landing-nav { padding: 14px 20px; }
  .landing-hero { padding: 48px 20px 64px; }
  .landing-hero .inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { height: 420px; }
  .privacy-strip .grid { grid-template-columns: 1fr; gap: 32px; }
  .steps-grid { grid-template-columns: 1fr; }
  .landing-section { padding: 56px 20px; }
  .final-cta { padding: 64px 20px; }
  .landing-footer { padding: 24px 20px; }
}

/* Mobile (la maggior parte dei tweak vanno qui) */
@media (max-width: 700px) {
  /* Nav: compatta tutto */
  .landing-nav {
    padding: 12px 16px;
    gap: 10px 12px;
    flex-wrap: wrap;            /* se i tasti non ci stanno, vanno a capo */
  }
  /* Il logo + "ChatDNA" restano sempre in alto a sinistra, mai compressi. */
  .landing-nav .brand { gap: 8px; flex-shrink: 0; min-width: 0; }
  .landing-nav .brand .name { font-size: 18px; }
  .landing-nav .brand .logo { width: 30px; height: 30px; border-radius: 10px; }
  .landing-nav .brand .logo::after { width: 16px; height: 12px; }
  /* I tasti restano a destra e, se troppo lunghi, riempiono una seconda riga. */
  .landing-nav .links { gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .landing-nav .links .desktop-only { display: none !important; }
  .landing-nav .links .btn.small {
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 2px 2px 0 var(--ink);
    white-space: nowrap;
  }
  .landing-nav .links .btn.small:hover  { box-shadow: 3px 3px 0 var(--ink); }
  .landing-nav .links .btn.small:active { box-shadow: 1px 1px 0 var(--ink); }

  /* Hero */
  .landing-hero { padding: 40px 16px 56px; }
  .landing-hero h1 { font-size: clamp(36px, 11vw, 56px); }
  .landing-hero .lead { font-size: 16px; }
  .landing-hero .cta-row .btn { padding: 12px 18px; font-size: 15px; }
  .landing-hero .badges { font-size: 11px; gap: 16px; }

  /* Phone preview: ridotta + container che CONTIENE gli sticker */
  .hero-visual {
    height: auto;
    min-height: 380px;
    padding: 24px 8px 32px;
    width: 100%;
    overflow: visible;
  }
  .phone-card {
    width: min(280px, 78vw);
    transform: rotate(-1.5deg);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .phone-card .stream { min-height: 280px; }
  .phone-card .stream .bubble { max-width: 200px; font-size: 12.5px; }

  /* Floating sticker: dimensioni ridotte e riposizionati nel viewport */
  .floating-sticker {
    font-size: 10.5px;
    padding: 4px 9px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  /* Su mobile riposizioniamo i 4 sticker dentro il container (gli inline-style hanno
     left/right negativi adatti al desktop). Override con !important sulle classi .fs-N. */
  .hero-visual .floating-sticker.fs-1 { left: 4% !important; right: auto !important; top: 8px !important; }
  .hero-visual .floating-sticker.fs-2 { right: 4% !important; left: auto !important; top: 20px !important; }
  .hero-visual .floating-sticker.fs-3 { right: 6% !important; left: auto !important; bottom: 8px !important; top: auto !important; }
  .hero-visual .floating-sticker.fs-4 { left: 6% !important; right: auto !important; bottom: 24px !important; top: auto !important; }

  /* Sezioni */
  .landing-section { padding: 48px 16px; }
  .landing-section-head { margin-bottom: 28px; }
  .landing-section-head h2 { font-size: clamp(30px, 8vw, 48px); }
  .landing-section-head .sub { max-width: 100%; }
  .step-card { padding: 22px; }
  .step-card .num { font-size: 48px; }
  .step-card .t { font-size: 22px; }
  .step-card .b { font-size: 14px; }

  /* Privacy strip: 1 col anche le promesse */
  .privacy-strip .promises { grid-template-columns: 1fr; }
  .privacy-strip h2 { font-size: 32px !important; }

  /* Final CTA + footer */
  .final-cta { padding: 56px 16px; }
  .final-cta h2 { font-size: clamp(40px, 11vw, 72px); }
  .final-cta p { font-size: 16px; }
  .landing-footer { padding: 20px 16px; font-size: 11px; gap: 8px; }

  /* App-shell pagine interne (loading, dashboard, ecc.) */
  .app-shell { padding: 16px 14px 56px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }

  /* Upload step + login pages */
  .upload-step { margin: 24px auto; padding: 0 14px; }
  .upload-step h2 { font-size: 26px; }
  .upload-step .chosen { padding: 12px 14px; }
  .upload-step .chosen .emoji { font-size: 28px; }
  .upload-step .chosen .title { font-size: 18px; }
  .login-gate { margin: 32px auto; padding: 0 14px; }
  .login-gate h2 { font-size: 26px; }
  .login-full { margin: 32px auto; padding: 0 14px; }
  .login-full h1 { font-size: 38px; }
  .login-gate .card, .login-full .card { padding: 20px; }
  .login-gate .icon { font-size: 40px; }

  /* Dropzone */
  .dropzone { padding: 40px 16px; }
  .dropzone .big-emoji { font-size: 40px; }
  .preview-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .preview-stats .stat-cell .value { font-size: 18px; }
  .capsule-email-block { padding: 14px; }

  /* Report view */
  .report-hero { padding: 24px 14px; }
  .report-hero h1 { font-size: 32px; }
  .report-section { margin-bottom: 20px; }
  .report-section h2 { font-size: 22px; }
  .level-banner { font-size: 14px; padding: 10px 16px; }
  .moments-list li { padding: 12px 14px 12px 50px; }

  /* Toolbar del report: stack verticale, link su tutta la riga, bottoni equi-distribuiti */
  .report-toolbar {
    border-radius: var(--radius-md);
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .report-toolbar > .row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .report-toolbar .share-link {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    text-align: center;
  }
  .report-toolbar .actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .report-toolbar .actions .btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
  }
  /* Caso "nuova analisi" sulla pagina result: 3 bottoni → 3 colonne */
  .report-toolbar .actions:has(> .btn:nth-child(3)) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Dashboard items */
  .dashboard-item .actions { gap: 6px; }
  .dashboard-item .actions .btn { padding: 6px 12px; font-size: 13px; }

  /* Share banner pagina pubblica */
  .share-banner {
    padding: 8px 14px;
    font-size: 12.5px;
    gap: 8px;
  }
  .share-banner .btn { padding: 6px 12px; font-size: 12px; }

  /* Schermata "report scaduto" */
  .expired-screen { margin: 32px auto; padding: 32px 16px; }
  .expired-screen h1 { font-size: 30px; }
  .expired-screen .emoji { font-size: 52px; }

  /* Catalogo report */
  .reports-catalog { gap: 14px; }
  .report-tile { padding: 20px; }
  .report-tile .title { font-size: 20px; }
  .report-tile .desc { font-size: 14px; }

  /* Toast */
  .toast-stack { right: 12px; left: 12px; bottom: 16px; align-items: stretch; }
  .toast { width: 100%; }

  /* Marquee: meno spazio fra item, gira più veloce */
  .marquee-track span { font-size: 12px; margin-right: 24px; }
  .marquee-track .sep { margin: 0 8px 0 16px; }
}

/* Mobile-S — sotto i 500px nascondi il CTA secondario del nav,
   resta solo "Accedi" / "I miei report" / "Esci". Il CTA principale
   è comunque presente nel hero. */
@media (max-width: 500px) {
  .landing-nav .links #cta-nav { display: none; }
}

/* Mobile XS — solo per viewport molto stretti */
@media (max-width: 380px) {
  .landing-nav .brand .name { font-size: 16px; }
  .landing-nav .links .btn.small { padding: 6px 10px; font-size: 11.5px; }
  .preview-stats { grid-template-columns: 1fr; }
  .hero-visual { min-height: 340px; padding: 16px 4px 24px; }
  .phone-card { width: min(260px, 82vw); }
}

/* ============================================================
   Report chart components (riutilizzabili)
   ============================================================ */

/* Score circle: grosso gauge circolare con punteggio 0-100 */
.score-hero {
  display: flex; justify-content: center;
  margin: 24px 0 36px;
}
.score-circle {
  position: relative;
  width: 240px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.score-circle svg {
  width: 220px; height: 220px;
  transform: rotate(-90deg);
}
.score-circle .track {
  fill: none;
  stroke: var(--paper-2);
  stroke-width: 12;
}
.score-circle .fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dasharray 800ms cubic-bezier(.2,.8,.2,1);
}
.score-circle.tone-good    .fill { stroke: var(--primary); }
.score-circle.tone-primary .fill { stroke: var(--primary); }
.score-circle.tone-warn    .fill { stroke: var(--accent); }
.score-circle.tone-bad     .fill { stroke: var(--accent-2); }
.score-inner {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.score-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.score-lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 6px;
}
.score-verdict {
  text-align: center;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  max-width: 360px;
  margin: 0 auto;
  font-style: italic;
}

/* Meter: barra di progresso orizzontale con label e percentuale */
.meter {
  margin: 14px 0;
}
.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.meter-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.meter-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.meter-track {
  height: 10px;
  background: var(--paper-2);
  border-radius: 999px;
  border: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.meter-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.meter.tone-good .meter-fill { background: var(--primary); }
.meter.tone-primary .meter-fill { background: var(--primary); }
.meter.tone-warn .meter-fill { background: var(--accent); }
.meter.tone-bad .meter-fill { background: var(--accent-2); }
.meter-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* Versus bar: due lati in competizione, label sopra */
.versus-bar {
  margin: 16px 0;
}
.versus-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  gap: 12px;
}
.versus-left { color: var(--ink); }
.versus-right { color: var(--ink); text-align: right; }
.versus-head strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
}
.versus-track {
  height: 14px;
  background: var(--accent-3);
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  overflow: hidden;
  display: flex;
  box-shadow: 2px 2px 0 var(--ink);
}
.versus-fill-left {
  height: 100%;
  background: var(--primary);
  border-right: 1.5px solid var(--ink);
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
}
.versus-detail {
  margin-top: 8px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Stat tile: numero grosso + label */
.stat-tile {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  box-shadow: 3px 3px 0 var(--ink);
}
.stat-tile.tone-primary { background: var(--primary-soft); }
.stat-tile.tone-accent  { background: var(--accent); }
.stat-tile.tone-cool    { background: var(--accent-3); }
.stat-emoji { font-size: 24px; margin-bottom: 6px; }
.stat-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-label {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 8px;
  font-weight: 600;
}
.stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* Attachment badge */
.attachment-badge {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--paper-2);
  margin: 14px 0;
}
.attachment-badge.tone-good { background: var(--primary-soft); }
.attachment-badge.tone-warn { background: var(--accent); }
.attachment-badge.tone-cool { background: var(--accent-3); }
.attachment-badge.tone-bad  { background: color-mix(in oklab, var(--accent-2) 30%, var(--paper)); }
.attach-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  margin-bottom: 4px;
}
.attach-emoji { font-size: 18px; }
.attach-label { color: var(--ink-2); }
.attach-label strong { color: var(--ink); font-weight: 800; }
.attach-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   Situationship-specific layout
   ============================================================ */

.profiles-rich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.profile-card-rich {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.profile-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0;
}
.profile-hottake {
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  padding: 6px 10px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  align-self: flex-start;
  line-height: 1.35;
}
.profile-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 4px 0 8px;
}
.flag-counts {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font-size: 13px;
  background: var(--paper-2);
  font-weight: 600;
}
.flag-pill.bad { background: color-mix(in oklab, var(--accent-2) 22%, var(--paper)); }
.flag-pill.good { background: var(--primary-soft); }
.flag-pill strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

/* Pattern rows */
.patterns-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pattern-row {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.pattern-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.pattern-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.pattern-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-deep);
}
.pattern-leader {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pattern-detail {
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
}

/* Flags two-column grid */
.flags-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.flags-col-title {
  font-size: 18px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.flags-col-title.bad  { color: var(--accent-2); }
.flags-col-title.good { color: var(--primary-deep); }
.flag-card.green {
  border-left: 4px solid var(--primary);
}
.flag-owner {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 600;
}

/* Prediction card */
.prediction-card {
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 4px 4px 0 var(--ink);
}
.pred-timeframe {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.pred-outcome {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.pred-oneliner {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}

/* Balance card */
.balance-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 4px 4px 0 var(--ink);
}
.balance-verdict {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 18px;
}
.balance-detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* ============================================================
   Classico-specific layout
   ============================================================ */

.vibe-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
}
.vibe-card { min-width: 0; }
.vibe-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 8px;
  opacity: 0.7;
}
.vibe-name {
  font-size: 38px;
  line-height: 1;
  margin: 0 0 12px;
}
.vibe-desc {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.vibe-hero .score-circle { width: 180px; }
.vibe-hero .score-circle svg { width: 160px; height: 160px; }
.vibe-hero .score-inner { top: 80px; }
.vibe-hero .score-num { font-size: 48px; }

.meters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.persona-card-rich {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.persona-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.persona-emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.persona-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.persona-role {
  font-size: 13px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
  font-weight: 600;
}
.persona-desc {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.persona-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  border-left: 3px solid var(--primary);
}
.persona-detail.catchphrase { border-left-color: var(--accent); }
.persona-detail.if-they-were { border-left-color: var(--accent-3); }
.detail-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.detail-val {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.persona-detail.catchphrase .detail-val { font-style: italic; }

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.award-card-rich {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex;
  gap: 14px;
}
.award-card-rich.alt  { background: var(--primary-soft); }
.award-card-rich.alt2 { background: var(--accent-3); }
.award-emoji {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}
.award-body { flex: 1; min-width: 0; }
.award-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.award-winner {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.award-winner strong { color: var(--ink); }
.award-motivation {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.award-evidence {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(0,0,0,0.04);
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-2);
}

.catchphrases-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.catchphrase-row {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.catchphrase-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.catchphrase-quote {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.catchphrase-usage {
  font-size: 13.5px;
  color: var(--ink-2);
}

.stats-rich-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-row-rich {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.stat-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.stat-row-label {
  font-size: 15px;
  font-weight: 600;
}
.stat-row-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary-deep);
}
.stat-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stat-row-comment {
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
}

.dinamiche {
  font-size: 17px;
  line-height: 1.6;
  padding: 22px 24px;
  background: var(--paper-2);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================================
   Red Flags-specific layout
   ============================================================ */

.danger-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  margin: 24px 0 28px;
}
.danger-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.diagnosis {
  font-size: 17px;
  line-height: 1.4;
  font-style: italic;
  padding: 12px 16px;
  background: var(--paper-2);
  border-left: 4px solid var(--accent-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.severity-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sev-tile {
  text-align: center;
  padding: 22px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
}
.sev-tile.sev-low { background: var(--primary-soft); }
.sev-tile.sev-mid { background: var(--accent); }
.sev-tile.sev-hi  { background: color-mix(in oklab, var(--accent-2) 35%, var(--paper)); }
.sev-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sev-lab {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-top: 8px;
}

.clinical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.clinical-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.clinical-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.clinical-name {
  font-size: 19px;
  margin: 0;
}
.clinical-flag-count {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-2);
}

.triggers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.trigger-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.trigger-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 4px;
}
.trigger-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.prescription {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary-deep);
}

/* ============================================================
   Psicologico-specific layout
   ============================================================ */

.doctor-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 32px;
}
.doctor-avatar {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}
.doctor-intro p {
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.clinical-profiles-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.clinical-profile {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 4px 4px 0 var(--ink);
}
.clinical-profile-head {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1.5px dashed var(--ink);
}
.clinical-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.clinical-patient {
  font-size: 32px;
  line-height: 1;
  margin: 0 0 6px;
}
.clinical-type {
  font-size: 17px;
  color: var(--primary-deep);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 10px;
}
.clinical-diagnosis {
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 8px 12px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.clinical-block {
  margin-top: 20px;
}
.clinical-block-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 10px;
}
.clinical-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.defenses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.defense-item {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid var(--accent-3);
}
.defense-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.defense-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
  font-style: italic;
}

.weird-accurate-card {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--ink);
}
.weird-accurate-card .sticker { margin-bottom: 8px; }
.weird-accurate-card p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.hot-take-card {
  margin-top: 14px;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--accent-2) 18%, var(--paper));
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-2);
}
.hot-take-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 6px;
}
.hot-take-text {
  font-size: 15.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.rx-card {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--primary-soft);
  border: 1.5px dashed var(--ink);
  border-radius: var(--radius-md);
}
.rx-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-deep);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.rx-text {
  font-size: 14.5px;
  line-height: 1.5;
}

.doctor-finalnote {
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary);
}
.doctor-finalnote p {
  font-size: 16px;
  line-height: 1.55;
  font-style: italic;
}

/* ============================================================
   Serie TV-specific layout
   ============================================================ */

.series-poster {
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 80%, var(--accent-2)) 100%);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
  text-align: center;
}
.series-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}
.series-title {
  font-size: 48px;
  line-height: 1;
  margin: 0 0 14px;
  color: var(--paper);
}
.series-tagline {
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,255,0.78);
  margin-bottom: 16px;
}
.series-genre { margin-bottom: 16px; }
.series-logline {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 600px;
  margin: 0 auto;
}

.ratings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 28px 0 32px;
}
.rating-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rating-tile .score-circle { width: 160px; }
.rating-tile .score-circle svg { width: 150px; height: 150px; }
.rating-tile .score-inner { top: 75px; }
.rating-tile .score-num { font-size: 42px; }
.rating-tile .score-lab { font-size: 10px; }
.rating-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  font-style: italic;
  text-align: center;
  max-width: 220px;
  line-height: 1.35;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.cast-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
}
.cast-real {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cast-arrow {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0;
}
.cast-character {
  font-size: 22px;
  margin: 0 0 6px;
}
.cast-archetype {
  font-size: 13px;
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 10px;
}
.cast-desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.cast-face {
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-3);
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.plot-device {
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.device-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
}
.device-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.arc-act {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.arc-act.act-1 { background: var(--primary-soft); }
.arc-act.act-2 { background: var(--accent); }
.arc-act.act-3 { background: var(--accent-3); }
.arc-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.arc-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin: 4px 0 12px;
}
.arc-act p {
  font-size: 14px;
  line-height: 1.5;
}

.episodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.episode-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 2px 2px 0 var(--ink);
  align-items: start;
}
.ep-code {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--invert-fg);
  background: var(--invert-bg);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  display: inline-block;
}
.ep-body { min-width: 0; }
.ep-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 4px;
}
.ep-syn {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.emmys-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.emmy-card {
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.emmy-cat {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.emmy-nominee {
  font-size: 14px;
  margin-bottom: 4px;
}
.emmy-reason {
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.4;
}

.season-finale {
  padding: 24px 26px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
}

.renewal-card {
  padding: 24px 26px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
}
.renewal-card.decision-renewed { background: var(--primary-soft); }
.renewal-card.decision-cancelled { background: color-mix(in oklab, var(--accent-2) 30%, var(--paper)); }
.renewal-card.decision-movie-spin-off { background: var(--accent-3); }
.renewal-decision {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.renewal-justification {
  font-size: 15px;
  line-height: 1.55;
}

/* ============================================================
   Wrapped-specific layout
   ============================================================ */

.yds-hero {
  text-align: center;
  padding: 36px 24px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
}
.yds-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.yds-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 12vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.yds-label {
  font-size: 18px;
  font-weight: 600;
  margin-top: 12px;
}
.yds-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 540px;
  margin: 12px auto 0;
  font-style: italic;
}

.top-sender {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 28px;
  align-items: center;
}
.ts-crown { font-size: 48px; line-height: 1; }
.ts-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.ts-name {
  font-size: 26px;
  margin: 0 0 10px;
}
.ts-comment {
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  margin-top: 8px;
}

.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.heatmap-24 {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 18px 14px;
  box-shadow: 2px 2px 0 var(--ink);
}
.heatmap-bars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 140px;
  align-items: end;
}
.hm-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.hm-bar {
  width: 100%;
  min-height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.hm-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  height: 10px;
}
.heatmap-caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

.dow-chart {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 14px 14px;
  box-shadow: 2px 2px 0 var(--ink);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  height: 220px;
}
.dow-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 6px;
}
.dow-bar-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.dow-bar {
  width: 100%;
  background: var(--accent-2);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.dow-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.top-words-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tw-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px 100px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
}
.tw-word {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-bar-wrap {
  height: 10px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.tw-bar {
  height: 100%;
  background: var(--accent-3);
  border-radius: 999px;
}
.tw-count {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}
.tw-owner {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.top-emoji-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.te-tile {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  box-shadow: 2px 2px 0 var(--ink);
}
.te-emoji { font-size: 38px; line-height: 1; }
.te-count {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 15px;
  margin-top: 6px;
}
.te-owner {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.personality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.personality-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  box-shadow: 3px 3px 0 var(--ink);
}
.pers-emoji { font-size: 56px; line-height: 1; }
.pers-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
  margin-top: 10px;
}
.pers-label {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
  font-style: italic;
}

.chapters-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chapter-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: 3px 3px 0 var(--ink);
}
.ch-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ch-name { font-size: 22px; margin: 0; }
.ch-period {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ch-mood {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 10px;
}
.ch-event {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.record-tile {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.rec-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.rec-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}

@media (max-width: 760px) {
  .charts-row { grid-template-columns: 1fr; }
  .top-sender { grid-template-columns: 1fr; text-align: center; }
  .ts-crown { justify-self: center; }
  .tw-row { grid-template-columns: 100px 1fr 50px; }
  .tw-owner { display: none; }
  .heatmap-bars { height: 100px; }
  .dow-chart { height: 160px; }
}

/* ============================================================
   Futuro-specific layout
   ============================================================ */

.oracle-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: linear-gradient(135deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 75%, var(--accent-3)) 100%);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
}
.oracle-symbol {
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
}
.oracle-intro p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--invert-fg);
  font-style: italic;
}

.doomsday-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
}
.dc-clock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dc-dial {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 6px var(--paper);
}
.dc-tick {
  position: absolute;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.dc-tick.t-12 { top: 8px; left: 50%; transform: translateX(-50%); }
.dc-tick.t-3  { right: 10px; top: 50%; transform: translateY(-50%); }
.dc-tick.t-6  { bottom: 8px; left: 50%; transform: translateX(-50%); }
.dc-tick.t-9  { left: 10px; top: 50%; transform: translateY(-50%); }
.dc-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 72px;
  background: var(--accent-2);
  transform-origin: bottom center;
  border-radius: 2px;
  margin-left: -2px;
  margin-top: -72px;
  z-index: 2;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.dc-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.dc-readout {
  text-align: center;
}
.dc-mins {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--accent-2);
}
.dc-mins span { font-size: 18px; opacity: 0.7; }
.dc-mins-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 4px;
}
.dc-info { min-width: 0; }
.dc-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 8px;
}
.dc-label {
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 10px;
}
.dc-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}

.group-fate-card {
  padding: 24px 26px;
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 28px;
}

.destinies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.destiny-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
  overflow: hidden;
}
.destiny-card::before {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.destiny-head {
  margin-bottom: 12px;
}
.destiny-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.destiny-sign {
  font-size: 13px;
  color: var(--primary-deep);
  font-style: italic;
  margin-top: 4px;
}
.destiny-fate {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--ink);
}
.destiny-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.turning-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.turning-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 5px solid var(--accent-2);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: 3px 3px 0 var(--ink);
}
.turning-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.turning-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.turning-when {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 3px 8px;
  background: var(--paper-2);
  border-radius: 999px;
  border: 1px solid var(--ink);
}
.turning-desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.final-prophecy {
  padding: 28px 32px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--accent-2);
  position: relative;
  overflow: hidden;
}
.final-prophecy::before {
  content: '𓂀';
  position: absolute;
  top: -20px; right: 12px;
  font-size: 120px;
  opacity: 0.08;
  pointer-events: none;
}
.fp-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}
.final-prophecy p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  color: var(--invert-fg);
  font-style: italic;
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .doomsday-card { grid-template-columns: 1fr; text-align: center; }
  .dc-clock { margin: 0 auto; }
  .dc-dial { width: 150px; height: 150px; }
  .dc-hand { height: 60px; margin-top: -60px; }
  .destinies-grid { grid-template-columns: 1fr; }
  .final-prophecy p { font-size: 17px; }
}

/* ============================================================
   Ghostwriter-specific layout
   ============================================================ */

.ghost-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 28px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin: 24px 0 28px;
  align-items: center;
}
.ghost-symbol {
  font-size: 80px;
  line-height: 1;
  opacity: 0.85;
}
.ghost-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ghost-subject {
  font-size: 36px;
  margin: 0 0 12px;
}
.ghost-text {
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-2);
}

.fingerprint-card {
  padding: 22px 24px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 28px;
}

.style-traits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.style-trait {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.style-trait-name {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.style-trait-example {
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}

.vocab-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vocab-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px 1.2fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
}
.vocab-word {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vocab-bar-wrap {
  height: 10px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.vocab-bar {
  height: 100%;
  background: var(--accent-3);
  border-radius: 999px;
}
.vocab-count {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
}
.vocab-context {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

.gw-conversations {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gw-conversation {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 3px 3px 0 var(--ink);
}
.gw-to {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 12px;
}
.gw-to strong { color: var(--ink); font-size: 14px; }
.gw-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.gw-bubble {
  max-width: 80%;
  padding: 10px 14px;
  background: var(--primary);
  color: var(--paper);
  border-radius: 18px 18px 4px 18px;
  font-size: 14.5px;
  line-height: 1.4;
  word-wrap: break-word;
}

.auto-replies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.auto-reply-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.ar-scenario {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ar-arrow {
  color: var(--muted);
  font-size: 16px;
  margin: 4px 0;
}
.ar-reply {
  font-size: 14.5px;
  font-style: italic;
  color: var(--ink);
  padding: 8px 10px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.extremes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.extreme-card {
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.ex-scenario {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 8px;
}
.ex-reply {
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
}

.gw-disclaimer {
  margin-top: 28px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  border-top: 1px dashed var(--ink);
}

@media (max-width: 760px) {
  .ghost-intro { grid-template-columns: 1fr; text-align: center; }
  .ghost-symbol { justify-self: center; font-size: 64px; }
  .vocab-row { grid-template-columns: 100px 1fr 40px; }
  .vocab-context { display: none; }
  .gw-bubble { max-width: 90%; }
}

/* ============================================================
   Capsula-specific layout
   ============================================================ */

.capsule-stamp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
  margin: 24px 0;
  transform: rotate(-1.5deg);
}
.cs-icon { font-size: 28px; line-height: 1; }
.cs-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.cs-date {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.snapshot-card {
  position: relative;
  padding: 28px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 32px;
}
.snap-polaroid {
  position: absolute;
  top: -22px; left: 24px;
  font-size: 40px;
  background: var(--paper);
  padding: 0 8px;
  line-height: 1;
}
.snap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.snap-tile {
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--ink);
  border-radius: var(--radius-sm);
}
.snap-tile.snap-mood { background: var(--primary-soft); border-style: solid; }
.snap-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.snap-v {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.narrative-block {
  padding: 24px 28px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 18px;
}
.narrative-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.narrative-title {
  font-size: 22px;
  margin: 0 0 12px;
}
.narrative-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.obsessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.obsession-card {
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.obs-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}
.obs-desc {
  font-size: 14px;
  line-height: 1.45;
}

.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.tc-item {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.tc-category {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-deep);
  margin-bottom: 4px;
}
.tc-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.tc-why {
  font-size: 13px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.4;
}

.moments-list-rich {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.moment-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--ink);
  align-items: start;
}
.moment-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--primary-deep);
  letter-spacing: -0.04em;
}
.moment-text {
  font-size: 15px;
  line-height: 1.55;
}

.capsule-letter {
  position: relative;
  padding: 36px 40px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--ink);
  margin-top: 36px;
  background-image:
    repeating-linear-gradient(transparent, transparent 26px, rgba(0,0,0,0.05) 26px, rgba(0,0,0,0.05) 27px);
}
.letter-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 20px;
}
.letter-body {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.625;
  color: var(--ink);
  white-space: pre-wrap;
}
.letter-sign {
  margin-top: 22px;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  text-align: right;
}

@media (max-width: 760px) {
  .snapshot-card { padding: 22px 18px; }
  .narrative-block { padding: 20px 22px; }
  .capsule-letter { padding: 26px 22px; }
  .letter-body { font-size: 16px; }
  .moment-item { grid-template-columns: 44px 1fr; }
  .moment-num { font-size: 22px; }
}

/* Responsive */
@media (max-width: 760px) {
  .score-circle { width: 200px; }
  .score-circle svg { width: 180px; height: 180px; }
  .score-inner { top: 90px; }
  .score-num { font-size: 56px; }
  .profile-name { font-size: 22px; }
  .balance-verdict { font-size: 22px; }
  .pred-outcome { font-size: 19px; }
  .flags-grid { grid-template-columns: 1fr; }
  .profiles-rich-grid { grid-template-columns: 1fr; }
  .vibe-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .vibe-name { font-size: 28px; }
  .vibe-hero .score-circle { width: 140px; margin: 0 auto; }
  .vibe-hero .score-circle svg { width: 140px; height: 140px; }
  .vibe-hero .score-inner { top: 70px; }
  .vibe-hero .score-num { font-size: 40px; }
  .awards-grid { grid-template-columns: 1fr; }
  .meters-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   🔥 Roast / 💼 Dating — intro condivisa
   ============================================================ */

.roast-intro {
  padding: 18px 22px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 24px;
}

/* Roast victims */
.roast-victims-stack { display: flex; flex-direction: column; gap: 16px; }
.roast-victim {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--accent-2);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
}
.roast-victim-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.roast-name { font-size: 24px; margin: 0; }
.roast-nick {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--accent-2);
  font-weight: 700;
}
.roast-text { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.savage-line {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--accent-2);
  color: var(--invert-fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
.final-burn {
  padding: 24px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
}

/* ============================================================
   📔 Diario di bordo
   ============================================================ */

.diary-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 24px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
}
.diary-icon { font-size: 32px; flex-shrink: 0; }

.diary-entries-stack { display: flex; flex-direction: column; gap: 16px; }
.diary-entry {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 3px 3px 0 var(--ink);
  position: relative;
}
.diary-entry::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: repeating-linear-gradient(var(--accent-2) 0 6px, transparent 6px 12px);
  border-radius: 2px;
  margin-left: -1.5px;
}
.diary-entry-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.diary-period {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.diary-title { font-size: 21px; margin: 6px 0 10px; }
.diary-counters {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.diary-body { font-size: 15.5px; line-height: 1.6; }
.diary-defining {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
}

/* ============================================================
   💼 Profilo Dating
   ============================================================ */

.dating-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.dating-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dating-card-head { display: flex; align-items: center; gap: 14px; }
.dating-name { font-size: 22px; margin: 0; }
.dating-age { font-weight: 500; color: var(--muted); font-size: 16px; }
.dating-tagline { font-size: 14px; color: var(--ink-2); font-style: italic; margin-top: 2px; }
.dating-bio { font-size: 14.5px; line-height: 1.55; }
.dating-interests { display: flex; flex-wrap: wrap; gap: 7px; }
.dating-interest {
  font-size: 12px;
  padding: 4px 11px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 600;
}
.dating-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dating-flag-list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.7; }
.dating-flag-list.green { color: var(--ink); }
.dating-flag-list.red { color: var(--ink); }
.dating-prompts { display: flex; flex-direction: column; gap: 10px; }
.dating-prompt {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.dp-q { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.dp-a { font-size: 15px; font-weight: 600; }

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.match-card {
  background: var(--accent-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.match-pair { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; }
.match-compat {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.match-why { font-size: 14px; line-height: 1.5; }

/* ============================================================
   🥂 Anniversary
   ============================================================ */

.anniv-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.love-langs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.love-lang-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.ll-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; }
.ll-lang { font-size: 14px; font-weight: 600; color: var(--primary-deep); margin: 6px 0 8px; }
.ll-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.song-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, var(--accent-3) 0%, var(--primary-soft) 100%);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
}
.song-icon {
  font-size: 36px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  flex-shrink: 0;
}
.song-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 20px; }
.song-artist { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.song-why { font-size: 14px; line-height: 1.5; }

/* ============================================================
   🎙️ Il Discorso
   ============================================================ */

.speech-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.speech-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--ink);
}
.ss-k { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ss-v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px; }

.speech-scroll {
  padding: 32px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--ink);
  position: relative;
}
.speech-introline {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--primary-deep);
}
.speech-para { font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.speech-para.turn { font-style: italic; color: var(--ink-2); }
.speech-para.closing {
  font-weight: 600;
  font-size: 17px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line);
}

.inside-jokes-list { display: flex; flex-direction: column; gap: 10px; }
.inside-joke {
  padding: 14px 18px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--ink);
}
.ij-joke { font-weight: 700; font-size: 15px; }
.ij-exp { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }

.toast-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--primary-soft);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--ink);
}
.toast-icon { font-size: 44px; margin-bottom: 12px; }
.toast-line { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.3; }
.toast-to { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

.line-that-stays {
  text-align: center;
  padding: 36px 28px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-radius: var(--radius-lg);
}
.line-that-stays .lts-mark { font-size: 32px; margin-bottom: 14px; }
.line-that-stays p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Responsive — nuovi report */
@media (max-width: 760px) {
  .dating-grid { grid-template-columns: 1fr; }
  .dating-flags { grid-template-columns: 1fr; }
  .matches-grid { grid-template-columns: 1fr; }
  .love-langs-grid { grid-template-columns: 1fr; }
  .anniv-numbers { grid-template-columns: 1fr 1fr; }
  .roast-name { font-size: 21px; }
  .speech-scroll { padding: 22px; }
  .speech-introline { font-size: 20px; }
  .line-that-stays p { font-size: 20px; }
  .song-card { flex-direction: column; text-align: center; }
}

/* ============================================================
   🎨 TEMI CUSTOM PER REPORT
   Ogni report ridefinisce la palette + background + font headline.
   Le variabili impostate su #report-root cascadano a tutti i
   sub-componenti (card, meter, scoreCircle usano var(--...)).
   ============================================================ */

#report-root[data-report-type] {
  /* color esplicito: forza la ri-valutazione di var(--ink) col tema corrente. */
  color: var(--ink);
  position: relative;
  padding: clamp(16px, 3vw, 34px);
  border: 1.5px solid var(--ink);
  border-radius: 28px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  transition: background 200ms;
}
/* Headings dentro il report seguono il colore del tema */
#report-root[data-report-type] h1,
#report-root[data-report-type] h2,
#report-root[data-report-type] h3 { color: var(--ink); }
/* Il primo blocco (watermark o hero) non deve avere doppio margine col bordo del foglio */
#report-root[data-report-type] > .report-hero:first-child,
#report-root[data-report-type] > .report-watermark-row:first-child { margin-top: 0; }

/* ─── Strato emoji animato dello sfondo (watermark che fluttua) ───
   Ogni tema imposta la propria emoji-tile via --emoji-bg. Due strati
   (::before + ::after) sfasati ondeggiano a velocità diverse: l'effetto
   è di emoji che galleggiano dolcemente. Il contenuto sta sopra (z 1). */
#report-root[data-report-type]::before,
#report-root[data-report-type]::after {
  content: "";
  position: absolute;
  inset: -48px;            /* margine: il movimento non scopre i bordi (overflow:hidden) */
  z-index: 0;
  pointer-events: none;
  background-image: var(--emoji-bg, none);
  background-repeat: repeat;
  background-size: var(--emoji-size, 150px) var(--emoji-size, 150px);
  will-change: background-position;
}
#report-root[data-report-type]::before {
  opacity: var(--emoji-opacity, 0.16);
  animation: emojiSwayA 15s ease-in-out infinite;
}
#report-root[data-report-type]::after {
  opacity: calc(var(--emoji-opacity, 0.16) * 0.55);
  background-position: 76px 44px;   /* sfasato rispetto al ::before per densità */
  animation: emojiSwayB 21s ease-in-out infinite;
}
#report-root[data-report-type] > * { position: relative; z-index: 1; }

/* Oscillazioni che tornano al punto di partenza → loop senza scatti */
@keyframes emojiSwayA {
  0%   { background-position: 0px 0px; }
  25%  { background-position: 16px -13px; }
  50%  { background-position: 5px -24px; }
  75%  { background-position: -14px -9px; }
  100% { background-position: 0px 0px; }
}
@keyframes emojiSwayB {
  0%   { background-position: 76px 44px; }
  25%  { background-position: 60px 56px; }
  50%  { background-position: 70px 70px; }
  75%  { background-position: 92px 54px; }
  100% { background-position: 76px 44px; }
}

/* ─── 🎭 CLASSICO — yearbook verde + senape, emoji da palco ─ */
#report-root[data-report-type="classico"] {
  --paper: oklch(0.97 0.022 115);
  --paper-2: oklch(0.99 0.012 100);
  --accent: oklch(0.82 0.15 95);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🎭%3C/text%3E%3Ctext x='92' y='98' font-size='26'%3E🏆%3C/text%3E%3Ctext x='52' y='134' font-size='22'%3E⭐%3C/text%3E%3C/svg%3E");
  background:
    radial-gradient(oklch(0.82 0.15 95 / 0.16) 1.5px, transparent 1.6px),
    linear-gradient(135deg, oklch(0.96 0.045 130), oklch(0.98 0.03 95));
  background-size: 26px 26px, 100% 100%;
}

/* ─── 💔 SITUATIONSHIP — pop romance, cuori, serif corsivo ─ */
#report-root[data-report-type="situationship"] {
  --paper: oklch(0.97 0.03 8);
  --paper-2: oklch(0.99 0.012 14);
  --ink: oklch(0.20 0.05 8);
  --ink-2: oklch(0.36 0.05 8);
  --primary: oklch(0.68 0.20 8);
  --primary-deep: oklch(0.52 0.21 6);
  --primary-soft: oklch(0.93 0.06 8);
  --accent: oklch(0.86 0.10 30);
  --accent-3: oklch(0.80 0.13 350);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 33c-7-4.5-11.5-9-11.5-14.5A5.5 5.5 0 0 1 22 16a5.5 5.5 0 0 1 11.5 2.5C33.5 24 29 28.5 22 33z' fill='%23d23b6e' fill-opacity='0.12'/%3E%3C/svg%3E"),
    var(--paper);
  background-size: 44px 44px;
}
#report-root[data-report-type="situationship"] .report-hero h1,
#report-root[data-report-type="situationship"] .report-section > h2,
#report-root[data-report-type="situationship"] .balance-verdict,
#report-root[data-report-type="situationship"] .pred-outcome {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}

/* ─── 😬 RED FLAGS — clinical, griglia, mono ─────────────── */
#report-root[data-report-type="redflags"] {
  --paper: oklch(0.985 0.004 230);
  --paper-2: oklch(1 0 0);
  --ink: oklch(0.24 0.02 250);
  --primary: oklch(0.68 0.15 250);
  --primary-deep: oklch(0.52 0.16 250);
  --accent-2: oklch(0.58 0.23 27);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='18' y='48' font-size='32'%3E🚩%3C/text%3E%3Ctext x='92' y='112' font-size='28'%3E🚩%3C/text%3E%3C/svg%3E");
  --emoji-opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, oklch(0.68 0.15 250 / 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, oklch(0.68 0.15 250 / 0.05) 0 1px, transparent 1px 28px),
    var(--paper);
}
#report-root[data-report-type="redflags"] .report-hero h1,
#report-root[data-report-type="redflags"] .report-section > h2 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#report-root[data-report-type="redflags"] .report-hero {
  background: var(--paper-2);
  border-left: 6px solid var(--accent-2);
}

/* ─── 🧠 PSICOLOGICO — studio, salvia + crema, serif ─────── */
#report-root[data-report-type="psicologico"] {
  --paper: oklch(0.96 0.022 120);
  --paper-2: oklch(0.985 0.014 115);
  --ink: oklch(0.26 0.03 150);
  --primary: oklch(0.66 0.08 150);
  --primary-deep: oklch(0.48 0.08 150);
  --primary-soft: oklch(0.91 0.05 140);
  --accent: oklch(0.80 0.08 110);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🧠%3C/text%3E%3Ctext x='96' y='104' font-size='22'%3E✨%3C/text%3E%3Ctext x='54' y='134' font-size='24'%3E🧠%3C/text%3E%3C/svg%3E");
  --emoji-opacity: 0.18;
  background:
    radial-gradient(circle at 25% 20%, oklch(0.66 0.08 150 / 0.10), transparent 38%),
    radial-gradient(circle at 78% 72%, oklch(0.66 0.08 150 / 0.08), transparent 42%),
    var(--paper);
}
#report-root[data-report-type="psicologico"] .report-hero h1,
#report-root[data-report-type="psicologico"] .report-section > h2,
#report-root[data-report-type="psicologico"] .clinical-patient {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
}

/* ─── 📖 SERIE TV — Netflix in versione pastello (crema + rosso) ── */
#report-root[data-report-type="serietv"] {
  --paper: oklch(0.97 0.022 30);
  --paper-2: oklch(0.99 0.012 30);
  --ink: oklch(0.26 0.04 28);
  --primary: oklch(0.62 0.21 27);
  --primary-deep: oklch(0.52 0.22 26);
  --primary-soft: oklch(0.94 0.06 28);
  --accent: oklch(0.80 0.12 30);
  --accent-2: oklch(0.62 0.22 27);
  --accent-3: oklch(0.78 0.13 20);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🎬%3C/text%3E%3Ctext x='96' y='102' font-size='26'%3E🍿%3C/text%3E%3Ctext x='50' y='134' font-size='24'%3E📺%3C/text%3E%3C/svg%3E");
  background:
    radial-gradient(circle at 50% -8%, oklch(0.72 0.20 27 / 0.30), transparent 52%),
    linear-gradient(180deg, oklch(0.98 0.02 30), oklch(0.96 0.03 25));
}
#report-root[data-report-type="serietv"] .report-hero h1,
#report-root[data-report-type="serietv"] .series-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* Poster: resta un blocco "drammatico" rosso con testo chiaro (è un poster). */
#report-root[data-report-type="serietv"] .series-poster {
  background: linear-gradient(180deg, oklch(0.42 0.18 26) 0%, oklch(0.56 0.22 27) 100%);
  color: oklch(0.98 0.01 60);
}
#report-root[data-report-type="serietv"] .series-title { color: oklch(0.98 0.01 60); }

/* ─── 🏆 WRAPPED — Spotify, gradient animato vivace ──────── */
#report-root[data-report-type="wrapped"] {
  --paper: oklch(0.96 0.04 320);
  --paper-2: oklch(0.99 0.015 320);
  --ink: oklch(0.18 0.05 320);
  --primary: oklch(0.66 0.22 330);
  --primary-deep: oklch(0.52 0.23 330);
  --primary-soft: oklch(0.96 0.03 320);
  --accent: oklch(0.86 0.18 95);
  --accent-3: oklch(0.68 0.18 295);
  background: linear-gradient(125deg,
    oklch(0.90 0.13 95),
    oklch(0.80 0.17 330),
    oklch(0.72 0.18 290),
    oklch(0.86 0.15 60));
  background-size: 300% 300%;
  animation: wrappedGradient 13s ease infinite;
}
@keyframes wrappedGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#report-root[data-report-type="wrapped"] .report-hero {
  background: oklch(1 0 0 / 0.78);
  backdrop-filter: blur(4px);
}
#report-root[data-report-type="wrapped"] .report-hero h1,
#report-root[data-report-type="wrapped"] .yds-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ─── 🔮 FUTURO — oracolo in pastello, lavanda + lime ────── */
#report-root[data-report-type="futuro"] {
  --paper: oklch(0.96 0.03 300);
  --paper-2: oklch(0.99 0.014 300);
  --ink: oklch(0.28 0.07 300);
  --ink-2: oklch(0.44 0.07 300);
  --primary: oklch(0.62 0.17 300);
  --primary-deep: oklch(0.50 0.18 300);
  --primary-soft: oklch(0.93 0.05 300);
  --accent: oklch(0.80 0.16 135);
  --accent-3: oklch(0.74 0.13 300);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🔮%3C/text%3E%3Ctext x='98' y='100' font-size='22'%3E✨%3C/text%3E%3Ctext x='54' y='134' font-size='24'%3E🌙%3C/text%3E%3C/svg%3E");
  background:
    radial-gradient(circle at 50% 0%, oklch(0.80 0.12 300 / 0.30), transparent 55%),
    radial-gradient(circle at 80% 80%, oklch(0.82 0.13 135 / 0.18), transparent 45%),
    linear-gradient(180deg, oklch(0.97 0.03 300), oklch(0.95 0.04 305));
}
#report-root[data-report-type="futuro"] .report-hero h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: 0.02em;
}
/* Oracle intro: blocco viola drammatico con testo chiaro */
#report-root[data-report-type="futuro"] .oracle-intro {
  background: linear-gradient(135deg, oklch(0.46 0.17 300) 0%, oklch(0.36 0.13 300) 100%);
  color: oklch(0.97 0.02 300);
}

/* ─── 🎤 GHOSTWRITER — glitch chiaro, cyan/magenta, mono ── */
#report-root[data-report-type="ghostwriter"] {
  --paper: oklch(0.97 0.018 200);
  --paper-2: oklch(0.995 0.008 200);
  --ink: oklch(0.24 0.04 230);
  --ink-2: oklch(0.40 0.04 230);
  --primary: oklch(0.62 0.13 200);
  --primary-deep: oklch(0.50 0.14 205);
  --primary-soft: oklch(0.93 0.05 200);
  --accent: oklch(0.68 0.20 330);
  --accent-3: oklch(0.72 0.17 330);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🎤%3C/text%3E%3Ctext x='96' y='104' font-size='26'%3E👻%3C/text%3E%3Ctext x='52' y='134' font-size='22'%3E💬%3C/text%3E%3C/svg%3E");
  background:
    repeating-linear-gradient(0deg, oklch(0.62 0.13 200 / 0.05) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, oklch(0.98 0.02 200), oklch(0.96 0.03 330));
}
#report-root[data-report-type="ghostwriter"] .report-hero h1,
#report-root[data-report-type="ghostwriter"] .report-section > h2,
#report-root[data-report-type="ghostwriter"] .ghost-subject {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: -0.01em;
  text-shadow: 1.5px 0 oklch(0.68 0.20 330 / 0.55), -1.5px 0 oklch(0.62 0.13 200 / 0.55);
}

/* ─── 🎂 CAPSULA — carta ingiallita, righe, handwritten ─── */
#report-root[data-report-type="capsula"] {
  --paper: oklch(0.95 0.035 90);
  --paper-2: oklch(0.975 0.028 90);
  --ink: oklch(0.30 0.04 70);
  --ink-2: oklch(0.44 0.04 70);
  --primary: oklch(0.70 0.10 70);
  --primary-deep: oklch(0.54 0.10 65);
  --primary-soft: oklch(0.92 0.06 85);
  --accent: oklch(0.84 0.10 90);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, oklch(0.55 0.08 70 / 0.14) 31px 32px),
    var(--paper);
}
#report-root[data-report-type="capsula"] .report-hero h1 {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 72px);
}
#report-root[data-report-type="capsula"] .report-section > h2,
#report-root[data-report-type="capsula"] .narrative-title {
  font-family: "Playfair Display", Georgia, serif;
}

/* ─── 🔥 ROAST — warm pastel ember (niente più charcoal) ─── */
#report-root[data-report-type="roast"] {
  --paper: oklch(0.97 0.03 55);
  --paper-2: oklch(0.99 0.016 60);
  --ink: oklch(0.27 0.05 40);
  --ink-2: oklch(0.42 0.05 40);
  --primary: oklch(0.66 0.19 45);
  --primary-deep: oklch(0.56 0.20 40);
  --primary-soft: oklch(0.94 0.06 55);
  --accent: oklch(0.82 0.15 72);
  --accent-2: oklch(0.62 0.22 30);
  --accent-3: oklch(0.76 0.16 50);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E🔥%3C/text%3E%3Ctext x='96' y='104' font-size='26'%3E😈%3C/text%3E%3Ctext x='52' y='134' font-size='22'%3E💀%3C/text%3E%3C/svg%3E");
  --emoji-opacity: 0.18;
  background:
    radial-gradient(ellipse at 50% 118%, oklch(0.78 0.18 50 / 0.32), transparent 55%),
    linear-gradient(160deg, oklch(0.98 0.025 60), oklch(0.96 0.04 40));
}
#report-root[data-report-type="roast"] .report-hero h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.03em;
}

/* ─── 📔 DIARIO — quaderno a righe, handwritten ──────────── */
#report-root[data-report-type="diario"] {
  --paper: oklch(0.98 0.015 230);
  --paper-2: oklch(0.995 0.006 230);
  --ink: oklch(0.30 0.06 255);
  --ink-2: oklch(0.44 0.06 255);
  --primary: oklch(0.58 0.14 255);
  --primary-deep: oklch(0.46 0.15 255);
  --primary-soft: oklch(0.93 0.04 250);
  --accent: oklch(0.82 0.10 90);
  background:
    linear-gradient(90deg, transparent 38px, oklch(0.62 0.18 25 / 0.35) 38px 40px, transparent 40px),
    repeating-linear-gradient(0deg, transparent 0 27px, oklch(0.58 0.14 255 / 0.13) 27px 28px),
    var(--paper);
}
#report-root[data-report-type="diario"] .report-hero h1,
#report-root[data-report-type="diario"] .diary-title {
  font-family: "Caveat", cursive;
  font-weight: 700;
}
#report-root[data-report-type="diario"] .report-hero h1 { font-size: clamp(44px, 8vw, 68px); }

/* ─── 💼 DATING — app, gradient tinder caldo ─────────────── */
#report-root[data-report-type="dating"] {
  --paper: oklch(0.98 0.02 25);
  --paper-2: oklch(1 0 0);
  --ink: oklch(0.21 0.02 20);
  --primary: oklch(0.66 0.19 25);
  --primary-deep: oklch(0.56 0.20 22);
  --primary-soft: oklch(0.94 0.05 25);
  --accent: oklch(0.78 0.16 42);
  --accent-3: oklch(0.72 0.17 350);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='16' y='46' font-size='30'%3E💘%3C/text%3E%3Ctext x='98' y='102' font-size='24'%3E🔥%3C/text%3E%3Ctext x='52' y='134' font-size='24'%3E😏%3C/text%3E%3C/svg%3E");
  background: linear-gradient(160deg, oklch(0.95 0.06 40), oklch(0.94 0.06 10) 60%, oklch(0.95 0.05 350));
}

/* ─── 🥂 ANNIVERSARY — champagne gold + rosa, elegante ───── */
#report-root[data-report-type="anniversary"] {
  --paper: oklch(0.97 0.025 82);
  --paper-2: oklch(0.99 0.014 82);
  --ink: oklch(0.26 0.03 45);
  --primary: oklch(0.74 0.10 75);
  --primary-deep: oklch(0.58 0.10 65);
  --primary-soft: oklch(0.94 0.05 80);
  --accent: oklch(0.84 0.09 22);
  --accent-3: oklch(0.82 0.09 350);
  background:
    radial-gradient(circle at 50% 8%, oklch(0.84 0.12 85 / 0.45), transparent 50%),
    radial-gradient(1.5px 1.5px at 20% 30%, oklch(0.80 0.12 85 / 0.5), transparent),
    radial-gradient(1.5px 1.5px at 80% 60%, oklch(0.80 0.12 85 / 0.45), transparent),
    var(--paper);
  background-size: 100% 100%, 180px 180px, 220px 220px, 100% 100%;
}
#report-root[data-report-type="anniversary"] .report-hero h1,
#report-root[data-report-type="anniversary"] .report-section > h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
}

/* ─── 👨‍👩‍👧 FAMIGLIA — caldo italiano, tovaglia a quadri ── */
#report-root[data-report-type="famiglia"] {
  --paper: oklch(0.96 0.025 75);
  --paper-2: oklch(0.985 0.018 80);
  --ink: oklch(0.27 0.04 45);
  --primary: oklch(0.60 0.13 145);
  --primary-deep: oklch(0.46 0.13 145);
  --primary-soft: oklch(0.92 0.05 120);
  --accent: oklch(0.68 0.15 42);
  --accent-2: oklch(0.60 0.20 27);
  background:
    repeating-linear-gradient(0deg,  oklch(0.62 0.20 27 / 0.06) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, oklch(0.62 0.20 27 / 0.06) 0 22px, transparent 22px 44px),
    var(--paper);
}

/* ─── 🎙️ DISCORSO — pergamena avorio invecchiata, oro, serif ─ */
#report-root[data-report-type="discorso"] {
  --paper: oklch(0.95 0.028 84);
  --paper-2: oklch(0.98 0.018 84);
  --ink: oklch(0.27 0.03 60);
  --primary: oklch(0.66 0.11 72);
  --primary-deep: oklch(0.52 0.11 68);
  --primary-soft: oklch(0.93 0.05 80);
  --accent: oklch(0.82 0.10 82);
  --emoji-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='18' y='46' font-size='28'%3E🎙️%3C/text%3E%3Ctext x='94' y='106' font-size='26'%3E🥂%3C/text%3E%3C/svg%3E");
  --emoji-opacity: 0.14;
  background:
    radial-gradient(ellipse at 50% -10%, oklch(0.74 0.10 80 / 0.30), transparent 50%),
    radial-gradient(ellipse at 50% 110%, oklch(0.66 0.09 75 / 0.22), transparent 55%),
    radial-gradient(circle at 12% 30%, oklch(0.60 0.08 70 / 0.10), transparent 30%),
    radial-gradient(circle at 88% 70%, oklch(0.60 0.08 70 / 0.10), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(0.55 0.06 75 / 0.035) 5px 6px),
    var(--paper);
  box-shadow: 6px 6px 0 var(--ink), inset 0 0 0 6px oklch(0.78 0.11 85 / 0.30), inset 0 0 40px oklch(0.55 0.08 70 / 0.12);
}
#report-root[data-report-type="discorso"] .report-hero h1,
#report-root[data-report-type="discorso"] .report-section > h2,
#report-root[data-report-type="discorso"] .speech-introline,
#report-root[data-report-type="discorso"] .toast-line,
#report-root[data-report-type="discorso"] .line-that-stays p {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
}

/* Rispetta prefers-reduced-motion: niente gradient/emoji animati */
@media (prefers-reduced-motion: reduce) {
  #report-root[data-report-type="wrapped"] { animation: none; }
  #report-root[data-report-type]::before,
  #report-root[data-report-type]::after { animation: none; }
}

/* Mobile: riduci padding del foglio tematico */
@media (max-width: 640px) {
  #report-root[data-report-type] {
    border-radius: 20px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  #report-root[data-report-type="discorso"] {
    box-shadow: 4px 4px 0 var(--ink), inset 0 0 0 5px oklch(0.78 0.11 85 / 0.30);
  }
}