/* ==========================================================================
   QUIZ.CSS - Quiz Card, Choices, Results, Navigation
   ========================================================================== */

@property --quiz-content-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

/* --- Welcome Screen --- */
#welcome-screen {
    position: relative;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "brand"
        "actions";
    align-items: start;
    column-gap: clamp(20px, 4vw, 42px);
    row-gap: 14px;
    width: min(1040px, 100%);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    --welcome-scale: 1;
    transform: translate3d(var(--welcome-shift-x, 0), var(--welcome-shift-y, 0), 0) scale(var(--welcome-scale));
    transform-origin: center;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-items: start;
}

#welcome-screen::before,
#welcome-screen::after {
    content: none;
}

#welcome-neural-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

body.welcome-mode #welcome-neural-canvas {
    display: block;
    cursor: grab;
}

body.welcome-mode #welcome-neural-canvas:active {
    cursor: grabbing;
}

#quiz-pane > #ambient-particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0.74;
    mix-blend-mode: screen;
    filter: saturate(1.08);
}

body.ambient-particles-on:not(.welcome-mode):not(.zen-active) #quiz-pane > #ambient-particle-canvas {
    display: block;
}

body.a11y-reduce-motion #quiz-pane > #ambient-particle-canvas,
body.welcome-mode #quiz-pane > #ambient-particle-canvas,
body.zen-active #quiz-pane > #ambient-particle-canvas {
    display: none;
}

body.welcome-mode #quiz-pane {
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(24px, 5vw, 76px);
    background:
        radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--g2, #f472b6) 20%, transparent) 0%, transparent 27%),
        radial-gradient(circle at 16% 84%, color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent) 0%, transparent 28%),
        linear-gradient(135deg, #030711 0%, #09182b 45%, #140719 100%);
}

#quiz-pane > .quiz-pane-neural-network {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible;
    color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    opacity: 0.52;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    animation: quizPaneSkeletonDrift 34s ease-in-out infinite alternate;
}

.quiz-pane-neural-link {
    vector-effect: non-scaling-stroke;
    transition: opacity 340ms ease;
    stroke: currentColor;
    stroke-width: 0.72;
    stroke-linecap: round;
    fill: none;
}

.quiz-pane-neural-link.is-broken-wide {
    stroke-dasharray: 13 18 4 22;
    stroke-width: 0.82;
}

.quiz-pane-neural-link.is-broken-fine {
    stroke-dasharray: 5 11 2 9;
    stroke-width: 0.58;
}

.quiz-pane-neural-link.is-hairline {
    stroke-dasharray: 18 26;
    stroke-width: 0.42;
}

.quiz-pane-neural-link.is-strong {
    stroke-dasharray: 24 9 7 15;
    stroke-width: 0.95;
}

body:not(.welcome-mode) #quiz-pane > #welcome-screen,
body:not(.welcome-mode) #quiz-pane > #quiz-mode-container,
body:not(.welcome-mode) #quiz-pane > #study-dashboard-surface,
body:not(.welcome-mode) #quiz-pane > #study-setup-surface {
    position: relative;
    z-index: 1;
}

body.zen-active #quiz-pane > .quiz-pane-neural-network,
body.welcome-mode #quiz-pane > .quiz-pane-neural-network,
#quiz-pane > .quiz-pane-neural-network[hidden] {
    display: none;
}

@keyframes quizPaneSkeletonDrift {
    0% {
        transform: translate3d(-8px, -6px, 0) scale(1);
    }
    100% {
        transform: translate3d(10px, 8px, 0) scale(1.018);
    }
}

@media (prefers-reduced-motion: reduce) {
    #quiz-pane > .quiz-pane-neural-network {
        animation: none !important;
        transform: none;
    }
}

#welcome-screen > * {
    position: relative;
    z-index: 1;
}

body.welcome-mode.welcome-neural-interactive #welcome-screen {
    pointer-events: none;
}

body.welcome-mode #welcome-screen .welcome-btn {
    pointer-events: auto;
}

body.welcome-mode:not(.welcome-neural-interactive) #welcome-neural-canvas {
    pointer-events: none;
}

body.welcome-mode #welcome-neural-canvas {
    animation: welcome-soft-fade-in 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.welcome-mode #welcome-screen {
    animation: welcome-screen-fade-in 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.welcome-mode .welcome-calendar-btn,
body.welcome-mode .welcome-donate,
body.welcome-mode .public-tour-launcher-row {
    animation: welcome-element-fade-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.welcome-mode .welcome-calendar-btn,
body.welcome-mode .welcome-donate,
body.welcome-mode .public-tour-launcher-row {
    animation-delay: 220ms;
}

body.welcome-mode #welcome-screen .welcome-brand-stage {
    animation: welcome-element-fade-in 1120ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-actions {
    animation: welcome-element-fade-in 1120ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}

@keyframes welcome-soft-fade-in {
    0% {
        opacity: 0;
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes welcome-screen-fade-in {
    0% {
        opacity: 0;
        filter: blur(5px) saturate(0.92);
    }

    100% {
        opacity: 1;
        filter: blur(0) saturate(1);
    }
}

@keyframes welcome-element-fade-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        filter: blur(4px) brightness(0.96);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0) brightness(1);
    }
}

body.welcome-mode .welcome-progressive-surface {
    transition:
        opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear;
}

body.welcome-mode .welcome-progressive-surface.is-pending-reveal {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-mode #welcome-neural-canvas,
    body.welcome-mode #welcome-screen,
    body.welcome-mode .welcome-calendar-btn,
    body.welcome-mode .welcome-donate,
    body.welcome-mode .public-tour-launcher-row,
    body.welcome-mode .welcome-warmup,
    body.welcome-mode .welcome-status,
    body.welcome-mode #welcome-screen .welcome-brand-stage,
    body.welcome-mode #welcome-screen .welcome-actions {
        animation: none !important;
    }

    body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn {
        animation: none !important;
    }
}

.welcome-donate {
    position: fixed;
    top: var(--welcome-tour-edge, 16px);
    right: var(--welcome-tour-edge, 16px);
    z-index: 12020;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: min(390px, calc(100vw - (var(--welcome-tour-edge, 16px) * 2)));
}

/* Support opens as a centered landscape panel from Settings/Tools. */
.welcome-donate[open] {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(900px, calc(100vw - 32px));
    max-width: min(900px, calc(100vw - 32px));
    align-items: stretch;
    translate: -50% -50%;
}

body.public-floating-hidden .welcome-donate {
    display: none !important;
}

body.public-floating-hidden .welcome-calendar-btn {
    display: none !important;
}

.welcome-donate summary {
    list-style: none;
}

.welcome-donate summary::-webkit-details-marker {
    display: none;
}

/* Support Us is opened from Tools; keep its popup owner mounted without
   rendering a duplicate floating trigger on Welcome or Quiz screens. */
.welcome-donate .welcome-donate-toggle {
    display: none !important;
}

.welcome-donate-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--btn-radius-pill);
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 64%, rgba(255, 255, 255, 0.16) 36%);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--btn-theme-surface-strong, rgba(15, 23, 42, 0.68)) 52%, transparent) 0%,
            color-mix(in srgb, var(--btn-theme-surface, rgba(15, 23, 42, 0.48)) 34%, transparent) 100%);
    color: var(--btn-text);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 16%, transparent 84%),
        0 10px 24px rgba(2, 6, 23, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.welcome-donate-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6));
    box-shadow: 0 0 10px color-mix(in srgb, var(--g2, #f472b6) 38%, transparent);
}

.welcome-donate-toggle:hover,
.welcome-donate[open] .welcome-donate-toggle {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 34%, var(--btn-theme-border, #334155) 66%);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--btn-theme-surface-strong, rgba(15, 23, 42, 0.74)) 60%, transparent) 0%,
            color-mix(in srgb, var(--btn-theme-surface, rgba(15, 23, 42, 0.54)) 40%, transparent) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
        0 14px 28px rgba(2, 6, 23, 0.22);
    filter: saturate(1.05);
}

.welcome-donate-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.45fr);
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin-top: 0;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, var(--g1, #60a5fa)) 52%, var(--text-main, #e2e8f0) 48%);
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--g2, #f472b6) 16%, transparent) 0%, transparent 46%),
        linear-gradient(165deg,
            color-mix(in srgb, var(--bg, #0b1220) 88%, var(--g1, #60a5fa) 12%) 0%,
            color-mix(in srgb, var(--bg, #0b1220) 88%, var(--g2, #f472b6) 12%) 100%);
    box-shadow:
        0 26px 70px color-mix(in srgb, var(--bg, #0b1220) 70%, transparent),
        0 0 0 1px color-mix(in srgb, var(--btn-theme-border, var(--g1, #60a5fa)) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: left;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: inset(0 round 24px);
    filter: saturate(0.92);
}

.welcome-donate-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.welcome-donate-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 10px;
    min-width: 0;
}

.welcome-donate-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg, #0b1220) 82%, var(--g1, #60a5fa) 18%);
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, var(--g1, #60a5fa) 12%);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.welcome-donate-title {
    margin: 12px 0 0;
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, white 12%);
    font-size: 0.9rem;
    font-weight: 560;
    line-height: 1.62;
    letter-spacing: 0;
}

.welcome-donate-copy {
    margin: 8px 0 0;
    color: color-mix(in srgb, var(--text-sub, #cbd5e1) 88%, white 12%);
    font-size: 0.82rem;
    line-height: 1.5;
}

.welcome-donate-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 22%, rgba(255, 255, 255, 0.12) 78%);
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--bg, #0b1220) 82%, var(--g1, #60a5fa) 18%),
        color-mix(in srgb, var(--bg, #0b1220) 84%, var(--g2, #f472b6) 16%));
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.welcome-donate-method:hover {
    transform: translateY(-1px);
    border-color: var(--btn-border-strong);
    background: var(--btn-surface-hover);
    box-shadow: var(--btn-shadow-hover);
}

.welcome-donate-method-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.welcome-donate-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.welcome-donate-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.welcome-donate-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.welcome-donate-label {
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 88%, white 12%);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
}

.welcome-donate-value {
    min-width: 0;
    color: var(--btn-text);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-donate-method[href*="zellepay.com"] .welcome-donate-value {
    font-size: 0.64rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.welcome-donate-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border) 30%, rgba(255, 255, 255, 0.12) 70%);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.08) 60%, transparent);
    color: color-mix(in srgb, var(--btn-text, var(--text-main, #e2e8f0)) 90%, var(--g1, #60a5fa) 10%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

#welcome-screen .welcome-brand-stage {
    grid-area: brand;
    position: relative;
    width: min(960px, 100%);
    min-height: clamp(160px, 18vw, 220px);
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 12px);
    justify-self: start;
    user-select: none;
}

/* Logo container & dynamic glass bubble */
#welcome-screen .welcome-logo-container {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    width: clamp(80px, 11vw, 150px);
    height: clamp(80px, 11vw, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    animation: logo-mark-reveal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#welcome-screen .welcome-logo-container::before,
#welcome-screen .welcome-logo-container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    display: none;
}

#welcome-screen .welcome-logo-container:hover {
    transform: translateY(-6px) scale(1.045);
    border-color: transparent;
    box-shadow: none;
}

/* Site M mark inside the glass bubble */
#welcome-screen .welcome-logo-mark {
    --welcome-logo-mark-offset-y: clamp(2px, 0.35vw, 6px);
    position: relative;
    z-index: 2;
    display: block;
    width: 76%;
    height: 76%;
    overflow: visible;
    flex: 0 0 auto;
    filter: drop-shadow(0 10px 18px rgba(2, 8, 23, 0.26));
    transform: translateY(var(--welcome-logo-mark-offset-y));
    transition: filter 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

#welcome-screen .welcome-logo-container:hover .welcome-logo-mark {
    filter: drop-shadow(0 14px 24px rgba(2, 8, 23, 0.32)) brightness(1.07);
    transform: translateY(var(--welcome-logo-mark-offset-y)) scale(1.025);
}

#welcome-screen .welcome-logo-sphere {
    fill: none;
    stroke: rgba(219, 234, 254, 0.18);
    stroke-width: 0.9;
    stroke-dasharray: 3 6;
    transform-box: view-box;
    transform-origin: 50px 52px;
    animation: welcome-logo-sphere-precess 12s linear infinite;
}

#welcome-screen .welcome-logo-sphere--tilt-a {
    stroke: color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent);
    transform: rotate(58deg);
    animation-duration: 15s;
    animation-direction: reverse;
}

#welcome-screen .welcome-logo-sphere--tilt-b {
    stroke: color-mix(in srgb, var(--g2, #f472b6) 25%, transparent);
    transform: rotate(-54deg);
    animation-duration: 18s;
}

#welcome-screen .welcome-logo-mark-g {
    transform: none !important;
}

#welcome-screen .welcome-logo-mark-text {
    font-family: var(--font-main, 'Times New Roman', Times, serif);
    font-weight: 800;
    font-size: 98px;
    fill: url(#welcome-logo-grad);
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent));
    transform: none !important;
}

#welcome-screen .welcome-logo-orbit {
    transform-box: view-box;
    will-change: transform;
}

#welcome-screen .welcome-logo-node {
    transform-box: fill-box;
    transform-origin: center;
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 0.65;
    filter: drop-shadow(0 2px 4px rgba(2, 8, 23, 0.34)) drop-shadow(0 0 8px color-mix(in srgb, var(--g1, #60a5fa) 28%, transparent));
    animation: welcome-logo-node-bob 3.8s ease-in-out infinite;
    will-change: transform;
}

#welcome-screen .welcome-logo-node--blue {
    fill: url(#welcome-logo-node-blue);
}

#welcome-screen .welcome-logo-node--pink {
    fill: url(#welcome-logo-node-pink);
}

#welcome-screen .welcome-logo-node--white {
    fill: url(#welcome-logo-node-white);
}

#welcome-screen .welcome-logo-orbit--two .welcome-logo-node {
    animation-delay: -1.3s;
}

#welcome-screen .welcome-logo-orbit--three .welcome-logo-node {
    animation-delay: -2.2s;
}

@media (prefers-reduced-motion: reduce) {
    #welcome-screen .welcome-logo-container,
    #welcome-screen .welcome-logo-container::before,
    #welcome-screen .welcome-logo-sphere,
    #welcome-screen .welcome-logo-orbit,
    #welcome-screen .welcome-logo-node {
        animation: none;
    }
}

/* Brand Title text - Times New Roman with Premium Theme Gradient */
#welcome-screen .welcome-title {
    position: relative;
    z-index: 3;
    width: max-content;
    max-width: 100%;
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    background: linear-gradient(90deg, var(--g1, #60a5fa) 0%, var(--g2, #f472b6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: clamp(4.4rem, 10vw, 11rem);
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 0 40px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: logo-text-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

#welcome-screen .welcome-brand-stage:hover .welcome-title {
    transform: translateY(-2px) scale(1.01);
    text-shadow: 
        0 0 24px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent),
        0 0 36px color-mix(in srgb, var(--g2, #f472b6) 18%, transparent);
}

#welcome-screen .welcome-title::before,
#welcome-screen .welcome-title::after {
    content: none;
}

.welcome-title-a {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--g1, #60a5fa) 38%, var(--g2, #f472b6) 62%) 0%,
        color-mix(in srgb, var(--g2, #f472b6) 84%, white 16%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    outline: none;
    cursor: inherit;
}

.welcome-title-a:hover,
.welcome-title-a:focus-visible {
    text-shadow:
        0 0 18px color-mix(in srgb, var(--g1, #60a5fa) 28%, transparent),
        0 0 26px color-mix(in srgb, var(--g2, #f472b6) 18%, transparent);
}

@keyframes welcome-gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 160% 48%;
    }

    100% {
        background-position: 320% 50%;
    }
}

@media (max-width: 900px) {
    #welcome-screen {
        --welcome-scale: 1.01;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
        body.welcome-mode #welcome-screen {
            background:
                radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent) 0%, transparent 34%),
                radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--g2, #f472b6) 13%, transparent) 0%, transparent 36%),
                radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--g1, #60a5fa) 8%, var(--g2, #f472b6) 8%) 0%, transparent 48%),
                linear-gradient(180deg,
                    rgba(255, 255, 255, 0.028) 0%,
                    rgba(255, 255, 255, 0.016) 30%,
                    rgba(255, 255, 255, 0.01) 64%,
                    rgba(255, 255, 255, 0.018) 100%),
                linear-gradient(148deg,
                    color-mix(in srgb, var(--app-surface-strong, rgba(15, 23, 42, 0.82)) 92%, #060912 8%) 0%,
                    color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.68)) 94%, #050910 6%) 48%,
                    color-mix(in srgb, var(--app-surface, rgba(15, 23, 42, 0.72)) 90%, #04070d 10%) 100%);
            backdrop-filter: blur(10px) saturate(108%);
            -webkit-backdrop-filter: blur(10px) saturate(108%);
            box-shadow:
                0 30px 70px rgba(2, 6, 23, 0.42),
                0 0 0 1px rgba(255, 255, 255, 0.026),
                0 0 42px color-mix(in srgb, var(--g1, #60a5fa) 7%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -16px 28px rgba(255, 255, 255, 0.012);
        }

        body.welcome-mode #welcome-screen::before {
            opacity: 0.42;
            background:
                linear-gradient(180deg,
                    rgba(255, 255, 255, 0.062) 0%,
                    rgba(255, 255, 255, 0.028) 20%,
                    rgba(255, 255, 255, 0.01) 56%,
                    rgba(255, 255, 255, 0.016) 100%),
                radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent), transparent 34%),
                radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--g2, #f472b6) 8%, transparent), transparent 36%),
                radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.018), transparent 72%);
        }

        body.welcome-mode #welcome-screen::after {
            opacity: 0.72;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -1px 0 rgba(255, 255, 255, 0.018),
                inset 0 -32px 44px rgba(0, 0, 0, 0.12);
        }

        body.public-tour-home-onboarding #welcome-screen {
            background:
                radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent) 0%, transparent 34%),
                radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--g2, #f472b6) 10%, transparent) 0%, transparent 36%),
                radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--g1, #60a5fa) 6%, var(--g2, #f472b6) 6%) 0%, transparent 48%),
                linear-gradient(148deg,
                    color-mix(in srgb, var(--app-surface-strong, rgba(15, 23, 42, 0.82)) 94%, #070b12 6%) 0%,
                    color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.68)) 95%, #070b12 5%) 46%,
                    color-mix(in srgb, var(--app-surface, rgba(15, 23, 42, 0.72)) 92%, #060910 8%) 100%);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        body.public-tour-home-onboarding #welcome-screen::before {
            opacity: 0.06;
        }

        body.public-tour-home-onboarding #welcome-screen::after {
            opacity: 0.12;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.02),
                inset 0 -1px 0 rgba(255, 255, 255, 0.008),
                inset 0 -14px 22px rgba(0, 0, 0, 0.04);
        }

        body.welcome-mode .welcome-status,
        body.welcome-mode .welcome-warmup {
            display: none;
        }
    }
}

