@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* Quiz Hero Panel - Modern design matching index.html */

:root {
    --quiz-font-body: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --quiz-font-heading: "Sora", "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    font-family: var(--quiz-font-body);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.quiz-hero-eyebrow,
.quiz-dashboard-kicker,
.quiz-sidebar-section-title,
.quiz-sidebar-link,
.quiz-sidebar-primary-btn,
.quiz-sidebar-home-link,
.quiz-sidebar-logout-btn,
.quiz-attempt-review-status,
.quiz-history-status,
.quiz-page-tab {
    font-family: var(--quiz-font-heading);
}

@keyframes quizHeroPanelReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.quiz-hero-panel {
    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0%, transparent 34%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 36%),
        radial-gradient(circle at 18% 30%, rgba(255, 215, 0, 0.22), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.18), transparent 32%),
        radial-gradient(circle at left center, rgba(255, 255, 255, 0.16), transparent 40%),
        linear-gradient(135deg, #003366 0%, #0d4d86 52%, #1d66a8 100%);
    background-size:
        60px 60px,
        60px 60px,
        100% 100%,
        auto,
        auto,
        auto,
        auto,
        auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding: clamp(42px, 5.8vw, 68px) clamp(24px, 5vw, 56px) clamp(34px, 4.8vw, 50px);
    margin-top: 72px;
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 42vw, 470px);
    box-shadow: none;
}

.quiz-app-content {
    display: grid;
    gap: 28px;
    min-width: 0;
    position: relative;
}

.quiz-sidebar {
    display: none;
    width: 300px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
    border-right: 1px solid rgba(214, 222, 235, 0.96);
    box-shadow: 2px 0 12px rgba(0, 51, 102, 0.06);
    position: relative;
    overflow: hidden;
}

.quiz-sidebar-overlay,
.quiz-mobile-topbar {
    display: none;
}

.quiz-mobile-topbar {
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
    border: 1px solid rgba(0, 51, 102, 0.08);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    z-index: 1201;
    pointer-events: auto;
    touch-action: manipulation;
}

.quiz-mobile-topbar-copy {
    min-width: 0;
    max-width: min(180px, calc(100vw - 132px));
}

.quiz-mobile-topbar-copy strong,
.quiz-mobile-topbar-copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-mobile-topbar-copy strong {
    color: var(--lcc-blue-dark);
    line-height: 1.3;
}

.quiz-mobile-topbar-copy span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 0.84rem;
}

.quiz-sidebar-toggle {
    position: relative;
    z-index: 1202;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: var(--lcc-blue);
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    pointer-events: auto;
    touch-action: manipulation;
}

.quiz-sidebar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.quiz-sidebar-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.quiz-sidebar-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.quiz-sidebar-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.quiz-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(214, 222, 235, 0.96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 255, 255, 0.5);
    position: relative;
}

.quiz-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.quiz-sidebar-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
}

.quiz-sidebar-brand-copy {
    min-width: 0;
}

.quiz-sidebar-brand-copy strong,
.quiz-sidebar-user strong {
    display: block;
    color: var(--lcc-blue);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-sidebar-brand-copy span,
.quiz-sidebar-user span {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 0.82rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-sidebar-back-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 51, 102, 0.1);
    border-radius: 10px;
    background: rgba(247, 250, 255, 0.96);
    color: var(--lcc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    top: 16px;
    right: 14px;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
}

@media (min-width: 1025px) {
    .quiz-sidebar-back-btn {
        display: none;
    }
}

@media (max-width: 1024px) {
    .quiz-sidebar-header {
        padding-right: 72px;
    }
}

.quiz-sidebar-back-btn:hover {
    background: rgba(232, 240, 252, 0.98);
    color: var(--lcc-blue);
}

.quiz-sidebar-back-btn svg {
    width: 18px;
    height: 18px;
}

.quiz-sidebar-primary-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 40px);
    margin: 16px 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.14);
}

.quiz-sidebar-primary-btn:hover {
    background: linear-gradient(135deg, var(--lcc-blue-soft), var(--lcc-blue));
    transform: translateY(-1px);
}

.quiz-sidebar-primary-btn svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.quiz-sidebar-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    min-height: 0;
    background: rgba(255, 255, 255, 0.2);
}

.quiz-sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lcc-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 8px 8px;
    margin: 0;
}

.quiz-sidebar-nav {
    display: grid;
    gap: 6px;
    padding-bottom: 12px;
}

.quiz-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--lcc-blue-dark);
    text-decoration: none;
    font-weight: 700;
    border-radius: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quiz-sidebar-link:hover {
    background-color: rgba(0, 51, 102, 0.06);
    color: var(--lcc-blue);
    border-color: rgba(0, 51, 102, 0.08);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.06);
}

.quiz-sidebar-link.is-active {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.1), rgba(58, 127, 183, 0.12));
    color: var(--lcc-blue);
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.08);
}

.quiz-sidebar-link.is-active .quiz-sidebar-link-icon {
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    color: #ffffff;
}

.quiz-sidebar-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0, 51, 102, 0.06);
    color: var(--lcc-blue);
    flex-shrink: 0;
}

.quiz-sidebar-link-icon svg {
    width: 20px;
    height: 20px;
}

.quiz-sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(214, 222, 235, 0.96);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.5);
}

.quiz-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(0, 51, 102, 0.08);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.05);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-speed, 0.25s) ease;
    appearance: none;
    font: inherit;
    color: inherit;
    min-width: 0;
}

.quiz-sidebar-user > div:last-child {
    min-width: 0;
}

.quiz-sidebar-user:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #f0f5fa 100%);
    border-color: var(--lcc-blue);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
    transform: translateY(-1px);
}

.quiz-sidebar-auth-actions[hidden],
.quiz-locked-panel[hidden],
.quiz-sidebar-logout-btn[hidden],
.quiz-sidebar-user[hidden],
#quizLibraryToolbar[hidden] {
    display: none !important;
}

.quiz-sidebar-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    flex-shrink: 0;
}

.quiz-sidebar-avatar svg {
    width: 22px;
    height: 22px;
}

.quiz-sidebar-label {
    margin: 0 0 4px;
    color: var(--text-soft);
    font-size: 0.76rem;
}

.quiz-sidebar-home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--lcc-blue);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: var(--border-radius, 12px);
    width: 100%;
    border: 1px solid var(--border-color, rgba(214, 222, 235, 0.96));
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.04);
    transition: all var(--transition-speed, 0.25s) ease;
    line-height: 1.2;
    appearance: none;
}

.quiz-sidebar-auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quiz-sidebar-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    border: none;
}

.quiz-sidebar-auth-btn svg {
    width: 18px;
    height: 18px;
}

.quiz-sidebar-auth-btn.is-signin {
    background: linear-gradient(135deg, var(--lcc-blue), #01264c);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.16), 0 2px 6px rgba(0, 51, 102, 0.08);
}

.quiz-sidebar-auth-btn.is-signin:hover {
    background: linear-gradient(135deg, #01264c, var(--lcc-blue));
    box-shadow: 0 12px 22px rgba(0, 51, 102, 0.18), 0 4px 10px rgba(0, 51, 102, 0.08);
}

.quiz-sidebar-auth-btn.is-signup {
    color: var(--lcc-blue-dark);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(214, 222, 235, 0.96);
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.04);
}

.quiz-sidebar-auth-btn:hover {
    transform: translateY(-1px);
}

.quiz-sidebar-auth-btn.is-signup:hover {
    border-color: var(--lcc-blue);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.08);
}

.quiz-sidebar-home-link:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #f0f5fa 100%);
    border-color: var(--lcc-blue);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
    transform: translateY(-1px);
}

.quiz-sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--lcc-blue);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--border-color, rgba(214, 222, 235, 0.96));
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: var(--border-radius, 12px);
    width: 100%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.04);
    transition: all var(--transition-speed, 0.25s) ease;
    line-height: 1.2;
    appearance: none;
}

.quiz-sidebar-logout-btn:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #f0f5fa 100%);
    border-color: var(--lcc-blue);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08);
    transform: translateY(-1px);
}

.quiz-sidebar-home-link svg,
.quiz-sidebar-logout-btn svg {
    width: 18px;
    height: 18px;
}

.quiz-hero-panel:not(.is-animated) .quiz-hero-text h1,
.quiz-hero-panel:not(.is-animated) .quiz-hero-text p,
.quiz-hero-panel:not(.is-animated) .quiz-hero-actions,
.quiz-hero-panel:not(.is-animated) .quiz-hero-visual,
.quiz-hero-panel:not(.is-animated) .quiz-hero-stats {
    opacity: 0;
}

.quiz-hero-panel:not(.is-animated) .quiz-hero-text h1,
.quiz-hero-panel:not(.is-animated) .quiz-hero-text p,
.quiz-hero-panel:not(.is-animated) .quiz-hero-actions,
.quiz-hero-panel:not(.is-animated) .quiz-hero-stats {
    transform: translateY(20px);
}

.quiz-hero-panel:not(.is-animated) .quiz-hero-visual {
    transform: translateY(30px);
}

.quiz-hero-panel::before {
    content: '';
    position: absolute;
    top: -12%;
    right: -8%;
    width: 42vw;
    height: 42vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 62%);
    pointer-events: none;
}

.quiz-hero-panel::after {
    content: '';
    position: absolute;
    left: -10%;
    bottom: -20%;
    width: 34vw;
    height: 34vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.18), transparent 64%);
    pointer-events: none;
}

.quiz-hero-panel.is-animated {
    animation: quizHeroPanelReveal 0.35s ease-out both;
}

.quiz-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    gap: 54px;
    align-items: center;
    width: min(1200px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.quiz-hero-text {
    max-width: 640px;
}

.quiz-hero-eyebrow {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.quiz-hero-text h1 {
    font-size: clamp(2.95rem, 5.4vw, 4.3rem);
    color: #ffffff;
    margin-bottom: 18px;
    font-weight: 800;
    line-height: 1.12;
}

.quiz-hero-text p {
    font-size: clamp(1.12rem, 1.5vw, 1.28rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.72;
    margin-bottom: 32px;
    max-width: 42ch;
}

.quiz-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.quiz-hero-actions .hero-button {
    padding: 17px 38px;
    font-size: 1.08rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.quiz-hero-actions .primary-button {
    background: #ffffff;
    color: #003366;
}

.quiz-hero-actions .primary-button:hover {
    background: #f2f7ff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(6, 44, 87, 0.24);
}

.quiz-hero-actions .secondary-button {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.quiz-hero-actions .secondary-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.quiz-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    justify-self: end;
}

.quiz-hero-logo {
    width: 228px;
    height: 228px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

.quiz-hero-stats {
    display: flex;
    gap: 16px;
}

body.quiz-signed-in {
    background:
        radial-gradient(circle at top left, rgba(0, 51, 102, 0.08), transparent 18%),
        radial-gradient(circle at bottom right, rgba(30, 90, 150, 0.09), transparent 22%),
        linear-gradient(rgba(0, 51, 102, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 51, 102, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, #f7fbff 0%, #f4f8fc 48%, #f8fbfe 100%);
    background-size:
        auto,
        auto,
        36px 36px,
        36px 36px,
        auto;
    background-attachment: fixed;
}

body.quiz-signed-in .main-nav {
    display: none;
}

body.quiz-signed-in .page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(0, 51, 102, 0.07), transparent 18%),
        radial-gradient(circle at bottom right, rgba(30, 90, 150, 0.08), transparent 22%),
        linear-gradient(rgba(0, 51, 102, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 51, 102, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, #f7fbff 0%, #f4f8fc 48%, #f8fbfe 100%);
    background-size:
        auto,
        auto,
        36px 36px,
        36px 36px,
        auto;
    background-attachment: fixed;
}

body.quiz-signed-in .main-content {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    align-items: start;
    min-height: 100vh;
    background: transparent;
}

body.quiz-signed-in .quiz-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    align-self: stretch;
    background: #ffffff;
    box-shadow: none;
}

body.quiz-signed-in .quiz-app-content {
    gap: 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.62), transparent 28%);
    padding: 0 0 0 18px;
}

body.quiz-signed-in .quiz-app-content > .panel,
body.quiz-signed-in .quiz-app-content > .quiz-session-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.quiz-signed-in .quiz-hero-panel,
body.quiz-signed-in .quiz-hook-panel {
    display: none;
}

body.quiz-signed-in .site-footer {
    display: none;
}

body.quiz-sidebar-open {
    overflow: hidden;
}

.quiz-hero-panel.is-animated .quiz-hero-text h1 {
    animation: heroFadeInUp 0.8s ease-out 0.2s both;
}

.quiz-hero-panel.is-animated .quiz-hero-text p {
    animation: heroFadeInUp 0.8s ease-out 0.3s both;
}

.quiz-hero-panel.is-animated .quiz-hero-actions {
    animation: heroFadeInUp 0.8s ease-out 0.5s both;
}

.quiz-hero-panel.is-animated .quiz-hero-visual {
    animation: heroFadeInUp 0.8s ease-out 0.6s both;
}

.quiz-hero-panel.is-animated .quiz-hero-stats {
    animation: none;
}

.quiz-stat {
    text-align: center;
    min-width: 150px;
    padding: 20px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.quiz-stat-value {
    display: block;
    font-size: 1.82rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}

.quiz-stat-label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    display: block;
    max-width: 10ch;
    margin: 0 auto;
    line-height: 1.45;
}

/* Quiz Grid */
.quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.quiz-dashboard-panel {
    display: grid;
    gap: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 249, 255, 0.985));
    border: 1px solid rgba(202, 218, 238, 0.92);
    padding: 22px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-dashboard-panel[hidden],
.quiz-profile-panel[hidden],
.quiz-badges-panel[hidden],
.quiz-history-panel[hidden],
.quiz-leaderboard-panel[hidden],
#labsPanel[hidden],
#loginPageLab[hidden],
#quizzes[hidden],
#quizWorkspace[hidden] {
    display: none !important;
}

.quiz-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.quiz-overview-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.998), rgba(242, 248, 255, 0.985));
    border: 1px solid rgba(196, 214, 239, 0.94);
    box-shadow:
        0 16px 30px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-overview-feature-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.quiz-overview-feature-copy h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: clamp(1.26rem, 2vw, 1.68rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.quiz-overview-feature-score {
    min-width: 104px;
    padding: 15px 16px;
    border-radius: 18px;
    text-align: center;
    color: var(--lcc-blue-dark);
    font-size: clamp(1.22rem, 2.2vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(233, 243, 255, 0.97));
    border: 1px solid rgba(188, 208, 236, 0.94);
    box-shadow: 0 10px 20px rgba(15, 79, 138, 0.08);
}

.quiz-dashboard-card {
    position: relative;
    padding: 18px 18px 18px 20px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 249, 255, 0.985));
    border: 1px solid rgba(199, 215, 237, 0.94);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    display: grid;
    gap: 8px;
    overflow: hidden;
}

.quiz-dashboard-card:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(255, 249, 239, 0.985));
    border-color: rgba(231, 220, 189, 0.94);
}

.quiz-dashboard-card:nth-child(3) {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(240, 251, 245, 0.985));
    border-color: rgba(187, 223, 203, 0.94);
}

