/* // MOBILE ONLY - Layout */
@media screen and (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.5;
    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);
  }

  body.dark-mode {
    background-color: var(--dark-bg-primary);
    background-image: url('../immagini-logo/sfondo-dark.svg');
    color: var(--dark-text-primary);
  }

  body {
    padding-top: calc(env(safe-area-inset-top) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
    scroll-padding-top: calc(80px + env(safe-area-inset-top));
  }

  h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    line-height: 1.25;
  }

  h3 {
    font-size: clamp(1.35rem, 4vw, 1.9rem);
    line-height: 1.3;
  }

  h4,
  h5,
  h6,
  .section-title {
    font-size: clamp(1.1rem, 3.2vw, 1.4rem);
    line-height: 1.35;
  }

  p,
  li,
  label,
  input,
  textarea,
  select,
  button,
  small {
    font-size: clamp(14px, 1.7vw, 17px);
  }

  main,
  .app-shell,
  #auth-screen,
  #auth-forms,
  #user-dashboard,
  #quiz-screen,
  #results-screen,
  .surface-card,
  .surface-panel,
  .card,
  .content-card,
  .quiz-settings,
  .quiz-layout,
  .results-details,
  .results-summary,
  .study-options,
  .flashcards-screen,
  .flashcards-container,
  .fonti-content,
  .chi-siamo-content,
  .site-footer-contained,
  .chi-siamo-hero,
  .dashboard-header2,
  .oral-subject,
  .menu-content,
  .pc-section,
  .pc-modal,
  .stats-panel,
  .token-modal .modal-content,
  .glossary-panel,
  .menu-spotlight,
  .streak-sheet {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
  }

  section,
  article,
  [id] {
    scroll-margin-top: calc(90px + env(safe-area-inset-top));
  }

  .app-shell,
  main {
    padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .surface-card,
  .card,
  .menu-content,
  .study-options,
  .flashcard,
  .quiz-settings,
  .fonti-content,
  .chi-siamo-content,
  .site-footer-contained,
  .chi-siamo-hero,
  .pc-modal,
  .stats-panel,
  .token-modal .modal-content {
    border-radius: 20px;
    border: 1px solid var(--surface-border);
    box-shadow: 0 8px 20px rgba(14, 9, 11, 0.12);
  }

  #auth-screen {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  #auth-screen .app-logo img {
    max-width: 120px;
    height: auto;
  }

  #auth-screen .app-logo h1 {
    font-family: 'Lobster', cursive;
  }

  #auth-screen .auth-form {
    width: 100%;
    padding: clamp(18px, 4vw, 28px);
  }

  #score-percentage {
    font-size: clamp(2.2rem, 8vw, 3.3rem);
  }

  #score-text {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  .controls-grid,
  .dashboard-grid,
  .results-details,
  .summary-grid,
  .rating-buttons-grid,
  .hero-metrics,
  .fonti-subjects,
  .user-cards-grid,
  .quiz-layout,
  .menu-items,
  .chi-siamo-container,
  .oral-subjects,
  .pc-modal .pc-stats,
  .pc-modal .pc-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: clamp(12px, 3vw, 20px);
  }

  .user-greeting,
  .quiz-header,
  .quiz-progress,
  .results-actions,
  .quiz-navigation,
  .quiz-controls,
  .global-search-wrap,
  .flashcards-screen .flashcards-header,
  .session-stats,
  .flashcard-controls,
  .rating-buttons,
  .fonti-course-actions,
  .auth-meta-actions,
  .menu-theme-card,
  .menu-footer,
  .menu-search,
  .streak-launcher,
  .study-options,
  .pc-section .pc-stats,
  .pc-section .pc-box-btn,
  .pc-modal .pc-stats,
  .pc-modal .pc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(8px, 2vw, 16px);
  }

  .global-search-wrap,
  .global-search,
  .results-actions,
  .action-btn,
  .menu-search input,
  .quiz-progress,
  .flashcard-controls,
  .rating-buttons,
  .fonti-course-actions,
  .auth-meta-actions,
  .pc-section .pc-box-btn,
  .pc-modal .pc-stats > *,
  .pc-modal .pc-actions > * {
    width: 100%;
  }

  .global-search-wrap {
    order: 3;
  }

  .hero-visual,
  .study-hero,
  .flashcard,
  .flashcard-main,
  .quiz-illustration {
    min-height: auto;
  }

  .site-footer-contained {
    text-align: center;
    padding: clamp(20px, 5vw, 32px);
  }

  /* // MOBILE ONLY - Navigation */
  .menu-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    right: clamp(14px, 4vw, 24px);
    left: auto;
    width: 56px;
    height: 56px;
    border-radius: 20px;
    z-index: 1200;
    box-shadow: 0 14px 30px rgba(128, 36, 51, 0.24);
  }

  .menu-toggle.is-open,
  .menu-toggle[aria-expanded="true"] {
    transform: scale(0.96);
  }

  .sidebar-menu {
    inset: 0;
  }

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

  .menu-overlay {
    opacity: 1;
    background: rgba(8, 5, 6, 0.6);
  }

  .sidebar-menu .menu-content {
    left: auto;
    right: 0;
    width: 100%;
    height: 100%;
    padding-bottom: calc(env(safe-area-inset-bottom) + 32px);
    transform: translateX(100%);
    border-radius: 0;
    box-shadow: 0 18px 48px rgba(6, 4, 8, 0.45);
    overscroll-behavior: contain;
  }

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

  .menu-header,
  .menu-theme-card,
  .menu-section,
  .menu-footer {
    padding-inline: clamp(18px, 5vw, 28px);
  }

  .menu-header {
    gap: 12px;
    padding-block: 14px 12px;
    border-radius: 0 0 24px 24px;
  }

  .menu-header::after {
    border-radius: inherit;
  }

  .menu-header__top {
    align-items: center;
    gap: 12px;
  }

  .menu-header__meta {
    justify-content: center;
    gap: 6px;
  }
  .menu-header__meta .menu-status-chip {
    margin-inline: auto clamp(18px, 8vw, 32px);
  }

  .menu-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .menu-status-chip {
    width: fit-content;
    padding: 4px 12px;
  }

  .menu-status-text {
    letter-spacing: 0.18em;
    font-size: 0.55rem;
  }

  .menu-close {
    position: static;
    margin-left: auto;
    width: 34px;
    height: 34px;
  }

  .menu-nav {
    padding-bottom: clamp(32px, 8vh, 64px);
  }

  .menu-items {
    gap: 12px;
  }

  .menu-item {
    padding: clamp(14px, 4vw, 20px);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .menu-item:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px rgba(0, 0, 0, 0.08);
  }

  .menu-item:active {
    transform: scale(0.98);
  }

  .menu-search {
    width: 100%;
  }

  .menu-search input {
    padding-block: 14px;
  }

  /* // MOBILE ONLY - Back Button */
  .backarrowquiz-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 64px);
    left: clamp(12px, 3vw, 20px);
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--surface-card);
    color: var(--primary-color);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 900;
  }

  /* // MOBILE ONLY - AI Explain */
  #explainDock {
    width: min(100% - 1rem, 800px);
    padding-inline: clamp(8px, 3vw, 16px);
    margin-inline: auto;
  }

  .ai-explanation {
    max-height: clamp(220px, 45vh, 360px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 3vw, 18px);
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    overscroll-behavior: contain;
  }

  .ai-explanation a {
    word-break: break-all;
  }

  .ai-explanation .ai-sources ul {
    padding-left: 18px;
  }

  /* // MOBILE ONLY - Cards & Quiz */
  .subject-section-header {
    flex-wrap: wrap;
    padding: clamp(16px, 4vw, 24px);
    gap: 14px;
  }

  #back-to-channels-from-subjects {
    order: -1;
    align-self: flex-start;
  }

  .global-search,
  .global-search-wrap {
    width: 100%;
  }

  .auth-meta-actions a,
  .auth-meta-actions button {
    width: 100%;
  }

  .quiz-settings,
  .quiz-layout,
  .study-options,
  .flashcards-screen,
  .rating-section,
  .fonti-content,
  .chi-siamo-content,
  .oral-subject {
    padding: clamp(16px, 4vw, 24px);
  }

  .quiz-option,
  .answer-option,
  .action-btn,
  .nav-btn,
  .rate-btn,
  .quiz-controls button,
  .quiz-navigation button,
  .flashcard-controls button,
  .study-hero .flash-actions-row .action-icon,
  .session-stats .stat,
  .menu-item,
  .dark-mode-toggle,
  .menu-close,
  .menu-toggle,
  .backarrowquiz-btn {
    min-height: 48px;
    min-width: 44px;
  }

  .flashcards-container,
  .flashcards-screen .flashcards-header {
    gap: clamp(12px, 3vw, 20px);
  }

  .flashcard {
    padding: clamp(16px, 4vw, 28px);
    border-radius: 28px;
    height: auto;
  }

  .flashcard-main {
    padding: clamp(16px, 4vw, 24px);
  }

  .study-hero .flash-actions-dock {
    position: static;
    justify-content: center;
    width: 100%;
    margin-top: clamp(12px, 3vw, 20px);
    padding: clamp(10px, 2.5vw, 16px);
    border-radius: 22px;
  }

  .study-hero .flash-actions-row {
    width: 100%;
    gap: clamp(10px, 2vw, 18px);
  }

  .flashcard img,
  .flashcard video,
  .quiz-content img,
  .quiz-content video,
  .question-illustration img,
  .hero-visual img,
  .fonti-card img,
  .chi-siamo-content img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
  }

  .answer-scroll-container {
    max-height: clamp(200px, 40vh, 320px);
    overflow-y: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    padding: clamp(14px, 3vw, 20px);
  }

  .rating-buttons,
  .results-actions,
  .fonti-course-actions {
    gap: 12px;
  }

  .results-actions .action-btn,
  .rating-buttons .rate-btn {
    width: 100%;
  }

  .fonti-subjects,
  .chi-siamo-container,
  .user-cards-grid {
    gap: 12px;
  }

  .chi-siamo-btn,
  .instagram-icon {
    width: 100%;
    justify-content: center;
  }

  .session-stats,
  .summary-grid,
  .rating-buttons-grid {
    gap: 12px;
  }

  .study-options {
    gap: 12px;
  }

  .hero-visual {
    min-height: 200px;
  }

  /* // MOBILE ONLY - Tables & Code */
  pre,
  .code-block,
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(12px, 3vw, 18px);
    border-radius: 16px;
    background: var(--surface-panel);
    border: 1px solid var(--surface-border);
  }

  pre code,
  code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  table {
    border-collapse: collapse;
  }

  table th,
  table td {
    padding: 10px;
  }

  /* // MOBILE ONLY - Modali */
  .token-modal,
  .stats-overlay,
  .streak-overlay,
  .menu-collab-panel {
    padding: clamp(16px, 5vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    scrollbar-width: none;
  }
  .streak-overlay::-webkit-scrollbar { display: none; }

  .token-modal .modal-content,
  .stats-panel,
  .pc-modal,
  .streak-sheet,
  .glossary-panel,
  .menu-spotlight,
  .menu-collab-panel .menu-spotlight,
  .streak-popup {
    width: min(92vw, 640px);
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    margin: 0 auto;
    border-radius: 24px;
    padding: clamp(18px, 4vw, 28px);
  }
  .streak-sheet::-webkit-scrollbar,
  .streak-popup::-webkit-scrollbar { display: none; }

  .streak-close,
  .pc-modal .pc-close,
  .modal-close,
  .glossary-panel .close-btn {
    top: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
  }

  /* // MOBILE ONLY - Utility */
  img,
  video,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }

  .focus-ring:focus-visible,
  button:focus-visible,
  a:focus-visible,
  .menu-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
  }

  button,
  .btn,
  .chip {
    min-height: 44px;
  }

  .prevent-horizontal-scroll,
  body,
  main,
  .app-shell {
    overflow-x: hidden !important;
  }
}

