@import '_content/MusicTheoryMastery.Learn.UI/MusicTheoryMastery.Learn.UI.ki3sdd3r3u.bundle.scp.css';

/* /Components/Areas/Admin/Pages/Curriculum/LessonEditor.razor.rz.scp.css */
/* The steps workspace (#462): the field editor beside the phone preview, which wraps below it when
   the card is too narrow for both. The preview keeps its full 375px whenever it fits. */

.steps-workspace[b-ldlhufq7a0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.steps-workspace__editor[b-ldlhufq7a0] {
    flex: 1 1 30rem;
    min-width: 0;
}

/* Stretched to the editor's height, so the preview inside has the length of the editor to stick in. */
.steps-workspace__preview[b-ldlhufq7a0] {
    flex: 0 0 auto;
    align-self: stretch;
    max-width: 100%;
}

/* Save stays in reach while a long lesson scrolls. */
.steps-toolbar[b-ldlhufq7a0] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: -0.5rem 0 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color, rgba(127, 127, 127, 0.3));
    background: var(--bs-card-bg, var(--bs-body-bg, #ffffff));
}

.steps-toolbar__status[b-ldlhufq7a0] {
    margin-right: auto;
    font-size: 0.875rem;
}

.steps-toolbar__status--over[b-ldlhufq7a0] {
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

/* An aria-disabled control: dimmed by Bootstrap's .disabled, as Learn.UI's action bar is, but still
   pressable, which Bootstrap's .disabled stops. The press reaches the code guard, which says why
   nothing happened, and focus stays where it was. */
.steps-toolbar .btn.disabled[b-ldlhufq7a0],
.steps-conflict .btn.disabled[b-ldlhufq7a0],
.steps-workspace__editor[b-ldlhufq7a0]  .btn.disabled {
    pointer-events: auto;
}
/* /Components/Areas/Admin/Pages/Curriculum/Steps/LessonStepsPreview.razor.rz.scp.css */
/* The phone preview (#462). The frame is 375px wide with the members layout's phone padding, 0.75rem
   a side (MembersLayout.razor.css, the phone block's .content-wrapper), so its column is the 351px a
   learner's phone gives a step. The scroll wrapper holds the scrollbar, so it never narrows the column. */

/* The whole preview sticks, inside a workspace column as tall as the editor (LessonEditor.razor.css),
   so it stays in view while a long lesson's cards scroll by. A sticky element travels only within its
   containing block: the scroll wrapper alone, inside this section, could move no further than the
   glossary below it. The top clears the steps toolbar, which sticks across both columns. */
.steps-preview[b-b9avz8oxt8] {
    position: sticky;
    top: 4rem;
}

.steps-preview__controls[b-b9avz8oxt8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* Room for the toolbar above, and this section's heading and controls. */
.steps-preview__scroll[b-b9avz8oxt8] {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.steps-preview__frame[b-b9avz8oxt8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 375px;
    max-width: 100%;
    padding: 0.75rem;
    border-radius: var(--border-radius-lg, 16px);
    background: var(--bg, #0b0f1a);
    color: var(--text, #ffffff);
    box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.4), 0 8px 25px rgba(0, 0, 0, 0.25);
    overflow-wrap: anywhere;
}

/* An older draft's preview, kept while the new one is on its way or after a failure. */
.steps-preview__frame--stale[b-b9avz8oxt8] {
    opacity: 0.55;
}

/* The player's own rules, which are scoped to LessonStepPlayer and so do not reach here
   (LessonStepPlayer.razor.css). */
.steps-preview__frame[b-b9avz8oxt8]  p {
    line-height: 1.6;
}

.steps-preview__frame[b-b9avz8oxt8]  :is(svg, img) {
    max-width: 100%;
}

.steps-preview__note[b-b9avz8oxt8] {
    margin: 0;
    color: var(--muted, #9fb0d0);
    font-size: 0.8rem;
}

/* An admin control inside the frame: deliberately not .btn, which mtm-site restyles as the site's
   48px button. */
.steps-preview__edit[b-b9avz8oxt8] {
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand1, #ff7f50);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* The open glossary popover sits in the top layer, positioned against the viewport, so it cannot be
   kept inside the frame. A phone-width sheet at the bottom is the nearest thing. */
.steps-preview[b-b9avz8oxt8]  .glossary-popover:popover-open {
    width: min(375px, 100vw);
    margin-inline: auto;
    inset: auto 0 0 0;
}

@media (max-width: 767.98px) {
    .steps-preview[b-b9avz8oxt8] {
        position: static;
    }

    .steps-preview__scroll[b-b9avz8oxt8] {
        max-height: none;
        overflow-y: visible;
    }
}
/* /Components/Areas/LiveQuiz/LiveQuizPresentation.razor.rz.scp.css */
.presentation-container[b-qixp0t0q0c] {
    width: 1920px;
    height: 1080px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Session progress bar ────────────────────────────────────────────────── */

.session-progress[b-qixp0t0q0c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
}

.session-progress-bar[b-qixp0t0q0c] {
    height: 100%;
    background: linear-gradient(90deg, #ff7f50, #ff4d4d);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px rgba(255, 127, 80, 0.5);
}

/* ── Branding ────────────────────────────────────────────────────────────── */

.branding[b-qixp0t0q0c] {
    position: absolute;
    bottom: 32px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.5;
    font-size: 18px;
}

.brand-icon[b-qixp0t0q0c] {
    font-size: 22px;
}

.brand-text[b-qixp0t0q0c] {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Lobby phase ─────────────────────────────────────────────────────────── */

.phase-lobby[b-qixp0t0q0c] {
    text-align: center;
    animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.lobby-icon[b-qixp0t0q0c] {
    font-size: 96px;
    margin-bottom: 32px;
    animation: float 3s ease-in-out infinite;
}

.lobby-title[b-qixp0t0q0c] {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ff7f50, #ff4d4d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
    background-size: 200% 100%;
}

.lobby-subtitle[b-qixp0t0q0c] {
    font-size: 32px;
    color: #9fb0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pulse-dot[b-qixp0t0q0c] {
    width: 14px;
    height: 14px;
    background: #ff4d4d;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.6);
}

.lobby-info[b-qixp0t0q0c] {
    margin-top: 24px;
    font-size: 24px;
    color: #9fb0d0;
    opacity: 0.7;
}

/* Lobby floating particles */
.lobby-particles[b-qixp0t0q0c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle[b-qixp0t0q0c] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 127, 80, 0.4);
    border-radius: 50%;
    animation: particleFloat 6s ease-in-out infinite;
}

    .particle:nth-child(1)[b-qixp0t0q0c] { left: 10%; top: 80%; animation-delay: 0s; animation-duration: 5s; }
    .particle:nth-child(2)[b-qixp0t0q0c] { left: 30%; top: 90%; animation-delay: 1s; animation-duration: 7s; }
    .particle:nth-child(3)[b-qixp0t0q0c] { left: 50%; top: 85%; animation-delay: 2s; animation-duration: 6s; }
    .particle:nth-child(4)[b-qixp0t0q0c] { left: 70%; top: 88%; animation-delay: 0.5s; animation-duration: 8s; }
    .particle:nth-child(5)[b-qixp0t0q0c] { left: 90%; top: 82%; animation-delay: 1.5s; animation-duration: 5.5s; }

/* ── Question phase ──────────────────────────────────────────────────────── */

.phase-question[b-qixp0t0q0c] {
    width: 1680px;
    text-align: center;
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.question-counter[b-qixp0t0q0c] {
    font-size: 22px;
    color: #9fb0d0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
    animation: fadeIn 0.4s ease;
}

/* ── Countdown ring with SVG progress ────────────────────────────────────── */

.countdown-ring[b-qixp0t0q0c] {
    position: absolute;
    top: 40px;
    right: 60px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 42, 0.9);
}

.countdown-svg[b-qixp0t0q0c] {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-track[b-qixp0t0q0c] {
    fill: none;
    stroke: rgba(255, 127, 80, 0.15);
    stroke-width: 4;
}

.countdown-progress[b-qixp0t0q0c] {
    fill: none;
    stroke: #ff7f50;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.countdown-number[b-qixp0t0q0c] {
    font-size: 36px;
    font-weight: 700;
    color: #ff7f50;
    z-index: 1;
    transition: color 0.3s ease;
}

.countdown-urgent .countdown-progress[b-qixp0t0q0c] {
    stroke: #ff4d4d;
}

.countdown-urgent .countdown-number[b-qixp0t0q0c] {
    color: #ff4d4d;
    animation: countdownPulse 0.6s ease-in-out infinite;
}

.countdown-urgent[b-qixp0t0q0c] {
    animation: ringShake 0.4s ease-in-out infinite;
}

.question-text[b-qixp0t0q0c] {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 48px;
    padding: 0 40px;
    animation: focusIn 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Options grid ────────────────────────────────────────────────────────── */

.options-grid[b-qixp0t0q0c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 20px;
}

.option-card[b-qixp0t0q0c] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 36px;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    background: rgba(17, 24, 42, 0.8);
    animation: optionSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: border-color 0.4s ease, background 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Staggered entry delays */
.stagger-1[b-qixp0t0q0c] { animation-delay: 0.1s; }
.stagger-2[b-qixp0t0q0c] { animation-delay: 0.2s; }
.stagger-3[b-qixp0t0q0c] { animation-delay: 0.3s; }
.stagger-4[b-qixp0t0q0c] { animation-delay: 0.4s; }

.option-letter[b-qixp0t0q0c] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.option-text[b-qixp0t0q0c] {
    font-size: 28px;
    font-weight: 500;
    text-align: left;
}

/* Option letter colors */
.option-a .option-letter[b-qixp0t0q0c] { background: rgba(255, 127, 80, 0.2); color: #ff7f50; }
.option-b .option-letter[b-qixp0t0q0c] { background: rgba(99, 179, 237, 0.2); color: #63b3ed; }
.option-c .option-letter[b-qixp0t0q0c] { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.option-d .option-letter[b-qixp0t0q0c] { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }

/* Correct answer reveal */
.option-correct[b-qixp0t0q0c] {
    border-color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.15) !important;
    animation: correctBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.3), inset 0 0 20px rgba(74, 222, 128, 0.05);
}

    .option-correct .option-letter[b-qixp0t0q0c] {
        background: #4ade80 !important;
        color: #0b0f1a !important;
        transform: scale(1.1);
    }

/* Incorrect answer fade */
.option-incorrect[b-qixp0t0q0c] {
    opacity: 0.3;
    border-color: rgba(255, 255, 255, 0.03) !important;
    transform: scale(0.97);
}

/* ── Explanation ──────────────────────────────────────────────────────────── */

.explanation-card[b-qixp0t0q0c] {
    margin-top: 32px;
    padding: 24px 40px;
    background: rgba(255, 127, 80, 0.08);
    border: 2px solid rgba(255, 127, 80, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    animation: explanationReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 24px rgba(255, 127, 80, 0.1);
}

.explanation-icon[b-qixp0t0q0c] {
    font-size: 32px;
    flex-shrink: 0;
    animation: explanationBulb 0.6s ease 0.3s both;
}

.explanation-text[b-qixp0t0q0c] {
    font-size: 26px;
    color: #e2e8f0;
    line-height: 1.5;
    text-align: left;
}

/* ── Completed phase ─────────────────────────────────────────────────────── */

.phase-completed[b-qixp0t0q0c] {
    text-align: center;
    animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.completed-icon[b-qixp0t0q0c] {
    font-size: 120px;
    margin-bottom: 32px;
    animation: trophyBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completed-title[b-qixp0t0q0c] {
    font-size: 72px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff7f50, #ff4d4d, #fbbf24, #ff7f50);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    animation: gradientShift 3s ease-in-out infinite;
}

.completed-subtitle[b-qixp0t0q0c] {
    font-size: 36px;
    color: #9fb0d0;
    margin-bottom: 48px;
    animation: fadeIn 0.8s ease 0.4s both;
}

.completed-brand[b-qixp0t0q0c] {
    font-size: 24px;
    color: #9fb0d0;
    opacity: 0.5;
    letter-spacing: 2px;
    animation: fadeIn 1s ease 0.8s both;
}

/* Completed sparkles */
.completed-sparkles[b-qixp0t0q0c] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.sparkle[b-qixp0t0q0c] {
    font-size: 36px;
    animation: sparkleFloat 2s ease-in-out infinite;
    opacity: 0.8;
}

    .sparkle:nth-child(1)[b-qixp0t0q0c] { animation-delay: 0s; }
    .sparkle:nth-child(2)[b-qixp0t0q0c] { animation-delay: 0.3s; }
    .sparkle:nth-child(3)[b-qixp0t0q0c] { animation-delay: 0.6s; }
    .sparkle:nth-child(4)[b-qixp0t0q0c] { animation-delay: 0.9s; }
    .sparkle:nth-child(5)[b-qixp0t0q0c] { animation-delay: 1.2s; }

/* ── Animations ──────────────────────────────────────────────────────────── */

@@keyframes fadeIn {
    from[b-qixp0t0q0c] { opacity: 0; transform: translateY(20px); }
    to[b-qixp0t0q0c] { opacity: 1; transform: translateY(0); }
}

@@keyframes slideInUp {
    from[b-qixp0t0q0c] { opacity: 0; transform: translateY(60px); }
    to[b-qixp0t0q0c] { opacity: 1; transform: translateY(0); }
}

@@keyframes scaleIn {
    from[b-qixp0t0q0c] { opacity: 0; transform: scale(0.85); }
    to[b-qixp0t0q0c] { opacity: 1; transform: scale(1); }
}

@@keyframes focusIn {
    from[b-qixp0t0q0c] { opacity: 0; filter: blur(8px); transform: translateY(10px); }
    to[b-qixp0t0q0c] { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@@keyframes optionSlideIn {
    from[b-qixp0t0q0c] { opacity: 0; transform: translateX(-40px); }
    to[b-qixp0t0q0c] { opacity: 1; transform: translateX(0); }
}

@@keyframes float {
    0%[b-qixp0t0q0c], 100%[b-qixp0t0q0c] { transform: translateY(0); }
    50%[b-qixp0t0q0c] { transform: translateY(-15px); }
}

@@keyframes pulse {
    0%[b-qixp0t0q0c], 100%[b-qixp0t0q0c] { opacity: 1; transform: scale(1); }
    50%[b-qixp0t0q0c] { opacity: 0.6; transform: scale(1.05); }
}

@@keyframes countdownPulse {
    0%[b-qixp0t0q0c], 100%[b-qixp0t0q0c] { transform: scale(1); }
    50%[b-qixp0t0q0c] { transform: scale(1.15); }
}

@@keyframes ringShake {
    0%[b-qixp0t0q0c], 100%[b-qixp0t0q0c] { transform: translateX(0); }
    25%[b-qixp0t0q0c] { transform: translateX(-2px); }
    75%[b-qixp0t0q0c] { transform: translateX(2px); }
}

@@keyframes correctBounce {
    0%[b-qixp0t0q0c] { transform: scale(1); }
    40%[b-qixp0t0q0c] { transform: scale(1.05); }
    70%[b-qixp0t0q0c] { transform: scale(0.98); }
    100%[b-qixp0t0q0c] { transform: scale(1); }
}

@@keyframes explanationReveal {
    from[b-qixp0t0q0c] { opacity: 0; transform: translateY(40px) scale(0.95); }
    to[b-qixp0t0q0c] { opacity: 1; transform: translateY(0) scale(1); }
}

@@keyframes explanationBulb {
    from[b-qixp0t0q0c] { opacity: 0; transform: scale(0.5) rotate(-20deg); }
    to[b-qixp0t0q0c] { opacity: 1; transform: scale(1) rotate(0deg); }
}

@@keyframes trophyBounce {
    0%[b-qixp0t0q0c] { opacity: 0; transform: scale(0) rotate(-10deg); }
    50%[b-qixp0t0q0c] { transform: scale(1.15) rotate(5deg); }
    70%[b-qixp0t0q0c] { transform: scale(0.95) rotate(-2deg); }
    100%[b-qixp0t0q0c] { opacity: 1; transform: scale(1) rotate(0); }
}

@@keyframes shimmer {
    0%[b-qixp0t0q0c] { background-position: 100% 50%; }
    50%[b-qixp0t0q0c] { background-position: 0% 50%; }
    100%[b-qixp0t0q0c] { background-position: 100% 50%; }
}

@@keyframes gradientShift {
    0%[b-qixp0t0q0c] { background-position: 0% 50%; }
    50%[b-qixp0t0q0c] { background-position: 100% 50%; }
    100%[b-qixp0t0q0c] { background-position: 0% 50%; }
}

@@keyframes sparkleFloat {
    0%[b-qixp0t0q0c], 100%[b-qixp0t0q0c] { transform: translateY(0) scale(1); opacity: 0.8; }
    50%[b-qixp0t0q0c] { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

@@keyframes particleFloat {
    0%[b-qixp0t0q0c] { transform: translateY(0) scale(1); opacity: 0.4; }
    50%[b-qixp0t0q0c] { transform: translateY(-200px) scale(0.5); opacity: 0.1; }
    100%[b-qixp0t0q0c] { transform: translateY(-400px) scale(0); opacity: 0; }
}
/* /Components/Areas/Members/Layout/MembersAccountNav.razor.rz.scp.css */
/* Phone only (#460). At 768px and wider the sidebar carries these links. */
.members-account-nav[b-9nrp3mdaoq] {
    display: none;
}

@media (max-width: 767.98px) {
    .members-account-nav[b-9nrp3mdaoq] {
        display: block;
        padding: 0.5rem calc(0.75rem + var(--safe-right)) 0.5rem calc(0.75rem + var(--safe-left));
        background: var(--bg);
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* Wraps rather than scrolling sideways, so nothing is ever off-screen at 320px. */
    .members-account-nav__list[b-9nrp3mdaoq] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .members-account-nav__list > li[b-9nrp3mdaoq] {
        display: flex;
    }

    /* Through ::deep because LogoutButton renders its own form and button, which carry its scope
       rather than this one. The links match the same rule, so all four look alike.

       The button is named a second time, as button.members-account-nav__link, for the specificity:
       LogoutButton's own reset, .logout-button:not(.btn), ties with the plain selector and comes
       later in the bundle, so on its own this rule would lose the border, the font size and the
       colour on Logout. */
    .members-account-nav[b-9nrp3mdaoq]  .logout-form {
        display: flex;
        margin: 0;
    }

    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link,
    .members-account-nav[b-9nrp3mdaoq]  button.members-account-nav__link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--touch-target);
        padding: 0 1rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--border-radius);
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
    }

    /* The row's gap spaces the icon. LogoutButton also gives its icon a 0.75rem margin, which would
       push Logout's label further out than the others'. */
    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link .bi {
        margin-right: 0;
    }

    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link[aria-current] {
        border-color: var(--brand1);
        color: var(--brand1);
        font-weight: 700;
    }

    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link:focus-visible {
        outline: 3px solid var(--brand1);
        outline-offset: -3px;
    }
}

@media (max-width: 767.98px) and (hover: hover) {
    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link:hover {
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none;
    }
}

@media (max-width: 767.98px) and (forced-colors: active) {
    .members-account-nav[b-9nrp3mdaoq]  .members-account-nav__link[aria-current] {
        text-decoration: underline;
    }
}
/* /Components/Areas/Members/Layout/MembersLayout.razor.rz.scp.css */
.page-container[b-wqf6jp0ddi] {
    display: flex;
    /* Column, not the default row. The environment banner is a direct child of this container and
       the platform renders it in flow (position: relative; width: 100%), so in a row it was laid
       out as a sibling *column* of the page content: a full-height red bar down the left, its own
       text hidden behind the fixed sidebar, and the members content squeezed into what was left
       (#323).

       The row was doing almost nothing to begin with. .sidebar is position: fixed and so out of
       flow, and .main-content places itself with margin-left rather than by flex - which is why
       switching direction moves the banner without moving anything else. */
    flex-direction: column;
    min-height: 100vh;
    /* dvh where supported: on phones 100vh is the height with the browser toolbar hidden, so a page
       that fits would still scroll. The line above is the fallback. */
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    /* The shell's edge contract (#460): how far content must stay from the top and bottom of the
       screen to clear the bars and the safe areas. Pages and RCL content read these rather than
       anything about the layout, and they inherit through CSS isolation.

       Re-declared in full in every state below, never derived from an overridden token: a custom
       property computed from another resolves where it is declared, so overriding only
       --members-tabbar-height would not move a value computed here. */
    --shell-inset-top: var(--safe-top);
    --shell-inset-bottom: var(--safe-bottom);

    /* Never add transform, filter, backdrop-filter, perspective, contain, will-change or overflow
       here. Each makes this element the containing block for its fixed descendants, or clips them,
       which breaks the fixed tab bar and the sticky top bar. MembersShellContractTests pins it. */
}

.sidebar[b-wqf6jp0ddi] {
    /* 250px, matching the documented design system. At 200px only ~82px was left for label text
       after the icon and padding, so "Circle of Fifths", "Practice Tracker" and "Login / Sign Up"
       all wrapped to two lines and spilled out of their fixed-height boxes.

       Plus the left safe area, padded back in. Face ID iPhones are 780-956 CSS px wide in landscape,
       so they get this layout with the notch on one side (#460). Elsewhere the inset is 0 and this
       is exactly 250px, with the same content width (border-box). */
    width: calc(250px + var(--safe-left));
    padding-left: var(--safe-left);
    /* Was a hardcoded #212529 — Bootstrap's --bs-gray-900 — which read as a mismatched grey slab
       against the site's --bg (#0b0f1a) used by .page-container and .main-content either side of it.
       --card is the design system's elevated-surface colour, and the border gives the seam the same
       treatment as every card in the app instead of relying on a raw colour difference. */
    background: var(--card);
    border-right: 1px solid var(--bs-border-color);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    z-index: 1000;
}

.main-content[b-wqf6jp0ddi] {
    flex: 1;
    margin-left: calc(250px + var(--safe-left)); /* must track .sidebar width above */
    padding-right: var(--safe-right);
    /* Content never sits under the fixed tab bar, and on a full-screen page clears the home
       indicator. 0 on desktop. */
    padding-bottom: var(--shell-inset-bottom);
    /* Never give this a z-index. A stacking context here would trap Bootstrap's dropdown menus under
       the tab bar, whatever z-index the menu itself is given. */
    /* Was min-height: 100vh. In the column flex above, flex: 1 already fills whatever height is
       left, and a hard 100vh here would add the banner's height on top of a full viewport and put
       a scrollbar on every members page that has nothing to scroll. */
    min-height: 0;
    background: var(--bg);
    color: var(--text);
}

.content-wrapper[b-wqf6jp0ddi] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* The full-screen page's fallback exit, shown on phones only and only until the page renders; see
   the phone block below and MembersLayout.razor. Desktop keeps the sidebar, so never here. */
.members-immersive-exit[b-wqf6jp0ddi] {
    display: none;
}

/* The banner has to clear the sidebar as well as sit above the content.

   Switching .page-container to a column stops the banner being a full-height sibling column, but it
   still begins at x=0, and .sidebar is position: fixed at z-index 1000 - so the sidebar paints over
   the banner's first 250px and swallows the words that name the environment. Measured before this
   rule: the text "DEVELOPMENT ENVIRONMENT" ran from x=16 to x=234, entirely behind a sidebar whose
   right edge is at 250. Only the version tail was legible, which is the half that does not say
   which environment you are in (#323).

   Offset rather than raised above the sidebar: this matches how .main-content already clears it, so
   the banner belongs to the content region and the sidebar's own header stays visible.

   Padding rather than the margin .main-content uses, and the difference matters. The platform
   banner is width: 100%, so a 250px left margin left it 250px wider than its container and pushed
   a horizontal scrollbar onto every members page - measured at 1400px wide: banner x=250, width
   1385, running 235px past the viewport. Padding with border-box keeps the element exactly as wide
   as the container and moves only its contents. The strip of red behind the sidebar costs nothing,
   because the sidebar paints over it.

   The safe areas are added for landscape phones, which get this layout too (#460). The right padding
   is the platform's own 1rem plus the inset, so on a desktop both values are unchanged. */
.page-container[b-wqf6jp0ddi]  .env-banner {
    box-sizing: border-box;
    padding-left: calc(250px + var(--safe-left)); /* must track .sidebar width above */
    padding-right: calc(1rem + var(--safe-right));
}

/* Phones (#460). One members breakpoint: max-width 767.98px here, and the unqualified rules above
   are desktop. The .98 is Bootstrap's md-down value - a 767px max and a 768px min leave fractional
   widths (zoom, split view) matching neither. Range syntax (width < 768px) would need Safari 16.4.

   This replaces a 767px block and a 640px one. Between 641 and 767 the content lost its margin while
   the fixed sidebar was still on screen, so the sidebar covered the first 250px of every page. */
@media (max-width: 767.98px) {
    .page-container[b-wqf6jp0ddi] {
        --shell-inset-top: calc(var(--members-topbar-height) + var(--safe-top));
        --shell-inset-bottom: calc(var(--members-tabbar-height) + var(--safe-bottom));
    }

    /* A full-screen page has no bars, so only the safe areas. Nothing else would keep its content -
       and the fallback exit - out from under a top inset. */
    .page-container.members-shell--immersive[b-wqf6jp0ddi] {
        --shell-inset-top: var(--safe-top);
        --shell-inset-bottom: var(--safe-bottom);
        padding-top: var(--safe-top);
    }

    /* The tab bar replaces it. Hidden rather than off-canvas: there is no menu to open any more. */
    .sidebar[b-wqf6jp0ddi] {
        display: none;
    }

    .main-content[b-wqf6jp0ddi] {
        margin-left: 0;
        padding-left: var(--safe-left);
    }

    /* Restores the platform's 1rem either side, which the old phone rule had set to 0, plus the safe
       areas. The top inset only where the top bar is not padding for it - a full-screen page pads
       the whole container instead. */
    .page-container[b-wqf6jp0ddi]  .env-banner {
        padding-left: calc(1rem + var(--safe-left));
        padding-right: calc(1rem + var(--safe-right));
    }

    .page-container:not(.members-shell--immersive)[b-wqf6jp0ddi]  .env-banner {
        padding-top: calc(0.625rem + var(--safe-top));
    }

    /* Part of the edge contract #461 maps its own offsets from: 0.75rem here, 1.5rem above. */
    .content-wrapper[b-wqf6jp0ddi] {
        padding: 0.75rem;
    }

    /* Only while it is the wrapper's only element: the page's own first render hides it, with no
       JavaScript and no knowledge of the page's class names. */
    .members-immersive-exit:only-child[b-wqf6jp0ddi] {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target);
        padding: 0 0.75rem;
    }

    /* Touch targets. Specificity (0,3,0) beats .mtm-site .btn-sm's height: 36px, and min-height wins
       over height; public pages and desktop keep 36px. */
    .page-container[b-wqf6jp0ddi]  .btn-sm {
        min-height: var(--touch-target-min);
    }

    .main-content[b-wqf6jp0ddi]  .learn-back {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
    }

    /* The unit links on /learn and the lesson links on /learn/{unit} are bare inline anchors with no
       other CSS, so they are one line of text tall without this. */
    .main-content[b-wqf6jp0ddi]  .learn-unit__header a,
    .main-content[b-wqf6jp0ddi]  .learn-lesson__main > a {
        display: flex;
        align-items: center;
        min-height: var(--touch-target-min);
    }

    .main-content[b-wqf6jp0ddi]  .dropdown-item {
        display: flex;
        align-items: center;
        min-height: var(--touch-target-min);
    }

    /* Above the tab bar (1030), below #blazor-error-ui (1040) and the modals (1050). Popper does not
       know the bar is there, so a menu opened near the bottom of the screen - Profile's instrument
       actions - would otherwise open underneath it. */
    .main-content[b-wqf6jp0ddi]  .dropdown-menu {
        z-index: 1035;
    }

    /* Without this the 1035 only counts inside a card. A phone keeps :hover on whatever was last
       tapped and its ancestors, so tapping Profile's instrument actions button leaves its card (and
       the section card around it) hovered, and app.css's .card:hover lift is a transform - which
       makes the card a stacking context. The menu is then layered within the card, and the tab bar
       paints over the whole card. The shadow stays; only the lift goes. */
    .main-content[b-wqf6jp0ddi]  .card:hover {
        transform: none;
    }
}

/* The top bar stops sticking here (MembersTopBar.razor.css), so nothing covers the top any more. */
@media (max-width: 767.98px) and (max-height: 480px) {
    .page-container:not(.members-shell--immersive)[b-wqf6jp0ddi] {
        --shell-inset-top: var(--safe-top);
    }
}

/* The tab bar stops being fixed here (MembersTabBar.razor.css) and sits in flow after main. */
@media (max-width: 767.98px) and (max-height: 280px) {
    .page-container[b-wqf6jp0ddi] {
        --shell-inset-top: var(--safe-top);
        --shell-inset-bottom: var(--safe-bottom);
    }
}
/* /Components/Areas/Members/Layout/MembersTabBar.razor.rz.scp.css */
/* Phone only (#460). At 768px and wider the sidebar is the navigation, so the bar is rendered but
   never shown: the server cannot see the viewport width. */
.members-tabbar[b-8j8id2lcfc] {
    display: none;
}

@media (max-width: 767.98px) {
    /* left and right rather than width: 100vw, which counts the scrollbar and overflows.

       The safe-area padding is on the nav, not on the links, so a tap never lands in the
       home-indicator zone and the links stay their full height whatever the inset.

       The top line is a box-shadow rather than a border, so the bar is exactly
       --members-tabbar-height plus the inset - the value --shell-inset-bottom reserves for it. */
    .members-tabbar[b-8j8id2lcfc] {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
        background: var(--card);
        box-shadow: 0 -1px 0 var(--bs-border-color);
    }

    /* Equal columns for however many tabs there are: four signed in, two or three signed out. */
    .members-tabbar__list[b-8j8id2lcfc] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .members-tabbar__link[b-8j8id2lcfc] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: var(--members-tabbar-height);
        min-width: var(--touch-target);
        padding: 0.25rem;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    .members-tabbar__link .bi[b-8j8id2lcfc] {
        font-size: 1.25rem;
        line-height: 1;
    }

    /* Not by colour alone (WCAG 1.4.1): weight and an inset top indicator as well. Contrast on
       --card: --muted 8.1:1, --brand1 7.07:1. */
    .members-tabbar__link[aria-current][b-8j8id2lcfc] {
        color: var(--brand1);
        font-weight: 700;
        box-shadow: inset 0 3px 0 var(--brand1);
    }

    .members-tabbar__link:focus-visible[b-8j8id2lcfc] {
        outline: 3px solid var(--brand1);
        outline-offset: -3px;
    }
}

@media (max-width: 767.98px) and (hover: hover) {
    .members-tabbar__link:hover[b-8j8id2lcfc] {
        color: var(--text);
        text-decoration: none;
    }
}

/* Forced colours remove box-shadow, which would leave the current tab marked by nothing. */
@media (max-width: 767.98px) and (forced-colors: active) {
    .members-tabbar__link[aria-current][b-8j8id2lcfc] {
        text-decoration: underline;
    }
}

/* Below 280px of height 56px is more than a fifth of the screen - 400% zoom on a 1280x800 or
   1280x1024 display lands here. The bar then sits in flow after main, which is why it comes after
   main in the DOM. --shell-inset-bottom drops with it, in MembersLayout.razor.css. */
@media (max-width: 767.98px) and (max-height: 280px) {
    .members-tabbar[b-8j8id2lcfc] {
        position: static;
    }
}
/* /Components/Areas/Members/Layout/MembersTopBar.razor.rz.scp.css */
/* Phone only (#460). At 768px and wider the sidebar carries the brand and navigation, so the bar is
   rendered but never shown: the server cannot see the viewport width. */
.members-topbar[b-olrfzx3cnd] {
    display: none;
}

@media (max-width: 767.98px) {
    /* A direct child of .page-container, never inside main: a transform, filter or overflow on an
       ancestor would stop position: sticky from sticking. */
    .members-topbar[b-olrfzx3cnd] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 1020;
        /* The bar's own height plus the notch, which the padding keeps clear. */
        min-height: calc(var(--members-topbar-height) + var(--safe-top));
        padding: var(--safe-top) calc(0.75rem + var(--safe-right)) 0 calc(0.25rem + var(--safe-left));
        background: var(--card);
        border-bottom: 1px solid var(--bs-border-color);
    }

    .members-topbar__home[b-olrfzx3cnd] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: var(--touch-target);
        height: var(--touch-target);
        border-radius: var(--border-radius);
    }

    .members-topbar__home img[b-olrfzx3cnd] {
        display: block;
        border-radius: 8px;
    }

    .members-topbar__home:focus-visible[b-olrfzx3cnd] {
        outline: 3px solid var(--brand1);
        outline-offset: -3px;
    }

    .members-topbar__title[b-olrfzx3cnd] {
        flex: 1;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: var(--text);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .members-topbar__streak[b-olrfzx3cnd] {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        gap: 0.25rem;
        margin: 0;
        color: var(--brand1);
        font-weight: 700;
    }
}

/* Landscape phones and 400% zoom: a sticky bar would take too much of a short screen (WCAG 1.4.10).
   --shell-inset-top drops with it, in MembersLayout.razor.css. */
@media (max-width: 767.98px) and (max-height: 480px) {
    .members-topbar[b-olrfzx3cnd] {
        position: static;
    }
}
/* /Components/Areas/Members/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-d90n8w3nbi] {
    min-height: 4rem;
    background: rgba(17, 24, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand[b-d90n8w3nbi] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: var(--transition);
}

.navbar-brand:hover[b-d90n8w3nbi] {
    color: var(--brand1);
    transform: scale(1.02);
    text-decoration: none;
}

/* Improved brand container layout */
.brand-container[b-d90n8w3nbi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo[b-d90n8w3nbi] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-image: url('/img/music-theory-mastery-logo-only-v2.svg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: white;
    overflow: hidden;
}

.brand-text[b-d90n8w3nbi] {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

/* Improved Bootstrap Icons alignment */
.bi[b-d90n8w3nbi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    vertical-align: middle;
    transition: var(--transition);
}

.nav-item[b-d90n8w3nbi] {
    font-size: 0.95rem;
    padding: 0.25rem 0;
    margin: 0.125rem 0;
}

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

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

/* Standard nav links - covers NavLink components */
.nav-item[b-d90n8w3nbi]  a {
    color: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius);
    /* min-height, not height: a label that needs a second line now grows the box instead of
       overflowing it and colliding with the item below. */
    min-height: 3rem;
    display: flex;
    align-items: center;
    /* Was line-height: 3rem. Combined with wrapping that gave every wrapped line 48px of leading,
       so a two-line label produced ~96px of line boxes inside a 48px box — which is what made the
       buttons overlap and the text spill. Vertical centring is already handled by align-items. */
    line-height: 1.4;
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    transition: var(--transition);
    font-weight: 500;
}

.nav-item[b-d90n8w3nbi]  a.active {
    background: rgba(255, 127, 80, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 127, 80, 0.3);
    transform: translateX(4px);
}

.nav-item[b-d90n8w3nbi]  a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateX(2px);
}

/* Comprehensive LogoutButton styling - covers all possible selectors */
.nav-item[b-d90n8w3nbi]  .nav-link,
.nav-item[b-d90n8w3nbi]  button.nav-link,
.nav-item[b-d90n8w3nbi]  a.nav-link,
.nav-item[b-d90n8w3nbi]  .logout-button,
.nav-item[b-d90n8w3nbi]  button.logout-button,
.nav-item[b-d90n8w3nbi]  a.logout-button {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--border-radius) !important;
    /* min-height + a normal line-height, for the same reason as the base rule above. This block is
       more specific AND uses !important, so it is what actually applies to every NavLink — the base
       rule alone could not fix the overlap. A label that ever needs two lines now grows its box
       instead of spilling 48px of leading per line onto the item below. */
    min-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.5rem !important;
    transition: var(--transition) !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    width: calc(100% - 1rem) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
}

.nav-item[b-d90n8w3nbi]  .nav-link:hover,
.nav-item[b-d90n8w3nbi]  button.nav-link:hover,
.nav-item[b-d90n8w3nbi]  a.nav-link:hover,
.nav-item[b-d90n8w3nbi]  .logout-button:hover,
.nav-item[b-d90n8w3nbi]  button.logout-button:hover,
.nav-item[b-d90n8w3nbi]  a.logout-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

/* Ensure icons in logout buttons are properly aligned */
.nav-item[b-d90n8w3nbi]  .nav-link .bi,
.nav-item[b-d90n8w3nbi]  .logout-button .bi {
    flex-shrink: 0;
    margin-right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-divider[b-d90n8w3nbi] {
    margin: 1rem 1.5rem;
    border-color: rgba(255, 255, 255, 0.16);
    border-style: solid;
    border-width: 1px 0 0 0;
}

/* What used to be the min-width: 641px block is now the only rule: NavMenu renders only inside
   MembersLayout's .sidebar, which is hidden below 768px (#460), so these values are what every width
   that shows it already had.

   The bottom padding clears the home indicator on a landscape iPhone, which gets the sidebar. */
.nav-scrollable[b-d90n8w3nbi] {
    display: block;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    overflow-y: auto;
    padding-bottom: calc(1rem + var(--safe-bottom));
}

.nav-scrollable[b-d90n8w3nbi]::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable[b-d90n8w3nbi]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.nav-scrollable[b-d90n8w3nbi]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.nav-scrollable[b-d90n8w3nbi]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Ensure consistent icon alignment for all nav items */
.nav-item .nav-link .bi[b-d90n8w3nbi],
.nav-item[b-d90n8w3nbi]  .nav-link .bi,
.nav-item[b-d90n8w3nbi]  a .bi {
    flex-shrink: 0;
}
/* /Components/Areas/Members/Pages/Learn/CurriculumMap.razor.rz.scp.css */
/* The curriculum map's own styles (#642). Until this file existed none of these classes matched a
   rule: the summary stacked as six lines of text, and a locked unit looked identical to an open
   one. Card and colour values come from app.css's tokens so the page matches the rest of the
   members area. */

.learn-map[b-049llpkk3y] {
    /* The page's own rhythm: the gap between stat tiles and between unit cards. */
    --learn-gap: 0.75rem;
}

/* A row of stat tiles on desktop, two columns on a phone - the members area's one breakpoint. */
.learn-map__summary[b-049llpkk3y] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--learn-gap);
}

.learn-stat[b-049llpkk3y] {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    text-align: center;
}

.learn-stat__value[b-049llpkk3y] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.learn-stat__of[b-049llpkk3y] {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--muted);
}

.learn-stat__label[b-049llpkk3y] {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Shared markup with MyAccount, but scoped CSS reaches only the component that declares it - so
   MyAccount.razor.css's copy never applied here, and the bar fell back to solid --bs-primary. */
.brand-gradient[b-049llpkk3y] {
    background: linear-gradient(45deg, var(--brand1, #ff7f50), var(--brand2, #ff4d4d)) !important;
}

.learn-unit[b-049llpkk3y] {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: var(--learn-gap);
}

.learn-unit--locked[b-049llpkk3y] {
    opacity: 0.65;
}

.learn-unit__header[b-049llpkk3y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.learn-unit__stars[b-049llpkk3y] {
    color: var(--muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.learn-unit__lock[b-049llpkk3y] {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .learn-map__summary[b-049llpkk3y] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Areas/Members/Pages/Learn/LessonPlayer.razor.rz.scp.css */
/* What MembersLayout takes above and below the player, so Learn.UI's column fills exactly the rest
   of the screen and its primary button lands at the bottom (#461, Decision 17 with #460). Learn.UI
   reads only these two properties, with 0px fallbacks; the values track MembersLayout.razor.css. */
.lesson-host[b-cah01ofney] {
    /* .page-container's --shell-inset-top and --shell-inset-bottom (re-declared there in every
       state), plus .content-wrapper's padding above and below the page: 1.5rem each, so 3rem. */
    --learn-top-offset: calc(var(--shell-inset-top, 0px) + var(--shell-inset-bottom, 0px) + 3rem);
    /* .page-container.members-shell--immersive renders no tab bar, so nothing fixed sits below. */
    --learn-bottom-offset: 0px;
}

@media (max-width: 767.98px) {
    .lesson-host[b-cah01ofney] {
        /* The phone block's .content-wrapper padding: 0.75rem above and below, so 1.5rem. */
        --learn-top-offset: calc(var(--shell-inset-top, 0px) + var(--shell-inset-bottom, 0px) + 1.5rem);
    }
}

/* The signed-out "Back to the unit" link mirrors UnitView.razor.css's .learn-back (#688). */
.learn-back[b-cah01ofney] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--muted);
    text-decoration: none;
}

.learn-back:hover[b-cah01ofney] {
    color: var(--text);
}
/* /Components/Areas/Members/Pages/Learn/UnitView.razor.rz.scp.css */
/* The unit view's own styles (#642). The lesson stars reuse the lesson result screen's colours -
   Learn.UI/Player/LessonResultView.razor.css - so an earned star reads the same on both screens:
   rgba(255, 255, 255, 0.2) unearned, --warning-color earned. */

.learn-unit-view[b-2l9m43zkga] {
    /* The page's own rhythm: the gap between lesson rows. */
    --learn-gap: 0.75rem;
}

.learn-back[b-2l9m43zkga] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--muted);
    text-decoration: none;
}

.learn-back:hover[b-2l9m43zkga] {
    color: var(--text);
}

.learn-lessons[b-2l9m43zkga] {
    display: flex;
    flex-direction: column;
    gap: var(--learn-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.learn-lesson[b-2l9m43zkga] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 1.25rem;
}

.learn-lesson--locked[b-2l9m43zkga] {
    opacity: 0.65;
}

.learn-lesson__main[b-2l9m43zkga] {
    flex: 1;
    min-width: 0;
}

.learn-lesson__lock[b-2l9m43zkga] {
    color: var(--muted);
    font-size: 0.875rem;
}

.learn-lesson__stars[b-2l9m43zkga] {
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.125rem;
    white-space: nowrap;
}

.star[b-2l9m43zkga] {
    color: rgba(255, 255, 255, 0.2);
}

.star--on[b-2l9m43zkga] {
    color: var(--warning-color, #facc15);
}
/* /Components/Areas/Members/Pages/MyAccount.razor.rz.scp.css */
.account-page[b-luqwzff0cs] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}



.streak-stat[b-luqwzff0cs] {
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 165, 0, 0.1));
    border: 1px solid rgba(255, 107, 107, 0.2);
    margin-bottom: 1rem;
}

.streak-icon[b-luqwzff0cs] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.streak-number[b-luqwzff0cs] {
    font-size: 2rem;
    font-weight: bold;
    color: var(--bs-primary);
    margin-bottom: 0.25rem;
}

.streak-label[b-luqwzff0cs] {
    white-space: nowrap;
    color: var(--bs-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.brand-gradient[b-luqwzff0cs] {
    background: linear-gradient(45deg, var(--brand1, #ff7f50), var(--brand2, #ff4d4d)) !important;
}



/* Updated gradient using brand colors for dark theme */
.profile-summary[b-luqwzff0cs] {
    background: linear-gradient(135deg, var(--brand1, #ff7f50) 0%, var(--brand2, #ff4d4d) 100%);
    color: white;
    border: none;
    box-shadow: 0 5px 15px rgba(255, 77, 77, 0.2);
}

.profile-summary .card-body[b-luqwzff0cs] {
    padding: 2rem;
    color: white;
}

.profile-picture-container[b-luqwzff0cs] {
    position: relative;
    display: inline-block;
}

.profile-picture[b-luqwzff0cs] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
    display: block;
    background: rgba(255, 255, 255, 0.1);
}

.profile-picture-placeholder[b-luqwzff0cs] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.profile-picture-placeholder i[b-luqwzff0cs] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
}

.profile-stats[b-luqwzff0cs] {
    margin-top: 1rem;
}

.profile-stats .stat[b-luqwzff0cs] {
    text-align: center;
}

.profile-stats .stat .fw-bold[b-luqwzff0cs] {
    font-size: 1.1rem;
    margin-top: 0.25rem;
    color: white;
}

.badge[b-luqwzff0cs] {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    color: white;
}

/* Ensure all text in profile summary is white */
.profile-summary h4[b-luqwzff0cs],
.profile-summary p[b-luqwzff0cs],
.profile-summary div[b-luqwzff0cs],
.profile-summary small[b-luqwzff0cs] {
    color: white !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .account-page[b-luqwzff0cs] {
        padding: 1rem 0.5rem;
    }
    
    .profile-summary .card-body[b-luqwzff0cs] {
        padding: 1.5rem;
    }
}
/* /Components/Areas/Members/Pages/Profile.razor.rz.scp.css */
/* Match app.css's original h5/h6 sizes rather than Bootstrap's heading utilities.
   All heading tags retain app.css's shared weight, line height and default margins. */
.profile-card-heading[b-o17d6zuao7] {
    font-size: 1.125rem;
}

.profile-detail-heading[b-o17d6zuao7] {
    font-size: 1rem;
}

/* These states previously used h3, including its smaller phone size. */
.profile-state-heading[b-o17d6zuao7] {
    font-size: 1.4rem;
}

.profile-edit-page[b-o17d6zuao7] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
    color: var(--text, #ffffff);
}

.profile-form .form-label[b-o17d6zuao7] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text, #ffffff);
}

.profile-form .form-control[b-o17d6zuao7],
.profile-form .form-select[b-o17d6zuao7] {
    border-radius: 0.375rem;
    border: 1px solid rgba(255,255,255,0.16);
    background: #0c1326;
    color: var(--text, #ffffff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.profile-form .form-control:focus[b-o17d6zuao7],
.profile-form .form-select:focus[b-o17d6zuao7] {
    border-color: var(--brand1, #ff7f50);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 80, 0.25);
    background: #0c1326;
    color: var(--text, #ffffff);
}

.form-text[b-o17d6zuao7] {
    font-size: 0.875rem;
    color: var(--muted, #9fb0d0);
    margin-top: 0.25rem;
}

.validation-summary[b-o17d6zuao7] {
    margin-top: 1rem;
}

.validation-summary ul[b-o17d6zuao7] {
    margin: 0;
    padding-left: 1.5rem;
}

.alert[b-o17d6zuao7] {
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.alert-success[b-o17d6zuao7] {
    background-color: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.alert-danger[b-o17d6zuao7] {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

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

/* ========================================
   MUSIC TERMS (#469)
   ======================================== */
/* Each choice is a whole clickable box holding its radio, its name and its example words. */
.music-terms-option[b-o17d6zuao7] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.375rem;
    background-color: rgba(255,255,255,0.02);
    color: var(--muted, #9fb0d0);
    cursor: pointer;
    transition: all 0.2s ease;
}

.music-terms-option:hover[b-o17d6zuao7] {
    background-color: rgba(255,255,255,0.05);
}

.music-terms-option.active[b-o17d6zuao7] {
    border-color: var(--brand1, #ff7f50);
    background-color: rgba(255, 127, 80, 0.1);
    color: var(--text, #ffffff);
}

/* The .form-check-input rules further down turn every input on this page into a square with a
   tick. These keep the radios round, with a dot, and let the flex gap do the spacing. */
.music-terms-option .form-check-input[b-o17d6zuao7] {
    flex-shrink: 0;
    margin: 0.15em 0 0;
    border-radius: 50%;
}

.music-terms-option .form-check-input:checked[b-o17d6zuao7] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.music-terms-name[b-o17d6zuao7] {
    display: block;
    font-weight: 600;
    color: var(--text, #ffffff);
}

.music-terms-examples[b-o17d6zuao7] {
    display: block;
    font-size: 0.875rem;
}

/* ========================================
   MODAL FIXES - FIX ISSUES #2 & #4
   ======================================== */
/* Ensure modal backdrop blocks scrolling and interaction */
.modal.show[b-o17d6zuao7] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent background scrolling */
}

.modal-dialog[b-o17d6zuao7] {
    margin: 1rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1051;
}

.modal-content[b-o17d6zuao7] {
    background: var(--card, #11182a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--text, #ffffff);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header[b-o17d6zuao7] {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--text, #ffffff);
}

.modal-title[b-o17d6zuao7] {
    color: var(--text, #ffffff);
}

.modal-body[b-o17d6zuao7] {
    background: var(--card, #11182a);
    color: var(--text, #ffffff);
}

.modal-footer[b-o17d6zuao7] {
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Form controls in modals */
.modal .form-control[b-o17d6zuao7],
.modal .form-select[b-o17d6zuao7] {
    background: #0c1326;
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--text, #ffffff);
}

.modal .form-control:focus[b-o17d6zuao7],
.modal .form-select:focus[b-o17d6zuao7] {
    background: #0c1326;
    border-color: var(--brand1, #ff7f50);
    color: var(--text, #ffffff);
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 80, 0.25);
}

.modal .form-label[b-o17d6zuao7] {
    color: var(--text, #ffffff);
}

/* ========================================
   CHECKBOX VISIBILITY - FIX ISSUE #2 & #4
   ======================================== */
.form-check-input[b-o17d6zuao7] {
    background-color: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    width: 1.2em;
    height: 1.2em;
    transition: all 0.2s ease;
}

.form-check-input:checked[b-o17d6zuao7] {
    background-color: var(--brand1, #ff7f50);
    border-color: var(--brand1, #ff7f50);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus[b-o17d6zuao7] {
    border-color: var(--brand1, #ff7f50);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 127, 80, 0.25);
}

.form-check-input:not(:checked)[b-o17d6zuao7] {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
}

/* A switch is not a square checkbox. The rules above style every .form-check-input as a 1.2em
   square with a tick, and CSS isolation outranks Bootstrap, so the notation toggle — which is
   role="switch" inside .form-switch — lost its pill geometry and its knob. Bootstrap still applied
   .form-switch's margin-left: -2.5em to it, so the 1.2em square hung outside its label as a sliver.
   These restore the switch geometry without touching the checkbox styling the rest of the page
   relies on. */
.form-switch .form-check-input[b-o17d6zuao7] {
    width: 2em;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.5%29'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

    .form-switch .form-check-input:checked[b-o17d6zuao7] {
        background-position: right center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

.form-check-label[b-o17d6zuao7] {
    color: var(--text, #ffffff);
    margin-left: 0.5rem;
}

/* Make "Set as default" checkbox more prominent */
.form-check[b-o17d6zuao7] {
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Bootstrap positions a check input with a negative margin-left — -2.5em on a switch, -1.5em on a
   plain checkbox — into the matching padding-left gutter on .form-check. Two rules in this file
   reset that padding — the .form-check shorthand above, and the email preferences block below,
   which zeroes it — so the negative margin has nothing to sit in and drags the input out of its
   container: the switches onto the wrapped description text on the email rows, and the "Skip
   listening questions" and "Set as default" checkboxes 15px left of their bordered box (#643).

   Neutralising the margin rather than restoring the padding fixes all of them, and keeps working
   wherever else .form-check padding is customised, which is what the padding-based version did
   not. The music-terms radios are not inside a .form-check and keep their own card layout. */
.form-check .form-check-input[b-o17d6zuao7] {
    margin-left: 0;
}

.form-check:hover[b-o17d6zuao7] {
    background: rgba(255,255,255,0.05);
}

/* ========================================
   EMAIL PREFERENCES - FIX ISSUE #5
   ======================================== */
.email-preferences-list[b-o17d6zuao7] {
    background: transparent;
    border: none;
    padding: 0;
}

.email-preference-item[b-o17d6zuao7] {
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.08); /* Remove white border, use subtle dark border */
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    background: rgba(255,255,255,0.02);
    transition: all 0.2s ease;
}

.email-preference-item:hover[b-o17d6zuao7] {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.16);
}

.email-preference-item:last-child[b-o17d6zuao7] {
    margin-bottom: 0;
}

.email-preference-content[b-o17d6zuao7] {
    flex: 1;
    margin-right: 1rem;
}

.email-preference-content h3[b-o17d6zuao7] {
    color: var(--text, #ffffff);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.email-preference-content p[b-o17d6zuao7] {
    color: var(--muted, #9fb0d0);
    margin: 0;
}

.email-preference-toggle[b-o17d6zuao7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-height: 60px;
}

.email-preference-toggle .form-check[b-o17d6zuao7] {
    margin-bottom: 0;
    background: transparent;
    border: none;
    padding: 0;
}

.email-preference-toggle .form-check-label[b-o17d6zuao7] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
}

/* Form select in email preferences */
.email-preference-content .form-select[b-o17d6zuao7] {
    background: #0c1326;
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--text, #ffffff);
    width: auto;
    display: inline-block;
    margin-top: 0.5rem;
}

/* ========================================
   BETTER SUCCESS/ERROR MESSAGING
   ======================================== */
.alert[b-o17d6zuao7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert i[b-o17d6zuao7] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.alert-success[b-o17d6zuao7] {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #86efac;
}

.alert-danger[b-o17d6zuao7] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert-warning[b-o17d6zuao7] {
    background: rgba(250, 204, 21, 0.15);
    border: 1px solid rgba(250, 204, 21, 0.4);
    color: #fde047;
}

.alert-info[b-o17d6zuao7] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* ========================================
   INSTRUMENT CARDS IMPROVEMENTS
   ======================================== */
.card[b-o17d6zuao7] {
    background: var(--card, #11182a);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text, #ffffff);
}

.card.border-primary[b-o17d6zuao7] {
    border-color: var(--brand1, #ff7f50) !important;
    box-shadow: 0 0 0 1px rgba(255, 127, 80, 0.2);
}

.card-title[b-o17d6zuao7] {
    color: var(--text, #ffffff);
}

.badge.bg-primary[b-o17d6zuao7] {
    background: linear-gradient(135deg, var(--brand1, #ff7f50), var(--brand2, #ff4d4d)) !important;
    color: white;
    border: none;
}

.dropdown-menu[b-o17d6zuao7] {
    background: var(--card, #11182a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dropdown-item[b-o17d6zuao7] {
    color: var(--text, #ffffff);
    transition: all 0.2s ease;
}

.dropdown-item:hover[b-o17d6zuao7] {
    background: rgba(255,255,255,0.1);
    color: var(--text, #ffffff);
}

.dropdown-item.text-danger[b-o17d6zuao7] {
    color: #fca5a5 !important;
}

.dropdown-item.text-danger:hover[b-o17d6zuao7] {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5 !important;
}

/* ========================================
   RESPONSIVE IMPROVEMENTS
   ======================================== */
@media (max-width: 767.98px) {
    .profile-state-heading[b-o17d6zuao7] {
        font-size: 1.25rem;
    }

    .profile-edit-page[b-o17d6zuao7] {
        padding: 1rem 0.5rem;
        margin: 1rem auto;
    }

    .modal-dialog[b-o17d6zuao7] {
        margin: 0.5rem;
        width: calc(100% - 1rem);
        max-height: 95vh;
    }

    .email-preference-item[b-o17d6zuao7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem 0.75rem;
    }

    .email-preference-content[b-o17d6zuao7] {
        margin-right: 0;
        width: 100%;
    }

    .email-preference-toggle[b-o17d6zuao7] {
        align-items: flex-start;
        min-height: auto;
        width: 100%;
    }

    .form-check[b-o17d6zuao7] {
        padding: 0.75rem;
    }
}

/* ========================================
   BUTTON IMPROVEMENTS
   ======================================== */
.btn-close[b-o17d6zuao7] {
    background: transparent;
    border: none;
    color: var(--muted, #9fb0d0);
    opacity: 0.8;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.btn-close:hover[b-o17d6zuao7] {
    background: rgba(255,255,255,0.1);
    color: var(--text, #ffffff);
    opacity: 1;
}

.btn-primary[b-o17d6zuao7] {
    background: linear-gradient(135deg, var(--brand1, #ff7f50), var(--brand2, #ff4d4d));
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled)[b-o17d6zuao7] {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(255, 127, 80, 0.4);
    filter: brightness(1.1);
    color: white;
}

.btn-secondary[b-o17d6zuao7] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--text, #ffffff);
}

.btn-secondary:hover:not(:disabled)[b-o17d6zuao7] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.3);
    color: var(--text, #ffffff);
}

.btn-outline-secondary[b-o17d6zuao7] {
    border-color: rgba(255,255,255,0.16);
    color: var(--muted, #9fb0d0);
    background: transparent;
}

.btn-outline-secondary:hover[b-o17d6zuao7] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
    color: var(--text, #ffffff);
}

/* Disabled state improvements */
.btn:disabled[b-o17d6zuao7] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* AuthLayout owns no HTML elements. Its banner, error boundary and body own their styles. */
/* /Components/Layout/LiveQuizLayout.razor.rz.scp.css */
.livequiz-layout[b-6od2yladlx] {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b0f1a 0%, #11182a 50%, #0b0f1a 100%);
    color: #ffffff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Public Layout Styles */

.public-page[b-pcy8mw8b69] {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* The wrapper exists only signed in. No new class or spacing on signed-out public pages. */
.public-members-tabs[b-pcy8mw8b69] {
    display: contents;
}

@media (max-width: 767.98px) {
    .public-page:has(> .public-members-tabs)[b-pcy8mw8b69] {
        --shell-inset-bottom: calc(var(--members-tabbar-height) + var(--safe-bottom));
        /* Keep the footer's last controls above the fixed bar too. */
        padding-bottom: var(--shell-inset-bottom);
    }

    .public-page:has(> .public-members-tabs) .public-content[b-pcy8mw8b69] {
        padding-bottom: var(--shell-inset-bottom);
    }

    .public-page:has(> .public-members-tabs) .mobile-nav-link[b-pcy8mw8b69] {
        display: block;
        min-height: var(--touch-target-min);
    }

    .public-page:has(> .public-members-tabs) .mobile-menu[b-pcy8mw8b69] {
        /* The longer signed-in menu must scroll above the tab bar on short phones. */
        max-height: calc(100dvh - 100% - var(--shell-inset-bottom));
        overflow-y: auto;
    }
}

/* MembersTabBar returns to document flow at this height; reserve only the safe area. */
@media (max-width: 767.98px) and (max-height: 280px) {
    .public-page:has(> .public-members-tabs)[b-pcy8mw8b69] {
        --shell-inset-bottom: var(--safe-bottom);
    }
}

/* Sticky Navigation */
.public-nav[b-pcy8mw8b69] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(11, 15, 26, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}

.public-nav.scrolled[b-pcy8mw8b69] {
    background: rgba(11, 15, 26, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-content[b-pcy8mw8b69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 20px;
}

/* Brand */
.nav-brand[b-pcy8mw8b69] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
}

.brand-logo[b-pcy8mw8b69] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-image: url('/img/music-theory-mastery-logo-only-v2.svg');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
}

.brand-text[b-pcy8mw8b69] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
}

.brand-link[b-pcy8mw8b69] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}

.brand-link:hover[b-pcy8mw8b69] {
    color: var(--brand1);
    text-decoration: none;
}

/* Navigation Links */
.nav-links[b-pcy8mw8b69] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-link[b-pcy8mw8b69] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-link:hover[b-pcy8mw8b69] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

/* Authentication Section */
.nav-auth[b-pcy8mw8b69] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.user-menu[b-pcy8mw8b69] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.user-name[b-pcy8mw8b69] {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Button Styles for Navigation */
.btn-ghost[b-pcy8mw8b69] {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-ghost:hover[b-pcy8mw8b69] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline[b-pcy8mw8b69] {
    background: transparent;
    color: var(--brand1);
    border: 1px solid var(--brand1);
}

.btn-outline:hover[b-pcy8mw8b69] {
    background: var(--brand1);
    color: white;
}

/* Mobile Menu */
.mobile-menu-toggle[b-pcy8mw8b69] {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.hamburger[b-pcy8mw8b69] {
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: var(--transition);
}

.mobile-menu[b-pcy8mw8b69] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(11, 15, 26, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
}

.mobile-menu.show[b-pcy8mw8b69] {
    display: block;
}

.mobile-nav-links[b-pcy8mw8b69] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.mobile-nav-link[b-pcy8mw8b69] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 8px;
    transition: var(--transition);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.mobile-nav-link:hover[b-pcy8mw8b69] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.mobile-auth[b-pcy8mw8b69] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.mobile-user-menu .user-welcome[b-pcy8mw8b69] {
    color: var(--text);
    margin-bottom: 16px;
    font-weight: 500;
}

/* Content */
.public-content[b-pcy8mw8b69] {
    padding-top: 80px; /* Account for fixed header */
    flex: 1;
}

/* Content page styles for Privacy, Terms, etc. */
.public-content .container[b-pcy8mw8b69] {
    color: var(--text);
}

.public-content h1[b-pcy8mw8b69],
.public-content h2[b-pcy8mw8b69],
.public-content h3[b-pcy8mw8b69],
.public-content h4[b-pcy8mw8b69],
.public-content h5[b-pcy8mw8b69],
.public-content h6[b-pcy8mw8b69] {
    color: var(--text);
}

.public-content h1[b-pcy8mw8b69] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.public-content .card[b-pcy8mw8b69] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.public-content .card-body[b-pcy8mw8b69] {
    background: transparent !important;
    color: #ffffff !important;
}

.public-content .card-body *[b-pcy8mw8b69],
.public-content .card-body p[b-pcy8mw8b69],
.public-content .card-body li[b-pcy8mw8b69],
.public-content .card-body span[b-pcy8mw8b69],
.public-content .card-body div[b-pcy8mw8b69] {
    color: #ffffff !important;
}

.public-content .card-body h1[b-pcy8mw8b69],
.public-content .card-body h2[b-pcy8mw8b69],
.public-content .card-body h3[b-pcy8mw8b69],
.public-content .card-body h4[b-pcy8mw8b69],
.public-content .card-body h5[b-pcy8mw8b69],
.public-content .card-body h6[b-pcy8mw8b69] {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.public-content .card-body ul[b-pcy8mw8b69],
.public-content .card-body ol[b-pcy8mw8b69] {
    color: #ffffff !important;
}

.public-content .lead[b-pcy8mw8b69] {
    color: #cccccc !important;
    font-size: 1.1rem !important;
}

/* Modal Styles */
.modal-overlay[b-pcy8mw8b69] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content[b-pcy8mw8b69] {
    background: var(--card);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-pcy8mw8b69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 0;
}

.modal-header h3[b-pcy8mw8b69] {
    margin: 0;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-close[b-pcy8mw8b69] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: var(--transition);
}

.modal-close:hover[b-pcy8mw8b69] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.modal-body[b-pcy8mw8b69] {
    padding: 24px;
}

/* Auth Form Styles */
.auth-form[b-pcy8mw8b69] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row[b-pcy8mw8b69] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group[b-pcy8mw8b69] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-pcy8mw8b69] {
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-check[b-pcy8mw8b69] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0;
}

.form-check-input[b-pcy8mw8b69] {
    margin-top: 2px;
    accent-color: var(--brand1);
}

.form-check-label[b-pcy8mw8b69] {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.auth-footer[b-pcy8mw8b69] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.auth-footer p[b-pcy8mw8b69] {
    color: var(--muted);
    margin: 0 0 12px 0;
    font-size: 0.9rem;
}

.btn-link[b-pcy8mw8b69] {
    background: none;
    border: none;
    color: var(--brand1);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.btn-link:hover[b-pcy8mw8b69] {
    text-decoration: underline;
    color: var(--brand2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links[b-pcy8mw8b69] {
        display: none;
    }

    .nav-auth[b-pcy8mw8b69] {
        display: none;
    }

    .mobile-menu-toggle[b-pcy8mw8b69] {
        display: flex;
    }

    .public-content[b-pcy8mw8b69] {
        padding-top: 60px;
    }

    .public-content .card[b-pcy8mw8b69] {
        margin: 0 -15px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .form-row[b-pcy8mw8b69] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .modal-content[b-pcy8mw8b69] {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .modal-header[b-pcy8mw8b69],
    .modal-body[b-pcy8mw8b69] {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .nav-content[b-pcy8mw8b69] {
        padding: 8px 0;
    }

    .brand-text[b-pcy8mw8b69] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .public-content[b-pcy8mw8b69] {
        padding-top: 56px;
    }

    .public-content .container[b-pcy8mw8b69] {
        padding: 0 15px;
    }

    .public-content .card[b-pcy8mw8b69] {
        border-radius: 8px;
        margin: 0;
    }
}

/* Utility Classes */
.w-100[b-pcy8mw8b69] {
    width: 100% !important;
}

.mb-2[b-pcy8mw8b69] {
    margin-bottom: 0.5rem !important;
}

.fineprint[b-pcy8mw8b69]{
    font-size:.84rem;color:var(--muted)
}


/* Footer Styles */
.public-footer[b-pcy8mw8b69] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    margin-top: 60px;
    padding: 48px 0 24px;
    color: var(--muted);
}

.footer-content[b-pcy8mw8b69] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    margin-bottom: 32px;
}

.footer-brand[b-pcy8mw8b69] {
    max-width: 400px;
}

.footer-logo[b-pcy8mw8b69] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-description[b-pcy8mw8b69] {
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.footer-links[b-pcy8mw8b69] {
    display: flex;
    gap: 48px;
}

.footer-section h2[b-pcy8mw8b69] {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.footer-section ul[b-pcy8mw8b69] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li[b-pcy8mw8b69] {
    margin: 0 0 8px 0;
}

.footer-section a[b-pcy8mw8b69] {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-section a:hover[b-pcy8mw8b69] {
    color: var(--brand1);
    text-decoration: none;
}

.footer-link-btn[b-pcy8mw8b69] {
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
    text-align: left;
    font-family: inherit;
}

.footer-link-btn:hover[b-pcy8mw8b69] {
    color: var(--brand1);
}

.footer-bottom[b-pcy8mw8b69] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright[b-pcy8mw8b69] {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.back-to-top[b-pcy8mw8b69] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--muted);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.back-to-top:hover[b-pcy8mw8b69] {
    border-color: var(--brand1);
    color: var(--brand1);
    background: rgba(255, 127, 80, 0.1);
}

/* Footer Responsive Design */
@media (max-width: 768px) {
    .footer-content[b-pcy8mw8b69] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-links[b-pcy8mw8b69] {
        gap: 32px;
    }

    .footer-bottom[b-pcy8mw8b69] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .public-footer[b-pcy8mw8b69] {
        padding: 32px 0 24px;
        margin-top: 40px;
        text-align: center;
    }

    .footer-links[b-pcy8mw8b69] {
        gap: 24px;
        text-align: center;
        align-items: center;
    }

    .footer-section h2[b-pcy8mw8b69] {
        margin-bottom: 12px;
    }
}

@media (max-width: 320px) {
    .footer-links[b-pcy8mw8b69] {
        flex-direction: column;
        gap: 16px;
    }
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.error-page-container[b-gauyjvh78m] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
}

.error-content[b-gauyjvh78m] {
    color: var(--text);
}

.error-icon[b-gauyjvh78m] {
    position: relative;
    margin-bottom: 2rem;
}

.error-icon .bi[b-gauyjvh78m] {
    font-size: 4rem;
    color: var(--warning-color);
    display: block;
    margin-bottom: 1rem;
}

.error-code[b-gauyjvh78m] {
    font-size: 6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--warning-color), var(--brand1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}

.error-message h1[b-gauyjvh78m] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}

.error-description[b-gauyjvh78m] {
    font-size: 1.2rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions[b-gauyjvh78m] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.error-actions .btn[b-gauyjvh78m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
}

.access-info[b-gauyjvh78m] {
    margin-bottom: 3rem;
}

.auth-status[b-gauyjvh78m] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    max-width: 450px;
    margin: 0 auto;
}

.auth-status.authenticated[b-gauyjvh78m] {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
}

.auth-status.not-authenticated[b-gauyjvh78m] {
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.3);
}

.status-icon[b-gauyjvh78m] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.auth-status.authenticated .status-icon .bi[b-gauyjvh78m] {
    color: var(--success-color);
    font-size: 1.25rem;
}

.auth-status.not-authenticated .status-icon .bi[b-gauyjvh78m] {
    color: var(--warning-color);
    font-size: 1.25rem;
}

.status-details[b-gauyjvh78m] {
    flex: 1;
}

.status-title[b-gauyjvh78m] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 1rem;
}

.status-text[b-gauyjvh78m] {
    color: var(--muted);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.status-help[b-gauyjvh78m] {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.error-help[b-gauyjvh78m] {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.error-help .eyebrow[b-gauyjvh78m] {
    margin-bottom: 0.75rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.help-links[b-gauyjvh78m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.help-links a[b-gauyjvh78m] {
    color: var(--brand1);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.help-links a:hover[b-gauyjvh78m] {
    color: var(--brand2);
    text-decoration: underline;
}

.separator[b-gauyjvh78m] {
    color: var(--muted);
    opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .error-code[b-gauyjvh78m] {
        font-size: 4rem;
    }

    .error-message h1[b-gauyjvh78m] {
        font-size: 2rem;
    }

    .error-description[b-gauyjvh78m] {
        font-size: 1.1rem;
    }

    .error-actions[b-gauyjvh78m] {
        flex-direction: column;
        align-items: center;
    }

    .error-actions .btn[b-gauyjvh78m] {
        width: 100%;
        max-width: 280px;
    }

    .auth-status[b-gauyjvh78m] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .help-links[b-gauyjvh78m] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .separator[b-gauyjvh78m] {
        display: none;
    }
}

/* Subtle animation */
@keyframes fadeInUp-b-gauyjvh78m {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-content > *[b-gauyjvh78m] {
    animation: fadeInUp-b-gauyjvh78m 0.6s ease-out;
}

.error-icon[b-gauyjvh78m] {
    animation-delay: 0.1s;
}

.error-message[b-gauyjvh78m] {
    animation-delay: 0.2s;
}

.error-actions[b-gauyjvh78m] {
    animation-delay: 0.3s;
}

.access-info[b-gauyjvh78m] {
    animation-delay: 0.4s;
}

.error-help[b-gauyjvh78m] {
    animation-delay: 0.5s;
}
/* /Components/Pages/CodeEntry.razor.rz.scp.css */
.code-entry-container[b-n3d2v4854b] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b0f1a 0%, #1a1a2e 100%);
    padding: 20px;
}

.code-entry-card[b-n3d2v4854b] {
    background: #11182a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.code-entry-header[b-n3d2v4854b] {
    margin-bottom: 32px;
}

.brand-logo[b-n3d2v4854b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff7f50, #ff4d4d);
    border-radius: 16px;
    margin-bottom: 24px;
    font-weight: 900;
    font-size: 24px;
    color: white;
}

.code-entry-header h1[b-n3d2v4854b] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.subtitle[b-n3d2v4854b] {
    color: #9fb0d0;
    font-size: 1rem;
    margin: 0;
    line-height: 1.4;
}

.success-message[b-n3d2v4854b] {
    background: rgba(72, 187, 120, 0.1);
    border: 1px solid rgba(72, 187, 120, 0.3);
    color: #81c784;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    text-align: left;
}

.error-message[b-n3d2v4854b] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    text-align: left;
}

.code-entry-content[b-n3d2v4854b] {
    margin-bottom: 32px;
}

.code-form[b-n3d2v4854b] {
    text-align: left;
}

.form-group[b-n3d2v4854b] {
    margin-bottom: 24px;
}

.form-label[b-n3d2v4854b] {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.code-input[b-n3d2v4854b],
[b-n3d2v4854b] .code-input,
input.code-input[b-n3d2v4854b] {
    width: 200px !important; /* Reduced width - perfect for 8 characters at this font size */
    max-width: 200px !important;
    min-width: 200px !important;
    padding: 16px 12px !important; /* Reduced horizontal padding to make width more accurate */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 1.75rem !important; /* Increased font size for better visibility */
    font-family: 'Courier New', Consolas, monospace !important;
    font-weight: 600 !important; /* Make text bolder */
    letter-spacing: 0.15rem !important; /* Optimized spacing for readability */
    text-align: center !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    margin: 0 auto !important; /* Center the input */
    display: block !important;
    box-sizing: border-box !important;
}

.code-input:focus[b-n3d2v4854b],
[b-n3d2v4854b] .code-input:focus,
input.code-input:focus[b-n3d2v4854b] {
    outline: none !important;
    border-color: #ff7f50 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.1) !important;
}

.code-input[b-n3d2v4854b]::placeholder,
[b-n3d2v4854b] .code-input::placeholder,
input.code-input[b-n3d2v4854b]::placeholder {
    color: #6b7280 !important;
    font-size: 1rem !important; /* Smaller placeholder text */
    letter-spacing: normal !important;
    text-transform: none !important;
}

.code-input:disabled[b-n3d2v4854b],
[b-n3d2v4854b] .code-input:disabled,
input.code-input:disabled[b-n3d2v4854b] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.form-help[b-n3d2v4854b] {
    color: #9fb0d0;
    font-size: 0.875rem;
    margin-top: 8px;
    text-align: center;
}

.validation-errors[b-n3d2v4854b] {
    color: #fca5a5;
    font-size: 0.875rem;
    margin-top: 8px;
}

.validation-errors ul[b-n3d2v4854b] {
    margin: 0;
    padding-left: 16px;
}

.submit-btn[b-n3d2v4854b] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #ff7f50, #ff4d4d);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.submit-btn:hover:not(:disabled)[b-n3d2v4854b] {
    background: linear-gradient(135deg, #ff6b35, #ff3333);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 127, 80, 0.3);
}

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

.submit-btn:disabled:hover[b-n3d2v4854b] {
    background: linear-gradient(135deg, #ff7f50, #ff4d4d);
    transform: none;
    box-shadow: none;
}

.spinner[b-n3d2v4854b] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-n3d2v4854b 1s linear infinite;
}

@keyframes spin-b-n3d2v4854b {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.code-entry-footer[b-n3d2v4854b] {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.code-entry-footer p[b-n3d2v4854b] {
    color: #9fb0d0;
    font-size: 0.875rem;
    margin: 0 0 16px 0;
}

.code-entry-footer a[b-n3d2v4854b] {
    color: #ff7f50;
    text-decoration: none;
}

.code-entry-footer a:hover[b-n3d2v4854b] {
    text-decoration: underline;
}

.back-link[b-n3d2v4854b] {
    display: inline-block;
    color: #9fb0d0;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-link:hover[b-n3d2v4854b] {
    color: #fff;
}

@media (max-width: 640px) {
    .code-entry-card[b-n3d2v4854b] {
        padding: 32px 24px;
        margin: 20px;
    }

    .code-entry-header h1[b-n3d2v4854b] {
        font-size: 1.5rem;
    }

    .code-input[b-n3d2v4854b],
    [b-n3d2v4854b] .code-input,
    input.code-input[b-n3d2v4854b] {
        font-size: 1.4rem !important; /* Slightly smaller on mobile but still prominent */
        font-weight: 600 !important;
        padding: 14px 10px !important;
        width: 160px !important; /* Smaller width for mobile */
        max-width: 160px !important;
        min-width: 160px !important;
        letter-spacing: 0.12rem !important;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-page[b-7sa687ycmw] {
    padding: 50px 0 80px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0b0f1a 0%, #1a1f2e 100%);
    color: white;
}

.contact-header[b-7sa687ycmw] {
    text-align: center;
    margin-bottom: 60px;
}

.contact-subtitle[b-7sa687ycmw] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.contact-form-card[b-7sa687ycmw] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.form-group[b-7sa687ycmw] {
    margin-bottom: 24px;
}

.form-label[b-7sa687ycmw] {
    color: white;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-7sa687ycmw] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    transition: all 0.3s ease;
    min-height: 50px; /* Ensure minimum height for all form controls */
}

/* Specific styling for textarea to ensure proper height */
.form-control[rows][b-7sa687ycmw] {
    min-height: 150px; /* Approximate height for 6 rows */
    resize: vertical;
    line-height: 1.5;
}

/* Custom scrollbar styling for webkit browsers */
.form-control[b-7sa687ycmw]::-webkit-scrollbar {
    width: 8px;
}

.form-control[b-7sa687ycmw]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.form-control[b-7sa687ycmw]::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.6);
    border-radius: 6px;
}

.form-control[b-7sa687ycmw]::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.8);
}

/* Firefox scrollbar styling */
.form-control[b-7sa687ycmw] {
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.6) rgba(255, 255, 255, 0.1);
}

.form-control:focus[b-7sa687ycmw] {
    background: rgba(255, 255, 255, 0.15);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    color: white;
}

.form-control[b-7sa687ycmw]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-control:disabled[b-7sa687ycmw] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.authenticated-notice[b-7sa687ycmw] {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: #28a745;
    font-size: 14px;
}

.recaptcha-notice[b-7sa687ycmw] {
    text-align: center;
    margin-top: 16px;
}

.recaptcha-notice a[b-7sa687ycmw] {
    color: #667eea;
    text-decoration: none;
}

.recaptcha-notice a:hover[b-7sa687ycmw] {
    text-decoration: underline;
}

.auth-notice[b-7sa687ycmw] {
    text-align: center;
    margin-top: 16px;
}

.contact-info[b-7sa687ycmw] {
    margin-top: 60px;
}

.contact-info-item[b-7sa687ycmw] {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.contact-info-item:hover[b-7sa687ycmw] {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.contact-info-item i[b-7sa687ycmw] {
    font-size: 2.5rem;
    color: #667eea;
    margin-bottom: 16px;
    display: block;
}

.contact-info-item h3[b-7sa687ycmw] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.contact-info-item p[b-7sa687ycmw] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

.form-text[b-7sa687ycmw] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .contact-page[b-7sa687ycmw] {
        padding: 80px 0 60px;
    }

    .contact-header h1[b-7sa687ycmw] {
        font-size: 2.5rem;
    }

    .contact-form-card[b-7sa687ycmw] {
        padding: 30px 20px;
    }

    .contact-info-item[b-7sa687ycmw] {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .contact-page[b-7sa687ycmw] {
        padding: 60px 0 40px;
    }

    .contact-header[b-7sa687ycmw] {
        margin-bottom: 40px;
    }

    .contact-header h1[b-7sa687ycmw] {
        font-size: 2rem;
    }

    .contact-subtitle[b-7sa687ycmw] {
        font-size: 1.1rem;
    }

    .contact-form-card[b-7sa687ycmw] {
        padding: 24px 16px;
        margin-bottom: 40px;
    }
}
/* /Components/Pages/CookiePreferences.razor.rz.scp.css */
.preferences-header h1[b-ohza58y1sj] {
    color: var(--text, #ffffff);
    margin-bottom: 1rem;
}

.preferences-card[b-ohza58y1sj] {
    background: var(--card, #11182a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    color: var(--text, #ffffff);
}

.current-consent-summary[b-ohza58y1sj] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.current-consent-summary h5[b-ohza58y1sj] {
    color: var(--text, #ffffff);
    margin-bottom: 0.5rem;
}

.category-card[b-ohza58y1sj] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
}

.category-card.enabled[b-ohza58y1sj] {
    border-color: var(--brand1, #ff7f50);
    background: rgba(255, 127, 80, 0.05);
}

.category-card.essential[b-ohza58y1sj] {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.category-header[b-ohza58y1sj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.category-toggle[b-ohza58y1sj] {
    flex: 1;
}

.category-toggle input[type="checkbox"][b-ohza58y1sj] {
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    transform: scale(1.2);
    accent-color: var(--brand1, #ff7f50);
}

.category-toggle input[type="checkbox"]:disabled[b-ohza58y1sj] {
    accent-color: #28a745;
}

.category-toggle label[b-ohza58y1sj] {
    color: var(--text, #ffffff);
    cursor: pointer;
    font-size: 1.1rem;
}

.category-icon[b-ohza58y1sj] {
    font-size: 1.5rem;
    color: var(--brand1, #ff7f50);
    opacity: 0.7;
}

.category-card.essential .category-icon[b-ohza58y1sj] {
    color: #28a745;
}

.category-description[b-ohza58y1sj] {
    color: var(--muted, #9fb0d0);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.category-details[b-ohza58y1sj] {
    margin-top: 1rem;
}

.category-details summary[b-ohza58y1sj] {
    color: var(--brand1, #ff7f50);
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.category-details ul[b-ohza58y1sj] {
    color: var(--muted, #9fb0d0);
    font-size: 0.9rem;
    margin-left: 1rem;
}

.category-details li[b-ohza58y1sj] {
    margin-bottom: 0.25rem;
}

.preferences-actions[b-ohza58y1sj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Each blanket choice posts its own form, so the forms are the flex children here. */
.preferences-actions form[b-ohza58y1sj] {
    margin: 0;
}

.preferences-footer[b-ohza58y1sj] {
    text-align: center;
}

.footer-links a[b-ohza58y1sj] {
    color: var(--brand1, #ff7f50);
    font-size: 0.9rem;
}

.footer-links a:hover[b-ohza58y1sj] {
    color: var(--brand2, #ff4d4d);
}

.badge[b-ohza58y1sj] {
    font-size: 0.7rem;
}

@media (max-width: 768px) {
    .preferences-card[b-ohza58y1sj] {
        padding: 1.5rem;
    }

    .preferences-actions[b-ohza58y1sj] {
        flex-direction: column;
    }

    .preferences-actions form[b-ohza58y1sj],
    .preferences-actions .btn[b-ohza58y1sj] {
        width: 100%;
    }

    .category-header[b-ohza58y1sj] {
        flex-direction: column;
        gap: 1rem;
    }

    .category-icon[b-ohza58y1sj] {
        align-self: flex-start;
    }
}
/* /Components/Pages/NotFoundPage.razor.rz.scp.css */
/* 404 Page Styling */
.error-page-container[b-uhc9f3j36k] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    background: var(--dark-bg, #0b0f1a);
}

.error-content[b-uhc9f3j36k] {
    color: var(--text, #ffffff);
}

.error-icon[b-uhc9f3j36k] {
    position: relative;
    margin-bottom: 2rem;
}

.error-icon .bi[b-uhc9f3j36k] {
    font-size: 4rem;
    color: var(--muted, #6c757d);
    display: block;
    margin-bottom: 1rem;
}

.error-code[b-uhc9f3j36k] {
    font-size: 6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand1, #6366f1), var(--brand2, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}

.error-message h1[b-uhc9f3j36k] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text, #ffffff);
}

.error-description[b-uhc9f3j36k] {
    font-size: 1.2rem;
    color: var(--muted, #6c757d);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions[b-uhc9f3j36k] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.error-actions .btn[b-uhc9f3j36k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--border-radius, 0.375rem);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
}

.error-help[b-uhc9f3j36k] {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.error-help .eyebrow[b-uhc9f3j36k] {
    margin-bottom: 0.75rem;
    color: var(--muted, #6c757d);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.help-links[b-uhc9f3j36k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.help-links a[b-uhc9f3j36k] {
    color: var(--brand1, #6366f1);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition, all 0.2s ease);
}

.help-links a:hover[b-uhc9f3j36k] {
    color: var(--brand2, #8b5cf6);
    text-decoration: underline;
}

.separator[b-uhc9f3j36k] {
    color: var(--muted, #6c757d);
    opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .error-code[b-uhc9f3j36k] {
        font-size: 4rem;
    }

    .error-message h1[b-uhc9f3j36k] {
        font-size: 2rem;
    }

    .error-description[b-uhc9f3j36k] {
        font-size: 1.1rem;
    }

    .error-actions[b-uhc9f3j36k] {
        flex-direction: column;
        align-items: center;
    }

    .error-actions .btn[b-uhc9f3j36k] {
        width: 100%;
        max-width: 280px;
    }

    .help-links[b-uhc9f3j36k] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .separator[b-uhc9f3j36k] {
        display: none;
    }
}

/* Subtle animation */
@keyframes fadeInUp-b-uhc9f3j36k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-content > *[b-uhc9f3j36k] {
    animation: fadeInUp-b-uhc9f3j36k 0.6s ease-out;
}

.error-icon[b-uhc9f3j36k] {
    animation-delay: 0.1s;
}

.error-message[b-uhc9f3j36k] {
    animation-delay: 0.2s;
}

.error-actions[b-uhc9f3j36k] {
    animation-delay: 0.3s;
}

.error-help[b-uhc9f3j36k] {
    animation-delay: 0.4s;
}
/* /Components/Pages/Wait.razor.rz.scp.css */
.wait-container[b-o7ku7shryw] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b0f1a 0%, #1a1a2e 100%);
    padding: 20px;
}

.wait-card[b-o7ku7shryw] {
    background: #11182a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.wait-header[b-o7ku7shryw] {
    margin-bottom: 32px;
}

.brand-logo[b-o7ku7shryw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff7f50, #ff4d4d);
    border-radius: 16px;
    margin-bottom: 24px;
    font-weight: 900;
    font-size: 24px;
    color: white;
}

.wait-header h1[b-o7ku7shryw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.subtitle[b-o7ku7shryw] {
    color: #9fb0d0;
    font-size: 1rem;
    margin: 0;
}

.wait-content[b-o7ku7shryw] {
    margin-bottom: 32px;
}

.status-section[b-o7ku7shryw] {
    margin-bottom: 40px;
    padding: 24px;
    background: rgba(72, 187, 120, 0.1);
    border: 1px solid rgba(72, 187, 120, 0.3);
    border-radius: 16px;
}

.status-icon[b-o7ku7shryw] {
    font-size: 3rem;
    color: #48bb78;
    margin-bottom: 16px;
}

.status-section h3[b-o7ku7shryw] {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.status-description[b-o7ku7shryw] {
    color: #9fb0d0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.timeline-section[b-o7ku7shryw] {
    margin-bottom: 40px;
    text-align: left;
}

.timeline-item[b-o7ku7shryw] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.timeline-item:not(:last-child)[b-o7ku7shryw]::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -24px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.timeline-item.completed[b-o7ku7shryw]::after {
    background: #48bb78;
}

.timeline-icon[b-o7ku7shryw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.timeline-item.completed .timeline-icon[b-o7ku7shryw] {
    background: #48bb78;
    color: white;
}

.timeline-item.pending .timeline-icon[b-o7ku7shryw] {
    background: rgba(255, 255, 255, 0.1);
    color: #9fb0d0;
}

.timeline-content h4[b-o7ku7shryw] {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.timeline-content p[b-o7ku7shryw] {
    color: #9fb0d0;
    font-size: 0.875rem;
    margin: 0;
}

.info-section[b-o7ku7shryw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.info-card[b-o7ku7shryw] {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
}

.info-icon[b-o7ku7shryw] {
    font-size: 2rem;
    color: #ff7f50;
    margin-bottom: 12px;
}

.info-card h4[b-o7ku7shryw] {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.info-card p[b-o7ku7shryw] {
    color: #9fb0d0;
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

.wait-footer[b-o7ku7shryw] {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.next-steps[b-o7ku7shryw] {
    margin-bottom: 24px;
}

.next-steps h4[b-o7ku7shryw] {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.action-buttons[b-o7ku7shryw] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-o7ku7shryw] {
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-outline[b-o7ku7shryw] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #9fb0d0;
}

.btn-outline:hover[b-o7ku7shryw] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}

.contact-info p[b-o7ku7shryw] {
    color: #9fb0d0;
    font-size: 0.875rem;
    margin: 0;
}

.contact-info a[b-o7ku7shryw] {
    color: #ff7f50;
    text-decoration: none;
}

.contact-info a:hover[b-o7ku7shryw] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .wait-card[b-o7ku7shryw] {
        padding: 32px 24px;
        margin: 20px;
    }

    .wait-header h1[b-o7ku7shryw] {
        font-size: 1.5rem;
    }

    .info-section[b-o7ku7shryw] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-o7ku7shryw] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-o7ku7shryw] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/CookieConsent.razor.rz.scp.css */
.cookie-consent-overlay[b-5idgb3qvmb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-5idgb3qvmb 0.3s ease-out;
}

.cookie-consent-banner[b-5idgb3qvmb] {
    background: var(--card, #11182a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    padding: 2rem;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text, #ffffff);
    animation: slideUp-b-5idgb3qvmb 0.3s ease-out;
}

.cookie-consent-header h3[b-5idgb3qvmb] {
    color: var(--text, #ffffff);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.consent-description[b-5idgb3qvmb] {
    color: var(--muted, #9fb0d0);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.consent-description a[b-5idgb3qvmb] {
    color: var(--brand1, #ff7f50);
    text-decoration: none;
}

.consent-description a:hover[b-5idgb3qvmb] {
    text-decoration: underline;
}

.consent-learn-more[b-5idgb3qvmb] {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.consent-learn-more a[b-5idgb3qvmb] {
    color: var(--brand1, #ff7f50);
    font-weight: 500;
}

.consent-learn-more a:hover[b-5idgb3qvmb] {
    color: var(--brand2, #ff4d4d);
}

.cookie-consent-actions[b-5idgb3qvmb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem;
}

/* align-items above is load-bearing. Both actions are wrapped in their own <form> to carry an
   antiforgery token, so the row's flex children are FORM, FORM. Under the default stretch the
   forms grow to the row height while the buttons *inside* them keep their own - which is how
   buttons ended up different heights and top-aligned before this rule. See #268. */

/* The granular options are a <details> now that the banner is static-rendered — there is no
   interactive component left to hold a "show advanced" flag. Styled to read as the button it
   replaced. */
.cookie-consent-manage summary[b-5idgb3qvmb] {
    display: inline-block;
    cursor: pointer;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--muted, #9fb0d0);
    font-size: 0.875rem;
    font-weight: 500;
    list-style: none;
}

.cookie-consent-manage summary[b-5idgb3qvmb]::-webkit-details-marker {
    display: none;
}

.cookie-consent-manage summary:hover[b-5idgb3qvmb] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text, #ffffff);
}

.cookie-consent-manage summary:focus-visible[b-5idgb3qvmb] {
    outline: 2px solid var(--brand1, #ff7f50);
    outline-offset: 2px;
}

/* Each action is its own form, so the forms are the flex children and must not add spacing. */
.cookie-consent-actions form[b-5idgb3qvmb] {
    margin: 0;
}

/* Save submits the granular form, so it lives inside the <details> after the categories it acts
   on - visible only once the visitor can see what it saves (#268). */
.cookie-consent-save[b-5idgb3qvmb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.cookie-categories[b-5idgb3qvmb] {
    margin: 1.5rem 0;
}

.category-item[b-5idgb3qvmb] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.category-item:hover[b-5idgb3qvmb] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.category-header[b-5idgb3qvmb] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.category-header input[type="checkbox"][b-5idgb3qvmb] {
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    transform: scale(1.2);
    accent-color: var(--brand1, #ff7f50);
}

.category-header input[type="checkbox"]:disabled[b-5idgb3qvmb] {
    accent-color: #28a745;
}

.category-title[b-5idgb3qvmb] {
    flex: 1;
    margin: 0;
    cursor: pointer;
    color: var(--text, #ffffff);
    font-size: 1rem;
}

.category-description[b-5idgb3qvmb] {
    color: var(--muted, #9fb0d0);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-size: 0.9rem;
}

.category-item small[b-5idgb3qvmb] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

/* Button styling overrides for dark theme */
.cookie-consent-banner .btn[b-5idgb3qvmb] {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.cookie-consent-banner .btn-primary[b-5idgb3qvmb] {
    background: linear-gradient(135deg, var(--brand1, #ff7f50), var(--brand2, #ff4d4d));
    /* Transparent rather than none: the other two actions carry a 1px border, and removing it here
       made this button 2px shorter than them on every page. See #268. */
    border: 1px solid transparent;
    color: white;
}

.cookie-consent-banner .btn-primary:hover[b-5idgb3qvmb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 127, 80, 0.3);
}

.cookie-consent-banner .btn-secondary[b-5idgb3qvmb] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text, #ffffff);
}

.cookie-consent-banner .btn-secondary:hover[b-5idgb3qvmb] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text, #ffffff);
}

.cookie-consent-banner .btn-outline-secondary[b-5idgb3qvmb] {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--muted, #9fb0d0);
    background: transparent;
}

.cookie-consent-banner .btn-outline-secondary:hover[b-5idgb3qvmb] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text, #ffffff);
}

/* Badge styling */
.cookie-consent-banner .badge[b-5idgb3qvmb] {
    font-size: 0.7rem;
    font-weight: 500;
}

/* Animation keyframes */
@keyframes fadeIn-b-5idgb3qvmb {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-5idgb3qvmb {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .cookie-consent-banner[b-5idgb3qvmb] {
        padding: 1.5rem;
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .cookie-consent-header h3[b-5idgb3qvmb] {
        font-size: 1.25rem;
    }

    .cookie-consent-actions[b-5idgb3qvmb] {
        flex-direction: column;
    }

    .cookie-consent-actions form[b-5idgb3qvmb],
    .cookie-consent-actions .btn[b-5idgb3qvmb],
    .cookie-consent-save .btn[b-5idgb3qvmb] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .category-item[b-5idgb3qvmb] {
        padding: 1rem;
    }

    .category-header[b-5idgb3qvmb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-header input[type="checkbox"][b-5idgb3qvmb] {
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .cookie-consent-banner[b-5idgb3qvmb] {
        border: 2px solid #ffffff;
    }
    
    .category-item[b-5idgb3qvmb] {
        border: 1px solid #ffffff;
    }
    
    .consent-description[b-5idgb3qvmb],
    .category-description[b-5idgb3qvmb] {
        color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .cookie-consent-overlay[b-5idgb3qvmb],
    .cookie-consent-banner[b-5idgb3qvmb],
    .category-item[b-5idgb3qvmb],
    .btn[b-5idgb3qvmb] {
        animation: none;
        transition: none;
    }
}
/* /Components/Shared/EmailReminderOptIn.razor.rz.scp.css */
.email-opt-in[b-vnapdd9bo7] { margin-block: 1rem; padding: .75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--card); }
.email-opt-in-lead[b-vnapdd9bo7] { margin-bottom: .5rem; }
.email-opt-in-switch[b-vnapdd9bo7] { margin-bottom: .25rem; }
.email-opt-in-switch .form-check-input[b-vnapdd9bo7] { cursor: pointer; }
.email-opt-in-error[b-vnapdd9bo7] { color: var(--danger-color); font-size: .875rem; margin: .25rem 0 0; }
.email-opt-in-dismiss[b-vnapdd9bo7] { padding-inline: 0; }
.email-opt-in-done[b-vnapdd9bo7] { margin-bottom: 0; color: var(--muted); }

/* #721: an unticked Bootstrap switch is almost invisible on this dark card — the track is
   --bg against --card and the knob is Bootstrap's light-theme 25%-black circle. This takes
   Profile.razor.css's switch geometry and light knob, and adds a brighter border so the
   track edge and the knob each clear 3:1 against --card (WCAG 1.4.11). Scoped to this
   component, so it cannot leak to /profile's switches. */
.form-switch .form-check-input[b-vnapdd9bo7] {
    width: 2em;
    border-radius: 2em;
    border-color: rgba(255,255,255,0.4);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.5%29'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* The on state keeps the brand colour, with the white knob moved to the right end. */
.form-switch .form-check-input:checked[b-vnapdd9bo7] {
    background-color: var(--brand1, #ff7f50);
    border-color: var(--brand1, #ff7f50);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
/* /Components/Shared/LogoutButton.razor.rz.scp.css */
/* The form exists only to carry the POST and its antiforgery token. display:contents keeps it out
   of the layout entirely, so the button sits in the nav's flex/grid flow exactly where the anchor
   used to, and no caller needs restyling. */
.logout-form[b-1883wxx4fq] {
    display: contents;
}

.logout-button[b-1883wxx4fq] {
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition, all 0.3s ease);
}

/* The reset that makes a <button> look like the nav link it replaced, applied only where the
   caller has not asked for a button.

   It used to apply to every .logout-button, which quietly made CssClass a lie for anyone passing
   a Bootstrap button class: `border: none; background: none; color: inherit` beats .btn-primary,
   so the control rendered as bare text no matter what was asked for - AdminAccessNotice's primary
   action looked less prominent than the secondary one beside it.

   :not(.btn) keeps the nav callers exactly as they were - none of them passes a btn class - while
   letting a caller that asks for a button get one. */
.logout-button:not(.btn)[b-1883wxx4fq] {
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.logout-button:hover[b-1883wxx4fq] {
    text-decoration: none;
}

/* Ensure icon alignment is consistent */
.logout-button .bi[b-1883wxx4fq] {
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* When used as a link */
a.logout-button[b-1883wxx4fq] {
    display: inline-flex;
    align-items: center;
}

/* When used as a button */
button.logout-button[b-1883wxx4fq] {
    display: inline-flex;
    align-items: center;
    text-align: left;
}
/* /Components/Shared/SkipLink.razor.rz.scp.css */
/*
    Off-screen until focused, and still in the tab order the whole time.

    position: fixed rather than absolute: both layouts wrap their content in a container that may
    clip overflow, and a skip link that is clipped when focused is worse than none at all - the
    keyboard user gets a focus stop they cannot see.
*/
.skip-link[b-47cz7o5oip] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--brand1, #ff7f50);
    /* Dark on the brand colour, not white. White on #ff7f50 is 2.5:1, which fails WCAG AA for
       normal text (4.5:1) and even the 3:1 floor for large text - an accessibility control that
       cannot be read is not much of one. #11182a on #ff7f50 is 7.07:1. Measured, not guessed. */
    color: #11182a;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: 8px;
    transform: translateY(-200%);
    transition: transform 0.15s ease-in-out;
}

.skip-link:focus[b-47cz7o5oip] {
    transform: translateY(0);
    /* The brand background already carries the focus meaning, but the ring is what a high-contrast
       or forced-colours user gets, so it is not left to colour alone. Dark rather than white for
       the same reason as the text: white on the brand colour is 2.5:1, under the 3:1 a UI
       component needs against what sits next to it. */
    outline: 3px solid #11182a;
    outline-offset: -3px;
}

/* A reduced-motion user still needs it to appear; only the sliding is dropped. */
@media (prefers-reduced-motion: reduce) {
    .skip-link[b-47cz7o5oip] {
        transition: none;
    }
}
/* /Components/Shared/WelcomeBanner.razor.rz.scp.css */
.welcome-banner[b-l85pt9ownd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 0;
    margin-bottom: 0;
}

.welcome-content[b-l85pt9ownd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.welcome-text[b-l85pt9ownd] {
    display: flex;
    flex-direction: column;
}

.welcome-greeting[b-l85pt9ownd] {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.welcome-subtitle[b-l85pt9ownd] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.welcome-actions[b-l85pt9ownd] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.welcome-banner .btn[b-l85pt9ownd] {
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.welcome-banner .btn-primary[b-l85pt9ownd] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.welcome-banner .btn-primary:hover[b-l85pt9ownd] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.welcome-banner .btn-outline[b-l85pt9ownd] {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.welcome-banner .btn-outline:hover[b-l85pt9ownd] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .welcome-content[b-l85pt9ownd] {
        flex-direction: column;
        text-align: center;
    }

    .welcome-actions[b-l85pt9ownd] {
        justify-content: center;
    }
}