@media (max-width: 700px) {
    #welcome-screen {
        --welcome-scale: 0.9;
    }

    .welcome-donate {
        top: var(--welcome-tour-edge, 12px);
        right: var(--welcome-tour-edge, 12px);
        max-width: calc(100vw - (var(--welcome-tour-edge, 12px) * 2));
    }

    .welcome-donate-toggle {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.76rem;
    }

    .welcome-donate-card {
        width: min(320px, calc(100vw - 64px));
        padding: 16px 16px 14px;
    }
}

@keyframes welcome-gradient-pulse {
    0%,
    100% {
        filter: saturate(1) brightness(1);
    }

    50% {
        filter: saturate(1.1) brightness(1.08);
    }
}

#welcome-screen p {
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 72%, #94a3b8 28%);
    margin-bottom: 1.25rem;
    line-height: 1.5;
    font-size: 1.1rem;
    max-width: 34rem;
}

.welcome-actions {
    grid-area: actions;
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 540px;
    align-items: stretch;
    justify-content: stretch;
    font-family: inherit;
    justify-self: start;
    margin-left: 0;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition:
        opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms linear 0ms;
}

body.welcome-actions-pending .welcome-actions {
    opacity: 0;
    transform: translateY(0);
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn {
    animation: welcome-action-reveal 920ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    transform-origin: left center;
}

body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn:nth-child(1) {
    animation-delay: 360ms;
}

body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn:nth-child(2) {
    animation-delay: 460ms;
}

body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn:nth-child(3) {
    animation-delay: 560ms;
}

@keyframes welcome-action-reveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px) brightness(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0) brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-mode:not(.welcome-actions-pending) #welcome-screen .welcome-btn {
        animation: none !important;
    }
}

.welcome-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.welcome-btn {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--btn-radius-lg);
    border: 1px solid var(--btn-border);
    background: var(--btn-surface);
    color: var(--btn-text);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: var(--btn-shadow-soft);
}

.welcome-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-2px);
}

#welcome-screen .welcome-btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    width: 100%;
    min-height: 86px;
    min-width: 0;
    margin-inline: 0;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
        linear-gradient(90deg,
            color-mix(in srgb, var(--g1, #60a5fa) 13%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 10%, transparent));
    color: #f8fbff;
    text-align: left;
    font-family: inherit;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

/* Jitter-free hover zone shield */
#welcome-screen .welcome-btn::after {
    content: '';
    position: absolute;
    inset: -6px;
    bottom: -12px; /* Extra bottom coverage to absorb the upward translation offset */
    background: transparent;
    pointer-events: auto;
    z-index: 2;
}

#welcome-screen .welcome-btn:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        linear-gradient(90deg,
            color-mix(in srgb, var(--g1, #60a5fa) 15%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 12%, transparent));
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 48%, rgba(255, 255, 255, 0.2) 52%);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.3),
        0 0 34px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent);
    transform: translateY(-2.5px);
}

body.welcome-session-loading #welcome-screen #continue-session-btn,
body.welcome-session-loading #welcome-screen #welcome-history-btn {
    pointer-events: none;
}

body.welcome-session-loading #welcome-screen .welcome-btn:not(#continue-session-btn):not(#new-session-btn) {
    opacity: 0.42;
    filter: saturate(0.78);
    transform: none;
}

body.welcome-session-loading #welcome-screen #new-session-btn {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

body.welcome-session-loading #welcome-screen #continue-session-btn,
body.welcome-session-loading #welcome-screen #continue-session-btn:disabled {
    opacity: 1;
    cursor: wait;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 54%, rgba(255, 255, 255, 0.2) 46%);
    box-shadow:
        0 26px 58px rgba(0, 0, 0, 0.34),
        0 0 34px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
}

body.welcome-session-loading #continue-session-btn .welcome-svg-emoji {
    animation: welcome-continue-spin 920ms linear infinite;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--g1, #60a5fa) 46%, var(--g2, #f472b6) 34%));
}

body.welcome-session-loading #continue-session-btn .welcome-btn-content::after {
    content: "";
    display: block;
    width: min(190px, 100%);
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--g1, #60a5fa) 72%, #ffffff 28%) 42%,
            color-mix(in srgb, var(--g2, #f472b6) 72%, #ffffff 28%) 58%,
            transparent 100%);
    background-size: 220% 100%;
    animation: welcome-continue-progress 860ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
    opacity: 0.88;
}

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

@keyframes welcome-continue-progress {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-session-loading #continue-session-btn .welcome-svg-emoji,
    body.welcome-session-loading #continue-session-btn .welcome-btn-content::after {
        animation: none !important;
    }
}

.welcome-btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.welcome-svg-emoji {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.welcome-btn:hover .welcome-svg-emoji {
    transform: scale(1.12) rotate(3deg);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g1, #60a5fa) 50%, var(--g2, #f472b6) 50%));
}

#welcome-screen .welcome-btn::before {
    content: none;
}

#welcome-screen .welcome-btn .welcome-btn-text {
    display: block;
    width: 100%;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    background: none;
    font-size: 1rem;
    font-weight: 840;
    letter-spacing: 0.01em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: normal;
}

#welcome-screen .welcome-btn strong {
    display: block;
    width: 100%;
    margin-top: 1px;
    color: currentColor;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.25;
    opacity: 0.72;
    white-space: normal;
}

#welcome-screen .welcome-btn.primary-action {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
        linear-gradient(90deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 12%, transparent));
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 52%, rgba(255, 255, 255, 0.22));
    color: var(--text-q, #f8fbff);
    -webkit-text-fill-color: currentColor;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.3),
        0 0 24px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent);
}

.welcome-status {
    z-index: 4;
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    align-self: start;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.56), rgba(2, 6, 23, 0.66));
    box-shadow: 
        0 22px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(110%);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    font-family: inherit;
}

.welcome-status[hidden] {
    display: none !important;
}

.welcome-status div {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015); /* Faint glass transclucency */
    border: 1px solid rgba(255, 255, 255, 0.07); /* Aesthetic subtle border */
    position: relative;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.2s ease, 
                border-color 0.2s ease, 
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accent borders on the left side of cards */
.welcome-status div::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 2px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--g1, #60a5fa), var(--g2, #f472b6));
    transition: all 0.2s ease;
}

.welcome-status div:hover {
    background: rgba(255, 255, 255, 0.04); /* Modern hover glow */
    border-color: rgba(255, 255, 255, 0.14); /* Defined glass border on hover */
    transform: translateY(-2.5px);
}

.welcome-status div:nth-child(1):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 0 14px color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent);
}

.welcome-status div:nth-child(2):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 0 14px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent);
}

.welcome-status div:nth-child(3):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 0 14px color-mix(in srgb, var(--g2, #f472b6) 12%, transparent);
}

.welcome-status span {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.62rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.welcome-status strong {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.welcome-status div:nth-child(1) strong {
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 700;
}

.welcome-status div:nth-child(2) strong {
    color: color-mix(in srgb, var(--g1, #60a5fa) 86%, #ffffff 14%);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent);
}

.welcome-status div:nth-child(3) strong {
    color: color-mix(in srgb, var(--g2, #f472b6) 86%, #ffffff 14%);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--g2, #f472b6) 20%, transparent);
}

.welcome-warmup {
    z-index: 4;
    display: none;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
}

.welcome-warmup[hidden] {
    display: none !important;
}

.welcome-warmup-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46);
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease;
}

.welcome-warmup-card::before {
    content: none;
}

.welcome-warmup::after {
    content: "";
    position: absolute;
    top: -40px;
    bottom: -40px;
    left: -60px;
    right: -60px;
    z-index: -1;
    pointer-events: auto;
    background: transparent;
}

.welcome-warmup-card:hover,
.welcome-warmup-card:focus-visible,
.welcome-warmup-card.is-open {
    transform: translateY(-1px);
}

.welcome-warmup-session,
.welcome-warmup-source {
    min-width: 0;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.welcome-warmup-session {
    max-width: min(100%, 420px);
    color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.welcome-warmup-source {
    justify-self: end;
    max-width: min(100%, 280px);
    color: color-mix(in srgb, var(--g1, #60a5fa) 82%, #ffffff 18%);
    font-size: 0.64rem;
    opacity: 0.86;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
}

.welcome-warmup-question {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.02rem, 1.06vw, 1.18rem);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.46;
    overflow-wrap: anywhere;
}

.welcome-warmup-reveal {
    display: grid;
    gap: 7px;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    border-top: 1px solid transparent;
    transition:
        max-height 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        margin-top 0.2s ease,
        padding-top 0.2s ease,
        border-color 0.2s ease;
}

.welcome-warmup:hover .welcome-warmup-reveal,
.welcome-warmup:focus-within .welcome-warmup-reveal,
.welcome-warmup-card.is-open .welcome-warmup-reveal {
    max-height: 360px;
    margin-top: 8px;
    padding-top: 12px;
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(255, 255, 255, 0.10);
}

.welcome-warmup-choices {
    display: grid;
    gap: 8px;
}

.welcome-warmup-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.18);
    color: rgba(248, 250, 252, 0.90);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.28;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

.welcome-warmup-choice:hover,
.welcome-warmup-choice:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 52%, rgba(255, 255, 255, 0.10));
    background: rgba(30, 41, 59, 0.34);
    outline: none;
}

.welcome-warmup-choice.is-locked {
    cursor: default;
}

.welcome-warmup-choice.is-locked:hover {
    transform: none;
}

.welcome-warmup-choice.is-correct {
    border-color: rgba(74, 222, 128, 0.58);
    background: rgba(22, 101, 52, 0.16);
}

.welcome-warmup-choice.is-incorrect {
    border-color: rgba(248, 113, 113, 0.56);
    background: rgba(127, 29, 29, 0.18);
}

.welcome-warmup-choice-label {
    color: color-mix(in srgb, var(--g1, #60a5fa) 78%, #ffffff 22%);
    font-weight: 900;
}

.welcome-warmup-choice-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.welcome-warmup-feedback {
    margin: 0;
    color: rgba(226, 232, 240, 0.74);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.welcome-warmup-feedback.is-correct {
    color: rgba(187, 247, 208, 0.92);
}

.welcome-warmup-feedback.is-incorrect {
    color: rgba(254, 202, 202, 0.92);
}

.welcome-warmup-feedback[hidden] {
    display: none !important;
}

.welcome-warmup-action {
    position: relative;
    z-index: 10;
    justify-self: start;
    min-width: 176px;
    min-height: 42px;
    margin-top: 12px;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--g2, #f472b6) 64%, rgba(255, 255, 255, 0.18));
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.26);
    color: rgba(248, 250, 252, 0.90);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.welcome-warmup-action:hover,
.welcome-warmup-action:focus-visible {
    transform: translateY(-1px);
    filter: none;
    background: rgba(30, 41, 59, 0.38);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 54%, var(--g2, #f472b6) 46%);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.14);
    outline: none;
}

body.welcome-mode .welcome-warmup {
    position: fixed;
    display: grid;
    right: clamp(24px, 5vw, 76px);
    top: clamp(140px, 19vw, 274px);
    bottom: auto;
    z-index: 12010;
    width: min(520px, calc(42vw - 48px));
    max-width: calc(100vw - 48px);
}

html.ipad-like-device body.welcome-mode .welcome-warmup,
body.ipad-like-device.welcome-mode .welcome-warmup {
    display: none !important;
}

body.welcome-mode .welcome-status {
    position: fixed;
    display: grid;
    right: clamp(24px, 5vw, 76px);
    bottom: 24px;
    z-index: 12010;
    width: min(465px, calc(31.5vw - 36px));
    max-width: calc(100vw - 48px);
    font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-mode .welcome-progressive-surface {
        transition: none !important;
    }

    .welcome-warmup-card,
    .welcome-warmup-reveal,
    .welcome-warmup-choice,
    .welcome-warmup-action {
        transition: none !important;
    }
}

html.ipad-like-device body.welcome-mode .welcome-status,
body.ipad-like-device.welcome-mode .welcome-status {
    display: none !important;
}

body.welcome-mode .welcome-status span,
body.welcome-mode .welcome-status strong {
    font-family: inherit;
}

body.welcome-mode #welcome-screen {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.public-tour-home-onboarding #welcome-screen {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    transition: opacity 180ms ease, filter 180ms ease;
}

body.public-tour-home-onboarding #welcome-screen .welcome-brand-stage {
    opacity: 0.24;
    filter: saturate(0.62);
    transition: opacity 180ms ease, filter 180ms ease;
}

body.public-tour-home-onboarding #welcome-neural-canvas {
    opacity: 1;
    filter: none;
}

@media (min-width: 981px) and (max-width: 1180px) {
    body.welcome-mode #quiz-pane {
        justify-content: flex-start;
        padding-top: clamp(96px, 13vh, 128px);
    }

    #welcome-screen {
        width: min(780px, 100%);
        row-gap: 8px;
    }

    #welcome-screen .welcome-brand-stage {
        min-height: clamp(116px, 13vw, 142px);
    }

    #welcome-screen .welcome-title {
        font-size: clamp(5.6rem, 13vw, 8.25rem);
    }

}

@media (min-width: 700px) and (max-width: 1100px) {
    body.welcome-mode:has(#welcome-status-panel[hidden]) #welcome-screen,
    html.ipad-like-device body.welcome-mode #welcome-screen,
    body.ipad-like-device.welcome-mode #welcome-screen {
        align-self: center;
        margin-inline: auto;
    }
}

@media (max-width: 980px) {
    body.welcome-mode #quiz-pane {
        overflow-y: auto;
        justify-content: flex-start;
        padding: 88px 20px 24px;
    }

    #welcome-screen {
        width: min(720px, 100%);
        row-gap: 8px;
    }

    #welcome-screen .welcome-brand-stage {
        min-height: 116px;
    }

}

@media (max-width: 620px) {
    #welcome-screen .welcome-title {
        width: auto;
        font-size: clamp(3.25rem, 19vw, 4.8rem);
    }

    #welcome-screen .welcome-brand-stage {
        min-height: 140px;
    }
}

/* --- Short-viewport welcome-screen adjustments --- */

@media (max-height: 800px) {
    body.welcome-mode #quiz-pane {
        justify-content: flex-start;
        padding: clamp(18px, 3vh, 48px) clamp(20px, 4vw, 56px);
    }

    #welcome-screen .welcome-brand-stage {
        min-height: clamp(80px, 12vh, 140px);
    }

    #welcome-screen .welcome-title {
        font-size: clamp(3rem, 7vw, 7rem);
    }

    #welcome-screen {
        row-gap: 10px;
    }
}