.quiz-dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #0f4f8a, #2b84d1);
}

.quiz-dashboard-card:nth-child(2)::before {
    background: linear-gradient(180deg, #2563eb, #60a5fa);
}

.quiz-dashboard-card:nth-child(3)::before {
    background: linear-gradient(180deg, #0ea5e9, #38bdf8);
}

.quiz-dashboard-kicker {
    margin: 0;
    color: var(--lcc-blue-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-dashboard-value {
    color: var(--lcc-blue-dark);
    font-size: clamp(1.2rem, 2vw, 1.72rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.quiz-dashboard-note {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 0.93rem;
}

.quiz-history-panel {
    padding: 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 249, 255, 0.985));
    border: 1px solid rgba(199, 216, 238, 0.92);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    display: grid;
    gap: 16px;
}

body.quiz-signed-in #quizHistoryPanel {
    min-height: auto;
    align-content: start;
}

.quiz-history-shell {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 18px;
    min-height: auto;
    grid-template-rows: auto auto auto;
}

.quiz-locked-panel {
    padding: 20px 22px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 249, 255, 0.97));
    border: 1px solid rgba(196, 214, 239, 0.92);
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    display: grid;
    gap: 10px;
}

.quiz-locked-panel h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.14rem;
    line-height: 1.3;
}

.quiz-locked-panel p:not(.quiz-dashboard-kicker) {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.58;
}

.quiz-locked-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
}

.quiz-locked-panel-actions .quiz-sidebar-auth-btn {
    min-width: 136px;
}

.quiz-history-panel.is-guest-locked .quiz-history-actions,
.quiz-history-panel.is-guest-locked .quiz-history-list {
    display: none !important;
}

.quiz-badges-panel.is-guest-locked .quiz-badges-shell,
.quiz-profile-panel.is-guest-locked .quiz-profile-grid {
    display: none !important;
}

.quiz-history-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    border: 1px solid rgba(196, 214, 239, 0.9);
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quiz-history-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(244, 249, 255, 0.99), rgba(232, 241, 255, 0.98));
    border: 1px solid rgba(191, 212, 241, 0.96);
    color: #1d5cb2;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    flex-shrink: 0;
}

.quiz-history-icon svg {
    width: 24px;
    height: 24px;
}

.quiz-history-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.quiz-history-copy h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.34rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.quiz-history-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.93rem;
    line-height: 1.55;
    max-width: none;
}

.quiz-history-head-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(236, 244, 255, 0.96), rgba(245, 249, 255, 0.96));
    border: 1px solid rgba(204, 219, 239, 0.94);
    color: var(--lcc-blue-dark);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-history-head-chip-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #1d5cb2;
}

.quiz-history-head-chip-icon svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1024px) {
    .quiz-history-head {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px 18px;
    }

    .quiz-history-head-chip {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .quiz-achievement-stack {
        top: calc(var(--nav-height) + 12px);
        right: 12px;
        left: 12px;
        width: auto;
    }

    .quiz-achievement-toast {
        gap: 12px;
        padding: 13px 14px;
        border-radius: 18px;
    }

    .quiz-achievement-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .quiz-achievement-copy strong {
        font-size: 0.95rem;
    }

    .quiz-achievement-copy p {
        font-size: 0.82rem;
    }

    .quiz-history-head {
        gap: 10px;
        padding: 16px 14px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .quiz-history-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .quiz-history-icon svg {
        width: 21px;
        height: 21px;
    }

    .quiz-history-copy h3 {
        font-size: 1.1rem;
    }

    .quiz-history-copy p {
        font-size: 0.84rem;
        max-width: none;
    }

    .quiz-history-head-chip {
        width: 100%;
        justify-content: center;
    }
}

.quiz-history-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.quiz-history-heading h3 {
    margin: 6px 0 0;
    color: var(--lcc-blue-dark);
    font-size: 1.34rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.quiz-history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(232, 242, 255, 0.95), rgba(242, 247, 255, 0.95));
    border: 1px solid rgba(205, 219, 237, 0.96);
    color: var(--lcc-blue-dark);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-badges-panel {
    display: grid;
    gap: 20px;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 24%),
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(247, 244, 255, 0.985));
    border: 1px solid rgba(210, 202, 235, 0.92);
    padding: 22px;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-badges-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 255, 0.96));
    border: 1px solid rgba(223, 214, 250, 0.9);
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quiz-badges-icon,
.quiz-badges-head-chip-icon {
    display: grid;
    place-items: center;
}

.quiz-badges-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.2);
    flex-shrink: 0;
}

.quiz-badges-icon svg {
    width: 24px;
    height: 24px;
}

.quiz-badges-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.quiz-badges-copy h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.34rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.quiz-badges-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}

.quiz-badges-head-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    border: 1px solid rgba(214, 198, 250, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-badges-head-chip-icon svg {
    width: 13px;
    height: 13px;
}

.quiz-badges-head-chip-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.14);
}

.quiz-badges-shell {
    display: grid;
    gap: 18px;
}

.quiz-badges-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quiz-badges-summary-card {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    justify-items: center;
    align-content: center;
    text-align: center;
    border: 1px solid rgba(214, 222, 235, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
}

.quiz-badges-summary-card.is-unlocked {
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(248, 251, 255, 0.98));
    border-color: rgba(15, 79, 138, 0.14);
}

.quiz-badges-summary-card.is-hard {
    background: linear-gradient(180deg, rgba(251, 245, 255, 0.98), rgba(248, 241, 255, 0.98));
    border-color: rgba(139, 92, 246, 0.16);
}

.quiz-badges-summary-card.is-total {
    background: linear-gradient(180deg, rgba(255, 249, 235, 0.98), rgba(255, 252, 244, 0.98));
    border-color: rgba(245, 158, 11, 0.16);
}

.quiz-badges-summary-kicker {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-badges-summary-card strong {
    color: var(--lcc-blue-dark);
    font-size: 1.5rem;
    line-height: 1;
}

.quiz-history-list {
    display: grid;
    gap: 12px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    align-content: start;
}

body.quiz-signed-in #quizHistoryPanel .quiz-history-list {
    max-height: none;
    align-content: start;
    overflow: visible;
}

.quiz-history-actions {
    display: none !important;
}

#quizHistoryList::-webkit-scrollbar-track {
    background: rgba(15, 79, 138, 0.06);
    border-radius: 999px;
}

#quizHistoryList::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(123, 167, 214, 0.95), rgba(73, 129, 193, 0.92));
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

#quizHistoryList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(103, 151, 205, 0.98), rgba(58, 113, 177, 0.96));
}

#quizLeaderboardList {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-gutter: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

#quizLeaderboardList::-webkit-scrollbar {
    width: 10px;
}

#quizLeaderboardList::-webkit-scrollbar-track {
    background: rgba(15, 79, 138, 0.06);
    border-radius: 999px;
}

#quizLeaderboardList::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(123, 167, 214, 0.95), rgba(73, 129, 193, 0.92));
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

#quizLeaderboardList::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(103, 151, 205, 0.98), rgba(58, 113, 177, 0.96));
}

.quiz-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border: 1px solid rgba(208, 221, 238, 0.94);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.quiz-history-item.is-strong {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f1fbf6 100%);
    border-color: rgba(181, 225, 202, 0.96);
}

.quiz-history-item.is-improving {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.09), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
    border-color: rgba(193, 214, 241, 0.96);
}

.quiz-history-item.is-needs-review {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fff8ee 100%);
    border-color: rgba(239, 220, 184, 0.96);
}

.quiz-history-item.is-clickable {
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.quiz-history-item.is-clickable:hover,
.quiz-history-item.is-clickable:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(123, 167, 214, 0.98);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    outline: none;
}

.quiz-history-item.is-strong.is-clickable:hover,
.quiz-history-item.is-strong.is-clickable:focus-visible {
    border-color: rgba(92, 184, 141, 0.98);
}

.quiz-history-item.is-improving.is-clickable:hover,
.quiz-history-item.is-improving.is-clickable:focus-visible {
    border-color: rgba(100, 157, 219, 0.98);
}

.quiz-history-item.is-needs-review.is-clickable:hover,
.quiz-history-item.is-needs-review.is-clickable:focus-visible {
    border-color: rgba(214, 160, 66, 0.98);
}

.quiz-history-main,
.quiz-history-side {
    display: grid;
    gap: 4px;
}

.quiz-history-main strong {
    color: var(--lcc-blue-dark);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.quiz-history-main span,
.quiz-history-side small {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.quiz-history-side {
    text-align: right;
    justify-items: end;
    align-content: center;
    gap: 8px;
}

.quiz-history-review-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lcc-blue);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.82;
}

.quiz-history-review-hint::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2.2A1.8 1.8 0 1 0 12 10.2a1.8 1.8 0 0 0 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2.2A1.8 1.8 0 1 0 12 10.2a1.8 1.8 0 0 0 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quiz-history-item.is-strong .quiz-history-review-hint {
    color: #0d7d59;
}

.quiz-history-item.is-improving .quiz-history-review-hint {
    color: #1d5cb2;
}

.quiz-history-item.is-needs-review .quiz-history-review-hint {
    color: #af6a05;
}

.quiz-history-item.is-clickable:hover .quiz-history-review-hint,
.quiz-history-item.is-clickable:focus-visible .quiz-history-review-hint {
    opacity: 1;
}

.quiz-history-score {
    color: var(--lcc-blue);
    font-size: 1.16rem;
    font-weight: 800;
}

.quiz-history-item.is-strong .quiz-history-score {
    color: #0d7d59;
}

.quiz-history-item.is-improving .quiz-history-score {
    color: #1d5cb2;
}

.quiz-history-item.is-needs-review .quiz-history-score {
    color: #af6a05;
}

.quiz-history-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 51, 102, 0.08);
    color: var(--lcc-blue-dark);
}

.quiz-history-status.strong {
    background: rgba(16, 185, 129, 0.12);
    color: #0d7d59;
}

.quiz-history-status.improving {
    background: rgba(59, 130, 246, 0.12);
    color: #1d5cb2;
}

.quiz-history-status.needs-review {
    background: rgba(245, 158, 11, 0.14);
    color: #af6a05;
}

.quiz-history-score-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.quiz-history-arrow {
    color: var(--text-soft);
    font-size: 1.2rem;
    line-height: 1;
}

.quiz-history-item.is-strong .quiz-history-arrow {
    color: rgba(13, 125, 89, 0.72);
}

.quiz-history-item.is-improving .quiz-history-arrow {
    color: rgba(29, 92, 178, 0.72);
}

.quiz-history-item.is-needs-review .quiz-history-arrow {
    color: rgba(175, 106, 5, 0.72);
}

.quiz-history-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(0, 51, 102, 0.04);
    border: 1px dashed rgba(0, 51, 102, 0.14);
    text-align: center;
}

.quiz-history-empty strong {
    display: block;
    color: var(--lcc-blue-dark);
    margin-bottom: 6px;
}

.quiz-history-empty p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.quiz-leaderboard-panel {
    padding: 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 249, 255, 0.98));
    border: 1px solid rgba(190, 210, 236, 0.95);
    box-shadow:
        0 16px 30px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    display: grid;
    gap: 18px;
}

.quiz-leaderboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    border: 1px solid rgba(196, 214, 239, 0.9);
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quiz-leaderboard-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(15, 79, 138, 0.14), rgba(43, 132, 209, 0.18));
    color: var(--lcc-blue);
    flex-shrink: 0;
}

.quiz-leaderboard-icon svg {
    width: 24px;
    height: 24px;
}

.quiz-leaderboard-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.quiz-leaderboard-head-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(196, 214, 239, 0.92);
    color: var(--lcc-blue);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-leaderboard-head-chip-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 79, 138, 0.1);
}

.quiz-leaderboard-head-chip-icon svg {
    width: 13px;
    height: 13px;
}

.quiz-leaderboard-copy h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.34rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.quiz-leaderboard-copy p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.quiz-leaderboard-list {
    display: grid;
    gap: 12px;
}

.quiz-leaderboard-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid rgba(196, 214, 239, 0.92);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.quiz-leaderboard-item.is-clickable {
    cursor: pointer;
}

.quiz-leaderboard-item.is-current-user {
    border-color: rgba(59, 130, 246, 0.34);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(243, 248, 255, 0.98), rgba(249, 252, 255, 0.98));
}

.quiz-leaderboard-item.is-rank-1 {
    border-color: rgba(217, 170, 17, 0.34);
    background:
        radial-gradient(circle at top right, rgba(245, 190, 42, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 252, 239, 0.98), rgba(255, 248, 228, 0.98));
}

.quiz-leaderboard-item.is-rank-2 {
    border-color: rgba(148, 163, 184, 0.34);
    background:
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 246, 252, 0.98));
}

.quiz-leaderboard-item.is-rank-3 {
    border-color: rgba(194, 120, 46, 0.32);
    background:
        radial-gradient(circle at top right, rgba(194, 120, 46, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 248, 241, 0.98), rgba(252, 242, 233, 0.98));
}

.quiz-leaderboard-item.is-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.quiz-leaderboard-rank {
    min-width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 79, 138, 0.16), rgba(43, 132, 209, 0.2));
    color: var(--lcc-blue);
    font-weight: 800;
    border: 1px solid rgba(169, 199, 234, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.quiz-leaderboard-item.is-rank-1 .quiz-leaderboard-rank {
    background: linear-gradient(135deg, rgba(245, 190, 42, 0.28), rgba(217, 170, 17, 0.3));
    color: #8a6100;
    border-color: rgba(217, 170, 17, 0.4);
}

.quiz-leaderboard-item.is-rank-2 .quiz-leaderboard-rank {
    background: linear-gradient(135deg, rgba(203, 213, 225, 0.3), rgba(148, 163, 184, 0.28));
    color: #475569;
    border-color: rgba(148, 163, 184, 0.4);
}

.quiz-leaderboard-item.is-rank-3 .quiz-leaderboard-rank {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(180, 83, 9, 0.24));
    color: #9a4d09;
    border-color: rgba(194, 120, 46, 0.38);
}

.quiz-leaderboard-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quiz-leaderboard-main strong {
    color: var(--lcc-blue-dark);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-leaderboard-main span {
    color: var(--text-soft);
    font-size: 0.84rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-leaderboard-score-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(196, 214, 239, 0.92);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.quiz-leaderboard-score-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 79, 138, 0.1);
    color: var(--lcc-blue);
    flex-shrink: 0;
}

.quiz-leaderboard-score-icon svg {
    width: 16px;
    height: 16px;
}

.quiz-leaderboard-score-block {
    display: grid;
    gap: 2px;
}