@media screen and (max-width: 768px) {
  /* // MOBILE ONLY - Layout */
  body {
    padding-top: calc(env(safe-area-inset-top) + 6px);
  }

  .app-shell,
  main {
    padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  }

  /* // MOBILE ONLY - Navigation */
  .menu-toggle {
    width: 52px;
    height: 52px;
  }

  /* // MOBILE ONLY - Cards & Quiz */
  .flashcard,
  .flashcard-main,
  .quiz-settings,
  .study-options {
    padding: clamp(14px, 5vw, 22px);
  }

  .answer-scroll-container {
    max-height: clamp(180px, 40vh, 280px);
  }

  .fonti-content,
  .chi-siamo-content,
  .site-footer-contained {
    padding: clamp(18px, 5vw, 28px);
  }

  .subject-section-header {
    padding: clamp(14px, 4vw, 20px);
  }

  /* // MOBILE ONLY - Modali */
  .glossary-panel,
  .menu-spotlight,
  .pc-modal,
  .streak-sheet {
    width: min(92vw, 520px);
  }
}

@media screen and (max-width: 480px) {
  /* // MOBILE ONLY - Layout */
  html,
  body {
    font-size: clamp(14px, 3.4vw, 17px);
  }

  h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  /* // MOBILE ONLY - Navigation */
  .menu-toggle {
    width: 48px;
    height: 48px;
  }

  .menu-close {
    width: 44px;
    height: 44px;
  }

  /* // MOBILE ONLY - Cards & Quiz */
  .flashcard,
  .flashcard-main,
  .quiz-settings,
  .study-options,
  .fonti-content,
  .chi-siamo-content,
  .rating-section {
    padding: clamp(14px, 5vw, 20px);
  }

  .answer-scroll-container {
    max-height: 220px;
  }

  .results-actions,
  .rating-buttons {
    gap: 10px;
  }

  .rate-btn,
  .action-btn,
  .quiz-option {
    font-size: 0.95rem;
  }

  .glossary-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .glossary-hint__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .glossary-hint__dismiss {
    width: 100%;
    text-align: right;
  }

  /* // MOBILE ONLY - Modali */
  .glossary-panel,
  .menu-spotlight,
  .pc-modal,
  .streak-sheet,
  .token-modal .modal-content {
    width: 92vw;
    border-radius: 20px;
  }
}


