/* /Pages/About.razor.rz.scp.css */
.vertical-landing-page[b-7si7302270] {
    min-height: 100vh;
    color: var(--glytic-text-primary);
}

.vertical-hero[b-7si7302270] {
    padding: 64px 24px 48px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.vertical-hero-content[b-7si7302270] {
    max-width: 900px;
    margin: 0 auto;
}

.vertical-badge[b-7si7302270] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.vertical-badge[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.vertical-hero-title[b-7si7302270] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    color: var(--glytic-text-primary);
}

.vertical-hero-description[b-7si7302270] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Sections ===== */
.about-section[b-7si7302270] {
    padding: 3rem 1.5rem;
    border-bottom: 1px solid var(--glytic-border);
}

.about-section:last-child[b-7si7302270] {
    border-bottom: none;
}

.about-section-inner[b-7si7302270] {
    max-width: 800px;
    margin: 0 auto;
}

.about-section-title[b-7si7302270] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 0 0 1.5rem;
    text-align: center;
}

.about-card[b-7si7302270] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    border-radius: 10px;
    padding: 2rem;
    line-height: 1.8;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.about-card[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 10px;
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.about-card p[b-7si7302270] {
    color: var(--glytic-text-secondary);
    font-size: 1rem;
    margin: 0 0 1rem;
}

.about-card p:last-child[b-7si7302270] {
    margin-bottom: 0;
}

.quality-list[b-7si7302270] {
    color: var(--glytic-text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.quality-list li[b-7si7302270] {
    margin-bottom: 0.5rem;
}

.quality-list li[b-7si7302270]::marker {
    color: var(--glytic-primary);
}

/* ===== How It Works Grid ===== */
.how-it-works-grid[b-7si7302270] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.how-card[b-7si7302270] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: background var(--glytic-transition);
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.how-card[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 10px;
    background: var(--glytic-card-bg);
    transition: background var(--glytic-transition);
    z-index: -1;
    pointer-events: none;
}

.how-card:hover[b-7si7302270] {
    background: var(--glytic-border-hover);
}

.how-card:hover[b-7si7302270]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Number plate: double-layer reveal so its hairline follows the cut corner. */
.how-card-number[b-7si7302270] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    width: 40px;
    height: 40px;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-border);
    border: 0;
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.how-card-number[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.how-card h3[b-7si7302270] {
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.how-card p[b-7si7302270] {
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.about-verify-link[b-7si7302270] {
    text-align: center;
    margin: 1.75rem 0 0;
}

.about-verify-link a[b-7si7302270] {
    color: var(--glytic-primary);
    font-weight: 600;
    text-decoration: none;
}

.about-verify-link a:hover[b-7si7302270] {
    text-decoration: underline;
}

/* ===== CTA Section ===== */
.about-cta-section[b-7si7302270] {
    text-align: center;
    padding-bottom: 5rem;
}

.about-cta-text[b-7si7302270] {
    color: var(--glytic-text-secondary);
    font-size: 1.1rem;
    margin: 0 0 2rem;
}

.about-cta-buttons[b-7si7302270] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-large[b-7si7302270],
.btn-secondary-large[b-7si7302270] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
    clip-path: none;
}

.btn-primary-large[b-7si7302270] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
}

.btn-primary-large:hover[b-7si7302270] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.btn-secondary-large[b-7si7302270] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.btn-secondary-large:hover[b-7si7302270] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.btn-primary-large:focus-visible[b-7si7302270],
.btn-secondary-large:focus-visible[b-7si7302270] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .vertical-hero[b-7si7302270] {
        padding: 40px 16px 32px;
    }

    .about-section[b-7si7302270] {
        padding: 2.5rem 1rem;
    }

    .about-card[b-7si7302270] {
        padding: 1.25rem;
    }

    .how-card[b-7si7302270] {
        padding: 1.5rem 1rem;
    }
}
/* /Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* QuizForge Admin Dashboard - Clean & Wide Layout */

.admin-layout[b-nx46zjj0uc] {
    min-height: 100vh;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(var(--glytic-secondary-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--glytic-primary-rgb), 0.03) 0%, transparent 50%),
        linear-gradient(135deg, #0C1018 0%, #1A2230 50%, #1E3040 100%);
    color: #e0e6ed;
    /* Enable click events on the entire layout */
    cursor: default;
}

/* Simplified Header - Much More Space for Navigation */
.admin-header[b-nx46zjj0uc] {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-header-content[b-nx46zjj0uc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Navigation Menu - Much Wider Now */
.admin-nav[b-nx46zjj0uc] {
    display: flex;
    gap: 12px;
    flex: 1;
    justify-content: center;
    max-width: none; /* Removed width constraint */
    margin: 0 20px; /* More breathing room */
}

.nav-category[b-nx46zjj0uc] {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-width: 160px; /* Increased from 140px */
    flex: 1; /* Allow categories to grow */
}

.nav-category:hover[b-nx46zjj0uc] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-color: rgba(var(--glytic-primary-rgb), 0.2);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.1);
}

.nav-category.active[b-nx46zjj0uc] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.1) 0%, rgba(var(--glytic-secondary-rgb), 0.05) 100%);
    border-color: rgba(var(--glytic-primary-rgb), 0.3);
    box-shadow: 
        0 8px 32px rgba(var(--glytic-primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Enhanced active state to show it's interactive */
    transform: translateY(-1px);
}

.nav-category-header[b-nx46zjj0uc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px; /* More padding */
    gap: 10px;
    cursor: pointer; /* Ensure header is clickable */
    /* Make sure header handles its own clicks */
    position: relative;
    z-index: 1002;
}

.nav-icon[b-nx46zjj0uc] {
    color: var(--glytic-primary);
    font-size: 1.3rem !important;
}

.nav-text[b-nx46zjj0uc] {
    font-size: 0.9rem; /* Slightly larger */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex: 1;
    text-align: center; /* Center the text */
    cursor: pointer; /* Ensure text is clickable */
}

.nav-expand[b-nx46zjj0uc] {
    font-size: 1rem !important;
    color: rgba(224, 230, 237, 0.6);
    transition: transform 0.2s ease;
    cursor: pointer; /* Ensure expand icon is clickable */
}

.nav-category.active .nav-expand[b-nx46zjj0uc] {
    transform: rotate(180deg);
    color: var(--glytic-primary); /* Highlight active expand icon */
}

/* Submenu - Fixed positioning and event handling */
.nav-submenu[b-nx46zjj0uc] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    border-top: none;
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(20px);
    z-index: 1001;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.1);
    animation: submenuSlideDown-b-nx46zjj0uc 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Prevent submenu from triggering category hover */
    pointer-events: auto;
    /* Add subtle pulse to indicate it's open */
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.1),
        0 0 30px rgba(var(--glytic-primary-rgb), 0.1);
}

@keyframes submenuSlideDown-b-nx46zjj0uc {
    from { 
        opacity: 0; 
        transform: translateY(-10px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.nav-item[b-nx46zjj0uc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px; /* More padding */
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Ensure nav items handle their own events */
    pointer-events: auto;
    position: relative;
}

.nav-item:last-child[b-nx46zjj0uc] {
    border-bottom: none;
}

.nav-item:hover[b-nx46zjj0uc] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    padding-left: 22px;
    /* Subtle glow effect on hover */
    box-shadow: inset 0 0 20px rgba(var(--glytic-primary-rgb), 0.1);
}

.nav-item.active[b-nx46zjj0uc] {
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border-left: 3px solid var(--glytic-primary);
    color: var(--glytic-primary);
    /* Enhanced active item styling */
    box-shadow: 
        inset 0 0 20px rgba(var(--glytic-primary-rgb), 0.1),
        0 0 10px rgba(var(--glytic-primary-rgb), 0.2);
}

.nav-subicon[b-nx46zjj0uc] {
    font-size: 1rem !important;
    color: rgba(var(--glytic-primary-rgb), 0.8);
}

.nav-badge[b-nx46zjj0uc] {
    margin-left: auto;
    font-size: 0.7rem !important;
    height: 20px !important;
}

/* Quick Actions - Simplified */
.admin-actions[b-nx46zjj0uc] {
    display: flex;
    gap: 8px;
}

.action-btn[b-nx46zjj0uc] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(224, 230, 237, 0.8);
    transition: all 0.3s ease;
}

.action-btn:hover[b-nx46zjj0uc] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: rgba(var(--glytic-primary-rgb), 0.3);
    color: var(--glytic-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--glytic-primary-rgb), 0.15);
}

/* Breadcrumb */
.admin-breadcrumb[b-nx46zjj0uc] {
    padding: 12px 24px 0;
    max-width: 1600px;
    margin: 0 auto;
}

/* Content Area - Enhanced to support click-outside */
.admin-content[b-nx46zjj0uc] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
    /* Ensure content area can capture clicks */
    position: relative;
}

/* Admin Dashboard Specific Styles */
.admin-dashboard[b-nx46zjj0uc] {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-header[b-nx46zjj0uc] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-secondary-rgb), 0.05));
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
}

.dashboard-actions[b-nx46zjj0uc] {
    display: flex;
    gap: 0.5rem;
}

.admin-tab-content[b-nx46zjj0uc] {
    padding: 2rem 1rem;
}

.admin-section[b-nx46zjj0uc] {
    margin-bottom: 2rem;
}

.loading-container[b-nx46zjj0uc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.dashboard-tabs[b-nx46zjj0uc] {
    margin-top: 2rem;
}

.action-card[b-nx46zjj0uc] {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    height: 100%;
    min-height: 140px;
}

.action-card:hover[b-nx46zjj0uc] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Enhanced visual feedback for action cards */
.action-card:active[b-nx46zjj0uc] {
    transform: translateY(-2px) scale(0.98);
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .admin-dashboard[b-nx46zjj0uc] {
        padding: 0.5rem;
    }
    
    .dashboard-header[b-nx46zjj0uc] {
        padding: 1rem;
    }
    
    .admin-tab-content[b-nx46zjj0uc] {
        padding: 1rem 0.5rem;
    }
    
    .action-card[b-nx46zjj0uc] {
        margin-bottom: 1rem;
        min-height: 120px;
    }

    .dashboard-actions[b-nx46zjj0uc] {
        align-self: stretch;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .action-card[b-nx46zjj0uc] {
        min-height: 100px;
    }

    .admin-tab-content[b-nx46zjj0uc] {
        padding: 0.5rem;
    }
}

/* Grid spacing improvements */
.admin-dashboard .mb-6[b-nx46zjj0uc] {
    margin-bottom: 2rem !important;
}

/* Focus and Accessibility */
.nav-category:focus-visible[b-nx46zjj0uc],
.nav-item:focus-visible[b-nx46zjj0uc],
.action-btn:focus-visible[b-nx46zjj0uc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
}

/* Keyboard navigation support */
.nav-category:focus[b-nx46zjj0uc],
.nav-item:focus[b-nx46zjj0uc] {
    outline: 2px solid rgba(var(--glytic-primary-rgb), 0.5);
    outline-offset: 2px;
}

/* High DPI Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .nav-icon[b-nx46zjj0uc],
    .nav-subicon[b-nx46zjj0uc] {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dashboard body (Composed Strike) */
.welcome-header[b-nx46zjj0uc] {
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.05) 0%, rgba(var(--glytic-secondary-rgb), 0.05) 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    margin-bottom: 24px;
}

.dashboard-loading[b-nx46zjj0uc] {
    text-align: center;
    padding: 80px 20px;
}

.dashboard-error-row[b-nx46zjj0uc],
.dashboard-empty[b-nx46zjj0uc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-error-row[b-nx46zjj0uc] {
    justify-content: space-between;
}

.dashboard-empty[b-nx46zjj0uc] {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
}

.dash-section[b-nx46zjj0uc]  .quick-action-card {
    cursor: pointer;
    height: 100%;
    background: var(--glytic-card-bg);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dash-section[b-nx46zjj0uc]  .quick-action-card:hover {
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(var(--glytic-primary-rgb), 0.15);
}

.dash-section[b-nx46zjj0uc]  .quick-action-card:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
}

[b-nx46zjj0uc] .ai-card-style {
    background: var(--glytic-card-bg);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-nx46zjj0uc] .ai-card-style:hover {
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(var(--glytic-primary-rgb), 0.15);
}

[b-nx46zjj0uc] .ai-card-style:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .welcome-header[b-nx46zjj0uc] {
        padding: 16px;
    }

    .dashboard-loading[b-nx46zjj0uc] {
        padding: 48px 12px;
    }
}

/* Smooth state transitions */
.nav-category.active[b-nx46zjj0uc],
.nav-submenu[b-nx46zjj0uc] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced visual feedback for better UX */
.nav-category:active[b-nx46zjj0uc] {
    transform: scale(0.98);
}

.nav-item:active[b-nx46zjj0uc] {
    transform: scale(0.98);
    background: rgba(var(--glytic-primary-rgb), 0.2);
}
/* /Pages/Admin/BlueprintAdmin.razor.rz.scp.css */
.admin-page-header[b-dmwfy20zjm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    background: var(--glytic-gradient-card);
    border-radius: 16px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    flex-wrap: wrap;
    gap: 16px;
}

.stat-card[b-dmwfy20zjm] {
    background: rgba(26, 34, 48, 0.6);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover[b-dmwfy20zjm] {
    border-color: rgba(var(--glytic-primary-rgb), 0.3);
    transform: translateY(-2px);
}

.test-results-section[b-dmwfy20zjm] {
    max-height: 300px;
    overflow-y: auto;
}

.test-result-item[b-dmwfy20zjm] {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border-left: 4px solid transparent;
}

.test-result-item.success[b-dmwfy20zjm] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-left-color: var(--mud-palette-success);
}

.test-result-item.failed[b-dmwfy20zjm] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-left-color: var(--mud-palette-error);
}

.few-shot-stats[b-dmwfy20zjm] {
    padding: 16px;
    background: rgba(26, 34, 48, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.exam-needs-list[b-dmwfy20zjm] {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(26, 34, 48, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.05);
}

/* Mobile: header actions go full width and stay tappable */
@media (max-width: 599px) {
    .admin-page-header[b-dmwfy20zjm] {
        padding: 16px;
    }

    .admin-page-header[b-dmwfy20zjm]  .mud-button-root {
        min-height: 40px;
    }
}
/* /Pages/Admin/BulkOperationsPage.razor.rz.scp.css */
/* Scoped header for the AI Exam Builder page.
   .gradient-text is defined globally (mudblazor-theme.css); do not redefine it here. */

.admin-page-header[b-lvp3i0dofx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    background: var(--glytic-gradient-overlay);
    border-radius: 16px;
    border: 1px solid var(--glytic-border);
    backdrop-filter: blur(10px);
}
/* /Pages/Admin/Diagnostics/ClientErrorsPage.razor.rz.scp.css */
/* Native .client-errors-scope wrapper carries the scope so ::deep reaches
   the root MudPaper (.client-errors-page) and all MudBlazor descendants.
   The surface rules must land on the MudPaper itself, so they use ::deep
   rather than moving the class to a wrapper (which would double the surface). */
[b-hgqzc3l9nt] .client-errors-page {
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
}

[b-hgqzc3l9nt] .client-errors-toolbar {
    align-items: center;
    flex-wrap: wrap;
}

.truncate-url[b-hgqzc3l9nt] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-hgqzc3l9nt] .stack-trace {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-bg-dark);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

[b-hgqzc3l9nt] .detail-actions {
    align-items: center;
    flex-wrap: wrap;
}

[b-hgqzc3l9nt] .mud-button-root,
[b-hgqzc3l9nt] .mud-icon-button {
    min-height: 40px;
    min-width: 40px;
}

@media (max-width: 600px) {
    [b-hgqzc3l9nt] .client-errors-page {
        padding: 12px;
    }

    [b-hgqzc3l9nt] .client-errors-toolbar {
        align-items: stretch;
    }

    [b-hgqzc3l9nt] .client-errors-toolbar .mud-input-control {
        flex-basis: 100%;
    }

    .truncate-url[b-hgqzc3l9nt] {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    [b-hgqzc3l9nt] .client-errors-table .mud-table-cell {
        min-height: 40px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    [b-hgqzc3l9nt] .client-errors-table .mud-table-row {
        border: 1px solid var(--glytic-border);
        border-radius: var(--glytic-border-radius-small);
        margin-bottom: 10px;
    }
}
/* /Pages/Admin/Diagnostics/DedupAdminPage.razor.rz.scp.css */
.dedup-stats-strip[b-8wichcuqu3] {
    display: flex;
    gap: 1rem;
}
.dedup-stat[b-8wichcuqu3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.dedup-stat-val[b-8wichcuqu3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}
.dedup-stat-key[b-8wichcuqu3] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
    margin-top: 2px;
}
.dedup-controls[b-8wichcuqu3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.dedup-scan-row[b-8wichcuqu3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem;
}
.dedup-exam-title[b-8wichcuqu3] { flex: 1; color: var(--glytic-text-secondary); }
.dedup-duration[b-8wichcuqu3] { color: var(--glytic-text-muted); font-size: 0.72rem; }
.dedup-badge[b-8wichcuqu3] {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.badge-deactivated[b-8wichcuqu3] { background: rgba(244,67,54,0.1); color: #f44336; border: 1px solid rgba(244,67,54,0.2); }
.badge-preview[b-8wichcuqu3] { background: rgba(255,152,0,0.1); color: #ff9800; border: 1px solid rgba(255,152,0,0.2); }
.badge-flagged[b-8wichcuqu3] { background: rgba(255,255,255,0.05); color: var(--glytic-text-muted); border: 1px solid rgba(255,255,255,0.1); }
.dedup-q-text[b-8wichcuqu3] { font-size: 0.78rem; color: var(--glytic-text-secondary); }
.dedup-q-removed[b-8wichcuqu3] { color: rgba(244,67,54,0.7); }
.sim-high[b-8wichcuqu3] { color: #f44336; font-weight: 700; }
.sim-mid[b-8wichcuqu3]  { color: #ff9800; font-weight: 600; }
.sim-low[b-8wichcuqu3]  { color: var(--glytic-text-muted); }
.dedup-pair-card[b-8wichcuqu3] { border-radius: 10px; }
.dedup-pair-header[b-8wichcuqu3] { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.dedup-pair-body[b-8wichcuqu3] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.dedup-pair-q[b-8wichcuqu3] { font-size: 0.82rem; padding: 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.03); color: var(--glytic-text-secondary); line-height: 1.45; }
.dedup-pair-actions[b-8wichcuqu3] { display: flex; gap: 0.5rem; }

/* Filter bar */
.dedup-filter-bar[b-8wichcuqu3] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.dedup-filter-select[b-8wichcuqu3] {
    min-width: 160px;
    max-width: 220px;
}

/* Bulk dismiss bar */
.dedup-bulk-bar[b-8wichcuqu3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Expanded row panel */
.dedup-expand-panel[b-8wichcuqu3] {
    background: var(--glytic-bg-card);
    border-top: 1px solid var(--glytic-border);
}

.dedup-expand-panel .dedup-pair-body[b-8wichcuqu3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dedup-expand-panel .dedup-pair-q[b-8wichcuqu3] {
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 8px;
    border: 1px solid var(--glytic-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
    .dedup-stats-strip[b-8wichcuqu3] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .dedup-stat[b-8wichcuqu3] {
        min-width: 0;
    }

    .dedup-stat-val[b-8wichcuqu3] {
        max-width: 100%;
        font-size: 1.25rem;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .dedup-stat-key[b-8wichcuqu3] {
        letter-spacing: 0.04em;
        text-align: center;
    }

    .dedup-controls[b-8wichcuqu3] {
        align-items: stretch;
        flex-direction: column;
    }

    .dedup-controls[b-8wichcuqu3]  .mud-button-root {
        width: 100%;
    }

    .dedup-pair-body[b-8wichcuqu3],
    .dedup-expand-panel .dedup-pair-body[b-8wichcuqu3] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Admin/Diagnostics/DiagnosticsPage.razor.rz.scp.css */
.page-heading[b-6aaay1poiw] {
    margin-bottom: 2rem;
}

[b-6aaay1poiw] .reload-button {
    min-height: 40px;
    margin-bottom: 1.5rem;
}

.info-card[b-6aaay1poiw] {
    height: 100%;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
}

.card-title[b-6aaay1poiw] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.detail-grid[b-6aaay1poiw] {
    display: grid;
    gap: 0.75rem;
}

.migration-grid[b-6aaay1poiw] {
    gap: 1rem;
}

.health-tile[b-6aaay1poiw] {
    min-height: 124px;
    padding: 1rem;
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    text-align: center;
}

.health-success[b-6aaay1poiw] {
    background: rgba(var(--glytic-success-rgb), 0.12);
}

.health-warning[b-6aaay1poiw] {
    background: rgba(var(--glytic-score-mid-rgb), 0.12);
}

.health-info[b-6aaay1poiw] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
}

.empty-state[b-6aaay1poiw] {
    border: 1px solid var(--glytic-border);
}

@media (max-width: 600px) {
    .diagnostics-page[b-6aaay1poiw] {
        padding-inline: 12px;
    }

    .info-card[b-6aaay1poiw] {
        padding: 20px;
    }

    .health-tile[b-6aaay1poiw] {
        min-height: 112px;
    }
}
/* /Pages/Admin/EngagementDropoffPage.razor.rz.scp.css */
.engagement-page-scope[b-qs40f2zk9h] { color: var(--glytic-text-primary); }
h1[b-qs40f2zk9h] { font-size: 1.8rem; }
h2[b-qs40f2zk9h] { font-size: 1.25rem; margin: 1.5rem 0 .65rem; }
p[b-qs40f2zk9h] { margin-bottom: .75rem; }
.engagement-filters[b-qs40f2zk9h] { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; align-items: center; gap: 12px; margin-top: 20px; }
.refresh-status[b-qs40f2zk9h], .session-pager[b-qs40f2zk9h] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; }
.refresh-status input[b-qs40f2zk9h] { margin-right: 8px; }
.coverage-panel[b-qs40f2zk9h] { padding: 20px; margin-top: 20px; }
.coverage-panel h2[b-qs40f2zk9h] { margin-top: 0; }
.coverage-warning[b-qs40f2zk9h] { font-weight: 600; }
details summary[b-qs40f2zk9h] { cursor: pointer; min-height: 40px; padding-top: 8px; }
details ul[b-qs40f2zk9h] { padding-left: 24px; }
details li[b-qs40f2zk9h] { margin-bottom: 10px; }
.stage-grid[b-qs40f2zk9h] { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stage-card[b-qs40f2zk9h] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; background: var(--glytic-bg-card); border: 1px solid var(--glytic-border); border-radius: var(--glytic-border-radius-small); color: var(--glytic-text-primary); text-align: left; cursor: pointer; }
.stage-card strong[b-qs40f2zk9h] { font-size: 1.35rem; }
.stage-card.selected[b-qs40f2zk9h], .stage-card:hover[b-qs40f2zk9h] { border-color: var(--glytic-primary); }
.stage-card--static[b-qs40f2zk9h], .stage-card--static:hover[b-qs40f2zk9h] { cursor: default; border-color: var(--glytic-border); }
.stage-card:focus-visible[b-qs40f2zk9h], .session-link:focus-visible[b-qs40f2zk9h] { outline: 2px solid var(--glytic-primary); outline-offset: 3px; }
.table-scroll[b-qs40f2zk9h] { overflow-x: auto; }
.session-table[b-qs40f2zk9h] { width: 100%; border-collapse: collapse; font-size: .9rem; }
.session-table th[b-qs40f2zk9h], .session-table td[b-qs40f2zk9h] { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--glytic-border); }
.session-table th[b-qs40f2zk9h] { white-space: nowrap; }
.session-table td[b-qs40f2zk9h] { min-width: 150px; max-width: 280px; overflow-wrap: anywhere; }
.session-table tr.selected[b-qs40f2zk9h] { background: var(--glytic-bg-light); }
.session-link[b-qs40f2zk9h] { padding: 8px 0; border: 0; background: transparent; color: var(--glytic-primary); cursor: pointer; text-align: left; }
.cell-detail[b-qs40f2zk9h] { display: block; color: var(--glytic-text-muted); margin-top: 5px; }
.error-text[b-qs40f2zk9h] { color: var(--glytic-error); }
.timeline-panel[b-qs40f2zk9h] { margin: 30px 0; }
.event-timeline[b-qs40f2zk9h] { padding: 0; list-style: none; }
.event-timeline li[b-qs40f2zk9h] { padding: 16px 20px; margin-bottom: 12px; background: var(--glytic-bg-card); border: 1px solid var(--glytic-border); border-left: 3px solid var(--glytic-primary); overflow-wrap: anywhere; }
.event-timeline li.event-error[b-qs40f2zk9h] { border-left-color: var(--glytic-error); }
.event-timeline time[b-qs40f2zk9h] { display: block; color: var(--glytic-text-muted); margin-bottom: 8px; }
.evidence-label[b-qs40f2zk9h] { display: inline-block; margin: 0 0 8px 12px; color: var(--glytic-text-secondary); }
[b-qs40f2zk9h] .mud-button-root { min-height: 40px; }
@media (max-width: 900px) { .engagement-filters[b-qs40f2zk9h] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    [b-qs40f2zk9h] .engagement-page { padding-inline: 12px; }
    .engagement-filters[b-qs40f2zk9h] { grid-template-columns: minmax(0, 1fr); }
    .coverage-panel[b-qs40f2zk9h] { padding: 14px; }
    .evidence-label[b-qs40f2zk9h] { display: block; margin-left: 0; }
}
/* /Pages/Admin/ExamModerationPage.razor.rz.scp.css */
/* Scoped styles for ExamModerationPage. ::deep reaches MudBlazor children. */

.moderation-page[b-wxz0vl9rru]  .stat-card {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

/* Keep the action-icon column from wrapping awkwardly on small screens. */
@media (max-width: 600px) {
    .moderation-page[b-wxz0vl9rru]  .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* /Pages/Admin/HealthCheckPage.razor.rz.scp.css */
/* Native .health-page-scope wrapper carries the scope so ::deep reaches
   the MudContainer (.health-page) and all MudBlazor descendants. */
[b-u4t1hxfa1e] .health-page .mud-card {
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
}

[b-u4t1hxfa1e] .mud-button-root,
[b-u4t1hxfa1e] .mud-icon-button {
    min-height: 40px;
    min-width: 40px;
}

@media (max-width: 600px) {
    [b-u4t1hxfa1e] .health-page {
        padding: 16px 12px;
    }

    [b-u4t1hxfa1e] .health-page .mud-typography-h4 {
        overflow-wrap: anywhere;
    }

    [b-u4t1hxfa1e] .health-page .mud-list-item {
        min-height: 48px;
    }
}
/* /Pages/Admin/QuestionFlagsPage.razor.rz.scp.css */
/* Native .question-flags-scope wrapper carries the scope so ::deep reaches
   the MudContainer (MaxWidth.False root) and all MudBlazor descendants. */
[b-jb0vvhjxh5] .mud-card {
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
}

[b-jb0vvhjxh5] .mud-table-container {
    border-radius: 8px;
    overflow: hidden;
}

[b-jb0vvhjxh5] .mud-table-head .mud-table-cell {
    background: rgba(0, 0, 0, 0.2);
    color: var(--glytic-primary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-jb0vvhjxh5] .mud-table-row:hover td {
    background: rgba(0, 255, 231, 0.04);
}

[b-jb0vvhjxh5] .mud-select-input {
    background: var(--glytic-bg-card);
}
/* /Pages/Admin/SubscriptionsPage.razor.rz.scp.css */
.border-card[b-z6n42j36pj] {
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
}

.stripe-event-id[b-z6n42j36pj] {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--glytic-text-muted);
}
/* /Pages/Admin/TestDiscoveryPage.razor.rz.scp.css */
/* Scoped header for the Test Discovery page.
   .gradient-text is defined globally (mudblazor-theme.css); do not redefine it here. */

.admin-page-header[b-nvovl75inc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    background: var(--glytic-gradient-overlay);
    border-radius: 16px;
    border: 1px solid var(--glytic-border);
    backdrop-filter: blur(10px);
}
/* /Pages/Admin/TestManagement.razor.rz.scp.css */
/* Scoped styles for the Test Management hub.
   Native .test-mgmt-page wrapper carries the scope; ::deep reaches the MudTabs. */

.test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs {
    background: rgba(var(--glytic-surface-rgb, 26, 34, 48), 0.6);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    backdrop-filter: blur(20px);
}

.test-mgmt-page[b-jcxkfgbemk]  .tab-panel-content {
    padding: 12px 0;
}

.test-mgmt-page[b-jcxkfgbemk]  .import-build-card {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    border-radius: 12px;
}

/* The section switcher must scroll horizontally on touch without clipping. */
.test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs .mud-tabs-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .test-mgmt-page[b-jcxkfgbemk] {
        padding: 0;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs {
        padding: 4px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs .mud-tab {
        min-width: unset;
        padding: 8px 10px;
        font-size: 0.7rem;
        letter-spacing: 0;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs .mud-tabs-panels {
        padding: 8px 4px;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .tab-panel-content {
        padding: 4px 0;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .import-build-description {
        display: none;
    }
}

@media (max-width: 480px) {
    .test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs .mud-tab {
        padding: 6px 6px;
        font-size: 0.65rem;
    }

    .test-mgmt-page[b-jcxkfgbemk]  .enhanced-tabs .mud-icon-root {
        font-size: 1rem;
    }
}
/* /Pages/Admin/Tools/GoogleSiteKitPage.razor.rz.scp.css */
/* Native .sitekit-page-scope wrapper carries the scope so ::deep reaches
   the MudContainer (.sitekit-page) and all MudBlazor descendants. */
[b-rpwaz5il20] .sitekit-page .mud-card {
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
}

[b-rpwaz5il20] .mud-button-root,
[b-rpwaz5il20] .mud-icon-button,
[b-rpwaz5il20] .mud-switch-button {
    min-height: 40px;
    min-width: 40px;
}

[b-rpwaz5il20] .mud-simple-table {
    max-width: 100%;
}

@media (max-width: 600px) {
    [b-rpwaz5il20] .sitekit-page {
        padding-inline: 12px;
    }

    .page-header[b-rpwaz5il20] {
        align-items: stretch;
    }

    .page-header[b-rpwaz5il20]  .mud-typography-h3 {
        font-size: 2rem;
        overflow-wrap: anywhere;
    }

    [b-rpwaz5il20] .mud-card-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    [b-rpwaz5il20] .mud-input-control,
    [b-rpwaz5il20] .mud-button-root {
        max-width: 100%;
    }
}
/* /Pages/Admin/Tools/LiveLogsPage.razor.rz.scp.css */
.logs-stats[b-1zuod0wx30] {
    background: var(--glytic-gradient-card);
}

.logs-hint[b-1zuod0wx30],
.log-muted[b-1zuod0wx30],
.time-cell[b-1zuod0wx30] {
    color: var(--glytic-text-muted);
}

.log-panel[b-1zuod0wx30] {
    overflow: hidden;
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-bg-dark);
}

.log-container[b-1zuod0wx30] {
    height: 60vh;
    overflow-y: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
}

.log-container[b-1zuod0wx30]::-webkit-scrollbar {
    width: 8px;
}

.log-container[b-1zuod0wx30]::-webkit-scrollbar-track {
    background: var(--glytic-bg-medium);
}

.log-container[b-1zuod0wx30]::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--glytic-border-hover);
}

.logs-table[b-1zuod0wx30] {
    width: 100%;
    border-collapse: collapse;
}

.log-row[b-1zuod0wx30] {
    border-bottom: 1px solid var(--glytic-border);
}

.log-row:hover[b-1zuod0wx30] {
    background: var(--glytic-bg-medium);
}

.log-row:focus-visible[b-1zuod0wx30] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

.log-row.log-error[b-1zuod0wx30] {
    background: rgba(var(--glytic-error-rgb), 0.1);
}

.log-row.log-warning[b-1zuod0wx30] {
    background: rgba(var(--glytic-score-mid-rgb), 0.1);
}

.copy-cell[b-1zuod0wx30] {
    width: 40px;
    padding: 2px;
    text-align: center;
}

.time-cell[b-1zuod0wx30],
.level-cell[b-1zuod0wx30],
.category-cell[b-1zuod0wx30],
.message-cell[b-1zuod0wx30] {
    padding: 4px 8px;
}

.time-cell[b-1zuod0wx30] {
    width: 85px;
    white-space: nowrap;
}

.level-cell[b-1zuod0wx30] {
    width: 60px;
}

.category-cell[b-1zuod0wx30] {
    width: 140px;
    overflow: hidden;
    color: var(--glytic-success);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-cell[b-1zuod0wx30] {
    color: var(--glytic-text-secondary);
}

.log-message[b-1zuod0wx30],
.log-exception[b-1zuod0wx30] {
    white-space: pre-wrap;
    word-break: break-word;
}

.log-message[b-1zuod0wx30] {
    margin: 0;
}

.log-exception[b-1zuod0wx30] {
    margin: 8px 0 0;
    padding: 8px;
    border-radius: 4px;
    background: rgba(var(--glytic-error-rgb), 0.1);
    color: var(--glytic-error);
}

.log-level[b-1zuod0wx30] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}

.level-trace[b-1zuod0wx30] { background: var(--glytic-bg-medium); color: var(--glytic-text-muted); }
.level-debug[b-1zuod0wx30] { background: var(--glytic-success); color: var(--glytic-bg-dark); }
.level-info[b-1zuod0wx30] { background: var(--glytic-primary); color: var(--glytic-bg-dark); }
.level-warn[b-1zuod0wx30] { background: var(--glytic-warning); color: var(--glytic-bg-dark); }
.level-error[b-1zuod0wx30] { background: var(--glytic-error); color: var(--glytic-bg-dark); }
.level-crit[b-1zuod0wx30] { background: var(--glytic-secondary); color: var(--glytic-text-primary); }

[b-1zuod0wx30] .log-copy-button {
    color: var(--glytic-text-secondary);
}

.empty-detail[b-1zuod0wx30] {
    font-size: 11px;
}

[b-1zuod0wx30] .mud-button-root,
[b-1zuod0wx30] .mud-icon-button,
[b-1zuod0wx30] .mud-chip {
    min-height: 40px;
}

[b-1zuod0wx30] .mud-icon-button {
    min-width: 40px;
}

@media (max-width: 600px) {
    .logs-page[b-1zuod0wx30] {
        padding-inline: 12px;
    }

    .maintenance-actions[b-1zuod0wx30] {
        justify-content: flex-start;
    }

    .logs-hint[b-1zuod0wx30] {
        flex-basis: 100%;
    }

    .log-container[b-1zuod0wx30] {
        height: 65vh;
    }

    .logs-table[b-1zuod0wx30],
    .logs-table tbody[b-1zuod0wx30] {
        display: block;
        width: 100%;
    }

    .log-row[b-1zuod0wx30] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 8px;
    }

    .copy-cell[b-1zuod0wx30] {
        grid-row: 1 / span 4;
        width: auto;
    }

    .time-cell[b-1zuod0wx30],
    .level-cell[b-1zuod0wx30],
    .category-cell[b-1zuod0wx30],
    .message-cell[b-1zuod0wx30] {
        display: grid;
        grid-column: 2;
        grid-template-columns: 72px minmax(0, 1fr);
        width: auto;
        min-height: 32px;
        padding: 4px;
        overflow: visible;
        white-space: normal;
    }

    .time-cell[b-1zuod0wx30]::before,
    .level-cell[b-1zuod0wx30]::before,
    .category-cell[b-1zuod0wx30]::before,
    .message-cell[b-1zuod0wx30]::before {
        color: var(--glytic-text-muted);
        content: attr(data-label);
        font-weight: 700;
    }
}
/* /Pages/Admin/Tools/RolePermissionsPage.razor.rz.scp.css */
/* Permission matrix table. Scoped to this page so the rules never leak to the
   public site (an inline <style> block in a .razor file is global). */
.permission-matrix[b-3299asul55] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.permission-matrix th[b-3299asul55],
.permission-matrix td[b-3299asul55] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--glytic-border);
    text-align: left;
    white-space: nowrap;
}

.permission-matrix th[b-3299asul55] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    color: var(--glytic-text-primary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.category-col[b-3299asul55] { min-width: 80px; }
.name-col[b-3299asul55] { min-width: 140px; }
.desc-col[b-3299asul55] { min-width: 200px; }

/* Higher specificity than ".permission-matrix th" so the center alignment wins
   without !important. */
.permission-matrix th.role-col[b-3299asul55] {
    text-align: center;
    min-width: 100px;
}

.check-cell[b-3299asul55] { text-align: center; }

.category-cell[b-3299asul55] {
    font-weight: 700;
    color: var(--glytic-primary);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.category-break td[b-3299asul55] {
    border-top: 2px solid var(--glytic-border);
    padding-top: 12px;
}

.desc-cell[b-3299asul55] {
    color: var(--glytic-text-secondary);
    font-size: 0.8rem;
}

/* Role hierarchy add-inclusion controls: wrap on narrow viewports. */
.inclusion-controls[b-3299asul55] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inclusion-controls .inclusion-select[b-3299asul55] {
    max-width: 200px;
    flex: 1 1 160px;
}
/* /Pages/Admin/Tools/SecurityDashboardPage.razor.rz.scp.css */
/* Native .security-page-scope wrapper carries the scope so ::deep reaches
   the MudContainer (.security-page) and all MudBlazor descendants. */
[b-u9vj7gqf6v] .security-metric-card {
    background: var(--glytic-card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--glytic-error-rgb), 0.2);
}

[b-u9vj7gqf6v] .compact-select {
    width: 130px;
}

[b-u9vj7gqf6v] .threat-filter {
    width: 200px;
}

[b-u9vj7gqf6v] .severity-filter {
    width: 150px;
}

[b-u9vj7gqf6v] .pattern-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    width: min(450px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
}

.table-scroll[b-u9vj7gqf6v] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: var(--glytic-primary) var(--glytic-bg-medium);
}

[b-u9vj7gqf6v] .mobile-scroll-hint {
    display: none;
    color: var(--glytic-text-muted);
}

[b-u9vj7gqf6v] .mud-button-root,
[b-u9vj7gqf6v] .mud-icon-button,
[b-u9vj7gqf6v] .mud-pagination-item {
    min-height: 40px;
    min-width: 40px;
}

@media (max-width: 600px) {
    [b-u9vj7gqf6v] .security-page {
        padding-inline: 12px;
    }

    .page-header[b-u9vj7gqf6v],
    .tab-actions[b-u9vj7gqf6v] {
        align-items: stretch;
    }

    .filter-actions[b-u9vj7gqf6v],
    .tab-actions[b-u9vj7gqf6v] {
        width: 100%;
    }

    [b-u9vj7gqf6v] .compact-select,
    [b-u9vj7gqf6v] .threat-filter,
    [b-u9vj7gqf6v] .severity-filter {
        flex: 1 1 145px;
        width: auto;
    }

    [b-u9vj7gqf6v] .mobile-scroll-hint {
        display: block;
        margin-bottom: 6px;
    }

    [b-u9vj7gqf6v] .responsive-tabs .mud-tabs-tabbar {
        overflow-x: auto;
        scrollbar-color: var(--glytic-primary) var(--glytic-bg-medium);
    }

    [b-u9vj7gqf6v] .mud-table-root .mud-table-cell {
        min-height: 40px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    [b-u9vj7gqf6v] .mud-table-root .mud-table-row {
        border: 1px solid var(--glytic-border);
        border-radius: var(--glytic-border-radius-small);
        margin-bottom: 10px;
    }
}
/* /Pages/Admin/Tools/TrafficMonitoringPage.razor.rz.scp.css */
/* Native .monitoring-page-scope wrapper carries the scope so ::deep reaches
   the MudContainer (.monitoring-page) and all MudBlazor descendants. */
[b-qhkynqs3cw] .traffic-metric-card {
    background: var(--glytic-card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glytic-border);
}

[b-qhkynqs3cw] .clickable-card {
    cursor: pointer;
    min-height: 112px;
    transition: border-color 0.15s ease;
}

[b-qhkynqs3cw] .clickable-card:hover {
    border-color: var(--glytic-border-hover);
}

[b-qhkynqs3cw] .clickable-card:focus-visible {
    border-color: var(--glytic-border-hover);
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

[b-qhkynqs3cw] .compact-select {
    width: 130px;
}

[b-qhkynqs3cw] .mud-button-root,
[b-qhkynqs3cw] .mud-icon-button {
    min-height: 40px;
    min-width: 40px;
}

[b-qhkynqs3cw] .responsive-tabs .mud-chip {
    min-height: 40px;
}

[b-qhkynqs3cw] .mud-table-root {
    max-width: 100%;
}

[b-qhkynqs3cw] .mud-chart {
    max-width: 100%;
}

@media (max-width: 600px) {
    [b-qhkynqs3cw] .monitoring-page {
        padding-inline: 12px;
    }

    .page-header[b-qhkynqs3cw] {
        align-items: stretch;
    }

    .page-actions[b-qhkynqs3cw] {
        width: 100%;
    }

    [b-qhkynqs3cw] .compact-select {
        flex: 1 1 140px;
        width: auto;
    }

    [b-qhkynqs3cw] .clickable-card {
        min-height: 104px;
    }

    [b-qhkynqs3cw] .responsive-tabs .mud-tabs-tabbar {
        overflow-x: auto;
        scrollbar-color: var(--glytic-primary) var(--glytic-bg-medium);
    }

    [b-qhkynqs3cw] .mud-table-root .mud-table-cell {
        min-height: 40px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    [b-qhkynqs3cw] .mud-table-root .mud-table-row {
        border: 1px solid var(--glytic-border);
        border-radius: var(--glytic-border-radius-small);
        margin-bottom: 10px;
    }
}
/* /Pages/Admin/UserManagementPage.razor.rz.scp.css */
/* Online presence dot. Uses the brand success token from quizforge.css. */
.qf-online-dot[b-vaaperoymd] {
    --qf-online: var(--glytic-success);
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--qf-online);
    box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0.6);
    animation: qf-pulse-b-vaaperoymd 2s infinite;
    vertical-align: middle;
}

@keyframes qf-pulse-b-vaaperoymd {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0.55);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(var(--glytic-success-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0);
    }
}

/* Mobile card list spacing. */
.qf-user-card-list[b-vaaperoymd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Ensure action buttons in the mobile list are comfortable touch targets. */
.qf-user-card-list[b-vaaperoymd]  .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}
/* /Pages/Career/CareerRoadmap.razor.rz.scp.css */
.career-page[b-omt29jhbih] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    min-height: calc(100vh - 64px - 3rem);
    min-height: calc(100dvh - 64px - 3rem);
}

.career-header[b-omt29jhbih] {
    text-align: center;
    margin-bottom: 28px;
}

.career-title[b-omt29jhbih] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: none;
    color: var(--glytic-text-primary, #fff);
    margin: 0 0 10px;
}

.career-subtitle[b-omt29jhbih] {
    font-size: 1rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    margin: 0 auto;
    max-width: 700px;
    line-height: 1.5;
}

/* One diagonal rule under the header */
.career-header[b-omt29jhbih]::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--qf-crimson);
    transform: rotate(-1.4deg);
}

/* Industry tabs -- squared, hairline, ember active */
.industry-tabs[b-omt29jhbih] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 28px;
}

/* Tabs recipe: no fill, muted label, selected = text-primary + 2px teal indicator. */
.industry-tab[b-omt29jhbih] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--glytic-text-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 6px 16px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    outline: none;
}

.industry-tab:hover[b-omt29jhbih] {
    color: var(--glytic-text-primary);
}

.industry-tab:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.industry-tab.active[b-omt29jhbih] {
    color: var(--glytic-text-primary);
    border-bottom-color: var(--glytic-primary);
}

/* Minimal live search above the path grid -- reuses the .qf-input cut-corner primitive
   (inset focus ring already handled by .qf-input:focus-visible in quizforge.css). */
.career-search[b-omt29jhbih] {
    max-width: 420px;
    margin: 0 auto 20px;
}

.career-search-input[b-omt29jhbih] {
    font-size: 0.9rem;
}

/* Path cards grid */
.career-grid[b-omt29jhbih] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

/* Cut-corner card with a bevel-following hairline (double-layer reveal). */
.career-card[b-omt29jhbih] {
    position: relative;
    isolation: isolate;
    padding: 20px;
    cursor: pointer;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border, #232B3A);
    transition: background 0.2s ease;
}

/* Interior at -1 inside the card's own stacking context (isolation above): every child,
   including Mud-rendered ones that carry no scope attribute, paints above it without a
   scoped child-lift rule (which compiles to *[b-scope] and misses Mud output). */
.career-card[b-omt29jhbih]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-card, #12151f);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.career-card:hover[b-omt29jhbih] {
    background: var(--glytic-border-hover, rgba(92,168,184,0.5));
}

.career-card:focus-visible[b-omt29jhbih] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 3px;
}

.career-card-header[b-omt29jhbih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.career-card-industry[b-omt29jhbih] {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--glytic-primary, #5CA8B8);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    padding: 3px 9px;
    clip-path: var(--qf-clip-btn);
}

/* Industry color-coding -- typographic, not clip-art */
.career-card-industry.ind-cloud[b-omt29jhbih]    { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb), 0.12); }
.career-card-industry.ind-security[b-omt29jhbih] { color: var(--qf-crimson-text); background: rgba(var(--qf-crimson-rgb), 0.12); }
.career-card-industry.ind-health[b-omt29jhbih]   { color: var(--qf-bone); background: rgba(239,231,210,0.10); }
.career-card-industry.ind-data[b-omt29jhbih]     { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb), 0.12); }
.career-card-industry.ind-business[b-omt29jhbih] { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb), 0.12); }
.career-card-industry.ind-network[b-omt29jhbih]  { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb), 0.12); }
.career-card-industry.ind-finance[b-omt29jhbih]  { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb), 0.12); }

.career-card-duration[b-omt29jhbih] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    font-variant-numeric: tabular-nums;
}

.career-card-title[b-omt29jhbih] {
    font-family: var(--glytic-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--glytic-text-primary, #fff);
    margin: 0 0 8px;
}

.career-card-desc[b-omt29jhbih] {
    font-size: 0.875rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    margin: 0 0 10px;
    line-height: 1.5;
}

.career-card-salary-row[b-omt29jhbih] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 12px;
}

.ccsr-val[b-omt29jhbih] {
    color: var(--glytic-primary);
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.ccsr-trend[b-omt29jhbih] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-primary);
    padding: 2px 7px;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

/* Cert chain mini-map on cards -- squared chips */
.career-card-chain[b-omt29jhbih] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.ccc-cert[b-omt29jhbih] {
    font-size: 0.7rem;
    padding: 2px 9px;
    clip-path: var(--qf-clip-btn);
    background: rgba(255,255,255,0.05);
    color: var(--glytic-text-secondary, rgba(255,255,255,0.7));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ccc-sep[b-omt29jhbih] {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--glytic-text-secondary, rgba(255,255,255,0.35));
    opacity: 0.6;
}

.ccc-more[b-omt29jhbih] {
    font-size: 0.68rem;
    color: var(--glytic-primary, #5CA8B8);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    padding: 2px 8px;
    clip-path: var(--qf-clip-btn);
    font-weight: 600;
    white-space: nowrap;
}

.career-card-footer[b-omt29jhbih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    border-top: 1px solid var(--glytic-border, rgba(255,255,255,0.08));
    padding-top: 12px;
}

.career-card-explore[b-omt29jhbih] {
    color: var(--forge-gold, #D07040);
    font-weight: 700;
}

/* Enrolled card highlight -- ember, badge on the uncut top-left corner */
.career-card.enrolled-card[b-omt29jhbih] {
    background: rgba(var(--forge-primary-rgb), 0.55);
}

.career-card.enrolled-card[b-omt29jhbih]::before {
    background: var(--glytic-bg-card, #12151f);
}

.enrolled-badge[b-omt29jhbih] {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--forge-gold, #D07040);
    color: var(--qf-ink, #070605);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    z-index: 2;
}

/* Loading / Empty states */
.career-loading[b-omt29jhbih],
.career-empty[b-omt29jhbih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
    gap: 20px;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.55));
    text-align: center;
}

.career-empty-glyphs[b-omt29jhbih] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.career-empty-glyphs .qf-glyph[b-omt29jhbih] {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.career-empty-bar[b-omt29jhbih] {
    width: 34px;
    height: 2px;
    background: var(--glytic-border, rgba(255,255,255,0.2));
}

.career-empty p[b-omt29jhbih] {
    font-size: 0.95rem;
    max-width: 340px;
    margin: 0;
}

@media (max-width: 600px) {
    .career-page[b-omt29jhbih] {
        min-height: calc(100vh - 56px - 2rem);
        min-height: calc(100dvh - 56px - 2rem);
    }
}

/* Path detail overlay */
.path-detail-overlay[b-omt29jhbih] {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 12, 0.78);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.path-detail-panel[b-omt29jhbih] {
    background: var(--glytic-bg-card, #12151f);
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    max-width: 1100px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.5));
}

.path-detail-header[b-omt29jhbih] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glytic-border, rgba(255,255,255,0.08));
}

.path-detail-header .qf-eyebrow[b-omt29jhbih] {
    display: block;
    margin-bottom: 6px;
    color: var(--glytic-primary);
}

.path-detail-header h2[b-omt29jhbih] {
    font-family: var(--glytic-font-heading);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--glytic-text-primary, #fff);
    margin: 0;
}

/* Icon button recipe. */
.path-close-btn[b-omt29jhbih] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    cursor: pointer;
    padding: 8px;
    outline: none;
    flex-shrink: 0;
    display: flex;
    transition: background-color .15s ease, color .15s ease;
}

.path-close-btn:hover[b-omt29jhbih] {
    background: rgba(var(--glytic-primary-rgb), .1);
    color: var(--glytic-text-primary, #fff);
}

.path-close-btn:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Post-enroll confirmation banner (the overlay's earned moment) */
.path-confirm-banner[b-omt29jhbih] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 20px;
    clip-path: var(--qf-clip-card);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-left: 3px solid var(--glytic-primary);
}

.path-confirm-mark[b-omt29jhbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.path-confirm-mark .qf-glyph[b-omt29jhbih] {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.path-confirm-body[b-omt29jhbih] {
    flex: 1;
    min-width: 180px;
}

.path-confirm-body .qf-eyebrow[b-omt29jhbih] {
    color: var(--glytic-primary);
}

.path-confirm-text[b-omt29jhbih] {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.7));
}

.path-confirm-actions[b-omt29jhbih] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Primary recipe: the one main action in the post-enroll banner. */
.path-confirm-cta[b-omt29jhbih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink, #070605);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-decoration: none;
    padding: 0 18px;
    border-radius: var(--qf-btn-radius);
    transition: background-color .15s ease;
}

.path-confirm-cta:hover[b-omt29jhbih] {
    background: var(--forge-gradient);
}

.path-confirm-cta:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Quiet recipe: secondary text action next to the primary CTA. */
.path-confirm-secondary[b-omt29jhbih] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    text-decoration: none;
}

.path-confirm-secondary:hover[b-omt29jhbih] {
    color: var(--glytic-text-primary, #fff);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.path-confirm-secondary:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Goal suggestion banner */
.goal-suggestion-banner[b-omt29jhbih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 18px;
    clip-path: var(--qf-clip-card);
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--glytic-primary);
}

.goal-suggestion-content[b-omt29jhbih] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.goal-suggestion-name[b-omt29jhbih] {
    font-size: 0.95rem;
    color: var(--glytic-text-primary, #fff);
}

.goal-suggestion-actions[b-omt29jhbih] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Primary recipe. The markup also carries the global .qf-cut-btn cut-corner primitive;
   this scoped rule (higher specificity via the component scope attribute) overrides it back
   to the flat button-system look, since the Composed Strike cut is retired on controls. */
.goal-set-btn[b-omt29jhbih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink, #070605);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
    outline: none;
}

.goal-set-btn:hover[b-omt29jhbih] {
    background: var(--forge-gradient);
}

.goal-set-btn:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Quiet recipe. */
.goal-dismiss-btn[b-omt29jhbih] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    outline: none;
    transition: color .15s ease;
}

.goal-dismiss-btn:hover[b-omt29jhbih] {
    color: var(--glytic-text-primary, #fff);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.goal-dismiss-btn:focus-visible[b-omt29jhbih] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .career-grid[b-omt29jhbih] {
        grid-template-columns: 1fr;
    }

    .career-title[b-omt29jhbih] {
        font-size: 1.85rem;
    }

    .path-detail-overlay[b-omt29jhbih] {
        padding: 8px;
    }

    .path-detail-panel[b-omt29jhbih] {
        max-height: 95vh;
        padding: 18px;
    }

    .path-confirm-actions[b-omt29jhbih] {
        width: 100%;
    }

    .path-confirm-cta[b-omt29jhbih] {
        flex: 1;
        text-align: center;
    }
}
/* /Pages/Career/PathVisualization.razor.rz.scp.css */
.path-viz[b-l2eyjs53hv] {
    padding: 8px 0;
}

.path-viz-desc[b-l2eyjs53hv] {
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 24px;
    max-width: 68ch;
}

/* Progress bar with an angled fill end (trajectory language) */
.path-progress-bar[b-l2eyjs53hv] {
    margin-bottom: 24px;
}

.path-progress-header[b-l2eyjs53hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.path-progress-pct[b-l2eyjs53hv] {
    font-size: 0.8rem;
    color: var(--glytic-primary, #5CA8B8);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.path-progress-track[b-l2eyjs53hv] {
    height: 8px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.path-progress-fill[b-l2eyjs53hv] {
    height: 100%;
    background: var(--glytic-primary, #5CA8B8);
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    transition: width 0.4s ease;
}

/* ============================================================
   Roadmap node flow -- horizontal (desktop), vertical (mobile)
   ============================================================ */

.path-nodes-scroll-wrap[b-l2eyjs53hv] {
    overflow-x: auto;
    overflow-y: visible;
    margin: 0 -8px 24px;
    padding: 4px 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--glytic-primary-rgb), 0.3) transparent;
}

.path-nodes-scroll-wrap[b-l2eyjs53hv]::-webkit-scrollbar {
    height: 5px;
}

.path-nodes-scroll-wrap[b-l2eyjs53hv]::-webkit-scrollbar-track {
    background: transparent;
}

.path-nodes-scroll-wrap[b-l2eyjs53hv]::-webkit-scrollbar-thumb {
    background: rgba(var(--glytic-primary-rgb), 0.3);
}

.path-nodes-flow[b-l2eyjs53hv] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 4px 12px;
    width: max-content;
}

/* ============================================================
   Node plate -- cut corners + bevel-following hairline
   ============================================================ */

.path-node[b-l2eyjs53hv] {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: 224px;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border, #232B3A);
    /* Single source of truth for the node interior fill; .path-viz-link::before
       reuses it so the link's interior matches the node wash it sits on. */
    --node-interior: var(--glytic-bg-card, #12151f);
    padding: 15px 16px 13px;
    transition: background 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.path-node[b-l2eyjs53hv]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--node-interior, var(--glytic-bg-card, #12151f));
    /* -1 under isolation (on .path-node): Mud-rendered children need no scoped lift rule. */
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}


.path-node:hover[b-l2eyjs53hv] {
    background: var(--glytic-border-hover, rgba(92,168,184,0.5));
}

/* Status washes */
.path-node--active[b-l2eyjs53hv] {
    background: var(--forge-gold, #D07040);
    --node-interior: color-mix(in srgb, var(--forge-primary) 12%, var(--glytic-bg-card, #12151f));
}

.path-node--completed[b-l2eyjs53hv] {
    background: rgba(var(--glytic-primary-rgb), 0.5);
    --node-interior: color-mix(in srgb, var(--glytic-primary) 10%, var(--glytic-bg-card, #12151f));
}

.path-node--locked[b-l2eyjs53hv] {
    opacity: 0.6;
}

/* Node top row: glyph + tier + status */
.path-node-top[b-l2eyjs53hv] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.node-glyph[b-l2eyjs53hv] {
    width: 14px;
    height: 14px;
}

/* Current-goal glyph: ember filled square */
.node-glyph--active[b-l2eyjs53hv] {
    border-color: var(--forge-gold, #D07040);
    background: var(--forge-gold, #D07040);
}

/* Tier badge -- restrained teal->ember->crimson heat ramp (no rainbow, no purple) */
.path-node-tier[b-l2eyjs53hv] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    clip-path: var(--qf-clip-btn);
}

.tier-badge-foundation[b-l2eyjs53hv]   { color: #8FD0DE; background: rgba(143,208,222,0.14); }
.tier-badge-core[b-l2eyjs53hv]         { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb),0.14); }
.tier-badge-associate[b-l2eyjs53hv]    { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb),0.14); }
.tier-badge-specialist[b-l2eyjs53hv]   { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb),0.16); }
.tier-badge-professional[b-l2eyjs53hv] { color: var(--forge-primary); background: rgba(var(--forge-primary-rgb),0.18); }
.tier-badge-expert[b-l2eyjs53hv]       { color: var(--qf-crimson-text); background: rgba(var(--qf-crimson-rgb),0.15); }

.path-viz-recert[b-l2eyjs53hv] {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.4));
}

/* Status badges */
.node-status-badge[b-l2eyjs53hv] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    clip-path: var(--qf-clip-btn);
}

.node-status-badge.status-completed[b-l2eyjs53hv]   { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb),0.14); }
.node-status-badge.status-active_goal[b-l2eyjs53hv] { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb),0.16); }
.node-status-badge.status-in_progress[b-l2eyjs53hv] { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb),0.12); }

/* Cert name */
.path-node-name[b-l2eyjs53hv] {
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--glytic-text-primary, #fff);
    margin: 0 0 8px;
    line-height: 1.12;
}

/* Vendor + exam code */
.path-node-meta[b-l2eyjs53hv] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.path-node-vendor[b-l2eyjs53hv] {
    font-size: 0.74rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
}

.path-viz-code[b-l2eyjs53hv] {
    font-size: 0.7rem;
    font-family: monospace;
    background: rgba(255,255,255,0.06);
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    padding: 1px 5px;
}

/* Study hours (eyebrow, no icon) */
.path-node-hours[b-l2eyjs53hv] {
    margin-bottom: 12px;
}

.path-node-hours .qf-eyebrow[b-l2eyjs53hv] {
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    font-variant-numeric: tabular-nums;
}

/* Salary micro-datum (teal) */
.path-node-salary[b-l2eyjs53hv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    padding: 8px 10px;
    background: rgba(var(--glytic-primary-rgb),0.06);
    clip-path: var(--qf-clip-btn);
    margin-bottom: 12px;
}

.path-node-salary--empty[b-l2eyjs53hv] {
    background: rgba(255,255,255,0.03);
}

.salary-amount[b-l2eyjs53hv] {
    font-family: var(--glytic-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--glytic-primary, #5CA8B8);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.salary-label[b-l2eyjs53hv] {
    font-size: 0.62rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.45));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.salary-trend[b-l2eyjs53hv] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    clip-path: var(--qf-clip-btn);
}

.salary-trend.trend-growing[b-l2eyjs53hv]   { color: var(--glytic-primary); background: rgba(var(--glytic-primary-rgb),0.15); }
.salary-trend.trend-stable[b-l2eyjs53hv]    { color: var(--forge-gold); background: rgba(var(--forge-primary-rgb),0.14); }
.salary-trend.trend-declining[b-l2eyjs53hv] { color: var(--qf-crimson-text); background: rgba(var(--qf-crimson-rgb),0.14); }

/* Node actions */
.path-node-actions[b-l2eyjs53hv] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    flex-wrap: wrap;
}

/* Primary recipe: the node's one action. Markup also carries the global .qf-cut-btn cut-corner
   primitive; this scoped rule (higher specificity via the component scope attribute) overrides
   it back to the flat button-system look, since the Composed Strike cut is retired on controls. */
.path-viz-link[b-l2eyjs53hv] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--qf-ink, #070605);
    text-decoration: none;
    padding: 0 14px;
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    border: 1px solid var(--forge-primary);
    background: var(--forge-gradient-btn);
    transition: background-color .15s ease;
    white-space: nowrap;
}

.path-viz-link:hover[b-l2eyjs53hv] {
    background: var(--forge-gradient);
}

.path-viz-link:focus-visible[b-l2eyjs53hv] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.path-viz-goal-badge[b-l2eyjs53hv] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--forge-gold, #D07040);
    background: rgba(var(--forge-primary-rgb),0.12);
    padding: 3px 9px;
    clip-path: var(--qf-clip-btn);
}

/* ============================================================
   Connectors -- trajectory bars
   ============================================================ */

.path-connector[b-l2eyjs53hv] {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    margin-top: 40px;
    align-self: flex-start;
}

.connector-line[b-l2eyjs53hv] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--glytic-primary-rgb),0.5), rgba(var(--glytic-primary-rgb),0.2));
}

.path-connector--done .connector-line[b-l2eyjs53hv] {
    background: var(--glytic-primary);
}

/* ============================================================
   Summary band -- bone salary plate + stat plates
   ============================================================ */

.path-viz-summary[b-l2eyjs53hv] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.path-viz-salary-plate[b-l2eyjs53hv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 14px 22px;
    min-width: 190px;
}

.salary-plate-value[b-l2eyjs53hv] {
    font-family: var(--glytic-font-heading);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 0.95;
    color: var(--qf-ink, #070605);
    font-variant-numeric: tabular-nums;
}

.salary-plate-region[b-l2eyjs53hv] {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--qf-bone-dim, #5B5648);
}

.path-viz-stats[b-l2eyjs53hv] {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: rgba(255,255,255,0.03);
    clip-path: var(--qf-clip-card);
    min-width: 260px;
}

.path-viz-summary-item[b-l2eyjs53hv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-value[b-l2eyjs53hv] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--glytic-primary, #5CA8B8);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Enroll button -- ember primary
   ============================================================ */

.path-viz-enroll-section[b-l2eyjs53hv] {
    display: flex;
    justify-content: center;
}

/* Primary recipe (page-level first action -> 48px). Markup also carries the global .qf-cut-btn
   cut-corner primitive; this scoped rule overrides it back to the flat button-system look. */
.path-enroll-btn[b-l2eyjs53hv] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink, #070605);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    cursor: pointer;
    transition: background-color .15s ease;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.path-enroll-btn:hover[b-l2eyjs53hv] {
    background: var(--forge-gradient);
}

.path-enroll-btn:focus-visible[b-l2eyjs53hv] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.path-enroll-btn:disabled[b-l2eyjs53hv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.path-enroll-btn.enrolled[b-l2eyjs53hv] {
    background: transparent;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    border: 1px solid var(--glytic-border, rgba(255,255,255,0.15));
}

.path-enroll-btn.enrolled:hover[b-l2eyjs53hv] {
    color: var(--qf-crimson-text);
    border-color: rgba(var(--qf-crimson-rgb),0.5);
    background: rgba(var(--qf-crimson-rgb),0.08);
}

/* ============================================================
   Mobile: vertical stacking, no horizontal scroll
   ============================================================ */

@media (max-width: 640px) {
    .path-nodes-scroll-wrap[b-l2eyjs53hv] {
        overflow-x: visible;
        margin: 0 0 20px;
        padding: 0;
    }

    .path-nodes-flow[b-l2eyjs53hv] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
    }

    .path-node[b-l2eyjs53hv] {
        width: 100%;
    }

    .path-connector[b-l2eyjs53hv] {
        width: 100%;
        height: 22px;
        margin: 0;
        justify-content: center;
        align-self: center;
    }

    .connector-line[b-l2eyjs53hv] {
        flex: none;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, rgba(var(--glytic-primary-rgb),0.5), rgba(var(--glytic-primary-rgb),0.2));
    }

    .path-connector--done .connector-line[b-l2eyjs53hv] {
        background: var(--glytic-primary);
    }

    .path-viz-summary[b-l2eyjs53hv] {
        flex-direction: column;
    }

    .path-viz-stats[b-l2eyjs53hv] {
        gap: 12px;
    }
}
/* /Pages/CheckoutSuccess.razor.rz.scp.css */
/* CheckoutSuccess -- premium post-payment experience (Composed Strike).
   Three deliberate stages: a full-viewport branded processing takeover, a bone
   welcome poster, and a calm "taking longer" / invalid fallback. Tokens only,
   no purple, no new !important. The boot-splash emblem classes (qf-boot-*) are
   global (app.css) and reused directly in markup. */

/* ============================ PROCESSING ============================
   Full-screen takeover so nothing else (nav, prior page) shows during polling.
   z-index sits above the app bar (~1250) but below MudBlazor dialogs (~1400). */
.cs-processing[b-qmr6tvwabm] {
    position: fixed;
    inset: 0;
    /* Above the app bar so the processing takeover truly owns the screen; below the
       SignalR reconnect recovery loader (z-index 2400). */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--glytic-bg-dark);
    animation: cs-fade-in-b-qmr6tvwabm 0.4s ease-out;
}

.cs-emblem[b-qmr6tvwabm] {
    /* Reserve the orbit footprint so the emblem never reflows as the ring paints. */
    width: 176px;
    height: 176px;
}

.cs-emblem--calm[b-qmr6tvwabm] {
    width: 120px;
    height: 120px;
    margin-bottom: 0.25rem;
}

.cs-processing-title[b-qmr6tvwabm] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--qf-ink-on-dark, var(--glytic-text-primary));
    margin: 0;
}

.cs-processing-sub[b-qmr6tvwabm] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--glytic-text-muted);
    margin: 0;
    max-width: 34ch;
}

/* ============================ WELCOME =============================== */
.checkout-success-page[b-qmr6tvwabm] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 72vh;
    padding: 2.5rem 1rem;
}

/* The premium beat: a bone poster, smaller than the results poster but the same
   language -- 30px angular cut, drop-shadow through the border, FORGED stamp. */
.cs-welcome[b-qmr6tvwabm] {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: clamp(1.75rem, 5vw, 2.75rem);
    /* qf-bone-plate supplies background + ink + clip-path; override the cut to the
       larger poster corner to match the results poster. */
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
    animation: cs-rise-b-qmr6tvwabm 0.5s ease-out;
}

.cs-welcome-eyebrow[b-qmr6tvwabm] {
    display: block;
    margin-bottom: 0.6rem;
}

.cs-welcome-headrow[b-qmr6tvwabm] {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    flex-wrap: wrap;
}

.cs-welcome-title[b-qmr6tvwabm] {
    font-family: var(--glytic-font-heading);
    font-weight: 400;
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--qf-ink);
    margin: 0;
}

/* qf-stamp supplies the double-border crimson stamp; size it for this poster. */
.cs-welcome-stamp[b-qmr6tvwabm] {
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
}

.cs-welcome-body[b-qmr6tvwabm] {
    margin: 1rem 0 0;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(var(--qf-ink-rgb), 0.88);
}

.cs-welcome-cta[b-qmr6tvwabm] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.cs-welcome-continue[b-qmr6tvwabm] {
    margin: 1.1rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qf-bone-dim);
}

/* ===================== CARD (taking-longer / invalid) ============== */
.cs-card[b-qmr6tvwabm] {
    width: 100%;
    max-width: 480px;
    text-align: center;
    padding: 2.5rem 2rem;
    position: relative;
    isolation: isolate;
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: cs-rise-b-qmr6tvwabm 0.5s ease-out;
}

/* Double-layer reveal: element bg = hairline border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.cs-card[b-qmr6tvwabm]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.cs-card .cs-emblem--calm[b-qmr6tvwabm] {
    margin-bottom: 0.5rem;
}

.cs-card-title[b-qmr6tvwabm] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--glytic-text-primary);
    margin: 0;
}

.cs-card-title--error[b-qmr6tvwabm] {
    color: var(--glytic-error);
}

.cs-card-sub[b-qmr6tvwabm] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--glytic-text-muted);
    margin: 0;
    max-width: 40ch;
}

.cs-card-actions[b-qmr6tvwabm] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.75rem;
}

/* ===================== CLAIM ACCOUNT (anonymous buyer) ===================== */
.cs-claim-sent[b-qmr6tvwabm] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--glytic-text-primary);
    margin: 0;
    max-width: 40ch;
}

.cs-claim-error[b-qmr6tvwabm] {
    font-size: 0.85rem;
    color: var(--glytic-error);
    margin: 0;
}

/* Lasting way in after the 15-minute emailed link: plain sentence + inline link to /login. */
.cs-claim-hint[b-qmr6tvwabm] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--glytic-text-muted);
    margin: 0;
    max-width: 40ch;
}

.cs-claim-hint a[b-qmr6tvwabm] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================ BUTTONS ============================== */
.cs-btn[b-qmr6tvwabm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    min-height: 44px;
    padding: 0.7rem 1.5rem;
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-btn--primary[b-qmr6tvwabm] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.cs-btn--primary:hover[b-qmr6tvwabm] {
    background: var(--forge-gradient);
}

.cs-btn--primary:disabled[b-qmr6tvwabm] {
    background: var(--qf-disabled-bg);
    border-color: var(--qf-disabled-bg);
    color: var(--qf-disabled-fg);
    cursor: default;
}

/* Ghost sits on the bone poster (ink outline) and on the dark card (teal outline).
   The welcome poster scopes its own ghost below; this is the dark-card default.
   Real border, no double-layer reveal (retired with the angular clip-path). */
.cs-btn--ghost[b-qmr6tvwabm] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.cs-btn--ghost:hover[b-qmr6tvwabm] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

/* Ghost on the bone poster: ink outline, not teal (teal is illegible on bone). */
.cs-welcome .cs-btn--ghost[b-qmr6tvwabm] {
    border-color: var(--qf-ink);
    color: var(--qf-ink);
}

.cs-welcome .cs-btn--ghost:hover[b-qmr6tvwabm] {
    border-color: var(--qf-ink);
    background: rgba(var(--qf-ink-rgb), 0.08);
}

.cs-btn:focus-visible[b-qmr6tvwabm] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* ============================ MOTION ============================== */
@keyframes cs-fade-in-b-qmr6tvwabm {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cs-rise-b-qmr6tvwabm {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-processing[b-qmr6tvwabm],
    .cs-welcome[b-qmr6tvwabm],
    .cs-card[b-qmr6tvwabm] {
        animation: none;
    }

    .cs-btn[b-qmr6tvwabm] {
        transition: none;
    }
}

@media (max-width: 520px) {
    .cs-welcome-cta[b-qmr6tvwabm],
    .cs-card-actions[b-qmr6tvwabm] {
        flex-direction: column;
    }

    .cs-btn[b-qmr6tvwabm] {
        width: 100%;
    }
}
/* /Pages/Components/AIDebrief.razor.rz.scp.css */
.debrief-header[b-45395ylk3o] {
    display: flex;
    align-items: center;
}

[b-45395ylk3o] .debrief-title {
    font-weight: 600;
    color: var(--glytic-primary);
}

.debrief-narrative[b-45395ylk3o] {
    line-height: 1.6;
    color: var(--glytic-text-primary);
    /* Long unbroken tokens (exam codes, URLs) must wrap rather than force horizontal
       scroll on narrow phones -- matches the tutor thread's overflow convention. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.debrief-focus-areas[b-45395ylk3o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.focus-area-row[b-45395ylk3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.focus-area-info[b-45395ylk3o] {
    flex: 1;
    min-width: 0;
}

.focus-area-topic[b-45395ylk3o] {
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.focus-area-rec[b-45395ylk3o] {
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.debrief-insight[b-45395ylk3o] {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border-radius: 0 8px 8px 0;
}

.insight-text[b-45395ylk3o] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.debrief-ctas[b-45395ylk3o] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Needs ::deep -- MudButton's Class lands on the component root, which scoped CSS otherwise
   never reaches. Matches root layer's two-class specificity so it wins by load order. */
[b-45395ylk3o] .mud-button-root.debrief-cta-btn {
    min-height: 48px;
}

@media (max-width: 768px) {
    .debrief-ctas[b-45395ylk3o] {
        flex-direction: column;
    }

    [b-45395ylk3o] .mud-button-root.debrief-cta-btn {
        width: 100%;
        min-height: 48px;
    }

    .focus-area-row[b-45395ylk3o] {
        padding: 0.5rem 0.6rem;
    }
}
/* /Pages/Components/AiTutorPanel.razor.rz.scp.css */
/*
 * AiTutorPanel — scoped styles
 * All design tokens from quizforge.css :root.
 * No hardcoded brand colors; rgba() only for glows/overlays where
 * no exact token exists (noted inline).
 * No !important except inside prefers-reduced-motion reset.
 *
 * States:
 *   .tutor--signin     inline sign-in card
 *   .tutor--dock       pre-engagement launcher (mobile: fixed glowing bottom bar)
 *   .tutor--collapsed  minimized-with-conversation dock (mobile: fixed bottom bar)
 *   .is-expanded       active conversation (mobile: full bottom sheet)
 */

/* ========================================
   ROOT PANEL
   ======================================== */

.tutor[b-w977mut586] {
    position: relative;
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--glytic-surface);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition);
}

.tutor:focus-within[b-w977mut586] {
    border-color: var(--glytic-border-hover);
    box-shadow: 0 0 24px -4px rgba(92, 168, 184, 0.45);
}

/* ========================================
   AMBIENT BACKGROUND OVERLAY (radial gradients)
   Uses rgba() because these are atmospheric glows, no token exists.
   ======================================== */

.tutor-overlay[b-w977mut586] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 18%, rgba(92, 168, 184, 0.16), transparent 60%),
        radial-gradient(circle at 85% 80%, rgba(var(--forge-primary-rgb), 0.16), transparent 65%);
    z-index: 0;
}

/* All direct children sit above the overlay */
.tutor > *[b-w977mut586] {
    position: relative;
    z-index: 1;
}

/* ========================================
   BRAND SPARK ORB
   Gradient disc + white SVG sparkle. Shared by dock bars and sheet header.
   ======================================== */

.tutor-orb[b-w977mut586] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--glytic-gradient-text);
    box-shadow:
        0 0 10px rgba(92, 168, 184, 0.45),
        0 0 18px -4px rgba(var(--forge-primary-rgb), 0.4); /* brand glow -- no exact token */
}

.tutor-orb svg[b-w977mut586] {
    display: block;
}

/* ========================================
   HEADER ROW
   ======================================== */

.tutor-head[b-w977mut586] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

/* Sheet title: brand gradient wordmark next to the orb. */
.tutor-title[b-w977mut586] {
    font-family: var(--glytic-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--glytic-primary); /* fallback when background-clip unsupported */
    background: var(--glytic-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* Premium / pro tier badge -- sits next to the title; the close button takes the
   far-right slot via margin-left:auto. */
.tutor-tier[b-w977mut586] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--glytic-secondary);
    border: 1px solid rgba(var(--forge-primary-rgb), 0.4);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ========================================
   CONVERSATION THREAD
   ======================================== */

.tutor-thread[b-w977mut586] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
}

/* Reading size: 15px / 1.55 -- assistant prose, not chat-bubble text. */
.tutor-msg[b-w977mut586] {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
    /* Break long unbroken tokens (URLs, hashes, commands) so they never force
       horizontal scroll, especially inside the mobile bottom sheet. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The learner's own message: a quiet right-aligned pill (tonal surface, hairline). */
.tutor-msg--user[b-w977mut586] {
    align-self: flex-end;
    max-width: 80%;
    background: var(--qf-surface-tonal);
    border: 1px solid var(--qf-line);
    border-radius: 16px;
    padding: 0.4rem 0.85rem;
    color: var(--glytic-text-primary);
    font-size: 0.875rem;
}

/* Assistant text: no bubble, no accent rail -- plain prose on the surface, the way a
   modern assistant reads. The user pill on the right is what distinguishes the voices. */
.tutor-msg--assistant[b-w977mut586] {
    color: var(--glytic-text-primary);
    padding: 0.1rem 0;
}

/* The in-flight message reserves the skeleton's height (3 x 0.7rem + 2 x 0.35rem) so the
   first token replaces the shimmer without a layout shift. */
.tutor-msg--streaming[b-w977mut586] {
    min-height: 2.8rem;
}

/* ========================================
   STREAMING CARET
   Drawn by CSS on the trailing (still-open) block only; committed blocks never carry it.
   ======================================== */

/* ::deep: the p/li come from a MarkupString and carry no scope attribute, so the inner part
   of the selector must stay unscoped or the caret never matches. */
.tutor-msg[b-w977mut586]  .tutor-msg-tail > :last-child:not(ul):not(ol)::after,
.tutor-msg[b-w977mut586]  .tutor-msg-tail > :is(ul, ol):last-child > li:last-child::after,
.tutor-msg-tail:empty[b-w977mut586]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: -0.15em;
    margin-left: 2px;
    background: var(--glytic-primary);
    animation: tutor-blink-b-w977mut586 1s step-end infinite;
    will-change: opacity;
}

@keyframes tutor-blink-b-w977mut586 {
    50% { opacity: 0; }
}

/* ========================================
   SKELETON LOADING (3 shimmer lines)
   ======================================== */

.tutor-skeleton[b-w977mut586] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tutor-skeleton span[b-w977mut586] {
    display: block;
    height: 0.7rem;
    border-radius: 6px;
    /* Shimmer uses transparent/semi-transparent whites -- no exact token */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    background-size: 200% 100%;
    animation: tutor-shimmer-b-w977mut586 1.2s infinite;
    will-change: background-position;
}

.tutor-skeleton span:nth-child(2)[b-w977mut586] { width: 85%; }
.tutor-skeleton span:nth-child(3)[b-w977mut586] { width: 60%; }

@keyframes tutor-shimmer-b-w977mut586 {
    to { background-position: -200% 0; }
}

/* ========================================
   ACTION CHIPS
   ======================================== */

.tutor-chips[b-w977mut586] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

/* Filter-chip recipe (button system 2026-09-23): suggestion chips are selectable actions. */
.tutor-chip[b-w977mut586] {
    min-height: 32px;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    color: var(--glytic-text-secondary);
    background: transparent;
    border: 1px solid var(--qf-line);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    font-family: var(--glytic-font-body);
    white-space: nowrap;
}

.tutor-chip:hover:not(:disabled)[b-w977mut586] {
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    color: var(--glytic-text-primary);
}

.tutor-chip:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.tutor-chip:disabled[b-w977mut586] {
    opacity: 0.45;
    cursor: default;
}

/* Already-answered suggestion for this question: distinct from the transient
   streaming-disabled state so it reads as "done", not "busy". */
.tutor-chip.is-used[b-w977mut586] {
    opacity: 0.6;
    cursor: default;
    border-style: dashed;
}

/* ========================================
   PRIMARY CTA (base; the dock button resets most of this)
   ======================================== */

/* Primary recipe (button system 2026-09-23): the dock-btn combo below resets most of this
   for the launcher bar; a bare .tutor-cta still needs to read as the main action. */
.tutor-cta[b-w977mut586] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-md);
    margin-top: 0.4rem;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--qf-btn-radius);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    font-family: var(--glytic-font-body);
    transition: background-color 0.15s ease;
}

.tutor-cta:hover[b-w977mut586] {
    background: var(--forge-gradient);
}

.tutor-cta:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* ========================================
   DOCK BARS (launcher + collapsed resume)
   Desktop: a minimal bar pinned to the viewport bottom (desktop block below).
   Mobile: the orb FAB (mobile block below).
   ======================================== */

.tutor--dock[b-w977mut586],
.tutor--collapsed[b-w977mut586] {
    padding: 0.55rem 0.8rem;
}

/* The whole bar is one tap target. Resets the gradient-pill .tutor-cta look
   (kept on that class for the sign-in CTA and E2E selector stability). */
.tutor-cta.tutor-dock-btn[b-w977mut586] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.3rem 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--glytic-text-primary);
    text-align: left;
    border-radius: var(--glytic-border-radius-small);
    box-shadow: none;
}

.tutor-cta.tutor-dock-btn:hover[b-w977mut586] {
    background: transparent;
    box-shadow: none;
}

.tutor-cta.tutor-dock-btn:active[b-w977mut586] {
    transform: scale(0.99);
}

/* Inline dock card invites on hover (desktop). */
.tutor--dock:hover[b-w977mut586],
.tutor--collapsed:hover[b-w977mut586] {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.tutor-dock-btn .tutor-orb[b-w977mut586] {
    width: 32px;
    height: 32px;
}

/* Label + hook on one line: "Ask the AI tutor" then the situational hook, muted. */
.tutor-dock-text[b-w977mut586] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.tutor-dock-title[b-w977mut586] {
    flex: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.tutor-dock-hook[b-w977mut586] {
    font-size: 0.85rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Guest quota, as small as it can be read: "2 left". The full sentence is the tooltip. */
.tutor-quota-pill[b-w977mut586] {
    flex: none;
    margin-left: auto;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--qf-line);
    background: var(--qf-surface-tonal);
    color: var(--glytic-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Spacer keeps page content (Next button, rating row) reachable above the
   fixed mobile dock. Inert on desktop where the dock is inline. */
.tutor-spacer[b-w977mut586] {
    display: block;
    height: 0;
}

/* ========================================
   FREEFORM INPUT ROW
   ======================================== */

.tutor-input[b-w977mut586] {
    position: relative; /* anchors the suggestions popover */
    display: flex;
    gap: 0.45rem;
    margin-top: 0.65rem;
    align-items: center;
}

/* Suggestions popover: opens above the input while it is focused and empty; Escape, blur
   or typing closes it. Same chips as before, no longer a permanent rail in the footer. */
.tutor-suggest[b-w977mut586] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 4;
    padding: 0.5rem;
    background: var(--tutor-solid, var(--glytic-surface));
    border: 1px solid var(--qf-line);
    border-radius: var(--glytic-border-radius-small);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); /* lift over the thread -- no exact token */
}

.tutor-suggest .tutor-chips[b-w977mut586] {
    margin-top: 0;
}

/* Keyboard-selected suggestion (ArrowUp/ArrowDown; Enter sends it). */
.tutor-chip.is-active:not(:disabled)[b-w977mut586] {
    border-color: rgba(var(--glytic-primary-rgb), 0.6);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
}

.tutor-input-field[b-w977mut586] {
    flex: 1;
    min-width: 0;
    background: rgba(24, 30, 42, 0.8); /* design-token input_bg -- no CSS variable */
    border: 1px solid var(--glytic-border);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    color: var(--glytic-text-primary);
    font-size: 0.875rem;
    font-family: var(--glytic-font-body);
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition);
}

.tutor-input-field[b-w977mut586]::placeholder {
    color: var(--glytic-text-muted);
}

.tutor-input-field:focus[b-w977mut586] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(92, 168, 184, 0.25); /* design-token input_focus -- no CSS variable */
    border-color: var(--glytic-border-hover);
}

.tutor-input-field:disabled[b-w977mut586] {
    opacity: 0.5;
    cursor: default;
}

/* Primary send action (button system 2026-09-23): ember fill, ink icon; kept circular as
   the input row's compact icon-only affordance. */
.tutor-send[b-w977mut586] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border: 1px solid var(--forge-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.tutor-send svg[b-w977mut586] {
    display: block;
    margin-left: 1px; /* optically center the arrow */
}

.tutor-send:hover:not(:disabled)[b-w977mut586] {
    background: var(--forge-gradient);
}

.tutor-send:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.tutor-send:disabled[b-w977mut586] {
    opacity: 0.45;
    cursor: default;
}

/* ========================================
   UPSELL / ERROR BANNER
   ======================================== */

.tutor-upsell[b-w977mut586] {
    margin-top: 0.65rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--glytic-border-radius-small);
    border: 1px solid var(--forge-border);
    background: var(--forge-surface);
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}

.tutor-upsell a[b-w977mut586] {
    color: var(--forge-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tutor-upsell a:hover[b-w977mut586] {
    opacity: 0.85;
}

/* Guest limit CTA: a link-styled button (opens the auth dialog, no navigation). Teal, since
   it is a link inside prose (button system 2026-09-23: ember text is reserved off of prose). */
.tutor-upsell-link[b-w977mut586] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--glytic-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tutor-upsell-link:hover[b-w977mut586] {
    color: var(--glytic-text-primary);
}

.tutor-upsell-link:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Guest quota pill at the right end of the input row (the row's gap spaces it). */
.tutor-input .tutor-quota-pill[b-w977mut586] {
    margin-left: 0;
}

/* Anonymous footer once the guest's free-text quota is spent: the input row's slot
   holds a full-width sign-up pill instead. */
/* Secondary recipe (button system 2026-09-23): alternative action, teal hairline. */
.tutor-signup-pill[b-w977mut586] {
    width: 100%;
    min-height: var(--qf-btn-h-md);
    border: 1px solid var(--glytic-border-hover);
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tutor-signup-pill:hover[b-w977mut586] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.tutor-signup-pill:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* One-time FAB explainer callout. Hidden by default (desktop's dock bar already
   says what it is); the mobile block positions it above the orb FAB. */
.tutor-callout[b-w977mut586] {
    display: none;
}

/* ========================================
   DESKTOP (769px+): COLLAPSED LAUNCHER BAR
   Starts at 769px, not 601px: between 601 and 768px body.quiz-focus .quiz-dock is itself a
   fixed bottom bar (Quiz.razor.css, z 1150) and a fixed launcher (z 1200) covered its
   Submit/Next. Tablets in that band keep the base inline launcher card under the question.
   The short coarse-pointer landscape arm (e.g. 800x375) still gets the FAB: the mobile block
   below is declared later and wins, exactly as it already does for the expanded dock.
   ======================================== */

@media (min-width: 769px) {
    /* Collapsed launcher / resume: a 52px bar pinned to the viewport bottom, opaque, one
       hairline on top, no shadow, no radius -- it reads as part of the window chrome, not a
       card. The page reserves 60px under its content while the bar is present
       (body.qf-tutor-bar, quizforge.css), so Next and the disclaimer are never under it. */
    .tutor.tutor--dock[b-w977mut586],
    .tutor.tutor--collapsed[b-w977mut586] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 100%;
        max-width: 1240px;
        height: 52px;
        box-sizing: border-box;
        padding: 0 0.6rem;
        display: flex;
        align-items: center;
        --tutor-solid: #181E2A; /* opaque form of --glytic-surface */
        background: var(--tutor-solid);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-top: 1px solid var(--glytic-border);
        border-radius: 0;
        box-shadow: none;
        z-index: 1200;
    }

    .tutor.tutor--dock:hover[b-w977mut586],
    .tutor.tutor--collapsed:hover[b-w977mut586],
    .tutor.tutor--dock:focus-within[b-w977mut586],
    .tutor.tutor--collapsed:focus-within[b-w977mut586] {
        border-color: var(--glytic-border-hover);
        box-shadow: none;
    }

    .tutor.tutor--dock .tutor-dock-btn[b-w977mut586],
    .tutor.tutor--collapsed .tutor-dock-btn[b-w977mut586] {
        height: 100%;
        padding: 0 0.4rem;
        border-radius: var(--qf-btn-radius);
    }

    .tutor.tutor--dock .tutor-orb[b-w977mut586],
    .tutor.tutor--collapsed .tutor-orb[b-w977mut586] {
        width: 26px;
        height: 26px;
    }
}

/* ========================================
   DESKTOP (601px+): LOWER-HALF DOCKED PANEL
   The open conversation snaps to the lower half of the viewport as a fixed, resizable
   dock (default 50vh; drag the top bar or ArrowUp/ArrowDown between 25vh and 80vh). The
   question stays visible and interactive in the upper half -- no scrim. Declared BEFORE
   the mobile block so a short landscape phone (which matches both media queries) still
   falls back to the bottom-sheet treatment.
   ======================================== */

@media (min-width: 601px) {
    .tutor.is-expanded[b-w977mut586] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto; /* centre within left:0/right:0 at the max-width below */
        width: 100%;
        max-width: 1240px; /* aligns with the MudContainer Large quiz column */
        box-sizing: border-box;
        /* Height persists via --qf-tutor-h (js/qf-tutor-resize.js); 50vh default before JS. */
        height: 50vh;
        height: var(--qf-tutor-h, 50dvh);
        max-height: 80vh;
        max-height: 80dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1200; /* above page content, below MudDialog (1400) */
        margin-top: 0;
        padding-top: 0;
        /* Opaque chrome fill so sticky header/footer/handle hide the scrolling thread. */
        --tutor-solid: #181E2A; /* opaque form of --glytic-surface */
        /* Opaque for the whole open session, not only while .is-streaming: the backdrop blur
           on a fixed surface forced a full recomposite per streamed frame (the jank), the
           sticky grip/head/foot are already --tutor-solid so a translucent thread band read
           as a seam between opaque chrome, and toggling the blur back on at turn end popped.
           Mobile has been opaque for the same reasons. */
        background: var(--tutor-solid);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 14px 14px 0 0;
        border-bottom: none;
        /* Flush to the bottom: the only shadow is the upward lift over the page. */
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
        animation: tutor-rise-b-w977mut586 var(--glytic-transition) both;
        will-change: transform, opacity;
        /* No bottom padding on the scroll container: a sticky footer cannot leave its
           parent's content box, so the base 1rem padding became a transparent strip
           BELOW the input row where the thread scrolled into view (owner report
           2026-09-26, the same bleed the mobile sheet fixed earlier). The opaque
           ::after strip below carries that 1rem instead. */
        padding-bottom: 0;
        /* Column flex so a short conversation still pins the footer to the bottom edge
           instead of leaving a void under it; sticky keeps working once it overflows. */
        display: flex;
        flex-direction: column;
    }

    .tutor.is-expanded .tutor-thread[b-w977mut586] {
        flex: 1 0 auto;
    }

    /* Opaque bottom strip: the last flex item, sticky at the very bottom, so the footer
       (or the upsell/retry banner when that is last) always has solid surface under it. */
    .tutor.is-expanded[b-w977mut586]::after {
        content: "";
        display: block;
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        height: 1rem;
        background: var(--tutor-solid);
        z-index: 3;
    }

    .tutor.is-expanded:focus-within[b-w977mut586] {
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    }

    /* Footer is the input row alone now (chips moved to the focus popover). */
    .tutor.is-expanded .tutor-foot .tutor-input[b-w977mut586] {
        margin-top: 0;
    }

    /* Top resize bar: full-width grab handle with a centred bone/line motif. */
    .tutor.is-expanded .tutor-grip[b-w977mut586] {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        width: 100%;
        height: 22px;
        margin: 0;
        padding: 0;
        border: none;
        background: var(--tutor-solid);
        border-radius: 14px 14px 0 0;
        cursor: ns-resize;
        touch-action: none;
    }

    .tutor.is-expanded .tutor-grip[b-w977mut586]::after {
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 46px;
        height: 4px;
        border-radius: 999px;
        background: var(--glytic-border-hover);
    }

    /* Inset focus ring (an outline would be clipped by the rounded top corners). */
    .tutor.is-expanded .tutor-grip:focus-visible[b-w977mut586] {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--glytic-border-hover);
    }

    /* Pin the header (close X) and footer (chips + input) so both stay reachable at any height. */
    .tutor.is-expanded .tutor-head[b-w977mut586] {
        position: sticky;
        top: 22px;
        z-index: 3;
        margin-top: 0;
        margin-bottom: 0.4rem;
        padding-top: 0.35rem;
        padding-bottom: 0.5rem;
        background: var(--tutor-solid);
    }

    .tutor.is-expanded .tutor-foot[b-w977mut586] {
        position: sticky;
        bottom: 1rem; /* rests on the opaque ::after strip */
        z-index: 3;
        background: var(--tutor-solid);
        padding-top: 0.5rem;
        padding-bottom: 0.4rem;
        margin-top: 0.4rem;
    }

    /* When the upsell/error banner replaces the footer it becomes the last element. */
    .tutor.is-expanded .tutor-upsell[b-w977mut586] {
        position: sticky;
        bottom: 1rem;
        background: var(--tutor-solid);
        margin-bottom: 0;
    }
}

/* ========================================
   MOBILE: BOTTOM SHEET
   Activates on .is-expanded (conversation open).
   Pure CSS -- no viewport JS required.
   ======================================== */

/* Landscape phones (e.g. 800x375) are wider than 600px but short: the second query keeps
   the bottom-sheet/FAB treatment instead of reverting to the inline desktop panel (QA4-5). */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    .tutor.is-expanded[b-w977mut586] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        /* Must sit ABOVE the MudBlazor AppBar (--mud-zindex-appbar: 1300). At an equal 1300
           the header pokes through the scrim and stays tappable, so a tap meant for a chip
           lands on a header nav link instead -- the "click pill -> clicks header link" bug.
           1311 beats the AppBar (1300) while staying below MudDialog (1400). */
        z-index: 1311;
        /* dvh tracks the *visible* viewport, so the sheet (and its sticky input) is never
           hidden behind the mobile address bar the way static vh allows. vh is the fallback.
           Opens near-fullscreen (92dvh default) now that the sheet restates the question inside
           it -- the learner no longer needs the quiz card visible behind it, so the tutor gets
           the room. A thin sliver of the quiz stays visible at the top so it still reads as a
           sheet, not a page. Height persists via --qf-tutor-h (js/qf-tutor-resize.js); drag the
           top handle to resize between 40dvh and 95dvh. */
        height: 92vh;
        height: var(--qf-tutor-h, 92dvh);
        max-height: 95vh;
        max-height: 95dvh;
        overflow-y: auto;
        /* Keep scroll inside the sheet -- never chain to / scroll the page behind it. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Solid fill on mobile (a scrim sits behind it anyway). Opaque so the sticky grip,
           header, and footer fully hide the thread text scrolling under them -- no bleed. */
        --tutor-solid: #181E2A; /* opaque form of --glytic-surface rgba(24,30,42,0.85) */
        background: var(--tutor-solid);
        padding-top: 0; /* the grip handle provides the top inset now */
        /* Hide the scroll track -- a visible scrollbar reads as broken inside the sheet. */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Drop the frosted blur on mobile: backdrop-filter on a scrolling fixed element
           flickers/repaints badly on mobile browsers. The 0.85-opaque surface over the dark
           scrim already reads solid. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 16px 16px 0 0;
        /* Ember hairline crown: with the scrim blur/dim gone, this thin top rule (plus the
           drop-shadow below) is what separates the sheet from the visible question behind it. */
        border-top: 1px solid var(--forge-border);
        /* No bottom padding: the sticky footer is the last element and carries the
           safe-area inset itself. Sheet padding here would create a transparent strip
           BELOW the sticky footer where thread text scrolls into view -- visible bleed. */
        padding-bottom: 0;
        /* The desktop dock (601px+) is a flex column with an opaque ::after strip; the
           short-landscape arm of this block also matches 601px+, so restore the sheet's
           block flow here and drop the strip (the sheet's footer sits at bottom: 0). */
        display: block;
        /* Entrance: a fixed-offset slide + fade. Earlier this used translateY(100%), but on a
           fixed, overflow:auto sheet whose height grows as the answer streams in, 100% (of the
           element's own height) recomputes mid-animation and the sheet jumps -- "starts to work
           then breaks". A fixed px offset is height-independent, so the rise stays smooth. */
        animation: tutor-rise-b-w977mut586 var(--glytic-transition) both;
        will-change: transform, opacity;
        /* Subtle shadow crown for depth */
        box-shadow:
            0 -4px 24px rgba(0, 0, 0, 0.55),
            0 0 32px -8px rgba(92, 168, 184, 0.25);
    }

    /* Resize handle: pinned to the very top of the sheet. Drag (touch) to resize the sheet
       between 40dvh and 95dvh; ArrowUp/ArrowDown when focused (js/qf-tutor-resize.js). touch-action
       none so the drag never scrolls the sheet body or the quiz behind it. Collapse now lives on
       the header X (always sticky-visible) rather than a tap here. */
    .tutor.is-expanded .tutor-grip[b-w977mut586] {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        width: 100%;
        height: 20px;
        margin: 0;
        padding: 0;
        border: none;
        background: var(--tutor-solid);
        border-radius: 16px 16px 0 0;
        cursor: ns-resize;
        touch-action: none;
    }

    .tutor.is-expanded .tutor-grip[b-w977mut586]::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--glytic-border-hover);
    }

    /* Inset focus ring (an outline would be clipped by the rounded top corners). */
    .tutor.is-expanded .tutor-grip:focus-visible[b-w977mut586] {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--glytic-border-hover);
    }

    /* Hide the scrollbar track in WebKit/Blink (sheet stays scrollable). */
    .tutor.is-expanded[b-w977mut586]::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Single sticky footer (chips + input) pinned to the bottom so both stay reachable.
       One opaque bar -- not two overlapping sticky elements -- so the thread text disappears
       cleanly under it instead of bleeding through. */
    .tutor.is-expanded[b-w977mut586]::after {
        content: none;
    }

    .tutor.is-expanded .tutor-foot[b-w977mut586] {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--tutor-solid);
        padding-top: 0.45rem;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
        margin-top: 0.4rem;
    }

    /* When the upsell/error banner replaces the footer it becomes the last element;
       give it the bottom clearance the footer normally provides. */
    .tutor.is-expanded .tutor-upsell[b-w977mut586] {
        margin-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    /* Chips (in the focus popover, or the guest quota-spent rail): one swipeable row
       instead of a tall wrapped block so the popover stays short above the keyboard.
       Right-edge fade hints that more chips are off-screen. */
    .tutor.is-expanded .tutor-foot .tutor-chips[b-w977mut586] {
        margin-top: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 2px 0 4px;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent);
    }

    .tutor.is-expanded .tutor-foot .tutor-chips[b-w977mut586]::-webkit-scrollbar {
        display: none;
    }

    .tutor.is-expanded .tutor-foot .tutor-input[b-w977mut586] {
        margin-top: 0;
    }

    /* The popover sits on the input, so it rides above the on-screen keyboard with the
       sticky footer and is unaffected by the footer's safe-area padding below the row. */
    .tutor.is-expanded .tutor-foot .tutor-suggest[b-w977mut586] {
        padding: 0.45rem 0.5rem;
    }

    /* Pin the header (orb + title + minimize X) to the top of the sheet so the close
       control is ALWAYS reachable -- even once the conversation grows tall enough to scroll.
       Mirrors the chips/input being sticky at the bottom. */
    .tutor.is-expanded .tutor-head[b-w977mut586] {
        position: sticky;
        top: 20px; /* pinned just below the sticky grip handle (height 20px) */
        z-index: 3;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        background: var(--tutor-solid);
    }

    .tutor.is-expanded .tutor-head .tutor-orb[b-w977mut586] {
        width: 22px;
        height: 22px;
    }

    /* -------- Question-context strip (mobile bottom sheet only) --------
       Restates the question stem + option letters at the top of the sheet so the learner keeps
       their bearings even when the sheet covers the question. Sticky under the header so it does
       not scroll away mid-conversation. Composed Strike: hairline rule, ember/purple accents,
       inset focus ring on the clipped chips. */
    .tutor.is-expanded .tutor-ctx[b-w977mut586] {
        display: block;
        position: sticky;
        top: 52px; /* butts against the sticky grip (20px) + header (~32px) so no thread text bleeds between */
        z-index: 2;
        background: var(--tutor-solid);
        padding: 0.4rem 0 0.5rem;
        margin: 0 0 0.35rem;
        border-bottom: 1px solid var(--forge-border-subtle);
    }

    /* Expanded restate scrolls WITH the thread: a tall sticky block covered the
       tutor's reply ("text starts under the question, partially hidden" -- owner
       2026-07-23). Sticky is for the compact collapsed form only. */
    .tutor.is-expanded .tutor-ctx.is-expanded[b-w977mut586] {
        position: static;
    }

    .tutor.is-expanded .tutor-ctx-label[b-w977mut586] {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--glytic-text-muted);
    }

    /* Clamped question stem, tappable to expand. Left-aligned, muted, no button chrome
       (quiet recipe; no underline on hover -- it is a multi-line clamped paragraph, not
       a label, so an underline would run under every wrapped line). */
    .tutor.is-expanded .tutor-ctx-q[b-w977mut586] {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        text-align: left;
        color: var(--glytic-text-secondary);
        font-family: var(--glytic-font-body);
        font-size: 0.82rem;
        line-height: 1.4;
        cursor: pointer;
        transition: color 0.15s ease;
    }

    .tutor.is-expanded .tutor-ctx-q:hover[b-w977mut586] {
        color: var(--glytic-text-primary);
    }

    .tutor.is-expanded .tutor-ctx-q-text[b-w977mut586] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    .tutor.is-expanded .tutor-ctx-q.is-expanded .tutor-ctx-q-text[b-w977mut586] {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }

    /* The one small purple AI accent allowed on this surface -- the expand affordance. */
    .tutor.is-expanded .tutor-ctx-more[b-w977mut586] {
        display: inline-block;
        margin-top: 0.15rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--glytic-secondary);
    }

    .tutor.is-expanded .tutor-ctx-q:focus-visible[b-w977mut586] {
        outline: none;
    }

    .tutor.is-expanded .tutor-ctx-q:focus-visible .tutor-ctx-q-text[b-w977mut586] {
        outline: 1px solid var(--glytic-border-hover);
        outline-offset: 2px;
    }

    /* Converted from a div to a real <button> for keyboard reachability (button system
       2026-09-23): reset the UA button chrome so the layout matches the old non-interactive box. */
    .tutor.is-expanded .tutor-ctx-opts[b-w977mut586] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        margin-top: 0.4rem;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: none;
        padding: 0;
        font: inherit;
        color: inherit;
        text-align: left;
    }

    .tutor.is-expanded .tutor-ctx-opts:focus-visible[b-w977mut586] {
        outline: var(--qf-btn-focus);
        outline-offset: 2px;
    }

    /* Option chip: cut-corner clip (Composed Strike), hairline border, answer text only. */
    .tutor.is-expanded .tutor-ctx-opt[b-w977mut586] {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 0.15rem 0.45rem;
        clip-path: var(--qf-clip-btn);
        border: 1px solid var(--glytic-border);
        background: rgba(255, 255, 255, 0.03); /* faint fill, no exact token */
        color: var(--glytic-text-secondary);
        font-size: 0.74rem;
        line-height: 1.3;
    }

    /* Collapsed rows: a readable two-line preview (was a one-line ellipsis that cut
       every long answer -- owner report); expand still shows full text. */
    .tutor.is-expanded .tutor-ctx-opt-text[b-w977mut586] {
        min-width: 0;
        flex: 1 1 auto;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
        max-width: none;
    }

    .tutor.is-expanded .tutor-ctx-opt-letter[b-w977mut586] {
        flex: none;
        margin-right: 0.3rem;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--glytic-text-muted);
    }

    /* Explicit state markers (post-reveal only): teal check = correct, ember cross =
       the learner's wrong pick. Border tint alone was invisible on truncated chips. */
    .tutor.is-expanded .tutor-ctx-opt-ico[b-w977mut586] {
        flex: none;
        width: 0.85rem;
        height: 0.85rem;
        margin-right: 0.25rem;
    }

    .tutor.is-expanded .tutor-ctx-opt-ico--check[b-w977mut586] { color: var(--glytic-primary); }
    .tutor.is-expanded .tutor-ctx-opt-ico--cross[b-w977mut586] { color: var(--forge-primary); }

    /* Expanded context (tap the stem or the options): chips become stacked rows with
       the FULL answer text -- nothing truncated (owner report: long answers were cut
       off and the pick/correct markers unreadable). Capped with internal scroll so a
       6-option question cannot swallow the whole sheet. */
    .tutor.is-expanded .tutor-ctx-opts[b-w977mut586] { cursor: pointer; }

    .tutor.is-expanded .tutor-ctx-opts.is-expanded[b-w977mut586] {
        flex-direction: column;
        align-items: stretch;
        max-height: 34dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tutor.is-expanded .tutor-ctx-opts.is-expanded .tutor-ctx-opt[b-w977mut586] {
        flex-wrap: wrap;
        row-gap: 0.1rem;
    }

    .tutor.is-expanded .tutor-ctx-opts.is-expanded .tutor-ctx-opt-text[b-w977mut586] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
        max-width: none;
        flex: 1 1 auto;
        overflow-wrap: anywhere;
    }

    .tutor.is-expanded .tutor-ctx-opt-state[b-w977mut586] {
        flex: none;
        width: 100%;
        margin-top: 0.1rem;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--glytic-text-muted);
    }

    /* The learner's own pick: ember = selection, matching .quiz-tap-option.selected on the
       answer options above the sheet (Composed Strike state language; purple is reserved for
       the AI affordance only, never a state color). */
    .tutor.is-expanded .tutor-ctx-opt.is-selected[b-w977mut586] {
        border-color: var(--forge-primary);
        background: var(--forge-surface);
        color: var(--glytic-text-primary);
    }

    /* The correct option (post-answer only): teal = correctness, matching
       .quiz-tap-option.result-correct. Declared AFTER .is-selected so teal wins
       when the learner's pick IS the correct answer. */
    .tutor.is-expanded .tutor-ctx-opt.is-correct[b-w977mut586] {
        border-color: rgba(var(--glytic-primary-rgb), 0.6);
        background: rgba(var(--glytic-primary-rgb), 0.12);
        color: var(--glytic-text-primary);
    }

    /* -------- Fixed bottom dock (launcher + collapsed resume) --------
       The tutor's home position on mobile: always within thumb reach, never
       buried in the page flow. Gradient hairline border via the padding-box /
       border-box double-background trick (border-image would kill the radius). */
    /* ALL launchers -- authenticated, anonymous sign-in funnel, and resume -- collapse to a
       floating circular button (FAB) in the bottom-right: a small glowing presence instead of
       a full-width bar, so the question owns the screen. The anonymous full-width bar was
       retired 2026-07-22 (owner call): it floated at bottom:136px, squatted on the answer
       options in tap-to-submit mode (which renders no dock band), and made the guest tutor
       look nothing like the signed-in one. Tapping the guest FAB still opens the sign-up
       dialog, so the conversion funnel survives -- one tap deeper, no longer covering content.
       The gradient ring + glow pseudo are preserved (border-radius inherits). */
    .tutor.tutor--dock[b-w977mut586],
    .tutor.tutor--collapsed[b-w977mut586] {
        position: fixed;
        left: auto;
        right: 14px;
        /* Rest INSIDE the fixed action dock's band, bottom-right corner, vertically centered on
           the Submit/Next row. History: at 80px the FAB overlapped the flag control ("advisor
           covers the flag"); the 136px lift that fixed it parked the FAB in the scrollable
           content band instead, where it covered answer controls (BuildList/Ordering/Matching
           arrows and chips) while the user worked -- the mobile-QA overlap defect. The dock band
           is the one strip where question content never renders (the quiz viewport reserves
           scroll room above it), so the FAB lives there now; .quiz-dock--tutor-lane
           (Quiz.razor.css) reserves this 78px right lane so the dock's own controls -- including
           the flag -- never extend under the circle. z-index 1200 keeps it above the dock (1150). */
        bottom: calc(6px + env(safe-area-inset-bottom));
        width: 54px;
        height: 54px;
        z-index: 1200;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        --tutor-solid: #181E2A; /* opaque form of --glytic-surface */
        border: 1px solid transparent;
        border-radius: 50%;
        background:
            linear-gradient(var(--tutor-solid), var(--tutor-solid)) padding-box,
            linear-gradient(135deg, rgba(92, 168, 184, 0.7), rgba(var(--forge-primary-rgb), 0.7)) border-box;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        padding: 0;
        /* Same height-independent rise as the sheet. No translateY(100%): that once
           stranded the collapsed control fully below the viewport (unreachable).
           fill-mode backwards, NOT both: the rise ends at the natural values anyway, and
           a forwards fill would pin opacity at the keyframe's 1, silently overriding the
           body.qf-scrolling scroll-dodge fade below (animations outrank declarations). */
        animation: tutor-rise-b-w977mut586 var(--glytic-transition) backwards;
    }

    /* Scroll dodge: tap-to-submit questions render no dock, so the corner FAB has no band to
       hide in and content crosses it mid-scroll. While the page is actively scrolling
       (body.qf-scrolling, stamped by qfFocusMode in app.js, cleared ~0.4s after the scroll
       settles) the FAB fades back so it never reads as squatting on the moving content.
       Pointer events stay on -- the tutor remains one tap away at all times. */
    body.qf-scrolling .tutor.tutor--dock[b-w977mut586],
    body.qf-scrolling .tutor.tutor--collapsed[b-w977mut586] {
        opacity: 0.35;
    }

    .tutor.tutor--dock[b-w977mut586],
    .tutor.tutor--collapsed[b-w977mut586] {
        transition: opacity 0.2s ease;
    }

    @media (prefers-reduced-motion: reduce) {
        .tutor.tutor--dock[b-w977mut586],
        .tutor.tutor--collapsed[b-w977mut586] {
            transition: none;
        }
    }

    /* FAB shows only the orb: fill the circle for a full tap target, hide text + chevron. */
    .tutor.tutor--dock .tutor-dock-btn[b-w977mut586],
    .tutor.tutor--collapsed .tutor-dock-btn[b-w977mut586] {
        width: 100%;
        height: 100%;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .tutor.tutor--dock .tutor-dock-text[b-w977mut586],
    .tutor.tutor--dock .tutor-quota-pill[b-w977mut586],
    .tutor.tutor--collapsed .tutor-dock-text[b-w977mut586],
    .tutor.tutor--collapsed .tutor-quota-pill[b-w977mut586] {
        display: none;
    }

    /* "Lights up when active": the launcher breathes a brand glow while it waits.
       Glow lives on a pseudo so only opacity animates (cheap compositing). */
    .tutor.tutor--dock[b-w977mut586]::after,
    .tutor.tutor--collapsed[b-w977mut586]::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        box-shadow:
            0 -2px 26px -2px rgba(92, 168, 184, 0.5),
            0 -2px 36px -4px rgba(var(--forge-primary-rgb), 0.35); /* brand glow -- no exact token */
        opacity: 0.15;
        animation: tutor-glow-b-w977mut586 3s ease-in-out 0.45s infinite;
        will-change: opacity;
    }

    /* Resume dock: steady ember of presence, not a fresh invitation. */
    .tutor.tutor--collapsed[b-w977mut586]::after {
        animation: none;
        opacity: 0.3;
    }

    /* The waiting launcher's orb pulses gently in sync with the bar. */
    .tutor.tutor--dock .tutor-orb[b-w977mut586] {
        animation: tutor-orb-pulse-b-w977mut586 3s ease-in-out 0.45s infinite;
        will-change: box-shadow;
    }

    @keyframes tutor-glow-b-w977mut586 {
        0%, 100% { opacity: 0.15; }
        50%      { opacity: 0.85; }
    }

    @keyframes tutor-orb-pulse-b-w977mut586 {
        0%, 100% {
            box-shadow:
                0 0 8px rgba(92, 168, 184, 0.4),
                0 0 14px -4px rgba(var(--forge-primary-rgb), 0.35);
        }
        50% {
            box-shadow:
                0 0 16px rgba(92, 168, 184, 0.75),
                0 0 26px -2px rgba(var(--forge-primary-rgb), 0.6);
        }
    }

    /* The quiz viewport reserves room for the fixed action dock, and the FAB rests inside
       that dock band -- so the launcher/collapsed spacer adds nothing. Only the anonymous
       sign-in bar (which stacks above the dock) needs its own extra reservation. */
    .tutor-spacer[b-w977mut586] {
        height: 0;
    }

    /* First-time explainer bubble above the orb FAB: says what the unlabeled circle is.
       Fixed in the FAB's column, above the action dock band; z above the FAB. Tapping
       it (or the FAB) dismisses it forever (localStorage). */
    .tutor-callout[b-w977mut586] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        position: fixed;
        right: 12px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        z-index: 1201;
        max-width: 250px;
        padding: 0.6rem 0.8rem;
        text-align: left;
        --tutor-solid: #181E2A; /* opaque form of --glytic-surface */
        border: 1px solid transparent;
        border-radius: 14px 14px 4px 14px;
        background:
            linear-gradient(var(--tutor-solid), var(--tutor-solid)) padding-box,
            linear-gradient(135deg, rgba(92, 168, 184, 0.7), rgba(var(--forge-primary-rgb), 0.7)) border-box;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
        cursor: pointer;
        animation: tutor-rise-b-w977mut586 var(--glytic-transition) backwards;
    }

    .tutor-callout:focus-visible[b-w977mut586] {
        outline: var(--qf-btn-focus);
        outline-offset: 2px;
    }

    .tutor-callout-title[b-w977mut586] {
        font-family: var(--glytic-font-heading);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--glytic-primary);
    }

    .tutor-callout-text[b-w977mut586] {
        font-size: 0.8rem;
        line-height: 1.45;
        color: var(--glytic-text-secondary);
    }

    @keyframes tutor-rise-b-w977mut586 {
        from { transform: translateY(28px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
}

/* ========================================
   CLOSE / COLLAPSE CONTROL
   CSS-drawn X (no icon font, no Unicode glyph).
   ======================================== */

.tutor-close[b-w977mut586] {
    flex-shrink: 0;
    margin-left: auto; /* takes the far-right slot in the header row */
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tutor-close:hover[b-w977mut586] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.tutor-close:focus-visible[b-w977mut586] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.tutor-close[b-w977mut586]::before,
.tutor-close[b-w977mut586]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--glytic-text-secondary);
}

.tutor-close[b-w977mut586]::before { transform: translate(-50%, -50%) rotate(45deg); }
.tutor-close[b-w977mut586]::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ========================================
   BACKDROP SCRIM (mobile bottom sheet only)
   ======================================== */

.tutor-scrim[b-w977mut586] {
    display: none; /* desktop: panel is inline, no scrim needed */
}

/* Drag handle is a mobile bottom-sheet affordance only; hidden on desktop (inline panel). */
.tutor-grip[b-w977mut586] {
    display: none;
}

/* Question-context strip is a mobile bottom-sheet restatement only. On desktop the inline panel
   sits directly under the visible question card, so the strip is redundant -- hidden here, shown
   in the mobile media query. */
.tutor-ctx[b-w977mut586] {
    display: none;
}

/* ========================================
   MARKDOWN CONTENT (rendered via MarkupString)
   MarkupString output does NOT carry the scoped-CSS attribute, so these rules
   must use ::deep to reach the injected elements.
   ======================================== */

.tutor-msg[b-w977mut586]  p {
    margin: 0 0 0.6em;
}

.tutor-msg[b-w977mut586]  p:last-child {
    margin-bottom: 0;
}

.tutor-msg[b-w977mut586]  ul,
.tutor-msg[b-w977mut586]  ol {
    margin: 0.3em 0 0.6em;
    padding-left: 1.3rem;
}

.tutor-msg[b-w977mut586]  ul:last-child,
.tutor-msg[b-w977mut586]  ol:last-child {
    margin-bottom: 0;
}

.tutor-msg[b-w977mut586]  li {
    margin: 0.15rem 0;
}

.tutor-msg[b-w977mut586]  li::marker {
    color: var(--glytic-primary);
}

.tutor-msg[b-w977mut586]  h4,
.tutor-msg[b-w977mut586]  h5,
.tutor-msg[b-w977mut586]  h6 {
    margin: 0.6rem 0 0.35rem;
    color: var(--glytic-text-primary);
    line-height: 1.3;
}

.tutor-msg[b-w977mut586]  h4:first-child,
.tutor-msg[b-w977mut586]  h5:first-child,
.tutor-msg[b-w977mut586]  h6:first-child {
    margin-top: 0;
}

.tutor-msg[b-w977mut586]  h4 { font-size: 0.98rem; }
.tutor-msg[b-w977mut586]  h5 { font-size: 0.92rem; }
.tutor-msg[b-w977mut586]  h6 { font-size: 0.86rem; }

.tutor-msg[b-w977mut586]  strong {
    color: var(--glytic-text-primary);
    font-weight: 600;
}

.tutor-msg[b-w977mut586]  em {
    font-style: italic;
}

/* Inline pronunciation chips (language tutor). Injected via MarkupString, so reached
   with ::deep. Tapping a chip speaks the target-language phrase (js/qf-tts.js). */
.tutor-msg[b-w977mut586]  .tts-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin: 0 0.12em;
    padding: 0.04em 0.4em;
    border-radius: 6px;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-gradient-card);
    color: var(--glytic-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: baseline;
    cursor: pointer;
    user-select: none;
    /* A chip must NEVER exceed the message width / stick off-screen. Cap it at the
       container and let long phrases wrap inside instead of overflowing horizontally. */
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition), transform 0.08s ease;
}

.tutor-msg[b-w977mut586]  .tts-chip-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tutor-msg[b-w977mut586]  .tts-chip:hover {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.tutor-msg[b-w977mut586]  .tts-chip:active {
    transform: scale(0.97);
}

.tutor-msg[b-w977mut586]  .tts-chip.is-speaking {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.tutor-msg[b-w977mut586]  .tts-ico {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Translation popup -- shown on hover (desktop), focus, or tap (mobile, via .tts-show). */
.tutor-msg[b-w977mut586]  .tts-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    min-width: max-content;
    max-width: 240px;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: var(--glytic-bg-dark, #11151f);
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.tutor-msg[b-w977mut586]  .tts-chip:hover .tts-pop,
.tutor-msg[b-w977mut586]  .tts-chip:focus-within .tts-pop,
.tutor-msg[b-w977mut586]  .tts-chip.tts-show .tts-pop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Caret pointing down at the chip. */
.tutor-msg[b-w977mut586]  .tts-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--glytic-border-hover);
}

.tutor-msg[b-w977mut586]  a {
    color: var(--glytic-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.tutor-msg[b-w977mut586]  a:hover {
    opacity: 0.85;
}

.tutor-msg[b-w977mut586]  code {
    font-family: var(--glytic-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--glytic-bg-dark);
    border: 1px solid var(--qf-line);
}

.tutor-msg[b-w977mut586]  pre {
    margin: 0.4em 0 0.6em;
    padding: 0.6rem 0.75rem;
    border-radius: var(--qf-btn-radius);
    background: var(--glytic-bg-dark);
    border: 1px solid var(--qf-line);
    overflow-x: auto;
}

.tutor-msg[b-w977mut586]  pre:last-child {
    margin-bottom: 0;
}

.tutor-msg[b-w977mut586]  pre code {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    white-space: pre;
    font-size: 0.82em;
    line-height: 1.5;
}

/* ========================================
   MOBILE: show the backdrop scrim behind the bottom sheet
   ======================================== */

@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    .tutor-scrim[b-w977mut586] {
        display: block;
        position: fixed;
        inset: 0;
        /* Above the MudBlazor AppBar (1300) so the header is covered AND non-interactive
           while the sheet is open; directly beneath the sheet itself (1311). Previously
           1299 left the AppBar (1300) clickable through the scrim. */
        z-index: 1310;
        /* No blur and only the faintest dim: the owner reported the sheet blurred/obscured the
           question, making review hard. The scrim stays (it still covers the AppBar so it is
           non-interactive, and a tap anywhere closes the sheet) but it must NOT hide the question
           behind it. Separation now comes from the sheet's ember hairline + drop-shadow, not a
           veil over the content. */
        background: rgba(0, 0, 0, 0.14);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: tutor-fade-b-w977mut586 var(--glytic-transition);
    }

    @keyframes tutor-fade-b-w977mut586 {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ========================================
   REDUCED MOTION
   !important is permitted only inside this block per project rules.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .tutor-msg[b-w977mut586]  .tutor-msg-tail > :last-child:not(ul):not(ol)::after,
    .tutor-msg[b-w977mut586]  .tutor-msg-tail > :is(ul, ol):last-child > li:last-child::after,
    .tutor-msg-tail:empty[b-w977mut586]::after,
    .tutor-skeleton span[b-w977mut586],
    .tutor.is-expanded[b-w977mut586],
    .tutor.tutor--dock[b-w977mut586],
    .tutor.tutor--collapsed[b-w977mut586],
    .tutor.tutor--dock[b-w977mut586]::after,
    .tutor.tutor--collapsed[b-w977mut586]::after,
    .tutor.tutor--dock .tutor-orb[b-w977mut586],
    .tutor-scrim[b-w977mut586] {
        animation: none !important;
    }
}
/* /Pages/Components/BuildListQuestion.razor.rz.scp.css */
/* Build list -- Composed Strike canon: double-layer bevel items, cut corners,
   pool below the sequence, whole-row tap targets. */

.bl[b-3i5sj2ugea] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

.bl-error[b-3i5sj2ugea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--glytic-error);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.bl-hint[b-3i5sj2ugea] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--glytic-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.bl-zone-label[b-3i5sj2ugea] {
    font-family: var(--glytic-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
    margin-top: 0.35rem;
}

.bl-zone-label--correct[b-3i5sj2ugea] { color: var(--glytic-primary); }

.bl-sequence[b-3i5sj2ugea] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px dashed var(--glytic-border);
    min-height: 56px;
}

.bl-sequence--empty[b-3i5sj2ugea] {
    align-items: center;
    justify-content: center;
}

.bl-sequence--result[b-3i5sj2ugea], .bl-sequence--answer[b-3i5sj2ugea] {
    border-style: solid;
}

.bl-empty[b-3i5sj2ugea] {
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    padding: 0.4rem;
    text-align: center;
}

.bl-item[b-3i5sj2ugea] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.45rem 0.6rem;
    background: rgba(var(--glytic-primary-rgb), 0.4);
    clip-path: var(--qf-clip-btn);
    color: #e2e8f0;
    font-size: 0.9rem;
}
.bl-item[b-3i5sj2ugea]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.bl-item--ok[b-3i5sj2ugea] { background: rgba(34, 197, 94, 0.45); }
.bl-item--ok[b-3i5sj2ugea]::before {
    background: linear-gradient(rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.12)), var(--glytic-bg-medium);
}
.bl-item--bad[b-3i5sj2ugea] { background: rgba(239, 68, 68, 0.35); }
.bl-item--bad[b-3i5sj2ugea]::before {
    background: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08)), var(--glytic-bg-medium);
}
.bl-item--neutral[b-3i5sj2ugea] { background: rgba(148, 163, 184, 0.28); }

.bl-slotnum[b-3i5sj2ugea] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-family: var(--glytic-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    border: 1px solid var(--glytic-border);
}

.bl-item-text[b-3i5sj2ugea] {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    word-break: break-word;
}

.bl-controls[b-3i5sj2ugea] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: none;
}

.bl-ctl[b-3i5sj2ugea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.bl-ctl:hover[b-3i5sj2ugea] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}
.bl-ctl:focus-visible[b-3i5sj2ugea] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}
.bl-ctl:disabled[b-3i5sj2ugea] { opacity: 0.3; pointer-events: none; }
.bl-ctl--remove:hover[b-3i5sj2ugea] { color: var(--qf-crimson-text); background: rgba(var(--qf-crimson-rgb), 0.1); }

.bl-pool[b-3i5sj2ugea] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Answer tile recipe (button system 2026-09-23): real 1px border, 8px radius, no
   clip-path/::before double layer. */
.bl-pool-item[b-3i5sj2ugea] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 56px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--glytic-bg-medium);
    border: 1px solid var(--qf-line);
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bl-pool-item:hover[b-3i5sj2ugea] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}
.bl-pool-item:focus-visible[b-3i5sj2ugea] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}
.bl-pool-item:disabled[b-3i5sj2ugea] { opacity: 0.5; pointer-events: none; }

.bl-pool-add[b-3i5sj2ugea] { color: var(--glytic-primary); flex: none; }

@media (max-width: 600px) {
    /* Keep the 44px touch targets; reclaim the width from padding and gaps instead. */
    .bl-item[b-3i5sj2ugea] { padding-right: 0.2rem; gap: 0.4rem; }
    .bl-controls[b-3i5sj2ugea] { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-ctl[b-3i5sj2ugea], .bl-pool-item[b-3i5sj2ugea] { transition: none; }
}
/* /Pages/Components/ConfidenceLevelSelector.razor.rz.scp.css */
.confidence-selector[b-2hwa7nrqgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.confidence-label[b-2hwa7nrqgy] {
    font-size: 0.85rem;
    color: var(--glytic-text-secondary, #666);
    white-space: nowrap;
}

.confidence-buttons[b-2hwa7nrqgy] {
    display: flex;
    gap: 8px;
}

/* Answer-tile recipe (button system 2026-09-23): tonal tint per semantic hue when selected,
   readable label in the hue itself rather than white-on-saturated-fill. */
.confidence-btn[b-2hwa7nrqgy] {
    min-height: var(--qf-btn-h-sm);
    padding: 6px 16px;
    border: 1px solid var(--qf-line, var(--glytic-border, #e0e0e0));
    border-radius: var(--qf-btn-radius, 8px);
    background: transparent;
    color: var(--glytic-text-secondary, #666);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.confidence-btn:hover[b-2hwa7nrqgy] {
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.confidence-btn:focus-visible[b-2hwa7nrqgy] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.confidence-btn.selected.guessing[b-2hwa7nrqgy] {
    border-color: rgba(var(--qf-crimson-rgb), 0.45);
    background: rgba(var(--qf-crimson-rgb), 0.16);
    color: var(--qf-crimson-text);
}

.confidence-btn.selected.unsure[b-2hwa7nrqgy] {
    border-color: rgba(255, 167, 38, 0.45);
    background: rgba(255, 167, 38, 0.16);
    color: var(--qf-warning-text);
}

.confidence-btn.selected.confident[b-2hwa7nrqgy] {
    border-color: rgba(var(--glytic-success-rgb), 0.45);
    background: rgba(var(--glytic-success-rgb), 0.16);
    color: var(--qf-success-text);
}
/* /Pages/Components/DropdownGridQuestion.razor.rz.scp.css */
/* DropdownGrid ("drop-down completion") -- Composed Strike canon:
   double-layer bevel rows (outer fill = outline color, ::before inset interior),
   cut corners via --qf-clip-btn, no border-radius, state via color only. */

.ddg[b-2dt4z6j1la] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

.ddg-error[b-2dt4z6j1la] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--glytic-error);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.ddg-hint[b-2dt4z6j1la] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--glytic-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.ddg-row[b-2dt4z6j1la] {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: rgba(148, 163, 184, 0.28);
    clip-path: var(--qf-clip-btn);
}

.ddg-row[b-2dt4z6j1la]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.ddg-row--header[b-2dt4z6j1la] {
    background: transparent;
    clip-path: none;
    padding-top: 0;
    padding-bottom: 0;
}
.ddg-row--header[b-2dt4z6j1la]::before { content: none; }

.ddg-header-cell[b-2dt4z6j1la] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
}

.ddg-row--ok[b-2dt4z6j1la] { background: rgba(34, 197, 94, 0.45); }
.ddg-row--ok[b-2dt4z6j1la]::before {
    background: linear-gradient(rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.12)), var(--glytic-bg-medium);
}

.ddg-row--bad[b-2dt4z6j1la] { background: rgba(239, 68, 68, 0.35); }
.ddg-row--bad[b-2dt4z6j1la]::before {
    background: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08)), var(--glytic-bg-medium);
}

.ddg-mark[b-2dt4z6j1la] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ddg-rownum[b-2dt4z6j1la] {
    font-family: var(--glytic-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
}

.ddg-prompt[b-2dt4z6j1la] {
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
}

.ddg-correct[b-2dt4z6j1la] {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--glytic-primary);
    word-break: break-word;
}

.ddg-picked[b-2dt4z6j1la] {
    font-size: 0.88rem;
    word-break: break-word;
}
.ddg-picked--ok[b-2dt4z6j1la] { color: #86efac; }
.ddg-picked--bad[b-2dt4z6j1la] { color: #f87171; }

/* Answer tile recipe (button system 2026-09-23): real 1px border, 8px radius, no
   clip-path/::before double layer. Ember tint when a pick is pending. */
.ddg-trigger[b-2dt4z6j1la] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: var(--glytic-bg-dark);
    border: 1px solid var(--glytic-primary);
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ddg-trigger:hover[b-2dt4z6j1la] { background: rgba(var(--glytic-primary-rgb), 0.12); }
.ddg-trigger:focus-visible[b-2dt4z6j1la] { outline: var(--qf-btn-focus); outline-offset: 2px; }
.ddg-trigger:disabled[b-2dt4z6j1la] { opacity: 0.5; pointer-events: none; }

.ddg-trigger--empty[b-2dt4z6j1la] { border-color: var(--forge-primary); }
.ddg-trigger--empty .ddg-trigger-text[b-2dt4z6j1la] { color: var(--glytic-text-muted); }

.ddg-trigger--open[b-2dt4z6j1la] { background: rgba(var(--glytic-primary-rgb), 0.12); }

.ddg-trigger-text[b-2dt4z6j1la] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Caret drawn with borders -- no Unicode glyphs allowed. */
.ddg-caret[b-2dt4z6j1la] {
    width: 0;
    height: 0;
    flex: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--glytic-text-muted);
    transition: transform 0.15s ease;
}
.ddg-caret--up[b-2dt4z6j1la] { transform: rotate(180deg); }

/* Inline expanding option panel. An overlay/bottom-sheet is NOT viable here:
   the question card's bevel elevation uses filter, which makes it the
   containing block for position:fixed descendants, trapping any "fixed"
   sheet inside the card. Normal-flow expansion has no such trap. */
.ddg-panel[b-2dt4z6j1la] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem 0.6rem 2rem;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-left: 2px solid var(--glytic-border);
    animation: ddg-expand-b-2dt4z6j1la 0.15s ease-out;
    transform-origin: top;
}

@keyframes ddg-expand-b-2dt4z6j1la {
    from { opacity: 0.4; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Answer tile recipe (button system 2026-09-23): real 1px border, 8px radius, no
   clip-path/::before double layer. */
.ddg-opt[b-2dt4z6j1la] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 56px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--glytic-bg-medium);
    border: 1px solid var(--qf-line);
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ddg-opt:hover[b-2dt4z6j1la] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}
.ddg-opt:focus-visible[b-2dt4z6j1la] { outline: var(--qf-btn-focus); outline-offset: 2px; }
.ddg-opt.is-sel[b-2dt4z6j1la] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.16);
    color: var(--glytic-text-primary);
}

.ddg-opt-text[b-2dt4z6j1la] {
    flex: 1;
    word-break: break-word;
}

/* Mobile: stack prompt over the trigger so long prompts stay readable. */
@media (max-width: 600px) {
    .ddg-row[b-2dt4z6j1la] {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "mark prompt"
            "mark trigger";
        row-gap: 0.45rem;
    }
    .ddg-mark[b-2dt4z6j1la] { grid-area: mark; align-self: start; padding-top: 0.2rem; }
    .ddg-prompt[b-2dt4z6j1la] { grid-area: prompt; }
    .ddg-trigger[b-2dt4z6j1la], .ddg-picked[b-2dt4z6j1la] { grid-area: trigger; }
    .ddg-row--header[b-2dt4z6j1la] { display: none; }
    .ddg-panel[b-2dt4z6j1la] { padding-left: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ddg-panel[b-2dt4z6j1la] { animation: none; }
    .ddg-caret[b-2dt4z6j1la], .ddg-trigger[b-2dt4z6j1la], .ddg-opt[b-2dt4z6j1la] { transition: none; }
}
/* /Pages/Components/FillInBlankQuestion.razor.rz.scp.css */
/* FillInBlankQuestion - Scoped CSS using design token variables */

.fillinblank-question[b-svo5qdgekt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fillinblank-hint[b-svo5qdgekt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.06);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-text-secondary);
    font-size: 0.875rem;
}

.fillinblank-input-area[b-svo5qdgekt] {
    margin-top: 0.25rem;
}

[b-svo5qdgekt] .fillinblank-input .mud-input-outlined {
    border-color: var(--glytic-border);
    font-size: 1.1rem;
}

[b-svo5qdgekt] .fillinblank-input .mud-input-outlined:hover {
    border-color: var(--glytic-primary);
}

[b-svo5qdgekt] .fillinblank-input .mud-input-outlined.mud-input-focused {
    border-color: var(--glytic-primary);
}

.fillinblank-result[b-svo5qdgekt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--glytic-border);
}

.fillinblank-result.result-correct[b-svo5qdgekt] {
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.08);
}

.fillinblank-result.result-incorrect[b-svo5qdgekt] {
    border-color: rgba(244, 67, 54, 0.5);
    background: rgba(244, 67, 54, 0.08);
}

.fillinblank-user-answer[b-svo5qdgekt],
.fillinblank-accepted[b-svo5qdgekt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fillinblank-label[b-svo5qdgekt] {
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.fillinblank-value[b-svo5qdgekt] {
    color: var(--glytic-text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.fillinblank-accepted .fillinblank-value[b-svo5qdgekt] {
    color: rgba(76, 175, 80, 0.9);
}

.fillinblank-length-hint[b-svo5qdgekt] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    padding: 0.2rem 0.25rem;
}
/* /Pages/Components/FlagQuestionButton.razor.rz.scp.css */
.flag-question-wrapper[b-jhzr1f5wwp] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Needs ::deep -- MudIconButton's Class lands on the component root, which scoped CSS
   otherwise never reaches. Icon-button recipe: 8px radius, hover background tint added. */
[b-jhzr1f5wwp] .flag-btn {
    opacity: 0.35;
    border-radius: var(--qf-btn-radius);
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    color: var(--glytic-text-secondary, rgba(255, 255, 255, 0.5));
}

[b-jhzr1f5wwp] .flag-btn:hover {
    opacity: 0.75;
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

[b-jhzr1f5wwp] .flag-btn--submitted {
    opacity: 0.6;
    color: var(--glytic-primary, #00ffe7);
}

/* /Pages/Components/ForgeBreak.razor.rz.scp.css */
/* Forge Break overlay. Fixed full-screen, rendered at .quiz-container root so no
   backdrop-filter ancestor can become its containing block. Single dark treatment on
   brand tokens from quizforge.css. */

.forge-overlay[b-nzw1aczhm6] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 70% at 50% 110%, rgba(192, 96, 48, 0.22), transparent 60%),
        linear-gradient(160deg, #0a0d14 0%, #141a26 60%, #1a2230 100%);
    animation: forge-in-b-nzw1aczhm6 0.45s var(--glytic-transition-curve, cubic-bezier(0.4, 0, 0.2, 1));
    outline: none;
}

@keyframes forge-in-b-nzw1aczhm6 {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* ---------- header: progress dots + configure + skip ---------- */

.forge-head[b-nzw1aczhm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) 18px 8px;
    flex: none;
}

.forge-dots[b-nzw1aczhm6] { display: flex; gap: 6px; }

.forge-dots i[b-nzw1aczhm6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.3);
    transition: background 0.3s, transform 0.3s;
}

.forge-dots i.forge-dot--hot[b-nzw1aczhm6] { background: var(--forge-spark, #E09060); transform: scale(1.25); }

.forge-head-actions[b-nzw1aczhm6] { display: flex; align-items: center; gap: 4px; }

.forge-gear[b-nzw1aczhm6] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--qf-btn-radius, 8px);
    background: transparent;
    color: var(--glytic-text-secondary, #e0e0e0);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.forge-gear:hover[b-nzw1aczhm6] {
    background: rgba(var(--glytic-primary-rgb, 92, 168, 184), 0.1);
    color: var(--glytic-text-primary, #f0f0f0);
}

.forge-skip[b-nzw1aczhm6] {
    border: none;
    background: transparent;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 40px;
    padding: 0 10px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.forge-skip:hover[b-nzw1aczhm6] {
    color: var(--glytic-text-primary, #f0f0f0);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.forge-gear:focus-visible[b-nzw1aczhm6],
.forge-skip:focus-visible[b-nzw1aczhm6] {
    outline: var(--qf-btn-focus, 2px solid var(--glytic-primary, #5CA8B8));
    outline-offset: 2px;
}

.forge-btn:focus-visible[b-nzw1aczhm6],
.forge-tf:focus-visible[b-nzw1aczhm6] {
    outline: var(--qf-btn-focus, 2px solid var(--glytic-primary, #5CA8B8));
    outline-offset: 3px;
}

/* ---------- body + stages ---------- */

/* The body is a scroll container; the stage is a fixed-width panel centred within it
   by auto margins. Auto margins centre when the panel is shorter than the viewport and
   collapse to 0 when it is taller, so tall content (re-strike) scrolls from the top
   instead of being clipped. This keeps every stage anchored in the same place -- the
   button always sits directly below the content, never pinned to the viewport bottom. */
.forge-body[b-nzw1aczhm6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 8px 22px calc(24px + env(safe-area-inset-bottom));
    width: 100%;
}

.forge-stage[b-nzw1aczhm6] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 16px;
    width: 100%;
    max-width: 440px;
    margin: auto;
    animation: forge-stage-in-b-nzw1aczhm6 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes forge-stage-in-b-nzw1aczhm6 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.forge-stage-head[b-nzw1aczhm6] { margin: 0; }

.forge-stage-head h2[b-nzw1aczhm6] {
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--glytic-text-primary, #f0f0f0);
    margin: 6px 0 0;
    text-wrap: balance;
}

.forge-stage-foot[b-nzw1aczhm6] {
    margin-top: 4px;
    display: grid;
    gap: 8px;
}

.forge-eyebrow[b-nzw1aczhm6] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--glytic-primary, #5CA8B8);
}

.forge-eyebrow--ember[b-nzw1aczhm6] { color: var(--forge-spark, #E09060); }

.forge-btn[b-nzw1aczhm6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg, 48px);
    padding: 12px 22px;
    border-radius: var(--qf-btn-radius, 8px);
    border: 1px solid transparent;
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Primary -- ember fill, ink label (never white-on-ember). */
.forge-btn--primary[b-nzw1aczhm6] {
    background: var(--forge-gradient-btn, linear-gradient(135deg, #D07040 0%, #B86038 100%));
    border-color: var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.forge-btn--primary:hover[b-nzw1aczhm6] { background: var(--forge-gradient); }

/* Secondary -- teal hairline, alternative action. */
.forge-btn--ghost[b-nzw1aczhm6] {
    background: transparent;
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary, #f0f0f0);
    font-weight: 600;
}

.forge-btn--ghost:hover[b-nzw1aczhm6] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb, 92, 168, 184), 0.08);
}

.forge-btn--hidden[b-nzw1aczhm6] { visibility: hidden; }

/* ---------- stoke ---------- */

.forge-teaser[b-nzw1aczhm6] {
    position: relative;
    overflow: hidden;
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    border: 1px solid var(--forge-border, rgba(192, 96, 48, 0.35));
    border-radius: var(--glytic-border-radius, 20px);
    padding: 22px 20px;
}

.forge-teaser[b-nzw1aczhm6]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 80% 0%, rgba(224, 144, 96, 0.12), transparent 60%);
    pointer-events: none;
}

.forge-teaser-q[b-nzw1aczhm6] {
    font-size: 1.12rem;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
    margin: 10px 0 0;
}

.forge-withheld[b-nzw1aczhm6] {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--forge-spark, #E09060);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.forge-flame[b-nzw1aczhm6] { width: 22px; height: 22px; flex: none; }
.forge-flame path[b-nzw1aczhm6] { fill: var(--forge-spark, #E09060); }

@keyframes forge-flicker-b-nzw1aczhm6 {
    0%, 100% { transform: scale(1) rotate(-2deg); opacity: 0.9; }
    50% { transform: scale(1.12) rotate(3deg); opacity: 1; }
}

.forge-flame[b-nzw1aczhm6] { animation: forge-flicker-b-nzw1aczhm6 1.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* ---------- re-strike ---------- */

.forge-strike-zone[b-nzw1aczhm6] { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.forge-strike-stack[b-nzw1aczhm6] { display: flex; flex-direction: column; }

.forge-strike-card[b-nzw1aczhm6] {
    position: relative;
    /* Cap the card height but let the inner region scroll, so a long missed question
       is fully readable instead of being clamped/clipped. touch-action: pan-y lets the
       browser scroll it vertically while the JS handler owns horizontal swipes. */
    max-height: min(58vh, 400px);
    background: linear-gradient(145deg, #141823 0%, #1b2331 55%, #0f141c 100%);
    border: 1px solid var(--glytic-border-hover, rgba(92, 168, 184, 0.45));
    border-radius: var(--glytic-border-radius, 20px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.85);
}

/* The scrollable content region: tag, full question stem, and proposed answer. Stamps
   sit outside it (absolute on the card) so they never scroll away. */
.forge-card-scroll[b-nzw1aczhm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.forge-strike-card.forge-card--dragging[b-nzw1aczhm6] { transition: none; }

.forge-strike-card.forge-card--fly[b-nzw1aczhm6] {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
    opacity: 0;
}

.forge-card-tag[b-nzw1aczhm6] {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glytic-primary, #5CA8B8);
}

.forge-card-stem[b-nzw1aczhm6] {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--glytic-text-secondary, #e0e0e0);
    margin: 0;
}

.forge-card-proposed[b-nzw1aczhm6] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.forge-card-proposed span[b-nzw1aczhm6] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--forge-spark, #E09060);
    margin-bottom: 4px;
}

.forge-stamp[b-nzw1aczhm6] {
    position: absolute;
    top: 16px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    padding: 4px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
}

.forge-stamp--true[b-nzw1aczhm6] {
    left: 16px;
    color: var(--glytic-success, #48bb78);
    border: 2px solid var(--glytic-success, #48bb78);
    transform: rotate(-8deg);
}

.forge-stamp--false[b-nzw1aczhm6] {
    right: 16px;
    color: var(--glytic-error, #ff6b6b);
    border: 2px solid var(--glytic-error, #ff6b6b);
    transform: rotate(8deg);
}

.forge-tf-row[b-nzw1aczhm6] { display: flex; gap: 12px; justify-content: center; padding-top: 16px; }

/* Answer tile recipe (button system 2026-09-23): real 1px border, 8px radius. Label case
   comes from ToUpperInvariant() in markup (localized copy), not CSS text-transform. */
.forge-tf[b-nzw1aczhm6] {
    flex: 1;
    max-width: 150px;
    min-height: 56px;
    border-radius: var(--qf-btn-radius, 8px);
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.forge-tf--false[b-nzw1aczhm6] {
    color: var(--glytic-error, #ff6b6b);
    border: 1px solid rgba(255, 107, 107, 0.5);
    background: rgba(255, 107, 107, 0.08);
}

.forge-tf--false:hover:not(:disabled)[b-nzw1aczhm6] { background: rgba(255, 107, 107, 0.14); }

.forge-tf--true[b-nzw1aczhm6] {
    color: var(--glytic-success, #48bb78);
    border: 1px solid rgba(var(--glytic-success-rgb, 72, 187, 120), 0.5);
    background: rgba(var(--glytic-success-rgb, 72, 187, 120), 0.08);
}

.forge-tf--true:hover:not(:disabled)[b-nzw1aczhm6] { background: rgba(var(--glytic-success-rgb, 72, 187, 120), 0.14); }

.forge-tf:disabled[b-nzw1aczhm6] { opacity: 0.6; cursor: default; }

.forge-hint[b-nzw1aczhm6] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--glytic-text-muted, #a0a0a0);
    padding-top: 8px;
    margin: 0;
}

.forge-strike-fb[b-nzw1aczhm6] {
    border-radius: var(--glytic-border-radius, 20px);
    padding: 18px;
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    display: grid;
    gap: 10px;
    /* The correction is where the learner reviews what they missed: cap the height and
       scroll a long explanation rather than clipping it. */
    max-height: min(68vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: forge-stage-in-b-nzw1aczhm6 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.forge-verdict[b-nzw1aczhm6] { font-weight: 700; letter-spacing: 0.06em; font-size: 1.05rem; margin: 0; }
.forge-verdict--hit[b-nzw1aczhm6] { color: var(--glytic-success, #48bb78); }
.forge-verdict--miss[b-nzw1aczhm6] { color: var(--glytic-error, #ff6b6b); }

.forge-fb-answer[b-nzw1aczhm6] { color: #fff; font-size: 0.95rem; margin: 0; }

.forge-fb-why[b-nzw1aczhm6] { color: var(--glytic-text-secondary, #e0e0e0); font-size: 0.85rem; line-height: 1.5; margin: 0; white-space: pre-line; }

.forge-produce[b-nzw1aczhm6] {
    font-size: 0.8rem;
    color: var(--forge-spark, #E09060);
    border-top: 1px dashed rgba(224, 144, 96, 0.35);
    padding-top: 10px;
    margin: 0;
}

/* ---------- spark ---------- */

.forge-stage--spark[b-nzw1aczhm6] { text-align: center; justify-content: center; gap: 16px; }

.forge-spark-title[b-nzw1aczhm6] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--glytic-text-primary, #f0f0f0);
    margin: 0;
}

.forge-surprise[b-nzw1aczhm6] {
    border: 1px solid rgba(224, 144, 96, 0.5);
    background: rgba(224, 144, 96, 0.08);
    border-radius: var(--glytic-border-radius-small, 12px);
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--forge-spark, #E09060);
    animation: forge-stage-in-b-nzw1aczhm6 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.forge-mastery[b-nzw1aczhm6] {
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-radius: var(--glytic-border-radius, 20px);
    padding: 18px;
    text-align: left;
}

.forge-mastery-row[b-nzw1aczhm6] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--glytic-text-secondary, #e0e0e0);
    margin-bottom: 8px;
}

.forge-mastery-val[b-nzw1aczhm6] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--forge-spark, #E09060);
    white-space: nowrap;
}

.forge-mastery-track[b-nzw1aczhm6] {
    height: 8px;
    border-radius: 999px;
    background: rgba(92, 168, 184, 0.15);
    overflow: hidden;
}

.forge-mastery-fill[b-nzw1aczhm6] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #C86030, var(--forge-spark, #E09060));
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.forge-mastery-block[b-nzw1aczhm6] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted, #a0a0a0);
    margin: 10px 0 0;
}

.forge-payoff[b-nzw1aczhm6] {
    text-align: left;
    position: relative;
    overflow: hidden;
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    border: 1px solid var(--forge-border, rgba(192, 96, 48, 0.35));
    border-radius: var(--glytic-border-radius, 20px);
    padding: 20px;
    font-size: 0.9rem;
    color: var(--glytic-text-secondary, #e0e0e0);
}

.forge-payoff[b-nzw1aczhm6]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 80% 0%, rgba(224, 144, 96, 0.12), transparent 60%);
    pointer-events: none;
}

.forge-payoff-q[b-nzw1aczhm6] {
    margin: 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--glytic-text-muted, #a0a0a0);
}

.forge-payoff-a[b-nzw1aczhm6] {
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}

.forge-source[b-nzw1aczhm6] {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--glytic-primary, #5CA8B8);
    text-decoration: none;
}

.forge-source:hover[b-nzw1aczhm6] { text-decoration: underline; }

/* ---------- quench ---------- */

.forge-stage--quench[b-nzw1aczhm6] { align-items: center; justify-content: center; text-align: center; gap: 18px; }

.forge-quench-title[b-nzw1aczhm6] { font-size: 1.05rem; color: var(--glytic-text-primary, #f0f0f0); margin: 0; }

.forge-breath[b-nzw1aczhm6] {
    position: relative;
    width: 200px;
    height: 200px;
    display: grid;
    place-items: center;
}

.forge-breath-ring[b-nzw1aczhm6] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--forge-border, rgba(192, 96, 48, 0.35));
    background: radial-gradient(circle, rgba(192, 96, 48, 0.16) 0%, transparent 70%);
    transform: scale(0.72);
}

.forge-breath-ring--live[b-nzw1aczhm6] { animation: forge-breathe-b-nzw1aczhm6 14s ease-in-out infinite; }

@keyframes forge-breathe-b-nzw1aczhm6 {
    0% { transform: scale(0.72); box-shadow: 0 0 24px rgba(192, 96, 48, 0.15); }
    28% { transform: scale(1); box-shadow: 0 0 48px rgba(224, 144, 96, 0.35); }
    56% { transform: scale(1); box-shadow: 0 0 48px rgba(224, 144, 96, 0.35); }
    100% { transform: scale(0.72); box-shadow: 0 0 24px rgba(192, 96, 48, 0.15); }
}

.forge-breath-word[b-nzw1aczhm6] {
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--forge-spark, #E09060);
    position: relative;
}

.forge-quench-copy[b-nzw1aczhm6] {
    max-width: 30ch;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.92rem;
    margin: 0;
}

.forge-quench-count[b-nzw1aczhm6] {
    font-variant-numeric: tabular-nums;
    color: var(--glytic-text-muted, #a0a0a0);
    font-size: 0.85rem;
    margin: 0;
}

.forge-stage--quench .forge-stage-foot[b-nzw1aczhm6] { width: 100%; }

/* ---------- door ---------- */

.forge-stage--door[b-nzw1aczhm6] { justify-content: center; gap: 18px; }

.forge-preq[b-nzw1aczhm6] {
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    border: 1px solid var(--glytic-border-hover, rgba(92, 168, 184, 0.45));
    border-radius: var(--glytic-border-radius, 20px);
    padding: 20px;
}

.forge-preq-stem[b-nzw1aczhm6] {
    font-size: 1.08rem;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
    margin: 8px 0 0;
}

.forge-preq-hold[b-nzw1aczhm6] {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--glytic-primary, #5CA8B8);
}

/* ---------- config panel ---------- */

.forge-config[b-nzw1aczhm6] {
    flex: 1;
    overflow-y: auto;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 22px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.forge-config-title[b-nzw1aczhm6] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #f0f0f0);
    margin: 0;
}

.forge-config-desc[b-nzw1aczhm6] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted, #a0a0a0);
    margin: 0 0 6px;
}

.forge-config-row[b-nzw1aczhm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.92));
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-radius: var(--glytic-border-radius-small, 12px);
    padding: 12px 14px;
    font-size: 0.9rem;
    color: var(--glytic-text-secondary, #e0e0e0);
    cursor: pointer;
}

.forge-config-row--master[b-nzw1aczhm6] {
    border-color: var(--forge-border, rgba(192, 96, 48, 0.35));
    color: var(--glytic-text-primary, #f0f0f0);
    font-weight: 600;
}

.forge-config-row input[b-nzw1aczhm6] {
    width: 20px;
    height: 20px;
    accent-color: #C86030;
    flex: none;
}

.forge-config .forge-btn[b-nzw1aczhm6] { margin-top: auto; }

/* ---------- embers canvas ---------- */

.forge-embers[b-nzw1aczhm6] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .forge-overlay[b-nzw1aczhm6],
    .forge-stage[b-nzw1aczhm6],
    .forge-surprise[b-nzw1aczhm6],
    .forge-strike-fb[b-nzw1aczhm6] { animation: none; }

    .forge-flame[b-nzw1aczhm6] { animation: none; }

    .forge-breath-ring--live[b-nzw1aczhm6] { animation: none; transform: scale(0.9); }

    .forge-mastery-fill[b-nzw1aczhm6] { transition: none; }
}
/* /Pages/Components/GroundingBlurbDialog.razor.rz.scp.css */
/* Grounding blurb dialog. Gold = source-verified accent, same visual language as
   the quiz page's inline grounding receipt (fm-panel-grounding). */
.gb-body[b-9i12fd3o10] {
    max-height: 60vh;
    overflow-y: auto;
}

.gb-header[b-9i12fd3o10] {
    display: flex;
    margin-bottom: 0.45rem;
}

.gb-disclaimer[b-9i12fd3o10] {
    margin: 0 0 0.5rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--glytic-text-secondary);
}

.gb-quote[b-9i12fd3o10] {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid rgba(var(--qf-gold-rgb), 0.75);
    background: rgba(var(--qf-gold-rgb), 0.06);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gb-attribution[b-9i12fd3o10] {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--glytic-text-secondary);
    overflow-wrap: anywhere;
}

.gb-source-link[b-9i12fd3o10] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-decoration: none;
}

.gb-source-link:hover[b-9i12fd3o10] { text-decoration: underline; }

/* Reference tier: a reference publisher, not the certifying body -- drop the gold accent. */
.gb-body--reference .gb-quote[b-9i12fd3o10] {
    border-left-color: var(--glytic-border);
    background: transparent;
}

[b-9i12fd3o10] .gb-chip--reference {
    color: var(--glytic-text-secondary);
}

.gb-publisher[b-9i12fd3o10] {
    font-style: normal;
}
/* /Pages/Components/MatchingQuestion.razor.rz.scp.css */
/* MatchingQuestion — drag-and-drop UX (pointer events).
   Chips live in a pool below the prompt list. User drags a chip onto a slot
   next to a prompt. Drag a placed chip back to the pool to swap. */

.matching-question[b-jfiffu3bye] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.matching-error[b-jfiffu3bye] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.35);
    color: rgba(244, 67, 54, 0.9);
    font-size: 0.875rem;
}

.matching-hint[b-jfiffu3bye] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-text-secondary);
    font-size: 0.875rem;
}

/* ============================================================
   Prompt rows + slot
   ============================================================ */

.matching-prompts[b-jfiffu3bye] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.matching-row[b-jfiffu3bye] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--glytic-border);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.matching-prompt[b-jfiffu3bye] {
    flex: 0 0 38%;
    min-width: 0;
}

.matching-prompt-label[b-jfiffu3bye] {
    color: var(--glytic-text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    word-break: break-word;
}

.matching-arrow[b-jfiffu3bye] {
    flex-shrink: 0;
    color: var(--glytic-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.matching-arrow[b-jfiffu3bye]::after {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.5;
}

.matching-slot[b-jfiffu3bye] {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1.5px dashed rgba(var(--glytic-primary-rgb), 0.25);
    background: rgba(var(--glytic-primary-rgb), 0.03);
    transition: border-color 0.15s ease, background 0.15s ease;
    touch-action: none;
}

.matching-slot--filled[b-jfiffu3bye] {
    border-style: solid;
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    background: rgba(var(--glytic-primary-rgb), 0.06);
}

.matching-slot.qf-drop-hover[b-jfiffu3bye] {
    border-style: solid;
    border-color: rgba(var(--glytic-primary-rgb), 0.7);
    background: rgba(var(--glytic-primary-rgb), 0.12);
    box-shadow: inset 0 0 0 1px rgba(var(--glytic-primary-rgb), 0.4);
}

.matching-slot-placeholder[b-jfiffu3bye] {
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================
   Pool of unplaced response chips
   ============================================================ */

.matching-pool-label[b-jfiffu3bye] {
    margin-top: 0.6rem;
    color: var(--glytic-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.matching-pool[b-jfiffu3bye] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 10px;
    border: 1px dashed var(--glytic-border);
    background: rgba(255, 255, 255, 0.02);
    min-height: 56px;
    transition: border-color 0.15s ease, background 0.15s ease;
    touch-action: none;
}

.matching-pool.qf-drop-hover[b-jfiffu3bye] {
    border-style: solid;
    border-color: rgba(var(--glytic-primary-rgb), 0.6);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.matching-pool-empty[b-jfiffu3bye] {
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================
   Chips
   ============================================================ */

.matching-chip[b-jfiffu3bye] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.4);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-text-primary);
    font-size: 0.92rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.matching-chip:hover:not(.matching-chip--dragging)[b-jfiffu3bye] {
    border-color: rgba(var(--glytic-primary-rgb), 0.65);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.matching-chip:active[b-jfiffu3bye] {
    cursor: grabbing;
}

.matching-chip--placed[b-jfiffu3bye] {
    background: rgba(var(--glytic-primary-rgb), 0.18);
    border-color: rgba(var(--glytic-primary-rgb), 0.55);
}

[b-jfiffu3bye] .matching-chip-grip {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

/* Chip being dragged: lifted look, follows cursor (handled by JS via translate). */
.matching-chip--dragging[b-jfiffu3bye] {
    cursor: grabbing !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.55),
        0 0 22px rgba(var(--glytic-primary-rgb), 0.3);
    background: rgba(var(--glytic-primary-rgb), 0.22) !important;
    border-color: rgba(var(--glytic-primary-rgb), 0.75) !important;
}

/* ============================================================
   Result states
   ============================================================ */

.matching-row.pair-correct .matching-slot[b-jfiffu3bye] {
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.08);
}

.matching-row.pair-incorrect .matching-slot[b-jfiffu3bye] {
    border-color: rgba(244, 67, 54, 0.45);
    background: rgba(244, 67, 54, 0.07);
}

.matching-chip--correct[b-jfiffu3bye] {
    background: rgba(76, 175, 80, 0.16);
    border-color: rgba(76, 175, 80, 0.45);
}

.matching-chip--wrong[b-jfiffu3bye] {
    background: rgba(244, 67, 54, 0.14);
    border-color: rgba(244, 67, 54, 0.4);
}

.matching-correct-answer[b-jfiffu3bye] {
    /* In result mode the slot is a vertical stack (see .matching-slot--result),
       so the correct-answer hint sits on its own row underneath the chip and
       wraps naturally. Avoid white-space: nowrap so long correct strings don't
       blow out the card width. */
    font-size: 0.78rem;
    color: rgba(76, 175, 80, 0.9);
    background: rgba(76, 175, 80, 0.08);
    padding: 4px 8px;
    border-radius: 5px;
    line-height: 1.4;
    word-break: break-word;
}

/* Result-mode slot: stack chip + correct-hint vertically so each gets full slot width
   and text wraps naturally. Without this the row-flex layout squashed the chip narrow
   when the correct hint had nowrap text. */
.matching-slot--result[b-jfiffu3bye] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 8px 10px;
}

.matching-slot--result .matching-chip[b-jfiffu3bye] {
    width: 100%;
    align-items: flex-start;
    white-space: normal;
    word-break: break-word;
}

.matching-slot--result .matching-chip > span[b-jfiffu3bye] {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 600px) {
    .matching-row[b-jfiffu3bye] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.6rem 0.75rem;
    }

    .matching-prompt[b-jfiffu3bye] {
        flex: none;
    }

    .matching-arrow[b-jfiffu3bye] {
        display: none;
    }

    .matching-slot[b-jfiffu3bye] {
        flex: none;
        min-height: 48px;
        padding: 8px 10px;
    }

    .matching-chip[b-jfiffu3bye] {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .matching-pool[b-jfiffu3bye] {
        padding: 0.85rem;
    }
}
/* /Pages/Components/MatrixQuestion.razor.rz.scp.css */
/* Matrix / grid question -- Composed Strike canon. Real table semantics with
   whole-cell tap targets; state via glyph color only (round = radio, square = checkbox). */

.mx[b-p1j547rowi] {
    margin: 0.75rem 0 0.25rem;
}

.mx-error[b-p1j547rowi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--glytic-error);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.mx-hint[b-p1j547rowi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--glytic-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

/* The table scrolls inside its own container on narrow screens; the page never scrolls sideways. */
.mx-scroll[b-p1j547rowi] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mx-table[b-p1j547rowi] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.mx-th[b-p1j547rowi] {
    padding: 0.4rem 0.5rem;
    font-family: var(--glytic-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
    text-align: center;
    border-bottom: 2px solid var(--glytic-border);
    white-space: nowrap;
}

.mx-th--label[b-p1j547rowi] {
    text-align: left;
    width: 45%;
    /* Match the sticky body label column so the header does not scroll away
       while the statements stay pinned. */
    position: sticky;
    left: 0;
    background: var(--glytic-bg-medium);
    z-index: 1;
}

.mx-th--mark[b-p1j547rowi] { width: 36px; }

.mx-tr[b-p1j547rowi] { border-bottom: 1px solid var(--glytic-border); }
.mx-tr:last-child[b-p1j547rowi] { border-bottom: 0; }

/* Result-state row washes -- flat tints (a clip-path bevel per <tr> is not
   possible without breaking table semantics; color carries the state). */
.mx-tr--ok[b-p1j547rowi] { background: rgba(34, 197, 94, 0.08); }
.mx-tr--bad[b-p1j547rowi] { background: rgba(239, 68, 68, 0.07); }

.mx-td[b-p1j547rowi] {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
}

.mx-td--label[b-p1j547rowi] {
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
    /* Sticky first column keeps the statement readable while columns scroll. */
    position: sticky;
    left: 0;
    background: var(--glytic-bg-medium);
    z-index: 1;
    min-width: 160px;
}
.mx-tr--ok .mx-td--label[b-p1j547rowi] {
    background: linear-gradient(rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.08)), var(--glytic-bg-medium);
}
.mx-tr--bad .mx-td--label[b-p1j547rowi] {
    background: linear-gradient(rgba(239, 68, 68, 0.07), rgba(239, 68, 68, 0.07)), var(--glytic-bg-medium);
}

.mx-correct[b-p1j547rowi] {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--glytic-primary);
}

.mx-td--cell[b-p1j547rowi], .mx-td--mark[b-p1j547rowi] { text-align: center; }

/* Whole-cell tap target around the glyph. */
.mx-cell[b-p1j547rowi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.mx-cell:hover[b-p1j547rowi] { background: rgba(var(--glytic-primary-rgb), 0.1); }
.mx-cell:disabled[b-p1j547rowi] { cursor: default; }

/* Scoped extension of the global glyph vocabulary: a correct column the user
   did NOT pick renders as a hollow teal outline in result mode. */
.mx-cell .qf-glyph--missed[b-p1j547rowi] {
    border-color: var(--glytic-primary);
    background: transparent;
}

.mx-visually-hidden[b-p1j547rowi] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .mx-th--label[b-p1j547rowi] { width: auto; }
    .mx-td--label[b-p1j547rowi] { min-width: 140px; font-size: 0.85rem; }
    /* Keep the full 44px touch target on phones -- that is where it matters most. */
}

@media (prefers-reduced-motion: reduce) {
    .mx-cell[b-p1j547rowi] { transition: none; }
}
/* /Pages/Components/MilestoneToast.razor.rz.scp.css */
.milestone-toast-container[b-54ye89gpj0] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1300;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    pointer-events: none;
}

.milestone-toast[b-54ye89gpj0] {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    min-width: 320px;
    max-width: 400px;
    padding: 16px 56px 16px 16px;
    border-radius: 8px;
    background: var(--glytic-bg-card, rgba(26, 30, 48, 0.95));
    border: 1px solid rgba(0, 255, 231, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    animation: milestone-slide-in-b-54ye89gpj0 0.3s ease-out;
}

/* Gradient border overlay that respects border-radius */
.milestone-toast[b-54ye89gpj0]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, var(--glytic-primary, #00ffe7), rgba(160, 32, 240, 0.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.milestone-toast--dismiss[b-54ye89gpj0] {
    animation: milestone-slide-out-b-54ye89gpj0 0.3s ease-in forwards;
}

.milestone-content[b-54ye89gpj0] {
    position: relative;
    z-index: 2;
}

.milestone-title[b-54ye89gpj0] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--glytic-primary, #00ffe7);
    margin-bottom: 4px;
}

.milestone-message[b-54ye89gpj0] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

/* Icon-button recipe (button system 2026-09-23), sized to the toast's reserved corner --
   the fixed right:8/right:32 offsets are only 24px apart, so the full 40x40 footprint would
   overlap; token colors and focus ring still apply. */
.milestone-share[b-54ye89gpj0] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--glytic-text-secondary);
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 32px;
    padding: 4px 6px;
    border-radius: var(--qf-btn-radius);
    z-index: 3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.milestone-share:hover[b-54ye89gpj0] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.milestone-share:focus-visible[b-54ye89gpj0] {
    outline: var(--qf-btn-focus);
    outline-offset: 1px;
}

.milestone-close[b-54ye89gpj0] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--glytic-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 6px;
    border-radius: var(--qf-btn-radius);
    z-index: 3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.milestone-close:hover[b-54ye89gpj0] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.milestone-close:focus-visible[b-54ye89gpj0] {
    outline: var(--qf-btn-focus);
    outline-offset: 1px;
}

/* Confetti animation */
.milestone-confetti[b-54ye89gpj0] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.confetti-dot[b-54ye89gpj0] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation: confetti-fall-b-54ye89gpj0 2s ease-out forwards;
}

.confetti-dot:nth-child(1)[b-54ye89gpj0] {
    background: var(--glytic-primary, #00ffe7);
    left: 10%;
    animation-delay: 0s;
}
.confetti-dot:nth-child(2)[b-54ye89gpj0] {
    background: rgba(160, 32, 240, 0.8);
    left: 30%;
    animation-delay: 0.15s;
}
.confetti-dot:nth-child(3)[b-54ye89gpj0] {
    background: var(--glytic-primary, #00ffe7);
    left: 50%;
    animation-delay: 0.3s;
}
.confetti-dot:nth-child(4)[b-54ye89gpj0] {
    background: rgba(160, 32, 240, 0.8);
    left: 70%;
    animation-delay: 0.1s;
}
.confetti-dot:nth-child(5)[b-54ye89gpj0] {
    background: var(--glytic-primary, #00ffe7);
    left: 85%;
    animation-delay: 0.25s;
}
.confetti-dot:nth-child(6)[b-54ye89gpj0] {
    background: rgba(160, 32, 240, 0.8);
    left: 45%;
    animation-delay: 0.4s;
}

@keyframes confetti-fall-b-54ye89gpj0 {
    0% {
        top: -10%;
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
    100% {
        top: 110%;
        opacity: 0;
        transform: translateX(20px) rotate(360deg);
    }
}

@keyframes milestone-slide-in-b-54ye89gpj0 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes milestone-slide-out-b-54ye89gpj0 {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .milestone-toast[b-54ye89gpj0] {
        animation: none;
    }
    .milestone-toast--dismiss[b-54ye89gpj0] {
        animation: none;
        opacity: 0;
    }
    .confetti-dot[b-54ye89gpj0] {
        animation: none;
        display: none;
    }
}

/* Mobile + tablet (481-768px included): span the width and lift the toast stack ABOVE the
   fixed quiz action dock (Quiz.razor.css .quiz-dock -- a fixed bottom bar reserving ~128px at
   <=768px) and the tutor FAB (AiTutorPanel.razor.css, bottom-right at <=600px). At 24px the
   bottom-right corner card sat on top of both (z-1300 over the dock's 1150 and the FAB's 1200),
   covering Submit/Next and the tutor launcher -- the "toast covers controls" defect. Previously
   the full-width treatment only kicked in at <=480px, leaving 481-768px as a floating corner card
   that both clipped near the edge and covered the controls. One 768px rule (matching the dock and
   ProgressToastContainer breakpoint) now covers the whole mobile/tablet range. */
@media (max-width: 768px) {
    .milestone-toast-container[b-54ye89gpj0] {
        left: 12px;
        right: 12px;
        /* 128px reserved dock band + an 8px gap, plus the device safe-area inset. */
        bottom: calc(136px + env(safe-area-inset-bottom));
    }
    .milestone-toast[b-54ye89gpj0] {
        min-width: 0;
        max-width: none;
    }
}

/* Small phones: sit closer to the edges to reclaim horizontal room; the dock clearance and
   safe-area inset from the 768px rule above still apply (this only tightens the side gutters). */
@media (max-width: 480px) {
    .milestone-toast-container[b-54ye89gpj0] {
        left: 8px;
        right: 8px;
    }
}
/* /Pages/Components/OrderingQuestion.razor.rz.scp.css */
/* OrderingQuestion — drag-and-drop primary, keyboard arrow fallback */

[b-ufmj5s8vhe] .ordering-drag-handle {
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    cursor: grab;
}

/* Card that the user is actively dragging — pointer-events drag, the actual
   element follows the cursor (no translucent ghost). */
.ordering-item--dragging-live[b-ufmj5s8vhe] {
    cursor: grabbing !important;
    background: rgba(var(--glytic-primary-rgb), 0.18) !important;
    border-color: rgba(var(--glytic-primary-rgb), 0.7) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.45),
        0 0 24px rgba(var(--glytic-primary-rgb), 0.25);
}

.ordering-item--interactive[b-ufmj5s8vhe] {
    cursor: grab;
}

.ordering-item--interactive:active[b-ufmj5s8vhe] {
    cursor: grabbing;
}

.ordering-keyboard-hints[b-ufmj5s8vhe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.ordering-arrow-btn[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border-radius: var(--qf-btn-radius, 8px);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    background: rgba(var(--glytic-primary-rgb), 0.05);
    color: rgba(var(--glytic-primary-rgb), 0.65);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.ordering-arrow-btn:not(:disabled):hover[b-ufmj5s8vhe] {
    background: rgba(var(--glytic-primary-rgb), 0.18);
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    color: var(--glytic-primary, #00ffe7);
}

.ordering-arrow-btn:focus-visible[b-ufmj5s8vhe] {
    outline: var(--qf-btn-focus);
    outline-offset: 1px;
}

.ordering-arrow-btn:disabled[b-ufmj5s8vhe] {
    opacity: 0.25;
    cursor: not-allowed;
}


.ordering-question[b-ufmj5s8vhe] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ============================================================
   Hint bar
   ============================================================ */

.ordering-hint[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-text-secondary);
    font-size: 0.875rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ordering-hint--active[b-ufmj5s8vhe] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    color: var(--glytic-text-primary);
}

[b-ufmj5s8vhe] .hint-swap-icon {
    color: var(--glytic-primary);
    animation: hint-pulse-b-ufmj5s8vhe 1.2s ease-in-out infinite;
}

[b-ufmj5s8vhe] .hint-check-icon {
    color: #4caf50;
}

@keyframes hint-pulse-b-ufmj5s8vhe {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ============================================================
   List
   ============================================================ */

.ordering-list[b-ufmj5s8vhe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   Base item
   ============================================================ */

.ordering-item[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--glytic-border, rgba(255,255,255,0.1));
    background: rgba(255,255,255,0.03);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    min-height: 58px;
    user-select: none;
    /* touch-action: none is required so mobile browsers don't scroll/zoom on pointer-drag. */
    touch-action: none;
    -webkit-touch-callout: none;
}

/* Inline buttons inside the row still need normal touch behavior. */
.ordering-item button[b-ufmj5s8vhe] {
    touch-action: auto;
}

/* ============================================================
   Interactive mode
   ============================================================ */

.ordering-item--interactive:hover[b-ufmj5s8vhe] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
    background: rgba(var(--glytic-primary-rgb), 0.05);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

/* No :active transform — it interferes with the dragstart snapshot,
   which the browser captures with whatever transform is applied at that instant. */


/* Placed: item has been clicked and assigned a position */
.ordering-item--placed[b-ufmj5s8vhe] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4) !important;
    background: rgba(var(--glytic-primary-rgb), 0.07) !important;
}

.ordering-item--placed:hover[b-ufmj5s8vhe] {
    border-color: rgba(var(--glytic-primary-rgb), 0.6) !important;
    background: rgba(var(--glytic-primary-rgb), 0.1) !important;
}

/* Unplaced: item not yet clicked */
.ordering-item--unplaced[b-ufmj5s8vhe] {
    opacity: 0.75;
}

.ordering-item--interactive.ordering-item--unplaced:hover[b-ufmj5s8vhe] {
    opacity: 1;
}

.ordering-item--disabled[b-ufmj5s8vhe] {
    cursor: default;
}

/* ============================================================
   Position badge — shared by interactive, disabled, and result modes
   ============================================================ */

.ordering-pos-badge[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Interactive: placed */
.pos-badge--placed[b-ufmj5s8vhe] {
    background: rgba(var(--glytic-primary-rgb), 0.2);
    color: var(--glytic-primary, #00ffe7);
    border: 1.5px solid rgba(var(--glytic-primary-rgb), 0.5);
}

/* Interactive: unplaced (empty circle) */
.pos-badge--empty[b-ufmj5s8vhe] {
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.2);
    color: transparent;
}

/* Result: correct position */
.pos-badge--correct[b-ufmj5s8vhe] {
    background: rgba(76,175,80,0.18);
    color: #4caf50;
    border: 1.5px solid rgba(76,175,80,0.4);
}

/* Result: wrong position */
.pos-badge--wrong[b-ufmj5s8vhe] {
    background: rgba(244,67,54,0.12);
    color: #f44336;
    border: 1.5px solid rgba(244,67,54,0.3);
}

/* ============================================================
   Item text
   ============================================================ */

.ordering-text[b-ufmj5s8vhe] {
    flex: 1;
    color: var(--glytic-text-primary, #fff);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ============================================================
   Action hints (right side of item)
   ============================================================ */

/* Remove hint (X icon) — shown on placed items */
.ordering-remove-hint[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    color: rgba(var(--glytic-primary-rgb), 0.5);
    transition: opacity 0.15s ease;
}

.ordering-item--interactive.ordering-item--placed:hover .ordering-remove-hint[b-ufmj5s8vhe] {
    opacity: 1;
}

/* Add hint (next position number) — shown on unplaced items */
.ordering-add-hint[b-ufmj5s8vhe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 1px dashed rgba(var(--glytic-primary-rgb), 0.3);
    color: rgba(var(--glytic-primary-rgb), 0.6);
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ordering-item--interactive.ordering-item--unplaced:hover .ordering-add-hint[b-ufmj5s8vhe] {
    opacity: 1;
}

/* ============================================================
   Result mode
   ============================================================ */

.ordering-item.result-mode[b-ufmj5s8vhe] {
    cursor: default;
}

.ordering-item.position-correct[b-ufmj5s8vhe] {
    border-color: rgba(76,175,80,0.4);
    background: rgba(76,175,80,0.05);
}

.ordering-item.position-incorrect[b-ufmj5s8vhe] {
    border-color: rgba(244,67,54,0.3);
    background: rgba(244,67,54,0.05);
}

.ordering-correct-pos[b-ufmj5s8vhe] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(244,67,54,0.85);
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(244,67,54,0.08);
    padding: 3px 8px;
    border-radius: 5px;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 600px) {
    .ordering-item[b-ufmj5s8vhe] {
        padding: 12px 12px;
        gap: 0.7rem;
        min-height: 54px;
    }

    .ordering-text[b-ufmj5s8vhe] {
        font-size: 0.9rem;
    }

    .ordering-pos-badge[b-ufmj5s8vhe] {
        min-width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    /* Always show hints on touch (no hover) */
    .ordering-remove-hint[b-ufmj5s8vhe],
    .ordering-add-hint[b-ufmj5s8vhe] {
        opacity: 0.6;
    }

    /* Phones have no hardware arrow keys, and touch-drag can be fiddly on a small
       screen, so the up/down tap buttons must stay visible as a reliable reorder
       path. Size them as proper touch targets (drag still works too). */
    .ordering-keyboard-hints[b-ufmj5s8vhe] {
        gap: 4px;
    }

    .ordering-arrow-btn[b-ufmj5s8vhe] {
        width: 44px;
        height: 36px;
        border-radius: var(--qf-btn-radius, 8px);
    }

    .ordering-arrow-btn:disabled[b-ufmj5s8vhe] {
        opacity: 0.2;
    }
}
/* /Pages/Components/PacingCoach.razor.rz.scp.css */
.pacing-strip[b-v7ig9cz57f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.pacing-ok[b-v7ig9cz57f] {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.pacing-ahead[b-v7ig9cz57f] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    color: var(--glytic-primary);
}

.pacing-behind[b-v7ig9cz57f] {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}

.pacing-warn[b-v7ig9cz57f] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
    animation: pacing-pulse-b-v7ig9cz57f 2s ease-in-out infinite;
}

.pacing-icon[b-v7ig9cz57f] {
    flex-shrink: 0;
}

.pacing-text[b-v7ig9cz57f] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes pacing-pulse-b-v7ig9cz57f {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@media (max-width: 768px) {
    .pacing-strip[b-v7ig9cz57f] {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        min-height: 32px;
    }
}
/* /Pages/Components/PostQuizCoachCard.razor.rz.scp.css */
/* PostQuizCoachCard - compact coaching card after quiz completion */

.post-quiz-coach[b-vowzn92vv9] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.post-quiz-coach[b-vowzn92vv9]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--glytic-primary), rgba(160,32,240,0.6));
}

/* Skeleton loading */
.coach-skeleton[b-vowzn92vv9] {
    padding: 0.5rem 0;
}

/* Stats row */
.coach-stats-row[b-vowzn92vv9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.readiness-badge[b-vowzn92vv9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 255, 231, 0.08);
    border: 1px solid rgba(0, 255, 231, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    min-width: 64px;
}

.readiness-value[b-vowzn92vv9] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--glytic-primary);
    line-height: 1.2;
}

.readiness-label[b-vowzn92vv9] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-muted);
}

.readiness-delta[b-vowzn92vv9] {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.readiness-delta.positive[b-vowzn92vv9] {
    color: var(--glytic-success);
    background: rgba(72, 187, 120, 0.1);
}

.readiness-delta.negative[b-vowzn92vv9] {
    color: var(--glytic-error);
    background: rgba(255, 107, 107, 0.1);
}

.days-remaining[b-vowzn92vv9] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
}

/* Coach message */
.coach-message[b-vowzn92vv9] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem 0;
}

/* Weak area callout */
.weak-area-callout[b-vowzn92vv9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 167, 38, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(255, 167, 38, 0.15);
}

.weak-area-callout strong[b-vowzn92vv9] {
    color: var(--glytic-text-primary);
}

/* Actions */
.coach-actions[b-vowzn92vv9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-vowzn92vv9] .coach-primary-cta {
    text-transform: none;
    font-weight: 600;
}

[b-vowzn92vv9] .coach-secondary-cta {
    text-transform: none;
}

/* Mobile */
@media (max-width: 600px) {
    .post-quiz-coach[b-vowzn92vv9] {
        padding: 0.75rem 1rem;
    }

    .coach-stats-row[b-vowzn92vv9] {
        gap: 0.5rem;
    }

    .coach-actions[b-vowzn92vv9] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Components/QuestionGlossPanel.razor.rz.scp.css */
/*
 * QuestionGlossPanel -- scoped styles.
 * "Translate this question" affordance on the quiz question card. All design tokens from
 * quizforge.css :root. The glossed content is injected via MarkupString, so the chip rules
 * must use ::deep to reach it. rgba() only for glows where no exact token exists.
 * No !important outside the reduced-motion reset.
 */

.qgloss[b-tw341xt5ew] {
    margin: 0 0 0.9rem;
}

/* Quiet recipe (button system 2026-09-23): text action between the question text and the
   answer options -- no background, no border. */
.qgloss-toggle[b-tw341xt5ew] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.qgloss-toggle:hover[b-tw341xt5ew],
.qgloss-toggle.is-open[b-tw341xt5ew] {
    color: var(--glytic-text-primary);
}

.qgloss-toggle:hover .qgloss-toggle-text[b-tw341xt5ew],
.qgloss-toggle.is-open .qgloss-toggle-text[b-tw341xt5ew] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.qgloss-toggle:focus-visible[b-tw341xt5ew] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.qgloss-ico[b-tw341xt5ew] {
    flex-shrink: 0;
    opacity: 0.9;
}

/* Expanded translation body: read-only glossed stem + options. */
.qgloss-body[b-tw341xt5ew] {
    margin-top: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--glytic-border-radius-small);
    border: 1px solid var(--glytic-border);
    background: var(--glytic-surface);
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.qgloss-note[b-tw341xt5ew] {
    font-size: 0.85rem;
    color: var(--glytic-text-secondary);
    line-height: 1.45;
}

.qgloss-note a[b-tw341xt5ew] {
    color: var(--forge-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Quiet recipe (button system 2026-09-23): retry-in-row text action. */
.qgloss-retry[b-tw341xt5ew] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.qgloss-retry:hover[b-tw341xt5ew] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.qgloss-retry:focus-visible[b-tw341xt5ew] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Skeleton shimmer while the first gloss streams in. */
.qgloss-skeleton[b-tw341xt5ew] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qgloss-skeleton span[b-tw341xt5ew] {
    display: block;
    height: 0.7rem;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    background-size: 200% 100%;
    animation: qgloss-shimmer-b-tw341xt5ew 1.2s infinite;
    will-change: background-position;
}

.qgloss-skeleton span:nth-child(2)[b-tw341xt5ew] { width: 85%; }
.qgloss-skeleton span:nth-child(3)[b-tw341xt5ew] { width: 60%; }

@keyframes qgloss-shimmer-b-tw341xt5ew {
    to { background-position: -200% 0; }
}

/* ========================================
   INJECTED CHIPS (MarkupString -> ::deep)
   Tapping a chip speaks the word (js/qf-tts.js) and shows its translation popup.
   Mirrors the tutor's chip styling so the two surfaces read as one system.
   ======================================== */

.qgloss-body[b-tw341xt5ew]  p {
    margin: 0 0 0.5rem;
}

.qgloss-body[b-tw341xt5ew]  p:last-child {
    margin-bottom: 0;
}

.qgloss-body[b-tw341xt5ew]  .tts-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin: 0.12em 0.12em;
    padding: 0.04em 0.4em;
    border-radius: 6px;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-gradient-card);
    color: var(--glytic-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: baseline;
    cursor: pointer;
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition), transform 0.08s ease;
}

.qgloss-body[b-tw341xt5ew]  .tts-chip-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.qgloss-body[b-tw341xt5ew]  .tts-chip:hover {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.qgloss-body[b-tw341xt5ew]  .tts-chip:focus-visible {
    outline: none;
    border-color: var(--glytic-border-hover);
    box-shadow: 0 0 0 2px rgba(92, 168, 184, 0.35); /* focus ring -- no exact token */
}

.qgloss-body[b-tw341xt5ew]  .tts-chip:active {
    transform: scale(0.97);
}

.qgloss-body[b-tw341xt5ew]  .tts-chip.is-speaking {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.qgloss-body[b-tw341xt5ew]  .tts-ico {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Translation popup -- hover (desktop), focus, or tap (mobile, .tts-show via qf-tts.js).
   max-width caps to the viewport so it stays readable on a 390px phone. */
.qgloss-body[b-tw341xt5ew]  .tts-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    min-width: max-content;
    max-width: min(240px, 78vw);
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: var(--glytic-bg-dark, #11151f);
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.qgloss-body[b-tw341xt5ew]  .tts-chip:hover .tts-pop,
.qgloss-body[b-tw341xt5ew]  .tts-chip:focus-within .tts-pop,
.qgloss-body[b-tw341xt5ew]  .tts-chip.tts-show .tts-pop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.qgloss-body[b-tw341xt5ew]  .tts-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--glytic-border-hover);
}

@media (prefers-reduced-motion: reduce) {
    .qgloss-skeleton span[b-tw341xt5ew] {
        animation: none !important;
    }
}
/* /Pages/Components/QuestionImages.razor.rz.scp.css */
.question-images[b-uxjkfve42u] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 1.25rem;
}

.question-image-figure[b-uxjkfve42u] {
    margin: 0;
}

.question-image[b-uxjkfve42u] {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    background: var(--mud-palette-surface, #fff);
}
/* /Pages/Components/QuizResults.razor.rz.scp.css */
/* =====================================================================
   QuizResults -- Focus Mode Glass Card
   ===================================================================== */
.qr-container[b-qgi86h63v7] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

/* On phones the PWA install banner is fixed to the bottom (~z-index 1400). Reserve space so the
   last results CTAs are never hidden behind it. The banner's route-gating is Workstream F's job;
   this padding keeps our layout usable regardless. */
@media (max-width: 600px) {
    .qr-container[b-qgi86h63v7] {
        padding-bottom: calc(1rem + 96px + env(safe-area-inset-bottom, 0px));
    }
}

/* Composed Strike: solid cut-corner plane (was a rounded backdrop-blur glass).
   clip-path shears box-shadow, so elevation reads through the border, not a glow. */
.qr-glass[b-qgi86h63v7] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    overflow: hidden;
}

/* clip-card shears a real 1px border off the two cut corners, so draw the outline via the
   double-layer reveal: the plane FILL is the outline color and a ::before inset 1px paints
   the interior surface, letting the outline follow the bevel. isolation:isolate + z-index:-1
   keeps content (incl. component-rendered children) above the interior without lift rules. */
.qr-glass[b-qgi86h63v7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

/* Premium upsell / guest preview wall -- Composed Strike (Task 9).
   Paywall-family surface: cut-corner plane, ember primary + teal ghost, no purple.
   (The old ai-card-style/ai-overlay pairing injected a purple radial; removed in
   markup. clip-path shears box-shadow, so no glow here.) */
.qr-upsell[b-qgi86h63v7] {
    position: relative;
    isolation: isolate;
    margin: 0.75rem 1rem 1rem;
    padding: 1rem 1.15rem;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border-hover);
    box-shadow: none;
    overflow: hidden;
}

/* Bevel-following outline via double-layer reveal (a real border is sheared off the cut
   corners): plane FILL = outline color; ::before inset 1px paints the interior surface.
   isolation:isolate + z-index:-1 keeps content above the interior without lift rules. */
.qr-upsell[b-qgi86h63v7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

/* Two columns: copy (flexible, can wrap/truncate safely) + actions (sized to content).
   No icon column -- the upsell icon was removed from the markup (Composed Strike). */
.qr-upsell-content[b-qgi86h63v7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
}

.qr-upsell-title[b-qgi86h63v7] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    line-height: 1.2;
}

.qr-upsell-subtitle[b-qgi86h63v7] {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
}

.qr-upsell-actions[b-qgi86h63v7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Upgrade CTA (button system 2026-09-23): real border, no clip-path/::before layer. Base
   holds shared shape; .qr-upgrade-monthly is PRIMARY, .qr-upgrade-annual is SECONDARY. */
.qr-upgrade-btn[b-qgi86h63v7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-md);
    padding: 0.65rem 1rem;
    border-radius: var(--qf-btn-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.qr-upgrade-btn:focus-visible[b-qgi86h63v7] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Primary action -- ember (See Premium yearly checkout for guests / Go Premium monthly for free users). */
.qr-upgrade-monthly[b-qgi86h63v7] {
    border-color: var(--forge-primary);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-weight: 700;
}

.qr-upgrade-monthly:hover[b-qgi86h63v7] {
    background: var(--forge-gradient);
}

/* Secondary action -- teal hairline (Sign up free for guests / annual for free users). */
.qr-upgrade-annual[b-qgi86h63v7] {
    border-color: var(--glytic-border-hover);
    background: transparent;
    color: var(--glytic-text-primary);
}

.qr-upgrade-annual:hover[b-qgi86h63v7] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

/* Body */
.qr-body[b-qgi86h63v7] {
    padding: 1rem 1.125rem 1.25rem;
}

/* Simulation banner */
.qr-sim-banner[b-qgi86h63v7] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.7rem 0.875rem;
    border-radius: 9px;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.qr-sim-banner strong[b-qgi86h63v7] {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.qr-sim-pass[b-qgi86h63v7] {
    background: rgba(var(--glytic-score-pass-rgb), 0.07);
    border: 1px solid rgba(var(--glytic-score-pass-rgb), 0.2);
    color: var(--glytic-score-pass);
}

.qr-sim-pass span[b-qgi86h63v7] { color: var(--glytic-text-secondary); }

.qr-sim-fail[b-qgi86h63v7] {
    background: rgba(var(--glytic-score-fail-rgb), 0.07);
    border: 1px solid rgba(var(--glytic-score-fail-rgb), 0.2);
    color: var(--glytic-score-fail);
}

.qr-sim-fail span[b-qgi86h63v7] { color: var(--glytic-text-secondary); }

/* Section title */
.qr-section-title[b-qgi86h63v7] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glytic-text-muted);
    font-weight: 700;
    margin-bottom: 0.625rem;
    margin-top: 1rem;
}

/* Section table (simulation) */
.qr-section-table[b-qgi86h63v7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}

.qr-section-table th[b-qgi86h63v7] {
    color: var(--glytic-text-muted);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.qr-section-table td[b-qgi86h63v7] {
    padding: 0.45rem 0.5rem;
    color: var(--glytic-text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.qr-pct[b-qgi86h63v7] { font-weight: 600; }
.qr-pct.pass[b-qgi86h63v7], .qr-pct-pass[b-qgi86h63v7] { color: var(--glytic-score-pass); }
.qr-pct.mid[b-qgi86h63v7],  .qr-pct-mid[b-qgi86h63v7]  { color: var(--glytic-score-mid); }
.qr-pct.fail[b-qgi86h63v7], .qr-pct-fail[b-qgi86h63v7] { color: var(--glytic-text-secondary); }

/* Topic bars */
.qr-topic-row[b-qgi86h63v7] { margin-bottom: 0.625rem; }

.qr-topic-meta[b-qgi86h63v7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.qr-topic-name[b-qgi86h63v7] {
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
}

.qr-topic-pct[b-qgi86h63v7] {
    font-size: 0.73rem;
    font-weight: 600;
}

.qr-topic-bar[b-qgi86h63v7] {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
}

.qr-topic-fill[b-qgi86h63v7] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.qr-fill-pass[b-qgi86h63v7] { background: var(--glytic-score-pass); }
.qr-fill-mid[b-qgi86h63v7]  { background: var(--glytic-score-mid); }
.qr-fill-fail[b-qgi86h63v7] { background: rgba(255, 255, 255, 0.25); }

/* Review toggle */
.qr-review-toggle[b-qgi86h63v7] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    margin: 1rem 0 0.75rem;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    background: var(--glytic-bg-card, rgba(26, 30, 48, 0.6));
    color: var(--glytic-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.qr-review-toggle:hover[b-qgi86h63v7] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.qr-review-toggle:focus-visible[b-qgi86h63v7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.qr-review-toggle span[b-qgi86h63v7] {
    min-width: 0;
}

[b-qgi86h63v7] .qr-review-toggle .mud-icon-root {
    flex-shrink: 0;
    color: var(--glytic-text-muted);
}

/* Review tabs */
.qr-review-tabs[b-qgi86h63v7] {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

/* Tab recipe (button system 2026-09-23): no fill, muted label, 2px bottom indicator when
   selected -- the filled "active tab" block is retired for controls. */
.qr-tab[b-qgi86h63v7] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--glytic-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.qr-tab:hover[b-qgi86h63v7] {
    color: var(--glytic-text-primary);
}

.qr-tab--active[b-qgi86h63v7] {
    border-bottom-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.qr-tab:focus-visible[b-qgi86h63v7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Review list */
.qr-review-list[b-qgi86h63v7] { margin-bottom: 1rem; }

.qr-review-item[b-qgi86h63v7] {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    align-items: flex-start;
}

.qr-review-icon[b-qgi86h63v7] { flex-shrink: 0; margin-top: 2px; }
.qr-icon-pass[b-qgi86h63v7] { color: var(--glytic-score-pass); }
.qr-icon-fail[b-qgi86h63v7] { color: var(--glytic-score-fail); }

.qr-review-content[b-qgi86h63v7] { flex: 1; min-width: 0; }

.qr-review-cat[b-qgi86h63v7] {
    font-size: 0.65rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.2rem;
}

.qr-review-q[b-qgi86h63v7] {
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
    line-height: 1.45;
}

.qr-review-answer[b-qgi86h63v7] {
    font-size: 0.72rem;
    margin-top: 0.2rem;
    line-height: 1.35;
}

.qr-review-wrong[b-qgi86h63v7]  { color: var(--glytic-score-fail); }
.qr-review-correct[b-qgi86h63v7] { color: var(--glytic-score-pass); }

/* Action buttons */
.qr-actions[b-qgi86h63v7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.qr-btn[b-qgi86h63v7] {
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-sm);
    padding: 0.65rem 1rem;
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qr-btn:focus-visible[b-qgi86h63v7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.qr-btn--secondary[b-qgi86h63v7] {
    background: transparent;
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.qr-btn--secondary:hover[b-qgi86h63v7] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.qr-btn--text[b-qgi86h63v7] {
    background: transparent;
    border-color: transparent;
    color: var(--glytic-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
}

.qr-btn--text:hover[b-qgi86h63v7] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 720px) {
    /* Stack copy above actions -- single column, so long localized strings never squeeze. */
    .qr-upsell-content[b-qgi86h63v7] {
        grid-template-columns: 1fr;
    }

    .qr-upsell-actions[b-qgi86h63v7] {
        justify-content: stretch;
    }

    .qr-upgrade-btn[b-qgi86h63v7] {
        flex: 1 1 12rem;
    }
}

@media (max-width: 420px) {
    .qr-upsell[b-qgi86h63v7] {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding: 0.875rem;
    }

    .qr-upgrade-btn[b-qgi86h63v7] {
        width: 100%;
    }
}

/* =====================================================================
   Results poster -- the loud bone plate (Composed Strike). The one shout
   on an otherwise quiet flow: ink score with a crimson percent, a FORGED
   stamp only on a pass, skew-divided stats, two faint rays.
   ===================================================================== */
.qr-poster[b-qgi86h63v7] {
    position: relative;
    /* 30px angular cut corners, larger than the standard card cut */
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    padding: clamp(1.5rem, 5vw, 2.75rem);
    margin-bottom: 1rem;
    overflow: hidden;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

/* Two faint rays aimed at the score. Decorative, aria-hidden; fill set via class
   (SVG presentation attributes cannot take a CSS var). */
.qr-rays[b-qgi86h63v7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.qr-ray--crimson[b-qgi86h63v7] { fill: var(--qf-crimson); opacity: 0.10; }
.qr-ray--teal[b-qgi86h63v7]    { fill: var(--glytic-primary); opacity: 0.10; }

.qr-poster-inner[b-qgi86h63v7] { position: relative; z-index: 1; }

.qr-poster-eyebrow[b-qgi86h63v7] { display: block; }

.qr-poster-score-row[b-qgi86h63v7] {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.qr-poster-score[b-qgi86h63v7] {
    font-family: var(--glytic-font-heading);
    font-weight: 400;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: 0.85;
    color: var(--qf-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.qr-poster-score sup[b-qgi86h63v7] {
    font-size: 0.32em;
    vertical-align: super;
    color: var(--qf-crimson);
}

/* Large-text AA: crimson (--qf-crimson) on bone is 3.83:1, which clears the >=3:1
   bar only when the stamp qualifies as large text. Enforce a >=1.6rem floor and 700
   weight at every breakpoint so it always qualifies. */
.qr-poster-stamp[b-qgi86h63v7] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
}

.qr-poster-verdict[b-qgi86h63v7] {
    margin-top: 0.9rem;
    max-width: 46ch;
    font-size: 0.95rem;
    line-height: 1.5;
    /* lifted ink for body copy on the bone poster (alpha blends toward the paper) */
    color: rgba(var(--qf-ink-rgb), 0.88);
}

.qr-poster-verdict strong[b-qgi86h63v7] { color: var(--qf-ink); }
.qr-poster-verdict--drill strong[b-qgi86h63v7] { color: var(--forge-primary); }

.qr-poster-stats[b-qgi86h63v7] {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    border-top: 3px solid var(--qf-ink);
}

.qr-poster-stat[b-qgi86h63v7] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.9rem 0.8rem 0.2rem 0;
}

.qr-poster-stat + .qr-poster-stat[b-qgi86h63v7] { padding-left: 1rem; }

.qr-poster-stat + .qr-poster-stat[b-qgi86h63v7]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    bottom: 0.25rem;
    width: 3px;
    background: var(--qf-crimson);
    transform: skewX(-14deg);
}

.qr-poster-stat b[b-qgi86h63v7] {
    display: block;
    font-family: var(--glytic-font-heading);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--qf-ink);
    font-variant-numeric: tabular-nums;
}

.qr-poster-stat span[b-qgi86h63v7] {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qf-bone-dim);
}

.qr-poster-cta[b-qgi86h63v7] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

/* Poster CTA (button system 2026-09-23): real border, no clip-path/::before layer. Primary
   is ember/ink; ghost is an ink hairline on the bone poster (keeps the print accent). */
.qr-poster-btn[b-qgi86h63v7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-md);
    padding: 0.7rem 1.5rem;
    border-radius: var(--qf-btn-radius);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qr-poster-btn--primary[b-qgi86h63v7] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.qr-poster-btn--primary:hover[b-qgi86h63v7] { background: var(--forge-gradient); }

.qr-poster-btn--ghost[b-qgi86h63v7] {
    background: transparent;
    border: 1px solid rgba(var(--qf-ink-rgb), 0.5);
    color: var(--qf-ink);
}

.qr-poster-btn--ghost:hover[b-qgi86h63v7] { background: rgba(var(--qf-ink-rgb), 0.08); border-color: var(--qf-ink); }

.qr-poster-btn:focus-visible[b-qgi86h63v7] {
    outline: 2px solid var(--qf-ink);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .qr-poster-stat[b-qgi86h63v7] { flex: 1 1 50%; }
    .qr-poster-stat:nth-child(odd)[b-qgi86h63v7] { padding-left: 0; }
    .qr-poster-stat:nth-child(odd)[b-qgi86h63v7]::before { display: none; }
    .qr-poster-btn[b-qgi86h63v7] { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .qr-poster-btn[b-qgi86h63v7] { transition: none; }
}

/* -- Guest readiness report: one row per blueprint domain covered by the check -- */
.qr-readiness[b-qgi86h63v7] {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--glytic-border);
    border-left: 3px solid var(--glytic-primary);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-gradient-card);
}

.qr-readiness-head[b-qgi86h63v7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.qr-readiness-title[b-qgi86h63v7] {
    font-family: var(--glytic-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glytic-text-secondary);
}

.qr-readiness-verdict[b-qgi86h63v7] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-primary);
}

.qr-readiness-rows[b-qgi86h63v7] {
    display: flex;
    flex-direction: column;
}

.qr-readiness-row[b-qgi86h63v7] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.qr-readiness-row:last-child[b-qgi86h63v7] { border-bottom: none; }

.qr-readiness-ico[b-qgi86h63v7] {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.qr-readiness-ico.is-solid[b-qgi86h63v7] { color: var(--glytic-primary); }
.qr-readiness-ico.is-gap[b-qgi86h63v7] { color: var(--forge-primary); }

.qr-readiness-domain[b-qgi86h63v7] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--glytic-text-primary);
    overflow-wrap: anywhere;
}

.qr-readiness-score[b-qgi86h63v7] {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    font-variant-numeric: tabular-nums;
}

.qr-readiness-note[b-qgi86h63v7] {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--glytic-text-muted);
}

/* Guest email unlock card (readiness check -> email -> 5 more questions). Same cut-corner
   paywall-family surface as .qr-upsell so the two rungs read as one ladder; it sits above
   the checkout upsell without competing with the ember CTA. */
.qr-unlock[b-qgi86h63v7],
.qr-continue[b-qgi86h63v7] {
    position: relative;
    isolation: isolate;
    margin: 0.75rem 1rem 0;
    padding: 1rem 1.15rem;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border-hover);
    overflow: hidden;
}

/* Continuation experiment block: the unlock recipe in the upsell's slot, so it carries the
   upsell's bottom margin. One ember primary; the paid option is the quiet text link. */
.qr-continue[b-qgi86h63v7] {
    margin-bottom: 1rem;
}

.qr-continue-account[b-qgi86h63v7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.qr-continue-premium[b-qgi86h63v7] {
    color: var(--glytic-text-secondary);
}

.qr-continue-quiet[b-qgi86h63v7] {
    color: var(--glytic-text-secondary);
    text-decoration: none;
}

.qr-continue-quiet:hover[b-qgi86h63v7],
.qr-continue-quiet:focus-visible[b-qgi86h63v7] {
    text-decoration: underline;
}

.qr-unlock[b-qgi86h63v7]::before,
.qr-continue[b-qgi86h63v7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.qr-unlock-inner[b-qgi86h63v7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qr-unlock-title[b-qgi86h63v7] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    line-height: 1.2;
}

.qr-unlock-sub[b-qgi86h63v7] {
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
}

.qr-unlock-form[b-qgi86h63v7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.qr-unlock-label[b-qgi86h63v7] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

.qr-unlock-row[b-qgi86h63v7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
}

.qr-unlock-input[b-qgi86h63v7] {
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--glytic-text-primary);
    background: var(--glytic-bg-dark);
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    outline: none;
}

.qr-unlock-input:focus-visible[b-qgi86h63v7] {
    border-color: var(--glytic-primary);
    box-shadow: 0 0 0 2px var(--glytic-border-hover);
}

.qr-unlock-input:disabled[b-qgi86h63v7] {
    opacity: 0.6;
}

.qr-unlock-btn[b-qgi86h63v7] {
    white-space: nowrap;
    cursor: pointer;
    font: inherit;
}

.qr-unlock-btn:disabled[b-qgi86h63v7] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Honeypot: visually removed but still in the DOM for bots that fill every field. */
.qr-unlock-hp[b-qgi86h63v7] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.qr-unlock-error[b-qgi86h63v7] {
    font-size: 0.78rem;
    color: var(--glytic-error);
}

.qr-unlock-consent[b-qgi86h63v7] {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--glytic-text-muted);
}

.qr-unlock-consent a[b-qgi86h63v7] {
    color: var(--glytic-text-secondary);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .qr-unlock[b-qgi86h63v7],
    .qr-continue[b-qgi86h63v7] {
        margin: 0.75rem 0.5rem 0;
    }

    .qr-continue[b-qgi86h63v7] {
        margin-bottom: 1rem;
    }

    .qr-unlock-row[b-qgi86h63v7] {
        grid-template-columns: 1fr;
    }
}

.qr-review-prompt[b-qgi86h63v7] {
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
}

.qr-review-prompt-text[b-qgi86h63v7] {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
}

.qr-review-prompt-input[b-qgi86h63v7] {
    margin: 8px 0;
}

.qr-review-prompt-thanks[b-qgi86h63v7] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--glytic-primary);
}

.qr-review-prompt-error[b-qgi86h63v7] {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
}
/* /Pages/Components/ScenarioDialog.razor.rz.scp.css */
[b-c9ws2li9j7] .mud-dialog {
    background: linear-gradient(155deg, #111827 0%, #1a2235 50%, #151d2e 100%);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
}

[b-c9ws2li9j7] .mud-dialog-title {
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.scenario-dialog-content[b-c9ws2li9j7] {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.scenario-dialog-text[b-c9ws2li9j7] {
    font-size: 0.95rem;
    line-height: 1.7;
}

.scenario-title[b-c9ws2li9j7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-heading);
    letter-spacing: 0.01em;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--glytic-border);
}

.scenario-para[b-c9ws2li9j7] {
    color: var(--glytic-text-secondary);
    margin: 0 0 0.6rem 0;
}

.scenario-list[b-c9ws2li9j7] {
    color: var(--glytic-text-secondary);
    padding-left: 1.4rem;
    margin: 0.25rem 0 0.6rem 0;
}

.scenario-list li[b-c9ws2li9j7] {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}
/* /Pages/Components/ShareProgressCard.razor.rz.scp.css */
.share-loading[b-qw7jot7bgf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.share-preview[b-qw7jot7bgf] {
    text-align: center;
}

.share-card-image[b-qw7jot7bgf] {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--glytic-border);
}

.share-buttons[b-qw7jot7bgf] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Needs ::deep -- MudButton's Class lands on the component root, which scoped CSS
   otherwise never reaches. */
[b-qw7jot7bgf] .share-btn {
    min-width: 120px;
}

/* Brand colors kept (recognizable social identity); label switched to --qf-ink
   (white on either background measured under 3:1, failing WCAG AA). Matches root
   layer's two-class specificity (.mud-button-filled.share-btn-*) so it wins by load
   order -- these MudButtons have no Color set, so the root layer would otherwise
   paint them tonal grey. */
[b-qw7jot7bgf] .mud-button-filled.share-btn-twitter {
    --share-twitter-bg: #1DA1F2;
    background-color: var(--share-twitter-bg);
    border-color: var(--share-twitter-bg);
    color: var(--qf-ink);
}

[b-qw7jot7bgf] .mud-button-filled.share-btn-twitter:hover {
    filter: brightness(1.1);
}

[b-qw7jot7bgf] .mud-button-filled.share-btn-whatsapp {
    --share-whatsapp-bg: #25D366;
    background-color: var(--share-whatsapp-bg);
    border-color: var(--share-whatsapp-bg);
    color: var(--qf-ink);
}

[b-qw7jot7bgf] .mud-button-filled.share-btn-whatsapp:hover {
    filter: brightness(1.1);
}
/* /Pages/Components/SourceReceipt.razor.rz.scp.css */
/* Grounding receipt. Brand tokens only; no hardcoded colors, no !important.
   MudBlazor internals (the chip, the expansion panel) are reached with ::deep. */
.src-receipt[b-opzw0hsz9x] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--glytic-bg-card);
    border-left: 2px solid var(--forge-primary);
    border-radius: 0 4px 4px 0;
}

.src-receipt--reference[b-opzw0hsz9x] {
    border-left-color: var(--glytic-border-hover);
}

.src-receipt-head[b-opzw0hsz9x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.src-receipt-host[b-opzw0hsz9x] {
    font-family: var(--glytic-font-body);
    font-size: 0.75rem;
    color: var(--glytic-text-secondary);
    letter-spacing: 0.01em;
}

.src-receipt-disclaimer[b-opzw0hsz9x] {
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--glytic-text-secondary);
}

.src-receipt-quote[b-opzw0hsz9x] {
    margin: 0.5rem 0 0;
    padding-left: 0.6rem;
    border-left: 1px solid var(--glytic-border);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--glytic-text-primary);
}

.src-receipt-attribution[b-opzw0hsz9x] {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--glytic-text-secondary);
}

[b-opzw0hsz9x] .src-receipt-chip {
    margin: 0;
}

[b-opzw0hsz9x] .src-receipt-panels .mud-expand-panel {
    background: transparent;
}
/* /Pages/Components/SourceViewer.razor.rz.scp.css */
/* In-app source viewer: bottom sheet on phones, centered dialog on wide screens. */

.srcv-backdrop[b-x45x17wmst] {
    position: fixed;
    inset: 0;
    z-index: 1490;
    background: rgba(6, 9, 14, 0.6);
    backdrop-filter: blur(3px);
}

.srcv-sheet[b-x45x17wmst] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1491;
    max-height: 82dvh;
    display: flex;
    flex-direction: column;
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.97));
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
    animation: srcv-up-b-x45x17wmst 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

@keyframes srcv-up-b-x45x17wmst {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (min-width: 700px) {
    .srcv-sheet[b-x45x17wmst] {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(560px, 92vw);
        max-height: 76vh;
        border-radius: 20px;
        border-bottom: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
        padding-bottom: 18px;
    }

    @keyframes srcv-up-b-x45x17wmst {
        from { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; }
        to { transform: translate(-50%, -50%); opacity: 1; }
    }

    .srcv-grab[b-x45x17wmst] { display: none; }
}

.srcv-grab[b-x45x17wmst] {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.4);
    margin: 4px auto 12px;
    flex: none;
}

.srcv-head[b-x45x17wmst] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0 12px;
    flex: none;
    color: var(--glytic-primary, #5CA8B8);
}

.srcv-head-text[b-x45x17wmst] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.srcv-title[b-x45x17wmst] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--glytic-text-primary, #f0f0f0);
    overflow-wrap: anywhere;
}

.srcv-domain[b-x45x17wmst] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted, #a0a0a0);
    letter-spacing: 0.03em;
}

.srcv-body[b-x45x17wmst] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.srcv-body-text[b-x45x17wmst] {
    margin: 4px 0 10px;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-line;
}

.srcv-quote[b-x45x17wmst] {
    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid var(--glytic-primary, #5CA8B8);
    background: rgba(92, 168, 184, 0.07);
    border-radius: 0 12px 12px 0;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-line;
}

.srcv-attribution[b-x45x17wmst] {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--glytic-text-muted, #a0a0a0);
}

.srcv-empty[b-x45x17wmst] {
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--glytic-text-muted, #a0a0a0);
}

.srcv-actions[b-x45x17wmst] {
    flex: none;
    display: grid;
    gap: 8px;
    padding-top: 14px;
}

.srcv-open[b-x45x17wmst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--glytic-border-radius-small, 12px);
    background: var(--forge-gradient-btn, linear-gradient(135deg, #D07040 0%, #B86038 100%));
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: var(--forge-shadow, 0 4px 16px rgba(192, 96, 48, 0.25));
}

/* Secondary recipe (button system 2026-09-23): the sheet's alternative/dismiss action. */
.srcv-back[b-x45x17wmst] {
    min-height: var(--qf-btn-h-md, 44px);
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius, 8px);
    background: transparent;
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.srcv-back:hover[b-x45x17wmst] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.srcv-open:focus-visible[b-x45x17wmst],
.srcv-back:focus-visible[b-x45x17wmst] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .srcv-sheet[b-x45x17wmst] { animation: none; }
}
/* /Pages/ConfirmEmail.razor.rz.scp.css */
/* Confirm Email page — layout handled by .qf-panel-page / .qf-panel in quizforge.css */
/* /Pages/Contact.razor.rz.scp.css */
.legal-page[b-pejbx0p14x] {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 1.5rem 4rem;
    color: var(--glytic-text-primary);
}

.legal-header[b-pejbx0p14x] {
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1[b-pejbx0p14x] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #8FD0DE 0%, var(--glytic-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-effective[b-pejbx0p14x] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.legal-content[b-pejbx0p14x] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legal-section[b-pejbx0p14x] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.legal-section h2[b-pejbx0p14x] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--glytic-primary);
    margin: 0 0 1rem;
}

.legal-section p[b-pejbx0p14x] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.legal-section p:last-child[b-pejbx0p14x] {
    margin-bottom: 0;
}

.legal-section ul[b-pejbx0p14x] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0.75rem;
}

.legal-section ul:last-child[b-pejbx0p14x] {
    margin-bottom: 0;
}

.legal-section li[b-pejbx0p14x] {
    margin-bottom: 0.4rem;
}

.legal-section li[b-pejbx0p14x]::marker {
    color: var(--glytic-primary);
}

.legal-section a[b-pejbx0p14x] {
    color: var(--glytic-primary);
    text-decoration: none;
    transition: opacity var(--glytic-transition);
}

.legal-section a:hover[b-pejbx0p14x] {
    opacity: 0.8;
    text-decoration: underline;
}

.contact-email[b-pejbx0p14x] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .legal-page[b-pejbx0p14x] {
        padding: 60px 1rem 3rem;
    }

    .legal-section[b-pejbx0p14x] {
        padding: 1.25rem;
    }
}
/* /Pages/Copyright.razor.rz.scp.css */
.legal-page[b-mcjtj43zib] {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 1.5rem 4rem;
    color: var(--glytic-text-primary);
}

.legal-header[b-mcjtj43zib] {
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1[b-mcjtj43zib] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #8FD0DE 0%, var(--glytic-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-effective[b-mcjtj43zib] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.legal-content[b-mcjtj43zib] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legal-section[b-mcjtj43zib] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.legal-section h2[b-mcjtj43zib] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--glytic-primary);
    margin: 0 0 1rem;
}

.legal-section h3[b-mcjtj43zib] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 1.25rem 0 0.5rem;
}

.legal-section h3:first-of-type[b-mcjtj43zib] {
    margin-top: 0;
}

.legal-section p[b-mcjtj43zib] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.legal-section p:last-child[b-mcjtj43zib] {
    margin-bottom: 0;
}

.legal-section ul[b-mcjtj43zib] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0.75rem;
}

.legal-section ul:last-child[b-mcjtj43zib] {
    margin-bottom: 0;
}

.legal-section li[b-mcjtj43zib] {
    margin-bottom: 0.4rem;
}

.legal-section li[b-mcjtj43zib]::marker {
    color: var(--glytic-primary);
}

.legal-section a[b-mcjtj43zib] {
    color: var(--glytic-primary);
    text-decoration: none;
    transition: opacity var(--glytic-transition);
}

.legal-section a:hover[b-mcjtj43zib] {
    opacity: 0.8;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .legal-page[b-mcjtj43zib] {
        padding: 60px 1rem 3rem;
    }

    .legal-section[b-mcjtj43zib] {
        padding: 1.25rem;
    }
}
/* /Pages/CreateExamWizard.razor.rz.scp.css */
/* =====================================================
   CreateExamWizard -- scoped styles
   Uses CSS variables from quizforge.css
   No !important; MudBlazor overrides use ::deep
   ===================================================== */

/* Loading / upsell states */
.wizard-loading[b-8onk1rdh7t],
.wizard-upsell[b-8onk1rdh7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    text-align: center;
}

/* Free-tier gate: feature list + priced plan buttons (audit 2026-07-08 -- previously bare
   "Yearly"/"Monthly" buttons with no price and no feature list). */
.wizard-upsell-features[b-8onk1rdh7t] {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    max-width: 420px;
}

.wizard-upsell-features li[b-8onk1rdh7t] {
    position: relative;
    padding-left: 1.6rem;
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.wizard-upsell-features li[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(var(--glytic-primary-rgb), 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5L3.5 8.5l1-1 2 2 4.5-4.5 1 1z' fill='%235CA8B8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.wizard-upsell-plans[b-8onk1rdh7t] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

[b-8onk1rdh7t] .wizard-upsell-plan-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-transform: none;
    min-width: 160px;
    padding: 0.75rem 1.5rem;
}

.wizard-upsell-plan-main[b-8onk1rdh7t] {
    font-weight: 600;
}

.wizard-upsell-plan-price[b-8onk1rdh7t] {
    font-size: 0.8rem;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .wizard-upsell-plans[b-8onk1rdh7t] {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }

    [b-8onk1rdh7t] .wizard-upsell-plan-btn {
        width: 100%;
    }
}

/* ---- Shell ---- */
.wizard-shell[b-8onk1rdh7t] {
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ---- Step indicator bar ---- */
.wizard-step-bar[b-8onk1rdh7t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.step-item[b-8onk1rdh7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 60px;
}

/* The circle is a real <button>. It carries the 44px minimum touch target (WCAG) as a transparent
   box; the visible cut-corner plate sits inside at 36px. Keeping the hit area on the button (not a
   clip-path'd pseudo) matters because clip-path also clips pointer events -- a plate-sized clip
   would shrink the tap target. */
.step-circle[b-8onk1rdh7t] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Clickable (visited / completed) steps get the pointer + hover affordance. Non-navigable future
   steps keep the default cursor and the disabled dimming below. */
.step-navigable[b-8onk1rdh7t] {
    cursor: pointer;
}

.step-circle:focus-visible[b-8onk1rdh7t] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Non-navigable future step: dim the plate so it reads as inert. */
.step-circle:disabled .step-plate[b-8onk1rdh7t] {
    opacity: 0.5;
}

/* Visible cut-corner plate (was .step-circle before the button wrap). */
.step-plate[b-8onk1rdh7t] {
    width: 36px;
    height: 36px;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--glytic-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--glytic-border);
    color: var(--glytic-text-muted);
    position: relative;
    isolation: isolate;
    transition: background var(--glytic-transition), color var(--glytic-transition);
}

/* Double-layer reveal: element bg is the border color; ::before paints the interior fill so the
   "border" follows every edge, cut corners included (clip-path shears a real rectangular border). */
.step-plate[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

/* Navigable but not-yet-active/done (e.g. jumped back, can jump forward again): hover brightens. */
.step-navigable:hover .step-plate[b-8onk1rdh7t] {
    background: var(--glytic-border-hover);
}

/* Active step = ember (current focus); completed step = teal datum. Purple purged. */
.step-active .step-plate[b-8onk1rdh7t] {
    background: var(--forge-primary);
    color: var(--forge-primary);
}

.step-active .step-plate[b-8onk1rdh7t]::before {
    background: linear-gradient(rgba(var(--forge-primary-rgb), 0.15), rgba(var(--forge-primary-rgb), 0.15)), var(--glytic-bg-medium);
}

.step-done .step-plate[b-8onk1rdh7t] {
    background: var(--glytic-primary);
    color: var(--glytic-primary);
}

.step-done .step-plate[b-8onk1rdh7t]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.15), rgba(var(--glytic-primary-rgb), 0.15)), var(--glytic-bg-medium);
}

.step-label[b-8onk1rdh7t] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.step-active .step-label[b-8onk1rdh7t] {
    color: var(--forge-primary);
    font-weight: 600;
}

.step-done .step-label[b-8onk1rdh7t] {
    color: var(--glytic-primary);
}

.step-connector[b-8onk1rdh7t] {
    flex: 1;
    height: 2px;
    background: var(--glytic-border);
    min-width: 20px;
    max-width: 60px;
    margin-bottom: 1.25rem;
    transition: background var(--glytic-transition);
}

.step-connector-done[b-8onk1rdh7t] {
    background: var(--glytic-primary);
}

/* ---- Step panel ---- */
.wizard-step-panel[b-8onk1rdh7t] {
    padding: 0.25rem 0;
}

/* Card framing for the form steps (Input / Shape / Review) */
.wizard-card[b-8onk1rdh7t] {
    padding: 1.75rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* Interior at z-index:-1 under an isolated stacking context: content needs no lift (scoped
   child-lift rules never reach MudBlazor-rendered children, which carry no scope attribute). */
.wizard-card[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

/* ---- Source cards ---- */
.source-card[b-8onk1rdh7t] {
    padding: 1.5rem 1.25rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
    text-align: center;
    transition: background var(--glytic-transition);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Clickable card: focus-visible ring inset to follow the cut-corner bevel. */
.source-card:focus-visible[b-8onk1rdh7t] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.source-card[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

/* Reuse existing mode-card classes from dashboard */
.mode-card-active[b-8onk1rdh7t] {
    cursor: pointer;
}

.mode-card-active:hover[b-8onk1rdh7t] {
    background: var(--glytic-border-hover);
}

.mode-card-active:hover[b-8onk1rdh7t]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

.mode-card-disabled[b-8onk1rdh7t] {
    cursor: not-allowed;
    opacity: 0.55;
}

.mode-card-badge[b-8onk1rdh7t] {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0;
    border: 1px solid var(--glytic-primary);
    color: var(--glytic-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mode-card-badge-disabled[b-8onk1rdh7t] {
    border-color: var(--glytic-text-muted);
    color: var(--glytic-text-muted);
}

/* ---- Topic input row ---- */
.topic-input-row[b-8onk1rdh7t] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.topic-field[b-8onk1rdh7t] {
    flex: 1;
}

[b-8onk1rdh7t] .refine-btn {
    white-space: nowrap;
    flex-shrink: 0;
    height: 56px;
}

/* ---- Sub-topic chips ---- */
.subtopic-section[b-8onk1rdh7t] {
    padding: 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
}

.subtopic-section[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.subtopic-chips[b-8onk1rdh7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-8onk1rdh7t] .subtopic-chip {
    cursor: pointer;
}

/* ---- File upload (styled dropzone) ---- */
.file-input-wrapper[b-8onk1rdh7t] {
    border: 2px dashed var(--glytic-border);
    border-radius: 0;
    background: rgba(var(--glytic-primary-rgb), 0.03);
    padding: 1.5rem;
    text-align: center;
    transition: border-color var(--glytic-transition), background var(--glytic-transition);
}

.file-input-wrapper:hover[b-8onk1rdh7t] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.06);
}

[b-8onk1rdh7t] .file-input-wrapper input[type="file"] {
    width: 100%;
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

[b-8onk1rdh7t] .file-input-wrapper input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1.1rem;
    border-radius: 0;
    border: 1px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--glytic-transition);
}

[b-8onk1rdh7t] .file-input-wrapper input[type="file"]::file-selector-button:hover {
    background: rgba(var(--glytic-primary-rgb), 0.2);
}

.file-info[b-8onk1rdh7t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    border: 1px solid var(--glytic-border);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

/* ---- Weak areas / exam chips ---- */
.exam-chips[b-8onk1rdh7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Filter chip / pill recipe (2026-09-23 button system). */
.exam-chip[b-8onk1rdh7t] {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--qf-line);
    background: transparent;
    color: var(--glytic-text-secondary);
    font: 500 0.8125rem/1.2 var(--glytic-font-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.exam-chip:hover[b-8onk1rdh7t] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.exam-chip-active[b-8onk1rdh7t] {
    background: rgba(var(--glytic-primary-rgb), .14);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.exam-chip:focus-visible[b-8onk1rdh7t] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.exam-chip-count[b-8onk1rdh7t] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-primary);
}

.category-checkboxes[b-8onk1rdh7t] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.category-checkbox-row[b-8onk1rdh7t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0;
    background: rgba(var(--glytic-primary-rgb), 0.03);
}

.cat-name[b-8onk1rdh7t] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--glytic-text-primary);
}

.cat-accuracy[b-8onk1rdh7t] {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.accuracy-low[b-8onk1rdh7t] { color: var(--glytic-error); }
.accuracy-mid[b-8onk1rdh7t] { color: var(--glytic-warning); }
.accuracy-ok[b-8onk1rdh7t]  { color: var(--glytic-success); }

.cat-questions-badge[b-8onk1rdh7t] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 0;
    border: 1px solid var(--glytic-border);
    min-width: 32px;
    text-align: center;
}

/* ---- Loading state ---- */
.loading-state[b-8onk1rdh7t] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* ---- Saved doc list ---- */
.saved-doc-row[b-8onk1rdh7t] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
    cursor: pointer;
    margin: 0 0 0.5rem;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    transition: background var(--glytic-transition);
}

.saved-doc-row:focus-visible[b-8onk1rdh7t] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.saved-doc-row[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

.saved-doc-row:hover[b-8onk1rdh7t] {
    background: var(--glytic-border-hover);
}

.saved-doc-selected[b-8onk1rdh7t] {
    background: var(--glytic-primary);
}

.saved-doc-selected[b-8onk1rdh7t]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-card-bg);
}

/* ---- Slider ---- */
.slider-group[b-8onk1rdh7t] {
    padding: 0 0.25rem;
}

.slider-labels[b-8onk1rdh7t] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
}

/* ---- Step nav ---- */
.step-nav[b-8onk1rdh7t] {
    display: flex;
    gap: 1rem;
}

/* ---- Review summary ---- */
.review-summary[b-8onk1rdh7t] {
    padding: 1rem 1.25rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

/* ---- Sample question section ---- */
.sample-section[b-8onk1rdh7t] {
    padding: 1rem 1.25rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
}

.sample-section[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.03), rgba(var(--glytic-primary-rgb), 0.03)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.sample-header[b-8onk1rdh7t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sample-question-card[b-8onk1rdh7t] {
    padding: 1rem 1.25rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

.sample-answer[b-8onk1rdh7t] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0;
    margin-bottom: 0.25rem;
}

.sample-answer-correct[b-8onk1rdh7t] {
    background: rgba(var(--glytic-success-rgb), 0.08);
}

.sample-explanation[b-8onk1rdh7t] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--glytic-border);
}

/* ---- Generate button ---- */
[b-8onk1rdh7t] .generate-btn {
    margin-top: 0.5rem;
}

/* ---- Generation status card ---- */
.gen-status-card[b-8onk1rdh7t] {
    padding: 2.5rem 2rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gen-status-actions[b-8onk1rdh7t] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.gen-status-actions-secondary[b-8onk1rdh7t] {
    display: flex;
    justify-content: center;
}

/* ---- Blueprint coverage bars ---- */
.blueprint-coverage[b-8onk1rdh7t] {
    padding: 0.75rem 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
}

.blueprint-coverage[b-8onk1rdh7t]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.03), rgba(var(--glytic-primary-rgb), 0.03)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.bp-bar-row[b-8onk1rdh7t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.bp-bar-label[b-8onk1rdh7t] {
    font-size: 0.78rem;
    color: var(--glytic-text-primary);
    min-width: 140px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.bp-bar-track[b-8onk1rdh7t] {
    flex: 1;
    height: 6px;
    border-radius: 0;
    background: var(--glytic-border);
    overflow: hidden;
}

.bp-bar-fill[b-8onk1rdh7t] {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, var(--glytic-primary), var(--forge-primary));
    min-width: 2px;
}

.bp-bar-pct[b-8onk1rdh7t] {
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- MudBlazor overrides ---- */
[b-8onk1rdh7t] .mud-slider .mud-slider-track {
    background: rgba(var(--glytic-primary-rgb), 0.2);
}

[b-8onk1rdh7t] .mud-slider .mud-slider-filled {
    background: var(--glytic-primary);
}

[b-8onk1rdh7t] .mud-chip-root {
    transition: background var(--glytic-transition), color var(--glytic-transition);
}

/* Squared outlined inputs */
[b-8onk1rdh7t] .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .topic-input-row[b-8onk1rdh7t] {
        flex-direction: column;
    }

    .refine-btn[b-8onk1rdh7t] {
        width: 100%;
        height: auto;
    }

    .wizard-step-bar[b-8onk1rdh7t] {
        gap: 0;
    }

    .step-label[b-8onk1rdh7t] {
        font-size: 0.6rem;
    }

    /* Keep the 44px tap target on mobile; only the visible plate shrinks. */
    .step-plate[b-8onk1rdh7t] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .step-connector[b-8onk1rdh7t] {
        min-width: 10px;
        max-width: 30px;
    }

    .gen-status-actions[b-8onk1rdh7t] {
        flex-direction: column;
    }

    .sample-header[b-8onk1rdh7t] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Dashboard/Components/AICoachCard.razor.rz.scp.css */
.coach-card[b-o6y4jiwcyc] {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--glytic-primary);
}

.coach-header[b-o6y4jiwcyc] {
    margin-bottom: 0.75rem;
}

.coach-greeting[b-o6y4jiwcyc] {
    display: flex;
    align-items: center;
}

.greeting-text[b-o6y4jiwcyc] {
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.coach-body[b-o6y4jiwcyc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.coach-message[b-o6y4jiwcyc] {
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.coach-actions[b-o6y4jiwcyc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Primary recipe: the one main action of the card. */
[b-o6y4jiwcyc] .coach-cta-btn {
    text-transform: none;
    font-weight: 700;
    font-size: 0.82rem;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    padding: 0 16px;
    min-height: 36px;
}

[b-o6y4jiwcyc] .coach-cta-btn:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

[b-o6y4jiwcyc] .coach-cta-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

[b-o6y4jiwcyc] .coach-menu .mud-icon-button {
    color: var(--glytic-text-muted);
}

@media (max-width: 600px) {
    .coach-card[b-o6y4jiwcyc] {
        padding: 1rem;
    }

    .coach-actions[b-o6y4jiwcyc] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-o6y4jiwcyc] .coach-cta-btn {
        min-height: 48px;
        width: 100%;
    }
}
/* /Pages/Dashboard/Components/Analytics.razor.rz.scp.css */
.analytics-container[b-y6npguh0k6] {
    padding: 0.5rem 0;
}

.analytics-loading[b-y6npguh0k6] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

/* ===== Exam Selector ===== */
.exam-selector[b-y6npguh0k6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glytic-border);
}

/* Filter chip / pill recipe. */
.exam-pill[b-y6npguh0k6] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--qf-line, var(--glytic-border));
    border-radius: 999px;
    font: 500 0.75rem/1.2 var(--glytic-font-body);
    font-weight: 600;
    color: var(--glytic-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.exam-pill:hover[b-y6npguh0k6] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.exam-pill.active[b-y6npguh0k6] {
    background: rgba(var(--glytic-primary-rgb), .14);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.exam-pill:focus-visible[b-y6npguh0k6] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.exam-pill.more-pill[b-y6npguh0k6] {
    color: var(--glytic-text-muted);
    font-weight: 500;
    font-style: italic;
}

/* ===== Command Center Grid ===== */
.command-center[b-y6npguh0k6] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ===== Hero Panel ===== */
.hero-panel[b-y6npguh0k6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    gap: 4px;
}

.hero-value[b-y6npguh0k6] {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Hero metric is celebratory -- brand teal across the board, warm ember at the lowest band.
   A learning app never alarm-reds a learner's accuracy. */
.hero-strong[b-y6npguh0k6] { color: var(--glytic-primary); }
.hero-mid[b-y6npguh0k6] { color: var(--glytic-primary); }
.hero-early[b-y6npguh0k6] { color: var(--forge-gold); }

.hero-label[b-y6npguh0k6] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Honest subcaption clarifying the hero is lifetime answer accuracy over all practice,
   not a per-quiz or completed-only figure. */
.hero-sublabel[b-y6npguh0k6] {
    font-size: 0.62rem;
    color: var(--glytic-text-muted);
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.hero-exam-name[b-y6npguh0k6] {
    font-size: 0.78rem;
    color: var(--glytic-text-primary);
    font-weight: 600;
    margin-bottom: 8px;
    max-width: 200px;
    text-align: center;
}

/* ===== Stat strip (time-on-task + quizzes + exams, equal billing) ===== */
.stat-strip[b-y6npguh0k6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    width: 100%;
}

.stat-tile[b-y6npguh0k6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 54px;
    padding: 8px 6px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: var(--glytic-border);
    border: 0;
    position: relative;
    isolation: isolate;
    transition: background var(--glytic-transition);
}

/* Double-layer reveal: element bg = border color; ::before paints the tile fill so the border
   follows both cut corners (clip-path shears a rectangular border off the 45deg cuts). The fill
   sheen is translucent, so it is composited over an opaque surface to keep the border color out.
   Interior at z-index:-1 under isolation -- content needs no lift (scoped child-lift rules
   never reach MudBlazor-rendered children, which carry no scope attribute). */
.stat-tile[b-y6npguh0k6]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: var(--glytic-gradient-card), var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.stat-tile:hover[b-y6npguh0k6] {
    background: var(--glytic-border-hover);
}

.stat-tile-value[b-y6npguh0k6] {
    font-family: var(--glytic-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--glytic-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stat-tile-label[b-y6npguh0k6] {
    font-size: 0.6rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-align: center;
}

/* ===== Right Panel ===== */
.right-panel[b-y6npguh0k6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===== Sparkline Card ===== */
.sparkline-card[b-y6npguh0k6] {
    padding: 0.875rem 1rem;
}

.sparkline-header[b-y6npguh0k6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sparkline-title[b-y6npguh0k6] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.sparkline-trend[b-y6npguh0k6] {
    font-size: 0.78rem;
    font-weight: 700;
}

.trend-up[b-y6npguh0k6] { color: var(--glytic-primary); }
.trend-down[b-y6npguh0k6] { color: var(--forge-primary); }

/* ===== Sparkline (SVG line + area + dots) ===== */
.sparkline-chart[b-y6npguh0k6] {
    height: 56px;
    width: 100%;
}

/* Responsive: viewBox + 100% width. preserveAspectRatio="none" lets it fill the card width;
   non-scaling-stroke keeps the line crisp regardless of the horizontal stretch. */
.spark-svg[b-y6npguh0k6] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.spark-line[b-y6npguh0k6] {
    fill: none;
    stroke: var(--glytic-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    /* Draw-on reveal: the line traces in. Dasharray is generous so any point count is covered. */
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: spark-draw-b-y6npguh0k6 0.9s cubic-bezier(0.22, 0.68, 0.37, 1) forwards;
}

/* Soft brand-teal area fill under the line, fading toward the baseline via the inline SVG
   gradient (#sparkAreaGradient) whose stops are coloured with brand vars on classed elements. */
.spark-area[b-y6npguh0k6] {
    fill: url(#sparkAreaGradient);
    opacity: 0;
    animation: spark-fade-b-y6npguh0k6 0.6s ease-out 0.25s forwards;
}

/* Gradient stops carry the brand teal at varying alpha -- top wash fades to nothing at baseline.
   Stops are coloured here (CSS) so no hex lives in the markup. */
.spark-area-stop-top[b-y6npguh0k6] { stop-color: var(--glytic-primary); stop-opacity: 0.28; }
.spark-area-stop-bottom[b-y6npguh0k6] { stop-color: var(--glytic-primary); stop-opacity: 0; }

.spark-dot[b-y6npguh0k6] {
    stroke: var(--glytic-bg-medium);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    cursor: pointer;
    animation: spark-dot-in-b-y6npguh0k6 0.4s ease-out forwards;
    animation-delay: 0.5s;
    transition: r 0.15s ease;
}

.spark-dot:hover[b-y6npguh0k6] {
    r: 4.5;
}

/* Bar/dot bands -- brand teal for strong, amber mid, ember low. No alarm red. */
.spark-strong[b-y6npguh0k6] { fill: var(--glytic-primary); }
.spark-mid[b-y6npguh0k6] { fill: var(--forge-gold); }
.spark-low[b-y6npguh0k6] { fill: var(--forge-primary); }

@keyframes spark-draw-b-y6npguh0k6 {
    to { stroke-dashoffset: 0; }
}

@keyframes spark-fade-b-y6npguh0k6 {
    to { opacity: 1; }
}

@keyframes spark-dot-in-b-y6npguh0k6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Single-data-point state: a baseline track with one positioned dot, never a full block. */
.sparkline-single[b-y6npguh0k6] {
    position: relative;
    height: 48px;
}

.single-baseline[b-y6npguh0k6] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: var(--glytic-border);
}

.single-dot[b-y6npguh0k6] {
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--glytic-primary);
    box-shadow: var(--glytic-glow);
}

.sparkline-hint[b-y6npguh0k6] {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    line-height: 1.3;
}

.sparkline-footer[b-y6npguh0k6] {
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
}

.sparkline-empty[b-y6npguh0k6] {
    padding: 12px 0;
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

/* ===== Focus Areas Card ===== */
.focus-card[b-y6npguh0k6] {
    padding: 0.875rem 1rem;
    flex: 1;
}

.focus-header[b-y6npguh0k6] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin-bottom: 0.5rem;
}

.focus-row[b-y6npguh0k6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.focus-row:last-child[b-y6npguh0k6] {
    border-bottom: none;
}

.focus-name[b-y6npguh0k6] {
    flex: 1;
    font-size: 0.78rem;
    color: var(--glytic-text-primary);
}

.focus-score[b-y6npguh0k6] {
    flex: 0 0 36px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
}

.score-high[b-y6npguh0k6] { color: var(--glytic-primary); }
.score-mid[b-y6npguh0k6] { color: var(--forge-gold); }
.score-low[b-y6npguh0k6] { color: var(--forge-primary); }

/* Primary recipe: the one action per focus row. */
.focus-practice-btn[b-y6npguh0k6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--qf-btn-radius);
    border: 1px solid var(--forge-primary);
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

.focus-practice-btn:hover[b-y6npguh0k6] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

.focus-practice-btn:focus-visible[b-y6npguh0k6] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.focus-empty[b-y6npguh0k6] {
    padding: 8px 0;
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

/* Positive empty state when the learner has data but no weaknesses -- celebrate it. */
.focus-empty-positive[b-y6npguh0k6] {
    color: var(--glytic-primary);
    font-weight: 600;
}

/* ===== Topic Mastery Card ===== */
.mastery-card[b-y6npguh0k6] {
    padding: 1rem 1.1rem;
    margin-top: 1rem;
}

.mastery-header[b-y6npguh0k6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.mastery-title[b-y6npguh0k6] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.mastery-subtitle[b-y6npguh0k6] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
    letter-spacing: 0.3px;
}

.mastery-row[b-y6npguh0k6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 6px 0;
}

.mastery-name[b-y6npguh0k6] {
    flex: 0 0 38%;
    max-width: 38%;
    font-size: 0.78rem;
    color: var(--glytic-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mastery-track[b-y6npguh0k6] {
    flex: 1;
    height: 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.mastery-fill[b-y6npguh0k6] {
    height: 100%;
    border-radius: 0;
    /* Composed Strike: angled fill end (the wedge), matching the quiz progress bar. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
    /* Smooth bar-fill grow-in. width is set inline from the accuracy value. */
    transform-origin: left center;
    transition: width var(--glytic-transition-long);
    animation: mastery-grow-b-y6npguh0k6 0.7s cubic-bezier(0.22, 0.68, 0.37, 1) both;
}

/* Mastery fill bands reuse the score classes (brand teal / amber / ember). No alarm red. */
.mastery-fill.score-high[b-y6npguh0k6] { background: var(--glytic-primary); }
.mastery-fill.score-mid[b-y6npguh0k6] { background: var(--forge-gold); }
.mastery-fill.score-low[b-y6npguh0k6] { background: var(--forge-primary); }

.mastery-value[b-y6npguh0k6] {
    flex: 0 0 38px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
}

.mastery-more[b-y6npguh0k6] {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    font-style: italic;
}

@keyframes mastery-grow-b-y6npguh0k6 {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ===== Staggered load-in reveal (celebratory, premium) ===== */
.reveal[b-y6npguh0k6] {
    animation: reveal-in-b-y6npguh0k6 0.5s cubic-bezier(0.22, 0.68, 0.37, 1) both;
}

@keyframes reveal-in-b-y6npguh0k6 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Recent Activity ===== */
.recent-section[b-y6npguh0k6] {
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.recent-header[b-y6npguh0k6] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin-bottom: 0.5rem;
}

.recent-row[b-y6npguh0k6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
}

.recent-row:last-child[b-y6npguh0k6] {
    border-bottom: none;
}

.recent-exam[b-y6npguh0k6] {
    flex: 1;
    color: var(--glytic-text-primary);
}

.recent-date[b-y6npguh0k6] {
    flex: 0 0 auto;
    color: var(--glytic-text-muted);
    font-size: 0.72rem;
}

.recent-score[b-y6npguh0k6] {
    flex: 0 0 36px;
    text-align: right;
    font-weight: 700;
}

.recent-detail[b-y6npguh0k6] {
    flex: 0 0 auto;
    color: var(--glytic-text-muted);
    font-size: 0.68rem;
}

.recent-badge[b-y6npguh0k6] {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.recent-badge.pass[b-y6npguh0k6] {
    background: var(--glytic-gradient-card);
    color: var(--glytic-primary);
}

/* "Keep Going" is encouragement, not failure -- warm ember, never alarm red. */
.recent-badge.fail[b-y6npguh0k6] {
    background: var(--forge-surface);
    color: var(--forge-primary);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .command-center[b-y6npguh0k6] {
        grid-template-columns: 1fr;
    }

    .hero-panel[b-y6npguh0k6] {
        padding: 1rem;
    }

    .hero-value[b-y6npguh0k6] {
        font-size: 2.5rem;
    }

    .exam-selector[b-y6npguh0k6] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.75rem;
    }

    .exam-selector[b-y6npguh0k6]::-webkit-scrollbar {
        display: none;
    }

    .recent-row[b-y6npguh0k6] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .recent-detail[b-y6npguh0k6] {
        display: none;
    }

    /* Topic name gets more room on narrow screens; the bar stays full-width and legible. */
    .mastery-name[b-y6npguh0k6] {
        flex-basis: 44%;
        max-width: 44%;
        font-size: 0.74rem;
    }

    .mastery-row[b-y6npguh0k6] {
        gap: 0.5rem;
    }

    /* Stat tiles wrap to a comfortable 3-up / 2-up on phones rather than squeezing. */
    .stat-tile[b-y6npguh0k6] {
        min-width: 64px;
        padding: 7px 4px;
    }

    .stat-tile-value[b-y6npguh0k6] {
        font-size: 1rem;
    }
}

/* Respect reduced-motion: drop every entrance/draw animation and any transition that moves
   things, but keep the final rendered state (full bars, drawn line, visible dots). */
@media (prefers-reduced-motion: reduce) {
    .reveal[b-y6npguh0k6],
    .mastery-fill[b-y6npguh0k6],
    .spark-line[b-y6npguh0k6],
    .spark-area[b-y6npguh0k6],
    .spark-dot[b-y6npguh0k6] {
        animation: none;
    }

    .spark-line[b-y6npguh0k6] {
        stroke-dashoffset: 0;
    }

    .spark-area[b-y6npguh0k6] {
        opacity: 1;
    }

    .spark-dot[b-y6npguh0k6] {
        opacity: 1;
    }

    .mastery-fill[b-y6npguh0k6] {
        transform: none;
        transition: none;
    }

    .reveal[b-y6npguh0k6] {
        opacity: 1;
        transform: none;
    }
}
/* /Pages/Dashboard/Components/CareerPathCard.razor.rz.scp.css */
.career-path-card[b-u0azncfugs] {
    padding: 0;
}

/* Compact progress row */
.cpc-progress-row[b-u0azncfugs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cpc-industry[b-u0azncfugs] {
    font-size: 0.62rem;
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.cpc-track-wrap[b-u0azncfugs] {
    flex: 1;
    min-width: 0;
}

.cpc-track[b-u0azncfugs] {
    height: 4px;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.cpc-fill[b-u0azncfugs] {
    height: 100%;
    background: linear-gradient(90deg, var(--glytic-primary), rgba(var(--glytic-primary-rgb), 0.6));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.cpc-pct[b-u0azncfugs] {
    font-size: 0.62rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Node list */
.cpc-nodes[b-u0azncfugs] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cpc-node[b-u0azncfugs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--glytic-border);
}

.cpc-node:last-child[b-u0azncfugs] {
    border-bottom: none;
}

/* Active goal node highlight */
.node-goal-highlight[b-u0azncfugs] {
    background: rgba(var(--glytic-primary-rgb), 0.04);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 3px solid var(--glytic-primary);
}

.node-indicator[b-u0azncfugs] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Position number = pending obstacle (muted square).
   Bevel-following outline (double-layer reveal): a real 2px border shears off the cut corner.
   Text-only badge, so the interior ::before (inset 2px) sits behind via z-index:-1 + isolation;
   the box FILL is the outline color, the ::before the interior. */
.cpc-node-num[b-u0azncfugs] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: var(--glytic-border);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--glytic-text-muted);
    font-variant-numeric: tabular-nums;
}
.cpc-node-num[b-u0azncfugs]::before {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-card, #12151f);
    z-index: -1;
    pointer-events: none;
}

/* Current = ember square */
.cpc-node-num--active[b-u0azncfugs] {
    color: var(--forge-gold, #D07040);
    background: var(--forge-gold, #D07040);
}
.cpc-node-num--active[b-u0azncfugs]::before {
    background: linear-gradient(rgba(var(--forge-primary-rgb), 0.12), rgba(var(--forge-primary-rgb), 0.12)), var(--glytic-bg-card, #12151f);
}

/* Completed glyph sizing (mastery = teal circle) */
.node-indicator .qf-glyph[b-u0azncfugs] {
    width: 16px;
    height: 16px;
}

.node-info[b-u0azncfugs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.node-name[b-u0azncfugs] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-name:hover[b-u0azncfugs] {
    color: var(--glytic-primary);
}

.node-completed .node-name[b-u0azncfugs] {
    color: var(--glytic-text-secondary);
}

.node-meta[b-u0azncfugs] {
    font-size: 0.6rem;
    color: var(--glytic-text-muted);
}

.node-actions[b-u0azncfugs] {
    flex-shrink: 0;
}

/* Secondary (outline) recipe; .primary swaps to the primary ember recipe. */
.node-btn[b-u0azncfugs] {
    display: inline-block;
    padding: 0.28rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    text-decoration: none;
    color: var(--glytic-text-primary);
    background: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.node-btn:hover[b-u0azncfugs] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.node-btn:focus-visible[b-u0azncfugs] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.node-btn.primary[b-u0azncfugs] {
    background: var(--forge-gradient-btn);
    border-color: var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.node-btn.primary:hover[b-u0azncfugs] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Node actions sit in a row: primary action(s) + a secondary icon-only Flashcards button. */
.node-actions[b-u0azncfugs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Icon button recipe (compact, matches the My Tests hierarchy). */
.node-btn-icon[b-u0azncfugs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.24rem;
    width: 26px;
    height: 26px;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    transition: background-color .15s ease, color .15s ease;
}

.node-btn-icon:hover[b-u0azncfugs] {
    background: rgba(var(--glytic-primary-rgb), .1);
    color: var(--glytic-text-primary);
}

.node-btn-icon:focus-visible[b-u0azncfugs] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

[b-u0azncfugs] .node-btn-icon .mud-icon-root {
    font-size: 15px;
}

/* Footer */
.cpc-footer[b-u0azncfugs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--glytic-border);
}

/* Quiet recipe: text action, underline on hover instead of a fill. */
.cpc-link[b-u0azncfugs] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--glytic-text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.cpc-link:hover:not(:disabled)[b-u0azncfugs] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cpc-link:focus-visible[b-u0azncfugs] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.cpc-link:disabled[b-u0azncfugs] {
    opacity: 0.5;
    cursor: default;
}

.cpc-leave[b-u0azncfugs] {
    color: var(--glytic-text-muted);
    font-size: 0.62rem;
}

.cpc-leave:hover[b-u0azncfugs] {
    color: var(--qf-crimson-text);
}

/* Detail panel */
.cpc-detail-panel[b-u0azncfugs] {
    margin-top: 0.5rem;
    padding: 1rem;
    overflow: hidden;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

.cpc-detail-header[b-u0azncfugs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cpc-detail-title[b-u0azncfugs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

/* Icon button recipe. */
.cpc-close-btn[b-u0azncfugs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--qf-btn-radius);
    border: 0;
    background: transparent;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
}

.cpc-close-btn:hover[b-u0azncfugs] {
    background: rgba(var(--glytic-primary-rgb), .1);
    color: var(--glytic-text-primary);
}

.cpc-close-btn:focus-visible[b-u0azncfugs] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.cpc-detail-loading[b-u0azncfugs] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

@media (max-width: 600px) {
    .node-name[b-u0azncfugs] {
        font-size: 0.7rem;
    }

    .cpc-node[b-u0azncfugs] {
        gap: 0.5rem;
    }

    .node-indicator[b-u0azncfugs] {
        width: 22px;
        height: 22px;
    }

    .node-goal-highlight[b-u0azncfugs] {
        margin: 0 -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}
/* /Pages/Dashboard/Components/CreateFromDocument.razor.rz.scp.css */
.create-doc-container[b-sqzkvwyil3] {
    padding: 0.5rem 0;
}

.create-doc-card[b-sqzkvwyil3] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.form-fields[b-sqzkvwyil3] {
    display: flex;
    flex-direction: column;
}

.file-upload-section[b-sqzkvwyil3] {
    display: flex;
    flex-direction: column;
}

.file-input-wrapper[b-sqzkvwyil3] {
    padding: 1rem;
    border: 2px dashed var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: rgba(var(--glytic-primary-rgb), 0.02);
    transition: var(--glytic-transition);
}

.file-input-wrapper:hover[b-sqzkvwyil3] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.file-info[b-sqzkvwyil3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
}

[b-sqzkvwyil3] .file-remove-btn {
    margin-left: auto;
    min-width: auto;
    padding: 0.25rem 0.5rem;
}

.slider-group[b-sqzkvwyil3] {
    display: flex;
    flex-direction: column;
}

.slider-labels[b-sqzkvwyil3] {
    display: flex;
    justify-content: space-between;
    margin-top: -0.25rem;
}

[b-sqzkvwyil3] .submit-btn {
    font-weight: 600;
    padding: 0.75rem;
}

@media (max-width: 600px) {
    .create-doc-card[b-sqzkvwyil3] {
        padding: 1.25rem;
    }

    .file-info[b-sqzkvwyil3] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}
/* /Pages/Dashboard/Components/CreateFromSavedDocument.razor.rz.scp.css */
.create-saved-doc-container[b-xalerkxfpm] {
    padding: 0.5rem 0;
}

.create-saved-doc-card[b-xalerkxfpm] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.saved-doc-loading[b-xalerkxfpm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.saved-doc-list[b-xalerkxfpm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Clickable row -- now a real <button>, reset to look like the old div. */
.saved-doc-item[b-xalerkxfpm] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    cursor: pointer;
    transition: var(--glytic-transition);
    background: rgba(var(--glytic-primary-rgb), 0.02);
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.saved-doc-item:focus-visible[b-xalerkxfpm] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.saved-doc-item:hover[b-xalerkxfpm] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.saved-doc-item-selected[b-xalerkxfpm] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.saved-doc-name[b-xalerkxfpm] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.saved-doc-name .mud-typography-body1[b-xalerkxfpm] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-doc-selected-badge[b-xalerkxfpm] {
    display: inline-block;
    margin-left: 0.75rem;
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--glytic-primary-rgb), .14);
    color: var(--glytic-text-primary);
}

.slider-group[b-xalerkxfpm] {
    display: flex;
    flex-direction: column;
}

.slider-labels[b-xalerkxfpm] {
    display: flex;
    justify-content: space-between;
    margin-top: -0.25rem;
}

.visibility-toggle[b-xalerkxfpm] {
    display: flex;
    align-items: center;
}

[b-xalerkxfpm] .submit-btn {
    font-weight: 600;
    padding: 0.75rem;
}

@media (max-width: 600px) {
    .create-saved-doc-card[b-xalerkxfpm] {
        padding: 1.25rem;
    }

    .saved-doc-item[b-xalerkxfpm] {
        padding: 0.75rem;
    }
}
/* /Pages/Dashboard/Components/CreateFromTopic.razor.rz.scp.css */
.create-topic-container[b-xm4m9fb41j] {
    padding: 0.5rem 0;
}

.create-topic-card[b-xm4m9fb41j] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.form-fields[b-xm4m9fb41j] {
    display: flex;
    flex-direction: column;
}

.slider-group[b-xm4m9fb41j] {
    display: flex;
    flex-direction: column;
}

.slider-labels[b-xm4m9fb41j] {
    display: flex;
    justify-content: space-between;
    margin-top: -0.25rem;
}

[b-xm4m9fb41j] .submit-btn {
    font-weight: 600;
    padding: 0.75rem;
}

@media (max-width: 600px) {
    .create-topic-card[b-xm4m9fb41j] {
        padding: 1.25rem;
    }
}
/* /Pages/Dashboard/Components/CreateFromWeakAreas.razor.rz.scp.css */
.create-weak-container[b-a6g2hpis9l] {
    max-width: 700px;
    margin: 0 auto;
}

.create-weak-card[b-a6g2hpis9l] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 2rem;
}

.loading-state[b-a6g2hpis9l],
.empty-state[b-a6g2hpis9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

/* Exam selector chips */
.exam-chips[b-a6g2hpis9l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Filter chip / pill recipe. */
.exam-chip[b-a6g2hpis9l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--qf-line, var(--glytic-border));
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-secondary);
    font: 500 0.8125rem/1.2 var(--glytic-font-body);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.exam-chip:hover[b-a6g2hpis9l] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.exam-chip-active[b-a6g2hpis9l] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .14);
    color: var(--glytic-text-primary);
}

.exam-chip-active:hover[b-a6g2hpis9l] {
    background: rgba(var(--glytic-primary-rgb), .2);
}

.exam-chip:focus-visible[b-a6g2hpis9l] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.exam-chip-count[b-a6g2hpis9l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(var(--glytic-primary-rgb), .15);
    color: var(--glytic-primary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.exam-chip-active .exam-chip-count[b-a6g2hpis9l] {
    background: rgba(var(--glytic-primary-rgb), .25);
}

/* Category checkboxes */
.category-checkboxes[b-a6g2hpis9l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
}

.category-checkbox-row[b-a6g2hpis9l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    cursor: pointer;
    transition: var(--glytic-transition);
}

.category-checkbox-row:hover[b-a6g2hpis9l] {
    border-color: var(--glytic-border-hover);
    background: rgba(92, 168, 184, 0.03);
}

.cat-name[b-a6g2hpis9l] {
    flex: 1;
    color: var(--glytic-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cat-accuracy[b-a6g2hpis9l] {
    flex: 0 0 46px;
    text-align: right;
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Accuracy color coding */
.accuracy-low[b-a6g2hpis9l] {
    color: #ff6b6b;
}

.accuracy-mid[b-a6g2hpis9l] {
    color: #e09060;
}

.accuracy-ok[b-a6g2hpis9l] {
    color: var(--glytic-text-muted);
}

.cat-questions-badge[b-a6g2hpis9l] {
    flex: 0 0 36px;
    text-align: right;
    color: var(--glytic-text-muted);
    font-size: 0.72rem;
}

/* Question count slider */
.slider-group[b-a6g2hpis9l] {
    padding: 0.25rem 0;
}

/* ========== Generation status card ========== */
.gen-status-card[b-a6g2hpis9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.gen-status-actions[b-a6g2hpis9l] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .create-weak-card[b-a6g2hpis9l] {
        padding: 1rem;
    }

    .category-checkbox-row[b-a6g2hpis9l] {
        min-height: 48px;
        padding: 0.6rem 0.75rem;
    }

    .cat-name[b-a6g2hpis9l] {
        font-size: 0.82rem;
    }

    .exam-chips[b-a6g2hpis9l] {
        gap: 0.4rem;
    }

    .exam-chip[b-a6g2hpis9l] {
        font-size: 0.78rem;
        padding: 0.3rem 0.6rem;
    }
}
/* /Pages/Dashboard/Components/DiagnosticQuiz.razor.rz.scp.css */
.placement-loading[b-em5xjs0xkp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.placement-quiz[b-em5xjs0xkp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.placement-progress[b-em5xjs0xkp] {
    padding: 0.5rem 0;
}

.placement-question[b-em5xjs0xkp] {
    padding: 1rem;
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
}

.placement-answers[b-em5xjs0xkp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Answer/choice tile recipe. */
.placement-answer-btn[b-em5xjs0xkp] {
    display: block;
    width: 100%;
    min-height: 56px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--glytic-bg-card);
    color: var(--glytic-text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid var(--glytic-border);
    border-radius: var(--qf-btn-radius);
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
    outline: none;
}

.placement-answer-btn:hover[b-em5xjs0xkp] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

.placement-answer-btn.selected[b-em5xjs0xkp] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.placement-answer-btn:focus-visible[b-em5xjs0xkp] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.placement-confidence[b-em5xjs0xkp] {
    padding: 0.5rem 0;
}

.confidence-buttons[b-em5xjs0xkp] {
    display: flex;
    gap: 0.5rem;
}

[b-em5xjs0xkp] .confidence-btn {
    text-transform: none;
    font-size: 0.75rem;
    min-width: auto;
    padding: 0.25rem 0.75rem;
}

.placement-nav[b-em5xjs0xkp] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

[b-em5xjs0xkp] .placement-next-btn {
    text-transform: none;
    font-weight: 600;
}
/* /Pages/Dashboard/Components/GoalCard.razor.rz.scp.css */
.goal-card[b-xo20daof74] {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--glytic-primary);
}

.goal-header[b-xo20daof74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.goal-title-row[b-xo20daof74] {
    display: flex;
    align-items: center;
}

.goal-label[b-xo20daof74] {
    font-family: var(--glytic-font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.goal-body[b-xo20daof74] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goal-exam-name[b-xo20daof74] {
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.goal-details[b-xo20daof74] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.goal-detail-chip[b-xo20daof74] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--glytic-text-secondary);
}

.goal-days-badge[b-xo20daof74] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    background: rgba(0, 255, 231, 0.08);
    padding: 1px 8px;
    border-radius: 12px;
    margin-left: 4px;
}

@media (max-width: 600px) {
    .goal-card[b-xo20daof74] {
        padding: 0.75rem 1rem;
    }

    .goal-details[b-xo20daof74] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Pages/Dashboard/Components/GoalSetupWizard.razor.rz.scp.css */
.wizard-container[b-veik3l3whp] {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--glytic-primary);
}

.wizard-header[b-veik3l3whp] {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.wizard-title[b-veik3l3whp] {
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

/* Step indicator */
.wizard-steps[b-veik3l3whp] {
    margin-bottom: 1.5rem;
}

.step-indicator[b-veik3l3whp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 0.5rem;
}

.step-dot[b-veik3l3whp] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--glytic-border);
    transition: background 0.2s ease;
}

.step-dot.active[b-veik3l3whp] {
    background: var(--glytic-primary);
}

.step-line[b-veik3l3whp] {
    flex: 1;
    height: 2px;
    background: var(--glytic-border);
    transition: background 0.2s ease;
}

.step-line.active[b-veik3l3whp] {
    background: var(--glytic-primary);
}

.step-labels[b-veik3l3whp] {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.step-labels span[b-veik3l3whp] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    transition: color 0.2s ease;
}

.step-labels span.active[b-veik3l3whp] {
    color: var(--glytic-primary);
    font-weight: 600;
}

/* Step content */
.wizard-step[b-veik3l3whp] {
    min-height: 180px;
}

.step-description[b-veik3l3whp] {
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
    margin-bottom: 1rem;
}

/* Exam search */
[b-veik3l3whp] .wizard-search .mud-input-outlined-border {
    border-color: var(--glytic-border);
}

[b-veik3l3whp] .wizard-search input {
    color: var(--glytic-text-primary);
    font-size: 0.9rem;
}

.wizard-loading[b-veik3l3whp] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.exam-type-list[b-veik3l3whp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Answer/choice tile recipe: full-width, 56px, selectable single-choice row. */
.exam-type-option[b-veik3l3whp] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 1px solid var(--glytic-border);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0.6rem 0.75rem;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    text-align: left;
}

.exam-type-option:hover[b-veik3l3whp] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

.exam-type-option.selected[b-veik3l3whp] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.exam-type-option:focus-visible[b-veik3l3whp] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.exam-type-name[b-veik3l3whp] {
    font-size: 0.88rem;
    color: var(--glytic-text-primary);
    font-weight: 500;
}

.exam-type-vendor[b-veik3l3whp] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    flex-shrink: 0;
}

.no-results[b-veik3l3whp] {
    text-align: center;
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    padding: 2rem 0;
}

/* Date picker */
[b-veik3l3whp] .wizard-date-picker .mud-input-outlined-border {
    border-color: var(--glytic-border);
}

.date-chips[b-veik3l3whp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-veik3l3whp] .date-chips .mud-chip {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
    border: 1px solid var(--glytic-border);
    cursor: pointer;
}

[b-veik3l3whp] .date-chips .mud-chip:hover {
    border-color: var(--glytic-primary);
}

/* Slider */
.slider-value[b-veik3l3whp] {
    text-align: center;
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 0.75rem;
}

[b-veik3l3whp] .wizard-slider .mud-slider input[type="range"] {
    accent-color: var(--glytic-primary);
}

.slider-labels[b-veik3l3whp] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    margin-top: -0.5rem;
}

/* Preset exam card */
.exam-preset-card[b-veik3l3whp] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    background: var(--glytic-card-bg);
    margin-bottom: 1rem;
}

.exam-preset-name[b-veik3l3whp] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.wizard-preset-actions[b-veik3l3whp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

[b-veik3l3whp] .wizard-next-btn {
    text-transform: none;
    font-weight: 600;
    font-size: 0.88rem;
}

[b-veik3l3whp] .wizard-alt-btn {
    text-transform: none;
    font-size: 0.82rem;
}

/* Actions */
.wizard-actions[b-veik3l3whp] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

[b-veik3l3whp] .wizard-save-btn {
    text-transform: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 32px;
    min-height: 44px;
}

.wizard-error[b-veik3l3whp] {
    font-size: 0.82rem;
    color: var(--mud-palette-error);
    margin: 0.5rem 0;
}

/* Navigation */
.wizard-nav[b-veik3l3whp] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glytic-border);
}

@media (max-width: 600px) {
    .wizard-container[b-veik3l3whp] {
        padding: 1rem;
    }

    .exam-type-list[b-veik3l3whp] {
        max-height: 220px;
    }

    [b-veik3l3whp] .wizard-save-btn {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/Dashboard/Components/MyExams.razor.rz.scp.css */
/* MyExams.razor.css */

.my-exams-loading[b-u9z7myq02q],
.my-exams-empty[b-u9z7myq02q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

.my-exams-header[b-u9z7myq02q] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

[b-u9z7myq02q] .create-exam-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--glytic-primary) !important;
    border-color: rgba(var(--glytic-primary-rgb), 0.3) !important;
    border-radius: 8px !important;
}

[b-u9z7myq02q] .create-exam-btn:hover {
    border-color: var(--glytic-primary) !important;
    background: rgba(var(--glytic-primary-rgb), 0.06) !important;
}

.my-exams-section[b-u9z7myq02q] {
    margin-bottom: 2rem;
}

[b-u9z7myq02q] .section-label {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glytic-border);
}

.exam-list[b-u9z7myq02q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exam-row[b-u9z7myq02q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    transition: var(--glytic-transition);
}

.exam-row:hover[b-u9z7myq02q] {
    border-color: var(--glytic-border-hover);
}

/* Reorder controls */
.exam-reorder[b-u9z7myq02q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    width: 24px;
}

.reorder-placeholder[b-u9z7myq02q] {
    visibility: hidden;
}

/* Icon button recipe (compact, dense reorder column). */
.reorder-btn[b-u9z7myq02q] {
    background: transparent;
    border: 1px solid var(--glytic-border);
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    line-height: 1;
}

.reorder-btn:hover:not(:disabled)[b-u9z7myq02q] {
    background: rgba(var(--glytic-primary-rgb), .1);
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.reorder-btn:focus-visible[b-u9z7myq02q] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.reorder-btn:disabled[b-u9z7myq02q] {
    opacity: 0.25;
    cursor: default;
}

.reorder-arrow[b-u9z7myq02q] {
    font-size: 0.65rem;
    font-weight: 700;
    display: block;
}

.reorder-arrow-down[b-u9z7myq02q] {
    transform: rotate(180deg);
}

/* Exam info (clickable area) -- a real <button> now, reset to look like the old div. */
.exam-info[b-u9z7myq02q] {
    display: block;
    width: 100%;
    flex: 1;
    min-width: 0;
    overflow: hidden; /* prevents long titles from overlapping pin/action buttons */
    cursor: pointer;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.exam-info:focus-visible[b-u9z7myq02q] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.exam-title-row[b-u9z7myq02q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.exam-title[b-u9z7myq02q] {
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    /* Clean multi-line clamp: long document-derived titles wrap on spaces (no mid-word
       truncation) and clamp to two lines with an ellipsis. overflow-wrap keeps an
       unbroken token from overflowing the card on a 360px viewport. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
}

.exam-info:hover .exam-title[b-u9z7myq02q] {
    color: var(--glytic-primary);
}

.exam-stats[b-u9z7myq02q] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

.stat-sep[b-u9z7myq02q] {
    color: var(--glytic-border-hover);
    font-size: 0.7rem;
}

/* In-progress label reads as live work, not a failed score. */
.stat-inprogress[b-u9z7myq02q] {
    color: var(--glytic-primary);
    font-weight: 600;
}

/* Source badges */
.source-badge[b-u9z7myq02q] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.source-badge-official[b-u9z7myq02q] {
    background: rgba(0, 200, 220, 0.12);
    color: #00c8dc;
    border: 1px solid rgba(0, 200, 220, 0.3);
}

.source-badge-personal[b-u9z7myq02q] {
    background: rgba(160, 100, 255, 0.12);
    color: #a064ff;
    border: 1px solid rgba(160, 100, 255, 0.3);
}

.source-badge-community[b-u9z7myq02q] {
    background: rgba(150, 150, 170, 0.1);
    color: var(--glytic-text-muted);
    border: 1px solid var(--glytic-border);
}

/* Actions */
.exam-actions[b-u9z7myq02q] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Touch-friendly action buttons (>=40px tall). Primary is prominent (filled brand),
   secondary actions are subdued (outlined, muted) so the hierarchy is obvious. */
[b-u9z7myq02q] .action-primary,
[b-u9z7myq02q] .action-secondary {
    text-transform: none;
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 40px;
    min-width: auto;
    padding: 6px 14px;
    border-radius: var(--qf-btn-radius);
    white-space: nowrap;
}

[b-u9z7myq02q] .action-primary .mud-button-icon-start,
[b-u9z7myq02q] .action-secondary .mud-button-icon-start {
    margin-right: 4px;
}

/* Color/hover for action-secondary comes from the global per-Color role recipe (Outlined
   Default/Primary -> secondary teal hairline, Outlined Error -> danger crimson) -- a bespoke
   override here would flatten the Delete button's danger color to plain secondary. */

/* Pin button -- 40px touch target. */
.pin-btn[b-u9z7myq02q] {
    background: transparent;
    border: 1px solid var(--glytic-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--glytic-transition);
    flex-shrink: 0;
}

.pin-btn:hover[b-u9z7myq02q] {
    border-color: var(--glytic-primary);
}

.pin-btn:focus-visible[b-u9z7myq02q] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.pin-indicator[b-u9z7myq02q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--glytic-border-hover);
    transition: var(--glytic-transition);
}

.pin-btn.pinned .pin-indicator[b-u9z7myq02q] {
    background: var(--glytic-primary);
    box-shadow: 0 0 6px rgba(var(--glytic-primary-rgb), 0.5);
}

.pin-btn:hover .pin-indicator[b-u9z7myq02q] {
    background: var(--glytic-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .exam-row[b-u9z7myq02q] {
        padding: 10px 12px;
        gap: 8px;
    }

    .exam-reorder[b-u9z7myq02q] {
        width: 20px;
    }

    .reorder-btn[b-u9z7myq02q] {
        width: 20px;
        height: 14px;
    }

    .exam-title[b-u9z7myq02q] {
        font-size: 0.88rem;
    }

    .exam-stats[b-u9z7myq02q] {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .exam-row[b-u9z7myq02q] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .exam-reorder[b-u9z7myq02q] {
        order: -1;
    }

    .exam-info[b-u9z7myq02q] {
        order: 0;
        flex-basis: calc(100% - 40px);
    }

    .exam-actions[b-u9z7myq02q] {
        order: 1;
        width: 100%;
        /* Left-align and allow wrapping so the touch targets stay full-size and never
           overflow the card on a 360px-wide viewport. */
        justify-content: flex-start;
        gap: 8px;
    }

    .exam-title[b-u9z7myq02q] {
        font-size: 0.85rem;
    }
}

/* Generation states */
.exam-generating[b-u9z7myq02q] {
    margin-top: 4px;
}

[b-u9z7myq02q] .exam-generating .mud-progress-linear {
    height: 4px;
}

.exam-failed[b-u9z7myq02q] {
    margin-top: 4px;
}

.source-badge-generating[b-u9z7myq02q] {
    background: rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-primary);
    animation: pulse-badge-b-u9z7myq02q 2s ease-in-out infinite;
}

.source-badge-failed[b-u9z7myq02q] {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.source-badge-personal[b-u9z7myq02q] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-text-secondary);
}

@keyframes pulse-badge-b-u9z7myq02q {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* /Pages/Dashboard/Components/PlacementResults.razor.rz.scp.css */
.placement-results[b-1dqcgnf6x9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.results-header[b-1dqcgnf6x9] {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glytic-border);
}

.results-summary[b-1dqcgnf6x9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summary-chip[b-1dqcgnf6x9] {
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.chip-skip[b-1dqcgnf6x9] {
    background: rgba(76, 175, 80, 0.12);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.chip-review[b-1dqcgnf6x9] {
    background: rgba(255, 152, 0, 0.12);
    color: #ffa726;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.chip-study[b-1dqcgnf6x9] {
    background: rgba(244, 67, 54, 0.12);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.domain-cards[b-1dqcgnf6x9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.domain-card[b-1dqcgnf6x9] {
    padding: 0.75rem 1rem;
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
}

.classification-skip[b-1dqcgnf6x9] {
    border-left: 3px solid #4caf50;
}

.classification-review[b-1dqcgnf6x9] {
    border-left: 3px solid #ff9800;
}

.classification-study[b-1dqcgnf6x9] {
    border-left: 3px solid #f44336;
}

.domain-header[b-1dqcgnf6x9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.domain-badge[b-1dqcgnf6x9] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.badge-skip[b-1dqcgnf6x9] {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
}

.badge-review[b-1dqcgnf6x9] {
    background: rgba(255, 152, 0, 0.15);
    color: #ffa726;
}

.badge-study[b-1dqcgnf6x9] {
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
}

.domain-bar-container[b-1dqcgnf6x9] {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.domain-bar[b-1dqcgnf6x9] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.results-cta[b-1dqcgnf6x9] {
    padding: 1rem;
    background: rgba(0, 255, 231, 0.04);
    border: 1px solid rgba(0, 255, 231, 0.15);
    border-radius: 8px;
    text-align: center;
}
/* /Pages/Dashboard/Components/ReadinessDashboard.razor.rz.scp.css */
.readiness-dashboard[b-wmtyww8lq7] {
    margin-bottom: 24px;
}

.readiness-loading[b-wmtyww8lq7] {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.readiness-header[b-wmtyww8lq7] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px;
    background: var(--glytic-surface, #fff);
    border: 1px solid var(--glytic-border, #e0e0e0);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.readiness-gauge[b-wmtyww8lq7] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-label[b-wmtyww8lq7] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-value[b-wmtyww8lq7] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #1e1e2e);
}

.gauge-text[b-wmtyww8lq7] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted, #999);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.readiness-stats[b-wmtyww8lq7] {
    display: flex;
    gap: 24px;
}

.stat-item[b-wmtyww8lq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number[b-wmtyww8lq7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #1e1e2e);
}

.stat-text[b-wmtyww8lq7] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted, #999);
}

.stat-item.reviews-due .stat-number[b-wmtyww8lq7] {
    color: #ff9800;
}

.readiness-section[b-wmtyww8lq7] {
    padding: 16px 20px;
    background: var(--glytic-surface, #fff);
    border: 1px solid var(--glytic-border, #e0e0e0);
    border-radius: 12px;
    margin-bottom: 16px;
}

.section-label[b-wmtyww8lq7] {
    margin-bottom: 12px;
    color: var(--glytic-text-primary, #1e1e2e);
}

.domain-row[b-wmtyww8lq7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.domain-info[b-wmtyww8lq7] {
    min-width: 140px;
    display: flex;
    flex-direction: column;
}

.domain-name[b-wmtyww8lq7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--glytic-text-primary, #1e1e2e);
}

.domain-weight[b-wmtyww8lq7] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted, #999);
}

.domain-bar-container[b-wmtyww8lq7] {
    flex: 1;
}

.domain-score[b-wmtyww8lq7] {
    min-width: 40px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-text-primary, #1e1e2e);
}

.weak-topics-list[b-wmtyww8lq7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weak-topic-item[b-wmtyww8lq7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glytic-border, rgba(255,255,255,0.08));
    border-radius: 8px;
}

.weak-topic-info[b-wmtyww8lq7] {
    display: flex;
    flex-direction: column;
}

.weak-topic-name[b-wmtyww8lq7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--glytic-text-primary, rgba(255,255,255,0.9));
}

.weak-topic-domain[b-wmtyww8lq7] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted, #999);
}

.weak-topic-stats[b-wmtyww8lq7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.weak-topic-score[b-wmtyww8lq7] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ef5350;
}

.weak-topic-detail[b-wmtyww8lq7] {
    font-size: 0.7rem;
    color: var(--glytic-text-muted, #999);
}

@media (max-width: 600px) {
    .readiness-header[b-wmtyww8lq7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .domain-row[b-wmtyww8lq7] {
        flex-wrap: wrap;
    }

    .domain-info[b-wmtyww8lq7] {
        min-width: 100%;
    }
}
/* /Pages/Dashboard/Components/Shared/ExamProgressCard.razor.rz.scp.css */
.exam-progress-card[b-c51djl91zu] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    position: relative;
}

/* Pin / unpin button — bottom-right of actions row */
.card-pin-btn[b-c51djl91zu] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: var(--qf-btn-radius);
    border: 1px solid var(--glytic-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--glytic-text-muted, rgba(255,255,255,0.3));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.card-pin-btn:hover[b-c51djl91zu] {
    border-color: rgba(244,67,54,0.4);
    color: #f44336;
    background: rgba(244,67,54,0.08);
}

.card-top[b-c51djl91zu] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Progress ring */
.ring-container[b-c51djl91zu] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.progress-ring[b-c51djl91zu] {
    width: 100%;
    height: 100%;
}

.ring-label[b-c51djl91zu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.ring-score[b-c51djl91zu] {
    font-family: var(--glytic-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    line-height: 1;
}

.ring-sub[b-c51djl91zu] {
    font-size: 0.6rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info section */
.card-info[b-c51djl91zu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-title-row[b-c51djl91zu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.card-title[b-c51djl91zu] {
    color: var(--glytic-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}

.in-progress-badge[b-c51djl91zu] {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    color: var(--glytic-primary);
    white-space: nowrap;
}

.card-meta[b-c51djl91zu] {
    color: var(--glytic-text-muted);
    font-size: 0.72rem;
}

.card-scores[b-c51djl91zu] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
}

/* Readiness bar */
.readiness-bar[b-c51djl91zu] {
    margin-top: 0.15rem;
}

.readiness-label[b-c51djl91zu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--glytic-text-muted);
    margin-bottom: 2px;
}

.readiness-value[b-c51djl91zu] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    color: var(--glytic-primary);
}

.readiness-track[b-c51djl91zu] {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.readiness-fill[b-c51djl91zu] {
    height: 100%;
    border-radius: 2px;
    /* Purple purge: teal->ember readiness fill (warm brand ramp, no logo purple). */
    background: linear-gradient(90deg, var(--glytic-primary), var(--forge-primary));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Weak category chips */
.weak-categories[b-c51djl91zu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.weak-chip[b-c51djl91zu] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    border-radius: 8px;
    font-size: 0.66rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action buttons */
.card-actions[b-c51djl91zu] {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

[b-c51djl91zu] .card-actions .mud-button {
    text-transform: none;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Primary recipe: the one main action of the card (Practice, or Continue when in progress --
   same role, so both classes render identically instead of Continue's old teal fill, which
   put white text on a teal-filled main action). */
[b-c51djl91zu] .card-actions .practice-btn,
[b-c51djl91zu] .card-actions .continue-btn {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    white-space: nowrap;
}

[b-c51djl91zu] .card-actions .practice-btn:hover,
[b-c51djl91zu] .card-actions .continue-btn:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary (outline) recipe already applies via the global root layer (Outlined Default);
   this class carries only layout so it matches its row siblings. */
[b-c51djl91zu] .card-actions .restart-btn {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ring-container[b-c51djl91zu] {
        width: 64px;
        height: 64px;
    }

    .ring-score[b-c51djl91zu] {
        font-size: 0.8rem;
    }

    .card-title[b-c51djl91zu] {
        font-size: 0.82rem;
    }

    .card-actions[b-c51djl91zu] {
        flex-wrap: wrap;
    }

    [b-c51djl91zu] .card-actions .mud-button {
        min-height: 44px;
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .weak-chip[b-c51djl91zu] {
        font-size: 0.62rem;
        padding: 0.12rem 0.4rem;
    }
}
/* /Pages/Dashboard/Components/Shared/PremiumOnboardingDialog.razor.rz.scp.css */
/* This dialog is teleported by MudDialogProvider out of any scoped root, so scoped
   selectors (and ::deep) silently no-op on the title bar and action bar. All styling
   lives in Client/wwwroot/css/quizforge.css keyed on the unique .premium-onboarding-shell
   class the MudDialog carries. Do not re-add scoped rules here. */
/* /Pages/Dashboard/Components/StudyHub.razor.rz.scp.css */
.study-hub[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Top bar: quick link out to the full exam catalog. */
.hub-topbar[b-tmlyeftkm7] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.hub-browse-all[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    background: rgba(var(--glytic-primary-rgb), 0.06);
    color: var(--glytic-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.hub-browse-all:hover[b-tmlyeftkm7] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border-color: rgba(var(--glytic-primary-rgb), 0.45);
}

/* ========================================================================
   P0-4 Hub composer: "what should I do right now?"
   Continue hero -> streak/goal row -> quick actions, above the tabs.
   ======================================================================== */
.hub-composer[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

/* --- Continue hero: largest tap target --- */
.hub-hero[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    /* Composed Strike plate: cut corners. clip-path shears box-shadow, so elevation reads
       through the border, not a shadow -- flat plane, quiet. */
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--forge-border);
    position: relative;
    isolation: isolate;
    text-decoration: none;
    transition: background var(--glytic-transition);
    animation: hub-rise-b-tmlyeftkm7 0.35s cubic-bezier(0.22, 0.68, 0.37, 1) both;
}

/* Double-layer reveal: element bg = border color; ::before paints the plate fill so the border
   follows both cut corners (clip-path shears a rectangular border off the 45deg cuts).
   Interior at z-index:-1 under isolation -- content needs no lift (scoped child-lift rules
   never reach MudBlazor-rendered children, which carry no scope attribute). */
.hub-hero[b-tmlyeftkm7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--glytic-primary-rgb), 0.12), transparent 60%),
        var(--forge-surface),
        var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

.hub-hero:hover[b-tmlyeftkm7] {
    background: var(--glytic-border-hover);
}

.hub-hero:hover[b-tmlyeftkm7]::before {
    background:
        radial-gradient(circle at 12% 20%, rgba(var(--glytic-primary-rgb), 0.18), transparent 60%),
        var(--forge-surface),
        var(--glytic-card-bg);
}

/* clip-path clips the outline too -> inset focus ring (this hero is an <a>). */
.hub-hero:focus-visible[b-tmlyeftkm7] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.hub-hero-body[b-tmlyeftkm7] {
    flex: 1;
    min-width: 0;
}

.hub-hero-eyebrow[b-tmlyeftkm7] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--forge-primary);
    margin-bottom: 0.25rem;
}

.hub-hero-title[b-tmlyeftkm7] {
    font-family: var(--glytic-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hub-hero-meta[b-tmlyeftkm7] {
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    margin-top: 0.25rem;
}

.hub-hero-cta[b-tmlyeftkm7] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-weight: 700;
    font-size: 0.78rem;
}

.hub-hero-cta-label[b-tmlyeftkm7] {
    white-space: nowrap;
}

[b-tmlyeftkm7] .hub-hero-cta .mud-icon-root {
    font-size: 1.1rem;
}

.hub-hero-start .hub-hero-cta[b-tmlyeftkm7] {
    /* Purple purge: flat teal wash (was teal->purple). Double-layer reveal so the hairline
       border follows the top-right cut (clip-path shears a rectangular border). */
    background: var(--glytic-border);
    color: var(--glytic-primary);
    position: relative;
    isolation: isolate;
}

.hub-hero-start .hub-hero-cta[b-tmlyeftkm7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.18), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

/* --- Streak + daily goal row --- */
.hub-streak-row[b-tmlyeftkm7] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    animation: hub-rise-b-tmlyeftkm7 0.35s cubic-bezier(0.22, 0.68, 0.37, 1) 0.05s both;
}

.hub-streak-chip[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0.6rem 0.9rem;
    min-width: 86px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 0;
    background: var(--glytic-border);
    color: var(--glytic-text-muted);
    position: relative;
    isolation: isolate;
}

.hub-streak-chip[b-tmlyeftkm7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.hub-streak-chip.is-active[b-tmlyeftkm7] {
    background: var(--forge-border);
    color: var(--forge-primary);
}

.hub-streak-chip.is-active[b-tmlyeftkm7]::before {
    background: linear-gradient(var(--forge-surface), var(--forge-surface)), var(--glytic-card-bg);
}

.hub-flame[b-tmlyeftkm7] {
    display: inline-flex;
    color: var(--glytic-text-muted);
}

.hub-streak-chip.is-active .hub-flame[b-tmlyeftkm7] {
    color: var(--forge-primary);
}

.hub-flame svg[b-tmlyeftkm7] {
    fill: currentColor;
}

.hub-streak-count[b-tmlyeftkm7] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--glytic-text-primary);
    font-variant-numeric: tabular-nums;
}

.hub-streak-chip.is-active .hub-streak-count[b-tmlyeftkm7] {
    color: var(--forge-primary);
}

.hub-streak-label[b-tmlyeftkm7] {
    font-size: 0.54rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.hub-goal[b-tmlyeftkm7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
    transition: background var(--glytic-transition);
}

.hub-goal[b-tmlyeftkm7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

/* Goal met = mastery = teal (was logo purple). clip-path shears box-shadow, so the met
   state reads through border + bg tint, not a glow. */
.hub-goal.is-met[b-tmlyeftkm7] {
    background: var(--glytic-primary);
}

.hub-goal.is-met[b-tmlyeftkm7]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-card-bg);
}

.hub-goal-ring[b-tmlyeftkm7] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        conic-gradient(var(--glytic-primary) calc(var(--hub-goal-pct) * 1%), rgba(var(--glytic-primary-rgb), 0.12) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-goal.is-met .hub-goal-ring[b-tmlyeftkm7] {
    background: conic-gradient(var(--glytic-primary) 100%, var(--glytic-primary) 0);
}

.hub-goal-ring-inner[b-tmlyeftkm7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--glytic-bg-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glytic-primary);
}

.hub-goal-num[b-tmlyeftkm7] {
    font-family: var(--glytic-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--glytic-primary);
    font-variant-numeric: tabular-nums;
}

[b-tmlyeftkm7] .hub-goal-ring-inner .mud-icon-root {
    font-size: 1.1rem;
    color: var(--glytic-primary);
}

.hub-goal-text[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hub-goal-title[b-tmlyeftkm7] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}

.hub-goal.is-met .hub-goal-title[b-tmlyeftkm7] {
    color: var(--glytic-primary);
}

.hub-goal-sub[b-tmlyeftkm7] {
    font-size: 0.62rem;
    color: var(--glytic-text-muted);
    margin-top: 1px;
}

/* --- Quick actions row --- */
.hub-actions-row[b-tmlyeftkm7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.5rem;
    animation: hub-rise-b-tmlyeftkm7 0.35s cubic-bezier(0.22, 0.68, 0.37, 1) 0.1s both;
}

.hub-action[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
    text-decoration: none;
    transition: background var(--glytic-transition);
    min-width: 0;
}

.hub-action[b-tmlyeftkm7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

.hub-action:hover[b-tmlyeftkm7] {
    background: var(--glytic-border-hover);
}

.hub-action:hover[b-tmlyeftkm7]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

.hub-action:focus-visible[b-tmlyeftkm7] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.hub-action-icon[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--glytic-gradient-card);
    color: var(--glytic-primary);
}

[b-tmlyeftkm7] .hub-action-icon .mud-icon-root {
    font-size: 1rem;
}

.hub-action-create .hub-action-icon[b-tmlyeftkm7] {
    /* Purple purge: Create quick-action reads as ember (the CTA accent), not logo purple. */
    background: var(--forge-surface);
    color: var(--forge-primary);
}

.hub-action-label[b-tmlyeftkm7] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    line-height: 1.2;
}

.hub-action-sub[b-tmlyeftkm7] {
    font-size: 0.58rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@keyframes hub-rise-b-tmlyeftkm7 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-hero[b-tmlyeftkm7],
    .hub-streak-row[b-tmlyeftkm7],
    .hub-actions-row[b-tmlyeftkm7] {
        animation: none;
    }
}

/* Hub composer mobile tuning (390x844) */
@media (max-width: 600px) {
    .hub-hero[b-tmlyeftkm7] {
        padding: 1rem;
    }

    .hub-hero-title[b-tmlyeftkm7] {
        font-size: 0.98rem;
    }

    .hub-actions-row[b-tmlyeftkm7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cold start section */
.cold-start-section[b-tmlyeftkm7] {
    text-align: center;
    padding: 2rem 1rem;
}

[b-tmlyeftkm7] .browse-cta {
    text-transform: none;
    font-weight: 600;
}

/* Section headers */
.section-header[b-tmlyeftkm7] {
    margin-bottom: 0.75rem;
}

/* Placement prompt: converted to a real <button> for keyboard reachability, so reset the
   native button chrome to match the previous div's box. */
.placement-prompt[b-tmlyeftkm7] {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    border: 0;
    cursor: pointer;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0;
    transition: border-color 0.2s;
}

.placement-prompt:focus-visible[b-tmlyeftkm7] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.placement-prompt:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
}

.placement-prompt-content[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.placement-section[b-tmlyeftkm7] {
    padding: 1.25rem;
    margin: 0.5rem 0;
}

/* Career select prompt */
.career-select-prompt[b-tmlyeftkm7] {
    display: block;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

/* Mobile */
@media (max-width: 600px) {
    .cold-start-section[b-tmlyeftkm7] {
        padding: 1.5rem 0.5rem;
    }

    .placement-prompt-content[b-tmlyeftkm7] {
        gap: 0.75rem;
    }
}

/* ========== Path Tabs Card ========== */
.path-tabs-card[b-tmlyeftkm7] {
    margin-bottom: 0.75rem;
}

.path-tabs-strip[b-tmlyeftkm7] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--glytic-border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--glytic-card-bg);
    border-radius: var(--glytic-border-radius-small) var(--glytic-border-radius-small) 0 0;
}

.path-tabs-strip[b-tmlyeftkm7]::-webkit-scrollbar {
    display: none;
}

/* Tabs recipe: no fill, muted label, selected = text-primary + 2px teal indicator. */
.path-tab[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.path-tab:hover[b-tmlyeftkm7] {
    color: var(--glytic-text-primary);
}

.path-tab:focus-visible[b-tmlyeftkm7] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

.path-tab.active[b-tmlyeftkm7] {
    color: var(--glytic-text-primary);
    border-bottom-color: var(--glytic-primary);
}

/* Career-path tab = label button + removable "x". The wrap owns the active underline so the
   label and the x read as one tab; the x stays a tiny, distinct tap target. */
.path-tab-wrap[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: border-color 0.2s;
}

.path-tab-wrap.active[b-tmlyeftkm7] {
    border-bottom-color: var(--glytic-primary);
}

/* The label inside a wrap drops its own underline/margin -- the wrap provides them. */
.path-tab-label[b-tmlyeftkm7] {
    border-bottom: none;
    margin-bottom: 0;
    padding-right: 0.4rem;
}

.path-tab-wrap.active .path-tab-label[b-tmlyeftkm7] {
    background: transparent;
}

/* Icon button recipe (compact, matches the tab strip's dense row). */
.path-tab-remove[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    padding: 0;
    border: none;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.path-tab-remove:hover[b-tmlyeftkm7] {
    opacity: 1;
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.path-tab-remove:focus-visible[b-tmlyeftkm7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

[b-tmlyeftkm7] .path-tab-remove .mud-icon-root {
    font-size: 14px;
}

.path-tab.add-path[b-tmlyeftkm7] {
    gap: 4px;
    color: var(--glytic-text-muted);
    font-weight: 500;
}

.path-tab.add-path:hover[b-tmlyeftkm7] {
    color: var(--glytic-primary);
}

[b-tmlyeftkm7] .path-tab.add-path .mud-icon-root {
    font-size: 16px;
}

.path-tab-content[b-tmlyeftkm7] {
    padding: 1rem;
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-top: none;
    border-radius: 0 0 var(--glytic-border-radius-small) var(--glytic-border-radius-small);
}

/* Sections inside tab content */
.path-tab-content .goal-header[b-tmlyeftkm7] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glytic-border);
}

.path-tab-content .coach-focus-section[b-tmlyeftkm7] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glytic-border);
}

.path-tab-content .week-stats-row[b-tmlyeftkm7] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glytic-border);
}

/* ========== Community Exam Rows ========== */
.community-exam-row[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--glytic-border);
}

.community-exam-row:last-child[b-tmlyeftkm7] {
    border-bottom: none;
}

.ce-info[b-tmlyeftkm7] {
    flex: 1;
    min-width: 0;
}

.ce-title[b-tmlyeftkm7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-title:hover[b-tmlyeftkm7] {
    color: var(--glytic-primary);
}

.ce-meta[b-tmlyeftkm7] {
    font-size: 0.62rem;
    color: var(--glytic-text-muted);
    margin-top: 2px;
}

.ce-actions[b-tmlyeftkm7] {
    flex-shrink: 0;
}

/* Secondary (outline) recipe: transparent, teal hairline on hover. */
.ce-btn[b-tmlyeftkm7] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    text-decoration: none;
    color: var(--glytic-text-primary);
    background: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}

.ce-btn:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.ce-btn:focus-visible[b-tmlyeftkm7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Primary recipe: the one main row action (Resume / Start / Go to My Exams). */
.ce-btn.primary[b-tmlyeftkm7] {
    background: var(--forge-gradient-btn);
    border-color: var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.ce-btn.primary:hover[b-tmlyeftkm7] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Row action group: primary action + secondary icon-only Flashcards/Pin (matches My Tests). */
.ce-actions[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Icon button recipe: transparent, no hairline (overrides the .ce-btn secondary border). */
.ce-btn-icon[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--glytic-text-secondary);
}

.ce-btn-icon:hover[b-tmlyeftkm7] {
    border-color: transparent;
    background: rgba(var(--glytic-primary-rgb), .1);
    color: var(--glytic-text-primary);
}

.ce-pin.pinned[b-tmlyeftkm7] {
    color: var(--glytic-primary);
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

[b-tmlyeftkm7] .ce-btn-icon .mud-icon-root {
    font-size: 15px;
}

.ce-empty[b-tmlyeftkm7] {
    text-align: center;
    padding: 1.5rem 1rem;
}

.ce-footer[b-tmlyeftkm7] {
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.ce-browse-link[b-tmlyeftkm7] {
    font-size: 0.7rem;
    color: var(--glytic-primary);
    text-decoration: none;
    font-weight: 500;
}

.ce-browse-link:hover[b-tmlyeftkm7] {
    opacity: 0.8;
}

/* ========== Goal Header ========== */
.goal-header[b-tmlyeftkm7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.goal-header-main[b-tmlyeftkm7] {
    flex: 1;
    min-width: 0;
}

.goal-path-label[b-tmlyeftkm7] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--glytic-primary);
    margin-bottom: 3px;
    opacity: 0.8;
}

.goal-exam-name[b-tmlyeftkm7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-meta[b-tmlyeftkm7] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
    margin-top: 3px;
}

.goal-meta-sep[b-tmlyeftkm7] {
    margin: 0 4px;
}

.goal-readiness[b-tmlyeftkm7] {
    text-align: right;
    flex-shrink: 0;
}

.readiness-link[b-tmlyeftkm7] {
    text-decoration: none;
}

.readiness-value[b-tmlyeftkm7] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--glytic-primary);
    line-height: 1;
    font-family: var(--glytic-font-heading);
    font-variant-numeric: tabular-nums;
}

.readiness-label[b-tmlyeftkm7] {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-muted);
}

/* ========== Per-path progress strip ========== */
.path-strip[b-tmlyeftkm7] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glytic-border);
}

.path-strip-trend[b-tmlyeftkm7] {
    flex: 1;
    min-width: 0;
}

.path-strip-trend-header[b-tmlyeftkm7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.path-strip-label[b-tmlyeftkm7] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-muted);
    font-weight: 600;
}

.path-strip-delta[b-tmlyeftkm7] {
    font-size: 0.7rem;
    font-weight: 700;
}

.path-strip-delta.trend-up[b-tmlyeftkm7] { color: var(--glytic-primary); }
.path-strip-delta.trend-down[b-tmlyeftkm7] { color: var(--forge-primary); }

.path-strip-spark[b-tmlyeftkm7] {
    height: 40px;
    width: 100%;
}

.path-spark-svg[b-tmlyeftkm7] {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.path-spark-line[b-tmlyeftkm7] {
    fill: none;
    stroke: var(--glytic-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.path-spark-area[b-tmlyeftkm7] {
    fill: url(#pathSparkGradient);
}

/* Gradient stops carry brand teal at varying alpha (no hex in markup -- classed like Analytics). */
.path-strip-spark .spark-area-stop-top[b-tmlyeftkm7] { stop-color: var(--glytic-primary); stop-opacity: 0.28; }
.path-strip-spark .spark-area-stop-bottom[b-tmlyeftkm7] { stop-color: var(--glytic-primary); stop-opacity: 0; }

.path-strip-single[b-tmlyeftkm7] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
    line-height: 1.3;
    /* Match the skeleton/sparkline height (40px) so the strip never changes height as it
       resolves between the loading, single-score, and empty states -- no layout jump. */
    min-height: 40px;
    display: flex;
    align-items: center;
}

.path-strip-readiness[b-tmlyeftkm7] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 64px;
    padding: 0 0.5rem;
    text-decoration: none;
    border-left: 1px solid var(--glytic-border);
}

.path-strip-readiness-value[b-tmlyeftkm7] {
    font-family: var(--glytic-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--glytic-primary);
    font-variant-numeric: tabular-nums;
}

.path-strip-readiness-label[b-tmlyeftkm7] {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-muted);
}

.path-strip-analytics-link[b-tmlyeftkm7] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: center;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
    color: var(--glytic-text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.path-strip-analytics-link:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
    color: var(--glytic-primary);
}

/* Loading skeleton while the on-demand per-path progress fetch is in flight. */
.path-strip-skeleton[b-tmlyeftkm7] {
    height: 40px;
    width: 100%;
}

/* ========== Per-path topic mastery (reuses the Analytics P1-9 mastery-bar pattern) ========== */
.path-mastery[b-tmlyeftkm7] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glytic-border);
}

.path-mastery-header[b-tmlyeftkm7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.path-mastery-title[b-tmlyeftkm7] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.path-mastery-subtitle[b-tmlyeftkm7] {
    font-size: 0.64rem;
    color: var(--glytic-text-muted);
    letter-spacing: 0.3px;
}

/* Mastery bar rows -- same structure/classes as Analytics, defined here because scoped CSS does
   not cross component boundaries. Compact (the strip sits above the cert list). */
.mastery-row[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4px 0;
}

.mastery-name[b-tmlyeftkm7] {
    flex: 0 0 40%;
    max-width: 40%;
    font-size: 0.74rem;
    color: var(--glytic-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mastery-track[b-tmlyeftkm7] {
    flex: 1;
    height: 7px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.mastery-fill[b-tmlyeftkm7] {
    height: 100%;
    border-radius: 0;
    /* Composed Strike: angled fill end (the wedge), like the quiz progress bar. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
    transform-origin: left center;
    transition: width var(--glytic-transition-long);
    animation: path-mastery-grow-b-tmlyeftkm7 0.7s cubic-bezier(0.22, 0.68, 0.37, 1) both;
}

/* Mastery fill bands: brand teal / amber / ember. No alarm red (a learning app encourages). */
.mastery-fill.score-high[b-tmlyeftkm7] { background: var(--glytic-primary); }
.mastery-fill.score-mid[b-tmlyeftkm7] { background: var(--forge-gold); }
.mastery-fill.score-low[b-tmlyeftkm7] { background: var(--forge-primary); }

.mastery-value[b-tmlyeftkm7] {
    flex: 0 0 34px;
    text-align: right;
    font-size: 0.74rem;
    font-weight: 700;
}

.mastery-value.score-high[b-tmlyeftkm7] { color: var(--glytic-primary); }
.mastery-value.score-mid[b-tmlyeftkm7] { color: var(--forge-gold); }
.mastery-value.score-low[b-tmlyeftkm7] { color: var(--forge-primary); }

@keyframes path-mastery-grow-b-tmlyeftkm7 {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Mobile: give the topic name a little more room on narrow screens. */
@media (max-width: 768px) {
    .mastery-name[b-tmlyeftkm7] {
        flex-basis: 46%;
        max-width: 46%;
        font-size: 0.72rem;
    }

    .mastery-row[b-tmlyeftkm7] {
        gap: 0.45rem;
    }
}

/* Respect reduced-motion: keep the final filled bar, drop the grow-in. */
@media (prefers-reduced-motion: reduce) {
    .mastery-fill[b-tmlyeftkm7] {
        animation: none;
        transform: none;
        transition: none;
    }
}

/* ========== Career Select Prompt ========== */
.career-select-prompt[b-tmlyeftkm7] {
    display: block;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.csp-inner[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--glytic-border-radius-small);
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
    transition: var(--glytic-transition);
}

.csp-inner:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
}

.csp-text[b-tmlyeftkm7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.csp-heading[b-tmlyeftkm7] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}

.csp-sub[b-tmlyeftkm7] {
    font-size: 0.65rem;
    color: var(--glytic-text-muted);
}

/* ========== AI Coach Focus ========== */

.coach-focus-row[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.coach-focus-left[b-tmlyeftkm7] {
    flex: 1 1 100%;
    min-width: 0;
}

.coach-title[b-tmlyeftkm7] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-secondary);
    margin-right: 0.4rem;
}

.coach-brief-text[b-tmlyeftkm7] {
    font-size: 0.82rem;
    color: var(--glytic-text-primary);
    line-height: 1.5;
}

.coach-actions[b-tmlyeftkm7] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Secondary (outline) recipe. */
.coach-action-btn[b-tmlyeftkm7] {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: var(--qf-btn-radius);
    text-decoration: none;
    border: 1px solid var(--glytic-border-hover);
    background: transparent;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.coach-action-btn:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.coach-action-btn:focus-visible[b-tmlyeftkm7] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Primary recipe: the one main focus action (Start Practice / focus topic). */
.coach-action-btn.primary[b-tmlyeftkm7] {
    background: var(--forge-gradient-btn);
    border-color: var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.coach-action-btn.primary:hover[b-tmlyeftkm7] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

.coach-skeleton[b-tmlyeftkm7] {
    padding: 0.25rem 0;
}

/* ========== Week + Stats Combined Row ========== */
.week-stats-row[b-tmlyeftkm7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ========== Study Plan Strip ========== */
.plan-strip[b-tmlyeftkm7] {
    padding: 0;
}

.plan-strip-header[b-tmlyeftkm7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.plan-strip-title[b-tmlyeftkm7] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}

.plan-strip-meta[b-tmlyeftkm7] {
    font-size: 0.65rem;
    color: var(--glytic-text-muted);
}

.plan-week-strip[b-tmlyeftkm7] {
    display: flex;
    gap: 4px;
}

.plan-day[b-tmlyeftkm7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 6px;
    border: 1px solid var(--glytic-border);
    cursor: pointer;
    transition: var(--glytic-transition);
    background: var(--glytic-card-bg);
}

.plan-day:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
}

.plan-day-today[b-tmlyeftkm7] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.06);
}

.plan-day-done[b-tmlyeftkm7] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-color: var(--glytic-primary);
}

.plan-day-name[b-tmlyeftkm7] {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--glytic-text-muted);
}

.plan-day-num[b-tmlyeftkm7] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}

.plan-day-today .plan-day-name[b-tmlyeftkm7],
.plan-day-today .plan-day-num[b-tmlyeftkm7] {
    color: var(--glytic-primary);
}

.plan-day-done .plan-day-num[b-tmlyeftkm7] {
    color: var(--glytic-primary);
}


.plan-day-partial[b-tmlyeftkm7] {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.35);
}

.plan-day-future[b-tmlyeftkm7] {
    opacity: 0.4;
}

.plan-day-partial .plan-day-name[b-tmlyeftkm7],
.plan-day-partial .plan-day-num[b-tmlyeftkm7] {
    color: var(--glytic-score-mid);
}

.plan-day-mins[b-tmlyeftkm7] {
    font-size: 0.5rem;
    color: var(--glytic-score-mid);
    font-weight: 600;
}

/* ========== Inline Stats ========== */
.stats-inline[b-tmlyeftkm7] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.stat-inline[b-tmlyeftkm7] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
}

.stat-inline strong[b-tmlyeftkm7] {
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
}

/* Empty past day (no activity, not today, not future) */
.plan-day-empty[b-tmlyeftkm7] {
    opacity: 0.35;
}

/* ========== Mobile ========== */
@media (max-width: 600px) {
    .goal-exam-name[b-tmlyeftkm7] {
        font-size: 0.9rem;
    }

    .readiness-value[b-tmlyeftkm7] {
        font-size: 1.3rem;
    }

    .coach-focus-row[b-tmlyeftkm7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-inline[b-tmlyeftkm7] {
        justify-content: flex-start;
    }
}
/* /Pages/Dashboard/LearningCenter.razor.rz.scp.css */
.dashboard-shell[b-sq2akgb5zb] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    min-height: calc(100vh - 64px - 3rem);
    min-height: calc(100dvh - 64px - 3rem);
    /* Backstop: nested flex children (resume card / attempt rows) that lose their
       stretched width in the mobile column layout must not blow out the page's
       horizontal scroll extent. Clip at the shell, not html/body. */
    overflow-x: clip;
}

/* Header row: tab bar + browse pill */
.dashboard-header-row[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Composed Strike: the single quiet diagonal at the page head. Height trimmed from the
   global 56px so it reads as a hairline rule, not a band. */
.dashboard-rule-diag[b-sq2akgb5zb] {
    height: 26px;
    margin: 0 0 1.25rem;
}

/* Create Exam entry-point button in dashboard header. Same .qf-plan-action--primary house
   recipe as every other primary CTA on the dashboard (owner directive 2026-09-23). First-class,
   always-present premium action -- deliberately not dependent on the Study Hub snapshot. */
.dashboard-create-btn[b-sq2akgb5zb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.75rem 1rem;
    min-height: 48px;
    border: 1px solid var(--forge-primary);
    border-radius: 8px;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    clip-path: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-create-btn:hover[b-sq2akgb5zb] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    box-shadow: none;
}

.dashboard-create-btn:focus-visible[b-sq2akgb5zb] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 3px;
}

[b-sq2akgb5zb] .dashboard-create-btn .mud-icon-root {
    font-size: 1.05rem;
    color: var(--qf-ink);
}

/* Tab bar - matches homepage sticky-tab pattern */
.dashboard-tab-bar[b-sq2akgb5zb] {
    display: flex;
    gap: 0;
    max-width: 720px;
    margin: 0.4rem 0 0;
}


.dashboard-tab[b-sq2akgb5zb] {
    flex: 1;
    padding: 0.55rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--glytic-font-heading);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
    white-space: nowrap;
}

.dashboard-tab:hover[b-sq2akgb5zb] {
    color: rgba(255, 255, 255, 0.75);
}

.dashboard-tab.active[b-sq2akgb5zb] {
    color: var(--glytic-primary);
    border-bottom-color: var(--glytic-primary);
}

/* Content area */
.dashboard-content[b-sq2akgb5zb] {
    min-height: clamp(28rem, 65vh, 42rem);
    min-height: clamp(28rem, 65dvh, 42rem);
}

/* Loading state */
.dashboard-loading[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    /* Reserve a stable block so the footer does not sit under the spinner and then jump when
       content arrives (min-height: inherit collapsed to ~0 when the parent had no min-height).
       Mirrors the Pricing page loading clamp. QA 2026-07-15. */
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
}

/* Error state */
.dashboard-error[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Mobile: horizontal scroll tabs */
@media (max-width: 600px) {
    .dashboard-shell[b-sq2akgb5zb] {
        padding: 0.5rem 0.5rem 1.5rem;
        min-height: calc(100vh - 56px - 2rem);
        min-height: calc(100dvh - 56px - 2rem);
    }

    .dashboard-header-row[b-sq2akgb5zb] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .dashboard-tab-bar[b-sq2akgb5zb] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 0;
    }

    .dashboard-tab-bar[b-sq2akgb5zb]::-webkit-scrollbar {
        display: none;
    }

    .dashboard-tab[b-sq2akgb5zb] {
        min-width: 80px;
        font-size: 0.68rem;
        padding: 0.45rem 0.5rem;
    }

    /* Header row is column-stretch on mobile, so the create action becomes a full-width,
       thumb-reachable plate below the tabs. */
    .dashboard-create-btn[b-sq2akgb5zb] {
        width: 100%;
        min-height: 46px;
    }

}

/* ===== Free User Dashboard (audit 2026-07-08) ===== */

.free-dashboard-title[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0;
}

.free-dashboard-content[b-sq2akgb5zb] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.free-streak-banner[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: rgba(255, 152, 0, 0.2);
    border: 0;
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    width: fit-content;
    position: relative;
    isolation: isolate;
}

.free-streak-banner[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    background: linear-gradient(rgba(255, 152, 0, 0.08), rgba(255, 152, 0, 0.08)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.free-resume-card[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border: 0;
    position: relative;
    isolation: isolate;
}

.free-resume-card[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.free-resume-info[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    /* Without an explicit width, this flex item keeps its content's (unwrapped)
       hypothetical size on narrow/wrapped rows instead of the parent's stretched
       width, so .free-resume-exam's ellipsis truncation has nothing to clip
       against -- root cause of the mobile horizontal-overflow defect. */
    width: 100%;
}

.free-resume-label[b-sq2akgb5zb] {
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--glytic-text-muted);
}

.free-resume-exam[b-sq2akgb5zb] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.free-section-heading[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.free-recent-activity[b-sq2akgb5zb] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 1.25rem 1.5rem;
    position: relative;
    isolation: isolate;
}

.free-recent-activity[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.free-attempts-list[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.free-attempt-row[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--glytic-border);
}

.free-attempt-row:last-child[b-sq2akgb5zb] {
    border-bottom: none;
}

.free-attempt-main[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    /* Same fix as .free-resume-info: at mobile, .free-attempt-row switches to
       align-items:flex-start (see below), which stops giving this item a
       stretched width, so .free-attempt-exam's max-width:100% has nothing
       definite to resolve against and the nowrap title overflows instead
       of ellipsing. */
    width: 100%;
}

.free-attempt-exam[b-sq2akgb5zb] {
    font-weight: 600;
    color: var(--glytic-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.free-attempt-date[b-sq2akgb5zb] {
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

.free-attempt-side[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.free-attempt-score[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    color: var(--glytic-primary);
    font-variant-numeric: tabular-nums;
}

.free-attempt-status[b-sq2akgb5zb] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
}

/* Activity row action (Retry / Resume) is a text-variant button but reads as a link;
   mute it to the professional secondary link treatment. */
[b-sq2akgb5zb] .free-attempt-side .mud-button-root {
    color: var(--glytic-text-secondary);
    text-transform: none;
    font-weight: 600;
}

[b-sq2akgb5zb] .free-attempt-side .mud-button-root:hover,
[b-sq2akgb5zb] .free-attempt-side .mud-button-root:focus-visible {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    background: transparent;
}

.free-history-link[b-sq2akgb5zb] {
    display: inline-block;
    margin-top: 1rem;
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.free-history-link:hover[b-sq2akgb5zb],
.free-history-link:focus-visible[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
}

/* ===== Free-tier stat strip + taste question (owner directive 2026-09-20) =====
   Replaces the upsell card wall; numbers come from the free dashboard's own data. */
.free-stat-strip[b-sq2akgb5zb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Double-layer reveal: element bg draws the border color; ::before inset 1px paints the
   interior under the cut corners (clip-path shears a rectangular border off 45deg cuts). */
.free-stat[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--glytic-border);
    clip-path: var(--qf-clip-card);
    position: relative;
    isolation: isolate;
}

.free-stat[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.free-stat-value[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    font-variant-numeric: tabular-nums;
}

.free-stat-label[b-sq2akgb5zb] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--glytic-text-secondary);
}

/* The taste question is a hero-column widget; center it so it does not stretch
   edge-to-edge across the dashboard content width. */
.free-taste-wrap[b-sq2akgb5zb] {
    max-width: 560px;
    margin: 0 auto;
}

.free-upgrade-row[b-sq2akgb5zb] {
    margin-top: 1.5rem;
    text-align: center;
}

.free-upgrade-link[b-sq2akgb5zb] {
    display: inline-block;
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.free-upgrade-link:hover[b-sq2akgb5zb],
.free-upgrade-link:focus-visible[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    border-bottom-color: transparent;
}

.free-empty-state[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    color: var(--glytic-text-secondary);
    position: relative;
    isolation: isolate;
}

.free-empty-state[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

/* Zero-session first-action card: leads the empty dashboard so it is engagement-first. */
.free-first-action[b-sq2akgb5zb] {
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    background: rgba(var(--glytic-primary-rgb), 0.25);
}

.free-first-action[b-sq2akgb5zb]::before {
    background: linear-gradient(180deg, rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.01)), var(--glytic-card-bg);
}

.free-first-action-title[b-sq2akgb5zb] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    letter-spacing: -0.01em;
}

.free-first-action-sub[b-sq2akgb5zb] {
    margin: 0;
    max-width: 42ch;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
}

.free-first-action-cta[b-sq2akgb5zb] {
    margin-top: 0.5rem;
}

/* Guest readiness carryover card: the readiness check taken before signup, claimed from
   localStorage. Leads the empty dashboard above the zero-state (funnel gap 1, 2026-07-23). */
.readiness-carry-card[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border: 0;
    position: relative;
    isolation: isolate;
}

.readiness-carry-card[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.readiness-carry-dismiss[b-sq2akgb5zb] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: transparent;
    border: 0;
    color: var(--glytic-text-muted);
    cursor: pointer;
}

.readiness-carry-dismiss:hover[b-sq2akgb5zb],
.readiness-carry-dismiss:focus-visible[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
}

.readiness-carry-eyebrow[b-sq2akgb5zb] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

.readiness-carry-head[b-sq2akgb5zb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.readiness-carry-exam[b-sq2akgb5zb] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    letter-spacing: -0.01em;
}

.readiness-carry-score[b-sq2akgb5zb] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--glytic-text-secondary);
    font-variant-numeric: tabular-nums;
}

.readiness-carry-rows[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.readiness-carry-row[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
}

.readiness-carry-row.is-weak .readiness-carry-domain[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
    font-weight: 600;
}

.readiness-carry-domain[b-sq2akgb5zb] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.readiness-carry-tag[b-sq2akgb5zb] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    color: var(--forge-primary);
    background: var(--forge-surface);
    border: 1px solid var(--forge-border-subtle);
}

.readiness-carry-count[b-sq2akgb5zb] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--glytic-text-muted);
}

.readiness-carry-row.is-weak .readiness-carry-count[b-sq2akgb5zb] {
    color: var(--glytic-text-secondary);
}

.readiness-carry-actions[b-sq2akgb5zb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* Quiet action, same recipe as .free-history-link below the activity list. */
.readiness-carry-see[b-sq2akgb5zb] {
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.readiness-carry-see:hover[b-sq2akgb5zb],
.readiness-carry-see:focus-visible[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
}

.dashboard-premium-secondary[b-sq2akgb5zb] {
    margin-top: 2rem;
    padding: 2rem 1.5rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border);
    border: 0;
    position: relative;
    isolation: isolate;
}

.dashboard-premium-secondary[b-sq2akgb5zb]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.premium-secondary-header[b-sq2akgb5zb] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.premium-secondary-subtitle[b-sq2akgb5zb] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    max-width: 560px;
    margin: 0.5rem auto 0;
}

@media (max-width: 768px) {
    .free-stat-strip[b-sq2akgb5zb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .free-resume-card[b-sq2akgb5zb] {
        flex-direction: column;
        align-items: stretch;
    }

    .free-attempt-row[b-sq2akgb5zb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .free-attempt-side[b-sq2akgb5zb] {
        width: 100%;
        justify-content: space-between;
    }

    .free-attempt-exam[b-sq2akgb5zb] {
        max-width: 100%;
    }
}

/* Stats-first lead section (dash=c) */
.free-stats-lead[b-sq2akgb5zb] {
    margin-top: 2rem;
    padding: 1.5rem;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    clip-path: var(--qf-clip-card);
}

    .free-stats-lead[b-sq2akgb5zb]::before {
        content: '';
        position: absolute;
        inset: 1px;
        z-index: -1;
        background: var(--glytic-card-bg);
        clip-path: var(--qf-clip-card);
    }

    .free-stats-lead .free-stat-strip[b-sq2akgb5zb] {
        margin-bottom: 0;
    }

/* Functional hub cards (dash=b/c) */
.free-hub-section[b-sq2akgb5zb] {
    margin-top: 2rem;
}

.free-hub-cards[b-sq2akgb5zb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.free-hub-card[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    clip-path: var(--qf-clip-card);
}

    .free-hub-card[b-sq2akgb5zb]::before {
        content: '';
        position: absolute;
        inset: 1px;
        z-index: -1;
        background: var(--glytic-card-bg);
        clip-path: var(--qf-clip-card);
    }

.free-hub-card--create[b-sq2akgb5zb] {
    background: rgba(var(--glytic-primary-rgb), 0.45);
}

    .free-hub-card--create[b-sq2akgb5zb]::before {
        background: linear-gradient(180deg, rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.01)), var(--glytic-card-bg);
    }

.free-hub-eyebrow[b-sq2akgb5zb] {
    display: block;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--glytic-primary);
    margin-bottom: 0.35rem;
}

.free-hub-card-title[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0 0 0.4rem;
}

.free-hub-card-desc[b-sq2akgb5zb] {
    color: var(--glytic-text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.free-hub-steps[b-sq2akgb5zb] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.free-hub-step[b-sq2akgb5zb] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.free-hub-step-icon[b-sq2akgb5zb] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(var(--glytic-primary-rgb), 0.18);
    color: var(--glytic-primary);
    clip-path: var(--qf-clip-btn);
}

[b-sq2akgb5zb] .free-hub-step-icon .mud-icon-root {
    color: inherit;
    font-size: 1.15rem;
}

.free-hub-step-text[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.free-hub-step-title[b-sq2akgb5zb] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    line-height: 1.35;
}

.free-hub-step-detail[b-sq2akgb5zb] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    line-height: 1.4;
}

.free-hub-perks[b-sq2akgb5zb] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .free-hub-perks li[b-sq2akgb5zb] {
        position: relative;
        padding-left: 1.05rem;
        color: var(--glytic-text-secondary);
        font-size: 0.9rem;
        line-height: 1.45;
    }

        .free-hub-perks li[b-sq2akgb5zb]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5em;
            width: 7px;
            height: 7px;
            background: var(--glytic-primary);
        }

.free-hub-cta-row[b-sq2akgb5zb] {
    margin-top: auto;
    display: flex;
}

/* ===== Unified dashboard CTA system (owner directive 2026-09-23) =====
   Every primary action button on the free dashboard shares one treatment: the
   .qf-plan-action--primary house recipe from /pricing (quizforge.css). Quiet
   actions (activity row links, view-full-history, readiness see-exam) stay
   text-style. HeroMiniQuiz buttons are untouched: they render on the homepage
   and already form their own house pair. */
.free-hub-cta-premium[b-sq2akgb5zb],
.free-first-action[b-sq2akgb5zb]  .mud-button-root,
.free-resume-card[b-sq2akgb5zb]  .mud-button-root,
.readiness-carry-actions[b-sq2akgb5zb]  .mud-button-root,
.free-hub-cta-row[b-sq2akgb5zb]  .mud-button-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--forge-primary);
    border-radius: 8px;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    clip-path: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.free-hub-cta-premium:hover[b-sq2akgb5zb],
.free-first-action[b-sq2akgb5zb]  .mud-button-root:hover,
.free-resume-card[b-sq2akgb5zb]  .mud-button-root:hover,
.readiness-carry-actions[b-sq2akgb5zb]  .mud-button-root:hover,
.free-hub-cta-row[b-sq2akgb5zb]  .mud-button-root:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    box-shadow: none;
}

.free-hub-cta-premium:focus-visible[b-sq2akgb5zb],
.free-first-action[b-sq2akgb5zb]  .mud-button-root:focus-visible,
.free-resume-card[b-sq2akgb5zb]  .mud-button-root:focus-visible,
.readiness-carry-actions[b-sq2akgb5zb]  .mud-button-root:focus-visible,
.free-hub-cta-row[b-sq2akgb5zb]  .mud-button-root:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 3px;
}

.free-first-action[b-sq2akgb5zb]  .mud-button-label,
.free-resume-card[b-sq2akgb5zb]  .mud-button-label,
.readiness-carry-actions[b-sq2akgb5zb]  .mud-button-label,
.free-hub-cta-row[b-sq2akgb5zb]  .mud-button-label {
    color: var(--qf-ink);
}

/* Compact hub (dash=c) */
.free-hub-section--compact .free-hub-card[b-sq2akgb5zb] {
    padding: 1.1rem 1.25rem;
}

.free-hub-section--compact .free-hub-steps[b-sq2akgb5zb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.free-hub-section--compact .free-hub-step[b-sq2akgb5zb] {
    flex-direction: column;
    gap: 0.5rem;
}

.free-hub-section--compact .free-hub-step-detail[b-sq2akgb5zb] {
    display: none;
}

.free-hub-section--compact .free-hub-perks[b-sq2akgb5zb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
}

.free-activity-tail[b-sq2akgb5zb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .free-hub-cards[b-sq2akgb5zb] {
        grid-template-columns: 1fr;
    }

    .free-hub-section--compact .free-hub-steps[b-sq2akgb5zb] {
        grid-template-columns: 1fr;
    }

    .free-hub-section--compact .free-hub-step[b-sq2akgb5zb] {
        flex-direction: row;
    }

    .free-hub-section--compact .free-hub-perks[b-sq2akgb5zb] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/ExamDetail.razor.rz.scp.css */
/* ExamDetail.razor.css - Decision-first redesign */

.exam-detail-page[b-v13i15xkfg] {
    min-height: 100vh;
    background: var(--glytic-gradient-bg);
    background-attachment: fixed;
}

/* Boot loader shown while the exam payload streams in: centred column with the
   QfSpinner and its status line. */
.exam-detail-loader[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
}

/* MudText renders a child component, so its typography needs ::deep from here. */
.exam-detail-loader[b-v13i15xkfg]  .mud-typography {
    color: var(--glytic-text-muted);
}

/* ===== Hero Section (Frontier two-column) ===== */
.hero-section[b-v13i15xkfg] {
    background: transparent;
    border-bottom: 1px solid var(--glytic-border);
    padding: 44px 0 36px;
}

.hero-container[b-v13i15xkfg] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
}

/* Content left, action panel right. Collapses to a single column on tablet/mobile. */
.hero-grid[b-v13i15xkfg] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 44px;
    align-items: start;
}

.hero-main[b-v13i15xkfg] {
    min-width: 0;
}

.mobile-hero-cta[b-v13i15xkfg] {
    display: none;
}

/* Right-hand action panel: practice bank + CTA, lifted off the gradient with a hairline. */
.hero-aside[b-v13i15xkfg] {
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-card-bg);
    padding: 20px;
    position: sticky;
    top: 84px;
}

/* Badge Row */
.badge-row[b-v13i15xkfg] {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

[b-v13i15xkfg] .badge-official {
    background: var(--glytic-primary) !important;
    color: var(--glytic-bg-dark) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Source-Verified trust badge: gold cut-corner plate (design doc: --forge-gold accent).
   !important beats MudChip's own filled/outlined chrome (pre-existing Mud !important). */
[b-v13i15xkfg] .badge-verified {
    background: var(--forge-gold) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    color: var(--qf-ink) !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    height: auto !important;
    padding: 4px 12px !important;
}

[b-v13i15xkfg] .badge-verified .mud-chip-content {
    color: var(--qf-ink) !important;
}

/* Keep long exam names and codes easy to read at every viewport size. */
.exam-title[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.12;
    text-transform: none;
    letter-spacing: 0.005em;
    color: var(--glytic-text-primary);
    margin: 0 0 14px;
    text-wrap: balance;
}

/* Meta line under the title -- small, muted question-count descriptor */
.exam-meta-line[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}

/* Lifecycle panel (retired = historical guide, scheduled = dated notice) */
.lifecycle-panel[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--glytic-border);
    border-left: 3px solid var(--glytic-warning);
    border-radius: 8px;
    background: var(--glytic-card-bg);
    font-family: var(--glytic-font-body);
}

.lifecycle-panel.is-retired[b-v13i15xkfg] {
    border-left-color: var(--glytic-error);
}

.lifecycle-eyebrow[b-v13i15xkfg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

.lifecycle-line[b-v13i15xkfg] {
    margin: 0;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.lifecycle-summary[b-v13i15xkfg],
.lifecycle-successor[b-v13i15xkfg] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--glytic-text-secondary);
}

.lifecycle-successor a[b-v13i15xkfg],
.lifecycle-source[b-v13i15xkfg] {
    color: var(--glytic-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.lifecycle-source[b-v13i15xkfg] {
    font-size: 0.82rem;
    align-self: flex-start;
}

/* Description */
.exam-description[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: clamp(0.95rem, 2.5vw, 1.05rem);
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0 0 22px;
    max-width: 60ch;
}

.exam-sample-link[b-v13i15xkfg] {
    display: inline-block;
    color: var(--glytic-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: -8px 0 24px;
    padding: 8px 0;
}

.sample-questions-section[b-v13i15xkfg] {
    scroll-margin-top: 96px;
}

.exam-overview h2[b-v13i15xkfg] {
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.exam-overview p[b-v13i15xkfg] {
    color: var(--glytic-text-secondary);
    line-height: 1.7;
    margin: 16px 0 0;
    white-space: pre-line;
    max-width: 80ch;
}

.exam-sample-link:focus-visible[b-v13i15xkfg] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 4px;
}

/* Fact Groups (official exam vs practice bank -- kept visually distinct) */
.fact-group[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px;
}

.hero-main .fact-group:last-of-type[b-v13i15xkfg] {
    margin-bottom: 28px;
}

.fact-group-label[b-v13i15xkfg] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--glytic-text-muted);
}

.fact-group.official-facts .fact-group-label[b-v13i15xkfg] {
    color: var(--glytic-primary);
}

/* Composed Strike: the official exam facts read as a row of cut-corner stat plates with
   display numerals, not a hairline strip. Dividers are dropped in favor of plate gaps. */
.fact-group.official-facts .stat-strip[b-v13i15xkfg] {
    border: none;
    padding: 0;
    gap: 12px;
}

.fact-group.official-facts .stat-divider[b-v13i15xkfg] {
    display: none;
}

/* Cut-corner stat plate: a real border is sheared off the 10px top-right cut, so draw the
   outline via the double-layer reveal -- the plate FILL is the outline color and a ::before
   inset 1px paints the interior, letting the outline follow the bevel. isolation:isolate +
   ::before z-index:-1 keeps content above the interior WITHOUT per-child lift rules (scoped
   CSS child selectors cannot reach component-rendered children). */
.fact-group.official-facts .stat[b-v13i15xkfg] {
    position: relative;
    isolation: isolate;
    padding: 14px 18px 12px;
    background: var(--glytic-border);
    border: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    min-width: 116px;
}
.fact-group.official-facts .stat[b-v13i15xkfg]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.fact-group.official-facts .stat:first-child[b-v13i15xkfg] {
    padding-left: 18px;
}

.fact-group .stat-strip[b-v13i15xkfg] {
    margin-bottom: 0;
    width: 100%;
}

/* Stat Strip */
.stat-strip[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--glytic-border);
    border-bottom: 1px solid var(--glytic-border);
}

.stat[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0 18px;
}

.stat:first-child[b-v13i15xkfg] {
    padding-left: 0;
}

.stat strong[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--glytic-text-primary);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.stat span[b-v13i15xkfg] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.stat.rating[b-v13i15xkfg] {
    gap: 4px;
}

.stat.rating span[b-v13i15xkfg] {
    text-transform: none;
    letter-spacing: normal;
}

.stat-divider[b-v13i15xkfg] {
    width: 1px;
    height: 32px;
    background: var(--glytic-border);
    flex-shrink: 0;
}

/* Action panel internals: the panel already has its own border, so drop the strip rules and
   dividers and lay the practice stats out as a clean vertical "number label" list. */
.hero-aside .fact-group[b-v13i15xkfg] {
    margin-bottom: 0;
}

.hero-aside .fact-group-label[b-v13i15xkfg] {
    margin-bottom: 6px;
}

.hero-aside .stat-strip[b-v13i15xkfg] {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    border: none;
    padding: 2px 0 0;
    margin-bottom: 16px;
}

.hero-aside .stat-divider[b-v13i15xkfg] {
    display: none;
}

.hero-aside .stat[b-v13i15xkfg] {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0;
}

.hero-aside .stat strong[b-v13i15xkfg] {
    font-size: 1.35rem;
}

/* CTA -- ember cut-corner primary, fills the action panel. */
.hero-cta[b-v13i15xkfg] {
    max-width: none;
    margin: 4px 0 0;
}

[b-v13i15xkfg] .hero-cta-btn {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 24px;
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-lg);
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[b-v13i15xkfg] .hero-cta-btn:hover {
    background: var(--forge-gradient);
}

/* No longer clip-path'd (PRIMARY recipe drops the cut corner), so the ring sits outward
   like every other control instead of the old inset -4px clipped-CTA workaround. */
[b-v13i15xkfg] .hero-cta-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.hero-secondary-actions[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 10px;
}

/* SECONDARY for all three actions (Pin/Unpin, Share, Download offline), regardless of their
   underlying Mud Variant. Previously the Outlined ones used a cut-corner double-layer ghost
   (button fill = border color, ::before inset repainting the interior) to fake an outline
   around the clip-path bevel; that + the clip-path are retired in favor of a real border. */
[b-v13i15xkfg] .hero-secondary-btn {
    position: relative;
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    text-transform: none;
    font-weight: 500;
    border-radius: var(--qf-btn-radius);
    /* Touch target: keep these >=44px tall on mobile (QA4-4, was ~37px). */
    min-height: 44px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

[b-v13i15xkfg] .hero-secondary-btn:hover {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

[b-v13i15xkfg] .hero-secondary-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

[b-v13i15xkfg] .hero-secondary-btn.is-pinned {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .12);
    color: var(--glytic-text-primary);
}

/* Exam facts band */
.exam-facts-band[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 16px;
    flex-wrap: wrap;
}

.exam-fact[b-v13i15xkfg] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    letter-spacing: 0.3px;
}

.exam-fact + .exam-fact[b-v13i15xkfg]::before {
    content: "|";
    margin-right: 10px;
    color: var(--glytic-border-hover);
}

/* Verification provenance line (P1 E-E-A-T): sits directly under the facts band and makes
   the same visual statement -- small, muted, pipe-separated facts. */
.exam-provenance[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.exam-provenance-item[b-v13i15xkfg] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    letter-spacing: 0.3px;
}

.exam-provenance-item + .exam-provenance-item[b-v13i15xkfg]::before {
    content: "|";
    margin-right: 10px;
    color: var(--glytic-border-hover);
}

.exam-provenance-link[b-v13i15xkfg] {
    color: var(--glytic-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.exam-provenance-link:hover[b-v13i15xkfg],
.exam-provenance-link:focus-visible[b-v13i15xkfg] {
    color: var(--glytic-primary);
}

/* ===== Content Sections (Frontier: hairline-separated editorial blocks, not boxed cards) ===== */
/* Width/centering is handled by constraining the content containers (below) to the hero width,
   so every section -- including ones rendered by child components (career, path-forward) whose
   own CSS scope can't see this rule -- fills the same 1092px column and aligns with the hero. */
.content-section[b-v13i15xkfg] {
    background: transparent;
    border: none;
    border-top: 1px solid var(--glytic-border);
    border-radius: 0;
    padding: 36px 0 10px;
}

/* Match the Large content containers to the hero width (1140 + 24 gutters = 1092 inner) so the
   hero, ExamDetail sections, and child-component sections all align to one centered column. */
.exam-detail-page[b-v13i15xkfg]  .mud-container-maxwidth-lg {
    max-width: 1140px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

[b-v13i15xkfg] .section-heading {
    font-family: var(--glytic-font-body);
    color: var(--glytic-text-primary) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}

/* ===== Blueprint -- THE signature: heat-scaled domain weight bars =====
   Weight (via --bp-frac, 0..1, set inline per row from real json_data) drives BOTH the
   bar's LENGTH and its THICKNESS. The single heaviest domain strikes in crimson; all other
   domains are teal gradations whose alpha rises with weight. Numerals scale with weight too. */
.bp-intro[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--glytic-text-secondary);
    max-width: 62ch;
    margin: 0 0 26px;
}

.bp-heat[b-v13i15xkfg] {
    display: grid;
    gap: 24px;
}

.bp-dom[b-v13i15xkfg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 9px;
}

.bp-dom-head[b-v13i15xkfg] {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.bp-dom-name[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.02;
    color: var(--glytic-text-primary);
    /* Name grows subtly with weight so the heaviest domain reads as heaviest. */
    font-size: calc(1.08rem + var(--bp-frac, 0) * 0.5rem);
    overflow-wrap: anywhere;
    min-width: 0;
    margin: 0;
}

.bp-domain-description[b-v13i15xkfg],
.bp-domain-content[b-v13i15xkfg] {
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* The summary spans the row like the bar and the lists beneath it. */
.bp-domain-description[b-v13i15xkfg] {
    margin: 8px 0 0;
    white-space: pre-line;
}

/* Sub-heads: eyebrow micro-type with a hairline that runs to the row's right edge,
   so each block visibly spans the same width as the weight bar above it. */
.bp-domain-content h4[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 10px;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

.bp-domain-content h4[b-v13i15xkfg]::after {
    content: "";
    flex: 1;
    height: 1px;
    /* Border token rather than the hairline token: --qf-line vanishes on dim screens. */
    background: var(--glytic-border);
}

/* Topics: a wrapping row of cut-corner tags in the domain hue (same cut as .sample-domain-tag). */
.bp-topics[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-topic[b-v13i15xkfg] {
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    padding: 4px 12px 4px 11px;
    clip-path: var(--qf-clip-btn);
    font-size: 0.84rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--glytic-text-primary);
    background: hsl(var(--bp-hue, 190) 60% 50% / 0.14);
    border-left: 3px solid hsl(var(--bp-hue, 190) 70% 60%);
}

.bp-topic p[b-v13i15xkfg] {
    margin: 2px 0 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--glytic-text-secondary);
    white-space: pre-line;
}

/* Learning objectives: full-width list, objective title in primary weight, detail in body
   colour, a small angled marker in the domain hue. Two columns from tablet width up so the
   block fills the row without a 135ch line. */
.bp-objectives[b-v13i15xkfg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-objectives li[b-v13i15xkfg] {
    position: relative;
    padding-left: 16px;
    margin: 0;
}

.bp-objectives li[b-v13i15xkfg]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: hsl(var(--bp-hue, 190) 70% 60%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.bp-obj-title[b-v13i15xkfg] {
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.bp-obj-detail[b-v13i15xkfg] {
    color: var(--glytic-text-secondary);
}

@media (min-width: 768px) {
    .bp-objectives[b-v13i15xkfg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .bp-domain-content h4[b-v13i15xkfg] {
        margin: 12px 0 8px;
    }

    .bp-topics[b-v13i15xkfg] {
        gap: 6px;
    }

    .bp-topic[b-v13i15xkfg] {
        font-size: 0.8rem;
        padding: 3px 10px 3px 9px;
    }

    .bp-objectives[b-v13i15xkfg] {
        gap: 10px;
    }
}

.bp-dom-ix[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-muted);
    font-size: 0.82em;
    margin-right: 10px;
}

.bp-dom-sub[b-v13i15xkfg] {
    display: block;
    margin-top: 6px;
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--glytic-text-muted);
    overflow-wrap: break-word;
}

.bp-dom-pct[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 0.88;
    text-align: right;
    white-space: nowrap;
    /* Numeral takes the domain's hue; lifted lightness keeps small text readable on dark. */
    color: hsl(var(--bp-hue, 190) calc(45% + var(--bp-frac, 0) * 50%) calc(70% - var(--bp-frac, 0) * 8%));
    /* Numeral scales with weight, capped so mobile never overflows. */
    font-size: min(calc(1.5rem + var(--bp-frac, 0) * 1.35rem), 2.75rem);
}

.bp-dom-pct[b-v13i15xkfg]::after {
    content: attr(data-note);
    display: block;
    margin-top: 4px;
    font-family: var(--glytic-font-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

/* Bar row: the track takes the row and the percentage sits on the same line at the right,
   so the numeral reads as the bar's label rather than the heading's. */
.bp-dom-bar[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* Track hugs the bar (no full-width remainder rail); the fill carries length + thickness. */
.bp-dom-track[b-v13i15xkfg] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* Fixed minimum so every row's track ends on the same x even though the numeral's
   font-size scales with weight; wider ranges ("18-22%") simply grow past it. */
.bp-dom-bar .bp-dom-pct[b-v13i15xkfg] {
    flex: none;
    min-width: 5.5rem;
}

.bp-dom-fill[b-v13i15xkfg] {
    display: block;
    /* Length = weight (min 6% so the lightest domain stays visible). */
    width: calc(6% + var(--bp-frac, 0) * 94%);
    /* Thickness ramps 10px -> 28px with weight. */
    height: calc(10px + var(--bp-frac, 0) * 18px);
    /* Each domain has its own hue (--bp-hue, set per row in the markup); saturation rises
       and lightness tightens with weight, so the heaviest domain is the most vivid and the
       lightest reads muted. */
    background: hsl(var(--bp-hue, 190) calc(38% + var(--bp-frac, 0) * 57%) calc(64% - var(--bp-frac, 0) * 12%));
    /* Angled strike end. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    transition: width var(--glytic-transition-long);
}

/* Unweighted rows (json_data carries no weight): plain name list, no bar. */
.bp-dom--flat .bp-dom-name[b-v13i15xkfg] {
    font-size: 1.08rem;
}

/* Legend: what length, thickness and color intensity encode. */
.bp-legend[b-v13i15xkfg] {
    margin-top: 30px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--glytic-text-muted);
}

.bp-legend-key[b-v13i15xkfg] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.bp-sw[b-v13i15xkfg] {
    width: 22px;
    height: 8px;
    flex: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* Swatch sweeps the domain palette (same hues as BlueprintHues in the page). */
.bp-sw--scale[b-v13i15xkfg] {
    background: linear-gradient(90deg,
        hsl(190 90% 52%), hsl(22 90% 55%), hsl(272 85% 62%), hsl(140 75% 45%), hsl(48 95% 52%));
}

/* FAQ panel overrides (flat list style, no outer border) */
.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel {
    background: transparent;
    border-bottom: 1px solid var(--glytic-border);
}

.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel:last-child {
    border-bottom: none;
}

[b-v13i15xkfg] .mud-expand-panel-header {
    padding: 16px 0 !important;
}

[b-v13i15xkfg] .mud-expand-panel-content {
    padding: 0 0 16px !important;
}

/* FAQ semantic marker: teal square when closed, crimson rotated square when open.
   Corners are intentionally NOT cut on the Mud panels (clipping the focusable header
   would clip its focus ring -- design-doc risk note). Flat hairline list is retained. */
.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel-header {
    position: relative;
    padding-left: 26px !important;
}

.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel-header .mud-expand-panel-icon {
    display: none;
}

.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translateY(-50%);
    background: var(--glytic-primary);
    transition: transform 0.2s ease, background 0.2s ease;
}

.content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-panel-expanded .mud-expand-panel-header::before {
    background: var(--qf-crimson);
    transform: translateY(-50%) rotate(45deg);
}

/* Related Exams */
/* Reviews card: strip MudCard chrome (a global .mud-card !important rule adds a
   full border, card background, and a heavy 0 4px 16px shadow) so it reads as a
   flat editorial block with just a hairline-top, like every other section. */
.exam-detail-page[b-v13i15xkfg]  .reviews-flat.mud-card {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--glytic-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Related tests: hairline-topped section to match the editorial blocks above. */
/* Crawlable breadcrumb (Home > Vendor > Exam). Rendered in SSR HTML for the link graph. */
.exam-breadcrumb[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px 0;
}
.exam-breadcrumb a[b-v13i15xkfg] {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    /* Enlarge the tap zone to ~44px without changing font size or shifting the row: pad the
       hit area, then cancel the visual growth with matching negative margins (QA4-4). */
    display: inline-block;
    padding: 12px 6px;
    margin: -12px -6px;
}
.exam-breadcrumb a:hover[b-v13i15xkfg],
.exam-breadcrumb a:focus-visible[b-v13i15xkfg] {
    color: var(--glytic-primary);
    text-decoration: underline;
}
.exam-breadcrumb .crumb-sep[b-v13i15xkfg] {
    color: rgba(255, 255, 255, 0.3);
}
.exam-breadcrumb .crumb-current[b-v13i15xkfg] {
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* Best-effort Cert Atlas blueprint cross-link, plus the vendor's own objectives page
   (.vendor-objectives-chip renders on the same <a> as .atlas-chip -- both real hrefs, so
   FILTER CHIP/PILL, not a static status label). Pill recipe: transparent, qf-line hairline,
   secondary text, no uppercase; teal on hover/focus. */
.atlas-chip[b-v13i15xkfg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--qf-line);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--glytic-text-secondary);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.atlas-chip[b-v13i15xkfg]  .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.atlas-chip:hover[b-v13i15xkfg],
.atlas-chip:focus-visible[b-v13i15xkfg] {
    color: var(--glytic-text-primary);
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), .06);
}
.atlas-chip:hover .atlas-chip-label[b-v13i15xkfg],
.atlas-chip:focus-visible .atlas-chip-label[b-v13i15xkfg] {
    text-decoration: underline;
}
.atlas-chip:focus-visible[b-v13i15xkfg] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Anchor wrapping each related-exam card so the /tests/ links are crawlable in SSR. */
.related-exam-link[b-v13i15xkfg] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related-section[b-v13i15xkfg] {
    border-top: 1px solid var(--glytic-border);
    padding-top: 36px;
}

/* clip-card shears a real 1px border off the two cut corners, so draw the card outline via
   the double-layer reveal: the card FILL becomes the outline color and a ::before inset 1px
   paints the card interior, letting the outline (and its hover recolor) follow the bevel.
   isolation:isolate + ::before z-index:-1 keeps the Mud-rendered card children above the
   interior without per-child lift rules. */
[b-v13i15xkfg] .related-exam-card {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border) !important;
    border: 0;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-card);
    box-shadow: none !important;
    transition: var(--glytic-transition);
    height: 100%;
    /* Fixed slot height so the loading skeleton and the real card occupy the same
       space -> the late-arriving related cards do not shove the footer (CLS). */
    min-height: 188px;
    display: flex;
    flex-direction: column;
}

[b-v13i15xkfg] .related-exam-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

/* Loading placeholder that holds the related-tests slot until the cards arrive. */
.related-skeleton-card[b-v13i15xkfg] {
    position: relative;
    isolation: isolate;
    min-height: 188px;
    height: 100%;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border);
    border: 0;
    opacity: 0.5;
    animation: related-skeleton-pulse-b-v13i15xkfg 1.8s ease-in-out infinite;
}

.related-skeleton-card[b-v13i15xkfg]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

@keyframes related-skeleton-pulse-b-v13i15xkfg {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.25; }
}

[b-v13i15xkfg] .related-exam-card:hover {
    /* Recolor the fill (=outline); it shows as the 1px bevel-following ring. */
    background: rgba(var(--glytic-primary-rgb), 0.5) !important;
    /* clip-path clips box-shadow -> use drop-shadow for elevation on cut cards. */
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.18));
}

[b-v13i15xkfg] .related-exam-card .mud-card-content {
    flex: 1;
}

[b-v13i15xkfg] .related-exam-card .mud-card-actions {
    margin-top: auto;
    padding: 8px 16px 14px;
}

/* De-purpled question count (was Color.Secondary). */
[b-v13i15xkfg] .related-exam-title {
    line-height: 1.3;
    /* Clamp to 2 lines so a long title cannot push the card past its reserved slot. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-v13i15xkfg] .related-exam-count {
    color: var(--glytic-text-muted) !important;
}

.related-exam-view[b-v13i15xkfg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--glytic-primary);
}

/* ===== Exam Facts ===== */
/* Flat like every other editorial block: no distinct card background, so the
   datasheet text aligns to the same column edge as the rest of the page instead
   of touching the edges of a standalone box. */
.exam-facts-card[b-v13i15xkfg] {
    background: transparent;
}

/* Datasheet: two columns of key/value rows separated by hairlines (no card chrome) */
.facts-grid[b-v13i15xkfg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
}

.fact-item[b-v13i15xkfg] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--glytic-border);
    border-radius: 0;
}

.fact-label[b-v13i15xkfg] {
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--glytic-text-muted);
    font-weight: 400;
}

.fact-value[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.9rem;
    color: var(--glytic-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ===== MCP Fact Extensions ===== */
.facts-languages-row[b-v13i15xkfg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.facts-languages-chips[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.facts-language-chip[b-v13i15xkfg] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    border-radius: var(--glytic-border-radius-small);
    padding: 2px 10px;
    font-size: 0.75rem;
    color: var(--glytic-text-primary);
}

.facts-retake-note[b-v13i15xkfg] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    flex-wrap: wrap;
}

.facts-cta-row[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* "Schedule real exam" (MudButton Variant.Filled Color.Primary, no bespoke class) renders
   ember PRIMARY from the global root layer, but this row must read as two equal secondary
   actions next to "Buy voucher" -- Variant/Color stay untouched per the button-system rule, so
   the look is overridden here, scoped to this row only. "Buy voucher" (Outlined Color.Primary)
   already renders as the teal-hairline secondary from the root layer with no conflict here. */
.facts-cta-row[b-v13i15xkfg]  .mud-button-filled.mud-button-filled-primary {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    font-weight: 500;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
}

.facts-cta-row[b-v13i15xkfg]  .mud-button-filled.mud-button-filled-primary:hover {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

/* ===== Sample Questions ===== */
.sample-questions-subtitle[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
    margin: -12px 0 24px;
}

.sample-questions-list[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Owner report 2026-09-03: samples must stay left-aligned everywhere, desktop and mobile.
   Investigation found no rule in this file that centers them (verified against the deployed
   bundle and computed style on Test), but .sample-answer already needed an explicit
   `text-align: left` reset because <button> carries a browser default of `text-align: center` --
   the same class of defect. Stating it explicitly here, on every text-bearing sample element
   rather than relying on inherited "start", removes any dependence on ancestor cascade order or
   a future button/label wrapper reintroducing a centered default. Regression-guarded by
   Tests/sample-alignment.mjs on desktop and mobile viewports. */
.sample-questions-section[b-v13i15xkfg],
.sample-question[b-v13i15xkfg],
.sample-question-text[b-v13i15xkfg],
.sample-scenario-text[b-v13i15xkfg],
.sample-answer-text[b-v13i15xkfg],
.sample-explanation-text[b-v13i15xkfg] {
    text-align: left;
}

.sample-question[b-v13i15xkfg] {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--glytic-border);
}

.sample-question:last-child[b-v13i15xkfg] {
    border-bottom: none;
    padding-bottom: 0;
}

.sample-question-header[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sample-question-number[b-v13i15xkfg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--glytic-border-radius-small);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid var(--glytic-border);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Sample-question domain chip. Cut-corner (--qf-clip-btn) micro-type tag that keys to the
   blueprint heat bars above: --bp-hue is the matched domain's hue and --bp-frac drives its
   saturation (same formula as .bp-dom-fill). Scoped color rules outrank the global
   .qf-eyebrow the chip also carries (which supplies only the uppercase micro-type scale). */
.sample-domain-tag[b-v13i15xkfg] {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    clip-path: var(--qf-clip-btn);
    border-radius: 0;
    color: var(--glytic-text);
    background: hsl(var(--bp-hue, 190) calc(38% + var(--bp-frac, 0) * 57%) 50% / calc(0.16 + var(--bp-frac, 0) * 0.22));
    border-left: 3px solid hsl(var(--bp-hue, 190) calc(38% + var(--bp-frac, 0) * 57%) calc(64% - var(--bp-frac, 0) * 12%));
}

/* Unmatched category (topic string not in the blueprint): a WELL-STYLED FILLED neutral chip --
   same shape/padding/weight as the matched chips, only the hue is muted. Keeps every sample
   tag visually consistent (all filled) instead of a mix of filled + hairline. */
.sample-domain-tag--neutral[b-v13i15xkfg] {
    color: var(--glytic-text-secondary);
    background: var(--glytic-bg-light);
    border-left: 3px solid var(--glytic-border);
}

.sample-scenario-block[b-v13i15xkfg] {
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border-left: 3px solid var(--glytic-primary);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 0 0 12px;
}

.sample-scenario-label[b-v13i15xkfg] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-primary);
    margin-bottom: 6px;
}

.sample-scenario-text[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.sample-question-text[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--glytic-text-primary);
    margin: 0 0 14px;
}

.sample-answers[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 4px;
}

.sample-answer[b-v13i15xkfg] {
    display: flex;
    align-items: flex-start;
    /* MudBlazor's global button reset sets justify-content: center, which floats a short
       option label ("Hashing") to the middle of the row while long ones fill the width.
       Owner report 2026-09-03: options must start at the left edge like the stem. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glytic-border);
    border-radius: var(--qf-btn-radius);
    transition: border-color 0.15s ease, background 0.15s ease;
    /* It is a button now (answerable in place): reset the UA button look. */
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sample-answer:hover[b-v13i15xkfg] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.03);
}

.sample-answer-glyph[b-v13i15xkfg] {
    flex: none;
    margin-top: 4px;
}

.sample-answer-text[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--glytic-text-primary);
    padding-top: 1px;
}

.sample-explanation[b-v13i15xkfg] {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border-left: 3px solid var(--glytic-border);
    border-radius: 0 4px 4px 0;
}

.sample-explanation-label[b-v13i15xkfg] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--glytic-text-muted);
    margin-bottom: 4px;
}

.sample-explanation-text[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
    margin: 0;
}

/* The explanation is MarkdownLite output rendered as MarkupString: its block <p> carries no
   scope attribute and would take the global paragraph size (16px) instead of this box's. */
.sample-explanation-text[b-v13i15xkfg]  p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 0.5em;
}

.sample-explanation-text[b-v13i15xkfg]  p:last-child {
    margin-bottom: 0;
}

/* Fallback receipt: JS-populated (qf-sample-reveal.js) badge + source host for a sample
   answered before the Blazor circuit/WASM is interactive. Prerendered here so it carries
   this component's CSS-isolation scope; JS only toggles [hidden] and sets textContent. */
.sample-receipt[b-v13i15xkfg] {
    margin-top: 12px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: var(--glytic-bg-card);
    border-left: 2px solid var(--forge-primary);
    border-radius: 0 4px 4px 0;
}

/* The author display:flex above beats the browser's default [hidden]{display:none} UA-stylesheet
   rule (equal specificity, source order wins), so a hidden receipt would still lay out with
   flex. Restate the hidden behavior explicitly (review finding, 2026-09-02). */
.sample-receipt[hidden][b-v13i15xkfg] {
    display: none;
}

.sample-receipt-chip[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.sample-receipt-host[b-v13i15xkfg] {
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    color: var(--glytic-text-secondary);
}

.sample-questions-cta[b-v13i15xkfg] {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 768px) {
    .hero-section[b-v13i15xkfg] {
        padding: 32px 0 28px;
    }

    .hero-container[b-v13i15xkfg] {
        padding: 0 16px;
    }

    /* Single column; the action panel stops being sticky and flows after the content. */
    .hero-grid[b-v13i15xkfg] {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hero-aside[b-v13i15xkfg] {
        position: static;
    }

    .facts-grid[b-v13i15xkfg] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .exam-title[b-v13i15xkfg] {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .stat[b-v13i15xkfg] {
        padding: 0 14px;
    }

    .stat strong[b-v13i15xkfg] {
        font-size: 0.95rem;
    }

    .stat-divider[b-v13i15xkfg] {
        height: 24px;
    }

    .content-section[b-v13i15xkfg] {
        padding: 20px;
        border-radius: var(--glytic-border-radius-small);
    }

    .bp-dom-head[b-v13i15xkfg] {
        align-items: baseline;
    }

    .facts-grid[b-v13i15xkfg] {
        gap: 0;
    }

    .sample-question-text[b-v13i15xkfg] {
        font-size: 0.9rem;
    }

    .sample-answer[b-v13i15xkfg] {
        padding: 8px 12px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hero-section[b-v13i15xkfg] {
        padding: 24px 0 20px;
    }

    .hero-container[b-v13i15xkfg] {
        padding: 0 12px;
    }

    .exam-title[b-v13i15xkfg] {
        font-size: 1.6rem;
    }

    .exam-description[b-v13i15xkfg] {
        font-size: 0.95rem;
    }

    .mobile-hero-cta[b-v13i15xkfg] {
        /* Single-CTA mobile rule (959.98px block) keeps this hidden; margin retained
           in case a future variant re-enables it. */
        margin: 0 0 18px;
    }

    .stat-strip[b-v13i15xkfg] {
        gap: 0;
        padding: 12px 0;
    }

    .stat[b-v13i15xkfg] {
        padding: 0 10px;
    }

    .stat strong[b-v13i15xkfg] {
        font-size: 0.85rem;
    }

    .stat span[b-v13i15xkfg] {
        font-size: 0.65rem;
    }

    .stat-divider[b-v13i15xkfg] {
        height: 20px;
    }

    .hero-cta[b-v13i15xkfg] {
        max-width: 100%;
    }

    .exam-facts-band[b-v13i15xkfg] {
        gap: 6px;
    }

    .exam-fact[b-v13i15xkfg] {
        font-size: 0.7rem;
    }

    .exam-fact + .exam-fact[b-v13i15xkfg]::before {
        margin-right: 6px;
    }

    .exam-provenance[b-v13i15xkfg] {
        gap: 6px;
    }

    .exam-provenance-item[b-v13i15xkfg] {
        font-size: 0.7rem;
    }

    .exam-provenance-item + .exam-provenance-item[b-v13i15xkfg]::before {
        margin-right: 6px;
    }

    .content-section[b-v13i15xkfg] {
        padding: 16px;
        border-radius: var(--glytic-border-radius-small);
    }

    /* Cap the weight-driven scaling so the heaviest domain never overflows a 375 viewport. */
    .bp-dom-name[b-v13i15xkfg] {
        font-size: calc(1rem + var(--bp-frac, 0) * 0.3rem);
    }

    .bp-dom-pct[b-v13i15xkfg] {
        font-size: min(calc(1.3rem + var(--bp-frac, 0) * 0.9rem), 2.1rem);
        min-width: 4.2rem;
    }

    .bp-dom-sub[b-v13i15xkfg] {
        font-size: 0.72rem;
    }

    .facts-grid[b-v13i15xkfg] {
        grid-template-columns: 1fr;
    }

    .fact-item[b-v13i15xkfg] {
        padding: 11px 0;
    }

    .fact-value[b-v13i15xkfg] {
        font-size: 0.85rem;
    }

    .sample-question-text[b-v13i15xkfg] {
        font-size: 0.85rem;
    }

    .sample-answer-text[b-v13i15xkfg] {
        font-size: 0.82rem;
    }

    .sample-questions-list[b-v13i15xkfg] {
        gap: 20px;
    }
}


/* ===== Read More Toggle ===== */
.exam-description-wrap[b-v13i15xkfg] { margin-bottom: 8px; }
.read-more-toggle[b-v13i15xkfg] { background: none; border: none; color: var(--glytic-primary); cursor: pointer; font-size: inherit; padding: 0; margin-left: 4px; text-decoration: underline; text-decoration-color: rgba(var(--glytic-primary-rgb), 0.3); }
.read-more-toggle:hover[b-v13i15xkfg] { color: var(--glytic-primary); filter: brightness(1.15); }

/* ===== Inline Rating Badge ===== */
.rating-inline strong[b-v13i15xkfg] { color: rgba(255, 200, 50, 0.9); }

/* ===== Exam Facts Collapsible Summary ===== */
/* 0.55, not 0.4: measured from the painted pixels on Test on 2026-09-05 (bundle-2 task 5), 0.4
   over the exam page's gradient came to 3.70:1 against a 4.5:1 requirement at this size. */
.facts-summary-inline[b-v13i15xkfg] { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); margin-left: 12px; }

/* ===== Section CTA ===== */
.section-cta[b-v13i15xkfg] { text-align: center; margin-top: 16px; }

/* ===== MudExpansionPanel overrides (exam facts card - bordered card style) ===== */
/* Exam details: a clean borderless expander with a hairline (not a boxed dropdown). */
.exam-facts-card[b-v13i15xkfg]  .mud-expand-panel { background: transparent; border: none; border-bottom: 1px solid var(--glytic-border); border-radius: 0; }
.exam-facts-card[b-v13i15xkfg]  .mud-expand-panel .mud-expand-panel-header { background: transparent; }
.exam-facts-card[b-v13i15xkfg]  .mud-expand-panel .mud-expand-panel-content { background: transparent; padding-top: 10px !important; }
.exam-facts-card[b-v13i15xkfg]  .mud-expand-panel .facts-grid { padding-bottom: 6px; }

/* ===== Study Resources (clean full-width hairline list, not a 2-col card grid) ===== */
.study-resources[b-v13i15xkfg] {
    display: flex;
    flex-direction: column;
}

.study-resource[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--glytic-border);
}

.study-resource:first-child[b-v13i15xkfg] {
    border-top: none;
    padding-top: 4px;
}

.study-resource-main[b-v13i15xkfg] {
    min-width: 0;
}

.study-resource-title[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.study-resource-badge[b-v13i15xkfg] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-bg-dark);
    background: var(--glytic-primary);
    padding: 2px 8px;
    border-radius: var(--glytic-border-radius-small);
}

.study-resource-type[b-v13i15xkfg] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--glytic-text-muted);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 2px 8px;
}

.study-resource-meta[b-v13i15xkfg] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    margin-top: 5px;
}

.study-resource-price[b-v13i15xkfg] {
    color: var(--glytic-text-secondary);
}

.study-resource-meta span:not(:last-child)[b-v13i15xkfg]::after {
    /* A hex escape followed by a single space (e.g. "\00b7 ") has that trailing space consumed
       by the CSS parser as the escape sequence's terminator instead of rendering as a literal
       character -- that is what produced the glued "ServiceNow \00b7Free" bug in prod. Use the
       literal middot character instead so both surrounding spaces actually render. */
    content: " · ";
}

.study-resource-notes[b-v13i15xkfg] {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--glytic-text-muted);
    margin-top: 6px;
    max-width: 70ch;
}

.study-resource-link[b-v13i15xkfg] {
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-decoration: none;
    white-space: nowrap;
}

.study-resource-link:hover[b-v13i15xkfg] {
    filter: brightness(1.15);
    text-decoration: underline;
}

/* ===== Document-to-exam cross-link ===== */
.doc-exam-crosslink[b-v13i15xkfg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--glytic-border);
    font-size: 0.875rem;
    color: var(--glytic-text-secondary);
}

.doc-exam-crosslink-text[b-v13i15xkfg] {
    color: var(--glytic-text-muted);
}

.doc-exam-crosslink-link[b-v13i15xkfg] {
    color: var(--glytic-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}

.doc-exam-crosslink-link:hover[b-v13i15xkfg] {
    opacity: 0.75;
    text-decoration: underline;
}

/* ===== Pre-quiz free-cap notice (conversion P2) ===== */

.free-cap-notice[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
    text-align: center;
}

.free-cap-notice a[b-v13i15xkfg] {
    color: var(--glytic-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    white-space: nowrap;
}

/* Community-exam hard gate: distinct from the informational cap-transparency notice above it
   (Start Practice opens a paywall immediately for these exams, not a capped free run). */
.community-gate-notice[b-v13i15xkfg] {
    color: var(--glytic-warning);
}

.community-gate-notice a[b-v13i15xkfg] {
    color: var(--glytic-warning);
}

/* ===== Sticky Start CTA (P1-8) ===== */

/* Invisible sentinel watched by the IntersectionObserver. Zero layout impact. */
.hero-cta-sentinel[b-v13i15xkfg] {
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Reserve space so the last content is reachable above the sticky bar (mobile only). */
.sticky-start-spacer[b-v13i15xkfg] {
    height: 0;
}

/* Slim sticky bottom bar -- mirrors the AI tutor dock pattern: fixed, full-width, safe-area
   aware, layered below MudDialog (1400) and the tutor sheet. Hidden by default; .is-visible
   slides it up once the hero CTA sentinel has scrolled out of view. */
.sticky-start-bar[b-v13i15xkfg] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--glytic-card-bg);
    border-top: 1px solid var(--glytic-border);
    /* Cut top corners; clip-path clips box-shadow so elevation uses drop-shadow. */
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
    filter: drop-shadow(0 -4px 20px rgba(0, 0, 0, 0.25));
    transform: translateY(120%);
    transition: transform var(--glytic-transition);
    pointer-events: none;
}

.sticky-start-bar.is-visible[b-v13i15xkfg] {
    transform: translateY(0);
    pointer-events: auto;
}

[b-v13i15xkfg] .sticky-start-btn {
    flex: 1 1 auto;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0;
    padding: 12px 20px;
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-lg);
    text-transform: none;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[b-v13i15xkfg] .sticky-start-btn:hover {
    background: var(--forge-gradient);
}

[b-v13i15xkfg] .sticky-start-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Mobile: reserve scroll room equal to the bar height so the trademark notice clears it. */
@media (max-width: 959.98px) {
    .sticky-start-spacer[b-v13i15xkfg] {
        height: calc(72px + env(safe-area-inset-bottom));
    }

    /* Owner call 2026-07-22: mobile shows ONE take-quiz control -- the sticky footer
       bar. It is always visible (no scroll-sentinel gate) and the two inline hero
       CTAs are hidden below. */
    .sticky-start-bar[b-v13i15xkfg] {
        transform: translateY(0);
        pointer-events: auto;
    }

    .mobile-hero-cta[b-v13i15xkfg],
    .hero-cta[b-v13i15xkfg] {
        display: none;
    }
}

/* Desktop: inline CTAs are enough; hide the sticky bar entirely. */
@media (min-width: 960px) {
    .sticky-start-bar[b-v13i15xkfg] {
        display: none;
    }
}

/* ===== Bone "bar to clear" plate (the page's one poster moment) ===== */
.pass-plate[b-v13i15xkfg] {
    margin-top: 18px;
    padding: 18px 20px 20px;
}

.pass-plate .qf-eyebrow[b-v13i15xkfg] {
    display: block;
    margin-bottom: 8px;
}

.pass-plate-num[b-v13i15xkfg] {
    display: block;
    font-family: var(--glytic-font-heading);
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 0.9;
    color: var(--qf-ink);
    font-variant-numeric: tabular-nums;
}

.pass-plate-note[b-v13i15xkfg] {
    display: block;
    margin-top: 8px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--qf-bone-dim);
}

/* Honor reduced-motion for the transitions this restyle introduced. */
@media (prefers-reduced-motion: reduce) {
    .bp-dom-fill[b-v13i15xkfg],
    .content-section:not(.exam-facts-card)[b-v13i15xkfg]  .mud-expand-panel-header::before {
        transition: none;
    }
}

/* ---- Answerable sample questions (guest QA 2026-09-01) ---- */
.sample-answer:disabled[b-v13i15xkfg] {
    cursor: default;
}

/* Hydration gate: disabled in prerendered HTML, but not dimmed like a locked option. */
.sample-answer[aria-busy="true"]:disabled[b-v13i15xkfg] {
    cursor: progress;
}

.sample-answer:focus-visible[b-v13i15xkfg] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

.sample-answer--selected[b-v13i15xkfg] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.sample-answer--correct[b-v13i15xkfg] {
    border-color: var(--glytic-score-pass, #34d399);
    background: rgba(var(--glytic-score-pass-rgb, 52, 211, 153), 0.1);
}

.sample-answer--correct .sample-answer-text[b-v13i15xkfg] {
    color: var(--glytic-text-primary);
}

.sample-answer--wrong[b-v13i15xkfg] {
    border-color: var(--glytic-score-fail, #f87171);
    background: rgba(248, 113, 113, 0.08);
}

.sample-answer--dim[b-v13i15xkfg] {
    /* ANSWER TILE contrast floor: text opacity must not drop below .75. */
    opacity: 0.75;
}

.sample-explanation--live.is-correct .sample-explanation-label[b-v13i15xkfg] {
    color: var(--glytic-score-pass, #34d399);
}

.sample-explanation--live.is-wrong .sample-explanation-label[b-v13i15xkfg] {
    color: var(--glytic-score-fail, #f87171);
}

.sample-check-link[b-v13i15xkfg] {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-primary);
}

.sample-flag-row[b-v13i15xkfg] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
/* /Pages/Finance/Index.razor.rz.scp.css */
/* Finance vertical landing -- Composed Strike restyle (2026-07).
   Angular cut-corner language matching the /in India vertical: rectangles -> cut
   corners; purple purged -> teal datum + ember CTA; clip-path shears box-shadow/
   translateY, so hovers move to border-color + background. */

.vertical-landing-page[b-i8ia8ga4n2] {
    min-height: 100vh;
    background: var(--glytic-bg-dark);
    color: var(--glytic-text-primary);
}

.vertical-hero[b-i8ia8ga4n2] {
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.vertical-hero-content[b-i8ia8ga4n2] {
    max-width: 900px;
    margin: 0 auto;
}

.vertical-badge[b-i8ia8ga4n2] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.vertical-badge[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.vertical-hero-title[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vertical-hero-subtitle[b-i8ia8ga4n2] {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    margin: 0 0 16px;
    line-height: 1.4;
}

.vertical-hero-description[b-i8ia8ga4n2] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.vertical-hero-actions[b-i8ia8ga4n2] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-large[b-i8ia8ga4n2],
.btn-secondary-large[b-i8ia8ga4n2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    clip-path: none;
}

.btn-primary-large[b-i8ia8ga4n2] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
}

.btn-primary-large:hover[b-i8ia8ga4n2] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.btn-secondary-large[b-i8ia8ga4n2] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.btn-secondary-large:hover[b-i8ia8ga4n2] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.btn-primary-large:focus-visible[b-i8ia8ga4n2],
.btn-secondary-large:focus-visible[b-i8ia8ga4n2] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.vertical-stats-bar[b-i8ia8ga4n2] {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 60px 24px;
    background: var(--glytic-card-bg);
    border-bottom: 1px solid var(--glytic-border);
}

.stat-item[b-i8ia8ga4n2] {
    text-align: center;
}

.stat-number[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 8px;
}

.stat-label[b-i8ia8ga4n2] {
    font-size: 1rem;
    color: var(--glytic-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.vertical-exams-section[b-i8ia8ga4n2],
.vertical-features-section[b-i8ia8ga4n2],
.vertical-faq-section[b-i8ia8ga4n2] {
    padding: 80px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header[b-i8ia8ga4n2] {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.section-header p[b-i8ia8ga4n2] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-exams-grid[b-i8ia8ga4n2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.vertical-exam-card[b-i8ia8ga4n2] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Accent bar (kept on ::before). z-index:1 keeps it above the ::after interior. */
.vertical-exam-card[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(90deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Double-layer reveal on ::after (::before is the accent bar): element bg = the border
   color; ::after paints the card interior so the hairline follows the cut corners
   (z-index:-1 + isolation; children need no lift). */
.vertical-exam-card[b-i8ia8ga4n2]::after {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.vertical-exam-card:hover[b-i8ia8ga4n2] {
    background: var(--glytic-primary);
}

.vertical-exam-card:hover[b-i8ia8ga4n2]::after {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-card-bg);
}

.vertical-exam-card:hover[b-i8ia8ga4n2]::before {
    opacity: 1;
}

.vertical-exam-card:focus-visible[b-i8ia8ga4n2] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.exam-card-header[b-i8ia8ga4n2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.exam-card-header h3[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--glytic-primary);
}

.exam-difficulty[b-i8ia8ga4n2] {
    padding: 4px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-description[b-i8ia8ga4n2] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0 0 20px;
}

.exam-meta[b-i8ia8ga4n2] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glytic-border);
}

.exam-questions[b-i8ia8ga4n2],
.exam-duration[b-i8ia8ga4n2] {
    font-size: 0.875rem;
    color: var(--glytic-text-secondary);
    font-weight: 500;
}

.exam-topics[b-i8ia8ga4n2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-tag[b-i8ia8ga4n2] {
    padding: 6px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--glytic-primary);
    font-weight: 500;
}

.features-grid-vertical[b-i8ia8ga4n2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.feature-card-vertical[b-i8ia8ga4n2] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    text-align: center;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.feature-card-vertical[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical:hover[b-i8ia8ga4n2] {
    background: var(--glytic-border-hover);
}

.feature-card-vertical:hover[b-i8ia8ga4n2]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Number plate: double-layer reveal, inset 2px to preserve the 2px border weight. */
.feature-number[b-i8ia8ga4n2] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    font-family: var(--glytic-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--glytic-primary);
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

.feature-number[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical h3[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-text-primary);
}

.feature-card-vertical p[b-i8ia8ga4n2] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.faq-grid[b-i8ia8ga4n2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.faq-item[b-i8ia8ga4n2] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.faq-item[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.faq-item h3[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-primary);
}

.faq-item p[b-i8ia8ga4n2] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-cta-section[b-i8ia8ga4n2] {
    padding: 100px 24px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.cta-content h2[b-i8ia8ga4n2] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.cta-content p[b-i8ia8ga4n2] {
    font-size: 1.25rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
}

.cta-actions[b-i8ia8ga4n2] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .vertical-hero[b-i8ia8ga4n2] {
        padding: 80px 20px 60px;
    }

    .vertical-hero-title[b-i8ia8ga4n2] {
        font-size: 2.5rem;
    }

    .vertical-hero-subtitle[b-i8ia8ga4n2] {
        font-size: 1.25rem;
    }

    .vertical-hero-description[b-i8ia8ga4n2] {
        font-size: 1rem;
    }

    .vertical-stats-bar[b-i8ia8ga4n2] {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
    }

    .vertical-exams-grid[b-i8ia8ga4n2] {
        grid-template-columns: 1fr;
    }

    .section-header h2[b-i8ia8ga4n2] {
        font-size: 2rem;
    }

    .faq-grid[b-i8ia8ga4n2] {
        grid-template-columns: 1fr;
    }

    .btn-primary-large[b-i8ia8ga4n2],
    .btn-secondary-large[b-i8ia8ga4n2] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vertical-hero-title[b-i8ia8ga4n2] {
        font-size: 2rem;
    }

    .vertical-stats-bar[b-i8ia8ga4n2] {
        gap: 30px;
    }

    .stat-number[b-i8ia8ga4n2] {
        font-size: 2.5rem;
    }

    .vertical-exams-section[b-i8ia8ga4n2],
    .vertical-features-section[b-i8ia8ga4n2],
    .vertical-faq-section[b-i8ia8ga4n2] {
        padding: 60px 20px;
    }

    .vertical-cta-section[b-i8ia8ga4n2] {
        padding: 60px 20px;
    }

    .cta-content h2[b-i8ia8ga4n2] {
        font-size: 2rem;
    }
}
/* /Pages/Flashcards.razor.rz.scp.css */
/* Flashcards-Specific Styles Only */
/* Shared styles are now in shared-quiz-components.css */

/* Prevent overlay from blocking interactions */
.ai-card-style[b-wqc46birdq] { position: relative; }
.ai-overlay[b-wqc46birdq] { position:absolute; inset:0; pointer-events:none; z-index:0; }

.flashcards-container[b-wqc46birdq] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    width: 100%;
}

@media (max-width: 600px) {
    .flashcards-container[b-wqc46birdq] {
        padding: 0.75rem 0.75rem 2rem;
    }
}

/* ========================================
   SESSION BAR (progress + labeled controls)
   ======================================== */

.fc-session-bar[b-wqc46birdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fc-session-progress[b-wqc46birdq] { flex: 1 1 220px; min-width: 200px; padding: 6px 0; }

/* thin angled progress beam: crimson-to-ember, raked -0.9deg like the poster rules */
.fc-session-track[b-wqc46birdq] {
    height: 4px;
    background: var(--qf-line);
    border: none;
    border-radius: 0;
    overflow: hidden;
    transform: rotate(-0.9deg);
}

.fc-session-fill[b-wqc46birdq] {
    height: 100%;
    background: linear-gradient(90deg, var(--qf-crimson), var(--forge-primary));
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    transition: width var(--glytic-transition);
}

.fc-session-label[b-wqc46birdq] {
    margin-top: 0.4rem;
    font-family: var(--glytic-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--glytic-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.fc-deck-position[b-wqc46birdq] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--glytic-text-muted);
}

.fc-control-chips[b-wqc46birdq] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Filter chip (button system 2026-09-23): pill, real border, no clip-path/::before layer. */
.fc-chip[b-wqc46birdq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    min-height: 32px;
    border: 1px solid var(--qf-line);
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.fc-chip:hover[b-wqc46birdq] { border-color: rgba(var(--glytic-primary-rgb), 0.5); color: var(--glytic-text-primary); }

.fc-chip.active[b-wqc46birdq] {
    background: rgba(var(--glytic-primary-rgb), 0.14);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.fc-chip:focus-visible[b-wqc46birdq] { outline: var(--qf-btn-focus); outline-offset: 2px; }

.fc-chip-count[b-wqc46birdq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 8px;
    background: var(--forge-gradient);
    color: var(--glytic-bg-dark);
}

/* NOTE: markdown-rendered content from FormatCardText (a MarkupString) is raw HTML --
   it never carries this component's CSS-isolation scope attribute, so a plain scoped
   selector like `.flashcard-question-text .fc-text-para` silently no-ops (see the
   working ::deep versions near the front-term ink rule below). The retired dark-theme
   rules that used to live here (white strong text, translucent-white code background)
   never actually matched for the same reason and are gone, not "fixed in place". */

/* ========================================
   FLASHCARD LAYOUT
   ======================================== */

.flashcard-controls-section[b-wqc46birdq] { margin-bottom: 2rem !important; }
.flashcards-viewport[b-wqc46birdq] { padding-top: 0 !important; }
.flashcard-grid[b-wqc46birdq] { margin-top: 0 !important; }
.flashcard-header-bar.outside[b-wqc46birdq] { display: none !important; }
.with-outside-header[b-wqc46birdq] { margin-top: 0 !important; }

/* ========================================
   DESKTOP CONTROLS (progress bar + buttons)
   ======================================== */

.fc-desktop-controls[b-wqc46birdq] { display: block; }
.fc-desktop-row[b-wqc46birdq] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.flashcard-progress-compact[b-wqc46birdq] {
    position: relative;
    flex-grow: 1;
    max-width: 300px;
    height: 24px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    overflow: hidden;
}

.flashcard-custom-progress-bar[b-wqc46birdq] {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.flashcard-custom-progress-fill[b-wqc46birdq] {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--glytic-primary-rgb), 0.6) 0%, rgba(var(--glytic-primary-rgb), 0.8) 100%);
    border-radius: 12px;
    transition: width 0.3s ease;
    min-width: 0;
}

.flashcard-progress-text-compact[b-wqc46birdq] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: none !important;
}

.review-mode-indicator[b-wqc46birdq] { font-size: 0.65rem !important; opacity: 0.8 !important; margin-left: 4px !important; }
.compact-control-btn[b-wqc46birdq] { min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 4px !important; }
.compact-control-btn .mud-icon-root[b-wqc46birdq] { font-size: 1rem !important; }
.review-count-chip[b-wqc46birdq] { height: 20px !important; font-size: 0.65rem !important; padding: 0 6px !important; }

/* ========================================
   MOBILE PROGRESS BAR (slim strip + expandable tray)
   Hidden on desktop, shown on mobile via media query
   ======================================== */

.fc-mobile-bar[b-wqc46birdq] { display: none; }
.fc-mobile-tray[b-wqc46birdq] { display: none; }

/* ========================================
   FLASHCARD FLIP FUNCTIONALITY
   ======================================== */

/* Stack both faces in the same grid cell so each side gets the same card padding and
   the hidden face still contributes to card height. */
.flashcard-wrapper[b-wqc46birdq] {
    --fc-card-pad: clamp(1.75rem, 3vw, 2.5rem);
    width: 100%;
}

.flashcard-card > .flashcard-faces[b-wqc46birdq],
.flashcard-faces[b-wqc46birdq],
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card > .mud-card-content.flashcard-faces,
.flashcard-wrapper[b-wqc46birdq]  .flashcard-faces {
    display: grid;
    grid-template-areas: "face";
    position: relative;
    box-sizing: border-box;
    padding: var(--fc-card-pad, clamp(1.75rem, 3vw, 2.5rem)) !important;
}

.question-side[b-wqc46birdq],
.answer-side[b-wqc46birdq] {
    grid-area: face;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem;
}

.question-side[b-wqc46birdq],
.answer-side[b-wqc46birdq] {
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.question-side[b-wqc46birdq] {
    justify-content: center;
}

/* Hide the inactive face with visibility so it keeps reserving its space (the card
   stays the answer-face height). display:none here would collapse the card and bring
   the flip jump back. */
.question-side.hidden[b-wqc46birdq],
.answer-side.hidden[b-wqc46birdq] { visibility: hidden; }

.question-side:not(.hidden)[b-wqc46birdq],
.answer-side:not(.hidden)[b-wqc46birdq] { visibility: visible; }

/* ========================================
   FLASHCARD CARD STYLING -- the one bone print
   The card is the page's single paper surface: bone ground, ink text,
   cut corners, a fine inset plate-frame, and a faint press-grain.
   The flip stays the CLS-zero visibility swap (both faces stacked in the
   same grid cell). This pass only re-skins the faces -- it does NOT touch
   the flip mechanics or the height reservation.
   Pre-existing !important on background/border/border-radius is beaten with
   scoped !important (the scope attribute lifts specificity above the source
   .flashcard-card and global .ai-card-style rules).
   ======================================== */

.flashcard-card[b-wqc46birdq],
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card {
    --fc-card-pad: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--qf-bone) !important;
    border: none !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-card);
    box-sizing: border-box;
    min-height: 280px !important;
    /* paper shadow via filter: a box-shadow would be sheared off by the clip-path */
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
    box-shadow: none !important;
    transition: filter 0.3s ease !important;
    overflow: hidden !important;
}

.flashcard-card:hover[b-wqc46birdq],
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card:hover {
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.6)) !important;
}

/* Clickable card: keyboard focus ring (inset -- the clip-path would shear an outward ring). */
.flashcard-card:focus-visible[b-wqc46birdq],
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

/* press grain + plate frame live on the MudCard root, which does NOT carry this
   component's scoped attribute -> they must be reached with ::deep (a plain scoped
   pseudo-element selector silently no-ops on a child-component root). */
/* press grain: inline feTurbulence noise as a data-URI, ~0.05 opacity, clipped with the card */
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='fcg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fcg)'/%3E%3C/svg%3E");
}

/* plate mark: fine inset ink frame. inset 14px keeps every corner inside the 18px cut */
.flashcard-wrapper[b-wqc46birdq]  .flashcard-card::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(var(--qf-ink-rgb), 0.14);
}

/* neutralise the dark ai-overlay glow on the bone card (other dark cards keep theirs) */
.flashcard-card .ai-overlay[b-wqc46birdq],
.flashcard-wrapper[b-wqc46birdq]  .ai-overlay { background: none !important; opacity: 0 !important; }

/* faces render above the grain + plate frame */
.flashcard-wrapper[b-wqc46birdq]  .flashcard-faces { position: relative; z-index: 1; }

/* FRONT term: printed in the display face, ink on bone */
.flashcard-question-text[b-wqc46birdq] {
    font-family: var(--glytic-font-heading) !important;
    font-size: 1.28rem !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    color: var(--qf-ink) !important;
    letter-spacing: 0.005em !important;
    text-align: left !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    margin-bottom: 1.75rem !important;
    word-break: break-word !important;
}
/* The paragraph/strong/em/code nodes above are raw HTML from FormatCardText's
   MarkupString (see Flashcards.razor), not part of this component's compiled render
   tree, so they carry no CSS-isolation scope attribute. A plain scoped descendant
   selector (`.flashcard-question-text .fc-text-para`) compiles with the scope
   requirement on its LAST simple selector and therefore never matches -- confirmed via
   getComputedStyle: the div itself computed ink (rgb(18, 16, 12)) but the injected <p>
   computed rgb(224, 224, 224), inherited from the unrelated GLOBAL `p { color:
   var(--glytic-text-secondary) }` reset in quizforge.css. A directly-matched rule beats
   an inherited value regardless of specificity, so that global reset was winning over
   the ink set on the parent div. ::deep drops the scope requirement so these rules
   actually reach the injected markup and out-specificity the bare `p` selector. */
.flashcard-question-text[b-wqc46birdq]  .fc-text-para {
    margin: 0 0 0.75rem 0;
    line-height: 1.65;
    color: var(--qf-ink);
}
.flashcard-question-text[b-wqc46birdq]  .fc-text-para:last-child { margin-bottom: 0; }
.flashcard-question-text[b-wqc46birdq]  strong { color: var(--qf-ink); font-weight: 700; }
.flashcard-question-text[b-wqc46birdq]  em { color: var(--qf-ink); font-style: italic; opacity: 0.85; }
.flashcard-question-text[b-wqc46birdq]  code {
    color: var(--qf-ink);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.88em;
    background: rgba(var(--qf-ink-rgb), 0.08);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.flashcard-body[b-wqc46birdq] {
    width: 100%;
    box-sizing: border-box;
}

.flashcard-body[b-wqc46birdq],
.flashcard-question-text[b-wqc46birdq],
.flashcard-answer-option[b-wqc46birdq],
.answer-reveal-box[b-wqc46birdq],
.flashcard-explanation-text[b-wqc46birdq],
.flashcard-ai-explanation-text[b-wqc46birdq] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.flashcard-answer-options[b-wqc46birdq] { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
/* Bevel-following outline (double-layer reveal): a real border shears off the cut corner.
   This option holds bare text (no child wrapper), so the interior ::before sits BEHIND via
   z-index:-1 + isolation and the text paints above it -- the box FILL is the outline color,
   the ::before is the tinted bone interior, so the outline follows every edge incl. the cut. */
.flashcard-answer-option[b-wqc46birdq] {
    position: relative;
    isolation: isolate;
    background: rgba(var(--qf-ink-rgb), 0.16);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.75rem 1rem;
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--qf-ink);
    transition: background-color 0.3s ease !important;
    backdrop-filter: none;
}
.flashcard-answer-option[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--qf-ink-rgb), 0.04), rgba(var(--qf-ink-rgb), 0.04)), var(--qf-bone);
    z-index: -1;
    pointer-events: none;
    transition: background 0.3s ease;
}
.flashcard-answer-option:hover[b-wqc46birdq] { background: rgba(var(--qf-ink-rgb), 0.3); }
.flashcard-answer-option:hover[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--qf-ink-rgb), 0.07), rgba(var(--qf-ink-rgb), 0.07)), var(--qf-bone); }

/* "Correct answer(s)" heading (a MudText -> ::deep) printed as an ink eyebrow with a
   short thin teal rule centred beneath it */
.flashcard-wrapper[b-wqc46birdq]  .flashcard-answers-title {
    font-family: var(--glytic-font-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--qf-bone-dim) !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    padding-bottom: 0.55rem !important;
    border-bottom: 2px solid var(--glytic-primary);
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.answers-reveal-container[b-wqc46birdq] { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
/* Bevel-following outline via the double-layer reveal (a real border is sheared off the cut
   corner by the clip-path): the box FILL is the outline color, a ::before surface inset 1px is
   the tinted interior, so the outline shows as 1px on EVERY edge incl. the bevel. */
.answer-reveal-box[b-wqc46birdq] {
    position: relative;
    isolation: isolate;
    display: flex; align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 0;
    border: 0;
    clip-path: var(--qf-clip-btn);
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.3s ease !important;
    backdrop-filter: none;
}
.answer-reveal-box[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--qf-bone);
    /* -1 under isolation (above): Mud-rendered children need no scoped lift rule. */
    z-index: -1;
    pointer-events: none;
}
/* Outer fill = outline color; ::before interior = tint composited over bone (opaque, so the
   outline never bleeds through the semi-transparent wash). */
.answer-reveal-box.correct[b-wqc46birdq] { background: var(--glytic-primary) !important; color: var(--qf-ink) !important; }
.answer-reveal-box.correct[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.14), rgba(var(--glytic-primary-rgb), 0.14)), var(--qf-bone); }
.answer-reveal-box.incorrect[b-wqc46birdq] { background: rgba(var(--qf-crimson-rgb), 0.35); color: var(--qf-bone-dim); }
.answer-reveal-box.incorrect[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.05), rgba(var(--qf-crimson-rgb), 0.05)), var(--qf-bone); }

/* Bottom section for answer side */
.flashcard-bottom-section[b-wqc46birdq] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(var(--qf-ink-rgb), 0.14); }
.flashcard-actions-row[b-wqc46birdq] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.flashcard-review-mark[b-wqc46birdq] { cursor: pointer; transition: all 0.2s ease; padding: 4px; border-radius: 4px; }
.flashcard-review-mark:hover[b-wqc46birdq] { background: rgba(255, 193, 7, 0.1); }
.flashcard-review-mark.marked[b-wqc46birdq] { color: var(--forge-gold) !important; }
.flashcard-review-mark.unmarked[b-wqc46birdq] { color: rgba(255, 255, 255, 0.4) !important; }

/* Explanation styling -- an ink panel printed on the bone face.
   Bevel-following outline via the double-layer reveal (a real border shears off the cut).
   Interior at z-index:-1 + isolation: Mud-rendered children carry no scope attribute,
   so a scoped child-lift rule never matches them -- keep the interior behind instead. */
.flashcard-explanation[b-wqc46birdq] { position: relative; isolation: isolate; background: rgba(var(--qf-ink-rgb), 0.14); border: 0; border-radius: 0; clip-path: var(--qf-clip-btn); padding: 0.85rem; margin-top: 0.85rem; }
.flashcard-explanation[b-wqc46birdq]::before { content: ''; position: absolute; inset: 1px; clip-path: var(--qf-clip-btn); background: linear-gradient(rgba(var(--qf-ink-rgb), 0.04), rgba(var(--qf-ink-rgb), 0.04)), var(--qf-bone); z-index: -1; pointer-events: none; }
.flashcard-explanation-title[b-wqc46birdq] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--qf-ink) !important; font-weight: 700 !important; font-size: 0.72rem !important; letter-spacing: 0.14em; text-transform: uppercase; }
.flashcard-explanation-title[b-wqc46birdq]  .mud-icon-root { color: var(--qf-bone-dim); }
.flashcard-explanation-text[b-wqc46birdq] { color: var(--qf-ink) !important; font-size: 0.9rem !important; line-height: 1.55; }
.flashcard-explanation-link[b-wqc46birdq] { margin-top: 12px; text-align: center; }
/* Source line: the darkened gold reads AA on bone (raw ember/gold would fail) */
/* Secondary-recipe hairline in the gold citation accent (button system 2026-09-23):
   real border, no clip-path/::before layer, sentence case. */
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn { position: relative; border: 1px solid rgba(var(--qf-gold-on-bone-rgb), 0.5); border-radius: var(--qf-btn-radius); padding: 8px 16px; font-size: 0.875rem; letter-spacing: 0; text-transform: none; background: transparent; color: var(--qf-gold-on-bone); transition: background-color 0.15s ease, border-color 0.15s ease; }
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn .mud-icon-root { color: var(--qf-gold-on-bone); }
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn:hover { border-color: rgba(var(--qf-gold-on-bone-rgb), 0.85); background: rgba(var(--qf-gold-on-bone-rgb), 0.12); }
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn:focus-visible { outline: var(--qf-btn-focus); outline-offset: 2px; }
/* Attribution line naming the rightsholder of the referenced material */
.flashcard-source-attribution[b-wqc46birdq] { margin-top: 8px; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.5; color: var(--qf-gold-on-bone); opacity: 1; overflow-wrap: anywhere; }

/* Rating */
.flashcard-rating-container[b-wqc46birdq] { display: flex; align-items: center; }
.flashcard-rating-container .rating-section[b-wqc46birdq] { margin: 0; }
.flashcard-rating-container .rating-inline[b-wqc46birdq] { justify-content: flex-start; }

/* ========================================
   RECALL-FIRST: SHOW OPTIONS (folded by default)
   ======================================== */

.flashcard-show-options[b-wqc46birdq] { margin-top: 1.25rem; }
.flashcard-show-options[b-wqc46birdq]  .fc-show-options-btn { text-transform: none; letter-spacing: 0; }
/* MudButton text on the bone face reads as ink, not the low-contrast teal palette default */
.flashcard-show-options[b-wqc46birdq]  .mud-button-root,
.flashcard-show-options[b-wqc46birdq]  .mud-button-root .mud-icon-root { color: var(--qf-bone-dim) !important; }

/* Flip hint on the bone front face. It is a MudText (component root -> no scoped attribute),
   so ::deep is required; a plain .flip-hint rule leaves MudBlazor's purple secondary colour.
   Hidden under 640px -- keyboard/flip hints are meaningless on touch. */
.flashcard-wrapper[b-wqc46birdq]  .flip-hint { color: var(--qf-bone-dim) !important; }
@media (max-width: 640px) {
    .flashcard-wrapper[b-wqc46birdq]  .flip-hint { display: none !important; }
}

/* ========================================
   SELF-GRADE BAR (Again / Got it / Easy)
   ======================================== */

.flashcard-grade-bar[b-wqc46birdq] { margin-top: 1rem; }

.fc-grade-prompt[b-wqc46birdq] {
    text-align: center;
    font-family: var(--glytic-font-body);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--qf-bone-dim);
    margin-bottom: 0.6rem;
}

.fc-grade-buttons[b-wqc46birdq] { display: flex; gap: 0.6rem; }

/* Grade controls printed on the bone face (button system 2026-09-23): tonal tints of the
   semantic hue -- soft tint fill, hairline border, label in the full-strength hue itself for
   readability on the light bone surface (no clip-path/::before double layer, no uppercase). */
.fc-grade-btn[b-wqc46birdq] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 56px;
    padding: 0.6rem 0.5rem;
    border-radius: var(--qf-btn-radius);
    border: 1px solid rgba(var(--qf-ink-rgb), 0.2);
    background: rgba(var(--qf-ink-rgb), 0.06);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Again: crimson tint + crimson label -- the exam still stands */
.fc-grade-again[b-wqc46birdq] {
    border-color: rgba(var(--qf-crimson-rgb), 0.45);
    background: rgba(var(--qf-crimson-rgb), 0.14);
    /* Label stays ink: hue text on bone is 2.2-3.8:1; the hue lives in border, tint and glyph. */
    color: var(--qf-ink);
}
.fc-grade-again:hover[b-wqc46birdq] { background: rgba(var(--qf-crimson-rgb), 0.22); }

/* Got it: teal tint + teal label -- mastery */
.fc-grade-gotit[b-wqc46birdq] {
    border-color: rgba(var(--glytic-primary-rgb), 0.45);
    background: rgba(var(--glytic-primary-rgb), 0.14);
    /* Label stays ink: hue text on bone is 2.2-3.8:1; the hue lives in border, tint and glyph. */
    color: var(--qf-ink);
}
.fc-grade-gotit:hover[b-wqc46birdq] { background: rgba(var(--glytic-primary-rgb), 0.22); }

/* Easy: ember tint + ember label -- mastered without effort */
.fc-grade-easy[b-wqc46birdq] {
    border-color: rgba(var(--forge-primary-rgb), 0.45);
    background: rgba(var(--forge-primary-rgb), 0.14);
    /* Label stays ink: hue text on bone is 2.2-3.8:1; the hue lives in border, tint and glyph. */
    color: var(--qf-ink);
}
.fc-grade-easy:hover[b-wqc46birdq] { background: rgba(var(--forge-primary-rgb), 0.22); }
.fc-grade-easy[b-wqc46birdq]  .mud-icon-root { color: var(--forge-primary); }

/* the semantic glyph sits a touch larger than the .qf-glyph default on this control */
.fc-grade-glyph[b-wqc46birdq] { width: 12px; height: 12px; }

.fc-grade-btn:focus-visible[b-wqc46birdq] { outline: var(--qf-btn-focus); outline-offset: 2px; }
.fc-grade-btn:disabled[b-wqc46birdq] { opacity: 0.5; cursor: default; }

/* ========================================
   AUX ROW (review-mark + content rating, separated from grades)
   ======================================== */

.flashcard-aux-row[b-wqc46birdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--qf-ink-rgb), 0.14);
}

.fc-aux-mark[b-wqc46birdq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--qf-bone-dim);
    font-family: var(--glytic-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--qf-btn-radius);
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.fc-aux-mark:hover[b-wqc46birdq] { color: var(--qf-ink); text-decoration: underline; text-underline-offset: 4px; }
.fc-aux-mark:focus-visible[b-wqc46birdq] { outline: var(--qf-btn-focus); outline-offset: 2px; }
.fc-aux-mark.marked[b-wqc46birdq] { color: var(--qf-gold-on-bone); }

.fc-content-rating[b-wqc46birdq] { display: flex; align-items: center; gap: 0.4rem; }
.fc-rating-caption[b-wqc46birdq] { font-size: 0.7rem; color: var(--qf-bone-dim); font-family: var(--glytic-font-body); }

/* ========================================
   SESSION SUMMARY
   ======================================== */

.fc-summary-card[b-wqc46birdq] { max-width: 520px; width: 100%; border-radius: var(--glytic-border-radius); }
.fc-summary-trophy[b-wqc46birdq] { color: var(--forge-gold); filter: drop-shadow(0 0 12px var(--forge-glow-intense)); font-size: 2.5rem; }

.fc-summary-stats[b-wqc46birdq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

/* Bevel-following outline (double-layer reveal): FILL = outline color, ::before = interior
   at z-index:-1 (isolation keeps it in this stacking context; no child lift needed). */
.fc-summary-stat[b-wqc46birdq] {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.75rem 0.5rem;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-border);
}
.fc-summary-stat[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.fc-summary-value[b-wqc46birdq] { font-family: var(--glytic-font-heading); font-size: 1.5rem; font-weight: 700; color: var(--glytic-text-primary); }
.fc-summary-value.fc-again[b-wqc46birdq] { color: var(--forge-gold); }
.fc-summary-value.fc-gotit[b-wqc46birdq] { color: var(--glytic-primary); }
.fc-summary-value.fc-streak[b-wqc46birdq] { color: var(--glytic-primary); } /* was --glytic-secondary (logo purple); demoted to flat teal like the rest of the restyle */
.fc-summary-key[b-wqc46birdq] { font-size: 0.68rem; color: var(--glytic-text-muted); text-align: center; font-family: var(--glytic-font-body); }

.fc-summary-actions[b-wqc46birdq] { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .fc-session-fill[b-wqc46birdq],
    .fc-chip[b-wqc46birdq],
    .fc-grade-btn[b-wqc46birdq],
    .flashcard-card[b-wqc46birdq] { transition: none !important; }
}

/* ========================================
   PREMIUM AI FEATURES
   ======================================== */

/* Bevel-following outline (double-layer reveal): FILL = outline color, ::before = interior
   at z-index:-1 (isolation keeps it in this stacking context; Mud-rendered children carry
   no scope attribute so a scoped child-lift rule would never reach them). */
.flashcard-ai-features-question[b-wqc46birdq],
.flashcard-ai-features-answer[b-wqc46birdq] {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--qf-ink-rgb), 0.14);
    border: 0;
    position: relative;
    isolation: isolate;
}
.flashcard-ai-features-question[b-wqc46birdq]::before,
.flashcard-ai-features-answer[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--qf-ink-rgb), 0.04), rgba(var(--qf-ink-rgb), 0.04)), var(--qf-bone);
    z-index: -1;
    pointer-events: none;
}
/* AI panels sit on the bone face: labels and body render as ink, not palette light tones */
.flashcard-ai-features-question[b-wqc46birdq]  .mud-button-root,
.flashcard-ai-features-answer[b-wqc46birdq]  .mud-button-root,
.flashcard-ai-features-question[b-wqc46birdq]  .mud-button-root .mud-icon-root,
.flashcard-ai-features-answer[b-wqc46birdq]  .mud-button-root .mud-icon-root { color: var(--qf-bone-dim) !important; }
.flashcard-ai-explanation-title[b-wqc46birdq] { color: var(--qf-ink) !important; }
/* Body is MarkupString-injected (FormatExplanationContent), so the <p> children carry
   no scope attribute -- reach them with ::deep, like .flashcard-question-text above. */
.flashcard-ai-explanation-text[b-wqc46birdq] { color: var(--qf-ink) !important; }
.flashcard-ai-explanation-text[b-wqc46birdq]  p { color: var(--qf-ink) !important; }

.ai-hint-alert[b-wqc46birdq] { background: rgba(var(--mud-palette-info-rgb), 0.08) !important; border: 1px solid rgba(var(--mud-palette-info-rgb), 0.2); border-radius: 6px; }
.ai-hint-content[b-wqc46birdq] { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.4; }
.ai-hint-content p[b-wqc46birdq] { margin: 0 0 0.5rem 0; line-height: 1.5; }
.ai-hint-content p:last-child[b-wqc46birdq] { margin-bottom: 0; }

.premium-upsell-btn[b-wqc46birdq] { opacity: 0.8; transition: all 0.3s ease; }
.premium-upsell-btn:hover[b-wqc46birdq] { opacity: 1; }
.flashcard-premium-upsell-question[b-wqc46birdq],
.flashcard-premium-upsell-answer[b-wqc46birdq] { margin-top: 1rem; text-align: center; }
.premium-upsell-content[b-wqc46birdq] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; }

/* Bevel-following outline (double-layer reveal): FILL = outline color, ::before = interior
   at z-index:-1 (isolation keeps it in this stacking context; no child lift needed). */
.flashcard-ai-explanation[b-wqc46birdq] { position: relative; isolation: isolate; margin-top: 1rem; padding: 0.75rem; background: rgba(var(--qf-ink-rgb), 0.14); border: 0; border-radius: 0; clip-path: var(--qf-clip-btn); }
.flashcard-ai-explanation[b-wqc46birdq]::before { content: ''; position: absolute; inset: 1px; clip-path: var(--qf-clip-btn); background: linear-gradient(rgba(var(--qf-ink-rgb), 0.04), rgba(var(--qf-ink-rgb), 0.04)), var(--qf-bone); z-index: -1; pointer-events: none; }
.flashcard-ai-explanation-title[b-wqc46birdq] { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.5rem; }
.flashcard-ai-explanation-text[b-wqc46birdq] { font-size: 0.9rem; line-height: 1.55; }
.flashcard-ai-explanation-text[b-wqc46birdq]  p { margin: 0 0 0.75rem 0; line-height: 1.6; }
.flashcard-ai-explanation-text[b-wqc46birdq]  p:last-child { margin-bottom: 0; }

/* Quiet text action (button system 2026-09-23): needs ::deep, MudButton's Class is on the
   component root which scoped CSS otherwise never reaches. Root layer sets the Info/Success
   label color; this only adds the quiet hover cue. */
[b-wqc46birdq] .ai-feature-btn { transition: color 0.15s ease; }
[b-wqc46birdq] .ai-feature-btn:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .flashcards-container[b-wqc46birdq] {
        padding: 0.5rem 0.35rem 1.5rem;
        overflow-x: hidden;
    }

    .flashcard-controls-section[b-wqc46birdq] { margin-bottom: 0.75rem; }

    /* Session bar stacks; controls wrap to full-width chip row */
    .fc-session-bar[b-wqc46birdq] { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    /* The progress block's row-layout `flex: 1 1 220px` treats 220px as a HEIGHT once the
       bar is a column, so flex-grow stretches it to ~220px of deadspace above the chips.
       Size it to content in the stacked layout. */
    .fc-session-progress[b-wqc46birdq] { flex: 0 0 auto; min-width: 0; }
    .fc-control-chips[b-wqc46birdq] { justify-content: space-between; }
    .fc-chip[b-wqc46birdq] { flex: 1; justify-content: center; }

    .flashcard-card[b-wqc46birdq] {
        --fc-card-pad: clamp(1.2rem, 4.5vw, 1.6rem);
        min-height: 0 !important;
        border-radius: 16px;
    }

    .flashcard-wrapper[b-wqc46birdq] {
        --fc-card-pad: clamp(1.2rem, 4.5vw, 1.6rem);
    }

    .flashcard-wrapper[b-wqc46birdq]  .flashcard-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Keep the flip's both-faces grid reservation (base rules above): the mobile card
       stays as tall as the taller face, so flipping never jumps the layout. Only the
       sizing declarations are relaxed here -- NOT display -- so the hidden face keeps
       reserving its height via visibility instead of collapsing via display:none. */
    .flashcard-wrapper[b-wqc46birdq]  .flashcard-card > .mud-card-content.flashcard-faces,
    .flashcard-wrapper[b-wqc46birdq]  .flashcard-faces {
        height: auto !important;
        min-height: 0 !important;
        flex: 0 1 auto !important;
        padding: var(--fc-card-pad, 0.95rem) !important;
    }

    .question-side[b-wqc46birdq],
    .answer-side[b-wqc46birdq] {
        min-height: 0 !important;
        padding: 0.15rem;
    }

    .question-side[b-wqc46birdq] {
        justify-content: flex-start;
    }

    .answer-side[b-wqc46birdq] {
        min-height: auto;
    }

    .question-side .flashcard-body[b-wqc46birdq],
    .answer-side .flashcard-body[b-wqc46birdq] {
        flex: 0 1 auto !important;
        justify-content: flex-start !important;
        gap: 0.85rem;
    }

    .flashcard-question-text[b-wqc46birdq] {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1rem !important;
        padding: 0.15rem 0.1rem 0;
    }

    .flashcard-answer-options[b-wqc46birdq] {
        gap: 0.55rem;
        margin-top: 1rem;
    }

    .flashcard-answers-title[b-wqc46birdq] {
        font-size: 1rem !important;
        margin-bottom: 0.65rem !important;
    }

    .answer-reveal-box[b-wqc46birdq],
    .flashcard-answer-option[b-wqc46birdq] {
        align-items: flex-start;
        padding: 0.75rem 0.85rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .flashcard-bottom-section[b-wqc46birdq] {
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
    }

    /* Grade buttons stay side-by-side and thumb-reachable */
    .fc-grade-buttons[b-wqc46birdq] { gap: 0.45rem; }
    .fc-grade-btn[b-wqc46birdq] {
        min-width: 0;
        min-height: 50px;
        padding: 0.55rem 0.35rem;
        font-size: 0.72rem;
        border-radius: 10px;
    }

    /* Aux row: keep mark + rating readable when stacked */
    .flashcard-aux-row[b-wqc46birdq] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        margin-top: 0.75rem;
        padding-top: 0.65rem;
    }
    .fc-content-rating[b-wqc46birdq] { justify-content: center; }

    .fc-summary-stats[b-wqc46birdq] { gap: 0.5rem; }
    .fc-summary-value[b-wqc46birdq] { font-size: 1.25rem; }

    /* AI features compact */
    .flashcard-ai-features-question[b-wqc46birdq],
    .flashcard-ai-features-answer[b-wqc46birdq] { padding: 0.5rem; margin-top: 0.75rem; }
    .ai-hint-content[b-wqc46birdq] { font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .fc-chip span[b-wqc46birdq] { display: none; }
    .fc-chip[b-wqc46birdq] { min-width: 44px; padding: 0.4rem; }
    .fc-summary-stats[b-wqc46birdq] { grid-template-columns: repeat(2, 1fr); }
    .flashcard-wrapper[b-wqc46birdq],
    .flashcard-card[b-wqc46birdq] { --fc-card-pad: 1.15rem; }
    .flashcard-question-text[b-wqc46birdq] { font-size: 0.96rem !important; }
    .fc-grade-btn span[b-wqc46birdq] { white-space: nowrap; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .flashcard-answer-option[b-wqc46birdq] { min-height: 48px; touch-action: manipulation; }
    .flashcard-answer-option:hover[b-wqc46birdq] { transform: none; box-shadow: none; }
    .flashcard-answer-option:active[b-wqc46birdq] { background: rgba(var(--glytic-primary-rgb), 0.3); }
    .flashcard-answer-option:active[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.12), rgba(var(--glytic-primary-rgb), 0.12)), var(--qf-bone); }
    .flashcard-card:hover[b-wqc46birdq] { transform: none; box-shadow: none; }
}

/* ========================================
   FLASHCARD OPTION C: BOTTOM ACTION BAR
   ======================================== */

/* Carousel dots — hidden on desktop, shown on mobile */
.fc-carousel-dots[b-wqc46birdq] {
    display: none;
    justify-content: center;
    gap: 5px;
    padding: 0.35rem 0;
}

.fc-dot[b-wqc46birdq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
}

.fc-dot.active[b-wqc46birdq] {
    background: var(--glytic-primary);
    box-shadow: 0 0 6px var(--glytic-primary);
    width: 16px;
    border-radius: 3px;
}

/* Bottom action bar — hidden on desktop, shown on mobile */
.fc-bottom-bar[b-wqc46birdq] {
    display: none;
    align-items: center;
    justify-content: space-around;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0.75rem 0.5rem;
    background: rgba(26, 34, 48, 0.95);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Tonal sm toolbar button (button system 2026-09-23): icon + label chip on the tonal surface. */
.fc-bar-btn[b-wqc46birdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: var(--qf-btn-h-sm);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--qf-line);
    background: var(--qf-surface-tonal);
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    border-radius: var(--qf-btn-radius);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-width: 52px;
}

[b-wqc46birdq] .fc-bar-btn .mud-icon-root {
    font-size: 1.35rem !important;
}

.fc-bar-btn:hover[b-wqc46birdq],
.fc-bar-btn:active[b-wqc46birdq],
.fc-bar-btn:focus-visible[b-wqc46birdq] {
    color: var(--glytic-text-primary);
    background: var(--qf-surface-tonal-hover);
    border-color: var(--glytic-border-hover);
}

.fc-bar-btn:focus-visible[b-wqc46birdq] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.fc-bar-btn.active[b-wqc46birdq] {
    color: var(--forge-gold);
    border-color: rgba(var(--qf-gold-rgb), 0.45);
}

.fc-bar-btn.disabled[b-wqc46birdq],
.fc-bar-btn:disabled[b-wqc46birdq] {
    opacity: 0.3;
    pointer-events: none;
}

/* Mobile: show bottom bar + dots, drop side nav FABs, symmetric full-width card */
@media (max-width: 768px) {
    .fc-carousel-dots[b-wqc46birdq] {
        display: flex;
    }

    .fc-bottom-bar[b-wqc46birdq] {
        display: flex;
    }

    /* On mobile, navigation is the bottom bar + swipe. Hiding the side FAB columns removes
       the right-edge margin asymmetry (the card now centers in a symmetric viewport). */
    .flashcard-nav-col[b-wqc46birdq] {
        display: none;
    }

    .flashcard-grid > .flashcard-column[b-wqc46birdq] {
        max-width: 100%;
        flex-basis: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* Symmetric gutters at 390x844 */
    .flashcards-viewport[b-wqc46birdq] {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .flashcard-grid[b-wqc46birdq] {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    [b-wqc46birdq] .flashcard-grid.mud-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    [b-wqc46birdq] .flashcard-grid > .mud-grid-item.flashcard-column {
        padding-left: 0;
        padding-right: 0;
    }

    .flashcard-wrapper[b-wqc46birdq],
    .flashcard-card[b-wqc46birdq] {
        max-width: 100%;
    }

    /* Question-side flip hint is redundant with the bottom bar on mobile */
    .question-side .flashcard-footer.text-center[b-wqc46birdq] {
        display: none;
    }

    /* Increase answer option touch targets */
    .fc-bottom-bar[b-wqc46birdq] {
        margin: 0.35rem 0.35rem 0.5rem;
        padding: 0.45rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .fc-bar-btn[b-wqc46birdq] {
        padding: 0.4rem 0.5rem;
        font-size: 0.58rem;
        min-width: 44px;
    }

    [b-wqc46birdq] .fc-bar-btn .mud-icon-root {
        font-size: 1.2rem !important;
    }
}

/* ========================================
   RETURN-TO-CONTEXT BACK AFFORDANCE
   ======================================== */
/* Unobtrusive chevron + short label shown when flashcards were launched from a known
   context (My Tests / Study Hub). Sits in normal flow at the very top of the container,
   above the session-progress bar -- it never overlaps the progress bar, the flashcard
   swipe area, or the fixed/bottom mobile action bar. Honours the iOS safe-area inset. */
.fc-return-link[b-wqc46birdq] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: calc(0.5rem + env(safe-area-inset-top, 0px)) 0 0.5rem 0.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.35rem;
    border-radius: var(--glytic-border-radius-small);
    font-family: var(--glytic-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--glytic-text-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.fc-return-link:hover[b-wqc46birdq],
.fc-return-link:focus-visible[b-wqc46birdq] {
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-color: var(--glytic-border);
    outline: none;
}

.fc-return-label[b-wqc46birdq] {
    white-space: nowrap;
}

/* Guest answer-key pending/retry panel (reveal in flight or failed). */
.fc-key-pending[b-wqc46birdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
    padding: 1rem;
}

.fc-guard-title[b-wqc46birdq] {
    font-family: var(--glytic-font-heading);
    font-size: 1.2rem;
    color: var(--glytic-text-primary);
    margin: 0 0 0.5rem;
}

.fc-guard-body[b-wqc46birdq] {
    font-family: var(--glytic-font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
    margin: 0;
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Forgot Password page — layout handled by .qf-panel-page / .qf-panel in quizforge.css */
/* /Pages/Healthcare/Index.razor.rz.scp.css */
/* Healthcare vertical landing -- Composed Strike restyle (2026-07).
   Angular cut-corner language matching the /in India + /finance verticals: rectangles
   -> cut corners; purple purged -> teal datum + ember CTA; clip-path shears box-shadow/
   translateY, so hovers move to border-color + background. */

.vertical-landing-page[b-iei1em27qu] {
    min-height: 100vh;
    background: var(--glytic-bg-dark);
    color: var(--glytic-text-primary);
}

.vertical-hero[b-iei1em27qu] {
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.vertical-hero-content[b-iei1em27qu] {
    max-width: 900px;
    margin: 0 auto;
}

.vertical-badge[b-iei1em27qu] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.vertical-badge[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.vertical-hero-title[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vertical-hero-subtitle[b-iei1em27qu] {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    margin: 0 0 16px;
    line-height: 1.4;
}

.vertical-hero-description[b-iei1em27qu] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.vertical-hero-actions[b-iei1em27qu] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-large[b-iei1em27qu],
.btn-secondary-large[b-iei1em27qu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    clip-path: none;
}

.btn-primary-large[b-iei1em27qu] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
}

.btn-primary-large:hover[b-iei1em27qu] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.btn-secondary-large[b-iei1em27qu] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.btn-secondary-large:hover[b-iei1em27qu] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.btn-primary-large:focus-visible[b-iei1em27qu],
.btn-secondary-large:focus-visible[b-iei1em27qu] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.vertical-stats-bar[b-iei1em27qu] {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 60px 24px;
    background: var(--glytic-card-bg);
    border-bottom: 1px solid var(--glytic-border);
}

.stat-item[b-iei1em27qu] {
    text-align: center;
}

.stat-number[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 8px;
}

.stat-label[b-iei1em27qu] {
    font-size: 1rem;
    color: var(--glytic-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.vertical-exams-section[b-iei1em27qu],
.vertical-features-section[b-iei1em27qu],
.vertical-faq-section[b-iei1em27qu] {
    padding: 80px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header[b-iei1em27qu] {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.section-header p[b-iei1em27qu] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-exams-grid[b-iei1em27qu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.vertical-exam-card[b-iei1em27qu] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Accent bar (kept on ::before). z-index:1 keeps it above the ::after interior. */
.vertical-exam-card[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(90deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Double-layer reveal on ::after (::before is the accent bar): element bg = the border
   color; ::after paints the card interior so the hairline follows the cut corners
   (z-index:-1 + isolation; children need no lift). */
.vertical-exam-card[b-iei1em27qu]::after {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.vertical-exam-card:hover[b-iei1em27qu] {
    background: var(--glytic-primary);
}

.vertical-exam-card:hover[b-iei1em27qu]::after {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-card-bg);
}

.vertical-exam-card:hover[b-iei1em27qu]::before {
    opacity: 1;
}

.vertical-exam-card:focus-visible[b-iei1em27qu] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.vertical-exam-card.coming-soon[b-iei1em27qu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.exam-card-header[b-iei1em27qu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.exam-card-header h3[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--glytic-primary);
}

.exam-difficulty[b-iei1em27qu] {
    padding: 4px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-description[b-iei1em27qu] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0 0 20px;
}

.exam-meta[b-iei1em27qu] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glytic-border);
}

.exam-questions[b-iei1em27qu],
.exam-duration[b-iei1em27qu] {
    font-size: 0.875rem;
    color: var(--glytic-text-secondary);
    font-weight: 500;
}

.exam-topics[b-iei1em27qu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-tag[b-iei1em27qu] {
    padding: 6px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--glytic-primary);
    font-weight: 500;
}

.features-grid-vertical[b-iei1em27qu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.feature-card-vertical[b-iei1em27qu] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    text-align: center;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.feature-card-vertical[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical:hover[b-iei1em27qu] {
    background: var(--glytic-border-hover);
}

.feature-card-vertical:hover[b-iei1em27qu]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Number plate: double-layer reveal, inset 2px to preserve the 2px border weight. */
.feature-number[b-iei1em27qu] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    font-family: var(--glytic-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--glytic-primary);
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

.feature-number[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical h3[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-text-primary);
}

.feature-card-vertical p[b-iei1em27qu] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.faq-grid[b-iei1em27qu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.faq-item[b-iei1em27qu] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.faq-item[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.faq-item h3[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-primary);
}

.faq-item p[b-iei1em27qu] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-cta-section[b-iei1em27qu] {
    padding: 100px 24px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.cta-content h2[b-iei1em27qu] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.cta-content p[b-iei1em27qu] {
    font-size: 1.25rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
}

.cta-actions[b-iei1em27qu] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .vertical-hero[b-iei1em27qu] {
        padding: 80px 20px 60px;
    }

    .vertical-hero-title[b-iei1em27qu] {
        font-size: 2.5rem;
    }

    .vertical-hero-subtitle[b-iei1em27qu] {
        font-size: 1.25rem;
    }

    .vertical-hero-description[b-iei1em27qu] {
        font-size: 1rem;
    }

    .vertical-stats-bar[b-iei1em27qu] {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
    }

    .vertical-exams-grid[b-iei1em27qu] {
        grid-template-columns: 1fr;
    }

    .section-header h2[b-iei1em27qu] {
        font-size: 2rem;
    }

    .faq-grid[b-iei1em27qu] {
        grid-template-columns: 1fr;
    }

    .btn-primary-large[b-iei1em27qu],
    .btn-secondary-large[b-iei1em27qu] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vertical-hero-title[b-iei1em27qu] {
        font-size: 2rem;
    }

    .vertical-stats-bar[b-iei1em27qu] {
        gap: 30px;
    }

    .stat-number[b-iei1em27qu] {
        font-size: 2.5rem;
    }

    .vertical-exams-section[b-iei1em27qu],
    .vertical-features-section[b-iei1em27qu],
    .vertical-faq-section[b-iei1em27qu] {
        padding: 60px 20px;
    }

    .vertical-cta-section[b-iei1em27qu] {
        padding: 60px 20px;
    }

    .cta-content h2[b-iei1em27qu] {
        font-size: 2rem;
    }
}
/* /Pages/Help.razor.rz.scp.css */
.help-page[b-xw9pukr0pe] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    min-height: calc(100dvh - 64px);
    color: var(--glytic-text-primary);
}

.help-header[b-xw9pukr0pe] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.help-title[b-xw9pukr0pe] {
    font-family: var(--glytic-font-heading);
    font-size: 2.25rem;
    color: var(--glytic-text-primary);
    margin: 0 0 0.5rem;
}

.help-intro[b-xw9pukr0pe],
.help-contact[b-xw9pukr0pe] {
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
}

.help-intro[b-xw9pukr0pe] {
    max-width: 34rem;
    margin: 0 auto;
}

.help-section[b-xw9pukr0pe] {
    margin-top: 2.5rem;
}

.help-section-title[b-xw9pukr0pe] {
    font-family: var(--glytic-font-heading);
    font-size: 1.3rem;
    color: var(--glytic-text-primary);
    margin: 0 0 1rem;
}

/* FAQ: single column on small screens, 2-column card grid from tablet up. */
.help-faq-grid[b-xw9pukr0pe] {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

/* Cut-corner card, double-layer reveal (house qf-card idiom): the element fill
   draws the hairline, the ::before interior (inset 1px) paints the surface so
   the border follows the clip-path corners. Hover = fill shift only, no
   translate/scale (Composed Strike). */
.help-item[b-xw9pukr0pe] {
    position: relative;
    isolation: isolate;
    min-width: 0;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 1rem 1.25rem 1.25rem;
    transition: background 0.2s ease;
}

.help-item[b-xw9pukr0pe]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.help-item:hover[b-xw9pukr0pe] {
    background: var(--glytic-border-hover);
}

.help-q[b-xw9pukr0pe] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--glytic-text-primary);
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.help-q[b-xw9pukr0pe]::-webkit-details-marker {
    display: none;
}

/* CSS-drawn chevron (rotated corner, no icon font, no unicode glyph). */
.help-q[b-xw9pukr0pe]::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--glytic-text-secondary);
    border-bottom: 2px solid var(--glytic-text-secondary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.help-item[open] .help-q[b-xw9pukr0pe]::after {
    transform: rotate(-135deg);
}

.help-q:focus-visible[b-xw9pukr0pe] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 4px;
}

.help-a[b-xw9pukr0pe] {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
}

/* More-resources link cards: 3 columns wide, 2 on medium, 1 on small. Same
   double-layer reveal as the FAQ cards; the anchor fills the card so the whole
   tile is the tap target. */
.help-links[b-xw9pukr0pe] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.help-links li[b-xw9pukr0pe] {
    display: flex;
    position: relative;
    isolation: isolate;
    min-width: 0;
    background: var(--glytic-border);
    clip-path: var(--qf-clip-card);
    transition: background 0.2s ease;
}

.help-links li[b-xw9pukr0pe]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.help-links li:hover[b-xw9pukr0pe] {
    background: var(--glytic-border-hover);
}

.help-links a[b-xw9pukr0pe] {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 1rem 1.25rem;
    color: var(--forge-primary);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: break-word;
}

.help-links a:hover[b-xw9pukr0pe] {
    text-decoration: underline;
}

.help-links a:focus-visible[b-xw9pukr0pe] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

.help-contact[b-xw9pukr0pe] {
    margin: 2rem 0 0;
    text-align: center;
}

@media (min-width: 620px) {
    .help-links[b-xw9pukr0pe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .help-faq-grid[b-xw9pukr0pe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .help-links[b-xw9pukr0pe] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .help-page[b-xw9pukr0pe] {
        padding: 2rem 1rem 3rem;
    }
}

@media (max-width: 480px) {
    .help-title[b-xw9pukr0pe] {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-item[b-xw9pukr0pe],
    .help-links li[b-xw9pukr0pe],
    .help-q[b-xw9pukr0pe]::after {
        transition: none;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* Card action buttons z-index */
.exam-card .card-actions[b-o2gobkrroc] {
  position: relative;
  z-index: 2;
}

/* Primary CTA — "Begin" */
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root {
  flex: 1;
  border-radius: var(--qf-btn-radius);
  border: 1px solid var(--forge-primary);
  background: var(--forge-gradient-btn);
  color: var(--qf-ink);
  font-family: var(--glytic-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  min-height: var(--qf-btn-h-md);
  padding: 0 1.125rem;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:hover {
  background: var(--forge-gradient);
  color: var(--qf-ink);
}
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:active {
  background: var(--forge-gradient);
}
/* Card is cut-corner (--qf-clip-card); inset offset keeps the ring inside the bevel. */
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:focus-visible {
  outline: var(--qf-btn-focus);
  outline-offset: -3px;
}

/* Secondary — "Details" icon button */
.card-actions[b-o2gobkrroc]  .btn-details.mud-icon-button-root {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--qf-btn-radius);
  border: 1px solid var(--qf-line);
  background: transparent;
  color: var(--glytic-text-secondary);
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.card-actions[b-o2gobkrroc]  .btn-details.mud-icon-button-root:hover {
  border-color: var(--glytic-border-hover);
  color: var(--glytic-text-primary);
  background: rgba(var(--glytic-primary-rgb), .1);
}

/* --------- LAYOUT FOUNDATION - STICKY COMPATIBLE --------- */
.qf-root[b-o2gobkrroc] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    /* TWITTER-LIKE FEED: Add proper scrolling behavior */
    scroll-behavior: smooth;
    /* CRITICAL FIX: Ensure no properties that break sticky positioning */
    contain: none !important;
    transform: none !important;
    perspective: none !important;
    overflow: visible !important;
}

/* Sticky positioning: body-level overrides scoped to homepage.
   MudBlazor ancestor overrides are in mudblazor-overrides.css (global). */
body.homepage[b-o2gobkrroc] {
    padding-top: 0 !important;
    transform: none !important;
    contain: none !important;
    perspective: none !important;
}

/* =========================================================
   VENDOR SOCIAL PROOF STRIP
   ========================================================= */

/* Composed Strike: the trusted-by strip is deliberately quiet -- an uppercase
   eyebrow and muted vendor names between hairlines, no chip borders or pills. */
.vendor-strip[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border-top: 1px solid var(--qf-line);
    border-bottom: 1px solid var(--qf-line);
}

.vendor-strip-label[b-o2gobkrroc] {
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    letter-spacing: 0.22em;
    text-transform: none;
    white-space: nowrap;
}

.vendor-strip-logos[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
}

.vendor-chip[b-o2gobkrroc] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--glytic-text-muted);
    text-transform: none;
    padding: 0;
    border: none;
    border-radius: 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.vendor-strip:hover .vendor-chip[b-o2gobkrroc] {
    color: var(--glytic-text-secondary);
}

@media (max-width: 600px) {
    .vendor-strip[b-o2gobkrroc] {
        padding: 0.7rem 1rem;
        gap: 0.5rem 1rem;
    }

    .vendor-strip-label[b-o2gobkrroc] {
        font-size: 0.67rem;
        width: 100%;
        text-align: center;
    }

    .vendor-strip-logos[b-o2gobkrroc] {
        justify-content: center;
    }
}

/* =========================================================
   STICKY SEARCH BAR
   ========================================================= */
.search-brand-bar[b-o2gobkrroc] {
    position: sticky;
    position: -webkit-sticky;
    top: 64px;
    z-index: 1250;
    background: rgba(15, 15, 26, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.12);
    padding: 0.4rem 1rem 0;
    width: 100%;
    box-sizing: border-box;
}

.qf-root.has-free-nudge .search-brand-bar[b-o2gobkrroc] {
    top: 122px;
}

.search-brand-inner[b-o2gobkrroc] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Merged "create your own" card -- compact CTA card at the end of the Official grid.
   Combines the old premium-discovery ghost card and the doc-to-exam chaser card.
   Keeps the standard .exam-card double-layer bevel; primary-tinted border + surface. */
.exam-card.create-your-own-card[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), 0.3);   /* bevel-following border reveal */
}
.exam-card.create-your-own-card[b-o2gobkrroc]::before {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.08), transparent 60%), var(--glytic-bg-dark);
}

.exam-card.create-your-own-card:hover[b-o2gobkrroc] {
    background: var(--glytic-primary);
}
.exam-card.create-your-own-card:hover[b-o2gobkrroc]::before {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.13), transparent 60%), var(--glytic-bg-dark);
}

/* Two stacked, full-width CTAs (primary ember + secondary ghost outline). */
.create-your-own-card .card-actions[b-o2gobkrroc] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

/* My Tests tab banner -> path into the rich dashboard view (stats, resume, pins) */
.my-tests-tab-banner[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--qf-line);
}

/* Double-layer reveal: element bg = hairline border color; ::before = the 0.05 tint
   interior composited over --glytic-bg-medium so the border follows the cut corners
   (z-index:-1 + isolation; children need no lift). */
.my-tests-tab-banner[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.my-tests-tab-banner-text[b-o2gobkrroc] {
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
}

.my-tests-dashboard-link[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-decoration: none;
    white-space: nowrap;
}

.my-tests-dashboard-link:hover[b-o2gobkrroc] {
    text-decoration: underline;
}

.my-tests-dashboard-icon[b-o2gobkrroc] {
    font-size: 1.05rem !important;
}

.search-brand-bar .search-bar-new[b-o2gobkrroc] {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Filter toggle button */
.filter-toggle-btn[b-o2gobkrroc] {
    flex-shrink: 0;
    color: var(--glytic-text-muted) !important;
    border: 1px solid var(--glytic-border) !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
}

.filter-toggle-btn:hover[b-o2gobkrroc] {
    border-color: var(--glytic-border-hover) !important;
    color: var(--glytic-text-primary) !important;
}

/* Category Filter Area (replaces vendor filter) */
.category-filter-area[b-o2gobkrroc] {
    margin: 0 auto;
    padding: 0.6rem 0 0.5rem;
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
}

.pill-filters[b-o2gobkrroc] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    position: relative;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pill-filters[b-o2gobkrroc]::-webkit-scrollbar {
    display: none;
}

.pill[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--qf-line);
    border-radius: 999px;
    scroll-snap-align: start;
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.pill:hover[b-o2gobkrroc] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.pill:focus-visible[b-o2gobkrroc] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.pill.active[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), .14);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

/* Vendor filter drawer (legacy - kept for compatibility) */
.vendor-filter-drawer[b-o2gobkrroc] {
    max-width: 720px;
    margin: 0.5rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    animation: drawer-open-b-o2gobkrroc 0.2s ease-out;
}

@keyframes drawer-open-b-o2gobkrroc {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-o2gobkrroc] .vendor-filter-drawer .mud-chip {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .search-brand-bar[b-o2gobkrroc] {
        top: 56px;
        padding: 0.4rem 0.5rem 0;
    }

    .qf-root.has-free-nudge .search-brand-bar[b-o2gobkrroc] {
        top: 154px;
    }

    .filter-toggle-btn[b-o2gobkrroc] {
        width: 32px !important;
        height: 32px !important;
    }

    .vendor-filter-drawer[b-o2gobkrroc] {
        gap: 0.25rem;
        padding: 0.35rem 0;
    }

    .category-filter-area[b-o2gobkrroc] {
        padding: 0.75rem 0 0.5rem;
    }

    .pill-filters[b-o2gobkrroc] {
        justify-content: flex-start;
        gap: 0.3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        /* Scroll affordance: fade the clipped right edge of the overflowing pill rail. */
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

    .pill[b-o2gobkrroc] {
        /* 44px tap target (project rule). The chips rendered 28-36px tall on a phone, which is
           part of the sub-44px targets the audit counted on the home page alone. Padding alone
           cannot be raised without making the rail overflow further, so set min-height and let
           flex centering do the rest -- the visual chip size barely changes, the hit area does. */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 0.9rem;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
}

/* ---- Sticky Tab Bar (affixed to bottom of search bar) ---- */
.sticky-tab-bar[b-o2gobkrroc] {
    display: flex;
    gap: 0;
    max-width: 720px;
    margin: 0.4rem auto 0;
}

.sticky-tab[b-o2gobkrroc] {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 28px tall. */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-bottom: 2px solid var(--qf-line);
    color: var(--glytic-text-muted);
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.sticky-tab:hover[b-o2gobkrroc] {
    color: var(--glytic-text-primary);
}

/* Tab recipe: selected = primary text + 2px teal indicator. */
.sticky-tab.active[b-o2gobkrroc] {
    color: var(--glytic-text-primary);
    border-bottom-color: var(--glytic-primary);
}

.sticky-tab:focus-visible[b-o2gobkrroc] {
    outline: var(--qf-btn-focus);
    outline-offset: -4px;
}

/* Search-active tab highlighting: accent the tabs that have matches, dim the empty ones. */
.sticky-tab.has-results[b-o2gobkrroc] {
    color: var(--glytic-primary);
    background: linear-gradient(180deg, transparent, rgba(var(--glytic-primary-rgb), 0.08));
}
.sticky-tab.has-results:not(.active)[b-o2gobkrroc] {
    border-bottom-color: rgba(var(--glytic-primary-rgb), 0.4);
}
.sticky-tab.search-empty[b-o2gobkrroc] {
    opacity: 0.4;
}
.sticky-tab.search-empty.active[b-o2gobkrroc] {
    opacity: 0.65;
}

@media (max-width: 600px) {
    .sticky-tab[b-o2gobkrroc] {
        font-size: 0.8125rem;
        padding: 0.35rem 0.5rem;
    }
}

/* PERFORMANCE STATES */
.instant-load-indicator[b-o2gobkrroc] {
    position: fixed;
    top: 80px;
    right: 20px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.1), rgba(46, 204, 113, 0.1));
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--glytic-primary);
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.instant-load-indicator.show[b-o2gobkrroc] {
    opacity: 1;
    transform: translateX(0);
}

.instant-load-indicator.excellent[b-o2gobkrroc] {
    border-color: rgba(46, 204, 113, 0.5);
    color: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

/* PRELOAD CONTENT TRANSITIONS */
.preload-fade-in[b-o2gobkrroc] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.preload-fade-in.loaded[b-o2gobkrroc] {
    opacity: 1;
    transform: translateY(0);
}

.preload-fade-in.instant[b-o2gobkrroc] {
    transition-duration: 0.3s;
}

/* BACKGROUND UPDATE NOTIFICATION */
.background-update-toast[b-o2gobkrroc] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1));
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--glytic-text-secondary);
    z-index: 1000;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    font-size: 0.85rem;
    max-width: 280px;
}

.background-update-toast.show[b-o2gobkrroc] {
    opacity: 1;
    transform: translateY(0);
}

.background-update-toast .toast-icon[b-o2gobkrroc] {
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--glytic-primary);
    animation: spin-b-o2gobkrroc 1s linear infinite;
}

@keyframes spin-b-o2gobkrroc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --------- EXAM CARDS — REDESIGNED (no expand/collapse) --------- */

.exam-card[b-o2gobkrroc] {
    position: relative;
    border-radius: 0;
    /* Composed Strike: cut-corner geometry. clip-path clips box-shadow, so elevation
       is carried by border-color + background shift on hover, never a shadow. */
    clip-path: var(--qf-clip-card);
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
    isolation: isolate;
    /* Bevel-border reveal (QA5-2): the outer FILL is the border color and the ::before
       surface is inset 1px, so the border shows as a 1px hairline on ALL edges INCLUDING
       the two cut corners. A real CSS border only paints the 4 straight edges and the
       clip-path shears it off the bevel, leaving it unable to highlight on hover. Hover
       recolors this outer fill so the whole outline (bevel included) lights up. */
    background: var(--qf-line);
    border: 0;
    display: flex;
    flex-direction: column;
    outline: none;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    margin: 0 0 1.5rem;
    /* Height floor (kept low) so hydration / font-swap / skeleton->real swap don't grow
       grid rows (CLS). The grid stretches cards to the row max (align-items: stretch) and
       .card-body-inner grows + distributes (space-between) to absorb any surplus, so the
       floor never shows as a mid-card void. 390px previously over-reserved ~120px above
       typical content, which pooled as a gap between the description and the button. */
    min-height: 300px;
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

/* clip-path clips outward outlines (invisible) -- inset the ring so it stays in the card. */
.exam-card:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* ---------- SKELETON LOADING CARDS ---------- */
.skeleton-card[b-o2gobkrroc] {
    pointer-events: none;
    /* Match the real card floor so swapping skeleton -> real doesn't shift the grid. */
    min-height: 300px;
}
.skeleton-card .card-body-inner[b-o2gobkrroc] {
    gap: 0.75rem;
}
.skeleton-pill[b-o2gobkrroc] {
    display: inline-block;
    width: 60px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    animation: skeleton-shimmer-b-o2gobkrroc 1.8s ease-in-out infinite;
}
.skeleton-pill-sm[b-o2gobkrroc] {
    width: 40px;
}
.skeleton-title[b-o2gobkrroc] {
    height: 22px;
    width: 80%;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    animation: skeleton-shimmer-b-o2gobkrroc 1.8s ease-in-out infinite;
    animation-delay: 0.1s;
}
.skeleton-desc[b-o2gobkrroc] {
    height: 14px;
    width: 100%;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    animation: skeleton-shimmer-b-o2gobkrroc 1.8s ease-in-out infinite;
    animation-delay: 0.2s;
}
.skeleton-desc-short[b-o2gobkrroc] {
    width: 60%;
}
.skeleton-chip[b-o2gobkrroc] {
    display: inline-block;
    width: 70px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255,255,255,0.05);
    animation: skeleton-shimmer-b-o2gobkrroc 1.8s ease-in-out infinite;
    animation-delay: 0.3s;
}
.skeleton-btn[b-o2gobkrroc] {
    height: 42px;
    flex: 1;
    border-radius: 14px;
    background: rgba(200,104,40,0.12);
    animation: skeleton-shimmer-b-o2gobkrroc 1.8s ease-in-out infinite;
    animation-delay: 0.4s;
}
@keyframes skeleton-shimmer-b-o2gobkrroc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Surface layer, inset 1px so the outer fill (border color) reveals as a 1px hairline on
   every edge incl. the cut corners. Card content carries its own z-index (>=1) so it paints
   above this positioned pseudo. */
.exam-card[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    transition: background 0.2s ease;
    pointer-events: none;
    z-index: 0;
}

/* Ambient glow -- above the surface, below the content. */
.exam-card[b-o2gobkrroc]::after {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background:
        radial-gradient(ellipse at 25% 0%, rgba(var(--glytic-primary-rgb),0.07), transparent 65%),
        radial-gradient(ellipse at 80% 100%, rgba(74,144,232,0.05), transparent 55%);
    opacity: 0.6;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Hover: recolor the bevel-following fill to teal (whole outline incl. cut corners lights
   up) plus a subtle surface lift. No translateY/shadow -- clip-path would clip a shadow. */
.exam-card:hover[b-o2gobkrroc] {
    background: var(--glytic-primary);
}
.exam-card:hover[b-o2gobkrroc]::before { background: var(--glytic-bg-light); }
.exam-card:hover[b-o2gobkrroc]::after { opacity: 1; }

/* PREVENT HOVER EFFECTS ON TOUCH DEVICES */
@media (hover: none) and (pointer: coarse) {
    .exam-card:hover[b-o2gobkrroc] { background: var(--qf-line); }
    .exam-card:hover[b-o2gobkrroc]::before { background: var(--glytic-bg-medium); }
    .exam-card:hover[b-o2gobkrroc]::after { opacity: 0.6; }
}

/* ===== CARD BODY ===== */
.exam-card .card-body-inner[b-o2gobkrroc] {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.15rem 0.4rem;
    /* Fill the card, but keep the content top-aligned: with space-between, a card that
       lacks the career strip (or wraps to one title line) spread its surplus height across
       the body, so its title and description floated down out of line with the row
       (owner report 2026-09-26: "title starts on line 2"). Titles now sit on the same
       baseline across a row; any surplus pools above the pinned action row instead. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
}

/* The merged "create your own" promo card carries far less intrinsic content than a real
   exam card (no salary box, no chips, no rating row). Under the shared space-between rule the
   min-height floor / row-equalization surplus pooled as a 53-94px title->description void
   (QA4-2). Top-stack its content and let the flex:1 inner fill downward so the CTA row stays
   pinned to the card bottom, with a hard margin-top:auto guard on the action row.
   Result: tight title->desc, CTA anchored bottom, height unchanged. */
.exam-card.create-your-own-card .card-body-inner[b-o2gobkrroc] {
    justify-content: flex-start;
}
/* This card's surface is the ember-tinted one above, not the steel of its neighbours, so the
   shared .exam-card .card-desc alpha of 0.6 measured 4.35:1 here on Test on 2026-09-05
   (bundle-2 task 5) where it clears 4.5:1 on every other card. The bump is scoped to this card
   so the rest of the grid keeps the alpha it was designed with. */
.exam-card.create-your-own-card .card-desc[b-o2gobkrroc] {
    color: rgba(255, 255, 255, 0.75);
}
.exam-card.create-your-own-card .card-actions[b-o2gobkrroc] {
    margin-top: auto;
}

/* -- Top row: vendor pill + question count -- */
.exam-card .card-meta-row[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.exam-card .vendor-pill[b-o2gobkrroc] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.16em;
    padding: 0.1rem 0;
    border-radius: 0;
    background: transparent;
    color: var(--glytic-primary);
    border: none;
    white-space: nowrap;
    /* Long body names (e.g. "American Board of Internal Medicine") would blow out
       the row; cap and ellipsis them. Full name available via the title tooltip. */
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exam-card .question-count[b-o2gobkrroc] {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.exam-card .question-count .dot[b-o2gobkrroc] {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(var(--glytic-primary-rgb),0.5);
    display: inline-block;
}

/* -- Title -- */
/* Crawlable title link wrapping the card title (real <a href="/tests/..."> for the SSR link
   graph). Keeps the title's visual: no underline, inherits color, block layout. */
.exam-card .card-title-link[b-o2gobkrroc] {
    text-decoration: none;
    color: inherit;
    display: block;
    /* Tap-target sweep (epic X5, informational on tap-targets.mjs): the rendered link is as
       short as one text line (~18px) when a title doesn't wrap, well under the project's
       44px rule. Forcing min-height:44px here would add up to 26px per card and make card
       heights vary with title length across the whole catalog grid (hundreds of cards) --
       a visual-density regression the plan's own "or adequate spacing" alternative exists
       to avoid. This padding is a fixed, uniform increase to the tappable area instead,
       plus the existing 0.4rem margin-top on .card-career-strip below keeps >=24px of
       separation from the next target (WCAG 2.5.8 spacing exception). Full 44px remains a
       follow-up if a reviewer wants it. */
    padding: 4px 0;
}
.exam-card .card-title-link:hover .card-title[b-o2gobkrroc],
.exam-card .card-title-link:focus-visible .card-title[b-o2gobkrroc] {
    color: var(--glytic-primary);
}
.exam-card .card-title[b-o2gobkrroc] {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0;
    font-family: var(--glytic-font-heading);
    /* Clamp to exactly 2 lines and reserve that height so a 1->2 line rewrap on
       hydration / web-font swap cannot grow the card (CLS). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em; /* 2 lines x 1.35 line-height */
}
/* Display titles over 40 characters (ExamCardTitle.IsLong) step down one size so more of the
   distinguishing tail fits inside the same 2-line clamp; the clamp and the reserved height are
   inherited unchanged. The <=768px and <=480px blocks below set their own !important sizes for
   every .card-title, so phones keep one size for long and short titles alike. */
.exam-card .card-title--long[b-o2gobkrroc] {
    font-size: 0.95rem;
    /* Same absolute reservation as the 1.05rem title (2.7em x 1.05rem) so descriptions still
       align across a row of mixed long and short titles; the <=600px block resets it to auto. */
    min-height: 2.835rem;
}
/* -- Description teaser (always visible, 2-line clamp) -- */
.exam-card .card-desc[b-o2gobkrroc] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    /* Reserve 2 lines so a short/empty description still holds the same height. */
    min-height: 3em; /* 2 lines x 1.5 line-height */
}

/* -- Category chips (single row, overflow hidden) -- */
.exam-card .card-categories[b-o2gobkrroc] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow: hidden;
}
.exam-card .cat-chip[b-o2gobkrroc] {
    font-size: 0.64rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--qf-line);
    color: var(--glytic-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.exam-card .cat-chip-more[b-o2gobkrroc] {
    flex-shrink: 0;
    background: transparent;
    border-color: var(--qf-line);
    color: var(--glytic-text-muted);
}

/* -- Rating row (always visible, acts as spacer to pin actions to bottom) -- */
.exam-card .card-rating[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    min-height: 1.5rem;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    transition: background 0.2s ease;
}
.exam-card .card-rating:hover[b-o2gobkrroc] {
    background: rgba(255, 193, 7, 0.1);
}
.exam-card .rating-text[b-o2gobkrroc] {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ===== ACTION FOOTER — Always visible ===== */
.exam-card .card-actions[b-o2gobkrroc] {
    position: relative;
    z-index: 2;
    /* .card-body-inner fills + distributes, so the action row already sits at the bottom. */
    padding: 0.7rem 1.15rem 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* --------- GHOST CARD - TWITTER FEED COMPATIBLE --------- */
.ghost-card-new[b-o2gobkrroc] { 
    position: relative; 
    border-radius: 24px; 
    display: block; /* masonry: block-level */
    width: auto; /* take column width */
    min-height: auto !important; /* override global min-height to allow equalization */
    background: linear-gradient(145deg, rgba(var(--glytic-primary-rgb),0.08), rgba(74,144,232,0.08)); 
    border: 1px dashed rgba(var(--glytic-primary-rgb),0.4); 
    /* TWITTER FEED: Auto height */
    min-height: auto; 
    padding: 1.25rem 1.25rem 0.5rem;
    cursor: pointer; 
    transition: all 0.4s ease; 
    overflow: hidden; 
    break-inside: avoid-column; /* masonry */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    margin: 0 0 1.75rem; /* spacing */
    max-width: unset;
 }

.ghost-card-new:hover[b-o2gobkrroc] { 
    border-color: rgba(var(--glytic-primary-rgb),0.7); 
    box-shadow: 0 12px 32px -10px rgba(var(--glytic-primary-rgb),0.35); 
    transform: translateY(-4px); 
}

.ghost-card-new .ghost-collapsed-new[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    gap: 0.75rem; 
    flex: 1; 
    padding: 1rem 0 0.25rem; 
}

.ghost-card-new .ghost-icon-new[b-o2gobkrroc] { 
    display: none; /* remove plus/lock visuals in auth state */
}

.ghost-card-new .ghost-expanded[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
    flex: 1; 
}

.ghost-card-new .ghost-header-new[b-o2gobkrroc] { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
}

.ghost-card-new .close-btn-new[b-o2gobkrroc] { 
    align-self: flex-start; 
}

.ghost-card-new .recommended-section-new[b-o2gobkrroc] { 
    background: rgba(var(--glytic-primary-rgb),0.05); 
    border: 1px solid rgba(var(--glytic-primary-rgb),0.2); 
    border-radius: 12px; 
    padding: 0.75rem; 
}

.ghost-card-new .recommended-grid[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    margin-top: 0.5rem; 
}

.ghost-card-new .recommended-item-new[b-o2gobkrroc] { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    padding: 0.4rem 0.6rem; 
    background: rgba(var(--glytic-primary-rgb),0.07); 
    border: 1px solid rgba(var(--glytic-primary-rgb),0.15); 
    border-radius: 8px; 
    font-size: 0.8rem; 
    transition: all 0.25s ease; 
    cursor: pointer; 
}

.ghost-card-new .recommended-item-new:hover[b-o2gobkrroc] { 
    background: rgba(var(--glytic-primary-rgb),0.15); 
    border-color: rgba(var(--glytic-primary-rgb),0.3); 
    transform: translateY(-2px); 
}

.ghost-card-new .custom-form-new[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

.ghost-card-new .form-grid[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

.ghost-card-new .slider-group-new[b-o2gobkrroc] { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
}

.ghost-card-new .form-actions-new[b-o2gobkrroc] { 
    margin-top: 0.25rem; 
}

.exam-card:focus[b-o2gobkrroc], .ghost-card-new:focus[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* --------- PAGINATION --------- */
.pagination-new[b-o2gobkrroc] { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 2.5rem; 
    padding: 3rem 0 2rem; 
    margin-top: 2rem; 
}

.page-btn-new[b-o2gobkrroc] { 
    color: rgba(255,255,255,0.7) !important; 
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important; 
    border-radius: 12px !important; 
    padding: 0.75rem 1.5rem !important; 
    font-weight: 600 !important; 
    font-size: 0.95rem !important; 
    background: rgba(var(--glytic-primary-rgb),0.05) !important; 
    border: 1px solid rgba(var(--glytic-primary-rgb),0.15) !important; 
    backdrop-filter: blur(8px) !important; 
    text-transform: none !important; 
}

.page-btn-new:not(:disabled):hover[b-o2gobkrroc] { 
    color: var(--glytic-primary) !important; 
    background: rgba(var(--glytic-primary-rgb),0.15) !important; 
    border-color: rgba(var(--glytic-primary-rgb),0.4) !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 24px -6px rgba(var(--glytic-primary-rgb),0.3) !important; 
}

.page-btn-new:disabled[b-o2gobkrroc] { 
    color: rgba(255,255,255,0.3) !important; 
    background: rgba(255,255,255,0.02) !important; 
    border-color: rgba(255,255,255,0.08) !important; 
    cursor: not-allowed !important; 
    transform: none !important; 
}

.page-info-new[b-o2gobkrroc] { 
    font-size: 1rem; 
    color: rgba(255,255,255,0.8); 
    font-weight: 500; 
    font-family: var(--glytic-font-heading); 
    text-align: center; 
    padding: 1rem 1.5rem; 
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb),0.06), rgba(74,144,232,0.04)); 
    border: 1px solid rgba(var(--glytic-primary-rgb),0.15); 
    border-radius: 12px; 
    backdrop-filter: blur(8px); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}


/* --------- RESPONSIVE --------- */
@media (max-width: 768px) { 
    .ghost-card-new[b-o2gobkrroc] {
        min-height: auto;
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) { 
    .exam-card[b-o2gobkrroc], .ghost-card-new[b-o2gobkrroc] { 
        animation: none !important; 
        transition: none !important; 
    } 

    .exam-card:hover[b-o2gobkrroc], .ghost-card-new:hover[b-o2gobkrroc] { 
        transform: none !important; 
    } 
}

/* Search bar layout */
.search-bar-new[b-o2gobkrroc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: stretch;
}

/* Input sizing — ::deep required to reach MudBlazor internals */
[b-o2gobkrroc] .search-input-new .mud-input-root {
    min-height: 44px;
    border-radius: 0;
    background: rgba(26, 34, 48, 0.6);
    backdrop-filter: blur(12px);
}

[b-o2gobkrroc] .search-input-new .mud-input-root .mud-input {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.85rem;
    color: var(--glytic-text-primary);
}

[b-o2gobkrroc] .search-input-new .mud-input-control {
    border-radius: 0;
}

/* Right padding so text doesn't go behind AI + clear buttons */
[b-o2gobkrroc] .search-input-wrapper .search-input-new .mud-input-root {
    padding-right: 72px;
}

/* Outlined variant border color override */
[b-o2gobkrroc] .search-input-new .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--glytic-border);
}

[b-o2gobkrroc] .search-input-new .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--glytic-border-hover);
}

[b-o2gobkrroc] .search-input-new .mud-input-outlined.mud-input-root-focused .mud-input-outlined-border {
    border-color: var(--glytic-primary);
    border-width: 1px;
}

/* Keyboard focus: an explicit 2px teal ring on the native input (WCAG 2.4.7). The field is
   squared (radius 0) but not clipped, so an inset ring reads clearly inside the control. */
[b-o2gobkrroc] .search-input-new input:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

/* Search adornment icon color */
[b-o2gobkrroc] .search-input-new .mud-input-adornment .mud-icon-root {
    color: var(--glytic-text-muted);
}

[b-o2gobkrroc] .search-input-new .mud-input-root-focused .mud-input-adornment .mud-icon-root {
    color: var(--glytic-primary);
}

/* Placeholder */
[b-o2gobkrroc] .search-input-new .mud-input::placeholder {
    color: var(--glytic-text-muted);
}

/* The start adornment is a plain search icon, not a real action button. MudBlazor 7.7 still
   renders an adornment icon inside a .mud-icon-button wrapper, and MudBlazor's own base CSS
   gives that wrapper an opaque background-color: var(--mud-palette-surface) (MudBlazor.min.css,
   the density-scoped ".mud-icon-button{z-index:1;padding:8px;margin:6px;background-color:...}"
   rule). That solid surface color composited as a lighter square inside the blurred, translucent
   search field (audit 2026-09-02 section 1, d-exams.png x=360-405). Flatten it so the field
   reads as one plane. Diagnosed from the shipped MudBlazor.min.css and this component's own
   ::deep rules (no running dev server / browser session was available in this session to take
   a live measurement per the plan's Step 1 -- confirm with a screenshot before/after on Test). */
[b-o2gobkrroc] .search-input-new .mud-input-adornment {
    background: transparent;
    box-shadow: none;
    border: 0;
}

[b-o2gobkrroc] .search-input-new .mud-input-adornment .mud-icon-button,
[b-o2gobkrroc] .search-input-new .mud-input-adornment .mud-icon-button:hover {
    background: transparent;
    box-shadow: none;
}

/* Wrapper to position AI button inside input */
.search-input-wrapper[b-o2gobkrroc] {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* AI button — fills the right edge of the input like the search icon fills the left.
   Radius stays 0 (flush docking to the input edge is layout, not the button role look). */
[b-o2gobkrroc] .ai-search-btn-inset {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    min-width: 52px;
    height: auto;
    border-radius: 0;
    font-family: var(--glytic-font-body);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0;
    /* Primary CTA recipe: ember gradient fill, ink label. */
    background: var(--forge-gradient-btn);
    border: none;
    color: var(--qf-ink);
    transition: background-color .15s ease;
}

[b-o2gobkrroc] .ai-search-btn-inset:hover:not(:disabled) {
    background: var(--forge-gradient);
}

[b-o2gobkrroc] .ai-search-btn-inset:disabled {
    opacity: 0.35;
}

/* "Create" is wider than the old "AI" label -- give the inset create button room for the text. */
[b-o2gobkrroc] .ai-create-btn {
    min-width: 76px;
}

/* Clear button -- sits near the right edge normally; shifts left of the Create button when a
   no-results search surfaces it (the wrapper gets .has-create). Icon button recipe colors;
   footprint stays compact to fit inside the input row. */
[b-o2gobkrroc] .search-clear-btn-inset {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    width: 22px;
    height: 22px;
    transition: background-color .15s ease, color .15s ease;
}

.search-input-wrapper.has-create[b-o2gobkrroc]  .search-clear-btn-inset {
    right: 84px;
}

[b-o2gobkrroc] .search-clear-btn-inset:hover {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), .1);
}

/* --------- SEARCH INPUT FULL-WIDTH --------- */

.search-input-new[b-o2gobkrroc] {
    width: 100%;
}

/* (Live-search suggestions dropdown removed -- the inset AI button now surfaces a no-results
   "Create a community exam" action instead of a suggestions list.) */

/* QUIZ SECTION - CENTERING */
.quiz-section-new[b-o2gobkrroc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 1rem 1.5rem;
    position: relative;
    z-index: 1;
    /* Offset for sticky search bar (app bar ~64px + search/filter/tab bar ~140px) */
    scroll-margin-top: 210px;
}

@media (max-width: 600px) {
    .quiz-section-new[b-o2gobkrroc] {
        /* Offset for mobile: app bar ~56px + condensed search bar ~140px */
        scroll-margin-top: 200px;
    }
}

/* CSS Grid layout for uniform rows */
.quiz-grid-new[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 120ms ease-out;
}

.quiz-grid-new.grid-fading[b-o2gobkrroc] {
    opacity: 0;
    transition: opacity 100ms ease-in;
}

/* Responsive column behaviors */
@media (max-width: 599px) {
    .quiz-grid-new[b-o2gobkrroc] { grid-template-columns: 1fr; gap: 1rem; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .quiz-grid-new[b-o2gobkrroc] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .quiz-grid-new[b-o2gobkrroc] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .quiz-grid-new[b-o2gobkrroc] { grid-template-columns: repeat(4, 1fr); }
}

/* Cards stretch to fill row height — uniform rows */
.quiz-grid-new[b-o2gobkrroc] { align-items: stretch; }
/* Inactive ghost card styling */
.ghost-card-new.inactive[b-o2gobkrroc] { cursor: default; opacity: 0.8; border-style: solid; }
.ghost-card-new.inactive:hover[b-o2gobkrroc] { transform:none; box-shadow:none; }

/* Raise interactive content above overlay (ghost card + other pages) */
.ghost-card-new[b-o2gobkrroc], .question-card[b-o2gobkrroc], .completion-card[b-o2gobkrroc], .controls-card[b-o2gobkrroc] {
  position: relative;
}
.ghost-card-new > *[b-o2gobkrroc],
.controls-card .mud-card-content[b-o2gobkrroc],
.question-card .mud-card-content[b-o2gobkrroc],
.completion-card .mud-card-content[b-o2gobkrroc] {
  position: relative;
  z-index: 1;
}

/* Adjust ghost card styling */
.ghost-card-new[b-o2gobkrroc] {
  padding: 1.25rem 1.25rem 0.5rem;
  border-style: solid;
}
.ghost-card-new .ghost-collapsed-new[b-o2gobkrroc] { padding: 1rem 0 0.25rem; }
.ghost-card-new .ghost-icon-new[b-o2gobkrroc] { display: none; }

/* Keep grid flow consistent */
.ghost-card-new[b-o2gobkrroc] { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* Inactive ghost card still shows icon */
.ghost-card-new.inactive .ghost-icon-new[b-o2gobkrroc] { display: block; }

/* CENTER GHOST CARD when it's the only visible card (no search results) */
.quiz-grid-new.ghost-only-centered[b-o2gobkrroc] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    column-count: 1 !important; /* Override masonry columns */
}

.quiz-grid-new.ghost-only-centered .ghost-card-enhanced[b-o2gobkrroc] {
    max-width: 600px;
    width: 100%;
    margin: 2rem auto;
}

@media (max-width: 768px) {
    .quiz-grid-new.ghost-only-centered .ghost-card-enhanced[b-o2gobkrroc] {
        max-width: 100%;
        margin: 1rem;
    }
}

/* Remove dashed look on hover difference */
.ghost-card-new:hover[b-o2gobkrroc] { transform: translateY(-4px); box-shadow: 0 12px 32px -10px rgba(var(--glytic-primary-rgb),0.35); }

/* --------- ENHANCED GHOST CARD STYLES --------- */
.ghost-card-enhanced[b-o2gobkrroc] {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state for ghost card */
.ghost-card-enhanced.loading-card[b-o2gobkrroc] {
    background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(129,199,132,0.08)) !important;
    backdrop-filter: blur(10px);
    border-color: rgba(76,175,80,0.4) !important;
}

.loading-overlay[b-o2gobkrroc] {
    background: linear-gradient(135deg, rgba(76,175,80,0.05), rgba(129,199,132,0.03));
    animation: loading-pulse-b-o2gobkrroc 2s ease-in-out infinite;
}

.loading-state-overlay[b-o2gobkrroc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: rgba(76,175,80,0.9);
}

@keyframes loading-pulse-b-o2gobkrroc {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =========================================================
   MOBILE UX FIXES - 2026-02-07
   Addresses MOBILE-001 pain points
   ========================================================= */

/* ISSUE 3: Exam Cards - Tighter padding on mobile */
@media (max-width: 768px) {
    .exam-card[b-o2gobkrroc] {
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    .exam-card .card-body-inner[b-o2gobkrroc] {
        padding: 1.15rem 1rem 0.4rem !important;
        gap: 0.5rem !important;
    }

    .exam-card .card-title[b-o2gobkrroc] {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    .exam-card .card-actions[b-o2gobkrroc] {
        padding: 0.65rem 1rem 1rem !important;
    }

    .card-actions[b-o2gobkrroc]  .btn-start.mud-button-root {
        font-size: 0.78rem !important;
        padding: 0.6rem 1rem !important;
        min-height: 48px !important;
        white-space: nowrap;
    }

    .card-actions[b-o2gobkrroc]  .btn-details.mud-icon-button-root {
        min-width: 48px;
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .exam-card .card-body-inner[b-o2gobkrroc] {
        padding: 1rem 0.85rem 0.35rem !important;
    }

    .exam-card .card-title[b-o2gobkrroc] {
        font-size: 0.9rem !important;
    }

    .exam-card .card-desc[b-o2gobkrroc] {
        font-size: 0.75rem !important;
    }

    /* NOTE: intentionally no `flex-direction: column` / `width: 100%` here.
       Stacking pushed the details icon onto its own line; the action row now
       stays horizontal at all widths (Start button flexes, icon stays inline). */
}

/* ISSUE 8: Search dropdown touch targets */
@media (max-width: 768px) {
    .ghost-card-new[b-o2gobkrroc],
    .ghost-card-enhanced[b-o2gobkrroc] {
        padding: 0.75rem !important;
        border-radius: 16px !important;
    }
    
    .ghost-card-enhanced .card-details-expanded[b-o2gobkrroc] {
        padding: 0 0.5rem 0.5rem !important;
    }
}

/* Search bar compact on mobile */
@media (max-width: 480px) {
    [b-o2gobkrroc] .search-input-new .mud-input-root {
        min-height: 40px;
    }

    [b-o2gobkrroc] .search-input-new .mud-input-root .mud-input {
        font-size: 0.82rem;
    }

    [b-o2gobkrroc] .ai-search-btn-inset {
        min-width: 40px;
        font-size: 0.68rem;
    }

    [b-o2gobkrroc] .search-clear-btn-inset {
        right: 44px;
        width: 28px;
        height: 28px;
    }

    [b-o2gobkrroc] .search-input-wrapper .search-input-new .mud-input-root {
        padding-right: 64px;
    }
}


/* Seamless expansion panel */
.ghost-expansion-panel .mud-expansion-panels[b-o2gobkrroc] {
    background: transparent !important;
    box-shadow: none !important;
}

.ghost-expansion-panel .mud-expand-panel[b-o2gobkrroc] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.ghost-expansion-panel .mud-expand-panel-header[b-o2gobkrroc] {
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
}

.ghost-expansion-panel .mud-expand-panel-content[b-o2gobkrroc] {
    padding: 0 !important;
    background: transparent !important;
}

/* Ghost card title styling */
.ghost-card-title[b-o2gobkrroc] {
    color: var(--glytic-primary) !important;
    font-weight: 600 !important;
    font-family: var(--glytic-font-heading) !important;
}

/* Enhanced expanded content */
.ghost-expanded-content[b-o2gobkrroc] {
    padding: 1.5rem 1rem 0;
    animation: ghost-expand-b-o2gobkrroc 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ghost-expand-b-o2gobkrroc {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Recommended section enhancements */
.recommended-section-enhanced[b-o2gobkrroc] {
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb),0.05), rgba(74,144,232,0.03));
    border: 1px solid rgba(var(--glytic-primary-rgb),0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.recommended-section-enhanced .section-header[b-o2gobkrroc] {
    color: var(--glytic-primary) !important;
    margin-bottom: 1rem !important;
    font-family: var(--glytic-font-heading) !important;
}

.recommended-list .mud-list-item[b-o2gobkrroc] {
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    background: rgba(var(--glytic-primary-rgb),0.02) !important;
    border: 1px solid rgba(var(--glytic-primary-rgb),0.1) !important;
    transition: all 0.3s ease !important;
}

.recommended-list .mud-list-item:hover[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb),0.08) !important;
    border-color: rgba(var(--glytic-primary-rgb),0.3) !important;
    /* Composed Strike: border + background shift only, no translate lift (QA5-3). */
}

[b-o2gobkrroc] .recommended-item-enhanced {
    cursor: pointer;
    border-radius: var(--qf-btn-radius);
    transition: background-color .15s ease;
}

[b-o2gobkrroc] .recommended-item-enhanced:hover {
    background: rgba(var(--glytic-primary-rgb), .08);
}

[b-o2gobkrroc] .recommended-item-enhanced:focus-within {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

[b-o2gobkrroc] .recommended-item-enhanced .mud-link {
    color: var(--glytic-text-primary);
    text-decoration: none;
    font-weight: 500;
}

/* Custom form enhancements */
.custom-form-enhanced[b-o2gobkrroc] {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(74,144,232,0.05), rgba(var(--glytic-primary-rgb),0.03));
    border: 1px solid rgba(74,144,232,0.2);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.custom-form-enhanced .section-header[b-o2gobkrroc] {
    color: var(--glytic-primary) !important;
    margin-bottom: 1rem !important;
    font-family: var(--glytic-font-heading) !important;
}

/* Primary CTA recipe (was a teal fill with white text, the exact pattern the recipe forbids). */
[b-o2gobkrroc] .create-quiz-button.mud-button-root {
    margin-top: 1rem;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

[b-o2gobkrroc] .create-quiz-button.mud-button-root:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

[b-o2gobkrroc] .create-quiz-button.mud-button-root:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ghost-expanded-content[b-o2gobkrroc] {
        padding: 1rem 0.5rem 0;
    }
    
    .recommended-section-enhanced[b-o2gobkrroc],
    .custom-form-enhanced[b-o2gobkrroc] {
        padding: 0.75rem;
    }
    
    .ghost-card-title[b-o2gobkrroc] {
        font-size: 1rem !important;
    }
}

/* MOBILE-002: Full-width search + hide search history */
@media (max-width: 768px) {
    .search-bar-new[b-o2gobkrroc] {
        max-width: 100% !important;
    }

    .search-container-new[b-o2gobkrroc] {
        padding: 0 !important;
    }

    .search-history-ticker[b-o2gobkrroc] {
        display: none !important;
    }
}

/* =========================================================
   BRAND-001: Credibility Bar, CTA, Feature Icons, Vendor Pills
   ========================================================= */

/* ----- Credibility Stats Bar ----- */
.credibility-bar[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 auto 1.5rem;
    padding: 1rem 2rem;
    max-width: 600px;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.cred-stat[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.cred-number[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--glytic-primary, var(--glytic-primary));
    line-height: 1.1;
}

.cred-label[b-o2gobkrroc] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    text-transform: none;
    letter-spacing: 0.5px;
}

.cred-divider[b-o2gobkrroc] {
    width: 1px;
    height: 36px;
    background: rgba(var(--glytic-primary-rgb), 0.2);
    flex-shrink: 0;
}

/* Mobile: stack credibility bar */
@media (max-width: 768px) {
    .credibility-bar[b-o2gobkrroc] {
        display: none !important; /* Hidden on mobile per existing hero mobile behavior */
    }
}

/* NOTE: .hero-cta-row styles now live in the hero section block below (lines ~1806+).
   Old duplicate removed 2026-02-20. */

/* ----- Vendor Pill on Quiz Cards ----- */
.vendor-pill[b-o2gobkrroc] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: none;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    color: var(--glytic-primary, var(--glytic-primary));
    line-height: 1.3;
}

/* Mobile vendor pill */
@media (max-width: 768px) {
    .vendor-pill[b-o2gobkrroc] {
        font-size: 0.6rem;
        padding: 0.15rem 0.5rem;
    }
}

/* =========================================================
   HOMEPAGE-001: Tabbed Interface, Vendor Chips, How It Works
   ========================================================= */

/* ----- Community CTA Banner ----- */
.community-cta-banner[b-o2gobkrroc] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.04));
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.community-cta-banner.expanded[b-o2gobkrroc] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
    box-shadow: 0 8px 32px -8px rgba(var(--glytic-primary-rgb), 0.2);
}

.cta-banner-content[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cta-banner-text h3[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem;
}

.cta-banner-text p[b-o2gobkrroc] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ----- Community Sort Row ----- */
.community-sort-row[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.sort-label[b-o2gobkrroc] {
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: none;
    color: var(--glytic-text-muted);
    white-space: nowrap;
}

/* Sort chips: the filter-chip recipe (pill, hairline; selected = teal tint + teal border).
   44px tap target kept (MudBlazor's small chip measured 24px tall). */
.community-sort-row[b-o2gobkrroc]  .mud-chip {
    border-radius: 999px;
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0.15rem;
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-text {
    background: transparent;
    color: var(--glytic-text-secondary);
    border: 1px solid var(--qf-line);
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-text:hover {
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    color: var(--glytic-text-primary);
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-filled {
    background: rgba(var(--glytic-primary-rgb), 0.14);
    color: var(--glytic-text-primary);
    border: 1px solid var(--glytic-primary);
}


/* clip-path clips outward outlines -- inset ring keeps keyboard focus visible on the cut chip.
   !important to beat MudBlazor's own chip focus styling, matching the ::deep overrides above. */
.community-sort-row[b-o2gobkrroc]  .mud-chip:focus-visible {
    outline: 2px solid var(--glytic-primary) !important;
    outline-offset: -4px;
}

/* ----- Community Exam Card Variant ----- */
/* Community banks read as a quiet crimson-keyed sibling of the official cards
   (was Color.Secondary purple). Hover stays border+background only, no shadow. */
.exam-card.community-exam[b-o2gobkrroc] {
    background: rgba(var(--qf-crimson-rgb), 0.28);
}

.exam-card.community-exam:hover[b-o2gobkrroc] {
    background: var(--qf-crimson);
}

/* ----- Tab Loading ----- */
.tab-loading[b-o2gobkrroc] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    min-height: 200px;
}

/* ----- Empty State ----- */
.empty-state-message[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    min-height: 200px;
}

.empty-state-message p[b-o2gobkrroc] {
    margin: 0;
    font-size: 1rem;
}

/* ----- Pagination Wrapper ----- */
.pagination-wrapper[b-o2gobkrroc] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    margin-top: 1rem;
}

[b-o2gobkrroc] .pagination-wrapper .mud-pagination .mud-pagination-item button {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(var(--glytic-primary-rgb), 0.2);
}

[b-o2gobkrroc] .pagination-wrapper .mud-pagination .mud-pagination-item button.mud-pagination-item-selected {
    background: var(--glytic-primary, var(--glytic-primary)) !important;
    color: #0C1018 !important;
    font-weight: 700;
}

/* ----- Mobile: Tabs ----- */
@media (max-width: 768px) {
    .community-cta-banner[b-o2gobkrroc] {
        padding: 1rem;
    }

    .cta-banner-content[b-o2gobkrroc] {
        flex-direction: column;
        text-align: center;
    }

    .cta-banner-text h3[b-o2gobkrroc] {
        font-size: 1rem;
    }

    .community-sort-row[b-o2gobkrroc] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .pagination-wrapper[b-o2gobkrroc] {
        padding: 1.5rem 0;
    }
}

/* ===== Free User Upgrade Nudge Bar ===== */
.free-nudge-bar[b-o2gobkrroc] {
    position: sticky;
    top: 64px;
    z-index: 1260;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    /* Slim single-line strip: keeps the premium nudge from crowding the page when it
       stacks under the confirm-email banner for unconfirmed free users (atlas J2-P2-b). */
    min-height: 44px;
    padding: 0.4rem 1.5rem;
    background: rgba(var(--glytic-primary-rgb), 0.06);
    border-top: 1px solid rgba(var(--glytic-primary-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.12);
    flex-wrap: wrap;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.free-nudge-copy[b-o2gobkrroc] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.5rem;
    min-width: 0;
}

.free-nudge-title[b-o2gobkrroc] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    white-space: nowrap;
}

.free-nudge-text[b-o2gobkrroc] {
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
    line-height: 1.25;
}

.free-nudge-cta[b-o2gobkrroc] {
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--qf-ink);
    text-decoration: none;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    padding: 0 14px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
    min-height: var(--qf-btn-h-sm);
    display: inline-flex;
    align-items: center;
}

.free-nudge-cta:hover[b-o2gobkrroc] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    text-decoration: none;
}

/* On phones keep the nudge to a single slim line (title + CTAs); drop the verbose
   subtext so it does not stack tall beneath the confirm-email banner. */
@media (max-width: 600px) {
    .free-nudge-text[b-o2gobkrroc] {
        display: none;
    }
}

.free-nudge-actions[b-o2gobkrroc] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.free-nudge-cta-secondary[b-o2gobkrroc] {
    background: transparent;
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.free-nudge-cta-secondary:hover[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), .08);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

@media (max-width: 600px) {
    .free-nudge-bar[b-o2gobkrroc] {
        top: 56px;
        gap: 0.5rem;
        min-height: 98px;
        padding: 0.6rem 0.75rem;
        align-items: stretch;
        justify-content: center;
    }

    .free-nudge-copy[b-o2gobkrroc] {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .free-nudge-title[b-o2gobkrroc] {
        font-size: 0.86rem;
        white-space: normal;
    }

    .free-nudge-text[b-o2gobkrroc] {
        width: 100%;
        text-align: center;
        font-size: 0.72rem;
    }

    .free-nudge-actions[b-o2gobkrroc] {
        width: 100%;
        justify-content: center;
    }

    .free-nudge-cta[b-o2gobkrroc] {
        font-size: 0.72rem;
        padding: 0.32rem 0.55rem;
    }
}

/* ===== Premium Context Banner (Back to Dashboard) ===== */
.catalog-context-banner[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    padding: 0.35rem 1rem;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.08);
}

[b-o2gobkrroc] .back-to-dashboard-btn {
    color: var(--glytic-primary) !important;
    text-transform: none !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    opacity: 0.8;
    padding: 0.25rem 0.5rem !important;
}

[b-o2gobkrroc] .back-to-dashboard-btn:hover {
    opacity: 1;
    background: rgba(var(--glytic-primary-rgb), 0.08) !important;
}

/* =========================================================
   HOW IT WORKS SECTION
   ========================================================= */

.how-it-works-section[b-o2gobkrroc] {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1.5rem 3rem;
    text-align: center;
}

.hiw-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    margin-bottom: 2.5rem;
}

.hiw-steps[b-o2gobkrroc] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.hiw-step[b-o2gobkrroc] {
    flex: 1;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hiw-step-num[b-o2gobkrroc] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 2px solid rgba(var(--glytic-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--glytic-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--glytic-primary);
}

.hiw-step-num-accent[b-o2gobkrroc] {
    background: var(--forge-gradient-btn);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px rgba(192, 96, 48, 0.3);
}

.hiw-arrow[b-o2gobkrroc] {
    flex-shrink: 0;
    width: 40px;
    height: 2px;
    background: rgba(var(--glytic-primary-rgb), 0.25);
    margin-top: 24px;
    position: relative;
}

.hiw-arrow[b-o2gobkrroc]::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: rgba(var(--glytic-primary-rgb), 0.4);
}

.hiw-step-title[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0;
}

.hiw-step-desc[b-o2gobkrroc] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 640px) {
    .hiw-steps[b-o2gobkrroc] {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .hiw-arrow[b-o2gobkrroc] {
        width: 2px;
        height: 24px;
        margin-top: 0;
    }

    .hiw-arrow[b-o2gobkrroc]::after {
        right: -4px;
        top: auto;
        bottom: -4px;
        border-left-color: transparent;
        border-top-color: rgba(var(--glytic-primary-rgb), 0.4);
    }
}

/* =========================================================
   AI DIFFERENCE SECTION
   ========================================================= */

.ai-diff-section[b-o2gobkrroc] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 3.5rem;
    text-align: center;
}

.ai-diff-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    margin-bottom: 2rem;
}

.ai-diff-cards[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.ai-diff-card[b-o2gobkrroc] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: left;
    position: relative;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.ai-diff-card:hover[b-o2gobkrroc] {
    border-color: rgba(var(--glytic-primary-rgb), 0.2);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

.ai-diff-card-premium[b-o2gobkrroc] {
    border-color: rgba(var(--glytic-primary-rgb), 0.2);
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* The whole card is an anchor, so quizforge.css's a:hover glow would
       inherit into the title/desc/badge text; suppress it. */
    text-shadow: none;
}

.ai-diff-card-premium:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
}

.ai-diff-premium-badge[b-o2gobkrroc] {
    position: absolute;
    top: -10px;
    right: 1rem;
    background: var(--forge-gradient-btn);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.6rem;
    border-radius: 100px;
}

.ai-diff-card-icon[b-o2gobkrroc] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--glytic-primary);
    margin-bottom: 0.85rem;
}

.ai-diff-card-title[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0 0 0.5rem;
}

.ai-diff-card-desc[b-o2gobkrroc] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 720px) {
    .ai-diff-cards[b-o2gobkrroc] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PLATFORM FACTS SECTION
   ========================================================= */

.platform-facts-section[b-o2gobkrroc] {
    padding: 50px 20px;
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.platform-facts-heading[b-o2gobkrroc] {
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
    margin: 0 0 28px;
}

.platform-facts-grid[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
}

.platform-fact[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.platform-fact-num[b-o2gobkrroc] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
}

.platform-fact-label[b-o2gobkrroc] {
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
}

.platform-facts-link[b-o2gobkrroc] {
    display: inline-block;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--glytic-primary);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .platform-facts-grid[b-o2gobkrroc] {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PRICING SECTION
   ========================================================= */

.pricing-section[b-o2gobkrroc] {
    padding: 60px 20px;
    border-top: 1px solid var(--qf-line);
    text-align: center;
}

.pricing-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    margin: 0 0 8px;
}

.pricing-tagline[b-o2gobkrroc] {
    font-size: 1rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 36px;
}


/* =========================================================
   FAQ SECTION
   ========================================================= */

.faq-section[b-o2gobkrroc] {
    padding: 50px 20px;
    border-top: 1px solid var(--qf-line);
    max-width: 720px;
    margin: 0 auto;
}

.faq-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0 0 24px;
    text-align: center;
}

.faq-answer[b-o2gobkrroc] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--glytic-text-secondary);
    margin: 0;
}

/* Strike language: squared hairline plates with an ember left accent. Drawn with inset
   box-shadow (hairline + 2px ember on the left) so it survives MudBlazor's own border reset;
   no clip-path -- the panel content grows, so it stays a clean bordered plate. */
[b-o2gobkrroc] .faq-panels .mud-expansion-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--qf-line), inset 2px 0 0 0 var(--forge-primary);
    margin-bottom: 8px;
}

[b-o2gobkrroc] .faq-panels .mud-expansion-panel-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    padding: 14px 16px;
}

[b-o2gobkrroc] .faq-panels .mud-expansion-panel-content {
    padding: 0 16px 16px;
}

[b-o2gobkrroc] .faq-panels .mud-expansion-panel::before {
    display: none;
}

/* =========================================================
   FINAL CTA SECTION
   ========================================================= */

.final-cta-section[b-o2gobkrroc] {
    text-align: center;
    padding: 3rem 1.5rem 4rem;
    background: linear-gradient(180deg, transparent 0%, rgba(var(--glytic-primary-rgb), 0.04) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.final-cta-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--glytic-text-primary);
    margin-bottom: 0.85rem;
}

.final-cta-sub[b-o2gobkrroc] {
    font-size: 0.98rem;
    color: var(--glytic-text-secondary);
    margin-bottom: 2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.final-cta-btn[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: var(--qf-btn-radius);
    text-decoration: none;
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    margin-bottom: 1rem;
}

.final-cta-btn:hover[b-o2gobkrroc] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    text-decoration: none;
}

.final-cta-btn:focus-visible[b-o2gobkrroc] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.final-cta-pricing[b-o2gobkrroc] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    margin: 0;
}

/* ===== Free User Nudge Banner ===== */
.premium-nudge-banner[b-o2gobkrroc] {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.nudge-content[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--glytic-card-bg);
    border: 1px solid transparent;
    border-radius: var(--glytic-border-radius-small);
    position: relative;
    overflow: hidden;
}

.nudge-content[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.3), rgba(var(--glytic-primary-rgb), 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.nudge-text[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nudge-text strong[b-o2gobkrroc] {
    color: var(--glytic-text-primary);
    font-size: 0.95rem;
}

.nudge-text span[b-o2gobkrroc] {
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
}

[b-o2gobkrroc] .nudge-cta-btn {
    /* was a teal-purple gradient; flat-teal 2-stop, matches --glytic-gradient-text shape */
    background: var(--glytic-gradient-text) !important;
    color: var(--glytic-bg-dark) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap;
    min-width: 100px;
}

.nudge-actions[b-o2gobkrroc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .catalog-context-banner[b-o2gobkrroc] {
        padding: 0.25rem 0.5rem;
    }

    .nudge-content[b-o2gobkrroc] {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 0.75rem;
    }

    .nudge-text[b-o2gobkrroc] {
        align-items: center;
    }
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero-wrapper[b-o2gobkrroc] {
    background: var(--glytic-bg-dark);
    border-bottom: 1px solid var(--glytic-border);
}

.hero[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 1240px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
}

.hero-left[b-o2gobkrroc] { min-width: 0; }

.hero-badge[b-o2gobkrroc] {
    display: block;
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.qf-root .hero-headline[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--glytic-text-primary);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.hero-accent[b-o2gobkrroc] { color: var(--forge-primary); }

.hero-sub[b-o2gobkrroc] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--glytic-text-secondary);
    margin: 0 0 1.6rem;
    max-width: 35rem;
}

.hero-exam-search[b-o2gobkrroc] { width: 100%; }

.hero-exam-search label[b-o2gobkrroc] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin-bottom: 0.6rem;
}

.hero-search-row[b-o2gobkrroc] {
    display: flex;
    gap: 0.5rem;
}

.hero-search-row input[b-o2gobkrroc] {
    min-width: 0;
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
    background: var(--glytic-bg-medium);
    color: var(--glytic-text-primary);
    font: inherit;
    font-size: 1rem;
}

.hero-search-row input[b-o2gobkrroc]::placeholder { color: var(--glytic-text-muted); }

.hero-btn-primary[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: var(--qf-btn-h-lg);
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    padding: 0 22px;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hero-btn-primary:hover[b-o2gobkrroc] { background: var(--forge-gradient); color: var(--qf-ink); }

.hero-popular-searches[b-o2gobkrroc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.4rem 0 0.7rem;
}

.hero-popular-searches a[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.85rem;
    color: var(--glytic-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-free-offer[b-o2gobkrroc] {
    max-width: 35rem;
    color: var(--glytic-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.hero-free-offer a[b-o2gobkrroc] { color: var(--glytic-text-secondary); text-decoration: underline; }

.hero-sample-link[b-o2gobkrroc] {
    display: none;
    width: fit-content;
    margin-top: 1rem;
    color: var(--glytic-primary);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-right[b-o2gobkrroc] {
    min-width: 0;
    scroll-margin-top: 90px;
}

.hero-search-row input:focus-visible[b-o2gobkrroc],
.hero-btn-primary:focus-visible[b-o2gobkrroc],
.hero-popular-searches a:focus-visible[b-o2gobkrroc],
.hero-free-offer a:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 3px;
}

.hero-sample-link:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .hero-sample-link[b-o2gobkrroc] { display: inline-flex; }
    .hero[b-o2gobkrroc] {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
        max-width: 680px;
    }

    .hero-right[b-o2gobkrroc] { display: block; }
}

@media (max-width: 480px) {
    .hero[b-o2gobkrroc] { padding: 1.5rem 1.1rem 2rem; }
    .qf-root .hero-headline[b-o2gobkrroc] { font-size: 2.15rem; }
    .hero-sub[b-o2gobkrroc] { font-size: 0.95rem; margin-bottom: 1.25rem; }
    .hero-search-row[b-o2gobkrroc] { flex-direction: column; }
    .hero-btn-primary[b-o2gobkrroc] { width: 100%; }
    .hero-badge[b-o2gobkrroc] { font-size: 0.8rem; margin-bottom: 0.75rem; }
}

/* =========================================================
   Show More section (replaces MudPagination)
   ========================================================= */
.show-more-section[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0 0.5rem;
}

.show-more-count[b-o2gobkrroc] {
    font-size: 0.8rem;
    color: var(--glytic-text-secondary, #a0aec0);
    margin: 0;
}

.show-more-section[b-o2gobkrroc]  .show-more-btn.mud-button-root {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    border-radius: var(--qf-btn-radius);
    padding: 0 18px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 43px, 1px short. */
    min-height: var(--qf-btn-h-md);
}

.show-more-section[b-o2gobkrroc]  .show-more-btn.mud-button-root:hover {
    background: rgba(var(--glytic-primary-rgb), .08);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

/* =========================================================
   Merged "create your own" card -- secondary CTA styling.
   The card surface/bevel is styled up top near the
   .exam-card.create-your-own-card block. Secondary recipe: the double-layer
   cut-corner ghost (fill = border color + ::before interior) is retired for
   controls in favour of a real teal-hairline border. */
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
    border-radius: var(--qf-btn-radius);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    /* 44px tap target (project rule, epic X5 tap-target sweep). */
    min-height: var(--qf-btn-h-md);
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root:hover {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

@media (max-width: 767px) {

    /* Touch target minimums (Epic 13) */
    .landing-try-cat-pill[b-o2gobkrroc] {
        min-height: 44px;
        padding: 10px 16px;
    }

    .hero-btn-primary[b-o2gobkrroc] {
        min-height: 52px;
        padding: 14px 28px;
        font-size: 1rem;
    }
}

/* Skeleton loading cards — shown during WASM cold-start before data loads */
@keyframes sk-pulse-b-o2gobkrroc {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 0.65; }
}

.skeleton-card[b-o2gobkrroc] {
    pointer-events: none;
}

.skeleton-card .card-body-inner[b-o2gobkrroc],
.skeleton-card .card-actions[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-meta[b-o2gobkrroc] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sk-line[b-o2gobkrroc] {
    border-radius: 6px;
    background: var(--glytic-border);
    animation: sk-pulse-b-o2gobkrroc 1.6s ease-in-out infinite;
}

.sk-pill[b-o2gobkrroc]  { height: 20px; width: 64px; border-radius: 10px; }
.sk-count[b-o2gobkrroc] { height: 16px; width: 80px; }
.sk-title[b-o2gobkrroc] { height: 22px; width: 85%; }
.sk-desc[b-o2gobkrroc]  { height: 14px; width: 100%; }
.sk-desc-short[b-o2gobkrroc] { width: 65%; }
.sk-btn[b-o2gobkrroc]   { height: 36px; width: 140px; border-radius: 8px; }

/* ============================
   Vendor strip disclaimer
   ============================ */
.vendor-strip-disclaimer[b-o2gobkrroc] {
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    color: var(--glytic-text-muted);
    /* No second dimming. Measured from the painted pixels on Test on 2026-09-05 (bundle-2 task
       5): the muted token at opacity 0.6 over the home gradient came to 2.95:1, against the 4.5:1
       WCAG 2.1 AA needs at this size. The token alone measures 5.6:1, and the line is already
       quiet by being 0.7rem and centred. */
    margin-top: 0.35rem;
}

/* How It Works — pulsing connector dot */
.hiw-arrow[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glytic-primary);
    animation: hiw-pulse-b-o2gobkrroc 2s ease-in-out infinite;
}

@keyframes hiw-pulse-b-o2gobkrroc {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hiw-arrow[b-o2gobkrroc]::before {
        animation: none;
        opacity: 0.6;
    }
}


/* ============================
   CAREER PATHS SHOWCASE SECTION
   ============================ */
.career-showcase-section[b-o2gobkrroc] {
    padding: 2rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Career showcase loading skeleton -- fills the space before featured paths load so there is no
   blank gap. Skeleton cards reuse .career-showcase-card layout; .cs-sk blocks shimmer. */
.career-skeleton-card[b-o2gobkrroc] {
    pointer-events: none;
}

.cs-sk[b-o2gobkrroc] {
    display: block;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.10) 37%, rgba(255, 255, 255, 0.04) 63%);
    background-size: 400% 100%;
    border-radius: 6px;
    animation: cs-sk-shimmer-b-o2gobkrroc 1.4s ease-in-out infinite;
}

.cs-sk-pill[b-o2gobkrroc] { width: 38%; height: 0.85rem; }
.cs-sk-pill-sm[b-o2gobkrroc] { width: 22%; }
.cs-sk-title[b-o2gobkrroc] { width: 80%; height: 1.4rem; margin: 0.95rem 0 0.65rem; }
.cs-sk-salary[b-o2gobkrroc] { width: 45%; height: 1rem; margin-bottom: 0.95rem; }
.cs-sk-chip[b-o2gobkrroc] { display: inline-block; width: 4.2rem; height: 1.35rem; border-radius: 12px; margin: 0 0.4rem 0.4rem 0; }
.cs-sk-line[b-o2gobkrroc] { width: 60%; height: 0.85rem; }

@keyframes cs-sk-shimmer-b-o2gobkrroc {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-sk[b-o2gobkrroc] { animation: none; }
}

.career-showcase-header[b-o2gobkrroc] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.career-showcase-heading[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin: 0 0 0.6rem 0;
}

.career-showcase-sub[b-o2gobkrroc] {
    color: rgba(240, 240, 240, 0.6);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.career-showcase-grid[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.career-showcase-card[b-o2gobkrroc] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.4rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 180px;
}

.career-showcase-card[b-o2gobkrroc]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg, #12151f);
    z-index: 0;
    pointer-events: none;
    transition: background 0.2s ease;
}

.career-showcase-card > *[b-o2gobkrroc] {
    position: relative;
    z-index: 1;
}

.career-showcase-card:hover[b-o2gobkrroc] {
    background: var(--glytic-border-hover);
}

.career-showcase-card-top[b-o2gobkrroc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.career-showcase-industry[b-o2gobkrroc] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--glytic-primary);
    opacity: 0.85;
}

.career-showcase-duration[b-o2gobkrroc] {
    font-size: 0.7rem;
    color: rgba(240, 240, 240, 0.45);
    font-weight: 500;
}

.career-showcase-card-title[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.1;
}

.career-showcase-certs[b-o2gobkrroc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: auto;
    padding-bottom: 0.75rem;
}

.career-showcase-cert-chip[b-o2gobkrroc] {
    font-size: 0.65rem;
    padding: 0.2rem 0.55rem;
    position: relative;
    isolation: isolate;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border: 0;
    color: rgba(240, 240, 240, 0.7);
    white-space: nowrap;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only chip. */
.career-showcase-cert-chip[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-card-bg, #12151f);
    z-index: -1;
    pointer-events: none;
}

.career-showcase-cert-more[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), 0.2);
    color: rgba(var(--glytic-primary-rgb), 0.8);
}

.career-showcase-cert-more[b-o2gobkrroc]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg, #12151f);
}

.career-showcase-card-bottom[b-o2gobkrroc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.career-showcase-node-count[b-o2gobkrroc] {
    font-size: 0.75rem;
    color: rgba(240, 240, 240, 0.45);
}

.career-showcase-arrow[b-o2gobkrroc] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.06em;
    color: var(--forge-gold, #D07040);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.career-showcase-card:hover .career-showcase-arrow[b-o2gobkrroc] {
    opacity: 1;
}

.career-showcase-cta[b-o2gobkrroc] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.career-showcase-btn[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-md);
    padding: 0 18px;
    clip-path: none;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.career-showcase-btn:hover[b-o2gobkrroc] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

.career-showcase-btn:focus-visible[b-o2gobkrroc] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.career-showcase-cta-note[b-o2gobkrroc],
.career-showcase-cta-sub[b-o2gobkrroc] {
    font-size: 0.75rem;
    color: rgba(240, 240, 240, 0.4);
}

.career-showcase-salary[b-o2gobkrroc] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--glytic-primary);
    padding: 2px 8px;
    position: relative;
    isolation: isolate;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border: 0;
    display: inline-block;
    margin-bottom: 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.career-showcase-salary[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-card-bg, #12151f);
    z-index: -1;
    pointer-events: none;
}

/* Career strip on exam cards */
.card-career-strip[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    /* Tap-target sweep (epic X5, informational): measured 25-27px tall. Bumped padding
       narrows the gap to the project's 44px rule without the ~19px-per-card jump full
       44px would need across every card in the catalog grid; margin-top already keeps
       it separated from .card-title-link above. */
    padding: 0.5rem 0.6rem;
    margin-top: 0.4rem;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid var(--qf-line);
    border-radius: 0;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}

.card-career-strip:hover[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
}

.ccs-salary[b-o2gobkrroc] {
    color: var(--glytic-primary);
    font-weight: 700;
    white-space: nowrap;
}

.ccs-separator[b-o2gobkrroc] {
    color: rgba(255, 255, 255, 0.15);
}

.ccs-path[b-o2gobkrroc] {
    color: var(--glytic-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ccs-trend[b-o2gobkrroc] {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(0, 255, 231, 0.12);
    color: var(--glytic-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================================
   Mobile exam cards COMPACT (<=600px, verified at 375px)
   Owner directive: keep domains + career/salary strips VISIBLE
   when data exists; kill the min-height floor and the reserved
   title/desc/rating heights so surplus never pools as voids.
   Card height is driven by content. All chains here are >= the
   base rules' specificity so they win without !important (except
   where a base rule already uses !important -- see the 768px block).
   ========================================================= */
@media (max-width: 600px) {
    /* Drop the min-height floor and the intrinsic-size reservation so the
       card collapses to its content height (was a 300px floor -> voids). */
    .exam-card[b-o2gobkrroc],
    .exam-card.create-your-own-card[b-o2gobkrroc] {
        min-height: auto;
        contain-intrinsic-size: auto;
    }

    /* Flow content top-down with a small uniform gap instead of spreading
       surplus as space-between gaps. gap uses !important to beat the pre-existing
       `.exam-card .card-body-inner { gap: 0.5rem !important }` in the <=768px block. */
    .exam-card .card-body-inner[b-o2gobkrroc] {
        justify-content: flex-start;
        gap: 0.4rem !important;
    }

    /* Do not reserve dead space for short/empty titles + descriptions. */
    .exam-card .card-title[b-o2gobkrroc] {
        min-height: auto;
    }
    .exam-card .card-desc[b-o2gobkrroc] {
        min-height: auto;
    }

    /* Career/salary strip stays visible but condensed (single line via the
       base nowrap/ellipsis on .ccs-path). */
    .exam-card .card-career-strip[b-o2gobkrroc] {
        padding: 0.25rem 0.5rem;
        font-size: 0.64rem;
    }

    /* Domain chips stay visible but smaller. */
    .exam-card .cat-chip[b-o2gobkrroc] {
        font-size: 0.6rem;
        padding: 0.14rem 0.4rem;
    }

    /* Rating row: drop the margin-top:auto push (base line ~833) so it does
       not create a void above itself; sit it just below the content. */
    .exam-card .card-rating[b-o2gobkrroc] {
        min-height: auto;
        margin-top: 0.25rem;
    }
}

@media (max-width: 768px) {
    .career-showcase-section[b-o2gobkrroc] {
        padding: 1.5rem 1rem 2.5rem;
    }
    .career-showcase-heading[b-o2gobkrroc] {
        font-size: 1.4rem;
    }
    .career-showcase-grid[b-o2gobkrroc] {
        grid-template-columns: 1fr;
    }
}

/* (doc-exam-spotlight banner removed -- the doc-to-exam CTA now renders as the
   merged .create-your-own-card at the end of the Official grid; see that block above.) */

/* Keep landing actions readable and put the study benefits before visual decoration. */
.qf-root .final-cta-btn[b-o2gobkrroc],
.qf-root .career-showcase-btn[b-o2gobkrroc],
.qf-root .create-your-own-btn[b-o2gobkrroc] {
    letter-spacing: normal;
    border-radius: 8px;
    clip-path: none;
}

.ai-diff-card[b-o2gobkrroc]  .ai-diff-card-icon {
    width: 36px;
    height: 36px;
    color: var(--glytic-primary);
    margin-bottom: 0.85rem;
}

.study-benefits[b-o2gobkrroc] { padding-top: 3rem; }

#pricing[b-o2gobkrroc] { scroll-margin-top: 90px; }
/* /Pages/In/Index.razor.rz.scp.css */
/* /in India localized homepage -- Composed Strike restyle (2026-07, Task 11).
   Angular cut-corner language: rectangles -> cut corners; purple purged -> teal datum +
   ember CTA; clip-path shears box-shadow/translateY, so hovers move to border+background. */

.vertical-landing-page[b-24hv8wgp91] {
    min-height: 100vh;
    background: var(--glytic-bg-dark);
    color: var(--glytic-text-primary);
}

.vertical-hero[b-24hv8wgp91] {
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.vertical-hero-content[b-24hv8wgp91] {
    max-width: 900px;
    margin: 0 auto;
}

.vertical-badge[b-24hv8wgp91] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.vertical-badge[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.vertical-hero-title[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vertical-hero-subtitle[b-24hv8wgp91] {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    margin: 0 0 16px;
    line-height: 1.4;
}

.vertical-hero-description[b-24hv8wgp91] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.vertical-hero-actions[b-24hv8wgp91] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-large[b-24hv8wgp91],
.btn-secondary-large[b-24hv8wgp91] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    clip-path: none;
}

.btn-primary-large[b-24hv8wgp91] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
}

.btn-primary-large:hover[b-24hv8wgp91] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.btn-secondary-large[b-24hv8wgp91] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.btn-secondary-large:hover[b-24hv8wgp91] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.btn-primary-large:focus-visible[b-24hv8wgp91],
.btn-secondary-large:focus-visible[b-24hv8wgp91] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.vertical-stats-bar[b-24hv8wgp91] {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 60px 24px;
    background: var(--glytic-card-bg);
    border-bottom: 1px solid var(--glytic-border);
}

.stat-item[b-24hv8wgp91] {
    text-align: center;
}

.stat-number[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 8px;
}

.stat-label[b-24hv8wgp91] {
    font-size: 1rem;
    color: var(--glytic-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.vertical-exams-section[b-24hv8wgp91],
.vertical-features-section[b-24hv8wgp91],
.vertical-faq-section[b-24hv8wgp91],
.india-career-section[b-24hv8wgp91],
.india-pricing-section[b-24hv8wgp91] {
    padding: 80px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header[b-24hv8wgp91] {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.section-header p[b-24hv8wgp91] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-exams-grid[b-24hv8wgp91] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.vertical-exam-card[b-24hv8wgp91] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Accent bar (kept on ::before). z-index:1 keeps it above the ::after interior. */
.vertical-exam-card[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(90deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Double-layer reveal on ::after (::before is the accent bar): element bg = the border
   color; ::after paints the card interior so the hairline follows the cut corners
   (z-index:-1 + isolation; children need no lift). */
.vertical-exam-card[b-24hv8wgp91]::after {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.vertical-exam-card:hover[b-24hv8wgp91] {
    background: var(--glytic-primary);
}

.vertical-exam-card:hover[b-24hv8wgp91]::after {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-card-bg);
}

.vertical-exam-card:hover[b-24hv8wgp91]::before {
    opacity: 1;
}

/* Cards are now keyboard-reachable (role="button" tabindex="0"); the clip-path shears an
   outward ring, so the focus ring goes inset to stay visible on the bevel. */
.vertical-exam-card:focus-visible[b-24hv8wgp91] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.exam-card-header[b-24hv8wgp91] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.exam-card-header h3[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--glytic-primary);
}

.exam-difficulty[b-24hv8wgp91] {
    padding: 4px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-description[b-24hv8wgp91] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0 0 20px;
}

.exam-meta[b-24hv8wgp91] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glytic-border);
}

.exam-questions[b-24hv8wgp91],
.exam-duration[b-24hv8wgp91] {
    font-size: 0.875rem;
    color: var(--glytic-text-secondary);
    font-weight: 500;
}

.exam-topics[b-24hv8wgp91] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-tag[b-24hv8wgp91] {
    padding: 6px 12px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--glytic-primary);
    font-weight: 500;
}

.view-all-container[b-24hv8wgp91] {
    text-align: center;
    margin-top: 40px;
}

.features-grid-vertical[b-24hv8wgp91] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.feature-card-vertical[b-24hv8wgp91] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    text-align: center;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.feature-card-vertical[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical:hover[b-24hv8wgp91] {
    background: var(--glytic-border-hover);
}

.feature-card-vertical:hover[b-24hv8wgp91]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Number plate: double-layer reveal, inset 2px to preserve the 2px border weight. */
.feature-number[b-24hv8wgp91] {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    font-family: var(--glytic-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--glytic-primary);
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

.feature-number[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.feature-card-vertical h3[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-text-primary);
}

.feature-card-vertical p[b-24hv8wgp91] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

/* India-specific: Salary/Career section */
.salary-grid[b-24hv8wgp91] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.salary-card[b-24hv8wgp91] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 32px;
    text-align: center;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.salary-card[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.salary-card:hover[b-24hv8wgp91] {
    background: var(--glytic-border-hover);
}

.salary-card:hover[b-24hv8wgp91]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

.salary-card h3[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.salary-range[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 12px;
}

.salary-card p[b-24hv8wgp91] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.faq-grid[b-24hv8wgp91] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.faq-item[b-24hv8wgp91] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.faq-item[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.faq-item h3[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--glytic-primary);
}

.faq-item p[b-24hv8wgp91] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

.vertical-cta-section[b-24hv8wgp91] {
    padding: 100px 24px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.cta-content h2[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.cta-content p[b-24hv8wgp91] {
    font-size: 1.25rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
}

.cta-actions[b-24hv8wgp91] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* India Pricing Section */
.india-pricing-section[b-24hv8wgp91] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.04) 0%, rgba(var(--forge-primary-rgb), 0.03) 100%);
    border-top: 1px solid var(--glytic-border);
    border-bottom: 1px solid var(--glytic-border);
}

.india-pricing-grid[b-24hv8wgp91] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 700px;
    margin: 0 auto;
}

.india-pricing-card[b-24hv8wgp91] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    isolation: isolate;
}

/* Double-layer reveal: element bg = the state's border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.india-pricing-card[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.india-pricing-card:hover[b-24hv8wgp91] {
    background: var(--glytic-border-hover);
}

.india-pricing-card:hover[b-24hv8wgp91]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-bg-medium);
}

/* Card is now keyboard-reachable (role="button" tabindex="0"). */
.india-pricing-card:focus-visible[b-24hv8wgp91] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.india-pricing-card.featured[b-24hv8wgp91] {
    background: var(--glytic-primary);
}

.india-pricing-best-value[b-24hv8wgp91] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.india-pricing-tier[b-24hv8wgp91] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--glytic-text-secondary);
    margin-bottom: 0.5rem;
}

.india-pricing-amount[b-24hv8wgp91] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 0.25rem;
}

.india-pricing-period[b-24hv8wgp91] {
    font-size: 0.9rem;
    color: var(--glytic-text-muted);
    margin-bottom: 1.5rem;
}

.india-pricing-features[b-24hv8wgp91] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.india-pricing-features li[b-24hv8wgp91] {
    padding: 0.4rem 0;
    padding-left: 1.25rem;
    position: relative;
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
}

.india-pricing-features li[b-24hv8wgp91]::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--glytic-primary);
    font-weight: 700;
}

.india-pricing-cta[b-24hv8wgp91] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-md);
    padding: 0 18px;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9375rem;
    border-radius: var(--qf-btn-radius);
}

.india-payment-note[b-24hv8wgp91] {
    text-align: center;
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .india-pricing-grid[b-24hv8wgp91] {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .vertical-hero[b-24hv8wgp91] {
        padding: 80px 20px 60px;
    }

    .vertical-hero-title[b-24hv8wgp91] {
        font-size: 2.5rem;
    }

    .vertical-hero-subtitle[b-24hv8wgp91] {
        font-size: 1.25rem;
    }

    .vertical-hero-description[b-24hv8wgp91] {
        font-size: 1rem;
    }

    .vertical-stats-bar[b-24hv8wgp91] {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
    }

    .vertical-exams-grid[b-24hv8wgp91] {
        grid-template-columns: 1fr;
    }

    .section-header h2[b-24hv8wgp91] {
        font-size: 2rem;
    }

    .faq-grid[b-24hv8wgp91] {
        grid-template-columns: 1fr;
    }

    .salary-grid[b-24hv8wgp91] {
        grid-template-columns: 1fr;
    }

    .btn-primary-large[b-24hv8wgp91],
    .btn-secondary-large[b-24hv8wgp91] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vertical-hero-title[b-24hv8wgp91] {
        font-size: 2rem;
    }

    .vertical-stats-bar[b-24hv8wgp91] {
        gap: 30px;
    }

    .stat-number[b-24hv8wgp91] {
        font-size: 2.5rem;
    }

    .vertical-exams-section[b-24hv8wgp91],
    .vertical-features-section[b-24hv8wgp91],
    .vertical-faq-section[b-24hv8wgp91],
    .india-career-section[b-24hv8wgp91],
    .india-pricing-section[b-24hv8wgp91] {
        padding: 60px 20px;
    }

    .vertical-cta-section[b-24hv8wgp91] {
        padding: 60px 20px;
    }

    .cta-content h2[b-24hv8wgp91] {
        font-size: 2rem;
    }

    .salary-range[b-24hv8wgp91] {
        font-size: 1.75rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Login page — wider panel consistent with register page */
.qf-panel-col[b-vf8i4jrbxq] {
    max-width: 500px;
}
/* /Pages/Methodology.razor.rz.scp.css */
.methodology-page[b-gigo14s8i8] {
    min-height: 100vh;
    color: var(--glytic-text-primary);
}

.meth-hero[b-gigo14s8i8] {
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.meth-hero-content[b-gigo14s8i8] {
    max-width: 900px;
    margin: 0 auto;
}

.meth-badge[b-gigo14s8i8] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.meth-badge[b-gigo14s8i8]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.meth-hero-title[b-gigo14s8i8] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.meth-hero-description[b-gigo14s8i8] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0 auto;
    line-height: 1.6;
    max-width: 720px;
}

/* ===== Sections ===== */
.meth-section[b-gigo14s8i8] {
    padding: 4rem 1.5rem;
    border-bottom: 1px solid var(--glytic-border);
}

.meth-section:last-child[b-gigo14s8i8] {
    border-bottom: none;
}

.meth-section-inner[b-gigo14s8i8] {
    max-width: 900px;
    margin: 0 auto;
}

.meth-section-title[b-gigo14s8i8] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 0 0 1.5rem;
    text-align: center;
}

.meth-card[b-gigo14s8i8] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem;
    line-height: 1.8;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.meth-card[b-gigo14s8i8]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.meth-card p[b-gigo14s8i8] {
    color: var(--glytic-text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* ===== Pipeline steps ===== */
.meth-steps[b-gigo14s8i8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.meth-step[b-gigo14s8i8] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem 1.5rem;
    transition: background var(--glytic-transition);
}

/* Double-layer reveal: element bg = the border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.meth-step[b-gigo14s8i8]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background var(--glytic-transition);
    z-index: -1;
    pointer-events: none;
}

.meth-step:hover[b-gigo14s8i8] {
    background: var(--glytic-border-hover);
}

.meth-step:hover[b-gigo14s8i8]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Highlighted step-4 card: brighter outline (was border-color) now the element fill. */
.meth-step-badge[b-gigo14s8i8] {
    background: rgba(var(--glytic-primary-rgb), 0.5);
}

/* Number plate: double-layer reveal so its hairline follows the cut corner. */
.meth-step-number[b-gigo14s8i8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    width: 40px;
    height: 40px;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-border);
    border: 0;
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.meth-step-number[b-gigo14s8i8]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.meth-step h3[b-gigo14s8i8] {
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.meth-step p[b-gigo14s8i8] {
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== CTA ===== */
.meth-cta-section[b-gigo14s8i8] {
    text-align: center;
    padding-bottom: 5rem;
}

.meth-cta-text[b-gigo14s8i8] {
    color: var(--glytic-text-secondary);
    font-size: 1.1rem;
    margin: 0 0 2rem;
}

.meth-cta-buttons[b-gigo14s8i8] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.meth-btn-primary[b-gigo14s8i8],
.meth-btn-secondary[b-gigo14s8i8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
    clip-path: none;
}

.meth-btn-primary[b-gigo14s8i8] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border: 1px solid var(--forge-primary);
}

.meth-btn-primary:hover[b-gigo14s8i8] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.meth-btn-secondary[b-gigo14s8i8] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.meth-btn-secondary:hover[b-gigo14s8i8] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.meth-btn-primary:focus-visible[b-gigo14s8i8],
.meth-btn-secondary:focus-visible[b-gigo14s8i8] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .meth-hero[b-gigo14s8i8] {
        padding: 80px 16px 48px;
    }

    .meth-section[b-gigo14s8i8] {
        padding: 2.5rem 1rem;
    }

    .meth-card[b-gigo14s8i8] {
        padding: 1.25rem;
    }

    .meth-step[b-gigo14s8i8] {
        padding: 1.5rem 1rem;
    }
}
/* /Pages/Pricing.razor.rz.scp.css */
.pricing-page[b-jkhc64xgzq] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    min-height: calc(100dvh - 64px);
    color: var(--glytic-text-primary);
}

.pricing-header[b-jkhc64xgzq] {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-title[b-jkhc64xgzq] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem,5vw,3rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 1rem;
    text-transform: none;
}

.pricing-subtitle[b-jkhc64xgzq] {
    color: var(--glytic-text-secondary);
    font-size: 1.1rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.65;
}

.pricing-loading[b-jkhc64xgzq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    min-height: 24rem;
}

.pricing-redirect-note[b-jkhc64xgzq] {
    color: var(--glytic-text-secondary);
}


.regional-badge[b-jkhc64xgzq] {
    color: var(--glytic-primary);
    font-size: .85rem;
    text-align: center;
    margin-bottom: 1rem;
}


.pricing-feature-link[b-jkhc64xgzq] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}


.feature-scope-note[b-jkhc64xgzq] {
    font-size: .85rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    padding-top: 1rem;
    margin: 1rem 0 0;
    border-top: 1px solid var(--glytic-border);
}

.feature-scope-note a[b-jkhc64xgzq], .billing-terms a[b-jkhc64xgzq] {
    color: var(--glytic-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.billing-terms[b-jkhc64xgzq] {
    margin: 2.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--glytic-border);
}

.billing-terms-title[b-jkhc64xgzq] {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--glytic-text-secondary);
}

.billing-terms-list[b-jkhc64xgzq] {
    color: var(--glytic-text-secondary);
    font-size: .75rem;
    line-height: 1.45;
    padding-left: 1rem;
    margin: 0;
}

.billing-terms-list li + li[b-jkhc64xgzq] {
    margin-top: .3rem;
}

.subscription-info[b-jkhc64xgzq] {
    margin: 2rem auto;
    text-align: center;
    color: var(--glytic-text-secondary);
}

.checkout-cancelled-notice[b-jkhc64xgzq] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 46rem;
    margin: 0 auto 2rem;
    padding: 1rem;
    border: 1px solid var(--glytic-border);
}

.checkout-cancelled-text[b-jkhc64xgzq] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.checkout-cancelled-title[b-jkhc64xgzq] {
    font-weight: 600;
}

.checkout-cancelled-body[b-jkhc64xgzq] {
    color: var(--glytic-text-secondary);
}

.checkout-cancelled-dismiss[b-jkhc64xgzq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    border: 0;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.checkout-cancelled-dismiss:hover[b-jkhc64xgzq] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.checkout-cancelled-dismiss:focus-visible[b-jkhc64xgzq] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.checkout-cancelled-dismiss:disabled[b-jkhc64xgzq] {
    color: var(--qf-disabled-fg);
    cursor: default;
}

@media (max-width: 700px) {
    .pricing-page[b-jkhc64xgzq] {
        padding: 2rem 1rem 3rem;
    }
}
/* /Pages/Privacy.razor.rz.scp.css */
.legal-page[b-vl9x2n2m0w] {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 1.5rem 4rem;
    color: var(--glytic-text-primary);
}

.legal-header[b-vl9x2n2m0w] {
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1[b-vl9x2n2m0w] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #8FD0DE 0%, var(--glytic-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-effective[b-vl9x2n2m0w] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.legal-content[b-vl9x2n2m0w] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legal-section[b-vl9x2n2m0w] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.legal-section h2[b-vl9x2n2m0w] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--glytic-primary);
    margin: 0 0 1rem;
}

.legal-section h3[b-vl9x2n2m0w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 1.25rem 0 0.5rem;
}

.legal-section h3:first-of-type[b-vl9x2n2m0w] {
    margin-top: 0;
}

.legal-section p[b-vl9x2n2m0w] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.legal-section p:last-child[b-vl9x2n2m0w] {
    margin-bottom: 0;
}

.legal-section ul[b-vl9x2n2m0w] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0.75rem;
}

.legal-section ul:last-child[b-vl9x2n2m0w] {
    margin-bottom: 0;
}

.legal-section li[b-vl9x2n2m0w] {
    margin-bottom: 0.4rem;
}

.legal-section li[b-vl9x2n2m0w]::marker {
    color: var(--glytic-primary);
}

.legal-section a[b-vl9x2n2m0w] {
    color: var(--glytic-primary);
    text-decoration: none;
    transition: opacity var(--glytic-transition);
}

.legal-section a:hover[b-vl9x2n2m0w] {
    opacity: 0.8;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .legal-page[b-vl9x2n2m0w] {
        padding: 60px 1rem 3rem;
    }

    .legal-section[b-vl9x2n2m0w] {
        padding: 1.25rem;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* Profile -- Composed Strike restyle (2026-07, Task 11). Profile is almost entirely
   MudBlazor, so the angular cut-corner language is applied through ::deep overrides:
   cut-corner card/panels, ember cut-corner primary CTAs with ink labels, squared inputs,
   ember tab indicator, and the MudText Color.Secondary purple demoted to muted grey.
   clip-path shears box-shadow so card elevation moves to drop-shadow. Compound
   scoped selectors outrank MudBlazor defaults without !important.

   The page's markup root is a component (CustomErrorBoundary -> MudContainer -> MudCard),
   which carries no scope attribute, so bare ::deep rules silently no-op. Every rule is
   anchored on the native .profile-page-root wrapper (which does carry the scope attr)
   so ::deep resolves against a real scoped ancestor. */

/* ---- Card shell ---- */
.profile-page-root[b-3p1lop5q07]  .mud-card {
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    box-shadow: none;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
    position: relative;
    isolation: isolate;
}

/* Double-layer reveal: card bg = hairline color; ::before paints the card surface so the hairline
   follows both cut corners (clip-path shears a rectangular border off the 45deg cuts).
   Interior at z-index:-1 under isolation -- Mud-rendered children need no lift. */
.profile-page-root[b-3p1lop5q07]  .mud-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-card);
    z-index: -1;
    pointer-events: none;
}

.profile-page-root[b-3p1lop5q07]  .mud-card-header .mud-typography-h5 {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.015em;
}

/* ---- Subscription plan plate ---- */
.profile-page-root[b-3p1lop5q07]  .subscription-plan-card {
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-border);
    box-shadow: none;
    position: relative;
    isolation: isolate;
}

.profile-page-root[b-3p1lop5q07]  .subscription-plan-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-card);
    z-index: -1;
    pointer-events: none;
}

/* ---- Purple purge: MudText Color.Secondary maps to palette secondary (#9028D8) ---- */
.profile-page-root[b-3p1lop5q07]  .mud-typography.mud-secondary-text,
.profile-page-root[b-3p1lop5q07]  .mud-secondary-text {
    color: var(--glytic-text-secondary);
}

/* ---- Tabs: the tab recipe (sentence case, primary-text active, teal indicator) ---- */
.profile-page-root[b-3p1lop5q07]  .mud-tabs .mud-tab {
    font-weight: 600;
    font-size: 0.875rem;
}

.profile-page-root[b-3p1lop5q07]  .mud-tabs .mud-tab-slider {
    background: var(--glytic-primary);
}

/* Filled primary / error / outlined buttons now come from the global button system
   (quizforge.css + mudblazor-overrides.css) -- no bespoke overrides needed here. */

/* ---- Inputs: squared outlined fields ---- */
.profile-page-root[b-3p1lop5q07]  .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0;
}

/* ---- Alerts + paper surfaces: cut corners ---- */
.profile-page-root[b-3p1lop5q07]  .mud-alert {
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

/* ---- Chips: static status chips use the global 4px status-label radius (see
   mudblazor-overrides.css .mud-chip-size-*:not(.mud-clickable)) -- no override needed. */
/* /Pages/Quiz.razor.rz.scp.css */
/*
 * Quiz Page Styles - Quiz-specific styling only
 * Shared styles are in shared-quiz-components.css
 * Using QuizForge variables from quizforge.css
 */

/* ========================================
   QUIZ-SPECIFIC STYLING
   ======================================== */

.quiz-container[b-qhgae1fvw9] {
    min-height: calc(100vh - 64px - 3rem);
    min-height: calc(100dvh - 64px - 3rem);
}

.quiz-viewport[b-qhgae1fvw9] {
    min-height: inherit;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.loading-container[b-qhgae1fvw9] {
    min-height: 18rem;
}

/* Visually-hidden live region: voices correct/incorrect to screen readers after the reveal
   without affecting the visual layout. */
.quiz-sr-only[b-qhgae1fvw9] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.quiz-loading-shell[b-qhgae1fvw9] {
    position: relative;
    min-height: clamp(32rem, 70vh, 44rem);
    min-height: clamp(32rem, 70dvh, 44rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
}

.quiz-loading-stage[b-qhgae1fvw9] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.quiz-loading-pill[b-qhgae1fvw9],
.quiz-loading-badge[b-qhgae1fvw9],
.quiz-loading-question[b-qhgae1fvw9],
.quiz-loading-option[b-qhgae1fvw9],
.quiz-loading-progress[b-qhgae1fvw9] {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.16);
}

.quiz-loading-pill[b-qhgae1fvw9] {
    width: 10rem;
    height: 1.1rem;
    border-radius: 999px;
}

.quiz-loading-pill--short[b-qhgae1fvw9] {
    width: 6rem;
}

.quiz-loading-progress[b-qhgae1fvw9] {
    height: 0.75rem;
    width: 100%;
    border-radius: 999px;
}

.quiz-loading-card[b-qhgae1fvw9] {
    position: relative;
    overflow: hidden;
    border-radius: var(--glytic-border-radius);
}

.quiz-loading-card-body[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.quiz-loading-badge[b-qhgae1fvw9] {
    width: 5.5rem;
    height: 1.25rem;
    border-radius: 999px;
}

.quiz-loading-question[b-qhgae1fvw9] {
    width: 100%;
    height: 1.2rem;
    border-radius: 10px;
}

.quiz-loading-question--short[b-qhgae1fvw9] {
    width: 72%;
}

.quiz-loading-options[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.quiz-loading-option[b-qhgae1fvw9] {
    width: 100%;
    min-height: 3.5rem;
    border-radius: 14px;
}

.quiz-loading-status[b-qhgae1fvw9] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.quiz-loading-text[b-qhgae1fvw9] {
    color: var(--glytic-text-muted);
}

.quiz-loading-shimmer[b-qhgae1fvw9]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--glytic-primary-rgb), 0.08) 35%,
        rgba(var(--glytic-primary-rgb), 0.22) 50%,
        rgba(var(--glytic-primary-rgb), 0.1) 65%,
        transparent 100%
    );
    animation: quiz-loading-shimmer-b-qhgae1fvw9 1.6s ease-in-out infinite;
}

@keyframes quiz-loading-shimmer-b-qhgae1fvw9 {
    100% {
        transform: translateX(100%);
    }
}

/* Back-to-dashboard topbar */
.quiz-nav-topbar[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--glytic-border, rgba(255,255,255,0.08));
    margin-bottom: 0.5rem;
}

.quiz-back-link[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--glytic-text-muted, rgba(255,255,255,0.45));
    text-decoration: none;
    transition: color 0.15s;
    flex-shrink: 0;
}

.quiz-back-link:hover[b-qhgae1fvw9] {
    color: var(--glytic-primary, #00ffe7);
}

.quiz-exam-label[b-qhgae1fvw9] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.7));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quiz question text - highly readable, no gradients */
.quiz-question-text[b-qhgae1fvw9] {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    margin-bottom: 2rem !important;
}

/* Scenario text formatting */
.scenario-text[b-qhgae1fvw9] {
    white-space: pre-line;
    line-height: 1.6 !important;
}

/* Scenario chip — compact inline indicator with tap-to-expand */
.scenario-chip[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 32px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--qf-line);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    text-align: left;
    color: var(--glytic-text-secondary);
    outline: none;
}

.scenario-chip:hover[b-qhgae1fvw9] {
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
}

.scenario-chip:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.scenario-chip-label[b-qhgae1fvw9] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--glytic-primary);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    flex-shrink: 0;
    white-space: nowrap;
}

.scenario-chip-preview[b-qhgae1fvw9] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.scenario-chip-action[b-qhgae1fvw9] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--glytic-primary);
    flex-shrink: 0;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.scenario-chip:hover .scenario-chip-action[b-qhgae1fvw9] {
    opacity: 1;
}

/* Compact Stats Cards */
.compact-stats[b-qhgae1fvw9] {
    min-height: auto !important;
    height: auto !important;
}

.compact-stats .mud-card-content[b-qhgae1fvw9] {
    min-height: auto !important;
    padding: 0.5rem !important;
}

.compact-stat-line[b-qhgae1fvw9] {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #e2e8f0 !important;
    white-space: nowrap;
    line-height: 1.2 !important;
}

.stat-label[b-qhgae1fvw9] {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.stat-value[b-qhgae1fvw9] {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Quiz-specific Stats Cards */
.stats-card[b-qhgae1fvw9] {
    transition: var(--glytic-transition);
    background: var(--mud-palette-surface);
    border: 1px solid var(--glytic-border);
    border-radius: 16px !important;
    overflow: hidden;
    position: relative;
    box-shadow: var(--glytic-shadow);
}

.stats-card:hover[b-qhgae1fvw9] {
    transform: translateY(-4px);
    border-color: var(--glytic-border-hover);
    box-shadow: 0 12px 24px rgba(var(--glytic-primary-rgb), 0.15);
}

/* Quiz Score Display with Neon Glow */
.score-glow[b-qhgae1fvw9] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    color: var(--glytic-primary);
    text-shadow: var(--glytic-glow);
    animation: neon-flicker 2s infinite;
}

/* Quiz Result Cards */
.quiz-result-card[b-qhgae1fvw9] {
    transition: var(--glytic-transition);
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glytic-shadow);
}

.quiz-result-card.correct-answer[b-qhgae1fvw9] {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 32px rgba(46, 204, 113, 0.4), 
                0 0 48px rgba(var(--glytic-primary-rgb), 0.2), 
                0 0 64px rgba(var(--glytic-primary-rgb), 0.1);
    animation: success-pulse 2s infinite alternate;
}

.quiz-result-card.incorrect-answer[b-qhgae1fvw9] {
    border-color: #e74c3c !important;
    box-shadow: 0 0 32px rgba(231, 76, 60, 0.4);
}

/* ========================================
   QUIZ ANSWER FEEDBACK BACKGROUNDS
   ======================================== */

/* User answer feedback with proper specificity for Quiz page */
.quiz-result-card .answer-section.correct-user-answer[b-qhgae1fvw9],
.quiz-result-card .ai-answer-section.correct-user-answer[b-qhgae1fvw9] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(8px);
}

.quiz-result-card .answer-section.incorrect-user-answer[b-qhgae1fvw9],
.quiz-result-card .ai-answer-section.incorrect-user-answer[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(8px);
}

/* ========================================
   QUIZ ANSWER FEEDBACK BACKGROUNDS - HIGHEST SPECIFICITY
   ======================================== */

/* User answer feedback with maximum specificity for Quiz page */
.quiz-result-card .answer-section.correct-user-answer[b-qhgae1fvw9],
.quiz-result-card .ai-answer-section.correct-user-answer[b-qhgae1fvw9],
.quiz-result-card .mud-card-content .answer-section.correct-user-answer[b-qhgae1fvw9],
.quiz-result-card .mud-card-content .ai-answer-section.correct-user-answer[b-qhgae1fvw9] {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    backdrop-filter: blur(8px) !important;
}

.quiz-result-card .answer-section.incorrect-user-answer[b-qhgae1fvw9],
.quiz-result-card .ai-answer-section.incorrect-user-answer[b-qhgae1fvw9],
.quiz-result-card .mud-card-content .answer-section.incorrect-user-answer[b-qhgae1fvw9],
.quiz-result-card .mud-card-content .ai-answer-section.incorrect-user-answer[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    backdrop-filter: blur(8px) !important;
}

/* Custom Quiz Progress Bar - Matches Flashcards */
.quiz-progress-section[b-qhgae1fvw9] {
    margin-bottom: 1.5rem;
}

.quiz-progress-container[b-qhgae1fvw9] {
    margin-bottom: 1rem;
}

.quiz-progress-bar-wrapper[b-qhgae1fvw9] {
    padding: 0.25rem 0;
}

.quiz-custom-progress-bar[b-qhgae1fvw9] {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    width: 100%;
}

.quiz-custom-progress-fill[b-qhgae1fvw9] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(var(--glytic-primary-rgb), 0.4) 0%, 
        rgba(var(--glytic-primary-rgb), 0.7) 50%, 
        rgba(var(--glytic-primary-rgb), 0.9) 100%);
    border-radius: 20px;
    transition: width 0.3s ease;
}

/* Quiz progress text overlay - inside custom progress bar */
.quiz-custom-progress-bar .quiz-progress-text[b-qhgae1fvw9] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
}

.quiz-custom-progress-bar .progress-count[b-qhgae1fvw9],
.quiz-custom-progress-bar .progress-percentage[b-qhgae1fvw9] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.quiz-custom-progress-bar .progress-count[b-qhgae1fvw9] {
    font-size: 0.9rem;
}

.quiz-custom-progress-bar .progress-percentage[b-qhgae1fvw9] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* Responsive progress bar */
@media (max-width: 768px) {
    .quiz-custom-progress-bar[b-qhgae1fvw9] {
        height: 28px;
    }
    
    .quiz-custom-progress-bar .progress-count[b-qhgae1fvw9] {
        font-size: 0.8rem;
    }
    
    .quiz-custom-progress-bar .progress-percentage[b-qhgae1fvw9] {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .quiz-custom-progress-bar[b-qhgae1fvw9] {
        height: 24px;
    }
    
    .quiz-custom-progress-bar .progress-count[b-qhgae1fvw9] {
        font-size: 0.75rem;
    }
    
    .quiz-custom-progress-bar .progress-percentage[b-qhgae1fvw9] {
        font-size: 0.65rem;
    }
}

/* Quiz Question Cards */
.completion-card[b-qhgae1fvw9],
.question-card[b-qhgae1fvw9] {
    transition: var(--glytic-transition);
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glytic-shadow);
}

/* Bevel-FOLLOWING border for the quiz question container. The shared .ai-card-style primitive
   draws a real 1px border UNDER a clip-path, so the clip shears the border off the two cut
   corners -- the bevel edges carry no border (owner: "quiz container missing bevel borders").
   Redraw it as the double-layer reveal: the card FILL is the border color and a ::before surface
   inset 1px paints the card interior, so the border shows on EVERY edge incl. the bevels. Scoped
   !important beats .ai-card-style's own !important border/background. The interior sits at
   z-index:-1 inside the card's own stacking context (.ai-card-style already sets
   isolation:isolate), so ALL content -- including MudBlazor-rendered children that carry no
   scope attribute -- paints above it without any child-lift rules. */
.question-card.ai-card-style[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.28) !important;
    border: 0 !important;
    isolation: isolate;
}
.question-card.ai-card-style[b-qhgae1fvw9]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    /* Mirrors the .ai-card-style interior gradient so the surface is visually unchanged. */
    background: linear-gradient(145deg, #141823 0%, #1b2331 55%, #0f141c 100%);
    z-index: -1;
    pointer-events: none;
}
.question-card.ai-card-style:hover[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.5) !important;
}

/* Quiz-specific Typography */
.quiz-category[b-qhgae1fvw9] {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-shadow: var(--glytic-glow);
}

.question-title[b-qhgae1fvw9] {
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    text-shadow: var(--glytic-glow), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.question-text[b-qhgae1fvw9] {
    color: var(--glytic-text-primary) !important;
    font-family: var(--glytic-font-body);
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
    padding: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* "Select all that apply" hint */
.quiz-select-hint[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-primary);
    letter-spacing: 0.5px;
}

/* Tap-to-select answer cards (replaces radio/checkbox) */
.quiz-tap-answers[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Answer tile (button system 2026-09-23): real 1px border, 8px radius, no clip-path. The
   Composed Strike cut-corner double-layer fill/::before technique previously used here is
   retired for controls (cards keep the cut; controls do not). State (hover/selected/
   correct/wrong) recolors border + a flat background tint; no ::before interior needed. */
.quiz-tap-option[b-qhgae1fvw9] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* Glyph-to-text breathing room (the A/B/C/D letter badge that used to sit between them
       was removed 2026-07; the gap now separates the semantic glyph from the answer text). */
    gap: 0.55rem;
    width: 100%;
    min-height: 56px;
    padding: 0.6rem 0.85rem;
    background: var(--glytic-bg-medium);
    border: 1px solid var(--qf-line);
    border-radius: var(--qf-btn-radius);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    line-height: 1.4;
}

.quiz-tap-option:hover[b-qhgae1fvw9] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.quiz-tap-option.selected[b-qhgae1fvw9] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-text-primary);
}

.quiz-tap-option:disabled[b-qhgae1fvw9] {
    opacity: 0.5;
    pointer-events: none;
}

.quiz-tap-option-text[b-qhgae1fvw9] {
    flex: 1;
}

/* Locked state - max selections reached, unselected options fade */
.quiz-tap-option.locked[b-qhgae1fvw9] {
    opacity: 0.35;
    pointer-events: none;
    background: var(--glytic-bg-medium);
}

/* Selection count badge */
.quiz-select-count[b-qhgae1fvw9] {
    font-size: 0.7rem;
    color: rgba(var(--glytic-primary-rgb), 0.7);
    margin-left: 0.15rem;
}

/* Result-state tap options -- border + flat tint carry the semantic cue (icon cue lives in
   the qf-glyph child); text keeps full contrast, no opacity reduction. */
.quiz-tap-option.result-correct[b-qhgae1fvw9] {
    border-color: var(--qf-success-text);
    background: rgba(34, 197, 94, 0.18);
    color: var(--qf-success-text);
    cursor: default;
}

.quiz-tap-option.result-incorrect[b-qhgae1fvw9] {
    border-color: var(--qf-crimson-text);
    background: rgba(var(--qf-crimson-rgb), 0.16);
    color: var(--qf-crimson-text);
    cursor: default;
}

.quiz-tap-option.result-neutral[b-qhgae1fvw9] {
    opacity: 0.5;
    cursor: default;
}

.quiz-tap-option[b-qhgae1fvw9]  .quiz-tap-result-icon {
    flex-shrink: 0;
    margin-right: 0.35rem;
}

/* Quiz-specific Answer Styling Extensions */
.quiz-answer-option .mud-checkbox[b-qhgae1fvw9],
.quiz-answer-option .mud-radio[b-qhgae1fvw9] {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
}

.quiz-answer-option .mud-checkbox .mud-checkbox-label[b-qhgae1fvw9],
.quiz-answer-option .mud-radio .mud-radio-label[b-qhgae1fvw9] {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    color: #e2e8f0 !important;
    line-height: 1.4 !important;
}

/* Answer Options Styling */
.answer-options .mud-radio-group[b-qhgae1fvw9] {
    gap: 12px;
}

.answer-radio[b-qhgae1fvw9], 
.answer-checkbox[b-qhgae1fvw9] {
    transition: var(--glytic-transition);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--glytic-border);
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.answer-radio:hover[b-qhgae1fvw9],
.answer-checkbox:hover[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: var(--glytic-border-hover);
    /* Composed Strike: border + background shift only, no translate slide (QA5-3). */
}

.answer-radio .mud-radio-input:checked + .mud-radio-icons[b-qhgae1fvw9],
.answer-checkbox .mud-checkbox-input:checked + .mud-checkbox-icons[b-qhgae1fvw9] {
    color: var(--glytic-primary) !important;
    filter: drop-shadow(0 0 8px var(--glytic-primary));
}

/* Quiz Feature Buttons */
.feature-button[b-qhgae1fvw9] {
    transition: var(--glytic-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-radius: var(--glytic-border-radius-small);
}

.feature-button:hover[b-qhgae1fvw9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(var(--glytic-primary-rgb), 0.3);
}

/* Enhanced Quiz Completion Styles */
.score-badge[b-qhgae1fvw9] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.score-chip[b-qhgae1fvw9] {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

.stats-grid[b-qhgae1fvw9] {
    margin: 1rem 0;
}

.stat-item[b-qhgae1fvw9] {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    margin-bottom: 0.5rem;
}

.stat-number[b-qhgae1fvw9] {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.stat-label[b-qhgae1fvw9] {
    font-weight: 500;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.performance-analysis[b-qhgae1fvw9] {
    text-align: left;
}

.completion-actions[b-qhgae1fvw9] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .quiz-container[b-qhgae1fvw9] {
        min-height: calc(100vh - 56px - 2rem);
        min-height: calc(100dvh - 56px - 2rem);
    }

    /* Note: in an active session body.quiz-focus pins .fm-sticky to top:0 (app bar hidden);
       see the focus-mode block near the .fm-sticky base rule. */

    .quiz-loading-shell[b-qhgae1fvw9] {
        min-height: clamp(26rem, 64vh, 38rem);
        min-height: clamp(26rem, 64dvh, 38rem);
        gap: 1rem;
    }

    .quiz-loading-card-body[b-qhgae1fvw9] {
        padding: 1rem;
    }

    .quiz-loading-option[b-qhgae1fvw9] {
        min-height: 3rem;
    }

    .quiz-question-text[b-qhgae1fvw9] {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Compact stats responsive */
    .compact-stat-line[b-qhgae1fvw9] {
        font-size: 0.8rem !important;
    }
    
    .compact-stats .mud-card-content[b-qhgae1fvw9] {
        padding: 0.4rem !important;
    }
    
    .completion-actions[b-qhgae1fvw9] {
        flex-direction: column;
        align-items: center;
    }
    
    .completion-actions .ai-feature-button[b-qhgae1fvw9] {
        width: 100%;
        max-width: 300px;
    }
    
    .stat-item[b-qhgae1fvw9] {
        padding: 0.75rem;
    }
    
    .stat-number[b-qhgae1fvw9] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .quiz-loading-stage[b-qhgae1fvw9] {
        gap: 0.5rem;
    }

    .quiz-loading-pill[b-qhgae1fvw9] {
        width: 7rem;
    }

    .quiz-loading-pill--short[b-qhgae1fvw9] {
        width: 4.5rem;
    }

    .quiz-loading-question--short[b-qhgae1fvw9] {
        width: 88%;
    }

    .quiz-loading-status[b-qhgae1fvw9] {
        text-align: left;
    }

    .quiz-question-text[b-qhgae1fvw9] {
        font-size: 1.1rem !important;
    }

    /* Extra compact on small screens */
    .compact-stat-line[b-qhgae1fvw9] {
        font-size: 0.75rem !important;
    }
    
    .compact-stats .mud-card-content[b-qhgae1fvw9] {
        padding: 0.3rem !important;
    }
    
    /* Stack label and value on very small screens */
    .stat-label[b-qhgae1fvw9]::after {
        content: '\A';
        white-space: pre;
    }
    
    .compact-stat-line[b-qhgae1fvw9] {
        white-space: normal !important;
        text-align: center !important;
    }
}

/* Explanation Source Link Styling */
.explanation-source-section[b-qhgae1fvw9] {
    border-top: 1px solid rgba(0, 188, 212, 0.2);
    padding-top: 12px;
    text-align: center;
}

.explanation-source-btn[b-qhgae1fvw9] {
    border: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.875rem;
    text-transform: none;
    background: rgba(0, 188, 212, 0.08);
    color: #00bcd4;
    transition: all 0.2s ease;
}

.explanation-source-btn:hover[b-qhgae1fvw9] {
    background: rgba(0, 188, 212, 0.15);
    border-color: rgba(0, 188, 212, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.2);
}

/* AI Hint Section Styling - Below Submit Button */
.quiz-hint-section[b-qhgae1fvw9] {
    width: 100%;
    margin-top: 0.5rem;
}

.hint-toggle-btn[b-qhgae1fvw9] {
    text-transform: none;
    font-weight: 500;
    border-radius: 8px;
}

.quiz-hint-upsell[b-qhgae1fvw9] {
    width: 100%;
    margin-top: 0.5rem;
}

.premium-upsell-btn[b-qhgae1fvw9] {
    text-transform: none;
    font-weight: 500;
    border-radius: 8px;
}

/* AI Explanation Section Styling - Quiz Results */
.quiz-ai-explanation-section[b-qhgae1fvw9] {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.05);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.15);
    position: relative;
    transition: all 0.3s ease;
}

.quiz-ai-explanation-section:hover[b-qhgae1fvw9] {
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    border-color: rgba(var(--mud-palette-success-rgb), 0.25);
}

/* AI Explanation Button */
.ai-explanation-btn[b-qhgae1fvw9] {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 500;
}

.ai-explanation-btn:hover[b-qhgae1fvw9] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--mud-palette-success-rgb), 0.2);
}

/* AI Explanation Content Box - Enhanced Glassy Effect */
.quiz-ai-explanation-box[b-qhgae1fvw9] {
    background: linear-gradient(135deg, 
        rgba(var(--mud-palette-success-rgb), 0.08) 0%, 
        rgba(var(--mud-palette-success-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.2);
    border-radius: 8px;
    padding: 1rem;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideIn-b-qhgae1fvw9 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Glassy overlay effect */
.quiz-ai-explanation-box[b-qhgae1fvw9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 100%
    );
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

/* Loading state styling */
.quiz-ai-explanation-box.quiz-ai-explanation-loading[b-qhgae1fvw9] {
    background: linear-gradient(135deg, 
        rgba(var(--mud-palette-info-rgb), 0.05) 0%, 
        rgba(var(--mud-palette-info-rgb), 0.02) 100%);
    border-color: rgba(var(--mud-palette-info-rgb), 0.15);
    animation: pulse-b-qhgae1fvw9 1.5s ease-in-out infinite;
}

/* AI Explanation Header */
.quiz-ai-explanation-header[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-success);
    position: relative;
    z-index: 1;
}

.quiz-ai-explanation-header .mud-icon-root[b-qhgae1fvw9] {
    filter: drop-shadow(0 0 4px rgba(var(--mud-palette-success-rgb), 0.6));
    animation: glow-b-qhgae1fvw9 2s ease-in-out infinite;
}

/* Adaptive tier badge -- shown when explanation is personalized (analogy/simplified) */
.quiz-ai-tier-badge[b-qhgae1fvw9] {
    font-size: 0.7rem;
    font-weight: 500;
    font-style: italic;
    opacity: 0.75;
    color: var(--glytic-primary);
    margin-left: 0.5rem;
}

/* AI Explanation Content Text */
.quiz-ai-explanation-content[b-qhgae1fvw9] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    position: relative;
    z-index: 1;
}

.quiz-ai-explanation-content p[b-qhgae1fvw9] {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
}

.quiz-ai-explanation-content p:last-child[b-qhgae1fvw9] {
    margin-bottom: 0;
}

.quiz-ai-explanation-content strong[b-qhgae1fvw9] {
    color: var(--mud-palette-success);
    font-weight: 600;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.quiz-ai-explanation-content ul[b-qhgae1fvw9],
.quiz-ai-explanation-content ol[b-qhgae1fvw9] {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.quiz-ai-explanation-content li[b-qhgae1fvw9] {
    margin-bottom: 0.25rem;
}

/* Premium Upsell Section */
.quiz-explanation-upsell[b-qhgae1fvw9] {
    text-align: center;
    margin-top: 1rem;
}

.premium-upsell-btn[b-qhgae1fvw9] {
    opacity: 0.85;
    transition: all 0.3s ease;
    border-width: 1.5px;
}

/* ========================================
   PRACTICE MODE STYLING
   ======================================== */

/* Practice Mode Header */
.practice-mode-header[b-qhgae1fvw9] {
    margin-bottom: 1.5rem;
}

.practice-mode-header .mud-paper[b-qhgae1fvw9] {
    background: linear-gradient(135deg, 
        rgba(var(--glytic-primary-rgb), 0.1) 0%, 
        rgba(var(--glytic-primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 12px;
}

/* Practice Mode now lives in the focus-bar (fm-bar) overflow menu as a toggle; the old
   standalone toggle button was removed. */

/* Question Navigation Grid */
.question-nav-btn[b-qhgae1fvw9] {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.question-nav-btn:hover[b-qhgae1fvw9] {
    /* Composed Strike: no zoom/scale; keep the affordance to a border/background shift. */
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
}

.question-nav-btn.current[b-qhgae1fvw9] {
    box-shadow: 0 0 16px rgba(var(--glytic-primary-rgb), 0.6),
                0 0 24px rgba(var(--glytic-primary-rgb), 0.3);
}

.question-nav-btn.correct[b-qhgae1fvw9] {
    border-color: #2ecc71 !important;
}

.question-nav-btn.incorrect[b-qhgae1fvw9] {
    border-color: #e74c3c !important;
}

.question-nav-btn.marked[b-qhgae1fvw9] {
    border-color: #f39c12 !important;
    background: rgba(243, 156, 18, 0.1);
}

.question-nav-btn.unanswered[b-qhgae1fvw9] {
    opacity: 0.7;
}

/* Status Indicators Legend */
.status-indicator[b-qhgae1fvw9] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid;
    display: inline-block;
}

.status-indicator.current[b-qhgae1fvw9] {
    background-color: rgba(var(--glytic-primary-rgb), 0.3);
    border-color: var(--glytic-primary);
}

.status-indicator.correct[b-qhgae1fvw9] {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
}

.status-indicator.incorrect[b-qhgae1fvw9] {
    background-color: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
}

.status-indicator.marked[b-qhgae1fvw9] {
    background-color: rgba(243, 156, 18, 0.2);
    border-color: #f39c12;
}

/* Quiz Actions Container - Professional Layout */
.quiz-actions-container[b-qhgae1fvw9] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Practice Navigation Controls */
.practice-navigation-controls[b-qhgae1fvw9] {
    width: 100%;
    margin-top: 1rem;
}

/* Enhanced grid spacing for navigation buttons - prevent cramping */
.practice-navigation-controls .mud-grid[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Ensure grid items have proper spacing and don't collapse */
.practice-navigation-controls .mud-grid-item[b-qhgae1fvw9] {
    flex-grow: 0;
    flex-shrink: 0;
}

/* On larger screens, add balanced spacing between buttons */
@media (min-width: 600px) {
    .practice-navigation-controls .mud-grid[b-qhgae1fvw9] {
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .practice-navigation-controls .mud-grid-item[b-qhgae1fvw9] {
        min-width: 140px;
        max-width: 200px;
    }
}

.practice-nav-btn[b-qhgae1fvw9] {
    font-weight: 600 !important;
    border-width: 2px !important;
    transition: all 0.2s ease !important;
    min-height: 48px !important;
}

.practice-nav-btn:hover:not(:disabled)[b-qhgae1fvw9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(var(--glytic-primary-rgb), 0.3);
}

.practice-nav-btn:disabled[b-qhgae1fvw9] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive Practice Mode */
@media (max-width: 768px) {
    .question-nav-btn[b-qhgae1fvw9] {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 0.75rem !important;
    }

    .practice-mode-header .mud-grid[b-qhgae1fvw9] {
        gap: 0.5rem;
    }

    .status-indicator[b-qhgae1fvw9] {
        width: 16px;
        height: 16px;
    }
}

.premium-upsell-btn:hover[b-qhgae1fvw9] {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--mud-palette-warning-rgb), 0.3);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slideIn-b-qhgae1fvw9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-qhgae1fvw9 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes glow-b-qhgae1fvw9 {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(var(--mud-palette-success-rgb), 0.6));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(var(--mud-palette-success-rgb), 0.9));
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .quiz-ai-explanation-section[b-qhgae1fvw9] {
        padding: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .quiz-ai-explanation-section.admin-access[b-qhgae1fvw9]::before {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
    
    .quiz-ai-explanation-box[b-qhgae1fvw9] {
        padding: 0.75rem;
    }
    
    .quiz-ai-explanation-header[b-qhgae1fvw9] {
        font-size: 0.85rem;
    }
    
    .quiz-ai-explanation-content[b-qhgae1fvw9] {
        font-size: 0.875rem;
        line-height: 1.55;
    }
}

@media (max-width: 480px) {
    .quiz-ai-explanation-section[b-qhgae1fvw9] {
        padding: 0.4rem;
        margin-top: 0.5rem;
    }

    .quiz-ai-explanation-box[b-qhgae1fvw9] {
        padding: 0.6rem;
    }

    .quiz-ai-explanation-header[b-qhgae1fvw9] {
        font-size: 0.8rem;
    }

    .quiz-ai-explanation-content[b-qhgae1fvw9] {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* =========================================================
   MOBILE UX FIXES - 2026-02-07
   Addresses MOBILE-001 Issue 4: Quiz Page Mobile
   ========================================================= */

@media (max-width: 768px) {
    /* === EDGE-TO-EDGE MOBILE LAYOUT === */

    /* Strip MudContainer padding */
    .quiz-container[b-qhgae1fvw9]  .quiz-viewport {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Question card fills full width, no margin, minimal radius */
    .quiz-container[b-qhgae1fvw9]  .question-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Minimal inner padding on card content */
    .quiz-container[b-qhgae1fvw9]  .question-card > .mud-card-content {
        padding: 0.75rem 0.6rem !important;
    }

    /* Minimal inner padding on card actions */
    .quiz-container[b-qhgae1fvw9]  .question-card > .mud-card-actions {
        padding: 0.5rem 0.6rem !important;
    }

    /* Progress bar edge-to-edge */
    .quiz-progress-section[b-qhgae1fvw9] {
        padding: 0 !important;
        margin: 0 !important;
    }

    .quiz-progress-container[b-qhgae1fvw9] {
        padding: 0 !important;
    }

    /* Mobile question text -- legible and flowing full now that the scroll cage is gone. */
    .quiz-question-text[b-qhgae1fvw9] {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Tap answer options - compact for mobile */
    .quiz-tap-option[b-qhgae1fvw9] {
        min-height: 48px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    /* Scenario chip compact on mobile */
    .scenario-chip[b-qhgae1fvw9] {
        padding: 0.45rem 0.65rem;
        gap: 0.35rem;
    }

    .scenario-chip-preview[b-qhgae1fvw9] {
        font-size: 0.75rem;
    }

    /* Compact stats cards */
    .stats-card .mud-card-content[b-qhgae1fvw9] {
        padding: 0.5rem !important;
    }

    .compact-stat-line[b-qhgae1fvw9] {
        font-size: 0.8rem !important;
    }

    /* Practice mode header improvements */
    .practice-mode-header .mud-paper[b-qhgae1fvw9] {
        padding: 0.5rem !important;
    }

    .practice-mode-header .mud-chip[b-qhgae1fvw9] {
        font-size: 0.7rem !important;
    }

    /* Mark for review button - icon only on mobile */
    .practice-mode-header .mud-button .mud-button-label[b-qhgae1fvw9] {
        font-size: 0 !important;
    }

    .practice-mode-header .mud-button .mud-icon-root[b-qhgae1fvw9] {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    /* Even tighter padding on small phones */
    .quiz-container[b-qhgae1fvw9]  .question-card > .mud-card-content {
        padding: 0.5rem 0.45rem !important;
    }

    .quiz-container[b-qhgae1fvw9]  .question-card > .mud-card-actions {
        padding: 0.4rem 0.45rem !important;
    }

    .quiz-question-text[b-qhgae1fvw9] {
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem !important;
    }

    .quiz-tap-option[b-qhgae1fvw9] {
        min-height: 44px;
        padding: 0.45rem 0.65rem;
        font-size: 0.82rem;
    }

    /* Tighter progress bar on very small screens */
    .quiz-custom-progress-bar .quiz-progress-text[b-qhgae1fvw9] {
        gap: 0.5rem !important;
    }

    /* Stack navigation buttons */
    .practice-navigation-controls .mud-grid[b-qhgae1fvw9] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .practice-nav-btn[b-qhgae1fvw9] {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* MOBILE-002: Ultra-compact mobile stats */
@media (max-width: 768px) {
    .stats-card[b-qhgae1fvw9] {
        border-radius: 8px !important;
    }

    .stats-card .mud-card-content[b-qhgae1fvw9] {
        padding: 0.25rem 0.5rem !important;
    }

    .stat-label[b-qhgae1fvw9] {
        display: none !important;
    }

    .quiz-custom-progress-bar[b-qhgae1fvw9] {
        height: 22px !important;
    }

    .practice-mode-header .mud-expansion-panels[b-qhgae1fvw9] {
        display: none !important;
    }

    .practice-mode-header .mud-paper[b-qhgae1fvw9] {
        padding: 0.35rem 0.5rem !important;
    }
}

/* The standalone desktop stats grid was removed; running stats live in the focus-bar (fm-bar)
   and its overflow menu on every viewport. */

/* ========================================
   QUIZ OPTION C: INLINE RESULTS & STREAK
   ======================================== */

/* Streak fill rules moved to quizforge.css (global): the question card is a MudCard, which
   carries no CSS-isolation scope attribute, so scoped selectors here could never match it. */

/* Streak badge (used in mobile stats bar) */
.quiz-streak-badge[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.5px;
    margin-left: 0.25rem;
}

.quiz-streak-badge[b-qhgae1fvw9]  .mud-icon-root {
    font-size: 0.8rem !important;
}

/* Inline answer options with correct/incorrect highlighting */
.quiz-inline-answers[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz-inline-answer[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #e2e8f0;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.quiz-inline-answer.correct[b-qhgae1fvw9] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.quiz-inline-answer.incorrect[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.quiz-inline-answer.neutral[b-qhgae1fvw9] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    opacity: 0.6;
}

.quiz-inline-answer[b-qhgae1fvw9]  .quiz-inline-answer-icon {
    flex-shrink: 0;
}

.quiz-inline-answer-spacer[b-qhgae1fvw9] {
    width: 20px;
    flex-shrink: 0;
}

/* Quiz rating centered below inline results */
.quiz-rating-centered[b-qhgae1fvw9] {
    display: flex;
    justify-content: center;
}

/* Inline navigation row (side-by-side AI Deep Dive + Next, matches demo) */
.quiz-inline-nav-row[b-qhgae1fvw9] {
    display: flex;
    gap: 0.5rem;
}

.quiz-inline-nav-row[b-qhgae1fvw9]  .quiz-inline-nav-btn {
    flex: 1;
}

/* Swipe indicator (mobile-only) */
.quiz-swipe-indicator[b-qhgae1fvw9] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}

.quiz-swipe-indicator[b-qhgae1fvw9]  .mud-icon-root {
    font-size: 0.85rem !important;
}

/* Mobile: hide the MudCardActions duplicate nav (inline row replaces it) */
@media (max-width: 768px) {
    /* .mud-card-actions hiding moved to quizforge.css (quiz-inline-result is on MudCard, not HTML element) */

    .quiz-swipe-indicator[b-qhgae1fvw9] {
        display: flex;
    }
}

/* Translation buttons */
.translation-buttons-row[b-qhgae1fvw9] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.translation-btn[b-qhgae1fvw9] { font-size: 0.85rem; text-transform: none; opacity: 0.85; transition: opacity 0.25s ease; }
.translation-btn:hover[b-qhgae1fvw9] { opacity: 1; }

/* ========================================
   TRUE/FALSE QUESTION STYLES
   ======================================== */
.true-false-options[b-qhgae1fvw9] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.true-false-option[b-qhgae1fvw9] {
    flex: 1;
    padding: 1.25rem 1.5rem;
    border-radius: var(--qf-btn-radius);
    border: 1px solid var(--qf-line);
    background: var(--glytic-bg-medium);
    color: var(--glytic-text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    min-height: 56px;
    font-family: inherit;
}

.true-false-option:hover:not(:disabled)[b-qhgae1fvw9] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.true-false-option.selected[b-qhgae1fvw9] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-text-primary);
}

.true-false-option:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.true-false-option:disabled[b-qhgae1fvw9] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .true-false-options[b-qhgae1fvw9] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .true-false-option[b-qhgae1fvw9] {
        min-height: 48px;
        padding: 1rem;
    }
}

/* ========================================
   QUICK QUIZ MODE (5-min timer)
   ======================================== */

.quick-quiz-timer[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    color: var(--glytic-primary);
}

.quick-quiz-timer-warning[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    color: var(--glytic-error);
    animation: timerPulse-b-qhgae1fvw9 1s ease-in-out infinite;
}

@keyframes timerPulse-b-qhgae1fvw9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   DIFFICULTY BADGE (Phase C)
   ======================================== */

.difficulty-badge[b-qhgae1fvw9] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.difficulty-1[b-qhgae1fvw9] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.difficulty-2[b-qhgae1fvw9] {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.difficulty-3[b-qhgae1fvw9] {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.difficulty-4[b-qhgae1fvw9] {
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #fdba74;
}

.difficulty-5[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* =====================================================================
   Focus Mode Header
   ===================================================================== */

/* Keep the quiz header (exam name, position counter, controls) + the thin progress
   bar pinned just under the fixed 64px site app bar as the question scrolls. The
   offset matches the homepage search bar and the quiz-container layout calc. */
.fm-sticky[b-qhgae1fvw9] {
    position: sticky;
    top: 64px;
    z-index: 1100;
    background: var(--glytic-bg-dark);
    backdrop-filter: blur(10px);
}

/* Focus mode (phones): the global app bar is hidden, so the slim bar pins to the very
   top, clearing the notch via the safe-area inset, and the container fills the screen. */
@media (max-width: 768px) {
    body.quiz-focus .fm-sticky[b-qhgae1fvw9] {
        top: 0;
        padding-top: env(safe-area-inset-top);
    }

    body.quiz-focus .quiz-container[b-qhgae1fvw9] {
        min-height: calc(100dvh - 2rem);
    }
}

/* One slim 44px bar: question counter (left), timer + overflow menu (right). */
.fm-bar[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 1rem;
    height: 44px;
}

/* Question position counter (e.g. "17 / 50") -- the only always-on text in the bar. */
.fm-counter[b-qhgae1fvw9] {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--glytic-text-primary);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.fm-counter-total[b-qhgae1fvw9] {
    color: var(--glytic-text-muted);
    font-weight: 600;
}

.fm-bar-left[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

/* Exam name, centred between the counter and the controls; one line, ellipsised. flex-basis is 0
   rather than auto so the name only ever takes the width the counter and the timer/menu leave
   over: with basis auto a long name shares the shrink with .fm-bar-left (min-width: 0) and the
   counter, which Tests/AiTutor.spec.ts anchors, would be pushed under it on narrow tablets. */
.fm-bar-title[b-qhgae1fvw9] {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
}

/* Phones: the 44px counter row stays as it is (the left and right groups keep the bar's height)
   and the exam name wraps onto its own thinner line under it so nothing is squeezed out of a
   300px bar. The bar grows by that one line; it is still one sticky block above the question. */
@media (max-width: 600px) {
    .fm-bar[b-qhgae1fvw9] {
        flex-wrap: wrap;
        height: auto;
        row-gap: 0;
    }

    .fm-bar-left[b-qhgae1fvw9],
    .fm-bar-right[b-qhgae1fvw9] {
        height: 44px;
    }

    .fm-bar-title[b-qhgae1fvw9] {
        order: 1;
        flex: 0 0 100%;
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: left;
        padding-bottom: 0.3rem;
        margin-top: -0.125rem; /* any tighter and the ellipsised name sits under the menu button box */
    }
}

/* Running score, surfaced in the bar (e.g. "76%"). Tinted by how well it is going. */
.fm-score[b-qhgae1fvw9] {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.08rem 0.4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.fm-score--good[b-qhgae1fvw9] { color: #34d399; }
.fm-score--mid[b-qhgae1fvw9] { color: var(--glytic-score-mid, #fbbf24); }
.fm-score--low[b-qhgae1fvw9] { color: var(--glytic-text-secondary); }

.fm-bar-right[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Timer -- only shown for timed / exam-sim / quick sessions. Plain amber text, no badge. */
.fm-timer[b-qhgae1fvw9] {
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--glytic-score-mid);
    white-space: nowrap;
}

.fm-timer--urgent[b-qhgae1fvw9] {
    color: var(--glytic-error, #f87171);
    animation: fm-pulse-b-qhgae1fvw9 1s ease-in-out infinite;
}

@keyframes fm-pulse-b-qhgae1fvw9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Overflow menu trigger */
.fm-menu-wrapper[b-qhgae1fvw9] {
    position: relative;
}

.fm-more[b-qhgae1fvw9] {
    width: 40px;
    height: 40px;
    border-radius: var(--qf-btn-radius);
    border: none;
    background: transparent;
    color: var(--glytic-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fm-more:hover[b-qhgae1fvw9],
.fm-more--open[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-text-primary);
}

.fm-more:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Overflow menu popover -- absorbs flag, instant-reveal, restart, quit + running stats. */
.fm-menu[b-qhgae1fvw9] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 248px;
    background: var(--glytic-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 0.4rem;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.fm-popover-backdrop[b-qhgae1fvw9] {
    position: fixed;
    inset: 0;
    /* Just under the focus bar (z 1100) and its menu (z 1300 within the bar's context), so an
       outside tap lands on this layer and dismisses the menu while the bar + menu stay live
       above it. Rendered at .quiz-container level (not inside .fm-sticky) so its fixed inset:0
       resolves to the viewport -- the bar's backdrop-filter would otherwise become the
       containing block and collapse this overlay to the 44px bar. */
    z-index: 1099;
}

/* Running stats row, surfaced here instead of a separate strip on the page. */
.fm-menu-stats[b-qhgae1fvw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0.6rem 0.6rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    font-variant-numeric: tabular-nums;
}

.fm-menu-stat b[b-qhgae1fvw9] {
    color: var(--glytic-text-primary);
    font-weight: 700;
}

.fm-menu-streak[b-qhgae1fvw9] {
    color: var(--glytic-score-mid);
    font-weight: 700;
}

.fm-menu-item[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem;
    border: none;
    background: transparent;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fm-menu-item:hover[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
}

.fm-menu-item:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

.fm-menu-item--on[b-qhgae1fvw9] {
    color: var(--glytic-score-mid);
}

.fm-menu-item--quit:hover[b-qhgae1fvw9] {
    background: rgba(var(--qf-crimson-rgb), 0.08);
    color: var(--qf-crimson-text);
}

[b-qhgae1fvw9] .fm-menu-item .mud-icon-root {
    font-size: 18px;
}

/* Instant-reveal toggle row inside the menu (not a button -- the switch is the control) */
.fm-menu-toggle[b-qhgae1fvw9] {
    justify-content: space-between;
    cursor: default;
}

.fm-menu-toggle:hover[b-qhgae1fvw9] {
    background: transparent;
}

.fm-menu-toggle-info[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
}

.fm-menu-toggle-name[b-qhgae1fvw9] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.fm-menu-toggle-desc[b-qhgae1fvw9] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}

/* Progress BEAM -- the one deliberate diagonal on the answering screen. A -0.9deg
   tilted hairline with an ember fill whose leading edge is cut on the angle. Everything
   else on this surface stays orthogonal so this reads as the single accent. */
.fm-progress[b-qhgae1fvw9] {
    position: relative;
    height: 7px;
    background: transparent;
    overflow: clip;
}

.fm-progress[b-qhgae1fvw9]::before {
    content: "";
    position: absolute;
    left: -1%;
    right: -1%;
    top: 3px;
    height: 2px;
    background: var(--qf-line, rgba(255, 255, 255, 0.08));
    transform: rotate(-0.9deg);
}

.fm-progress-fill[b-qhgae1fvw9] {
    position: absolute;
    left: -1%;
    top: 3px;
    height: 2px;
    background: linear-gradient(90deg, var(--forge-primary), var(--forge-gold));
    transform: rotate(-0.9deg);
    transform-origin: left center;
    clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
    transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .fm-progress-fill[b-qhgae1fvw9] { transition: none; }
}

/* =====================================================================
   Sticky action dock -- primary action (Submit / Next) + rating + flag.
   Rendered OUTSIDE the question card so the fixed bar is not trapped by the
   card's backdrop-filter. Inline below the card on desktop; a fixed bottom
   bar on phones (focus mode). The tutor FAB rests inside the bar's band at
   the bottom-right; .quiz-dock--tutor-lane reserves its lane (see below).
   ===================================================================== */
.quiz-dock[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.quiz-dock--answer[b-qhgae1fvw9] {
    justify-content: center;
}

.quiz-dock--result[b-qhgae1fvw9] {
    justify-content: space-between;
}

.quiz-dock-meta[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 1;
}

/* Normalize the rating / comment / flag controls so they are all the same size: 20px icons
   in compact 28px buttons, matching the star size (the comment icon was cramped to ~13px and
   the flag button was a different size). ::deep reaches the child rating/flag components. */
.quiz-dock-meta[b-qhgae1fvw9]  .mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 4px !important;
}

.quiz-dock-meta[b-qhgae1fvw9]  .mud-icon-button .mud-icon-root,
.quiz-dock-meta[b-qhgae1fvw9]  .mud-rating-item .mud-icon-root {
    font-size: 20px !important;
}

/* Dock primary action (button system 2026-09-23): ember fill, ink label, real border/radius --
   the clip-path cut and uppercase tracking are retired for controls (cards keep the cut). */
.quiz-dock-submit[b-qhgae1fvw9] {
    width: 100%;
    max-width: 460px;
    min-height: var(--qf-btn-h-lg);
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz-dock-submit:hover:not(:disabled)[b-qhgae1fvw9] {
    background: var(--forge-gradient);
}

.quiz-dock-submit:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.quiz-dock-submit--disabled[b-qhgae1fvw9],
.quiz-dock-submit:disabled[b-qhgae1fvw9] {
    opacity: 0.4;
    cursor: not-allowed;
}

.quiz-dock-next[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--qf-btn-h-lg);
    padding: 0 1.4rem;
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz-dock-next:hover[b-qhgae1fvw9] {
    background: var(--forge-gradient);
}

.quiz-dock-next:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Phones: the dock becomes a fixed bottom bar (focus mode). */
@media (max-width: 768px) {
    body.quiz-focus .quiz-dock[b-qhgae1fvw9] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Sits above the fm-sticky header (1100) but BELOW the tutor FAB (1200), tutor scrim/sheet
           (1310/1311) and MudDialog (1400), so the AI tutor and any dialog float over the dock
           rather than the dock poking through them. The PWA install banner (1400) cannot obscure
           the Submit/Next action here because it is route-gated off /quiz in JS (PwaInstallPrompt:
           IsQuizRoute). Raising this above 1200 inverts the tutor stack -- that was the regression
           that hid the tutor FAB behind this dock on mobile. */
        z-index: 1150;
        margin-top: 0;
        padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
        background: rgba(12, 16, 24, 0.94);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    /* The dock-space reservation lives in quizforge.css (global) because the .quiz-viewport
       MudContainer is a child component that scoped CSS cannot target. */

    /* L3 touch targets: on the result screen the rating / comment / flag controls were ~20-28px,
       under the 44px touch minimum and easy to mis-tap on the fixed bottom bar. Stack the meta
       row above a full-width Next button so the targets can grow without overflowing a narrow
       phone row. */
    body.quiz-focus .quiz-dock--result[b-qhgae1fvw9] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    body.quiz-focus .quiz-dock--result .quiz-dock-meta[b-qhgae1fvw9] {
        justify-content: center;
        gap: 0.4rem;
    }

    body.quiz-focus .quiz-dock--result .quiz-dock-next[b-qhgae1fvw9] {
        width: 100%;
        justify-content: center;
    }

    /* Comment + flag are single buttons, so give them the full 44px square touch target.
       !important is required to override the compact 28px dock rule above and the rating
       component's own 20px mobile rule -- both already use !important. */
    .quiz-dock-meta[b-qhgae1fvw9]  .comment-icon-inline,
    .quiz-dock-meta[b-qhgae1fvw9]  .flag-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 10px !important;
    }

    /* Rating stars: a 44px-tall touch area (the axis a thumb mis-taps on a bottom bar), kept
       ~34px wide so all five fit on one centered row; the star icon itself stays small.
       In MudBlazor 7 each star is a span.mud-rating-item wrapping an <svg> (no inner button),
       so size the item directly and center its icon. */
    .quiz-dock-meta[b-qhgae1fvw9]  .mud-rating-item {
        width: 34px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}

/* Tutor FAB lane: the AI tutor's collapsed launcher (AiTutorPanel.razor.css) is a fixed 54px
   circle that rests INSIDE this dock's band, bottom-right (right: 14px). Reserve that column
   on the dock whenever the FAB can appear (.quiz-dock--tutor-lane: authenticated, not exam
   simulation) so Submit, Next, and the rating/flag row never extend under the circle -- the
   fix for both the "advisor covers the flag" report and the mobile-QA content-overlap defect.
   Media arms mirror the FAB's own mobile block: portrait phones and short coarse landscape. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    body.quiz-focus .quiz-dock.quiz-dock--tutor-lane[b-qhgae1fvw9] {
        padding-right: 78px; /* 14px edge inset + 54px FAB + 10px gap */
    }
}

/* Toggle switch */
.fm-toggle[b-qhgae1fvw9] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.fm-toggle input[b-qhgae1fvw9] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.fm-toggle-track[b-qhgae1fvw9] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    transition: background 0.2s, border-color 0.2s;
}

.fm-toggle input:checked ~ .fm-toggle-track[b-qhgae1fvw9] {
    background: rgba(0, 255, 231, 0.2);
    border-color: rgba(0, 255, 231, 0.4);
}

.fm-toggle-thumb[b-qhgae1fvw9] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #4b5563;
    transition: left 0.2s, background 0.2s;
}

.fm-toggle input:checked ~ .fm-toggle-track .fm-toggle-thumb[b-qhgae1fvw9] {
    left: 19px;
    background: var(--glytic-primary);
}

/* =====================================================================
   Answer Options -- Focus Mode
   ===================================================================== */
.answer-options.quiz-tap-answers[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Answer tile, focus-mode instance (button system 2026-09-23): this block loads after the base
   .quiz-tap-option rule above and wins for the properties both define, so it must independently
   produce the full recipe -- real 1px border, 8px radius, no clip-path/::before double-layer.
   State (hover/selected/correct/incorrect) recolors border + a flat background tint; the
   semantic glyph child (qf-glyph) still carries its own correct/wrong fill as the icon cue. */
.quiz-tap-option[b-qhgae1fvw9] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid var(--qf-line);
    border-radius: var(--qf-btn-radius);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quiz-tap-option:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.quiz-tap-option:hover:not(.result-correct):not(.result-incorrect):not(.result-neutral):not(.selected)[b-qhgae1fvw9] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

/* Alignment for the semantic glyph against the first line of option text */
.quiz-tap-option .qf-glyph[b-qhgae1fvw9] {
    margin-top: 4px;
}

/* Selected (pre-grade): ember border + faint ember wash. The glyph shape is set by question
   type (round via qf-glyph--round for single-answer, square for multiple-response). */
.quiz-tap-option.selected[b-qhgae1fvw9] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
}

.quiz-tap-option.selected .qf-glyph[b-qhgae1fvw9] {
    border-color: var(--forge-primary);
}

/* Correct -- teal border + teal wash; the glyph (qf-glyph--correct) fills teal as the icon cue.
   Shape stays what the question type dictates. */
.quiz-tap-option.result-correct[b-qhgae1fvw9] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.16);
    cursor: default;
}

/* Wrong -- the user's incorrect pick: crimson border + crimson wash; glyph is qf-glyph--wrong
   (filled crimson) as the icon cue. Shape follows question type. */
.quiz-tap-option.result-incorrect[b-qhgae1fvw9] {
    border-color: var(--qf-crimson-text);
    background: rgba(var(--qf-crimson-rgb), 0.16);
    cursor: default;
}

/* Neutral -- not selected, not correct */
.quiz-tap-option.result-neutral[b-qhgae1fvw9] {
    opacity: 0.32;
    cursor: default;
}

/* (Answer-option letter badges removed 2026-07 -- the semantic glyph + answer text carry the
   option now; the redundant A/B/C/D badge was dropped per owner feedback. GetAnswerLetter is
   still used to build the AI-tutor context capsule, just not rendered visually.) */

/* Multiple select hint */
.fm-multi-hint[b-qhgae1fvw9] {
    font-size: 0.68rem;
    color: var(--glytic-text-muted);
    font-style: italic;
    margin-bottom: 0.5rem;
}


/* =====================================================================
   Explanation Panel -- Slide-Up
   ===================================================================== */
.fm-panel[b-qhgae1fvw9] {
    background: rgba(17, 24, 39, 0.98);
    border-left: 3px solid var(--glytic-primary);
    padding: 1rem 1rem 1rem 1.1rem;
    animation: fm-slide-up-b-qhgae1fvw9 0.28s ease-out;
    margin-top: 0.5rem;
}

/* The explanation rule stays teal even on a wrong answer (the crimson lives on the
   option + the label); this keeps the "here is the teaching" affordance consistent. */
.fm-panel--wrong[b-qhgae1fvw9] {
    border-left-color: var(--glytic-primary);
}

/* Opacity-only entrance. A transform here (even the resolved translateY(0)) turns
   .fm-panel into a containing block for position:fixed, which trapped the AI tutor's
   bottom-sheet / scrim / collapsed pill inside the result panel instead of the viewport --
   the root cause of the "fixed" mobile sheet behaving buggily. No transform = no trap. */
@keyframes fm-slide-up-b-qhgae1fvw9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fm-panel-header[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.fm-panel-label[b-qhgae1fvw9] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--glytic-primary);
}

.fm-panel-label--wrong[b-qhgae1fvw9] {
    color: var(--qf-crimson-text);
}

.fm-panel-explanation[b-qhgae1fvw9] {
    margin-bottom: 0.625rem;
}

.fm-panel-text[b-qhgae1fvw9] {
    font-size: 0.82rem;
    color: var(--glytic-text-secondary);
    line-height: 1.6;
}

.fm-panel-source[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.625rem;
    font-size: 0.7rem;
}

.fm-panel-source a[b-qhgae1fvw9] {
    color: var(--glytic-primary);
    text-decoration: none;
}

.fm-panel-source a:hover[b-qhgae1fvw9] {
    text-decoration: underline;
}

/* The View reference action is now a button (opens the in-app SourceViewer overlay
   instead of navigating away); keep the exact visual language of the old link. */
.fm-source-open[b-qhgae1fvw9] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--glytic-text-secondary);
    cursor: pointer;
}

.fm-source-open:hover[b-qhgae1fvw9] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.fm-source-open:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Launcher after the explanation text: opens the full grounding blurb dialog. Icon-only,
   gold = source-verified accent (matches fm-panel-grounding below). Auto left margin
   right-aligns it inside the block panel. */
.fm-grounding-launch-btn[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0.5rem auto;
    padding: 0;
    border: 1px solid rgba(var(--qf-gold-rgb), 0.35);
    border-radius: var(--qf-btn-radius);
    background: rgba(var(--qf-gold-rgb), 0.06);
    color: var(--qf-gold);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fm-grounding-launch-btn:hover[b-qhgae1fvw9],
.fm-grounding-launch-btn:focus-visible[b-qhgae1fvw9] {
    border-color: rgba(var(--qf-gold-rgb), 0.7);
    background: rgba(var(--qf-gold-rgb), 0.12);
}

.fm-grounding-launch-btn:focus-visible[b-qhgae1fvw9] {
    outline: 2px solid var(--qf-gold);
    outline-offset: 2px;
}

/* Verified source citation ("grounding receipt") -- gold, the source-verified accent
   (distinct from teal teaching + crimson state). */
.fm-panel-grounding[b-qhgae1fvw9] {
    margin-bottom: 0.625rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(var(--qf-gold-rgb), 0.28);
    border-left: 3px solid rgba(var(--qf-gold-rgb), 0.75);
    background: rgba(var(--qf-gold-rgb), 0.06);
}

.fm-grounding-header[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

/* Now a button (opens the How-we-verify overlay instead of navigating away);
   reset chrome so it keeps the old link's visual language. */
.fm-grounding-verify-link[b-qhgae1fvw9] {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--qf-gold);
    text-decoration: none;
    opacity: 0.85;
    cursor: pointer;
}

.fm-grounding-verify-link:hover[b-qhgae1fvw9] {
    text-decoration: underline;
    opacity: 1;
}

.fm-grounding-chip[b-qhgae1fvw9] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.fm-grounding-quote[b-qhgae1fvw9] {
    margin: 0;
    padding: 0 0 0 0.6rem;
    border-left: 2px solid rgba(var(--qf-gold-rgb), 0.4);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fm-grounding-panels[b-qhgae1fvw9] {
    background: transparent;
}

/* Attribution line naming the rightsholder of the quoted excerpt */
.fm-grounding-attribution[b-qhgae1fvw9] {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--glytic-text-secondary);
    opacity: 0.8;
    overflow-wrap: anywhere;
}

/* Reference tier (source.tier == "reference"): the excerpt comes from a reference
   publisher, not the certifying body, so it must not wear the gold "official" accent.
   Muted neutral tokens; same layout, so the panel reads as a receipt, just a weaker one. */
.fm-panel-grounding--reference[b-qhgae1fvw9] {
    border-color: var(--glytic-border);
    border-left-color: var(--glytic-text-muted);
    background: transparent;
}

.fm-panel-grounding--reference .fm-grounding-quote[b-qhgae1fvw9] {
    border-left-color: var(--glytic-border);
}

.fm-panel-grounding--reference .fm-grounding-verify-link[b-qhgae1fvw9] {
    color: var(--glytic-text-secondary);
}

.fm-grounding-chip--reference[b-qhgae1fvw9] {
    color: var(--glytic-text-secondary);
}

.fm-grounding-publisher[b-qhgae1fvw9] {
    font-style: normal;
}

/* Concept-mode note: states plainly that the citation supports the reasoning, not
   that the keyed answer is certified. Visible (not a tooltip) because it's a trust
   qualifier on the claim. */
.fm-grounding-disclaimer[b-qhgae1fvw9] {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--glytic-text-secondary);
    opacity: 0.85;
}

/* AI Deep Dive button */
.fm-ai-dive-btn[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.18);
    border-radius: 7px;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    margin-bottom: 0.625rem;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}

.fm-ai-dive-btn:hover:not(:disabled)[b-qhgae1fvw9] {
    background: rgba(167, 139, 250, 0.1);
}

.fm-ai-dive-btn:disabled[b-qhgae1fvw9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fm-ai-dive-content[b-qhgae1fvw9] {
    background: rgba(167, 139, 250, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
    line-height: 1.6;
}

/* Upsell */
.fm-upsell-btn[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.625rem;
}

/* ========== Empty State (no quiz context) ========== */
.quiz-empty-state[b-qhgae1fvw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    margin: 2rem auto;
    max-width: 480px;
}

.quiz-empty-actions[b-qhgae1fvw9] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ========== Return-to-context back affordance ==========
   Unobtrusive chevron + short label shown when the quiz was launched from a known
   context (My Tests / Study Hub). Sits in normal flow at the very top of the quiz,
   ABOVE the sticky question header -- it scrolls away on scroll, so it never overlaps
   the question card, the sticky header, or the position:fixed AI tutor bottom sheet.
   Honours the iOS safe-area inset so it clears notches/dynamic islands. */
.quiz-return-link[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: calc(0.5rem + env(safe-area-inset-top, 0px)) 0 0.25rem 0.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.35rem;
    border-radius: var(--glytic-border-radius-small);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--glytic-text-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.quiz-return-link:hover[b-qhgae1fvw9],
.quiz-return-link:focus-visible[b-qhgae1fvw9] {
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-color: var(--glytic-border);
    outline: none;
}

.quiz-return-label[b-qhgae1fvw9] {
    white-space: nowrap;
}

/* Auto-resume banner: names the silent mid-attempt landing and offers a clean start. */
.quiz-resume-banner[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--glytic-border);
    border-left: 3px solid var(--glytic-primary);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-gradient-card);
}

.quiz-resume-text[b-qhgae1fvw9] {
    font-size: 0.85rem;
    color: var(--glytic-text-secondary);
}

.quiz-resume-actions[b-qhgae1fvw9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.quiz-resume-fresh[b-qhgae1fvw9] {
    min-height: var(--qf-btn-h-sm);
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--glytic-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz-resume-fresh:hover[b-qhgae1fvw9] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.quiz-resume-fresh:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.quiz-resume-dismiss[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--qf-btn-radius);
    background: none;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.quiz-resume-dismiss:hover[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-text-primary);
}

.quiz-resume-dismiss:focus-visible[b-qhgae1fvw9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Hydration gate (prerendered HTML, before the first interactive render): the option is disabled
   so a tap is not silently swallowed, but it must not read as locked or broken. */
.quiz-tap-option[aria-busy="true"]:disabled[b-qhgae1fvw9],
.true-false-option[aria-busy="true"]:disabled[b-qhgae1fvw9] {
    cursor: progress;
    opacity: 1;
}
/* /Pages/Register.razor.rz.scp.css */
/* Register page — wider panel to prevent title wrapping */
.qf-panel-col[b-49yise4497] {
    max-width: 500px;
}
/* /Pages/RegistrationSuccess.razor.rz.scp.css */
/* Registration Success — layout handled by .qf-panel-page / .qf-panel in quizforge.css */

.success-title[b-vom2p5ti1q] {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.success-subtitle[b-vom2p5ti1q] {
    color: var(--glytic-primary);
    font-weight: 500;
}

.email-info-box[b-vom2p5ti1q] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 1.5rem;
}

.email-address[b-vom2p5ti1q] {
    color: var(--glytic-primary);
    font-weight: 600;
    word-break: break-all;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: inline-block;
}

.info-alert[b-vom2p5ti1q] { border-radius: 12px; border-width: 2px; }
.info-content[b-vom2p5ti1q] { padding: 0.5rem 0; }
.info-list[b-vom2p5ti1q] { margin-top: 0.75rem; }
.info-item[b-vom2p5ti1q] { display: flex; align-items: center; padding: 0.5rem 0; color: #b0b0b0; }
.alert-custom[b-vom2p5ti1q] { border-radius: 8px; font-weight: 500; }

.action-buttons[b-vom2p5ti1q] { margin-top: 2rem; }

/* Both button classes need ::deep: MudButton renders Class= on its own root element,
   which never carries this component's scope attribute. The ".action-buttons"/
   ".secondary-buttons" ancestor ties the global button-system rules' specificity
   (two classes); this bundle loads after mudblazor-overrides.css so ties go to us. */
.action-buttons[b-vom2p5ti1q]  .primary-button {
    min-height: var(--qf-btn-h-lg);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.secondary-buttons[b-vom2p5ti1q] { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: nowrap; }
.secondary-buttons[b-vom2p5ti1q]  .secondary-button {
    text-transform: none;
    font-weight: 600;
    border-radius: var(--qf-btn-radius);
    flex: 1 1 auto;
    min-width: 140px;
}

@media (max-width: 768px) {
    .success-title[b-vom2p5ti1q] { font-size: 2rem; }
    .secondary-buttons[b-vom2p5ti1q] { flex-direction: column; }
    .secondary-button[b-vom2p5ti1q] { width: 100%; min-width: unset; }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Reset Password page — layout handled by .qf-panel-page / .qf-panel in quizforge.css */
/* /Pages/ResourceDetail.razor.rz.scp.css */
.resource-detail-page[b-47p1r8pwx7] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    min-height: calc(100vh - 64px - 4rem);
    min-height: calc(100dvh - 64px - 4rem);
}

/* Two-column layout at desktop: article + TOC sidebar */
.resource-article-layout[b-47p1r8pwx7] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .resource-article-layout[b-47p1r8pwx7] {
        grid-template-columns: 1fr;
    }

    .resource-toc-sidebar[b-47p1r8pwx7] {
        display: none;
    }
}

.resource-loading[b-47p1r8pwx7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
}

.resource-not-found[b-47p1r8pwx7] {
    text-align: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
}

.resource-not-found h2[b-47p1r8pwx7] {
    margin: 1rem 0 0.5rem;
    color: var(--glytic-text-primary, #fff);
}

.resource-not-found p[b-47p1r8pwx7] {
    margin-bottom: 1.5rem;
}

.resource-breadcrumb[b-47p1r8pwx7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
    margin-bottom: 2rem;
}

.resource-breadcrumb a[b-47p1r8pwx7] {
    color: var(--glytic-primary);
    text-decoration: none;
}

.resource-breadcrumb a:hover[b-47p1r8pwx7] {
    text-decoration: underline;
}

.breadcrumb-sep[b-47p1r8pwx7] {
    opacity: 0.4;
}

.resource-article-header[b-47p1r8pwx7] {
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--glytic-border);
}

[b-47p1r8pwx7] .article-category-chip {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* Category color variants */
[b-47p1r8pwx7] .article-category-chip--guide {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
}

[b-47p1r8pwx7] .article-category-chip--tip {
    background: rgba(46, 213, 115, 0.12);
    color: #2ed573;
}

[b-47p1r8pwx7] .article-category-chip--comparison {
    background: rgba(255, 165, 0, 0.12);
    color: #ffa502;
}

[b-47p1r8pwx7] .article-category-chip--career {
    background: rgba(var(--qf-crimson-rgb), 0.12);
    color: var(--qf-crimson-text);
}

[b-47p1r8pwx7] .article-category-chip--science {
    background: rgba(70, 130, 255, 0.12);
    color: #4682ff;
}

.resource-article-title[b-47p1r8pwx7] {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #fff);
    margin: 0 0 1rem;
    line-height: 1.25;
}

.resource-article-meta[b-47p1r8pwx7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.5));
}

.article-author[b-47p1r8pwx7]::after {
    content: "\00B7";
    margin-left: 0.75rem;
}

.article-exam-link[b-47p1r8pwx7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--glytic-primary);
    margin-top: 0.85rem;
}

/* ---- Article Body ---- */

/* The body is injected as a raw HTML MarkupString, so its child elements do NOT carry the
   component's scoped-CSS attribute. ::deep is required for these rules to reach the rendered
   markdown -- without it the headings/paragraphs/tables fall back to global element defaults.
   max-width keeps line length in the comfortable ~65-75 character range for readability. */
.resource-article-body[b-47p1r8pwx7] {
    color: var(--glytic-text-primary, rgba(255,255,255,0.9));
    line-height: 1.9;
    font-size: 1.0625rem; /* 17px */
    max-width: 72ch;
}

.resource-article-body[b-47p1r8pwx7]  h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 3rem 0 1rem;
    padding-left: 0.85rem;
    border-left: 3px solid var(--glytic-primary);
    color: var(--glytic-text-primary, #fff);
    line-height: 1.3;
    font-family: var(--glytic-font-heading);
}

.resource-article-body[b-47p1r8pwx7]  h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--glytic-text-primary, #fff);
}

.resource-article-body[b-47p1r8pwx7]  h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.75));
}

.resource-article-body[b-47p1r8pwx7]  p {
    margin: 0 0 1.25rem;
}

.resource-article-body[b-47p1r8pwx7]  ul,
.resource-article-body[b-47p1r8pwx7]  ol {
    margin: 0 0 1.25rem;
    padding-left: 1.6rem;
}

.resource-article-body[b-47p1r8pwx7]  li {
    margin-bottom: 0.6rem;
    line-height: 1.75;
}

.resource-article-body[b-47p1r8pwx7]  li > ul,
.resource-article-body[b-47p1r8pwx7]  li > ol {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Callout block */
.resource-article-body[b-47p1r8pwx7]  blockquote {
    border-left: 3px solid var(--glytic-primary);
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background: rgba(var(--glytic-primary-rgb), 0.07);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    color: var(--glytic-text-primary, rgba(255,255,255,0.9));
    line-height: 1.75;
}

.resource-article-body[b-47p1r8pwx7]  blockquote p {
    margin: 0;
}

.resource-article-body[b-47p1r8pwx7]  code {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.resource-article-body[b-47p1r8pwx7]  pre {
    background: var(--glytic-bg-card, rgba(26, 30, 48, 0.6));
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.resource-article-body[b-47p1r8pwx7]  pre code {
    background: transparent;
    padding: 0;
}

/* Table scroll wrapper -- injected by C# post-processing */
.resource-article-body[b-47p1r8pwx7]  .resource-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 8px;
    border: 1px solid var(--glytic-border);
}

.resource-article-body[b-47p1r8pwx7]  .resource-table-wrap table {
    margin: 0;
    border: none;
    border-radius: 0;
}

.resource-article-body[b-47p1r8pwx7]  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border-radius: 8px;
    overflow: hidden;
}

.resource-article-body[b-47p1r8pwx7]  th,
.resource-article-body[b-47p1r8pwx7]  td {
    border: 1px solid var(--glytic-border);
    padding: 0.65rem 1rem;
    text-align: left;
}

.resource-article-body[b-47p1r8pwx7]  th {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-text-primary, #fff);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.resource-article-body[b-47p1r8pwx7]  tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
}

.resource-article-body[b-47p1r8pwx7]  td {
    color: var(--glytic-text-secondary, rgba(255,255,255,0.75));
}

.resource-article-body[b-47p1r8pwx7]  a {
    color: var(--glytic-primary);
    text-decoration: none;
}

.resource-article-body[b-47p1r8pwx7]  a:hover {
    text-decoration: underline;
}

.resource-article-body[b-47p1r8pwx7]  strong {
    color: var(--glytic-text-primary, #fff);
    font-weight: 600;
}

.resource-article-body[b-47p1r8pwx7]  hr {
    border: none;
    border-top: 1px solid var(--glytic-border);
    margin: 2.5rem 0;
}

/* ---- TOC Sidebar ---- */

.resource-toc-sidebar[b-47p1r8pwx7] {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--glytic-bg-card, rgba(26, 30, 48, 0.6));
    border: 1px solid var(--glytic-border);
    border-radius: 10px;
    font-size: 0.82rem;
}

.toc-heading[b-47p1r8pwx7] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted, rgba(255,255,255,0.4));
    margin-bottom: 0.75rem;
}

.toc-list[b-47p1r8pwx7] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.toc-item a[b-47p1r8pwx7] {
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
    display: block;
    padding: 0.15rem 0;
}

.toc-item a:hover[b-47p1r8pwx7] {
    color: var(--glytic-primary);
}

.toc-item--h3 a[b-47p1r8pwx7] {
    padding-left: 0.85rem;
    font-size: 0.78rem;
    opacity: 0.8;
}

@media (max-width: 600px) {
    .resource-detail-page[b-47p1r8pwx7] {
        padding: 1.5rem 1rem 3rem;
    }

    .resource-article-title[b-47p1r8pwx7] {
        font-size: 1.6rem;
    }

    .resource-article-body[b-47p1r8pwx7] {
        font-size: 1rem;
    }

    .resource-article-body[b-47p1r8pwx7]  h2 {
        font-size: 1.3rem;
    }

    .resource-article-body[b-47p1r8pwx7]  h3 {
        font-size: 1.1rem;
    }
}

.article-author-bio[b-47p1r8pwx7] {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
}
/* /Pages/Resources.razor.rz.scp.css */
.resources-page[b-tnsvsoj7im] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    min-height: calc(100vh - 64px - 4rem);
    min-height: calc(100dvh - 64px - 4rem);
}

.resources-header[b-tnsvsoj7im] {
    text-align: center;
    margin-bottom: 3rem;
}

.resources-title[b-tnsvsoj7im] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #fff);
    margin: 0 0 0.6rem;
}

.resources-subtitle[b-tnsvsoj7im] {
    font-size: 1.05rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    margin: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.resources-loading[b-tnsvsoj7im] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
}

.resources-empty[b-tnsvsoj7im] {
    text-align: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
}

.resources-empty p[b-tnsvsoj7im] {
    margin-top: 1rem;
}

a.resource-card[b-tnsvsoj7im] {
    text-decoration: none;
    color: inherit;
}

.resource-card[b-tnsvsoj7im] {
    cursor: pointer;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* .ai-card-style clips the card (Composed Strike cut corners), which shears box-shadow;
   hover moves to border + background so it stays visible inside the clipped shape. */
.resource-card:hover[b-tnsvsoj7im] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

.resource-card-category[b-tnsvsoj7im] {
    display: flex;
}

/* Category chip — base */
[b-tnsvsoj7im] .category-chip {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Category color variants */
[b-tnsvsoj7im] .category-chip--guide {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
}

[b-tnsvsoj7im] .category-chip--tip {
    background: rgba(46, 213, 115, 0.12);
    color: #2ed573;
}

[b-tnsvsoj7im] .category-chip--comparison {
    background: rgba(255, 165, 0, 0.12);
    color: #ffa502;
}

[b-tnsvsoj7im] .category-chip--career {
    background: rgba(var(--qf-crimson-rgb), 0.12);
    color: var(--qf-crimson-text);
}

[b-tnsvsoj7im] .category-chip--science {
    background: rgba(70, 130, 255, 0.12);
    color: #4682ff;
}

.resource-card-title[b-tnsvsoj7im] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--glytic-text-primary, #fff);
    margin: 0;
    line-height: 1.4;
}

.resource-card-summary[b-tnsvsoj7im] {
    font-size: 0.875rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    margin: 0;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-card-meta[b-tnsvsoj7im] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.45));
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.resource-card-author[b-tnsvsoj7im]::after {
    content: "\00B7";
    margin-left: 0.75rem;
}

.resource-card-exam[b-tnsvsoj7im] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--glytic-primary);
}

@media (max-width: 600px) {
    .resources-page[b-tnsvsoj7im] {
        padding: 1.5rem 1rem 3rem;
        min-height: calc(100vh - 56px - 3rem);
        min-height: calc(100dvh - 56px - 3rem);
    }

    .resources-title[b-tnsvsoj7im] {
        font-size: 1.6rem;
    }
}
/* /Pages/Share.razor.rz.scp.css */
.share-page-title.visually-hidden[b-eip2txdoad] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.share-page[b-eip2txdoad] {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1rem;
    min-height: calc(100vh - 64px - 4rem);
    min-height: calc(100dvh - 64px - 4rem);
}

.share-page-loading[b-eip2txdoad] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
}

.share-card-display[b-eip2txdoad] {
    text-align: center;
}

/* Composed Strike (2026-07, Task 11): cut-corner geometry; clip-path shears box-shadow
   so the share-card hero elevation moves to drop-shadow. */
.share-card-hero[b-eip2txdoad] {
    max-width: 100%;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 1px solid var(--glytic-border);
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.3));
}

/* .share-expired-card / .share-cta-card are classes on MudCard components, which do not
   carry the page scope attribute -- reach them through the native .share-page root with
   ::deep so the cut-corner treatment actually applies. */
.share-page[b-eip2txdoad]  .share-expired-card,
.share-page[b-eip2txdoad]  .share-cta-card {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

/* Double-layer reveal: element bg = hairline border color; ::before = card interior,
   so the border follows the cut corners (a real border is sheared by clip-path).
   z-index:-1 + isolation on the card; Mud-rendered children need no lift. */
.share-page[b-eip2txdoad]  .share-expired-card::before,
.share-page[b-eip2txdoad]  .share-cta-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-card);
    z-index: -1;
    pointer-events: none;
}

.share-page[b-eip2txdoad]  .share-expired-card .mud-typography-h5,
.share-page[b-eip2txdoad]  .share-cta-card .mud-typography-h5 {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.015em;
}

/* Get Started CTA -> primary recipe: ember fill, ink label (the root layer already renders
   this; this override only needed to drop the retired cut-corner plate treatment). */
.share-page[b-eip2txdoad]  .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    font-weight: 700;
    letter-spacing: 0;
}

.share-page[b-eip2txdoad]  .mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--forge-gradient);
}

.share-page[b-eip2txdoad]  .mud-button-filled.mud-button-filled-primary .mud-button-label {
    color: var(--qf-ink);
}

.share-page[b-eip2txdoad]  .mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .share-page[b-eip2txdoad] {
        min-height: calc(100vh - 56px - 3rem);
        min-height: calc(100dvh - 56px - 3rem);
    }
}
/* /Pages/Terms.razor.rz.scp.css */
.legal-page[b-uldbzoade7] {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 1.5rem 4rem;
    color: var(--glytic-text-primary);
}

.legal-header[b-uldbzoade7] {
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1[b-uldbzoade7] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, #8FD0DE 0%, var(--glytic-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-effective[b-uldbzoade7] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.legal-content[b-uldbzoade7] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legal-section[b-uldbzoade7] {
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.legal-section h2[b-uldbzoade7] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--glytic-primary);
    margin: 0 0 1rem;
}

.legal-section h3[b-uldbzoade7] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin: 1.25rem 0 0.5rem;
}

.legal-section h3:first-of-type[b-uldbzoade7] {
    margin-top: 0;
}

.legal-section p[b-uldbzoade7] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.legal-section p:last-child[b-uldbzoade7] {
    margin-bottom: 0;
}

.legal-section ul[b-uldbzoade7] {
    color: var(--glytic-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0.75rem;
}

.legal-section ul:last-child[b-uldbzoade7] {
    margin-bottom: 0;
}

.legal-section li[b-uldbzoade7] {
    margin-bottom: 0.4rem;
}

.legal-section li[b-uldbzoade7]::marker {
    color: var(--glytic-primary);
}

.legal-section a[b-uldbzoade7] {
    color: var(--glytic-primary);
    text-decoration: none;
    transition: opacity var(--glytic-transition);
}

.legal-section a:hover[b-uldbzoade7] {
    opacity: 0.8;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .legal-page[b-uldbzoade7] {
        padding: 60px 1rem 3rem;
    }

    .legal-section[b-uldbzoade7] {
        padding: 1.25rem;
    }
}
/* /Pages/Tools/DocumentExamLanding.razor.rz.scp.css */
/* =============================================================
   DocumentExamLanding scoped styles -- Composed Strike restyle (2026-07).
   The taste-path funnel landing guests + free users route to. Angular cut-corner
   language matching the vertical landings: rectangles -> cut corners; purple purged
   -> teal datum + ember CTA; clip-path shears box-shadow/translateY, so hovers move
   to border-color + background. Sequential how-it-works keeps NUMBERED plates.
   All colors via CSS variables. No hardcoded hex. No !important.
   ============================================================= */

/* -- Page shell ------------------------------------------------ */

.vertical-landing-page[b-gs33du5b6i] {
    min-height: 100vh;
    background: var(--glytic-bg-dark);
    color: var(--glytic-text-primary);
}

/* -- Hero ------------------------------------------------------ */

.vertical-hero[b-gs33du5b6i] {
    padding: 120px 24px 80px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-bottom: 1px solid var(--glytic-border);
    text-align: center;
}

.vertical-hero-content[b-gs33du5b6i] {
    max-width: 900px;
    margin: 0 auto;
}

.vertical-badge[b-gs33du5b6i] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 8px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge.
   Interior = the 0.1 teal tint composited over the page base (--glytic-bg-dark). */
.vertical-badge[b-gs33du5b6i]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.vertical-hero-title[b-gs33du5b6i] {
    font-family: var(--glytic-font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vertical-hero-subtitle[b-gs33du5b6i] {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    margin: 0 0 16px;
    line-height: 1.4;
}

.vertical-hero-description[b-gs33du5b6i] {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.vertical-hero-actions[b-gs33du5b6i] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* -- Shared buttons -------------------------------------------- */

.btn-primary-large[b-gs33du5b6i],
.btn-secondary-large[b-gs33du5b6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qf-btn-h-lg);
    padding: 0 22px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--qf-btn-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
    clip-path: none;
}

.btn-primary-large[b-gs33du5b6i] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
}

.btn-primary-large:hover[b-gs33du5b6i] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Secondary recipe: teal hairline. The double-layer cut-corner ghost is retired for controls. */
.btn-secondary-large[b-gs33du5b6i] {
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.btn-secondary-large:hover[b-gs33du5b6i] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
    color: var(--glytic-text-primary);
}

.btn-primary-large:focus-visible[b-gs33du5b6i],
.btn-secondary-large:focus-visible[b-gs33du5b6i] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* -- Shared section header ------------------------------------- */

.section-header[b-gs33du5b6i] {
    text-align: center;
    margin-bottom: 48px;
}

.section-header h2[b-gs33du5b6i] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

/* -- How it works (sequential -> numbered plates) ------------- */

.del-how-to-section[b-gs33du5b6i] {
    padding: 80px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.del-steps[b-gs33du5b6i] {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.del-step[b-gs33du5b6i] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    counter-increment: step-counter;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px;
    transition: background 0.2s ease;
}

/* Double-layer reveal on ::after (::before is taken by the step counter): element bg =
   the border color, ::after paints the card interior so the hairline follows the bevel.
   z-index:-1 + isolation on the element; children (and the counter ::before, z-index
   auto) need no lift. */
.del-step[b-gs33du5b6i]::after {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.del-step:hover[b-gs33du5b6i] {
    background: var(--glytic-border-hover);
}

.del-step:hover[b-gs33du5b6i]::after {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

/* Numbered plate. Its own 2px border is on a pseudo-element and cannot carry a nested
   reveal, so the top-right cut keeps a small border gap (accepted; a pseudo-element
   cannot host its own ::before). */
.del-step[b-gs33du5b6i]::before {
    content: counter(step-counter);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border: 2px solid var(--glytic-border);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

.del-step-title[b-gs33du5b6i] {
    font-family: var(--glytic-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin-bottom: 8px;
}

.del-step-detail[b-gs33du5b6i] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
}

/* -- Teaser section -------------------------------------------- */

.del-teaser-section[b-gs33du5b6i] {
    padding: 64px 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* -- FAQ section ---------------------------------------------- */

.del-faq-section[b-gs33du5b6i] {
    padding: 80px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.del-faq-list[b-gs33du5b6i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.del-faq-item[b-gs33du5b6i] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    overflow: hidden;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.del-faq-item[b-gs33du5b6i]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.del-faq-item[open][b-gs33du5b6i] {
    background: var(--glytic-border-hover);
}

.del-faq-summary[b-gs33du5b6i] {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    gap: 12px;
}

.del-faq-summary[b-gs33du5b6i]::-webkit-details-marker {
    display: none;
}

.del-faq-summary:focus-visible[b-gs33du5b6i] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.del-faq-summary[b-gs33du5b6i]::after {
    content: "+";
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--glytic-primary);
    transition: var(--glytic-transition);
}

.del-faq-item[open] .del-faq-summary[b-gs33du5b6i]::after {
    content: "-";
}

.del-faq-question[b-gs33du5b6i] {
    font-family: var(--glytic-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    color: var(--glytic-primary);
    line-height: 1.4;
}

.del-faq-answer[b-gs33du5b6i] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
    padding: 0 24px 20px;
}

/* -- Related section ------------------------------------------ */

.del-related-section[b-gs33du5b6i] {
    padding: 64px 24px;
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--glytic-border);
}

.del-related-list[b-gs33du5b6i] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.del-related-item[b-gs33du5b6i] {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

/* Related-tool links: the button system's secondary recipe. */
.del-related-link[b-gs33du5b6i] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: var(--qf-btn-h-md);
    padding: 0 18px;
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.del-related-link:hover[b-gs33du5b6i] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.del-related-link:focus-visible[b-gs33du5b6i] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* -- Closing CTA ---------------------------------------------- */

.vertical-cta-section[b-gs33du5b6i] {
    padding: 100px 24px;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%);
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.cta-content h2[b-gs33du5b6i] {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--glytic-text-primary);
}

.cta-content p[b-gs33du5b6i] {
    font-size: 1.25rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 40px;
}

.cta-actions[b-gs33du5b6i] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* -- Responsive ----------------------------------------------- */

@media (max-width: 768px) {
    .vertical-hero[b-gs33du5b6i] {
        padding: 80px 20px 60px;
    }

    .vertical-hero-title[b-gs33du5b6i] {
        font-size: 2.5rem;
    }

    .vertical-hero-subtitle[b-gs33du5b6i] {
        font-size: 1.25rem;
    }

    .vertical-hero-description[b-gs33du5b6i] {
        font-size: 1rem;
    }

    .section-header h2[b-gs33du5b6i] {
        font-size: 2rem;
    }

    .del-how-to-section[b-gs33du5b6i],
    .del-faq-section[b-gs33du5b6i],
    .del-related-section[b-gs33du5b6i] {
        padding: 60px 20px;
    }

    .del-teaser-section[b-gs33du5b6i] {
        padding: 48px 20px;
    }

    .del-step[b-gs33du5b6i] {
        flex-direction: column;
        gap: 16px;
    }

    /* Long related-tool titles must wrap inside the viewport, not overflow. */
    .del-related-list[b-gs33du5b6i] {
        flex-direction: column;
        align-items: stretch;
    }

    .del-related-link[b-gs33du5b6i] {
        display: block;
        text-align: center;
    }

    .btn-primary-large[b-gs33du5b6i],
    .btn-secondary-large[b-gs33du5b6i] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .vertical-hero-title[b-gs33du5b6i] {
        font-size: 2rem;
    }

    .cta-content h2[b-gs33du5b6i] {
        font-size: 2rem;
    }

    .vertical-cta-section[b-gs33du5b6i] {
        padding: 60px 20px;
    }
}
/* /Pages/Training.razor.rz.scp.css */
.training-container[b-5d9u06wodv] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    min-height: calc(100vh - 64px - 3rem);
    min-height: calc(100dvh - 64px - 3rem);
}

.training-loading[b-5d9u06wodv],
.training-error[b-5d9u06wodv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(28rem, 65vh, 42rem);
    min-height: clamp(28rem, 65dvh, 42rem);
    text-align: center;
}

/* Progress bar */
.training-progress[b-5d9u06wodv] {
    margin-bottom: 1.5rem;
}

.training-progress-bar[b-5d9u06wodv] {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.training-progress-fill[b-5d9u06wodv] {
    height: 100%;
    background: linear-gradient(90deg, var(--glytic-primary), var(--glytic-secondary));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.training-progress-text[b-5d9u06wodv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
}

.difficulty-badge[b-5d9u06wodv] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-1[b-5d9u06wodv] { background: rgba(102, 187, 106, 0.15); color: #66bb6a; }
.difficulty-2[b-5d9u06wodv] { background: rgba(var(--glytic-primary-rgb), 0.15); color: var(--glytic-primary); }
.difficulty-3[b-5d9u06wodv] { background: rgba(var(--glytic-secondary-rgb), 0.15); color: var(--glytic-secondary); }
.difficulty-4[b-5d9u06wodv] { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.difficulty-5[b-5d9u06wodv] { background: rgba(244, 67, 54, 0.15); color: #f44336; }

/* Question card */
.training-question-card[b-5d9u06wodv] {
    padding: 1.5rem;
}

.topic-badge[b-5d9u06wodv] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-primary);
    margin-bottom: 1rem;
}

.question-text[b-5d9u06wodv] {
    color: var(--glytic-text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Answer options */
.answer-options[b-5d9u06wodv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.training-option[b-5d9u06wodv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.85rem 1rem;
    background: var(--glytic-card-bg);
    border: 1px solid var(--qf-line, var(--glytic-border));
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.5;
}

.training-option:hover[b-5d9u06wodv] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

.training-option.selected[b-5d9u06wodv] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.option-indicator[b-5d9u06wodv] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--glytic-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-top: 1px;
    transition: var(--glytic-transition);
}

.training-option.selected .option-indicator[b-5d9u06wodv] {
    border-color: var(--glytic-primary);
    background: var(--glytic-primary);
    color: var(--glytic-bg-dark);
}

.option-text[b-5d9u06wodv] {
    flex: 1;
}

/* Actions */
.training-actions[b-5d9u06wodv] {
    display: flex;
    justify-content: flex-end;
}

/* Primary recipe (button system 2026-09-23): MudButton has no Color set (defaults to
   Default/tonal), but this is the view's one main action, so it needs the primary look.
   Matching the root layer's two-class specificity (.mud-button-filled.submit-btn) lets this
   win by load order without !important. */
[b-5d9u06wodv] .mud-button-filled.submit-btn {
    text-transform: none;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
    padding: 8px 24px;
}

[b-5d9u06wodv] .mud-button-filled.submit-btn:hover {
    background: var(--forge-gradient);
}

/* Mobile */
@media (max-width: 600px) {
    .training-container[b-5d9u06wodv] {
        padding: 0.5rem;
        min-height: calc(100vh - 56px - 2rem);
        min-height: calc(100dvh - 56px - 2rem);
    }

    .training-question-card[b-5d9u06wodv] {
        padding: 1rem;
    }

    .question-text[b-5d9u06wodv] {
        font-size: 1rem;
    }

    .training-option[b-5d9u06wodv] {
        padding: 0.75rem;
        min-height: 48px;
    }

    .training-actions[b-5d9u06wodv] {
        justify-content: stretch;
    }

    [b-5d9u06wodv] .mud-button-filled.submit-btn {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/TrainingSession/ConceptBrief.razor.rz.scp.css */
.concept-brief[b-ksyroouxvk] {
    padding: 1.5rem;
    border-left: 3px solid var(--glytic-primary);
}

.brief-header[b-ksyroouxvk] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.brief-topic[b-ksyroouxvk] {
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-primary);
}

.brief-body[b-ksyroouxvk] {
    margin-bottom: 1.5rem;
}

.brief-paragraph[b-ksyroouxvk] {
    color: var(--glytic-text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.brief-paragraph:last-child[b-ksyroouxvk] {
    margin-bottom: 0;
}

.brief-actions[b-ksyroouxvk] {
    display: flex;
    justify-content: flex-end;
}

/* Primary recipe (button system 2026-09-23): matches root layer's two-class specificity
   (.mud-button-filled.brief-continue-btn) so it wins by load order without !important. */
[b-ksyroouxvk] .mud-button-filled.brief-continue-btn {
    text-transform: none;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
}

[b-ksyroouxvk] .mud-button-filled.brief-continue-btn:hover {
    background: var(--forge-gradient);
}

@media (max-width: 600px) {
    .concept-brief[b-ksyroouxvk] {
        padding: 1rem;
    }

    [b-ksyroouxvk] .mud-button-filled.brief-continue-btn {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/TrainingSession/FollowUpChat.razor.rz.scp.css */
.followup-section[b-l94st5y48n] {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Secondary recipe (button system 2026-09-23): alternative action, teal hairline. */
.followup-toggle[b-l94st5y48n] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-sm);
    padding: 0.5rem 0.85rem;
    color: var(--glytic-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    width: 100%;
    justify-content: center;
}

.followup-toggle:hover[b-l94st5y48n] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.followup-toggle:focus-visible[b-l94st5y48n] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Chat panel */
.followup-chat[b-l94st5y48n] {
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 0.75rem;
    background: rgba(var(--glytic-primary-rgb), 0.02);
}

.followup-header[b-l94st5y48n] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.followup-title[b-l94st5y48n] {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--glytic-primary);
}

.followup-remaining[b-l94st5y48n] {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
}

/* Messages */
.followup-messages[b-l94st5y48n] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
}

.followup-msg[b-l94st5y48n] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 85%;
}

.followup-msg.user[b-l94st5y48n] {
    align-self: flex-end;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-text-primary);
}

.followup-msg.ai[b-l94st5y48n] {
    align-self: flex-start;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    color: var(--glytic-text-secondary);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

/* Input */
.followup-input-row[b-l94st5y48n] {
    display: flex;
    gap: 0.4rem;
}

.followup-input[b-l94st5y48n] {
    flex: 1;
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: var(--glytic-text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.followup-input:focus[b-l94st5y48n] {
    border-color: var(--glytic-primary);
}

.followup-input[b-l94st5y48n]::placeholder {
    color: var(--glytic-text-muted);
}

/* Primary recipe (button system 2026-09-23): ember fill, ink icon. */
.followup-send[b-l94st5y48n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.followup-send:hover:not(:disabled)[b-l94st5y48n] {
    background: var(--forge-gradient);
}

.followup-send:focus-visible[b-l94st5y48n] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.followup-send:disabled[b-l94st5y48n] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Limit message */
.followup-limit[b-l94st5y48n] {
    font-size: 0.8rem;
    color: var(--glytic-text-muted);
    text-align: center;
    padding: 0.4rem 0;
}

@media (max-width: 600px) {
    .followup-msg[b-l94st5y48n] {
        max-width: 95%;
    }

    .followup-send[b-l94st5y48n] {
        width: 44px;
        height: 44px;
    }
}
/* /Pages/TrainingSession/MidSessionCheckIn.razor.rz.scp.css */
.mid-session-overlay[b-jcgm7ww8ct] {
    position: relative;
}

.mid-session-card[b-jcgm7ww8ct] {
    padding: 1.5rem;
    border-left: 3px solid var(--glytic-secondary);
}

.mid-header[b-jcgm7ww8ct] {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.mid-title[b-jcgm7ww8ct] {
    font-family: var(--glytic-font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.mid-stats[b-jcgm7ww8ct] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.mid-stat[b-jcgm7ww8ct] {
    display: flex;
    flex-direction: column;
}

.mid-stat-value[b-jcgm7ww8ct] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-primary);
}

.mid-stat-label[b-jcgm7ww8ct] {
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mid-topics[b-jcgm7ww8ct] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mid-topic[b-jcgm7ww8ct] {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.mid-topic.strength[b-jcgm7ww8ct] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-primary);
}

.mid-topic.weakness[b-jcgm7ww8ct] {
    background: rgba(var(--glytic-secondary-rgb), 0.1);
    color: var(--glytic-secondary);
}

.topic-label[b-jcgm7ww8ct] {
    font-weight: 600;
    margin-right: 4px;
}

.mid-coaching[b-jcgm7ww8ct] {
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.mid-actions[b-jcgm7ww8ct] {
    display: flex;
    justify-content: flex-end;
}

/* Primary recipe (button system 2026-09-23): matches root layer's two-class specificity
   (.mud-button-filled.mid-continue-btn) so it wins by load order without !important. */
[b-jcgm7ww8ct] .mud-button-filled.mid-continue-btn {
    text-transform: none;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
}

[b-jcgm7ww8ct] .mud-button-filled.mid-continue-btn:hover {
    background: var(--forge-gradient);
}

@media (max-width: 600px) {
    .mid-session-card[b-jcgm7ww8ct] {
        padding: 1rem;
    }

    .mid-stats[b-jcgm7ww8ct] {
        gap: 1.25rem;
    }

    [b-jcgm7ww8ct] .mud-button-filled.mid-continue-btn {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/TrainingSession/TrainingQuestion.razor.rz.scp.css */
.result-card[b-lyew4a87ns] {
    padding: 1.5rem;
}

/* Result banner */
.result-banner[b-lyew4a87ns] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.result-banner.correct[b-lyew4a87ns] {
    background: rgba(102, 187, 106, 0.12);
    color: #66bb6a;
}

.result-banner.incorrect[b-lyew4a87ns] {
    background: rgba(244, 67, 54, 0.12);
    color: #f44336;
}

.result-question-text[b-lyew4a87ns] {
    color: var(--glytic-text-primary);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Result options */
.result-options[b-lyew4a87ns] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.result-option[b-lyew4a87ns] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--glytic-border-radius-small);
    border: 1px solid var(--glytic-border);
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
}

.result-option.result-correct[b-lyew4a87ns] {
    border-color: rgba(102, 187, 106, 0.4);
    background: rgba(102, 187, 106, 0.06);
    color: var(--glytic-text-primary);
}

.result-option-indicator[b-lyew4a87ns] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--glytic-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 2px;
}

.result-option-indicator.correct[b-lyew4a87ns] {
    border-color: #66bb6a;
    background: #66bb6a;
    color: var(--glytic-bg-dark);
}

/* Explanation */
.explanation-section[b-lyew4a87ns] {
    padding: 1rem 1.25rem;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    border-radius: var(--glytic-border-radius-small);
    margin-bottom: 1rem;
}

.explanation-header[b-lyew4a87ns] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.explanation-title[b-lyew4a87ns] {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--glytic-primary);
}

.explanation-text[b-lyew4a87ns] {
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    line-height: 1.65;
}

.explanation-text p[b-lyew4a87ns] {
    margin-bottom: 0.5rem;
}

.explanation-text p:last-child[b-lyew4a87ns] {
    margin-bottom: 0;
}

/* Verified source citation ("grounding receipt") — mirrors Quiz.razor, scoped to this page. */
.grounding-section[b-lyew4a87ns] {
    margin-bottom: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(102, 187, 106, 0.25);
    border-left: 3px solid rgba(102, 187, 106, 0.7);
    border-radius: 8px;
    background: rgba(102, 187, 106, 0.06);
}

.grounding-header[b-lyew4a87ns] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.grounding-verify-link[b-lyew4a87ns] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--glytic-primary, #66bb6a);
    text-decoration: none;
    opacity: 0.85;
}

.grounding-verify-link:hover[b-lyew4a87ns] {
    text-decoration: underline;
    opacity: 1;
}

[b-lyew4a87ns] .grounding-chip {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.grounding-quote[b-lyew4a87ns] {
    margin: 0;
    padding: 0 0 0 0.6rem;
    border-left: 2px solid rgba(102, 187, 106, 0.35);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

[b-lyew4a87ns] .grounding-panels {
    background: transparent;
}

/* Reference tier (source.tier == "reference"): a reference publisher, not the certifying
   body. Muted neutral tokens instead of the green accent. */
.grounding-section--reference[b-lyew4a87ns] {
    border-color: var(--glytic-border);
    border-left-color: var(--glytic-text-muted);
    background: transparent;
}

.grounding-section--reference .grounding-quote[b-lyew4a87ns] {
    border-left-color: var(--glytic-border);
}

.grounding-section--reference .grounding-verify-link[b-lyew4a87ns] {
    color: var(--glytic-text-secondary);
}

[b-lyew4a87ns] .grounding-chip--reference {
    color: var(--glytic-text-secondary);
}

.grounding-disclaimer[b-lyew4a87ns] {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--glytic-text-secondary);
    opacity: 0.85;
}

.grounding-publisher[b-lyew4a87ns] {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--glytic-text-secondary);
    opacity: 0.8;
    overflow-wrap: anywhere;
}

/* Actions */
.result-actions[b-lyew4a87ns] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Primary recipe (button system 2026-09-23): matches root layer's two-class specificity
   (.mud-button-filled.next-btn) so it wins by load order without !important. */
[b-lyew4a87ns] .mud-button-filled.next-btn {
    text-transform: none;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
    padding: 8px 24px;
}

[b-lyew4a87ns] .mud-button-filled.next-btn:hover {
    background: var(--forge-gradient);
}

@media (max-width: 600px) {
    .result-card[b-lyew4a87ns] {
        padding: 1rem;
    }

    .result-actions[b-lyew4a87ns] {
        justify-content: stretch;
    }

    [b-lyew4a87ns] .mud-button-filled.next-btn {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/TrainingSession/TrainingSessionSummary.razor.rz.scp.css */
.summary-card[b-kaksgml541] {
    padding: 2rem 1.5rem;
}

/* Score Hero */
.summary-hero[b-kaksgml541] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.score-circle[b-kaksgml541] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.15), rgba(var(--glytic-secondary-rgb), 0.15));
    border: 3px solid var(--glytic-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.score-value[b-kaksgml541] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--glytic-primary);
}

.summary-title[b-kaksgml541] {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-primary);
    margin-bottom: 0.25rem;
}

.summary-subtitle[b-kaksgml541] {
    color: var(--glytic-text-muted);
}

/* Coaching */
.coaching-section[b-kaksgml541] {
    padding: 1rem 1.25rem;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    border-radius: var(--glytic-border-radius-small);
    margin-bottom: 1.25rem;
}

.coaching-header[b-kaksgml541] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.coaching-label[b-kaksgml541] {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--glytic-primary);
}

.coaching-text[b-kaksgml541] {
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    line-height: 1.65;
}

.coaching-text p[b-kaksgml541] {
    margin-bottom: 0.5rem;
}

.coaching-text p:last-child[b-kaksgml541] {
    margin-bottom: 0;
}

/* Topic Breakdown */
.topic-breakdown[b-kaksgml541] {
    margin-bottom: 1.25rem;
}

.breakdown-title[b-kaksgml541] {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-primary);
    margin-bottom: 0.75rem;
}

.topic-list[b-kaksgml541] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.topic-row[b-kaksgml541] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topic-name[b-kaksgml541] {
    flex: 0 0 120px;
    font-size: 0.82rem;
    color: var(--glytic-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-bar-track[b-kaksgml541] {
    flex: 1;
    height: 6px;
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.topic-bar-fill[b-kaksgml541] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.topic-bar-fill.bar-high[b-kaksgml541] {
    background: var(--glytic-primary);
}

.topic-bar-fill.bar-mid[b-kaksgml541] {
    background: var(--glytic-secondary);
}

.topic-bar-fill.bar-low[b-kaksgml541] {
    background: #f44336;
}

.topic-pct[b-kaksgml541] {
    flex: 0 0 40px;
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
    text-align: right;
}

/* Focus Areas */
.focus-areas[b-kaksgml541] {
    margin-bottom: 1.5rem;
}

.focus-title[b-kaksgml541] {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-primary);
    margin-bottom: 0.75rem;
}

.focus-item[b-kaksgml541] {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--glytic-border);
}

.focus-item:last-child[b-kaksgml541] {
    border-bottom: none;
}

.focus-content[b-kaksgml541] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.focus-topic[b-kaksgml541] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
}

.focus-rec[b-kaksgml541] {
    font-size: 0.82rem;
    color: var(--glytic-text-secondary);
}

/* Actions */
.summary-actions[b-kaksgml541] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Primary recipe (button system 2026-09-23): matches root layer's two-class specificity
   (.mud-button-filled.primary-cta) so it wins by load order without !important. */
[b-kaksgml541] .mud-button-filled.primary-cta {
    text-transform: none;
    font-weight: 700;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-md);
    padding: 8px 24px;
}

[b-kaksgml541] .mud-button-filled.primary-cta:hover {
    background: var(--forge-gradient);
}

@media (max-width: 600px) {
    .summary-card[b-kaksgml541] {
        padding: 1.25rem 1rem;
    }

    .topic-name[b-kaksgml541] {
        flex: 0 0 80px;
    }

    .summary-actions[b-kaksgml541] {
        flex-direction: column;
    }

    [b-kaksgml541] .mud-button-filled.primary-cta {
        width: 100%;
        min-height: 48px;
    }
}
/* /Pages/Welcome.razor.rz.scp.css */
.welcome-page[b-91uasuj9b9] {
    min-height: calc(100vh - 64px);
    padding: clamp(24px, 6vw, 64px) 16px;
    background: var(--glytic-gradient-bg);
}

.welcome-shell[b-91uasuj9b9] {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.welcome-header[b-91uasuj9b9] {
    max-width: 720px;
    margin-bottom: 24px;
}

.welcome-eyebrow[b-91uasuj9b9] {
    margin-bottom: 8px;
    color: var(--glytic-primary);
    font-family: var(--glytic-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.welcome-header h1[b-91uasuj9b9] {
    margin-bottom: 10px;
    color: var(--glytic-text-primary);
    font-family: var(--qf-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.02;
}

.welcome-subtitle[b-91uasuj9b9] {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--glytic-text-secondary);
    font-size: 1.08rem;
}

.welcome-search[b-91uasuj9b9] {
    max-width: 680px;
    margin-bottom: 24px;
}

[b-91uasuj9b9] .welcome-search-input .mud-input-root {
    min-height: 46px;
    background: var(--glytic-card-bg);
    border-radius: var(--glytic-border-radius-small);
}

.welcome-grid[b-91uasuj9b9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.welcome-card[b-91uasuj9b9] {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px;
    text-align: left;
}

button.welcome-card[b-91uasuj9b9] {
    width: 100%;
    color: inherit;
    font: inherit;
}

/* .welcome-card carries .ai-card-style's clip-path, which shears an outward outline.
   Inset the ring (canonical Composed Strike pattern) so it stays visible inside the cut. */
button.welcome-card:focus-visible[b-91uasuj9b9] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.welcome-card-meta[b-91uasuj9b9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--glytic-text-muted);
    font-size: 0.8rem;
}

.welcome-vendor[b-91uasuj9b9] {
    color: var(--glytic-primary);
    font-weight: 700;
}

.welcome-card-title[b-91uasuj9b9] {
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
}

.welcome-card-desc[b-91uasuj9b9] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--glytic-text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.welcome-card-action[b-91uasuj9b9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--forge-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.welcome-empty[b-91uasuj9b9] {
    max-width: 680px;
    padding: 18px;
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-card-bg);
}

.welcome-empty p[b-91uasuj9b9] {
    margin: 0;
    color: var(--glytic-text-secondary);
}

.welcome-footer[b-91uasuj9b9] {
    margin-top: 24px;
}

.welcome-footer a[b-91uasuj9b9] {
    color: var(--glytic-primary);
    font-weight: 700;
}

.welcome-card-skeleton[b-91uasuj9b9] {
    pointer-events: none;
}

.welcome-skeleton-line[b-91uasuj9b9] {
    height: 12px;
    border-radius: 999px;
    background: var(--glytic-border);
}

.welcome-skeleton-meta[b-91uasuj9b9] {
    width: 55%;
}

.welcome-skeleton-title[b-91uasuj9b9] {
    width: 85%;
    height: 18px;
}

.welcome-skeleton-text[b-91uasuj9b9] {
    width: 72%;
}

@media (max-width: 640px) {
    .welcome-page[b-91uasuj9b9] {
        padding-top: 28px;
    }

    .welcome-card[b-91uasuj9b9] {
        min-height: 180px;
    }
}

/* Early-funnel premium visibility strip -- Composed Strike bone value plate.
   The page's single bone (poster) moment: ink text, ember CTA, cut corner. clip-path shears
   box-shadow, so elevation moves to filter: drop-shadow. */
.welcome-premium[b-91uasuj9b9] {
    position: relative;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: var(--qf-bone);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

.welcome-premium-content[b-91uasuj9b9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.welcome-premium-icon[b-91uasuj9b9] {
    color: var(--forge-primary);
    flex-shrink: 0;
}

.welcome-premium-copy[b-91uasuj9b9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.welcome-premium-title[b-91uasuj9b9] {
    font-family: var(--qf-display);
    font-weight: 600;
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--qf-ink);
    line-height: 1.1;
}

.welcome-premium-sub[b-91uasuj9b9] {
    font-size: 0.82rem;
    color: var(--qf-bone-dim);
    line-height: 1.35;
}

.welcome-premium-actions[b-91uasuj9b9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.welcome-premium-cta[b-91uasuj9b9] {
    display: inline-flex;
    align-items: center;
    min-height: var(--qf-btn-h-sm);
    padding: 9px 18px;
    border-radius: var(--qf-btn-radius);
    border: 1px solid var(--forge-primary);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.welcome-premium-cta:hover[b-91uasuj9b9] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

.welcome-premium-cta:focus-visible[b-91uasuj9b9] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.welcome-premium-plans[b-91uasuj9b9] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--qf-gold-on-bone);
    text-decoration: none;
    padding: 6px 4px;
}

.welcome-premium-plans:hover[b-91uasuj9b9] {
    text-decoration: underline;
}

.welcome-premium-dismiss[b-91uasuj9b9] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--qf-bone-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.welcome-premium-dismiss:hover[b-91uasuj9b9] {
    color: var(--qf-ink);
    background: rgba(var(--qf-ink-rgb), 0.08);
}

.welcome-premium-dismiss:focus-visible[b-91uasuj9b9] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* On phones the strip stacks into a centered card: dismiss pinned to the
   top-right corner (out of flow), the premium badge icon centered on top,
   copy and buttons centered. Overrides the base .welcome-premium-copy
   flex-basis so it doesn't force a fixed height in the column layout. */
@media (max-width: 640px) {
    .welcome-premium-dismiss[b-91uasuj9b9] {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 0;
    }

    .welcome-premium-content[b-91uasuj9b9] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .welcome-premium-copy[b-91uasuj9b9] {
        flex: 0 0 auto;
        align-items: center;
    }

    .welcome-premium-actions[b-91uasuj9b9] {
        width: 100%;
        justify-content: center;
    }
}
/* /Shared/Admin/AdminLayout.razor.rz.scp.css */
/* Admin layout - SCOPED (was a global inline <style> block; now isolated so it no longer
   leaks onto public-site pages). MudBlazor descendants are reached via ::deep. */
.admin-layout[b-262crfu89g] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f1419 0%, #1e293b 100%);
}

.admin-content[b-262crfu89g] {
    padding-top: 0; /* Menu bar is sticky, so no extra padding needed */
    min-height: calc(100vh - 60px); /* Subtract menu bar height */
}

/* Consistent spacing for admin page containers. */
.admin-content[b-262crfu89g]  .mud-container {
    padding-top: 24px;
}

/* Transparent tab strip on the dark admin backdrop. */
.admin-layout[b-262crfu89g]  .mud-tabs {
    background: transparent;
}

/* Frosted admin surface. The scoped attribute + descendant class raises specificity
   above MudBlazor's base .mud-paper, so no !important is needed (L2). */
.admin-layout[b-262crfu89g]  .mud-paper {
    background: rgba(26, 34, 48, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(92, 168, 184, 0.1);
}
/* /Shared/Admin/AdminMenuBar.razor.rz.scp.css */
/* Admin Menu Bar - SCOPED STYLES ONLY */
.admin-menu-bar[b-98e7uj9rll] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(var(--glytic-primary-rgb), 0.2);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.1);
}

.admin-menu-container[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 60px;
    overflow: visible; /* Ensure dropdowns aren't clipped */
}

/* Admin Brand */
.admin-brand[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    min-width: 200px;
}

.brand-text[b-98e7uj9rll] {
    font-weight: 700;
    color: var(--glytic-primary);
    text-shadow: 0 0 10px rgba(var(--glytic-primary-rgb), 0.3);
    font-family: var(--glytic-font-heading);
}

/* Menu Categories */
.menu-categories[b-98e7uj9rll] {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
    margin: 0 20px;
    overflow: visible; /* Ensure dropdowns aren't clipped */
}

.menu-category[b-98e7uj9rll] {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-width: 120px;
    user-select: none;
    overflow: visible; /* Ensure dropdown isn't clipped */
}

.menu-category:hover[b-98e7uj9rll] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-color: rgba(var(--glytic-primary-rgb), 0.3);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.2);
}

.menu-category.active[b-98e7uj9rll] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.15) 0%, rgba(var(--glytic-secondary-rgb), 0.08) 100%);
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
    box-shadow:
        0 8px 32px rgba(var(--glytic-primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.menu-category.expanded[b-98e7uj9rll] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    box-shadow:
        0 8px 32px rgba(var(--glytic-primary-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Category Header */
.category-header[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 8px;
    cursor: pointer;
    position: relative;
    z-index: 1002;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.category-header:hover[b-98e7uj9rll] {
    background: rgba(255, 255, 255, 0.05);
}

.menu-category.direct-link:focus-visible[b-98e7uj9rll],
.category-header:focus-visible[b-98e7uj9rll] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.category-icon[b-98e7uj9rll] {
    color: var(--glytic-primary);
    font-size: 1.2rem;
    transition: color 0.2s ease;
}

.category-text[b-98e7uj9rll] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    color: #e0e6ed;
    transition: color 0.2s ease;
}

/* Chevron lives inside MudIcon (a child component) so its element does not carry this
   component's scope attribute -- reach it with ::deep from the scoped .category-header. */
.category-header[b-98e7uj9rll]  .expand-icon {
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-header[b-98e7uj9rll]  .expand-icon.expand-active {
    transform: rotate(180deg);
}

/* Test Management Hub renders as a direct link (no dropdown). */
.menu-category.direct-link[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.10) 0%, rgba(var(--glytic-secondary-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    min-width: auto;
}

.menu-category.direct-link:hover[b-98e7uj9rll] {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.20) 0%, rgba(var(--glytic-secondary-rgb), 0.25) 100%);
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    box-shadow: 0 0 15px rgba(var(--glytic-primary-rgb), 0.3);
}

.menu-category.direct-link .category-header[b-98e7uj9rll] {
    justify-content: center;
}

.menu-category.direct-link .category-text[b-98e7uj9rll] {
    background: linear-gradient(90deg, var(--glytic-primary), var(--glytic-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: none;
    letter-spacing: normal;
}

/* Dropdown Menu - PURE CSS POSITIONING (No JavaScript) */
.dropdown-menu[b-98e7uj9rll] {
    position: absolute; /* Back to absolute positioning */
    top: 100%; /* Position directly below parent */
    left: 0; /* Align with left edge of parent */
    right: auto;
    background: rgba(15, 23, 42, 0.98);
    /* border + border-top KEEP !important: the scoped .dropdown-menu[b-xxx] border
       (spec 0,2,0) is otherwise overridden and collapses to a 0-width border here.
       Verified on the live nav -- dropping !important here changes the visible rim. */
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(20px);
    z-index: 9999;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--glytic-primary-rgb), 0.2),
        0 0 30px rgba(var(--glytic-primary-rgb), 0.15);
    animation: slideDown-b-98e7uj9rll 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 220px;
    overflow: visible;
    display: block;
    visibility: visible;
    opacity: 1;
}

@keyframes slideDown-b-98e7uj9rll {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Menu Items - SCOPED */
.menu-item[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e0e6ed;
    white-space: nowrap;
    position: relative;
    user-select: none;
    background: transparent;
}

.menu-item:last-child[b-98e7uj9rll] {
    border-bottom: none;
}

.menu-item:focus-visible[b-98e7uj9rll] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

.menu-item:hover[b-98e7uj9rll] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    padding-left: 20px;
    box-shadow: inset 0 0 20px rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-primary);
}

.menu-item:active[b-98e7uj9rll] {
    transform: scale(0.98);
    background: rgba(var(--glytic-primary-rgb), 0.18);
}

.item-icon[b-98e7uj9rll] {
    font-size: 1rem;
    color: rgba(var(--glytic-primary-rgb), 0.8);
    transition: all 0.2s ease;
    min-width: 20px;
}

.menu-item:hover .item-icon[b-98e7uj9rll] {
    color: var(--glytic-primary);
    transform: scale(1.1);
}

/* Admin Actions Section - RESTORED */
.admin-actions[b-98e7uj9rll] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 20px;
}

[b-98e7uj9rll] .exit-button {
    background: rgba(var(--qf-crimson-rgb), .1);
    border: 1px solid rgba(var(--qf-crimson-rgb), .3);
    color: var(--qf-crimson-text);
    transition: background-color .15s ease, border-color .15s ease;
}

[b-98e7uj9rll] .exit-button:hover {
    background: rgba(var(--qf-crimson-rgb), .2);
    border-color: var(--qf-crimson-text);
}

[b-98e7uj9rll] .admin-chip {
    background: rgba(var(--glytic-success-rgb), .12);
    border: 1px solid rgba(var(--glytic-success-rgb), .45);
    color: var(--qf-success-text);
    font-weight: 600;
}

/* Responsive adjustments for admin actions */
@media (max-width: 768px) {
    .admin-actions[b-98e7uj9rll] {
        padding-left: 10px;
        gap: 8px;
    }

    [b-98e7uj9rll] .admin-chip {
        display: none; /* Hide admin chip on mobile to save space */
    }
}

@media (max-width: 1200px) {
    .menu-categories[b-98e7uj9rll] {
        gap: 6px;
        margin: 0 15px;
    }

    .menu-category[b-98e7uj9rll] {
        min-width: 100px;
    }

    .category-text[b-98e7uj9rll] {
        font-size: 0.8rem;
    }

    .dropdown-menu[b-98e7uj9rll] {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .admin-menu-container[b-98e7uj9rll] {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }

    .menu-categories[b-98e7uj9rll] {
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
        margin: 0;
        justify-content: center;
    }

    .menu-category[b-98e7uj9rll] {
        min-width: 90px;
        flex: 1;
        max-width: 140px;
    }

    .category-text[b-98e7uj9rll] {
        font-size: 0.75rem;
    }

    .admin-brand[b-98e7uj9rll] {
        min-width: auto;
    }

    .dropdown-menu[b-98e7uj9rll] {
        min-width: 180px;
        left: -10px;
        right: -10px;
    }
}

@media (max-width: 480px) {
    .menu-category[b-98e7uj9rll] {
        min-width: 80px;
    }

    .category-header[b-98e7uj9rll] {
        padding: 12px 14px;
    }

    .dropdown-menu[b-98e7uj9rll] {
        min-width: 160px;
        left: -15px;
        right: -15px;
    }

    .menu-item[b-98e7uj9rll] {
        padding: 12px 14px;
        font-size: 0.85rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .admin-menu-bar[b-98e7uj9rll] {
        border-bottom-color: var(--glytic-primary);
    }

    .menu-category[b-98e7uj9rll] {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .menu-category.active[b-98e7uj9rll],
    .menu-category.expanded[b-98e7uj9rll] {
        border-color: var(--glytic-primary);
    }

    .dropdown-menu[b-98e7uj9rll] {
        border-color: var(--glytic-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .menu-category[b-98e7uj9rll],
    .menu-item[b-98e7uj9rll],
    .category-header[b-98e7uj9rll],
    .expand-icon[b-98e7uj9rll],
    .item-icon[b-98e7uj9rll] {
        transition: none;
    }

    .dropdown-menu[b-98e7uj9rll] {
        animation: none;
    }

    .menu-category:hover[b-98e7uj9rll] {
        transform: none;
    }

    .menu-item:hover .item-icon[b-98e7uj9rll] {
        transform: none;
    }
}

/* MOBILE-002: Admin mobile drawer */
@media (max-width: 959px) {
    .menu-categories[b-98e7uj9rll] {
        display: none;
    }

    .admin-menu-container[b-98e7uj9rll] {
        padding: 8px 12px;
        min-height: 48px;
    }

    .admin-brand[b-98e7uj9rll] {
        min-width: auto;
    }
}

[b-98e7uj9rll] .admin-mobile-hamburger {
    color: var(--glytic-text-secondary);
    margin-right: 8px;
}

[b-98e7uj9rll] .admin-mobile-drawer {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-right: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
}

[b-98e7uj9rll] .admin-mobile-drawer .mud-nav-link {
    color: #e0e6ed;
    border-radius: 8px;
    margin: 2px 8px;
}

[b-98e7uj9rll] .admin-mobile-drawer .mud-nav-link:hover,
[b-98e7uj9rll] .admin-mobile-drawer .mud-nav-link.active {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-primary);
}

[b-98e7uj9rll] .admin-mobile-drawer .mud-navgroup-title {
    color: #e0e6ed;
}

[b-98e7uj9rll] .admin-mobile-drawer .mud-icon-root {
    color: rgba(var(--glytic-primary-rgb), 0.7);
}

/* Comfortable drawer tap targets (>= 40px) for touch. */
[b-98e7uj9rll] .admin-mobile-drawer .mud-nav-link {
    min-height: 44px;
}

/* 390px hardening: keep the bar within the viewport, no horizontal overflow. */
@media (max-width: 420px) {
    .admin-menu-bar[b-98e7uj9rll] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .admin-menu-container[b-98e7uj9rll] {
        padding: 8px 10px;
        gap: 8px;
    }

    .brand-text[b-98e7uj9rll] {
        font-size: 1rem;
    }

    .admin-actions[b-98e7uj9rll] {
        padding-left: 8px;
        gap: 6px;
    }
}
/* /Shared/Admin/Components/UserMobileCard.razor.rz.scp.css */
[b-ujh0m27qmk] .qf-user-card {
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-card-bg);
}

[b-ujh0m27qmk] .qf-user-card:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.qf-user-card-email[b-ujh0m27qmk] {
    word-break: break-all;
}

/* Online presence dot. Uses the brand success token from quizforge.css. */
.qf-online-dot[b-ujh0m27qmk] {
    --qf-online: var(--glytic-success);
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--qf-online);
    box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0.6);
    animation: qf-pulse-b-ujh0m27qmk 2s infinite;
    vertical-align: middle;
    flex: 0 0 auto;
}

@keyframes qf-pulse-b-ujh0m27qmk {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0.55);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(var(--glytic-success-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-success-rgb), 0);
    }
}

/* Comfortable touch targets for the card action buttons. */
.qf-user-card-actions[b-ujh0m27qmk]  .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}
/* /Shared/Admin/Dialogs/BlueprintCoverageDialog.razor.rz.scp.css */
/* Blueprint Coverage Dialog Styles */

.coverage-score-card[b-yoml6ygft3] {
    background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1));
  border: 1px solid rgba(var(--glytic-secondary-rgb), 0.3);
}

.coverage-score[b-yoml6ygft3] {
    text-align: center;
}

.gap-card[b-yoml6ygft3] {
    background: rgba(26, 34, 48, 0.6);
    border-left: 3px solid var(--mud-palette-warning);
}

.gap-card:hover[b-yoml6ygft3] {
    background: rgba(26, 34, 48, 0.8);
}

.gap-details[b-yoml6ygft3] {
    padding-left: 28px;
    margin-top: 8px;
}

.distribution-bars[b-yoml6ygft3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.distribution-item[b-yoml6ygft3] {
    padding: 8px;
}

/* Topic Alignment Styles - IMPROVED SIDE-BY-SIDE LAYOUT */
.official-topics-panel[b-yoml6ygft3] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(139, 195, 74, 0.05));
        border: 2px solid rgba(76, 175, 80, 0.4);
      border-radius: 12px;
 min-height: 500px;
     max-height: 650px;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.database-topics-panel[b-yoml6ygft3] {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.05));
        border: 2px solid rgba(255, 193, 7, 0.4);
        border-radius: 12px;
 min-height: 500px;
        max-height: 650px;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);
}

.database-topics-scrollable[b-yoml6ygft3] {
  max-height: 540px;
        overflow-y: auto;
        padding: 8px;
}

.database-topics-grid[b-yoml6ygft3] {
      display: flex;
     flex-direction: column;
     gap: 8px;
}

.official-topic-zone[b-yoml6ygft3] {
        min-height: 100px;
        border-radius: 8px;
   transition: all 0.3s ease;
}

.official-topic-card[b-yoml6ygft3] {
     background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(139, 195, 74, 0.12));
      border: 2px solid rgba(76, 175, 80, 0.5);
        border-radius: 12px;
        transition: all 0.3s ease;
        position: relative;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.official-topic-card:hover[b-yoml6ygft3] {
        border-color: rgba(76, 175, 80, 0.8);
   box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
     transform: translateY(-3px);
}

.official-topic-name[b-yoml6ygft3] {
  font-size: 1.15rem !important;
      color: var(--mud-palette-success) !important;
    text-shadow: 0 2px 4px rgba(76, 175, 80, 0.4);
        font-weight: 600 !important;
      letter-spacing: 0.3px;
}

[b-yoml6ygft3] .mud-drop-zone-drag-hover .official-topic-card {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.35), rgba(139, 195, 74, 0.25));
border-color: rgba(76, 175, 80, 1);
  border-width: 3px;
 transform: scale(1.04);
        box-shadow: 0 12px 32px rgba(76, 175, 80, 0.5) !important;
   animation: pulse-glow-b-yoml6ygft3 0.6s ease-in-out infinite alternate;
}

@keyframes pulse-glow-b-yoml6ygft3 {
        from {
   box-shadow: 0 12px 32px rgba(76, 175, 80, 0.5);
        }
        to {
 box-shadow: 0 12px 32px rgba(76, 175, 80, 0.8);
        }
}

.database-topics-container[b-yoml6ygft3] {
    background: rgba(26, 34, 48, 0.3);
    padding: 16px;
    border-radius: 12px;
  border: 2px dashed rgba(var(--glytic-secondary-rgb), 0.3);
    min-height: 200px;
}

.database-topic-card[b-yoml6ygft3] {
        background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.15), rgba(var(--glytic-secondary-rgb), 0.08));
border: 2px solid rgba(var(--glytic-secondary-rgb), 0.4);
    border-radius: 8px;
cursor: grab !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(var(--glytic-secondary-rgb), 0.2);
}

.database-topic-card:hover[b-yoml6ygft3] {
background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.25), rgba(var(--glytic-secondary-rgb), 0.15));
    border-color: rgba(var(--glytic-secondary-rgb), 0.7);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--glytic-secondary-rgb), 0.4);
}

.database-topic-card:active[b-yoml6ygft3] {
    cursor: grabbing !important;
    opacity: 0.8;
    transform: scale(0.98);
}

.drag-handle[b-yoml6ygft3] {
    color: rgba(var(--glytic-secondary-rgb), 0.7);
    transition: color 0.2s ease;
    font-size: 1.2rem !important;
}

.database-topic-card:hover .drag-handle[b-yoml6ygft3] {
    color: rgba(var(--glytic-secondary-rgb), 1);
    animation: wiggle-b-yoml6ygft3 0.5s ease-in-out;
}

@keyframes wiggle-b-yoml6ygft3 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.aligned-topics[b-yoml6ygft3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    margin-top: 8px;
    background: rgba(76, 175, 80, 0.12);
    border-radius: 6px;
    border-top: 1px solid rgba(76, 175, 80, 0.3);
}

/* Scrollbar styling for panels */
.official-topics-panel[b-yoml6ygft3]::-webkit-scrollbar,
.database-topics-scrollable[b-yoml6ygft3]::-webkit-scrollbar {
        width: 10px;
}

.official-topics-panel[b-yoml6ygft3]::-webkit-scrollbar-track,
.database-topics-scrollable[b-yoml6ygft3]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.15);
   border-radius: 5px;
}

.official-topics-panel[b-yoml6ygft3]::-webkit-scrollbar-thumb {
      background: rgba(76, 175, 80, 0.6);
     border-radius: 5px;
}

.official-topics-panel[b-yoml6ygft3]::-webkit-scrollbar-thumb:hover {
        background: rgba(76, 175, 80, 0.8);
}

.database-topics-scrollable[b-yoml6ygft3]::-webkit-scrollbar-thumb {
        background: rgba(255, 193, 7, 0.6);
  border-radius: 5px;
}

.database-topics-scrollable[b-yoml6ygft3]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 193, 7, 0.8);
  }

/* Responsive adjustments */
@@media (max-width: 960px) {
        .official-topics-panel[b-yoml6ygft3],
    .database-topics-panel[b-yoml6ygft3] {
      max-height: 450px;
 }
      
.official-topic-name[b-yoml6ygft3] {
        font-size: 1rem !important;
        }
    }
/* /Shared/Admin/Dialogs/BlueprintViewDialog.razor.rz.scp.css */
.blueprint-dialog-content[b-4smru60dii] {
    min-height: 400px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px; /* For focus outlines */
}

.blueprint-header[b-4smru60dii] {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.blueprint-section[b-4smru60dii] {
    background: rgba(26, 34, 48, 0.6);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    padding: 16px;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.blueprint-section:hover[b-4smru60dii] {
    border-color: rgba(var(--glytic-primary-rgb), 0.3);
}

.section-header[b-4smru60dii] {
    margin-bottom: 8px;
}

.section-subtopics[b-4smru60dii] {
    padding-left: 16px;
    border-left: 2px solid rgba(var(--glytic-primary-rgb), 0.3);
}

.subtopic-item[b-4smru60dii] {
    padding: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.subtopic-item:hover[b-4smru60dii] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.question-distribution[b-4smru60dii] {
    background: rgba(26, 34, 48, 0.4);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

/* Mobile: numeric-field pairs stack instead of overflowing the dialog */
@media (max-width: 599px) {
    .blueprint-dialog-content[b-4smru60dii] {
        max-height: 80vh;
    }

    .blueprint-dialog-content .d-flex.gap-2[b-4smru60dii] {
        flex-wrap: wrap;
    }
}
/* /Shared/Admin/Dialogs/TrafficMetricDetailDialog.razor.rz.scp.css */
.metric-summary[b-0kidq307k9] {
    background: var(--glytic-gradient-card);
    border: 1px solid var(--glytic-border);
}

[b-0kidq307k9] .mud-button-root,
[b-0kidq307k9] .mud-icon-button {
    min-height: 40px;
    min-width: 40px;
}

@media (max-width: 600px) {
    [b-0kidq307k9] .mud-dialog-content {
        padding-inline: 12px;
    }

    [b-0kidq307k9] .mud-table-root .mud-table-cell {
        min-height: 40px;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}
/* /Shared/Admin/TestDiscoveryComponent.razor.rz.scp.css */
/* Scoped styles for TestDiscoveryComponent.
   Uses ::deep to reach MudBlazor child elements from the native wrapper. */

.test-discovery-scope[b-bu2333f072]  .test-discovery-card {
    margin-bottom: 24px;
    border: 1px solid var(--glytic-border);
    background: rgba(var(--glytic-surface-rgb, 26, 34, 48), 0.3);
    backdrop-filter: blur(10px);
}

.test-discovery-scope[b-bu2333f072]  .test-discovery-card .mud-card-header {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

/* Stat tiles: tinted, semantic backgrounds sourced from theme tokens */
.test-discovery-scope[b-bu2333f072]  .stat-tile {
    border-radius: 8px;
}

.test-discovery-scope[b-bu2333f072]  .stat-tile-primary {
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.test-discovery-scope[b-bu2333f072]  .stat-tile-success {
    background: rgba(var(--mud-palette-success-rgb), 0.1);
}

.test-discovery-scope[b-bu2333f072]  .stat-tile-warning {
    background: rgba(var(--mud-palette-warning-rgb), 0.1);
}

.test-discovery-scope[b-bu2333f072]  .stat-tile-secondary {
    background: rgba(var(--glytic-secondary-rgb), 0.1);
}
/* /Shared/BrandLogo.razor.rz.scp.css */
/* Brand Logo Component -- forged damascus Q emblem + UIZFORGE wordmark */
.brand-logo[b-fq5w6c1et6] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: #ffffff;
}

.brand-wordmark[b-fq5w6c1et6] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
}

/* Beveled brand tile: the forged mark inside a small cut-corner plate with an ember-orange frame,
   echoing the PWA install-popup icon tile. Double-layer reveal (like .qf-cut-card-bordered): the
   tile FILL is the orange border color; a ::before inset 1px paints the dark inner plate so the
   orange shows as a 1px hairline on every edge -- cut corners included (a real border is sheared off
   the 45deg cuts by clip-path). The mark image sits above on z-index 1. To try the gold border the
   owner flagged as a fallback, swap --forge-primary for --forge-gold on .brand-tile below. */
.brand-tile[b-fq5w6c1et6] {
    --tile-cut: 6px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Tuck the wordmark tight against the tile; nudge down a hair so it sits optically centred
       against the wordmark cap-height. */
    margin-right: 3px;
    transform: translateY(-0.5px);
    padding: 2px;
    background: var(--forge-primary);
    clip-path: polygon(0 0, calc(100% - var(--tile-cut)) 0, 100% var(--tile-cut), 100% 100%, var(--tile-cut) 100%, 0 calc(100% - var(--tile-cut)));
    transition: transform .25s ease, filter .35s ease, background .25s ease;
}

.brand-tile[b-fq5w6c1et6]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - var(--tile-cut)) 0, 100% var(--tile-cut), 100% 100%, var(--tile-cut) 100%, 0 calc(100% - var(--tile-cut)));
    background: var(--qf-ink, #070605);
    z-index: 0;
}

.brand-tile-mark[b-fq5w6c1et6] {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* v1 (svg) is the default; v2 (png) is hidden until <html class="qf-brand-v2"> flips them. */
.brand-tile-v2[b-fq5w6c1et6] {
    display: none;
}

:root.qf-brand-v2 .brand-tile-v1[b-fq5w6c1et6] {
    display: none;
}

:root.qf-brand-v2 .brand-tile-v2[b-fq5w6c1et6] {
    display: block;
}

.brand-wordmark:hover .brand-tile[b-fq5w6c1et6],
.brand-tile:hover[b-fq5w6c1et6] {
    transform: translateY(-1px);
    /* ember-orange glow on hover, matching the tile frame */
    filter: drop-shadow(0 0 6px rgba(var(--forge-primary-rgb), .55));
}

.brand-wm-text[b-fq5w6c1et6] {
    /* Composed Strike: wordmark in the display face (Oswald), tucked against the forged Q emblem.
       The component sets --brand-wm-size-base inline per Size/@FontSize; font-size resolves
       --brand-wm-size first (only ever set by the media query below) and falls back to that base.
       An inline `style=""` declaration has higher cascade priority than any class selector for
       the SAME custom property, so the mobile breakpoint below writes a DIFFERENT property
       (--brand-wm-size) instead of trying to beat the inline one -- that is what lets it actually
       apply without !important (wave-1 batch-B fix, 2026-09-02: appbar-mark-only.mjs caught the
       old single-property version never shrinking on Test -- the inline value always won). */
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--glytic-text-primary);
    line-height: 1;
    font-size: var(--brand-wm-size, var(--brand-wm-size-base));
}

/* Responsive: the wordmark stays at every width -- it is never hidden below 600px (B1 Task 5,
   2026-09-02: a mobile visitor who never scrolled to the footer used to leave without reading
   the brand name). What DOES still vary by surface is size: a width-constrained surface that
   did not opt in via ShowTextOnMobile (the app bar) shrinks the text; a surface with room for
   it (the drawer header, ShowTextOnMobile="true", .brand-logo--mobile-text below) keeps it at
   its normal size. The tile keeps its own size from the Size parameter either way, so only the
   text scales down. */
@media (max-width: 600px) {
    .brand-tile[b-fq5w6c1et6] {
        margin-right: 2px;
    }

    .brand-logo:not(.brand-logo--mobile-text) .brand-wm-text[b-fq5w6c1et6] {
        --brand-wm-size: 1.05rem;
        letter-spacing: 0.01em;
    }
}
/* /Shared/Components/AccessibilitySheet.razor.rz.scp.css */
/* Accessibility sheet: bottom sheet on phones, centered dialog on wide screens.
   Mirrors the SourceViewer overlay pattern (srcv-*). */

.a11y-backdrop[b-b8cr3ljtkp] {
    position: fixed;
    inset: 0;
    z-index: 1490;
    background: rgba(6, 9, 14, 0.6);
    backdrop-filter: blur(3px);
}

.a11y-sheet[b-b8cr3ljtkp] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1491;
    max-height: 82dvh;
    display: flex;
    flex-direction: column;
    background: var(--glytic-card-bg, rgba(24, 32, 44, 0.97));
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
    animation: a11y-up-b-b8cr3ljtkp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

@keyframes a11y-up-b-b8cr3ljtkp {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (min-width: 700px) {
    .a11y-sheet[b-b8cr3ljtkp] {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(480px, 92vw);
        max-height: 76vh;
        border-radius: 20px;
        border-bottom: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
        padding-bottom: 18px;
    }

    @keyframes a11y-up-b-b8cr3ljtkp {
        from { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; }
        to { transform: translate(-50%, -50%); opacity: 1; }
    }

    .a11y-grab[b-b8cr3ljtkp] { display: none; }
}

.a11y-grab[b-b8cr3ljtkp] {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.4);
    margin: 4px auto 12px;
    flex: none;
}

.a11y-head[b-b8cr3ljtkp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 12px;
    flex: none;
    color: var(--glytic-primary, #5CA8B8);
}

.a11y-title[b-b8cr3ljtkp] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--glytic-text-primary, #f0f0f0);
}

.a11y-body[b-b8cr3ljtkp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.a11y-row[b-b8cr3ljtkp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.a11y-row:last-child[b-b8cr3ljtkp] { border-bottom: none; }

.a11y-row--toggle[b-b8cr3ljtkp] { cursor: pointer; }

.a11y-row-info[b-b8cr3ljtkp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.a11y-row-name[b-b8cr3ljtkp] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--glytic-text-primary, #f0f0f0);
}

.a11y-row-desc[b-b8cr3ljtkp] {
    font-size: 0.78rem;
    color: var(--glytic-text-muted, #a0a0a0);
    line-height: 1.4;
}

.a11y-seg[b-b8cr3ljtkp] {
    display: flex;
    gap: 6px;
    flex: none;
    border: 1px solid var(--qf-line);
    border-radius: 10px;
    padding: 3px;
    background: transparent;
}

.a11y-seg-btn[b-b8cr3ljtkp] {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--glytic-text-muted);
    font-family: var(--glytic-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.a11y-seg-btn.is-on[b-b8cr3ljtkp] {
    background: var(--qf-surface-tonal);
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    color: var(--glytic-text-primary);
    font-weight: 600;
}

.a11y-check[b-b8cr3ljtkp] {
    width: 22px;
    height: 22px;
    flex: none;
    accent-color: var(--glytic-primary, #5CA8B8);
    cursor: pointer;
}

.a11y-actions[b-b8cr3ljtkp] {
    flex: none;
    padding-top: 14px;
}

.a11y-close[b-b8cr3ljtkp] {
    width: 100%;
    min-height: var(--qf-btn-h-md);
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--glytic-text-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.a11y-close:hover[b-b8cr3ljtkp] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.a11y-check:focus-visible[b-b8cr3ljtkp] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
}

.a11y-seg-btn:focus-visible[b-b8cr3ljtkp],
.a11y-close:focus-visible[b-b8cr3ljtkp] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .a11y-sheet[b-b8cr3ljtkp] { animation: none; }
}
/* /Shared/Components/AuthPrompt.razor.rz.scp.css */
/* AuthPrompt.razor.css -- scoped styles for the unified auth form */

/* Base container */
.auth-prompt[b-4rgqq9s24t] {
    padding: 1.5rem;
}

/* --- Pre-interactive gate -------------------------------------------------------
   The card is prerendered as static HTML inside the app-wide InteractiveAuto boundary
   (Server/Components/App.razor), so for a few seconds after paint nothing in it works.
   The shell communicates that instead of silently swallowing input. Positioning is the
   only thing this adds to the normal state: the veil is absolutely positioned, so the
   card's reserved footprint is identical before and after hydration (no layout shift). */
.auth-prompt-shell[b-4rgqq9s24t] {
    position: relative;
}

/* Dim the card body while it is inert. Only the form is dimmed -- the veil sits on top
   at full opacity. .auth-prompt is this component's own element, so no ::deep needed. */
.auth-prompt-shell--pending .auth-prompt[b-4rgqq9s24t] {
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

/* Centred branded spinner over the inert card. pointer-events: none so the veil never
   intercepts a click aimed at something that genuinely works before hydration (the
   plain href links to /register and /forgot-password). */
.auth-prompt-shell__veil[b-4rgqq9s24t] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Soft scrim behind the mark only. The spinner lands over the primary CTA (the card's
   vertical centre); without separation the two read as one glitched control. A real
   element rather than a pseudo-element so the spinner reliably paints on top of it. */
.auth-prompt-shell__veil-mark[b-4rgqq9s24t] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    background: radial-gradient(closest-side, var(--glytic-bg-dark) 38%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
    .auth-prompt-shell--pending .auth-prompt[b-4rgqq9s24t] {
        transition: none;
    }
}

/* The Bootstrap text-center utility isn't reliably applied inside the MudDialog, so define it
   locally for this component's centered blocks (link-sent + full-mode header). text-align is
   inherited, so it also centers the MudText children. */
.text-center[b-4rgqq9s24t] {
    text-align: center;
}

/* Full-mode header block (heading + subtitle) */
.auth-prompt__header-full[b-4rgqq9s24t] {
    margin-bottom: 1.25rem;
}

/* Password-state header row */
.auth-prompt__header-row[b-4rgqq9s24t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.75rem;
}

.auth-prompt__header-row--password[b-4rgqq9s24t] {
    margin-bottom: 0.75rem;
}

/* Heading text in all states */
.auth-prompt__heading[b-4rgqq9s24t] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
}

/* Muted text color */
.auth-prompt__muted[b-4rgqq9s24t] {
    color: var(--glytic-text-muted);
}

/* Link-sent state: centered stack */
.auth-prompt--link-sent[b-4rgqq9s24t] {
    text-align: center;
}

/* Email address display in link-sent state */
.auth-prompt__email-display[b-4rgqq9s24t] {
    font-weight: 600;
    color: var(--glytic-text-primary);
}

/* Primary CTA button (full-width); MudButton chrome is in the shared auth surface.
   Needs ::deep: MudButton renders this class on its own root element, which never
   carries this component's scope attribute, so the bare selector never matched.
   ".auth-prompt ::deep" ties the global button-system rules' specificity (two
   classes); this bundle loads after mudblazor-overrides.css so the tie goes to us. */
.auth-prompt[b-4rgqq9s24t]  .auth-prompt__btn-primary {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    border-radius: var(--qf-btn-radius);
}

.auth-prompt[b-4rgqq9s24t]  .auth-prompt__btn-primary:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Disabled (e.g. Continue before the form is valid): a plain disabled plate, not ember. */
.auth-prompt[b-4rgqq9s24t]  .auth-prompt__btn-primary:disabled {
    background-color: var(--qf-disabled-bg);
    background-image: linear-gradient(rgba(var(--forge-primary-rgb), .35), rgba(var(--forge-primary-rgb), .35));
    border-color: rgba(var(--forge-primary-rgb), .5);
    color: var(--glytic-text-secondary);
}

/* Footer prompt rows — stack the two prompts, separated from the card body */
.auth-prompt__footer[b-4rgqq9s24t] {
    display: flex;
    flex-direction: column;   /* stack the two prompts vertically */
    align-items: center;       /* center them */
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    /* Subtle hairline separator from the card body (faint, on-brand, theme-variable). */
    border-top: 1px solid rgba(var(--glytic-primary-rgb), 0.08);
    text-align: center;
}

/* Each prompt line: muted label + its link on one row, wrapping gracefully when cramped.
   ::deep because MudText renders the .mud-typography-caption span (no scope id). */
.auth-prompt__footer[b-4rgqq9s24t]  .mud-typography-caption {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 6px;              /* space between the muted text and the link */
    font-size: 13px;
    line-height: 1.45;
}

/* The actionable link — weight for hierarchy, no mid-phrase break.
   ::deep because MudLink renders the <a> (no scope id). */
.auth-prompt__footer[b-4rgqq9s24t]  .auth-prompt__link {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;       /* keep the link text from breaking mid-phrase */
    transition: opacity 0.15s ease;
}
.auth-prompt__footer[b-4rgqq9s24t]  .auth-prompt__link:hover {
    opacity: 0.8;
}

/* Tighten spacing on small screens */
@media (max-width: 480px) {
    .auth-prompt__footer[b-4rgqq9s24t] {
        gap: 8px;
        margin-top: 16px;
    }
    .auth-prompt__footer[b-4rgqq9s24t]  .mud-typography-caption {
        font-size: 12.5px;
    }
}

/* Styled link */
.auth-prompt__link[b-4rgqq9s24t] {
    color: var(--glytic-primary);
}

/* Inline divider with text (password-registration section) */
.register-divider-row[b-4rgqq9s24t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.register-divider-line[b-4rgqq9s24t] {
    flex: 1;
    height: 1px;
    background: rgba(var(--glytic-primary-rgb), 0.18);
}

.register-divider-text[b-4rgqq9s24t] {
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
/* /Shared/Components/CertExamDisclaimer.razor.rz.scp.css */
/* Centered fine print that mirrors the footer's own legal line (.footer-legal): a constrained,
   centered hairline + muted text, so the vendor trademark notice reads as intentional site fine
   print instead of a stray left-aligned block with a full-width coloured rule. Shared by the quiz,
   flashcard and exam-detail pages. */
.cert-disclaimer[b-rmbwt3tz0j] {
    max-width: 680px;
    margin: 1.5rem auto 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--glytic-border);
    text-align: center;
}

.cert-disclaimer-note[b-rmbwt3tz0j] {
    font-size: 0.68rem;
    line-height: 1.55;
    /* Measured from the painted pixels on Test on 2026-09-05 (bundle-2 task 5): #8a8a8a on the
       exam page's gradient came to 4.32:1, under the WCAG 2.1 AA 4.5:1 this text size needs, and
       the English twin below dimmed it further to 2.94:1. Both are raised to clear 4.5:1 with a
       margin while keeping the twin quieter than the localized line. */
    color: #a6a6a6; /* was #8a8a8a: measured 4.32:1 */
    margin: 0;
}

.cert-disclaimer-en[b-rmbwt3tz0j] {
    margin-top: 0.35rem;
    opacity: 0.85; /* was 0.72: measured 2.94:1 on the #8a8a8a above */
}

@media (max-width: 600px) {
    .cert-disclaimer[b-rmbwt3tz0j] {
        margin-top: 1.25rem;
        padding-top: 0.7rem;
    }

    .cert-disclaimer-note[b-rmbwt3tz0j] {
        font-size: 0.66rem;
    }
}
/* /Shared/Components/ConfirmEmailBanner.razor.rz.scp.css */
.confirm-email-banner[b-li1trd67bg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--glytic-bg-card, rgba(26, 30, 48, 0.9));
    border-bottom: 1px solid var(--glytic-border, rgba(0, 255, 231, 0.2));
    color: var(--glytic-text, #e6e9f2);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.confirm-email-text[b-li1trd67bg] {
    flex: 1 1 auto;
    min-width: 12rem;
}

.confirm-email-actions[b-li1trd67bg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin-left: auto;
}
/* /Shared/Components/CustomExamMode.razor.rz.scp.css */
/* Custom Exam Mode Styles */
.custom-exam-mode-header[b-s2wf9ueomt] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 2px solid var(--mud-palette-secondary);
    margin-bottom: 24px;
}

.custom-exam-creative[b-s2wf9ueomt] {
    /* Was a hard-coded purple (#667eea/#764ba2) left over from before the 2026-07 "purple
       purge" (quizforge.css :38): 2.99:1 worst-stop contrast on a dark surface, under the
       4.5:1 this element's size requires (X5 manual contrast pass, docs/audits/2026-09-02
       -fresh-look/evidence/contrast-pass.md). The surviving brand pair measures 4.69:1 in
       the same position and is what every other gradient-text rule in the repo uses. */
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--forge-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.custom-name-input-card[b-s2wf9ueomt],
.creative-options-card[b-s2wf9ueomt],
.custom-prompt-card[b-s2wf9ueomt],
.custom-topics-card[b-s2wf9ueomt] {
    margin-bottom: 24px;
    border-radius: 12px;
}

.creative-name-input[b-s2wf9ueomt] {
    width: 100%;
}

.creative-loading[b-s2wf9ueomt] {
    text-align: center;
    padding: 16px;
    background: rgba(118, 75, 162, 0.05);
    border-radius: 8px;
}

.creative-loading-text[b-s2wf9ueomt] {
    color: #764ba2;
    font-style: italic;
}

[b-s2wf9ueomt] .creative-name-card {
    transition: border-color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border: 1px solid var(--qf-line);
}

[b-s2wf9ueomt] .creative-name-card:hover {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

[b-s2wf9ueomt] .creative-name-card.selected-card {
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border: 2px solid var(--glytic-primary);
}

[b-s2wf9ueomt] .creative-name-card:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.creative-name[b-s2wf9ueomt] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.custom-prompt-card[b-s2wf9ueomt] {
    background: rgba(118, 75, 162, 0.05);
    border: 1px solid rgba(118, 75, 162, 0.2);
}

.custom-prompt-input[b-s2wf9ueomt] {
    width: 100%;
}

.prompt-actions[b-s2wf9ueomt] {
    display: flex;
    gap: 12px;
}

.topic-loading[b-s2wf9ueomt] {
    text-align: center;
    padding: 24px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    margin: 16px 0;
}

.validation-summary-card[b-s2wf9ueomt] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.validation-success[b-s2wf9ueomt],
.validation-info[b-s2wf9ueomt] {
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prompt-actions[b-s2wf9ueomt] {
        flex-direction: column;
    }

    [b-s2wf9ueomt] .creative-name-card {
        margin-bottom: 8px;
    }
}
/* /Shared/Components/ExistingExamMode.razor.rz.scp.css */
/* ExistingExamMode Component Styles */

.existing-exam-mode-card[b-0xl5ifwby6] {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.existing-exam-mode-card:hover[b-0xl5ifwby6] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.topic-selection-container[b-0xl5ifwby6] {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

[b-0xl5ifwby6] .topic-button {
    min-height: 32px;
    border-radius: 999px;
    text-transform: none;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

[b-0xl5ifwby6] .topic-button.mud-button-outlined.mud-button-outlined-default {
    border: 1px solid var(--qf-line);
    background: transparent;
    color: var(--glytic-text-secondary);
}

[b-0xl5ifwby6] .topic-button.mud-button-outlined.mud-button-outlined-default:hover {
    border-color: var(--glytic-border-hover);
}

[b-0xl5ifwby6] .topic-button.mud-button-filled.mud-button-filled-primary {
    background: rgba(var(--glytic-primary-rgb), 0.14);
    border: 1px solid var(--glytic-primary);
    color: var(--glytic-text-primary);
}

[b-0xl5ifwby6] .topic-button.mud-button-filled.mud-button-filled-primary:hover {
    background: rgba(var(--glytic-primary-rgb), 0.2);
}

[b-0xl5ifwby6] .topic-button:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.generate-button[b-0xl5ifwby6] {
    min-width: 250px;
    height: 48px;
    border-radius: 24px;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.generate-button:hover:not(:disabled)[b-0xl5ifwby6] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.generate-button:disabled[b-0xl5ifwby6] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .topic-selection-container[b-0xl5ifwby6] {
        max-height: 200px;
    }

    .generate-button[b-0xl5ifwby6] {
        width: 100%;
        min-width: unset;
    }
}

/* Step Indicators */
.step-indicator[b-0xl5ifwby6] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-weight: 500;
}
/* /Shared/Components/GoogleSignInButton.razor.rz.scp.css */
/* Google Identity Services sign-in button host. Mobile-first (390x844). Brand-neutral chrome:
   the button glyph itself is owned by GIS and must not be restyled. We only own the "or"
   divider and the host container layout. CSS variables only, no hardcoded brand colors. */

.qf-google-signin[b-avaaiqsucz] {
    width: 100%;
    margin-bottom: 0.75rem;
}

.qf-google-divider-row[b-avaaiqsucz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    margin-bottom: 0.85rem;
}

.qf-google-divider-line[b-avaaiqsucz] {
    flex: 1;
    height: 1px;
    background: var(--glytic-border);
}

.qf-google-divider-text[b-avaaiqsucz] {
    font-size: 0.72rem;
    color: var(--glytic-text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* GIS renders an iframe/button into this host. Center it and let it size to the container
   width on small screens (the JS caps the rendered width at 400px). Fixed height (the GIS
   size:'large' button is exactly 40px) so the slot reserves its space from first paint and
   the async GIS render swaps in without any layout shift. */
.qf-google-host[b-avaaiqsucz] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
}

.qf-google-host__loading[b-avaaiqsucz] {
    color: var(--glytic-text-muted);
    font-size: 0.8rem;
}

.qf-google-busy[b-avaaiqsucz] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--glytic-text-muted);
}
/* /Shared/Components/Landing/DocumentTeaser.razor.rz.scp.css */
.dt-container[b-aga73mwlrd] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* ---- Card (Composed Strike double-layer bevel) ----
   The upload surface is the funnel's hero panel, so it earns the crisp bevel border
   that follows the cut corners: the outer element FILL is the border color and a
   ::before surface inset 1px reveals it as a 1px hairline on EVERY edge, cut corners
   included (a real border is sheared off the bevel by clip-path). The interior sits
   at z-index:-1 inside the element's own stacking context (isolation:isolate), so
   ALL children -- including component-rendered ones a scoped child-lift cannot
   reach -- paint above it with no per-child lift. */
.dt-card[b-aga73mwlrd] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem;
    transition: background 0.2s ease;
}

.dt-card[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    pointer-events: none;
    z-index: -1;
}

.dt-card--loading[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
}

/* ---- Badge ---- */
.dt-badge[b-aga73mwlrd] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glytic-primary);
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.2rem 0.7rem;
    margin-bottom: 1.25rem;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.dt-badge[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

/* ---- File upload ---- */
.dt-file-section[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.dt-file-label[b-aga73mwlrd] {
    display: block;
    cursor: pointer;
}

.dt-file-input[b-aga73mwlrd] {
    display: none;
}

.dt-file-trigger[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem 1.5rem;
    border: 2px dashed var(--glytic-border);
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-surface);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    text-align: center;
}

.dt-file-trigger:hover[b-aga73mwlrd] {
    border-color: var(--forge-border);
    background: rgba(var(--forge-primary-rgb), 0.06);
}

.dt-file-trigger--selected[b-aga73mwlrd] {
    border-style: solid;
    border-color: var(--glytic-primary);
}

/* The real <input type=file> is visually hidden, so surface keyboard focus on the
   visible dropzone via focus-within. Inset ring -- clip-path shears an outset outline. */
.dt-file-label:focus-within .dt-file-trigger[b-aga73mwlrd] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
    border-color: var(--glytic-primary);
}

.dt-file-icon[b-aga73mwlrd] {
    font-size: 2rem;
    color: var(--glytic-primary);
}

.dt-file-placeholder[b-aga73mwlrd] {
    font-size: 0.95rem;
    color: var(--glytic-text-primary);
}

.dt-file-hint[b-aga73mwlrd] {
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

.dt-file-name[b-aga73mwlrd] {
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    word-break: break-all;
}

.dt-clear-btn[b-aga73mwlrd] {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--qf-crimson-text);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.dt-clear-btn:hover[b-aga73mwlrd] {
    opacity: 0.8;
}

.dt-error-msg[b-aga73mwlrd] {
    font-size: 0.82rem;
    color: var(--glytic-error);
    margin: 0;
}

/* ---- Data use consent ---- */
.dt-data-row[b-aga73mwlrd] {
    margin-bottom: 1.25rem;
}

.dt-checkbox-label[b-aga73mwlrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    cursor: pointer;
}

.dt-checkbox-label input[type="checkbox"][b-aga73mwlrd] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: var(--glytic-primary);
}

.dt-privacy-note[b-aga73mwlrd] {
    font-size: 0.76rem;
    color: var(--glytic-text-muted);
    margin: 0.4rem 0 0 1.5rem;
}

.dt-link[b-aga73mwlrd] {
    color: var(--glytic-primary);
    text-decoration: underline;
}

/* ---- Language options ---- */
.dt-lang-options[b-aga73mwlrd] {
    margin-bottom: 1.25rem;
}

.dt-lang-toggle[b-aga73mwlrd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--glytic-primary);
}

.dt-lang-toggle:disabled[b-aga73mwlrd] {
    cursor: default;
    opacity: 0.6;
}

.dt-lang-toggle-icon[b-aga73mwlrd],
.dt-lang-chevron[b-aga73mwlrd] {
    font-size: 1.05rem;
}

.dt-lang-grid[b-aga73mwlrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.6rem;
}

.dt-lang-field[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 180px;
}

.dt-lang-label[b-aga73mwlrd] {
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
}

.dt-lang-select[b-aga73mwlrd] {
    background: var(--glytic-surface);
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    color: var(--glytic-text-primary);
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
}

.dt-lang-select:focus[b-aga73mwlrd] {
    outline: none;
    border-color: var(--glytic-primary);
}

.dt-lang-select:disabled[b-aga73mwlrd] {
    opacity: 0.6;
}

/* ---- Turnstile ---- */
.dt-turnstile[b-aga73mwlrd] {
    margin-bottom: 1.25rem;
}

/* ---- Alert ---- */
.dt-alert[b-aga73mwlrd] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    position: relative;
    isolation: isolate;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
}

/* Double-layer reveal: element bg = the alert's border color; ::before = the
   tinted interior, so the hairline follows the cut corner (z-index:-1 + isolation;
   children need no lift). */
.dt-alert--error[b-aga73mwlrd] {
    background: rgba(var(--glytic-error-rgb), 0.3);
    border: 0;
}

.dt-alert--error[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-error-rgb), 0.1), rgba(var(--glytic-error-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.dt-alert-text[b-aga73mwlrd] {
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    margin: 0 0 0.3rem;
}

.dt-cta-link[b-aga73mwlrd] {
    font-size: 0.85rem;
    color: var(--glytic-primary);
    text-decoration: underline;
}

/* ---- Submit button (MudButton: needs ::deep to reach it) ---- */
[b-aga73mwlrd] .dt-submit-btn {
    margin-top: 0.5rem;
}

/* ---- Loading ---- */
.dt-progress[b-aga73mwlrd] {
    width: 100%;
}

.dt-loading-text[b-aga73mwlrd] {
    font-size: 1rem;
    color: var(--glytic-text-primary);
    margin: 0;
    text-align: center;
}

.dt-loading-sub[b-aga73mwlrd] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    margin: 0;
    text-align: center;
}

/* ---- Preview ---- */
.dt-preview[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

[b-aga73mwlrd] .dt-preview-title {
    color: var(--glytic-text-primary);
}

.dt-preview-sub[b-aga73mwlrd] {
    font-size: 0.88rem;
    color: var(--glytic-text-muted);
    margin: -0.75rem 0 0;
}

/* ---- Question ---- */
.dt-question[b-aga73mwlrd] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 1.25rem;
}

/* Double-layer reveal: element bg = hairline border color; ::before = card interior
   (z-index:-1 + isolation; children need no lift). */
.dt-question[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.dt-question-text[b-aga73mwlrd] {
    font-size: 0.95rem;
    color: var(--glytic-text-primary);
    margin: 0 0 1rem;
    line-height: 1.6;
}

/* The question/explanation body is rendered from MarkdownLite as real HTML (paragraphs,
   lists, bold). Because it is injected via MarkupString it does not carry the component's
   scoped-CSS attribute, so its children must be reached with ::deep. */
.dt-question-text[b-aga73mwlrd]  p {
    margin: 0 0 0.65rem;
}

.dt-question-text[b-aga73mwlrd]  p:last-child {
    margin-bottom: 0;
}

.dt-question-text[b-aga73mwlrd]  ul,
.dt-question-text[b-aga73mwlrd]  ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.dt-question-text[b-aga73mwlrd]  li {
    margin: 0.25rem 0;
}

.dt-question-text[b-aga73mwlrd]  strong {
    color: var(--glytic-text-primary);
    font-weight: 700;
}

.dt-question-text[b-aga73mwlrd]  code {
    font-family: var(--glytic-font-mono, monospace);
    background: rgba(var(--glytic-primary-rgb), 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88em;
}

/* Question header: number badge + type badge. */
.dt-q-head[b-aga73mwlrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.dt-q-num[b-aga73mwlrd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.3);
    border: 0;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only badge. */
.dt-q-num[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.12), rgba(var(--glytic-primary-rgb), 0.12)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.dt-q-type[b-aga73mwlrd] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.28);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 3px 11px;
}

.dt-q-type[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
}

.dt-answers[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dt-answer[b-aga73mwlrd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    background: var(--glytic-surface);
    border: 1px solid var(--glytic-border);
    border-radius: var(--qf-btn-radius);
    padding: 0.65rem 0.85rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}

.dt-answer:hover:not(:disabled)[b-aga73mwlrd] {
    border-color: var(--glytic-border-hover);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-surface);
}

.dt-answer:focus-visible[b-aga73mwlrd] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.dt-answer:disabled[b-aga73mwlrd] {
    cursor: default;
}

.dt-answer--correct[b-aga73mwlrd] {
    border: 2px solid var(--glytic-success);
    padding: calc(0.65rem - 1px) calc(0.85rem - 1px);
    background: linear-gradient(rgba(var(--glytic-success-rgb), 0.1), rgba(var(--glytic-success-rgb), 0.1)), var(--glytic-surface);
}

/* Wrong pick -- the sanctioned crimson strike state. */
.dt-answer--wrong[b-aga73mwlrd] {
    border: 2px solid var(--qf-crimson-text);
    padding: calc(0.65rem - 1px) calc(0.85rem - 1px);
    background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.12), rgba(var(--qf-crimson-rgb), 0.12)), var(--glytic-surface);
}

/* Revealed, not chosen: quieter but still readable. */
.dt-answer--dim[b-aga73mwlrd] {
    color: var(--glytic-text-secondary);
    opacity: 0.8;
}

/* Select-all-that-apply: chosen-but-not-yet-checked state */
.dt-answer--selected[b-aga73mwlrd] {
    border: 2px solid var(--glytic-primary);
    padding: calc(0.65rem - 1px) calc(0.85rem - 1px);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-surface);
}

.dt-check-row[b-aga73mwlrd] {
    margin-top: 0.5rem;
}

.dt-answer-text[b-aga73mwlrd] {
    flex: 1;
}

.dt-ans-icon[b-aga73mwlrd] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dt-ans-icon--ok[b-aga73mwlrd] {
    color: var(--glytic-success);
}

.dt-ans-icon--fail[b-aga73mwlrd] {
    color: var(--qf-crimson);
}

/* ---- Explanation ---- */
.dt-explanation[b-aga73mwlrd] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--glytic-primary-rgb), 0.06);
    border-radius: 0;
    border-left: 3px solid var(--glytic-primary);
}

.dt-expl-text[b-aga73mwlrd] {
    font-size: 0.84rem;
    color: var(--glytic-text-secondary);
    margin: 0;
    line-height: 1.55;
}

.dt-expl-text[b-aga73mwlrd]  p {
    margin: 0 0 0.5rem;
}

.dt-expl-text[b-aga73mwlrd]  p:last-child {
    margin-bottom: 0;
}

.dt-expl-text[b-aga73mwlrd]  ul,
.dt-expl-text[b-aga73mwlrd]  ol {
    margin: 0.4rem 0;
    padding-left: 1.4rem;
}

.dt-expl-text[b-aga73mwlrd]  li {
    margin: 0.2rem 0;
}

.dt-expl-text[b-aga73mwlrd]  strong {
    color: var(--glytic-text-primary);
    font-weight: 700;
}

/* ---- Premium gate ---- */
.dt-gate-card[b-aga73mwlrd] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border-hover);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem;
    text-align: center;
}

/* Double-layer reveal: element bg = border color; ::before = the teal gradient
   interior composited over --glytic-bg-medium so the hairline follows the bevel
   (z-index:-1 + isolation; children need no lift). */
.dt-gate-card[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-gradient-card), var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.dt-gate-body[b-aga73mwlrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

[b-aga73mwlrd] .dt-gate-headline {
    color: var(--glytic-text-primary);
}

.dt-gate-copy[b-aga73mwlrd] {
    font-size: 0.9rem;
    color: var(--glytic-text-muted);
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}

.dt-gate-actions[b-aga73mwlrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.dt-gate-login[b-aga73mwlrd] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
    text-decoration: underline;
}

.dt-gate-login:hover[b-aga73mwlrd] {
    color: var(--glytic-text-secondary);
}

/* Responsive */
@media (max-width: 600px) {
    .dt-card[b-aga73mwlrd] {
        padding: 1.25rem;
    }

    .dt-file-trigger[b-aga73mwlrd] {
        padding: 1rem;
    }

    .dt-gate-card[b-aga73mwlrd] {
        padding: 1.25rem;
    }
}

/* ---- AI Tutor taste (first question only) ---- */
/* The AI Tutor taste is the sanctioned single AI accent -- the teal->purple orb and
   tint are the app-wide AI-tutor identity, kept here (via tokens, not hardcoded hex). */
.dt-tutor-taste[b-aga73mwlrd] {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 1px solid var(--glytic-border);
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-secondary-rgb), 0.08));
}

.dt-tutor-head[b-aga73mwlrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

/* Same conic-gradient orb as the in-app AI Tutor, for brand recognition. */
.dt-tutor-orb[b-aga73mwlrd] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--glytic-primary), var(--glytic-secondary), var(--glytic-primary));
    box-shadow: var(--glytic-glow);
}

.dt-tutor-label[b-aga73mwlrd] {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--glytic-text-primary);
}

.dt-tutor-text[b-aga73mwlrd] {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
}

/* Tutor unlock link: the button system's small secondary (teal hairline, 8px). */
.dt-tutor-unlock[b-aga73mwlrd] {
    display: inline-flex;
    align-items: center;
    min-height: var(--qf-btn-h-sm);
    padding: 0 0.95rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--glytic-border-hover);
    border-radius: var(--qf-btn-radius);
    transition: background-color .15s ease, border-color .15s ease;
}

.dt-tutor-unlock:hover[b-aga73mwlrd] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
}

.dt-tutor-unlock:focus-visible[b-aga73mwlrd] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Submit, premium-gate and Check answer are plain MudButtons: Filled Primary and
   Outlined Primary render the ember primary and teal-hairline secondary from the
   root button layer (mudblazor-overrides.css), so no local override is needed. */

@media (prefers-reduced-motion: reduce) {
    .dt-card[b-aga73mwlrd],
    .dt-file-trigger[b-aga73mwlrd],
    .dt-answer[b-aga73mwlrd],
    .dt-tutor-unlock[b-aga73mwlrd] {
        transition: none;
    }
}

/* /Shared/Components/LanguageSelector.razor.rz.scp.css */
.language-selector[b-7w4twwps3g] {
    display: flex;
    align-items: center;
}

/* MudMenu's own wrapper div carries this class; it has no visual chrome of its own
   (the activator button is .lang-btn below) but needs inline-flex so it doesn't
   collapse to a block box inside the flex row. */
[b-7w4twwps3g] .lang-menu {
    display: inline-flex;
    align-items: center;
}

[b-7w4twwps3g] .lang-btn {
    min-width: auto;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 31px tall.
       min-height plus flex centering keeps the visual pill size unchanged. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--glytic-text-secondary);
    background: transparent;
    border: 1px solid var(--qf-line);
    border-radius: var(--qf-btn-radius);
    text-transform: uppercase;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

[b-7w4twwps3g] .lang-btn:hover {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

[b-7w4twwps3g] .lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

[b-7w4twwps3g] .lang-code {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    opacity: 0.7;
    min-width: 20px;
}

[b-7w4twwps3g] .lang-name {
    font-size: 0.85rem;
}

[b-7w4twwps3g] .lang-item-active {
    background: rgba(var(--glytic-primary-rgb), 0.08);
}
/* /Shared/Components/NotFoundContent.razor.rz.scp.css */
.qf-notfound[b-dasrmkdy41] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.qf-notfound-card[b-dasrmkdy41] {
    position: relative;
    max-width: 520px;
    width: 100%;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    overflow: hidden;
}

.qf-notfound-body[b-dasrmkdy41] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qf-notfound-code[b-dasrmkdy41] {
    font-family: var(--glytic-font-heading);
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--glytic-primary);
}

.qf-notfound-title[b-dasrmkdy41] {
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.qf-notfound-text[b-dasrmkdy41] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--glytic-text-muted);
    max-width: 380px;
    margin: 0 auto 2rem;
}

.qf-notfound-actions[b-dasrmkdy41] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* /Shared/Components/OfficialCertificationMode.razor.rz.scp.css */
/* Official Certification Mode Styles */
.official-cert-mode-header[b-9noxuakgbb] {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 2px solid var(--mud-palette-success);
    margin-bottom: 24px;
}

.official-cert-search-card[b-9noxuakgbb],
.official-topics-card[b-9noxuakgbb],
.blueprint-status-card[b-9noxuakgbb] {
    margin-bottom: 24px;
    border-radius: 12px;
}

.certification-search-input[b-9noxuakgbb] {
    width: 100%;
    min-width: 400px;
}

.search-loading[b-9noxuakgbb] {
    text-align: center;
    padding: 16px;
    background: rgba(0, 200, 81, 0.05);
    border-radius: 8px;
}

.certification-options[b-9noxuakgbb] {
    margin-top: 20px;
}

[b-9noxuakgbb] .certification-option-card {
    transition: border-color 0.15s ease, background-color 0.15s ease;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

[b-9noxuakgbb] .certification-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.1) 0%, rgba(var(--glytic-primary-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

[b-9noxuakgbb] .certification-option-card:hover {
    border-color: var(--glytic-primary);
}

[b-9noxuakgbb] .certification-option-card:hover::before {
    opacity: 1;
}

[b-9noxuakgbb] .certification-option-card.selected-card {
    background: rgba(var(--glytic-primary-rgb), 0.15);
    border: 2px solid var(--glytic-primary);
}

[b-9noxuakgbb] .certification-option-card.selected-card::before {
    opacity: 1;
}

[b-9noxuakgbb] .certification-option-card:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.cert-name[b-9noxuakgbb] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
    word-wrap: break-word;
}

.cert-code[b-9noxuakgbb] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    font-size: 0.8rem;
}

.cert-badges[b-9noxuakgbb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.no-results-searching[b-9noxuakgbb],
.no-results[b-9noxuakgbb] {
    padding: 20px;
    text-align: center;
}

.no-results ul[b-9noxuakgbb] {
    list-style: none;
    padding-left: 0;
}

.no-results li[b-9noxuakgbb] {
    padding: 4px 0;
}

.no-results li[b-9noxuakgbb]::before {
    content: '->';
    color: var(--mud-palette-info);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: 1em;
}

/* Official topics card (from global CSS) */
.official-topics-card[b-9noxuakgbb] {
    background: rgba(0, 200, 81, 0.05);
    border: 1px solid rgba(0, 200, 81, 0.2);
    border-radius: 12px;
}

/* Blueprint status indicators (from global CSS) */
.blueprint-status-card[b-9noxuakgbb] {
    transition: all 0.3s ease;
}

.blueprint-loading[b-9noxuakgbb] {
    background: linear-gradient(135deg, rgba(51, 181, 229, 0.1), rgba(51, 181, 229, 0.05));
    border-color: rgba(51, 181, 229, 0.3);
}

.blueprint-ready[b-9noxuakgbb] {
    background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(0, 200, 81, 0.05));
    border-color: rgba(0, 200, 81, 0.3);
}

.blueprint-error[b-9noxuakgbb] {
    background: linear-gradient(135deg, rgba(255, 187, 51, 0.1), rgba(255, 187, 51, 0.05));
    border-color: rgba(255, 187, 51, 0.3);
}

/* Official standards list */
.official-standards-list[b-9noxuakgbb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.standard-item[b-9noxuakgbb] {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
/* /Shared/Components/OfflineBanner.razor.rz.scp.css */
.offline-banner[b-985flyd223] {
    position: sticky;
    top: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--glytic-error);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    animation: slideDown-b-985flyd223 0.3s ease-out;
}

.offline-icon[b-985flyd223] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    font-size: 0.75rem;
}

@keyframes slideDown-b-985flyd223 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Shared/Components/PremiumUpsellDialog.razor.rz.scp.css */
.premium-upsell-dialog[b-xynifshkum] {
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0.25rem 0.1rem 0.35rem;
    color: var(--glytic-text-primary);
}

.upsell-kicker[b-xynifshkum] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--glytic-primary-rgb), 0.30);
    color: var(--glytic-primary);
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
}

/* Double-layer reveal: element bg = border color; ::before paints the interior so the hairline
   follows the top-right cut (clip-path shears a rectangular border). */
.upsell-kicker[b-xynifshkum]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.premium-upsell-dialog[b-xynifshkum]  .upsell-title {
    margin: 0;
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--glytic-text-primary);
}

.premium-upsell-dialog[b-xynifshkum]  .upsell-copy {
    margin: 0;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
}

/* The one bone value plate: the concrete question count. */
.upsell-detail[b-xynifshkum] {
    padding: 0.75rem 0.9rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    background: var(--qf-bone);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.upsell-actions[b-xynifshkum] {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.1rem;
}

.upsell-actions[b-xynifshkum]  .upsell-plan {
    min-height: 52px;
    border-radius: 8px;
    clip-path: none;
    text-transform: none;
}

.upsell-actions[b-xynifshkum]  .upsell-plan .mud-button-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.upsell-plan-main[b-xynifshkum] {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upsell-plan-price[b-xynifshkum] {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.92;
    text-align: right;
}

/* Ember primary (Annual). Matches the shared filled-primary hover swap. */
.upsell-actions[b-xynifshkum]  .upsell-plan-primary {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    box-shadow: none;
}

.upsell-actions[b-xynifshkum]  .upsell-plan-primary:hover {
    background: var(--forge-gradient);
}

.premium-upsell-dialog[b-xynifshkum]  .upsell-dismiss {
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .premium-upsell-dialog[b-xynifshkum] {
        width: 100%;
        gap: 0.8rem;
    }

    .premium-upsell-dialog[b-xynifshkum]  .upsell-title {
        font-size: 1.3rem;
    }

    .upsell-actions[b-xynifshkum]  .upsell-plan {
        min-height: 50px;
    }

    .upsell-plan-price[b-xynifshkum] {
        font-size: 0.84rem;
    }
}
/* /Shared/Components/ProgressRing.razor.rz.scp.css */
.progress-ring-container[b-swo26ypni2] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-svg[b-swo26ypni2] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg[b-swo26ypni2] {
    stroke: rgba(var(--glytic-primary-rgb), 0.12);
}

.progress-ring-fill[b-swo26ypni2] {
    stroke: var(--ring-color, var(--glytic-primary));
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring-color, var(--glytic-primary)) 40%, transparent));
}

.progress-ring-label[b-swo26ypni2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .progress-ring-fill[b-swo26ypni2] {
        transition: none;
    }
}
/* /Shared/Components/ProgressToastContainer.razor.rz.scp.css */
.progress-toasts-container[b-bgqgi7e470] {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
}

.minimized-panel[b-bgqgi7e470] {
    background: rgba(26, 34, 48, 0.95);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.minimized-panel.collapsed[b-bgqgi7e470] {
    max-height: 40px;
    overflow: hidden;
}

.minimized-panel.expanded[b-bgqgi7e470] {
    max-height: 300px;
}

.minimized-header[b-bgqgi7e470] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--glytic-text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}

.minimized-header:hover[b-bgqgi7e470] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
}

.minimized-header:focus-visible[b-bgqgi7e470] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

.minimized-count[b-bgqgi7e470] {
    background: rgba(var(--glytic-primary-rgb), 0.2);
    color: var(--glytic-primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.minimized-content[b-bgqgi7e470] {
    padding: 0 12px 12px;
    border-top: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    margin-top: 8px;
}

.minimized-toast-item[b-bgqgi7e470] {
    padding: 8px;
    margin: 4px 0;
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-radius: 4px;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.minimized-toast-item:hover[b-bgqgi7e470] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    color: var(--glytic-text-primary);
}

.minimized-toast-item:focus-visible[b-bgqgi7e470] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

.minimized-toast-title[b-bgqgi7e470] {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #fff;
}

.minimized-toast-progress[b-bgqgi7e470] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-progress[b-bgqgi7e470] {
    flex: 1;
    height: 4px;
}

.mini-progress-text[b-bgqgi7e470] {
    font-size: 11px;
    color: #ccc;
    min-width: 30px;
}

.minimized-toast-more[b-bgqgi7e470] {
    text-align: center;
    font-size: 12px;
    color: #888;
    padding: 4px;
    font-style: italic;
}

.active-toasts[b-bgqgi7e470] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-toast[b-bgqgi7e470] {
    background: linear-gradient(135deg, rgba(26, 34, 48, 0.95), rgba(18, 22, 30, 0.95));
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    min-height: 80px;
}

.toast-running[b-bgqgi7e470] {
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--glytic-primary-rgb), 0.2);
}

.toast-completed[b-bgqgi7e470] {
    border-color: rgba(var(--glytic-secondary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--glytic-secondary-rgb), 0.2);
}

.toast-failed[b-bgqgi7e470] {
    border-color: rgba(244, 67, 54, 0.5);
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.2);
}

.toast-cancelled[b-bgqgi7e470] {
    border-color: rgba(255, 152, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.2);
}

.toast-header[b-bgqgi7e470] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.toast-title[b-bgqgi7e470] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.toast-actions[b-bgqgi7e470] {
    display: flex;
    gap: 4px;
}

.toast-content[b-bgqgi7e470] {
    color: #ccc;
}

.toast-description[b-bgqgi7e470] {
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.toast-progress[b-bgqgi7e470] {
    margin-bottom: 8px;
}

.progress-bar[b-bgqgi7e470] {
    margin-bottom: 4px;
    height: 6px;
    border-radius: 3px;
}

.progress-text[b-bgqgi7e470] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
}

.progress-time[b-bgqgi7e470] {
    font-style: italic;
}

.toast-success[b-bgqgi7e470], .toast-error[b-bgqgi7e470], .toast-cancelled[b-bgqgi7e470] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 0;
}

.toast-action[b-bgqgi7e470] {
    margin-top: 2px;
    margin-left: -8px;
}

.toast-metadata[b-bgqgi7e470] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.metadata-item[b-bgqgi7e470] {
    display: flex;
    font-size: 11px;
    margin-bottom: 2px;
}

.metadata-key[b-bgqgi7e470] {
    color: #888;
    min-width: 60px;
}

.metadata-value[b-bgqgi7e470] {
    color: #ccc;
    font-weight: 500;
}

@keyframes slideInRight-b-bgqgi7e470 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .progress-toasts-container[b-bgqgi7e470] {
        left: 10px;
        right: 10px;
        max-width: none;
        top: 60px;
    }

    .progress-toast[b-bgqgi7e470] {
        padding: 12px;
    }

    .toast-title[b-bgqgi7e470] {
        font-size: 13px;
    }

    .toast-description[b-bgqgi7e470] {
        font-size: 12px;
    }
}
/* /Shared/Components/PwaInstallPrompt.razor.rz.scp.css */
.pwa-install-banner[b-gfxo8bk5cl] {
    position: fixed;
    /* Dock to the bottom-right corner (respecting safe areas) instead of centering full-width,
       so it never overlaps centered page content such as the pricing cards (atlas M2/M4). */
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    left: auto;
    max-width: min(360px, calc(100vw - 32px));
    margin: 0;
    z-index: 1400;
    display: flex;
    /* Stack the icon+copy row above the action buttons so long localized strings
       (es "Acceso rapido y estudio sin conexion") wrap freely and the buttons can
       never crowd or overlap the text on desktop. */
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
    background: var(--glytic-bg-medium);
    border: 1px solid var(--glytic-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-gfxo8bk5cl 0.3s ease-out;
}

.pwa-install-content[b-gfxo8bk5cl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.pwa-install-icon[b-gfxo8bk5cl] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.pwa-install-text[b-gfxo8bk5cl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pwa-install-text strong[b-gfxo8bk5cl] {
    color: var(--glytic-text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.pwa-install-text span[b-gfxo8bk5cl] {
    color: var(--glytic-text-secondary);
    font-size: 0.78rem;
    /* Allow the subtitle to wrap onto a second line instead of being clipped; the
       column layout gives it the full banner width. */
    line-height: 1.3;
}

.pwa-install-actions[b-gfxo8bk5cl] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    justify-content: flex-end;
}

.pwa-install-btn[b-gfxo8bk5cl] {
    min-height: var(--qf-btn-h-sm);
    padding: 6px 14px;
    border-radius: var(--qf-btn-radius);
    font-family: var(--glytic-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pwa-install-primary[b-gfxo8bk5cl] {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
}

.pwa-install-primary:hover[b-gfxo8bk5cl] {
    background: var(--forge-gradient);
}

.pwa-install-dismiss[b-gfxo8bk5cl] {
    background: transparent;
    color: var(--glytic-text-secondary);
}

.pwa-install-dismiss:hover[b-gfxo8bk5cl] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pwa-install-btn:focus-visible[b-gfxo8bk5cl] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

@keyframes slideUp-b-gfxo8bk5cl {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .pwa-install-banner[b-gfxo8bk5cl] {
        /* Full-width bottom strip on phones, still clear of the home-indicator safe area. */
        left: 8px;
        right: 8px;
        max-width: none;
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    .pwa-install-actions[b-gfxo8bk5cl] {
        width: 100%;
    }
}
/* /Shared/Components/QfSpinner.razor.rz.scp.css */
/* QfSpinner -- indeterminate orbit ring loader.
   A single ring painted with conic-gradient (transparent -> faint teal trail ->
   full brand-teal head); a radial-gradient mask punches the centre out so it is
   a ring, not a pie. The whole span rotates via an HTML-box transform
   (GPU-composited in every browser). The transparent start of the conic is the
   track -- no separate track element. Monochrome repaints the sweep in
   currentColor for filled/coloured CTAs. */

.qf-spinner[b-lq39d5z8yb] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 0;
}

/* The orbit: a square ring that rotates as one unit. Ring thickness comes from
   --qf-spinner-ring (set per size below); the mask keeps only the outer RING px
   visible. */
.qf-spinner-orbit[b-lq39d5z8yb] {
    display: block;
    width: var(--qf-spinner-size, 44px);
    height: var(--qf-spinner-size, 44px);
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(var(--glytic-primary-rgb, 92, 168, 184), 0) 0%,
        rgba(var(--glytic-primary-rgb, 92, 168, 184), 0.16) 25%,
        rgba(var(--glytic-primary-rgb, 92, 168, 184), 0.22) 72%,
        var(--glytic-primary, #5CA8B8) 100%);
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - var(--qf-spinner-ring, 2.5px)),
        #000 calc(100% - var(--qf-spinner-ring, 2.5px) + 0.5px));
    mask: radial-gradient(farthest-side,
        transparent calc(100% - var(--qf-spinner-ring, 2.5px)),
        #000 calc(100% - var(--qf-spinner-ring, 2.5px) + 0.5px));
    animation: qf-spin-rotate-b-lq39d5z8yb 0.85s linear infinite;
    will-change: transform;
}

/* Ring thickness per size. */
.qf-spinner-small[b-lq39d5z8yb] {
    --qf-spinner-ring: 2px;
}
.qf-spinner-medium[b-lq39d5z8yb] {
    --qf-spinner-ring: 2.5px;
}
.qf-spinner-large[b-lq39d5z8yb] {
    --qf-spinner-ring: 3px;
}

@keyframes qf-spin-rotate-b-lq39d5z8yb {
    to { transform: rotate(360deg); }
}

/* Monochrome mode: the sweep rides the inherited text colour (currentColor) so
   the spinner reads as ink on a filled/coloured CTA. */
.qf-spinner-mono .qf-spinner-orbit[b-lq39d5z8yb] {
    background: conic-gradient(from 0deg,
        transparent 0%,
        color-mix(in srgb, currentColor 45%, transparent) 72%,
        currentColor 100%);
}

/* Muted micro-type caption under the mark (Medium/Large only) */
.qf-spinner-label[b-lq39d5z8yb] {
    font-family: var(--glytic-font-body, 'Inter', sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--glytic-text-muted, #a0a0a0);
    text-align: center;
    max-width: 22ch;
}

.qf-spinner-small .qf-spinner-label[b-lq39d5z8yb] {
    display: none;
}

/* Reduced motion: no rotation -- gentle opacity pulse of the ring instead. */
@media (prefers-reduced-motion: reduce) {
    .qf-spinner-orbit[b-lq39d5z8yb] {
        animation: qf-spin-pulse-b-lq39d5z8yb 1.5s ease-in-out infinite;
    }
    @keyframes qf-spin-pulse-b-lq39d5z8yb {
        0%, 100% { opacity: 0.45; }
        50% { opacity: 1; }
    }
}
/* /Shared/Components/ScrollToTopButton.razor.rz.scp.css */
.scroll-to-top-btn[b-mbqqxsr45y] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    background: rgba(var(--glytic-primary-rgb), 0.15);
    backdrop-filter: blur(8px);
    color: var(--glytic-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scroll-to-top-btn:hover[b-mbqqxsr45y] {
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
    color: var(--glytic-text-primary);
}

.scroll-to-top-btn:focus-visible[b-mbqqxsr45y] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top-btn[b-mbqqxsr45y] {
        transition: none;
    }
}

/* On phones the AI tutor FAB (54px circle, z 1200) owns the bottom-right corner of quiz
   pages; at bottom:24 this button sat directly on top of it and swallowed its taps.
   Step above the FAB whenever one is mounted. Breakpoint mirrors AiTutorPanel's mobile
   block. :has() is safe here: browsers without it simply keep the old overlap. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    body:has(.tutor.tutor--dock) .scroll-to-top-btn[b-mbqqxsr45y],
    body:has(.tutor.tutor--collapsed) .scroll-to-top-btn[b-mbqqxsr45y] {
        bottom: 172px;
        right: 14px;
    }
}

/* ExamDetail's sticky start bar owns the bottom edge on phones (always visible below 960px,
   full width, ~70px tall). With the sticky flashcards button gone the Start CTA now stretches
   under this circle, so step above the bar there too. Breakpoint and body:has() rationale
   mirror the AI tutor rule above. */
@media (max-width: 959.98px) {
    body:has(.sticky-start-bar) .scroll-to-top-btn[b-mbqqxsr45y] {
        bottom: calc(84px + env(safe-area-inset-bottom));
        right: 14px;
    }
}
/* /Shared/Components/TopicSelectionGrid.razor.rz.scp.css */
/* Topic Selection Grid Styles */
.topic-selection-container[b-v7aqoyfhsc] {
    padding: 24px;
    border-radius: 12px;
    margin: 16px 0;
}

.topic-selection-title[b-v7aqoyfhsc] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.topic-controls[b-v7aqoyfhsc] {
    display: flex;
    gap: 8px;
}

.topic-grid[b-v7aqoyfhsc] {
    margin-top: 16px;
}

[b-v7aqoyfhsc] .topic-card {
    transition: border-color 0.15s ease, background-color 0.15s ease;
    border-radius: 12px;
    min-height: 64px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Unselected state - plain background */
[b-v7aqoyfhsc] .topic-card-unselected {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

[b-v7aqoyfhsc] .topic-card-unselected:hover {
    border-color: var(--glytic-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Selected state - blue glassy background matching logo palette */
[b-v7aqoyfhsc] .topic-card-selected {
    background: linear-gradient(135deg, rgba(var(--forge-primary-rgb), 0.15) 0%, rgba(58, 122, 216, 0.12) 100%);
    border: 2px solid rgba(var(--forge-primary-rgb), 0.4);
    backdrop-filter: blur(8px);
    position: relative;
}

[b-v7aqoyfhsc] .topic-card-selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--forge-primary-rgb), 0.08) 0%, rgba(58, 122, 216, 0.05) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Official mode selected state */
[b-v7aqoyfhsc] .topic-card.official-mode.topic-card-selected {
    background: linear-gradient(135deg, rgba(var(--forge-primary-rgb), 0.15) 0%, rgba(58, 122, 216, 0.12) 100%);
    border-color: rgba(var(--forge-primary-rgb), 0.4);
}

[b-v7aqoyfhsc] .topic-card.official-mode.topic-card-selected::before {
    background: linear-gradient(135deg, rgba(var(--forge-primary-rgb), 0.08) 0%, rgba(58, 122, 216, 0.05) 100%);
}

/* Hover effects for official mode */
[b-v7aqoyfhsc] .topic-card.official-mode.topic-card-unselected:hover {
    border-color: var(--glytic-primary);
}

/* Required topic indicator */
[b-v7aqoyfhsc] .topic-card.topic-required {
    border-left: 4px solid var(--mud-palette-warning);
}

[b-v7aqoyfhsc] .topic-card.topic-required.topic-card-selected {
    border-left: 4px solid rgba(255, 193, 7, 0.8);
}

[b-v7aqoyfhsc] .topic-card:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Topic content styling */
.topic-content[b-v7aqoyfhsc] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.topic-name[b-v7aqoyfhsc] {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.topic-description[b-v7aqoyfhsc] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    font-size: 0.875rem;
}

/* Selected icon styling */
.topic-selected-icon[b-v7aqoyfhsc] {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: checkmarkPop-b-v7aqoyfhsc 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Selection summary styling */
.topic-selection-summary[b-v7aqoyfhsc] {
    display: flex;
    justify-content: center;
}

.topic-loading-container[b-v7aqoyfhsc] {
    padding: 24px;
    text-align: center;
}

.topic-no-data[b-v7aqoyfhsc] {
    margin: 16px 0;
}

/* Enhanced glassy effect for selected cards */
[b-v7aqoyfhsc] .topic-card-selected::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .topic-selection-container[b-v7aqoyfhsc] {
        padding: 16px;
    }

    .topic-controls[b-v7aqoyfhsc] {
        flex-direction: column;
        gap: 4px;
    }

    [b-v7aqoyfhsc] .topic-card {
        min-height: 48px;
    }

    .topic-name[b-v7aqoyfhsc] {
        font-size: 0.9rem;
    }

    .topic-description[b-v7aqoyfhsc] {
        font-size: 0.8rem;
    }
}

[b-v7aqoyfhsc] .topic-card:active {
    transform: scale(0.98);
}

@keyframes checkmarkPop-b-v7aqoyfhsc {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
/* /Shared/Components/TrialOfferDialog.razor.rz.scp.css */
/* TrialOfferDialog -- professional fintech-minimal offer treatment on the house
   dialog baseline. Content lives inside DialogContent/TitleContent (both carry this
   component's scope attribute), so these rules reach it even though MudDialog
   teleports the paper. The paper surface -- rounded corners, 1px border, fill,
   shadow, close button -- is the .mud-dialog baseline in mudblazor-overrides.css and
   is deliberately left alone here: no clip-path, no authored border plate, so the
   dialog has four identical rounded corners at every width. (An earlier cut-corner
   plate painted a polygon over the rounded paper and the top-right corner showed
   both.) The CTA renders as an anchor (MudButton Href), so overrides use the bare
   class where the compiled scope attribute carries specificity past MudBlazor's own
   filled-primary rules. Register: standard sans stack, size/weight/color hierarchy,
   shared PRIMARY/QUIET button-system recipe on the two actions -- no cut corners,
   display fonts, or translate/scale motion. */

/* Headline: body font stack, solid text color, sentence case. Hierarchy comes
   from size and weight only. Balance + anywhere-wrap keep long es/hi titles
   from shearing the measure. */
.trial-title[b-m1lg2n2tj9] {
    margin: 0;
    font-family: var(--glytic-font-body);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--glytic-text-primary);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Focused single-column measure with one spacing rhythm; opacity-only entrance
   (the shell's reduced-motion kill disables it for those users). */
.trial-offer-dialog[b-m1lg2n2tj9] {
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: trial-offer-enter-b-m1lg2n2tj9 0.2s ease-out both;
}

@keyframes trial-offer-enter-b-m1lg2n2tj9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Supporting body: a clear step down from the headline. */
.trial-offer-dialog[b-m1lg2n2tj9]  .trial-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
}

/* Action zone: one column, full-width targets, hairline divider above
   (the shell action bar no longer renders, so its hairline is restored here). */
.trial-actions[b-m1lg2n2tj9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--qf-line);
}

/* Primary CTA: shared button-system ember fill/hover (site-wide PRIMARY recipe),
   48px minimum hit area. No transform, no glow. */
.trial-offer-dialog[b-m1lg2n2tj9]  .trial-cta {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    box-shadow: none;
    transition: background-color 0.15s, background-image 0.15s;
}

.trial-offer-dialog[b-m1lg2n2tj9]  .trial-cta .mud-button-label {
    color: var(--qf-ink);
}

.trial-offer-dialog[b-m1lg2n2tj9]  .trial-cta:hover,
.trial-offer-dialog[b-m1lg2n2tj9]  .trial-cta:active {
    background: var(--forge-gradient);
    box-shadow: none;
}

/* No clip-path on this surface, so the focus ring sits outside the box
   (site input-focus convention: steel teal). */
.trial-offer-dialog[b-m1lg2n2tj9]  .trial-cta:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Dismiss: quiet text escape hatch, clearly secondary, 44px minimum target.
   Hover keeps Mud's subtle text-button tint and lifts the label only. */
.trial-offer-dialog[b-m1lg2n2tj9]  .trial-dismiss {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    color: var(--glytic-text-secondary);
    border-radius: var(--qf-btn-radius);
    transition: color 0.15s;
}

.trial-offer-dialog[b-m1lg2n2tj9]  .trial-dismiss:hover {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.trial-offer-dialog[b-m1lg2n2tj9]  .trial-dismiss:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* Terms fine print: a quiet footnote under the action zone, not a competing plate. */
.trial-card-note[b-m1lg2n2tj9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--glytic-text-muted);
}

.trial-card-note[b-m1lg2n2tj9]  .mud-icon-size-small {
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: var(--glytic-text-muted);
    opacity: 0.85;
}

@media (max-width: 600px) {
    .trial-title[b-m1lg2n2tj9] {
        font-size: 1.25rem;
    }

    .trial-offer-dialog[b-m1lg2n2tj9] {
        width: 100%;
        gap: 0.9rem;
    }
}
/* /Shared/CustomErrorBoundary.razor.rz.scp.css */
.error-boundary-container[b-0hb14tcym1] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.error-boundary-card[b-0hb14tcym1] {
    max-width: 480px;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: var(--glytic-border-radius, 20px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.error-icon-wrap[b-0hb14tcym1] {
    margin-bottom: 1rem;
}

.error-title[b-0hb14tcym1] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    color: var(--glytic-text-primary) !important;
    letter-spacing: 0.03em;
}

.error-sub[b-0hb14tcym1] {
    color: var(--glytic-text-muted) !important;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.error-id-row[b-0hb14tcym1] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(var(--glytic-primary-rgb), 0.06);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
    border-radius: 100px;
    padding: 0.3rem 0.9rem;
}

.error-id-label[b-0hb14tcym1] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--glytic-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.error-id-value[b-0hb14tcym1] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--glytic-primary);
    font-family: monospace;
    letter-spacing: 0.06em;
}

.error-actions[b-0hb14tcym1] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .error-boundary-container[b-0hb14tcym1] {
        padding: 2rem 1rem;
    }

    .error-actions[b-0hb14tcym1] {
        flex-direction: column;
    }
}
/* /Shared/ExamDetailCareerSalary.razor.rz.scp.css */
.career-salary-section[b-nb8qody0e6] {
    /* Inherits content-section from parent page */
}

.salary-bars[b-nb8qody0e6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.salary-band[b-nb8qody0e6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.salary-band-header[b-nb8qody0e6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.salary-level[b-nb8qody0e6] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.salary-range[b-nb8qody0e6] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.salary-bar-track[b-nb8qody0e6] {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.salary-bar-fill[b-nb8qody0e6] {
    height: 100%;
    /* Angled trajectory bar end */
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    transition: width 0.6s ease;
}

.bar-entry[b-nb8qody0e6] {
    background: rgba(var(--glytic-primary-rgb), 0.35);
}

.bar-mid[b-nb8qody0e6] {
    background: rgba(var(--glytic-primary-rgb), 0.55);
}

.bar-senior[b-nb8qody0e6] {
    background: rgba(var(--glytic-primary-rgb), 0.85);
}

/* Median = the single earned-value moment -> bone plate */
.salary-single[b-nb8qody0e6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 18px;
    background: var(--qf-bone, #EFE7D2);
    clip-path: var(--qf-clip-card);
    margin-bottom: 16px;
}

.salary-single-label[b-nb8qody0e6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--qf-bone-dim, #5B5648);
}

.salary-single-value[b-nb8qody0e6] {
    font-family: var(--glytic-font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--qf-ink, #070605);
    font-variant-numeric: tabular-nums;
}

.salary-single-role[b-nb8qody0e6] {
    font-size: 0.85rem;
    color: var(--qf-bone-dim, #5B5648);
}

.career-chips[b-nb8qody0e6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.career-chip[b-nb8qody0e6] {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    clip-path: var(--qf-clip-btn);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.trend-chip[b-nb8qody0e6] {
    display: inline-flex;
    align-items: center;
}

.trend-growing[b-nb8qody0e6] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
}

.trend-stable[b-nb8qody0e6] {
    background: rgba(255, 200, 50, 0.1);
    color: rgba(255, 200, 50, 0.7);
}

.trend-declining[b-nb8qody0e6] {
    background: rgba(255, 80, 80, 0.1);
    color: rgba(255, 80, 80, 0.7);
}

.section-cta[b-nb8qody0e6] {
    text-align: center;
    margin-top: 16px;
}

.salary-source[b-nb8qody0e6] {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    word-break: break-word;
}

.salary-source a[b-nb8qody0e6] {
    color: var(--glytic-primary);
}

.salary-market-note[b-nb8qody0e6] {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* This note sits INSIDE .salary-single, the bone plate, not on the page ground, so the
       page's muted grey (#A0A0A0) landed at 2.1:1 against #EFE7D2 -- an axe serious
       color-contrast violation that only became visible once salary figures started
       rendering again (BLS sourcing, 2026-09-04). Use the plate's own dimmed ink, the same
       token .salary-single-role uses, which measures 6.6:1 on bone. */
    color: var(--qf-bone-dim, #5B5648);
}

.salary-source-note[b-nb8qody0e6] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
}
/* /Shared/ExamDetailHeader.razor.rz.scp.css */
/* Rating summary: clickable row that opens the rate-exam dialog. Was a bare <div onclick>
   with inline layout styles and no scoped CSS; folded the layout into this rule as part of
   converting it to a real <button> (accessibility fix, see ExamDetailHeader.razor). This is a
   plain native <button> rendered directly by this component (not a child component's Class
   parameter), so it gets the scope attribute directly -- no ::deep needed. */
.header-rating-clickable[b-n76zcsn83j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.header-rating-clickable:hover[b-n76zcsn83j] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), .06);
}

.header-rating-clickable:focus-visible[b-n76zcsn83j] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}
/* /Shared/ExamDetailPathForward.razor.rz.scp.css */
.path-card[b-qydf8bnqcr] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 12px;
}

.path-stepper[b-qydf8bnqcr] {
    display: flex;
    flex-direction: column;
    padding-left: 4px;
}

.path-node[b-qydf8bnqcr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}

.path-dot[b-qydf8bnqcr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.dot-prev[b-qydf8bnqcr] {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.dot-current[b-qydf8bnqcr] {
    width: 16px;
    height: 16px;
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border: 2px solid rgba(var(--glytic-primary-rgb), 0.7);
    margin-left: -2px;
}

.dot-next[b-qydf8bnqcr] {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.path-connector[b-qydf8bnqcr] {
    position: absolute;
    left: 5px;
    top: 16px;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.path-node-current .path-connector[b-qydf8bnqcr] {
    left: 7px;
}

.path-info[b-qydf8bnqcr] {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

/* The alpha values in this block were measured from the painted pixels on Test on 2026-09-05
   (bundle-2 task 5, remediation/a11y-incomplete-adjudication.json). The section sits on the
   exam page's gradient, which is why axe could only report these nodes as INCOMPLETE; measured,
   every one of them was below the WCAG 2.1 AA 1.4.3 threshold of 4.5:1 for text this size, some
   far below (.path-tier at 2.29:1). The alphas are raised to the smallest value that clears 4.5:1
   with a margin, so the step hierarchy - dim for the next step, bright for the current one -
   survives at readable contrast rather than being carried by unreadable text. */
.path-label[b-qydf8bnqcr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5); /* was 0.35: measured 3.19:1 */
    letter-spacing: 0.5px;
}

.path-label-current[b-qydf8bnqcr] {
    color: rgba(var(--glytic-primary-rgb), 0.85); /* was 0.6: measured 3.06:1 */
    font-weight: 600;
}

.path-cert-link[b-qydf8bnqcr] {
    color: rgba(var(--glytic-primary-rgb), 0.9); /* was 0.7: measured 3.49:1 */
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: rgba(var(--glytic-primary-rgb), 0.3);
}

.path-cert-link:hover[b-qydf8bnqcr] {
    color: rgba(var(--glytic-primary-rgb), 0.9);
}

.path-cert-name-dim[b-qydf8bnqcr] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.path-cert-name-current[b-qydf8bnqcr] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
}

.path-tier[b-qydf8bnqcr] {
    font-size: 0.75rem;
    color: rgba(var(--glytic-primary-rgb), 0.85); /* was 0.45: measured 2.29:1 */
}

.path-name[b-qydf8bnqcr] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5); /* was 0.3: measured 2.68:1 */
    margin-top: 4px;
    padding-left: 4px;
}
/* /Shared/ExamDetailPrerequisites.razor.rz.scp.css */
.prerequisites-section[b-ds2q7ldkf1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.prereq-group[b-ds2q7ldkf1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prereq-group-heading[b-ds2q7ldkf1] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.prereq-heading-required[b-ds2q7ldkf1] {
    color: var(--glytic-primary);
}

.prereq-heading-recommended[b-ds2q7ldkf1] {
    color: rgba(255, 255, 255, 0.5);
}

.prereq-item[b-ds2q7ldkf1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
}

.prereq-item-required[b-ds2q7ldkf1] {
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15);
}

.prereq-item-recommended[b-ds2q7ldkf1] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.prereq-type-badge[b-ds2q7ldkf1] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

.prereq-badge-required[b-ds2q7ldkf1] {
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
}

.prereq-badge-recommended[b-ds2q7ldkf1] {
    background: rgba(255, 200, 50, 0.1);
    color: rgba(255, 200, 50, 0.8);
}

.prereq-description[b-ds2q7ldkf1] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.prereq-note[b-ds2q7ldkf1] {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
}
/* /Shared/ExamDetailReviews.razor.rz.scp.css */
/* "Helpful" vote toggle -- separate instance from ExamReviewsSection.razor's helpful-btn (this
   is ExamDetailReviews's own review list, a different host component). The existing inline
   <style> block in ExamDetailReviews.razor only dims/undims opacity; it does not distinguish
   voted vs. not-voted, because the global button system renders MudButton Text Color="Primary"
   and Color="Default" identically (both map to --glytic-text-secondary). Restore the toggle's
   active state, matching the selected-chip/pill treatment. MudButton is a child component, so
   its Class="helpful-btn" root needs ::deep. */
[b-qe974joko6] .helpful-btn {
    border-radius: var(--qf-btn-radius);
}

[b-qe974joko6] .helpful-btn.mud-button-text-primary {
    background: rgba(var(--glytic-primary-rgb), .14);
    border: 1px solid var(--glytic-primary);
    color: var(--glytic-text-primary);
}
/* /Shared/ExamReviewsSection.razor.rz.scp.css */
/* "Helpful" vote toggle. The existing inline <style> block in ExamReviewsSection.razor only
   dims/undims opacity; it does not distinguish voted vs. not-voted, because the global button
   system renders MudButton Text Color="Primary" and Color="Default" identically (both map to
   --glytic-text-secondary). Restore the toggle's active state, matching the selected-chip/pill
   treatment. MudButton is a child component, so its Class="helpful-btn" root needs ::deep. */
[b-nqcqzca9uf] .helpful-btn {
    border-radius: var(--qf-btn-radius);
}

[b-nqcqzca9uf] .helpful-btn.mud-button-text-primary {
    background: rgba(var(--glytic-primary-rgb), .14);
    border: 1px solid var(--glytic-primary);
    color: var(--glytic-text-primary);
}
/* /Shared/HeroMiniQuiz.razor.rz.scp.css */
/* ---- Hero Product Preview Card ---- */

/* Composed Strike: the product is the art -- a live question card. Cut-corner
   geometry, hairline border, flat iron plane. No 3D tilt, no glow (clip-path
   would clip a shadow anyway). */
.hero-product-preview[b-bsr8jpcch2] {
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 1.6rem clamp(1.2rem, 2vw, 1.8rem);
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = hairline border color; ::before paints the
   interior so the border follows the cut corners (a real border is sheared by clip-path).
   z-index:-1 + isolation on the element; children need no lift. */
.hero-product-preview[b-bsr8jpcch2]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.hero-product-preview:hover[b-bsr8jpcch2] {
    background: rgba(var(--glytic-primary-rgb), 0.5);
}

/* ---- Quiz Badge ---- */

/* Inline squared tag (was an absolute pill at top:-12px, which the card's clip-path
   would crop). Ember plate with ink text, small corner cut. */
.hero-quiz-badge[b-bsr8jpcch2] {
    display: inline-block;
    background: var(--forge-primary);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-weight: 700;
    font-size: 0.64rem;
    padding: 0.25rem 0.7rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
}

/* ---- Exam / Vendor Label ---- */

.hero-preview-vendor[b-bsr8jpcch2] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--glytic-primary);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    position: relative;
    z-index: 1;
}

/* ---- Question Block ---- */

.hero-question-block[b-bsr8jpcch2] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--qf-line);
    border-radius: 0;
    padding: 1rem 1.1rem;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 1;
}

.hero-question-text[b-bsr8jpcch2] {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--glytic-text-primary);
    line-height: 1.55;
    margin-bottom: 0.85rem;
    overflow-wrap: anywhere;
}

/* ---- Answer Options ---- */

.hero-answer-options[b-bsr8jpcch2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Option container -- shared box styling for the skeleton/result <div> and the
   interactive <button>. Deliberately a plain BLOCK, not a flex container: a native
   <button> carries UA flex defaults (justify-content:center) and on mobile WebKit /
   iOS Safari its flex children do not reliably absorb free space, which shoved the
   letter bubbles around by answer length. The flex ROW lives on .hero-answer-opt-inner
   (a plain span) instead, which behaves identically on every engine. */
/* Answer tile recipe: min-height 56, radius 8, dark surface, text-primary. */
.hero-answer-opt[b-bsr8jpcch2],
.hero-answer-opt-btn[b-bsr8jpcch2] {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 0.5rem 0.7rem;
    border-radius: var(--qf-btn-radius);
    font-size: 0.78rem;
    color: var(--glytic-text-primary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--qf-line);
    text-align: left;
}

/* Interactive variant: reset native button chrome */
.hero-answer-opt-btn[b-bsr8jpcch2] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Firefox adds an internal padding via ::-moz-focus-inner that shifts button content */
.hero-answer-opt-btn[b-bsr8jpcch2]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.hero-answer-opt-btn:hover:not(:disabled)[b-bsr8jpcch2] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--glytic-primary-rgb), 0.35);
    color: var(--glytic-text-primary);
}

.hero-answer-opt-btn:disabled[b-bsr8jpcch2] {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Hydration gate (prerendered HTML, before the first interactive render): the button is
   disabled so the tap is not silently swallowed, but it must not read as broken. */
.hero-answer-opt-btn[aria-busy="true"]:disabled[b-bsr8jpcch2] {
    cursor: progress;
    opacity: 1;
}

/* Fallback path only (payload without the answer index): acknowledge the tap instantly
   while the server check is in flight. */
.hero-answer-opt-btn.selected[b-bsr8jpcch2] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    opacity: 1;
}

/* Restore a keyboard focus indicator (the base rule sets outline:none). Inset ring so it
   reads clearly inside the tight hairline option box (WCAG 2.4.7). */
.hero-answer-opt-btn:focus-visible[b-bsr8jpcch2] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

/* Touch targets. The option box is 0.5rem of vertical padding around a 20px line plus the
   hairline border -- 38px, measured on Test 2026-09-05 -- which is under the programme's 44px
   minimum. Below 900px, where the card now stacks into the mobile hero (Index.razor.css) and
   the only input is a finger, the vertical padding grows to 0.75rem: 20 + 24 + 2 = 46px. The
   type size is deliberately unchanged. The graded <div> variant gets the same padding as the
   interactive <button> so the answered and unanswered states keep the same option height. */
@media (max-width: 900px) {
    .hero-answer-opt[b-bsr8jpcch2],
    .hero-answer-opt-btn[b-bsr8jpcch2] {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* The flex row. Answer text is the leading child (no letter badge); the optional
   result icon is pushed to the far right via margin-left:auto. align-items:flex-start
   keeps the text pinned to the top so multi-line answers read cleanly. The gap only
   separates the text from the trailing result icon -- there is no leading child, so
   no empty gap sits before the text. */
.hero-answer-opt-inner[b-bsr8jpcch2] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
}

/* Correct / wrong highlighting (applies to both div and button variants) */
.hero-answer-opt.correct[b-bsr8jpcch2] {
    background: rgba(var(--glytic-primary-rgb), 0.07);
    border-color: rgba(var(--glytic-primary-rgb), 0.25);
    color: #dcfffc;
}

.hero-answer-opt.wrong[b-bsr8jpcch2] {
    background: rgba(var(--qf-crimson-rgb), 0.08);
    border-color: rgba(var(--qf-crimson-rgb), 0.4);
    color: #ffd8d8;
}

/* Answer text -- the growing flex child. min-width:0 lets it wrap instead of
   overflowing; the 20px line-height leaves comfortable spacing for wrapped lines. */
.hero-answer-text[b-bsr8jpcch2] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 20px;
    overflow-wrap: anywhere;
}

/* Per-option result icon (audit 2026-07-08: the faint border/background alone read as too
   subtle -- pair the color with an explicit icon so correct/incorrect is unambiguous at a glance). */
.hero-answer-result-icon[b-bsr8jpcch2] {
    margin-left: auto;
    flex-shrink: 0;
}

.hero-answer-opt.correct .hero-answer-result-icon[b-bsr8jpcch2] {
    color: var(--glytic-success);
}

.hero-answer-opt.wrong .hero-answer-result-icon[b-bsr8jpcch2] {
    color: var(--glytic-error);
}

/* ---- Result Banner (icon + text label, stronger than the answer-option tinting alone) ---- */

.hero-result-banner[b-bsr8jpcch2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.75rem;
    position: relative;
    z-index: 1;
}

.hero-result-banner.correct[b-bsr8jpcch2] {
    background: rgba(var(--glytic-success-rgb), 0.12);
    color: var(--glytic-success);
}

.hero-result-banner.incorrect[b-bsr8jpcch2] {
    background: rgba(var(--glytic-error-rgb), 0.12);
    color: var(--glytic-error);
}

/* ---- Bank-size row ("From a bank of N questions") ----
   Replaced the fake progress bar. The explicit line-height + min-height (in em, so it
   tracks the row's own font-size) reserve one text line even when the label is empty, so
   the card is the same height with or without a count (zero layout shift). */

.hero-bank-row[b-bsr8jpcch2] {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    line-height: 1.4;
    min-height: 1.4em;
    letter-spacing: 0.04em;
    color: var(--glytic-text-muted);
    position: relative;
    z-index: 1;
}

/* ---- Post-Answer UI ---- */

.hero-quiz-explanation[b-bsr8jpcch2] {
    font-size: 0.78rem;
    color: var(--glytic-text-muted);
    line-height: 1.55;
    overflow-wrap: anywhere;
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--glytic-primary);
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.hero-quiz-cta-row[b-bsr8jpcch2] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
}

/* Primary recipe: this is another "Find my exam" CTA (button-system migration
   2026-09-23) -- must render identically to the hero search's ember primary. */
.hero-quiz-signup-btn[b-bsr8jpcch2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--qf-btn-h-md);
    border: 1px solid var(--forge-primary);
    cursor: pointer;
    font-family: var(--glytic-font-body);
    text-align: center;
    padding: 0 18px;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hero-quiz-signup-btn:hover[b-bsr8jpcch2] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    text-decoration: none;
}

/* Quiet recipe: retry-in-row action, no background/border. */
.hero-quiz-retry-btn[b-bsr8jpcch2] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    background: none;
    color: var(--glytic-text-secondary);
    border: 0;
    border-radius: var(--qf-btn-radius);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--glytic-font-body);
    cursor: pointer;
    transition: color .15s ease;
}

.hero-quiz-retry-btn:hover[b-bsr8jpcch2] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero-quiz-signup-btn:focus-visible[b-bsr8jpcch2],
.hero-quiz-retry-btn:focus-visible[b-bsr8jpcch2] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* ---- Skeleton Pulse (loading fallback) ---- */

.hero-skeleton-pulse[b-bsr8jpcch2] {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: hero-skeleton-shimmer-b-bsr8jpcch2 1.5s ease-in-out infinite;
}

@keyframes hero-skeleton-shimmer-b-bsr8jpcch2 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* AI Tutor taste is rendered by the shared <TutorTasteCard> component
   (Client/Shared/TutorTasteCard.razor + .razor.css). */

/* One useful sample experience for every screen size. */
.hero-product-preview[b-bsr8jpcch2] {
    background: var(--glytic-bg-medium);
    border: 1px solid var(--glytic-border);
    border-radius: 14px;
    clip-path: none;
    padding: 1.4rem;
}

.hero-product-preview[b-bsr8jpcch2]::before { display: none; }
.hero-product-preview:hover[b-bsr8jpcch2] { background: var(--glytic-bg-medium); }

.hero-sample-title[b-bsr8jpcch2] {
    font-family: var(--glytic-font-heading);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--glytic-text-primary);
    margin: 0 0 0.7rem;
}

.hero-sample-categories[b-bsr8jpcch2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* Filter chip/pill recipe: a selectable category filter (aria-pressed). */
.hero-sample-category[b-bsr8jpcch2] {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--qf-line);
    border-radius: 999px;
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 12px;
    min-height: 32px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hero-sample-category[aria-pressed="true"][b-bsr8jpcch2] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .14);
    color: var(--glytic-text-primary);
}

.hero-sample-category:hover:not(:disabled)[b-bsr8jpcch2] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.hero-sample-category:disabled[b-bsr8jpcch2] { opacity: 0.6; cursor: wait; }
.hero-sample-category:focus-visible[b-bsr8jpcch2] { outline: var(--qf-btn-focus); outline-offset: 2px; }
.hero-preview-vendor[b-bsr8jpcch2] { text-transform: none; letter-spacing: normal; font-size: 0.8rem; line-height: 1.5; }
.hero-question-block[b-bsr8jpcch2] { border: 0; padding: 0; background: transparent; margin-top: 0.65rem; }
.hero-question-text[b-bsr8jpcch2] { font-size: 0.95rem; line-height: 1.6; }
.hero-answer-opt[b-bsr8jpcch2] { font-size: 0.9rem; }
.hero-quiz-explanation[b-bsr8jpcch2] { font-size: 0.9rem; line-height: 1.65; color: var(--glytic-text-secondary); }
.hero-sample-error[b-bsr8jpcch2] { font-size: 0.95rem; color: var(--glytic-text-secondary); line-height: 1.6; }

@media (max-width: 480px) {
    .hero-product-preview[b-bsr8jpcch2] { padding: 1rem; }
    .hero-sample-category[b-bsr8jpcch2] { flex: 1 1 auto; }
}
/* /Shared/HintBlock.razor.rz.scp.css */
/* HintBlock Component Styles - Glass effect with single paragraph layout */

.hint-box[b-kcaxfdxojj] {
    /* Glass background with QuizForge brand colors */
    background: var(--glytic-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* QuizForge brand border */
    border: 1px solid var(--glytic-border);
    background: linear-gradient(145deg, 
        rgba(var(--glytic-primary-rgb), 0.1) 0%, 
        var(--glytic-card-bg) 100%);

    /* Container styling */
    border-radius: var(--glytic-border-radius-small);
    padding: 1.25rem;
    margin: 1rem 0;
    position: relative;

    /* Text contrast for readability */
    color: var(--glytic-text-primary);

    /* Smooth transitions */
    transition: var(--glytic-transition);

    /* Accessibility */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hint-box:hover[b-kcaxfdxojj] {
    background: linear-gradient(145deg, 
        rgba(var(--glytic-primary-rgb), 0.15) 0%, 
        rgba(26, 34, 48, 0.95) 100%);
    border-color: var(--glytic-border-hover);
    box-shadow: 0 6px 20px rgba(var(--glytic-primary-rgb), 0.2);
}

/* Header section with title only (no icons per global rules) */
.hint-header[b-kcaxfdxojj] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--glytic-border);
}

.hint-title[b-kcaxfdxojj] {
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--glytic-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Single paragraph content - converted from three columns */
.hint-content[b-kcaxfdxojj] {
    width: 100%;
}

.hint-text[b-kcaxfdxojj] {
    font-family: var(--glytic-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--glytic-text-secondary);

    /* Paragraph formatting for readability */
    text-align: left;
    word-spacing: 0.05em;
}

.hint-text strong[b-kcaxfdxojj] {
    color: var(--glytic-text-primary);
    font-weight: 600;
    font-size: inherit;
}

/* Loading state */
.hint-box.hint-loading[b-kcaxfdxojj] {
    background: var(--glytic-card-bg);
    border-color: var(--glytic-border);
    opacity: 0.8;
}

.hint-loading-content[b-kcaxfdxojj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.hint-spinner[b-kcaxfdxojj] {
    color: #2196f3;
}

.hint-loading-text[b-kcaxfdxojj] {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #e0e6ed;
    font-style: italic;
}

/* Error state */
.hint-error[b-kcaxfdxojj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.hint-error-icon[b-kcaxfdxojj] {
    color: #f44336;
}

.hint-error-text[b-kcaxfdxojj] {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #ffcdd2;
    font-style: italic;
}

/* Responsive design */
@media (max-width: 768px) {
    .hint-box[b-kcaxfdxojj] {
        padding: 1rem;
        margin: 0.75rem 0;
        border-radius: 8px;
    }
    
    .hint-text[b-kcaxfdxojj] {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .hint-title[b-kcaxfdxojj] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hint-box[b-kcaxfdxojj] {
        padding: 0.875rem;
        margin: 0.5rem 0;
        /* Responsive width adjustment */
        max-width: 90vw;
    }
    
    .hint-text[b-kcaxfdxojj] {
        font-size: 0.9rem;
    }
    
    .hint-header[b-kcaxfdxojj] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.375rem;
    }
}

/* ARIA and accessibility improvements */
.hint-box[role="note"][b-kcaxfdxojj] {
    outline: none;
}

.hint-box:focus-visible[b-kcaxfdxojj] {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hint-box[b-kcaxfdxojj] {
        border-color: #2196f3;
        background: rgba(33, 150, 243, 0.25);
    }
    
    .hint-text[b-kcaxfdxojj] {
        color: #ffffff;
    }
    
    .hint-title[b-kcaxfdxojj] {
        color: #ffffff;
    }
}
/* /Shared/LandingTryQuestion.razor.rz.scp.css */
/* Hidden on desktop -- the hero mini-quiz covers this use case at >900px */
@media (min-width: 901px) {
    .landing-try-section[b-24rfmb1ze4] {
        display: none;
    }
}

/* Composed Strike restyle (2026-07, Task 11 carryover from T4): the mid-page
   "try a question" card now matches the T4/T6 question-card family -- cut corners,
   hairline borders, ember CTAs, teal/crimson semantic answer states, no rounded
   geometry. clip-path shears box-shadow so lift/glow moves to border+background. */

.landing-try-section[b-24rfmb1ze4] {
    padding: 60px 20px;
    background: var(--glytic-bg-medium, #111827);
    border-top: 1px solid var(--glytic-border);
    border-bottom: 1px solid var(--glytic-border);
}

.landing-try-inner[b-24rfmb1ze4] {
    max-width: 680px;
    margin: 0 auto;
}

.landing-try-heading[b-24rfmb1ze4] {
    font-family: var(--glytic-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: 0.01em;
}

/* Category pills -- squared micro-type, ember active w/ ink text */
.landing-try-categories[b-24rfmb1ze4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}

/* Filter chip/pill recipe: a selectable category filter. */
.landing-try-cat-pill[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--qf-line);
    border-radius: 999px;
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    min-height: 32px;
}

.landing-try-cat-pill:hover:not(:disabled)[b-24rfmb1ze4] {
    border-color: rgba(var(--glytic-primary-rgb), .5);
    color: var(--glytic-text-primary);
}

.landing-try-cat-pill.active[b-24rfmb1ze4] {
    background: rgba(var(--glytic-primary-rgb), .14);
    border-color: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.landing-try-cat-pill:focus-visible[b-24rfmb1ze4] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.landing-try-cat-pill:disabled[b-24rfmb1ze4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Question card */
.landing-try-card[b-24rfmb1ze4] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px 24px;
    min-height: 200px;
}

/* Double-layer reveal: element bg = hairline border color; ::before = card interior
   (z-index:-1 + isolation on the element; children need no lift -- scoped child-lift
   rules cannot reach component-rendered children). */
.landing-try-card[b-24rfmb1ze4]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg, #1a2235);
    z-index: -1;
    pointer-events: none;
}

.landing-try-exam-label[b-24rfmb1ze4] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glytic-primary);
    margin-bottom: 12px;
}

.landing-try-question-text[b-24rfmb1ze4] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--glytic-text-primary);
    margin-bottom: 20px;
    font-weight: 500;
}

/* Answer options */
.landing-try-answers[b-24rfmb1ze4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

/* Answer tile recipe: min-height 56, radius 8, real hairline border, dark surface. */
.landing-try-answer[b-24rfmb1ze4] {
    display: flex;
    /* A native <button> carries a UA justify-content:center; force flex-start so the
       answer text sits hard against the left edge in every state (interactive,
       result, and skeleton). */
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 12px 14px;
    border-radius: var(--qf-btn-radius);
    border: 1px solid var(--qf-line);
    background: rgba(255, 255, 255, 0.03);
    transition: background-color .15s ease, border-color .15s ease;
    min-height: 56px;
}

/* Interactive button variant */
.landing-try-answer-btn[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--glytic-text-primary);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.landing-try-answer-btn:hover:not(:disabled)[b-24rfmb1ze4] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--glytic-primary-rgb), .35);
}

.landing-try-answer-btn.selected[b-24rfmb1ze4] {
    border: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), .08);
}

.landing-try-answer-btn:focus-visible[b-24rfmb1ze4] {
    outline: var(--qf-btn-focus);
    outline-offset: -2px;
}

.landing-try-answer-btn:disabled[b-24rfmb1ze4] {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Hydration gate (prerendered HTML, before the first interactive render): disabled so a tap
   is not silently swallowed, but it must not read as broken. */
.landing-try-answer-btn[aria-busy="true"]:disabled[b-24rfmb1ze4],
.landing-try-cat-pill[aria-busy="true"]:disabled[b-24rfmb1ze4] {
    cursor: progress;
    opacity: 1;
}

/* Result states -- teal (correct) / crimson (wrong) tinted surfaces with a colored border
   (the text badge above carries the correct/incorrect cue; text stays full-contrast primary). */
.landing-try-answer.correct[b-24rfmb1ze4] {
    background: rgba(var(--glytic-score-pass-rgb), 0.12);
    border-color: var(--glytic-score-pass);
}

.landing-try-answer.wrong[b-24rfmb1ze4] {
    background: rgba(var(--qf-crimson-rgb), 0.12);
    border-color: var(--qf-crimson);
}

.landing-try-answer-text[b-24rfmb1ze4] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--glytic-text-primary);
}

/* Check button -- ember cut plate, ink text */
.landing-try-check-row[b-24rfmb1ze4] {
    display: flex;
    justify-content: center;
}

/* Primary recipe. */
.landing-try-check-btn[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 22px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    min-height: var(--qf-btn-h-lg);
}

.landing-try-check-btn:hover:not(:disabled)[b-24rfmb1ze4] {
    background: var(--forge-gradient);
}

.landing-try-check-btn:focus-visible[b-24rfmb1ze4] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

.landing-try-check-btn:disabled[b-24rfmb1ze4] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Explanation */
.landing-try-explanation[b-24rfmb1ze4] {
    margin-bottom: 20px;
}

.landing-try-result-badge[b-24rfmb1ze4] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 0;
    margin-bottom: 8px;
}

.landing-try-result-badge.correct[b-24rfmb1ze4] {
    background: rgba(var(--glytic-score-pass-rgb), 0.15);
    color: var(--glytic-score-pass);
}

.landing-try-result-badge.incorrect[b-24rfmb1ze4] {
    background: rgba(var(--qf-crimson-rgb), 0.15);
    color: var(--qf-crimson-text);
}

.landing-try-explanation-text[b-24rfmb1ze4] {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
    margin: 0;
}

/* Post-answer CTA */
.landing-try-post-answer[b-24rfmb1ze4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
}

/* Primary recipe (another "sign up" CTA -- must match the other ember primaries). */
.landing-try-signup-btn[b-24rfmb1ze4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    clip-path: none;
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 22px;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    min-height: var(--qf-btn-h-lg);
}

.landing-try-signup-btn:hover[b-24rfmb1ze4] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    text-decoration: none;
}

.landing-try-signup-btn:focus-visible[b-24rfmb1ze4] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Quiet recipe: "Try another" dismiss/retry action. */
.landing-try-retry-btn[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-radius: var(--qf-btn-radius);
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 8px 10px;
    cursor: pointer;
    transition: color .15s ease;
}

.landing-try-retry-btn:hover[b-24rfmb1ze4] {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.landing-try-retry-btn:focus-visible[b-24rfmb1ze4] {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Loading state */
.landing-try-loading[b-24rfmb1ze4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--glytic-text-secondary);
    font-size: 0.9rem;
}

.landing-try-spinner[b-24rfmb1ze4] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--glytic-border);
    border-top-color: var(--glytic-primary);
    border-radius: 50%;
    animation: ltq-spin-b-24rfmb1ze4 0.7s linear infinite;
}

@keyframes ltq-spin-b-24rfmb1ze4 {
    to { transform: rotate(360deg); }
}

.landing-try-skeleton[b-24rfmb1ze4] {
    opacity: 0.85;
}

.landing-try-skeleton-q[b-24rfmb1ze4] {
    color: var(--glytic-text-secondary);
}

.landing-try-error[b-24rfmb1ze4] {
    text-align: center;
    padding: 40px 0;
    color: var(--glytic-text-secondary);
    font-size: 0.92rem;
}

/* Mobile */
@media (max-width: 480px) {
    .landing-try-section[b-24rfmb1ze4] {
        padding: 40px 16px;
    }

    .landing-try-card[b-24rfmb1ze4] {
        padding: 20px 16px;
    }

    .landing-try-heading[b-24rfmb1ze4] {
        font-size: 1.3rem;
    }

    .landing-try-question-text[b-24rfmb1ze4] {
        font-size: 0.98rem;
    }
}

/* ---- Skeleton Pulse (loading fallback) ---- */

.landing-try-skeleton-pulse[b-24rfmb1ze4] {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: landing-try-shimmer-b-24rfmb1ze4 1.5s ease-in-out infinite;
}

@keyframes landing-try-shimmer-b-24rfmb1ze4 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-try-spinner[b-24rfmb1ze4],
    .landing-try-skeleton-pulse[b-24rfmb1ze4] {
        animation: none;
    }
}

/* AI Tutor taste is rendered by the shared <TutorTasteCard> component
   (Client/Shared/TutorTasteCard.razor + .razor.css), passed Class="tt-card--lg"
   for the larger mobile "Try a question" sizing. */
/* /Shared/MainLayout.razor.rz.scp.css */
/* 
 * QuizForge Professional Toolbar - Secure & Modern Design
 * No direct quiz navigation - all functionality through homepage cards
 */

/* Main AppBar Container */
.qf-appbar[b-pfzgsvw0zf] {
    /* Composed Strike: quiet dark-iron chrome, single hairline datum, no drama. */
    background: var(--glytic-bg-dark) !important;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--qf-line) !important;
    box-shadow: none !important;
}

.appbar-container[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Left Section - Brand */
.appbar-left[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

[b-pfzgsvw0zf] .brand-home-btn {
    padding: 4px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    max-height: 48px !important;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 32px tall on
       mobile. min-height plus flex centering keeps the visual wordmark size unchanged. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

[b-pfzgsvw0zf] .brand-home-btn:hover {
    background: rgba(var(--glytic-primary-rgb), 0.05) !important;
    /* Composed Strike: background shift only, no translate lift (QA5-3). */
}

/* Center Section - Active Quiz Display */
.appbar-center[b-pfzgsvw0zf] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    max-width: 500px;
}

.active-quiz-display[b-pfzgsvw0zf] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 10px;
    min-width: 260px;
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

.active-quiz-display.search-mode[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border: 2px solid rgba(var(--glytic-primary-rgb), 0.3);
    padding: 12px;
    position: relative;
    z-index: 1001;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(var(--glytic-primary-rgb), 0.2);
}

.active-quiz-display.search-mode .quiz-search-container[b-pfzgsvw0zf] {
    gap: 8px;
    position: relative;
    overflow: visible;
}

.active-quiz-inline[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.active-quiz-label[b-pfzgsvw0zf] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(var(--glytic-primary-rgb), 0.8);
    font-weight: 600;
    margin-bottom: 2px;
}

.active-quiz-label-inline[b-pfzgsvw0zf] {
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--glytic-primary-rgb), .75);
    font-weight: 600;
}

.active-quiz-title[b-pfzgsvw0zf] {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.active-quiz-title-inline[b-pfzgsvw0zf] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .85rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.toggle-progress-btn[b-pfzgsvw0zf] {
    margin-left: 2px;
}

.no-quiz-selected[b-pfzgsvw0zf],
.auth-prompt[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Right Section - User Actions */
.appbar-right[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.desktop-nav-actions[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Admin Button -- TONAL (admin-area nav trigger, toolbar family). Was an ad-hoc amber
   chip with hardcoded hex and no ::deep, so it never actually reached the rendered
   MudIconButton (same class of defect as brand-home-btn, QA 2026-07-15). */
[b-pfzgsvw0zf] .admin-btn {
    background: var(--qf-surface-tonal);
    border: 1px solid var(--qf-line);
    color: var(--glytic-text-primary);
    border-radius: var(--qf-btn-radius);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

[b-pfzgsvw0zf] .admin-btn:hover {
    background: var(--qf-surface-tonal-hover);
    border-color: var(--glytic-border-hover);
    /* Composed Strike: border + background shift only, no translate lift (QA5-3). */
}

/* User Menu trigger -- QUIET (dismiss/text-link family; this is a menu activator, not a
   primary action). Missing ::deep meant this never reached the rendered MudButton root. */
[b-pfzgsvw0zf] .user-menu-btn {
    background: none;
    border: 0;
    color: var(--glytic-text-secondary);
    border-radius: var(--qf-btn-radius);
    padding: 6px 10px;
    font-weight: 600;
    letter-spacing: 0;
    transition: color 0.18s ease;
}

[b-pfzgsvw0zf] .user-menu-btn:hover {
    background: none;
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: none;
    box-shadow: none;
}

/* The MudMenu root itself (Class="user-menu" on the <MudMenu>, not its activator button)
   had no rule at all; it sits inline in the flex toolbar row next to icon buttons and
   needs the same vertical centering they get implicitly. */
[b-pfzgsvw0zf] .user-menu {
    display: inline-flex;
    align-items: center;
}

/* Authentication Buttons - Composed Strike
   Login = quiet secondary text link; Sign up = primary ember CTA with cut geometry.
   Note: clip-path clips box-shadow, so elevation/focus rely on outline (see auth-expand-btn). */
/* Compound selectors (.login-btn.auth-expand-btn / .register-btn.auth-expand-btn.accent) are
   the ones that actually paint these buttons -- both need ::deep since MudButton renders its
   own root and a scoped selector without ::deep never reaches it (same defect class as
   brand-home-btn, QA 2026-07-15; the shared .auth-expand-btn pill rules further down this
   file are legacy and were never reaching the button either). */
[b-pfzgsvw0zf] .login-btn.auth-expand-btn {
    background: none;
    border: 0;
    color: var(--glytic-text-secondary);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-sm);
    padding: 0 12px;
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: color 0.18s ease;
}

[b-pfzgsvw0zf] .login-btn.auth-expand-btn:hover {
    background: none;
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    box-shadow: none;
    transform: none;
}

[b-pfzgsvw0zf] .register-btn.auth-expand-btn.accent {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    min-height: var(--qf-btn-h-sm);
    padding: 0 20px;
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.18s ease;
}

[b-pfzgsvw0zf] .register-btn.auth-expand-btn.accent:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
    box-shadow: none;
    transform: none;
}

/* No longer clip-path'd (PRIMARY recipe drops the cut corner), so the ring can sit outward
   like every other control instead of the old inset -4px clipped-CTA workaround. */
[b-pfzgsvw0zf] .register-btn.auth-expand-btn.accent:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Mobile Menu Button -- ICON BUTTON. Missing ::deep, same defect as the others above. */
[b-pfzgsvw0zf] .mobile-menu-btn {
    background: transparent;
    border: 0;
    color: var(--glytic-text-secondary);
    border-radius: var(--qf-btn-radius);
    width: 40px;
    height: 40px;
    transition: background 0.18s ease, color 0.18s ease;
}

[b-pfzgsvw0zf] .mobile-menu-btn:hover {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    color: var(--glytic-text-secondary);
}

[b-pfzgsvw0zf] .mobile-menu-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

@media (pointer: coarse) {
    [b-pfzgsvw0zf] .mobile-menu-btn {
        width: 44px;
        height: 44px;
    }
}

/* Mobile Drawer Styling */
.mobile-drawer[b-pfzgsvw0zf] {
    background: linear-gradient(180deg, #1A2230 0%, #1E3040 100%) !important;
    border-left: 1px solid rgba(var(--glytic-primary-rgb), 0.1) !important;
}

.mobile-drawer-header[b-pfzgsvw0zf] {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    padding: 16px;
}

.mobile-quiz-selection[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.05);
    border-radius: 8px;
    margin: 16px 0;
}

/* NOTE: mobile drawer nav-link chrome lives in the GLOBAL stylesheet
   (quizforge.css, keyed on .mobile-drawer). MudDrawer Variant="Temporary" teleports
   its aside outside this component's scoped root with no b-scope attribute, so scoped
   ::deep rules cannot reach the drawer's MudNavLink items. */

/* Search Backdrop */
.search-backdrop[b-pfzgsvw0zf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    backdrop-filter: blur(2px);
}

/* Quiz Search Styles */
.quiz-search-container[b-pfzgsvw0zf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quiz-search-container.mobile-friendly[b-pfzgsvw0zf] {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
}

.quiz-search-input[b-pfzgsvw0zf] {
    width: 100%;
}

.quiz-search-input.mobile-input[b-pfzgsvw0zf] {
    min-width: 0;
    flex-shrink: 1;
}

.quiz-search-list[b-pfzgsvw0zf] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(10, 16, 22, 0.95);
    padding: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
} 

.quiz-search-list.mobile-list[b-pfzgsvw0zf] {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    max-height: 50vh;
    margin-top: 8px;
    z-index: 9999;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.quiz-search-item[b-pfzgsvw0zf] {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .15s;
    background: transparent;
    color: #e0e0e0;
    margin: 2px 0;
} 
.quiz-search-item:hover[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.15);
    color: #fff;
} 
.quiz-search-item.active[b-pfzgsvw0zf] {
    background: linear-gradient(90deg, var(--glytic-primary), #3A7AD8);
    color: #0a1118;
    font-weight: 600;
}

.quiz-search-empty[b-pfzgsvw0zf] {
    padding: 12px 8px;
    font-size: .7rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.active-quiz-title-inline[b-pfzgsvw0zf] {
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-quiz-title-inline:hover[b-pfzgsvw0zf] {
    text-decoration: underline;
}

.active-practice-buttons[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.change-test-btn[b-pfzgsvw0zf] {
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.change-test-btn:hover[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: rgba(var(--glytic-primary-rgb), 0.5);
}

/* Unified toolbar auth buttons styled like quiz card expand button */
.auth-expand-btn[b-pfzgsvw0zf] {
    position: relative !important;
    background: transparent !important;
    border: 1px solid rgba(var(--glytic-primary-rgb),0.18) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: 22px !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.8rem !important;
    font-weight:600 !important;
    letter-spacing:.5px;
    text-transform:none !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center;
    gap:.45rem;
    backdrop-filter:blur(8px);
    transition:background .25s ease, box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .25s ease, color .25s ease;
}
.auth-expand-btn:hover[b-pfzgsvw0zf] { background: rgba(var(--glytic-primary-rgb),0.10) !important; color: var(--glytic-primary) !important; border-color: rgba(var(--glytic-primary-rgb),0.4) !important; box-shadow:0 4px 18px -4px rgba(var(--glytic-primary-rgb),0.35); }
.auth-expand-btn:active[b-pfzgsvw0zf] { transform: translateY(1px); }
.auth-expand-btn:focus-visible[b-pfzgsvw0zf] { outline:2px solid var(--glytic-primary); outline-offset:2px; }
.auth-expand-btn.accent[b-pfzgsvw0zf] { background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb),0.18), rgba(74,144,232,0.18)) !important; border-color: rgba(var(--glytic-primary-rgb),0.45) !important; }
.auth-expand-btn.accent:hover[b-pfzgsvw0zf] { background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb),0.28), rgba(74,144,232,0.28)) !important; box-shadow:0 6px 22px -6px rgba(var(--glytic-primary-rgb),0.45); }
@media (max-width:600px){ .auth-expand-btn[b-pfzgsvw0zf] { padding:.45rem .85rem !important; font-size:.72rem !important; } }

/* Progress Bar Styles */
.progress-line[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.plabel[b-pfzgsvw0zf] {
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 45px;
    color: #e0e6ed;
}

.pbar[b-pfzgsvw0zf] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.pbar span[b-pfzgsvw0zf] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--qf-crimson) 0%, var(--forge-primary) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

.pbar span[b-pfzgsvw0zf]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: progress-shimmer-b-pfzgsvw0zf 2s ease-in-out infinite;
}

@keyframes progress-shimmer-b-pfzgsvw0zf {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.pval[b-pfzgsvw0zf] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--glytic-primary);
    min-width: 40px;
    text-align: right;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .progress-line[b-pfzgsvw0zf] {
        gap: 8px;
    }

    .plabel[b-pfzgsvw0zf] {
        min-width: 35px;
        font-size: 0.8rem;
    }

    .pval[b-pfzgsvw0zf] {
        min-width: 35px;
        font-size: 0.75rem;
    }

    .active-quiz-display[b-pfzgsvw0zf] {
        max-width: calc(100vw - 40px);
    }
    .active-quiz-display.search-mode[b-pfzgsvw0zf] {
        padding: 8px;
        z-index: 1001;
        margin: 0 10px;
    }
    .active-quiz-inline[b-pfzgsvw0zf] {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: space-between;
    }
    .active-practice-btn[b-pfzgsvw0zf] {
        margin: 2px;
    }
    .quiz-search-list.mobile-list[b-pfzgsvw0zf] {
        left: 5px;
        right: 5px;
        max-height: 40vh;
        z-index: 9999;
    }
    .appbar-center[b-pfzgsvw0zf] {
        display: none !important;
    }
    .active-quiz-title-inline[b-pfzgsvw0zf] {
        max-width: 150px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .active-quiz-label-inline[b-pfzgsvw0zf] {
        font-size: 0.7rem;
    }
    .active-quiz-title-inline[b-pfzgsvw0zf] {
        max-width: 120px;
        font-size: 0.8rem;
    }
    .quiz-search-list.mobile-list[b-pfzgsvw0zf] {
        left: 2px;
        right: 2px;
    }
    .active-practice-buttons[b-pfzgsvw0zf] {
        gap: 2px;
    }
    .active-quiz-inline[b-pfzgsvw0zf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .active-quiz-label-inline[b-pfzgsvw0zf] {
        display: none;
    }
    .active-quiz-title-inline[b-pfzgsvw0zf] {
        max-width: 100px;
    }
}


/* Accessibility and interaction improvements. These are MudButton/MudIconButton children,
   so ::deep is required -- without it this whole block never matched (same defect as
   brand-home-btn below, QA 2026-07-15). brand-home-btn keeps its own more specific inset
   rule further down for its clip-path bevel; this generic outward ring covers the rest. */
[b-pfzgsvw0zf] .login-btn:focus-visible,
[b-pfzgsvw0zf] .user-menu-btn:focus-visible,
[b-pfzgsvw0zf] .admin-btn:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* The brand tile is a MudButton (child component), so a scoped selector must use ::deep to reach
   its rendered element -- the shared .brand-home-btn:focus-visible rule above lacks ::deep and so
   never matched, leaving the tile with no keyboard focus ring at all (QA 2026-07-15). It also
   carries a clip-path bevel with overflow:hidden, which would shear an outward ring, so the ring is
   inset (mirrors the .register-btn.accent clipped-CTA precedent below). */
[b-pfzgsvw0zf] .brand-home-btn:focus-visible {
    outline: 2px solid var(--glytic-primary) !important;
    outline-offset: -3px !important;
}

/* PRIMARY recipe drops the clip-path cut corner, so the ring is a plain outward ring now
   (matches the ::deep rule declared with the button's role block above; duplicated selector
   kept here so this reads next to its old clipped-CTA context). */
[b-pfzgsvw0zf] .register-btn.auth-expand-btn.accent:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}


/* Active Quiz Actions */
.active-quiz-actions[b-pfzgsvw0zf] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: center;
}

.active-practice-btn[b-pfzgsvw0zf] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
}

.active-practice-btn:hover[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.12) !important;
    border-color: rgba(var(--glytic-primary-rgb), 0.4) !important;
}

.active-quiz-progress-mini[b-pfzgsvw0zf] {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.55rem;
}

.active-quiz-progress-mini .mini-row[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-label[b-pfzgsvw0zf] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

.mini-bar[b-pfzgsvw0zf] {
    position: relative;
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.mini-bar span[b-pfzgsvw0zf] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--qf-crimson), var(--forge-primary));
}

.reset-progress-btn[b-pfzgsvw0zf] {
    background: rgba(255, 0, 0, 0.08) !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    margin-top: 4px;
}

/* New styles for single-line active practice box and expandable popover */
.active-quiz-display[b-pfzgsvw0zf]:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 2px 8px -2px rgba(var(--glytic-primary-rgb), .25);
}

.active-progress-popover[b-pfzgsvw0zf] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 320px;
    background: #121b25;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--glytic-primary-rgb), 0.12);
    z-index: 1600;
    animation: popoverIn-b-pfzgsvw0zf .25s ease;
    max-height: 420px;
    overflow-y: auto;
}

.popover-section.popover-select[b-pfzgsvw0zf] {
    margin-bottom: 4px;
}

.active-progress-popover[b-pfzgsvw0zf]::-webkit-scrollbar {
    width: 6px;
}

.active-progress-popover[b-pfzgsvw0zf]::-webkit-scrollbar-track {
    background: transparent;
}

.active-progress-popover[b-pfzgsvw0zf]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 3px;
}

.active-progress-popover[b-pfzgsvw0zf]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .3);
}

@keyframes popoverIn-b-pfzgsvw0zf {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-line[b-pfzgsvw0zf] {
    display: grid;
    grid-template-columns: 44px 1fr 56px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .65rem;
}

.progress-line:last-child[b-pfzgsvw0zf] {
    margin-bottom: 4px;
}

.progress-line .plabel[b-pfzgsvw0zf] {
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.progress-line .pbar[b-pfzgsvw0zf] {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, .12);
    border-radius: 3px;
    overflow: hidden;
}

.progress-line .pbar span[b-pfzgsvw0zf] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--qf-crimson), var(--forge-primary));
    box-shadow: 0 0 6px rgba(var(--qf-crimson-rgb), .6);
}

.progress-line .pval[b-pfzgsvw0zf] {
    justify-self: end;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
}

.popover-actions[b-pfzgsvw0zf] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.progress-empty[b-pfzgsvw0zf] {
    font-size: .7rem;
    color: rgba(255, 255, 255, .55);
}

/* Active Quiz Current Style */
.active-quiz-current[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(var(--glytic-primary-rgb), 0.08);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    border-radius: 8px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    transition: .2s;
}

.active-quiz-current:hover[b-pfzgsvw0zf] {
    background: rgba(var(--glytic-primary-rgb), 0.15);
}

.active-quiz-current .edit-icon[b-pfzgsvw0zf] {
    opacity: .6;
}

/* PRO badge for premium users -- it Hrefs to /dashboard, so it is a clickable mini-PRIMARY
   CTA, not a static status label. Drops the clip-path cut corner per the shared button recipe. */
[b-pfzgsvw0zf] .pro-badge {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    border-radius: var(--qf-btn-radius);
    padding: 3px 10px;
    min-width: 0;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: none;
}

[b-pfzgsvw0zf] .pro-badge:hover {
    background: var(--forge-gradient);
    box-shadow: none;
}

[b-pfzgsvw0zf] .pro-badge:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

/* Pricing nav button */
.pricing-nav-btn[b-pfzgsvw0zf] {
    color: var(--glytic-primary);
    font-weight: 600;
    text-transform: none;
    font-size: 0.85rem;
}

/* ===== Appbar Nav Links ===== */
.appbar-nav-links[b-pfzgsvw0zf] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

[b-pfzgsvw0zf] .nav-link-btn {
    /* Button system nav recipe: sentence case, Inter 600 14px, muted -> text on hover with a
       teal 2px datum (was uppercase/tracked, replaced 2026-09-23). */
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 6px;
    border-radius: 0;
    position: relative;
    transition: color 0.18s ease;
}

[b-pfzgsvw0zf] .nav-link-btn:hover {
    color: var(--glytic-text-primary);
    background: transparent;
}

/* teal underline datum: grows in on hover (offset below the label) */
[b-pfzgsvw0zf] .nav-link-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 6px;
    height: 2px;
    background: var(--glytic-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.18s ease;
}

[b-pfzgsvw0zf] .nav-link-btn:hover::after {
    transform: scaleX(1);
}

[b-pfzgsvw0zf] .nav-link-active {
    color: var(--glytic-text-primary);
}

/* Current-page indicator is brand ember, not the teal hover datum every other item uses
   (this is chrome identity, not a content-area selection state). */
[b-pfzgsvw0zf] .nav-link-active::after {
    transform: scaleX(1);
    background: var(--forge-primary);
}

@media (prefers-reduced-motion: reduce) {
    [b-pfzgsvw0zf] .nav-link-btn::after {
        transition: none;
    }
}

/* ===== Forge Nav Link (Pricing / Upgrade) - quiet ember accent ===== */
/* Composed Strike keeps the chrome calm: the upgrade link reads as a solid
   ember datum (distinct from the muted links) with the same teal hover underline. */
[b-pfzgsvw0zf] .nav-link-forge {
    color: var(--forge-spark);
    font-weight: 600;
    position: relative;
}

[b-pfzgsvw0zf] .nav-link-forge:hover {
    color: var(--forge-spark);
    background: transparent;
}

/* Forge upgrade link in mobile drawer - quiet ember to match desktop. NOTE: MudDrawer
   Variant="Temporary" teleports its <aside> outside this component's scoped root (see the
   drawer-close-btn note below), so this ::deep rule likely cannot reach the rendered
   MudNavLink -- the mobile drawer's actual chrome comes from the GLOBAL stylesheet
   (quizforge.css, keyed on .mobile-drawer). Token updated for consistency; verify on Test. */
[b-pfzgsvw0zf] .nav-drawer-forge {
    color: var(--forge-spark);
    font-weight: 600;
}

[b-pfzgsvw0zf] .nav-drawer-forge .mud-nav-link-icon {
    color: var(--forge-spark);
}

/* The forge link keeps its ember label; the active state is the underline, so "you are here"
   is legible on /pricing without changing the accent that marks it as the upgrade path. */
[b-pfzgsvw0zf] .nav-link-forge.nav-link-active::after {
    transform: scaleX(1);
    background: var(--forge-spark);
}

/* Hide nav links and desktop actions on mobile (drawer handles it) */
@media (max-width: 959px) {
    .appbar-nav-links[b-pfzgsvw0zf] {
        display: none;
        pointer-events: none;
    }

    .desktop-nav-actions[b-pfzgsvw0zf] {
        display: none;
        pointer-events: none;
    }
}

/* ===== Auth Skeleton (anti-flash placeholder) =====
   Rendered in the AuthorizeView <Authorizing> window so authenticated users do
   NOT briefly see the anonymous Login/Sign Up CTAs before auth resolves. The
   placeholders are neutral (no login/signup, no authed items) and reserve a
   width/height close to the resolved nav so the bar does not layout-shift. */
.nav-auth-skeleton-group[b-pfzgsvw0zf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-auth-skeleton[b-pfzgsvw0zf] {
    display: inline-block;
    background: rgba(var(--glytic-primary-rgb), 0.10);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.14);
    border-radius: 22px;
    animation: nav-auth-pulse-b-pfzgsvw0zf 1.4s ease-in-out infinite;
    will-change: opacity;
}

/* Stand-in for a single nav text link (Dashboard / Upgrade) */
.nav-auth-skeleton--link[b-pfzgsvw0zf] {
    width: 84px;
    height: 28px;
    border-radius: 6px;
    vertical-align: middle;
}

/* Stand-in for the PRO badge / a small action button */
.nav-auth-skeleton--pill[b-pfzgsvw0zf] {
    width: 64px;
    height: 32px;
}

/* Stand-in for the user account-menu chip */
.nav-auth-skeleton--avatar[b-pfzgsvw0zf] {
    width: 96px;
    height: 36px;
}

@keyframes nav-auth-pulse-b-pfzgsvw0zf {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-auth-skeleton[b-pfzgsvw0zf] {
        animation: none;
        opacity: 0.6;
    }
}

/* Narrow phones: keep the right-section skeleton compact so it never wraps the
   appbar. Matches the 600px auth-button breakpoint already used above. */
@media (max-width: 600px) {
    .nav-auth-skeleton--pill[b-pfzgsvw0zf] {
        width: 52px;
        height: 30px;
    }
    .nav-auth-skeleton--avatar[b-pfzgsvw0zf] {
        width: 80px;
        height: 32px;
    }
}

/* ===== Main Content ===== */
.main-content[b-pfzgsvw0zf] {
    padding-top: 0 !important;
}

/* ===== Global Footer ===== */
/* ===== FOOTER ===== */
.qf-footer[b-pfzgsvw0zf] {
    position: relative;
    border-top: 1px solid var(--qf-line);
    padding: 2.5rem 2rem 1.5rem;
    margin-top: 3rem;
    background: var(--glytic-bg-medium);
}

/* Composed Strike: one small skewed crimson notch on the top hairline. */
.qf-footer[b-pfzgsvw0zf]::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 120px;
    height: 3px;
    background: var(--qf-crimson);
    transform: skewX(-30deg);
    transform-origin: left top;
}

.footer-inner[b-pfzgsvw0zf] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 0.7fr;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

/* Col 1: Brand */
.footer-logo-text[b-pfzgsvw0zf] {
    display: inline-flex;
    align-items: center;
    font-family: var(--glytic-font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glytic-text-primary);
    margin-bottom: 0.75rem;
}

/* Forged damascus Q emblem standing in for the Q in the footer lockup */
.footer-brand-mark[b-pfzgsvw0zf] {
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.14em;
    transform: translateY(0.04em);
    flex-shrink: 0;
    display: block;
}

.footer-tagline[b-pfzgsvw0zf] {
    font-size: 0.85rem;
    color: var(--glytic-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}

/* Col 2 + 3: headings */
.footer-col-heading[b-pfzgsvw0zf] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--glytic-text-secondary);
    margin-bottom: 1rem;
}

/* Col 2: Links */
.footer-links-col[b-pfzgsvw0zf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-links-col a[b-pfzgsvw0zf] {
    color: var(--glytic-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    padding: 0.3rem 0;
    transition: color 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.footer-links-col a:hover[b-pfzgsvw0zf] {
    color: var(--glytic-text-primary);
}

/* Cookie settings: a button that has to read as one of the links beside it. Every declaration
   below either matches .footer-links-col a or neutralises a UA button default (background,
   border, cursor, text-align, font-family, width). */
.footer-link-button[b-pfzgsvw0zf] {
    color: var(--glytic-text-muted);
    background: none;
    border: 0;
    padding: 0.3rem 0;
    margin: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
}

.footer-link-button:hover[b-pfzgsvw0zf] {
    color: var(--glytic-text-primary);
}

/* Col 3: Language selector */
.footer-lang-col[b-pfzgsvw0zf] {
    display: flex;
    flex-direction: column;
}

/* Bottom row */
.footer-bottom[b-pfzgsvw0zf] {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid var(--glytic-border);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.footer-copyright[b-pfzgsvw0zf] {
    font-family: var(--glytic-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    letter-spacing: 0.06em;
}

.footer-legal[b-pfzgsvw0zf] {
    font-size: 0.65rem;
    color: var(--glytic-text-muted);
    margin: 0;
    max-width: 600px;
    line-height: 1.5;
}

@media (min-width: 641px) and (max-width: 1000px) {
    .footer-inner[b-pfzgsvw0zf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: stack to single column */
@media (max-width: 640px) {
    .footer-inner[b-pfzgsvw0zf] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-tagline[b-pfzgsvw0zf] {
        max-width: 100%;
    }
}
/* /Shared/MetricCard.razor.rz.scp.css */
.metric-card[b-8q1zgqsnsy] {
    border-left: 4px solid;
    transition: border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}

.metric-card:focus-visible[b-8q1zgqsnsy] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.metric-card[b-8q1zgqsnsy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-card:hover[b-8q1zgqsnsy]::before {
    opacity: 1;
}

.metric-card:hover[b-8q1zgqsnsy] {
    border-left-color: var(--glytic-border-hover);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Color variations */
.metric-card[b-8q1zgqsnsy] {
    border-left-color: var(--mud-palette-primary);
}
/* /Shared/QuestionRating.razor.rz.scp.css */
/* ========================================
   MINIMAL INLINE RATING DESIGN
   ======================================== */

/* Rating section - clean and minimal */
.rating-section[b-r5ln2jwwt3] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Inline rating container - no box styling */
.rating-inline[b-r5ln2jwwt3] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Single line rating layout */
.rating-line[b-r5ln2jwwt3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', sans-serif;
}

/* Inline stars - smaller and subdued */
.rating-stars-inline[b-r5ln2jwwt3] {
    display: flex;
    align-items: center;
}

/* Composed Strike: stars in the source-verified gold family, not Mud warning yellow. */
[b-r5ln2jwwt3] .rating-stars-inline .mud-rating-item .mud-icon-root {
    color: var(--qf-gold);
}

/* Star buttons carry no clip-path here, but keep the focus ring inset + on-brand. */
[b-r5ln2jwwt3] .rating-stars-inline .mud-rating-item:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

/* Average rating display */
.rating-avg[b-r5ln2jwwt3] {
    font-weight: 600;
    color: var(--qf-gold);
    font-size: 0.75rem;
}

/* Rating count in parentheses */
.rating-count[b-r5ln2jwwt3] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

/* Comment section */
.rating-comment-section[b-r5ln2jwwt3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

/* Comment icon - subdued */
[b-r5ln2jwwt3] .comment-icon-inline {
    padding: 4px !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    transition: background-color .15s ease;
}

[b-r5ln2jwwt3] .comment-icon-inline:hover {
    background: rgba(var(--glytic-primary-rgb), .1);
}

/* Comment count - minimal (native <button> now; reset the default chrome) */
.comment-count-inline[b-r5ln2jwwt3] {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.comment-count-inline.has-comments[b-r5ln2jwwt3] {
    color: var(--glytic-primary);
}

.comment-count-inline.has-comments:hover[b-r5ln2jwwt3] {
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.comment-count-inline:focus-visible[b-r5ln2jwwt3] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

/* Comment icon button: on-brand inset focus ring. */
[b-r5ln2jwwt3] .comment-icon-inline:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

/* ========================================
   QUIZ-SPECIFIC POSITIONING
   ======================================== */

/* Center rating under Next Question button for Quiz */
.quiz-rating-centered[b-r5ln2jwwt3] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.quiz-rating-centered .rating-section[b-r5ln2jwwt3] {
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .rating-line[b-r5ln2jwwt3] {
        gap: 0.4rem;
        font-size: 0.75rem;
    }

    .rating-avg[b-r5ln2jwwt3] {
        font-size: 0.7rem;
    }

    .rating-count[b-r5ln2jwwt3] {
        font-size: 0.65rem;
    }

    [b-r5ln2jwwt3] .comment-icon-inline {
        padding: 2px !important;
        min-width: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .comment-count-inline[b-r5ln2jwwt3] {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .rating-line[b-r5ln2jwwt3] {
        gap: 0.3rem;
    }

    .rating-comment-section[b-r5ln2jwwt3] {
        margin-left: 0.3rem;
    }
}
/* /Shared/QuizSelectionGuard.razor.rz.scp.css */
/* QuizSelectionGuard page-specific styles */
.quiz-selection-alert[b-r2pfidr60n] {
    background: linear-gradient(90deg, #ffb74d 0%, #ffecb3 100%) !important;
    color: #23243a !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px 0 rgba(255,183,77,0.12);
    font-weight: 600;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    justify-content: flex-start;
}
.quiz-selection-guide-card[b-r2pfidr60n] {
    background: rgba(26, 34, 48, 0.96) !important;
    border-radius: 18px !important;
    border: 2px solid var(--glytic-primary) !important;
    box-shadow: 0 8px 32px rgba(var(--glytic-primary-rgb), 0.12), 0 4px 16px rgba(0, 0, 0, 0.18);
    color: #f0f0f0 !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem 2rem 1.5rem 2rem;
    transition: all 0.3s ease;
}
.gradient-text[b-r2pfidr60n] {
    background: var(--glytic-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--glytic-font-heading) !important;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--glytic-primary-rgb), 0.3);
}
.feature-highlight[b-r2pfidr60n] {
    text-align: center;
    padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(var(--glytic-primary-rgb), 0.04);
    box-shadow: 0 2px 8px rgba(var(--glytic-primary-rgb), 0.08);
    margin-bottom: 1rem;
}
.feature-title[b-r2pfidr60n] {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    color: var(--glytic-primary) !important;
}
.feature-desc[b-r2pfidr60n] {
    color: #e0e0e0 !important;
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}
/* Primary CTA. Class="quiz-guide-button" is set on a child <MudButton>, so the rule needs
   ::deep to reach its root -- previously missing, so this never applied and the button
   rendered on the plain global Filled-Primary recipe. */
[b-r2pfidr60n] .quiz-guide-button {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease;
}
[b-r2pfidr60n] .quiz-guide-button:hover {
    background: var(--forge-gradient);
}
[b-r2pfidr60n] .quiz-guide-button:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}
@media (max-width: 768px) {
    .quiz-selection-guide-card[b-r2pfidr60n] {
        padding: 16px;
        margin: 16px;
    }
    .feature-highlight[b-r2pfidr60n] {
        padding: 12px;
        margin-bottom: 12px;
    }
}

.quiz-guard-explainer[b-r2pfidr60n] {
    margin-bottom: 1.25rem;
    text-align: center;
}
/* /Shared/RateExamDialog.razor.rz.scp.css */
/* rate-dialog-submit / rate-dialog-cancel are Class= values on child <MudButton>s, so ::deep is
   required to reach their root. NOTE: Client/wwwroot/css/mudblazor-overrides.css (out of scope,
   owned by the lead) already has global, unscoped rules for both classes -- `.rate-dialog-submit
   { border-radius: 8px; }` (compatible with --qf-btn-radius, no conflict) and `.rate-dialog-cancel
   { color: rgba(201, 209, 217, 0.5) !important; }` (its !important wins over the color set here
   until that legacy rule is retired or scoped down -- flagged in the task report). */
[b-vi8q95g9ls] .rate-dialog-submit {
    background: var(--forge-gradient-btn);
    border: 1px solid var(--forge-primary);
    color: var(--qf-ink);
    border-radius: var(--qf-btn-radius);
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease;
}

[b-vi8q95g9ls] .rate-dialog-submit:hover {
    background: var(--forge-gradient);
}

[b-vi8q95g9ls] .rate-dialog-submit:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}

[b-vi8q95g9ls] .rate-dialog-cancel {
    color: var(--glytic-text-secondary);
    transition: color .15s ease;
}

[b-vi8q95g9ls] .rate-dialog-cancel:hover {
    color: var(--glytic-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

[b-vi8q95g9ls] .rate-dialog-cancel:focus-visible {
    outline: var(--qf-btn-focus);
    outline-offset: 3px;
}
/* /Shared/TestListComponent.razor.rz.scp.css */
/* TestListComponent.razor.css - Responsive styles for test list */

.test-list-component[b-ybyp2aqg7d] {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header: title + actions */
.test-list-header[b-ybyp2aqg7d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.test-list-title[b-ybyp2aqg7d] {
    white-space: nowrap;
}

.test-list-actions[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Summary Cards */
.summary-cards-row[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.summary-card[b-ybyp2aqg7d],
.summary-card-official[b-ybyp2aqg7d],
.summary-card-verified[b-ybyp2aqg7d],
.summary-card-private[b-ybyp2aqg7d] {
    color: white !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    flex: 1;
    min-width: 110px;
    transition: filter 0.15s ease;
}

.summary-card:hover[b-ybyp2aqg7d],
.summary-card-official:hover[b-ybyp2aqg7d],
.summary-card-verified:hover[b-ybyp2aqg7d],
.summary-card-private:hover[b-ybyp2aqg7d] {
    filter: brightness(1.12);
}

.summary-card:focus-visible[b-ybyp2aqg7d],
.summary-card-official:focus-visible[b-ybyp2aqg7d],
.summary-card-verified:focus-visible[b-ybyp2aqg7d],
.summary-card-private:focus-visible[b-ybyp2aqg7d] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

.summary-card[b-ybyp2aqg7d] {
    background: linear-gradient(135deg, #607D8B 0%, #455A64 100%) !important;
}

.summary-card-official[b-ybyp2aqg7d] {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
}

.summary-card-verified[b-ybyp2aqg7d] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
}

.summary-card-private[b-ybyp2aqg7d] {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
}

/* Search/Filter row */
.search-filter-row[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

[b-ybyp2aqg7d] .test-search-field {
    min-width: 200px;
    flex: 1;
}

[b-ybyp2aqg7d] .test-filter-select {
    min-width: 140px;
}

/* Main Content Card */
.main-content-card[b-ybyp2aqg7d] {
    background: var(--mud-palette-surface) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

/* Desktop table visible, mobile cards hidden by default */
.test-table-desktop[b-ybyp2aqg7d] {
    display: block;
}

.test-cards-mobile[b-ybyp2aqg7d] {
    display: none;
}

/* Test Management Table */
.test-management-table[b-ybyp2aqg7d] {
    margin-top: 1rem;
}

/* Mobile card pager (shown only inside .test-cards-mobile) */
.test-cards-mobile-pager[b-ybyp2aqg7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.25rem;
}

.test-cards-mobile-pager .mobile-pager-label[b-ybyp2aqg7d] {
    white-space: nowrap;
}

/* Mobile card styles */
.test-mobile-card[b-ybyp2aqg7d] {
    background: rgba(26, 34, 48, 0.92) !important;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.15) !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
    transition: border-color 0.2s ease;
}

.test-mobile-card:active[b-ybyp2aqg7d] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4) !important;
}

.test-mobile-card-header[b-ybyp2aqg7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.test-mobile-card-chips[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

[b-ybyp2aqg7d] .test-mobile-card-chips .mud-chip {
    height: 22px !important;
    font-size: 0.65rem !important;
}

.test-mobile-card-stats[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    color: rgba(224, 224, 224, 0.7);
    font-size: 0.75rem;
}

.test-mobile-stat[b-ybyp2aqg7d] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

[b-ybyp2aqg7d] .test-mobile-stat .mud-icon-root {
    font-size: 0.875rem !important;
}

/* Scoped table styles */
.test-list-component[b-ybyp2aqg7d]  .mud-table-cell {
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.test-list-component[b-ybyp2aqg7d]  .mud-table-row:hover {
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

/* Responsive: 768px and below */
@media (max-width: 768px) {
    .test-list-component[b-ybyp2aqg7d] {
        padding: 0.25rem;
    }

    .test-list-header[b-ybyp2aqg7d] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .test-list-title[b-ybyp2aqg7d] {
        font-size: 1.25rem !important;
    }

    [b-ybyp2aqg7d] .test-list-title .mud-typography {
        font-size: 1.25rem !important;
    }

    .test-list-actions[b-ybyp2aqg7d] {
        justify-content: stretch;
    }

    .test-list-actions > *[b-ybyp2aqg7d] {
        flex: 1;
    }

    [b-ybyp2aqg7d] .cleanup-btn {
        display: none;
    }

    .summary-cards-row[b-ybyp2aqg7d] {
        gap: 0.5rem;
    }

    .summary-card[b-ybyp2aqg7d],
    .summary-card-official[b-ybyp2aqg7d],
    .summary-card-verified[b-ybyp2aqg7d],
    .summary-card-private[b-ybyp2aqg7d] {
        padding: 0.5rem 0.75rem !important;
        min-width: 0;
    }

    [b-ybyp2aqg7d] .summary-card .mud-typography-body2,
    [b-ybyp2aqg7d] .summary-card-official .mud-typography-body2,
    [b-ybyp2aqg7d] .summary-card-verified .mud-typography-body2,
    [b-ybyp2aqg7d] .summary-card-private .mud-typography-body2 {
        font-size: 0.7rem !important;
    }

    [b-ybyp2aqg7d] .summary-card .mud-typography-h6,
    [b-ybyp2aqg7d] .summary-card-official .mud-typography-h6,
    [b-ybyp2aqg7d] .summary-card-verified .mud-typography-h6,
    [b-ybyp2aqg7d] .summary-card-private .mud-typography-h6 {
        font-size: 1rem !important;
    }

    .main-content-card[b-ybyp2aqg7d] {
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }

    .search-filter-row[b-ybyp2aqg7d] {
        gap: 0.5rem;
    }

    [b-ybyp2aqg7d] .test-search-field {
        min-width: 0;
        flex-basis: 100%;
    }

    [b-ybyp2aqg7d] .test-filter-select {
        min-width: 0;
        flex: 1;
    }

    [b-ybyp2aqg7d] .reset-btn {
        flex: 0;
    }

    /* Hide desktop table, show mobile cards */
    .test-table-desktop[b-ybyp2aqg7d] {
        display: none;
    }

    .test-cards-mobile[b-ybyp2aqg7d] {
        display: block;
        margin-top: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .summary-cards-row[b-ybyp2aqg7d] {
        flex-direction: row;
    }

    [b-ybyp2aqg7d] .summary-card .mud-icon-root,
    [b-ybyp2aqg7d] .summary-card-official .mud-icon-root,
    [b-ybyp2aqg7d] .summary-card-verified .mud-icon-root,
    [b-ybyp2aqg7d] .summary-card-private .mud-icon-root {
        font-size: 1rem !important;
    }
}

/* Filter Builder Panel */
.filter-builder-panel[b-ybyp2aqg7d] {
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    padding: 1rem;
}

.filter-builder-rules[b-ybyp2aqg7d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.filter-rule-row[b-ybyp2aqg7d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-ybyp2aqg7d] .filter-rule-field {
    min-width: 140px;
    flex: 1;
}

[b-ybyp2aqg7d] .filter-rule-op {
    min-width: 100px;
}

[b-ybyp2aqg7d] .filter-rule-value {
    min-width: 160px;
}

.filter-builder-actions[b-ybyp2aqg7d] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

[b-ybyp2aqg7d] .filter-toggle-btn {
    white-space: nowrap;
}

/* Select All Banner */
.select-all-banner[b-ybyp2aqg7d] {
    background: var(--glytic-bg-card);
    border: 1px solid var(--glytic-border);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    text-align: center;
}

/* Floating Bulk Action Bar */
.bulk-action-bar[b-ybyp2aqg7d] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem;
    background: var(--glytic-bg-card);
    border-top: 1px solid var(--glytic-border);
    transition: transform 0.25s ease-out;
    transform: translateY(0);
}

.bulk-action-count[b-ybyp2aqg7d] {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .bulk-action-bar[b-ybyp2aqg7d] {
        padding: 0.5rem 0.75rem;
        gap: 0.2rem;
    }
}
/* /Shared/TutorSheetDialog.razor.rz.scp.css */
/* ---- Tutor study sheet: question pane beside the lesson ----
   Desktop: two panes, each with its own scroll, capped to the viewport.
   Phones (< 800px): one column inside a full-height sheet; the dialog itself scrolls. */

.tts[b-dmk2wy7tak] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-height: 84vh;
    position: relative;
    color: var(--glytic-text-secondary);
}

.tts-handle[b-dmk2wy7tak] {
    display: none;
}

.tts-close[b-dmk2wy7tak] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--qf-btn-radius);
    background: transparent;
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.tts-close:hover[b-dmk2wy7tak] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.tts-close:focus-visible[b-dmk2wy7tak] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

/* ---- Question pane ---- */
.tts-q[b-dmk2wy7tak] {
    padding: 28px 28px 24px;
    border-right: 1px solid rgba(var(--glytic-primary-rgb), 0.16);
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 10px;
}

.tts-eyebrow[b-dmk2wy7tak] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--glytic-primary);
}

.tts-exam[b-dmk2wy7tak] {
    font-size: 0.74rem;
    color: var(--glytic-text-muted, var(--glytic-text-secondary));
    margin-top: -4px;
}

.tts-qtext[b-dmk2wy7tak] {
    margin: 2px 0 6px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--glytic-text-primary);
    text-wrap: pretty;
}

.tts-options[b-dmk2wy7tak] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.tts-opt[b-dmk2wy7tak] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--glytic-text-secondary);
    opacity: 0.72;
}

.tts-glyph[b-dmk2wy7tak] {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

.tts-opt-text[b-dmk2wy7tak] {
    flex: 1 1 auto;
    min-width: 0;
}

.tts-tag[b-dmk2wy7tak] {
    flex: none;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid currentColor;
    margin-top: 2px;
}

.tts-opt.is-correct[b-dmk2wy7tak] {
    opacity: 1;
    color: var(--glytic-text-primary);
    border-color: rgba(var(--glytic-score-pass-rgb, 52, 211, 153), 0.55);
    background: rgba(var(--glytic-score-pass-rgb, 52, 211, 153), 0.08);
}

.tts-opt.is-correct .tts-glyph[b-dmk2wy7tak] {
    background: var(--glytic-score-pass, #34d399);
    border-color: var(--glytic-score-pass, #34d399);
}

.tts-opt.is-correct .tts-tag[b-dmk2wy7tak] {
    color: var(--glytic-score-pass, #34d399);
}

.tts-opt.is-wrong[b-dmk2wy7tak] {
    opacity: 1;
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.07);
}

.tts-opt.is-wrong .tts-glyph[b-dmk2wy7tak] {
    background: var(--glytic-score-fail, #f87171);
    border-color: var(--glytic-score-fail, #f87171);
}

.tts-opt.is-wrong .tts-tag[b-dmk2wy7tak] {
    color: var(--glytic-score-fail, #f87171);
}

.tts-why[b-dmk2wy7tak] {
    margin-top: 8px;
    padding: 12px 14px;
    border-left: 2px solid var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.06);
    display: grid;
    gap: 6px;
}

.tts-why p[b-dmk2wy7tak] {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ---- Tutor pane ---- */
.tts-t[b-dmk2wy7tak] {
    padding: 28px 56px 22px 28px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tts-thead[b-dmk2wy7tak] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tts-orb[b-dmk2wy7tak] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(from 0deg, var(--glytic-primary), var(--glytic-secondary), var(--glytic-primary));
    box-shadow: var(--glytic-glow);
}

.tts-title[b-dmk2wy7tak] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--glytic-text-primary);
}

.tts-lesson[b-dmk2wy7tak] {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--glytic-text-secondary);
}

.tts-lesson--in[b-dmk2wy7tak] {
    animation: tts-in-b-dmk2wy7tak 0.22s ease-out;
}

@keyframes tts-in-b-dmk2wy7tak {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.tts-thinking[b-dmk2wy7tak] {
    color: var(--glytic-primary);
    font-weight: 600;
    animation: tts-pulse-b-dmk2wy7tak 1.1s ease-in-out infinite;
}

@keyframes tts-pulse-b-dmk2wy7tak {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Lesson markup comes from TutorMarkup (MarkupString): reach it with ::deep. */
.tts-lesson[b-dmk2wy7tak]  p { margin: 0 0 0.5rem; }
.tts-lesson[b-dmk2wy7tak]  p:last-child { margin-bottom: 0; }
.tts-lesson[b-dmk2wy7tak]  strong { color: var(--glytic-text-primary); font-weight: 600; }
.tts-lesson[b-dmk2wy7tak]  ul,
.tts-lesson[b-dmk2wy7tak]  ol { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.tts-lesson[b-dmk2wy7tak]  li { margin: 0.12rem 0; }
.tts-lesson[b-dmk2wy7tak]  li::marker { color: var(--glytic-primary); }

.tts-cta[b-dmk2wy7tak] {
    align-self: flex-start;
    margin-top: 4px;
    min-height: var(--qf-btn-h-sm);
    padding: 9px 16px;
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--qf-ink);
    text-decoration: none;
    transition: background-color 0.15s, background-image 0.15s;
}

.tts-cta:visited[b-dmk2wy7tak] {
    color: var(--qf-ink);
}

.tts-cta:hover[b-dmk2wy7tak] {
    background: var(--forge-gradient);
}

.tts-cta:focus-visible[b-dmk2wy7tak] {
    outline: var(--qf-btn-focus);
    outline-offset: -3px;
}

/* ---- Phones: one column, full-height sheet ---- */
@media (max-width: 799px) {
    .tts[b-dmk2wy7tak] {
        grid-template-columns: 1fr;
        max-height: none;
        min-height: 100dvh;
        padding-top: 10px;
    }

    .tts-handle[b-dmk2wy7tak] {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        margin: 4px auto 0;
        background: rgba(255, 255, 255, 0.25);
    }

    .tts-q[b-dmk2wy7tak],
    .tts-t[b-dmk2wy7tak] {
        overflow: visible;
        padding: 18px 18px 8px;
    }

    .tts-q[b-dmk2wy7tak] {
        border-right: 0;
        border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.16);
        padding-right: 56px; /* clear the close button */
    }

    .tts-t[b-dmk2wy7tak] {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .tts-qtext[b-dmk2wy7tak] {
        font-size: 0.95rem;
    }

    .tts-opt[b-dmk2wy7tak] {
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    .tts-cta[b-dmk2wy7tak] {
        align-self: stretch;
        text-align: center;
        padding: 12px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tts-lesson--in[b-dmk2wy7tak] { animation: none; }
    .tts-thinking[b-dmk2wy7tak] { animation: none; }
}
/* /Shared/TutorTasteCard.razor.rz.scp.css */
/* ---- AI Tutor taste card (funnel hook in the answered state) ----
   After the user answers, the orb blinks to draw the eye. Clicking the trigger
   types out an "explain like I'm 5" paragraph, then reveals the upgrade CTA. */

.tt-card[b-flpwwevvsb] {
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-secondary-rgb), 0.08));
    position: relative;
    z-index: 1;
}

.tt-trigger[b-flpwwevvsb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.tt-trigger:disabled[b-flpwwevvsb] {
    cursor: default;
}

.tt-trigger[b-flpwwevvsb]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.tt-trigger:focus-visible[b-flpwwevvsb] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
    border-radius: var(--qf-btn-radius);
}

.tt-orb[b-flpwwevvsb] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(from 0deg, var(--glytic-primary), var(--glytic-secondary), var(--glytic-primary));
    box-shadow: var(--glytic-glow);
}

/* Blinking "tutor light" that pulses right after the user answers. */
.tt-orb--blink[b-flpwwevvsb] {
    animation: tt-blink-b-flpwwevvsb 1.1s ease-in-out infinite;
}

@keyframes tt-blink-b-flpwwevvsb {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(var(--glytic-primary-rgb), 0.55), var(--glytic-glow);
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 0 7px rgba(var(--glytic-primary-rgb), 0), 0 0 4px rgba(var(--glytic-primary-rgb), 0.2);
    }
}

.tt-label[b-flpwwevvsb] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--glytic-text-primary);
}

.tt-prompt[b-flpwwevvsb] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tt-trigger:hover .tt-prompt[b-flpwwevvsb] {
    color: var(--glytic-secondary);
}

.tt-text[b-flpwwevvsb] {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
}

/* The taste is real tutor markdown (TutorMarkup via MarkupString), which does not
   carry the scoped-CSS attribute -- reach the injected elements with ::deep. */
.tt-text[b-flpwwevvsb]  p {
    margin: 0 0 0.35rem;
}

.tt-text[b-flpwwevvsb]  p:last-child {
    margin-bottom: 0;
}

.tt-text[b-flpwwevvsb]  strong {
    color: var(--glytic-text-primary);
    font-weight: 600;
}

.tt-text[b-flpwwevvsb]  ul,
.tt-text[b-flpwwevvsb]  ol {
    margin: 0.25rem 0 0.4rem;
    padding-left: 1.2rem;
}

.tt-text[b-flpwwevvsb]  li {
    margin: 0.1rem 0;
}

.tt-text[b-flpwwevvsb]  li::marker {
    color: var(--glytic-primary);
}

/* Lazy-fetch loading state: the lesson is being generated/fetched after the click. */
.tt-thinking[b-flpwwevvsb] {
    color: var(--glytic-primary);
    font-weight: 600;
    animation: tt-thinking-pulse-b-flpwwevvsb 1.1s ease-in-out infinite;
}

@keyframes tt-thinking-pulse-b-flpwwevvsb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.tt-caret[b-flpwwevvsb] {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--glytic-primary);
}

.tt-caret--on[b-flpwwevvsb] {
    animation: tt-caret-blink-b-flpwwevvsb 0.8s step-end infinite;
}

.tt-caret--off[b-flpwwevvsb] {
    display: none;
}

@keyframes tt-caret-blink-b-flpwwevvsb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.tt-cta[b-flpwwevvsb] {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 7px 14px;
    border: 1px solid var(--forge-primary);
    border-radius: var(--qf-btn-radius);
    background: var(--forge-gradient-btn);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--qf-ink);
    text-decoration: none;
    transition: background-color 0.15s, background-image 0.15s;
}

.tt-cta:hover[b-flpwwevvsb] {
    background: var(--forge-gradient);
}

.tt-cta:focus-visible[b-flpwwevvsb] {
    outline: var(--qf-btn-focus);
    outline-offset: 2px;
}

/* /register is usually already visited; keep the CTA on brand instead of the UA visited purple. */
.tt-cta:visited[b-flpwwevvsb] {
    color: var(--qf-ink);
}

/* Larger variant for the full-width mobile "Try a question" section, where the
   surrounding question/answer text is bigger than the compact desktop hero card. */
.tt-card--lg[b-flpwwevvsb] {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tt-card--lg .tt-orb[b-flpwwevvsb] {
    width: 16px;
    height: 16px;
}

.tt-card--lg .tt-label[b-flpwwevvsb],
.tt-card--lg .tt-prompt[b-flpwwevvsb] {
    font-size: 0.85rem;
}

.tt-card--lg .tt-text[b-flpwwevvsb] {
    font-size: 0.92rem;
}

.tt-card--lg .tt-cta[b-flpwwevvsb] {
    margin-top: 0.7rem;
    padding: 10px 18px;
    font-size: 0.85rem;
}

/* Respect reduced-motion preferences: no pulsing or caret blink. */
@media (prefers-reduced-motion: reduce) {
    .tt-orb--blink[b-flpwwevvsb] { animation: none; }
    .tt-caret--on[b-flpwwevvsb] { animation: none; }
    .tt-thinking[b-flpwwevvsb] { animation: none; }
}

/* ---- One-pass entrance (replaces the word-by-word typing) ---- */
.tt-text--in[b-flpwwevvsb] {
    animation: tt-in-b-flpwwevvsb 0.22s ease-out;
}

@keyframes tt-in-b-flpwwevvsb {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-text--in[b-flpwwevvsb] { animation: none; }
}
/* /Shared/UnifiedAIGenerateComponent.razor.rz.scp.css */
/* ==============================================
   UnifiedAIGenerateComponent - Scoped Styles
   Migrated from unified-ai-generate.css (global)
   ============================================== */

/* CSS Variables & Card Base */
.unified-ai-generate-card[b-ffbw36apzm] {
    --primary-color: var(--glytic-secondary);
    --success-color: #00c851;
    --info-color: #33b5e5;
    --warning-color: #ffbb33;
    --danger-color: #ff4444;
    --dark-bg: #0C1018;
    --card-bg: #1A2230;
    --border-color: #444;
    --text-muted: #888;
    --neon-glow: 0 0 20px rgba(var(--glytic-secondary-rgb), 0.3);
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.05), rgba(var(--glytic-secondary-rgb), 0.02));
    backdrop-filter: blur(10px);
    box-shadow: var(--neon-glow);
    transition: all 0.3s ease;
}

.unified-ai-generate-card:hover[b-ffbw36apzm] {
    border-color: rgba(var(--glytic-secondary-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(var(--glytic-secondary-rgb), 0.2);
}

/* --- Layout Sections --- */

.generation-mode-card[b-ffbw36apzm] {
    background: rgba(26, 34, 48, 0.8);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
    border-radius: 12px;
    padding: 24px;
}

.mode-content-section[b-ffbw36apzm] {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.generation-settings-section[b-ffbw36apzm] {
    background: rgba(26, 34, 48, 0.6);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.2);
}

.generation-action-section[b-ffbw36apzm] {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- MudBlazor Overrides (::deep for child components) --- */

/* Form controls */
[b-ffbw36apzm] .mud-input-control {
    transition: all 0.3s ease;
}

[b-ffbw36apzm] .mud-input-control:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

[b-ffbw36apzm] .mud-input-control.mud-input-control-focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--glytic-secondary-rgb), 0.25);
}

/* Suggestions paper */
.suggestions-paper[b-ffbw36apzm] {
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.1), rgba(var(--glytic-secondary-rgb), 0.05));
    backdrop-filter: blur(5px);
}

/* Checkboxes */
[b-ffbw36apzm] .mud-checkbox {
    margin-right: 16px;
    margin-bottom: 8px;
}

[b-ffbw36apzm] .mud-checkbox-checked .mud-button-root {
    color: var(--primary-color);
}

/* Grid items */
[b-ffbw36apzm] .mud-grid-item {
    padding: 8px;
}

/* Button enhancements */
[b-ffbw36apzm] .mud-button-filled-primary {
    background: linear-gradient(135deg, var(--primary-color), #7b68ee);
    border: none;
    box-shadow: 0 4px 15px rgba(var(--glytic-secondary-rgb), 0.3);
    transition: all 0.3s ease;
}

[b-ffbw36apzm] .mud-button-filled-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--glytic-secondary-rgb), 0.4);
}

[b-ffbw36apzm] .mud-button-filled-primary:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

[b-ffbw36apzm] .mud-button-filled-primary[loading="true"] {
    opacity: 0.8;
    cursor: wait;
}

/* Alert styles */
[b-ffbw36apzm] .mud-alert {
    border-radius: 8px;
    border: 1px solid transparent;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

[b-ffbw36apzm] .mud-alert-filled-info {
    background: linear-gradient(135deg, rgba(51, 181, 229, 0.2), rgba(51, 181, 229, 0.1));
    border-color: rgba(51, 181, 229, 0.3);
}

[b-ffbw36apzm] .mud-alert-filled-success {
    background: linear-gradient(135deg, rgba(0, 200, 81, 0.2), rgba(0, 200, 81, 0.1));
    border-color: rgba(0, 200, 81, 0.3);
}

[b-ffbw36apzm] .mud-alert-filled-error {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(255, 68, 68, 0.1));
    border-color: rgba(255, 68, 68, 0.3);
}

[b-ffbw36apzm] .mud-alert-filled-warning {
    background: linear-gradient(135deg, rgba(255, 187, 51, 0.2), rgba(255, 187, 51, 0.1));
    border-color: rgba(255, 187, 51, 0.3);
}

/* Progress bars */
[b-ffbw36apzm] .mud-progress-linear {
    border-radius: 4px;
    overflow: hidden;
}

[b-ffbw36apzm] .mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--primary-color), #7b68ee);
    transition: width 0.5s ease;
}

/* Expansion panels */
[b-ffbw36apzm] .mud-expansion-panels {
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    max-height: 600px;
    overflow-y: auto;
}

[b-ffbw36apzm] .mud-expand-panel {
    border-bottom: 1px solid rgba(var(--glytic-secondary-rgb), 0.1);
    margin-bottom: 0;
}

[b-ffbw36apzm] .mud-expand-panel:last-child {
    border-bottom: none;
}

[b-ffbw36apzm] .mud-expand-panel-header {
    transition: all 0.3s ease;
}

[b-ffbw36apzm] .mud-expand-panel-header:hover {
    background-color: rgba(var(--glytic-secondary-rgb), 0.05);
}

/* List styles */
[b-ffbw36apzm] .mud-list {
    background: transparent;
}

[b-ffbw36apzm] .mud-list-item {
    border-radius: 4px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

[b-ffbw36apzm] .mud-list-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Chips */
[b-ffbw36apzm] .mud-chip {
    margin: 2px;
    font-weight: 500;
}

[b-ffbw36apzm] .mud-chip-filled-primary {
    background: linear-gradient(135deg, var(--primary-color), #7b68ee);
    color: white;
}

[b-ffbw36apzm] .mud-chip-filled-success {
    background: linear-gradient(135deg, var(--success-color), #00ff66);
    color: white;
}

[b-ffbw36apzm] .mud-chip-filled-info {
    background: linear-gradient(135deg, var(--info-color), #66d9ff);
    color: white;
}

[b-ffbw36apzm] .mud-chip-filled-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffcc66);
    color: #333;
}

[b-ffbw36apzm] .mud-chip-filled-error {
    background: linear-gradient(135deg, var(--danger-color), #ff6666);
    color: white;
}

/* Switch */
[b-ffbw36apzm] .mud-switch {
    margin: 8px 0;
}

[b-ffbw36apzm] .mud-switch-checked .mud-switch-thumb {
    background-color: var(--primary-color);
}

[b-ffbw36apzm] .mud-switch-checked .mud-switch-track {
    background-color: rgba(var(--glytic-secondary-rgb), 0.3);
}

/* Icon buttons */
[b-ffbw36apzm] .mud-icon-button {
    transition: all 0.3s ease;
}

[b-ffbw36apzm] .mud-icon-button:hover {
    transform: scale(1.1);
    background-color: rgba(var(--glytic-secondary-rgb), 0.1);
}

/* Generate CTA: no rule existed for this class before (dead px-8/py-3 utility classes
   in the markup have no effect either). Color is intentionally mode-driven
   (GetModeColor(): Tertiary/Warning/etc.), already resolved correctly per-variant by
   the shared button system in mudblazor-overrides.css -- a hardcoded PRIMARY
   background/border here would silently override that per-mode signal, so only the
   PRIMARY recipe's typography (weight, no tracking) is applied via ::deep. */
[b-ffbw36apzm] .generate-button {
    font-weight: 700;
    letter-spacing: 0;
}

/* --- Question Cards --- */

.questions-grid[b-ffbw36apzm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-card[b-ffbw36apzm] {
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.1);
    background: linear-gradient(135deg, rgba(var(--glytic-secondary-rgb), 0.02), rgba(var(--glytic-secondary-rgb), 0.01));
    transition: all 0.3s ease;
}

.question-card:hover[b-ffbw36apzm] {
    border-color: rgba(var(--glytic-secondary-rgb), 0.3);
    box-shadow: 0 4px 16px rgba(var(--glytic-secondary-rgb), 0.1);
    transform: translateY(-2px);
}

.question-card .badges[b-ffbw36apzm] {
    flex-shrink: 0;
}

.question-card[b-ffbw36apzm]  .mud-list {
    background: transparent;
    border-radius: 4px;
    padding: 8px 0;
}

.question-card[b-ffbw36apzm]  .mud-list-item {
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

.question-card[b-ffbw36apzm]  .mud-list-item:hover {
    background-color: rgba(var(--glytic-secondary-rgb), 0.05);
}

.question-card .text-success[b-ffbw36apzm] {
    color: var(--success-color);
}

.question-card[b-ffbw36apzm]  .mud-chip {
    font-size: 0.75rem;
    height: 24px;
}

.question-card[b-ffbw36apzm]  .mud-list-item.correct-answer {
    background-color: rgba(0, 200, 81, 0.1);
    border-left: 3px solid var(--success-color);
}

.question-card[b-ffbw36apzm]  .mud-list-item.incorrect-answer {
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- Loading & Progress --- */

[b-ffbw36apzm] .mud-progress-circular {
    color: var(--primary-color);
}

.loading-overlay[b-ffbw36apzm] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

[b-ffbw36apzm] .mud-button.loading {
    pointer-events: none;
    opacity: 0.8;
}

[b-ffbw36apzm] .mud-button.loading .mud-progress-circular {
    margin-right: 8px;
}

.loading-indicator[b-ffbw36apzm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(var(--glytic-secondary-rgb), 0.1);
}

.progress-text[b-ffbw36apzm] {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* --- State Classes --- */

.success-glow[b-ffbw36apzm] {
    box-shadow: 0 0 20px rgba(0, 200, 81, 0.5);
    border-color: var(--success-color);
}

.error-glow[b-ffbw36apzm] {
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    border-color: var(--danger-color);
}

.processing-glow[b-ffbw36apzm] {
    box-shadow: 0 0 20px rgba(51, 181, 229, 0.5);
    border-color: var(--info-color);
}

/* --- Validation & Indicators --- */

.validation-message[b-ffbw36apzm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    margin-top: 4px;
}

.validation-message.error[b-ffbw36apzm] {
    color: var(--danger-color);
}

.validation-message.warning[b-ffbw36apzm] {
    color: var(--warning-color);
}

.validation-message.info[b-ffbw36apzm] {
    color: var(--info-color);
}

.premium-indicator[b-ffbw36apzm] {
    color: var(--warning-color);
    font-weight: 600;
}

.premium-indicator[b-ffbw36apzm]  .mud-icon-root {
    color: var(--warning-color);
}

.exam-type-official[b-ffbw36apzm] {
    background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(0, 200, 81, 0.05));
    border-left: 3px solid var(--success-color);
}

.exam-type-ai-suggested[b-ffbw36apzm] {
    background: linear-gradient(135deg, rgba(51, 181, 229, 0.1), rgba(51, 181, 229, 0.05));
    border-left: 3px solid var(--info-color);
}

/* --- Disabled States --- */

[b-ffbw36apzm] .mud-input-control:disabled,
[b-ffbw36apzm] .mud-button:disabled,
[b-ffbw36apzm] .mud-checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-ffbw36apzm] .mud-checkbox:disabled .mud-checkbox-content {
    color: var(--text-muted);
}

/* --- Search Enhancements --- */

[b-ffbw36apzm] .mud-input-control.mud-input-control-focus .mud-input-slot {
    border-color: var(--success-color);
}

[b-ffbw36apzm] .mud-input-adornment .mud-icon-root {
    color: var(--success-color);
}

/* --- Accessibility --- */

[b-ffbw36apzm] .mud-button:focus,
[b-ffbw36apzm] .mud-input-control:focus,
[b-ffbw36apzm] .mud-select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Tooltips */
[b-ffbw36apzm] .mud-tooltip {
    background-color: rgba(var(--glytic-secondary-rgb), 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--glytic-secondary-rgb), 0.3);
}

/* Custom scrollbar for question panels */
[b-ffbw36apzm] .mud-expansion-panels::-webkit-scrollbar {
    width: 8px;
}

[b-ffbw36apzm] .mud-expansion-panels::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

[b-ffbw36apzm] .mud-expansion-panels::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color), #7b68ee);
    border-radius: 4px;
}

[b-ffbw36apzm] .mud-expansion-panels::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #7b68ee, var(--primary-color));
}

/* --- Animations --- */

@keyframes slideInUp-b-ffbw36apzm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-up[b-ffbw36apzm] {
    animation: slideInUp-b-ffbw36apzm 0.4s ease-out;
}

@keyframes pulse-b-ffbw36apzm {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-secondary-rgb), 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--glytic-secondary-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--glytic-secondary-rgb), 0);
    }
}

.pulse[b-ffbw36apzm] {
    animation: pulse-b-ffbw36apzm 2s infinite;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .unified-ai-generate-card[b-ffbw36apzm] {
        margin: 8px;
    }

    [b-ffbw36apzm] .mud-grid-item {
        padding: 4px;
    }

    [b-ffbw36apzm] .mud-expansion-panels {
        max-height: 400px;
    }

    [b-ffbw36apzm] .mud-checkbox {
        margin-right: 8px;
        margin-bottom: 4px;
    }
}