.quiz-leaderboard-score-label {
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-leaderboard-score {
    color: var(--lcc-blue);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 520px) {
    .quiz-locked-panel-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quiz-locked-panel-actions .quiz-sidebar-auth-btn {
        min-width: 0;
        width: 100%;
        padding-inline: 10px;
    }

    .quiz-leaderboard-head {
        gap: 12px;
        padding: 16px 14px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .quiz-leaderboard-head-chip {
        width: 100%;
        justify-content: center;
    }

    .quiz-leaderboard-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        justify-items: stretch;
        gap: 12px;
        padding: 14px 14px 16px;
    }

    .quiz-leaderboard-score-wrap {
        grid-column: 3;
        justify-self: end;
        align-self: start;
        margin-top: 0;
    }

    .quiz-leaderboard-score {
        font-size: 1rem;
    }
}

.quiz-profile-panel {
    display: grid;
    gap: 20px;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 24%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 255, 0.985));
    border: 1px solid rgba(202, 214, 235, 0.92);
    padding: 22px;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.quiz-profile-card {
    padding: 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.975));
    border: 1px solid rgba(206, 218, 236, 0.94);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    display: grid;
    gap: 16px;
    align-self: start;
}

.quiz-profile-identity {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.quiz-profile-badges-preview {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.1), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(246, 242, 255, 0.98));
    border-color: rgba(207, 193, 240, 0.96);
}

.quiz-profile-identity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
}

.quiz-profile-metrics-pane {
    display: grid;
    gap: 14px;
}

.quiz-profile-metrics-pane {
    min-width: 0;
}

.quiz-profile-note-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.09), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(245, 249, 255, 0.98));
    border: 1px solid rgba(210, 220, 236, 0.95);
}

.quiz-profile-note-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.quiz-profile-note-label {
    display: block;
    color: var(--lcc-blue-dark);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.2;
}

.quiz-profile-note-help {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.quiz-profile-note-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 79, 138, 0.08);
    color: var(--lcc-blue-dark);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-profile-note-field {
    display: block;
}

.quiz-profile-note-editor,
.quiz-profile-note-display {
    display: grid;
    gap: 12px;
}

.quiz-profile-note-editor[hidden],
.quiz-profile-note-display[hidden] {
    display: none !important;
}

.quiz-profile-note-text {
    margin: 0;
    padding: 14px 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(210, 220, 236, 0.95);
    color: var(--text-main);
    font-size: 0.94rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.quiz-profile-note-field textarea {
    width: 100%;
    min-height: 94px;
    padding: 12px 13px;
    border: 1px solid rgba(196, 208, 226, 0.95);
    border-radius: 16px;
    resize: vertical;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-main);
    font: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quiz-profile-note-field textarea:focus {
    border-color: rgba(43, 132, 209, 0.8);
    box-shadow: 0 0 0 4px rgba(43, 132, 209, 0.12);
}

.quiz-profile-note-field textarea:disabled {
    background: rgba(244, 247, 252, 0.95);
    color: var(--text-soft);
    cursor: not-allowed;
}

.quiz-profile-note-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.quiz-profile-note-display-actions {
    display: grid;
    justify-content: end;
    align-items: center;
}

.quiz-profile-note-status {
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.quiz-profile-note-save {
    appearance: none;
    border: none;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f4f8a, #2b84d1);
    color: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(15, 79, 138, 0.14);
}

.quiz-profile-note-edit {
    appearance: none;
    border: 1px solid rgba(196, 208, 226, 0.95);
    min-height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--lcc-blue-dark);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    justify-self: end;
}

.quiz-profile-note-save:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.quiz-profile-history-card {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(255, 247, 232, 0.97));
    border-color: rgba(236, 214, 171, 0.96);
}

.quiz-profile-progress-card {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.22), transparent 34%),
        radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(233, 249, 240, 0.97));
    border-color: rgba(159, 220, 190, 0.98);
}

.quiz-profile-badges-card {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.22), transparent 34%),
        radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.1), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 238, 255, 0.97));
    border-color: rgba(201, 187, 239, 0.98);
}

.quiz-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quiz-profile-head-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quiz-profile-head-copy h3,
#quizProfileName,
.quiz-profile-subtext,
#quizProfileEmail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-profile-rank-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 22px 22px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(245, 190, 42, 0.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.14), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.995), rgba(245, 249, 255, 0.98));
    border: 1px solid rgba(214, 196, 141, 0.92);
    box-shadow:
        0 14px 26px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-profile-rank-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.quiz-profile-rank-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.quiz-profile-rank-main {
    display: grid;
    gap: 4px;
}

.quiz-profile-rank-label {
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quiz-profile-rank-main strong {
    color: var(--lcc-blue-dark);
    font-size: 1.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.quiz-profile-rank-progress {
    position: relative;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(214, 222, 235, 0.82);
}

.quiz-profile-rank-progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #d4a400, #2b84d1);
    transition: width 0.25s ease;
}

.quiz-profile-rank-copy {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.quiz-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0f4f8a, #2b84d1);
    box-shadow: 0 12px 24px rgba(15, 79, 138, 0.18);
    flex-shrink: 0;
}

.quiz-profile-avatar svg {
    width: 30px;
    height: 30px;
}

.quiz-profile-head h3 {
    margin: 4px 0 4px;
    color: var(--lcc-blue-dark);
    font-size: 1.58rem;
    line-height: 1.24;
}

.quiz-profile-subtext {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
}

@media (min-width: 1025px) {
    .quiz-profile-head {
        gap: 20px;
    }

    .quiz-profile-head-copy {
        gap: 8px;
    }

    .quiz-profile-avatar {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .quiz-profile-avatar svg {
        width: 34px;
        height: 34px;
    }

    .quiz-profile-head .quiz-dashboard-kicker {
        font-size: 0.9rem;
        letter-spacing: 0.18em;
    }

    .quiz-profile-head h3 {
        font-size: 1.9rem;
    }

    .quiz-profile-subtext {
        font-size: 1.12rem;
    }
}

.quiz-profile-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.quiz-profile-badge-list,
.quiz-badges-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.quiz-profile-badge-list .quiz-history-empty,
.quiz-badges-list .quiz-history-empty {
    grid-column: 1 / -1;
    width: 100%;
}

.quiz-profile-badge {
    display: grid;
    gap: 10px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(214, 222, 235, 0.96);
}

.quiz-profile-badge.is-earned {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(246, 241, 255, 0.98), rgba(251, 248, 255, 0.98));
    border-color: rgba(139, 92, 246, 0.22);
}

.quiz-profile-badge.is-locked {
    opacity: 0.76;
}

.quiz-profile-badge-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-profile-badge-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(15, 79, 138, 0.08);
    color: var(--lcc-blue);
    flex-shrink: 0;
}

.quiz-profile-badge.is-earned .quiz-profile-badge-icon {
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.14);
}

.quiz-profile-badge-icon svg {
    width: 22px;
    height: 22px;
}

.quiz-profile-badge-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.quiz-profile-badge-main strong {
    color: var(--lcc-blue-dark);
    font-size: 0.95rem;
    line-height: 1.3;
}

.quiz-profile-badge-main span,
.quiz-profile-badge-note {
    color: var(--text-soft);
    font-size: 0.83rem;
    line-height: 1.5;
}

.quiz-profile-stat {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    justify-items: center;
    text-align: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    border: 1px solid rgba(184, 208, 239, 0.96);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.035);
}

.quiz-profile-stat:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f1fbf6 100%);
    border-color: rgba(181, 225, 202, 0.96);
}

.quiz-profile-stat:nth-child(3) {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7f2ff 100%);
    border-color: rgba(210, 194, 239, 0.96);
}

.quiz-profile-stat span {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-profile-stat strong {
    color: var(--lcc-blue-dark);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.25;
}

.quiz-profile-insight-card {
    display: grid;
    gap: 6px;
    padding: 16px 16px 15px;
    border-radius: 18px;
    border: 1px solid rgba(206, 218, 236, 0.94);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.035);
}

.quiz-profile-insight-card.is-strongest {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(240, 250, 245, 0.98));
    border-color: rgba(179, 226, 202, 0.96);
}

.quiz-profile-insight-card.is-review {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(255, 248, 236, 0.98));
    border-color: rgba(239, 217, 171, 0.96);
}

.quiz-profile-insight-label {
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quiz-profile-insight-card strong {
    color: var(--lcc-blue-dark);
    font-size: 1.08rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.quiz-profile-insight-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.quiz-profile-stat-highlight {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 249, 236, 0.98));
    border-color: rgba(238, 214, 163, 0.96);
}

.quiz-profile-stat-topic {
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 242, 255, 0.98));
    border-color: rgba(214, 198, 242, 0.96);
}

.quiz-profile-history-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.quiz-profile-badges-card {
    grid-column: 1 / -1;
}

.quiz-profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 1100;
}

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 51, 102, 0.28);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 1200;
}

.confirm-overlay[hidden] {
    display: none !important;
}

.confirm-card {
    width: min(100%, 390px);
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(0, 51, 102, 0.08);
    box-shadow: 0 24px 48px rgba(0, 51, 102, 0.18);
}

.confirm-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: #b42318;
    background: rgba(197, 48, 48, 0.1);
}

.confirm-icon svg {
    width: 24px;
    height: 24px;
}

.confirm-card h3 {
    color: var(--lcc-blue-dark);
    font-size: 1.12rem;
    margin: 0 0 8px;
}

.confirm-card p {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.confirm-btn {
    min-width: 92px;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.confirm-btn.secondary {
    color: var(--lcc-blue-dark);
    background: rgba(0, 51, 102, 0.06);
}

.confirm-btn.danger {
    color: #ffffff;
    background: linear-gradient(135deg, #c53030, #b42318);
}

.quiz-profile-modal-overlay[hidden] {
    display: none !important;
}

.quiz-profile-modal {
    width: min(940px, calc(100vw - 48px));
    max-height: min(86vh, 920px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.98));
    border: 1px solid rgba(203, 215, 230, 0.95);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.24);
}

.quiz-profile-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(214, 222, 235, 0.96);
}

.quiz-profile-modal-head h3 {
    margin: 6px 0 0;
    color: var(--lcc-blue-dark);
    font-size: 1.4rem;
    line-height: 1.3;
}

.quiz-profile-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 51, 102, 0.06);
    color: var(--lcc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quiz-profile-modal-close svg {
    width: 22px;
    height: 22px;
}

.quiz-profile-modal-body {
    overflow-y: auto;
    padding: 24px;
    overscroll-behavior: contain;
}

.quiz-attempt-review-modal {
    width: min(980px, calc(100vw - 44px));
}

.quiz-attempt-review-summary {
    display: grid;
    grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(214, 222, 235, 0.96);
}

.quiz-attempt-review-score {
    min-height: 96px;
    border-radius: 22px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0f4f8a, #2b84d1);
    color: #ffffff;
    padding: 18px 14px;
    letter-spacing: -0.03em;
    box-shadow: 0 14px 28px rgba(15, 79, 138, 0.18);
}

.quiz-attempt-review-score-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.86;
}

.quiz-attempt-review-score strong {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.quiz-attempt-review-copy {
    display: grid;
    gap: 6px;
    align-content: center;
}

.quiz-attempt-review-copy h4 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.24rem;
}

.quiz-attempt-review-copy p:last-child {
    margin: 0;
    color: var(--text-soft);
    font-weight: 600;
}

.quiz-attempt-review-date {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.quiz-attempt-review-list {
    display: grid;
    gap: 22px;
    margin-top: 22px;
}

.quiz-attempt-review-item {
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid rgba(207, 220, 237, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.97));
    display: grid;
    gap: 16px;
}

.quiz-attempt-review-item.is-correct {
    border-color: rgba(171, 224, 198, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 250, 244, 0.97));
}

.quiz-attempt-review-item.is-incorrect {
    border-color: rgba(240, 202, 202, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 244, 244, 0.97));
}

.quiz-attempt-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.quiz-attempt-review-head > div {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.quiz-attempt-review-head h5 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.02rem;
    line-height: 1.5;
    padding-right: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.quiz-attempt-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(0, 51, 102, 0.08);
    color: var(--lcc-blue-dark);
}

.quiz-attempt-review-item.is-correct .quiz-attempt-review-status {
    background: rgba(16, 185, 129, 0.12);
    color: #0d7d59;
}

.quiz-attempt-review-item.is-incorrect .quiz-attempt-review-status {
    background: rgba(239, 68, 68, 0.12);
    color: #b33030;
}

.quiz-attempt-review-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.quiz-attempt-review-answer-card,
.quiz-attempt-review-explanation {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(214, 222, 235, 0.94);
    background: rgba(255, 255, 255, 0.92);
    min-width: 0;
}

.quiz-attempt-review-answer-card.is-selected {
    border-color: rgba(123, 167, 214, 0.96);
    background: rgba(59, 130, 246, 0.08);
}

.quiz-attempt-review-answer-card.is-correct {
    border-color: rgba(171, 224, 198, 0.96);
    background: rgba(16, 185, 129, 0.08);
}

.quiz-attempt-review-answer-label {
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.quiz-attempt-review-answer-card strong {
    color: var(--lcc-blue-dark);
    font-size: 0.96rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.quiz-attempt-review-explanation {
    background: rgba(248, 251, 255, 0.9);
}

.quiz-attempt-review-explanation p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.68;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.quiz-public-profile-grid {
    display: grid;
    gap: 18px;
}

.quiz-public-profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 20px;
}

.quiz-public-profile-hero,
.quiz-public-profile-card {
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
    border: 1px solid rgba(215, 224, 236, 0.96);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-public-profile-hero {
    display: grid;
    gap: 16px;
}

.quiz-public-profile-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.quiz-public-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.quiz-public-profile-head > div:last-child {
    min-width: 0;
    flex: 1;
}

.quiz-public-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.14);
    flex-shrink: 0;
}

.quiz-public-profile-avatar svg {
    width: 30px;
    height: 30px;
}

.quiz-public-profile-head h4 {
    margin: 4px 0 4px;
    color: var(--lcc-blue-dark);
    font-size: 1.32rem;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-public-profile-subtext {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-public-profile-rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 79, 138, 0.12), rgba(43, 132, 209, 0.18));
    color: var(--lcc-blue-dark);
    border: 1px solid rgba(43, 132, 209, 0.18);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.quiz-public-profile-rank-meter {
    display: grid;
    gap: 8px;
}

.quiz-public-profile-rank-meter-bar {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(214, 222, 235, 0.9);
}

.quiz-public-profile-rank-meter-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d4a400, #2b84d1);
}