/* Migrated mobile blocks from style.css */

@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;
    }
}
@media (max-width: 768px) {
    .user-greeting h2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .user-greeting .stat-image {
        margin-top: -5px;
    }
}
@media (max-width: 768px) {
  .global-search-wrap { order: 3; width: 100%; flex-basis: 100%; }
  .global-search { width: 100%; }
}
@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;
    }
}
@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: 16px 14px; grid-template-columns: 1fr auto 1fr; }
    .chi-siamo-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
    .chi-siamo-content { max-width: 95%; padding: 20px; }
    .logout-btn2 { width: auto; justify-content: flex-start; padding: 6px 0; }
    .chi-siamo-hero__brand { gap: 8px; }
    .logo-image2 { width: 44px; }
}
@media (max-width: 768px){ h30 { font-size: 2.6rem; } }
@media (max-width: 768px) {
    .site-footer-contained { max-width: 95%; width: auto; }
}
@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; }
}
@media (max-width: 768px) {
    .oral-subject {
        padding: 22px;
    }
}
@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;
    }
}
@media (max-width: 768px) {
  body .flashcards-screen .flashcards-header { gap: 10px; }
  body .flashcards-screen .header-stats { width: 100%; justify-content: space-between; }
  body .flashcards-screen .streak-launcher { flex: 1 1 auto; }
  body .flashcards-screen .management-buttons { order: 2; }
}
@media (max-width: 480px) {
    .menu-content {
        width: min(360px, 100vw);
    }

    .menu-toggle {
        top: 22px;
        left: 22px;
        width: 50px;
        height: 50px;
    }
}
@media (max-width: 1024px) {
    .flashcards-screen .flashcards-header {
        /* Mantiene l'unione anche su tablet */
        border-radius: 0;
    }

    .flashcards-screen .management-btn {
        min-width: 160px;
    }
}
@media (max-width: 768px) {
    .flashcards-screen {
        padding: 12px;
    }

    .flashcards-container {
        border-radius: 28px;
    }

    .flashcards-screen .flashcards-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .management-buttons,
    .header-stats {
        width: 100%;
    }

    .flashcards-screen .management-btn {
        width: 100%;
        min-width: 0;
    }

    .streak-launcher {
        width: 100%;
    }
}
@media (max-width: 980px){
  .study-hero{ gap: 16px; }
  .hero-visual{ min-height: 160px; }
  .metric-card{ padding: 10px 12px; }
}
@media (max-width: 680px){
  .hero-orbit{ transform: scale(.88); }
  .hero-orbit-hint{ bottom: 14px; font-size: 0.6rem; padding: 6px 12px; letter-spacing: 0.12em; }
  .hero-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .user-cards-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .flash-actions-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .flash-actions-row .action-icon {
    min-height: auto;
  }

  .hero-visual-toggle {
    width: 100%;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.12em;
  }

  .hero-visual-toggle span {
    white-space: normal;
  }

  .hero-text-top {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hero-text-top .hero-visual-toggle {
    margin-left: 0;
  }
}
@media (max-width: 768px) {
    .flashcards-screen .flashcards-header {
        padding: 15px 20px;
    }

    .study-options {
        padding: 20px;
    }

    .flashcard-main {
        padding: 15px;
    }

    .flashcard {
        height: 400px;
    }

    .session-header {
        padding: 15px 20px;
    }

    .rating-buttons-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
@media (max-width: 480px) {
    .flashcards-screen .flashcards-header {
        padding: 12px 15px;
    }

    .study-options {
        padding: 15px;
    }

    .flashcard-main {
        padding: 10px;
    }

    .flashcard {
        height: 350px;
    }

    .rating-section {
        padding: 20px 15px;
    }
}
@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: 0;
        background: var(--white);
        display: flex;
        flex-direction: column;
    }

    /* Header migliorato */
    .flashcards-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 20px 30px;
        display: flex;
        align-items: center;
        gap: 20px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

    .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;
    }

    .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: translateY(-5px);
        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: 15px 20px;
            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: 12px 15px;
        }

        .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);
    }
}
@media (max-width: 1024px) {
    .rating-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .rating-buttons-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rate-btn {
        min-height: 80px;
    }

    .flashcard {
        height: 450px !important;
    }

    .question-scroll-container h3 {
        font-size: 1.8rem !important;
    }

    .answer-scroll-container p {
        font-size: 1.4rem !important;
    }
}
@media (max-width: 480px) {
    .flashcard {
        height: 400px !important;
    }

    .flashcard-front,
    .flashcard-back {
        padding: 25px;
    }

    .question-scroll-container h3 {
        font-size: 1.5rem !important;
    }

    .answer-scroll-container p {
        font-size: 1.2rem !important;
    }

    .rate-btn {
        min-height: 70px;
        padding: 15px 12px;
    }

    .rate-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .rate-title {
        font-size: 1rem;
    }

    .rate-interval {
        font-size: 0.85rem;
    }
}
@media (max-width: 768px) {
    .stats-modal-container {
        max-width: 95%;
        max-height: 90vh;
    }
    .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;
    }

    .stats-panels-grid,
    .stats-secondary-grid {
        grid-template-columns: 1fr;
    }

    .stats-pill-grid {
        grid-template-columns: 1fr;
    }

    .stats-panel-card {
        padding: 18px;
    }

    .stats-details-hero {
        padding: 18px;
    }

    .stats-highlight-card {
        flex-direction: column;
        align-items: flex-start;
    }
}
@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;
    }

    .flashcard-info-btn {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
    }
}
@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;
    }
}
@media (max-width: 480px) {
    .rating-footer {
        flex-direction: column;
    }

    .rating-footer .secondary-btn {
        width: 100%;
        min-width: auto;
    }
}
@media (max-width: 768px) {
    body.dark-mode .dark-mode-toggle {
        padding: 8px 15px;
        font-size: 0.85rem;
        margin-right: 0;
        margin-bottom: 10px;
    }

    body.dark-mode .dark-mode-toggle span {
        display: none;
    }
}
@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 img {
    width: 60px;
    height: 64px;
    margin: 0 auto 18px;
  }

  .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;
    }

    .dark-mode-toggle {
        padding: 8px 15px;
        font-size: 0.85rem;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .dark-mode-toggle span {
        display: none;
    }

    .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;
    }
}
@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;
    }
}
@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%;
    }
}
@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;
    }
}
@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;
  }
}
@media (max-width: 768px){
  #modes-help-modal .modal-container{ margin: 4vh auto; width: 94%; }
  #modes-help-modal .grid-two-cols{ grid-template-columns: 1fr; }
}
@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-week{
    grid-template-columns: repeat(4, minmax(48px,1fr));
  }
}
@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;
    }
}
@media (max-width:1120px){
  .menu-collab-panel{padding:clamp(48px,10vh,100px) clamp(16px,5vw,60px) clamp(36px,8vh,80px) clamp(24px,6vw,70px);justify-content:center}
}
@media (max-width:640px){
  .menu-collab-panel{padding:clamp(28px,8vh,60px) clamp(16px,7vw,32px);align-items:flex-start}
  .menu-collab-panel.is-open .menu-spotlight{transform:translateY(0) scale(1)}
  .menu-spotlight{padding:24px;border-radius:26px;max-width:100%}
  .menu-collab__grid{gap:18px}
  .menu-collab-step{flex-direction:column;align-items:flex-start}
  .menu-collab-step__index{border-radius:12px}
}
@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}}
@media (max-width: 560px){
  .collab-overlay{left:14px;right:14px;bottom:18px;width:auto}
}
@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 (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%, -46%) scale(1); }
  .glossary-header { border-radius: 12px; margin-bottom: 10px; }
  .glossary-actions { justify-content: flex-start; }
}

