@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/CourseCard.razor.rz.scp.css */
/* CourseCard — Fase 3 Week 3 preview-on-intent overlay.
   Consuma tokens da wwwroot/css/design-system/tokens.css (globale).
   Additivo: non sostituisce le classi .course-*-premium esistenti, solo
   aggiunge il layer preview video sopra il thumbnail. */

.course-card-premium[b-w83t4zt3ju] {
    position: relative;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}

.course-card-premium:hover[b-w83t4zt3ju],
.course-card-premium:focus-visible[b-w83t4zt3ju] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.course-card-premium:focus-visible[b-w83t4zt3ju] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.course-thumbnail-premium[b-w83t4zt3ju] {
    position: relative;
    overflow: hidden;
}

/* Preview video layer: assoluto sopra il PictureImg, stessa aspect ratio.
   Renderizzato solo quando _showPreview=true, con fade-in breve per evitare
   pop visivo. Video e' aria-hidden perche' decorativo. */
.course-preview-video[b-w83t4zt3ju] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    animation: course-preview-fade-in-b-w83t4zt3ju var(--duration-normal) var(--ease-out-expo) forwards;
    pointer-events: none;
}

@keyframes course-preview-fade-in-b-w83t4zt3ju {
    to { opacity: 1; }
}

/* z-index stacking: .course-card-premium:hover applica transform e crea nuovo
   stacking context. Video (z:1) e overlay (z:2) vivono nello stesso context
   figlio — gerarchia corretta. NOTA: aggiungere un z-index su
   .course-thumbnail-premium romperebbe l'ordine. Non farlo. */

/* Stato "is-previewing": il play-btn resta visibile al primo livello,
   sopra il video, come indicatore hover. Il badge di durata si sposta
   leggermente per non sovrapporsi al video. */
.course-card-premium.is-previewing .course-overlay-premium[b-w83t4zt3ju] {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgb(0 0 0 / 0.2) 70%,
        rgb(0 0 0 / 0.4) 100%
    );
    z-index: 2;
}

/* Reduced motion: il video non arriva nemmeno nel DOM (gate C#), ma per
   sicurezza disabilitiamo anche la transizione card. */
@media (prefers-reduced-motion: reduce) {
    .course-card-premium[b-w83t4zt3ju],
    .course-card-premium:hover[b-w83t4zt3ju],
    .course-card-premium:focus-visible[b-w83t4zt3ju] {
        transform: none !important;
        transition: box-shadow var(--duration-fast) linear !important;
    }
    .course-preview-video[b-w83t4zt3ju] {
        animation: none !important;
    }
}
/* /Components/Design/AmbientGlow.razor.rz.scp.css */
/* AmbientGlow — CSS isolation (Fase 3 Week 7, 2026-04-21)
   Usa CSS custom properties --ambient-l / --ambient-c / --ambient-h scritte
   dal worker ambient-glow.worker.js via ambient-glow.js. Se il worker non e'
   attivo, le var non sono definite e il fallback oklch() cade su var defaults. */

/* Le @property dichiarano i tipi delle CSS var: senza, `transition: background`
   su radial-gradient non anima in Safari < 17.2 / Chrome < 117. Con @property,
   i browser che supportano interpolano le var individuali e il gradient segue. */
@supports (background: paint(something)) {} /* placeholder per raggruppare feature support */

@property --ambient-l {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 40%;
}
@property --ambient-c {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.08;
}
@property --ambient-h {
    syntax: '<number>';
    inherits: true;
    initial-value: 260;
}

.ambient-glow[b-jm7a7ku0aq] {
    position: relative;
    /* Default: colore neutro quando il worker non e' ancora partito o e'
       disabilitato. Il worker lo sovrascrive a 4 Hz con il colore dominante. */
    --ambient-radius: 32px;
}

.ambient-glow__halo[b-jm7a7ku0aq] {
    position: absolute;
    inset: calc(var(--ambient-radius) * -1);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        oklch(var(--ambient-l) var(--ambient-c) var(--ambient-h) / 0.45) 0%,
        oklch(var(--ambient-l) var(--ambient-c) var(--ambient-h) / 0.15) 50%,
        transparent 70%
    );
    filter: blur(var(--ambient-radius));
    /* Con @property i browser che supportano interpolano le var: Chrome 85+,
       Safari 16.4+, Firefox 128+. I browser senza supporto @property snappano
       tra i colori senza animazione fluida — accettabile (non peggiora la UX
       rispetto a nessuna transition). */
    transition: --ambient-l var(--duration-slow) var(--ease-out-expo),
                --ambient-c var(--duration-slow) var(--ease-out-expo),
                --ambient-h var(--duration-slow) var(--ease-out-expo);
    will-change: background;
}

.ambient-glow__content[b-jm7a7ku0aq] {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow__halo[b-jm7a7ku0aq] {
        transition: none !important;
        /* Mantiene il colore neutro: niente update dinamico (il JS si auto-disabilita
           ma una protezione CSS-side e' ridondante gratis). */
        background: oklch(40% 0.08 260 / 0.2);
    }
}
/* /Components/Design/HeroCinematic.razor.rz.scp.css */
/* HeroCinematic — CSS isolation (Fase 3 Week 4, 2026-04-21)
   Consuma tokens globali da wwwroot/css/design-system/tokens.css
   e riusa le keyframes/recipes da motion.css (il-hero-cinematic__title,
   il-pulse-cta, il-press, il-fade-rise).

   Architettura layer (bottom-up):
     1. <video> o <div.hero-cinematic-gradient>   (background, aria-hidden)
     2. <div.hero-cinematic-scrim>                 (overlay scuro per contrasto)
     3. <div.hero-cinematic-content>               (testo + CTA, interattivo)
*/

.hero-cinematic-layout[b-6u8n028unj] {
    position: relative;
    width: 100%;
    min-height: 540px;
    height: 90vh;
    max-height: 900px;
    overflow: hidden;
    color: var(--color-text-on-brand);
    border-radius: 0; /* full-bleed di default; il consumer puo' override con --radius-xl */
    isolation: isolate;
}

/* === Layer 1: background ============================================= */

.hero-cinematic-video[b-6u8n028unj],
.hero-cinematic-gradient[b-6u8n028unj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-cinematic-video[b-6u8n028unj] {
    object-fit: cover;
}

.hero-cinematic-gradient[b-6u8n028unj] {
    background:
        radial-gradient(circle at 20% 30%, var(--color-brand-500) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--color-accent-500) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 100%);
    /* background-size applicato a tutti e 3 i layer per animare coerentemente
       background-position; senza la forma plurale solo l'ultimo layer (linear)
       si muoveva e il drift effect era invisibile sui due radial. */
    background-size: 200% 200%, 200% 200%, 200% 200%;
    animation: hero-gradient-drift-b-6u8n028unj 30s linear infinite;
}

/* Quando il video e' soppresso (Save-Data), il gradient e' la sola fonte
   visuale di sfondo: manteniamo tutta l'opacita'. Quando il video e' attivo,
   il gradient passa sotto il video e funge da colore di fondo durante
   il caricamento del poster. */
.hero--video-suppressed .hero-cinematic-gradient[b-6u8n028unj] {
    opacity: 1;
}

@keyframes hero-gradient-drift-b-6u8n028unj {
    0%   { background-position: 0% 0%,     100% 100%, 0% 0%; }
    50%  { background-position: 50% 50%,   50% 50%,   100% 100%; }
    100% { background-position: 0% 0%,     100% 100%, 0% 0%; }
}

/* === Layer 2: scrim =================================================== */

.hero-cinematic-scrim[b-6u8n028unj] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgb(0 0 0 / 0.15) 0%,
        rgb(0 0 0 / 0.35) 60%,
        rgb(0 0 0 / 0.55) 100%
    );
    pointer-events: none;
}

/* === Layer 3: content ================================================= */

.hero-cinematic-content[b-6u8n028unj] {
    position: relative;
    z-index: 2;
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-24) var(--space-6) var(--space-16);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
}

.hero-cinematic-eyebrow[b-6u8n028unj] {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-300);
    margin: 0;
}

.hero-cinematic-title[b-6u8n028unj] {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 800;
    margin: 0;
    max-width: 20ch;
    /* text-shadow per leggibilita' su video con contenuti chiari */
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.3);
}

