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

.vertical-hero[b-7si7302270] {
    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-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: 1px;
    text-transform: uppercase;
    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;
    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-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: 4rem 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;
    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). */
.about-card[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    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;
    clip-path: var(--qf-clip-card);
    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;
    clip-path: var(--qf-clip-card);
    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-block;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
}

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

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Text-only element -> ::before z-index:-1 + isolation. Interior = page surface. */
.btn-secondary-large[b-7si7302270] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large[b-7si7302270]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover[b-7si7302270]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

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

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

    .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: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dash-section[b-nx46zjj0uc]  .quick-action-card:hover {
    transform: translateY(-3px);
    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:active {
    transform: translateY(-1px) scale(0.99);
}

.dash-section[b-nx46zjj0uc]  .quick-action-card:focus-visible {
    outline: 2px solid var(--glytic-primary);
    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;
}

.reload-button[b-6aaay1poiw] {
    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 */
/* Native .engagement-page-scope wrapper carries the scope so ::deep reaches
   the MudContainer (.engagement-page) and all MudBlazor descendants. */
[b-qs40f2zk9h] .period-select {
    width: 140px;
}

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

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

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

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

    [b-qs40f2zk9h] .period-select {
        flex: 1 1 160px;
        width: auto;
    }

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

    [b-qs40f2zk9h] .responsive-table .mud-table-row {
        border: 1px solid var(--glytic-border);
        border-radius: var(--glytic-border-radius-small);
        margin-bottom: 10px;
    }
}
/* /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); }

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

.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: transform 0.15s ease, border-color 0.15s ease;
}

[b-qhkynqs3cw] .clickable-card:hover,
[b-qhkynqs3cw] .clickable-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--glytic-border-hover);
    outline: 2px solid var(--glytic-primary);
    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: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    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: 620px;
    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;
}

/* Bevel-following outline (double-layer reveal): a real border shears off the cut corner.
   The tab is text-only, so the interior ::before sits behind (z-index:-1 + isolation) and
   the label paints above it -- the tab FILL is the outline color, ::before the interior. */
.industry-tab[b-omt29jhbih] {
    position: relative;
    isolation: isolate;
    appearance: none;
    -webkit-appearance: none;
    background: var(--glytic-border, rgba(255,255,255,0.1));
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.5;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 6px 16px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    outline: none;
}

.industry-tab[b-omt29jhbih]::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 0.2s ease;
}

.industry-tab:hover[b-omt29jhbih] {
    background: var(--glytic-border-hover, rgba(92,168,184,0.4));
    color: var(--glytic-text-primary, #fff);
}

/* clip-path shears an outward ring -> inset focus ring */
.industry-tab:focus-visible[b-omt29jhbih] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.industry-tab.active[b-omt29jhbih] {
    background: var(--forge-gold, #D07040);
    color: var(--forge-gold, #D07040);
}

.industry-tab.active[b-omt29jhbih]::before {
    background: linear-gradient(rgba(var(--forge-primary-rgb), 0.14), rgba(var(--forge-primary-rgb), 0.14)), var(--glytic-bg-medium);
}

/* 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, #12100C);
    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;
}

/* Bevel-following outline (double-layer reveal): FILL = outline color, ::before = interior
   at z-index:-1 (isolation keeps it in this stacking context; the MudIcon child carries
   no CSS-isolation scope attribute so a scoped child-lift rule would never reach it). */
.path-close-btn[b-omt29jhbih] {
    position: relative;
    isolation: isolate;
    appearance: none;
    -webkit-appearance: none;
    background: var(--glytic-border, rgba(255,255,255,0.12));
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    cursor: pointer;
    padding: 5px;
    outline: none;
    flex-shrink: 0;
    display: flex;
    transition: background 0.2s ease;
}

.path-close-btn[b-omt29jhbih]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-card, #12151f);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s ease;
}

.path-close-btn:hover[b-omt29jhbih] {
    background: var(--glytic-border-hover, rgba(92,168,184,0.4));
    color: var(--glytic-text-primary, #fff);
}

/* clip-path shears an outward ring -> inset focus ring */
.path-close-btn:focus-visible[b-omt29jhbih] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

.path-confirm-cta[b-omt29jhbih] {
    display: inline-block;
    background: var(--forge-gold, #D07040);
    color: var(--qf-ink, #12100C);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 9px 18px;
    clip-path: var(--qf-clip-btn);
    transition: background 0.2s ease;
}

.path-confirm-cta:hover[b-omt29jhbih] {
    background: var(--forge-primary, #C86030);
}

.path-confirm-secondary[b-omt29jhbih] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-secondary, rgba(255,255,255,0.6));
    text-decoration: none;
}

.path-confirm-secondary:hover[b-omt29jhbih] {
    color: var(--glytic-primary);
}

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

.goal-set-btn[b-omt29jhbih] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--forge-gold, #D07040);
    color: var(--qf-ink, #12100C);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
    outline: none;
}

.goal-set-btn:hover[b-omt29jhbih] {
    background: var(--forge-primary, #C86030);
}

.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.78rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    outline: none;
}

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

@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);
    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(--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);
}

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

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

.path-node--completed[b-l2eyjs53hv] {
    background: rgba(var(--glytic-primary-rgb), 0.5);
}

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

.path-viz-link[b-l2eyjs53hv] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--forge-gold, #D07040);
    text-decoration: none;
    padding: 5px 13px;
    border: 1px solid rgba(var(--forge-primary-rgb),0.45);
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.path-viz-link:hover[b-l2eyjs53hv] {
    background: rgba(var(--forge-primary-rgb),0.12);
    border-color: var(--forge-gold);
}

.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, #12100C);
    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;
}

.path-enroll-btn[b-l2eyjs53hv] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--forge-gold, #D07040);
    color: var(--qf-ink, #12100C);
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    border: none;
    padding: 12px 40px;
    cursor: pointer;
    transition: background 0.2s ease;
    outline: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.path-enroll-btn:hover[b-l2eyjs53hv] {
    background: var(--forge-primary, #C86030);
}

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

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

/* ============================ 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: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-family: var(--glytic-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}

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

.cs-btn--primary:hover[b-qmr6tvwabm] {
    filter: brightness(1.08);
}

.cs-btn--primary:disabled[b-qmr6tvwabm] {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

/* 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. */
/* Ghost: double-layer reveal so the teal outline follows the top-right bevel.
   Element bg = the outline color; ::before = the tinted interior over the dark card. */
.cs-btn--ghost[b-qmr6tvwabm] {
    background: rgba(var(--glytic-primary-rgb), 0.30);
    color: var(--glytic-primary);
    border: 0;
}

.cs-btn--ghost[b-qmr6tvwabm]::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);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

.cs-btn--ghost:hover[b-qmr6tvwabm]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.16), rgba(var(--glytic-primary-rgb), 0.16)), var(--glytic-bg-medium);
}

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

.cs-welcome .cs-btn--ghost[b-qmr6tvwabm]::before {
    background: var(--qf-bone);
}

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

/* clip-path shears an outward focus ring -> inset it (per project rule). */
.cs-btn:focus-visible[b-qmr6tvwabm] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.cs-welcome .cs-btn:focus-visible[b-qmr6tvwabm] {
    outline-color: var(--qf-ink);
}

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

.debrief-cta-btn[b-45395ylk3o] {
    min-height: 48px;
}

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

    .debrief-cta-btn[b-45395ylk3o] {
        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;
}

.tutor-msg[b-w977mut586] {
    font-size: 0.9rem;
    line-height: 1.6;
    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;
}

/* User bubble: right-aligned pill */
.tutor-msg--user[b-w977mut586] {
    align-self: flex-end;
    max-width: 85%;
    background: var(--glytic-gradient-card);
    border: 1px solid var(--glytic-border);
    border-radius: 12px 12px 2px 12px;
    padding: 0.4rem 0.75rem;
    color: var(--glytic-text-primary);
    font-size: 0.85rem;
}

/* Assistant message: full-width, teal-tinted white, in a clearly-delineated reply
   panel (left accent + faint fill) so the tutor's voice never blends into the
   question restate above it (owner report 2026-07-23: unclear distinction between
   question / answers / tutor input). */
.tutor-msg--assistant[b-w977mut586] {
    color: #e8fffe; /* design-token ai_card_text -- no CSS variable, using documented value */
    border-left: 2px solid rgba(var(--glytic-primary-rgb), 0.55);
    background: rgba(var(--glytic-primary-rgb), 0.06);
    border-radius: 0 10px 10px 0;
    padding: 0.5rem 0.75rem;
}

/* ========================================
   STREAMING CARET
   ======================================== */

.tutor-caret[b-w977mut586] {
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: -2px;
    margin-left: 1px;
    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;
}

.tutor-chip[b-w977mut586] {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    color: var(--glytic-text-secondary);
    background: var(--glytic-gradient-card);
    border: 1px solid var(--glytic-border);
    cursor: pointer;
    transition:
        border-color var(--glytic-transition),
        box-shadow var(--glytic-transition),
        transform 0.08s ease;
    font-family: var(--glytic-font-body);
    white-space: nowrap;
}

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

.tutor-chip:active:not(:disabled)[b-w977mut586] {
    border-color: var(--forge-border);
    transform: scale(0.97);
}

.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)
   ======================================== */

.tutor-cta[b-w977mut586] {
    display: inline-block;
    margin-top: 0.4rem;
    background: var(--glytic-gradient-text);
    color: var(--glytic-bg-dark);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: var(--glytic-border-radius-small);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    font-family: var(--glytic-font-body);
    transition: box-shadow var(--glytic-transition), transform 0.08s ease;
    /* No transform on hover (panel rule); only shadow */
}

.tutor-cta:hover[b-w977mut586] {
    box-shadow: var(--glytic-glow);
}

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

/* ========================================
   DOCK BARS (launcher + collapsed resume + anonymous sign-in)
   Desktop: inline card with a horizontal row. Mobile: fixed bottom bar (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%;
    margin: 0;
    padding: 0.3rem 0.35rem;
    background: 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] {
    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;
}

.tutor-dock-text[b-w977mut586] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tutor-dock-title[b-w977mut586] {
    font-family: var(--glytic-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    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;
    align-self: flex-start;
}

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

/* CSS-drawn up chevron: "this opens upward". */
.tutor-dock-chevron[b-w977mut586] {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--glytic-primary);
    border-bottom: 2px solid var(--glytic-primary);
    transform: rotate(-135deg) translate(-1px, -1px);
    opacity: 0.85;
}

/* 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] {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.65rem;
    align-items: center;
}

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

/* Circular gradient send button with an SVG arrow (icon saves width on mobile). */
.tutor-send[b-w977mut586] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--glytic-gradient-text);
    color: var(--glytic-bg-dark);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow var(--glytic-transition), opacity var(--glytic-transition);
}

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

.tutor-send:hover:not(:disabled)[b-w977mut586] {
    box-shadow: var(--glytic-glow);
}

.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). */
.tutor-upsell-link[b-w977mut586] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--forge-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

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

/* Anonymous footer: free-text needs an account, so the input row's slot holds a
   full-width sign-up pill instead. */
.tutor-signup-pill[b-w977mut586] {
    width: 100%;
    min-height: 42px;
    border: 1px dashed var(--glytic-border-hover);
    border-radius: 999px;
    background: var(--glytic-gradient-card);
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition);
}

.tutor-signup-pill:hover[b-w977mut586] {
    border-color: var(--forge-border);
    box-shadow: var(--glytic-glow);
}

/* 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: 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 */
        border-radius: 14px 14px 0 0;
        border-bottom: none;
        box-shadow:
            0 -8px 30px rgba(0, 0, 0, 0.5),
            0 0 40px -10px rgba(92, 168, 184, 0.22); /* brand glow -- no exact token */
        animation: tutor-rise-b-w977mut586 var(--glytic-transition) both;
        will-change: transform, opacity;
    }

    /* 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: 0;
        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: 0;
        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;
        /* 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 .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));
    }

    /* Chip rail: one swipeable row instead of a tall wrapped block -- keeps the
       footer compact so more of the answer stays visible. 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.4rem;
    }

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

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

    .tutor.is-expanded .tutor-ctx-opts[b-w977mut586] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        margin-top: 0.4rem;
    }

    /* 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-dock-chevron[b-w977mut586],
    .tutor.tutor--collapsed .tutor-dock-text[b-w977mut586],
    .tutor.tutor--collapsed .tutor-dock-chevron[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-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: 28px;
    height: 28px;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--glytic-transition), background var(--glytic-transition);
}

.tutor-close:hover[b-w977mut586] {
    border-color: var(--glytic-border-hover);
    background: var(--glytic-gradient-card);
}

.tutor-close:focus-visible[b-w977mut586] {
    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 */
}

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

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

.tutor-msg[b-w977mut586]  ul,
.tutor-msg[b-w977mut586]  ol {
    margin: 0.35rem 0 0.55rem;
    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.82em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35); /* code chip -- no exact token */
    border: 1px solid var(--glytic-border);
}

.tutor-msg[b-w977mut586]  pre {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45); /* code block -- no exact token */
    border: 1px solid var(--glytic-border);
    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-caret[b-w977mut586],
    .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: 0;
    color: var(--glytic-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.bl-ctl:hover[b-3i5sj2ugea] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
}
.bl-ctl:disabled[b-3i5sj2ugea] { opacity: 0.3; pointer-events: none; }
.bl-ctl--remove:hover[b-3i5sj2ugea] { color: var(--glytic-error); }

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

.bl-pool-item[b-3i5sj2ugea] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(148, 163, 184, 0.28);
    border: 0;
    clip-path: var(--qf-clip-btn);
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.bl-pool-item[b-3i5sj2ugea]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}
.bl-pool-item:hover[b-3i5sj2ugea] { background: rgba(var(--glytic-primary-rgb), 0.3); }
.bl-pool-item:hover[b-3i5sj2ugea]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
}
.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], .bl-pool-item[b-3i5sj2ugea]::before { 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;
}

.confidence-btn[b-2hwa7nrqgy] {
    padding: 6px 16px;
    border: 1px solid var(--glytic-border, #e0e0e0);
    border-radius: 20px;
    background: transparent;
    color: var(--glytic-text-secondary, #666);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.confidence-btn.selected[b-2hwa7nrqgy] {
    color: #fff;
    border-color: transparent;
}

.confidence-btn.selected.guessing[b-2hwa7nrqgy] {
    background: #ef5350;
}

.confidence-btn.selected.unsure[b-2hwa7nrqgy] {
    background: #ff9800;
}

.confidence-btn.selected.confident[b-2hwa7nrqgy] {
    background: #4caf50;
}
/* /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; }

/* Trigger button -- same double-layer treatment, ember tint when a pick is pending. */
.ddg-trigger[b-2dt4z6j1la] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: rgba(var(--glytic-primary-rgb), 0.4);
    border: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ddg-trigger[b-2dt4z6j1la]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}
.ddg-trigger:hover[b-2dt4z6j1la] { background: rgba(var(--glytic-primary-rgb), 0.65); }
.ddg-trigger:disabled[b-2dt4z6j1la] { opacity: 0.5; pointer-events: none; }

.ddg-trigger--empty[b-2dt4z6j1la] { background: rgba(var(--forge-primary-rgb), 0.5); }
.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.65); }

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

.ddg-opt[b-2dt4z6j1la] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(148, 163, 184, 0.28);
    border: 0;
    clip-path: var(--qf-clip-btn);
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ddg-opt[b-2dt4z6j1la]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}
.ddg-opt:hover[b-2dt4z6j1la] { background: rgba(var(--glytic-primary-rgb), 0.3); }
.ddg-opt:hover[b-2dt4z6j1la]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
}
.ddg-opt.is-sel[b-2dt4z6j1la] {
    background: rgba(var(--glytic-primary-rgb), 0.55);
    color: #fff;
}
.ddg-opt.is-sel[b-2dt4z6j1la]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.12), rgba(var(--glytic-primary-rgb), 0.12)), var(--glytic-bg-medium);
}

.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], .ddg-opt[b-2dt4z6j1la]::before { 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;
}

.flag-btn[b-jhzr1f5wwp] {
    opacity: 0.35;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: var(--glytic-text-secondary, rgba(255, 255, 255, 0.5));
}

.flag-btn:hover[b-jhzr1f5wwp] {
    opacity: 0.75;
}

