@import '_content/InteractiveReader.ePUB/InteractiveReader.ePUB.3wg0gi61ox.bundle.scp.css';

/* /Components/Admin/Pages/BookList.razor.rz.scp.css */
.book-card-modern[b-joa2x346nw] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

    .book-card-modern:hover[b-joa2x346nw] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    }

.book-cover-container[b-joa2x346nw] {
    position: relative;
    aspect-ratio: 2/2;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.book-cover-image[b-joa2x346nw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.book-card-modern:hover .book-cover-image[b-joa2x346nw] {
    transform: scale(1.05);
}

.book-cover-placeholder[b-joa2x346nw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.book-overlay[b-joa2x346nw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-card-modern:hover .book-overlay[b-joa2x346nw] {
    opacity: 1;
}

.book-actions[b-joa2x346nw] {
    display: flex;
    gap: 0.5rem;
}

    .book-actions .btn[b-joa2x346nw] {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

        .book-actions .btn:hover[b-joa2x346nw] {
            transform: scale(1.1);
        }

.book-info[b-joa2x346nw] {
    padding: 1.25rem;
}

.book-title-modern[b-joa2x346nw] {
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

    .book-title-modern a:hover[b-joa2x346nw] {
        color: #3b82f6 !important;
    }

.book-author[b-joa2x346nw] {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.book-description[b-joa2x346nw] {
    font-size: 0.875rem;
    line-height: 1.4;
}

.book-stats[b-joa2x346nw] {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.75rem;
}

.book-badges[b-joa2x346nw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

    .book-badges .badge[b-joa2x346nw] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }
/* /Components/Admin/Pages/CacheManagement.razor.rz.scp.css */
/* Cache Management Page Styles */

.cache-management-container[b-hueb41pop3] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Action Cards */
.cache-action-card[b-hueb41pop3] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cache-action-card:hover[b-hueb41pop3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Stat Cards */
.cache-stat-card[b-hueb41pop3] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #0d6efd;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.cache-stat-card:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-left-width: 6px;
}

.cache-stat-value[b-hueb41pop3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
}

.cache-stat-label[b-hueb41pop3] {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Action Buttons */
.btn-cache-danger[b-hueb41pop3] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-cache-danger:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.btn-cache-warning[b-hueb41pop3] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border: none;
    color: #212529;
    transition: all 0.3s ease;
}

.btn-cache-warning:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.btn-cache-info[b-hueb41pop3] {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-cache-info:hover[b-hueb41pop3] {
    background: linear-gradient(135deg, #0aa2c0 0%, #099fbc 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 202, 240, 0.4);
}

/* Modal Enhancements */
.modal.show[b-hueb41pop3] {
    animation: fadeIn-b-hueb41pop3 0.2s ease;
}

@keyframes fadeIn-b-hueb41pop3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-hueb41pop3] {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* Alert Enhancements */
.alert[b-hueb41pop3] {
    border-left: 4px solid;
    border-radius: 0.5rem;
    animation: slideDown-b-hueb41pop3 0.3s ease;
}

@keyframes slideDown-b-hueb41pop3 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-hueb41pop3] {
    border-left-color: #198754;
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.1) 0%, rgba(255,255,255,0) 100%);
}

.alert-danger[b-hueb41pop3] {
    border-left-color: #dc3545;
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, rgba(255,255,255,0) 100%);
}

.alert-info[b-hueb41pop3] {
    border-left-color: #0dcaf0;
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.1) 0%, rgba(255,255,255,0) 100%);
}

/* Info Boxes */
.cache-info-box[b-hueb41pop3] {
    border-left: 4px solid #0dcaf0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.cache-info-box h6[b-hueb41pop3] {
    color: #0dcaf0;
    margin-bottom: 0.5rem;
}

/* Loading State */
.btn:disabled[b-hueb41pop3] {
    opacity: 0.65;
    cursor: not-allowed;
}

.spinner-border-sm[b-hueb41pop3] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cache-stat-value[b-hueb41pop3] {
        font-size: 1.25rem;
    }
    
    .btn-lg[b-hueb41pop3] {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .cache-info-box[b-hueb41pop3] {
        padding: 1rem;
    }
}

/* Icon Styling */
.fas[b-hueb41pop3], .fa[b-hueb41pop3] {
    vertical-align: middle;
}

/* Card Animations */
.card[b-hueb41pop3] {
    animation: fadeInUp-b-hueb41pop3 0.5s ease;
}

@keyframes fadeInUp-b-hueb41pop3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:nth-child(1)[b-hueb41pop3] {
    animation-delay: 0.1s;
}

.card:nth-child(2)[b-hueb41pop3] {
    animation-delay: 0.2s;
}

.card:nth-child(3)[b-hueb41pop3] {
    animation-delay: 0.3s;
}
/* /Components/Layout/GuestFooter.razor.rz.scp.css */
/* Guest footer — scoped. Same tokens as GuestNavMenu / GuestLandingPage. */

.lp-foot[b-u8fb2uyqig] {
    --lp-foot-ink: #15202b;
    --lp-foot-ink-soft: #4f5b67;
    --lp-foot-blue-deep: #00558c;
    --lp-foot-line: #e4e8ec;

    padding-block: 32px calc(28px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--lp-foot-line);
    background: #fff;
    color: var(--lp-foot-ink);
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.lp-foot:lang(ar)[b-u8fb2uyqig] {
    font-family: "Hanken Grotesk", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* No specificity, so single-class rules below (e.g. the tagline's margin) win. */
:where(.lp-foot) :where(p, ul)[b-u8fb2uyqig] {
    margin: 0;
}

:where(.lp-foot) :where(ul)[b-u8fb2uyqig] {
    padding: 0;
    list-style: none;
}

.lp-foot a[b-u8fb2uyqig] {
    color: var(--lp-foot-ink-soft);
    text-decoration: none;
}

.lp-foot a:hover[b-u8fb2uyqig] {
    color: var(--lp-foot-blue-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-foot a:focus-visible[b-u8fb2uyqig] {
    outline: 3px solid #006aa7;
    outline-offset: 2px;
    border-radius: 6px;
}

.lp-foot-inner[b-u8fb2uyqig] {
    display: grid;
    gap: 20px;
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: 16px;
}

.lp-foot-name[b-u8fb2uyqig] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.lp-foot-name img[b-u8fb2uyqig] {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
}

.lp-foot-tagline[b-u8fb2uyqig] {
    margin-block-start: 6px;
    max-inline-size: 30em;
    color: var(--lp-foot-ink-soft);
    font-size: 14px;
}

.lp-foot-links ul[b-u8fb2uyqig],
.lp-foot-langs[b-u8fb2uyqig] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.lp-foot-links a[b-u8fb2uyqig],
.lp-foot-langs a[b-u8fb2uyqig] {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-weight: 600;
}

.lp-foot-langs a:lang(ar)[b-u8fb2uyqig] {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* Marked like the header: colour, weight and an underline — not colour alone. */
.lp-foot-langs a[aria-current="true"][b-u8fb2uyqig] {
    color: var(--lp-foot-blue-deep);
    font-weight: 800;
    text-decoration: underline 2px #006aa7;
    text-underline-offset: 6px;
}

.lp-foot-copy[b-u8fb2uyqig] {
    color: var(--lp-foot-ink-soft);
    font-size: 13px;
}

/* Tablets: the brand gets its own row — squeezed next to two auto-width link
   lists (Swedish and Arabic ones are long) its column would collapse to nothing. */
@media (min-width: 768px) {
    .lp-foot[b-u8fb2uyqig] {
        padding-block: 40px;
    }

    .lp-foot-inner[b-u8fb2uyqig] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 40px;
        padding-inline: 32px;
    }

    .lp-foot-brand[b-u8fb2uyqig],
    .lp-foot-copy[b-u8fb2uyqig] {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .lp-foot-inner[b-u8fb2uyqig] {
        grid-template-columns: minmax(15rem, 1fr) auto auto;
    }

    .lp-foot-brand[b-u8fb2uyqig] {
        grid-column: auto;
    }
}
/* /Components/Layout/GuestNavMenu.razor.rz.scp.css */
/* ============================================================
   Guest header — scoped styles

   Anonymous visitors only; the signed-in nav (StudentNavMenu) keeps the
   shared student-nav-menu.css styles. None of the global .top-navbar /
   .nav-links-desktop classes are used here on purpose — below 860px those are
   hidden with !important.

   Phone (< 768px): a two-row grid. Row 1 (languages + Sign in, tinted) scrolls
   away because the header sticks at top:-40px; row 2 (brand + call to action)
   stays. Wider: one 68px row in DOM order — brand, languages, Sign in, CTA.

   Colours mirror the --skrol-* brand family with literal fallbacks; layout
   uses logical properties so the Arabic (RTL) build mirrors for free.
   ============================================================ */

.lp-nav[b-8qj5dhjgff] {
    /* Same Scandinavian palette as GuestLandingPage.razor.css (literal values:
       the signed-in --skrol-* brand tokens are violet). */
    --lp-nav-blue-deep: #00558c;
    --lp-nav-blue: #006aa7;
    --lp-nav-ink: #15202b;
    --lp-nav-ink-soft: #4f5b67;
    --lp-nav-line: #e4e8ec;
    --lp-nav-tint: #f3f6f9;
    --lp-nav-gutter: 16px;

    position: sticky;
    top: -40px;
    z-index: 1030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 40px 56px;
    grid-template-areas:
        "langs signin"
        "brand cta";
    align-items: center;
    column-gap: 8px;
    padding-inline: var(--lp-nav-gutter);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-block-end: 1px solid var(--lp-nav-line);
    color: var(--lp-nav-ink);
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.3;
}

/* The tinted band behind row 1, full-bleed across the gutters. */
.lp-nav[b-8qj5dhjgff]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 40px;
    background: var(--lp-nav-tint);
}

/* A keyboard user tabbing into row 1 after scrolling must see it (WCAG 2.4.11):
   while focus is inside, the whole header comes back into view. */
.lp-nav:focus-within[b-8qj5dhjgff] {
    top: 0;
}

.lp-nav a[b-8qj5dhjgff] {
    text-decoration: none;
}

/* --- Skip link --------------------------------------------- */
.lp-nav-skip[b-8qj5dhjgff] {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--lp-nav-blue-deep);
    color: #fff;
    font-weight: 700;
    transform: translateY(-160%);
}

.lp-nav-skip:focus[b-8qj5dhjgff] {
    transform: none;
    color: #fff;
}

/* --- Languages ---------------------------------------------- */
.lp-nav-langs[b-8qj5dhjgff] {
    grid-area: langs;
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    font-size: 14px;
}

.lp-nav-langs > .bi[b-8qj5dhjgff] {
    color: var(--lp-nav-ink-soft);
    font-size: 15px;
}

.lp-nav-langs ul[b-8qj5dhjgff] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-nav-langs a[b-8qj5dhjgff] {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding-inline: 7px;
    color: var(--lp-nav-ink-soft);
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
}

/* Arabic script needs a face that has it; Hanken Grotesk is Latin only. */
.lp-nav-langs a:lang(ar)[b-8qj5dhjgff] {
    font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
    font-size: 15px;
}

.lp-nav-langs a:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-blue-deep);
}

.lp-nav-langs a[aria-current="true"][b-8qj5dhjgff] {
    color: var(--lp-nav-blue-deep);
    font-weight: 800;
    box-shadow: inset 0 -2px 0 var(--lp-nav-blue);
    border-radius: 0;
}

/* --- Sign in ------------------------------------------------ */
.lp-nav-signin[b-8qj5dhjgff] {
    grid-area: signin;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding-inline: 6px;
    color: var(--lp-nav-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.lp-nav-signin:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-blue-deep);
}

/* --- Brand -------------------------------------------------- */
.lp-nav-brand[b-8qj5dhjgff] {
    grid-area: brand;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-block-size: 44px;
    color: var(--lp-nav-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.lp-nav-brand:hover[b-8qj5dhjgff] {
    color: var(--lp-nav-ink);
}

.lp-nav-brand img[b-8qj5dhjgff] {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
}

/* --- Call to action ----------------------------------------- */
.lp-nav-cta[b-8qj5dhjgff] {
    grid-area: cta;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 42px;
    padding-inline: 16px;
    border-radius: 12px;
    background: var(--lp-nav-blue-deep);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s, scale .15s cubic-bezier(.2, .7, .2, 1);
}

.lp-nav-cta:hover[b-8qj5dhjgff],
.lp-nav-cta:focus-visible[b-8qj5dhjgff] {
    background: #00416c;
    color: #fff;
}

/* The same press as the landing page's buttons. */
@media (prefers-reduced-motion: no-preference) {
    .lp-nav-cta:active[b-8qj5dhjgff] {
        scale: .98;
    }
}

.lp-nav :focus-visible[b-8qj5dhjgff] {
    outline: 3px solid var(--lp-nav-blue);
    outline-offset: 2px;
    border-radius: 8px;
}

.lp-nav .lp-nav-cta:focus-visible[b-8qj5dhjgff] {
    border-radius: 12px;
}

/* Phones: row 1 sits at the very top of the viewport, so an outset ring would
   lose its top edge — draw it inside the link box instead. */
@media (max-width: 767.98px) {
    .lp-nav .lp-nav-langs a:focus-visible[b-8qj5dhjgff],
    .lp-nav .lp-nav-signin:focus-visible[b-8qj5dhjgff] {
        outline-offset: -3px;
    }
}

/* --- Very narrow phones -------------------------------------- */
@media (max-width: 359.98px) {
    .lp-nav[b-8qj5dhjgff] {
        --lp-nav-gutter: 12px;
    }

    .lp-nav-langs > .bi[b-8qj5dhjgff] {
        display: none;
    }

    .lp-nav-langs a[b-8qj5dhjgff] {
        padding-inline: 5px;
    }

    /* Keep the name for assistive tech; show the mark only. */
    .lp-nav-name[b-8qj5dhjgff] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lp-nav-cta[b-8qj5dhjgff] {
        padding-inline: 14px;
        font-size: 14px;
    }
}

/* --- Landing page, phones: one call to action on screen at a time ------
   #lp-hero-cta (GuestLandingPage) defines the view timeline; the page-wide
   timeline-scope that lets this header see it lives in student-nav-menu.css.
   The header's button shows before the hero's has scrolled into view (a
   landscape phone, large text), fades out while the hero's is on screen, and
   comes back once it has gone under the bar. Only opacity/visibility animate,
   so nothing reflows while scrolling. Without support these rules are skipped
   and the button simply stays visible. */
@keyframes lp-nav-cta-swap-b-8qj5dhjgff {
    entry 0% {
        opacity: 1;
        visibility: visible;
    }

    entry 100%, exit 0% {
        opacity: 0;
        visibility: hidden;
    }

    exit 100% {
        opacity: 1;
        visibility: visible;
    }
}

@supports (animation-timeline: view()) and (timeline-scope: --lp-hero-cta) {
    @media (max-width: 767.98px) {
        :root:has(#lp-hero-cta) .lp-nav-cta[b-8qj5dhjgff] {
            animation: lp-nav-cta-swap-b-8qj5dhjgff linear both;
            animation-timeline: --lp-hero-cta;
        }
    }
}

/* --- Tablet and up: one row ---------------------------------------- */
@media (min-width: 768px) {
    .lp-nav[b-8qj5dhjgff] {
        --lp-nav-gutter: max(32px, calc((100% - 1120px) / 2 + 32px));

        top: 0;
        display: flex;
        align-items: center;
        gap: 20px;
        block-size: 68px;
    }

    .lp-nav[b-8qj5dhjgff]::before {
        content: none;
    }

    .lp-nav-brand[b-8qj5dhjgff] {
        font-size: 20px;
    }

    .lp-nav-brand img[b-8qj5dhjgff] {
        inline-size: 30px;
        block-size: 30px;
    }

    .lp-nav-langs[b-8qj5dhjgff] {
        padding-inline-start: 16px;
        border-inline-start: 1px solid var(--lp-nav-line);
    }

    .lp-nav-signin[b-8qj5dhjgff] {
        margin-inline-start: auto;
        min-block-size: 44px;
        padding-inline: 10px;
        font-size: 15px;
    }

    .lp-nav-cta[b-8qj5dhjgff] {
        min-block-size: 44px;
        padding-inline: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-nav-cta[b-8qj5dhjgff] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-o65e91c1af] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-o65e91c1af] {
    flex: 1;
}

.sidebar[b-o65e91c1af] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-o65e91c1af] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-o65e91c1af]  a, .top-row[b-o65e91c1af]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-o65e91c1af]  a:hover, .top-row[b-o65e91c1af]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-o65e91c1af]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-o65e91c1af] {
        justify-content: space-between;
    }

    .top-row[b-o65e91c1af]  a, .top-row[b-o65e91c1af]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-o65e91c1af] {
        flex-direction: row;
    }

    .sidebar[b-o65e91c1af] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-o65e91c1af] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-o65e91c1af]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-o65e91c1af], article[b-o65e91c1af] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-o65e91c1af] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-o65e91c1af] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-zemv5nkgcl] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-zemv5nkgcl] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-zemv5nkgcl] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-zemv5nkgcl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-zemv5nkgcl] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-zemv5nkgcl] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-zemv5nkgcl] {
        padding-bottom: 1rem;
    }

    .nav-item[b-zemv5nkgcl]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-zemv5nkgcl]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-zemv5nkgcl]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-zemv5nkgcl] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-zemv5nkgcl] {
    display: block;
}

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

    .nav-scrollable[b-zemv5nkgcl] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReaderLayout.razor.rz.scp.css */