.hero-cinematic-subtitle[b-6u8n028unj] {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 42ch;
    color: oklch(96% 0.02 260);
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}

.hero-cinematic-cta[b-6u8n028unj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-accent-500);
    color: var(--color-neutral-900);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    transition: background var(--duration-fast) var(--ease-out-expo),
                transform var(--duration-fast) var(--ease-out-expo);
    margin-top: var(--space-4);
}

.hero-cinematic-cta:hover[b-6u8n028unj],
.hero-cinematic-cta:focus-visible[b-6u8n028unj] {
    background: var(--color-accent-300);
    transform: translateY(-2px);
}

.hero-cinematic-cta:focus-visible[b-6u8n028unj] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 4px;
}

.hero-cinematic-cta-icon[b-6u8n028unj] {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

.hero-cinematic-cta:hover .hero-cinematic-cta-icon[b-6u8n028unj] {
    transform: translateX(4px);
}

.hero-cinematic-cta-secondary[b-6u8n028unj] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    color: var(--color-text-on-brand);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    font-weight: 500;
    transition: text-decoration-color var(--duration-fast) var(--ease-out-expo);
}

.hero-cinematic-cta-secondary:hover[b-6u8n028unj] {
    text-decoration-color: var(--color-accent-300);
}

/* === Responsive ======================================================= */

@media (max-width: 48rem) {
    .hero-cinematic-layout[b-6u8n028unj] {
        height: 70vh;
        min-height: 440px;
    }
    .hero-cinematic-content[b-6u8n028unj] {
        padding: var(--space-16) var(--space-4) var(--space-12);
    }
    .hero-cinematic-title[b-6u8n028unj] {
        font-size: var(--text-4xl);
    }
    .hero-cinematic-subtitle[b-6u8n028unj] {
        font-size: var(--text-base);
    }
}

/* === Reduced motion & Save-Data ======================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-cinematic-gradient[b-6u8n028unj] {
        animation: none !important;
    }
    .hero-cinematic-cta:hover[b-6u8n028unj] {
        transform: none !important;
    }
    .hero-cinematic-cta-icon[b-6u8n028unj] {
        transition: none !important;
    }
    /* Il <video> autoplay e' un'animazione continua: gli utenti con reduced
       motion meritano un'opzione di pausa. In MVP restiamo sul render del
       video (muted, aria-hidden) perche' e' sfondo decorativo, ma una Fase
       successiva dovrebbe aggiungere un bottone pause. */
}
/* /Components/Design/InstantSearch.razor.rz.scp.css */
/* InstantSearch — CSS isolation (Fase 3 Week 5, 2026-04-21)
   Consuma tokens da wwwroot/css/design-system/tokens.css. */

.instant-search[b-q1hosxnc80] {
    position: relative;
    width: 100%;
    max-width: 36rem;
    font-family: var(--font-sans);
}

.instant-search-input-wrapper[b-q1hosxnc80] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    transition: border-color var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.instant-search.is-open .instant-search-input-wrapper[b-q1hosxnc80],
.instant-search-input-wrapper:focus-within[b-q1hosxnc80] {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 3px oklch(62% 0.18 260 / 0.15);
}

.instant-search-icon[b-q1hosxnc80] {
    padding: 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    pointer-events: none;
}

.instant-search-input[b-q1hosxnc80] {
    flex: 1;
    padding: var(--space-3) 0;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    outline: none;
}

.instant-search-input[b-q1hosxnc80]::placeholder {
    color: var(--color-text-secondary);
}

.instant-search-clear[b-q1hosxnc80] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-out-expo);
}

.instant-search-clear:hover[b-q1hosxnc80] {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

/* === Dropdown ========================================================= */

.instant-search-dropdown[b-q1hosxnc80] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: instant-search-appear-b-q1hosxnc80 var(--duration-fast) var(--ease-out-expo);
}

@keyframes instant-search-appear-b-q1hosxnc80 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.instant-search-status[b-q1hosxnc80] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.instant-search-spinner[b-q1hosxnc80] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-brand-500);
    border-radius: 50%;
    animation: instant-search-spin-b-q1hosxnc80 0.6s linear infinite;
}

@keyframes instant-search-spin-b-q1hosxnc80 {
    to { transform: rotate(360deg); }
}

.instant-search-list[b-q1hosxnc80] {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    max-height: 24rem;
    overflow-y: auto;
}

.instant-search-item[b-q1hosxnc80] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-instant) linear;
}

.instant-search-item.is-highlighted[b-q1hosxnc80],
.instant-search-item:hover[b-q1hosxnc80] {
    background: var(--color-surface-1);
}

.instant-search-item-title[b-q1hosxnc80] {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

.instant-search-item-meta[b-q1hosxnc80] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.instant-search-see-all[b-q1hosxnc80] {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: var(--color-surface-1);
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-brand-500);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--duration-instant) linear;
}

.instant-search-see-all:hover[b-q1hosxnc80] {
    background: var(--color-surface-2);
}

@media (prefers-reduced-motion: reduce) {
    .instant-search-dropdown[b-q1hosxnc80],
    .instant-search-spinner[b-q1hosxnc80] {
        animation: none !important;
    }
}
/* /Components/Design/MiniPlayer.razor.rz.scp.css */
/* MiniPlayer — CSS isolation (Fase 3 Week 6, 2026-04-21) */

.mini-player[b-ree3gm6tic] {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 22rem;
    max-width: calc(100vw - var(--space-8));
    background: var(--color-surface-0);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    z-index: var(--z-toast);
    display: grid;
    grid-template-rows: auto auto;
    font-family: var(--font-sans);
}

.mini-player-video-wrapper[b-ree3gm6tic] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-neutral-900);
}

.mini-player-video[b-ree3gm6tic] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.mini-player-info[b-ree3gm6tic] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

.mini-player-title[b-ree3gm6tic] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-player-subtitle[b-ree3gm6tic] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-player-actions[b-ree3gm6tic] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    z-index: 2;
}

.mini-player-btn[b-ree3gm6tic] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.5);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background var(--duration-fast) var(--ease-out-expo);
    backdrop-filter: blur(6px);
}

.mini-player-btn:hover[b-ree3gm6tic],
.mini-player-btn:focus-visible[b-ree3gm6tic] {
    background: rgb(0 0 0 / 0.75);
}

.mini-player-btn:focus-visible[b-ree3gm6tic] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 48rem) {
    .mini-player[b-ree3gm6tic] {
        width: calc(100vw - var(--space-4));
        right: var(--space-2);
        bottom: var(--space-2);
    }
}

/* Nascondi visualmente ma mantiene <video> nel DOM: necessario quando la
   finestra PiP e' attiva. Rimuovere l'elemento romperebbe il PiP (spec W3C). */
.mini-player--pip-hidden[b-ree3gm6tic] {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(50%);
}
/* /Components/Design/ProgressRing.razor.rz.scp.css */
/* ProgressRing — CSS isolation (Fase 3 Week 8, 2026-04-21) */

.progress-ring[b-5hwq5d4dt5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
}

.progress-ring svg[b-5hwq5d4dt5] {
    display: block;
}

.progress-ring-track[b-5hwq5d4dt5] {
    stroke: var(--color-surface-2);
    stroke-width: 8;
}

.progress-ring-fill[b-5hwq5d4dt5] {
    /* Gradient SVG non implementato nel template (MVP usa tinta piatta brand).
       Per il futuro: aggiungere <defs><linearGradient id="progress-gradient">
       nel componente SVG e scrivere `stroke: url(#progress-gradient) var(--color-brand-500);`. */
    stroke: var(--color-brand-500);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--duration-slow) var(--ease-out-expo);
}

