/* Authentication mobile styles. Generated from the legacy stylesheet; keep source order. */
/* // 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);
  }

  /* Quando è visibile auth-screen usa solo il background React del login */
  body:has(#auth-screen:not([hidden]):not([style*="display: none"])) {
    background-image: none !important;
  }

  body.dark-mode:has(#auth-screen:not([hidden]):not([style*="display: none"])) {
    background-image: none !important;
  }

  body {
    padding-top: 0;
    padding-bottom: 0;
    scroll-padding-top: calc(70px + 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;
  }

  /* Auth full-bleed: evita bordi laterali del background body */
  #auth-screen {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  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;
    padding: clamp(12px, 3vw, 24px);
  }

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

  #auth-screen .app-logo h1 {
    font-family: 'Lobster', 'Lobester', cursive;
    font-weight: 400;
    font-synthesis: none;
  }

  #auth-screen .auth-form {
    width: 100%;
    max-width: min(100%, 620px);
    padding: clamp(18px, 4vw, 28px);
    border-radius: clamp(14px, 2.2vw, 20px);
  }

  #auth-screen #auth-forms {
    width: min(100%, 680px);
  }

  #login-form,
  #register-form {
    text-align: left;
  }

  #login-form h2,
  #register-form h2 {
    margin-bottom: 16px;
    font-size: clamp(1.45rem, 3.2vw, 1.8rem);
  }

  #login-form .checkbox-group,
  #register-form .checkbox-group {
    justify-content: start;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
  }

  #login-form .checkbox-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
  }

  #login-form #remember-me {
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
  }

  #login-form .checkbox-group label[for="remember-me"] {
    margin: 0;
    white-space: nowrap;
    line-height: 1.1;
  }

  #login-form .auth-btn,
  #register-form .auth-btn {
    min-height: 48px;
    margin-top: 8px;
  }

  #login-form .auth-switch,
  #register-form .auth-switch {
    margin-top: 14px;
    font-size: clamp(0.9rem, 1.7vw, 0.98rem);
  }

  #login-form .auth-extra-actions,
  #register-form .auth-extra-actions,
  #login-form #forgot-password-panel > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
  }

  #login-form #forgot-password-panel {
    margin-top: 10px !important;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
  }

  #login-form #forgot-password-panel h2 {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    margin-bottom: 6px !important;
  }

  #login-form #forgot-password-panel p {
    font-size: clamp(0.75rem, 1.4vw, 0.86rem) !important;
    line-height: 1.35;
    margin-bottom: 8px !important;
  }

  #login-form .auth-meta,
  #register-form .auth-meta {
    margin-top: 12px;
    padding-top: 10px;
  }

  #login-form .auth-meta-phrase,
  #register-form .auth-meta-phrase {
    font-size: clamp(0.84rem, 1.6vw, 0.94rem);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    text-align: center;
  }

  #login-form .auth-meta-phrase .auth-meta-instagram,
  #register-form .auth-meta-phrase .auth-meta-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 0;
  }

  #login-form .auth-meta-phrase .instagram-icon,
  #register-form .auth-meta-phrase .instagram-icon {
    font-size: clamp(1.35rem, 2.9vw, 1.8rem);
    color: #bdb9bb;
  }

  #login-form .auth-meta-actions,
  #register-form .auth-meta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

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

  /* Channel cards: 3 quadrati in una sola fila */
  .channel-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.6vw, 10px);
  }

  .channel-card {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: clamp(8px, 1.8vw, 12px) clamp(6px, 1.4vw, 10px);
    border-radius: clamp(12px, 2vw, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(5px, 1.3vw, 9px);
  }

  .channel-card .channel-icon {
    width: clamp(32px, 4.6vw, 40px);
    height: clamp(32px, 4.6vw, 40px);
    margin: 0;
    font-size: clamp(1rem, 2.3vw, 1.16rem);
  }

  .channel-card h4 {
    margin: 0;
    font-size: clamp(0.82rem, 2.1vw, 0.98rem);
    line-height: 1.16;
  }

  .channel-card p {
    margin: 0;
    font-size: clamp(0.66rem, 1.7vw, 0.8rem);
    line-height: 1.18;
  }

  /* Subject cards: quadrati 2 a 2 fino a giù */
  .subject-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .subject-card {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 28px 10px 10px;
    border-radius: 16px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    justify-items: center;
    align-content: stretch;
    text-align: center;
    row-gap: 7px;
    column-gap: 8px;
  }

  .subject-card .subject-icon {
    grid-column: 1 / -1;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    font-size: 1.3rem;
    place-self: center;
  }

  .subject-card h4 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.23;
  }

  .subject-card p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.25;
  }

  /* Evita sovrapposizione badge nelle card strette */
  .subject-card .channel-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 3px 7px;
    font-size: 0.72rem;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
  }

  .subject-card .question-count-badge {
    left: 8px;
    right: auto;
  }

  .subject-card .channel-badge:not(.question-count-badge) {
    right: 8px;
    left: auto;
  }

  #user-dashboard .dashboard-header {
    width: calc(100% + 0.75rem);
    margin-inline: -0.375rem;
    margin-top: calc(env(safe-area-inset-top) + 18px);
    margin-bottom: 10px;
    padding: clamp(18px, 4vw, 24px);
  }

  #user-dashboard .user-greeting h2 {
    margin-right: 0;
    width: 100%;
    font-size: clamp(1.5rem, 5.8vw, 1.95rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .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);
    left: clamp(14px, 4vw, 24px);
    right: 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: 0;
    right: auto;
    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: 16px 14px;
    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.14em;
    font-size: 0.64rem;
  }

  .menu-title-block h3 {
    font-size: clamp(1.12rem, 4.2vw, 1.28rem);
  }

  .menu-eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.2em;
  }

  .menu-user-inline {
    font-size: clamp(0.78rem, 2.9vw, 0.9rem);
  }

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

  .menu-nav {
    padding-bottom: clamp(12px, 3vh, 24px);
  }

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