.quiz-public-profile-rank-copy {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.quiz-public-profile-note {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    border: 1px solid rgba(214, 222, 235, 0.96);
}

.quiz-public-profile-note-label {
    color: var(--lcc-blue-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quiz-public-profile-note p {
    margin: 0;
    color: var(--text-main);
    font-size: 0.93rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.quiz-public-profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quiz-public-profile-stat {
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(214, 222, 235, 0.96);
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quiz-public-profile-stat span {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.quiz-public-profile-stat strong {
    color: var(--lcc-blue-dark);
    font-size: 1rem;
    font-weight: 800;
}

@media (min-width: 1025px) {
    .quiz-public-profile-stat {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .quiz-public-profile-stat span,
    .quiz-public-profile-stat strong {
        text-align: center;
    }
}

.quiz-public-profile-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.quiz-public-profile-badges.is-collapsed {
    max-height: 188px;
    overflow: hidden;
}

.quiz-public-profile-badges.is-expanded {
    max-height: min(46vh, 360px);
    overflow-y: auto;
    padding-right: 6px;
}

.quiz-public-profile-badge-actions {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.quiz-public-profile-badge-actions .quiz-history-toggle-btn {
    appearance: none;
    border: 1px solid rgba(187, 206, 231, 0.96);
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.98));
    color: var(--lcc-blue-dark);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quiz-public-profile-badge-actions .quiz-history-toggle-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(43, 132, 209, 0.55);
    box-shadow: 0 12px 22px rgba(15, 79, 138, 0.08);
}

.quiz-public-profile-badge {
    min-height: 86px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(214, 222, 235, 0.96);
    display: grid;
    place-items: center;
    padding: 12px;
}

.quiz-public-profile-card .quiz-history-heading {
    margin-bottom: 4px;
}

.quiz-public-profile-badge.is-earned {
    border-color: rgba(15, 79, 138, 0.18);
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(248, 251, 255, 0.98));
}

.quiz-public-profile-badge-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(15, 79, 138, 0.08);
    color: var(--lcc-blue);
}

.quiz-public-profile-badge-icon svg {
    width: 24px;
    height: 24px;
}

.quiz-public-profile-badge.is-earned .quiz-public-profile-badge-icon {
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.12);
}

.quiz-public-profile-progress {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.quiz-public-profile-progress .quiz-profile-progress-item {
    min-width: 0;
}

.quiz-public-profile-progress .quiz-profile-progress-main {
    min-width: 0;
}

/* Quiz Card */
body.quiz-signed-in #quizzes {
    order: -3;
}

body.quiz-signed-in #quizDashboardPanel {
    order: -2;
}

body.quiz-signed-in #quizzes .section-text,
body.quiz-signed-in #quizDashboardPanel .section-text,
body.quiz-signed-in #quizLeaderboardPanel .section-text,
body.quiz-signed-in #quizProfilePanel .section-text {
    display: none;
}

body.quiz-signed-in #quizzes .section-heading,
body.quiz-signed-in #quizDashboardPanel .section-heading,
body.quiz-signed-in #quizLeaderboardPanel .section-heading,
body.quiz-signed-in #quizProfilePanel .section-heading {
    gap: 0;
}

body.quiz-signed-in #quizzes > .section-heading,
body.quiz-signed-in #quizHistoryPanel > .section-heading,
body.quiz-signed-in #quizProfilePanel > .section-heading {
    display: none;
}

body.quiz-signed-in #quizzes .section-heading h2,
body.quiz-signed-in #quizDashboardPanel .section-heading h2,
body.quiz-signed-in #quizLeaderboardPanel .section-heading h2,
body.quiz-signed-in #quizProfilePanel .section-heading h2 {
    font-size: clamp(1.95rem, 2.9vw, 2.65rem);
}

.quiz-library-toolbar {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    justify-items: center;
}

body.quiz-signed-in .quiz-library-toolbar {
    margin-top: 0;
}

.quiz-library-kicker {
    margin: 0;
    color: var(--lcc-blue-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.quiz-page-tabs[hidden] {
    display: none !important;
}

.quiz-library-toolbar:has(.quiz-page-tabs[hidden]) {
    display: none;
}

.quiz-page-tab {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(214, 222, 235, 0.96);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: var(--lcc-blue-dark);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.quiz-page-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 79, 138, 0.2);
}

.quiz-page-tab.is-active {
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.14);
}

.quiz-page-tab.is-locked,
.quiz-page-tab:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.quiz-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    color: var(--text-soft);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.quiz-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(212, 223, 237, 0.92);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: quizCardReveal 0.55s ease-out both;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-card[hidden] {
    display: none !important;
}

.quiz-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--lcc-blue), #1d66a8);
    z-index: -1;
}

.quiz-card.is-beginner::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.quiz-card.is-core::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.quiz-card.is-intermediate::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quiz-card.is-skill-builder::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quiz-card.is-challenger::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.quiz-card.is-advanced::before {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.quiz-card.is-mastery::before {
    background: linear-gradient(90deg, #1d4ed8, #1e40af);
}

.quiz-card.is-elite::before {
    background: linear-gradient(90deg, #f59e0b, #facc15, #f59e0b);
    background-size: 200% 100%;
    animation: quizEliteStripeShift 2.6s linear infinite;
}

.quiz-card.is-expert::before {
    background: linear-gradient(90deg, #06b6d4, #3b82f6, #22d3ee, #3b82f6);
    background-size: 240% 100%;
    animation: quizExpertStripePulse 0.72s linear infinite;
}

.quiz-card.is-pro::before {
    background: linear-gradient(90deg, #7c3aed, #ec4899, #f43f5e, #7c3aed);
    background-size: 260% 100%;
    animation: quizProStripePulse 0.56s linear infinite;
}

.quiz-card.is-legend::before {
    background: linear-gradient(90deg, #0f172a, #2563eb, #7c3aed, #f8fafc, #0f172a);
    background-size: 280% 100%;
    animation: quizLegendStripeSurge 0.9s linear infinite;
}

.quiz-card.is-apex::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.1)),
        linear-gradient(90deg, #050507 0%, #0b0615 18%, #2e1065 42%, #7c3aed 70%, #ddd6fe 88%, #050507 100%);
    background-size: 220% 100%, 280% 100%;
    animation: quizApexStripeRush 0.72s linear infinite;
}

.quiz-card.is-pro {
    background:
        radial-gradient(circle at top right, rgba(244, 114, 182, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.14), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fff9fd 100%);
    border-color: rgba(232, 175, 214, 0.98);
    box-shadow:
        0 16px 34px rgba(124, 58, 237, 0.09),
        0 0 0 1px rgba(255, 255, 255, 0.72) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.quiz-card.is-pro:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 22px 40px rgba(124, 58, 237, 0.14),
        0 0 24px rgba(236, 72, 153, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.76) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-card.is-legend {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.18), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: rgba(191, 210, 245, 0.96);
    box-shadow:
        0 18px 36px rgba(17, 24, 39, 0.12),
        0 0 32px rgba(59, 130, 246, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.76) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    animation:
        quizCardReveal 0.55s ease-out both,
        quizLegendCardFlare 1.6s ease-in-out infinite;
}

.quiz-card.is-apex {
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.14), transparent 30%),
        radial-gradient(circle at bottom left, rgba(67, 56, 202, 0.12), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    border-color: rgba(222, 214, 247, 0.96);
    box-shadow:
        0 18px 36px rgba(16, 10, 14, 0.12),
        0 0 28px rgba(124, 58, 237, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.78) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    animation: quizCardReveal 0.55s ease-out both;
}

.quiz-card.is-apex:hover {
    transform: none;
    box-shadow:
        0 26px 44px rgba(16, 10, 14, 0.14),
        0 0 34px rgba(124, 58, 237, 0.14),
        0 0 16px rgba(139, 92, 246, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.84) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-card.is-apex::after {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at left center, rgba(124, 58, 237, 0.14), transparent 42%),
        radial-gradient(ellipse at right center, rgba(67, 56, 202, 0.14), transparent 42%);
    filter: blur(18px);
    opacity: 0.54;
    transform-origin: center center;
    pointer-events: none;
    z-index: -2;
}

.quiz-card.is-legend:hover {
    transform: none;
    box-shadow:
        0 26px 44px rgba(17, 24, 39, 0.16),
        0 0 40px rgba(59, 130, 246, 0.16),
        0 0 18px rgba(124, 58, 237, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-card.is-legend::after {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at left center, rgba(96, 165, 250, 0.18), transparent 42%),
        radial-gradient(ellipse at right center, rgba(124, 58, 237, 0.18), transparent 42%);
    filter: blur(18px);
    opacity: 0.62;
    transform-origin: center center;
    animation: quizLegendSideFlare 1.45s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

.quiz-card:nth-child(1) {
    animation-delay: 0.04s;
}

.quiz-card:nth-child(2) {
    animation-delay: 0.1s;
}

.quiz-card:nth-child(3) {
    animation-delay: 0.16s;
}

.quiz-card:nth-child(4) {
    animation-delay: 0.22s;
}

.quiz-card:nth-child(5) {
    animation-delay: 0.28s;
}

.quiz-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.quiz-card h3 {
    font-size: 1.15rem;
    color: var(--lcc-blue);
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
}

.quiz-card p {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}

.quiz-card.is-pro h3 {
    color: #7a1b68;
    letter-spacing: -0.01em;
}

.quiz-card.is-pro p {
    color: #6f5370;
}

.quiz-card.is-legend h3 {
    color: #162456;
    letter-spacing: -0.015em;
    text-shadow: 0 0 12px rgba(124, 58, 237, 0.12);
}

.quiz-card.is-legend p {
    color: #475569;
}

.quiz-card.is-apex h3 {
    color: #4c1d95;
    letter-spacing: -0.018em;
    text-shadow: 0 0 12px rgba(124, 58, 237, 0.1);
}

.quiz-card.is-apex p {
    color: #625b76;
}

/* Quiz Badge */
.quiz-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--lcc-blue-pale);
    color: var(--lcc-blue-soft);
}

.quiz-badge.popular {
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #1a1a1a;
}

.quiz-badge.recommended {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
}

.quiz-badge.new {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

.quiz-card.is-challenger .quiz-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}

.quiz-card.is-skill-builder .quiz-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.quiz-card.is-advanced .quiz-badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #ffffff;
}

.quiz-card.is-mastery .quiz-badge {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    color: #ffffff;
}

.quiz-card.is-elite .quiz-badge {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #a87700, #d4a400, #efbd10);
    background-size: 200% 200%;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(184, 134, 0, 0.25);
    animation: quizEliteBadgeGlow 2.8s ease-in-out infinite, quizEliteBadgeShift 3.2s linear infinite;
}

.quiz-card.is-elite .quiz-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.58) 50%, transparent 76%);
    transform: translateX(-135%);
    animation: quizEliteBadgeSweep 2.4s ease-in-out infinite;
}

.quiz-card.is-elite .quiz-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(300deg, transparent 24%, rgba(255, 248, 200, 0.44) 50%, transparent 76%);
    transform: translateX(135%);
    animation: quizEliteBadgeSweepReverse 2.9s ease-in-out infinite;
}

.quiz-card.is-elite .difficulty {
    color: #9a6700;
    background: #fff3c4;
}

.quiz-card.is-expert .quiz-badge {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 52%, #22d3ee);
    background-size: 220% 220%;
    color: #ffffff;
    box-shadow:
        0 10px 20px rgba(37, 99, 235, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    animation:
        quizExpertBadgeShift 0.78s linear infinite,
        quizExpertBadgeGlow 0.72s ease-in-out infinite;
}

.quiz-card.is-expert .quiz-badge::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    top: -8px;
    left: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(186, 230, 253, 0.82), rgba(59, 130, 246, 0.18) 58%, transparent 72%);
    filter: blur(2px);
    opacity: 0.82;
    animation: quizExpertOrbPulse 0.55s ease-in-out infinite;
    pointer-events: none;
}

.quiz-card.is-expert .quiz-badge::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    right: -4px;
    bottom: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.7), rgba(34, 211, 238, 0.16) 60%, transparent 76%);
    filter: blur(1px);
    opacity: 0.75;
    animation: quizExpertOrbPulseAlt 0.48s ease-in-out infinite;
    pointer-events: none;
}

.quiz-card.is-expert .difficulty {
    color: #155e75;
    background: #d9f5fb;
}

.quiz-card.is-pro .quiz-badge {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #db2777 56%, #f43f5e);
    background-size: 240% 240%;
    color: #ffffff;
    box-shadow:
        0 12px 24px rgba(124, 58, 237, 0.24),
        0 0 18px rgba(244, 63, 94, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation:
        quizProBadgeShift 0.62s linear infinite,
        quizProBadgeGlow 0.72s ease-in-out infinite;
}

.quiz-card.is-pro .quiz-badge::before {
    content: "";
    position: absolute;
    inset: -14px -8px 12px -8px;
    background:
        radial-gradient(circle at 14% 28%, rgba(255, 255, 255, 0.98) 0 1.2px, transparent 2.8px),
        radial-gradient(circle at 32% 70%, rgba(255, 235, 250, 0.92) 0 1px, transparent 2.6px),
        radial-gradient(circle at 54% 22%, rgba(254, 205, 211, 0.92) 0 1.3px, transparent 3px),
        radial-gradient(circle at 72% 60%, rgba(255, 255, 255, 0.96) 0 1.1px, transparent 2.5px),
        radial-gradient(circle at 86% 26%, rgba(244, 114, 182, 0.9) 0 1px, transparent 2.7px),
        radial-gradient(circle at 90% 76%, rgba(255, 255, 255, 0.92) 0 1.2px, transparent 2.6px);
    opacity: 0.88;
    filter: blur(0.2px);
    animation: quizProParticlesFall 1.1s linear infinite;
    pointer-events: none;
}

.quiz-card.is-pro .quiz-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, 0.18) 50%, transparent 92%);
    mix-blend-mode: screen;
    animation: quizProPulseFlash 0.62s ease-in-out infinite;
    pointer-events: none;
}

.quiz-card.is-pro .difficulty {
    color: #9d174d;
    background: #ffe0ef;
}

.quiz-card.is-legend .quiz-badge {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a, #2563eb 44%, #7c3aed 74%, #e2e8f0);
    background-size: 260% 260%;
    color: #f8fafc;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.22),
        0 0 28px rgba(59, 130, 246, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    animation:
        quizLegendBadgeShift 0.95s linear infinite,
        quizLegendBadgeGlow 1.05s ease-in-out infinite;
}

.quiz-card.is-legend .quiz-badge::before {
    content: none;
}

.quiz-card.is-legend .quiz-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 58%),
        linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.2) 50%, transparent 90%);
    mix-blend-mode: screen;
    animation: quizLegendPulseFlash 0.95s ease-in-out infinite;
    pointer-events: none;
}

.quiz-card.is-legend .difficulty {
    color: #4338ca;
    background: #e6e9ff;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12) inset;
}

.quiz-card.is-apex .quiz-badge {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.28), transparent 26%),
        radial-gradient(circle at 82% 78%, rgba(255, 237, 213, 0.18), transparent 28%),
        linear-gradient(120deg, #07070a 0%, #120a1f 18%, #312e81 44%, #7c3aed 72%, #ddd6fe 100%);
    background-size: auto, auto, 220% 220%;
    color: #fff7f7;
    box-shadow:
        0 12px 22px rgba(18, 10, 14, 0.24),
        0 0 24px rgba(124, 58, 237, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    animation:
        quizApexBadgeShift 0.9s linear infinite,
        quizApexBadgeGlow 1.15s ease-in-out infinite;
}

.quiz-card.is-apex .quiz-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 14%, transparent 28%),
        radial-gradient(circle at 76% 42%, rgba(196, 181, 253, 0.22), transparent 26%);
    opacity: 0.66;
    animation: quizApexBadgeFlash 1.08s ease-in-out infinite;
    pointer-events: none;
}

.quiz-card.is-apex .quiz-badge::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.quiz-card.is-apex .difficulty {
    color: #6d28d9;
    background: #ede9fe;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14) inset;
}

@keyframes quizEliteStripeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes quizEliteBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes quizEliteBadgeGlow {
    0%, 100% { box-shadow: 0 10px 20px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 14px 26px rgba(250, 204, 21, 0.3); }
}

