:root {
    --bg:#0b1220;
    --card:#111827;
    --text:#e5e7eb;
    --border:#1f2937;
    --accent:#3b82f6;
    --accent-strong:#2563eb;
    --nav:#0f172a;
    --control:#0f172a;
    --muted-control:#334155;
    --circle:#1f2937;
    --circle-border:#374151;
    --button-text:#ffffff;
    --soft:#172033;
    --active-fill:color-mix(in srgb, var(--accent) 22%, var(--control));
    --active-ink:color-mix(in srgb, var(--text) 94%, #ffffff);
    --danger-soft:rgba(255,95,87,0.14);
    --success-soft:rgba(40,200,64,0.16);
    --warning-soft:rgba(254,188,46,0.18);
    --surface-shadow:0 14px 38px rgba(0,0,0,0.22);
    --subtle-shadow:0 8px 22px rgba(0,0,0,0.14);

    --correct:#28c840;
    --wrong:#ff5f57;
    --flag:#febc2e;
    --hero-blue-gradient:linear-gradient(90deg, #ffffff 0%, #bfdbfe 34%, #67e8f9 68%, #ffffff 100%);
    --hero-button-bg:#132a45;
    --hero-button-pulse-bg:linear-gradient(90deg, #132a45 0%, #10243b 42%, #0b1d32 68%, #132a45 100%);
    --hero-button-border:#315f86;
    --hero-button-ink:#f4fbff;
    --landing-rail:1240px;
}

/* Keep native toolbar actions aligned with the bell after the broader mobile
   toolbar rules above. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial,
    body.is-native-app:not(.public-screen) .native-cart-header-btn {
        box-sizing:border-box;
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        flex:0 0 36px !important;
        border:1px solid color-mix(in srgb, var(--border) 82%, var(--text)) !important;
        border-radius:8px !important;
        background:var(--control) !important;
        box-shadow:none !important;
    }
}

/* Final header polish: make the brand mark clearer and keep the tutorial and
   appearance controls in the same quiet, squared-off language as the bell. */
body:not(.is-native-app) .brand > .wind-logo,
body:not(.is-native-app) .mobile-landing-brand .wind-logo {
    opacity:0.92 !important;
    filter:saturate(1.04) brightness(1.08) !important;
}

body:not(.is-native-app) .header-actions .header-tutorial-btn {
    box-sizing:border-box;
    position:relative;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:8px;
    font-size:0;
    line-height:1;
    box-shadow:none;
}

body:not(.is-native-app) .header-actions .header-tutorial-btn::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:19px;
    height:19px;
    background:currentColor;
    transform:translate(-50%, -50%);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m10 8 5 4-5 4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m10 8 5 4-5 4z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.is-native-app) .theme-toggle {
    box-sizing:border-box;
    width:36px;
    min-width:36px;
    height:36px;
    margin-right:0;
    display:grid;
    grid-template-columns:1fr;
    padding:0;
    border-radius:8px;
    box-shadow:none;
}

body:not(.is-native-app) .theme-toggle::before {
    display:none;
}

body:not(.is-native-app) .theme-toggle-option {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    border-radius:7px;
}

body:not(.is-native-app) .theme-toggle-sun,
body:not(.is-native-app) .theme-toggle-moon {
    display:none;
}

body:not(.is-native-app).light .theme-toggle-sun,
body:not(.is-native-app):not(.light) .theme-toggle-moon {
    display:grid;
}

body:not(.is-native-app) .theme-toggle:hover,
body:not(.is-native-app) .theme-toggle:focus-visible,
body:not(.is-native-app) .header-actions .header-tutorial-btn:hover,
body:not(.is-native-app) .header-actions .header-tutorial-btn:focus-visible {
    box-shadow:none;
    outline:none;
}

@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial,
    body.is-native-app:not(.public-screen) .native-cart-header-btn {
        position:relative;
        width:36px;
        min-width:36px;
        height:36px;
        min-height:36px;
        flex:0 0 36px;
        border-radius:8px;
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial-icon {
        position:absolute;
        top:50%;
        left:50%;
        margin:0;
        transform:translate(-50%, -50%);
    }
}

#landing-nav-primary-action[hidden] {
    display:none !important;
}

body.is-native-app #landing-hero-primary-action[hidden] {
    display:none !important;
}

/* The app landing screen keeps the hero focused on the main promise and
   actions; the longer supporting tagline remains available on the website. */
body.is-native-app.public-screen #landing-hero-support {
    display:none !important;
}

/* On the public website, logged-in visitors already have the dashboard
   action in the top navigation, so do not repeat it over the hero image. */
body.landing-user-authenticated #landing-hero-primary-action {
    display:none !important;
}

/* Keep the logged-in website navigation action quiet and legible against the
   hero rather than applying the promotional gradient used for new visitors. */
body.landing-user-authenticated #screen-landing > .landing-nav .landing-nav-cta {
    background:#ffffff;
    background-image:none;
    border-color:#ffffff;
    color:#0f172a;
    box-shadow:0 8px 20px rgba(2,6,23,0.2);
}

body.landing-user-authenticated #screen-landing > .landing-nav .landing-nav-cta:hover,
body.landing-user-authenticated #screen-landing > .landing-nav .landing-nav-cta:focus-visible {
    background:#eaf2ff;
    background-image:none;
    color:#0b1d32;
}

@media (max-width: 900px) {
    #screen-landing > .landing-nav > .landing-nav-actions.single-action {
        width:auto;
        max-width:none;
        display:flex;
        margin-left:auto;
        margin-right:0;
    }

    #screen-landing > .landing-nav > .landing-nav-actions.single-action > .nav-btn {
        width:auto;
        min-width:118px;
    }
}

/* Native quiz: compact context picker and fixed answer dock */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active {
        padding-top:env(safe-area-inset-top);
        padding-bottom:0;
        overflow-x:hidden;
    }

    body.is-native-app.quiz-screen-active.native-quiz-picker-open {
        overflow:hidden;
    }

    body.is-native-app.quiz-screen-active .content-wrapper {
        padding-top:72px;
        padding-bottom:0;
    }

    body.is-native-app.quiz-screen-active .quiz-study-layout,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed {
        display:block;
    }

    body.is-native-app.quiz-screen-active .native-quiz-header {
        box-sizing:border-box;
        position:fixed;
        z-index:121;
        top:env(safe-area-inset-top);
        right:0;
        left:0;
        min-height:62px;
        display:flex;
        align-items:center;
        gap:8px;
        margin:0;
        padding:7px 10px;
        border-bottom:1px solid color-mix(in srgb, var(--border) 88%, transparent);
        background:color-mix(in srgb, var(--bg) 96%, transparent);
        box-shadow:0 8px 24px rgba(0,0,0,0.16);
        backdrop-filter:blur(20px);
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        box-sizing:border-box;
        min-width:64px;
        min-height:46px;
        display:inline-flex;
        align-items:center;
        justify-content:flex-start;
        gap:3px;
        padding:0 8px 0 4px;
        border:0;
        border-radius:8px;
        background:transparent;
        color:var(--text);
        font:inherit;
        font-size:12px;
        font-weight:780;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:22px;
        height:22px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-bar {
        min-width:0;
        flex:1 1 auto;
        display:flex;
        align-items:stretch;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--border) 86%, var(--accent));
        border-radius:8px;
        background:color-mix(in srgb, var(--control) 86%, var(--card));
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn {
        box-sizing:border-box;
        min-width:0;
        min-height:46px;
        flex:1 1 50%;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 14px;
        grid-template-rows:auto auto;
        align-content:center;
        column-gap:4px;
        padding:5px 7px 5px 9px;
        border:0;
        border-right:1px solid var(--border);
        border-radius:0;
        background:transparent;
        color:var(--text);
        font:inherit;
        text-align:left;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn:last-child,
    body.is-native-app.quiz-screen-active .native-quiz-context-btn[hidden] + .native-quiz-context-btn {
        border-right:0;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn:has(+ .native-quiz-context-btn[hidden]) {
        border-right:0;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn[hidden] {
        display:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn[aria-expanded="true"] {
        background:color-mix(in srgb, var(--accent) 13%, var(--control));
        color:color-mix(in srgb, var(--text) 88%, var(--accent));
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-kicker {
        grid-column:1;
        color:color-mix(in srgb, var(--text) 54%, transparent);
        font-size:8px;
        font-weight:820;
        line-height:1.15;
        text-transform:uppercase;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn strong {
        min-width:0;
        grid-column:1;
        overflow:hidden;
        color:inherit;
        font-size:11px;
        font-weight:760;
        line-height:1.25;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-chevron {
        width:14px;
        height:14px;
        grid-column:2;
        grid-row:1 / 3;
        align-self:center;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        opacity:0.62;
        transition:transform 160ms ease;
    }

    body.is-native-app.quiz-screen-active .native-quiz-context-btn[aria-expanded="true"] .native-quiz-context-chevron {
        transform:rotate(90deg);
    }

    body.is-native-app.quiz-screen-active .native-quiz-picker-scrim {
        position:fixed;
        z-index:118;
        inset:calc(62px + env(safe-area-inset-top)) 0 0;
        display:none;
        padding:0;
        border:0;
        border-radius:0;
        background:rgba(2,6,14,0.56);
        backdrop-filter:blur(2px);
    }

    body.is-native-app.quiz-screen-active.native-quiz-picker-open .native-quiz-picker-scrim {
        display:block;
    }

    body.is-native-app.quiz-screen-active.native-quiz-picker-open .answer-confirm-row {
        visibility:hidden;
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active .module-sidebar,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar {
        box-sizing:border-box;
        position:fixed;
        z-index:120;
        top:calc(69px + env(safe-area-inset-top));
        right:10px;
        left:10px;
        width:auto;
        max-height:min(64dvh, 560px);
        display:none;
        overflow:auto;
        overscroll-behavior:contain;
        padding:8px;
        border:1px solid color-mix(in srgb, var(--border) 78%, var(--accent));
        border-radius:8px;
        background:var(--card);
        box-shadow:0 22px 60px rgba(0,0,0,0.4);
    }

    body.is-native-app.quiz-screen-active.native-quiz-picker-open .module-sidebar {
        display:flex;
    }

    body.is-native-app.quiz-screen-active .module-sidebar > .sidebar-toggle {
        display:none;
    }

    body.is-native-app.quiz-screen-active.native-subject-picker-open #module-topic-section,
    body.is-native-app.quiz-screen-active.native-subject-picker-open #module-pool-section,
    body.is-native-app.quiz-screen-active.native-topic-picker-open #module-subject-section {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .module-sidebar-section {
        width:100%;
        gap:7px;
    }

    body.is-native-app.quiz-screen-active #subject-sidebar-toggle,
    body.is-native-app.quiz-screen-active #module-topic-section > .sidebar-label {
        box-sizing:border-box;
        width:100%;
        margin:0;
        padding:9px 10px;
        border:0;
        border-bottom:1px solid var(--border);
        border-radius:0;
        background:transparent;
    }

    body.is-native-app.quiz-screen-active #subject-sidebar-toggle {
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active #subject-sidebar-toggle .subject-sidebar-toggle-icon {
        display:none;
    }

    body.is-native-app.quiz-screen-active .sidebar-list,
    body.is-native-app.quiz-screen-active .sidebar-list.topic-list {
        gap:3px;
        padding:0;
    }

    body.is-native-app.quiz-screen-active .sidebar-nav-item {
        min-height:44px;
        padding:9px 10px;
        border-radius:7px;
    }

    body.is-native-app.quiz-screen-active .quiz-content {
        padding-bottom:calc(96px + env(safe-area-inset-bottom));
    }

    body.is-native-app.quiz-screen-active .progress-step-prev,
    body.is-native-app.quiz-screen-active .progress-step-next {
        display:none;
    }

    body.is-native-app.quiz-screen-active .progress-summary-row {
        grid-template-columns:minmax(0, 1fr) minmax(118px, 0.72fr);
        grid-template-areas:
            "mode search"
            "summary summary"
            "reviews reviews";
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls) {
        box-sizing:border-box;
        position:fixed;
        z-index:130;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        max-width:none;
        min-height:74px;
        display:grid;
        grid-template-columns:52px minmax(0, 1fr) 68px 52px;
        grid-template-areas:"back confirm unsure next";
        align-items:center;
        gap:8px;
        margin:0;
        padding:9px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        border-top:1px solid color-mix(in srgb, var(--border) 88%, transparent);
        background:color-mix(in srgb, var(--bg) 96%, transparent);
        box-shadow:0 -12px 32px rgba(0,0,0,0.24);
        backdrop-filter:blur(22px);
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls):not(:has(.answer-unsure-btn)) {
        grid-template-columns:52px minmax(0, 1fr) 52px;
        grid-template-areas:"back confirm next";
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-prev {
        grid-area:back;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
        grid-area:confirm;
        width:100%;
        min-width:0;
        min-height:50px;
        padding:8px;
        border-radius:8px;
        font-size:12.5px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .answer-unsure-btn {
        grid-area:unsure;
        width:68px;
        min-width:68px;
        min-height:34px;
        height:34px;
        justify-self:center;
        padding:0 7px;
        border-radius:7px;
        font-size:10.5px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-next,
    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-finish {
        grid-area:next;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-next,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-finish {
        box-sizing:border-box;
        width:52px;
        min-width:52px;
        height:52px;
        min-height:52px;
        padding:0;
        border:1px solid color-mix(in srgb, var(--accent) 82%, var(--border));
        border-radius:8px;
        background:transparent !important;
        color:var(--text) !important;
        box-shadow:none;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev::before,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-next::before {
        font-size:27px;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev .answer-nav-text,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-next .answer-nav-text {
        display:none;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-finish {
        font-size:10.5px;
        font-weight:760;
    }

    body.is-native-app.quiz-screen-active .exam-answer-controls {
        grid-template-columns:auto minmax(0, 1fr) auto;
        grid-template-areas:"exam-nav . exam-submit";
    }

    body.is-native-app.quiz-screen-active .exam-submit-cluster {
        width:auto;
        min-width:0;
        justify-self:end;
        justify-content:flex-end;
    }

    body.is-native-app.quiz-screen-active .exam-submit-inline-btn {
        box-sizing:border-box;
        width:auto;
        min-width:84px;
        min-height:36px;
        height:36px;
        padding:0 10px;
        border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
        border-radius:7px;
        background:transparent !important;
        color:color-mix(in srgb, var(--text) 82%, var(--accent));
        -webkit-text-fill-color:color-mix(in srgb, var(--text) 82%, var(--accent));
        font-size:10.5px;
        font-weight:760;
        box-shadow:none;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .native-exam-review-footer {
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    body.is-native-app.quiz-screen-active .native-exam-review-back,
    body.is-native-app.quiz-screen-active .exam-final-submit-btn {
        box-sizing:border-box;
        width:auto;
        min-width:0;
        min-height:40px;
        padding:0 12px;
        border-radius:7px;
        font-size:11px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .native-exam-review-back {
        border:1px solid var(--border);
        background:transparent !important;
        color:var(--text);
        -webkit-text-fill-color:var(--text);
        box-shadow:none;
    }

    body.is-native-app.quiz-screen-active .exam-final-submit-btn {
        max-width:148px;
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster {
        grid-area:exam-nav;
        display:grid;
        grid-template-columns:52px 52px;
        gap:8px;
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn {
        grid-area:auto;
    }

    body.is-native-app.quiz-screen-active .exam-submit-cluster {
        min-width:0;
        grid-area:exam-submit;
        margin:0;
    }

    body.is-native-app.quiz-screen-active .exam-answer-progress {
        display:none;
    }

    body.is-native-app.quiz-screen-active .exam-submit-inline-btn {
        width:100%;
        min-width:0;
        min-height:50px;
        border-radius:8px;
        white-space:nowrap;
    }
}

/* Keep the licence context visible in Practice without turning it into a
   second headline. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-course-context {
        box-sizing:border-box;
        flex:0 0 auto;
        max-width:106px;
        overflow:hidden;
        padding:5px 7px;
        border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
        border-radius:999px;
        background:transparent;
        color:color-mix(in srgb, var(--text) 62%, var(--accent));
        font-size:8px;
        font-weight:850;
        letter-spacing:.04em;
        line-height:1.05;
        text-align:center;
        text-overflow:ellipsis;
        text-transform:uppercase;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .native-quiz-course-context[data-course="PPL"] {
        color:#4d8fbf;
    }

    body.is-native-app.quiz-screen-active .native-quiz-course-context[data-course="CPL"] {
        color:#4c9b91;
    }

    body.is-native-app.quiz-screen-active .native-quiz-course-context[data-course="Night Rating"] {
        color:#8373bd;
    }
}

/* Native app interaction and layout overrides */
html.tailwind-native,
html.tailwind-native body,
html.tailwind-native button,
html.tailwind-native a {
    touch-action:manipulation;
}

@media (max-width:720px) {
    body.is-native-app:not(.public-screen) {
        padding-top:env(safe-area-inset-top);
        padding-bottom:calc(70px + env(safe-area-inset-bottom));
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav {
        top:auto;
        right:0;
        bottom:0;
        left:0;
        min-height:0;
        display:block;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > .brand-home-btn,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > .header-actions {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav {
        box-sizing:border-box;
        position:static;
        width:100%;
        min-height:60px;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:0;
        padding:3px max(8px, env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border:0;
        border-top:1px solid color-mix(in srgb, var(--border) 68%, transparent);
        border-radius:0;
        background:color-mix(in srgb, var(--bg) 98%, transparent);
        box-shadow:none;
        backdrop-filter:blur(10px);
        pointer-events:auto;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        min-width:0;
        min-height:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:0;
        padding:3px;
        border-radius:6px;
        font-size:0;
        line-height:0;
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn::before {
        display:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn .nav-icon {
        width:21px;
        height:21px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:1.45;
        stroke-linecap:round;
        stroke-linejoin:round;
        opacity:0.76;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        background:transparent;
        color:var(--accent);
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active .nav-icon {
        opacity:0.92;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:hover,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:focus:not(:focus-visible) {
        background:transparent;
        box-shadow:none;
        transform:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:focus-visible {
        outline:1px solid color-mix(in srgb, var(--accent) 62%, transparent);
        outline-offset:-3px;
        background:transparent;
        box-shadow:none;
    }

    body.is-native-app.public-screen .landing-hero-night-trial {
        min-height:100dvh;
        background-color:#030811;
        background-image:
            linear-gradient(180deg, rgba(1,5,12,0.18), rgba(1,5,12,0.34)),
            url("assets/landing-hero-front-app.webp");
        background-position:center, center;
        background-size:cover, cover;
        background-repeat:no-repeat;
    }

    body.is-native-app.public-screen .landing-hero-night-trial::before {
        display:block;
        z-index:1;
        background:url("assets/landing-hero-front-app.webp") center / cover no-repeat;
        opacity:1;
        -webkit-mask-image:linear-gradient(
            180deg,
            transparent 0%,
            #000 18%,
            #000 82%,
            transparent 100%
        );
        mask-image:linear-gradient(
            180deg,
            transparent 0%,
            #000 18%,
            #000 82%,
            transparent 100%
        );
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        align-items:center;
        justify-content:flex-start;
        padding:clamp(132px, 21svh, 178px) 20px 220px;
        text-align:center;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .mobile-landing-brand {
        gap:9px;
        margin:0 auto;
    }

    body.is-native-app.public-screen .mobile-landing-brand-lockup {
        gap:10px;
    }

    body.is-native-app.public-screen .mobile-landing-brand .wind-logo {
        width:68px;
        height:38px;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        display:block;
        font-size:clamp(36px, 10.5vw, 48px);
        line-height:1;
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        width:auto;
        max-width:calc(100vw - 32px);
        color:rgba(214,234,250,0.82);
        font-family:Michroma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size:11px;
        font-weight:400;
        line-height:1.3;
        white-space:nowrap;
        text-shadow:0 8px 24px rgba(0,0,0,0.7);
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams {
        color:#74b1f6 !important;
        -webkit-text-fill-color:#74b1f6;
        font-size:clamp(14px, 4vw, 18px);
        font-weight:900;
        letter-spacing:0.1em;
        text-shadow:0 0 18px rgba(56,189,248,0.24), 0 8px 24px rgba(0,0,0,0.7);
    }

    body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        color:#74d99c !important;
        -webkit-text-fill-color:#74d99c;
        font-size:10px;
        font-weight:400;
        letter-spacing:0.16em;
        text-shadow:0 8px 24px rgba(0,0,0,0.7);
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls),
    body.is-native-app .quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls) {
        width:100%;
        display:grid;
        grid-template-columns:58px minmax(112px, 1fr) 58px;
        grid-template-areas:
            "back confirm next"
            ". unsure .";
        align-items:center;
        justify-content:stretch;
        gap:9px 12px;
        padding-left:0;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-prev {
        grid-area:back;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
        grid-area:confirm;
        width:100%;
        min-width:0;
        min-height:48px;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-next,
    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-finish {
        grid-area:next;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-unsure-btn {
        grid-area:unsure;
        width:84px;
        min-width:84px;
        min-height:30px;
        height:30px;
        justify-self:center;
        padding:0 10px;
        border-radius:7px;
        font-size:11px;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev,
    body.is-native-app .answer-confirm-row .answer-nav-btn-next {
        box-sizing:border-box;
        width:58px;
        min-width:58px;
        height:54px;
        min-height:54px;
        display:grid;
        place-items:center;
        padding:0;
        border:2px solid var(--accent);
        border-radius:10px;
        background:transparent;
        color:var(--text);
        font-size:0;
        box-shadow:none;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev::before,
    body.is-native-app .answer-confirm-row .answer-nav-btn-next::before {
        display:block;
        color:var(--text);
        font-size:31px;
        font-weight:500;
        line-height:1;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev::before {
        content:"←";
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-next::before {
        content:"→";
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn:disabled {
        opacity:0.38;
    }
}

@media (max-width: 720px), (display-mode: standalone) {
    body.is-mobile-app-shell:not(.public-screen) {
        background:var(--bg);
        min-height:100dvh;
        padding-top:env(safe-area-inset-top);
        padding-bottom:calc(72px + env(safe-area-inset-bottom));
        overflow-y:auto;
        overscroll-behavior-y:none;
        scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom));
        -webkit-tap-highlight-color:transparent;
    }

    body.is-mobile-app-shell:not(.public-screen) .content-wrapper {
        max-width:none;
        padding:12px 10px calc(96px + env(safe-area-inset-bottom));
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav.app-nav {
        position:fixed;
        top:auto;
        right:0;
        bottom:0;
        left:0;
        z-index:80;
        display:block;
        min-height:70px;
        padding:5px max(7px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
        border-top:1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-bottom:0;
        background:color-mix(in srgb, var(--bg) 94%, transparent);
        box-shadow:0 -10px 28px rgba(0,0,0,0.2);
        backdrop-filter:blur(18px);
    }

    body.is-mobile-app-shell:not(.public-screen) .brand-home-btn {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .brand-home-btn > span:last-child {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

    body.is-mobile-app-shell:not(.public-screen) .wind-logo {
        width:28px;
        height:18px;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav {
        width:100%;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:2px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn {
        min-width:0;
        min-height:58px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding:4px 2px 3px;
        border-radius:8px;
        color:color-mix(in srgb, var(--text) 72%, transparent);
        font-size:11px;
        font-weight:750;
        line-height:1;
        white-space:nowrap;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn + .nav-btn {
        margin-left:0;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn + .nav-btn::before {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn::before {
        content:"";
        width:22px;
        height:22px;
        flex:0 0 auto;
        background:currentColor;
        opacity:0.9;
    }

    body.is-mobile-app-shell:not(.public-screen) #nav-dashboard::before {
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-mobile-app-shell:not(.public-screen) #nav-quiz::before {
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h11a2 2 0 0 1 2 2v16l-3-2-3 2-3-2-3 2-3-2V5a2 2 0 0 1 2-2Zm2 5h8V6H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h11a2 2 0 0 1 2 2v16l-3-2-3 2-3-2-3 2-3-2V5a2 2 0 0 1 2-2Zm2 5h8V6H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-mobile-app-shell:not(.public-screen) #nav-logbook::before {
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-mobile-app-shell:not(.public-screen) #nav-settings::before {
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn.is-active {
        background:var(--active-fill);
        color:var(--active-ink);
        font-size:11px;
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn.is-course-trial::after,
    body.is-mobile-app-shell:not(.public-screen) .top-nav nav .nav-btn.is-course-locked::after {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .header-actions {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .mobile-nav-only {
        display:flex;
    }

    body.is-mobile-app-shell:not(.public-screen) .theme-toggle {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .account-avatar-btn {
        width:42px;
        height:42px;
        box-shadow:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .account-menu-panel {
        right:0;
        top:calc(100% + 12px);
        bottom:auto;
    }

    body.is-mobile-app-shell:not(.public-screen) .app-settings {
        padding-top:14px;
    }

    body.is-mobile-app-shell:not(.public-screen) .subscription-summary {
        margin-bottom:12px;
        padding:0;
    }

    body.is-mobile-app-shell:not(.public-screen) .subscription-card,
    body.is-mobile-app-shell:not(.public-screen) .subject-list-panel,
    body.is-mobile-app-shell:not(.public-screen) .quiz-card,
    body.is-mobile-app-shell:not(.public-screen) .module-sidebar {
        border-radius:8px;
        box-shadow:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-list {
        min-width:0;
        min-height:112px;
        gap:8px;
        padding:0;
        overflow-x:auto;
        scrollbar-width:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-list::-webkit-scrollbar {
        display:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-pill {
        flex:0 0 76%;
        min-height:112px;
        border-radius:8px;
        clip-path:none;
        transform:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-pill:not(:first-child) {
        margin-left:0;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-pill::before,
    body.is-mobile-app-shell:not(.public-screen) .course-access-pill::after {
        clip-path:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-pill.active,
    body.is-mobile-app-shell:not(.public-screen) .course-access-pill:hover,
    body.is-mobile-app-shell:not(.public-screen) .course-access-pill:focus-visible {
        transform:none;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-copy {
        left:14px;
        right:14px;
        bottom:12px;
        min-height:0;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-access-title {
        font-size:24px;
    }

    body.is-mobile-app-shell:not(.public-screen) .course-lock-tag {
        top:10px;
        right:10px;
        padding:5px 7px;
        font-size:10px;
    }

    body.is-mobile-app-shell:not(.public-screen) .subject-grid {
        gap:10px;
    }

    body.is-mobile-app-shell:not(.public-screen) .subject-list-row {
        min-height:58px;
        padding:11px 12px;
        border-color:color-mix(in srgb, var(--border) 82%, transparent);
    }

    body.is-mobile-app-shell:not(.public-screen) .subject-list-row button {
        min-height:34px;
        border-radius:8px;
    }

    body.is-mobile-app-shell:not(.public-screen) .quiz-study-layout,
    body.is-mobile-app-shell:not(.public-screen) .quiz-study-layout.sidebar-collapsed {
        gap:10px;
    }

    body.is-mobile-app-shell:not(.public-screen) .module-sidebar {
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        max-height:34svh;
        padding:8px;
        overflow:auto;
        overscroll-behavior:contain;
    }

    body.is-mobile-app-shell:not(.public-screen) #subject-sidebar-toggle {
        margin:-8px -8px 0;
    }

    body.is-mobile-app-shell:not(.public-screen) .sidebar-toggle {
        width:34px;
        height:34px;
        min-height:34px;
        border-radius:8px;
    }

    body.is-mobile-app-shell:not(.public-screen) .quiz-study-layout.sidebar-collapsed .module-sidebar {
        max-height:none;
        overflow:visible;
    }

    body.is-mobile-app-shell:not(.public-screen) .quiz-study-layout.sidebar-collapsed .sidebar-toggle {
        min-height:34px;
        border-radius:8px;
    }

    body.is-mobile-app-shell:not(.public-screen) .sidebar-list,
    body.is-mobile-app-shell:not(.public-screen) .sidebar-list.topic-list {
        padding-left:0;
    }

    body.is-mobile-app-shell:not(.public-screen) .sidebar-nav-item {
        min-height:34px;
        border-radius:8px;
    }

    body.is-mobile-app-shell:not(.public-screen) .quiz-card {
        --quiz-question-font-size:19px;
        --quiz-content-indent:0px;
        padding:22px 12px 16px;
        border-radius:24px;
    }

    body.is-mobile-app-shell:not(.public-screen) #question {
        margin-bottom:18px;
        line-height:1.35;
    }

    body.is-mobile-app-shell:not(.public-screen) #q-counter {
        margin-bottom:10px;
        font-size:12px;
    }
}

body.light {
    --bg:#f3f6fa;
    --card:#ffffff;
    --text:#0f172a;
    --border:#aebaca;
    --accent:#2563eb;
    --accent-strong:#1d4ed8;
    --nav:#dfe6ef;
    --control:#e9eef5;
    --muted-control:#b7c2d0;
    --circle:#e4eaf2;
    --circle-border:#7c8ca1;
    --button-text:#0f172a;
    --soft:#e4eaf2;
    --active-fill:color-mix(in srgb, var(--accent) 13%, var(--control));
    --active-ink:var(--text);
    --danger-soft:rgba(255,95,87,0.09);
    --success-soft:rgba(40,200,64,0.1);
    --warning-soft:rgba(254,188,46,0.18);
    --surface-shadow:0 12px 34px rgba(15,23,42,0.11);
    --subtle-shadow:0 8px 22px rgba(15,23,42,0.09);
}

html,
body {
    overflow-x:hidden;
}

body {
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    line-height:1.45;
    letter-spacing:0;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.language-zh {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
    line-height:1.55;
}

h1,
h2,
h3,
p {
    margin-top:0;
}

h1,
h2,
h3 {
    line-height:1.2;
}

.screen { display:none; }
.active-screen { display:block; }

/* Keep the first route hidden until auth and history restoration choose the
   correct screen, preventing a landing-page flash on startup. */
html.tailwind-web-boot {
    background:#0b1220;
}

html.tailwind-web-boot body {
    visibility:hidden;
    min-height:100dvh;
    overflow:hidden;
    background:#0b1220;
}

html.tailwind-web-boot #native-startup-surface {
    position:fixed;
    z-index:2147483647;
    inset:0;
    display:flex;
    visibility:visible;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:24px;
    background:#0b1220;
    color:#e5e7eb;
    font-family:Michroma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:clamp(16px, 4vw, 22px);
    letter-spacing:.12em;
}

html.tailwind-web-boot .native-startup-mark {
    width:42px;
    height:24px;
    flex:0 0 auto;
    background:url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
}

/* The native webview must not briefly expose the website landing page while
   Firebase restores the session and the app chooses its first screen. */
#native-startup-surface {
    display:none;
}

html.tailwind-native-boot {
    background:#0b1220;
}

html.tailwind-native-boot body {
    min-height:100dvh;
    overflow:hidden;
    background:#0b1220;
}

html.tailwind-native-boot .screen,
html.tailwind-native-boot .top-nav,
html.tailwind-native-boot .native-app-toolbar,
html.tailwind-native-boot .native-cart-slot,
html.tailwind-native-boot .landing-cart-slot,
html.tailwind-native-boot .content-wrapper {
    visibility:hidden !important;
}

html.tailwind-native-boot #native-startup-surface {
    position:fixed;
    z-index:2147483647;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:24px;
    background:#0b1220;
    color:#e5e7eb;
    font-family:Michroma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:clamp(16px, 4vw, 22px);
    letter-spacing:.12em;
}

html.tailwind-native-boot .native-startup-mark {
    width:42px;
    height:24px;
    flex:0 0 auto;
    background:url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
}

body.public-screen .app-nav {
    display:none;
}

body.public-screen .content-wrapper {
    display:none;
}

body.public-screen {
    --bg:#0b1220;
    --card:#111827;
    --text:#e5e7eb;
    --border:#1f2937;
    --accent:#3b82f6;
    --accent-strong:#2563eb;
    --nav:#0f172a;
    --control:#0f172a;
    --muted-control:#334155;
    --circle:#1f2937;
    --circle-border:#374151;
    --button-text:#ffffff;
    --soft:#172033;
    --active-fill:color-mix(in srgb, var(--accent) 22%, var(--control));
    --active-ink:color-mix(in srgb, var(--text) 94%, #ffffff);
    --danger-soft:rgba(255,95,87,0.14);
    --success-soft:rgba(40,200,64,0.16);
    --warning-soft:rgba(254,188,46,0.18);
    --surface-shadow:0 14px 38px rgba(0,0,0,0.22);
    --subtle-shadow:0 8px 22px rgba(0,0,0,0.14);
}

body.course-cue-course.course-ppl {
    --course-accent:#38bdf8;
    --course-accent-ink:#e0f2fe;
    --course-accent-soft:rgba(56,189,248,0.24);
    --course-accent-line:rgba(125,211,252,0.9);
}

body.course-cue-course.course-cpl {
    --course-accent:#2dd4bf;
    --course-accent-ink:#99f6e4;
    --course-accent-soft:rgba(45,212,191,0.17);
    --course-accent-line:rgba(45,212,191,0.58);
}

body.course-cue-course.course-night-rating {
    --course-accent:#a78bfa;
    --course-accent-ink:#ddd6fe;
    --course-accent-soft:rgba(167,139,250,0.19);
    --course-accent-line:rgba(167,139,250,0.64);
}

body.light.course-cue-course.course-ppl {
    --course-accent:#1d4ed8;
    --course-accent-ink:#1e3a8a;
    --course-accent-soft:rgba(37,99,235,0.16);
    --course-accent-line:rgba(29,78,216,0.58);
}

body.light.course-cue-course.course-cpl {
    --course-accent:#0891b2;
    --course-accent-ink:#155e75;
    --course-accent-soft:rgba(6,182,212,0.18);
    --course-accent-line:rgba(8,145,178,0.54);
}

body.light.course-cue-course.course-night-rating {
    --course-accent:#8b5cf6;
    --course-accent-ink:#5b21b6;
    --course-accent-soft:rgba(139,92,246,0.18);
    --course-accent-line:rgba(124,58,237,0.54);
}

/* LANDING */
.landing-nav {
    box-sizing:border-box;
    position:sticky;
    top:0;
    z-index:40;
    width:100%;
    max-width:none;
    margin:0;
    padding:16px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:rgba(11,18,32,0.82);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 34px rgba(2,6,23,0.16);
}

#screen-landing > .landing-nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:120;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    transition:background 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

#screen-landing > .landing-nav.is-solid {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:rgba(11,18,32,0.86);
    box-shadow:0 14px 34px rgba(2,6,23,0.16);
    backdrop-filter:blur(14px);
}

.landing-nav > .brand,
.landing-nav > .landing-nav-actions {
    max-width:var(--landing-rail);
}

.landing-nav > .brand {
    margin-left:max(0px, calc((100vw - var(--landing-rail)) / 2));
}

.landing-nav > .landing-nav-actions {
    margin-right:max(0px, calc((100vw - var(--landing-rail)) / 2));
}

@media (min-width: 721px) {
    #screen-landing > .landing-nav {
        --landing-hero-edge:max(28px, calc((100vw - var(--landing-rail)) / 2 - 18px));
    }

    #screen-landing > .landing-nav > .brand {
        margin-left:max(0px, calc(var(--landing-hero-edge) - 28px));
    }

    #screen-landing > .landing-nav > .landing-nav-actions {
        margin-right:max(0px, calc(var(--landing-hero-edge) - 28px));
    }

    #screen-landing > .landing-nav > .landing-nav-actions > button {
        box-sizing:border-box;
        width:auto;
        min-width:118px;
        height:38px;
        min-height:38px;
        padding:0 13px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        white-space:nowrap;
    }
}

@media (max-width: 900px) {
    #screen-landing > .landing-nav > .brand {
        display:none !important;
    }

    #screen-landing > .landing-nav > .landing-nav-actions {
        width:100%;
        max-width:840px;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:clamp(10px, 2.4vw, 20px);
        margin:0 auto;
    }

    #screen-landing > .landing-nav > .landing-nav-actions > button {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        height:44px;
        min-height:44px;
        padding:0 13px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        white-space:nowrap;
    }

    #screen-landing > .landing-nav > .landing-nav-actions > .landing-nav-cta {
        order:-1;
    }
}

.landing-nav-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.landing-cart-slot {
    position:absolute;
    top:calc(100% + 8px);
    right:max(28px, calc((100vw - var(--landing-rail)) / 2));
    z-index:126;
}

.landing-cart-slot:empty {
    display:none;
}

.landing-cart-slot .floating-cart {
    position:relative;
}

.floating-cart.is-authenticated-landing-hidden {
    display:none !important;
}

.landing-nav-actions > button {
    min-height:36px;
    padding:8px 13px;
    border-radius:6px;
    font:inherit;
    font-weight:750;
    white-space:normal;
}

.landing-nav-cta,
.landing-primary,
.landing-secondary {
    position:relative;
    min-height:36px;
    padding:8px 13px;
    border-radius:6px;
    border:1px solid var(--border);
    cursor:pointer;
    font:inherit;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
}

.landing-nav-cta,
.landing-primary {
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    border-color:transparent;
    color:var(--hero-button-ink);
    box-shadow:none;
    transition:background-position 420ms ease, filter 160ms ease;
}

.landing-nav-cta:hover,
.landing-primary:hover,
.landing-nav-cta:focus-visible,
.landing-primary:focus-visible {
    background-position:right center;
    filter:none;
    outline:none;
}

.landing-nav-cta:focus-visible,
.landing-primary:focus-visible {
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.46);
}

.landing-secondary {
    border-color:transparent;
    background:rgba(255,255,255,0.28);
    color:#172033;
    box-shadow:0 10px 24px rgba(20,38,56,0.12);
    backdrop-filter:blur(12px);
}

.landing-page {
    max-width:var(--landing-rail);
    margin:0 auto;
    padding:0 28px 14px;
}

.mobile-landing-brand {
    display:none;
}

.native-quiz-header {
    display:none;
}

.native-quiz-tutorial {
    display:none;
}

.native-quiz-picker-scrim {
    display:none;
}

.app-nav .nav-icon {
    display:none;
}

.landing-hero {
    width:100vw;
    margin-left:calc(50% - 50vw);
    min-height:max(720px, calc(100svh - 70px));
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:0;
    isolation:isolate;
    background:#dce8f0;
    border:0;
    color:#172033;
}

.landing-hero-clouds {
    position:absolute;
    pointer-events:none;
}

.hero-clouds-back {
    inset:-5%;
    z-index:0;
    background:
        radial-gradient(circle at 52% 30%, rgba(255,255,255,0.72), transparent 38%),
        radial-gradient(circle at 18% 84%, rgba(8,22,39,0.32), transparent 34%),
        radial-gradient(circle at 90% 82%, rgba(17,38,58,0.22), transparent 36%),
        linear-gradient(180deg, rgba(247,251,253,0.68) 0%, rgba(210,226,236,0.24) 42%, rgba(15,32,49,0.36) 100%),
        url("assets/landing-hero-clouds.webp") center / cover no-repeat;
    transform:scale(1.06);
}

.landing-hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(circle at 54% 37%, rgba(255,255,255,0.5), transparent 28%),
        linear-gradient(90deg, rgba(9,21,35,0.18) 0%, rgba(236,244,248,0.24) 18%, transparent 56%, rgba(11,25,39,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 46%, rgba(14,30,47,0.18) 100%);
}

.landing-hero-content {
    position:relative;
    z-index:2;
    box-sizing:border-box;
    width:min(var(--landing-rail), 100%);
    margin:0 auto;
    min-height:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:58px 28px 214px;
    color:#172033;
    text-align:center;
    transform:translate3d(0, 0, 0);
    pointer-events:none;
    will-change:transform;
}

.hero-kicker {
    margin:0 0 20px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    color:rgba(24,48,70,0.72);
    font-size:15px;
    letter-spacing:0.18em;
    text-shadow:0 1px 18px rgba(255,255,255,0.82);
}

.hero-kicker-divider {
    color:rgba(255,255,255,0.46);
    letter-spacing:0;
}

.hero-kicker-logbooks {
    color:#74d99c;
}

.landing-kicker {
    margin:0 0 35px;
    color:#74b1f6;
    font-size:20px;
    font-weight:700;
    text-transform:uppercase;
}

.hero_second_title {
    margin-top:34px;
    color:rgba(14,31,49,0.66);
    font-size:clamp(24px, 2.6vw, 38px);
    font-weight:500;
    letter-spacing:0.16em;
    white-space:nowrap;
    text-transform:uppercase;
}

.landing-hero h1 {
    margin:0;
    /*color:rgba(18,27,39,0.78);*/
     color:#172033;
}

.hero-title {
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:1320px;
    font-family:"Anton", system-ui, sans-serif;
    font-size:clamp(82px, 15.7vw, 198px);
    line-height:0.72;
    letter-spacing:0;
    font-weight:400;
    text-transform:uppercase;
    text-wrap:balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.36),
        0 22px 62px rgba(255,255,255,0.38),
        0 34px 80px rgba(10,28,48,0.16);
}

.hero-title span {
    display:block;
}

.hero-title > span:first-child {
    letter-spacing:0.035em;
    transform:scaleX(1.05);
    transform-origin:left center;
}

.landing-hero-plane {
    position:absolute;
    z-index:3;
    top:38%;
    left:52%;
    width:min(99vw, 1340px);
    height:auto;
    transform:translate3d(-50%, -28%, 0);
    filter:
        drop-shadow(0 32px 44px rgba(11,31,50,0.28))
        drop-shadow(0 -12px 34px rgba(255,255,255,0.22));
    pointer-events:none;
    will-change:transform;
}
/*
.hero-clouds-front {
    left:-9%;
    right:-9%;
    bottom:-12%;
    height:56%;
    z-index:4;
    opacity:0.94;
    background:
        radial-gradient(ellipse at 8% 78%, rgba(232,238,243,0.98) 0 18%, rgba(118,134,150,0.54) 30%, transparent 48%),
        radial-gradient(ellipse at 34% 76%, rgba(230,236,242,0.96) 0 16%, rgba(104,122,139,0.5) 31%, transparent 50%),
        radial-gradient(ellipse at 66% 82%, rgba(232,238,243,0.98) 0 19%, rgba(98,116,134,0.54) 34%, transparent 54%),
        radial-gradient(ellipse at 92% 72%, rgba(226,234,240,0.96) 0 18%, rgba(99,116,132,0.5) 32%, transparent 52%),
        linear-gradient(180deg, transparent 0%, rgba(198,210,220,0.68) 46%, rgba(122,138,154,0.9) 100%);
    transform:scale(1.04);
    filter:brightness(0.94) saturate(0.9);
}

.hero-foreground-clouds {
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    transform:none;
}


.hero-foreground-clouds::before {
    content:"";
    position:absolute;
    left:-18%;
    right:-18%;
    bottom:-76px;
    height:72%;
    background:url("assets/foreground-clouds.webp") center bottom / 138% auto no-repeat;
    mask-image:linear-gradient(180deg, transparent 0%, transparent 12%, rgba(0,0,0,0.2) 32%, rgba(0,0,0,0.72) 58%, #000 100%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 12%, rgba(0,0,0,0.2) 32%, rgba(0,0,0,0.72) 58%, #000 100%);
}

.hero-foreground-clouds::after {
    content:"";
    position:absolute;
    left:-42%;
    right:-28%;
    bottom:-42px;
    height:62%;
    background:url("assets/foreground-clouds.webp") left bottom / 118% auto no-repeat;
    opacity:0.74;
    filter:brightness(0.82) saturate(0.88);
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 72%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 16%, rgba(0,0,0,0.54) 44%, #000 100%);
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 72%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 16%, rgba(0,0,0,0.54) 44%, #000 100%);
    mask-composite:intersect;
    -webkit-mask-composite:source-in;
}
*/

/*hero image*/
.landing-hero-night-trial {
    min-height:100svh;
    background:url("assets/landing-hero-night-runway.webp") 50% 50% / cover no-repeat;
    color:#f8fbff;
}

.landing-hero-night-trial .hero-clouds-back,
.landing-hero-night-trial .hero-clouds-front,
.landing-hero-night-trial .hero-foreground-clouds,
.landing-hero-night-trial .landing-hero-plane {
    display:none;
}

.landing-hero-night-trial::before {
    display:none;
}

.landing-hero-night-trial .landing-hero-content {
    width:100%;
    max-width:none;
    margin:0;
    align-items:flex-start;
    justify-content:center;
    padding:
        86px
        max(28px, calc((100vw - var(--landing-rail)) / 2 - 18px))
        270px;
    text-align:left;
    color:#f8fbff;
}

.landing-hero-night-trial .hero-kicker {
    color:rgba(155,211,255,0.88);
    text-shadow:0 12px 36px rgba(0,0,0,0.6);
}

.landing-hero-night-trial .hero-kicker-exams {
    color:#7dd3fc;
    text-shadow:0 0 18px rgba(56,189,248,0.24), 0 12px 36px rgba(0,0,0,0.6);
}

.landing-hero-night-trial .hero-kicker-logbooks {
    color:#83c99d;
    text-shadow:0 0 14px rgba(34,197,94,0.07), 0 12px 36px rgba(0,0,0,0.6);
}

.landing-hero-night-trial .landing-hero h1,
.landing-hero-night-trial h1 {
    color:#f8fbff;
}

.landing-hero-night-trial .hero-title {
    max-width:min(780px, 58vw);
    font-size:clamp(80px, 10.8vw, 154px);
    line-height:0.78;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.18),
        0 18px 46px rgba(0,0,0,0.62),
        0 0 40px rgba(30,118,180,0.22);
}

.landing-hero-night-trial .hero_second_title {
    display:block;
    width:100%;
    max-width:100%;
    white-space:nowrap;
    margin-top:30px;
    color:rgba(214,234,250,0.78);
    text-shadow:0 12px 34px rgba(0,0,0,0.62);
}

.landing-hero-night-trial .landing-hero-panel {
    left:max(28px, calc((100vw - var(--landing-rail)) / 2 - 18px));
    bottom:28px;
    transform:none;
}

.landing-hero-night-trial .landing-hero-panel .landing-secondary {
    background:rgba(5,17,34,0.62);
    color:#f4fbff;
    box-shadow:0 14px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

.landing-hero-panel {
    box-sizing:border-box;
    position:absolute;
    z-index:5;
    left:50%;
    bottom:108px;
    width:max-content;
    max-width:calc(100vw - 32px);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#172033;
    box-shadow:none;
    transform:translateX(-50%);
}

.landing-copy {
    margin:0;
    max-width:100%;
    font-size:16px;
    color:rgba(23,32,51,0.82);
}

.landing-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:28px;
}

.landing-hero-choices {
    width:max-content;
    max-width:100%;
    display:grid;
    grid-template-columns:max-content;
    gap:12px;
    align-items:stretch;
    justify-items:start;
}

.landing-hero-choice-actions {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:14px;
}

.landing-hero-choice-actions.single-action {
    grid-template-columns:minmax(0, 1fr);
}

.landing-hero-choice-actions > button {
    min-width:0;
    min-height:52px;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    font:inherit;
    font-size:15px;
    font-weight:850;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
}

.landing-hero-choice-actions .landing-primary {
    border-color:#ffffff;
    background:#f8fafc;
    color:#0f172a;
    box-shadow:none;
}

.landing-hero-choice-actions .landing-primary:hover,
.landing-hero-choice-actions .landing-primary:focus-visible {
    background:#dbeafe;
    color:#0b1d32;
}

.landing-hero-panel .landing-hero-choice-actions .landing-secondary {
    border:1px solid rgba(255,255,255,0.54);
    background:rgba(5,17,34,0.48);
    color:#ffffff;
    box-shadow:none;
}

.landing-install-badges {
    width:min(calc(100vw - 36px), 274px);
    margin:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
}

.landing-install-badges[hidden] {
    display:none;
}

.landing-install-badge {
    box-sizing:border-box;
    min-width:0;
    height:40px;
    padding:4px 8px;
    display:grid;
    grid-template-columns:23px minmax(0, 1fr);
    align-items:center;
    gap:6px;
    border:1px solid rgba(255,255,255,0.72);
    border-radius:7px;
    background:#050505;
    color:#ffffff;
    font:inherit;
    text-align:left;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(0,0,0,0.2);
}

.landing-install-badge:hover,
.landing-install-badge:focus-visible {
    border-color:#ffffff;
    background:#151515;
    outline:2px solid rgba(147,197,253,0.72);
    outline-offset:2px;
}

.landing-install-badge-copy {
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.landing-install-badge-copy small,
.landing-install-badge-copy strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:0;
}

.landing-install-badge-copy small {
    font-size:6.8px;
    font-weight:650;
    line-height:1.05;
    text-transform:uppercase;
}

.landing-install-badge-copy strong {
    margin-top:2px;
    font-size:11.5px;
    font-weight:650;
    line-height:1.05;
}

.landing-install-badge-icon {
    position:relative;
    width:23px;
    height:26px;
    display:block;
}

.landing-install-badge.is-ios .landing-install-badge-icon::before {
    content:"";
    box-sizing:border-box;
    position:absolute;
    inset:1px 5px;
    border:2px solid #ffffff;
    border-radius:4px;
}

.landing-install-badge.is-ios .landing-install-badge-icon::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#ffffff;
    transform:translateX(-50%);
}

.landing-install-badge.is-android .landing-install-badge-icon::before {
    content:"";
    position:absolute;
    top:4px;
    right:1px;
    bottom:4px;
    left:1px;
    background:conic-gradient(from 35deg, #34a853 0 25%, #fbbc04 0 50%, #ea4335 0 75%, #4285f4 0);
    clip-path:polygon(5% 0, 100% 50%, 5% 100%, 28% 50%);
}

.hero-scroll-cue {
    position:absolute;
    z-index:5;
    left:50%;
    bottom:32px;
    width:42px;
    height:42px;
    display:none;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,0.72);
    border-radius:999px;
    background:rgba(255,255,255,0.26);
    color:#172033;
    font-size:22px;
    cursor:pointer;
    transform:translateX(-50%);
    box-shadow:0 14px 36px rgba(64,86,103,0.14);
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    outline:none;
    background:rgba(255,255,255,0.44);
}

.landing-install-strip {
    box-sizing:border-box;
    position:absolute;
    z-index:6;
    left:50%;
    bottom:24px;
    width:max-content;
    max-width:calc(100vw - 32px);
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:transparent;
    transform:translateX(-50%);
}

.landing-install-cta {
    min-height:42px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid color-mix(in srgb, #ffffff 62%, transparent);
    border-radius:7px;
    background:rgba(5,17,34,0.52);
    color:#ffffff;
    box-shadow:0 10px 24px rgba(0,0,0,0.16);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
}

.landing-install-cta:hover,
.landing-install-cta:focus-visible {
    border-color:#ffffff;
    background:rgba(5,17,34,0.7);
    outline:2px solid rgba(147,197,253,0.64);
    outline-offset:2px;
}

.landing-install-cta-icon {
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border:1px solid currentColor;
    border-radius:50%;
    font-size:15px;
    font-weight:600;
    line-height:1;
}

.landing-about {
    box-sizing:border-box;
    width:100vw;
    margin-left:calc(50% - 50vw);
    position:relative;
    display:grid;
    gap:28px;
    padding:10px max(28px, calc((100vw - var(--landing-rail)) / 2 + 28px)) 10px; /*padding top bottom 0px*/
    margin-top:0;
    overflow:hidden;
    isolation:isolate;
    background:
        linear-gradient(90deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.78) 38%, rgba(11,18,32,0.42) 100%),
        url("assets/course-night-rating-placeholder.webp") center / cover no-repeat;
}

.about-disclosure {
    display:grid;
    gap:28px;
}

.about-disclosure-content {
    display:grid;
    gap:28px;
}

.about-disclosure-summary {
    display:none;
}

.about-disclosure-toggle {
    display:none;
}

.landing-faq-toggle {
    display:none;
}

.about-intro {
    box-sizing:border-box;
    width:min(100%, 760px);
    max-width:760px;
    min-height:clamp(120px, 12vw, 170px);
    margin:0 auto;
    padding-block:36px;
    display:flex;
    flex-direction:column;
    gap:1px;
    align-items:center;
    justify-content:center;
    text-align:center;
}

#about-tailwind-title {
    margin-bottom: 10px;
}

.about-feature-layout {
    position:relative;
    display:grid;
    grid-template-columns:minmax(260px, 0.72fr) minmax(540px, 1.28fr);
    gap:28px;
    align-items:center;
    min-height:520px;
    padding:34px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.about-feature-copy {
    position:relative;
    z-index:1;
    max-width:430px;
}

.about-feature-copy span {
    display:block;
    margin-bottom:12px;
    color:#a5f3fc;
    font-size:12px;
    font-weight:900;
    letter-spacing:0.12em;
    text-transform:uppercase;
}

.about-feature-copy h3 {
    margin:0 0 14px;
    color:#f8fafc;
    font-size:clamp(30px, 3vw, 44px);
    line-height:1.04;
    text-wrap:balance;
}

.about-feature-copy p {
    max-width:390px;
    margin:0;
    color:rgba(226,232,240,0.78);
    font-size:16px;
    line-height:1.65;
}

.about-visual {
    display:grid;
    gap:12px;
    min-width:0;
    padding:14px;
    border:1px solid rgba(148,163,184,0.18);
    border-radius:8px;
    background:
        linear-gradient(135deg, rgba(34,211,238,0.08), transparent 46%),
        rgba(15,23,42,0.46);
    box-shadow:0 22px 60px rgba(2,6,23,0.24);
}

.about-demo-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    height:100%;
}

.about-search-demo,
.about-wrong-demo,
.about-switch-demo {
    display:grid;
    gap:12px;
    min-height:272px;
    padding:18px;
    border:1px solid rgba(226,232,240,0.14);
    border-radius:8px;
    background:
        linear-gradient(135deg, rgba(34,211,238,0.12), transparent 58%),
        rgba(15,23,42,0.68);
    box-shadow:0 12px 30px rgba(2,6,23,0.18);
}

.about-wrong-demo {
    background:
        linear-gradient(135deg, rgba(167,139,250,0.12), transparent 58%),
        rgba(15,23,42,0.68);
}

.about-switch-demo {
    grid-column:1 / -1;
    background:
        linear-gradient(135deg, rgba(45,212,191,0.12), transparent 58%),
        rgba(15,23,42,0.68);
}

.search-demo-head,
.wrong-demo-head,
.switch-demo-head {
    display:block;
}

.search-demo-head strong,
.wrong-demo-head strong,
.switch-demo-head strong {
    display:block;
    color:#f8fafc;
    font-size:15px;
    line-height:1.25;
}

.search-demo-input {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:52px;
    padding:0 12px;
    border:1px solid rgba(147,197,253,0.18);
    border-radius:8px;
    background:rgba(2,6,23,0.36);
}

.search-demo-glass {
    position:relative;
    width:14px;
    height:14px;
    border:2px solid rgba(191,219,254,0.76);
    border-radius:50%;
    flex:0 0 auto;
}

.search-demo-glass::after {
    content:"";
    position:absolute;
    right:-5px;
    bottom:-4px;
    width:7px;
    height:2px;
    border-radius:999px;
    background:rgba(191,219,254,0.76);
    transform:rotate(45deg);
    transform-origin:left center;
}

.search-demo-text {
    min-width:52px;
    color:#f8fafc;
    font-size:17px;
    font-weight:800;
}

.search-demo-text::before {
    content:"";
    animation:searchDemoType 3.2s steps(1, end) infinite;
}

.search-demo-text::after {
    content:"";
    display:inline-block;
    width:2px;
    height:1em;
    margin-left:2px;
    vertical-align:-0.12em;
    background:#22d3ee;
    animation:searchDemoCaret 0.8s step-end infinite;
}

.search-demo-results {
    display:grid;
    gap:7px;
}

.search-demo-results span {
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:7px;
    color:rgba(226,232,240,0.78);
    background:rgba(15,23,42,0.42);
    font-size:12px;
    font-weight:750;
    animation:searchResultPulse 3.2s ease-in-out infinite;
}

.search-demo-results span:nth-child(2) {
    animation-delay:0.12s;
}

.search-demo-results span:nth-child(3) {
    animation-delay:0.24s;
}

.wrong-demo-question {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
    gap:9px;
    min-height:52px;
    padding:0 12px;
    border:1px solid rgba(147,197,253,0.16);
    border-radius:8px;
    background:rgba(2,6,23,0.32);
}

.wrong-demo-question span {
    display:grid;
    place-items:center;
    width:36px;
    height:30px;
    border:1px solid rgba(34,211,238,0.24);
    border-radius:7px;
    color:#a5f3fc;
    font-size:11px;
    font-weight:850;
    background:rgba(34,211,238,0.08);
}

.wrong-demo-question p {
    min-width:0;
    margin:0;
    color:#e2e8f0;
    font-size:13px;
    font-weight:780;
    line-height:1.35;
}

.wrong-demo-options {
    display:grid;
    gap:7px;
}

.wrong-option {
    min-height:38px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:7px;
    color:rgba(226,232,240,0.78);
    background:rgba(15,23,42,0.42);
    font-size:13px;
    font-weight:750;
}

.wrong-option-missed {
    animation:wrongAnswerMiss 4s ease-in-out infinite;
}

.wrong-option-correct {
    animation:wrongAnswerCorrect 4s ease-in-out infinite;
}

.wrong-save-pill {
    width:max-content;
    max-width:100%;
    padding:7px 9px;
    border:1px solid rgba(251,113,133,0.28);
    border-radius:7px;
    color:#ffe4e6;
    background:rgba(244,63,94,0.14);
    box-shadow:0 8px 20px rgba(244,63,94,0.12);
    font-size:11px;
    font-weight:850;
    animation:wrongSavedPill 4s ease-in-out infinite;
}

.wrong-demo-filter {
    display:flex;
    gap:6px;
    min-width:0;
    padding:7px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:8px;
    background:rgba(2,6,23,0.26);
}

.wrong-demo-filter span {
    flex:1 1 0;
    min-width:0;
    min-height:32px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:6px;
    color:rgba(226,232,240,0.64);
    font-size:12px;
    font-weight:820;
    text-align:center;
}

.wrong-filter-active {
    animation:wrongFilterActive 4s ease-in-out infinite;
}

.switch-demo-course-tabs {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px;
    padding:5px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:8px;
    background:rgba(2,6,23,0.26);
}

.switch-demo-course-tabs span {
    min-width:0;
    min-height:28px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border-radius:6px;
    color:rgba(226,232,240,0.66);
    font-size:11px;
    font-weight:850;
}

.switch-demo-active {
    border:1px solid rgba(45,212,191,0.34);
    color:#ccfbf1 !important;
    background:rgba(45,212,191,0.14);
}

.switch-demo-subjects {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
}

.switch-demo-subjects span {
    min-height:30px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border:1px solid rgba(148,163,184,0.12);
    border-radius:7px;
    color:rgba(226,232,240,0.78);
    background:rgba(15,23,42,0.42);
    font-size:12px;
    font-weight:750;
}

.switch-subject-active {
    border-color:rgba(45,212,191,0.36) !important;
    color:#ccfbf1 !important;
    background:rgba(45,212,191,0.11) !important;
}

.switch-demo-ready {
    min-height:30px;
    display:flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:0 10px;
    border:1px solid rgba(34,211,238,0.26);
    border-radius:7px;
    color:#cffafe;
    background:rgba(34,211,238,0.1);
    font-size:11px;
    font-weight:850;
}

@keyframes searchDemoType {
    0%, 18% { content:""; }
    24%, 34% { content:"w"; }
    40%, 50% { content:"wi"; }
    56%, 66% { content:"win"; }
    72%, 100% { content:"wing"; }
}

@keyframes searchDemoCaret {
    0%, 49% { opacity:1; }
    50%, 100% { opacity:0; }
}

@keyframes searchResultPulse {
    0%, 54% {
        opacity:0.36;
        transform:translateY(4px);
    }
    72%, 100% {
        opacity:1;
        transform:translateY(0);
        border-color:rgba(34,211,238,0.24);
        background:rgba(34,211,238,0.08);
    }
}

@keyframes wrongAnswerMiss {
    0%, 24% {
        border-color:rgba(148,163,184,0.12);
        background:rgba(15,23,42,0.42);
        color:rgba(226,232,240,0.78);
        transform:translateX(0);
    }
    34%, 56% {
        border-color:rgba(251,113,133,0.48);
        background:rgba(244,63,94,0.13);
        color:#ffe4e6;
        transform:translateX(3px);
    }
    70%, 100% {
        border-color:rgba(251,113,133,0.26);
        background:rgba(244,63,94,0.08);
        color:#fecdd3;
        transform:translateX(0);
    }
}

@keyframes wrongAnswerCorrect {
    0%, 38% {
        border-color:rgba(148,163,184,0.12);
        background:rgba(15,23,42,0.42);
        color:rgba(226,232,240,0.62);
    }
    52%, 100% {
        border-color:rgba(34,211,238,0.32);
        background:rgba(34,211,238,0.08);
        color:#cffafe;
    }
}

@keyframes wrongSavedPill {
    0%, 32% {
        opacity:0;
        transform:translateY(5px);
    }
    44%, 78% {
        opacity:1;
        transform:translateY(0);
    }
    100% {
        opacity:0.75;
        transform:translateY(0);
    }
}

@keyframes wrongFilterActive {
    0%, 48% {
        color:rgba(226,232,240,0.64);
        background:transparent;
        box-shadow:none;
    }
    62%, 100% {
        color:#ecfeff;
        background:linear-gradient(135deg, rgba(34,211,238,0.22), rgba(167,139,250,0.16));
        box-shadow:0 0 0 1px rgba(34,211,238,0.18), 0 8px 18px rgba(34,211,238,0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-clouds-back {
        transform:scale(1.06);
    }

    .hero-clouds-front {
        transform:scale(1.04);
    }

    .landing-hero-plane {
        transform:translate3d(-50%, -28%, 0);
    }

    .landing-hero-content {
        transform:none;
    }

    .search-demo-text::before {
        content:"wing";
        animation:none;
    }

    .search-demo-text::after,
    .search-demo-results span,
    .wrong-option-missed,
    .wrong-option-correct,
    .wrong-save-pill,
    .wrong-filter-active {
        animation:none;
    }

    .search-demo-results span {
        opacity:1;
        transform:none;
    }

    .wrong-option-missed {
        border-color:rgba(251,113,133,0.32);
        background:rgba(244,63,94,0.1);
        color:#fecdd3;
    }

    .wrong-option-correct,
    .wrong-filter-active {
        color:#cffafe;
        background:rgba(34,211,238,0.09);
        border-color:rgba(34,211,238,0.24);
    }

    .wrong-save-pill {
        opacity:1;
        transform:none;
    }
}

.landing-about h2 {
    width:min(100%, 760px);
    max-width:760px;
    margin:0 auto;
    text-align:center;
    font-size:clamp(30px, 3.3vw, 44px);
    line-height:1.04;
    text-wrap:balance;
}

.about-intro p {
    max-width:620px;
    margin:0 auto;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:16px;
    line-height:1.65;
}

.about-icon-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    min-width:0;
}

.about-feature-tiles {
    position:relative;
    z-index:1;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-self:end;
    width:min(690px, 100%);
}

.about-icon-item {
    display:grid;
    gap:9px;
    min-height:130px;
    padding:13px;
    border:1px solid rgba(148,163,184,0.16);
    border-radius:8px;
    background:
        linear-gradient(145deg, rgba(59,130,246,0.1), transparent 48%),
        rgba(15,23,42,0.38);
    box-shadow:0 10px 28px rgba(2,6,23,0.14);
}

.about-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(147,197,253,0.24);
    border-radius:8px;
    background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(167,139,250,0.16));
    color:#bfdbfe;
}

.about-icon svg {
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.about-icon-item strong {
    display:block;
    margin:0;
    color:#f8fafc;
    font-size:15px;
    line-height:1.24;
}

.about-icon-item p {
    margin:0;
    color:rgba(226,232,240,0.76);
    font-size:14px;
    line-height:1.45;
}

.landing-section {
    display:grid;
    grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap:28px;
    align-items:center;
    padding:34px 0 0;
}

.landing-section h2 {
    margin:0 0 8px;
    font-size:24px;
}

.landing-section p {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
}

.feature-grid {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.feature-item {
    min-height:0;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--control);
}

.feature-item strong,
.feature-item span {
    display:block;
}

.feature-item strong {
    margin-bottom:0;
    font-size:13px;
}

.landing-pricing {
    --pricing-link-accent:var(--accent);
    --pricing-link-soft:color-mix(in srgb, var(--accent) 13%, transparent);
    --pricing-link-line:color-mix(in srgb, var(--accent) 54%, var(--border));
    box-sizing:border-box;
    width:100vw;
    position:relative;
    z-index:2;
    scroll-margin-top:70px;
    padding:42px max(28px, calc((100vw - var(--landing-rail)) / 2 + 28px)) 48px;
    margin:0 0 0 calc(50% - 50vw);
    border:0;
    background:
        linear-gradient(100deg, color-mix(in srgb, #2563eb 13%, var(--bg)), var(--bg) 48%, color-mix(in srgb, #38bdf8 9%, var(--bg)));
    border-radius:0;
}

.landing-pricing:has([data-pricing-tab="ppl"].active) {
    --pricing-link-accent:#14b8a6;
    --pricing-link-soft:rgba(20,184,166,0.22);
    --pricing-link-line:rgba(94,234,212,0.82);
}

.landing-pricing:has([data-pricing-tab="cpl"].active) {
    --pricing-link-accent:#38bdf8;
    --pricing-link-soft:rgba(56,189,248,0.26);
    --pricing-link-line:rgba(125,211,252,0.95);
}

.landing-pricing:has([data-pricing-tab="night"].active) {
    --pricing-link-accent:#a78bfa;
    --pricing-link-soft:rgba(167,139,250,0.16);
    --pricing-link-line:rgba(167,139,250,0.72);
}

body.light .landing-pricing:has([data-pricing-tab="ppl"].active) {
    --pricing-link-accent:#0f766e;
    --pricing-link-soft:rgba(15,118,110,0.15);
    --pricing-link-line:rgba(13,148,136,0.68);
}

body.light .landing-pricing:has([data-pricing-tab="cpl"].active) {
    --pricing-link-accent:#0284c7;
    --pricing-link-soft:rgba(2,132,199,0.16);
    --pricing-link-line:rgba(2,132,199,0.72);
}

body.light .landing-pricing:has([data-pricing-tab="night"].active) {
    --pricing-link-accent:#8b5cf6;
    --pricing-link-soft:rgba(139,92,246,0.14);
    --pricing-link-line:rgba(124,58,237,0.62);
}

.pricing-intro {
    width:min(100%, 1120px);
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.pricing-eyebrow {
    display:block;
    margin-bottom:8px;
    color:#7dd3fc;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.pricing-intro h2 {
    margin:0;
    font-size:clamp(30px, 3.4vw, 46px);
    line-height:1.05;
}

.pricing-intro p:last-child {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
}

.pricing-course-gallery {
    width:min(100%, 1120px);
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin:24px auto 18px;
    isolation:isolate;
}

.pricing-course-tile {
    min-height:220px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:0;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    text-align:left;
    box-shadow:var(--subtle-shadow);
    transform:scale(1);
    transform-origin:center;
    transition:transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.pricing-course-tile img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.01);
    transition:transform 180ms ease, filter 180ms ease;
}

/* Match the dashboard crop so the CPL aircraft stays centered on the landing tile. */
.pricing-course-tile[data-pricing-tab="cpl"] img {
    object-position:left center;
}

.pricing-course-tile::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,11,20,0.04) 0%, rgba(7,11,20,0.22) 42%, rgba(7,11,20,0.9) 100%);
}

.pricing-course-tile span {
    position:relative;
    z-index:1;
    display:block;
    padding:18px;
}

.pricing-course-tile strong,
.pricing-course-tile small {
    display:block;
}

.pricing-course-tile strong {
    margin-bottom:3px;
    font-size:24px;
    line-height:1.1;
}

.pricing-course-tile small {
    color:rgba(255,255,255,0.76);
    font-size:13px;
    font-weight:800;
}

.pricing-course-tile .course-coming-soon {
    display:block;
    margin-top:7px;
    color:#ffffff;
    font-size:11px;
    font-style:normal;
    font-weight:900;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.pricing-course-tile.is-coming-soon .course-coming-soon {
    color:#d9efff;
}

.pricing-course-tile.is-coming-soon {
    cursor:default;
}

.pricing-course-tile.is-coming-soon:hover,
.pricing-course-tile.is-coming-soon:focus-visible {
    transform:none;
}

.pricing-course-tile.is-coming-soon:hover img,
.pricing-course-tile.is-coming-soon:focus-visible img {
    transform:scale(1.01);
}

.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active) {
    opacity:0.54;
}

.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active) img {
    filter:grayscale(0.82) saturate(0.58) brightness(0.72);
}

.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active)::after {
    background:linear-gradient(180deg, rgba(7,11,20,0.28) 0%, rgba(7,11,20,0.52) 42%, rgba(7,11,20,0.94) 100%);
}

.pricing-course-tile:hover img,
.pricing-course-tile:focus-visible img,
.pricing-course-tile.active img {
    transform:scale(1.05);
    filter:saturate(1.08) contrast(1.04);
}

.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active):hover,
.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active):focus-visible {
    opacity:0.88;
}

.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active):hover img,
.pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active):focus-visible img {
    filter:grayscale(0.28) saturate(0.9) brightness(0.9);
}

.pricing-course-tile:hover,
.pricing-course-tile:focus-visible {
    z-index:2;
    transform:scale(1.035);
}

.pricing-course-tile.active {
    z-index:1;
    border-color:var(--pricing-link-line);
    box-shadow:0 0 0 2px var(--pricing-link-soft), 0 16px 34px rgba(0,0,0,0.18);
}

.pricing-panel {
    width:min(100%, 1120px);
    display:none;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    position:relative;
    margin:0 auto;
}

@media (min-width:721px) {
    #pricing-night {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.pricing-panel.active {
    display:grid;
    gap:10px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

.pricing-course-visual {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(220px, 0.45fr) minmax(0, 1fr);
    align-items:stretch;
    overflow:hidden;
    min-height:190px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
}

.pricing-course-visual img {
    width:100%;
    height:100%;
    min-height:190px;
    display:block;
    object-fit:cover;
}

.pricing-course-visual > div {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
}

.pricing-course-visual strong {
    display:block;
    margin-bottom:10px;
    font-size:28px;
    line-height:1.1;
}

.pricing-course-visual p {
    max-width:620px;
    margin:0;
    color:color-mix(in srgb, var(--text) 74%, transparent);
}

.price-card {
    position:relative;
    min-height:238px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:20px 18px 18px;
    border:1px solid color-mix(in srgb, var(--text) 16%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--control) 95%, var(--bg));
    box-shadow:0 12px 28px rgba(0,0,0,0.12);
    cursor:pointer;
    transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.price-card::before {
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:color-mix(in srgb, var(--text) 22%, transparent);
    transition:background 160ms ease;
}

.price-card.featured::after {
    content:"Popular";
    position:absolute;
    top:16px;
    right:16px;
    color:var(--pricing-link-accent);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.price-card:hover,
.price-card:focus-visible {
    transform:translateY(-2px);
    border-color:var(--pricing-link-line);
    box-shadow:0 16px 34px rgba(0,0,0,0.18);
    outline:none;
}

.price-card.selected {
    border-color:var(--pricing-link-line);
    background:color-mix(in srgb, var(--pricing-link-accent) 8%, var(--control));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pricing-link-accent) 24%, transparent),
        0 18px 38px rgba(0,0,0,0.2);
}

.price-card.featured,
.price-card.featured:not(.selected) {
    border-color:color-mix(in srgb, var(--pricing-link-accent) 66%, var(--border));
    background:color-mix(in srgb, var(--pricing-link-accent) 6%, var(--control));
    box-shadow:0 15px 34px rgba(0,0,0,0.18);
    transform:none;
}

.price-card:hover::before,
.price-card:focus-visible::before,
.price-card.selected::before,
.price-card.featured::before {
    background:var(--pricing-link-accent);
}

.price-card.selected:hover,
.price-card.selected:focus-visible,
.price-card.featured:hover,
.price-card.featured:focus-visible {
    transform:translateY(-2px);
    border-color:var(--pricing-link-line);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pricing-link-accent) 22%, transparent),
        0 18px 38px rgba(0,0,0,0.22);
    outline:none;
}

.price-card.muted {
    background:transparent;
}

.price-card.is-unavailable {
    opacity:0.58;
    filter:grayscale(0.72) saturate(0.62) brightness(0.88);
    transform:none !important;
    transition:none;
    cursor:not-allowed;
}

.price-card.is-unavailable:hover,
.price-card.is-unavailable:focus-visible,
.price-card.featured.is-unavailable:hover,
.price-card.featured.is-unavailable:focus-visible {
    transform:none !important;
    outline:none;
}

.price-card-badge {
    align-self:flex-start;
    margin-bottom:20px;
    min-height:18px;
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:0;
    border:0;
    background:transparent;
    color:color-mix(in srgb, var(--text) 72%, var(--pricing-link-accent));
    font-size:11px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
}

.price-card strong {
    display:block;
    margin-bottom:14px;
    color:var(--text);
    font-size:36px;
    line-height:1;
}

.price-card p {
    max-width:none;
    margin:0 0 16px;
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:13.5px;
    font-weight:650;
    line-height:1.42;
}


.price-card small {
    display:block;
    margin-top:8px;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:11px;
    font-weight:850;
    line-height:1.25;
    text-transform:uppercase;
}

.purchase-plan-btn {
    min-height:42px;
    margin-top:auto;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 48%, var(--border));
    border-radius:6px;
    background:transparent;
    color:var(--text);
    box-shadow:none;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:900;
    transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.price-card.selected .purchase-plan-btn {
    border-color:var(--pricing-link-accent, var(--accent));
    background:var(--pricing-link-accent, var(--accent));
    color:#06131b;
}

.purchase-plan-btn:hover,
.purchase-plan-btn:focus-visible {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 18%, var(--control));
    color:var(--text);
    outline:none;
    box-shadow:none;
}

.price-card.selected .purchase-plan-btn:hover,
.price-card.selected .purchase-plan-btn:focus-visible {
    background:color-mix(in srgb, var(--pricing-link-accent, var(--accent)) 84%, #ffffff);
    color:#06131b;
}

.purchase-plan-btn:disabled {
    border-color:var(--border);
    background:color-mix(in srgb, var(--control) 82%, transparent);
    color:color-mix(in srgb, var(--text) 56%, transparent);
    box-shadow:none;
    cursor:not-allowed;
}

.purchase-plan-btn:disabled:hover,
.purchase-plan-btn:disabled:focus-visible {
    filter:none;
    outline:none;
}

body.light .price-card {
    border-color:#a7b4c5;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(15,23,42,0.1);
}

body.light .price-card::before {
    background:#8796aa;
}

body.light .price-card.featured,
body.light .price-card.featured:not(.selected) {
    border-color:#a7b4c5;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(15,23,42,0.1);
}

body.light .price-card.featured:not(.selected)::before {
    background:#8796aa;
}

body.light .price-card.selected {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 13%, #ffffff);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--pricing-link-accent) 30%, transparent),
        0 14px 30px rgba(15,23,42,0.14);
}

body.light .price-card-badge {
    color:var(--pricing-link-accent);
}

body.light .price-card p {
    color:#334155;
}

body.light .price-card small {
    color:#475569;
}

body.light .purchase-plan-btn {
    border-color:color-mix(in srgb, var(--pricing-link-accent) 68%, #64748b);
    background:#f8fafc;
    color:#0f172a;
}

body.light .purchase-plan-btn:hover,
body.light .purchase-plan-btn:focus-visible {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 11%, #ffffff);
    color:#0f172a;
}

body.light .price-card.selected .purchase-plan-btn {
    border-color:var(--pricing-link-accent);
    background:var(--pricing-link-accent);
    color:#ffffff;
    box-shadow:0 5px 14px color-mix(in srgb, var(--pricing-link-accent) 28%, transparent);
}

body.light .price-card.selected .purchase-plan-btn:hover,
body.light .price-card.selected .purchase-plan-btn:focus-visible {
    background:color-mix(in srgb, var(--pricing-link-accent) 88%, #000000);
    color:#ffffff;
}

.pricing-note {
    grid-column:1 / -1;
    margin:2px 0 0;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    color:color-mix(in srgb, var(--text) 82%, transparent);
    font-size:13px;
    font-weight:750;
}

.pricing-expiry-callout {
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(190px, 0.42fr) minmax(0, 1fr);
    align-items:center;
    gap:8px 18px;
    margin-top:18px;
    padding:13px 15px;
    border:1px solid color-mix(in srgb, var(--pricing-link-line) 58%, var(--border));
    border-radius:7px;
    background:color-mix(in srgb, var(--pricing-link-soft) 40%, var(--control));
}

.pricing-expiry-callout h4 {
    margin:0;
    color:var(--text);
    font-size:14px;
    font-weight:850;
    line-height:1.25;
}

.pricing-expiry-callout p {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:12px;
    line-height:1.45;
}

.pricing-ops-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:16px;
}

.pricing-ops-card {
    min-height:150px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--control) 72%, transparent);
}

.pricing-ops-card strong {
    display:block;
    margin-bottom:9px;
    font-size:22px;
    line-height:1.1;
}

.pricing-ops-card p {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
}

.pricing-rules {
    position:relative;
    width:min(100%, 1120px);
    margin:28px auto 0;
    padding:24px 0 34px;
    border-top:1px solid color-mix(in srgb, var(--pricing-link-line) 44%, var(--border));
}

.pricing-rules-content {
    max-height:300px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.96) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.42) 88%,
        transparent 100%
    );
    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.96) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.42) 88%,
        transparent 100%
    );
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    transition:max-height 360ms ease;
}

.pricing-rules.is-expanded .pricing-rules-content {
    max-height:1100px;
    -webkit-mask-image:none;
    mask-image:none;
}

.pricing-rules-toggle {
    position:absolute;
    z-index:2;
    bottom:0;
    left:50%;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid color-mix(in srgb, var(--pricing-link-line) 72%, var(--border));
    border-radius:50%;
    background:var(--control);
    color:var(--pricing-link-accent);
    box-shadow:
        0 8px 24px color-mix(in srgb, #000 24%, transparent),
        0 0 0 8px color-mix(in srgb, var(--bg) 38%, transparent);
    cursor:pointer;
    transform:translateX(-50%);
}

.pricing-rules-toggle:hover {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 10%, var(--control));
}

.pricing-rules-toggle:focus-visible {
    outline:3px solid color-mix(in srgb, var(--pricing-link-accent) 36%, transparent);
    outline-offset:3px;
}

.pricing-rules-toggle svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform 220ms ease;
}

.pricing-rules.is-expanded .pricing-rules-toggle svg {
    transform:rotate(180deg);
}

.pricing-rules-heading {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(240px, 420px);
    gap:5px 28px;
    align-items:end;
}

.pricing-rules-heading > span {
    grid-column:1 / -1;
    color:var(--pricing-link-accent);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.pricing-rules-heading h3 {
    margin:0;
    font-size:26px;
    line-height:1.15;
}

.pricing-rules-heading p {
    margin:0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    font-size:13px;
    line-height:1.5;
}

.pricing-rules-list {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin-top:20px;
    border-top:1px solid var(--border);
}

.pricing-rule {
    display:grid;
    grid-template-columns:34px minmax(0, 1fr);
    gap:10px;
    min-width:0;
    padding:18px 22px 18px 0;
    border-bottom:1px solid var(--border);
}

.pricing-rule:nth-child(odd) {
    border-right:1px solid var(--border);
}

.pricing-rule:nth-child(even) {
    padding-left:22px;
}

.pricing-rule > span {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid var(--pricing-link-line);
    border-radius:50%;
    color:var(--pricing-link-accent);
    font-size:12px;
    font-weight:900;
}

.pricing-rule strong {
    display:block;
    margin-bottom:5px;
    font-size:15px;
    line-height:1.3;
}

.pricing-rule p,
.pricing-rules-checkout {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
    line-height:1.55;
}

.pricing-rule-example {
    display:block;
    margin-top:10px;
    padding-left:10px;
    border-left:2px solid color-mix(in srgb, var(--pricing-link-accent) 62%, var(--border));
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
    font-weight:600;
    line-height:1.5;
}

.pricing-rule-example strong,
.pricing-rules-checkout strong {
    color:var(--text);
}

.pricing-rules-checkout {
    margin-top:14px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--pricing-link-line) 44%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, var(--pricing-link-accent) 6%, transparent);
}

@media (max-width:720px) {
    .pricing-rules {
        margin-top:16px;
        padding:20px 0 34px;
    }

    .pricing-rules-content {
        max-height:280px;
    }

    .pricing-rules.is-expanded .pricing-rules-content {
        max-height:1800px;
    }

    .pricing-rules-heading,
    .pricing-rules-list {
        grid-template-columns:1fr;
    }

    .pricing-rules-heading {
        gap:8px;
    }

    .pricing-expiry-callout {
        grid-template-columns:1fr;
        gap:4px;
        margin-top:14px;
    }

    .pricing-rules-heading > span {
        grid-column:auto;
    }

    .pricing-rule,
    .pricing-rule:nth-child(even) {
        padding:16px 0;
        border-right:0;
    }
}

.landing-faq {
    box-sizing:border-box;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:58px max(28px, calc((100vw - var(--landing-rail)) / 2 + 28px)) 64px;
    background:color-mix(in srgb, var(--control) 34%, var(--bg));
}

.landing-faq-heading {
    width:min(100%, 1120px);
    margin:0 auto 24px;
    text-align:center;
}

.landing-faq-heading > span {
    display:block;
    margin-bottom:8px;
    color:#7dd3fc;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.landing-faq-heading h2 {
    margin:0;
    font-size:clamp(28px, 3vw, 40px);
    line-height:1.08;
}

.landing-faq-list {
    width:min(100%, 960px);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
    gap:10px 14px;
}

.landing-faq-list details {
    border-bottom:1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.landing-faq-list summary {
    min-height:58px;
    padding:0 30px 0 2px;
    position:relative;
    display:flex;
    align-items:center;
    color:var(--text);
    cursor:pointer;
    font-size:14px;
    font-weight:850;
    line-height:1.35;
    list-style:none;
}

.landing-faq-list summary::-webkit-details-marker {
    display:none;
}

.landing-faq-list summary::after {
    content:"+";
    position:absolute;
    right:4px;
    color:#7dd3fc;
    font-size:22px;
    font-weight:500;
}

.landing-faq-list details[open] summary::after {
    content:"-";
}

.landing-faq-list summary:focus-visible {
    outline:2px solid rgba(125,211,252,0.72);
    outline-offset:3px;
}

.landing-faq-list p {
    margin:0;
    padding:0 28px 18px 2px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13.5px;
    line-height:1.58;
}

.landing-contact {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100vw;
    margin-top:0;
    margin-left:calc(50% - 50vw);
    min-height:360px;
    padding:58px max(30px, calc((100vw - var(--landing-rail)) / 2 + 28px));
    overflow:hidden;
    position:relative;
    z-index:1;
    border:0;
    background:transparent;
}

.landing-contact::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(15,23,42,0.52), rgba(15,23,42,0.18));
    transform:scale(1.01);
    filter:blur(0.5px);
}

.landing-contact.is-contact-image-ready::before {
    background:url("assets/cockpit.webp") 50% 50% / cover no-repeat;
    transform: scaleX(-1); /* Flips the background image horizontally */
}

.landing-contact h2 {
    margin:0;
    font-size:26px;
    line-height:1.12;
    text-align:left;
}

.contact-account-hint {
    margin:-5px 0 1px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
    line-height:1.45;
}

.contact-account-hint button {
    appearance:none;
    -webkit-appearance:none;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:color-mix(in srgb, var(--accent) 78%, white);
    cursor:pointer;
    font:inherit;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:2px;
}

.contact-account-hint button:hover,
.contact-account-hint button:focus-visible {
    color:var(--text);
}

.contact-account-hint button:focus-visible {
    outline:2px solid color-mix(in srgb, var(--accent) 60%, white);
    outline-offset:3px;
}

.contact-list {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    width:min(430px, 100%);
    padding:20px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:8px;
    background:rgba(15,23,42,0.7);
    box-shadow:0 24px 70px rgba(0,0,0,0.32);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    color:var(--text);
}

.contact-form {
    display:grid;
    justify-items:stretch;
    gap:9px;
    width:100%;
}

.contact-form input,
.contact-form textarea {
    box-sizing:border-box;
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.34);
    border-radius:8px;
    background:rgba(15,23,42,0.46);
    color:var(--text);
    box-shadow:0 14px 36px rgba(0,0,0,0.18);
    font:inherit;
    line-height:1.4;
    outline:none;
}

.contact-form input {
    min-height:40px;
}

.contact-form textarea {
    min-height:88px;
    resize:vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:rgba(226,232,240,0.58);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:color-mix(in srgb, var(--accent) 66%, white);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 14px 36px rgba(0,0,0,0.2);
}

.contact-list a {
    color:var(--text);
    font-weight:850;
    text-decoration:none;
}

.email-cta {
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border:0;
    border-radius:8px;
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    color:var(--hero-button-ink) !important;
    box-shadow:0 12px 24px rgba(16,55,84,0.3);
    cursor:pointer;
    font:inherit;
    font-weight:900;
    transition:background-position 420ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.email-cta:hover,
.email-cta:focus-visible {
    background-position:right center;
    filter:none;
    box-shadow:0 14px 28px rgba(16,55,84,0.34);
    outline:none;
}

.email-cta:disabled {
    cursor:wait;
    opacity:0.68;
    box-shadow:none;
}

.contact-list span {
    color:rgba(226,232,240,0.72);
    font-size:13px;
    font-weight:700;
}

#contact-message-status {
    min-height:18px;
    text-align:left;
}

#contact-message-status[data-status="success"] {
    color:#bbf7d0;
}

#contact-message-status[data-status="error"] {
    color:#fecaca;
}

#contact-message-status[data-status="pending"] {
    color:rgba(226,232,240,0.82);
}

.landing-legal-footer {
    display: flex;
    align-items: center;      /* Vertical centering */
    justify-content: center;  /* Horizontal centering */
    flex-wrap: wrap;
    gap: 2px 20px;

    min-height: 30px;
    margin-top: 13px;
    padding: 0;

    color: color-mix(in srgb, var(--text) 46%, transparent);
    font-size: 15px;
    line-height: 24px;        /* Match the height */
    text-align: center;
}

.landing-home-footer {
    color:rgba(226,232,240,0.62);
}

.landing-legal-footer nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:2px 14px;
}

.landing-legal-footer a {
    color:inherit;
    text-decoration:none;
}

.landing-legal-footer a:hover,
.landing-legal-footer a:focus-visible {
    color:color-mix(in srgb, var(--text) 74%, transparent);
    text-decoration:underline;
    outline:none;
}

body.is-native-app .landing-legal-footer .footer-contact-link {
    display:none;
}

.legal-nav {
    border-bottom:1px solid rgba(148,163,184,0.12);
}

.legal-page {
    box-sizing:border-box;
    width:100%;
    max-width:920px;
    margin:0 auto;
    padding:54px 28px 44px;
}

.legal-hero {
    display:grid;
    gap:10px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(148,163,184,0.16);
}

.legal-hero .landing-kicker {
    margin:0;
}

.legal-hero h1 {
    margin:0;
    color:#f8fafc;
    font-size:clamp(36px, 7vw, 68px);
    line-height:0.98;
}

.legal-hero p {
    max-width:760px;
    margin:0;
    color:rgba(226,232,240,0.78);
    font-size:17px;
    line-height:1.65;
}

.legal-hero span {
    color:rgba(226,232,240,0.56);
    font-size:13px;
    font-weight:750;
}

.legal-document {
    display:grid;
    gap:24px;
    padding:30px 0 8px;
}

.legal-document article {
    display:grid;
    gap:8px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(148,163,184,0.12);
}

.legal-document article:last-child {
    border-bottom:0;
}

.legal-document h2 {
    margin:0;
    color:#f8fafc;
    font-size:18px;
    line-height:1.25;
}

.legal-document h3 {
    margin:10px 0 0;
    color:rgba(248,250,252,0.92);
    font-size:15px;
    line-height:1.35;
}

.legal-document article[id] {
    scroll-margin-top:28px;
}

.legal-document p {
    margin:0;
    color:rgba(226,232,240,0.76);
    font-size:15px;
    line-height:1.72;
}

.legal-document a {
    color:#93c5fd;
    font-weight:800;
    text-decoration:none;
}

.legal-document a:hover,
.legal-document a:focus-visible {
    color:#bfdbfe;
    text-decoration:underline;
    outline:none;
}

.legal-footer {
    padding-top:2px;
}

.content-wrapper {
    max-width:1360px;
    margin:auto;
    padding:80px 28px 34px;
}

/* NAV */
.top-nav {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    max-width:none;
    margin:0;
    padding:14px max(28px, calc((100vw - 1360px) / 2 + 28px));
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom:1px solid var(--border);
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:120;
    backdrop-filter:blur(16px);
}

body.course-cue-course .top-nav.app-nav {
    background:
        linear-gradient(90deg, var(--course-accent-soft), color-mix(in srgb, var(--course-accent-soft) 48%, transparent) 28%, transparent 72%),
        color-mix(in srgb, var(--bg) 84%, transparent);
    box-shadow:none;
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:"Michroma", system-ui, sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.08em;
    line-height:1;
}

.brand-home-btn {
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
    font:inherit;
    font-family:"Michroma", system-ui, sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:0.08em;
}

.brand > span:last-child,
.brand-home-btn > span:last-child {
    display:inline-block;
    transform:scaleX(0.96);
    transform-origin:left center;
}

.brand-home-btn:hover,
.brand-home-btn:focus-visible {
    color:color-mix(in srgb, var(--text) 84%, var(--accent));
    outline:none;
}

.brand-home-btn:focus-visible .wind-logo {
    filter:drop-shadow(0 0 8px rgba(103,232,249,0.48));
}

.wind-logo {
    position:relative;
    width:32px;
    height:20px;
    flex:0 0 auto;
}

.wind-logo::before,
.wind-logo::after {
    content:"";
    position:absolute;
    right:0;
    height:8px;
    background:linear-gradient(90deg, rgba(147,197,253,0), #93c5fd 34%, #67e8f9 100%);
    filter:drop-shadow(0 0 7px rgba(103,232,249,0.42));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M2 11 C15 2 23 2 34 8 S51 15 62 4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M2 11 C15 2 23 2 34 8 S51 15 62 4' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.wind-logo::before {
    top:2px;
    width:32px;
}

.wind-logo::after {
    top:10px;
    width:32px;
    opacity:0.86;
}

body:not(.is-native-app) .brand > .wind-logo {
    width:34.2px;
    height:17.1px;
    background:url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
    opacity:0.72;
    filter:saturate(0.72) brightness(0.9);
    transform:scaleX(0.8);
    transform-origin:center;
}

body:not(.is-native-app) .brand > .wind-logo::before,
body:not(.is-native-app) .brand > .wind-logo::after {
    display:none;
}

.top-nav nav,
.header-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.mobile-nav-only {
    display:none;
}

.native-cart-slot,
.native-app-toolbar,
.native-cart-backdrop,
.native-cart-empty {
    display:none;
}

.header-actions {
    position:relative;
}

.header-actions .header-tutorial-btn {
    min-height:34px;
    padding:0 12px;
    border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--control) 74%, transparent);
    color:color-mix(in srgb, var(--text) 84%, transparent);
    font-size:14px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.header-actions .header-tutorial-btn:hover,
.header-actions .header-tutorial-btn:focus-visible,
.header-actions .header-tutorial-btn.is-active {
    background:var(--active-fill);
    color:var(--active-ink);
    outline:none;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.theme-toggle {
    --theme-toggle-active:color-mix(in srgb, var(--accent) 24%, var(--soft));
    --theme-toggle-icon:color-mix(in srgb, var(--text) 78%, var(--accent));
    --theme-toggle-active-icon:var(--active-ink);
    width:78px;
    height:34px;
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:3px;
    border:1px solid color-mix(in srgb, var(--border) 72%, var(--text));
    border-radius:999px;
    background:color-mix(in srgb, var(--control) 88%, var(--card));
    cursor:pointer;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
    margin-right: 10px;
}

.theme-toggle::before {
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:33px;
    height:24px;
    border-radius:999px;
    background:var(--theme-toggle-active);
    transition:transform 180ms ease;
}

body:not(.light) .theme-toggle::before {
    transform:translateX(36px);
}

.theme-toggle:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 3px 8px rgba(37,99,235,0.08);
}

.theme-toggle-option {
    position:relative;
    z-index:1;
    width:35px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:999px;
}

.theme-toggle-sun::before {
    content:"";
    width:17px;
    height:17px;
    background:var(--theme-toggle-active-icon);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-toggle-moon::before {
    content:"";
    width:17px;
    height:17px;
    background:var(--theme-toggle-icon);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.light) .theme-toggle-moon::before {
    background:var(--theme-toggle-active-icon);
}

body:not(.light) .theme-toggle-sun::before {
    background:var(--theme-toggle-icon);
}

.top-nav nav {
    gap:12px;
    padding:0;
    border:0;
    background:transparent;
}

.top-nav nav .nav-btn + .nav-btn {
    position:relative;
    margin-left:12px;
}

.top-nav nav .nav-btn + .nav-btn::before {
    content:"";
    position:absolute;
    left:-13px;
    top:50%;
    width:1px;
    height:18px;
    transform:translateY(-50%);
    background:color-mix(in srgb, var(--text) 34%, transparent);
}

.nav-btn {
    background:transparent;
    border:0;
    min-height:34px;
    padding:7px 11px;
    color:var(--text);
    border-radius:6px;
    cursor:pointer;
    font:inherit;
    font-weight:600;
    transition:background 140ms ease, transform 140ms ease, color 140ms ease;
}

body.light .nav-btn {
    background:transparent;
}

.nav-btn:hover,
.nav-btn:focus-visible {
    background:var(--soft);
}

#landing-login-action {
    min-height:36px;
    padding:8px 13px;
    border-radius:6px;
    border:0;
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    color:var(--hero-button-ink);
    box-shadow:0 8px 16px rgba(16,55,84,0.24);
    font-weight:800;
    transition:background-position 420ms ease, filter 160ms ease;
}

#landing-login-action:hover,
#landing-login-action:focus-visible {
    background-position:right center;
    filter:none;
    outline:none;
}

.top-nav nav .nav-btn {
    min-height:0;
    padding:0;
    border-radius:0;
    font-size:14px;
}

.top-nav nav .nav-btn.is-course-locked {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:color-mix(in srgb, var(--text) 56%, transparent);
    cursor:not-allowed;
}

.top-nav nav .nav-btn.is-course-locked::after,
.top-nav nav .nav-btn.is-course-trial::after {
    content:"";
    position:static;
    flex:0 0 auto;
    transform:none;
    pointer-events:none;
}

.top-nav nav .nav-btn.is-course-locked::after {
    width:13px;
    height:13px;
    background:currentColor;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.top-nav nav .nav-btn.is-course-trial {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.top-nav nav .nav-btn.is-course-trial::after {
    content:var(--trial-label, "Trial");
    width:max-content;
    padding:2px 6px;
    border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 13%, transparent);
    color:color-mix(in srgb, var(--text) 86%, var(--accent));
    font-size:10px;
    font-weight:850;
    line-height:1;
    white-space:nowrap;
    text-transform:uppercase;
}

.top-nav nav .nav-btn:hover,
.top-nav nav .nav-btn:focus-visible {
    background:transparent;
    color:color-mix(in srgb, var(--text) 84%, var(--accent));
}

.top-nav nav .nav-btn.is-course-locked:hover,
.top-nav nav .nav-btn.is-course-locked:focus-visible {
    color:color-mix(in srgb, var(--text) 56%, transparent);
}

.top-nav nav .nav-btn.is-active {
    background:transparent;
    color:var(--text);
    transform:none;
    font-size:16px;
    font-weight:800;
    box-shadow:none;
}

.account-menu {
    position:relative;
}

.account-avatar-btn {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), #2dd4bf);
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    font-size:15px;
    font-weight:850;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
}

.account-avatar-btn:hover,
.account-avatar-btn:focus-visible,
.account-avatar-btn[aria-expanded="true"] {
    outline:none;
    box-shadow:0 8px 20px rgba(0,0,0,0.18), inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.account-menu-panel {
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:40;
    width:220px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    box-shadow:var(--surface-shadow);
}

.account-language-control {
    display:grid;
    gap:6px;
    padding:8px 10px 10px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
}

.account-language-control label {
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.account-language-control select {
    width:100%;
    min-height:34px;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    font:inherit;
    font-size:13px;
    font-weight:650;
}

.account-language-control select:focus {
    border-color:var(--accent);
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.account-admin-tools {
    margin:4px 0;
    padding:5px 0 4px;
    border-block:1px solid var(--border);
}

.account-admin-tools[hidden],
.app-settings-admin-group[hidden] {
    display:none !important;
}

.account-admin-tools-label {
    display:block;
    padding:4px 10px 3px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
}

.account-menu-panel button {
    width:100%;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:600;
    text-align:center;
    transition:background 140ms ease, color 140ms ease;
}

.account-menu-panel button:hover,
.account-menu-panel button:focus-visible {
    background:var(--soft);
    outline:none;
}

/* SETTINGS */
.app-settings {
    box-sizing:border-box;
    width:min(720px, 100%);
    margin:0 auto;
    padding:24px 0 48px;
}

.app-settings-header {
    padding:4px 4px 20px;
}

.app-settings-kicker {
    display:block;
    margin-bottom:7px;
    color:var(--accent);
    font-size:11px;
    font-weight:900;
}

.app-settings-header h1 {
    margin:0;
    font-size:28px;
    line-height:1.15;
}

.app-settings-header p {
    margin:7px 0 0;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:14px;
}

.app-settings-profile {
    min-height:72px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px 4px 18px;
    border-bottom:1px solid var(--border);
}

.app-settings-avatar {
    width:48px;
    height:48px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), #2dd4bf);
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.app-settings-profile > div {
    min-width:0;
    display:grid;
    gap:4px;
}

.app-settings-profile strong {
    font-size:16px;
}

.app-settings-profile span:last-child {
    overflow:hidden;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.app-settings-group {
    margin-top:24px;
    border-top:1px solid var(--border);
}

.app-settings-group h2 {
    margin:0;
    padding:11px 4px 8px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

.app-settings-group-copy {
    margin:0;
    padding:0 4px 9px;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    line-height:1.45;
}

.app-settings-admin-group {
    border-top-color:color-mix(in srgb, var(--accent) 48%, var(--border));
}

.app-settings-row {
    box-sizing:border-box;
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 4px;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    text-align:left;
}

.app-settings-row > span:first-child {
    min-width:0;
    display:grid;
    gap:4px;
}

.app-settings-row strong {
    font-size:15px;
    font-weight:750;
}

.app-settings-row small {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:12px;
    line-height:1.35;
}

.app-settings-row select {
    min-width:116px;
    min-height:40px;
    padding:0 30px 0 10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--control);
    color:var(--text);
    font:inherit;
    font-size:16px;
    font-weight:700;
}

.app-settings-value {
    flex:0 0 auto;
    padding:6px 9px;
    border-radius:6px;
    background:var(--soft);
    color:color-mix(in srgb, var(--text) 78%, transparent);
    font-size:12px;
    font-weight:800;
}

.app-settings-chevron {
    width:9px;
    height:9px;
    flex:0 0 auto;
    border-top:2px solid color-mix(in srgb, var(--text) 46%, transparent);
    border-right:2px solid color-mix(in srgb, var(--text) 46%, transparent);
    transform:rotate(45deg);
}

.app-settings-logout strong {
    color:var(--wrong);
}

.app-settings-row:focus-visible {
    outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset:-2px;
}

.app-settings-test-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:4px 4px 12px;
}

.app-settings-test-button {
    min-height:38px;
    padding:8px 12px;
    border:1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
}

.app-settings-test-button.is-muted {
    border-color:var(--border);
    color:color-mix(in srgb, var(--text) 68%, transparent);
}

/* DASHBOARD */
#screen-dashboard > h2 {
    margin:0 0 18px;
    font-size:22px;
    font-weight:750;
}

.subscription-summary {
    box-sizing:border-box;
    width:100%;
    max-width:1180px;
    margin:0 auto 24px;
    padding:8px 0 10px;
    position:relative;
    z-index:18;
    background:transparent;
}

.subscription-card {
    padding:0;
    overflow:hidden;
    background:var(--card);
    border:0;
    border-radius:8px;
    box-shadow:var(--surface-shadow);
}

.course-access-list {
    --access-cut:34px;
    display:flex;
    gap:0;
    position:relative;
    overflow:hidden;
    min-height:220px;
}

.course-access-pill {
    --panel-clip:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    min-height:220px;
    position:relative;
    z-index:1;
    overflow:visible;
    flex:1 1 0;
    min-width:0;
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background-image:
        linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,0.18) 36%, rgba(7,11,20,0.9) 100%),
        var(--course-image);
    background-position:center;
    background-size:cover;
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    text-align:left;
    isolation:isolate;
    clip-path:var(--panel-clip);
    transform-origin:center;
    transition:filter 150ms ease, transform 150ms ease;
    will-change:filter, transform;
}

/* The CPL artwork keeps the aircraft toward the middle of its dashboard frame. */
.course-access-pill:nth-child(2) {
    background-position:center, left center;
}

.course-access-pill:not(:first-child) {
    margin-left:calc((var(--access-cut) + 2px) * -1);
}

.course-access-pill:nth-child(1) {
    --panel-clip:polygon(0 0, 100% 0, calc(100% - var(--access-cut)) 100%, 0 100%);
}

.course-access-pill:nth-child(2) {
    --panel-clip:polygon(var(--access-cut) 0, 100% 0, calc(100% - var(--access-cut)) 100%, 0 100%);
}

.course-access-pill:nth-child(3) {
    --panel-clip:polygon(var(--access-cut) 0, 100% 0, 100% 100%, 0 100%);
}

.course-access-pill::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.18), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 42%, rgba(255,255,255,0.05) 100%);
    clip-path:var(--panel-clip);
    opacity:0;
    pointer-events:none;
    transition:opacity 150ms ease;
}

.course-access-pill::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.62) 100%);
    opacity:0.9;
    pointer-events:none;
}

.course-access-pill.is-locked::after {
    background:
        linear-gradient(180deg, rgba(2,6,23,0.26) 0%, rgba(2,6,23,0.58) 48%, rgba(2,6,23,0.92) 100%);
    opacity:0.96;
}

.course-access-pill:focus-visible::before {
    opacity:0.78;
}

.course-access-pill:focus-visible {
    outline:0;
}

.course-access-copy {
    position:absolute;
    z-index:2;
    left:28px;
    right:28px;
    bottom:18px;
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:5px;
    transition:transform 150ms ease;
}

.course-access-title {
    display:block;
    max-width:100%;
    font-size:32px;
    line-height:1;
    font-weight:850;
    letter-spacing:0;
    text-shadow:0 2px 14px rgba(0,0,0,0.52);
    white-space:nowrap;
}

.course-access-short-title {
    display:none;
}

.course-lock-tag {
    position:absolute;
    z-index:3;
    top:18px;
    right:24px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,0.28);
    border-radius:999px;
    background:rgba(2,6,23,0.46);
    color:rgba(255,255,255,0.78);
    font-size:11px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    backdrop-filter:blur(8px);
}

/* Native dashboard: compact course selector and full-width subject list. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .subscription-summary {
        margin-bottom:10px;
    }

    body.is-native-app:not(.public-screen) .subscription-card {
        border:1px solid var(--border);
        border-radius:8px;
        background:var(--control);
    }

    body.is-native-app:not(.public-screen) .course-access-list {
        width:100%;
        min-height:48px;
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:3px;
        padding:3px;
        overflow:hidden;
        border-radius:7px;
        background:var(--control);
    }

    body.is-native-app:not(.public-screen) .course-access-pill,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active),
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):hover,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):focus-visible {
        width:100%;
        min-width:0;
        min-height:40px;
        margin:0;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 7px;
        border:0;
        border-radius:6px;
        background:transparent;
        background-image:none;
        color:color-mix(in srgb, var(--text) 62%, transparent);
        filter:none;
        clip-path:none;
        transform:none;
        text-align:center;
        -webkit-tap-highlight-color:transparent;
    }

    /* A finger tap must not leave the course selector looking hovered or
       focused after the tap has finished. Keep keyboard focus visible for
       accessibility, but suppress the touch-only state. */
    body.is-native-app:not(.public-screen) .course-access-pill:hover:not(.active),
    body.is-native-app:not(.public-screen) .course-access-pill:focus:not(:focus-visible):not(.active),
    body.is-native-app:not(.public-screen) .course-access-pill:active:not(.active) {
        z-index:1;
        background:transparent;
        background-image:none;
        box-shadow:none;
        filter:none;
        transform:none;
        outline:none;
    }

    body.is-native-app:not(.public-screen) .course-access-pill::before,
    body.is-native-app:not(.public-screen) .course-access-pill::after,
    body.is-native-app:not(.public-screen) .course-lock-tag,
    body.is-native-app:not(.public-screen) .course-days-badge {
        display:none;
    }

    body.is-native-app:not(.public-screen) .course-access-copy {
        position:static;
        min-height:0;
        display:block;
        transform:none;
    }

    body.is-native-app:not(.public-screen) .course-access-title {
        color:inherit;
        font-size:13px;
        font-weight:820;
        line-height:1;
        text-shadow:none;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .course-access-full-title {
        display:none;
    }

    body.is-native-app:not(.public-screen) .course-access-short-title {
        display:inline;
    }

    body.is-native-app:not(.public-screen) .course-access-pill.active,
    body.is-native-app:not(.public-screen) .course-access-pill.active:hover,
    body.is-native-app:not(.public-screen) .course-access-pill.active:focus-visible,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        background:var(--active-fill);
        color:var(--active-ink);
        filter:none;
        transform:none;
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    body.is-native-app:not(.public-screen) .course-access-pill:focus-visible {
        outline:2px solid color-mix(in srgb, var(--accent) 66%, transparent);
        outline-offset:-2px;
    }

    body.is-native-app:not(.public-screen) #dashboard-subject-grid {
        gap:10px;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard {
        width:100%;
        border:0;
        border-radius:0;
        overflow:visible;
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .dashboard-course-trial {
        margin:12px 0 2px;
        padding:12px;
        border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
        border-radius:8px;
        background:color-mix(in srgb, var(--accent) 8%, var(--card));
    }

    body.is-native-app:not(.public-screen) .native-subject-section {
        margin-top:18px;
    }

    body.is-native-app:not(.public-screen) .native-subject-section > h3 {
        margin:0 0 8px;
        padding:0 2px;
        color:color-mix(in srgb, var(--text) 56%, transparent);
        font-size:10px;
        font-weight:900;
        line-height:1.2;
        text-transform:uppercase;
    }

    body.is-native-app:not(.public-screen) .native-continue-section > h3 {
        color:var(--accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-list,
    body.is-native-app:not(.public-screen) .native-locked-subject-list {
        overflow:hidden;
        border:1px solid var(--border);
        border-radius:8px;
        background:var(--card);
    }

    body.is-native-app:not(.public-screen) .native-subject-entry + .native-subject-entry {
        border-top:1px solid var(--border);
    }

    body.is-native-app:not(.public-screen) .native-subject-entry {
        position:relative;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.is-continue {
        box-shadow:inset 3px 0 0 var(--accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-row {
        box-sizing:border-box;
        width:100%;
        min-height:72px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 30px;
        align-items:center;
        gap:10px;
        padding:11px 12px;
        border:0;
        border-radius:0;
        background:transparent;
        color:var(--text);
        cursor:pointer;
        font:inherit;
        text-align:left;
    }

    body.is-native-app:not(.public-screen) .native-subject-purchase-row {
        grid-template-columns:minmax(0, 1fr) auto;
        min-height:72px;
        cursor:default;
    }

    body.is-native-app:not(.public-screen) .native-subject-purchase-row .native-subject-copy > span {
        color:color-mix(in srgb, var(--text) 68%, transparent);
        font-weight:620;
    }

    body.is-native-app:not(.public-screen) .native-subject-add-btn {
        box-sizing:border-box;
        min-width:68px;
        min-height:38px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:0 12px;
        border:1px solid color-mix(in srgb, var(--accent) 62%, var(--border));
        border-radius:6px;
        background:color-mix(in srgb, var(--accent) 12%, var(--control));
        color:var(--accent);
        cursor:pointer;
        font:inherit;
        font-size:12px;
        font-weight:850;
    }

    body.is-native-app:not(.public-screen) .native-subject-add-btn:focus-visible {
        outline:2px solid color-mix(in srgb, var(--accent) 56%, transparent);
        outline-offset:2px;
    }

    body.is-native-app:not(.public-screen) .native-subject-add-btn.is-in-cart {
        border-color:color-mix(in srgb, #ef4444 48%, var(--border));
        background:color-mix(in srgb, #ef4444 8%, var(--control));
        color:color-mix(in srgb, #ef4444 82%, var(--text));
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.has-offline-control .native-subject-row {
        padding-right:54px;
    }

    body.is-native-app:not(.public-screen) .native-offline-subject-btn {
        position:absolute;
        top:50%;
        right:10px;
        z-index:2;
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        transform:translateY(-50%);
        border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
        border-radius:6px;
        background:var(--control);
        color:var(--accent);
        font:inherit;
        font-size:17px;
        font-weight:800;
    }

    body.is-native-app:not(.public-screen) .native-offline-subject-btn.is-ready {
        border-color:color-mix(in srgb, #22c55e 62%, var(--border));
        color:#22c55e;
    }

    body.is-native-app:not(.public-screen) .native-offline-subject-btn:disabled {
        opacity:0.62;
    }

    body.is-native-app:not(.public-screen) .native-subject-row:focus-visible {
        outline:2px solid color-mix(in srgb, var(--accent) 64%, transparent);
        outline-offset:-2px;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.is-locked .native-subject-row {
        color:color-mix(in srgb, var(--text) 72%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.is-unavailable .native-subject-row {
        color:color-mix(in srgb, var(--text) 58%, transparent);
        cursor:not-allowed;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy {
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:5px;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy > strong {
        min-width:0;
        color:inherit;
        font-size:14px;
        font-weight:780;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy > span:not(.native-subject-progress) {
        color:color-mix(in srgb, currentColor 64%, transparent);
        font-size:11px;
        font-weight:520;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy > .native-subject-validity {
        color:color-mix(in srgb, var(--accent) 58%, var(--text));
        display:block;
        font-size:11px;
        font-weight:620;
    }

    body.is-native-app:not(.public-screen) .native-subject-progress {
        width:100%;
        height:3px;
        margin-top:1px;
        overflow:hidden;
        border-radius:99px;
        background:var(--soft);
    }

    body.is-native-app:not(.public-screen) .native-subject-progress > span {
        display:block;
        height:100%;
        border-radius:inherit;
        background:var(--accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-row-tail {
        width:30px;
        height:30px;
        display:grid;
        place-items:center;
        justify-self:end;
    }

    body.is-native-app:not(.public-screen) .native-subject-chevron {
        width:8px;
        height:8px;
        border-top:2px solid currentColor;
        border-right:2px solid currentColor;
        transform:rotate(45deg);
        opacity:0.62;
    }

    body.is-native-app:not(.public-screen) .native-subject-lock {
        width:16px;
        height:16px;
        background:currentColor;
        opacity:0.6;
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-native-app:not(.public-screen) .native-course-plans {
        margin-top:18px;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle,
    body.is-native-app:not(.public-screen) .native-course-plans-heading {
        box-sizing:border-box;
        width:100%;
        min-height:64px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto 18px;
        align-items:center;
        gap:10px;
        padding:8px 3px;
        border:0;
        border-top:1px solid var(--border);
        border-bottom:1px solid var(--border);
        border-radius:0;
        background:transparent;
        color:var(--text);
        cursor:pointer;
        font:inherit;
        text-align:left;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-heading {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:4px;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle > span:first-child {
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle strong,
    body.is-native-app:not(.public-screen) .native-course-plans-heading strong {
        font-size:12px;
        font-weight:820;
        line-height:1.2;
        text-transform:uppercase;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle small,
    body.is-native-app:not(.public-screen) .native-course-plans-heading small {
        color:color-mix(in srgb, var(--text) 58%, transparent);
        font-size:10px;
        font-weight:540;
        line-height:1.3;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle > span:nth-child(2) {
        color:var(--accent);
        font-size:11px;
        font-weight:800;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle i {
        width:7px;
        height:7px;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        transform:translateY(-2px) rotate(45deg);
        transition:transform 150ms ease;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle[aria-expanded="true"] i {
        transform:translateY(2px) rotate(225deg);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-list {
        margin-top:8px;
        overflow:hidden;
        border:1px solid var(--border);
        border-radius:8px;
        background:var(--card);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-list[hidden] {
        display:none;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row {
        min-height:64px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        align-items:center;
        gap:10px;
        padding:10px 11px;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row + .native-course-plan-row {
        border-top:1px solid var(--border);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row.is-featured {
        box-shadow:inset 3px 0 0 var(--accent);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-copy {
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:5px;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-heading {
        min-width:0;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:6px;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-heading strong {
        color:var(--text);
        font-size:14px;
        font-weight:800;
        line-height:1.15;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-heading em {
        padding:3px 5px;
        border-radius:5px;
        background:color-mix(in srgb, var(--accent) 16%, var(--control));
        color:var(--accent);
        font-size:8px;
        font-style:normal;
        font-weight:900;
        line-height:1;
        text-transform:uppercase;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-copy small {
        color:color-mix(in srgb, var(--text) 58%, transparent);
        font-size:10px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row > button {
        min-width:68px;
        min-height:40px;
        padding:0 10px;
        border:1px solid var(--accent);
        border-radius:6px;
        background:var(--accent);
        color:#fff;
        font:inherit;
        font-size:11px;
        font-weight:820;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row > button.is-in-cart {
        border-color:color-mix(in srgb, #22c55e 52%, var(--border));
        background:color-mix(in srgb, #22c55e 24%, var(--control));
        color:var(--text);
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects {
        margin-top:18px;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle {
        box-sizing:border-box;
        width:100%;
        min-height:50px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto 18px;
        align-items:center;
        gap:10px;
        padding:0 3px;
        border:0;
        border-top:1px solid var(--border);
        border-bottom:1px solid var(--border);
        border-radius:0;
        background:transparent;
        color:var(--text);
        cursor:pointer;
        font:inherit;
        text-align:left;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle strong {
        min-width:0;
        font-size:12px;
        font-weight:800;
        text-transform:uppercase;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle span {
        color:var(--accent);
        font-size:11px;
        font-weight:800;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle i {
        width:7px;
        height:7px;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        transform:translateY(-2px) rotate(45deg);
        transition:transform 150ms ease;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle[aria-expanded="true"] i {
        transform:translateY(2px) rotate(225deg);
    }

    body.is-native-app:not(.public-screen) .native-locked-subject-list {
        margin-top:8px;
    }

    body.is-native-app:not(.public-screen) .native-locked-subject-list[hidden] {
        display:none;
    }
}

.course-days-badge {
    display:block;
    min-height:0;
    padding:0;
    border-radius:0;
    background:transparent;
    color:rgba(255,255,255,0.78);
    font-size:13px;
    font-weight:450;
    line-height:1.1;
    backdrop-filter:none;
    text-shadow:0 2px 10px rgba(0,0,0,0.54);
    transition:color 150ms ease;
}

.course-access-validity {
    display:flex;
    align-items:center;
    gap:6px;
    max-width:100%;
    color:rgba(191,219,254,0.72);
    font-size:10.5px;
    font-weight:600;
    line-height:1.2;
    text-shadow:0 2px 10px rgba(0,0,0,0.62);
    overflow-wrap:anywhere;
}

.course-access-validity > span,
.subject-validity > span {
    flex:0 0 auto;
    color:color-mix(in srgb, currentColor 72%, transparent);
    font-size:0.82em;
    font-weight:850;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active) {
    filter:grayscale(0.42) saturate(0.62) brightness(0.84) contrast(0.94);
}

.course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active) .course-access-title {
    color:rgba(255,255,255,0.64);
}

.course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active) .course-days-badge {
    color:rgba(255,255,255,0.5);
}

.course-access-pill.is-locked .course-access-title {
    color:rgba(255,255,255,0.68);
}

.course-access-pill.is-locked .course-days-badge {
    color:rgba(255,255,255,0.72);
    font-weight:650;
}

.course-access-pill.active {
    z-index:5;
    filter:brightness(1.1) contrast(1.07) saturate(1.13);
    transform:scale(1.026);
}

.course-access-pill.active::before {
    opacity:0.55;
}

.course-access-pill.active .course-access-copy {
    transform:translateY(0);
}

.course-access-pill.active .course-days-badge {
    background:transparent;
    box-shadow:none;
    color:rgba(255,255,255,0.9);
}

.course-access-pill.is-locked.active::after {
    background:linear-gradient(180deg, rgba(7,11,20,0.04) 0%, rgba(7,11,20,0.24) 42%, rgba(7,11,20,0.82) 100%);
}

.course-access-pill.is-locked.active .course-access-title {
    color:#ffffff;
}

.course-access-pill.is-locked.active .course-days-badge {
    color:rgba(255,255,255,0.9);
}

.course-access-pill:hover,
.course-access-pill:focus-visible {
    z-index:8;
    filter:grayscale(0.03) brightness(1.08) contrast(1.03) saturate(1.04);
    transform:scale(1.03);
}

.course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):hover,
.course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):focus-visible {
    z-index:8;
    filter:grayscale(0.42) saturate(0.62) brightness(0.88) contrast(0.96);
    transform:scale(1.03);
}

.course-access-pill.active:hover,
.course-access-pill.active:focus-visible {
    z-index:9;
    filter:brightness(1.14) contrast(1.09) saturate(1.16);
    transform:scale(1.045);
}

.search-input {
    box-sizing:border-box;
    width:100%;
    min-height:34px;
    background:var(--control);
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text);
    padding:7px 9px;
    font:inherit;
}

.search-input:focus {
    outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset:2px;
    border-color:var(--accent);
}

.subject-grid {
    display:grid;
    gap:18px;
    max-width:920px;
    margin:0 auto;
}

.subject-grid.has-locked-intro {
    max-width:1180px;
}

.subject-grid.has-course-about,
.subject-grid.has-course-pricing {
    max-width:1180px;
}

#dashboard-subject-grid.has-course-about,
#dashboard-subject-grid.has-course-pricing,
#dashboard-subject-grid.has-locked-intro {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    box-sizing:border-box;
}

#dashboard-subject-grid.has-course-about > *,
#dashboard-subject-grid.has-course-pricing > *,
#dashboard-subject-grid.has-locked-intro > * {
    width:100%;
    box-sizing:border-box;
    margin-inline:auto;
}

#dashboard-subject-grid.has-course-about > .subject-list-panel,
#dashboard-subject-grid.has-course-pricing > .subject-list-panel,
#dashboard-subject-grid.has-locked-intro > .subject-list-panel {
    max-width:920px;
}

#dashboard-subject-grid.has-course-about > .active-course-about-intro,
#dashboard-subject-grid.has-course-pricing > .dashboard-pricing-panel,
#dashboard-subject-grid.has-locked-intro > .locked-course-intro,
#dashboard-subject-grid.has-locked-intro > .dashboard-pricing-panel {
    max-width:1180px;
}

#dashboard-subject-grid.has-course-about > .subject-list-panel {
    order:1;
}

#dashboard-subject-grid.has-course-pricing > .subject-list-panel {
    order:1;
}

#dashboard-subject-grid.has-course-pricing > .dashboard-pricing-disclosure {
    order:2;
    max-width:920px;
}

#dashboard-subject-grid.has-course-about > .active-course-about-intro {
    order:2;
}

#dashboard-subject-grid.has-course-pricing > .dashboard-pricing-panel {
    order:3;
}

#dashboard-subject-grid.has-open-course-pricing > .dashboard-pricing-disclosure {
    order:1;
}

#dashboard-subject-grid.has-open-course-pricing > .dashboard-pricing-panel {
    order:2;
}

#dashboard-subject-grid.has-open-course-pricing > .subject-list-panel {
    order:3;
}

#dashboard-subject-grid.has-locked-intro > .locked-course-intro {
    order:1;
}

#dashboard-subject-grid.has-locked-intro > .subject-list-panel {
    order:2;
}

#dashboard-subject-grid.has-locked-intro > .dashboard-pricing-panel {
    order:3;
}

.locked-course-intro {
    display:grid;
    gap:18px;
    padding:28px;
    border:1px solid var(--border);
    border-radius:8px;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #ffffff), var(--card));
    box-shadow:var(--surface-shadow);
    overflow:hidden;
}

.locked-course-kicker {
    display:block;
    margin-bottom:9px;
    color:color-mix(in srgb, var(--text) 60%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.locked-intro-hero {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(260px, 0.52fr);
    gap:18px;
    align-items:stretch;
    min-height:360px;
}

.locked-intro-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.locked-intro-eyebrow {
    margin:0 0 14px;
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:14px;
    font-weight:800;
}

.locked-intro-copy h2 {
    max-width:720px;
    margin:0 0 14px;
    color:var(--text);
    font-size:38px;
    line-height:1.08;
}

.locked-intro-copy p {
    max-width:660px;
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:16px;
    line-height:1.5;
}

.locked-intro-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.locked-intro-actions button,
.locked-intro-final button {
    min-height:42px;
    padding:0 18px;
    border:0;
    border-radius:8px;
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    color:var(--hero-button-ink);
    cursor:pointer;
    font:inherit;
    font-weight:850;
    transition:background-position 420ms ease, filter 160ms ease;
}

.locked-intro-actions button:hover,
.locked-intro-actions button:focus-visible,
.locked-intro-final button:hover,
.locked-intro-final button:focus-visible {
    background-position:right center;
}

.locked-intro-actions button.secondary {
    border-color:var(--border);
    background:var(--control);
    color:var(--text);
}

.locked-intro-hero-media {
    position:relative;
    min-height:300px;
    border-radius:8px;
    overflow:hidden;
    background:var(--control);
}

.locked-intro-hero-media img,
.locked-intro-sticky img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.locked-intro-hero-media::after,
.locked-intro-sticky::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(2,6,23,0.05), rgba(2,6,23,0.78));
}

.locked-intro-hero-media > div,
.locked-intro-sticky > div {
    position:absolute;
    z-index:1;
    left:18px;
    right:18px;
    bottom:18px;
    color:#ffffff;
}

.locked-intro-hero-media span,
.locked-intro-sticky span {
    display:block;
    margin-bottom:4px;
    color:rgba(255,255,255,0.72);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.locked-intro-hero-media strong,
.locked-intro-sticky strong {
    display:block;
    font-size:28px;
    line-height:1.05;
}

.locked-intro-scroll {
    display:grid;
    grid-template-columns:minmax(240px, 0.38fr) minmax(0, 1fr);
    gap:16px;
    align-items:stretch;
}

.locked-intro-sticky {
    position:sticky;
    top:96px;
    min-height:360px;
    border-radius:8px;
    overflow:hidden;
    background:var(--control);
    box-shadow:var(--subtle-shadow);
}

.locked-intro-steps {
    display:grid;
    gap:12px;
}

.locked-intro-step,
.locked-intro-subject-band,
.locked-intro-final {
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    box-shadow:var(--subtle-shadow);
}

.locked-intro-step {
    min-height:210px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
}

.locked-intro-step > span {
    margin-bottom:auto;
    color:color-mix(in srgb, var(--accent) 74%, var(--text));
    font-size:12px;
    font-weight:900;
}

.locked-intro-step h3,
.locked-intro-subject-band h3,
.locked-intro-final h3 {
    margin:0 0 8px;
    color:var(--text);
    font-size:22px;
    line-height:1.15;
}

.locked-intro-step p,
.locked-intro-final p {
    max-width:680px;
    margin:0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    line-height:1.5;
}

.locked-intro-subject-band {
    display:grid;
    grid-template-columns:minmax(180px, 0.32fr) minmax(0, 1fr);
    gap:18px;
    align-items:center;
    padding:22px;
}

.locked-course-subjects {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
}

.locked-course-subjects span {
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:color-mix(in srgb, var(--text) 82%, transparent);
    font-size:12px;
    font-weight:750;
}

.locked-intro-actions button:hover,
.locked-intro-actions button:focus-visible,
.locked-intro-final button:hover,
.locked-intro-final button:focus-visible {
    filter:none;
    outline:none;
}

.locked-intro-final {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px;
}

.dashboard-pricing-panel {
    --dashboard-pricing-columns:4;
    --pricing-link-accent:var(--accent);
    --pricing-link-line:color-mix(in srgb, var(--accent) 54%, var(--border));
    display:grid;
    grid-template-columns:repeat(var(--dashboard-pricing-columns), minmax(0, 286px));
    justify-content:center;
    gap:12px;
}

.dashboard-pricing-panel[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#14b8a6;
    --pricing-link-line:rgba(94,234,212,0.82);
}

.dashboard-pricing-panel[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#38bdf8;
    --pricing-link-line:rgba(125,211,252,0.95);
}

.dashboard-pricing-panel[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#a78bfa;
    --pricing-link-line:rgba(167,139,250,0.72);
}

body.light .dashboard-pricing-panel[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#0f766e;
    --pricing-link-line:rgba(13,148,136,0.68);
}

body.light .dashboard-pricing-panel[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#0284c7;
    --pricing-link-line:rgba(2,132,199,0.72);
}

body.light .dashboard-pricing-panel[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#8b5cf6;
    --pricing-link-line:rgba(124,58,237,0.62);
}

.dashboard-pricing-disclosure {
    box-sizing:border-box;
    width:min(920px, 100%);
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    justify-self:center;
    padding:10px 0 0;
    border-top:1px solid var(--border);
}

.dashboard-pricing-disclosure > strong {
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
}

.dashboard-pricing-disclosure.is-static > span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    line-height:1.4;
    text-align:right;
}

.dashboard-pricing-disclosure > button {
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 13px;
    border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius:7px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:850;
}

.dashboard-pricing-disclosure > button > span {
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform 150ms ease;
}

.dashboard-pricing-disclosure > button[aria-expanded="true"] > span {
    transform:translateY(2px) rotate(225deg);
}

.dashboard-pricing-disclosure > button:hover,
.dashboard-pricing-disclosure > button:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, var(--control));
    outline:none;
}

/* Make the plan anchors easy to find without making the pricing cards louder. */
body:not(.is-native-app) .dashboard-pricing-disclosure {
    --pricing-link-accent:var(--accent);
    box-sizing:border-box;
    position:relative;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
    padding:13px 16px 13px 18px;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 26%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--pricing-link-accent) 5%, var(--card));
}

body:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#14b8a6;
}

body:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#38bdf8;
}

body:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#a78bfa;
}

body.light:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#0f766e;
}

body.light:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#0284c7;
}

body.light:not(.is-native-app) .dashboard-pricing-disclosure[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#7c3aed;
}

body:not(.is-native-app) .dashboard-pricing-disclosure-copy {
    min-width:0;
    display:grid;
    gap:3px;
}

body:not(.is-native-app) .dashboard-pricing-disclosure-copy > span {
    color:color-mix(in srgb, var(--pricing-link-accent) 78%, var(--text));
    font-size:10px;
    font-weight:900;
    letter-spacing:0.08em;
    line-height:1.2;
    text-transform:uppercase;
}

body:not(.is-native-app) .dashboard-pricing-disclosure-copy > strong {
    color:var(--text);
    font-size:18px;
    font-weight:850;
    line-height:1.2;
}

body:not(.is-native-app) .dashboard-pricing-disclosure > button {
    flex:0 0 auto;
    border-color:color-mix(in srgb, var(--pricing-link-accent) 46%, var(--border));
    background:color-mix(in srgb, var(--pricing-link-accent) 9%, var(--control));
}

body:not(.is-native-app) .dashboard-pricing-disclosure > button:hover,
body:not(.is-native-app) .dashboard-pricing-disclosure > button:focus-visible {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 14%, var(--control));
}

@media (max-width:640px) {
    body:not(.is-native-app) .dashboard-pricing-disclosure {
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:13px 14px;
    }

    body:not(.is-native-app) .dashboard-pricing-disclosure > button {
        width:100%;
    }
}

/* Dashboard logbook stays compact; the full detail view belongs in My Logbook. */
body:not(.is-native-app) .dashboard-logbook-toggle-copy {
    flex-wrap:nowrap;
    align-items:center;
    gap:22px;
}

body:not(.is-native-app) .dashboard-logbook-quick-stats {
    flex-wrap:nowrap;
    gap:0 8px;
    white-space:nowrap;
}

body:not(.is-native-app) .dashboard-logbook-quick-stats > strong {
    font-size:19px;
}

body:not(.is-native-app) .dashboard-logbook-panel-content {
    gap:10px 20px;
    padding:14px 18px 16px;
}

body:not(.is-native-app) .dashboard-logbook-panel-copy p {
    margin-top:0;
    font-size:13px;
}

body:not(.is-native-app) .dashboard-logbook-access-status strong {
    font-size:15px;
}

body:not(.is-native-app) .dashboard-logbook-detail-metrics {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 22px;
    padding:9px 0;
    border-block:1px solid color-mix(in srgb, var(--border) 88%, var(--logbook-accent) 12%);
}

body:not(.is-native-app) .dashboard-logbook-detail-metrics > span {
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    padding:0;
    border-left:0;
}

body:not(.is-native-app) .dashboard-logbook-detail-metrics small,
body:not(.is-native-app) .dashboard-logbook-detail-metrics strong {
    white-space:nowrap;
}

body:not(.is-native-app) .dashboard-logbook-detail-metrics small {
    font-size:9px;
}

body:not(.is-native-app) .dashboard-logbook-detail-metrics strong {
    font-size:14px;
}

body:not(.is-native-app) .dashboard-logbook-recency-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px 18px;
    padding:8px 0 2px;
    border-top:0;
}

body:not(.is-native-app) .dashboard-logbook-recency-item {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;
    gap:2px 7px;
    padding:0;
    border-radius:0;
    background:transparent;
}

body:not(.is-native-app) .dashboard-logbook-recency-item span {
    grid-column:1 / -1;
    font-size:9px;
}

body:not(.is-native-app) .dashboard-logbook-recency-item strong {
    font-size:14px;
}

body:not(.is-native-app) .dashboard-logbook-recency-item small {
    font-size:10px;
}

body:not(.is-native-app) .dashboard-logbook-deferred-access {
    gap:16px;
    padding:10px 14px;
    border-color:color-mix(in srgb, var(--logbook-accent-bright) 20%, var(--border));
    background:color-mix(in srgb, var(--logbook-accent) 4%, var(--card));
}

body:not(.is-native-app) .dashboard-logbook-deferred-access small {
    margin-bottom:2px;
}

body:not(.is-native-app) .dashboard-logbook-deferred-access strong {
    font-size:13px;
}

body:not(.is-native-app) .dashboard-logbook-deferred-access p {
    font-size:11px;
    line-height:1.4;
}

@media (max-width:900px) and (min-width:721px) {
    body:not(.is-native-app) .dashboard-logbook-toggle-copy {
        gap:12px;
    }

    body:not(.is-native-app) .dashboard-logbook-quick-stats > strong {
        font-size:17px;
    }
}

@media (max-width:720px) {
    body:not(.is-native-app) .dashboard-logbook-toggle-copy {
        flex-wrap:wrap;
        gap:4px 10px;
    }

    body:not(.is-native-app) .dashboard-logbook-quick-stats {
        flex-wrap:wrap;
        white-space:normal;
    }

    body:not(.is-native-app) .dashboard-logbook-recency-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.dashboard-price-card {
    min-height:250px;
}

.dashboard-price-card.selected {
    border-color:var(--pricing-link-line);
}

.dashboard-price-card:hover,
.dashboard-price-card:focus-visible,
.dashboard-price-card.selected:hover,
.dashboard-price-card.selected:focus-visible,
.dashboard-price-card.featured:hover,
.dashboard-price-card.featured:focus-visible {
    border-color:#fff;
}

body.light .dashboard-price-card:hover,
body.light .dashboard-price-card:focus-visible,
body.light .dashboard-price-card.selected:hover,
body.light .dashboard-price-card.selected:focus-visible,
body.light .dashboard-price-card.featured:hover,
body.light .dashboard-price-card.featured:focus-visible {
    border-color:var(--pricing-link-accent);
}

@media (max-width:980px) {
    .dashboard-pricing-panel {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:640px) {
    .dashboard-pricing-panel {
        grid-template-columns:1fr;
    }
}

.active-course-about-intro .dashboard-pricing-panel {
    grid-column:1 / -1;
}

.active-course-pricing-shell {
    display:grid;
    gap:12px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    box-shadow:var(--subtle-shadow);
}

.active-course-pricing-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.active-course-pricing-head h3 {
    margin:0;
    font-size:22px;
}

.active-course-pricing-head button {
    min-height:36px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-weight:800;
}

/*question card*/
.quiz-card {
    --quiz-question-font-size:19px;
    --quiz-content-indent:0px;
    --quiz-question-color:color-mix(in srgb, var(--text) 88%, transparent);
    --quiz-card-inline-padding:clamp(18px, 3vw, 42px);
    background:var(--card);
    border:1px solid var(--border);
    padding:44px var(--quiz-card-inline-padding) 28px;
    border-radius:15px;
    position:relative;
    overflow-anchor:none;
    box-shadow:var(--surface-shadow);
}

.quiz-card.is-compact-quiz-header {
    padding-top:22px;
}

.quiz-card.is-compact-quiz-header .course-context-line {
    display:none !important;
}

.quiz-card.is-compact-quiz-header .question-card-actions {
    top:-1px;
}

#q-counter {
    display:block;
    max-width:calc(100% - var(--quiz-content-indent));
    margin:0 0 10px var(--quiz-content-indent);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    font-size:13px;
    font-weight:300;
    line-height:1.25;
    color:var(--quiz-question-color);
    opacity:0.64;
    white-space:nowrap;
    box-shadow:none;
}

#q-counter[hidden] {
    display:none !important;
}

#question {
    box-sizing:border-box;
    margin:0 0 30px;
    padding-left:var(--quiz-content-indent);
    font-size:var(--quiz-question-font-size);
    font-weight:300;
    line-height:1.32;
    color:var(--quiz-question-color);
    white-space:pre-line;
}

.question-reference-line {
    display:block;
    margin:0 0 0.35em;
    font-size:0.72em;
    font-weight:760;
    line-height:1.25;
}

.question-given-block {
    display:block;
    font-size:0.92em;
    line-height:1.34;
}

.quiz-card-body {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(18px, 3vw, 34px);
    align-items:start;
}

.quiz-card.has-question-media .quiz-card-body {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.quiz-card.has-question-table-media .quiz-card-body {
    grid-template-columns:minmax(0, 0.86fr) minmax(300px, 1.14fr);
    gap:clamp(14px, 2vw, 24px);
}

.quiz-card.has-question-media.media-collapsed .quiz-card-body {
    grid-template-columns:minmax(0, 1fr) 54px;
}

.quiz-question-column {
    min-width:0;
}

.quiz-card.has-question-media:not(.media-collapsed) .quiz-card-body {
    gap:0;
}

.quiz-card.has-question-media:not(.media-collapsed) .quiz-question-column {
    padding-right:clamp(24px, 3vw, 46px);
}

.subject-list-panel {
    width:min(920px, 100%);
    justify-self:center;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 98%, #0f766e), var(--card));
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 18px 38px rgba(0,0,0,0.12);
}

.subject-list-heading {
    box-sizing:border-box;
    height:58px;
    display:flex;
    align-items:center;
    padding:0 18px;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    background:linear-gradient(280deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
}

.subject-list-heading-kicker {
    color:var(--accent);
    font-size:12px;
    font-weight:850;
    letter-spacing:0.14em;
    line-height:1.15;
    text-transform:uppercase;
}

.subject-list-panel.is-focus-bounce {
    animation:subject-list-focus 850ms ease;
}

.dashboard-course-trial {
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb, var(--accent) 8%, var(--card));
}

.dashboard-course-trial-copy {
    min-width:0;
}

.dashboard-course-trial-copy > span {
    display:block;
    margin-bottom:3px;
    color:var(--accent);
    font-size:10px;
    font-weight:850;
    line-height:1.2;
    text-transform:uppercase;
}

.dashboard-course-trial-copy > strong {
    display:block;
    color:var(--text);
    font-size:15px;
    line-height:1.25;
}

.dashboard-course-trial-copy > p {
    margin:4px 0 0;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
    line-height:1.35;
}

.dashboard-course-trial-btn {
    flex:0 0 auto;
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--accent);
    border-radius:6px;
    background:var(--accent);
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:800;
}

.dashboard-course-trial-btn:hover,
.dashboard-course-trial-btn:focus-visible {
    border-color:var(--accent-strong);
    background:var(--accent-strong);
    outline:none;
}

.dashboard-pricing-panel.is-focus-bounce {
    animation:subject-list-focus 850ms ease;
}

@keyframes subject-list-focus {
    0% {
        box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
    32% {
        box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent), var(--surface-shadow);
    }
    100% {
        box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

.subject-list-header,
.subject-list-row {
    display:grid;
    grid-template-columns:minmax(220px, 1fr) 88px minmax(140px, 190px) 112px;
    align-items:center;
    gap:12px;
}

.subject-purchase-mode {
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 14px;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb, var(--accent) 8%, var(--card));
}

.subject-purchase-mode strong {
    font-size:13px;
}

.subject-purchase-mode button {
    min-height:34px;
    padding:0 12px;
    border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:800;
}

.subject-purchase-mode button:hover,
.subject-purchase-mode button:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, var(--control));
    outline:none;
}

.subject-list-header {
    min-height:38px;
    padding:0 14px;
    background:color-mix(in srgb, var(--soft) 82%, var(--accent) 18%);
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.subject-list-row {
    min-height:58px;
    padding:0 14px;
    border-top:1px solid var(--border);
    font-size:13px;
    transition:background-color 160ms ease, box-shadow 160ms ease;
}

.subject-list-row:hover {
    background:color-mix(in srgb, var(--accent) 5%, transparent);
    box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.subject-list-row.is-muted {
    opacity:0.52;
}

.subject-list-row.is-subject-locked {
    background:color-mix(in srgb, var(--soft) 34%, transparent);
    color:color-mix(in srgb, var(--text) 66%, transparent);
}

.subject-list-row.is-practice-ready {
    opacity:1;
    background:transparent;
    color:var(--text);
}

.subject-list-row.is-subject-locked .subject-progress-cell span {
    color:inherit;
    font-weight:750;
}

.subject-name-cell {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.subject-name-cell strong {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:14px;
}

.subject-lock-mark {
    display:inline-block;
    width:14px;
    height:14px;
    margin-top:0;
    background:currentColor;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    flex:0 0 auto;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 7V5.5a3 3 0 0 1 6 0V7h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5.5a1.5 1.5 0 0 0-3 0V7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.subject-name-cell span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
}

.subject-name-cell .subject-lock-mark {
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:0;
}

.subject-days-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:color-mix(in srgb, var(--text) 54%, transparent);
    font-size:10.5px;
    font-weight:600;
}

.subject-days-badge::before {
    content:"";
    width:3px;
    height:3px;
    border-radius:999px;
    background:currentColor;
    opacity:0.78;
}

.subject-validity {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:color-mix(in srgb, var(--accent) 54%, var(--text));
    font-size:11px;
    font-weight:600;
    line-height:1.3;
}

.subject-validity > span {
    color:color-mix(in srgb, currentColor 72%, transparent);
}

.subject-validity::before {
    content:"";
    width:5px;
    height:5px;
    flex:0 0 auto;
    border-radius:999px;
    background:currentColor;
}

.subject-progress-cell {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 42px;
    align-items:center;
    gap:8px;
}

.subject-progress-track {
    height:7px;
    border-radius:999px;
    background:var(--soft);
    overflow:hidden;
}

.subject-progress-fill {
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.subject-row-actions {
    display:flex;
    align-items:center;
    gap:6px;
}

.subject-row-actions button {
    width:100%;
    min-height:32px;
    border-radius:6px;
    border:1px solid var(--accent);
    background:var(--accent);
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    font-weight:700;
}

.subject-row-actions .subject-offline-btn {
    width:32px;
    min-width:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
    background:var(--control);
    color:var(--accent);
    font-size:16px;
}

.subject-row-actions .subject-offline-btn.is-ready {
    border-color:color-mix(in srgb, #22c55e 62%, var(--border));
    color:#22c55e;
}

.offline-download-tooltip {
    --offline-tooltip-arrow-left:50%;
    position:fixed;
    z-index:1200;
    box-sizing:border-box;
    width:max-content;
    max-width:min(310px, calc(100vw - 24px));
    padding:9px 11px;
    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, var(--card) 94%, var(--bg));
    color:var(--text);
    box-shadow:0 10px 28px rgba(0,0,0,0.28);
    font-size:12px;
    font-weight:650;
    line-height:1.45;
    text-align:left;
    pointer-events:none;
}

.offline-download-tooltip[hidden] {
    display:none;
}

.offline-download-tooltip::after {
    content:"";
    position:absolute;
    left:var(--offline-tooltip-arrow-left);
    width:8px;
    height:8px;
    background:inherit;
    border:inherit;
    transform:translateX(-50%) rotate(45deg);
}

.offline-download-tooltip[data-placement="top"]::after {
    bottom:-5px;
    border-top:0;
    border-left:0;
}

.offline-download-tooltip[data-placement="bottom"]::after {
    top:-5px;
    border-right:0;
    border-bottom:0;
}

.subject-row-actions .subject-offline-btn:hover,
.subject-row-actions .subject-offline-btn:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--accent);
}

.subject-row-actions button:hover,
.subject-row-actions button:focus-visible {
    background:var(--accent-strong);
    border-color:var(--accent-strong);
    color:#ffffff;
}

.subject-row-actions button:disabled {
    border-color:var(--border);
    background:var(--control);
    color:color-mix(in srgb, var(--text) 54%, transparent);
    cursor:not-allowed;
}

.subject-row-actions .subject-purchase-btn {
    border-color:color-mix(in srgb, var(--accent) 34%, var(--border));
    background:var(--control);
    color:var(--text);
}

.subject-row-actions .subject-purchase-btn.is-in-cart {
    border-color:var(--border);
    background:color-mix(in srgb, #22c55e 20%, var(--control));
    color:var(--text);
}

.subject-row-actions .subject-purchase-btn:hover,
.subject-row-actions .subject-purchase-btn:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, var(--control));
    color:var(--text);
}

.floating-cart {
    position:relative;
    z-index:126;
    width:auto;
}

.floating-cart[hidden] {
    display:none;
}

.floating-cart-tab {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 10px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 92%, var(--accent));
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:850;
}

.floating-cart-tab::before {
    content:"";
    width:17px;
    height:17px;
    flex:0 0 auto;
    background:currentColor;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2.1l2.6 10.5A3 3 0 0 0 10.6 16h6.8a3 3 0 0 0 2.9-2.2l1.4-5.1A1 1 0 0 0 20.7 7H8.1L7.5 4.8A3 3 0 0 0 4.6 3H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2.1l2.6 10.5A3 3 0 0 0 10.6 16h6.8a3 3 0 0 0 2.9-2.2l1.4-5.1A1 1 0 0 0 20.7 7H8.1L7.5 4.8A3 3 0 0 0 4.6 3H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.floating-cart-tab strong {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--active-fill);
    color:var(--active-ink);
    font-size:12px;
}

.floating-cart-tab.is-reminding {
    animation:cart-reminder-bounce 950ms ease both;
}

@keyframes cart-reminder-bounce {
    0%, 100% {
        transform:translateY(0);
    }
    18% {
        transform:translateY(-5px);
    }
    36% {
        transform:translateY(0);
    }
    54% {
        transform:translateY(-3px);
    }
    72% {
        transform:translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-cart-tab.is-reminding {
        animation:none;
        box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }
}

.floating-cart-panel {
    position:absolute;
    right:0;
    top:calc(100% + 12px);
    z-index:126;
    width:min(360px, calc(100vw - 32px));
    display:none;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 96%, var(--accent));
    box-shadow:var(--surface-shadow);
}

.floating-cart.is-open .floating-cart-tab {
    border-color:color-mix(in srgb, var(--accent) 58%, var(--border));
    background:color-mix(in srgb, var(--accent) 18%, var(--card));
}

.floating-cart.is-open .floating-cart-panel {
    display:block;
}

.floating-cart-head,
.floating-cart-total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.floating-cart-head {
    padding:14px 16px;
    border-bottom:1px solid var(--border);
}

.floating-cart-head span {
    display:block;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.floating-cart-head strong {
    display:block;
    font-size:16px;
}

.floating-cart-head button {
    width:30px;
    height:30px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:20px;
    line-height:1;
}

.floating-cart-minimize {
    position:relative;
    display:grid;
    place-items:center;
}

.floating-cart-minimize span {
    width:14px;
    height:2px;
    border-radius:999px;
    background:currentColor;
}

.floating-cart-close-icon {
    display:none;
}

.floating-cart-minimize:hover,
.floating-cart-minimize:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
    background:color-mix(in srgb, var(--accent) 16%, var(--control));
}

.floating-cart-items {
    display:flex;
    flex-direction:column;
    max-height:270px;
    padding:0 16px;
    overflow:auto;
}

.floating-cart-item {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    gap:14px;
    padding:15px 0 15px 13px;
    border-bottom:1px solid var(--border);
}

.floating-cart-item::before {
    content:"";
    position:absolute;
    top:15px;
    bottom:15px;
    left:0;
    width:3px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 72%, var(--border));
}

.floating-cart-item:last-child {
    border-bottom:0;
}

.floating-cart-item-copy,
.floating-cart-item-actions {
    min-width:0;
}

.floating-cart-item-copy {
    display:grid;
    gap:4px;
}

.floating-cart-item strong,
.floating-cart-item span {
    display:block;
}

.floating-cart-item-copy strong {
    font-size:14px;
    line-height:1.3;
    overflow-wrap:anywhere;
}

.floating-cart-item-copy span,
.floating-cart-item button {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
}

.floating-cart-item-copy span {
    line-height:1.4;
}

.floating-cart-item-actions {
    min-width:62px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
}

.floating-cart-item-actions > strong {
    font-size:15px;
    line-height:1.25;
}

.floating-cart-item .cart-item-original-price {
    color:color-mix(in srgb, var(--text) 46%, transparent);
    font-size:11px;
    text-decoration:line-through;
}

.floating-cart-item .cart-item-upgrade-price {
    color:color-mix(in srgb, #22c55e 76%, var(--text));
    font-size:15px;
}

.floating-cart-item small {
    display:block;
    margin-top:2px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:10px;
    line-height:1.2;
}

.floating-cart-item button {
    margin-top:5px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    font:inherit;
    font-weight:750;
}

.floating-cart-item button:hover,
.floating-cart-item button:focus-visible {
    color:var(--text);
}

.cart-coupon-form {
    display:grid;
    gap:7px;
    padding:13px 16px 0;
}

.cart-coupon-form label {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.cart-coupon-form div {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:8px;
}

.cart-coupon-form input {
    min-width:0;
    min-height:36px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    padding:0 10px;
    font:inherit;
    font-size:13px;
    text-transform:uppercase;
}

.cart-coupon-form input:focus {
    outline:2px solid color-mix(in srgb, var(--accent) 52%, transparent);
    outline-offset:2px;
    border-color:var(--accent);
}

.cart-coupon-form button,
.cart-coupon-applied button {
    min-height:36px;
    border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:850;
}

.cart-coupon-applied {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:10px 16px 0;
    padding:8px 10px;
    border:1px solid color-mix(in srgb, #22c55e 36%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, #22c55e 10%, var(--control));
    font-size:12px;
    font-weight:800;
}

.cart-inclusion-notice {
    margin:10px 16px 0;
    padding:10px 12px;
    border:1px solid color-mix(in srgb, #22c55e 38%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, #22c55e 9%, var(--control));
    color:color-mix(in srgb, #4ade80 74%, var(--text));
    font-size:12px;
    font-weight:750;
    line-height:1.45;
}

.cart-coupon-applied button {
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    color:color-mix(in srgb, var(--text) 68%, transparent);
}

.floating-cart-total {
    padding:13px 16px 0;
    font-size:13px;
    font-weight:800;
}

.floating-cart-total span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
}

.cart-discount-row,
.cart-upgrade-credit-row {
    padding-top:6px;
    color:color-mix(in srgb, #22c55e 76%, var(--text));
}

.cart-pricing-explanation {
    margin:0 16px 2px;
    padding:8px 10px;
    border-left:3px solid color-mix(in srgb, var(--accent) 68%, var(--border));
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:11px;
    line-height:1.45;
}

.cart-quote-confirmed {
    border-left-color:color-mix(in srgb, #22c55e 76%, var(--border));
    color:color-mix(in srgb, #22c55e 72%, var(--text));
}

.cart-quote-error {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 16px 0;
    padding:9px 10px;
    border:1px solid color-mix(in srgb, #ef4444 42%, var(--border));
    border-radius:6px;
    background:color-mix(in srgb, #ef4444 8%, transparent);
    color:var(--text);
    font-size:11px;
    line-height:1.4;
}

.cart-quote-error button {
    flex:0 0 auto;
    min-height:28px;
    padding:4px 9px;
    border:1px solid var(--border);
    border-radius:5px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-weight:800;
}

.fake-payment-total.is-discount,
.fake-payment-total.is-upgrade-credit {
    color:color-mix(in srgb, #22c55e 76%, var(--text));
}

.cart-grand-total {
    padding-top:8px;
    font-size:15px;
}

.cart-terms-consent {
    margin:12px 16px 0;
    padding:10px 11px;
    border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius:6px;
    background:color-mix(in srgb, var(--control) 64%, transparent);
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:11px;
    line-height:1.45;
}

.cart-terms-consent label {
    display:flex;
    align-items:flex-start;
    gap:8px;
    cursor:pointer;
    color:var(--text);
    font-weight:750;
}

.cart-terms-consent input {
    flex:0 0 auto;
    width:15px;
    height:15px;
    margin:1px 0 0;
    accent-color:var(--accent);
}

.cart-terms-consent p {
    margin:7px 0 0 23px;
    color:color-mix(in srgb, var(--text) 62%, transparent);
}

.cart-terms-consent a {
    color:color-mix(in srgb, var(--accent) 82%, var(--text));
    font-weight:750;
}

.payfast-checkout-btn,
.cart-clear-btn {
    width:calc(100% - 32px);
    min-height:40px;
    margin:12px 16px 0;
    border-radius:6px;
    cursor:pointer;
    font:inherit;
    font-weight:800;
}

.payfast-checkout-btn {
    border:1px solid color-mix(in srgb, #22c55e 50%, var(--border));
    background:color-mix(in srgb, #22c55e 18%, var(--control));
    color:var(--text);
}

.payfast-checkout-btn:hover,
.payfast-checkout-btn:focus-visible {
    background:color-mix(in srgb, #22c55e 28%, var(--control));
}

.payfast-checkout-btn:disabled,
.payfast-checkout-btn.is-loading {
    cursor:wait;
    opacity:0.72;
}

.cart-clear-btn {
    margin-top:8px;
    margin-bottom:14px;
    border:1px solid var(--border);
    background:var(--control);
    color:color-mix(in srgb, var(--text) 76%, transparent);
}

.cart-checkout-status {
    margin:0;
    padding:0 16px 14px;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
    font-weight:700;
}

.cart-checkout-status.success {
    color:color-mix(in srgb, #22c55e 76%, var(--text));
}

.cart-checkout-status.error {
    color:color-mix(in srgb, var(--wrong) 82%, var(--text));
}

.fake-payment-overlay {
    position:fixed;
    inset:0;
    z-index:180;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(2,6,23,0.52);
    backdrop-filter:blur(10px);
}

.fake-payment-overlay[hidden] {
    display:none;
}

.password-change-overlay {
    position:fixed;
    inset:0;
    z-index:180;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2,6,23,0.72);
    backdrop-filter:blur(10px);
}

.password-change-overlay[hidden] {
    display:none;
}

.question-report-overlay {
    position:fixed;
    inset:0;
    z-index:190;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2,6,23,0.7);
    backdrop-filter:blur(10px);
}

.question-report-overlay[hidden] {
    display:none;
}

.install-app-overlay {
    position:fixed;
    inset:0;
    z-index:130;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(3,10,22,0.58);
    backdrop-filter:blur(8px);
}

.install-app-overlay[hidden] {
    display:none;
}

html.tailwind-native,
html.tailwind-native body {
    overscroll-behavior:none;
}

html.tailwind-native .landing-install-strip,
html.tailwind-native #install-app-overlay {
    display:none !important;
}

.install-app-modal {
    box-sizing:border-box;
    position:relative;
    width:min(500px, calc(100vw - 32px));
    max-height:min(720px, calc(100svh - 32px));
    overflow:auto;
    padding:28px;
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius:10px;
    background:color-mix(in srgb, var(--card) 94%, var(--nav));
    color:var(--text);
    box-shadow:var(--surface-shadow);
}

.install-app-kicker {
    display:block;
    margin:0 0 10px;
    color:color-mix(in srgb, var(--accent) 76%, var(--text));
    font-size:11px;
    font-weight:850;
    letter-spacing:0.14em;
    text-transform:uppercase;
}

.install-app-modal h2 {
    margin:0 0 12px;
    font-size:24px;
    line-height:1.08;
}

.install-app-modal p {
    margin:0 0 20px;
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:15px;
    line-height:1.5;
}

.install-app-options {
    display:grid;
    gap:10px;
}

.install-app-option {
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--border) 84%, var(--text));
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 76%, transparent);
}

.install-app-option.is-expanded {
    border-color:color-mix(in srgb, var(--accent) 48%, var(--border));
}

.install-app-option.is-coming-soon {
    opacity:.72;
}

.install-app-option-trigger {
    width:100%;
    min-height:68px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:30px minmax(0, 1fr) 14px;
    align-items:center;
    gap:12px;
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    text-align:left;
}

.install-app-option-trigger:hover,
.install-app-option-trigger:focus-visible {
    background:color-mix(in srgb, var(--soft) 62%, transparent);
    outline:none;
}

.install-app-option-trigger.is-disabled,
.install-app-option-trigger.is-disabled:hover {
    background:transparent;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    cursor:default;
}

.install-app-option-icon {
    position:relative;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:color-mix(in srgb, var(--accent) 80%, var(--text));
}

.install-app-option-icon svg {
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.install-app-option-icon.is-apple svg {
    fill:currentColor;
    stroke:none;
}

.install-app-option-icon.is-google-play svg {
    color:color-mix(in srgb, #7dd3fc 82%, var(--text));
}

.install-app-option-copy {
    min-width:0;
    display:grid;
    gap:3px;
}

.install-app-option-copy strong,
.install-app-option-copy small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.install-app-option-copy strong {
    font-size:15px;
    line-height:1.2;
}

.install-app-coming-soon {
    justify-self:end;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}

.install-app-option-copy small {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    line-height:1.2;
}

.install-app-option-chevron {
    width:9px;
    height:9px;
    border-right:2px solid color-mix(in srgb, var(--text) 68%, transparent);
    border-bottom:2px solid color-mix(in srgb, var(--text) 68%, transparent);
    transform:rotate(45deg) translateY(-2px);
    transition:transform 160ms ease;
}

.install-app-option.is-expanded .install-app-option-chevron {
    transform:rotate(225deg) translate(-1px, -1px);
}

.install-app-option-details {
    padding:0 14px 15px 56px;
}

.install-app-option-details ol {
    margin:0;
    padding-left:18px;
    color:color-mix(in srgb, var(--text) 78%, transparent);
    font-size:13px;
    line-height:1.55;
}

.install-app-option-details li + li {
    margin-top:5px;
}

.install-app-option-details .install-app-primary {
    min-height:38px;
    margin:0 0 12px;
    font-size:13px;
}

.install-app-close {
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:999px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 68%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:23px;
    line-height:1;
}

.install-app-close:hover,
.install-app-close:focus-visible {
    background:var(--soft);
    color:var(--text);
    outline:none;
}

.install-app-primary {
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    border:0;
    border-radius:8px;
    background:var(--accent);
    color:#ffffff;
    cursor:pointer;
    font:inherit;
    font-size:14px;
    font-weight:850;
    text-decoration:none;
}

.install-app-primary:hover,
.install-app-primary:focus-visible {
    background:var(--accent-strong);
    outline:none;
}

.install-app-secondary {
    min-height:38px;
    margin-top:16px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:7px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 76%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:760;
}

.install-app-secondary:hover,
.install-app-secondary:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 52%, var(--border));
    color:var(--text);
    outline:none;
}

.tutorial-overlay {
    position:fixed;
    inset:0;
    z-index:1500;
    pointer-events:auto;
}

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

.tutorial-overlay::before {
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.62);
    opacity:1;
    transition:opacity 160ms ease;
}

.tutorial-overlay.has-target::before {
    opacity:0;
}

.tutorial-spotlight {
    position:fixed;
    z-index:1;
    border:2px solid color-mix(in srgb, var(--accent) 78%, #ffffff);
    border-radius:12px;
    box-shadow:0 0 0 9999px rgba(15,23,42,0.62), 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
    pointer-events:none;
    transition:left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
}

.tutorial-overlay:not(.has-target) .tutorial-spotlight {
    opacity:0;
}

.tutorial-card {
    position:fixed;
    z-index:2;
    box-sizing:border-box;
    width:min(350px, calc(100vw - 28px));
    display:grid;
    gap:10px;
    padding:18px;
    border:1px solid color-mix(in srgb, var(--border) 70%, #ffffff);
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 24px 72px rgba(0,0,0,0.34);
}

.tutorial-step-count {
    color:color-mix(in srgb, var(--accent) 82%, var(--text));
    font-size:11px;
    font-weight:900;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.tutorial-card h2 {
    margin:0;
    font-size:20px;
    line-height:1.15;
}

.tutorial-card p {
    margin:0;
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:14px;
    line-height:1.5;
}

.tutorial-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    padding-top:4px;
}

.tutorial-actions button {
    min-height:36px;
    padding:0 12px;
    border-radius:7px;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:800;
}

.tutorial-primary-btn {
    border:0;
    background:var(--accent);
    color:#ffffff;
}

.tutorial-secondary-btn {
    border:1px solid var(--border);
    background:var(--control);
    color:var(--text);
}

.tutorial-actions button:disabled {
    cursor:not-allowed;
    opacity:0.48;
}

.copyright-notice-overlay {
    position:fixed;
    inset:0;
    z-index:210;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2,6,23,0.68);
    backdrop-filter:blur(12px);
}

.copyright-notice-overlay[hidden] {
    display:none;
}

.copyright-notice-modal {
    width:min(520px, 100%);
    display:grid;
    gap:16px;
    padding:24px;
    border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 26px 70px rgba(0,0,0,0.36);
}

.copyright-notice-kicker {
    width:max-content;
    padding:5px 8px;
    border:1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    color:color-mix(in srgb, var(--accent) 72%, var(--text));
    font-size:11px;
    font-weight:900;
    letter-spacing:0;
    text-transform:uppercase;
}

.copyright-notice-modal h2 {
    margin:0;
    font-size:24px;
    line-height:1.15;
}

.copyright-notice-copy {
    display:grid;
    gap:10px;
}

.copyright-notice-copy p {
    margin:0;
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:14px;
    line-height:1.55;
}

.copyright-notice-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    padding-top:4px;
}

.copyright-notice-actions button {
    min-height:40px;
    padding:0 14px;
    border-radius:8px;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:850;
}

.copyright-notice-primary {
    border:0;
    background:var(--hero-button-pulse-bg);
    color:var(--hero-button-ink);
    box-shadow:0 14px 28px rgba(2,10,26,0.22);
}

.copyright-notice-secondary {
    border:1px solid var(--border);
    background:var(--control);
    color:var(--text);
}

body.content-protection-active .content-wrapper,
body.content-protection-active .top-nav,
body.content-protection-active .question-image-viewer-panel {
    -webkit-user-select:none;
    user-select:none;
}

body.content-protection-active img,
body.content-protection-active picture,
body.content-protection-active svg {
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
}

body.content-protection-active input,
body.content-protection-active textarea,
body.content-protection-active select {
    -webkit-user-select:text;
    user-select:text;
}

body.content-protection-active.protected-text-selection-allowed .content-wrapper,
body.content-protection-active.protected-text-selection-allowed .top-nav,
body.content-protection-active.protected-text-selection-allowed .question-image-viewer-panel {
    -webkit-user-select:text;
    user-select:text;
}

.content-protection-overlay {
    position:fixed;
    inset:0;
    z-index:2147483646;
    display:none;
    place-items:center;
    padding:24px;
    background:rgba(4,9,18,0.96);
    color:#f8fbff;
    text-align:center;
}

.content-protection-overlay div {
    width:min(420px, 100%);
    display:grid;
    gap:8px;
    padding:28px;
    border:1px solid rgba(148,163,184,0.22);
    border-radius:8px;
    background:rgba(15,23,42,0.74);
    box-shadow:0 26px 60px rgba(0,0,0,0.34);
}

.content-protection-overlay strong {
    font-size:18px;
}

.content-protection-overlay span {
    color:rgba(226,232,240,0.78);
    font-size:14px;
    line-height:1.5;
}

body.secure-privacy-active .content-protection-overlay,
body.secure-print-active .content-protection-overlay {
    display:grid;
}

/* Keep the landing feature story together: the headline leads and the
   feature cards follow beneath it instead of sitting in a detached right
   column on wide screens. */
body:not(.is-native-app) .about-feature-layout {
    grid-template-columns:1fr;
    align-items:start;
    min-height:0;
}

body:not(.is-native-app) .about-feature-copy {
    max-width:780px;
}

body:not(.is-native-app) .about-feature-tiles {
    justify-self:stretch;
    width:100%;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

@media (max-width:1100px) {
    body:not(.is-native-app) .about-feature-tiles {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:640px) {
    body:not(.is-native-app) .about-feature-tiles {
        grid-template-columns:1fr;
    }
}

.question-report-actions button,
.question-report-actions button:hover,
.question-report-actions button:focus-visible,
.question-report-actions button:active {
    box-shadow:none !important;
}

.content-protection-toast {
    position:fixed;
    left:50%;
    bottom:22px;
    z-index:2147483647;
    max-width:min(420px, calc(100vw - 32px));
    padding:10px 14px;
    border:1px solid rgba(148,163,184,0.28);
    border-radius:8px;
    background:rgba(15,23,42,0.94);
    color:#f8fbff;
    box-shadow:0 18px 42px rgba(0,0,0,0.28);
    font-size:13px;
    font-weight:750;
    line-height:1.35;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, 12px);
    transition:opacity 180ms ease, transform 180ms ease;
}

.content-protection-toast.is-visible {
    opacity:1;
    transform:translate(-50%, 0);
}

@media print {
    body.content-protection-active * {
        visibility:hidden !important;
    }

    body.content-protection-active .content-protection-overlay,
    body.content-protection-active .content-protection-overlay * {
        visibility:visible !important;
    }

    body.content-protection-active .content-protection-overlay {
        display:grid !important;
        background:#ffffff !important;
        color:#111827 !important;
    }

    body.content-protection-active .content-protection-overlay div {
        border:1px solid #111827 !important;
        background:#ffffff !important;
        box-shadow:none !important;
    }

    body.content-protection-active .content-protection-overlay span {
        color:#374151 !important;
    }
}

.password-change-modal {
    width:min(440px, 100%);
    padding:20px;
    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:var(--surface-shadow);
}

.password-change-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}

.password-change-head span {
    display:block;
    margin-bottom:5px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.password-change-head h2 {
    margin:0;
    font-size:24px;
}

.password-change-head button {
    width:32px;
    height:32px;
    display:grid;
    flex:0 0 32px;
    place-items:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:20px;
    line-height:1;
}

.password-change-head .password-change-close svg {
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

.password-change-copy {
    margin:0 0 16px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    line-height:1.5;
}

.password-change-form {
    display:grid;
    gap:12px;
}

.password-change-form label {
    display:grid;
    gap:6px;
}

.password-change-form label span {
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:12px;
    font-weight:800;
}

.password-change-form input {
    min-height:42px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    padding:0 12px;
    font:inherit;
}

.password-change-form input:focus {
    outline:2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset:2px;
    border-color:var(--accent);
}

.password-change-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:4px;
}

.password-change-actions button {
    flex:1 1 160px;
}

.password-change-status {
    min-height:18px;
    margin:0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    font-size:13px;
    line-height:1.4;
}

.password-change-status.success {
    color:color-mix(in srgb, var(--correct) 78%, var(--text));
}

.password-change-status.error {
    color:color-mix(in srgb, var(--wrong) 78%, var(--text));
}

.question-report-modal {
    width:min(520px, 100%);
    max-height:calc(100svh - 40px);
    display:grid;
    gap:14px;
    padding:20px;
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    overflow:auto;
    box-shadow:var(--surface-shadow);
}

.question-report-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.question-report-head span {
    display:block;
    margin-bottom:5px;
    color:color-mix(in srgb, var(--accent) 76%, var(--text));
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.question-report-head h2 {
    margin:0;
    font-size:24px;
    line-height:1.15;
}

.question-report-head button {
    width:32px;
    height:32px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:20px;
    line-height:1;
}

.question-report-copy {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:14px;
    font-weight:650;
    line-height:1.45;
}

.question-report-preview {
    display:grid;
    gap:6px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
}

.question-report-preview span {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.question-report-preview strong {
    font-size:14px;
}

.question-report-preview p {
    margin:0;
    color:color-mix(in srgb, var(--text) 74%, transparent);
    font-size:13px;
    line-height:1.42;
}

.question-report-form {
    display:grid;
    gap:12px;
}

.question-report-form label {
    display:grid;
    gap:6px;
}

.question-report-form label span {
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:12px;
    font-weight:800;
}

.question-report-form select,
.question-report-form textarea {
    min-height:42px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    padding:0 12px;
    font:inherit;
}

.question-report-form textarea {
    min-height:104px;
    padding:10px 12px;
    resize:vertical;
    line-height:1.45;
}

.question-report-admin-list {
    box-sizing:border-box;
    width:100%;
    min-height:min(46vh, 420px);
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    font:inherit;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:12px;
    line-height:1.5;
    resize:vertical;
}

.question-report-admin-list[hidden] {
    display:none;
}

.question-report-form select:focus,
.question-report-form textarea:focus,
.question-report-admin-list:focus {
    outline:2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset:2px;
    border-color:var(--accent);
}

.question-report-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.question-report-status {
    min-height:18px;
    margin:0;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
    font-weight:750;
}

.question-report-status[data-status="success"] {
    color:color-mix(in srgb, var(--correct) 82%, var(--text));
}

.question-report-status[data-status="error"] {
    color:color-mix(in srgb, var(--wrong) 82%, var(--text));
}

.question-report-status[data-status="pending"] {
    color:color-mix(in srgb, var(--accent) 82%, var(--text));
}

.refund-admin-modal {
    width:min(760px, 100%);
}

.refund-admin-lookup,
.refund-admin-orders,
.refund-admin-quote {
    display:grid;
    gap:12px;
}

.refund-admin-lookup {
    grid-template-columns:minmax(0, 1fr) auto;
}

.refund-admin-customer-field {
    display:grid;
    gap:6px;
}

.refund-admin-customer-field > span {
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:12px;
    font-weight:800;
}

.refund-admin-customer-field > small {
    min-height:15px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
}

.refund-admin-customer-field input:disabled {
    cursor:wait;
    opacity:0.65;
}

.refund-admin-lookup input,
.refund-admin-orders select,
.refund-admin-quote input,
.refund-admin-quote select {
    box-sizing:border-box;
    width:100%;
    min-height:42px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    font:inherit;
}

.refund-admin-orders label,
.refund-admin-quote label {
    display:grid;
    gap:6px;
}

.refund-admin-orders label > span,
.refund-admin-quote label > span,
.refund-admin-access > span {
    color:color-mix(in srgb, var(--text) 76%, transparent);
    font-size:12px;
    font-weight:800;
}

.refund-admin-summary {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.refund-admin-summary > div,
.refund-admin-suggestion,
.refund-admin-access {
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
}

.refund-admin-summary > div {
    display:grid;
    gap:5px;
}

.refund-admin-summary span,
.refund-admin-suggestion span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.refund-admin-summary strong {
    font-size:22px;
}

.refund-admin-suggestions {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.refund-admin-suggestion {
    display:grid;
    gap:5px;
    text-align:left;
    cursor:pointer;
    color:var(--text);
    font:inherit;
}

.refund-admin-suggestion:hover,
.refund-admin-suggestion:focus-visible {
    border-color:var(--accent);
    outline:none;
}

.refund-admin-suggestion strong {
    font-size:18px;
}

.refund-admin-quick-amounts {
    display:grid;
    gap:7px;
    padding:2px 0;
}

.refund-admin-quick-amounts > span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.refund-admin-quick-amounts > div {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.refund-admin-quick-amount {
    min-height:36px;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.refund-admin-quick-amount:hover,
.refund-admin-quick-amount:focus-visible {
    border-color:var(--accent);
    outline:none;
}

.refund-admin-access ul {
    display:grid;
    gap:5px;
    margin:8px 0 0;
    padding:0;
    color:color-mix(in srgb, var(--text) 75%, transparent);
    font-size:13px;
    list-style:none;
}

.refund-admin-access > p {
    margin:7px 0 0;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    line-height:1.45;
}

.refund-admin-access-choice-row {
    display:flex !important;
    grid-template-columns:none !important;
    align-items:flex-start;
    gap:9px !important;
    margin:0;
    padding:8px 9px;
    border:1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius:7px;
    color:inherit;
    font-size:13px;
    line-height:1.35;
}

.refund-admin-access-choice-row input {
    width:16px;
    height:16px;
    flex:0 0 auto;
    margin:1px 0 0;
    accent-color:var(--accent);
}

.refund-admin-warning {
    margin:0;
    padding:10px 12px;
    border:1px solid color-mix(in srgb, var(--wrong) 42%, var(--border));
    border-radius:8px;
    color:color-mix(in srgb, var(--wrong) 82%, var(--text));
    font-size:13px;
}

.refund-admin-bank-details {
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 12px;
}

.refund-admin-bank-details summary {
    color:color-mix(in srgb, var(--text) 72%, transparent);
    cursor:pointer;
    font-size:12px;
    font-weight:750;
}

.refund-admin-bank-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-top:10px;
}

.refund-admin-check {
    display:flex !important;
    grid-template-columns:none !important;
    align-items:flex-start;
    gap:9px !important;
    color:color-mix(in srgb, var(--text) 78%, transparent);
    font-size:13px;
    line-height:1.4;
}

.refund-admin-check input {
    width:17px;
    height:17px;
    flex:0 0 auto;
    accent-color:var(--accent);
}

@media (max-width:640px) {
    .refund-admin-lookup,
    .refund-admin-summary,
    .refund-admin-suggestions,
    .refund-admin-bank-grid {
        grid-template-columns:1fr;
    }
}

.fake-payment-card {
    width:min(520px, 100%);
    max-height:min(720px, calc(100vh - 48px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 30px 90px rgba(0,0,0,0.42);
}

.fake-payment-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.fake-payment-head button {
    width:34px;
    height:34px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:28px;
    line-height:1;
}

.fake-payment-body {
    overflow:auto;
    padding:22px;
}

.fake-payment-kicker {
    margin:0 0 8px;
    color:color-mix(in srgb, var(--accent) 78%, var(--text));
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.fake-payment-body h2 {
    margin:0 0 10px;
    font-size:32px;
}

.fake-payment-body p {
    margin:0 0 18px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
}

.fake-payment-items {
    display:grid;
    gap:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:8px;
}

.fake-payment-items article {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:16px;
    align-items:center;
    padding:14px;
    border-top:1px solid var(--border);
    background:var(--control);
}

.fake-payment-items article:first-child {
    border-top:0;
}

.fake-payment-items strong,
.fake-payment-items span {
    display:block;
}

.fake-payment-items span {
    margin-top:3px;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:13px;
}

.fake-payment-total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:18px 0;
    font-size:16px;
    font-weight:900;
}

.fake-payment-total span {
    color:color-mix(in srgb, var(--text) 62%, transparent);
}

.fake-payment-total strong {
    font-size:28px;
}

.fake-payment-pay-btn,
.fake-payment-cancel-btn {
    width:100%;
    min-height:44px;
    border-radius:8px;
    cursor:pointer;
    font:inherit;
    font-weight:900;
}

.fake-payment-pay-btn {
    border:1px solid color-mix(in srgb, #22c55e 50%, var(--border));
    background:color-mix(in srgb, #22c55e 24%, var(--control));
    color:var(--text);
}

.fake-payment-cancel-btn {
    margin-top:10px;
    border:1px solid var(--border);
    background:var(--control);
    color:color-mix(in srgb, var(--text) 74%, transparent);
}

/* LAYOUT */
.quiz-study-layout {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:22px;
    align-items:start;
    transition:grid-template-columns 180ms ease, gap 180ms ease;
}

.quiz-study-layout.sidebar-collapsed {
    grid-template-columns:44px minmax(0,1fr);
    gap:14px;
}

.quiz-stage {
    min-width:0;
}

.quiz-main-layout {
    display:flex;
    align-items:flex-start;
    gap:14px;
}

/* SIDEBAR */
.module-sidebar {
    box-sizing:border-box;
    width:100%;
    max-height:calc(100vh - 116px);
    overflow:auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:0 12px 12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:sticky;
    top:80px;
    box-shadow:var(--subtle-shadow);
    scrollbar-width:thin;
    scrollbar-color:rgba(241,245,249,0.55) transparent;
    transition:padding 180ms ease, gap 180ms ease, min-height 180ms ease;
}

.sidebar-toggle {
    position:absolute;
    top:12px;
    right:14px;
    z-index:2;
    width:36px;
    height:36px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 82%, transparent);
    cursor:pointer;
    font:inherit;
    line-height:1;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.sidebar-toggle-panel-icon {
    position:relative;
    width:16px;
    height:14px;
    border:1.7px solid currentColor;
    border-radius:4px;
    opacity:0.9;
}

.sidebar-toggle-panel-icon::before {
    content:"";
    position:absolute;
    top:2px;
    bottom:2px;
    left:4px;
    width:1.7px;
    border-radius:999px;
    background:currentColor;
    opacity:0.7;
}

.sidebar-toggle-chevron {
    width:6px;
    height:6px;
    border-top:1.7px solid currentColor;
    border-right:1.7px solid currentColor;
    transform:rotate(-135deg);
    transform-origin:50% 50%;
    transition:transform 160ms ease;
}

.sidebar-toggle:hover {
    background:transparent;
    border-color:transparent;
    color:var(--accent);
}

.sidebar-toggle:focus-visible {
    outline:none;
    background:transparent;
    border-color:transparent;
    color:var(--accent);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Website quiz: center the sidebar minimize control with the Change Subject button. */
body:not(.is-native-app) .quiz-study-layout:not(.sidebar-collapsed) .module-sidebar > .sidebar-toggle {
    top:6px;
}

.module-sidebar.is-trial-sidebar #module-topic-label {
    margin-right:52px;
}

.module-sidebar.is-trial-sidebar .sidebar-toggle {
    top:12px;
    right:8px;
    border-color:color-mix(in srgb, var(--border) 86%, transparent);
    background:var(--control);
}

.module-sidebar.is-trial-sidebar .sidebar-toggle:hover,
.module-sidebar.is-trial-sidebar .sidebar-toggle:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 46%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
}

.quiz-study-layout.sidebar-collapsed .module-sidebar {
    min-height:54px;
    padding:8px 6px;
    overflow:visible;
}

.quiz-study-layout.sidebar-collapsed .module-sidebar-section {
    display:none;
}

.quiz-study-layout.sidebar-collapsed .sidebar-toggle {
    top:9px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
}

.quiz-study-layout.sidebar-collapsed .sidebar-toggle-chevron {
    transform:rotate(45deg);
}

.module-sidebar::-webkit-scrollbar {
    width:6px;
}

.module-sidebar::-webkit-scrollbar-thumb {
    background:rgba(241,245,249,0.55);
    border-radius:999px;
}

.module-sidebar-section {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.module-sidebar-section[hidden] {
    display:none !important;
}

.sidebar-label {
    position:relative;
    padding:6px 48px 6px 11px;
    border-radius:6px;
    background:color-mix(in srgb, var(--text) 7%, transparent);
    font-size:11px;
    font-weight:800;
    color:color-mix(in srgb, var(--text) 68%, transparent);
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.sidebar-label::before {
    content:"";
    position:absolute;
    left:0;
    top:6px;
    bottom:6px;
    width:3px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 34%, transparent);
}

#subject-sidebar-toggle {
    box-sizing:border-box;
    width:calc(100% - 48px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:6px 0 0;
    padding:9px 11px;
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    border:1px solid var(--border);
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    appearance:none;
    box-shadow:none;
}

#subject-sidebar-label-text {
    min-width:0;
    flex:0 1 auto;
    white-space:nowrap;
    font-size:12px;
    font-weight:780;
}

#subject-sidebar-toggle::before {
    display:none;
}

#subject-sidebar-toggle:hover .subject-sidebar-toggle-icon,
#subject-sidebar-toggle:focus-visible .subject-sidebar-toggle-icon {
    color:var(--accent);
}

#subject-sidebar-toggle:focus-visible {
    outline:none;
    border-color:color-mix(in srgb, var(--accent) 58%, var(--border));
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.subject-sidebar-toggle-icon {
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-top:1.8px solid currentColor;
    border-right:1.8px solid currentColor;
    transform:translateY(-1.5px) rotate(45deg);
    transform-origin:50% 50%;
    transition:transform 160ms ease, color 160ms ease;
}

#subject-sidebar-toggle.is-expanded .subject-sidebar-toggle-icon {
    transform:translateY(-1.5px) rotate(135deg);
}

.sidebar-list {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-left:12px;
}

#module-subject-list[hidden],
.module-sidebar-section.subjects-collapsed #module-subject-list {
    display:none !important;
}

.sidebar-list.topic-list {
    padding-left:10px;
}

.sidebar-list.topic-list.trial-topic-list {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    padding-left:0;
}

.trial-sidebar-summary {
    grid-column:1 / -1;
    padding:1px 2px 3px;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
}

.sidebar-nav-item.trial-topic-item {
    min-height:42px;
    gap:5px;
    padding:7px;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background:color-mix(in srgb, var(--control) 72%, transparent);
    font-size:11.5px;
    font-weight:720;
}

.sidebar-nav-item.trial-topic-item:hover:not(:disabled):not(.active) {
    border-color:color-mix(in srgb, var(--accent) 38%, var(--border));
}

.sidebar-nav-item.trial-topic-item.active {
    border-color:color-mix(in srgb, var(--accent) 62%, var(--border));
}

.sidebar-nav-item.trial-topic-item > .topic-label {
    display:-webkit-box;
    min-width:0;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.15;
    white-space:normal;
}

.sidebar-nav-item.trial-topic-item .sidebar-topic-status {
    align-self:start;
}

.sidebar-nav-item.trial-topic-item .sidebar-count {
    font-size:10px;
}

.sidebar-nav-item.trial-all-item {
    grid-column:1 / -1;
    min-height:36px;
    font-size:12px;
}

.sidebar-nav-item {
    box-sizing:border-box;
    width:100%;
    min-height:32px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    text-align:left;
}

.sidebar-nav-item > span:first-child {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sidebar-nav-item > span.sidebar-subject-label {
    display:flex;
    align-items:flex-start;
    gap:6px;
    width:100%;
    min-width:0;
    overflow:visible;
    white-space:normal;
}

.sidebar-subject-label > span:first-child {
    min-width:0;
    overflow:visible;
    overflow-wrap:anywhere;
    text-overflow:clip;
    white-space:normal;
    line-height:1.25;
}

.sidebar-subject-label .subject-lock-mark {
    width:13px;
    height:13px;
    margin-top:1px;
    color:color-mix(in srgb, currentColor 72%, transparent);
}

.sidebar-nav-item.is-subject-locked:not(.active) {
    color:color-mix(in srgb, var(--text) 68%, transparent);
}

.sidebar-nav-item:hover:not(:disabled):not(.active) {
    background:var(--soft);
}

.sidebar-nav-item.active {
    background:var(--active-fill);
    color:var(--active-ink);
}

.pool-item {
    font-weight:700;
}

.sidebar-nav-item.topic-group-item {
    margin-top:6px;
    font-weight:700;
}

.sidebar-nav-item.topic-item > .topic-label {
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    line-height:1.22;
}

.topic-group-block {
    display:grid;
    gap:3px;
    margin-top:6px;
}

.topic-group-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 14px;
    align-items:center;
    gap:4px;
    padding-right:8px;
    border-radius:6px;
    color:var(--text);
    transition:background-color 160ms ease, color 160ms ease;
}

.topic-group-row .sidebar-nav-item.topic-group-item {
    width:100%;
    min-width:0;
    margin-top:0;
    padding-right:2px;
    outline:none;
    background:transparent;
    color:inherit;
}

.topic-group-row .sidebar-nav-item.topic-group-item:focus-visible {
    outline:none;
    box-shadow:none;
}

.topic-group-row .sidebar-nav-item.topic-group-item > .topic-label {
    white-space:normal;
}

.topic-group-row .sidebar-topic-status {
    margin-left:0;
}

.topic-group-row:hover,
.topic-group-row:focus-within {
    background:var(--soft);
}

.topic-group-row:has(.sidebar-nav-item.topic-group-item.active) {
    background:var(--active-fill);
    color:var(--active-ink);
}

.topic-group-row:has(.sidebar-nav-item.topic-group-item.has-active-child:not(.active)) {
    background:color-mix(in srgb, var(--active-fill) 46%, transparent);
    color:var(--text);
}

.topic-group-row .sidebar-nav-item.topic-group-item:hover:not(:disabled):not(.active),
.topic-group-row .sidebar-nav-item.topic-group-item.active,
.topic-group-row .sidebar-nav-item.topic-group-item.has-active-child:not(.active) {
    background:transparent;
    color:inherit;
}

.topic-group-row .sidebar-nav-item.topic-group-item:hover:not(:disabled):not(.active) {
    background:transparent;
    color:inherit;
}

.topic-group-row .sidebar-nav-item.topic-group-item.has-active-child:not(.active) {
    background:transparent;
    color:inherit;
}

.topic-disclosure-btn {
    width:14px;
    height:28px;
    flex:0 0 14px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:inherit;
    cursor:pointer;
    opacity:1;
    transition:opacity 160ms ease, color 160ms ease;
}

.topic-disclosure-btn:hover,
.topic-disclosure-btn:focus-visible {
    background:transparent;
    color:inherit;
    opacity:1;
    outline:none;
}

.topic-disclosure-icon {
    --topic-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M4 3l6 7-6 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --topic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M3 4l7 6 7-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display:block;
    box-sizing:border-box;
    width:12px;
    height:12px;
    border:0;
    background:currentColor;
    transform:none;
    -webkit-mask:var(--topic-chevron-right) center / 8px 12px no-repeat;
    mask:var(--topic-chevron-right) center / 8px 12px no-repeat;
    transition:background-color 160ms ease;
}

.topic-disclosure-btn.is-expanded .topic-disclosure-icon {
    transform:none;
    -webkit-mask:var(--topic-chevron-down) center / 12px 8px no-repeat;
    mask:var(--topic-chevron-down) center / 12px 8px no-repeat;
}

.sidebar-nav-item.topic-group-item.has-active-child:not(.active) {
    color:inherit;
}

.topic-child-list {
    display:grid;
    grid-template-rows:1fr;
    padding-left:20px;
    opacity:1;
    overflow:hidden;
    transition:
        grid-template-rows 190ms ease,
        opacity 150ms ease;
}

.topic-child-list.is-collapsed {
    grid-template-rows:0fr;
    opacity:0;
    pointer-events:none;
}

.topic-child-list-inner {
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    overflow:hidden;
}

.sidebar-nav-item.topic-child-item {
    min-height:38px;
    width:100%;
    padding-left:12px;
    font-size:12px;
}

.sidebar-nav-item.topic-child-item > .topic-label {
    display:grid;
    flex:1 1 auto;
    gap:1px;
    min-width:0;
}

.topic-label-title {
    line-height:1.16;
}

.topic-reference {
    color:color-mix(in srgb, currentColor 62%, transparent);
    font-size:10px;
    font-weight:500;
    line-height:1.14;
}

.sidebar-nav-item:disabled {
    cursor:default;
    opacity:0.42;
}

.sidebar-count {
    font-size:11px;
    font-weight:600;
    color:color-mix(in srgb, currentColor 46%, transparent);
}

body.light .sidebar-count {
    color:#64748b;
}

.sidebar-topic-status {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    min-width:max-content;
}

.topic-complete-tick {
    width:14px;
    height:14px;
    flex:0 0 auto;
    background:var(--correct);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.6 2.7 8.1l1.4-1.4 2.1 2.1 5.7-5.7 1.4 1.4-7.1 7.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.6 2.7 8.1l1.4-1.4 2.1 2.1 5.7-5.7 1.4 1.4-7.1 7.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.question-card-actions {
    position:absolute;
    top:-1px;
    left:28px;
    right:28px;
    z-index:90;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    align-items:center;
    gap:8px;
    padding:0;
    pointer-events:none;
}

.question-action-group {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px;
    background:color-mix(in srgb, var(--card) 92%, transparent);
    border:1px solid var(--border);
    border-radius:0 0 8px 8px;
    box-shadow:var(--subtle-shadow);
    backdrop-filter:blur(10px);
    pointer-events:auto;
}

.question-action-group-center {
    grid-column:2;
    justify-self:center;
}

.question-action-group-resources {
    grid-column:1;
    justify-self:start;
}

.question-action-group-tools {
    grid-column:3;
    justify-self:end;
    position:relative;
    padding:6px;
}

.course-context-line {
    margin:0 0 5px;
    color:color-mix(in srgb, var(--text) 56%, transparent);
    font-size:12px;
    font-weight:720;
    line-height:1.2;
}

.course-context-line[hidden] {
    display:none !important;
}

.question-action-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:32px;
    padding:6px 10px;
    background:var(--control);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:6px;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    line-height:1.2;
    text-align:center;
    font-weight:650;
    text-decoration:none;
}

.icon-action-btn {
    width:32px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.flag-icon {
    width:14px;
    height:16px;
    display:block;
    position:relative;
    border-left:1.8px solid currentColor;
}

.flag-icon::before {
    content:"";
    position:absolute;
    left:2px;
    top:1px;
    width:9px;
    height:7px;
    border:1.8px solid currentColor;
    border-left:0;
    border-radius:1px;
    background:transparent;
}

.icon-action-btn.is-active {
    background:var(--warning-soft);
    border-color:var(--flag);
    color:var(--flag);
}

.question-action-btn:hover {
    background:var(--accent);
    color:#ffffff;
}

.question-action-btn:focus-visible {
    outline:none;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent);
}

.formula-action-btn.is-active {
    background:var(--accent);
    border-color:var(--accent);
    color:#ffffff;
}

.report-question-btn {
    gap:6px;
    min-width:86px;
    border-color:color-mix(in srgb, var(--flag) 62%, var(--border));
    background:color-mix(in srgb, var(--flag) 12%, var(--control));
    color:color-mix(in srgb, var(--text) 84%, var(--flag));
}

.report-question-btn:hover,
.report-question-btn:focus-visible {
    border-color:color-mix(in srgb, var(--flag) 78%, var(--border));
    background:color-mix(in srgb, var(--flag) 22%, var(--control));
    color:var(--text);
}

.report-icon {
    box-sizing:border-box;
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border:1.6px solid currentColor;
    border-radius:50%;
    font-size:11px;
    font-weight:900;
    line-height:1;
}

.question-action-menu {
    position:relative;
    display:flex;
}

.more-action-icon {
    width:3px;
    height:3px;
    display:block;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.question-action-menu-panel {
    box-sizing:border-box;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:120;
    width:172px;
    display:grid;
    gap:2px;
    padding:5px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--card);
    box-shadow:0 16px 34px rgba(0,0,0,0.24);
}

.question-action-menu-panel[hidden] {
    display:none !important;
}

.question-action-menu-panel button,
.question-action-menu-panel a {
    width:100%;
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:7px 10px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:700;
    text-align:left;
    text-decoration:none;
}

.question-action-menu-panel button:hover:not(:disabled),
.question-action-menu-panel button:focus-visible,
.question-action-menu-panel a:hover,
.question-action-menu-panel a:focus-visible {
    outline:none;
    background:var(--soft);
}

.question-action-menu-panel button:disabled {
    cursor:not-allowed;
    opacity:0.42;
}

.question-action-menu-panel button.is-danger {
    color:var(--wrong);
}

.question-action-menu-panel button.is-danger:hover,
.question-action-menu-panel button.is-danger:focus-visible {
    background:color-mix(in srgb, var(--wrong) 12%, var(--control));
}

.native-question-action-menu-panel {
    width:210px;
    max-height:min(58dvh, 360px);
    overflow-y:auto;
    overscroll-behavior:contain;
}

.native-question-action-menu-panel button,
.native-question-action-menu-panel a {
    gap:10px;
    min-height:42px;
    padding:9px 11px;
    font-size:13px;
}

.native-question-action-menu-panel .flag-icon,
.native-question-action-menu-panel .report-icon {
    flex:0 0 auto;
}

.native-question-action-menu-panel .native-question-flag-menu-item.is-flagged {
    background:color-mix(in srgb, var(--flag) 12%, var(--card));
    color:var(--flag);
}

.native-question-action-menu-panel .native-clear-question-btn {
    margin-top:3px;
    box-shadow:inset 0 1px 0 var(--border);
}

.question-action-menu-panel .website-question-flag-menu-item {
    gap:10px;
}

.question-action-menu-panel .website-question-flag-menu-item .flag-icon {
    flex:0 0 auto;
}

.question-action-menu-panel .website-question-flag-menu-item.is-active {
    background:var(--warning-soft);
    color:var(--flag);
}

.question-action-menu-panel .website-question-formula-menu-item.is-active {
    background:color-mix(in srgb, var(--accent) 16%, var(--card));
    color:color-mix(in srgb, var(--text) 88%, var(--accent));
}

.more-action-btn.has-flagged-question,
.more-action-btn.has-flagged-question:hover,
.more-action-btn.has-flagged-question:focus-visible {
    border-color:color-mix(in srgb, var(--flag) 68%, var(--border));
    background:var(--warning-soft);
    color:var(--flag);
}

.formula-action-btn,
.resource-action-btn {
    box-sizing:border-box;
    flex:0 0 98px;
    width:98px;
    padding-inline:8px;
    white-space:nowrap;
}

.resource-action-btn {
    border-color:color-mix(in srgb, var(--accent) 44%, var(--border));
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:color-mix(in srgb, var(--text) 88%, var(--accent));
}

.helpful-formula-panel {
    margin:0;
    padding:14px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--accent) 8%, var(--soft));
    box-shadow:0 18px 46px rgba(0, 0, 0, 0.24);
}

#formula-container {
    position:absolute;
    top:44px;
    right:28px;
    z-index:1000;
    width:min(520px, calc(100% - 56px));
    max-height:min(62vh, 520px);
    overflow:auto;
}

#formula-container[hidden] {
    display:none !important;
}

.formula-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.formula-panel-head strong {
    font-size:14px;
    font-weight:850;
}

.formula-close-btn {
    min-height:30px;
    padding:5px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:750;
}

.formula-close-btn:hover,
.formula-close-btn:focus-visible {
    background:var(--accent);
    color:#ffffff;
    outline:none;
}

.formula-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:10px;
}

.formula-card {
    min-width:0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 88%, transparent);
}

.formula-card h3 {
    margin:0 0 9px;
    font-size:13px;
    line-height:1.25;
}

.formula-card ul {
    display:grid;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.formula-card li {
    display:grid;
    gap:3px;
    min-width:0;
}

.formula-card span {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.formula-card code {
    display:block;
    min-width:0;
    padding:7px 8px;
    border-radius:6px;
    background:color-mix(in srgb, var(--control) 84%, transparent);
    color:var(--text);
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:12px;
    line-height:1.35;
    overflow-wrap:anywhere;
    white-space:normal;
}

.formula-card .formula-text-item p {
    margin:0;
    padding:8px 9px;
    border-radius:6px;
    background:color-mix(in srgb, var(--control) 76%, transparent);
    color:color-mix(in srgb, var(--text) 88%, transparent);
    font-size:12.5px;
    font-weight:650;
    line-height:1.42;
}

.danger-btn {
    border-color:rgba(255,95,87,0.62);
    color:var(--wrong);
}

body.light .danger-btn {
    color:var(--wrong);
}

.danger-btn:hover {
    background:var(--wrong);
    border-color:var(--wrong);
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
}

/* QUIZ */
.quiz-content {
    flex:1;
    min-width:0;
}

.quiz-mode-cluster {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.course-cue-badge {
    min-height:26px;
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    padding:0 9px;
    border:1px solid var(--course-accent-line);
    border-radius:999px;
    background:color-mix(in srgb, var(--course-accent-soft) 82%, var(--card));
    color:var(--course-accent-ink);
    font-size:11px;
    font-weight:850;
    line-height:1;
    white-space:nowrap;
}

.course-cue-badge::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--course-accent);
    box-shadow:0 0 0 3px var(--course-accent-soft), 0 0 12px var(--course-accent-line);
}

.course-cue-badge[hidden] {
    display:none !important;
}

.segmented-control {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:4px;
    margin-left:0;
    padding:4px;
    border:1px solid color-mix(in srgb, var(--border) 84%, var(--text));
    border-radius:8px;
    background:color-mix(in srgb, var(--control) 88%, transparent);
}

.segmented-control button {
    min-width:78px;
    min-height:30px;
    border:0;
    border-radius:6px;
    padding:0 12px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:780;
    transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.segmented-control button:hover,
.segmented-control button:focus-visible {
    background:color-mix(in srgb, var(--accent) 9%, transparent);
    color:color-mix(in srgb, var(--text) 84%, var(--accent));
}

.segmented-control button.active {
    background:color-mix(in srgb, var(--accent) 22%, var(--control));
    color:var(--text);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 8px 18px rgba(0,0,0,0.12);
}

.timer-pill {
    min-height:30px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--control);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.timer-pill[hidden] {
    display:none !important;
}

.pause-exam-btn {
    cursor:pointer;
    color:var(--text);
}

.pause-exam-btn:hover,
.pause-exam-btn:focus-visible {
    border-color:var(--accent);
    background:var(--soft);
}

.search-input {
    width:100%;
    height:34px;
    flex:0 0 auto;
    min-width:0;
}

.quiz-toolbar-right {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    gap:0;
    margin-left:0;
    min-width:0;
}

.quiz-status {
    min-height:18px;
    margin-bottom:10px;
    font-size:13px;
    color:color-mix(in srgb, var(--text) 76%, transparent);
}

.quiz-status:empty {
    min-height:0;
        margin-bottom:10px;
}

.progress-shell {
    box-sizing:border-box;
    width:100%;
    margin:0 0 12px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    box-shadow:var(--subtle-shadow);
}

.progress-shell[hidden],
.progress-map-panel[hidden],
.progress-status-btn[hidden] {
    display:none !important;
}

.progress-summary-row {
    display:grid;
    grid-template-columns:auto 34px minmax(140px, 1fr) 34px auto minmax(130px, 170px);
    align-items:center;
    gap:8px;
}

.progress-step-btn {
    box-sizing:border-box;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid color-mix(in srgb, var(--border) 84%, var(--text));
    border-radius:7px;
    background:color-mix(in srgb, var(--control) 90%, transparent);
    color:color-mix(in srgb, var(--text) 86%, transparent);
    font-size:19px;
    line-height:1;
    cursor:pointer;
    transition:border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.progress-step-btn:hover:not(:disabled),
.progress-step-btn:focus-visible,
.progress-map-toggle[aria-expanded="true"] {
    border-color:color-mix(in srgb, var(--accent) 72%, var(--border));
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--text);
}

.progress-step-btn:focus-visible,
.progress-status-btn:focus-visible,
.q-circle:focus-visible {
    outline:2px solid color-mix(in srgb, var(--accent) 66%, transparent);
    outline-offset:2px;
}

.progress-step-btn:disabled,
.progress-status-btn:disabled,
.progress-shell.is-exam-paused button {
    cursor:not-allowed;
    opacity:0.38;
}

.progress-summary {
    min-width:0;
    display:grid;
    gap:6px;
    padding:2px 8px;
}

.progress-summary-copy {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    min-width:0;
}

.progress-summary-copy strong {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.progress-summary-copy span {
    flex:0 0 auto;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    font-weight:700;
}

.progress-linear-track {
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:color-mix(in srgb, var(--circle) 86%, transparent);
}

.progress-linear-track span {
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width 180ms ease;
}

.progress-status-shortcuts {
    display:flex;
    align-items:center;
    gap:2px;
    min-width:0;
    padding:3px;
    border:1px solid var(--border);
    border-radius:7px;
    background:color-mix(in srgb, var(--control) 90%, transparent);
}

.progress-review-cluster {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.progress-status-btn {
    box-sizing:border-box;
    min-width:0;
    height:28px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:6px;
    padding:0 9px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    white-space:nowrap;
    transition:background 150ms ease, color 150ms ease;
}

.progress-status-btn + .progress-status-btn {
    box-shadow:-1px 0 0 color-mix(in srgb, var(--border) 74%, transparent);
}

.progress-status-icon {
    font-size:14px;
    line-height:1;
}

.progress-status-btn strong {
    min-width:17px;
    text-align:right;
    font-size:13px;
}

.progress-status-neutral {
    display:flex;
    justify-content:center;
}

.progress-status-wrong {
    background:transparent;
}

.progress-status-wrong .progress-status-icon,
.progress-status-wrong strong {
    color:color-mix(in srgb, var(--wrong) 86%, #ffffff);
}

.progress-status-flagged {
    background:transparent;
}

.progress-status-flagged .progress-status-icon,
.progress-status-flagged strong {
    color:color-mix(in srgb, var(--flag) 88%, #ffffff);
}

.progress-status-btn:hover:not(:disabled),
.progress-status-btn.active {
    background:color-mix(in srgb, var(--accent) 13%, var(--control));
    color:color-mix(in srgb, var(--text) 88%, var(--accent));
}

.progress-status-wrong.active {
    background:color-mix(in srgb, var(--wrong) 18%, var(--control));
}

.progress-status-flagged.active {
    background:color-mix(in srgb, var(--flag) 17%, var(--control));
}

.progress-status-neutral.active {
    background:color-mix(in srgb, var(--accent) 18%, var(--control));
    color:color-mix(in srgb, var(--text) 82%, var(--accent));
}

.progress-map-icon {
    display:block;
    width:20px;
    height:20px;
    pointer-events:none;
}

.progress-map-toggle {
    width:auto;
    min-width:104px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 11px;
    border-color:color-mix(in srgb, var(--accent) 66%, var(--border));
    background:color-mix(in srgb, var(--accent) 14%, var(--control));
    color:color-mix(in srgb, var(--text) 92%, var(--accent));
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 3px 10px color-mix(in srgb, var(--accent) 10%, transparent);
    font-size:12px;
    font-weight:800;
}

.progress-map-toggle:hover:not(:disabled),
.progress-map-toggle:focus-visible,
.progress-map-toggle[aria-expanded="true"] {
    border-color:color-mix(in srgb, var(--accent) 84%, var(--border));
    background:color-mix(in srgb, var(--accent) 22%, var(--control));
    color:var(--text);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 14%, transparent);
}

.progress-map-toggle-label {
    line-height:1;
    white-space:nowrap;
}

.progress-map-panel {
    margin-top:8px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 94%, transparent);
    box-shadow:0 14px 32px rgba(0,0,0,0.12);
}

.progress-container {
    box-sizing:border-box;
    display:grid;
    grid-template-columns:repeat(auto-fill, 42px);
    justify-content:center;
    gap:8px;
    width:100%;
    max-height:320px;
    margin:0;
    padding:3px;
    overflow-y:auto;
    scrollbar-color:color-mix(in srgb, var(--text) 28%, transparent) transparent;
}

.q-circle {
    position:relative;
    box-sizing:border-box;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--circle-border);
    border-radius:7px;
    background:var(--circle);
    color:color-mix(in srgb, var(--text) 88%, #ffffff);
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:border-color 130ms ease, filter 130ms ease, transform 130ms ease;
}

.q-circle:hover:not(:disabled) {
    filter:brightness(1.1);
    transform:translateY(-1px);
}

.q-circle:disabled,
.nav-circle:disabled {
    cursor:not-allowed;
    opacity:0.36;
}

.q-correct {
    background:var(--correct);
    border-color:color-mix(in srgb, var(--correct) 82%, #ffffff);
    color:#ffffff;
}

.q-wrong {
    background:var(--wrong);
    border-color:color-mix(in srgb, var(--wrong) 82%, #ffffff);
    color:#ffffff;
}

.q-flagged {
    background:var(--flag);
    border-color:color-mix(in srgb, var(--flag) 78%, #ffffff);
    color:#111827;
}

.q-answered {
    background:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 82%, #ffffff);
    color:#ffffff;
}

.q-unanswered:not(.q-flagged) {
    background:var(--circle);
    border-color:var(--circle-border);
}

.q-circle.q-correct.q-flagged,
.q-circle.q-wrong.q-flagged,
.q-circle.q-answered.q-flagged {
    color:#ffffff;
    box-shadow:inset 0 -4px 0 var(--flag);
}

.q-circle.q-correct.q-flagged {
    background:var(--correct);
    border-color:color-mix(in srgb, var(--correct) 82%, #ffffff);
}

.q-circle.q-wrong.q-flagged {
    background:var(--wrong);
    border-color:color-mix(in srgb, var(--wrong) 82%, #ffffff);
}

.q-circle.q-answered.q-flagged {
    background:var(--accent);
    border-color:color-mix(in srgb, var(--accent) 82%, #ffffff);
}

.q-circle.is-current {
    outline:2px solid color-mix(in srgb, var(--accent) 92%, #ffffff);
    outline-offset:2px;
    z-index:1;
}

.q-circle.is-current::after {
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(255,255,255,0.4);
    border-radius:4px;
    pointer-events:none;
}

.progress-map-panel.filter-wrong .q-circle:not(.q-wrong),
.progress-map-panel.filter-flagged .q-circle:not(.q-flagged),
.progress-map-panel.filter-unanswered .q-circle:not(.q-unanswered) {
    filter:saturate(0.35);
    opacity:0.28;
}

.progress-map-panel.filter-wrong .q-circle:not(.q-wrong):hover,
.progress-map-panel.filter-flagged .q-circle:not(.q-flagged):hover,
.progress-map-panel.filter-unanswered .q-circle:not(.q-unanswered):hover {
    filter:saturate(0.65);
    opacity:0.62;
}

.progress-legend {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 16px;
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.progress-legend-item {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:11px;
    font-weight:700;
}

.progress-legend-dot {
    box-sizing:border-box;
    width:9px;
    height:9px;
    border:1px solid var(--circle-border);
    border-radius:2px;
    background:var(--circle);
}

.progress-legend-dot.q-correct { background:var(--correct); border-color:var(--correct); }
.progress-legend-dot.q-wrong { background:var(--wrong); border-color:var(--wrong); }
.progress-legend-dot.q-flagged { background:var(--flag); border-color:var(--flag); }
.progress-legend-dot.q-answered { background:var(--accent); border-color:var(--accent); }
.progress-legend-dot.q-current {
    background:var(--circle);
    border:2px solid var(--accent);
}
.progress-legend-dot.q-unanswered { background:var(--circle); border-color:var(--circle-border); }

body.light .progress-status-wrong .progress-status-icon,
body.light .progress-status-wrong strong {
    color:color-mix(in srgb, var(--wrong) 78%, #7f1d1d);
}

body.light .progress-status-flagged .progress-status-icon,
body.light .progress-status-flagged strong {
    color:#9a6700;
}

@media (max-width: 1500px) {
    .progress-summary-row {
        grid-template-columns:auto 34px minmax(140px, 1fr) 34px minmax(130px, 170px);
        grid-template-areas:
            "mode previous summary next search"
            "reviews reviews reviews reviews reviews";
    }

    .quiz-mode-cluster { grid-area:mode; }
    .progress-step-prev { grid-area:previous; }
    .progress-summary { grid-area:summary; }
    .progress-step-next { grid-area:next; }
    .quiz-toolbar-right { grid-area:search; }
    .progress-review-cluster {
        grid-area:reviews;
        justify-self:start;
    }
}

@media (max-width: 720px) {
    .progress-summary-row {
        grid-template-columns:34px minmax(0, 1fr) minmax(0, 1fr) 34px;
        grid-template-areas:
            "mode mode search search"
            "previous summary summary next"
            "reviews reviews reviews reviews";
    }

    .quiz-mode-cluster {
        min-height:34px;
    }

    .progress-review-cluster {
        width:100%;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 34px;
    }

    .progress-status-shortcuts {
        width:100%;
        display:grid;
        grid-template-columns:auto auto auto minmax(0, 1fr);
    }

    .progress-status-btn {
        width:100%;
        min-width:0;
        padding-inline:7px;
    }

    .progress-container {
        grid-template-columns:repeat(auto-fill, 40px);
        gap:7px;
        max-height:280px;
    }

    .q-circle {
        width:40px;
        height:40px;
    }
}

@media (max-width: 420px) {
    .progress-summary-copy span {
        display:none;
    }

    .progress-summary {
        padding-inline:3px;
    }

    .progress-status-label {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .progress-map-panel {
        padding:11px 8px;
    }
}

/*answers ABCD*/
#answers {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    max-width:720px;
}

.question-media-panel {
    --question-media-gutter:clamp(24px, 3vw, 46px);
    position:sticky;
    top:130px;
    align-self:start;
    margin-top:96px;
    min-width:0;
}

.quiz-card.has-question-media:not(.media-collapsed) .question-media-panel {
    box-sizing:border-box;
    position:relative;
    top:auto;
    align-self:stretch;
    margin-top:0;
    margin-right:calc(-1 * var(--quiz-card-inline-padding));
    padding:24px 0 0;
    border-left:1px solid color-mix(in srgb, var(--border) 88%, var(--text));
}

.question-media-head {
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    left:0;
    z-index:2;
    min-height:0;
    margin:0;
    transform:translate(-50%, -50%);
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
}

.question-media-head > span {
    display:none;
}

.question-media-toggle,
.question-media-rotate,
.question-media-collapsed-toggle {
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    box-shadow:var(--subtle-shadow);
}

.question-media-toggle {
    position:absolute;
    top:12px;
    left:12px;
    z-index:4;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:6px;
    border-color:color-mix(in srgb, var(--border) 86%, var(--text));
    background:color-mix(in srgb, var(--card) 88%, transparent);
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:17px;
    font-weight:650;
    line-height:1;
    box-shadow:0 3px 10px rgba(15,23,42,0.16);
}

.question-media-rotate {
    position:absolute;
    top:12px;
    right:12px;
    z-index:4;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:7px;
    border-color:color-mix(in srgb, var(--border) 86%, var(--text));
    background:color-mix(in srgb, var(--card) 88%, transparent);
    color:color-mix(in srgb, var(--text) 82%, transparent);
    font-size:21px;
    font-weight:800;
    line-height:1;
    box-shadow:0 3px 10px rgba(15,23,42,0.16);
}

.quiz-card.has-question-media:not(.media-collapsed) .question-media-toggle {
    left:0;
    transform:translateX(-50%);
}

.question-media-toggle:hover,
.question-media-rotate:hover,
.question-media-collapsed-toggle:hover,
.question-media-toggle:focus-visible,
.question-media-rotate:focus-visible,
.question-media-collapsed-toggle:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 48%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    outline:none;
}

.question-media-toggle:hover,
.question-media-toggle:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 48%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    color:var(--text);
    box-shadow:0 4px 12px rgba(15,23,42,0.2);
}

.question-media-collapsed-toggle {
    width:54px;
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:10px 6px;
    color:color-mix(in srgb, var(--text) 82%, transparent);
    font-size:11px;
    font-weight:850;
    text-transform:uppercase;
}

.question-media-collapsed-toggle span:last-child {
    writing-mode:vertical-rl;
    transform:rotate(180deg);
}

.question-media-list {
    width:100%;
    display:grid;
    gap:12px;
    margin:0;
}

.question-media {
    margin:0;
}

.question-media-frame {
    position:relative;
}

.question-media-button {
    width:100%;
    display:block;
    padding:0;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    cursor:zoom-in;
    overflow:hidden;
    box-shadow:var(--subtle-shadow);
}

.question-media-button img {
    display:block;
    width:100%;
    max-height:min(72vh, 640px);
    object-fit:contain;
    background:#ffffff;
    transform:rotate(var(--question-image-rotation, 0deg));
    transform-origin:center;
    transition:transform 180ms ease;
}

.quiz-card.has-question-media:not(.media-collapsed) .question-media-button {
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.question-media-table-card {
    box-sizing:border-box;
    width:100%;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    box-shadow:var(--subtle-shadow);
}

.question-media-table-title {
    display:block;
    margin:0 0 10px;
    color:var(--text);
    font-size:13px;
    font-weight:850;
    letter-spacing:0;
}

.question-media-table-scroll {
    box-sizing:border-box;
    width:100%;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--border) 82%, var(--text));
    border-radius:6px;
    background:#ffffff;
}

.question-media-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
    color:#111827;
    font-size:clamp(10px, 0.72vw, 12px);
    line-height:1.22;
}

.question-media-table th,
.question-media-table td {
    padding:7px 6px;
    border:1px solid #cbd5e1;
    text-align:left;
    vertical-align:middle;
    overflow-wrap:anywhere;
    word-break:normal;
    white-space:normal;
}

.question-media-table th {
    background:#f1f5f9;
    color:#0f172a;
    font-weight:850;
    letter-spacing:0;
}

.question-media-table td {
    font-weight:650;
}

.question-media-table-note {
    margin:9px 0 0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
}

.question-image-viewer {
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(2,6,23,0.78);
}

.question-image-viewer[hidden] {
    display:none;
}

.question-image-viewer-panel {
    width:min(1120px, 100%);
    max-height:calc(100svh - 44px);
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:8px;
    background:var(--card);
    box-shadow:0 24px 80px rgba(0,0,0,0.42);
}

.question-image-viewer-panel img {
    width:100%;
    max-height:calc(100svh - 130px);
    object-fit:contain;
    background:#ffffff;
    border-radius:6px;
}

.question-image-viewer-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.question-image-viewer-rotate,
.question-image-viewer-close {
    min-height:32px;
    padding:6px 11px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:800;
}

.question-image-viewer-rotate:hover,
.question-image-viewer-rotate:focus-visible,
.question-image-viewer-close:hover,
.question-image-viewer-close:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    outline:none;
}

.question-image-viewer-visual {
    max-height:calc(100svh - 130px);
    overflow:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.question-image-viewer-rotatable {
    position:relative;
    width:100%;
    transform:translate3d(var(--image-viewer-pan-x, 0px), var(--image-viewer-pan-y, 0px), 0) rotate(var(--image-viewer-rotation, 0deg)) scale(var(--image-viewer-scale, 1));
    transform-origin:center;
    transition:transform 180ms ease;
}

.question-image-viewer-rotatable > img {
    display:block;
    width:100%;
    max-height:calc(100svh - 130px);
    object-fit:contain;
    background:#ffffff;
    border-radius:6px;
}

html.tailwind-native .question-image-viewer-visual {
    overflow:hidden;
    touch-action:none;
    overscroll-behavior:none;
}

html.tailwind-native .question-image-viewer-rotatable {
    will-change:transform;
}

html.tailwind-native .question-image-viewer-rotatable.is-gesturing {
    transition:none;
}

body.question-image-viewer-open {
    overflow:hidden;
}

/*answers rectangle grid*/
.answer-btn {
    width:100%;
    min-height:55px;
    box-sizing:border-box;
    padding:8px 0 8px var(--quiz-content-indent);
    margin:0;
    border-radius:0;
    border:0;
    background:transparent;
    color:var(--quiz-question-color);
    -webkit-text-fill-color:var(--quiz-question-color);
    cursor:pointer;
    font:inherit;
    font-size:var(--quiz-question-font-size);
    font-weight:400;
    line-height:1.32;
    text-align:left;
    display:flex;
    align-items:center;
    gap:14px;
    transform-origin:center;
    transition:
        transform 220ms ease,
        color 180ms ease;
}

.answer-btn,
.answer-btn:hover,
.answer-btn:focus-visible,
.answer-btn:disabled,
.answer-selected,
.answer-correct,
.answer-correct-outline,
.answer-wrong,
.answer-text {
    font-weight:400;
}

/*answer circles*/
.answer-label {
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--soft);
    border:1px solid var(--circle-border);
    color:var(--text);
    -webkit-text-fill-color:var(--text);
    font-size:12px;
    font-weight:400;
    line-height:1;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.answer-text {
    flex:1 1 auto;
    min-width:0;
    color:var(--quiz-question-color);
    -webkit-text-fill-color:var(--quiz-question-color);
    font-size:var(--quiz-question-font-size);
    font-weight:300;
    line-height:1.32;
}

/*subtle answer hover*/
.answer-btn:not(:disabled):hover {
    transform:scale(1.004);
    color:color-mix(in srgb, var(--text) 82%, var(--accent));
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 82%, var(--accent));
}

/*glow*/
.answer-btn:not(:disabled):hover .answer-label {
    border-color:color-mix(in srgb, var(--accent) 58%, var(--circle-border));
    box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 4%, transparent);
}

.answer-btn:focus-visible {
    outline:none;
}

.answer-btn:focus-visible .answer-label {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.answer-btn:disabled {
    cursor:default;
    opacity:0.92;
}

.answer-selected {
    color:color-mix(in srgb, var(--text) 86%, var(--accent));
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 86%, var(--accent));
}

.answer-selected .answer-label {
    background:#bfdbfe;
    border-color:#60a5fa;
    color:#1d4ed8;
    -webkit-text-fill-color:#1d4ed8;
}

.answer-pending .answer-label {
    background:#bfdbfe;
    border-color:#60a5fa;
    color:#1d4ed8;
    -webkit-text-fill-color:#1d4ed8;
}

.answer-unsure-correct .answer-label {
    background:transparent;
    border-color:var(--correct);
    color:color-mix(in srgb, var(--correct) 82%, var(--text));
    -webkit-text-fill-color:color-mix(in srgb, var(--correct) 82%, var(--text));
    box-shadow:inset 0 0 0 1px var(--correct);
}

.answer-confirm-row {
    width:100%;
    max-width:720px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
    min-height:70px;
    margin:2px 0 0;
    padding-left:var(--quiz-content-indent);
    box-sizing:border-box;
}

.exam-answer-controls {
    justify-content:flex-start;
    gap:12px;
}

.exam-answer-nav-cluster,
.exam-submit-cluster {
    display:flex;
    align-items:center;
    gap:10px;
}

.exam-answer-nav-cluster {
    flex:0 0 auto;
}

.exam-submit-cluster {
    flex:1 1 auto;
    justify-content:flex-end;
    min-width:0;
    margin-left:auto;
}

.exam-answer-progress {
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.exam-submit-inline-btn {
    flex:0 0 auto;
}

.answer-confirm-row .nav-circle {
    flex:0 0 48px;
}

/*
.answer-confirm-row .answer-nav-btn {
    width:auto;
    min-width:68px;
    height:36px;
    padding:0 14px;
    border-color:color-mix(in srgb, var(--border) 74%, var(--accent));
    border-radius:999px;
    background:color-mix(in srgb, var(--control) 82%, var(--card)) !important;
    color:color-mix(in srgb, var(--text) 82%, var(--accent)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 82%, var(--accent));
    font-size:13px;
    font-weight:650;
    line-height:1;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent);
}*/

/* Primary quiz action */
.confirm-answer-btn {
    appearance:none;
    -webkit-appearance:none;
    min-width:154px;
    min-height:36px;
    padding:9px 14px;
    border:1px solid #2563eb;
    border-radius:10px;
    background:#2563eb !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:700;
    box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.confirm-answer-btn:hover,
.confirm-answer-btn:active,
.confirm-answer-btn:focus-visible {
    transform:none;
    border-color:#1d4ed8;
    background:#1d4ed8 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
    box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}

.confirm-answer-btn:focus-visible {
    outline:none;
    box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 0 1px rgba(255,255,255,0.34);
}

.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn) {
    min-width:136px;
    padding:9px 12px;
    border-color:#2563eb;
    background:#2563eb !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
    box-shadow:0 10px 24px rgba(37,99,235,0.22);
}

.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):hover,
.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):active,
.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):focus-visible {
    transform:none;
    border-color:#1d4ed8;
    background:#1d4ed8 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
    box-shadow:0 12px 28px rgba(37,99,235,0.28);
}

.answer-confirm-row .answer-nav-btn {
    width:auto;
    min-width:62px;
    min-height:36px;
    height:36px;
    padding:0 12px;
    border-color:color-mix(in srgb, var(--border) 82%, var(--text));
    border-radius:999px;
    background:transparent !important;
    color:color-mix(in srgb, var(--text) 62%, var(--muted)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 62%, var(--muted));
    font-size:12px;
    font-weight:650;
    box-shadow:none;
}

.answer-confirm-row .answer-unsure-btn {
    min-width:136px;
    min-height:36px;
    height:auto;
    padding:9px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:400;
}

.answer-confirm-row .confirm-answer-btn.answer-unsure-btn {
    border-color:color-mix(in srgb, var(--wrong) 76%, var(--border));
    background:transparent !important;
    color:color-mix(in srgb, var(--wrong) 84%, var(--text)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--wrong) 84%, var(--text));
    font-weight:400;
    box-shadow:none;
}

.answer-confirm-row .confirm-answer-btn.answer-unsure-btn:hover,
.answer-confirm-row .confirm-answer-btn.answer-unsure-btn:active,
.answer-confirm-row .confirm-answer-btn.answer-unsure-btn:focus-visible,
.answer-confirm-row .confirm-answer-btn.answer-unsure-btn.is-active {
    border-color:var(--wrong);
    background:color-mix(in srgb, var(--wrong) 10%, var(--control)) !important;
    color:color-mix(in srgb, var(--wrong) 90%, var(--text)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--wrong) 90%, var(--text));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--wrong) 14%, transparent);
}

.answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-next,
.answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-finish {
    order:3;
}

.answer-confirm-row:not(.exam-answer-controls) .answer-unsure-btn {
    order:4;
}

.answer-confirm-row .answer-nav-btn:hover,
.answer-confirm-row .answer-nav-btn:active,
.answer-confirm-row .answer-nav-btn:focus-visible {
    transform:none;
    border-color:color-mix(in srgb, var(--accent) 34%, var(--border));
    background:color-mix(in srgb, var(--accent) 7%, var(--control)) !important;
    color:color-mix(in srgb, var(--text) 78%, var(--accent)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 78%, var(--accent));
    box-shadow:none;
}

.answer-confirm-row .answer-nav-btn:focus-visible {
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.answer-confirm-row .answer-nav-btn-finish {
    border-color:color-mix(in srgb, var(--correct) 72%, var(--border));
    background:color-mix(in srgb, var(--correct) 14%, var(--control)) !important;
    color:color-mix(in srgb, var(--correct) 72%, var(--text)) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--correct) 72%, var(--text));
}

.answer-confirm-row .answer-nav-btn-finish:hover,
.answer-confirm-row .answer-nav-btn-finish:active,
.answer-confirm-row .answer-nav-btn-finish:focus-visible {
    border-color:var(--correct);
    background:color-mix(in srgb, var(--correct) 22%, var(--control)) !important;
    color:var(--text) !important;
    -webkit-text-fill-color:var(--text);
}

.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):focus-visible {
    box-shadow:0 12px 28px rgba(37,99,235,0.28), 0 0 0 3px rgba(147,197,253,0.34);
}

.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):disabled,
.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):disabled:hover,
.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):disabled:active,
.answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn):disabled:focus-visible {
    transform:none;
    border-color:color-mix(in srgb, #93c5fd 58%, var(--border));
    background:color-mix(in srgb, #dbeafe 64%, var(--control)) !important;
    color:color-mix(in srgb, #1d4ed8 62%, var(--muted)) !important;
    -webkit-text-fill-color:color-mix(in srgb, #1d4ed8 62%, var(--muted));
    cursor:not-allowed;
    box-shadow:none;
}

.search-input:disabled {
    cursor:not-allowed;
    opacity:0.55;
}

.answer-correct {
    color:var(--text);
    -webkit-text-fill-color:var(--text);
}

.answer-correct-outline {
    color:var(--text);
    -webkit-text-fill-color:var(--text);
}

.answer-wrong {
    color:var(--text);
    -webkit-text-fill-color:var(--text);
}

.answer-correct .answer-label {
    background:var(--correct);
    border-color:var(--correct);
    color:#ffffff;
    -webkit-text-fill-color:#ffffff;
}

.answer-correct-outline .answer-label {
    background:transparent;
    border-color:var(--correct);
    color:color-mix(in srgb, var(--correct) 78%, var(--text));
    -webkit-text-fill-color:color-mix(in srgb, var(--correct) 78%, var(--text));
    box-shadow:inset 0 0 0 1px var(--correct);
}

.answer-wrong .answer-label {
    background:var(--wrong);
    border-color:var(--wrong);
    color:#ffffff;
    -webkit-text-fill-color:#ffffff;
}

.button-group {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.nav-circle {
    min-width:76px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:24px;
    border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--text);
    box-shadow:0 10px 22px rgba(0,0,0,0.12);
    cursor:pointer;
    font:inherit;
    font-weight:850;
    transition:transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.nav-circle span {
    font-size:28px;
    line-height:1;
    transform:translateY(-1px);
}

.nav-circle:hover,
.nav-circle:focus-visible {
    transform:translateY(-1px);
    background:color-mix(in srgb, var(--accent) 20%, var(--control));
    border-color:color-mix(in srgb, var(--accent) 72%, var(--border));
    color:var(--text);
    box-shadow:0 14px 28px rgba(0,0,0,0.18);
    outline:none;
}

.nav-circle:disabled:hover,
.nav-circle:disabled:focus-visible {
    transform:none;
    background:var(--circle);
    border-color:var(--circle-border);
    color:var(--text);
    box-shadow:none;
}

.explanation-overlay {
    position:fixed;
    inset:0;
    z-index:210;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2,6,23,0.72);
    backdrop-filter:blur(8px);
}

.explanation-overlay[hidden] {
    display:none;
}

.explanation-modal {
    width:min(760px, 100%);
    max-height:calc(100svh - 40px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 28px 90px rgba(0,0,0,0.42);
}

.explanation-modal.correct {
    border-color:var(--correct);
}

.explanation-modal.incorrect {
    border-color:var(--wrong);
}

.explanation-modal-head {
    box-sizing:border-box;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:52px;
    padding:8px 10px 8px 18px;
    border-bottom:1px solid var(--border);
}

.explanation-modal.correct .explanation-modal-head {
    background:var(--success-soft);
    border-bottom-color:color-mix(in srgb, var(--correct) 62%, var(--border));
}

.explanation-modal.incorrect .explanation-modal-head {
    background:var(--danger-soft);
    border-bottom-color:color-mix(in srgb, var(--wrong) 62%, var(--border));
}

.explanation-title {
    font-weight:800;
    font-size:18px;
}

.explanation-kicker {
    margin-bottom:2px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:0;
    line-height:1.2;
    text-transform:uppercase;
}

.explanation-modal-close {
    flex:0 0 auto;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:26px;
    font-weight:400;
    line-height:1;
}

.explanation-modal-close:hover,
.explanation-modal-close:focus-visible {
    border-color:var(--border);
    background:color-mix(in srgb, var(--text) 8%, transparent);
    outline:none;
}

.explanation-modal-scroll {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px 18px 18px;
    scrollbar-gutter:stable;
}

.explanation-modal-scroll:focus {
    outline:none;
}

.explanation-answer-review {
    /* The first learning section supplies the single divider below the
       correct answer. Keeping a second border here creates a doubled line. */
    border-bottom:0;
}

.explanation-answer-row {
    display:grid;
    grid-template-columns:minmax(96px, 0.22fr) minmax(0, 1fr);
    align-items:start;
    gap:12px;
    padding:5px 0 14px;
}

.explanation-answer-row + .explanation-answer-row {
    border-top:1px solid var(--border);
}

.explanation-answer-row-label {
    padding-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:850;
    letter-spacing:0;
    line-height:1.3;
    text-transform:uppercase;
}

.explanation-answer-row.is-wrong .explanation-answer-row-label {
    color:color-mix(in srgb, var(--wrong) 78%, var(--text));
}

.explanation-answer-row.is-correct .explanation-answer-row-label {
    color:color-mix(in srgb, var(--correct) 76%, var(--text));
}

.explanation-answer-values {
    min-width:0;
    display:grid;
    gap:9px;
}

.explanation-answer-value {
    min-width:0;
    display:grid;
    grid-template-columns:28px minmax(0, 1fr);
    align-items:start;
    gap:10px;
    color:var(--text);
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.explanation-answer-letter {
    box-sizing:border-box;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--control);
    color:var(--text);
    font-size:13px;
    font-weight:850;
    line-height:1;
}

.explanation-answer-row.is-wrong .explanation-answer-letter {
    border-color:var(--wrong);
    background:var(--danger-soft);
    color:color-mix(in srgb, var(--wrong) 82%, var(--text));
}

.explanation-answer-row.is-correct .explanation-answer-letter {
    border-color:var(--correct);
    background:var(--success-soft);
    color:color-mix(in srgb, var(--correct) 78%, var(--text));
}

.explanation-answer-empty {
    color:var(--muted);
    font-size:15px;
    font-style:italic;
    line-height:1.45;
}

.explanation-learning-section {
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid var(--border);
}

.explanation-learning-section h3 {
    margin:0 0 9px;
    color:var(--text);
    font-size:13px;
    font-weight:850;
    letter-spacing:0;
    line-height:1.35;
}

.explanation-section-copy {
    display:grid;
    gap:10px;
}

.explanation-section-copy > p {
    margin:0;
    color:color-mix(in srgb, var(--text) 90%, transparent);
    font-size:15px;
    line-height:1.58;
}

.explanation-correction {
    padding-left:14px;
    border-left:3px solid color-mix(in srgb, var(--wrong) 72%, var(--border));
}

.explanation-trap-callout,
.explanation-takeaway {
    margin-top:18px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-left:4px solid var(--accent);
    border-radius:6px;
}

.explanation-trap-callout {
    border-color:color-mix(in srgb, #d97706 54%, var(--border));
    border-left-color:#d97706;
    background:color-mix(in srgb, #f59e0b 10%, var(--card));
}

.explanation-takeaway {
    border-color:color-mix(in srgb, var(--correct) 48%, var(--border));
    border-left-color:var(--correct);
    background:color-mix(in srgb, var(--correct) 9%, var(--card));
}

.explanation-trap-callout > span,
.explanation-takeaway > span {
    display:block;
    color:var(--text);
    font-size:12px;
    font-weight:850;
    line-height:1.25;
    text-transform:uppercase;
}

.explanation-trap-callout p,
.explanation-takeaway p {
    margin:5px 0 0;
    color:color-mix(in srgb, var(--text) 94%, transparent);
    font-size:15px;
    line-height:1.55;
}

.explanation-review-point {
    padding-left:14px;
    border-left:3px solid color-mix(in srgb, var(--accent) 66%, var(--border));
}

.explanation-solution-steps {
    display:grid;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
    border-top:1px solid var(--border);
}

.explanation-solution-steps li {
    position:relative;
    display:grid;
    grid-template-columns:minmax(104px, 0.24fr) minmax(0, 1fr);
    gap:14px;
    padding:11px 0 11px 18px;
    border-bottom:1px solid var(--border);
}

.explanation-solution-steps li::before {
    content:"";
    position:absolute;
    left:2px;
    top:16px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
}

.explanation-solution-label {
    color:color-mix(in srgb, var(--accent) 76%, var(--text));
    font-size:12px;
    font-weight:850;
    line-height:1.45;
    text-transform:uppercase;
}

.explanation-solution-copy {
    min-width:0;
    color:var(--text);
    font-size:15px;
    font-weight:650;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.explanation-copy {
    display:grid;
    gap:12px;
}

.explanation-copy > p {
    margin:0;
    color:color-mix(in srgb, var(--text) 94%, transparent);
    font-size:15px;
    line-height:1.58;
}

.explanation-memory-aid {
    margin-top:2px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
    border-left:4px solid var(--accent);
    border-radius:6px;
    background:color-mix(in srgb, var(--accent) 10%, var(--card));
}

.explanation-memory-aid-label {
    display:block;
    color:color-mix(in srgb, var(--accent) 76%, var(--text));
    font-size:12px;
    font-weight:800;
    letter-spacing:0;
    line-height:1.2;
    text-transform:uppercase;
}

.explanation-memory-aid p {
    margin:5px 0 0;
    color:var(--text);
    font-size:16px;
    font-weight:750;
    line-height:1.45;
}

.explanation-depth-toggle {
    margin-top:16px;
    border-top:1px solid var(--border);
}

.explanation-depth-toggle > summary {
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 0 2px;
    color:color-mix(in srgb, var(--accent) 78%, var(--text));
    cursor:pointer;
    font-size:14px;
    font-weight:820;
    list-style:none;
}

.explanation-depth-toggle > summary::-webkit-details-marker {
    display:none;
}

.explanation-depth-toggle > summary::before {
    content:"+";
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb, var(--accent) 54%, var(--border));
    border-radius:50%;
    font-size:17px;
    line-height:1;
}

.explanation-depth-toggle[open] > summary::before {
    content:"-";
}

.explanation-depth-hide,
.explanation-depth-toggle[open] .explanation-depth-show {
    display:none;
}

.explanation-depth-toggle[open] .explanation-depth-hide {
    display:inline;
}

.explanation-depth-content {
    padding-top:2px;
}

.explanation-regulatory-references {
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid var(--border);
}

.explanation-regulatory-references h3 {
    margin:0 0 8px;
    color:var(--muted);
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
}

.explanation-reference-list {
    display:grid;
    gap:10px;
}

.explanation-reference-item {
    display:grid;
    gap:3px;
}

.explanation-reference-item a,
.explanation-reference-item strong {
    width:max-content;
    max-width:100%;
    color:color-mix(in srgb, var(--accent) 78%, var(--text));
    font-size:14px;
    font-weight:800;
    overflow-wrap:anywhere;
}

.explanation-reference-item p,
.explanation-reference-item small {
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.explanation-media-list {
    display:grid;
    gap:12px;
    margin-top:14px;
}

.explanation-media {
    min-width:0;
    margin:0;
}

.explanation-media-button {
    display:block;
    width:100%;
    padding:0;
    border:1px solid color-mix(in srgb, var(--border) 86%, var(--text));
    border-radius:6px;
    background:#ffffff;
    cursor:zoom-in;
    overflow:hidden;
}

.explanation-media-visual,
.question-image-viewer-visual {
    position:relative;
    display:block;
    width:100%;
}

.explanation-media-button img {
    display:block;
    width:100%;
    max-height:min(72vh, 640px);
    object-fit:contain;
    background:#ffffff;
    transform:rotate(var(--question-image-rotation, 0deg));
    transform-origin:center;
    transition:transform 180ms ease;
}

.explanation-image-annotations {
    position:absolute;
    inset:0;
    display:block;
    pointer-events:none;
}

.explanation-image-annotation {
    position:absolute;
    left:var(--annotation-x);
    top:var(--annotation-y);
    z-index:2;
}

.explanation-image-annotation-dot {
    position:absolute;
    left:0;
    top:0;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    transform:translate(-50%, -50%);
    border:2px solid #ffffff;
    border-radius:50%;
    background:#087f5b;
    color:#ffffff;
    box-shadow:0 2px 10px rgba(0,0,0,0.34);
    font-size:12px;
    font-weight:900;
    line-height:1;
}

.explanation-image-annotation.is-warning .explanation-image-annotation-dot {
    background:#b45309;
}

.explanation-image-annotation.is-accent .explanation-image-annotation-dot {
    background:#2563eb;
}

.explanation-image-annotation-label {
    position:absolute;
    left:16px;
    top:0;
    width:max-content;
    max-width:min(190px, 34vw);
    padding:5px 7px;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,0.82);
    border-radius:4px;
    background:rgba(8,15,27,0.9);
    color:#ffffff;
    box-shadow:0 3px 12px rgba(0,0,0,0.28);
    font-size:11px;
    font-weight:800;
    line-height:1.25;
    text-align:left;
}

.explanation-image-annotation.align-left .explanation-image-annotation-label {
    left:-16px;
    transform:translate(-100%, -50%);
}

.explanation-image-annotation.align-top .explanation-image-annotation-label {
    left:0;
    top:-16px;
    transform:translate(-50%, -100%);
}

.explanation-image-annotation.align-bottom .explanation-image-annotation-label {
    left:0;
    top:16px;
    transform:translate(-50%, 0);
}

.explanation-media-caption {
    padding:8px 2px 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.explanation-media-caption p {
    margin:0;
}

.explanation-media-attribution {
    display:flex;
    flex-wrap:wrap;
    gap:4px 7px;
    margin-top:4px;
}

.explanation-media-attribution a {
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
}

body.explanation-modal-open {
    overflow:hidden;
}

.explanation-modal-footer {
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
    padding:9px 18px;
    border-top:1px solid var(--border);
    background:color-mix(in srgb, var(--card) 96%, var(--soft));
}

.explanation-unclear-button {
    min-height:34px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:750;
}

.explanation-unclear-button:hover,
.explanation-unclear-button:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 58%, var(--border));
    color:var(--text);
    outline:none;
}

.exam-summary-box {
    margin-top:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
    font-size:16px;
}

@media (max-width: 640px) {
    .explanation-overlay {
        padding:10px;
    }

    .explanation-modal {
        max-height:calc(100svh - 20px);
    }

    .explanation-modal-head {
        min-height:50px;
        padding-left:14px;
    }

    .explanation-modal-scroll {
        padding:14px;
    }

    .explanation-answer-row {
        grid-template-columns:88px minmax(0, 1fr);
        gap:9px;
        padding:3px 0 12px;
    }

    .explanation-answer-row-label {
        padding-top:0;
    }

    .explanation-learning-section {
        margin-top:15px;
        padding-top:15px;
    }

    .explanation-solution-steps li {
        grid-template-columns:1fr;
        gap:4px;
    }

    .explanation-image-annotation-label {
        display:none;
    }

    .explanation-modal-footer {
        padding:8px 14px;
    }
}

.exam-summary-box {
    background:var(--soft);
}

.exam-summary-pending {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    background:transparent;
    border-color:transparent;
    padding:12px 0 0;
}

.exam-submit-btn {
    margin-top:0;
}

.quiz-card.is-exam-paused > :not(.exam-pause-overlay) {
    filter:blur(10px);
    opacity:0.24;
    pointer-events:none;
    user-select:none;
}

.exam-pause-overlay {
    position:absolute;
    inset:0;
    z-index:10;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(2,6,23,0.22);
    backdrop-filter:blur(2px);
}

.exam-pause-modal {
    width:min(100%, 320px);
    display:grid;
    gap:12px;
    justify-items:center;
    padding:22px;
    border:1px solid color-mix(in srgb, var(--border) 72%, #ffffff);
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 94%, #ffffff);
    box-shadow:0 28px 80px rgba(0,0,0,0.32);
    text-align:center;
}

.pause-kicker {
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.exam-pause-modal strong {
    font-size:30px;
    line-height:1;
}

.practice-result-overlay {
    box-sizing:border-box;
    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(2,6,23,0.56);
    backdrop-filter:blur(6px);
}

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

body.practice-result-open {
    overflow:hidden;
}

.practice-result-modal {
    box-sizing:border-box;
    width:min(100%, 420px);
    max-height:calc(100dvh - 32px);
    display:grid;
    gap:14px;
    padding:24px;
    border:1px solid color-mix(in srgb, var(--border) 78%, #ffffff);
    border-radius:8px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 30px 80px rgba(0,0,0,0.34);
    overflow-y:auto;
}

.practice-result-kicker {
    color:color-mix(in srgb, var(--accent) 82%, var(--text));
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:0;
}

.practice-result-modal h2,
.practice-result-modal p {
    margin:0;
}

.practice-result-modal h2 {
    font-size:28px;
    line-height:1.1;
}

.practice-result-modal p {
    color:color-mix(in srgb, var(--text) 70%, transparent);
    font-size:14px;
    font-weight:700;
}

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

.practice-result-grid div {
    min-height:74px;
    display:grid;
    align-content:center;
    gap:5px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
}

.practice-result-grid span {
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
    font-weight:800;
}

.practice-result-grid strong {
    font-size:26px;
    line-height:1;
}

.practice-result-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.practice-result-actions .confirm-answer-btn {
    min-width:138px;
}

.practice-result-retry-btn {
    border-color:color-mix(in srgb, var(--wrong) 82%, #991b1b);
    background:var(--wrong) !important;
}

.trial-result-next {
    display:grid;
    gap:7px;
    padding:15px 0 2px;
    border-top:1px solid var(--border);
}

.trial-result-next > span,
.trial-completion-actions > span {
    color:var(--accent);
    font-size:10px;
    font-weight:900;
    line-height:1.2;
    text-transform:uppercase;
}

.trial-result-next > strong {
    font-size:17px;
    line-height:1.25;
}

.trial-result-next > p {
    margin:0 0 5px;
    font-size:13px;
    font-weight:600;
}

.trial-result-next > button {
    width:100%;
    min-height:42px;
}

.trial-completion-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0 0;
    border-top:1px solid var(--border);
}

.trial-completion-actions > div {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.trial-completion-actions .confirm-answer-btn {
    min-height:40px;
}

@media (max-width:560px) {
    .trial-completion-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .trial-completion-actions > div,
    .trial-completion-actions .confirm-answer-btn {
        width:100%;
    }
}

.exam-intro-panel,
.exam-review-panel {
    width:min(100%, 720px);
    margin:0 auto;
}

.exam-intro-panel {
    display:grid;
    gap:16px;
    padding:4px 0 0;
}

.exam-intro-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.exam-intro-grid div {
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
}

.exam-intro-grid span,
.exam-review-header span {
    display:block;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
    font-weight:750;
}

.exam-intro-grid strong {
    display:block;
    margin-top:4px;
    font-size:18px;
}

.exam-intro-panel p {
    margin:0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
}

.exam-attempt-history {
    display:grid;
    gap:10px;
    margin-top:4px;
    padding-top:14px;
    border-top:1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.exam-attempt-history-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.exam-attempt-history h3 {
    margin:0;
    color:var(--text);
    font-size:14px;
    font-weight:850;
}

.exam-attempt-list {
    display:grid;
    gap:8px;
}

.exam-attempt-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
}

.exam-attempt-result {
    min-width:0;
    display:grid;
    gap:3px;
}

.exam-attempt-result strong {
    color:var(--text);
    font-size:14px;
}

.exam-attempt-result span,
.exam-attempt-result small,
.exam-attempt-empty,
.exam-review-note {
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
    font-weight:700;
}

.exam-attempt-review-btn {
    flex:0 0 auto;
    min-width:176px;
    min-height:34px;
    padding:7px 12px;
    font-size:12px;
}

.exam-attempt-review-btn:disabled {
    transform:none;
    border-color:var(--border);
    background:var(--control) !important;
    color:color-mix(in srgb, var(--text) 54%, transparent) !important;
    -webkit-text-fill-color:color-mix(in srgb, var(--text) 54%, transparent);
    cursor:not-allowed;
    box-shadow:none;
}

.exam-review-panel {
    display:grid;
    gap:12px;
}

.exam-score-title {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.exam-retry-btn {
    min-width:142px;
    min-height:34px;
    padding:7px 12px;
    font-size:12px;
}

.exam-review-header {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
}

.exam-review-header span {
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--soft);
    color:var(--text);
}

.exam-review-list {
    display:grid;
    gap:8px;
}

.exam-review-item {
    width:100%;
    display:grid;
    grid-template-columns:36px minmax(0, 1fr) 104px;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    text-align:left;
}

.exam-review-item:hover,
.exam-review-item:focus-visible {
    border-color:var(--accent);
    outline:none;
}

.exam-review-number {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--soft);
    border:1px solid var(--circle-border);
    font-size:12px;
    font-weight:850;
}

.exam-review-question {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:700;
}

.exam-review-status {
    justify-self:end;
    padding:5px 8px;
    border-radius:999px;
    background:var(--soft);
    font-size:12px;
    font-weight:800;
}

.exam-review-item.answered .exam-review-status {
    background:var(--accent);
    color:#ffffff;
}

.exam-review-item.flagged .exam-review-status {
    background:var(--flag);
    color:#111827;
}

.exam-review-item.correct .exam-review-status {
    background:var(--correct);
    color:#ffffff;
}

.exam-review-item.wrong .exam-review-status {
    background:var(--wrong);
    color:#ffffff;
}

.exam-review-footer {
    display:flex;
    justify-content:flex-end;
}

.empty-state {
    padding:18px;
    border:1px dashed var(--border);
    border-radius:8px;
    font-size:13px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
}

/* LOGIN */
.auth-shell {
    min-height:calc(100vh - 1px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 16px;
    background:
        linear-gradient(180deg, rgba(11,18,32,0.96), rgba(15,23,42,0.9)),
        url("assets/landing-hero.webp") center right / cover no-repeat;
}

.login-card {
    box-sizing:border-box;
    width:min(100%, 420px);
    margin:0;
    padding:24px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--surface-shadow);
}

.auth-shell .login-card {
    width:min(100%, 360px);
    padding:20px;
    border-radius:8px;
    background:color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow:0 18px 42px rgba(0,0,0,0.28);
}

.auth-back {
    min-height:31px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    justify-content:flex-start;
    margin:0 0 17px;
    padding:5px 10px 5px 8px;
    background:color-mix(in srgb, var(--soft) 76%, transparent);
    border:1px solid color-mix(in srgb, var(--text) 12%, var(--border));
    border-radius:5px;
    color:color-mix(in srgb, var(--text) 82%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:750;
    transition:background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.auth-back span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:12px;
    font-size:18px;
    line-height:1;
    transform:translateY(-1px);
}

.auth-back:hover,
.auth-back:focus-visible {
    background:var(--soft);
    border-color:color-mix(in srgb, var(--text) 30%, var(--border));
    color:var(--text);
    outline:none;
}

.auth-heading {
    margin-bottom:16px;
}

.login-card h1 {
    margin:0 0 8px;
    font-size:28px;
}

.auth-shell .login-card h1 {
    font-size:24px;
    line-height:1.12;
}

.auth-heading p:last-child {
    margin:0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
}

.login-card h2 {
    font-size:20px;
}

.social-login-grid {
    display:grid;
    gap:7px;
    margin:0;
}

.social-login-btn {
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:8px 11px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:750;
}

.social-login-btn:disabled {
    cursor:not-allowed;
    opacity:0.58;
}

.social-mark {
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    color:#111827;
    font-size:12px;
    font-weight:900;
}

.apple-mark svg {
    display:block;
}

.auth-divider {
    display:flex;
    align-items:center;
    gap:9px;
    margin:15px 0 10px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:750;
}

.auth-divider::before,
.auth-divider::after {
    content:"";
    height:1px;
    flex:1;
    background:var(--border);
}

.auth-form {
    margin:0;
}

.auth-terms-gate {
    display:grid;
    gap:8px;
    margin:3px 0 12px;
}

.auth-terms-gate[hidden] {
    display:none;
}

.auth-terms-open {
    min-height:36px;
    padding:8px 11px;
    border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
    border-radius:7px;
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:800;
}

.auth-terms-open:hover,
.auth-terms-open:focus-visible {
    background:color-mix(in srgb, var(--accent) 18%, var(--control));
    outline:none;
}

.auth-terms-consent-row {
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:color-mix(in srgb, var(--text) 74%, transparent);
    cursor:pointer;
    font-size:11px;
    font-weight:650;
    line-height:1.4;
}

.auth-terms-consent-row input {
    flex:0 0 auto;
    width:15px;
    height:15px;
    margin:1px 0 0;
    accent-color:var(--accent);
}

.auth-terms-consent-row input:disabled {
    cursor:not-allowed;
}

.login-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:9px;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:11px;
    font-weight:800;
}

.login-field.has-email-menu {
    position:relative;
    z-index:5;
}

.login-field[hidden],
.auth-signup-only[hidden] {
    display:none;
}

.login-input {
    box-sizing:border-box;
    width:100%;
    min-height:39px;
    padding:9px 11px;
    margin:0;
    background:var(--control);
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text);
    font:inherit;
    font-size:13px;
}

.auth-email-menu {
    position:absolute;
    z-index:20;
    top:calc(100% + 4px);
    right:0;
    left:0;
    display:grid;
    gap:3px;
    padding:5px;
    border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
    border-radius:7px;
    background:color-mix(in srgb, var(--card) 98%, #020617);
    box-shadow:0 16px 36px rgba(0,0,0,0.32);
}

.auth-email-menu[hidden] {
    display:none;
}

.auth-email-menu button {
    min-width:0;
    min-height:32px;
    padding:7px 9px;
    overflow:hidden;
    border:0;
    border-radius:5px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 82%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:750;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.auth-email-menu button:hover,
.auth-email-menu button:focus-visible {
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    color:var(--text);
    outline:none;
}

.password-input-wrap {
    position:relative;
    display:block;
}

.password-input-wrap .login-input {
    padding-right:48px;
}

.auth-field-message {
    min-height:16px;
    color:var(--wrong);
    font-size:12px;
    font-weight:750;
    line-height:1.35;
}

.auth-field-message:empty {
    min-height:0;
}

.password-toggle {
    position:absolute;
    top:50%;
    right:5px;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:31px;
    height:31px;
    padding:0;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    cursor:pointer;
}

.password-toggle .password-toggle-icon {
    display:block;
    pointer-events:none;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color:var(--text);
    background:color-mix(in srgb, var(--control) 70%, var(--card));
    border-color:color-mix(in srgb, var(--accent) 38%, transparent);
}

.forgot-password-row {
    display:flex;
    justify-content:flex-end;
    margin:-3px 0 10px;
}

.forgot-password-row[hidden] {
    display:none;
}

.forgot-password-row button {
    min-height:30px;
    padding:4px 0;
    border:0;
    background:transparent;
    color:var(--accent);
    font:inherit;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
}

.forgot-password-row button:hover,
.forgot-password-row button:focus-visible {
    color:var(--text);
    text-decoration:underline;
    outline:none;
}

.login-input:focus {
    outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset:2px;
    border-color:var(--accent);
}

.login-btn {
    box-sizing:border-box;
    width:100%;
    min-height:39px;
    padding:8px 11px;
    margin-top:7px;
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    border:0;
    color:var(--hero-button-ink);
    box-shadow:0 8px 14px rgba(16,55,84,0.2);
    border-radius:7px;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:background-position 420ms ease, filter 160ms ease;
}

.login-btn:hover,
.login-btn:focus-visible {
    background-position:right center;
}

.login-btn:disabled {
    cursor:wait;
    opacity:0.86;
}

.login-btn.is-loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding-top:9px;
    padding-bottom:9px;
}

.auth-progress {
    position:relative;
    display:none;
    width:min(190px, 78%);
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:color-mix(in srgb, currentColor 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent),
        inset 0 1px 2px rgba(15,23,42,0.16);
}

.login-btn.is-loading .auth-progress {
    display:inline-block;
}

.auth-progress::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, currentColor 30%, transparent),
        transparent
    );
    animation:authProgressSheen 1.4s ease-in-out infinite;
}

.auth-progress-fill {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:45%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        color-mix(in srgb, currentColor 58%, transparent),
        currentColor,
        color-mix(in srgb, currentColor 72%, white)
    );
    box-shadow:0 0 12px color-mix(in srgb, currentColor 38%, transparent);
    animation:authProgressLoad 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes authProgressLoad {
    0% { transform:translateX(-110%) scaleX(0.72); }
    45% { transform:translateX(68%) scaleX(1.05); }
    100% { transform:translateX(255%) scaleX(0.72); }
}

@keyframes authProgressSheen {
    0% { transform:translateX(-100%); opacity:0; }
    35% { opacity:1; }
    100% { transform:translateX(100%); opacity:0; }
}

.login-btn.secondary {
    background:var(--hero-button-pulse-bg);
    background-size:220% 100%;
    background-position:left center;
    border-color:transparent;
    color:var(--hero-button-ink);
}

.login-btn.secondary:hover,
.login-btn.secondary:focus-visible {
    background-position:right center;
}

#login-msg {
    min-height:16px;
    margin:10px 0 0;
    color:color-mix(in srgb, var(--text) 70%, transparent);
    font-size:11px;
}

@media (max-width: 980px) {
    .landing-hero {
        min-height:max(650px, calc(100svh - 70px));
    }

    .landing-hero-content {
        padding:38px 30px 210px;
    }

    .hero-title {
        font-size:clamp(58px, 15vw, 128px);
    }

    .landing-hero-plane {
        top:34%;
        width:min(112vw, 1050px);
    }

    .landing-hero-panel {
        left:50%;
        bottom:86px;
        transform:translateX(-50%);
    }

    .landing-hero-night-trial .landing-hero-panel {
        bottom:88px;
    }

    .landing-section {
        grid-template-columns:1fr;
    }

    .feature-grid {
        grid-template-columns:1fr;
    }

    .landing-about {
        gap:24px;
        padding-top:42px;
        padding-bottom:42px;
        padding-left:28px;
        padding-right:28px;
    }

    .about-feature-layout {
        grid-template-columns:1fr;
        min-height:0;
        padding:26px;
        background-position:center;
    }

    .about-feature-copy {
        max-width:620px;
    }

    .about-feature-copy p {
        max-width:560px;
    }

    .about-feature-tiles {
        justify-self:stretch;
        width:100%;
    }

    .about-icon-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .about-icon-item {
        min-height:160px;
    }


    .pricing-panel,
    .pricing-ops-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .pricing-course-visual {
        grid-template-columns:minmax(180px, 0.45fr) minmax(0, 1fr);
    }

    .landing-contact {
        grid-template-columns:1fr;
    }

    .contact-list {
        align-items:flex-start;
    }

    .contact-form {
        justify-items:start;
        width:min(440px, 100%);
    }

    #contact-message-status {
        text-align:left;
    }

    .landing-legal-footer {
        align-items:center;
        flex-direction:row;
    }

    .landing-legal-footer nav {
        justify-content:center;
    }

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

    /* Keep the website study panel and quiz stage in separate grid rows.
       Without explicit placement, the sticky/sidebar variants can overlap the
       first row of quiz controls and intercept Practice/Exam taps. */
    body:not(.is-native-app).quiz-screen-active .module-sidebar {
        grid-column:1;
        grid-row:1;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-stage {
        grid-column:1;
        grid-row:2;
    }

    /* Expanded navigation is a simple vertical flow on narrow websites. A
       flex stack prevents legacy grid placement from letting the quiz stage
       begin underneath the navigation card. */
    body:not(.is-native-app).quiz-screen-active .quiz-study-layout:not(.sidebar-collapsed) {
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout:not(.sidebar-collapsed) .module-sidebar,
    body:not(.is-native-app).quiz-screen-active .quiz-study-layout:not(.sidebar-collapsed) .quiz-stage {
        box-sizing:border-box;
        width:100%;
    }

    .quiz-study-layout.sidebar-collapsed {
        grid-template-columns:1fr;
        gap:12px;
    }

    .module-sidebar {
        position:static;
        max-height:none;
    }

    /* Keep the website sidebar control anchored to the subject selector. */
    body:not(.is-native-app) .module-sidebar {
        position:relative;
    }

    body:not(.is-native-app) .module-sidebar > .sidebar-toggle {
        top:6px;
    }

    .module-sidebar {
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:start;
    }

    #subject-sidebar-toggle {
        width:100%;
    }

    .sidebar-toggle {
        grid-column:1 / -1;
        justify-self:end;
    }

    .quiz-study-layout.sidebar-collapsed .module-sidebar {
        min-height:auto;
    }

    .quiz-study-layout.sidebar-collapsed .sidebar-toggle {
        width:38px;
        height:38px;
        min-height:38px;
        writing-mode:horizontal-tb;
    }

    .question-card-actions {
        left:24px;
        right:24px;
    }

    #formula-container {
        right:24px;
        width:min(520px, calc(100% - 48px));
    }

    .quiz-card.has-question-media .quiz-card-body,
    .quiz-card.has-question-media.media-collapsed .quiz-card-body {
        grid-template-columns:1fr;
    }

    .quiz-card.has-question-media:not(.media-collapsed) .quiz-question-column {
        padding-right:0;
    }

    .question-media-panel {
        position:relative;
        top:auto;
        margin-top:12px;
    }

    .quiz-card.has-question-media:not(.media-collapsed) .question-media-panel {
        align-self:start;
        margin-top:18px;
        margin-right:0;
        padding:24px 0 0;
        border-top:1px solid color-mix(in srgb, var(--border) 88%, var(--text));
        border-left:0;
    }

    .quiz-card.has-question-media:not(.media-collapsed) .question-media-toggle {
        left:12px;
        transform:none;
    }

    .question-media-collapsed-toggle {
        width:100%;
        min-height:42px;
        flex-direction:row;
    }

    .question-media-collapsed-toggle span:last-child {
        writing-mode:horizontal-tb;
        transform:none;
    }

    .subscription-summary {
        max-width:100%;
    }

    .course-access-pill {
        min-height:184px;
    }

    .course-access-list {
        min-height:184px;
    }

    .course-access-copy {
        left:22px;
        right:22px;
        bottom:16px;
        min-height:52px;
        gap:5px;
    }

    .course-access-title {
        font-size:28px;
    }

    .course-days-badge {
        min-height:0;
        font-size:12px;
    }

    .locked-intro-hero,
    .locked-intro-scroll,
    .locked-intro-subject-band {
        grid-template-columns:1fr;
    }

    .locked-intro-hero {
        min-height:0;
    }

    .locked-intro-copy h2 {
        font-size:32px;
    }

    .locked-intro-sticky {
        position:relative;
        top:auto;
        min-height:240px;
    }
}

@media (max-width: 720px) {
    .landing-nav,
    .landing-page {
        padding-left:14px;
        padding-right:14px;
    }

    .legal-page {
        padding:34px 14px 32px;
    }

    .legal-hero h1 {
        font-size:36px;
    }

    .legal-hero p,
    .legal-document p {
        font-size:14px;
    }

    .landing-nav {
        position:absolute;
        top:0;
        left:0;
        right:0;
        z-index:50;
        align-items:center;
        justify-content:center;
        padding:calc(18px + env(safe-area-inset-top)) 18px 0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
    }

    body.is-native-app #screen-landing > .landing-nav {
        padding-bottom:12px;
    }

    .landing-nav > .brand {
        display:none !important;
    }

    .landing-nav-actions {
        width:100%;
        max-width:360px;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        margin:0;
        padding:0;
    }

    .landing-nav-actions button {
        width:100%;
        min-width:0;
        min-height:44px;
        border-radius:8px;
        font-size:14px;
        font-weight:850;
        white-space:nowrap;
    }

    .landing-nav-actions .nav-btn {
        border:1px solid rgba(23,32,51,0.18);
        background:rgba(255,255,255,0.72);
        color:#172033;
    }

    .landing-nav-actions .landing-nav-cta {
        order:-1;
    }

    .landing-cart-slot {
        top:calc(100% + 10px);
        right:14px;
    }

    .copyright-notice-modal {
        padding:20px;
    }

    .copyright-notice-actions {
        display:grid;
        grid-template-columns:1fr;
    }

    .copyright-notice-actions button {
        width:100%;
    }

    .landing-about {
        display:block;
        padding:28px 14px 34px;
        background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent) 44%, transparent);
    }

    .about-disclosure {
        display:block;
        width:min(100%, 420px);
        margin:0 auto;
        overflow:hidden;
        border:1px solid rgba(148,163,184,0.18);
        border-radius:8px;
        background:rgba(15,23,42,0.52);
        box-shadow:0 18px 44px rgba(2,6,23,0.18);
    }

    .about-disclosure-summary {
        min-height:56px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:0 16px;
        color:#f8fafc;
        cursor:pointer;
        font-weight:900;
        list-style:none;
        outline:none;
    }

    .about-disclosure-summary::-webkit-details-marker {
        display:none;
    }

    .about-disclosure-summary::after {
        content:"";
        width:9px;
        height:9px;
        flex:0 0 auto;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        opacity:0.82;
        transform:rotate(45deg) translateY(-2px);
        transition:transform 160ms ease;
    }

    .about-disclosure[open] .about-disclosure-summary::after {
        transform:rotate(225deg) translateY(-2px);
    }

    .about-disclosure-summary:focus-visible {
        box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 72%, white);
    }

    .about-disclosure .about-intro {
        display:none;
        min-height:0;
        gap:0;
        padding:2px 16px 0;
        text-align:center;
    }

    .landing-about h2 {
        max-width:320px;
        margin:0 auto 10px;
        font-size:clamp(24px, 8vw, 30px);
        overflow-wrap:normal;
    }

    .about-intro p {
        max-width:30ch;
        margin:0 auto;
        font-size:14px;
        line-height:1.5;
        text-align:center;
    }

    .about-feature-layout {
        min-height:0;
        grid-template-columns:1fr;
        gap:16px;
        margin:16px;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        overflow:visible;
    }

    .about-feature-copy {
        max-width:none;
    }

    .about-feature-copy h3 {
        font-size:24px;
    }

    .about-feature-copy p {
        max-width:none;
        font-size:14px;
        line-height:1.5;
    }

    .about-feature-tiles {
        grid-template-columns:1fr;
        justify-self:stretch;
        width:100%;
    }

    .about-icon-item {
        min-height:0;
        padding:14px;
    }

    body.is-native-app.public-screen .about-disclosure {
        position:relative;
        width:100%;
        max-width:420px;
        padding:20px 0 34px;
        overflow:visible;
        border:0;
        border-top:1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    body.is-native-app.public-screen .about-disclosure-summary {
        display:none !important;
    }

    body.is-native-app.public-screen .about-disclosure-content {
        display:grid;
        gap:16px;
        max-height:280px;
        overflow:hidden;
        -webkit-mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.96) 66%,
            rgba(0, 0, 0, 0.78) 76%,
            rgba(0, 0, 0, 0.42) 88%,
            transparent 100%
        );
        mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.96) 66%,
            rgba(0, 0, 0, 0.78) 76%,
            rgba(0, 0, 0, 0.42) 88%,
            transparent 100%
        );
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        transition:max-height 360ms ease;
    }

    body.is-native-app.public-screen .about-disclosure.is-expanded .about-disclosure-content {
        max-height:1800px;
        -webkit-mask-image:none;
        mask-image:none;
    }

    body.is-native-app.public-screen .about-disclosure-toggle {
        position:absolute;
        z-index:2;
        bottom:0;
        left:50%;
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
        border-radius:50%;
        background:var(--control);
        color:var(--accent);
        box-shadow:
            0 8px 24px color-mix(in srgb, #000 24%, transparent),
            0 0 0 8px color-mix(in srgb, var(--bg) 38%, transparent);
        cursor:pointer;
        transform:translateX(-50%);
    }

    body.is-native-app.public-screen .about-disclosure-toggle:focus-visible {
        outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent);
        outline-offset:3px;
    }

    body.is-native-app.public-screen .about-disclosure-toggle svg {
        width:20px;
        height:20px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform 220ms ease;
    }

    body.is-native-app.public-screen .about-disclosure.is-expanded .about-disclosure-toggle svg {
        transform:rotate(180deg);
    }

    body.is-native-app.public-screen .landing-faq {
        position:relative;
        padding-bottom:66px;
        overflow:visible;
    }

body.is-native-app.public-screen .landing-faq-content {
        max-height:240px;
        overflow:hidden;
        -webkit-mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.96) 66%,
            rgba(0, 0, 0, 0.78) 76%,
            rgba(0, 0, 0, 0.42) 88%,
            transparent 100%
        );
        mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0, 0, 0, 0.96) 66%,
            rgba(0, 0, 0, 0.78) 76%,
            rgba(0, 0, 0, 0.42) 88%,
            transparent 100%
        );
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        transition:max-height 360ms ease;
    }

    body.is-native-app.public-screen .landing-faq.is-expanded .landing-faq-content {
        max-height:1800px;
        -webkit-mask-image:none;
        mask-image:none;
    }

    body.is-native-app.public-screen .landing-faq-toggle {
        position:absolute;
        z-index:2;
        bottom:12px;
        left:50%;
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
        border-radius:50%;
        background:var(--control);
        color:var(--accent);
        box-shadow:
            0 8px 24px color-mix(in srgb, #000 24%, transparent),
            0 0 0 8px color-mix(in srgb, var(--bg) 38%, transparent);
        cursor:pointer;
        transform:translateX(-50%);
    }

    body.is-native-app.public-screen .landing-faq-toggle:focus-visible {
        outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent);
        outline-offset:3px;
    }

    body.is-native-app.public-screen .landing-faq-toggle svg {
        width:20px;
        height:20px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform 220ms ease;
    }

    body.is-native-app.public-screen .landing-faq.is-expanded .landing-faq-toggle svg {
        transform:rotate(180deg);
    }

    .landing-hero {
        min-height:100svh;
        display:grid;
        place-items:center;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(226,237,243,0.86) 62%, rgba(218,231,238,0.96) 100%),
            url("assets/landing-hero-clouds.webp") center / cover no-repeat;
    }

    .landing-hero-night-trial {
        background:url("assets/landing-hero-night-runway.webp") 58% 50% / cover no-repeat;
    }

    .landing-hero-night-trial .landing-hero-content {
        align-items:center;
        justify-content:flex-start;
        padding-top:clamp(96px, 15svh, 128px);
        padding-left:22px;
        padding-right:22px;
        text-align:center;
    }

    .landing-hero-content {
        min-height:100svh;
        align-items:center;
        justify-content:center;
        padding:96px 22px 132px;
        text-align:center;
    }

    .mobile-landing-brand {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:14px;
        color:#172033;
        font-family:"Michroma", system-ui, sans-serif;
        font-size:16px;
        line-height:1;
        letter-spacing:0.08em;
        text-transform:uppercase;
        text-shadow:0 16px 40px rgba(255,255,255,0.52);
    }

    .mobile-landing-brand-lockup {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:12px;
    }

    .landing-hero-night-trial .mobile-landing-brand {
        color:#f8fbff;
        gap:10px;
        margin:0 auto;
        text-shadow:0 18px 42px rgba(0,0,0,0.64), 0 0 34px rgba(45,135,197,0.2);
    }

    .mobile-landing-brand-title {
        display:block;
        font-family:"Michroma", system-ui, sans-serif;
        font-size:clamp(36px, 11vw, 48px);
        line-height:1;
        letter-spacing:0.1em;
        white-space:nowrap;
    }

    .mobile-landing-brand-tagline {
        max-width:calc(100vw - 32px);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        color:rgba(214,234,250,0.84);
        font-family:"Michroma", system-ui, sans-serif;
        font-size:11px;
        font-weight:400;
        line-height:1.3;
        letter-spacing:0;
        text-align:center;
        text-shadow:0 8px 22px rgba(0,0,0,0.72);
        white-space:nowrap;
    }

    .mobile-landing-brand-exams {
        color:#7dd3fc;
        font-size:clamp(14px, 4vw, 18px);
        font-weight:900;
        letter-spacing:0.1em;
        text-shadow:0 0 18px rgba(56,189,248,0.24), 0 8px 22px rgba(0,0,0,0.72);
    }

    .mobile-landing-brand-logbooks {
        color:#83c99d;
        font-size:10px;
        font-weight:400;
        letter-spacing:0.16em;
        white-space:nowrap;
        text-shadow:0 8px 22px rgba(0,0,0,0.72);
    }

    .mobile-landing-brand .wind-logo {
        display:block;
        width:68px;
        height:38px;
        background:url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
        opacity:0.62;
        filter:saturate(0.72) brightness(0.9);
        transform:scaleX(0.8);
        transform-origin:center;
    }

    .mobile-landing-brand .wind-logo::before,
    .mobile-landing-brand .wind-logo::after {
        display:none;
    }

    .landing-hero-night-trial .mobile-landing-brand .wind-logo {
        display:block;
    }

    .hero-kicker,
    .hero-title,
    .landing-hero-plane,
    .hero-clouds-back,
    .hero-clouds-front,
    .hero-foreground-clouds,
    .hero-scroll-cue {
        display:none;
    }

    .landing-hero-plane {
        top:38%;
        left:50%;
        width:100%;
        max-width:100%;
    }

    .hero-clouds-back,
    .hero-clouds-front {
        left:0;
        right:0;
        transform:none;
    }

    .hero-foreground-clouds::before {
        left:0;
        right:0;
        background-size:155% auto;
    }

    .landing-hero-panel {
        right:auto;
        bottom:calc(78px + env(safe-area-inset-bottom));
        left:50%;
        width:min(390px, calc(100vw - 28px));
        max-width:calc(100vw - 28px);
        padding:0;
        transform:translateX(-50%);
    }

    .landing-hero-night-trial .landing-hero-panel {
        left:50%;
        bottom:calc(78px + env(safe-area-inset-bottom));
        transform:translateX(-50%);
    }

    .hero-scroll-cue {
        display:none;
    }

    .landing-copy {
        font-size:14px;
    }

    .landing-actions > button,
    .landing-pricing .landing-primary {
        width:100%;
    }

    .landing-hero-choices {
        grid-template-columns:minmax(0, 1fr);
        gap:12px;
        width:100%;
    }

    .landing-hero-choice-actions {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        width:100%;
    }

    .landing-hero-choice-actions.single-action {
        grid-template-columns:minmax(0, 1fr);
    }

    .landing-hero-choice-actions > button {
        width:100%;
        min-width:0;
        min-height:48px;
        padding:0 12px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        white-space:normal;
    }

    .landing-install-strip {
        bottom:calc(16px + env(safe-area-inset-bottom));
        max-width:calc(100vw - 28px);
        padding:0;
    }

    .landing-install-badges {
        width:min(calc(100vw - 28px), 274px);
    }

    .landing-pricing {
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:12px;
        padding:34px 14px 38px;
    }

    .landing-contact {
        grid-template-columns:1fr;
        justify-content:center;
        margin-top:0;
        min-height:0;
        padding:34px 18px;
        background:transparent;
    }

    .landing-contact::before {
        background-position:52% 38%;
    }

    .contact-list {
        grid-column:auto;
        align-items:stretch;
        margin:0 auto;
    }

    .landing-contact h2 {
        text-align:center;
    }

    .contact-form {
        justify-items:stretch;
        width:100%;
    }

    .email-cta {
        width:100%;
    }

    .pricing-course-gallery {
        display:contents;
    }

    .pricing-course-tile[data-pricing-tab="ppl"] {
        order:2;
    }

    #pricing-ppl {
        order:3;
    }

    .pricing-course-tile[data-pricing-tab="cpl"] {
        order:4;
    }

    #pricing-cpl {
        order:5;
    }

    .pricing-course-tile[data-pricing-tab="night"] {
        order:6;
    }

    #pricing-night {
        order:7;
    }

    body.is-native-app .landing-pricing > .pricing-rules {
        order:8;
    }

    .pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active) {
        opacity:1;
    }

    .pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active) img {
        filter:none;
    }

    .pricing-course-gallery:has(.pricing-course-tile.active) .pricing-course-tile:not(.active)::after {
        background:linear-gradient(180deg, rgba(7,11,20,0.04) 0%, rgba(7,11,20,0.22) 42%, rgba(7,11,20,0.9) 100%);
    }

    .pricing-intro {
        order:1;
        text-align:center;
    }

    .about-demo-grid {
        grid-template-columns:1fr;
    }

    .about-icon-grid {
        grid-template-columns:1fr;
    }

    .about-icon-item {
        grid-template-columns:46px minmax(0, 1fr);
        column-gap:12px;
        min-height:0;
    }

    .about-icon {
        grid-row:span 2;
    }

    .pricing-course-tile {
        min-height:180px;
    }

    #pricing-ppl {
        --pricing-link-accent:#14b8a6;
        --pricing-link-soft:rgba(20,184,166,0.22);
        --pricing-link-line:rgba(94,234,212,0.82);
    }

    #pricing-cpl {
        --pricing-link-accent:#38bdf8;
        --pricing-link-soft:rgba(56,189,248,0.26);
        --pricing-link-line:rgba(125,211,252,0.95);
    }

    #pricing-night {
        --pricing-link-accent:#a78bfa;
        --pricing-link-soft:rgba(167,139,250,0.16);
        --pricing-link-line:rgba(167,139,250,0.72);
    }

    .pricing-panel,
    .pricing-ops-grid {
        grid-template-columns:1fr;
    }

    .landing-faq {
        padding:42px 16px 46px;
    }

    .landing-faq-heading {
        margin-bottom:18px;
    }

    .landing-faq-list {
        grid-template-columns:1fr;
        gap:0;
    }

    .pricing-panel {
        display:none;
    }

    .pricing-panel.active {
        width:100%;
        box-sizing:border-box;
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:minmax(252px, 78vw);
        grid-template-columns:none;
        gap:12px;
        margin:0 0 24px;
        padding:0 14px 8px 0;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
        border:0;
        background:transparent;
        box-shadow:none;
    }

    .pricing-panel .price-card {
        min-width:0;
        min-height:232px;
        scroll-snap-align:start;
    }

    .pricing-course-visual {
        grid-template-columns:1fr;
    }

    .pricing-course-visual img {
        height:180px;
        min-height:180px;
    }

    .pricing-course-visual > div {
        padding:18px;
    }

    .pricing-course-visual strong {
        font-size:23px;
    }

    .content-wrapper {
        padding:14px 14px 24px;
    }

    .top-nav {
        align-items:stretch;
        flex-direction:column;
    }

    .subscription-summary {
        margin-bottom:12px;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scrollbar-width:thin;
    }

    .subscription-card {
        width:max-content;
        min-width:100%;
        padding:7px;
    }

    .course-access-list {
        display:flex;
        justify-content:flex-start;
        min-width:720px;
        min-height:164px;
    }

    .course-access-pill {
        flex:1 0 240px;
        min-height:164px;
    }

    .course-access-copy {
        left:18px;
        right:18px;
        bottom:14px;
        min-height:46px;
        gap:4px;
    }

    .course-access-title {
        font-size:23px;
    }

    .course-days-badge {
        min-height:0;
        padding:0;
        font-size:11px;
    }

    .locked-course-intro {
        gap:12px;
    }

    .locked-intro-hero,
    .locked-intro-step,
    .locked-intro-subject-band,
    .locked-intro-final {
        padding:18px;
    }

    .locked-intro-copy h2 {
        font-size:28px;
    }

    .locked-intro-copy p {
        font-size:14px;
    }

    .locked-intro-hero-media,
    .locked-intro-sticky {
        min-height:220px;
    }

    .locked-intro-actions,
    .locked-intro-final {
        align-items:stretch;
        flex-direction:column;
    }

    .locked-intro-actions button,
    .locked-intro-final button {
        width:100%;
    }

    .top-nav {
        padding:12px 14px;
    }

    .top-nav nav,
    .header-actions,
    .subject-actions {
        width:100%;
    }

    .top-nav nav,
    .header-actions {
        justify-content:space-between;
    }

    .quiz-main-layout {
        flex-direction:column;
    }

    .subject-list-header {
        display:none;
    }

    .dashboard-course-trial {
        min-height:0;
        align-items:stretch;
        flex-direction:column;
        gap:11px;
        padding:13px;
    }

    .dashboard-course-trial-btn {
        width:100%;
        min-height:42px;
    }

    .subject-list-row {
        grid-template-columns:1fr auto;
        gap:8px 12px;
        min-height:0;
        padding:12px 14px;
    }

    .subject-list-row > div:nth-child(2) {
        justify-self:end;
    }

    .subject-progress-cell {
        grid-column:1 / -1;
    }

    .subject-row-actions {
        grid-column:1 / -1;
    }

    .module-sidebar {
        display:flex;
    }

    .quiz-toolbar-right {
        box-sizing:border-box;
        width:100%;
        max-width:100%;
        flex-wrap:wrap;
        justify-content:flex-start;
        margin-left:0;
        min-width:0;
    }

    .segmented-control {
        max-width:100%;
        overflow-x:auto;
    }

    .search-input {
        flex:1 0 100%;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .answer-btn,
    .answer-btn:not(:disabled):hover {
        width:100%;
    }

    .answer-confirm-row {
        width:100%;
        max-width:720px;
        justify-content:flex-start;
        align-items:center;
        flex-direction:row;
        gap:8px;
        margin-inline:0;
        padding-left:var(--quiz-content-indent);
    }

    .exam-answer-controls {
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items:center;
    }

    .exam-answer-nav-cluster {
        width:100%;
    }

    .exam-submit-cluster {
        width:100%;
        margin-left:0;
        justify-content:flex-end;
        flex-wrap:wrap;
    }

    .exam-answer-progress {
        text-align:right;
    }

    .button-group {
        gap:8px;
    }

    .confirm-answer-btn {
        width:100%;
    }

    .exam-score-title {
        align-items:flex-start;
        gap:10px;
    }

    .exam-retry-btn {
        width:auto;
        max-width:100%;
    }

    .exam-attempt-item {
        align-items:flex-start;
        flex-direction:column;
    }

    .exam-attempt-review-btn {
        width:auto;
        max-width:100%;
    }

    .answer-confirm-row .confirm-answer-btn {
        flex:0 0 auto;
        width:auto;
        max-width:none;
        min-width:138px;
    }

    .answer-confirm-row .answer-nav-btn {
        flex:0 0 auto;
        width:auto;
        min-width:64px;
        height:34px;
        padding:0 12px;
    }

    .answer-confirm-row .confirm-answer-btn:not(.answer-nav-btn) {
        min-width:132px;
    }

    .answer-confirm-row .answer-unsure-btn {
        min-width:132px;
        min-height:36px;
        height:auto;
        padding:9px 12px;
        border-radius:10px;
    }

    .quiz-card {
        --quiz-question-font-size:19px;
        --quiz-content-indent:0px;
        padding:22px 12px 16px;
        border-radius:24px;
        box-shadow:var(--subtle-shadow);
    }

    .quiz-card.is-compact-quiz-header {
        padding-top:22px;
    }

    .question-card-actions {
        left:14px;
        right:14px;
        top:-1px;
    }

    #formula-container {
        right:14px;
        width:calc(100% - 28px);
    }

    .question-action-group .question-action-btn {
        padding-inline:8px;
    }

    .question-action-group-center .question-action-btn:not(.icon-action-btn) {
        min-width:64px;
    }

    .floating-cart {
        width:auto;
    }

    .floating-cart-panel {
        width:calc(100vw - 24px);
    }

    .floating-cart-items {
        max-height:220px;
    }
}

@media (max-width: 340px) {
    .landing-hero-choice-actions {
        grid-template-columns:minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .question-card-actions.has-resource-actions {
        grid-template-columns:minmax(0, 1fr) auto;
        justify-items:stretch;
        column-gap:6px;
    }

    .question-card-actions.has-resource-actions .question-action-group-resources {
        grid-column:1;
        grid-row:1;
        justify-self:start;
    }

    .question-card-actions.has-resource-actions .question-action-group-tools {
        grid-column:2;
        grid-row:1;
        justify-self:end;
    }

    .formula-action-btn,
    .resource-action-btn {
        flex-basis:92px;
        width:92px;
    }
}

.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) {
    display:grid;
    grid-template-columns:minmax(62px, auto) minmax(132px, 136px) minmax(62px, auto) minmax(132px, 136px);
    grid-template-areas:"back confirm next unsure";
    align-items:start;
    justify-content:flex-start;
    gap:8px 10px;
}

.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-prev {
    grid-area:back;
}

.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
    grid-area:confirm;
    width:100%;
}

.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-unsure-btn {
    grid-area:unsure;
    width:100%;
}

.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-next,
.quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-finish {
    grid-area:next;
}

@media (max-width: 560px) {
    .quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) {
        grid-template-columns:minmax(62px, auto) minmax(132px, 136px);
        grid-template-areas:
            "back confirm"
            "next unsure";
    }

    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) {
        display:grid;
        grid-template-columns:minmax(62px, auto) minmax(132px, 136px);
        grid-template-areas:
            "back confirm"
            "next unsure";
        align-items:start;
        justify-content:flex-start;
        gap:8px 10px;
        padding-left:0;
    }

    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-prev {
        grid-area:back;
    }

    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
        grid-area:confirm;
        width:100%;
    }

    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-unsure-btn {
        grid-area:unsure;
        width:100%;
    }

    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-next,
    .answer-confirm-row:not(.exam-answer-controls):not(.website-practice-answer-controls) .answer-nav-btn-finish {
        grid-area:next;
    }
}

.native-account-tutorial {
    display:none !important;
}

.native-account-dashboard {
    display:none !important;
}

body.is-native-app input,
body.is-native-app select,
body.is-native-app textarea {
    font-size:16px;
}

@media (max-width: 720px) {
    body.is-native-app:not(.public-screen) {
        width:100%;
        max-width:100vw;
        padding-top:calc(58px + env(safe-area-inset-top));
        padding-bottom:calc(70px + env(safe-area-inset-bottom));
        overflow-x:clip;
    }

    body.is-native-app:not(.public-screen) .content-wrapper {
        box-sizing:border-box;
        width:100%;
        max-width:100%;
        margin:0;
        padding:12px 12px calc(90px + env(safe-area-inset-bottom));
        overflow-x:clip;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav {
        min-height:58px;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:calc(7px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
    }

    body.is-native-app:not(.public-screen) .brand-home-btn {
        min-width:0;
        display:inline-flex !important;
        gap:8px;
        font-size:14px;
    }

    body.is-native-app:not(.public-screen) .brand-home-btn > span:last-child {
        position:static;
        width:auto;
        height:auto;
        overflow:visible;
        clip:auto;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav {
        box-sizing:border-box;
        position:fixed;
        z-index:90;
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        min-height:64px;
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:0;
        padding:6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border:0;
        border-top:1px solid color-mix(in srgb, var(--border) 92%, transparent);
        border-radius:0;
        background:color-mix(in srgb, var(--bg) 94%, transparent);
        box-shadow:0 -10px 28px rgba(0,0,0,0.2);
        backdrop-filter:blur(20px);
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn {
        min-width:0;
        min-height:50px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding:4px 2px;
        border-radius:8px;
        font-size:10px;
        font-weight:800;
        line-height:1;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn::before {
        width:20px;
        height:20px;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        font-size:10px;
    }

    body.is-native-app:not(.public-screen) .header-actions {
        width:auto;
        flex:0 0 auto;
        justify-content:flex-end;
        gap:7px;
    }

    body.is-native-app:not(.public-screen) .header-tutorial-btn {
        display:none;
    }

    body.is-native-app:not(.public-screen) .native-account-tutorial {
        display:flex !important;
    }

    body.is-native-app.public-screen .native-account-dashboard {
        display:flex !important;
    }

    body.is-native-app .native-account-dashboard[hidden] {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .account-avatar-btn {
        width:38px;
        height:38px;
    }

    body.is-native-app:not(.public-screen) .account-menu-panel {
        position:fixed;
        top:calc(54px + env(safe-area-inset-top));
        right:12px;
        bottom:auto;
        left:auto;
        width:min(240px, calc(100vw - 24px));
        max-height:calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y:auto;
    }

    body.is-native-app:not(.public-screen) .floating-cart-tab {
        width:38px;
        min-width:38px;
        min-height:38px;
        justify-content:center;
        gap:0;
        padding:0;
    }

    body.is-native-app:not(.public-screen) .floating-cart-tab > span {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }

    body.is-native-app:not(.public-screen) .floating-cart-tab strong {
        position:absolute;
        top:-4px;
        right:-4px;
        width:17px;
        height:17px;
        border:2px solid var(--bg);
        background:var(--accent);
        color:#fff;
        font-size:9px;
    }

    body.is-native-app:not(.public-screen) .floating-cart-panel {
        position:fixed;
        top:calc(54px + env(safe-area-inset-top));
        right:12px;
        bottom:auto;
        width:calc(100vw - 24px);
        max-height:calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y:auto;
    }

    body.is-native-app:not(.public-screen) #screen-dashboard,
    body.is-native-app:not(.public-screen) #screen-dashboard > *,
    body.is-native-app:not(.public-screen) .subject-grid,
    body.is-native-app:not(.public-screen) .subject-list-panel,
    body.is-native-app:not(.public-screen) .dashboard-pricing-panel,
    body.is-native-app:not(.public-screen) .locked-course-intro {
        box-sizing:border-box;
        min-width:0;
        max-width:100%;
    }

    body.is-native-app:not(.public-screen) .subscription-summary {
        width:100%;
        max-width:100%;
        margin:0 0 12px;
        padding:0;
        overflow:visible;
    }

    body.is-native-app:not(.public-screen) .subscription-card {
        width:100%;
        min-width:0;
        padding:0;
        overflow:visible;
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .course-access-list {
        width:100%;
        min-width:0;
        min-height:112px;
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
        padding:0;
        overflow:visible;
    }

    body.is-native-app:not(.public-screen) .course-access-pill {
        width:100%;
        min-width:0;
        min-height:112px;
        flex:none;
        border-radius:8px;
        background-position:center;
    }

    body.is-native-app:not(.public-screen) .course-access-copy {
        left:8px;
        right:8px;
        bottom:9px;
        min-height:0;
        gap:3px;
    }

    body.is-native-app:not(.public-screen) .course-access-title {
        max-width:100%;
        font-size:17px;
        line-height:1.05;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .course-days-badge {
        max-width:100%;
        font-size:9px;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .course-access-validity {
        font-size:8px;
        line-height:1.15;
    }

    body.is-native-app:not(.public-screen) .course-lock-tag {
        top:6px;
        right:6px;
        max-width:calc(100% - 12px);
        padding:4px 5px;
        font-size:8px;
        line-height:1.15;
        white-space:normal;
        text-align:center;
    }

    body.is-native-app:not(.public-screen) .subject-grid {
        width:100%;
        gap:12px;
    }

    body.is-native-app:not(.public-screen) .subject-list-panel {
        width:100%;
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .subject-list-row {
        box-sizing:border-box;
        width:100%;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:9px 10px;
        padding:12px;
    }

    body.is-native-app:not(.public-screen) .subject-list-row > div {
        min-width:0;
    }

    body.is-native-app:not(.public-screen) .subject-name-cell strong {
        min-width:0;
        flex-wrap:wrap;
        font-size:13px;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .subject-progress-cell,
    body.is-native-app:not(.public-screen) .subject-row-actions {
        grid-column:1 / -1;
        width:100%;
        min-width:0;
    }

    body.is-native-app:not(.public-screen) .subject-purchase-mode {
        align-items:stretch;
        flex-direction:column;
        padding:12px;
    }

    body.is-native-app:not(.public-screen) .subject-purchase-mode button {
        width:100%;
    }

    body.is-native-app:not(.public-screen) .dashboard-pricing-panel {
        width:100%;
        grid-template-columns:minmax(0, 1fr);
        gap:10px;
    }

    body.is-native-app:not(.public-screen) .dashboard-pricing-disclosure {
        width:100%;
        align-items:center;
        padding-top:10px;
    }

    body.is-native-app:not(.public-screen) .dashboard-price-card {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        min-height:0;
    }

    body.is-native-app:not(.public-screen) .locked-course-intro {
        width:100%;
        gap:12px;
        padding:14px;
    }

    body.is-native-app:not(.public-screen) .locked-intro-hero,
    body.is-native-app:not(.public-screen) .locked-intro-scroll,
    body.is-native-app:not(.public-screen) .locked-intro-subject-band {
        min-width:0;
        grid-template-columns:minmax(0, 1fr);
    }

    body.is-native-app:not(.public-screen) .locked-intro-hero,
    body.is-native-app:not(.public-screen) .locked-intro-step,
    body.is-native-app:not(.public-screen) .locked-intro-subject-band,
    body.is-native-app:not(.public-screen) .locked-intro-final {
        padding:14px;
    }

    body.is-native-app:not(.public-screen) .locked-intro-copy h2 {
        font-size:25px;
        overflow-wrap:anywhere;
    }

    body.is-native-app:not(.public-screen) .locked-intro-hero-media,
    body.is-native-app:not(.public-screen) .locked-intro-sticky {
        min-height:170px;
    }
}

/* Keep these native rules last so desktop-responsive rules cannot override the app shell. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) {
        padding-top:env(safe-area-inset-top);
        padding-bottom:calc(70px + env(safe-area-inset-bottom));
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav {
        top:auto;
        bottom:0;
        min-height:0;
        display:block;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > .brand-home-btn,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > .header-actions {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav {
        position:static;
        width:100%;
        min-height:64px;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:0;
        padding:5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border:0;
        border-top:1px solid color-mix(in srgb, var(--border) 90%, transparent);
        border-radius:0;
        background:color-mix(in srgb, var(--bg) 95%, transparent);
        box-shadow:0 -10px 28px rgba(0,0,0,0.2);
        backdrop-filter:blur(20px);
        pointer-events:auto;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        min-width:0;
        min-height:54px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:0;
        padding:4px;
        border-radius:8px;
        font-size:0;
        line-height:0;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn::before {
        width:25px;
        height:25px;
        margin:0;
    }

    body.is-native-app.public-screen .landing-hero-night-trial {
        min-height:100dvh;
        background-color:#07111f;
        background-image:url("assets/landing-hero-front-app.webp");
        background-position:center;
        background-size:cover;
        background-repeat:no-repeat;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        align-items:center;
        justify-content:flex-start;
        padding:clamp(132px, 21svh, 178px) 20px 220px;
        text-align:center;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .mobile-landing-brand {
        gap:9px;
        margin:0 auto;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        display:block;
        font-size:clamp(48px, 14vw, 64px);
        line-height:0.92;
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        max-width:320px;
        color:rgba(214,234,250,0.82);
        font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size:11px;
        font-weight:800;
        line-height:1.3;
        text-shadow:0 8px 24px rgba(0,0,0,0.7);
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline b {
        color:#83c99d;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls),
    body.is-native-app .quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls) {
        width:100%;
        display:grid;
        grid-template-columns:58px minmax(112px, 1fr) 58px;
        grid-template-areas:
            "back confirm next"
            ". unsure .";
        align-items:center;
        justify-content:stretch;
        gap:9px 12px;
        padding-left:0;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-prev {
        grid-area:back;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
        grid-area:confirm;
        width:100%;
        min-width:0;
        min-height:48px;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-next,
    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-nav-btn-finish {
        grid-area:next;
    }

    body.is-native-app .answer-confirm-row:not(.exam-answer-controls) .answer-unsure-btn {
        grid-area:unsure;
        width:84px;
        min-width:84px;
        min-height:30px;
        height:30px;
        justify-self:center;
        padding:0 10px;
        border-radius:7px;
        font-size:11px;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev,
    body.is-native-app .answer-confirm-row .answer-nav-btn-next {
        width:58px;
        min-width:58px;
        height:54px;
        min-height:54px;
        display:grid;
        place-items:center;
        padding:0;
        border:2px solid var(--accent);
        border-radius:10px;
        background:transparent;
        color:var(--text);
        font-size:0;
        box-shadow:none;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev::before,
    body.is-native-app .answer-confirm-row .answer-nav-btn-next::before {
        display:block;
        color:var(--text);
        font-size:31px;
        font-weight:500;
        line-height:1;
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-prev::before {
        content:"←";
    }

    body.is-native-app .answer-confirm-row .answer-nav-btn-next::before {
        content:"→";
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn {
        color:#dbe7f5;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn::before {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-icon {
        width:25px;
        height:25px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav #nav-quiz {
        position:relative;
        width:100%;
        overflow:visible;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav #nav-quiz::after {
        content:"";
        position:absolute;
        inset:-8px 0 -6px;
        display:block !important;
        border:0;
        background:transparent;
        pointer-events:auto;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        color:#60a5fa;
    }

    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn {
        color:#334155;
    }

    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active {
        color:#1d4ed8;
    }

    body.is-native-app.quiz-screen-active {
        padding-bottom:0;
    }

    body.is-native-app.quiz-screen-active .top-nav.app-nav {
        display:none;
    }

    body.is-native-app.quiz-screen-active .content-wrapper {
        padding-bottom:20px;
    }

    body.is-native-app.quiz-screen-active .native-quiz-header {
        position:sticky;
        z-index:105;
        top:0;
        display:flex;
        align-items:center;
        min-height:48px;
        margin:-12px -12px 10px;
        padding:8px 12px;
        border-bottom:1px solid var(--border);
        background:color-mix(in srgb, var(--bg) 94%, transparent);
        backdrop-filter:blur(18px);
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial {
        min-width:40px;
        min-height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:4px;
        flex:0 0 auto;
        padding:0 8px;
        border:1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
        border-radius:8px;
        background:var(--control);
        color:var(--text);
        cursor:pointer;
        font:inherit;
        font-size:11px;
        font-weight:850;
        line-height:1;
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial:active,
    body.is-native-app.quiz-screen-active .native-quiz-tutorial:focus-visible {
        background:var(--active-fill);
        color:var(--active-ink);
        outline:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial-icon {
        width:17px;
        height:17px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial-icon path {
        fill:currentColor;
        stroke:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        min-height:40px;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:0 12px 0 8px;
        border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
        border-radius:8px;
        background:var(--control);
        color:var(--text);
        font:inherit;
        font-size:13px;
        font-weight:850;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        font-size:24px;
        font-weight:500;
        line-height:1;
    }
}

/* Keep native quiz chrome above the shared responsive rules. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active {
        padding-top:env(safe-area-inset-top);
        padding-bottom:0;
    }

    body.is-native-app.quiz-screen-active .content-wrapper {
        padding-top:72px;
        padding-bottom:0;
    }

    body.is-native-app.quiz-screen-active .quiz-study-layout,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed {
        display:block;
    }

    body.is-native-app.quiz-screen-active .module-sidebar,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar {
        display:none;
    }

    body.is-native-app.quiz-screen-active.native-quiz-picker-open .module-sidebar,
    body.is-native-app.quiz-screen-active.native-quiz-picker-open .quiz-study-layout.sidebar-collapsed .module-sidebar {
        display:flex;
    }

    body.is-native-app.quiz-screen-active .native-quiz-header {
        box-sizing:border-box;
        position:fixed;
        z-index:121;
        top:env(safe-area-inset-top);
        right:0;
        left:0;
        min-height:62px;
        gap:8px;
        margin:0;
        padding:7px 10px;
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial {
        padding-inline:6px;
    }

    body.is-native-app.quiz-screen-active .native-quiz-tutorial #native-quiz-tutorial-label {
        display:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        min-width:64px;
        min-height:46px;
        justify-content:flex-start;
        gap:3px;
        padding:0 8px 0 4px;
        border:0;
        background:transparent;
        font-size:12px;
        font-weight:780;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:22px;
        height:22px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .answer-confirm-row:not(.exam-answer-controls) {
        box-sizing:border-box;
        position:fixed;
        z-index:130;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        max-width:none;
        min-height:74px;
        display:grid;
        grid-template-columns:52px minmax(0, 1fr) 68px 52px;
        grid-template-areas:"back confirm unsure next";
        align-items:center;
        gap:8px;
        margin:0;
        padding:9px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls):not(:has(.answer-unsure-btn)) {
        grid-template-columns:52px minmax(0, 1fr) 52px;
        grid-template-areas:"back confirm next";
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .confirm-answer-btn:not(.answer-nav-btn) {
        width:100%;
        min-width:0;
        min-height:50px;
        padding:8px;
        border-radius:8px;
        font-size:12.5px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row:not(.exam-answer-controls) .answer-unsure-btn {
        width:68px;
        min-width:68px;
        min-height:34px;
        height:34px;
        padding:0 7px;
        border-radius:7px;
        font-size:10.5px;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-next,
    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-finish {
        box-sizing:border-box;
        width:52px;
        min-width:52px;
        height:52px;
        min-height:52px;
        padding:0;
        border-width:1px;
        border-radius:8px;
    }

    body.is-native-app.quiz-screen-active .exam-answer-controls {
        grid-template-columns:auto minmax(0, 1fr);
        grid-template-areas:"exam-nav exam-submit";
    }

    body.is-native-app.quiz-screen-active.native-exam-quiz .progress-summary-row {
        grid-template-columns:34px minmax(0, 1fr) 34px;
        grid-template-areas:
            "mode mode mode"
            "previous summary next"
            "reviews reviews reviews";
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster {
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control {
        min-width:0;
        flex:1 1 auto;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button {
        min-width:0;
        padding-inline:8px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .course-cue-badge {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .timer-pill {
        min-width:0;
        max-width:86px;
        flex:0 1 auto;
        padding-inline:8px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right[hidden] {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .progress-review-cluster {
        width:auto;
        max-width:100%;
        display:flex;
        justify-self:center;
        gap:6px;
    }

    body.is-native-app.quiz-screen-active .progress-status-shortcuts {
        width:auto;
        max-width:100%;
        display:flex;
        padding:2px;
    }

    body.is-native-app.quiz-screen-active .progress-status-btn {
        width:auto;
        min-width:0;
        height:27px;
        display:flex;
        gap:3px;
        padding-inline:6px;
        font-size:10.5px;
    }

    body.is-native-app.quiz-screen-active .progress-status-btn strong {
        min-width:0;
        font-size:10.5px;
    }

    body.is-native-app.quiz-screen-active .progress-status-icon {
        font-size:11px;
    }

    body.is-native-app.quiz-screen-active .quiz-main-layout,
    body.is-native-app.quiz-screen-active .quiz-content {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        align-self:stretch;
    }

    body.is-native-app.quiz-screen-active .quiz-main-layout {
        align-items:stretch;
    }

    body.is-native-app.quiz-screen-active .quiz-card,
    body.is-native-app.quiz-screen-active .quiz-card.is-compact-quiz-header {
        box-sizing:border-box;
        width:100%;
        max-width:100%;
        margin:0;
        padding:22px 4px calc(94px + env(safe-area-inset-bottom));
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        overflow:visible;
    }

    body.is-native-app.quiz-screen-active .quiz-card-body,
    body.is-native-app.quiz-screen-active .quiz-question-column,
    body.is-native-app.quiz-screen-active #question,
    body.is-native-app.quiz-screen-active #answers,
    body.is-native-app.quiz-screen-active .answer-text,
    body.is-native-app.quiz-screen-active .exam-intro-panel,
    body.is-native-app.quiz-screen-active .exam-review-panel {
        min-width:0;
        max-width:100%;
    }

    body.is-native-app.quiz-screen-active .quiz-loading-state {
        display:flex;
        align-items:center;
        gap:10px;
        min-height:44px;
        padding:12px 0;
        border:0;
        color:color-mix(in srgb, var(--text) 72%, transparent);
        font-size:14px;
        font-weight:700;
    }

    body.is-native-app.quiz-screen-active .quiz-loading-spinner {
        box-sizing:border-box;
        width:20px;
        height:20px;
        flex:0 0 20px;
        border:2px solid color-mix(in srgb, var(--accent) 22%, transparent);
        border-top-color:var(--accent);
        border-radius:50%;
        animation:native-practice-loading-spin 0.72s linear infinite;
    }

    @keyframes native-practice-loading-spin {
        to {
            transform:rotate(360deg);
        }
    }

    body.is-native-app.quiz-screen-active #question,
    body.is-native-app.quiz-screen-active .answer-text,
    body.is-native-app.quiz-screen-active .exam-intro-panel,
    body.is-native-app.quiz-screen-active .exam-review-panel {
        overflow-wrap:anywhere;
        word-break:normal;
    }

    body.is-native-app.quiz-screen-active #q-counter,
    body.is-native-app.quiz-screen-active #question {
        box-sizing:border-box;
        padding-right:48px;
    }

    body.is-native-app.quiz-screen-active .exam-intro-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }

    body.is-native-app.quiz-screen-active .exam-intro-grid .exam-intro-stat {
        min-height:0;
        padding:11px 12px;
    }

    body.is-native-app.quiz-screen-active .exam-intro-grid .exam-intro-mode {
        grid-column:1 / -1;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    body.is-native-app.quiz-screen-active .exam-intro-grid .exam-intro-mode strong {
        min-width:0;
        margin-top:0;
        font-size:15px;
        text-align:right;
    }

    body.is-native-app .flag-question-btn.is-active,
    body.is-native-app .flag-question-btn.is-active:hover,
    body.is-native-app .flag-question-btn.is-active:active,
    body.is-native-app .flag-question-btn.is-active:focus-visible {
        border-color:var(--flag);
        background:var(--warning-soft);
        color:var(--flag);
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--flag) 28%, transparent);
    }

    body.is-native-app.public-screen .landing-hero-night-trial {
        width:100vw;
        max-width:100vw;
        min-height:100dvh;
        margin-left:calc(50% - 50vw);
        background-color:#030811;
        background-image:
            linear-gradient(180deg, rgba(1,5,12,0.12), rgba(1,5,12,0.32)),
            url("assets/landing-hero-front-app.webp");
        background-position:center, center;
        background-size:cover, cover;
        background-repeat:no-repeat;
    }

    body.is-native-app.public-screen .landing-hero-night-trial::before {
        display:none;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        min-height:100dvh;
    }

    /* Keep the native landing actions directly above the bottom safe area. */
    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-panel {
        bottom:calc(12px + env(safe-area-inset-bottom));
    }

    body.is-native-app.public-screen .landing-hero-choices,
    body.is-native-app.public-screen .landing-hero-choice-actions {
        width:100%;
    }

    body.is-native-app.quiz-screen-active .exam-answer-controls {
        grid-template-columns:auto minmax(0, 1fr) auto;
        grid-template-areas:"exam-nav . exam-submit";
    }

    body.is-native-app.quiz-screen-active .exam-submit-cluster {
        width:auto;
        min-width:0;
        grid-area:exam-submit;
        justify-self:end;
        justify-content:flex-end;
        margin:0;
    }

    body.is-native-app.quiz-screen-active .exam-submit-inline-btn {
        box-sizing:border-box;
        width:auto;
        min-width:84px;
        min-height:36px;
        height:36px;
        padding:0 10px;
        border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
        border-radius:7px;
        background:transparent !important;
        color:color-mix(in srgb, var(--text) 82%, var(--accent));
        -webkit-text-fill-color:color-mix(in srgb, var(--text) 82%, var(--accent));
        font-size:10.5px;
        font-weight:760;
        box-shadow:none;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .question-card-actions.is-native-question-toolbar {
        box-sizing:border-box;
        position:absolute !important;
        z-index:6;
        top:4px !important;
        right:4px !important;
        left:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:4px !important;
        width:calc(100% - 8px);
        min-width:0;
        max-width:none;
        min-height:40px;
        display:flex;
        align-items:flex-start;
        justify-content:flex-end;
        gap:6px;
        margin:0;
        padding:0;
        transform:none !important;
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group {
        box-sizing:border-box;
        width:max-content;
        min-width:40px;
        max-width:100%;
        height:40px;
        min-height:40px;
        max-height:40px;
        gap:6px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        pointer-events:auto;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-resources {
        grid-column:1;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-resources::-webkit-scrollbar {
        display:none;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-tools {
        position:relative;
        width:max-content;
        min-width:40px;
        max-width:100%;
        justify-content:flex-end;
        margin-left:auto;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .native-formula-action-btn {
        width:auto;
        min-width:64px;
        height:40px;
        min-height:40px;
        padding:0 10px;
        border-radius:8px;
    }

    body.is-native-app.quiz-screen-active .question-action-menu-native {
        position:relative;
        width:40px;
        min-width:40px;
        max-width:40px;
        height:40px;
        margin:0;
    }

    body.is-native-app.quiz-screen-active #question-action-menu-toggle {
        position:absolute !important;
        top:0 !important;
        right:0 !important;
        left:auto !important;
        margin:0;
    }

    body.is-native-app.quiz-screen-active #formula-container {
        top:50px;
        right:4px;
        width:calc(100% - 8px);
        max-height:min(58vh, 460px);
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-btn {
        box-sizing:border-box;
        min-height:40px;
        flex:0 0 auto;
        padding:0 9px;
        border-radius:8px;
        font-size:11px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn {
        min-width:84px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .icon-action-btn {
        width:40px;
        min-width:40px;
        padding:0;
    }

    body.is-native-app.quiz-screen-active .question-action-menu-native .native-question-action-menu-panel {
        top:calc(100% + 6px);
        right:0;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .flag-icon {
        width:16px;
        height:18px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-btn:disabled {
        cursor:default;
        opacity:0.38;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .native-clear-question-btn {
        min-width:46px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .native-clear-all-btn {
        min-width:58px;
        border-color:color-mix(in srgb, var(--wrong) 42%, var(--border));
        color:color-mix(in srgb, var(--wrong) 84%, var(--text));
    }

    body.is-native-app.quiz-screen-active .quiz-card.has-native-formula-action #q-counter,
    body.is-native-app.quiz-screen-active .quiz-card.has-native-formula-action #question {
        padding-right:112px;
    }

}

/* Final native dashboard selector overrides. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .course-access-list {
        min-height:48px;
        gap:3px;
        padding:3px;
        overflow:hidden;
        border-radius:7px;
        background:var(--control);
    }

    body.is-native-app:not(.public-screen) .course-access-pill,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active),
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):hover,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):focus-visible {
        min-height:40px;
        margin:0;
        padding:0 7px;
        border-radius:6px;
        background:transparent;
        background-image:none;
        filter:none;
        clip-path:none;
        transform:none;
    }

    body.is-native-app:not(.public-screen) .course-access-copy {
        position:static;
        min-height:0;
        display:block;
        transform:none;
    }

    body.is-native-app:not(.public-screen) .course-access-title {
        font-size:13px;
        line-height:1;
        text-shadow:none;
    }

    body.is-native-app:not(.public-screen) .course-access-pill.active,
    body.is-native-app:not(.public-screen) .course-access-pill.active:hover,
    body.is-native-app:not(.public-screen) .course-access-pill.active:focus-visible,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        min-height:40px;
        background:var(--active-fill);
        filter:none;
        transform:none;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill {
        color:#334155;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill.active,
    body.light.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        color:#0f172a;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill .course-access-title,
    body.light.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active) .course-access-title,
    body.light.is-native-app:not(.public-screen) .course-access-pill.is-locked.active .course-access-title {
        color:inherit;
    }

    body.light.is-native-app:not(.public-screen) .course-access-list {
        border:1px solid #cbd5e1;
        background:#e2e8f0;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard {
        overflow:visible;
    }
}

/* Native cart: compact header action and full-height sheet. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) {
        padding-top:calc(52px + env(safe-area-inset-top));
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn + .nav-btn {
        margin-left:0;
    }

    body.is-native-app:not(.public-screen) .native-app-toolbar {
        box-sizing:border-box;
        position:fixed;
        z-index:100;
        top:0;
        right:0;
        left:0;
        min-height:calc(52px + env(safe-area-inset-top));
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
        border-bottom:1px solid color-mix(in srgb, var(--border) 90%, transparent);
        background:color-mix(in srgb, var(--bg) 95%, transparent);
        box-shadow:0 8px 22px rgba(0,0,0,0.12);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
    }

    body.is-native-app:not(.public-screen) .native-toolbar-brand {
        min-width:0;
        min-height:40px;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:0;
        border:0;
        background:transparent;
        color:var(--text);
        cursor:pointer;
        font:inherit;
        font-size:14px;
        font-weight:850;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-brand .wind-logo {
        width:18px;
        height:9px;
        flex:0 0 auto;
        background:url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
        opacity:0.62;
        filter:saturate(0.72) brightness(0.9);
        transform:scaleX(0.8);
        transform-origin:center;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-brand .wind-logo::before,
    body.is-native-app:not(.public-screen) .native-toolbar-brand .wind-logo::after {
        display:none;
    }

    body.is-native-app .question-report-head > button {
        box-sizing:border-box;
        position:relative;
        width:32px;
        min-width:32px;
        max-width:32px;
        height:32px;
        min-height:32px;
        flex:0 0 32px;
        display:grid;
        place-items:center;
        padding:0;
        overflow:hidden;
        font-size:0;
        line-height:0;
    }

    body.is-native-app .question-report-head > button::before,
    body.is-native-app .question-report-head > button::after {
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        width:14px;
        height:2px;
        border-radius:999px;
        background:currentColor;
        transform:translate(-50%, -50%) rotate(45deg);
    }

    body.is-native-app .question-report-head > button::after {
        transform:translate(-50%, -50%) rotate(-45deg);
    }

    body.is-native-app:not(.public-screen) .native-cart-header-btn {
        position:relative;
        width:40px;
        height:40px;
        flex:0 0 40px;
        display:grid;
        place-items:center;
        padding:0;
        border:1px solid var(--border);
        border-radius:7px;
        background:var(--control);
        color:var(--text);
        cursor:pointer;
    }

    body.is-native-app:not(.public-screen) .native-cart-header-btn.is-active {
        border-color:color-mix(in srgb, var(--accent) 60%, var(--border));
        background:var(--active-fill);
        color:var(--active-ink);
    }

    body.is-native-app:not(.public-screen) .native-cart-header-btn svg {
        width:21px;
        height:21px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app:not(.public-screen) .native-cart-count {
        position:absolute;
        top:-4px;
        right:-4px;
        box-sizing:border-box;
        min-width:17px;
        height:17px;
        display:grid;
        place-items:center;
        padding:0 4px;
        border:2px solid var(--bg);
        border-radius:999px;
        background:#f59e0b;
        color:#101827;
        font-size:9px;
        font-weight:900;
        line-height:1;
    }

    body.is-native-app.quiz-screen-active {
        padding-top:0;
    }

    body.is-native-app.quiz-screen-active .native-app-toolbar {
        display:none;
    }

    body.is-native-app.quiz-screen-active .content-wrapper {
        padding-top:calc(72px + env(safe-area-inset-top));
    }

    body.is-native-app.quiz-screen-active .native-quiz-header {
        top:0;
        min-height:calc(62px + env(safe-area-inset-top));
        padding:calc(7px + env(safe-area-inset-top)) 10px 7px;
        background:color-mix(in srgb, var(--bg) 98%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-cart-count[hidden] {
        display:none;
    }

    body.is-native-app:not(.public-screen).native-cart-open {
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot {
        position:fixed;
        z-index:180;
        inset:0;
        display:block;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart {
        position:static;
        z-index:auto;
        width:auto;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-tab {
        display:none;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .native-cart-backdrop {
        position:fixed;
        z-index:0;
        inset:0 0 calc(64px + env(safe-area-inset-bottom));
        border:0;
        display:none;
        background:rgba(1, 6, 15, 0.68);
        cursor:pointer;
        pointer-events:auto;
        backdrop-filter:blur(2px);
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart.is-open .native-cart-backdrop {
        display:block;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-panel {
        position:fixed;
        z-index:1;
        top:0;
        right:0;
        bottom:calc(70px + env(safe-area-inset-bottom));
        left:0;
        width:auto;
        max-height:none;
        overflow-y:auto;
        border-top:0;
        border-right:0;
        border-left:0;
        border-radius:0 0 8px 8px;
        pointer-events:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart.is-open .floating-cart-panel {
        display:flex;
        flex-direction:column;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-head {
        position:sticky;
        z-index:2;
        top:0;
        flex:0 0 auto;
        padding-top:calc(14px + env(safe-area-inset-top));
        background:color-mix(in srgb, var(--card) 96%, var(--accent));
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-minimize {
        box-sizing:border-box;
        width:40px;
        height:40px;
        flex:0 0 40px;
        padding:0;
        display:grid;
        place-items:center;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-minimize > span {
        display:none;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-close-icon {
        width:20px;
        height:20px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-items {
        max-height:min(38dvh, 320px);
        flex:0 1 auto;
        padding:6px 18px 2px;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item {
        min-height:76px;
        gap:18px;
        padding:16px 0 16px 15px;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item::before {
        top:16px;
        bottom:16px;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item-copy strong {
        font-size:15px;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item-actions {
        min-width:72px;
    }

    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item-actions > strong,
    body.is-native-app:not(.public-screen) .native-cart-slot .floating-cart-item .cart-item-upgrade-price {
        font-size:16px;
    }

    body.is-native-app:not(.public-screen) .native-cart-empty {
        min-height:0;
        display:flex;
        flex:1 1 auto;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:32px 24px;
        text-align:center;
    }

    body.is-native-app:not(.public-screen) .native-cart-empty-icon {
        width:46px;
        height:46px;
        margin-bottom:18px;
        background:color-mix(in srgb, var(--text) 66%, var(--accent));
        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2H4l2.66 12.39A2 2 0 0 0 8.62 16h8.76a2 2 0 0 0 1.96-1.61L21 6H5.12'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2H4l2.66 12.39A2 2 0 0 0 8.62 16h8.76a2 2 0 0 0 1.96-1.61L21 6H5.12'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    }

    body.is-native-app:not(.public-screen) .native-cart-empty strong {
        color:var(--text);
        font-size:19px;
    }

    body.is-native-app:not(.public-screen) .native-cart-empty p {
        max-width:260px;
        margin:8px 0 22px;
        color:color-mix(in srgb, var(--text) 64%, transparent);
        font-size:14px;
        line-height:1.5;
    }

    body.is-native-app:not(.public-screen) .native-cart-empty button {
        min-height:44px;
        padding:0 18px;
        border:1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
        border-radius:7px;
        background:var(--active-fill);
        color:var(--active-ink);
        cursor:pointer;
        font:inherit;
        font-size:14px;
        font-weight:850;
    }
}

/* Native app: text-only course tabs and icon-only active navigation. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .subscription-card {
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-list {
        min-height:52px;
        gap:0;
        padding:0 6px;
        overflow:visible;
        border:0 !important;
        border-bottom:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill,
    body.is-native-app:not(.public-screen) .course-access-pill.active,
    body.is-native-app:not(.public-screen) .course-access-pill.active:hover,
    body.is-native-app:not(.public-screen) .course-access-pill.active:focus-visible,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active),
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):hover,
    body.is-native-app:not(.public-screen) .course-access-list:has(.course-access-pill.active) .course-access-pill:not(.active):focus-visible {
        position:relative;
        width:100%;
        min-width:0;
        min-height:52px;
        margin:0;
        padding:0 4px;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
        clip-path:none;
        filter:none !important;
        transform:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill::before {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill::after {
        content:"";
        position:absolute;
        z-index:3;
        top:auto;
        right:auto;
        bottom:-1px;
        left:50%;
        width:0;
        height:3px;
        display:block !important;
        border-radius:3px 3px 0 0;
        background:currentColor;
        opacity:0;
        transform:translateX(-50%);
        transition:width 150ms ease, opacity 150ms ease;
        pointer-events:none;
    }

    body.is-native-app:not(.public-screen) .course-access-pill.active::after,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active::after {
        width:44px;
        opacity:1;
    }

    body.is-native-app:not(.public-screen) .course-lock-tag,
    body.is-native-app:not(.public-screen) .course-days-badge {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-copy {
        position:static !important;
        min-height:0;
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        transform:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-validity {
        display:block !important;
        max-width:100%;
        overflow:hidden;
        color:color-mix(in srgb, currentColor 62%, transparent);
        font-size:8.5px;
        font-weight:600;
        line-height:1.15;
        text-align:center;
        text-overflow:ellipsis;
        white-space:nowrap;
        text-shadow:none;
    }

    body.is-native-app:not(.public-screen) .course-access-validity > span {
        display:none;
    }

    body.is-native-app:not(.public-screen) .course-access-title {
        color:inherit !important;
        font-size:16px !important;
        font-weight:800;
        line-height:1;
        text-shadow:none !important;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .course-access-full-title {
        display:none !important;
    }

    body.is-native-app:not(.public-screen) .course-access-short-title {
        display:inline !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked {
        color:color-mix(in srgb, var(--text) 62%, transparent);
    }

    body.is-native-app:not(.public-screen) .course-access-pill.active,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        color:#60a5fa;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill,
    body.light.is-native-app:not(.public-screen) .course-access-pill.is-locked {
        color:#64748b;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill.active,
    body.light.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        color:#2563eb;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:hover,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn:focus-visible,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:hover,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:focus-visible {
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
        filter:none !important;
        transform:none !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active .nav-icon {
        stroke-width:2.45;
        filter:drop-shadow(0 0 5px color-mix(in srgb, currentColor 32%, transparent));
    }

    /* Native dashboard: quiet, edge-to-edge subject navigation. */
    body.is-native-app:not(.public-screen) #dashboard-subject-grid {
        gap:0;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        padding:0 4px 28px;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-action {
        box-sizing:border-box;
        width:100%;
        min-height:64px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 28px;
        align-items:center;
        gap:12px;
        margin:4px 0 16px;
        padding:10px 14px;
        border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
        border-radius:8px;
        background:color-mix(in srgb, var(--accent) 8%, var(--card));
        color:var(--text);
        cursor:pointer;
        font:inherit;
        text-align:left;
        box-shadow:none;
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-action:active {
        border-color:color-mix(in srgb, var(--accent) 46%, var(--border));
        background:color-mix(in srgb, var(--accent) 13%, var(--card));
        transform:none;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-action:focus-visible {
        outline:2px solid color-mix(in srgb, var(--accent) 48%, transparent);
        outline-offset:2px;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-copy {
        min-width:0;
        display:grid;
        gap:1px;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-copy small {
        color:color-mix(in srgb, var(--accent) 78%, var(--text));
        font-size:10px;
        font-weight:780;
        line-height:1.2;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-copy strong {
        overflow:hidden;
        font-size:15px;
        font-weight:780;
        line-height:1.25;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-copy > span {
        color:color-mix(in srgb, var(--text) 58%, transparent);
        font-size:11px;
        font-weight:560;
        line-height:1.2;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-copy > .native-continue-study-validity {
        color:color-mix(in srgb, var(--accent) 58%, var(--text));
        font-size:10px;
        font-weight:620;
    }

    body.is-native-app:not(.public-screen) .native-continue-study-action > i {
        width:9px;
        height:9px;
        justify-self:center;
        color:color-mix(in srgb, var(--accent) 70%, var(--text));
        border-top:2px solid currentColor;
        border-right:2px solid currentColor;
        transform:rotate(45deg);
    }

    body.is-native-app:not(.public-screen) .native-course-plans {
        margin-top:0;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle,
    body.is-native-app:not(.public-screen) .native-course-plans-heading {
        min-height:52px;
        grid-template-columns:minmax(0, 1fr) 18px;
        gap:10px;
        padding:7px 4px;
        border:0;
        border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle > span:first-child {
        gap:2px;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle strong,
    body.is-native-app:not(.public-screen) .native-course-plans-heading strong {
        font-size:14px;
        font-weight:720;
        text-transform:none;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle small,
    body.is-native-app:not(.public-screen) .native-course-plans-heading small {
        color:color-mix(in srgb, var(--text) 58%, transparent);
        font-size:11px;
        line-height:1.25;
    }

    body.is-native-app:not(.public-screen) .native-course-plans-toggle i {
        justify-self:center;
        color:color-mix(in srgb, var(--text) 64%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-list {
        margin:6px 0 2px;
        border:0;
        border-radius:0;
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row {
        min-height:58px;
        padding:8px 4px;
        border-bottom:1px solid color-mix(in srgb, var(--border) 68%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row + .native-course-plan-row {
        border-top:0;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row.is-featured {
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .native-course-plan-row > button {
        min-width:62px;
        min-height:36px;
        border-radius:6px;
    }

    body.is-native-app:not(.public-screen) .native-subject-section {
        margin-top:17px;
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        margin:10px 0 0;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius:8px;
        background:var(--card);
    }

    body.is-native-app:not(.public-screen) .native-subject-section > h3 {
        margin:0 0 3px;
        padding:0 4px;
        color:color-mix(in srgb, var(--text) 60%, transparent);
        font-size:12px;
        font-weight:720;
        line-height:1.3;
        text-transform:none;
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section > h3 {
        margin:0;
        padding:11px 12px 8px;
        border-bottom:1px solid color-mix(in srgb, var(--border) 58%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-continue-section > h3 {
        color:var(--accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-list,
    body.is-native-app:not(.public-screen) .native-locked-subject-list {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section .native-subject-list {
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry,
    body.is-native-app:not(.public-screen) .native-subject-entry + .native-subject-entry {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        border:0;
        border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry:first-child {
        border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section .native-subject-entry:first-child {
        border-top:0;
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section .native-subject-entry:last-child {
        border-bottom:0;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.is-continue {
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .native-subject-row {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:64px;
        grid-template-columns:minmax(0, 1fr) 24px;
        gap:8px;
        padding:10px 4px;
        border-radius:0;
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .native-subject-purchase-row {
        grid-template-columns:minmax(0, 1fr) minmax(56px, auto);
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-subject-purchase-row .native-subject-copy {
        min-width:0;
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-subject-add-btn {
        min-width:56px;
        max-width:64px;
        min-height:36px;
        justify-self:end;
        padding:0 8px;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .native-subject-entry.has-offline-control .native-subject-row {
        padding-right:48px;
    }

    body.is-native-app:not(.public-screen) .native-my-subjects-section .native-subject-row {
        padding-left:12px;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy {
        gap:3px;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy > strong {
        font-size:15px;
        font-weight:720;
        line-height:1.22;
    }

    body.is-native-app:not(.public-screen) .native-subject-copy > span:not(.native-subject-progress) {
        color:color-mix(in srgb, currentColor 70%, transparent);
        font-size:11px;
        font-weight:500;
        line-height:1.25;
    }

    body.is-native-app:not(.public-screen) .native-subject-progress {
        height:2px;
        margin-top:4px;
    }

    body.is-native-app:not(.public-screen) .native-subject-row-tail {
        width:24px;
        height:24px;
    }

    body.is-native-app:not(.public-screen) .native-subject-chevron {
        width:7px;
        height:7px;
        border-width:1.5px;
        opacity:0.48;
    }

    body.is-native-app:not(.public-screen) .native-offline-subject-btn {
        top:50%;
        right:-4px;
        width:44px;
        height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        font-size:20px;
        font-weight:650;
        line-height:1;
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .native-offline-icon-wrap {
        width:24px;
        height:24px;
        display:grid;
        place-items:center;
        line-height:1;
    }

    body.is-native-app:not(.public-screen) .native-offline-icon {
        width:22px;
        height:22px;
        display:block;
        overflow:visible;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app:not(.public-screen) .native-offline-loading-mark {
        display:block;
        line-height:1;
        transform:translateY(-2px);
    }

    body.is-native-app:not(.public-screen) .native-offline-subject-btn:active {
        opacity:0.55;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects {
        margin-top:16px;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle {
        min-height:48px;
        grid-template-columns:minmax(0, 1fr) 18px;
        gap:10px;
        padding:0 4px;
        border:0;
        border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle strong {
        font-size:14px;
        font-weight:700;
        text-transform:none;
    }

    body.is-native-app:not(.public-screen) .native-locked-subjects-toggle i {
        justify-self:center;
        color:color-mix(in srgb, var(--text) 64%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-locked-subject-list {
        margin-top:5px;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        margin-top:16px;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
        border-radius:8px;
        background:linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 12%, var(--card)),
            var(--card) 72%
        );
        box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle {
        box-sizing:border-box;
        width:100%;
        min-height:72px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) 20px;
        align-items:center;
        gap:12px;
        padding:12px 14px;
        border:0;
        border-radius:0;
        background:color-mix(in srgb, var(--accent) 6%, transparent);
        color:var(--text);
        cursor:pointer;
        font:inherit;
        text-align:left;
        -webkit-tap-highlight-color:transparent;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle > span {
        min-width:0;
        display:grid;
        gap:2px;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle strong {
        color:color-mix(in srgb, var(--accent) 86%, var(--text));
        font-size:15px;
        font-weight:820;
        line-height:1.2;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle small {
        overflow:hidden;
        color:color-mix(in srgb, var(--text) 72%, transparent);
        font-size:11px;
        font-weight:560;
        line-height:1.2;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle > i {
        width:8px;
        height:8px;
        justify-self:center;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        color:color-mix(in srgb, var(--accent) 76%, var(--text));
        transform:translateY(-2px) rotate(45deg);
        transition:transform 150ms ease;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle[aria-expanded="true"] > i {
        transform:translateY(2px) rotate(225deg);
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-toggle[aria-expanded="true"] {
        background:color-mix(in srgb, var(--accent) 11%, transparent);
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-content {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        padding:0 10px 10px;
        overflow:hidden;
        border-top:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore-content[hidden] {
        display:none;
    }

    body.is-native-app:not(.public-screen) .native-course-plans.is-embedded {
        width:100%;
        min-width:0;
        max-width:100%;
        margin:0;
    }

    body.is-native-app:not(.public-screen) .native-course-plans.is-embedded > h3,
    body.is-native-app:not(.public-screen) .native-explore-subjects > h3 {
        margin:0;
        padding:10px 4px 5px;
        color:color-mix(in srgb, var(--text) 62%, transparent);
        font-size:11px;
        font-weight:720;
        line-height:1.25;
    }

    body.is-native-app:not(.public-screen) .native-course-plans.is-embedded .native-course-plan-list {
        width:100%;
        min-width:0;
        max-width:100%;
        margin:0;
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-explore-subjects {
        width:100%;
        min-width:0;
        max-width:100%;
        margin-top:6px;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-course-plan-row {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-locked-subject-list {
        overflow:hidden;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-subject-entry:last-child,
    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-course-plan-row:last-child {
        border-bottom:0;
    }

    /* Native landing: unfiltered aircraft image and balanced wordmark. */
    body.is-native-app.public-screen .landing-hero-night-trial {
        background-color:#030811;
        background-image:url("assets/landing-hero-front-app.webp") !important;
        background-position:center -24px !important;
        background-size:auto calc(100% + 24px) !important;
        background-repeat:no-repeat !important;
        background-blend-mode:normal !important;
        filter:none !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial::before,
    body.is-native-app.public-screen .landing-hero-night-trial::after {
        content:none !important;
        display:none !important;
        background:none !important;
        opacity:0 !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .mobile-landing-brand {
        width:max-content;
        max-width:calc(100vw - 32px);
        gap:8px;
        letter-spacing:0 !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        width:max-content;
        font-size:73px !important;
        line-height:0.88;
        letter-spacing:0 !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        width:max-content;
        max-width:calc(100vw - 32px);
        flex-wrap:nowrap;
        letter-spacing:0 !important;
        white-space:nowrap;
    }
}

/* Native practice uses one stable primary action: Confirm becomes Next. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-practice-answer-controls,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .native-practice-answer-controls,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls:not(.exam-answer-controls):not(:has(.answer-unsure-btn)) {
        grid-template-columns:52px minmax(64px, 0.7fr) minmax(118px, 1.3fr) !important;
        grid-template-areas:"back secondary primary" !important;
        gap:8px !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-prev {
        grid-area:back !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-unsure-btn,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-why-btn {
        grid-area:secondary !important;
        box-sizing:border-box;
        width:100% !important;
        min-width:0 !important;
        height:40px !important;
        min-height:40px !important;
        justify-self:stretch;
        padding:0 7px;
        border-radius:8px;
        font-size:11px;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action {
        grid-area:primary !important;
        box-sizing:border-box;
        width:100% !important;
        min-width:0 !important;
        min-height:52px !important;
        padding:8px 12px;
        border-radius:8px;
        font-size:13px;
        white-space:nowrap;
    }

    body.is-native-app .explanation-overlay {
        box-sizing:border-box;
        /* Keep short explanations centered in the app while allowing long
           concept explanations to use the available scroll height. */
        place-items:center;
        padding:
            calc(env(safe-area-inset-top) + 10px)
            max(10px, env(safe-area-inset-right))
            calc(env(safe-area-inset-bottom) + 10px)
            max(10px, env(safe-area-inset-left));
    }

    body.is-native-app .explanation-modal {
        max-height:calc(
            100dvh
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
            - 20px
        );
    }

    body.is-native-app .explanation-modal-close {
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster {
        --native-mode-toggle-width:clamp(136px, 38vw, 148px);
        --native-exam-timer-width:clamp(76px, 22vw, 88px);
        width:100%;
        max-width:100%;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        overflow:visible;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control {
        box-sizing:border-box;
        width:var(--native-mode-toggle-width);
        min-width:var(--native-mode-toggle-width);
        max-width:var(--native-mode-toggle-width);
        flex:0 0 var(--native-mode-toggle-width);
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button {
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:none;
        padding-inline:6px;
    }

    body.is-native-app.quiz-screen-active #exam-timer {
        box-sizing:border-box;
        width:var(--native-exam-timer-width);
        min-width:var(--native-exam-timer-width);
        max-width:var(--native-exam-timer-width);
        height:40px;
        min-height:40px;
        flex:0 0 var(--native-exam-timer-width);
        justify-content:center;
        padding:0 8px;
        border-radius:8px;
        font-size:14px;
    }

    body.is-native-app.quiz-screen-active #exam-pause-btn {
        box-sizing:border-box;
        width:68px;
        min-width:68px;
        max-width:68px;
        height:40px;
        min-height:40px;
        flex:0 0 68px;
        justify-content:center;
        padding:0 7px;
        border-radius:8px;
        font-size:12px;
    }

    body.is-native-app.quiz-screen-active .progress-shell {
        position:relative;
        margin-bottom:6px;
        padding:4px 6px 7px;
        border:0;
        border-bottom:1px solid color-mix(in srgb, var(--border) 68%, transparent);
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    body.is-native-app.quiz-screen-active .progress-summary-row {
        column-gap:6px;
        row-gap:6px;
        padding-right:0;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control {
        height:34px;
        padding:2px;
        border:0;
        border-radius:8px;
        background:color-mix(in srgb, var(--control) 62%, transparent);
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 46%, transparent);
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button {
        min-height:30px;
        border-radius:6px;
        color:color-mix(in srgb, var(--text) 58%, transparent);
        font-size:12px;
        font-weight:760;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
        background:color-mix(in srgb, var(--accent) 15%, var(--card));
        color:var(--text);
        box-shadow:0 1px 4px rgba(0,0,0,0.16);
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        height:34px;
        padding-inline:11px;
        border:0;
        border-radius:7px;
        background:color-mix(in srgb, var(--control) 52%, transparent);
        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 45%, transparent);
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right {
        box-sizing:border-box;
        padding-right:36px;
    }

    body.is-native-app.quiz-screen-active.native-exam-quiz .quiz-mode-cluster {
        box-sizing:border-box;
        padding-right:36px;
    }

    body.is-native-app.quiz-screen-active .progress-summary {
        gap:4px;
        padding:0 2px;
    }

    body.is-native-app.quiz-screen-active .progress-linear-track {
        height:3px;
        background:color-mix(in srgb, var(--circle) 64%, transparent);
    }

    body.is-native-app.quiz-screen-active .progress-status-shortcuts {
        gap:2px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
    }

    body.is-native-app.quiz-screen-active .progress-review-cluster {
        width:auto;
        max-width:100%;
        display:flex;
        justify-self:center;
        gap:6px;
    }

    body.is-native-app.quiz-screen-active .progress-status-btn {
        height:29px;
        border-radius:7px;
        color:color-mix(in srgb, var(--text) 65%, transparent);
    }

    body.is-native-app.quiz-screen-active .progress-status-btn + .progress-status-btn {
        box-shadow:none;
    }

    body.is-native-app.quiz-screen-active .progress-status-btn:hover:not(:disabled),
    body.is-native-app.quiz-screen-active .progress-status-btn.active {
        background:color-mix(in srgb, var(--accent) 11%, transparent);
        color:var(--text);
    }

    body.is-native-app.quiz-screen-active .progress-map-toggle {
        width:46px;
        min-width:46px;
        height:38px;
        border:1px solid color-mix(in srgb, var(--accent) 82%, var(--border));
        border-radius:8px;
        background:color-mix(in srgb, var(--accent) 18%, var(--control));
        box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 5px 16px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    body.is-native-app.quiz-screen-active .progress-map-toggle-label {
        display:none;
    }

    body.is-native-app.quiz-screen-active .progress-map-panel {
        margin-top:6px;
        padding:10px 4px 4px;
        border:0;
        border-top:1px solid color-mix(in srgb, var(--border) 62%, transparent);
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-controls-toggle {
        box-sizing:border-box;
        position:absolute;
        z-index:4;
        top:6px;
        right:8px;
        width:32px;
        min-width:32px;
        height:32px;
        min-height:32px;
        display:grid;
        place-items:center;
        padding:0;
        border:0;
        border-radius:7px;
        background:transparent;
        color:color-mix(in srgb, var(--text) 72%, transparent);
        cursor:pointer;
    }

    body.is-native-app.quiz-screen-active .native-quiz-controls-toggle[hidden] {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-controls-toggle > span {
        display:none;
    }

    body.is-native-app.quiz-screen-active .native-quiz-controls-toggle svg {
        width:18px;
        height:18px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        transform:rotate(180deg);
        transition:transform 160ms ease;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed {
        min-height:40px;
        padding:4px 8px;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .progress-summary-row,
    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .progress-map-panel {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .native-quiz-controls-toggle {
        position:static;
        width:100%;
        min-width:0;
        height:32px;
        grid-template-columns:minmax(0, 1fr) 20px;
        gap:8px;
        padding:0 8px;
        border:0;
        background:transparent;
        text-align:left;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .native-quiz-controls-toggle > span {
        min-width:0;
        display:block;
        overflow:hidden;
        color:color-mix(in srgb, var(--text) 72%, transparent);
        font-size:11px;
        font-weight:720;
        justify-self:stretch;
        text-align:left;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .native-quiz-controls-toggle svg {
        justify-self:end;
        transform:none;
    }
}

/* The native landing page keeps its dark presentation regardless of the signed-in app theme. */
@media (max-width:720px) {
    body.light.is-native-app.public-screen .landing-pricing:has([data-pricing-tab="ppl"].active) {
        --pricing-link-accent:#14b8a6;
        --pricing-link-soft:rgba(20,184,166,0.22);
        --pricing-link-line:rgba(94,234,212,0.82);
    }

    body.light.is-native-app.public-screen .landing-pricing:has([data-pricing-tab="cpl"].active) {
        --pricing-link-accent:#38bdf8;
        --pricing-link-soft:rgba(56,189,248,0.26);
        --pricing-link-line:rgba(125,211,252,0.95);
    }

    body.light.is-native-app.public-screen .landing-pricing:has([data-pricing-tab="night"].active) {
        --pricing-link-accent:#a78bfa;
        --pricing-link-soft:rgba(167,139,250,0.16);
        --pricing-link-line:rgba(167,139,250,0.72);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card {
        border-color:color-mix(in srgb, var(--text) 16%, var(--border));
        background:color-mix(in srgb, var(--control) 95%, var(--bg));
        box-shadow:0 12px 28px rgba(0,0,0,0.24);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card::before {
        background:color-mix(in srgb, var(--text) 22%, transparent);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card.featured,
    body.light.is-native-app.public-screen .landing-pricing .price-card.featured:not(.selected) {
        border-color:color-mix(in srgb, var(--pricing-link-accent) 66%, var(--border));
        background:color-mix(in srgb, var(--pricing-link-accent) 6%, var(--control));
        box-shadow:0 15px 34px rgba(0,0,0,0.26);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card.selected {
        border-color:var(--pricing-link-line);
        background:color-mix(in srgb, var(--pricing-link-accent) 8%, var(--control));
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--pricing-link-accent) 24%, transparent),
            0 18px 38px rgba(0,0,0,0.28);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card:hover::before,
    body.light.is-native-app.public-screen .landing-pricing .price-card:focus-visible::before,
    body.light.is-native-app.public-screen .landing-pricing .price-card.selected::before,
    body.light.is-native-app.public-screen .landing-pricing .price-card.featured::before {
        background:var(--pricing-link-accent);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card-badge {
        color:color-mix(in srgb, var(--text) 72%, var(--pricing-link-accent));
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card p {
        color:color-mix(in srgb, var(--text) 76%, transparent);
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card small {
        color:color-mix(in srgb, var(--text) 66%, transparent);
    }

    body.light.is-native-app.public-screen .landing-pricing .purchase-plan-btn {
        border-color:color-mix(in srgb, var(--pricing-link-accent) 48%, var(--border));
        background:transparent;
        color:var(--text);
        box-shadow:none;
    }

    body.light.is-native-app.public-screen .landing-pricing .price-card.selected .purchase-plan-btn {
        border-color:var(--pricing-link-accent);
        background:var(--pricing-link-accent);
        color:#06131b;
        box-shadow:none;
    }
}

/* Native settings: compact system-style groups with one clear control per row. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) #screen-settings {
        width:100%;
        max-width:100%;
    }

    body.is-native-app:not(.public-screen) .app-settings {
        width:100%;
        max-width:560px;
        padding:10px 2px calc(34px + env(safe-area-inset-bottom));
    }

    body.is-native-app:not(.public-screen) .app-settings-header {
        padding:0 4px 14px;
    }

    body.is-native-app:not(.public-screen) .app-settings-kicker,
    body.is-native-app:not(.public-screen) .app-settings-header p {
        display:none;
    }

    body.is-native-app:not(.public-screen) .app-settings-header h1 {
        font-size:27px;
        font-weight:780;
        letter-spacing:0;
    }

    body.is-native-app:not(.public-screen) .app-settings-profile {
        box-sizing:border-box;
        min-height:64px;
        gap:12px;
        margin:0 0 22px;
        padding:10px 12px;
        border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius:8px;
        background:color-mix(in srgb, var(--card) 78%, var(--bg));
    }

    body.is-native-app:not(.public-screen) .app-settings-avatar {
        width:40px;
        height:40px;
        background:color-mix(in srgb, var(--accent) 20%, var(--control));
        color:color-mix(in srgb, var(--text) 92%, var(--accent));
        font-size:15px;
    }

    body.is-native-app:not(.public-screen) .app-settings-profile > div {
        gap:2px;
    }

    body.is-native-app:not(.public-screen) .app-settings-profile strong {
        font-size:14px;
        font-weight:760;
    }

    body.is-native-app:not(.public-screen) .app-settings-profile span:last-child {
        font-size:12px;
    }

    body.is-native-app:not(.public-screen) .app-settings-group {
        margin-top:18px;
        border:0;
    }

    body.is-native-app:not(.public-screen) .app-settings-group h2 {
        padding:0 5px 7px;
        font-size:10px;
        font-weight:800;
        letter-spacing:0;
    }

    body.is-native-app:not(.public-screen) .app-settings-group-copy,
    body.is-native-app:not(.public-screen) .app-settings-row small {
        display:none;
    }

    body.is-native-app:not(.public-screen) .app-settings-row {
        min-height:56px;
        gap:12px;
        padding:10px 13px;
        border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-bottom:0;
        background:color-mix(in srgb, var(--card) 78%, var(--bg));
    }

    body.is-native-app:not(.public-screen) .app-settings-group > h2 + .app-settings-row,
    body.is-native-app:not(.public-screen) .app-settings-group > .app-settings-group-copy + .app-settings-row {
        border-radius:8px 8px 0 0;
    }

    body.is-native-app:not(.public-screen) .app-settings-group > .app-settings-row:last-child {
        border-bottom:1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius:0 0 8px 8px;
    }

    body.is-native-app:not(.public-screen) .app-settings-group > h2 + .app-settings-row:last-child,
    body.is-native-app:not(.public-screen) .app-settings-group > .app-settings-group-copy + .app-settings-row:last-child {
        border-bottom:1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius:8px;
    }

    body.is-native-app:not(.public-screen) .app-settings-row > span:first-child {
        gap:0;
    }

    body.is-native-app:not(.public-screen) .app-settings-row strong {
        font-size:14px;
        font-weight:680;
    }

    body.is-native-app:not(.public-screen) .app-settings-row select {
        width:auto;
        min-width:94px;
        min-height:38px;
        padding:0 24px 0 8px;
        border:0;
        background:transparent;
        color:color-mix(in srgb, var(--text) 70%, var(--accent));
        font-size:14px;
        font-weight:620;
        text-align:right;
    }

    body.is-native-app:not(.public-screen) .app-settings-value {
        padding:0;
        border-radius:0;
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .app-settings-switch {
        position:relative;
        width:46px;
        height:28px;
        flex:0 0 46px;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius:999px;
        background:color-mix(in srgb, var(--text) 16%, var(--control));
        color:transparent;
        font-size:0;
        transition:background 160ms ease, border-color 160ms ease;
    }

    body.is-native-app:not(.public-screen) .app-settings-switch::after {
        content:"";
        position:absolute;
        top:3px;
        left:3px;
        width:20px;
        height:20px;
        border-radius:50%;
        background:#ffffff;
        box-shadow:0 1px 4px rgba(0,0,0,0.28);
        transition:transform 160ms ease;
    }

    body.is-native-app:not(.public-screen):not(.light) .app-settings-switch {
        border-color:color-mix(in srgb, var(--accent) 82%, var(--border));
        background:var(--accent);
    }

    body.is-native-app:not(.public-screen):not(.light) .app-settings-switch::after {
        transform:translateX(18px);
    }

    body.is-native-app:not(.public-screen) .app-settings-chevron {
        width:8px;
        height:8px;
        border-width:1.5px;
    }

    body.is-native-app:not(.public-screen) .app-settings-logout .app-settings-chevron {
        display:none;
    }

    body.is-native-app:not(.public-screen) .app-settings-admin-group {
        margin-top:24px;
        padding-top:0;
    }

    body.is-native-app:not(.public-screen) .app-settings-row:active {
        background:color-mix(in srgb, var(--accent) 8%, var(--card));
    }
}

/* Website practice mirrors the app's stable Back / secondary / primary flow. */
body:not(.is-native-app) .website-practice-answer-controls,
body:not(.is-native-app) .quiz-card.has-question-media .website-practice-answer-controls,
body:not(.is-native-app) .website-practice-answer-controls:not(:has(.answer-unsure-btn)) {
    box-sizing:border-box;
    width:min(100%, 360px);
    max-width:min(100%, 360px);
    min-height:58px;
    display:grid;
    grid-template-columns:48px 104px 156px;
    grid-template-areas:"back secondary primary";
    align-items:center;
    justify-content:start;
    gap:8px;
    margin:16px 0 0;
    padding-left:var(--quiz-content-indent);
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-prev {
    grid-area:back;
    box-sizing:border-box;
    width:48px;
    min-width:48px;
    height:44px;
    min-height:44px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid color-mix(in srgb, var(--accent) 74%, var(--border));
    border-radius:8px;
    background:transparent !important;
    color:var(--text) !important;
    font-size:0;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-prev::before {
    content:"←";
    display:grid;
    width:100%;
    height:100%;
    place-items:center;
    color:currentColor;
    font-size:27px;
    font-weight:500;
    line-height:1;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-prev .answer-nav-text {
    display:none;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-unsure-btn,
body:not(.is-native-app) .website-practice-answer-controls .answer-why-btn,
body:not(.is-native-app) .website-practice-answer-controls .answer-unclear-btn,
body:not(.is-native-app) .website-practice-answer-controls .practice-secondary-placeholder {
    grid-area:secondary;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-unsure-btn,
body:not(.is-native-app) .website-practice-answer-controls .answer-why-btn,
body:not(.is-native-app) .website-practice-answer-controls .answer-unclear-btn {
    box-sizing:border-box;
    width:104px;
    min-width:0;
    min-height:38px;
    height:38px;
    padding:0 8px;
    border-radius:8px;
    font-size:11px;
    white-space:nowrap;
}

body:not(.is-native-app) .website-practice-answer-controls .practice-primary-action {
    grid-area:primary;
    box-sizing:border-box;
    width:156px;
    min-width:0;
    min-height:44px;
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
}

/* Website question tools use the same quiet, fixed top-right treatment as the app. */
body:not(.is-native-app) .question-card-actions {
    box-sizing:border-box;
    position:absolute;
    top:24px;
    left:12px;
    right:12px;
    width:auto;
    min-height:40px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    pointer-events:none;
}

body:not(.is-native-app) .question-card-actions .question-action-group {
    box-sizing:border-box;
    min-height:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    pointer-events:auto;
}

body:not(.is-native-app) .question-card-actions .question-action-group-tools {
    width:max-content;
    min-width:40px;
    max-width:100%;
    margin-left:auto;
    justify-content:flex-end;
    gap:8px;
}

body:not(.is-native-app) .question-card-actions .question-action-group-resources {
    width:max-content;
    max-width:calc(100% - 48px);
    margin-left:0;
    justify-content:flex-end;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
}

body:not(.is-native-app) .question-card-actions .question-action-group-resources::-webkit-scrollbar {
    display:none;
}

body:not(.is-native-app) .question-card-actions .question-action-menu {
    position:relative;
    width:40px;
    min-width:40px;
    height:40px;
}

body:not(.is-native-app) .question-card-actions #question-action-menu-toggle {
    box-sizing:border-box;
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    border-radius:8px;
    background:var(--control);
    border-color:var(--border);
}

body:not(.is-native-app) .website-question-action-menu-panel {
    top:46px;
    right:0;
    width:210px;
    max-height:min(58dvh, 360px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:5px;
    border-radius:8px;
    box-shadow:0 16px 34px rgba(0,0,0,0.24);
}

body:not(.is-native-app) .website-question-action-menu-panel button,
body:not(.is-native-app) .website-question-action-menu-panel a {
    gap:10px;
    min-height:42px;
    padding:9px 11px;
    font-size:13px;
}

/* Keep the website answer actions compact instead of stretching across the quiz card. */
@media (min-width:900px) {
    body:not(.is-native-app) .website-practice-answer-controls,
    body:not(.is-native-app) .quiz-card.has-question-media .website-practice-answer-controls,
    body:not(.is-native-app) .website-practice-answer-controls:not(:has(.answer-unsure-btn)) {
        width:360px;
        max-width:360px;
        grid-template-columns:48px 104px 156px;
        justify-content:start;
    }

    body:not(.is-native-app) .website-practice-answer-controls .answer-unsure-btn,
    body:not(.is-native-app) .website-practice-answer-controls .answer-why-btn,
    body:not(.is-native-app) .website-practice-answer-controls .answer-unclear-btn,
    body:not(.is-native-app) .website-practice-answer-controls .practice-secondary-placeholder {
        width:104px;
    }

    body:not(.is-native-app) .website-practice-answer-controls .practice-primary-action {
        width:156px;
    }
}

@media (max-width:560px) {
    body:not(.is-native-app) .website-practice-answer-controls,
    body:not(.is-native-app) .quiz-card.has-question-media .website-practice-answer-controls,
    body:not(.is-native-app) .website-practice-answer-controls:not(:has(.answer-unsure-btn)) {
        width:100%;
        max-width:360px;
        grid-template-columns:48px minmax(82px, 104px) minmax(132px, 156px);
        gap:8px;
        margin-top:14px;
        padding-left:0;
    }

    body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-prev {
        width:48px;
        min-width:48px;
        height:44px;
        min-height:44px;
    }

    body:not(.is-native-app) .website-practice-answer-controls .answer-unsure-btn,
    body:not(.is-native-app) .website-practice-answer-controls .answer-why-btn,
    body:not(.is-native-app) .website-practice-answer-controls .answer-unclear-btn {
        padding-inline:6px;
        font-size:10px;
    }

    body:not(.is-native-app) .website-practice-answer-controls .practice-primary-action {
        padding-inline:8px;
        font-size:12px;
    }
}

/* Website quiz header: one calm mode-and-filter bar above a slim progress line. */
body:not(.is-native-app).quiz-screen-active .progress-shell {
    padding:6px 8px;
    container:quiz-progress / inline-size;
}

body:not(.is-native-app).quiz-screen-active .progress-summary-row {
    grid-template-columns:auto auto minmax(100px, 1fr) minmax(130px, 170px);
    grid-template-areas:"mode reviews summary search";
    gap:6px;
}

body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster {
    grid-area:mode;
}

body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
    grid-area:reviews;
    width:auto;
    justify-self:start;
    gap:4px;
}

body:not(.is-native-app).quiz-screen-active .progress-summary {
    grid-area:summary;
    padding-inline:6px;
}

body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
    grid-area:search;
}

body:not(.is-native-app).quiz-screen-active .progress-step-prev,
body:not(.is-native-app).quiz-screen-active .progress-step-next {
    display:none;
}

body:not(.is-native-app).quiz-screen-active .segmented-control {
    gap:2px;
    padding:3px;
}

body:not(.is-native-app).quiz-screen-active .segmented-control button {
    min-width:68px;
    min-height:30px;
    padding-inline:9px;
    font-size:12px;
}

body:not(.is-native-app).quiz-screen-active .progress-status-shortcuts {
    gap:1px;
    padding:0;
    border:0;
    background:transparent;
}

body:not(.is-native-app).quiz-screen-active .progress-status-btn {
    height:32px;
    padding-inline:7px;
    font-size:11px;
    font-weight:700;
}

body:not(.is-native-app).quiz-screen-active .progress-map-toggle {
    width:auto;
    min-width:104px;
    height:36px;
    padding-inline:10px;
}

@media (max-width:980px) {
    body:not(.is-native-app).quiz-screen-active .progress-summary-row {
        grid-template-columns:auto minmax(0, 1fr);
        grid-template-areas:
            "mode reviews"
            "summary summary";
        row-gap:5px;
    }

    body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
        width:100%;
        min-width:0;
        display:flex;
        justify-self:stretch;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-shortcuts {
        min-width:0;
        flex:1 1 auto;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
        display:none;
    }

    body:not(.is-native-app).quiz-screen-active .progress-summary-copy {
        display:none;
    }

    body:not(.is-native-app).quiz-screen-active .progress-summary {
        gap:0;
        padding:0;
    }
}

@media (max-width:560px) {
    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster {
        width:132px;
        min-width:132px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster .segmented-control {
        width:132px;
        min-width:132px;
        max-width:132px;
    }

    body:not(.is-native-app).quiz-screen-active .segmented-control button {
        min-width:0;
        padding-inline:5px;
        font-size:11px;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-shortcuts {
        display:flex;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-btn {
        width:auto;
        flex:1 1 auto;
        gap:3px;
        padding-inline:4px;
        font-size:10px;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-icon {
        display:none;
    }
}

/* Reflow the website quiz toolbar from the space it actually has. The
   content column can be narrow even when the browser viewport is wide. */
@container quiz-progress (max-width:760px) {
    body:not(.is-native-app).quiz-screen-active .progress-summary-row {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster {
        order:1;
    }

    body:not(.is-native-app).quiz-screen-active .progress-summary {
        order:2;
    }

    body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
        order:3;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
        order:4;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster,
    body:not(.is-native-app).quiz-screen-active .progress-summary,
    body:not(.is-native-app).quiz-screen-active .progress-review-cluster,
    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
        min-width:0;
    }

    body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
        width:100%;
        justify-self:stretch;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:6px;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-shortcuts {
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-btn {
        width:100%;
        min-width:0;
        overflow:hidden;
        padding-inline:5px;
        font-size:10.5px;
        text-overflow:ellipsis;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-label {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
        display:flex;
        width:100%;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right .search-input {
        box-sizing:border-box;
        width:100%;
        min-width:0;
    }
}

@container quiz-progress (max-width:520px) {
    body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
        grid-template-columns:minmax(0, 1fr);
    }

    body:not(.is-native-app).quiz-screen-active .progress-map-toggle {
        width:100%;
        min-width:0;
    }
}

/* Keep the selected quiz mode unmistakable against the light interface. */
body.light.quiz-screen-active .quiz-mode-cluster .segmented-control {
    background:#dce5f0;
    box-shadow:inset 0 0 0 1px #9babc0;
}

body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button {
    color:#43546b;
}

body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
    background:var(--accent);
    color:#ffffff;
    box-shadow:0 1px 5px rgba(37,99,235,0.28);
}

/* Website light mode follows the app's slimmer, quieter mode switch. */
body.light:not(.is-native-app).quiz-screen-active .quiz-mode-cluster .segmented-control {
    box-sizing:border-box;
    gap:2px;
    height:34px;
    padding:2px;
    border:0;
    border-radius:8px;
    background:#e8eef6;
    box-shadow:inset 0 0 0 1px #c3d0df;
}

body.light:not(.is-native-app).quiz-screen-active .quiz-mode-cluster .segmented-control button {
    min-height:30px;
    border-radius:6px;
    color:#52637a;
    font-size:12px;
    font-weight:760;
}

body.light:not(.is-native-app).quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
    background:#cfe0ff;
    color:#17458d;
    box-shadow:0 1px 4px rgba(37,99,235,0.16);
}

/* Keep the website dashboard's logbook and plan cards in one calm row. */
body:not(.is-native-app) .dashboard-top-panels {
    box-sizing:border-box;
    width:100%;
    max-width:920px;
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(250px,0.85fr);
    align-items:start;
    gap:18px;
    margin:0 auto 18px;
}

body:not(.is-native-app) .dashboard-top-panels > * {
    min-width:0;
}

body:not(.is-native-app) .dashboard-course-pricing-summary {
    display:grid;
    align-content:start;
    gap:10px;
}

body:not(.is-native-app) .dashboard-logbook-summary {
    max-width:none;
    margin:0;
}

body:not(.is-native-app) .dashboard-course-pricing-card {
    --pricing-link-accent:var(--accent);
    box-sizing:border-box;
    min-width:0;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 26%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--pricing-link-accent) 5%, var(--card));
}

body:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#14b8a6;
}

body:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#38bdf8;
}

body:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#a78bfa;
}

body.light:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="PPL"] {
    --pricing-link-accent:#0f766e;
}

body.light:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="CPL"] {
    --pricing-link-accent:#0284c7;
}

body.light:not(.is-native-app) .dashboard-course-pricing-card[data-dashboard-pricing-course="Night Rating"] {
    --pricing-link-accent:#7c3aed;
}

body:not(.is-native-app) .dashboard-course-pricing-card .dashboard-pricing-disclosure {
    width:100%;
    box-sizing:border-box;
    min-height:78px;
    margin-top:0;
    border:0;
    border-bottom:1px solid color-mix(in srgb, var(--pricing-link-accent) 22%, var(--border));
    border-radius:0;
    background:transparent;
}

body:not(.is-native-app) .dashboard-course-pricing-card .dashboard-pricing-panel {
    box-sizing:border-box;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0;
    padding:14px;
}

body:not(.is-native-app) #dashboard-subject-grid.has-course-pricing {
    max-width:1180px;
}

/* Expanded plans use the same rail as the subject table and keep desktop cards in one row. */
body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing {
    grid-template-columns:1fr;
    max-width:1180px;
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-summary {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    min-width:0;
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card {
    width:100%;
}

body:not(.is-native-app) .dashboard-top-panels:not(.has-expanded-course-pricing) .dashboard-course-pricing-card {
    height:100%;
}

body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-panel {
    grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Keep the website landing page compact while preserving the full feature and FAQ content. */
body:not(.is-native-app) .about-disclosure,
body:not(.is-native-app) .landing-faq {
    position:relative;
    overflow:visible;
}

body:not(.is-native-app) .about-disclosure {
    padding-bottom:58px;
}

body:not(.is-native-app) .about-disclosure-content,
body:not(.is-native-app) .landing-faq-content {
    max-height:270px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.96) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.42) 88%,
        transparent 100%
    );
    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        #000 58%,
        rgba(0, 0, 0, 0.96) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.42) 88%,
        transparent 100%
    );
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    transition:max-height 360ms ease;
}

body:not(.is-native-app) .about-disclosure.is-expanded .about-disclosure-content,
body:not(.is-native-app) .landing-faq.is-expanded .landing-faq-content {
    max-height:1800px;
    -webkit-mask-image:none;
    mask-image:none;
}

body:not(.is-native-app) .landing-faq-list summary,
body.is-native-app.public-screen .landing-faq-list summary {
    min-height:52px;
    font-size:13px;
}

body:not(.is-native-app) .landing-faq-list p,
body.is-native-app.public-screen .landing-faq-list p {
    padding-bottom:14px;
    font-size:12.5px;
    line-height:1.5;
}

body:not(.is-native-app) .about-disclosure-toggle,
body:not(.is-native-app) .landing-faq-toggle {
    position:absolute;
    z-index:2;
    left:50%;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
    border-radius:50%;
    background:var(--control);
    color:var(--accent);
    box-shadow:
        0 8px 24px color-mix(in srgb, #000 24%, transparent),
        0 0 0 8px color-mix(in srgb, var(--bg) 38%, transparent);
    cursor:pointer;
    transform:translateX(-50%);
}

body:not(.is-native-app) .about-disclosure-toggle {
    bottom:12px;
}

body:not(.is-native-app) .landing-faq {
    padding-bottom:74px;
}

body:not(.is-native-app) .landing-faq-toggle {
    bottom:16px;
}

body:not(.is-native-app) .about-disclosure-toggle:focus-visible,
body:not(.is-native-app) .landing-faq-toggle:focus-visible {
    outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset:3px;
}

body:not(.is-native-app) .about-disclosure-toggle svg,
body:not(.is-native-app) .landing-faq-toggle svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform 220ms ease;
}

body:not(.is-native-app) .about-disclosure.is-expanded .about-disclosure-toggle svg,
body:not(.is-native-app) .landing-faq.is-expanded .landing-faq-toggle svg {
    transform:rotate(180deg);
}

body:not(.is-native-app) .dashboard-course-pricing-card .dashboard-price-card {
    min-width:0;
    padding:14px;
}

body.is-native-app .dashboard-top-panels {
    display:contents;
}

body.is-native-app .dashboard-course-pricing-summary {
    display:none;
}

@media (max-width:900px) {
    body:not(.is-native-app) .dashboard-top-panels {
        grid-template-columns:1fr;
    }

    body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-panel {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px) {
    body:not(.is-native-app) .dashboard-course-pricing-card .dashboard-pricing-panel {
        grid-template-columns:1fr;
    }
}

/* Let the website's About preview reveal a little more before the fade. */
body:not(.is-native-app) .about-disclosure-content {
    max-height:460px;
}

/* Website dashboard: keep the logbook and plan cards as equal-height peers. */
@media (min-width:901px) {
    body:not(.is-native-app) .dashboard-top-panels,
    body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items:stretch;
        max-width:1180px;
    }

    body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-summary {
        grid-column:auto;
        grid-row:auto;
        width:auto;
    }

    body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary,
    body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary {
        height:100%;
        min-height:0;
    }

    body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        height:100%;
        min-height:0;
    }
}

@media (max-width:900px) {
    body:not(.is-native-app) .dashboard-top-panels {
        grid-template-columns:1fr;
        align-items:stretch;
    }

    body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary,
    body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary,
    body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        height:auto;
    }
}

/* Native landing brand lockup: match the website wordmark and clarify the subtitle hierarchy. */
@media (max-width:720px) {
    body.is-native-app.public-screen .mobile-landing-brand {
        width:max-content;
        max-width:calc(100vw - 32px);
        gap:8px;
        letter-spacing:0 !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-lockup {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
    }

    body.is-native-app.public-screen .mobile-landing-brand .wind-logo {
        display:none !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand .wind-logo::before,
    body.is-native-app.public-screen .mobile-landing-brand .wind-logo::after {
        display:none !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        width:auto !important;
        display:block;
        font-family:"Michroma", system-ui, sans-serif;
        font-size:clamp(34px, 10.5vw, 48px) !important;
        font-weight:600;
        line-height:1 !important;
        letter-spacing:0.1em !important;
        white-space:nowrap;
        transform:scaleX(0.9);
        transform-origin:center;
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        width:auto;
        max-width:calc(100vw - 32px);
        flex-wrap:nowrap;
        color:rgba(214,234,250,0.82);
        font-family:"Michroma", system-ui, sans-serif;
        font-size:11px;
        font-weight:400;
        line-height:1.3;
        letter-spacing:0;
        white-space:nowrap;
        text-shadow:none;
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams {
        color:#7dd3fc !important;
        -webkit-text-fill-color:currentColor !important;
        font-size:clamp(14px, 4vw, 18px);
        font-weight:800;
        letter-spacing:0.1em;
        white-space:nowrap;
        opacity:1;
        filter:none;
        text-shadow:none;
    }

    body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        color:#83c99d !important;
        -webkit-text-fill-color:currentColor !important;
        font-size:11px;
        font-weight:500;
        letter-spacing:0.16em;
        white-space:nowrap;
        opacity:1;
        filter:none;
        text-shadow:none;
    }

    /* Native landing typography is intentionally flat: no inherited shadow, glow, stroke, or filter. */
    body.is-native-app.public-screen .mobile-landing-brand,
    body.is-native-app.public-screen .mobile-landing-brand-lockup,
    body.is-native-app.public-screen .mobile-landing-brand-title,
    body.is-native-app.public-screen .mobile-landing-brand-tagline,
    body.is-native-app.public-screen .mobile-landing-brand-exams,
    body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        filter:none !important;
        -webkit-filter:none !important;
        -webkit-text-stroke:0 !important;
        text-shadow:none !important;
    }
}

/* Keep the native dashboard toolbar's brand wording identical to the website lockup. */
body.is-native-app:not(.public-screen) .native-toolbar-brand {
    align-items:center;
    gap:8px;
}

body.is-native-app:not(.public-screen) .native-toolbar-brand-copy {
    min-width:0;
    display:grid;
    gap:3px;
    text-align:left;
    line-height:1;
}

body.is-native-app:not(.public-screen) .native-toolbar-brand-copy > strong {
    overflow:hidden;
    font-family:"Michroma", system-ui, sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.08em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.is-native-app:not(.public-screen) .native-toolbar-brand-copy > small {
    overflow:hidden;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-family:"Michroma", system-ui, sans-serif;
    font-size:7px;
    font-weight:500;
    letter-spacing:0.035em;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Dashboard and Logbook get a compact, always-available tutorial action beside
   the cart. Practice keeps its own tutorial control in the study header. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .native-toolbar-actions {
        display:flex;
        align-items:center;
        gap:7px;
        flex:0 0 auto;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial {
        box-sizing:border-box;
        width:40px;
        height:40px;
        flex:0 0 40px;
        display:grid;
        place-items:center;
        padding:0;
        border:1px solid var(--border);
        border-radius:7px;
        background:var(--control);
        color:var(--text);
        cursor:pointer;
        font:inherit;
        line-height:1;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial-icon {
        width:23px;
        height:23px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial-icon path {
        fill:currentColor;
        stroke:none;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial:hover,
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial:focus-visible,
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial.is-active {
        border-color:color-mix(in srgb, var(--accent) 60%, var(--border));
        background:var(--active-fill);
        color:var(--active-ink);
        outline:none;
    }

    body.is-native-app:not(.public-screen) .native-toolbar-tutorial[hidden] {
        display:none;
    }
}

/* Website dashboard: keep Logbook and Upgrade your plan as equal halves. */
body:not(.is-native-app) .dashboard-top-panels,
body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:18px;
    max-width:1180px;
}

body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary,
body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary {
    grid-column:auto;
    width:100%;
    height:auto;
    min-height:0;
    max-width:none;
}

body:not(.is-native-app) .dashboard-top-panels > #dashboard-logbook-summary {
    grid-row:auto;
}

body:not(.is-native-app) .dashboard-top-panels > #dashboard-course-pricing-summary {
    grid-row:auto;
    display:block;
}

body:not(.is-native-app) .dashboard-logbook-quick-stats {
    display:none !important;
}

body:not(.is-native-app) .dashboard-course-pricing-card {
    height:auto !important;
    overflow:visible;
    border:0;
    border-top:0;
    border-left:0;
    border-radius:0;
    background:transparent;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure {
    min-height:52px;
    margin-top:0;
    padding:8px 12px;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 28%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:7px;
    background:linear-gradient(
        100deg,
        color-mix(in srgb, var(--pricing-link-accent) 9%, var(--card)),
        color-mix(in srgb, var(--pricing-link-accent) 3%, var(--card)) 72%,
        transparent
    );
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy {
    min-width:0;
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy > span {
    color:color-mix(in srgb, var(--pricing-link-accent) 78%, var(--text));
    font-size:10px;
    font-weight:900;
    letter-spacing:0.08em;
    line-height:1.2;
    text-transform:uppercase;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy > strong {
    color:var(--text);
    font-size:18px;
    font-weight:850;
    line-height:1.2;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy > small {
    overflow:hidden;
    color:color-mix(in srgb, var(--text) 56%, transparent);
    font-size:10px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button {
    min-height:32px;
    padding:0 11px;
    border-color:color-mix(in srgb, var(--pricing-link-accent) 62%, var(--border));
    border-radius:5px;
    background:color-mix(in srgb, var(--pricing-link-accent) 70%, #102033);
    color:#fff;
    font-size:10px;
    font-weight:800;
}

body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button:hover,
body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button:focus-visible {
    border-color:var(--pricing-link-accent);
    background:color-mix(in srgb, var(--pricing-link-accent) 84%, #102033);
    color:#fff;
}

body.light:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button {
    border-color:#94a3b8;
    background:#f8fafc;
    color:#0f172a;
    box-shadow:none;
}

body.light:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button:hover,
body.light:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button:focus-visible {
    border-color:#64748b;
    background:#ffffff;
    color:#0f172a;
    box-shadow:none;
}

/* Keep the expanded pricing view clear and usable after the collapsed link becomes minimal. */
body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded {
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 26%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--pricing-link-accent) 5%, var(--card));
}

body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure {
    min-height:54px;
    margin-top:0;
    padding:10px 14px;
    border:0;
    border-bottom:1px solid color-mix(in srgb, var(--pricing-link-accent) 22%, var(--border));
    border-radius:0;
    background:transparent;
}

body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure-copy {
    display:grid;
    gap:3px;
}

body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure-copy > span {
    color:color-mix(in srgb, var(--pricing-link-accent) 78%, var(--text));
    font-size:10px;
    font-weight:900;
    letter-spacing:0.08em;
    line-height:1.2;
    text-transform:uppercase;
}

body:not(.is-native-app) .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure-copy > strong {
    color:var(--text);
    font-size:18px;
    font-weight:850;
    line-height:1.2;
}

@media (max-width:640px) {
    body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure {
        box-sizing:border-box;
        align-items:center;
        flex-direction:row;
        justify-content:space-between;
        gap:8px;
        padding:8px 10px;
    }

    body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy {
        flex:1 1 auto;
        grid-template-columns:1fr;
        gap:3px;
    }

    body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy > strong {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure-copy > small {
        white-space:normal;
    }

    body:not(.is-native-app) .dashboard-course-pricing-card:not(.is-expanded) .dashboard-pricing-disclosure > button {
        flex:0 0 auto;
        width:auto;
    }
}

/* Keep the logbook and upgrade row at the subject width; widen only the payment cards below. */
body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing {
    max-width:920px;
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-summary,
body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card {
    width:100%;
    min-width:0;
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card.is-expanded {
    overflow:visible;
    border:0;
    background:transparent;
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure {
    width:100%;
    box-sizing:border-box;
    min-height:54px;
    padding:10px 14px;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 28%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:7px;
    background:linear-gradient(
        100deg,
        color-mix(in srgb, var(--pricing-link-accent) 9%, var(--card)),
        color-mix(in srgb, var(--pricing-link-accent) 3%, var(--card)) 72%,
        transparent
    );
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card.is-expanded .dashboard-pricing-panel {
    box-sizing:border-box;
    width:min(1180px, calc(100vw - 56px));
    max-width:none;
    position:relative;
    left:50%;
    margin:12px 0 0;
    padding:14px;
    border:1px solid color-mix(in srgb, var(--pricing-link-accent) 26%, var(--border));
    border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
    border-radius:8px;
    background:color-mix(in srgb, var(--pricing-link-accent) 5%, var(--card));
    transform:translateX(-50%);
}

body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
    grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:980px) {
    body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px) {
    body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        grid-template-columns:1fr;
    }
}

/* Night Rating has three plans; keep the three-card group centered instead of leaving a fourth empty track. */
@media (min-width:981px) {
body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel[data-dashboard-pricing-course="Night Rating"] {
        grid-template-columns:repeat(3, minmax(0, min(460px, calc((100% - 24px) / 3))));
        justify-content:center;
    }
}

/* Dashboard section rhythm: keep the course/logbook, upgrade, and subject
   sections separated by the same predictable amount of space. */
body:not(.is-native-app) #screen-dashboard {
    --dashboard-section-gap:18px;
}

body:not(.is-native-app) #screen-dashboard .subscription-summary,
body:not(.is-native-app) #screen-dashboard .dashboard-top-panels {
    margin-bottom:var(--dashboard-section-gap);
}

body:not(.is-native-app) #screen-dashboard .dashboard-top-panels {
    gap:var(--dashboard-section-gap);
}

body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid {
    margin-top:0;
}

/* Keep the Logbook and Upgrade cards at 40% of the Course Progress rail each. */
body:not(.is-native-app) #screen-dashboard .dashboard-top-panels,
body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
    width:80%;
    max-width:944px;
    margin-inline:auto;
}

body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-logbook-summary,
body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-course-pricing-summary {
    width:100%;
    min-width:0;
}

@media (max-width:900px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
        width:100%;
        max-width:920px;
    }
}

@media (min-width:901px) {
    /* When pricing is open, keep its disclosure beside Logbook and move the
       actual plan cards into a centered second row spanning the pair. */
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-areas:
            "logbook upgrade"
            "pricing pricing";
        align-items:start;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing > #dashboard-logbook-summary {
        grid-area:logbook;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing > #dashboard-course-pricing-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-course-pricing-card.is-expanded {
        display:contents;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-disclosure {
        grid-area:upgrade;
        width:100%;
        justify-self:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        grid-area:pricing;
        position:static;
        left:auto;
        width:min(1120px, calc(100% - 32px));
        max-width:none;
        margin:0 auto;
        justify-self:center;
        transform:none;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        grid-template-columns:repeat(4, minmax(0, min(248px, calc((100% - 36px) / 4))));
        justify-content:center;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-price-card {
        padding:12px;
    }
}

/* Validity is useful metadata, but should stay visually secondary to course progress. */
.course-access-validity {
    color:color-mix(in srgb, var(--text) 50%, transparent);
    font-size:9px;
    font-weight:500;
    line-height:1.2;
    text-shadow:none;
}

.course-access-validity > span,
.subject-validity > span {
    display:none;
}

.subject-validity {
    gap:4px;
    color:color-mix(in srgb, var(--text) 50%, transparent);
    font-size:10px;
    font-weight:500;
    line-height:1.2;
}

.subject-validity::before {
    width:3px;
    height:3px;
    opacity:0.45;
}

body.is-native-app:not(.public-screen) .course-access-validity {
    color:color-mix(in srgb, currentColor 62%, transparent);
    font-size:8.5px;
    font-weight:500;
    text-shadow:none;
}

body.is-native-app:not(.public-screen) .course-access-validity > span {
    display:none;
}

body.is-native-app:not(.public-screen) .native-subject-copy > .native-subject-validity {
    color:color-mix(in srgb, var(--text) 50%, transparent);
    font-size:10px;
    font-weight:500;
}

body.is-native-app:not(.public-screen) .native-continue-study-copy > .native-continue-study-validity {
    color:color-mix(in srgb, var(--text) 50%, transparent);
    font-size:9px;
    font-weight:500;
}

/* Explanation modal: calm the visual hierarchy without muting the learning content. */
.explanation-overlay {
    padding:24px;
    background:rgba(2,6,23,0.58);
    backdrop-filter:blur(4px);
}

.explanation-modal {
    width:min(780px, 100%);
    border-color:color-mix(in srgb, var(--border) 90%, var(--text) 10%);
    border-radius:10px;
    box-shadow:0 22px 64px rgba(0,0,0,0.28);
}

.explanation-modal.correct {
    border-color:color-mix(in srgb, var(--border) 78%, var(--correct) 22%);
}

.explanation-modal.incorrect {
    border-color:color-mix(in srgb, var(--border) 78%, var(--wrong) 22%);
}

.explanation-modal-head {
    min-height:54px;
    padding:9px 12px 9px 18px;
    border-bottom-color:color-mix(in srgb, var(--border) 86%, transparent);
}

.explanation-modal.correct .explanation-modal-head,
.explanation-modal.incorrect .explanation-modal-head {
    background:color-mix(in srgb, var(--card) 96%, var(--soft));
    border-bottom-color:color-mix(in srgb, var(--border) 84%, transparent);
}

.explanation-title {
    font-size:17px;
    font-weight:750;
}

.explanation-kicker {
    color:color-mix(in srgb, var(--muted) 82%, var(--text));
    font-size:10px;
    font-weight:700;
}

.explanation-modal-scroll {
    padding:18px 20px 20px;
}

.explanation-answer-review,
.explanation-answer-row + .explanation-answer-row,
.explanation-learning-section,
.explanation-solution-steps,
.explanation-solution-steps li,
.explanation-depth-toggle,
.explanation-regulatory-references {
    border-color:color-mix(in srgb, var(--border) 82%, transparent);
}

.explanation-answer-row-label,
.explanation-answer-row.is-wrong .explanation-answer-row-label,
.explanation-answer-row.is-correct .explanation-answer-row-label {
    color:color-mix(in srgb, var(--muted) 88%, var(--text));
    font-size:11px;
    font-weight:750;
}

.explanation-answer-value {
    color:color-mix(in srgb, var(--text) 88%, transparent);
    font-size:15px;
    font-weight:600;
}

.explanation-answer-letter,
.explanation-answer-row.is-wrong .explanation-answer-letter,
.explanation-answer-row.is-correct .explanation-answer-letter {
    border-color:color-mix(in srgb, var(--border) 72%, var(--text) 28%);
    background:color-mix(in srgb, var(--control) 90%, var(--card));
    color:color-mix(in srgb, var(--text) 78%, transparent);
}

.explanation-learning-section {
    margin-top:17px;
    padding-top:17px;
}

.explanation-learning-section h3 {
    margin-bottom:8px;
    color:color-mix(in srgb, var(--text) 84%, transparent);
    font-size:12px;
    font-weight:750;
}

.explanation-section-copy > p,
.explanation-copy > p {
    color:color-mix(in srgb, var(--text) 84%, transparent);
    font-size:15px;
    line-height:1.62;
}

.explanation-correction,
.explanation-review-point {
    padding-left:12px;
    border-left-width:2px;
    border-left-color:color-mix(in srgb, var(--border) 62%, var(--accent) 38%);
}

.explanation-trap-callout,
.explanation-takeaway,
.explanation-memory-aid {
    margin-top:16px;
    padding:11px 13px;
    border-color:color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
    border-left-width:2px;
    border-radius:7px;
    background:color-mix(in srgb, var(--card) 96%, var(--accent) 4%);
}

.explanation-trap-callout {
    border-left-color:color-mix(in srgb, var(--border) 58%, #d97706 42%);
    background:color-mix(in srgb, var(--card) 96%, #f59e0b 4%);
}

.explanation-takeaway {
    border-left-color:color-mix(in srgb, var(--border) 58%, var(--correct) 42%);
    background:color-mix(in srgb, var(--card) 96%, var(--correct) 4%);
}

.explanation-trap-callout > span,
.explanation-takeaway > span,
.explanation-memory-aid-label {
    color:color-mix(in srgb, var(--muted) 80%, var(--text));
    font-size:11px;
    font-weight:750;
}

.explanation-trap-callout p,
.explanation-takeaway p {
    color:color-mix(in srgb, var(--text) 84%, transparent);
    font-size:14px;
    line-height:1.58;
}

.explanation-memory-aid p {
    color:color-mix(in srgb, var(--text) 86%, transparent);
    font-size:15px;
    font-weight:650;
}

.explanation-solution-steps li {
    grid-template-columns:minmax(96px, 0.24fr) minmax(0, 1fr);
    padding:10px 0 10px 16px;
}

.explanation-solution-steps li::before {
    left:2px;
    top:15px;
    width:5px;
    height:5px;
    background:color-mix(in srgb, var(--accent) 58%, var(--border));
}

.explanation-solution-label,
.explanation-depth-toggle > summary,
.explanation-reference-item a,
.explanation-reference-item strong {
    color:color-mix(in srgb, var(--accent) 62%, var(--text));
    font-weight:700;
}

.explanation-solution-copy {
    color:color-mix(in srgb, var(--text) 84%, transparent);
    font-size:15px;
    font-weight:550;
}

.explanation-depth-toggle > summary::before {
    border-color:color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
    color:color-mix(in srgb, var(--muted) 76%, var(--accent));
}

.explanation-modal-footer {
    padding:9px 18px;
    border-top-color:color-mix(in srgb, var(--border) 82%, transparent);
    background:color-mix(in srgb, var(--card) 98%, var(--soft));
}

/* Practice: allow an unanswered question to be skipped with a quiet next arrow. */
body:not(.is-native-app) .website-practice-answer-controls.is-pending {
    width:min(100%, 380px);
    max-width:min(100%, 380px);
    grid-template-columns:48px 104px 156px 48px;
    grid-template-areas:"back secondary primary next";
}

body:not(.is-native-app) .website-practice-answer-controls.is-confirmed {
    width:min(100%, 360px);
    max-width:min(100%, 360px);
    grid-template-columns:48px 104px 156px;
    grid-template-areas:"back secondary primary";
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-next {
    grid-area:next;
    box-sizing:border-box;
    width:48px;
    min-width:48px;
    height:44px;
    min-height:44px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:8px;
    font-size:0;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-next::before {
    content:"→";
    display:grid;
    width:100%;
    height:100%;
    place-items:center;
    color:currentColor;
    font-size:27px;
    font-weight:500;
    line-height:1;
}

body:not(.is-native-app) .website-practice-answer-controls .answer-nav-btn-next .answer-nav-text {
    display:none;
}

@media (max-width:560px) {
    body:not(.is-native-app) .website-practice-answer-controls.is-pending {
        width:100%;
        max-width:100%;
        grid-template-columns:44px minmax(70px, 96px) minmax(116px, 1fr) 44px;
        gap:6px;
    }

    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-next {
        width:44px;
        min-width:44px;
        height:44px;
        min-height:44px;
    }
}

@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .native-practice-answer-controls.is-pending {
        grid-template-columns:46px minmax(48px, 0.75fr) minmax(100px, 1.25fr) 46px !important;
        grid-template-areas:"back secondary primary next" !important;
        gap:8px !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-confirmed,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .native-practice-answer-controls.is-confirmed {
        grid-template-columns:52px minmax(64px, 0.7fr) minmax(118px, 1.3fr) !important;
        grid-template-areas:"back secondary primary" !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-nav-btn-next {
        width:46px;
        min-width:46px;
        height:46px;
        min-height:46px;
    }
}

/* Keep the pending Confirm / next-arrow controls on one line at every width. */
body:not(.is-native-app) .website-practice-answer-controls.is-pending {
    box-sizing:border-box;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    width:min(100%, 380px);
    max-width:min(100%, 380px);
    gap:8px;
    padding-left:0;
    overflow:visible;
}

body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-prev,
body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-next {
    flex:0 0 48px;
}

body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-prev {
    order:1;
}

body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-unsure-btn,
body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-why-btn,
body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-unclear-btn,
body:not(.is-native-app) .website-practice-answer-controls.is-pending .practice-secondary-placeholder {
    flex:0 1 104px;
    width:104px;
    min-width:70px;
    order:2;
}

body:not(.is-native-app) .website-practice-answer-controls.is-pending .practice-primary-action {
    flex:1 1 156px;
    width:auto;
    min-width:116px;
    order:3;
}

body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-next {
    order:4;
}

@media (max-width:560px) {
    body:not(.is-native-app) .website-practice-answer-controls.is-pending {
        width:100%;
        max-width:100%;
        gap:6px;
    }

    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-prev,
    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-nav-btn-next {
        flex-basis:44px;
        width:44px;
        min-width:44px;
    }

    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-unsure-btn,
    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-why-btn,
    body:not(.is-native-app) .website-practice-answer-controls.is-pending .answer-unclear-btn,
    body:not(.is-native-app) .website-practice-answer-controls.is-pending .practice-secondary-placeholder {
        flex-basis:96px;
        width:96px;
        min-width:64px;
    }

    body:not(.is-native-app) .website-practice-answer-controls.is-pending .practice-primary-action {
        flex-basis:116px;
        min-width:0;
    }
}

@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending,
    body.is-native-app.quiz-screen-active .quiz-card.has-question-media .native-practice-answer-controls.is-pending {
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center;
        gap:8px !important;
        overflow:visible;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-nav-btn-prev,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-nav-btn-next {
        flex:0 0 46px;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-nav-btn-prev {
        order:1;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-unsure-btn {
        flex:0 1 68px;
        order:2;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action {
        flex:1 1 auto;
        min-width:0;
        order:3;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .answer-nav-btn-next {
        order:4;
    }
}

/* Native question actions: give the more-actions control room below the card edge. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .question-card-actions.is-native-question-toolbar {
        top:12px !important;
        min-height:48px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-menu-native {
        width:48px;
        min-width:48px;
        max-width:48px;
        height:48px;
        min-height:48px;
        max-height:48px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-tools {
        min-height:48px;
        height:48px;
        max-height:48px;
    }

    body.is-native-app.quiz-screen-active #question-action-menu-toggle:not(.has-flagged-question) {
        width:48px !important;
        min-width:48px !important;
        height:48px !important;
        min-height:48px !important;
        border-color:color-mix(in srgb, var(--accent) 62%, var(--border));
        background:color-mix(in srgb, var(--accent) 7%, var(--control));
        box-shadow:0 8px 20px rgba(0,0,0,0.18), inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    body.is-native-app.quiz-screen-active #question-action-menu-toggle .more-action-icon {
        width:4px;
        height:4px;
        box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor;
    }

    body.is-native-app.quiz-screen-active #formula-container {
        top:60px;
    }
}

/* Make the secondary question menu obvious instead of relying on a dots-only icon. */
.question-action-menu .more-action-btn {
    box-sizing:border-box;
    width:auto;
    min-width:86px;
    gap:7px;
    padding-inline:10px;
}

.more-action-label {
    display:inline;
    font-size:12px;
    font-weight:760;
    line-height:1;
}

body:not(.is-native-app) .question-card-actions .question-action-menu {
    width:max-content;
    min-width:86px;
    max-width:100%;
}

body:not(.is-native-app) .question-card-actions #question-action-menu-toggle {
    width:auto;
    min-width:86px;
    padding-inline:10px;
}

body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-menu-native {
    width:max-content;
    min-width:86px;
    max-width:100%;
}

body.is-native-app.quiz-screen-active .is-native-question-toolbar #question-action-menu-toggle {
    width:auto !important;
    min-width:86px !important;
    max-width:100%;
    padding-inline:10px !important;
}

/* Keep the website landing lockup and its two-line descriptor proportional on narrow screens. */
@media (max-width:720px) {
    body:not(.is-native-app) .mobile-landing-brand {
        width:min(100%, calc(100vw - 32px));
        max-width:calc(100vw - 32px);
        gap:clamp(7px, 2.8vw, 14px);
    }

    body:not(.is-native-app) .mobile-landing-brand-lockup {
        gap:clamp(8px, 3vw, 12px);
    }

    body:not(.is-native-app) .mobile-landing-brand-title {
        font-size:clamp(26px, 11vw, 48px);
    }

    body:not(.is-native-app) .mobile-landing-brand-tagline {
        width:100%;
        max-width:100%;
        gap:clamp(2px, 1vw, 4px);
        font-size:clamp(8px, 2.8vw, 11px);
    }

    body:not(.is-native-app) .mobile-landing-brand-exams {
        font-size:clamp(10px, 4vw, 18px);
        letter-spacing:clamp(0.05em, 0.5vw, 0.1em);
    }

    body:not(.is-native-app) .mobile-landing-brand-logbooks {
        font-size:clamp(8px, 2.6vw, 10px);
        letter-spacing:clamp(0.08em, 0.5vw, 0.16em);
    }

    body:not(.is-native-app) .mobile-landing-brand .wind-logo {
        width:clamp(44px, 15vw, 68px);
        height:clamp(25px, 8.5vw, 38px);
    }
}

/* Place the compact tools directly below the progress/status section. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .quiz-card:has(.is-native-question-toolbar),
    body.is-native-app.quiz-screen-active .quiz-card.is-compact-quiz-header:has(.is-native-question-toolbar) {
        padding-top:0;
    }

    body.is-native-app.quiz-screen-active .question-card-actions.is-native-question-toolbar {
        box-sizing:border-box;
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset-inline-start:auto !important;
        inset-inline-end:auto !important;
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:36px;
        height:36px;
        max-height:36px;
        margin:0 0 8px;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:6px;
        padding:0;
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-tools {
        box-sizing:border-box;
        width:max-content;
        min-width:0;
        max-width:100%;
        height:36px;
        min-height:36px;
        max-height:none;
        margin-left:auto;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-tools::-webkit-scrollbar {
        display:none;
    }

    body.is-native-app.quiz-screen-active #q-counter,
    body.is-native-app.quiz-screen-active #question {
        padding-right:0 !important;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-btn {
        box-sizing:border-box;
        height:36px;
        min-height:36px;
        padding:0 7px;
        border-radius:7px;
        font-size:10.5px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn {
        width:76px;
        min-width:76px;
        padding-inline:6px;
        gap:4px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn .report-icon {
        width:14px;
        height:14px;
        font-size:10px;
    }

    body.is-native-app.quiz-screen-active .question-action-menu-native {
        width:76px;
        min-width:76px;
        max-width:76px;
        height:36px;
        min-height:36px;
        max-height:36px;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar #question-action-menu-toggle {
        width:76px !important;
        min-width:76px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px;
        padding-inline:6px !important;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .more-action-label {
        font-size:10.5px;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-unsure-btn,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-why-btn {
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        line-height:1.1;
    }
}

/* Keep the two visible question tools on one exact baseline in the native app. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .question-card-actions.is-native-question-toolbar {
        align-items:center !important;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-group-tools {
        display:flex;
        align-items:center;
        gap:6px;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        overflow:visible;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn,
    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-menu-native,
    body.is-native-app.quiz-screen-active .is-native-question-toolbar #question-action-menu-toggle {
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        align-self:center;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .question-action-menu-native {
        position:relative;
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
        margin:0;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar #question-action-menu-toggle {
        position:static !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
        margin:0;
        padding-inline:6px !important;
    }

    body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn {
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
        margin:0;
        padding-inline:6px !important;
    }
}

.native-question-action-menu-panel .native-question-formula-menu-item.is-active {
    background:color-mix(in srgb, var(--accent) 16%, var(--card));
    color:color-mix(in srgb, var(--text) 88%, var(--accent));
}

/* Keep More and Report as a quiet, matched pair in both quiz surfaces. */
.question-action-menu .more-action-icon {
    display:none !important;
}

body:not(.is-native-app) .question-card-actions .report-question-btn,
body:not(.is-native-app) .question-card-actions #question-action-menu-toggle {
    box-sizing:border-box;
    width:86px !important;
    min-width:86px !important;
    max-width:86px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    padding:0 8px !important;
    gap:5px;
    border-radius:7px;
}

body.is-native-app.quiz-screen-active .is-native-question-toolbar .report-question-btn,
body.is-native-app.quiz-screen-active .is-native-question-toolbar #question-action-menu-toggle {
    box-sizing:border-box;
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    padding:0 6px !important;
    gap:5px;
    border-radius:7px;
}

.report-question-btn,
.report-question-btn:hover,
.report-question-btn:focus-visible,
.report-question-btn:active {
    border-color:var(--border) !important;
    background:var(--soft) !important;
    color:color-mix(in srgb, var(--text) 72%, transparent) !important;
}

.report-question-btn:hover,
.report-question-btn:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
    background:var(--control) !important;
    color:var(--text) !important;
}

/* Admin Control Centre */
.admin-edit-question-btn {
    gap:6px;
    border-color:color-mix(in srgb, var(--accent) 68%, var(--border));
    background:color-mix(in srgb, var(--accent) 14%, var(--control));
    color:color-mix(in srgb, var(--text) 88%, var(--accent));
}

.admin-edit-question-btn:hover,
.admin-edit-question-btn:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 24%, var(--control));
}

.admin-edit-icon {
    font-size:16px;
    line-height:1;
}

.admin-delete-question-btn {
    margin-left:auto;
}

.admin-deleted-badge {
    border-color:color-mix(in srgb, var(--wrong) 58%, var(--border));
    color:color-mix(in srgb, var(--wrong) 82%, var(--text));
}

.admin-image-manager {
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in srgb, var(--control) 72%, var(--card));
}

.admin-image-manager-heading,
.admin-image-url-row,
.admin-image-item {
    display:flex;
    align-items:center;
    gap:10px;
}

.admin-image-manager-heading {
    justify-content:space-between;
}

.admin-image-manager-heading > div {
    display:grid;
    gap:3px;
}

.admin-image-manager-heading span,
.admin-image-item-copy span,
.admin-image-empty {
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
}

.admin-image-upload-btn {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 11px;
    border:1px solid color-mix(in srgb, var(--accent) 64%, var(--border));
    border-radius:7px;
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--text);
    cursor:pointer;
    font-size:12px;
    font-weight:780;
}

.admin-image-upload-btn input {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

.admin-image-list {
    display:grid;
    gap:7px;
}

.admin-image-item {
    min-width:0;
    padding:7px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--card);
}

.admin-image-item > img {
    width:64px;
    height:48px;
    flex:0 0 64px;
    object-fit:contain;
    border-radius:5px;
    background:var(--bg);
}

.admin-image-item-copy {
    min-width:0;
    flex:1 1 auto;
    display:grid;
    gap:3px;
}

.admin-image-item-copy strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-image-item-actions {
    display:flex;
    align-items:center;
    gap:4px;
    flex:0 0 auto;
}

.admin-image-icon-btn,
.admin-image-remove-btn {
    min-height:30px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:760;
}

.admin-image-icon-btn {
    width:30px;
}

.admin-image-remove-btn {
    padding:4px 8px;
    border-color:color-mix(in srgb, var(--wrong) 58%, var(--border));
    color:color-mix(in srgb, var(--wrong) 84%, var(--text));
}

.admin-image-icon-btn:disabled {
    cursor:default;
    opacity:0.35;
}

.admin-image-url-row input {
    min-width:0;
    flex:1 1 auto;
}

.admin-image-url-row button {
    flex:0 0 auto;
    min-height:40px;
}

body.is-native-app.quiz-screen-active .is-native-question-toolbar .admin-edit-question-btn {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:76px;
    min-width:76px;
    max-width:76px;
    height:36px;
    min-height:36px;
    max-height:36px;
    margin:0;
    padding:0 6px;
}

.admin-control-modal {
    width:min(1180px, 100%);
    max-height:calc(100svh - 28px);
    gap:16px;
}

.admin-control-head {
    align-items:center;
}

.admin-control-nav,
.admin-control-filter-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.admin-control-nav {
    padding:6px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--soft);
}

.admin-control-tab,
.admin-filter-btn,
.admin-question-result,
.admin-customer-result {
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
}

.admin-control-tab,
.admin-filter-btn {
    min-height:38px;
    padding:7px 12px;
    font-size:13px;
    font-weight:800;
}

.admin-control-tab.active,
.admin-filter-btn.active {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, var(--control));
    color:var(--text);
}

.admin-control-panel {
    min-height:180px;
}

.admin-summary-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
}

.admin-task-launcher {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
    padding:14px 16px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:10px;
    background:color-mix(in srgb, var(--accent) 6%, var(--soft));
}

.admin-task-launcher h3,
.admin-task-launcher p {
    margin:0;
}

.admin-task-launcher h3 {
    margin-top:3px;
    font-size:17px;
}

.admin-task-launcher p {
    margin-top:4px;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
}

.admin-task-launcher > button {
    flex:0 0 auto;
}

.admin-summary-card,
.admin-control-card {
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--soft);
}

.admin-summary-card {
    display:grid;
    gap:4px;
    padding:12px;
}

.admin-summary-card span,
.admin-card-kicker,
.admin-control-form label > span {
    color:color-mix(in srgb, var(--accent) 72%, var(--text));
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.admin-summary-card strong {
    font-size:24px;
}

.admin-control-list {
    display:grid;
    gap:10px;
    margin-bottom:18px;
}

.admin-control-section-heading,
.admin-card-heading,
.admin-editor-heading,
.admin-editor-heading-actions,
.admin-access-row,
.admin-payment-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.admin-control-section-heading {
    align-items:center;
    margin:14px 0 8px;
}

.admin-control-section-heading h3,
.admin-editor-heading h3,
.admin-card-heading h3 {
    margin:0;
    font-size:16px;
}

.admin-editor-heading-actions {
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.admin-control-section-heading span,
.admin-card-heading small,
.admin-card-meta,
.admin-card-secondary,
.admin-card-prompt {
    color:color-mix(in srgb, var(--text) 64%, transparent);
}

.admin-control-card {
    display:grid;
    gap:9px;
    padding:14px;
}

.admin-card-heading small {
    white-space:nowrap;
    font-size:11px;
}

.admin-card-meta,
.admin-card-prompt,
.admin-card-secondary {
    margin:0;
    font-size:13px;
    line-height:1.45;
}

.admin-card-prompt {
    color:color-mix(in srgb, var(--text) 80%, transparent);
}

.admin-control-form-grid,
.admin-control-form-row {
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:10px;
}

.admin-control-form-grid label,
.admin-control-form-row label,
.admin-editor-form > label {
    display:grid;
    flex:1 1 180px;
    gap:5px;
}

.admin-control-form-grid input,
.admin-control-form-grid select,
.admin-control-form-row input,
.admin-control-form-row select,
.admin-editor-form input,
.admin-editor-form select,
.admin-editor-form textarea {
    box-sizing:border-box;
    width:100%;
    min-height:40px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
    color:var(--text);
    font:inherit;
}

.admin-editor-form textarea {
    min-height:110px;
    resize:vertical;
    line-height:1.45;
}

.admin-editor-form .admin-explanation-textarea {
    min-height:190px;
}

.admin-control-grow {
    flex:2 1 300px !important;
}

.admin-search-btn {
    flex:0 0 auto;
    min-height:40px;
}

.admin-card-actions {
    align-items:center;
    justify-content:flex-end;
}

.admin-explanation-toggle-btn {
    width:auto;
    min-width:92px;
    margin:0;
    border-color:color-mix(in srgb, var(--accent) 58%, var(--border));
    color:color-mix(in srgb, var(--text) 84%, var(--accent));
}

.admin-explanation-toggle-btn.is-enabled {
    border-color:color-mix(in srgb, var(--correct) 58%, var(--border));
    color:color-mix(in srgb, var(--correct) 82%, var(--text));
}

.admin-explanation-toggle-btn:hover,
.admin-explanation-toggle-btn:focus-visible {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, var(--control));
}

.admin-question-results,
.admin-customer-list {
    display:grid;
    gap:7px;
    max-height:270px;
    overflow:auto;
    margin:12px 0;
}

.admin-question-result,
.admin-customer-result {
    display:grid;
    gap:3px;
    padding:10px 12px;
    text-align:left;
}

.admin-question-result {
    cursor:default;
}

.admin-question-result-select {
    display:grid;
    gap:3px;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    text-align:left;
}

.admin-question-result-select span {
    overflow:hidden;
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-question-result-actions {
    margin-top:2px;
}

.admin-question-result span,
.admin-customer-result span {
    overflow:hidden;
    color:color-mix(in srgb, var(--text) 68%, transparent);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-question-result.active,
.admin-customer-result.active {
    border-color:var(--accent);
}

.admin-editor-form {
    display:grid;
    gap:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.admin-answer-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.admin-answer-grid label {
    display:grid;
    gap:5px;
}

.admin-answer-grid label > span {
    color:color-mix(in srgb, var(--accent) 72%, var(--text));
    font-size:12px;
    font-weight:850;
}

.admin-published-badge {
    padding:5px 8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--correct) 18%, var(--soft));
    color:var(--correct);
    font-size:11px;
    font-weight:800;
}

.admin-customer-layout {
    display:grid;
    grid-template-columns:minmax(220px, .75fr) minmax(0, 1.5fr);
    gap:14px;
}

.admin-customer-detail {
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--soft);
}

.admin-customer-detail h4 {
    margin:5px 0 0;
}

.admin-access-row,
.admin-payment-row {
    align-items:center;
    padding:10px 0;
    border-top:1px solid var(--border);
}

.admin-access-row strong,
.admin-access-row span {
    display:block;
}

.admin-access-row span {
    margin-top:3px;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
}

.admin-access-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
}

.admin-danger-btn {
    border-color:color-mix(in srgb, var(--wrong) 60%, var(--border));
    color:color-mix(in srgb, var(--wrong) 85%, var(--text));
}

.admin-empty-state {
    margin:0;
    padding:18px;
    border:1px dashed var(--border);
    border-radius:8px;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    text-align:center;
}

@media (max-width:760px) {
    .admin-control-modal {
        max-height:calc(100svh - 16px);
        padding:14px;
    }

    .admin-summary-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .admin-customer-layout {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .admin-answer-grid {
        grid-template-columns:1fr;
    }

    .admin-card-heading,
    .admin-access-row {
        flex-direction:column;
    }

    .admin-access-actions {
        justify-content:flex-start;
    }

    .admin-image-manager-heading,
    .admin-image-url-row {
        align-items:stretch;
        flex-direction:column;
    }

    .admin-image-upload-btn,
    .admin-image-url-row button {
        width:100%;
    }

    .admin-image-item {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .admin-image-item-copy {
        max-width:calc(100% - 80px);
    }

    .admin-image-item-actions {
        width:100%;
        justify-content:flex-end;
    }
}

/* Private support inbox */
.support-bell-btn,
.native-support-bell-btn {
    position:relative;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid color-mix(in srgb, var(--border) 82%, var(--text));
    border-radius:8px;
    background:var(--control);
    color:color-mix(in srgb, var(--text) 78%, transparent);
    cursor:pointer;
    font:inherit;
}

.support-bell-btn:hover,
.support-bell-btn:focus-visible,
.native-support-bell-btn:hover,
.native-support-bell-btn:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 62%, var(--border));
    color:var(--text);
    outline:none;
}

.support-bell-btn svg,
.native-support-bell-btn svg {
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.support-bell-btn[hidden],
.native-support-bell-btn[hidden],
.support-bell-badge[hidden] {
    display:none !important;
}

.support-bell-badge {
    position:absolute;
    top:-5px;
    right:-5px;
    display:grid;
    place-items:center;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border:2px solid var(--bg);
    border-radius:999px;
    background:var(--wrong);
    color:#ffffff;
    font-size:10px;
    font-weight:850;
    line-height:1;
    box-shadow:none;
}

body.light .support-bell-badge {
    border-color:#ffffff;
    background:var(--wrong);
    color:#ffffff;
}

/* Native header actions share one restrained icon colour. The unread badge
   stays red, matching the website notification treatment, rather than using
   the orange cart-count colour. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .native-support-bell-btn,
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial,
    body.is-native-app:not(.public-screen) .native-cart-header-btn,
    body.is-native-app:not(.public-screen) .native-support-bell-btn.is-active,
    body.is-native-app:not(.public-screen) .native-toolbar-tutorial.is-active,
    body.is-native-app:not(.public-screen) .native-cart-header-btn.is-active {
        color:#dce5ee !important;
        -webkit-text-fill-color:#dce5ee !important;
    }

    body.light.is-native-app:not(.public-screen) .native-support-bell-btn,
    body.light.is-native-app:not(.public-screen) .native-toolbar-tutorial,
    body.light.is-native-app:not(.public-screen) .native-cart-header-btn,
    body.light.is-native-app:not(.public-screen) .native-support-bell-btn.is-active,
    body.light.is-native-app:not(.public-screen) .native-toolbar-tutorial.is-active,
    body.light.is-native-app:not(.public-screen) .native-cart-header-btn.is-active {
        color:#5d7184 !important;
        -webkit-text-fill-color:#5d7184 !important;
    }
}

.support-modal {
    width:min(920px, 100%);
    grid-template-rows:auto auto minmax(0, 1fr);
}

.support-layout {
    min-height:360px;
    display:grid;
    grid-template-columns:minmax(190px, 0.34fr) minmax(0, 1fr);
    gap:12px;
    overflow:hidden;
}

.support-thread-list,
.support-conversation {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow:auto;
}

.support-thread-list {
    padding:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--soft) 62%, var(--card));
}

.support-new-thread-btn,
.support-thread-item {
    width:100%;
    padding:10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--control);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    text-align:left;
}

.support-new-thread-btn {
    color:color-mix(in srgb, var(--accent) 78%, var(--text));
    font-size:13px;
    font-weight:800;
    text-align:center;
}

.support-thread-item.is-active,
.support-thread-item:hover,
.support-thread-item:focus-visible,
.support-new-thread-btn:hover,
.support-new-thread-btn:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 64%, var(--border));
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    outline:none;
}

.support-thread-item-heading,
.support-message-meta,
.support-composer-actions,
.admin-support-contact {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.support-thread-item-heading strong {
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.support-thread-item-heading em {
    flex:0 0 auto;
    color:var(--wrong);
    font-size:10px;
    font-style:normal;
    font-weight:800;
    text-transform:uppercase;
}

.support-thread-item small,
.admin-support-contact small {
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.support-conversation {
    overflow:hidden;
}

.support-message-list {
    flex:1 1 auto;
    min-height:160px;
    display:flex;
    flex-direction:column;
    gap:9px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--soft) 38%, var(--card));
    overflow:auto;
}

.support-message {
    max-width:84%;
    padding:9px 11px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--control);
}

.support-message.is-user {
    align-self:flex-end;
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
}

.support-message.is-admin {
    align-self:flex-start;
    border-left:3px solid var(--correct);
}

.support-message-meta strong {
    font-size:12px;
}

.support-message-meta small {
    color:color-mix(in srgb, var(--text) 52%, transparent);
    font-size:10px;
}

.support-message p,
.support-start-panel p,
.support-empty-copy {
    margin:6px 0 0;
    color:color-mix(in srgb, var(--text) 78%, transparent);
    font-size:13px;
    line-height:1.45;
}

.support-start-panel,
.support-empty-copy {
    margin:auto;
    padding:18px;
    text-align:center;
}

.support-start-panel strong {
    font-size:16px;
}

.support-composer {
    display:grid;
    gap:7px;
}

.support-composer textarea {
    width:100%;
    box-sizing:border-box;
    min-height:72px;
    resize:vertical;
    padding:10px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--control);
    color:var(--text);
    font:inherit;
}

.support-composer textarea:focus {
    border-color:var(--accent);
    outline:none;
}

.support-composer-actions {
    justify-content:flex-end;
}

.support-status {
    flex:1 1 auto;
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:12px;
}

.admin-support-layout {
    min-height:420px;
}

.admin-support-contact {
    justify-content:flex-start;
    padding:0 2px 7px;
}

.admin-support-contact strong {
    font-size:14px;
}

@media (max-width:720px) {
    .support-layout {
        min-height:460px;
        grid-template-columns:1fr;
        grid-template-rows:minmax(105px, 0.28fr) minmax(0, 1fr);
    }

    .support-thread-list {
        flex-direction:row;
        overflow-x:auto;
        overflow-y:hidden;
    }

    .support-new-thread-btn,
    .support-thread-item {
        flex:0 0 170px;
    }

    .support-message {
        max-width:92%;
    }
}

/* Quiet, task-first Admin Control Centre refresh. */
.admin-control-modal {
    width:min(1240px, calc(100vw - 32px));
    max-height:min(900px, calc(100svh - 32px));
    gap:18px;
    padding:22px;
    border-color:color-mix(in srgb, var(--border) 88%, var(--accent));
    border-radius:14px;
    background:var(--bg);
    box-shadow:0 24px 70px rgba(0,0,0,0.28);
}

.admin-control-head {
    align-items:flex-start;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.admin-control-head h2 {
    font-size:22px;
    letter-spacing:-.02em;
}

.admin-control-head span,
.admin-card-kicker,
.admin-control-form label > span {
    letter-spacing:.07em;
}

.admin-control-modal > .question-report-copy {
    max-width:70ch;
    margin-top:-6px;
    font-size:13px;
    font-weight:500;
}

.admin-control-nav {
    gap:3px;
    padding:3px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in srgb, var(--soft) 72%, var(--bg));
    overflow-x:auto;
    scrollbar-width:thin;
}

.admin-control-tab {
    min-height:36px;
    flex:0 0 auto;
    border-color:transparent;
    border-radius:6px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 66%, transparent);
    font-size:12px;
    transition:background .16s ease, border-color .16s ease, color .16s ease;
}

.admin-control-tab:hover,
.admin-control-tab:focus-visible {
    border-color:var(--border);
    background:color-mix(in srgb, var(--control) 72%, transparent);
    color:var(--text);
}

.admin-control-tab.active {
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border));
    background:color-mix(in srgb, var(--accent) 12%, var(--control));
    color:var(--text);
    box-shadow:inset 0 -2px 0 var(--accent);
}

.admin-control-panel {
    min-height:0;
}

.admin-summary-grid {
    gap:8px;
    margin-bottom:16px;
}

.admin-summary-card {
    gap:3px;
    padding:10px 12px;
    border-color:color-mix(in srgb, var(--border) 86%, transparent);
    border-radius:8px;
    background:transparent;
}

.admin-summary-card span {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:10px;
}

.admin-summary-card strong {
    font-size:21px;
    line-height:1.1;
}

.admin-control-filter-row {
    gap:6px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}

.admin-filter-btn {
    min-height:32px;
    padding:6px 10px;
    border-color:transparent;
    border-radius:6px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:12px;
}

.admin-filter-btn.active {
    border-color:color-mix(in srgb, var(--accent) 38%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, var(--control));
    color:var(--text);
}

.admin-control-section-heading {
    margin:18px 0 8px;
}

.admin-control-section-heading h3 {
    font-size:14px;
    letter-spacing:.01em;
}

.admin-control-section-heading span {
    min-width:24px;
    padding:3px 7px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:11px;
    text-align:center;
}

.admin-control-list {
    gap:8px;
    margin-bottom:14px;
}

.admin-control-card {
    gap:8px;
    padding:13px;
    border-color:color-mix(in srgb, var(--border) 88%, transparent);
    border-radius:9px;
    background:var(--card);
    box-shadow:none;
}

.admin-card-heading h3,
.admin-editor-heading h3 {
    font-size:15px;
}

.admin-card-heading small {
    color:color-mix(in srgb, var(--text) 52%, transparent);
}

.admin-control-card .admin-control-form-row {
    padding-top:3px;
}

.admin-control-form-grid,
.admin-control-form-row {
    gap:8px;
}

.admin-control-form-grid input,
.admin-control-form-grid select,
.admin-control-form-row input,
.admin-control-form-row select,
.admin-editor-form input,
.admin-editor-form select,
.admin-editor-form textarea {
    min-height:38px;
    border-radius:7px;
}

.admin-control-form-grid input:focus,
.admin-control-form-grid select:focus,
.admin-control-form-row input:focus,
.admin-control-form-row select:focus,
.admin-editor-form input:focus,
.admin-editor-form select:focus,
.admin-editor-form textarea:focus {
    border-color:color-mix(in srgb, var(--accent) 70%, var(--border));
    outline:2px solid color-mix(in srgb, var(--accent) 18%, transparent);
    outline-offset:1px;
}

.admin-question-results,
.admin-customer-list {
    max-height:240px;
    margin:10px 0;
}

.admin-question-result,
.admin-customer-result {
    border-color:color-mix(in srgb, var(--border) 88%, transparent);
    background:var(--card);
}

.admin-question-result:hover,
.admin-customer-result:hover,
.admin-question-result:focus-within,
.admin-customer-result:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 50%, var(--border));
}

.admin-question-result.active,
.admin-customer-result.active {
    border-color:color-mix(in srgb, var(--accent) 66%, var(--border));
    background:color-mix(in srgb, var(--accent) 8%, var(--card));
    box-shadow:inset 3px 0 0 var(--accent);
}

.admin-editor-form {
    gap:11px;
    margin-top:14px;
    padding-top:16px;
    border-top-color:var(--border);
}

.admin-editor-heading {
    align-items:center;
    padding-bottom:3px;
}

.admin-image-manager,
.admin-customer-detail {
    border-color:color-mix(in srgb, var(--border) 88%, transparent);
    border-radius:9px;
    background:var(--card);
}

.admin-empty-state {
    padding:24px 16px;
    border-color:color-mix(in srgb, var(--border) 82%, transparent);
    background:color-mix(in srgb, var(--soft) 36%, transparent);
}

.admin-notification-intro {
    display:grid;
    gap:4px;
    margin-bottom:12px;
}

.admin-notification-intro h3 {
    margin:0;
    font-size:16px;
}

.admin-notification-intro p {
    margin:0;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:13px;
    line-height:1.45;
}

.admin-notification-composer {
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:9px;
    background:color-mix(in srgb, var(--accent) 5%, var(--card));
}

.admin-notification-composer textarea {
    min-height:120px;
    resize:vertical;
    line-height:1.45;
}

.admin-notification-admin-card.is-archived {
    opacity:.62;
}

.admin-published-badge.is-archived {
    background:color-mix(in srgb, var(--text) 10%, var(--soft));
    color:color-mix(in srgb, var(--text) 62%, transparent);
}

.site-notification-root {
    position:fixed;
    z-index:2500;
    top:16px;
    right:16px;
    width:min(380px, calc(100vw - 32px));
    pointer-events:none;
}

.site-notification-panel {
    display:grid;
    gap:8px;
    padding:10px;
    border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius:12px;
    background:color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow:0 18px 48px rgba(0,0,0,.22);
    pointer-events:auto;
    backdrop-filter:blur(16px);
}

.site-notification-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 4px 3px;
    color:var(--text);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.site-notification-heading span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 18%, var(--soft));
    color:var(--accent);
    font-size:11px;
    letter-spacing:0;
}

.site-notification-list {
    display:grid;
    gap:7px;
}

.site-notification-card {
    display:grid;
    gap:6px;
    padding:10px 11px;
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:8px;
    background:color-mix(in srgb, var(--soft) 68%, var(--card));
}

.site-notification-card.is-success {
    border-left-color:#22c55e;
}

.site-notification-card.is-warning {
    border-left-color:#f59e0b;
}

.site-notification-card-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.site-notification-card-heading strong {
    font-size:13px;
    line-height:1.3;
}

.site-notification-card-heading button {
    flex:0 0 auto;
    width:24px;
    height:24px;
    margin:-3px -4px 0 0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    cursor:pointer;
    font:inherit;
    font-size:19px;
    line-height:1;
}

.site-notification-card-heading button:hover,
.site-notification-card-heading button:focus-visible {
    background:color-mix(in srgb, var(--text) 10%, transparent);
    color:var(--text);
}

.site-notification-card p {
    margin:0;
    color:color-mix(in srgb, var(--text) 78%, transparent);
    font-size:13px;
    line-height:1.45;
}

.site-notification-card small {
    color:color-mix(in srgb, var(--text) 50%, transparent);
    font-size:10px;
}

body.is-native-app .site-notification-root {
    top:calc(env(safe-area-inset-top) + 74px);
}

@media (max-width:760px) {
    .admin-control-modal {
        width:calc(100vw - 16px);
        max-height:calc(100svh - 16px);
        padding:16px;
        gap:14px;
    }

    .admin-control-head {
        padding-bottom:11px;
    }

    .admin-control-head h2 {
        font-size:20px;
    }

    .admin-control-nav {
        margin-inline:-2px;
    }

    .admin-summary-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:480px) {
    .admin-control-modal {
        padding:13px;
    }

    .admin-summary-card strong {
        font-size:19px;
    }

    .admin-control-form-grid,
    .admin-control-form-row {
        align-items:stretch;
        flex-direction:column;
    }

    .site-notification-root {
        top:10px;
        right:10px;
        width:calc(100vw - 20px);
    }

    body.is-native-app .site-notification-root {
        top:calc(env(safe-area-inset-top) + 68px);
    }

    .admin-search-btn {
        width:100%;
    }
}

/* Mobile app shell: keep the page itself scrollable while the bottom nav
   remains fixed. Some webviews treat a constrained body as the scroll lock. */
@media (max-width:720px), (display-mode:standalone) {
    html.tailwind-native,
    html.tailwind-native body,
    body.is-mobile-app-shell:not(.public-screen) {
        height:auto !important;
        min-height:100%;
        max-height:none !important;
        overflow-y:scroll !important;
        -webkit-overflow-scrolling:touch;
    }

    body.is-mobile-app-shell:not(.public-screen) .content-wrapper,
    body.is-mobile-app-shell:not(.public-screen) .active-screen,
    body.is-mobile-app-shell:not(.public-screen) #screen-dashboard {
        height:auto !important;
        min-height:0;
        max-height:none !important;
        overflow:visible !important;
    }

    body.is-mobile-app-shell:not(.public-screen) .content-wrapper {
        padding-bottom:calc(168px + env(safe-area-inset-bottom)) !important;
    }
}

/* First-pass landing hero typography: bring the public hero closer to the
   app's clean system-sans hierarchy while keeping the aviation backdrop. */
.landing-hero-night-trial .hero-kicker {
    margin-bottom:18px;
    gap:10px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    font-weight:850;
    letter-spacing:.12em;
    line-height:1.2;
}

.landing-hero-night-trial .hero-kicker-exams,
.landing-hero-night-trial .hero-kicker-logbooks {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border:1px solid rgba(148,203,255,0.32);
    border-radius:999px;
    background:rgba(7,24,43,0.46);
    text-shadow:0 5px 18px rgba(0,0,0,0.48);
}

.landing-hero-night-trial .hero-kicker-logbooks {
    border-color:rgba(131,201,157,0.34);
    background:rgba(11,35,31,0.44);
}

.landing-hero-night-trial .hero-kicker-divider {
    color:rgba(226,239,250,0.62);
    font-size:16px;
    letter-spacing:0;
}

.landing-hero-night-trial .hero-title {
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:clamp(58px, 8.2vw, 124px);
    line-height:.92;
    letter-spacing:-.045em;
    font-weight:850;
    text-shadow:0 14px 34px rgba(0,0,0,0.52);
}

.landing-hero-night-trial .hero-title > span:first-child {
    letter-spacing:.035em;
    transform:none;
}

.landing-hero-night-trial .hero_second_title {
    margin-top:16px;
    width:auto;
    max-width:min(780px, 58vw);
    font-family:inherit;
    font-size:clamp(18px, 2.6vw, 34px);
    font-weight:750;
    letter-spacing:.035em;
    line-height:1.1;
    white-space:pre-line;
    color:rgba(214,234,250,0.78);
    text-shadow:0 10px 28px rgba(0,0,0,0.54);
}

.landing-hero-night-trial .hero-support {
    max-width:520px;
    margin:18px 0 0;
    color:rgba(226,239,250,0.78);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:clamp(14px, 1.2vw, 16px);
    font-weight:500;
    line-height:1.5;
    text-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.landing-hero-night-trial .hero-trust {
    margin:11px 0 0;
    color:rgba(226,239,250,0.62);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1.4;
    text-shadow:0 6px 18px rgba(0,0,0,0.46);
}

/* Restore stronger contrast after the quieter hero copy pass. */
.landing-hero-night-trial .hero_second_title {
    display:flex;
    flex-direction:column;
    gap:3px;
    background:none;
    color:#ffffff;
    -webkit-text-fill-color:initial;
    text-transform:none;
    text-shadow:0 12px 30px rgba(0,0,0,0.48);
}

.landing-hero-night-trial .hero-title-line-exams,
.landing-hero-night-trial .hero-title-line-logbook {
    display:block;
    width:max-content;
    max-width:100%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.landing-hero-night-trial .hero-title-line-exams {
    background-image:linear-gradient(100deg, #38bdf8 0%, #bfdbfe 100%);
}

.landing-hero-night-trial .hero-title-line-logbook {
    background-image:linear-gradient(100deg, #86efac 0%, #2dd4bf 100%);
}

.landing-hero-night-trial .hero-support {
    max-width:520px;
    color:rgba(248,251,255,0.94);
    text-shadow:0 8px 24px rgba(0,0,0,0.58);
}

.landing-hero-night-trial .hero-trust {
    color:#a7f3c1;
    text-shadow:0 6px 18px rgba(0,0,0,0.52);
}

/* Keep the supporting copy in the clear sky area beside the aircraft. */
.landing-hero-night-trial .hero-support {
    max-width:400px;
    text-wrap:balance;
    white-space:pre-line;
}

.landing-hero-night-trial .hero-trust {
    max-width:360px;
    text-wrap:balance;
}

@media (max-width:1100px) {
    .landing-hero-night-trial .hero-support {
        max-width:330px;
        font-size:14px;
        line-height:1.42;
    }

    .landing-hero-night-trial .hero-trust {
        max-width:300px;
        font-size:11px;
        line-height:1.35;
    }
}

@media (max-width:720px) {
    .landing-hero-night-trial .hero-support {
        max-width:min(320px, calc(100vw - 40px));
    }

    .landing-hero-night-trial .hero-trust {
        max-width:min(280px, calc(100vw - 40px));
    }
}

/* Refine the hero category tags so they support the headline instead of
   competing with it. */
.landing-hero-night-trial .hero-kicker {
    max-width:640px;
    margin-bottom:20px;
    gap:8px;
    font-size:12px;
    letter-spacing:.09em;
}

.landing-hero-night-trial .hero-kicker-exams,
.landing-hero-night-trial .hero-kicker-logbooks {
    min-height:0;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(5, 24, 43, 0.72);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 0, 0, 0.16);
    white-space:nowrap;
}

.landing-hero-night-trial .hero-kicker-exams {
    border-color:rgba(56, 189, 248, 0.5);
}

.landing-hero-night-trial .hero-kicker-logbooks {
    border-color:rgba(74, 222, 128, 0.48);
    background:rgba(8, 35, 31, 0.72);
}

.landing-hero-night-trial .hero-kicker-divider {
    width:4px;
    height:4px;
    flex:0 0 auto;
    border-radius:50%;
    background:#cbd5e1;
    font-size:0;
    opacity:.85;
}

@media (max-width:720px) {
    .landing-hero-night-trial .hero-kicker {
        max-width:calc(100vw - 28px);
        gap:6px;
        font-size:10px;
        letter-spacing:.07em;
    }

    .landing-hero-night-trial .hero-kicker-exams,
    .landing-hero-night-trial .hero-kicker-logbooks {
        padding:6px 9px;
    }
}

/* Narrow native landing layout: preserve a clear sky area for the message. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-night-trial {
        background-position:30% center !important;
        background-size:auto 112% !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        box-sizing:border-box;
        min-height:100dvh;
        padding:calc(76px + env(safe-area-inset-top)) 16px 190px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .mobile-landing-brand {
        gap:6px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .mobile-landing-brand .wind-logo {
        width:54px;
        height:30px;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        font-size:58px !important;
        line-height:.9;
        letter-spacing:.02em !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        max-width:calc(100vw - 36px);
        gap:3px;
        font-size:9px;
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams {
        font-size:clamp(12px, 3.7vw, 16px);
        letter-spacing:.08em;
    }

    body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        font-size:9px;
        letter-spacing:.12em;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .hero-support {
        max-width:min(300px, calc(100vw - 48px));
        margin-top:12px;
        font-size:13px;
        line-height:1.38;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .hero-trust {
        max-width:min(270px, calc(100vw - 48px));
        margin-top:8px;
        font-size:10px;
        line-height:1.3;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-panel {
        width:min(360px, calc(100vw - 32px));
        max-width:calc(100vw - 32px);
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-choice-actions {
        gap:8px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-choice-actions > button {
        min-height:44px;
        border-radius:10px;
        font-size:13px;
    }
}

@media (max-width:420px) {
    body.is-native-app.public-screen .landing-nav {
        padding-top:calc(10px + env(safe-area-inset-top));
    }

    body.is-native-app.public-screen .landing-nav-actions {
        max-width:calc(100vw - 24px);
        gap:6px;
    }

    body.is-native-app.public-screen .landing-nav-actions button {
        min-height:38px;
        border-radius:7px;
        font-size:12px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        padding-top:calc(62px + env(safe-area-inset-top));
        padding-bottom:176px;
    }

    body.is-native-app.public-screen .mobile-landing-brand-title {
        font-size:50px !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .hero-support {
        max-width:270px;
        font-size:12px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .hero-trust {
        max-width:245px;
        font-size:9px;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-panel {
        bottom:calc(10px + env(safe-area-inset-bottom));
    }
}

/* Reserve a real scroll buffer for the fixed bottom app navigation. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) {
        min-height:100dvh;
        padding-bottom:calc(96px + env(safe-area-inset-bottom));
        overflow-y:auto;
        scroll-padding-bottom:calc(144px + env(safe-area-inset-bottom));
    }

    body.is-native-app:not(.public-screen) .content-wrapper {
        padding-bottom:calc(152px + env(safe-area-inset-bottom));
    }
}

/* Keep the public hero copy in the clear sky area beside the aircraft. */
.landing-hero-night-trial .landing-hero-content {
    align-items:flex-start;
    text-align:left;
}

.landing-hero-night-trial .hero-kicker {
    justify-content:flex-start;
}

.landing-hero-night-trial .hero_second_title {
    align-items:flex-start;
    text-align:left;
}

.landing-hero-night-trial .hero-support {
    align-self:flex-start;
    width:100%;
    margin-inline:0;
    text-align:left;
}

@media (max-width:560px) {
    .landing-hero-night-trial .landing-hero-content {
        align-items:center;
        text-align:center;
    }

    .landing-hero-night-trial .hero-kicker {
        justify-content:center;
    }

    .landing-hero-night-trial .hero_second_title {
        align-items:center;
        text-align:center;
    }

    .landing-hero-night-trial .hero-support {
        align-self:center;
        width:100%;
        margin-inline:auto;
        text-align:center;
    }

    .landing-hero-night-trial .hero-trust {
        margin-inline:auto;
        text-align:center;
    }
}

/* Mobile practice needs room for the answer dock and must not let a collapsed
   sidebar control occupy a column beside the progress filters. */
@media (max-width:720px) {
    body.is-mobile-app-shell.quiz-screen-active,
    body.is-native-app.quiz-screen-active {
        min-height:100dvh;
        overflow-y:auto !important;
        scroll-padding-bottom:calc(176px + env(safe-area-inset-bottom));
    }

    body.is-mobile-app-shell.quiz-screen-active .content-wrapper,
    body.is-native-app.quiz-screen-active .content-wrapper {
        padding-bottom:calc(184px + env(safe-area-inset-bottom)) !important;
    }

    body.is-mobile-app-shell.quiz-screen-active .quiz-study-layout.sidebar-collapsed,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed {
        display:block;
    }

    body.is-mobile-app-shell.quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar,
    body.is-native-app.quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar {
        display:none !important;
    }
}

/* Narrow practice layout: keep progress controls in separate rows and keep
   the collapsed study navigation in a stable left rail. */
@media (max-width:760px) {
    body:not(.is-native-app).quiz-screen-active .progress-summary-row {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster {
        order:1;
    }

    body:not(.is-native-app).quiz-screen-active .progress-summary {
        order:2;
    }

    body:not(.is-native-app).quiz-screen-active .progress-review-cluster {
        order:3;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right {
        order:4;
        display:flex;
    }

    body.is-mobile-app-shell.quiz-screen-active .progress-summary-row {
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "mode"
            "summary"
            "reviews"
            "search";
        row-gap:6px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-mode-cluster,
    body:not(.is-native-app).quiz-screen-active .progress-summary,
    body:not(.is-native-app).quiz-screen-active .progress-review-cluster,
    body:not(.is-native-app).quiz-screen-active .quiz-toolbar-right,
    body.is-mobile-app-shell.quiz-screen-active .quiz-mode-cluster,
    body.is-mobile-app-shell.quiz-screen-active .progress-summary,
    body.is-mobile-app-shell.quiz-screen-active .progress-review-cluster,
    body.is-mobile-app-shell.quiz-screen-active .quiz-toolbar-right {
        width:100%;
        min-width:0;
    }

    body:not(.is-native-app).quiz-screen-active .progress-review-cluster,
    body.is-mobile-app-shell.quiz-screen-active .progress-review-cluster {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:6px;
        justify-self:stretch;
    }

    body:not(.is-native-app).quiz-screen-active .progress-status-shortcuts,
    body.is-mobile-app-shell.quiz-screen-active .progress-status-shortcuts {
        width:100%;
        min-width:0;
    }

    body:not(.is-native-app).quiz-screen-active .progress-map-toggle,
    body.is-mobile-app-shell.quiz-screen-active .progress-map-toggle {
        min-width:104px;
        width:104px;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed {
        display:grid;
        grid-template-columns:44px minmax(0,1fr);
        gap:10px;
        align-items:start;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar,
    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .quiz-stage,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .quiz-stage {
        grid-row:1;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar {
        grid-column:1;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .quiz-stage,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .quiz-stage {
        grid-column:2;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar {
        box-sizing:border-box;
        display:block !important;
        width:44px;
        height:54px;
        min-height:54px;
        padding:8px 6px;
        position:relative;
        overflow:visible;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar-section,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .module-sidebar-section {
        display:none !important;
    }

    body:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .sidebar-toggle,
    body.is-mobile-app-shell:not(.is-native-app).quiz-screen-active .quiz-study-layout.sidebar-collapsed .sidebar-toggle {
        top:9px;
        left:50%;
        right:auto;
        width:34px;
        height:34px;
        min-height:34px;
        transform:translateX(-50%);
    }
}

@media (max-width:520px) {
    body:not(.is-native-app).quiz-screen-active .progress-review-cluster,
    body.is-mobile-app-shell.quiz-screen-active .progress-review-cluster {
        grid-template-columns:minmax(0,1fr);
    }

    body:not(.is-native-app).quiz-screen-active .progress-map-toggle,
    body.is-mobile-app-shell.quiz-screen-active .progress-map-toggle {
        width:100%;
        min-width:0;
    }
}

@media (max-width:760px) {
    body.is-native-app.quiz-screen-active .progress-review-cluster {
        display:grid;
        grid-template-columns:minmax(0,1fr);
        width:100%;
        justify-self:stretch;
    }

    body.is-native-app.quiz-screen-active .progress-status-shortcuts,
    body.is-native-app.quiz-screen-active .progress-map-toggle {
        width:100%;
        min-width:0;
    }
}

/* Exam navigation matches Practice: outlined Back arrow and blue Next arrow. */
.exam-answer-controls .exam-answer-nav-cluster {
    display:flex;
    align-items:center;
    gap:8px;
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn {
    box-sizing:border-box;
    width:48px;
    min-width:48px;
    height:44px;
    min-height:44px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid color-mix(in srgb, var(--accent) 74%, var(--border));
    border-radius:8px;
    background:transparent !important;
    color:var(--text) !important;
    font-size:0;
    -webkit-text-fill-color:var(--text);
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn::before {
    display:grid;
    width:100%;
    height:100%;
    place-items:center;
    color:currentColor;
    font-size:27px;
    font-weight:500;
    line-height:1;
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn-prev::before {
    content:"←";
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn-next {
    border-color:#2563eb;
    background:#2563eb !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
    box-shadow:0 10px 24px rgba(37,99,235,0.22);
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn-next::before {
    content:"→";
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn:hover,
.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 88%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, var(--control)) !important;
    color:var(--text) !important;
    -webkit-text-fill-color:var(--text);
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn-next:hover,
.exam-answer-controls .exam-answer-nav-cluster .answer-nav-btn-next:focus-visible {
    border-color:#1d4ed8;
    background:#1d4ed8 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
}

.exam-answer-controls .exam-answer-nav-cluster .answer-nav-text {
    display:none;
}

/* Light website dashboard: use a clear blue table with readable slate text. */
body.light .subject-list-panel {
    border-color:#93add6;
    background:linear-gradient(145deg, #f8fbff 0%, #ffffff 54%, #f2f7ff 100%);
    box-shadow:0 14px 30px rgba(30, 64, 175, 0.10);
}

body.light .subject-list-heading {
    border-bottom-color:#a9bfdf;
    background:linear-gradient(110deg, #e8f1ff, #f8fbff 74%);
}

body.light:not(.is-native-app) .subject-list-heading-kicker {
    color:#2563eb;
}

body.light:not(.is-native-app) .subject-list-header {
    border-bottom:1px solid #b7c8e3;
    background:#dbe7f8;
    color:#334155;
}

body.light:not(.is-native-app) .subject-list-row {
    border-top-color:#d6dfed;
    color:#0f172a;
}

body.light:not(.is-native-app) .subject-list-row:hover {
    background:#eef5ff;
    box-shadow:inset 3px 0 0 #3b82f6;
}

body.light:not(.is-native-app) .subject-list-row.is-subject-locked {
    background:#f1f5f9;
    color:#475569;
}

body.light:not(.is-native-app) .subject-list-row.is-practice-ready {
    background:#ffffff;
    color:#0f172a;
}

body.light:not(.is-native-app) .subject-validity {
    color:#64748b;
}

body.light:not(.is-native-app) .subject-progress-track {
    background:#dbe4f0;
}

body.light .subject-progress-fill {
    background:linear-gradient(90deg, #2563eb, #38bdf8);
}

body.light:not(.is-native-app) .subject-progress-cell > span {
    color:#334155;
    font-weight:750;
}

body.light .subject-practice-btn {
    border-color:#2563eb;
    background:linear-gradient(135deg, #2563eb, #3b82f6);
    color:#ffffff;
    box-shadow:0 6px 14px rgba(37, 99, 235, 0.18);
}

body.light:not(.is-native-app) .subject-practice-btn:hover,
body.light:not(.is-native-app) .subject-practice-btn:focus-visible {
    border-color:#1d4ed8;
    background:#1d4ed8;
    color:#ffffff;
}

/* Keep the website Practice "More" control readable in light mode. */
body.light:not(.is-native-app).quiz-screen-active .question-card-actions #question-action-menu-toggle {
    border-color:#94a3b8;
    background:#ffffff;
    color:#334155;
    -webkit-text-fill-color:#334155;
}

body.light:not(.is-native-app).quiz-screen-active .question-card-actions #question-action-menu-toggle:hover,
body.light:not(.is-native-app).quiz-screen-active .question-card-actions #question-action-menu-toggle:focus-visible {
    border-color:#2563eb;
    background:#dbeafe;
    color:#1d4ed8;
    -webkit-text-fill-color:#1d4ed8;
}

body.light:not(.is-native-app).quiz-screen-active .question-card-actions #question-action-menu-toggle .more-action-label {
    color:inherit;
    -webkit-text-fill-color:inherit;
}

/* Light dashboard refinement: use quiet, solid surfaces instead of decorative
   gradients. Dark mode keeps its existing atmospheric treatment. */
body.light .dashboard-course-pricing-card,
body.light .dashboard-course-pricing-card.is-expanded {
    background:#ffffff;
    background-image:none;
}

body.light .dashboard-course-pricing-card .dashboard-pricing-disclosure,
body.light .dashboard-course-pricing-card.is-expanded .dashboard-pricing-disclosure {
    background:#f7f9fc;
    background-image:none;
}

body.light:not(.is-native-app) .subject-list-panel {
    background:#ffffff;
    background-image:none;
    box-shadow:0 10px 26px rgba(15, 23, 42, 0.07);
}

body.light:not(.is-native-app) .subject-list-heading {
    background:#f8fafc;
    background-image:none;
}

body.light:not(.is-native-app) .subject-progress-fill {
    background:#2563eb;
}

body.light:not(.is-native-app) .subject-practice-btn {
    background:#2563eb;
}

.admin-image-qa-panel {
    display:grid;
    gap:14px;
}

.admin-image-qa-intro,
.admin-image-qa-card-head,
.admin-image-qa-image-label {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.admin-image-qa-intro p {
    margin:5px 0 0;
    color:color-mix(in srgb, var(--text) 72%, transparent);
    font-size:13px;
}

.admin-image-qa-filters {
    position:sticky;
    top:0;
    z-index:3;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--soft);
}

.admin-image-qa-filters label {
    min-width:140px;
}

.admin-image-qa-note {
    margin:0;
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:12px;
}

.admin-image-qa-summary {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}

.admin-image-qa-summary > div {
    display:grid;
    gap:4px;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--soft);
}

.admin-image-qa-summary span,
.admin-image-qa-topic,
.admin-image-qa-caption,
.admin-image-qa-source {
    color:color-mix(in srgb, var(--text) 62%, transparent);
    font-size:11px;
}

.admin-image-qa-summary span {
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.admin-image-qa-summary strong {
    font-size:22px;
}

.admin-image-qa-list {
    display:grid;
    gap:22px;
}

.admin-image-qa-section-tools {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-block:1px solid var(--border);
}

.admin-image-qa-jumps,
.admin-image-qa-expand-actions,
.admin-image-qa-card-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.admin-image-qa-jumps {
    min-width:0;
}

.admin-image-qa-jumps strong {
    margin-right:3px;
    color:color-mix(in srgb, var(--text) 64%, transparent);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.admin-image-qa-jumps button {
    min-height:29px;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:6px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:720;
}

.admin-image-qa-jumps button:hover,
.admin-image-qa-jumps button:focus-visible {
    border-color:color-mix(in srgb, var(--accent) 48%, var(--border));
    background:color-mix(in srgb, var(--accent) 8%, var(--control));
}

.admin-image-qa-expand-actions {
    flex:0 0 auto;
}

.admin-image-qa-subject-group {
    display:grid;
    gap:10px;
}

.admin-image-qa-subject-head {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:0 2px;
}

.admin-image-qa-subject-head h3 {
    margin:0;
    font-size:19px;
}

.admin-image-qa-subject-head span {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:760;
}

.admin-image-qa-section {
    scroll-margin-top:16px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:11px;
    background:color-mix(in srgb, var(--soft) 74%, transparent);
}

.admin-image-qa-section > summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
    list-style:none;
    background:color-mix(in srgb, var(--control) 72%, transparent);
}

.admin-image-qa-section > summary::-webkit-details-marker {
    display:none;
}

.admin-image-qa-section > summary span {
    font-size:14px;
    font-weight:820;
}

.admin-image-qa-section > summary small {
    color:color-mix(in srgb, var(--text) 58%, transparent);
    font-size:11px;
    font-weight:700;
}

.admin-image-qa-section > summary::after {
    content:"+";
    color:color-mix(in srgb, var(--text) 60%, transparent);
    font-size:18px;
    line-height:1;
}

.admin-image-qa-section[open] > summary::after {
    content:"−";
}

.admin-image-qa-section-cards {
    display:grid;
    gap:10px;
    padding:10px;
}

.admin-image-qa-card {
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--control);
}

.admin-image-qa-card h3 {
    margin:2px 0 0;
    font-size:16px;
}

.admin-image-qa-topic {
    max-width:100%;
    text-align:left;
}

.admin-image-qa-card-actions {
    justify-content:flex-end;
    max-width:52%;
}

.admin-image-qa-question {
    margin:0;
    color:color-mix(in srgb, var(--text) 88%, transparent);
    font-size:14px;
    line-height:1.5;
}

.admin-image-qa-images {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:14px;
}

.admin-image-qa-figure {
    display:grid;
    align-content:start;
    gap:9px;
    min-width:0;
    margin:0;
    padding:10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--control);
}

.admin-image-qa-figure.is-reviewed {
    border-color:color-mix(in srgb, var(--correct) 42%, var(--border));
}

.admin-image-qa-open {
    display:block;
    width:100%;
    min-height:210px;
    padding:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:8px;
    background:color-mix(in srgb, var(--bg) 78%, #000);
    cursor:zoom-in;
}

.admin-image-qa-open img {
    display:block;
    width:100%;
    height:260px;
    object-fit:contain;
}

.admin-image-qa-caption {
    display:grid;
    gap:3px;
    line-height:1.35;
}

.admin-image-qa-image-label {
    align-items:center;
    color:var(--text);
    font-size:12px;
}

.admin-image-qa-current-verdict {
    padding:2px 6px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
}

.admin-image-qa-current-verdict.is-ok { background:color-mix(in srgb, var(--correct) 18%, transparent); color:var(--correct); }
.admin-image-qa-current-verdict.is-watermark,
.admin-image-qa-current-verdict.is-wrong,
.admin-image-qa-current-verdict.is-blurry,
.admin-image-qa-current-verdict.is-missing,
.admin-image-qa-current-verdict.is-duplicate { background:color-mix(in srgb, var(--wrong) 18%, transparent); color:var(--wrong); }

.admin-image-qa-source {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-image-qa-verdicts {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.admin-image-qa-verdict,
.admin-image-qa-clear {
    min-height:32px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--soft);
    color:var(--text);
    cursor:pointer;
    font:inherit;
    font-size:11px;
    font-weight:750;
}

.admin-image-qa-verdict.active {
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 18%, var(--control));
}

.admin-image-qa-verdict.is-ok.active {
    border-color:var(--correct);
    background:color-mix(in srgb, var(--correct) 18%, var(--control));
}

.admin-image-qa-verdict.is-watermark.active,
.admin-image-qa-verdict.is-wrong.active,
.admin-image-qa-verdict.is-blurry.active,
.admin-image-qa-verdict.is-missing.active,
.admin-image-qa-verdict.is-duplicate.active {
    border-color:var(--wrong);
    background:color-mix(in srgb, var(--wrong) 18%, var(--control));
}

.admin-image-qa-clear {
    margin-left:auto;
    color:color-mix(in srgb, var(--text) 62%, transparent);
}

@media (max-width:720px) {
    .admin-image-qa-summary {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .admin-image-qa-intro,
    .admin-image-qa-card-head,
    .admin-image-qa-section-tools,
    .admin-task-launcher {
        flex-direction:column;
    }

    .admin-image-qa-topic,
    .admin-image-qa-card-actions {
        max-width:none;
        text-align:left;
    }

    .admin-image-qa-card-actions {
        align-items:flex-start;
    }

    .admin-image-qa-expand-actions {
        width:100%;
    }

    .admin-image-qa-open img {
        height:220px;
    }
}
/* Keep the aircraft centered in the narrow native landing hero. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-night-trial {
        background-position:50% center !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial .landing-hero-content {
        padding-top:calc(clamp(132px, 18svh, 166px) + env(safe-area-inset-top)) !important;
    }
}

/* Native dashboard course identity: keep PPL, CPL, and Night Rating visually
   distinct instead of making every tab use the shared blue accent. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"] {
        color:#7dd3fc;
    }

    body.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"] {
        color:#5eead4;
    }

    body.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"] {
        color:#c4b5fd;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"] {
        color:#2563eb;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"] {
        color:#0f766e;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"] {
        color:#7c3aed;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="PPL"] {
        --native-course-accent:#38bdf8;
        --native-course-accent-soft:rgba(56,189,248,0.14);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="CPL"] {
        --native-course-accent:#2dd4bf;
        --native-course-accent-soft:rgba(45,212,191,0.13);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="Night Rating"] {
        --native-course-accent:#a78bfa;
        --native-course-accent-soft:rgba(167,139,250,0.15);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .dashboard-course-trial,
    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-course-plan-row.is-featured {
        border-color:color-mix(in srgb, var(--native-course-accent, var(--accent)) 34%, var(--border));
        background:color-mix(in srgb, var(--native-course-accent-soft, transparent) 80%, var(--card));
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .dashboard-course-trial-btn,
    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-course-plan-row > button:not(.is-in-cart) {
        border-color:var(--native-course-accent, var(--accent));
        background:var(--native-course-accent, var(--accent));
    }
}

/* Native Practice toolbar: keep search and question navigation compact on
   one header row instead of giving each control a full-width row. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .progress-summary-row {
        grid-template-columns:minmax(0,1fr) minmax(108px,0.72fr);
        grid-template-areas:
            "mode search"
            "summary summary"
            "reviews reviews";
        column-gap:6px;
        row-gap:6px;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right {
        width:100%;
        min-width:0;
        padding-right:0;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        width:100%;
        min-width:0;
    }

    body.is-native-app.quiz-screen-active .progress-review-cluster {
        width:auto;
        max-width:100%;
        display:flex;
        align-items:center;
        justify-self:center;
        gap:6px;
    }

    body.is-native-app.quiz-screen-active .progress-status-shortcuts {
        width:auto;
        max-width:100%;
        display:flex;
    }

    body.is-native-app.quiz-screen-active .progress-map-toggle {
        width:46px;
        min-width:46px;
    }
}

/* The Practice tab remains an available action while an exam is running. */
body.is-native-app.quiz-screen-active.native-exam-quiz #mode-practice {
    border:1px solid color-mix(in srgb, #60a5fa 68%, var(--border));
    background:color-mix(in srgb, #2563eb 13%, var(--control));
    color:#93c5fd;
    cursor:pointer;
    opacity:1;
}

body.is-native-app.quiz-screen-active.native-exam-quiz #mode-practice:hover,
body.is-native-app.quiz-screen-active.native-exam-quiz #mode-practice:focus-visible {
    border-color:#60a5fa;
    background:color-mix(in srgb, #2563eb 22%, var(--control));
    color:#dbeafe;
    outline:none;
}

body.light.is-native-app.quiz-screen-active.native-exam-quiz #mode-practice {
    border-color:#93c5fd;
    background:#eff6ff;
    color:#1d4ed8;
}

/* Native course identity: the selected course label and its dashboard cards
   should share one accent instead of falling back to the global blue. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"].active,
    body.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"].active .course-access-title {
        color:#7dd3fc !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"].active,
    body.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"].active .course-access-title {
        color:#5eead4 !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"].active,
    body.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"].active .course-access-title {
        color:#c4b5fd !important;
    }

    body.is-native-app:not(.public-screen) .course-access-pill.active {
        background:color-mix(in srgb, currentColor 8%, transparent) !important;
        border-radius:7px !important;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="PPL"] {
        --native-course-accent:#38bdf8;
        --native-course-accent-soft:rgba(56,189,248,0.15);
        --accent:var(--native-course-accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="CPL"] {
        --native-course-accent:#2dd4bf;
        --native-course-accent-soft:rgba(45,212,191,0.14);
        --accent:var(--native-course-accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="Night Rating"] {
        --native-course-accent:#a78bfa;
        --native-course-accent-soft:rgba(167,139,250,0.16);
        --accent:var(--native-course-accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-my-subjects-section {
        border-color:color-mix(in srgb, var(--native-course-accent) 50%, var(--border));
        background:var(--card);
        box-shadow:none;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-my-subjects-section > h3 {
        color:color-mix(in srgb, var(--native-course-accent) 84%, var(--text));
        border-bottom-color:color-mix(in srgb, var(--native-course-accent) 28%, var(--border));
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-entry {
        border-bottom-color:color-mix(in srgb, var(--native-course-accent) 24%, var(--border));
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-row {
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-row:active {
        background:transparent;
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-progress {
        background:color-mix(in srgb, var(--native-course-accent) 18%, var(--border));
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-progress > span {
        background:var(--native-course-accent);
    }

    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-chevron,
    body.is-native-app:not(.public-screen) .native-subject-dashboard .native-offline-subject-btn {
        color:color-mix(in srgb, var(--native-course-accent) 78%, var(--text));
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"].active,
    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="PPL"].active .course-access-title {
        color:#0284c7 !important;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"].active,
    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="CPL"].active .course-access-title {
        color:#0f766e !important;
    }

    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"].active,
    body.light.is-native-app:not(.public-screen) .course-access-pill[data-course="Night Rating"].active .course-access-title {
        color:#7c3aed !important;
    }

    body.light.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="PPL"] {
        --native-course-accent:#0284c7;
        --native-course-accent-soft:rgba(14,165,233,0.12);
    }

    body.light.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="CPL"] {
        --native-course-accent:#0f766e;
        --native-course-accent-soft:rgba(20,184,166,0.12);
    }

    body.light.is-native-app:not(.public-screen) .native-subject-dashboard[data-dashboard-course="Night Rating"] {
        --native-course-accent:#7c3aed;
        --native-course-accent-soft:rgba(139,92,246,0.12);
    }
}

/* Native Practice controls: make the mode switch and search field read as
   deliberate controls even in the compact two-column toolbar. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control {
        box-sizing:border-box;
        height:40px !important;
        padding:3px !important;
        border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
        border-radius:9px !important;
        background:color-mix(in srgb, var(--card) 88%, var(--control)) !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.14), inset 0 0 0 1px color-mix(in srgb, var(--border) 36%, transparent) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button,
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
        min-height:32px !important;
        border:1px solid transparent !important;
        border-radius:7px !important;
        background:transparent !important;
        color:color-mix(in srgb, var(--text) 72%, transparent) !important;
        font-size:12px !important;
        font-weight:820 !important;
        text-shadow:none !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button:hover,
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button:focus-visible {
        border-color:color-mix(in srgb, var(--accent) 42%, transparent) !important;
        background:color-mix(in srgb, var(--accent) 10%, transparent) !important;
        color:var(--text) !important;
        outline:none;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
        border-color:color-mix(in srgb, var(--accent) 74%, var(--border)) !important;
        background:var(--accent) !important;
        color:#ffffff !important;
        box-shadow:0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        box-sizing:border-box;
        height:40px !important;
        min-height:40px;
        padding:0 12px 0 31px !important;
        border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
        border-radius:9px !important;
        background:color-mix(in srgb, var(--card) 88%, var(--control)) !important;
        color:var(--text) !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.12), inset 0 0 0 1px color-mix(in srgb, var(--border) 32%, transparent) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right {
        position:relative;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right::before {
        content:"";
        position:absolute;
        z-index:1;
        top:13px;
        left:11px;
        width:10px;
        height:10px;
        border:1.7px solid color-mix(in srgb, var(--text) 70%, var(--accent));
        border-radius:50%;
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right::after {
        content:"";
        position:absolute;
        z-index:1;
        top:24px;
        left:21px;
        width:6px;
        height:1.7px;
        border-radius:99px;
        background:color-mix(in srgb, var(--text) 70%, var(--accent));
        transform:rotate(45deg);
        transform-origin:left center;
        pointer-events:none;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input::placeholder {
        color:color-mix(in srgb, var(--text) 66%, transparent);
        opacity:1;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input:focus {
        border-color:var(--accent) !important;
        outline:2px solid color-mix(in srgb, var(--accent) 24%, transparent);
        outline-offset:1px;
        box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent) !important;
    }

    body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
        background:#2563eb !important;
        border-color:#1d4ed8 !important;
        color:#ffffff !important;
    }

body.light.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        border-color:#94a3b8 !important;
        background:#ffffff !important;
        color:#0f172a !important;
    }
}

/* Native landing brand hierarchy: make the two product lines read clearly
   below TAILWIND while keeping the space background understated. */
@media (max-width:720px) {
    body.is-native-app.public-screen .mobile-landing-brand-tagline {
        gap:6px !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams {
        color:#7dd3fc !important;
        font-size:clamp(16px, 4.8vw, 22px) !important;
        font-weight:900 !important;
        letter-spacing:0.12em !important;
        opacity:1 !important;
        text-shadow:0 0 14px rgba(56,189,248,0.28) !important;
    }

body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        color:#86efac !important;
        font-size:clamp(12px, 3.5vw, 16px) !important;
        font-weight:700 !important;
        letter-spacing:0.2em !important;
        opacity:1 !important;
        text-shadow:0 0 12px rgba(74,222,128,0.22) !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand {
        transform:scale(0.9);
        transform-origin:center top;
    }
}

/* Native landing image: use the supplied aircraft image directly. Keep all
   readability treatment on the text, never on the hero artwork itself. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-night-trial {
        background-color:#030811 !important;
        background-image:url("assets/landing-hero-front-app.webp") !important;
        background-blend-mode:normal !important;
        filter:none !important;
    }

    body.is-native-app.public-screen .landing-hero-night-trial::before,
    body.is-native-app.public-screen .landing-hero-night-trial::after {
        content:none !important;
        display:none !important;
        background:none !important;
        opacity:0 !important;
        filter:none !important;
    }
}

/* Center the native exam arrows independently of the button's hidden text.
   Absolute positioning avoids font baseline and inline-content offsets. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-prev,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next {
        position:relative;
        display:grid !important;
        place-items:center !important;
        align-content:center !important;
        justify-content:center !important;
        line-height:0 !important;
        text-align:center;
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn::before,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-prev::before,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next::before {
        position:absolute;
        inset:0;
        width:auto !important;
        height:auto !important;
        display:grid !important;
        place-items:center !important;
        margin:0;
        line-height:1 !important;
        transform:translateY(-1px);
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn-prev::before,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-prev::before {
        transform:translate(-1px, -1px);
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn-next::before,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next::before {
        transform:translate(1px, -1px);
    }
}

/* Native Exam navigation matches Practice: outlined Back and filled blue Next. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn {
        box-sizing:border-box;
        width:52px !important;
        min-width:52px !important;
        height:52px !important;
        min-height:52px !important;
        border:1px solid color-mix(in srgb, var(--accent) 82%, var(--border)) !important;
        border-radius:8px !important;
        background:transparent !important;
        color:var(--text) !important;
        -webkit-text-fill-color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn-next {
        border-color:#2563eb !important;
        background:#2563eb !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
        box-shadow:0 8px 18px rgba(37,99,235,0.22) !important;
    }

    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn-next:hover,
    body.is-native-app.quiz-screen-active .exam-answer-nav-cluster .answer-nav-btn-next:focus-visible {
        border-color:#1d4ed8 !important;
        background:#1d4ed8 !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
    }
}

/* Keep Unlock more subjects as one clean list. The outer disclosure keeps
   its structure, but individual plans and subjects should not each sit on a
   separate tinted or gradient rectangle. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .native-dashboard-explore {
        border-color:color-mix(in srgb, var(--accent) 24%, var(--border));
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-course-plan-list,
    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-locked-subject-list {
        border:0;
        border-radius:0;
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
    }

    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-course-plan-row,
    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-course-plan-row.is-featured,
    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-subject-entry,
    body.is-native-app:not(.public-screen) .native-dashboard-explore .native-subject-row {
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
    }
}

/* Final native-only dashboard cleanup. Keep the public website presentation
   unchanged while removing the repeated mobile-only clutter. */
body.is-native-app.public-screen #landing-hero-support {
    display:none !important;
}

body.is-native-app:not(.public-screen) .brand-home-btn > .wind-logo {
    display:none !important;
}

body.is-native-app:not(.public-screen) .native-toolbar-brand .wind-logo,
body.is-native-app:not(.public-screen) .native-toolbar-brand-copy small {
    display:none !important;
}

body.is-native-app:not(.public-screen) .native-toolbar-brand-copy {
    display:block;
}

body.is-native-app:not(.public-screen) .native-continue-section,
body.is-native-app:not(.public-screen) .native-continue-study-action,
body.is-native-app:not(.public-screen) .course-access-validity {
    display:none !important;
}

body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-entry,
body.is-native-app:not(.public-screen) .native-subject-dashboard .native-subject-row {
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    border-color:color-mix(in srgb, var(--border) 62%, transparent) !important;
}

body.is-native-app:not(.public-screen) .native-subject-dashboard .native-my-subjects-section {
    background:var(--card) !important;
    background-image:none !important;
    box-shadow:none !important;
    border-color:color-mix(in srgb, var(--border) 76%, transparent) !important;
}

/* Calm light theme: pale surfaces, whisper-light borders, and no dramatic
   elevation. Dark mode keeps its existing contrast and atmosphere. */
body.light {
    --bg:#f8fafc;
    --card:#ffffff;
    --text:#243449;
    --border:#e6edf4;
    --accent:#93c5fd;
    --accent-strong:#60a5fa;
    --nav:#ffffff;
    --control:#f7fafd;
    --muted-control:#e8eef5;
    --circle:#eff6ff;
    --circle-border:#cfe0f3;
    --button-text:#244866;
    --soft:#f1f6fa;
    --active-fill:#eaf4ff;
    --active-ink:#244866;
    --surface-shadow:none;
    --subtle-shadow:none;
}

body.light :is(
    [class*="-panel"],
    [class*="-card"],
    [class*="-modal"],
    [class*="-tile"]
) {
    border-color:var(--border) !important;
    box-shadow:none !important;
}

body.light :is(
    .top-nav,
    .landing-nav,
    .account-menu-panel,
    .dashboard-course-pricing-card,
    .dashboard-pricing-disclosure,
    .subject-list-panel,
    .subject-list-heading,
    .question-card,
    .quiz-toolbar,
    .question-media-panel,
    .tutorial-card
) {
    border-color:var(--border) !important;
    background-image:none !important;
    box-shadow:none !important;
}

body.light :is(
    .landing-primary,
    .landing-nav-cta,
    #landing-login-action,
    .subject-practice-btn,
    .purchase-plan-btn,
    .dashboard-course-trial-btn,
    .native-course-plan-row > button,
    .answer-nav-btn-next,
    .tutorial-primary-btn
) {
    border:1px solid #a9cdf1 !important;
    border-radius:8px;
    background:#dbeafe !important;
    background-image:none !important;
    color:#24527a !important;
    -webkit-text-fill-color:#24527a !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

body.light :is(
    .landing-primary,
    .landing-nav-cta,
    #landing-login-action,
    .subject-practice-btn,
    .purchase-plan-btn,
    .dashboard-course-trial-btn,
    .native-course-plan-row > button,
    .answer-nav-btn-next,
    .tutorial-primary-btn
):hover,
body.light :is(
    .landing-primary,
    .landing-nav-cta,
    #landing-login-action,
    .subject-practice-btn,
    .purchase-plan-btn,
    .dashboard-course-trial-btn,
    .native-course-plan-row > button,
    .answer-nav-btn-next,
    .tutorial-primary-btn
):focus-visible {
    border-color:#8bb9e6 !important;
    background:#c7e0fb !important;
    color:#1f486c !important;
    -webkit-text-fill-color:#1f486c !important;
    box-shadow:none !important;
}

body.light .landing-secondary {
    border:1px solid #d7e5f2 !important;
    background:#f5f9fd !important;
    background-image:none !important;
    color:#3e607d !important;
    box-shadow:none !important;
}

/* Keep the authentication screen coherent when a saved light theme is
   restored after logout. The shared hero-button variables intentionally stay
   dark for the landing hero, so auth controls need their own light palette. */
body.light .auth-shell .login-card {
    background:#ffffff !important;
    border-color:#e1eaf3 !important;
    box-shadow:0 10px 28px rgba(36,52,73,0.08) !important;
}

body.light .auth-back,
body.light .social-login-btn,
body.light .login-input {
    border-color:#d7e5f2 !important;
    background:#f7fafd !important;
    background-image:none !important;
    color:#2d4059 !important;
    -webkit-text-fill-color:#2d4059 !important;
    box-shadow:none !important;
}

body.light .auth-back:hover,
body.light .auth-back:focus-visible,
body.light .social-login-btn:hover,
body.light .social-login-btn:focus-visible {
    border-color:#b8d2ea !important;
    background:#eef6fd !important;
    color:#244866 !important;
    -webkit-text-fill-color:#244866 !important;
}

body.light .login-btn,
body.light .login-btn.secondary {
    border:1px solid #a9cdf1 !important;
    background:#dbeafe !important;
    background-image:none !important;
    color:#24527a !important;
    -webkit-text-fill-color:#24527a !important;
    box-shadow:none !important;
}

body.light .login-btn:hover,
body.light .login-btn:focus-visible,
body.light .login-btn.secondary:hover,
body.light .login-btn.secondary:focus-visible {
    border-color:#8bb9e6 !important;
    background:#c7e0fb !important;
    color:#1f486c !important;
    -webkit-text-fill-color:#1f486c !important;
    box-shadow:none !important;
}

body.light .forgot-password-row button {
    color:#4f83b8 !important;
    -webkit-text-fill-color:#4f83b8 !important;
}

body.light .auth-email-menu {
    border-color:#d7e5f2 !important;
    background:#ffffff !important;
    box-shadow:0 10px 24px rgba(36,52,73,0.1) !important;
}

body.light .password-toggle:hover,
body.light .password-toggle:focus-visible {
    background:#eef6fd !important;
    border-color:#b8d2ea !important;
}

body.light .nav-btn:hover,
body.light .nav-btn:focus-visible,
body.light .account-menu-panel button:hover,
body.light .account-menu-panel button:focus-visible {
    background:#f1f6fa !important;
    box-shadow:none !important;
}

/* Website interaction states should feel tactile, not illuminated. Keep the
   colour response, remove the glow. Native app controls are intentionally
   excluded so their mobile-specific feedback remains unchanged. */
body:not(.is-native-app) button:hover,
body:not(.is-native-app) button:focus-visible,
body:not(.is-native-app) button:active {
    box-shadow:none !important;
    filter:none !important;
}

/* The softened logo is right for light mode; lift it slightly on dark chrome. */
body:not(.light):not(.is-native-app) .brand > .wind-logo {
    opacity:0.8;
    filter:saturate(0.82) brightness(0.98);
}

/* Native Practice: make both ways back unmistakable without spending much
   space in the question header or answer dock. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        box-sizing:border-box;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        justify-content:center !important;
        gap:0 !important;
        padding:0 !important;
        border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
        border-radius:50% !important;
        background:var(--control) !important;
        color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:20px;
        height:20px;
    }

    body.is-native-app.quiz-screen-active #native-quiz-back-label {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev {
        width:46px !important;
        min-width:46px !important;
        height:46px !important;
        min-height:46px !important;
        border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
        border-radius:50% !important;
        background:var(--control) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev::before {
        font-size:25px;
    }
}

/* Restore a restrained blue action language across native Practice. These
   controls share the Confirm treatment without the old bright fills or glow. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish,
    body.is-native-app.quiz-screen-active #question-action-menu-toggle,
    body.is-native-app.quiz-screen-active .progress-map-toggle {
        border-color:#477fa5 !important;
        background:#285b7d !important;
        color:#f2f8fc !important;
        -webkit-text-fill-color:#f2f8fc !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:hover,
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:focus-visible,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:focus-visible,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:focus-visible,
    body.is-native-app.quiz-screen-active #question-action-menu-toggle:hover,
    body.is-native-app.quiz-screen-active #question-action-menu-toggle:focus-visible,
    body.is-native-app.quiz-screen-active #question-action-menu-toggle[aria-expanded="true"],
    body.is-native-app.quiz-screen-active .progress-map-toggle:hover,
    body.is-native-app.quiz-screen-active .progress-map-toggle:focus-visible,
    body.is-native-app.quiz-screen-active .progress-map-toggle[aria-expanded="true"] {
        border-color:#6398b9 !important;
        background:#326b90 !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle,
    body.light.is-native-app.quiz-screen-active .progress-map-toggle {
        border-color:#a8c6d9 !important;
        background:#d9eaf4 !important;
        color:#24527a !important;
        -webkit-text-fill-color:#24527a !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:hover,
    body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:focus-visible,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle:hover,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle:focus-visible,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle[aria-expanded="true"],
    body.light.is-native-app.quiz-screen-active .progress-map-toggle:hover,
    body.light.is-native-app.quiz-screen-active .progress-map-toggle:focus-visible,
    body.light.is-native-app.quiz-screen-active .progress-map-toggle[aria-expanded="true"] {
        border-color:#93b7cf !important;
        background:#c9e0ed !important;
        color:#1f486c !important;
        -webkit-text-fill-color:#1f486c !important;
        box-shadow:none !important;
    }
}

@media (max-width:900px) {
    body:not(.is-native-app) .dashboard-top-panels,
    body:not(.is-native-app) .dashboard-top-panels.has-expanded-course-pricing {
        grid-template-columns:1fr;
        align-items:stretch;
        gap:12px;
        max-width:920px;
    }
}

/* Quiz actions should stay flat. Use a crisp focus outline instead of a
   luminous shadow for Confirm, Unsure, Previous, Next, and Finish. */
.answer-confirm-row button,
.exam-answer-controls button,
.answer-confirm-row button:hover,
.answer-confirm-row button:active,
.answer-confirm-row button:focus-visible,
.exam-answer-controls button:hover,
.exam-answer-controls button:active,
.exam-answer-controls button:focus-visible {
    box-shadow:none !important;
}

.answer-confirm-row button:focus-visible,
.exam-answer-controls button:focus-visible {
    outline:2px solid color-mix(in srgb, var(--accent) 62%, var(--border));
    outline-offset:2px;
}

/* Keep the website dashboard's Logbook and Upgrade cards at the same height. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
        align-items:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        height:100%;
        min-height:0;
        align-self:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-disclosure {
        height:100%;
        min-height:0;
        box-sizing:border-box;
        align-self:stretch;
    }
}

@media (max-width:900px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-logbook-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-course-pricing-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        height:auto;
    }
}

/* Course progress should wrap its rows instead of inheriting a viewport-sized
   stretch on the website, especially for the one-subject Night Rating course. */
body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid,
body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid.has-course-about,
body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid.has-course-pricing,
body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid.has-locked-intro,
body:not(.is-native-app) #screen-dashboard #dashboard-subject-grid > .subject-list-panel {
    height:auto;
    min-height:0;
    align-self:flex-start;
    flex:0 0 auto;
}

/* Align the dashboard top row with the Course Progress rail and give the
   expanded plan cards a little more width again. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
        width:100%;
        max-width:920px;
        align-items:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        height:100%;
        min-height:0;
        align-self:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        width:min(1160px, calc(100vw - 56px));
        max-width:none;
        grid-template-columns:repeat(4, minmax(0, min(270px, calc((100% - 36px) / 4))));
    }
}

/* Final dashboard sizing: the price panel is wider than the top rail but
   must be centered on the page, while both top cards share one row height. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing {
        width:100%;
        max-width:920px;
        margin-inline:auto;
        align-items:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary {
        display:flex;
        align-items:stretch;
        height:auto;
        min-height:0;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-logbook-summary > .dashboard-logbook-panel,
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        flex:1 1 auto;
        height:auto;
        min-height:0;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-disclosure {
        height:100%;
        min-height:0;
        align-self:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        position:static;
        left:auto;
        width:min(920px, calc(100vw - 56px));
        max-width:none;
        margin:12px auto 0;
        transform:none;
    }
}

/* The expanded Upgrade disclosure is the visible card surface. Let the grid
   stretch that surface itself in light and dark mode, rather than resolving a
   percentage height against an auto-sized row. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-disclosure {
        height:auto !important;
        min-height:0 !important;
        align-self:stretch !important;
        display:flex;
        box-sizing:border-box;
    }
}

/* Widen the dashboard plan cards symmetrically around the page centre. The
   top Logbook/Upgrade rail stays aligned to Course Progress underneath. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        width:min(1120px, calc(100vw - 56px));
        max-width:none;
        margin-top:12px;
        margin-right:auto;
        margin-bottom:0;
        margin-left:auto;
        justify-self:center;
        transform:none;
        grid-template-columns:repeat(4, minmax(0, min(280px, calc((100% - 36px) / 4))));
        justify-content:center;
    }
}

/* Native practice: remove the extra course/aircraft descriptor and restore
   the previous rectangular Back controls in the header and bottom action bar. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-course-context {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        box-sizing:border-box !important;
        width:auto !important;
        min-width:64px !important;
        height:40px !important;
        min-height:40px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;
        padding:0 12px 0 8px !important;
        border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border)) !important;
        border-radius:8px !important;
        background:var(--control) !important;
        color:var(--text) !important;
        font-size:13px !important;
        font-weight:850 !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:22px !important;
        height:22px !important;
    }

    body.is-native-app.quiz-screen-active #native-quiz-back-label {
        display:inline !important;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev {
        box-sizing:border-box !important;
        width:52px !important;
        min-width:52px !important;
        height:52px !important;
        min-height:52px !important;
        border:1px solid color-mix(in srgb, var(--accent) 82%, var(--border)) !important;
        border-radius:8px !important;
        background:transparent !important;
        color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev::before {
        font-size:27px !important;
    }
}

/* Native bottom navigation: use white for the active icon and give every
   icon a modest 10% size increase without adding another highlight glow. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-icon {
        width:27.5px !important;
        height:27.5px !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:hover,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:active,
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:focus-visible {
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active .nav-icon {
        stroke:currentColor;
        opacity:1;
        filter:none;
    }
}

/* Keep the active native-nav icons white without the heavy stroke or halo. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-icon {
        stroke-width:1.65 !important;
        opacity:.78 !important;
        filter:none !important;
    }

    body.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active .nav-icon {
        stroke-width:1.8 !important;
        opacity:.9 !important;
        filter:none !important;
    }
}

/* The native landing page keeps the trial and course actions side by side. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-choice-actions {
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

    body.is-native-app.public-screen .landing-hero-choice-actions .landing-secondary {
        display:inline-flex !important;
    }

    body.is-native-app.public-screen .landing-hero-choice-actions .landing-secondary[hidden] {
        display:none !important;
    }
}

/* Final native Practice polish: centre the header label and bottom arrow,
   then let the search field sit quietly in the toolbar without a glow. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        width:76px !important;
        min-width:76px !important;
        height:40px !important;
        min-height:40px !important;
        justify-content:center !important;
        gap:4px !important;
        padding:0 !important;
        text-align:center;
        font-size:11px !important;
        font-weight:780 !important;
        line-height:1 !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:18px !important;
        height:18px !important;
        flex:0 0 auto;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev {
        display:grid !important;
        place-items:center !important;
        align-content:center !important;
        justify-content:center !important;
        padding:0 !important;
        line-height:0 !important;
        text-align:center !important;
    }

    body.is-native-app.quiz-screen-active .answer-confirm-row .answer-nav-btn-prev::before {
        position:absolute;
        inset:0;
        width:auto !important;
        height:auto !important;
        display:grid !important;
        place-items:center !important;
        margin:0 !important;
        transform:none !important;
        font-size:24px !important;
        line-height:1 !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        border-color:color-mix(in srgb, var(--border) 88%, var(--accent) 12%) !important;
        background:color-mix(in srgb, var(--card) 96%, var(--control)) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right::before {
        border-color:color-mix(in srgb, var(--text) 48%, var(--accent)) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right::after {
        background:color-mix(in srgb, var(--text) 48%, var(--accent)) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input::placeholder {
        color:color-mix(in srgb, var(--text) 54%, transparent) !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input:focus {
        outline:1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
        box-shadow:none !important;
    }
}

/* Native Practice: keep the toolbar open and make its controls quiet. The
   collapse chevron was too easy to mistake for part of the search field. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-controls-toggle {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed {
        min-height:0 !important;
        padding:0 !important;
    }

    body.is-native-app.quiz-screen-active .progress-shell.is-native-controls-collapsed .progress-summary-row {
        display:grid !important;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control {
        border-color:color-mix(in srgb, var(--border) 88%, var(--text) 12%) !important;
        background:color-mix(in srgb, var(--control) 94%, var(--card)) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active,
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:hover,
    body.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:focus-visible {
        border-color:color-mix(in srgb, var(--text) 18%, var(--border)) !important;
        background:color-mix(in srgb, var(--text) 9%, var(--control)) !important;
        color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input {
        padding-left:31px !important;
        border-color:color-mix(in srgb, var(--border) 92%, var(--text) 8%) !important;
        background:color-mix(in srgb, var(--card) 98%, var(--control)) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .quiz-toolbar-right .search-input:focus {
        border-color:color-mix(in srgb, var(--border) 72%, var(--accent) 28%) !important;
        outline:1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
        outline-offset:1px;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish {
        border-color:#46677a !important;
        background:#2e4d60 !important;
        color:#edf4f7 !important;
        -webkit-text-fill-color:#edf4f7 !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:focus-visible,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:hover,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:focus-visible {
        border-color:#5c7c8d !important;
        background:#385b6e !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-prev,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-unsure-btn,
    body.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-why-btn {
        border-color:color-mix(in srgb, var(--border) 78%, var(--text) 22%) !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
        border-color:#c8d5df !important;
        background:#eaf1f5 !important;
        color:#28445a !important;
        -webkit-text-fill-color:#28445a !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish {
        border-color:#aebfca !important;
        background:#dce8ee !important;
        color:#28445a !important;
        -webkit-text-fill-color:#28445a !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .native-practice-primary-action:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls .answer-nav-btn-finish:focus-visible {
        border-color:#9db2bf !important;
        background:#d1e0e8 !important;
        color:#28445a !important;
        -webkit-text-fill-color:#28445a !important;
    }
}

/* Final native Practice header: icon-only Back control. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        width:38px !important;
        min-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        justify-content:center !important;
        gap:0 !important;
        padding:0 !important;
        border-radius:50% !important;
        font-size:0 !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-back-icon {
        width:19px !important;
        height:19px !important;
        margin:0 !important;
    }

    body.is-native-app.quiz-screen-active #native-quiz-back-label {
        display:none !important;
    }
}

/* Keep the single native landing course action slightly narrower than its
   panel so it feels intentional without changing the website CTA. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-choice-actions .landing-primary {
        width:min(300px, 88%) !important;
        justify-self:center !important;
    }
}

/* In native light mode the active icon needs dark contrast; the dark theme
   keeps its white active icon. */
@media (max-width:720px) {
    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active,
    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:hover,
    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:active,
    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active:focus-visible {
        color:#1f486c !important;
        -webkit-text-fill-color:#1f486c !important;
    }

    body.light.is-native-app:not(.public-screen) .top-nav.app-nav > nav .nav-btn.is-active .nav-icon {
        stroke:#1f486c !important;
        color:#1f486c !important;
        opacity:1 !important;
    }
}

/* Centre the native Practice back glyph itself, not just the button box. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        display:grid !important;
        place-items:center !important;
        align-content:center !important;
        justify-content:center !important;
        line-height:0 !important;
        text-align:center !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back .native-quiz-back-icon {
        display:block !important;
        place-self:center !important;
        margin:0 !important;
        transform:none !important;
    }
}

/* Lock the header glyph to the exact centre of the native Practice circle. */
@media (max-width:720px) {
    body.is-native-app .native-quiz-dashboard-back {
        position:relative !important;
    }

    body.is-native-app .native-quiz-dashboard-back .native-quiz-back-icon {
        position:absolute !important;
        top:50% !important;
        left:50% !important;
        display:block !important;
        margin:0 !important;
        transform:translate(-50%, -50%) !important;
        flex:none !important;
    }
}

/* Native Practice More menu: keep the light-mode label and menu items dark
   when the control is focused or opened on the white surface. */
@media (max-width:720px) {
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle:hover,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle:active,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle:focus-visible,
    body.light.is-native-app.quiz-screen-active #question-action-menu-toggle[aria-expanded="true"] {
        border-color:#b8c7d8 !important;
        background:#ffffff !important;
        color:#334155 !important;
        -webkit-text-fill-color:#334155 !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel {
        border-color:#cbd5e1 !important;
        background:#ffffff !important;
        color:#0f172a !important;
        box-shadow:0 12px 26px rgba(15,23,42,0.14) !important;
    }

    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel button,
    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel a {
        background:transparent !important;
        color:#334155 !important;
        -webkit-text-fill-color:#334155 !important;
    }

    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel button:hover:not(:disabled),
    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel button:focus-visible,
    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel a:hover,
    body.light.is-native-app.quiz-screen-active .native-question-action-menu-panel a:focus-visible {
        background:#e8f1fb !important;
        color:#1d4ed8 !important;
        -webkit-text-fill-color:#1d4ed8 !important;
    }
}

/* Native dashboard course tabs: highlight only the label and keep the active
   horizontal bar; no filled box should appear around PPL, CPL, or Night. */
@media (max-width:720px) {
    body.is-native-app:not(.public-screen) .course-access-pill.active,
    body.is-native-app:not(.public-screen) .course-access-pill.active:hover,
    body.is-native-app:not(.public-screen) .course-access-pill.active:focus-visible,
    body.is-native-app:not(.public-screen) .course-access-pill.is-locked.active {
        background:transparent !important;
        background-image:none !important;
        border-radius:0 !important;
        box-shadow:none !important;
        transform:none !important;
    }
}

/* Native Practice header: use a small text-only Back button instead of the
   circle-and-arrow control. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back {
        position:static !important;
        display:inline-flex !important;
        box-sizing:border-box !important;
        width:58px !important;
        min-width:58px !important;
        height:32px !important;
        min-height:32px !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 10px !important;
        border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
        border-radius:7px !important;
        background:transparent !important;
        background-image:none !important;
        color:var(--text) !important;
        -webkit-text-fill-color:var(--text) !important;
        font-size:11px !important;
        font-weight:780 !important;
        line-height:1 !important;
        text-align:center !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active .native-quiz-dashboard-back .native-quiz-back-icon {
        display:none !important;
    }

    body.is-native-app.quiz-screen-active #native-quiz-back-label {
        display:inline !important;
    }
}

/* Final native Practice action colour: the original Tailwind blue, shared by
   Confirm, Next, More, Expand questions, and the active Practice/Exam toggle.
   The fill is restored without bringing back the old glow. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active :is(
        .quiz-mode-cluster .segmented-control button.active,
        .native-practice-answer-controls .native-practice-primary-action,
        .native-practice-answer-controls .answer-nav-btn-next,
        .native-practice-answer-controls .answer-nav-btn-finish,
        #question-action-menu-toggle,
        .progress-map-toggle
    ) {
        border-color:#2563eb !important;
        background:#2563eb !important;
        color:#f2f8fc !important;
        -webkit-text-fill-color:#f2f8fc !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active :is(
        .quiz-mode-cluster .segmented-control button.active:hover,
        .quiz-mode-cluster .segmented-control button.active:focus-visible,
        .native-practice-answer-controls .native-practice-primary-action:hover,
        .native-practice-answer-controls .native-practice-primary-action:focus-visible,
        .native-practice-answer-controls .answer-nav-btn-next:hover,
        .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
        .native-practice-answer-controls .answer-nav-btn-finish:hover,
        .native-practice-answer-controls .answer-nav-btn-finish:focus-visible,
        #question-action-menu-toggle:hover,
        #question-action-menu-toggle:focus-visible,
        #question-action-menu-toggle[aria-expanded="true"],
        .progress-map-toggle:hover,
        .progress-map-toggle:focus-visible,
        .progress-map-toggle[aria-expanded="true"]
    ) {
        border-color:#1d4ed8 !important;
        background:#1d4ed8 !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active :is(
        .quiz-mode-cluster .segmented-control button.active,
        .native-practice-answer-controls .native-practice-primary-action,
        .native-practice-answer-controls .answer-nav-btn-next,
        .native-practice-answer-controls .answer-nav-btn-finish,
        #question-action-menu-toggle,
        .progress-map-toggle
    ) {
        border-color:#a8c6d9 !important;
        background:#d9eaf4 !important;
        color:#24527a !important;
        -webkit-text-fill-color:#24527a !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active :is(
        .quiz-mode-cluster .segmented-control button.active:hover,
        .quiz-mode-cluster .segmented-control button.active:focus-visible,
        .native-practice-answer-controls .native-practice-primary-action:hover,
        .native-practice-answer-controls .native-practice-primary-action:focus-visible,
        .native-practice-answer-controls .answer-nav-btn-next:hover,
        .native-practice-answer-controls .answer-nav-btn-next:focus-visible,
        .native-practice-answer-controls .answer-nav-btn-finish:hover,
        .native-practice-answer-controls .answer-nav-btn-finish:focus-visible,
        #question-action-menu-toggle:hover,
        #question-action-menu-toggle:focus-visible,
        #question-action-menu-toggle[aria-expanded="true"],
        .progress-map-toggle:hover,
        .progress-map-toggle:focus-visible,
        .progress-map-toggle[aria-expanded="true"]
    ) {
        border-color:#93b7cf !important;
        background:#c9e0ed !important;
        color:#1f486c !important;
        -webkit-text-fill-color:#1f486c !important;
        box-shadow:none !important;
    }
}

/* Native Practice and Exams quiet controls: the question-list trigger uses
   the same outlined treatment in both modes, while Next matches Back. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) #question-action-menu-toggle {
        border-color:var(--border) !important;
        background:var(--soft) !important;
        color:color-mix(in srgb, var(--text) 72%, transparent) !important;
        -webkit-text-fill-color:color-mix(in srgb, var(--text) 72%, transparent) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) #question-action-menu-toggle:hover,
    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) #question-action-menu-toggle:focus-visible,
    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) #question-action-menu-toggle[aria-expanded="true"] {
        border-color:color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
        background:var(--control) !important;
        color:var(--text) !important;
        -webkit-text-fill-color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active #progress-map-toggle {
        border-color:#2563eb !important;
        background:transparent !important;
        background-image:none !important;
        color:#8bbcff !important;
        -webkit-text-fill-color:#8bbcff !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active #progress-map-toggle:hover,
    body.is-native-app.quiz-screen-active #progress-map-toggle:focus-visible,
    body.is-native-app.quiz-screen-active #progress-map-toggle[aria-expanded="true"] {
        border-color:#60a5fa !important;
        background:transparent !important;
        background-image:none !important;
        color:#dbeafe !important;
        -webkit-text-fill-color:#dbeafe !important;
        box-shadow:none !important;
    }

    body.light.is-native-app.quiz-screen-active #progress-map-toggle {
        border-color:#2563eb !important;
        background:transparent !important;
        color:#1d4ed8 !important;
        -webkit-text-fill-color:#1d4ed8 !important;
    }

    body.light.is-native-app.quiz-screen-active #progress-map-toggle:hover,
    body.light.is-native-app.quiz-screen-active #progress-map-toggle:focus-visible,
    body.light.is-native-app.quiz-screen-active #progress-map-toggle[aria-expanded="true"] {
        border-color:#1d4ed8 !important;
        background:transparent !important;
        color:#1e40af !important;
        -webkit-text-fill-color:#1e40af !important;
    }

    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) .native-practice-answer-controls .answer-nav-btn-next {
        border-color:color-mix(in srgb, var(--accent) 82%, var(--border)) !important;
        background:transparent !important;
        background-image:none !important;
        color:var(--text) !important;
        -webkit-text-fill-color:var(--text) !important;
        box-shadow:none !important;
    }

    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) .native-practice-answer-controls .answer-nav-btn-next:hover,
    body.is-native-app.quiz-screen-active:not(.native-exam-quiz) .native-practice-answer-controls .answer-nav-btn-next:focus-visible {
        border-color:color-mix(in srgb, var(--accent) 96%, var(--border)) !important;
        background:transparent !important;
        background-image:none !important;
        color:var(--text) !important;
        -webkit-text-fill-color:var(--text) !important;
        box-shadow:none !important;
    }
}

/* Native Exam layout: give the mode, timer, and pause controls a little more
   breathing room, and make the bottom navigation easier to tap. Practice keeps
   its existing sizing. */
@media (max-width:720px) {
    body.is-native-app.quiz-screen-active.native-exam-quiz .quiz-mode-cluster {
        --native-mode-toggle-width:clamp(140px, 38vw, 148px);
        --native-exam-timer-width:clamp(86px, 23vw, 92px);
        justify-content:space-between;
        gap:11px;
    }

    body.is-native-app.quiz-screen-active.native-exam-quiz #exam-pause-btn {
        width:74px !important;
        min-width:74px !important;
        max-width:74px !important;
        flex-basis:74px !important;
    }

    body.is-native-app.quiz-screen-active.native-exam-quiz .exam-answer-nav-cluster {
        grid-template-columns:64px 64px !important;
        gap:10px !important;
    }

    body.is-native-app.quiz-screen-active.native-exam-quiz .exam-answer-nav-cluster .answer-nav-btn {
        width:64px !important;
        min-width:64px !important;
        height:52px !important;
        min-height:52px !important;
    }
}

/* Keep the expanded dashboard price-card group centred on the page, rather
   than centred inside the narrower two-card dashboard rail. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels.has-expanded-course-pricing .dashboard-pricing-panel {
        position:relative;
        left:50%;
        width:min(1120px, calc(100vw - 56px));
        max-width:none;
        margin:12px 0 0;
        justify-self:start;
        transform:translateX(-50%);
    }
}

/* The collapsed Upgrade card must carry the equal-height row border itself;
   its disclosure is only the content surface inside that card. */
@media (min-width:901px) {
    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary {
        display:flex;
        align-items:stretch;
    }

    body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary > .dashboard-course-pricing-card {
        display:flex;
        flex:1 1 auto;
        min-height:0;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--pricing-link-accent) 28%, var(--border));
        border-left:3px solid color-mix(in srgb, var(--pricing-link-accent) 72%, var(--border));
        border-radius:8px;
        background:color-mix(in srgb, var(--pricing-link-accent) 5%, var(--card));
    }

body:not(.is-native-app) #screen-dashboard .dashboard-top-panels:not(.has-expanded-course-pricing) > #dashboard-course-pricing-summary > .dashboard-course-pricing-card > .dashboard-pricing-disclosure {
        flex:1 1 auto;
        height:auto !important;
        min-height:0 !important;
        align-self:stretch;
        border:0;
        border-radius:0;
    }
}

/* Website light dashboard sections: give each major surface a quiet, even
   border so the white sections remain distinct from the page background. */
body.light:not(.is-native-app) #screen-dashboard .subscription-card,
body.light:not(.is-native-app) #screen-dashboard .dashboard-logbook-panel,
body.light:not(.is-native-app) #screen-dashboard .dashboard-course-pricing-card,
body.light:not(.is-native-app) #screen-dashboard #dashboard-subject-grid > .subject-list-panel,
body.light:not(.is-native-app) #screen-dashboard #dashboard-subject-grid > .locked-course-intro,
body.light:not(.is-native-app) #screen-dashboard #dashboard-subject-grid > .active-course-about-intro,
body.light:not(.is-native-app) #screen-dashboard #dashboard-subject-grid > .dashboard-pricing-panel {
    border:1px solid #d6e0ea;
    box-shadow:none;
}

body.light:not(.is-native-app) #screen-dashboard .dashboard-logbook-panel {
    border-left:2px solid #9bcbb7;
}

body.light:not(.is-native-app) #screen-dashboard .dashboard-course-pricing-card {
    border-left:2px solid #a8c9df;
}

body.light:not(.is-native-app) #screen-dashboard .subject-list-panel,
body.light:not(.is-native-app) #screen-dashboard .locked-course-intro,
body.light:not(.is-native-app) #screen-dashboard .active-course-about-intro,
body.light:not(.is-native-app) #screen-dashboard .dashboard-pricing-panel {
    border-radius:12px;
}

body.light:not(.is-native-app) #screen-dashboard .subject-list-heading,
body.light:not(.is-native-app) #screen-dashboard .dashboard-pricing-disclosure,
body.light:not(.is-native-app) #screen-dashboard .dashboard-course-trial {
    border-color:#e0e7ef;
}

/* Quiz navigation is deliberately quieter than answer confirmation. Keep
   Back and Next outlined in both Practice and Exam modes so the filled blue
   action remains reserved for Confirm. */
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-prev,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-next,
body.quiz-screen-active #answers .answer-confirm-row.is-confirmed .practice-primary-action {
    border-color:color-mix(in srgb, var(--accent) 68%, var(--border)) !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    color:var(--text) !important;
    -webkit-text-fill-color:var(--text) !important;
    box-shadow:none !important;
    filter:none !important;
}

body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-prev:hover,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-prev:focus-visible,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-prev:active,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-next:hover,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-next:focus-visible,
body.quiz-screen-active #answers .answer-confirm-row .answer-nav-btn-next:active,
body.quiz-screen-active #answers .answer-confirm-row.is-confirmed .practice-primary-action:hover,
body.quiz-screen-active #answers .answer-confirm-row.is-confirmed .practice-primary-action:focus-visible,
body.quiz-screen-active #answers .answer-confirm-row.is-confirmed .practice-primary-action:active {
    border-color:color-mix(in srgb, var(--accent) 82%, var(--border)) !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    color:var(--text) !important;
    -webkit-text-fill-color:var(--text) !important;
    box-shadow:none !important;
    filter:none !important;
}

/* Native signed-in landing: the single Explore courses action uses the full
   action row, stays centred, and matches the quiet navy app buttons. */
@media (max-width:720px) {
    body.is-native-app.public-screen .landing-hero-choice-actions.single-action {
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) !important;
        justify-items:center !important;
    }

    body.is-native-app.public-screen .landing-hero-choice-actions.single-action .landing-primary {
        width:min(260px, 78vw) !important;
        justify-self:center !important;
        border:1px solid var(--hero-button-border) !important;
        background:var(--hero-button-bg) !important;
        background-image:none !important;
        background-size:auto !important;
        color:var(--hero-button-ink) !important;
        -webkit-text-fill-color:var(--hero-button-ink) !important;
        box-shadow:none !important;
        filter:none !important;
    }

    body.is-native-app.public-screen .landing-hero-choice-actions.single-action .landing-primary:hover,
    body.is-native-app.public-screen .landing-hero-choice-actions.single-action .landing-primary:active,
    body.is-native-app.public-screen .landing-hero-choice-actions.single-action .landing-primary:focus-visible {
        border-color:var(--hero-button-border) !important;
        background:var(--hero-button-bg) !important;
        background-image:none !important;
        color:var(--hero-button-ink) !important;
        -webkit-text-fill-color:var(--hero-button-ink) !important;
        box-shadow:none !important;
        filter:none !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams,
    body.is-native-app.public-screen .mobile-landing-brand-logbooks,
    body.is-native-app.public-screen .landing-hero-night-trial .hero-kicker-exams,
    body.is-native-app.public-screen .landing-hero-night-trial .hero-kicker-logbooks {
        text-shadow:none !important;
        filter:none !important;
        -webkit-filter:none !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-exams {
        color:rgba(186, 215, 238, 0.86) !important;
    }

    body.is-native-app.public-screen .mobile-landing-brand-logbooks {
        color:rgba(160, 210, 184, 0.84) !important;
    }
}

/* Light native quiz controls: keep the question navigator quiet and give the
   pending Confirm action a small tactile lift without restoring the old glow. */
@media (max-width:720px) {
    body.light.is-native-app.quiz-screen-active #progress-map-toggle {
        border-color:#b9cbd7 !important;
        background:#f1f6f8 !important;
        background-image:none !important;
        color:#607386 !important;
        -webkit-text-fill-color:#607386 !important;
        box-shadow:0 1px 0 rgba(255,255,255,.78) !important;
    }

    body.light.is-native-app.quiz-screen-active #progress-map-toggle:hover,
    body.light.is-native-app.quiz-screen-active #progress-map-toggle:focus-visible,
    body.light.is-native-app.quiz-screen-active #progress-map-toggle[aria-expanded="true"] {
        border-color:#a9bfcd !important;
        background:#e6f0f4 !important;
        background-image:none !important;
        color:#49657a !important;
        -webkit-text-fill-color:#49657a !important;
        box-shadow:0 1px 0 rgba(255,255,255,.7) !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action {
        border-color:#9ebdce !important;
        background:#cfe3ed !important;
        background-image:none !important;
        color:#245473 !important;
        -webkit-text-fill-color:#245473 !important;
        box-shadow:0 1px 0 rgba(30,75,107,.10) !important;
        transition:background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:focus-visible {
        border-color:#8eafc2 !important;
        background:#c5dce8 !important;
        color:#204c69 !important;
        -webkit-text-fill-color:#204c69 !important;
        box-shadow:0 2px 0 rgba(30,75,107,.12) !important;
        transform:translateY(-1px) !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:active {
        border-color:#83a7bb !important;
        background:#b9d4e1 !important;
        color:#1d4661 !important;
        -webkit-text-fill-color:#1d4661 !important;
        box-shadow:none !important;
        transform:translateY(1px) !important;
    }
}

/* Keep the website's light-mode Confirm action identical to the native app. */
body.light.quiz-screen-active:not(.is-native-app) #answers .answer-confirm-row.is-pending .practice-primary-action {
    border-color:#9ebdce !important;
    background:#cfe3ed !important;
    background-image:none !important;
    color:#245473 !important;
    -webkit-text-fill-color:#245473 !important;
    box-shadow:0 1px 0 rgba(30,75,107,.10) !important;
    transition:background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease !important;
}

body.light.quiz-screen-active:not(.is-native-app) #answers .answer-confirm-row.is-pending .practice-primary-action:hover,
body.light.quiz-screen-active:not(.is-native-app) #answers .answer-confirm-row.is-pending .practice-primary-action:focus-visible {
    border-color:#8eafc2 !important;
    background:#c5dce8 !important;
    color:#204c69 !important;
    -webkit-text-fill-color:#204c69 !important;
    box-shadow:0 2px 0 rgba(30,75,107,.12) !important;
    transform:translateY(-1px) !important;
}

body.light.quiz-screen-active:not(.is-native-app) #answers .answer-confirm-row.is-pending .practice-primary-action:active {
    border-color:#83a7bb !important;
    background:#b9d4e1 !important;
    color:#1d4661 !important;
    -webkit-text-fill-color:#1d4661 !important;
    box-shadow:none !important;
    transform:translateY(1px) !important;
}

/* Native light-mode Confirm: use the same blue as the linear progress bar,
   with a restrained darker press state. */
@media (max-width:720px) {
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action {
        border-color:var(--accent) !important;
        background:var(--accent) !important;
        background-image:none !important;
        color:#244866 !important;
        -webkit-text-fill-color:#244866 !important;
        box-shadow:0 1px 0 rgba(36,72,102,.16) !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:hover,
    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:focus-visible {
        border-color:color-mix(in srgb,var(--accent) 84%,#5b86ad) !important;
        background:color-mix(in srgb,var(--accent) 88%,#ffffff) !important;
        color:#244866 !important;
        -webkit-text-fill-color:#244866 !important;
        box-shadow:0 2px 0 rgba(36,72,102,.18) !important;
        transform:translateY(-1px) !important;
    }

    body.light.is-native-app.quiz-screen-active .native-practice-answer-controls.is-pending .native-practice-primary-action:active {
        border-color:color-mix(in srgb,var(--accent) 78%,#527a9e) !important;
        background:color-mix(in srgb,var(--accent) 80%,#6e9bc2) !important;
        color:#1d4661 !important;
        -webkit-text-fill-color:#1d4661 !important;
        box-shadow:none !important;
        transform:translateY(1px) !important;
    }
}

/* Website light mode: Practice Confirm and the Exams Start Exam action use
   the same calm blue treatment, so the primary action is consistent before
   and during an exam. */
body.light.quiz-screen-active:not(.is-native-app) #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action,
    .exam-intro-panel .exam-submit-btn
) {
    box-sizing:border-box;
    min-width:156px;
    min-height:44px;
    padding:8px 16px;
    border:1px solid #9ebdce !important;
    border-radius:8px;
    background:#cfe3ed !important;
    background-image:none !important;
    color:#245473 !important;
    -webkit-text-fill-color:#245473 !important;
    box-shadow:0 1px 0 rgba(30,75,107,.10) !important;
    transition:background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease !important;
}

body.light.quiz-screen-active:not(.is-native-app) #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action:hover,
    .answer-confirm-row.is-pending .practice-primary-action:focus-visible,
    .exam-intro-panel .exam-submit-btn:hover,
    .exam-intro-panel .exam-submit-btn:focus-visible
) {
    border-color:#8eafc2 !important;
    background:#c5dce8 !important;
    color:#204c69 !important;
    -webkit-text-fill-color:#204c69 !important;
    box-shadow:0 2px 0 rgba(30,75,107,.12) !important;
    transform:translateY(-1px);
}

body.light.quiz-screen-active:not(.is-native-app) #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action:active,
    .exam-intro-panel .exam-submit-btn:active
) {
    border-color:#83a7bb !important;
    background:#b9d4e1 !important;
    color:#1d4661 !important;
    -webkit-text-fill-color:#1d4661 !important;
    box-shadow:none !important;
    transform:translateY(1px);
}

/* Light-mode primary exam actions match the periwinkle Exam control used in
   the reference UI. Keep the website and native Start Exam/Confirm actions
   on the same surface colour, with a restrained tactile press state. */
body.light.quiz-screen-active #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action,
    .exam-intro-panel .exam-submit-btn
) {
    border-color:#a9c1e5 !important;
    background:#cfe1ff !important;
    background-image:none !important;
    color:#214f93 !important;
    -webkit-text-fill-color:#214f93 !important;
    box-shadow:0 1px 0 rgba(33,79,147,.12) !important;
}

body.light.quiz-screen-active #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action:hover,
    .answer-confirm-row.is-pending .practice-primary-action:focus-visible,
    .exam-intro-panel .exam-submit-btn:hover,
    .exam-intro-panel .exam-submit-btn:focus-visible
) {
    border-color:#9bb7e1 !important;
    background:#c5dafe !important;
    color:#1f4b8d !important;
    -webkit-text-fill-color:#1f4b8d !important;
    box-shadow:0 2px 0 rgba(33,79,147,.14) !important;
    transform:translateY(-1px);
}

body.light.quiz-screen-active #answers :is(
    .answer-confirm-row.is-pending .practice-primary-action:active,
    .exam-intro-panel .exam-submit-btn:active
) {
    border-color:#8eabd6 !important;
    background:#bad1f4 !important;
    color:#1d467f !important;
    -webkit-text-fill-color:#1d467f !important;
    box-shadow:none !important;
    transform:translateY(1px);
}

/* Use the same reference periwinkle for the active Practice/Exams toggle in
   both the website and the native app. */
body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
    border-color:#a9c1e5 !important;
    background:#cfe1ff !important;
    background-image:none !important;
    color:#214f93 !important;
    -webkit-text-fill-color:#214f93 !important;
    box-shadow:0 1px 0 rgba(33,79,147,.12) !important;
}

body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:hover,
body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:focus-visible {
    border-color:#9bb7e1 !important;
    background:#c5dafe !important;
    color:#1f4b8d !important;
    -webkit-text-fill-color:#1f4b8d !important;
    box-shadow:0 2px 0 rgba(33,79,147,.14) !important;
}

body.light.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:active {
    border-color:#8eabd6 !important;
    background:#bad1f4 !important;
    color:#1d467f !important;
    -webkit-text-fill-color:#1d467f !important;
    box-shadow:none !important;
}

/* Native quiz styling has an additional app-state class, so repeat the
   selector at that specificity to ensure the periwinkle wins over older
   mobile-only toggle rules. */
body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active {
    border-color:#a9c1e5 !important;
    background:#cfe1ff !important;
    background-image:none !important;
    color:#214f93 !important;
    -webkit-text-fill-color:#214f93 !important;
    box-shadow:0 1px 0 rgba(33,79,147,.12) !important;
}

body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:hover,
body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:focus-visible {
    border-color:#9bb7e1 !important;
    background:#c5dafe !important;
    color:#1f4b8d !important;
    -webkit-text-fill-color:#1f4b8d !important;
    box-shadow:0 2px 0 rgba(33,79,147,.14) !important;
}

body.light.is-native-app.quiz-screen-active .quiz-mode-cluster .segmented-control button.active:active {
    border-color:#8eabd6 !important;
    background:#bad1f4 !important;
    color:#1d467f !important;
    -webkit-text-fill-color:#1d467f !important;
    box-shadow:none !important;
}

/* Keep the bell/support composer quiet in the native app's light mode. The
   shared confirm button is intentionally blue for quiz actions, but sending
   a support message should read as a calm secondary action. */
body.light.is-native-app .support-composer .confirm-answer-btn {
    border-color:#a9c1e5 !important;
    background:#cfe1ff !important;
    background-image:none !important;
    color:#214f93 !important;
    -webkit-text-fill-color:#214f93 !important;
    box-shadow:0 1px 0 rgba(33,79,147,.12) !important;
}

body.light.is-native-app .support-composer .confirm-answer-btn:hover,
body.light.is-native-app .support-composer .confirm-answer-btn:focus-visible {
    border-color:#9bb7e1 !important;
    background:#c5dafe !important;
    color:#1f4b8d !important;
    -webkit-text-fill-color:#1f4b8d !important;
    box-shadow:0 2px 0 rgba(33,79,147,.14) !important;
    transform:translateY(-1px);
}

body.light.is-native-app .support-composer .confirm-answer-btn:active {
    border-color:#8eabd6 !important;
    background:#bad1f4 !important;
    color:#1d467f !important;
    -webkit-text-fill-color:#1d467f !important;
    box-shadow:none !important;
    transform:translateY(1px);
}

/* Website header controls use one shared frame. Keep the tutorial, support
   bell, and appearance buttons identical in size and border treatment. */
body:not(.is-native-app) .header-actions :is(
    .header-tutorial-btn,
    .support-bell-btn,
    .theme-toggle
) {
    box-sizing:border-box;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    border:1px solid color-mix(in srgb, var(--border) 82%, var(--text)) !important;
    border-radius:8px !important;
    background:var(--control) !important;
    box-shadow:none !important;
}

body.light:not(.is-native-app) .header-actions :is(
    .header-tutorial-btn,
    .support-bell-btn,
    .theme-toggle
) {
    border-color:#c4d0dd !important;
    background:#f7fafd !important;
}

body:not(.is-native-app) .header-actions :is(
    .header-tutorial-btn:hover,
    .header-tutorial-btn:focus-visible,
    .support-bell-btn:hover,
    .support-bell-btn:focus-visible,
    .theme-toggle:hover,
    .theme-toggle:focus-visible
) {
    border-color:color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
    box-shadow:none !important;
    outline:none;
}