.flag-btn--submitted[b-jhzr1f5wwp] {
    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: none;
    border-radius: 10px;
    background: transparent;
    color: var(--glytic-text-muted, #a0a0a0);
    cursor: pointer;
}

.forge-gear:hover[b-nzw1aczhm6] { color: var(--glytic-text-primary, #f0f0f0); }

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

.forge-skip:hover[b-nzw1aczhm6] { color: var(--glytic-text-secondary, #e0e0e0); }

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

/* ---------- 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: 48px;
    padding: 12px 22px;
    border-radius: var(--glytic-border-radius-small, 12px);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: box-shadow 0.2s, transform 0.2s;
}

.forge-btn:active[b-nzw1aczhm6] { transform: scale(0.98); }

.forge-btn--primary[b-nzw1aczhm6] {
    background: var(--forge-gradient-btn, linear-gradient(135deg, #D07040 0%, #B86038 100%));
    color: #fff;
    box-shadow: var(--forge-shadow, 0 4px 16px rgba(192, 96, 48, 0.25));
}

.forge-btn--primary:hover[b-nzw1aczhm6] { box-shadow: 0 4px 22px rgba(192, 96, 48, 0.45); }

.forge-btn--ghost[b-nzw1aczhm6] {
    background: transparent;
    color: var(--glytic-text-muted, #a0a0a0);
    font-weight: 500;
}

.forge-btn--ghost:hover[b-nzw1aczhm6] { color: var(--glytic-text-secondary, #e0e0e0); }

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

.forge-tf[b-nzw1aczhm6] {
    flex: 1;
    max-width: 150px;
    min-height: 52px;
    border-radius: var(--glytic-border-radius-small, 12px);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.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--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-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: 0;
    cursor: pointer;
    transition: background 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;
}

.milestone-share[b-54ye89gpj0] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    border: none;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 32px;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 3;
}

.milestone-share:hover[b-54ye89gpj0] {
    color: var(--glytic-primary, #00ffe7);
    background: rgba(255, 255, 255, 0.1);
}

.milestone-close[b-54ye89gpj0] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border: none;
    outline: none;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 3;
}

.milestone-close:hover[b-54ye89gpj0] {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

/* 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: 4px;
    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 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: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: 6px;
    }

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

/* Unobtrusive pill: sits between the question text and the answer options. */
.qgloss-toggle[b-tw341xt5ew] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--glytic-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    color: var(--glytic-primary);
    background: var(--glytic-gradient-card);
    border: 1px solid var(--glytic-border);
    cursor: pointer;
    transition: border-color var(--glytic-transition), box-shadow var(--glytic-transition), transform 0.08s ease;
}

.qgloss-toggle:hover[b-tw341xt5ew] {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

.qgloss-toggle:active[b-tw341xt5ew] {
    transform: scale(0.98);
}

.qgloss-toggle:focus-visible[b-tw341xt5ew] {
    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-toggle.is-open[b-tw341xt5ew] {
    border-color: var(--glytic-border-hover);
}

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

.qgloss-retry[b-tw341xt5ew] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: var(--glytic-text-secondary);
    background: var(--glytic-gradient-card);
    border: 1px solid var(--glytic-border);
    cursor: pointer;
}

.qgloss-retry:hover[b-tw341xt5ew] {
    border-color: var(--glytic-border-hover);
    box-shadow: var(--glytic-glow);
}

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

/* clip-btn shears a real border off the top-right cut, so draw the outline via the double-layer
   reveal. This is a text-only <a>, so isolate the button and float the ::before interior behind
   the text with z-index:-1 (button FILL = outline color; ::before = interior fill). */
.qr-upgrade-btn[b-qgi86h63v7] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.65rem 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: var(--glytic-border);
    color: var(--glytic-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.qr-upgrade-btn[b-qgi86h63v7]::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 0.15s ease;
}

.qr-upgrade-btn:hover[b-qgi86h63v7] {
    transform: translateY(-1px);
    background: var(--glytic-border-hover);
}

/* clip-path shears an outward focus ring -> inset it. */
.qr-upgrade-btn:focus-visible[b-qgi86h63v7] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* Primary action -- ember (See Premium yearly checkout for guests / Go Premium monthly for free users).
   Ember is the interior; the fill (outline) stays ember at rest so it reads edge-to-edge,
   and the base :hover recolors that outline to border-hover so it follows the bevel. */
.qr-upgrade-monthly[b-qgi86h63v7] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
}

.qr-upgrade-monthly[b-qgi86h63v7]::before {
    background: var(--forge-gradient-btn);
}

.qr-upgrade-monthly:hover[b-qgi86h63v7] {
    filter: brightness(1.08);
}

/* Secondary action -- teal ghost (Sign up free for guests / annual for free users). The teal outline is the fill; the
   teal wash tints the interior ::before (composited over the opaque surface). */
.qr-upgrade-annual[b-qgi86h63v7] {
    background: rgba(var(--glytic-primary-rgb), 0.30);
    color: var(--glytic-primary);
}

.qr-upgrade-annual[b-qgi86h63v7]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
}

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

.qr-tab[b-qgi86h63v7] {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: transparent;
    color: var(--glytic-text-muted);
    cursor: pointer;
    transition: background 0.12s;
}

.qr-tab--active[b-qgi86h63v7] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--glytic-text-primary);
}

/* 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: 9px;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid;
    transition: background 0.15s;
}

.qr-btn--secondary[b-qgi86h63v7] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.07);
    color: var(--glytic-text-secondary);
}

.qr-btn--secondary:hover[b-qgi86h63v7] { background: rgba(255, 255, 255, 0.04); }

.qr-btn--text[b-qgi86h63v7] {
    background: transparent;
    border-color: transparent;
    color: var(--glytic-text-muted);
    font-weight: 500;
    font-size: 0.78rem;
}

.qr-btn--text:hover[b-qgi86h63v7] { color: var(--glytic-text-secondary); }

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

.qr-poster-btn[b-qgi86h63v7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.5rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--qf-clip-btn);
    transition: background 0.15s, color 0.15s;
}

.qr-poster-btn--primary[b-qgi86h63v7] {
    background: var(--forge-primary);
    border: 0;
    color: var(--qf-ink);
}

.qr-poster-btn--primary:hover[b-qgi86h63v7] { background: var(--forge-gold); }

/* Ghost button on the bone poster: clip-btn shears the 1px ink border off the top-right cut,
   so draw the outline via the double-layer reveal. Text-only <button>, so isolate it and float
   the bone interior behind the text with z-index:-1 (fill = ink outline; ::before = bone). */
.qr-poster-btn--ghost[b-qgi86h63v7] {
    position: relative;
    isolation: isolate;
    background: var(--qf-ink);
    border: 0;
    color: var(--qf-ink);
}

.qr-poster-btn--ghost[b-qgi86h63v7]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--qf-bone);
    z-index: -1;
    pointer-events: none;
    transition: background 0.15s ease;
}

.qr-poster-btn--ghost:hover[b-qgi86h63v7]::before { background: linear-gradient(rgba(var(--qf-ink-rgb), 0.08), rgba(var(--qf-ink-rgb), 0.08)), var(--qf-bone); }

/* clip-path shears an outward outline -> inset the focus ring */
.qr-poster-btn:focus-visible[b-qgi86h63v7] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

@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] {
    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;
}

.qr-unlock[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] {
        margin: 0.75rem 0.5rem 0;
    }

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

.share-btn[b-qw7jot7bgf] {
    min-width: 120px;
}

[b-qw7jot7bgf] .share-btn-twitter {
    --share-twitter-bg: #1DA1F2;
    background-color: var(--share-twitter-bg);
    color: white;
}

[b-qw7jot7bgf] .share-btn-whatsapp {
    --share-whatsapp-bg: #25D366;
    background-color: var(--share-whatsapp-bg);
    color: white;
}
/* /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));
}

.srcv-back[b-x45x17wmst] {
    min-height: 44px;
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-radius: var(--glytic-border-radius-small, 12px);
    background: transparent;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

.srcv-back:hover[b-x45x17wmst] { border-color: var(--glytic-border-hover, rgba(92, 168, 184, 0.45)); }

.srcv-open:focus-visible[b-x45x17wmst],
.srcv-back:focus-visible[b-x45x17wmst] {
    outline: 2px solid var(--glytic-primary, #5CA8B8);
    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%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.refine-btn[b-8onk1rdh7t] {
    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;
}

.subtopic-chip[b-8onk1rdh7t] {
    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;
}

.exam-chip[b-8onk1rdh7t] {
    padding: 0.35rem 0.85rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: var(--glytic-border);
    color: var(--glytic-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    isolation: isolate;
    transition: background var(--glytic-transition), color var(--glytic-transition);
}

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

.exam-chip:hover[b-8onk1rdh7t] {
    background: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.exam-chip-active[b-8onk1rdh7t] {
    background: var(--glytic-primary);
    color: var(--glytic-primary);
}

.exam-chip-active[b-8onk1rdh7t]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
}

/* clip-path shears an outward focus ring -> inset it. */
.exam-chip:focus-visible[b-8onk1rdh7t] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.exam-chip-count[b-8onk1rdh7t] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0;
    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] {
    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-bottom: 0.5rem;
    transition: background var(--glytic-transition);
}

.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 ---- */
.generate-btn[b-8onk1rdh7t] {
    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);
    border-radius: 0;
}

/* Filled primary nav/generate CTAs -> ember cut-corner plate, ink label */
[b-8onk1rdh7t] .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-weight: 700;
    letter-spacing: 0.03em;
}

[b-8onk1rdh7t] .mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--forge-gradient);
}

[b-8onk1rdh7t] .mud-button-filled.mud-button-filled-primary .mud-button-label,
[b-8onk1rdh7t] .mud-button-filled.mud-button-filled-primary .mud-progress-circular {
    color: var(--qf-ink);
}

[b-8onk1rdh7t] .mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

/* Outlined buttons (Back / secondary nav) -> squared hairline. MudBlazor draws the outline as a
   real 1px border, which this clip-path shears off the top-right cut corner. Redraw it as the
   double-layer reveal: the button FILL is the hairline color and a ::before inset 1px paints the
   interior, so the hairline follows the bevel. isolation + ::before z-index:-1 keeps the label and
   ripple above the interior without positioning MudBlazor's internals. */
[b-8onk1rdh7t] .mud-button-root.mud-button-outlined {
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: var(--glytic-border);
    position: relative;
    isolation: isolate;
}
[b-8onk1rdh7t] .mud-button-root.mud-button-outlined::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);
}
[b-8onk1rdh7t] .mud-button-root.mud-button-outlined:hover {
    background: var(--glytic-border-hover);
}

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

[b-o6y4jiwcyc] .coach-cta-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    /* Ember primary CTA (purple purge: was teal->logo-purple). */
    background: var(--forge-gradient-btn) !important;
    color: var(--qf-ink) !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    padding: 4px 16px !important;
    min-height: 36px;
}

[b-o6y4jiwcyc] .coach-cta-btn:focus-visible {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

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

.exam-pill[b-y6npguh0k6] {
    padding: 5px 14px;
    border: 1px solid var(--glytic-border);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--glytic-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.exam-pill:hover[b-y6npguh0k6] {
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.exam-pill.active[b-y6npguh0k6] {
    background: rgba(0, 255, 231, 0.12);
    border-color: rgba(0, 255, 231, 0.3);
    color: var(--glytic-primary);
}

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

.focus-practice-btn[b-y6npguh0k6] {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(0, 255, 231, 0.1);
    color: var(--glytic-primary);
    text-decoration: none;
    transition: background 0.2s;
}

.focus-practice-btn:hover[b-y6npguh0k6] {
    background: rgba(0, 255, 231, 0.2);
}

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

/* Bevel-following outline (double-layer reveal): a real border shears off the cut corner.
   These buttons hold bare text (and one icon variant), so the interior ::before sits behind
   via z-index:-1 + isolation; the button FILL is the outline color, ::before the interior. */
.node-btn[b-u0azncfugs] {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 0.28rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    text-decoration: none;
    color: var(--glytic-text-secondary);
    background: var(--glytic-border);
    transition: background 0.2s, color 0.2s;
}
.node-btn[b-u0azncfugs]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background 0.2s;
}

.node-btn:hover[b-u0azncfugs] {
    background: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.node-btn.primary[b-u0azncfugs] {
    /* Purple purge: flat teal wash (was teal->purple). */
    background: var(--glytic-border-hover);
    color: var(--glytic-primary);
}
.node-btn.primary[b-u0azncfugs]::before {
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.16), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-card-bg);
}

/* 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-only secondary action (Flashcards) -- square, muted, 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;
    color: var(--glytic-text-muted);
}

.node-btn-icon:hover[b-u0azncfugs] {
    color: var(--glytic-primary);
}

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

.cpc-link[b-u0azncfugs] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--glytic-primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cpc-link:hover:not(:disabled)[b-u0azncfugs] {
    opacity: 0.8;
}

.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(--glytic-score-low, #ef4444);
}

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

/* Bevel-following outline (double-layer reveal): FILL = outline color, ::before = interior
   at z-index:-1 (isolation keeps it in this stacking context; the MudIcon child carries
   no CSS-isolation scope attribute so a scoped child-lift rule would never reach it). */
.cpc-close-btn[b-u0azncfugs] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: var(--glytic-border);
    color: var(--glytic-text-muted);
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cpc-close-btn[b-u0azncfugs]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-card, #12151f);
    z-index: -1;
    pointer-events: none;
    transition: background 0.15s;
}

.cpc-close-btn:hover[b-u0azncfugs] {
    background: var(--glytic-border-hover);
    color: var(--glytic-primary);
}

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

.file-remove-btn[b-sqzkvwyil3] {
    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;
    letter-spacing: 0.02em;
    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;
}

.saved-doc-item[b-xalerkxfpm] {
    display: flex;
    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);
}

.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: var(--glytic-primary);
    color: #fff;
}

.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;
    letter-spacing: 0.02em;
    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;
    letter-spacing: 0.02em;
    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;
}

.exam-chip[b-a6g2hpis9l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--glytic-border);
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--glytic-transition);
    white-space: nowrap;
}

.exam-chip:hover[b-a6g2hpis9l] {
    border-color: var(--glytic-border-hover);
    background: rgba(92, 168, 184, 0.06);
    color: var(--glytic-text-primary);
}

.exam-chip-active[b-a6g2hpis9l] {
    border-color: var(--glytic-primary);
    background: rgba(92, 168, 184, 0.12);
    color: var(--glytic-primary);
}

.exam-chip-active:hover[b-a6g2hpis9l] {
    background: rgba(92, 168, 184, 0.18);
}

.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(92, 168, 184, 0.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(92, 168, 184, 0.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;
}

.placement-answer-btn[b-em5xjs0xkp] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--glytic-bg-card);
    color: var(--glytic-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}

.placement-answer-btn:hover[b-em5xjs0xkp] {
    border-color: var(--glytic-border-hover);
    background: rgba(0, 255, 231, 0.04);
}

.placement-answer-btn.selected[b-em5xjs0xkp] {
    border-color: var(--glytic-primary);
    background: rgba(0, 255, 231, 0.08);
}

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

.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;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.exam-type-option:hover[b-veik3l3whp] {
    border-color: var(--glytic-border-hover);
    background: rgba(0, 255, 231, 0.04);
}

.exam-type-option.selected[b-veik3l3whp] {
    border-color: var(--glytic-primary);
    background: rgba(0, 255, 231, 0.08);
}

.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(0, 255, 231, 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;
    color: var(--glytic-text-muted);
}

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

.reorder-btn[b-u9z7myq02q] {
    background: transparent;
    border: 1px solid var(--glytic-border);
    border-radius: 4px;
    color: var(--glytic-text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--glytic-transition);
    line-height: 1;
}

.reorder-btn:hover:not(:disabled)[b-u9z7myq02q] {
    border-color: var(--glytic-primary);
    color: var(--glytic-primary);
}

.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) */
.exam-info[b-u9z7myq02q] {
    flex: 1;
    min-width: 0;
    overflow: hidden; /* prevents long titles from overlapping pin/action buttons */
    cursor: pointer;
}

.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(--glytic-border-radius-small);
    white-space: nowrap;
}

[b-u9z7myq02q] .action-primary .mud-button-icon-start,
[b-u9z7myq02q] .action-secondary .mud-button-icon-start {
    margin-right: 4px;
}

[b-u9z7myq02q] .action-secondary {
    color: var(--glytic-text-secondary);
    border-color: var(--glytic-border);
    font-weight: 500;
}

[b-u9z7myq02q] .action-secondary:hover {
    color: var(--glytic-primary);
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.06);
}

/* 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-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: 6px;
    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;
    letter-spacing: 0.3px;
}

[b-c51djl91zu] .card-actions .practice-btn {
    background: var(--forge-gradient-btn) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(200, 104, 40, 0.25);
    white-space: nowrap;
}

[b-c51djl91zu] .card-actions .practice-btn:hover {
    background: linear-gradient(135deg, #D87A38 0%, #C08828 100%) !important;
    box-shadow: 0 3px 12px rgba(200, 104, 40, 0.45);
}

/* Purple purge: Continue was a purple->blue button; now brand teal (distinct from the
   ember Practice button beside it). */
[b-c51djl91zu] .card-actions .continue-btn {
    background: linear-gradient(135deg, var(--glytic-primary) 0%, var(--glytic-primary-dark) 100%) !important;
    box-shadow: 0 2px 8px rgba(var(--glytic-primary-rgb), 0.25) !important;
}

[b-c51djl91zu] .card-actions .continue-btn:hover {
    background: linear-gradient(135deg, var(--glytic-primary-light) 0%, var(--glytic-primary-dark) 100%) !important;
    box-shadow: 0 3px 12px rgba(var(--glytic-primary-rgb), 0.45) !important;
}

@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;
    letter-spacing: 0.5px;
}

/* Section headers */
.section-header[b-tmlyeftkm7] {
    margin-bottom: 0.75rem;
}

/* Placement prompt */
.placement-prompt[b-tmlyeftkm7] {
    cursor: pointer;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0;
    transition: border-color 0.2s;
}

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

.path-tab[b-tmlyeftkm7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    text-decoration: none;
}

