/* Stili specifici delle schermate (percorso, lezione, correzioni, profilo). */

/* ================= Home: percorso a tappe ================= */
.home { --zig: 40px; --node: 64px; --node-test: 72px; --step: 104px; }

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.home-top .icon-btn { flex: none; }
.home-stats { min-width: 0; }
.home-stats .stats { gap: 6px; }
.home-stats .stat { padding: 0 10px; }

.home-head { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.home-head .lead { font-weight: var(--fw-medium); }

/* Banner correzioni */
.home-banner:empty { display: none; }
.review-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.review-banner-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--accent);
}
.review-banner-icon svg { width: 20px; height: 20px; }
.review-banner-text { flex: 1; min-width: 0; }
.review-banner-chevron { width: 20px; height: 20px; flex: none; color: var(--text-muted); transform: scaleX(-1); }
.review-banner:active { transform: scale(0.99); }
@media (hover: hover) { .review-banner:hover { border-color: var(--accent); } }

/* Unita' */
.unit + .unit { margin-top: var(--sp-7); }
.unit-head { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.unit-code {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.unit-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.unit-title { font-size: var(--fs-lg); }
.unit-count {
  flex: none;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.unit-count.is-done { background: var(--success-soft); color: var(--success); }

/* Colonna delle tappe */
.path-list {
  position: relative;
  list-style: none;
  padding: 0;
  display: grid;
}
.path-links {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.path-links line {
  stroke: var(--border-strong);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.1 9;
}
.path-links line.is-done { stroke: var(--success); }

.path-step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: var(--step);
}
.path-node-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transform: translateX(calc(var(--dx, 0) * var(--zig)));
}

.path-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-inset), var(--shadow-1);
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.path-node svg { width: 28px; height: 28px; }
.path-node:focus-visible { outline-offset: 4px; }
.path-node:active:not([aria-disabled="true"]) { transform: translateY(2px) scale(0.97); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18); }
.path-node.is-test { width: var(--node-test); height: var(--node-test); }
.path-node.is-test svg { width: 32px; height: 32px; }

.path-node.is-done { background: var(--success); color: var(--surface); }
.path-node.is-available,
.path-node.is-in_progress { box-shadow: var(--shadow-inset), 0 0 0 6px var(--primary-soft); }
.path-node.is-locked {
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--border-strong) 45%, transparent);
  cursor: not-allowed;
}
@media (hover: hover) {
  .path-node.is-available:hover,
  .path-node.is-in_progress:hover { background: var(--primary-hover); }
  .path-node.is-done:hover { background: color-mix(in srgb, var(--success) 88%, var(--text)); }
}

/* Anello pulsante leggero: tre impulsi all'apertura, poi fermo */
.path-node.is-available::after,
.path-node.is-in_progress::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 3px solid var(--primary);
  opacity: 0;
  pointer-events: none;
  animation: node-pulse 1000ms var(--ease-out) 300ms 3;
}
@keyframes node-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* Titolo accanto alla tappa */
.path-title {
  position: absolute;
  top: 50%;
  max-width: 11rem;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text);
}
.path-title.on-right { left: calc(50% + var(--dx, 0) * var(--zig) + var(--node) / 2 + var(--sp-3)); }
.path-title.on-left { right: calc(50% - var(--dx, 0) * var(--zig) + var(--node) / 2 + var(--sp-3)); text-align: right; }
.path-title.is-muted { color: var(--text-muted); font-weight: var(--fw-medium); }

/* Fumetto della tappa attuale */
.path-step.has-bubble { padding-bottom: var(--sp-4); }
.path-bubble {
  position: relative;
  z-index: 2;
  width: min(100%, 300px);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  text-align: center;
  animation: bubble-in var(--dur) var(--ease-out) backwards;
}
.path-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: calc(50% - 8px + var(--dx, 0) * var(--zig));
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.path-bubble-kicker { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.path-bubble-title { font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-4px); } }

/* Scheletri a forma di tappe */
.path-skeleton .unit-head { gap: var(--sp-2); }
.skel-node { width: var(--node); height: var(--node); border-radius: var(--radius-full); }

/* Errore e percorso vuoto */
.path-error, .path-empty { display: grid; justify-items: start; gap: var(--sp-2); }
.path-error .state-icon { margin-bottom: 0; }
.path-error .btn { margin-top: var(--sp-3); }
.path-error-title { font-weight: var(--fw-bold); font-size: var(--fs-lg); }