/* Flashcards mobile overrides relocated from flashcards-mobile.css */
/* ==========================================================================
   Flashcards – Mobile overrides
   Dedicated stylesheet loaded only on narrow viewports to keep
   the flashcard experience readable and touch friendly.
   ========================================================================== */

body .flashcards-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body .flashcards-screen .flashcards-container {
    flex: 1;
    border-radius: 0;
    box-shadow: none;
}

body .flashcards-screen .flashcards-container {
    padding: 24px clamp(16px, 4vw, 32px) calc(90px + env(safe-area-inset-bottom, 0px));
}

/* Header */
body .flashcards-screen .flashcards-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px clamp(16px, 4vw, 32px) 60px;
}

body .flashcards-screen .flashcards-header .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .flashcards-screen .flashcards-header .header-title h3 {
    font-size: 1.3rem;
}

body .flashcards-screen .flashcards-header .header-stats {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

body .flashcards-screen .flashcards-header .stat-badge,
body .flashcards-screen .flashcards-header .streak-launcher {
    flex: 1 1 calc(50% - 12px);
    min-width: 160px;
}

body .flashcards-screen .flashcards-header .back-arrow-btn-small {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

/* Floating actions (hero) */
body .flashcards-screen .study-hero .flash-actions-dock {
    width: 100%;
    justify-content: center;
    margin: clamp(12px, 2vw, 18px) auto 0;
    padding: clamp(10px, 2.8vw, 16px);
    border-radius: 22px;
}

body .flashcards-screen .study-hero .flash-actions-row {
    gap: clamp(10px, 2vw, 16px);
    width: 100%;
}

body .flashcards-screen .study-hero .flash-actions-row .action-icon {
    border-radius: 0;
    padding-inline: 0;
}

/* Study hero & options */
body .flashcards-screen .study-options {
    padding: 0;
}

body .flashcards-screen .study-hero {
    padding: clamp(18px, 5vw, 26px);
    gap: clamp(14px, 3vw, 22px);
}

body .flashcards-screen .hero-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 150px;
    justify-content: center;
}

body .flashcards-screen .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .flashcards-screen .study-option-card {
    padding: 18px;
    gap: 16px;
    align-items: flex-start;
}

body .flashcards-screen .card-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 1.4rem;
}