.path-tab:hover[b-tmlyeftkm7] {
    color: var(--glytic-text-primary);
    background: rgba(var(--glytic-primary-rgb), 0.03);
}

.path-tab.active[b-tmlyeftkm7] {
    color: var(--glytic-primary);
    border-bottom-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

/* 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: 3px solid transparent;
    margin-bottom: -2px;
    transition: border-color 0.2s, background 0.2s;
}

.path-tab-wrap.active[b-tmlyeftkm7] {
    border-bottom-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.04);
}

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

.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: 50%;
    background: transparent;
    color: var(--glytic-text-muted);
    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);
}

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

.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);
    border-radius: 6px;
    text-decoration: none;
    color: var(--glytic-text-secondary);
    background: var(--glytic-card-bg);
    transition: var(--glytic-transition);
    cursor: pointer;
}

.ce-btn:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.ce-btn.primary[b-tmlyeftkm7] {
    /* Purple purge: flat teal wash (was teal->purple). */
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.16), rgba(var(--glytic-primary-rgb), 0.05));
    border-color: var(--glytic-border-hover);
    color: var(--glytic-primary);
}

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

.ce-btn-icon[b-tmlyeftkm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--glytic-text-muted);
}

.ce-btn-icon:hover[b-tmlyeftkm7] {
    color: var(--glytic-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;
}

.coach-action-btn[b-tmlyeftkm7] {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid var(--glytic-border);
    background: var(--glytic-card-bg);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--glytic-text-secondary);
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.coach-action-btn:hover[b-tmlyeftkm7] {
    border-color: var(--glytic-border-hover);
    color: var(--glytic-text-primary);
}

.coach-action-btn.primary[b-tmlyeftkm7] {
    /* Purple purge: flat teal wash (was teal->purple). */
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.16), rgba(var(--glytic-primary-rgb), 0.05));
    border-color: var(--glytic-border-hover);
    color: var(--glytic-primary);
}

.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. Composed Strike ember CTA: cut corners,
   ink text on ember, glyph, inset focus ring (clip-path clips the outward outline). 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.6rem 1.15rem;
    min-height: 44px;
    border: none;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-family: var(--glytic-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: opacity var(--glytic-transition);
}

.dashboard-create-btn:hover[b-sq2akgb5zb] {
    opacity: 0.9;
}

.dashboard-create-btn:focus-visible[b-sq2akgb5zb] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

[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 Upsell Page ===== */
.dashboard-upsell-page[b-sq2akgb5zb] {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
    text-align: center;
}

.upsell-hero[b-sq2akgb5zb] {
    margin-bottom: 3rem;
}

.upsell-title[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    /* Purple purge: teal->ember, the two brand accents (no logo purple). */
    background: linear-gradient(135deg, var(--glytic-primary), var(--forge-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.upsell-subtitle[b-sq2akgb5zb] {
    font-size: 1.1rem;
    color: var(--glytic-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.upsell-features[b-sq2akgb5zb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.upsell-feature-card[b-sq2akgb5zb] {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem 1.5rem;
    position: relative;
    isolation: isolate;
    transition: var(--glytic-transition);
}

/* Double-layer reveal: element bg = border color; ::before paints the card 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). */
.upsell-feature-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;
}

.upsell-feature-card:hover[b-sq2akgb5zb] {
    background: var(--glytic-border-hover);
    transform: translateY(-2px);
}

.upsell-feature-card h3[b-sq2akgb5zb] {
    font-family: var(--glytic-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--glytic-text-primary);
    margin-bottom: 0.5rem;
}

.upsell-feature-card p[b-sq2akgb5zb] {
    font-size: 0.9rem;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
}

.upsell-cta[b-sq2akgb5zb] {
    margin-bottom: 2rem;
}

[b-sq2akgb5zb] .upsell-upgrade-btn {
    text-transform: none;
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    padding: 0.75rem 2.5rem;
    /* Ember primary CTA (was teal->purple gradient). */
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    min-height: 48px;
}

[b-sq2akgb5zb] .upsell-upgrade-btn:hover {
    opacity: 0.9;
}

/* Clip-path clips the outline -> inset the focus ring so it stays visible. */
[b-sq2akgb5zb] .upsell-upgrade-btn:focus-visible {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

.upsell-cta-note[b-sq2akgb5zb] {
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
    margin-top: 0.75rem;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .upsell-features[b-sq2akgb5zb] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .upsell-title[b-sq2akgb5zb] {
        font-size: 1.6rem;
    }

    .upsell-subtitle[b-sq2akgb5zb] {
        font-size: 1rem;
    }

    .upsell-feature-card[b-sq2akgb5zb] {
        padding: 1.5rem 1rem;
    }
}

/* ===== Free User Dashboard (audit 2026-07-08) ===== */
/* Real content first: streak, resume, recent activity. Premium pitch is a secondary
   section below, reusing the compact upsell-feature-card treatment above. */

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

.free-history-link[b-sq2akgb5zb] {
    display: inline-block;
    margin-top: 1rem;
    color: var(--glytic-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.free-history-link:hover[b-sq2akgb5zb] {
    text-decoration: underline;
}

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

.readiness-carry-see[b-sq2akgb5zb] {
    color: var(--glytic-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.readiness-carry-see:hover[b-sq2akgb5zb],
.readiness-carry-see:focus-visible[b-sq2akgb5zb] {
    color: var(--glytic-text-primary);
}

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

.upsell-features-compact[b-sq2akgb5zb] {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.5rem;
}

.upsell-features-compact .upsell-feature-card[b-sq2akgb5zb] {
    padding: 1.25rem 1rem;
}

@media (max-width: 768px) {
    .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%;
    }

    .upsell-features-compact[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;
}

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

/* Title -- Composed Strike display voice: Oswald, uppercase, tight leading. */
.exam-title[b-v13i15xkfg] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    font-weight: 500;
    line-height: 0.98;
    text-transform: uppercase;
    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;
}

/* 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) !important;
    color: var(--qf-ink) !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase !important;
    padding: 14px 24px !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    box-shadow: none;
    transition: var(--glytic-transition);
}

[b-v13i15xkfg] .hero-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Clip-path clips outward rings/shadows -> inset the focus ring so it survives the cut. */
[b-v13i15xkfg] .hero-cta-btn:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.hero-secondary-actions[b-v13i15xkfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 10px;
}

[b-v13i15xkfg] .hero-secondary-btn {
    position: relative;
    color: var(--glytic-text-secondary) !important;
    text-transform: none !important;
    font-weight: 500;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    /* Touch target: keep these >=44px tall on mobile (QA4-4, was ~37px). */
    min-height: 44px;
}

/* Outlined variants only: the Mud outlined border is sheared off the top-right clip-btn cut,
   so draw the outline via the double-layer reveal (button fill = outline color; ::before inset
   1px paints the interior). isolation:isolate + ::before z-index:-1 keeps the Mud-rendered
   label above the interior without any child lift rule. The Text-variant "Share" button
   carries no border, so it stays a ghost text button and is intentionally not filled. */
[b-v13i15xkfg] .hero-secondary-btn.mud-button-outlined {
    isolation: isolate;
    background: var(--glytic-border) !important;
    border: 0 !important;
}

[b-v13i15xkfg] .hero-secondary-btn.mud-button-outlined::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);
}

[b-v13i15xkfg] .hero-secondary-btn:hover {
    color: var(--glytic-primary) !important;
}

[b-v13i15xkfg] .hero-secondary-btn.mud-button-outlined:hover {
    background: var(--glytic-border-hover) !important;
}

[b-v13i15xkfg] .hero-secondary-btn:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

[b-v13i15xkfg] .hero-secondary-btn.is-pinned {
    color: var(--glytic-primary) !important;
}

[b-v13i15xkfg] .hero-secondary-btn.mud-button-outlined.is-pinned {
    background: var(--glytic-primary) !important;
}

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

/* ===== 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;
    gap: 9px;
}

.bp-dom-head[b-v13i15xkfg] {
    display: flex;
    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: break-word;
    min-width: 0;
}

.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;
    color: var(--glytic-primary);
    /* 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);
}

/* Track hugs the bar (no full-width remainder rail); the fill carries length + thickness. */
.bp-dom-track[b-v13i15xkfg] {
    display: block;
    width: 100%;
}

.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);
    /* Teal gradation: alpha rises with weight. */
    background: rgba(var(--glytic-primary-rgb), calc(0.5 + var(--bp-frac, 0) * 0.5));
    /* Angled strike end. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    transition: width var(--glytic-transition-long);
}

/* Crimson strikes only the single heaviest domain. */
.bp-dom--hot .bp-dom-fill[b-v13i15xkfg] {
    background: var(--qf-crimson);
}

.bp-dom--hot .bp-dom-pct[b-v13i15xkfg] {
    color: var(--qf-crimson-text);
}

/* 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: which mark is the strike, and what length/thickness 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%);
}

.bp-sw--teal[b-v13i15xkfg] {
    background: var(--glytic-primary);
}

.bp-sw--hot[b-v13i15xkfg] {
    background: var(--qf-crimson);
}

/* 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 (tiny icon under the pass-plate). */
.atlas-chip[b-v13i15xkfg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.72rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--glytic-text-muted);
    text-decoration: none;
}
.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);
}
.atlas-chip:hover .atlas-chip-label[b-v13i15xkfg],
.atlas-chip:focus-visible .atlas-chip-label[b-v13i15xkfg] {
    text-decoration: underline;
}

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

/* ===== 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-coverage[b-v13i15xkfg] {
    margin: 0.25rem 0 1rem;
    font-family: var(--glytic-font-body);
    font-size: 0.8rem;
    color: var(--glytic-text-secondary);
}

.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: teal alpha rises with weight via --bp-frac (same formula as
   .bp-dom-fill), and the single heaviest domain strikes crimson (same as .bp-dom--hot).
   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;
    /* Teal gradation keyed to weight -- mirrors .bp-dom-fill's alpha ramp. */
    color: var(--glytic-text);
    background: rgba(var(--glytic-primary-rgb), calc(0.14 + var(--bp-frac, 0) * 0.24));
    border-left: 3px solid rgba(var(--glytic-primary-rgb), calc(0.5 + var(--bp-frac, 0) * 0.5));
}

/* Crimson strikes the single heaviest domain -- same signal as .bp-dom--hot. */
.sample-domain-tag--hot[b-v13i15xkfg] {
    color: var(--qf-crimson-text);
    background: rgba(var(--qf-crimson-rgb), 0.14);
    border-left-color: var(--qf-crimson);
}

/* 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%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glytic-border);
    border-radius: 8px;
    transition: var(--glytic-transition);
    /* 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.88rem;
    line-height: 1.5;
    color: var(--glytic-text-secondary);
    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.25rem;
    }

    .exam-description[b-v13i15xkfg] {
        font-size: 0.85rem;
    }

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

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

    .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 ===== */
.facts-summary-inline[b-v13i15xkfg] { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); 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) !important;
    color: var(--qf-ink) !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    text-transform: uppercase !important;
    box-shadow: none;
}

[b-v13i15xkfg] .sticky-start-btn:hover {
    filter: brightness(1.08);
}

[b-v13i15xkfg] .sticky-start-btn:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* clip-btn shears the 1px border off the top-right cut, so draw the outline via the
   double-layer reveal: button fill = outline color; ::before inset 1px paints the interior
   (the sticky bar surface). The hover background tint moves onto the interior ::before. */
[b-v13i15xkfg] .sticky-flash-btn {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    color: var(--glytic-primary) !important;
    background: var(--glytic-border) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    width: 48px;
    height: 48px;
}

[b-v13i15xkfg] .sticky-flash-btn::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-card-bg);
    z-index: -1;
    pointer-events: none;
    transition: background var(--glytic-transition);
}

[b-v13i15xkfg] .sticky-flash-btn:hover {
    background: var(--glytic-border-hover) !important;
}

[b-v13i15xkfg] .sticky-flash-btn:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-card-bg);
}

[b-v13i15xkfg] .sticky-flash-btn:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* 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-color: rgba(var(--glytic-primary-rgb), 0.6);
    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] {
    opacity: 0.55;
}

.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] {
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
}

.btn-primary-large[b-i8ia8ga4n2] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-btn);
}

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Text-only element -> ::before z-index:-1 + isolation. Interior = page surface. */
.btn-secondary-large[b-i8ia8ga4n2] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large[b-i8ia8ga4n2]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover[b-i8ia8ga4n2]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

.btn-primary-large:focus-visible[b-i8ia8ga4n2],
.btn-secondary-large:focus-visible[b-i8ia8ga4n2] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

/* Bevel-following outline (double-layer reveal): a real border + clip-path shears the
   border off the cut corner. The chip FILL is the outline color and a ::before inset 1px
   paints the interior, so the outline shows as 1px on EVERY edge, the bevel included.
   Interior sits at z-index:-1 (isolation keeps it inside this stacking context) so
   MudBlazor-rendered children -- which carry no CSS-isolation scope attribute and can
   never be lifted by a scoped child rule -- still paint above it. */
.fc-chip[b-wqc46birdq] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-border);
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--glytic-transition), background var(--glytic-transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 36px;
}
.fc-chip[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-card-bg);
    transition: background var(--glytic-transition);
    z-index: -1;
    pointer-events: none;
}

.fc-chip:hover[b-wqc46birdq] { background: var(--glytic-border-hover); color: var(--glytic-text-primary); }

.fc-chip.active[b-wqc46birdq] {
    background: var(--glytic-border-hover);
    color: var(--glytic-primary);
}
/* active interior tint composited over the opaque card fill so the outline never bleeds */
.fc-chip.active[b-wqc46birdq]::before { background: var(--glytic-gradient-card), var(--glytic-card-bg); }
/* clip-path shears an outward ring -> inset focus ring */
.fc-chip:focus-visible[b-wqc46birdq] { outline: 2px solid var(--glytic-primary); outline-offset: -4px; }

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

/* 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) */
/* Bevel-following outline (double-layer reveal): a real border shears off the cut corner.
   MudButton -> ::before interior at z-index:-1, isolation keeps it inside the button's
   own stacking context so the label/ripple paint above it without any lift rule. */
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn { position: relative; isolation: isolate; border: 0; border-radius: 0; clip-path: var(--qf-clip-btn); padding: 8px 16px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(var(--qf-gold-on-bone-rgb), 0.5); color: var(--qf-gold-on-bone); transition: background 0.2s ease; }
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn::before { content: ''; position: absolute; inset: 1px; clip-path: var(--qf-clip-btn); background: linear-gradient(rgba(var(--qf-gold-on-bone-rgb), 0.06), rgba(var(--qf-gold-on-bone-rgb), 0.06)), var(--qf-bone); z-index: -1; pointer-events: none; transition: background 0.2s 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 { background: rgba(var(--qf-gold-on-bone-rgb), 0.75); }
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn:hover::before { background: linear-gradient(rgba(var(--qf-gold-on-bone-rgb), 0.12), rgba(var(--qf-gold-on-bone-rgb), 0.12)), var(--qf-bone); }
/* clip-path shears an outward ring -> inset the focus ring so it stays visible on the clipped button */
.flashcard-wrapper[b-wqc46birdq]  .explanation-source-btn:focus-visible { outline: 2px solid var(--glytic-primary); outline-offset: -4px; }
/* 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; }
.fc-show-options-btn[b-wqc46birdq] { text-transform: none; }
/* 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: cut-corner outlines, ink labels, semantic
   glyphs (square = the exam still stands; circle = mastery). */
/* Bevel-following outline (double-layer reveal): a real border + clip-path shears the border
   off the cut corner, leaving the bevel edge bare. Instead the button FILL is the outline
   color and a ::before surface inset 1px lets that fill show as a 1px outline on EVERY edge,
   the cut corner included. The interior tints on hover; the outline (outer fill) stays the
   state color. Content carries z-index 1 so it paints above the positioned ::before. */
.fc-grade-btn[b-wqc46birdq] {
    position: relative;
    isolation: isolate;
    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: 0;
    clip-path: var(--qf-clip-btn);
    border: 0;
    background: rgba(var(--qf-ink-rgb), 0.2);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--glytic-transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.fc-grade-btn[b-wqc46birdq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--qf-bone);
    transition: background var(--glytic-transition);
    /* Interior at -1 inside the button's own stacking context (isolation above): every child,
       including Mud-rendered icons that carry no scope attribute, paints above it. */
    z-index: -1;
    pointer-events: none;
}

/* Again: crimson outline + filled crimson square glyph -- the exam still stands */
.fc-grade-again[b-wqc46birdq] { background: var(--qf-crimson); }
/* Interior tint composited over bone (opaque) so the crimson outline never bleeds through. */
.fc-grade-again:hover[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.08), rgba(var(--qf-crimson-rgb), 0.08)), var(--qf-bone); }

/* Got it: teal outline + filled teal circle glyph -- mastery */
.fc-grade-gotit[b-wqc46birdq] { background: var(--glytic-primary); }
.fc-grade-gotit:hover[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--qf-bone); }

/* Easy: ember outline + ember spark -- mastered without effort */
.fc-grade-easy[b-wqc46birdq] { background: var(--forge-primary); }
.fc-grade-easy:hover[b-wqc46birdq]::before { background: linear-gradient(rgba(var(--forge-primary-rgb), 0.12), rgba(var(--forge-primary-rgb), 0.12)), var(--qf-bone); }
.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; }