/* CTA in basso (con la nota "Nuove lezioni in arrivo" la barra e' piu' alta) */
.screen.home.has-bar { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
.home-cta-done { flex: 1; display: grid; gap: var(--sp-1); text-align: center; }

/* Pannello laterale: solo da 1024px */
.home-side-slot { display: none; }
.side-card { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.side-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: 0; }
.side-value { font-size: var(--fs-base); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.side-value strong { font-size: var(--fs-xl); color: var(--text); }
.side-streak { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); }
.side-streak svg { width: 28px; height: 28px; color: var(--accent); }
.side-streak.is-off svg { color: var(--text-muted); }
.side-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.side-row strong { color: var(--text); }

/* Telefono stretto: l'anello resta, il testo X/Y e' nel suo aria-label */
@media (max-width: 399.98px) {
  .home-stats .stat-goal { width: var(--tap); padding: 0; justify-content: center; }
  .home-stats .stat-goal > span { display: none; }
}
@media (max-width: 374.98px) {
  .home { --zig: 32px; }
  .path-title { max-width: 8.5rem; }
}

@media (min-width: 1024px) {
  .screen.home { max-width: var(--wide); }
  .home { --zig: 56px; }
  .home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-7);
    align-items: start;
  }
  .home-side-slot { display: block; position: sticky; top: var(--sp-6); }
  .home-side { display: grid; gap: var(--sp-4); }
  .path-title { max-width: 14rem; }
  .home-bar .bottom-bar-inner {
    max-width: var(--wide);
    padding-right: calc(320px + var(--sp-7));
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-node.is-available::after,
  .path-node.is-in_progress::after { animation: none; }
  .path-node:active:not([aria-disabled="true"]) { transform: none; }
  .path-bubble { animation-name: fade-in; }
  .review-banner:active { transform: none; }
  .skel { animation: none; }
}

/* ================= Lezione: player ================= */
.lesson-top {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) var(--sp-5);
  padding: var(--sp-2);
  background: var(--bg);
}
.lesson-close { flex: none; margin-left: calc(-1 * var(--sp-2)); }
.lesson-progress { flex: 1; height: 12px; }

.lesson-stage { position: relative; }
.lesson-item {
  display: grid;
  gap: var(--sp-4);
  animation: item-in var(--dur) var(--ease-out) backwards;
}
.lesson-item.is-leaving {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
  animation: item-out var(--dur-fast) var(--ease-in) forwards;
}
@keyframes item-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes item-out { to { opacity: 0; transform: translateX(-24px); } }

.lesson-kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.lesson-title, .ex-prompt { font-size: var(--fs-xl); }
.lesson-card .lesson-kicker { margin-bottom: calc(-1 * var(--sp-2)); }
.lesson-kicker-al2 {
  display: inline-flex;
  width: fit-content;
  padding: 2px var(--sp-3);
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-full);
}
.lesson-body { display: grid; gap: var(--sp-3); line-height: 1.6; }
.lesson-body ul { padding-left: 1.25em; display: grid; gap: var(--sp-2); }
.lesson-body strong { font-weight: var(--fw-semibold); }

/* Fonte della scheda teorica */
.lesson-source {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.lesson-source svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* Riquadro "Caso reale" */
.case-box {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.case-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-label svg { width: 16px; height: 16px; color: var(--accent); }
.case-client { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.case-text { color: var(--text); }

/* Esercizio */
.ex-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: calc(-1 * var(--sp-2)); }
.ex-skill {
  padding: 2px var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.badge-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-3) 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.badge-retry svg { width: 14px; height: 14px; color: var(--accent); }
.ex-area { margin-top: var(--sp-2); }
.ex-error { margin-top: calc(-1 * var(--sp-1)); }
.ex-placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.ex-placeholder svg { width: 22px; height: 22px; flex: none; }

/* Quiz */
.quiz-options { display: grid; gap: var(--sp-3); }
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--border);
  text-align: left;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
.quiz-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.quiz-badge svg { width: 18px; height: 18px; }
.quiz-text { flex: 1; min-width: 0; }
@media (hover: hover) {
  .quiz-options:not(.is-locked) .quiz-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
}
.quiz-options:not(.is-locked) .quiz-option:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); }
.quiz-option[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 0 var(--primary); }
.quiz-option[aria-checked="true"] .quiz-badge { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.quiz-options.is-locked .quiz-option { cursor: default; }
.quiz-options.is-locked .quiz-option:not(.is-right):not(.is-wrong) { opacity: 0.6; }
.quiz-option.is-right { border-color: var(--success); background: var(--success-soft); box-shadow: 0 2px 0 var(--success); }
.quiz-option.is-right .quiz-badge { border-color: var(--success); background: var(--success); color: var(--surface); }
.quiz-option.is-wrong { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 2px 0 var(--danger); }
.quiz-option.is-wrong .quiz-badge { border-color: var(--danger); background: var(--danger); color: var(--surface); }

/* Ordina */
.order { display: grid; gap: var(--sp-3); }
.order-hint { margin-top: calc(-1 * var(--sp-2)); }
.order-hint[hidden] { display: none; }
.order-list { position: relative; display: grid; gap: var(--sp-2); }
.order-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--border);
  text-align: left;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