@media (max-height: 640px) {
    body.welcome-mode #quiz-pane {
        padding-top: clamp(16px, 3vh, 48px);
        padding-bottom: 16px;
    }

    #welcome-screen .welcome-brand-stage {
        min-height: clamp(72px, 11vh, 116px);
    }

    #welcome-screen .welcome-title {
        font-size: clamp(2.8rem, 7vw, 5.6rem);
    }

    #welcome-screen .welcome-logo-container {
        width: clamp(56px, 9vh, 100px);
        height: clamp(56px, 9vh, 100px);
    }

    #welcome-screen {
        row-gap: 6px;
    }
}

@media (max-height: 500px) {
    body.welcome-mode #quiz-pane {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #welcome-screen .welcome-brand-stage {
        min-height: 56px;
    }

    #welcome-screen .welcome-title {
        font-size: clamp(2rem, 6vw, 3.8rem);
    }

    #welcome-screen .welcome-logo-container {
        width: clamp(42px, 8vh, 72px);
        height: clamp(42px, 8vh, 72px);
    }

    #welcome-screen {
        row-gap: 4px;
    }
}

.welcome-feature-list {
    margin: 0 0 0.95rem;
    padding-left: 1.15rem;
    color: color-mix(in srgb, var(--text-main, #e2e8f0) 90%, #ffffff 10%);
}

.welcome-feature-list li {
    margin: 0 0 0.34rem;
    line-height: 1.42;
}

.welcome-feature-list li:last-child {
    margin-bottom: 0;
}

.welcome-seo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.welcome-seo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.48rem 0.82rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, #60a5fa) 46%, rgba(255, 255, 255, 0.14) 54%);
    background: color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.86)) 90%, rgba(255, 255, 255, 0.04) 10%);
    color: var(--text-main, #e2e8f0);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.welcome-seo-link:hover,
.welcome-seo-link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--btn-theme-border, #60a5fa) 68%, rgba(255, 255, 255, 0.16) 32%);
    background: color-mix(in srgb, var(--btn-surface-hover, rgba(15, 23, 42, 0.92)) 92%, rgba(255, 255, 255, 0.08) 8%);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.18);
    outline: none;
}

.welcome-btn.primary {
    background: var(--g);
    border: none;
    color: var(--btn-primary-text);
    -webkit-text-fill-color: var(--btn-primary-text);
    font-weight: 700;
    box-shadow: var(--btn-primary-shadow);
}

.welcome-btn.secondary {
    border-color: var(--btn-border-strong);
    color: var(--btn-text);
}

#study-dashboard-surface,
#study-setup-surface {
    display: none;
    width: 100%;
}

.study-surface-shell {
    width: min(1100px, 100%);
    margin: 0 auto 2rem;
    padding: 1.6rem;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 34%, rgba(255, 255, 255, 0.12) 66%);
    background:
        radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--g2, #f472b6) 14%, transparent) 0%, transparent 38%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--app-surface-strong, rgba(15, 23, 42, 0.84)) 90%, #060b14 10%) 0%,
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.74)) 92%, #0a1020 8%) 52%,
            color-mix(in srgb, var(--app-surface, rgba(15, 23, 42, 0.72)) 88%, #05070d 12%) 100%);
    box-shadow:
        0 30px 72px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.study-setup-shell {
    max-width: 920px;
}

.study-surface-header,
.study-dashboard-section-head,
.study-dashboard-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.study-surface-kicker,
.study-dashboard-section-kicker {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-sub, #cbd5e1) 78%, white 22%);
}

.study-surface-title,
.study-dashboard-section-title {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.08;
}

.study-surface-copy,
.study-plan-summary {
    margin: 14px 0 0;
    color: color-mix(in srgb, var(--text-sub, #cbd5e1) 88%, white 12%);
    font-size: 0.98rem;
    line-height: 1.62;
}

.study-dashboard-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.study-dashboard-meta-line,
.study-dashboard-pill,
.study-dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.3)) 48%, rgba(255, 255, 255, 0.12) 52%);
    background: color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.7)) 90%, rgba(255, 255, 255, 0.03) 10%);
    color: var(--text-main, #e2e8f0);
    font-size: 0.82rem;
    font-weight: 700;
}

.study-dashboard-metrics,
.study-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.study-dashboard-metric-card,
.study-plan-card {
    min-height: 126px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.28)) 34%, rgba(255, 255, 255, 0.1) 66%);
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.8)) 92%, rgba(255, 255, 255, 0.03) 8%) 0%,
            color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.72)) 94%, rgba(255, 255, 255, 0.02) 6%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 30px rgba(2, 6, 23, 0.18);
}

.study-dashboard-metric-label,
.study-plan-label {
    display: block;
    color: color-mix(in srgb, var(--text-sub, #cbd5e1) 86%, white 14%);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.study-dashboard-metric-value,
.study-plan-value {
    display: block;
    margin-top: 12px;
    color: var(--text-main, #f8fafc);
    font-size: clamp(1.18rem, 1.6vw, 1.62rem);
    line-height: 1.2;
    font-weight: 800;
}

.study-dashboard-metric-value.small {
    font-size: 1rem;
}

.study-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.study-dashboard-actions .welcome-btn,
.study-dashboard-actions .glass-btn {
    min-width: 190px;
}

.study-dashboard-actions .welcome-btn[disabled],
.study-dashboard-actions .glass-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: saturate(0.7);
}

.study-dashboard-section,
.study-dashboard-note,
.study-dashboard-tip {
    margin-top: 18px;
}

.study-dashboard-note,
.study-dashboard-tip {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.26)) 34%, rgba(255, 255, 255, 0.08) 66%);
    background: color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.72)) 92%, rgba(255, 255, 255, 0.03) 8%);
    color: color-mix(in srgb, var(--text-sub, #cbd5e1) 90%, white 10%);
    line-height: 1.58;
}

.study-dashboard-section-title {
    font-size: 1.15rem;
}

.study-dashboard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.study-setup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.study-setup-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.study-setup-label {
    color: var(--text-main, #e2e8f0);
    font-size: 0.92rem;
    font-weight: 700;
}

.study-setup-field select {
    min-height: 46px;
}

.study-setup-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

#study-dashboard-surface {
    display: none;
    position: fixed;
    inset: 0;
    justify-content: center;
    align-items: center;
    padding: clamp(88px, 11vh, 128px) 24px 28px;
    pointer-events: auto;
    z-index: 20050;
    background: rgba(7, 10, 18, 0.24);
    backdrop-filter: blur(5px) saturate(95%);
    -webkit-backdrop-filter: blur(5px) saturate(95%);
}

#study-dashboard-shell.study-surface-shell {
    width: min(760px, calc(100vw - 48px));
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
}

.study-dashboard-popup-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(255, 255, 255, 0.18)) 32%, rgba(255, 255, 255, 0.16) 68%);
    background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--g2, #f472b6) 12%, transparent) 0%, transparent 38%),
        linear-gradient(148deg,
            color-mix(in srgb, var(--app-surface-strong, rgba(15, 23, 42, 0.82)) 88%, #070b12 12%) 0%,
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.68)) 92%, #090d15 8%) 48%,
            color-mix(in srgb, var(--app-surface, rgba(15, 23, 42, 0.72)) 86%, #05070d 14%) 100%);
    box-shadow:
        0 18px 42px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(124%);
    -webkit-backdrop-filter: blur(18px) saturate(124%);
}

.study-dashboard-popup-card.compact-overlay {
    display: block;
    width: 100%;
    padding: 1.05rem 1.1rem;
}

.study-dashboard-overlay-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.85fr);
    gap: 14px;
    align-items: stretch;
}

.study-dashboard-overlay-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.study-dashboard-overlay-side {
    display: grid;
    gap: 10px;
    align-content: start;
}

.study-dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.study-dashboard-mini-stat {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.28)) 32%, rgba(255, 255, 255, 0.08) 68%);
    background: color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.76)) 94%, rgba(255, 255, 255, 0.02) 6%);
}

.study-dashboard-mini-label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--btn-text-muted);
}

.study-dashboard-mini-value {
    color: var(--text-main, #f8fafc);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
}

.study-dashboard-side-status {
    padding: 10px 12px;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.24)) 28%, rgba(255, 255, 255, 0.08) 72%);
    background: color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.84)) 94%, rgba(255, 255, 255, 0.03) 6%);
    color: var(--btn-text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.study-dashboard-popup-title {
    margin: 0 34px 0 0;
    font-size: clamp(1.26rem, 2vw, 1.62rem);
    line-height: 1.02;
    color: var(--text-main, #f8fafc);
}

.study-dashboard-popup-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

.study-dashboard-plan-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.study-dashboard-plan-head.compact {
    gap: 8px;
}

.study-dashboard-plan-head.compact.overlay-inline {
    align-items: center;
}

.study-dashboard-plan-title {
    margin: 8px 0 0;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--text-main, #f8fafc);
}

.study-dashboard-plan-title.compact {
    margin-top: 2px;
    font-size: 1rem;
}

.study-dashboard-tip.compact {
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 14px;
}

.study-dashboard-actions-primary {
    margin-top: 0;
}

.study-dashboard-actions-primary .welcome-btn {
    min-width: 0;
}

.study-dashboard-actions-primary.compact {
    gap: 8px;
}

.study-dashboard-actions-primary.compact .welcome-btn {
    flex: 1 1 170px;
}

.study-plan-summary.compact {
    margin-top: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.study-dashboard-overlay-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, rgba(148, 163, 184, 0.28)) 34%, rgba(255, 255, 255, 0.1) 66%);
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.8)) 92%, rgba(255, 255, 255, 0.03) 8%) 0%,
            color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.72)) 94%, rgba(255, 255, 255, 0.02) 6%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 30px rgba(2, 6, 23, 0.16);
}

.study-dashboard-overlay-target {
    display: grid;
    gap: 5px;
}

.study-dashboard-overlay-target-value {
    color: var(--text-main, #f8fafc);
    font-size: 0.96rem;
    line-height: 1.35;
    font-weight: 800;
}

.study-dashboard-dismiss-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.study-dashboard-pref-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--btn-text-muted);
    font-size: 0.8rem;
    line-height: 1.3;
    user-select: none;
    cursor: pointer;
}

.study-dashboard-pref-toggle:hover,
.study-dashboard-pref-toggle:focus-within {
    color: var(--btn-text);
}

.study-dashboard-pref-toggle input {
    width: 14px;
    height: 14px;
    accent-color: color-mix(in srgb, var(--g1, #60a5fa) 56%, var(--g2, #f472b6) 44%);
}

.study-dashboard-actions-primary .welcome-btn.primary span {
    color: var(--btn-primary-text);
    -webkit-text-fill-color: var(--btn-primary-text);
    background: none;
}

/* --- Standard Quiz Card --- */
#quiz-mode-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#quiz-card {
    display: none;
    --quiz-content-scale: 1;
    width: 1120px;
    max-width: none;
    --quiz-card-outline: color-mix(in srgb, var(--btn-theme-border, #334155) 78%, rgba(255, 255, 255, 0.08) 22%);
    --quiz-card-border: rgba(148, 163, 184, 0.16);
    --quiz-card-surface: color-mix(in srgb, var(--quiz-card-bg, var(--card-bg)) 90%, #020617 10%);
    --quiz-card-gradient: linear-gradient(155deg,
            color-mix(in srgb, var(--quiz-card-surface) 82%, var(--g1, #60a5fa) 18%) 0%,
            color-mix(in srgb, var(--quiz-card-surface) 82%, var(--g2, #f472b6) 18%) 100%);
    border: 1px solid var(--quiz-card-border);
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.28),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.025),
        inset -1px 0 0 0 rgba(0, 0, 0, 0.28),
        0 10px 22px -6px rgba(2, 6, 23, 0.42),
        0 28px 62px -14px rgba(2, 6, 23, 0.56),
        0 70px 128px -26px rgba(2, 6, 23, 0.72),
        0 0 60px -12px color-mix(in srgb, var(--g1, #60a5fa) 11%, transparent),
        0 0 60px -12px color-mix(in srgb, var(--g2, #f472b6) 11%, transparent);
    padding: 2.5rem;
    position: relative;
    margin-bottom: 2rem;
    /* The outer card stays visible so perimeter controls can sit outside it.
       Scrolling remains on #quiz-content-wrapper. */
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 320px;
    min-height: 300px;
    border-radius: 24px;
    background-color: var(--quiz-card-surface, var(--quiz-card-bg, var(--card-bg)));
    background-image: var(--quiz-card-gradient);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: box-shadow, transform, width, max-width;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), width 0.6s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1) translateX(0);
    z-index: 100;
}

#quiz-card.is-resizing {
    transition: box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}

html:not(.phone-device) body.ask-ai-surface-front.ask-ai-docked-open #work-area:not(.split-view):not(.split-view-ai):not(.trio-view):not(.pdf-tutor-view) #quiz-card:not(.is-floating):not(.quiz-card-expanded),
html:not(.phone-device) body.notes-surface-front #work-area:not(.split-view):not(.split-view-ai):not(.trio-view):not(.pdf-tutor-view) #quiz-card:not(.is-floating):not(.quiz-card-expanded) {
    width: min(840px, calc(100vw - 490px)) !important;
    max-width: calc(100vw - 490px) !important;
    /* Match the card's normal close motion while the docked surface opens.
       The JS FLIP offset handles the non-animatable align-self change, while
       width and transform ease into the reserved left-side slot together. */
    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 2s ease !important;
}

#quiz-card:not(.quiz-card-expanded):hover {
    border-color: var(--quiz-card-border) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.28),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.025),
        inset -1px 0 0 0 rgba(0, 0, 0, 0.28),
        0 10px 22px -6px rgba(2, 6, 23, 0.42),
        0 28px 62px -14px rgba(2, 6, 23, 0.56),
        0 70px 128px -26px rgba(2, 6, 23, 0.72),
        0 0 60px -12px color-mix(in srgb, var(--g1, #60a5fa) 11%, transparent),
        0 0 60px -12px color-mix(in srgb, var(--g2, #f472b6) 11%, transparent);
}

body.quiz-card-bg-transparent #quiz-card {
    --quiz-card-surface: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow:
        0 10px 22px -6px rgba(2, 6, 23, 0.42),
        0 28px 62px -14px rgba(2, 6, 23, 0.56),
        0 70px 128px -26px rgba(2, 6, 23, 0.72),
        0 0 60px -12px color-mix(in srgb, var(--g1, #60a5fa) 11%, transparent),
        0 0 60px -12px color-mix(in srgb, var(--g2, #f472b6) 11%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.quiz-card-bg-transparent #quiz-card:not(.quiz-card-expanded):hover {
    box-shadow:
        0 10px 22px -6px rgba(2, 6, 23, 0.42),
        0 28px 62px -14px rgba(2, 6, 23, 0.56),
        0 70px 128px -26px rgba(2, 6, 23, 0.72),
        0 0 60px -12px color-mix(in srgb, var(--g1, #60a5fa) 11%, transparent),
        0 0 60px -12px color-mix(in srgb, var(--g2, #f472b6) 11%, transparent);
}

body.quiz-card-bg-transparent #quiz-card::before {
    opacity: 0;
}

body.quiz-card-bg-transparent #quiz-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.16),
        0 0 10px rgba(148, 163, 184, 0.07);
    opacity: 0.5;
}

#quiz-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(140% 160% at 0% 0%,
            color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent) 0%,
            transparent 60%),
        radial-gradient(140% 160% at 100% 0%,
            color-mix(in srgb, var(--g2, #f472b6) 16%, transparent) 0%,
            transparent 58%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--quiz-card-surface, rgba(15, 23, 42, 0.8)) 56%, transparent 44%) 0%,
            transparent 64%);
    opacity: 0.7;
}

/* Live quiz cards stay transparent by default so the workspace remains visible;
   an explicitly selected custom card color still supplies a solid surface. */
body:not([data-theme-overhaul]):not(.quiz-card-bg-transparent) #quiz-card {
    --quiz-card-surface: var(--custom-quiz-card-bg, transparent);
    --quiz-card-gradient: none;
    background-color: var(--quiz-card-surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not([data-theme-overhaul]):not(.quiz-card-bg-transparent) #quiz-card::before {
    background: none !important;
    opacity: 0 !important;
}

/* Keep quiz card outline theme-synced across render/navigation state changes. */
#quiz-card,
#quiz-card.active,
#quiz-card.quiz-card-expanded,
#quiz-card[style*="block"],
#quiz-card[style*="flex"] {
    border-color: var(--quiz-card-border) !important;
}

#quiz-card:focus,
#quiz-card:focus-visible {
    outline: 2px solid var(--g1, #60a5fa) !important;
    outline-color: color-mix(in srgb, var(--g1, #60a5fa) 56%, var(--g2, #f472b6) 44%) !important;
    outline-offset: 0;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 30%, var(--quiz-card-outline, rgba(148, 163, 184, 0.28)) 70%) !important;
}

#quiz-card:focus:not(:focus-visible) {
    outline: none !important;
}

#quiz-card.quiz-card-expanded {
    position: fixed !important;
    inset: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 12040 !important;
    overflow: auto !important;
    border-radius: 16px;
    background-color: var(--bg, #0b1220);
    background-image:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent), transparent 40%),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--g2, #f472b6) 12%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg, #0b1220) 84%, #132038 16%) 0%, color-mix(in srgb, var(--bg, #0b1220) 74%, #050913 26%) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    box-shadow: 0 22px 80px rgba(2, 6, 23, 0.78);
}

body.quiz-card-expanded-mode #quiz-card.quiz-card-expanded {
    transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

body.quiz-card-expanded-mode.ai-response-popup-side-open #quiz-card.quiz-card-expanded {
    right: calc(var(--ai-response-popup-panel-width, min(1014px, 60vw)) + 32px) !important;
}

#quiz-card.quiz-card-expanded #resize-handle {
    opacity: 0;
    pointer-events: none;
}

#quiz-card.quiz-card-expanded .quiz-card-resize-indicators {
    opacity: 0;
    pointer-events: none;
}

body.pdf-tutor-quiz-mode #quiz-card #resize-handle {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.pdf-tutor-quiz-mode #quiz-card .quiz-card-resize-indicators {
    display: none !important;
}

body.pdf-tutor-quiz-mode #quiz-card:not(.is-resizing) {
    cursor: default !important;
}

#quiz-card.is-floating:not(.quiz-card-expanded) {
    overflow: visible !important;
}

#quiz-card.save-outline-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    animation: quiz-save-outline-flash 1s ease-in-out forwards;
}