.book-reader-layout[b-ugvfzco8q0] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

    .book-reader-layout header[b-ugvfzco8q0] {
        background-color: #333;
        color: white;
        padding: 10px;
        text-align: center;
    }

    .book-reader-layout main[b-ugvfzco8q0] {
        flex: 1;
        overflow: auto;
    }
/* /Components/Pages/Admin/ExerciseBankReview.razor.rz.scp.css */
/* The exercise-bank review page. Bootstrap does the layout; this is only what it lacks:
   a selectable card, a status tint on a queue card, and compact key rows. Bootstrap here is
   5.0.2 — no -subtle / -emphasis utilities, hence the literal tints. */

.eb-context[b-diwyu7nfun] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.eb-spec-list[b-diwyu7nfun] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.eb-spec[b-diwyu7nfun] {
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: border-color .12s, background-color .12s;
}

.eb-spec:hover[b-diwyu7nfun],
.eb-spec:focus-visible[b-diwyu7nfun] {
    background: #f8f9fa;
    outline: none;
}

.eb-spec.is-selected[b-diwyu7nfun] {
    border-left-color: #0d6efd;
    background: #eef4ff;
}

.eb-spec.is-retired[b-diwyu7nfun] {
    opacity: .6;
}

.eb-count[b-diwyu7nfun] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.eb-spec-panel .eb-action[b-diwyu7nfun] {
    padding: .6rem 0;
    border-top: 1px solid #f1f3f5;
}