.order-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}
.order-grip svg { width: 20px; height: 20px; }
.order-pos {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) {
  .order:not(.is-locked) .order-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
  .order:not(.is-locked) .order-row:hover .order-grip { color: var(--text); }
}
.order-row[aria-pressed="true"],
.order:not(.is-locked) .order-row[aria-pressed="true"]:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.order-row[aria-pressed="true"] .order-pos { background: var(--primary); color: var(--on-primary); }
.order-list.has-lifted .order-row[aria-pressed="false"] { border-style: dashed; }
.order-list.is-sorting .order-row:not(.is-dragging) { transition: transform var(--dur) var(--ease-out); }
.order-row.is-dragging,
.order:not(.is-locked) .order-row.is-dragging:hover {
  z-index: 2;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  cursor: grabbing;
  transition: none;
}
.order-row.is-dragging .order-grip { cursor: grabbing; color: var(--primary); }
.order.is-locked .order-row, .order.is-locked .order-grip { cursor: default; }
.order-row.is-right { border-color: var(--success); background: var(--success-soft); box-shadow: 0 2px 0 var(--success); }
.order-row.is-right .order-grip { color: var(--success); }
.order-row.is-wrong { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 2px 0 var(--danger); }
.order-row.is-wrong .order-grip { color: var(--danger); }
.order-solution, .match-solution {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  animation: fade-in var(--dur) var(--ease-out);
}
.order-solution[hidden], .match-solution[hidden] { display: none; }
.order-solution-title, .match-solution-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.order-reveal { display: grid; gap: var(--sp-1); padding-left: 1.5em; font-weight: var(--fw-medium); }
.order-reveal li::marker { font-weight: var(--fw-bold); color: var(--text-muted); }

/* Abbina */
.match-wrap { display: grid; gap: var(--sp-3); }
.match-hint { margin-top: calc(-1 * var(--sp-2)); }
.match-hint[hidden] { display: none; }
.match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.match-col { display: grid; gap: var(--sp-2); align-content: start; }
.match-chip {
  --tint: var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--border);
  text-align: left;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
.match-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.match-badge {
  display: none;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--tint);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.match-badge svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .match-wrap:not(.is-locked) .match-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
}
.match-wrap:not(.is-locked) .match-chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border); }
/* Coppie: stesso numero e stessa tinta neutra (verde e rosso sono riservati all'esito). */
.match-chip[data-tint="1"] { --tint: var(--primary); }
.match-chip[data-tint="2"] { --tint: var(--accent); }
.match-chip[data-tint="3"] { --tint: var(--border-strong); }
.match-chip[data-tint="4"] { --tint: var(--text); }
.match-chip.is-paired,
.match-wrap:not(.is-locked) .match-chip.is-paired:hover {
  border-color: var(--tint);
  background: color-mix(in srgb, var(--tint) 10%, var(--surface));
  box-shadow: 0 2px 0 var(--tint);
}
.match-chip.is-paired .match-badge { display: inline-grid; animation: badge-in var(--dur) var(--ease-out); }
@keyframes badge-in { from { opacity: 0; transform: scale(0.6); } }
.match-chip[aria-pressed="true"],
.match-wrap:not(.is-locked) .match-chip[aria-pressed="true"]:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 0 var(--primary-hover);
}
.match.is-targeting .match-right .match-chip:not(.is-paired) { border-style: dashed; border-color: var(--primary); }
.match-left.is-hinting .match-chip:not(.is-paired) { animation: hint-pulse 600ms var(--ease-out); }
@keyframes hint-pulse { 50% { border-color: var(--primary); background: var(--primary-soft); } }
.match-wrap.is-locked .match-chip { cursor: default; }
.match-wrap.is-locked .match-chip.is-right { border-color: var(--success); background: var(--success-soft); box-shadow: 0 2px 0 var(--success); }
.match-wrap.is-locked .match-chip.is-right .match-badge { border-color: var(--success); background: var(--success); color: var(--surface); }
.match-wrap.is-locked .match-chip.is-wrong { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 2px 0 var(--danger); }
.match-wrap.is-locked .match-chip.is-wrong .match-badge { border-color: var(--danger); background: var(--danger); color: var(--surface); }
.match-reveal { display: grid; gap: var(--sp-1); padding: 0; list-style: none; font-weight: var(--fw-medium); }
.match-reveal li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.match-reveal-left { font-weight: var(--fw-semibold); }
.match-reveal-arrow { color: var(--text-muted); }

/* Calcola */
.calc { display: grid; gap: var(--sp-2); }
.calc-field { display: flex; align-items: center; gap: var(--sp-3); }
.calc-box { position: relative; flex: 1; min-width: 0; }
.calc-input {
  min-height: 64px;
  padding-left: 48px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-width: 2px;
}
.calc-unit { flex: none; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-muted); }
.calc-status {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  pointer-events: none;
}
.calc-status:empty { display: none; }
.calc-status svg { width: 24px; height: 24px; }
.calc.is-right .calc-input, .calc.is-right .calc-input:hover { border-color: var(--success); background: var(--success-soft); }
.calc.is-right .calc-status { color: var(--success); }
.calc.is-wrong .calc-input, .calc.is-wrong .calc-input:hover { border-color: var(--danger); background: var(--danger-soft); }
.calc.is-wrong .calc-status { color: var(--danger); }
.calc-result {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  animation: fade-in var(--dur) var(--ease-out);
}
.calc-result[hidden] { display: none; }
.calc-result svg { width: 20px; height: 20px; flex: none; color: var(--success); }