@keyframes quiz-save-outline-flash {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    }

    35% {
        opacity: 0.55;
        box-shadow: 0 0 10px color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    }

    70% {
        opacity: 0.95;
        box-shadow: 0 0 20px color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    }

    100% {
        opacity: 0;
        box-shadow: 0 0 0 color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    }
}

#quiz-card::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#quiz-card.quiz-gen-blurred {
    filter: blur(6px) saturate(0.92);
    opacity: 0.55;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: filter, opacity;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

/* When quiz card is shown (via JS inline style display:block), use flexbox */
#quiz-card[style*="block"],
#quiz-card[style*="flex"] {
    display: flex !important;
    flex-direction: column;
}

/* Show quiz card when it has the active class */
#quiz-card.active {
    display: flex !important;
    flex-direction: column;
}

#work-area.split-view #quiz-card:not(.is-floating):not(.quiz-card-custom-width),
#work-area.split-view-ai #quiz-card:not(.is-floating):not(.quiz-card-custom-width),
#work-area.pdf-tutor-quiz-duo #quiz-card:not(.is-floating):not(.quiz-card-custom-width) {
    width: min(900px, calc(100% - 2rem));
    max-width: calc(100% - 2rem);
    height: auto;
    margin: 0 auto 2rem auto;
    left: auto;
    top: auto;
}

#work-area.split-view #quiz-card:not(.is-floating):not(.quiz-card-expanded),
#work-area.split-view-ai #quiz-card:not(.is-floating):not(.quiz-card-expanded) {
    max-width: calc(100% - 2rem);
}

#work-area.pdf-tutor-view.pdf-tutor-quiz-view.pdf-tutor-quiz-duo #quiz-card:not(.is-floating):not(.quiz-card-expanded):not(.quiz-card-custom-width),
#work-area.pdf-tutor-view.pdf-tutor-quiz-view.pdf-tutor-quiz-trio #quiz-card:not(.is-floating):not(.quiz-card-expanded):not(.quiz-card-custom-width) {
    width: min(880px, calc(100% - 4rem)) !important;
    max-width: calc(100% - 4rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
}

#work-area.split-view #quiz-card:not(.quiz-card-expanded),
#work-area.split-view-ai #quiz-card:not(.quiz-card-expanded),
#work-area.trio-view #quiz-card:not(.quiz-card-expanded),
#work-area.pdf-tutor-quiz-duo #quiz-card:not(.quiz-card-expanded),
#work-area.pdf-tutor-quiz-trio #quiz-card:not(.quiz-card-expanded) {
    z-index: 220;
}

/* Keep the session title as display-only content in quiz mode. */
body:not(.welcome-mode) #app-home-brand {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 4005;
    pointer-events: auto !important;
}

body:not(.welcome-mode) #app-home-title {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4005;
    pointer-events: none !important;
    cursor: default !important;
    user-select: none;
}

body:not(.welcome-mode) #memora-voice-orb-trigger {
    position: relative;
    z-index: 4005;
}

/* Resize Handle */
.quiz-card-resize-indicators {
    position: absolute;
    inset: 0;
    z-index: 99;
    border-radius: inherit;
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.quiz-card-resize-indicator {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--g1, #60a5fa);
    border-style: solid;
    border-width: 0;
}

.quiz-card-resize-indicator--top-left {
    top: 0;
    left: 0;
    border-top-width: 1.68px;
    border-left-width: 1.68px;
    border-radius: 16px 0 0 0;
}

.quiz-card-resize-indicator--top-right {
    top: 0;
    right: 0;
    border-top-width: 1.68px;
    border-right-width: 1.68px;
    border-radius: 0 16px 0 0;
}

.quiz-card-resize-indicator--bottom-left {
    bottom: 0;
    left: 0;
    border-bottom-width: 1.68px;
    border-left-width: 1.68px;
    border-radius: 0 0 0 16px;
}

#resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: nwse-resize;
    z-index: 100;
    border-right: 1.68px solid var(--g1, #60a5fa);
    border-bottom: 1.68px solid var(--g1, #60a5fa);
    border-radius: 0 0 16px 0;
    opacity: 0.35;
    transition: opacity 0.15s;
    user-select: none;
    touch-action: none;
}

/* Ambient Glow */
#quiz-card.ambient-active {
    animation: shadow-pulse 4s ease-in-out infinite alternate;
}

#quiz-card.ambient-active.is-static {
    animation: none;
    box-shadow: 0 0 var(--amb-max) var(--amb-c2);
}

/* VISUALIZER OVERRIDE: When music is playing, disable CSS transition for instant response */
#quiz-card.visualizer-active {
    transition: box-shadow 0.05s linear, border-color 0.2s ease !important;
    animation: none !important;
}

#quiz-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#quiz-card:not(.is-floating):not(.quiz-card-expanded):not(.quiz-card-custom-height) #quiz-content-wrapper {
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
}

#quiz-card.is-floating:not(.quiz-card-expanded):not(.quiz-card-custom-height) #quiz-content-wrapper {
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
}

#quiz-content-wrapper.quiz-content-scaled {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#quiz-content-wrapper::-webkit-scrollbar {
    display: none;
}

#quiz-scale-shell {
    display: flex;
    flex-direction: column;
    position: relative;
    width: calc(100% / var(--quiz-content-scale, 1));
    min-width: calc(100% / var(--quiz-content-scale, 1));
    min-height: 100%;
    transform: scale(var(--quiz-content-scale, 1));
    transform-origin: top left;
    will-change: transform;
}

/* Chromium/Edge layout zoom keeps the shell's scroll height aligned with the
   visual scale, which avoids the dead space that transform-only scaling adds
   beneath the single-card nav row when Ctrl+Down shrinks the content. */
#quiz-scale-shell.quiz-scale-shell-layout-zoom {
    width: 100%;
    min-width: 100%;
    transform: none;
    transform-origin: initial;
    zoom: var(--quiz-content-scale, 1);
    will-change: auto;
}

#quiz-card:not(.is-floating):not(.quiz-card-expanded):not(.quiz-card-custom-height) #quiz-scale-shell {
    min-height: 0;
}

#quiz-card.is-floating:not(.quiz-card-expanded):not(.quiz-card-custom-height) #quiz-scale-shell {
    min-height: 0;
}

#work-area:not(.split-view):not(.split-view-ai):not(.trio-view):not(.pdf-tutor-quiz-duo):not(.pdf-tutor-quiz-trio) #quiz-card:not(.is-floating):not(.quiz-card-expanded) #quiz-scale-shell,
#work-area.pane-layout-target-single #quiz-card:not(.is-floating):not(.quiz-card-expanded) #quiz-scale-shell {
    min-height: 0;
}

/* --- AUDIO VISUALIZER STYLES --- */
#audio-visualizer {
    position: relative;
    width: 100%;
    height: 46px;
    margin-bottom: 8px;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
    border-radius: 10px;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent), transparent 48%),
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--g2, #f472b6) 20%, transparent), transparent 48%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.05));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 0 14px rgba(15, 23, 42, 0.32), 0 4px 14px rgba(2, 6, 23, 0.2);
}

#progress-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 1.05rem;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--g);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-image {
    display: none;
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    border: 1px solid #334155;
    margin: 0 auto 1.5rem auto;
    object-fit: contain;
    background: #000;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.q-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Image Lightbox Overlay */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-expanded-media, 2147483625);
    cursor: zoom-out;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, background 0.3s ease, visibility 0.3s ease;
}

.image-lightbox.active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.9);
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-lightbox.active img {
    transform: scale(1);
}

.question-text {
    font-size: clamp(1.5rem, 1.22rem + 0.78vw, 2.02rem);
    font-weight: 700;
    margin: 0 auto 1.7rem auto;
    color: var(--text-main, var(--text-q, #e2e8f0));
    line-height: 1.5;
    text-align: center;
    max-width: 56ch;
    width: 100%;
}

.question-text .question-statement-label {
    font-weight: 900;
}

.quiz-empty-state {
    width: 100%;
    min-height: clamp(220px, 42vh, 340px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 8px;
}

.quiz-empty-state-title {
    margin: 0;
    font-size: clamp(2.55rem, 2.18rem + 1.35vw, 3.12rem);
    line-height: 1.15;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
}

html:not(.phone-device) .quiz-empty-state-title.quiz-generation-ready-message {
    width: min(92%, 780px);
    font-size: clamp(1.44rem, 1.27rem + 0.65vw, 1.85rem);
    line-height: 1.35;
    color: var(--text-main, #e2e8f0);
    text-wrap: balance;
}

html:not(.phone-device) .quiz-empty-state-title.quiz-generation-message-leaving {
    animation: quizGenerationMessageLeave 180ms ease-in both;
}

html:not(.phone-device) .quiz-empty-state-title.quiz-generation-message-entering {
    animation: quizGenerationMessageEnter 180ms ease-out both;
}

@keyframes quizGenerationMessageLeave {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes quizGenerationMessageEnter {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

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

/* Loading dots animation for generating state */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 2px;
}

.loading-dots span {
    animation: loading-dots-bounce 1.4s infinite both;
    font-weight: 800;
    display: inline-block;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-dots-bounce {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-0.16em);
    }
}


#work-area:not(.split-view):not(.split-view-ai):not(.trio-view):not(.pdf-tutor-quiz-duo):not(.pdf-tutor-quiz-trio) #quiz-card:not(.is-floating):not(.quiz-card-expanded) .question-text,
#work-area.pane-layout-target-single #quiz-card:not(.is-floating):not(.quiz-card-expanded) .question-text {
    max-width: 62ch;
    margin-bottom: 1.45rem;
}

#quiz-card.quiz-card-expanded .question-text {
    font-size: clamp(1.78rem, 1.36rem + 0.95vw, 2.3rem);
    max-width: 68ch;
    margin-bottom: 2rem;
}

/* --- IPHONE 26 GLASSY BUTTONS --- */
#choices {
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#work-area:not(.split-view):not(.split-view-ai):not(.trio-view):not(.pdf-tutor-quiz-duo):not(.pdf-tutor-quiz-trio) #quiz-card:not(.is-floating):not(.quiz-card-expanded) #choices,
#work-area.pane-layout-target-single #quiz-card:not(.is-floating):not(.quiz-card-expanded) #choices {
    gap: 10px;
}

.choice {
    display: block;
    width: 100%;
    margin: 0;
    padding: 1.2rem 3rem 1.2rem 2.6rem;
    border-radius: 18px;
    background: var(--choice-bg, var(--bg-opt, rgba(255, 255, 255, 0.03)));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    color: var(--text-a);
    cursor: pointer;
    text-align: left;
    font-size: clamp(1.18rem, 1.04rem + 0.32vw, 1.36rem);
    line-height: 1.45;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    user-select: none;
    overflow: hidden;
}

.choice:not(.locked):hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.choice.locked {
    cursor: default;
}

.choice.locked:not(.correct):not(.incorrect) {
    transform: none !important;
    opacity: 0.35 !important;
}

.choice.correct {
    border: 1px solid transparent;
    background: 
        linear-gradient(135deg, color-mix(in srgb, #22c55e 14%, color-mix(in srgb, var(--g1, #60a5fa) 42%, transparent)), color-mix(in srgb, #22c55e 8%, color-mix(in srgb, var(--g2, #f472b6) 38%, transparent))) padding-box,
        linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, #22c55e 32%, var(--g1, #60a5fa)), color-mix(in srgb, #22c55e 25%, var(--g2, #f472b6))) border-box !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 14px 1px color-mix(in srgb, #22c55e 30%, color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent)),
        inset 0 0 12px color-mix(in srgb, #22c55e 12%, color-mix(in srgb, var(--g1, #60a5fa) 10%, transparent)),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: memora-choice-correct-settle 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both, memora-choice-correct-pulse 4.8s ease-in-out infinite alternate;
}

.choice.correct::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
    z-index: 16;
    pointer-events: none;
}

.choice.incorrect {
    border-color: color-mix(in srgb, #ef4444 32%, color-mix(in srgb, var(--g2, #f472b6) 45%, rgba(255, 255, 255, 0.1))) !important;
    background: 
        linear-gradient(135deg, color-mix(in srgb, #ef4444 10%, transparent), color-mix(in srgb, var(--g2, #f472b6) 5%, transparent)) padding-box,
        linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, #ef4444 30%, var(--g2, #f472b6)), color-mix(in srgb, #ef4444 15%, transparent)) border-box !important;
    color: var(--text-a, rgba(226, 232, 240, 0.75)) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), 0 0 12px color-mix(in srgb, #ef4444 20%, transparent) !important;
    opacity: 0.9 !important;
    animation: none;
    transform: none !important;
}

.choice.incorrect::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #f87171;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
    z-index: 16;
    pointer-events: none;
}

/* UPDATED ELIMINATED STYLE */
.choice.eliminated {
    text-decoration: line-through;
    color: rgba(226, 232, 240, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    filter: grayscale(1);
}

.choice.correct.eliminated {
    color: #ffffff !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.15) !important;
    filter: none;
}

.choice.incorrect.eliminated {
    color: rgba(248, 113, 113, 0.45) !important;
    border-color: rgba(239, 68, 68, 0.18) !important;
    box-shadow: none !important;
    filter: grayscale(1);
    opacity: 0.4 !important;
}

.choice .label {
    margin-right: 0.5rem;
    font-weight: 700;
    opacity: 0.7;
    font-size: 1em;
}

#quiz-card.quiz-card-expanded .choice {
    font-size: clamp(1.34rem, 1.14rem + 0.42vw, 1.56rem);
    padding: 1.35rem 3.2rem 1.35rem 2.8rem;
    line-height: 1.5;
}

/* --- CHOICE EYEBALLS --- */
.eye-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.2;
    transition: all 0.2s;
    z-index: 10;
    cursor: pointer;
    border-radius: 50%;
}

.choice:hover .eye-toggle {
    opacity: 0.5;
}

.eye-toggle:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1);
}

body.memora-session-choice-loading:not(.welcome-mode) #choices .choice {
    animation: memora-session-choice-load-pulse 1500ms cubic-bezier(0.45, 0, 0.55, 1) 0ms 1 both;
    opacity: 1 !important;
}

body.memora-session-choice-loading:not(.welcome-mode) #choices .choice:nth-child(2) {
    animation-delay: 260ms;
}

body.memora-session-choice-loading:not(.welcome-mode) #choices .choice:nth-child(3) {
    animation-delay: 520ms;
}

body.memora-session-choice-loading:not(.welcome-mode) #choices .choice:nth-child(4) {
    animation-delay: 780ms;
}

@keyframes memora-session-choice-load-pulse {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
        background: var(--choice-bg, var(--bg-opt, rgba(255, 255, 255, 0.03)));
    }

    50% {
        opacity: 1;
        filter: brightness(1.14);
        background: color-mix(in srgb, var(--choice-bg, rgba(255, 255, 255, 0.03)) 78%, rgba(255, 255, 255, 0.1));
    }
}

/* UPDATED EYE STYLE FOR ELIMINATED */
.choice.eliminated .eye-toggle {
    opacity: 1 !important;
    color: #ef4444;
    filter: none;
}