/* Layout mobile definitivo dell'header quiz. */
@media screen and (max-width: 1024px) {
  #quiz-screen .quiz-header {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: clamp(40px, 11vw, 48px) minmax(0, 1fr);
    grid-template-areas:
      "back progress"
      "counter timer"
      "score score";
    gap: clamp(8px, 2vw, 12px);
    width: 100%;
    min-width: 0;
    padding: clamp(12px, 3vw, 18px);
    align-items: stretch;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2 {
    grid-area: back;
    width: 100%;
    max-width: 48px;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    margin: 0 !important;
    align-self: center;
    justify-self: start;
    border-radius: clamp(10px, 2.5vw, 14px);
    font-size: clamp(1.05rem, 3.8vw, 1.35rem);
    transform: none !important;
    animation: none !important;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2::before,
  #quiz-screen .quiz-header #back-to-dashboard-btn2::after {
    display: none;
  }

  #quiz-screen .quiz-header .quiz-progress {
    grid-area: progress;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    align-self: center;
  }

  #quiz-screen .quiz-header .quiz-counter,
  #quiz-screen .quiz-header .quiz-score {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: clamp(40px, 9vw, 48px);
    margin: 0;
    padding: clamp(8px, 2vw, 11px) clamp(10px, 2.5vw, 14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: clamp(10px, 2.5vw, 14px);
    background: rgba(255, 255, 255, 0.12);
    font-size: clamp(0.82rem, 2.4vw, 0.98rem);
    line-height: 1.2;
  }

  #quiz-screen .quiz-header .quiz-counter {
    grid-area: counter;
    justify-content: center;
  }

  #quiz-screen .quiz-header .quiz-timer {
    grid-area: timer;
    justify-content: center;
  }

  #quiz-screen .quiz-header .quiz-score {
    grid-area: score;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    justify-content: initial;
    align-items: center;
  }

  #quiz-screen .quiz-header .quiz-score #current-score {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #quiz-screen .quiz-header .quiz-score #openGlossaryBtn {
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
  }

  #quiz-screen .quiz-header .progress-bar {
    height: clamp(6px, 1.5vw, 8px);
    margin-bottom: 7px;
  }

  #quiz-screen .quiz-header #progress-text {
    font-size: clamp(0.76rem, 2.1vw, 0.9rem);
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media screen and (max-width: 380px) {
  #quiz-screen .quiz-header {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2 {
    max-width: 36px;
  }

  #quiz-screen .quiz-header .quiz-score {
    gap: 6px;
  }

  #quiz-screen .quiz-header .quiz-score #openGlossaryBtn {
    padding: 5px 8px;
  }
}