/* Scenario a chat */
.chat { display: grid; gap: var(--sp-4); }
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.chat-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.chat-who { display: grid; min-width: 0; line-height: 1.3; }
.chat-name { font-weight: var(--fw-semibold); }
.chat-role { font-size: var(--fs-sm); color: var(--text-muted); }
.chat-log { display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-row, .chat-choices, .chat-end { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
.chat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  animation: bubble-in var(--dur) var(--ease-out) backwards;
}
.chat-row.from-me { align-items: flex-end; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } }
.chat-bubble {
  max-width: min(85%, 480px);
  padding: 10px var(--sp-4);
  border-radius: 18px;
  overflow-wrap: anywhere;
}
.from-client .chat-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
  color: var(--text);
}
.from-me .chat-bubble {
  background: var(--primary);
  color: var(--on-primary);
  border-bottom-right-radius: 6px;
}
.chat-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 46px; }
.chat-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  animation: typing-dot 900ms ease-in-out infinite;
}
.chat-dot:nth-of-type(3) { animation-delay: 150ms; }
.chat-dot:nth-of-type(4) { animation-delay: 300ms; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: fade-in var(--dur) var(--ease-out);
}
.chat-end::before, .chat-end::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Dopo la risposta: spazio perche' l'ultima parte (commenti del coach, risposta modello)
   possa scorrere sopra lo sheet. */
.chat.is-locked, .open.is-locked { padding-bottom: 200px; }

.chat-choices { display: grid; justify-items: end; gap: var(--sp-2); }
.chat-choices:empty { display: none; }
.chat-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: min(92%, 520px);
  min-height: 48px;
  padding: 10px var(--sp-4) 10px var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--primary);
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  animation: bubble-in var(--dur) var(--ease-out) backwards;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.chat-choice:nth-child(2) { animation-delay: 40ms; }
.chat-choice:nth-child(3) { animation-delay: 80ms; }
.chat-choice:active { transform: scale(0.98); background: var(--primary-soft); }
@media (hover: hover) { .chat-choice:hover { background: var(--primary-soft); } }
.chat-choice-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.chat-outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tone, var(--border-strong));
  background: var(--tone-soft, var(--surface-2));
  scroll-margin-top: 80px;
  animation: fade-in var(--dur) var(--ease-out);
}
.chat-outcome[hidden] { display: none; }
.chat-outcome.is-cash { --tone: var(--success); --tone-soft: var(--success-soft); }
.chat-outcome.is-merce { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.chat-outcome.is-ko { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.chat-outcome-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--tone); color: var(--surface); }
.chat-outcome-icon svg { width: 22px; height: 22px; }
.chat-outcome-text { display: grid; gap: 2px; min-width: 0; }
.chat-outcome-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; }

.chat-coach {
  display: grid;
  gap: 2px;
  max-width: min(85%, 480px);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone);
  border-radius: var(--radius-sm);
  animation: fade-in var(--dur) var(--ease-out);
}
.chat-coach.is-good { --tone: var(--success); }
.chat-coach.is-fair { --tone: var(--accent); }
.chat-coach.is-bad { --tone: var(--danger); }
.chat-coach-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.chat-coach-label svg { width: 16px; height: 16px; flex: none; color: var(--tone); }
.chat-coach-text { font-size: var(--fs-sm); color: var(--text-muted); }

/* Risposta aperta */
.open { display: grid; gap: var(--sp-2); }
.open-input {
  display: block;
  min-height: calc(6 * 1.5em + 2 * var(--sp-3) + 2px);
  padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh);
  resize: none;
  overflow: hidden;
}
.open-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); }
.open-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) ease;
}
.open-count.is-met { color: var(--success); }
.open-count-icon { display: inline-grid; }
.open-count-icon:empty { display: none; }
.open-count-icon svg { width: 16px; height: 16px; animation: badge-in var(--dur) var(--ease-out); }
.open-keys[hidden] { display: none; }
@media (hover: none) and (pointer: coarse) { .open-keys { display: none; } }
.open.is-locked .open-input { background: var(--surface-2); border-color: var(--border); cursor: default; }
.open-result { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); animation: fade-in var(--dur) var(--ease-out); }
.open-result[hidden] { display: none; }
.open-model {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}
.open-model-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.open-model-text { white-space: pre-line; }
.open-note { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.open-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--primary); }

/* Elenchi nello sheet (ordine e abbinamento corretti) */
.sheet-reveal .order-reveal, .sheet-reveal .match-reveal { margin-top: var(--sp-2); }