#choices.hard-mode .choice {
    filter: blur(8px);
    opacity: 0.4;
    pointer-events: none;
}

#hard-mode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.1);
}

#hard-mode-btn {
    padding: 12px 24px;
    background: var(--g);
    color: var(--btn-primary-text, #f8fafc);
    font-weight: bold;
    border-radius: var(--btn-radius-pill, 999px);
    box-shadow: var(--btn-primary-shadow, 0 14px 34px rgba(2, 6, 23, 0.28));
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#hard-mode-overlay:hover #hard-mode-btn {
    transform: translateY(-1px) scale(1.03);
    box-shadow: var(--btn-shadow-hover, 0 14px 30px rgba(2, 6, 23, 0.26));
    filter: saturate(1.04) brightness(1.03);
}

/* Hard Mode Type-Before-Reveal - Hide choices initially */
#choices.hard-mode-hidden {
    filter: blur(12px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
    transition: all 0.3s ease;
}

#choices.hard-mode-hidden .choice {
    transform: scale(0.98);
}

#explanation {
    margin-top: 1.5rem;
    padding: 1.25rem 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    display: none;
    line-height: 1.6;
    font-size: 1rem;
    color: #cbd5e1;
    transform-origin: var(--explanation-origin-x, 50%) top;
}

/* When #explanation becomes ai-response-box directly */
#explanation.ai-response-box {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 1.25rem 0;
    animation: memora-explanation-expand 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#explanation.ai-response-loading {
    cursor: default;
    min-height: 116px;
    border: none;
}

#explanation.ai-response-loading[data-tone="error"] {
    border: none;
}

#explanation.explanation-revealing {
    animation: memora-explanation-expand 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#explanation.explanation-revealing.from-correct {
    box-shadow: none;
}

#explanation.explanation-revealing.from-incorrect {
    box-shadow: none;
}

.ai-response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-expand-hint {
    font-size: 0.75rem;
    color: #64748b;
    transition: color 0.2s;
}

#explanation.ai-response-box:hover .ai-expand-hint {
    color: #94a3b8;
}

.ai-response-content {
    margin-top: 0;
}

@keyframes memora-choice-correct-settle {
    0% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }

    55% {
        transform: translateY(-3px) scale(1.006);
        filter: saturate(1.08);
    }

    100% {
        transform: translateY(-1px) scale(1);
        filter: saturate(1.03);
    }
}

@keyframes memora-choice-correct-pulse {
    0% {
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.45),
            0 0 14px 1px rgba(34, 197, 94, 0.24),
            inset 0 0 12px rgba(34, 197, 94, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        border-color: transparent;
    }
    100% {
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.5),
            0 0 22px 3px rgba(34, 197, 94, 0.38),
            inset 0 0 18px rgba(34, 197, 94, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: transparent;
    }
}

@keyframes memora-explanation-expand {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(0.992);
        filter: saturate(0.96);
    }

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

@media (prefers-reduced-motion: reduce) {
    .choice.correct,
    .choice.incorrect,
    #explanation.ai-response-box,
    #explanation.explanation-revealing {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* The Ask Memora hover-definition popover shares the source tooltip's geometry,
   layer, and transition on purpose - same surface, same reading distance. Only its
   internal type treatment differs; see .ask-ai-definition-tooltip in modals.css. */
.ai-model-tooltip,
.ask-ai-source-tooltip,
.ask-ai-definition-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    /* Highlight/segment Ask cards reach +140; their tooltips must portal above them. */
    z-index: calc(var(--z-ask-memora-modal, 2147483450) + 150);
    max-width: min(320px, calc(100vw - 24px));
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.96);
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.35;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.32);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ai-model-tooltip.visible,
.ask-ai-source-tooltip.visible,
.ask-ai-definition-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESULTS SCREEN --- */
#results-view {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.5s ease;
    padding-top: 1rem;
    width: 100%;
    height: 100%;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--st-mas);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--st-mas);
    margin-bottom: 1.5rem;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.score-circle.bad {
    border-color: var(--st-new);
    color: var(--st-new);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.score-circle.mid {
    border-color: var(--st-fam);
    color: var(--st-fam);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.results-list {
    width: 100%;
    text-align: left;
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid #334155;
    padding-top: 1rem;
}

.result-item {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: background 0.2s;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.result-item.correct {
    border-left: 3px solid var(--st-mas);
}

.result-item.wrong {
    border-left: 3px solid var(--st-new);
}

/* Nav Buttons */
#nav-row {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Fixed-height quiz card states should terminate at the nav row instead of
   exposing extra scrollable space below the navigation buttons. */
#quiz-card.is-floating #nav-row,
#quiz-card.quiz-card-expanded #nav-row,
#work-area.split-view #nav-row,
#work-area.split-view-ai #nav-row,
#work-area.trio-view #nav-row,
#work-area.pdf-tutor-quiz-duo #nav-row,
#work-area.pdf-tutor-quiz-trio #nav-row {
    margin-top: auto;
    padding-top: 2rem;
}

#work-area.pane-layout-target-single #nav-row {
    margin-top: 2rem;
    padding-top: 0;
}

.nav-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--btn-radius-md);
    border: 1px solid var(--btn-border);
    background: var(--btn-surface);
    backdrop-filter: blur(10px);
    background-image: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    cursor: pointer;
    font-weight: 800;
    box-shadow: var(--btn-shadow-soft);
    transition: all 0.2s;
}

.nav-btn:hover {
    background-color: var(--btn-surface-hover);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 68%, rgba(255, 255, 255, 0.2) 32%);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-1px);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

/* --- AI Action Row --- */
.ai-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-quick-btn {
    padding: 8px 16px;
    border-radius: var(--btn-radius-sm);
    border: 1px solid var(--btn-border);
    background: var(--btn-surface-soft);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--btn-shadow-soft);
}

.ai-quick-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--btn-shadow-hover);
}

.ai-quick-btn .gradient-text {
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Auto Options Dropdown --- */
.refresh-options-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.refresh-options-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--modal-surface-bg, linear-gradient(165deg, #141b2a 0%, #0a1020 100%));
    border: 1px solid color-mix(in srgb, var(--btn-border, rgba(148, 163, 184, 0.28)) 78%, rgba(255, 255, 255, 0.08) 22%);
    border-radius: 10px;
    padding: 8px;
    width: 190px;
    z-index: 120;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.refresh-options-dropdown.active {
    display: block;
}

.refresh-opt-btn {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--btn-radius-sm);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    box-sizing: border-box;
    color: var(--btn-text-muted);
}

.refresh-opt-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    color: var(--btn-text);
}

.auto-options-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#auto-options-trigger.auto-options-notice-pulse {
    animation: auto-options-notice-pulse 2.45s ease-in-out infinite;
    transform-origin: center;
}

#ask-memora-inline-btn.study-feature-notice-pulse,
#toggle-viewer-btn.study-feature-notice-pulse {
    animation: auto-options-notice-pulse 2.45s ease-in-out infinite;
    transform-origin: center;
}

.auto-opt-btn.auto-feature-notice-pulse {
    animation: auto-feature-notice-pulse 2.45s ease-in-out infinite;
}

@keyframes auto-options-notice-pulse {

    0%,
    100% {
        border-color: color-mix(in srgb, var(--btn-theme-border, #334155) 64%, rgba(255, 255, 255, 0.16) 36%);
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 18%, transparent 82%),
            0 0 0 rgba(96, 165, 250, 0);
        transform: scale(1);
    }

    50% {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 44%, var(--g2, #f472b6) 56%);
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent 82%),
            0 0 12px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent);
        transform: scale(1.025);
    }
}

@keyframes auto-feature-notice-pulse {

    0%,
    100% {
        border-color: transparent;
        box-shadow: none;
    }

    50% {
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 38%, var(--g2, #f472b6) 62%);
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent 84%),
            0 0 10px color-mix(in srgb, var(--g2, #f472b6) 12%, transparent);
    }
}

.auto-options-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--modal-surface-bg, linear-gradient(165deg, #141b2a 0%, #0a1020 100%));
    border: 1px solid color-mix(in srgb, var(--btn-border, rgba(148, 163, 184, 0.28)) 78%, rgba(255, 255, 255, 0.08) 22%);
    border-radius: 10px;
    padding: 8px 12px;
    width: 170px;
    z-index: 100;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-top: 4px;
    overflow: hidden;
}

.auto-options-dropdown.active {
    display: block;
    animation: auto-options-dropdown-soft-open 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top center;
}

@keyframes auto-options-dropdown-soft-open {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.auto-opt-btn {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 8px 10px;
    text-align: center;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--btn-radius-sm);
    border: 1px solid transparent;
    transition: all 0.15s ease;
    box-sizing: border-box;
    color: var(--btn-text-muted);
}

.quiz-top-controls-row #jump-select,
.quiz-top-controls-row #reset-q-small,
.quiz-top-controls-row .quiz-ctrl-btn,
.quiz-top-controls-row .ai-quick-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--g1, #60a5fa) 9%, transparent) 0%,
            color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.28)) 24%, transparent) 42%,
            color-mix(in srgb, var(--g2, #f472b6) 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--btn-border, rgba(148, 163, 184, 0.28)) 52%, transparent 48%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transition: all 0.2s ease;
}

.quiz-toolbar-controls > *,
.quiz-toolbar-controls :is(.refresh-options-wrapper, .auto-options-wrapper) {
    align-self: center;
}

.quiz-top-controls-row #jump-select:hover,
.quiz-top-controls-row #reset-q-small:hover,
.quiz-top-controls-row .quiz-ctrl-btn:hover,
.quiz-top-controls-row .ai-quick-btn-inline:hover {
    background:
        linear-gradient(115deg,
            color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent) 0%,
            color-mix(in srgb, var(--btn-surface-hover, rgba(255, 255, 255, 0.08)) 34%, transparent) 44%,
            color-mix(in srgb, var(--g2, #f472b6) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--btn-border-strong, rgba(148, 163, 184, 0.46)) 62%, transparent 38%);
    box-shadow: none;
    transform: translateY(-0.5px) scale(1.02);
}

.quiz-top-controls-row #jump-select {
    min-height: 36px;
    padding: 7px 15px;
    border-radius: var(--btn-radius-pill);
    color: var(--btn-text);
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}

.quiz-top-controls-row #reset-q-small {
    min-width: 44px;
    min-height: 36px;
    padding: 7px 15px;
    border-radius: var(--btn-radius-pill);
    font-size: 1.13rem;
}

.quiz-top-controls-row .quiz-ctrl-btn {
    min-height: 36px;
    padding: 7px 15px;
    font-size: 1.13rem;
}

.quiz-top-controls-row .quiz-ctrl-btn .gradient-text {
    font-weight: 500;
}

.quiz-top-controls-row .quick-control-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.46rem;
    line-height: 1;
    white-space: nowrap;
}

.quiz-top-controls-row .quick-control-svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex: 0 0 16px;
    vertical-align: -2.5px;
    overflow: visible;
}

.quiz-top-controls-row .quick-control-svg :is(path, rect, circle, polygon, line) {
    opacity: 1;
}

.quiz-top-controls-row .quick-control-text {
    display: inline-block;
    line-height: 1;
}

.quiz-top-controls-row #reset-q-small .quick-control-svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.quiz-top-controls-row .ai-quick-btn-inline {
    min-height: 36px;
    padding: 9px 18px;
}

.quiz-top-controls-row .ai-quick-btn-inline .gradient-text {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 500;
}

.auto-opt-btn .gradient-text {
    background-image: var(--g) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.auto-opt-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
}

.auto-opt-btn.active {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 20%, var(--btn-surface) 80%),
            color-mix(in srgb, var(--g2, #f472b6) 18%, var(--btn-surface) 82%));
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-soft);
}

.auto-opt-btn.active .gradient-text {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* --- AI Response Box --- */
.ai-response-box {
    border-left: 3px solid;
    border-image: var(--g) 1;
    padding-left: 15px;
}

/* --- Inline AI Buttons --- */
.ai-quick-btn-inline {
    position: relative;
    padding: 6px 12px;
    border-radius: var(--btn-radius-sm);
    border: 1px solid var(--btn-border);
    background: var(--btn-surface-soft);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--btn-shadow-soft);
}

#notes-btn-inline.has-note::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.95), 0 0 8px rgba(34, 197, 94, 0.55);
    pointer-events: none;
}

/* --- Regenerate question (Quick Dock) ------------------------------------ */

#regenerate-question-btn-inline.is-regenerating {
    cursor: progress;
    pointer-events: none;
}

#regenerate-question-btn-inline.is-regenerating .quick-control-svg {
    animation: regenerate-question-spin 1.05s linear infinite;
    transform-origin: 50% 50%;
}

#regenerate-question-btn-inline[disabled],
#regenerate-question-btn-inline.is-disabled,
#toggle-viewer-btn[disabled],
#toggle-viewer-btn.is-disabled,
.quiz-top-controls-row .ai-quick-btn-inline[disabled],
.quiz-top-controls-row .ai-quick-btn-inline.is-disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

#regenerate-question-btn-inline[disabled]:hover,
#regenerate-question-btn-inline.is-disabled:hover,
#toggle-viewer-btn[disabled]:hover,
#toggle-viewer-btn.is-disabled:hover,
.quiz-top-controls-row .ai-quick-btn-inline[disabled]:hover,
.quiz-top-controls-row .ai-quick-btn-inline.is-disabled:hover {
    background: var(--btn-surface-soft);
    border-color: var(--btn-border);
    box-shadow: none;
    transform: none;
}

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

@media (prefers-reduced-motion: reduce) {

    #regenerate-question-btn-inline.is-regenerating .quick-control-svg {
        animation: none;
        opacity: 0.6;
    }
}

/* The toolbar row is nowrap above the phone breakpoint, so the longest label in
   it is what decides when the row overflows the quiz card. Drop to icon-only
   before that happens; the accessible name stays on the button. */
@media (max-width: 1100px) {

    #regenerate-question-btn-inline .quick-control-text {
        display: none;
    }
}

/* Phone is a frozen surface and already drops Notes from the compact toolbar;
   Regenerate follows the same owner rather than adding a phone-only control. */
html.phone-device .quiz-toolbar-controls #regenerate-question-btn-inline {
    display: none;
}

/* Action toast: bottom-centred, carries a single inline Undo affordance. */
.quiz-action-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(14px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 460px);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--btn-border);
    background: linear-gradient(168deg,
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.92)) 92%, rgba(255, 255, 255, 0.04) 8%),
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.92)) 92%, var(--g1, #60a5fa) 8%));
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    color: var(--btn-text);
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    /* Above the quiz card and dock, below modal popup layers. */
    z-index: 4200;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.quiz-action-toast.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.quiz-action-toast-message {
    flex: 1 1 auto;
    min-width: 0;
}

.quiz-action-toast-action {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: var(--btn-radius-sm);
    border: 1px solid var(--btn-border-strong);
    background: var(--btn-surface-soft);
    color: var(--btn-text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.quiz-action-toast-action:hover {
    background: var(--btn-surface-hover);
}

.quiz-action-toast-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 64%, #ffffff 36%);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .quiz-action-toast {
        transition: opacity 0.18s ease;
        transform: translateX(-50%);
    }

    .quiz-action-toast.show {
        transform: translateX(-50%);
    }
}

.ai-quick-btn-inline:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-1px);
}

.ai-quick-btn-inline .gradient-text {
    font-size: 0.8rem;
    font-weight: 600;
}