@keyframes quizEliteBadgeSweep {
    0%, 18% { transform: translateX(-135%); opacity: 0; }
    26% { opacity: 1; }
    58% { transform: translateX(135%); opacity: 1; }
    100% { transform: translateX(135%); opacity: 0; }
}

@keyframes quizEliteBadgeSweepReverse {
    0%, 20% { transform: translateX(135%); opacity: 0; }
    30% { opacity: 0.85; }
    62% { transform: translateX(-135%); opacity: 0.85; }
    100% { transform: translateX(-135%); opacity: 0; }
}

@keyframes quizExpertStripePulse {
    0% { background-position: 0% 50%; }
    100% { background-position: 240% 50%; }
}

@keyframes quizExpertBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@keyframes quizExpertBadgeGlow {
    0%, 100% {
        box-shadow:
            0 10px 20px rgba(37, 99, 235, 0.22),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }
    50% {
        box-shadow:
            0 14px 28px rgba(6, 182, 212, 0.28),
            0 0 20px rgba(59, 130, 246, 0.18),
            0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    }
}

@keyframes quizExpertOrbPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.55; }
    50% { transform: scale(1.18); opacity: 0.95; }
}

@keyframes quizExpertOrbPulseAlt {
    0%, 100% { transform: scale(0.88); opacity: 0.48; }
    50% { transform: scale(1.1); opacity: 0.88; }
}

@keyframes quizProStripePulse {
    0% { background-position: 0% 50%; }
    100% { background-position: 260% 50%; }
}

@keyframes quizProBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 240% 50%; }
}

@keyframes quizProBadgeGlow {
    0%, 100% {
        box-shadow:
            0 12px 24px rgba(124, 58, 237, 0.24),
            0 0 18px rgba(244, 63, 94, 0.16),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    50% {
        box-shadow:
            0 16px 30px rgba(219, 39, 119, 0.3),
            0 0 26px rgba(244, 63, 94, 0.22),
            0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    }
}

@keyframes quizProParticlesFall {
    0% {
        transform: translate3d(0, -10px, 0) scale(0.94);
        opacity: 0;
    }
    18% {
        opacity: 0.9;
    }
    55% {
        transform: translate3d(-2px, 8px, 0) scale(1);
        opacity: 0.88;
    }
    100% {
        transform: translate3d(2px, 24px, 0) scale(1.04);
        opacity: 0;
    }
}

@keyframes quizProPulseFlash {
    0%, 100% { opacity: 0.24; transform: scale(0.985); }
    50% { opacity: 0.7; transform: scale(1.035); }
}

@keyframes quizLegendStripeSurge {
    0% { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}

@keyframes quizLegendBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 260% 50%; }
}

@keyframes quizLegendBadgeGlow {
    0%, 100% {
        box-shadow:
            0 14px 28px rgba(15, 23, 42, 0.22),
            0 0 28px rgba(59, 130, 246, 0.18),
            0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    }
    50% {
        box-shadow:
            0 18px 34px rgba(15, 23, 42, 0.28),
            0 0 34px rgba(59, 130, 246, 0.22),
            0 0 20px rgba(124, 58, 237, 0.14),
            0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    }
}

@keyframes quizLegendPulseFlash {
    0%, 100% { opacity: 0.2; transform: scale(0.98); }
    50% { opacity: 0.58; transform: scale(1.025); }
}

@keyframes quizLegendCardFlare {
    0%, 100% {
        box-shadow:
            0 18px 36px rgba(17, 24, 39, 0.12),
            0 0 32px rgba(59, 130, 246, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.76) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
    50% {
        box-shadow:
            0 22px 42px rgba(17, 24, 39, 0.16),
            0 0 36px rgba(59, 130, 246, 0.16),
            0 0 18px rgba(124, 58, 237, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.8) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }
}

@keyframes quizLegendSideFlare {
    0%, 100% {
        transform: scaleX(0.96) scaleY(0.98);
        opacity: 0.42;
    }
    50% {
        transform: scaleX(1.04) scaleY(1.02);
        opacity: 0.68;
    }
}

@keyframes quizApexStripeSurge {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes quizApexCardFlare {
    0%, 100% {
        box-shadow:
            0 22px 42px rgba(24, 7, 12, 0.18),
            0 0 38px rgba(185, 28, 28, 0.16),
            0 0 14px rgba(249, 115, 22, 0.08),
            0 0 0 1px rgba(255, 255, 255, 0.78) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    40% {
        box-shadow:
            0 26px 48px rgba(24, 7, 12, 0.22),
            0 0 46px rgba(185, 28, 28, 0.2),
            0 0 20px rgba(249, 115, 22, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.84) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
    }
    62% {
        box-shadow:
            0 23px 44px rgba(24, 7, 12, 0.2),
            0 0 44px rgba(127, 29, 29, 0.22),
            0 0 10px rgba(255, 255, 255, 0.04),
            0 0 0 1px rgba(255, 255, 255, 0.82) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.97);
    }
}

@keyframes quizApexOuterFlames {
    0%, 100% {
        transform: scaleX(0.98) scaleY(0.98) translateY(0);
        opacity: 0.42;
    }
    35% {
        transform: scaleX(1.03) scaleY(1.05) translateY(-1px);
        opacity: 0.64;
    }
    68% {
        transform: scaleX(1) scaleY(1.02) translateY(1px);
        opacity: 0.5;
    }
}

@keyframes quizApexBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}

@keyframes quizApexBadgeGlow {
    0%, 100% {
        box-shadow:
            0 16px 30px rgba(18, 10, 14, 0.28),
            0 0 32px rgba(124, 58, 237, 0.22),
            0 0 10px rgba(139, 92, 246, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    }
    50% {
        box-shadow:
            0 18px 34px rgba(18, 10, 14, 0.3),
            0 0 38px rgba(124, 58, 237, 0.24),
            0 0 14px rgba(167, 139, 250, 0.12),
            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    }
}

@keyframes quizApexStripeRush {
    0% { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 220% 50%, 280% 50%; }
}

@keyframes quizApexBadgeShift {
    0% { background-position: 0% 0%, 0% 0%, 0% 50%; }
    100% { background-position: 0% 0%, 0% 0%, 220% 50%; }
}

@keyframes quizApexBadgeFlash {
    0%, 100% {
        opacity: 0.34;
        transform: scale(0.99);
    }
    45% {
        opacity: 0.74;
        transform: scale(1.02);
    }
    62% {
        opacity: 0.46;
        transform: scale(1);
    }
}

@keyframes quizApexBadgeFlame {
    0%, 100% {
        transform: scaleX(0.94) scaleY(0.98);
        opacity: 0.54;
    }
    50% {
        transform: scaleX(1.08) scaleY(1.06);
        opacity: 0.9;
    }
}

@keyframes quizApexPulseFlash {
    0%, 100% { opacity: 0.22; transform: scale(0.985); }
    50% { opacity: 0.66; transform: scale(1.03); }
}

.quiz-guest-preview-card {
    grid-column: 1 / -1;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.quiz-guest-preview-card .quiz-locked-panel {
    height: 100%;
}

.quiz-complete-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.14);
    box-shadow: 0 12px 24px rgba(22, 101, 52, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.quiz-complete-chip[hidden] {
    display: none !important;
}

.quiz-complete-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.quiz-card.is-completed {
    border-color: rgba(16, 185, 129, 0.22);
}

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.quiz-meta span {
    font-size: 0.78rem;
    color: var(--text-soft);
    padding: 4px 8px;
    background: rgba(0, 51, 102, 0.04);
    border-radius: 6px;
}

.quiz-meta .difficulty {
    font-weight: 600;
}

.quiz-meta .difficulty.easy {
    color: #059669;
    background: #d1fae5;
}

.quiz-meta .difficulty.medium {
    color: #d97706;
    background: #fef3c7;
}

.quiz-meta .difficulty.hard {
    color: #dc2626;
    background: #fee2e2;
}

.quiz-meta .difficulty.advanced {
    color: #7c3aed;
    background: #ede9fe;
}

.quiz-meta .difficulty.mastery {
    color: #1d4ed8;
    background: #dbeafe;
}

.quiz-meta .difficulty.is-elite {
    color: #9a6700;
    background: #fff3c4;
}

/* Quiz Start Button */
.quiz-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--lcc-blue), var(--lcc-blue-soft));
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
    text-decoration: none;
}

.quiz-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 51, 102, 0.25);
}

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

.quiz-start-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.quiz-card.is-locked {
    opacity: 0.9;
}

.quiz-card.is-locked .quiz-start-btn {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.quiz-card-placeholder {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border-style: dashed;
    border-color: rgba(203, 215, 230, 0.96);
}

.quiz-card-placeholder::before {
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.quiz-card-placeholder .quiz-badge {
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
}

.quiz-card-placeholder .difficulty {
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
}

.lab-shell {
    margin-top: 0;
    display: grid;
    gap: 16px;
    padding: 20px;
}

.lab-shell[hidden] {
    display: none !important;
}

.lab-shell-head {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.lab-shell-kicker {
    margin: 0 0 8px;
    color: var(--lcc-blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lab-shell-head h2,
.lab-checklist-head h4 {
    margin: 0;
    color: var(--lcc-blue-dark);
    line-height: 1.2;
}

.lab-session-progress {
    max-width: 980px;
}

.lab-shell-copy,
.lab-checklist-head p {
    margin: 8px 0 0;
    color: var(--text-soft);
    line-height: 1.58;
}

.lab-close-btn {
    flex-shrink: 0;
}

.lab-close-btn:hover {
    background: rgba(0, 51, 102, 0.08);
}

.lab-scenario-card,
.lab-decision-card {
    border: 0;
    border-radius: 20px;
    background: transparent;
}

.lab-scenario-card,
.lab-decision-card {
    display: grid;
    padding: 0;
}

.lab-login-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.lab-login-stage {
    display: grid;
    gap: 14px;
}

.lab-scenario-card {
    gap: 12px;
}

.lab-scenario-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lab-scenario-channel {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 79, 138, 0.08);
    color: var(--lcc-blue);
    font-size: 0.78rem;
    font-weight: 700;
}

.lab-scenario-title {
    color: var(--lcc-blue-dark);
    font-size: 1.08rem;
    line-height: 1.45;
}

.lab-scenario-body {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.lab-inline-url {
    display: inline-block;
    margin: 2px 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-weight: 700;
}

.lab-spot-target {
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.lab-spot-target:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.lab-spot-target.is-selected {
    border-color: rgba(29, 102, 168, 0.5);
    box-shadow: 0 12px 24px rgba(29, 102, 168, 0.08);
}

.lab-preview-card {
    padding: 16px;
    border: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 26%),
        linear-gradient(180deg, rgba(252, 253, 255, 0.998), rgba(246, 249, 255, 0.99));
}

.lab-browser-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.lab-browser-bar span {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #d3ddeb;
}

.lab-browser-bar span:nth-child(1) { background: #f87171; }
.lab-browser-bar span:nth-child(2) { background: #fbbf24; }
.lab-browser-bar span:nth-child(3) { background: #34d399; }

.lab-url-pill {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(15, 79, 138, 0.06);
    color: var(--lcc-blue-dark);
    font-size: 0.84rem;
    font-weight: 700;
    word-break: break-word;
    text-align: left;
}

.lab-fake-login {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(222, 230, 240, 0.96);
}

.lab-fake-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
}

.lab-fake-login-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
}

.lab-fake-login-brand strong {
    display: block;
    color: var(--lcc-blue-dark);
}

.lab-fake-login-brand span {
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.lab-fake-alert {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(248, 113, 113, 0.24);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.lab-input-group {
    display: grid;
    gap: 8px;
    color: var(--lcc-blue-dark);
    font-size: 0.88rem;
    font-weight: 700;
}

.lab-input-group input {
    width: 100%;
    border: 1px solid rgba(202, 214, 231, 0.98);
    border-radius: 14px;
    padding: 12px 14px;
    background: #f8fbff;
    color: #475569;
}

.lab-submit-demo-btn {
    width: 100%;
    border-radius: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #ffffff;
    font-weight: 700;
}

.lab-page-note {
    text-align: left;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    background: rgba(248, 250, 252, 0.92);
    border-radius: 14px;
    padding: 11px 13px;
}

.lab-email-preview {
    display: grid;
    gap: 14px;
}

.lab-email-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(233, 242, 255, 0.94));
    border: 1px solid rgba(196, 214, 239, 0.92);
    color: var(--lcc-blue-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.lab-email-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 249, 255, 0.985));
    border: 1px solid rgba(196, 214, 239, 0.92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.lab-email-header-line,
.lab-email-banner,
.lab-email-cta,
.lab-email-footer {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.lab-email-header-line {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(242, 247, 255, 0.95);
    border: 1px solid rgba(204, 217, 236, 0.9);
    color: var(--lcc-blue-dark);
    font-size: 0.92rem;
}

.lab-email-banner {
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 239, 239, 0.96), rgba(255, 247, 247, 0.98));
    border: 1px solid rgba(245, 170, 170, 0.85);
    color: #a52828;
    font-size: 0.9rem;
    font-weight: 700;
}

.lab-email-body {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(218, 228, 242, 0.94);
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 0.94rem;
}

.lab-email-body p {
    margin: 0;
}

.lab-email-body p + p {
    margin-top: 10px;
}

.lab-email-cta {
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0f4f8a, #2b84d1);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 12px 24px rgba(15, 79, 138, 0.2);
}

.lab-email-footer {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(247, 250, 255, 0.96);
    border: 1px dashed rgba(196, 214, 239, 0.95);
    color: var(--text-soft);
    font-size: 0.86rem;
}

.lab-poster-preview {
    display: grid;
}

.lab-poster-board {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255, 252, 240, 0.995), rgba(255, 248, 226, 0.985));
    border: 1px solid rgba(232, 213, 159, 0.95);
    box-shadow:
        0 14px 24px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.lab-poster-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #8a5b12;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lab-poster-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 243, 196, 0.9);
}

.lab-poster-title,
.lab-poster-url,
.lab-poster-support {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.lab-poster-title {
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 238, 238, 0.98), rgba(255, 248, 239, 0.98));
    border: 1px solid rgba(241, 173, 173, 0.88);
    color: #a52828;
    font-size: 1.02rem;
    font-weight: 800;
}

.lab-poster-body {
    color: #6b7280;
    font-size: 0.94rem;
    line-height: 1.6;
}

.lab-poster-body p {
    margin: 0;
}

.lab-poster-qr-wrap {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.lab-poster-qr {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 10%, transparent 10%, transparent 20%, rgba(15, 23, 42, 0.92) 20%, rgba(15, 23, 42, 0.92) 30%, transparent 30%, transparent 40%, rgba(15, 23, 42, 0.92) 40%, rgba(15, 23, 42, 0.92) 50%, transparent 50%, transparent 60%, rgba(15, 23, 42, 0.92) 60%, rgba(15, 23, 42, 0.92) 70%, transparent 70%, transparent 80%, rgba(15, 23, 42, 0.92) 80%),
        linear-gradient(rgba(15, 23, 42, 0.92) 10%, transparent 10%, transparent 20%, rgba(15, 23, 42, 0.92) 20%, rgba(15, 23, 42, 0.92) 30%, transparent 30%, transparent 40%, rgba(15, 23, 42, 0.92) 40%, rgba(15, 23, 42, 0.92) 50%, transparent 50%, transparent 60%, rgba(15, 23, 42, 0.92) 60%, rgba(15, 23, 42, 0.92) 70%, transparent 70%, transparent 80%, rgba(15, 23, 42, 0.92) 80%),
        #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.95);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
}

.lab-poster-qr-copy {
    display: grid;
    gap: 6px;
}

.lab-poster-qr-copy strong {
    color: var(--lcc-blue-dark);
    font-size: 1rem;
}

.lab-poster-qr-copy p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
    font-size: 0.9rem;
}

.lab-poster-url,
.lab-poster-support {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(222, 212, 184, 0.96);
    color: var(--lcc-blue-dark);
    font-size: 0.9rem;
}

.lab-browser-bar[hidden],
.lab-url-pill[hidden],
.lab-fake-login[hidden],
.lab-email-preview[hidden],
.lab-poster-preview[hidden] {
    display: none !important;
}

.lab-brief-label {
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lab-decision-card {
    display: grid;
    gap: 16px;
}

.lab-checklist-head {
    display: grid;
    gap: 4px;
}

.lab-progress-note {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(15, 79, 138, 0.06);
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.lab-progress-note strong {
    color: var(--lcc-blue);
    font-size: 1rem;
}

.lab-checklist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lab-checklist-actions .quiz-exit-btn {
    width: auto;
    height: auto;
    min-width: 150px;
    padding: 12px 20px;
    border-radius: 12px;
}

.lab-checklist-actions .quiz-exit-btn svg {
    display: none;
}

.lab-feedback-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(206, 220, 236, 0.98);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.lab-feedback-card.is-success {
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.lab-feedback-card.is-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.98));
}

.lab-feedback-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--lcc-blue-dark);
    font-size: 1rem;
}