/* Sheet: risposta giusta o risposta modello */
.sheet-reveal {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-weight: var(--fw-semibold);
}
.sheet-error .sheet-reveal { background: var(--success-soft); border-left: 4px solid var(--success); }

@media (min-width: 640px) {
  .lesson-title, .ex-prompt { font-size: var(--fs-2xl); }
  .open-input { min-height: calc(8 * 1.5em + 2 * var(--sp-3) + 2px); }
}

/* ================= Fine lezione ================= */
.done { display: flex; flex-direction: column; gap: var(--sp-5); }
.done-hero { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding-top: var(--sp-5); }
.done-trophy {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  animation: trophy-in var(--dur-slow) var(--ease-out) backwards;
}
.done-trophy svg { width: 48px; height: 48px; }
.done.is-failed .done-trophy { background: var(--surface-2); color: var(--text-muted); }
@keyframes trophy-in { from { opacity: 0; transform: scale(0.8); } }
.done-perfect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.done-perfect svg { width: 16px; height: 16px; color: var(--success); }

.done-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.done-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-align: center;
  animation: tile-in var(--dur) var(--ease-out) backwards;
}
.done-tile:nth-child(2) { animation-delay: 60ms; }
.done-tile:nth-child(3) { animation-delay: 120ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(8px); } }
.done-tile-icon svg { width: 22px; height: 22px; }
.done-tile.is-xp .done-tile-icon { color: var(--primary); }
.done-tile.is-acc .done-tile-icon { color: var(--success); }
.done-tile.is-streak .done-tile-icon { color: var(--accent); }
.done-tile-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); line-height: 1.3; }
.done-tile-value { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.2; }

.done-goal { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.done-goal .ring { width: 56px; height: 56px; flex: none; }
.done-goal .ring circle { stroke-width: 3.5; }
.done-goal-text { display: grid; gap: 2px; min-width: 0; }
.done-goal-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: 0; }
.done-goal-value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.done-goal-value strong { font-size: var(--fs-xl); color: var(--text); }

@media (min-width: 640px) {
  .done-tile-value { font-size: var(--fs-xl); }
}

/* ================= Schermate secondarie (correzioni, profilo) ================= */
.sub-top { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4) calc(-1 * var(--sp-2)); }
.sub-back { flex: none; }
.sub-title { font-size: var(--fs-xl); min-width: 0; }
.sub-top-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.sub-lead { margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.empty-state { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-6) var(--sp-5); color: var(--text-muted); }
.empty-state .state-icon { margin-bottom: 0; }
.empty-state p { max-width: 36ch; }