/* clip-path shears an outward ring -> inset the focus ring so it stays visible */
.fc-grade-btn:focus-visible[b-wqc46birdq] { outline: 2px solid var(--glytic-primary); outline-offset: -4px; }
.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: 0;
    transition: color var(--glytic-transition);
    -webkit-tap-highlight-color: transparent;
}
.fc-aux-mark:hover[b-wqc46birdq] { color: var(--qf-ink); }
.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; }

.ai-feature-btn[b-wqc46birdq] { transition: all 0.3s ease; border-radius: 6px; }
.ai-feature-btn:hover[b-wqc46birdq] { background: rgba(var(--mud-palette-primary-rgb), 0.1); border-color: var(--glytic-primary); }

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

    .flashcard-wrapper[b-wqc46birdq]  .flashcard-card > .mud-card-content.flashcard-faces,
    .flashcard-wrapper[b-wqc46birdq]  .flashcard-faces {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 1 auto !important;
        padding: var(--fc-card-pad, 0.95rem) !important;
    }

    .question-side.hidden[b-wqc46birdq],
    .answer-side.hidden[b-wqc46birdq] {
        display: none !important;
        visibility: hidden;
    }

    .question-side:not(.hidden)[b-wqc46birdq],
    .answer-side:not(.hidden)[b-wqc46birdq] {
        display: flex !important;
        visibility: visible;
        width: 100%;
    }

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

.fc-bar-btn[b-wqc46birdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 10px;
    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:active[b-wqc46birdq],
.fc-bar-btn:focus-visible[b-wqc46birdq] {
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.fc-bar-btn.active[b-wqc46birdq] {
    color: var(--forge-gold);
}

.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] {
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
}

.btn-primary-large[b-iei1em27qu] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-btn);
}

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Text-only element -> ::before z-index:-1 + isolation. Interior = page surface. */
.btn-secondary-large[b-iei1em27qu] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large[b-iei1em27qu]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover[b-iei1em27qu]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

.btn-primary-large:focus-visible[b-iei1em27qu],
.btn-secondary-large:focus-visible[b-iei1em27qu] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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: 46rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.help-title[b-xw9pukr0pe] {
    font-family: var(--glytic-font-heading);
    font-size: 2rem;
    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-section[b-xw9pukr0pe] {
    margin-top: 2rem;
}

.help-section-title[b-xw9pukr0pe] {
    font-family: var(--glytic-font-heading);
    font-size: 1.25rem;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.help-item[b-xw9pukr0pe] {
    border-top: 1px solid var(--glytic-border);
    padding: 0.7rem 0;
}

.help-q[b-xw9pukr0pe] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--glytic-text-primary);
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.help-q[b-xw9pukr0pe]::-webkit-details-marker {
    display: none;
}

.help-a[b-xw9pukr0pe] {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--glytic-text-secondary);
}

.help-links[b-xw9pukr0pe] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-links li[b-xw9pukr0pe] {
    padding: 0.35rem 0;
}

.help-links a[b-xw9pukr0pe] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--forge-primary);
    text-decoration: none;
}

.help-links a:hover[b-xw9pukr0pe] {
    text-decoration: underline;
}
/* /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: 0 !important;
  clip-path: var(--qf-clip-btn);
  border: none !important;
  background: var(--forge-gradient-btn) !important;
  color: var(--qf-ink) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
  padding: 0.7rem 1.2rem !important;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.18s ease;
}
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:hover {
  background: var(--forge-primary) !important;
}
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:active {
  background: var(--forge-amber) !important;
}
/* clip-path clips outward outlines -- inset ring so keyboard focus is visible on the cut CTA.
   !important to beat MudBlazor's own button focus styling, matching this block's convention. */
.card-actions[b-o2gobkrroc]  .btn-start.mud-button-root:focus-visible {
  outline: 2px solid var(--glytic-primary) !important;
  outline-offset: -4px;
}
/* Arrow slides right on hover */
.card-actions[b-o2gobkrroc]  .btn-start .mud-button-icon-end {
  transition: transform 0.2s ease;
}
.card-actions[b-o2gobkrroc]  .btn-start:hover .mud-button-icon-end {
  transform: translateX(3px);
}

/* Secondary — "Details" icon button */
.card-actions[b-o2gobkrroc]  .btn-details.mud-icon-button-root {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 0 !important;
  border: 1px solid var(--qf-line) !important;
  background: transparent !important;
  color: var(--glytic-text-muted) !important;
  flex-shrink: 0;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.card-actions[b-o2gobkrroc]  .btn-details.mud-icon-button-root:hover {
  border-color: var(--glytic-primary) !important;
  color: var(--glytic-primary) !important;
  background: transparent !important;
}

/* --------- 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: uppercase;
    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: uppercase;
    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: rgba(var(--glytic-primary-rgb), 0.05);   /* tinted surface */
}

.exam-card.create-your-own-card:hover[b-o2gobkrroc] {
    background: var(--glytic-primary);
}
.exam-card.create-your-own-card:hover[b-o2gobkrroc]::before {
    background: rgba(var(--glytic-primary-rgb), 0.09);
}

/* 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] {
    padding: 0.5rem 1rem;
    isolation: isolate;
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    scroll-snap-align: start;
    color: var(--glytic-text-secondary);
    font-family: var(--glytic-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Double-layer reveal so the outline follows the 9px cut; text-only pill uses
   ::before z-index:-1 + isolation. Interior = page surface (--glytic-bg-dark). */
.pill[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    background: var(--glytic-bg-dark);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

.pill:hover[b-o2gobkrroc] {
    background: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

/* clip-path clips outward outlines -- inset ring keeps the keyboard focus visible. */
.pill:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.pill.active[b-o2gobkrroc] {
    background: var(--forge-primary);
    color: var(--qf-ink);
    font-weight: 700;
    box-shadow: none;
}

.pill.active[b-o2gobkrroc]::before {
    background: var(--forge-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;
    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-heading);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
    white-space: nowrap;
}

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

.sticky-tab.active[b-o2gobkrroc] {
    color: var(--forge-primary);
    border-bottom-color: var(--forge-primary);
}

/* 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.65rem;
        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 and distribute content top-to-bottom so any surplus height (from the
       min-height floor or grid row-equalization) spreads as even spacing instead of
       pooling into one mid-card void. Measured live: 0 gap above the button, ~24px even
       rows, uniform card heights -- on desktop and mobile. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    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;
}
.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: uppercase;
    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 */
}
/* -- 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 */
[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-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* Ember search/AI affordance (was a teal-purple gradient). Ink text on ember. */
    background: var(--forge-primary);
    border: none;
    color: var(--qf-ink);
    transition: background 0.2s;
}

[b-o2gobkrroc] .ai-search-btn-inset:hover:not(:disabled) {
    background: var(--forge-gold);
}

[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). */
[b-o2gobkrroc] .search-clear-btn-inset {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: rgba(255, 255, 255, 0.4);
    width: 22px;
    height: 22px;
}

.search-input-wrapper.has-create[b-o2gobkrroc]  .search-clear-btn-inset {
    right: 84px;
}

[b-o2gobkrroc] .search-clear-btn-inset:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* --------- 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). */
}

.recommended-item-enhanced[b-o2gobkrroc] {
    cursor: pointer;
}

.recommended-item-enhanced .mud-link[b-o2gobkrroc] {
    color: var(--glytic-text-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

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

.create-quiz-button[b-o2gobkrroc] {
    margin-top: 1rem !important;
    /* was a teal-purple gradient; flat-teal 2-stop, matches --glytic-gradient-text shape */
    background: var(--glytic-gradient-text) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px -4px rgba(var(--glytic-primary-rgb),0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.create-quiz-button:hover[b-o2gobkrroc] {
    /* Elevation pre-existed on this raised gradient CTA, so deepen the shadow but drop the
       translateY lift to match the Composed Strike hover language (QA5-3). */
    box-shadow: 0 8px 24px -6px rgba(var(--glytic-primary-rgb),0.5) !important;
}

.create-quiz-button:disabled[b-o2gobkrroc] {
    opacity: 0.6 !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* 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: uppercase;
    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: uppercase;
    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: uppercase;
    color: var(--glytic-text-muted);
    white-space: nowrap;
}

/* Sort chips: kill MudBlazor's Color.Secondary purple. Active = squared ember with
   ink text; inactive = quiet hairline. Uppercase micro-type to match the pills. */
.community-sort-row[b-o2gobkrroc]  .mud-chip {
    position: relative;
    isolation: isolate;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    font-family: var(--glytic-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0.15rem;
    /* 44px tap target (project rule, epic X5 tap-target sweep): MudBlazor's small chip
       size measured 24px tall. min-height plus flex centering keeps the label's own
       font size and the cut-corner shape unchanged. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Double-layer reveal so the chip outline follows the 9px cut; ::before z-index:-1 +
   isolation keeps the label above the interior. */
.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-text {
    background: var(--qf-line);
    color: var(--glytic-text-secondary);
    border: 0;
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-text::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    background: var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-text:hover {
    background: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-filled {
    background: var(--forge-primary);
    color: var(--qf-ink);
    border: 0;
}

.community-sort-row[b-o2gobkrroc]  .mud-chip.mud-chip-filled::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    background: var(--forge-primary);
    z-index: -1;
    pointer-events: none;
}

/* 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-size: 0.82rem;
    font-weight: 700;
    color: var(--glytic-primary);
    text-decoration: none;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.4);
    border-radius: 6px;
    padding: 0.34rem 0.85rem;
    transition: background 0.15s ease;
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

.free-nudge-cta:hover[b-o2gobkrroc] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    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] {
    color: var(--glytic-text-secondary);
    border-color: var(--glytic-border);
}

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

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

.pricing-columns[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
}

/* Composed Strike cut-corner plate via the SAFE double-layer reveal: element bg = hairline
   (--qf-line) shows only in the 1px gap the ::before leaves; ::before (inset 1px, z-index:-1 +
   isolation) paints the interior so the outline follows the bevel. No border on a clipped box. */
.pricing-col[b-o2gobkrroc] {
    position: relative;
    isolation: isolate;
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 28px 24px;
}

.pricing-col[b-o2gobkrroc]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

/* Premium plate: the outline is ember and the interior carries a faint ember tint. */
.pricing-col-premium[b-o2gobkrroc] {
    background: var(--forge-primary);
}

.pricing-col-premium[b-o2gobkrroc]::before {
    background: linear-gradient(rgba(var(--forge-primary-rgb), 0.06), rgba(var(--forge-primary-rgb), 0.06)), var(--glytic-bg-medium);
}

/* Ember poster tab with a cut corner, echoing the strike bone/ember plates. */
.pricing-popular-badge[b-o2gobkrroc] {
    /* Same placement as .popular-badge on /pricing: pinned to the card's top-right corner,
       inside the card's own cut so nothing is clipped, with a parallel 45deg diagonal. */
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    transform: none;
    z-index: 2;
    background: var(--glytic-primary);
    color: var(--qf-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 18px 5px 14px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--qf-cut)) 0, 100% var(--qf-cut), 100% 100%, 0 100%);
    white-space: nowrap;
}

.pricing-col-title[b-o2gobkrroc] {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--glytic-text-secondary);
    margin-bottom: 14px;
}

/* Bone price plate -- the same paper-on-dark motif as the hero stats strip and /pricing,
   so the two pricing surfaces read as one system. Cut corner, ink numerals. */
.pricing-col-price[b-o2gobkrroc] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
    background: var(--qf-bone);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-card);
    padding: 8px 14px;
}

.pricing-price-amount[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--qf-ink);
    line-height: 1;
}

.pricing-price-sub[b-o2gobkrroc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--qf-bone-dim);
}

.pricing-features[b-o2gobkrroc] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-features li[b-o2gobkrroc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    line-height: 1.4;
}

/* Dot bullet (strike language) -- an ember dot, not a colored check icon. */
.pricing-features li[b-o2gobkrroc]::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--forge-primary);
    box-shadow: 0 0 6px rgba(var(--forge-primary-rgb), 0.5);
    flex-shrink: 0;
    margin-top: 8px;
}

.pricing-features .pricing-feature-highlight[b-o2gobkrroc] {
    color: var(--glytic-text-primary);
    font-weight: 700;
}

.pricing-btn[b-o2gobkrroc] {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 0;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 43px, 1px short. */
    min-height: 44px;
    text-decoration: none;
    box-sizing: border-box;
}

/* Free CTA: double-layer outline so the hairline follows the cut corner (no sheared border).
   Element bg = outline color; ::before (inset 1px, z-index:-1 + isolation) = page-tinted fill. */
.pricing-btn-free[b-o2gobkrroc] {
    isolation: isolate;
    background: var(--qf-line);
    color: var(--glytic-text-primary);
    transition: background 0.15s ease, color 0.15s ease;
}

.pricing-btn-free[b-o2gobkrroc]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    z-index: -1;
    transition: background 0.15s ease;
    pointer-events: none;
}

.pricing-btn-free:hover[b-o2gobkrroc] {
    background: var(--forge-primary);
    color: var(--forge-primary);
    text-decoration: none;
}

.pricing-btn-free:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--forge-primary);
    outline-offset: -4px;
}

/* Premium CTA: solid ember clip button, matching the hero primary CTA. */
.pricing-btn-premium[b-o2gobkrroc] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    transition: background 0.18s ease;
}

.pricing-btn-premium:hover[b-o2gobkrroc] {
    background: var(--forge-primary);
    text-decoration: none;
    color: var(--qf-ink);
}

.pricing-btn-premium:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.pricing-no-card[b-o2gobkrroc] {
    font-size: 0.75rem;
    color: var(--glytic-text-muted);
    text-align: center;
    margin: 8px 0 0;
}

@media (max-width: 580px) {
    .pricing-columns[b-o2gobkrroc] {
        grid-template-columns: 1fr;
    }

    .pricing-col-premium[b-o2gobkrroc] {
        order: -1;
    }
}

/* =========================================================
   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-block;
    padding: 0.85rem 2.25rem;
    background: var(--forge-gradient-btn);
    color: #fff;
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 100px;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 24px rgba(192, 96, 48, 0.35);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 1rem;
}

.final-cta-btn:hover[b-o2gobkrroc] {
    opacity: 0.9;
    box-shadow: 0 8px 30px rgba(192, 96, 48, 0.45);
    color: #fff;
    text-decoration: none;
}

.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] {
    position: relative;
    overflow: hidden;
    /* Radial glow overlays on top of a solid dark base.
       Must include the solid base color — otherwise it inherits the page's diagonal
       gradient (qf-root background: linear-gradient fixed) and the hero blends in. */
    background:
        radial-gradient(ellipse 60% 55% at 15% 45%, rgba(var(--glytic-primary-rgb), 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 30%, rgba(var(--glytic-primary-rgb), 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--glytic-primary-rgb), 0.04) 0%, transparent 50%),
        var(--glytic-bg-dark);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.08);
}

.hero-wrapper[b-o2gobkrroc]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.hero[b-o2gobkrroc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    /* start, not center: the quiz card grows ~230px once answered (result banner,
       explanation, CTAs). With center alignment the left column re-centred in the
       taller row and the headline dropped ~60px on every answer. Top-aligned, the
       copy stays put and the card simply extends downward. */
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4rem 2.5rem 3rem;
    position: relative;
    z-index: 1;
}

/* ---- LEFT COLUMN ---- */
.hero-left[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
}

/* Composed Strike: eyebrow, not a glowing pill. Squared, muted, letter-spaced;
   a small static teal tick replaces the pulsing dot (quiet). */
.hero-badge[b-o2gobkrroc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--glytic-text-muted);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
    width: fit-content;
}

.hero-badge[b-o2gobkrroc]::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--glytic-primary);
    flex-shrink: 0;
}

.hero-headline[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading) !important; /* override any MudBlazor h1 reset */
    font-size: clamp(2rem, 3.8vw, 3rem) !important;
    font-weight: 700;
    line-height: 1.06;
    color: var(--glytic-text-primary);
    margin: 0 0 1.25rem;
    letter-spacing: 0.005em;
    text-wrap: balance;
}

/* The strike signature: the key phrase becomes a bone poster-block with a cut
   corner. Kills the old teal-purple shimmer gradient entirely. */
.hero-accent[b-o2gobkrroc] {
    display: inline-block;
    background: var(--qf-bone);
    color: var(--qf-ink);
    -webkit-text-fill-color: var(--qf-ink);
    padding: 0.03em 0.2em 0.01em;
    margin-top: 0.12em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.16em), calc(100% - 0.16em) 100%, 0 100%);
}

.hero-sub[b-o2gobkrroc] {
    font-size: clamp(0.92rem, 1.8vw, 1.02rem);
    color: var(--glytic-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 480px;
}

.hero-bullets[b-o2gobkrroc] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hero-bullets li[b-o2gobkrroc] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
}

.bullet-dot[b-o2gobkrroc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glytic-primary);
    box-shadow: 0 0 6px rgba(var(--glytic-primary-rgb), 0.5);
    flex-shrink: 0;
    margin-top: 7px;
}