/* Dashboard mobile: header a filo superiore e toggle coerente con la card. */
@media screen and (max-width: 768px) {
  #user-dashboard .dashboard-header {
    margin-top: 0;
  }

  #user-dashboard .global-search {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 7px 10px;
    border-radius: 13px;
    box-sizing: border-box;
  }

  #user-dashboard .global-search input {
    font-size: .9rem;
    line-height: 1.2;
    min-height: 0;
  }

  #user-dashboard .global-search__clear {
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
  }

  #user-dashboard .profile-trigger { width: 52px; height: 52px; min-height: 52px; justify-content: center; padding: 0; border-radius: var(--border-radius); }
  #user-dashboard .profile-trigger__copy, #user-dashboard .profile-trigger__chevron { display: none; }
  #user-dashboard .profile-panel { position: fixed; top: calc(env(safe-area-inset-top) + 76px); right: 12px; width: min(430px, calc(100% - 24px)); max-height: calc(100vh - 92px); overflow-y: auto; }

  #user-dashboard .user-greeting .menu-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    background: var(--surface-card);
    color: var(--primary-color);
    box-shadow: var(--shadow-card-soft);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background-color .2s ease,
      border-color .2s ease, box-shadow .2s ease;
  }

  #user-dashboard .user-greeting .menu-toggle i {
    font-size: 1.15rem;
  }

  #user-dashboard .user-greeting .menu-toggle:hover,
  #user-dashboard .user-greeting .menu-toggle:focus-visible {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 10px 24px rgba(128, 36, 51, .24);
    transform: translateY(-1px);
  }

  #user-dashboard .user-greeting .menu-toggle:active {
    transform: scale(.96);
  }

  body.dark-mode #user-dashboard .user-greeting .menu-toggle {
    background: var(--dark-bg-secondary, #1b1b1b);
    color: var(--dark-primary, #c77b85);
    border-color: var(--dark-border, rgba(255,255,255,.12));
  }
}

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

  .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: 50px;
    height: 50px;
  }

  /* // 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;
  }

  #auth-screen {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  #auth-screen #auth-forms {
    width: 100%;
  }

  #auth-screen .auth-form {
    padding: 16px 14px;
    border-radius: 14px;
  }

  #login-form #forgot-password-panel p {
    font-size: 0.78rem !important;
  }
}

/* Header quiz responsive: il tasto indietro resta sempre nella prima colonna. */
@media screen and (max-width: 1024px) {
  #quiz-screen .quiz-header {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: clamp(38px, 6vw, 46px) minmax(0, 1fr);
    gap: clamp(6px, 1.5vw, 10px);
    overflow: hidden;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2 {
    box-sizing: border-box;
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    max-width: 46px;
    max-height: 46px;
    margin: 0 !important;
    align-self: center;
    justify-self: start;
    transform: none !important;
    animation: none;
    z-index: 1 !important;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2::before,
  #quiz-screen .quiz-header #back-to-dashboard-btn2::after {
    display: none;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2 i {
    font-size: clamp(1rem, 3.5vw, 1.35rem);
  }

  #quiz-screen .quiz-header .quiz-progress {
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: center;
    margin: 0;
  }
}

@media screen and (max-width: 360px) {
  #quiz-screen .quiz-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  #quiz-screen .quiz-header #back-to-dashboard-btn2 {
    max-width: 36px;
    max-height: 36px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #auth-screen {
    justify-content: center;
    padding: 24px;
  }

  #auth-screen #auth-forms {
    max-width: 760px;
  }

  #auth-screen .auth-form {
    padding: 24px 22px;
  }

  #login-form .auth-meta-actions,
  #register-form .auth-meta-actions {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  #login-form .auth-extra-actions,
  #register-form .auth-extra-actions,
  #login-form #forgot-password-panel > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #login-form .auth-extra-actions {
    grid-template-columns: 1fr;
  }

  #login-form #guest-trial-btn {
    width: 100%;
    min-height: 48px;
  }
}