.lab-feedback-card p,
.lab-feedback-card ul {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.58;
}

.lab-feedback-card ul {
    padding-left: 18px;
    margin-top: 10px;
}

.lab-feedback-card li + li {
    margin-top: 6px;
}

.quiz-unlock-note {
    margin: -2px 0 0;
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.quiz-session-panel {
    display: grid;
    gap: 18px;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 24%),
        linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(245, 249, 253, 0.985));
    border: 1px solid rgba(216, 224, 235, 0.92);
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.quiz-session-panel[hidden],
.quiz-question-card[hidden],
.quiz-result-card[hidden],
.quiz-feedback[hidden],
.quiz-result-prompt[hidden],
.guest-prompt[hidden] {
    display: none !important;
}

.quiz-session-panel::before {
    display: none;
}

.quiz-session-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(204, 217, 234, 0.88);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.quiz-session-kicker,
.quiz-result-kicker,
.quiz-result-prompt-kicker,
.quiz-question-kicker {
    margin: 0 0 8px;
    color: var(--lcc-blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-session-head h2 {
    margin: 0 0 8px;
    color: var(--lcc-blue-dark);
    font-size: clamp(1.6rem, 2.35vw, 2.08rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.quiz-session-desc {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.58;
    max-width: 58ch;
}

.quiz-exit-btn,
.quiz-secondary-btn,
.quiz-next-btn {
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.quiz-exit-btn,
.quiz-secondary-btn {
    background: rgba(0, 51, 102, 0.06);
    color: var(--lcc-blue-dark);
    border: 1px solid rgba(196, 210, 226, 0.9);
}

.quiz-exit-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.quiz-exit-btn svg {
    width: 20px;
    height: 20px;
}

.quiz-next-btn {
    background: var(--lcc-blue);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 51, 102, 0.14);
}

.quiz-next-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.quiz-exit-btn:hover,
.quiz-secondary-btn:hover,
.quiz-next-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.quiz-session-progress {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.95));
    border: 1px solid rgba(201, 216, 236, 0.94);
    box-shadow:
        0 12px 22px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.quiz-session-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 600;
}

.quiz-session-progress-bar {
    height: 13px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 79, 138, 0.08);
}

.quiz-session-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f4f8a, #2b84d1);
    transition: width 0.22s ease;
}

.quiz-question-card,
.quiz-result-card {
    padding: 26px 26px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(247, 251, 255, 0.988));
    border: 1px solid rgba(206, 219, 236, 0.96);
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.06),
        0 6px 14px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.quiz-question-card h3 {
    margin: 0 0 18px;
    color: var(--lcc-blue-dark);
    font-size: clamp(1.18rem, 2vw, 1.5rem);
    line-height: 1.45;
    letter-spacing: -0.02em;
}

.quiz-options {
    display: grid;
    gap: 14px;
}

.quiz-option {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    text-align: left;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(209, 219, 233, 0.96);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.97));
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.55;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.quiz-option:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 189, 214, 0.96);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
}

.quiz-option-key {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 79, 138, 0.08);
    color: var(--lcc-blue-dark);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.quiz-option-text {
    display: block;
    padding-top: 3px;
}

.quiz-option.is-selected {
    border-color: rgba(15, 79, 138, 0.34);
    background: linear-gradient(145deg, rgba(234, 244, 255, 0.98), rgba(245, 249, 255, 0.96));
    box-shadow: 0 12px 22px rgba(15, 79, 138, 0.08);
}

.quiz-option.is-selected .quiz-option-key {
    background: rgba(15, 79, 138, 0.16);
}

.quiz-option.is-correct {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(145deg, rgba(236, 253, 245, 0.98), rgba(244, 255, 250, 0.96));
}

.quiz-option.is-correct .quiz-option-key {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.quiz-option.is-incorrect {
    border-color: rgba(244, 63, 94, 0.36);
    background: linear-gradient(145deg, rgba(255, 241, 244, 0.98), rgba(255, 247, 249, 0.96));
}

.quiz-option.is-incorrect .quiz-option-key {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.quiz-question-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.quiz-feedback {
    margin-top: 16px;
    padding: 15px 16px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(240, 246, 255, 0.95), rgba(247, 250, 255, 0.97));
    color: var(--text-soft);
    line-height: 1.58;
    border: 1px solid rgba(209, 219, 233, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.quiz-feedback strong {
    color: var(--lcc-blue-dark);
}

.quiz-result-card {
    --quiz-result-accent: rgba(16, 185, 129, 0.18);
    --quiz-result-border: rgba(194, 227, 212, 0.96);
    --quiz-result-score-start: rgba(15, 79, 138, 0.98);
    --quiz-result-score-end: rgba(43, 132, 209, 0.92);
    display: grid;
    gap: 16px;
    background:
        radial-gradient(circle at top right, var(--quiz-result-accent), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 251, 247, 0.97));
    border-color: var(--quiz-result-border);
    padding: 22px 22px 20px;
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.09),
        0 8px 16px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    overflow: hidden;
}

.quiz-result-top {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 0 0 2px;
}

.quiz-result-score-block {
    display: block;
}

.quiz-result-score {
    min-width: 0;
    min-height: 108px;
    padding: 18px 14px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--quiz-result-score-start), var(--quiz-result-score-end));
    color: #ffffff;
    font-size: clamp(2rem, 3.6vw, 2.45rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    box-shadow: 0 14px 24px rgba(15, 79, 138, 0.16);
}

.quiz-result-main {
    display: grid;
    gap: 8px;
    align-content: center;
}

.quiz-result-top h3 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: clamp(1.24rem, 2.2vw, 1.5rem);
    line-height: 1.2;
}

.quiz-result-summary {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.58;
    max-width: 56ch;
    font-size: 0.94rem;
}

.quiz-result-body {
    padding-top: 2px;
}

.quiz-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quiz-result-meta-item {
    position: relative;
    overflow: hidden;
    padding: 14px 15px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
    border: 1px solid rgba(214, 222, 235, 0.96);
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-result-meta-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--quiz-result-score-start), var(--quiz-result-score-end));
    opacity: 0.82;
}

.quiz-result-meta-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quiz-result-meta-item strong {
    color: var(--lcc-blue-dark);
    font-size: 1rem;
    line-height: 1.35;
}

.quiz-result-prompt {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(214, 222, 235, 0.96);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
    display: grid;
    gap: 12px;
    align-items: center;
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.quiz-result-prompt::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, rgba(15, 79, 138, 0.88), rgba(43, 132, 209, 0.36));
}

.quiz-result-prompt::after {
    content: "";
    position: absolute;
    top: -34px;
    right: -24px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 72%);
    pointer-events: none;
}

.guest-prompt {
    grid-template-columns: minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 249, 255, 0.97));
    align-items: center;
}

.guest-prompt::before {
    background: linear-gradient(180deg, rgba(15, 79, 138, 0.88), rgba(43, 132, 209, 0.36));
}

.quiz-result-prompt-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.quiz-result-prompt-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(215, 223, 236, 0.9);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.quiz-result-prompt h4 {
    margin: 0;
    color: var(--lcc-blue-dark);
    font-size: 1.02rem;
    line-height: 1.35;
    max-width: 28ch;
}

.quiz-result-prompt-text {
    margin: 8px 0 0;
    color: var(--text-soft);
    line-height: 1.55;
    max-width: 52ch;
    font-size: 0.9rem;
}

.quiz-result-footer {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(214, 224, 236, 0.78);
}

.quiz-result-prompt-actions,
.quiz-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.quiz-result-prompt-actions {
    justify-content: flex-end;
    align-items: center;
}

.quiz-result-prompt-actions .quiz-sidebar-auth-btn {
    min-width: 148px;
    flex: 1 1 160px;
}

.quiz-result-card.grade-a-plus,
.quiz-result-card.grade-a {
    --quiz-result-accent: rgba(16, 185, 129, 0.16);
    --quiz-result-border: rgba(185, 225, 205, 0.98);
    --quiz-result-score-start: #0c8f64;
    --quiz-result-score-end: #1fb981;
}

.quiz-result-card.grade-b-plus,
.quiz-result-card.grade-b {
    --quiz-result-accent: rgba(59, 130, 246, 0.14);
    --quiz-result-border: rgba(192, 214, 241, 0.98);
    --quiz-result-score-start: #1f63c2;
    --quiz-result-score-end: #3d8ff0;
}

.quiz-result-card.grade-c-plus,
.quiz-result-card.grade-c {
    --quiz-result-accent: rgba(245, 158, 11, 0.16);
    --quiz-result-border: rgba(241, 219, 183, 0.98);
    --quiz-result-score-start: #d48806;
    --quiz-result-score-end: #f1a728;
}

.quiz-result-card.grade-d {
    --quiz-result-accent: rgba(249, 115, 22, 0.16);
    --quiz-result-border: rgba(244, 209, 185, 0.98);
    --quiz-result-score-start: #dc6b11;
    --quiz-result-score-end: #f48a38;
}

.quiz-result-card.grade-f {
    --quiz-result-accent: rgba(239, 68, 68, 0.16);
    --quiz-result-border: rgba(240, 199, 199, 0.98);
    --quiz-result-score-start: #cc3434;
    --quiz-result-score-end: #ef5f5f;
}

.quiz-result-actions {
    justify-content: flex-end;
}

.quiz-achievement-stack {
    position: fixed;
    top: calc(var(--nav-height) + 18px);
    right: 18px;
    z-index: 2600;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    width: min(360px, calc(100vw - 28px));
}

.quiz-achievement-toast {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 15px 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, #0f3f88, #1d4ed8);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 18px 36px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

.quiz-achievement-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.quiz-achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fef3c7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.quiz-achievement-icon svg {
    width: 24px;
    height: 24px;
}

.quiz-achievement-copy {
    min-width: 0;
}

.quiz-achievement-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.quiz-achievement-copy strong {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
    color: #ffffff;
}

.quiz-achievement-copy p {
    margin: 4px 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

@keyframes quizCardReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-hook-panel {
    background:
        radial-gradient(circle at top right, rgba(0, 102, 204, 0.07), transparent 28%),
        radial-gradient(circle at bottom left, rgba(255, 215, 0, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.97));
    border: 1px solid rgba(187, 208, 228, 0.94);
}

.quiz-hook-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.quiz-hook-card {
    padding: 22px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 244, 251, 0.94));
    border: 1px solid rgba(194, 214, 232, 0.92);
    box-shadow:
        0 12px 28px rgba(0, 51, 102, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    position: relative;
    overflow: hidden;
}

.quiz-hook-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.quiz-hook-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--lcc-blue), #1d66a8);
}

.quiz-hook-card:nth-child(1) {
    background:
        radial-gradient(circle at top right, rgba(255, 215, 0, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 232, 0.95));
}

.quiz-hook-card:nth-child(1)::before {
    background: linear-gradient(180deg, #d4a400, #ffcf33);
}

.quiz-hook-card:nth-child(1) .quiz-hook-icon {
    background: rgba(255, 215, 0, 0.16);
    color: #a66b00;
}

.quiz-hook-card:nth-child(1) .quiz-hook-lock {
    background: rgba(255, 215, 0, 0.14);
    color: #8a6100;
}

.quiz-hook-card:nth-child(2) {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 251, 245, 0.95));
}

.quiz-hook-card:nth-child(2)::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.quiz-hook-card:nth-child(2) .quiz-hook-icon {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.quiz-hook-card:nth-child(2) .quiz-hook-lock {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.quiz-hook-card:nth-child(3) {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.95));
}

.quiz-hook-card:nth-child(3)::before {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.quiz-hook-card:nth-child(3) .quiz-hook-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}

.quiz-hook-card:nth-child(3) .quiz-hook-lock {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.quiz-hook-card:nth-child(4) {
    background:
        radial-gradient(circle at top right, rgba(244, 63, 94, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 241, 244, 0.95));
}

.quiz-hook-card:nth-child(4)::before {
    background: linear-gradient(180deg, #f43f5e, #e11d48);
}

.quiz-hook-card:nth-child(4) .quiz-hook-icon {
    background: rgba(244, 63, 94, 0.14);
    color: #be123c;
}

.quiz-hook-card:nth-child(4) .quiz-hook-lock {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.quiz-hook-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quiz-hook-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--lcc-blue);
    flex-shrink: 0;
}

.quiz-hook-icon svg {
    width: 18px;
    height: 18px;
}

.quiz-hook-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--lcc-blue);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.quiz-hook-card h3 {
    margin: 0 0 8px;
    color: var(--lcc-blue);
    font-size: 1.1rem;
    line-height: 1.35;
}

.quiz-hook-card p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.leaderboard-preview,
.progress-preview,
.history-preview,
.locked-set-list {
    margin-top: 18px;
}

.leaderboard-preview {
    display: grid;
    gap: 10px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(192, 209, 226, 0.66);
}

.leaderboard-rank {
    font-weight: 800;
    color: var(--lcc-blue);
}

.leaderboard-name {
    color: var(--text-main);
    font-weight: 700;
}

.leaderboard-score {
    color: var(--text-soft);
    font-weight: 700;
}

.progress-preview {
    display: grid;
    gap: 12px;
}

.progress-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-soft);
}

.progress-preview-row strong {
    color: var(--lcc-blue);
}