.hero-cta-row[b-o2gobkrroc] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hero-btn-primary[b-o2gobkrroc] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-family: var(--glytic-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.8rem 1.7rem;
    border: none;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    cursor: pointer;
    transition: background 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.hero-btn-primary:hover[b-o2gobkrroc] {
    background: var(--forge-primary);
    color: var(--qf-ink);
    text-decoration: none;
}

/* clip-path clips outward outlines -- inset ring keeps focus visible on the cut CTA. */
.hero-btn-primary:focus-visible[b-o2gobkrroc] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.hero-btn-ghost[b-o2gobkrroc] {
    background: transparent;
    color: var(--glytic-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.8rem 1.3rem;
    border: 1px solid var(--qf-line);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.hero-btn-ghost:hover[b-o2gobkrroc] {
    border-color: var(--glytic-primary);
    background: transparent;
    color: var(--glytic-text-primary);
    text-decoration: none;
}

/* Platform stats: the quiet bone plate. Display-font numerals on paper, with
   skewed crimson dividers between the three data columns. */
.hero-stats-strip[b-o2gobkrroc] {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    background: var(--qf-bone);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-card);
    padding: 0.9rem 1.4rem;
    width: fit-content;
    max-width: 100%;
}

.hero-stat-item[b-o2gobkrroc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0 1.3rem;
    position: relative;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--qf-bone-dim);
}

.hero-stat-item:first-child[b-o2gobkrroc] {
    padding-left: 0.2rem;
}

.hero-stat-num[b-o2gobkrroc] {
    font-family: var(--glytic-font-heading);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--qf-ink);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0.01em;
}

/* Skewed crimson divider replacing the old hairline separator. */
.hero-stat-sep[b-o2gobkrroc] {
    width: 3px;
    align-self: center;
    height: 30px;
    background: var(--qf-crimson);
    transform: skewX(-14deg);
    flex-shrink: 0;
}

/* ---- RIGHT COLUMN (quiz preview card) ---- */
.hero-right[b-o2gobkrroc] {
    position: relative;
    perspective: 1200px;
    /* Sit the card level with the headline rather than the eyebrow above it
       (eyebrow line + its 1.4rem margin). Fixed offset, so nothing here depends
       on the card's answered/unanswered height. */
    padding-top: 2.4rem;
}

/* Hero preview card styles moved to HeroMiniQuiz.razor.css (component-scoped) */

/* ---- HERO RESPONSIVE ---- */
@media (max-width: 900px) {
    .hero[b-o2gobkrroc] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 2rem 2.5rem;
        text-align: center;
    }

    .hero-left[b-o2gobkrroc] {
        align-items: center;
    }

    /* The eyebrow's teal datum tick only reads as intentional beside a single line
       of left-aligned text. In the centered narrow hero the text wraps and the tick
       orphans at the left edge like a stray list bullet -- drop it here. */
    .hero-badge[b-o2gobkrroc]::before {
        display: none;
    }

    .hero-sub[b-o2gobkrroc] {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-bullets[b-o2gobkrroc] {
        text-align: left;
        max-width: 440px;
    }

    .hero-cta-row[b-o2gobkrroc] {
        justify-content: center;
    }

    .hero-stats-strip[b-o2gobkrroc] {
        justify-content: center;
    }

    .hero-right[b-o2gobkrroc] {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero[b-o2gobkrroc] {
        padding: 2rem 1.25rem 2rem;
        gap: 2rem;
    }

    .hero-headline[b-o2gobkrroc] {
        font-size: 1.6rem;
    }

    .hero-bullets li[b-o2gobkrroc] {
        font-size: 0.82rem;
    }

    .hero-cta-row[b-o2gobkrroc] {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btn-primary[b-o2gobkrroc],
    .hero-btn-ghost[b-o2gobkrroc] {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-stats-strip[b-o2gobkrroc] {
        padding: 0.75rem 1rem;
    }

    .hero-stat-item[b-o2gobkrroc] {
        padding: 0 0.7rem;
    }

    .hero-stat-num[b-o2gobkrroc] {
        font-size: 1.3rem;
    }

    .hero-stat-sep[b-o2gobkrroc] {
        height: 24px;
    }
}

/* =========================================================
   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 {
    border-color: rgba(var(--glytic-primary-rgb), 0.4) !important;
    color: var(--glytic-primary) !important;
    border-radius: 10px !important;
    padding: 0.5rem 1.8rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.2s ease;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 43px, 1px short. */
    min-height: 44px;
}

.show-more-section[b-o2gobkrroc]  .show-more-btn.mud-button-root:hover {
    background: rgba(var(--glytic-primary-rgb), 0.06) !important;
    border-color: var(--glytic-primary) !important;
}

/* =========================================================
   Merged "create your own" card -- secondary ghost CTA styling
   (cut-corner outline). The card surface/bevel is styled up top
   near the .exam-card.create-your-own-card block. */
/* Bevel-following outline via the double-layer reveal (a real border + clip-path shears the
   border off the cut corner): the button FILL is the ember outline color and a ::before surface
   inset 1px paints the card-tinted interior, so the outline shows on EVERY edge incl. the bevel.
   The label carries z-index 1 to stay above the interior; hover fills the interior ember. */
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root {
    position: relative;
    border: 0 !important;
    color: var(--forge-primary) !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    /* 44px tap target (project rule, epic X5 tap-target sweep): measured 31px tall. */
    min-height: 44px;
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    /* Interior = the card's own primary-tinted surface (0.05 over bg-medium), composited opaque
       so the ember outline never bleeds through. */
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-bg-medium);
    transition: background 0.2s ease;
    z-index: 0;
    pointer-events: none;
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta .mud-button-label {
    position: relative;
    z-index: 1;
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root:hover::before {
    background: var(--forge-primary);
}
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root:hover .mud-button-label {
    color: var(--qf-ink) !important;
}
/* clip-path shears an outward ring -> inset the focus ring so it stays visible on the bevel. */
.exam-card.create-your-own-card[b-o2gobkrroc]  .btn-ghost-cta.mud-button-root:focus-visible {
    outline: 2px solid var(--forge-primary);
    outline-offset: -4px;
}

@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],
    .hero-btn-ghost[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);
    opacity: 0.6;
    margin-top: 0.35rem;
}

/* ============================
   Section entrance animations
   ============================ */
[data-animate][b-o2gobkrroc] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].animate-in[b-o2gobkrroc] {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children inside animated sections */
[data-animate] > *[b-o2gobkrroc] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
[data-animate].animate-in > *[b-o2gobkrroc] {
    opacity: 1;
    transform: translateY(0);
}
[data-animate].animate-in > *:nth-child(2)[b-o2gobkrroc] { transition-delay: 0.1s; }
[data-animate].animate-in > *:nth-child(3)[b-o2gobkrroc] { transition-delay: 0.2s; }
[data-animate].animate-in > *:nth-child(4)[b-o2gobkrroc] { transition-delay: 0.3s; }

/* 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) {
    [data-animate][b-o2gobkrroc],
    [data-animate] > *[b-o2gobkrroc] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .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: uppercase;
    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: uppercase;
    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: uppercase;
    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-block;
    padding: 0.8rem 2.2rem;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-gold, #D07040);
    border: none;
    color: var(--qf-ink, #12100C);
    font-family: var(--glytic-font-heading);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.career-showcase-btn:hover[b-o2gobkrroc] {
    background: var(--forge-primary, #C86030);
}

.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.) */
/* /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] {
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
}

.btn-primary-large[b-24hv8wgp91] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-btn);
}

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Text-only element -> ::before z-index:-1 + isolation. Interior = page surface. */
.btn-secondary-large[b-24hv8wgp91] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large[b-24hv8wgp91]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover[b-24hv8wgp91]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

.btn-primary-large:focus-visible[b-24hv8wgp91],
.btn-secondary-large:focus-visible[b-24hv8wgp91] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

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

.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] {
    padding: 0.7rem 1.5rem;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    display: inline-block;
}

.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-block;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
}

.meth-btn-primary[b-gigo14s8i8] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border: none;
    clip-path: var(--qf-clip-btn);
}

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Text-only element -> ::before z-index:-1 + isolation. Interior = page surface. */
.meth-btn-secondary[b-gigo14s8i8] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.meth-btn-secondary[b-gigo14s8i8]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.meth-btn-secondary:hover[b-gigo14s8i8]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

.meth-btn-primary:focus-visible[b-gigo14s8i8],
.meth-btn-secondary:focus-visible[b-gigo14s8i8] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* ===== 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 -- Composed Strike restyle (Task 9).
   Money surface: clarity over drama. Cut-corner planes, one bone plate per card
   (the price numeral), ember primary CTA, teal circle glyphs, squared toggle.
   No border-radius, no purple, no decorative shapes. Elevation via drop-shadow
   because clip-path shears box-shadow. */

.pricing-page[b-jkhc64xgzq] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    min-height: calc(100vh - 64px - 4rem);
    min-height: calc(100dvh - 64px - 4rem);
}

/* -- Header -- */
.pricing-header[b-jkhc64xgzq] {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-title[b-jkhc64xgzq] {
    font-family: var(--glytic-font-heading);
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.98;
    color: var(--glytic-text-primary);
    margin: 0 0 0.75rem;
}

.pricing-subtitle[b-jkhc64xgzq] {
    color: var(--glytic-text-muted);
    font-size: 1.15rem;
    margin: 0;
    max-width: 480px;
    margin-inline: auto;
    line-height: 1.6;
}

.pricing-loading[b-jkhc64xgzq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    min-height: clamp(24rem, 60vh, 36rem);
    min-height: clamp(24rem, 60dvh, 36rem);
}

.pricing-redirect-note[b-jkhc64xgzq] {
    margin: 0;
    color: var(--glytic-text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.95rem;
}

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

/* -- Billing Toggle -- squared, ember active -- */
.billing-toggle[b-jkhc64xgzq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    padding: 0.75rem 1.5rem;
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    width: fit-content;
    margin-inline: auto;
    position: relative;
    isolation: isolate;
}

/* Double-layer reveal: element bg is the border color; ::before paints the interior so the
   "border" follows the cut corner (clip-path shears a rectangular border). 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). */
.billing-toggle[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.toggle-label[b-jkhc64xgzq] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.25s;
    user-select: none;
    cursor: pointer;
}

.toggle-label.active[b-jkhc64xgzq] {
    color: #ffffff;
    font-weight: 700;
}

.savings-badge[b-jkhc64xgzq] {
    display: inline-block;
    background: rgba(var(--glytic-primary-rgb), 0.15);
    color: var(--glytic-primary);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -- Card Layout -- Free and Premium share one row so the two price plates sit on the
      same horizontal line. Cards stretch to equal height; footers align at the bottom. */
.pricing-cards[b-jkhc64xgzq] {
    display: grid;
    /* Premium is the only card (owner review 2026-09-03); centred at the width the pair used. */
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    /* start, not the grid default stretch: stretched cards equalised to Premium's
       height and .card-body{flex:1} pooled the surplus as a void between the Free
       card's four features and its Get Started button. Content-height cards put the
       button directly under the list; the Premium badge is absolutely positioned
       inside its own card and is unaffected. */
    align-items: start;
    gap: 1.5rem;
    max-width: 920px;
    margin-inline: auto;
    padding-top: 0.5rem;
}

/* -- Base Card -- cut-corner plane, hairline border, no glow -- */
.pricing-card[b-jkhc64xgzq] {
    display: flex;
    flex-direction: column;
    background: var(--qf-line);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2.5rem 2rem;
    position: relative;
    isolation: isolate;
    transition: background 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

/* Double-layer reveal: element bg = hairline color; ::before paints the plate fill so the
   hairline 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). */
.pricing-card[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.pricing-card:hover[b-jkhc64xgzq] {
    transform: translateY(-3px);
    background: var(--glytic-border-hover);
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.45));
}

/* -- Free Card -- understated relative to Premium -- */
.free-card:hover[b-jkhc64xgzq] {
    background: rgba(255, 255, 255, 0.20);
}

/* -- Premium Card -- hero plane, teal datum border -- */
.premium-card[b-jkhc64xgzq] {
    background: var(--glytic-border-hover);
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.premium-card:hover[b-jkhc64xgzq] {
    background: var(--glytic-primary);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* -- Popular Badge -- squared teal tab nested flush into the premium card's cut
      top-right corner, out of flow so the two price plates stay on one line.
      Parent .pricing-card has clip-path var(--qf-clip-card) which clips children,
      so a flush badge with the same 18px diagonal fills the corner notch exactly
      with zero gap. -- */
.popular-badge[b-jkhc64xgzq] {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    transform: none;
    z-index: 2;
    background: var(--glytic-primary);
    color: var(--qf-ink);
    font-size: 0.7rem;
    font-weight: 700;
    /* mirrors the card's own top-right 45deg cut so the badge nests flush into
       the corner notch with a parallel diagonal; extra right padding keeps the
       text clear of the diagonal */
    clip-path: polygon(0 0, calc(100% - var(--qf-cut)) 0, 100% var(--qf-cut), 100% 100%, 0 100%);
    padding: 6px 18px 5px 14px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

/* -- Regional Badge -- squared teal outline -- */
.regional-badge[b-jkhc64xgzq] {
    text-align: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--glytic-primary);
    padding: 6px 14px;
    margin-bottom: 0.75rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border: 0;
    letter-spacing: 0.04em;
    position: relative;
    isolation: isolate;
}

.regional-badge[b-jkhc64xgzq]::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-bg-medium);
    z-index: -1;
    pointer-events: none;
}

/* -- Card Header -- */
.card-header[b-jkhc64xgzq] {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--qf-line);
    position: relative;
    z-index: 1;
}

.plan-name[b-jkhc64xgzq] {
    font-family: var(--glytic-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0 0 0.25rem;
}

.plan-tagline[b-jkhc64xgzq] {
    font-size: 0.85rem;
    color: var(--glytic-text-muted);
    margin: 0 0 1.25rem;
    font-weight: 400;
}

/* -- Price = the one bone plate per card. Ink numeral, display font, small cut. -- */
.plan-price[b-jkhc64xgzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.55rem 1.15rem 0.5rem;
    background: var(--qf-bone);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    overflow-wrap: break-word;
    word-break: break-word;
}

.price-amount[b-jkhc64xgzq] {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--qf-ink);
    letter-spacing: 0.01em;
    line-height: 0.95;
    max-width: 100%;
}

.price-period[b-jkhc64xgzq] {
    font-size: 0.9rem;
    color: var(--qf-bone-dim);
    font-weight: 600;
}

.price-monthly-equiv[b-jkhc64xgzq] {
    width: 100%;
    text-align: center;
    font-size: 0.82rem;
    color: var(--qf-bone-dim);
    margin-top: 2px;
}

/* -- Feature List -- teal circle glyph = included, muted square outline = not included -- */
.card-body[b-jkhc64xgzq] {
    position: relative;
    z-index: 1;
    flex: 1;
}

.feature-list[b-jkhc64xgzq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-item[b-jkhc64xgzq] {
    padding: 0.6rem 0 0.6rem 1.9rem;
    position: relative;
    color: var(--glytic-text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Bullet marker mirrors the .qf-glyph--correct + .qf-glyph--round primitive (quizforge.css,
   source of truth for the 13px / 2px filled teal dot; --correct is color-only and --round
   supplies the circle). Kept inline here rather than adding a markup class so the pricing
   bullet list stays plain <li>s; keep these values in sync with .qf-glyph if it changes. */
.feature-item[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 13px;
    height: 13px;
    border: 2px solid var(--glytic-primary);
    background: var(--glytic-primary);
    border-radius: 50%;
}

.feature-item.included[b-jkhc64xgzq]::before {
    border-color: var(--glytic-primary);
    background: var(--glytic-primary);
    border-radius: 50%;
}

.feature-item.disabled[b-jkhc64xgzq] {
    color: rgba(255, 255, 255, 0.30);
}

.feature-item.disabled[b-jkhc64xgzq]::before {
    border-color: var(--glytic-text-muted);
    background: transparent;
    border-radius: 0;
}

/* Cross-link in premium feature list */
.pricing-feature-link[b-jkhc64xgzq] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--glytic-primary-rgb), 0.45);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}

.pricing-feature-link:hover[b-jkhc64xgzq] {
    text-decoration-color: var(--glytic-primary);
}

/* -- Card Footer -- */
.card-footer[b-jkhc64xgzq] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--qf-line);
    position: relative;
    z-index: 1;
}

.current-plan-badge[b-jkhc64xgzq] {
    text-align: center;
    padding: 0.6rem 1rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glytic-text-muted);
    background: var(--qf-line);
    border: 0;
    margin-bottom: 0.75rem;
    position: relative;
    isolation: isolate;
}

.current-plan-badge[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

.current-plan-badge.premium[b-jkhc64xgzq] {
    color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.30);
}

.current-plan-badge.premium[b-jkhc64xgzq]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-bg-medium);
}

/* -- Buttons -- */
[b-jkhc64xgzq] .plan-btn {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    padding: 0.8rem 1.5rem;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

[b-jkhc64xgzq] .free-btn {
    border: 0 !important;
    background: var(--glytic-border) !important;
    color: var(--glytic-text-secondary) !important;
    position: relative;
    isolation: isolate;
}

/* Outlined MudButton on a cut corner: double-layer reveal (interior = the plate the button
   sits on) so the hairline follows the top-right cut. Interior at z-index:-1 under isolation --
   the Mud label needs no lift. */
[b-jkhc64xgzq] .free-btn::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    z-index: -1;
    pointer-events: none;
}