.progress-ring-content[b-5hwq5d4dt5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.progress-ring-percent[b-5hwq5d4dt5] {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.progress-ring-label[b-5hwq5d4dt5] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-align: center;
    max-width: 70%;
}

@media (prefers-reduced-motion: reduce) {
    .progress-ring-fill[b-5hwq5d4dt5] {
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Design/StreakCounter.razor.rz.scp.css */
/* StreakCounter — CSS isolation (Fase 3 Week 8, 2026-04-21)
   Consuma tokens da wwwroot/css/design-system/tokens.css. */

.streak-counter[b-1sxfg620qg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5, var(--space-4));
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.streak-counter:hover[b-1sxfg620qg] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.streak-flame[b-1sxfg620qg] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-flame svg[b-1sxfg620qg] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-neutral-400);
    transition: fill var(--duration-normal) var(--ease-out-expo);
}

.streak-aura[b-1sxfg620qg] {
    fill: none;
    stroke: var(--color-accent-500);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
    opacity: 0.6;
    transform-origin: center;
    animation: streak-aura-rotate-b-1sxfg620qg 12s linear infinite;
}

@keyframes streak-aura-rotate-b-1sxfg620qg {
    to { transform: rotate(360deg); }
}

.streak-content[b-1sxfg620qg] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.streak-number[b-1sxfg620qg] {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

.streak-label[b-1sxfg620qg] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.streak-milestone[b-1sxfg620qg] {
    margin-left: auto;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--color-accent-500);
    color: var(--color-neutral-900);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* === Milestone states ================================================= */

.streak--warm .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-brand-500);
    filter: drop-shadow(0 0 4px oklch(62% 0.18 260 / 0.4));
}

.streak--hot .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-accent-500);
    filter: drop-shadow(0 0 6px oklch(78% 0.17 50 / 0.5));
    animation: streak-flame-flicker-b-1sxfg620qg 1.6s ease-in-out infinite;
}

.streak--legendary .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-accent-500);
    filter: drop-shadow(0 0 8px oklch(78% 0.17 50 / 0.6));
    animation: streak-flame-flicker-b-1sxfg620qg 1.2s ease-in-out infinite;
}