body .flashcards-screen .card-content h4 {
    font-size: 1.15rem;
}

body .flashcards-screen .card-content p {
    font-size: 0.95rem;
}

body .flashcards-screen .card-progress {
    gap: 8px;
}

body .flashcards-screen .user-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

body .flashcards-screen .user-cards-copy {
    font-size: 0.95rem;
}

/* Session header */
body .flashcards-screen .study-session {
    margin-top: 30px;
}

body .flashcards-screen .session-header {
    padding: 16px;
    position: sticky;
    top: 0;
}

body .flashcards-screen .session-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

body .flashcards-screen .session-stats {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
}

body .flashcards-screen .session-stats .stat {
    font-size: 0.85rem;
}

body .flashcards-screen .session-progress {
    padding: 12px;
}

/* Flashcard area */
body .flashcards-screen .flashcard-main {
    padding: 0;
}

body .flashcards-screen .flashcard-container-large {
    margin: 0 0 22px;
    padding: 0;
}

body .flashcards-screen .flashcard {
    max-width: 100%;
    height: min(480px, 65vh);
}

body .flashcards-screen .flashcard-front,
body .flashcards-screen .flashcard-back {
    padding: 22px;
    border-radius: 18px;
}

body .flashcards-screen .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body .flashcards-screen .question-scroll-container,
body .flashcards-screen .answer-scroll-container {
    max-height: clamp(200px, 48vh, 360px);
    margin: 12px 0;
    padding-right: 8px;
}