/* Correzioni */
.review-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.review-card { padding: 0; overflow: hidden; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.review-card.is-open { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.review-head { font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: inherit; text-wrap: pretty; }
.review-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta chev" "prompt chev";
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-fast) ease;
}
.review-toggle:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .review-toggle:hover { background: var(--surface-2); } }
.review-toggle:active { background: var(--surface-2); }
.review-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.review-prompt { grid-area: prompt; font-weight: var(--fw-semibold); color: var(--text); }
.review-chevron { grid-area: chev; width: 22px; height: 22px; color: var(--text-muted); transition: transform var(--dur) var(--ease-out); }
.review-toggle[aria-expanded="true"] .review-chevron { transform: rotate(180deg); }
.review-score { display: inline-flex; align-items: center; gap: var(--sp-2); }
.review-dots { display: inline-flex; gap: 4px; }
.review-dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--border-strong); }
.review-dot.is-on { background: var(--accent); border-color: var(--accent); }
.review-score-text { font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); }
.review-date { font-size: var(--fs-sm); color: var(--text-muted); }
.review-panel { display: grid; gap: var(--sp-4); padding: 0 var(--sp-5) var(--sp-5); animation: fade-in var(--dur) var(--ease-out); }
.review-panel[hidden] { display: none; }
.review-panel::before { content: ''; height: 1px; background: var(--border); }
.review-section { display: grid; gap: var(--sp-2); }
.review-section-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.review-answer { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-radius: var(--radius); white-space: pre-line; overflow-wrap: anywhere; }
.review-points { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.review-points li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.review-points svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.review-points.is-good svg { color: var(--success); }
.review-points.is-improve svg { color: var(--accent); }
.review-example {
  padding: var(--sp-3) var(--sp-4);
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  border-radius: 0 var(--radius) var(--radius) 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Profilo */
.profile { display: flex; flex-direction: column; gap: var(--sp-5); }
.profile .sub-top { margin-bottom: calc(-1 * var(--sp-2)); }
.profile-id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.profile-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.profile-id-text { display: grid; gap: 2px; min-width: 0; }
.profile-name { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.profile-email { color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.profile-tile { grid-template-rows: auto minmax(2.6em, auto) auto 1fr; align-items: start; }
.profile-tile .done-tile-label { align-self: center; }
.profile-tile-note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.profile-card { display: grid; gap: var(--sp-2); }
.profile-card-title { font-size: var(--fs-lg); }
.radar-wrap { margin: var(--sp-2) calc(-1 * var(--sp-4)) 0; }
.radar { width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: var(--border); stroke-width: 1.5; }
.radar-grid polygon:last-of-type { stroke: var(--border-strong); stroke-opacity: 0.5; }
.radar-area { fill: var(--primary); fill-opacity: 0.25; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.radar-dots circle { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.radar-labels text { font-family: var(--font); font-size: 16px; fill: var(--text); }
.radar-name { font-weight: var(--fw-semibold); }
.radar-value { fill: var(--text-muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.radar-value.is-empty { font-style: italic; }

.setting-row { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); }
.setting-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-full); background: var(--primary-soft); color: var(--primary); }
.setting-icon svg { width: 20px; height: 20px; }
.setting-text { display: grid; flex: 1; min-width: 0; }
.setting-label { font-weight: var(--fw-semibold); }

.profile-footer { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }

/* Codice per collegare un altro dispositivo */
.pair-code-digits {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  animation: fade-in var(--dur) var(--ease-out);
}
.pair-digit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.pair-countdown {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pair-instructions { margin-top: var(--sp-1); text-align: center; }

@media (max-width: 399.98px) {
  .profile-tiles { gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-item { animation-name: fade-in; }
  .lesson-item.is-leaving { animation-name: fade-out; }
  .quiz-options:not(.is-locked) .quiz-option:active { transform: none; }
  .match-wrap:not(.is-locked) .match-chip:active, .order-row[aria-pressed="true"] { transform: none; }
  .match-chip.is-paired .match-badge { animation-name: fade-in; }
  .match-left.is-hinting .match-chip:not(.is-paired) { animation: none; }
  .done-trophy, .done-tile { animation-name: fade-in; }
  .chat-row, .chat-choice { animation-name: fade-in; }
  .chat-choice:active { transform: none; }
  .chat-dot { animation: none; }
  .open-count-icon svg { animation-name: fade-in; }
  .review-chevron { transition: none; }
}
@keyframes fade-out { to { opacity: 0; } }

/* ================= Pannello admin ================= */
/* Voce "Pannello" nella home (solo admin) */
.home-top-links { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.home-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.home-admin-link svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.home-admin-link:active { transform: scale(0.96); }
@media (hover: hover) { .home-admin-link:hover { background: var(--surface-2); border-color: var(--border-strong); } }
@media (max-width: 459.98px) {
  .home-admin-link { padding: 0; }
  .home-admin-text { display: none; }
}
/* Con la voce admin in piu' le pillole delle statistiche si stringono un poco per restare su una riga. */
@media (max-width: 399.98px) {
  .home-top:has(.home-admin-link) .home-stats .stat:not(.stat-goal) { padding: 0 8px; }
}

.admin { display: flex; flex-direction: column; gap: var(--sp-5); }
.admin .sub-top { margin-bottom: calc(-1 * var(--sp-2)); }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
.admin-head h1 { min-width: 0; }
.admin-head .lead { flex-basis: 100%; margin-top: calc(-1 * var(--sp-2)); font-size: var(--fs-sm); }
.admin-head-link { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.admin-section { display: grid; gap: var(--sp-3); }
.admin-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.admin-section-title { font-size: var(--fs-lg); }
.admin-count { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.admin-btn-sm { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.admin-btn-sm svg { width: 18px; height: 18px; }
.admin-empty { color: var(--text-muted); font-size: var(--fs-sm); }

/* Correzioni in attesa */
.admin-pending { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.admin-pending.has-pending { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.admin-pending-icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--success-soft); color: var(--success);
}
.admin-pending.has-pending .admin-pending-icon { background: var(--surface); color: var(--accent); }
.admin-pending-icon svg { width: 20px; height: 20px; }
.admin-pending-text { display: grid; gap: 2px; min-width: 0; }
.admin-pending-title { font-size: var(--fs-base); letter-spacing: 0; }
.admin-pending-note { font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.admin-pending-note code, .admin-alert code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.875em;
}

/* Tabella persone: card su telefono, tabella da 768px */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead { display: none; }
.admin-table tbody { display: grid; gap: var(--sp-3); }
.admin-tr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.admin-tr:active { transform: scale(0.99); }
@media (hover: hover) { .admin-tr:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } }
.admin-tr:focus-within { border-color: var(--primary); }
.admin-td { display: grid; align-content: start; gap: 2px; min-width: 0; text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-td::before { content: attr(data-label); white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.admin-td-name { grid-column: 1 / -1; padding-right: var(--sp-6); font-size: var(--fs-base); }
.admin-td-name::before { content: none; }
.admin-td-date, .admin-td-unit { grid-column: span 2; }
.admin-td-chev { position: absolute; top: var(--sp-4); right: var(--sp-4); color: var(--text-muted); }
.admin-td-chev::before { content: none; }
.admin-td-chev svg { width: 20px; height: 20px; }
.admin-row-link { color: var(--text); font-weight: var(--fw-bold); text-decoration: none; }
.admin-row-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.admin-row-link:focus-visible { outline: none; }
.admin-row-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.admin-email { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.admin-role {
  justify-self: start;
  margin-top: 2px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

@media (min-width: 768px) {
  .screen.admin-wide { max-width: var(--wide); }
  .admin-table {
    display: table;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
  }
  .admin-table thead { display: table-header-group; }
  .admin-table thead th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .admin-table tbody { display: table-row-group; }
  .admin-tr { display: table-row; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .admin-tr:active { transform: none; }
  @media (hover: hover) { .admin-tr:hover { background: var(--surface-2); } }
  .admin-td { display: table-cell; padding: var(--sp-3) var(--sp-4); vertical-align: middle; border-bottom: 1px solid var(--border); font-weight: var(--fw-medium); }
  .admin-tr:last-child .admin-td { border-bottom: 0; }
  .admin-td::before { content: none; }
  .admin-td-name { padding-right: var(--sp-4); }
  .admin-td-name > * { display: block; }
  .admin-role { display: inline-block; }
  .admin-td-chev { position: static; width: 44px; padding-left: 0; }
  .admin-table .is-num { text-align: right; white-space: nowrap; }
}

/* Scheda persona */
.admin-person-body { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Colonne a larghezza minima zero: i campi dei moduli non allargano le card oltre lo schermo. */
.admin-card, .admin-answers, .admin-answer, .admin-review, .admin-review-form, .admin-fieldset, .pv-card { grid-template-columns: minmax(0, 1fr); }
.admin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.done-tile.is-test .done-tile-icon { color: var(--accent); }
@media (min-width: 560px) { .admin-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.admin-card { display: grid; gap: var(--sp-3); }
.admin-card-title { font-size: var(--fs-lg); }
.admin-unit { display: grid; gap: var(--sp-2); }
.admin-unit + .admin-unit { margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.admin-unit-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-base); letter-spacing: 0; }
.admin-steps { list-style: none; padding: 0; display: grid; }
.admin-step { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) 0; border-radius: var(--radius-sm); }
.admin-step + .admin-step { border-top: 1px solid var(--border); }
.admin-step:focus-visible { outline-offset: 2px; }
.admin-step-icon {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary-soft); color: var(--primary);
}
.admin-step-icon svg { width: 16px; height: 16px; }
.admin-step.is-done .admin-step-icon { background: var(--success-soft); color: var(--success); }
.admin-step.is-locked .admin-step-icon { background: var(--surface-2); color: var(--text-muted); }
.admin-step-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.admin-step-title { font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.admin-step.is-locked .admin-step-title { color: var(--text-muted); }
.admin-step-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.admin-state { font-weight: var(--fw-semibold); color: var(--text); }
.admin-state.is-done { color: var(--success); }
.admin-state.is-locked { color: var(--text-muted); }
.admin-step .btn { flex: none; }

.admin-list { list-style: none; padding: 0; display: grid; }
.admin-list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.admin-list-row + .admin-list-row { border-top: 1px solid var(--border); }
.admin-list-text { flex: 1; min-width: 0; display: grid; gap: var(--sp-1); }
.admin-list-title { font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.admin-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-pill svg { width: 14px; height: 14px; flex: none; }
.admin-pill.is-done { background: var(--success-soft); }
.admin-pill.is-done svg { color: var(--success); }
.admin-pill.is-failed { background: var(--danger-soft); }
.admin-pill.is-failed svg { color: var(--danger); }
.admin-pill.is-none svg { color: var(--text-muted); }

.admin-answers { list-style: none; padding: 0; display: grid; }
.admin-answer { display: grid; gap: var(--sp-3); padding: var(--sp-4) 0; }
.admin-answer:first-child { padding-top: 0; }
.admin-answer + .admin-answer { border-top: 1px solid var(--border); }
.admin-answer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.admin-answer-prompt { font-size: var(--fs-base); letter-spacing: 0; line-height: 1.4; text-wrap: pretty; }
.admin-review { display: grid; gap: var(--sp-4); }
.admin-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.admin-review-actions .admin-pill { animation: fade-in var(--dur) var(--ease-out); }

.admin-review-form { display: grid; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); animation: fade-in var(--dur) var(--ease-out); }
.admin-review-form .field + .field { margin-top: 0; }
.admin-textarea { min-height: 96px; padding: var(--sp-3) var(--sp-4); line-height: var(--lh); resize: vertical; }
.score-group { border: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.score-group legend { padding: 0; margin-bottom: var(--sp-2); }
.score-row { display: flex; gap: var(--sp-2); }
.score-opt { position: relative; flex: 1; max-width: 64px; }
.score-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.score-label {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
@media (hover: hover) { .score-radio:hover + .score-label { border-color: var(--primary); } }
.score-radio:checked + .score-label { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.score-radio:focus-visible + .score-label { outline: 3px solid var(--focus); outline-offset: 2px; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
@media (max-width: 479.98px) {
  .admin-review-form { padding: var(--sp-3); }
  .admin-form-actions { flex-direction: column; }
}

/* Elenco lezioni */
.admin-lesson-list { list-style: none; padding: 0; overflow: hidden; }
.admin-lesson-list > li + li { border-top: 1px solid var(--border); }
.admin-lesson-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease;
}
.admin-lesson-row:focus-visible { outline-offset: -3px; }
.admin-lesson-row:active { background: var(--surface-2); }
@media (hover: hover) { .admin-lesson-row:hover { background: var(--surface-2); } }
.admin-lesson-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); }
.admin-lesson-icon.is-test { background: var(--accent-soft); color: var(--accent); }
.admin-lesson-icon svg { width: 18px; height: 18px; }
.admin-lesson-text { flex: 1; min-width: 0; display: grid; gap: var(--sp-1); }
.admin-lesson-title { font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.admin-lesson-meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.admin-lesson-chev { width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.admin-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.status-badge.is-published { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.status-badge.is-published::before { background: var(--success); }
.status-badge.is-draft { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.status-badge.is-draft::before { background: var(--accent); }

/* Lezione: intestazione, schede, editor */
.admin-lesson-head { display: grid; gap: var(--sp-2); }
.admin-lesson-h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.admin-lesson-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.admin-dirty { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); }
.admin-dirty:empty { display: none; }
@media (min-width: 640px) { .admin-lesson-h1 { font-size: var(--fs-2xl); } }

.admin-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-tab {
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
@media (hover: hover) { .admin-tab:hover { color: var(--text); } }
.admin-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.admin-panel { animation: fade-in var(--dur) var(--ease-out); }
.admin-panel[hidden] { display: none; }
.admin-lesson .bottom-bar .btn[hidden] { display: none; }

.admin-alert {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--text);
}
.admin-alert[hidden] { display: none; }
.admin-alert:focus-visible { outline-offset: 2px; }
.admin-alert-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--danger); }
.admin-alert-title svg { width: 20px; height: 20px; flex: none; }
.admin-alert-list { padding-left: 1.25em; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); overflow-wrap: anywhere; }

.admin-edit-lead { margin-bottom: var(--sp-4); }
.admin-fieldset { display: grid; gap: var(--sp-4); min-width: 0; margin: 0; }
.admin-fieldset + .admin-fieldset { margin-top: var(--sp-4); }
.admin-fieldset .field + .field { margin-top: 0; }
.admin-legend { float: left; width: 100%; margin-bottom: var(--sp-1); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.admin-legend + * { clear: both; }
.admin-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.admin-warning svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }

/* Anteprima con soluzioni */
.pv { display: grid; gap: var(--sp-4); }
.pv-card { display: grid; gap: var(--sp-3); }
.pv-card .ex-meta { margin-bottom: 0; justify-content: space-between; }
.pv-title { font-size: var(--fs-lg); line-height: 1.3; overflow-wrap: anywhere; }
.pv-stack { display: grid; gap: var(--sp-3); }
.pv-subtitle { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pv-solution {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pv-solution-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pv-solution-title svg { width: 16px; height: 16px; color: var(--success); flex: none; }
.pv-options { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.pv-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pv-option.is-right { border-color: var(--success); background: var(--success-soft); }
.pv-option-badge {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.pv-option.is-right .pv-option-badge { border-color: var(--success); background: var(--success); color: var(--surface); }
.pv-option-badge svg { width: 16px; height: 16px; }
.pv-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pv-tag {
  padding: 0 var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
}
.pv-calc strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.pv-rubric { display: grid; gap: var(--sp-2); }
.pv-rubric-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.pv-rubric-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.pv-weight { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.pv-explain { display: grid; gap: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pv-persona { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); }
.pv-persona svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.pv-nodes { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.pv-node { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.pv-node-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pv-node-name .pv-tag { letter-spacing: 0; text-transform: none; }
.pv-say { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--surface-2); }
.pv-node.is-end { border-left: 4px solid var(--border-strong); }
.pv-node.is-cash { border-left-color: var(--success); }
.pv-node.is-merce { border-left-color: var(--accent); }
.pv-node.is-ko { border-left-color: var(--danger); }
.pv-choices { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.pv-choice { display: grid; gap: 2px; padding-left: var(--sp-3); border-left: 3px solid var(--border-strong); }
.pv-choice.is-score-2 { border-left-color: var(--success); }
.pv-choice.is-score-1 { border-left-color: var(--accent); }
.pv-choice.is-score-0 { border-left-color: var(--danger); }
.pv-choice-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.pv-score { flex: none; padding: 0 var(--sp-2); border-radius: var(--radius-full); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pv-choice-text { flex: 1 1 12rem; min-width: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pv-next { flex: none; font-size: var(--fs-xs); color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

@media (prefers-reduced-motion: reduce) {
  .admin-tr:active, .home-admin-link:active { transform: none; }
}