@keyframes streak-flame-flicker-b-1sxfg620qg {
    0%, 100% { transform: scale(1)   rotate(0deg); }
    25%      { transform: scale(1.04) rotate(-1deg); }
    75%      { transform: scale(0.98) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .streak-aura[b-1sxfg620qg],
    .streak--hot .streak-flame-path[b-1sxfg620qg],
    .streak--legendary .streak-flame-path[b-1sxfg620qg] {
        animation: none !important;
    }
    .streak-counter:hover[b-1sxfg620qg] {
        transform: none !important;
    }
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
.language-selector[b-1zspn4htnx] {
    position: relative;
}
.language-btn[b-1zspn4htnx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--text-color, #333);
    transition: border-color 0.2s, background-color 0.2s;
}
.language-btn:hover[b-1zspn4htnx] {
    border-color: var(--primary-color, #6C3CE1);
}
.language-dropdown[b-1zspn4htnx] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius, 0.375rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 160px;
}
.language-option[b-1zspn4htnx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-color, #333);
    transition: background-color 0.15s;
}
.language-option:hover[b-1zspn4htnx] {
    background: var(--hover-bg, #f5f5f5);
}
.language-option.active[b-1zspn4htnx] {
    font-weight: 600;
    color: var(--primary-color, #6C3CE1);
}
.flag[b-1zspn4htnx] { font-size: 1.125rem; }
@media (max-width: 767px) {
    .language-btn[b-1zspn4htnx] { width: 32px; height: 32px; font-size: 1rem; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout — Scoped Blazor CSS
   Mobile-first layout shell for InsightLearn
   ========================================================================== */

/* Full-height flex column so the footer is always pushed to the bottom */
.page[b-0q6sklxopc] {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    /* iOS Safari dynamic viewport unit — real-time toolbar adjustment */
    min-height: 100dvh;
}

main[b-0q6sklxopc] {
    -webkit-flex: 1;
    flex: 1;
    /* Prevent horizontal scroll caused by wide child elements */
    overflow-x: hidden;
    /* Default top padding for the fixed header (64px).
       Safe-area-aware override is in the index.html critical inline CSS. */
    padding-top: 64px;
}

/* Skip link — visible only on keyboard focus (accessibility) */
[b-0q6sklxopc] .skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: #6C3CE1;
    color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: top 0.2s ease;
    transition: top 0.2s ease;
    /* Respect safe area in case header is under the notch */
    top: calc(-100% + env(safe-area-inset-top, 0px));
}

[b-0q6sklxopc] .skip-link:focus {
    top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   Chatbot FAB — safe area bottom offset on iOS
   ========================================================================== */
[b-0q6sklxopc] .chatbot-fab {
    /* Shift the FAB above the iPhone home indicator */
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    /* Minimum touch target */
    min-width: 56px;
    min-height: 56px;
    /* Tap highlight override */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    [b-0q6sklxopc] .chatbot-fab {
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ==========================================================================
   Mobile — reduce content padding on xs screens
   ========================================================================== */
@media (max-width: 575px) {
    main[b-0q6sklxopc] {
        padding-top: 56px; /* header is slightly shorter on xs */
    }
}

/* ==========================================================================
   Header grid — xs: logo + hamburger only (hide search/nav links)
   ========================================================================== */
@media (max-width: 575px) {
    [b-0q6sklxopc] .header-search-section,
    [b-0q6sklxopc] .desktop-only {
        display: none !important;
    }

    [b-0q6sklxopc] .main-header-container {
        grid-template-columns: 1fr auto !important;
    }
}

/* ==========================================================================
   Header grid — sm/md: hide text labels, keep icons
   ========================================================================== */
@media (min-width: 576px) and (max-width: 991px) {
    [b-0q6sklxopc] .header-search-section {
        display: none;
    }

    [b-0q6sklxopc] .main-header-container {
        grid-template-columns: auto 1fr !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu — Scoped Blazor CSS
   Sidebar navigation styles for InsightLearn (used in legacy sidebar views)
   The primary navigation in v3.x is the top header in MainLayout.razor.
   This file retains backward-compatible styles for any pages that still
   render a NavMenu sidebar, while fixing mobile & Safari issues.
   ========================================================================== */

/* Sidebar brand header */
.sidebar-header[b-es2zvr9ud4] {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand[b-es2zvr9ud4] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.brand-icon[b-es2zvr9ud4] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #fff;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.brand-tagline[b-es2zvr9ud4] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
    padding-left: 0.125rem;
}

/* Scrollable sidebar nav */
.sidebar-nav[b-es2zvr9ud4] {
    overflow-y: auto;
    overflow-x: hidden;
    /* iOS momentum scrolling */
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 5rem);
    height: calc(100dvh - 5rem);
    padding: 0.5rem 0;
}

/* Nav sections */
.nav-section[b-es2zvr9ud4] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-section:last-child[b-es2zvr9ud4] {
    border-bottom: none;
}

.nav-section-title[b-es2zvr9ud4] {
    padding: 0.625rem 1rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

.nav-list[b-es2zvr9ud4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav items — generous touch target */
.nav-item[b-es2zvr9ud4] {
    padding: 0;
    font-size: 0.9375rem;
}

.nav-item[b-es2zvr9ud4]  a,
.nav-item[b-es2zvr9ud4]  .nav-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    /* Apple HIG: minimum 44px touch target */
    min-height: 44px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    -webkit-transition: background 0.15s ease, color 0.15s ease;
    transition: background 0.15s ease, color 0.15s ease;
    /* Remove 300ms iOS tap delay */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-item[b-es2zvr9ud4]  a:hover,
.nav-item[b-es2zvr9ud4]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-item[b-es2zvr9ud4]  a.active,
.nav-item[b-es2zvr9ud4]  .nav-link.active {
    background: rgba(108, 60, 225, 0.35);
    color: #fff;
    font-weight: 600;
}

.nav-icon[b-es2zvr9ud4] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

.nav-item[b-es2zvr9ud4]  a.active .nav-icon,
.nav-item[b-es2zvr9ud4]  .nav-link.active .nav-icon {
    color: #c4b5fd;
}

/* Auth section CTA styles */
.nav-auth-section .nav-link-primary[b-es2zvr9ud4]  a,
.nav-auth-section[b-es2zvr9ud4]  a.nav-link-primary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-auth-section .nav-link-cta[b-es2zvr9ud4]  a,
.nav-auth-section[b-es2zvr9ud4]  a.nav-link-cta {
    background: #6C3CE1;
    color: #fff;
    font-weight: 700;
}

/* Footer section */
.nav-footer[b-es2zvr9ud4] {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
    /* iPhone home indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   Responsive — sidebar hidden on mobile (header hamburger used instead)
   ========================================================================== */

@media (max-width: 767px) {
    .sidebar-nav[b-es2zvr9ud4] {
        /* On mobile the sidebar is not visible — navigation is via the
           MainLayout hamburger menu panel. This hides any legacy sidebar
           component that may be rendered inside admin pages. */
        height: calc(100dvh - 4rem);
    }
}

@media (min-width: 768px) {
    .sidebar-nav[b-es2zvr9ud4] {
        height: calc(100vh - 5rem);
        height: calc(100dvh - 5rem);
    }
}

/* Legacy Blazor scaffold — kept for backward compatibility with any page
   that still imports these class names via Bootstrap or Blazor template */
.navbar-toggler[b-es2zvr9ud4] {
    background-color: rgba(255, 255, 255, 0.1);
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.top-row[b-es2zvr9ud4] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand[b-es2zvr9ud4] {
    font-size: 1.1rem;
}

/* nav-scrollable — legacy sidebar scroll container */
.nav-scrollable[b-es2zvr9ud4] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Use dvh so the scrollable area adjusts when iOS toolbar appears */
    height: calc(100dvh - 3.5rem);
}

@media (min-width: 641px) {
    .navbar-toggler[b-es2zvr9ud4] {
        display: none;
    }

    .collapse[b-es2zvr9ud4] {
        display: block;
    }

    .nav-scrollable[b-es2zvr9ud4] {
        height: calc(100vh - 3.5rem);
        height: calc(100dvh - 3.5rem);
    }
}
/* /Pages/DevConsole/MotionPlayground.razor.rz.scp.css */
/* Motion Playground — CSS isolation (Fase 3 Week 1, 2026-04-21)
   Consuma tokens da wwwroot/css/design-system/tokens.css (globale). */

.mp-root[b-3dzxlr1dh8] {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-surface-0);
}

.mp-header[b-3dzxlr1dh8] {
    padding: var(--space-8) 0 var(--space-12);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-12);
}

.mp-title[b-3dzxlr1dh8] {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    margin: 0 0 var(--space-2);
}

.mp-subtitle[b-3dzxlr1dh8] {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.mp-btn[b-3dzxlr1dh8] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand-500);
    color: var(--color-text-on-brand);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out-expo);
}

.mp-btn:hover[b-3dzxlr1dh8] {
    background: var(--color-brand-600);
}

.mp-section[b-3dzxlr1dh8] {
    margin-bottom: var(--space-16);
}

.mp-section h2[b-3dzxlr1dh8] {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-4);
}

.mp-section h3[b-3dzxlr1dh8] {
    font-size: var(--text-lg);
    margin: var(--space-6) 0 var(--space-2);
    color: var(--color-text-secondary);
}

.mp-note[b-3dzxlr1dh8] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* === Color swatches ================================================ */
.mp-swatch-grid[b-3dzxlr1dh8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-2);
}

.mp-swatch[b-3dzxlr1dh8] {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.mp-swatch span[b-3dzxlr1dh8] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: oklch(100% 0 0 / 0.8);
    color: oklch(0% 0 0);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* === Stagger demo ================================================== */
.mp-stagger[b-3dzxlr1dh8] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}

.mp-stagger li[b-3dzxlr1dh8] {
    padding: var(--space-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

/* === CTA row ======================================================= */
.mp-cta-row[b-3dzxlr1dh8] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.mp-cta[b-3dzxlr1dh8] {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    background: var(--color-brand-500);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-md);
}

.mp-cta--accent[b-3dzxlr1dh8] {
    background: var(--color-accent-500);
    color: var(--color-neutral-900);
}

/* === Skeleton demo ================================================= */
.mp-skeleton-demo[b-3dzxlr1dh8] {
    max-width: 30rem;
    padding: var(--space-4);
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
}

/* === Hero cinematic ================================================ */
.mp-hero[b-3dzxlr1dh8] {
    border-radius: var(--radius-xl);
    background: linear-gradient(
        135deg,
        var(--color-brand-800) 0%,
        var(--color-brand-500) 100%
    );
    color: var(--color-text-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    min-height: 60vh;
}

.mp-hero-inner[b-3dzxlr1dh8] {
    max-width: 42rem;
    text-align: center;
}

.mp-hero-title[b-3dzxlr1dh8] {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-4);
    font-weight: 800;
}

.mp-hero-wrapper[b-3dzxlr1dh8] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.mp-search-wrapper[b-3dzxlr1dh8] {
    padding: var(--space-6);
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: center;
}

.mp-widget-row[b-3dzxlr1dh8] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    align-items: center;
}

.mp-ambient-video[b-3dzxlr1dh8] {
    display: block;
    width: 100%;
    max-width: 32rem;
    border-radius: var(--radius-lg);
    background: var(--color-neutral-900);
}

/* /Pages/Enterprise.razor.rz.scp.css */
/* Enterprise B2B Landing — Scoped CSS */
/* Brand accent: #6C3CE1 (2026 design system) */

:root[b-qlhg2057de] {
    --enterprise-primary: #6C3CE1;
    --enterprise-primary-dark: #5a2dc7;
    --enterprise-primary-light: #8B5CF6;
    --enterprise-bg: #f8fafc;
    --enterprise-card-bg: #ffffff;
    --enterprise-text: #1f2937;
    --enterprise-text-muted: #6b7280;
    --enterprise-border: #e5e7eb;
    --enterprise-radius: 16px;
    --enterprise-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --enterprise-shadow-lg: 0 16px 40px rgba(108, 60, 225, 0.14);
}

/* Page Container */
.enterprise-page[b-qlhg2057de] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--enterprise-text, #1e293b);
    line-height: 1.6;
}

.enterprise-section-container[b-qlhg2057de] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===================== Hero ===================== */
.enterprise-hero[b-qlhg2057de] {
    background: linear-gradient(160deg, #0F0B1A 0%, #1A1432 50%, #0F0B1A 100%);
    color: #ffffff;
    padding: 5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.enterprise-hero-container[b-qlhg2057de] {
    max-width: 800px;
    margin: 0 auto;
}

.enterprise-hero-title[b-qlhg2057de] {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.enterprise-hero-highlight[b-qlhg2057de] {
    display: block;
    background: linear-gradient(135deg, #6C3CE1, #00C9DB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.enterprise-hero-subtitle[b-qlhg2057de] {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.enterprise-hero-cta[b-qlhg2057de] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================== Buttons ===================== */
.enterprise-btn[b-qlhg2057de] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.enterprise-btn-primary[b-qlhg2057de] {
    background: var(--enterprise-primary, #6C3CE1);
    color: #ffffff;
    border-color: var(--enterprise-primary, #6C3CE1);
}

.enterprise-btn-primary:hover[b-qlhg2057de] {
    background: var(--enterprise-primary-dark, #5a2dc7);
    border-color: var(--enterprise-primary-dark, #5a2dc7);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(108, 60, 225, 0.45);
}

.enterprise-hero .enterprise-btn-primary[b-qlhg2057de] {
    background: #ffffff;
    color: var(--enterprise-primary, #6C3CE1);
    border-color: #ffffff;
}

.enterprise-hero .enterprise-btn-primary:hover[b-qlhg2057de] {
    background: #f0f0ff;
    border-color: #f0f0ff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35);
}

.enterprise-btn-secondary[b-qlhg2057de] {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}

.enterprise-btn-secondary:hover[b-qlhg2057de] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.enterprise-btn-large[b-qlhg2057de] {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* ===================== Section Headers ===================== */
.enterprise-section-header[b-qlhg2057de] {
    text-align: center;
    margin-bottom: 3rem;
}

.enterprise-section-title[b-qlhg2057de] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--enterprise-text, #1e293b);
    margin: 0 0 0.75rem;
}

.enterprise-section-subtitle[b-qlhg2057de] {
    font-size: 1.1rem;
    color: var(--enterprise-text-muted, #64748b);
    max-width: 600px;
    margin: 0 auto;
}

/* ===================== Capabilities Grid ===================== */
.enterprise-capabilities[b-qlhg2057de] {
    background: var(--enterprise-bg, #f8fafc);
    padding: 5rem 0;
}

.enterprise-capabilities-grid[b-qlhg2057de] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.enterprise-capability-card[b-qlhg2057de] {
    background: var(--enterprise-card-bg, #ffffff);
    border: 1px solid var(--enterprise-border, #e2e8f0);
    border-radius: var(--enterprise-radius, 12px);
    padding: 2rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.enterprise-capability-card:hover[b-qlhg2057de] {
    box-shadow: var(--enterprise-shadow-lg, 0 10px 25px rgba(79, 70, 229, 0.1));
    transform: translateY(-2px);
}

.enterprise-capability-icon[b-qlhg2057de] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6C3CE1, #00C9DB);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    color: #ffffff;
}

.enterprise-capability-title[b-qlhg2057de] {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--enterprise-text, #1e293b);
}

.enterprise-capability-description[b-qlhg2057de] {
    font-size: 0.95rem;
    color: var(--enterprise-text-muted, #64748b);
    margin: 0;
    line-height: 1.6;
}

/* ===================== Integration Flow ===================== */
.enterprise-integration[b-qlhg2057de] {
    padding: 5rem 0;
    background: #ffffff;
}

.enterprise-integration-flow[b-qlhg2057de] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.enterprise-step[b-qlhg2057de] {
    flex: 1;
    max-width: 320px;
    text-align: center;
    position: relative;
}

.enterprise-step-number[b-qlhg2057de] {
    font-size: 3rem;
    font-weight: 800;
    color: #e0e7ff;
    line-height: 1;
    margin-bottom: 1rem;
}

.enterprise-step-content[b-qlhg2057de] {
    padding: 0 1rem;
}

.enterprise-step-icon[b-qlhg2057de] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6C3CE1, #00C9DB);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #ffffff;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(108, 60, 225, 0.25);
}

.enterprise-step-title[b-qlhg2057de] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--enterprise-text, #1e293b);
}

.enterprise-step-description[b-qlhg2057de] {
    font-size: 0.95rem;
    color: var(--enterprise-text-muted, #64748b);
    margin: 0;
    line-height: 1.6;
}

.enterprise-connector[b-qlhg2057de] {
    width: 60px;
    height: 2px;
    background: var(--enterprise-border, #e2e8f0);
    margin-top: 4.5rem;
    flex-shrink: 0;
}

/* ===================== Pricing ===================== */
.enterprise-pricing[b-qlhg2057de] {
    background: var(--enterprise-bg, #f8fafc);
    padding: 5rem 0;
}

.enterprise-pricing-card[b-qlhg2057de] {
    background: var(--enterprise-card-bg, #ffffff);
    border: 1px solid var(--enterprise-border, #e2e8f0);
    border-radius: var(--enterprise-radius, 12px);
    padding: 3rem;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: var(--enterprise-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.enterprise-pricing-title[b-qlhg2057de] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--enterprise-text, #1e293b);
    margin: 0 0 1rem;
}

.enterprise-pricing-description[b-qlhg2057de] {
    font-size: 1.05rem;
    color: var(--enterprise-text-muted, #64748b);
    margin: 0 0 2rem;
    line-height: 1.7;
}

/* ===================== Final CTA ===================== */
.enterprise-final-cta[b-qlhg2057de] {
    background: linear-gradient(160deg, #0F0B1A 0%, #1A1432 50%, #0F0B1A 100%);
    color: #ffffff;
    padding: 5rem 0;
    text-align: center;
}

.enterprise-final-cta-title[b-qlhg2057de] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.enterprise-final-cta-subtitle[b-qlhg2057de] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 560px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.enterprise-final-cta-buttons[b-qlhg2057de] {
    margin-bottom: 2rem;
}

.enterprise-final-cta .enterprise-btn-primary[b-qlhg2057de] {
    background: #ffffff;
    color: var(--enterprise-primary, #6C3CE1);
    border-color: #ffffff;
}

.enterprise-final-cta .enterprise-btn-primary:hover[b-qlhg2057de] {
    background: #f0f0ff;
    border-color: #f0f0ff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35);
}

.enterprise-back-link[b-qlhg2057de] {
    margin-top: 1rem;
}

.enterprise-back-link a[b-qlhg2057de] {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.enterprise-back-link a:hover[b-qlhg2057de] {
    color: #ffffff;
}

/* ===================== Tablet (max 1023px) ===================== */
@media (max-width: 1023px) {
    .enterprise-capabilities-grid[b-qlhg2057de] {
        grid-template-columns: repeat(2, 1fr);
    }

    .enterprise-hero-title[b-qlhg2057de] {
        font-size: 2.25rem;
    }

    .enterprise-connector[b-qlhg2057de] {
        width: 40px;
    }
}

/* ===================== Mobile (max 767px) ===================== */
@media (max-width: 767px) {
    .enterprise-hero[b-qlhg2057de] {
        padding: 3.5rem 1.25rem;
    }

    .enterprise-hero-title[b-qlhg2057de] {
        font-size: 1.85rem;
    }

    .enterprise-hero-subtitle[b-qlhg2057de] {
        font-size: 1.05rem;
    }

    .enterprise-capabilities[b-qlhg2057de],
    .enterprise-integration[b-qlhg2057de],
    .enterprise-pricing[b-qlhg2057de],
    .enterprise-final-cta[b-qlhg2057de] {
        padding: 3.5rem 0;
    }

    .enterprise-capabilities-grid[b-qlhg2057de] {
        grid-template-columns: 1fr;
    }

    .enterprise-integration-flow[b-qlhg2057de] {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .enterprise-step[b-qlhg2057de] {
        max-width: 100%;
    }

    .enterprise-connector[b-qlhg2057de] {
        width: 2px;
        height: 40px;
        margin: 0;
    }

    .enterprise-section-title[b-qlhg2057de] {
        font-size: 1.6rem;
    }

    .enterprise-hero-cta[b-qlhg2057de] {
        flex-direction: column;
        align-items: center;
    }

    .enterprise-btn[b-qlhg2057de] {
        width: 100%;
        max-width: 300px;
        min-height: 48px;
    }

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

    .enterprise-final-cta-title[b-qlhg2057de] {
        font-size: 1.6rem;
    }
}

/* ===================== Small Mobile (max 480px) ===================== */
@media (max-width: 480px) {
    .enterprise-hero-title[b-qlhg2057de] {
        font-size: 1.5rem;
    }

    .enterprise-hero-subtitle[b-qlhg2057de] {
        font-size: 0.95rem;
    }

    .enterprise-section-title[b-qlhg2057de] {
        font-size: 1.4rem;
    }

    .enterprise-capability-card[b-qlhg2057de] {
        padding: 1.5rem;
    }

    .enterprise-step-number[b-qlhg2057de] {
        font-size: 2.25rem;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* InsightLearn B2C Landing Page — 2026 Design System */
/* Blazor scoped CSS — selectors must match Index.razor HTML classes */

/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */

.il-container[b-t16pxckp08] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.il-btn[b-t16pxckp08] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Eliminate 300ms tap delay on iOS Safari / Android Chrome */
    touch-action: manipulation;
    /* Remove default iOS tap highlight rectangle */
    -webkit-tap-highlight-color: transparent;
    /* Apple HIG minimum touch target */
    min-height: 44px;
}

.il-btn:focus-visible[b-t16pxckp08] {
    outline: 2px solid #06b6d4;
    outline-offset: 3px;
}

.il-btn-primary[b-t16pxckp08] {
    color: #fff;
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%);
    box-shadow: 0 4px 20px rgba(108, 60, 225, 0.3);
}

.il-btn-primary:hover[b-t16pxckp08] {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0 6px 30px rgba(108, 60, 225, 0.5);
}

.il-btn-accent[b-t16pxckp08] {
    color: #fff;
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%);
}

.il-btn-accent:hover[b-t16pxckp08] {
    opacity: 0.9;
}

.il-btn-outline[b-t16pxckp08] {
    color: #6C3CE1;
    background: transparent;
    border: 2px solid #6C3CE1;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 0.75rem;
}

.il-btn-outline:hover[b-t16pxckp08] {
    background: #6C3CE1;
    color: #fff;
}

.il-btn-large[b-t16pxckp08] {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

.il-section-cta[b-t16pxckp08] {
    text-align: center;
    margin-top: 2.5rem;
}

/* ==========================================================================
   SHARED SECTION TYPOGRAPHY
   ========================================================================== */

.il-section-title[b-t16pxckp08] {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.75rem;
    color: #1f2937;
    line-height: 1.2;
}

.il-section-title-light[b-t16pxckp08] {
    color: #fff;
}

.il-section-subtitle[b-t16pxckp08] {
    font-size: 1.125rem;
    text-align: center;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 auto 3rem;
    max-width: 600px;
}

.il-section-subtitle-light[b-t16pxckp08] {
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

.il-hero[b-t16pxckp08] {
    position: relative;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #fff;
    /* Use dvh-based padding on iOS Safari so the hero is measured against
       the real viewport height (after toolbar), not the stale 100vh */
    padding: 6rem 2rem 5rem;
    text-align: center;
    overflow: hidden;
    /* isolation: isolate creates a new stacking context — required so the
       ::before pseudo-element z-index works correctly on Safari */
    isolation: isolate;
    /* Contain layout to prevent overflow-x on narrow viewports */
    contain: layout style;
}

.il-hero-glow[b-t16pxckp08] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.il-hero-glow-purple[b-t16pxckp08] {
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(108, 60, 225, 0.25) 0%, rgba(6, 182, 212, 0.1) 40%, transparent 70%);
}

.il-hero-glow-cyan[b-t16pxckp08] {
    bottom: -30%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
}

.il-hero-content[b-t16pxckp08] {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.il-hero-headline[b-t16pxckp08] {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.il-hero-subtitle[b-t16pxckp08] {
    font-size: 1.25rem;
    line-height: 1.7;
    margin: 0 0 2.5rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.il-hero-cta[b-t16pxckp08] {
    margin-bottom: 0;
}

.il-hero-search[b-t16pxckp08] {
    max-width: 520px;
    margin: 2rem auto 0;
}

.il-search-form[b-t16pxckp08] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    -webkit-align-items: center;
    align-items: center;
}

.il-search-icon[b-t16pxckp08] {
    padding-left: 1.25rem;
    color: #9ca3af;
    font-size: 0.9375rem;
}

.il-search-input[b-t16pxckp08] {
    -webkit-flex: 1;
    flex: 1;
    border: none;
    padding: 0.875rem 1rem;
    /* 16px minimum prevents iOS Safari auto-zoom on input focus */
    font-size: max(16px, 1rem);
    color: #1f2937;
    background: transparent;
    outline: none;
    min-width: 0;
}

.il-search-input[b-t16pxckp08]::placeholder {
    color: #9ca3af;
}

.il-search-btn[b-t16pxckp08] {
    padding: 0.875rem 1.5rem;
    border-radius: 0;
    font-size: 0.9375rem;
    transition: opacity 0.2s ease;
}

.il-search-btn:hover[b-t16pxckp08] {
    opacity: 0.9;
    transform: none;
    box-shadow: 0 4px 20px rgba(108, 60, 225, 0.3);
}

.il-hero-stats[b-t16pxckp08] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    color: #fff;
}

.il-stat[b-t16pxckp08] {
    text-align: center;
}

.il-stat-number[b-t16pxckp08] {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
}

.il-stat-label[b-t16pxckp08] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.il-stat-divider[b-t16pxckp08] {
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    align-self: stretch;
}

/* ==========================================================================
   2. TRUST BAR
   ========================================================================== */

.il-trust[b-t16pxckp08] {
    background: #f8fafc;
    padding: 3rem 0;
}

.il-trust-title[b-t16pxckp08] {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.5rem;
}

.il-trust-logos[b-t16pxckp08] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.il-trust-badge[b-t16pxckp08] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================================================
   3. COURSES
   ========================================================================== */

.il-courses[b-t16pxckp08] {
    background: #fff;
    padding: 5rem 0;
}

.il-courses-grid[b-t16pxckp08] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.il-course-card[b-t16pxckp08] {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-transition: -webkit-transform 0.25s ease, box-shadow 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Safari: overflow:hidden is not respected on transformed elements without
       this. translateZ(0) creates a compositing layer so border-radius clips. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.il-course-card:hover[b-t16pxckp08] {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.il-course-header[b-t16pxckp08] {
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.il-course-header-web[b-t16pxckp08] {
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%);
}

.il-course-header-data[b-t16pxckp08] {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

.il-course-header-biz[b-t16pxckp08] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.il-course-category[b-t16pxckp08] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.il-course-body[b-t16pxckp08] {
    padding: 1.5rem;
}

.il-course-title[b-t16pxckp08] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #1f2937;
    line-height: 1.4;
}

.il-course-desc[b-t16pxckp08] {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.il-course-footer[b-t16pxckp08] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.il-course-level[b-t16pxckp08] {
    padding: 0.1875rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.il-level-beginner[b-t16pxckp08] {
    background: #ecfdf5;
    color: #059669;
}

.il-level-intermediate[b-t16pxckp08] {
    background: #fef3c7;
    color: #d97706;
}

.il-course-rating[b-t16pxckp08] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
}

.il-course-duration[b-t16pxckp08] {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-left: auto;
}

/* ==========================================================================
   4. AI FEATURES
   ========================================================================== */

.il-ai-features[b-t16pxckp08] {
    position: relative;
    background: #0f172a;
    padding: 5rem 0;
    overflow: hidden;
    isolation: isolate;
}

.il-ai-features[b-t16pxckp08]::before {
    content: "";
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(108, 60, 225, 0.2) 0%, rgba(6, 182, 212, 0.08) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.il-ai-grid[b-t16pxckp08] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.il-ai-card[b-t16pxckp08] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    /* Prefixed first for Safari < 16 */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-transition: background 0.25s ease, border-color 0.25s ease;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.il-ai-card:hover[b-t16pxckp08] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.il-ai-card-icon[b-t16pxckp08] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C3CE1 0%, #06b6d4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.il-ai-badge[b-t16pxckp08] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.il-ai-card h3[b-t16pxckp08] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
}

.il-ai-card p[b-t16pxckp08] {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   5. HOW IT WORKS
   ========================================================================== */

.il-how-it-works[b-t16pxckp08] {
    background: #f8fafc;
    padding: 5rem 0;
}

.il-steps[b-t16pxckp08] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0;
}

.il-step[b-t16pxckp08] {
    text-align: center;
    padding: 2rem 1.5rem;
    flex: 1;
    max-width: 320px;
}

.il-step-number[b-t16pxckp08] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 16px rgba(108, 60, 225, 0.3);
}

.il-step-connector[b-t16pxckp08] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #6C3CE1, #06b6d4);
    opacity: 0.3;
    margin-top: calc(2rem + 32px);
    flex-shrink: 0;
}

.il-step h3[b-t16pxckp08] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #1f2937;
}

.il-step p[b-t16pxckp08] {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   6. TESTIMONIALS
   ========================================================================== */

.il-testimonials[b-t16pxckp08] {
    background: #fff;
    padding: 5rem 0;
}

.il-testimonials-grid[b-t16pxckp08] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.il-testimonial-card[b-t16pxckp08] {
    background: #f8fafc;
    border-radius: 1rem;
    padding: 2rem;
    border-left: 4px solid #6C3CE1;
    -webkit-transition: -webkit-transform 0.25s ease, box-shadow 0.25s ease;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.il-testimonial-card:hover[b-t16pxckp08] {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.il-testimonial-header[b-t16pxckp08] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.il-avatar[b-t16pxckp08] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.il-testimonial-info[b-t16pxckp08] {
    display: flex;
    flex-direction: column;
}

.il-testimonial-name[b-t16pxckp08] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.il-testimonial-role[b-t16pxckp08] {
    font-size: 0.8125rem;
    color: #6b7280;
}

.il-testimonial-stars[b-t16pxckp08] {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 1rem;
    color: #f59e0b;
    font-size: 1rem;
}

.il-testimonial-quote[b-t16pxckp08] {
    font-size: 1rem;
    font-style: italic;
    color: #374151;
    line-height: 1.7;
    margin: 0;
    position: relative;
    padding-left: 1.25rem;
}

.il-testimonial-quote[b-t16pxckp08]::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.25rem;
    font-size: 2rem;
    font-weight: 800;
    color: #6C3CE1;
    line-height: 1;
    font-style: normal;
}

/* ==========================================================================
   7. NEWSLETTER
   ========================================================================== */

.il-newsletter[b-t16pxckp08] {
    background: linear-gradient(135deg, #6C3CE1 0%, #5a2dc7 50%, #0f172a 100%);
    padding: 5rem 0;
    text-align: center;
    color: #fff;
}

.il-newsletter-content[b-t16pxckp08] {
    max-width: 560px;
    margin: 0 auto;
}

.il-newsletter-title[b-t16pxckp08] {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #fff;
}

.il-newsletter-subtitle[b-t16pxckp08] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2rem;
}

.il-newsletter-form[b-t16pxckp08] {
    display: block;
}

.il-newsletter-input-group[b-t16pxckp08] {
    display: flex;
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.il-newsletter-input[b-t16pxckp08] {
    -webkit-flex: 1;
    flex: 1;
    padding: 0.9375rem 1.5rem;
    /* 16px minimum prevents iOS Safari auto-zoom on input focus */
    font-size: max(16px, 1rem);
    border: none;
    background: #fff;
    color: #1f2937;
    border-radius: 9999px 0 0 9999px;
    outline: none;
    min-width: 0;
}

.il-newsletter-input[b-t16pxckp08]::placeholder {
    color: #9ca3af;
}

.il-newsletter-input:focus-visible[b-t16pxckp08] {
    box-shadow: inset 0 0 0 2px #6C3CE1;
}

.il-newsletter-btn[b-t16pxckp08] {
    padding: 0.9375rem 2rem;
    font-size: 1rem;
    color: #fff;
    background: #0f172a;
    border: none;
    border-radius: 0 9999px 9999px 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
    font-weight: 700;
}

.il-newsletter-btn:hover[b-t16pxckp08] {
    background: #1e293b;
}

.il-newsletter-btn:focus-visible[b-t16pxckp08] {
    outline: 2px solid #06b6d4;
    outline-offset: -2px;
}

.il-newsletter-success[b-t16pxckp08] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #10b981;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.il-newsletter-error[b-t16pxckp08] {
    color: #fca5a5;
    font-size: 0.875rem;
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.il-newsletter-privacy[b-t16pxckp08] {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
}

/* ==========================================================================
   8. FINAL CTA
   ========================================================================== */

.il-final-cta[b-t16pxckp08] {
    position: relative;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    padding: 5rem 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.il-final-cta[b-t16pxckp08]::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(108, 60, 225, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.il-final-cta-title[b-t16pxckp08] {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.il-final-cta-subtitle[b-t16pxckp08] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 1023px)
   ========================================================================== */

@media (max-width: 1023px) {
    .il-hero-headline[b-t16pxckp08] {
        font-size: clamp(2rem, 4.5vw, 3rem);
    }

    .il-hero[b-t16pxckp08] {
        padding: 4.5rem 1.5rem 4rem;
    }

    .il-hero-stats[b-t16pxckp08] {
        gap: 2rem;
    }

    .il-courses-grid[b-t16pxckp08],
    .il-testimonials-grid[b-t16pxckp08] {
        grid-template-columns: repeat(2, 1fr);
    }

    .il-ai-grid[b-t16pxckp08] {
        grid-template-columns: repeat(2, 1fr);
    }

    .il-step-connector[b-t16pxckp08] {
        display: none;
    }

    .il-steps[b-t16pxckp08] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    .il-hero[b-t16pxckp08] {
        padding: 3.5rem 1.25rem 3rem;
    }

    .il-hero-headline[b-t16pxckp08] {
        font-size: 2rem;
    }

    .il-hero-subtitle[b-t16pxckp08] {
        font-size: 1rem;
    }

    .il-hero-cta[b-t16pxckp08] {
        width: 100%;
        max-width: 320px;
        min-height: 52px;
    }

    .il-search-form[b-t16pxckp08] {
        flex-direction: column;
        border-radius: 1rem;
    }

    .il-search-input[b-t16pxckp08] {
        border-radius: 1rem 1rem 0 0;
        text-align: center;
        padding: 0.875rem 1rem;
    }

    .il-search-icon[b-t16pxckp08] {
        display: none;
    }

    .il-search-btn[b-t16pxckp08] {
        border-radius: 0 0 1rem 1rem;
        padding: 0.875rem;
    }

    .il-hero-stats[b-t16pxckp08] {
        flex-direction: column;
        gap: 1.25rem;
    }

    .il-stat-divider[b-t16pxckp08] {
        display: none;
    }

    .il-courses-grid[b-t16pxckp08],
    .il-ai-grid[b-t16pxckp08],
    .il-testimonials-grid[b-t16pxckp08] {
        grid-template-columns: 1fr;
    }

    .il-steps[b-t16pxckp08] {
        flex-direction: column;
        align-items: center;
    }

    .il-step-connector[b-t16pxckp08] {
        display: none;
    }

    .il-section-title[b-t16pxckp08] {
        font-size: 1.5rem;
    }

    .il-section-subtitle[b-t16pxckp08] {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .il-courses[b-t16pxckp08],
    .il-ai-features[b-t16pxckp08],
    .il-how-it-works[b-t16pxckp08],
    .il-testimonials[b-t16pxckp08],
    .il-newsletter[b-t16pxckp08],
    .il-final-cta[b-t16pxckp08] {
        padding: 3.5rem 0;
    }

    .il-trust[b-t16pxckp08] {
        padding: 2rem 0;
    }

    .il-trust-logos[b-t16pxckp08] {
        gap: 0.75rem;
    }

    .il-trust-badge[b-t16pxckp08] {
        font-size: 0.8125rem;
        padding: 0.375rem 1rem;
    }

    .il-ai-card[b-t16pxckp08] {
        padding: 1.5rem;
    }

    .il-step[b-t16pxckp08] {
        padding: 1.5rem 1rem;
    }

    .il-testimonial-card[b-t16pxckp08] {
        padding: 1.5rem;
    }

    .il-newsletter-input-group[b-t16pxckp08] {
        flex-direction: column;
        border-radius: 1rem;
    }

    .il-newsletter-input[b-t16pxckp08] {
        border-radius: 1rem 1rem 0 0;
        text-align: center;
    }

    .il-newsletter-btn[b-t16pxckp08] {
        border-radius: 0 0 1rem 1rem;
    }

    .il-final-cta-title[b-t16pxckp08] {
        font-size: 1.5rem;
    }

    .il-final-cta .il-btn-large[b-t16pxckp08] {
        width: 100%;
        max-width: 320px;
        min-height: 52px;
    }
}

/* ==========================================================================
   RESPONSIVE — XS BREAKPOINT (< 576px)
   Extra-small phones: iPhone SE, Galaxy S8, older devices
   ========================================================================== */

@media (max-width: 575px) {
    .il-hero[b-t16pxckp08] {
        padding: 2.75rem 1rem 2.25rem;
    }

    .il-hero-headline[b-t16pxckp08] {
        font-size: 1.875rem;
        letter-spacing: -0.01em;
    }

    .il-hero-subtitle[b-t16pxckp08] {
        font-size: 0.9375rem;
        margin-bottom: 1.75rem;
    }

    /* Single full-width CTA button on xs */
    .il-hero-cta[b-t16pxckp08] {
        width: 100%;
        max-width: 100%;
        min-height: 52px;
    }

    /* Search form stacks vertically — already stacked at 767px,
       but here we also constrain the overall width */
    .il-hero-search[b-t16pxckp08] {
        max-width: 100%;
        margin-top: 1.5rem;
    }

    /* Stats row collapses — already collapsed at 767px */
    .il-hero-stats[b-t16pxckp08] {
        margin-top: 2rem;
        gap: 1rem;
    }

    /* Trust section tighter */
    .il-trust[b-t16pxckp08] {
        padding: 1.5rem 0;
    }

    /* Container tight padding */
    .il-container[b-t16pxckp08] {
        padding: 0 0.875rem;
    }

    /* Section padding reduction for xs */
    .il-courses[b-t16pxckp08],
    .il-ai-features[b-t16pxckp08],
    .il-how-it-works[b-t16pxckp08],
    .il-testimonials[b-t16pxckp08],
    .il-newsletter[b-t16pxckp08],
    .il-final-cta[b-t16pxckp08] {
        padding: 2.5rem 0;
    }

    /* AI card padding tighter on xs */
    .il-ai-card[b-t16pxckp08] {
        padding: 1.25rem;
    }

    /* Step padding */
    .il-step[b-t16pxckp08] {
        padding: 1.25rem 0.75rem;
    }

    /* Testimonial padding */
    .il-testimonial-card[b-t16pxckp08] {
        padding: 1.25rem;
    }

    /* Section titles */
    .il-section-title[b-t16pxckp08] {
        font-size: 1.375rem;
    }

    .il-section-subtitle[b-t16pxckp08] {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
    }

    /* CTA section */
    .il-final-cta .il-btn-large[b-t16pxckp08] {
        width: 100%;
        max-width: 100%;
        min-height: 52px;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .il-btn[b-t16pxckp08],
    .il-course-card[b-t16pxckp08],
    .il-ai-card[b-t16pxckp08],
    .il-testimonial-card[b-t16pxckp08],
    .il-newsletter-btn[b-t16pxckp08] {
        -webkit-transition: none;
        transition: none;
    }

    /* Disable transform on reduced-motion preference */
    .il-course-card:hover[b-t16pxckp08],
    .il-testimonial-card:hover[b-t16pxckp08] {
        -webkit-transform: none;
        transform: none;
    }
}

.il-course-card:focus-visible[b-t16pxckp08],
.il-ai-card:focus-visible[b-t16pxckp08],
.il-testimonial-card:focus-visible[b-t16pxckp08],
.il-trust-badge:focus-visible[b-t16pxckp08] {
    outline: 2px solid #6C3CE1;
    outline-offset: 2px;
}

/* ==========================================================================
   SAFARI iOS — SPECIFIC OVERRIDES
   ========================================================================== */

/* Disable hover lift on touch devices (iOS Safari keeps hover state after tap) */
@media (hover: none) and (pointer: coarse) {
    .il-course-card:hover[b-t16pxckp08],
    .il-testimonial-card:hover[b-t16pxckp08] {
        -webkit-transform: none;
        transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .il-btn-primary:hover[b-t16pxckp08] {
        -webkit-transform: none;
        transform: none;
    }
}

/* Active state feedback for touch (replaces hover on mobile) */
.il-btn:active[b-t16pxckp08] {
    opacity: 0.88;
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}

.il-course-card:active[b-t16pxckp08] {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
}

/* Remove default iOS tap highlight, use brand colour instead */
.il-btn[b-t16pxckp08],
.il-course-card[b-t16pxckp08],
.il-testimonial-card[b-t16pxckp08],
.il-trust-badge[b-t16pxckp08] {
    -webkit-tap-highlight-color: rgba(108, 60, 225, 0.1);
}
/* /Pages/Register.razor.rz.scp.css */
/* Register Page Specific Styles */
.auth-subtitle[b-yhc9zrupbu] {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin-top: var(--space-2);
}

/* Social Login Buttons (B2C) */
.social-login-buttons[b-yhc9zrupbu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.social-btn[b-yhc9zrupbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--border-radius-lg);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
}

.social-btn:hover[b-yhc9zrupbu] {
    border-color: var(--gray-300);
    background: var(--gray-50);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.social-btn:disabled[b-yhc9zrupbu] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.social-btn .social-icon[b-yhc9zrupbu] {
    flex-shrink: 0;
}

.google-btn[b-yhc9zrupbu] {
    border-color: #e0e0e0;
}

.google-btn:hover[b-yhc9zrupbu] {
    border-color: #4285F4;
    background: #f8f9ff;
}

.github-btn[b-yhc9zrupbu] {
    background: #24292e;
    color: #fff;
    border-color: #24292e;
}

.github-btn:hover[b-yhc9zrupbu] {
    background: #1b1f23;
    border-color: #1b1f23;
}

.github-btn i[b-yhc9zrupbu] {
    font-size: 1.2rem;
}

/* Enterprise SSO Section (B2B) */
.enterprise-sso-section[b-yhc9zrupbu] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
    text-align: center;
}

.enterprise-sso-link[b-yhc9zrupbu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.enterprise-sso-link:hover[b-yhc9zrupbu] {
    color: var(--primary);
    background: rgba(164, 53, 240, 0.05);
}

.enterprise-sso-link:disabled[b-yhc9zrupbu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.enterprise-sso-link i[b-yhc9zrupbu] {
    font-size: 0.9rem;
}

/* Form Row for Name Fields */
.form-row[b-yhc9zrupbu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Password Strength Indicator */
.password-strength[b-yhc9zrupbu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.strength-bars[b-yhc9zrupbu] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.strength-bar[b-yhc9zrupbu] {
    height: 4px;
    flex: 1;
    background: var(--gray-200);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.strength-bar.active.weak[b-yhc9zrupbu] {
    background: #ef4444;
}

.strength-bar.active.fair[b-yhc9zrupbu] {
    background: #f59e0b;
}

.strength-bar.active.good[b-yhc9zrupbu] {
    background: #3b82f6;
}

.strength-bar.active.strong[b-yhc9zrupbu] {
    background: #10b981;
}

.strength-text[b-yhc9zrupbu] {
    font-size: 11px;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.strength-text.weak[b-yhc9zrupbu] { color: #ef4444; }
.strength-text.fair[b-yhc9zrupbu] { color: #f59e0b; }
.strength-text.good[b-yhc9zrupbu] { color: #3b82f6; }
.strength-text.strong[b-yhc9zrupbu] { color: #10b981; }

/* Password Match Indicator */
.password-match[b-yhc9zrupbu] {
    color: #22c55e;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
.password-mismatch[b-yhc9zrupbu] {
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Role Selector */
.role-selector[b-yhc9zrupbu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.role-option[b-yhc9zrupbu] {
    position: relative;
    cursor: pointer;
}

.role-option input[type="radio"][b-yhc9zrupbu] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.role-content[b-yhc9zrupbu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    transition: all 0.3s ease;
}

.role-option:hover .role-content[b-yhc9zrupbu] {
    border-color: var(--primary);
    background: rgba(164, 53, 240, 0.05);
}

.role-option.selected .role-content[b-yhc9zrupbu] {
    border-color: var(--primary);
    background: rgba(164, 53, 240, 0.1);
    box-shadow: 0 0 0 3px rgba(164, 53, 240, 0.15);
}

.role-content i[b-yhc9zrupbu] {
    font-size: 1.5rem;
    color: var(--gray-500);
    transition: color 0.3s ease;
}

.role-option.selected .role-content i[b-yhc9zrupbu] {
    color: var(--primary);
}

.role-title[b-yhc9zrupbu] {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.95rem;
}

.role-desc[b-yhc9zrupbu] {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* Terms Text */
.terms-text[b-yhc9zrupbu] {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.terms-text a[b-yhc9zrupbu] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.terms-text a:hover[b-yhc9zrupbu] {
    text-decoration: underline;
}

/* Visual Features */
.visual-features[b-yhc9zrupbu] {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.feature-item[b-yhc9zrupbu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.95rem;
    opacity: 0.9;
}

.feature-item i[b-yhc9zrupbu] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .form-row[b-yhc9zrupbu] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .role-selector[b-yhc9zrupbu] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .role-content[b-yhc9zrupbu] {
        padding: var(--space-3);
    }

    .role-content i[b-yhc9zrupbu] {
        font-size: 1.25rem;
    }

    .role-title[b-yhc9zrupbu] {
        font-size: 0.85rem;
    }

    .role-desc[b-yhc9zrupbu] {
        display: none;
    }

    .visual-features[b-yhc9zrupbu] {
        display: none;
    }
}

@media (max-width: 480px) {
    .strength-text[b-yhc9zrupbu] {
        display: none;
    }

    .password-strength[b-yhc9zrupbu] {
        margin-top: var(--space-1);
    }
}
/* /Pages/StudentDashboard.razor.rz.scp.css */
/* StudentDashboard — CSS isolation (Fase 3 W8 integration, 2026-04-21) */

.dashboard-progress-row[b-fhwa5z5nu4] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--space-6) 0 var(--space-8);
}

@media (max-width: 48rem) {
    .dashboard-progress-row[b-fhwa5z5nu4] {
        justify-content: center;
    }
}