body .flashcards-screen .flashcard-front h3 {
    font-size: clamp(1.2rem, 4vw, 1.75rem);
}

body .flashcards-screen .flashcard-back p {
    font-size: clamp(1.05rem, 3.8vw, 1.45rem);
}

body .flashcards-screen .card-hint {
    font-size: 0.82rem;
}

body .flashcards-screen .flashcard-ai-trigger {
    margin: clamp(16px, 4vw, 24px) auto 0;
    width: clamp(48px, 9vw, 64px);
    aspect-ratio: 1;
}

/* Rating */
body .flashcards-screen .rating-section {
    padding: clamp(18px, 6vw, 26px);
}

body .flashcards-screen .rating-buttons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body .flashcards-screen .rate-btn {
    width: 100%;
}

body .flashcards-screen #rating-section .rate-btn {
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 18px;
}

body .flashcards-screen #rating-section .rate-btn .rate-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

body .flashcards-screen .rating-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body .flashcards-screen .rating-footer button {
    flex: 1 1 48%;
    min-width: 180px;
    justify-content: center;
}

/* Controls & completion */
body .flashcards-screen .flashcard-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

body .flashcards-screen .flashcard-btn {
    width: 100%;
    justify-content: center;
}

body .flashcards-screen .flashcard-progress {
    width: 100%;
    text-align: center;
}