.quiz-top-controls-row {
    --quiz-controls-outline: color-mix(in srgb, var(--btn-theme-border, #334155) 64%, rgba(255, 255, 255, 0.16) 36%);
    --quiz-controls-surface: color-mix(in srgb, var(--quiz-card-bg, var(--card-bg)) 90%, #020617 10%);
    --quiz-controls-gradient: linear-gradient(155deg,
            color-mix(in srgb, var(--quiz-controls-surface) 82%, var(--g1, #60a5fa) 18%) 0%,
            color-mix(in srgb, var(--quiz-controls-surface) 82%, var(--g2, #f472b6) 18%) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    margin: 0 0 1.25rem;
    flex-wrap: nowrap;
    gap: 7px;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    overflow: visible;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    pointer-events: auto;
    z-index: 18;
}

.quiz-toolbar-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    pointer-events: auto;
}

.quiz-toolbar-controls:hover {
    border-color: transparent;
    box-shadow: none;
}

body.quiz-card-bg-transparent .quiz-toolbar-controls {
    --quiz-controls-surface: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.quiz-progress-text {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    margin-left: auto;
    white-space: nowrap;
    align-self: center;
    pointer-events: none;
}

.quiz-quick-actions-dock {
    position: fixed;
    top: 24px;
    left: 0;
    transform: translateY(-50%) translateZ(0);
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* Stay above quiz panes/floating card, but below evidence and modal popup layers. */
    z-index: 4000;
    isolation: isolate;
    pointer-events: auto;
    will-change: top, transform;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* The desktop dock is portaled to <body>; keep its fixed fallback out of the
   viewport while Welcome owns the quiz pane during session transitions. */
body.welcome-mode .quiz-quick-actions-dock {
    display: none !important;
}

/* The desktop dock is moved under <body>, so hiding #quiz-pane alone does not
   hide it when Learn/PDF Tutor owns the workspace. Keep it quiz-only. */
body:has(#work-area.pdf-tutor-view:not(.pdf-tutor-quiz-view)) .quiz-quick-actions-dock {
    display: none !important;
}

body.pdf-expanded-mode .quiz-quick-actions-dock,
body.ai-expl-slide-modal-open .quiz-quick-actions-dock {
    z-index: 1000;
}

/* Keep the Quick side control reachable when the docked Ask Memora surface overlaps it. */
body.ask-ai-docked-open .quiz-quick-actions-dock {
    z-index: calc(var(--z-ask-memora-modal, 2147483450) + 70);
}

/* ...but the Sources panel is portaled to <body> and sits higher in that same band, so the
   promotion above would paint the dock over it. Drop back to the base layer while it is open.
   :has() specificity (1,2,1) beats the docked rule (0,2,1) regardless of source order. */
body:has(#source-dropdown.active) .quiz-quick-actions-dock {
    z-index: 4000;
}

body.search-dropdown-open .quiz-quick-actions-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-10px) translateZ(0);
}

/* The Tools trigger is permanently expanded: it always reserves its label width
   instead of collapsing to a 34px bookmark that only widened while open. */
.quiz-quick-actions-trigger {
    position: relative;
    height: 34px;
    width: 57px;
    min-width: 57px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 6px;
    border-radius: 0 11px 11px 0;
    border: 1px solid var(--btn-border);
    border-left: none;
    background: linear-gradient(155deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, var(--btn-surface-soft) 84%),
            color-mix(in srgb, var(--g2, #f472b6) 14%, var(--btn-surface-soft) 86%));
    color: var(--btn-text);
    box-shadow: var(--btn-shadow-soft);
    cursor: pointer;
    overflow: hidden;
    transition: width 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.quiz-quick-actions-trigger:hover,
.quiz-quick-actions-dock.is-open .quiz-quick-actions-trigger {
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-hover);
}

.quiz-quick-actions-dock.is-open .quiz-quick-actions-trigger {
    transform: translateX(0) translateY(0);
    background: linear-gradient(155deg,
            color-mix(in srgb, var(--g1, #60a5fa) 18%, var(--btn-surface-hover) 82%),
            color-mix(in srgb, var(--g2, #f472b6) 16%, var(--btn-surface-hover) 84%));
}

.quiz-quick-actions-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--g1, #60a5fa) 64%, #ffffff 36%);
    outline-offset: 2px;
}

.quick-actions-bookmark {
    width: 11px;
    height: 15px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--g1, #60a5fa) 58%, #ffffff 42%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 77%, 0 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    flex: 0 0 auto;
}

.quick-actions-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: var(--btn-text);
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.quiz-quick-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--btn-border);
    background: linear-gradient(168deg,
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.92)) 92%, rgba(255, 255, 255, 0.04) 8%),
            color-mix(in srgb, var(--card-bg, rgba(15, 23, 42, 0.92)) 92%, var(--g1, #60a5fa) 8%));
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
}

.quiz-quick-actions-menu[hidden] {
    display: none !important;
}

.quiz-quick-actions-dock.is-open .quiz-quick-actions-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.quiz-quick-action-btn {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 2px 0;
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--btn-radius-sm);
    color: var(--btn-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.quiz-quick-action-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    transform: translateY(-1px);
}

.quiz-quick-action-btn[disabled],
.quiz-quick-action-btn.is-disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

.quiz-quick-action-btn[disabled]:hover,
.quiz-quick-action-btn.is-disabled:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.quiz-quick-action-btn.is-regenerating {
    cursor: progress;
    pointer-events: none;
    opacity: 0.7;
}

.quiz-quick-action-btn.active {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 20%, var(--btn-surface) 80%),
            color-mix(in srgb, var(--g2, #f472b6) 16%, var(--btn-surface) 84%));
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-soft);
}

.quiz-quick-action-btn.active .gradient-text {
    background: none;
    -webkit-text-fill-color: #f8fafc;
    color: #f8fafc;
}

.quiz-quick-action-phone-only {
    display: none;
}

html.phone-device .quiz-quick-action-phone-only {
    display: flex;
}

@media (max-width: 700px) {
    .quiz-quick-actions-dock {
        align-items: flex-end;
    }

    .quiz-quick-actions-trigger {
        width: 57px;
        min-width: 57px;
        padding: 0 6px;
        gap: 5px;
    }

    .quiz-quick-actions-dock.is-open .quiz-quick-actions-trigger {
        transform: translateX(0) translateY(0);
    }

    .quiz-quick-actions-menu {
        left: auto;
        right: 0;
        min-width: 176px;
        transform-origin: top right;
    }

    /* MOBILE-SCOPE: START phone-only — place Quick Actions in the phone toolbar */
    html.phone-device .quiz-quick-actions-inline {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        align-items: stretch;
        flex: 1 1 100px;
        min-width: 0;
        z-index: 5;
        will-change: auto;
    }

    html.phone-device .quiz-quick-actions-inline .quiz-quick-actions-trigger,
    html.phone-device .quiz-quick-actions-inline.is-open .quiz-quick-actions-trigger {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        padding: 0 10px;
        border-left: 1px solid var(--btn-border);
        border-radius: var(--btn-radius-sm);
        transform: none;
    }

    html.phone-device .quiz-quick-actions-inline .quiz-quick-actions-trigger {
        border: 1px solid color-mix(in srgb, var(--btn-border, rgba(148, 163, 184, 0.28)) 52%, transparent 48%);
        border-radius: var(--btn-radius-pill);
        background:
            linear-gradient(115deg,
                color-mix(in srgb, var(--g1, #60a5fa) 9%, transparent) 0%,
                color-mix(in srgb, var(--btn-surface-soft, rgba(15, 23, 42, 0.28)) 24%, transparent) 42%,
                color-mix(in srgb, var(--g2, #f472b6) 10%, transparent) 100%);
        box-shadow: none;
        font-size: 0.78rem;
    }

    html.phone-device .quiz-quick-actions-inline .quick-control-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        line-height: 1;
    }

    html.phone-device .quiz-quick-actions-inline .quick-control-svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    html.phone-device .quiz-quick-actions-inline .quiz-quick-actions-menu {
        top: calc(100% + 6px);
        right: 0;
        left: auto;
    }

    /* MOBILE-SCOPE: END phone-only */
}

#quiz-expand-lock-btn-inline {
    display: none;
}

body.quiz-card-expanded-mode #quiz-expand-lock-btn-inline {
    display: inline-flex !important;
}

#quiz-expand-lock-btn-inline.locked {
    background: color-mix(in srgb, var(--g1, #60a5fa) 22%, rgba(15, 23, 42, 0.92));
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 30%, transparent);
}

#quiz-expand-lock-btn-inline.locked .gradient-text {
    background: none;
    -webkit-text-fill-color: #f8fafc;
    color: #f8fafc;
}

/* Pulsation for buttons with active AI generation */
@keyframes ai-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
        border-color: rgba(255, 255, 255, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 32%, transparent),
            0 0 14px 3px color-mix(in srgb, var(--g1, #60a5fa) 34%, transparent),
            0 0 28px 5px color-mix(in srgb, var(--g2, #f472b6) 18%, transparent);
        border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    }
}

.ai-quick-btn-inline.ai-generating {
    animation: ai-pulse 1.5s ease-in-out infinite;
}

.ai-quick-btn-inline.ai-btn-blocked {
    cursor: not-allowed !important;
}

#save-btn.saved {
    background: var(--g, linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6)));
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--btn-primary-text, #f8fafc);
    -webkit-text-fill-color: var(--btn-primary-text, #f8fafc);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 62%, rgba(255, 255, 255, 0.28) 38%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 24%, transparent),
        var(--btn-primary-shadow, 0 14px 34px rgba(2, 6, 23, 0.28)),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#save-btn.saved:hover,
#save-btn.saved:focus-visible {
    background: var(--g, linear-gradient(135deg, var(--g1, #60a5fa), var(--g2, #f472b6)));
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--btn-primary-text, #f8fafc);
    -webkit-text-fill-color: var(--btn-primary-text, #f8fafc);
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 78%, #ffffff 22%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 32%, transparent),
        var(--btn-primary-shadow, 0 14px 34px rgba(2, 6, 23, 0.28)),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* --- REFINED POPUP STYLES (THEME-SYNCED) --- */
#wrong-popup {
    --notification-fade-duration: 0.546s;
    position: fixed;
    z-index: var(--z-notification-top, 2147483000);
    background: var(--card-bg, rgba(15, 23, 42, 0.6));
    border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    color: var(--text-main, #e2e8f0);
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent),
        0 0 24px color-mix(in srgb, var(--g2, #f472b6) 14%, transparent);
    max-width: 190px;
    width: auto;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
    display: block;
    white-space: normal;
    word-wrap: break-word;
    isolation: isolate;
}

@keyframes popup-choice-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#wrong-popup.active {
    opacity: 1;
    pointer-events: auto;
    animation: popup-choice-fade-in var(--notification-fade-duration) ease both;
}

#wrong-popup.popup-error {
    --popup-arrow-color: #ef4444;
    background: rgba(31, 18, 18, 0.97);
    border-color: #ef4444;
    color: #fecaca;
}

#wrong-popup.popup-info {
    --popup-arrow-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    background: var(--card-bg, rgba(15, 23, 42, 0.6));
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    color: var(--text-main, #e2e8f0);
}

#wrong-popup.answer-choice-callout,
#wrong-popup.wrong-answer-callout {
    --popup-arrow-color: color-mix(in srgb, var(--g2, #f472b6) 24%, rgba(255, 255, 255, 0.05));
    max-width: min(260px, calc(100vw - 32px));
    border: 1px solid transparent !important;
    background:
        radial-gradient(circle at 14% 0%,
            color-mix(in srgb, var(--g2, #f472b6) 14%, transparent) 0%,
            transparent 42%) padding-box,
        linear-gradient(135deg,
            color-mix(in srgb, var(--g2, #f472b6) 16%, transparent) 0%,
            color-mix(in srgb, var(--g2, #f472b6) 8%, transparent) 100%) padding-box,
        linear-gradient(var(--quiz-card-surface, #0f172a), var(--quiz-card-surface, #0f172a)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--g2, #f472b6) 35%, transparent), color-mix(in srgb, var(--g2, #f472b6) 15%, transparent)) border-box !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 18px 42px rgba(2, 6, 23, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 20px color-mix(in srgb, var(--g2, #f472b6) 16%, transparent) !important;
}

/* WebKit can leave the choice callout at the animation's opacity: 0 start
   frame while pane geometry is settling. Keep Chromium's animation path. */
@supports (-webkit-touch-callout: none) {
    #wrong-popup.answer-choice-callout {
        transition: opacity var(--notification-fade-duration) ease;
    }

    #wrong-popup.answer-choice-callout.active {
        animation: none;
    }
}

#wrong-popup.correct-answer-callout {
    --popup-arrow-color: var(--g1, #60a5fa);
    border: 1px solid transparent !important;
    background:
        radial-gradient(circle at 14% 0%,
            color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent) 0%,
            transparent 42%) padding-box,
        linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent) 0%,
            color-mix(in srgb, var(--g2, #f472b6) 12%, transparent) 100%) padding-box,
        linear-gradient(var(--quiz-card-surface, #0f172a), var(--quiz-card-surface, #0f172a)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 50%, transparent), color-mix(in srgb, var(--g2, #f472b6) 40%, transparent)) border-box !important;
    box-shadow:
        0 18px 42px rgba(2, 6, 23, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 16px 2px color-mix(in srgb, var(--g1, #60a5fa) 14%, transparent),
        0 0 20px 3px color-mix(in srgb, var(--g2, #f472b6) 10%, transparent) !important;
}

#wrong-popup .wrong-popup-body {
    min-width: 0;
}

#wrong-popup .wrong-popup-say-more-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

#wrong-popup .wrong-popup-say-more {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--g2, #f472b6) 50%, transparent) !important;
    border-radius: 6px;
    background: color-mix(in srgb, var(--g2, #f472b6) 18%, rgba(15, 23, 42, 0.4)) !important;
    color: color-mix(in srgb, var(--g2, #f472b6) 15%, #ffffff) !important;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.34rem 0.5rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#wrong-popup .wrong-popup-say-more:hover,
#wrong-popup .wrong-popup-say-more:focus-visible {
    background: color-mix(in srgb, var(--g2, #f472b6) 28%, rgba(15, 23, 42, 0.4)) !important;
    border-color: color-mix(in srgb, var(--g2, #f472b6) 80%, transparent) !important;
    color: #ffffff !important;
    outline: none;
    transform: translateY(-1px);
}

#wrong-popup.correct-answer-callout .wrong-popup-say-more {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 35%, var(--g2, #f472b6) 25%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent), color-mix(in srgb, var(--g2, #f472b6) 12%, transparent)), rgba(15, 23, 42, 0.4) !important;
    color: #ffffff !important;
}

#wrong-popup.correct-answer-callout .wrong-popup-say-more:hover,
#wrong-popup.correct-answer-callout .wrong-popup-say-more:focus-visible {
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent), color-mix(in srgb, var(--g2, #f472b6) 22%, transparent)), rgba(15, 23, 42, 0.4) !important;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 65%, var(--g2, #f472b6) 55%) !important;
    color: #ffffff !important;
}

#wrong-popup.answer-choice-explanation-notice {
    width: min(440px, calc(100vw - 40px));
    max-width: min(440px, calc(100vw - 40px));
    padding: 0.85rem 2.2rem 2rem 1rem;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.45;
}

#wrong-popup.answer-choice-explanation-notice .auto-study-notice-dismiss {
    position: absolute;
    left: 1rem;
    bottom: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    max-width: calc(100% - 3.2rem);
    color: color-mix(in srgb, var(--text-muted, #94a3b8) 88%, var(--text-main, #e2e8f0) 12%);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    user-select: none;
}

#wrong-popup.answer-choice-explanation-notice .auto-study-notice-dismiss input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    flex: 0 0 auto;
}

#wrong-popup.answer-choice-explanation-notice .auto-study-notice-dismiss:focus-within {
    color: var(--text-main, #e2e8f0);
}

#wrong-popup.auto-study-mode-notice {
    width: min(560px, calc(100vw - 40px));
    max-width: min(560px, calc(100vw - 40px));
    padding: 0.85rem 2.2rem 2rem 1rem;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.45;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss {
    position: absolute;
    left: 1rem;
    bottom: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    max-width: calc(100% - 3.2rem);
    color: color-mix(in srgb, var(--text-muted, #94a3b8) 88%, var(--text-main, #e2e8f0) 12%);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    user-select: none;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    flex: 0 0 auto;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss:focus-within {
    color: var(--text-main, #e2e8f0);
}

#wrong-popup.import-route-notice {
    max-width: min(360px, calc(100vw - 24px));
    padding: 0.8rem 2rem 0.8rem 0.95rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 64%, var(--g2, #f472b6) 36%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent),
        0 0 30px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent);
}

#wrong-popup .wrong-popup-body {
    min-width: 0;
}

#wrong-popup .wrong-popup-say-more-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

#wrong-popup .wrong-popup-say-more {
    appearance: none;
    border: 1px solid rgba(252, 165, 165, 0.5);
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.34rem 0.5rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#wrong-popup .wrong-popup-say-more:hover,
#wrong-popup .wrong-popup-say-more:focus-visible {
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(254, 202, 202, 0.72);
    color: #fff1f2;
    outline: none;
    transform: translateY(-1px);
}

#wrong-popup.correct-answer-callout .wrong-popup-say-more {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 35%, var(--g2, #f472b6) 25%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent), color-mix(in srgb, var(--g2, #f472b6) 12%, transparent)), rgba(15, 23, 42, 0.4) !important;
    color: #ffffff !important;
}

#wrong-popup.correct-answer-callout .wrong-popup-say-more:hover,
#wrong-popup.correct-answer-callout .wrong-popup-say-more:focus-visible {
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #60a5fa) 26%, transparent), color-mix(in srgb, var(--g2, #f472b6) 22%, transparent)), rgba(15, 23, 42, 0.4) !important;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 65%, var(--g2, #f472b6) 55%) !important;
    color: #ffffff !important;
}

#wrong-popup.auto-study-mode-notice {
    width: min(560px, calc(100vw - 40px));
    max-width: min(560px, calc(100vw - 40px));
    padding: 0.85rem 2.2rem 2rem 1rem;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.45;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss {
    position: absolute;
    left: 1rem;
    bottom: 0.62rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    max-width: calc(100% - 3.2rem);
    color: color-mix(in srgb, var(--text-muted, #94a3b8) 88%, var(--text-main, #e2e8f0) 12%);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    user-select: none;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    flex: 0 0 auto;
}

#wrong-popup.auto-study-mode-notice .auto-study-notice-dismiss:focus-within {
    color: var(--text-main, #e2e8f0);
}

#wrong-popup.import-route-notice {
    max-width: min(360px, calc(100vw - 24px));
    padding: 0.8rem 2rem 0.8rem 0.95rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 64%, var(--g2, #f472b6) 36%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent),
        0 0 30px color-mix(in srgb, var(--g1, #60a5fa) 12%, transparent);
}

#wrong-popup.quiz-gen-background-notice {
    width: min(620px, calc(100vw - 28px));
    max-width: min(620px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 0.85rem 2.2rem 0.85rem 1rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    background: var(--card-bg, rgba(15, 23, 42, 0.6));
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.35;
}

#wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.18rem;
}

#wrong-popup.quiz-gen-background-notice strong {
    color: var(--text-main, #f8fafc);
    font-weight: 850;
}

#wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-copy span {
    color: var(--btn-text-muted, #cbd5e1);
}

#wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-action {
    appearance: none;
    min-height: 30px;
    padding: 0.42rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 42%, var(--btn-border, rgba(148, 163, 184, 0.28)) 58%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--g1, #60a5fa) 12%, var(--btn-surface-soft, rgba(15, 23, 42, 0.44)) 88%);
    color: var(--btn-text, #e2e8f0);
    box-shadow: var(--btn-shadow-soft, inset 0 1px 0 rgba(255, 255, 255, 0.08));
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-action:hover,
#wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-action:focus-visible {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    box-shadow: var(--btn-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.3));
    outline: none;
    transform: translateY(-1px);
}

#wrong-popup.pdf-tutor-shortcut-notice {
    max-width: min(430px, calc(100vw - 24px));
    padding: 0.9rem 2.1rem 0.9rem 1rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 12%, transparent)),
        linear-gradient(180deg,
            color-mix(in srgb, #111827 84%, var(--g1, #60a5fa) 16%),
            color-mix(in srgb, #020617 88%, var(--g2, #f472b6) 12%));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.44),
        0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent),
        0 0 34px color-mix(in srgb, var(--g2, #f472b6) 14%, transparent);
    left: clamp(20px, 40vw, calc(50vw - 215px)) !important;
    transform: none !important;
}

#wrong-popup.pdf-tutor-shortcut-notice.active {
    animation: popup-shifted-fade-in var(--notification-fade-duration) ease both;
}

#wrong-popup.memora-context-reset-notice {
    max-width: min(430px, calc(100vw - 24px));
    border-color: color-mix(in srgb, var(--g2, #f472b6) 52%, var(--g1, #60a5fa) 48%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 16%, transparent)),
        linear-gradient(180deg,
            color-mix(in srgb, var(--card-bg, #0f172a) 86%, var(--g1, #60a5fa) 14%),
            color-mix(in srgb, #020617 88%, var(--g2, #f472b6) 12%));
}

.memora-context-reset-title {
    font-weight: 800;
    letter-spacing: 0;
    color: var(--text-main, #f8fafc);
    margin-bottom: 0.28rem;
}

.memora-context-reset-body {
    color: var(--btn-text-muted, #cbd5e1);
    font-size: 0.9rem;
    line-height: 1.42;
}

.memora-context-reset-body strong {
    color: var(--text-main, #f8fafc);
}

.memora-context-reset-meter {
    position: relative;
    height: 3px;
    margin-top: 0.72rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-main, #f8fafc) 12%, transparent);
}

.memora-context-reset-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--g1, #60a5fa), var(--g2, #f472b6));
    animation: memora-context-reset-meter 1.45s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes memora-context-reset-meter {
    from {
        transform: translateX(-110%);
    }
    to {
        transform: translateX(260%);
    }
}

@keyframes popup-shifted-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes popup-centered-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#wrong-popup.popup-centered.active:not(.pdf-tutor-shortcut-notice):not(.pdf-tutor-study-preview-notice) {
    animation: popup-centered-fade-in var(--notification-fade-duration) ease both;
}

@media (max-width: 560px) {
    #wrong-popup.quiz-gen-background-notice {
        width: min(380px, calc(100vw - 24px));
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 0.85rem 2rem 0.9rem 0.95rem;
    }

    #wrong-popup.quiz-gen-background-notice .quiz-gen-background-notice-action {
        justify-self: start;
    }
}

#wrong-popup.pdf-tutor-guided-ready-notice {
    max-width: min(460px, calc(100vw - 24px));
    padding: 0.92rem 2.15rem 0.95rem 1rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--g1, #60a5fa) 16%, transparent),
            color-mix(in srgb, var(--g2, #f472b6) 12%, transparent)),
        rgba(15, 23, 42, 0.68);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter: blur(16px) saturate(1.35);
    box-shadow:
        0 18px 42px rgba(2, 6, 23, 0.44),
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 34px color-mix(in srgb, var(--g1, #60a5fa) 18%, transparent);
    cursor: pointer;
}

#wrong-popup.pdf-tutor-guided-ready-notice .pdf-tutor-popup-action {
    cursor: pointer;
}

#wrong-popup.pdf-tutor-guided-onboarding-notice {
    width: min(480px, calc(100vw - 24px));
    max-width: min(480px, calc(100vw - 24px));
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
}

#wrong-popup.pdf-tutor-guided-running-notice {
    width: min(460px, calc(100vw - 24px));
    max-width: min(460px, calc(100vw - 24px));
}

#wrong-popup.pdf-tutor-guided-running-notice .pdf-tutor-popup-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: center;
    width: 100%;
}

#wrong-popup.pdf-tutor-guided-running-notice .pdf-tutor-popup-actions .pdf-tutor-popup-action {
    flex: 1 1 0;
    min-width: 0 !important;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wrong-popup.pdf-tutor-guided-running-notice .pdf-tutor-popup-action:disabled,
#wrong-popup.pdf-tutor-guided-onboarding-notice .pdf-tutor-popup-action:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.28) saturate(0.64);
    box-shadow: none;
}

body.pdf-tutor-guided-exit-confirm-open #wrong-popup.pdf-tutor-guided-ready-notice {
    opacity: 0;
    pointer-events: none;
    filter: blur(10px);
}

#wrong-popup.pdf-tutor-study-preview-notice {
    --popup-fade-duration: 1.75s;
    width: min(640px, calc(100vw - 24px));
    max-width: min(640px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
    overflow: auto;
    padding: 1rem 2.15rem 1rem 1rem;
    text-align: left;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    scrollbar-width: none;
}

#wrong-popup.pdf-tutor-study-preview-notice.active {
    animation: pdf-tutor-study-preview-fade-in 1.75s ease both;
}

@keyframes pdf-tutor-study-preview-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#wrong-popup.pdf-tutor-study-preview-notice::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#wrong-popup.pdf-tutor-study-preview-notice.is-summary-expanded {
    width: min(900px, calc(100vw - 24px));
    max-width: min(900px, calc(100vw - 24px));
    max-height: min(88vh, 760px);
}

.pdf-tutor-shortcut-notice-title {
    margin-bottom: 0.3rem;
    color: var(--text-main, #f8fafc);
    font-size: 0.92rem;
    font-weight: 900;
}

.pdf-tutor-shortcut-notice-body {
    color: var(--btn-text-muted, #cbd5e1);
    font-size: 0.82rem;
    line-height: 1.45;
}

.pdf-tutor-shortcut-notice-body strong {
    color: color-mix(in srgb, var(--g1, #60a5fa) 72%, var(--text-main, #f8fafc));
    font-weight: 900;
}

#wrong-popup .pdf-tutor-popup-action {
    margin-top: 0.7rem;
    min-height: 34px;
    padding-inline: 1rem;
}

#wrong-popup .pdf-tutor-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

#wrong-popup .pdf-tutor-popup-actions .pdf-tutor-popup-action {
    margin-top: 0.75rem;
}

.pdf-tutor-study-preview-summary-shell {
    position: relative;
    margin-top: 0.75rem;
}

.pdf-tutor-study-preview-expand-btn {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    min-height: 28px;
    padding: 0 0.62rem;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 900;
}

.pdf-tutor-study-preview-summary {
    max-height: min(42vh, 340px);
    overflow: auto;
    padding: 2.25rem 0.75rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.28);
    color: var(--text-main, #f8fafc);
    scrollbar-width: none;
}

.pdf-tutor-study-preview-summary::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#wrong-popup.pdf-tutor-study-preview-notice.is-summary-expanded .pdf-tutor-study-preview-summary {
    max-height: min(66vh, 620px);
}

.pdf-tutor-study-preview-summary .ai-formatted-response {
    gap: 0.5rem;
    color: inherit;
}

.pdf-tutor-study-preview-summary .dd-section-header {
    margin: 0.1rem 0 0.35rem;
    font-size: 0.88rem;
}

.pdf-tutor-study-preview-summary .dd-paragraph,
.pdf-tutor-study-preview-summary li {
    font-size: 0.8rem;
    line-height: 1.42;
}

.pdf-tutor-study-preview-summary table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.pdf-tutor-study-preview-summary th,
.pdf-tutor-study-preview-summary td {
    padding: 0.38rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    vertical-align: top;
}

.pdf-tutor-study-preview-summary th {
    color: var(--text-main, #f8fafc);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 800;
}

#wrong-popup.import-route-notice.popup-error {
    border-color: color-mix(in srgb, #ef4444 78%, #fca5a5 22%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(239, 68, 68, 0.18),
        0 0 28px rgba(239, 68, 68, 0.14);
}

#wrong-popup .popup-inline-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

#wrong-popup.quiz-gen-complete-notice {
    max-width: min(420px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 3rem;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
    background: var(--card-bg, rgba(15, 23, 42, 0.6));
}

#wrong-popup .quiz-gen-complete-notice-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#wrong-popup .quiz-gen-complete-notice-action {
    align-self: flex-start;
    min-height: 34px;
    padding: 0 0.85rem;
    border: 1px solid color-mix(in srgb, var(--g1, #60a5fa) 42%, var(--btn-border, rgba(148, 163, 184, 0.28)) 58%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--g1, #60a5fa) 12%, var(--btn-surface-soft, rgba(15, 23, 42, 0.44)) 88%);
    color: var(--btn-text, #f8fafc);
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

/* Keep the Learn CTA in the reserved footer row with the preference control. */
#wrong-popup.quiz-gen-complete-notice .quiz-gen-complete-notice-action {
    position: absolute;
    right: 1rem;
    bottom: 0.48rem;
    align-self: auto;
    margin: 0;
}

#wrong-popup .quiz-gen-complete-notice-action:hover,
#wrong-popup .quiz-gen-complete-notice-action:focus-visible {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 62%, var(--g2, #f472b6) 38%);
    background: var(--btn-surface-hover, color-mix(in srgb, var(--g1, #60a5fa) 18%, rgba(15, 23, 42, 0.62) 82%));
    box-shadow: var(--btn-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.3));
    outline: none;
    transform: translateY(-1px);
}

#wrong-popup .quiz-gen-complete-notice-action:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
}

#wrong-popup:has(.popup-inline-close) {
    padding-right: 2rem;
}

#wrong-popup.import-route-notice .popup-inline-close:hover,
#wrong-popup.pdf-tutor-shortcut-notice .popup-inline-close:hover,
#wrong-popup.pdf-tutor-shortcut-notice .popup-inline-close:focus-visible,
#wrong-popup.import-route-notice .popup-inline-close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.04);
    outline: none;
}

@media (max-width: 700px) {
    #resize-handle,
    .quiz-card-resize-indicators {
        display: none !important;
    }

    #quiz-card,
    #quiz-content-wrapper {
        touch-action: pan-y;
    }

    #nav-row {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.65rem;
        margin-top: 1.25rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #nav-row .nav-btn {
        flex: 1 1 120px;
    }

    .quiz-top-controls-row,
    .ai-action-row {
        flex-wrap: wrap;
    }

    #prev-btn,
    #save-btn,
    #next-btn {
        min-height: 44px;
        font-size: max(0.85rem, 14px);
    }

    #ask-memora-inline-btn,
    #auto-options-trigger,
    #notes-btn-inline,
    #reset-q-small,
    .quiz-top-controls-row .ai-quick-btn-inline,
    .ai-action-row .ai-quick-btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    #wrong-popup .popup-inline-close {
        top: 4px;
        right: 4px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    #wrong-popup .wrong-popup-say-more {
        min-height: 40px;
        padding-inline: 0.75rem;
    }

    #stats-collapse-trigger {
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
    }

    .glass-btn,
    .theme-outline-btn,
    .welcome-btn,
    .choice,
    .nav-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* Arrows - hidden by default, shown only when positioned next to a button */
#wrong-popup::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    display: none;
}

#wrong-popup.popup-side-right::before,
#wrong-popup.popup-side-left::before,
#wrong-popup.popup-side-below::before,
#wrong-popup.popup-side-above::before {
    display: block;
}

/* When a split pane leaves no horizontal room, keep the answer callout inside
   the quiz pane and point to the selected choice from above or below. */
#wrong-popup.popup-side-below::before {
    left: var(--popup-arrow-x, 50%);
    top: -6px;
    transform: translateX(-50%);
    border-width: 0 6px 6px;
    border-color: transparent transparent var(--popup-arrow-color, var(--bd)) transparent;
}

#wrong-popup.popup-side-above::before {
    left: var(--popup-arrow-x, 50%);
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-color: var(--popup-arrow-color, var(--bd)) transparent transparent transparent;
}

/* Popup is to the RIGHT of the button, Arrow points LEFT */
#wrong-popup.popup-side-right::before {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--bd) transparent transparent;
}

#wrong-popup.popup-error.popup-side-right::before {
    border-color: transparent #ef4444 transparent transparent;
}

#wrong-popup.popup-info.popup-side-right::before {
    border-color: transparent color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%) transparent transparent;
}

#wrong-popup.correct-answer-callout.popup-side-right::before {
    border-color: transparent var(--g1, #60a5fa) transparent transparent !important;
}

#wrong-popup.wrong-answer-callout.popup-side-right::before {
    border-color: transparent color-mix(in srgb, var(--g2, #f472b6) 24%, rgba(255, 255, 255, 0.05)) transparent transparent !important;
}

/* Popup is to the LEFT of the button, Arrow points RIGHT */
#wrong-popup.popup-side-left::before {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-color: transparent var(--bd) transparent transparent;
}

#wrong-popup.popup-error.popup-side-left::before {
    border-color: transparent transparent transparent #ef4444;
}

#wrong-popup.popup-info.popup-side-left::before {
    border-color: transparent transparent transparent color-mix(in srgb, var(--g1, #60a5fa) 58%, var(--g2, #f472b6) 42%);
}

#wrong-popup.correct-answer-callout.popup-side-left::before {
    border-color: transparent transparent transparent var(--g2, #f472b6) !important;
}

#wrong-popup.wrong-answer-callout.popup-side-left::before {
    border-color: transparent transparent transparent color-mix(in srgb, var(--g2, #f472b6) 24%, rgba(255, 255, 255, 0.05)) !important;
}

/* --- LIVE STATS BAR --- */
#stats-outer-wrapper {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

#live-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 64%, rgba(255, 255, 255, 0.16) 36%);
    border-radius: 12px;
    padding: 0 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 18%, transparent 82%);
    height: 32px;
    max-width: 600px;
    opacity: 1;
    overflow: hidden;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        padding 0.5s ease,
        border-width 0.3s ease;
}

#live-stats-bar.is-hidden {
    max-width: 0;
    opacity: 0;
    padding: 0;
    border-width: 0;
}

#stats-collapsed-btn {
    display: none;
}

#stats-collapsed-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-hover);
}

#stats-collapse-trigger {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 4px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

#stats-collapse-trigger:hover {
    color: #fff;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: default;
}

.stat-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.8;
}

.stat-val {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    background-image: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.stat-divider {
    width: 1px;
    height: 14px;
    background: color-mix(in srgb, var(--btn-theme-border, #334155) 70%, rgba(255, 255, 255, 0.14) 30%);
}

/* --- Quiz Control Buttons (Inline) --- */
.quiz-ctrl-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--btn-surface-soft);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius-pill);
    cursor: pointer;
    box-shadow: var(--btn-shadow-soft);
    transition: all 0.2s;
}

.quiz-ctrl-btn .gradient-text {
    background-image: var(--g);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.quiz-ctrl-btn:hover {
    background: var(--btn-surface-hover);
    border-color: var(--btn-border-strong);
    box-shadow: var(--btn-shadow-hover);
}

.quiz-ctrl-btn.active {
    border-color: var(--c1);
    box-shadow: 0 0 8px rgba(var(--c1-rgb, 255, 255, 255), 0.3);
}

/* Hide scrollbar utility */
.hide-scrollbar {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

/* Dynamic Z-Indexing Overlay & Close Button Interactions */
#wrong-popup.popup-surface-front {
    z-index: calc(var(--z-ask-memora-modal, 2147483450) + 100) !important;
}

/* The popup is portaled to <body>, but the docked Ask surface sits above the
   normal notification tier. Keep dismissible notifications above that dock
   so their close controls remain reachable. */
body.ask-ai-docked-open #wrong-popup {
    z-index: calc(var(--z-ask-memora-modal, 2147483450) + 100) !important;
}

#wrong-popup .popup-inline-close:hover,
#wrong-popup .popup-inline-close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.04);
    outline: none;
}

/* ==========================================================================
   "LAVA LAMP" BRAND LOGO AURA & SHIMMER EFFECTS
   ========================================================================== */

/* --- Dynamic liquid aura spheres behind Memora brand logo --- */
#welcome-screen .welcome-brand-stage::before,
#welcome-screen .welcome-brand-stage::after {
    content: "";
    position: absolute;
    width: clamp(280px, 40vw, 500px);
    height: clamp(280px, 40vw, 500px);
    border-radius: 50%;
    filter: blur(55px);
    z-index: 1; /* Renders perfectly behind the text which has z-index: 3 */
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.85;
}

/* Primary Theme Color Sphere */
#welcome-screen .welcome-brand-stage::before {
    background: radial-gradient(circle, 
        color-mix(in srgb, var(--g1, #60a5fa) 65%, transparent) 0%, 
        color-mix(in srgb, var(--g1, #60a5fa) 20%, transparent) 50%, 
        transparent 75%
    );
    top: -15%;
    left: 10%;
    animation: brand-aura-blue 16s ease-in-out infinite alternate;
}

/* Secondary Theme Color Sphere */
#welcome-screen .welcome-brand-stage::after {
    background: radial-gradient(circle, 
        color-mix(in srgb, var(--g2, #f472b6) 65%, transparent) 0%, 
        color-mix(in srgb, var(--g2, #f472b6) 20%, transparent) 50%, 
        transparent 75%
    );
    bottom: -15%;
    right: 10%;
    animation: brand-aura-pink 20s ease-in-out infinite alternate;
}

/* GPU-accelerated liquid animation keyframes */
@keyframes brand-aura-blue {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(24%, 18%, 0) scale(1.15);
    }
    66% {
        transform: translate3d(-12%, 32%, 0) scale(0.9);
    }
    100% {
        transform: translate3d(8%, -14%, 0) scale(1.05);
    }
}

@keyframes brand-aura-pink {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(-20%, -24%, 0) scale(0.85);
    }
    66% {
        transform: translate3d(16%, -10%, 0) scale(1.2);
    }
    100% {
        transform: translate3d(-10%, 18%, 0) scale(1.02);
    }
}

/* ==========================================================================
   ISOMORPHIC FLOATING HEADER BUTTONS (GUIDE & SUPPORT US CAPSULES)
   ========================================================================== */

#public-tour-launcher,
#welcome-theme-toggle-btn,
.welcome-calendar-btn,
.welcome-donate-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0 16px !important;
    height: 38px !important;
    border-radius: 9999px !important;
    background: color-mix(in srgb, var(--btn-surface, rgba(15, 23, 42, 0.25)) 30%, rgba(255, 255, 255, 0.03) 70%) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    border: 1px solid color-mix(in srgb, var(--btn-theme-border, #334155) 64%, rgba(255, 255, 255, 0.16) 36%) !important;
    box-shadow: 
        inset 0 0 0 1px color-mix(in srgb, var(--btn-theme-border, #334155) 18%, transparent 82%),
        0 12px 30px -10px rgba(0, 0, 0, 0.5) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
}

/* Keep the two public header actions visually light without shrinking the theme control. */
#public-tour-launcher,
.welcome-calendar-btn,
.welcome-donate-toggle {
    gap: 0.42rem !important;
    min-height: 32.4px !important;
    height: 32.4px !important;
    padding: 0 13.2px !important;
    font-size: 0.696rem !important;
}

#public-tour-launcher svg,
.welcome-calendar-btn svg,
.welcome-donate-toggle svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 4.8px !important;
}

.welcome-donate-toggle::after {
    width: 6px;
    height: 5px;
}

#public-tour-launcher:hover,
#welcome-theme-toggle-btn:hover,
.welcome-calendar-btn:hover,
.welcome-calendar-btn.is-active,
.welcome-donate-toggle:hover,
.welcome-donate[open] .welcome-donate-toggle {
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 38%, var(--btn-theme-border, #334155) 62%) !important;
    background: color-mix(in srgb, var(--btn-surface-hover, rgba(255, 255, 255, 0.08)) 50%, transparent 50%) !important;
    box-shadow: 
        inset 0 0 0 1px color-mix(in srgb, var(--g1, #60a5fa) 22%, transparent 78%),
        0 16px 36px -8px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

/* ==========================================================================
   NEURAL ATLAS WELCOME LOGO KEYFRAMES & RESPONSIVENESS
   ========================================================================== */

@keyframes logo-orbit-spin {
    100% {
        transform: rotate(360deg);
    }
}



@keyframes welcome-logo-bubble-breathe {
    0%, 100% {
        border-radius: 36% 64% 57% 43% / 40% 34% 66% 60%;
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
    33% {
        border-radius: 51% 49% 42% 58% / 37% 56% 44% 63%;
        background-position: 12% 6%, 88% 92%, 50% 50%;
    }
    66% {
        border-radius: 43% 57% 63% 37% / 60% 40% 54% 46%;
        background-position: -8% 14%, 108% 86%, 50% 50%;
    }
}

@keyframes welcome-logo-bubble-luster {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.03);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes welcome-logo-highlight-drift {
    0%, 100% {
        transform: translate3d(-3px, 2px, 0) rotate(-18deg) scale(1);
    }
    50% {
        transform: translate3d(-9px, 7px, 0) rotate(-8deg) scale(1.08);
    }
}

@keyframes welcome-logo-sphere-precess {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.44;
    }
    50% {
        stroke-dashoffset: 18;
        opacity: 0.72;
    }
    100% {
        stroke-dashoffset: 36;
        opacity: 0.44;
    }
}



@keyframes welcome-logo-node-bob {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.72;
    }
    45% {
        transform: scale(1.18);
        opacity: 1;
    }
    70% {
        transform: scale(1.02);
        opacity: 0.86;
    }
}

@keyframes logo-m-draw {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 40;
    }
}

@keyframes logo-core-pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.18);
        opacity: 1;
        filter: drop-shadow(0 0 6px var(--g1, #60a5fa));
    }
}

@keyframes logo-node-glow {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes badge-dot-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
        box-shadow: 0 0 4px var(--g1, #60a5fa);
    }
    100% {
        transform: scale(1.15);
        opacity: 1;
        box-shadow: 0 0 10px var(--g1, #60a5fa);
    }
}

@keyframes logo-mark-reveal {
    0% {
        opacity: 0;
        transform: scale(0.6) rotate(-25deg);
        filter: blur(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes logo-text-reveal {
    0% {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes logo-badge-reveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Quiz empty state neural network background & skeleton styling */
:root {
    --quiz-skeleton-gray-dark: #5b5b5b;
    --quiz-skeleton-gray-mid: #6e6e6e;
}

.quiz-empty-state {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.quiz-empty-neural-net {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
    animation: quizNeuralSway 20s ease-in-out infinite alternate;
}

.quiz-empty-neural-net svg,
.quiz-empty-neural-net canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.quiz-empty-neural-net line {
    stroke: color-mix(in srgb, var(--quiz-skeleton-gray-dark) 50%, var(--quiz-skeleton-gray-mid));
    stroke-width: 0.8;
    stroke-opacity: 0.09;
}

.quiz-empty-neural-net circle {
    fill: var(--quiz-skeleton-gray-mid);
    opacity: 0.15;
    transform-box: fill-box;
    transform-origin: center;
    animation: quizNodePulse 4s ease-in-out infinite;
}

.quiz-empty-neural-net circle.secondary {
    fill: var(--quiz-skeleton-gray-dark);
}

.quiz-skeleton-choice {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    pointer-events: none;
    user-select: none;
    animation: quizSkeletonPulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) 300ms infinite;
}

/* The empty-session illustration is intentionally roomy in the solo workspace,
   but that same placeholder makes the docked quiz card look height-locked even
   after its outer geometry has normalized. Compact only the automatic desktop
   placeholder; real questions and user-resized cards keep their existing sizing. */
html:not(.phone-device) body.ask-ai-docked-open #quiz-card:not(.is-floating):not(.quiz-card-expanded):not([data-quiz-manual-geometry="1"]) .quiz-empty-state {
    min-height: clamp(160px, 26vh, 220px);
}

html:not(.phone-device) body.ask-ai-docked-open #quiz-card:not(.is-floating):not(.quiz-card-expanded):not([data-quiz-manual-geometry="1"]) .quiz-skeleton-choice {
    height: 44px;
    border-radius: 15px;
}

/* Stagger the skeleton choices pulse delay.
   Base 300ms lines the pulse up with the quiz-gen modal's 300ms fade-out
   (see minimizeQuizGenModal), so it starts the instant the modal is gone
   instead of animating underneath it. Increments are kept tight (70ms)
   so all four settle in quickly rather than trailing in late. */
.quiz-skeleton-choice:nth-child(1) { animation-delay: 300ms; }
.quiz-skeleton-choice:nth-child(2) { animation-delay: 370ms; }
.quiz-skeleton-choice:nth-child(3) { animation-delay: 440ms; }
.quiz-skeleton-choice:nth-child(4) { animation-delay: 510ms; }

/* During an active quiz generation, each answer slot gets one randomized
   text-skeleton bar. The lengths are assigned by the generation owner so a
   new run does not replay the same visual pattern. */
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice {
    --quiz-generation-line-length: 80%;
    --quiz-skeleton-gray-dark: #5b5b5b;
    --quiz-skeleton-gray-mid: #6e6e6e;
    animation: none;
    animation-delay: 0ms !important;
    background: transparent;
    border-color: color-mix(in srgb, var(--g1, #60a5fa) 8%, rgba(255, 255, 255, 0.035));
}

html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: min(var(--quiz-generation-line-length, 80%), calc(100% - 48px));
    height: 17.24px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--quiz-skeleton-gray-dark) 0%, var(--quiz-skeleton-gray-mid) 50%, var(--quiz-skeleton-gray-dark) 100%)
        0 0 / 100% 100% no-repeat;
    opacity: 0.18;
    pointer-events: none;
    animation: quizGenerationSkeletonLines 10.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: min(var(--quiz-generation-line-length, 80%), calc(100% - 48px));
    height: 17.24px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 15%,
        rgba(255, 255, 255, 0.07) 35%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.07) 65%,
        rgba(255, 255, 255, 0.02) 85%,
        transparent 100%) 0 50% / 80% 100% no-repeat;
    opacity: 0.18;
    filter: blur(1.5px);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: quizGenerationSkeletonSweep 10.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Keep each answer's loading light and fade cycle at a different phase and speed. */
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(1)::before,
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(1)::after {
    animation-duration: 9.6s;
    animation-delay: -0.8s;
}

html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(2)::before,
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(2)::after {
    animation-duration: 10.8s;
    animation-delay: -3.2s;
}

html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(3)::before,
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(3)::after {
    animation-duration: 12.0s;
    animation-delay: -5.8s;
}

html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(4)::before,
html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice:nth-child(4)::after {
    animation-duration: 13.2s;
    animation-delay: -8.4s;
}

@keyframes quizGenerationSkeletonLines {
    0%, 55% {
        opacity: 0.18;
        filter: brightness(0.96);
    }
    75% {
        opacity: 0.02;
        filter: brightness(0.7);
    }
    85% {
        opacity: 0.02;
        filter: brightness(0.7);
    }
    100% {
        opacity: 0.18;
        filter: brightness(0.96);
    }
}

@keyframes quizGenerationSkeletonSweep {
    0% {
        background-position: -85% 50%;
        opacity: 0;
    }
    8% {
        opacity: 0.14;
    }
    30% {
        opacity: 0.18;
    }
    52% {
        background-position: 185% 50%;
        opacity: 0.04;
    }
    56%, 100% {
        background-position: 185% 50%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.phone-device) .quiz-empty-state-title.quiz-generation-message-leaving,
    html:not(.phone-device) .quiz-empty-state-title.quiz-generation-message-entering {
        animation: none;
    }

    html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice,
    html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice::before,
    html:not(.phone-device) body.quiz-generation-card-pending:not(.welcome-mode) #choices .quiz-skeleton-choice::after {
        animation: none;
    }
}

@keyframes quizNeuralSway {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-1%, 1.5%) scale(1.01) rotate(0.5deg);
    }
    100% {
        transform: translate(1%, -1%) scale(0.99) rotate(-0.5deg);
    }
}

@keyframes quizNodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.12;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.22;
    }
}

.quiz-empty-neural-net circle:nth-child(2n) {
    animation-delay: -1.2s;
    animation-duration: 4.8s;
}

.quiz-empty-neural-net circle:nth-child(3n) {
    animation-delay: -2.4s;
    animation-duration: 5.6s;
}

/* PDF empty state neural network background & styling */
.pdf-empty-state {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 24px;
    box-sizing: border-box;
}

.pdf-empty-neural-net {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
    animation: quizNeuralSway 20s ease-in-out infinite alternate;
}

.pdf-empty-neural-net canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.pdf-empty-state-title {
    margin: 0;
    font-size: clamp(1.7rem, 1.45rem + 0.9vw, 2.08rem);
    line-height: 1.08;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
    z-index: 1;
}

@keyframes quizSkeletonPulse {
    0%, 100% {
        opacity: 0.4;
        background: rgba(255, 255, 255, 0.015);
        border-color: rgba(255, 255, 255, 0.035);
    }
    50% {
        opacity: 0.7;
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.055);
    }
}

#mobile-desktop-note {
    display: none;
}

/* Phone quiz controls retain question navigation and compact secondary actions. */
@media (max-width: 700px) {
    .welcome-donate {
        display: none !important;
    }

    .quiz-top-controls-row {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
    }

    .quiz-toolbar-controls {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .quiz-toolbar-controls .refresh-options-wrapper,
    .quiz-toolbar-controls [data-ai-action="hint"],
    .quiz-toolbar-controls [data-ai-action="explain"],
    .quiz-toolbar-controls [data-ai-action="deepDive"],
    .quiz-progress-text {
        display: none;
    }

    .quiz-toolbar-controls #jump-select,
    .quiz-toolbar-controls .auto-options-wrapper,
    .quiz-toolbar-controls #ask-memora-inline-btn,
    .quiz-toolbar-controls .quiz-quick-actions-inline {
        flex: 1 1 100px;
        min-width: 0;
    }

    .quiz-toolbar-controls #jump-select {
        min-height: 34px;
        margin-right: 0;
        padding: 0 10px;
        font-size: 16px;
    }

    .quiz-toolbar-controls #auto-options-trigger,
    .quiz-toolbar-controls #ask-memora-inline-btn,
    .quiz-toolbar-controls .quiz-quick-actions-inline .quiz-quick-actions-trigger {
        min-height: 34px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .quiz-toolbar-controls .auto-options-wrapper #auto-options-trigger {
        width: 100%;
    }

    .quiz-toolbar-controls :is(#auto-options-trigger, #ask-memora-inline-btn) .quick-control-label {
        gap: 0.3rem;
        font-size: inherit;
    }

}

html.phone-device .quiz-toolbar-controls #notes-btn-inline {
    display: none;
}

/* Phone efficiency: freeze infinite decorative box-shadow pulses at a static
   frame (one-shot feedback animations are untouched). Mirrors the existing
   .ambient-active.is-static precedent. */
html.phone-device #quiz-card.ambient-active {
    animation: none;
    box-shadow: 0 0 var(--amb-max) var(--amb-c2);
}

/* Generated-quiz empty states set a desktop pixel width. Keep every phone
   card inside its pane while that placeholder is visible or being replaced. */
html.phone-device #quiz-card {
    box-sizing: border-box;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
    min-width: 0 !important;
}

html.phone-device .choice.correct {
    animation: memora-choice-correct-settle 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.phone-device #auto-options-trigger.auto-options-notice-pulse,
html.phone-device .auto-opt-btn.auto-feature-notice-pulse {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--g1, #60a5fa) 30%, transparent);
}

html.phone-device .ai-quick-btn-inline.ai-generating {
    animation: none;
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--g1, #60a5fa) 34%, transparent);
}