[b-jkhc64xgzq] .free-btn:hover {
    border: 0 !important;
    background: var(--glytic-border-hover) !important;
    color: var(--glytic-primary) !important;
}

[b-jkhc64xgzq] .free-btn:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-bg-medium);
}

/* Ember primary -- the plan action. Inset focus ring (clip shears an outward one). */
[b-jkhc64xgzq] .premium-btn {
    background: var(--forge-gradient-btn) !important;
    color: var(--qf-ink) !important;
    box-shadow: none !important;
}

[b-jkhc64xgzq] .premium-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

[b-jkhc64xgzq] .plan-btn:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

[b-jkhc64xgzq] .manage-btn {
    border: 0 !important;
    background: rgba(var(--glytic-primary-rgb), 0.30) !important;
    color: var(--glytic-primary) !important;
    position: relative;
    isolation: isolate;
}

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

[b-jkhc64xgzq] .manage-btn:hover {
    border: 0 !important;
    background: rgba(var(--glytic-primary-rgb), 0.45) !important;
}

[b-jkhc64xgzq] .manage-btn:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.06), rgba(var(--glytic-primary-rgb), 0.06)), var(--glytic-bg-medium);
}

/* -- Subscription Info -- */
.subscription-info[b-jkhc64xgzq] {
    text-align: center;
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--qf-line);
    border: 0;
    position: relative;
    isolation: isolate;
}

.subscription-info[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    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;
}

.cancel-notice[b-jkhc64xgzq] {
    color: var(--glytic-error);
    font-size: 0.9rem;
    margin: 0;
}

.renewal-info[b-jkhc64xgzq] {
    color: var(--glytic-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* -- Squared toggle switch -- ember when yearly is active -- */
.billing-toggle-switch[b-jkhc64xgzq] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 46px;
    /* >=44px touch target; the visual track stays 24px, vertically centered in the taller
       hit area (the transparent input fills the full 46x44 box). */
    height: 44px;
    cursor: pointer;
    flex-shrink: 0;
}

.billing-toggle-switch input[b-jkhc64xgzq] {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.toggle-slider[b-jkhc64xgzq] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.toggle-slider[b-jkhc64xgzq]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0;
    transition: transform 0.25s ease, background 0.25s ease;
}

.billing-toggle-switch input:checked + .toggle-slider[b-jkhc64xgzq] {
    background: rgba(var(--forge-primary-rgb), 0.20);
    border-color: var(--forge-primary);
}

.billing-toggle-switch input:checked + .toggle-slider[b-jkhc64xgzq]::before {
    transform: translateX(21px) translateY(-50%);
    background: var(--forge-primary);
}

.billing-toggle-switch input:focus-visible + .toggle-slider[b-jkhc64xgzq] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: 2px;
}

/* Honor reduced-motion: drop the card lift/filter animation and the toggle-thumb slide. */
@media (prefers-reduced-motion: reduce) {
    .pricing-card[b-jkhc64xgzq],
    .premium-card[b-jkhc64xgzq],
    .toggle-slider[b-jkhc64xgzq],
    .toggle-slider[b-jkhc64xgzq]::before {
        transition: none;
    }

    .pricing-card:hover[b-jkhc64xgzq],
    .premium-card:hover[b-jkhc64xgzq] {
        transform: none;
    }
}

/* -- Tablet -- */
@media (max-width: 1024px) {
    .pricing-cards[b-jkhc64xgzq] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.25rem;
        max-width: 840px;
    }

    .pricing-card[b-jkhc64xgzq] {
        padding: 2rem 1.75rem;
    }
}

/* -- Mobile -- */
@media (max-width: 768px) {
    .pricing-page[b-jkhc64xgzq] {
        padding: 2rem 1rem 4rem;
    }

    .pricing-cards[b-jkhc64xgzq] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 420px;
    }

    .pricing-title[b-jkhc64xgzq] {
        font-size: 1.9rem;
    }

    .pricing-subtitle[b-jkhc64xgzq] {
        font-size: 1rem;
    }

    .price-amount[b-jkhc64xgzq] {
        font-size: 2.35rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .plan-price[b-jkhc64xgzq] {
        gap: 4px;
        min-height: 0;
    }

    .price-period[b-jkhc64xgzq] {
        font-size: 0.82rem;
    }

    .price-monthly-equiv[b-jkhc64xgzq] {
        font-size: 0.78rem;
    }

    .pricing-card[b-jkhc64xgzq] {
        padding: 2rem 1.5rem;
    }

    .billing-toggle[b-jkhc64xgzq] {
        flex-wrap: nowrap;
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
    }

    .toggle-label[b-jkhc64xgzq] {
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .savings-badge[b-jkhc64xgzq] {
        font-size: 0.58rem;
        padding: 2px 6px;
        margin-left: 2px;
    }

    .pricing-header[b-jkhc64xgzq] {
        margin-bottom: 2rem;
    }

    .popular-badge[b-jkhc64xgzq] {
        font-size: 0.62rem;
        padding: 5px 16px 4px 12px;
    }

    .regional-badge[b-jkhc64xgzq] {
        font-size: 0.7rem;
        padding: 5px 10px;
        margin-bottom: 0.5rem;
    }

    .card-header[b-jkhc64xgzq] {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .card-footer[b-jkhc64xgzq] {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .feature-item[b-jkhc64xgzq] {
        font-size: 0.88rem;
    }

    [b-jkhc64xgzq] .plan-btn {
        min-height: 48px;
        font-size: 0.85rem;
    }

    .subscription-info[b-jkhc64xgzq] {
        padding: 1rem;
    }

    .cancel-notice[b-jkhc64xgzq],
    .renewal-info[b-jkhc64xgzq] {
        font-size: 0.82rem;
    }
}

/* -- Small phone -- */
@media (max-width: 375px) {
    .pricing-page[b-jkhc64xgzq] {
        padding: 1.5rem 0.75rem 3rem;
    }

    .pricing-cards[b-jkhc64xgzq] {
        max-width: none;
        gap: 1.5rem;
    }

    .pricing-card[b-jkhc64xgzq] {
        padding: 1.5rem 1.25rem;
    }

    .price-amount[b-jkhc64xgzq] {
        font-size: 2.1rem;
    }

    .plan-name[b-jkhc64xgzq] {
        font-size: 1.25rem;
    }

    .plan-tagline[b-jkhc64xgzq] {
        font-size: 0.8rem;
    }

    .feature-item[b-jkhc64xgzq] {
        font-size: 0.82rem;
        padding-left: 1.7rem;
    }

    .billing-toggle[b-jkhc64xgzq] {
        padding: 0.4rem 0.5rem;
    }

    .toggle-label[b-jkhc64xgzq] {
        font-size: 0.72rem;
    }

    .savings-badge[b-jkhc64xgzq] {
        font-size: 0.54rem;
        padding: 1px 5px;
    }
}

/* ========================================
   CHECKOUT-CANCELLED NOTICE (Composed Strike)
   Calm, dismissible acknowledgment when a Stripe checkout was abandoned
   (/pricing?checkout=cancelled). Teal hairline + cut corner, never alarming.
   ======================================== */
.checkout-cancelled-notice[b-jkhc64xgzq] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 720px;
    margin: 0 auto 1.5rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--glytic-primary-rgb), 0.25);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-text-secondary);
    position: relative;
    isolation: isolate;
}

.checkout-cancelled-notice[b-jkhc64xgzq]::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-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.checkout-cancelled-icon[b-jkhc64xgzq] {
    color: var(--glytic-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-cancelled-text[b-jkhc64xgzq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.checkout-cancelled-title[b-jkhc64xgzq] {
    font-family: var(--glytic-font-heading);
    color: var(--glytic-text-primary);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.checkout-cancelled-body[b-jkhc64xgzq] {
    font-size: 0.82rem;
    color: var(--glytic-text-muted);
}

.checkout-cancelled-dismiss[b-jkhc64xgzq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--glytic-text-muted);
    flex-shrink: 0;
}

.checkout-cancelled-dismiss:hover[b-jkhc64xgzq] {
    color: var(--glytic-text-primary);
}

.checkout-cancelled-dismiss:focus-visible[b-jkhc64xgzq] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

/* Free is a try-first line under the Premium button, not a card. */
.try-free-line[b-jkhc64xgzq] {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--glytic-text-secondary);
    line-height: 1.5;
}

.try-free-line a[b-jkhc64xgzq] {
    color: var(--glytic-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-right: 0.35rem;
}
/* /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: uppercase micro-type, ember active indicator ---- */
.profile-page-root[b-3p1lop5q07]  .mud-tabs .mud-tab {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.82rem;
}

.profile-page-root[b-3p1lop5q07]  .mud-tabs .mud-tab.mud-tab-active {
    color: var(--forge-primary);
}

.profile-page-root[b-3p1lop5q07]  .mud-tabs .mud-tab-slider {
    background: var(--forge-gradient-btn);
}

/* ---- Filled primary CTAs -> ember cut-corner plate, ink label ---- */
.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--forge-gradient);
}

.profile-page-root[b-3p1lop5q07]  .mud-button-filled.mud-button-filled-primary .mud-button-label,
.profile-page-root[b-3p1lop5q07]  .mud-button-filled.mud-button-filled-primary .mud-progress-circular {
    color: var(--qf-ink);
}

.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

/* Filled error (Danger Zone delete) keeps its semantic red but takes cut corners */
.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-filled.mud-button-filled-error {
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-weight: 700;
}

.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-filled.mud-button-filled-error:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* Outlined buttons (Manage / retries / history actions) -> squared hairline */
.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-outlined {
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

.profile-page-root[b-3p1lop5q07]  .mud-button-root.mud-button-outlined:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* ---- 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: squared ---- */
.profile-page-root[b-3p1lop5q07]  .mud-chip {
    border-radius: 0;
}
/* /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] {
    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] {
    display: flex;
    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%;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2);
    background: rgba(var(--glytic-primary-rgb), 0.04);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: left;
    color: inherit;
    outline: none;
}

.scenario-chip:hover[b-qhgae1fvw9] {
    border-color: rgba(var(--glytic-primary-rgb), 0.4);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.scenario-chip:focus-visible[b-qhgae1fvw9] {
    outline: 2px solid var(--glytic-primary);
    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;
}

/* Cut-corner geometry with a bevel-FOLLOWING outline (Composed Strike family). A real border
   + clip-path shears the border off the cut corner, so the outline is drawn by the double-layer
   reveal: the option FILL is the outline color and a ::before surface inset 1px is the interior,
   letting the fill show as a 1px outline on EVERY edge incl. the bevel. State (hover/selected/
   correct/wrong) recolors the outer fill; the interior tints via ::before. isolation:isolate +
   ::before z-index:-1 keeps the interior behind ALL content -- including MudBlazor-rendered
   children (result icons) that carry no scope attribute -- with no child-lift rules needed
   (a scoped `> *` lift compiles to `*[b-scope]` and silently misses Mud output). */
.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: 48px;
    padding: 0.6rem 0.85rem;
    background: rgba(148, 163, 184, 0.28);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    line-height: 1.4;
}
.quiz-tap-option[b-qhgae1fvw9]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

.quiz-tap-option:active[b-qhgae1fvw9] {
    transform: scale(0.98);
}

.quiz-tap-option:hover[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.3);
}
.quiz-tap-option:hover[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-bg-medium);
}

.quiz-tap-option.selected[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.55);
    color: #fff;
}
.quiz-tap-option.selected[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.12), rgba(var(--glytic-primary-rgb), 0.12)), var(--glytic-bg-medium);
}

.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;
}
.quiz-tap-option.locked[b-qhgae1fvw9] {
    background: rgba(148, 163, 184, 0.18);
}

/* 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 -- same double-layer bevel: outer fill = outline color, ::before
   interior = a tint composited over the opaque option surface so the outline never bleeds. */
.quiz-tap-option.result-correct[b-qhgae1fvw9] {
    background: rgba(34, 197, 94, 0.45);
    color: #86efac;
    cursor: default;
}
.quiz-tap-option.result-correct[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.15)), var(--glytic-bg-medium);
}

.quiz-tap-option.result-incorrect[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
    cursor: default;
}
.quiz-tap-option.result-incorrect[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.08)), var(--glytic-bg-medium);
}

.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] {
        align-items: flex-start;
        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: 12px;
    border: 2px solid var(--glytic-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--glytic-text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 56px;
    font-family: inherit;
}

.true-false-option:hover:not(:disabled)[b-qhgae1fvw9] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.06);
}

.true-false-option.selected[b-qhgae1fvw9] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.12);
    color: var(--glytic-primary);
    box-shadow: 0 0 12px rgba(var(--glytic-primary-rgb), 0.15);
}

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

/* 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: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--glytic-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.fm-more:hover[b-qhgae1fvw9],
.fm-more--open[b-qhgae1fvw9] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--glytic-primary);
}

/* 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: 8px;
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.fm-menu-item:hover[b-qhgae1fvw9] {
    background: rgba(255, 255, 255, 0.05);
    color: var(--glytic-text-primary);
}

.fm-menu-item--on[b-qhgae1fvw9] {
    color: var(--glytic-score-mid);
}

.fm-menu-item--quit:hover[b-qhgae1fvw9] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--glytic-error);
}

[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: ember, cut corners, ink label. Elevation via drop-shadow (a box-shadow
   would be sheared off by the clip-path). Focus ring is inset for the same reason. */
.quiz-dock-submit[b-qhgae1fvw9] {
    width: 100%;
    max-width: 460px;
    min-height: 48px;
    border: none;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-primary);
    color: var(--qf-ink);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    transition: background 0.15s, filter 0.15s;
}

.quiz-dock-submit:hover:not(:disabled)[b-qhgae1fvw9] {
    background: var(--forge-gold);
}

.quiz-dock-submit:focus-visible[b-qhgae1fvw9] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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: 46px;
    padding: 0 1.4rem;
    border: none;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-primary);
    color: var(--qf-ink);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    transition: background 0.15s, filter 0.15s;
}

.quiz-dock-next:hover[b-qhgae1fvw9] {
    background: var(--forge-gold);
}

.quiz-dock-next:focus-visible[b-qhgae1fvw9] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

/* Bevel-FOLLOWING outline via the double-layer reveal. A real `border` under this clip-path is
   sheared off the top-right cut corner (owner: "answer containers missing the border on bevels").
   Instead the option FILL is the outline color and a ::before surface inset 1px paints the
   interior, so the outline shows as 1px on EVERY edge incl. the bevel. State (hover/selected/
   correct/incorrect) recolors the outer FILL; the interior tints via ::before. This block is
   later in source than the base .quiz-tap-option double-layer above, so it wins on the live
   focus-mode answer buttons -- its ::before must be defined here too. isolation:isolate +
   ::before z-index:-1 keeps the interior behind ALL content incl. MudBlazor-rendered children
   (which carry no scope attribute, so a scoped child-lift rule would silently miss them). */
.quiz-tap-option[b-qhgae1fvw9] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.12s;
}
.quiz-tap-option[b-qhgae1fvw9]::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), var(--glytic-bg-medium);
    transition: background 0.12s;
    z-index: -1;
    pointer-events: none;
}

/* clip-path clips an outward outline -> inset the keyboard focus ring so it stays visible
   (canonical .qf-focus-inset pattern, quizforge.css). */
.quiz-tap-option:focus-visible[b-qhgae1fvw9] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.quiz-tap-option:hover:not(.result-correct):not(.result-incorrect):not(.result-neutral):not(.selected)[b-qhgae1fvw9] {
    background: rgba(255, 255, 255, 0.16);
}

/* 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 outline (fill) + faint ember interior 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] {
    background: var(--forge-primary);
}
.quiz-tap-option.selected[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(var(--forge-primary-rgb), 0.06), rgba(var(--forge-primary-rgb), 0.06)), var(--glytic-bg-medium);
}

.quiz-tap-option.selected .qf-glyph[b-qhgae1fvw9] {
    border-color: var(--forge-primary);
}

/* Correct -- teal outline (fill) + teal interior wash; the glyph (qf-glyph--correct) fills teal.
   Shape stays what the question type dictates. */
.quiz-tap-option.result-correct[b-qhgae1fvw9] {
    background: rgba(var(--glytic-primary-rgb), 0.6);
    cursor: default;
}
.quiz-tap-option.result-correct[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.07), rgba(var(--glytic-primary-rgb), 0.07)), var(--glytic-bg-medium);
}

/* Wrong -- the user's incorrect pick: crimson outline (fill) + crimson interior wash; glyph is
   qf-glyph--wrong (filled crimson). Shape follows question type. */
.quiz-tap-option.result-incorrect[b-qhgae1fvw9] {
    background: rgba(var(--qf-crimson-rgb), 0.6);
    cursor: default;
}
.quiz-tap-option.result-incorrect[b-qhgae1fvw9]::before {
    background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.06), rgba(var(--qf-crimson-rgb), 0.06)), var(--glytic-bg-medium);
}