body .flashcards-screen .session-complete .summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

body .flashcards-screen .completion-actions {
    flex-wrap: wrap;
    gap: 12px;
}

body .flashcards-screen .completion-actions button {
    flex: 1 1 48%;
    min-width: 180px;
}

/* Narrower tweaks */
@media (max-width: 768px) {
    body .flashcards-screen .flashcards-header {
        padding-bottom: 56px;
    }

    body .flashcards-screen .flashcards-header .stat-badge,
    body .flashcards-screen .flashcards-header .streak-launcher {
        flex: 1 1 100%;
    }

    body .flashcards-screen .flashcards-container {
        padding: 20px clamp(14px, 6vw, 28px) calc(82px + env(safe-area-inset-bottom, 0px));
    }

    body .flashcards-screen .hero-btn {
        flex: 1 1 100%;
    }

    body .flashcards-screen .hero-metrics {
        grid-template-columns: 1fr;
    }

    body .flashcards-screen .study-option-card {
        flex-direction: column;
    }

    body .flashcards-screen .user-cards-grid {
        grid-template-columns: 1fr;
    }

    body .flashcards-screen .session-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    body .flashcards-screen .flashcard {
        height: min(420px, 62vh);
    }

    body .flashcards-screen .rating-buttons-grid {
        grid-template-columns: 1fr;
    }

    body .flashcards-screen .rating-footer button,
    body .flashcards-screen .completion-actions button {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 540px) {
    body .flashcards-screen .flashcards-header {
        padding: 16px clamp(12px, 6vw, 24px) 50px;
        gap: 10px;
    }

    body .flashcards-screen .study-hero .flash-actions-row {
        gap: 10px;
    }

    body .flashcards-screen .flashcard {
        height: min(400px, 60vh);
    }

    body .flashcards-screen .card-icon {
        width: 52px;
        height: 52px;
    }

    body .flashcards-screen .session-header {
        position: static;
    }
}

.rating-section,
body .flashcards-screen .rating-section {
    max-width: 720px;
    padding: clamp(10px, 4vw, 16px);
    gap: clamp(8px, 3vw, 12px);
}

body .flashcards-screen .rating-buttons-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(8px, 3vw, 12px);
}

body .flashcards-screen #rating-section .rate-btn {
    border-radius: 15px;
    padding: clamp(8px, 4vw, 12px);
    gap: 8px;
    align-items: center;
    text-align: center;
    flex-direction: row;
}

body .flashcards-screen #rating-section .rate-btn .rate-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.1rem;
}

body .flashcards-screen #rating-section .rate-btn .rate-title {
    font-size: 1rem;
}

body .flashcards-screen #rating-section .rate-btn .rate-interval {
    font-size: 0.9rem;
}

.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); }
}