.progress-bar {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(16, 185, 129, 0.1);
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #059669);
}

.history-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.history-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    font-size: 0.86rem;
    font-weight: 700;
}

.locked-set-list {
    display: grid;
    gap: 10px;
}

.locked-set-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.08);
}

.locked-set-item strong {
    color: var(--text-main);
    font-size: 0.94rem;
}

.locked-set-item span {
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.quiz-cta-strip {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(255, 215, 0, 0.2), transparent 24%),
        linear-gradient(135deg, rgba(0, 51, 102, 0.97), rgba(20, 92, 160, 0.94));
    color: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.quiz-cta-kicker {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-cta-strip h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.18rem;
    line-height: 1.45;
}

.quiz-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Responsive */
@media (min-width: 1180px) {
    .quiz-public-profile-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    html.quiz-sidebar-open,
    html.quiz-sidebar-open body,
    html.quiz-sidebar-open body .page-shell,
    html.quiz-sidebar-open body .main-content {
        overflow: hidden;
        overscroll-behavior: none;
        height: 100dvh;
    }

    body.quiz-signed-in.quiz-sidebar-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.quiz-signed-in .main-content {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 100vh;
    }

    body.quiz-signed-in.quiz-sidebar-open .page-shell {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    body.quiz-signed-in.quiz-sidebar-open .main-content {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
    }

    body.quiz-signed-in .quiz-mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        padding: 12px 18px;
        z-index: 44;
    }

    body.quiz-signed-in.quiz-sidebar-open .quiz-mobile-topbar {
        opacity: 0;
        pointer-events: none;
    }

    body.quiz-signed-in .quiz-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 38;
        background: rgba(2, 16, 32, 0.42);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.quiz-signed-in.quiz-sidebar-open .quiz-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
        touch-action: none;
    }

    body.quiz-signed-in .quiz-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 42;
        display: flex;
        flex-direction: column;
        width: min(320px, calc(100vw - 28px));
        height: 100dvh;
        min-height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 22px 0 48px rgba(15, 23, 42, 0.18);
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    body.quiz-signed-in.quiz-sidebar-open .quiz-sidebar {
        transform: translateX(0);
    }

    body.quiz-signed-in.quiz-sidebar-open .quiz-app-content {
        pointer-events: none;
    }

    body.quiz-signed-in.quiz-sidebar-open .quiz-sidebar,
    body.quiz-signed-in.quiz-sidebar-open .quiz-sidebar-overlay {
        pointer-events: auto;
    }

    body.quiz-signed-in .quiz-app-content {
        gap: 18px;
        padding-top: 86px;
        padding-left: 0;
    }

    body.quiz-signed-in #quizHistoryPanel {
        min-height: auto;
    }

    .quiz-dashboard-panel,
    .quiz-history-panel,
    .quiz-leaderboard-panel {
        gap: 16px;
    }

    .quiz-overview-feature {
        grid-template-columns: 1fr auto;
        padding: 20px 22px;
        border-radius: 20px;
    }

    .quiz-profile-panel {
        padding: 20px;
        gap: 18px;
    }

    .quiz-badges-panel {
        padding: 20px;
        gap: 18px;
    }

    .quiz-badges-head {
        flex-wrap: wrap;
    }

    .quiz-badges-head-chip {
        width: 100%;
        justify-content: center;
    }

    .quiz-badges-summary {
        grid-template-columns: 1fr;
    }

    .quiz-badges-summary-card {
        grid-template-columns: none;
        justify-items: center;
        text-align: center;
        align-content: center;
        gap: 6px;
    }

    .quiz-library-toolbar {
        gap: 10px;
        margin-top: 16px;
    }

    .quiz-profile-modal {
        width: min(720px, calc(100vw - 28px));
        max-height: min(88vh, 920px);
    }

    .quiz-profile-modal-head,
    .quiz-profile-modal-body {
        padding: 20px;
    }

    .quiz-public-profile-summary {
        grid-template-columns: 1fr;
    }

    .quiz-profile-card {
        padding: 18px;
        gap: 16px;
        border-radius: 18px;
    }

    .quiz-profile-badge-list,
    .quiz-badges-list {
        grid-template-columns: 1fr 1fr;
    }

    .quiz-profile-badge,
    .quiz-badges-list .quiz-profile-badge {
        padding: 15px 14px 13px;
    }

    .quiz-profile-history-list {
        max-height: none;
        padding-right: 0;
    }

    .quiz-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quiz-dashboard-card {
        padding: 18px;
        border-radius: 18px;
    }

    .quiz-history-panel,
    .quiz-leaderboard-panel {
        padding: 18px;
        border-radius: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .quiz-hero-panel {
        padding: 34px 28px 28px;
        min-height: 0;
    }

    .quiz-hero-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
        gap: 28px 24px;
        align-items: center;
    }

    .quiz-hero-text h1 {
        font-size: clamp(2.2rem, 4vw, 2.75rem);
        margin-bottom: 12px;
    }

    .quiz-hero-text p {
        font-size: 1rem;
        line-height: 1.62;
        margin-bottom: 22px;
    }

    .quiz-hero-actions {
        gap: 12px;
    }

    .quiz-hero-actions .hero-button {
        min-width: 170px;
        padding: 14px 22px;
    }

    .quiz-hero-visual {
        gap: 18px;
        width: 100%;
    }

    .quiz-hero-logo {
        width: 170px;
        height: 170px;
    }

    .quiz-hero-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    .quiz-stat {
        min-width: 0;
        padding: 14px 12px;
    }

    .quiz-stat-value {
        font-size: 1.35rem;
    }

    .quiz-stat-label {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .quiz-result-meta {
        grid-template-columns: 1fr 1fr;
    }

    .quiz-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quiz-history-item {
        align-items: flex-start;
    }

    .quiz-leaderboard-item {
        align-items: flex-start;
    }

    .guest-prompt {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .quiz-result-prompt-actions {
        justify-content: flex-start;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .quiz-hero-panel {
        padding: 44px 38px 34px;
        min-height: clamp(340px, 34vw, 420px);
    }

    .quiz-hero-content {
        gap: 46px;
        width: min(1180px, 100%);
    }

    .quiz-hero-text h1 {
        font-size: clamp(3.22rem, 4.2vw, 3.78rem);
    }

    .quiz-hero-text p {
        font-size: 1.2rem;
        line-height: 1.74;
        max-width: 40ch;
    }

    .quiz-hero-actions .hero-button {
        padding: 17px 30px;
        font-size: 1.02rem;
    }

    .quiz-hero-logo {
        width: 224px;
        height: 224px;
    }

    .quiz-stat {
        min-width: 142px;
        padding: 18px 18px;
    }

    .quiz-stat-value {
        font-size: 1.78rem;
    }

    .quiz-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.quiz-signed-in .main-content {
        margin-top: 0;
        grid-template-columns: 1fr;
    }

    .quiz-hero-panel {
        padding: 30px 22px 24px;
        min-height: 0;
    }

    .quiz-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
        width: min(100%, 680px);
    }

    .quiz-hero-visual {
        order: -1;
        justify-self: center;
        width: 100%;
        gap: 20px;
    }

    .quiz-hero-actions {
        justify-content: center;
        width: 100%;
    }

    .quiz-hero-stats {
        justify-content: center;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .quiz-badges-summary {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .quiz-badges-summary-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    body.quiz-signed-in .main-content {
        margin-top: 0;
    }

    body.quiz-signed-in #quizzes {
        border-top: none;
    }

    body.quiz-signed-in #quizLeaderboardPanel {
        border-top: none;
    }

    body.quiz-signed-in #quizDashboardPanel {
        border-top: none;
    }

    body.quiz-signed-in #quizProfilePanel {
        border-top: none;
    }

    body.quiz-signed-in #quizWorkspace {
        border-top: none;
    }

    body.quiz-signed-in .quiz-sidebar {
        width: min(320px, calc(100vw - 36px));
        max-width: calc(100vw - 36px);
    }

    .quiz-sidebar-user,
    .quiz-sidebar-link {
        border-radius: 18px;
    }

    .quiz-hero-panel {
        min-height: 0;
        padding: 24px 18px 20px;
        margin-top: 68px;
    }

    .quiz-dashboard-panel {
        padding: 18px 16px;
    }

    .quiz-profile-panel {
        padding: 18px 16px;
    }

    .quiz-badges-panel {
        padding: 18px 16px;
    }

    .quiz-badges-head {
        gap: 14px;
        padding: 16px 14px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .quiz-badges-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .quiz-badges-icon svg {
        width: 24px;
        height: 24px;
    }

    .quiz-badges-copy h3 {
        font-size: 1.24rem;
    }

    .quiz-badges-copy p {
        font-size: 0.9rem;
    }

    .quiz-badges-head-chip {
        width: 100%;
        justify-content: center;
    }

    .quiz-badges-summary {
        grid-template-columns: 1fr;
    }

    .quiz-badges-list {
        grid-template-columns: 1fr;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .quiz-badges-list .quiz-profile-badge {
        gap: 9px;
    }

    .quiz-badges-list .quiz-profile-badge-top {
        gap: 10px;
    }

    .quiz-page-tabs {
        gap: 8px;
        justify-content: center;
    }

    .quiz-page-tab {
        min-width: 40px;
        height: 40px;
        border-radius: 10px;
        padding: 0 12px;
    }

    .quiz-profile-modal {
        width: min(100vw - 20px, 100%);
        border-radius: 20px;
    }

    .quiz-profile-modal-head {
        padding: 18px 18px 14px;
    }

    .quiz-profile-modal-body {
        padding: 18px;
    }

    .quiz-attempt-review-summary {
        grid-template-columns: 1fr;
    }

    .quiz-attempt-review-score {
        min-height: 82px;
        border-radius: 18px;
    }

    .quiz-attempt-review-score strong {
        font-size: 1.7rem;
    }

    .quiz-attempt-review-head {
        flex-direction: column;
    }

    .quiz-attempt-review-answer-grid {
        grid-template-columns: 1fr;
    }

    .quiz-public-profile-hero,
    .quiz-public-profile-card {
        padding: 18px;
        border-radius: 18px;
    }

    .quiz-public-profile-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quiz-public-profile-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-public-profile-stat {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        justify-items: center;
        text-align: center;
    }

    .quiz-public-profile-stat span,
    .quiz-public-profile-stat strong {
        text-align: center;
    }

    .quiz-profile-head {
        align-items: center;
    }

    .quiz-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-profile-identity-grid {
        grid-template-columns: 1fr;
    }

    .quiz-profile-stat {
        padding: 13px 14px;
    }

    .quiz-profile-badge-list,
    .quiz-badges-list {
        grid-template-columns: 1fr;
    }

    .quiz-history-heading {
        grid-template-columns: 1fr;
        display: grid;
        gap: 10px;
    }

    .quiz-history-badge {
        justify-self: flex-start;
    }

    .quiz-history-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
        padding: 14px 16px;
    }

    .quiz-history-side {
        justify-items: end;
        text-align: right;
        min-width: 112px;
        gap: 6px;
    }

    .quiz-leaderboard-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        padding: 14px 16px;
    }

    .quiz-leaderboard-score-wrap {
        grid-column: 3;
        justify-self: end;
        align-self: start;
    }

    .quiz-hero-content {
        gap: 20px;
        width: 100%;
    }

    .quiz-hero-text h1 {
        font-size: clamp(1.85rem, 7vw, 2.2rem);
        margin-bottom: 10px;
    }

    .quiz-hero-text p {
        font-size: 0.98rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .quiz-session-head,
    .quiz-result-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quiz-session-head {
        position: relative;
        padding-right: 56px;
    }

    .quiz-session-head .quiz-exit-btn {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .quiz-session-progress-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .quiz-question-card,
    .quiz-result-card {
        padding: 18px 16px 16px;
        border-radius: 18px;
    }

    .quiz-session-progress {
        padding: 15px 15px;
        border-radius: 18px;
    }

    .quiz-session-side-card {
        padding: 16px;
        border-radius: 18px;
    }

    .quiz-result-meta {
        grid-template-columns: 1fr;
    }

    .quiz-result-actions,
    .quiz-result-prompt-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quiz-result-score {
        min-height: 92px;
        padding: 12px;
        border-radius: 18px;
    }

    .quiz-result-main {
        gap: 7px;
    }

    .quiz-result-summary {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .quiz-result-footer {
        padding-top: 12px;
    }

    .guest-prompt {
        grid-template-columns: 1fr;
    }

    .quiz-result-actions button,
    .quiz-result-prompt-actions a,
    .quiz-next-btn,
    .quiz-secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .quiz-result-prompt-actions .quiz-sidebar-auth-btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 0.86rem;
        gap: 8px;
        flex: 1 1 auto;
    }

    .quiz-result-prompt-actions .quiz-sidebar-auth-btn svg {
        width: 16px;
        height: 16px;
    }

    .quiz-exit-btn {
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0;
        border-radius: 10px;
    }

    .quiz-exit-btn svg {
        width: 16px;
        height: 16px;
    }

    .quiz-option {
        padding: 14px 15px;
        border-radius: 16px;
        font-size: 0.94rem;
        gap: 12px;
    }

    .quiz-option-key {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    .quiz-result-prompt {
        padding: 16px;
        border-radius: 18px;
    }

    .quiz-result-prompt h4 {
        max-width: none;
        font-size: 0.98rem;
    }

    .quiz-hero-icon {
        width: 100px;
        height: 100px;
    }

    .quiz-hero-icon svg {
        width: 50px;
        height: 50px;
    }

    .quiz-hero-stats {
        gap: 10px;
        justify-content: center;
    }

    .quiz-stat {
        min-width: 116px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .quiz-stat-value {
        font-size: 1.35rem;
    }

    .quiz-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .quiz-card {
        padding: 20px;
    }

    .quiz-hook-grid {
        grid-template-columns: 1fr;
    }

    .quiz-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quiz-profile-grid {
        grid-template-columns: 1fr;
    }

    .quiz-cta-strip {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .quiz-cta-actions {
        justify-content: center;
    }

    .quiz-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .quiz-hero-actions .hero-button {
        width: 100%;
        max-width: 100%;
    }

    .quiz-profile-head {
        align-items: flex-start;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .quiz-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .quiz-hero-content {
        width: min(100%, 680px);
    }

    .quiz-hero-actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: min(100%, 460px);
        margin: 0 auto;
    }

      .quiz-hero-actions .hero-button {
          width: auto;
          min-width: 190px;
          max-width: none;
      }

      .quiz-history-head {
          grid-template-columns: auto minmax(0, 1fr);
      }

      .quiz-history-head-chip {
          grid-column: 1 / -1;
          justify-self: start;
      }

      .quiz-history-overview {
          grid-template-columns: 1fr;
      }

      .quiz-history-mini-stats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
  }

@media (max-width: 520px) {
    .quiz-dashboard-card::before,
    .quiz-session-panel::before,
    .quiz-result-prompt::before,
    .guest-prompt::before,
    .quiz-hook-card::before {
        display: none;
    }

    .quiz-mobile-topbar {
        padding: 10px 12px;
        border-radius: 0;
    }

    .quiz-dashboard-panel {
        padding: 16px 12px;
        gap: 14px;
    }

    .quiz-profile-panel {
        padding: 16px 12px;
        gap: 14px;
    }

    .quiz-badges-panel {
        padding: 14px 12px;
        gap: 12px;
    }

    .quiz-badges-head {
        gap: 10px;
        padding: 12px 12px 10px;
        border-radius: 16px;
        flex-wrap: wrap;
    }

    .quiz-badges-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .quiz-badges-icon svg {
        width: 22px;
        height: 22px;
    }

    .quiz-badges-copy h3 {
        font-size: 1.02rem;
        line-height: 1.18;
    }

    .quiz-badges-head-chip {
        width: 100%;
        justify-content: center;
        min-height: 30px;
        padding: 0 10px;
        font-size: 0.72rem;
    }

    .quiz-badges-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .quiz-badges-summary-card {
        padding: 12px 10px;
        border-radius: 14px;
        justify-items: center;
        text-align: center;
        align-content: center;
        min-height: 82px;
    }

    .quiz-badges-summary-kicker {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .quiz-badges-summary-card strong {
        font-size: 1.18rem;
    }

    .quiz-badges-copy p {
        font-size: 0.8rem;
        line-height: 1.46;
        margin-top: 2px;
    }

    .quiz-badges-list .quiz-profile-badge {
        padding: 13px 12px;
        border-radius: 14px;
    }

    .quiz-badges-list .quiz-profile-badge-top {
        gap: 9px;
    }

    .quiz-badges-list .quiz-profile-badge-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .quiz-badges-list .quiz-profile-badge-icon svg {
        width: 20px;
        height: 20px;
    }

    .quiz-badges-list .quiz-profile-badge-main strong {
        font-size: 0.9rem;
    }

    .quiz-badges-list .quiz-profile-badge-main span,
    .quiz-badges-list .quiz-profile-badge-note {
        font-size: 0.8rem;
    }

    .quiz-library-toolbar {
        margin-top: 14px;
        width: 100%;
    }

    .quiz-page-tabs {
        width: 100%;
        gap: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .quiz-page-tabs::-webkit-scrollbar {
        display: none;
    }

    .quiz-page-tab {
        flex: 0 0 auto;
        min-width: 38px;
        height: 36px;
        padding: 0 12px;
        border-radius: 9px;
        font-size: 0.88rem;
    }

    .quiz-profile-modal-overlay {
        padding: 20px 14px;
    }

    .quiz-profile-modal {
        width: min(100%, calc(100vw - 28px));
        max-height: min(calc(100svh - 40px), 720px);
        border-radius: 20px;
    }

    .quiz-profile-modal-head {
        padding: 15px 14px 12px;
        gap: 12px;
    }

    .quiz-profile-modal-head h3 {
        font-size: 1.12rem;
    }

    .quiz-profile-modal-close {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .quiz-profile-modal-close svg {
        width: 20px;
        height: 20px;
    }

    .quiz-profile-modal-body {
        padding: 14px;
    }

    .quiz-public-profile-hero,
    .quiz-public-profile-card {
        padding: 14px;
        border-radius: 14px;
    }

    .quiz-public-profile-head {
        align-items: flex-start;
        gap: 12px;
    }

    .quiz-public-profile-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .quiz-public-profile-rank-chip {
        justify-self: start;
    }

    .quiz-public-profile-avatar {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .quiz-public-profile-avatar svg {
        width: 26px;
        height: 26px;
    }

    .quiz-public-profile-head h4 {
        font-size: 1.08rem;
    }

    .quiz-public-profile-subtext {
        font-size: 0.84rem;
    }

    .quiz-public-profile-rank-copy,
    .quiz-public-profile-note p {
        font-size: 0.84rem;
    }

    .quiz-public-profile-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-public-profile-stat {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        justify-items: center;
        text-align: center;
    }

    .quiz-public-profile-stat span,
    .quiz-public-profile-stat strong {
        text-align: center;
    }

    .quiz-public-profile-badges {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 10px;
    }

    .quiz-public-profile-badges.is-collapsed {
        max-height: 214px;
    }

    .quiz-public-profile-progress {
        margin-top: 10px;
    }

    .quiz-public-profile-stat,
    .quiz-public-profile-badge {
        padding: 12px;
        border-radius: 14px;
    }

    .quiz-public-profile-badge {
        min-height: 64px;
    }

    .quiz-public-profile-badge-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .quiz-public-profile-badge-icon svg {
        width: 20px;
        height: 20px;
    }

    .quiz-dashboard-card,
    .quiz-history-panel,
    .quiz-leaderboard-panel,
    .quiz-profile-card {
        padding: 14px;
        border-radius: 14px;
    }

    .quiz-overview-feature {
        grid-template-columns: 1fr;
        padding: 16px 14px;
        border-radius: 16px;
        gap: 14px;
    }

    .quiz-overview-feature-score {
        min-width: 0;
        width: 100%;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .quiz-overview-feature-copy h3 {
        font-size: 1.18rem;
    }

    #quizHistoryList,
    #quizLeaderboardList {
        max-height: min(58vh, 560px);
        padding-right: 4px;
    }

    .quiz-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quiz-dashboard-card {
        min-width: 0;
    }

    .quiz-dashboard-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    .quiz-profile-head {
        align-items: flex-start;
        gap: 12px;
    }

    .quiz-profile-avatar {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }

    .quiz-profile-avatar svg {
        width: 26px;
        height: 26px;
    }

    .quiz-profile-head h3 {
        font-size: 1.12rem;
    }

    .quiz-profile-subtext {
        font-size: 0.84rem;
    }

    .quiz-profile-stat {
        padding: 12px;
        border-radius: 14px;
        justify-items: center;
        text-align: center;
    }

    .quiz-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-profile-badges-preview .quiz-history-heading {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .quiz-profile-badges-preview .quiz-history-badge {
        justify-self: end;
    }

    .quiz-profile-rank-panel {
        padding: 16px 16px 14px;
        border-radius: 18px;
    }

    .quiz-profile-rank-top {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: start;
    }

    .quiz-profile-rank-main strong {
        font-size: 1.16rem;
    }

    .quiz-profile-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quiz-profile-rank-identity {
        align-items: flex-start;
        gap: 12px;
    }

    .quiz-profile-badges-preview .quiz-history-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .quiz-profile-badges-preview .quiz-history-badge {
        justify-self: end;
    }

    .quiz-profile-stat span {
        font-size: 0.84rem;
    }

    .quiz-profile-stat strong {
        font-size: 0.94rem;
    }

    .quiz-profile-badge {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .quiz-profile-badge-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .quiz-profile-badge-icon svg {
        width: 20px;
        height: 20px;
    }

    .quiz-profile-badge-main strong {
        font-size: 0.9rem;
    }

    .quiz-profile-badge-main span,
    .quiz-profile-badge-note {
        font-size: 0.8rem;
    }

    .quiz-dashboard-value {
        font-size: 1.08rem;
    }

      .quiz-history-heading h3 {
          font-size: 1.02rem;
      }

      .quiz-history-head {
          gap: 10px 12px;
          align-items: start;
          padding: 12px 12px 10px;
          border-radius: 16px;
          flex-wrap: wrap;
      }

      .quiz-history-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
      }

      .quiz-history-icon svg {
          width: 20px;
          height: 20px;
      }

      .quiz-history-copy {
          gap: 2px;
      }

      .quiz-history-copy h3 {
          font-size: 0.98rem;
          line-height: 1.18;
      }

      .quiz-history-copy p {
          font-size: 0.78rem;
          line-height: 1.4;
          max-width: none;
      }

      .quiz-history-head-chip {
          width: 100%;
          justify-content: center;
          min-height: 30px;
          padding: 0 10px;
          font-size: 0.72rem;
          white-space: nowrap;
      }

      .quiz-history-archive-card {
          padding: 13px 12px;
          border-radius: 14px;
          gap: 4px;
      }

      .quiz-history-archive-head {
          gap: 6px;
      }

      .quiz-history-archive-icon {
          width: 22px;
          height: 22px;
      }

      .quiz-history-archive-icon svg {
          width: 12px;
          height: 12px;
      }

      .quiz-history-archive-card .quiz-dashboard-kicker {
          font-size: 0.66rem;
          letter-spacing: 0.05em;
      }

      .quiz-history-archive-value {
          font-size: 1.02rem;
      }

      .quiz-history-item,
      .quiz-leaderboard-item {
          padding: 13px 12px;
        border-radius: 14px;
    }

    #quizHistoryList,
    #quizLeaderboardList {
        max-height: min(54vh, 460px);
        padding-right: 2px;
    }

    .quiz-attempt-review-item {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .quiz-attempt-review-answer-card,
    .quiz-attempt-review-explanation {
        padding: 12px 13px;
        border-radius: 14px;
    }

    .quiz-leaderboard-rank {
        min-width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .quiz-sidebar-toggle {
        width: 48px;
        height: 48px;
    }

    .quiz-sidebar-primary-btn {
        width: calc(100% - 28px);
        margin: 14px;
    }

    .quiz-sidebar-user {
        padding: 16px;
    }

    .quiz-sidebar-link {
        padding: 14px;
    }

    .quiz-sidebar-footer {
        padding: 14px;
    }

    .quiz-sidebar-home-link {
        width: 100%;
        justify-content: center;
    }

    .quiz-hero-panel {
        padding: 20px 14px 18px;
    }

    .quiz-hero-content {
        gap: 16px;
    }

    .quiz-hero-logo {
        width: 164px;
        height: 164px;
    }

    .quiz-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .quiz-stat {
        width: 100%;
        min-width: 0;
        padding: 10px 8px;
    }

    .quiz-stat-value {
        font-size: 1.02rem;
    }

    .quiz-stat-label {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .quiz-hero-text p {
        font-size: 0.93rem;
        margin-bottom: 16px;
    }

    .quiz-hook-card {
        padding: 18px;
    }

    .quiz-grid {
        grid-template-columns: 1fr;
    }

    .quiz-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quiz-dashboard-card {
        padding: 18px;
        border-radius: 18px;
    }

    .quiz-history-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .quiz-leaderboard-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .quiz-leaderboard-head {
        gap: 12px;
    }

    .quiz-leaderboard-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .quiz-leaderboard-copy h3 {
        font-size: 1.08rem;
    }

    .quiz-leaderboard-copy p {
        font-size: 0.9rem;
    }

    .quiz-history-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .quiz-history-main strong {
        font-size: 0.95rem;
    }

    .quiz-history-main span {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .quiz-history-side {
        min-width: 104px;
        gap: 5px;
    }

    .quiz-history-status {
        padding: 6px 10px;
        font-size: 0.68rem;
    }

    .quiz-history-review-hint {
        font-size: 0.7rem;
    }

    .quiz-history-score-wrap {
        justify-content: flex-end;
        gap: 8px;
    }

    .quiz-history-score {
        font-size: 1.02rem;
    }

    .quiz-leaderboard-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        justify-items: stretch;
        gap: 10px;
        padding: 14px 14px 16px;
    }

    .quiz-leaderboard-rank {
        min-width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 0.92rem;
    }

    .quiz-leaderboard-main {
        min-width: 0;
    }

    .quiz-leaderboard-main strong,
    .quiz-leaderboard-main span {
        word-break: break-word;
    }

    .quiz-leaderboard-score-wrap {
        grid-column: 3;
        justify-self: end;
        align-self: start;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .quiz-leaderboard-score-icon {
        width: 24px;
        height: 24px;
    }

    .quiz-leaderboard-score-icon svg {
        width: 13px;
        height: 13px;
    }

    .quiz-leaderboard-score-label {
        display: none;
    }

    .quiz-leaderboard-score {
        font-size: 1rem;
    }

    .quiz-history-side {
        text-align: left;
        justify-items: start;
    }

    .quiz-profile-note-card {
        padding: 14px;
        gap: 10px;
    }

    .quiz-profile-note-head,
    .quiz-profile-note-actions {
        grid-template-columns: 1fr;
    }

    .quiz-profile-note-count {
        justify-self: start;
    }

    .quiz-profile-note-display-actions {
        justify-content: stretch;
    }

    .quiz-profile-note-save,
    .quiz-profile-note-edit {
        width: 100%;
    }

    .quiz-hook-top,
    .locked-set-item,
    .progress-preview-row {
        gap: 10px;
    }

    .quiz-hook-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .quiz-hook-icon svg {
        width: 16px;
        height: 16px;
    }

    .quiz-hook-top,
    .locked-set-item {
        align-items: flex-start;
    }

    .locked-set-item {
        flex-direction: column;
    }

    .leaderboard-row {
        grid-template-columns: auto 1fr;
        gap: 6px 12px;
    }

    .leaderboard-score {
        grid-column: 2;
        justify-self: start;
    }

    .history-chip {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .quiz-cta-strip {
        padding: 18px;
    }

    .quiz-cta-strip h3 {
        font-size: 1.04rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-hero-panel:not(.is-animated) .quiz-hero-text h1,
    .quiz-hero-panel:not(.is-animated) .quiz-hero-text p,
    .quiz-hero-panel:not(.is-animated) .quiz-hero-actions,
    .quiz-hero-panel:not(.is-animated) .quiz-hero-visual,
    .quiz-hero-panel:not(.is-animated) .quiz-hero-stats {
        opacity: 1;
        transform: none;
    }

    .quiz-hero-panel.is-animated .quiz-hero-text h1,
    .quiz-hero-panel.is-animated .quiz-hero-text p,
    .quiz-hero-panel.is-animated .quiz-hero-actions,
    .quiz-hero-panel.is-animated .quiz-hero-visual,
    .quiz-hero-panel.is-animated .quiz-hero-stats {
        animation: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .quiz-badges-summary {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .quiz-badges-summary-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .quiz-badges-summary {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .quiz-badges-summary-card {
        flex: 1 1 0;
        min-width: 0;
    }
}

.quiz-badges-summary {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 10px;
}

.quiz-badges-summary-card {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 900px) {
    .lab-login-layout {
        grid-template-columns: 1fr;
    }

    .lab-shell {
        padding: 18px;
        border-radius: 20px;
    }
}

@media (max-width: 1024px) {
    .lab-login-stage,
    .lab-decision-card {
        gap: 12px;
    }

    .lab-preview-card,
    .lab-decision-card,
    .lab-scenario-card {
        padding: 15px 16px;
    }

    .lab-fake-login {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .lab-shell-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lab-shell,
    .lab-preview-card,
    .lab-fake-login {
        border-radius: 18px;
    }

    .lab-shell {
        padding: 16px;
        gap: 14px;
    }

    .lab-login-layout,
    .lab-login-stage {
        gap: 12px;
    }

    .lab-checklist-actions .quiz-start-btn,
    .lab-checklist-actions .quiz-exit-btn {
        width: 100%;
        justify-content: center;
    }

    .lab-close-btn {
        width: 44px;
        height: 44px;
        justify-self: end;
    }

    .lab-page-note,
    .lab-scenario-body {
        font-size: 0.88rem;
    }

    .lab-scenario-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .lab-url-pill,
    .lab-fake-alert,
    .lab-submit-demo-btn,
    .lab-page-note {
        padding-left: 12px;
        padding-right: 12px;
    }
}