/* 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-primary);
    cursor: pointer;
}

.fm-source-open:hover[b-qhgae1fvw9] {
    text-decoration: underline;
}

/* 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: 28px;
    height: 28px;
    margin: 0 0 0.5rem auto;
    padding: 0;
    border: 1px solid rgba(var(--qf-gold-rgb), 0.35);
    border-radius: 6px;
    background: rgba(var(--qf-gold-rgb), 0.06);
    color: var(--qf-gold);
    cursor: pointer;
    transition: border-color 0.15s ease, background 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] {
    border: 1px solid var(--glytic-border-hover);
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.quiz-resume-fresh:hover[b-qhgae1fvw9] {
    border-color: var(--glytic-primary);
}

.quiz-resume-dismiss[b-qhgae1fvw9] {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--glytic-text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

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

.primary-button[b-vom2p5ti1q] {
    height: 48px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(var(--glytic-primary-rgb), 0.3);
    transition: all 0.3s ease;
}
.primary-button:hover:not(:disabled)[b-vom2p5ti1q] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--glytic-primary-rgb), 0.4);
}

.secondary-buttons[b-vom2p5ti1q] { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: nowrap; }
.secondary-button[b-vom2p5ti1q] { text-transform: none; font-weight: 500; border-radius: 8px; 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 -> ember cut-corner plate with ink label */
.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: 0;
    clip-path: var(--qf-clip-btn);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.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: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

@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-block;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
    text-decoration: none;
    text-align: center;
}

.btn-primary-large[b-gs33du5b6i] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-btn);
}

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

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Element bg = outline color; ::before (text-only element -> z-index:-1 + isolate) =
   interior (transparent base -> page surface --glytic-bg-dark). */
.btn-secondary-large[b-gs33du5b6i] {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    color: var(--glytic-primary);
    border: 0;
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large[b-gs33du5b6i]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover[b-gs33du5b6i]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-dark);
}

.btn-primary-large:focus-visible[b-gs33du5b6i],
.btn-secondary-large:focus-visible[b-gs33du5b6i] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

.del-related-link[b-gs33du5b6i] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    max-width: 100%;
    padding: 10px 20px;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
}

/* Double-layer reveal so the hairline follows the cut corner; text-only link. */
.del-related-link[b-gs33du5b6i]::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-bg-dark);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.del-related-link:hover[b-gs33du5b6i] {
    background: var(--glytic-border-hover);
}

.del-related-link:hover[b-gs33du5b6i]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.12), rgba(var(--glytic-primary-rgb), 0.12)), var(--glytic-bg-dark);
}

.del-related-link:focus-visible[b-gs33du5b6i] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* -- 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;
    padding: 0.85rem 1rem;
    background: var(--glytic-card-bg);
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    color: var(--glytic-text-primary);
    cursor: pointer;
    transition: var(--glytic-transition);
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.5;
}

.training-option:hover[b-5d9u06wodv] {
    border-color: var(--glytic-border-hover);
    background: rgba(255, 255, 255, 0.03);
}

.training-option.selected[b-5d9u06wodv] {
    border-color: 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;
}

[b-5d9u06wodv] .submit-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary)) !important;
    color: var(--glytic-bg-dark) !important;
    border-radius: 8px !important;
    min-height: 44px;
    padding: 8px 24px !important;
}

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

[b-ksyroouxvk] .brief-continue-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary)) !important;
    color: var(--glytic-bg-dark) !important;
    border-radius: 8px !important;
    min-height: 44px;
}

@media (max-width: 600px) {
    .concept-brief[b-ksyroouxvk] {
        padding: 1rem;
    }

    [b-ksyroouxvk] .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;
}

/* Toggle button */
.followup-toggle[b-l94st5y48n] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    padding: 0.5rem 0.85rem;
    color: var(--glytic-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    width: 100%;
    justify-content: center;
}

.followup-toggle:hover[b-l94st5y48n] {
    border-color: var(--glytic-primary);
    color: var(--glytic-primary);
}

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

.followup-send[b-l94st5y48n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary));
    color: var(--glytic-bg-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

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

[b-jcgm7ww8ct] .mid-continue-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary)) !important;
    color: var(--glytic-bg-dark) !important;
    border-radius: 8px !important;
    min-height: 44px;
}

@media (max-width: 600px) {
    .mid-session-card[b-jcgm7ww8ct] {
        padding: 1rem;
    }

    .mid-stats[b-jcgm7ww8ct] {
        gap: 1.25rem;
    }

    [b-jcgm7ww8ct] .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;
}

[b-lyew4a87ns] .next-btn {
    text-transform: none !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary)) !important;
    color: var(--glytic-bg-dark) !important;
    border-radius: 8px !important;
    min-height: 44px;
    padding: 8px 24px !important;
}

@media (max-width: 600px) {
    .result-card[b-lyew4a87ns] {
        padding: 1rem;
    }

    .result-actions[b-lyew4a87ns] {
        justify-content: stretch;
    }

    [b-lyew4a87ns] .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;
}

[b-kaksgml541] .primary-cta {
    text-transform: none;
    font-weight: 600;
    background: linear-gradient(135deg, var(--glytic-primary), var(--glytic-secondary));
    color: var(--glytic-bg-dark);
    border-radius: 8px;
    min-height: 44px;
    padding: 8px 24px;
}

@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] .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: 38px;
    padding: 9px 18px;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease;
}

.welcome-premium-cta:hover[b-91uasuj9b9] {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* clip-path shears an outward focus ring -> inset it. */
.welcome-premium-cta:focus-visible[b-91uasuj9b9] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

.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] {
    background: transparent;
    border: none;
    color: var(--qf-bone-dim);
    cursor: pointer;
    padding: 4px;
    display: grid;
    place-items: center;
    border-radius: 0;
    flex-shrink: 0;
}

.welcome-premium-dismiss:hover[b-91uasuj9b9] {
    color: var(--qf-ink);
    background: rgba(var(--qf-ink-rgb), 0.08);
}

/* 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);
    transform: translateY(-2px);
    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);
    transform: translateY(-1px);
}

.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);
    transform: translateY(-1px);
    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);
}

.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: uppercase;
    letter-spacing: 0.5px;
    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: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;
}

.exit-button[b-98e7uj9rll] {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exit-button:hover[b-98e7uj9rll] {
    background: rgba(255, 59, 48, 0.2);
    border-color: rgba(255, 59, 48, 0.5);
    transform: translateY(-1px);
}

.admin-chip[b-98e7uj9rll] {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: rgba(76, 175, 80, 0.9);
    font-weight: 600;
}

/* Responsive adjustments for admin actions */
@media (max-width: 768px) {
    .admin-actions[b-98e7uj9rll] {
        padding-left: 10px;
        gap: 8px;
    }

    .admin-chip[b-98e7uj9rll] {
        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;
    }
}

.admin-mobile-hamburger[b-98e7uj9rll] {
    color: var(--glytic-primary);
    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 */
.qf-user-card[b-ujh0m27qmk] {
    border: 1px solid var(--glytic-border);
    border-radius: var(--glytic-border-radius-small);
    background: var(--glytic-card-bg);
}

.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, #12100C);
    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;
}

.a11y-seg-btn[b-b8cr3ljtkp] {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-radius: 999px;
    background: transparent;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.82rem;
    cursor: pointer;
}

.a11y-seg-btn.is-on[b-b8cr3ljtkp] {
    border-color: var(--glytic-primary, #5CA8B8);
    background: rgba(92, 168, 184, 0.15);
    color: var(--glytic-text-primary, #f0f0f0);
    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: 46px;
    border: 1px solid var(--glytic-border, rgba(92, 168, 184, 0.22));
    border-radius: var(--glytic-border-radius-small, 12px);
    background: transparent;
    color: var(--glytic-text-secondary, #e0e0e0);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

.a11y-close:hover[b-b8cr3ljtkp] { border-color: var(--glytic-border-hover, rgba(92, 168, 184, 0.45)); }

.a11y-seg-btn:focus-visible[b-b8cr3ljtkp],
.a11y-check:focus-visible[b-b8cr3ljtkp],
.a11y-close:focus-visible[b-b8cr3ljtkp] {
    outline: 2px solid var(--glytic-primary, #5CA8B8);
    outline-offset: 2px;
}

@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). Ember plate + cut corner is applied from the global
   auth-surfaces block in quizforge.css (scoped CSS cannot reach the MudButton element);
   this rule is kept purple-free and squared for token hygiene. */
.auth-prompt__btn-primary[b-4rgqq9s24t] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-weight: 700;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
}

/* 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;
    color: #8a8a8a;
    margin: 0;
}

.cert-disclaimer-en[b-rmbwt3tz0j] {
    margin-top: 0.35rem;
    opacity: 0.72;
}

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

.creative-name-card[b-s2wf9ueomt] {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(102, 126, 234, 0.05);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.creative-name-card:hover[b-s2wf9ueomt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.4);
}

.creative-name-card.selected-card[b-s2wf9ueomt] {
    background: rgba(102, 126, 234, 0.15);
    border: 2px solid rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

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

    .creative-name-card[b-s2wf9ueomt] {
        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);
}

.topic-button[b-0xl5ifwby6] {
    transition: all 0.2s ease;
    border-radius: 6px;
    text-transform: none;
    font-weight: 400;
}

.topic-button:hover[b-0xl5ifwby6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.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;
    justify-content: center;
    height: 40px;
    width: 100%;
}

.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(--glytic-error);
    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 ---- */
.dt-submit-btn[b-aga73mwlrd] {
    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%;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    color: var(--glytic-text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = the state's outline color; ::before = interior
   (z-index:-1 + isolation; children need no lift). */
.dt-answer[b-aga73mwlrd]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-surface);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.dt-answer:hover:not(:disabled)[b-aga73mwlrd] {
    background: var(--glytic-border-hover);
}

.dt-answer:hover:not(:disabled)[b-aga73mwlrd]::before {
    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: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.dt-answer:disabled[b-aga73mwlrd] {
    cursor: default;
}

.dt-answer--correct[b-aga73mwlrd] {
    background: var(--glytic-success);
    color: var(--glytic-text-primary);
}

.dt-answer--correct[b-aga73mwlrd]::before {
    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] {
    background: var(--qf-crimson);
    color: var(--glytic-text-primary);
}

.dt-answer--wrong[b-aga73mwlrd]::before {
    background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.12), rgba(var(--qf-crimson-rgb), 0.12)), var(--glytic-surface);
}

.dt-answer--dim[b-aga73mwlrd] {
    opacity: 0.5;
}

/* Select-all-that-apply: chosen-but-not-yet-checked state */
.dt-answer--selected[b-aga73mwlrd] {
    background: var(--glytic-primary);
    color: var(--glytic-text-primary);
}

.dt-answer--selected[b-aga73mwlrd]::before {
    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);
}

.dt-tutor-unlock[b-aga73mwlrd] {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-decoration: none;
    border: 1px solid var(--glytic-border);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    padding: 0.4rem 0.95rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dt-tutor-unlock:hover[b-aga73mwlrd] {
    border-color: var(--glytic-border-hover);
    background: rgba(var(--glytic-primary-rgb), 0.08);
}

.dt-tutor-unlock:focus-visible[b-aga73mwlrd] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* ---- MudButton overrides (Composed Strike) ----
   The submit + premium-gate CTAs are MudButton Filled Primary; the full 3-class
   selector (0,3,0) outranks MudBlazor's own filled-primary rule with no !important.
   Ember gradient fill + ink text + cut-corner button geometry. */
[b-aga73mwlrd] .mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    transition: background 0.2s ease;
}

[b-aga73mwlrd] .mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

[b-aga73mwlrd] .mud-button-root.mud-button-filled.mud-button-filled-primary:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* Outlined "Check answer" buttons -- keep the teal ghost look, add cut-corner geometry. */
[b-aga73mwlrd] .mud-button-root.mud-button-outlined.mud-button-outlined-primary {
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

[b-aga73mwlrd] .mud-button-root.mud-button-outlined.mud-button-outlined-primary:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

[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, #e0e0e0);
    border: 1px solid var(--glytic-border, rgba(var(--glytic-primary-rgb), 0.15));
    border-radius: 4px;
    text-transform: uppercase;
}

[b-7w4twwps3g] .lang-btn:hover {
    border-color: var(--glytic-primary, var(--glytic-primary));
    color: var(--glytic-primary, var(--glytic-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;
}

.certification-option-card[b-9noxuakgbb] {
    transition: all 0.3s ease;
    border-radius: 12px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.certification-option-card[b-9noxuakgbb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 200, 81, 0.1) 0%, rgba(0, 200, 81, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.certification-option-card:hover[b-9noxuakgbb] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 200, 81, 0.3);
    border-color: rgba(0, 200, 81, 0.6);
}

.certification-option-card:hover[b-9noxuakgbb]::before {
    opacity: 1;
}

.certification-option-card.selected-card[b-9noxuakgbb] {
    background: rgba(0, 200, 81, 0.15);
    border: 2px solid rgba(0, 200, 81, 0.8);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 200, 81, 0.4);
}

.certification-option-card.selected-card[b-9noxuakgbb]::before {
    opacity: 1;
}

.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 */
/* PremiumUpsellDialog -- Composed Strike restyle (Task 9).
   Content lives inside DialogContent (carries this component's scope attribute), so
   these rules reach it even though MudDialog teleports the paper. The paper/panel
   itself (cut-corner shell) is styled globally in quizforge.css keyed on
   .premium-upsell-shell. One bone value plate (the question-count detail), ember
   primary CTA, teal ghost secondary, no purple, no decorative shapes.

   MudText / MudButton render their own root element that does NOT inherit this
   component's scope attribute, so anything keyed on a Mud component's Class is
   reached through ::deep from the scoped .premium-upsell-dialog root. */

.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: 0 !important;
    clip-path: var(--qf-clip-btn);
    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). Inset focus ring survives the corner cut. */
.upsell-actions[b-xynifshkum]  .upsell-plan-primary {
    background: var(--forge-gradient-btn) !important;
    color: var(--qf-ink) !important;
    box-shadow: none !important;
}

.upsell-actions[b-xynifshkum]  .upsell-plan-primary:hover {
    filter: brightness(1.08);
}

.upsell-actions[b-xynifshkum]  .upsell-plan:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--glytic-primary);
    font-size: 14px;
    font-weight: 500;
}

.minimized-header:hover[b-bgqgi7e470] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
}

.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;
    cursor: pointer;
    transition: background 0.2s ease;
}

.minimized-toast-item:hover[b-bgqgi7e470] {
    background: rgba(var(--glytic-primary-rgb), 0.15);
}

.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] {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
}

.pwa-install-btn:hover[b-gfxo8bk5cl] {
    opacity: 0.85;
}

.pwa-install-primary[b-gfxo8bk5cl] {
    background: var(--glytic-primary);
    color: var(--glytic-bg-dark);
}

.pwa-install-dismiss[b-gfxo8bk5cl] {
    background: transparent;
    color: var(--glytic-text-secondary);
    border: 1px solid var(--glytic-border);
}

@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 -- brand-emblem orbit loader.
   A centred QuizForge emblem PNG with two counter-rotating arc rings orbiting it:
   a teal comet-tail ring spinning one way and an ember ring spinning the other.
   Small + Monochrome fall back to the ring-only orbit (no emblem). */

.qf-spinner[b-lq39d5z8yb] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 0;
}

/* Square orbit stage: the emblem is centred inside; the rings cover the whole box. */
.qf-spinner-orbit[b-lq39d5z8yb] {
    position: relative;
    display: block;
    width: var(--qf-spinner-size, 44px);
    height: var(--qf-spinner-size, 44px);
}

/* Centred brand emblem, sized to leave a ring gap around it. */
.qf-spinner-emblem[b-lq39d5z8yb] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 58%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    border-radius: 16%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    user-select: none;
    pointer-events: none;
}