.eb-num[b-diwyu7nfun] {
    width: 5.5rem;
}

.eb-item[b-diwyu7nfun] {
    border-left: 4px solid #ced4da;
}

.eb-item.is-approved[b-diwyu7nfun] { border-left-color: #198754; }
.eb-item.is-rejected[b-diwyu7nfun] { border-left-color: #dc3545; opacity: .85; }
.eb-item.is-flagged[b-diwyu7nfun] { border-left-color: #ffc107; }

.eb-scene[b-diwyu7nfun] {
    color: #6c757d;
    font-style: italic;
}

.eb-prompt[b-diwyu7nfun] {
    font-size: 1.05rem;
}

.eb-answer[b-diwyu7nfun] {
    font-size: 1.15rem;
    font-weight: 500;
}

.eb-answer[b-diwyu7nfun]  .grammar-hl {
    background: #fff3cd;
    padding: 0 .15em;
    border-radius: .2em;
}

.eb-play[b-diwyu7nfun] {
    flex: 0 0 auto;
}

.eb-key[b-diwyu7nfun] {
    padding: .5rem .75rem;
    background: #f8f9fa;
    border-radius: .375rem;
}

.eb-key.eb-pending[b-diwyu7nfun] {
    background: #e7f5ff;
}

.eb-variant[b-diwyu7nfun] {
    padding: .15rem 0;
}

.eb-json[b-diwyu7nfun] {
    font-size: .8rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    padding: .5rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
}

.eb-note[b-diwyu7nfun] {
    max-width: 22rem;
}

.eb-variant-list .form-control[b-diwyu7nfun] {
    min-width: 12rem;
}

.min-w-0[b-diwyu7nfun] {
    min-width: 0;
}
/* /Components/Pages/Admin/ExerciseLessonQuestions.razor.rz.scp.css */
/* One lesson's Translate & Speak questions — shared by the Questions page and the Questions
   dialog on /admin/grammar. Bootstrap does the layout; this is the row tints and the answer
   highlight the review page also has. Bootstrap here is 5.0.2 — no -subtle / -emphasis
   utilities, hence the literal tints. */

.eq-focus[b-czg3eweco9] {
    white-space: pre-wrap;
    max-height: 6rem;
    overflow: auto;
}

/* The learner-language picker sits beside the lesson title; wide enough for a language name,
   never so wide it pushes a long title onto a third line. */
.eq-language[b-czg3eweco9] {
    flex: 0 0 auto;
    min-width: 12rem;
}

.eq-kind > .card-header[b-czg3eweco9] {
    background: #f8f9fa;
}

.eq-table td[b-czg3eweco9] {
    vertical-align: top;
}

.eq-table tr.eq-rejected td[b-czg3eweco9] {
    opacity: .55;
}

.eq-table tr.eq-flagged td:first-child[b-czg3eweco9] {
    box-shadow: inset 4px 0 0 #ffc107;
}

.eq-scene[b-czg3eweco9] {
    color: #6c757d;
    font-style: italic;
}

.eq-answer[b-czg3eweco9] {
    font-weight: 500;
}

.eq-answer[b-czg3eweco9]  .grammar-hl {
    background: #fff3cd;
    padding: 0 .15em;
    border-radius: .2em;
}

.eq-prompt[b-czg3eweco9] {
    font-size: .78rem;
}

.eq-variant-list .form-control[b-czg3eweco9] {
    min-width: 12rem;
}

.min-w-0[b-czg3eweco9] {
    min-width: 0;
}
/* /Components/Pages/Admin/ExerciseQuestions.razor.rz.scp.css */
/* The Questions page: only the sticky context bar is its own. Everything under it (the
   lesson card, the kind sections, the row tints) is ExerciseLessonQuestions and carries
   its own stylesheet. Bootstrap here is 5.0.2 — no -subtle / -emphasis utilities. */

.eq-context[b-6h91zjeqzd] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
/* /Components/Pages/Admin/GrammarManagement.razor.rz.scp.css */
/*
    The level context bar.

    Everything on this page below it is about ONE level, and the lesson list under it runs to
    dozens of rows. A picker that scrolls away leaves you editing, generating and publishing
    into a level you can no longer name — so it stays.

    The offset is the layout's own contract: MainLayout's .top-row is 3.5rem and sticks at
    top: 0 from 641px up, and is not sticky below that.
*/
.gm-context[b-dkctckuvtj] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

@media (min-width: 641px) {
    .gm-context[b-dkctckuvtj] {
        top: 3.5rem;
    }
}

/*
    The AI tools disclosure. A plain button, not a card header: collapsed it should read as
    one quiet line rather than as another panel competing with the lesson list.
*/
.gm-tools-toggle[b-dkctckuvtj] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    width: 100%;
    padding: .6rem .9rem;
    text-align: left;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    color: inherit;
}

.gm-tools-toggle:hover[b-dkctckuvtj] {
    background: var(--bs-secondary-bg, #e9ecef);
}

/* Open, the toggle is the lid of the panels below it rather than a box of its own. */
.gm-tools-toggle[aria-expanded="true"][b-dkctckuvtj] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 1rem;
}

/*
    The pop-out field editor.

    The Content dialog puts a card's two text lines (and its data JSON) on one narrow row;
    a long explanation or a hand-written JSON blob is unreviewable there. The expand button
    on each box, and a double-click on the box itself, open that one field in this dialog —
    a full-width, tall textarea with Previous / Next through the whole deck.

    It sits ON TOP of the fullscreen Content modal. Bootstrap's .modal is z-index 1055 and
    the later sibling in the DOM would already win, but two stacked modals is unusual enough
    that the intent is pinned here.
*/
.gm-field-modal[b-dkctckuvtj] {
    z-index: 1070;
    background-color: rgba(0, 0, 0, .5);
}

.gm-field-modal .modal-title[b-dkctckuvtj] {
    font-size: 1.05rem;
}

.gm-field-editor[b-dkctckuvtj] {
    min-height: 42vh;
    resize: vertical;
    font-size: .9rem;
}

/* Never a tab stop — the box beside it already is, and the pop-out is a mouse affordance. */
.gm-field-expand[b-dkctckuvtj] {
    flex: 0 0 auto;
}
/* /Components/Pages/Admin/GrammarStructure.razor.rz.scp.css */
/*
    The units half is the INSIDE of the level highlighted in the table above it. The rule and
    the indent are the only things saying so — without them it is a second table of the same
    rank, which is exactly the confusion this page was split out to end.
*/
.gs-detail[b-trahbex2uk] {
    border-left: 3px solid var(--bs-primary, #6f42c1);
    padding-left: 1rem;
    margin-left: .25rem;
}

/* The indent costs more than it buys once the table has to scroll sideways anyway. */
@media (max-width: 767.98px) {
    .gs-detail[b-trahbex2uk] {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
}
/* /Components/Pages/Admin/ListeningPracticeManagement.razor.rz.scp.css */
.nav-tabs .nav-link[b-x9w4e4mfre] {
    cursor: pointer;
}

.nav-pills .nav-link[b-x9w4e4mfre] {
    cursor: pointer;
}

.table-active[b-x9w4e4mfre] {
    background-color: rgba(13, 110, 253, 0.1);
}

.accordion-button[b-x9w4e4mfre] {
    background-color: #f8f9fa;
}

.accordion-button:not(.collapsed)[b-x9w4e4mfre] {
    background-color: #e7f1ff;
    color: #0a58ca;
}

.card[b-x9w4e4mfre] {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header[b-x9w4e4mfre] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.display-4[b-x9w4e4mfre] {
    font-size: 2.5rem;
    font-weight: 300;
}

.btn-group-sm > .btn[b-x9w4e4mfre] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.spinner-border[b-x9w4e4mfre] {
    width: 3rem;
    height: 3rem;
}

.list-group-item-success[b-x9w4e4mfre] {
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.pagination[b-x9w4e4mfre] {
    margin-top: 1rem;
}

.badge[b-x9w4e4mfre] {
    font-weight: 500;
}

@media (max-width: 768px) {
    .btn-group[b-x9w4e4mfre] {
        display: flex;
        flex-direction: column;
    }
    
    .btn-group > .btn[b-x9w4e4mfre] {
        margin-bottom: 0.25rem;
    }
}
/* /Components/Shared/ReadingLevelComponent.razor.rz.scp.css */
/* ========================================
   READING LEVEL COMPONENT - OPTIMIZED CSS
   ======================================== */

/* ============================================
   LEVEL BUTTON - BASE STYLES
   ============================================ */
.level-button[b-8frnoroil4] {
    --btn-radius: 12px;
    --btn-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    min-height: 60px;
    position: relative;
    border-radius: var(--btn-radius);
    padding: 0.75rem 1.25rem;
    text-align: center;
    
    /* Performance optimization */
    will-change: transform, box-shadow;
    transition: transform var(--btn-transition), 
                box-shadow var(--btn-transition),
                background-color var(--btn-transition),
                border-color var(--btn-transition);
}

/* Reset will-change when not hovered */
.level-button:not(:hover):not(:active)[b-8frnoroil4] {
    will-change: auto;
}

.level-button:hover[b-8frnoroil4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

/* ============================================
   LEVEL BUTTON - PRIMARY (Selected)
   ============================================ */
.level-button.btn-primary[b-8frnoroil4] {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6), #1d4ed8);
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    color: var(--bg-primary, white);
}

/* ============================================
   LEVEL BUTTON - OUTLINE (Unselected)
   ============================================ */
.level-button.btn-outline-primary[b-8frnoroil4] {
    border: 2px solid var(--gray-200, #e5e7eb);
    background: var(--bg-primary, white);
    color: var(--gray-500, #6b7280);
}

.level-button.btn-outline-primary:hover[b-8frnoroil4] {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
    background: #f8faff;
}

/* ============================================
   LEVEL BADGE & DESCRIPTION
   ============================================ */
.level-badge[b-8frnoroil4] {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.level-description[b-8frnoroil4] {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* ============================================
   CLICK ANIMATION
   ============================================ */
@keyframes levelSelect-b-8frnoroil4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

.level-button:active[b-8frnoroil4] {
    animation: levelSelect-b-8frnoroil4 0.2s ease;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-container[b-8frnoroil4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 768px) {
    .level-button[b-8frnoroil4] {
        min-height: 50px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        --btn-radius: 10px;
    }
    
    .level-description[b-8frnoroil4] {
        font-size: 0.7rem;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 576px) {
    .level-button[b-8frnoroil4] {
        width: 100%;
        margin-bottom: 0.5rem;
        min-height: 44px; /* Touch-friendly minimum */
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .level-button[b-8frnoroil4] {
        transition: none;
    }
    
    .level-button:hover[b-8frnoroil4] {
        transform: none;
    }
    
    .level-button:active[b-8frnoroil4] {
        animation: none;
    }
}

/* ============================================
   FOCUS STATES - ACCESSIBILITY
   ============================================ */
.level-button:focus-visible[b-8frnoroil4] {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}
/* /Components/Shared/StudentDashboard/GuestLandingPage.razor.rz.scp.css */
/* ============================================================
   Guest landing page — scoped styles

   Mobile first: the base rules are the 360–390px phone, then
   560 / 768 / 1024px step up. Logical properties only, so the Arabic
   (RTL) build mirrors without its own rules; the few direction-aware
   tweaks key off :lang(ar) / [dir="rtl"].

   Traps this file works around (see the memory note on design handoffs):
   * A global rule sets h1–h6 in Poppins — every heading here sets
     font-family: inherit.
   * A page-wide `.guest-landing a {color}` outranks one-class buttons
     under CSS isolation — the link rule is wrapped in :where().
   * FocusOnNavigate focuses the <h1> on navigation — it never shows a ring.
   * No overflow on ancestors of #lp-hero-cta other than `clip`: an
     `overflow:hidden` there would become the view-timeline's scroller and
     the header CTA would never appear. The same holds for every scroll
     reveal in the Motion section at the end.
   ============================================================ */

.guest-landing[b-8lenueeuc8] {
    /* Scandinavian palette: Swedish flag blue for anything you act on, warm linen
       and cool mist for surfaces, the flag's yellow only in small doses (step
       numbers, the correction tip, progress), slate for body text. Literal values:
       the signed-in brand tokens (--skrol-*) are violet and must not leak in. */
    --lp-blue-deep: #00558c;      /* buttons, links, accent text — 7.8:1 on white */
    --lp-blue-darker: #00416c;    /* hover */
    --lp-blue: #006aa7;           /* flag blue: headline accent, icons, focus */
    --lp-blue-sky: #3e8ed0;       /* decoration only */
    --lp-blue-tint: #eaf2f8;      /* chips, AI bubbles, stage pills */
    --lp-navy: #0b2a45;
    --lp-yellow: #fecc02;         /* flag yellow: fills only, never text on white */
    --lp-yellow-soft: #fff6d1;
    --lp-yellow-ink: #7a5b00;
    --lp-green: #1e6b52;
    --lp-green-soft: #e4f2ec;

    --lp-ink: #15202b;
    --lp-ink-soft: #4f5b67;
    --lp-line: #e4e8ec;
    --lp-linen: #f7f5f0;          /* alternate sections */
    --lp-mist: #f3f6f9;           /* picture panels inside cards */

    --lp-radius: 20px;
    --lp-shadow: 0 1px 2px rgba(11, 42, 69, .05), 0 12px 30px -22px rgba(11, 42, 69, .28);
    --lp-gutter: 16px;
    --lp-ease: cubic-bezier(.2, .7, .2, 1);   /* decelerate: every entrance and nudge */

    color: var(--lp-ink);
    background: #fff;
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Arabic: Hanken Grotesk has no Arabic glyphs, so they fall through to a
   system face per character; Latin words keep the brand face. */
.guest-landing:lang(ar)[b-8lenueeuc8] {
    font-family: "Hanken Grotesk", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
    line-height: 1.7;
}

/* Resets carry no specificity (:where), so any single-class rule below wins —
   a plain `.guest-landing p` would out-rank `.lp-lead` under CSS isolation. */
:where(.guest-landing) :where(p, ul, ol, dl, dd)[b-8lenueeuc8] {
    margin: 0;
}

:where(.guest-landing) :where(ul, ol)[b-8lenueeuc8] {
    padding: 0;
    list-style: none;
}

:where(.guest-landing) a[b-8lenueeuc8] {
    color: var(--lp-blue-deep);
}

.guest-landing a:focus-visible[b-8lenueeuc8],
.guest-landing summary:focus-visible[b-8lenueeuc8] {
    outline: 3px solid var(--lp-blue);
    outline-offset: 3px;
    border-radius: 8px;
}

/* The shared ring's 8px radius must not reshape the 12px buttons. */
.guest-landing .lp-btn:focus-visible[b-8lenueeuc8] {
    border-radius: 12px;
}

.guest-landing h1:focus[b-8lenueeuc8],
.guest-landing h1:focus-visible[b-8lenueeuc8] {
    outline: none;
}

/* --- Shell ------------------------------------------------- */
.lp-wrap[b-8lenueeuc8] {
    inline-size: 100%;
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: var(--lp-gutter);
}

.lp-wrap-narrow[b-8lenueeuc8] {
    max-inline-size: 800px;
}

.lp-section[b-8lenueeuc8] {
    padding-block: 56px;
}

.lp-head[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-inline-size: 680px;
    margin-block-end: 28px;
}

/* --- Type -------------------------------------------------- */
.lp-h1[b-8lenueeuc8],
.lp-h2[b-8lenueeuc8],
.lp-h3[b-8lenueeuc8],
.lp-final-title[b-8lenueeuc8],
.lp-start-title[b-8lenueeuc8] {
    font-family: inherit;
    margin: 0;
    color: inherit;
    text-wrap: balance;
}

.lp-h1[b-8lenueeuc8] {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.lp-h2[b-8lenueeuc8] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.lp-h3[b-8lenueeuc8] {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.guest-landing:lang(ar) :is(.lp-h1, .lp-h2, .lp-h3, .lp-final-title)[b-8lenueeuc8] {
    letter-spacing: 0;
    line-height: 1.3;
}

.lp-sub[b-8lenueeuc8] {
    color: var(--lp-ink-soft);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Buttons ----------------------------------------------- */
.lp-btn[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 54px;
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s, box-shadow .15s, scale .15s var(--lp-ease);
}

.guest-landing .lp-btn-primary[b-8lenueeuc8] {
    background: var(--lp-blue-deep);
    color: #fff;
    box-shadow: none;
}

.guest-landing .lp-btn-primary:hover[b-8lenueeuc8] {
    background: var(--lp-blue-darker);
    color: #fff;
}

.lp-btn-arrow[b-8lenueeuc8] {
    font-size: 18px;
    transition: translate .2s var(--lp-ease);
}

:root[dir="rtl"] .lp-btn-arrow[b-8lenueeuc8] {
    transform: scaleX(-1);
}

/* --- 1. Hero ----------------------------------------------- */
.lp-hero[b-8lenueeuc8] {
    position: relative;
    overflow: clip;
    padding-block: 28px 48px;
    background:
        radial-gradient(120% 55% at 50% 0%, #eef4f9 0%, rgba(238, 244, 249, 0) 72%),
        #fff;
}

.lp-hero-grid[b-8lenueeuc8] {
    display: grid;
    gap: 32px;
}

.lp-hero-copy[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lp-eyebrow[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.lp-eyebrow .bi[b-8lenueeuc8] {
    color: var(--lp-blue);
}

.lp-hero .lp-h1[b-8lenueeuc8] {
    margin-block-start: 16px;
}

/* Solid flag blue: the headline's accent carries meaning, not decoration. */
.lp-accent[b-8lenueeuc8] {
    color: var(--lp-blue);
}

.lp-lead[b-8lenueeuc8] {
    margin-block-start: 14px;
    max-inline-size: 36em;
    color: var(--lp-ink-soft);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

.lp-hero .lp-btn[b-8lenueeuc8] {
    align-self: stretch;
    max-inline-size: 420px;
    margin-block-start: 24px;
}

/* The phone header's call to action fades in as this button passes under the
   56px sticky bar (GuestNavMenu.razor.css; timeline-scope in student-nav-menu.css). */
@supports (animation-timeline: view()) and (timeline-scope: --lp-hero-cta) {
    #lp-hero-cta[b-8lenueeuc8] {
        view-timeline: --lp-hero-cta block;
        view-timeline-inset: 56px 0px;
    }
}

.lp-trust[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-block-start: 14px;
    color: var(--lp-ink-soft);
    font-size: 14px;
    font-weight: 600;
}

.lp-trust li[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lp-trust .bi[b-8lenueeuc8] {
    color: var(--lp-green);
    font-size: 15px;
}

/* Hero picture: an AI role-play turn */
.lp-hero-visual[b-8lenueeuc8] {
    position: relative;
}

.lp-hero-visual[b-8lenueeuc8]::before {
    content: "";
    position: absolute;
    inset: 12% -4% -6% 14%;
    border-radius: 40px;
    background: radial-gradient(closest-side, rgba(62, 142, 208, .22), rgba(0, 106, 167, .08) 60%, transparent);
    filter: blur(24px);
}

.lp-chat[b-8lenueeuc8] {
    position: relative;
    max-inline-size: 440px;
    margin-inline: auto;
    padding: 14px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
    box-shadow: 0 24px 48px -26px rgba(11, 42, 69, .35);
}

.lp-chat-head[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--lp-line);
}

.lp-chat-ico[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--lp-yellow-soft);
    color: var(--lp-navy);
    font-size: 15px;
}

.lp-chat-title[b-8lenueeuc8] {
    font-size: 14px;
    font-weight: 700;
}

.lp-ai-badge[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--lp-blue-deep);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.lp-msgs[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block-start: 12px;
}

.lp-msg[b-8lenueeuc8] {
    max-inline-size: 86%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.4;
}

.lp-msg-ai[b-8lenueeuc8] {
    align-self: flex-start;
    border-start-start-radius: 5px;
    background: var(--lp-blue-tint);
    color: var(--lp-ink);
}

.lp-msg-me[b-8lenueeuc8] {
    align-self: flex-end;
    border-start-end-radius: 5px;
    background: var(--lp-blue-deep);
    color: #fff;
}

.lp-err[b-8lenueeuc8] {
    text-decoration: underline wavy var(--lp-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.lp-msg-tr[b-8lenueeuc8] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-block-start: 5px;
    padding-block-start: 5px;
    border-block-start: 1px dashed #c9dbea;
    color: var(--lp-ink-soft);
    font-size: 13.5px;
}

.lp-msg-tr .bi[b-8lenueeuc8] {
    color: var(--lp-blue);
    font-size: 13px;
}

.lp-tip[b-8lenueeuc8] {
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    max-inline-size: 92%;
    padding: 8px 12px;
    border-inline-start: 3px solid var(--lp-yellow);
    border-radius: 10px;
    background: var(--lp-yellow-soft);
    color: var(--lp-ink);
    font-size: 14px;
    line-height: 1.45;
}

.lp-tip .bi[b-8lenueeuc8] {
    color: var(--lp-yellow-ink);
}

.lp-tip-label[b-8lenueeuc8] {
    color: var(--lp-yellow-ink);
    font-weight: 700;
}

/* The corrected word: bold with a solid underline, not only a highlight
   (a fill alone is 1.2:1 against the tip). The fill is an image so the
   hero entrance can sweep it across the word. */
.lp-tip mark[b-8lenueeuc8] {
    padding-inline: 2px;
    border-radius: 3px;
    background: linear-gradient(#ffe57a, #ffe57a) no-repeat 0 0 / 100% 100%;
    color: inherit;
    font-weight: 800;
    box-shadow: inset 0 -2px 0 var(--lp-yellow-ink);
}

/* --- 2. Four ways ------------------------------------------ */
.lp-ways[b-8lenueeuc8] {
    display: grid;
    gap: 16px;
}

.lp-way[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
    box-shadow: var(--lp-shadow);
}

.lp-way-copy[b-8lenueeuc8] {
    margin-block-end: 18px;
}

.lp-way-ico[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 14px;
    border-radius: 13px;
    color: #fff;
    font-size: 21px;
}

/* Soft tinted tiles, one quiet colour per experience. */
.lp-ico-ai[b-8lenueeuc8] { background: var(--lp-blue-tint); color: var(--lp-blue-deep); }
.lp-ico-guided[b-8lenueeuc8] { background: var(--lp-green-soft); color: var(--lp-green); }
.lp-ico-words[b-8lenueeuc8] { background: var(--lp-yellow-soft); color: var(--lp-navy); }
.lp-ico-videos[b-8lenueeuc8] { background: #eef1f4; color: #33475b; }

.lp-way-text[b-8lenueeuc8] {
    margin-block-start: 6px;
    color: var(--lp-ink-soft);
    text-wrap: pretty;
}

.lp-chip[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

/* The pictures: decorative (aria-hidden), nothing in them is operable. They
   grow to fill the card, so side-by-side cards end with equal-height panels. */
.lp-mock[b-8lenueeuc8] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border-radius: 16px;
    background: var(--lp-mist);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: none;
    user-select: none;
}

/* An explicit 1fr column: the inherited justify-content:center would otherwise
   shrink the track to its content and the card's min(100%, 280px) with it. */
.lp-mock-center[b-8lenueeuc8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}

/* AI: scenario rows */
.lp-scenes[b-8lenueeuc8] {
    display: grid;
    gap: 7px;
}

.lp-scenes li[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 42, 69, .06);
}

.lp-scene-ico[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
}

.lp-scene-name[b-8lenueeuc8] {
    flex: 1;
    min-inline-size: 0;
    font-weight: 700;
}

.lp-lvl[b-8lenueeuc8] {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lp-mist);
    box-shadow: inset 0 0 0 1px var(--lp-line);
    color: var(--lp-ink-soft);
    font-size: 11.5px;
    font-weight: 800;
}

.lp-lvl-hi[b-8lenueeuc8] {
    color: var(--lp-ink);
}

/* Guided: week 1 on the path */
.lp-track-week[b-8lenueeuc8] {
    margin-block-end: 10px;
    color: var(--lp-blue-deep);
    font-size: 12.5px;
    font-weight: 800;
}

.lp-track li[b-8lenueeuc8] {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
    padding-block-end: 12px;
}

.lp-track li:last-child[b-8lenueeuc8] {
    padding-block-end: 0;
}

.lp-track li:not(:last-child)[b-8lenueeuc8]::before {
    content: "";
    position: absolute;
    inset-block: 30px 2px;
    inset-inline-start: 13px;
    inline-size: 2px;
    border-radius: 2px;
    background: #cddfee;
}

.lp-node[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    font-size: 14px;
}

.is-done > .lp-node[b-8lenueeuc8] {
    background: var(--lp-blue-deep);
    color: #fff;
}

.is-now > .lp-node[b-8lenueeuc8] {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--lp-blue);
    color: var(--lp-blue);
}

.is-chat > .lp-node[b-8lenueeuc8] {
    background: var(--lp-yellow-soft);
    color: var(--lp-navy);
}

/* The lessons left out between the two shown. */
.lp-track li.is-gap[b-8lenueeuc8] {
    padding-block-end: 8px;
}

.is-gap > .lp-node[b-8lenueeuc8] {
    block-size: 18px;
    color: #6e879e;
    font-size: 16px;
}

.lp-node-body[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.lp-node-name[b-8lenueeuc8] {
    padding-block-start: 4px;
    font-weight: 700;
}

.lp-node-cap[b-8lenueeuc8] {
    color: var(--lp-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
}

.lp-stages[b-8lenueeuc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lp-stages > span[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--lp-line);
    color: var(--lp-ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.lp-stages > .is-done[b-8lenueeuc8] {
    background: var(--lp-blue-tint);
    box-shadow: none;
    color: var(--lp-blue-deep);
}

.lp-stages > .is-now[b-8lenueeuc8] {
    box-shadow: inset 0 0 0 1.5px var(--lp-blue);
    color: var(--lp-blue-deep);
}

/* Word Practice: a due flashcard */
.lp-flash[b-8lenueeuc8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    inline-size: min(100%, 280px);
    padding: 14px 14px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 0 -2px var(--lp-blue-tint), 0 14px 28px -20px rgba(11, 42, 69, .4);
    text-align: center;
}

.lp-due[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--lp-yellow-soft);
    color: var(--lp-yellow-ink);
    font-size: 12px;
    font-weight: 700;
}

.lp-flash-word[b-8lenueeuc8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.lp-flash-audio[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
    font-size: 15px;
}

.lp-flash-gloss[b-8lenueeuc8] {
    color: var(--lp-ink-soft);
    font-size: 15px;
}

.lp-rates[b-8lenueeuc8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    inline-size: 100%;
    margin-block-start: 2px;
}

.lp-rates > span[b-8lenueeuc8] {
    padding: 5px 4px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

.lp-rate-hard[b-8lenueeuc8] { background: #fbe9e7; color: #a3262a; }
.lp-rate-good[b-8lenueeuc8] { background: var(--lp-blue-tint); color: var(--lp-blue-deep); }
.lp-rate-easy[b-8lenueeuc8] { background: var(--lp-green-soft); color: var(--lp-green); }

/* Videos: player, then the subtitle bar under it */
.lp-screen[b-8lenueeuc8] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-block-size: 150px;
    inline-size: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--lp-navy), #1b4f7a);
}

.lp-screen[b-8lenueeuc8]::before,
.lp-screen[b-8lenueeuc8]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
}

.lp-screen[b-8lenueeuc8]::before {
    inline-size: 45%;
    block-size: 70%;
    inset-block-start: 10%;
    inset-inline-start: 12%;
    background: rgba(62, 142, 208, .55);
}

.lp-screen[b-8lenueeuc8]::after {
    inline-size: 38%;
    block-size: 60%;
    inset-block-end: 4%;
    inset-inline-end: 10%;
    background: rgba(62, 142, 208, .30);
}

.lp-speed[b-8lenueeuc8] {
    position: absolute;
    z-index: 1;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

.lp-progress[b-8lenueeuc8] {
    position: absolute;
    z-index: 1;
    inset-inline: 10px;
    inset-block-end: 9px;
    block-size: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .25);
}

.lp-progress > span[b-8lenueeuc8] {
    display: block;
    inline-size: 38%;
    block-size: 100%;
    border-radius: inherit;
    background: var(--lp-yellow);
}

.lp-subtitle[b-8lenueeuc8] {
    margin-block-start: 10px;
    padding: 9px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.lp-subtitle-sv[b-8lenueeuc8] {
    font-size: 15px;
    font-weight: 700;
}

.lp-subtitle-sv mark[b-8lenueeuc8] {
    padding-inline: 3px;
    border-radius: 4px;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
    text-decoration: underline dotted var(--lp-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.lp-subtitle-tr[b-8lenueeuc8] {
    margin-block-start: 3px;
    color: var(--lp-ink-soft);
    font-size: 13.5px;
}

/* --- 3. At a glance ---------------------------------------- */
.lp-glance[b-8lenueeuc8] {
    background: var(--lp-linen);
    border-block: 1px solid var(--lp-line);
}

.lp-facts[b-8lenueeuc8] {
    display: grid;
    gap: 12px;
}

.lp-fact[b-8lenueeuc8] {
    padding: 16px 18px;
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    background: #fff;
}

.lp-fact dt[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lp-blue-deep);
    font-size: 14px;
    font-weight: 800;
}

.lp-fact dt .bi[b-8lenueeuc8] {
    font-size: 17px;
}

.lp-fact dd[b-8lenueeuc8] {
    margin-block-start: 6px;
    color: var(--lp-ink);
    font-size: 16px;
    line-height: 1.5;
}

/* --- 4. FAQ ------------------------------------------------ */
.lp-faq[b-8lenueeuc8] {
    border-block-start: 1px solid var(--lp-line);
}

.lp-faq-item[b-8lenueeuc8] {
    border-block-end: 1px solid var(--lp-line);
}

.lp-faq-item summary[b-8lenueeuc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 60px;
    padding-block: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color .15s;
}

.lp-faq-item summary[b-8lenueeuc8]::-webkit-details-marker {
    display: none;
}

@media (hover: hover) {
    .lp-faq-item summary:hover[b-8lenueeuc8] {
        color: var(--lp-blue-deep);
    }

    .lp-faq-item summary:hover .lp-faq-chev[b-8lenueeuc8] {
        background: #dce9f4;
    }
}

.lp-faq-chev[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: var(--lp-blue-tint);
    color: var(--lp-blue-deep);
    font-size: 14px;
    transition: transform .3s var(--lp-ease), background-color .15s;
}

.lp-faq-item[open] .lp-faq-chev[b-8lenueeuc8] {
    transform: rotate(180deg);
}

.lp-faq-item p[b-8lenueeuc8] {
    max-inline-size: 68ch;
    padding-block-end: 20px;
    color: var(--lp-ink-soft);
    font-size: 16px;
    line-height: 1.65;
}

/* --- 5. Start ---------------------------------------------- */
.lp-final[b-8lenueeuc8] {
    position: relative;
    overflow: clip;
    padding-block: 56px;
    background: linear-gradient(180deg, var(--lp-navy) 0%, #0d3557 100%);
    color: #fff;
}

.lp-final-inner[b-8lenueeuc8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-inline-size: 760px;
    text-align: center;
}

.lp-final-title[b-8lenueeuc8] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.lp-final-lead[b-8lenueeuc8] {
    margin-block-start: 10px;
    color: #d4e3f0;
    font-size: 17px;
}

.lp-start[b-8lenueeuc8] {
    display: grid;
    gap: 14px;
    inline-size: 100%;
    max-inline-size: 420px;
    margin-block: 28px;
    text-align: start;
}

.lp-start li[b-8lenueeuc8] {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    align-content: start;
}

.lp-start-no[b-8lenueeuc8] {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: var(--lp-yellow);
    color: var(--lp-navy);
    font-size: 15px;
    font-weight: 800;
}

.lp-start-title[b-8lenueeuc8] {
    padding-block-start: 5px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.lp-start-text[b-8lenueeuc8] {
    margin-block-start: 2px;
    color: #d4e3f0;
    font-size: 14.5px;
    line-height: 1.45;
}

.guest-landing .lp-btn-light[b-8lenueeuc8] {
    align-self: stretch;
    max-inline-size: 420px;
    margin-inline: auto;
    inline-size: 100%;
    background: #fff;
    color: var(--lp-blue-deep);
    box-shadow: none;
}

.guest-landing .lp-btn-light:hover[b-8lenueeuc8] {
    background: var(--lp-blue-tint);
    color: var(--lp-blue-darker);
}

.lp-final a:focus-visible[b-8lenueeuc8] {
    outline-color: var(--lp-yellow);
}

.lp-final-note[b-8lenueeuc8] {
    margin-block-start: 12px;
    color: #d4e3f0;
    font-size: 14px;
}

.lp-final-signin[b-8lenueeuc8] {
    margin-block-start: 18px;
    color: #e3eef7;
    font-size: 15px;
}

.guest-landing .lp-final-signin a[b-8lenueeuc8] {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- ≥ 560px ----------------------------------------------- */
@media (min-width: 560px) {
    .lp-h1[b-8lenueeuc8] {
        font-size: 42px;
    }

    .lp-hero .lp-btn[b-8lenueeuc8],
    .guest-landing .lp-btn-light[b-8lenueeuc8] {
        align-self: flex-start;
        inline-size: auto;
    }

    .guest-landing .lp-btn-light[b-8lenueeuc8] {
        align-self: center;
    }

    .lp-facts[b-8lenueeuc8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- ≥ 768px ----------------------------------------------- */
@media (min-width: 768px) {
    .guest-landing[b-8lenueeuc8] {
        --lp-gutter: 32px;
        font-size: 17px;
    }

    .lp-section[b-8lenueeuc8] {
        padding-block: 80px;
    }

    .lp-head[b-8lenueeuc8] {
        margin-inline: auto;
        margin-block-end: 40px;
        text-align: center;
        align-items: center;
    }

    .lp-h2[b-8lenueeuc8] {
        font-size: 36px;
    }

    .lp-ways[b-8lenueeuc8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .lp-way[b-8lenueeuc8] {
        padding: 26px;
    }

    .lp-mock[b-8lenueeuc8] {
        min-block-size: 168px;
    }

    .lp-final[b-8lenueeuc8] {
        padding-block: 88px;
    }

    .lp-final-title[b-8lenueeuc8] {
        font-size: 40px;
    }

    .lp-start[b-8lenueeuc8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        max-inline-size: none;
        margin-block: 36px;
        text-align: center;
    }

    .lp-start li[b-8lenueeuc8] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
    }

    .lp-start-title[b-8lenueeuc8] {
        padding-block-start: 0;
    }
}

/* --- ≥ 1024px ---------------------------------------------- */
@media (min-width: 1024px) {
    .lp-hero[b-8lenueeuc8] {
        padding-block: 72px 40px;
    }

    .lp-hero-grid[b-8lenueeuc8] {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        align-items: center;
        gap: 64px;
    }

    .lp-h1[b-8lenueeuc8] {
        font-size: 54px;
        line-height: 1.05;
    }

    .lp-lead[b-8lenueeuc8] {
        font-size: 19px;
    }

    .lp-section[b-8lenueeuc8] {
        padding-block: 96px;
    }

    .lp-h2[b-8lenueeuc8] {
        font-size: 40px;
    }

    .lp-facts[b-8lenueeuc8] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lp-chat[b-8lenueeuc8] {
        padding: 18px;
    }
}

/* ============================================================
   Motion

   CSS only. The page is static SSR, so there is no script to fail and no
   state for Blazor's enhanced navigation to wipe: it patches the DOM in
   place, so switching language never replays anything.

   * The hero plays once, on load. The copy rises in a 70ms cascade and the
     call to action is settled by 0.8s. Then the role-play picture plays its
     turn: the AI line, the learner's reply with its mistake flagged, the AI
     answer, and the correction with its fix highlighted (about 2s).
   * Everything below the fold is tied to scroll (a view timeline), not to a
     clock. It settles within the first 160px of entering the screen, so it
     can't lag behind a fast scroll and needs no observer. Browsers without
     scroll-driven animations just show the page as it is.
   * Only opacity, translate and scale move, apart from two small colour
     details in the hero picture. Entrances move vertically only, so RTL
     needs rules just for the arrow's nudge and the progress bar's origin.
   * animation-fill-mode is `backwards`, never `forwards`/`both`, so an
     element is hidden only before its animation starts. Afterwards its own
     :hover and :active styles still apply.
   * Screens only (print shows the page as is), and only when the visitor
     has not asked for reduced motion.
   ============================================================ */

@keyframes lp-rise-b-8lenueeuc8 {
    from {
        opacity: 0;
        translate: 0 var(--lp-rise, 16px);
    }
}

@keyframes lp-bubble-b-8lenueeuc8 {
    from {
        opacity: 0;
        translate: 0 8px;
        scale: .96;
    }
}

@keyframes lp-flag-b-8lenueeuc8 {
    from {
        text-decoration-color: transparent;
    }
}

@keyframes lp-sweep-b-8lenueeuc8 {
    from {
        background-size: 0% 100%;
    }
}

@keyframes lp-draw-y-b-8lenueeuc8 {
    from {
        scale: 1 0;
    }
}

@keyframes lp-grow-x-b-8lenueeuc8 {
    from {
        scale: 0 1;
    }
}

/* --- Hero: once, on load ----------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
    .lp-hero-copy[b-8lenueeuc8] {
        --lp-rise: 12px;
    }

    .lp-hero-copy > *[b-8lenueeuc8] {
        animation: lp-rise-b-8lenueeuc8 .6s var(--lp-ease) backwards;
    }

    .lp-hero-copy > :nth-child(2)[b-8lenueeuc8] { animation-delay: .07s; }
    .lp-hero-copy > :nth-child(3)[b-8lenueeuc8] { animation-delay: .14s; }
    .lp-hero-copy > :nth-child(4)[b-8lenueeuc8] { animation-delay: .21s; }
    .lp-hero-copy > :nth-child(5)[b-8lenueeuc8] { animation-delay: .28s; }

    .lp-hero-visual[b-8lenueeuc8] {
        animation: lp-rise-b-8lenueeuc8 .7s var(--lp-ease) .12s backwards;
    }

    /* The conversation, one message at a time. */
    .lp-msgs > *[b-8lenueeuc8] {
        transform-origin: 50% 100%;
        animation: lp-bubble-b-8lenueeuc8 .45s var(--lp-ease) backwards;
    }

    .lp-msgs > :nth-child(1)[b-8lenueeuc8] { animation-delay: .4s; }
    .lp-msgs > :nth-child(2)[b-8lenueeuc8] { animation-delay: .7s; }
    .lp-msgs > :nth-child(3)[b-8lenueeuc8] { animation-delay: 1.1s; }
    .lp-msgs > :nth-child(4)[b-8lenueeuc8] { animation-delay: 1.4s; }

    /* The mistake is flagged a beat after the reply lands... */
    .lp-err[b-8lenueeuc8] {
        animation: lp-flag-b-8lenueeuc8 .3s ease 1s backwards;
    }

    /* ...and the fix is highlighted once the correction has arrived. */
    .lp-tip mark[b-8lenueeuc8] {
        animation: lp-sweep-b-8lenueeuc8 .4s var(--lp-ease) 1.7s backwards;
    }
}

/* --- Below the fold: tied to scroll ------------------------- */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 160px) {
    @media screen and (prefers-reduced-motion: no-preference) {
        .lp-head[b-8lenueeuc8],
        .lp-way[b-8lenueeuc8],
        .lp-fact[b-8lenueeuc8],
        .lp-faq[b-8lenueeuc8],
        .lp-final-title[b-8lenueeuc8],
        .lp-final-lead[b-8lenueeuc8],
        .lp-start > li[b-8lenueeuc8],
        .lp-btn-light[b-8lenueeuc8],
        .lp-final-note[b-8lenueeuc8],
        .lp-final-signin[b-8lenueeuc8] {
            animation: lp-rise-b-8lenueeuc8 var(--lp-ease) backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 160px;
        }

        .lp-way[b-8lenueeuc8] {
            --lp-rise: 24px;
        }

        /* Guided Learning: each connector on the path draws down as it
           comes on screen, so the path is whole once the week is. */
        .lp-track[b-8lenueeuc8] {
            view-timeline: --lp-track block;
        }

        .lp-track li:not(:last-child)[b-8lenueeuc8]::before {
            transform-origin: 50% 0;
            animation: lp-draw-y-b-8lenueeuc8 var(--lp-ease) backwards;
            animation-timeline: --lp-track;
            animation-range: entry 10% entry 60%;
        }

        .lp-track li:nth-child(2)[b-8lenueeuc8]::before {
            animation-range: entry 30% entry 80%;
        }

        .lp-track li:nth-child(3)[b-8lenueeuc8]::before {
            animation-range: entry 50% entry 100%;
        }

        /* Videos: the clip plays on while the card scrolls up. Linear, like
           playback. The timeline is named on the screen because its
           overflow:hidden would otherwise be the bar's scroller. */
        .lp-screen[b-8lenueeuc8] {
            view-timeline: --lp-screen block;
        }

        .lp-progress > span[b-8lenueeuc8] {
            transform-origin: 0 50%;
            animation: lp-grow-x-b-8lenueeuc8 linear backwards;
            animation-timeline: --lp-screen;
            animation-range: entry 40% cover 50%;
        }

        :root[dir="rtl"] .lp-progress > span[b-8lenueeuc8] {
            transform-origin: 100% 50%;
        }
    }

    /* Side-by-side items arrive a step apart, in reading order (RTL too,
       since the first child sits on the right there). */
    @media screen and (prefers-reduced-motion: no-preference) and (min-width: 560px) {
        .lp-fact:nth-child(even)[b-8lenueeuc8] {
            animation-range: entry 40px entry 200px;
        }
    }

    @media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) {
        .lp-way:nth-child(even)[b-8lenueeuc8] {
            animation-range: entry 60px entry 220px;
        }

        .lp-start > li:nth-child(2)[b-8lenueeuc8] {
            animation-range: entry 40px entry 200px;
        }

        .lp-start > li:nth-child(3)[b-8lenueeuc8] {
            animation-range: entry 80px entry 240px;
        }
    }

    @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
        .lp-fact:nth-child(2)[b-8lenueeuc8] {
            animation-range: entry 30px entry 190px;
        }

        .lp-fact:nth-child(3)[b-8lenueeuc8] {
            animation-range: entry 60px entry 220px;
        }

        .lp-fact:nth-child(4)[b-8lenueeuc8] {
            animation-range: entry 90px entry 250px;
        }
    }
}

/* --- Interaction ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    /* A press you can feel. */
    .lp-btn:active[b-8lenueeuc8] {
        scale: .98;
    }

    /* The arrow leans the way the button goes. */
    .lp-btn:focus-visible .lp-btn-arrow[b-8lenueeuc8] {
        translate: 3px 0;
    }

    :root[dir="rtl"] .lp-btn:focus-visible .lp-btn-arrow[b-8lenueeuc8] {
        translate: -3px 0;
    }

    /* FAQ answers open and close smoothly instead of snapping. Browsers
       without ::details-content (or interpolate-size) keep the instant
       toggle, or just fade the answer in. */
    .lp-faq-item[b-8lenueeuc8] {
        interpolate-size: allow-keywords;
    }

    .lp-faq-item[b-8lenueeuc8]::details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        transition:
            block-size .3s var(--lp-ease),
            opacity .3s ease,
            content-visibility .3s allow-discrete;
    }

    .lp-faq-item[open][b-8lenueeuc8]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lp-btn:hover .lp-btn-arrow[b-8lenueeuc8] {
        translate: 3px 0;
    }

    :root[dir="rtl"] .lp-btn:hover .lp-btn-arrow[b-8lenueeuc8] {
        translate: -3px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn[b-8lenueeuc8],
    .lp-btn-arrow[b-8lenueeuc8],
    .lp-faq-chev[b-8lenueeuc8] {
        transition: none;
    }
}