:root {
    --primary-color: #802433;
    --primary-dark: #5c1a26;
    --primary-light: #a8324a;
    /* Glossary accents */
    --glossary-primary: #e53935; /* rosso brillante */
    --glossary-selection: #9f3243; /* bordeaux un po' più scuro per le selezioni */
    --glossary-highlight-color: var(--glossary-selection);
    --glossary-highlight-outline: rgba(106, 28, 51, 0.75);
    --glossary-highlight-shadow: rgba(106, 28, 51, 0.38);
    --glossary-highlight-shadow-strong: rgba(106, 28, 51, 0.6);
    --glossary-highlight-shadow-glow: rgba(106, 28, 51, 0.2);
    --glossary-bubble-gradient-start: #a73c4f;
    --glossary-bubble-gradient-end: #8f2c3f;
    --glossary-highlight-gradient: linear-gradient(180deg, var(--glossary-bubble-gradient-start), var(--glossary-bubble-gradient-end));
    /* Streak palette */
    --streak-success-1: #1abc9c;
    --streak-success-2: #2ecc71;
    --streak-warn-1: #fcb045;
    --streak-warn-2: #fd1d1d;
    --streak-danger-1: #e74c3c;
    --streak-danger-2: #8e1d22;
    --streak-neutral: #f1f2f6;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-dark: rgba(20, 20, 20, 0.6);
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #333;
    --success-color: #27ae60;
    --warning-acolor: #f39c12;
    --warning-color: #f39c12;
    --danger-color: rgba(210, 4, 4, 0.91);
    --text-color: #333;
    --text-light: #777;
    --white: #fff;
    --surface-page: #f5f5f5;
    --surface-card: #ffffff;
    --surface-panel: #faf7f8;
    --surface-border: rgba(15, 23, 42, 0.08);
    --surface-border-strong: rgba(15, 23, 42, 0.12);
    --shadow-card-soft: 0 16px 30px rgba(15, 23, 42, 0.08);
    --shadow-card-strong: 0 28px 48px rgba(15, 23, 42, 0.16);
    --button-gloss: rgba(255, 255, 255, 0.25);
    --button-gloss-strong: rgba(255, 255, 255, 0.45);
    --button-gloss-max: rgba(255, 255, 255, 0.8);
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --flashcards-header-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--surface-page);
    background-image: url('../immagini-logo/sfondo.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
}

/* Banner cookie aperto su desktop: rimuovi qualsiasi sfondo illustrato dall'auth screen */
body.cookie-banner-open.desktop-view {
    background-image: none;
    background-color: var(--surface-page);
}

body.cookie-banner-open.desktop-view #auth-screen {
    background: none;
}

/* Utility surfaces */
.surface-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    color: var(--text-color);
    box-shadow: var(--shadow-card-soft);
    border-radius: var(--border-radius);
}

.surface-panel {
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    color: var(--text-color);
    border-radius: var(--border-radius);
}

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

/* Selezione testo: rosso primario */
::selection { background: var(--glossary-selection); color: #fff; }
.quiz-content ::selection, #question-area ::selection, #question-text ::selection, main ::selection { background: var(--glossary-selection); color:#fff; }

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 0);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

[data-tooltip]::before {
    content: '';
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, 0);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: var(--primary-color) transparent transparent transparent;
    z-index: 999;
    transform-origin: center;
}

@media (hover: hover) {
    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (hover: none) {
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none;
    }
}

body.dark-mode [data-tooltip]::after {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

body.dark-mode [data-tooltip]::before {
    border-color: var(--primary-dark) transparent transparent transparent;
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#user-dashboard,
#quiz-screen,
#results-screen {
    display: none;
}

#auth-screen {
    display: flex;
}

#auth-screen h1 {
    /* Manteniamo queste proprietà per il tratto */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke: var(--primary-color);
    /* Il colore del tratto */
    stroke-width: 1px;
    /* Spessore del tratto */

    /* Il riempimento deve essere presente fin dall'inizio */
    fill: var(--primary-color);
    /* Imposta il colore di riempimento fin dall'inizio */

    /* L'animazione controllerà la visibilità del fill */
    animation: draw 100s linear forwards;
}

@keyframes draw {
    0% {
        stroke-dashoffset: 1000;
        /* Il tratto è nascosto */
        opacity: 0;
        /* Rendi l'intero SVG invisibile all'inizio */
    }

    1% {
        opacity: 1;
        /* Appena inizia l'animazione, diventa visibile */
    }

    100% {
        stroke-dashoffset: 0;
        /* Il tratto è completamente disegnato */
        opacity: 1;
        /* Rimane visibile */
    }
}

/* Token Modal */
.token-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

/* =============== */
/* Glossario UI    */
/* =============== */
#glossary-root { position: fixed; inset: 0; pointer-events: none; }
/* Overlay trasparente (non intercetta click per evitare tremolii durante selezione) */
.glossary-capture { position: fixed; inset: 0; z-index: 998; background: transparent; pointer-events: none; }
.glossary-capture[hidden] { display: none; }
/* Scrim per il modal centrato */
.glossary-scrim { position: fixed; inset: 0; background: rgba(12,12,12,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 10040; }
.glossary-scrim.open { opacity: 1; pointer-events: auto; }
/* Quando il pannello è aperto, nascondi eventuale bubble residua */
#glossary-panel.open ~ #glossary-bubble { display: none !important; }
/* Disattiva tooltip globali all'interno del pannello */
.glossary-panel [data-tooltip]::after,
.glossary-panel [data-tooltip]::before { display: none !important; }

.glossary-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  --glossary-center-offset: 48%;
  transform: translate(-50%, calc(-1 * var(--glossary-center-offset))) scale(.98);
  width: min(820px, 94vw);
  --glossary-safe-vspace: clamp(112px, 18vh, 200px);
  max-height: calc(100dvh - var(--glossary-safe-vspace));
  z-index: 10050;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vw, 22px);
  padding-top: clamp(14px, 2.4vw, 20px);
  backdrop-filter: blur(18px);
  background: radial-gradient(circle at top left, #ffffff, #f3f2f0 45%, #e8e5e2 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 50px 120px rgba(5,5,5,.55),
    0 24px 52px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.8);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.glossary-panel::before,
.glossary-panel::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 32px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from 225deg at 100% 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.32) 50%, transparent 52%, transparent 100%);
}

.glossary-panel::before {
  top: -44px;
  right: -44px;
}

.glossary-panel::after {
  bottom: -44px;
  right: -44px;
  background: conic-gradient(from 315deg at 100% 100%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.24) 50%, transparent 52%, transparent 100%);
}

body.dark-mode .glossary-panel {
  background: radial-gradient(circle at 40% 20%, rgba(30,30,30,.85), rgba(12,12,12,.95));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 28px 52px rgba(0,0,0,.65);
}
body.dark-mode .glossary-panel::before {
  background: radial-gradient(140% 140% at 100% 0%, rgba(255,255,255,.12), transparent 68%);
}

body.dark-mode .glossary-panel::after {
  background: radial-gradient(140% 140% at 100% 100%, rgba(255,255,255,.1), transparent 68%);
}
.glossary-panel.open { opacity: 1; pointer-events: auto; transform: translate(-50%, calc(-1 * var(--glossary-center-offset))) scale(1); }
body.dark-mode .glossary-header {
  background: #0f0f12;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
body.dark-mode .glossary-back { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
body.dark-mode .glossary-icon-btn { color: #f5f5f5; }
body.dark-mode .glossary-clear-pop { background: rgba(10,10,10,.95); color:#f2f2f2; border-color: rgba(255,255,255,.08); box-shadow: 0 16px 32px rgba(0,0,0,.65); }
body.dark-mode .glossary-clear-pop__btn.ghost { background: rgba(255,255,255,.1); color:#fff; }
body.dark-mode .glossary-search { background: rgba(10,10,10,.92); border: 1px solid rgba(255,255,255,.08); }
body.dark-mode .glossary-search input { background: rgba(255,255,255,.05); color:#fff; border-color: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
body.dark-mode .glossary-list { background: transparent; }
body.dark-mode .glossary-item {
  background: linear-gradient(160deg, rgba(22,22,22,.98), rgba(12,12,12,.95));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 35px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark-mode .glossary-item:hover {
  box-shadow:
    0 40px 90px rgba(0,0,0,.45),
    0 15px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
}
body.dark-mode .glossary-empty { color: rgba(240,240,240,.7); }
.glossary-header { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: clamp(18px, 2.4vw, 22px); background: linear-gradient(150deg, var(--primary-color), var(--primary-dark)); color:#fff; box-shadow: inset 0 -8px 28px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.28); border-radius: 24px; margin: 0; position: relative; overflow: visible; min-height: 90px; }
.glossary-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,.35), transparent 50%); opacity: .35; pointer-events: none; }
.glossary-title-block{display:flex; align-items:center; gap:10px; min-width: 0; flex: 1 1 auto; }
.glossary-back{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, background .2s ease}
.glossary-back:hover{background:rgba(255,255,255,.28); transform:translateY(-2px)}
.glossary-title { font-weight:600; display:flex; gap:10px; align-items:center; }
.glossary-actions { display:flex; gap:10px; justify-content: flex-end; position: relative; }
.glossary-icon-btn { background: transparent; color:#fff; border:none; padding: 8px; font-size: 20px; display:flex; align-items:center; justify-content:center; transition: color .2s ease, transform .2s ease; }
.glossary-icon-btn:hover { color: rgba(255,255,255,.85); transform: translateY(-1px); }
.glossary-icon-btn.active { background: rgba(255,255,255,.3); }
.glossary-icon-btn.active i.fa-star { color: #f6b93b; }
.glossary-clear-pop { position:absolute; right: -4px; top: calc(100% + 6px); background: #fff; color: #111; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 16px 32px rgba(0,0,0,.18); min-width: 220px; z-index: 12000; display: none; }
.glossary-clear-pop.show { display: block; }
.glossary-clear-pop__text { font-weight: 600; font-size: .95rem; margin-bottom: 10px; }
.glossary-clear-pop__actions { display:flex; gap: 8px; justify-content: flex-end; }
.glossary-clear-pop__btn { border: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 600; }
.glossary-clear-pop__btn.ok { background: var(--primary-color); color:#fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.glossary-clear-pop__btn.ghost { background: #f2f2f2; color:#111; }
body.dark-mode .glossary-clear-pop { background: rgba(22,22,22,.96); color:#fff; border-color: rgba(255,255,255,.08); box-shadow: 0 16px 32px rgba(0,0,0,.45); }
body.dark-mode .glossary-clear-pop__btn.ghost { background: rgba(255,255,255,.08); color:#fff; }
.glossary-search {
  padding: 18px;
  background: rgba(255,255,255,.95);
  border-radius: 22px;
  margin: 0 0 18px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 10px 22px rgba(0,0,0,.1);
}
.glossary-search input {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  font-size: 1rem;
  outline: none;
}
body.dark-mode .glossary-search { background: rgba(20,20,20,.6); border-bottom-color: rgba(255,255,255,.08); }
body.dark-mode .glossary-search input { background: rgba(255,255,255,.08); color:#fff; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.glossary-list { padding: 10px 14px 18px; overflow: auto; flex: 1; }
.glossary-empty { color: var(--text-light); font-size:.95rem; padding: 16px; }
.glossary-item {
  background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(245,244,242,.95));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 18px;
  margin: 12px 0;
  box-shadow:
    0 35px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
}
.glossary-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 40px 90px rgba(0,0,0,.22),
    0 15px 32px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.85);
}
body.dark-mode .glossary-item {
  background: rgba(12,12,12,.5);
  border-color: rgba(255,255,255,.08);
}
.glossary-item-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.glossary-term { font-weight:600; }
.glossary-item-actions {
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.glossary-item-btn {
  background: transparent;
  border: none;
  color: var(--primary-dark);
  padding: 6px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .2s ease, color .2s ease;
}
.glossary-item-btn:hover {
  transform: translateY(-1px);
  color: rgba(128,36,51,.9);
}
.glossary-item-btn[data-act="quiz"].active {
  color: #fff;
  background: linear-gradient(135deg, #ffaba6, #ff736b);
  box-shadow: 0 10px 22px rgba(128,36,51,0.35);
}
.glossary-item-btn.ok {
  background: rgba(46,204,113,.18);
  border-color: rgba(46,204,113,.5);
  color: #1f7a4a;
}
.glossary-item-btn.danger {
  background: rgba(210,4,4,.14);
  border-color: rgba(210,4,4,.4);
  color: var(--danger-color);
}
body.dark-mode .glossary-item-btn {
  color: #fff;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.glossary-def { font-size: .95rem; color: var(--text-color); }
body.dark-mode .glossary-def { color: #f0f0f0; }
.glossary-meta { margin-top: 8px; display:flex; gap:8px; flex-wrap: wrap; }
.chip { background: rgba(128,36,51,.12); color: var(--primary-dark); padding: 4px 8px; border-radius: 999px; font-size: .75rem; border: 1px solid rgba(128,36,51,.25); }
.chip.ghost { background: rgba(0,0,0,.04); color: #333; border-color: rgba(0,0,0,.12); }
body.dark-mode .chip { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }

.glossary-term-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.glossary-term-wrapper .glossary-term {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
button.glossary-item-btn.glossary-term-zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(128,36,51,.25);
  background: rgba(128,36,51,.08);
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 600;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: background .2s ease, transform .2s ease;
}
button.glossary-item-btn.glossary-term-zoom i {
  font-size: .85rem;
}
button.glossary-item-btn.glossary-term-zoom:hover {
  background: rgba(128,36,51,.15);
  transform: translateY(-1px);
}

.glossary-bubble { position: absolute; z-index: 999; transform: translateX(-50%); background: #fff; color: #222; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: 0 16px 36px rgba(0,0,0,.16); padding: 10px 12px; backdrop-filter: blur(12px); }
body.dark-mode .glossary-bubble { background: rgba(20,20,20,.96); color: #fff; border-color: rgba(255,255,255,.08); }
.glossary-bubble::after { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-width: 0 8px 8px 8px; border-style: solid; border-color: transparent transparent rgba(0,0,0,.08) transparent; }
body.dark-mode .glossary-bubble::after { border-color: transparent transparent rgba(255,255,255,.12) transparent; }
.glossary-bubble[data-pos="top"]::after { top: auto; bottom: -8px; border-width: 8px 8px 0 8px; border-color: rgba(0,0,0,.08) transparent transparent transparent; }
body.dark-mode .glossary-bubble[data-pos="top"]::after { border-color: rgba(255,255,255,.12) transparent transparent transparent; }
.glossary-bubble-actions { display:flex; gap:10px; align-items:center; justify-content:center; }
.glossary-mini-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; border:none; cursor:pointer; color:#fff; background: linear-gradient(145deg, var(--glossary-bubble-gradient-start), var(--glossary-bubble-gradient-end)); box-shadow: 0 12px 24px rgba(167, 60, 79, 0.34), inset 0 1px 0 var(--button-gloss); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.glossary-mini-btn i { font-size: 1.05rem; }
.glossary-mini-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(167, 60, 79, 0.36), inset 0 1px 0 var(--button-gloss-strong); }
.glossary-mini-btn:active { transform: translateY(0); box-shadow: 0 8px 16px rgba(167, 60, 79, 0.28); filter: saturate(1.1); }
.glossary-mini-btn.ghost { background: linear-gradient(145deg, var(--glossary-bubble-gradient-start), var(--glossary-bubble-gradient-end)); color:#fff; box-shadow: 0 12px 24px rgba(167, 60, 79, 0.34), inset 0 1px 0 var(--button-gloss); }
body.dark-mode .glossary-mini-btn.ghost { background: linear-gradient(145deg, var(--glossary-bubble-gradient-start), var(--glossary-bubble-gradient-end)); color:#fff; box-shadow: 0 12px 24px rgba(0,0,0,.55); }
.glossary-mini-btn.ghost:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(167, 60, 79, 0.36), inset 0 1px 0 var(--button-gloss-strong); }
.glossary-mini-btn.ghost:active { transform: translateY(0); box-shadow: 0 10px 22px rgba(167, 60, 79, 0.28); }
.glossary-mini-btn:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
body.dark-mode .glossary-mini-btn:focus-visible { outline: 2px solid rgba(255,255,255,.55); }

/* Hint nel quiz */
.glossary-hint { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin: 10px 0 16px; padding: 12px 14px; background: #fff8f6; border-left: 4px solid var(--primary-color); border-radius: 14px; box-shadow: 0 12px 20px rgba(0,0,0,.08); opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
body.dark-mode .glossary-hint { background: rgba(255,255,255,.08); box-shadow: 0 12px 20px rgba(0,0,0,.45); }
.glossary-hint--visible { opacity: 1; transform: translateY(0); }
.glossary-hint--hiding { opacity: 0; transform: translateY(-6px); }
.glossary-hint__icon { color: var(--primary-color); font-size: .95rem; background: rgba(128,36,51,.14); width: 28px; height: 28px; border-radius: 50%; display:flex; align-items:center; justify-content:center; }
body.dark-mode .glossary-hint__icon { background: rgba(255,255,255,.12); color: #fff; }
.glossary-hint__text { font-size: .9rem; color: var(--text-color); flex:1; min-width:0; }
body.dark-mode .glossary-hint__text { color: #f5f5f5; }
.glossary-hint__actions { margin-left:auto; display:flex; align-items:center; }
.glossary-hint__dismiss { border:none; background:none; color: var(--primary-color); cursor:pointer; font-size: .78rem; font-weight:600; padding: 5px 0; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; transition: color .2s ease, transform .2s ease; }
.glossary-hint__dismiss:hover { color: var(--primary-dark); transform: translateY(-1px); }
.glossary-hint__dismiss:focus-visible { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }
body.dark-mode .glossary-hint__dismiss { color: #f5f5f5; }


/* Evidenziazione termini nel testo (3D, adattabile) */
/* Copertura di selettori: funzionerà sia con la classe, sia con data-attr usati dal JS */
.glossary-highlight,
span[data-term],
mark[data-glossary],
[data-glossary-term] {
  position: relative;
  display: inline-block;
  padding: .06em .28em;
  border-radius: .45em;
  background: var(--glossary-highlight-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 .18em .45em var(--glossary-highlight-shadow),
    0 .02em .12em rgba(0,0,0,.12);
  outline: 1px solid var(--glossary-highlight-outline);
  outline-offset: .5px;
  transform-style: preserve-3d;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  color: #fff;
}

body.dark-mode .glossary-highlight,
body.dark-mode span[data-term],
body.dark-mode mark[data-glossary],
body.dark-mode [data-glossary-term] {
  background: var(--glossary-highlight-gradient);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.35),
    0 .18em .5em rgba(0,0,0,.45),
    0 .02em .12em rgba(0,0,0,.35);
  outline-color: rgba(255,255,255,.12);
}

.glossary-highlight:hover,
span[data-term]:hover,
mark[data-glossary]:hover,
[data-glossary-term]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 .26em .62em var(--glossary-highlight-shadow-strong),
    0 .05em .16em rgba(0,0,0,.16);
}

/* micro riflesso inferiore per marcatura reale */
.glossary-highlight::after,
span[data-term]::after,
mark[data-glossary]::after,
[data-glossary-term]::after {
  content: '';
  position: absolute;
  left: .15em; right: .15em; bottom: -.05em; height: .18em;
  border-radius: .18em;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
  opacity: .55;
  pointer-events: none;
}
body.glossary-hl-paused .glossary-highlight::after,
body.glossary-hl-paused span[data-term]::after,
body.glossary-hl-paused mark[data-glossary]::after,
body.glossary-hl-paused [data-glossary-term]::after { display: none; }

/* Evidenza extra quando appena aggiunto con “+†*/
/* Evidenza extra quando appena aggiunto con "+" */
.glossary-highlight--new {
  animation: glossNewPop .82s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes glossNewPop {
  0% {
    transform: translateY(0) scale(.98);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 var(--glossary-highlight-shadow-glow), 0 .02em .12em rgba(0,0,0,.12);
  }
  40% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 .45em .9em var(--glossary-highlight-shadow-strong), 0 .05em .2em rgba(0,0,0,.16);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 .18em .45em var(--glossary-highlight-shadow), 0 .02em .12em rgba(0,0,0,.12);
  }
}

/* Pausa evidenziazioni durante la selezione: mantieni comunque visibili i termini già evidenziati */
body.glossary-hl-paused .glossary-highlight:not(.glossary-highlight--new),
body.glossary-hl-paused :is(span[data-term], mark[data-glossary], [data-glossary-term]):not(.glossary-highlight--new) {
  background: var(--glossary-highlight-gradient) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
     0 .18em .45em var(--glossary-highlight-shadow),
    0 .02em .12em rgba(0,0,0,.12) !important;
  outline: 1px solid var(--glossary-highlight-outline) !important;
}
body.glossary-hl-paused .glossary-highlight--new,
body.glossary-hl-paused :is(span[data-term], mark[data-glossary], [data-glossary-term]).glossary-highlight--new {
  background: var(--glossary-highlight-gradient) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 .18em .45em var(--glossary-highlight-shadow), 0 .02em .12em rgba(0,0,0,.12) !important;
}

/* Evita che la selezione testo sovrascriva l'evidenziazione persistente */
.glossary-highlight::selection,
span[data-term]::selection,
mark[data-glossary]::selection,
[data-glossary-term]::selection { background: rgba(255,255,255,0.1); color: inherit; }

/* 3D micro–interaction quando si aggiunge un elemento */
.glossary-item--pulse { animation: glossPulse .9s ease both; }
@keyframes glossPulse {
  0% { box-shadow: 0 0 0 0 rgba(128,36,51,.32), 0 12px 30px rgba(0,0,0,.08); transform: translateZ(0); }
  40% { box-shadow: 0 0 0 12px rgba(128,36,51,.0), 0 18px 40px rgba(0,0,0,.10); transform: translateZ(20px); }
  100% { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateZ(0); }
}

/* Toast conferma */
.glossary-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 11000; background: rgba(20,20,20,.92); color:#fff; padding:10px 14px; border-radius:12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); pointer-events:none; font-weight:600; letter-spacing: .2px; }
body.dark-mode .glossary-toast { background: rgba(250,250,250,.95); color:#111; }
.glossary-toast.show { opacity:1; transition: opacity .18s ease, transform .18s ease; }
.glossary-toast.hide { opacity:0; }

/* Popover su highlight */
.glossary-pop { position: absolute; transform: translateX(-50%); z-index: 1000; pointer-events: none; }
.glossary-pop__card {
  pointer-events: auto;
  min-width: 240px;
  width: min(460px, calc(100vw - 32px));
  max-width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 12px;
  transform: scale(.96);
  opacity: 0;
  transition: transform .14s ease, opacity .14s ease;
}
body.dark-mode .glossary-pop__card { background: rgba(20,20,20,.96); color:#fff; border-color: rgba(255,255,255,.08); }
.glossary-pop__card.in { transform: scale(1); opacity: 1; }
.glossary-pop__card.out { transform: scale(.96); opacity: 0; }
.glossary-pop__title { font-weight: 700; margin: 2px 0 6px; }
.glossary-pop__content { font-size: .95rem; color: var(--text-color); }
body.dark-mode .glossary-pop__content { color:#f0f0f0; }
.glossary-pop__actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:8px; }
.glossary-pop__open { background: var(--primary-dark); color:#fff; border: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.glossary-pop__add { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82)); color: var(--primary-dark); border: 1px solid rgba(128,36,51,.18); border-radius: 12px; padding: 8px 12px; cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.12); transition: transform .18s ease, box-shadow .18s ease; }
.glossary-pop__add:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }
.glossary-pop__add:active { transform: translateY(0); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
body.dark-mode .glossary-pop__add { background: rgba(30,30,30,.9); color:#fff; border-color: rgba(255,255,255,.14); }
.glossary-pop__close { position:absolute; right:6px; top:6px; background: transparent; border:none; color: inherit; cursor: pointer; }
.glossary-editor,
.glossary-zoom {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  perspective: 1300px;
  isolation: isolate;
}
body.glossary-modal-open #glossary-panel,
body.glossary-modal-open #glossary-bubble,
body.glossary-modal-open #glossary-pop,
body.glossary-modal-open .quiz-content,
body.glossary-modal-open main {
  pointer-events: none;
}
.glossary-editor,
.glossary-zoom {
  pointer-events: auto;
}
.glossary-editor[hidden],
.glossary-zoom[hidden] {
  display: none;
}
.glossary-editor__card,
.glossary-zoom__card {
  width: min(720px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.3);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(233,233,233,.95));
  display:flex;
  flex-direction:column;
  gap: 14px;
  position: relative;
  transform: translateZ(30px);
  transform-style: preserve-3d;
  transition: transform .3s ease, box-shadow .3s ease;
}
.glossary-editor__card:hover,
.glossary-zoom__card:hover {
  transform: translateZ(34px);
  box-shadow:
    0 36px 78px rgba(0,0,0,.52),
    0 16px 36px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.glossary-zoom__card {
  background: linear-gradient(150deg, rgba(250,250,250,.98), rgba(233,233,233,.95));
}
.glossary-editor__card::after,
.glossary-zoom__card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top right, rgba(255,255,255,.55), transparent 45%);
  opacity: .2;
  pointer-events: none;
  filter: blur(6px);
}
body.dark-mode .glossary-editor__card,
body.dark-mode .glossary-zoom__card {
  background: linear-gradient(150deg, rgba(15,15,15,.95), rgba(32,32,32,.9));
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.glossary-editor__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.glossary-editor__title {
  font-weight: 700;
  font-size: 1.1rem;
}
.glossary-editor__term {
  font-size: .95rem;
  color: var(--text-light);
  max-width: 80vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.dark-mode .glossary-editor__term { color: rgba(255,255,255,.7); }
.glossary-editor__close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
}
.glossary-editor__input {
  width: 100%;
  min-height: 170px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.1);
  padding: 14px;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  background: #fff;
  color: inherit;
}
body.dark-mode .glossary-editor__input {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.glossary-editor__actions {
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 4px;
}
.glossary-editor__save,
.glossary-editor__cancel {
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.glossary-editor__save {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
}
.glossary-editor__cancel {
  background: rgba(0,0,0,.08);
  color: var(--text-color);
}
body.dark-mode .glossary-editor__cancel {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.glossary-editor__save:active,
.glossary-editor__cancel:active {
  transform: translateY(1px);
}
.glossary-zoom__head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.glossary-zoom__term {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-dark);
}
body.dark-mode .glossary-zoom__term { color: #fff; }
.glossary-zoom__definition {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text-color);
  max-height: 58vh;
  overflow: auto;
}
body.dark-mode .glossary-zoom__definition { color: #f0f0f0; }
.glossary-zoom__close {
  position:absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,.35);
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.glossary-zoom__close:hover { background: rgba(0,0,0,.45); }
body.dark-mode .glossary-zoom__close { background: rgba(255,255,255,.12); }
.glossary-zoom__close:active { transform: translateY(1px); box-shadow: 0 6px 18px rgba(0,0,0,.55); }

/* Glossario: azioni aggiuntive */
.glossary-item-btn[data-act="pin"] { color: #f6b93b; }
.glossary-item .glossary-term { display: inline-flex; align-items: center; gap: 6px; }

/* Preferenze di movimento: evita vibrazioni per utenti sensibili */
@media (prefers-reduced-motion: reduce) {
  .glossary-mini-btn,
  .glossary-pop__card,
  .glossary-item--pulse,
  .glossary-hint { transition: none !important; animation: none !important; }
}


.token-modal-content {
    background-color: #f8f9fa;
    margin: 15% auto;
    padding: 25px;
    border-radius: var(--border-radius);
    width: 80%;
    max-width: 500px;
    box-shadow: var(--box-shadow);
}

.token-modal h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
}

.token-modal .form-group {
    margin-bottom: 20px;
}

.token-modal label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.token-modal input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.token-modal input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(128, 36, 51, 0.2);
}

.token-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.token-btn:hover {
    background: var(--primary-dark);
}

/* Auth Screen */
#auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 20px;
    text-align: center;
    position: relative; /* per canvas in background */
    overflow: hidden;
    background: #fff;
}

/* Canvas animazione fili rossi */
#auth-threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: #fff;
}

/* Mantieni i contenuti sopra al canvas */
#auth-waves-root {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#auth-screen .app-logo,
#auth-screen #auth-forms {
    position: relative;
    z-index: 2;
}

#auth-screen #auth-forms {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.app-logo {
    text-align: center;
    margin-bottom: 30px;

}

.app-logo i {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.app-logo h1 {
    font-size: 3.2rem !important;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
    font-family: 'Lobster', sans-serif;
    margin-top: -20px;
    animation: draw 100s linear forwards;


}

.app-description {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 20px;
    animation: draw 200s linear forwards;
    margin-bottom: auto;

}

.logo-image {
    font-size: 3.5rem;
    height: auto;
    margin-bottom: 5px;
    animation: draw 100s linear forwards;

}

.auth-form {
    background: var(--surface-card);
    width: 100%;
    max-width: 500px;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft), 0 1px 0 var(--button-gloss-strong) inset;
    transform-style: preserve-3d;
    transition: transform .2s ease, box-shadow .2s ease;
    backdrop-filter: saturate(1.1);
    margin-bottom: 0px;
}

#auth-screen .auth-form:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-strong), 0 1px 0 var(--button-gloss-max) inset;
}

.auth-form h2 {
    color: var(--primary-color);
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--secondary-color);
}

#auth-screen .form-group input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 1rem;
    transition: var(--transition);
    background: linear-gradient(180deg, #ffffff, #f7f8fb);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.05), 0 1px 0 var(--button-gloss-strong);
}

#auth-screen .form-group input:focus {
    border-color: var(--primary-light);
    outline: none;
    box-shadow: 0 0 0 4px rgba(128, 36, 51, 0.12), inset 0 2px 6px rgba(0,0,0,0.05);
}

.checkbox-group {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: center;
    column-gap: 8px;
    justify-content: center;
}

#auth-screen .reg-terms-label {
    color: inherit;
    font-weight: inherit;
}

#auth-screen .reg-terms-label a,
#auth-screen .reg-terms-label a:visited {
    color: #8b1d2c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#auth-screen .reg-terms-label a:hover {
    color: #a12536;
}

/* Interruttore 3D per Ricordami */
#auth-screen .checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    margin: 0;
    position: relative;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef0f4, #dadde4);
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 0 var(--button-gloss-max);
    transition: all .22s ease;
}
#auth-screen .checkbox-group input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 1.5px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: transform .22s ease;
}
#auth-screen .checkbox-group input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-color: rgba(128,36,51,0.45);
}
#auth-screen .checkbox-group input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}
#auth-screen .checkbox-group label {
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 500;
}

#auth-screen .auth-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: 1px solid rgba(128,36,51,0.4);
    padding: 12px;
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(128,36,51,0.25), inset 0 1px 0 var(--button-gloss);
}

#auth-screen .auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(128,36,51,0.28), inset 0 1px 0 var(--button-gloss-strong);
}

#auth-screen .auth-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(128,36,51,0.22), inset 0 1px 0 var(--button-gloss);
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    color: var(--text-light);
}

.auth-switch a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Social + Chi Siamo nella schermata di accesso */
.auth-form .auth-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); }
.auth-form .auth-meta-phrase { color: var(--text-light); font-size: .95rem; margin-bottom: 10px; }
.auth-form .auth-meta-actions { display:flex; align-items:center; justify-content:center; gap: 12px; }

#auth-screen .auth-form .instagram-icon { font-size: 28px; color: #bdb9bb; transition: color .2s ease, transform .2s ease; }
#auth-screen .auth-form .instagram-icon:hover { color: var(--primary-color); transform: translateY(-2px); }

#auth-screen .auth-form .chi-siamo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #6d2a36, #4b1c25);
    color: #fff; padding: 8px 12px; border-radius: 999px; text-decoration: none;
    border: 1px solid rgba(128,36,51,0.45);
    box-shadow: 0 8px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    font-weight: 600; font-size: .85rem;
}
#auth-screen .auth-form .chi-siamo-btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, #802433, #5c1a26); }
#auth-screen .auth-form .chi-siamo-btn:active { transform: translateY(0); }

/* Schermata principale dopo il login */
#main-screen {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main-header {
    background: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.user-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

.logout-btn {
    background: var(--light-gray);
    color: var(--primary-color);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logout-btn:hover {
    background: var(--medium-gray);
}

/* Stili per l'header del canale */
.channel-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--light-gray);
}

.channel-description {
    color: var(--text-light);
    font-size: 1rem;
    margin-top: 10px;
}

/* Badge per il canale sulle materie */
.channel-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Azioni di sezione */
.section-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--medium-gray);
}

/* Migliora la visualizzazione delle card */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid responsive migliorata */
.subject-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Header sezione materie – unico e brandizzato */
.subject-section-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
    margin-bottom: 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    position: relative;
    box-shadow: 0 18px 38px rgba(128, 36, 51, 0.25);
    overflow: hidden;
}

.subject-section-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 65%);
    pointer-events: none;
}

.subject-section-header .header-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.subject-section-header h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}

.subject-section-header h3 i {
    font-size: 1.25rem;
}

.subject-section-header .channel-description {
    margin: 0;
    font-size: 0.97rem;
    color: rgba(255, 255, 255, 0.82);
}

#back-to-channels-from-subjects {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

#back-to-channels-from-subjects:hover {
    background: rgba(255, 255, 255, 0.24);
}

#back-to-channels-from-subjects i {
    color: var(--white);
}

@media (max-width: 768px) {
    .subject-section-header {
        flex-wrap: wrap;
        padding: 18px 20px;
        gap: 14px;
    }

    #back-to-channels-from-subjects {
        order: -1;
    }

    .subject-section-header h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .subject-section-header {
        border-radius: 16px;
        gap: 12px;
    }

    .subject-section-header h3 {
        font-size: 1.1rem;
        gap: 8px;
    }
}

.channel-section h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.channel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.channel-card {
    background: var(--surface-card);
    border-radius: var(--border-radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--surface-border);
    text-align: center;
    position: relative;
    overflow: hidden;
    transform-origin: center;
}

.channel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
}

.channel-card:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-card-strong);
}

.channel-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
    color: var(--white);
    background: var(--primary-color);
    font-weight: bold;
}

.channel-card h4 {
    margin-bottom: 5px;
    color: var(--secondary-color);
}

/* Sezione selezione materia */
.channel-section {
    background: var(--surface-card);
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
    margin-bottom: 30px;
}

.subject-section {
    display: none;
}

.glossary-panel-open .subject-section .channel-description {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.subject-section h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.subject-card {
    position: relative;
    background: var(--surface-card);
    border-radius: 22px;
    padding: 22px 20px 26px;
    cursor: pointer;
    border: 1px solid var(--surface-border);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow-card-soft), inset 0 4px 0 0 var(--primary-color);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    animation: fadeInUp 0.5s ease-out;
    transform-origin: center;
}

.subject-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(128, 36, 51, 0.08), rgba(128, 36, 51, 0));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.subject-card::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: calc(22px - 8px);
    border: 1px solid rgba(128, 36, 51, 0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.subject-card[data-subject="politica"]::after,
.subject-card[data-subject="eoi"]::after,
.subject-card[data-subject="energia"]::after,
.subject-card[data-subject="organizzazione"]::after {
    border-color: rgba(128, 36, 51, 0.18);
}

.subject-card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-card-strong), inset 0 4px 0 0 var(--primary-color);
}

.subject-card:hover::before,
.subject-card:hover::after {
    opacity: 1;
}

.subject-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
    color: var(--white);
}

.subject-card[data-subject="politica"] .subject-icon {
    background: var(--primary-color);
}

.subject-card[data-subject="eoi"] .subject-icon {
    background: var(--eoi-color);
}

.subject-card[data-subject="energia"] .subject-icon {
    background: var(--energia-color);
}

.subject-card[data-subject="organizzazione"] .subject-icon {
    background: var(--organizzazione-color);
}

.subject-card h4 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.subject-card p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* User Dashboard */
#user-dashboard {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: none;
}

.dashboard-header {
    background: var(--surface-card);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
    margin-bottom: 30px;
}

.user-greeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.user-greeting h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-right: auto;
}

.user-greeting .stat-image {
    width: 40px;
    height: 40px;
    border-radius: 40%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 0px solid white;
    vertical-align: middle;
}

/* Per una visualizzazione più elegante su dispositivi mobili */
@media (max-width: 768px) {
    .user-greeting h2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .user-greeting .stat-image {
        margin-top: -5px;
    }
}

.logout-btn {
    background: var(--light-gray);
    color: var(--primary-color);
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logout-btn:hover {
    background: var(--medium-gray);
}

/* Global Search (header) */
.global-search-wrap {
    position: relative;
    flex: 1 1 420px;
    display: flex;
    justify-content: center;
    min-width: 280px;
}

.global-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(680px, 100%);
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 14px 30px rgba(15,23,42,0.12), inset 0 1px 0 var(--button-gloss-strong);
    transform-style: preserve-3d;
}

.global-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.98rem;
    color: var(--text-color);
}

.global-search__clear {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
}

.global-search--active .global-search__clear { display: inline-flex; color: var(--primary-color); }

.global-search-results {
    position: absolute;
    top: calc(100% + 8px);
    width: min(680px, 100%);
    background: #fff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15,23,42,0.18);
    overflow: hidden;
    z-index: 25;
}

.global-search-results__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    color: var(--text-color);
    background: #fff;
    transition: background .15s ease, transform .15s ease;
}
.global-search-results__item:hover,
.global-search-results__item.is-active {
    background: #faf6f7;
}
.global-search-results__item .badge {
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(128,36,51,0.18);
    color: var(--primary-dark);
    background: rgba(128,36,51,0.08);
}
.global-search-results mark { background: linear-gradient(transparent 60%, rgba(128,36,51,.25) 60%); color: inherit; }

@media (max-width: 768px) {
  .global-search-wrap { order: 3; width: 100%; flex-basis: 100%; }
  .global-search { width: 100%; }
}

/* Dark mode support */
body.dark-mode .global-search {
  background: linear-gradient(145deg, rgba(25,25,25,0.85), rgba(25,25,25,0.65));
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
body.dark-mode .global-search input { color: #f5f5f5; }
body.dark-mode .global-search__clear { color: rgba(255,255,255,0.8); }
body.dark-mode .global-search-results {
  background: rgba(25,25,25,0.98);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 18px 42px rgba(0,0,0,0.55);
}
body.dark-mode .global-search-results__item:hover,
body.dark-mode .global-search-results__item.is-active { background: rgba(255,255,255,0.06); }
body.dark-mode .global-search-results__item .badge { color: #fff; border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); }

.user-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-card {
    background: var(--surface-card);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-card-soft);
    border: 1px solid var(--surface-border);
    border-left: 4px solid var(--primary-color);
}

.stat-icon {
    background: var(--primary-color);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.quiz-settings {
    background: var(--surface-card);
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

.quiz-settings h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.frequent-errors-btn {
    background-color: #FFD700;
    color: #000;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 12px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    box-shadow: var(--shadow-card-soft);
    position: relative;
    z-index: auto; /* default: niente stacking forzato, il tooltip gestisce lo stack */
}

.frequent-errors-btn:hover {
    background-color: #e6c200;
    box-shadow: var(--shadow-card-strong);
}

body.dark-mode .frequent-errors-btn {
    color: #1b1300;
    box-shadow: var(--shadow-card-strong);
}

/* Quando il menu del select Çÿ aperto, il bottone resta sotto la tendina */
body.quiz-select-open #fixed-section .frequent-errors-btn,
#fixed-section .question-count-shell.is-open ~ .pc-after-actions .frequent-errors-btn {
    z-index: 0;
}

.pc-after-actions {
  position: relative;
  overflow: visible;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    background-color: var(--white);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}

.form-select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(128, 36, 51, 0.2);
}

.primary-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: pulseprimarybtn 2s infinite;
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.primary-btn:disabled {
    background: var(--medium-gray);
    cursor: not-allowed;
    transform: none;
}

.backarrowquiz-btn {
    background: var(--light-gray);
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.9rem;
    border-style: ridge;
    border-color: #802433;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    position: relative;
    margin-right: auto;
}

.backarrowquiz-btn:hover {
    background: var(--light-gray);
    transform: scale(1.1);
}

/* Quiz Screen */
#quiz-screen {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin-bottom: 30px;
}

.quiz-header {
    background: var(--primary-color);
    color: var(--white);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quiz-progress {
    flex: 1;
    max-width: 60%;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--white);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

#progress-text {
    font-size: 0.9rem;
    font-weight: 500;
}

.quiz-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 500;
}

.quiz-content {
    padding: 30px;
}

#question-text {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
    line-height: 1.4;
}

#image-container {
    margin: 20px 0;
    text-align: center;
}

.question-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.answer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.answer-btn {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    color: var(--text-color);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 15px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    text-align: left;
    transition: var(--transition);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-card-soft);
}

.answer-btn:hover:not(.selected) {
    border-color: var(--primary-color);
    background: linear-gradient(145deg, #f5f5f8 0%, #eceef3 100%);
    box-shadow: var(--shadow-card-strong);
    color: var(--text-color);
}

.answer-btn.selected {
    border-color: var(--primary-color);
    background: rgba(128, 36, 51, 0.12);
    box-shadow: var(--shadow-card-strong);
}

.answer-btn.correct {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #b6e4c8 0%, #84d2a5 100%);
    color: var(--text-color);
    box-shadow: 0 12px 28px rgba(39, 174, 96, 0.4);
}

.answer-btn.incorrect {
    border-color: var(--danger-color);
    background: linear-gradient(135deg, #ffbdb8 0%, #ff8780 100%);
    color: var(--text-color);
    box-shadow: 0 12px 28px rgba(231, 76, 60, 0.4);
}

/* Evita che hover o focus sovrascrivano */
.answer-btn.correct:hover,
.answer-btn.correct:focus {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #a6dbb8 0%, #78cfa1 100%);
    color: var(--text-color);
}

.answer-btn.incorrect:hover,
.answer-btn.incorrect:focus {
    border-color: var(--danger-color);
    background: linear-gradient(135deg, #ffaba6 0%, #ff736b 100%);
    color: var(--text-color);
}

.answer-btn .answer-text {
    flex: 1;
}

.answer-btn .answer-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    margin: 5px 0;
}

.open-question-panel {
    margin-top: 24px;
    background: var(--surface-panel);
    border: 1px dashed rgba(128, 36, 51, 0.4);
    border-radius: var(--border-radius);
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 12px;
}

.open-question-panel.shown {
    display: flex;
}

.open-question-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.95rem;
    color: var(--text-light);
}

.open-question-heading strong {
    font-size: 1rem;
    color: var(--secondary-color);
}

.open-answer-input {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding: 14px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    background: #fff;
    color: var(--text-color);
}

.open-answer-input:focus {
    outline: 2px solid rgba(128, 36, 51, 0.35);
    border-color: rgba(128, 36, 51, 0.6);
}

.open-question-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.open-question-hint {
    font-size: 0.85rem;
    color: var(--text-light);
}

.open-answer-model {
    border-radius: var(--border-radius);
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(128, 36, 51, 0.15);
    box-shadow: inset 0 0 0 1px rgba(128, 36, 51, 0.08);
}

.open-answer-model__label {
    margin: 0;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.open-answer-model-text {
    margin-top: 6px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--secondary-color);
    white-space: pre-line;
}

.open-answer-model[hidden] {
    display: none;
}

.quiz-navigation {
    padding: 20px;
    border-top: 1px solid var(--medium-gray);
    display: flex;
    justify-content: flex-end;
    margin-right: auto;
}

.primary-btn2 {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-right: auto;
}

.primary-btn2:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.primary-btn2:disabled {
    background: var(--medium-gray);
    cursor: not-allowed;
    transform: none;
}

.quiz-glossary-panel {
    border: 1px solid rgba(159, 50, 67, 0.2);
    background: #fff;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(30, 15, 20, 0.06);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.quiz-glossary-panel--collapsed {
    box-shadow: 0 6px 16px rgba(30, 15, 20, 0.04);
    border-color: rgba(159, 50, 67, 0.15);
    padding-bottom: 12px;
}

.quiz-glossary-panel--collapsed .quiz-glossary-items,
.quiz-glossary-panel--collapsed .quiz-glossary-definition {
    display: none;
}

.quiz-glossary-toggle {
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    margin-left: auto;
}

.quiz-glossary-toggle .fa-chevron-down {
    transition: transform 0.25s ease;
}

.quiz-glossary-panel--collapsed .quiz-glossary-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.quiz-glossary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.quiz-glossary-title-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.quiz-glossary-title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quiz-glossary-title-btn {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.quiz-glossary-word {
    color: var(--glossary-selection);
    font-size: 1.05rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 0;
}

.quiz-glossary-word::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--glossary-selection);
    bottom: 0;
}

.quiz-glossary-title-suffix {
    color: var(--glossary-selection);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: default;
}

.quiz-glossary-help {
    border: none;
    padding: 0;
    margin: 0 0 0 4px;
    background: none;
    color: var(--primary-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.quiz-glossary-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
}

.quiz-glossary-chip {
    border-radius: 999px;
    border: 1px solid rgba(159, 50, 67, 0.12);
    background: rgba(159, 50, 67, 0.08);
    color: #5c1a26;
    padding: 8px 16px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    box-shadow: 0 6px 12px rgba(30, 15, 20, 0.08);
}

.quiz-glossary-chip:hover {
    transform: translateY(-1px);
}

.quiz-glossary-chip.active {
    background: linear-gradient(145deg, var(--glossary-bubble-gradient-start), var(--glossary-bubble-gradient-end));
    color: #fff;
    box-shadow: 0 10px 20px rgba(159, 50, 67, 0.25);
}

.quiz-glossary-chip:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.quiz-glossary-definition {
    min-height: 60px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 16px;
    border: 1px solid rgba(159, 50, 67, 0.18);
    padding: 14px 16px;
    box-shadow: 0 20px 30px rgba(30, 15, 20, 0.08);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--secondary-color);
}

.quiz-glossary-definition .quiz-glossary-meta {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-light);
}

.quiz-glossary-empty {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Dark mode - quiz glossary */
body.dark-mode .quiz-glossary-panel {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

body.dark-mode .quiz-glossary-panel--collapsed {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .quiz-glossary-toggle,
body.dark-mode .quiz-glossary-help {
    color: var(--dark-primary);
}

body.dark-mode .quiz-glossary-word,
body.dark-mode .quiz-glossary-title-suffix {
    color: var(--dark-primary);
}

body.dark-mode .quiz-glossary-word::after {
    background: var(--dark-primary);
}

body.dark-mode .quiz-glossary-chip {
    background: rgba(199, 123, 133, 0.18);
    border: 1px solid rgba(199, 123, 133, 0.4);
    color: var(--dark-text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

body.dark-mode .quiz-glossary-chip.active {
    background: linear-gradient(145deg, var(--dark-primary), var(--dark-primary-hover));
    color: #1e1e1e;
    box-shadow: 0 12px 26px rgba(199, 123, 133, 0.35);
}

body.dark-mode .quiz-glossary-chip:focus-visible {
    outline-color: var(--dark-primary);
}

body.dark-mode .quiz-glossary-definition {
    background: rgba(37, 37, 38, 0.95);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6);
}

body.dark-mode .quiz-glossary-definition .quiz-glossary-meta,
body.dark-mode .quiz-glossary-empty {
    color: var(--dark-text-secondary);
}

body.dark-mode .quiz-glossary-tooltip .tooltip-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .quiz-glossary-tooltip .tooltip-icon:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
    .quiz-glossary-panel {
        padding: 18px 20px;
    }

    .quiz-glossary-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .quiz-glossary-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .quiz-glossary-items {
        gap: 6px;
    }

    .quiz-glossary-toggle {
        font-size: 0.85rem;
    }

    #quiz-glossary-open-btn {
        font-size: 0.9rem;
    }
}

/* Results Screen */
#results-screen {
    background: var(--surface-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
    padding: 30px;
    margin-bottom: 30px;
}

/* ===== Integrazioni quiz: ripeti stesso quiz, Perché?, explain dock ===== */

/* Bottone ripeti stesso quiz */
#repeat-same-quiz-btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
  animation: pulse 2s infinite;
  box-shadow: var(--shadow-card-soft);
}
#repeat-same-quiz-btn:hover {
  background-color: var(--primary-dark);
  box-shadow: var(--shadow-card-strong);
}

/* Bottone Perché? (inline in quiz) */
#whyBtn {
  margin-top: 10px;
  background: linear-gradient(135deg, #802433 0%, #a8324a 100%);
  color: var(--white);
  border: none;
  padding: 16px 35px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(128, 36, 51, 0.3);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateZ(18px);
}

.quiz-navigation #whyBtn,
.quiz-controls #whyBtn {
  margin-top: 0;
  align-self: center;
}

#whyBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s ease;
}

#whyBtn:hover {
  background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
  box-shadow: 0 14px 30px rgba(128, 36, 51, 0.35);
  transform: translateZ(24px) translateY(-2px) scale(1.03);
}

#whyBtn:hover::before {
  left: 100%;
}

#whyBtn:active {
  transform: translateZ(20px) translateY(-1px) scale(1.01);
}

#whyBtn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* Contenitore spiegazione inline */
#explainDock {
  max-width: 800px;
  margin: 16px auto 0;
  padding: 0 12px;
  margin-bottom: 8px;
  scrollbar-width: auto;
  scrollbar-color: var(--primary-color) #f1f1f1;
}

/* Box spiegazione AI sintetica in quiz */
.ai-sources {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.9rem;
  color: var(--text-light, #4b5563);
}
.ai-sources h6 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
.ai-sources ul {
  margin: 6px 0 0 18px;
  padding: 0;
  list-style: disc;
}
.ai-sources li {
  margin-bottom: 4px;
  word-break: break-word;
}
.ai-sources a {
  color: var(--primary-color);
  text-decoration: underline;
}
.ai-explanation {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(128, 36, 51, 0.15);
  max-height: 260px;
  overflow: auto;
  margin-bottom: 15px;
}
.ai-explanation h5 { margin: 0 0 6px; font-size: 1rem; }
.ai-explanation .ai-sources { margin-bottom: 5px; }
.ai-explanation p { line-height: 1.6; margin: 0; }

/* Stato caricamento spiegazione */
.loading-spinner { display: flex; align-items: center; gap: 10px; color: var(--primary-color); }
.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  width: 20px; height: 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/* Migliora layout pulsanti di navigazione quiz (senza rompere il posizionamento) */
.quiz-navigation { gap: 10px; align-items: center; }
.quiz-navigation > button { flex: 0 0 auto; width: auto; }

.hidden { display: none !important; }

/* Dark Mode per aggiunte recenti */
body.dark-mode #repeat-same-quiz-btn {
  background: linear-gradient(135deg, var(--dark-primary), var(--dark-primary-hover));
  border-color: var(--dark-primary);
  color: #fff;
}

body.dark-mode #whyBtn,
body.dark-mode .why-btn {
  background: linear-gradient(135deg, var(--dark-primary), var(--dark-primary-hover));
  color: #fff;
}

/* === Progressive Challenge (PC) === */
.pc-section {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-card-soft);
}
.pc-section .pc-box-btn {
  min-width: 56px;
  padding: 10px 14px;
}
.pc-remaining-indicator {
  color: var(--text-light);
}
.pc-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
#pc-custom-input {
  width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-color);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance: textfield;
  -moz-appearance: textfield;
}
#pc-custom-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(128,36,51,0.18), inset 0 1px 0 rgba(255,255,255,.9);
}
#pc-custom-input::-webkit-outer-spin-button,
#pc-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.dark-mode #pc-custom-input {
  background: rgba(20,20,20,.9);
  color: var(--dark-text-primary);
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark-mode #pc-custom-input:focus {
  border-color: var(--dark-primary);
  box-shadow: 0 0 0 3px rgba(128,36,51,0.28), inset 0 1px 0 rgba(255,255,255,.12);
}

/* PC overlay summary */
.pc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); }
.pc-modal {
    background: var(--surface-card);
    color: var(--text-color);
    width: min(560px, 92vw);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
    transform: translateY(0);
}
.pc-modal h3 { margin: 0 0 12px; color: var(--primary-color); display:flex; align-items:center; gap:10px; font-weight: 800; }
.pc-modal .pc-stats { display:flex; gap:12px; margin: 10px 0 14px; }
.pc-modal .pc-stat {
    flex: 1;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    box-shadow: var(--shadow-card-soft);
}
.pc-modal .pc-actions { display:flex; gap:10px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.pc-modal .pc-actions .primary { background: var(--primary-color); color:#fff; border: none; padding: 12px 16px; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 18px rgba(128,36,51,.25); }
.pc-modal .pc-actions .primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.pc-modal .pc-actions .secondary { background: var(--white); color: var(--primary-color); border: 2px solid var(--primary-color); padding: 12px 16px; border-radius: 12px; cursor: pointer; }
.pc-modal .pc-actions .secondary:hover { background: rgba(128,36,51,.05); }

/* PC results card in results screen */
.pc-results-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card-soft);
    padding: 16px;
    margin: 12px 0 8px;
}
.pc-results-card .pc-results-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.pc-results-card .title-wrap { display:flex; align-items:center; gap:8px; color: var(--primary-color); font-weight: 800; }
.pc-results-card .pc-stats-row { display:flex; gap:12px; margin-bottom: 12px; flex-wrap: wrap; }
.pc-results-card .pc-stat {
    flex: 1;
    min-width: 150px;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    box-shadow: var(--shadow-card-soft);
    transition: transform .15s ease, box-shadow .2s ease;
}
.pc-results-card .pc-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-strong);
}
.pc-results-card .pc-stat-label { font-size: .9rem; color: var(--text-light); margin-bottom: 4px; }
.pc-results-card .pc-stat-value { font-weight: 800; font-size: 1.2rem; }
.pc-results-card .pc-stat-value.pc-correct { color: #27ae60; }
.pc-results-card .pc-stat-value.pc-wrong { color: #e74c3c; }
.pc-results-card .pc-results-actions { display:flex; justify-content:center; }

/* Results top actions */
.results-header { position: relative; }
.results-top-actions { position:absolute; top:8px; left:8px; right:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pill-btn { border:none; border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.12); transition:transform .15s ease, box-shadow .2s ease; }
.pill-btn.primary { background: var(--primary-color); color:var(--white); border: 2px solid var(--primary-color);}
.pill-btn.primary:hover { background: var(--primary-color); transform: translateY(-1px); }
.pill-btn.ghost {
    background: var(--primary-color);
    color:var(--white);
    border: 2px solid var(--primary-color);
}
.pill-btn.ghost:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
}
body.dark-mode .pill-btn.ghost {
    background: transparent;
    color: var(--dark-primary);
    border-color: var(--dark-primary);
}
body.dark-mode .pill-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .pill-btn.primary {
    background: transparent;
    color: var(--dark-primary);
    border-color: var(--dark-primary);
}
body.dark-mode .pill-btn.primary:hover {
    background: rgba(255, 255, 255, 0.08);
}
.pill-btn i { font-size:1rem; }
.pill-btn[data-tip] { position: relative; }
.pill-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: 120%; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.986); color: var(--primary-color); padding:6px 8px; border-radius:6px; font-size:.75rem; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; box-shadow:0px 2px 16px var(--primary-color);
}
.pill-btn[data-tip]::before {
  content:""; position:absolute; left:50%; top:112%; transform: translateX(-50%);
  border:6px solid transparent; border-top-color: rgba(0,0,0,.85); opacity:0; transition: opacity .2s ease;
}
.pill-btn[data-tip]:hover::after { opacity:1; transform: translateX(-50%) translateY(-2px); }
.pill-btn[data-tip]:hover::before { opacity:1; }

/* Inline actions inside PC card */

/* Dark mode overlay */
body.dark-mode .pc-modal {
    background: var(--surface-card);
    color: var(--dark-text-primary);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}
body.dark-mode .pc-modal .pc-stat {
    background: var(--surface-panel);
    border-color: var(--surface-border);
}
body.dark-mode .pc-modal .pc-actions .secondary {
    background: transparent;
    color: var(--dark-primary);
    border-color: var(--dark-primary);
}

body.dark-mode .pc-results-card {
    background: var(--surface-card);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

body.dark-mode .pc-results-card .pc-stat {
    background: var(--surface-panel);
    border-color: var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

/* Modalità: selettore */
.mode-switch {
    display:flex;
    gap:6px;
    background: var(--surface-card);
    padding:6px;
    border-radius: 14px;
    align-items:center;
    width:fit-content;
    border:1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}
.mode-switch .mode-btn {
    background: var(--surface-card);
    color: var(--text-color);
    border: 1px solid var(--surface-border);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: all .2s ease;
    box-shadow: var(--shadow-card-soft);
}
.mode-switch .mode-btn:hover {
    background: var(--surface-panel);
    box-shadow: var(--shadow-card-strong);
}
.mode-switch .mode-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-strong);
    transform: translateY(-1px);
}
.mode-switch .mode-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.mode-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:flex-start; }
.mode-section {
    margin-top: 10px;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-card-soft);
}

.esoneri-selector { display: none; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 10px; padding-left: 12px; min-height: 25px; }
.esoneri-selector__label { display: block; font-weight: 600; color: var(--text-light); margin: 0 0 6px; }
.esoneri-selector__buttons { display: flex; flex-wrap: wrap; gap: 10px; min-height: 25px; align-items: center; }
.esonero-toggle-btn {
    background: var(--surface-panel);
    color: var(--text-color);
    border: 1px solid var(--surface-border);
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-card-soft);
}
.esonero-toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-card-strong);
}
.esonero-toggle-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-strong);
    transform: translateY(-1px);
}
.esonero-toggle-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

.esoneri-selector--inline { display: none; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 10px; padding-left: 12px; min-height: 25px; }
.esoneri-selector--inline .esoneri-selector__label { margin: 0 0 6px; }
.esoneri-selector--inline .esoneri-selector__buttons { gap: 10px; }

.mode-section .form-group > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-color);
}

/* Rendi il bottone Avvia Quiz largo come il box impostazioni */
.quiz-settings #start-quiz-btn { width: 100%; }

/* PC chips stile primario */
.pc-chips .pc-box-btn {
  background: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}
.pc-chips .pc-box-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.pc-chips .pc-box-btn.selected {
  box-shadow: 0 0 0 2px rgba(128,36,51,0.15), 0 6px 16px rgba(0,0,0,0.12);
}

/* CTA 3D per progressiva */
.pc-cta { box-shadow: 0 10px 20px rgba(128,36,51,.25); border-radius: 12px; }
.pc-cta:hover { transform: translateY(-1px); }

#resume-quiz-btn,
#pc-resume-btn {
  display: none;
}

.cta-button-group {
  display: grid;
  gap: 14px;
  width: 100%;
}

.pc-cta-row.cta-button-group {
  margin-top: 6px;
}

.pc-after-actions {
  margin-top: 6px;
}

#fixed-section .pc-after-actions {
  margin-top: 20px;
}

#fixed-section .cta-button-group {
  margin-top: 6px;
}

@media (min-width: 768px) {
  .cta-button-group {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.cta-button {
  width: 100%;
  border-radius: 14px;
  padding: clamp(12px, 3vw, 16px) 24px;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(128,36,51,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cta-button i {
  font-size: 1.1rem;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(128,36,51,0.2);
}

.cta-button:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(128,36,51,0.16);
}

.cta-button--primary {
  box-shadow: 0 18px 32px rgba(128,36,51,0.22), 0 6px 14px rgba(0,0,0,0.08);
}

.cta-button--primary:hover {
  box-shadow: 0 24px 42px rgba(128,36,51,0.26), 0 8px 18px rgba(0,0,0,0.1);
}

.cta-button--secondary {
  background: linear-gradient(135deg, #ffffff 5%, #f6f0f1 95%);
  border: 1px solid rgba(128,36,51,0.12);
  color: var(--primary-color);
  box-shadow: 0 18px 34px rgba(128,36,51,0.12), 0 6px 14px rgba(0,0,0,0.05);
}

.cta-button--secondary:hover {
  filter: brightness(1.02);
  box-shadow: 0 24px 40px rgba(128,36,51,0.18), 0 8px 18px rgba(0,0,0,0.06);
}

.cta-button--secondary:active {
  box-shadow: 0 12px 24px rgba(128,36,51,0.14), 0 4px 10px rgba(0,0,0,0.05);
}

body.dark-mode .cta-button--primary {
  box-shadow: 0 18px 36px rgba(0,0,0,0.5), 0 8px 18px rgba(0,0,0,0.35);
}

body.dark-mode .cta-button--primary:hover {
  box-shadow: 0 24px 44px rgba(0,0,0,0.55), 0 10px 22px rgba(0,0,0,0.4);
}

body.dark-mode .cta-button--secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  box-shadow: 0 20px 36px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.3);
}

body.dark-mode .cta-button--secondary:hover {
  filter: brightness(1.08);
  box-shadow: 0 26px 44px rgba(0,0,0,0.5), 0 10px 22px rgba(0,0,0,0.32);
}

.session-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1400;
}

.session-modal[hidden] {
  display: none;
}

.session-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.session-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 18, 30, 0.55);
  backdrop-filter: blur(6px);
}

.session-modal__dialog {
  position: relative;
  width: min(460px, 100%);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.97), rgba(248, 245, 246, 0.92));
  border-radius: 26px;
  padding: clamp(26px, 5vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 35px 60px rgba(15, 18, 32, 0.22),
    0 18px 40px rgba(128, 36, 51, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(20px) scale(.96);
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  z-index: 0;
}

.session-modal__dialog::before,
.session-modal__dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.session-modal__dialog::before {
  background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.7), transparent 60%);
  opacity: 0.8;
}

.session-modal__dialog::after {
  border: 1px solid rgba(255, 255, 255, 0.35);
  mix-blend-mode: screen;
  opacity: 0.6;
}

.session-modal.is-visible .session-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.session-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.session-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(128,36,51,0.12));
  color: var(--primary-color);
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 12px 24px rgba(128,36,51,0.15);
}

.session-modal__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-modal__eyebrow {
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(6, 16, 37, 0.55);
}

.session-modal__titles h3 {
  margin: 0;
  font-size: 1.35rem;
  color: rgba(6, 16, 37, 0.95);
}

.session-modal__body {
  color: rgba(6, 16, 37, 0.85);
  font-size: 1rem;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.7);
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(128, 36, 51, 0.08);
  box-shadow: inset 0 6px 18px rgba(12, 16, 32, 0.04);
  margin: 0;
}

.session-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 520px) {
  .session-modal__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.session-modal__button {
  flex: 1;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.session-modal__button--ghost {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(128, 36, 51, 0.2);
  color: var(--primary-color);
  box-shadow: inset 0 1px 0 var(--button-gloss-strong), 0 10px 20px rgba(6, 16, 37, 0.08);
}

.session-modal__button--ghost:hover {
  background: rgba(128, 36, 51, 0.05);
  transform: translateY(-1px);
}

.session-modal__button--primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--white);
  border: none;
  box-shadow: 0 15px 30px rgba(128, 36, 51, 0.28);
}

.session-modal__button--primary:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(128, 36, 51, 0.35);
}

.session-modal__button--primary:active {
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(128, 36, 51, 0.26);
}

@media (hover: hover) {
  .session-modal__button:active {
    transform: translateY(0);
  }
}

.session-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(6, 16, 37, 0.05);
  background: rgba(250, 247, 248, 0.9);
  color: var(--primary-color);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(6, 16, 37, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.session-modal__close:hover {
  transform: translateY(-1px);
  color: var(--primary-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 22px rgba(6, 16, 37, 0.18);
}

.session-modal__close:active {
  transform: scale(0.96);
}

body.session-modal-open {
  overflow: hidden;
}

body.dark-mode .session-modal__dialog {
  background: linear-gradient(140deg, rgba(23, 26, 37, 0.95), rgba(12, 13, 18, 0.95));
  color: var(--dark-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 38px 70px rgba(0, 0, 0, 0.7);
}

body.dark-mode .session-modal__dialog::before {
  background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.18), transparent 55%);
  opacity: 0.5;
}

body.dark-mode .session-modal__dialog::after {
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.5;
}

body.dark-mode .session-modal__backdrop {
  background: rgba(8, 12, 20, 0.65);
  backdrop-filter: blur(10px);
}

body.dark-mode .session-modal__icon {
  background: rgba(128, 36, 51, 0.35);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 12px 28px rgba(0,0,0,0.45);
}

body.dark-mode .session-modal__eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .session-modal__titles h3 {
  color: var(--dark-text-primary);
}

body.dark-mode .session-modal__body {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--dark-text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body.dark-mode .session-modal__button--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.6);
}

body.dark-mode .session-modal__button--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .session-modal__button--primary {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
}

body.dark-mode .session-modal__button--primary:hover {
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.65);
}

body.dark-mode .session-modal__close {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--dark-text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.55);
}

body.dark-mode .session-modal__close:hover {
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 26px rgba(0,0,0,0.65);
}

/* Token modal: usa la palette primaria per l'accesso protetto */
.token-modal__body {
  display: grid;
  gap: 10px;
}

.token-modal__label {
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.01em;
}

.token-modal__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(128, 36, 51, 0.2);
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 var(--button-gloss), 0 12px 24px rgba(6, 16, 37, 0.06);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.token-modal__input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(128, 36, 51, 0.12), 0 10px 24px rgba(128, 36, 51, 0.18);
  background: #fff;
}

.token-modal__hint {
  margin: 0;
  color: rgba(6, 16, 37, 0.7);
  font-size: 0.95rem;
}

.token-modal__error {
  margin: 0;
  color: var(--danger-color);
  font-weight: 700;
  display: none;
}

.token-modal__error.is-visible {
  display: block;
}

.token-modal__status {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--primary-dark);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7f7;
  border: 1px solid rgba(128, 36, 51, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
}

.token-modal__status.is-visible {
  display: inline-flex;
}

.token-modal__status[data-type="loading"]::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(128, 36, 51, 0.3);
  border-top-color: var(--primary-color);
  animation: token-spin .8s linear infinite;
}

.token-modal__status[data-type="success"] {
  color: var(--success-color);
}


.token-modal__status[data-type="success"]::before {
  content: "\2713";
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(39, 174, 96, 0.14);
  color: var(--success-color);
  border: 1px solid rgba(39, 174, 96, 0.32);
  animation: none;
  transform: translateY(-1px);
}


@keyframes token-spin {
  to { transform: rotate(360deg); }
}

body.dark-mode .token-modal__label {
  color: var(--dark-text-primary);
}

body.dark-mode .token-modal__input {
  background: rgba(16, 16, 19, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--dark-text-primary);
}

body.dark-mode .token-modal__input:focus {
  box-shadow: 0 0 0 4px rgba(128, 36, 51, 0.3), 0 12px 30px rgba(0,0,0,0.55);
}

body.dark-mode .token-modal__hint {
  color: rgba(255, 255, 255, 0.75);
}

body.dark-mode .token-modal__status {
  color: var(--dark-text-primary);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

body.dark-mode .token-modal__status[data-type="success"] {
  color: #5cd38d;
  background: rgba(92, 211, 141, 0.12);
  border-color: rgba(92, 211, 141, 0.3);
}

body.dark-mode .token-modal__status[data-type="success"]::before {
  background: rgba(92, 211, 141, 0.18);
  color: #5cd38d;
  border-color: rgba(92, 211, 141, 0.4);
}

/* Action: Continua blocco di sessione (solo progressiva) */
#pc-continue-inline-btn {
  background: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
}
#pc-continue-inline-btn:hover { background: var(--primary-dark); }

body.dark-mode .ai-explanation {
  background: var(--dark-bg-tertiary);
  border: 1px solid var(--dark-border);
  color: var(--dark-text-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
body.dark-mode .ai-explanation p { color: var(--dark-text-primary); }
body.dark-mode .loading-spinner { color: var(--dark-primary); }
body.dark-mode .spinner { border-top-color: var(--dark-primary); }

/* Correzione contrasto testo explainDock in tema chiaro */
body:not(.dark-mode) .ai-explanation p { color: var(--text-color); }

.results-header {
    text-align: center;
    margin-bottom: 30px;
}

.results-header h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.score-display {
    margin-bottom: 20px;
}

#score-percentage {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    line-height: 1;
}

#score-text {
    font-size: 1.5rem;
    color: var(--text-color);
    font-weight: 500;
}

.results-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    border-color: var(--surface-border);
}

.result-stat {
    background: var(--surface-panel);
    padding: 12px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.results-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.action-btn {
    padding: 15px;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--surface-card);
    color: var(--text-color);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

.action-btn i {
    font-size: 1.2rem;
}

.action-btn:hover {
    background: var(--surface-panel);
    box-shadow: var(--shadow-card-strong);
    transform: translateY(-1px);
}

.action-btn:active {
    transform: translateY(0);
}

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

.secondary-btn:hover {
    background: var(--surface-panel);
}

body.dark-mode .secondary-btn {
    color: var(--dark-primary);
    border-color: var(--dark-primary);
}

/* Stile per il counter risposte corrette/errate nella quiz-score */
.quiz-score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(rgb(51, 204, 128));
    margin-left: 15px;
}

.quiz-score i {
    color: var(--warning-color);
}



#correct-answers-count,
#answered-questions-count,
#correct-percentage {
    font-weight: 700;
    color: rgb(51, 204, 128);
}

#correct-percentage {
    margin-left: 2px;
}

.quiz-counter {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgb(51, 204, 128);
    margin-left: 15px;
}


/* Animazione pulsante riprova */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

#retry-wrong-btn {
    animation: pulse 2s infinite;
    background-color: #FFD700;
    color: #1b1300;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: var(--shadow-card-soft);
}

#retry-wrong-btn:hover {
    background-color: #FFD700;
    box-shadow: var(--shadow-card-strong);
}

body.dark-mode #retry-wrong-btn {
    color: #1b1300;
}

/* Stili per la revisione risposte */
.review-container {
    padding: 20px;
}

.wrong-question {
    background: #ffebee;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border-left: 4px solid var(--danger-color);
}

.correct-answer {
    background: #e8f5e9;
    padding: 10px;
    border-radius: var(--border-radius);
    margin-top: 10px;
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-question-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--border-radius);
    margin: 10px 0;
    display: block;
}

.review-answer-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    margin-top: 5px;
}

.quiz-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--medium-gray);
}

.summary-score {
    font-weight: 500;
}

.summary-percentage {
    color: var(--primary-color);
    font-weight: 700;
}

.segnala-problema {
    position: absolute;
    right: 0px;
    top: 50%;
    ;
    transition: transform 0.2s ease;
    display: inline-block;
}

.segnala-problema img {
    width: 30px;
    /* Regola la dimensione */
    height: auto;
    cursor: pointer;
}

.segnala-problema:hover {
    transform: scale(1.1);
}

/* Tooltip migliorato */
.segnala-problema[title] {
    position: relative;
}

.segnala-problema[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 100;
}

/* Responsive design */
@media (max-width: 768px) {
    .quiz-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .quiz-progress {
        max-width: 100%;
        width: 100%;
    }

    .results-details {
        grid-template-columns: 1fr;
    }

    .user-greeting {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .logout-btn {
        width: 100%;
    }

    .results-actions {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .auth-form {
        padding: 20px;
    }

    .app-logo h1 {
        font-size: 1.8rem;
    }

    #score-percentage {
        font-size: 2.5rem;
    }

    #score-text {
        font-size: 1.2rem;
    }

    .quiz-settings {
        padding: 15px;
    }
}

/* Stile per il messaggio di quiz non disponibile */
#no-quiz-message {
    background: var(--white);
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 40px 40px 40px 60px;
    margin: 20px 0;
    width: 100%;
    text-align: center;
    position: relative;
}

#no-quiz-message h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.5rem;
}

#no-quiz-message i {
    color: var(--primary-color);
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

#no-quiz-message p {
    color: var(--text-color);
    margin-bottom: 10px;
    line-height: 1.5;
}

#current-subject-name {
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.6rem;
}

#no-quiz-message .back-arrow-btn {
    position: absolute;
    left: 15px;
    top: 15px;
    background: var(--white);
    color: var(--white);
    border: none;
    width: 70px;
    height: 70px;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.5rem;
    z-index: 10;
}

#no-quiz-message .back-arrow-btn:hover {
    background: var(--white);
    transform: scale(1.1);
}

/* Migliora la visibilità delle card delle materie */
.subject-card {
    position: relative;
    cursor: pointer;
}

/* Stile per la badge del canale nella dashboard materia */
.subject-badge {
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-left: 10px;
}

.subject-badge--variant {
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

body.dark-mode .subject-badge--variant {
    background: rgba(20, 20, 20, 0.6);
    color: #fff;
    border-color: var(--primary-color);
}

/* Stile consistente per i pulsanti back */
.back-arrow-btn-small {
    background: var(--light-gray);
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-style: ridge;
    border-color: #802433;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.9rem;
    margin-right: 15px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    position: relative;
}

.back-arrow-btn-small:hover {
    background: var(--light-gray);
    transform: scale(1.1);
}

/* Posizionamento per il messaggio di errore */
#no-quiz-message .back-arrow-btn-small {
    background: var(--light-gray);
    color: var(--primary-color);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.5rem;
    margin-right: 15px;
}

/* Allineamento per subject-info */
.subject-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Stile modificato per il tasto Chi Siamo */
.chi-siamo-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    text-align: right;
    margin: 12px 16px 12px 16px; /* margini regolari, niente valori negativi */
}

.chi-siamo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #5e5254;
    color: white;
    padding: 6px 12px;
    text-decoration: rgba(128, 36, 51, 0.3);
    border-radius: 4px;
    font-weight: normal;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(128, 36, 51, 0.3);
    margin: 0;
}

.chi-siamo-btn:hover {
    background-color: #802433;
    color: white;
    transform: translateY(-2px);
}

/* Assicurati che il footer sia nascosto durante il quiz */
#quiz-screen~.site-footer,
#results-screen~.site-footer {
    display: none !important;
}

.lobster-regular {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.chi-siamo-content h1,
.chi-siamo-content h2,
.chi-siamo-content h3 {
    color: var(--primary-dark);
    font-weight: 700;
    font-family: 'Lobster', sans-serif;
    font-size: clamp(2rem, 2vw + 1rem, 2.6rem);
    line-height: 1.2;
    text-align: left;
    position: relative;
    margin-bottom: 10px;
}

/* Hero statico pagina Chi Siamo */
.chi-siamo-hero {
    position: relative;
    width: 100%;
    margin: 0 0 14px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 14px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--surface-border);
}

.chi-siamo-hero .logout-btn2 {
    justify-self: start;
}

.chi-siamo-hero__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    justify-self: center;
}

.chi-siamo-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), rgba(128, 36, 51, 0));
    opacity: 0.28;
}

h30 {
    color: var(--primary-color);
    font-family: 'Lobster', cursive;
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
    margin: 0;
}
@media (max-width: 768px){ h30 { font-size: 2.6rem; } }

/* Container della pagina Chi Siamo allineato alla dashboard */
.chi-siamo-content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 24px auto;
    background: linear-gradient(145deg, #ffffff 0%, #fbf7f9 45%, #f5f0f3 100%);
    padding: clamp(26px, 3vw, 40px);
    border-radius: 18px;
    border: 1px solid var(--surface-border-strong);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    z-index: 0;
}

.chi-siamo-content::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at center, rgba(128, 36, 51, 0.12), transparent 65%);
    pointer-events: none;
    transform: rotate(-6deg);
}

.chi-siamo-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(128, 36, 51, 0.08) 1px, transparent 0);
    background-size: 18px 18px;
    opacity: 0.35;
    pointer-events: none;
}

.chi-siamo-content > * {
    position: relative;
    z-index: 1;
}

.chi-siamo-content h1::after,
.chi-siamo-content h2::after,
.chi-siamo-content h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 82px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0.65;
}

.chi-siamo-content h2,
.chi-siamo-content h3 {
    margin-top: 20px;
}

.chi-siamo-content p {
    margin: 0 0 14px 0;
    color: var(--text-color);
    line-height: 1.8;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.chi-siamo-content p:last-child {
    margin-bottom: 0;
}

.chi-siamo-content p + h2 {
    margin-top: 26px;
}

.chi-siamo-content a {
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(128, 36, 51, 0.25);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.chi-siamo-content a:hover,
.chi-siamo-content a:focus-visible {
    color: var(--primary-color);
    border-color: rgba(128, 36, 51, 0.5);
}


.history-image {
    display: block;
    margin: 12px auto;
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(128, 36, 51, 0.18);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12), 0 2px 18px rgba(128, 36, 51, 0.08);
    background: linear-gradient(135deg, rgba(128, 36, 51, 0.06), rgba(128, 36, 51, 0));
}

/* Fonti: fissa la scala dello sfondo per avere le stesse linee sottili viste nelle altre pagine statiche */
body.fonti-page {
    background-size: 120vw auto;
    background-repeat: repeat-y;
    background-position: center top;
}

body.fonti-page.dark-mode {
    background-image: url('../immagini-logo/sfondo-dark.svg');
}

.fonti-content {
    max-width: 1100px;
    margin: 0 auto 24px auto;
    background: var(--surface-card);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}

.fonti-intro h1 {
    font-family: 'Lobster', sans-serif;
    color: var(--primary-dark);
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.fonti-intro p {
    color: var(--text-light);
    line-height: 1.7;
}

.fonti-course {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.fonti-course-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.fonti-course-heading {
    flex: 1 1 280px;
}

.fonti-course-header h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.fonti-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 36, 51, 0.08);
    border: 1px solid rgba(128, 36, 51, 0.25);
    color: var(--primary-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 18px 10px 12px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(128, 36, 51, 0.12);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.fonti-toggle:hover,
.fonti-toggle:focus-visible {
    background: rgba(128, 36, 51, 0.16);
    border-color: rgba(128, 36, 51, 0.4);
    box-shadow: 0 12px 28px rgba(128, 36, 51, 0.2);
    outline: none;
}

.fonti-toggle-label {
    font-family: 'Lobster', cursive;
    font-size: 2rem;
    letter-spacing: 0.5px;
}

.fonti-toggle-icon {
    width: 0;
    height: 0;
    border-left: 10px solid var(--primary-color);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: transform 0.25s ease;
    transform-origin: center;
    display: inline-block;
}

.fonti-toggle[aria-expanded="true"] .fonti-toggle-icon {
    transform: rotate(90deg);
}

[data-fonti-collapsible][data-open="false"] {
    display: none;
}

.fonti-course-description {
    margin-top: 6px;
    color: var(--text-light);
}

.fonti-course-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 200px;
}

.fonti-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #802433, #5c1a26);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(128, 36, 51, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.fonti-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(128, 36, 51, 0.35);
}

.fonti-submit-note {
    color: var(--text-light);
    font-size: 0.85rem;
    text-align: center;
    max-width: 220px;
}

.fonti-subjects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.fonti-subject {
    background: var(--surface-panel);
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    padding: 18px 20px;
    box-shadow: var(--shadow-card-soft);
}

.fonti-subject h3 {
    font-size: 1.15rem;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.fonti-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.fonti-list li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    background: var(--surface-card);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--surface-border);
    transition: all 0.2s ease;
}

.fonti-list li a::before {
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fonti-list li a:hover {
    color: var(--white);
    background: linear-gradient(135deg, #802433, #5c1a26);
    border-color: rgba(128, 36, 51, 0.4);
    box-shadow: 0 10px 20px rgba(128, 36, 51, 0.18);
    transform: translateY(-2px);
}

.fonti-file-note {
    display: block;
    margin-top: 6px;
    padding-left: 6px;
    border-left: 2px solid rgba(128, 36, 51, 0.15);
    color: var(--text-light);
    font-size: 0.85rem;
}

.fonti-empty {
    color: var(--text-light);
    font-style: italic;
}

.fonti-help {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.fonti-help h2 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.fonti-steps {
    margin: 0 0 16px 18px;
    color: var(--text-color);
    line-height: 1.7;
}

.fonti-steps li {
    margin-bottom: 10px;
}

.fonti-help a {
    color: #8b1d2c;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fonti-help a:hover {
    color: var(--primary-color);
}

.fonti-help code {
    background: rgba(0,0,0,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Fira Code", "Courier New", monospace;
    font-size: 0.9rem;
}

.fonti-disclaimer {
    color: var(--text-light);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .fonti-content {
        max-width: 95%;
        padding: 22px;
    }

    .fonti-course-actions {
        width: 100%;
    }

    .fonti-subjects {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header2 { max-width: 95%; padding: 18px 16px; grid-template-columns: 1fr auto 1fr; }
    .dashboard-brand { justify-content: center; }
    .dashboard-header2 .dashboard-back-link { width: auto; justify-content: flex-start; }
    .chi-siamo-content { max-width: 95%; padding: 22px; }
    .logo-image2 { width: 44px; }
}
h30 {
    color: var(--primary-color);
    font-family: 'Lobster', cursive;
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 768px){ h30 { font-size: 2.6rem; } }

.logout-btn2 {
    position: relative;
    transform: none;
    background: transparent;
    color: var(--primary-dark);
    border: none;
    padding: 8px 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
}

.logout-btn2:hover {
    background: transparent;
    transform: translateY(-1px);
    color: var(--primary-color);
    text-decoration: none;
}

.logo-image2 {
    position: static;
    width: 56px;
    height: auto;
    margin-left: 6px;
}

.dashboard-header2 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    align-items: center;
    background: linear-gradient(135deg, #f8f7f9 0%, #f2eef3 100%);
    padding: 24px 28px;
    border-radius: 16px;
    border: 1px solid var(--surface-border-strong);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
    margin: 16px auto 24px auto;
    max-width: 1100px; /* non riempie tutto lo schermo */
    width: calc(100% - 20px);
    overflow: hidden;
    gap: 10px;
    isolation: isolate;
    z-index: 0;
}

.dashboard-header2::before {
    content: "";
    position: absolute;
    inset: auto 0 10px 0;
    width: 360px;
    height: 180px;
    background: radial-gradient(circle at 50% 50%, rgba(128, 36, 51, 0.08), transparent 60%);
    pointer-events: none;
    transform: rotate(-8deg);
    opacity: 0.35;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.dashboard-header2 > * {
    position: relative;
    z-index: 1;
}

.dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: center;
}

.dashboard-header2 .dashboard-back-link {
    justify-self: start;
}

.user-greeting2 {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--secondary-color);
}

.instagram-icon {
    display: inline-flex;
    font-size: 32px;
    color: #bbb7b9;
    margin: 0 8px 0 0;
    transition: color 0.3s ease;
}

.instagram-icon:hover {
    color: var(--primary-color);
    /* colore ufficiale Instagram al passaggio */
}

/* Footer spacing: separa dal contenuto soprastante */
.site-footer {
    margin-top: 16px;
    background: var(--surface-card);
    border-top: 1px solid var(--surface-border);
    padding: 10px 12px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.site-footer p {
    margin: 0;
}

/* Footer contenuto entro la stessa larghezza dell'header (pagina Chi Siamo) */
.site-footer-contained {
    max-width: 1100px;
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card-soft);
    border: 1px solid var(--surface-border);
}
@media (max-width: 768px) {
    .site-footer-contained { max-width: 95%; width: auto; }
}

/* Responsive placement for social + Chi Siamo */
@media (max-width: 768px) {
    .chi-siamo-container {
        justify-content: center;
        margin: 8px 10px 8px 10px;
        gap: 8px;
    }
    .instagram-icon { font-size: 28px; }
    .chi-siamo-btn { font-size: 0.75rem; padding: 6px 10px; }
}

/* Stile per il badge contatore errori frequenti */
/* Hover quando è disabilitato - versione semplificata */
/* Stile per il badge contatore errori frequenti */
.frequent-errors-btn {
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    position: relative;
}

/* Bottone abilitato (con errori) */
.frequent-errors-btn.enabled {
    background-color: #FFD700;
    color: #000;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
    transform: scale(1);
    animation: pulseYellow 2s infinite;
    cursor: pointer;
}

.frequent-errors-btn.enabled:hover {
    background-color: #e6c200;
    transform: translateY(-2px) scale(1.05);
    animation: none;
}

.frequent-errors-btn.enabled:active {
    transform: scale(0.95) translateY(0);
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

/* Bottone disabilitato (senza errori) */
.frequent-errors-btn.disabled {
    background-color: var(--medium-gray);
    color: var(--text-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
    cursor: not-allowed;
    /* Rimuovi qualsiasi proprietà che potrebbe interferire */
    pointer-events: auto;
    /* IMPORTANTE: permette hover e click */
}

/* Hover quando è disabilitato - SHAKE FUNZIONANTE */
.frequent-errors-btn.disabled:hover {
    background-color: var(--medium-gray);
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: shakeDisabled 0.5s ease-in-out;
}

/* Click quando è disabilitato - SHAKE più intenso */
.frequent-errors-btn.disabled:active {
    animation: shakeDisabledIntense 0.3s ease-in-out;
}

@keyframes pulseYellow {
    0% {
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 6px 12px rgba(255, 215, 0, 0.5);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }
}

@keyframes shakeDisabled {

    0%,
    100% {
        transform: translateX(0) scale(0.98);
    }

    25% {
        transform: translateX(-4px) scale(0.98);
    }

    50% {
        transform: translateX(4px) scale(0.98);
    }

    75% {
        transform: translateX(-4px) scale(0.98);
    }
}

@keyframes shakeDisabledIntense {

    0%,
    100% {
        transform: translateX(0) scale(0.98);
    }

    25% {
        transform: translateX(-6px) scale(0.98);
    }

    50% {
        transform: translateX(6px) scale(0.98);
    }

    75% {
        transform: translateX(-6px) scale(0.98);
    }
}

@keyframes fadeToGray {
    0% {
        background-color: #FFD700;
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
        transform: scale(1);
    }

    50% {
        background-color: #b8b8b8;
        transform: scale(0.99);
    }

    100% {
        background-color: var(--medium-gray);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: scale(0.98);
    }
}

.error-counter-badge {
    background-color: var(--primary-color);
    color: white;
    border-radius: 24px;
    padding: 3px 8px;
    font-size: 1.0rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    animation: badgeAppear 0.5s ease-out;
    margin-left: 5px;
    /* Rimuovi il posizionamento assoluto */
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    min-width: 20px;
}

@keyframes badgeAppear {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.error-counter-badge.fade-out {
    animation: badgeDisappear 0.4s ease-in forwards;
}

@keyframes badgeDisappear {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.1) rotate(-10deg);
        opacity: 0.5;
    }

    100% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
}

@keyframes pulseprimarybtn {
    0% {
        box-shadow: 0 4px 8px var(--primary-color);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 6px 12px var(--primary-color);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 4px 8px var(--primary-color);
        transform: scale(1);
    }
}

/* Stili per la visualizzazione dettagliata dei risultati */
.detailed-results {
    background: var(--surface-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-card-soft);
    padding: 45px;
    margin: 45px 0;
    border: 1px solid var(--surface-border);
}

.detailed-results h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 2px solid var(--surface-border);
    padding-bottom: 10px;
}

.results-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    min-height: 100px;
    /* Altezza minima */
}

/* Stile della scrollbar */
.results-list::-webkit-scrollbar {
    width: 8px;
}

.results-list::-webkit-scrollbar-track {
    background: var(--surface-panel);
    border-radius: 4px;
}

.results-list::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.results-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

.result-item {
    background: var(--surface-panel);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--surface-border);
    border-left: 4px solid var(--success-color);
    box-shadow: var(--shadow-card-soft);
}

.result-item.wrong {
    border-left-color: rgba(210, 4, 4, 0.91);
    background: #ffebee;
}

body.dark-mode .result-item.wrong {
    background: rgba(210, 4, 4, 0.12);
}

.result-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--surface-border);
}

.result-status {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    flex-shrink: 0;
}

.result-status.correct {
    background: var(--success-color);
    color: white;
}

.result-status.wrong {
    background: rgba(210, 4, 4, 0.91);
    color: white;
}

.result-question {
    font-weight: 600;
    color: var(--secondary-color);
    flex: 1;
    line-height: 1.4;
    font-size: 1.05rem;
}

.result-correct-answer {
    background: #e8f5e9;
    border-radius: var(--border-radius);
    padding: 12px;
    margin-top: 10px;
    border-left: 3px solid var(--success-color);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.result-correct-answer i {
    color: var(--success-color);
    margin-top: 2px;
    font-size: 1.1rem;
}

.result-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.answer-image {
    max-width: 100%;
    max-height: 120px;
    border-radius: 4px;
    margin-top: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Animazione per l'apparizione degli elementi */
.result-item {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stile per il pulsante "Vedi Risultati" */
#view-results-btn {
    background: var(--secondary-color);
    color: var(--white);
    border: 2px solid var(--secondary-color);
    animation: pulse 2s infinite;
}

#view-results-btn:hover {
    background: #1a252f;
    border-color: #1a252f;
}

.no-results-message {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.no-results-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--medium-gray);
}

.no-results-message p {
    font-size: 1.1rem;
}

.user-answer {
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius);
    padding: 10px;
    margin: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid;
}

.user-correct {
    border-left-color: var(--success-color);
    background: rgba(39, 174, 96, 0.1);
}

.user-wrong {
    border-left-color: var(--warning-color);
    background: rgba(243, 156, 18, 0.1);
}

.user-answer i {
    margin-top: 2px;
    font-size: 1.1rem;
}

.user-correct i {
    color: var(--success-color);
}

.user-wrong i {
    color: var(--warning-color);
}

/* Messaggi di notifica */
.message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    color: white;
    z-index: 1000;
    animation: slideIn 0.3s ease;
}

.message.success {
    background: var(--success-color);
}

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

.message.info {
    background: var(--primary-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Risultati analisi */
.analysis-results {
    background: var(--light-gray);
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 10px 0;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 15px 0;
}

.analysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: var(--border-radius);
}

.key-terms {
    margin-top: 15px;
}

.terms-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.term-tag {
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
}

/* Note items */
.note-item {
    background: white;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.note-date {
    font-size: 0.9rem;
    color: var(--text-light);
}

.note-delete {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 5px;
}

.note-content {
    min-height: 60px;
    padding: 10px;
    border: 1px dashed var(--medium-gray);
    border-radius: 4px;
}

.note-content:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ===================== */
/* STILI MATERIE ORALI MIGLIORATI */
/* ===================== */

/* Categorie materie */
.subject-category {
    margin: 30px 0;
    background: var(--surface-card);
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
}
.subject-category .subject-cards { margin-top: 10px; }

.category-title,
.category-title-secondary {
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing:.6px;
  text-transform: none;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.category-title i,
.category-title-secondary i {
    color: var(--primary-color);
}

/* Materie orali - stile speciale */
.oral-subject {
    position: relative;
    border: 1.5px solid rgba(128, 36, 51, 0.35);
    border-radius: 22px;
    padding: 22px 20px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: center;
    min-height: 0;
    aspect-ratio: auto;
    box-shadow: 0 22px 48px rgba(128, 36, 51, 0.12), inset 0 4px 0 0 var(--primary-color);
}

.oral-subject::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(128, 36, 51, 0.08), rgba(128, 36, 51, 0));
    opacity: 0.3;
}

.oral-subject .subject-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.oral-subject h4 {
    margin-top: 18px;
    font-size: 1.05rem;
}

.oral-subject p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .oral-subject {
        padding: 22px;
    }
}

/* Metodo di studio mini */
.study-method-mini {
    opacity: 0.9;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.study-method-mini:hover {
    opacity: 1;
    transform: scale(0.97);
}

.advanced-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ards migliorate */
.flashcards-container {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    background: var(--surface-card);
    border-radius: 0 0 36px 36px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.flashcards-header {
    background: var(--flashcards-header-gradient);
    color: #fff;
    padding: clamp(18px, 4vw, 30px) clamp(24px, 5vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 15px);
    justify-content: space-between;
    min-height: 58px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: none;
    box-shadow: none;
}



.flashcards-header h3 {
    margin: 0;
    flex: 1;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    color: #fff;
    font-weight: 600;
}

.flashcard {
    width: 100%;
    max-width: 600px;
    height: 280px;
    margin: 0 auto 30px;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.flashcard-front {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.flashcard-back {
    background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
    color: white;
    transform: rotateY(180deg);
}

.flashcard-front h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.flashcard-back p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

.flashcard-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.flashcard-btn {
    background: var(--light-gray);
    color: var(--text-color);
    border: 1px solid var(--medium-gray);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flashcard-btn:hover {
    background: var(--medium-gray);
    transform: translateY(-2px);
}

.flashcard-progress {
    color: var(--text-color);
    font-weight: 600;
    background: var(--light-gray);
    padding: 8px 16px;
    border-radius: var(--border-radius);
    min-width: 120px;
}

/* Indicatore flip */
.flashcard-hint {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 10px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .rating-buttons {
        flex-direction: column;
        align-items: center;
    }

    .rate-btn {
        max-width: 100%;
        min-width: 200px;
    }

    .flashcard-controls {
        flex-direction: column;
        gap: 10px;
    }

    .session-stats {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===================== */
/* MENU A TENDINA (SOLO IN DASHBOARD) */
/* ===================== */

/* Bottone Menu Hamburger */
.menu-toggle {
    position: absolute;
    top: 30px;
    left: 30px;
    background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    border: none;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 18px 36px rgba(128, 36, 51, 0.28), inset 0 1px 0 var(--button-gloss);
    backdrop-filter: blur(6px);
}

.menu-toggle i {
    font-size: 1.2rem;
}

.menu-toggle:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 22px 40px rgba(128, 36, 51, 0.35);
}

/* Nascondi il menu quando non siamo nella dashboard */
#auth-screen .menu-toggle,
#quiz-screen .menu-toggle,
#results-screen .menu-toggle {
    display: none;
}

/* Menu Overlay */
.sidebar-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

#user-dashboard .sidebar-menu {
    display: block;
}

.sidebar-menu.active {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-menu:not(.active) .menu-overlay {
    pointer-events: none;
}

.menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.55);
    backdrop-filter: blur(8px);
}

.menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: min(420px, 92vw);
    height: 100%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 25px 60px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .35s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-menu.active .menu-content {
    transform: translateX(0);
}

body.dark-mode .menu-content {
    background: rgba(14,14,14,0.94);
    border-right-color: rgba(255,255,255,0.08);
}

/* Accessibilità */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* =========================================================
   FLASHCARDS 3D  FINAL OVERRIDES (layout invariato, solo stile)
   Queste regole vengono per ultime per evitare sovrascritture.
   ========================================================= */

/* Contenitore schermata: fondo leggero e scroll fluido */
body .flashcards-screen {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    --subject-primary: #c63c58;
    --subject-secondary: #5d1024;
    --subject-glow: rgba(255, 231, 237, 0.92);
    --subject-border: rgba(255, 255, 255, 0.55);
    --subject-icon: #fff8fb;
    --subject-shadow: rgba(45, 0, 10, 0.52);
}

/* Wrapper principale: piena larghezza, senza bordi interni */
body .flashcards-screen .flashcards-container {
    width: 100%;
    border-radius: 0 0 32px 32px;
    background-color: #ffffff;
    background-image:
        url('../immagini-logo/sfondo.svg'),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 247, 0.95));
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.5vw, 30px);
    padding-block: clamp(16px, 2vw, 28px);
    padding-inline: clamp(18px, 3vw, 34px);
}

/* Header full-width, aderente all’attuale layout */
body .flashcards-screen .flashcards-header {
    background: var(--flashcards-header-gradient);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    gap: clamp(12px, 1.5vw, 15px);
    flex-wrap: wrap;
    justify-content: space-between;
    padding: clamp(18px, 4vw, 30px) clamp(24px, 5vw, 40px);
    min-height: 56px;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}

body .flashcards-screen .header-title h3 {
    margin: 0;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

body .flashcards-screen .header-eyebrow {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    padding-bottom: 4px;
}

/* Titolo e badge */
body .flashcards-screen .header-title { flex: 1 1 260px; min-width: 0; gap: 12px; }
body .flashcards-screen .header-title h3 { margin: 0; font-weight: 600; color: #fff; }
body .flashcards-screen .title-glow {
    width: clamp(48px, 4vw, 60px);
    height: clamp(48px, 4vw, 60px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--subject-icon);
    background: linear-gradient(140deg, var(--subject-primary), var(--subject-secondary));
    border: 1px solid var(--subject-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -12px 18px rgba(0, 0, 0, 0.25),
        0 26px 46px var(--subject-shadow);
}

body .flashcards-screen .header-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: rgba(255, 255, 255, .8); }

/* Area destra: indicatori e comandi */
body .flashcards-screen .header-stats { flex: 1 1 320px; display:flex; align-items:center; gap:10px; flex-wrap: wrap; justify-content: flex-end; }
body .flashcards-screen .stat-badge { background: rgba(128,36,51,.08); padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(128,36,51,.2); display:flex; align-items:center; gap:6px; font-size:.9rem; color: #fff; box-shadow: none; }
body .flashcards-screen .stat-badge i { color: rgba(255, 255, 255, .9); box-shadow: none; }

/* Slancio compatto ma leggibile */
body .flashcards-screen .streak-launcher {
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 24px;
    border-radius:42px;
    border:1px solid rgba(255,255,255,0.25);
    background: linear-gradient(135deg, #701e2e, #3d0f1a);
    color:#fff;
    box-shadow: 0 25px 50px rgba(7, 2, 5, 0.45);
    will-change: transform;
}
body .flashcards-screen .streak-launcher__icon {
    width:54px;
    height:54px;
    border-radius:22px;
    background: linear-gradient(180deg, #ffe9b8, #f5c46d);
    border: none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#5a2b0c;
    font-size:1.35rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px rgba(0,0,0,.25);
}
body .flashcards-screen .streak-launcher__copy { display:flex; flex-direction:column; line-height:1.2; }
body .flashcards-screen .streak-launcher__copy .label { font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255, 255, 255, .75); }
body .flashcards-screen .streak-launcher__copy .value { font-size:1.8rem; font-weight:700; color:#fff; }
body .flashcards-screen .streak-launcher:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #7f2842, #4a121e);
    box-shadow: 0 24px 54px rgba(7, 2, 5, 0.55);
}
body .flashcards-screen .streak-launcher:focus-visible {
    outline: 3px solid rgba(255,255,255,0.4);
    outline-offset: 3px;
}

/* Pulsanti gestione reinventati come card dinamiche */
.flash-actions-dock {
    position: relative;
    width: min(920px, 100%);
    margin: clamp(10px, 1.4vw, 18px) auto 0;
    padding: clamp(14px, 1.4vw, 20px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: none;
    overflow: hidden;
}
.flash-actions-dock::before {
    content: none;
}
.flash-actions-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(8px, 1vw, 14px);
    width: 100%;
}
.flash-actions-row .action-icon {
    --action-shell-size: clamp(42px, 4vw, 52px);
    min-height: auto;
    border: none;
    border-radius: 0;
    padding: clamp(8px, 1vw, 12px) clamp(6px, 1vw, 12px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1vw, 16px);
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-dark);
    background: transparent;
    box-shadow: none;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.flash-actions-row .action-icon:hover {
    transform: translateX(4px);
    color: var(--primary-dark);
}
.flash-actions-row .action-icon:active {
    transform: translateX(2px);
}
.flash-actions-row .action-icon:focus-visible {
    outline: 3px solid rgba(128, 36, 51, 0.4);
    outline-offset: 4px;
}
.flash-actions-row .action-icon-shell {
    width: auto;
    height: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}
.flash-actions-row .action-icon-shell i {
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    color: var(--primary-dark);
    filter: none;
    transition: transform 0.3s ease;
}
.flash-actions-row .action-icon:hover .action-icon-shell i {
    transform: translateX(3px);
}
.flash-actions-row .action-label {
    color: rgba(60, 15, 28, 0.68);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flash-actions-dock,
.flash-actions-row,
.flash-actions-row .action-icon {
    overflow: visible;
}

.flash-actions-dock [data-tooltip]::after {
    max-width: min(220px, 80vw);
    white-space: normal;
    line-height: 1.3;
    padding: 6px 12px;
    text-align: center;
    box-sizing: border-box;
}

.flash-actions-dock [data-tooltip]::before {
    left: 50%;
}
body.dark-mode .flash-actions-dock {
    background: rgba(12, 13, 20, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);
}
body.dark-mode .flash-actions-row .action-icon {
    color: rgba(245, 245, 255, 0.9);
}
body.dark-mode .flash-actions-row .action-icon-shell {
    background: transparent;
    box-shadow: none;
}
body.dark-mode .flash-actions-row .action-icon-shell i {
    color: #fff;
}
body.dark-mode .flash-actions-row .action-label {
    color: rgba(232, 234, 255, 0.7);
}

/* Superficie flashcard: 3D leggero e performante */
body .flashcards-screen .flashcard-main { background:#fff; border-radius: 0; box-shadow: none; }
body .flashcards-screen .flashcard-container-large { padding: 12px; }
body .flashcards-screen .flashcard { will-change: transform; transition: transform .25s ease, box-shadow .25s ease; }
body .flashcards-screen .flashcard:hover { transform: translateY(-4px); }
body .flashcards-screen .flashcard-front,
body .flashcards-screen .flashcard-back { border-radius: 24px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 18px 36px rgba(128,36,51,.18), inset 0 1px 0 rgba(255,255,255,.5); }
body .flashcards-screen .flashcard-front::before,
body .flashcards-screen .flashcard-back::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 60%); pointer-events:none; }

/* Sezione rating: card moderne ma leggere */
body .flashcards-screen .rating-section { background: #fff; border: 1px solid rgba(128,36,51,.08); box-shadow: 0 16px 32px rgba(0,0,0,.1); border-radius: 20px; }
body .flashcards-screen .rate-btn { border-radius: 16px; box-shadow: 0 12px 22px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
body .flashcards-screen .rate-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 30px rgba(0,0,0,.12); }

/* Mobile: evita sovrapposizioni, usa tutta la riga */
/* Riduci animazioni se richiesto dall’utente */
@media (prefers-reduced-motion: reduce) {
  body .flashcards-screen .flashcard,
  body .flashcards-screen .rate-btn,
  body .flashcards-screen .management-btn,
  body .flashcards-screen .streak-launcher { transition: none !important; }
}

/* Dark mode – stile 3D coerente ma discreto */
body.dark-mode .flashcards-screen { background: linear-gradient(135deg, #0a0a0e 0%, #13131a 100%); }
body.dark-mode .flashcards-screen .flashcards-container { background: rgba(14,14,20,.94); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 40px 90px rgba(0,0,0,.65); }
/* Override: usa lo sfondo dark con la texture anche dentro flashcards */
body.dark-mode .flashcards-screen {
    background: transparent; /* usa solo lo sfondo del body per evitare doppie sovrapposizioni */
}

body.dark-mode .flashcards-screen .flashcards-container {
    background-color: rgba(14,14,20,.94);
    background-image:
        url('../immagini-logo/sfondo-dark.svg'),
        linear-gradient(135deg, rgba(14,14,20,.94), rgba(12,12,18,.94));
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 40px 90px rgba(0,0,0,.65);
}

/* Forza lo sfondo dark anche quando la regola con id #flashcards-screen applica il layout light */
body.dark-mode #flashcards-screen {
    background: transparent; /* unico sfondo: quello del body */
}

body.dark-mode #flashcards-screen .flashcards-container {
    background-color: rgba(14,14,20,.94);
    background-image:
        url('../immagini-logo/sfondo-dark.svg'),
        linear-gradient(135deg, rgba(14,14,20,.94), rgba(12,12,18,.94));
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 40px 90px rgba(0,0,0,.65);
}
body.dark-mode .flashcards-screen .flashcards-header {
    background: linear-gradient(135deg, #34111f, #11050a);
    color: #fff;
    padding: 10px 20px;
    min-height: 56px;
    gap: clamp(10px, 1.8vw, 18px);
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    backdrop-filter: saturate(150%) blur(12px);
}
body.dark-mode .flashcards-screen .stat-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
body.dark-mode .flashcards-screen .management-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
body.dark-mode .flashcards-screen .rating-section { background: #17181d; border-color: rgba(255,255,255,.06); box-shadow: 0 16px 36px rgba(0,0,0,.45); }

/* Header Menu */
.menu-header {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 12px clamp(18px, 3vw, 26px) 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: linear-gradient(145deg, rgba(160, 45, 66, 0.96), rgba(73, 18, 32, 0.9));
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 25px 55px rgba(6, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 0 0 24px 24px;
    backdrop-filter: blur(18px) saturate(140%);
    isolation: isolate;
    z-index: 5;
}
.menu-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
    opacity: 0.6;
}
.menu-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 18px);
    width: 100%;
}
.menu-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap;
}

.menu-branding {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.menu-title-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.menu-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.menu-user-inline {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.35);
    line-height: 1.2;
    text-transform: none;
}

.menu-logo {
    width: clamp(36px, 1.9vw, 44px);
    height: clamp(36px, 1.9vw, 44px);
    border-radius: 18px;
    border: 0px solid rgba(255,255,255,0.65);
    background: transparent;
    flex-shrink: 0;
}

.menu-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.menu-title-block h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: none;
}

.menu-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: 0.58rem;
    color: rgba(255,255,255,0.75);
}

.menu-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    min-height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.18em;
}
.menu-header__meta .menu-status-chip {
    flex-shrink: 0;
    margin-inline: auto clamp(22px, 4vw, 36px);
    justify-content: center;
    text-align: center;
}

.menu-status-chip i {
    font-size: 0.78rem;
    color: #ffe5eb;
}

.menu-status-text {
    font-size: clamp(0.56rem, 0.85vw, 0.7rem);
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.9);
}

.menu-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    cursor: pointer;
    padding: 4px;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: transform .2s ease, opacity .2s ease;
    text-shadow: 0 12px 26px rgba(0,0,0,0.5);
}
.menu-close span {
    line-height: 1;
}

.menu-close:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

.menu-close:focus-visible {
    outline: 2px solid rgba(255,255,255,0.9);
    outline-offset: 4px;
}

/* Search */
.menu-search {
    padding: 20px 24px 16px;
}

.search-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.8);
    border-radius: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: inset 0 1px 0 var(--button-gloss-strong), 0 10px 25px rgba(0,0,0,0.08);
}

.search-chip input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--text-color);
}

.search-chip input:focus {
    outline: none;
}

.search-clear {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    display: none;
}

.menu-search.active .search-clear {
    display: inline-flex;
    color: var(--primary-color);
}

body.dark-mode .menu-search.active .search-clear {
    color: rgba(255,255,255,0.8);
}

.search-hint {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 8px;
}

body.dark-mode .search-chip {
    background: rgba(25,25,25,0.7);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
}

body.dark-mode .search-chip input {
    color: #f5f5f5;
}

/* Tema card */
.menu-theme-card {
    margin: 0 24px 12px;
    padding: 18px 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(128,36,51,0.1), rgba(255,255,255,0.45));
    border: 1px solid rgba(128,36,51,0.12);
    box-shadow: 0 20px 40px rgba(128,36,51,0.12), inset 0 1px 0 rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
}

.menu-theme-card.dark {
    background: linear-gradient(135deg, rgba(128,36,51,0.35), rgba(28,28,28,0.85));
    border-color: rgba(255,255,255,0.08);
}

.theme-copy h4 {
    margin: 4px 0;
    font-size: 1.05rem;
    transition: color .2s ease;
}

.theme-eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 0.65rem;
    color: var(--text-light);
    margin: 0;
    transition: color .2s ease;
}

#themeStatusLabel {
    font-size: 0.85rem;
    color: var(--text-light);
    transition: color .2s ease;
}

body.dark-mode #themeStatusLabel {
    color: rgba(255,255,255,0.7);
}

body.dark-mode .theme-eyebrow {
    color: rgba(255,255,255,0.55);
}

body.dark-mode .theme-copy h4 {
    color: rgba(255,255,255,0.92);
}

.dark-mode-toggle {
    position: relative;
    border: none;
    background: rgba(255,255,255,0.8);
    border-radius: 999px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 190px;
    border: 1px solid rgba(0,0,0,0.05);
    margin-left: auto;
    margin-right: auto;
}

.toggle-option {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-light);
    position: relative;
    z-index: 1;
    transition: color .2s ease;
}

.toggle-option.is-active {
    color: #fff;
}

.toggle-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 6px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 10px 18px rgba(128,36,51,0.35);
    transition: transform .25s ease;
}

.dark-mode-active .toggle-thumb {
    transform: translateX(100%);
}

.menu-theme-card.dark .toggle-thumb {
    transform: translateX(100%);
}

body.dark-mode .dark-mode-toggle {
    background: rgba(20,20,20,0.85);
    border-color: rgba(255,255,255,0.1);
}

body.dark-mode .toggle-option {
    color: rgba(255,255,255,0.7);
}

body.dark-mode .toggle-option.is-active {
    color: #fff;
}

/* Navigazione Menu */
.menu-nav {
    padding: 8px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-section {
    padding: 0 24px;
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.section-heading p {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: .3em;
    margin: 0;
    color: var(--text-light);
}

.section-heading span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 16px 34px rgba(0,0,0,0.08), inset 0 1px 0 var(--button-gloss-strong);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.menu-item small {
    display: block;
    color: var(--text-light);
    font-size: 0.78rem;
}

.menu-item i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(128,36,51,0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.menu-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 35px rgba(128,36,51,0.18);
    border-color: rgba(128,36,51,0.3);
}

body.dark-mode .menu-item {
    background: rgba(18,18,18,0.75);
    border-color: rgba(255,255,255,0.05);
}

body.dark-mode .menu-item small {
    color: rgba(255,255,255,0.6);
}

/* Footer Menu */
.menu-footer {
    padding: 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: auto;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-light);
}

body.dark-mode .menu-footer {
    border-top-color: rgba(255,255,255,0.08);
}

/* ===================== */
/* SCHERMATA FLASHCARDS DEDICATA */
/* ===================== */

/* Container principale - FIX CRITICO */
.flashcards-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: clamp(18px, 3vw, 48px);
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 45%),
        radial-gradient(circle at 82% 0%, rgba(255,214,224,0.35) 0%, rgba(255,214,224,0) 60%),
        linear-gradient(135deg, #fef6f8 0%, #f2e7ed 45%, #e8dfe6 100%);
    z-index: 9999;
    display: none;
    overflow-y: auto;
    overflow-x: hidden; /* evita scroll orizzontale e lag */
    touch-action: pan-y; /* scorrimento fluido su mobile */
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    overscroll-behavior-y: contain;
}

/* Scrollbar fluida per la schermata flashcards */
.flashcards-screen::-webkit-scrollbar { width: 12px; height: 12px; }
.flashcards-screen::-webkit-scrollbar-track { background: rgba(0,0,0,.04); border-radius: 10px; }
.flashcards-screen::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary-color), var(--primary-dark)); border-radius: 10px; border: 3px solid rgba(255,255,255,.6); }
.flashcards-screen::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--primary-dark), var(--primary-color)); }

.flashcards-container {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    background: var(--surface-card);
    border-radius: 0 0 36px 36px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* per ancorare il dock delle azioni */
}

/* Forza lo sfondo grafico anche dentro la schermata flashcards */
#flashcards-screen .flashcards-container {
    background-image:
        url('../immagini-logo/sfondo.svg'),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 247, 0.95));
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
}

/* Header fisso */
.flashcards-screen .flashcards-header {
    background: var(--flashcards-header-gradient);
    color: var(--white);
    padding: clamp(18px, 4vw, 30px) clamp(24px, 5vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 15px);
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 58px;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}

.flashcards-header-back {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 1.5rem;
  color: #ffffff;
  box-shadow: none;
}

.flashcards-header-back:hover {
  color: rgba(255, 255, 255, 0.85);
}

.flashcards-header .back-arrow-btn-small {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 18px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.flashcards-header .back-arrow-btn-small:hover {
    transform: translateY(-1px);
}

.flashcards-header .back-arrow-btn-small:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 320px;
    min-width: 260px;
}

.title-glow {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--subject-icon, var(--white));
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
        140deg,
        var(--subject-primary, var(--primary-color)),
        var(--subject-secondary, var(--primary-dark))
    );
    border: 1px solid var(--subject-border, rgba(255, 255, 255, 0.35));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -10px 18px rgba(0, 0, 0, 0.22),
        0 24px 44px var(--subject-shadow, rgba(24, 0, 8, 0.45));
}

.title-glow::before,
.title-glow::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.title-glow::before {
    inset: 4px;
    border-radius: inherit;
    background: radial-gradient(
        circle at 30% 30%,
        var(--subject-glow, rgba(255, 255, 255, 0.8)),
        rgba(255, 255, 255, 0)
    );
    opacity: 0.85;
    filter: blur(0.5px);
    z-index: 1;
}

.title-glow::after {
    inset: -30% auto auto -18%;
    width: 70%;
    height: 180%;
    border-radius: 50%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    opacity: 0.6;
    transform: rotate(-18deg);
    z-index: 2;
}

.title-glow i {
    position: relative;
    z-index: 3;
}

body .flashcards-screen i[class*='fa-'] {
    color: var(--subject-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    font-size: inherit;
    line-height: 1;
    text-shadow:
        0 2px 3px rgba(255, 255, 255, 0.85),
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 12px 34px var(--subject-shadow);
    filter: drop-shadow(0 18px 30px var(--subject-shadow));
    transition: transform .25s ease, text-shadow .25s ease, filter .25s ease, color .25s ease;
}

body .flashcards-screen i[class*='fa-']::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, var(--subject-glow), rgba(255, 255, 255, 0) 60%);
    opacity: 0.65;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: scale(0.78);
    transition: opacity .25s ease, transform .25s ease;
}

body .flashcards-screen i[class*='fa-']:hover {
    transform: translateY(-2px) perspective(320px) rotateX(3deg);
    text-shadow:
        0 3px 5px rgba(255, 255, 255, 0.95),
        0 10px 24px rgba(0, 0, 0, 0.45),
        0 18px 40px var(--subject-shadow);
}

body .flashcards-screen i[class*='fa-']:hover::after {
    opacity: 0.95;
    transform: scale(0.92);
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small {
    border: 1px solid var(--subject-border);
    color: var(--subject-icon);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -8px 14px rgba(0, 0, 0, 0.35),
        0 20px 30px var(--subject-shadow);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.8), transparent 45%),
        linear-gradient(145deg, var(--subject-primary), var(--subject-secondary));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -10px 18px rgba(0, 0, 0, 0.35);
    z-index: 0;
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    filter: blur(1px);
    opacity: 0.6;
    z-index: 0;
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small i {
    color: var(--subject-icon);
    position: relative;
    z-index: 1;
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -12px 20px rgba(0, 0, 0, 0.4),
        0 28px 38px var(--subject-shadow);
    transform: translateY(-1px) scale(1.01);
}

.title-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
}

.header-title h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #fff;
}

.flashcards-screen .stat-badge {
    background: rgba(128,36,51,0.08);
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(128,36,51,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #fff;
    box-shadow: none;
    min-width: 120px;
    font-weight: 600;
}

.flashcards-screen .stat-badge i {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.flashcards-screen .stat-badge span {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.streak-launcher {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 26px;
    border-radius: 44px;
    border: 1px solid rgba(255,255,255,0.25);
    background: linear-gradient(135deg, #701e2e, #3d0f1a);
    color: #fff;
    cursor: pointer;
    min-width: 220px;
    box-shadow: 0 20px 38px rgba(11, 3, 6, 0.45);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.streak-launcher__icon {
    width: 54px;
    height: 54px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffe9b8, #f5c46d);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a2b0c;
    font-size: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 9px 20px rgba(0,0,0,.3);
}

.streak-launcher__copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.streak-launcher__copy .label {
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.streak-launcher__copy .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.streak-launcher:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #7f2842, #4a121e);
    box-shadow: 0 24px 54px rgba(7, 2, 5, 0.55);
}

.streak-launcher:focus-visible {
    outline: 3px solid rgba(255,255,255,0.4);
    outline-offset: 3px;
}

.management-buttons {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.flashcards-screen .management-btn {
    position: relative;
    border: none;
    border-radius: 20px;
    padding: 12px 18px;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,248,248,0.85));
    color: var(--secondary-color);
    font-weight: 600;
    box-shadow: 0 20px 50px rgba(26,17,39,0.18), inset 0 1px 0 var(--button-gloss-strong);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.flashcards-screen .management-btn .btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #b82644, #8c1632);
    color: #fff;
    box-shadow: inset 0 1px 0 var(--button-gloss);
    font-size: 1.1rem;
}

.flashcards-screen .management-btn .btn-label {
    line-height: 1.3;
}

.flashcards-screen .management-btn[data-variant='export'] .btn-icon {
    background: linear-gradient(135deg, #f4a259, #f37b3b);
}

.flashcards-screen .management-btn[data-variant='stats'] .btn-icon {
    background: linear-gradient(135deg, #6f7dff, #9157ff);
}

.flashcards-screen .management-btn[data-variant='export'] {
    background: linear-gradient(145deg, #fff7ee, #fde6cb);
}

.flashcards-screen .management-btn[data-variant='stats'] {
    background: linear-gradient(145deg, #f3f6ff, #dfe6ff);
}

.flashcards-screen .management-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 60px rgba(26,17,39,0.25);
}

.flashcards-screen .management-btn:active {
    transform: translateY(0);
}

.flashcards-screen .management-btn:focus-visible {
    outline: 3px solid rgba(128,36,51,0.3);
    outline-offset: 3px;
}

.study-options { max-width: 1100px; width: 100%; padding: clamp(12px, 2vw, 18px); margin: 0 auto; overflow: visible; }

.study-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    text-align: left;
    position: relative;
    width: 100%;
}
@media (min-width: 900px) {
    .study-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(18px, 2vw, 32px);
    }
}
.study-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.study-heading-copy::after {
    content: '';
    width: 86px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(128, 36, 51, 0.9), rgba(255, 149, 175, 0.8));
    box-shadow: 0 8px 18px rgba(128, 36, 51, 0.25);
    margin-top: 6px;
    align-self: flex-start;
}
.hero-visual-toggle {
    align-self: flex-start;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    transition: transform 0.2s ease;
}
.hero-visual-toggle[aria-expanded="false"] {
    background: rgba(128, 36, 51, 0.16);
}
.hero-visual-toggle i {
    font-size: 0.95rem;
}
.hero-visual-toggle span {
    white-space: nowrap;
}

.study-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.study-settings-panel {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 22px 28px;
    border-radius: 26px;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.8));
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(128, 36, 51, 0.1);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.study-settings-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(128, 36, 51, 0.2), rgba(128, 36, 51, 0.05));
    color: var(--primary-color);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.study-settings-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.study-quantity-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.study-quantity-row .study-settings-control {
    flex: 0 0 220px;
}

.study-settings-summary {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 36, 51, 0.08);
    border-radius: 14px;
    padding: 10px 16px;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 0.95rem;
}

.study-settings-summary i {
    color: var(--primary-color);
}

.study-settings-content label {
    font-weight: 700;
    color: var(--secondary-color);
    display: block;
    font-size: 1.05rem;
}

.study-settings-control {
    max-width: 320px;
}

.flashcard-limit-select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(128, 36, 51, 0.25);
    padding: 12px 18px;
    font-weight: 500;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.flashcard-limit-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(128, 36, 51, 0.12);
}

.study-settings-hint {
    margin: 0;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 500;
}

.study-settings-hint strong {
    color: var(--primary-color);
}

.reset-deck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 22px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(128, 36, 51, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reset-deck-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 32px rgba(128, 36, 51, 0.35);
}

.reset-deck-btn:focus {
    outline: 3px solid rgba(128, 36, 51, 0.35);
    outline-offset: 3px;
}

.study-header h2 {
    color: #4a0e1d;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    text-shadow: 0 18px 40px rgba(74, 14, 29, 0.25);
}
.study-header h2 i {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(247, 224, 229, 0.9), rgba(255, 255, 255, 0.6));
    color: var(--primary-dark);
    box-shadow: 0 12px 24px rgba(74, 14, 29, 0.25);
}
.study-header p {
    color: rgba(53, 7, 18, 0.75);
    font-size: 1.05rem;
    margin: 0;
    max-width: 52ch;
}

.study-option-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.study-option-card {
    background: var(--surface-card);
    border-radius: 16px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-card-soft);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transform-origin: center;
}

.study-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-light), var(--primary-dark));
    transition: width 0.3s ease;
}

.study-option-card:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-card-strong);
    border-color: var(--surface-border-strong);
}

.study-option-card:hover::before {
    width: 9px;
}

.card-icon {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 12px 24px rgba(128, 36, 51, 0.25);
}

.card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-dark);
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    border: 2px solid white;
}

.card-content {
    flex: 1;
}

.card-content h4 {
    color: var(--secondary-color);
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.card-content p {
    color: var(--text-white);
    margin-bottom: 15px;
    line-height: 1.5;
}

.card-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(128, 36, 51, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.card-progress .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.card-progress span {
    font-size: 0.9rem;
    color: rgba(128, 36, 51, 0.75);
    font-weight: 500;
    min-width: 60px;
}

.card-stats {
    display: flex;
    gap: 15px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

.card-arrow {
    color: rgba(128, 36, 51, 0.55);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.study-option-card:hover .card-arrow {
    transform: translateX(5px);
    color: var(--primary-dark);
}

/* ==========================
   Nuova interfaccia Study Mode
   ========================== */

/* Study hero (modern 3D header) */
.study-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 28px);
    border-radius: 36px;
    padding: clamp(24px, 3vw, 36px);
    background: #f7f1f3;
    border: 1px solid rgba(128, 36, 51, 0.1);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.09);
    overflow: hidden;
    isolation: isolate;
    perspective: 1200px;
    margin-bottom: clamp(24px, 3vw, 36px);
    min-height: clamp(240px, 30vw, 360px);
    transition: grid-template-columns 0.35s ease, padding 0.35s ease, min-height 0.35s ease, background 0.35s ease;
}
.study-hero:not(.hero-visual-collapsed) {
    min-height: clamp(100px, 14vw, 160px);
    padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.8vw, 20px);
    gap: clamp(8px, 1vw, 16px);
}
@media (min-width: 960px) {
    .study-hero:not(.hero-visual-collapsed) {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
    }
}
.study-hero.hero-visual-collapsed {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    height: clamp(390px, 15vw, 160px);
    min-height: auto;
    padding: clamp(10px, 1vw, 14px);
}
.study-hero:not(.hero-visual-collapsed) .hero-text,
.study-hero:not(.hero-visual-collapsed) .hero-visual {
    height: 100%;
    align-self: stretch;
    min-height: 0;
}
.study-hero::before,
.study-hero::after {
    content: none;
}

.hero-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 26px);
    padding: clamp(16px, 1.8vw, 26px);
    width: 100%;
    margin: 0;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    justify-content: center;
}
.hero-text-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 1.5vw, 20px);
    flex-wrap: nowrap;
}
.hero-text-top .hero-eyebrow {
    margin: 0;
}
.hero-text-top .hero-visual-toggle {
    margin-left: auto;
}
.study-footer {
    border-top: 1px solid var(--medium-gray);
    padding-top: 25px;
}
.hero-text::after {
    content: none;
}
.hero-eyebrow,
.settings-eyebrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-dark);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(128, 36, 51, 0.08);
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: none;
}
.hero-eyebrow::before,
.settings-eyebrow::before {
    display: none;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 18px;
    border: 1px solid rgba(128, 36, 51, 0.22);
    background: transparent;
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-btn.ghost {
    background: transparent;
    border-color: rgba(128, 36, 51, 0.3);
}
.hero-btn.elevated {
    background: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: none;
}
.hero-btn:hover {
    background: rgba(128, 36, 51, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(128, 36, 51, 0.18);
}

.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 6px; }
.metric-card {
    background: #fff;
    border: 1px solid rgba(128, 36, 51, 0.1);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: none;
    transform: translateZ(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.metric-label{ font-size:.8rem; color: var(--text-light); font-weight:600; }
.metric-value{ display:block; font-size:1.35rem; font-weight:700; color: var(--primary-dark); line-height:1.2; }
.metric-card small{ color:#7a7a7a; }

.hero-visual {
    position: relative;
    min-height: clamp(180px, 20vw, 320px);
    padding: clamp(12px, 1.6vw, 18px);
    width: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    perspective: 1600px;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 124, 170, 0.35), rgba(20, 5, 12, 0.92) 75%);
    background-color: #802433;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 28px 60px rgba(5, 0, 8, 0.55);
    isolation: isolate;
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
#flashcards-screen .hero-visual{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(240px, 30vw, 420px);
    padding: clamp(18px, 2.4vw, 26px);
    aspect-ratio: 1 / 1;
    width: min(100%, 590px);
    max-height: clamp(320px, 45vw, 560px);
    margin: 0 auto;
}
.study-hero.hero-visual-collapsed .hero-visual {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(32px, 20px, 0) scale(0.96);
    min-height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
}
.hero-visual::before,
.hero-visual::after {
    content: none;
}
.hero-orbit {
    position: relative;
    width: clamp(174px, 18vw, 246px);
    height: clamp(174px, 18vw, 246px);
    display: grid;
    place-items: center;
    justify-items: center;
    align-items: center;
    transform-style: preserve-3d;
    border-radius: 50%;
    --orbit-tilt: 58deg;
    --orbit-ring-inner: clamp(152px, 22vw, 248px);
    --orbit-ring-outer: clamp(192px, 26vw, 300px);
    --orbit-core-size: clamp(100px, 14vw, 150px);
    --orbit-ring-inner-speed: 20s;
    --orbit-ring-outer-speed: 28s;
    --parallax-x: 0;
    --parallax-y: 0;
    --orbit-stack-offset: 12px;
    transition: transform 0.35s cubic-bezier(.2,.6,.2,1);
    transform: translateY(var(--orbit-stack-offset)) rotateX(calc(var(--parallax-y, 0) * 1deg)) rotateY(calc(var(--parallax-x, 0) * 1deg));
    cursor: grab;
    touch-action: none;
    background: radial-gradient(circle at 45% 40%, rgba(255, 140, 182, 0.16), transparent 60%);
    box-shadow: 0 30px 55px rgba(0, 0, 0, 0.45);
}
#flashcards-screen .hero-orbit{
    --orbit-stack-offset: 0px;
    margin: 0 auto;
}
#flashcards-screen .hero-orbit--flashcards-clean{
    --orbit-core-size: clamp(118px, 17vw, 178px);
    --orbit-stack-offset: 0px;
    width: min(100%, clamp(220px, 30vw, 380px));
    height: min(100%, clamp(220px, 30vw, 380px));
    max-width: 88%;
    max-height: 88%;
    background: none;
    box-shadow: none;
    position: relative;
    border-radius: 50%;
    border: none;
    padding: clamp(8px, 2vw, 16px);
    isolation: isolate;
    backdrop-filter: none;
}
#flashcards-screen .hero-orbit--flashcards-clean::after{
    content: none;
}
#flashcards-screen .hero-orbit--flashcards-clean::before{
    content: none;
}
#flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-belts,
#flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-ring{
    display: none !important;
}
#flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core{
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.92) 10%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 70% 72%, rgba(255, 220, 232, 0.15), transparent 60%),
        var(--flashcards-header-gradient);
    box-shadow: 0 42px 88px rgba(128, 36, 51, 0.38), inset 0 12px 28px rgba(255, 255, 255, 0.35), inset 0 -20px 35px rgba(65, 8, 18, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.42);
}
#flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core::before{
    inset: -18px;
    background: conic-gradient(from 90deg, rgba(255, 255, 255, 0.28), rgba(92, 7, 23, 0.3) 65%, rgba(255, 255, 255, 0.28));
    filter: blur(22px);
    opacity: 0.9;
    animation-duration: 26s;
}
#flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core::after{
    inset: 16px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.78), transparent 70%),
        conic-gradient(from 120deg, rgba(255, 255, 255, 0.1), transparent 40%, rgba(255, 255, 255, 0.28) 60%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation-duration: 9s;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric-shell{
    filter: drop-shadow(0 12px 24px rgba(128, 36, 51, 0.22));
    transition: filter .4s ease, opacity .4s ease;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric{
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: #fff7ec;
    mix-blend-mode: screen;
    opacity: var(--orbit-opacity-front, 0.95);
    backdrop-filter: blur(18px) saturate(180%) brightness(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.12);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease, filter .45s ease, box-shadow .45s ease;
    text-shadow: 0 8px 14px rgba(6, 0, 8, 0.55);
    width: clamp(90px, 10vw, 165px);
    min-width: clamp(90px, 10vw, 165px);
    max-width: 175px;
    height: clamp(28px, 2.8vw, 40px);
    padding: clamp(5px, 0.72vw, 8px) clamp(7px, 0.92vw, 12px);
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric::before{
    inset: -14px -18px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric::after{
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 251, 248, 0.45);
    opacity: 0.35;
    transition: opacity .4s ease;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric-shell--front .orbit-metric{
    box-shadow: 0 36px 70px rgba(128, 36, 51, 0.45), inset 0 0 22px rgba(255, 255, 255, 0.15);
    opacity: 1;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric-shell--back .orbit-metric{
    mix-blend-mode: normal;
    opacity: 0.55 !important;
    filter: blur(0.2px);
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric__label--solo{
    --flashcard-label-min: 0.64rem;
    --flashcard-label-max: 0.88rem;
    --flashcard-label-fluid: calc(0.54rem + 0.38vw);
    font-size: clamp(var(--flashcard-label-min), var(--flashcard-label-fluid), var(--flashcard-label-max));
    line-height: normal;
    letter-spacing: 0.02em;
    font-weight: 700;
    width: 100%;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #fff8f1;
    text-shadow: none;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric-shell--spotlight{
    filter: drop-shadow(0 35px 68px rgba(128, 36, 51, 0.55)) saturate(140%);
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric--spotlight{
    transform: scale(1.12) translateZ(32px);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fffdf4;
    text-shadow: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 217, 235, 0.35));
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 48px 90px rgba(128, 36, 51, 0.65), inset 0 0 30px rgba(255, 255, 255, 0.25);
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric--spotlight::before{
    opacity: 1;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric--spotlight::after{
    opacity: 0.85;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-metric-shell--spotlight .orbit-metric__label--solo{
    font-size: clamp(calc(var(--flashcard-label-min) + 0.04rem), calc(var(--flashcard-label-fluid) + 0.06rem), calc(var(--flashcard-label-max) + 0.06rem));
    letter-spacing: 0.05em;
}
.hero-orbit-core--pulse{
    animation: orbitCorePulse .85s cubic-bezier(.2,.6,.2,1);
}
@keyframes orbitCorePulse{
    0%{ transform: translate(-50%, -50%) translateZ(64px) scale(1); box-shadow: 0 32px 72px rgba(0,0,0,0.6), inset 0 10px 24px rgba(255,255,255,0.3), inset 0 -24px 30px rgba(56,8,18,0.8); }
    35%{ transform: translate(-50%, -50%) translateZ(64px) scale(1.05); box-shadow: 0 42px 90px rgba(0,0,0,0.72), inset 0 14px 26px rgba(255,255,255,0.45), inset 0 -26px 36px rgba(56,8,18,0.9); }
    60%{ transform: translate(-50%, -50%) translateZ(64px) scale(0.98); }
    100%{ transform: translate(-50%, -50%) translateZ(64px) scale(1); }
}
.hero-orbit::before {
    content: '';
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), transparent 60%);
    filter: blur(14px);
    opacity: 0.5;
    transform: translateZ(-20px);
    pointer-events: none;
}
.hero-orbit::after {
    content: '';
    position: absolute;
    width: 82%;
    height: 32%;
    bottom: clamp(12px, 3vw, 24px);
    left: 50%;
    transform: translate(-50%, 0) rotateX(82deg);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 2, 8, 0.45), transparent 75%);
    filter: blur(16px);
    opacity: 0.55;
    pointer-events: none;
}
.hero-orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--orbit-core-size);
    height: var(--orbit-core-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transform: translate(-50%, -50%) translateZ(64px);
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 246, 250, 0.9) 12%, rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 36% 30%, rgba(255, 150, 196, 0.88) 34%, rgba(149, 29, 64, 0.85) 68%, rgba(42, 2, 12, 0.95) 100%);
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.6), inset 0 10px 24px rgba(255, 255, 255, 0.3), inset 0 -24px 30px rgba(56, 8, 18, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.28);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}
.hero-orbit-core::before {
    content: '';
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    background: conic-gradient(from 110deg at 50% 50%, rgba(255, 150, 185, 0.35), rgba(255, 255, 255, 0.08) 32%, rgba(80, 14, 22, 0.5) 68%, rgba(255, 150, 185, 0.35));
    filter: blur(18px);
    animation: orbitCoreSpin 18s linear infinite;
    opacity: 0.7;
}
.hero-orbit-core::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.7), transparent 72%);
    mix-blend-mode: screen;
    animation: orbitCoreSheen 10s ease-in-out infinite;
    opacity: 0.6;
}
.orbit-display{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; transform: translateZ(32px); text-align:center; pointer-events:none; min-width: clamp(80px, 9.5vw, 120px); }
.orbit-value{ font-size: clamp(0.95rem, 1.8vw, 1.4rem); font-weight: 800; letter-spacing:.035em; line-height: 1.35; text-transform: uppercase; color:#fff; text-shadow: 0 16px 30px rgba(0,0,0,0.5), 0 0 36px rgba(255,255,255,0.55), 0 34px 60px rgba(110,20,32,0.55); transition: opacity .35s ease, transform .35s ease; will-change: opacity, transform; }
.orbit-display .orbit-label{ display:none; }
/* Smooth text swap helpers */
.orbit-text-out{ opacity: 0 !important; transform: translateY(6px) scale(.98) !important; }
.orbit-text-in{ opacity: 0 !important; transform: translateY(-6px) scale(1.02) !important; }
#flashcards-screen .hero-orbit--flashcards-clean .orbit-display{
    transform: translateZ(46px) scale(1.08);
    gap: 6px;
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-value{
    position: relative;
    font-size: clamp(1.35rem, 1.1rem + 1.65vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.18;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #ffffff 0%, #f2f5ff 38%, #d9e3ff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 3px;
    transform: translateY(-1px);
    text-shadow:
        0 18px 34px rgba(12, 10, 20, 0.52),
        0 0 38px rgba(255, 255, 255, 0.62),
        0 24px 48px rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.35));
}
#flashcards-screen .hero-orbit--flashcards-clean .orbit-value::after{
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.55), transparent 55%);
    mix-blend-mode: screen;
    opacity: 0.7;
    filter: blur(10px);
    pointer-events: none;
}
.orbit-swipe-left{ animation: orbitSwipeLeft .42s cubic-bezier(.3,.65,.3,1); }
.orbit-swipe-right{ animation: orbitSwipeRight .42s cubic-bezier(.3,.65,.3,1); }
@keyframes orbitSwipeLeft{ from{ transform: translateZ(64px) rotateY(0deg);} 50%{ transform: translateZ(64px) rotateY(-10deg);} to{ transform: translateZ(64px) rotateY(0deg);} }
@keyframes orbitSwipeRight{ from{ transform: translateZ(64px) rotateY(0deg);} 50%{ transform: translateZ(64px) rotateY(10deg);} to{ transform: translateZ(64px) rotateY(0deg);} }
.hero-orbit-ring{ position:absolute; border-radius:50%; border: var(--orbit-ring-thickness, 1.5px) solid var(--orbit-ring-color, rgba(255,186,212,0.35)); width: var(--orbit-ring-size, var(--orbit-ring-inner)); height: var(--orbit-ring-size, var(--orbit-ring-inner)); opacity: var(--orbit-ring-opacity, 0.75); box-shadow: 0 28px 45px rgba(42,1,16,0.28); filter: drop-shadow(0 18px 32px rgba(16,0,5,0.28)); transform-style:preserve-3d; transform: rotateX(var(--orbit-tilt)) translateZ(0); pointer-events:none; overflow:visible; mix-blend-mode: screen; animation: orbitRingSpin var(--orbit-ring-speed, var(--orbit-ring-inner-speed, 24s)) linear infinite; animation-delay: var(--orbit-ring-delay, 0s); --orbit-ring-glow-opacity: 0.6; }
.hero-orbit-ring--enhanced{ border-color: rgba(255,231,241,0.55); box-shadow: 0 32px 70px rgba(74,7,24,0.4); filter: drop-shadow(0 20px 34px rgba(74,7,24,0.3)); }
/* Luminous arc on rings */
.hero-orbit-ring::before{ content:''; position:absolute; inset:-1px; border-radius:50%; background: conic-gradient(from 0deg, transparent 0 60deg, rgba(255,231,241,.65) 120deg 150deg, transparent 210deg 360deg); opacity: var(--orbit-ring-glow-opacity, .6); filter: blur(2px); mask: radial-gradient(closest-side, #000 72%, transparent 80%); }
.hero-orbit-ring::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(255,255,255,0.06); filter: blur(4px); opacity:.2; }
.hero-orbit .ring-one{ --orbit-ring-size: var(--orbit-ring-inner); --orbit-ring-speed: var(--orbit-ring-inner-speed, 24s); }
.hero-orbit .ring-two{ display: none; }
@keyframes orbitRingSpin{ from{ transform: rotateX(var(--orbit-tilt)) rotateZ(0deg); } to{ transform: rotateX(var(--orbit-tilt)) rotateZ(360deg); } }

.hero-orbit-metrics{ position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; z-index:2; }
.hero-orbit-belts{ position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; z-index:1; }
.hero-orbit-band{ position:absolute; left:50%; top:50%; width: clamp(170px, 24vw, 280px); height: clamp(170px, 24vw, 280px); transform-style:preserve-3d; animation: orbitBandSpin var(--band-speed, 18s) linear infinite; animation-direction: var(--band-direction, normal); animation-delay: var(--band-delay, 0s); mix-blend-mode: screen; }
.hero-orbit-band span{ position:absolute; inset:0; border-radius:50%; border: var(--band-thickness, 2px) solid rgba(255,255,255,0.7); border-left-color: rgba(255,255,255,0.22); border-right-color: rgba(255,255,255,0.45); opacity:0.85; transform: rotateX(var(--band-tilt, 0deg)) rotateY(var(--band-yaw, 0deg)) translateZ(var(--band-depth, 10px)); box-shadow: 0 12px 22px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.75); filter: drop-shadow(0 8px 18px rgba(2,0,8,0.45)); }
.hero-orbit-band.band-one{ --band-tilt: 12deg; --band-yaw: 4deg; --band-speed: 14s; --band-depth: 18px; }
.hero-orbit-band.band-two{ --band-tilt: 58deg; --band-yaw: 18deg; --band-speed: 22s; --band-depth: 6px; --band-direction: reverse; width: clamp(150px, 22vw, 250px); height: clamp(150px, 22vw, 250px); }
.hero-orbit-band.band-three{ --band-tilt: 36deg; --band-yaw: -46deg; --band-speed: 28s; --band-depth: -4px; width: clamp(140px, 20vw, 230px); height: clamp(140px, 20vw, 230px); }
@keyframes orbitBandSpin{ from{ transform: translate(-50%, -50%) rotateZ(0deg); } to{ transform: translate(-50%, -50%) rotateZ(360deg); } }
.orbit-track{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; animation: orbitTrackSpin var(--orbit-duration,28s) linear infinite; animation-delay: var(--orbit-delay,0s); will-change: transform; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.orbit-metric-shell{ position:relative; transform-style:preserve-3d; animation: orbitShellSpin var(--orbit-duration,28s) linear infinite, orbitDepth var(--orbit-duration,28s) linear infinite; animation-delay: var(--orbit-delay,0s); --orbit-elevation: var(--orbit-elevation-base,36px); --orbit-opacity-front: var(--orbit-opacity-front-base,0.92); --orbit-opacity-back: var(--orbit-opacity-back-base,0.24); will-change: transform, opacity; backface-visibility:hidden; transition: transform .48s cubic-bezier(.2,.6,.2,1), opacity .4s ease; }
.orbit-metric-shell--front{ z-index: 3; }
.orbit-metric-shell--back{ z-index: 0; }
.orbit-metric-shell--active{ --orbit-elevation: var(--orbit-elevation-active,72px); --orbit-opacity-front: 1; }
.orbit-metric{ position:relative; width: clamp(78px, 9vw, 130px); min-width: clamp(78px, 9vw, 130px); max-width: 150px; height: clamp(30px, 3vw, 42px); display:flex; align-items:center; justify-content:center; text-align:center; padding: clamp(6px, 0.8vw, 9px) clamp(8px, 0.9vw, 12px); transform-style:preserve-3d; pointer-events:none; color:#fff; filter: drop-shadow(0 9px 18px rgba(70,30,38,0.28)); opacity: var(--orbit-opacity-front); transform-origin:center; transform: rotateX(0deg) rotateY(0deg) translateZ(0); transition: transform .45s cubic-bezier(.2,.6,.2,1), filter .45s ease, opacity .45s ease; will-change: filter, opacity, transform; backface-visibility: hidden; border-radius:11px; background: linear-gradient(155deg, rgba(255,255,255,.36), rgba(255,255,255,.16)); border:1px solid rgba(255,255,255,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.orbit-metric::before{ content:''; position:absolute; inset:-10px -14px; border-radius:30px; background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0)); opacity:0; transition: opacity .4s ease; }
.orbit-metric--active{ filter: drop-shadow(0 32px 56px rgba(128,36,51,0.48)); }
.orbit-metric--active::before{ opacity:.9; }
.orbit-metric__value{ font-size:1.02rem; font-weight:800; letter-spacing:.08em; background: linear-gradient(140deg, rgba(255,255,255,0.98), rgba(255,210,214,0.9)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 30px rgba(255,206,214,0.52); }
.orbit-metric__label{ font-size: clamp(.96rem, 0.6rem + 0.6vw, 1.18rem); font-weight: 820; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,232,238,0.98); text-shadow:0 6px 14px rgba(0,0,0,0.32); line-height:1.1; display:flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; word-break:normal; }
.orbit-metric__label--solo{ font-size: clamp(.92rem, 0.56rem + 0.54vw, 1.12rem); font-weight: 820; letter-spacing:.05em; text-transform:none; display:block; width:100%; color: rgba(255,245,247,0.98); text-shadow:0 6px 16px rgba(0,0,0,0.28); white-space:nowrap; word-break:normal; overflow:visible; text-overflow:unset; line-height: normal; }

@keyframes orbitTrackSpin{
  from{ transform: rotateZ(var(--orbit-phase,0deg)) rotateX(calc(-1 * var(--orbit-tilt,58deg))); }
  to{ transform: rotateZ(calc(var(--orbit-phase,0deg) + 360deg)) rotateX(calc(-1 * var(--orbit-tilt,58deg))); }
}
@keyframes orbitShellSpin{
  from{ transform: rotateZ(calc(-1 * var(--orbit-phase,0deg))) translateX(var(--orbit-radius,132px)) rotateX(var(--orbit-tilt,58deg)) translateZ(var(--orbit-elevation)); }
  to{ transform: rotateZ(calc(-1 * (var(--orbit-phase,0deg) + 360deg))) translateX(var(--orbit-radius,132px)) rotateX(var(--orbit-tilt,58deg)) translateZ(var(--orbit-elevation)); }
}
@keyframes orbitDepth{
  0%,100%{ opacity: var(--orbit-opacity-front,0.9); }
  45%,55%{ opacity: var(--orbit-opacity-back,0.22); }
}
@keyframes orbitCoreSpin{ from{ transform: rotate(0deg) scale(1.02); } to{ transform: rotate(360deg) scale(1.02); } }
@keyframes orbitCoreSheen{
  0%,100%{ transform: rotate(0deg) scale(1); opacity:.84; }
  45%{ transform: rotate(32deg) scale(1.04); opacity:1; }
  70%{ transform: rotate(-18deg) scale(.98); opacity:.74; }
}
@keyframes orbitHintPulse{
  0%,100%{ box-shadow: 0 16px 28px rgba(128,36,51,0.18), inset 0 1px 0 rgba(255,255,255,0.82); }
  50%{ box-shadow: 0 22px 36px rgba(128,36,51,0.26), inset 0 1px 0 rgba(255,255,255,0.92); }
}

.hero-orbit-hint{ position:absolute; bottom: clamp(18px, 3.8vw, 30px); left:50%; transform: translateX(-50%); display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 20px; border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,182,216,0.15)); border:1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.35); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; box-shadow:0 18px 32px rgba(6,0,10,0.25), inset 0 1px 0 rgba(255,255,255,0.25); animation: orbitHintPulse 6.5s ease-in-out infinite; pointer-events:auto; z-index:4; }
.hero-orbit-hint span{ pointer-events:none; max-width: 220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.hero-orbit-hint i{ font-size:.78rem; filter: drop-shadow(0 2px 6px rgba(255,255,255,0.7)); pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .orbit-track,
  .orbit-metric-shell{
    animation-duration: calc(var(--orbit-duration, 28s) * 3) !important;
  }
  .hero-orbit .ring-one{
    animation-duration: calc(var(--orbit-ring-inner-speed, 24s) * 3) !important;
  }
  .hero-orbit .ring-two{
    animation-duration: calc(var(--orbit-ring-outer-speed, 32s) * 3) !important;
  }
  .hero-orbit-core::before{ animation-duration: 36s !important; }
  .hero-orbit-core::after{ animation-duration: 22s !important; }
  .hero-orbit-hint{ animation-duration: 12s !important; }
}

/* Zoom + 4K scaling enhancements */
.hero-orbit.is-zoomed{ transform: scale(1.18) rotateX(calc(var(--parallax-y, 0) * 1deg)) rotateY(calc(var(--parallax-x, 0) * 1deg)); }
@media (min-width: 1600px){
  .hero-orbit{ width: clamp(280px, 26vw, 500px); height: clamp(280px, 26vw, 500px); }
}


/* Divider per la sezione "Le tue Flashcard" */
.user-cards-section{ margin-top: 18px; }
.section-divider{ position: relative; display:flex; align-items:center; justify-content:center; margin: 8px 0 14px; }
.section-divider::before{ content:''; position:absolute; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent); }
.section-divider span{ position:relative; background: #fff; color: var(--primary-dark); font-weight:700; padding: 4px 10px; border-radius: 999px; border:1px solid rgba(0,0,0,.1); box-shadow: 0 8px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.85); }
.user-cards-copy{
    margin: 0 0 10px;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(128, 36, 51, 0.08);
    padding: 10px 14px;
    border-radius: 14px;
    display: inline-block;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.inline-link{ color: var(--primary-color); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover{ color: var(--primary-dark); }

.user-cards-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

/* 3D list container */
.study-option-cards{ perspective: 900px; }
.study-option-card{ transform-style: preserve-3d; }
.study-option-card[data-depth="1"]{ --depth: 6; }
.study-option-card[data-depth="2"]{ --depth: 9; }
.study-option-card[data-depth="3"]{ --depth: 12; }
.study-option-card[data-depth="4"]{ --depth: 15; }
.study-option-card:hover{ transform: scale(1.01) translateZ(calc(var(--depth, 8) * 1px)); }
.card-muted{ color: #6c6e77; margin: 0 0 10px; }
.study-option-card .card-controls{ position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; }
.limit-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(128,36,51,.18); background: linear-gradient(145deg,#fff, #f8f8fb); color: var(--secondary-color); box-shadow: 0 8px 22px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.8); font-weight:600; cursor:pointer; }
.limit-pill i{ color: var(--primary-color); }
.limit-pill:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.16); }
body.dark-mode .limit-pill{ background: linear-gradient(145deg,#1b1b1f,#111115); border-color: rgba(255,255,255,.12); color: var(--dark-text-primary); box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
body.dark-mode .limit-pill i{ color: var(--dark-primary); }
body.dark-mode .limit-pill:hover{ box-shadow: 0 14px 30px rgba(0,0,0,.65); }

/* Dark mode adaption for the hero and new blocks */
body.dark-mode .study-hero{
    background: #12050e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
}
body.dark-mode .hero-text{
    background: rgba(12, 12, 20, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
body.dark-mode .hero-text::after{
    content: none;
}
body.dark-mode .hero-eyebrow,
body.dark-mode .settings-eyebrow{
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
body.dark-mode .hero-eyebrow::before,
body.dark-mode .settings-eyebrow::before{
    display: none;
}
body.dark-mode .study-header h2{
    color: #fff;
    text-shadow: none;
}
body.dark-mode .study-header h2 i{
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: none;
}
body.dark-mode .study-header p{
    color: rgba(232, 234, 255, 0.78);
}
body.dark-mode .study-heading-copy::after{
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
body.dark-mode .hero-visual{
    background: radial-gradient(circle at 45% 40%, rgba(108, 68, 118, 0.34), rgba(15, 8, 18, 0.95) 82%);
    background-color: #1f141e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75);
}
body.dark-mode .metric-card{
    background: rgba(16, 16, 24, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f3f3f8;
    box-shadow: none;
}
body.dark-mode .metric-label{
    color: rgba(232, 234, 255, 0.65);
}

/* --- Flashcards tweaks (header + settings) --- */
/* Compact icon-only for Guida button inside the hero */
.hero-btn.icon-only { width: 40px; height: 40px; padding: 0; border-radius: 14px; justify-content: center; }
.hero-btn.icon-only span { display: none; }
.hero-btn.icon-only i { font-size: 1rem; }

/* Start button inside the study settings panel to launch "Tutte le carte" */
.study-actions-row { margin-top: 10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.study-start-btn { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px; border:none; cursor:pointer; color:#fff; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); box-shadow: 0 12px 28px rgba(128,36,51,.22); font-weight:600; }
.study-start-btn i { font-size: 1rem; }
.study-start-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(128,36,51,.3); }
.study-start-btn:focus-visible { outline:3px solid rgba(128,36,51,.35); outline-offset:3px; }
body.dark-mode .metric-value{ color:#fff; }
body.dark-mode .hero-btn.ghost{
    background: transparent;
    color:#fff;
    border-color: rgba(255,255,255,.24);
}
body.dark-mode .hero-btn:hover{
    background: rgba(255,255,255,0.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
body.dark-mode .hero-orbit::before{ background: radial-gradient(circle at 40% 35%, rgba(148,114,255,0.3), transparent 65%); opacity:0.5; }
body.dark-mode .hero-orbit::after{ background: radial-gradient(circle, rgba(3,4,22,0.75), transparent 80%); opacity:.6; }
body.dark-mode .hero-orbit-core{ background: radial-gradient(circle at 32% 22%, rgba(228,238,255,0.92) 12%, rgba(96,142,214,0.88) 40%, rgba(27,54,114,0.92) 70%, rgba(9,18,46,0.96) 100%); border-color: rgba(255,255,255,0.2); box-shadow: 0 34px 70px rgba(0,0,0,0.78), inset 0 8px 18px rgba(255,255,255,0.15), inset 0 -20px 28px rgba(4,12,32,0.75); }
body.dark-mode .hero-orbit-core::before{ background: conic-gradient(from 180deg at 50% 50%, rgba(154,192,255,0.35), rgba(78,118,186,0.45) 40%, rgba(10,18,46,0.55) 72%, rgba(154,192,255,0.35)); opacity:.65; filter: blur(16px); }
body.dark-mode .hero-orbit-core::after{ background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.4), transparent 70%); opacity:.45; }
body.dark-mode .orbit-value{ text-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 20px rgba(255,255,255,0.28), 0 16px 30px rgba(24,0,28,0.55); }
body.dark-mode .orbit-label{ color: rgba(214,220,255,0.78); text-shadow: 0 6px 14px rgba(0,0,0,0.55); }
body.dark-mode .hero-orbit-ring{ border-color: rgba(134,148,255,0.32); box-shadow: 0 30px 55px rgba(0,0,0,0.65); filter: drop-shadow(0 18px 32px rgba(0,0,0,0.55)); }
body.dark-mode #flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core{
    background:
        radial-gradient(circle at 34% 26%, rgba(226,236,255,0.9) 14%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 40% 72%, rgba(98,140,216,0.32), transparent 60%),
        radial-gradient(circle at 46% 44%, rgba(82,118,182,0.92) 30%, rgba(34,62,128,0.9) 68%, rgba(8,16,44,0.95) 100%);
    border-color: rgba(200, 214, 255, 0.35);
    box-shadow: 0 36px 80px rgba(0,0,0,0.68), inset 0 12px 28px rgba(255,255,255,0.25), inset 0 -20px 34px rgba(6,16,44,0.75);
}
body.dark-mode #flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core::before{
    background: conic-gradient(from 140deg, rgba(150,188,255,0.32), rgba(76,110,182,0.4) 48%, rgba(10,18,46,0.55) 76%, rgba(150,188,255,0.32));
    opacity: 0.75;
}
body.dark-mode #flashcards-screen .hero-orbit--flashcards-clean .hero-orbit-core::after{
    background:
        radial-gradient(circle at 52% 30%, rgba(255,255,255,0.72), transparent 70%),
        conic-gradient(from 120deg, rgba(200,214,255,0.16), transparent 42%, rgba(200,214,255,0.26) 62%, transparent 100%);
    opacity: 0.7;
}
body.dark-mode .hero-orbit .ring-two{ display: none; }
body.dark-mode .hero-orbit-band span{ border-color: rgba(186,196,255,0.85); border-left-color: rgba(124,164,255,0.4); border-right-color: rgba(206,216,255,0.68); box-shadow: 0 12px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12); }
body.dark-mode .orbit-metric-shell{ --orbit-opacity-front-base: 0.84; --orbit-opacity-back-base: 0.18; }
body.dark-mode .orbit-metric{ filter: drop-shadow(0 18px 32px rgba(0,0,0,0.68)); }
body.dark-mode .orbit-metric::after{ background: radial-gradient(circle, rgba(124,150,255,0.35), rgba(24,30,70,0)); }
body.dark-mode .orbit-metric__value{ background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(182,208,255,0.82)); text-shadow: 0 12px 28px rgba(0,0,0,0.68), 0 0 30px rgba(172,198,255,0.55); }
body.dark-mode .orbit-metric__label{ color: rgba(205,215,255,0.72); text-shadow: 0 6px 16px rgba(0,0,0,0.6); }
body.dark-mode .orbit-metric--active{ filter: drop-shadow(0 30px 48px rgba(0,0,0,0.78)); }
body.dark-mode .orbit-metric--active .orbit-metric__value{ background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(208,224,255,0.9)); text-shadow: 0 16px 36px rgba(0,0,0,0.7), 0 0 40px rgba(200,214,255,0.65); }
body.dark-mode .orbit-metric--active .orbit-metric__label{ color: rgba(226,233,255,0.9); }
body.dark-mode .hero-orbit-hint{ background: linear-gradient(135deg, rgba(36,38,64,0.15), rgba(30,32,52,0.18)); border-color: rgba(255,255,255,0.06); color: rgba(232,234,254,0.35); box-shadow: 0 18px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08); }
body.dark-mode .section-divider span{ background: #14161a; color: #fff; border-color: rgba(255,255,255,.1); box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
body.dark-mode .inline-link{ color: var(--primary-light); }
body.dark-mode .inline-link:hover{ color: #fff; }
body.dark-mode .user-cards-copy{
    color: #f1f1f1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

.deck-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: var(--light-gray);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.stat-item i {
    color: var(--primary-color);
}

/* Sessione di studio */
.study-session {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.session-header {
    background: var(--white);
    padding: 15px 30px;
    border-bottom: 1px solid var(--medium-gray);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 90;
    flex-shrink: 0;
}

.session-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.session-stats {
    display: flex;
    gap: 25px;
}

.session-stats .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 0;
    color: var(--text-color);
    font-weight: 600;
}

.session-progress {
    background: var(--light-gray);
    border-radius: 10px;
    padding: 15px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--medium-gray);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Flashcard Grande */
.flashcard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    /* Cambiato da center a flex-start */
    padding: 20px;
    /* Ridotto il padding */
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.flashcard-container-large {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    flex-shrink: 0;
    /* Parallasse container (non interferisce con flip/drag) */
    perspective: 1600px;
    transform-style: preserve-3d;
    --card-parallax-x: 0;
    --card-parallax-y: 0;
    transition: transform .35s cubic-bezier(.2,.6,.2,1);
    transform: rotateX(calc(var(--card-parallax-y, 0) * 1deg)) rotateY(calc(var(--card-parallax-x, 0) * 1deg));
}

.flashcard-immersive {
    width: 100%;
}

.flashcard {
    width: 100%;
    height: 450px;
    perspective: 1200px;
    cursor: pointer;
    flex-shrink: 0;
}

.flashcard-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block !important;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.flashcard-front {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    z-index: 2;
}

.flashcard-back {
    background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
    color: white;
    transform: rotateY(180deg);
    z-index: 1;
}

.flashcard-front {
    padding-bottom: clamp(36px, 4vw, 48px);
}

.flashcard-ai-trigger {
    margin: clamp(18px, 3vw, 28px) auto 0;
    width: clamp(52px, 6vw, 70px);
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.flashcard-ai-trigger img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.flashcard-ai-trigger:hover,
.flashcard-ai-trigger:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.6);
}

.flashcard-ai-trigger:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 3px;
}

.card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.card-number {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.card-type {
    font-size: 0.9rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.flashcard-front h3 {
    font-size: 2rem;
    line-height: 1.4;
    margin: auto 0;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.answer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.answer-scroll-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 15px;
    margin: 20px 0;
}

.answer-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.answer-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.answer-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.answer-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.flashcard-back p {
    font-size: 1.5rem;
    line-height: 1.7;
    text-align: left;
    margin: 0;
}

.card-hint {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Flashcard 3D refresh */
.flashcards-screen .flashcard-main {
    background: rgba(255,255,255,0.92);
    border-radius: 32px;
    padding: clamp(18px, 3vw, 32px);
    box-shadow: 0 30px 80px rgba(18,17,32,0.12);
}

.flashcards-screen .flashcard-container-large {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 30px;
    padding: clamp(10px, 2vw, 20px);
    border-radius: 32px;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7), rgba(255,255,255,0));
    position: relative;
}

.flashcard-info-btn {
    position: absolute;
    top: clamp(12px, 3vw, 18px);
    right: clamp(12px, 3vw, 18px);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(128, 36, 51, 0.25);
    background: rgba(128, 36, 51, 0.08);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transition: all 0.18s ease;
    z-index: 14005;
}

.flashcard-info-btn .info-dot {
    font-size: 0.95rem;
    line-height: 1;
}

.flashcard-info-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(128, 36, 51, 0.22);
}

.flashcard-info-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.flashcard-info-btn:focus {
    outline: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

body.dark-mode .flashcard-info-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

body.dark-mode .flashcard-info-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

body.streak-overlay-open .flashcard-info-btn {
    display: none !important;
}

/* Flashcard 3D  modern glass style */
.flashcards-screen .flashcard{ border-radius: 30px; transition: transform .45s ease, box-shadow .45s ease; }
.flashcards-screen .flashcard::before{ content:''; position:absolute; inset:-2px; border-radius:inherit; background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 30%); transform: translateX(-40%); opacity:0; pointer-events:none; transition: transform .8s ease, opacity .6s ease; }
.flashcards-screen .flashcard:hover{ transform: translateY(-6px); }
.flashcards-screen .flashcard:hover::before{ opacity:.8; transform: translateX(40%); }

/* High-specificity overrides to ensure new styling applies */
body .flashcards-screen .flashcard{ border-radius: 30px; transition: transform .45s ease, box-shadow .45s ease; }
body .flashcards-screen .flashcard::before{ content:''; position:absolute; inset:-2px; border-radius:inherit; background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 30%); transform: translateX(-40%); opacity:0; pointer-events:none; transition: transform .8s ease, opacity .6s ease; }
body .flashcards-screen .flashcard:hover{ transform: translateY(-6px); }
body .flashcards-screen .flashcard:hover::before{ opacity:.8; transform: translateX(40%); }
body .flashcards-screen .flashcard-front,
body .flashcards-screen .flashcard-back{
  --card-edge: rgba(255,255,255,.42);
  --card-halo: rgba(255,255,255,.28);
  border-radius: 30px;
  border: 1px solid var(--card-edge);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 20% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #8a1e35 0%, #541022 100%);
  box-shadow:
    0 46px 90px rgba(128,36,51,.28),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(40,8,16,.55);
}
body .flashcards-screen .flashcard-back{
  background:
    radial-gradient(120% 100% at 20% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #3a0d1e 0%, #6b1530 100%);
}
body .flashcards-screen .flashcard-front::before,
body .flashcards-screen .flashcard-back::before{ content:''; position:absolute; inset:-6px; border-radius:inherit; background: radial-gradient(circle at 14% 12%, var(--card-halo), transparent 55%); filter: blur(2px); pointer-events:none; }
body .flashcards-screen .flashcard-front::after,
body .flashcards-screen .flashcard-back::after{ content:''; position:absolute; inset:16px; border-radius:inherit; border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); opacity:.6; pointer-events:none; }
body .flashcards-screen .card-header{ border-bottom:1px solid rgba(255,255,255,.18); }
body .flashcards-screen .card-number{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:12px; font-weight:700; background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.32); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
body .flashcards-screen .card-type{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.22); color: rgba(255,245,247,.92); }
body .flashcards-screen .card-hint{ border-top:1px solid rgba(255,255,255,.18); }
body .flashcards-screen .question-content, body .flashcards-screen .answer-content{ flex:1; display:flex; flex-direction:column; justify-content:center; }
body .flashcards-screen .question-scroll-container, body .flashcards-screen .answer-scroll-container{ max-height: clamp(220px, 34vh, 340px); overflow:auto; padding-right: 14px; margin: 6px 0 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
body .flashcards-screen .question-scroll-container h3{ font-size: clamp(1.2rem, 1.8vw, 2.2rem); line-height: 1.5; font-weight:700; margin: 0 auto; text-align:center; color:#fff; text-shadow: 0 6px 18px rgba(0,0,0,.35); }
body .flashcards-screen .answer-scroll-container p{ font-size: clamp(1.05rem, 1.4vw, 1.7rem); line-height: 1.75; margin:0; color:#fff; text-align:left; text-shadow: 0 6px 18px rgba(0,0,0,.3); }
body .flashcards-screen .question-scroll-container::-webkit-scrollbar,
body .flashcards-screen .answer-scroll-container::-webkit-scrollbar{ width: 8px; }
body .flashcards-screen .question-scroll-container::-webkit-scrollbar-track,
body .flashcards-screen .answer-scroll-container::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 10px; }
body .flashcards-screen .question-scroll-container::-webkit-scrollbar-thumb,
body .flashcards-screen .answer-scroll-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius:10px; }
body .flashcards-screen .question-scroll-container::-webkit-scrollbar-thumb:hover,
body .flashcards-screen .answer-scroll-container::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.42); }

.flashcards-screen .flashcard-front,
.flashcards-screen .flashcard-back{
  --card-edge: rgba(255,255,255,.42);
  --card-halo: rgba(255,255,255,.28);
  border-radius: 30px;
  border: 1px solid var(--card-edge);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 20% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #8a1e35 0%, #541022 100%);
  box-shadow:
    0 46px 90px rgba(128,36,51,.28),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(40,8,16,.55);
}
.flashcards-screen .flashcard-back{
  background:
    radial-gradient(120% 100% at 20% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #3a0d1e 0%, #6b1530 100%);
}
.flashcards-screen .flashcard-front::before,
.flashcards-screen .flashcard-back::before{ content:''; position:absolute; inset:-6px; border-radius:inherit; background: radial-gradient(circle at 14% 12%, var(--card-halo), transparent 55%); filter: blur(2px); pointer-events:none; }
.flashcards-screen .flashcard-front::after,
.flashcards-screen .flashcard-back::after{ content:''; position:absolute; inset:16px; border-radius:inherit; border:1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); opacity:.6; pointer-events:none; }

.flashcards-screen .card-content{ position:relative; z-index:1; display:flex; flex-direction:column; height:100%; }
.flashcards-screen .card-header{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.18); }
.flashcards-screen .card-number{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:12px; font-weight:700; background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.32); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.flashcards-screen .card-type{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.22); color: rgba(255,245,247,.92); }
.flashcards-screen .card-hint{ border-top:1px solid rgba(255,255,255,.18); }

/* 4K-friendly type and scroll containers */
.flashcards-screen .question-content, .flashcards-screen .answer-content{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.flashcards-screen .question-scroll-container, .flashcards-screen .answer-scroll-container{ max-height: clamp(220px, 34vh, 340px); overflow:auto; padding-right: 14px; margin: 6px 0 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.flashcards-screen .question-scroll-container h3{ font-size: clamp(1.2rem, 1.8vw, 2.2rem); line-height: 1.5; font-weight:700; margin: 0 auto; text-align:center; color:#fff; text-shadow: 0 6px 18px rgba(0,0,0,.35); }
.flashcards-screen .answer-scroll-container p{ font-size: clamp(1.05rem, 1.4vw, 1.7rem); line-height: 1.75; margin:0; color:#fff; text-align:left; text-shadow: 0 6px 18px rgba(0,0,0,.3); }

/* Consistent custom scrollbars */
.flashcards-screen .question-scroll-container::-webkit-scrollbar,
.flashcards-screen .answer-scroll-container::-webkit-scrollbar{ width: 8px; }
.flashcards-screen .question-scroll-container::-webkit-scrollbar-track,
.flashcards-screen .answer-scroll-container::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 10px; }
.flashcards-screen .question-scroll-container::-webkit-scrollbar-thumb,
.flashcards-screen .answer-scroll-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius:10px; }
.flashcards-screen .question-scroll-container::-webkit-scrollbar-thumb:hover,
.flashcards-screen .answer-scroll-container::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.42); }

.flashcards-screen .rating-section {
    background: rgba(255,255,255,0.94);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(18,17,32,0.12);
    border: 1px solid rgba(128,36,51,0.08);
}

.flashcards-screen .rate-btn {
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(145deg, #ffffff, #f7f8fb);
    border: 1px solid rgba(128,36,51,0.08);
    box-shadow: 0 16px 32px rgba(18,17,32,0.1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.flashcards-screen .rate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 40px rgba(18,17,32,0.15);
}

.flashcards-screen .rate-btn .rate-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(128,36,51,0.12);
    color: var(--primary-dark);
}

.flashcards-screen .rate-btn.difficult .rate-icon { background: linear-gradient(135deg,#f5576c,#a81d32); color:#fff; }
.flashcards-screen .rate-btn.hard .rate-icon { background: linear-gradient(135deg,#fdc830,#f37335); color:#fff; }
.flashcards-screen .rate-btn.success .rate-icon { background: linear-gradient(135deg,#4facfe,#00f2fe); color:#fff; }
.flashcards-screen .rate-btn.easy .rate-icon { background: linear-gradient(135deg,#26d0ce,#1a2980); color:#fff; }
.flashcards-screen .rate-btn.danger .rate-icon { background: linear-gradient(135deg,#ef3b36,#8e0e00); color:#fff; }

.flashcards-screen .rating-section h4 {
    color: var(--secondary-color);
}

/* Sezione Valutazione */
.rating-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.rating-section h4 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 25px;
    font-size: 1.3rem;
    font-weight: 600;
}

.rating-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.rate-btn {
    background: var(--white);
    border: 2px solid var(--medium-gray);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.rate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.rate-btn.difficult {
    border-color: #e74c3c;
}

.rate-btn.difficult:hover {
    background: #ffeaea;
}

.rate-btn.hard {
    border-color: #e67e22;
}

.rate-btn.hard:hover {
    background: #fff3e0;
}

.rate-btn.good {
    border-color: #27ae60;
}

.rate-btn.good:hover {
    background: #e8f5e8;
}

.rate-btn.easy {
    border-color: #2ecc71;
}

.rate-btn.easy:hover {
    background: #e8f6f3;
}

/* Aggiunta: opzione "Non ripetere più" */
.rate-btn.danger {
    border-color: #c0392b;
    background: linear-gradient(135deg, #fff, #fff);
}

.rate-btn.danger:hover {
    background: #fdecea;
    border-color: #a93226;
}

.rate-btn.danger .rate-icon {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}

.rate-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rate-btn.difficult .rate-icon {
    background: #e74c3c;
    color: white;
}

.rate-btn.hard .rate-icon {
    background: #e67e22;
    color: white;
}

.rate-btn.good .rate-icon {
    background: #27ae60;
    color: white;
}

.rate-btn.easy .rate-icon {
    background: #2ecc71;
    color: white;
}

.rate-info {
    flex: 1;
}

.rate-title {
    display: block;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.rate-interval {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
}

.rate-badge {
    background: var(--light-gray);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.rating-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Navigazione */
.navigation-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.nav-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(128, 36, 51, 0.3);
}

/* Completamento sessione */
.session-complete {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
}

.completion-content {
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.completion-icon {
    font-size: 5rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.completion-content h2 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.completion-content p {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.session-summary {
    background: var(--white);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.summary-item i {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-gray);
    color: var(--primary-color);
}

.summary-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

.summary-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
}

.completion-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bottoni */
.primary-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.secondary-btn {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.secondary-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* ===================== TOOLTIP */
/* Stili per i tooltip */
.tooltip-container {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
    justify-content: center;
    margin-left: 8px;
    cursor: pointer;
    z-index: 40000;
    isolation: isolate;
}

.tooltip-icon {
    color: var(--dark-gray);
    font-size: 0.9em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: bold;
    line-height: 1;
    pointer-events: auto;
    font-family: 'Arial', sans-serif;
}

.tooltip-icon:hover {
    background-color: #f0f0f0;
}

.tooltip-text {
    visibility: hidden;
    width: 280px;
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 48%;
    transform: translateX(-60%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85em;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 41000;
}


.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 45%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #881f1f transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text,
.tooltip-container.active .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.mode-section .form-group {
    position: relative;
    overflow: visible;
}

body.glossary-panel-open .tooltip-container,
body.glossary-modal-open .tooltip-container,
body.glossary-pop-visible .tooltip-container,
body.menu-overlay-open .tooltip-container {
    pointer-events: none;
    opacity: 0;
    filter: blur(1px);
    transition: opacity .2s ease;
}

body.glossary-panel-open .tooltip-text,
body.glossary-panel-open .tooltip-icon,
body.glossary-modal-open .tooltip-text,
body.glossary-modal-open .tooltip-icon,
body.glossary-pop-visible .tooltip-text,
body.glossary-pop-visible .tooltip-icon,
body.menu-overlay-open .tooltip-text,
body.menu-overlay-open .tooltip-icon {
    visibility: hidden !important;
    opacity: 0 !important;
}

.quiz-glossary-tooltip {
    z-index: 1;
}

body.glossary-modal-open .quiz-glossary-tooltip .tooltip-text,
body.session-modal-open .quiz-glossary-tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Tooltip "frequent errors" sempre in primo piano */
#frequent-errors-tooltip,
#pc-frequent-errors-tooltip {
    position: relative;
    z-index: 25000;
    isolation: isolate;
}

#frequent-errors-tooltip .tooltip-text,
#pc-frequent-errors-tooltip .tooltip-text {
    z-index: 26000;
}

.frequent-errors-btn {
    overflow: visible;
}

/* Per dispositivi touch */
@media (max-width: 768px) {
    .tooltip-container {
        cursor: pointer;
    }

    .tooltip-text {
        width: 250px;
        font-size: 0.8em;
    }

    /* ===================== */
    /* STILI FLASHCARDS MIGLIORATI */
    /* ===================== */


    /* Scrollbar personalizzata per study-options */
    .study-options::-webkit-scrollbar {
        width: 10px;
    }

    .study-options::-webkit-scrollbar-track {
        background: var(--light-gray);
        border-radius: 8px;
    }

    .study-options::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 8px;
    }

    .study-options::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
    }

    /* Migliora la visualizzazione delle risposte */
    .answer-scroll-container {
        max-height: 320px;
        overflow-y: auto;
        padding: 20px;
        margin: 20px 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
    }

    .answer-scroll-container p {
        color: white !important;
        font-size: 1.5rem;
        line-height: 1.7;
        margin: 0;
        text-align: left;
        font-weight: 400;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Scrollbar per le risposte */
    .answer-scroll-container::-webkit-scrollbar {
        width: 6px;
    }

    .answer-scroll-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .answer-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

    .answer-scroll-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    /* Ingrandisci le card delle flashcard */
    .flashcard-container-large {
        width: 100%;
        max-width: 950px;
        margin: 0 auto 50px;
    }

    .flashcard {
        width: 100%;
        height: 520px;
        perspective: 1300px;
    }

    .flashcard-front h3 {
        font-size: 2.2rem;
        line-height: 1.4;
        margin: auto 0;
        font-weight: 600;
        text-align: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* Bottoni di gestione */
    .management-buttons {
        display: flex;
        gap: 10px;
        margin-left: 15px;
    }

    .management-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .management-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    /* Pannello statistiche */
    .stats-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
    }

    .stats-panel {
        background: var(--white);
        border-radius: 20px;
        padding: 30px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .stats-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid var(--light-gray);
    }

    .stats-header h3 {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.4rem;
    }

    .close-stats {
        background: none;
        border: none;
        color: var(--text-light);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 5px;
        border-radius: 3px;
        transition: var(--transition);
    }

    .close-stats:hover {
        color: var(--primary-color);
        background: var(--light-gray);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 25px;
    }

    .stat-card {
        background: var(--light-gray);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        border-left: 4px solid var(--primary-color);
    }

    .stat-card .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        display: block;
        margin-bottom: 5px;
    }

    .stat-card .stat-label {
        font-size: 0.9rem;
        color: var(--text-light);
        font-weight: 500;
    }

    .stats-details {
        background: var(--light-gray);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .stat-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--medium-gray);
    }

    .stat-detail:last-child {
        border-bottom: none;
    }

    .detail-label {
        color: var(--text-color);
        font-weight: 500;
    }

    .detail-value {
        color: var(--primary-color);
        font-weight: 600;
    }

    .stats-actions {
        display: flex;
        justify-content: center;
    }

    /* Migliora i bottoni di valutazione */
    .rating-buttons-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 30px 0;
    }

    .rate-btn {
        background: rgba(255, 255, 255, 0.98);
        border: 2px solid;
        border-radius: 16px;
        padding: 25px 20px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: left;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .rate-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    }

    .rate-info {
        flex: 1;
    }

    .rate-title {
        color: var(--dark-gray) !important;
        font-weight: 700;
        font-size: 1.2rem;
        margin-bottom: 8px;
        display: block;
    }

    .rate-interval {
        color: var(--text-color) !important;
        font-size: 1rem;
        font-weight: 600;
        display: block;
    }

    /* Colori specifici per ogni bottone di valutazione */
    .rate-btn.difficult {
        border-color: #e74c3c;
        background: linear-gradient(135deg, #fff, #ffeaea);
    }

    .rate-btn.difficult:hover {
        background: linear-gradient(135deg, #ffeaea, #ffd4d4);
    }

    .rate-btn.hard {
        border-color: #e67e22;
        background: linear-gradient(135deg, #fff, #fff3e0);
    }

    .rate-btn.hard:hover {
        background: linear-gradient(135deg, #fff3e0, #ffe8cc);
    }

    .rate-btn.good {
        border-color: #27ae60;
        background: linear-gradient(135deg, #fff, #e8f5e8);
    }

    .rate-btn.good:hover {
        background: linear-gradient(135deg, #e8f5e8, #d4f0d4);
    }

    .rate-btn.easy {
        border-color: #2ecc71;
        background: linear-gradient(135deg, #fff, #e8f6f3);
    }

    .rate-btn.easy:hover {
        background: linear-gradient(135deg, #e8f6f3, #d4f0e8);
    }

    /* Responsive improvements */
    @media (max-width: 768px) {
        .study-options {
            padding: 20px 15px;
            max-height: 65vh;
        }

        .flashcard {
            height: 450px;
        }

        .flashcard-front h3 {
            font-size: 1.8rem;
        }

        .answer-scroll-container p {
            font-size: 1.3rem;
        }

        .rating-buttons-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .management-buttons {
            margin-left: 10px;
        }

        .management-btn {
            width: 35px;
            height: 35px;
        }
    }

    @media (max-width: 480px) {
        .flashcard {
            height: 400px;
            padding: 15px;
        }

        .flashcard-front h3 {
            font-size: 1.5rem;
        }

        .answer-scroll-container {
            max-height: 250px;
            padding: 15px;
        }

        .answer-scroll-container p {
            font-size: 1.2rem;
        }
    }

    /* ===================== */
    /* CORREZIONI VISUALIZZAZIONE FLASHCARDS */
    /* ===================== */

    /* Assicurati che la flashcard sia visibile */
    .flashcard-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-height: 500px;
    }

    /* Migliora la visibilità del contenuto */
    .flashcard-front h3,
    .flashcard-back p {
        color: white !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* Sistema l'header della sessione */
    .session-header {
        background: var(--white);
        padding: 15px 30px;
        border-bottom: 1px solid var(--medium-gray);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .session-stats {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .session-stats .stat {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--light-gray);
        border-radius: 8px;
        font-weight: 600;
        color: var(--text-color);
    }

    /* Migliora la progress bar */
    .session-progress {
        margin-top: 10px;
    }

    .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* Assicurati che la flashcard sia cliccabile */
    .flashcard {
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .flashcard:hover {
        transform: scale(1.02);
    }

    /* Sistema i bottoni di navigazione */
    .navigation-section {
        margin-top: 20px;
    }

    .nav-btn {
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
    }

    /* Sistema la visualizzazione su mobile */
    @media (max-width: 768px) {
        .flashcard-main {
            padding: 15px;
        }

        .session-stats {
            flex-direction: column;
            gap: 10px;
        }

        .session-stats .stat {
            justify-content: center;
        }
    }

    /* ===================== */
    /* MIGLIORAMENTI FLASHCARDS */
    /* ===================== */

    /* Container flashcard più grande e responsive */
    .flashcard-container-large {
        width: 100%;
        max-width: 1200px;
        margin: 20px auto 40px;
        min-height: 500px;
        display: block !important;
    }

    .flashcard {
        width: 100%;
        height: 65vh;
        min-height: 500px;
        max-height: 700px;
        perspective: 1400px;
        cursor: pointer;
        display: block !important;
        margin: 0 auto;
    }

    .flashcard-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
    }

    .flashcard-front,
    .flashcard-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 50px;
        text-align: center;
    }

    .flashcard-front {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        z-index: 2;
    }

    .flashcard-back {
        background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
        color: white;
        transform: rotateY(180deg);
        z-index: 1;
    }

    /* Migliora il contenuto delle card */
    .card-content {
        width: 100%;
        height: 100%;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    }

    .card-number {
        background: rgba(255, 255, 255, 0.25);
        padding: 8px 16px;
        border-radius: 16px;
        font-size: 1rem;
        font-weight: 600;
        backdrop-filter: blur(10px);
    }

    .card-type {
        font-size: 1rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 500;
    }

    /* Contenitori scrollabili migliorati */
    .question-content,
    .answer-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .question-scroll-container,
    .answer-scroll-container {
        max-height: 350px;
        overflow-y: auto;
        padding: 25px;
        margin: 20px 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        border: 2px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(15px);
    }

    .question-scroll-container h3,
    .answer-scroll-container p {
        color: white !important;
        text-align: center;
        margin: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        line-height: 1.6;
    }

    .question-scroll-container h3 {
        font-size: 2.4rem !important;
        font-weight: 600;
        line-height: 1.4;
    }

    .answer-scroll-container p {
        font-size: 1.8rem !important;
        line-height: 1.7;
        text-align: left;
    }

    /* Scrollbar personalizzata */
    .question-scroll-container::-webkit-scrollbar,
    .answer-scroll-container::-webkit-scrollbar {
        width: 8px;
    }

    .question-scroll-container::-webkit-scrollbar-track,
    .answer-scroll-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .question-scroll-container::-webkit-scrollbar-thumb,
    .answer-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 4px;
    }

    .question-scroll-container::-webkit-scrollbar-thumb:hover,
    .answer-scroll-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    /* Hint migliorato */
    .card-hint {
        margin-top: auto;
        padding-top: 25px;
        border-top: 2px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 1rem;
        opacity: 0.8;
        font-weight: 500;
    }

    /* Sezione valutazione migliorata */
    .rating-section {
        width: 100%;
        max-width: 10px;
        margin: 30px auto 0;
        padding: 35px;
        background: var(--white);
        border-radius: 24px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        border: 2px solid var(--primary-color);
    }

    .rating-section h4 {
        text-align: center;
        color: var(--primary-color);
        margin-bottom: 30px;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .rating-buttons-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .rate-btn {
        background: var(--white);
        border: 3px solid;
        border-radius: 20px;
        padding: 25px 20px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 18px;
        text-align: left;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .rate-btn:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .rate-btn:active {
        transform: translateY(-2px) scale(1);
    }

    .rate-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .rate-info {
        flex: 1;
    }

    .rate-title {
        display: block;
        font-weight: 700;
        color: var(--dark-gray);
        margin-bottom: 6px;
        font-size: 1.3rem;
    }

    .rate-interval {
        display: block;
        font-size: 1rem;
        color: var(--text-color);
        font-weight: 600;
    }

    .rate-badge {
        background: var(--light-gray);
        padding: 8px 16px;
        border-radius: 16px;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-color);
        transition: all 0.3s ease;
    }

    /* Colori specifici per ogni bottone */
    .rate-btn.difficult {
        border-color: #e74c3c;
        background: linear-gradient(135deg, #fff, #ffeaea);
    }

    .rate-btn.difficult:hover {
        background: linear-gradient(135deg, #ffeaea, #ffd4d4);
        border-color: #c0392b;
    }

    .rate-btn.difficult .rate-icon {
        background: #e74c3c;
        color: white;
    }

    .rate-btn.hard {
        border-color: #e67e22;
        background: linear-gradient(135deg, #fff, #fff3e0);
    }

    .rate-btn.hard:hover {
        background: linear-gradient(135deg, #fff3e0, #ffe8cc);
        border-color: #d35400;
    }

    .rate-btn.hard .rate-icon {
        background: #e67e22;
        color: white;
    }

    .rate-btn.good {
        border-color: #27ae60;
        background: linear-gradient(135deg, #fff, #e8f5e8);
    }

    .rate-btn.good:hover {
        background: linear-gradient(135deg, #e8f5e8, #d4f0d4);
        border-color: #229954;
    }

    .rate-btn.good .rate-icon {
        background: #27ae60;
        color: white;
    }

    .rate-btn.easy {
        border-color: #2ecc71;
        background: linear-gradient(135deg, #fff, #e8f6f3);
    }

    .rate-btn.easy:hover {
        background: linear-gradient(135deg, #e8f6f3, #d4f0e8);
        border-color: #27ae60;
    }

    .rate-btn.easy .rate-icon {
        background: #2ecc71;
        color: white;
    }

    /* Footer valutazione */
    .rating-footer {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        padding-top: 25px;
        border-top: 2px solid var(--light-gray);
    }

    .rating-footer .secondary-btn {
        background: #fff;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
        border-radius: 20px;
        padding: 16px 28px;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 6px 0 rgba(92, 26, 38, 0.08);
    }

    .rating-footer .secondary-btn:hover {
        background: var(--primary-color);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 18px rgba(128, 36, 51, 0.25);
    }

    /* Animazioni migliorate */
    .flashcard {
        animation: cardAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes cardAppear {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(20px);
        }

        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .flashcard.flipped .flashcard-inner {
        transform: rotateY(180deg);
    }

    /* Responsive design per flashcards */
    @media (max-width: 1200px) {
        .flashcard-container-large {
            max-width: 95%;
        }

        .flashcard {
            height: 60vh;
            min-height: 450px;
        }

        .question-scroll-container h3 {
            font-size: 2rem !important;
        }

        .answer-scroll-container p {
            font-size: 1.6rem !important;
        }
    }

    @media (max-width: 768px) {
        .flashcard {
            height: 55vh;
            min-height: 400px;
            max-height: 500px;
        }

        .flashcard-front,
        .flashcard-back {
            padding: 30px;
        }

        .question-scroll-container,
        .answer-scroll-container {
            max-height: 250px;
            padding: 20px;
        }

        .question-scroll-container h3 {
            font-size: 1.6rem !important;
        }

        .answer-scroll-container p {
            font-size: 1.3rem !important;
        }

        .rating-buttons-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .rating-section {
            padding: 25px 20px;
            margin: 20px auto 0;
        }

        .rate-btn {
            padding: 20px 15px;
        }

        .rate-icon {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
    }

    @media (max-width: 480px) {
        .flashcard {
            height: 50vh;
            min-height: 350px;
        }

        .flashcard-front,
        .flashcard-back {
            padding: 20px;
        }

        .card-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
        }

        .question-scroll-container,
        .answer-scroll-container {
            max-height: 200px;
            padding: 15px;
        }

        .question-scroll-container h3 {
            font-size: 1.4rem !important;
        }

        .answer-scroll-container p {
            font-size: 1.1rem !important;
        }

        .rating-footer {
            flex-direction: column;
            gap: 10px;
        }

        .rating-footer .secondary-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* Miglioramenti accessibilità */
    .flashcard:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 4px;
    }

    .rate-btn:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* Transizioni smooth per tutti gli elementi interattivi */
    .flashcard,
    .rate-btn,
    .secondary-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Effetto di profondità per le card */
    .flashcard-front,
    .flashcard-back {
        transform-style: preserve-3d;
    }

    .flashcard-front::before,
    .flashcard-back::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
        border-radius: 24px;
        pointer-events: none;
    }

    /* ===================== */
    /* BOTTONI INTERVALLO FLASHCARDS */
    /* ===================== */

    .answer-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .btn-interval {
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0.8rem 1.4rem;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.25s, transform 0.15s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-interval:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
    }

    .btn-interval:active {
        transform: translateY(0);
    }

    .btn-interval:focus {
        outline: 2px solid var(--primary-dark);
        outline-offset: 2px;
    }

    /* ===================== */
    /* MIGLIORAMENTI FLASHCARDS */
    /* ===================== */

    /* Container principale migliorato */
    .flashcards-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--light-gray) 0%, #e9ecef 100%);
        z-index: 9999;
        display: none;
        overflow-y: auto;
    }

    .flashcards-container {
        min-height: 100vh;
        background: var(--white);
        display: flex;
        flex-direction: column;
    }

    /* Header migliorato */
    .flashcards-header {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: #fff;
        padding: 10px 20px;
        min-height: 56px;
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 6px 18px rgba(5, 5, 5, 0.35);
    }

    .header-title {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    .header-title h3 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
    }

    .header-stats {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .stat-badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 8px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        backdrop-filter: blur(10px);
    }

    .management-buttons {
        display: flex;
        gap: 8px;
    }

    .management-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .management-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    /* Modalità di studio migliorate */
    .study-options {
        max-width: 1000px;
        width: 100%;
    }

    .study-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .study-header h2 {
        color: var(--primary-color);
        font-size: 2.2rem;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .study-header p {
        color: var(--text-light);
        font-size: 1.1rem;
    }

    .study-actions {
        margin-bottom: 25px;
    }

    .study-settings-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .study-quantity-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .study-settings-control {
        width: 100%;
        max-width: none;
    }

    .reset-deck-btn {
        width: 100%;
        justify-content: center;
    }

    .study-option-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .study-option-card {
        background: var(--card-bg, var(--white));
        border-radius: 16px;
        padding: 25px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(128, 36, 51, 0.15);
        box-shadow: var(--box-shadow);
        display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    transform-origin: center;
}

    .study-option-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, var(--primary-light), var(--primary-dark));
        transition: width 0.3s ease;
    }

    .study-option-card:hover {
        transform: scale(1.01);
        box-shadow: 0 18px 38px rgba(128, 36, 51, 0.18);
        border-color: rgba(128, 36, 51, 0.25);
    }

    .study-option-card:hover::before {
        width: 9px;
    }

    .card-icon {
        position: relative;
        width: 70px;
        height: 70px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: white;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        box-shadow: 0 12px 24px rgba(128, 36, 51, 0.25);
    }

    .card-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--primary-dark);
        color: white;
        border-radius: 12px;
        padding: 4px 8px;
        font-size: 0.8rem;
        font-weight: 600;
        min-width: 24px;
        text-align: center;
        border: 2px solid white;
    }

    .card-content {
        flex: 1;
    }

    .card-content h4 {
        color: var(--secondary-color);
        font-size: 1.3rem;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .card-content p {
        color: var(--text-light);
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .card-progress {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .card-progress .progress-bar {
        flex: 1;
        height: 6px;
        background: rgba(128, 36, 51, 0.12);
        border-radius: 3px;
        overflow: hidden;
    }

    .card-progress .progress-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    }

    .card-stats {
        display: flex;
        gap: 15px;
    }

    .stat {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        color: var(--secondary-color);
    }

    .card-arrow {
        color: rgba(128, 36, 51, 0.55);
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .study-option-card:hover .card-arrow {
        transform: translateX(5px);
        color: var(--primary-dark);
    }

    /* Sessione di studio migliorata */
    .study-session {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .session-header {
        background: var(--white);
        padding: 15px 30px;
        border-bottom: 1px solid var(--medium-gray);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: sticky;
        top: 0;
        z-index: 90;
    }

    .session-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .session-stats {
        display: flex;
        gap: 25px;
    }

    .session-stats .stat {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        padding: 0;
        color: var(--text-color);
        font-weight: 600;
    }

    .session-progress {
        background: var(--light-gray);
        border-radius: 10px;
        padding: 15px;
    }

    .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-color);
    }

    /* Flashcard migliorata */
    .flashcard-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: #ffffff;
        /* BIANCO */
    }

    .flashcard-container-large {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 30px;
    }

    .flashcard {
        width: 100%;
        height: 400px;
        perspective: 1200px;
        cursor: pointer;
    }

    .flashcard-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .flashcard.flipped .flashcard-inner {
        transform: rotateY(180deg);
    }

    .flashcard-front,
    .flashcard-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }

    .flashcard-front {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
    }

    .flashcard-back {
        background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
        color: white;
        transform: rotateY(180deg);
    }

    .card-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .card-number {
        background: rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .card-type {
        font-size: 0.9rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .question-content,
    .answer-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .question-scroll-container,
    .answer-scroll-container {
        max-height: 200px;
        overflow-y: auto;
        padding: 20px;
        margin: 20px 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
    }

    .flashcard-front h3 {
        font-size: 1.8rem;
        line-height: 1.4;
        margin: 0;
        font-weight: 600;
        text-align: center;
    }

    .flashcard-back p {
        font-size: 1.4rem;
        line-height: 1.6;
        margin: 0;
        text-align: left;
    }

    .card-hint {
        margin-top: auto;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 0.9rem;
        opacity: 0.7;
    }

    /* Valutazione migliorata */
    .rating-section {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        background: var(--white);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .rating-section h4 {
        text-align: center;
        color: var(--secondary-color);
        margin-bottom: 25px;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .rating-buttons-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 25px;
    }

    .rate-btn {
        background: var(--white);
        border: 2px solid var(--medium-gray);
        border-radius: 16px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: left;
    }

    .rate-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    /* Completamento sessione migliorato */
    .session-complete {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }

    .completion-content {
        text-align: center;
        max-width: 500px;
        width: 100%;
    }

    .completion-icon {
        font-size: 5rem;
        color: var(--primary-color);
        margin-bottom: 25px;
    }

    .completion-content h2 {
        color: var(--primary-color);
        font-size: 2.2rem;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .completion-content p {
        color: var(--text-light);
        font-size: 1.2rem;
        margin-bottom: 30px;
    }

    .session-summary {
        background: var(--white);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .summary-item {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    .summary-item i {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--light-gray);
        color: var(--primary-color);
    }

    .summary-value {
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
    }

    .summary-label {
        display: block;
        font-size: 0.9rem;
        color: var(--text-light);
    }

    .completion-actions {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .flashcards-header {
            padding: 10px 16px;
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        .header-stats {
            justify-content: center;
        }

        .flashcard-main {
            padding: 15px;
        }

        .flashcard {
            height: 350px;
        }

        .rating-buttons-grid {
            grid-template-columns: 1fr;
        }

        .summary-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .completion-actions {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .flashcards-header {
            padding: 10px 12px;
        }

        .flashcard-main {
            padding: 10px;
        }

        .flashcard {
            height: 300px;
        }

        .flashcard-front,
        .flashcard-back {
            padding: 20px;
        }

        .flashcard-front h3 {
            font-size: 1.4rem;
        }

        .flashcard-back p {
            font-size: 1.1rem;
        }
    }

    /* ===================== */
    /* MIGLIORAMENTI DRAG GESTURE FLASHCARDS */
    /* ===================== */

    .flashcard {
        cursor: grab;
        user-select: none;
        touch-action: none;
        will-change: transform, box-shadow;
        transition: transform 0.35s cubic-bezier(0.17, 0.55, 0.28, 0.99), box-shadow 0.35s ease;
        transform-origin: center;
        position: relative;
        --drag-glow: 0;
        transform-style: preserve-3d;
    }

    .flashcard:active {
        cursor: grabbing;
    }

    .flashcard.dragging {
        transition: none !important;
        box-shadow: 0 32px 70px rgba(0, 0, 0, 0.28);
    }

    .flashcard::after {
        content: '';
        position: absolute;
        inset: -4%;
        border-radius: inherit;
        background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        filter: blur(0px);
    }

    .flashcard.dragging::after {
        opacity: calc(0.35 + 0.35 * var(--drag-glow));
        transform: scale(calc(1 + 0.05 * var(--drag-glow)));
    }

    .drag-hint {
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        margin-top: 15px;
        font-style: italic;
        animation: pulseHint 2s infinite;
    }

    @keyframes pulseHint {

        0%,
        100% {
            opacity: 0.7;
        }

        50% {
            opacity: 1;
        }
    }


    /* Miglioramenti bottoni intervallo */
    .rating-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    @media (max-width: 768px) {
        .rating-buttons-grid {
            grid-template-columns: 1fr;
        }
    }

    .rate-btn {
        min-height: 80px;
    }

    /* Indicatore sessione */
    .session-indicator {
        background: var(--primary-color);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        margin-left: 15px;
    }

    /* Statistiche migliorate */
    .session-stats .stat {
        background: rgba(255, 255, 255, 0.1);
        padding: 8px 12px;
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }
}

/* Effetto dragging sulla flashcard */
.flashcard.dragging {
    cursor: grabbing !important;
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.28);
    transition: none !important;
}

/* Cursore grab sulla flashcard */
.flashcard {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.flashcard:active {
    cursor: grabbing;
}

/* Hint trascinamento animato */
.card-hint {
    animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Miglioramenti bottoni intervallo */
.rating-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.rate-btn {
    min-height: 90px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rate-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Colori distintivi per gli intervalli */
.rate-btn.difficult {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #fff, #ffebee);
}

.rate-btn.difficult:hover {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    border-color: #c62828;
}

.rate-btn.difficult .rate-icon {
    background: linear-gradient(135deg, #e74c3c, #c62828);
    color: white;
}

.rate-btn.hard {
    border-color: #ff9800;
    background: linear-gradient(135deg, #fff, #fff3e0);
}

.rate-btn.hard:hover {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-color: #f57c00;
}

.rate-btn.hard .rate-icon {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}

.rate-btn.good {
    border-color: #2196f3;
    background: linear-gradient(135deg, #fff, #e3f2fd);
}

.rate-btn.good:hover {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-color: #1976d2;
}

.rate-btn.good .rate-icon {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
}

.rate-btn.easy {
    border-color: #4caf50;
    background: linear-gradient(135deg, #fff, #e8f5e9);
}

.rate-btn.easy:hover {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-color: #388e3c;
}

.rate-btn.easy .rate-icon {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: white;
}

/* Badge contatori modalità */
.card-badge {
    animation: badgeBounce 0.5s ease-out;
}

@keyframes badgeBounce {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Transizioni smooth per modalità */
.study-option-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.study-option-card::before {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Indicatore carte in scadenza */
.study-option-card.due-cards .card-badge {
    animation: pulseBadge 1.5s ease-in-out infinite;
}

@keyframes pulseBadge {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(128, 36, 51, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(128, 36, 51, 0);
    }
}

/* Indicatore carte difficili */
.study-option-card.difficult-cards .card-icon {
    animation: flickerFire 2s ease-in-out infinite;
}

@keyframes flickerFire {

    0%,
    100% {
        filter: brightness(1);
    }

    25%,
    75% {
        filter: brightness(1.2);
    }

    50% {
        filter: brightness(0.9);
    }
}

/* Progress bar animata */
.progress-fill {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg,
            var(--primary-color),
            var(--primary-light),
            var(--primary-color));
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite;
}

@keyframes progressShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Statistiche footer animate */
.stat-item {
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Miglioramenti accessibilità */
.flashcard:focus,
.rate-btn:focus,
.study-option-card:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* Smooth transitions globali */
* {
    -webkit-tap-highlight-color: transparent;
}

.flashcard,
.rate-btn,
.study-option-card,
.management-btn,
.secondary-btn,
.primary-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state per flashcard */
.flashcard.loading {
    opacity: 0.6;
    pointer-events: none;
}

.flashcard.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Miglioramenti scrollbar */
.question-scroll-container::-webkit-scrollbar,
.answer-scroll-container::-webkit-scrollbar {
    width: 10px;
}

.question-scroll-container::-webkit-scrollbar-track,
.answer-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.question-scroll-container::-webkit-scrollbar-thumb,
.answer-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    transition: background 0.3s;
}

.question-scroll-container::-webkit-scrollbar-thumb:hover,
.answer-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Effetto completamento sessione */
.session-complete .completion-icon {
    animation: trophyBounce 0.6s ease-out;
}

@keyframes trophyBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.completion-content h2 {
    animation: fadeInDown 0.5s ease-out 0.2s both;
}

.session-summary {
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

.completion-actions {
    animation: fadeInUp 0.5s ease-out 0.6s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Notifiche toast */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--white);
    color: var(--text-color);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10001;
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.notification.show {
    opacity: 1;
}

.notification i {
    font-size: 1.2rem;
}

.notification.info {
    border-left: 4px solid var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
}

.notification.info i {
    color: var(--white);
}

.notification.success {
    border-left: 4px solid var(--success-color);
}

.notification.success i {
    color: var(--success-color);
}

.notification.warning {
    border-left: 4px solid var(--warning-color);
}

.notification.warning i {
    color: var(--warning-color);
}

.notification.error {
    border-left: 4px solid var(--danger-color);
}

.notification.error i {
    color: var(--danger-color);
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Dark mode support (opzionale) */
@media (prefers-color-scheme: dark) {
    .flashcards-container {
        background: var(--white);
    }

    .study-option-card,
    .rating-section {
        background: var(--white);
        border-color: rgba(128, 36, 51, 0.12);
        box-shadow: var(--box-shadow);
    }

    .study-option-card h4,
    .rating-section h4 {
        color: var(--secondary-color);
    }

    .study-option-card p {
        color: var(--text-light);
    }
}

/* ===================== */
/* MODALE STATISTICHE PROFESSIONALE */
/* ===================== */

.stats-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Soft blur for focus */
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
/* Non bloccare lo scroll quando si apre la schermata flashcards.
   Il blocco dello scroll verrà gestito dalle singole modali (glossario, guida, ecc.). */
body.flashcards-open {
    overflow: auto;
}

.stats-modal-overlay.closing {
    animation: fadeOut 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.stats-modal-container {
    position: relative;
    background: radial-gradient(160% 200% at 20% -10%, #ffffff, #fafafa);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.12);
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header Modale */
.stats-modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.stats-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stats-header-content i {
    font-size: 1.8rem;
}

.stats-header-content h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.close-stats-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.close-stats-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Body Modale */
.stats-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
    /* Keep layout stable when scrollbar appears */
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.stats-details-hero {
    background: rgba(128, 36, 51, 0.08);
    border-radius: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(128, 36, 51, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-highlight-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stats-highlight-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.4rem;
    box-shadow: 0 12px 30px rgba(128, 36, 51, 0.35);
}

.stats-highlight-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(44, 62, 80, 0.7);
    margin: 0;
}

.stats-highlight-value {
    margin: 4px 0 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.stats-highlight-description {
    margin: 0;
    color: rgba(44, 62, 80, 0.85);
    font-size: 0.95rem;
}

.stats-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 28px 0;
}

.stats-panel-card {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid rgba(128, 36, 51, 0.08);
    box-shadow: var(--box-shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.stats-panel-card.compact {
    gap: 14px;
    padding: 20px;
}

.stats-panel-card.insights {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(128, 36, 51, 0.08));
}

.stats-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stats-panel-header h4,
.stats-panel-header h5 {
    margin: 0;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-panel-header span {
    font-size: 0.85rem;
    color: rgba(44, 62, 80, 0.7);
}

.stats-progress-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stats-progress-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--primary-dark);
}

.stats-progress-row span {
    font-weight: 500;
    color: rgba(44, 62, 80, 0.75);
}

.stats-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(128, 36, 51, 0.12);
    overflow: hidden;
}

.stats-progress-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.stats-progress-fill.is-new {
    background: linear-gradient(120deg, #6dd5fa, #2979ff);
}

.stats-progress-fill.is-due {
    background: linear-gradient(120deg, #f9d423, #ff4e50);
}

.stats-progress-fill.is-difficult {
    background: linear-gradient(120deg, #c471ed, #f64f59);
}

.stats-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stats-pill-grid.tight {
    gap: 12px;
}

.stats-pill {
    background: rgba(128, 36, 51, 0.06);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(128, 36, 51, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.stats-pill.accent {
    background: rgba(128, 36, 51, 0.1);
    border-color: rgba(128, 36, 51, 0.2);
}

.stats-pill.subdued {
    background: rgba(248, 248, 248, 0.9);
}

.stats-pill span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(44, 62, 80, 0.65);
    line-height: 1.25;
    white-space: normal;
    word-break: keep-all;
}

.stats-pill strong {
    font-size: 1.3rem;
    color: var(--primary-dark);
}

.stats-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 1px dashed rgba(128, 36, 51, 0.4);
    color: rgba(44, 62, 80, 0.85);
    font-size: 0.9rem;
}

.stats-panel-note i {
    color: var(--warning-color);
    margin-top: 3px;
}

.stats-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 20px;
}

.stats-insight-intro {
    margin: 0;
    color: rgba(44, 62, 80, 0.85);
    font-size: 0.95rem;
}

.stats-insight-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: rgba(44, 62, 80, 0.9);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-insight-list li {
    line-height: 1.4;
}

.stats-modal-body::-webkit-scrollbar {
    width: 10px;
}

.stats-modal-body::-webkit-scrollbar-track {
    background: #f0f2f5;
}

.stats-modal-body::-webkit-scrollbar-thumb {
    background: #b0b6bf;
    border-radius: 8px;
}

/* Grid Statistiche Principali */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stats-card {
    background: var(--white);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid;
    transition: all 0.3s ease;
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: var(--box-shadow);
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(128, 36, 51, 0.16);
}

.stats-card.primary {
    border-left-color: var(--primary-color);
}

.stats-card.success {
    border-left-color: var(--success-color);
}

.stats-card.info {
    border-left-color: #2196f3;
}

.stats-card.warning {
    border-left-color: var(--warning-color);
}

.stats-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.stats-card.primary .stats-card-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.stats-card.success .stats-card-icon {
    background: linear-gradient(135deg, var(--success-color), #1e8449);
}

.stats-card.info .stats-card-icon {
    background: linear-gradient(135deg, #4ea4f8, #1f6fea);
}

.stats-card.warning .stats-card-icon {
    background: linear-gradient(135deg, var(--warning-color), #d68910);
}

.stats-card-content {
    flex: 1;
}

.stats-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1;
    margin-bottom: 5px;
}

.stats-card-label {
    font-size: 0.9rem;
    color: rgba(44, 62, 80, 0.6);
    font-weight: 500;
}

/* Sezione Dettagli */
.stats-details-section {
    background: var(--white);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: var(--box-shadow);
}

.stats-details-section h4 {
    color: var(--primary-color);
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-details-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stats-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(128, 36, 51, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(128, 36, 51, 0.08);
    transition: all 0.3s ease;
}

.stats-detail-item:hover {
    transform: translateX(5px);
    box-shadow: 0 12px 26px rgba(128, 36, 51, 0.15);
    background: var(--white);
    border-color: transparent;
}

.stats-detail-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    font-weight: 500;
}

.stats-detail-label i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.stats-detail-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Footer Modale */
.stats-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--light-gray);
    background: linear-gradient(180deg, #ffffff, #fafafa);
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.stats-export-btn,
.stats-close-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-export-btn {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.stats-export-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.stats-close-btn {
    background: var(--primary-color);
    color: white;
}

.stats-close-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .stats-modal-container {
        max-width: 95%;
        max-height: 90vh;
    }

    .stats-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stats-modal-header {
        padding: 20px;
    }

    .stats-modal-body {
        padding: 20px;
    }

    .stats-modal-footer {
        flex-direction: column;
        padding: 15px 20px;
    }

    .stats-export-btn,
    .stats-close-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================== */
/* MIGLIORAMENTI BOTTONI RATING */
/* ===================== */

.rate-btn.success {
    border-color: var(--success-color);
    background: linear-gradient(135deg, #fff, #e8f5e9);
}

.rate-btn.success:hover {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-color: #388e3c;
}

.rate-btn.success .rate-icon {
    background: linear-gradient(135deg, var(--success-color), #388e3c);
    color: white;
}

/* Pulsante Rivedi Flashcard */
.review-again-btn {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    font-weight: 600;
}

.review-again-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(128, 36, 51, 0.3);
}

/* Miglioramenti accessibilità */
.rate-btn:focus,
.stats-export-btn:focus,
.stats-close-btn:focus,
.close-stats-btn:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* Animazione apertura modale */
.stats-modal-container {
    transform-origin: center;
}

/* Dark mode support per statistiche */
@media (prefers-color-scheme: dark) {
    .stats-modal-container {
        background: #ffffff;
        border: 1px solid rgba(128, 36, 51, 0.12);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .stats-card,
    .stats-details-section {
        background: var(--white);
        border: 1px solid rgba(128, 36, 51, 0.12);
        box-shadow: var(--box-shadow);
    }

    .stats-detail-item {
        background: rgba(128, 36, 51, 0.05);
        border: 1px solid rgba(128, 36, 51, 0.08);
    }

    .stats-card-value,
    .stats-detail-label {
        color: var(--primary-dark);
    }

    .stats-card-label {
        color: rgba(44, 62, 80, 0.6);
    }
}

/* ===================== */
/* TOOLTIP TASTI RAPIDI */
/* ===================== */

.keyboard-hint-layer {
    position: fixed;
    inset: 0;
    z-index: 14000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.keyboard-hint-layer.open {
    opacity: 1;
    pointer-events: auto;
}

.keyboard-hint-layer.closing {
    opacity: 0;
}

.keyboard-hint-scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 7, 20, 0.45);
    backdrop-filter: blur(4px);
    transition: opacity 0.25s ease;
    opacity: 1;
}

.keyboard-shortcuts-hint {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 14002;
    max-width: 350px;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--primary-color);
    pointer-events: auto;
    will-change: transform, opacity;
}

.keyboard-shortcuts-hint.keyboard-shortcuts-hint--sticky {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.28);
}

.keyboard-shortcuts-hint.keyboard-shortcuts-hint--preview {
    border-width: 1px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}

.keyboard-shortcuts-hint.hint-to-info {
    animation: collapseToInfo 0.42s ease forwards;
}

.keyboard-shortcuts-hint.closing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.keyboard-shortcuts-hint--preview .close-hint-btn {
    display: none;
}

.shortcuts-content h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--light-gray);
    border-radius: 8px;
}

.shortcut-item kbd {
    background: var(--primary-color);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 35px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shortcut-item span {
    color: var(--text-color);
    font-size: 0.9rem;
}

.close-hint-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--light-gray);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-light);
}

.close-hint-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(90deg);
}

@keyframes collapseToInfo {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--hint-collapse-x, 0), var(--hint-collapse-y, -12px)) scale(0.3);
        opacity: 0;
    }
}

/* Badge numerici sui bottoni */
.keyboard-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: badgePulse 2s infinite;
}

body.dark-mode .keyboard-shortcuts-hint {
    background: var(--dark-bg-secondary);
    border: 2px solid var(--dark-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

body.dark-mode .keyboard-shortcuts-hint.keyboard-shortcuts-hint--preview {
    border-color: var(--dark-border);
}

body.dark-mode .keyboard-hint-scrim {
    background: rgba(0, 0, 0, 0.65);
}

body.dark-mode .shortcuts-content h4 {
    color: var(--dark-primary);
}

body.dark-mode .shortcut-item {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .shortcut-item kbd {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

body.dark-mode .shortcut-item span {
    color: var(--dark-text-primary);
}

body.dark-mode .close-hint-btn {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .close-hint-btn:hover {
    background: var(--dark-bg-input);
    color: var(--white);
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ===================== */
/* MIGLIORAMENTI DRAG GESTURE (fallback touch) */
/* ===================== */

.flashcard {
    touch-action: none;
}

/* ===================== */
/* RATING PANEL  MODERN STYLE */
/* ===================== */

.flashcards-screen .rating-section {
    padding: clamp(24px, 4vw, 38px);
    border-radius: 28px;
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 247, 0.94));
    box-shadow: var(--shadow-card-soft);
}

.rating-section {
    position: relative;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 28px;
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 247, 0.94));
    box-shadow: var(--shadow-card-soft);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 28px);
    isolation: isolate;
}

.rating-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% -10%, rgba(128, 36, 51, 0.18), transparent 55%),
        radial-gradient(circle at 85% 0%, rgba(168, 50, 74, 0.12), transparent 45%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.rating-section > * {
    position: relative;
    z-index: 1;
}

.rating-section h4 {
    text-align: center;
    margin: 0;
    color: var(--secondary-color);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rating-section h4::before {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--primary-color), var(--primary-light));
}

.rating-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

#rating-section .rate-btn {
    --rate-accent: var(--primary-color);
    --rate-shadow: rgba(128, 36, 51, 0.18);
    position: relative;
    border-radius: 22px;
    padding: clamp(18px, 2.5vw, 26px);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(250, 246, 247, 0.9));
    border: 1px solid rgba(128, 36, 51, 0.08);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12), 0 12px 24px var(--rate-shadow);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: fadeInScale 0.35s ease backwards;
}

#rating-section .rate-btn .rate-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)),
        var(--rate-accent);
    color: var(--white);
    box-shadow: 0 12px 24px var(--rate-shadow);
    flex-shrink: 0;
}

#rating-section .rate-btn .rate-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    align-items: center;
}

#rating-section .rate-btn > * {
    position: relative;
    z-index: 1;
}

#rating-section .rate-btn .rate-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--secondary-color);
}

#rating-section .rate-btn .rate-interval {
    font-size: 0.92rem;
    color: var(--text-light);
}

#rating-section .rate-btn .rate-badge {
    margin-top: 8px;
    background: rgba(128, 36, 51, 0.08);
    color: var(--primary-dark);
}

#rating-section .rate-btn.difficult {
    --rate-accent: #b3263a;
    --rate-shadow: rgba(179, 38, 58, 0.25);
}

#rating-section .rate-btn.hard {
    --rate-accent: #c96914;
    --rate-shadow: rgba(201, 105, 20, 0.22);
}

#rating-section .rate-btn.good {
    --rate-accent: #1c8c59;
    --rate-shadow: rgba(28, 140, 89, 0.24);
}

#rating-section .rate-btn.success {
    --rate-accent: #0f7c85;
    --rate-shadow: rgba(15, 124, 133, 0.22);
}

#rating-section .rate-btn.easy {
    --rate-accent: #1a4f91;
    --rate-shadow: rgba(26, 79, 145, 0.22);
}

#rating-section .rate-btn.danger {
    --rate-accent: #8e0e00;
    --rate-shadow: rgba(142, 14, 0, 0.25);
}

#rating-section .rate-btn.danger .rate-title,
#rating-section .rate-btn.danger .rate-interval {
    color: #7a131d;
}

/* Animazione entrata bottoni rating */
#rating-section .rate-btn:nth-child(1) {
    animation-delay: 0.05s;
}

#rating-section .rate-btn:nth-child(2) {
    animation-delay: 0.1s;
}

#rating-section .rate-btn:nth-child(3) {
    animation-delay: 0.15s;
}

#rating-section .rate-btn:nth-child(4) {
    animation-delay: 0.2s;
}

#rating-section .rate-btn:nth-child(5) {
    animation-delay: 0.25s;
}

#rating-section .rate-btn:nth-child(6) {
    animation-delay: 0.3s;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#rating-section .rate-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18), 0 18px 36px var(--rate-shadow);
    border-color: rgba(128, 36, 51, 0.25);
}

/* ===================== */
/* FEEDBACK VISIVI */
/* ===================== */

/* Loading state per transizioni */
.flashcard-main.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Success feedback dopo valutazione */
@keyframes successFlash {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(76, 175, 80, 0.3);
    }
}

#rating-section .rate-btn:active {
    animation: successFlash 0.6s ease;
}

/* ===================== */
/* RESPONSIVE IMPROVEMENTS */
/* ===================== */

@media (max-width: 768px) {
    .keyboard-shortcuts-hint {
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        max-width: none;
    }

    .shortcuts-list {
        grid-template-columns: 1fr;
    }

    .keyboard-badge {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
        top: -6px;
        right: -6px;
    }
}

@media (max-width: 480px) {
    .shortcut-item {
        padding: 6px 10px;
    }

    .shortcut-item kbd {
        padding: 3px 8px;
        font-size: 0.8rem;
        min-width: 30px;
    }

    .shortcut-item span {
        font-size: 0.85rem;
    }
}

/* ===================== */
/* ACCESSIBILITÀ */
/* ===================== */

/* Focus visibile per navigazione da tastiera */
#rating-section .rate-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(128, 36, 51, 0.2);
}

/* Riduzione movimento per utenti con preferenze */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .keyboard-shortcuts-hint {
        animation: none;
    }

    .rate-btn {
        animation: none;
    }
}

/* Alto contrasto per accessibilità */
@media (prefers-contrast: high) {
    .rate-btn {
        border-width: 3px;
    }

    .keyboard-badge {
        border-width: 3px;
    }

    .stats-modal-container {
        border: 3px solid var(--primary-color);
    }
}

/* ===================== */
/* MIGLIORAMENTI FOOTER RATING */
/* ===================== */

.rating-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--light-gray);
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.rating-footer .secondary-btn {
    flex: 1;
    min-width: 180px;
}

@media (max-width: 480px) {
    .rating-footer {
        flex-direction: column;
    }

    .rating-footer .secondary-btn {
        width: 100%;
        min-width: auto;
    }
}

/* ===================== */
/* STATO HOVER MIGLIORATO */
/* ===================== */

#rating-section .rate-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

#rating-section .rate-btn:hover::before {
    opacity: 1;
}

/* Effetto ripple al click */
#rating-section .rate-btn {
    overflow: hidden;
}

#rating-section .rate-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: translate(-50%, -50%);
    transition: width 0.55s ease, height 0.55s ease;
    pointer-events: none;
}

#rating-section .rate-btn:active::after {
    width: 280px;
    height: 280px;
}

/* ===================== */
/* ANIMAZIONE AGGIORNAMENTO BADGE */
/* ===================== */

.card-badge.badge-update {
    animation: badgeUpdate 0.5s ease;
}

@keyframes badgeUpdate {
    0% {
        transform: scale(1);
        background: var(--primary-dark);
    }

    50% {
        transform: scale(1.3);
        background: var(--success-color);
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
    }

    100% {
        transform: scale(1);
        background: var(--primary-dark);
    }
}

/* Pulse per badge in scadenza */
.study-option-card.due-cards .card-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(128, 36, 51, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(128, 36, 51, 0);
    }
}

/* Progress bar smooth transition */
.progress-fill {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   DARK MODE 
   ===================================================== */

/* ==================
   VARIABILI DARK MODE PROFESSIONALI
   ================== */

:root {
    /* Light mode (esistenti) */
    --primary-color: #802433;
    --primary-dark: #5c1a26;
    --primary-light: #a8324a;

    /* Dark mode - Palette Professionale (tipo Word/GitHub) */
    --dark-bg-primary: #1e1e1e;
    /* Grigio scuro principale */
    --dark-bg-secondary: #252526;
    /* Grigio cards */
    --dark-bg-tertiary: #2d2d30;
    /* Grigio elementi */
    --dark-bg-input: #3c3c3c;
    /* Input fields */

    --dark-text-primary: #d4d4d4;
    /* Testo principale */
    --dark-text-secondary: #999999;
    /* Testo secondario */
    --dark-text-muted: #6a6a6a;
    /* Testo disabilitato */

    --dark-border: #3e3e42;
    /* Bordi sottili */
    --dark-border-light: #2d2d30;
    /* Bordi più chiari */

    /* Accenti dark mode */
    --dark-primary: #c77b85;
    /* Rosso più chiaro per dark */
    --dark-primary-hover: #d48a94;
    --dark-success: #4ec9b0;
    --dark-warning: #dcdcaa;
    --dark-danger: #f48771;
}

/* ==================
   DARK MODE - BODY E GENERALI
   ================== */

body.dark-mode {
    background-color: var(--dark-bg-primary);
    background-image: url('../immagini-logo/sfondo-dark.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--dark-text-primary);
    --surface-page: var(--dark-bg-primary);
    --surface-card: var(--dark-bg-secondary);
    --surface-panel: var(--dark-bg-tertiary);
    --surface-border: var(--dark-border);
    --surface-border-strong: var(--dark-border-light);
    --shadow-card-soft: 0 18px 36px rgba(0, 0, 0, 0.55);
    --shadow-card-strong: 0 28px 60px rgba(0, 0, 0, 0.65);
    --text-color: var(--dark-text-primary);
    --text-light: var(--dark-text-secondary);
    --button-gloss: rgba(255, 255, 255, 0.12);
    --button-gloss-strong: rgba(255, 255, 255, 0.2);
    --button-gloss-max: rgba(255, 255, 255, 0.35);
}

/* Fonti: stesso scale per le linee anche in dark mode */
body.fonti-page.dark-mode {
    background-image: url('../immagini-logo/sfondo-dark.svg');
    background-size: 120vw auto;
    background-repeat: repeat-y;
    background-position: center top;
}

/* ==================
   DARK MODE - CARDS E CONTENITORI
   ================== */

body.dark-mode .auth-form,
body.dark-mode .dashboard-header,
body.dark-mode .quiz-settings,
body.dark-mode .stat-card,
body.dark-mode .channel-card,
body.dark-mode .subject-card,
body.dark-mode #quiz-screen,
body.dark-mode #results-screen,
body.dark-mode .subject-dashboard,
body.dark-mode .flashcards-container,
body.dark-mode .study-option-card,
body.dark-mode .ai-chat-container {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

body.dark-mode .subject-category {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

body.dark-mode .category-title,
body.dark-mode .category-title-secondary {
    color: var(--dark-primary);
}

/* ==================
   DARK MODE - SEZIONE CANALI
   ================== */

body.dark-mode .channel-section {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}


/* ==================
   DARK MODE - HEADER E NAVIGATION
   ================== */

body.dark-mode .quiz-header,
body.dark-mode .flashcards-header,
body.dark-mode .ai-chat-header {
    background: linear-gradient(135deg, #802433, #5c1a26);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: clamp(18px, 4vw, 30px) clamp(24px, 5vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 15px);
    justify-content: space-between;
    min-height: 58px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: none;
    box-shadow: none;
}

body.dark-mode .app-header {
    background: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

/* ==================
   DARK MODE - TESTI E TITOLI
   ================== */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
    color: var(--dark-text-primary);
}

body.dark-mode .auth-form h2,
body.dark-mode .quiz-settings h3,
body.dark-mode #current-subject-name {
    color: var(--dark-primary);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label {
    color: var(--dark-text-primary);
}

body.dark-mode .app-description,
body.dark-mode .stat-label,
body.dark-mode .text-light {
    color: var(--dark-text-secondary);
}

body.dark-mode .channel-description {
    color: #fff;
}

/* ==================
   DARK MODE - INPUT E FORM
   ================== */

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-select,
body.dark-mode .ai-input {
    background: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-primary);
    box-shadow: 0 0 0 2px rgba(199, 123, 133, 0.2);
}

/* ==================
   DARK MODE - BOTTONI
   ================== */

body.dark-mode .answer-btn {
    background: #000;
    background-color: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
}

body.dark-mode .answer-btn:hover:not(.selected) {
    background: #050505;
    border-color: rgba(255, 255, 255, 0.55);
}

body.dark-mode .answer-btn.selected {
    background: #000;
    background-color: #000;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.65);
}

body.dark-mode .answer-btn.correct {
    background: linear-gradient(160deg, #000 0%, #053a1c 100%);
    background-color: #000;
    color: #fff;
    border-color: #27ae60;
    box-shadow: 0 14px 32px rgba(39, 174, 96, 0.45);
}

body.dark-mode .answer-btn.correct:hover,
body.dark-mode .answer-btn.correct:focus {
    background: linear-gradient(160deg, #050505 0%, #0a532b 100%);
    background-color: #050505;
    color: #fff;
}

body.dark-mode .answer-btn.incorrect {
    background: linear-gradient(160deg, #000 0%, #3d0a0a 100%);
    background-color: #000;
    color: #fff;
    border-color: #e74c3c;
    box-shadow: 0 14px 32px rgba(231, 76, 60, 0.45);
}

body.dark-mode .answer-btn.incorrect:hover,
body.dark-mode .answer-btn.incorrect:focus {
    background: linear-gradient(160deg, #050505 0%, #5c0d0d 100%);
    background-color: #050505;
    color: #fff;
}

body.dark-mode .answer-btn .answer-text,
body.dark-mode .answer-btn .answer-letter,
body.dark-mode .answer-btn .answer-label {
    color: #fff;
}

body.dark-mode .logout-btn,
body.dark-mode .secondary-btn {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .logout-btn:hover,
body.dark-mode .secondary-btn:hover {
    background: var(--dark-bg-input);
}

/* ==================
   DARK MODE - QUIZ
   ================== */

body.dark-mode .quiz-content {
    background: var(--dark-bg-secondary);
}

body.dark-mode #question-text {
    color: var(--dark-text-primary);
}

body.dark-mode .quiz-navigation {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

/* ==================
   DARK MODE - RISULTATI
   ================== */

body.dark-mode .result-item {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .result-item.wrong {
    background: rgba(244, 135, 113, 0.1);
    border-left-color: var(--dark-danger);
}

body.dark-mode .result-correct-answer {
    background: rgba(78, 201, 176, 0.1);
    border-left-color: var(--dark-success);
}

body.dark-mode .user-answer.user-wrong {
    background: rgba(244, 135, 113, 0.15);
}

body.dark-mode .user-answer.user-correct {
    background: rgba(78, 201, 176, 0.15);
}

/* ==================
   DARK MODE - AI CHAT
   ================== */

body.dark-mode .ai-chat-messages {
    background: var(--dark-bg-primary);
}

body.dark-mode .ai-message.ai .message-content {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .ai-message.user .message-content {
    background: linear-gradient(135deg, #802433, #5c1a26);
    color: white;
}

body.dark-mode .ai-chat-input-area {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

body.dark-mode .welcome-ai-message {
    color: var(--dark-text-primary);
}

body.dark-mode .welcome-ai-message i {
    color: var(--dark-primary);
}
body.dark-mode .welcome-ai-message img {
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

body.dark-mode .welcome-ai-message p {
    color: var(--dark-text-secondary);
}

/* ==================
   DARK MODE - LOGIN SCREEN ONLY
   ================== */

/* Sfondo scuro per la schermata di autenticazione */
body.dark-mode #auth-screen {
    background: linear-gradient(180deg, #0f0f10 0%, #0b0b0c 100%);
}

/* Canvas/threads su sfondo scuro: trasparente per far vedere il gradiente */
body.dark-mode #auth-threads {
    background: transparent;
}

/* Mantieni il logo/titolo rosa anche in dark sul login */
body.dark-mode #auth-screen .app-logo h1 {
    color: var(--primary-color);
}

/* Switch Ricordami coerente con dark */
body.dark-mode #auth-screen .checkbox-group input[type="checkbox"] {
    background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.1);
}

/* Card del login più scura, con bordo e glow morbido */
body.dark-mode #auth-screen .auth-form {
    background: linear-gradient(180deg, rgba(18,18,18,.98), rgba(10,10,10,.96));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 24px 48px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.12) inset;
}

/* Input scuri come nello screen */
body.dark-mode #auth-screen .form-group input {
    background: #141216;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 45%),
                      radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.04), transparent 40%),
                      linear-gradient(180deg, #19191b, #0f0f11);
    color: #f6f6f8;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08), 0 20px 30px rgba(0, 0, 0, 0.6);
}
body.dark-mode #auth-screen .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
body.dark-mode #auth-screen .form-group input:focus {
    background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.14), transparent 45%),
                      radial-gradient(circle at 75% 10%, rgba(255, 255, 255, 0.08), transparent 40%),
                      linear-gradient(180deg, #1d1c1f, #141216);
    border-color: rgba(199, 123, 133, 0.8);
    box-shadow: 0 0 0 2px rgba(199, 123, 133, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 40px rgba(0, 0, 0, 0.65);
}

/* Label e testo secondario chiari */
body.dark-mode #auth-screen label,
body.dark-mode #auth-screen .auth-switch,
body.dark-mode #auth-screen .auth-form .auth-meta-phrase {
    color: #d2d2d6;
}

body.dark-mode #auth-screen .reg-terms-label a,
body.dark-mode #auth-screen .reg-terms-label a:visited {
    color: #8b1d2c;
}

body.dark-mode #auth-screen .reg-terms-label a:hover {
    color: #a12536;
}

/* Bottone Accedi con glow come screenshot */
body.dark-mode #auth-screen .auth-btn {
    background: linear-gradient(135deg, #a93a46, #7a202c);
    box-shadow: 0 16px 30px rgba(128,36,51,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark-mode #auth-screen .auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(128,36,51,.50), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Link e pulsante Chi Siamo coerenti */
body.dark-mode #auth-screen .auth-switch a { color: var(--dark-primary); }
body.dark-mode #auth-screen .auth-form .chi-siamo-btn {
    background: linear-gradient(135deg, #6d2a36, #4b1c25);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ==================
   DARK MODE - FLASHCARDS
   ================== */

body.dark-mode .study-options {
    background: transparent;
}

body.dark-mode .study-option-card {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

body.dark-mode .study-option-card::before {
    background: linear-gradient(180deg, var(--dark-primary), var(--primary-dark));
}

body.dark-mode .study-option-card:hover {
    border-color: var(--dark-primary);
    background: var(--dark-bg-tertiary);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
}

body.dark-mode .study-option-card .card-icon {
    background: linear-gradient(135deg, var(--dark-primary), var(--primary-dark));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

body.dark-mode .study-option-card .card-content p {
    color: var(--dark-text-secondary);
}

body.dark-mode .study-option-card .card-progress .progress-bar {
    background: rgba(199, 123, 133, 0.35);
}

body.dark-mode .study-option-card .card-progress span {
    color: var(--dark-primary);
}

body.dark-mode .study-option-card .stat {
    color: var(--dark-text-secondary);
}

body.dark-mode .study-option-card .card-arrow {
    color: var(--dark-primary);
}

body.dark-mode .study-option-card:hover .card-arrow {
    color: var(--white);
}

body.dark-mode .flashcard-main {
    background: transparent; /* lascia vedere lo sfondo dark con la texture */
    color: #f4f4f7;
}

/* Dark mode tuning for redesigned flashcard */
body.dark-mode .flashcards-screen .flashcard-front,
body.dark-mode .flashcards-screen .flashcard-back{
  --card-edge: rgba(255,255,255,.16);
  --card-halo: rgba(255,255,255,.14);
  background:
    radial-gradient(120% 100% at 24% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #2a0f1a 0%, #0f0f15 100%);
  box-shadow: 0 46px 92px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.55);
}
body.dark-mode .flashcards-screen .card-number{ background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.12); color:#fff; }
body.dark-mode .flashcards-screen .card-type{ background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); border-color: rgba(255,255,255,.14); color: rgba(235,240,255,.92); }
body.dark-mode .flashcards-screen .card-header{ border-bottom:1px solid rgba(255,255,255,.12); }
body.dark-mode .flashcards-screen .card-hint{ border-top:1px solid rgba(255,255,255,.12); }
body.dark-mode .flashcards-screen .question-scroll-container::-webkit-scrollbar-track,
body.dark-mode .flashcards-screen .answer-scroll-container::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
body.dark-mode .flashcards-screen .question-scroll-container::-webkit-scrollbar-thumb,
body.dark-mode .flashcards-screen .answer-scroll-container::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); }

body.dark-mode .flashcards-container {
    background-color: rgba(14,14,20,0.94);
    background-image: linear-gradient(180deg, rgba(20,20,28,0.98), rgba(17,17,24,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 40px 90px rgba(0,0,0,0.65);
    color: #f4f4f7;
}

body.dark-mode .flashcards-screen {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.08), transparent 45%),
        linear-gradient(135deg, #0a0a0e 0%, #13131a 100%);
}

body.dark-mode .flashcards-screen .flashcards-header {
    background: linear-gradient(135deg, #34111f, #11050a);
    color: #fff;
    padding: 10px 20px;
    min-height: 56px;
    gap: clamp(10px, 1.8vw, 18px);
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
    backdrop-filter: saturate(150%) blur(10px);
}

body.dark-mode .flashcards-screen .stat-badge {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
}

body.dark-mode .flashcards-screen .stat-badge i {
    color: #ffd86b;
}

body.dark-mode .streak-launcher {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 26px 50px rgba(0,0,0,0.65);
}

body.dark-mode .streak-launcher__copy .label {
    color: rgba(255,255,255,0.65);
}

body.dark-mode .streak-launcher__icon {
    background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.25), rgba(255,255,255,0));
}

body.dark-mode .flashcards-screen .management-btn {
    background: linear-gradient(145deg, #201f26, #14131a);
    color: #f4f4f7;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 30px 60px rgba(0,0,0,0.65);
}

body.dark-mode .flashcards-screen .management-btn .btn-icon {
    background: linear-gradient(135deg, #c54666, #8c1f39);
}

body.dark-mode .flashcards-screen .management-btn[data-variant='export'] {
    background: linear-gradient(145deg, #2a211a, #1a140e);
}

body.dark-mode .flashcards-screen .management-btn[data-variant='export'] .btn-icon {
    background: linear-gradient(135deg, #f2994a, #f2c94c);
    color: #2f1503;
}

body.dark-mode .flashcards-screen .management-btn[data-variant='stats'] {
    background: linear-gradient(145deg, #1c1f2d, #121423);
}

body.dark-mode .flashcards-screen .management-btn[data-variant='stats'] .btn-icon {
    background: linear-gradient(135deg, #6f7dff, #9157ff);
}

body.dark-mode .flashcards-screen .management-btn:hover {
    background: linear-gradient(145deg, #27252f, #16151c);
}

body.dark-mode .flashcards-screen .rate-btn {
    background: linear-gradient(145deg, #1a1c24, #0f1117);
    border: 1px solid rgba(255,255,255,0.04);
    color: #f4f4f7;
    box-shadow: 0 18px 32px rgba(0,0,0,0.55);
}

body.dark-mode .study-options {
    background: transparent;
}

body.dark-mode .study-footer {
    border-top: 1px solid var(--dark-border);
}

body.dark-mode .session-stats .stat {
    color: var(--dark-text-primary);
}

body.dark-mode .study-settings-panel {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.45);
}

body.dark-mode .study-settings-icon {
    background: rgba(199, 123, 133, 0.18);
    color: var(--dark-primary);
}

body.dark-mode .study-settings-content label {
    color: var(--dark-text-primary);
}

body.dark-mode .flashcard-limit-select {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .flashcard-limit-select option {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

body.dark-mode .study-settings-hint {
    color: var(--dark-text-secondary);
}

body.dark-mode .reset-deck-btn {
    background: linear-gradient(135deg, rgba(199, 123, 133, 0.9), var(--primary-dark));
    color: var(--white);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

body.dark-mode .reset-deck-btn:hover {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
}


body.dark-mode .deck-stats {
    gap: 20px;
}

body.dark-mode .stat-item {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

body.dark-mode .stat-item i {
    color: var(--dark-primary);
}

body.dark-mode .session-progress {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .progress-info {
    color: var(--dark-text-primary);
}

body.dark-mode .session-progress .progress-bar {
    background: var(--dark-border);
}

body.dark-mode .session-progress .progress-fill {
    background: linear-gradient(135deg, var(--dark-primary), var(--primary-dark));
}

body.dark-mode .session-header {
    background: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    color: var(--dark-text-primary);
}

body.dark-mode .session-info {
    color: var(--dark-text-secondary);
}

body.dark-mode .session-stats .stat i {
    color: var(--dark-primary);
}

body.dark-mode .flashcard {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

body.dark-mode .flashcard-front,
body.dark-mode .flashcard-back {
    background: linear-gradient(135deg, rgba(199, 123, 133, 0.85), rgba(92, 26, 38, 0.85));
    color: var(--dark-text-primary);
    border: 1px solid rgba(199, 123, 133, 0.35);
}

/* === Session header: 3D glass look === */
.session-header{
  position:sticky;
  top:0;
  z-index:90;
  padding:18px 26px;
  margin:-4px -4px 10px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,240,244,.9));
  border:1px solid rgba(15,23,42,.06);
  border-radius:22px;
  box-shadow:
    0 22px 50px rgba(15,23,42,.18),
    0 4px 14px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(1.1);
  transform-style:preserve-3d;
}
.session-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.session-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.session-stats .stat{
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(245,236,240,.85));
  border:1px solid rgba(128,36,51,.12);
  box-shadow:0 14px 28px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--secondary-color);
  font-weight:700;
  gap:8px;
}
.session-stats .stat i{
  color:var(--primary-color);
  text-shadow:0 8px 18px rgba(128,36,51,.35);
}
.session-progress{
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,239,241,.9));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 42px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.session-progress .progress-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  color:var(--secondary-color);
  letter-spacing:.01em;
}
.session-progress .progress-bar{
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(128,36,51,.12),rgba(128,36,51,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.session-progress .progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(120deg,#ffbe3b,var(--primary-color));
  box-shadow:0 10px 24px rgba(128,36,51,.35);
  transition:width .45s ease;
}
body.dark-mode .session-header{
  background:linear-gradient(145deg,rgba(20,20,24,.92),rgba(14,14,18,.9));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 20px 46px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
body.dark-mode .session-stats .stat{
  background:linear-gradient(135deg,rgba(30,30,36,.9),rgba(18,18,24,.9));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--dark-text-primary);
}
body.dark-mode .session-stats .stat i{
  color:var(--primary-color);
}
body.dark-mode .session-progress{
  background:linear-gradient(145deg,rgba(24,24,30,.95),rgba(16,16,22,.9));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
body.dark-mode .session-progress .progress-bar{
  background:rgba(255,255,255,.08);
}
body.dark-mode .session-progress .progress-fill{
  background:linear-gradient(120deg,#ffbe3b,var(--primary-color));
}

body.dark-mode .flashcard-front h4,
body.dark-mode .flashcard-back p {
    color: var(--dark-text-primary);
}

body.dark-mode .flashcard-btn {
    background: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .flashcard-btn:hover {
    background: linear-gradient(135deg, var(--dark-primary), var(--primary-dark));
    color: var(--white);
    border-color: transparent;
}

body.dark-mode .flashcard-progress {
    background: var(--dark-bg-tertiary);
    color: var(--dark-primary);
}

/* ==================
   DARK MODE - STATISTICHE
   ================== */

body.dark-mode .stats-overlay {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .stats-panel {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .stats-modal-container {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

body.dark-mode .stats-modal-body {
    background: var(--dark-bg-secondary);
}

body.dark-mode .stats-details-hero {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .stats-highlight-label {
    color: rgba(255, 255, 255, 0.65);
}

body.dark-mode .stats-highlight-value,
body.dark-mode .stats-highlight-description {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .stats-panel-card {
    background: rgba(16, 16, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.65);
}

body.dark-mode .stats-panel-card.insights {
    background: linear-gradient(135deg, rgba(48, 20, 30, 0.95), rgba(16, 16, 24, 0.92));
}

body.dark-mode .stats-panel-header h4,
body.dark-mode .stats-panel-header h5 {
    color: #f4dfe5;
}

body.dark-mode .stats-panel-header span {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .stats-progress-row {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .stats-progress-row span {
    color: rgba(255, 255, 255, 0.65);
}

body.dark-mode .stats-progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .stats-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .stats-pill.accent {
    background: rgba(128, 36, 51, 0.35);
    border-color: rgba(128, 36, 51, 0.5);
}

body.dark-mode .stats-pill.subdued {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .stats-pill span {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .stats-pill strong {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .stats-panel-note {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .stats-insight-intro,
body.dark-mode .stats-insight-list {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .stats-modal-body::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

body.dark-mode .stats-modal-body::-webkit-scrollbar-thumb {
    background: var(--dark-primary);
}

body.dark-mode .stats-modal-footer {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
}

body.dark-mode .stats-card {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

body.dark-mode .stats-card:hover {
    border-color: var(--dark-primary);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
}

body.dark-mode .stats-card-icon {
    background: linear-gradient(135deg, var(--dark-primary), var(--primary-dark));
}

body.dark-mode .stats-card.success .stats-card-icon {
    background: linear-gradient(135deg, var(--dark-success), #2b8a72);
}

body.dark-mode .stats-card.info .stats-card-icon {
    background: linear-gradient(135deg, #4ea4f8, #2979ff);
}

body.dark-mode .stats-card.warning .stats-card-icon {
    background: linear-gradient(135deg, var(--dark-warning), #d4a933);
}

body.dark-mode .stats-card-value {
    color: var(--dark-primary);
}

body.dark-mode .stats-card-label {
    color: var(--dark-text-secondary);
}

body.dark-mode .stats-details-section {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

body.dark-mode .stats-detail-item {
    background: rgba(199, 123, 133, 0.15);
    border: 1px solid rgba(199, 123, 133, 0.35);
}

body.dark-mode .stats-detail-item:hover {
    background: rgba(199, 123, 133, 0.25);
    border-color: rgba(199, 123, 133, 0.5);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}

body.dark-mode .stats-detail-label {
    color: var(--dark-text-primary);
}

body.dark-mode .stats-detail-label i {
    color: var(--dark-primary);
}

body.dark-mode .stats-detail-value {
    color: var(--dark-primary);
}

body.dark-mode .stats-export-btn {
    background: transparent;
    color: var(--dark-primary);
    border: 2px solid var(--dark-primary);
}

body.dark-mode .stats-export-btn:hover {
    background: var(--dark-primary);
    color: var(--dark-bg-primary);
}

body.dark-mode .stats-close-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
}

body.dark-mode .stats-close-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), #361017);
}

body.dark-mode .rating-section {
    background: linear-gradient(180deg, rgba(18, 18, 22, 0.96), rgba(10, 10, 14, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65);
}

body.dark-mode .rating-section::before {
    background:
        radial-gradient(circle at 20% -10%, rgba(128, 36, 51, 0.32), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(168, 50, 74, 0.24), transparent 45%);
    opacity: 0.65;
}

body.dark-mode .rating-section h4 {
    color: #f5f5f5;
}

body.dark-mode #rating-section .rate-btn {
    background: linear-gradient(150deg, rgba(26, 26, 32, 0.98), rgba(14, 14, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 10px 24px var(--rate-shadow);
    color: #f1f1f1;
}

body.dark-mode #rating-section .rate-btn:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.7), 0 16px 32px var(--rate-shadow);
}

body.dark-mode #rating-section .rate-btn .rate-title {
    color: #f7f7f7;
}

body.dark-mode #rating-section .rate-btn .rate-interval {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode #rating-section .rate-btn .rate-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body.dark-mode #rating-section .rate-btn .rate-icon {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

body.dark-mode #rating-section .rate-btn::before {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
}

body.dark-mode #rating-section .rate-btn::after {
    background: rgba(255, 255, 255, 0.3);
}

body.dark-mode #rating-section .rate-btn.danger .rate-title,
body.dark-mode #rating-section .rate-btn.danger .rate-interval {
    color: #ffb4b4;
}

body.dark-mode .custom-review-panel {
    background: rgba(30, 30, 34, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .custom-review-input {
    background: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-light);
}

body.dark-mode .custom-review-input:focus {
    box-shadow: 0 0 0 3px rgba(199, 123, 133, 0.25);
}

body.dark-mode .custom-review-submit {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

body.dark-mode .custom-review-feedback {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .custom-review-feedback[data-error='true'] {
    color: var(--dark-danger);
}

body.dark-mode .review-again-btn {
    background: transparent;
    color: var(--dark-primary);
    border: 2px solid var(--dark-primary);
}

body.dark-mode .review-again-btn:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ==================
   DARK MODE - SCROLLBAR PERSONALIZZATA
   ================== */

body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-input);
    border-radius: 6px;
    border: 2px solid var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* ==================
   DARK MODE - MENU SIDEBAR
   ================== */

body.dark-mode .menu-content {
    background: var(--dark-bg-secondary);
    border-right: 1px solid var(--dark-border);
}

body.dark-mode .menu-item {
    color: var(--dark-text-primary);
}

body.dark-mode .menu-item:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-primary);
}

body.dark-mode .menu-footer p {
    color: var(--dark-text-muted);
}

/* ==================
   DARK MODE - SHADOW E EFFETTI
   ================== */

body.dark-mode .stat-card,
body.dark-mode .channel-card,
body.dark-mode .subject-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .ai-chat-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ==================
   DARK MODE - FLOATING AI BUTTON
   ================== */

body.dark-mode .floating-ai-button {
    background: linear-gradient(135deg, var(--dark-primary), #802433);
    box-shadow: 0 8px 25px rgba(199, 123, 133, 0.4);
}

body.dark-mode .floating-ai-button:hover {
    box-shadow: 0 12px 35px rgba(199, 123, 133, 0.5);
}

/* ==================
   DARK MODE - SPIEGAZIONE BUTTON
   ================== */

.explanation-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

body.dark-mode .explanation-btn {
    background: linear-gradient(135deg, var(--dark-warning), #d4a933);
}

.explanation-btn:hover {
    background: linear-gradient(135deg, #e67e22, #d35400);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(243, 156, 18, 0.4);
}

.explanation-btn i {
    font-size: 1.1rem;
}

/* ==================
   DARK MODE - ACCESSIBILITÀ
   ================== */

body.dark-mode a {
    color: var(--dark-primary);
}

body.dark-mode a:hover {
    color: var(--dark-primary-hover);
}

body.dark-mode ::selection {
    background: rgba(199, 123, 133, 0.3);
    color: white;
}

/* ==================
   DARK MODE - TRANSITIONS
   ================== */

body,
.dashboard-header,
.quiz-settings,
.stat-card,
.channel-card,
.subject-card,
.answer-btn,
input,
textarea,
select {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* ==================
   RESPONSIVE DARK MODE
   ================== */

@media (max-width: 768px) {
    /* Mantiene il toggle tema leggibile anche in mobile,
       senza nascondere le etichette Chiara/Scura */
}

/* ==================
   DARK MODE - MIGLIORAMENTI CONTRASTO
   ================== */

body.dark-mode .subject-badge,
body.dark-mode .channel-badge,
body.dark-mode .card-badge {
    background: var(--dark-primary);
    color: white;
    border: 1px solid var(--dark-border);
}

body.dark-mode .stat-value {
    color: var(--dark-primary);
}

body.dark-mode .progress-fill {
    background: linear-gradient(90deg, var(--dark-primary), var(--dark-primary-hover));
}

/* ==================
   DARK MODE - NOTIFICHE
   ================== */

body.dark-mode .notification {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .notification.success {
    background: rgba(78, 201, 176, 0.2);
    border-color: var(--dark-success);
    color: var(--dark-success);
}

body.dark-mode .notification.error {
    background: rgba(244, 135, 113, 0.2);
    border-color: var(--dark-danger);
    color: var(--dark-danger);
}

/* ==================
   DARK MODE - TOOLTIPS
   ================== */

body.dark-mode .tooltip-text {
    background-color: var(--dark-bg-input);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .tooltip-text::after {
    border-color: var(--dark-bg-input) transparent transparent transparent;
}

/* ==================
   DARK MODE - FOOTER
   ================== */

body.dark-mode .site-footer {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-secondary);
    border-top: 1px solid var(--dark-border);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
}

body.dark-mode .site-footer p {
    color: var(--dark-text-secondary);
}

/* ==================
   DARK MODE - PAGINE STATICHE
   ================== */

body.dark-mode .dashboard-header2,
body.dark-mode .chi-siamo-content,
body.dark-mode .fonti-content,
body.dark-mode .site-footer-contained {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

body.dark-mode .chi-siamo-content p,
body.dark-mode .fonti-content p,
body.dark-mode .fonti-course-description,
body.dark-mode .fonti-submit-note,
body.dark-mode .fonti-file-note,
body.dark-mode .fonti-empty,
body.dark-mode .fonti-disclaimer {
    color: var(--dark-text-secondary);
}

body.dark-mode .logout-btn2 {
    background: transparent;
    color: var(--dark-primary);
    border-color: transparent;
    box-shadow: none;
}

body.dark-mode .logout-btn2:hover {
    background: transparent;
}

body.dark-mode .chi-siamo-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.dark-mode .dashboard-header2 {
    background: linear-gradient(135deg, #1c1a22 0%, #14121b 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

body.dark-mode .dashboard-header2::before {
    background: radial-gradient(circle at 50% 50%, rgba(240, 115, 141, 0.16), transparent 60%);
    opacity: 0.4;
}

body.dark-mode h30 {
    color: #f5d4df;
}

body.dark-mode .chi-siamo-hero {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
    box-shadow: none;
}

body.dark-mode .chi-siamo-hero__brand {
    background: transparent;
    box-shadow: none;
}

body.dark-mode .chi-siamo-hero::after {
    background: linear-gradient(90deg, rgba(246, 185, 199, 0.8), rgba(246, 185, 199, 0));
    opacity: 0.6;
}

body.dark-mode .chi-siamo-content {
    background: linear-gradient(145deg, #161320 0%, #0d0b15 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72);
}

body.dark-mode .chi-siamo-content::before {
    background: radial-gradient(circle at center, rgba(240, 115, 141, 0.18), transparent 65%);
    opacity: 0.8;
}

body.dark-mode .chi-siamo-content h1,
body.dark-mode .chi-siamo-content h2,
body.dark-mode .chi-siamo-content h3 {
    color: #f6d8e3;
}

body.dark-mode .chi-siamo-content a {
    color: #f6b9c7;
    border-color: rgba(246, 185, 199, 0.4);
}

body.dark-mode .chi-siamo-content a:hover,
body.dark-mode .chi-siamo-content a:focus-visible {
    color: #ffd4df;
    border-color: rgba(255, 212, 223, 0.7);
}

body.dark-mode .history-image {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.65), 0 2px 14px rgba(246, 185, 199, 0.12);
    background: linear-gradient(135deg, rgba(240, 115, 141, 0.12), rgba(240, 115, 141, 0));
}

body.dark-mode .chi-siamo-btn:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
}

body.dark-mode .fonti-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dark-text-primary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

body.dark-mode .fonti-toggle:hover,
body.dark-mode .fonti-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .fonti-toggle-icon {
    border-left-color: var(--dark-primary);
}

body.dark-mode .fonti-course,
body.dark-mode .fonti-help {
    border-color: var(--dark-border);
}

body.dark-mode .fonti-subject {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

body.dark-mode .fonti-list li a {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
    box-shadow: none;
}

body.dark-mode .fonti-list li a::before {
    color: var(--dark-primary);
}

body.dark-mode .fonti-list li a:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: #fff;
    border-color: var(--primary-dark);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

body.dark-mode .fonti-file-note {
    border-left-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .fonti-help a {
    color: var(--dark-primary);
}

body.dark-mode .fonti-help a:hover {
    color: var(--dark-primary-hover);
}

body.dark-mode .fonti-help code {
    background: var(--dark-bg-input);
    color: var(--dark-primary);
}

/* ==================
   DARK MODE - NO QUIZ MESSAGE
   ================== */

body.dark-mode #no-quiz-message {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode #no-quiz-message h3 {
    color: var(--dark-primary);
}

/* ==================
   DARK MODE - ICONS COLORS
   ================== */

body.dark-mode .fa-moon,
body.dark-mode .fa-sun,
body.dark-mode .channel-icon,
body.dark-mode .subject-icon {
    color: inherit;
}

/* ==================
   FINE DARK MODE PROFESSIONALE
   ================== */

/* ==================
   4. FLOATING AI BUTTON
   ================== */

.floating-ai-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(128, 36, 51, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    font-size: 1.8rem;
    animation: floatPulse 3s ease-in-out infinite;
}

.floating-ai-button:hover {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 12px 35px rgba(128, 36, 51, 0.5);
}

@keyframes floatPulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 8px 25px rgba(128, 36, 51, 0.4);
    }

    50% {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(128, 36, 51, 0.5);
    }
}

/* ==================
   5. AI CHAT OVERLAY
   ================== */

.ai-chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ai-chat-container {
    width: 90%;
    max-width: 750px;
    height: 85vh;
    max-height: 700px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .ai-chat-container {
    background: var(--card-bg-dark);
    border: 1px solid var(--border-dark);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================
   6. AI CHAT HEADER
   ================== */

.ai-chat-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.chat-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-title i {
    font-size: 1.8rem;
}

.chat-title h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.chat-status {
    display: block;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 3px;
}

.close-chat-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.close-chat-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(90deg);
}

/* ==================
   7. AI CHAT MESSAGES
   ================== */

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    background: #f8f9fa;
    scroll-behavior: smooth;
}

body.dark-mode .ai-chat-messages {
    background: var(--bg-dark-secondary);
}

/* Custom scrollbar */
.ai-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

body.dark-mode .ai-chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ==================
   8. WELCOME MESSAGE
   ================== */

.welcome-ai-message {
    text-align: center;
    padding: 60px 20px 40px;
    animation: fadeIn 0.5s ease;
}

.welcome-ai-message i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: block;
}
.welcome-ai-message img {
    width: 70px;
    height: 75px;
    margin: 0 auto 20px;
    display: block;
    object-fit: contain;
}

.welcome-ai-message h4 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 12px;
}

body.dark-mode .welcome-ai-message h4 {
    color: var(--primary-light);
}

.welcome-ai-message p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

body.dark-mode .welcome-ai-message p {
    color: var(--text-dark-secondary);
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.quick-actions button {
    padding: 14px 18px;
    background: #fff;
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    color: var(--secondary-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

body.dark-mode .quick-actions button {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

.quick-actions button:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.dark-mode .quick-actions button:hover {
    background: var(--primary-light);
}

/* ==================
   9. AI MESSAGES
   ================== */

.ai-message {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    box-shadow: 0 3px 10px rgba(128, 36, 51, 0.2);
}

.message-content {
    flex: 1;
    max-width: 75%;
}

.ai-message.user .message-content {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 14px 18px;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 3px 12px rgba(128, 36, 51, 0.2);
}

.ai-message.ai .message-content {
    background: white;
    color: #333;
    padding: 14px 18px;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .ai-message.ai .message-content {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dark);
    border-color: var(--border-dark);
}

.message-text {
    line-height: 1.6;
    word-wrap: break-word;
}

.message-text strong {
    font-weight: 600;
    color: var(--primary-color);
}

body.dark-mode .message-text strong {
    color: var(--primary-light);
}

.ai-message.user .message-text strong {
    color: white;
}

.message-time {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 6px;
}

/* ==================
   10. TYPING INDICATOR
   ================== */

.ai-message.typing .message-content {
    background: white;
    padding: 18px 24px;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode .ai-message.typing .message-content {
    background: rgba(255, 255, 255, 0.08);
}

.typing-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.typing-dots span {
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ==================
   11. AI CHAT INPUT
   ================== */

.ai-chat-input-area {
    padding: 16px 18px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

body.dark-mode .ai-chat-input-area {
    background: var(--card-bg-dark);
    border-top-color: var(--border-dark);
}

.ai-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.ai-input-wrapper{
  display: grid;
  grid-template-columns: 1fr 56px;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Variante per la chat: textarea comoda e 3D */
.ai-textarea{
  display:block;
  width:100%;
  min-height:52px;
  max-height:140px;
  resize:none;
  overflow:auto;
  line-height:1.4;
  border-radius:16px;
  padding:12px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) inset, 0 4px 10px rgba(0,0,0,0.04);
}

body.dark-mode .ai-textarea{
  background: rgba(255,255,255,0.05);
  border-color: var(--border-dark);
}

body.dark-mode .ai-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

.ai-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(128, 36, 51, 0.1);
    background: white;
}

body.dark-mode .ai-input:focus {
    background: rgba(255, 255, 255, 0.08);
}

.ai-input::placeholder {
    color: #999;
}

body.dark-mode .ai-input::placeholder {
    color: var(--text-dark-secondary);
}

.ai-send-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--secondary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.ai-mic-btn { margin-left: 8px; }
.ai-mic-btn.listening { filter: brightness(1.12); box-shadow: 0 0 0 3px rgba(40,199,111,.35), 0 10px 24px rgba(40,199,111,.35); }

.ai-send-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }

.ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==================
   12. EXPLANATION BUTTON
   ================== */

.explanation-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.explanation-btn:hover {
    background: linear-gradient(135deg, #e67e22, #d35400);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(243, 156, 18, 0.4);
}

.explanation-btn i {
    font-size: 1.1rem;
}

/* ==================
   13. RESPONSIVE DESIGN
   ================== */

@media (max-width: 768px) {
    .floating-ai-button {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 1.5rem;
    }

    .ai-chat-container {
        width: 95%;
        height: 90vh;
        max-height: none;
        border-radius: 20px;
    }

    .ai-chat-header {
        padding: 18px 20px;
    }

    .chat-title h3 {
        font-size: 1.1rem;
    }

    .chat-title i {
        font-size: 1.5rem;
    }

    .ai-chat-messages {
        padding: 15px;
    }

    .message-content {
        max-width: 85%;
    }

    .welcome-ai-message {
        padding: 40px 15px 30px;
    }

    .welcome-ai-message i {
        font-size: 3rem;
    }

    .welcome-ai-message h4 {
        font-size: 1.3rem;
    }

    .quick-actions {
        max-width: 100%;
    }

    .ai-chat-input-area {
        padding: 15px;
    }

    .ai-input {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .ai-send-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .explanation-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .ai-chat-container {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .ai-chat-header {
        padding: 15px;
    }

    .chat-title h3 {
        font-size: 1rem;
    }

    .close-chat-btn {
        width: 38px;
        height: 38px;
    }

    .ai-chat-messages {
        padding: 12px;
    }

    .message-avatar {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }

    .ai-message.user .message-content,
    .ai-message.ai .message-content {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .welcome-ai-message {
        padding: 30px 10px 20px;
    }

    .welcome-ai-message i {
        font-size: 2.5rem;
    }

    .welcome-ai-message h4 {
        font-size: 1.2rem;
    }

    .quick-actions button {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* ==================
   14. ANIMATIONS & EFFECTS
   ================== */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Smooth transitions for all interactive elements */
button,
input,
select,
.answer-btn,
.rate-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================
   15. ACCESSIBILITY
   ================== */

.ai-chat-container:focus-within {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.ai-input:focus,
.ai-send-btn:focus,
.close-chat-btn:focus,
.dark-mode-toggle:focus,
.floating-ai-button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body.dark-mode {
        background: #000;
    }

    body.dark-mode .ai-chat-container {
        border: 2px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {

    .floating-ai-button,
    .dark-mode-toggle,
    .ai-chat-overlay {
        display: none !important;
    }
}

/* ==================
   VOICE TUTOR OVERLAY (lightweight)
   ================== */
.ai-voice-container { width: 90%; max-width: 560px; max-height: 70vh; background: #fff; border-radius: 20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); display:flex; flex-direction:column; }
body.dark-mode .ai-voice-container { background: var(--card-bg-dark); border:1px solid var(--border-dark); }
.ai-voice-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; padding:18px; display:flex; align-items:center; justify-content:space-between; }
.ai-voice-body { padding: 14px 16px; display:flex; flex-direction:column; gap:12px; }
.ai-voice-transcript { background: rgba(0,0,0,.06); border-radius:12px; padding:10px 12px; min-height:52px; display:flex; align-items:center; color:#333; }
body.dark-mode .ai-voice-transcript { background: rgba(255,255,255,.06); color:#fff; }
.ai-voice-transcript.listening { outline: 2px solid rgba(40,199,111,.6); }
.ai-voice-controls { display:flex; gap:10px; }
.ai-voice-replies { display:flex; flex-direction:column; gap:12px; max-height:240px; overflow:auto; padding-right:6px; }
.va-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.1); background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.2); cursor:pointer; }
.va-btn.ghost { background: transparent; color: inherit; border-color: rgba(0,0,0,.2); }
.ai-voice-bubble {
    border-radius: 16px;
    padding: 12px 14px;
    border:1px solid rgba(128,36,51,.18);
    background: rgba(128,36,51,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
    display:flex;
    flex-direction:column;
    gap:6px;
}
.ai-voice-bubble.user {
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
}
.ai-voice-bubble .bubble-role {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}
.ai-voice-bubble .bubble-text {
    font-weight: 600;
    line-height: 1.4;
}
.ai-voice-bubble.pending .bubble-text {
    opacity: 0.7;
}
body.dark-mode .ai-voice-bubble {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color:#fff;
}


/* Stile per " carte per sessione " */
.session-settings-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--medium-gray);
    transition: all 0.2s ease;
}

.session-settings-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.session-settings-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.session-settings-header i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 36, 51, 0.08);
}

.session-settings-header h4 {
    margin: 0;
    color: var(--secondary-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.session-controls-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: end;
}

.session-select-container {
    min-width: 180px;
}

.session-select-container label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.session-limit-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--medium-gray);
    border-radius: 6px;
    background: var(--white);
    font-size: 0.9rem;
    transition: var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.session-limit-select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(128, 36, 51, 0.1);
}

.session-summary-badge {
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.session-summary-badge i {
    color: var(--primary-color);
    font-size: 1rem;
}

.session-summary-badge span {
    color: var(--text-color);
    font-weight: 500;
}

.session-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(128, 36, 51, 0.03);
    border-radius: 4px;
    border-left: 2px solid var(--primary-color);
}

/* Dark mode support */
body.dark-mode .session-settings-card {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

body.dark-mode .session-settings-header i {
    background: rgba(199, 123, 133, 0.1);
}

body.dark-mode .session-settings-header h4 {
    color: var(--dark-text-primary);
}

body.dark-mode .session-select-container label {
    color: var(--dark-text-primary);
}

body.dark-mode .session-limit-select {
    background: var(--dark-bg-input);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .session-limit-select:focus {
    border-color: var(--dark-primary);
    box-shadow: 0 0 0 2px rgba(199, 123, 133, 0.15);
}

body.dark-mode .session-summary-badge {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

body.dark-mode .session-summary-badge span {
    color: var(--dark-text-primary);
}

body.dark-mode .session-hint {
    color: var(--dark-text-secondary);
    background: rgba(199, 123, 133, 0.05);
    border-left-color: var(--dark-primary);
}

/* Responsive design */
@media (max-width: 768px) {
    .session-controls-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .session-select-container {
        min-width: auto;
    }
    
    .session-settings-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .session-settings-header {
        gap: 10px;
    }
    
    .session-settings-header i {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }
    
    .session-settings-header h4 {
        font-size: 1rem;
    }
}



/* ===================== */
/* PULSANTE GESTIONE FLASHCARD */
/* ===================== */

.management-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
    font-size: 1.1rem;
}

.management-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* ===================== */
/* MODAL GESTIONE FLASHCARD */
/* ===================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.welcome-modal-open {
    overflow: hidden;
}

.welcome-modal .modal-container {
    max-width: 700px;
    background: radial-gradient(140% 180% at 12% -8%, #ffffff, #fbf6f7);
}

.welcome-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.welcome-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    padding: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.welcome-logo.is-launching {
    opacity: 0.35;
    transform: scale(0.9);
    filter: drop-shadow(0 0 12px rgba(128,36,51,0.35));
}

.welcome-owl-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12050;
    pointer-events: none;
    background:
        radial-gradient(85% 85% at 50% 50%, rgba(255,255,255,0.4), rgba(255,255,255,0) 70%),
        rgba(0,0,0,0.25);
}

.welcome-owl-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 30%, rgba(128,36,51,0.08), transparent 65%);
    pointer-events: none;
}

.welcome-owl-stage {
    position: relative;
    width: min(520px, 92vw);
    height: min(520px, 86vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-signature-root {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translate(-50%, 6%);
    width: min(600px, 94vw);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.22));
    z-index: 2;
}

.welcome-signature-root.is-visible {
    opacity: 1;
    transform: translate(-50%, 18px);
}

.welcome-signature-root.is-fading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.welcome-owl-big {
    --owl-offset-x: 0px;
    --owl-offset-y: 0px;
    --owl-start-scale: 0.9;
    --owl-pop-scale: 1.36;
    --owl-flight-return-scale: 1.24;
    --owl-hold-scale: 1.18;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    max-width: 90vw;
    height: auto;
    transform: translate(calc(-50% + var(--owl-offset-x)), calc(-50% + var(--owl-offset-y))) scale(var(--owl-start-scale));
    filter: drop-shadow(0 28px 48px rgba(0,0,0,0.18));
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.welcome-owl-big.is-flight {
    animation: welcomeOwlFullscreen 2.2s ease-in-out forwards;
}

.welcome-owl-big.is-holding {
    animation: welcomeOwlHold 2.8s ease forwards;
}

.welcome-owl-big.is-fading {
    animation: welcomeOwlReturn 0.62s ease forwards;
}

.welcome-owl-big::after {
    content: '';
    position: absolute;
    width: 42px;
    height: 18px;
    background: linear-gradient(180deg, rgba(128,36,51,0.95), rgba(92,26,38,0.95));
    border-radius: 50%;
    top: 46%;
    left: 68%;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.18) rotate(-6deg);
    transform-origin: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.welcome-owl-big.is-flight::after {
    animation: welcomeOwlBigWink 1.5s ease-in-out 0.18s forwards;
}

@keyframes welcomeOwlFullscreen {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--owl-offset-x)), calc(-50% + var(--owl-offset-y))) scale(var(--owl-start-scale)) rotate(0deg);
    }
    14% {
        opacity: 1;
        transform: translate(calc(-50% + var(--owl-offset-x)), calc(-50% + var(--owl-offset-y))) scale(var(--owl-pop-scale)) rotate(-5deg);
    }
    36% {
        transform: translate(-50%, -50%) scale(3.4) rotate(3deg);
    }
    56% {
        transform: translate(-50%, -50%) scale(3.8) rotate(-1deg);
    }
    78% {
        transform: translate(-50%, -50%) scale(var(--owl-flight-return-scale)) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--owl-flight-return-scale)) rotate(0deg);
    }
}

@keyframes welcomeOwlHold {
    0% {
        opacity: 1;
        transform: translate(-50%, -56%) scale(var(--owl-hold-scale));
    }
    24% {
        transform: translate(-50%, -57%) scale(calc(var(--owl-hold-scale) * 1.04));
    }
    68% {
        transform: translate(-50%, -55%) scale(var(--owl-hold-scale));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(calc(var(--owl-hold-scale) * 0.98));
    }
}

@keyframes welcomeOwlReturn {
    0% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(calc(var(--owl-hold-scale) * 0.98));
    }
    36% {
        opacity: 0.94;
        transform: translate(-50%, -54%) scale(calc(var(--owl-hold-scale) * 0.84));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -55%) scale(calc(var(--owl-hold-scale) * 0.7));
    }
}

@keyframes welcomeOwlBigWink {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.18) rotate(-6deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(1.1) rotate(-5deg);
    }
    52% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(0.26) rotate(-3deg);
    }
    78% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scaleY(0.62) rotate(-4deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.08) rotate(-2deg);
    }
}

.welcome-modal.is-fading-out .modal-container,
.welcome-modal .modal-container.is-fading-out {
    opacity: 0;
    transform: translateY(-18px) scale(0.96);
    transition: opacity 0.28s ease, transform 0.3s ease;
    pointer-events: none;
}

.welcome-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #802433;
    perspective: 900px;
}

.welcome-signature__text {
    position: relative;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    align-items: center;
    column-gap: 6px;
    font-family: 'Pacifico', 'Segoe Script', 'Bradley Hand', cursive;
    font-size: clamp(52px, 8vw, 84px);
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #802433;
    background: none;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.14);
    -webkit-text-fill-color: currentColor;
    text-shadow:
        0 1px 0 #fff7f9,
        0 2px 4px rgba(0,0,0,0.12),
        0 5px 12px rgba(0,0,0,0.14);
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.16));
    --signature-progress: 0;
}

.welcome-signature__text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 12px;
    bottom: -8px;
    height: 2px;
    background: linear-gradient(90deg, rgba(128,36,51,0.56), rgba(128,36,51,0.16));
    transform-origin: left;
    transform: scaleX(var(--signature-progress));
    opacity: calc(0.35 + var(--signature-progress) * 0.65);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.welcome-signature__reveal {
    display: inline-block;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    color: #802433;
    background: none;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.14);
}

.welcome-signature__ghost {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
}

.welcome-signature__pen {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-12px, -45%) rotate(-12deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s linear;
    transform-style: preserve-3d;
}

.welcome-signature__pen-img {
    width: clamp(90px, 12vw, 138px);
    height: auto;
    filter:
        drop-shadow(0 5px 14px rgba(0,0,0,0.28))
        drop-shadow(0 1px 0 rgba(255,255,255,0.32));
}

.welcome-signature__letter {
    position: relative;
    display: inline-block;
    min-width: 12px;
    letter-spacing: 3px;
}

.welcome-signature__static {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    color: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.welcome-eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: #ffe6ed;
    opacity: 0.9;
}

.welcome-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 1.25rem 1.25rem 0.5rem;
    color: #0f182c;
}

.welcome-modal-body h4 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--primary-color);
    display: flex;
    gap: 8px;
    align-items: center;
}

.welcome-modal-body p {
    margin: 0;
    line-height: 1.6;
}

.welcome-section ul {
    margin: 6px 0 0;
    padding-left: 18px;
    line-height: 1.5;
}

.welcome-section ul li {
    margin-bottom: 6px;
}

.welcome-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.welcome-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.welcome-footer-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    font-weight: 600;
}

.welcome-modal .pill-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(128,36,51,0.25);
}

.welcome-modal .pill-btn.primary:disabled {
    background: #c7c7c7;
    border-color: #c7c7c7;
    color: #f4f4f4;
    box-shadow: none;
    cursor: not-allowed;
}

.welcome-modal .pill-btn.secondary-btn {
    background: rgba(128,36,51,0.08);
    color: var(--primary-color);
    border: 1px solid rgba(128,36,51,0.16);
}

@media (max-width: 640px) {
    .welcome-modal .modal-container {
        margin: 0.5rem;
    }
    .welcome-modal-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.dark-mode .welcome-modal .modal-container {
    background: radial-gradient(130% 180% at 12% -8%, #1c1d22, #121317);
    border: 1px solid rgba(255,255,255,0.06);
}

body.dark-mode .welcome-modal-body {
    color: #f0f2f7;
}

body.dark-mode .welcome-modal-body h4 {
    color: #ffb3c4;
}

body.dark-mode .welcome-modal .pill-btn.secondary-btn {
    background: rgba(255,179,196,0.08);
    color: #ffdbe6;
    border-color: rgba(255,179,196,0.22);
}

body.dark-mode .welcome-modal .pill-btn.primary:disabled {
    background: #4a4a4a;
    border-color: #4a4a4a;
    color: #dcdcdc;
}

.flashcard-reset-modal.modal-overlay {
    z-index: 11000; /* sopra overlay streak */
}

.flashcard-delete-pop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    padding: 12px;
}

.flashcard-delete-pop .glossary-clear-pop {
    position: relative;
    top: auto;
    right: auto;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
}

body.dark-mode .flashcard-delete-pop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-container {
    position: relative;
    background: radial-gradient(140% 180% at 16% -10%, #ffffff, #fafafa);
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.06);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 22px 56px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.12);
    animation: modalSlideIn 0.28s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.large-modal {
    max-width: 700px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--medium-gray);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.modal-header h3 {
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.modal-header__titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.close-modal-btn {
    background: rgba(255,255,255,.12);
    border: none;
    font-size: 1.05rem;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
}

.close-modal-btn:hover {
    background: rgba(255,255,255,.22);
    transform: translateY(-1px);
}

.modal-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}

.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: #f0f2f5; }
.modal-body::-webkit-scrollbar-thumb { background: #b0b6bf; border-radius: 8px; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--medium-gray);
    background: linear-gradient(180deg, #ffffff, #fafafa);
}

/* Popup reset flashcards */
.flashcard-reset-modal .modal-container {
    max-width: 640px;
    background: radial-gradient(120% 180% at 18% -10%, #ffffff, #f7f3f5);
    border: 1px solid rgba(128, 36, 51, 0.08);
}

.flashcard-reset-body {
    display: flex;
    gap: 16px;
    align-items: center;
}

.flashcard-reset-card .reset-illustration {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    display: grid;
    place-items: center;
}

.flashcard-reset-card .reset-icon-glow {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: radial-gradient(circle at 50% 45%, rgba(255, 189, 200, 0.5), rgba(255, 255, 255, 0));
    filter: blur(2px);
}

.flashcard-reset-card .reset-icon-main {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #f7747b, #a81d32);
    color: #fff;
    box-shadow: 0 18px 38px rgba(168, 29, 50, 0.35), inset 0 1px 0 rgba(255,255,255,0.55);
    font-size: 1.6rem;
}

.flashcard-reset-card .reset-copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flashcard-reset-card .reset-lead {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f1f2b;
}

.flashcard-reset-card .reset-text {
    margin: 0;
    color: #434757;
    line-height: 1.5;
}

.flashcard-reset-card .reset-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.flashcard-reset-card .reset-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
}

.flashcard-reset-card .reset-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(128, 36, 51, 0.06);
    border: 1px solid rgba(128, 36, 51, 0.12);
    color: #292a35;
}

.flashcard-reset-card .reset-list i {
    color: #a81d32;
}

.flashcard-reset-card .primary-btn.danger {
    background: linear-gradient(135deg, #f5576c, #a81d32);
    box-shadow: 0 14px 30px rgba(168, 29, 50, 0.35);
    color: #fff;
}

.flashcard-reset-card .primary-btn.danger:hover {
    background: linear-gradient(135deg, #ff6b81, #c62841);
    transform: translateY(-1px);
}

.flashcard-reset-card .primary-btn.danger:active {
    transform: translateY(0);
}

.flashcard-reset-card .modal-footer {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-top-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.flashcard-reset-card .modal-footer .secondary-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.flashcard-reset-card .modal-footer .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .flashcard-reset-modal .modal-container {
    background: radial-gradient(120% 180% at 18% -10%, rgba(27, 28, 33, 0.95), rgba(14, 14, 18, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8e8ed;
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.65);
}

body.dark-mode .flashcard-reset-card .modal-footer {
    background: linear-gradient(135deg, #3a1018, #0e0e12);
    border-top-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .flashcard-reset-card .modal-footer .secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark-mode .flashcard-reset-card .reset-lead {
    color: #f9f9fb;
}

body.dark-mode .flashcard-reset-card .reset-text {
    color: #cfd1d8;
}

body.dark-mode .flashcard-reset-card .reset-list li {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f1f4;
}

body.dark-mode .flashcard-reset-card .reset-list i {
    color: #ff9aae;
}

body.dark-mode .flashcard-reset-card .primary-btn.danger {
    box-shadow: 0 14px 30px rgba(168, 29, 50, 0.45);
}

@media (max-width: 640px) {
    .flashcard-reset-body {
        flex-direction: column;
        text-align: center;
    }

    .flashcard-reset-card .reset-illustration {
        width: 100%;
    }

    .flashcard-reset-card .reset-list li {
        justify-content: center;
    }
}

/* ===================== */
/* FORM AGGIUNTA/MODIFICA FLASHCARD */
/* ===================== */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--secondary-color);
}

.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: var(--transition);
    font-size: 1rem;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(128, 36, 51, 0.2);
}

/* Tema dedicato al modal "Aggiungi flashcard" */
#add-flashcard-modal .modal-container {
    background: radial-gradient(140% 180% at 16% -10%, #fff, rgba(128, 36, 51, 0.06));
    border-color: rgba(128, 36, 51, 0.14);
}

#add-flashcard-modal .modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

#add-flashcard-modal .modal-body {
    color: var(--primary-dark);
}

#add-flashcard-modal .form-group label {
    color: var(--primary-dark);
}

#add-flashcard-modal .form-textarea {
    background: #fff;
    border-color: rgba(128, 36, 51, 0.2);
    color: var(--text-color);
    box-shadow: inset 0 1px 0 rgba(128, 36, 51, 0.04);
}

#add-flashcard-modal .form-textarea::placeholder {
    color: rgba(128, 36, 51, 0.55);
}

#add-flashcard-modal .modal-footer {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-top-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

#add-flashcard-modal .modal-footer .secondary-btn {
    background: #fff;
    color: var(--primary-color);
    border-color: rgba(128, 36, 51, 0.25);
}

#add-flashcard-modal .modal-footer .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
    border-color: rgba(128, 36, 51, 0.32);
}

body.dark-mode #add-flashcard-modal .modal-container {
    background: radial-gradient(130% 190% at 18% -8%, rgba(36, 37, 41, 0.98), rgba(14, 14, 18, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
    color: #ececec;
}

body.dark-mode #add-flashcard-modal .modal-header {
    background: linear-gradient(135deg, #5c1a26, #3a1018);
}

body.dark-mode #add-flashcard-modal .form-group label {
    color: #ffdacf;
}

body.dark-mode #add-flashcard-modal .form-textarea {
    background: #0f1012;
    border: 1px solid #2c2f36;
    color: #f0f0f0;
}

body.dark-mode #add-flashcard-modal .form-textarea::placeholder {
    color: #8a8f99;
}

body.dark-mode #add-flashcard-modal .modal-footer {
    background: linear-gradient(135deg, #5c1a26, #3a1018);
    border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode #add-flashcard-modal .modal-footer .secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Colori dedicati al modal gestione flashcard */
#manage-flashcards-modal .modal-footer {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-top-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

#manage-flashcards-modal .modal-footer .secondary-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

#manage-flashcards-modal .modal-footer .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#manage-flashcards-modal .modal-container.large-modal {
    background: radial-gradient(140% 180% at 16% -10%, #fffafc, #f5edf1);
    border: 1px solid rgba(128, 36, 51, 0.1);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
}

/* ===================== */
/* LISTA FLASHCARD UTENTE */
/* ===================== */

.user-flashcards-section,
.default-flashcards-section {
    margin-bottom: 2rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.small-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.small-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.user-flashcards-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.user-flashcard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff, #f7f8fa);
    border-radius: 14px;
    margin-bottom: 0.75rem;
    transition: var(--transition);
    border: 1px solid var(--medium-gray);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.user-flashcard-item:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

.flashcard-preview {
    flex: 1;
}

.preview-front,
.preview-back {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.preview-front strong,
.preview-back strong {
    color: var(--primary-color);
}

.flashcard-actions {
    display: flex;
    gap: 0.5rem;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.edit-btn {
    background: rgba(128, 36, 51, 0.1);
    color: var(--primary-color);
}

.edit-btn:hover {
    background: var(--primary-color);
    color: white;
}

.delete-btn {
    background: rgba(210, 4, 4, 0.1);
    color: rgba(210, 4, 4, 0.91);
}

.delete-btn:hover {
    background: rgba(210, 4, 4, 0.91);
    color: white;
}

/* ===================== */
/* STATO VUOTO */
/* ===================== */

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    color: var(--primary-color);
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* ===================== */
/* SEZIONE FLASHCARD PREDEFINITE */
/* ===================== */

.default-cards-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #e7f3ff;
    border-radius: var(--border-radius);
    color: var(--dark-color);
    border-left: 4px solid var(--info-color);
}

.info-box i {
    color: var(--info-color);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.info-box p {
    margin: 0;
    font-size: 0.9rem;
}

/* ===================== */
/* BOTTONI PRIMARI E SECONDARI */
/* ===================== */

.primary-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.secondary-btn {
    background: #FFFFff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.secondary-btn:hover {
    background: var(--primary-color);
    color: white;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media (max-width: 768px) {
    .modal-container {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .section-header h4 {
        margin-bottom: 0.5rem;
    }
    
    .user-flashcard-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .flashcard-actions {
        align-self: flex-end;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-footer button {
        width: 100%;
    }
}







/* ===================== */
/* QUIZ 3D MODERNO - INTERFACCIA MIGLIORATA */
/* ===================== */

/* Container principale con prospettiva 3D */
.quiz-content-3d {
    perspective: 1500px;
    transform-style: preserve-3d;
    min-height: 550px;
    position: relative;
    background: transparent;
    border-radius: 20px;
    overflow: visible;
    padding: 20px;
}

/* Card domanda con effetto 3D pulito */
.quiz-question-3d {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(128, 36, 51, 0.1);
}

/* Stati animazione domande - Effetto carta che si volta */
.quiz-question-3d.current {
    transform: rotateY(0deg) translateZ(0) scale(1);
    opacity: 1;
    z-index: 3;
    animation: cardFlipIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-question-3d.next {
    transform: rotateY(90deg) translateZ(100px) scale(0.95);
    opacity: 0;
    z-index: 1;
}

.quiz-question-3d.leaving {
    transform: rotateY(-90deg) translateZ(-100px) scale(0.9);
    opacity: 0;
    animation: cardFlipOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardFlipIn {
    0% {
        transform: rotateY(90deg) translateZ(100px) scale(0.95);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg) translateZ(0) scale(1);
        opacity: 1;
    }
}

@keyframes cardFlipOut {
    0% {
        transform: rotateY(0deg) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: rotateY(-90deg) translateZ(-100px) scale(0.9);
        opacity: 0;
    }
}

/* Testo domanda stilizzato */
.quiz-question-3d .question-text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
    transform: translateZ(30px);
    padding: 20px 25px;
    border-radius: 15px;
    background: linear-gradient(135deg, 
                rgba(128, 36, 51, 0.03) 0%, 
                rgba(128, 36, 51, 0.06) 100%);
    border-left: 4px solid var(--primary-color);
}

/* Container immagine */
.quiz-question-3d .image-container {
    transform: translateZ(25px);
    margin: 20px 0;
    text-align: center;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.quiz-question-3d .image-container:hover {
    transform: translateZ(35px) scale(1.02);
}

.quiz-question-3d .question-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    transition: all 0.5s ease;
}

/* PULSANTI RISPOSTA CON EFFETTI 3D PULITI */
.quiz-question-3d .answer-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
    transform: translateZ(20px);
}

.answer-btn {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    color: var(--text-color);
    border: 1px solid rgba(15, 23, 42, 0.12);
    padding: 20px 25px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    min-height: 70px;
    box-shadow: var(--shadow-card-soft);
}

.answer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.06),
                transparent);
    transition: left 0.6s ease;
}

.answer-btn:hover {
    border-color: var(--primary-color);
    background: linear-gradient(145deg, #f6f7fb 0%, #eceef3 100%);
    /* Evita piccoli spostamenti verticali che causano flicker sul bordo */
    transform: translateZ(15px) scale(1.01);
    box-shadow: var(--shadow-card-strong);
}

.answer-btn:hover::before {
    left: 100%;
}

.answer-btn .answer-text {
    flex: 1;
    font-weight: 500;
    line-height: 1.5;
    z-index: 2;
    position: relative;
}

.answer-btn .answer-image {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    margin: 5px 0;
}

/* Stati risposta */
.answer-btn.correct {
    border-color: #27ae60;
    background: linear-gradient(145deg, #d6f2e1 0%, #aee5c8 100%);
    color: var(--text-color);
    transform: translateZ(20px) scale(1.02);
    box-shadow: 0 10px 24px rgba(39, 174, 96, 0.35);
    animation: correctPulse 0.6s ease;
}

.answer-btn.incorrect {
    border-color: #e74c3c;
    background: linear-gradient(145deg, #ffe0de 0%, #ffb7b3 100%);
    color: var(--text-color);
    transform: translateZ(20px) scale(1.02);
    box-shadow: 0 10px 24px rgba(231, 76, 60, 0.35);
    animation: incorrectShake 0.5s ease;
}

.answer-btn.correct:hover,
.answer-btn.correct:focus {
    background: linear-gradient(145deg, #c9efd8 0%, #9edebc 100%);
    color: var(--text-color);
}

.answer-btn.incorrect:hover,
.answer-btn.incorrect:focus {
    background: linear-gradient(145deg, #ffd1ce 0%, #ffa5a1 100%);
    color: var(--text-color);
}

@keyframes correctPulse {
    0%, 100% {
        transform: translateZ(20px) scale(1.02);
    }
    50% {
        transform: translateZ(25px) scale(1.05);
    }
}

@keyframes incorrectShake {
    0%, 100% {
        transform: translateX(0) translateZ(20px) scale(1.02);
    }
    25% {
        transform: translateX(-6px) translateZ(20px) scale(1.02);
    }
    75% {
        transform: translateX(6px) translateZ(20px) scale(1.02);
    }
}

/* BARRA PROGRESSO ROSSA */
.quiz-progress {
    flex: 1;
    max-width: 65%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    transform: translateZ(15px);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
                #802433 0%, 
                #a8324a 50%,
                #802433 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    background-size: 200% 100%;
    animation: progressFlow 2s linear infinite;
}

@keyframes progressFlow {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent);
    animation: progressShine 2s infinite;
    border-radius: 10px;
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

#progress-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* TIMER E PUNTEGGIO */
.quiz-timer,
.quiz-score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    background: transparent;
    padding: 0;
    transform: translateZ(20px);
    transition: all 0.3s ease;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.quiz-timer i {
    font-size: 1.3rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.quiz-score i {
    font-size: 1.3rem;
    color: #FFD700;
    filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.5));
    animation: starGlow 2s ease-in-out infinite;
}

@keyframes starGlow {
    0%, 100% {
        filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 2px 10px rgba(255, 215, 0, 0.8));
        transform: scale(1.08);
    }
}

#current-score,
#time-remaining {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Animazione aggiornamento punteggio */
.quiz-score.score-update {
    animation: scoreUpdateBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scoreUpdateBounce {
    0%, 100% {
        transform: translateZ(20px) scale(1);
    }
    50% {
        transform: translateZ(20px) scale(1.15);
    }
}

/* PULSANTE AVANTI - ROSSO E VISIBILE SOLO DOPO LA RISPOSTA */
#next-btn {
    background: linear-gradient(135deg, #802433 0%, #a8324a 100%);
    color: white;
    border: none;
    padding: 16px 35px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateZ(25px);
    box-shadow: 0 8px 20px rgba(128, 36, 51, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0) scale(0.8);
}

/* Pulsante visibile dopo la risposta */
#next-btn:not(:disabled) {
    opacity: 1;
    visibility: visible;
    transform: translateZ(25px) scale(1);
    animation: buttonAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonAppear {
    0% {
        opacity: 0;
        transform: translateZ(0) scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateZ(25px) scale(1) translateY(0);
    }
}

#next-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.3), 
                transparent);
    transition: left 0.6s ease;
}

#next-btn:not(:disabled):hover {
    transform: translateZ(35px) translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(128, 36, 51, 0.4);
    background: linear-gradient(135deg, #a8324a 0%, #802433 100%);
}

#next-btn:not(:disabled):hover::before {
    left: 100%;
}

#next-btn:not(:disabled):active {
    transform: translateZ(30px) translateY(-1px) scale(1.02);
}

#next-btn:disabled {
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0) scale(0.8);
    cursor: not-allowed;
}

/* PULSANTE INDIETRO 3D - STILE DINAMICO */
.quiz-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 20px;
    padding: 0 10px;
}

/* Pulsante freccia indietro con forma circolare 3D */
#back-to-dashboard-btn2,
#back-btn,
.back-arrow-btn,
button.back-arrow-btn {
    min-width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(128, 36, 51, 0.2);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 600;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateZ(25px);
    box-shadow: 0 8px 25px rgba(128, 36, 51, 0.2),
                inset 0 1px 3px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    transform-style: preserve-3d;
}

/* Effetto glow dietro il pulsante */
#back-to-dashboard-btn2::before,
#back-btn::before,
.back-arrow-btn::before,
button.back-arrow-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(128, 36, 51, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.5s ease;
    border-radius: 50%;
    z-index: -1;
}

/* Effetto 3D rialzato */
#back-to-dashboard-btn2::after,
#back-btn::after,
.back-arrow-btn::after,
button.back-arrow-btn::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: radial-gradient(circle at 30% 30%, 
                rgba(255, 255, 255, 0.8) 0%, 
                transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Hover state con espansione 3D */
#back-to-dashboard-btn2:hover,
#back-btn:hover,
.back-arrow-btn:hover,
button.back-arrow-btn:hover {
    transform: translateZ(40px) scale(1.1);
    box-shadow: 0 15px 40px rgba(128, 36, 51, 0.35),
                inset 0 2px 5px rgba(255, 255, 255, 0.9);
    border-color: var(--primary-color);
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
}

#back-to-dashboard-btn2:hover::before,
#back-btn:hover::before,
.back-arrow-btn:hover::before,
button.back-arrow-btn:hover::before {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
}

/* Click state con effetto pressione 3D */
#back-to-dashboard-btn2:active,
#back-btn:active,
.back-arrow-btn:active,
button.back-arrow-btn:active {
    transform: translateZ(20px) scale(1.05);
    box-shadow: 0 5px 15px rgba(128, 36, 51, 0.25),
                inset 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Icona freccia con animazione fluida e z-index */
#back-to-dashboard-btn2 i,
#back-btn i,
.back-arrow-btn i,
button.back-arrow-btn i {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    position: relative;
    z-index: 2;
}

#back-to-dashboard-btn2:hover i,
#back-btn:hover i,
.back-arrow-btn:hover i,
button.back-arrow-btn:hover i {
    animation: arrowPulse3D 0.8s ease-in-out infinite;
}

@keyframes arrowPulse3D {
    0%, 100% {
        transform: translateX(0) translateZ(5px) scale(1);
    }
    50% {
        transform: translateX(-5px) translateZ(8px) scale(1.1);
    }
}

/* Animazione entrata iniziale con rotazione 3D */
#back-to-dashboard-btn2,
#back-btn,
.back-arrow-btn,
button.back-arrow-btn {
    animation: backButton3DAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes backButton3DAppear {
    0% {
        opacity: 0;
        transform: translateZ(0) rotateY(-180deg) scale(0.5);
    }
    60% {
        transform: translateZ(30px) rotateY(20deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateZ(25px) rotateY(0deg) scale(1);
    }
}

/* HEADER DEL QUIZ */
.quiz-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .quiz-content-3d {
        perspective: 1200px;
        min-height: 480px;
        padding: 15px;
    }
    
    .quiz-question-3d {
        padding: 25px;
    }
    
    .quiz-progress {
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .quiz-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }
    
    .quiz-timer,
    .quiz-score {
        font-size: 1.1rem;
        gap: 8px;
    }
    
    .answer-btn {
        padding: 18px 20px;
        font-size: 1rem;
        min-height: 65px;
    }
    
    #next-btn,
    #whyBtn {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    #back-to-dashboard-btn2,
    #back-btn,
    .back-arrow-btn,
    button.back-arrow-btn {
        min-width: 55px;
        height: 55px;
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .quiz-content-3d {
        perspective: 1000px;
        min-height: 450px;
        padding: 10px;
    }
    
    .quiz-question-3d {
        padding: 20px;
    }
    
    .quiz-question-3d .question-text {
        font-size: 1.2rem;
        padding: 15px 18px;
    }
    
    .quiz-timer,
    .quiz-score {
        font-size: 1rem;
        gap: 8px;
    }
    
    .answer-btn {
        padding: 16px 18px;
        font-size: 0.95rem;
        min-height: 60px;
    }
    
    #next-btn,
    #whyBtn {
        padding: 12px 22px;
        font-size: 0.95rem;
    }
    
    .progress-bar {
        height: 6px;
    }
    
    #back-to-dashboard-btn2,
    #back-btn,
    .back-arrow-btn,
    button.back-arrow-btn {
        min-width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

/* Animazioni ingresso pulsanti risposta */
.answer-btn {
    animation: fadeInUp 0.4s ease backwards;
}

.answer-btn:nth-child(1) { animation-delay: 0.1s; }
.answer-btn:nth-child(2) { animation-delay: 0.2s; }
.answer-btn:nth-child(3) { animation-delay: 0.3s; }
.answer-btn:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(20px);
    }
}













/* ===================== */
/* REVISIONE COMPLETATA  MODALITÀ "IN SCADENZA" (due, user_due) */
/* Solo stile per il blocco #due-mode-rating e i suoi controlli  */
/* ===================== */

.rating-section {
  perspective: 1200px; /* abilita profondità 3D ai figli */
}

#due-mode-rating {
  /* viene mostrato/nascosto via JS: non toccare display */
  position: relative;
  margin: 18px auto 6px auto;
  max-width: 820px;
  padding: 24px 22px;
  border-radius: 18px;

  /* glass + 3D card coerente con palette */
  background:
    radial-gradient(120% 220% at 20% -10%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(128,36,51,0.08), rgba(128,36,51,0.02));
  border: 1px solid rgba(128,36,51,0.18);
  box-shadow:
    0 22px 38px rgba(0,0,0,0.12),
    0 2px 0 rgba(255,255,255,0.6) inset,
    0 -1px 18px rgba(128,36,51,0.12) inset;
  transform-style: preserve-3d;
  text-align: center;
}

#due-mode-rating::before {
  /* bordo luminoso dinamico */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 140deg,
    rgba(128,36,51,0.15),
    rgba(255,255,255,0) 35%,
    rgba(128,36,51,0.18),
    rgba(255,255,255,0) 70%,
    rgba(128,36,51,0.15)
  );
  filter: blur(10px);
  opacity: .7;
  pointer-events: none;
  transform: translateZ(-1px);
  animation: reviewGlow 6s linear infinite;
}

#due-mode-rating::after {
  /* riflesso superiore per effetto 3D */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 56px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events: none;
  transform: translateZ(8px);
}

@keyframes reviewGlow {
  0%   { opacity: .45; }
  50%  { opacity: .9; }
  100% { opacity: .45; }
}

/* titolo + testo d'aiuto, senza impattare altri flussi */
#rating-section #rating-hint-text {
  margin-top: 8px;
  color: var(--text-light);
  font-weight: 500;
}

/* Contenitore CTA "Avanti" in modalità scadenza */
#due-mode-rating .review-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translateZ(12px);
}

/* Pulsante Avanti: 3D, coerente con .primary-btn/.nav-btn */
#due-mode-rating .nav-btn,
#due-mode-rating .primary-btn,
#due-mode-rating button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 280px;
  padding: 14px 24px;
  border-radius: 14px;
  border: 0;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: var(--white);
  box-shadow:
    0 14px 30px rgba(128,36,51,0.35),
    0 6px 0 rgba(92,26,38,0.9);
  transform: translateZ(18px);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

#due-mode-rating .nav-btn:hover,
#due-mode-rating .primary-btn:hover,
#due-mode-rating button:hover {
  transform: translateY(-2px) translateZ(18px);
  box-shadow:
    0 18px 38px rgba(128,36,51,0.45),
    0 8px 0 rgba(92,26,38,0.9);
  filter: brightness(1.03);
}

#due-mode-rating .nav-btn:active,
#due-mode-rating .primary-btn:active,
#due-mode-rating button:active {
  transform: translateY(0) translateZ(18px);
  box-shadow:
    0 10px 20px rgba(128,36,51,0.35),
    0 3px 0 rgba(92,26,38,0.9);
}

#due-mode-rating .nav-btn:focus-visible,
#due-mode-rating .primary-btn:focus-visible,
#due-mode-rating button:focus-visible {
  outline: 3px solid rgba(128,36,51,0.35);
  outline-offset: 3px;
}

/* Iconcina celebrativa opzionale con pseudo-elemento */
#due-mode-rating .review-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  color: var(--white);
  box-shadow: 0 6px 16px rgba(128,36,51,0.25);
  transform: translateZ(16px);
}

/* micro-movimento del contenitore per dinamismo */
@media (hover:hover) {
  #due-mode-rating {
    animation: reviewFloat 7s ease-in-out infinite;
  }
  @keyframes reviewFloat {
    0%,100% { transform: translateZ(0) rotateX(0.6deg); }
    50%     { transform: translateZ(0) rotateX(0deg); }
  }
}

/* Responsive */
@media (max-width: 768px) {
  #due-mode-rating {
    padding: 18px 16px;
    border-radius: 16px;
    margin-top: 12px;
  }
  #due-mode-rating .nav-btn,
  #due-mode-rating .primary-btn,
  #due-mode-rating button {
    min-width: 240px;
    padding: 12px 18px;
    border-radius: 12px;
  }
}
/* FIX: rimuove l'orologio (pseudo-elemento ::before) nella revisione completa */
#due-mode-rating .rating-title::before,
#due-mode-rating .rate-title::before,
#due-mode-rating .rating-hint::before,
#due-mode-rating h4::before,
#due-mode-rating [class*="title"]::before {
  content: none !important;
  display: none !important;
}





/* ===================== */
/* MODAL GUIDA MODERNO 3D (solo #modes-help-modal) */
/* ===================== */
#modes-help-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(135deg, var(--primary-dark) 0%, rgba(0,0,0,.88) 100%);
  backdrop-filter: blur(8px);
  animation: modesFadeIn .18s ease-out;
}

@keyframes modesFadeIn { from { opacity: 0 } to { opacity: 1 } }

#modes-help-modal .modal-container {
  position: relative;
  margin: 6vh auto;
  width: min(92%, 860px);
  border-radius: 22px;
  background: radial-gradient(140% 180% at 16% -10%, #ffffff, #fafafa);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 32px 70px rgba(0,0,0,.28),
    0 0 0 6px rgba(92,26,38,.08),
    0 -1px 18px rgba(128,36,51,.12) inset;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
}

#modes-help-modal .modal-container::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 140deg, rgba(128,36,51,.18), rgba(255,255,255,0) 35%, rgba(128,36,51,.2), rgba(255,255,255,0) 70%, rgba(128,36,51,.18));
  filter: blur(12px); opacity:.45; pointer-events:none; animation: reviewGlow 6s linear infinite;
}

#modes-help-modal .modal-header {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 18px 22px 16px 22px;
  border-bottom: 1px solid rgba(128,36,51,.15);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--white);
  border-radius: 22px 22px 0 0;
}

#modes-help-modal .modal-header h3{
  margin:0; display:flex; align-items:center; gap:10px; font-size:1.2rem; color: var(--white);
}

#modes-help-modal .close-modal-btn{
  background: transparent; border:0; width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--white);
  transition: transform .15s ease, background .2s ease;
}
#modes-help-modal .close-modal-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
#modes-help-modal .close-modal-btn:focus-visible{ outline:3px solid rgba(255,255,255,.5); outline-offset:3px; }

#modes-help-modal .modal-body{ padding: 18px 22px; display:grid; gap:18px; color: var(--primary-dark); flex:1 1 auto; overflow:auto; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; }
#modes-help-modal .modal-body::-webkit-scrollbar{ width: 10px; }
#modes-help-modal .modal-body::-webkit-scrollbar-track{ background: #f0f2f5; }
#modes-help-modal .modal-body::-webkit-scrollbar-thumb{ background: #b0b6bf; border-radius: 8px; }
#modes-help-modal .help-section h4{ margin:0 0 8px; color:var(--primary-color); font-size:1.05rem; }
#modes-help-modal .help-list{ margin:0; padding-left:18px; display:grid; gap:8px; color:var(--primary-dark); }
#modes-help-modal .help-list.compact{ gap:6px; }
#modes-help-modal .small-note{ color:var(--primary-color); font-size:.9rem; margin-top:6px; }
#modes-help-modal .grid-two-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
#modes-help-modal kbd{ background:#fff; border:1px solid rgba(128,36,51,.25); border-bottom-width:3px; padding:2px 6px; border-radius:6px; font-weight:700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
#modes-help-modal .modes-help-link{
  color: #8b1d2c;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#modes-help-modal .modes-help-link:hover{
  color: #a12536;
}

#modes-help-modal .modal-footer{ padding: 8px 22px 20px; display:flex; justify-content:center; }
#modes-help-modal .modal-footer .primary-btn{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  box-shadow: 0 14px 30px rgba(128,36,51,.35), 0 6px 0 rgba(92,26,38,.9);
  border-radius:14px; padding:13px 22px; transform: translateZ(14px);
}
#modes-help-modal .modal-footer .primary-btn:hover{ transform: translateY(-2px) translateZ(14px); box-shadow: 0 18px 38px rgba(128,36,51,.45), 0 8px 0 rgba(92,26,38,.9); }

@media (max-width: 768px){
  #modes-help-modal .modal-container{ margin: 4vh auto; width: 94%; }
  #modes-help-modal .grid-two-cols{ grid-template-columns: 1fr; }
}

/* ===================== */
/* GUDA BTN in header opzioni studio (scoped) */
/* ===================== */
.study-header .study-header-actions{ display:flex; justify-content:center; margin: 8px 0 0; }
.study-header .study-header-actions .management-btn{
  width:auto; height:auto; border-radius:12px; padding:10px 14px; gap:8px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--white); border: 0; box-shadow: 0 10px 20px rgba(128,36,51,.25);
  transform: translateZ(10px);
}
.study-header .study-header-actions .management-btn:hover{ transform: translateY(-2px) translateZ(10px); box-shadow: 0 12px 26px rgba(128,36,51,.35); }
.study-header .study-header-actions .management-btn:focus-visible{ outline:3px solid rgba(128,36,51,.35); outline-offset:3px; }

/* ===================== */
/* Rifiniture pulsante Avanti in modalità in scadenza */
/* ===================== */
#due-mode-rating #due-next-button{
  font-size: 1.05rem; letter-spacing:.2px;
}



/* =========================================================
   DARK MODE  FLASHCARDS ("LE TUE FLASHCARD" + CREAZIONE + FINE SESSIONE)
   ========================================================= */

/* Contenitore e header */
body.dark-mode .flashcards-screen{background:linear-gradient(135deg,#0f1012 0%,#17181b 100%);} 
body.dark-mode .flashcards-container{background:#0f1012;}
body.dark-mode .flashcards-screen .flashcards-header {
    background: linear-gradient(135deg, #1d1f24, #141518);
    color: #fff;
    padding: 10px 20px;
    min-height: 56px;
    gap: clamp(10px, 1.8vw, 18px);
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
    backdrop-filter: saturate(150%) blur(10px);
}
body.dark-mode .flashcards-screen .header-title h3{color:#fafafa;}
body.dark-mode .flashcards-screen .stat-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;}
body.dark-mode .flashcards-screen .management-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;}
body.dark-mode .flashcards-screen .management-btn:hover{background:rgba(255,255,255,.12);} 

/* "Le tue flashcard" e lista modalità */
body.dark-mode .study-settings-panel{background:radial-gradient(100% 180% at 10% 0%,rgba(36,37,41,.95),rgba(18,19,22,.95));border:1px solid rgba(255,255,255,.06);box-shadow:0 22px 55px rgba(0,0,0,.5);} 
body.dark-mode .study-settings-summary{background:rgba(255,255,255,.06);color:#e7e7e7;}
body.dark-mode .study-settings-summary i{color:var(--primary-light);} 

body.dark-mode .study-option-card{background:linear-gradient(180deg,#1a1c20,#121316);border-color:rgba(255,255,255,.08);box-shadow:0 16px 40px rgba(0,0,0,.45);} 
body.dark-mode .study-option-card::before{background:linear-gradient(180deg,rgba(128,36,51,.65),rgba(128,36,51,.25));}
body.dark-mode .card-icon{background:linear-gradient(135deg, var(--primary-color), var(--primary-dark)); box-shadow:0 10px 22px rgba(128,36,51,.35);} 
body.dark-mode .card-badge{background:var(--primary-dark);} 
body.dark-mode .card-content h4{color:#f3f3f3;} 
body.dark-mode .card-progress .progress-bar{background:rgba(255,255,255,.12);} 
body.dark-mode .card-progress span{color:#e0e0e0;} 

/* FLASHCARD singola */
body.dark-mode .flashcard-front{background:linear-gradient(135deg,#5c1a26,#3a1018);} 
body.dark-mode .flashcard-back{background:linear-gradient(135deg,#7a2232,#5c1a26);} 
body.dark-mode .flashcard-front h3, 
body.dark-mode .flashcard-back p{color:#fff;} 

/* Sezione valutazione */
body.dark-mode .rating-section {
    background: linear-gradient(180deg, rgba(18, 18, 22, 0.96), rgba(10, 10, 14, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65);
}

body.dark-mode .rating-section::before {
    background:
        radial-gradient(circle at 20% -10%, rgba(128, 36, 51, 0.32), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(168, 50, 74, 0.24), transparent 45%);
    opacity: 0.65;
}

body.dark-mode #rating-section .rate-btn {
    background: linear-gradient(150deg, rgba(26, 26, 32, 0.98), rgba(14, 14, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 10px 24px var(--rate-shadow);
    color: #f1f1f1;
}

body.dark-mode #rating-section .rate-btn:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.7), 0 16px 32px var(--rate-shadow);
}

body.dark-mode #rating-section .rate-btn .rate-title {
    color: #f7f7f7;
}

body.dark-mode #rating-section .rate-btn .rate-interval {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode #rating-section .rate-btn .rate-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body.dark-mode #rating-section .rate-btn .rate-icon {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

body.dark-mode #rating-section .rate-btn::before {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
}

body.dark-mode #rating-section .rate-btn::after {
    background: rgba(255, 255, 255, 0.3);
}

body.dark-mode #rating-section .rate-btn.danger .rate-title,
body.dark-mode #rating-section .rate-btn.danger .rate-interval {
    color: #ffb4b4;
}

/* Navigazione */
body.dark-mode .nav-btn{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));}
body.dark-mode .nav-btn:hover{box-shadow:0 8px 22px rgba(128,36,51,.45);} 

/* ===================== CREAZIONE FLASHCARD (tendina/modale) ===================== */
/* Copre le modali usate nel sistema flashcard, senza dipendere da ID specifici */
body.dark-mode .flashcards-screen .modal-overlay{background:rgba(0,0,0,.7);backdrop-filter:blur(6px);} 
body.dark-mode .flashcards-screen .modal-container{background:radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 60px rgba(0,0,0,.6);color:#ececec;} 
body.dark-mode .flashcards-screen .modal-header{border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));} 
body.dark-mode .flashcards-screen .modal-header h3{color:#fafafa;} 
body.dark-mode .flashcards-screen .modal-body{color:#e0e0e0;} 
body.dark-mode .flashcards-screen .modal-footer{border-top:1px solid rgba(255,255,255,.06);} 

/* Campi form nella creazione */
body.dark-mode .flashcards-screen input[type="text"],
body.dark-mode .flashcards-screen textarea,
body.dark-mode .flashcards-screen select{background:#0f1012;border:1px solid #2c2f36;color:#f0f0f0;border-radius:12px;}
body.dark-mode .flashcards-screen input[type="text"]::placeholder,
body.dark-mode .flashcards-screen textarea::placeholder{color:#8a8f99;} 
body.dark-mode .flashcards-screen .primary-btn{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:0 12px 28px rgba(128,36,51,.35);} 
body.dark-mode .flashcards-screen .secondary-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);} 

/* ===================== FINE SESSIONE ===================== */
body.dark-mode .session-complete{background:transparent;} 
body.dark-mode .completion-content h2{color:#f7f7f7;} 
body.dark-mode .completion-content p{color:#c9c9c9;} 
body.dark-mode .session-summary{background:#15161a;border:1px solid rgba(255,255,255,.06);box-shadow:0 14px 34px rgba(0,0,0,.6);} 
body.dark-mode .summary-item i{background:#1b1d22;color:var(--primary-light);} 
body.dark-mode .summary-value{color:#ffdacf;} 
body.dark-mode .summary-label{color:#b8b8b8;} 
body.dark-mode .completion-actions .primary-btn{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));} 
body.dark-mode .completion-actions .secondary-btn{background:#15161a;color:#fff;border-color:rgba(255,255,255,.25);} 

/* Scrollbar interne in DM */
body.dark-mode .answer-scroll-container::-webkit-scrollbar-track{background:#0f1012;} 
body.dark-mode .answer-scroll-container::-webkit-scrollbar-thumb{background:#2b2f36;} 

/* Accessibilità */
@media (prefers-reduced-motion: reduce){
  body.dark-mode .study-option-card,
  body.dark-mode .rate-btn,
  body.dark-mode .nav-btn,
  body.dark-mode .modal-container{transition:none}
}
/* =========================================================
   DARK MODE  MODALE "LE TUE FLASHCARD" (gestione/creazione)
   Scope: solo dentro la schermata flashcards + dark-mode
   ========================================================= */

/* Overlay scuro coerente */
body.dark-mode .flashcards-screen [class*="modal"]:not(.menu-content):not(.sidebar-menu):not(.stats-panel) {
  color: #ececec;
}
body.dark-mode .flashcards-screen .modal-overlay,
body.dark-mode .flashcards-screen [class*="overlay"][class*="modal"] {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

/* Contenitore modale generico (copre: .modal, .modal-container, .modal-content, .custom-cards-modal, ecc.) */
body.dark-mode .flashcards-screen .modal,
body.dark-mode .flashcards-screen .modal-container,
body.dark-mode .flashcards-screen .modal-content,
body.dark-mode .flashcards-screen .custom-cards-modal,
body.dark-mode .flashcards-screen .manage-cards-modal,
body.dark-mode .flashcards-screen [class*="cards"][class*="modal"],
body.dark-mode .flashcards-screen [class*="modal-panel"],
body.dark-mode .flashcards-screen [role="dialog"] {
  background: radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.94));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 64px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  color: #f0f0f0;
}

/* Header modale */
body.dark-mode .flashcards-screen .modal-header,
body.dark-mode .flashcards-screen [class*="modal"] [class*="header"] {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.dark-mode .flashcards-screen .modal-header h3,
body.dark-mode .flashcards-screen .modal-header h2,
body.dark-mode .flashcards-screen [class*="modal"] h1,
body.dark-mode .flashcards-screen [class*="modal"] h2 {
  color:#fafafa;
}

/* Lista elementi card personalizzate */
body.dark-mode .flashcards-screen .user-flashcard-item,
body.dark-mode .flashcards-screen .custom-card-item,
body.dark-mode .flashcards-screen .flashcard-list-item,
body.dark-mode .flashcards-screen [class*="card-item"],
body.dark-mode .flashcards-screen [class*="flashcard-row"],
body.dark-mode .flashcards-screen [class*="flashcard-entry"] {
  background: #15161a;
  border: 1px solid #292c33;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  color: #e6e6e6;
}

/* Label D: / R: */
body.dark-mode .flashcards-screen [class*="card-item"] b,
body.dark-mode .flashcards-screen [class*="flashcard-entry"] b { color:#ffdacf; }

/* Icon button modifica/cancella */
body.dark-mode .flashcards-screen .icon-btn,
body.dark-mode .flashcards-screen .edit-btn,
body.dark-mode .flashcards-screen .delete-btn {
  background: rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
body.dark-mode .flashcards-screen .icon-btn:hover,
body.dark-mode .flashcards-screen .edit-btn:hover,
body.dark-mode .flashcards-screen .delete-btn:hover{ background: rgba(255,255,255,.14); }

/* Pulsanti primari nella modale (Aggiungi Nuova / Chiudi) */
body.dark-mode .flashcards-screen .modal .primary-btn,
body.dark-mode .flashcards-screen [class*="modal"] .primary-btn,
body.dark-mode .flashcards-screen [class*="modal"] .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color:#fff;
  border:0;
  box-shadow:0 14px 32px rgba(128,36,51,.35);
}
body.dark-mode .flashcards-screen [class*="modal"] .secondary-btn,
body.dark-mode .flashcards-screen [class*="modal"] .btn-outline {
  background: transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

/* Form creazione/edizione */
body.dark-mode .flashcards-screen [class*="modal"] input[type="text"],
body.dark-mode .flashcards-screen [class*="modal"] textarea,
body.dark-mode .flashcards-screen [class*="modal"] select {
  background:#0f1012; border:1px solid #2c2f36; color:#f0f0f0; border-radius:12px;
}
body.dark-mode .flashcards-screen [class*="modal"] input::placeholder,
body.dark-mode .flashcards-screen [class*="modal"] textarea::placeholder{ color:#8a8f99; }

/* Divider e footer */
body.dark-mode .flashcards-screen .modal-footer,
body.dark-mode .flashcards-screen [class*="modal"] [class*="footer"]{ border-top:1px solid rgba(255,255,255,.06); }

/* Micro-shadow per il pulsante "Aggiungi Nuova" in alto a destra */
body.dark-mode .flashcards-screen [class*="modal"] .add-card-btn,
body.dark-mode .flashcards-screen [class*="modal"] .btn-add-card{ box-shadow:0 14px 30px rgba(128,36,51,.35); }
/* =========================================================
   DARK MODE  MODALE GESTIONE "LE TUE FLASHCARD" (fuori da .flashcards-screen)
   Copre il caso in cui l'overlay è figlio diretto di <body> con id #manage-flashcards-modal
   ========================================================= */

/* Overlay */
body.dark-mode.flashcards-open #manage-flashcards-modal.modal-overlay{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}

/* Header / Body / Footer */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-header,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-body,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer{
  color:#f0f0f0;
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal-header{
  background: linear-gradient(135deg, #5c1a26, #3a1018);
  border-bottom:1px solid rgba(255,255,255,.18);
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal-body{
  background: radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.94));
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  color: #f9f9fb;
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer{
  background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.08);
}

/* Titolo */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-header h1,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-header h2,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-header h3{
  color:#fafafa;
}

/* Card elenco personalizzate */
body.dark-mode.flashcards-open #manage-flashcards-modal .user-flashcard-item,
body.dark-mode.flashcards-open #manage-flashcards-modal .custom-card-item,
body.dark-mode.flashcards-open #manage-flashcards-modal .flashcard-list-item,
body.dark-mode.flashcards-open #manage-flashcards-modal [class*="flashcard-row"],
body.dark-mode.flashcards-open #manage-flashcards-modal [class*="flashcard-entry"],
body.dark-mode.flashcards-open #manage-flashcards-modal .card-item{
  background:#15161a;
  border:1px solid #292c33;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  color:#e6e6e6;
}

/* Etichette D: / R: */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-body b{ color:#ffdacf; }

/* Pulsanti azione dentro le card */
body.dark-mode.flashcards-open #manage-flashcards-modal .icon-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .edit-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .delete-btn{
  background: rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
body.dark-mode.flashcards-open #manage-flashcards-modal .icon-btn:hover,
body.dark-mode.flashcards-open #manage-flashcards-modal .edit-btn:hover,
body.dark-mode.flashcards-open #manage-flashcards-modal .delete-btn:hover{
  background: rgba(255,255,255,.14);
}

/* Bottoni principali della modale */
body.dark-mode.flashcards-open #manage-flashcards-modal .primary-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .btn-primary{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color:#fff; border:0; box-shadow:0 14px 32px rgba(128,36,51,.35);
}
body.dark-mode.flashcards-open #manage-flashcards-modal .secondary-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .btn-outline{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25);
}

/* Campi input all'interno della modale */
body.dark-mode.flashcards-open #manage-flashcards-modal input[type="text"],
body.dark-mode.flashcards-open #manage-flashcards-modal textarea,
body.dark-mode.flashcards-open #manage-flashcards-modal select{
  background:#0f1012; border:1px solid #2c2f36; color:#f0f0f0; border-radius:12px;
}
body.dark-mode.flashcards-open #manage-flashcards-modal input::placeholder,
body.dark-mode.flashcards-open #manage-flashcards-modal textarea::placeholder{ color:#8a8f99; }
/* =============================================
   DARK MODE  FIX DEFINITIVO HEADER/FOOTER MODALE
   Target: modale gestione flashcard (#manage-flashcards-modal)
   ============================================= */

/* Contenitore modale */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container {
  background: radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.94)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: #f0f0f0 !important;
}

/* Header */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-header,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-header {
  background: linear-gradient(135deg, #5c1a26, #3a1018) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  color: #fafafa !important;
}
body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-header h1,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-header h2,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-header h3,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-header h1,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-header h2,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-header h3 {
  color: #fafafa !important;
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container .section-header h4,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container .modal-body p,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container .modal-body span,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container .modal-body label {
  color: #f9f9fb !important;
}

/* Footer */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-footer,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-footer {
  background: linear-gradient(135deg, #5c1a26, #3a1018) !important;
  border-top: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal > .modal-body,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container > .modal-body {
  background: radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.94)) !important;
  color: #f9f9fb !important;
}

body.dark-mode.flashcards-open #manage-flashcards-modal .modal-container.large-modal {
  background: radial-gradient(120% 180% at 20% -10%, rgba(36,37,41,.95), rgba(18,19,22,.94)) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Pulsante primario nel footer */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer .primary-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer .btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 32px rgba(128,36,51,.35) !important;
}

/* Pulsante secondario nel footer */
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer .secondary-btn,
body.dark-mode.flashcards-open #manage-flashcards-modal .modal-footer .btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}


/* ===== FAB: Termina sessione ===== */
.end-session-btn{
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 10002;
    display: none; /* mostrato via JS solo durante la sessione */
    align-items: center; gap: 10px;
    padding: 12px 16px;
    border: 0; border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color:#fff; font-weight: 800;
    box-shadow: 0 14px 34px rgba(128,36,51,.35), inset 0 1px 0 rgba(255,255,255,.25);
    cursor: pointer; transform: translateZ(0);
  }
  .end-session-btn i{ font-size: 18px; }
  .end-session-btn:hover{ transform: translateY(-1px); }
  .end-session-btn:active{ transform: translateY(0); }
  .end-session-btn:focus-visible{ outline: 3px solid rgba(128,36,51,.35); outline-offset: 2px; }
  
  body.dark-mode .end-session-btn{
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  }
/* ===================== */
/* FAB "Termina sessione" + STREAK POPUP (3D, coerente con brand) */
/* ===================== */

/* FAB: Termina sessione */
.end-session-btn{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 10020;
  display: none; /* mostrato via JS solo durante la sessione */
  align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color:#fff; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 14px 34px rgba(128,36,51,.35), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer; transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.end-session-btn i{ font-size: 18px; }
.end-session-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(128,36,51,.42); }
.end-session-btn:active{ transform: translateY(0); }
.end-session-btn:focus-visible{ outline: 3px solid rgba(128,36,51,.35); outline-offset: 2px; }

body.dark-mode .end-session-btn{
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===================== */
/* Slancio di Studio 3D */
/* ===================== */
.streak-overlay{
  position: fixed;
  inset: 0;
  padding: clamp(16px, 4vw, 36px);
  display: flex;
  /* In some viewports the sheet may be taller than the screen.
     Start from the top and let the overlay scroll so nothing gets cut. */
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 45%) rgba(10,10,15,.85);
  backdrop-filter: blur(18px) saturate(160%);
  z-index: 10030;
  animation: streakFadeIn .35s ease-out;
}
.streak-overlay::-webkit-scrollbar { display: none; }

@keyframes streakFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes streakCardReveal{
  0%{ transform: perspective(1400px) translateY(40px) scale(.95) rotateX(6deg); opacity:.6; }
  100%{ transform: perspective(1400px) translateY(0) scale(1) rotateX(0); opacity:1; }
}

.streak-sheet{
  width: min(960px, 100%);
  border-radius: 32px;
  padding: clamp(18px, 2.6vw, 32px);
  padding-bottom: 5px;
  background: linear-gradient(145deg,#ffffff,#f6f1f3);
  color: var(--secondary-color);
  box-shadow: 0 42px 90px rgba(18,12,33,.25), 0 20px 60px rgba(128,36,51,.18);
  border: 1px solid rgba(255,255,255,.45);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
  animation: streakCardReveal .45s ease forwards;
  /* Niente scroll interno: tutto deve stare nel container */
  max-height: none;
  overflow: visible;
}
.streak-sheet::-webkit-scrollbar { display: none; }

body.flashcards-open .streak-sheet {
  width: min(820px, 95vw);
  padding: clamp(18px, 2.6vw, 36px);
  padding-bottom: 5px;
  gap: clamp(10px, 2vw, 18px);
  border-radius: 28px;
}
body.flashcards-open .streak-sheet::before,
body.flashcards-open .streak-sheet::after {
  inset: clamp(4px, 0.9vw, 10px);
  border-radius: 24px;
}
.streak-sheet::before,
.streak-sheet::after{
  content:'';
  position:absolute;
  inset: clamp(6px,1vw,12px);
  border-radius: 28px;
  background: radial-gradient(circle at top,var(--primary-light) 0%,transparent 55%);
  opacity:.25;
  pointer-events:none;
  filter: blur(18px);
}
.streak-sheet::after{
  inset:auto 18% -8%; height:18%; width:64%;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.6), transparent 65%);
  opacity:.35;
}

body.dark-mode .streak-overlay{
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.05), transparent 55%),
    rgba(2, 2, 6, 0.85);
}
body.dark-mode .streak-sheet{
  background: linear-gradient(155deg,#181920,#0c0d11);
  color:#f5f5f7;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 48px 120px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.35);
}
body.dark-mode .streak-sheet::before{
  background: radial-gradient(circle at top, rgba(248,110,147,.35), transparent 60%);
  opacity:.35;
}

.streak-close{
  position:absolute;
  top: clamp(12px,1vw,18px);
  right: clamp(12px,1vw,18px);
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: none;
  background: rgba(255,255,255,.85);
  color: var(--primary-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.1rem;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  z-index:2;
}
.streak-close:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.streak-close:active{ transform: translateY(0); }
body.dark-mode .streak-close{
  background: rgba(18,18,22,.85);
  color:#fff;
}

.streak-hero{
  position: relative;
  border-radius: 26px;
  padding: clamp(20px,2.5vw,36px);
  background: linear-gradient(140deg, var(--primary-dark) 0%, #12050c 65%);
  color:#fff;
  box-shadow: 0 30px 60px rgba(128,36,51,.45), inset 0 1px 0 rgba(255,255,255,.25);
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px,2.5vw,36px);
  align-items:center;
}
body.dark-mode .streak-hero{
  background: linear-gradient(140deg,#3f0f1f,#15030a);
}
.streak-hero__badge{
  width: 82px;
  height: 82px;
  border-radius: 26px;
  background: rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 2.2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.streak-hero__badge i{ color:#ffd05c; }

.streak-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.streak-eyebrow{
  text-transform: uppercase;
  letter-spacing:.25em;
  font-size:.75rem;
  opacity:.75;
  margin:0;
}
.streak-number{
  margin:0;
  font-size: clamp(2.6rem,4vw,3.8rem);
  font-weight:800;
  color:var(--primary-color);
}
.streak-msg{
  margin:0;
  color: rgba(255,255,255,.8);
  font-weight:500;
  color:var(--text-light)
}
body.dark-mode .streak-msg{ color: rgba(255,255,255,.75); }

.streak-hero__meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
}
.streak-hero__meta .meta-label{
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.08em;
  opacity:.7;
}
.streak-hero__meta [data-goal-text]{
  font-size:1rem;
  font-weight:700;
}
.streak-hero__meta .meta-pill{
  margin-top:4px;
  align-self:flex-end;
  padding:4px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.2);
  font-weight:800;
}

.streak-core{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: clamp(16px,2vw,28px);
}

.streak-panel{
  background: rgba(255,255,255,.92);
  border-radius: 26px;
  padding: clamp(18px,2.2vw,30px);
  box-shadow: 0 25px 50px rgba(16,12,35,.12), inset 0 1px 0 rgba(255,255,255,.65);
  border: 1px solid rgba(128,36,51,.08);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.streak-panel--progress{
  grid-column: 1 / -1;
}
body.dark-mode .streak-panel{
  background: rgba(20,20,26,.85);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}
.streak-panel--calendar{
  min-height:auto;
  padding-bottom: clamp(12px, 2vw, 20px);
  grid-column: 1 / -1;
  flex-direction:row;
  align-items:flex-start;
  gap:clamp(16px, 2vw, 28px);
}

.streak-panel--calendar .streak-panel__title{
  flex:0 0 auto;
  max-width:260px;
}

.streak-panel--calendar .streak-panel__calendar-grid{
  flex:1 1 auto;
  width:auto;
}

.streak-panel__calendar-grid{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(92px, 11vw, 120px);
  gap: clamp(12px, 1.8vw, 18px);
  width:100%;
  padding: clamp(6px,1.5vw,14px);
  justify-items:stretch;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.streak-panel__calendar-grid::-webkit-scrollbar{
  height:8px;
}
.streak-panel__calendar-grid::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius:999px;
}
.streak-panel__calendar-grid::-webkit-scrollbar-thumb{
  background: rgba(128,36,51,.35);
  border-radius:999px;
}
.streak-panel__calendar-grid .streak-weekday__inner{
  width:auto;
  scroll-snap-align:start;
}

.streak-panel__title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  font-weight:700;
  color: var(--secondary-color);
}
.streak-panel__eyebrow{
  display:block;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--text-light);
}
.streak-panel__title strong{
  display:block;
  font-size:1.2rem;
}
.streak-panel__hint{
  font-size:.85rem;
  color: var(--text-light);
}

.streak-progress{ display:flex; flex-direction:column; gap:8px; }
.streak-bar{
  width:100%;
  height:14px;
  border-radius:999px;
  background: rgba(128,36,51,.12);
  overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.streak-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #ffbe3b 0%, var(--primary-color) 50%, #ffbe3b 100%);
  background-size: 200% 100%;
  animation: streakFillShine 6s ease infinite;
  box-shadow: 0 12px 18px rgba(128,36,51,.35);
  transition: width .45s ease;
}
.streak-hero__meta .meta-pill{ animation: streakPulse 7s ease-in-out infinite; }

@keyframes streakFillShine{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes streakDayIn{
  from{ transform: translateY(14px) scale(.96); opacity:.0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}
@keyframes streakPulse{
  0%,100%{ transform: translateZ(0); box-shadow: 0 10px 22px rgba(128,36,51,.22); }
  50%{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(128,36,51,.35); }
}
.streak-progress .streak-msg{
  color: var(--secondary-color);
  font-weight:700;
}
body.dark-mode .streak-bar{
  background: rgba(255,255,255,.12);
}

.streak-control-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.streak-panel--progress .streak-control-grid{
  grid-template-columns: minmax(0,1fr);
}
.streak-control-grid label{
  font-size:.86rem;
  font-weight:700;
  color: var(--secondary-color);
  display:block;
  margin-bottom:6px;
}
.streak-control-grid select,
.streak-control-grid input{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(128,36,51,.18);
  padding:12px 14px;
  font-size:1rem;
  background:#fff;
  color: var(--secondary-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.streak-control-grid select:focus,
.streak-control-grid input:focus{
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(128,36,51,.15);
}
body.dark-mode .streak-control-grid select,
body.dark-mode .streak-control-grid input{
  background:#111217;
  color:#f3f3f5;
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.daily-goal-hint{
  display:block;
  margin-top:6px;
  font-size:.8rem;
  color: var(--text-light);
}
.streak-daily-goal{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
}
.streak-daily-goal label{ font-weight:700; color: var(--secondary-color); }
.streak-daily-goal input[type="number"]{
  width:120px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(128,36,51,.2);
  background:#fff;
  font-weight:600;
}
.streak-daily-goal input[type="number"]:focus{
  outline:none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(128,36,51,.12);
}
body.dark-mode .streak-daily-goal input[type="number"]{
  background:#111217;
  color:#fff;
  border-color: rgba(255,255,255,.12);
}
.streak-goal-target{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:16px;
}
.streak-goal-target label{
  font-weight:700;
  color: var(--secondary-color);
}
.streak-goal-target select{
  border-radius:16px;
  border:1px solid rgba(128,36,51,.18);
  padding:12px 14px;
  font-size:1rem;
  background:#fff;
  color: var(--secondary-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.streak-goal-target small{
  font-size:.8rem;
  color: var(--text-light);
}
body.dark-mode .streak-goal-target select{
  background:#111217;
  color:#f3f3f5;
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.streak-today-summary{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 16px;
  border-radius:18px;
  background: rgba(128,36,51,.08);
  font-weight:700;
}
.streak-target-control{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  background:#fff;
  border:1px solid rgba(128,36,51,.18);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.streak-target-btn{
  border:none;
  background: rgba(128,36,51,.08);
  color: var(--secondary-color);
  width:28px;
  height:28px;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition: background .2s ease, transform .2s ease;
}
.streak-target-btn:hover{ background: rgba(128,36,51,.16); transform: translateY(-1px); }
.streak-target-btn:active{ transform: translateY(0); }
.streak-today-summary #streak-today-target{
  width: 60px;
  border:1px solid rgba(128,36,51,.18);
  border-radius:10px;
  padding:6px 8px;
  font-weight:700;
  color: var(--secondary-color);
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.streak-today-summary #streak-today-target::-webkit-outer-spin-button,
.streak-today-summary #streak-today-target::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
body.dark-mode .streak-today-summary{
  background: rgba(255,255,255,.08);
}
body.dark-mode .streak-target-control{
  background: rgba(15,15,18,.9);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
body.dark-mode .streak-target-btn{
  background: rgba(255,255,255,.08);
  color:#f5f5f5;
}
body.dark-mode .streak-target-btn:hover{ background: rgba(255,255,255,.14); }
body.dark-mode .streak-today-summary #streak-today-target{
  background: rgba(15,15,18,.9);
  border-color: rgba(255,255,255,.18);
  color: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.streak-today-summary .label{ color: var(--secondary-color); }
.streak-today-summary .sep{ opacity:.6; padding:0 4px; }
#streak-today-count,
#streak-today-target{
  font-size:1.1rem;
  font-weight:800;
}
body.dark-mode .streak-today-summary{
  background: rgba(255,255,255,.05);
  color:#fafafa;
}

.streak-weekday__inner{
  position:relative;
  border-radius:26px;
  background: linear-gradient(165deg, rgba(255,255,255,.95), rgba(236,232,244,.55));
  color:#4a4c58;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-weight:600;
  gap:6px;
  padding: clamp(12px,1.8vw,18px);
  min-height:120px;
  width:100%;
  box-shadow: 0 24px 45px rgba(19,12,42,.18), inset 0 1px 0 rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: streakDayIn .45s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  will-change: transform, box-shadow;
  overflow:hidden;
}
.streak-weekday__inner::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:20px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.8), transparent 58%);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
.streak-weekday__inner>*{
  position:relative;
  z-index:1;
}
.streak-weekday__name{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.streak-weekday__date{ font-size:1.25rem; font-weight:800; }
.streak-weekday__count{
  position:absolute;
  top:6px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:50%;
  background: var(--primary-color);
  color:#fff;
  font-size:.78rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  box-shadow: 0 8px 16px rgba(128,36,51,.35);
}
.streak-weekday__inner.is-today{
  background: linear-gradient(145deg,var(--streak-warn-1),var(--streak-warn-2));
  color:#fff;
  box-shadow: 0 28px 40px rgba(253,29,29,.35);
  transform: translateY(-3px);
}
.streak-weekday__inner.is-hit{
  background: linear-gradient(145deg,var(--streak-success-1),var(--streak-success-2));
  color:#fff;
  box-shadow: 0 28px 46px rgba(46,204,113,.35);
}
.streak-weekday__inner.is-missed{
  background: linear-gradient(145deg,var(--streak-danger-1),var(--streak-danger-2));
  color:#fff;
  box-shadow: 0 26px 40px rgba(231,76,60,.35);
}
.streak-weekday__inner.streak-celebrate{
  animation: streakCelebrate3d .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes streakCelebrate3d{
  0%{ transform: perspective(900px) rotateX(-12deg) translateY(-6px) scale(.96); }
  55%{ transform: perspective(900px) rotateX(10deg) translateY(-14px) scale(1.05); }
  100%{ transform: perspective(900px) rotateX(0deg) translateY(-3px) scale(1.02); }
}
.streak-weekday__inner:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 45px rgba(15,12,30,.28);
}
body.dark-mode .streak-weekday__inner{
  background: linear-gradient(150deg, rgba(26,28,38,.95), rgba(15,16,23,.85));
  color:#d5d8e3;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.streak-weekday__inner.is-today::after{
  content:""; position:absolute; inset:-4px; border-radius:30px;
  background: linear-gradient(145deg,var(--streak-warn-1),var(--streak-warn-2));
  filter: blur(16px); opacity:.45; z-index:0;
  pointer-events:none;
}

@media (max-width: 900px){
  .streak-panel--calendar{
    flex-direction:column;
  }
  .streak-panel--calendar .streak-panel__title{
    max-width:none;
  }
  .streak-panel--calendar .streak-panel__calendar-grid{
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    overflow-x:visible;
    scroll-snap-type:none;
  }
}

.streak-stats{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
}
.streak-stat{
  background: rgba(255,255,255,.92);
  border-radius:20px;
  padding:18px;
  text-align:center;
  box-shadow: 0 18px 32px rgba(17,13,31,.12);
  border:1px solid rgba(128,36,51,.08);
}
.streak-stat .label{
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--text-light);
  margin-bottom:4px;
}
.streak-stat strong{ font-size:1.6rem; font-weight:800; color: var(--secondary-color); }
body.dark-mode .streak-stat{
  background: rgba(17,17,23,.85);
  color:#f5f5f7;
  border-color: rgba(255,255,255,.08);
}

.streak-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
  margin-bottom:4px;
}
.streak-btn,
.streak-primary,
.streak-reset{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:0.95rem 1.6rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  border:2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.streak-btn--primary,
.streak-primary{
  background: linear-gradient(135deg,var(--primary-color),var(--primary-dark));
  color:#fff;
  box-shadow: 0 18px 30px rgba(128,36,51,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.streak-btn--primary:hover,
.streak-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 40px rgba(128,36,51,.45);
}
.streak-btn--primary:active,
.streak-primary:active{ transform: translateY(0); }

.streak-btn--ghost,
.streak-reset{
  background: rgba(255,255,255,.95);
  color: var(--secondary-color);
  border-color: rgba(128,36,51,.25);
  box-shadow: 0 10px 22px rgba(16,14,34,.12);
}
.streak-btn--ghost:hover,
.streak-reset:hover{ transform: translateY(-2px); }
body.dark-mode .streak-btn--ghost,
body.dark-mode .streak-reset{
  background: rgba(14,14,18,.85);
  color:#f2f2f4;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}

.streak-primary:focus-visible,
.streak-reset:focus-visible,
.streak-btn:focus-visible{
  outline:3px solid rgba(255,255,255,.4);
  outline-offset:4px;
}

@media (max-width: 720px){
  .streak-sheet{ padding: 24px 20px 28px; border-radius:24px; }
  .streak-hero{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .streak-hero__meta{
    flex-direction: row;
    justify-content: space-between;
    text-align:left;
  }
  .streak-panel__calendar-grid{
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 12px;
  }
  .streak-weekday__inner{
    min-height:108px;
    padding:14px;
  }
}

@media (max-width: 520px){
  .streak-panel__calendar-grid{
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  }
  .streak-weekday__inner{
    min-height:100px;
    padding:12px;
  }
}
/* Alert Semplice */

.simple-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.simple-alert {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

body.dark-mode .simple-alert {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    box-shadow: 0 18px 40px rgba(0,0,0,0.65);
}

.alert-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    text-align: center;
}

body.dark-mode .alert-header {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.alert-header i {
    font-size: 2em;
    margin-bottom: 10px;
}

.alert-header h3 {
    margin: 0;
    font-size: 1.3em;
}

.alert-body {
    padding: 25px;
}

.instruction-steps {
    margin: 20px 0;
}

body.dark-mode .instruction-steps .step {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
}

.simple-alert p {
    color: inherit;
}

.instruction-steps {
    margin: 20px 0;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card-soft);
}

body.dark-mode .step {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

.step-number {
    background: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color);
}

.step-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9em;
}

body.dark-mode .step-content strong {
    color: var(--dark-text-primary);
}

body.dark-mode .step-content p {
    color: var(--dark-text-secondary);
}

.email-example {
    background: var(--surface-panel);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid var(--surface-border);
}

body.dark-mode .email-example {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

.example-text {
    background: var(--surface-card);
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
    margin: 10px 0 0 0;
    font-family: monospace;
    color: var(--text-color);
}

body.dark-mode .example-text {
    background: rgba(255,255,255,0.08);
    color: var(--dark-text-primary);
}

.alert-footer {
    padding: 20px;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
}

body.dark-mode .alert-footer {
    background: var(--dark-bg-tertiary);
    border-top: 1px solid var(--dark-border);
}

.alert-footer .primary-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    background: var(--primary-color);
    color: white;
}

body.dark-mode .alert-footer .primary-btn {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    box-shadow: var(--shadow-card-soft);
}

/* Sezione collaborazioni Quizienza */
.partner-section {
    margin: 60px auto 40px;
    padding: 48px 40px;
    border-radius: 36px;
    background: linear-gradient(135deg, #5c1a26, #a13448);
    color: #fff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    width: min(1100px, 100%);
}

.partner-section::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 65%);
    pointer-events: none;
}

.partner-section__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    opacity: 0.8;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.partner-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: 32px;
    align-items: start;
}

.partner-section__main h3 {
    font-size: 2rem;
    margin-bottom: 12px;
}

.partner-section__main p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.partner-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
}

.partner-step {
    display: flex;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
}

.partner-step__index {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.partner-step h4 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.partner-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.partner-section__sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.partner-card {
    background: #fff;
    border-radius: 22px;
    padding: 22px 24px;
    color: var(--dark-gray);
    border: 1px solid rgba(128, 36, 51, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.partner-card h4 {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.partner-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.partner-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.4;
}

.partner-list i {
    color: var(--primary-color);
    font-size: 1rem;
    margin-top: 4px;
}

.partner-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.partner-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 999px;
    padding: 12px 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-cta-btn.primary {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.partner-cta-btn.ghost {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}

.partner-cta-btn:hover {
    transform: translateY(-2px);
}

.partner-note {
    font-size: 0.9rem;
    margin: 8px 0 0 0;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 960px) {
    .partner-section {
        padding: 38px 28px;
    }

    .partner-section__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .partner-section {
        padding: 32px 22px;
        border-radius: 28px;
    }

    .partner-section__main h3 {
        font-size: 1.6rem;
    }

    .partner-step {
        flex-direction: column;
        padding: 16px;
    }

    .partner-step__index {
        width: 36px;
        height: 36px;
    }
}

body.dark-mode .partner-section {
    background: linear-gradient(135deg, #2b0c14, #5c1a26);
}

body.dark-mode .partner-card {
    background: rgba(20, 20, 24, 0.92);
    color: #f5f5f5;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

body.dark-mode .partner-list li {
    color: #f5f5f5;
}

body.dark-mode .partner-list i {
    color: var(--primary-light);
}

body.dark-mode .partner-cta-btn.primary {
    background: #fff;
    color: var(--primary-color);
}

body.dark-mode .partner-cta-btn.ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

body.dark-mode .partner-note {
    color: rgba(255, 255, 255, 0.8);
}

.collab-overlay{position:fixed;left:22px;bottom:22px;z-index:9000;width:min(360px,calc(100% - 44px));font-family:inherit}
.collab-overlay__toggle{display:flex;align-items:center;gap:10px;width:100%;border:none;border-radius:16px;padding:10px 12px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:0 12px 26px rgba(128,36,51,.35), inset 0 1px 0 rgba(255,255,255,.5);cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}
.collab-overlay__toggle:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(128,36,51,.42), inset 0 1px 0 rgba(255,255,255,.6)}
.collab-overlay__toggle .fa-chevron-up{margin-left:auto;transition:transform .25s ease}
.collab-overlay__toggle.is-open .fa-chevron-up{transform:rotate(180deg)}
.collab-overlay__card{margin-top:8px;background:#fff;border:1px solid rgba(128,36,51,.15);border-radius:18px;padding:14px;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.collab-overlay__intro{margin:0 0 10px 0;color:#444;font-size:.95rem}
.collab-overlay__list{list-style:none;margin:0 0 12px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.collab-overlay__list li{display:flex;gap:8px;align-items:flex-start;color:#333}
.collab-overlay__list i{color:var(--primary-color);margin-top:4px}
.collab-overlay__actions{display:flex;gap:8px;flex-wrap:wrap}
.collab-action{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:999px;padding:10px 14px;font-weight:600;border:none;background:none;font-family:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.collab-action.primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:0 12px 24px rgba(128,36,51,.35)}
.collab-action.ghost{border:1px solid rgba(128,36,51,.25);color:var(--primary-color);background:#fff}
.collab-action:hover{transform:translateY(-1px)}
.collab-action.tertiary{background:rgba(128,36,51,.08);border:1px dashed rgba(128,36,51,.35);color:var(--primary-dark)}

.menu-collab-panel{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;padding:clamp(14px,3vh,60px) clamp(14px,3vw,50px);z-index:1200;pointer-events:none;opacity:0;transition:opacity .28s ease;overflow:hidden}
.menu-collab-panel.is-open{opacity:1;pointer-events:auto}
.menu-collab-panel__scrim{position:absolute;inset:0;background:rgba(10,2,4,.55);backdrop-filter:blur(8px);opacity:0;transition:opacity .28s ease;cursor:pointer}
.menu-collab-panel.is-open .menu-collab-panel__scrim{opacity:1}
.menu-collab-panel:not(.is-open) .menu-spotlight{opacity:0;transform:translateY(20px) scale(.97)}
.menu-collab-panel.is-open .menu-spotlight{opacity:1;transform:translateY(0) scale(1);transition:transform .3s ease,opacity .3s ease}
@media (max-width:1120px){
  .menu-collab-panel{padding:clamp(16px,4vh,60px) clamp(14px,3vw,48px) clamp(16px,4vh,60px) clamp(14px,3vw,48px);justify-content:center}
}
@media (max-width:900px){
  .menu-collab-panel{overflow:auto}
  .menu-spotlight{max-height:calc(100vh - 110px);overflow:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:640px){
  .menu-collab-panel{padding:clamp(28px,8vh,60px) clamp(16px,7vw,32px);align-items:flex-start;overflow:auto}
  .menu-collab-panel.is-open .menu-spotlight{transform:translateY(0) scale(1)}
  .menu-spotlight{padding:24px;border-radius:26px;max-width:100%;max-height:calc(100vh - 120px);overflow:auto;-webkit-overflow-scrolling:touch}
  .menu-collab__grid{gap:18px}
  .menu-collab-step{flex-direction:column;align-items:flex-start}
  .menu-collab-step__index{border-radius:12px}
}

.menu-spotlight{margin:0 auto;padding:18px 24px;border-radius:30px;background:linear-gradient(160deg,#6d1a2e 0%,#8b2339 55%,#9f2f42 100%);box-shadow:0 18px 40px rgba(18,4,8,.4),0 12px 24px rgba(0,0,0,.35);color:#fff;position:relative;overflow:hidden;max-width:min(820px,calc(100vw - 64px));max-height:calc(100vh - 100px);width:100%}
.menu-spotlight::before{content:'';position:absolute;inset:-40% 20% auto;height:180px;background:radial-gradient(circle,rgba(255,255,255,.42),transparent 65%);opacity:.8;pointer-events:none}
.menu-spotlight::after{content:'';position:absolute;inset:auto -30% -30% 35%;height:220px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);opacity:.6;pointer-events:none}
.menu-spotlight>*{position:relative;z-index:1}
.menu-spotlight.is-visible{animation:menuCollabFade .4s ease-out both}
.menu-spotlight:focus{outline:none}
.menu-spotlight:focus-visible{outline:3px solid rgba(255,255,255,.55);outline-offset:6px}
body.dark-mode .menu-spotlight:focus-visible{outline-color:rgba(255,255,255,.7)}
@keyframes menuCollabFade{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.spotlight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.spotlight-header .left-actions{display:flex;align-items:center;gap:10px}
.spotlight-back{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer;font-size:1rem;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.spotlight-back:hover{background:rgba(255,255,255,.32);transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.25)}
.spotlight-close{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;font-size:1rem;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.spotlight-close:hover{background:rgba(255,255,255,.32);transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.25)}
.menu-collab__eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;margin:0;color:rgba(255,255,255,.76)}
.menu-collab__title{margin:4px 0 12px;font-size:1.5rem;line-height:1.2;font-weight:700}
.menu-collab__lead{margin:0 0 18px;font-size:1rem;line-height:1.5;color:rgba(255,244,247,.92);max-width:620px}
.menu-collab__grid{display:flex;flex-direction:column;gap:12px}
.menu-collab__main-card{background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 100%);border-radius:20px;padding:16px;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 26px rgba(34,0,9,.32);display:flex;flex-direction:column;gap:10px}
.menu-collab-step{display:flex;gap:8px;padding:8px 10px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 18px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22)}
.menu-collab-step__index{width:30px;height:30px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.65));color:#832238;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.65)}
.menu-collab-step h4{margin:0;font-size:1rem;font-weight:600;color:#fff}
.menu-collab-step p{margin:4px 0 0;font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.88)}
.menu-collab__side{display:flex;flex-direction:column;gap:16px}
.menu-collab-info{background:#fff;border-radius:22px;padding:12px 14px;border:1px solid rgba(128,36,51,.12);box-shadow:0 16px 30px rgba(0,0,0,.18);color:#511726}
.menu-collab-info h4{margin:0 0 12px;font-size:1.08rem;font-weight:700;color:#511726}
.menu-collab-info ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.menu-collab-info li{display:flex;gap:6px;align-items:flex-start;color:#4f2230;line-height:1.34}
.menu-collab-info i{color:var(--primary-color);margin-top:4px}
.menu-collab-cta{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.menu-collab-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}
.menu-collab-btn.primary{background:#fff;color:#6e1d2c;box-shadow:0 16px 30px rgba(0,0,0,.2);border:1px solid rgba(128,36,51,.16)}
.menu-collab-btn.ghost{background:linear-gradient(135deg,#7d1d31,#a92c42);border:none;color:#fff;box-shadow:0 16px 30px rgba(94,14,29,.32)}
.menu-collab-btn:hover{transform:translateY(-2px);box-shadow:0 26px 38px rgba(0,0,0,.28)}
.menu-collab__note{font-size:.82rem;color:rgba(255,255,255,.82);margin:14px 0 0;line-height:1.4}
@media (min-width:640px){
  .menu-collab__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start}
}
body.dark-mode .menu-spotlight{background:linear-gradient(160deg,#4a121f 0%,#68192a 55%,#7f2133 100%);box-shadow:0 24px 46px rgba(0,0,0,.55)}
body.dark-mode .menu-collab-panel__scrim{background:rgba(4,0,0,.65)}
body.dark-mode .menu-collab__main-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(255,255,255,.12)}
body.dark-mode .menu-collab-step{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.18)}
body.dark-mode .menu-collab-info{background:rgba(18,18,18,.92);color:#f3f1f2;border-color:rgba(255,255,255,.08);box-shadow:0 22px 44px rgba(0,0,0,.5)}
body.dark-mode .menu-collab-info h4{color:#f9f7f7}
body.dark-mode .menu-collab-info li{color:#f3f1f2}
body.dark-mode .menu-collab-btn.primary{background:#fff;color:#6e1d2c}
body.dark-mode .menu-collab-btn.ghost{background:linear-gradient(135deg,#7d1d31,#a92c42);color:#fff;border:none}

.menu-review-panel{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:clamp(40px,8vh,110px) clamp(16px,6vw,80px);z-index:1300;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;overflow:auto}
.menu-review-panel::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,2,4,.75) 0%,rgba(10,2,4,.9) 100%);backdrop-filter:blur(16px);z-index:-1}
.menu-review-panel.is-open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .28s ease}
.menu-review-panel__scrim{position:absolute;inset:0;background:rgba(46,8,14,.78);backdrop-filter:blur(14px);transition:opacity .28s ease;pointer-events:auto}
.menu-review-panel__scrim {
  background-color: transparent;
  opacity: 0;
}
.menu-review-panel__content{position:relative;max-width:min(780px,calc(100vw - 48px));width:100%;border-radius:30px;background:linear-gradient(160deg,#fff8f7 0%,#fff0f2 100%);border:1px solid rgba(128,36,51,.12);box-shadow:0 30px 60px rgba(66,15,22,.25);padding:34px 34px 38px;overflow:hidden;pointer-events:auto}
.menu-review-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.menu-review-panel__eyebrow{text-transform:uppercase;color:var(--primary-dark);font-size:.72rem;letter-spacing:.25em;margin:0}
.menu-review-panel__lead{margin:0 0 18px;font-size:1rem;color:#3b1c25;line-height:1.6}
.menu-review-panel__stats{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;font-size:.9rem;color:#4a1f29}
.menu-review-panel__stats span:first-child{font-weight:600;font-size:1.05rem}
.review-panel__stats{display:flex;flex-direction:column;font-size:.85rem;color:var(--primary-dark);gap:2px;min-height:32px}
.menu-review-panel__body{max-height:320px;overflow:auto;border-radius:22px;border:1px solid rgba(128,36,51,.12);padding:16px;background:linear-gradient(180deg,#fff,#fff7f7)}
.menu-review-panel__cta{display:flex;flex-direction:column;gap:6px;margin:4px 0 18px}
.menu-review-panel__cta p{margin:0;font-size:.85rem;color:#6c3845}
.review-list{display:flex;flex-direction:column;gap:14px}
.review-card{background:#fff;border-radius:20px;padding:16px 18px;border:1px solid rgba(128,36,51,.12);box-shadow:0 14px 26px rgba(67,15,23,.08)}
.review-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.85rem;color:#4d2631}
.review-card__subject{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--primary-dark)}
.review-card__stars{display:flex;gap:4px;font-size:1rem;color:#f7b733;text-shadow:0 6px 14px rgba(247,183,51,.35)}
.review-star{color:rgba(255,255,255,.35);font-size:1.1rem;transition:color .2s ease,opacity .2s ease}
.review-star--filled{color:#f7b733;opacity:1}
.review-card__comment{margin:0;font-size:.97rem;line-height:1.55;color:#1f1a20;white-space:pre-line}
.review-empty{margin:0;font-size:.95rem;color:#6c3845;text-align:center;padding:14px 0}
.review-form{margin-top:20px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(135deg,var(--primary-dark),#12050a);box-shadow:0 18px 34px rgba(46,5,12,.55);border-radius:26px;padding:20px 22px;border:1px solid rgba(255,255,255,.06)}
.review-form .form-row{display:flex;flex-direction:column;gap:6px}
.review-form label{font-size:.85rem;color:rgba(255,255,255,.86)}
.review-form input,.review-form select,.review-form textarea{border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;padding:10px 12px;font-size:.95rem;transition:border-color .2s ease,background .2s ease}
.review-form .grade-separator{color:rgba(255,255,255,.82);font-weight:700}
.review-form #reviewGrade,.review-form #reviewGradeMax{flex:0 0 110px;max-width:120px;min-width:100px}
.review-form input[type=number]::-webkit-inner-spin-button,
.review-form input[type=number]::-webkit-outer-spin-button{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.3));border-radius:10px;border:1px solid rgba(255,255,255,.25);opacity:.95}
.review-form input[type=number]::-webkit-inner-spin-button:hover,
.review-form input[type=number]::-webkit-outer-spin-button:hover{box-shadow:0 4px 10px rgba(255,255,255,.18)}
.review-form input::placeholder,.review-form textarea::placeholder{color:#fff;opacity:.9}
.review-form select{color-scheme:dark}
.review-form select option{color:#1f1a20;background:#fff}
body.dark-mode .review-form select option{color:#f5f6ff;background:#1a1015}

.review-form input:focus,.review-form select:focus,.review-form textarea:focus{border-color:#ffd4dc;background:rgba(255,255,255,.18);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.review-rating{border:none;padding:0;margin:0}
.review-rating legend{font-size:.85rem;color:rgba(255,255,255,.86);margin:0 0 6px}
.review-rating__stars{display:flex;gap:6px}
.review-rating__stars label{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;font-size:1.3rem;color:rgba(255,255,255,.45);border:1px solid transparent}
.review-rating__stars label:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.review-rating__stars input{display:none}
.review-rating__stars input:checked+span[aria-hidden="true"]{color:#f7b733}
.review-rating__stars label:hover span[aria-hidden="true"]{color:#f7b733}
.review-form__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.menu-review-panel__note{font-size:.78rem;color:#7b4c57;margin-top:12px}
.menu-review-panel [hidden]{display:none !important}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
.menu-review-panel__content .pill-btn{box-shadow:0 18px 28px rgba(13,15,30,.18)}
.menu-review-panel__cta .pill-btn{align-self:flex-start;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff}
.menu-review-panel__cta .pill-btn:hover{transform:translateY(-2px);box-shadow:0 16px 26px rgba(96,23,33,.35)}
.menu-review-panel__content .pill-btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.3)}
@media (max-width: 720px){.menu-review-panel{padding:24px 16px 32px;align-items:flex-start}.menu-review-panel__content{padding:26px 22px}}
@media (max-width: 480px){.menu-review-panel__body{max-height:240px}}
body.dark-mode .menu-review-panel__content{background:linear-gradient(155deg,#12040a,#1b0a15);border-color:rgba(255,255,255,.08);box-shadow:0 22px 44px rgba(0,0,0,.6)}
body.dark-mode .menu-review-panel__lead{color:#f1d5db}
body.dark-mode .menu-review-panel__stats{color:#f7dfe5}
body.dark-mode .menu-review-panel__cta p{color:#deb1bd}
body.dark-mode .review-panel__stats{color:#f4dfe5}
body.dark-mode .menu-review-panel__body{background:linear-gradient(180deg,#1a1015,#12050a);border-color:rgba(255,255,255,.08)}
body.dark-mode .review-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);box-shadow:0 20px 36px rgba(0,0,0,.55)}
body.dark-mode .review-card__comment{color:#fdf6f8}
body.dark-mode .review-card__meta{color:#f2c8d1}
body.dark-mode .review-empty{color:#d597a7}
body.dark-mode .review-form{background:linear-gradient(145deg,#070208,#12040c);box-shadow:0 20px 40px rgba(0,0,0,.65)}
body.dark-mode .menu-review-panel__note{color:#b77986}

@media (max-width: 560px){
  .collab-overlay{left:14px;right:14px;bottom:18px;width:auto}
}

body.dark-mode .collab-overlay__card{background:rgba(20,20,24,.95);border-color:rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.45)}
body.dark-mode .collab-overlay__intro, 
body.dark-mode .collab-overlay__list li{color:#eee}
body.dark-mode .collab-action.ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
body.dark-mode .collab-action.tertiary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}

.cookie-banner {
    position: fixed;
    inset: auto 24px 24px;
    width: min(460px, calc(100% - 48px));
    border-radius: 28px;
    padding: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 255, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 25px 60px rgba(14, 16, 37, 0.25), 0 10px 22px rgba(27, 20, 54, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(18px);
    z-index: 10000;
    color: var(--dark-gray);
    overflow: hidden;
}

.cookie-banner::before {
    content: '';
    position: absolute;
    inset: -30% 15% auto;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.7;
    pointer-events: none;
}

.cookie-banner__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cookie-banner__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.cookie-banner__copy {
    flex: 1;
}

.cookie-banner__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    color: var(--primary-dark);
    margin: 0 0 6px;
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-color);
}

.cookie-banner__controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cookie-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(128, 36, 51, 0.15);
    padding: 14px;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cookie-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(128, 36, 51, 0.05);
    border: 1px solid rgba(128, 36, 51, 0.18);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(128, 36, 51, 0.12);
}

.cookie-switch input {
    accent-color: var(--primary-color);
    transform: scale(1.05);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#cookie-save {
    margin-right: auto;
}

.cookie-btn {
    border-radius: 999px;
    border: 1px solid rgba(128, 36, 51, 0.2);
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    background: linear-gradient(145deg, #ffffff, #f5f6fa);
    color: var(--primary-dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cookie-btn.primary {
    background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 15px 30px rgba(128, 36, 51, 0.35);
}

.cookie-btn.ghost {
    background: transparent;
    border-color: rgba(128, 36, 51, 0.4);
    color: var(--primary-dark);
}

.cookie-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
}

.cookie-btn:focus-visible {
    outline: 2px solid rgba(128, 36, 51, 0.35);
    outline-offset: 2px;
}

.cookie-link {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(128, 36, 51, 0.2);
    border-radius: 999px;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    align-self: flex-start;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 25px rgba(128, 36, 51, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cookie-link:hover {
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.cookie-link.is-open .fa-chevron-down {
    transform: rotate(180deg);
}

.cookie-link .fa-chevron-down {
    transition: transform 0.3s ease;
}

@media (max-width: 560px) {
    .cookie-banner {
        inset: auto 14px 14px;
        width: calc(100% - 28px);
        border-radius: 22px;
        padding: 20px;
    }

    .cookie-banner__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-actions {
        flex-direction: column;
    }

    #cookie-save {
        margin-right: 0;
        width: 100%;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 1024px) {
    .cookie-banner {
        inset: auto 0 0;
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 24px 40px;
    }

    .cookie-banner__content {
        flex-direction: row;
        align-items: center;
        gap: 32px;
        max-width: 1280px;
        margin: 0 auto;
    }

    .cookie-banner__body {
        flex: 1.4;
    }

    .cookie-banner__controls {
        flex: 1;
    }

    .cookie-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}

.linklike-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    color: #8b1d2c;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.2s ease;
}

.linklike-btn:hover {
    color: var(--primary-color);
}

.linklike-btn:focus-visible {
    outline: 2px solid rgba(139, 29, 44, 0.3);
    border-radius: 4px;
    outline-offset: 2px;
}

.cookie-legal {
    max-width: 900px;
    margin: 10px auto 0;
    line-height: 1.6;
    color: #555;
}

.cookie-legal p {
    margin: 0;
}

.cookie-legal p + p {
    margin-top: 8px;
}

/* ==================
   DARK MODE - COOKIE & DISCLAIMER
   ================== */

body.dark-mode .cookie-banner {
    background: linear-gradient(145deg, rgba(20, 20, 28, 0.96), rgba(32, 32, 40, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--dark-text-primary);
}

body.dark-mode .cookie-banner::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.35;
}

body.dark-mode .cookie-banner__eyebrow {
    color: var(--dark-primary);
}

body.dark-mode .cookie-banner__text {
    color: var(--dark-text-primary);
}

body.dark-mode .cookie-settings {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .cookie-switch {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--dark-text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

body.dark-mode .cookie-btn {
    background: linear-gradient(145deg, #2d2d30, #1f1f1f);
    color: var(--dark-text-primary);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .cookie-btn.primary {
    background: linear-gradient(145deg, var(--primary-dark), var(--primary-color));
    color: #fff;
    border-color: transparent;
}

body.dark-mode .cookie-btn.ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

body.dark-mode .cookie-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--dark-primary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .cookie-legal {
    color: var(--dark-text-secondary);
}

body.dark-mode .disclaimer-fixed {
    background: rgba(5, 5, 8, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.65);
}

body.dark-mode .disclaimer-fixed span {
    color: var(--dark-text-secondary);
}
.disclaimer-fixed{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(2px);border-top:1px solid var(--medium-gray);padding:10px 12px;z-index:9999;box-shadow:0 -6px 16px rgba(0,0,0,.06)}
.disclaimer-fixed span{color:var(--text-light)}
/* Evita scroll sotto il modal glossario */
.glossary-panel-open { overflow: hidden; }


body.dark-mode #results-screen {
    background: linear-gradient(180deg, #070709 10%, #0f0f12 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .results-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

body.dark-mode .results-header h2 {
    color: #f7b7c1;
}

body.dark-mode .score-display {
    margin-bottom: 18px;
}

body.dark-mode #score-percentage {
    color: #ff9aa0;
}

body.dark-mode #score-text {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .results-details {
    margin-bottom: 24px;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .result-stat {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 35px rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.65);
}

body.dark-mode .stat-number {
    color: #ffdce1;
}

body.dark-mode .stat-label {
    color: rgba(255, 255, 255, 0.55);
}

body.dark-mode .results-actions {
    gap: 14px;
}

body.dark-mode .action-btn {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: #eee;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .action-btn i { color: #f4baba; }

body.dark-mode .action-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

body.dark-mode #repeat-same-quiz-btn {
    background: linear-gradient(135deg, #a31d2b, #701824);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fbe8ec;
    box-shadow: 0 14px 35px rgba(163, 29, 43, 0.55);
}

body.dark-mode #view-results-btn {
    background: linear-gradient(135deg, #2b3f58, #1c2937);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.dark-mode #retry-wrong-btn {
    background: linear-gradient(135deg, #ffd738, #f1a609);
    color: #2d1900;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
}

body.dark-mode .secondary-btn {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Glossario: mobile full-width e header adattabile */
@media (max-width: 640px) {
  .glossary-panel { width: min(100dvw, 100vw); border-radius: 18px; padding: 12px; padding-top: clamp(28px, 10vh, 52px); }
  .glossary-panel.open { transform: translate(-50%, calc(-1 * var(--glossary-center-offset))) scale(1); }
  .glossary-header { border-radius: 12px; margin-bottom: 10px; }
  .glossary-actions { justify-content: flex-start; }
}
/* Align review overlay scrim/background with the rest of the app */ 
.menu-review-panel__scrim{background:rgba(10,2,4,.55) !important} 
body.dark-mode .menu-review-panel__scrim{background:rgba(4,0,0,.65) !important} 
.menu-review-panel::before{background:linear-gradient(180deg, rgba(10,2,4,.75) 0%, rgba(10,2,4,.9) 100%)}
body.dark-mode .menu-review-panel::before{background:linear-gradient(180deg, rgba(4,0,0,.7) 0%, rgba(4,0,0,.9) 100%)}

.menu-review-panel .spotlight-close,
.menu-review-panel .spotlight-close i {
    color: var(--primary-color) !important;
}
.menu-review-panel .spotlight-close {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.menu-review-panel .spotlight-close:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.6);
}
.spotlight-close__glyph {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}
.reviews-scroll-lock {
    overflow: hidden !important;
}

/* Dark mode tint for React-Select single values (quiz selects) */
body.dark-mode .quiz-select__single-value,
body.dark-mode .css-1n1s0gy-singleValue {
    color: #f7e9ed !important;
    text-shadow: none !important;
}

/* Rating section sizing tweaks */
.flashcards-screen .rating-section,
.rating-section {
    max-width: 960px;
    padding: clamp(10px, 2vw, 16px);
    gap: clamp(8px, 1.6vw, 14px);
}

.flashcards-screen .rating-buttons-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(12px, 2vw, 16px);
}

#rating-section .rate-btn {
    border-radius: 16px;
    padding: clamp(8px, 1.6vw, 14px);
    gap: 10px;
}

#rating-section .rate-btn .rate-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.1rem;
}

#rating-section .rate-btn .rate-title {
    font-size: 1.1rem;
}

#rating-section .rate-btn .rate-interval {
    font-size: 0.95rem;
}

#rating-section .rate-btn .rate-badge {
    margin-top: 2px;
}