/* The rings SVG sits on top of the emblem and fills the orbit box. */
.qf-spinner-rings[b-lq39d5z8yb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Faint full-circle track the arcs ride on. */
.qf-spin-track[b-lq39d5z8yb] {
    fill: none;
    stroke: rgba(var(--glytic-primary-rgb, 92, 168, 184), 0.28);
    stroke-width: 5;
}

.qf-spin-arc[b-lq39d5z8yb] {
    fill: none;
    stroke-width: 5;
}

/* Outer comet-tail ring: bright teal head with a faint teal trail behind it. */
.qf-spin-arc-outer[b-lq39d5z8yb] {
    stroke: var(--glytic-primary, #5CA8B8);
}
.qf-spin-arc-tail[b-lq39d5z8yb] {
    stroke: var(--glytic-primary, #5CA8B8);
    opacity: 0.25;
}

/* Inner counter-ring in ember -- warm accent against the dark emblem. */
.qf-spin-arc-inner[b-lq39d5z8yb] {
    stroke: var(--forge-primary, #C86030);
    stroke-width: 4.5;
}

/* Rotors spin about the true SVG centre (50,50). Outer clockwise, inner counter. */
.qf-spin-rotor[b-lq39d5z8yb] {
    transform-box: view-box;
    transform-origin: 50px 50px;
    will-change: transform;
}
.qf-spin-rotor-outer[b-lq39d5z8yb] {
    animation: qf-spin-rotate-b-lq39d5z8yb 2.4s linear infinite;
}
.qf-spin-rotor-inner[b-lq39d5z8yb] {
    animation: qf-spin-rotate-rev-b-lq39d5z8yb 2s linear infinite;
}

@keyframes qf-spin-rotate-b-lq39d5z8yb {
    to { transform: rotate(360deg); }
}
@keyframes qf-spin-rotate-rev-b-lq39d5z8yb {
    to { transform: rotate(-360deg); }
}

/* Monochrome mode: rings ride the inherited text colour (currentColor) so the spinner
   reads as ink on a filled/coloured CTA. Emblem is not rendered in this mode. */
.qf-spinner-mono .qf-spin-track[b-lq39d5z8yb] {
    stroke: currentColor;
    opacity: 0.3;
}
.qf-spinner-mono .qf-spin-arc-outer[b-lq39d5z8yb],
.qf-spinner-mono .qf-spin-arc-tail[b-lq39d5z8yb] {
    stroke: currentColor;
}
.qf-spinner-mono .qf-spin-arc-inner[b-lq39d5z8yb] {
    stroke: currentColor;
    opacity: 0.6;
}

/* 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 orbit -- gentle opacity pulse of the whole mark instead. */
@media (prefers-reduced-motion: reduce) {
    .qf-spin-rotor[b-lq39d5z8yb] {
        animation: none;
    }
    .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/QuizWizardDialog.razor.rz.scp.css */
.wizard-actions[b-slok935hyz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wizard-actions[b-slok935hyz]  .mud-button-root {
    min-height: 42px;
}
/* /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-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    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);
    transform: translateY(-2px);
}

.scroll-to-top-btn:active[b-mbqqxsr45y] {
    transform: translateY(0);
}

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

.topic-card[b-v7aqoyfhsc] {
    transition: all 0.3s ease;
    border-radius: 12px;
    min-height: 64px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* Unselected state - plain background */
.topic-card-unselected[b-v7aqoyfhsc] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}

.topic-card-unselected:hover[b-v7aqoyfhsc] {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Selected state - blue glassy background matching logo palette */
.topic-card-selected[b-v7aqoyfhsc] {
    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);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--forge-primary-rgb), 0.2);
    backdrop-filter: blur(8px);
    position: relative;
}

.topic-card-selected[b-v7aqoyfhsc]::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 */
.topic-card.official-mode.topic-card-selected[b-v7aqoyfhsc] {
    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);
    box-shadow: 0 8px 24px rgba(var(--forge-primary-rgb), 0.2);
}

.topic-card.official-mode.topic-card-selected[b-v7aqoyfhsc]::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 */
.topic-card.official-mode.topic-card-unselected:hover[b-v7aqoyfhsc] {
    border-color: rgba(var(--forge-primary-rgb), 0.3);
    box-shadow: 0 4px 16px rgba(var(--forge-primary-rgb), 0.15);
}

/* Required topic indicator */
.topic-card.topic-required[b-v7aqoyfhsc] {
    border-left: 4px solid var(--mud-palette-warning);
}

.topic-card.topic-required.topic-card-selected[b-v7aqoyfhsc] {
    border-left: 4px solid rgba(255, 193, 7, 0.8);
}

/* 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 */
.topic-card-selected[b-v7aqoyfhsc]::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;
    }

    .topic-card[b-v7aqoyfhsc] {
        min-height: 48px;
    }

    .topic-name[b-v7aqoyfhsc] {
        font-size: 0.9rem;
    }

    .topic-description[b-v7aqoyfhsc] {
        font-size: 0.8rem;
    }
}

.topic-card:active[b-v7aqoyfhsc] {
    transform: translateY(-1px) 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/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, #12100C);
    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/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;
}

.path-label[b-qydf8bnqcr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.5px;
}

.path-label-current[b-qydf8bnqcr] {
    color: rgba(var(--glytic-primary-rgb), 0.6);
    font-weight: 600;
}

.path-cert-link[b-qydf8bnqcr] {
    color: rgba(var(--glytic-primary-rgb), 0.7);
    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.45);
}

.path-name[b-qydf8bnqcr] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    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/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;
}

/* ---- 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. */
.hero-answer-opt[b-bsr8jpcch2],
.hero-answer-opt-btn[b-bsr8jpcch2] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 0;
    font-size: 0.78rem;
    color: var(--glytic-text-secondary);
    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;
    background: transparent;
    color: var(--glytic-text-secondary);
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.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.05);
    border-color: rgba(var(--glytic-primary-rgb), 0.25);
    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-color: rgba(var(--glytic-primary-rgb), 0.6);
    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: 2px solid var(--glytic-primary);
    outline-offset: -2px;
}

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

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

.hero-quiz-signup-btn[b-bsr8jpcch2] {
    display: block;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: var(--glytic-font-body);
    text-align: center;
    padding: 0.6rem 1rem;
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

.hero-quiz-signup-btn:hover[b-bsr8jpcch2] {
    background: var(--forge-primary);
    color: var(--qf-ink);
    text-decoration: none;
}

.hero-quiz-retry-btn[b-bsr8jpcch2] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--glytic-text-muted);
    border: 1px solid var(--qf-line);
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--glytic-font-body);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-quiz-retry-btn:hover[b-bsr8jpcch2] {
    border-color: var(--glytic-primary);
    color: var(--glytic-text-secondary);
}

/* Keyboard focus rings. The signup CTA carries clip-path (outward outline clipped away),
   so both use an inset ring that stays inside the shape (WCAG 2.4.7). */
.hero-quiz-signup-btn:focus-visible[b-bsr8jpcch2],
.hero-quiz-retry-btn:focus-visible[b-bsr8jpcch2] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

.landing-try-cat-pill[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    /* 44px tap target (project rule, epic X5 tap-target sweep). */
    min-height: 44px;
}

/* Double-layer reveal so the outline follows the bevel; text-only element uses
   ::before z-index:-1 + isolation. Interior = nearest solid surface (--glytic-bg-medium). */
.landing-try-cat-pill[b-24rfmb1ze4]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

.landing-try-cat-pill:hover:not(:disabled)[b-24rfmb1ze4] {
    background: var(--glytic-primary);
    color: var(--glytic-primary);
}

.landing-try-cat-pill.active[b-24rfmb1ze4] {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    font-weight: 700;
}

.landing-try-cat-pill.active[b-24rfmb1ze4]::before {
    background: var(--forge-gradient-btn);
}

.landing-try-cat-pill:focus-visible[b-24rfmb1ze4] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

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

.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;
    isolation: isolate;
    padding: 12px 14px;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    border: 0;
    background: var(--glytic-border);
    transition: background 0.15s ease;
    min-height: 48px;
}

/* Double-layer reveal: element bg = the state's outline color; ::before = the
   tinted interior (base tint 0.04 over the card surface). Border follows the bevel.
   z-index:-1 + isolation; children need no lift. */
.landing-try-answer[b-24rfmb1ze4]::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, #1a2235);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

/* 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: var(--glytic-primary);
}

.landing-try-answer-btn:hover:not(:disabled)[b-24rfmb1ze4]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.08), rgba(var(--glytic-primary-rgb), 0.08)), var(--glytic-card-bg, #1a2235);
}

.landing-try-answer-btn.selected[b-24rfmb1ze4] {
    background: var(--glytic-primary);
}

.landing-try-answer-btn.selected[b-24rfmb1ze4]::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.14), rgba(var(--glytic-primary-rgb), 0.14)), var(--glytic-card-bg, #1a2235);
}

.landing-try-answer-btn:focus-visible[b-24rfmb1ze4] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.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) tokens */
.landing-try-answer.correct[b-24rfmb1ze4] {
    background: var(--glytic-score-pass);
}

.landing-try-answer.correct[b-24rfmb1ze4]::before {
    background: linear-gradient(rgba(var(--glytic-score-pass-rgb), 0.1), rgba(var(--glytic-score-pass-rgb), 0.1)), var(--glytic-card-bg, #1a2235);
}

.landing-try-answer.wrong[b-24rfmb1ze4] {
    background: var(--qf-crimson);
}

.landing-try-answer.wrong[b-24rfmb1ze4]::before {
    background: linear-gradient(rgba(var(--qf-crimson-rgb), 0.1), rgba(var(--qf-crimson-rgb), 0.1)), var(--glytic-card-bg, #1a2235);
}

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

.landing-try-check-btn[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--forge-gradient-btn);
    border: none;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--qf-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 32px;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 48px;
}

.landing-try-check-btn:hover:not(:disabled)[b-24rfmb1ze4] {
    background: var(--forge-gradient);
}

.landing-try-check-btn:focus-visible[b-24rfmb1ze4] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

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

.landing-try-signup-btn[b-24rfmb1ze4] {
    display: inline-block;
    background: var(--forge-gradient-btn);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--qf-ink);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 28px;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
    min-height: 48px;
    line-height: 24px;
}

.landing-try-signup-btn:hover[b-24rfmb1ze4] {
    background: var(--forge-gradient);
    text-decoration: none;
}

.landing-try-signup-btn:focus-visible[b-24rfmb1ze4] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

.landing-try-retry-btn[b-24rfmb1ze4] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    color: var(--glytic-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Double-layer reveal; text-only element uses ::before z-index:-1 + isolation. */
.landing-try-retry-btn[b-24rfmb1ze4]::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.15s ease;
    z-index: -1;
    pointer-events: none;
}

.landing-try-retry-btn:hover[b-24rfmb1ze4] {
    background: var(--glytic-primary);
    color: var(--glytic-primary);
}

.landing-try-retry-btn:focus-visible[b-24rfmb1ze4] {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

/* 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 */
.admin-btn[b-pfzgsvw0zf] {
    background: rgba(255, 167, 38, 0.1) !important;
    border: 1px solid rgba(255, 167, 38, 0.3) !important;
    color: #ffa726 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.admin-btn:hover[b-pfzgsvw0zf] {
    background: rgba(255, 167, 38, 0.2) !important;
    border-color: #ffa726 !important;
    /* Composed Strike: border + background shift only, no translate lift (QA5-3). */
}

/* User Menu - Composed Strike: squared hairline chip, teal label */
.user-menu-btn[b-pfzgsvw0zf] {
    background: transparent !important;
    border: 1px solid var(--qf-line) !important;
    color: var(--glytic-primary) !important;
    border-radius: 0 !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    transition: border-color 0.18s ease, color 0.18s ease !important;
}

.user-menu-btn:hover[b-pfzgsvw0zf] {
    background: transparent !important;
    border-color: var(--glytic-primary) !important;
    color: var(--glytic-primary) !important;
    transform: none;
    box-shadow: none !important;
}

/* 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)
   outrank the shared .auth-expand-btn pill rules defined later in this file. */
.login-btn.auth-expand-btn[b-pfzgsvw0zf] {
    background: transparent !important;
    border: 0 !important;
    color: var(--glytic-text-muted) !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase !important;
    box-shadow: none;
    backdrop-filter: none;
    transition: color 0.18s ease !important;
}

.login-btn.auth-expand-btn:hover[b-pfzgsvw0zf] {
    background: transparent !important;
    color: var(--glytic-text-primary) !important;
    box-shadow: none !important;
    transform: none;
}

.register-btn.auth-expand-btn.accent[b-pfzgsvw0zf] {
    background: var(--forge-gradient-btn) !important;
    border: 0 !important;
    color: var(--qf-ink) !important;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    padding: 8px 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase !important;
    box-shadow: none;
    backdrop-filter: none;
    transition: background 0.18s ease !important;
}

.register-btn.auth-expand-btn.accent:hover[b-pfzgsvw0zf] {
    background: var(--forge-gold) !important;
    color: var(--qf-ink) !important;
    box-shadow: none !important;
    transform: none;
}

/* clip-path shears an outward focus ring; the shared .auth-expand-btn:focus-visible uses a
   positive offset. Inset the ring on this clipped ember CTA so it follows the cut corner. */
.register-btn.auth-expand-btn.accent:focus-visible[b-pfzgsvw0zf] {
    outline: 2px solid var(--qf-ink);
    outline-offset: -4px;
}

/* Mobile Menu Button */
.mobile-menu-btn[b-pfzgsvw0zf] {
    background: transparent !important;
    border: 1px solid var(--qf-line) !important;
    color: var(--glytic-text-primary) !important;
    border-radius: 0 !important;
    transition: border-color 0.18s ease, color 0.18s ease !important;
}

.mobile-menu-btn:hover[b-pfzgsvw0zf] {
    background: transparent !important;
    border-color: var(--glytic-primary) !important;
    color: var(--glytic-primary) !important;
}

/* 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 */
.brand-home-btn:focus-visible[b-pfzgsvw0zf],
.login-btn:focus-visible[b-pfzgsvw0zf],
.register-btn:focus-visible[b-pfzgsvw0zf],
.user-menu-btn:focus-visible[b-pfzgsvw0zf],
.admin-btn:focus-visible[b-pfzgsvw0zf] {
    outline: 2px solid var(--glytic-primary) !important;
    outline-offset: 2px !important;
}

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

/* The Sign-up CTA carries clip-path: var(--qf-clip-btn); an outward outline (offset:2px above)
   is clipped away and invisible. Inset the ring so keyboard focus stays visible on the cut CTA. */
.register-btn.auth-expand-btn.accent:focus-visible[b-pfzgsvw0zf] {
    outline: 2px solid var(--glytic-primary) !important;
    outline-offset: -4px !important;
}


/* 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 (clickable MudButton) */
[b-pfzgsvw0zf] .pro-badge {
    background: var(--forge-gradient-btn) !important;
    color: var(--qf-ink) !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.14em;
    border-radius: 0 !important;
    clip-path: var(--qf-clip-btn);
    padding: 3px 10px !important;
    min-width: 0 !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

[b-pfzgsvw0zf] .pro-badge:hover {
    background: var(--forge-gold) !important;
    box-shadow: none !important;
}

/* 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 {
    /* Composed Strike nav: body face, uppercase, muted -> text on hover with a teal 2px datum. */
    color: var(--glytic-text-muted) !important;
    font-family: var(--glytic-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase !important;
    padding: 6px 6px !important;
    border-radius: 0 !important;
    position: relative;
    transition: color 0.18s ease !important;
}

[b-pfzgsvw0zf] .nav-link-btn:hover {
    color: var(--glytic-text-primary) !important;
    background: transparent !important;
}

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

[b-pfzgsvw0zf] .nav-link-active::after {
    transform: scaleX(1);
}

@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-gold) !important;
    font-weight: 600 !important;
    position: relative;
}

[b-pfzgsvw0zf] .nav-link-forge:hover {
    color: var(--forge-gold) !important;
    background: transparent !important;
}

/* Forge upgrade link in mobile drawer - quiet ember to match desktop */
[b-pfzgsvw0zf] .nav-drawer-forge {
    color: var(--forge-gold) !important;
    font-weight: 600;
}

[b-pfzgsvw0zf] .nav-drawer-forge .mud-nav-link-icon {
    color: var(--forge-gold) !important;
}

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

/* 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: 2fr 1fr 1fr;
    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.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    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.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    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);
}

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

/* 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: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.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] {
    transform: translateY(-4px);
    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 */
.comment-icon-inline[b-r5ln2jwwt3] {
    padding: 4px !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Comment count - minimal */
.comment-count-inline[b-r5ln2jwwt3] {
    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;
    }

    .comment-icon-inline[b-r5ln2jwwt3] {
        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;
}
.quiz-guide-button[b-r2pfidr60n] {
    background: linear-gradient(90deg, var(--glytic-primary) 0%, #0071c1 100%) !important;
    color: #181824 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px var(--glytic-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
.quiz-guide-button:hover[b-r2pfidr60n] {
    background: linear-gradient(90deg, var(--glytic-primary) 0%, #00ffb3 100%) !important;
    box-shadow: 0 0 24px var(--glytic-primary) !important;
}
@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/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[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;
    }

    .cleanup-btn[b-ybyp2aqg7d] {
        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;
    }

    .reset-btn[b-ybyp2aqg7d] {
        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;
}

.filter-toggle-btn[b-ybyp2aqg7d] {
    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: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    background: rgba(var(--glytic-bg-dark-rgb, 12, 16, 24), 0.6);
    color: var(--glytic-text-secondary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tts-close:hover[b-dmk2wy7tak],
.tts-close:focus-visible[b-dmk2wy7tak] {
    color: var(--glytic-text-primary);
    border-color: var(--glytic-primary);
    outline: none;
}

/* ---- 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;
    padding: 9px 16px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.5);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--glytic-primary);
    text-decoration: none;
}

.tts-cta:hover[b-dmk2wy7tak],
.tts-cta:visited[b-dmk2wy7tak] {
    color: var(--glytic-primary);
}

.tts-cta:hover[b-dmk2wy7tak] {
    background: rgba(var(--glytic-primary-rgb), 0.1);
    border-color: var(--glytic-primary);
}

/* ---- 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-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;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--glytic-primary);
    text-decoration: none;
}

.tt-cta:hover[b-flpwwevvsb] {
    color: var(--glytic-secondary);
    text-decoration: underline;
}

/* /register is usually already visited; keep the CTA on brand instead of the UA visited purple. */
.tt-cta:visited[b-flpwwevvsb] {
    color: var(--glytic-primary);
}

/* 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: 8px 16px;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.4);
    border-radius: 8px;
    font-size: 0.85rem;
}

.tt-card--lg .tt-cta:hover[b-flpwwevvsb] {
    border-color: var(--glytic-primary);
    background: rgba(var(--glytic-primary-rgb), 0.08);
    text-decoration: none;
}

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

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