/* /App.razor.rz.scp.css */
/* App.razor.css — scoped styles for root App component */

/* ---- Not Found Page ---- */

.not-found-container[b-8kzb7ycsrw] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    min-height: 60vh;
    position: relative;
}

.not-found-card[b-8kzb7ycsrw] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-primary, #a855f7) 25%, transparent);
    border-radius: 16px;
    padding: 2.5rem 2rem 3rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px color-mix(in srgb, var(--m-primary, #5b3cc4) 8%, transparent);
    position: relative;
    overflow: hidden;
    animation: nf-card-enter-b-8kzb7ycsrw 0.6s ease-out both;
}

/* Top accent stripe */
.not-found-card[b-8kzb7ycsrw]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-accent, #f6c453) 30%, var(--m-teal, #4ed7c8) 70%, transparent);
}

@keyframes nf-card-enter-b-8kzb7ycsrw {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Telescope SVG illustration ---- */

.nf-illustration[b-8kzb7ycsrw] {
    width: 200px;
    height: 160px;
    margin: 0 auto 1.25rem;
}

.nf-telescope-svg[b-8kzb7ycsrw] {
    width: 100%;
    height: 100%;
}

.nf-star[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-teal, #4ed7c8) 60%, transparent);
    animation: nf-twinkle-b-8kzb7ycsrw 2.5s ease-in-out infinite;
}

.ns-1[b-8kzb7ycsrw] { animation-delay: 0s; }
.ns-2[b-8kzb7ycsrw] { animation-delay: 0.6s; }
.ns-3[b-8kzb7ycsrw] { animation-delay: 1.2s; }
.ns-4[b-8kzb7ycsrw] { animation-delay: 0.3s; }
.ns-5[b-8kzb7ycsrw] { animation-delay: 1.8s; }
.ns-6[b-8kzb7ycsrw] { animation-delay: 0.9s; }
.ns-7[b-8kzb7ycsrw] { animation-delay: 2.1s; }

@keyframes nf-twinkle-b-8kzb7ycsrw {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.nf-telescope-tube[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 70%, #fff 30%);
    stroke: color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, #fff 50%);
    stroke-width: 0.5;
}

.nf-telescope-lens[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-teal, #4ed7c8) 30%, #1a1a2e 70%);
    stroke: var(--m-teal, #4ed7c8);
    stroke-width: 1;
}

.nf-lens-glint[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-teal, #4ed7c8) 40%, transparent);
    animation: nf-glint-b-8kzb7ycsrw 3s ease-in-out infinite;
}

@keyframes nf-glint-b-8kzb7ycsrw {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.nf-tripod[b-8kzb7ycsrw] {
    stroke: color-mix(in srgb, var(--m-text-2, #b9b4e6) 50%, transparent);
    stroke-width: 2;
    stroke-linecap: round;
}

.nf-search-beam[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-accent, #f6c453) 12%, transparent);
    animation: nf-beam-sweep-b-8kzb7ycsrw 4s ease-in-out infinite;
    transform-origin: 70px 38px;
}

@keyframes nf-beam-sweep-b-8kzb7ycsrw {
    0%, 100% { transform: rotate(0deg); opacity: 0.6; }
    50% { transform: rotate(8deg); opacity: 0.9; }
}

.nf-question[b-8kzb7ycsrw] {
    font-family: var(--d-font-serif);
    font-size: 18px;
    font-weight: 700;
    fill: var(--m-accent, #f6c453);
    opacity: 0;
    animation: nf-question-float-b-8kzb7ycsrw 3s ease-in-out infinite;
}

@keyframes nf-question-float-b-8kzb7ycsrw {
    0%, 100% { opacity: 0; transform: translateY(0); }
    30%, 70% { opacity: 0.8; }
    50% { opacity: 1; transform: translateY(-8px); }
}

/* ---- Typography ---- */

.not-found-title[b-8kzb7ycsrw] {
    font-family: var(--d-font-serif);
    color: var(--m-text, white);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    letter-spacing: 0.04em;
}

.not-found-message[b-8kzb7ycsrw] {
    color: var(--m-text-2, rgba(255, 255, 255, 0.65));
    margin: 0 0 2rem;
    line-height: 1.65;
    font-size: 0.95rem;
}

/* ---- Home button ---- */

.not-found-home-btn[b-8kzb7ycsrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--m-primary, #5b3cc4);
    color: var(--m-on-primary, #f8f7ff);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-primary, #5b3cc4) 35%, transparent);
}

.not-found-home-btn:hover[b-8kzb7ycsrw] {
    background: color-mix(in srgb, var(--m-primary, #5b3cc4) 85%, #fff 15%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent);
}

.not-found-home-btn:active[b-8kzb7ycsrw] {
    transform: translateY(0);
}

/* Rocket icon nudge on hover */
.not-found-home-btn:hover .not-found-btn-icon[b-8kzb7ycsrw] {
    animation: nf-rocket-nudge-b-8kzb7ycsrw 0.5s ease-in-out;
}

@keyframes nf-rocket-nudge-b-8kzb7ycsrw {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-10deg); }
}

.not-found-btn-icon[b-8kzb7ycsrw] {
    font-size: 1.125rem;
    vertical-align: middle;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .not-found-card[b-8kzb7ycsrw] {
        animation: none;
    }

    .nf-star[b-8kzb7ycsrw],
    .nf-lens-glint[b-8kzb7ycsrw],
    .nf-search-beam[b-8kzb7ycsrw],
    .nf-question[b-8kzb7ycsrw] {
        animation: none;
        opacity: 0.6;
    }

    .not-found-home-btn:hover[b-8kzb7ycsrw] {
        transform: none;
    }

    .not-found-home-btn:hover .not-found-btn-icon[b-8kzb7ycsrw] {
        animation: none;
    }
}

/* ---- Mobile ---- */

@media (max-width: 576px) {
    .not-found-container[b-8kzb7ycsrw] {
        padding: 2rem 1rem;
        min-height: 50vh;
    }

    .not-found-card[b-8kzb7ycsrw] {
        padding: 2rem 1.25rem 2.5rem;
    }

    .nf-illustration[b-8kzb7ycsrw] {
        width: 160px;
        height: 128px;
    }

    .not-found-title[b-8kzb7ycsrw] {
        font-size: 1.25rem;
    }
}

/* ---- Light theme ---- */

:is(html[data-theme="light"], html[data-theme="bright"]) .not-found-card[b-8kzb7ycsrw] {
    background: var(--m-card, #ffffff);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .nf-star[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .nf-telescope-tube[b-8kzb7ycsrw] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 55%, #fff 45%);
}

/* ---- Auth Denied Page ---- */

.auth-denied-container[b-8kzb7ycsrw] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    min-height: 60vh;
}

.auth-denied-card[b-8kzb7ycsrw] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-primary, #5b3cc4) 25%, transparent);
    border-radius: 16px;
    padding: 2.5rem 2rem 3rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px color-mix(in srgb, var(--m-primary, #5b3cc4) 8%, transparent);
    position: relative;
    overflow: hidden;
    animation: nf-card-enter-b-8kzb7ycsrw 0.6s ease-out both;
}

/* Reuse the same accent stripe keyframe from not-found */
.auth-denied-card[b-8kzb7ycsrw]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-primary, #5b3cc4) 30%, var(--m-teal, #4ed7c8) 70%, transparent);
}

.auth-denied-icon[b-8kzb7ycsrw] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-primary, #5b3cc4) 15%, transparent);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--m-primary, #5b3cc4) 25%, transparent);
}

.auth-denied-icon .material-symbols-outlined[b-8kzb7ycsrw] {
    font-size: 2.25rem;
    color: var(--m-primary, #5b3cc4);
}

.auth-denied-title[b-8kzb7ycsrw] {
    font-family: var(--d-font-serif);
    color: var(--m-text, white);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    letter-spacing: 0.04em;
}

.auth-denied-message[b-8kzb7ycsrw] {
    color: var(--m-text-2, rgba(255, 255, 255, 0.65));
    margin: 0 0 2rem;
    line-height: 1.65;
    font-size: 0.95rem;
}

.auth-denied-home-btn[b-8kzb7ycsrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--m-primary, #5b3cc4);
    color: var(--m-on-primary, #f8f7ff);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-primary, #5b3cc4) 35%, transparent);
}

.auth-denied-home-btn:hover[b-8kzb7ycsrw] {
    background: color-mix(in srgb, var(--m-primary, #5b3cc4) 85%, #fff 15%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent);
}

.auth-denied-home-btn:active[b-8kzb7ycsrw] {
    transform: translateY(0);
}

.auth-denied-btn-icon[b-8kzb7ycsrw] {
    font-size: 1.125rem;
    vertical-align: middle;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-denied-card[b-8kzb7ycsrw] {
        animation: none;
    }

    .auth-denied-home-btn:hover[b-8kzb7ycsrw] {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .auth-denied-container[b-8kzb7ycsrw] {
        padding: 2rem 1rem;
        min-height: 50vh;
    }

    .auth-denied-card[b-8kzb7ycsrw] {
        padding: 2rem 1.25rem 2.5rem;
    }

    .auth-denied-icon[b-8kzb7ycsrw] {
        width: 64px;
        height: 64px;
    }

    .auth-denied-icon .material-symbols-outlined[b-8kzb7ycsrw] {
        font-size: 1.75rem;
    }

    .auth-denied-title[b-8kzb7ycsrw] {
        font-size: 1.25rem;
    }
}

/* Light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .auth-denied-card[b-8kzb7ycsrw] {
    background: var(--m-card, #ffffff);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .auth-denied-title[b-8kzb7ycsrw] {
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .auth-denied-message[b-8kzb7ycsrw] {
    color: var(--m-text-2, rgba(0, 0, 0, 0.55));
}
/* /Components/AccountInstallOption.razor.rz.scp.css */
/* Account Install Option Component Styles */

/* No component-specific styles needed - uses global dropdown styles */

/* /Components/AccountSettingsModal.razor.rz.scp.css */
/* AccountSettingsModal — Dragon Scale custom modal */

/* ---- Backdrop ---- */
.settings-backdrop[b-c312wbiaim] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--m-bg) 70%, transparent);
    backdrop-filter: blur(6px);
    z-index: 1040;
    animation: settings-fade-in-b-c312wbiaim 0.2s ease-out;
}

/* ---- Modal ---- */
.settings-modal[b-c312wbiaim] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 16px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
    z-index: 1050;
    animation: settings-slide-in-b-c312wbiaim 0.25s ease-out;
}

@keyframes settings-fade-in-b-c312wbiaim {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes settings-slide-in-b-c312wbiaim {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Header ---- */
.settings-header[b-c312wbiaim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
}

.settings-heading[b-c312wbiaim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--d-font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.settings-heading .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1.25rem;
    color: var(--m-primary);
}

.settings-close[b-c312wbiaim] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.settings-close:hover[b-c312wbiaim] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-primary);
}

.settings-close:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.settings-close .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1.125rem;
}

/* ---- Body ---- */
.settings-body[b-c312wbiaim] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ---- Section ---- */
.settings-section[b-c312wbiaim] {
    margin-bottom: 1.5rem;
}

.settings-section:last-child[b-c312wbiaim] {
    margin-bottom: 0;
}

.settings-section-title[b-c312wbiaim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--m-text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 30%, transparent);
}

.settings-section-title .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1rem;
    color: var(--m-primary);
}

/* ---- Toggle (checkbox + label) ---- */
.settings-toggle[b-c312wbiaim] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.125rem 0.75rem;
    padding: 0.625rem 0;
    cursor: pointer;
}

.settings-checkbox[b-c312wbiaim] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border-radius: 4px;
    border: 2px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    background: var(--m-card);
    appearance: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.settings-checkbox:checked[b-c312wbiaim] {
    background: var(--m-primary);
    border-color: var(--m-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.settings-checkbox:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.settings-toggle-label[b-c312wbiaim] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--m-text);
    flex: 1;
    min-width: 0;
}

.settings-toggle-desc[b-c312wbiaim] {
    font-size: 0.8rem;
    color: var(--m-text-2);
    line-height: 1.4;
    width: 100%;
    padding-left: 1.875rem;
}

/* ---- Field (select) ---- */
.settings-field[b-c312wbiaim] {
    padding: 0.625rem 0;
}

.settings-field-label[b-c312wbiaim] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--m-text);
    margin-bottom: 0.375rem;
}

.settings-select[b-c312wbiaim] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    background: var(--m-card);
    color: var(--m-text);
    font-size: 0.85rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2.22 4.47a.75.75 0 011.06 0L6 7.19l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L2.22 5.53a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.settings-select:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
    border-color: var(--m-primary);
}

.settings-field-desc[b-c312wbiaim] {
    display: block;
    font-size: 0.8rem;
    color: var(--m-text-2);
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* ---- Footer ---- */
.settings-footer[b-c312wbiaim] {
    padding: 1rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
}

.settings-save[b-c312wbiaim] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)));
    color: var(--m-on-primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}

.settings-save:hover[b-c312wbiaim] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.settings-save:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.settings-save .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1rem;
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .settings-modal[b-c312wbiaim] {
    background: var(--m-card, #ffffff);
    border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .settings-backdrop[b-c312wbiaim] {
    background: color-mix(in srgb, var(--m-bg) 50%, transparent);
}

/* Light-theme override targets the unchecked state only.
   The selector `html[data-theme="light"] .settings-checkbox` has higher
   specificity (0,2,1) than `.settings-checkbox:checked` (0,2,0), so without
   `:not(:checked)` this rule clobbers the checked-state purple fill and the
   white tick becomes invisible against the soft-purple unchecked background.
   See trace-2026-05-06-albino-dragon-checkbox.md. */
:is(html[data-theme="light"], html[data-theme="bright"]) .settings-checkbox:not(:checked)[b-c312wbiaim] {
    background: var(--m-card, #ffffff);
    border-color: color-mix(in srgb, var(--m-text) 20%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .settings-select[b-c312wbiaim] {
    background: var(--m-card, #ffffff);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .settings-backdrop[b-c312wbiaim],
    .settings-modal[b-c312wbiaim] {
        animation: none;
    }

    .settings-save[b-c312wbiaim] {
        transition: none;
    }

    .settings-save:hover[b-c312wbiaim] {
        transform: none;
    }

}

/* ---- Support section (WhatsApp behind self-attestation gate) ---- */
.community-body[b-c312wbiaim] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--m-text-2);
    line-height: 1.45;
}

.community-attest[b-c312wbiaim] {
    margin-bottom: 0.5rem;
}

.community-reveal-btn[b-c312wbiaim] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    margin-top: 0.25rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.community-reveal-btn:hover:not(:disabled)[b-c312wbiaim] {
    background: color-mix(in srgb, var(--m-primary) 22%, transparent);
    border-color: var(--m-primary);
}

.community-reveal-btn:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.community-reveal-btn:disabled[b-c312wbiaim] {
    opacity: 0.55;
    cursor: not-allowed;
}

.community-reveal-btn .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1rem;
    color: var(--m-primary);
}

.community-whatsapp-host[b-c312wbiaim] {
    margin-top: 1rem;
}

/* ---- Account management ---- */
.account-management-section[b-c312wbiaim] {
    padding-top: 0.25rem;
}

.account-action-message[b-c312wbiaim] {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.account-action-message.success[b-c312wbiaim] {
    color: var(--m-success);
    background: var(--m-success-bg);
    border: 1px solid var(--m-success-border);
}

.account-action-message.error[b-c312wbiaim] {
    color: var(--m-error);
    background: var(--m-error-bg);
    border: 1px solid var(--m-error-border);
}

.account-action-row[b-c312wbiaim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.account-action-title[b-c312wbiaim],
.account-action-copy[b-c312wbiaim] {
    margin: 0;
}

.account-action-title[b-c312wbiaim] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--m-text);
}

.account-action-copy[b-c312wbiaim] {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--m-text-2);
    line-height: 1.4;
}

.account-action-btn[b-c312wbiaim] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 6.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.account-action-btn .material-symbols-outlined[b-c312wbiaim] {
    font-size: 1rem;
}

.account-action-btn.secondary[b-c312wbiaim] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.account-action-btn.secondary:hover:not(:disabled)[b-c312wbiaim] {
    background: color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-color: var(--m-primary);
}

.account-action-btn.danger[b-c312wbiaim] {
    width: 100%;
    margin-top: 0.75rem;
    color: var(--m-on-primary);
    background: var(--m-error);
    border: 1px solid var(--m-error);
}

.account-action-btn.danger:hover:not(:disabled)[b-c312wbiaim] {
    background: color-mix(in srgb, var(--m-error) 85%, var(--m-text));
    border-color: color-mix(in srgb, var(--m-error) 85%, var(--m-text));
}

.account-action-btn:disabled[b-c312wbiaim] {
    opacity: 0.55;
    cursor: not-allowed;
}

.account-action-btn:focus-visible[b-c312wbiaim],
.account-delete-input:focus-visible[b-c312wbiaim] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.account-delete-panel[b-c312wbiaim] {
    margin-top: 0.75rem;
    padding: 0.875rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-error) 35%, var(--m-border));
    background: color-mix(in srgb, var(--m-error-bg) 65%, transparent);
}

.account-delete-label[b-c312wbiaim] {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.375rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--m-text);
}

.account-delete-input[b-c312wbiaim] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-error) 40%, var(--m-border));
    background: var(--m-card);
    color: var(--m-text);
    font-size: 0.85rem;
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .settings-modal[b-c312wbiaim] {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 2rem);
        border-radius: 12px;
    }

    .settings-header[b-c312wbiaim] {
        padding: 1rem;
    }

    .settings-body[b-c312wbiaim] {
        padding: 1rem;
    }

    .settings-footer[b-c312wbiaim] {
        padding: 0.75rem 1rem;
    }

    .account-action-row[b-c312wbiaim] {
        align-items: stretch;
        flex-direction: column;
    }

    .account-action-btn.secondary[b-c312wbiaim] {
        width: 100%;
    }
}
/* /Components/Achievements/AchievementsProfileGrid.razor.rz.scp.css */
/* Profile selection grid */
.profile-grid[b-1vgxzcvjc4] {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.profile-card[b-1vgxzcvjc4] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-surface) 92%, transparent) 0%,
        color-mix(in srgb, var(--m-surface-elevated) 95%, transparent) 100%);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, var(--m-border));
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-text) 8%, transparent);
    cursor: pointer;
}

.profile-card:hover[b-1vgxzcvjc4] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 45%, var(--m-border));
}

.profile-card:focus-visible[b-1vgxzcvjc4] {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-primary) 18%, transparent);
}

.profile-avatar-section[b-1vgxzcvjc4] {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
}

.profile-avatar-wrapper[b-1vgxzcvjc4] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 20%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 12%, transparent);
}

.profile-avatar-wrapper[b-1vgxzcvjc4]  .profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-placeholder[b-1vgxzcvjc4] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text);
    font-size: 2rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 20%, transparent) 100%);
}

.profile-avatar-placeholder .material-symbols-outlined[b-1vgxzcvjc4] {
    font-size: 2.5rem;
    opacity: 0.7;
}

.guest-badge[b-1vgxzcvjc4] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--m-teal) 0%,
        color-mix(in srgb, var(--m-teal) 75%, var(--m-bg)) 100%);
    color: var(--m-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-teal) 35%, transparent);
    border: 2px solid var(--m-surface);
    z-index: 2;
}

.guest-badge .material-symbols-outlined[b-1vgxzcvjc4] {
    font-size: 0.875rem;
}

.profile-latest-badges[b-1vgxzcvjc4] {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    z-index: 3;
    max-width: 90%;
}

.mini-badge[b-1vgxzcvjc4] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-surface-hover) 85%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--m-border) 70%, transparent);
}

.mini-badge img[b-1vgxzcvjc4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-badge-icon[b-1vgxzcvjc4] {
    font-size: 1rem;
    color: var(--m-warning);
}

.profile-info[b-1vgxzcvjc4] {
    margin-top: 12px;
    margin-bottom: 16px;
}

.profile-name[b-1vgxzcvjc4] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg,
        var(--m-primary) 0%,
        color-mix(in srgb, var(--m-primary) 70%, var(--m-bg)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* /Components/Achievements/AxisAdvancedView.razor.rz.scp.css */
.axis-card[b-wzqmhet7s3] {
    border: 1px solid color-mix(in srgb, var(--m-border) 75%, transparent);
    border-radius: 14px;
}

.axis-copy[b-wzqmhet7s3] {
    display: grid;
    gap: 0.5rem;
}

.axis-copy-item[b-wzqmhet7s3] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.axis-copy-direction[b-wzqmhet7s3] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--m-text-2);
    white-space: nowrap;
}

.axis-copy-text[b-wzqmhet7s3] {
    color: var(--m-text);
}

/* ── Tier card ── */
.tier-card[b-wzqmhet7s3] {
    height: 100%;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--m-text) 8%, transparent);
    padding: 1rem;
    background: var(--m-bg);
    position: relative;
    overflow: hidden;
}

.tier-card-header[b-wzqmhet7s3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tier-image[b-wzqmhet7s3] {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-text) 4%, transparent);
    flex-shrink: 0;
    overflow: hidden;
}

.tier-image img[b-wzqmhet7s3] {
    width: 160px;
    height: 160px;
    object-fit: cover;
}

.tier-fallback-icon[b-wzqmhet7s3] {
    font-size: 5rem;
    opacity: 0.7;
    color: var(--m-text-2);
}

.tier-card:not(.earned) .tier-image[b-wzqmhet7s3] {
    opacity: 0.4;
    filter: grayscale(100%);
}

.tier-title[b-wzqmhet7s3] {
    min-width: 0;
    flex-grow: 1;
}

.tier-label[b-wzqmhet7s3] {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m-text-2);
}

.tier-name[b-wzqmhet7s3] {
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.2;
}

.tier-description[b-wzqmhet7s3] {
    font-size: 0.9rem;
    color: var(--m-text-2);
    margin-bottom: 0.75rem;
}

.tier-earned-badge[b-wzqmhet7s3] {
    color: var(--m-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tier-earned-badge .material-symbols-outlined[b-wzqmhet7s3] {
    font-size: 1.1rem;
}

/* Info toggle — custom button, no btn-link */
.tier-info-toggle[b-wzqmhet7s3] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--m-text-2);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.tier-info-toggle:hover[b-wzqmhet7s3] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
}

.tier-info-toggle .material-symbols-outlined[b-wzqmhet7s3] {
    font-size: 1rem;
}

.tier-earned-at[b-wzqmhet7s3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--m-success);
}

.tier-earned-at .material-symbols-outlined[b-wzqmhet7s3] {
    font-size: 1rem;
}

/* Progress bar — custom, no Bootstrap */
.tier-progress-container[b-wzqmhet7s3] {
    margin-top: 0.75rem;
}

.tier-progress[b-wzqmhet7s3] {
    height: 8px;
    background: color-mix(in srgb, var(--m-border) 60%, transparent);
    border-radius: 99px;
    overflow: hidden;
}

.tier-progress-fill[b-wzqmhet7s3] {
    height: 100%;
    background: linear-gradient(90deg, var(--m-primary), var(--m-accent));
    border-radius: 99px;
    transition: width 0.4s ease;
}

.tier-observations[b-wzqmhet7s3] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--m-text) 70%, transparent);
}

/* Tier colour accents */
.tier-card.tier-bronze[b-wzqmhet7s3]  { border-color: rgba(205, 127, 50, 0.45); }
.tier-card.tier-silver[b-wzqmhet7s3]  { border-color: rgba(192, 192, 192, 0.65); }
.tier-card.tier-gold[b-wzqmhet7s3]    { border-color: rgba(255, 215, 0, 0.55); }
.tier-card.tier-platinum[b-wzqmhet7s3]{ border-color: rgba(229, 228, 226, 0.65); }
.tier-card.tier-diamond[b-wzqmhet7s3] { border-color: rgba(185, 242, 255, 0.65); }

/* Earned glow */
.tier-card.earned[b-wzqmhet7s3] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-success) 12%, transparent);
}

.tier-card.earned[b-wzqmhet7s3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--m-accent) 28%, transparent),
        transparent 55%);
    pointer-events: none;
}

/* Locked */
.tier-card:not(.earned)[b-wzqmhet7s3] {
    opacity: 0.75;
}

.tier-card.locked .tier-image img[b-wzqmhet7s3],
.tier-card.locked .tier-image .tier-fallback-icon[b-wzqmhet7s3] {
    filter: grayscale(100%);
    opacity: 0.55;
}

.tier-card.locked .tier-title .tier-name[b-wzqmhet7s3],
.tier-card.locked .tier-title .tier-label[b-wzqmhet7s3],
.tier-card.locked .tier-description[b-wzqmhet7s3],
.tier-card.locked .tier-earned-at[b-wzqmhet7s3] {
    opacity: 0.7;
}

.tier-card.locked .tier-info-toggle[b-wzqmhet7s3] {
    display: none;
}
/* /Components/Achievements/BadgeSimplifiedGrid.razor.rz.scp.css */
.simplified-grid[b-741di07bku] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 12px;
}

.badge-cell[b-741di07bku] {
    display: flex;
}

.badge-thumb[b-741di07bku] {
    position: relative;
    width: 500px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--m-text) 8%, transparent);
    background: color-mix(in srgb, var(--m-text) 4%, transparent);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-thumb:hover[b-741di07bku] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.badge-thumb:focus-visible[b-741di07bku] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.badge-thumb img[b-741di07bku] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-fallback-icon[b-741di07bku] {
    font-size: 2.5rem;
    color: var(--m-accent);
    opacity: 0.7;
}

.badge-info-btn[b-741di07bku] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-text) 55%, transparent);
    color: var(--m-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.badge-info-btn .material-symbols-outlined[b-741di07bku] {
    font-size: 0.95rem;
}

.badge-thumb:hover .badge-info-btn[b-741di07bku],
.badge-thumb:focus-visible .badge-info-btn[b-741di07bku] {
    opacity: 1;
}

@media (max-width: 576px) {
    .simplified-grid[b-741di07bku] {
        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
        gap: 8px;
    }

    .badge-thumb[b-741di07bku] {
        width: 144px;
        border-radius: 8px;
    }
}
/* /Components/Achievements/BadgeTierModal.razor.rz.scp.css */
@keyframes badge-modal-overlay-in-b-5umtjmhz0h {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes badge-modal-card-in-b-5umtjmhz0h {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.badge-modal-overlay[b-5umtjmhz0h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: badge-modal-overlay-in-b-5umtjmhz0h 0.2s ease both;
}

.badge-modal-card[b-5umtjmhz0h] {
    background: var(--m-surface-elevated);
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    border-radius: 20px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    animation: badge-modal-card-in-b-5umtjmhz0h 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    overflow: hidden;
}

/* Header */
.badge-modal-header[b-5umtjmhz0h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
}

.badge-modal-tier-label[b-5umtjmhz0h] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--m-accent);
    margin-bottom: 2px;
}

.badge-modal-title[b-5umtjmhz0h] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.badge-modal-close[b-5umtjmhz0h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.badge-modal-close:hover[b-5umtjmhz0h] {
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
    color: var(--m-text);
}

.badge-modal-close .material-symbols-outlined[b-5umtjmhz0h] {
    font-size: 1.1rem;
}

/* Body */
.badge-modal-body[b-5umtjmhz0h] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.badge-modal-image-wrap[b-5umtjmhz0h] {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
}

.badge-modal-image[b-5umtjmhz0h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-modal-image-placeholder[b-5umtjmhz0h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
}

.badge-modal-image-placeholder .material-symbols-outlined[b-5umtjmhz0h] {
    font-size: 3.5rem;
    color: var(--m-text-2);
    opacity: 0.5;
}

.badge-modal-description[b-5umtjmhz0h] {
    font-size: 0.9rem;
    color: var(--m-text-2);
    line-height: 1.55;
    margin: 0;
}

.badge-modal-earned-at[b-5umtjmhz0h] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--m-success);
}

.badge-modal-earned-at .material-symbols-outlined[b-5umtjmhz0h] {
    font-size: 1rem;
}

/* Progress bar */
.badge-modal-progress-wrap[b-5umtjmhz0h] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.badge-modal-progress[b-5umtjmhz0h] {
    height: 8px;
    background: color-mix(in srgb, var(--m-border) 60%, transparent);
    border-radius: 99px;
    overflow: hidden;
}

.badge-modal-progress-fill[b-5umtjmhz0h] {
    height: 100%;
    background: linear-gradient(90deg, var(--m-primary), var(--m-accent));
    border-radius: 99px;
    transition: width 0.4s ease;
}

.badge-modal-progress-label[b-5umtjmhz0h] {
    font-size: 0.8rem;
    color: var(--m-text-2);
    text-align: right;
}

/* Footer */
.badge-modal-footer[b-5umtjmhz0h] {
    padding: 0.875rem 1.5rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
}

.badge-modal-btn-close[b-5umtjmhz0h] {
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-border) 70%, transparent);
    background: transparent;
    color: var(--m-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.badge-modal-btn-close:hover[b-5umtjmhz0h] {
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .badge-modal-overlay[b-5umtjmhz0h],
    .badge-modal-card[b-5umtjmhz0h] {
        animation: none;
    }
}
/* /Components/ActiveSessionCard.razor.rz.scp.css */
/* Active Session Card — scoped styles
 *
 * Goal: surface "where am I?" for a returning kid. Mirrors the surface, border,
 * radius and spacing language of BundleCard / AdventureCard so the homepage
 * reads as one card family. All colors come from Dragon Scale tokens (--m-*).
 */

.asc-card-frame[b-jq8sh4il1g] {
    min-width: 0;
}

.asc-card[b-jq8sh4il1g] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    box-shadow: var(--m-shadow-sm);
    overflow: hidden;
    transition:
        box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: asc-card-enter-b-jq8sh4il1g 0.4s ease-out backwards;
}

.asc-card:hover[b-jq8sh4il1g] {
    border-color: color-mix(in srgb, var(--m-primary) 45%, var(--m-border));
    box-shadow:
        var(--m-shadow-lg),
        0 0 24px color-mix(in srgb, var(--m-primary) 14%, transparent);
    transform: translateY(-2px);
}

.asc-card:focus-within[b-jq8sh4il1g] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

@keyframes asc-card-enter-b-jq8sh4il1g {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top accent shimmer — signals "active / in flight". */
.asc-shimmer[b-jq8sh4il1g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--m-primary) 0%,
        var(--m-accent) 50%,
        var(--m-primary) 100%
    );
    background-size: 200% 100%;
    animation: asc-shimmer-pass-b-jq8sh4il1g 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes asc-shimmer-pass-b-jq8sh4il1g {
    0%, 100% { background-position: 200% 0; }
    50%      { background-position: 0% 0; }
}

/* ---------- Body grid: hero | info | actions ------------------------------ */
.asc-body[b-jq8sh4il1g] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

/* ---------- Hero image ---------------------------------------------------- */
.asc-hero[b-jq8sh4il1g] {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--m-surface) 0%,
        var(--m-surface-hover) 100%
    );
    border: 1px solid var(--m-border);
}

.asc-hero[b-jq8sh4il1g]  .asc-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.asc-hero-placeholder[b-jq8sh4il1g] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text-2);
}

.asc-hero-placeholder .material-symbols-outlined[b-jq8sh4il1g] {
    font-size: 2rem;
}

/* ---------- Info column --------------------------------------------------- */
.asc-info[b-jq8sh4il1g] {
    min-width: 0; /* allow grid track to shrink so ellipsis works */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asc-title[b-jq8sh4il1g] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.3;
    min-height: 0;
    /* Clamp to 2 lines so cards stay equal height in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asc-character[b-jq8sh4il1g] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--m-text-2);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Progress ------------------------------------------------------ */
.asc-progress-row[b-jq8sh4il1g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.asc-progress[b-jq8sh4il1g] {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
    overflow: hidden;
}

.asc-progress-fill[b-jq8sh4il1g] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--m-primary) 0%,
        var(--m-accent) 100%
    );
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Indeterminate state — when total scene count is unknown. */
.asc-progress.asc-progress-indeterminate .asc-progress-fill[b-jq8sh4il1g] {
    width: 40%;
    animation: asc-progress-indeterminate-b-jq8sh4il1g 1.6s ease-in-out infinite;
}

@keyframes asc-progress-indeterminate-b-jq8sh4il1g {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.asc-progress-label[b-jq8sh4il1g] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--m-text-2);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asc-progress-sep[b-jq8sh4il1g] {
    margin: 0 0.4em;
    color: color-mix(in srgb, var(--m-text-2) 60%, transparent);
}

.asc-time[b-jq8sh4il1g] {
    color: var(--m-text-2);
    font-weight: 500;
}

/* ---------- Actions ------------------------------------------------------- */
.asc-actions[b-jq8sh4il1g] {
    display: flex;
    align-items: center;
}

.asc-continue[b-jq8sh4il1g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--m-primary);
    color: var(--m-on-primary);
    border: 1px solid var(--m-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        background-color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
    white-space: nowrap;
}

.asc-continue:hover:not(:disabled)[b-jq8sh4il1g] {
    background: color-mix(in srgb, var(--m-primary) 88%, var(--m-bg));
    border-color: color-mix(in srgb, var(--m-primary) 88%, var(--m-bg));
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-accent, 0 6px 16px color-mix(in srgb, var(--m-primary) 30%, transparent));
}

.asc-continue:active:not(:disabled)[b-jq8sh4il1g] {
    transform: translateY(0);
}

.asc-continue:focus-visible[b-jq8sh4il1g] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.asc-continue:disabled[b-jq8sh4il1g] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.asc-continue .material-symbols-outlined[b-jq8sh4il1g] {
    font-size: 1.1rem;
    color: var(--m-on-primary);
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 540px) {
    .asc-body[b-jq8sh4il1g] {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "hero info"
            "actions actions";
        gap: 12px;
        padding: 14px;
    }

    .asc-hero[b-jq8sh4il1g] {
        grid-area: hero;
        width: 64px;
        height: 64px;
    }

    .asc-info[b-jq8sh4il1g] {
        grid-area: info;
    }

    .asc-actions[b-jq8sh4il1g] {
        grid-area: actions;
        margin-top: 4px;
    }

    .asc-continue[b-jq8sh4il1g] {
        width: 100%;
        justify-content: center;
    }

    .asc-title[b-jq8sh4il1g] {
        font-size: 1rem;
    }

    .asc-progress-label[b-jq8sh4il1g] {
        white-space: normal;
    }
}

/* ---------- Dark mode ----------------------------------------------------- */
[data-theme="dark"] .asc-card[b-jq8sh4il1g] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 22%, transparent);
}

[data-theme="dark"] .asc-card:hover[b-jq8sh4il1g] {
    border-color: color-mix(in srgb, var(--m-secondary) 50%, transparent);
    box-shadow:
        var(--m-shadow-lg),
        0 0 28px color-mix(in srgb, var(--m-secondary) 18%, transparent);
}

[data-theme="dark"] .asc-hero[b-jq8sh4il1g] {
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 25%, transparent);
}

[data-theme="dark"] .asc-progress[b-jq8sh4il1g] {
    background: color-mix(in srgb, var(--m-secondary) 18%, var(--m-bg));
}

/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .asc-card[b-jq8sh4il1g],
    .asc-card:hover[b-jq8sh4il1g],
    .asc-continue[b-jq8sh4il1g],
    .asc-progress-fill[b-jq8sh4il1g] {
        animation: none;
        transition: none;
        transform: none;
    }

    .asc-shimmer[b-jq8sh4il1g] {
        animation: none;
        background: var(--m-primary);
    }

    .asc-progress.asc-progress-indeterminate .asc-progress-fill[b-jq8sh4il1g] {
        animation: none;
        width: 100%;
    }
}
/* /Components/AdventureCard.razor.rz.scp.css */
/* Adventure Card Scoped Styles */

/* Animation custom properties — tunable per-card if needed */
.adventure-card[b-nidyymv6zg] {
    --_card-hover-lift: -6px;
    --_card-hover-dur: 300ms;
    --_card-sparkle-dur: 1.8s;
    --_card-enter-dur: 0.35s;

    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--m-card);
    box-shadow: var(--m-shadow-sm);
    transition:
        box-shadow var(--_card-hover-dur) var(--m-ease-smooth),
        transform var(--_card-hover-dur) var(--m-ease-spring),
        border-color var(--_card-hover-dur) var(--m-ease-smooth);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--m-border);
    animation: card-enter-b-nidyymv6zg var(--_card-enter-dur) ease-out backwards;
    position: relative;
}

@keyframes card-enter-b-nidyymv6zg {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Parallax lift + enhanced shadow on hover */
.adventure-card:hover[b-nidyymv6zg] {
    box-shadow: var(--m-shadow-lg), 0 0 24px color-mix(in srgb, var(--m-primary) 12%, transparent);
    border-color: var(--m-selected-border);
    transform: translateY(var(--_card-hover-lift)) scale(1.015);
}

/* Sparkle trail overlay — gradient shimmer pass on hover */
.adventure-card .adventure-sparkle-trail[b-nidyymv6zg] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        color-mix(in srgb, var(--m-accent) 18%, transparent) 45%,
        color-mix(in srgb, var(--m-teal) 12%, transparent) 50%,
        color-mix(in srgb, var(--m-accent) 18%, transparent) 55%,
        transparent 70%
    );
    background-size: 300% 100%;
    transition: opacity var(--m-dur-base) var(--m-ease-smooth);
}

.adventure-card:hover .adventure-sparkle-trail[b-nidyymv6zg] {
    opacity: 1;
    animation: sparkle-pass-b-nidyymv6zg var(--_card-sparkle-dur) var(--m-ease-smooth) forwards;
}

@keyframes sparkle-pass-b-nidyymv6zg {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* Dark mode sparkle — brighter, more magical */
[data-theme="dark"] .adventure-card .adventure-sparkle-trail[b-nidyymv6zg] {
    background: linear-gradient(
        105deg,
        transparent 30%,
        color-mix(in srgb, var(--m-accent) 25%, transparent) 44%,
        color-mix(in srgb, var(--m-secondary) 15%, transparent) 50%,
        color-mix(in srgb, var(--m-accent) 25%, transparent) 56%,
        transparent 70%
    );
    background-size: 300% 100%;
}

.adventure-image-container[b-nidyymv6zg] {
    position: relative;
    width: 100%;
    padding-top: 62.5%; /* 16:10 aspect ratio */
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-surface-hover) 100%);
    overflow: hidden;
}

/* Image lives inside child component (CachedMystiraImage). Use ::deep to style it from this scoped CSS. */
.adventure-image-container[b-nidyymv6zg]  .adventure-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--m-dur-slow) var(--m-ease-smooth);
}

.adventure-card:hover[b-nidyymv6zg]  .adventure-card-image {
    transform: scale(1.05);
}

.adventure-card-placeholder[b-nidyymv6zg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text-2);
}

.adventure-completed-badge[b-nidyymv6zg] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.adventure-card-body[b-nidyymv6zg] {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adventure-card-title[b-nidyymv6zg] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--m-text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adventure-card-description[b-nidyymv6zg] {
    font-size: 0.875rem;
    color: var(--m-text-2);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

/* Factual metadata — quiet neutral chips, sentence case */
.adventure-metadata[b-nidyymv6zg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.meta-chip[b-nidyymv6zg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--m-text-2) 8%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-text-2) 16%, var(--m-border));
    border-radius: 8px;
    white-space: nowrap;
}

.meta-chip-icon[b-nidyymv6zg] {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--m-primary);
}

/* Thematic tags — soft gold-accent wash, clearly distinct from facts */
.adventure-themes[b-nidyymv6zg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.theme-chip[b-nidyymv6zg] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
    border-radius: 999px;
}

.adventure-card-footer[b-nidyymv6zg] {
    padding: 12px 16px;
    border-top: 1px solid var(--m-border);
}

.btn-adventure-start[b-nidyymv6zg] {
    width: 100%;
    padding: 10px 16px;
    background: var(--m-primary);
    color: var(--m-on-primary);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--m-dur-base) var(--m-ease-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-adventure-start:hover[b-nidyymv6zg] {
    background: var(--m-primary);
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-accent);
}

.btn-adventure-start:active[b-nidyymv6zg] {
    transform: translateY(0);
}

.btn-adventure-start:focus-visible[b-nidyymv6zg] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
    box-shadow: var(--m-ring), var(--m-shadow-accent);
}

/* Accessibility */
.adventure-card:focus-visible[b-nidyymv6zg] {
    outline: none;
    box-shadow: var(--m-ring), var(--m-shadow-md);
}

/* Loading state */
.adventure-card.loading[b-nidyymv6zg] {
    pointer-events: none;
    opacity: 0.6;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .adventure-card-body[b-nidyymv6zg] {
        padding: 12px;
        gap: 10px;
    }

    .adventure-card-title[b-nidyymv6zg] {
        font-size: 0.9rem;
    }

    .adventure-card-description[b-nidyymv6zg] {
        font-size: 0.8rem;
    }
}

/* Manual dark mode toggle support */
[data-theme="dark"] .adventure-card[b-nidyymv6zg] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 20%, transparent);
    box-shadow: var(--m-shadow-sm);
}

[data-theme="dark"] .adventure-card:hover[b-nidyymv6zg] {
    box-shadow: var(--m-shadow-lg), 0 0 28px color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-color: var(--m-secondary);
}

[data-theme="dark"] .adventure-image-container[b-nidyymv6zg] {
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
}

[data-theme="dark"] .adventure-card-placeholder[b-nidyymv6zg] {
    color: var(--m-secondary);
}

[data-theme="dark"] .adventure-card-title[b-nidyymv6zg] {
    color: var(--m-text);
}

[data-theme="dark"] .adventure-card-description[b-nidyymv6zg] {
    color: var(--m-text-2);
}

[data-theme="dark"] .adventure-card-footer[b-nidyymv6zg] {
    border-top-color: color-mix(in srgb, var(--m-secondary) 15%, transparent);
}

[data-theme="dark"] .meta-chip[b-nidyymv6zg] {
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--m-text-2) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-text-2) 24%, transparent);
}

[data-theme="dark"] .meta-chip-icon[b-nidyymv6zg] {
    color: var(--m-secondary);
}

[data-theme="dark"] .theme-chip[b-nidyymv6zg] {
    color: var(--m-accent);
    background: color-mix(in srgb, var(--m-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-accent) 36%, transparent);
}

/* Light mode overrides */
:is([data-theme="light"], [data-theme="bright"]) .adventure-card[b-nidyymv6zg] {
    background: var(--m-card);
    border-color: var(--m-border);
    box-shadow: var(--m-shadow-sm);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-card:hover[b-nidyymv6zg] {
    box-shadow: var(--m-shadow-lg), 0 0 20px color-mix(in srgb, var(--m-primary) 8%, transparent);
    border-color: var(--m-selected-border);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-image-container[b-nidyymv6zg] {
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-surface-hover) 100%);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-card-placeholder[b-nidyymv6zg] {
    color: var(--m-text-2);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-card-title[b-nidyymv6zg] {
    color: var(--m-text);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-card-description[b-nidyymv6zg] {
    color: var(--m-text-2);
}

:is([data-theme="light"], [data-theme="bright"]) .adventure-card-footer[b-nidyymv6zg] {
    border-top-color: var(--m-border);
}

.adventure-placeholder-icon[b-nidyymv6zg] {
    font-size: 3rem;
    color: var(--m-text-2);
}

/* Reduced motion — disable ALL animations and transitions */
@media (prefers-reduced-motion: reduce) {
    .adventure-card[b-nidyymv6zg] {
        animation: none;
        transition: none;
    }

    .adventure-card:hover[b-nidyymv6zg] {
        transform: none;
    }

    .adventure-card:hover[b-nidyymv6zg]  .adventure-card-image {
        transform: none;
    }

    .adventure-card .adventure-sparkle-trail[b-nidyymv6zg] {
        display: none;
    }

    .btn-adventure-start[b-nidyymv6zg] {
        transition: none;
    }

    .btn-adventure-start:hover[b-nidyymv6zg] {
        transform: none;
    }
}
/* /Components/AdventuresSection.razor.rz.scp.css */
/* Adventures Section Scoped Styles */

/* Material Symbol icon sizing */
.as-icon[b-eroubi6ky0] {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.as-icon-sm[b-eroubi6ky0] {
  font-size: 0.9rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.as-icon-alert[b-eroubi6ky0] {
  font-size: 1.1rem;
  flex-shrink: 0;
}

#adventures[b-eroubi6ky0] {
  width: 100%;
  padding: 0;
}

/* Explore header — marketing-friendly for unauthenticated users */
.explore-header[b-eroubi6ky0] {
  position: relative;
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 50% 0%,
      color-mix(in srgb, var(--m-primary) 10%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--m-card) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-primary) 16%, var(--m-border));
  box-shadow: var(--m-shadow-sm);
}

.explore-title[b-eroubi6ky0] {
  font-family: var(--m-font-display, 'Baloo 2', cursive);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--m-text);
  margin-bottom: 0.25rem;
}

.explore-sub[b-eroubi6ky0] {
  font-size: 0.95rem;
  color: var(--m-text-2);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Sign-in CTA — shown below bundles for unauthenticated users */
.explore-cta[b-eroubi6ky0] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-primary) 10%, var(--m-card)) 0%,
    color-mix(in srgb, var(--m-accent) 8%, var(--m-card)) 100%);
  border: 1px solid color-mix(in srgb, var(--m-primary) 24%, var(--m-border));
  box-shadow: var(--m-shadow-sm);
}

.explore-cta-icon[b-eroubi6ky0] {
  font-size: 1.3rem;
  color: var(--m-primary);
  flex-shrink: 0;
}

.explore-cta-text[b-eroubi6ky0] {
  font-size: 0.9rem;
  color: var(--m-text);
}

.explore-cta a[b-eroubi6ky0] {
  color: var(--m-primary);
  font-weight: 600;
  text-decoration: none;
}

.explore-cta a:hover[b-eroubi6ky0] {
  text-decoration: underline;
}

/* Show More button */
.show-more-row[b-eroubi6ky0] {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.show-more-btn[b-eroubi6ky0] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
  background: color-mix(in srgb, var(--m-primary) 6%, transparent);
  color: var(--m-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.show-more-btn:hover[b-eroubi6ky0] {
  background: color-mix(in srgb, var(--m-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--m-primary) 50%, transparent);
}

.show-more-btn .material-symbols-outlined[b-eroubi6ky0] {
  font-size: 1.1rem;
}

/* Active Adventures Section */
.active-adventures-section[b-eroubi6ky0] {
  margin: 0 auto 1.5rem;
  max-width: 100%;
}

.active-adventures-header[b-eroubi6ky0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--m-primary) 10%, var(--m-card)) 0%,
      color-mix(in srgb, var(--m-secondary) 7%, var(--m-card)) 100%
    );
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
  box-shadow: var(--m-shadow-sm);
}

.active-adventures-title[b-eroubi6ky0] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
}

.active-adventures-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-primary);
  font-size: 1.1rem;
}

.active-adventures-badge[b-eroubi6ky0] {
  background: color-mix(in srgb, var(--m-primary) 14%, var(--m-card));
  color: var(--m-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
  letter-spacing: 0.02em;
}

/* Toggle Switch for Active Adventures */
.active-adventures-toggle .form-check-input[b-eroubi6ky0] {
  width: 44px;
  height: 22px;
  cursor: pointer;
  background-color: color-mix(in srgb, var(--m-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--m-text) 20%, transparent);
  transition: all 0.3s ease;
  outline: 2px solid transparent;
}

.active-adventures-toggle .form-check-input:checked[b-eroubi6ky0] {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
}

.active-adventures-toggle .form-check-label[b-eroubi6ky0] {
  font-size: 0.95rem;
  color: var(--m-text-2);
  cursor: pointer;
  margin-left: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Section Headers */
.section-header[b-eroubi6ky0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.active-adventures-grid[b-eroubi6ky0] {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  justify-content: stretch;
  gap: 1rem;
}

.active-adventures-grid[b-eroubi6ky0]  .asc-card-frame {
  width: 100%;
  max-width: 590px;
  flex: none;
  padding: 0;
  margin-bottom: 0 !important;
}

.section-title[b-eroubi6ky0] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--m-text);
}

.section-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-primary);
}

/* ── Unified Bundle Grid ── */
.bundle-grid[b-eroubi6ky0] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  justify-content: stretch;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* Featured card spans 2 columns on wider screens */
.bundle-grid-featured[b-eroubi6ky0] {
  grid-column: span 1;
}

@media (min-width: 640px) {
  .bundle-grid-featured[b-eroubi6ky0] {
    grid-column: span 2;
  }
}

/* ── Guest empty state (unauthenticated, no bundles loaded) ── */
.guest-empty-state[b-eroubi6ky0] {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-primary) 6%, var(--m-card)) 0%,
    color-mix(in srgb, var(--m-accent) 4%, var(--m-card)) 100%);
  border: 1px dashed color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
  box-shadow: var(--m-shadow-sm);
}

.guest-empty-icon[b-eroubi6ky0] {
  font-size: 3rem;
  color: var(--m-primary);
  opacity: 0.6;
  display: block;
  margin-bottom: 0.75rem;
}

.guest-empty-title[b-eroubi6ky0] {
  font-family: var(--m-font-display, 'Baloo 2', cursive);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--m-text);
  margin-bottom: 0.35rem;
}

.guest-empty-text[b-eroubi6ky0] {
  font-size: 0.9rem;
  color: var(--m-text-2);
  max-width: 380px;
  margin: 0 auto 1.25rem;
  line-height: 1.5;
}

.guest-empty-actions[b-eroubi6ky0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.guest-empty-signup[b-eroubi6ky0] {
  font-size: 0.85rem;
  color: var(--m-primary);
  text-decoration: none;
  font-weight: 500;
}

.guest-empty-signup:hover[b-eroubi6ky0] {
  text-decoration: underline;
}

/* Bundle skeleton loading grid */
.bundle-skeleton-grid[b-eroubi6ky0] {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.bundle-skeleton-featured[b-eroubi6ky0] {
  height: 220px;
  border-radius: 16px;
}

.bundle-skeleton-card[b-eroubi6ky0] {
  display: flex;
  gap: 1rem;
  border-radius: 12px;
  overflow: hidden;
}

.bundle-skeleton-img[b-eroubi6ky0] {
  width: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  min-height: 90px;
}

.bundle-skeleton-body[b-eroubi6ky0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.bundle-skeleton-line[b-eroubi6ky0] {
  height: 14px;
  border-radius: 6px;
}

/* Shared skeleton shimmer animation */
@keyframes skeleton-shimmer-b-eroubi6ky0 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-pulse[b-eroubi6ky0] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--m-surface-elevated) 80%, transparent) 25%,
    color-mix(in srgb, var(--m-surface-elevated) 50%, transparent) 50%,
    color-mix(in srgb, var(--m-surface-elevated) 80%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer-b-eroubi6ky0 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-pulse[b-eroubi6ky0] {
    animation: none;
  }
}

/* Welcome Header */
.welcome-header[b-eroubi6ky0] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-primary) 5%, transparent) 0%,
    color-mix(in srgb, var(--m-secondary) 3%, transparent) 100%
  );
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.avatar-placeholder[b-eroubi6ky0] {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* Dark mode — explicit data-theme attribute (app uses JS toggle, not prefers-color-scheme) */
html[data-theme="dark"] .active-adventures-header[b-eroubi6ky0] {
  background: color-mix(in srgb, var(--m-card) 88%, transparent);
  border-color: color-mix(in srgb, var(--m-border) 28%, transparent);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--m-bg) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--m-surface) 14%, transparent);
}

html[data-theme="dark"] .active-adventures-title[b-eroubi6ky0] {
  color: var(--m-text);
}

html[data-theme="dark"] .active-adventures-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-text-2);
}

html[data-theme="dark"] .active-adventures-toggle .form-check-input[b-eroubi6ky0] {
  background-color: var(--m-bg);
  border-color: var(--m-secondary);
}

html[data-theme="dark"] .active-adventures-toggle .form-check-label[b-eroubi6ky0] {
  color: var(--m-text);
}

html[data-theme="dark"] .section-title[b-eroubi6ky0] {
  color: var(--m-text);
}

html[data-theme="dark"] .section-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-text-2);
}

html[data-theme="dark"] .welcome-header[b-eroubi6ky0] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-secondary) 10%, transparent) 0%,
    color-mix(in srgb, var(--m-primary) 5%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-secondary) 20%, transparent);
}

html[data-theme="dark"] .avatar-placeholder[b-eroubi6ky0] {
  border-color: color-mix(in srgb, var(--m-secondary) 40%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--m-bg) 55%, transparent);
}

html[data-theme="dark"] .explore-header[b-eroubi6ky0],
html[data-theme="dark"] .explore-cta[b-eroubi6ky0],
html[data-theme="dark"] .guest-empty-state[b-eroubi6ky0] {
  box-shadow: var(--m-shadow-md),
    0 0 22px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

/* Light mode explicit overrides */
:is(html[data-theme="light"], html[data-theme="bright"]) .active-adventures-header[b-eroubi6ky0] {
  background: color-mix(in srgb, var(--m-card) 92%, transparent);
  border-color: color-mix(in srgb, var(--m-border) 22%, transparent);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--m-text) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--m-surface) 34%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .active-adventures-title[b-eroubi6ky0] {
  color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .active-adventures-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .active-adventures-toggle .form-check-input[b-eroubi6ky0] {
  background-color: var(--m-text);
  border-color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .active-adventures-toggle .form-check-label[b-eroubi6ky0] {
  color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-title[b-eroubi6ky0] {
  color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-title .material-symbols-outlined[b-eroubi6ky0] {
  color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .welcome-header[b-eroubi6ky0] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-primary) 5%, transparent) 0%,
    color-mix(in srgb, var(--m-secondary) 3%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .avatar-placeholder[b-eroubi6ky0] {
  border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* Responsive adjustments */
@media (max-width: 1232px) {
  #adventures[b-eroubi6ky0] {
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  .active-adventures-header[b-eroubi6ky0] {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .section-header[b-eroubi6ky0] {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Easter Egg: Hidden Mystical Glyphs ──
   A faint rune SVG drifts in the background of the adventures area.
   It appears for only a brief moment during a long (90s) animation cycle,
   making it an occasional, almost-subliminal surprise. */

.adventures-fade-container[b-eroubi6ky0]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 140px;
  height: 140px;
  /* A simple elder-futhark-inspired rune (Algiz/protection) rendered as inline SVG data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%235b3cc4' stroke-width='1.5' stroke-linecap='round' opacity='1'%3E%3Cpath d='M50 90 L50 20 M50 35 L30 15 M50 35 L70 15 M50 50 L35 35 M50 50 L65 35 M42 85 L58 85'/%3E%3Ccircle cx='50' cy='12' r='4' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 10%;
  right: 8%;
  opacity: 0;
  animation: glyph-apparition-b-eroubi6ky0 90s ease-in-out infinite 15s;
}

/* Dark theme — use teal stroke for contrast against dark backgrounds */
html[data-theme="dark"] .adventures-fade-container[b-eroubi6ky0]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%234ed7c8' stroke-width='1.5' stroke-linecap='round' opacity='1'%3E%3Cpath d='M50 90 L50 20 M50 35 L30 15 M50 35 L70 15 M50 50 L35 35 M50 50 L65 35 M42 85 L58 85'/%3E%3Ccircle cx='50' cy='12' r='4' stroke-width='1'/%3E%3C/svg%3E");
}

/* The glyph fades in very slowly, stays briefly at a whisper-thin opacity,
   then fades back out. Most of the cycle it's invisible. */
@keyframes glyph-apparition-b-eroubi6ky0 {
  0%, 85%, 100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 0.04;
    transform: translateY(-6px) scale(1.02);
  }
  95% {
    opacity: 0.05;
    transform: translateY(-10px) scale(1.03);
  }
}

/* Reduced motion: hide entirely */
@media (prefers-reduced-motion: reduce) {
  .adventures-fade-container[b-eroubi6ky0]::after {
    display: none !important;
  }
}
/* /Components/AiInviteBanner.razor.rz.scp.css */
/* AI Invite Banner — bottom-centre floating notification */

@@keyframes banner-slide-up {
    from[b-sqkb2iff3y] { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.96); }
    to[b-sqkb2iff3y]   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
}

@@keyframes banner-slide-down {
    from[b-sqkb2iff3y] { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
    to[b-sqkb2iff3y]   { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.97); }
}

@@keyframes glow-pulse {
    0%[b-sqkb2iff3y], 100%[b-sqkb2iff3y] { opacity: 0.5; transform: scale(1); }
    50%[b-sqkb2iff3y]       { opacity: 0.9; transform: scale(1.05); }
}

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

.ai-invite-banner[b-sqkb2iff3y] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--m-surface-elevated) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    border-radius: 16px;
    padding: 0.875rem 1.125rem;
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--m-primary) 20%, transparent),
        0 2px 8px color-mix(in srgb, var(--m-bg) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 10%, transparent);
    z-index: 1050;
    max-width: 480px;
    width: calc(100vw - 2rem);
    animation: banner-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.ai-invite-banner.dismissing[b-sqkb2iff3y] {
    animation: banner-slide-down 0.28s ease-in both;
    pointer-events: none;
}

html[data-theme="dark"] .ai-invite-banner[b-sqkb2iff3y] {
    background: color-mix(in srgb, var(--m-surface-elevated) 85%, transparent);
    border-color: color-mix(in srgb, var(--m-secondary) 40%, transparent);
    box-shadow:
        0 8px 40px color-mix(in srgb, var(--m-secondary) 25%, transparent),
        0 2px 8px color-mix(in srgb, var(--m-bg) 40%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 6%, transparent);
}

/* Ambient glow behind the banner */
.banner-glow[b-sqkb2iff3y] {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 15%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 10%, transparent) 100%);
    z-index: 0;
    animation: glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

html[data-theme="dark"] .banner-glow[b-sqkb2iff3y] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-secondary) 18%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
}

.banner-content[b-sqkb2iff3y] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

/* Icon */
.banner-icon-wrap[b-sqkb2iff3y] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 20%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 15%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: icon-float 3s ease-in-out infinite;
}

html[data-theme="dark"] .banner-icon-wrap[b-sqkb2iff3y] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-secondary) 25%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 18%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
}

.banner-icon[b-sqkb2iff3y] {
    font-size: 1.25rem;
    color: var(--m-primary);
}

html[data-theme="dark"] .banner-icon[b-sqkb2iff3y] {
    color: var(--m-secondary);
}

/* Text */
.banner-text[b-sqkb2iff3y] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.banner-headline[b-sqkb2iff3y] {
    color: var(--m-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.banner-sub[b-sqkb2iff3y] {
    color: var(--m-text-2);
    font-size: 0.8rem;
    margin-top: 1px;
}

/* Actions */
.banner-actions[b-sqkb2iff3y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.banner-btn-primary[b-sqkb2iff3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)) 100%);
    color: var(--m-on-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.banner-btn-primary .material-symbols-outlined[b-sqkb2iff3y] {
    font-size: 1rem;
}

.banner-btn-primary:hover[b-sqkb2iff3y] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.banner-btn-primary:active[b-sqkb2iff3y] {
    transform: translateY(0);
    filter: brightness(0.95);
}

.banner-btn-dismiss[b-sqkb2iff3y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-border) 70%, transparent);
    background: transparent;
    color: var(--m-text-2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.banner-btn-dismiss .material-symbols-outlined[b-sqkb2iff3y] {
    font-size: 1rem;
}

.banner-btn-dismiss:hover[b-sqkb2iff3y] {
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
    color: var(--m-text);
}

/* Mobile */
@media (max-width: 576px) {
    .ai-invite-banner[b-sqkb2iff3y] {
        bottom: 5.5rem;
        padding: 0.75rem 1rem;
    }

    .banner-text[b-sqkb2iff3y] {
        flex-basis: 100%;
        order: 2;
    }

    .banner-icon-wrap[b-sqkb2iff3y] {
        order: 1;
    }

    .banner-actions[b-sqkb2iff3y] {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-invite-banner[b-sqkb2iff3y] {
        animation: none;
        transform: translateX(-50%);
    }

    .ai-invite-banner.dismissing[b-sqkb2iff3y] {
        animation: none;
        opacity: 0;
    }

    .banner-glow[b-sqkb2iff3y],
    .banner-icon-wrap[b-sqkb2iff3y] {
        animation: none;
    }
}
/* /Components/AiNarratorPanel.razor.rz.scp.css */
/* AI Narrator Panel — floating magical presence, bottom-right */

@keyframes narrator-panel-enter-b-12iilspezr {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

@keyframes narrator-fade-in-b-12iilspezr {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes thinking-bounce-b-12iilspezr {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
    40%           { transform: translateY(-6px); opacity: 1; }
}

@keyframes narrator-idle-float-b-12iilspezr {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.ai-narrator-panel[b-12iilspezr] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 310px;
    background: color-mix(in srgb, var(--m-surface-elevated) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
    border-radius: 12px;
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--m-text) 12%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-primary) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    z-index: 950;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    animation: narrator-panel-enter-b-12iilspezr 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .ai-narrator-panel[b-12iilspezr] {
    background: color-mix(in srgb, var(--m-surface-elevated) 88%, transparent);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--m-text) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-secondary) 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 5%, transparent);
}

.ai-narrator-panel.collapsed[b-12iilspezr] {
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

/* ── Header ── */
.panel-header[b-12iilspezr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    border: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 8%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 4%, transparent) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--m-primary) 12%, transparent);
    user-select: none;
    transition: background 0.2s ease;
}

.ai-narrator-panel.collapsed .panel-header[b-12iilspezr] {
    width: 56px;
    height: 56px;
    justify-content: center;
    padding: 0;
    border-bottom: none;
}

.ai-narrator-panel.collapsed .panel-title[b-12iilspezr],
.ai-narrator-panel.collapsed .mute-btn[b-12iilspezr],
.ai-narrator-panel.collapsed .panel-header > .material-symbols-outlined[b-12iilspezr] {
    display: none;
}

.narrator-avatar[b-12iilspezr] {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--m-on-primary) 50%, transparent), transparent 26%),
        linear-gradient(135deg, var(--m-teal), var(--m-primary));
    border: 2px solid color-mix(in srgb, var(--m-accent) 54%, var(--m-border));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--m-primary) 18%, transparent);
    animation: narrator-idle-float-b-12iilspezr 3.2s var(--m-ease-smooth) infinite;
}

.narrator-avatar-face[b-12iilspezr] {
    color: var(--m-on-primary);
    font-weight: 900;
    line-height: 1;
}

.panel-header:hover[b-12iilspezr] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 6%, transparent) 100%);
}

html[data-theme="dark"] .panel-header[b-12iilspezr] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-secondary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 6%, transparent) 100%);
    border-bottom-color: color-mix(in srgb, var(--m-secondary) 18%, transparent);
}

/* Main wizard icon */
.narrator-icon[b-12iilspezr] {
    font-size: 1.1rem;
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[data-theme="dark"] .narrator-icon[b-12iilspezr] {
    color: var(--m-secondary);
    background: color-mix(in srgb, var(--m-secondary) 18%, transparent);
}

.panel-title[b-12iilspezr] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--m-text);
    flex: 1;
}

.narrator-chevron[b-12iilspezr] {
    font-size: 1rem;
    color: var(--m-text-2);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.ai-narrator-panel.expanded .narrator-chevron[b-12iilspezr] {
    transform: rotate(0deg);
}

.ai-narrator-panel.collapsed .narrator-chevron[b-12iilspezr] {
    transform: rotate(0deg);
}

/* ── Mute button ── */
.btn-icon[b-12iilspezr] {
    background: none;
    border: none;
    color: var(--m-text-2);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.8rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.btn-icon:hover[b-12iilspezr] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
}

.btn-icon .material-symbols-outlined[b-12iilspezr] {
    font-size: 1rem;
}

.mute-btn[b-12iilspezr] {
    margin-right: 0.125rem;
}

/* ── Panel body ── */
.panel-body[b-12iilspezr] {
    padding: 0.875rem 1rem;
    min-height: 60px;
}

.ai-narrator-panel.collapsed .panel-header[b-12iilspezr] {
    border-bottom: none;
}

/* ── Commentary text ── */
.narrator-commentary[b-12iilspezr] {
    font-size: 0.875rem;
    color: var(--m-text);
    line-height: 1.55;
    margin: 0;
    animation: narrator-fade-in-b-12iilspezr 0.35s ease both;
}

/* ── Empty state ── */
.narrator-empty[b-12iilspezr] {
    font-size: 0.86rem;
    color: var(--m-text);
    margin: 0;
    font-style: normal;
}

/* ── AI thinking dots ── */
.narrator-thinking[b-12iilspezr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.5rem 0;
}

.thinking-dot[b-12iilspezr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-primary);
    animation: thinking-bounce-b-12iilspezr 1.2s ease-in-out infinite;
}

html[data-theme="dark"] .thinking-dot[b-12iilspezr] {
    background: var(--m-secondary);
}

.thinking-dot:nth-child(1)[b-12iilspezr] { animation-delay: 0s; }
.thinking-dot:nth-child(2)[b-12iilspezr] { animation-delay: 0.18s; }
.thinking-dot:nth-child(3)[b-12iilspezr] { animation-delay: 0.36s; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .ai-narrator-panel[b-12iilspezr] {
        bottom: 1rem;
        right: 1rem;
        width: calc(100vw - 2rem);
        max-width: 320px;
    }

    .ai-narrator-panel.collapsed[b-12iilspezr] {
        width: 56px;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ai-narrator-panel[b-12iilspezr] {
        animation: none;
    }
    .narrator-commentary[b-12iilspezr] {
        animation: none;
    }
    .thinking-dot[b-12iilspezr] {
        animation: none;
        opacity: 0.6;
    }
    .narrator-avatar[b-12iilspezr] {
        animation: none;
    }
}
/* /Components/Assignment/AiPlayerTab.razor.rz.scp.css */
/* AI Player Tab — assignment panel tab */

@keyframes ai-tab-enter-b-hlwpexpsxz {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ai-glow-pulse-b-hlwpexpsxz {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}

@keyframes status-dot-pulse-b-hlwpexpsxz {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-success) 50%, transparent); }
    50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--m-success) 0%, transparent); }
}

.ai-player-tab[b-hlwpexpsxz] {
    animation: ai-tab-enter-b-hlwpexpsxz 0.3s ease both;
}

/* ── Hero row ── */
.ai-player-hero[b-hlwpexpsxz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 6%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 15%, transparent);
    border-radius: 14px;
    margin-bottom: 1rem;
}

html[data-theme="dark"] .ai-player-hero[b-hlwpexpsxz] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-secondary) 10%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 6%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 20%, transparent);
}

/* ── Avatar ── */
.ai-avatar[b-hlwpexpsxz] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 20%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 15%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[data-theme="dark"] .ai-avatar[b-hlwpexpsxz] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-secondary) 25%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 18%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
}

.ai-avatar-glow[b-hlwpexpsxz] {
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--m-primary), var(--m-accent));
    z-index: 0;
    opacity: 0.25;
    animation: ai-glow-pulse-b-hlwpexpsxz 2.5s ease-in-out infinite;
}

html[data-theme="dark"] .ai-avatar-glow[b-hlwpexpsxz] {
    background: linear-gradient(135deg, var(--m-secondary), var(--m-primary));
    opacity: 0.35;
}

.ai-avatar-icon[b-hlwpexpsxz] {
    font-size: 1.6rem;
    color: var(--m-primary);
    position: relative;
    z-index: 1;
}

html[data-theme="dark"] .ai-avatar-icon[b-hlwpexpsxz] {
    color: var(--m-secondary);
}

/* Status dot — green "online" indicator */
.ai-status-dot[b-hlwpexpsxz] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--m-success);
    border: 2px solid var(--m-surface);
    z-index: 2;
    animation: status-dot-pulse-b-hlwpexpsxz 2s ease-in-out infinite;
}

/* ── Info text ── */
.ai-player-info[b-hlwpexpsxz] {
    flex: 1;
    min-width: 0;
}

.ai-player-name[b-hlwpexpsxz] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 0.25rem;
}

.ai-player-desc[b-hlwpexpsxz] {
    font-size: 0.8rem;
    color: var(--m-text-2);
    margin: 0;
    line-height: 1.4;
}

/* ── Feature list ── */
.ai-feature-list[b-hlwpexpsxz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-feature-item[b-hlwpexpsxz] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-surface-elevated) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
    transition: background 0.15s ease;
}

.ai-feature-item:hover[b-hlwpexpsxz] {
    background: color-mix(in srgb, var(--m-surface-elevated) 90%, transparent);
}

.ai-feature-icon[b-hlwpexpsxz] {
    font-size: 1rem;
    color: var(--m-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

html[data-theme="dark"] .ai-feature-icon[b-hlwpexpsxz] {
    color: var(--m-secondary);
}

.ai-feature-text[b-hlwpexpsxz] {
    font-size: 0.8rem;
    color: var(--m-text-2);
    line-height: 1.4;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ai-player-tab[b-hlwpexpsxz],
    .ai-avatar-glow[b-hlwpexpsxz],
    .ai-status-dot[b-hlwpexpsxz] {
        animation: none;
    }
}
/* /Components/AttestationScroll.razor.rz.scp.css */
/* AttestationScroll — parchment scroll metadata badge */

.m-attestation-scroll[b-x3r01o0f9g] {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    position: relative;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--m-surface) 95%, var(--m-accent)),
        color-mix(in srgb, var(--m-surface) 85%, var(--m-accent))
    );
    border-radius: 4px;
    box-shadow: 1px 2px 4px color-mix(in srgb, var(--m-text) 10%, transparent);
    margin: 4px;
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    font-family: 'Cinzel', 'Playfair Display', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--m-text);
    transition: all 0.2s ease;
}

/* Leather end caps */
.m-attestation-scroll[b-x3r01o0f9g]::before,
.m-attestation-scroll[b-x3r01o0f9g]::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 110%;
    background: color-mix(in srgb, var(--m-accent) 60%, #5a3e1b);
    left: -4px;
    top: -5%;
    border-radius: 4px;
    box-shadow: 2px 2px 5px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.m-attestation-scroll[b-x3r01o0f9g]::after {
    left: auto;
    right: -4px;
}

.m-scroll-content[b-x3r01o0f9g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 1;
}

.m-scroll-icon[b-x3r01o0f9g] {
    font-size: 0.9rem;
}

.m-scroll-icon-legacy[b-x3r01o0f9g] {
    font-size: 0.85rem;
}

/* Dark Mode — Obsidian variant */
html[data-theme="dark"] .m-attestation-scroll[b-x3r01o0f9g] {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--m-primary) 15%, var(--m-bg)),
        color-mix(in srgb, var(--m-primary) 8%, var(--m-bg))
    );
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-text);
}

html[data-theme="dark"] .m-attestation-scroll[b-x3r01o0f9g]::before,
html[data-theme="dark"] .m-attestation-scroll[b-x3r01o0f9g]::after {
    background: color-mix(in srgb, var(--m-primary) 50%, #2a1a5e);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

/* Success variant */
.m-attestation-scroll.m-success[b-x3r01o0f9g] {
    border-color: color-mix(in srgb, var(--m-success, #22c55e) 40%, transparent);
}

html[data-theme="dark"] .m-attestation-scroll.m-success[b-x3r01o0f9g] {
    border-color: color-mix(in srgb, var(--m-teal) 40%, transparent);
    color: var(--m-teal);
}
/* /Components/Auth/AuthError.razor.rz.scp.css */
/* ============================================
   AuthError — scoped styles for the auth error alert
   ============================================ */

/* Always rendered in the DOM (visibility-based) so it pre-reserves space and
   no layout shift occurs when a message appears. The auth-error--hidden modifier
   suppresses visibility and pointer events while keeping the reserved height. */
.auth-error[b-tj6uunrvxe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Pad symmetrically top/bottom so height is predictable: 2 * 0.75rem + 1.25rem line-height ≈ 44px */
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--m-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-error) 20%, transparent);
    border-radius: 12px;
    color: var(--m-error, #dc2626);
    font-size: 0.875rem;
    line-height: 1.4;
    /* Prevent layout shift: reserve a fixed minimum height equivalent to one
       line of error text so adding/removing the message doesn't reflow the card. */
    min-height: 3rem;
    animation: shake-b-tj6uunrvxe 0.5s ease-in-out;
}

.auth-error--hidden[b-tj6uunrvxe] {
    /* Invisible but still occupies its reserved space */
    visibility: hidden;
    pointer-events: none;
    /* No border/background paint when hidden — avoids a phantom border flash */
    background: transparent;
    border-color: transparent;
    /* Suppress the shake animation when the slot is empty */
    animation: none;
}

.auth-error i[b-tj6uunrvxe],
.auth-error .material-symbols-outlined[b-tj6uunrvxe] {
    flex-shrink: 0;
    font-size: 1.125rem;
}

@keyframes shake-b-tj6uunrvxe {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-error[b-tj6uunrvxe] {
        animation: none;
    }
}
/* /Components/Auth/AuthHeader.razor.rz.scp.css */
/* Auth header — shared across SignIn and SignUp */

.auth-header[b-rpulyal3z3] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-logo-link[b-rpulyal3z3] {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.auth-logo[b-rpulyal3z3] {
    width: 56px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 12px;
}

.auth-title[b-rpulyal3z3] {
    font-family: var(--m-font-display, 'Baloo 2', cursive);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 0.25rem;
}

.auth-subtitle[b-rpulyal3z3] {
    font-size: 0.95rem;
    color: var(--m-text-2);
    margin-bottom: 0;
}

/* Quickfact pills */
.auth-quickfacts[b-rpulyal3z3] {
    margin-top: 12px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.auth-quickfacts > span[b-rpulyal3z3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.auth-quickfacts > span .material-symbols-outlined[b-rpulyal3z3] {
    font-size: 0.875rem;
}

/* Light mode — stronger contrast for readability */
:is(html[data-theme="light"], html[data-theme="bright"]) .auth-quickfacts > span[b-rpulyal3z3] {
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-text);
}
/* /Components/Auth/AuthPageLayout.razor.rz.scp.css */
/* ============================================
   AuthPageLayout — scoped styles for the auth page shell
   (.auth-page, .auth-container, .auth-card and their variants)

   Note: html[data-theme] ancestor overrides for .auth-card and .auth-page
   cannot be expressed in Blazor scoped CSS (no parent selector support).
   Those theme variants remain in app.css under the auth section.
   ============================================ */

.auth-page[b-v92oevnea1] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 80% 50% at 15% 10%, color-mix(in srgb, var(--m-primary) 28%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 90%, color-mix(in srgb, var(--m-secondary) 18%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 60% 50%, color-mix(in srgb, var(--m-teal) 8%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--m-bg) 0%, color-mix(in srgb, var(--m-bg) 90%, var(--m-primary)) 100%);
    position: relative;
}

.auth-page[b-v92oevnea1]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235b3cc4' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

.auth-container[b-v92oevnea1] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.auth-card[b-v92oevnea1] {
    position: relative;
    background: var(--m-card);
    border-radius: 24px;
    border: 1px solid var(--m-border);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1),
        0 0 0 1px color-mix(in srgb, var(--m-primary) 5%, transparent);
    padding: 2rem;
    /* Let the outer .auth-page handle overflow scrolling.
       Removing max-height + overflow-y: auto from the card prevents
       the card itself from triggering a scrollbar when error messages
       appear or the magic-link input is focused. */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: auth-card-enter-b-v92oevnea1 0.45s ease-out both;
}

.auth-card:hover[b-v92oevnea1] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.auth-card.loading[b-v92oevnea1] {
    pointer-events: none;
}

@keyframes auth-card-enter-b-v92oevnea1 {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .auth-page[b-v92oevnea1] {
        padding: 0.75rem;
        align-items: flex-start;
        padding-top: 1.5rem;
    }

    .auth-card[b-v92oevnea1] {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .auth-card[b-v92oevnea1] {
        animation: none;
        transition: none;
    }
}
/* /Components/Auth/EntraSignInButton.razor.rz.scp.css */
/* ============================================
   EntraSignInButton — scoped styles for the Entra SSO tab panel
   ============================================ */
/* /Components/Auth/FacebookSignInButton.razor.rz.scp.css */
/* ============================================
   FacebookSignInButton — scoped styles
   ============================================ */

.facebook-signin-btn[b-lg2srs3zb7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.facebook-signin-btn:hover:not(:disabled)[b-lg2srs3zb7] {
    background: color-mix(in srgb, var(--m-border) 40%, var(--m-surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-text) 10%, transparent);
    transform: translateY(-1px);
}

.facebook-signin-btn:active:not(:disabled)[b-lg2srs3zb7] {
    transform: scale(0.98);
}

.facebook-signin-btn:focus-visible[b-lg2srs3zb7] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.facebook-signin-btn:disabled[b-lg2srs3zb7] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .facebook-signin-btn[b-lg2srs3zb7] {
        transition: none;
    }

    .facebook-signin-btn:hover:not(:disabled)[b-lg2srs3zb7] {
        transform: none;
    }
}
/* /Components/Auth/GoogleSignInButton.razor.rz.scp.css */
/* ============================================
   GoogleSignInButton — scoped styles
   ============================================ */

.google-signin-btn[b-i5c2ddel0l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.google-signin-btn:hover:not(:disabled)[b-i5c2ddel0l] {
    background: color-mix(in srgb, var(--m-border) 40%, var(--m-surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-text) 10%, transparent);
    transform: translateY(-1px);
}

.google-signin-btn:active:not(:disabled)[b-i5c2ddel0l] {
    transform: scale(0.98);
}

.google-signin-btn:focus-visible[b-i5c2ddel0l] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.google-signin-btn:disabled[b-i5c2ddel0l] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .google-signin-btn[b-i5c2ddel0l] {
        transition: none;
    }

    .google-signin-btn:hover:not(:disabled)[b-i5c2ddel0l] {
        transform: none;
    }
}
/* /Components/Auth/MagicLinkForm.razor.rz.scp.css */
/* ============================================
   MagicLinkForm — scoped styles for the magic link tab panel
   ============================================ */

/* Display-name input (sign-up only) — sits above the email field. Matches the
   email input's height and Dragon Scale theming so the two fields read as a
   single composed form. */
.magic-displayname-label[b-9xm04vcitz] {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--m-text);
    font-weight: 500;
}

.magic-displayname-input[b-9xm04vcitz] {
    width: 100%;
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    background: var(--m-input-bg, var(--m-surface));
    border: 1px solid var(--m-border);
    border-radius: 0.375rem;
    color: var(--m-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.magic-displayname-input:focus[b-9xm04vcitz],
.magic-displayname-input:focus-visible[b-9xm04vcitz] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

.magic-displayname-input:disabled[b-9xm04vcitz] {
    opacity: 0.6;
    background: var(--m-input-bg, var(--m-surface));
    border-color: var(--m-border);
    color: var(--m-text);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--m-text);
}

.magic-displayname-help[b-9xm04vcitz] {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.85rem;
    color: color-mix(in srgb, var(--m-text) 65%, transparent);
    font-size: 0.8rem;
}

.magic-email-label[b-9xm04vcitz] {
    margin-top: 0.25rem;
}

/* Input + button height lock
   Both the email input and the send-link button must share an identical computed
   height so the input-group border never shifts on focus.
   - height: 46px is the explicit value (matches the button's min-height).
   - box-sizing: border-box ensures padding + border are included in that 46px.
   - outline: none suppresses the browser default outline which adds external space;
     Bootstrap's inset box-shadow provides the visible focus ring instead. */
.input-group .form-control[b-9xm04vcitz] {
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    outline: none;
}

/* Disabled input — override browser UA sheet so the Dragon Scale theme is preserved.
   Keeps the same border/background as the enabled state; only opacity is reduced so
   the field visually recedes without the harsh grey that UA stylesheets apply. */
.input-group .form-control:disabled[b-9xm04vcitz] {
    opacity: 0.6;
    background: var(--m-input-bg, var(--m-surface));
    border-color: var(--m-border);
    color: var(--m-text);
    cursor: not-allowed;
    /* Prevent browser from overriding background on WebKit */
    -webkit-text-fill-color: var(--m-text);
}

/* Send Link button enhancements */
.magic-link-section .btn-outline-primary[b-9xm04vcitz],
.input-group .btn-outline-primary[b-9xm04vcitz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-width: 2px;
    font-weight: 600;
    cursor: pointer;
    height: 46px;
    min-height: 46px;
    transition: all 0.2s ease;
    /* Lock line-height to 1 so the flex container, not line-height, controls
       vertical centring. Without this a custom height can push text off-centre
       when Bootstrap's line-height is inherited instead. */
    line-height: 1;
}

/* Disabled button — matches the input treatment: theme colours preserved, opacity reduced. */
.magic-link-section .btn-outline-primary:disabled[b-9xm04vcitz],
.input-group .btn-outline-primary:disabled[b-9xm04vcitz] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.magic-link-section .btn-outline-primary:hover[b-9xm04vcitz],
.input-group .btn-outline-primary:hover[b-9xm04vcitz] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.magic-link-section .btn-outline-primary:active[b-9xm04vcitz],
.input-group .btn-outline-primary:active[b-9xm04vcitz] {
    transform: scale(0.98);
}

.magic-link-section .btn-outline-primary:focus-visible[b-9xm04vcitz],
.input-group .btn-outline-primary:focus-visible[b-9xm04vcitz] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .magic-link-section .btn-outline-primary:hover[b-9xm04vcitz],
    .input-group .btn-outline-primary:hover[b-9xm04vcitz] {
        transform: none;
    }
}
/* /Components/Auth/PreScreenForm.razor.rz.scp.css */
/* ============================================
   PreScreenForm — scoped styles for the Entra pre-screen flow (ADR-0030)
   Dragon Scale tokens only; mirrors MagicLinkForm heights and spacing so the
   two forms sit interchangeably inside the auth panel without layout shift.
   ============================================ */

.prescreen-form[b-f0njcu6604] {
    width: 100%;
}

.prescreen-label[b-f0njcu6604] {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--m-text);
    font-weight: 500;
}

/* Input + button height lock — matches MagicLinkForm so swapping panels never
   causes a vertical jump. 46px is the canonical auth-form control height. */
.prescreen-form .input-group .form-control[b-f0njcu6604] {
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    outline: none;
    background: var(--m-input-bg, var(--m-surface));
    border: 1px solid var(--m-border);
    color: var(--m-text);
}

.prescreen-form .input-group .form-control:focus[b-f0njcu6604],
.prescreen-form .input-group .form-control:focus-visible[b-f0njcu6604] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

.prescreen-form .input-group .form-control:disabled[b-f0njcu6604] {
    opacity: 0.6;
    background: var(--m-input-bg, var(--m-surface));
    border-color: var(--m-border);
    color: var(--m-text);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--m-text);
}

/* Continue (submit) button — mirrors MagicLinkForm's btn-outline-primary
   geometry so the two forms align visually. */
.prescreen-form .input-group .btn-outline-primary[b-f0njcu6604],
.prescreen-form .prescreen-submit[b-f0njcu6604] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-width: 2px;
    font-weight: 600;
    cursor: pointer;
    height: 46px;
    min-height: 46px;
    line-height: 1;
    transition: all 0.2s ease;
}

.prescreen-form .input-group .btn-outline-primary:disabled[b-f0njcu6604],
.prescreen-form .prescreen-submit:disabled[b-f0njcu6604] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.prescreen-form .input-group .btn-outline-primary:hover:not(:disabled)[b-f0njcu6604],
.prescreen-form .prescreen-submit:hover:not(:disabled)[b-f0njcu6604] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.prescreen-form .input-group .btn-outline-primary:focus-visible[b-f0njcu6604],
.prescreen-form .prescreen-submit:focus-visible[b-f0njcu6604] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.prescreen-help[b-f0njcu6604] {
    display: block;
    margin-top: 0.45rem;
    color: color-mix(in srgb, var(--m-text) 65%, transparent);
    font-size: 0.8rem;
}

.prescreen-error[b-f0njcu6604] {
    margin-top: 0.55rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--m-danger, #c0392b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-danger, #c0392b) 45%, transparent);
    border-radius: 0.375rem;
    color: var(--m-danger, #c0392b);
    font-size: 0.875rem;
}

/* Success state */
.prescreen-success[b-f0njcu6604] {
    text-align: center;
    padding: 0.5rem 0;
}

.prescreen-success-heading[b-f0njcu6604] {
    margin: 0 0 0.5rem 0;
    color: var(--m-text);
    font-size: 1.35rem;
    font-weight: 600;
    /* Hide the default focus outline on the heading when we move focus there;
       a heading is not naturally focusable, so the outline reads as visual noise. */
    outline: none;
}

.prescreen-success-message[b-f0njcu6604] {
    margin: 0 0 1.25rem 0;
    color: color-mix(in srgb, var(--m-text) 80%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
}

.prescreen-continue[b-f0njcu6604] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.55rem 1.5rem;
    font-weight: 600;
    background: var(--m-primary);
    border: 2px solid var(--m-primary);
    color: var(--m-on-primary, #fff);
    transition: all 0.2s ease;
}

.prescreen-continue:hover[b-f0njcu6604] {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.prescreen-continue:focus-visible[b-f0njcu6604] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .prescreen-form .input-group .btn-outline-primary:hover[b-f0njcu6604],
    .prescreen-form .prescreen-submit:hover[b-f0njcu6604],
    .prescreen-continue:hover[b-f0njcu6604] {
        transform: none;
    }
}
/* /Components/AvatarCarousel.razor.rz.scp.css */
/* Avatar Carousel Component Styles */

.avatar-carousel-container[b-c68d1wwara] {
    margin: 1rem 0;
}

.avatar-display[b-c68d1wwara] {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--m-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    width: 100%;
    flex-shrink: 0;
}

/* 16:9 aspect ratio wrapper for the main avatar preview */
.avatar-image-wrapper[b-c68d1wwara] {
    position: relative;
    width: 100%;
    max-width: 520px; /* prevent overgrowing on large screens */
    flex-shrink: 0;
    /* Aspect ratio fallback using padding-bottom hack */
    height: 0;
    padding-bottom: 56.25%; /* 9 / 16 * 100% */
    overflow: hidden;
    background: var(--m-bg-2); /* subtle backdrop for letterboxing */
    border-radius: 0.5rem;
    display: block; /* Ensure it's not flex and doesn't behave weirdly */
}

/* Ensure the CachedMystiraImage container fills the wrapper */
.avatar-image-wrapper[b-c68d1wwara]  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Use modern aspect-ratio where supported to override the padding hack */
@supports (aspect-ratio: 16 / 9) {
    .avatar-image-wrapper[b-c68d1wwara] {
        aspect-ratio: 16 / 9;
        height: auto;
        padding-bottom: 0;
    }

    .avatar-image-wrapper[b-c68d1wwara]  div {
        position: relative;
        width: 100%;
        height: 100%;
    }
}

/* Image lives inside child component (CachedMystiraImage) */
.avatar-image-wrapper[b-c68d1wwara]  .avatar-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill the 16:9 frame while preserving aspect ratio */
    display: block;
}

/* If aspect-ratio is supported, we can let the image be relatively positioned if we want,
   but absolute works fine in both cases if the container has aspect-ratio.
   Actually, with aspect-ratio, we need to ensure the image fills it. */
@supports (aspect-ratio: 16 / 9) {
    .avatar-image-wrapper[b-c68d1wwara]  .avatar-image {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

.avatar-controls[b-c68d1wwara] {
    gap: 1rem;
}

.avatar-counter[b-c68d1wwara] {
    min-width: 80px;
    font-weight: 600;
    color: var(--m-text-2);
}

.avatar-thumbnails[b-c68d1wwara] {
    gap: 0.5rem;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.5rem 0;
}

.avatar-thumbnail[b-c68d1wwara] {
    padding: 4px;
    border-radius: 0.25rem;
    background: var(--m-card);
    border: 2px solid var(--m-border);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.avatar-thumbnail:hover[b-c68d1wwara] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

.avatar-thumbnail.active[b-c68d1wwara] {
    border-color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.thumbnail-image[b-c68d1wwara] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
}

.avatar-thumbnail .btn:disabled[b-c68d1wwara] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark Mode Support */
[data-theme="dark"] .avatar-display[b-c68d1wwara] {
    background: var(--m-bg);
}

[data-theme="dark"] .avatar-counter[b-c68d1wwara] {
    color: var(--m-text-2);
}

[data-theme="dark"] .avatar-thumbnail[b-c68d1wwara] {
    background: var(--m-card);
    border-color: var(--m-border);
}

[data-theme="dark"] .avatar-thumbnail:hover[b-c68d1wwara] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

[data-theme="dark"] .avatar-thumbnail.active[b-c68d1wwara] {
    border-color: var(--m-primary);
    background: var(--m-bg);
}

[data-theme="dark"] .avatar-carousel-container .card[b-c68d1wwara] {
    background: var(--m-card-gradient);
    border-color: var(--m-border);
}

[data-theme="dark"] .avatar-carousel-container .card-title[b-c68d1wwara] {
    color: var(--m-text);
}

[data-theme="dark"] .avatar-carousel-container .alert-warning[b-c68d1wwara] {
    background-color: color-mix(in srgb, var(--m-warning) 15%, transparent);
    border-color: var(--m-warning);
    color: var(--m-warning);
}

/* Light Mode Support */
:is([data-theme="light"], [data-theme="bright"]) .avatar-display[b-c68d1wwara] {
    background: var(--m-bg);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-counter[b-c68d1wwara] {
    color: var(--m-text-2);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-thumbnail[b-c68d1wwara] {
    background: var(--m-card);
    border-color: var(--m-border);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-thumbnail:hover[b-c68d1wwara] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-thumbnail.active[b-c68d1wwara] {
    border-color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-carousel-container .card[b-c68d1wwara] {
    background: var(--m-card);
    border-color: var(--m-border);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-carousel-container .card-title[b-c68d1wwara] {
    color: var(--m-text);
}

:is([data-theme="light"], [data-theme="bright"]) .avatar-carousel-container .alert-warning[b-c68d1wwara] {
    background-color: color-mix(in srgb, var(--m-warning) 10%, transparent);
    border-color: var(--m-warning);
    color: color-mix(in srgb, var(--m-warning) 82%, var(--m-text));
}

.avatar-spinner[b-c68d1wwara] {
    color: var(--m-primary);
}

/* /Components/BottomNotificationStack.razor.rz.scp.css */
/* ── BottomNotificationStack — bottom-center notification anchor ──
   Owns positioning for transient notifications so children can be
   simple in-flow blocks. Children stack top-to-bottom in DOM order;
   the first child sits highest, the last sits closest to the viewport
   bottom edge. */

.bottom-notification-stack[b-x7dgd8ew9u] {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300; /* above page chrome and floating widgets, below modal/toast overlays */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: calc(100vw - 2rem);
    max-width: 560px;
    pointer-events: none; /* gap is click-through */
}

.bottom-notification-stack > *[b-x7dgd8ew9u] {
    pointer-events: auto;
}

@media (max-width: 576px) {
    .bottom-notification-stack[b-x7dgd8ew9u] {
        bottom: 0.75rem;
        width: calc(100vw - 1.25rem);
    }
}
/* /Components/BundleCard.razor.rz.scp.css */
/* Bundle Card Scoped Styles */

.bundle-card-wrapper[b-zvjbeh3ke9] {
    display: flex;
    min-width: 0;
    height: 100%;
}

.bundle-card[b-zvjbeh3ke9] {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--m-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: var(--m-card);
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    animation: bc-card-enter-b-zvjbeh3ke9 0.4s ease-out backwards;
}

@keyframes bc-card-enter-b-zvjbeh3ke9 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bundle-card:hover[b-zvjbeh3ke9] {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-color: var(--m-primary);
}

.bundle-image-container[b-zvjbeh3ke9] {
    position: relative;
    overflow: hidden;
    /* Maintain a consistent visual aspect for bundle images */
    aspect-ratio: 16 / 9;
}

.bundle-image-container[b-zvjbeh3ke9]  .bundle-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bundle-card:hover[b-zvjbeh3ke9]  .bundle-card-image {
    transform: scale(1.05);
}

.bundle-free-badge[b-zvjbeh3ke9] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

/* Tooltip for free badge appears to the left on small cards */
.bundle-free-badge .bundle-pill[data-tooltip][b-zvjbeh3ke9]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.bundle-free-badge .bundle-pill[data-tooltip]:hover[b-zvjbeh3ke9]::after {
    transform: translateX(0) translateY(0);
}

.bundle-free-badge .bundle-pill[data-tooltip][b-zvjbeh3ke9]::before {
    left: auto;
    right: 20px;
    transform: translateX(0) translateY(4px);
}

.bundle-free-badge .bundle-pill[data-tooltip]:hover[b-zvjbeh3ke9]::before {
    transform: translateX(0) translateY(0);
}

.card-body[b-zvjbeh3ke9] {
    padding: 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.card-title[b-zvjbeh3ke9] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--m-text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.card-text[b-zvjbeh3ke9] {
    color: var(--m-text-2);
    line-height: 1.5;
    margin-bottom: 12px;
    /* Clamp description to 3 lines so cards stay equal height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bundle-progress[b-zvjbeh3ke9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    margin-bottom: 0.25rem;
}

.bundle-progress[b-zvjbeh3ke9] {
    border-radius: 4px;
    overflow: hidden;
}

.bundle-progress-track[b-zvjbeh3ke9] {
    grid-column: 1;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--m-accent), var(--m-teal));
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-accent) 28%, transparent);
    transition: width 0.6s ease;
}

.bundle-progress[b-zvjbeh3ke9]::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-text) 12%, transparent);
}

.bundle-progress-track[b-zvjbeh3ke9] {
    grid-row: 1;
    z-index: 1;
}

.bundle-progress-label[b-zvjbeh3ke9] {
    color: var(--m-text);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Bundle Pills Container */
.bundle-pills[b-zvjbeh3ke9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Base Bundle Pill Styles */
.bundle-pill[b-zvjbeh3ke9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
}

/* Custom Tooltip Styles */
.bundle-pill[data-tooltip][b-zvjbeh3ke9] {
    cursor: help;
}

.bundle-pill[data-tooltip][b-zvjbeh3ke9]::before,
.bundle-pill[data-tooltip][b-zvjbeh3ke9]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Tooltip text container */
.bundle-pill[data-tooltip][b-zvjbeh3ke9]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
    color: var(--m-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--m-bg) 35%, transparent),
        0 4px 12px color-mix(in srgb, var(--m-bg) 24%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-border) 80%, transparent);
    max-width: 250px;
    white-space: normal;
    text-align: center;
}

/* Tooltip arrow */
.bundle-pill[data-tooltip][b-zvjbeh3ke9]::before {
    content: '';
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 8px solid transparent;
    border-top-color: var(--m-surface-elevated);
    border-bottom: 0;
}

/* Show tooltip on hover */
.bundle-pill[data-tooltip]:hover[b-zvjbeh3ke9]::before,
.bundle-pill[data-tooltip]:hover[b-zvjbeh3ke9]::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip animation keyframes */
@keyframes tooltipFadeIn-b-zvjbeh3ke9 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.bundle-pill .material-symbols-outlined[b-zvjbeh3ke9] {
    font-size: 0.85rem;
}

/* Adventures Pill */
.pill-adventures[b-zvjbeh3ke9] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-primary);
}

.pill-adventures:hover[b-zvjbeh3ke9] {
    background: color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    transform: translateY(-1px);
}

/* Completed Pill */
.pill-completed[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 12%, transparent) 0%, color-mix(in srgb, var(--m-success) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-success) 25%, transparent);
    color: var(--m-success);
}

.pill-completed:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 20%, transparent) 0%, color-mix(in srgb, var(--m-success) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 40%, transparent);
    transform: translateY(-1px);
}

/* Pending Pill */
.pill-pending[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-disabled) 12%, transparent) 0%, color-mix(in srgb, var(--m-text-disabled) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-text-disabled) 25%, transparent);
    color: var(--m-text-disabled);
}

.pill-pending:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-disabled) 20%, transparent) 0%, color-mix(in srgb, var(--m-text-disabled) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-disabled) 40%, transparent);
    transform: translateY(-1px);
}

/* Age Group Pill */
.pill-age[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 12%, transparent) 0%, color-mix(in srgb, var(--m-info) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-info) 25%, transparent);
    color: var(--m-info);
}

.pill-age:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 20%, transparent) 0%, color-mix(in srgb, var(--m-info) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 40%, transparent);
    transform: translateY(-1px);
}

/* Free Pill */
.pill-free[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 95%, transparent) 0%, color-mix(in srgb, var(--m-success) 95%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 30%, transparent);
    color: var(--m-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-success) 40%, transparent);
}

.pill-free:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 100%, transparent) 0%, color-mix(in srgb, var(--m-success) 100%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-on-primary) 50%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-success) 50%, transparent);
}

/* Card Footer */
.card-footer[b-zvjbeh3ke9] {
    background: color-mix(in srgb, var(--m-surface) 90%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--m-primary) 10%, transparent);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
}

.explore-link[b-zvjbeh3ke9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-on-primary);
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 82%, var(--m-accent)));
    border-radius: 999px;
    padding: 0.48rem 0.8rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 22%, transparent);
    transition: all 0.2s ease;
}

.explore-link .material-symbols-outlined[b-zvjbeh3ke9] {
    transition: transform 0.2s ease;
}

.bundle-card:hover .explore-link .material-symbols-outlined[b-zvjbeh3ke9] {
    transform: translateX(4px);
}

.bundle-card:hover .explore-link[b-zvjbeh3ke9] {
    color: var(--m-on-primary);
    transform: translateY(-1px);
}

/* Accessibility */
.bundle-card:focus-visible[b-zvjbeh3ke9] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .card-body[b-zvjbeh3ke9] {
        padding: 12px;
    }

    .card-title[b-zvjbeh3ke9] {
        font-size: 1rem;
    }

    .card-text[b-zvjbeh3ke9] {
        font-size: 0.875rem;
    }

    /* Hide tooltips on touch devices - they work poorly with touch */
    .bundle-pill[data-tooltip][b-zvjbeh3ke9]::before,
    .bundle-pill[data-tooltip][b-zvjbeh3ke9]::after {
        display: none;
    }

    /* Adjust pill sizing for mobile */
    .bundle-pill[b-zvjbeh3ke9] {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .bundle-pill .material-symbols-outlined[b-zvjbeh3ke9] {
        font-size: 0.75rem;
    }
}

/* Dark mode support */
[data-theme="dark"] .bundle-card[b-zvjbeh3ke9] {
    background: var(--m-bg);
    border-color: var(--m-surface-elevated);
}

[data-theme="dark"] .bundle-card:hover[b-zvjbeh3ke9] {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-secondary) 20%, transparent);
    border-color: var(--m-secondary);
}

[data-theme="dark"] .card-title[b-zvjbeh3ke9] {
    color: var(--m-text);
}

[data-theme="dark"] .card-text[b-zvjbeh3ke9] {
    color: var(--m-text-2);
}

[data-theme="dark"] .bundle-progress[b-zvjbeh3ke9]::before {
    background-color: var(--m-bg);
}

[data-theme="dark"] .card-footer[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 14%, var(--m-bg)) 0%, var(--m-bg) 100%);
    border-top-color: color-mix(in srgb, var(--m-secondary) 20%, transparent);
}

/* Dark mode pill styles */
[data-theme="dark"] .pill-adventures[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 15%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    color: var(--m-secondary);
}

[data-theme="dark"] .pill-adventures:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 25%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 50%, transparent);
}

[data-theme="dark"] .pill-completed[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 15%, transparent) 0%, color-mix(in srgb, var(--m-success) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 30%, transparent);
    color: var(--m-success);
}

[data-theme="dark"] .pill-completed:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 25%, transparent) 0%, color-mix(in srgb, var(--m-success) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 50%, transparent);
}

[data-theme="dark"] .pill-pending[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-2) 15%, transparent) 0%, color-mix(in srgb, var(--m-text-2) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-2) 30%, transparent);
    color: var(--m-text-2);
}

[data-theme="dark"] .pill-pending:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-2) 25%, transparent) 0%, color-mix(in srgb, var(--m-text-2) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-2) 50%, transparent);
}

[data-theme="dark"] .pill-age[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 15%, transparent) 0%, color-mix(in srgb, var(--m-info) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 30%, transparent);
    color: var(--m-info);
}

[data-theme="dark"] .pill-age:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 25%, transparent) 0%, color-mix(in srgb, var(--m-info) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 50%, transparent);
}

[data-theme="dark"] .explore-link[b-zvjbeh3ke9] {
    color: var(--m-on-primary);
}

[data-theme="dark"] .bundle-card:hover .explore-link[b-zvjbeh3ke9] {
    color: var(--m-on-primary);
}

/* Dark mode tooltip styles */
[data-theme="dark"] .bundle-pill[data-tooltip][b-zvjbeh3ke9]::after {
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
    color: var(--m-text);
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--m-bg) 40%, transparent),
        0 4px 12px color-mix(in srgb, var(--m-bg) 30%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-secondary) 30%, transparent);
}

[data-theme="dark"] .bundle-pill[data-tooltip][b-zvjbeh3ke9]::before {
    border-top-color: var(--m-surface-elevated);
}

/* Dark mode free pill - keep it vibrant for visibility */
[data-theme="dark"] .pill-free[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 90%, transparent) 0%, color-mix(in srgb, var(--m-success) 90%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 40%, transparent);
    color: var(--m-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-success) 30%, transparent);
}

[data-theme="dark"] .pill-free:hover[b-zvjbeh3ke9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 100%, transparent) 0%, color-mix(in srgb, var(--m-success) 100%, transparent) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-success) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .bundle-card[b-zvjbeh3ke9] {
        transition: none;
        animation: none;
    }

    .bundle-card:hover[b-zvjbeh3ke9] {
        transform: none;
    }

    .bundle-card:hover[b-zvjbeh3ke9]  .bundle-card-image {
        transform: none;
    }

    .bundle-pill:hover[b-zvjbeh3ke9] {
        transform: none;
    }

    .pill-free:hover[b-zvjbeh3ke9] {
        transform: none;
    }
}
/* /Components/CachedMystiraImage.razor.rz.scp.css */
/* Cached Mystira Image Component Styles */

.cached-image-frame[b-c3p43v3d32] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.cached-image-frame > img[b-c3p43v3d32] {
    display: block;
}

.cached-image-loading[b-c3p43v3d32] {
    opacity: 0;
}

.cached-image-skeleton[b-c3p43v3d32] {
    position: absolute;
    inset: 0;
    min-height: 150px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, transparent);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--m-surface) 78%, transparent),
            color-mix(in srgb, var(--m-primary) 14%, var(--m-surface)),
            color-mix(in srgb, var(--m-surface) 78%, transparent)
        );
    background-size: 220% 100%;
    animation: cached-image-skeleton-sweep-b-c3p43v3d32 1.25s var(--m-ease-smooth) infinite;
    z-index: 1;
}

@keyframes cached-image-skeleton-sweep-b-c3p43v3d32 {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* Placeholder shown when image fails to load or no media ID specified */
.cached-image-placeholder[b-c3p43v3d32] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 10%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 5%, transparent) 100%);
    border: 1px dashed color-mix(in srgb, var(--m-primary) 30%, transparent);
    border-radius: 8px;
    min-height: 150px;
    color: var(--m-text-2);
}

.cached-image-placeholder i[b-c3p43v3d32] {
    opacity: 0.5;
}

/* Dark mode placeholder */
.error-placeholder-icon[b-c3p43v3d32] {
    font-size: 3rem;
}

.empty-placeholder-icon[b-c3p43v3d32] {
    font-size: 2rem;
}

[data-theme="dark"] .cached-image-placeholder[b-c3p43v3d32] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 15%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-text-2);
}

[data-theme="bright"] .cached-image-skeleton[b-c3p43v3d32] {
    animation-duration: 1ms;
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
}

@media (prefers-reduced-motion: reduce) {
    .cached-image-skeleton[b-c3p43v3d32] {
        animation: none;
    }
}
/* /Components/CharacterCard.razor.rz.scp.css */
/* CharacterCard scoped styles */

.character-card[b-dy9c6fhqyt] {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    border-color: color-mix(in srgb, var(--m-primary) 35%, var(--m-border));
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
}

.character-card-body[b-dy9c6fhqyt] {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem;
}

.character-summary[b-dy9c6fhqyt] {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Cosmetic-overlay anchor wrapper. Strategy A (PLAN §6.3) — relative parent so
   the absolute child positions against the avatar, not the card. The wrapper
   matches the avatar's own block flow so the cosmetic floats above it without
   shifting the character-name baseline below. */
.character-avatar-wrap[b-dy9c6fhqyt] {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Top-center anchor. v1 single slot, fixed anchor — admins author cosmetics
   to a 200×200 transparent canvas centered horizontally over the avatar's
   crown. `pointer-events: none` keeps existing avatar click targets working
   (View Full Image button uses the avatar URL, not the overlay). */
.character-cosmetic-overlay[b-dy9c6fhqyt] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    /* Match the avatar's mb-2 visual rhythm — the overlay should not push
       siblings down because it's absolutely positioned, but adding margin: 0
       here defends against any reset bleed-through. */
    margin: 0;
}

.character-card-optional[b-dy9c6fhqyt] {
    opacity: 0.64;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--m-text-2) 42%, var(--m-border));
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
}

.character-card-required-unassigned[b-dy9c6fhqyt] {
    border-color: var(--m-warning-border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-warning) 22%, transparent);
    animation: unassigned-card-pulse-b-dy9c6fhqyt 1.8s var(--m-ease-smooth) infinite;
}

.character-name[b-dy9c6fhqyt] {
    min-height: 2.4em;
    display: grid;
    place-items: center;
    margin-bottom: 0.4rem;
    color: var(--m-text);
    line-height: 1.2;
}

.avatar-fallback-icon[b-dy9c6fhqyt] {
    font-size: 2rem;
}

.assignment-badge[b-dy9c6fhqyt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-character[b-dy9c6fhqyt] {
    color: var(--m-on-primary);
    background: color-mix(in srgb, var(--m-primary) 78%, var(--m-surface));
    border-color: color-mix(in srgb, var(--m-primary) 60%, var(--m-border));
}

.badge-profile[b-dy9c6fhqyt] {
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-teal) 34%, var(--m-border));
}

.badge-empty[b-dy9c6fhqyt] {
    color: var(--m-warning);
    background: var(--m-warning-bg);
    border-color: var(--m-warning-border);
}

.badge-optional[b-dy9c6fhqyt] {
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--m-text-2) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-text-2) 28%, var(--m-border));
}

.media-controls[b-dy9c6fhqyt] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Media controls — unified icon-button pair (Dragon Scale).
   Authored HERE, not in CharacterAssignmentPage.razor.css: the buttons are
   rendered by THIS component, so page-scoped rules never reach them
   (Blazor CSS isolation — see PR #1828 pattern). */
.btn-media[b-dy9c6fhqyt] {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    color: var(--m-primary);
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--m-dur-fast) var(--m-ease-smooth),
        border-color var(--m-dur-fast) var(--m-ease-smooth),
        color var(--m-dur-fast) var(--m-ease-smooth),
        transform var(--m-dur-fast) var(--m-ease-spring);
}

.btn-media .material-symbols-outlined[b-dy9c6fhqyt] {
    font-size: 1.25rem;
    line-height: 1;
}

.btn-media:hover[b-dy9c6fhqyt] {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
    transform: translateY(-1px);
}

.btn-media:active[b-dy9c6fhqyt] {
    transform: translateY(0);
}

.btn-media:focus-visible[b-dy9c6fhqyt] {
    outline: none;
    box-shadow: var(--m-ring);
}

/* Audio "playing" — the ONLY hue shift: escalate to the teal media accent. */
.btn-media-audio.playing[b-dy9c6fhqyt] {
    background: color-mix(in srgb, var(--m-teal) 16%, var(--m-surface));
    border-color: var(--m-teal);
    color: color-mix(in srgb, var(--m-teal) 80%, var(--m-text));
    animation: btn-media-pulse-b-dy9c6fhqyt 1.6s var(--m-ease-smooth) infinite;
}

.btn-media-audio.playing:hover[b-dy9c6fhqyt] {
    background: var(--m-teal);
    color: var(--m-on-primary);
}

@keyframes btn-media-pulse-b-dy9c6fhqyt {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-teal) 35%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--m-teal) 0%, transparent); }
}

/* Dark theme — lift icon to lavender for legibility on deep surface
   (mirrors the existing app.css dark pattern that used --m-secondary).
   Scoped to resting buttons only: under Blazor CSS isolation this ties at the
   same specificity as :hover and .playing, so without :not() it would win on
   source order and shadow the filled-hover and teal-playing escalations. */
[data-theme="dark"] .btn-media:not(:hover):not(.playing)[b-dy9c6fhqyt] {
    color: var(--m-secondary);
    border-color: color-mix(in srgb, var(--m-primary) 45%, transparent);
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
}

[data-theme="dark"] .btn-media:hover[b-dy9c6fhqyt] {
    color: var(--m-on-primary);
}

@media (prefers-reduced-motion: reduce) {
    .btn-media[b-dy9c6fhqyt] {
        transition: none;
    }

    .btn-media:hover[b-dy9c6fhqyt],
    .btn-media:active[b-dy9c6fhqyt] {
        transform: none;
    }

    .btn-media-audio.playing[b-dy9c6fhqyt] {
        animation: none;
    }
}

.assigned-player-zone[b-dy9c6fhqyt] {
    min-height: 126px;
    display: flex;
    align-items: stretch;
    margin-top: auto;
}

.player-assignment[b-dy9c6fhqyt],
.assigned-player-card[b-dy9c6fhqyt] {
    width: 100%;
}

.player-assignment[b-dy9c6fhqyt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
}

.assigned-player-card[b-dy9c6fhqyt] {
    min-height: 112px;
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
}

.assigned-player-row[b-dy9c6fhqyt] {
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.assigned-player-copy[b-dy9c6fhqyt] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.assigned-player-name[b-dy9c6fhqyt] {
    color: var(--m-text);
    font-weight: 800;
    line-height: 1.15;
    /* break-word (NOT anywhere): `anywhere` lets the flex min-content width
       collapse to 1ch, so in the squeezed 2-up mobile card the name stacked
       one letter per line. `break-word` keeps the min-content width at the
       widest WORD, so names read horizontally (word-wise wrap at worst).
       The ≤576px block below adds nowrap + ellipsis to force a single line. */
    overflow-wrap: break-word;
}

.player-avatar[b-dy9c6fhqyt],
.player-avatar-placeholder[b-dy9c6fhqyt] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-primary) 26%, var(--m-border));
    overflow: hidden;
}

.player-avatar[b-dy9c6fhqyt]  img,
.player-avatar[b-dy9c6fhqyt]  .cached-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-avatar-placeholder .material-symbols-outlined[b-dy9c6fhqyt] {
    font-size: 2rem;
}

.badge-profile-action[b-dy9c6fhqyt] {
    width: fit-content;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--m-dur-fast) var(--m-ease-smooth),
        border-color var(--m-dur-fast) var(--m-ease-smooth),
        color var(--m-dur-fast) var(--m-ease-smooth);
}

.badge-profile-action:hover[b-dy9c6fhqyt],
.badge-profile-action:focus-visible[b-dy9c6fhqyt] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-teal) 20%, transparent);
    border-color: var(--m-teal);
}

.btn-remove-player[b-dy9c6fhqyt] {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    color: var(--m-text-2);
    background: transparent;
    opacity: 1;
    transition: color var(--m-dur-fast) var(--m-ease-smooth),
        background var(--m-dur-fast) var(--m-ease-smooth),
        opacity var(--m-dur-fast) var(--m-ease-smooth);
    touch-action: manipulation;
}

.btn-remove-player:hover[b-dy9c6fhqyt],
.btn-remove-player:focus-visible[b-dy9c6fhqyt],
.btn-remove-player.confirming[b-dy9c6fhqyt] {
    color: var(--m-error);
    background: color-mix(in srgb, var(--m-error) 10%, transparent);
}

.btn-remove-player .material-symbols-outlined[b-dy9c6fhqyt] {
    font-size: 1.05rem;
}

.unused-slot-copy[b-dy9c6fhqyt] {
    width: 100%;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: var(--m-text-2);
}

@media (hover: hover) and (pointer: fine) {
    .btn-remove-player[b-dy9c6fhqyt] {
        opacity: 0;
    }

    .character-card:hover .btn-remove-player[b-dy9c6fhqyt],
    .character-card:focus-within .btn-remove-player[b-dy9c6fhqyt] {
        opacity: 1;
    }
}

@keyframes unassigned-card-pulse-b-dy9c6fhqyt {
    0%, 100% {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-warning) 18%, transparent);
    }
    50% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-warning) 32%, transparent);
    }
}

/* ── Mobile compaction (≤576px) ──────────────────────────────────────
   Stakeholder feedback: the cards were too bulky on phones and ate a lot
   of screen space versus other kids' games. Shrink the fixed min-height
   stack, paddings, gaps, and avatars so two 2-up cards consume far less
   vertical space, while keeping interactive tap targets ≥40px (remove,
   assign, media buttons). Desktop (≥576px) is intentionally untouched. */
@media (max-width: 576px) {
    .character-card[b-dy9c6fhqyt],
    .character-card-body[b-dy9c6fhqyt] {
        /* was 370px — let the card collapse toward its (now smaller) content */
        min-height: 270px;
    }

    .character-card-body[b-dy9c6fhqyt] {
        padding: 0.7rem;
        gap: 0.5rem;
    }

    /* Character summary — trim the reserved avatar + name + badge footprint. */
    .character-summary[b-dy9c6fhqyt] {
        min-height: 88px;
    }

    .character-name[b-dy9c6fhqyt] {
        min-height: 2em;
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
    }

    /* Compact character avatar. These rules live HERE (the component that
       renders the avatar) — under Blazor CSS isolation the page-scoped
       `.character-avatar` rules in CharacterAssignmentPage.razor.css never
       reach this component-rendered <img>/placeholder, so the size must be
       set in this file to take effect. The cosmetic-overlay anchor
       (.character-avatar-wrap) scales to the avatar via max-width/height:100%,
       so shrinking the avatar keeps the overlay correctly sized. */
    .character-avatar[b-dy9c6fhqyt],
    .character-avatar-placeholder[b-dy9c6fhqyt] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .character-avatar[b-dy9c6fhqyt] {
        object-fit: cover;
        border: 2px solid var(--m-primary);
    }

    .character-avatar-placeholder[b-dy9c6fhqyt] {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--m-surface);
        border: 2px solid var(--m-primary);
        color: var(--m-text-2);
    }

    .avatar-fallback-icon[b-dy9c6fhqyt] {
        font-size: 1.6rem;
    }

    /* Media controls stay 44px tall — those are tap targets. */

    /* Assigned-player zone + card — collapse the stacked min-heights. */
    .assigned-player-zone[b-dy9c6fhqyt] {
        min-height: 84px;
    }

    .assigned-player-card[b-dy9c6fhqyt] {
        min-height: 64px;
        padding: 0.55rem;
    }

    .assigned-player-row[b-dy9c6fhqyt] {
        min-height: auto;
        gap: 0.45rem;
    }

    .assigned-player-copy[b-dy9c6fhqyt] {
        gap: 0.25rem;
    }

    /* The player avatar is decorative (not a tap target), so it can go small
       to give the name column more room in the squeezed 2-up card. */
    .player-avatar[b-dy9c6fhqyt],
    .player-avatar-placeholder[b-dy9c6fhqyt] {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .player-avatar-placeholder .material-symbols-outlined[b-dy9c6fhqyt] {
        font-size: 1.4rem;
    }

    /* Issue 1 (mobile guard) — guarantee the name renders on ONE horizontal
       line. `min-width: 0` on .assigned-player-copy lets the flex item shrink,
       so ellipsis (rather than a per-letter stack) absorbs any overflow when
       the column is too narrow for the full name. */
    .assigned-player-name[b-dy9c6fhqyt] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Keep the remove button a ≥40px tap target while reclaiming a little
       width for the name column. */
    .btn-remove-player[b-dy9c6fhqyt] {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Keep the compact 2-up grid for wider phones, but drop to one column where
   the assigned row cannot reserve avatar + remove tap target and still leave
   readable name space. This selector intentionally lives in the child component:
   the root Bootstrap .col-6 is emitted by CharacterCard, so page-scoped CSS
   cannot reliably override it under Blazor CSS isolation. */
@media (max-width: 390px) {
    .col-6[b-dy9c6fhqyt] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

.btn-assign-player[b-dy9c6fhqyt] {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px dashed color-mix(in srgb, var(--m-primary) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-primary) 6%, transparent);
    color: var(--m-primary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-assign-player:hover[b-dy9c6fhqyt] {
    border-style: solid;
    border-color: var(--m-primary);
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-text) 30%) 100%);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-assign-player .material-symbols-outlined[b-dy9c6fhqyt] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.btn-assign-player span:not(.material-symbols-outlined)[b-dy9c6fhqyt] {
    display: inline-flex;
    align-items: center;
    min-height: 1.1rem;
}

html[data-theme="dark"] .btn-assign-player[b-dy9c6fhqyt] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-secondary);
}

html[data-theme="dark"] .btn-assign-player:hover[b-dy9c6fhqyt] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
}

@media (prefers-reduced-motion: reduce) {
    .character-card-required-unassigned[b-dy9c6fhqyt] {
        animation: none;
    }

    .btn-assign-player[b-dy9c6fhqyt] {
        transition: none;
    }

    .btn-assign-player:hover[b-dy9c6fhqyt] {
        transform: none;
    }
}
/* /Components/ContentAttribution.razor.rz.scp.css */
/* Content Attribution Component Styles */

.content-attribution[b-o3rkvzrnrt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--m-card);
    border: 1px solid var(--m-border);
}

.content-attribution.loading[b-o3rkvzrnrt] {
    min-height: 80px;
}

/* Loading State */
.attribution-loading[b-o3rkvzrnrt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--m-text-2);
    font-size: 0.875rem;
}

.loading-spinner[b-o3rkvzrnrt] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--m-border);
    border-top-color: var(--m-primary);
    border-radius: 50%;
    animation: spin-b-o3rkvzrnrt 0.8s linear infinite;
}

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

/* Header */
.attribution-header[b-o3rkvzrnrt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.attribution-title[b-o3rkvzrnrt] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--m-text-2);
}

.ip-badge[b-o3rkvzrnrt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--m-success);
    background: color-mix(in srgb, var(--m-success) 10%, transparent);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--m-success) 20%, transparent);
}

.ip-badge svg[b-o3rkvzrnrt] {
    flex-shrink: 0;
}

/* Header - semantic styling */
.attribution-header h4.attribution-title[b-o3rkvzrnrt] {
    margin: 0;
}

/* Credits List */
.credits-list[b-o3rkvzrnrt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.credit-item[b-o3rkvzrnrt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    background: var(--m-bg-2);
    transition: background 0.2s ease;
}

.credit-item:hover[b-o3rkvzrnrt] {
    background: var(--m-bg);
}

.credit-avatar[b-o3rkvzrnrt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary-light) 100%);
    color: var(--m-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credit-info[b-o3rkvzrnrt] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.credit-name[b-o3rkvzrnrt] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--m-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.credit-role[b-o3rkvzrnrt] {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
}

.credit-percentage[b-o3rkvzrnrt] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted, #6b7280);
    padding: 2px 6px;
    background: var(--m-bg);
    border-radius: 4px;
    flex-shrink: 0;
}

/* IP Details */
.ip-details[b-o3rkvzrnrt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-top: 4px;
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 10%, transparent);
    font-size: 0.75rem;
}

.ip-label[b-o3rkvzrnrt] {
    color: var(--muted, #6b7280);
}

.ip-value[b-o3rkvzrnrt] {
    font-family: var(--d-font-mono);
    color: var(--m-primary);
    cursor: help;
}

/* Empty/Error States */
.attribution-empty[b-o3rkvzrnrt],
.attribution-error[b-o3rkvzrnrt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-size: 0.875rem;
    color: var(--muted, #9ca3af);
}

.attribution-error[b-o3rkvzrnrt] {
    color: #ef4444;
}

/* Dark Mode */
[data-theme="dark"] .content-attribution[b-o3rkvzrnrt] {
    background: var(--m-card);
    border-color: var(--m-border);
}

[data-theme="dark"] .credit-item[b-o3rkvzrnrt] {
    background: var(--m-bg-2);
}

[data-theme="dark"] .credit-item:hover[b-o3rkvzrnrt] {
    background: var(--m-bg);
}

[data-theme="dark"] .credit-name[b-o3rkvzrnrt] {
    color: var(--m-text);
}

[data-theme="dark"] .ip-details[b-o3rkvzrnrt] {
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* Responsive */
@media (max-width: 480px) {
    .content-attribution[b-o3rkvzrnrt] {
        padding: 12px;
    }

    .attribution-header[b-o3rkvzrnrt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .credit-item[b-o3rkvzrnrt] {
        padding: 6px;
    }

    .credit-avatar[b-o3rkvzrnrt] {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }
}

/* /Components/CoppaCompliancePill.razor.rz.scp.css */
/* COPPA Compliance Pillbox with Tooltip */

.coppa-pill-container[b-jmbjw2w0d2] {
    position: relative;
    display: inline-block;
}

.coppa-pill[b-jmbjw2w0d2] {
    cursor: help;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.coppa-tooltip[b-jmbjw2w0d2] {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--m-card);
    border-radius: 16px;
    box-shadow: 
        0 20px 60px color-mix(in srgb, var(--m-primary) 15%, transparent),
        0 8px 24px color-mix(in srgb, var(--m-primary) 10%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-primary) 5%, transparent);
    z-index: 1000;
    animation: tooltipFadeIn-b-jmbjw2w0d2 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    overflow: hidden;
}

.coppa-tooltip[b-jmbjw2w0d2]::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--m-card);
}

@keyframes tooltipFadeIn-b-jmbjw2w0d2 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.coppa-tooltip-header[b-jmbjw2w0d2] {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--m-border);
    background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary-light) 50%, var(--m-primary-lighter) 100%);
    color: var(--m-text);
    font-size: 1rem;
    font-weight: 600;
}

.coppa-tooltip-header i[b-jmbjw2w0d2] {
    color: inherit;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--m-primary) 20%, transparent));
}

.coppa-tooltip-content[b-jmbjw2w0d2] {
    padding: 20px 24px;
    background: var(--m-card);
}

.coppa-tooltip-message[b-jmbjw2w0d2] {
    margin: 0 0 12px 0;
    color: var(--m-text-2);
    font-size: 0.875rem;
    line-height: 1.6;
}

.coppa-tooltip-warning[b-jmbjw2w0d2] {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--m-warning) 0%, var(--m-warning-light) 100%);
    border-left: 4px solid var(--m-warning);
    border-radius: 8px;
    color: var(--m-warning-dark);
    font-size: 0.875rem;
    line-height: 1.6;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-warning) 15%, transparent);
}

.coppa-tooltip-warning strong[b-jmbjw2w0d2] {
    color: var(--m-warning-darker);
}

.coppa-tooltip-links[b-jmbjw2w0d2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.coppa-tooltip-link[b-jmbjw2w0d2] {
    display: inline-flex;
    align-items: center;
    color: var(--m-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 2px 0;
}

.coppa-tooltip-link:hover[b-jmbjw2w0d2] {
    color: var(--m-primary-dark);
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    transform: translateX(4px);
}

.coppa-tooltip-link i[b-jmbjw2w0d2] {
    font-size: 0.8rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .coppa-tooltip[b-jmbjw2w0d2] {
        width: calc(100vw - 40px);
        left: 50%;
        transform: translateX(-50%);
    }
    
    .coppa-tooltip[b-jmbjw2w0d2]::before {
        left: 50%;
    }
}

/* /Components/DiceRoller.razor.rz.scp.css */
/* Component styles (consume global CSS vars; provide fallbacks) */

.roll-dice[b-lhevt1y7j2] {
    font-size: 4rem;
    color: var(--m-primary);
    animation: rollAnimation-b-lhevt1y7j2 1s ease-in-out;
}

@keyframes rollAnimation-b-lhevt1y7j2 {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1.1); }
    75% { transform: rotate(270deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

.dice-shell[b-lhevt1y7j2] {
  display: grid;
  gap: 1rem;
  background: var(--m-surface);
  color: var(--m-text);
  border-radius: 1.25rem;
  border: 1px solid var(--m-border);
  padding: 1rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -15px color-mix(in srgb, var(--m-success) 35%, transparent);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  /* Dragon Scale die face gradient */
  --die-grad1: color-mix(in srgb, var(--m-primary) 15%, #ffffff);
  --die-grad2: color-mix(in srgb, var(--m-primary) 40%, #e2d9f3);
}

/* Controls section removed - dice is now clickable */

/* Dice grid */
.dice-area[b-lhevt1y7j2] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.85rem;
  align-items: center;
}

/* Parent supplies perspective & horizontal drift only */
.die[b-lhevt1y7j2] {
  aspect-ratio: 1 / 1;
  perspective: 800px;
  transform: translateX(var(--drift, 0px));
  transition: transform .2s ease;
  will-change: transform;
  position: relative;
}

.die.clickable[b-lhevt1y7j2] {
  cursor: pointer;
}

.die.clickable:hover[b-lhevt1y7j2] {
  transform: translateX(var(--drift, 0px)) scale(1.05);
}

.die.clickable:active[b-lhevt1y7j2] {
  transform: translateX(var(--drift, 0px)) scale(0.98);
}

/* Inner 3D layer rotates in 3D */
.die-3d[b-lhevt1y7j2] {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateZ(var(--tilt, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .3s ease;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.25));
}

/* Subtle thickness illusion */
.die-3d[b-lhevt1y7j2]::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,.20), rgba(0,0,0,.15));
  transform: translateZ(-6px);
  pointer-events: none;
}

/* SVG face */
.die-svg[b-lhevt1y7j2] {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  backface-visibility: hidden;
}

.pip[b-lhevt1y7j2] { fill: var(--m-text); }

.big-num[b-lhevt1y7j2] {
  font: 800 52px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  fill: #111827;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.3);
  stroke-width: 1.5;
}

/* Dark mode number color - keep dark for readability on light die face */
[data-theme="dark"] .big-num[b-lhevt1y7j2] {
  fill: #111827;
  stroke: rgba(255,255,255,0.4);
}

.small-num[b-lhevt1y7j2] {
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  fill: #111827;
}

[data-theme="dark"] .small-num[b-lhevt1y7j2] {
  fill: #111827;
}

/* Golden tube trail effect */
.die[b-lhevt1y7j2]::before,
.die[b-lhevt1y7j2]::after {
  --dice-gold: #ffd700;
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
}

.die[b-lhevt1y7j2]::before {
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.4) 60deg,
    rgba(218, 165, 32, 0.6) 120deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.4) 240deg,
    rgba(218, 165, 32, 0.6) 300deg,
    transparent 360deg
  );
  filter: blur(8px);
}

.die[b-lhevt1y7j2]::after {
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(255, 223, 0, 0.3) 45deg,
    rgba(255, 193, 7, 0.5) 90deg,
    transparent 135deg,
    rgba(255, 223, 0, 0.3) 180deg,
    rgba(255, 193, 7, 0.5) 225deg,
    transparent 270deg,
    rgba(255, 223, 0, 0.3) 315deg,
    transparent 360deg
  );
  filter: blur(12px);
}

/* Animate golden tubes when rolling — infinite to match continuous tumble */
.die.rolling[b-lhevt1y7j2]::before {
  opacity: 1;
  animation: goldenTubeInner-b-lhevt1y7j2 1.1s cubic-bezier(.2,.6,.2,1) infinite;
}

.die.rolling[b-lhevt1y7j2]::after {
  opacity: 1;
  animation: goldenTubeOuter-b-lhevt1y7j2 1.3s cubic-bezier(.2,.6,.2,1) infinite;
}

@keyframes goldenTubeInner-b-lhevt1y7j2 {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(360deg);
  }
  80% {
    opacity: 0.8;
    transform: scale(1) rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) rotate(1080deg);
  }
}

@keyframes goldenTubeOuter-b-lhevt1y7j2 {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(0deg);
  }
  15% {
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3) rotate(-270deg);
  }
  85% {
    opacity: 0.6;
    transform: scale(1.1) rotate(-540deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) rotate(-810deg);
  }
}

/* Rolling: continuous tumble — infinite while IsRolling is true */
.die.rolling .die-3d[b-lhevt1y7j2] {
  animation: tumble3d-b-lhevt1y7j2 0.65s cubic-bezier(.2,.6,.2,1) infinite;
}

@keyframes tumble3d-b-lhevt1y7j2 {
  0%   { transform: rotateZ(var(--tilt,0)) rotateX(0turn)   rotateY(0turn); }
  40%  { transform: rotateZ(calc(var(--tilt,0) + 12deg)) rotateX(.45turn) rotateY(.3turn); }
  70%  { transform: rotateZ(calc(var(--tilt,0) - 6deg)) rotateX(.75turn) rotateY(.65turn); }
  100% { transform: rotateZ(var(--tilt,0)) rotateX(1turn)  rotateY(1turn); }
}

/* Landing: spring settle animation */
.die.landed .die-3d[b-lhevt1y7j2] {
  animation: die-land-b-lhevt1y7j2 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes die-land-b-lhevt1y7j2 {
  0%   { transform: rotateZ(var(--tilt,0)) scale(1.15); }
  60%  { transform: rotateZ(calc(var(--tilt,0) + 3deg)) scale(0.96); }
  80%  { transform: rotateZ(calc(var(--tilt,0) - 1deg)) scale(1.02); }
  100% { transform: rotateZ(var(--tilt,0)) scale(1); }
}

/* Glow burst on landing */
.die.landed[b-lhevt1y7j2]::before {
  opacity: 1;
  animation: land-burst-b-lhevt1y7j2 0.55s ease-out forwards;
}

@keyframes land-burst-b-lhevt1y7j2 {
  0%   { opacity: 0.9; transform: scale(0.8); }
  60%  { opacity: 0.5; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Critical (natural max): gold explosion */
.die.critical .die-3d[b-lhevt1y7j2] {
  animation: die-critical-b-lhevt1y7j2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes die-critical-b-lhevt1y7j2 {
  0%   { transform: rotateZ(var(--tilt,0)) scale(1); filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  30%  { transform: rotateZ(var(--tilt,0)) scale(1.35); filter: drop-shadow(0 0 24px rgba(255,215,0,0.9)); }
  60%  { transform: rotateZ(calc(var(--tilt,0) + 4deg)) scale(1.2); filter: drop-shadow(0 0 16px rgba(255,193,7,0.7)); }
  100% { transform: rotateZ(var(--tilt,0)) scale(1); filter: drop-shadow(0 0 8px rgba(255,215,0,0.4)); }
}

.die.critical[b-lhevt1y7j2]::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.8) 60deg,
    rgba(255, 193, 7, 0.9) 120deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.8) 240deg,
    rgba(218, 165, 32, 0.9) 300deg,
    transparent 360deg
  );
  opacity: 1;
  animation: golden-burst-b-lhevt1y7j2 0.8s ease-out forwards;
}

@keyframes golden-burst-b-lhevt1y7j2 {
  0%   { opacity: 0; transform: scale(0.6) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.6) rotate(180deg); }
  100% { opacity: 0; transform: scale(2) rotate(360deg); }
}

/* Fumble (natural 1): red shake */
.die.fumble .die-3d[b-lhevt1y7j2] {
  animation: die-fumble-b-lhevt1y7j2 0.7s cubic-bezier(.36,.07,.19,.97) forwards;
}

@keyframes die-fumble-b-lhevt1y7j2 {
  0%   { transform: rotateZ(var(--tilt,0)) translateX(0); }
  15%  { transform: rotateZ(calc(var(--tilt,0) - 10deg)) translateX(-8px); }
  30%  { transform: rotateZ(calc(var(--tilt,0) + 8deg))  translateX(7px); }
  45%  { transform: rotateZ(calc(var(--tilt,0) - 6deg))  translateX(-5px); }
  60%  { transform: rotateZ(calc(var(--tilt,0) + 4deg))  translateX(4px); }
  75%  { transform: rotateZ(calc(var(--tilt,0) - 2deg))  translateX(-2px); }
  100% { transform: rotateZ(var(--tilt,0)) translateX(0); }
}

.die.fumble[b-lhevt1y7j2]::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(239, 68, 68, 0.6) 60deg,
    rgba(220, 38, 38, 0.8) 120deg,
    transparent 180deg,
    rgba(239, 68, 68, 0.5) 240deg,
    rgba(185, 28, 28, 0.7) 300deg,
    transparent 360deg
  );
  filter: blur(8px);
  opacity: 1;
  animation: fumble-glow-b-lhevt1y7j2 0.7s ease-out forwards;
}

@keyframes fumble-glow-b-lhevt1y7j2 {
  0%   { opacity: 0.8; transform: scale(0.9) rotate(0deg); }
  50%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.3) rotate(-90deg); }
}

/* Summary & History */
.summary[b-lhevt1y7j2] {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.sum-pill[b-lhevt1y7j2] {
  display: inline-flex;
  gap: .5rem;
  align-items: baseline;
  border: 1px solid var(--m-border);
  padding: .5rem .75rem;
  border-radius: .9rem;
  background: rgba(255,255,255,0.06);
  color: var(--m-text);
}
.sum-pill span[b-lhevt1y7j2] { color: var(--m-text-disabled); }

.history[b-lhevt1y7j2] { margin-top: .5rem; }
.history summary[b-lhevt1y7j2] {
  cursor: pointer;
  color: var(--m-text-disabled);
}
.history ul[b-lhevt1y7j2] {
  list-style: none;
  padding-left: 0;
  margin: .5rem 0 0;
  display: grid;
  gap: .35rem;
  font-size: .92rem;
}
.history li[b-lhevt1y7j2] {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  border-bottom: 1px dashed var(--m-border);
  padding-bottom: .35rem;
}
.history .time[b-lhevt1y7j2] { color: var(--m-text-disabled); }
.history .break[b-lhevt1y7j2] { color: var(--m-border); }

/* Responsive */
@media (max-width: 767.98px) {
  .dice-area[b-lhevt1y7j2] {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.6rem;
  }
}

/* Compact variant when wrapped in <div class="dice-mini"> */
:host-context(.dice-mini) .dice-shell[b-lhevt1y7j2] {
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.9rem;
}
:host-context(.dice-mini) .dice-area[b-lhevt1y7j2] {
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
:host-context(.dice-mini) .big-num[b-lhevt1y7j2] { font-size: 40px; }
:host-context(.dice-mini) .small-num[b-lhevt1y7j2] { font-size: 10px; }

/* === 3D Cube for d6 === */
.cube[b-lhevt1y7j2] {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Each face is a plane positioned around the center */
.face[b-lhevt1y7j2] {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
}

/* Assume the die face is roughly 100x100; translateZ by half depth */
:root[b-lhevt1y7j2] { --die-depth: 28px; } /* you can tune this in global CSS */

.face.front[b-lhevt1y7j2]  { transform: rotateY(  0deg) translateZ(var(--die-depth)); }
.face.back[b-lhevt1y7j2]   { transform: rotateY(180deg) translateZ(var(--die-depth)); }
.face.right[b-lhevt1y7j2]  { transform: rotateY( 90deg) translateZ(var(--die-depth)); }
.face.left[b-lhevt1y7j2]   { transform: rotateY(-90deg) translateZ(var(--die-depth)); }
.face.top[b-lhevt1y7j2]    { transform: rotateX( 90deg) translateZ(var(--die-depth)); }
.face.bottom[b-lhevt1y7j2] { transform: rotateX(-90deg) translateZ(var(--die-depth)); }

/* Add a bit of global shading for the cube */
.cube[b-lhevt1y7j2] { filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); }

/* Use the existing .die and .die-3d rules to provide perspective + rotation:
   - .die gives perspective
   - .die-3d rotates (we'll rotate the .die-3d which contains the .cube)
*/

/* If you want even stronger depth, optionally give edges a subtle outline */
.face .die-svg rect[b-lhevt1y7j2] {
  stroke: rgba(0,0,0,.12);
  stroke-width: 1;
}

/* Rolling uses tumble3d (defined above) — cubeTumble removed to avoid conflict */

/* === Golden Tube SVG Animations === */
.golden-tube[b-lhevt1y7j2] {
  --dice-gold: #ffd700;
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

.golden-tube path[b-lhevt1y7j2] {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

/* Animate tubes when rolling */
.die.rolling .golden-tube[b-lhevt1y7j2] {
  opacity: 1;
}

.die.rolling .tube-1[b-lhevt1y7j2] {
  animation: tubeSwirl1-b-lhevt1y7j2 0.9s ease-out infinite;
}

.die.rolling .tube-2[b-lhevt1y7j2] {
  animation: tubeSwirl2-b-lhevt1y7j2 1.1s ease-out 0.1s infinite;
}

.die.rolling .tube-3[b-lhevt1y7j2] {
  animation: tubeSwirl3-b-lhevt1y7j2 1.0s ease-out 0.2s infinite;
}

.die.rolling .tube-1 path[b-lhevt1y7j2] {
  animation: tubeDraw-b-lhevt1y7j2 0.7s ease-out forwards;
}

.die.rolling .tube-2 path[b-lhevt1y7j2] {
  animation: tubeDraw-b-lhevt1y7j2 0.7s ease-out 0.1s forwards;
}

.die.rolling .tube-3 path[b-lhevt1y7j2] {
  animation: tubeDraw-b-lhevt1y7j2 0.6s ease-out 0.15s forwards;
}

@keyframes tubeSwirl1-b-lhevt1y7j2 {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
    transform: scale(1.1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.3) rotate(360deg);
  }
}

@keyframes tubeSwirl2-b-lhevt1y7j2 {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(45deg);
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 0.85;
    transform: scale(1.05) rotate(-135deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.25) rotate(-315deg);
  }
}

@keyframes tubeSwirl3-b-lhevt1y7j2 {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-30deg);
  }
  30% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.7;
    transform: scale(1) rotate(150deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) rotate(330deg);
  }
}

@keyframes tubeDraw-b-lhevt1y7j2 {
  0% {
    stroke-dashoffset: 200;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -200;
  }
}

/* Light mode specific golden colors */
.golden-tube path[b-lhevt1y7j2] {
  filter: drop-shadow(0 0 2px rgba(255, 193, 7, 0.5));
}

/* Dark mode - make tubes more visible */
[data-theme="dark"] .golden-tube path[b-lhevt1y7j2] {
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

[data-theme="dark"] .golden-tube[b-lhevt1y7j2] {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}

/* Reduced motion — disable all dice animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    .roll-dice[b-lhevt1y7j2] {
        animation: none;
    }

    .die.rolling .die-3d[b-lhevt1y7j2] {
        animation: none;
    }

    .die.rolling[b-lhevt1y7j2]::before,
    .die.rolling[b-lhevt1y7j2]::after {
        animation: none;
        opacity: 0;
    }

    .die.landed .die-3d[b-lhevt1y7j2] {
        animation: none;
    }

    .die.landed[b-lhevt1y7j2]::before {
        animation: none;
        opacity: 0;
    }

    .die.critical .die-3d[b-lhevt1y7j2] {
        animation: none;
    }

    .die.critical[b-lhevt1y7j2]::before {
        animation: none;
        opacity: 0;
    }

    .die.fumble .die-3d[b-lhevt1y7j2] {
        animation: none;
    }

    .die.fumble[b-lhevt1y7j2]::before {
        animation: none;
        opacity: 0;
    }

    .die.rolling .golden-tube[b-lhevt1y7j2] {
        opacity: 0;
    }

    .die.rolling .tube-1[b-lhevt1y7j2],
    .die.rolling .tube-2[b-lhevt1y7j2],
    .die.rolling .tube-3[b-lhevt1y7j2] {
        animation: none;
    }

    .die.rolling .tube-1 path[b-lhevt1y7j2],
    .die.rolling .tube-2 path[b-lhevt1y7j2],
    .die.rolling .tube-3 path[b-lhevt1y7j2] {
        animation: none;
    }
}
/* /Components/DualModeToggle.razor.rz.scp.css */
.dual-mode-toggle[b-0dqem3jr5j] {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    overflow: hidden;
    background: color-mix(in srgb, var(--m-card) 88%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-surface-elevated) 45%, transparent);
}

.dual-mode-toggle-btn[b-0dqem3jr5j] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.875rem;
    background: transparent;
    border: none;
    color: var(--m-text-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dual-mode-toggle-btn .material-symbols-outlined[b-0dqem3jr5j] {
    font-size: 1rem;
}

.dual-mode-toggle-btn:not(:last-child)[b-0dqem3jr5j] {
    border-right: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
}

.dual-mode-toggle-btn.active[b-0dqem3jr5j] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)) 100%);
    color: var(--m-on-primary);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--m-primary) 24%, transparent);
}

.dual-mode-toggle-btn:not(.active):hover[b-0dqem3jr5j] {
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
    color: var(--m-text);
}

.dual-mode-toggle-btn:focus-visible[b-0dqem3jr5j] {
    outline: 2px solid var(--m-focus);
    outline-offset: -2px;
}
/* /Components/EmptyState.razor.rz.scp.css */
/* Empty State Scoped Styles */

.empty-state[b-wuny9aqr21] {
    --_es-breathe-dur: 3s;

    text-align: center;
    /* Vertical padding trimmed 72px -> 48px so the shared card reads as a
       balanced panel rather than a sparse one on otherwise-empty pages
       (Achievements "No Badges Yet", Glowdome empty states, etc.). Horizontal
       padding (28px) is unchanged to avoid any width reflow. */
    padding: 48px 28px;
    max-width: 520px;
    margin: 0 auto;
    background: var(--m-surface);
    border-radius: 24px;
    border: 1px solid var(--m-border);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--m-primary) 5%, transparent);
}

.empty-state-icon[b-wuny9aqr21] {
    color: var(--m-secondary);
    margin-bottom: 28px;
    animation: empty-state-enter-b-wuny9aqr21 0.5s ease-out both;
}

.empty-state-icon i[b-wuny9aqr21] {
    display: inline-block;
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--m-primary) 15%, transparent));
}

/* Material Symbols variant — breathing/blinking mascot loop */
.empty-state-symbol[b-wuny9aqr21] {
    font-size: 4rem;
    display: block;
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--m-primary) 15%, transparent));
    animation:
        empty-state-enter-b-wuny9aqr21 0.5s ease-out both,
        es-mascot-breathe-b-wuny9aqr21 var(--_es-breathe-dur) ease-in-out 0.6s infinite;
}

@keyframes es-mascot-breathe-b-wuny9aqr21 {
    0%, 100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    25% {
        transform: scale(1.04) translateY(-2px);
        opacity: 1;
    }
    /* Brief "blink" — subtle opacity dip */
    48% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02) translateY(-1px);
    }
    52% {
        opacity: 1;
    }
    75% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.empty-state-title[b-wuny9aqr21] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 14px;
    animation: empty-state-enter-b-wuny9aqr21 0.6s ease-out both;
    letter-spacing: 0;
}

.empty-state-message[b-wuny9aqr21] {
    font-size: 1.05rem;
    color: var(--m-text-2);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    animation: empty-state-enter-b-wuny9aqr21 0.7s ease-out both;
}

.btn-clear-filters[b-wuny9aqr21],
.btn-retry[b-wuny9aqr21] {
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: empty-state-enter-b-wuny9aqr21 0.8s ease-out both;
    letter-spacing: 0.01em;
}

.btn-clear-filters[b-wuny9aqr21] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 82%, #000) 100%);
    color: var(--m-on-primary);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-clear-filters:hover[b-wuny9aqr21] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 85%, #000) 0%, color-mix(in srgb, var(--m-primary) 70%, #000) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.btn-clear-filters:focus-visible[b-wuny9aqr21] {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
}

.btn-retry[b-wuny9aqr21] {
    background: var(--m-surface);
    color: var(--m-primary);
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-text) 4%, transparent);
}

.btn-retry:hover[b-wuny9aqr21] {
    background: color-mix(in srgb, var(--m-primary) 6%, var(--m-surface));
    border-color: var(--m-secondary);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.btn-retry:focus-visible[b-wuny9aqr21] {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
}

.empty-state-actions[b-wuny9aqr21] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

@keyframes empty-state-enter-b-wuny9aqr21 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Mobile */
@media (max-width: 768px) {
    .empty-state[b-wuny9aqr21] {
        /* Mirror the desktop trim at mobile (60px -> 40px vertical). */
        padding: 40px 20px;
    }

    .empty-state-title[b-wuny9aqr21] {
        font-size: 1.25rem;
    }

    .empty-state-message[b-wuny9aqr21] {
        font-size: 0.9rem;
    }

    .btn-clear-filters[b-wuny9aqr21],
    .btn-retry[b-wuny9aqr21] {
        width: 100%;
        max-width: 300px;
    }
}

.es-btn-icon[b-wuny9aqr21] {
    font-size: 0.9rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .empty-state-icon[b-wuny9aqr21],
    .empty-state-title[b-wuny9aqr21],
    .empty-state-message[b-wuny9aqr21],
    .btn-clear-filters[b-wuny9aqr21],
    .btn-retry[b-wuny9aqr21] {
        animation: none;
    }

    .empty-state-symbol[b-wuny9aqr21] {
        animation: none;
    }

    .btn-clear-filters:hover[b-wuny9aqr21],
    .btn-retry:hover[b-wuny9aqr21] {
        transform: none;
    }
}
/* /Components/ErrorBoundaryWrapper.razor.rz.scp.css */
/* ErrorBoundaryWrapper.razor.css - Mystira Dragon Scale themed error display */

.error-boundary-container[b-puudpn26e8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
    background: var(--m-bg, #1a1a2e);
}

.error-boundary-content[b-puudpn26e8] {
    max-width: 520px;
    width: 100%;
    text-align: center;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-error, #ef4444) 20%, transparent);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-error, #ef4444) 8%, transparent),
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 80px color-mix(in srgb, var(--m-error, #ef4444) 4%, transparent);
    animation: ebw-card-enter-b-puudpn26e8 0.5s ease-out both;
}

@keyframes ebw-card-enter-b-puudpn26e8 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Accent stripe at the top */
.error-boundary-content[b-puudpn26e8]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--m-error, #ef4444) 30%, #f97316 60%, transparent);
}

/* Subtle corner glyph */
.error-boundary-content[b-puudpn26e8]::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--m-error, #ef4444) 7%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* Floating error particles */
.ebw-particles[b-puudpn26e8] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ebw-particle[b-puudpn26e8] {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: ebw-float-b-puudpn26e8 6s ease-in-out infinite;
}

.ep-1[b-puudpn26e8] { left: 15%; top: 70%; width: 4px; height: 4px; background: color-mix(in srgb, var(--m-error, #ef4444) 40%, transparent); animation-duration: 7s; animation-delay: 0s; }
.ep-2[b-puudpn26e8] { left: 80%; top: 75%; width: 3px; height: 3px; background: color-mix(in srgb, var(--m-primary, #5b3cc4) 35%, transparent); animation-duration: 5.5s; animation-delay: 1.5s; }
.ep-3[b-puudpn26e8] { left: 40%; top: 85%; width: 3px; height: 3px; background: color-mix(in srgb, var(--m-accent, #f6c453) 40%, transparent); animation-duration: 8s; animation-delay: 3s; }
.ep-4[b-puudpn26e8] { left: 65%; top: 80%; width: 2px; height: 2px; background: color-mix(in srgb, var(--m-teal, #4ed7c8) 35%, transparent); animation-duration: 6s; animation-delay: 0.8s; }

@keyframes ebw-float-b-puudpn26e8 {
    0%, 100% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-80px); opacity: 0; }
}

/* Dragon illustration */
.ebw-illustration[b-puudpn26e8] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    animation: ebw-bob-b-puudpn26e8 3s ease-in-out infinite;
}

@keyframes ebw-bob-b-puudpn26e8 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ebw-dragon-svg[b-puudpn26e8] {
    width: 100%;
    height: 100%;
}

.dragon-body[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 70%, #fff 30%);
}

.dragon-head[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 65%, #fff 35%);
}

.dragon-eye[b-puudpn26e8] {
    fill: white;
}

.dragon-pupil[b-puudpn26e8] {
    fill: #1a1a2e;
    animation: ebw-look-around-b-puudpn26e8 4s ease-in-out infinite;
}

@keyframes ebw-look-around-b-puudpn26e8 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

.dragon-eye-shine[b-puudpn26e8] {
    fill: white;
    opacity: 0.9;
}

.dragon-mouth[b-puudpn26e8] {
    fill: none;
    stroke: color-mix(in srgb, var(--m-primary, #5b3cc4) 40%, #000 60%);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.dragon-horn[b-puudpn26e8] {
    fill: var(--m-accent, #f6c453);
    opacity: 0.9;
}

.dragon-wing[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent);
    opacity: 0.7;
}

.dragon-wing-left[b-puudpn26e8] {
    animation: ebw-wing-flap-left-b-puudpn26e8 2.5s ease-in-out infinite;
    transform-origin: 32px 65px;
}

.dragon-wing-right[b-puudpn26e8] {
    animation: ebw-wing-flap-right-b-puudpn26e8 2.5s ease-in-out infinite;
    transform-origin: 88px 65px;
}

@keyframes ebw-wing-flap-left-b-puudpn26e8 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

@keyframes ebw-wing-flap-right-b-puudpn26e8 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}

.dragon-tail[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 60%, #fff 40%);
    animation: ebw-tail-wag-b-puudpn26e8 2s ease-in-out infinite;
    transform-origin: 38px 88px;
}

@keyframes ebw-tail-wag-b-puudpn26e8 {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg); }
}

.smoke-puff[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-text-2, #b9b4e6) 30%, transparent);
    animation: ebw-smoke-b-puudpn26e8 3s ease-out infinite;
}

.sp-1[b-puudpn26e8] { animation-delay: 0s; }
.sp-2[b-puudpn26e8] { animation-delay: 0.5s; }
.sp-3[b-puudpn26e8] { animation-delay: 1s; }

@keyframes ebw-smoke-b-puudpn26e8 {
    0% { opacity: 0.4; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-12px) scale(1.5); }
}

.error-title[b-puudpn26e8] {
    font-family: var(--d-font-serif);
    color: var(--m-text, #f8f7ff);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    letter-spacing: 0.06em;
}

.error-message[b-puudpn26e8] {
    color: var(--m-text-2, rgba(255, 255, 255, 0.6));
    font-size: 0.9375rem;
    margin: 0 0 2rem;
    line-height: 1.7;
}

.error-details[b-puudpn26e8] {
    margin: 0 0 1.75rem;
    text-align: left;
    background: color-mix(in srgb, #000 20%, transparent);
    border: 1px solid var(--m-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 0.875rem 1rem;
}

.error-details summary[b-puudpn26e8] {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--m-text-2, rgba(255,255,255,0.55));
    user-select: none;
    letter-spacing: 0.02em;
}

.error-details summary:hover[b-puudpn26e8] {
    color: var(--m-primary, #a855f7);
}

.error-details summary:focus-visible[b-puudpn26e8] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
    border-radius: 4px;
}

.error-stack[b-puudpn26e8] {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--m-text-2, rgba(255, 255, 255, 0.6));
    border-radius: 6px;
    font-family: var(--d-font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-actions[b-puudpn26e8] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Shared button base */
.ebw-btn[b-puudpn26e8] {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.ebw-btn-primary[b-puudpn26e8] {
    background: var(--m-primary, #5b3cc4);
    color: var(--m-on-primary, #f8f7ff);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-primary, #5b3cc4) 35%, transparent);
}

.ebw-btn-primary:hover[b-puudpn26e8] {
    background: color-mix(in srgb, var(--m-primary, #5b3cc4) 85%, #fff 15%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent);
}

.ebw-btn-primary:active[b-puudpn26e8] {
    transform: translateY(0);
}

.ebw-btn-secondary[b-puudpn26e8] {
    background: transparent;
    color: var(--m-text-2, rgba(255,255,255,0.65));
    border: 1px solid var(--m-border, rgba(255,255,255,0.15));
}

.ebw-btn-secondary:hover[b-puudpn26e8] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--m-text, #f8f7ff);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.ebw-btn-secondary:active[b-puudpn26e8] {
    transform: translateY(0);
}

.ebw-btn:focus-visible[b-puudpn26e8] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
}

.ebw-btn-icon[b-puudpn26e8] {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.ebw-btn-primary:hover .ebw-btn-icon[b-puudpn26e8] {
    animation: ebw-spin-hint-b-puudpn26e8 0.6s ease-in-out;
}

@keyframes ebw-spin-hint-b-puudpn26e8 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 576px) {
    .error-boundary-container[b-puudpn26e8] {
        padding: 1rem;
        min-height: 300px;
    }

    .error-boundary-content[b-puudpn26e8] {
        padding: 2rem 1.25rem;
    }

    .ebw-illustration[b-puudpn26e8] {
        width: 96px;
        height: 96px;
    }

    .error-title[b-puudpn26e8] {
        font-size: 1.125rem;
    }

    .error-actions[b-puudpn26e8] {
        flex-direction: column;
    }

    .ebw-btn[b-puudpn26e8] {
        width: 100%;
        justify-content: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ebw-illustration[b-puudpn26e8] {
        animation: none;
    }

    .dragon-pupil[b-puudpn26e8],
    .dragon-wing-left[b-puudpn26e8],
    .dragon-wing-right[b-puudpn26e8],
    .dragon-tail[b-puudpn26e8],
    .smoke-puff[b-puudpn26e8] {
        animation: none;
    }

    .ebw-particle[b-puudpn26e8] {
        animation: none;
        display: none;
    }

    .ebw-btn:hover[b-puudpn26e8] {
        transform: none;
    }

    .ebw-btn-primary:hover .ebw-btn-icon[b-puudpn26e8] {
        animation: none;
    }

    .error-boundary-content[b-puudpn26e8] {
        animation: none;
    }
}

/* Light theme override */
:is(html[data-theme="light"], html[data-theme="bright"]) .error-boundary-container[b-puudpn26e8] {
    background: var(--m-bg, #f5f0ff);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-boundary-content[b-puudpn26e8] {
    background: var(--m-card, #ffffff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-error, #ef4444) 10%, transparent),
        0 4px 24px rgba(0, 0, 0, 0.08);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-title[b-puudpn26e8] {
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-message[b-puudpn26e8] {
    color: var(--m-text-2, rgba(0, 0, 0, 0.55));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-stack[b-puudpn26e8] {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.7);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .dragon-body[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 55%, #fff 45%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .dragon-head[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, #fff 50%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .smoke-puff[b-puudpn26e8] {
    fill: color-mix(in srgb, var(--m-text-2, #5c4fa3) 20%, transparent);
}
/* /Components/ErrorNavigator.razor.rz.scp.css */
.error-navigator[b-h7whwqf37p] {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 10%, transparent);
    margin: 1rem 0;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: en-card-enter-b-h7whwqf37p 0.4s ease-out both;
}

.error-navigator.expanded[b-h7whwqf37p] {
    border-color: var(--m-error);
}

.error-header[b-h7whwqf37p] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--m-error) 10%, var(--m-bg));
    cursor: pointer;
    gap: 1rem;
}

.error-header:hover[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-error) 15%, var(--m-bg));
}

.error-header:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--m-error) 15%, var(--m-bg));
}

.error-icon-wrapper[b-h7whwqf37p] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-error);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--m-on-primary, #fff);
    animation: en-icon-bounce-b-h7whwqf37p 2s ease-in-out infinite;
}

.error-header-content[b-h7whwqf37p] {
    flex: 1;
    min-width: 0;
}

.error-title[b-h7whwqf37p] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--m-text);
}

.error-code[b-h7whwqf37p] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--m-bg-2);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.expand-toggle[b-h7whwqf37p] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    color: var(--m-text-2);
    transition: transform 0.2s ease;
}

.expand-toggle:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
    border-radius: 4px;
}

.expanded .expand-toggle .expand-icon[b-h7whwqf37p] {
    transform: rotate(0deg);
}

.error-body[b-h7whwqf37p] {
    padding: 1.25rem;
    border-top: 1px solid var(--m-border);
    animation: en-expand-b-h7whwqf37p 0.3s ease-out;
}

.error-description[b-h7whwqf37p] {
    margin: 0 0 1.5rem;
    color: var(--m-text);
    line-height: 1.6;
}

.solutions-section[b-h7whwqf37p],
.diagnostics-section[b-h7whwqf37p],
.links-section[b-h7whwqf37p] {
    margin-bottom: 1.5rem;
}

.solutions-section h4[b-h7whwqf37p],
.diagnostics-section h4[b-h7whwqf37p],
.links-section h4[b-h7whwqf37p] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--m-text);
}

.solutions-list[b-h7whwqf37p] {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: solution-counter;
}

.solution-item[b-h7whwqf37p] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--m-bg-2);
    border-radius: 8px;
    counter-increment: solution-counter;
    transition: all 0.2s ease;
    animation: en-step-enter-b-h7whwqf37p 0.3s ease-out both;
}

.solution-item:nth-child(1)[b-h7whwqf37p] { animation-delay: 0.05s; }
.solution-item:nth-child(2)[b-h7whwqf37p] { animation-delay: 0.10s; }
.solution-item:nth-child(3)[b-h7whwqf37p] { animation-delay: 0.15s; }
.solution-item:nth-child(4)[b-h7whwqf37p] { animation-delay: 0.20s; }
.solution-item:nth-child(5)[b-h7whwqf37p] { animation-delay: 0.25s; }

.solution-item.completed[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-success) 15%, var(--m-bg-2));
    opacity: 0.8;
}

.solution-item.completed .solution-text[b-h7whwqf37p] {
    text-decoration: line-through;
    color: var(--m-text-2);
}

.solution-checkbox[b-h7whwqf37p] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.solution-checkbox input[b-h7whwqf37p] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--m-success);
}

.solution-checkbox input:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
}

.solution-text[b-h7whwqf37p] {
    flex: 1;
    line-height: 1.5;
    color: var(--m-text);
}

.command-block[b-h7whwqf37p] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--m-bg-2);
    border-radius: 8px;
}

.command-description[b-h7whwqf37p] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--m-text-2);
}

.command-line[b-h7whwqf37p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.command-line code[b-h7whwqf37p] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--m-bg-2) 50%, var(--m-text) 5%);
    border-radius: 4px;
    font-family: var(--d-font-mono);
    font-size: 0.85rem;
    color: var(--m-text);
    overflow-x: auto;
    white-space: nowrap;
}

.copy-btn[b-h7whwqf37p] {
    flex-shrink: 0;
    padding: 0.5rem;
    background: var(--m-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.copy-btn:hover[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-primary) 85%, #000000 15%);
}

.copy-btn:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
}

.copy-btn.copied[b-h7whwqf37p] {
    background: var(--m-success, #22c55e);
    animation: en-copy-flash-b-h7whwqf37p 0.3s ease-out;
}

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

.links-list li[b-h7whwqf37p] {
    margin-bottom: 0.5rem;
}

.links-list a[b-h7whwqf37p] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--m-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.links-list a:hover[b-h7whwqf37p] {
    color: color-mix(in srgb, var(--m-primary) 85%, #000000 15%);
    text-decoration: underline;
}

.links-list a:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
    border-radius: 4px;
}

.external-link-icon[b-h7whwqf37p] {
    font-size: 0.875rem;
    vertical-align: middle;
}

.error-actions[b-h7whwqf37p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--m-border);
}

.en-btn-icon[b-h7whwqf37p] {
    font-size: 1.125rem;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* Shared button base */
.en-btn[b-h7whwqf37p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.en-btn-primary[b-h7whwqf37p] {
    background: var(--m-primary);
    color: var(--m-on-primary);
}

.en-btn-primary:hover[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-primary) 85%, #fff 15%);
    transform: translateY(-1px);
}

.en-btn-secondary[b-h7whwqf37p] {
    background: var(--m-text-2);
    color: var(--m-on-primary);
}

.en-btn-secondary:hover[b-h7whwqf37p] {
    background: var(--m-text);
}

.en-btn-outline[b-h7whwqf37p] {
    background: transparent;
    color: var(--m-text);
    border: 2px solid var(--m-border);
}

.en-btn-outline:hover[b-h7whwqf37p] {
    background: var(--m-bg-2);
    border-color: var(--m-primary);
    color: var(--m-primary);
}

.en-btn:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
}

.technical-details[b-h7whwqf37p] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--m-border);
}

.technical-details summary[b-h7whwqf37p] {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--m-text-2);
    user-select: none;
}

.technical-details summary:hover[b-h7whwqf37p] {
    color: var(--m-text);
}

.technical-details summary:focus-visible[b-h7whwqf37p] {
    outline: 2px solid var(--m-primary, #5b3cc4);
    outline-offset: 2px;
    border-radius: 4px;
}

.technical-details pre[b-h7whwqf37p] {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--m-bg-2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--m-text);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}



.solution-item.completed .solution-checkbox input[b-h7whwqf37p] {
    animation: en-check-pop-b-h7whwqf37p 0.3s ease-out;
}

/* Keyframes */

@keyframes en-card-enter-b-h7whwqf37p {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes en-icon-bounce-b-h7whwqf37p {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes en-step-enter-b-h7whwqf37p {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes en-expand-b-h7whwqf37p {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
}

@keyframes en-check-pop-b-h7whwqf37p {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes en-copy-flash-b-h7whwqf37p {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Mobile responsive */
@media (max-width: 575.98px) {
    .error-header[b-h7whwqf37p] {
        padding: 0.875rem 1rem;
    }

    .error-icon-wrapper[b-h7whwqf37p] {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .error-title[b-h7whwqf37p] {
        font-size: 1rem;
    }

    .error-body[b-h7whwqf37p] {
        padding: 1rem;
    }

    .error-actions[b-h7whwqf37p] {
        flex-direction: column;
    }

    .en-btn[b-h7whwqf37p] {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-navigator[b-h7whwqf37p] {
        animation: none;
    }

    .error-icon-wrapper[b-h7whwqf37p] {
        animation: none;
    }

    .error-body[b-h7whwqf37p] {
        animation: none;
    }

    .solution-item[b-h7whwqf37p] {
        animation: none;
    }

    .solution-item.completed .solution-checkbox input[b-h7whwqf37p] {
        animation: none;
    }

    .copy-btn.copied[b-h7whwqf37p] {
        animation: none;
    }

    .en-btn:hover[b-h7whwqf37p] {
        transform: none;
    }

    .error-navigator[b-h7whwqf37p],
    .solution-item[b-h7whwqf37p],
    .expand-toggle[b-h7whwqf37p],
    .copy-btn[b-h7whwqf37p],
    .links-list a[b-h7whwqf37p] {
        transition: none;
    }
}

/* Light theme overrides */
:is(html[data-theme="light"], html[data-theme="bright"]) .error-navigator[b-h7whwqf37p] {
    background: var(--m-card, #ffffff);
    border-color: var(--m-border, rgba(0, 0, 0, 0.1));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-header[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-error) 8%, var(--m-bg, #f5f0ff));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-icon-wrapper[b-h7whwqf37p] {
    background: color-mix(in srgb, var(--m-error) 85%, #fff 15%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-title[b-h7whwqf37p] {
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-description[b-h7whwqf37p] {
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .solution-text[b-h7whwqf37p] {
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .error-code[b-h7whwqf37p] {
    background: var(--m-bg-2, rgba(0, 0, 0, 0.05));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .command-line code[b-h7whwqf37p] {
    background: var(--m-bg-2, rgba(0, 0, 0, 0.05));
    color: var(--m-text, #1a1a2e);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .technical-details pre[b-h7whwqf37p] {
    background: var(--m-bg-2, rgba(0, 0, 0, 0.05));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .en-btn-secondary[b-h7whwqf37p] {
    background: var(--m-bg-2, rgba(0, 0, 0, 0.05));
    color: var(--m-text, #1a1a2e);
    border: 1px solid var(--m-border, rgba(0, 0, 0, 0.1));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .en-btn-secondary:hover[b-h7whwqf37p] {
    background: var(--m-border, rgba(0, 0, 0, 0.1));
}
/* /Components/FantasyMediaFrame.razor.rz.scp.css */
.fantasy-frame[b-00xbb9yn5b] {
  position: relative;
  --frame-color: var(--m-teal);
}

.fantasy-frame.rounded .fantasy-frame-inner[b-00xbb9yn5b] {
  border-radius: 12px;
}

.fantasy-frame .fantasy-frame-inner[b-00xbb9yn5b] {
  position: relative;
  z-index: 5;
  overflow: hidden; /* Clip media to rounded corners */
  background: color-mix(in srgb, var(--m-text) 3%, transparent);
}

/* SVG overlay positioned above content (non-interactive) */
.fantasy-frame-svg[b-00xbb9yn5b] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible; /* Allow border to sit outside the container */
  z-index: 2;
}

/* Kind-specific paddings (audio gets more padding for controls) */
.fantasy-frame.kind-audio .fantasy-frame-inner[b-00xbb9yn5b] {
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-teal) 6%, var(--m-bg)), color-mix(in srgb, var(--m-teal) 2%, var(--m-bg)));
}

/* Pulse effect disabled for simplified border */

/* Ensure media elements fill container nicely */
.fantasy-frame img[b-00xbb9yn5b],
.fantasy-frame video[b-00xbb9yn5b] {
  display: block;
  width: 100%;
  height: auto;
}

.fantasy-frame audio[b-00xbb9yn5b] { width: 100%; }
/* /Components/FeaturedBundleCard.razor.rz.scp.css */
/* Featured Bundle Card Component Styles */

.featured-bundle-card[b-395ew0wrlx] {
    animation: fadeIn-b-395ew0wrlx 0.5s ease-out;
}

/* Card border uses accent token instead of Bootstrap border-warning */
.featured-card[b-395ew0wrlx] {
    border: 2px solid color-mix(in srgb, var(--m-accent) 50%, transparent);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.featured-card:hover[b-395ew0wrlx] {
    border-color: var(--m-accent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-accent) 20%, transparent);
}

/* Featured header strip — accent-tinted, replaces Bootstrap bg-warning text-dark */
.featured-header[b-395ew0wrlx] {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--m-accent) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
    color: var(--m-accent);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
}

/* Explore button — uses primary token, replaces Bootstrap btn-warning */
.btn-primary-custom[b-395ew0wrlx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-accent)) 100%);
    color: var(--m-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-primary-custom:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 90%, var(--m-on-primary)) 0%, var(--m-primary) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 40%, transparent);
    transform: translateY(-1px);
}

.btn-primary-custom:active[b-395ew0wrlx] {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-primary-custom:focus-visible[b-395ew0wrlx] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.btn-lg-custom[b-395ew0wrlx] {
    padding: 12px 32px;
    font-size: 1.05rem;
}

/* Image wrapper — constrained banner above content */
.featured-image-wrapper[b-395ew0wrlx] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 1;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 8%, transparent) 100%);
    max-height: 240px;
}

/* Reach into CachedMystiraImage child component */
.featured-image-wrapper[b-395ew0wrlx]  img,
.featured-image-wrapper[b-395ew0wrlx]  .featured-bundle-image,
.featured-image-wrapper[b-395ew0wrlx]  .cached-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body content below image */
.featured-body[b-395ew0wrlx] {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.featured-title[b-395ew0wrlx] {
    font-family: var(--m-font-display, 'Baloo 2', cursive);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.featured-desc[b-395ew0wrlx] {
    color: var(--m-text-2);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

@keyframes fadeIn-b-395ew0wrlx {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Featured Pills Container */
.featured-pills[b-395ew0wrlx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Base Featured Pill Styles */
.featured-pill[b-395ew0wrlx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
}

/* Tooltip support — mirrors BundleCard's data-tooltip pattern */
.featured-pill[data-tooltip][b-395ew0wrlx] {
    cursor: help;
}

.featured-pill[data-tooltip][b-395ew0wrlx]::before,
.featured-pill[data-tooltip][b-395ew0wrlx]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Tooltip text container */
.featured-pill[data-tooltip][b-395ew0wrlx]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
    color: var(--m-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    border-radius: 8px;
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--m-bg) 20%, transparent),
        0 4px 12px color-mix(in srgb, var(--m-bg) 15%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-on-primary) 10%, transparent);
    max-width: 250px;
    text-align: center;
}

/* Tooltip arrow */
.featured-pill[data-tooltip][b-395ew0wrlx]::before {
    content: '';
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 8px solid transparent;
    border-top-color: var(--m-surface-elevated);
    border-bottom: 0;
}

/* Show tooltip on hover */
.featured-pill[data-tooltip]:hover[b-395ew0wrlx]::before,
.featured-pill[data-tooltip]:hover[b-395ew0wrlx]::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.featured-pill .material-symbols-outlined[b-395ew0wrlx] {
    font-size: 0.75rem;
}

/* Adventures Pill */
.featured-pill.pill-adventures[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 12%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-secondary) 25%, transparent);
    color: var(--m-primary);
}

.featured-pill.pill-adventures:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 20%, transparent) 0%, color-mix(in srgb, var(--m-primary) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 40%, transparent);
    transform: translateY(-1px);
}

/* Completed Pill */
.featured-pill.pill-completed[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 12%, transparent) 0%, color-mix(in srgb, var(--m-success) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-success) 25%, transparent);
    color: var(--m-success);
}

.featured-pill.pill-completed:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 20%, transparent) 0%, color-mix(in srgb, var(--m-success) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 40%, transparent);
    transform: translateY(-1px);
}

/* Pending Pill */
.featured-pill.pill-pending[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-disabled) 12%, transparent) 0%, color-mix(in srgb, var(--m-text-disabled) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-text-disabled) 25%, transparent);
    color: var(--m-text-disabled);
}

.featured-pill.pill-pending:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-disabled) 20%, transparent) 0%, color-mix(in srgb, var(--m-text-disabled) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-disabled) 40%, transparent);
    transform: translateY(-1px);
}

/* Age Group Pill */
.featured-pill.pill-age[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 12%, transparent) 0%, color-mix(in srgb, var(--m-info) 12%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-info) 25%, transparent);
    color: var(--m-info);
}

.featured-pill.pill-age:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 20%, transparent) 0%, color-mix(in srgb, var(--m-info) 20%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 40%, transparent);
    transform: translateY(-1px);
}

/* Free Pill */
.featured-pill.pill-free[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 95%, transparent) 0%, color-mix(in srgb, var(--m-success) 95%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 30%, transparent);
    color: var(--m-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-success) 40%, transparent);
}

.featured-pill.pill-free:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 100%, transparent) 0%, color-mix(in srgb, var(--m-success) 100%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-on-primary) 50%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-success) 50%, transparent);
}

@media (max-width: 768px) {
    .featured-bundle-card .row[b-395ew0wrlx] {
        flex-direction: column;
    }

    .featured-bundle-card .col-md-4[b-395ew0wrlx],
    .featured-bundle-card .col-md-8[b-395ew0wrlx] {
        width: 100%;
        max-width: 100%;
    }

    /* On small screens, let the image size itself to the card width */
    .featured-bundle-image[b-395ew0wrlx] {
        height: auto;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .featured-pill[b-395ew0wrlx] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .featured-pill .material-symbols-outlined[b-395ew0wrlx] {
        font-size: 0.7rem;
    }

    /* Hide tooltips on touch devices */
    .featured-pill[data-tooltip][b-395ew0wrlx]::before,
    .featured-pill[data-tooltip][b-395ew0wrlx]::after {
        display: none;
    }
}

/* ============================================================
   Dark mode — uses html[data-theme="dark"] per project convention
   ============================================================ */

html[data-theme="dark"] .featured-bundle-card .featured-card[b-395ew0wrlx] {
    background: var(--m-bg);
    border-color: color-mix(in srgb, var(--m-accent) 40%, transparent);
}

html[data-theme="dark"] .featured-bundle-card .featured-card:hover[b-395ew0wrlx] {
    border-color: var(--m-accent);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-accent) 15%, transparent);
}

html[data-theme="dark"] .featured-header[b-395ew0wrlx] {
    background: color-mix(in srgb, var(--m-accent) 15%, transparent);
    border-bottom-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
    color: var(--m-accent);
}

html[data-theme="dark"] .featured-bundle-card .card-body[b-395ew0wrlx] {
    background: var(--m-bg);
}

html[data-theme="dark"] .featured-bundle-card .card-title[b-395ew0wrlx] {
    color: var(--m-text);
}

html[data-theme="dark"] .featured-bundle-card .card-text[b-395ew0wrlx] {
    color: var(--m-text-2);
}

html[data-theme="dark"] .btn-primary-custom[b-395ew0wrlx] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)) 100%);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 25%, transparent);
}

html[data-theme="dark"] .btn-primary-custom:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 85%, var(--m-on-primary)) 0%, var(--m-primary) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 35%, transparent);
}

/* Dark mode pill styles */
html[data-theme="dark"] .featured-pill.pill-adventures[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 15%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    color: var(--m-secondary);
}

html[data-theme="dark"] .featured-pill.pill-adventures:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 25%, transparent) 0%, color-mix(in srgb, var(--m-secondary) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-secondary) 50%, transparent);
}

html[data-theme="dark"] .featured-pill.pill-completed[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 15%, transparent) 0%, color-mix(in srgb, var(--m-success) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 30%, transparent);
    color: var(--m-success);
}

html[data-theme="dark"] .featured-pill.pill-completed:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 25%, transparent) 0%, color-mix(in srgb, var(--m-success) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 50%, transparent);
}

html[data-theme="dark"] .featured-pill.pill-pending[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-2) 15%, transparent) 0%, color-mix(in srgb, var(--m-text-2) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-2) 30%, transparent);
    color: var(--m-text-2);
}

html[data-theme="dark"] .featured-pill.pill-pending:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-text-2) 25%, transparent) 0%, color-mix(in srgb, var(--m-text-2) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-text-2) 50%, transparent);
}

html[data-theme="dark"] .featured-pill.pill-age[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 15%, transparent) 0%, color-mix(in srgb, var(--m-info) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 30%, transparent);
    color: var(--m-info);
}

html[data-theme="dark"] .featured-pill.pill-age:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-info) 25%, transparent) 0%, color-mix(in srgb, var(--m-info) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-info) 50%, transparent);
}

html[data-theme="dark"] .featured-pill.pill-free[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 90%, transparent) 0%, color-mix(in srgb, var(--m-success) 90%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-success) 40%, transparent);
    color: var(--m-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-success) 30%, transparent);
}

html[data-theme="dark"] .featured-pill.pill-free:hover[b-395ew0wrlx] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-success) 100%, transparent) 0%, color-mix(in srgb, var(--m-success) 100%, transparent) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-success) 40%, transparent);
}

/* Dark mode tooltip styles */
html[data-theme="dark"] .featured-pill[data-tooltip][b-395ew0wrlx]::after {
    background: linear-gradient(135deg, var(--m-surface-elevated) 0%, var(--m-bg) 100%);
    color: var(--m-text);
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--m-bg) 40%, transparent),
        0 4px 12px color-mix(in srgb, var(--m-bg) 30%, transparent),
        0 0 0 1px color-mix(in srgb, var(--m-secondary) 30%, transparent);
}

html[data-theme="dark"] .featured-pill[data-tooltip][b-395ew0wrlx]::before {
    border-top-color: var(--m-surface-elevated);
}

/* ============================================================
   Reduced motion — disable animations for accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .featured-bundle-card[b-395ew0wrlx] {
        animation: none;
    }

    .featured-card[b-395ew0wrlx],
    .btn-primary-custom[b-395ew0wrlx],
    .featured-pill[b-395ew0wrlx],
    .featured-pill[data-tooltip][b-395ew0wrlx]::before,
    .featured-pill[data-tooltip][b-395ew0wrlx]::after {
        transition: none;
    }

    .btn-primary-custom:hover[b-395ew0wrlx],
    .featured-pill:hover[b-395ew0wrlx] {
        transform: none;
    }
}
/* /Components/FilterSection.razor.rz.scp.css */
/* Filter Section Scoped Styles */

/* Wrapper to ensure proper spacing for shadows and transforms */
.filter-section-wrapper[b-ilqxpphy23] {
    overflow: visible;
    padding: 8px 4px; /* Space for shadows and transforms */
    margin: -8px -4px; /* Compensate for padding to maintain layout */
    margin-top: 1rem; /* Add space between navbar and filter section */
    margin-bottom: calc(1.5rem - 8px); /* Maintain mb-4 spacing */
}

.filter-card[b-ilqxpphy23] {
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 10%, transparent);
    transition: box-shadow var(--m-dur-base) var(--m-ease-smooth), border-color var(--m-dur-base) var(--m-ease-smooth), transform var(--m-dur-base) var(--m-ease-smooth);
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-bg) 100%);
    box-shadow: var(--m-shadow-sm);
}

.filter-card:hover[b-ilqxpphy23] {
    box-shadow: var(--m-shadow-md) !important;
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
    transform: translateY(-1px);
}

.filter-card .card-body[b-ilqxpphy23] {
    padding: 28px;
    overflow: visible;
}

.filter-title[b-ilqxpphy23] {
    color: var(--m-text);
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-title .material-symbols-outlined[b-ilqxpphy23] {
    color: var(--m-primary);
    font-size: 1.1rem;
}

/* Toggle button (filter icon) — collapses/expands the filter body */
.filter-toggle-btn[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-primary) 6%, transparent);
    color: var(--m-primary);
    cursor: pointer;
    transition: background var(--m-dur-fast) var(--m-ease-smooth), box-shadow var(--m-dur-fast) var(--m-ease-smooth), transform var(--m-dur-fast) var(--m-ease-smooth);
}

.filter-toggle-btn:hover[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
    box-shadow: var(--m-shadow-sm);
    transform: translateY(-1px);
}

.filter-toggle-btn:focus-visible[b-ilqxpphy23] {
    outline: none;
    box-shadow: var(--m-ring);
}

.filter-toggle-btn .material-symbols-outlined[b-ilqxpphy23] {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform var(--m-dur-base) var(--m-ease-spring);
}

.filter-toggle-btn--expanded[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
}

.filter-toggle-btn--expanded .material-symbols-outlined[b-ilqxpphy23] {
    transform: rotate(180deg);
}

.filter-title-text[b-ilqxpphy23] {
    line-height: 1;
}

/* Collapsible content area */
.filter-collapsible[b-ilqxpphy23] {
    display: grid;
    transition: grid-template-rows var(--m-dur-base) var(--m-ease-smooth), opacity var(--m-dur-base) var(--m-ease-smooth);
}

.filter-collapsible > *[b-ilqxpphy23] {
    min-height: 0;
}

.filter-collapsible--collapsed[b-ilqxpphy23] {
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.filter-collapsible--expanded[b-ilqxpphy23] {
    grid-template-rows: 1fr;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .filter-collapsible[b-ilqxpphy23] {
        transition: none;
    }

    .filter-toggle-btn .material-symbols-outlined[b-ilqxpphy23] {
        transition: none;
    }
}

.filter-card .card-title[b-ilqxpphy23] {
    color: var(--m-text);
    font-weight: 700;
    font-size: 1.125rem;
}

.filter-results-count .badge[b-ilqxpphy23] {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%) !important;
    color: var(--m-on-primary);
    border: 2px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
    box-shadow: var(--m-shadow-accent);
}

/* Search Bar Styles */
.input-group[b-ilqxpphy23] {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-text) 4%, transparent);
    transition: box-shadow var(--m-dur-fast) var(--m-ease-smooth), transform var(--m-dur-fast) var(--m-ease-smooth);
    background: var(--m-surface);
}

.input-group:focus-within[b-ilqxpphy23] {
    box-shadow: var(--m-shadow-md), var(--m-ring);
    transform: translateY(-1px);
}

.input-group-text[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-right: none;
    color: var(--m-primary);
    padding: 14px 18px;
    font-size: 1rem;
}

.input-group .form-control[b-ilqxpphy23] {
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-left: none;
    padding: 14px 18px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: var(--m-surface);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* When clear button is present, remove right border-radius from input */
.input-group .form-control:not(:last-child)[b-ilqxpphy23] {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:focus[b-ilqxpphy23] {
    border-color: var(--m-secondary);
    box-shadow: none;
    background: var(--m-surface);
}

.input-group .form-control[b-ilqxpphy23]::placeholder {
    color: var(--m-secondary);
    font-style: normal;
    font-weight: 400;
}

.input-group .filter-clear-btn[b-ilqxpphy23] {
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-left: none;
    background: var(--m-surface);
    color: var(--m-primary);
    transition: all 0.2s ease;
    padding: 14px 16px;
}

.input-group .filter-clear-btn:hover[b-ilqxpphy23] {
    background: var(--m-error-bg);
    color: var(--m-error);
    border-color: var(--m-error-border);
}

/* Compact Filter Row Layout */
.filter-row[b-ilqxpphy23] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-search[b-ilqxpphy23] {
    min-width: 0;
    flex: 1 1 300px;
}

.filter-age-groups[b-ilqxpphy23] {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-toggle[b-ilqxpphy23] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Completed Toggle Wrapper */
.completed-toggle-wrapper[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-bg) 100%);
    border: 2px solid color-mix(in srgb, var(--m-text) 12%, transparent);
    border-radius: 50px;
    padding: 8px 16px 8px 12px;
    transition: box-shadow var(--m-dur-fast) var(--m-ease-smooth), transform var(--m-dur-fast) var(--m-ease-spring);
    box-shadow: var(--m-shadow-sm);
}

.completed-toggle-wrapper:hover[b-ilqxpphy23] {
    border-color: var(--m-secondary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    box-shadow: var(--m-shadow-md);
    transform: translateY(-1px);
}

.completed-toggle-wrapper.active[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: var(--m-secondary);
    box-shadow: var(--m-shadow-glow);
    transform: scale(1.04);
}

.completed-toggle-wrapper .form-check[b-ilqxpphy23] {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Toggle Switch Styles */
.completed-switch[b-ilqxpphy23] {
    --switch-knob-size: 18px;
    --switch-border-width: 1px;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid color-mix(in srgb, var(--m-text) 20%, transparent);
    background-color: color-mix(in srgb, var(--m-text) 12%, transparent);
    background-image: none !important;
    transition: all 0.3s ease;
    position: relative; /* Required for ::before pseudo-element positioning */
    -webkit-appearance: none;
    appearance: none;
}

.completed-switch[b-ilqxpphy23]::before {
    content: '';
    position: absolute;
    width: var(--switch-knob-size);
    height: var(--switch-knob-size);
    border-radius: 50%;
    background: var(--m-surface);
    top: var(--switch-border-width);
    left: var(--switch-border-width);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.completed-switch:checked[b-ilqxpphy23]::before {
    /* Move knob to the right: 100% - knob size - border width */
    left: calc(100% - var(--switch-knob-size) - var(--switch-border-width));
    box-shadow: 0 0 8px color-mix(in srgb, var(--m-accent) 30%, transparent),
                0 2px 4px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.completed-switch:checked[b-ilqxpphy23] {
    background-color: var(--m-primary) !important;
    border-color: var(--m-primary) !important;
}

.completed-switch:focus[b-ilqxpphy23] {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primary) 20%, transparent) !important;
    border-color: var(--m-secondary);
}

.completed-switch:not(:checked):hover[b-ilqxpphy23] {
    border-color: var(--m-text-2);
    background-color: color-mix(in srgb, var(--m-text) 20%, transparent);
}

/* Toggle Label Styles */
.toggle-label[b-ilqxpphy23] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    margin-left: 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.toggle-icon[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.completed-toggle-wrapper:not(.active) .toggle-icon[b-ilqxpphy23] {
    background: var(--m-surface);
    color: var(--m-text-2);
}

.completed-toggle-wrapper.active .toggle-icon[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    color: var(--m-on-primary);
    animation: filter-toggle-sparkle-b-ilqxpphy23 0.4s var(--m-ease-spring) forwards;
}

.toggle-text-label[b-ilqxpphy23] {
    color: var(--m-text-2);
    transition: color 0.3s ease;
}

.completed-toggle-wrapper.active .toggle-text-label[b-ilqxpphy23] {
    color: color-mix(in srgb, var(--m-primary) 85%, var(--m-text));
}

.completed-count[b-ilqxpphy23] {
    font-size: 0.7rem;
    padding: 3px 8px;
    font-weight: 700;
    border-radius: 12px;
    margin-left: 4px;
}

@media (max-width: 992px) {
    .filter-row[b-ilqxpphy23] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .filter-search[b-ilqxpphy23],
    .filter-age-groups[b-ilqxpphy23],
    .filter-toggle[b-ilqxpphy23] {
        flex: 1 1 100%;
        width: 100%;
    }

    .completed-toggle-wrapper[b-ilqxpphy23] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .completed-toggle-wrapper[b-ilqxpphy23] {
        padding: 6px 12px 6px 10px;
    }

    .toggle-text-label[b-ilqxpphy23] {
        font-size: 0.85rem;
    }

    .completed-switch[b-ilqxpphy23] {
        width: 38px !important;
        height: 20px !important;
    }
}

/* Age Filter Buttons */
.age-filter-container[b-ilqxpphy23] {
    overflow-x: auto;
    overflow-y: visible; /* Prevent vertical clipping of hover effects */
    scrollbar-width: thin;
    scrollbar-color: var(--m-secondary) transparent;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px; /* Space for hover/focus effects at top */
    padding-bottom: 6px;
    margin-top: 0;
}

.age-filter-container[b-ilqxpphy23]::-webkit-scrollbar {
    height: 5px;
}

.age-filter-container[b-ilqxpphy23]::-webkit-scrollbar-track {
    background: transparent;
}

.age-filter-container[b-ilqxpphy23]::-webkit-scrollbar-thumb {
    background: var(--m-secondary);
    border-radius: 4px;
}

.filter-age-btn[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 28px;
    transition: box-shadow var(--m-dur-fast) var(--m-ease-smooth), transform var(--m-dur-fast) var(--m-ease-spring);
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.01em;
}

.filter-age-btn:not(.filter-age-btn--selected)[b-ilqxpphy23] {
    background: var(--m-surface);
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-text-2);
    box-shadow: 0 2px 4px color-mix(in srgb, var(--m-text) 3%, transparent);
}

.filter-age-btn:not(.filter-age-btn--selected):hover[b-ilqxpphy23] {
    border-color: var(--m-secondary);
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    color: var(--m-primary);
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-md);
}

.filter-age-btn:not(.filter-age-btn--selected):focus-visible[b-ilqxpphy23] {
    outline: none;
    box-shadow: var(--m-ring);
}

.filter-age-btn.filter-age-btn--selected[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    border: 2px solid var(--m-primary);
    color: var(--m-on-primary);
    box-shadow: var(--m-shadow-glow);
    transform: scale(1.04);
}

.filter-age-btn.filter-age-btn--selected:hover[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    border-color: var(--m-primary);
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--m-shadow-glow);
}

.filter-age-btn.filter-age-btn--selected:focus-visible[b-ilqxpphy23] {
    outline: none;
    box-shadow: var(--m-ring);
}

.badge-count[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-on-primary) 25%, transparent);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.filter-age-btn-all[b-ilqxpphy23] {
    font-weight: 700;
}

.filter-age-btn:not(.filter-age-btn--selected) .badge-count[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
    color: var(--m-primary);
}

.filter-clear-all-btn[b-ilqxpphy23] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 2px solid var(--m-error-border);
    color: var(--m-error);
    background: var(--m-error-bg);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 28px;
    padding: 12px 20px;
    line-height: 1;
    white-space: nowrap;
}

.filter-clear-all-btn:hover[b-ilqxpphy23] {
    background: var(--m-error);
    border-color: var(--m-error);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-error) 25%, transparent);
}

/* Sort Options Styles */
.filter-sort-btn[b-ilqxpphy23] {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.filter-sort-btn:not(.filter-sort-btn--selected)[b-ilqxpphy23] {
    background: var(--m-surface);
    border: 2px solid color-mix(in srgb, var(--m-text) 15%, transparent);
    color: var(--m-text-2);
}

.filter-sort-btn:not(.filter-sort-btn--selected):hover[b-ilqxpphy23] {
    border-color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
    color: var(--m-primary);
}

.filter-sort-btn.filter-sort-btn--selected[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    border: 2px solid var(--m-primary);
    color: var(--m-on-primary);
}

/* Accessibility */
button:focus-visible[b-ilqxpphy23] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only[b-ilqxpphy23] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .filter-card .card-body[b-ilqxpphy23] {
        padding: 16px;
    }

    .filter-title[b-ilqxpphy23] {
        font-size: 1rem;
    }

    .age-filter-container[b-ilqxpphy23] {
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .filter-age-btn[b-ilqxpphy23] {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .input-group .form-control[b-ilqxpphy23] {
        font-size: 0.875rem;
        padding: 10px 14px;
    }

    .input-group-text[b-ilqxpphy23] {
        padding: 10px 14px;
    }
}

/* Tablet and desktop optimization */
@media (min-width: 768px) {
    .filter-card[b-ilqxpphy23] {
        position: relative;
    }

    .age-filter-container[b-ilqxpphy23] {
        max-width: 100%;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .filter-card[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-bg) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-bg) 45%, transparent);
}

[data-theme="dark"] .filter-card:hover[b-ilqxpphy23] {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--m-primary) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
}

[data-theme="dark"] .filter-title[b-ilqxpphy23] {
    color: var(--m-text);
}

[data-theme="dark"] .filter-card .card-title[b-ilqxpphy23] {
    color: var(--m-text);
}

[data-theme="dark"] .input-group[b-ilqxpphy23] {
    background: var(--m-bg);
}

[data-theme="dark"] .input-group-text[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: var(--m-surface-elevated);
    color: var(--m-text-2);
}

[data-theme="dark"] .input-group .form-control[b-ilqxpphy23] {
    background: var(--m-bg);
    border-color: var(--m-surface-elevated);
    color: var(--m-text);
}

[data-theme="dark"] .input-group .form-control[b-ilqxpphy23]::placeholder {
    color: var(--m-secondary);
}

[data-theme="dark"] .input-group .filter-clear-btn[b-ilqxpphy23] {
    background: var(--m-bg);
    border-color: var(--m-surface-elevated);
    color: var(--m-text-2);
}

[data-theme="dark"] .completed-toggle-wrapper[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-bg) 100%);
    border-color: var(--m-surface-elevated);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--m-bg) 45%, transparent);
}

[data-theme="dark"] .completed-toggle-wrapper:hover[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: var(--m-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

[data-theme="dark"] .completed-toggle-wrapper.active[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: var(--m-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 25%, transparent);
}

[data-theme="dark"] .completed-switch[b-ilqxpphy23] {
    border-color: color-mix(in srgb, var(--m-primary) 85%, var(--m-text));
    background-color: var(--m-bg);
}

[data-theme="dark"] .completed-switch:not(:checked):hover[b-ilqxpphy23] {
    border-color: var(--m-primary);
    background-color: var(--m-surface-elevated);
}

[data-theme="dark"] .completed-toggle-wrapper:not(.active) .toggle-icon[b-ilqxpphy23] {
    background: var(--m-bg);
    color: var(--m-secondary);
}

[data-theme="dark"] .toggle-text-label[b-ilqxpphy23] {
    color: var(--m-text-2);
}

[data-theme="dark"] .completed-toggle-wrapper.active .toggle-text-label[b-ilqxpphy23] {
    color: var(--m-secondary);
}

[data-theme="dark"] .filter-age-btn:not(.filter-age-btn--selected)[b-ilqxpphy23] {
    background: var(--m-bg);
    border-color: var(--m-surface-elevated);
    color: var(--m-text-2);
}

[data-theme="dark"] .filter-age-btn:not(.filter-age-btn--selected):hover[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface-elevated) 100%);
    border-color: var(--m-primary);
    color: var(--m-secondary);
}

[data-theme="dark"] .filter-age-btn:not(.filter-age-btn--selected) .badge-count[b-ilqxpphy23] {
    background: var(--m-bg);
    color: var(--m-text-2);
}

[data-theme="dark"] .filter-clear-all-btn[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-error) 10%, transparent);
    border-color: var(--m-error);
    color: var(--m-error-border);
}

[data-theme="dark"] .filter-sort-btn:not(.filter-sort-btn--selected)[b-ilqxpphy23] {
    background: var(--m-bg);
    border-color: var(--m-surface-elevated);
    color: var(--m-text-2);
}

[data-theme="dark"] .filter-sort-btn:not(.filter-sort-btn--selected):hover[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border-color: var(--m-primary);
    color: var(--m-text-2);
}

/* Light mode overrides - ensures light mode when manually selected via toggle */
:is(html[data-theme="light"], html[data-theme="bright"]) .filter-card[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-bg) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
    box-shadow: var(--m-shadow-sm);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-card:hover[b-ilqxpphy23] {
    box-shadow: var(--m-shadow-md) !important;
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-title[b-ilqxpphy23] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-card .card-title[b-ilqxpphy23] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .input-group[b-ilqxpphy23] {
    background: var(--m-surface);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .input-group-text[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .input-group .form-control[b-ilqxpphy23] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .input-group .form-control[b-ilqxpphy23]::placeholder {
    color: var(--m-secondary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .input-group .filter-clear-btn[b-ilqxpphy23] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-toggle-wrapper[b-ilqxpphy23] {
    background: linear-gradient(135deg, var(--m-surface) 0%, var(--m-bg) 100%);
    border-color: color-mix(in srgb, var(--m-text) 12%, transparent);
    box-shadow: var(--m-shadow-sm);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-toggle-wrapper:hover[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: var(--m-secondary);
    box-shadow: var(--m-shadow-md);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-toggle-wrapper.active[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: var(--m-secondary);
    box-shadow: var(--m-shadow-glow);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-switch[b-ilqxpphy23] {
    border-color: color-mix(in srgb, var(--m-text) 20%, transparent);
    background-color: color-mix(in srgb, var(--m-text) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-switch:not(:checked):hover[b-ilqxpphy23] {
    border-color: var(--m-text-2);
    background-color: color-mix(in srgb, var(--m-text) 20%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-toggle-wrapper:not(.active) .toggle-icon[b-ilqxpphy23] {
    background: var(--m-surface);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .toggle-text-label[b-ilqxpphy23] {
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .completed-toggle-wrapper.active .toggle-text-label[b-ilqxpphy23] {
    color: color-mix(in srgb, var(--m-primary) 85%, var(--m-text));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-age-btn:not(.filter-age-btn--selected)[b-ilqxpphy23] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-age-btn:not(.filter-age-btn--selected):hover[b-ilqxpphy23] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: var(--m-secondary);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-age-btn:not(.filter-age-btn--selected) .badge-count[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-clear-all-btn[b-ilqxpphy23] {
    background: var(--m-error-bg);
    border-color: var(--m-error-border);
    color: var(--m-error);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-sort-btn:not(.filter-sort-btn--selected)[b-ilqxpphy23] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-text) 15%, transparent);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .filter-sort-btn:not(.filter-sort-btn--selected):hover[b-ilqxpphy23] {
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
    border-color: var(--m-primary);
    color: var(--m-primary);
}

/* --- P2 Item 6: Filter Toggle glow + sparkle animations --- */
.completed-toggle-wrapper.active[b-ilqxpphy23] {
    animation: filter-toggle-glow-pulse-b-ilqxpphy23 2.5s ease-in-out infinite;
}

@keyframes filter-toggle-glow-pulse-b-ilqxpphy23 {
    0%, 100% {
        box-shadow: var(--m-shadow-glow);
    }
    50% {
        box-shadow: var(--m-shadow-glow),
                    0 0 16px color-mix(in srgb, var(--m-primary) 20%, transparent);
    }
}

@keyframes filter-toggle-sparkle-b-ilqxpphy23 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(-10deg);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter-card[b-ilqxpphy23],
    .input-group[b-ilqxpphy23],
    .completed-toggle-wrapper[b-ilqxpphy23],
    .filter-age-btn[b-ilqxpphy23],
    .filter-sort-btn[b-ilqxpphy23],
    .filter-clear-all-btn[b-ilqxpphy23] {
        transition: none;
    }

    .filter-card:hover[b-ilqxpphy23],
    .completed-toggle-wrapper:hover[b-ilqxpphy23],
    .filter-age-btn:hover[b-ilqxpphy23],
    .filter-clear-all-btn:hover[b-ilqxpphy23],
    .input-group:focus-within[b-ilqxpphy23] {
        transform: none;
    }

    .completed-toggle-wrapper.active[b-ilqxpphy23] {
        transform: none;
        animation: none;
    }

    .completed-toggle-wrapper.active .toggle-icon[b-ilqxpphy23] {
        animation: none;
    }

    .filter-age-btn.filter-age-btn--selected[b-ilqxpphy23] {
        transform: none;
    }
}
/* /Components/FloatingPrompts.razor.rz.scp.css */
/* ── FloatingPrompts — stacked prompt cards ──
   Positioning is owned by BottomNotificationStack. This component only
   manages the cards inside the prompt lane. */

@@keyframes fp-slide-up {
    from[b-glsfg6sklg] { opacity: 0; transform: translateY(20px) scale(0.96); }
    to[b-glsfg6sklg]   { opacity: 1; transform: translateY(0)   scale(1); }
}

@@keyframes fp-glow-pulse {
    0%[b-glsfg6sklg], 100%[b-glsfg6sklg] { opacity: 0.4; }
    50%[b-glsfg6sklg]      { opacity: 0.8; }
}

.fp-stack[b-glsfg6sklg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none; /* preserve click-through gaps between cards */
}

.fp-bar[b-glsfg6sklg] {
    position: relative;
    width: 100%;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--m-surface-elevated) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--m-primary) 18%, transparent),
        0 2px 8px color-mix(in srgb, var(--m-text) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: fp-slide-up var(--fp-fadein-duration, 350ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
}

html[data-theme="dark"] .fp-bar[b-glsfg6sklg] {
    background: color-mix(in srgb, var(--m-surface-elevated) 85%, transparent);
    border-color: color-mix(in srgb, var(--m-secondary) 35%, transparent);
    box-shadow:
        0 8px 40px color-mix(in srgb, var(--m-secondary) 22%, transparent),
        0 2px 8px color-mix(in srgb, var(--m-text) 35%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 5%, transparent);
}

/* Ambient glow */
.fp-glow[b-glsfg6sklg] {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 8%, transparent) 100%);
    z-index: 0;
    animation: fp-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

/* Content layout */
.fp-content[b-glsfg6sklg] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Individual prompt row ──
   `flex-wrap: wrap` so that on mid-size viewports the action buttons can
   drop below the message instead of squeezing it. The text block keeps
   `min-width: 0` so wrapping kicks in cleanly. */
.fp-prompt[b-glsfg6sklg] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    transition:
        opacity var(--fp-fadeout-duration, 280ms) ease,
        transform var(--fp-fadeout-duration, 280ms) ease;
}

.fp-prompt.fp-dismissing[b-glsfg6sklg] {
    opacity: var(--fp-fadeout-cutoff-opacity, 0.18);
    transform: scale(0.95);
    pointer-events: none;
}

/* Text block */
.fp-text[b-glsfg6sklg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fp-text strong[b-glsfg6sklg] {
    color: var(--m-text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    /* Allow natural wrapping by default; install prompt opts into ellipsis below */
    white-space: normal;
    overflow: visible;
}

/* Truncate only the install prompt title — it is a short known string */
.fp-install .fp-text strong[b-glsfg6sklg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-sub[b-glsfg6sklg] {
    color: var(--m-text-2);
    font-size: 0.75rem;
}

/* ── AI prompt — magical styling ── */
.fp-icon-wrap[b-glsfg6sklg] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 22%, transparent) 0%,
        color-mix(in srgb, var(--m-accent) 18%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

/* Sparkle icon rotation */
.fp-icon-sparkle[b-glsfg6sklg] {
    font-size: 1.25rem;
    color: var(--m-primary);
    animation: fp-sparkle-rotate 3s ease-in-out infinite;
    z-index: 1;
}

@@keyframes fp-sparkle-rotate {
    0%[b-glsfg6sklg], 100%[b-glsfg6sklg] { transform: rotate(0deg) scale(1); }
    25%[b-glsfg6sklg]      { transform: rotate(-12deg) scale(1.15); }
    50%[b-glsfg6sklg]      { transform: rotate(0deg) scale(1); }
    75%[b-glsfg6sklg]      { transform: rotate(12deg) scale(1.1); }
}

/* Pulsing ring around icon */
.fp-sparkle-ring[b-glsfg6sklg] {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
    animation: fp-ring-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@@keyframes fp-ring-pulse {
    0%[b-glsfg6sklg], 100%[b-glsfg6sklg] { transform: scale(1); opacity: 0.6; }
    50%[b-glsfg6sklg]      { transform: scale(1.15); opacity: 0; }
}

/* AI title shimmer */
.fp-ai-title[b-glsfg6sklg] {
    /* Explicit color fallback for browsers where background-clip:text does not apply */
    color: var(--m-primary);
    background: linear-gradient(
        90deg,
        var(--m-text) 0%,
        var(--m-text) 40%,
        var(--m-accent) 50%,
        var(--m-text) 60%,
        var(--m-text) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fp-title-shimmer 4s ease-in-out infinite;
}

@@keyframes fp-title-shimmer {
    0%[b-glsfg6sklg], 100%[b-glsfg6sklg] { background-position: 100% 0; }
    50%[b-glsfg6sklg]      { background-position: -100% 0; }
}

/* Glowing CTA button */
.fp-btn-glow[b-glsfg6sklg] {
    animation: fp-btn-pulse 2.5s ease-in-out infinite;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

@@keyframes fp-btn-pulse {
    0%[b-glsfg6sklg], 100%[b-glsfg6sklg] {
        box-shadow: 0 0 8px color-mix(in srgb, var(--m-primary) 30%, transparent);
    }
    50%[b-glsfg6sklg] {
        box-shadow:
            0 0 16px color-mix(in srgb, var(--m-primary) 45%, transparent),
            0 0 32px color-mix(in srgb, var(--m-primary) 15%, transparent);
    }
}

html[data-theme="dark"] .fp-icon-sparkle[b-glsfg6sklg] {
    color: var(--m-secondary);
}

html[data-theme="dark"] .fp-sparkle-ring[b-glsfg6sklg] {
    border-color: color-mix(in srgb, var(--m-secondary) 40%, transparent);
}

html[data-theme="dark"] .fp-ai-title[b-glsfg6sklg] {
    /* Explicit color fallback for browsers where background-clip:text does not apply */
    color: var(--m-secondary);
    background: linear-gradient(
        90deg,
        var(--m-text) 0%,
        var(--m-text) 40%,
        var(--m-secondary) 50%,
        var(--m-text) 60%,
        var(--m-text) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fp-title-shimmer 4s ease-in-out infinite;
}

/* ── Install prompt ── */
.fp-install-icon[b-glsfg6sklg] {
    font-size: 1.35rem;
    color: var(--m-teal);
    flex-shrink: 0;
}

/* ── Buttons ── */
.fp-btn-primary[b-glsfg6sklg] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)) 100%);
    color: var(--m-on-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s, transform 0.15s;
}

.fp-btn-primary .material-symbols-outlined[b-glsfg6sklg] {
    font-size: 0.95rem;
}

.fp-btn-primary:hover[b-glsfg6sklg] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.fp-btn-install[b-glsfg6sklg] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 10%, transparent);
    color: var(--m-teal);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.fp-btn-install:hover[b-glsfg6sklg] {
    background: color-mix(in srgb, var(--m-teal) 20%, transparent);
    transform: translateY(-1px);
}

.fp-btn-dismiss[b-glsfg6sklg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    background: transparent;
    color: var(--m-text-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    position: relative;
    z-index: 2; /* keep the close action above ambient glow and neighboring chrome */
    pointer-events: auto;
}

.fp-btn-dismiss .material-symbols-outlined[b-glsfg6sklg] {
    font-size: 0.9rem;
}

.fp-btn-dismiss:hover[b-glsfg6sklg] {
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
    color: var(--m-text);
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .fp-bar[b-glsfg6sklg] {
        padding: 0.625rem 0.75rem;
    }

    .fp-content[b-glsfg6sklg] {
        gap: 0.625rem;
    }

    .fp-prompt[b-glsfg6sklg] {
        width: 100%;
    }

    .fp-sub[b-glsfg6sklg] {
        display: none;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fp-bar[b-glsfg6sklg] {
        animation: none;
        transform: none;
    }

    .fp-glow[b-glsfg6sklg],
    .fp-icon-sparkle[b-glsfg6sklg],
    .fp-sparkle-ring[b-glsfg6sklg],
    .fp-btn-glow[b-glsfg6sklg] {
        animation: none;
    }

    .fp-ai-title[b-glsfg6sklg] {
        animation: none;
        background: none;
        -webkit-text-fill-color: var(--m-text);
    }

    .fp-prompt.fp-dismissing[b-glsfg6sklg] {
        transition: none;
    }
}
/* /Components/GuestWarningModal.razor.rz.scp.css */
.modal-backdrop[b-k1k8kmn1ik] {
    background-color: color-mix(in srgb, var(--m-text) 50%, transparent);
}

.modal[b-k1k8kmn1ik] {
    backdrop-filter: blur(4px);
}

/* Modal Content Base */
.modal-content[b-k1k8kmn1ik] {
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--m-text) 25%, transparent);
}

.modal-header[b-k1k8kmn1ik] {
    background: transparent;
    border-bottom: none;
    padding: 1.5rem 1.5rem 0.5rem;
}

.modal-title[b-k1k8kmn1ik] {
    color: var(--m-text);
    font-weight: 600;
}

.modal-body[b-k1k8kmn1ik] {
    padding: 1rem 1.5rem;
    color: var(--m-text);
}

.modal-body p[b-k1k8kmn1ik] {
    color: var(--m-text);
}

.modal-body .text-muted[b-k1k8kmn1ik] {
    color: var(--m-text-2) !important;
}

.modal-footer[b-k1k8kmn1ik] {
    background: transparent;
    border-top: none;
    padding: 0.5rem 1.5rem 1.5rem;
}


/* /Components/Home/AboutCtaStrip.razor.rz.scp.css */
/* ============================================================
   About CTA Strip — single card band that bridges to /about
   ============================================================ */

.about-cta-strip[b-grzx5mhzh6] {
    width: 100%;
    padding: 48px 24px 64px;
    display: flex;
    justify-content: center;
}

.about-cta-strip-inner[b-grzx5mhzh6] {
    width: 100%;
    max-width: 720px;
    padding: 40px 36px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 12%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 5%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 32px color-mix(in srgb, black 25%, transparent);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-cta-strip-inner[b-grzx5mhzh6]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        transparent 55%,
        color-mix(in srgb, var(--m-teal) 10%, transparent) 100%
    );
    pointer-events: none;
    z-index: -1;
}

.about-cta-eyebrow[b-grzx5mhzh6] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--m-on-primary) 65%, transparent);
    margin-bottom: 12px;
}

.about-cta-headline[b-grzx5mhzh6] {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 24px;
    color: var(--m-on-primary);
    letter-spacing: 0;
}

.about-cta-button[b-grzx5mhzh6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--m-on-primary);
    background: linear-gradient(
        135deg,
        var(--m-primary) 0%,
        color-mix(in srgb, var(--m-primary) 60%, var(--m-secondary)) 100%
    );
    border: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 24px color-mix(in srgb, var(--m-primary) 30%, transparent);
    transition:
        transform var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.about-cta-button svg[b-grzx5mhzh6] {
    transition: transform var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.about-cta-button:hover[b-grzx5mhzh6] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--m-primary) 38%, transparent);
    color: var(--m-on-primary);
}

.about-cta-button:hover svg[b-grzx5mhzh6] {
    transform: translateX(4px);
}

.about-cta-button:focus-visible[b-grzx5mhzh6] {
    outline: 2px solid color-mix(in srgb, var(--m-accent) 90%, var(--m-on-primary));
    outline-offset: 3px;
}

/* ---- Albino Dragon (light/bright) overrides ---- */

:is(html[data-theme="light"], html[data-theme="bright"]) .about-cta-strip-inner[b-grzx5mhzh6] {
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 75%, transparent);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--m-primary) 14%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .about-cta-eyebrow[b-grzx5mhzh6] {
    color: color-mix(in srgb, var(--m-primary) 75%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .about-cta-headline[b-grzx5mhzh6] {
    color: var(--m-text);
}

/* ---- Mobile responsive ---- */

@media (max-width: 600px) {
    .about-cta-strip[b-grzx5mhzh6] {
        padding: 32px 16px 48px;
    }

    .about-cta-strip-inner[b-grzx5mhzh6] {
        padding: 32px 24px;
    }

    .about-cta-button[b-grzx5mhzh6] {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .about-cta-button[b-grzx5mhzh6],
    .about-cta-button svg[b-grzx5mhzh6] {
        transition: none;
    }

    .about-cta-button:hover[b-grzx5mhzh6] {
        transform: none;
    }

    .about-cta-button:hover svg[b-grzx5mhzh6] {
        transform: none;
    }
}
/* /Components/Home/AboutOrigin.razor.rz.scp.css */
.about-section[b-nrij08nbvn] {
  position: relative;
  overflow: hidden;
  padding: 7rem 2.5rem;
  background: var(--m-bg);
}

.about-section[b-nrij08nbvn]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 50% at 90% 30%,
      color-mix(in srgb, var(--m-primary) 8%, transparent), transparent),
    radial-gradient(ellipse 30% 40% at 5% 80%,
      color-mix(in srgb, var(--m-teal) 8%, transparent), transparent);
}

.about-section-inner[b-nrij08nbvn] {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.about-eyebrow[b-nrij08nbvn] {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--m-teal);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
}

.about-heading[b-nrij08nbvn] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--m-text);
  text-align: center;
  margin: 0 0 0.75rem 0;
}

.about-subhead[b-nrij08nbvn] {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--m-primary);
  text-align: center;
  margin: 0 0 3.5rem 0;
}

.about-body[b-nrij08nbvn] {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--m-text);
}

.about-body p[b-nrij08nbvn] {
  margin: 0 0 1.25rem 0;
}

.about-body p:first-of-type[b-nrij08nbvn]::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5rem;
  float: left;
  line-height: 0.85;
  margin: 0.3rem 0.7rem 0 0;
  color: var(--m-primary);
  font-weight: 400;
}

.about-divider[b-nrij08nbvn] {
  border: none;
  height: 1px;
  margin: 3rem 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--m-text) 14%, transparent), transparent);
}

.vision-block[b-nrij08nbvn] {
  text-align: center;
  padding: 2rem 0;
}

.vision-eyebrow[b-nrij08nbvn] {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--m-primary);
  font-weight: 700;
  margin-bottom: 1rem;
}

.vision-text[b-nrij08nbvn] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--m-text);
  max-width: 640px;
  margin: 0 auto;
}

.vision-text em[b-nrij08nbvn] {
  font-style: italic;
  font-weight: 300;
  color: var(--m-primary);
}

@media (max-width: 720px) {
  .about-section[b-nrij08nbvn] { padding: 4.5rem 1.25rem; }
}
/* /Components/Home/ActiveAdventures.razor.rz.scp.css */
/* "Continue your adventure" section — Dragon Scale reconciliation.
   Mirrors HomeWelcome.razor.css's shared section/eyebrow scaffolding because Blazor
   scoped CSS only applies to the markup this component renders. All colour = --m-*
   token or color-mix() of one. The ActiveSessionCard children bring their own styling
   and Bootstrap col-* classes — do NOT restyle the card here. */

/* ============ SHARED SECTION SCAFFOLDING (mirrors HomeWelcome) ============ */
.fv-section[b-mmksb30pd8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

.fv-eyebrow[b-mmksb30pd8] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--m-primary);
    margin-bottom: 0.5rem;
}

.fv-eyebrow-dot[b-mmksb30pd8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-teal);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-teal) 80%, transparent);
    animation: fv-dot-pulse-b-mmksb30pd8 2s ease-in-out infinite;
}

[data-theme="dark"] .fv-eyebrow[b-mmksb30pd8] {
    color: var(--m-secondary);
}

@keyframes fv-dot-pulse-b-mmksb30pd8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ============ CONTINUE YOUR ADVENTURE ============ */
.fv-continue-head[b-mmksb30pd8] {
    max-width: 720px;
    margin-bottom: 1.875rem;
}

.fv-continue-lead[b-mmksb30pd8] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--m-text-2);
    margin-top: 0.375rem;
}

/* ============ PER-PROFILE GROUP ============ */
/* One sub-group per child profile (avatar + name header, then that child's cards).
   Built from existing --m-* tokens only — no new tokens, no novel chrome. */
.fv-continue-group[b-mmksb30pd8] {
    margin-bottom: 1.75rem;
}

.fv-continue-group:last-child[b-mmksb30pd8] {
    margin-bottom: 0;
}

.fv-continue-group-head[b-mmksb30pd8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.fv-continue-avatar[b-mmksb30pd8] {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
}

/* The image (or loading/fallback placeholder) lives inside the CachedMystiraImage child
   component, so this component's scope attribute is never stamped onto it. Pierce the
   .fv-continue-avatar wrapper with ::deep to reach the child-rendered element — same idiom
   AdventureCard.razor.css / CharacterCard.razor.css use for CachedMystiraImage avatars.
   The fv-continue-avatar-img class is set via CachedMystiraImage's ImageClass and lands on
   both the <img> and the .cached-image-placeholder div. */
.fv-continue-avatar[b-mmksb30pd8]  .fv-continue-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fv-continue-avatar-fallback[b-mmksb30pd8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--m-primary);
}

.fv-continue-avatar-fallback .material-symbols-outlined[b-mmksb30pd8] {
    font-size: 1.375rem;
    line-height: 1;
}

.fv-continue-group-name[b-mmksb30pd8] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--m-text);
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .fv-eyebrow-dot[b-mmksb30pd8] {
        animation: none !important;
    }
}
/* /Components/Home/AgeBands.razor.rz.scp.css */
.ages-section[b-z4m4etqttg] {
  padding: 6rem 2.5rem;
  background: var(--m-bg);
}

.ages-section-inner[b-z4m4etqttg] {
  max-width: 1200px;
  margin: 0 auto;
}

.ages-section-eyebrow[b-z4m4etqttg] {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--m-teal);
  font-weight: 700;
  margin-bottom: 1rem;
}

.ages-section-heading[b-z4m4etqttg] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--m-text);
  max-width: 700px;
  margin: 0 0 1.25rem 0;
}

.ages-section-heading em[b-z4m4etqttg] {
  font-style: italic;
  font-weight: 300;
  color: var(--m-primary);
}

.ages-section-sub[b-z4m4etqttg] {
  font-size: 1.1rem;
  color: var(--m-text-2);
  max-width: 580px;
  margin: 0 0 2.5rem 0;
}

.ages-grid[b-z4m4etqttg] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.age-card[b-z4m4etqttg] {
  position: relative;
  padding: 1.75rem 1.25rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--m-text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-text) 10%, transparent);
  transition: all 0.3s ease;
  cursor: default;
}

.age-card:hover[b-z4m4etqttg] {
  transform: translateY(-4px);
  border-color: var(--m-primary);
}

.age-card-primary[b-z4m4etqttg] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-primary) 8%, transparent),
    color-mix(in srgb, var(--m-teal) 8%, transparent));
  border-color: var(--m-primary);
}

.age-card-primary[b-z4m4etqttg]::after {
  content: 'Primary';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-on-primary);
  background: var(--m-primary);
  border-radius: 999px;
}

.age-range[b-z4m4etqttg] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--m-text);
}

.age-status[b-z4m4etqttg] {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-teal);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.age-card-primary .age-status[b-z4m4etqttg] {
  color: var(--m-primary);
}

.age-focus[b-z4m4etqttg] {
  font-size: 0.85rem;
  color: var(--m-text-2);
  margin: 0;
}

@media (max-width: 720px) {
  .ages-section[b-z4m4etqttg] { padding: 4.5rem 1.25rem; }
}
/* /Components/Home/FeatureCards.razor.rz.scp.css */
/* ---- Feature Cards Section (v2) ---- */

.feature-cards-section[b-h5a634yk6z] {
    border-top: 1px solid color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    padding-top: 56px;
    margin-top: 0;
    background: linear-gradient(180deg, var(--m-bg) 0%, transparent 100%);
    border-radius: 0 0 20px 20px;
}

/* Reset box-sizing to prevent Bootstrap .card styles from leaking in */
.feature-card-v2[b-h5a634yk6z] {
    box-sizing: border-box;
    padding: 28px 24px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 10%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 5%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition:
        transform var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
        border-color var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Energy card polish for feature cards */
html[data-theme="dark"] .feature-card-v2.m-energy-card[b-h5a634yk6z]::after,
:is(html[data-theme="light"], html[data-theme="bright"]) .feature-card-v2.m-energy-card[b-h5a634yk6z]::after {
    background: color-mix(in srgb, var(--m-bg) 90%, transparent);
    backdrop-filter: blur(16px);
    transition: background var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.feature-card-v2:hover[b-h5a634yk6z] {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--m-on-primary) 20%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, black 30%, transparent),
        0 0 24px color-mix(in srgb, var(--m-primary, #5b3cc4) 25%, transparent);
}

html[data-theme="dark"] .feature-card-v2:hover[b-h5a634yk6z] {
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, black 40%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary, #c7b8ff) 30%, transparent);
}

.feature-card-icon[b-h5a634yk6z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px color-mix(in srgb, black 15%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-v2:hover .feature-card-icon[b-h5a634yk6z] {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 20px color-mix(in srgb, black 25%, transparent);
}

/* Icon pulse glow */
.feature-card-icon svg[b-h5a634yk6z] {
    animation: fc-icon-pulse-b-h5a634yk6z 3s ease-in-out infinite;
}

.feature-card-icon--choices svg[b-h5a634yk6z] { animation-delay: 0s; }
.feature-card-icon--magic svg[b-h5a634yk6z] { animation-delay: 1s; }
.feature-card-icon--growth svg[b-h5a634yk6z] { animation-delay: 2s; }

@keyframes fc-icon-pulse-b-h5a634yk6z {
    0%, 100% { filter: drop-shadow(0 0 0px transparent); }
    50% { filter: drop-shadow(0 0 6px currentColor); }
}

.feature-card-icon--choices[b-h5a634yk6z] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 35%, transparent), color-mix(in srgb, var(--m-accent) 25%, transparent));
    color: var(--m-accent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
}

.feature-card-icon--magic[b-h5a634yk6z] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 35%, transparent), color-mix(in srgb, var(--m-primary) 25%, transparent));
    color: var(--m-accent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
}

.feature-card-icon--growth[b-h5a634yk6z] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-teal) 35%, transparent), color-mix(in srgb, var(--m-primary) 25%, transparent));
    color: var(--m-teal);
    border: 1px solid color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.feature-card-title[b-h5a634yk6z] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--m-on-primary);
    margin-bottom: 8px;
}

.feature-card-body[b-h5a634yk6z] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--m-on-primary) 80%, transparent);
    margin: 0;
}

/* Light mode feature cards use standard card styling */
:is(html[data-theme="light"], html[data-theme="bright"]) .feature-cards-section[b-h5a634yk6z] {
    background: linear-gradient(180deg, var(--m-surface-hover) 0%, transparent 100%);
    border-top-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .feature-card-v2[b-h5a634yk6z] {
    background: color-mix(in srgb, var(--m-on-primary) 85%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .feature-card-v2:hover[b-h5a634yk6z] {
    border-color: color-mix(in srgb, var(--m-primary) 25%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--m-primary) 12%, transparent),
        0 0 20px color-mix(in srgb, var(--m-primary, #5b3cc4) 18%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .feature-card-v2 .feature-card-title[b-h5a634yk6z] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .feature-card-v2 .feature-card-body[b-h5a634yk6z] {
    color: var(--m-text-2);
}

/* Gradient border shimmer on hover */
.feature-card-v2[b-h5a634yk6z]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--m-primary) 8%, transparent),
        transparent
    );
    transition: none;
    pointer-events: none;
    z-index: 0;
}

.feature-card-v2:hover[b-h5a634yk6z]::before {
    animation: fc-shimmer-sweep-b-h5a634yk6z 0.8s ease-out forwards;
}

@keyframes fc-shimmer-sweep-b-h5a634yk6z {
    from { left: -50%; }
    to { left: 150%; }
}

/* Entrance animation */
.feature-card-v2[b-h5a634yk6z] {
    animation: fc-card-enter-b-h5a634yk6z 0.5s ease-out both;
}

.fc-stagger-1 .feature-card-v2[b-h5a634yk6z] { animation-delay: 0.1s; }
.fc-stagger-2 .feature-card-v2[b-h5a634yk6z] { animation-delay: 0.2s; }
.fc-stagger-3 .feature-card-v2[b-h5a634yk6z] { animation-delay: 0.3s; }

@keyframes fc-card-enter-b-h5a634yk6z {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card-v2[b-h5a634yk6z] {
        animation: none;
        transition: none;
    }

    .feature-card-v2:hover[b-h5a634yk6z] {
        transform: none;
    }

    .feature-card-icon[b-h5a634yk6z] {
        transition: none;
    }

    .feature-card-icon svg[b-h5a634yk6z] {
        animation: none;
    }

    .feature-card-v2[b-h5a634yk6z]::before {
        display: none;
    }
}
/* /Components/Home/HeroBadgePill.razor.rz.scp.css */
.hero-badge-pill[b-1ovpqeeh3u] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--m-accent) 90%, var(--m-on-primary));
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 10%, transparent), color-mix(in srgb, var(--m-secondary) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--m-accent) 20%, transparent);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: badge-float-b-1ovpqeeh3u 4s ease-in-out infinite;
}

/* Marketing-mode variant: marketing copy ("Alpha now live · mystira.app") is
   intentionally mixed-case; uppercase transformation would shout. Authenticated
   home and admin uses keep the default uppercase styling for visual hierarchy. */
.hero-badge-pill--marketing[b-1ovpqeeh3u] {
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.hero-badge-pill[b-1ovpqeeh3u]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--m-accent) 15%, transparent),
        transparent
    );
    animation: bp-shimmer-sweep-b-1ovpqeeh3u 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bp-shimmer-sweep-b-1ovpqeeh3u {
    0%, 70% { left: -100%; }
    100% { left: 250%; }
}

.badge-sparkle-icon[b-1ovpqeeh3u] {
    color: var(--m-accent);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    animation: bp-sparkle-rotate-b-1ovpqeeh3u 4s ease-in-out infinite;
}

@keyframes bp-sparkle-rotate-b-1ovpqeeh3u {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    75% { transform: rotate(-10deg) scale(0.95); }
}

@keyframes badge-float-b-1ovpqeeh3u {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 12px color-mix(in srgb, var(--m-accent) 15%, transparent);
    }
    50% {
        transform: translateY(-4px);
        box-shadow: 0 4px 18px color-mix(in srgb, var(--m-accent) 30%, transparent);
    }
}

/* Light mode: accent-yellow text (≈#f6c453) on near-transparent bg fails contrast (~2.5:1).
   Switch to dark brand text on tinted opaque surface for WCAG AA 4.5:1 compliance.
   Border raised from 20% to 50% for 3:1 UI component contrast. */
:is(html[data-theme="light"], html[data-theme="bright"]) .hero-badge-pill[b-1ovpqeeh3u] {
    color: var(--m-text);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-accent) 18%, var(--m-surface)),
        color-mix(in srgb, var(--m-secondary) 15%, var(--m-surface))
    );
    border: 1px solid color-mix(in srgb, var(--m-accent) 50%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .badge-sparkle-icon[b-1ovpqeeh3u] {
    color: color-mix(in srgb, var(--m-accent) 75%, var(--m-warning));
}

@media (prefers-reduced-motion: reduce) {
    .hero-badge-pill[b-1ovpqeeh3u] {
        animation: none;
    }

    .hero-badge-pill[b-1ovpqeeh3u]::after {
        display: none;
    }

    .badge-sparkle-icon[b-1ovpqeeh3u] {
        animation: none;
    }
}
/* /Components/Home/HeroChipsCard.razor.rz.scp.css */
/* ============================================================
   Hero Chips Card — right-column glass surface for Variant A
   ============================================================ */

.hero-chips-card[b-f23wrgtu5u] {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 32px 28px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 12%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 6%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
        0 12px 36px color-mix(in srgb, black 30%, transparent),
        0 0 24px color-mix(in srgb, var(--m-primary) 15%, transparent);
    overflow: hidden;
    isolation: isolate;
}

/* Soft inner glow behind the chips */
.hero-chips-card[b-f23wrgtu5u]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--m-secondary) 12%, transparent) 0%,
        transparent 50%,
        color-mix(in srgb, var(--m-teal) 10%, transparent) 100%
    );
    pointer-events: none;
    z-index: -1;
}

.hero-chips-list[b-f23wrgtu5u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-chip[b-f23wrgtu5u] {
    display: flex;
    /* flex-start so the icon aligns with the first line of the title rather than
       visually centring against the multi-line title + body block. */
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 10%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 4%, transparent);
    transition:
        transform var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
        border-color var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
        background var(--m-dur-base, 200ms) var(--m-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.hero-chip:hover[b-f23wrgtu5u] {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
}

.hero-chip-icon[b-f23wrgtu5u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--m-secondary);
    background: color-mix(in srgb, var(--m-secondary) 14%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, black 15%, transparent);
}

.hero-chip-text[b-f23wrgtu5u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hero-chip-label[b-f23wrgtu5u] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--m-on-primary);
}

.hero-chip-body[b-f23wrgtu5u] {
    font-size: 0.825rem;
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--m-on-primary) 72%, transparent);
}

/* ---- Albino Dragon (light/bright) overrides ---- */

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chips-card[b-f23wrgtu5u] {
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 70%, transparent);
    box-shadow:
        0 12px 36px color-mix(in srgb, var(--m-primary) 18%, transparent),
        0 0 24px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chip[b-f23wrgtu5u] {
    border-color: color-mix(in srgb, var(--m-primary) 18%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 80%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chip:hover[b-f23wrgtu5u] {
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 95%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chip-icon[b-f23wrgtu5u] {
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chip-label[b-f23wrgtu5u] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .hero-chip-body[b-f23wrgtu5u] {
    color: color-mix(in srgb, var(--m-text) 72%, transparent);
}

/* ---- Mobile responsive ---- */

@media (max-width: 991.98px) {
    .hero-chips-card[b-f23wrgtu5u] {
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .hero-chips-card[b-f23wrgtu5u] {
        padding: 24px 20px;
    }

    .hero-chip[b-f23wrgtu5u] {
        padding: 12px 14px;
        gap: 12px;
    }

    .hero-chip-icon[b-f23wrgtu5u] {
        width: 32px;
        height: 32px;
    }

    .hero-chip-label[b-f23wrgtu5u] {
        font-size: 0.9rem;
    }

    .hero-chip-body[b-f23wrgtu5u] {
        font-size: 0.78rem;
        line-height: 1.4;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .hero-chip[b-f23wrgtu5u] {
        transition: none;
    }

    .hero-chip:hover[b-f23wrgtu5u] {
        transform: none;
    }
}
/* /Components/Home/HeroPortalVisual.razor.rz.scp.css */
/* Portal Visual — the framed M logo / video area */

.portal-visual[b-kxy9b5wuwy] {
    position: relative;
    width: 100%;
    max-width: 680px;
    /* aspect-ratio alone doesn't give child percentage-heights a definite size
       in a flex column context — min-height ensures the portal never collapses */
    aspect-ratio: 0.85;
    min-height: 400px;
    margin: 0 auto;
    --pointer-x: 0.5;
    --pointer-y: 0.5;
    --pointer-proximity: 0;
}

/* Ambient glow behind everything */
.portal-ambient-glow[b-kxy9b5wuwy] {
    position: absolute;
    inset: 8%;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 42%),
        radial-gradient(circle at 48% 58%, color-mix(in srgb, var(--m-accent) 8%, transparent), transparent 34%);
    filter: blur(30px);
    z-index: 0;
}

/* Observatory light tubes behind the portal */
.observatory-tube[b-kxy9b5wuwy] {
    position: absolute;
    width: 3px;
    top: 0;
    bottom: 30%;
    filter: blur(20px);
    z-index: 0;
    animation: tube-pulse-b-kxy9b5wuwy 7s ease-in-out infinite;
}

.observatory-tube-left[b-kxy9b5wuwy] {
    left: 30%;
    background: linear-gradient(to top, color-mix(in srgb, var(--m-primary) 15%, transparent), transparent);
}

.observatory-tube-right[b-kxy9b5wuwy] {
    right: 30%;
    background: linear-gradient(to top, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent);
    animation-delay: 3.5s;
}

@keyframes tube-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.18; }
}

/* Floating particles */
.portal-particles[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.portal-particle[b-kxy9b5wuwy] {
    position: absolute;
    border-radius: 50%;
    animation: particle-drift-b-kxy9b5wuwy linear infinite;
}

.portal-particle.p1[b-kxy9b5wuwy] {
    left: 12%;
    top: 26%;
    width: 6px;
    height: 6px;
    background: var(--m-teal);
    animation-duration: 4.2s;
    animation-delay: 0.1s;
}

.portal-particle.p2[b-kxy9b5wuwy] {
    left: 84%;
    top: 18%;
    width: 8px;
    height: 8px;
    background: var(--m-secondary);
    animation-duration: 5.4s;
    animation-delay: 0.8s;
}

.portal-particle.p3[b-kxy9b5wuwy] {
    left: 18%;
    top: 76%;
    width: 5px;
    height: 5px;
    background: var(--m-accent);
    animation-duration: 4.8s;
    animation-delay: 1.4s;
}

.portal-particle.p4[b-kxy9b5wuwy] {
    left: 78%;
    top: 70%;
    width: 6px;
    height: 6px;
    background: var(--m-teal);
    animation-duration: 5.8s;
    animation-delay: 2s;
}

.portal-particle.p5[b-kxy9b5wuwy] {
    left: 42%;
    top: 10%;
    width: 5px;
    height: 5px;
    background: var(--m-secondary);
    animation-duration: 4.6s;
    animation-delay: 0.6s;
}

/* Star-shaped sparkle particles */
.portal-particle.star[b-kxy9b5wuwy] {
    border-radius: 0;
    clip-path: polygon(
        50% 0%, 54% 43%, 100% 50%,
        54% 57%, 50% 100%, 46% 57%,
        0% 50%, 46% 43%
    );
}

.portal-particle.p6[b-kxy9b5wuwy] {
    left: 6%;
    top: 52%;
    width: 9px;
    height: 9px;
    background: var(--m-accent);
    animation-name: particle-drift-wide-b-kxy9b5wuwy;
    animation-duration: 6.2s;
    animation-delay: 1.0s;
}

.portal-particle.p7[b-kxy9b5wuwy] {
    left: 88%;
    top: 40%;
    width: 5px;
    height: 5px;
    background: var(--m-primary);
    animation-name: particle-drift-slow-b-kxy9b5wuwy;
    animation-duration: 7.4s;
    animation-delay: 2.4s;
}

.portal-particle.p8[b-kxy9b5wuwy] {
    left: 32%;
    top: 88%;
    width: 8px;
    height: 8px;
    background: var(--m-secondary);
    animation-name: particle-drift-b-kxy9b5wuwy;
    animation-duration: 5.0s;
    animation-delay: 3.2s;
}

.portal-particle.p9[b-kxy9b5wuwy] {
    left: 70%;
    top: 8%;
    width: 5px;
    height: 5px;
    background: var(--m-teal);
    animation-name: particle-drift-slow-b-kxy9b5wuwy;
    animation-duration: 8.1s;
    animation-delay: 0.3s;
}

.portal-particle.p10[b-kxy9b5wuwy] {
    left: 56%;
    top: 82%;
    width: 10px;
    height: 10px;
    background: var(--m-accent);
    animation-name: particle-drift-wide-b-kxy9b5wuwy;
    animation-duration: 5.6s;
    animation-delay: 1.8s;
}

@keyframes particle-drift-b-kxy9b5wuwy {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.15;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-20px) translateX(5px);
        opacity: 0;
    }
}

@keyframes particle-drift-slow-b-kxy9b5wuwy {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        opacity: 0.9;
    }
    75% {
        opacity: 0.65;
    }
    100% {
        transform: translateY(-32px) translateX(-8px) rotate(120deg);
        opacity: 0;
    }
}

@keyframes particle-drift-wide-b-kxy9b5wuwy {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.2;
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 0.75;
    }
    100% {
        transform: translateY(-28px) translateX(14px) rotate(-90deg);
        opacity: 0;
    }
}

/* Outer wrapper carries the float animation so transforms compose independently */
.portal-float-outer[b-kxy9b5wuwy] {
    position: relative;
    width: 100%;
    height: 100%;
    animation: portal-float-b-kxy9b5wuwy 7.5s ease-in-out infinite;
}

@keyframes portal-float-b-kxy9b5wuwy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Inner wrapper carries pointer parallax — independent of the float animation */
.portal-float-wrapper[b-kxy9b5wuwy] {
    position: relative;
    width: 100%;
    height: 100%;
    transform: perspective(800px)
               rotateY(calc((var(--pointer-x) - 0.5) * 6deg))
               rotateX(calc((var(--pointer-y) - 0.5) * -4deg));
    transition: transform 0.3s ease-out;
}

/* Glass panel behind the frame */
.portal-glass-panel[b-kxy9b5wuwy] {
    position: absolute;
    inset: 5%;
    border-radius: 2rem;
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 3%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 80px color-mix(in srgb, black 30%, transparent);
}

/* Inner glow pulsing behind the frame */
.portal-inner-glow[b-kxy9b5wuwy] {
    position: absolute;
    inset: 15%;
    border-radius: 2rem;
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--m-primary) 20%, transparent), transparent 48%),
        radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--m-accent) 8%, transparent), transparent 24%);
    filter: blur(30px);
    z-index: 0;
    animation: inner-glow-pulse-b-kxy9b5wuwy 5.2s ease-in-out infinite;
}

@keyframes inner-glow-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.16; transform: scale(0.96); }
    50% { opacity: 0.32; transform: scale(1.04); }
}

/* Frame area — positions the SVG frame and inner content */
.portal-frame-area[b-kxy9b5wuwy] {
    position: absolute;
    inset: 9%;
    z-index: 2;
}

/* Container for JS-injected external SVG frames — same positioning as inline */
.frame-inject-container[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Ornate SVG frame — antique gold with restrained glow */
.ornate-frame-svg[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-accent) 12%, transparent));
    animation: frame-glow-pulse-b-kxy9b5wuwy 6s ease-in-out infinite;
}

@keyframes frame-glow-pulse-b-kxy9b5wuwy {
    0%, 100% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-accent) 8%, transparent)); }
    50% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--m-accent) 20%, transparent)); }
}

/* Purple/cyan edge reflections */
.frame-reflection-purple[b-kxy9b5wuwy],
.frame-reflection-cyan[b-kxy9b5wuwy] {
    animation: reflection-shift-b-kxy9b5wuwy 8s ease-in-out infinite;
}

.frame-reflection-cyan[b-kxy9b5wuwy] {
    animation-delay: 4s;
}

@keyframes reflection-shift-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.2; }
}

/* Inner rim glow */
.inner-rim-glow[b-kxy9b5wuwy] {
    animation: inner-rim-pulse-b-kxy9b5wuwy 6s ease-in-out infinite;
}

@keyframes inner-rim-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Gem sparkle animation — restrained scale */
.gem-sparkle[b-kxy9b5wuwy] {
    transform-origin: center;
    animation: gem-sparkle-b-kxy9b5wuwy 3s ease-in-out infinite;
}

.corner-tl .gem-sparkle[b-kxy9b5wuwy] { animation-delay: 0s; }
.corner-tr .gem-sparkle[b-kxy9b5wuwy] { animation-delay: 0.7s; }
.corner-bl .gem-sparkle[b-kxy9b5wuwy] { animation-delay: 1.4s; }
.corner-br .gem-sparkle[b-kxy9b5wuwy] { animation-delay: 2.1s; }

/* Use transform: scale() instead of animating the SVG r attribute,
   which has inconsistent browser support (Firefox < 128 ignores it). */
@keyframes gem-sparkle-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Top/bottom ornament pulse — slowed for subtlety */
.top-gem[b-kxy9b5wuwy], .bottom-gem[b-kxy9b5wuwy] {
    animation: ornament-pulse-b-kxy9b5wuwy 6s ease-in-out infinite;
}

.bottom-gem[b-kxy9b5wuwy] { animation-delay: 3s; }

/* Mid-side diamond ornaments */
.mid-gem[b-kxy9b5wuwy] {
    animation: ornament-pulse-b-kxy9b5wuwy 8s ease-in-out infinite;
}

.mid-right .mid-gem[b-kxy9b5wuwy] { animation-delay: 4s; }

@keyframes ornament-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Inner content behind the frame */
.portal-inner-content[b-kxy9b5wuwy] {
    --_portal-core:   #19285a;
    --_portal-mid:    #10183a;
    --_portal-deep:   #0a1027;

    position: absolute;
    inset: 10%;
    overflow: hidden;
    border-radius: 1.25rem;
    background: radial-gradient(circle at 50% 35%, var(--_portal-core) 0%, var(--_portal-mid) 48%, var(--_portal-deep) 100%);
    box-shadow: inset 0 0 60px color-mix(in srgb, var(--m-on-accent) 90%, transparent);
    z-index: 1;
}

/* Cosmic background lighting inside frame */
.portal-cosmic-bg[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--m-accent) 6%, transparent), transparent 35%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--m-teal) 15%, transparent), transparent 42%),
        radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 30%);
    animation: cosmic-pulse-b-kxy9b5wuwy 6s ease-in-out infinite;
}

@keyframes cosmic-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.28; }
}

/* Orbit rings */
.orbit-ring[b-kxy9b5wuwy] {
    position: absolute;
    border-radius: 50%;
    border-style: dashed;
    border-width: 1px;
}

.orbit-ring-1[b-kxy9b5wuwy] {
    inset: 20%;
    border-color: color-mix(in srgb, var(--m-teal) 12%, transparent);
    animation: orbit-spin-b-kxy9b5wuwy 20s linear infinite;
}

.orbit-ring-2[b-kxy9b5wuwy] {
    inset: 13%;
    border-color: color-mix(in srgb, var(--m-secondary) 10%, transparent);
    border-style: solid;
    animation: orbit-spin-b-kxy9b5wuwy 28s linear infinite reverse;
}

@keyframes orbit-spin-b-kxy9b5wuwy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Slow dimensional swirl — conic gradient rotating */
.portal-depth-swirl[b-kxy9b5wuwy] {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--m-teal) 12%, transparent),
        color-mix(in srgb, var(--m-primary) 18%, transparent),
        color-mix(in srgb, var(--m-accent) 6%, transparent),
        color-mix(in srgb, var(--m-teal) 12%, transparent)
    );
    filter: blur(16px);
    z-index: 2;
    animation: swirl-rotate-b-kxy9b5wuwy 40s linear infinite;
}

@keyframes swirl-rotate-b-kxy9b5wuwy {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* World hint — faint silhouette inside portal depth */
.portal-world-hint[b-kxy9b5wuwy] {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--m-primary) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--m-teal) 6%, transparent) 0%, transparent 50%);
    z-index: 2;
    opacity: 0.12;
    animation: world-hint-pulse-b-kxy9b5wuwy 8s ease-in-out infinite;
}

@keyframes world-hint-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.08; transform: scale(0.98); }
    50% { opacity: 0.18; transform: scale(1.02); }
}

/* Portal light beams — faint radial from artifact center */
.portal-light-beams[b-kxy9b5wuwy] {
    position: absolute;
    inset: 10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--m-accent) 6%, transparent), transparent 60%);
    z-index: 2;
    animation: beam-pulse-b-kxy9b5wuwy 5s ease-in-out infinite;
}

@keyframes beam-pulse-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.04; }
    50% { opacity: 0.12; }
}

/* Vignette */
.portal-vignette[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(circle at center, transparent 0%, transparent 40%, color-mix(in srgb, black 8%, transparent) 60%, color-mix(in srgb, black 18%, transparent) 100%);
}

/* Video layer */
.portal-video-layer[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 5;
    transition: opacity 0.4s ease;
}

.portal-video-layer.fading-out[b-kxy9b5wuwy] {
    opacity: 0;
}

.portal-video[b-kxy9b5wuwy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.skip-intro-btn[b-kxy9b5wuwy] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--m-on-primary) 85%, transparent);
    background: color-mix(in srgb, var(--m-on-accent) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 12%, transparent);
    border-radius: 12px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    z-index: 10;
}

.skip-intro-btn:hover[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-on-accent) 90%, transparent);
    color: var(--m-on-primary);
}

.skip-intro-btn:focus-visible[b-kxy9b5wuwy] {
    outline: 2px solid color-mix(in srgb, var(--m-accent) 70%, transparent);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--m-on-accent) 90%, transparent);
    color: var(--m-on-primary);
}

/* Static logo layer */
.portal-logo-layer[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: logo-fade-in-b-kxy9b5wuwy 0.55s ease-out;
}

.portal-logo-layer.entering[b-kxy9b5wuwy] {
    opacity: 0;
    transform: scale(0.96);
}

/* Video → artifact transition emerges from glow burst */
@keyframes logo-fade-in-b-kxy9b5wuwy {
    from {
        opacity: 0;
        transform: scale(0.8);
        filter: drop-shadow(0 0 60px color-mix(in srgb, var(--m-primary) 60%, transparent));
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent));
    }
}

/* Logo glow aura behind the M — intensifies as cursor approaches */
.logo-glow-aura[b-kxy9b5wuwy] {
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--m-teal) 18%, transparent), color-mix(in srgb, var(--m-primary) 15%, transparent), transparent 72%);
    filter: blur(30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    animation: logo-glow-breath-b-kxy9b5wuwy 5.2s ease-in-out infinite;
}

@keyframes logo-glow-breath-b-kxy9b5wuwy {
    0%, 100% { opacity: 0.24; transform: scale(0.98); }
    50% { opacity: 0.38; transform: scale(1.02); }
}

/* The M logo image — three-phase energy loop with pointer parallax offset +
   proximity lean: scale grows as cursor approaches the card from outside. */
.portal-logo-img[b-kxy9b5wuwy] {
    position: relative;
    z-index: 5;
    width: 65%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    animation: logo-hover-b-kxy9b5wuwy 5.8s ease-in-out infinite;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent));
    transform: translateX(calc((var(--pointer-x) - 0.5) * -8px))
               translateY(calc((var(--pointer-y) - 0.5) * -6px))
               scale(calc(1 + var(--pointer-proximity) * 0.12));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease-out;
}

/* Three-phase energy loop: gather → pulse → stabilize */
@keyframes logo-hover-b-kxy9b5wuwy {
    /* Phase A: Energy gathering */
    0% {
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent));
    }
    /* Phase B: Portal pulse — glow burst, tiny rotation */
    45% {
        filter: drop-shadow(0 0 44px color-mix(in srgb, var(--m-primary) 42%, transparent));
    }
    /* Phase C: Stabilize */
    100% {
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent));
    }
}

/* Reflection beneath the portal */
.portal-reflection[b-kxy9b5wuwy] {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 10px;
    border-radius: 50%;
    z-index: 1;
    animation: reflection-pulse-b-kxy9b5wuwy 4.8s ease-in-out infinite;
}

@keyframes reflection-pulse-b-kxy9b5wuwy {
    0%, 100% {
        opacity: 0.1;
        transform: translateX(-50%) scaleX(0.9);
        background: color-mix(in srgb, var(--m-teal) 15%, transparent);
        box-shadow: 0 0 30px color-mix(in srgb, var(--m-teal) 10%, transparent);
    }
    50% {
        opacity: 0.24;
        transform: translateX(-50%) scaleX(1.08);
        background: color-mix(in srgb, var(--m-teal) 20%, transparent);
        box-shadow: 0 0 50px color-mix(in srgb, var(--m-teal) 15%, transparent);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .portal-float-outer[b-kxy9b5wuwy],
    .portal-float-wrapper[b-kxy9b5wuwy],
    .portal-particle[b-kxy9b5wuwy],
    .ornate-frame-svg[b-kxy9b5wuwy],
    .gem-sparkle[b-kxy9b5wuwy],
    .portal-cosmic-bg[b-kxy9b5wuwy],
    .orbit-ring[b-kxy9b5wuwy],
    .portal-inner-glow[b-kxy9b5wuwy],
    .portal-logo-img[b-kxy9b5wuwy],
    .logo-glow-aura[b-kxy9b5wuwy],
    .portal-reflection[b-kxy9b5wuwy],
    .top-gem[b-kxy9b5wuwy],
    .bottom-gem[b-kxy9b5wuwy],
    .observatory-tube[b-kxy9b5wuwy],
    .portal-depth-swirl[b-kxy9b5wuwy],
    .portal-world-hint[b-kxy9b5wuwy],
    .portal-light-beams[b-kxy9b5wuwy],
    .frame-reflection-purple[b-kxy9b5wuwy],
    .frame-reflection-cyan[b-kxy9b5wuwy],
    .inner-rim-glow[b-kxy9b5wuwy] {
        animation: none;
    }

    .portal-float-wrapper[b-kxy9b5wuwy] {
        transform: none;
    }

    .portal-logo-img[b-kxy9b5wuwy] {
        transform: none;
    }
}

/* ============================================================
   Light Mode — Crystal Orb Theme (Albino Dragon)
   ============================================================ */

/* Inner content: translucent crystal sphere with pastel refractions */
.portal-inner-content:is([data-theme="light"], [data-theme="bright"])[b-kxy9b5wuwy],
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-inner-content[b-kxy9b5wuwy] {
    --_portal-core:   #f0eaff;
    --_portal-mid:    #e8e0fc;
    --_portal-deep:   #ddd4f8;
    box-shadow: inset 0 0 60px color-mix(in srgb, var(--m-secondary) 50%, transparent);
}

/* Ambient glow: soft pastel luminance */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-ambient-glow[b-kxy9b5wuwy] {
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--m-teal) 6%, transparent), transparent 42%),
        radial-gradient(circle at 48% 58%, color-mix(in srgb, var(--m-accent) 4%, transparent), transparent 34%);
    filter: blur(40px);
}

/* Observatory tubes: pale prismatic light */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .observatory-tube-left[b-kxy9b5wuwy] {
    background: linear-gradient(to top, color-mix(in srgb, var(--m-primary) 8%, transparent), transparent);
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .observatory-tube-right[b-kxy9b5wuwy] {
    background: linear-gradient(to top, color-mix(in srgb, var(--m-teal) 6%, transparent), transparent);
}

/* Floating particles: iridescent motes at reduced opacity */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-particle.p1[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-teal) 50%, white);
    opacity: 0.5;
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-particle.p2[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-secondary) 45%, white);
    opacity: 0.5;
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-particle.p3[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-accent) 50%, white);
    opacity: 0.5;
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-particle.p4[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-teal) 50%, white);
    opacity: 0.5;
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-particle.p5[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-secondary) 45%, white);
    opacity: 0.5;
}

/* Glass panel: lighter frosted glass */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-glass-panel[b-kxy9b5wuwy] {
    border: 1px solid color-mix(in srgb, black 6%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 40%, transparent);
    box-shadow: 0 24px 80px color-mix(in srgb, black 8%, transparent);
}

/* Inner glow: soft pastel radiance */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-inner-glow[b-kxy9b5wuwy] {
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 48%),
        radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--m-accent) 4%, transparent), transparent 24%);
}

/* Cosmic background: pale refraction layers */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-cosmic-bg[b-kxy9b5wuwy] {
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--m-accent) 4%, transparent), transparent 35%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--m-teal) 8%, transparent), transparent 42%),
        radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 30%);
}

/* Orbit rings: faint prismatic arcs with pastel gradient */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .orbit-ring-1[b-kxy9b5wuwy] {
    border-color: color-mix(in srgb, var(--m-teal) 8%, transparent);
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .orbit-ring-2[b-kxy9b5wuwy] {
    border-color: color-mix(in srgb, var(--m-secondary) 6%, transparent);
}

/* Depth swirl: pale conic gradient at very low opacity */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-depth-swirl[b-kxy9b5wuwy] {
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--m-teal) 6%, transparent),
        color-mix(in srgb, var(--m-primary) 8%, transparent),
        color-mix(in srgb, var(--m-accent) 4%, transparent),
        color-mix(in srgb, var(--m-teal) 6%, transparent)
    );
    opacity: 0.5;
}

/* World hint: subtle light-mode silhouette */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-world-hint[b-kxy9b5wuwy] {
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--m-primary) 5%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--m-teal) 4%, transparent) 0%, transparent 50%);
    opacity: 0.08;
}

/* Light beams: soft refracted glow */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-light-beams[b-kxy9b5wuwy] {
    background: radial-gradient(circle, color-mix(in srgb, var(--m-accent) 4%, transparent), transparent 60%);
}

/* Vignette: very subtle inward fade for light backgrounds */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-vignette[b-kxy9b5wuwy] {
    background: radial-gradient(circle at center, transparent 0%, transparent 40%, color-mix(in srgb, var(--m-secondary) 4%, transparent) 60%, color-mix(in srgb, var(--m-secondary) 10%, transparent) 100%);
}

/* Logo glow aura: soft pastel breath */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .logo-glow-aura[b-kxy9b5wuwy] {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--m-teal) 10%, transparent), color-mix(in srgb, var(--m-primary) 8%, transparent), transparent 72%);
}

/* Logo image: reduced glow intensity */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-logo-img[b-kxy9b5wuwy] {
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-teal) 10%, transparent));
}

/* Frame ornate glow: softer drop-shadow */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .ornate-frame-svg[b-kxy9b5wuwy] {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--m-accent) 6%, transparent));
}

/* Reflection beneath portal: softer pastel */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-reflection[b-kxy9b5wuwy] {
    opacity: 0.06;
}

/* Skip intro button: light-mode variant */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .skip-intro-btn[b-kxy9b5wuwy] {
    color: color-mix(in srgb, black 70%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 70%, transparent);
    border: 1px solid color-mix(in srgb, black 8%, transparent);
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .skip-intro-btn:hover[b-kxy9b5wuwy] {
    background: color-mix(in srgb, var(--m-on-primary) 90%, transparent);
    color: color-mix(in srgb, black 90%, transparent);
}

/* ---- Cursor Shimmer Overlay ---- */

.portal-visual[b-kxy9b5wuwy]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    background: radial-gradient(
        200px circle at var(--_mouse-x, 50%) var(--_mouse-y, 50%),
        var(--_shimmer-color, color-mix(in srgb, var(--m-on-primary) 3%, transparent)),
        transparent
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--m-dur-slow, 0.4s) var(--m-ease-smooth, ease);
    z-index: 6;
}

.portal-visual:hover[b-kxy9b5wuwy]::after {
    opacity: 0.8;
}

.portal-visual:is([data-theme="light"], [data-theme="bright"])[b-kxy9b5wuwy] {
    --_shimmer-color: color-mix(in srgb, var(--m-primary) 6%, transparent);
}

.portal-visual[data-theme="dark"][b-kxy9b5wuwy],
.portal-visual:not([data-theme])[b-kxy9b5wuwy] {
    --_shimmer-color: color-mix(in srgb, var(--m-accent) 8%, color-mix(in srgb, var(--m-primary) 6%, transparent));
}

@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    .portal-visual[b-kxy9b5wuwy]::after {
        opacity: 0.4;
        animation: shimmer-drift-b-kxy9b5wuwy 40s linear infinite;
    }
}

@keyframes shimmer-drift-b-kxy9b5wuwy {
    0% { --_mouse-x: 20%; --_mouse-y: 30%; }
    25% { --_mouse-x: 80%; --_mouse-y: 20%; }
    50% { --_mouse-x: 70%; --_mouse-y: 80%; }
    75% { --_mouse-x: 30%; --_mouse-y: 70%; }
    100% { --_mouse-x: 20%; --_mouse-y: 30%; }
}

/* ============================================================
   Portal Easter Egg Effects (escalating click interactions)
   ============================================================ */

/* ── Level 1: Water Ripple ── */
.portal-egg-ripple[b-kxy9b5wuwy] {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid var(--m-teal);
    opacity: 0.8;
    z-index: 20;
    pointer-events: none;
    animation: egg-ripple-expand-b-kxy9b5wuwy 1s ease-out forwards;
}

@keyframes egg-ripple-expand-b-kxy9b5wuwy {
    0% {
        transform: scale(0);
        opacity: 0.8;
        border-width: 2px;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(12);
        opacity: 0;
        border-width: 0.5px;
    }
}

/* Orbit ring speed boost during ripple */
.portal-inner-content.orbit-boost .orbit-ring-1[b-kxy9b5wuwy] {
    animation-duration: 3s !important;
}

.portal-inner-content.orbit-boost .orbit-ring-2[b-kxy9b5wuwy] {
    animation-duration: 5s !important;
}

/* ── Level 2: Gold Transformation ── */
.portal-logo-img.gold-transform[b-kxy9b5wuwy] {
    filter: drop-shadow(0 0 40px color-mix(in srgb, #fde68a 50%, transparent))
            drop-shadow(0 0 80px color-mix(in srgb, var(--m-accent) 30%, transparent)) !important;
    animation: egg-gold-pulse-b-kxy9b5wuwy 0.6s ease-out !important;
}

@keyframes egg-gold-pulse-b-kxy9b5wuwy {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent));
    }
    30% {
        transform: scale(1.15) rotate(5deg);
        filter: drop-shadow(0 0 60px color-mix(in srgb, #fde68a 60%, transparent));
    }
    60% {
        transform: scale(1.05) rotate(-3deg);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 40px color-mix(in srgb, #fde68a 50%, transparent));
    }
}

.portal-egg-symbol-container[b-kxy9b5wuwy] {
    position: absolute;
    inset: 15%;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: egg-symbol-reveal-b-kxy9b5wuwy 0.8s ease-out;
}

.portal-egg-symbol-container.fading[b-kxy9b5wuwy] {
    animation: egg-symbol-fade-b-kxy9b5wuwy 0.6s ease-in forwards;
}

.portal-egg-symbol[b-kxy9b5wuwy] {
    width: 60%;
    height: 60%;
    color: #fde68a;
    filter: drop-shadow(0 0 20px color-mix(in srgb, #fde68a 40%, transparent));
}

@keyframes egg-symbol-reveal-b-kxy9b5wuwy {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes egg-symbol-fade-b-kxy9b5wuwy {
    to {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* ── Level 3: Dimensional Cracks ── */
.portal-egg-crack-container[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    animation: egg-crack-appear-b-kxy9b5wuwy 0.4s ease-out;
}

.portal-egg-crack-container.fading[b-kxy9b5wuwy] {
    animation: egg-crack-fade-b-kxy9b5wuwy 0.5s ease-in forwards;
}

.portal-egg-cracks[b-kxy9b5wuwy] {
    width: 100%;
    height: 100%;
    color: var(--m-teal);
    filter: drop-shadow(0 0 8px var(--m-teal));
}

.portal-egg-cracks path[b-kxy9b5wuwy] {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: egg-crack-draw-b-kxy9b5wuwy 1s ease-out forwards;
}

@keyframes egg-crack-draw-b-kxy9b5wuwy {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes egg-crack-appear-b-kxy9b5wuwy {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes egg-crack-fade-b-kxy9b5wuwy {
    to { opacity: 0; }
}

/* Shatter effect — fragments scatter */
.portal-frame-area.shatter[b-kxy9b5wuwy] {
    animation: egg-shatter-b-kxy9b5wuwy 0.8s ease-in-out;
}

@keyframes egg-shatter-b-kxy9b5wuwy {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    20% {
        transform: scale(1.02);
        filter: brightness(2);
    }
    40% {
        transform: scale(0.98) rotate(1deg);
        filter: brightness(0.8);
    }
    60% {
        transform: scale(1.01) rotate(-0.5deg);
        filter: brightness(1.5);
    }
    80% {
        transform: scale(0.99);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ── Level 4: Portal Peek (another world) ── */
.portal-egg-peek-container[b-kxy9b5wuwy] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    border-radius: 1.25rem;
    animation: egg-peek-enter-b-kxy9b5wuwy 1.2s ease-out;
}

.portal-egg-peek-container.fading[b-kxy9b5wuwy] {
    animation: egg-peek-exit-b-kxy9b5wuwy 0.8s ease-in forwards;
}

.portal-egg-world[b-kxy9b5wuwy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes egg-peek-enter-b-kxy9b5wuwy {
    0% {
        opacity: 0;
        clip-path: circle(0% at 50% 50%);
    }
    40% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        clip-path: circle(75% at 50% 50%);
    }
}

@keyframes egg-peek-exit-b-kxy9b5wuwy {
    0% {
        opacity: 1;
        clip-path: circle(75% at 50% 50%);
    }
    100% {
        opacity: 0;
        clip-path: circle(0% at 50% 50%);
    }
}

/* During peek, fade the cosmic bg and push depth swirl back */
.portal-inner-content.peek-active .portal-cosmic-bg[b-kxy9b5wuwy] {
    opacity: 0.03 !important;
    transition: opacity 1s ease;
}

.portal-inner-content.peek-active .portal-depth-swirl[b-kxy9b5wuwy] {
    opacity: 0.02 !important;
    transition: opacity 1s ease;
}

.portal-inner-content.peek-active .portal-logo-img[b-kxy9b5wuwy] {
    filter: drop-shadow(0 0 40px color-mix(in srgb, var(--m-accent) 40%, transparent))
            drop-shadow(0 0 80px color-mix(in srgb, #fde68a 20%, transparent)) !important;
    transition: filter 1s ease;
}

/* ── Light mode adjustments ── */
.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-egg-cracks[b-kxy9b5wuwy] {
    color: var(--m-primary);
    filter: drop-shadow(0 0 8px var(--m-primary));
}

.portal-visual:is([data-theme="light"], [data-theme="bright"]) .portal-egg-symbol[b-kxy9b5wuwy] {
    color: var(--m-primary);
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-primary) 40%, transparent));
}

/* ── Reduced motion — disable all easter egg animations ── */
@media (prefers-reduced-motion: reduce) {
    .portal-egg-ripple[b-kxy9b5wuwy],
    .portal-egg-symbol-container[b-kxy9b5wuwy],
    .portal-egg-crack-container[b-kxy9b5wuwy],
    .portal-egg-peek-container[b-kxy9b5wuwy] {
        display: none;
    }

    .portal-logo-img.gold-transform[b-kxy9b5wuwy] {
        animation: none !important;
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--m-teal) 16%, transparent)) !important;
    }

    .portal-frame-area.shatter[b-kxy9b5wuwy] {
        animation: none;
    }

    .portal-inner-content.orbit-boost .orbit-ring-1[b-kxy9b5wuwy],
    .portal-inner-content.orbit-boost .orbit-ring-2[b-kxy9b5wuwy] {
        animation-duration: inherit !important;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .portal-visual[b-kxy9b5wuwy] {
        max-width: 380px;
    }
}

@media (max-width: 480px) {
    .portal-visual[b-kxy9b5wuwy] {
        max-width: 300px;
    }
}
/* /Components/Home/HeroSection.razor.rz.scp.css */
/* ============================================================
   Hero Section — Two-Column Layout
   ============================================================ */

.hero-section[b-1snj0vbamz] {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  margin-bottom: 20px;
  margin-top: 0;
}

/* ---- Animated Background ---- */

.hero-bg[b-1snj0vbamz] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  --_top: #2a135f;
  --_mid: #0c1236;
  --_deep: #070b1d;
  --_darkest: #040611;
  --_fade-edge: var(--_darkest);
}

.hero-bg-gradient[b-1snj0vbamz] {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    var(--_top) 0%,
    var(--_mid) 32%,
    var(--_deep) 70%,
    var(--_darkest) 100%
  );
}

.hero-bg-accent-1[b-1snj0vbamz] {
  position: absolute;
  left: 55%;
  top: 10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--m-primary) 15%, transparent);
  filter: blur(60px);
  animation: drift-blob-1-b-1snj0vbamz 12s ease-in-out infinite;
  will-change: transform;
}

.hero-bg-accent-2[b-1snj0vbamz] {
  position: absolute;
  right: 8%;
  top: 18%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--m-teal) 10%, transparent);
  filter: blur(60px);
  animation: drift-blob-2-b-1snj0vbamz 12s ease-in-out infinite;
  will-change: transform;
}

@keyframes drift-blob-1-b-1snj0vbamz {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, 10px);
  }
}

@keyframes drift-blob-2-b-1snj0vbamz {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-18px, 8px);
  }
}

.hero-bg-stars[b-1snj0vbamz] {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    radial-gradient(
      2px 2px at 20px 30px,
      color-mix(in srgb, var(--m-on-primary) 70%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 90px 80px,
      color-mix(in srgb, var(--m-on-primary) 60%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 150px 40px,
      color-mix(in srgb, var(--m-on-primary) 50%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 220px 120px,
      color-mix(in srgb, var(--m-on-primary) 60%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 180px 10px,
      color-mix(in srgb, var(--m-on-primary) 55%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 50px 100px,
      color-mix(in srgb, var(--m-on-primary) 50%, transparent),
      transparent
    );
  background-repeat: repeat;
  background-size: 260px 160px;
  animation:
    stars-twinkle-b-1snj0vbamz 8s ease-in-out infinite,
    stars-drift-b-1snj0vbamz 90s linear infinite;
  will-change: opacity, background-position;
}

@keyframes stars-twinkle-b-1snj0vbamz {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes stars-drift-b-1snj0vbamz {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 260px 160px;
  }
}

.hero-bg-fade-bottom[b-1snj0vbamz] {
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(
    to top,
    var(--_fade-edge) 0%,
    color-mix(in srgb, var(--_fade-edge) 80%, transparent) 25%,
    color-mix(in srgb, var(--_fade-edge) 40%, transparent) 60%,
    transparent 100%
  );
}

.hero-bg-fade-left[b-1snj0vbamz] {
  position: absolute;
  inset: 0 auto 0 0;
  width: 80px;
  background: linear-gradient(
    to right,
    var(--_fade-edge) 0%,
    color-mix(in srgb, var(--_fade-edge) 60%, transparent) 30%,
    transparent 100%
  );
}

.hero-bg-fade-right[b-1snj0vbamz] {
  position: absolute;
  inset: 0 0 0 auto;
  width: 80px;
  background: linear-gradient(
    to left,
    var(--_fade-edge) 0%,
    color-mix(in srgb, var(--_fade-edge) 60%, transparent) 30%,
    transparent 100%
  );
}

/* ---- Particle Canvas (localized to right visual column) ---- */

.hero-particle-canvas[b-1snj0vbamz] {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 0;
}

/* ---- Main Container ---- */

.hero-container[b-1snj0vbamz] {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ---- Two-Column Grid ---- */

.hero-grid[b-1snj0vbamz] {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-grid[b-1snj0vbamz] {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .hero-container[b-1snj0vbamz] {
    padding: 48px 48px 96px;
  }
}

/* ---- Left Column: Text ---- */

.hero-text-col[b-1snj0vbamz] {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 0;
}

/* Staggered entrance animation for text column children.
   WARNING: These :nth-child indices are coupled to the DOM order in HeroSection.razor.
   If you reorder, add, or remove children of .hero-text-col, update the indices below:
     1 = HeroBadgePill, 2 = headline, 3 = subtext,
     4 = CTA group, 5 = trust pills, 6 = story demo */
.hero-text-col > :nth-child(1)[b-1snj0vbamz] {
  /* HeroBadgePill */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0s both;
}
.hero-text-col > :nth-child(2)[b-1snj0vbamz] {
  /* headline */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0.1s both;
}
.hero-text-col > :nth-child(3)[b-1snj0vbamz] {
  /* subtext */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0.2s both;
}
.hero-text-col > :nth-child(4)[b-1snj0vbamz] {
  /* CTA group */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0.35s both;
}
.hero-text-col > :nth-child(5)[b-1snj0vbamz] {
  /* trust pills */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0.45s both;
}
.hero-text-col > :nth-child(6)[b-1snj0vbamz] {
  /* story demo */
  animation: hero-text-fade-in-b-1snj0vbamz 0.45s ease-out 0.55s both;
}

@keyframes hero-text-fade-in-b-1snj0vbamz {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headline */
.hero-headline[b-1snj0vbamz] {
  margin-top: 20px;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--m-on-primary);
  letter-spacing: 0;
  text-shadow: 0 8px 24px color-mix(in srgb, black 40%, transparent);
}

.hero-headline-gradient[b-1snj0vbamz] {
  display: inline;
  background: linear-gradient(
    135deg,
    var(--m-secondary) 0%,
    var(--m-teal) 33%,
    var(--m-secondary) 66%,
    var(--m-teal) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-gradient-shift-b-1snj0vbamz 6s ease-in-out infinite;
}

@keyframes hero-gradient-shift-b-1snj0vbamz {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Subtext */
.hero-subtext[b-1snj0vbamz] {
  margin-top: 20px;
  max-width: 540px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--m-text-2);
  font-weight: 400;
  text-shadow: 0 2px 4px color-mix(in srgb, black 30%, transparent);
}

/* CTA Buttons */
.hero-cta-group[b-1snj0vbamz] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-btn-primary[b-1snj0vbamz] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--m-on-primary);
  background: linear-gradient(
    135deg,
    var(--m-primary) 0%,
    color-mix(in srgb, var(--m-primary) 60%, var(--m-secondary)) 100%
  );
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 0 32px color-mix(in srgb, var(--m-primary) 35%, transparent);
  transition: all 0.25s ease;
  animation: hero-cta-glow-b-1snj0vbamz 3s ease-in-out infinite;
}

.hero-btn-primary svg[b-1snj0vbamz] {
  transition: transform 0.25s ease;
}

.hero-btn-primary:hover svg[b-1snj0vbamz] {
  transform: translateX(4px);
}

@keyframes hero-cta-glow-b-1snj0vbamz {
  0%, 100% {
    box-shadow: 0 0 32px color-mix(in srgb, var(--m-primary) 35%, transparent);
  }
  50% {
    box-shadow:
      0 0 40px color-mix(in srgb, var(--m-primary) 45%, transparent),
      0 0 80px color-mix(in srgb, var(--m-primary) 15%, transparent);
  }
}

.hero-btn-primary:hover[b-1snj0vbamz] {
  transform: translateY(-2px);
  box-shadow: 0 0 40px color-mix(in srgb, var(--m-accent) 20%, transparent);
}

.hero-btn-primary:focus-visible[b-1snj0vbamz] {
  outline: 2px solid color-mix(in srgb, var(--m-accent) 90%, var(--m-on-primary));
  outline-offset: 2px;
}

.hero-btn-secondary[b-1snj0vbamz] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--m-on-primary);
  background: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--m-secondary) 35%, transparent);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.hero-btn-secondary[b-1snj0vbamz]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--m-on-primary) 6%, transparent), transparent);
  animation: hero-btn-shimmer-b-1snj0vbamz 4s ease-in-out infinite;
}

@keyframes hero-btn-shimmer-b-1snj0vbamz {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

.hero-btn-secondary:hover[b-1snj0vbamz] {
  border-color: color-mix(in srgb, var(--m-secondary) 50%, transparent);
  background: color-mix(in srgb, var(--m-on-primary) 12%, transparent);
  color: var(--m-on-primary);
  transform: translateY(-1px);
}

.hero-btn-secondary:focus-visible[b-1snj0vbamz] {
  outline: 2px solid color-mix(in srgb, var(--m-on-primary) 30%, transparent);
  outline-offset: 2px;
}

/* Interactive story demo wrapper */
.hero-story-demo-wrapper[b-1snj0vbamz] {
  margin-top: 36px;
  align-self: stretch;
}

/* ---- Right Column: Visual ---- */

.hero-visual-col[b-1snj0vbamz] {
  position: relative;
  /* width: 100% so the column fills the full grid track — justify-self: center
       was shrinking this to fit-content, making the portal tiny */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: hero-visual-fade-in-b-1snj0vbamz 0.55s ease-out 0.08s both;
}

@keyframes hero-visual-fade-in-b-1snj0vbamz {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Replay button */
.hero-replay-btn[b-1snj0vbamz] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--m-on-primary) 60%, transparent);
  background: color-mix(in srgb, var(--m-on-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 12%, transparent);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-replay-btn:hover[b-1snj0vbamz] {
  color: color-mix(in srgb, var(--m-on-primary) 90%, transparent);
  border-color: color-mix(in srgb, var(--m-accent) 25%, transparent);
  background: color-mix(in srgb, var(--m-on-primary) 10%, transparent);
}

.hero-replay-btn:focus-visible[b-1snj0vbamz] {
  outline: 2px solid color-mix(in srgb, var(--m-accent) 70%, transparent);
  outline-offset: 2px;
  color: color-mix(in srgb, var(--m-on-primary) 90%, transparent);
  border-color: color-mix(in srgb, var(--m-accent) 25%, transparent);
}

/* ---- Mobile Responsive ---- */

@media (max-width: 991.98px) {
  .hero-section[b-1snj0vbamz] {
    margin-top: 0;
  }

  .hero-container[b-1snj0vbamz] {
    padding: 24px 32px 52px;
  }

  .hero-text-col[b-1snj0vbamz] {
    text-align: center;
    max-width: 100%;
    padding-left: 0; /* reset desktop indent on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-subtext[b-1snj0vbamz] {
    max-width: 100%;
  }

  .hero-cta-group[b-1snj0vbamz] {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-headline[b-1snj0vbamz] {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero-cta-group[b-1snj0vbamz] {
    flex-direction: column;
    width: 100%;
  }

  .hero-btn-primary[b-1snj0vbamz],
  .hero-btn-secondary[b-1snj0vbamz] {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-section[b-1snj0vbamz] {
    margin-top: 0;
  }

  .hero-container[b-1snj0vbamz] {
    padding: 16px 16px 40px;
  }

  .hero-headline[b-1snj0vbamz] {
    font-size: 1.75rem;
  }

  .hero-subtext[b-1snj0vbamz] {
    font-size: 0.95rem;
  }
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  .hero-bg-accent-1[b-1snj0vbamz],
  .hero-bg-accent-2[b-1snj0vbamz],
  .hero-visual-col[b-1snj0vbamz],
  .hero-text-col > *[b-1snj0vbamz] {
    animation: none;
  }
  .hero-bg-stars[b-1snj0vbamz] {
    animation: none;
    opacity: 0.25;
  }
  .hero-headline-gradient[b-1snj0vbamz] {
    animation: none;
    background-size: 100% 100%;
  }
  .hero-btn-primary[b-1snj0vbamz] {
    animation: none;
  }
  .hero-btn-primary:hover svg[b-1snj0vbamz] {
    transform: none;
  }
  .hero-btn-secondary[b-1snj0vbamz]::after {
    animation: none;
    display: none;
  }
}

/* ============================================================
   Albino Dragon — Light Theme Overrides
   ============================================================ */

/* Light-mode scoped variables — richer purple depth instead of pale wash */
.hero-bg:is([data-theme="light"], [data-theme="bright"])[b-1snj0vbamz] {
  --_top: #dccef8;
  --_mid: #cfc2f0;
  --_deep: #c2b5e8;
  --_darkest: #b4a6de;
  --_fade-edge: #d5cbf2;
}

/* Light-mode text colors */
.hero-section:is([data-theme="light"], [data-theme="bright"]) .hero-headline[b-1snj0vbamz] {
  color: var(--m-text);
  text-shadow: none;
}

/* Restore rich gradient on headline for light mode — uses dark purple/teal that
   reads clearly on the light lavender background. */
.hero-section:is([data-theme="light"], [data-theme="bright"]) .hero-headline-gradient[b-1snj0vbamz] {
  background: linear-gradient(
    135deg,
    var(--m-primary) 0%,
    color-mix(in srgb, var(--m-primary) 65%, var(--m-teal)) 33%,
    var(--m-primary) 66%,
    color-mix(in srgb, var(--m-primary) 65%, var(--m-teal)) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-gradient-shift-b-1snj0vbamz 6s ease-in-out infinite;
}

.hero-section:is([data-theme="light"], [data-theme="bright"]) .hero-subtext[b-1snj0vbamz] {
  color: var(--m-text-2);
  text-shadow: none;
}

/* Light-mode accent blobs — reduced intensity */
.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-accent-1[b-1snj0vbamz] {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--m-primary) 8%, transparent) 0%,
    transparent 70%
  );
}

.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-accent-2[b-1snj0vbamz] {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--m-teal) 6%, transparent) 0%,
    transparent 70%
  );
}

/* Light-mode stars → bokeh */
.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-stars[b-1snj0vbamz] {
  background-image:
    radial-gradient(
      18px circle at 15% 25%,
      color-mix(in srgb, var(--m-secondary) 15%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      22px circle at 45% 65%,
      color-mix(in srgb, var(--m-teal) 12%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      15px circle at 72% 35%,
      color-mix(in srgb, var(--m-accent) 10%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      20px circle at 88% 75%,
      color-mix(in srgb, var(--m-primary) 10%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      16px circle at 30% 85%,
      color-mix(in srgb, var(--m-secondary) 12%, transparent) 0%,
      transparent 100%
    );
  animation-name: bokeh-drift-b-1snj0vbamz;
}

@keyframes bokeh-drift-b-1snj0vbamz {
  0%,
  100% {
    opacity: 0.15;
    transform: translateY(0);
  }
  50% {
    opacity: 0.25;
    transform: translateY(-8px);
  }
}

/* Light-mode bottom fade */
.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-fade-bottom[b-1snj0vbamz] {
  background: linear-gradient(to top, var(--m-bg), transparent);
}

/* ---- Cursor Shimmer Overlay ---- */

.hero-bg[b-1snj0vbamz]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    200px circle at var(--_mouse-x, 50%) var(--_mouse-y, 50%),
    var(--_shimmer-color, color-mix(in srgb, var(--m-on-primary) 3%, transparent)),
    transparent
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--m-dur-slow) var(--m-ease-smooth);
  z-index: 2;
}

.hero-bg:hover[b-1snj0vbamz]::after {
  opacity: 0.8;
}

.hero-bg:is([data-theme="light"], [data-theme="bright"])[b-1snj0vbamz] {
  --_shimmer-color: color-mix(in srgb, var(--m-primary) 6%, transparent);
}

.hero-bg[data-theme="dark"][b-1snj0vbamz],
.hero-bg:not([data-theme])[b-1snj0vbamz] {
  --_shimmer-color: color-mix(
    in srgb,
    var(--m-accent) 8%,
    color-mix(in srgb, var(--m-primary) 6%, transparent)
  );
}

/* Light-mode ghost button — visible border + tinted bg.
   Selector covers both the component-scoped data-theme prop (set after JS runs)
   and the global html[data-theme] attribute (immediate on load). */
.hero-section:is([data-theme="light"], [data-theme="bright"]) .hero-btn-secondary[b-1snj0vbamz],
:is(html[data-theme="light"], html[data-theme="bright"]) .hero-btn-secondary[b-1snj0vbamz] {
  color: var(--m-primary);
  background: color-mix(in srgb, var(--m-primary) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
}

.hero-section:is([data-theme="light"], [data-theme="bright"]) .hero-btn-secondary:hover[b-1snj0vbamz],
:is(html[data-theme="light"], html[data-theme="bright"]) .hero-btn-secondary:hover[b-1snj0vbamz] {
  background: color-mix(in srgb, var(--m-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--m-primary) 55%, transparent);
  color: var(--m-primary);
}

/* Light-mode hero edge fades — derived from hero's own light gradient stops */
.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-fade-left[b-1snj0vbamz] {
  background: linear-gradient(to right, var(--_fade-edge), transparent);
}

.hero-bg:is([data-theme="light"], [data-theme="bright"]) .hero-bg-fade-right[b-1snj0vbamz] {
  background: linear-gradient(to left, var(--_fade-edge), transparent);
}

@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .hero-bg[b-1snj0vbamz]::after {
    opacity: 0.4;
    animation: shimmer-drift 40s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg[b-1snj0vbamz]::after {
    display: none;
  }
}
/* /Components/Home/HeroTrustPills.razor.rz.scp.css */
.hero-trust-pills[b-5d4ebkqk0m] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.trust-pill[b-5d4ebkqk0m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--m-on-primary) 80%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 10%, transparent);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    white-space: nowrap;
    animation: tp-pill-enter-b-5d4ebkqk0m 0.4s ease-out both;
}

.trust-pill:nth-child(1)[b-5d4ebkqk0m] { animation-delay: 0.05s; }
.trust-pill:nth-child(2)[b-5d4ebkqk0m] { animation-delay: 0.15s; }
.trust-pill:nth-child(3)[b-5d4ebkqk0m] { animation-delay: 0.25s; }

@keyframes tp-pill-enter-b-5d4ebkqk0m {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.trust-pill:hover[b-5d4ebkqk0m] {
    border-color: color-mix(in srgb, var(--m-accent) 25%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--m-accent) 10%, transparent);
    transform: translateY(-1px);
}

.trust-pill-icon[b-5d4ebkqk0m] {
    color: var(--m-accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.trust-pill:hover .trust-pill-icon[b-5d4ebkqk0m] {
    transform: scale(1.2) rotate(5deg);
}

/* Light-mode trust pills — readable on light bg.
   Dual selector: component-scoped prop + global html[data-theme] fallback.
   Border raised from 20% to 45% primary opacity to meet 3:1 UI contrast.
   Text uses --m-text (#2e1f66 on ~#f7f6ff = ~8.2:1, well above WCAG AA 4.5:1). */
.hero-trust-pills:is([data-theme="light"], [data-theme="bright"]) .trust-pill[b-5d4ebkqk0m],
:is(html[data-theme="light"], html[data-theme="bright"]) .trust-pill[b-5d4ebkqk0m] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-primary) 45%, transparent);
}

.hero-trust-pills:is([data-theme="light"], [data-theme="bright"]) .trust-pill:hover[b-5d4ebkqk0m],
:is(html[data-theme="light"], html[data-theme="bright"]) .trust-pill:hover[b-5d4ebkqk0m] {
    background: color-mix(in srgb, var(--m-primary) 13%, var(--m-surface));
    border-color: color-mix(in srgb, var(--m-primary) 60%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--m-primary) 8%, transparent);
    transform: translateY(-1px);
}

.hero-trust-pills:is([data-theme="light"], [data-theme="bright"]) .trust-pill-icon[b-5d4ebkqk0m],
:is(html[data-theme="light"], html[data-theme="bright"]) .trust-pill-icon[b-5d4ebkqk0m] {
    color: var(--m-primary);
}

@media (max-width: 768px) {
    .hero-trust-pills[b-5d4ebkqk0m] {
        gap: 8px;
    }

    .trust-pill[b-5d4ebkqk0m] {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-pill[b-5d4ebkqk0m] {
        animation: none;
        transition: none;
    }

    .trust-pill-icon[b-5d4ebkqk0m] {
        transition: none;
    }

    .trust-pill:hover[b-5d4ebkqk0m] {
        transform: none;
    }
}
/* /Components/Home/HomeWelcome.razor.rz.scp.css */
/* State-aware home welcome — Dragon Scale reconciliation.
   Spec: .agents/traces/glazier-2026-06-23-first-visit-landing-reconciliation.md
   All colour = --m-* token or color-mix() of one. Literal rem/px for spacing/size
   (no --m-spacing-*/--m-font-size-* tokens exist — literals are the convention).
   Display font: inline Cormorant Garamond stack (Option B) — already loaded via
   index.html Google Fonts; brand.css is NOT touched. */

.fv-landing[b-7f6u24gg3n] {
    /* Display-serif alias scoped to this component (Option B — no brand.css edit). */
    --fv-display: 'Cormorant Garamond', 'Playfair Display', serif;
    width: 100%;
}

/* ============ SHARED SECTION SCAFFOLDING ============ */
.fv-section[b-7f6u24gg3n] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

.fv-intro[b-7f6u24gg3n] {
    /* With the page-level brand band removed, the intro card is the first thing
       under the global AppHeader. The previous extra top-padding override existed
       to separate the card from that band; without it the override reads as excess
       empty space under the nav, so the intro now uses the standard .fv-section
       (2.5rem) top rhythm. */
}

.fv-eyebrow[b-7f6u24gg3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--m-primary);
    margin-bottom: 0.5rem;
}

.fv-eyebrow-dot[b-7f6u24gg3n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-teal);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-teal) 80%, transparent);
    animation: fv-dot-pulse-b-7f6u24gg3n 2s ease-in-out infinite;
}

[data-theme="dark"] .fv-eyebrow[b-7f6u24gg3n] {
    color: var(--m-secondary);
}

@keyframes fv-dot-pulse-b-7f6u24gg3n {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ============ 1. GET STARTED INTRO CARD ============ */
.fv-intro-card[b-7f6u24gg3n] {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--m-border);
    background: var(--m-surface-elevated);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--m-shadow-lg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.25rem;
    align-items: center;
    padding: 1.875rem 2.5rem;
}

[data-theme="dark"] .fv-intro-card[b-7f6u24gg3n] {
    box-shadow:
        var(--m-shadow-lg),
        0 0 28px color-mix(in srgb, var(--m-primary) 18%, transparent);
}

/* Top accent hairline */
.fv-intro-card[b-7f6u24gg3n]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--m-teal),
        var(--m-primary),
        var(--m-secondary)
    );
    opacity: 0.8;
}

/* Constellation / spark emblem — a "window into the night sky", framed in the gilded
   Mystira crest. The night-sky portal is FIXED deep-cosmos dark in BOTH Albino (light) and
   Obsidian (dark) themes — it is a window into space, not a themed surface.

   FIXED NIGHT-SKY — the one intentional non-token value here, by design.
   The brand crest SVG (wwwroot/images/mystira-logo-hero.svg) hard-codes its own dark sky
   (#1c0f6b → #130950 → #0a0632 → #050219); this emblem mirrors that. We must NOT key the
   capsule off --d-bg: that token is theme-responsive (app.css: --d-bg follows --m-bg under
   [data-theme="bright"]), which washed the night sky out to pale lavender in Albino and
   killed the gold/spark contrast. The fixed deep-cosmos radial below is the single justified
   non-token colour on the page — everything else stays --m-* / --m-accent-derived. The
   magenta (--m-glow) and teal (--m-teal) glow radials still layer on TOP so they read warm.

   GOLD — derived from the canonical --m-accent gold token.
   The gilded crest is the original Mystira brand-mark treatment (see mystira-logo-hero.svg),
   used sparingly and ONLY on this emblem (the page's sole gold accent). The shades below are
   LOCAL aliases scoped to .fv-emblem, but every one roots in var(--m-accent) (#f6c453 — the
   exact mid-gold the source crest uses) via color-mix(); zero free hex. Warmed slightly with
   white/black mixes so the metal reads as a lit "illuminated portal" against the purple/teal
   cosmos rather than canary-flat — but the colour identity stays the app's canonical gold.
   Do NOT promote these to brand.css / design-tokens — they are emblem-local derivations. */
.fv-emblem[b-7f6u24gg3n] {
    /* Fixed deep-cosmos sky (intentional non-token) — mirrors the brand crest's hard-coded
       sky hexes so the portal stays dark in every theme. */
    --fv-night-1: #130a52; /* upper-centre indigo (crest #130950 family) */
    --fv-night-2: #0a0632; /* mid deep-purple (crest #0a0632) */
    --fv-night-3: #050219; /* near-black edge (crest #050219) */

    --fv-gold:      var(--m-accent);                                  /* canonical gold — primary frame stroke */
    --fv-gold-hi:   color-mix(in srgb, var(--m-accent) 70%, white);   /* warm highlight — rim light on rings + petals */
    --fv-gold-deep: color-mix(in srgb, var(--m-accent) 72%, black);   /* burnished low-light — shadow side of the gold */

    position: relative;
    width: 148px;
    height: 186px;
    border-radius: 74px / 96px;
    overflow: hidden;
    flex: none;
    background:
        radial-gradient(ellipse 78% 50% at 50% 42%, color-mix(in srgb, var(--m-glow) 22%, transparent), transparent 60%),
        radial-gradient(ellipse 95% 58% at 50% 94%, color-mix(in srgb, var(--m-teal) 26%, transparent), transparent 66%),
        /* fixed deep-cosmos base (theme-independent — see note above) */
        radial-gradient(ellipse 120% 90% at 48% 40%, var(--fv-night-1) 0%, var(--fv-night-2) 55%, var(--fv-night-3) 100%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--m-on-primary) 8%, transparent),
        0 16px 34px color-mix(in srgb, var(--m-primary) 20%, transparent),
        /* warm gold lift so the framed portal reads as lit, not painted on —
           reuses the app's canonical gold halo token (color-mix of --m-accent). */
        0 0 18px var(--d-glow-gold);
}

.fv-emblem svg[b-7f6u24gg3n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Token colours for the inline-SVG emblem. These MUST live in CSS-property context —
   var()/color-mix() do NOT resolve in SVG presentation attributes (stop-color/fill/
   stroke), only as CSS properties. Blazor scoped CSS applies to inline-SVG children.

   Central spark — softened & integrated. Previously a white→hot-magenta→teal radial that
   washed the whole capsule into a glowing pill. Now: a small warm-white core that blooms
   straight into the purple/teal family (secondary lavender → teal → transparent), so the
   spark stays magenta-cored in feel but is no longer the only flat hot blob on the page,
   and the night sky around it can breathe. */
.fv-spark-stop-0[b-7f6u24gg3n] { stop-color: color-mix(in srgb, var(--m-glow) 35%, white); }
.fv-spark-stop-1[b-7f6u24gg3n] { stop-color: color-mix(in srgb, var(--m-glow) 70%, var(--m-secondary)); }
.fv-spark-stop-2[b-7f6u24gg3n] { stop-color: color-mix(in srgb, var(--m-secondary) 55%, var(--m-teal)); }
.fv-spark-stop-3[b-7f6u24gg3n] { stop-color: var(--m-teal); }

/* Constellation lines — brighter & more present so the night sky reads as drawn, not faint. */
.fv-emblem-lines[b-7f6u24gg3n] {
    stroke: color-mix(in srgb, var(--m-teal) 72%, white 20%);
    opacity: 0.9;
}

/* Stars — lift toward white for legibility against the deep cosmos. */
.fv-emblem-stars[b-7f6u24gg3n],
.fv-emblem-stars-far[b-7f6u24gg3n] {
    fill: color-mix(in srgb, var(--m-secondary) 55%, white);
}

.fv-star-glow[b-7f6u24gg3n] { fill: color-mix(in srgb, var(--m-glow) 55%, white); }
.fv-star-teal[b-7f6u24gg3n] { fill: color-mix(in srgb, var(--m-teal) 70%, white); }
/* Gold star twinkles — sparse accent (≤2) tying the cool night sky to the gilded frame.
   Roots in the canonical --m-accent gold via the local --fv-gold-hi alias. */
.fv-star-gold[b-7f6u24gg3n] { fill: var(--fv-gold-hi); }

/* Crystalline central star. */
.fv-emblem-core[b-7f6u24gg3n] {
    fill: color-mix(in srgb, var(--m-glow) 18%, white);
}

/* Star body — warm-white cut crystal so it reads as a faceted gem, not a blob. */
.fv-core-star[b-7f6u24gg3n] {
    fill: color-mix(in srgb, var(--m-glow) 16%, white);
}

/* Thin gold rim on the star edge — sparse gold echo of the frame. */
.fv-core-rim[b-7f6u24gg3n] {
    stroke: var(--fv-gold-hi);
    stroke-width: 0.9;
    opacity: 0.85;
}

/* Upper-left facet highlight — a brighter lit edge for the cut-gem read. */
.fv-core-facet[b-7f6u24gg3n] {
    fill: #ffffff;
    opacity: 0.55;
}

.fv-core-dot[b-7f6u24gg3n] {
    fill: #ffffff;
}

/* The radial bloom behind the core — pulled back from r=56 to r=50 in markup; here we
   give it a gentle breathing pulse so the spark feels alive without dominating. */
.fv-emblem-bloom[b-7f6u24gg3n] {
    transform-origin: 80px 96px;
    animation: fv-bloom-pulse-b-7f6u24gg3n 6.5s ease-in-out infinite;
}

.fv-core-burst[b-7f6u24gg3n] {
    transform-origin: center;
}

.fv-twk[b-7f6u24gg3n] {
    animation: fv-twinkle-b-7f6u24gg3n 3.4s ease-in-out infinite;
    transform-origin: center;
}

.fv-twk:nth-child(2n)[b-7f6u24gg3n] { animation-delay: 0.5s; }
.fv-twk:nth-child(3n)[b-7f6u24gg3n] { animation-delay: 1.1s; }
.fv-twk:nth-child(4n)[b-7f6u24gg3n] { animation-delay: 1.8s; }

@keyframes fv-twinkle-b-7f6u24gg3n {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.65); }
}

@keyframes fv-bloom-pulse-b-7f6u24gg3n {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* ---- Starfield drift (slow parallax life) ---- */
.fv-emblem-sky[b-7f6u24gg3n] {
    transform-origin: 80px 100px;
    animation: fv-sky-drift-b-7f6u24gg3n 48s ease-in-out infinite;
    will-change: transform;
}

@keyframes fv-sky-drift-b-7f6u24gg3n {
    0%   { transform: rotate(0deg)    translateY(0); }
    50%  { transform: rotate(1.4deg)  translateY(-2px); }
    100% { transform: rotate(0deg)    translateY(0); }
}

/* ---- Occasional shooting star ---- */
.fv-shoot[b-7f6u24gg3n] {
    stroke: color-mix(in srgb, var(--m-secondary) 40%, white);
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: 138px 32px;
    animation: fv-shoot-b-7f6u24gg3n 11s ease-in infinite;
}

@keyframes fv-shoot-b-7f6u24gg3n {
    /* idle for most of the cycle, then a single quick streak top-right → in */
    0%, 86% { opacity: 0; transform: translate(8px, -6px) scaleX(0.2); }
    88%     { opacity: 0.9; transform: translate(0, 0) scaleX(1); }
    93%     { opacity: 0; transform: translate(-10px, 7px) scaleX(0.5); }
    100%    { opacity: 0; transform: translate(-10px, 7px) scaleX(0.5); }
}

/* ============ GILDED CREST FRAME (the canonical-gold accent) ============ */
/* Coloured via classes only — SVG presentation attributes can't resolve var().
   A soft drop-shadow (canonical gold halo token) makes the gold read as lit, not flat.
   MINIMAL: thin rings + small ornaments, restrained opacity — a complement to the
   purple/teal cosmos, never a takeover. */
.fv-crest[b-7f6u24gg3n] {
    filter: drop-shadow(0 0 2px var(--d-glow-gold));
}

/* Three concentric rings — outer strongest, inner two are hairline decorative. */
.fv-crest-ring-1[b-7f6u24gg3n] {
    stroke: var(--fv-gold);
    stroke-width: 1.6;
    opacity: 0.85;
}
.fv-crest-ring-2[b-7f6u24gg3n] {
    stroke: var(--fv-gold-hi);
    stroke-width: 0.8;
    opacity: 0.5;
}
.fv-crest-ring-3[b-7f6u24gg3n] {
    stroke: var(--fv-gold-deep);
    stroke-width: 0.55;
    opacity: 0.38;
}

/* Lotus + pendant filled ornaments. */
.fv-crest-fill[b-7f6u24gg3n] {
    fill: var(--fv-gold-hi);
}
/* Lateral petals + pendant bodies read as the burnished shadow side of the gold
   (folded in from the dropped rose variant — simpler, single canonical-gold root). */
.fv-crest-soft[b-7f6u24gg3n] {
    fill: var(--fv-gold-deep);
    opacity: 0.82;
}
.fv-crest-rule[b-7f6u24gg3n] {
    stroke: var(--fv-gold);
    stroke-width: 1.2;
    opacity: 0.85;
}
.fv-crest-line[b-7f6u24gg3n] {
    stroke: var(--fv-gold-hi);
    stroke-width: 0.7;
    opacity: 0.55;
}
.fv-crest-gem[b-7f6u24gg3n] {
    fill: var(--fv-gold-hi);
}

/* Get-started pill — the "now" colourway */
.fv-get-started[b-7f6u24gg3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.375rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 28%, transparent);
    color: var(--m-primary);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

[data-theme="dark"] .fv-get-started[b-7f6u24gg3n] {
    color: var(--m-secondary);
    background: color-mix(in srgb, var(--m-glow) 14%, transparent);
    border-color: color-mix(in srgb, var(--m-glow) 34%, transparent);
}

.fv-get-started .material-symbols-outlined[b-7f6u24gg3n] {
    font-size: 16px;
    line-height: 1;
    /* One tiny page-level gold touch — ONLY the auto_awesome sparkle glyph is tinted to the
       canonical gold (warmed slightly), echoing the emblem's gilded frame. The pill's text
       and border stay --m-primary / --m-secondary as before. */
    color: color-mix(in srgb, var(--m-accent) 88%, white);
}

.fv-intro-title[b-7f6u24gg3n] {
    font-family: var(--fv-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.4vw, 2.375rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--m-text);
    margin-bottom: 0.875rem;
    max-width: 540px;
}

.fv-intro-title em[b-7f6u24gg3n] {
    font-style: italic;
    /* Gradient-emphasis word with a solid fallback for no-background-clip / forced-colors. */
    color: var(--m-primary);
    background: linear-gradient(135deg, var(--m-primary), var(--m-teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fv-intro-desc[b-7f6u24gg3n] {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--m-text-2);
    max-width: 460px;
}

.fv-intro-cta[b-7f6u24gg3n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    flex: none;
}

.fv-cta-primary[b-7f6u24gg3n] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, var(--m-primary), var(--m-glow));
    color: var(--m-on-primary);
    font-family: var(--m-font-body, 'Nunito', sans-serif);
    font-weight: 700;
    font-size: 0.96875rem;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--m-primary) 35%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--m-on-primary) 25%, transparent);
    transition:
        transform var(--m-dur-base) var(--m-ease-smooth),
        filter var(--m-dur-base) var(--m-ease-smooth);
}

/* Shimmer "shine" sweep — decorative CSS keyframe (not the JS cursor shimmer). */
.fv-cta-primary[b-7f6u24gg3n]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 30%,
        color-mix(in srgb, var(--m-on-primary) 22%, transparent) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: fv-shine-b-7f6u24gg3n 5s ease-in-out infinite;
    pointer-events: none;
}

.fv-cta-primary span[b-7f6u24gg3n],
.fv-cta-primary .material-symbols-outlined[b-7f6u24gg3n] {
    position: relative;
    z-index: 1;
}

.fv-cta-primary .material-symbols-outlined[b-7f6u24gg3n] {
    font-size: 20px;
    line-height: 1;
}

.fv-cta-primary:hover[b-7f6u24gg3n] {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

@keyframes fv-shine-b-7f6u24gg3n {
    0%, 60% { transform: translateX(-100%); }
    80%, 100% { transform: translateX(100%); }
}

.fv-hint[b-7f6u24gg3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fv-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--m-primary);
}

[data-theme="dark"] .fv-hint[b-7f6u24gg3n] {
    color: var(--m-secondary);
}

.fv-hint svg[b-7f6u24gg3n] {
    width: 28px;
    height: 20px;
    opacity: 0.85;
    flex: none;
}

@media (max-width: 1080px) {
    .fv-intro-card[b-7f6u24gg3n] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem 1.625rem;
    }

    .fv-intro-title[b-7f6u24gg3n],
    .fv-intro-desc[b-7f6u24gg3n] {
        max-width: 560px;
    }

    .fv-intro-desc[b-7f6u24gg3n] {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============ 2. HOW MYSTIRA WORKS — constellation spine ============ */
.fv-how-head[b-7f6u24gg3n] {
    max-width: 720px;
    margin-bottom: 1.875rem;
}

.fv-how-lead[b-7f6u24gg3n] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--m-text-2);
    margin-top: 0.375rem;
}

.fv-how-card[b-7f6u24gg3n] {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--m-border);
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 2.75rem 2.125rem 2.375rem;
    box-shadow: var(--m-shadow-md);
}

[data-theme="dark"] .fv-how-card[b-7f6u24gg3n] {
    box-shadow:
        var(--m-shadow-md),
        0 0 24px color-mix(in srgb, var(--m-primary) 14%, transparent);
}

.fv-spine[b-7f6u24gg3n] {
    position: absolute;
    top: calc(2.75rem + 32px);
    left: 9%;
    right: 9%;
    height: 2px;
    z-index: 1;
    /* Subtle purple→teal flow: anchored in primary at the active (left) end, easing through
       secondary to teal toward the journey's end — a quiet sense of direction. */
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--m-primary) 10%,
        color-mix(in srgb, var(--m-primary) 50%, var(--m-teal)) 50%,
        var(--m-teal) 90%,
        transparent 100%
    );
    opacity: 0.45;
}

[data-theme="dark"] .fv-spine[b-7f6u24gg3n] {
    opacity: 0.6;
}

.fv-steps[b-7f6u24gg3n] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-step[b-7f6u24gg3n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fv-node[b-7f6u24gg3n] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1.125rem;
    color: var(--m-teal);
    background: var(--m-surface-elevated);
    border: 1px solid var(--m-border);
    transition:
        transform 0.25s var(--m-ease-smooth),
        opacity 0.25s var(--m-ease-smooth);
}

.fv-node svg[b-7f6u24gg3n] {
    width: 26px;
    height: 26px;
}

.fv-node-badge[b-7f6u24gg3n] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--fv-display);
    font-weight: 600;
    font-size: 0.875rem;
    /* Dark glyph on bright teal — passes AA (white would be ~1.7:1). */
    color: var(--m-on-accent);
    background: linear-gradient(
        135deg,
        var(--m-teal),
        color-mix(in srgb, var(--m-teal) 80%, white)
    );
    box-shadow: 0 5px 12px color-mix(in srgb, var(--m-teal) 45%, transparent);
}

.fv-step:hover .fv-node[b-7f6u24gg3n] {
    transform: translateY(-3px);
}

/* Gentle rhythm along the spine: upcoming (plain) nodes sit a touch quieter so the active
   "now" node and the styled done/reward beats read as the foreground. Subtle — opacity only,
   no colour change. The :not() guards keep is-now / is-done / is-reward at full presence. */
.fv-step:not(.is-now):not(.is-done):not(.is-reward) .fv-node[b-7f6u24gg3n] {
    opacity: 0.82;
}

.fv-step:not(.is-now):not(.is-done):not(.is-reward):hover .fv-node[b-7f6u24gg3n] {
    opacity: 1;
}

/* "done / completed" state — calm teal node, reuses the teal badge gradient with a
   check glyph swapped in for the number. Don't tint the <h4>. */
.fv-step.is-done .fv-node[b-7f6u24gg3n] {
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 14%, var(--m-surface-elevated));
    border-color: color-mix(in srgb, var(--m-teal) 45%, transparent);
}

[data-theme="dark"] .fv-step.is-done .fv-node[b-7f6u24gg3n] {
    background: color-mix(in srgb, var(--m-teal) 18%, var(--m-surface-elevated));
    border-color: color-mix(in srgb, var(--m-teal) 50%, transparent);
}

.fv-step.is-done .fv-node-badge svg[b-7f6u24gg3n] {
    width: 13px;
    height: 13px;
    stroke: var(--m-on-accent);
    stroke-width: 3.4;
    fill: none;
}

/* "now / Start here" / "You're here" state */
.fv-step.is-now .fv-node[b-7f6u24gg3n] {
    color: var(--m-on-primary);
    background: linear-gradient(135deg, var(--m-primary), var(--m-glow));
    border-color: var(--m-glow);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--m-primary) 16%, transparent),
        0 12px 26px color-mix(in srgb, var(--m-primary) 40%, transparent);
    animation: fv-now-pulse-b-7f6u24gg3n 2.8s ease-in-out infinite;
}

.fv-step.is-now .fv-node-badge[b-7f6u24gg3n] {
    color: var(--m-on-primary);
    background: linear-gradient(135deg, var(--m-primary), var(--m-glow));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--m-primary) 45%, transparent);
}

@keyframes fv-now-pulse-b-7f6u24gg3n {
    0%, 100% {
        box-shadow:
            0 0 0 6px color-mix(in srgb, var(--m-primary) 16%, transparent),
            0 12px 26px color-mix(in srgb, var(--m-primary) 40%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 9px color-mix(in srgb, var(--m-primary) 8%, transparent),
            0 12px 26px color-mix(in srgb, var(--m-primary) 40%, transparent);
    }
}

/* "reward" state — step 4 (Collect keepsakes). Gold is the system's achievement accent
   (--m-tier-gold). Kept ANTIQUE/RESTRAINED: a gold-tinted node + gold badge, NOT a blazing
   solid-gold fill, so it reads as a quiet celebration beat among the teal nodes. Gold rooted
   in --m-accent (warmed) so it stays a sibling, not a shout. */
.fv-step.is-reward .fv-node[b-7f6u24gg3n] {
    color: color-mix(in srgb, var(--m-accent) 78%, var(--m-on-accent));
    background: color-mix(in srgb, var(--m-accent) 14%, var(--m-surface-elevated));
    border-color: color-mix(in srgb, var(--m-accent) 50%, transparent);
}

[data-theme="dark"] .fv-step.is-reward .fv-node[b-7f6u24gg3n] {
    color: color-mix(in srgb, var(--m-accent) 86%, white);
    background: color-mix(in srgb, var(--m-accent) 18%, var(--m-surface-elevated));
    border-color: color-mix(in srgb, var(--m-accent) 52%, transparent);
}

.fv-step.is-reward .fv-node-badge[b-7f6u24gg3n] {
    /* Dark navy glyph on the gold badge — AA-legible (white would wash out on gold). */
    color: var(--m-on-accent);
    background: linear-gradient(
        135deg,
        var(--m-accent),
        color-mix(in srgb, var(--m-accent) 78%, white)
    );
    box-shadow: 0 5px 12px color-mix(in srgb, var(--m-accent) 42%, transparent);
}

.fv-step h4[b-7f6u24gg3n] {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--m-text);
    margin-bottom: 0.3125rem;
}

.fv-step.is-now h4[b-7f6u24gg3n] {
    color: var(--m-primary);
}

[data-theme="dark"] .fv-step.is-now h4[b-7f6u24gg3n] {
    color: var(--m-secondary);
}

.fv-step p[b-7f6u24gg3n] {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--m-text-2);
    max-width: 175px;
    margin: 0;
}

.fv-here[b-7f6u24gg3n] {
    display: inline-block;
    margin-top: 0.5625rem;
    font-size: 0.59375rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--m-on-primary);
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--m-primary), var(--m-glow));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

@media (max-width: 1080px) {
    .fv-steps[b-7f6u24gg3n] {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 18px;
    }

    .fv-spine[b-7f6u24gg3n] {
        display: none;
    }
}

@media (max-width: 720px) {
    .fv-steps[b-7f6u24gg3n] {
        grid-template-columns: 1fr;
    }
}

/* ============ 3. EXPLORE TILES ============ */
.fv-tiles[b-7f6u24gg3n] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.375rem;
}

.fv-tile[b-7f6u24gg3n] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid var(--m-border);
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 1.75rem;
    text-decoration: none;
    transition:
        transform var(--m-dur-base) var(--m-ease-smooth),
        box-shadow var(--m-dur-base) var(--m-ease-smooth),
        border-color var(--m-dur-base) var(--m-ease-smooth);
}

/* Top accent rule — per-tile colourway */
.fv-tile-accent[b-7f6u24gg3n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.6;
}

.fv-tile--primary .fv-tile-accent[b-7f6u24gg3n] {
    background: linear-gradient(90deg, var(--m-primary), var(--m-glow));
}

.fv-tile--teal .fv-tile-accent[b-7f6u24gg3n] {
    background: linear-gradient(90deg, var(--m-teal), var(--m-primary));
}

/* Gold card (Achievements) — the reward surface. Gold = celebration in the system
   (--m-tier-gold). Antique/restrained: a warm gold rule, NOT a blazing solid bar. */
.fv-tile--gold .fv-tile-accent[b-7f6u24gg3n] {
    background: linear-gradient(
        90deg,
        var(--m-accent),
        color-mix(in srgb, var(--m-accent) 70%, var(--m-glow))
    );
}

/* Hover lift — Obsidian (default :root here resolves to Albino, so dark block below) */
.fv-tile:hover[b-7f6u24gg3n] {
    transform: translateY(-6px);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .fv-tile:hover[b-7f6u24gg3n] {
    border-color: color-mix(in srgb, var(--m-primary) 25%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, var(--m-primary) 12%, transparent),
        0 0 20px color-mix(in srgb, var(--m-primary) 18%, transparent);
}

[data-theme="dark"] .fv-tile:hover[b-7f6u24gg3n] {
    border-color: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    box-shadow:
        0 8px 32px color-mix(in srgb, black 40%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary) 30%, transparent);
}

.fv-tile-top[b-7f6u24gg3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.375rem;
    gap: 0.75rem;
}

.fv-tile-ic[b-7f6u24gg3n] {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--m-on-primary);
}

.fv-tile-ic svg[b-7f6u24gg3n] {
    width: 25px;
    height: 25px;
}

.fv-tile-ic--teal[b-7f6u24gg3n] {
    background: linear-gradient(
        135deg,
        var(--m-teal),
        color-mix(in srgb, var(--m-teal) 80%, white)
    );
    box-shadow: 0 10px 22px color-mix(in srgb, var(--m-teal) 30%, transparent);
    /* Icon glyph on bright teal: decorative only, accessible name is the title. */
    color: var(--m-on-accent);
}

.fv-tile-ic--primary[b-7f6u24gg3n] {
    background: linear-gradient(135deg, var(--m-primary), var(--m-glow));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-on-primary);
}

/* Gold icon tile — INTENTIONALLY softer than the teal/primary tiles: a gold-tinted surface
   with a gold-tone glyph + gold border, not a saturated solid-gold gradient. Reads warm and
   premium, a sibling to the others. Gold rooted in --m-accent (--m-tier-gold). */
.fv-tile-ic--gold[b-7f6u24gg3n] {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-accent) 28%, var(--m-surface-elevated)),
        color-mix(in srgb, var(--m-accent) 16%, var(--m-surface-elevated))
    );
    border: 1px solid color-mix(in srgb, var(--m-accent) 55%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--m-accent) 22%, transparent);
    color: color-mix(in srgb, var(--m-accent) 80%, var(--m-on-accent));
}

[data-theme="dark"] .fv-tile-ic--gold[b-7f6u24gg3n] {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-accent) 30%, var(--m-surface-elevated)),
        color-mix(in srgb, var(--m-accent) 14%, var(--m-surface-elevated))
    );
    color: color-mix(in srgb, var(--m-accent) 88%, white);
}

/* Flag pill — base layout; colourway follows each card's own accent (set per-variant below)
   so the accent is consistent across top-bar, icon, flag, and link. */
.fv-tile-flag[b-7f6u24gg3n] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Primary cards (Profiles, The Glowdome) — purple/secondary flag. */
.fv-tile--primary .fv-tile-flag[b-7f6u24gg3n] {
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, transparent);
    color: var(--m-primary);
}

[data-theme="dark"] .fv-tile--primary .fv-tile-flag[b-7f6u24gg3n] {
    color: var(--m-secondary);
    background: color-mix(in srgb, var(--m-glow) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-glow) 30%, transparent);
}

/* Teal card (Feedback) — teal flag. */
.fv-tile--teal .fv-tile-flag[b-7f6u24gg3n] {
    background: color-mix(in srgb, var(--m-teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-teal) 30%, transparent);
    /* Light/Albino: anchor the teal text toward --m-text so it clears WCAG AA (4.5:1)
       against the pale teal pill — at 0.6875rem/700 these labels are NOT large text,
       so the 4.5:1 threshold applies. teal 80% + on-accent was ~2.07:1. teal 40% + text
       resolves to ~4.71:1 while keeping a recognisable teal hue. */
    color: color-mix(in srgb, var(--m-teal) 40%, var(--m-text));
}

[data-theme="dark"] .fv-tile--teal .fv-tile-flag[b-7f6u24gg3n] {
    color: var(--m-teal);
}

/* Gold card (Achievements) — gold flag, antique/restrained. */
.fv-tile--gold .fv-tile-flag[b-7f6u24gg3n] {
    background: color-mix(in srgb, var(--m-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 34%, transparent);
    /* Light/Albino: anchor the gold text toward --m-text so it clears WCAG AA (4.5:1)
       against the pale gold pill — 0.6875rem/700 is NOT large text, so 4.5:1 applies.
       accent 72% + on-accent was ~2.31:1. accent 38% + text resolves to ~4.77:1 while
       keeping a recognisable antique-gold hue. */
    color: color-mix(in srgb, var(--m-accent) 38%, var(--m-text));
}

[data-theme="dark"] .fv-tile--gold .fv-tile-flag[b-7f6u24gg3n] {
    color: color-mix(in srgb, var(--m-accent) 88%, white);
}

.fv-tile h3[b-7f6u24gg3n] {
    font-family: var(--fv-display);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--m-text);
    margin-bottom: 0.625rem;
}

.fv-tile p[b-7f6u24gg3n] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--m-text-2);
    margin-bottom: 1.25rem;
    flex: 1;
}

.fv-tile-link[b-7f6u24gg3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.fv-tile-link svg[b-7f6u24gg3n] {
    width: 16px;
    height: 16px;
    transition: transform var(--m-dur-base) var(--m-ease-smooth);
}

.fv-tile:hover .fv-tile-link svg[b-7f6u24gg3n] {
    transform: translateX(4px);
}

.fv-tile-link--primary[b-7f6u24gg3n] {
    color: var(--m-primary);
}

[data-theme="dark"] .fv-tile-link--primary[b-7f6u24gg3n] {
    color: var(--m-secondary);
}

.fv-tile-link--teal[b-7f6u24gg3n] {
    color: var(--m-teal);
}

/* Gold card link (Achievements) — gold, antique/restrained; rooted in --m-accent. */
.fv-tile-link--gold[b-7f6u24gg3n] {
    color: color-mix(in srgb, var(--m-accent) 74%, var(--m-on-accent));
}

[data-theme="dark"] .fv-tile-link--gold[b-7f6u24gg3n] {
    color: color-mix(in srgb, var(--m-accent) 90%, white);
}

@media (max-width: 1080px) {
    .fv-tiles[b-7f6u24gg3n] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .fv-tiles[b-7f6u24gg3n] {
        grid-template-columns: 1fr;
    }
}

/* The "Continue your adventure" section markup lives in the <ActiveAdventures>
   child component, so its scoped styles (.fv-continue, .fv-continue-head,
   .fv-continue-lead and the shared .fv-section/.fv-eyebrow it relies on) live in
   ActiveAdventures.razor.css — Blazor scoped CSS only applies to the owning
   component's own rendered markup. */

/* ============ FOCUS-VISIBLE (keyboard) ============ */
.fv-cta-primary:focus-visible[b-7f6u24gg3n],
.fv-tile:focus-visible[b-7f6u24gg3n] {
    outline: 2px solid color-mix(in srgb, var(--m-focus) 60%, transparent);
    outline-offset: 3px;
    border-radius: 14px;
}

.fv-tile:focus-visible[b-7f6u24gg3n] {
    border-radius: 22px;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .fv-twk[b-7f6u24gg3n],
    .fv-eyebrow-dot[b-7f6u24gg3n],
    .fv-step.is-now .fv-node[b-7f6u24gg3n],
    .fv-emblem-sky[b-7f6u24gg3n],
    .fv-emblem-bloom[b-7f6u24gg3n],
    .fv-shoot[b-7f6u24gg3n] {
        animation: none !important;
    }

    /* Shooting star is animation-only; with motion off it must never flash on screen. */
    .fv-shoot[b-7f6u24gg3n] {
        opacity: 0 !important;
    }

    .fv-cta-primary[b-7f6u24gg3n]::after {
        animation: none;
        transition: none;
    }

    .fv-cta-primary[b-7f6u24gg3n],
    .fv-node[b-7f6u24gg3n],
    .fv-tile[b-7f6u24gg3n],
    .fv-tile-link svg[b-7f6u24gg3n] {
        transition: none;
    }

    .fv-cta-primary:hover[b-7f6u24gg3n],
    .fv-step:hover .fv-node[b-7f6u24gg3n],
    .fv-tile:hover[b-7f6u24gg3n] {
        transform: none;
    }

    .fv-tile:hover .fv-tile-link svg[b-7f6u24gg3n] {
        transform: none;
    }
}
/* /Components/Home/InteractiveStoryDemo.razor.rz.scp.css */
.story-demo[b-91y0qi7pt8] {
  position: relative;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--m-text) 10%, transparent);
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 18px;
  box-shadow: 0 16px 60px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.story-demo[b-91y0qi7pt8]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--m-accent) 30%, transparent),
    transparent
  );
  pointer-events: none;
}

.story-demo-header[b-91y0qi7pt8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.story-demo-title[b-91y0qi7pt8] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--m-text);
}

.story-demo-subtitle[b-91y0qi7pt8] {
  font-size: 0.75rem;
  color: var(--m-text-2);
}

.story-demo-reset[b-91y0qi7pt8] {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--m-text) 75%, transparent);
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-text) 10%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.story-demo-reset:hover[b-91y0qi7pt8] {
  background: color-mix(in srgb, var(--m-text) 10%, transparent);
  color: var(--m-text);
}

.story-demo-reset:focus-visible[b-91y0qi7pt8] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

.story-demo-card[b-91y0qi7pt8] {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--m-secondary) 15%, transparent);
  background: color-mix(in srgb, var(--m-bg) 90%, transparent);
  padding: 16px;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.story-demo-card[b-91y0qi7pt8]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--m-secondary) 8%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

.story-demo-card.story-enter[b-91y0qi7pt8] {
  opacity: 1;
  transform: translateY(0);
  animation: sd-card-enter-b-91y0qi7pt8 0.35s ease-out;
}

.story-demo-card.story-enter[b-91y0qi7pt8]::before {
  animation: sd-shimmer-b-91y0qi7pt8 1.2s ease-out 0.2s forwards;
}

@keyframes sd-card-enter-b-91y0qi7pt8 {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sd-shimmer-b-91y0qi7pt8 {
  from {
    left: -60%;
  }
  to {
    left: 160%;
  }
}

.story-demo-card.story-exit[b-91y0qi7pt8] {
  opacity: 0;
  transform: translateY(-8px);
}

.story-demo-scene-image[b-91y0qi7pt8],
.story-demo-scene-video[b-91y0qi7pt8] {
  display: block;
  /* Bleed to card edges by negating the 16px card padding */
  width: calc(100% + 32px);
  margin: -16px -16px 14px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.story-demo-video-container[b-91y0qi7pt8] {
  display: block;
  background: #000;
  margin: -16px -16px 14px;
  height: 160px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  position: relative;
  min-height: 160px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.story-demo-video-container:focus-visible[b-91y0qi7pt8] {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
}

.story-demo-video-container .story-demo-scene-video[b-91y0qi7pt8] {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
  /* iOS Safari can swallow taps targeted at <video playsinline>; routing them
     to the parent <a> requires the video itself to be inert to pointer events. */
  pointer-events: none;
}

.story-demo-video-play[b-91y0qi7pt8] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--m-on-primary) 75%, transparent);
    background: color-mix(in srgb, black 45%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--m-on-primary);
    transition: transform 0.2s ease, background 0.2s ease;
    opacity: 1;
    padding: 0;
    /* Decorative overlay — let the parent <a> own the tap. */
    pointer-events: none;
}

.story-demo-video-container:hover .story-demo-video-play[b-91y0qi7pt8] {
    background: color-mix(in srgb, black 65%, transparent);
    transform: translate(-50%, -50%) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .story-demo-video-play[b-91y0qi7pt8] {
        transition: none;
    }
}

.story-demo-node-title[b-91y0qi7pt8] {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.3;
}

.story-demo-node-body[b-91y0qi7pt8] {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--m-text-2);
}

.story-demo-options[b-91y0qi7pt8] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  animation: sd-options-enter-b-91y0qi7pt8 0.3s ease-out 0.15s both;
}

@keyframes sd-options-enter-b-91y0qi7pt8 {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.story-option-btn[b-91y0qi7pt8] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--m-text) 90%, transparent);
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 12%, transparent);
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.story-option-btn[b-91y0qi7pt8]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--_btn-x, 50%) var(--_btn-y, 50%),
    color-mix(in srgb, var(--m-accent) 12%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.story-option-btn:hover[b-91y0qi7pt8]::after {
  opacity: 1;
}

.story-option-btn:hover[b-91y0qi7pt8] {
  border-color: color-mix(in srgb, var(--m-accent) 25%, transparent);
  background: color-mix(in srgb, var(--m-text) 10%, transparent);
  transform: translateY(-2px);
}

.story-option-btn:focus-visible[b-91y0qi7pt8] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

.story-option-btn.story-option-primary:focus-visible[b-91y0qi7pt8] {
  outline: 2px solid var(--m-accent);
  outline-offset: 2px;
}

.story-option-btn.story-option-primary[b-91y0qi7pt8] {
  background: linear-gradient(
    135deg,
    var(--m-primary) 0%,
    var(--m-secondary) 100%
  );
  border: none;
  color: var(--m-on-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 30%, transparent);
  animation: sd-cta-pulse-b-91y0qi7pt8 3s ease-in-out infinite;
}

@keyframes sd-cta-pulse-b-91y0qi7pt8 {
  0%,
  100% {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 30%, transparent);
  }
  50% {
    box-shadow:
      0 4px 20px color-mix(in srgb, var(--m-primary) 40%, transparent),
      0 0 40px color-mix(in srgb, var(--m-primary) 12%, transparent);
  }
}

.story-option-btn.story-option-primary:hover[b-91y0qi7pt8] {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--m-primary) 45%, transparent);
}

/* Light mode — Enchanted Scroll: warm pearl surfaces, accent-tinted choice buttons */
.story-demo:is([data-theme="light"], [data-theme="bright"])[b-91y0qi7pt8] {
  background: color-mix(in srgb, var(--m-surface) 85%, transparent);
  border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
  box-shadow: var(--m-shadow-lg);
}

.story-demo:is([data-theme="light"], [data-theme="bright"]) .story-demo-card[b-91y0qi7pt8] {
  background: color-mix(in srgb, var(--m-bg) 95%, transparent);
  border-color: color-mix(in srgb, var(--m-secondary) 12%, transparent);
}

.story-demo:is([data-theme="light"], [data-theme="bright"]) .story-option-btn[b-91y0qi7pt8] {
  background: color-mix(in srgb, var(--m-surface) 90%, transparent);
  color: var(--m-text);
  border-color: color-mix(in srgb, var(--m-accent) 15%, transparent);
}

.story-demo:is([data-theme="light"], [data-theme="bright"])
  .story-option-btn:hover[b-91y0qi7pt8] {
  border-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
  box-shadow: var(--m-shadow-md);
}

@media (max-width: 768px) {
  .story-demo[b-91y0qi7pt8] {
    padding: 12px 14px;
  }

  .story-demo-options[b-91y0qi7pt8] {
    flex-direction: column;
  }

  .story-option-btn[b-91y0qi7pt8] {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-demo-card[b-91y0qi7pt8] {
    transition: none;
  }

  .story-demo-card.story-enter[b-91y0qi7pt8] {
    animation: none;
  }

  .story-demo-card[b-91y0qi7pt8]::before {
    display: none;
  }

  .story-option-btn[b-91y0qi7pt8] {
    transition: none;
  }

  .story-option-btn:hover[b-91y0qi7pt8] {
    transform: none;
  }

  .story-option-btn.story-option-primary[b-91y0qi7pt8] {
    animation: none;
  }

  .story-option-btn.story-option-primary:hover[b-91y0qi7pt8] {
    transform: none;
  }

  .story-demo-options[b-91y0qi7pt8] {
    animation: none;
  }
}
/* /Components/Home/LumeriaSection.razor.rz.scp.css */
.lumeria-section[b-l9u1xtxphq] {
  padding: 4rem 2.5rem 6rem;
  background: var(--m-bg);
}

.lumeria-section-inner[b-l9u1xtxphq] {
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .lumeria-section[b-l9u1xtxphq] { padding: 4.5rem 1.25rem; }
}
/* /Components/Home/MarketingHero.razor.rz.scp.css */
/* ============================================================
   Marketing Hero — unauthenticated landing
   ============================================================ */

.m-hero[b-135v4jz81a] {
  position: relative;
  overflow: hidden;
  padding: 2rem 2.5rem 6rem;
  background: var(--m-bg);
}

.m-hero-bg[b-135v4jz81a] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%,
      color-mix(in srgb, var(--m-primary) 12%, transparent), transparent 50%),
    radial-gradient(ellipse 40% 50% at 15% 70%,
      color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 50%);
}

.m-hero-stars[b-135v4jz81a] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.m-star[b-135v4jz81a] {
  position: absolute;
  color: var(--m-primary);
  opacity: 0.4;
  animation: m-twinkle-b-135v4jz81a 4s ease-in-out infinite;
}
.m-star:nth-child(2n)[b-135v4jz81a] { color: var(--m-teal); animation-delay: 1s; }
.m-star:nth-child(3n)[b-135v4jz81a] { color: color-mix(in srgb, var(--m-teal) 70%, var(--m-primary)); animation-delay: 2s; }

@keyframes m-twinkle-b-135v4jz81a {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 0.7; transform: scale(1.1); }
}

.m-hero-grid[b-135v4jz81a] {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5rem;
  align-items: center;
}

@media (max-width: 960px) {
  .m-hero-grid[b-135v4jz81a] { grid-template-columns: 1fr; gap: 3rem; }
}

/* ---- Eyebrow chip ---- */
.m-eyebrow[b-135v4jz81a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-primary) 22%, transparent);
  color: var(--m-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
}

.m-eyebrow-dot[b-135v4jz81a] {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--m-primary);
  animation: m-pulse-b-135v4jz81a 2s ease-in-out infinite;
}

@keyframes m-pulse-b-135v4jz81a {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

/* ---- Headline / subtext ---- */
.m-hero-headline[b-135v4jz81a] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 1.75rem 0;
  color: var(--m-text);
}

.m-hero-headline em[b-135v4jz81a] {
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(135deg, var(--m-primary), var(--m-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.m-hero-sparkle[b-135v4jz81a] {
  display: inline-block;
  font-style: normal;
  font-size: 0.7em;
  color: color-mix(in srgb, var(--m-primary) 70%, var(--m-secondary));
  animation: m-spin-b-135v4jz81a 8s linear infinite;
}

@keyframes m-spin-b-135v4jz81a { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.m-hero-sub[b-135v4jz81a] {
  font-size: 1.2rem;
  max-width: 540px;
  margin: 0 0 2rem 0;
  color: var(--m-text-2);
  line-height: 1.55;
}

/* ---- Trust badges ---- */
.m-hero-badges[b-135v4jz81a] {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.m-hero-badge[b-135v4jz81a] {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-text) 12%, transparent);
  color: var(--m-text-2);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.m-hero-badge:hover[b-135v4jz81a] {
  border-color: var(--m-primary);
  color: var(--m-primary);
  transform: translateY(-2px);
}

/* ---- CTAs ---- */
.m-hero-cta[b-135v4jz81a] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.m-btn[b-135v4jz81a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.3s ease;
}

.m-btn-primary[b-135v4jz81a] {
  position: relative;
  overflow: hidden;
  color: var(--m-on-primary, #fbfaf6);
  background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 60%, var(--m-teal)));
  box-shadow: 0 0 24px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.m-btn-primary:hover[b-135v4jz81a] {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--m-primary) 35%, transparent);
}

.m-btn-ghost[b-135v4jz81a] {
  background: transparent;
  color: var(--m-text);
  border: 1px solid color-mix(in srgb, var(--m-text) 14%, transparent);
}

.m-btn-ghost:hover[b-135v4jz81a] {
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  color: var(--m-primary);
  border-color: color-mix(in srgb, var(--m-primary) 35%, transparent);
}

/* ---- Three-step rail ---- */
.m-hero-steps[b-135v4jz81a] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.m-step[b-135v4jz81a] {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--m-text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-text) 10%, transparent);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m-step:hover[b-135v4jz81a] {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--m-text) 10%, transparent);
}

.m-step-num[b-135v4jz81a] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--m-primary);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-primary) 15%, transparent),
    color-mix(in srgb, var(--m-teal) 15%, transparent));
}

.m-step-title[b-135v4jz81a] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--m-text);
  margin-bottom: 0.2rem;
}

.m-step-text[b-135v4jz81a] {
  font-size: 0.92rem;
  color: var(--m-text-2);
  line-height: 1.5;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .m-hero[b-135v4jz81a] { padding: 1.5rem 1.25rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .m-star[b-135v4jz81a], .m-eyebrow-dot[b-135v4jz81a], .m-hero-sparkle[b-135v4jz81a] { animation: none; }
}
/* /Components/Home/MarketingHomeVariantA.razor.rz.scp.css */
/* Variant A — additive styles only.
   The redesign uses HeroSection (with HeroChipsCard in the right column),
   WordmarkBand, LumeriaSection, TrustSection, AgeBands, and AboutCtaStrip —
   each of which carries its own scoped CSS.

   This file holds two kinds of overrides:
     1. The hero shell — paints the hero's radial gradient behind BOTH the
        wordmark band and the hero so the purple surface runs continuously
        from the headernav join down to the hero's rounded bottom.
     2. Variant-A refinement-pass overrides (2026-05-12) — applied via
        `.variant-a-page ::deep …` so they reach into shared child components
        (LumeriaSection, TrustSection, AgeBands, AboutCtaStrip, HeroSection)
        without touching Variant B, which never renders `.variant-a-page`.
   Every refinement-pass selector is anchored at `.variant-a-page` for that
   isolation guarantee. */

.variant-a-page[b-q2hrsz49kr] {
    /* The wrapper itself is a transparent container — no display/positioning
       changes, just a CSS scope anchor for descendant ::deep rules below.
       Pass 8 makes it positioned so the page-level environmental atmosphere
       layer (::before) can span the full scroll height behind every section. */
    display: block;
    position: relative;
}

.variant-a-hero-shell[b-q2hrsz49kr] {
    position: relative;
    /* Mirrors .hero-bg-gradient stops from HeroSection.razor.css so the visual
       reads as one continuous gradient when the inner hero's gradient layer is
       suppressed below. Anchored "circle at top" so the brightest band lands
       directly under the headernav. */
    background: radial-gradient(
        circle at top,
        #2a135f 0%,
        #0c1236 32%,
        #070b1d 70%,
        #040611 100%
    );
}

/* Light theme matches HeroSection's light scoped vars (--_top through --_darkest). */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr] {
    background: radial-gradient(
        circle at top,
        #dccef8 0%,
        #cfc2f0 32%,
        #c2b5e8 70%,
        #b4a6de 100%
    );
}

/* Make the wordmark band's wrapper transparent so the shell shows through.
   ::deep crosses the scoped-CSS boundary into VariantAWordmarkBand.

   Pass 10 continuation (2026-05-13): the wordmark was moved INTO the hero via
   HeroSection's new AboveContent slot. The wrap's own horizontal padding
   (`0.85rem 2.5rem 0` baseline) becomes redundant inside the hero because
   hero-container already provides side padding (Pass 2 set `16px 32px 56px`).
   Neutralize the wrap's horizontal padding to avoid a double-indent that
   would visually shrink the wordmark band; keep a small top padding so the
   crest has breath against the hero-container's own top padding.

   The `.hero-above-grid` wrapper itself gets a small bottom margin so the
   wordmark and the hero copy below it have visual separation — replaces the
   old hero-shell vertical gap that existed when wordmark + hero were
   siblings. */
.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-band-wrap {
    background: transparent;
    padding: 0;
}

.variant-a-page[b-q2hrsz49kr]  .hero-above-grid {
    margin-bottom: 12px;
}

@media (min-width: 1280px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-above-grid {
        margin-bottom: 16px;
    }
}

/* Suppress the hero's own radial-gradient layer (.hero-bg-gradient) inside
   the shell so the shell's gradient remains continuous. The hero's other
   decorative layers (stars, accent blobs, fades) stay — only the base
   gradient is hidden to avoid a "second sunrise" at the hero's top edge. */
.variant-a-hero-shell[b-q2hrsz49kr]  .hero-bg-gradient {
    background: transparent;
}

/* Pass 10 follow-up #4 (2026-05-13): suppress `.hero-bg-fade-left` and
   `.hero-bg-fade-right` in Variant A. Same diagnosis as the bottom-fade
   but applied to the side fades: both side fades overlay `--_fade-edge`
   from each edge inward 80px. In DARK mode `--_fade-edge = #040611`
   matches the shell's outermost stop — invisible overlay. In LIGHT mode
   `--_fade-edge = #d5cbf2` does NOT match the shell's actual color at
   the left/right edges. The shell uses `radial-gradient(circle at top)`,
   so its bottom-corners paint #b4a6de (100% stop). The side-fade overlay
   wipes that to #d5cbf2 (brighter), creating a corner step where the
   hero's bottom-left/right is brighter than Lumeria's carry top
   immediately below. In Variant A the shell's natural gradient handles
   the edges (no neighbouring content needs a side fade); suppressing
   side-fades restores the shell's #b4a6de at the corners, matching the
   carry exactly. Dark mode unaffected (the overlay was invisible there
   anyway; suppressing it is a no-op visually). */
.variant-a-hero-shell[b-q2hrsz49kr]  .hero-bg-fade-left,
.variant-a-hero-shell[b-q2hrsz49kr]  .hero-bg-fade-right {
    display: none;
}

/* Pass 10 follow-up #3 (2026-05-13): `.hero-bg-fade-bottom` is doing
   structural work — it overlays the shell's radial-gradient bottom with
   a wash that fades from 100% target color at y=bottom to transparent
   over the last 160px. The shell's radial curve makes its bottom-center
   slightly brighter than its bottom-corners (gradient stops at 70% and
   100% differ); the wash UN-CURVES the bottom 160px into a UNIFORM
   colour. Dark mode washes to `var(--_fade-edge) = #040611`, which
   matches the shell's 100% stop AND my carry start exactly → invisible.
   The previous attempt hid the fade-bottom entirely; that exposed the
   shell's radial curve in dark mode too (center brighter than corners),
   re-introducing the line.

   Light-mode bug: the shared rule fades to `var(--m-bg)` (cream page bg)
   in light mode — wrong target for Variant A. The hero's last 160px in
   light therefore washes to CREAM while the carry starts at LAVENDER.

   Fix: keep the fade-bottom ACTIVE (let it un-curve the shell's bottom),
   but override its LIGHT-mode background to fade to `#b4a6de` (the
   shell's 100% stop) instead of `var(--m-bg)`. Now both modes wash to
   the shell's outermost stop AND match the carry's start exactly:
     - Dark: fade-bottom → #040611, shell-bottom-uniform → #040611,
       carry start → #040611. All three match. Invisible joint.
     - Light: fade-bottom → #b4a6de (per this override), shell-bottom-
       uniform → #b4a6de, carry start → #b4a6de. All three match.
       Invisible joint.

   Specificity note: the existing HeroSection rule has 4 simple selectors
   (0, 4, 0). My override adds .variant-a-page as an extra ancestor class
   for (0, 5, 0) — safely outranks the existing rule regardless of source
   order. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page .variant-a-hero-shell[b-q2hrsz49kr]  .hero-bg-fade-bottom {
    background: linear-gradient(to top, #b4a6de, transparent);
}

/* ============================================================================
   Variant A refinement pass (2026-05-12) — tightened rhythm + restrained
   atmospheric identity. Goal: the page should feel connected and cinematic
   rather than section-blocked, while staying calm, premium, and grown-up.
   ============================================================================ */

/* ---- Hero rhythm: pull the hero up against the (now-shrunken) wordmark band
   and trim the bottom padding so the next section reads as part of the same
   composition. Falls back gracefully on small viewports. --------------- */
.variant-a-page[b-q2hrsz49kr]  .hero-container {
    padding: 24px 32px 56px;
}

@media (min-width: 1280px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 28px 48px 64px;
    }
}

@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 16px 32px 40px;
    }
}

@media (max-width: 480px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 12px 16px 32px;
    }
}

/* Shave the hero's bottom rounded-corner gap before the Lumeria section so
   the cinematic flow continues without a visual breath. */
.variant-a-page[b-q2hrsz49kr]  .hero-section {
    margin-bottom: 8px;
}

/* ---- Lumeria section: tighter vertical rhythm + constellation-like ambient
   accent. The accent is a low-opacity multi-radial-gradient that reads as
   distant stars; intentionally restrained so the editorial atmosphere wins. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section {
    position: relative;
    overflow: hidden;
    padding: 3rem 2.5rem 4rem;
}

.variant-a-page[b-q2hrsz49kr]  .lumeria-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Pass 6 layered motion: drift (background-position-y), rock (transform
       rotation ±3°), and pulse (opacity 0.18 ↔ 0.45). Three independent
       animations on the same element create a richer ambient motion than any
       one of them alone. Durations are intentionally non-multiples so the
       cycles never re-sync and the motion stays cinematic across long views.
       The previous static opacity (0.45) becomes the pulse PEAK, never
       exceeded — current brightness is the ceiling. */
    --sigil-rock-angle: 3deg;
    --sigil-low: 0.18;
    --sigil-peak: 0.45;
    background-image:
        var(--variant-a-sigil-svg),
        radial-gradient(1px 1px at 12% 22%, color-mix(in srgb, var(--m-secondary) 55%, transparent), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 18%, color-mix(in srgb, var(--m-teal) 50%, transparent), transparent 60%),
        radial-gradient(1px 1px at 36% 78%, color-mix(in srgb, var(--m-accent) 45%, transparent), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 68%, color-mix(in srgb, var(--m-secondary) 40%, transparent), transparent 60%),
        radial-gradient(1px 1px at 24% 52%, color-mix(in srgb, var(--m-on-primary) 35%, transparent), transparent 60%);
    background-size: 700px 700px, auto, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    /* Static fallback opacity (= --sigil-low) for reduced-motion users — they
       see the field at the dim baseline without the brief peaks. */
    opacity: 0.18;
    animation:
        variant-a-sigil-drift-b-q2hrsz49kr 240s linear infinite,
        variant-a-sigil-rock-b-q2hrsz49kr 240s ease-in-out infinite alternate,
        variant-a-sigil-pulse-b-q2hrsz49kr 45s ease-in-out infinite;
    will-change: background-position, transform, opacity;
}

.variant-a-page[b-q2hrsz49kr]  .lumeria-section-inner {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .variant-a-page[b-q2hrsz49kr]  .lumeria-section {
        padding: 3rem 1.25rem 3.5rem;
    }
}

/* ---- Trust section: trim padding, repeat the secondary accent on hover so
   the page's accent vocabulary reads consistently across sections. ----- */
.variant-a-page[b-q2hrsz49kr]  .trust-section {
    padding: 4.5rem 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Trust section is the editorial "Designed With Care" zone. Pass 5 removes the
   sigil layer entirely from this section so the typography breathes without
   atmospheric competition. Three faint distant-star radial dots remain — at
   reduced opacity (0.45 → 0.35) — to keep continuity with the surrounding
   sections without crowding the editorial copy. This is an intentional quiet
   zone in the page's atmospheric pacing. */
.variant-a-page[b-q2hrsz49kr]  .trust-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 18% 30%, color-mix(in srgb, var(--m-secondary) 40%, transparent), transparent 60%),
        radial-gradient(1px 1px at 72% 75%, color-mix(in srgb, var(--m-teal) 35%, transparent), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 12%, color-mix(in srgb, var(--m-accent) 30%, transparent), transparent 60%);
    opacity: 0.35;
}

.variant-a-page[b-q2hrsz49kr]  .trust-section-inner {
    position: relative;
    z-index: 1;
}

.variant-a-page[b-q2hrsz49kr]  .trust-section-heading {
    margin-bottom: 3rem;
}

.variant-a-page[b-q2hrsz49kr]  .trust-card:hover {
    border-color: color-mix(in srgb, var(--m-secondary) 38%, transparent);
    box-shadow:
        0 24px 48px color-mix(in srgb, black 22%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary) 14%, transparent);
}

@media (max-width: 720px) {
    .variant-a-page[b-q2hrsz49kr]  .trust-section {
        padding: 3.5rem 1.25rem;
    }
    .variant-a-page[b-q2hrsz49kr]  .trust-section-heading {
        margin-bottom: 2.25rem;
    }
}

/* ---- Age progression: trim padding and add a developmental-growth accent on
   hover. The accent gradient on the border subtly says "this grows with the
   child" by transitioning teal → primary as the cards activate. -------- */
.variant-a-page[b-q2hrsz49kr]  .ages-section {
    padding: 4.25rem 2.5rem 5rem;
    position: relative;
    overflow: hidden;
}

.variant-a-page[b-q2hrsz49kr]  .ages-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* Pass 6: layered motion (drift + rock + pulse). Softer parameters than
       Lumeria — rock ±2° (Lumeria is ±3°), pulse peak 0.32 (Lumeria is 0.45),
       and an asymmetric 23s pulse vs Lumeria's 17s so the two sections never
       brighten on the same beat. Together these reinforce the section's
       "softer environmental support" role per the cinematic-restraint brief. */
    --sigil-rock-angle: 2deg;
    --sigil-low: 0.10;
    --sigil-peak: 0.32;
    background-image:
        var(--variant-a-sigil-svg),
        radial-gradient(1px 1px at 8% 18%, color-mix(in srgb, var(--m-teal) 45%, transparent), transparent 60%),
        radial-gradient(1.5px 1.5px at 90% 32%, color-mix(in srgb, var(--m-secondary) 40%, transparent), transparent 60%),
        radial-gradient(1px 1px at 42% 88%, color-mix(in srgb, var(--m-accent) 35%, transparent), transparent 60%);
    background-size: 820px 820px, auto, auto, auto;
    background-position: 220px 140px, 0 0, 0 0, 0 0;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    /* Static fallback (= --sigil-low) for reduced-motion. */
    opacity: 0.10;
    animation:
        variant-a-sigil-drift-b-q2hrsz49kr 300s linear infinite,
        variant-a-sigil-rock-b-q2hrsz49kr 300s ease-in-out infinite alternate,
        variant-a-sigil-pulse-b-q2hrsz49kr 67s ease-in-out infinite;
    will-change: background-position, transform, opacity;
}

.variant-a-page[b-q2hrsz49kr]  .ages-section-inner {
    position: relative;
    z-index: 1;
}

.variant-a-page[b-q2hrsz49kr]  .age-card {
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.variant-a-page[b-q2hrsz49kr]  .age-card:hover {
    border-color: color-mix(in srgb, var(--m-secondary) 45%, transparent);
    box-shadow:
        0 12px 30px color-mix(in srgb, black 18%, transparent),
        0 0 24px color-mix(in srgb, var(--m-secondary) 16%, transparent);
}

@media (max-width: 720px) {
    .variant-a-page[b-q2hrsz49kr]  .ages-section {
        padding: 3.5rem 1.25rem 4rem;
    }
}

/* ---- About CTA strip: pull it up a notch so the page ends on a calmer note. */
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip {
    padding: 36px 24px 56px;
}

@media (max-width: 600px) {
    .variant-a-page[b-q2hrsz49kr]  .about-cta-strip {
        padding: 24px 16px 40px;
    }
}

/* ---- Reduced motion: kill the added hover transitions so the experience stays
   calm for users who request reduced motion. The atmospheric constellations
   are static layers (no animation), so they remain on by design — only motion
   on hover is suppressed here. -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .age-card {
        transition: none;
    }
}

/* ============================================================================
   Variant A refinement pass 2 (2026-05-12) — above-the-fold rebalance.

   Goals:
     - relocate the alpha pill out of the hero stack (handled here by hiding
       the HeroBadgePill; the replacement annotation lives in VariantAWordmarkBand)
     - reduce above-fold trust chips to two (Choice-driven + Safe for explorers);
       "Replayable adventures" is removed from the hero — the message lives in
       the LumeriaSection and TrustSection below instead
     - tighten the crest → H1 gap (now that the pill is gone, the natural gap
       is already smaller; we trim hero-container padding-top further)
     - calm the left-column rhythm (less stacked pressure between H1, subtext,
       CTAs, and trust pills)
     - raise the right column's atmospheric presence (outer aura + faint lilac/
       teal glow) WITHOUT enlarging the card — pure ambient depth
   ============================================================================ */

/* ---- Alpha pill: hidden from the hero column. The signal is relocated into
   VariantAWordmarkBand's annotation (`.variant-a-wordmark-annotation`) so the
   "alpha now live" claim remains visible above the fold, just not stacked on
   top of the H1. `display: none` also removes it from the a11y tree — correct,
   since the annotation in the wordmark band carries the same text and comes
   first in DOM order. -------------------------------------------------- */
.variant-a-page[b-q2hrsz49kr]  .hero-badge-pill {
    display: none;
}

/* ---- Trust chips: reduce above-fold count to two. The third pill
   ("Replayable adventures") is removed; the LumeriaSection + TrustSection
   below the fold carry that experience claim. ----------------------- */
.variant-a-page[b-q2hrsz49kr]  .hero-trust-pills .trust-pill:nth-child(3) {
    display: none;
}

/* ---- Hero rhythm tighten-up: now that the pill is gone, pull the headline
   closer to the wordmark band (no separate 30px-tall pill above the H1) and
   ease the spacing rhythm between the remaining stack items. ----- */
.variant-a-page[b-q2hrsz49kr]  .hero-container {
    /* Drop padding-top to 16px (from 24px) — the visible gap is now
       wordmark-bottom-padding (4px) + 16px + H1 margin-top (8px below) = ~28px. */
    padding: 16px 32px 56px;
}

@media (min-width: 1280px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 20px 48px 64px;
    }
}

@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 12px 32px 40px;
    }
}

@media (max-width: 480px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-container {
        padding: 8px 16px 32px;
    }
}

/* ---- Left-column stack rhythm: smaller margins between items reduce stacking
   pressure without losing breathability. The pill is hidden so :nth-child
   indices on .hero-text-col SHIFT — what was item 2 (H1) becomes the first
   visible child. We address by class instead of nth-child to avoid relying
   on the staggered entrance animation indices (HeroSection ties those to
   DOM order; hiding doesn't change order, only paint). ---------- */
.variant-a-page[b-q2hrsz49kr]  .hero-headline {
    /* H1 sits closer to the (now invisible) pill / wordmark band. */
    margin-top: 8px;
}

.variant-a-page[b-q2hrsz49kr]  .hero-subtext {
    /* Tighten subtext → headline gap from 20px to 14px. */
    margin-top: 14px;
}

.variant-a-page[b-q2hrsz49kr]  .hero-cta-group {
    /* Tighten CTA → subtext gap from 28px to 22px. */
    margin-top: 22px;
}

.variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
    /* Tighten pills → CTAs gap from 24px to 18px. */
    margin-top: 18px;
}

/* ---- Right-column atmosphere: increase HeroChipsCard's ambient presence
   WITHOUT enlarging it. Adds an outer aura via the visual column wrapper
   (so the card itself stays its current size and shape) and beefs up the
   chips card's existing shadow with lilac + teal energy. The aura is a
   blurred radial layer behind the card — it reads as cinematic light, not
   a glow border. ------------------------------------------------------ */
.variant-a-page[b-q2hrsz49kr]  .hero-visual-col {
    position: relative;
}

.variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
    /* Outer aura — softly luminous behind the chips card. Sits inside the
       visual column, behind everything; pointer-events off so the card
       interactions are unaffected.
       Pass-4 refinement: blur 8 → 14px softens the aura's edge so it dissolves
       into the surrounding hero gradient rather than reading as a defined halo.
       Secondary radial 18 → 14% / 8 → 6% pulls the centre back so the chips
       card itself is the focal element and the aura is environmental. */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115%;
    height: 115%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 60% at 50% 50%,
            color-mix(in srgb, var(--m-secondary) 14%, transparent) 0%,
            color-mix(in srgb, var(--m-secondary) 6%, transparent) 35%,
            transparent 75%),
        radial-gradient(ellipse 32% 42% at 75% 28%,
            color-mix(in srgb, var(--m-teal) 9%, transparent), transparent 75%),
        radial-gradient(ellipse 32% 42% at 25% 72%,
            color-mix(in srgb, var(--m-accent) 8%, transparent), transparent 75%);
    filter: blur(14px);
    opacity: 0.55;
    animation: variant-a-visual-aura-breathe-b-q2hrsz49kr 7.5s ease-in-out infinite alternate;
}

@keyframes variant-a-visual-aura-breathe-b-q2hrsz49kr {
    from {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.98);
    }
    to {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.02);
    }
}

/* The static particle layer (.hero-visual-col::after) was removed in the
   pass-2 user-feedback dial-down — particles read as visual noise around the
   chips card without earning their keep. The aura layer above carries the
   atmospheric weight on its own. */

/* Ensure the chips card itself sits above the aura layer.
   Pass-4 dial-down: secondary shadow 14 → 10% (dark) and 10 → 8% (light), teal
   12 → 9% (dark) and 10 → 8% (light), so the card anchors cleanly and the
   blurred aura behind it carries the atmospheric weight. */
.variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
    position: relative;
    z-index: 1;
    box-shadow:
        0 12px 36px color-mix(in srgb, black 28%, transparent),
        0 0 32px color-mix(in srgb, var(--m-secondary) 10%, transparent),
        0 0 64px color-mix(in srgb, var(--m-teal) 9%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
    box-shadow:
        0 12px 36px color-mix(in srgb, var(--m-primary) 16%, transparent),
        0 0 32px color-mix(in srgb, var(--m-primary) 8%, transparent),
        0 0 64px color-mix(in srgb, var(--m-teal) 8%, transparent);
}

/* Reduced motion: kill the aura breath; hold opacity at the dialled-down value. */
@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
        animation: none;
        opacity: 0.55;
        transform: translate(-50%, -50%);
    }
}

/* ============================================================================
   Variant A refinement pass 4 (2026-05-13) — premium polish + sigil identity
   particle system + section transitions.

   The sigil layer reuses the same four-pointed ✦ geometry the wordmark band
   anchors with, miniaturised and scattered as a sparse ambient field so the
   page reads as a single cinematic universe rather than stacked panels. Each
   section's existing ::before pseudo carries the layer alongside the previous
   radial-dot constellation; the layer drifts via background-position over
   180–260s so the motion reads as ambient parallax rather than animation.

   Why a custom property: the SVG data URL is identical across sections; lifting
   it to `--variant-a-sigil-svg` on `.variant-a-page` keeps the per-section
   declarations compact and any future tuning of the sigil itself one-place.
   Why inline rgba(): CSS variables don't interpolate inside url(...), so the
   colour is baked into the SVG. Two tones are kept (dark- and light-theme) and
   the theme override swaps the URL at the wrapper level.

   The eight stars per 400×400 tile are sized 4–6px with hand-tuned positions
   to read as a constellation, not a grid.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr] {
    /* Inline four-pointed sigil-star field, dark-theme tone. Pass 6 redesign
       (over pass 5): explicit 3 size classes + baked-in rotation per star so
       the constellation looks composed, not stamped.
         · Star A (LARGE, rare beacon): s=16 px radius, rotated 18°, brightest
           (0.42). Mid-right, isolated — the page's one "noticed" sigil.
         · Star B (MEDIUM, diamond): s=10 px, rotated 45° so the 4 points sit
           at the diagonals — reads as a distinct ✦/diamond variant. Cluster
           with Star C in the upper-left zone.
         · Star C (SMALL, standard): s=5 px, 0° rotation. Forms a pair with B.
         · Star D (SMALL, rotated): s=5 px, rotated 30°. Drifts lower-middle.
       Bias is "rare large, more smaller" per direction (1 + 1 + 2).
       Per-star fill alpha 0.18–0.42 for static depth tiering — and during
       runtime the ::before's container opacity pulses 0.18 → 0.45 → 0.18
       (animation defined below) so the stars also fade and reappear, with
       the current value as the brightness ceiling. */
    --variant-a-sigil-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'><path d='M147,123 L142,130 L147,137 L140,132 L133,137 L138,130 L133,123 L140,128 Z' fill='rgba(196,176,232,0.30)'/><path d='M220,195 L221,199 L225,200 L221,201 L220,205 L219,201 L215,200 L219,199 Z' fill='rgba(196,176,232,0.18)'/><path d='M560,360 L557,374 L570,380 L556,377 L550,390 L553,376 L540,370 L554,373 Z' fill='rgba(196,176,232,0.42)'/><path d='M298,591 L296,595 L299,598 L295,596 L293,599 L294,595 L291,593 L295,594 Z' fill='rgba(196,176,232,0.20)'/></svg>");
}

/* Light/bright-theme sigil tone — primary at lower opacity reads as ink on
   cream rather than the dark-theme lilac-on-purple. Same 4 stars + sizes
   + rotation angles; alphas tuned for the lighter ground. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr] {
    --variant-a-sigil-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'><path d='M147,123 L142,130 L147,137 L140,132 L133,137 L138,130 L133,123 L140,128 Z' fill='rgba(74,40,128,0.22)'/><path d='M220,195 L221,199 L225,200 L221,201 L220,205 L219,201 L215,200 L219,199 Z' fill='rgba(74,40,128,0.14)'/><path d='M560,360 L557,374 L570,380 L556,377 L550,390 L553,376 L540,370 L554,373 Z' fill='rgba(74,40,128,0.32)'/><path d='M298,591 L296,595 L299,598 L295,596 L293,599 L294,595 L291,593 L295,594 Z' fill='rgba(74,40,128,0.16)'/></svg>");
}

/* Sigil drift — the field slides 1 tile diagonally over the section's full
   animation cycle (240–300s per section, declared on each ::before). Linear
   easing reads as continuous ambient drift rather than a recurring loop. */
@keyframes variant-a-sigil-drift-b-q2hrsz49kr {
    from {
        background-position-y: 0;
    }
    to {
        background-position-y: -1200px;
    }
}

/* Sigil rock — the constellation field rocks gently around its center by
   ±--sigil-rock-angle degrees. Used with `animation-direction: alternate` so
   the value rocks forward and back without a snap. Ease-in-out gives the
   rocking a natural breathing rhythm rather than a metronome cadence. At
   ≤3° amplitude the corner exposure on a 1440px section is < 3px, so the
   ::before's inset:0 sizing is sufficient — no oversizing needed. */
@keyframes variant-a-sigil-rock-b-q2hrsz49kr {
    from {
        transform: rotate(calc(var(--sigil-rock-angle, 2deg) * -1));
    }
    to {
        transform: rotate(var(--sigil-rock-angle, 2deg));
    }
}

/* Sigil pulse — the field's container opacity oscillates between --sigil-low
   (the dim baseline) and --sigil-peak (the ceiling, matching the value the
   field rendered at before this animation was introduced — current brightness
   is the max, by design).
   The keyframe shape `0%/100% = low, 50% = peak` combined with ease-in-out
   keeps the field at the dim baseline for ~70% of every cycle and only flares
   to peak briefly through the middle. Sigils fade and reappear naturally —
   never exceeding the previous static brightness. */
@keyframes variant-a-sigil-pulse-b-q2hrsz49kr {
    0%, 100% {
        opacity: var(--sigil-low, 0.15);
    }
    50% {
        opacity: var(--sigil-peak, 0.4);
    }
}

/* Reduced motion: freeze the drift. The sigil layer itself is still visible
   (it's part of the section background-image stack), but no parallax. */
@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .lumeria-section::before,
    .variant-a-page[b-q2hrsz49kr]  .trust-section::before,
    .variant-a-page[b-q2hrsz49kr]  .ages-section::before {
        animation: none;
    }
}

/* ============================================================================
   Section transition fades — dissolve "island" edges.

   Each interior section paints an opaque background. Without a fade, the
   transition from one to the next reads as a hard cut and the section feels
   detached from the page. A linear-gradient strip on the top edge of each
   interior section softens the join into the previous section's atmosphere.
   The bottom edge of the hero shell already fades naturally into Lumeria via
   its existing radial gradient; we add only the top-edge fades on Lumeria,
   Trust, Ages, and the AboutCTA strip's wrapper.

   These rules sit on a NEW ::after pseudo on each section. We keep the existing
   ::before for the sigil + radial constellations so the two layers don't fight.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr]  .lumeria-section,
.variant-a-page[b-q2hrsz49kr]  .trust-section,
.variant-a-page[b-q2hrsz49kr]  .ages-section,
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip {
    /* Sections set `overflow: hidden` already in earlier pass rules; keep them
       positioned so ::after anchors to the section box. */
    position: relative;
}

.variant-a-page[b-q2hrsz49kr]  .lumeria-section::after,
.variant-a-page[b-q2hrsz49kr]  .trust-section::after,
.variant-a-page[b-q2hrsz49kr]  .ages-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    pointer-events: none;
    z-index: 0;
    /* Top-edge dissolve: the section's bg fades INTO the previous section's
       atmosphere. We use `transparent → m-bg` (top → bottom) so the strip
       fades the section bg away at its top edge. */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--m-bg) 60%, transparent) 60%,
        var(--m-bg) 100%
    );
}

/* Light theme variant — same gradient, but using the light bg token. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .lumeria-section::after,
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .trust-section::after,
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .ages-section::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--m-bg) 55%, transparent) 60%,
        var(--m-bg) 100%
    );
}

/* About CTA strip gets the same top fade plus a touch of accent carry from
   Ages above (teal tint) so the closing CTA feels like the conclusion of the
   developmental arc rather than an isolated card. */
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--m-teal) 4%, transparent) 50%,
        transparent 100%
    );
}

/* Ensure the section inner sits above the transition fade. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section-inner,
.variant-a-page[b-q2hrsz49kr]  .trust-section-inner,
.variant-a-page[b-q2hrsz49kr]  .ages-section-inner,
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip-inner {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   Card polish — trust + age cards.

   The hover treatments differ across sections in the shared CSS: trust-card
   uses 0.4s cubic-bezier and 6px lift; age-card uses 0.3s ease and 4px lift.
   Inconsistent rhythm reads as a polish gap. Unify the hover transition
   timing and refine the resting-state border tone so cards read as cut from
   the same cloth.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr]  .trust-card,
.variant-a-page[b-q2hrsz49kr]  .age-card {
    /* Unified hover transition rhythm so card lifts feel cut from the same
       cloth. Cubic-bezier matches the existing trust-card curve. */
    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Refined resting-state border tone — using primary at 14% (slightly more
   colour than the shared default's text at 10%) so cards read as part of
   the Mystira palette rather than neutral surfaces. */
.variant-a-page[b-q2hrsz49kr]  .trust-card {
    border-color: color-mix(in srgb, var(--m-primary) 14%, transparent);
}

.variant-a-page[b-q2hrsz49kr]  .age-card {
    border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
}

/* Trust-card hover — slightly softer lift (8 → 6px) and a hint of secondary
   energy in the shadow, mirroring the page's accent vocabulary. */
.variant-a-page[b-q2hrsz49kr]  .trust-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--m-secondary) 38%, transparent);
    box-shadow:
        0 24px 48px color-mix(in srgb, black 22%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary) 14%, transparent);
}

/* Age-card hover — paired with trust-card's energy palette so both card
   families read with the same hover identity. */
.variant-a-page[b-q2hrsz49kr]  .age-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--m-secondary) 42%, transparent);
    box-shadow:
        0 14px 32px color-mix(in srgb, black 18%, transparent),
        0 0 24px color-mix(in srgb, var(--m-secondary) 16%, transparent);
}

/* Primary age-card retains its highlighted border at rest, but on hover it
   inherits the same secondary energy so the row reads coherent rather than
   leaving the primary card visually orphaned from its siblings on hover. */
.variant-a-page[b-q2hrsz49kr]  .age-card-primary {
    border-color: color-mix(in srgb, var(--m-primary) 60%, transparent);
}

.variant-a-page[b-q2hrsz49kr]  .age-card-primary:hover {
    border-color: color-mix(in srgb, var(--m-primary) 80%, transparent);
    box-shadow:
        0 14px 32px color-mix(in srgb, black 20%, transparent),
        0 0 28px color-mix(in srgb, var(--m-primary) 22%, transparent);
}

/* Reduced motion: kill all card transitions. */
@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .trust-card,
    .variant-a-page[b-q2hrsz49kr]  .age-card {
        transition: none;
    }
    .variant-a-page[b-q2hrsz49kr]  .trust-card:hover,
    .variant-a-page[b-q2hrsz49kr]  .age-card:hover {
        transform: none;
    }
}

/* ============================================================================
   Typography rhythm — optical spacing harmonisation.

   The mixed sans (UI) + Fraunces (editorial) typography system is one of the
   page's strongest existing properties. Pass 4 only tightens optical rhythm:
   - section eyebrows: letter-spacing harmonised to 0.18em across all three
     editorial sections (Trust + Ages used 0.15em; the wider tracking reads as
     more deliberately editorial)
   - hero headline: micro letter-spacing tighten (-0.025em → -0.028em) so the
     gradient-em span doesn't drift visually away from the surrounding text
   - subtext line-height: 1.6 → 1.55 for tighter paragraph rhythm
   - trust + ages headings: shave letter-spacing -0.025em → -0.022em (matches
     the hero headline's revised tracking so all three Fraunces headings read
     in the same voice)

   These are scoped via .variant-a-page ::deep so they don't touch Variant B
   or the authenticated home.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr]  .trust-section-eyebrow,
.variant-a-page[b-q2hrsz49kr]  .ages-section-eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.78rem;
}

.variant-a-page[b-q2hrsz49kr]  .hero-headline {
    letter-spacing: 0;
}

.variant-a-page[b-q2hrsz49kr]  .hero-subtext {
    line-height: 1.55;
}

.variant-a-page[b-q2hrsz49kr]  .trust-section-heading,
.variant-a-page[b-q2hrsz49kr]  .ages-section-heading {
    letter-spacing: 0;
}

/* Editorial-em refinement: the italic span inside section headings already
   uses primary tone — a hairline opacity drop (100 → 92%) gives it a
   slightly hand-painted quality that complements Fraunces' italic forms. */
.variant-a-page[b-q2hrsz49kr]  .trust-section-heading em,
.variant-a-page[b-q2hrsz49kr]  .ages-section-heading em {
    color: color-mix(in srgb, var(--m-primary) 92%, transparent);
}

/* ============================================================================
   Hero rhythm — micro polish on the breathing rhythm between H1, subtext,
   CTAs, and trust pills. Pass 2 set initial values; pass 4 fine-tunes optical
   balance so the column reads as one calm composition.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr]  .hero-headline {
    /* Trims the gap before the gradient-em wrap line so the headline reads
       tighter on its own typography rather than pushed apart by line-height. */
    line-height: 1.06;
}

/* Trust pills inside the hero: 18px is right at desktop; tighten to 16px so
   the pill row reads as a visual base for the column rather than a floating
   metadata strip. */
.variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
    margin-top: 16px;
}

/* Narrower viewports keep more breath since fonts scale down — restore the
   18px gap there. */
@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
        margin-top: 18px;
    }
}

/* ============================================================================
   Variant A refinement pass 7 (2026-05-13) — cinematic composition continuity.

   This pass fixes the two largest remaining continuity issues the brief calls
   out: crest→hero and hero→story-preview (Lumeria). The previous passes
   built the atmospheric vocabulary; this pass *connects* the vocabulary across
   section boundaries so the page reads as one authored cinematic experience
   rather than a stack of strong-but-detached panels.

   Tactics:
     1. Kill the hero's rounded bottom card-edge in Variant A — that 24px
        radius was a major contributor to the "hero is a box; Lumeria is a
        separate box below it" perception. With it gone the hero's natural
        bottom fade bleeds straight into Lumeria's first strip.
     2. Add an ambient luminous halo on the hero-shell `::before` that bleeds
        soft light down from the wordmark zone into the upper hero — embeds
        the crest into the hero environment rather than leaving it as a
        banner stacked above the hero.
     3. Reshape Lumeria's top-edge ::after into a real *atmospheric carry*:
        the first ~160px of Lumeria inherits a hint of the hero's deep tone,
        then dissolves into Lumeria's own bg. The hero doesn't end at the
        join — it visually continues for a moment before Lumeria takes over.
     4. Add a `mask-image` edge fade to the sigil ::before layers on Lumeria
        and Ages so sigils softly emerge from the section edges and dissolve
        as they approach the opposite edge. The feeling becomes "the world
        extends beyond the viewport" rather than "particles inside a box".
     5. Light-mode-specific softening on the hero chips card shadows and the
        hero-visual-col aura — light exposes hard panel edges much more than
        dark, so we tune the light treatment to keep the same atmospheric
        weight without the contrast spike.

   Sigil pulse cadence was slowed in place above (Lumeria 17→45s, Ages 23→67s)
   per the brief's "subconscious, difficult to consciously perceive" directive.
   Drift + rock kept untouched — they were already moving at imperceptible
   rates (≤0.025°/s on rock).
   ============================================================================ */

/* ---- (1) Hero bottom edge — remove the rounded card-edge in Variant A so
   the hero bleeds into Lumeria as a continuous environment, not a card sitting
   above a separate panel. The hero's existing `.hero-bg-fade-bottom` carries
   the bottom-edge fade into deep purple; without the radius and margin the
   fade now reaches Lumeria directly. ----------------------------------- */
.variant-a-page[b-q2hrsz49kr]  .hero-section {
    border-radius: 0;
    margin-bottom: 0;
}

/* ---- (2) Hero-shell luminous halo — atmospheric bridge from the wordmark
   crest down into the upper hero. The halo anchors at the top of the shell
   (so it sits *behind* the wordmark crest) and fades out by 60% of the shell's
   height — bathing the crest + upper hero in shared luminance so the crest
   reads as embedded in the hero environment rather than a stacked banner.

   `isolation: isolate` on the shell creates a stacking context so the halo
   and the in-flow children stack predictably. The halo is z-index 0; the
   wordmark wrap and #main-content are pushed to z-index 1 so they paint
   above the halo. ----------------------------------------------------- */
.variant-a-hero-shell[b-q2hrsz49kr] {
    isolation: isolate;
}

.variant-a-hero-shell[b-q2hrsz49kr]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 65% 95% at 50% 0%,
        color-mix(in srgb, var(--m-secondary) 10%, transparent) 0%,
        color-mix(in srgb, var(--m-secondary) 4%, transparent) 38%,
        transparent 72%
    );
}

/* Light theme: the halo needs more presence to register against the lighter
   shell gradient, and we lean on on-primary (off-white) so it reads as a
   luminous bloom rather than a coloured wash. The cream-on-lavender feel is
   what the brief asks for ("luminous storybook cinema"). */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr]::before {
    background: radial-gradient(
        ellipse 65% 95% at 50% 0%,
        color-mix(in srgb, var(--m-on-primary) 42%, transparent) 0%,
        color-mix(in srgb, var(--m-on-primary) 18%, transparent) 38%,
        transparent 75%
    );
}

/* Lift the in-flow shell children above the halo. The wordmark band wrap is
   cross-scope (lives in VariantAWordmarkBand) so it needs ::deep; #main-content
   is in this scope. Both get position+z-index so the stacking is explicit. */
.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-band-wrap {
    position: relative;
    z-index: 1;
}

.variant-a-hero-shell > #main-content[b-q2hrsz49kr] {
    position: relative;
    z-index: 1;
}

/* ---- (3) Lumeria atmospheric carry — the hero's deep tone bleeds into
   Lumeria's first ~160px before Lumeria's own bg takes over. This is the
   compositional overlap the brief calls for: the story-preview section feels
   like a continuation of the hero environment rather than a floating island
   below it. We also tighten Lumeria's top padding so content emerges sooner
   into the join, reinforcing the "natural continuation" perception. ----- */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section {
    padding-top: 1.75rem;
}

@media (max-width: 720px) {
    .variant-a-page[b-q2hrsz49kr]  .lumeria-section {
        padding-top: 2rem;
    }
}

/* Reshape the existing ::after fade (was transparent → m-bg, which is mostly
   a no-op since the section already paints m-bg). The new gradient bleeds the
   hero's deep tone (#040611 dark / #b4a6de light — matches the hero gradient
   stops) downward into Lumeria's top strip, dissolving by 100% so Lumeria's
   own atmosphere reclaims the rest of the section. Height extended 96 → 160px
   for a longer, calmer dissolve. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section::after {
    /* Pass 10 follow-up (2026-05-13): pass-7 started this carry at 62% opacity,
       which created a 38% brightness drop at the hero→Lumeria joint — the
       abrupt horizontal line visible above the story-demo card. The hero shell
       above paints #040611 at full 100% opacity at its bottom edge; if the
       carry below also starts at 100% opacity of the same colour, the joint
       becomes seamlessly continuous (same colour above and below the line).
       Fade distance extended 160 → 240px so the dissolve into Lumeria's
       transparent ground happens gradually rather than over a short strip. */
    height: 240px;
    background: linear-gradient(
        to bottom,
        #040611 0%,
        color-mix(in srgb, #040611 70%, transparent) 28%,
        color-mix(in srgb, #040611 22%, transparent) 64%,
        transparent 100%
    );
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .lumeria-section::after {
    background: linear-gradient(
        to bottom,
        #b4a6de 0%,
        color-mix(in srgb, #b4a6de 70%, transparent) 28%,
        color-mix(in srgb, #b4a6de 22%, transparent) 64%,
        transparent 100%
    );
}

/* ---- (4) Sigil edge dissolve — `mask-image` fades the sigil layer at the
   top and bottom edges of each section so sigils softly emerge from the
   atmosphere, drift through the visible region, and dissolve back into the
   environment. No change to density, count, or geometry — just the boundary
   behaviour. This is what creates the "world extends beyond the viewport"
   feeling the brief asks for. Side edges are intentionally NOT masked — they
   sit at viewport boundaries where the eye expects content to end. ------- */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section::before,
.variant-a-page[b-q2hrsz49kr]  .ages-section::before {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
}

/* ---- (5) Light-mode hero chips card — soften further. The dark-mode shadow
   uses black at 28%, which in light mode reads as a hard panel edge against
   the cream-lavender ground. We replace it with a more diffused primary-tinted
   shadow set, plus a wider secondary bloom that lets the card feel softly
   suspended in atmosphere rather than stamped on a panel. ----- */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
    box-shadow:
        0 18px 48px color-mix(in srgb, var(--m-primary) 10%, transparent),
        0 6px 18px color-mix(in srgb, var(--m-primary) 6%, transparent),
        0 0 56px color-mix(in srgb, var(--m-secondary) 7%, transparent),
        0 0 96px color-mix(in srgb, var(--m-teal) 5%, transparent);
}

/* Light-mode hero-visual-col aura — the dark aura's 0.55 opacity at the same
   tones drops to near-invisible against the lighter ground. We boost opacity
   for light only, and shift the tone mix toward on-primary so the aura reads
   as luminous diffusion (sun through silk) rather than a coloured wash. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
    background:
        radial-gradient(ellipse 50% 60% at 50% 50%,
            color-mix(in srgb, var(--m-on-primary) 38%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 16%, transparent) 35%,
            transparent 75%),
        radial-gradient(ellipse 32% 42% at 75% 28%,
            color-mix(in srgb, var(--m-teal) 8%, transparent), transparent 75%),
        radial-gradient(ellipse 32% 42% at 25% 72%,
            color-mix(in srgb, var(--m-accent) 7%, transparent), transparent 75%);
    opacity: 0.72;
}

/* ---- Trust + age cards: dial down resting-state contrast in light mode so
   the card edges don't read as hard panels. The dark-mode primary-tinted
   border at 12–14% is restrained; in light mode the same percentage reads
   stronger against the lighter ground, so we drop it. ---------------- */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .trust-card {
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .age-card {
    border-color: color-mix(in srgb, var(--m-primary) 8%, transparent);
}

/* ============================================================================
   Variant A refinement pass 8 (2026-05-13) — environmental continuity.

   The previous passes built the per-section atmospheric vocabulary (sigils,
   constellations, halos, fades). Each was strong but locally scoped: bound to
   `::before { inset: 0 }` inside a section, isolated by `overflow: hidden`,
   stacked above the section's opaque `var(--m-bg)` fill. The page therefore
   read as several individually-glowing rectangles with visible joins between
   them — the brief's "stacked sections with independent glow effects".

   Pass 8 lifts atmosphere out of the per-section rectangles and into a single
   environmental field that paints behind every section continuously:

     1. `.variant-a-page::before` — one atmospheric layer spanning the full
        scroll height. Five asymmetric off-centre radial nodes at varying
        depths so the atmosphere varies as the user scrolls; never a centred
        halo, never a horizontal band. This becomes the "world" the page
        lives in.

     2. Section grounds → transparent. With the env layer underneath, the
        section's own `var(--m-bg)` fill is redundant — and removing it lets
        the environmental atmosphere read continuously across every boundary.
        Cards inside each section retain their own surface fills, so legible
        text contrast is unaffected.

     3. Remove the `::after` seam strips on Trust + Ages. Pass 4 added these
        as "section transition fades" (transparent → m-bg over 96px); they
        were themselves the visible bands the brief calls out. With the env
        continuous, the strips are no longer needed.

     4. Reshape the hero-shell halo as asymmetric multi-radial. The pass-7
        halo was a centred ellipse at 50% 0% — readable as a symmetric pool.
        Replace with two off-centre nodes (32% left-lean + 72% right-lean)
        so the luminance feels spatial, with two depths.

     5. Reshape the hero-visual-col aura as off-centre. Dominant node moves
        from 50%/50% to 42%/55% so the brightest point lies off-axis.

     6. Widen the sigil mask dissolve (20/80 → 35/65) so sigils emerge and
        fade more gradually — eliminating any perceptible "field edge".

     7. Replace the AboutCTA `::after` fade strip with an off-centre radial
        bleed (35% 0%) so the closing CTA atmospherically inherits from
        Ages above without forming a centred horizontal lane.

   The result: one continuous cinematic environment with one strong
   atmospheric "establishing shot" (the hero shell's own gradient + halo)
   and a quietly varied environmental layer below carrying every other
   section in shared light.
   ============================================================================ */

/* ---- (1) Page-level environmental atmosphere ----
   Five asymmetric off-centre nodes spread down the scroll. Each is a wide
   shallow ellipse (60–80% × 15–25%) so its falloff is gentle horizontally
   and quick vertically — atmosphere "drifts" across the page without ever
   forming a horizontal band. The colour mix alternates secondary / teal /
   accent so the atmosphere subtly shifts as you scroll. */
.variant-a-page[b-q2hrsz49kr]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 22% at 18% 18%,
            color-mix(in srgb, var(--m-secondary) 5%, transparent),
            transparent 75%),
        radial-gradient(ellipse 55% 16% at 82% 34%,
            color-mix(in srgb, var(--m-teal) 4%, transparent),
            transparent 72%),
        radial-gradient(ellipse 80% 26% at 28% 56%,
            color-mix(in srgb, var(--m-secondary) 4%, transparent),
            transparent 78%),
        radial-gradient(ellipse 50% 18% at 76% 76%,
            color-mix(in srgb, var(--m-accent) 4%, transparent),
            transparent 76%),
        radial-gradient(ellipse 70% 22% at 24% 94%,
            color-mix(in srgb, var(--m-teal) 3%, transparent),
            transparent 80%);
    /* Very slow vertical drift — 18px over 320s = ~0.056 px/s — well below
       conscious perception, but enough that the environment never feels static
       on long views. Alternating direction avoids snap-restarts. */
    animation: variant-a-environment-drift-b-q2hrsz49kr 320s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Light theme — on-primary (off-white) replaces secondary/teal as the
   dominant luminance because cream-on-cream needs *more* light, not more
   colour. Primary at low opacity provides the warmer accent nodes. Tones
   are nudged up slightly so the field registers against the brighter ground
   without becoming a coloured wash. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]::before {
    background:
        radial-gradient(ellipse 70% 22% at 18% 18%,
            color-mix(in srgb, var(--m-on-primary) 26%, transparent),
            transparent 75%),
        radial-gradient(ellipse 55% 16% at 82% 34%,
            color-mix(in srgb, var(--m-primary) 5%, transparent),
            transparent 72%),
        radial-gradient(ellipse 80% 26% at 28% 56%,
            color-mix(in srgb, var(--m-on-primary) 22%, transparent),
            transparent 78%),
        radial-gradient(ellipse 50% 18% at 76% 76%,
            color-mix(in srgb, var(--m-primary) 4%, transparent),
            transparent 76%),
        radial-gradient(ellipse 70% 22% at 24% 94%,
            color-mix(in srgb, var(--m-on-primary) 18%, transparent),
            transparent 80%);
}

@keyframes variant-a-environment-drift-b-q2hrsz49kr {
    from {
        transform: translateY(0);
        opacity: 0.92;
    }
    to {
        transform: translateY(-18px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]::before {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---- (2) Section grounds → transparent ----
   Lumeria, Trust, Ages, AboutCTA all paint `var(--m-bg)` in their own scoped
   CSS. Pass 8 overrides each to transparent so the page-level environment
   shows through every section continuously. Cards inside each section
   retain their own surface fills via component-scoped CSS, so card-text
   legibility is unaffected — only the section "ground" becomes one shared
   environmental field instead of four separate opaque rectangles. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section,
.variant-a-page[b-q2hrsz49kr]  .trust-section,
.variant-a-page[b-q2hrsz49kr]  .ages-section,
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip {
    background: transparent;
}

/* ---- (3) Kill the visible horizontal seam strips on Trust + Ages ----
   The pass-4 ::after was a 96px linear-gradient (transparent → m-bg) drawn
   at the top of each section — supposed to dissolve the join into the
   previous section's atmosphere, but with both grounds at m-bg the gradient
   itself became the visible band. With the env layer now continuous across
   sections, the strip serves no purpose. (Lumeria keeps its pass-7 ::after
   because it does specific colour-matched bleed from the hero deepest tone
   into Lumeria's first 160px — a different job.) */
.variant-a-page[b-q2hrsz49kr]  .trust-section::after,
.variant-a-page[b-q2hrsz49kr]  .ages-section::after {
    display: none;
}

/* AboutCTA: replace the pass-4 teal carry strip (full-width horizontal
   gradient) with an off-centre radial bleed anchored at 35% / 0%. The
   closing CTA inherits atmospheric warmth from Ages above without forming
   a centred horizontal lane. Height extended 80 → 200px for a softer
   atmospheric inheritance rather than a perceptible fade-in zone. */
.variant-a-page[b-q2hrsz49kr]  .about-cta-strip::after {
    /* Pass 10 follow-up #2 (2026-05-13): the previous attempt moved the
       radial peak from 38%/0% to 38%/40% so the boundary itself sat in
       the radial's outer falloff (mathematically transparent). The
       boundary still read as a visible seam — the user reported "agegroup
       → about transition, not sorted". Even at <2% opacity, the radial's
       asymmetric horizontal distribution (centred at x=38%) creates a
       brightness variation that the eye picks up as an edge at the
       section top.

       Switching to the same strategy pass 8 used for Trust + Ages: remove
       the ::after entirely. The env-layer (page-level continuous
       atmosphere) carries the section's ground; the closing CTA card
       itself (.about-cta-strip-inner with its own glass surface, border,
       and 135deg inner gradient) anchors section identity. The
       atmospheric "warmth from Ages above" the ::after was supposed to
       provide is now structurally absent — but the env-layer's lower
       radial nodes (the 76%/76% accent 5% and 24%/94% teal 3% nodes
       added in passes 8+9) already paint this region with similar warmth
       continuously, with no edge at the section boundary. */
    display: none;
}

/* ---- (4) Hero-shell halo → asymmetric multi-radial ----
   The pass-7 halo was `ellipse 65% 95% at 50% 0%` — perfectly centred,
   readable as a symmetric pool. Replace with two off-centre nodes at
   different depths so the luminance feels spatial: a left-leaning primary
   bloom near the wordmark crest, and a right-leaning teal bloom slightly
   lower. The two nodes never align radially, which kills the "centred
   spotlight" perception. Height extended 60% → 78% so the falloff happens
   over a longer vertical run; no hard halo edge ever becomes visible. */
.variant-a-hero-shell[b-q2hrsz49kr]::before {
    height: 78%;
    background:
        radial-gradient(
            ellipse 55% 85% at 32% 4%,
            color-mix(in srgb, var(--m-secondary) 9%, transparent) 0%,
            color-mix(in srgb, var(--m-secondary) 3%, transparent) 36%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 45% 70% at 72% 14%,
            color-mix(in srgb, var(--m-teal) 6%, transparent) 0%,
            color-mix(in srgb, var(--m-teal) 2%, transparent) 40%,
            transparent 74%
        );
}

/* Light theme — on-primary is the dominant luminance, with one cooler
   accent node (still on-primary, just lower opacity) so the asymmetry is
   purely positional, not chromatic. Reads as "sun catching the upper-left
   of a luminous room" — exactly the storybook-cinema brief. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr]::before {
    background:
        radial-gradient(
            ellipse 55% 85% at 32% 4%,
            color-mix(in srgb, var(--m-on-primary) 42%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 16%, transparent) 36%,
            transparent 74%
        ),
        radial-gradient(
            ellipse 45% 70% at 72% 14%,
            color-mix(in srgb, var(--m-on-primary) 28%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 10%, transparent) 40%,
            transparent 76%
        );
}

/* ---- (5) Hero-visual-col aura → off-centre ----
   The pass-2 + pass-7 aura was anchored at `50% 50%` inside the visual
   column — a perfectly centred glow that read as a spotlight on the chips
   card. Pass 8 moves the dominant node to 42% / 55% so the brightest spot
   lies off the card's centre axis, and adds two secondary ambient nodes
   at 78% / 28% and 22% / 75% for spatial layering. Blur 14 → 18px softens
   the edge further so the layer dissolves into the surrounding atmosphere. */
.variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
    background:
        radial-gradient(ellipse 55% 68% at 42% 55%,
            color-mix(in srgb, var(--m-secondary) 13%, transparent) 0%,
            color-mix(in srgb, var(--m-secondary) 5%, transparent) 36%,
            transparent 78%),
        radial-gradient(ellipse 36% 46% at 78% 28%,
            color-mix(in srgb, var(--m-teal) 8%, transparent),
            transparent 78%),
        radial-gradient(ellipse 32% 42% at 22% 75%,
            color-mix(in srgb, var(--m-accent) 7%, transparent),
            transparent 78%);
    filter: blur(18px);
}

/* Light theme — on-primary dominates again, with the asymmetric placement
   inherited from the dark-mode rule. The aura reads as luminous diffusion
   off the card's upper-left rather than a coloured halo around it. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
    background:
        radial-gradient(ellipse 55% 68% at 42% 55%,
            color-mix(in srgb, var(--m-on-primary) 36%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 14%, transparent) 36%,
            transparent 78%),
        radial-gradient(ellipse 36% 46% at 78% 28%,
            color-mix(in srgb, var(--m-on-primary) 18%, transparent),
            transparent 78%),
        radial-gradient(ellipse 32% 42% at 22% 75%,
            color-mix(in srgb, var(--m-accent) 6%, transparent),
            transparent 78%);
    opacity: 0.78;
}

/* ---- (6) Sigil mask dissolve — wider transparent zones ----
   Pass 7 set the mask to `transparent → black 20% → black 80% → transparent`
   — a 20% emerge / 60% full / 20% dissolve split. The transitions were
   still perceptible at top and bottom of each section. Pass 8 widens to
   35% / 30% / 35% so the sigils emerge and fade much more gradually. The
   "field edge" is no longer detectable; sigils feel like they belong to
   the environment, not the section. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section::before,
.variant-a-page[b-q2hrsz49kr]  .ages-section::before {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 35%,
        black 65%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 35%,
        black 65%,
        transparent 100%
    );
}

/* The trust-section's ::before is the editorial "quiet zone" — only three
   faint radial dots, no sigil field, no overflow:hidden conflict to worry
   about. Apply the same wide mask so the quiet zone's dots also drift in
   and out of visibility rather than clipping at section edges. */
.variant-a-page[b-q2hrsz49kr]  .trust-section::before {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 35%,
        black 65%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 35%,
        black 65%,
        transparent 100%
    );
}

/* ============================================================================
   Variant A refinement pass 9 (2026-05-13) — restrained gold ceremony.

   Passes 1–8 built the page's cool-cinematic palette: teal as the primary
   emotional accent (wonder / imagination / intelligence) carried by sigil
   fields, halos, and the env layer; secondary (lilac) as the structural
   identity tone. Gold (--m-accent) existed mostly as a residual utility
   accent — a single 4% node in the env layer, a 7–8% node in the hero
   visual-col aura, and trace stars in the sigil constellations.

   The result was a page that reads "cold-beautiful" — sophisticated and
   premium, but emotionally cool. For a children's storytelling platform
   built on imagination + emotional growth + narrative warmth, that
   coolness costs us humanity.

   Pass 9 adds gold as the WARM ceremonial punctuation — never a secondary
   theme colour, never overused. The brief: "candlelight inside moonlight".
   Gold appears only where it earns its keep emotionally:

     1. Env-layer "candlelight" node — one tiny warm radial high in the
        page's atmosphere, above the fold, providing initial-impression
        warmth without ever forming a defined glow.

     2. Section eyebrow ceremonial pinpoint — a 4px gold dot sitting before
        each editorial eyebrow on Trust + Ages. The eyebrow becomes a
        "ceremonial mark" rather than a typographic label.

     3. Hero CTA primary hover edge warmth — a hairline gold inset ring on
        hover of the primary "Begin Your Adventure" button. Reads as
        emotional response feedback at the moment of intent.

     4. Trust + Age card hover hairline inner-edge — the cool secondary
        hover (existing) gets a 1px gold inset shadow at very low alpha,
        riding inside the secondary halo. The card edge catches warm
        light at the moment of interaction.

     5. Wordmark band aura — rebalance the existing gold node (small
        position + alpha nudge) so the crest's existing dual-tone teal+
        gold flanking is asymmetric and slightly more present, without
        ever competing with the secondary central bloom.

   The pill itself (AppHeader's `.alpha-status-pill`) gets its ceremonial
   wrap in AppHeader.razor.css gated by `body:has(.variant-a-page)` — that
   change is the largest concentration of gold on the page, sitting in the
   header where it acts as a "single warm anchor" for the otherwise cool
   chrome. All other surfaces stay cool-dominant.

   Constraints honoured:
     - No gold backgrounds, no gold typography blocks, no gold gradients
       on UI controls. Gold appears as: tiny dots, hairline edges, single
       atmospheric whispers, hover glints.
     - Every gold touchpoint sits ALONGSIDE an existing cool surface (teal
       or secondary) — gold is never the only colour at any anchor.
     - Reduced-motion compatibility: gold layers inherit existing motion
       suppression; no new animations introduced.
   ============================================================================ */

/* ---- (1) Env-layer "candlelight" node ----
   Pass 8's env layer had one gold node at 76%/76% (below-fold, 4% alpha).
   Pass 9 adds a second tiny gold node high in the page (54%/8%) so the
   user enters the page bathed in a whisper of warmth — initial-impression
   emotional warmth before any cool atmospheric content registers. The
   node is intentionally small (45% × 14% ellipse) and very low alpha (4%
   dark / 4% light warning-warmed) so it never reads as a defined glow.
   The existing 76%/76% gold node alpha is bumped 4 → 5% so the two warm
   nodes together carry a quietly continuous atmospheric warmth from top
   to bottom of the page — the brief's "hidden warmth" register. */
.variant-a-page[b-q2hrsz49kr]::before {
    background:
        radial-gradient(ellipse 70% 22% at 18% 18%,
            color-mix(in srgb, var(--m-secondary) 5%, transparent),
            transparent 75%),
        radial-gradient(ellipse 55% 16% at 82% 34%,
            color-mix(in srgb, var(--m-teal) 4%, transparent),
            transparent 72%),
        radial-gradient(ellipse 45% 14% at 54% 8%,
            color-mix(in srgb, var(--m-accent) 4%, transparent),
            transparent 78%),
        radial-gradient(ellipse 80% 26% at 28% 56%,
            color-mix(in srgb, var(--m-secondary) 4%, transparent),
            transparent 78%),
        radial-gradient(ellipse 50% 18% at 76% 76%,
            color-mix(in srgb, var(--m-accent) 5%, transparent),
            transparent 76%),
        radial-gradient(ellipse 70% 22% at 24% 94%,
            color-mix(in srgb, var(--m-teal) 3%, transparent),
            transparent 80%);
}

/* Light theme — the candlelight node uses warning (warmer amber than
   accent) at 4% so it reads as soft sunlight against the cream ground,
   not as a gold tint. The lower 76%/76% node also uses warning for
   consistency. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]::before {
    background:
        radial-gradient(ellipse 70% 22% at 18% 18%,
            color-mix(in srgb, var(--m-on-primary) 26%, transparent),
            transparent 75%),
        radial-gradient(ellipse 55% 16% at 82% 34%,
            color-mix(in srgb, var(--m-primary) 5%, transparent),
            transparent 72%),
        radial-gradient(ellipse 45% 14% at 54% 8%,
            color-mix(in srgb, var(--m-warning) 4%, transparent),
            transparent 78%),
        radial-gradient(ellipse 80% 26% at 28% 56%,
            color-mix(in srgb, var(--m-on-primary) 22%, transparent),
            transparent 78%),
        radial-gradient(ellipse 50% 18% at 76% 76%,
            color-mix(in srgb, var(--m-warning) 4%, transparent),
            transparent 76%),
        radial-gradient(ellipse 70% 22% at 24% 94%,
            color-mix(in srgb, var(--m-on-primary) 18%, transparent),
            transparent 80%);
}

/* ---- (2) Section eyebrow ceremonial pinpoint ----
   Trust + Ages eyebrows ("Designed With Care" / "Mystira Grows With Them")
   currently read as typography labels. Pass 9 prepends a 4px gold dot via
   `::before` so the eyebrow becomes a deliberate ceremonial mark — the
   role gold plays in editorial print: a hand-drawn bullet that signals
   "this is the start of a movement, not just a heading".

   Lumeria's eyebrow is intentionally untouched — its existing decorative
   sparkles already do the ceremonial work. Two of three eyebrows getting
   the gold pinpoint avoids a "every editorial heading has a gold dot"
   pattern fatigue. */
.variant-a-page[b-q2hrsz49kr]  .trust-section-eyebrow,
.variant-a-page[b-q2hrsz49kr]  .ages-section-eyebrow {
    /* Inline-flex so the ::before dot aligns optically with the eyebrow
       baseline regardless of the eyebrow's existing display behaviour. */
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    position: relative;
}

.variant-a-page[b-q2hrsz49kr]  .trust-section-eyebrow::before,
.variant-a-page[b-q2hrsz49kr]  .ages-section-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-accent) 75%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--m-accent) 40%, transparent);
    /* Vertical alignment: shift 1px up so the dot sits optically centred
       on the eyebrow's cap-height (uppercase letters; the geometric centre
       sits 1px above the baseline). */
    transform: translateY(-1px);
}

/* Light theme — warning (warmer amber) is the right tone here because the
   accent gold dot at the same alpha against cream reads as washed out
   rather than as a deliberate mark. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .trust-section-eyebrow::before,
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .ages-section-eyebrow::before {
    background: color-mix(in srgb, var(--m-warning) 70%, var(--m-accent));
    box-shadow: 0 0 6px color-mix(in srgb, var(--m-warning) 35%, transparent);
}

/* ---- (3) Hero CTA primary hover edge warmth ----
   The primary "Begin Your Adventure" button uses --m-primary as its base.
   On hover, pass 9 layers a hairline gold ring inside the existing hover
   box-shadow stack — reads as "warm light catching the button edge at
   the moment of intent". The ring is 1px at 22% accent, sitting INSIDE
   the button as an inset shadow so it doesn't expand the click target
   or affect the layout.

   The button's resting state stays cool (no gold at rest); only the
   hover-state gold appears. This is the brief's "interaction warmth"
   use case — gold as emotional response feedback, not a permanent
   surface treatment. */
.variant-a-page[b-q2hrsz49kr]  .hero-btn-primary {
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.variant-a-page[b-q2hrsz49kr]  .hero-btn-primary:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-accent) 22%, transparent) inset,
        0 6px 18px color-mix(in srgb, var(--m-primary) 28%, transparent),
        0 0 22px color-mix(in srgb, var(--m-accent) 14%, transparent);
}

/* Light theme — warning instead of accent for the inner ring so the
   warmth reads against the primary's cream-leaning surface. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-btn-primary:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-warning) 28%, transparent) inset,
        0 6px 18px color-mix(in srgb, var(--m-primary) 22%, transparent),
        0 0 22px color-mix(in srgb, var(--m-warning) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .hero-btn-primary {
        transition: none;
    }
}

/* ---- (4) Trust + Age card hover hairline inner-edge ----
   Pass 4 unified card hover transitions; pass 4 hover shadow stacks use
   secondary energy. Pass 9 adds a single hairline gold inset to the same
   hover shadow stack so the card edge "catches warm light" at the moment
   of interaction — reading as candlelight on a cool surface.

   The inset sits INSIDE the existing shadow stack, with no change to
   the existing secondary halo or the resting state. Alpha is intentionally
   low (10–14%) so the gold is subliminal warmth, not a coloured edge. */
.variant-a-page[b-q2hrsz49kr]  .trust-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-accent) 12%, transparent) inset,
        0 24px 48px color-mix(in srgb, black 22%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary) 14%, transparent);
}

.variant-a-page[b-q2hrsz49kr]  .age-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-accent) 10%, transparent) inset,
        0 14px 32px color-mix(in srgb, black 18%, transparent),
        0 0 24px color-mix(in srgb, var(--m-secondary) 16%, transparent);
}

/* The primary age-card already gets its own hover shadow (pass 4) at
   primary 22%. Pass 9 layers the same hairline gold inset so the primary
   card hover stays differentiated but shares the warmth vocabulary. */
.variant-a-page[b-q2hrsz49kr]  .age-card-primary:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-accent) 14%, transparent) inset,
        0 14px 32px color-mix(in srgb, black 20%, transparent),
        0 0 28px color-mix(in srgb, var(--m-primary) 22%, transparent);
}

/* Light theme — warning replaces accent for the inset ring so the card
   edge reads as warm candlelight catching the cream surface, not gold
   reflecting off another gold. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .trust-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-warning) 16%, transparent) inset,
        0 24px 48px color-mix(in srgb, var(--m-primary) 14%, transparent),
        0 0 28px color-mix(in srgb, var(--m-secondary) 14%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .age-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-warning) 14%, transparent) inset,
        0 14px 32px color-mix(in srgb, var(--m-primary) 12%, transparent),
        0 0 24px color-mix(in srgb, var(--m-secondary) 16%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .age-card-primary:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--m-warning) 18%, transparent) inset,
        0 14px 32px color-mix(in srgb, var(--m-primary) 14%, transparent),
        0 0 28px color-mix(in srgb, var(--m-primary) 22%, transparent);
}

/* ---- (5) Wordmark band aura — rebalance for dual-tone restraint ----
   The existing aura has a teal node on the left (18%/50%, 14%) and a gold
   node on the right (82%/50%, 11%). Pass 9 nudges the gold node SLIGHTLY
   left (82% → 78%) and SLIGHTLY up (50% → 45%) so the two warm/cool
   ambient nodes sit asymmetrically — and bumps the gold alpha 11 → 14% so
   the dual-tone identity is balanced. The result: the crest reads as
   "lilac-cool centred with subtle teal+gold ambient flanking" rather than
   "lilac with a teal whisper and a gold echo".

   The alpha bump is small (3 percentage points); the warm node remains
   well below the secondary central bloom (26%). Gold stays SECONDARY to
   secondary, never competing for primary attention. */
.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-aura {
    background:
        radial-gradient(ellipse 50% 90% at 50% 50%,
            color-mix(in srgb, var(--m-secondary) 26%, transparent) 0%,
            color-mix(in srgb, var(--m-secondary) 11%, transparent) 35%,
            transparent 70%),
        radial-gradient(ellipse 25% 70% at 18% 50%,
            color-mix(in srgb, var(--m-teal) 14%, transparent), transparent 70%),
        radial-gradient(ellipse 25% 70% at 78% 45%,
            color-mix(in srgb, var(--m-accent) 14%, transparent), transparent 70%);
}

/* ============================================================================
   Variant A refinement pass 10 (2026-05-13) — motion stability +
   mobile atmospheric rhythm.

   Two paired briefs:

   A. ATMOSPHERIC MOTION STABILITY
      Passes 1–9 layered several atmospheric animations: visual-aura-breathe
      (7.5s opacity+scale oscillation), wordmark-aura-breathe (6.5s opacity
      oscillation), sigil-pulse (45-67s opacity oscillation), sigil-rock
      (240-300s ease-in-out alternate rotation), env-drift (320s ease-in-out
      alternate translateY + opacity). On paper each was "slow enough", but
      together the page carried multiple synchronised cyclical luminance
      patterns — the eye's pattern-recognition picked them up as breathing.

      The motion-stability brief asks for "geological / environmental /
      subconscious / deeply calm" motion. Pass 10 removes ALL oscillation
      (ease-in-out alternate, opacity cycles, pulse keyframes) and holds
      former oscillation midpoints as static values. Replacement motion
      where motion is wanted: ONE unidirectional linear drift at extreme
      duration (1100s+) per element so the cycle endpoint is never
      observable. Multi-axis where asymmetric movement is wanted (X+Y
      composite at the same period; the diagonal vector reads as drift
      direction, never as cycle).

      Sigil-drift (240-300s linear background-position-y) is the one
      animation kept in its original form — it's a unidirectional bg-position
      translation across an infinite tiled pattern. There is no observable
      cycle endpoint because the pattern is seamless; the eye sees only
      continuous drift. This is exactly the "geological" motion the brief
      asks for.

      Reduced-motion users continue to see the static end-states — same
      visual weight, no motion.

   B. MOBILE ATMOSPHERIC SPACING
      On mobile (≤991.98px) the layout collapses to one column: the
      hero-trust-pills row sits at the bottom of hero-text-col, and the
      hero-visual-col (carrying HeroChipsCard) stacks immediately below.
      The hero-visual-col `::before` aura extends across the full column
      height — so its top region bleeds INTO the space above the chips
      card, atmospherically compressing the chip row against the card.

      Pass 10 fixes this WITHOUT adding hard separators or boxed spacing:
        1. Increase the vertical gap between hero-trust-pills and the
           hero-visual-col so the chip row reads as metadata closing the
           text col, with breathing room before the experience card opens.
        2. Mask-image fade the hero-visual-col aura's top 22% on mobile so
           the aura emerges from below — the chip row sits in clear air,
           the card edge floats in atmosphere that begins beneath it.
        3. Soften the HeroChipsCard inner glow's top alpha on mobile via
           ::deep so the card's upper edge reads quieter — its top no
           longer projects warmth upward into the chip-card transition.

      Result: the chips read as "lightweight emotional metadata", the
      card reads as "the beginning of the interactive experience", and
      the transitional region between them is quiet, soft, atmospheric.
   ============================================================================ */

/* ---- (A1) Env-layer drift — REMOVED (was causing backdrop-filter flicker) ----
   Pass 10 first tried a 1100s linear asymmetric drift (translate -12px,-36px)
   to preserve "the world is quietly alive" while removing oscillation. The
   drift was visually sub-perceptual (Y at 0.033 px/sec, X at 0.011 px/sec),
   but it caused a GPU-compositor side effect: any element with
   `backdrop-filter: blur(N)` over a *moving* layer must re-rasterize the
   blurred surface on every frame. AboutCtaStrip-inner has `backdrop-filter:
   blur(16px)`, InteractiveStoryDemo has `backdrop-filter: blur(16px)` — both
   sit over the env layer. On many GPUs this continuous re-rasterization
   produces visible 1-pixel jitter that reads as "flicker" even though
   nothing is *intentionally* animated to that effect.

   The fix is structural, not parametric — no value of "slower drift" or
   "longer period" eliminates the re-rasterization cost. The env layer must
   be STATIC for backdrop-filter elements above it to render stably.

   The page keeps ambient motion via:
     - Lumeria sigil-drift (240s linear bg-position) — drives the editorial
       narrative section's "alive" feeling
     - Ages sigil-drift (300s linear bg-position) — drives the
       developmental section's parallel motion
   These two sections are the page's "alive editorial" zone. The framing
   sections (hero, trust, AboutCTA) sit on a stable atmospheric ground —
   thematically appropriate: framing is ceremonial; editorial is alive.

   Holding the env layer at opacity 1 (the previous animation's end-state).
   No animation, no transform, no opacity change. */
.variant-a-page[b-q2hrsz49kr]::before {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ---- (A2) Hero-visual-col aura — hold static ----
   The 7.5s ease-in-out alternate breath (opacity 0.45 → 0.6, scale
   0.98 → 1.02) was the most visibly cyclical animation on the page —
   short enough that the eye reliably caught the breath rhythm. Pass 10
   holds opacity at 0.55 (the previous mid-cycle value) with no scale
   change. The env layer above carries the page's ambient motion; the
   visual-col aura is now a static atmospheric element behind the card. */
.variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
    animation: none;
    opacity: 0.55;
    transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
        /* Same value as the no-preference rule above — explicit so the
           pass-2 reduced-motion override (was opacity 0.55, transform
           translate(-50%, -50%)) doesn't get shadowed. */
        animation: none;
        opacity: 0.55;
        transform: translate(-50%, -50%);
    }
}

/* ---- (A3) Sigil layers — drop pulse + rock, keep drift only ----
   Pass 6 layered three animations on Lumeria + Ages sigil ::before
   pseudos: drift (linear bg-position), rock (ease-in-out alternate
   rotation), pulse (ease-in-out opacity oscillation). The rock and
   pulse together created a perceptible "the field is breathing" effect.
   Pass 10 keeps only the drift — the field translates seamlessly across
   the tiled pattern with no rotation, no opacity change, no visible
   cycle.

   Opacity holds at the previous --sigil-peak value so the field's
   visual weight at peak brightness becomes the new resting state. This
   is intentional: at low (--sigil-low) the field nearly vanished; the
   pulse made low → peak the noticeable transition. Holding at peak
   means the field is consistently present at the same brightness it
   used to reach only briefly.

   Lumeria peak was 0.45; Ages peak was 0.32. Trust quiet zone was
   already static at 0.35 — unchanged. */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section::before {
    animation: variant-a-sigil-drift-b-q2hrsz49kr 240s linear infinite;
    opacity: 0.45;
    transform: none;
}

.variant-a-page[b-q2hrsz49kr]  .ages-section::before {
    animation: variant-a-sigil-drift-b-q2hrsz49kr 300s linear infinite;
    opacity: 0.32;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .variant-a-page[b-q2hrsz49kr]  .lumeria-section::before {
        animation: none;
        opacity: 0.45;
    }
    .variant-a-page[b-q2hrsz49kr]  .ages-section::before {
        animation: none;
        opacity: 0.32;
    }
}

/* ---- (B1) Mobile chip → card breathing gap ----
   On mobile the hero-trust-pills row is the last element in hero-text-col
   and the hero-visual-col stacks immediately below it. Pass 9 had the
   trust-pills row at margin-top 18px (tablet override of the 16px desktop
   value). The brief asks for stronger vertical separation — but NOT via a
   hard separator, boxed spacing, or additional UI structure. We add the
   gap on the visual column side instead so the chip row's own spacing
   stays unchanged and the gap reads as atmosphere opening up below the
   pills, not as a margin gap.

   margin-top values: tablet (≤991.98px) 32px, mobile (≤720px) 28px,
   small-mobile (≤480px) 24px — increases breathing room while keeping
   the column compact at narrow widths. The visual-col is centred via
   margin: 0 auto on the chips card, so this margin pushes the whole card
   group down within the column. */
@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col {
        margin-top: 32px;
    }
}

@media (max-width: 720px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col {
        margin-top: 28px;
    }
}

@media (max-width: 480px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col {
        margin-top: 24px;
    }
}

/* ---- (B2) Mobile aura top fade ----
   The hero-visual-col aura's top region bleeds upward into the space
   above the chips card. On mobile that overlaps with the chip row sitting
   just above. Fade the aura's top 22% via mask-image so the aura emerges
   from below — the upper card edge floats in atmosphere that hasn't
   reached the chip row yet.

   The mask also fades the aura's bottom 12% so the aura doesn't read
   as a hard cut-off at the column's bottom edge. Side edges are
   unmasked — they align with the viewport edge where the eye expects
   content to end. Desktop layouts (>991.98px) keep the unmasked aura
   since the two columns sit side-by-side and there's no above-aura
   element to compress against. */
@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col::before {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 22%,
            black 88%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 22%,
            black 88%,
            transparent 100%
        );
    }
}

/* ---- (B3) Mobile chips-card upper glow softening ----
   HeroChipsCard's `::before` inner glow is a 160deg linear-gradient with
   secondary at 12% (top-left) → transparent at 50% → teal at 10%
   (bottom-right). The top-left secondary node projects warmth UPWARD —
   on mobile that warmth lands in the transitional region above the card.
   Soften the secondary stop on mobile (12 → 6%) so the card's upper edge
   reads quieter; the bottom-right teal stays at 10% so the card's lower
   edge keeps its cinematic depth. Desktop unaffected. */
@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-chips-card::before {
        background: linear-gradient(
            160deg,
            color-mix(in srgb, var(--m-secondary) 6%, transparent) 0%,
            transparent 50%,
            color-mix(in srgb, var(--m-teal) 10%, transparent) 100%
        );
    }

    /* Card shadow on mobile: soften the upper secondary ring (24px secondary
       at 10%) so the card edge doesn't project a warm halo upward. Drop
       shadow stays — the card still has the lifted depth — but the ambient
       glow above is reduced. */
    .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
        box-shadow:
            0 12px 36px color-mix(in srgb, black 28%, transparent),
            0 0 24px color-mix(in srgb, var(--m-secondary) 6%, transparent),
            0 0 48px color-mix(in srgb, var(--m-teal) 6%, transparent);
    }

    /* Light theme — same softening pattern applied to the primary-tinted
       light-mode shadow stack from pass 7. */
    :is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
        box-shadow:
            0 14px 36px color-mix(in srgb, var(--m-primary) 8%, transparent),
            0 6px 18px color-mix(in srgb, var(--m-primary) 5%, transparent),
            0 0 42px color-mix(in srgb, var(--m-secondary) 4%, transparent),
            0 0 72px color-mix(in srgb, var(--m-teal) 4%, transparent);
    }
}

/* ============================================================================
   Variant A refinement pass 10 supplemental (2026-05-13) — three targeted
   fixes for issues uncovered during pass 10 visual review:

     (C1) Lumeria bottom shadow cut by Trust section.
          The InteractiveStoryDemo card inside Lumeria has a
          `box-shadow: 0 16px 60px ...` that projects ~76px below the card.
          Lumeria's `overflow: hidden` (set in pass 1 for sigil layer
          containment) clips the shadow at Lumeria's section boundary. The
          sigil layer is already bounded by `position: absolute; inset: 0`
          so the overflow rule serves no purpose for it — pure side effect.
          Remove `overflow: hidden`; the shadow can now project naturally
          into Trust's atmospheric space below, restoring continuity.

     (C2) Wordmark → hero top-corner transition obvious in light mode.
          Pass-8's hero-shell `::before` halo positions two asymmetric
          luminance nodes at 32%/4% and 72%/14% — both inward of the
          shell's left/right edges. The far-left (0–18%) and far-right
          (78–100%) top corner zones receive no luminance bloom, leaving
          the cream navbar bottom meeting the bare lavender hero-shell
          gradient (#dccef8) as a visible step. Dark mode hides this via
          the navbar's `m-glass-nav` translucency over the dark page bg.
          Light mode exposes it via cream-on-lavender luminance contrast.

          Add a wide top-edge cream bloom (50%/-8%, 92% × 20% ellipse) to
          the LIGHT-THEME halo only. The new node uses on-primary at 36%
          centre / 14% edge — wide enough to cover both corners but low
          enough to never become a "spotlight". The two existing
          asymmetric nodes (32%/4% + 72%/14%) are kept so the spatial
          composition is preserved; the new node sits BENEATH them in the
          gradient stack and reads as a base atmospheric layer rather
          than a feature.

   These fixes pair with the env-drift removal above (A1) — all three
   surfaced together in the pass-10 visual review. The env-drift removal
   is structural; (C1) and (C2) are targeted overlays.
   ============================================================================ */

/* ---- (C1) Lumeria overflow — let the story demo shadow project down ----
   `overflow: hidden` was set in pass 1 nominally for the sigil layer. But
   the sigil ::before uses `position: absolute; inset: 0` — it's already
   bounded to the section's content box, not by the section's overflow.
   The overflow rule's only practical effect was clipping the story-demo
   card's 76px box-shadow (16px + 60px) at Lumeria's bottom edge. With
   overflow removed, the shadow projects into Trust's atmospheric area,
   reinforcing the pass-7 hero→Lumeria→Trust environmental continuity.

   Trust's `background: transparent` (pass 8) means the projected shadow
   shows through Trust's box; Trust's own ::before (the editorial quiet
   zone) sits at z-index 0 with no opaque fill, so the shadow remains
   visible beneath Trust's 3 atmospheric dots.

   Side overflow (horizontal): the sigil layer is `inset: 0` — bounded
   to Lumeria's width regardless of section overflow. No risk of horizontal
   tile leak.

   `overflow: visible` is the explicit token — supersedes the pass-1
   `overflow: hidden` via cascade (this rule comes later in source order). */
.variant-a-page[b-q2hrsz49kr]  .lumeria-section {
    overflow: visible;
}

/* ---- (C2) Hero-shell top-corner cream bloom (light theme only) ----
   Extends the pass-8 hero-shell light-theme halo. Keeps the two pass-8
   asymmetric nodes (32%/4% + 72%/14%) as the composition's "feature"
   layer; adds a new wide top-edge bloom at 50%/-8% (a 92% × 20% ellipse
   anchored just above the shell's top edge) as the "base" layer beneath.

   The wide bloom uses on-primary at 36% centre / 14% mid-edge — bright
   enough to cover the corner luminance gap, low enough to never read as
   a deliberate spotlight. Positioning the node at -8% (above the shell's
   top edge) means the bloom's brightest point sits just outside the visual
   area; what's visible inside the shell is the falloff — a smooth cream
   wash dissolving downward into the lavender gradient.

   Dark theme is untouched — the pass-8 dark halo already handles the
   navbar→shell transition cleanly via the m-glass-nav's translucency
   over the dark page bg. The corner issue is light-mode specific.

   Listed as multi-radial in the same `background:` shorthand — CSS layers
   render top→bottom in declared order so the wide bloom (first) sits
   BENEATH the two asymmetric nodes (second + third). The two asymmetric
   nodes therefore retain their feature role; the bloom is the supporting
   atmospheric layer that fills in the corner gaps. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr]::before {
    background:
        radial-gradient(
            ellipse 92% 20% at 50% -8%,
            color-mix(in srgb, var(--m-on-primary) 36%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 14%, transparent) 55%,
            transparent 88%
        ),
        radial-gradient(
            ellipse 55% 85% at 32% 4%,
            color-mix(in srgb, var(--m-on-primary) 42%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 16%, transparent) 36%,
            transparent 74%
        ),
        radial-gradient(
            ellipse 45% 70% at 72% 14%,
            color-mix(in srgb, var(--m-on-primary) 28%, transparent) 0%,
            color-mix(in srgb, var(--m-on-primary) 10%, transparent) 40%,
            transparent 76%
        );
}

/* ============================================================================
   Variant A refinement pass 11 (2026-05-14) — restrained typography polish.

   Keep the current composition. This pass lowers typographic mass, opens the
   CTA-to-pill rhythm, and lets the right journey card sit a touch lower so the
   above-fold layout feels premium rather than perfectly centred.
   ============================================================================ */

.variant-a-page[b-q2hrsz49kr]  .hero-headline {
    max-width: 11.8ch;
    font-size: 3.25rem;
    font-weight: 620;
    line-height: 1.11;
    letter-spacing: 0;
    text-wrap: balance;
}

.variant-a-page[b-q2hrsz49kr]  .hero-headline-gradient {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-secondary) 86%, var(--m-on-primary)) 0%,
        color-mix(in srgb, var(--m-teal) 78%, var(--m-on-primary)) 44%,
        color-mix(in srgb, var(--m-secondary) 82%, var(--m-on-primary)) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.variant-a-page[b-q2hrsz49kr]  .hero-subtext {
    max-width: 440px;
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.62;
    color: color-mix(in srgb, var(--m-text-2) 92%, var(--m-on-primary));
}

.variant-a-page[b-q2hrsz49kr]  .hero-cta-group {
    margin-top: 24px;
}

.variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
    margin-top: 28px;
}

@media (min-width: 992px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-grid {
        align-items: start;
    }

    .variant-a-page[b-q2hrsz49kr]  .hero-visual-col {
        margin-top: 18px;
    }
}

.variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
    padding: 34px 30px;
    border-color: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 5%, transparent);
    box-shadow:
        0 12px 34px color-mix(in srgb, black 24%, transparent),
        0 0 26px color-mix(in srgb, var(--m-secondary) 7%, transparent),
        0 0 52px color-mix(in srgb, var(--m-teal) 7%, transparent);
}

.variant-a-page[b-q2hrsz49kr]  .hero-chip {
    padding: 16px 18px;
    border-color: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 3%, transparent);
}

.variant-a-page[b-q2hrsz49kr]  .hero-chip-label {
    font-size: 0.96rem;
    font-weight: 550;
    line-height: 1.4;
}

.variant-a-page[b-q2hrsz49kr]  .hero-chip-body {
    font-size: 0.875rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--m-on-primary) 76%, transparent);
}

.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-band {
    padding: 0.92rem 2.1rem;
    border-color: color-mix(in srgb, var(--m-on-primary) 8%, transparent);
    box-shadow:
        0 5px 18px color-mix(in srgb, black 10%, transparent),
        0 0 14px color-mix(in srgb, var(--m-primary) 5%, transparent);
}

.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-aura {
    opacity: 0.14;
}

.variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-image {
    height: 80px;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--m-secondary) 18%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-headline-gradient {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-primary) 88%, var(--m-text)) 0%,
        color-mix(in srgb, var(--m-teal) 56%, var(--m-primary)) 44%,
        color-mix(in srgb, var(--m-primary) 84%, var(--m-text)) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-subtext {
    color: color-mix(in srgb, var(--m-text-2) 88%, var(--m-text));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
    border-color: color-mix(in srgb, var(--m-primary) 14%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 62%, transparent);
    box-shadow:
        0 12px 32px color-mix(in srgb, var(--m-primary) 12%, transparent),
        0 0 24px color-mix(in srgb, var(--m-primary) 6%, transparent),
        0 0 52px color-mix(in srgb, var(--m-teal) 5%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chip {
    border-color: color-mix(in srgb, var(--m-primary) 14%, transparent);
    background: color-mix(in srgb, var(--m-on-primary) 72%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-page[b-q2hrsz49kr]  .hero-chip-body {
    color: color-mix(in srgb, var(--m-text) 76%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-band {
    background: color-mix(in srgb, var(--m-on-primary) 32%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
    box-shadow:
        0 5px 18px color-mix(in srgb, var(--m-primary) 6%, transparent),
        0 0 14px color-mix(in srgb, var(--m-primary) 4%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-hero-shell[b-q2hrsz49kr]  .variant-a-wordmark-aura {
    opacity: 0.22;
}

@media (max-width: 991.98px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-headline {
        max-width: 12.5ch;
        font-size: 2.45rem;
    }

    .variant-a-page[b-q2hrsz49kr]  .hero-subtext {
        max-width: 520px;
    }

    .variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
        margin-top: 26px;
    }
}

@media (max-width: 480px) {
    .variant-a-page[b-q2hrsz49kr]  .hero-headline {
        max-width: 12ch;
        font-size: 1.68rem;
    }

    .variant-a-page[b-q2hrsz49kr]  .hero-trust-pills {
        margin-top: 24px;
    }

    .variant-a-page[b-q2hrsz49kr]  .hero-chips-card {
        padding: 25px 20px;
    }
}
/* /Components/Home/TrustSection.razor.rz.scp.css */
.trust-section[b-2jxwlq02la] {
  position: relative;
  padding: 6rem 2.5rem;
  background: linear-gradient(180deg,
    var(--m-bg),
    color-mix(in srgb, var(--m-bg-2) 85%, var(--m-bg)));
}

.trust-section-inner[b-2jxwlq02la] {
  max-width: 1200px;
  margin: 0 auto;
}

.trust-section-eyebrow[b-2jxwlq02la] {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--m-teal);
  font-weight: 700;
  margin-bottom: 1rem;
}

.trust-section-heading[b-2jxwlq02la] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--m-text);
  max-width: 700px;
  margin: 0 0 4rem 0;
}

.trust-section-heading em[b-2jxwlq02la] {
  font-style: italic;
  font-weight: 300;
  color: var(--m-primary);
}

.trust-grid[b-2jxwlq02la] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}

.trust-card[b-2jxwlq02la] {
  position: relative;
  overflow: hidden;
  padding: 2.25rem;
  border-radius: 24px;
  background: color-mix(in srgb, var(--m-text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-text) 10%, transparent);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.trust-card[b-2jxwlq02la]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at 50% 0%,
    color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 60%);
}

.trust-card:hover[b-2jxwlq02la] {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--m-text) 18%, transparent);
}

.trust-card:hover[b-2jxwlq02la]::before { opacity: 1; }

.trust-icon[b-2jxwlq02la] {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--m-primary);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--m-primary) 15%, transparent),
    color-mix(in srgb, var(--m-teal) 15%, transparent));
  transition: transform 0.4s ease;
}

.trust-card:hover .trust-icon[b-2jxwlq02la] {
  transform: rotate(-8deg) scale(1.05);
}

.trust-card-title[b-2jxwlq02la] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.75rem 0;
  color: var(--m-text);
}

.trust-card-body[b-2jxwlq02la] {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--m-text-2);
  margin: 0;
}

@media (max-width: 720px) {
  .trust-section[b-2jxwlq02la] { padding: 4.5rem 1.25rem; }
}
/* /Components/Home/VariantAWordmarkBand.razor.rz.scp.css */
/* ============================================================
   Variant A Wordmark Band — wide glass surface with aura glow
   ============================================================
   Pairs visually with HeroChipsCard. Where the v1 WordmarkBand
   is an opaque primary-coloured slab, this band reads as a
   translucent atmospheric surface so the two cards on Variant A
   speak the same material language. */

.variant-a-wordmark-band-wrap[b-lbwb0qz618] {
    /* Refinement pass: the crest should read as a ceremonial signature, not the
       hero. Top padding dropped from 2rem → 1.1rem (~45%), wrap bottom kept tight
       so the hero gradient flows up against the band. Pass 4 trims top to 0.85rem
       for one last 5–10% reduction in crest dominance. Pass 7 drops the bottom
       padding entirely (0.25rem → 0) so the band sits flush against the hero —
       no residual gap between crest and hero composition. */
    padding: 0.85rem 2.5rem 0;
    background: var(--m-bg);
}

.variant-a-wordmark-band[b-lbwb0qz618] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    /* Pass 5 narrows the band 1200 → 880px so the crest reads as a concentrated
       ceremonial signature rather than a wide banner. The page's atmosphere now
       carries the cinematic weight; the band can shed its dominance. */
    max-width: 880px;
    margin: 0 auto;
    /* Internal padding trimmed 1.5rem 4rem → 1.05rem 3.25rem → 1.05rem 2.25rem.
       The horizontal pad reduction tightens the empty span on either side of
       the wordmark image so the crest feels intentional, not spread thin. */
    padding: 1.05rem 2.25rem;
    border-radius: 22px;
    /* Translucent surface — lighter than HeroChipsCard (which uses 6% on-primary)
       to keep the band feeling airy. Dark-theme baseline below; theme overrides
       further down switch it for light/bright. */
    background: color-mix(in srgb, var(--m-surface) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 10%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* Pass 7: shadow softened (depth 14 → 6px, blur 40 → 22px, tone 22 → 12%;
       inner glow blur 28 → 18px, tone 12 → 6%) so the band reads as a piece of
       atmosphere rather than a lifted panel. The hero-shell luminous halo
       (added in MarketingHomeVariantA.razor.css pass 7) now carries the
       crest's atmospheric weight; the band itself can recede. */
    box-shadow:
        0 6px 22px color-mix(in srgb, black 12%, transparent),
        0 0 18px color-mix(in srgb, var(--m-primary) 6%, transparent);
}

/* Aura — soft radial glow behind the wordmark image. Sits between the band
   background and the wordmark itself (z-index 0; image+slogan are z-index 1).
   Pass 10 motion-stability brief: the 6.5s breath was a visible cyclical
   luminance oscillation — exactly the pattern the brief asks us to remove
   from atmospheric regions. Hold opacity static at 0.18 (the previous
   resting value) so the aura is present without ever "breathing". The
   crest's atmospheric weight is now carried by the page-level env layer
   (pass 8) drift, not by per-element pulse. */
.variant-a-wordmark-aura[b-lbwb0qz618] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 50% 90% at 50% 50%,
            color-mix(in srgb, var(--m-secondary) 26%, transparent) 0%,
            color-mix(in srgb, var(--m-secondary) 11%, transparent) 35%,
            transparent 70%),
        radial-gradient(ellipse 25% 70% at 18% 50%,
            color-mix(in srgb, var(--m-teal) 14%, transparent), transparent 70%),
        radial-gradient(ellipse 25% 70% at 82% 50%,
            color-mix(in srgb, var(--m-accent) 11%, transparent), transparent 70%);
    opacity: 0.18;
}

.variant-a-wordmark-image[b-lbwb0qz618] {
    position: relative;
    z-index: 1;
    /* Image height stepped down 116px → 93px → 86px (pass 4 trims another ~7%).
       The crest now reads as a calm signature paired with the slogan; the hero
       copy below is the focal element above the fold. The drop-shadow blur is
       widened (18 → 22px) and tone reduced (32% → 24%) so the halo reads as a
       softer atmospheric bloom rather than a defined edge glow. */
    height: 86px;
    width: auto;
    max-width: 90%;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--m-secondary) 24%, transparent));
    transition: transform 0.4s ease;
}

.variant-a-wordmark-image:hover[b-lbwb0qz618] {
    transform: scale(1.02);
}

.variant-a-wordmark-slogan[b-lbwb0qz618] {
    position: relative;
    z-index: 1;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    /* Pass 4: letter-spacing widened 0.02 → 0.04em and tone softened (88 → 78%)
       so the slogan reads as a quieter editorial mark beneath the crest. */
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--m-text) 78%, transparent);
}

/* Decorative sparkles flanking the wordmark — restrained, single character
   each side. Echo the &#10022; sparkles used in MarketingHero. */
.variant-a-wordmark-sparkle[b-lbwb0qz618] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    /* Sparkles trimmed (1.4rem → 1.15rem → 1.05rem, glow tone-down 45 → 32%) to
       keep the crest restrained — they remain as ceremonial accents, not
       decorative noise. They visually anchor the sigil/star vocabulary that the
       ambient particle layer below reuses across the page. */
    font-size: 1.05rem;
    line-height: 1;
    color: color-mix(in srgb, var(--m-secondary) 48%, transparent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--m-secondary) 32%, transparent);
    pointer-events: none;
}

.variant-a-wordmark-sparkle-left[b-lbwb0qz618] {
    /* Pass 5 narrowed the band; sparkles ride in closer to the edge so they
       remain visible flanking accents rather than disappearing onto the image. */
    left: 1rem;
}

.variant-a-wordmark-sparkle-right[b-lbwb0qz618] {
    right: 1rem;
}

/* ---- Albino Dragon (light) overrides ----
   Surface needs to read as a soft luminous panel against the cream bg, so we
   lean on on-primary (off-white) for the fill and primary at low opacity for
   the border. The aura stays purple but sits more delicately on the lighter
   ground. */
:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-wordmark-band[b-lbwb0qz618] {
    /* Pass 7: in light mode the cream panel was reading as a hard card on the
       lavender hero ground — fill opacity 60 → 38%, border 18 → 12%, shadow
       softened in lockstep with dark. The result: the band integrates with the
       hero atmosphere instead of stamping a panel on top of it. */
    background: color-mix(in srgb, var(--m-on-primary) 38%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
    box-shadow:
        0 6px 22px color-mix(in srgb, var(--m-primary) 8%, transparent),
        0 0 18px color-mix(in srgb, var(--m-primary) 5%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-wordmark-aura[b-lbwb0qz618] {
    /* Pass 4: 0.32 → 0.26 — light bg already has lower contrast, so the aura
       lands softer at the same visual weight. */
    opacity: 0.26;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-wordmark-slogan[b-lbwb0qz618] {
    color: color-mix(in srgb, var(--m-text) 80%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .variant-a-wordmark-sparkle[b-lbwb0qz618] {
    color: color-mix(in srgb, var(--m-primary) 60%, transparent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

/* ---- Bright theme aura nudge: bright bg is even paler than light, so the
   aura should feel slightly stronger to register against it. ---- */
html[data-theme="bright"] .variant-a-wordmark-aura[b-lbwb0qz618] {
    /* Pass 4: 0.38 → 0.30 — bright bg keeps the aura visible without it
       reading as a ceremonial-banner highlight. */
    opacity: 0.30;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .variant-a-wordmark-band-wrap[b-lbwb0qz618] {
        padding: 0.9rem 1.5rem 0.25rem;
    }
    .variant-a-wordmark-band[b-lbwb0qz618] {
        padding: 0.9rem 2rem;
        border-radius: 20px;
    }
    .variant-a-wordmark-image[b-lbwb0qz618] {
        height: 72px;
    }
    .variant-a-wordmark-slogan[b-lbwb0qz618] {
        font-size: 0.88rem;
    }
    .variant-a-wordmark-sparkle[b-lbwb0qz618] {
        font-size: 1.05rem;
    }
    .variant-a-wordmark-sparkle-left[b-lbwb0qz618] {
        left: 1rem;
    }
    .variant-a-wordmark-sparkle-right[b-lbwb0qz618] {
        right: 1rem;
    }
}

@media (max-width: 640px) {
    .variant-a-wordmark-band-wrap[b-lbwb0qz618] {
        padding: 0.75rem 1rem 0.25rem;
    }
    .variant-a-wordmark-band[b-lbwb0qz618] {
        padding: 0.8rem 1.75rem;
        border-radius: 16px;
        gap: 0.3rem;
    }
    .variant-a-wordmark-image[b-lbwb0qz618] {
        height: 62px;
    }
    .variant-a-wordmark-slogan[b-lbwb0qz618] {
        font-size: 0.84rem;
    }
    /* On the tightest viewport, sparkles compete with the wordmark for space;
       hide them rather than squeeze them. */
    .variant-a-wordmark-sparkle[b-lbwb0qz618] {
        display: none;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .variant-a-wordmark-aura[b-lbwb0qz618] {
        animation: none;
        opacity: 0.18;
    }
    .variant-a-wordmark-image[b-lbwb0qz618] {
        transition: none;
    }
    .variant-a-wordmark-image:hover[b-lbwb0qz618] {
        transform: none;
    }
}
/* /Components/Home/WordmarkBand.razor.rz.scp.css */
/* Outer wrap — gives the card breathing room from page edges and the next section. */
.wordmark-card-wrap[b-rexrmzzs10] {
  padding: 2rem 2.5rem 0.25rem;
  background: var(--m-bg);
}

/* The card itself — uses the brand primary as its background so the wordmark sits
   on a confident, themable surface (light = deep purple, dark = obsidian-tinted). */
.wordmark-card[b-rexrmzzs10] {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 3rem;
  border-radius: 22px;
  background: var(--m-primary);
  color: var(--m-on-primary, #fbfaf6);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

/* Atmospheric glow — radial accents echo the marketing hero's lighting. */
.wordmark-card[b-rexrmzzs10]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 80% at 20% 50%,
      color-mix(in srgb, var(--m-secondary) 35%, transparent), transparent),
    radial-gradient(ellipse 30% 80% at 80% 50%,
      color-mix(in srgb, var(--m-teal) 30%, transparent), transparent);
}

.wordmark-image[b-rexrmzzs10] {
  position: relative;
  z-index: 1;
  height: 135px;
  width: auto;
  max-width: 90%;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--m-secondary) 45%, transparent));
  transition: transform 0.4s ease;
}

.wordmark-image:hover[b-rexrmzzs10] {
  transform: scale(1.02);
}

.wordmark-slogan[b-rexrmzzs10] {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--m-on-primary, #fbfaf6) 90%, transparent);
}

@media (max-width: 960px) {
  .wordmark-card-wrap[b-rexrmzzs10] { padding: 1.25rem 1.5rem 0.25rem; }
  .wordmark-card[b-rexrmzzs10] { padding: 0.625rem 2rem; border-radius: 20px; }
  .wordmark-image[b-rexrmzzs10] { height: 105px; }
  .wordmark-slogan[b-rexrmzzs10] { font-size: 0.95rem; }
}

@media (max-width: 640px) {
  .wordmark-card-wrap[b-rexrmzzs10] { padding: 0.75rem 1rem 0.25rem; }
  .wordmark-card[b-rexrmzzs10] { padding: 0.5rem 1.25rem; border-radius: 16px; gap: 0.3rem; }
  .wordmark-image[b-rexrmzzs10] { height: 96px; }
  .wordmark-slogan[b-rexrmzzs10] { font-size: 0.9rem; }
}
/* /Components/IpVerificationBadge.razor.rz.scp.css */
/* IP Verification Badge Styles */

/* Visually hidden class for screen readers */
.visually-hidden[b-1n637pwl0x] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ip-verification-badge[b-1n637pwl0x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
}

/* Focus styles for keyboard navigation */
.ip-verification-badge:focus[b-1n637pwl0x] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.ip-verification-badge:focus:not(:focus-visible)[b-1n637pwl0x] {
    outline: none;
}

/* Size Variants */
.ip-verification-badge.size-small[b-1n637pwl0x] {
    padding: 2px 6px;
    gap: 4px;
    font-size: 0.7rem;
}

.ip-verification-badge.size-small .badge-icon[b-1n637pwl0x] {
    width: 12px;
    height: 12px;
}

.ip-verification-badge.size-medium[b-1n637pwl0x] {
    padding: 4px 10px;
    gap: 6px;
    font-size: 0.75rem;
}

.ip-verification-badge.size-large[b-1n637pwl0x] {
    padding: 6px 14px;
    gap: 8px;
    font-size: 0.875rem;
}

.ip-verification-badge.size-large .badge-icon[b-1n637pwl0x] {
    width: 20px;
    height: 20px;
}

/* Verified State */
.ip-verification-badge.verified[b-1n637pwl0x] {
    background: var(--m-success-bg);
    color: var(--m-success);
    border: 1px solid var(--m-success-border);
}

.ip-verification-badge.verified:hover[b-1n637pwl0x] {
    background: color-mix(in srgb, var(--m-success) 15%, transparent);
}

.ip-verification-badge.verified.clickable[b-1n637pwl0x] {
    cursor: pointer;
}

.ip-verification-badge.verified.clickable:hover[b-1n637pwl0x] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(76, 175, 117, 0.2);
}

/* Unverified State */
.ip-verification-badge.unverified[b-1n637pwl0x] {
    background: color-mix(in srgb, var(--m-surface-hover) 70%, transparent);
    color: var(--m-text-2);
    border: 1px solid color-mix(in srgb, var(--m-border) 70%, transparent);
}

/* Loading State */
.ip-verification-badge.loading[b-1n637pwl0x] {
    background: color-mix(in srgb, var(--m-surface-hover) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 70%, transparent);
    min-width: 80px;
    justify-content: center;
}

.badge-loading[b-1n637pwl0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

.loading-dot[b-1n637pwl0x] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-text-2);
    animation: pulse-b-1n637pwl0x 1s ease-in-out infinite;
}

@keyframes pulse-b-1n637pwl0x {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

/* Icons */
.badge-icon[b-1n637pwl0x] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.badge-icon.verified[b-1n637pwl0x] {
    color: var(--m-success);
}

.badge-icon.unverified[b-1n637pwl0x] {
    color: var(--m-text-2);
}

/* Label */
.badge-label[b-1n637pwl0x] {
    white-space: nowrap;
}

/* External Link */
.badge-link[b-1n637pwl0x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin-left: 2px;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.badge-link:hover[b-1n637pwl0x] {
    opacity: 1;
}

/* Modal Overlay */
.ip-modal-overlay[b-1n637pwl0x] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: fadeIn-b-1n637pwl0x 0.2s ease;
}

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

/* Modal */
.ip-modal[b-1n637pwl0x] {
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--m-text) 20%, transparent);
    animation: slideUp-b-1n637pwl0x 0.3s ease;
}

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

.ip-modal-header[b-1n637pwl0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--m-border);
}

.ip-modal-header h3[b-1n637pwl0x] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--m-text);
}

.ip-modal-close[b-1n637pwl0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ip-modal-close:hover[b-1n637pwl0x] {
    background: color-mix(in srgb, var(--m-text) 5%, transparent);
    color: var(--m-text);
}

.ip-modal-close:focus[b-1n637pwl0x] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.ip-modal-close:focus:not(:focus-visible)[b-1n637pwl0x] {
    outline: none;
}

/* Definition list styling */
.ip-details-list[b-1n637pwl0x] {
    margin: 0;
    padding: 0;
}

.ip-modal-body[b-1n637pwl0x] {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ip-detail-row[b-1n637pwl0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ip-detail-label[b-1n637pwl0x] {
    font-size: 0.875rem;
    color: var(--m-text-disabled);
}

.ip-detail-value[b-1n637pwl0x] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--m-text);
    text-align: right;
}

.ip-detail-value.verified[b-1n637pwl0x] {
    color: #059669;
}

.ip-detail-value.mono[b-1n637pwl0x] {
    font-family: var(--d-font-mono);
    font-size: 0.8rem;
}

.ip-explorer-link[b-1n637pwl0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-secondary) 100%);
    color: var(--m-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ip-explorer-link:hover[b-1n637pwl0x] {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-md);
}

/* Dark Mode */
[data-theme="dark"] .ip-verification-badge.verified[b-1n637pwl0x] {
    background: rgba(5, 150, 105, 0.2);
    border-color: rgba(5, 150, 105, 0.3);
}

[data-theme="dark"] .ip-verification-badge.unverified[b-1n637pwl0x] {
    background: rgba(156, 163, 175, 0.15);
    border-color: rgba(156, 163, 175, 0.25);
}

[data-theme="dark"] .ip-modal[b-1n637pwl0x] {
    background: var(--m-surface);
}

[data-theme="dark"] .ip-modal-header[b-1n637pwl0x] {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ip-modal-header h3[b-1n637pwl0x] {
    color: var(--m-text);
}

[data-theme="dark"] .ip-detail-value[b-1n637pwl0x] {
    color: var(--m-text);
}

[data-theme="dark"] .ip-modal-close:hover[b-1n637pwl0x] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--m-text);
}
/* /Components/Layout/AppFooter.razor.rz.scp.css */
/* Dragon Scale — footer */

.app-footer[b-n1h4h6cizj] {
    background: linear-gradient(180deg, var(--m-bg) 0%, color-mix(in srgb, var(--m-surface) 60%, var(--m-bg)) 100%);
    border-top: none;
    margin-top: auto;
    padding: 2.5rem 0 1.25rem;
    color: var(--m-text);
    position: relative;
    animation: footer-enter-b-n1h4h6cizj 0.5s ease-out both;
}

.app-footer[b-n1h4h6cizj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--m-border) 20%, var(--m-primary) 50%, var(--m-border) 80%, transparent);
    pointer-events: none;
}

@keyframes footer-enter-b-n1h4h6cizj {
    from { opacity: 0; }
    to { opacity: 1; }
}

:is([data-theme="light"], [data-theme="bright"]) .app-footer[b-n1h4h6cizj] {
    background: linear-gradient(180deg, var(--m-bg) 0%, color-mix(in srgb, var(--m-surface) 80%, var(--m-secondary)) 40%, color-mix(in srgb, var(--m-surface) 65%, var(--m-secondary)) 70%, color-mix(in srgb, var(--m-surface) 50%, var(--m-secondary)) 100%);
}

[data-theme="dark"] .app-footer[b-n1h4h6cizj] {
    background: linear-gradient(180deg, var(--m-bg) 0%, color-mix(in srgb, var(--m-primary) 8%, var(--m-bg)) 70%, color-mix(in srgb, var(--m-primary) 4%, var(--m-bg)) 100%);
}

/* Main row: brand left, nav right */
.footer-main[b-n1h4h6cizj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* Brand block */
.footer-brand[b-n1h4h6cizj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-logo-link[b-n1h4h6cizj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: opacity 0.18s ease;
}

.footer-logo-link:hover[b-n1h4h6cizj] {
    opacity: 0.85;
}

.footer-logo-img[b-n1h4h6cizj] {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 5px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--m-secondary) 40%, transparent));
    transition: filter 0.2s ease, transform 0.2s ease;
}

.footer-logo-link:hover .footer-logo-img[b-n1h4h6cizj] {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--m-secondary) 60%, transparent));
    transform: rotate(-5deg) scale(1.05);
}

.footer-brand-name[b-n1h4h6cizj] {
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--m-secondary) 0%, var(--m-secondary) 50%, var(--m-surface) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0;
}

:is([data-theme="light"], [data-theme="bright"]) .footer-brand-name[b-n1h4h6cizj] {
    background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline[b-n1h4h6cizj] {
    font-size: 0.8125rem;
    color: var(--m-text-2);
    margin: 0;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Footer navigation */
.footer-nav[b-n1h4h6cizj] {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.25rem;
}

.footer-nav-link[b-n1h4h6cizj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--m-text-2);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.01em;
    position: relative;
}

.footer-nav-link[b-n1h4h6cizj]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--m-primary);
    transition: width 0.25s ease;
}

.footer-nav-link:hover[b-n1h4h6cizj] {
    color: var(--m-primary);
    transform: translateY(-1px);
}

.footer-nav-link:hover[b-n1h4h6cizj]::after {
    width: 100%;
}

:is([data-theme="light"], [data-theme="bright"]) .footer-nav-link:hover[b-n1h4h6cizj] {
    color: var(--m-primary);
}

/* Bottom bar: meta left, copyright right */
.footer-bottom[b-n1h4h6cizj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid var(--m-border);
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-meta[b-n1h4h6cizj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.connection-status[b-n1h4h6cizj] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--m-teal);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.connection-status[b-n1h4h6cizj]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-teal);
    animation: status-pulse-b-n1h4h6cizj 3s ease-in-out infinite;
}

@keyframes status-pulse-b-n1h4h6cizj {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 6px var(--m-teal); }
}

.version-indicator[b-n1h4h6cizj] {
    font-size: 0.7rem;
    color: var(--m-text-2);
    cursor: pointer;
}

.footer-copyright[b-n1h4h6cizj] {
    font-size: 0.75rem;
    color: var(--m-text-2);
    letter-spacing: 0.01em;
}

/* Environment badges */
.environment-badge[b-n1h4h6cizj] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.footer-env-icon[b-n1h4h6cizj] {
    font-size: 0.7rem !important;
    vertical-align: middle;
    line-height: 1;
}

.environment-badge.env-dev[b-n1h4h6cizj] {
    background: linear-gradient(135deg, #059669, #10b981);
    color: var(--m-on-primary);
}

.environment-badge.env-staging[b-n1h4h6cizj] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: var(--m-on-primary);
}

.environment-badge.env-local[b-n1h4h6cizj] {
    background: linear-gradient(135deg, var(--m-primary), var(--m-secondary));
    color: var(--m-on-primary);
}

/* Legal links row */
.footer-legal-nav[b-n1h4h6cizj] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.footer-legal-link[b-n1h4h6cizj] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--m-text-2);
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}

.footer-legal-link:hover[b-n1h4h6cizj] {
    color: var(--m-primary);
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 640px) {
    .footer-main[b-n1h4h6cizj] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-nav[b-n1h4h6cizj] {
        gap: 1rem;
    }

    .footer-bottom[b-n1h4h6cizj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-footer[b-n1h4h6cizj] {
        animation: none;
    }

    .footer-logo-link[b-n1h4h6cizj],
    .footer-logo-img[b-n1h4h6cizj],
    .footer-nav-link[b-n1h4h6cizj] {
        transition: none;
    }

    .footer-nav-link:hover[b-n1h4h6cizj] {
        transform: none;
    }

    .footer-nav-link[b-n1h4h6cizj]::after {
        transition: none;
    }

    .footer-logo-link:hover .footer-logo-img[b-n1h4h6cizj] {
        transform: none;
    }

    .connection-status[b-n1h4h6cizj]::before {
        animation: none;
        opacity: 1;
    }
}
/* /Components/Layout/AppHeader.razor.rz.scp.css */
/* AppHeader — navbar styles extracted from MainLayout */
/* backdrop-filter and background handled by .m-glass-nav utility */

/* Animation custom properties */
.navbar[b-ocuza602pk] {
  --_nav-underline-dur: 300ms;
  --_nav-hover-dur: 150ms;
  --_sparkle-puff-dur: 400ms;
  --_adventure-bounce-dur: 3s;

  box-shadow: var(--m-shadow-md);
  transition:
    box-shadow var(--m-dur-base) var(--m-ease-smooth),
    background var(--m-dur-base) var(--m-ease-smooth);
  position: sticky;
  top: 0;
  z-index: 1050;
  animation: nav-enter-b-ocuza602pk 0.4s ease-out both;
  border-bottom: 1px solid color-mix(in srgb, var(--m-primary) 16%, var(--m-border));
}

@keyframes nav-enter-b-ocuza602pk {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- P2 Item 8: Dark mode stars background ---
   Pass 10 motion-stability brief: removed `nav-stars-twinkle` (6s opacity
   oscillation). A visible 6-second cycle in the chrome was exactly the
   "rhythmic atmospheric flicker" the brief asks us to remove. Hold the
   star layer at static opacity 0.45 (the previous mid-cycle peak so the
   visible weight is preserved). The lower-layer rotating starfield below
   was also disabled — the chrome's atmospheric vocabulary is now
   "present but not moving", consistent with the Variant A page below. */
[data-theme="dark"] .navbar[b-ocuza602pk]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(
      1px 1px at 15% 30%,
      color-mix(in srgb, var(--m-secondary) 40%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 45% 70%,
      color-mix(in srgb, var(--m-teal) 30%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 75% 20%,
      color-mix(in srgb, var(--m-accent) 25%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 88% 55%,
      color-mix(in srgb, var(--m-secondary) 35%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 30% 85%,
      color-mix(in srgb, var(--m-teal) 20%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 60% 40%,
      color-mix(in srgb, var(--m-accent) 18%, transparent),
      transparent
    );
  opacity: 0.45;
}

/* --- Variant A polish 2026-05-11: secondary static starfield layer ---
   Was a 60s linear rotation (6°/sec — visibly spinning). Pass 10
   motion-stability brief removed the rotation: a 60s rotation in the chrome
   was "obvious animation loops" — exactly what the brief asks to avoid.
   The layer is kept (provides density variation against the lower stars
   layer) but holds at a fixed angle (-12°) so the composite of the two
   layers still reads as a natural two-depth starfield rather than a single
   uniform grid. No motion in the header at all now — consistent with the
   stabilised atmosphere on the Variant A page below. */
[data-theme="dark"] .navbar[b-ocuza602pk]::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(0);
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(
      1px 1px at 20% 25%,
      color-mix(in srgb, var(--m-secondary) 38%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 55% 65%,
      color-mix(in srgb, var(--m-accent) 28%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 80% 35%,
      color-mix(in srgb, var(--m-teal) 30%, transparent),
      transparent
    ),
    radial-gradient(
      1px 1px at 38% 80%,
      color-mix(in srgb, var(--m-secondary) 22%, transparent),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 70% 15%,
      color-mix(in srgb, var(--m-accent) 20%, transparent),
      transparent
    );
  opacity: 0.45;
  /* Hold at a fixed -12° rotation so this layer's stars never align with
     the `::before` layer below — preserves the two-depth starfield reading
     without any motion. */
  transform: rotate(-12deg);
  transform-origin: center center;
}

/* Ensure navbar content sits above the stars pseudo-element.
   Scoped to container-fluid (the only direct child) to avoid creating
   stacking contexts on every child and breaking dropdown z-index layering. */
.navbar > .container-fluid[b-ocuza602pk] {
  position: relative;
  z-index: 1;
}

/* Wraps .navbar-brand + the alpha-status-pill so they sit as a single flex group
   on the left side of the navbar. On desktop (md+) this group becomes the grid-
   column-1 item that .navbar-brand used to own — see the `@media (min-width: 768px)`
   block further down. On mobile, brand and pill render inline (pill itself is
   hidden via d-none d-md-inline-flex utility classes). */
.navbar-brand-group[b-ocuza602pk] {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.navbar-brand[b-ocuza602pk] {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--m-secondary);
  text-decoration: none !important;
  transition:
    transform var(--m-dur-fast) var(--m-ease-spring),
    filter var(--m-dur-fast) var(--m-ease-smooth);
  letter-spacing: 0;
  position: relative;
}

/* Gradient text applied only to the text span so the img stays unaffected */
.navbar-brand-text[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    var(--m-secondary) 0%,
    color-mix(in srgb, var(--m-secondary) 88%, var(--m-text)) 58%,
    var(--m-text) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-brand:hover[b-ocuza602pk] {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.navbar-brand:hover .navbar-brand-text[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    var(--m-secondary) 0%,
    color-mix(in srgb, var(--m-secondary) 70%, var(--m-text)) 50%,
    var(--m-text) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- P2 Item 5: Logo hover sparkle puff --- */
.navbar-brand[b-ocuza602pk]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--m-accent) 40%, transparent),
    color-mix(in srgb, var(--m-teal) 20%, transparent) 40%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: none;
}

.navbar-brand:hover[b-ocuza602pk]::after {
  animation: sparkle-puff-b-ocuza602pk var(--_sparkle-puff-dur) var(--m-ease-spring) forwards;
}

@keyframes sparkle-puff-b-ocuza602pk {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  60% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.navbar-logo-img[b-ocuza602pk] {
  width: 30px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
  margin-right: 0.5rem;
  vertical-align: middle;
  filter: drop-shadow(
    0 0 4px color-mix(in srgb, var(--m-secondary) 40%, transparent)
  );
  transition:
    filter var(--m-dur-fast) var(--m-ease-smooth),
    transform var(--m-dur-fast) var(--m-ease-spring);
}

.navbar-brand:hover .navbar-logo-img[b-ocuza602pk] {
  filter: drop-shadow(
    0 0 8px color-mix(in srgb, var(--m-secondary) 65%, transparent)
  );
  transform: rotate(-8deg) scale(1.08);
}

/* `::deep` is required so these rules pierce into <NavLink>-rendered anchors
   (sibling nav items). Blazor scoped-CSS attribute ids only get applied to
   elements emitted by this component's own .razor template — child Blazor
   components (NavLink) render their own <a>/<span> outside this component's
   render tree, so without `::deep` only the plain <a class="nav-link"> Vault
   link would receive these rules and Vault would visually drift from siblings. */
.navbar[b-ocuza602pk]  .nav-icon {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-right: 0;
  line-height: 1;
  transition: transform var(--_nav-hover-dur) var(--m-ease-spring);
}

.navbar[b-ocuza602pk]  .nav-link:hover .nav-icon {
  transform: scale(1.15);
}

.navbar-brand:focus-visible[b-ocuza602pk] {
  outline: none;
  box-shadow: var(--m-ring);
  border-radius: 4px;
}

.navbar-mobile-actions[b-ocuza602pk] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

@media (min-width: 768px) {
  .navbar-mobile-actions[b-ocuza602pk] {
    display: none;
  }
}

/* Nav link — magical underline via pseudo-element.
   `::deep` so NavLink-rendered anchors get the same treatment as plain <a>. */
.navbar[b-ocuza602pk]  .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  gap: 0.3rem;
  color: var(--m-text) !important;
  font-weight: 500;
  transition:
    color var(--m-dur-fast) var(--m-ease-smooth),
    background var(--m-dur-fast) var(--m-ease-smooth);
  border-bottom: none;
  padding: 0.45rem 0.7rem;
  position: relative;
  /* Remove overflow: hidden for accessibility; use focus ring for highlight */
  outline: none;
}

/* Magical underline — scales from left to right */
.navbar[b-ocuza602pk]  .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0.18rem;
  left: 0.7rem;
  right: 0.7rem;
  width: auto;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--m-primary),
    var(--m-teal),
    var(--m-accent)
  );
  transform: scaleX(0);
  /* Always animate underline from left edge */
  transform-origin: left bottom;
  transition: transform var(--_nav-underline-dur) var(--m-ease-smooth);
}

.navbar[b-ocuza602pk]  .nav-link:hover::after {
  transform: scaleX(1);
}

/* Collapse underline right-to-left for smooth bidirectional animation */
.navbar[b-ocuza602pk]  .nav-link:not(:hover):not(.active)::after {
  transform-origin: right bottom;
}

/* Shimmer pass on active underline */
.navbar[b-ocuza602pk]  .nav-link.active::after {
  transform: scaleX(1);
  /* Only animate shimmer if prefers-reduced-motion is not set */
  animation: nav-shimmer-pass-b-ocuza602pk 2.5s var(--m-ease-smooth) 0.3s 1;
}

@keyframes nav-shimmer-pass-b-ocuza602pk {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.6);
  }
  100% {
    filter: brightness(1);
  }
}

.navbar-nav[b-ocuza602pk] {
  align-items: center;
  gap: 0.125rem;
}

.navbar-collapse[b-ocuza602pk] {
  gap: clamp(1rem, 3vw, 2.5rem);
}

.navbar-primary-nav[b-ocuza602pk] {
  margin-left: clamp(1rem, 3vw, 2.25rem);
  margin-right: auto;
}

.navbar-utility-nav[b-ocuza602pk] {
  margin-left: auto;
}

@media (min-width: 768px) {
  .navbar > .container-fluid[b-ocuza602pk] {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
  }

  /* Brand-group owns column 1 now (was .navbar-brand on its own — the wrapper
     keeps the same grid position so layout is identical for authed users
     where the alpha pill is not rendered). */
  .navbar-brand-group[b-ocuza602pk] {
    grid-column: 1;
    justify-self: start;
  }

  .navbar-collapse[b-ocuza602pk] {
    display: contents !important;
  }

  .navbar-primary-nav[b-ocuza602pk] {
    grid-column: 2;
    justify-self: center;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-utility-nav[b-ocuza602pk] {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
}

.navbar-nav > .nav-item[b-ocuza602pk],
.navbar-nav > .pm-container[b-ocuza602pk] {
  display: flex;
  align-items: center;
}

.nav-theme-item[b-ocuza602pk] {
  margin-right: 0.5rem;
}

.auth-sign-in-item[b-ocuza602pk] {
  border-left: 1px solid color-mix(in srgb, var(--m-border) 82%, transparent);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}

/* Alpha-status pill — quiet header-level chip surfacing the "Alpha now live"
   claim that previously lived inside the Variant A wordmark band. Visible only
   on the unauthenticated marketing surface (gated in markup with
   @if(!IsAuthenticated)). Hidden on small screens via Bootstrap d-none
   d-md-flex so the mobile nav stays compact.

   Pass 4 dial-down: background 10 → 7%, border 22 → 16%, text 80 → 68% so the
   pill reads as supporting metadata rather than a chip competing with the
   brand. letter-spacing widened to 0.06em for an editorial cadence. */
.alpha-status-pill[b-ocuza602pk] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  background: color-mix(in srgb, var(--m-secondary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-secondary) 16%, transparent);
  color: color-mix(in srgb, var(--m-text) 68%, transparent);
  white-space: nowrap;
}

.alpha-status-dot[b-ocuza602pk] {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--m-accent) 85%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--m-accent) 50%, transparent);
  animation: alpha-status-pulse-b-ocuza602pk 3s ease-in-out infinite;
  flex: 0 0 auto;
}

/* Pass 4 pulse: narrower opacity range (0.7–1 → 0.65–0.9), softer glow at
   peak (12 → 9px) and slower cadence (2.4s → 3s) so the pulse reads as a
   quiet life-sign rather than a status beacon. */
@keyframes alpha-status-pulse-b-ocuza602pk {
  0%, 100% {
    opacity: 0.65;
    box-shadow: 0 0 4px color-mix(in srgb, var(--m-accent) 40%, transparent);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 9px color-mix(in srgb, var(--m-accent) 65%, transparent);
  }
}

.alpha-status-pill .alpha-status-text[b-ocuza602pk] {
  line-height: 1;
}

:is([data-theme="light"], [data-theme="bright"]) .alpha-status-pill[b-ocuza602pk] {
  background: color-mix(in srgb, var(--m-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--m-primary) 18%, transparent);
  color: color-mix(in srgb, var(--m-text) 62%, transparent);
}

:is([data-theme="light"], [data-theme="bright"]) .alpha-status-dot[b-ocuza602pk] {
  background: color-mix(in srgb, var(--m-accent) 70%, var(--m-warning));
}

/* ============================================================================
   Variant-A-only ceremonial wrap (Pass 9 — 2026-05-13).

   The alpha pill is the natural ceremonial spot on the unauthenticated
   marketing surface — it carries the "alpha now live" claim AND the only
   warm-tone (gold) accent in the header. On non-Variant-A unauthenticated
   pages (Sign in, About) the pill stays at its pass-4 restraint: cool
   secondary tint, faint accent dot, editorial spacing.

   On the Variant A landing the pill becomes a deliberate ceremonial mark:
   a hairline gold edge wash, a slightly warmer surface, a marginally
   brighter dot with a soft halo. The change is small by design — gold is
   the WARM punctuation across an otherwise cool palette, not a second
   theme colour. The full Variant A page below the header already carries
   the cooler teal+secondary atmospheric vocabulary; the header pill is
   the one place warm + cool meet, and "wrapping" it gives the page a
   single warm anchor without spreading gold elsewhere in the chrome.

   Scoping mechanism: `body:has(.variant-a-page)` — the `:has()` parent
   selector matches the global body element only when MarketingHomeVariantA
   has rendered its `.variant-a-page` wrapper somewhere on the page. The
   pill itself stays in AppHeader's component scope (`.alpha-status-pill`
   gets the `[b-xyz]` attribute), and the `:has()` class match is a literal
   global class lookup — no scope attribute required there. Browser support
   for `:has()` is universal in evergreen browsers since 2023.

   No other surfaces in the header are touched: nav links, logo, theme
   toggle, Get Started CTA all stay identical regardless of variant. The
   gold wrap is intentionally limited to one element. */
body:has(.variant-a-page) .alpha-status-pill[b-ocuza602pk] {
  /* Slightly warmer surface: 50/50 mix of existing secondary tint and a
     hairline accent (gold) wash. The secondary base preserves the cool
     character; the accent layer adds the ceremonial warmth. */
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--m-accent) 5%, transparent),
      color-mix(in srgb, var(--m-secondary) 8%, transparent)
    );
  /* Border picks up a touch of gold along the gradient direction — reads
     as "warm light catching the edge", not as a gold outline. */
  border-color: color-mix(in srgb, var(--m-accent) 22%, color-mix(in srgb, var(--m-secondary) 18%, transparent));
  /* A whisper of warm halo around the pill — 4px blur at 10% accent
     dissolves into the navbar ground rather than reading as a glow. */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-accent) 8%, transparent) inset,
    0 0 12px color-mix(in srgb, var(--m-accent) 10%, transparent);
}

body:has(.variant-a-page) .alpha-status-dot[b-ocuza602pk] {
  /* Brighter dot — closer to the pure gold token — with a slightly wider
     halo (6 → 7px) so the dot reads as the pill's emotional anchor. The
     pulse keyframe still drives the breathing rhythm; only the resting
     tone and glow get bumped. */
  background: color-mix(in srgb, var(--m-accent) 95%, var(--m-warning));
  box-shadow: 0 0 7px color-mix(in srgb, var(--m-accent) 65%, transparent);
}

/* Light theme: the cream ground turns the dark-mode warmth into a
   slightly heavier presence — soften the wash and lean on warning (a
   warmer amber than accent) for the dot so the pill reads as
   candlelight on cream rather than gold-on-gold. */
:is([data-theme="light"], [data-theme="bright"]) body:has(.variant-a-page) .alpha-status-pill[b-ocuza602pk] {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--m-warning) 6%, transparent),
      color-mix(in srgb, var(--m-primary) 7%, transparent)
    );
  border-color: color-mix(in srgb, var(--m-warning) 26%, color-mix(in srgb, var(--m-primary) 18%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-warning) 10%, transparent) inset,
    0 0 12px color-mix(in srgb, var(--m-warning) 14%, transparent);
}

:is([data-theme="light"], [data-theme="bright"]) body:has(.variant-a-page) .alpha-status-dot[b-ocuza602pk] {
  background: color-mix(in srgb, var(--m-warning) 85%, var(--m-accent));
  box-shadow: 0 0 7px color-mix(in srgb, var(--m-warning) 55%, transparent);
}

.navbar[b-ocuza602pk]  .nav-link:hover {
  color: var(--m-primary) !important;
  background: color-mix(in srgb, var(--m-primary) 7%, transparent);
  border-radius: 8px;
}

/* Unified active nav treatment */
.navbar[b-ocuza602pk]  .nav-link.active {
  color: var(--m-primary) !important;
  background: color-mix(in srgb, var(--m-primary) 10%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--m-primary) 10%, transparent),
    0 2px 8px color-mix(in srgb, var(--m-primary) 10%, transparent);
  border-radius: 8px;
  z-index: 2;
}

[data-theme="dark"] .navbar[b-ocuza602pk]  .nav-link.active::after {
  background: linear-gradient(to right, var(--m-primary), var(--m-accent));
}

.navbar[b-ocuza602pk]  .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--m-ring);
  border-radius: 8px;
  background: color-mix(in srgb, var(--m-primary) 6%, transparent);
}

.navbar[b-ocuza602pk]  .nav-link-utility {
  color: var(--m-text-2) !important;
  font-weight: 600;
}

.navbar[b-ocuza602pk]  .nav-link-utility::after {
  display: none;
}

.navbar[b-ocuza602pk]  .nav-link-utility:hover,
.navbar[b-ocuza602pk]  .nav-link-utility.active {
  color: var(--m-primary) !important;
  background: color-mix(in srgb, var(--m-primary) 6%, transparent);
  border-radius: 8px;
  box-shadow: none;
}

/* --- P2 Item 9: Current Adventure Indicator with gentle bounce --- */
.current-adventure-indicator[b-ocuza602pk] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  margin: 0 0.5rem;
  contain: layout style paint;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-success, #22c55e) 15%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 10%, transparent) 100%
  );
  border: 2px solid
    color-mix(in srgb, var(--m-success, #22c55e) 40%, transparent);
  border-radius: 25px;
  /* !important needed to override Bootstrap nav defaults — remove after Bootstrap migration */
  color: var(--m-success) !important;
  font-weight: 600 !important;
  font-size: 0.875rem;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  animation: adventure-gentle-bounce-b-ocuza602pk var(--_adventure-bounce-dur) ease-in-out
    infinite;
}

@keyframes adventure-gentle-bounce-b-ocuza602pk {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Override: no underline pseudo on the adventure indicator */
.current-adventure-indicator[b-ocuza602pk]::after {
  display: none;
}

.current-adventure-indicator:hover[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-success, #22c55e) 25%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 20%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-success, #22c55e) 60%, transparent);
  color: color-mix(in srgb, var(--m-success) 85%, #000) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--m-success, #22c55e) 25%, transparent);
  animation: none;
}

.current-adventure-indicator i[b-ocuza602pk] {
  color: var(--m-success, #22c55e);
  font-size: 0.9rem;
  animation: pulse-glow-b-ocuza602pk 2s ease-in-out infinite;
}

.adventure-pulse-icon[b-ocuza602pk] {
  animation: pulse-glow-b-ocuza602pk 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-ocuza602pk {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.current-adventure-name[b-ocuza602pk] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navbar brand text for light mode — target the text span only,
   NOT .navbar-brand itself (which would clip the logo <img> too) */
:is([data-theme="light"], [data-theme="bright"]) .navbar-brand-text[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    var(--m-primary) 0%,
    var(--m-secondary) 50%,
    var(--m-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:is([data-theme="light"], [data-theme="bright"]) .navbar-brand:hover .navbar-brand-text[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-primary) 85%, #000) 0%,
    var(--m-primary) 50%,
    var(--m-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light mode sparkle puff uses primary tones instead of accent/teal */
:is([data-theme="light"], [data-theme="bright"]) .navbar-brand[b-ocuza602pk]::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--m-primary) 30%, transparent),
    color-mix(in srgb, var(--m-secondary) 15%, transparent) 40%,
    transparent 70%
  );
}

:is([data-theme="light"], [data-theme="bright"]) .navbar-logo-img[b-ocuza602pk] {
  filter: drop-shadow(
    0 0 4px color-mix(in srgb, var(--m-primary) 45%, transparent)
  );
}

:is([data-theme="light"], [data-theme="bright"]) .navbar-brand:hover .navbar-logo-img[b-ocuza602pk] {
  filter: drop-shadow(
    0 0 8px color-mix(in srgb, var(--m-primary) 65%, transparent)
  );
}

/* Ensure nav links, icons and spans have consistent color in light mode.
   `:not(.active)` keeps the active-state colour rule (defined earlier as
   `.nav-link.active { color: var(--m-primary) !important; }`) from being
   clobbered by these theme-scoped overrides — which appear later in source
   order and would otherwise win on equal specificity, hiding the visual
   "active" cue on the main nav. */
:is([data-theme="light"], [data-theme="bright"]) .nav-link:not(.active)[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .nav-link:not(.active) i[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .nav-link:not(.active) span[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:not(.active)[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:not(.active) i[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:not(.active) span[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .dropdown-toggle[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .dropdown-toggle i[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .dropdown-toggle span[b-ocuza602pk] {
  color: var(--m-text) !important;
}

:is([data-theme="light"], [data-theme="bright"]) .nav-link:hover[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .nav-link:hover i[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .nav-link:hover span[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:hover[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:hover i[b-ocuza602pk],
:is([data-theme="light"], [data-theme="bright"]) .btn-link.nav-link:hover span[b-ocuza602pk] {
  color: var(--m-primary) !important;
}

/* Navbar toggler icon for dark mode */
[data-theme="dark"] .navbar-toggler[b-ocuza602pk] {
  border-color: color-mix(in srgb, var(--m-text-2) 30%, transparent);
}

[data-theme="dark"] .navbar-toggler-icon[b-ocuza602pk] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 245, 249, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Ensure nav links and icons are visible in dark mode.
   `:not(.active)` keeps the active-state colour rule from being clobbered
   by these theme-scoped overrides (see matching light-mode comment above). */
[data-theme="dark"] .nav-link:not(.active)[b-ocuza602pk],
[data-theme="dark"] .nav-link:not(.active) i[b-ocuza602pk],
[data-theme="dark"] .nav-link:not(.active) span[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:not(.active)[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:not(.active) i[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:not(.active) span[b-ocuza602pk],
[data-theme="dark"] .dropdown-toggle[b-ocuza602pk],
[data-theme="dark"] .dropdown-toggle i[b-ocuza602pk],
[data-theme="dark"] .dropdown-toggle span[b-ocuza602pk] {
  color: var(--m-text) !important;
}

[data-theme="dark"] .nav-link:hover[b-ocuza602pk],
[data-theme="dark"] .nav-link:hover i[b-ocuza602pk],
[data-theme="dark"] .nav-link:hover span[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:hover[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:hover i[b-ocuza602pk],
[data-theme="dark"] .btn-link.nav-link:hover span[b-ocuza602pk] {
  color: var(--m-secondary) !important;
}

/* Current Adventure Indicator - Dark Mode */
[data-theme="dark"] .current-adventure-indicator[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 20%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 15%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-teal, #4ed7c8) 40%, transparent);
  color: var(--m-teal) !important;
}

[data-theme="dark"] .current-adventure-indicator:hover[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 30%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 25%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-teal, #4ed7c8) 60%, transparent);
  color: color-mix(in srgb, var(--m-teal) 80%, #fff) !important;
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--m-teal, #4ed7c8) 20%, transparent);
}

[data-theme="dark"] .current-adventure-indicator i[b-ocuza602pk] {
  color: var(--m-teal, #4ed7c8);
}

/* Light mode explicit overrides for current adventure indicator */
:is([data-theme="light"], [data-theme="bright"]) .current-adventure-indicator[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-success, #22c55e) 15%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 10%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-success, #22c55e) 40%, transparent);
  color: var(--m-success) !important;
}

:is([data-theme="light"], [data-theme="bright"]) .current-adventure-indicator:hover[b-ocuza602pk] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-success, #22c55e) 25%, transparent) 0%,
    color-mix(in srgb, var(--m-teal, #4ed7c8) 20%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--m-success, #22c55e) 60%, transparent);
  color: color-mix(in srgb, var(--m-success) 85%, #000) !important;
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--m-success, #22c55e) 25%, transparent);
}

:is([data-theme="light"], [data-theme="bright"]) .current-adventure-indicator i[b-ocuza602pk] {
  color: var(--m-success, #22c55e);
}

/* Mobile responsiveness for current adventure indicator */
@media (max-width: 991.98px) {
  .navbar-nav[b-ocuza602pk] {
    align-items: stretch;
    gap: 0;
  }

  .navbar-nav > .nav-item[b-ocuza602pk],
  .navbar-nav > .pm-container[b-ocuza602pk] {
    width: 100%;
  }

  .navbar-nav > .nav-item > .nav-link[b-ocuza602pk],
  .navbar-nav > .pm-container .pm-trigger[b-ocuza602pk] {
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
  }

  .current-adventure-indicator[b-ocuza602pk] {
    margin: 0.5rem 0;
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse[b-ocuza602pk] {
    gap: 0;
    padding-top: 0.75rem;
  }

  .navbar-primary-nav[b-ocuza602pk],
  .navbar-utility-nav[b-ocuza602pk] {
    margin-left: 0;
    margin-right: 0;
  }

  .nav-theme-item[b-ocuza602pk] {
    display: none !important;
  }

  .auth-sign-in-item[b-ocuza602pk] {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }

  .mobile-cta-item[b-ocuza602pk] {
    position: sticky;
    bottom: 0;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    border-top: 1px solid var(--m-border);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .navbar[b-ocuza602pk],
  .navbar[b-ocuza602pk]  * {
    animation: none !important;
    transition: none !important;
  }
  .navbar[b-ocuza602pk]  .nav-link::after {
    animation: none !important;
    transition: none !important;
  }
  .navbar[b-ocuza602pk] {
    animation: none;
  }

  /* No dark mode stars animation */
  [data-theme="dark"] .navbar[b-ocuza602pk]::before {
    animation: none;
    opacity: 0.4;
  }

  /* Variant A polish 2026-05-11: suppress rotating star layer too — opacity
     stays at the mid-animation value so the layer remains visible but static. */
  [data-theme="dark"] .navbar[b-ocuza602pk]::after {
    animation: none;
    transform: none;
  }

  .navbar-brand[b-ocuza602pk],
  .navbar-logo-img[b-ocuza602pk],
  .navbar[b-ocuza602pk]  .nav-link {
    transition: none;
  }

  /* No sparkle puff */
  .navbar-brand[b-ocuza602pk]::after {
    display: none;
  }

  .navbar[b-ocuza602pk]  .nav-link::after {
    transition: none;
    animation: none;
  }

  .navbar[b-ocuza602pk]  .nav-link.active::after {
    animation: none;
    /* Still show the underline, just no animation */
    transform: scaleX(1);
  }

  .navbar[b-ocuza602pk]  .nav-icon {
    transition: none;
  }

  .navbar-brand:hover[b-ocuza602pk] {
    transform: none;
  }

  .navbar-brand:hover .navbar-logo-img[b-ocuza602pk] {
    transform: none;
  }

  .adventure-pulse-icon[b-ocuza602pk] {
    animation: none;
  }

  .current-adventure-indicator[b-ocuza602pk] {
    transition: none;
    animation: none;
  }

  .current-adventure-indicator:hover[b-ocuza602pk] {
    transform: none;
  }

  .navbar[b-ocuza602pk]  .nav-link:hover .nav-icon {
    transform: none;
  }
}
/* /Components/Layout/DevToolsBar.razor.rz.scp.css */
/* ── Dev Tools Bar ── */
.dtb-bar[b-mwoet4nain] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--m-warning, #f6c453) 30%, transparent);
    background: color-mix(in srgb, var(--m-warning, #f6c453) 3%, transparent);
}

.dtb-label[b-mwoet4nain] {
    font-size: 0.7rem;
    color: var(--m-text-2, #aaa);
    opacity: 0.6;
    width: 100%;
    text-align: center;
    margin-top: 0.15rem;
}

/* Shared button base */
.dtb-btn[b-mwoet4nain] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    border: 1px solid;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dtb-btn .material-symbols-outlined[b-mwoet4nain] {
    font-size: 1rem;
}

/* Success variant (seed user) */
.dtb-btn-success[b-mwoet4nain] {
    color: var(--m-success, #22c55e);
    border-color: var(--m-success, #22c55e);
    background: color-mix(in srgb, var(--m-success, #22c55e) 6%, transparent);
}
.dtb-btn-success:hover[b-mwoet4nain],
.dtb-btn-success:focus-visible[b-mwoet4nain] {
    background: color-mix(in srgb, var(--m-success, #22c55e) 18%, transparent);
}

/* Warning variant (reset seed) */
.dtb-btn-warning[b-mwoet4nain] {
    color: var(--m-warning, #f6c453);
    border-color: var(--m-warning, #f6c453);
    background: color-mix(in srgb, var(--m-warning, #f6c453) 6%, transparent);
}
.dtb-btn-warning:hover[b-mwoet4nain],
.dtb-btn-warning:focus-visible[b-mwoet4nain] {
    background: color-mix(in srgb, var(--m-warning, #f6c453) 18%, transparent);
}

/* Info variant (clear cache) */
.dtb-btn-info[b-mwoet4nain] {
    color: var(--m-teal, #4ed7c8);
    border-color: var(--m-teal, #4ed7c8);
    background: color-mix(in srgb, var(--m-teal, #4ed7c8) 6%, transparent);
}
.dtb-btn-info:hover[b-mwoet4nain],
.dtb-btn-info:focus-visible[b-mwoet4nain] {
    background: color-mix(in srgb, var(--m-teal, #4ed7c8) 18%, transparent);
}

/* Danger variant (clear auth) */
.dtb-btn-danger[b-mwoet4nain] {
    color: var(--m-error, #ef4444);
    border-color: var(--m-error, #ef4444);
    background: color-mix(in srgb, var(--m-error, #ef4444) 6%, transparent);
}
.dtb-btn-danger:hover[b-mwoet4nain],
.dtb-btn-danger:focus-visible[b-mwoet4nain] {
    background: color-mix(in srgb, var(--m-error, #ef4444) 18%, transparent);
}

/* Profile switcher */
.dtb-profile-switcher[b-mwoet4nain] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--m-accent, #a78bfa);
}

.dtb-profile-switcher .material-symbols-outlined[b-mwoet4nain] {
    font-size: 1rem;
}

.dtb-select[b-mwoet4nain] {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--m-accent, #a78bfa);
    color: var(--m-accent, #a78bfa);
    background: color-mix(in srgb, var(--m-accent, #a78bfa) 6%, transparent);
    cursor: pointer;
}

.dtb-select:focus-visible[b-mwoet4nain] {
    outline: 2px solid var(--m-accent, #a78bfa);
    outline-offset: 1px;
}

/* Content-source switcher — mirrors .dtb-profile-switcher's pill shape but
   uses --m-teal as its accent so it reads as a distinct switch (the profile
   selector is purple/accent; the content-source selector is teal). */
.dtb-content-switcher[b-mwoet4nain] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--m-teal, #4ed7c8);
}

.dtb-content-switcher .material-symbols-outlined[b-mwoet4nain] {
    font-size: 1rem;
}

.dtb-content-switcher .dtb-select[b-mwoet4nain] {
    border-color: var(--m-teal, #4ed7c8);
    color: var(--m-teal, #4ed7c8);
    background: color-mix(in srgb, var(--m-teal, #4ed7c8) 6%, transparent);
}

.dtb-content-switcher .dtb-select:focus-visible[b-mwoet4nain] {
    outline-color: var(--m-teal, #4ed7c8);
}

/* Deployed version badge — commit SHA + environment */
.dtb-version[b-mwoet4nain] {
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--m-text-2, #aaa);
    opacity: 0.75;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--m-text-2, #aaa) 25%, transparent);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    transition: opacity 0.15s;
}
.dtb-version:hover[b-mwoet4nain] {
    opacity: 1;
    text-decoration: underline;
}

/* PWA variant (install / open) */
.dtb-btn-pwa[b-mwoet4nain] {
    color: var(--m-primary, #7c3aed);
    border-color: var(--m-primary, #7c3aed);
    background: color-mix(in srgb, var(--m-primary, #7c3aed) 6%, transparent);
}
.dtb-btn-pwa:hover[b-mwoet4nain],
.dtb-btn-pwa:focus-visible[b-mwoet4nain] {
    background: color-mix(in srgb, var(--m-primary, #7c3aed) 18%, transparent);
}
/* /Components/Layout/OfflineIndicator.razor.rz.scp.css */
/* OfflineIndicator — Dragon Scale themed offline banner */

.offline-indicator[b-u9l93ycrc7] {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 1020;
    padding: 0;
    animation: offline-slide-in-b-u9l93ycrc7 0.35s ease-out;
}

@keyframes offline-slide-in-b-u9l93ycrc7 {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.offline-inner[b-u9l93ycrc7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-error, #ef4444) 15%, var(--m-bg, #1a1a2e)),
        color-mix(in srgb, var(--m-error, #ef4444) 8%, var(--m-bg, #1a1a2e))
    );
    border-bottom: 1px solid color-mix(in srgb, var(--m-error, #ef4444) 25%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-error, #ef4444) 12%, transparent);
}

.offline-icon-wrap[b-u9l93ycrc7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-error, #ef4444) 20%, transparent);
    flex-shrink: 0;
    animation: offline-icon-pulse-b-u9l93ycrc7 3s ease-in-out infinite;
}

@keyframes offline-icon-pulse-b-u9l93ycrc7 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-error, #ef4444) 15%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.offline-icon[b-u9l93ycrc7] {
    font-size: 1.125rem;
    color: var(--m-error, #ef4444);
}

.offline-text[b-u9l93ycrc7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.offline-title[b-u9l93ycrc7] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--m-text, #f8f7ff);
    letter-spacing: 0.01em;
}

.offline-desc[b-u9l93ycrc7] {
    font-size: 0.75rem;
    color: var(--m-text-2, rgba(255, 255, 255, 0.6));
    line-height: 1.4;
}

/* Light mode */
:is(html[data-theme="light"], html[data-theme="bright"]) .offline-inner[b-u9l93ycrc7] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-error, #ef4444) 10%, var(--m-bg, #f6f4ff)),
        color-mix(in srgb, var(--m-error, #ef4444) 5%, var(--m-bg, #f6f4ff))
    );
    border-bottom-color: color-mix(in srgb, var(--m-error, #ef4444) 20%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .offline-title[b-u9l93ycrc7] {
    color: var(--m-text, #2e1f66);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .offline-desc[b-u9l93ycrc7] {
    color: var(--m-text-2, #5c4fa3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .offline-indicator[b-u9l93ycrc7] {
        animation: none;
    }

    .offline-icon-wrap[b-u9l93ycrc7] {
        animation: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .offline-inner[b-u9l93ycrc7] {
        padding: 0.5rem 1rem;
    }

    .offline-desc[b-u9l93ycrc7] {
        display: none;
    }
}
/* /Components/Layout/ProfileMenu.razor.rz.scp.css */
/* ProfileMenu — Dragon Scale dropdown */

/* Animation custom properties */
.pm-container[b-q4kf0s446k] {
  --_pm-dropdown-dur: 200ms;
  --_pm-item-hover-dur: 150ms;

  position: relative;
  list-style: none;
}

.pm-trigger[b-q4kf0s446k] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--m-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition:
    background var(--_pm-item-hover-dur),
    color var(--_pm-item-hover-dur);
}

.pm-trigger:hover[b-q4kf0s446k] {
  background: color-mix(in srgb, var(--m-surface) 10%, transparent);
  color: var(--m-text);
}

.pm-trigger:focus-visible[b-q4kf0s446k] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

.pm-trigger .material-symbols-outlined[b-q4kf0s446k] {
  font-size: 1.25rem;
}

/* Chevron rotation — moves to CSS class-based approach */
.pm-chevron[b-q4kf0s446k] {
  font-size: 1.1rem;
  margin-left: 0.15rem;
  vertical-align: middle;
  /* Only use CSS transition, never inline style for transform */
  transition: transform var(--_pm-dropdown-dur) var(--m-ease-spring);
  transform-origin: center;
}

/* When dropdown is open, parent adds data attribute or inline style.
   The inline style on the element handles rotation via Blazor binding.
   CSS transition on .pm-chevron handles the smooth animation. */

/* ---- Dropdown ---- */
.pm-dropdown[b-q4kf0s446k] {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 220px;
  background: var(--m-card, #1e1e2e);
  border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  animation: pm-enter-b-q4kf0s446k var(--_pm-dropdown-dur) var(--m-ease-spring);
  transform-origin: top right;
  /* Above navbar but below modals */
  z-index: 1100;
}

.pm-dropdown[b-q4kf0s446k]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--m-primary),
    var(--m-teal),
    transparent
  );
  border-radius: 2px;
  pointer-events: none;
}

/* Scale pop entrance with slight overshoot */
@keyframes pm-enter-b-q4kf0s446k {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  70% {
    opacity: 1;
    transform: scale(1.02) translateY(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- Header ---- */
.pm-header[b-q4kf0s446k] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pm-header .material-symbols-outlined[b-q4kf0s446k] {
  font-size: 1rem;
  color: var(--m-primary);
}

/* ---- Divider ---- */
.pm-divider[b-q4kf0s446k] {
  height: 1px;
  background: color-mix(in srgb, var(--m-border) 40%, transparent);
  margin: 0.375rem 0.5rem;
}

/* ---- Menu items with ripple highlight + icon twinkle ---- */
.pm-item[b-q4kf0s446k] {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 1.1rem;
  border: none;
  background: transparent;
  color: var(--m-text);
  font-size: 0.87rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  /* Remove overflow: hidden for accessibility; use focus ring for highlight */
  outline: none;
  transition:
    background var(--_pm-item-hover-dur),
    color var(--_pm-item-hover-dur),
    padding-left var(--_pm-item-hover-dur);
}

/* Ripple highlight overlay on hover */
.pm-item[b-q4kf0s446k]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 20% 50%,
    color-mix(in srgb, var(--m-primary) 10%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--_pm-item-hover-dur) var(--m-ease-smooth);
  pointer-events: none;
}

.pm-item:hover[b-q4kf0s446k]::before {
  opacity: 1;
}

.pm-item .material-symbols-outlined[b-q4kf0s446k] {
  font-size: 1.22rem;
  color: var(--m-text-2);
  min-width: 1.5em;
  text-align: center;
  vertical-align: middle;
  transition:
    color var(--_pm-item-hover-dur),
    transform var(--_pm-item-hover-dur) var(--m-ease-spring);
}

.pm-item:hover[b-q4kf0s446k] {
  background: color-mix(in srgb, var(--m-primary) 8%, transparent);
  color: var(--m-primary);
  padding-left: 1.25rem;
}

/* Icon twinkle — scale + subtle rotation on hover */
.pm-item:hover .material-symbols-outlined[b-q4kf0s446k] {
  color: var(--m-primary);
  transform: scale(1.15) rotate(-8deg);
}

.pm-item:focus-visible[b-q4kf0s446k] {
  outline: 2px solid var(--m-primary);
  outline-offset: 0px;
  background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

/* Danger item overrides */
.pm-item-danger:hover[b-q4kf0s446k] {
  background: color-mix(in srgb, var(--m-error, #ef4444) 8%, transparent);
  color: var(--m-error, #ef4444);
}

.pm-item-danger:hover[b-q4kf0s446k]::before {
  background: radial-gradient(
    circle at 20% 50%,
    color-mix(in srgb, var(--m-error, #ef4444) 10%, transparent),
    transparent 70%
  );
}

.pm-item-danger:hover .material-symbols-outlined[b-q4kf0s446k] {
  color: var(--m-error, #ef4444);
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .pm-dropdown[b-q4kf0s446k] {
  background: var(--m-card, #ffffff);
  border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .pm-item:hover[b-q4kf0s446k] {
  background: var(--m-surface);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .pm-item:hover[b-q4kf0s446k]::before {
  background: radial-gradient(
    circle at 20% 50%,
    color-mix(in srgb, var(--m-primary) 6%, transparent),
    transparent 70%
  );
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pm-dropdown[b-q4kf0s446k] {
    animation: none !important;
  }
  .pm-chevron[b-q4kf0s446k] {
    transition: none !important;
  }
  .pm-item[b-q4kf0s446k] {
    transition: none !important;
  }
  .pm-item[b-q4kf0s446k]::before {
    display: none !important;
  }
  .pm-item .material-symbols-outlined[b-q4kf0s446k] {
    transition: none !important;
  }
  .pm-item:hover .material-symbols-outlined[b-q4kf0s446k] {
    transform: none !important;
  }
}
/* /Components/LoadingExperience.razor.rz.scp.css */
/* Styles moved to wwwroot/css/loading.css so they apply before Blazor boots.
   The global file uses the same class names — no duplication needed here. */
/* /Components/LoadingIndicator.razor.rz.scp.css */
/* LoadingIndicator.razor.css — Magical inline loading indicator */

.loading-container[b-2808njkuhd] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 200px;
}

.loading-spinner-wrapper[b-2808njkuhd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: li-enter-b-2808njkuhd 0.4s ease-out both;
}

@keyframes li-enter-b-2808njkuhd {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ---- SVG Spinner ---- */

.li-orb[b-2808njkuhd] {
    width: 60px;
    height: 60px;
    animation: li-breathe-b-2808njkuhd 3s ease-in-out infinite;
}

@keyframes li-breathe-b-2808njkuhd {
    0%, 100% { filter: drop-shadow(0 0 4px transparent); }
    50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--m-primary, #5b3cc4) 30%, transparent)); }
}

.li-spinner-svg[b-2808njkuhd] {
    width: 100%;
    height: 100%;
    animation: li-spin-b-2808njkuhd 6s linear infinite;
}

@keyframes li-spin-b-2808njkuhd {
    to { transform: rotate(360deg); }
}

.li-ring[b-2808njkuhd] {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.li-ring-outer[b-2808njkuhd] {
    stroke: color-mix(in srgb, var(--m-primary, #5b3cc4) 30%, transparent);
    stroke-dasharray: 40 120;
    animation: li-ring-dash-b-2808njkuhd 3s ease-in-out infinite;
}

@keyframes li-ring-dash-b-2808njkuhd {
    0% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: -80; }
    100% { stroke-dashoffset: -160; }
}

.li-ring-inner[b-2808njkuhd] {
    stroke: color-mix(in srgb, var(--m-teal, #4ed7c8) 35%, transparent);
    stroke-dasharray: 20 90;
    animation: li-inner-spin-b-2808njkuhd 4s linear infinite reverse;
}

@keyframes li-inner-spin-b-2808njkuhd {
    to { stroke-dashoffset: -113; }
}

.li-center-dot[b-2808njkuhd] {
    fill: var(--m-primary, #5b3cc4);
    opacity: 0.7;
    animation: li-dot-pulse-b-2808njkuhd 2s ease-in-out infinite;
}

@keyframes li-dot-pulse-b-2808njkuhd {
    0%, 100% { r: 3; opacity: 0.5; }
    50% { r: 5; opacity: 0.8; }
}

.li-spark[b-2808njkuhd] {
    fill: var(--m-accent, #f6c453);
    animation: li-spark-glow-b-2808njkuhd 1.5s ease-in-out infinite;
}

@keyframes li-spark-glow-b-2808njkuhd {
    0%, 100% { opacity: 0.4; r: 2; }
    50% { opacity: 1; r: 3; }
}

/* ---- Message ---- */

.loading-message[b-2808njkuhd] {
    color: var(--m-text-2);
    font-size: 0.875rem;
    margin: 0;
    text-align: center;
    animation: li-message-fade-b-2808njkuhd 0.5s ease-out 0.2s both;
}

@keyframes li-message-fade-b-2808njkuhd {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Skeleton loading ---- */

.skeleton-container[b-2808njkuhd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
}

.skeleton-item[b-2808njkuhd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: li-skeleton-enter-b-2808njkuhd 0.4s ease-out both;
    animation-delay: var(--li-delay, 0s);
}

@keyframes li-skeleton-enter-b-2808njkuhd {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.skeleton-line[b-2808njkuhd] {
    height: 1rem;
    background: linear-gradient(
        90deg,
        var(--m-card, #1e1e2e) 0%,
        color-mix(in srgb, var(--m-border, #ded9ff) 60%, var(--m-card, #1e1e2e)) 50%,
        var(--m-card, #1e1e2e) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: li-shimmer-b-2808njkuhd 1.8s ease-in-out infinite;
}

.skeleton-line-title[b-2808njkuhd] {
    height: 1.5rem;
    width: 60%;
    border-radius: 8px;
}

.skeleton-line-text[b-2808njkuhd] {
    width: 100%;
}

.skeleton-line-text:last-child[b-2808njkuhd] {
    width: 80%;
}

@keyframes li-shimmer-b-2808njkuhd {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .loading-spinner-wrapper[b-2808njkuhd] {
        animation: none;
    }

    .li-orb[b-2808njkuhd] {
        animation: none;
    }

    .li-spinner-svg[b-2808njkuhd] {
        animation: none;
    }

    .li-ring-outer[b-2808njkuhd],
    .li-ring-inner[b-2808njkuhd] {
        animation: none;
        stroke-dasharray: none;
    }

    .li-center-dot[b-2808njkuhd] {
        animation: none;
        opacity: 0.7;
    }

    .li-spark[b-2808njkuhd] {
        animation: none;
        opacity: 0.6;
    }

    .skeleton-item[b-2808njkuhd] {
        animation: none;
    }

    .skeleton-line[b-2808njkuhd] {
        animation: none;
        background: var(--m-border);
    }
}
/* /Components/MarkdownRenderer.razor.rz.scp.css */
/* Markdown Renderer Component Styles */

.markdown-content[b-c0uacz0wro] {
    line-height: 1.6;
}

.markdown-content h1[b-c0uacz0wro],
.markdown-content h2[b-c0uacz0wro],
.markdown-content h3[b-c0uacz0wro],
.markdown-content h4[b-c0uacz0wro],
.markdown-content h5[b-c0uacz0wro],
.markdown-content h6[b-c0uacz0wro] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--m-text);
}

.markdown-content h1[b-c0uacz0wro] { font-size: 2rem; }
.markdown-content h2[b-c0uacz0wro] { font-size: 1.75rem; }
.markdown-content h3[b-c0uacz0wro] { font-size: 1.5rem; }
.markdown-content h4[b-c0uacz0wro] { font-size: 1.25rem; }
.markdown-content h5[b-c0uacz0wro] { font-size: 1.125rem; }
.markdown-content h6[b-c0uacz0wro] { font-size: 1rem; }

.markdown-content p[b-c0uacz0wro] {
    margin-bottom: 1rem;
}

.markdown-content strong[b-c0uacz0wro],
.markdown-content b[b-c0uacz0wro] {
    font-weight: 600;
}

.markdown-content em[b-c0uacz0wro],
.markdown-content i[b-c0uacz0wro] {
    font-style: italic;
}

.markdown-content ul[b-c0uacz0wro],
.markdown-content ol[b-c0uacz0wro] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.markdown-content li[b-c0uacz0wro] {
    margin-bottom: 0.5rem;
}

.markdown-content blockquote[b-c0uacz0wro] {
    border-left: 4px solid var(--m-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--m-text-2);
}

.markdown-content code[b-c0uacz0wro] {
    background-color: color-mix(in srgb, var(--m-surface-hover) 85%, transparent);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: var(--d-font-mono);
    font-size: 0.875rem;
}

.markdown-content pre[b-c0uacz0wro] {
    background-color: color-mix(in srgb, var(--m-surface-hover) 85%, transparent);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content pre code[b-c0uacz0wro] {
    background-color: transparent;
    padding: 0;
}

.markdown-content a[b-c0uacz0wro] {
    color: var(--m-primary);
    text-decoration: none;
}

.markdown-content a:hover[b-c0uacz0wro] {
    text-decoration: underline;
}

.markdown-content hr[b-c0uacz0wro] {
    border: none;
    border-top: 1px solid var(--m-border);
    margin: 2rem 0;
}

h1 .markdown-content[b-c0uacz0wro],
h2 .markdown-content[b-c0uacz0wro],
h3 .markdown-content[b-c0uacz0wro],
h4 .markdown-content[b-c0uacz0wro],
h5 .markdown-content[b-c0uacz0wro],
h6 .markdown-content[b-c0uacz0wro] {
    margin: 0;
    display: inline;
}

h1 .markdown-content strong[b-c0uacz0wro],
h2 .markdown-content strong[b-c0uacz0wro],
h3 .markdown-content strong[b-c0uacz0wro],
h4 .markdown-content strong[b-c0uacz0wro],
h5 .markdown-content strong[b-c0uacz0wro],
h6 .markdown-content strong[b-c0uacz0wro] {
    color: inherit;
}

.lead .markdown-content[b-c0uacz0wro] {
    font-size: inherit;
    font-weight: inherit;
}

.lead .markdown-content p[b-c0uacz0wro] {
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
}

/* /Components/PlayerAssignmentModal.razor.rz.scp.css */
/* PlayerAssignmentModal — Dragon Scale modal with tabs */

.pam-backdrop[b-lxicbuftba] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--m-bg) 70%, transparent);
    backdrop-filter: blur(6px);
    z-index: 1040;
    animation: pam-fade-b-lxicbuftba 0.2s ease-out;
}

.pam-dialog[b-lxicbuftba] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 16px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
    z-index: 1050;
    animation: pam-slide-b-lxicbuftba 0.25s ease-out;
}

@keyframes pam-fade-b-lxicbuftba {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pam-slide-b-lxicbuftba {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Header ---- */
.pam-header[b-lxicbuftba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
}

.pam-title[b-lxicbuftba] {
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.pam-close[b-lxicbuftba] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pam-close:hover[b-lxicbuftba] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-primary);
}

.pam-close:focus-visible[b-lxicbuftba] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.pam-close .material-symbols-outlined[b-lxicbuftba] { font-size: 1.125rem; }

/* ---- Alert ---- */
.pam-alert[b-lxicbuftba] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-warning) 25%, transparent);
    color: var(--m-warning);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.pam-alert .material-symbols-outlined[b-lxicbuftba] { font-size: 1.125rem; }

/* ---- Tabs ---- */
.pam-tabs[b-lxicbuftba] {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 30%, transparent);
}

.pam-tab[b-lxicbuftba] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.pam-tab .material-symbols-outlined[b-lxicbuftba] { font-size: 1rem; }

.pam-tab:hover[b-lxicbuftba] {
    color: var(--m-text);
}

.pam-tab-active[b-lxicbuftba] {
    color: var(--m-primary);
    border-bottom-color: var(--m-primary);
}

.pam-tab:focus-visible[b-lxicbuftba] {
    outline: 2px solid var(--m-primary);
    outline-offset: -2px;
}

/* AI tab — accent pulse */
.pam-tab-ai.pam-tab-active[b-lxicbuftba] {
    color: var(--m-primary);
    border-bottom-color: var(--m-primary);
}

.pam-tab-ai .material-symbols-outlined[b-lxicbuftba] {
    animation: pam-ai-pulse-b-lxicbuftba 2.5s ease-in-out infinite;
}

@keyframes pam-ai-pulse-b-lxicbuftba {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ---- Body + panel ---- */
.pam-body[b-lxicbuftba] {
    flex: 1;
    overflow-y: auto;
}

.pam-panel[b-lxicbuftba] {
    padding: 1.25rem 1.5rem;
}

/* ---- Footer ---- */
.pam-footer[b-lxicbuftba] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .pam-dialog[b-lxicbuftba] {
    background: var(--m-card, #ffffff);
    border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .pam-backdrop[b-lxicbuftba] {
    background: color-mix(in srgb, var(--m-bg) 50%, transparent);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .pam-backdrop[b-lxicbuftba],
    .pam-dialog[b-lxicbuftba] {
        animation: none;
    }

    .pam-tab-ai .material-symbols-outlined[b-lxicbuftba] {
        animation: none;
    }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .pam-dialog[b-lxicbuftba] {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 2rem);
    }

    .pam-tabs[b-lxicbuftba] {
        padding: 0 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pam-tabs[b-lxicbuftba]::-webkit-scrollbar { display: none; }

    .pam-tab[b-lxicbuftba] {
        font-size: 0.75rem;
        padding: 0.5rem 0.625rem;
    }

    .pam-footer[b-lxicbuftba] {
        flex-direction: column;
    }
}

.pam-new-profile-redirect[b-lxicbuftba] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

.pam-redirect-icon[b-lxicbuftba] {
    font-size: 3rem;
    color: var(--m-primary);
    opacity: 0.7;
}

.pam-redirect-message[b-lxicbuftba] {
    margin: 0;
    color: var(--m-text-secondary);
    font-size: 0.9375rem;
    max-width: 320px;
}
/* /Components/PlayerQuickLinks.razor.rz.scp.css */
.player-quicklinks[b-fprr6dleh3] {
  --quicklinks-shadow-clearance: 30px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 18px 12px calc(4px + var(--quicklinks-shadow-clearance));
}

.quicklinks-inner[b-fprr6dleh3] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.quicklink-card[b-fprr6dleh3] {
  --_accent: var(--m-primary);
  --_icon-bg-start: var(--m-primary);
  --_icon-bg-end: color-mix(in srgb, var(--m-primary) 75%, var(--m-bg));
  --_icon-color: var(--m-on-primary);
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--m-text) 14%, transparent);
  background: color-mix(in srgb, var(--m-text) 6%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--m-text) 22%, transparent);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.quicklink-card[b-fprr6dleh3]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--m-on-primary) 6%, transparent) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.quicklink-card:hover[b-fprr6dleh3]::before {
  transform: translateX(100%);
}

.quicklink-card:hover[b-fprr6dleh3] {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--m-text) 30%, transparent);
}

.quicklink-card:focus-visible[b-fprr6dleh3] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
  transform: translateY(-2px);
}

/* Icon ring */
.quicklink-icon[b-fprr6dleh3] {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--m-primary) 22%, var(--m-bg)),
    color-mix(in srgb, var(--m-success) 8%, var(--m-bg))
  );
  color: var(--m-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--m-text) 14%, transparent);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.quicklink-card:hover .quicklink-icon[b-fprr6dleh3] {
  transform: scale(1.1) rotate(-4deg);
}

.quicklink-icon .material-symbols-outlined[b-fprr6dleh3] {
  font-size: 1.5rem;
}

/* Per-card accent colours */
.quicklink-card[data-card="trophy"][b-fprr6dleh3] {
  --_accent: var(--m-accent);
  --_icon-bg-start: color-mix(in srgb, var(--m-accent) 45%, var(--m-text));
  --_icon-bg-end: color-mix(in srgb, var(--m-accent) 70%, var(--m-text));
  --_icon-color: var(--m-on-accent);
  border-color: color-mix(in srgb, var(--_accent) 25%, transparent);
}

.quicklink-card[data-card="trophy"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 50%, transparent);
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--_accent) 18%, transparent),
    0 14px 34px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.quicklink-card[data-card="trophy"] .quicklink-icon[b-fprr6dleh3] {
  background: linear-gradient(135deg, var(--_icon-bg-start), var(--_icon-bg-end));
  color: var(--_icon-color);
}

.quicklink-card[data-card="vault"][b-fprr6dleh3] {
  --_accent: var(--m-teal);
  --_icon-bg-start: color-mix(in srgb, var(--m-teal) 35%, var(--m-text));
  --_icon-bg-end: color-mix(in srgb, var(--m-teal) 70%, var(--m-text));
  --_icon-color: var(--m-on-primary);
  border-color: color-mix(in srgb, var(--_accent) 20%, transparent);
}

.quicklink-card[data-card="vault"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 45%, transparent);
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--_accent) 15%, transparent),
    0 14px 34px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.quicklink-card[data-card="vault"] .quicklink-icon[b-fprr6dleh3] {
  background: linear-gradient(135deg, var(--_icon-bg-start), var(--_icon-bg-end));
  color: var(--_icon-color);
}

.quicklink-card[data-card="store"][b-fprr6dleh3] {
  --_accent: var(--m-primary);
  --_icon-bg-start: color-mix(in srgb, var(--m-primary) 45%, var(--m-text));
  --_icon-bg-end: var(--m-primary);
  --_icon-color: var(--m-on-primary);
  border-color: color-mix(in srgb, var(--_accent) 22%, transparent);
}

.quicklink-card[data-card="store"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 45%, transparent);
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--_accent) 18%, transparent),
    0 14px 34px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.quicklink-card[data-card="store"] .quicklink-icon[b-fprr6dleh3] {
  background: linear-gradient(135deg, var(--_icon-bg-start), var(--_icon-bg-end));
  color: var(--_icon-color);
}

.quicklink-card[data-card="achievements"][b-fprr6dleh3] {
  --_accent: var(--m-info);
  --_icon-bg-start: color-mix(in srgb, var(--m-info) 45%, var(--m-text));
  --_icon-bg-end: color-mix(in srgb, var(--m-info) 80%, var(--m-text));
  --_icon-color: var(--m-on-primary);
  border-color: color-mix(in srgb, var(--_accent) 22%, transparent);
}

.quicklink-card[data-card="achievements"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 45%, transparent);
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--_accent) 18%, transparent),
    0 14px 34px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.quicklink-card[data-card="achievements"] .quicklink-icon[b-fprr6dleh3] {
  background: linear-gradient(135deg, var(--_icon-bg-start), var(--_icon-bg-end));
  color: var(--_icon-color);
}

.quicklink-title[b-fprr6dleh3] {
  font-weight: 700;
  color: var(--m-text);
  line-height: 1.1;
}

.quicklink-subtitle[b-fprr6dleh3] {
  color: var(--m-text-2);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* Light mode */
:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
  background: color-mix(in srgb, var(--m-surface) 85%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--m-text) 8%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card:hover[b-fprr6dleh3] {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--m-text) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="trophy"][b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 15%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="trophy"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 35%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--_accent) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="vault"][b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="vault"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 30%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--_accent) 8%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="store"][b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="store"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--m-primary) 35%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="achievements"][b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .quicklink-card[data-card="achievements"]:hover[b-fprr6dleh3] {
  border-color: color-mix(in srgb, var(--_accent) 30%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--_accent) 8%, transparent);
}

@media (max-width: 992px) {
  .player-quicklinks[b-fprr6dleh3] {
    --quicklinks-shadow-clearance: 22px;
  }

  .quicklinks-inner[b-fprr6dleh3] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .player-quicklinks[b-fprr6dleh3] {
    --quicklinks-shadow-clearance: 16px;
  }

  .quicklinks-inner[b-fprr6dleh3] {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quicklink-card[b-fprr6dleh3] {
    transition: none;
  }

  .quicklink-card:hover[b-fprr6dleh3],
  .quicklink-card:hover .quicklink-icon[b-fprr6dleh3] {
    transform: none;
  }

  .quicklink-card[b-fprr6dleh3]::before {
    display: none;
  }
}
/* /Components/SceneMediaDisplay.razor.rz.scp.css */
/* SceneMediaDisplay component scoped styles */

.media-container[b-ehtwa7s788] {
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 12%, transparent);
    transition: box-shadow 0.3s ease;
}

.media-container:hover[b-ehtwa7s788] {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--m-text) 18%, transparent);
}

.media-container img[b-ehtwa7s788],
.media-container video[b-ehtwa7s788] {
    width: 100%;
    height: auto;
    display: block;
}

.media-container audio[b-ehtwa7s788] {
    width: 100%;
    background: var(--m-surface);
    border-radius: 0.5rem;
}

.media-placeholder-icon[b-ehtwa7s788] {
    font-size: 2rem;
    color: var(--m-on-primary);
    margin-bottom: 1rem;
}

/* Audio Overlay Styles */
.image-overlay-container[b-ehtwa7s788] {
    position: relative;
    width: 100%;
    display: block;
}

.btn-audio-overlay[b-ehtwa7s788] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-primary) 85%, transparent);
    border: 2px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    color: var(--m-text) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 30%, transparent);
    z-index: 999;
}

.btn-audio-overlay i[b-ehtwa7s788] {
    color: var(--m-text) !important;
}

.btn-audio-overlay:hover[b-ehtwa7s788] {
    background: color-mix(in srgb, var(--m-primary) 90%, #000000 10%);
    transform: scale(1.1);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.btn-audio-overlay.playing[b-ehtwa7s788] {
    background: color-mix(in srgb, var(--m-error) 90%, transparent);
    border-color: color-mix(in srgb, var(--m-border) 80%, transparent);
    animation: pulse-audio-b-ehtwa7s788 2s infinite;
}

@keyframes pulse-audio-b-ehtwa7s788 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-error) 70%, transparent);
    }
    70% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--m-error) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-error) 0%, transparent);
    }
}


/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header[b-39wlwpg7oq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto 1.25rem;
    padding: 1rem;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(in srgb, var(--m-primary) 12%, transparent),
            transparent 48%
        ),
        color-mix(in srgb, var(--m-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
}

.page-header-main[b-39wlwpg7oq] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.page-header-copy[b-39wlwpg7oq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.page-header-kicker[b-39wlwpg7oq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-accent) 18%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
    color: var(--m-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.page-header-kicker .material-symbols-outlined[b-39wlwpg7oq] {
    font-size: 0.95rem;
    line-height: 1;
}

.page-header-title[b-39wlwpg7oq] {
    margin: 0;
    font-family: var(--d-font-serif);
    color: var(--m-text);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

.page-header-subtitle[b-39wlwpg7oq] {
    margin: 0;
    color: var(--m-text-2);
    font-size: 0.9rem;
    line-height: 1.4;
}

.page-header-subtitle strong[b-39wlwpg7oq] {
    color: var(--m-text);
}

.page-header-actions[b-39wlwpg7oq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.page-header-back[b-39wlwpg7oq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 26%, var(--m-border));
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-card));
    color: var(--m-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.page-header-back .material-symbols-outlined[b-39wlwpg7oq] {
    font-size: 1.25rem;
}

.page-header-back:hover[b-39wlwpg7oq] {
    background: color-mix(in srgb, var(--m-primary) 16%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 45%, var(--m-border));
    transform: translateX(-1px);
}

.page-header-back:focus-visible[b-39wlwpg7oq] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .page-header[b-39wlwpg7oq] {
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(in srgb, var(--m-primary) 8%, transparent),
            transparent 48%
        ),
        color-mix(in srgb, var(--m-card) 96%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 24%, var(--m-border));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

html[data-theme="dark"] .page-header[b-39wlwpg7oq] {
    box-shadow:
        var(--m-shadow-md),
        0 0 22px color-mix(in srgb, var(--m-primary) 12%, transparent);
}

@media (max-width: 768px) {
    .page-header[b-39wlwpg7oq] {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header-actions[b-39wlwpg7oq] {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .page-header[b-39wlwpg7oq] {
        margin-bottom: 1rem;
        padding: 0.9rem;
    }

    .page-header-actions[b-39wlwpg7oq] {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header-back[b-39wlwpg7oq] {
        transition: none;
    }

    .page-header-back:hover[b-39wlwpg7oq] {
        transform: none;
    }
}
/* /Components/Shared/SkeletonPreviewGrid.razor.rz.scp.css */
/* =====================================================
   SkeletonPreviewGrid — shared skeleton loading states
   ===================================================== */

.skeleton-grid[b-azhz6c0arg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    padding: 2rem;
}

.skeleton-card[b-azhz6c0arg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 0.875rem;
    border: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
    padding: 0.75rem;
    background: color-mix(in srgb, var(--m-surface) 25%, transparent);
}

/* --- Pulse animation --- */
@keyframes skeleton-shimmer-b-azhz6c0arg {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.5; }
}

.skeleton-pulse[b-azhz6c0arg] {
    background: color-mix(in srgb, var(--m-text) 15%, transparent);
    animation: skeleton-shimmer-b-azhz6c0arg 2s ease-in-out infinite;
}

/* --- Card variant (Treasury) --- */
.skeleton-thumb[b-azhz6c0arg] {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0.5rem;
}

/* --- Trophy variant --- */
.skeleton-stand[b-azhz6c0arg] {
    width: 60%;
    aspect-ratio: 1 / 1.4;
    border-radius: 12px 12px 4px 4px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    margin: 0 auto;
}

/* Centre the text lines for trophy cards */
.skeleton-card:has(.skeleton-stand)[b-azhz6c0arg] {
    align-items: center;
}

/* Trophy grid uses slightly wider cards */
.skeleton-card:has(.skeleton-stand) ~ .skeleton-card[b-azhz6c0arg],
.skeleton-card:has(.skeleton-stand)[b-azhz6c0arg] {
    padding: 1rem 0.75rem;
}

/* --- Bundle variant --- */
.skeleton-image[b-azhz6c0arg] {
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
}

.skeleton-body[b-azhz6c0arg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Shared text lines --- */
.skeleton-line[b-azhz6c0arg] {
    height: 0.625rem;
    border-radius: 99px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .skeleton-pulse[b-azhz6c0arg] {
        animation: none;
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle-button[b-dvk89venac] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--m-surface) 78%, transparent);
    color: var(--m-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--m-dur-fast) var(--m-ease-smooth),
        border-color var(--m-dur-fast) var(--m-ease-smooth),
        color var(--m-dur-fast) var(--m-ease-smooth),
        transform var(--m-dur-fast) var(--m-ease-spring);
}

.theme-toggle-button .material-symbols-outlined[b-dvk89venac] {
    font-size: 1.15rem;
}

.theme-toggle-button:hover[b-dvk89venac] {
    color: var(--m-primary);
    border-color: color-mix(in srgb, var(--m-primary) 38%, var(--m-border));
    background-color: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
}

.theme-toggle-button:active[b-dvk89venac] {
    transform: scale(0.94);
}

.theme-toggle-button:focus-visible[b-dvk89venac] {
    outline: none;
    box-shadow: var(--m-ring);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-button[b-dvk89venac] {
        transition: none;
    }
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* ToastContainer.razor.css - Scoped styles for toast notifications */

.toast-container[b-cauy8m9xhe] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
    pointer-events: none;
}

.toast[b-cauy8m9xhe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    /* bottom padding accommodates the progress bar */
    padding-bottom: 0.875rem;
    background: var(--m-card);
    border-radius: 8px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 15%, transparent);
    border-left: 4px solid;
    min-width: 300px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    /* spring overshoot entrance */
    animation: slideIn-b-cauy8m9xhe 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    backdrop-filter: blur(10px);
}

/* Progress drain bar — purely decorative timing indicator */
.toast[b-cauy8m9xhe]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0.25;
    transform-origin: left center;
    animation: toast-drain-b-cauy8m9xhe 5s linear forwards;
}

@keyframes toast-drain-b-cauy8m9xhe {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes slideIn-b-cauy8m9xhe {
    from {
        transform: translateX(calc(100% + 1rem));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success[b-cauy8m9xhe] {
    border-left-color: var(--m-success);
}

.toast-error[b-cauy8m9xhe] {
    border-left-color: var(--m-error);
}

.toast-warning[b-cauy8m9xhe] {
    border-left-color: var(--m-warning);
}

.toast-info[b-cauy8m9xhe] {
    border-left-color: var(--m-info);
}

.toast-icon[b-cauy8m9xhe] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toast-icon .material-symbols-outlined[b-cauy8m9xhe] {
    font-size: 1.125rem;
}

.toast-success .toast-icon[b-cauy8m9xhe] {
    background: var(--m-success);
    color: var(--m-on-primary);
}

.toast-error .toast-icon[b-cauy8m9xhe] {
    background: var(--m-error);
    color: var(--m-on-primary);
}

.toast-warning .toast-icon[b-cauy8m9xhe] {
    background: var(--m-warning);
    color: var(--m-on-primary);
}

.toast-info .toast-icon[b-cauy8m9xhe] {
    background: var(--m-info);
    color: var(--m-on-primary);
}

.toast-message[b-cauy8m9xhe] {
    flex: 1;
    color: var(--m-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.toast-close[b-cauy8m9xhe] {
    background: none;
    border: none;
    color: var(--m-text-2);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.toast-close:hover[b-cauy8m9xhe] {
    background: var(--m-border);
    color: var(--m-text);
}

.toast-close:focus[b-cauy8m9xhe] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .toast-container[b-cauy8m9xhe] {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .toast[b-cauy8m9xhe] {
        min-width: auto;
        width: 100%;
    }

    @keyframes slideIn-b-cauy8m9xhe {
        from {
            transform: translateY(calc(100% + 1rem));
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .toast[b-cauy8m9xhe]        { animation: none; }
    .toast[b-cauy8m9xhe]::after { animation: none; display: none; }
}



/* /Components/TokenBalancePill.razor.rz.scp.css */
.token-pill[b-6p62zdf8xv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    text-decoration: none;
    color: color-mix(in srgb, var(--m-on-primary) 92%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-secondary) 25%, transparent), color-mix(in srgb, var(--m-accent) 12%, transparent));
    border: 1px solid color-mix(in srgb, var(--m-on-primary) 14%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--m-bg) 22%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.token-pill:hover[b-6p62zdf8xv] {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--m-bg) 28%, transparent);
}

.token-pill-value[b-6p62zdf8xv] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Light mode: white text on near-transparent gradient is unreadable (<1:1 against light bg).
   Override to dark text + opaque tinted background for WCAG AA 4.5:1 text contrast. */
:is(html[data-theme="light"], html[data-theme="bright"]) .token-pill[b-6p62zdf8xv] {
    color: var(--m-text);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-secondary) 30%, var(--m-surface)),
        color-mix(in srgb, var(--m-accent) 20%, var(--m-surface))
    );
    border: 1px solid color-mix(in srgb, var(--m-primary) 40%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .token-pill:hover[b-6p62zdf8xv] {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .token-pill[b-6p62zdf8xv] {
        transition: none;
    }

    .token-pill:hover[b-6p62zdf8xv] {
        transform: none;
    }
}
/* /Components/UpdateNotification.razor.rz.scp.css */
/* ── UpdateNotification — service-worker update banner ──
   Positioning is owned by BottomNotificationStack. This card is a plain
   in-flow block; only its visuals + animation live here. */

.update-notification[b-5zkoi6kb8i] {
    position: relative;
    width: 100%;
    z-index: 1200;
    pointer-events: auto;
    animation: slideUp-b-5zkoi6kb8i 0.3s ease-out;
}

.update-notification.fade-out[b-5zkoi6kb8i] {
    animation: slideDown-b-5zkoi6kb8i 0.3s ease-out forwards;
}

.update-notification-content[b-5zkoi6kb8i] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 24px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.update-notification-content[b-5zkoi6kb8i],
.update-actions[b-5zkoi6kb8i],
.update-action-button[b-5zkoi6kb8i] {
    pointer-events: auto;
}

.update-action-button[b-5zkoi6kb8i] {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

.update-icon[b-5zkoi6kb8i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--m-primary);
    border-radius: 50%;
    color: var(--m-on-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.update-icon .material-symbols-outlined[b-5zkoi6kb8i] {
    animation: spin-b-5zkoi6kb8i 2s linear infinite;
}

.update-message[b-5zkoi6kb8i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 200px;
    min-width: 0;
}

.update-message strong[b-5zkoi6kb8i] {
    color: var(--m-text);
    font-size: 0.95rem;
}

.update-message span[b-5zkoi6kb8i] {
    color: var(--m-text-2);
    font-size: 0.85rem;
}

.update-actions[b-5zkoi6kb8i] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

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

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

@keyframes spin-b-5zkoi6kb8i {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Mid-size viewports: let the actions wrap below the message rather
   than fight for horizontal space. The icon stays inline with the text. */
@media (max-width: 768px) {
    .update-message[b-5zkoi6kb8i] {
        flex: 1 1 100%;
    }

    .update-actions[b-5zkoi6kb8i] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Mobile: full-width, centred actions, tighter padding. */
@media (max-width: 576px) {
    .update-notification-content[b-5zkoi6kb8i] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .update-actions[b-5zkoi6kb8i] {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .update-notification[b-5zkoi6kb8i] {
        animation: none;
    }

    .update-notification.fade-out[b-5zkoi6kb8i] {
        animation: none;
        opacity: 0;
    }

    .update-icon .material-symbols-outlined[b-5zkoi6kb8i] {
        animation: none;
    }
}
/* /Components/Vault/ArtifactCard.razor.rz.scp.css */
/* ArtifactCard — rare artifact display card for Treasury Vault */

.artifact-card[b-u23r4s6b72] {
    background: color-mix(in srgb, var(--m-surface) 3%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
    box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--m-text) 80%, transparent);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s, box-shadow 0.5s;
    cursor: pointer;
    min-height: 480px;
}

.artifact-card.active[b-u23r4s6b72] {
    box-shadow: 0 0 32px color-mix(in srgb, var(--m-teal) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.artifact-card:hover[b-u23r4s6b72] {
    transform: scale(1.02);
}

.artifact-card:focus-visible[b-u23r4s6b72] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Shimmer effect ---- */
.shimmer-effect[b-u23r4s6b72] {
    position: relative;
    overflow: hidden;
}

.shimmer-effect[b-u23r4s6b72]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 45%, color-mix(in srgb, var(--m-teal) 10%, transparent) 50%, transparent 55%);
    pointer-events: none;
    transition: transform 0.8s;
}

.artifact-card:hover[b-u23r4s6b72]::after {
    transform: translateX(50%) translateY(50%);
}

/* ---- Image area ---- */
.card-image-container[b-u23r4s6b72] {
    aspect-ratio: 4/5;
    position: relative;
    overflow: hidden;
}

.card-gradient-overlay[b-u23r4s6b72] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--d-bg), transparent);
    z-index: 10;
}

.card-image[b-u23r4s6b72] {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s;
}

.artifact-card:hover .card-image[b-u23r4s6b72] {
    transform: scale(1.1);
}

.card-image-fallback[b-u23r4s6b72] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--m-teal) 10%, transparent) 0%,
        transparent 70%
    );
}

.card-image-fallback .material-symbols-outlined[b-u23r4s6b72] {
    font-size: 4rem;
    color: var(--m-text-disabled);
}

/* ---- Rarity badge ---- */
.card-badge[b-u23r4s6b72] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 10px;
    font-family: var(--d-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.card-badge.rare[b-u23r4s6b72] {
    background-color: color-mix(in srgb, var(--m-accent) 10%, transparent);
    color: var(--m-accent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
}

.card-badge.unique[b-u23r4s6b72] {
    background-color: color-mix(in srgb, var(--m-teal) 10%, transparent);
    color: var(--m-teal);
    border: 1px solid color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.card-badge.common[b-u23r4s6b72] {
    background-color: color-mix(in srgb, var(--m-surface) 10%, transparent);
    color: var(--m-text-2);
    border: 1px solid color-mix(in srgb, var(--m-surface) 30%, transparent);
}

/* ---- Content area ---- */
.card-content[b-u23r4s6b72] {
    padding: 1.5rem;
    position: relative;
    z-index: 20;
    margin-top: -5rem;
}

.card-id[b-u23r4s6b72] {
    font-family: var(--d-font-mono);
    font-size: 10px;
    color: var(--m-teal);
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.card-title[b-u23r4s6b72] {
    font-family: var(--d-font-serif);
    font-size: 1.5rem;
    color: var(--m-text);
    transition: color 0.3s;
    margin-top: 0;
    margin-bottom: 1rem;
}

.artifact-card:hover .card-title[b-u23r4s6b72] {
    color: var(--m-teal);
}

.card-footer[b-u23r4s6b72] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
    padding-top: 1rem;
}

.card-footer-meta[b-u23r4s6b72] {
    font-size: 0.75rem;
    font-family: var(--d-font-mono);
    color: var(--m-text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .artifact-card[b-u23r4s6b72] {
        min-height: 360px;
    }

    .card-title[b-u23r4s6b72] {
        font-size: 1.25rem;
    }

    .card-content[b-u23r4s6b72] {
        padding: 1rem;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .artifact-card[b-u23r4s6b72] {
        transition: none;
    }

    .artifact-card:hover[b-u23r4s6b72] {
        transform: none;
    }

    .card-image[b-u23r4s6b72] {
        transition: none;
    }

    .artifact-card:hover .card-image[b-u23r4s6b72] {
        transform: none;
    }

    .shimmer-effect[b-u23r4s6b72]::after {
        transition: none;
    }

    .card-title[b-u23r4s6b72] {
        transition: none;
    }
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .artifact-card[b-u23r4s6b72] {
    background: color-mix(in srgb, var(--m-card) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 12%, transparent);
    box-shadow: 0 4px 16px 0 color-mix(in srgb, var(--m-accent) 6%, transparent);
    backdrop-filter: blur(12px);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .artifact-card:hover[b-u23r4s6b72] {
    box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--m-accent) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .artifact-card.active[b-u23r4s6b72] {
    box-shadow: 0 0 32px color-mix(in srgb, var(--m-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-accent) 35%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .shimmer-effect[b-u23r4s6b72]::after {
    background: linear-gradient(45deg, transparent 45%, color-mix(in srgb, var(--m-accent) 12%, transparent) 50%, transparent 55%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card-gradient-overlay[b-u23r4s6b72] {
    background: linear-gradient(to top, var(--m-bg), transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card-id[b-u23r4s6b72] {
    color: color-mix(in srgb, var(--m-accent) 80%, var(--m-bg) 20%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .artifact-card:hover .card-title[b-u23r4s6b72] {
    color: color-mix(in srgb, var(--m-accent) 80%, var(--m-bg) 20%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card-footer[b-u23r4s6b72] {
    border-top-color: color-mix(in srgb, var(--m-accent) 12%, transparent);
}
/* /Components/Vault/AxisBadgeGroup.razor.rz.scp.css */
.axis-group[b-wr27gxibbp] {
    margin-bottom: 2rem;
}

.axis-header[b-wr27gxibbp] {
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--axis-color) 8%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--axis-color) 20%, transparent);
    border-radius: 12px 12px 0 0;
}

.axis-title-row[b-wr27gxibbp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.axis-icon[b-wr27gxibbp] {
    font-size: 1.25rem;
    color: var(--axis-color);
}

.axis-name[b-wr27gxibbp] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--m-text);
    flex: 1;
}

.axis-level[b-wr27gxibbp] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--axis-color);
    background: color-mix(in srgb, var(--axis-color) 15%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Progress bar */
.axis-progress-row[b-wr27gxibbp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.axis-progress-track[b-wr27gxibbp] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--axis-color) 15%, transparent);
    overflow: hidden;
}

.axis-progress-fill[b-wr27gxibbp] {
    height: 100%;
    border-radius: 3px;
    background: var(--axis-color);
    transition: width 0.6s ease-out;
    min-width: 0;
}

.axis-score[b-wr27gxibbp] {
    font-size: 0.75rem;
    color: var(--m-text-2);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

/* Badge grid */
.axis-badges[b-wr27gxibbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--m-card, #1e1e2e);
    border: 1px solid var(--m-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.axis-empty[b-wr27gxibbp] {
    color: var(--m-text-2);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
    padding: 1rem 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .axis-progress-fill[b-wr27gxibbp] {
        transition: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .axis-header[b-wr27gxibbp] {
        padding: 0.75rem 1rem;
    }

    .axis-badges[b-wr27gxibbp] {
        padding: 1rem;
        gap: 0.5rem;
        justify-content: center;
    }
}

/* Light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .axis-header[b-wr27gxibbp] {
    background: color-mix(in srgb, var(--axis-color) 6%, var(--m-card, #ffffff));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .axis-badges[b-wr27gxibbp] {
    background: var(--m-card, #ffffff);
}
/* /Components/Vault/BadgeCard.razor.rz.scp.css */
.badge-card[b-3y2nn28kgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border-radius: 12px;
    background: var(--m-card, #1e1e2e);
    border: 1px solid var(--m-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: center;
    min-width: 110px;
    max-width: 140px;
    cursor: pointer;
}

.badge-card:focus-visible[b-3y2nn28kgt] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Selected state — ring highlight */
.badge-selected[b-3y2nn28kgt] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-primary) 30%, transparent),
                0 4px 16px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.badge-selected.badge-earned[b-3y2nn28kgt] {
    border-color: var(--m-accent, #f6c453);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent, #f6c453) 30%, transparent),
                0 4px 16px color-mix(in srgb, var(--m-accent, #f6c453) 15%, transparent);
}

/* Earned state — gold glow + shimmer sweep */
.badge-earned[b-3y2nn28kgt] {
    border-color: color-mix(in srgb, var(--m-accent, #f6c453) 40%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--m-accent, #f6c453) 10%, transparent);
    position: relative;
    overflow: hidden;
}

.badge-earned[b-3y2nn28kgt]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        color-mix(in srgb, var(--m-accent, #f6c453) 12%, transparent) 45%,
        color-mix(in srgb, var(--m-accent, #f6c453) 18%, transparent) 50%,
        color-mix(in srgb, var(--m-accent, #f6c453) 12%, transparent) 55%,
        transparent 60%
    );
    animation: badge-shimmer-b-3y2nn28kgt 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badge-shimmer-b-3y2nn28kgt {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(350%); }
}

.badge-earned:hover[b-3y2nn28kgt] {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-accent, #f6c453) 20%, transparent);
}

/* Locked state */
.badge-locked[b-3y2nn28kgt] {
    opacity: 0.5;
    filter: grayscale(0.6);
}

.badge-locked:hover[b-3y2nn28kgt] {
    opacity: 0.7;
    filter: grayscale(0.3);
}

/* Badge visual */
.badge-visual[b-3y2nn28kgt] {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-icon-img[b-3y2nn28kgt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.badge-icon-fallback[b-3y2nn28kgt] {
    font-size: 2rem;
    color: var(--m-accent, #f6c453);
}

.badge-locked .badge-icon-fallback[b-3y2nn28kgt] {
    color: var(--m-text-2);
}

/* Tier label */
.badge-tier[b-3y2nn28kgt] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--m-card);
    border: 1px solid;
}

.badge-tier-bronze[b-3y2nn28kgt] { color: var(--m-tier-bronze); border-color: var(--m-tier-bronze); }
.badge-tier-silver[b-3y2nn28kgt] { color: var(--m-tier-silver); border-color: var(--m-tier-silver); }
.badge-tier-gold[b-3y2nn28kgt] { color: var(--m-tier-gold); border-color: var(--m-tier-gold); }
.badge-tier-platinum[b-3y2nn28kgt] { color: var(--m-tier-platinum); border-color: var(--m-tier-platinum); }
.badge-tier-diamond[b-3y2nn28kgt] { color: var(--m-tier-diamond); border-color: var(--m-tier-diamond); }

/* Info text */
.badge-name[b-3y2nn28kgt] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge-earned-date[b-3y2nn28kgt] {
    font-size: 0.7rem;
    color: var(--m-text-2);
}

.badge-hint[b-3y2nn28kgt] {
    font-size: 0.7rem;
    color: var(--m-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .badge-card[b-3y2nn28kgt] {
        transition: none;
    }
    .badge-earned:hover[b-3y2nn28kgt],
    .badge-locked:hover[b-3y2nn28kgt] {
        transform: none;
    }
    .badge-earned[b-3y2nn28kgt]::after {
        animation: none;
        display: none;
    }
}

/* Light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .badge-locked[b-3y2nn28kgt] {
    opacity: 0.45;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .badge-tier[b-3y2nn28kgt] {
    background: var(--m-card, #ffffff);
}
/* /Components/Vault/BadgeShowcase.razor.rz.scp.css */
/* BadgeShowcase — center-stage display case for a featured badge/artifact */

/* ================================================================
   Compact mode — inline detail strip for master-detail pattern
   ================================================================ */

.showcase-compact[b-h70xldgh5f] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--showcase-accent) 5%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--showcase-accent) 20%, transparent);
    position: relative;
    animation: showcase-expand-b-h70xldgh5f 0.25s ease-out both;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

@keyframes showcase-expand-b-h70xldgh5f {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 300px; }
}

.showcase-close[b-h70xldgh5f] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.showcase-close .material-symbols-outlined[b-h70xldgh5f] { font-size: 1rem; }

.showcase-close:hover[b-h70xldgh5f] {
    background: color-mix(in srgb, var(--showcase-accent) 15%, transparent);
    color: var(--showcase-accent);
}

.showcase-close:focus-visible[b-h70xldgh5f] {
    outline: 2px solid var(--showcase-accent);
    outline-offset: 2px;
}

.showcase-compact-visual[b-h70xldgh5f] {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--showcase-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--showcase-accent) 25%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--showcase-accent) 10%, transparent);
}

.showcase-compact-img[b-h70xldgh5f] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--showcase-accent) 30%, transparent));
}

.showcase-compact-fallback .material-symbols-outlined[b-h70xldgh5f] {
    font-size: 2.5rem;
    color: var(--showcase-accent);
}

.showcase-compact-tier[b-h70xldgh5f] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--m-card);
    border: 1px solid var(--showcase-accent);
    color: var(--showcase-accent);
}

.showcase-compact-info[b-h70xldgh5f] {
    flex: 1;
    min-width: 0;
    padding-right: 1.5rem;
}

.showcase-compact-name[b-h70xldgh5f] {
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0 0 0.25rem;
}

.showcase-compact-subtitle[b-h70xldgh5f] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--showcase-accent);
}

.showcase-compact-desc[b-h70xldgh5f] {
    font-size: 0.85rem;
    color: var(--m-text-2);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.showcase-compact-meta[b-h70xldgh5f] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.showcase-compact-meta .material-symbols-outlined[b-h70xldgh5f] {
    font-size: 0.875rem;
    color: var(--showcase-accent);
}

/* Compact light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .showcase-compact[b-h70xldgh5f] {
    background: color-mix(in srgb, var(--showcase-accent) 4%, var(--m-card));
    border-color: color-mix(in srgb, var(--showcase-accent) 15%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .showcase-compact-tier[b-h70xldgh5f] {
    background: var(--m-card);
}

/* Compact reduced motion */
@media (prefers-reduced-motion: reduce) {
    .showcase-compact[b-h70xldgh5f] { animation: none; }
}

/* Compact mobile */
@media (max-width: 576px) {
    .showcase-compact[b-h70xldgh5f] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
    }

    .showcase-compact-info[b-h70xldgh5f] {
        padding-right: 0;
    }
}

/* ================================================================
   Full mode — center-stage with floating orbs and plinth
   ================================================================ */

.showcase[b-h70xldgh5f] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.5rem;
    min-height: 600px;
}

/* ---- Stage header ---- */
.stage-header[b-h70xldgh5f] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 10;
}

.stage-title[b-h70xldgh5f] {
    font-family: var(--d-font-serif);
    font-size: 1.875rem;
    color: var(--m-text);
    margin: 0;
}

.stage-controls[b-h70xldgh5f] {
    display: flex;
    gap: 0.5rem;
}

.icon-btn[b-h70xldgh5f] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--showcase-accent) 40%, transparent);
    background-color: color-mix(in srgb, var(--d-bg) 80%, transparent);
    color: var(--m-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.icon-btn:hover[b-h70xldgh5f] {
    background-color: var(--showcase-accent);
    color: var(--m-on-primary);
}

.icon-btn:focus-visible[b-h70xldgh5f] {
    outline: 2px solid var(--showcase-accent);
    outline-offset: 2px;
}

/* ---- Floating orbs ---- */
.floating-orb[b-h70xldgh5f] {
    position: absolute;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    z-index: 30;
    filter: drop-shadow(0 0 8px var(--showcase-accent));
    animation: float-b-h70xldgh5f 6s ease-in-out infinite;
}

@keyframes float-b-h70xldgh5f {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.orb-1[b-h70xldgh5f] {
    top: 25%;
    left: 25%;
    width: 4rem;
    height: 4rem;
    border: 1px solid color-mix(in srgb, var(--showcase-accent) 50%, transparent);
    background-color: color-mix(in srgb, var(--showcase-accent) 20%, transparent);
}

.orb-1 .material-symbols-outlined[b-h70xldgh5f] { font-size: 1.25rem; color: var(--showcase-accent); }

.orb-2[b-h70xldgh5f] {
    top: 33%;
    right: 25%;
    width: 5rem;
    height: 5rem;
    border: 1px solid color-mix(in srgb, var(--m-accent) 50%, transparent);
    background-color: color-mix(in srgb, var(--m-accent) 10%, transparent);
    animation-delay: -2s;
}

.orb-2 .material-symbols-outlined[b-h70xldgh5f] { font-size: 1.5rem; color: var(--m-accent); }

.orb-3[b-h70xldgh5f] {
    bottom: 50%;
    left: 33%;
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--m-surface) 30%, transparent);
    background-color: color-mix(in srgb, var(--m-surface) 10%, transparent);
    animation-delay: -4s;
}

.orb-3 .material-symbols-outlined[b-h70xldgh5f] { font-size: 1rem; color: var(--m-text-2); }

/* ---- Stage presentation ---- */
.stage-presentation[b-h70xldgh5f] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -3rem;
}

.stage-artifact-container[b-h70xldgh5f] {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stage-artifact[b-h70xldgh5f] {
    width: 450px;
    height: 580px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.5s;
    filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--showcase-accent) 40%, transparent));
    cursor: grab;
}

.stage-artifact:hover[b-h70xldgh5f] {
    transform: scale(1.05);
}

.stage-artifact-fallback[b-h70xldgh5f] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--showcase-accent) 15%, transparent) 0%,
        transparent 70%
    );
}

.stage-artifact-fallback .material-symbols-outlined[b-h70xldgh5f] {
    font-size: 8rem;
    color: var(--showcase-accent);
    opacity: 0.6;
}

/* ---- Plinth ---- */
.plinth-container[b-h70xldgh5f] {
    position: relative;
    width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -4rem;
}

.plinth-top-surface[b-h70xldgh5f] {
    width: 100%;
    height: 3rem;
    background-color: var(--d-surface);
    border-left: 1px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
    clip-path: ellipse(50% 50% at 50% 50%);
    position: relative;
    z-index: 10;
}

.plinth-glow[b-h70xldgh5f] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--m-accent) 20%, transparent),
        transparent,
        transparent
    );
    opacity: 0.5;
}

.plinth-base[b-h70xldgh5f] {
    width: 480px;
    height: 5rem;
    background: linear-gradient(to bottom, var(--d-surface), black);
    border-left: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    border-radius: 0 0 1.5rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.plinth-base[b-h70xldgh5f]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--showcase-accent) 5%, transparent);
}

.plinth-trim[b-h70xldgh5f] {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: color-mix(in srgb, var(--m-accent) 50%, transparent);
}

.plinth-controls[b-h70xldgh5f] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    color: color-mix(in srgb, var(--m-accent) 40%, transparent);
}

.plinth-labels[b-h70xldgh5f] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.primary-label[b-h70xldgh5f] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 900;
    color: color-mix(in srgb, var(--m-accent) 80%, transparent);
}

.secondary-label[b-h70xldgh5f] {
    font-size: 8px;
    margin-top: 0.25rem;
    color: var(--m-text-2);
}

.plinth-floor-shadow[b-h70xldgh5f] {
    position: absolute;
    bottom: -2.5rem;
    width: 550px;
    height: 5rem;
    background-color: color-mix(in srgb, var(--m-accent) 5%, transparent);
    filter: blur(60px);
    border-radius: 50%;
    z-index: -10;
}

/* ---- Animation: blink ---- */
.blink[b-h70xldgh5f] {
    animation: pulse-b-h70xldgh5f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-b-h70xldgh5f {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .floating-orb[b-h70xldgh5f] { animation: none; }
    .blink[b-h70xldgh5f] { animation: none; }
    .stage-artifact[b-h70xldgh5f] { transition: none; }
    .stage-artifact:hover[b-h70xldgh5f] { transform: none; }
    .icon-btn[b-h70xldgh5f] { transition: none; }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .showcase[b-h70xldgh5f] {
        min-height: 400px;
    }

    .stage-artifact[b-h70xldgh5f] {
        width: 280px;
        height: 360px;
    }

    .plinth-container[b-h70xldgh5f],
    .plinth-base[b-h70xldgh5f] {
        width: 300px;
    }

    .floating-orb[b-h70xldgh5f] {
        display: none;
    }

    .stage-title[b-h70xldgh5f] {
        font-size: 1.4rem;
    }
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .floating-orb[b-h70xldgh5f] {
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--showcase-accent) 30%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .orb-1[b-h70xldgh5f] {
    border-color: color-mix(in srgb, var(--showcase-accent) 35%, transparent);
    background-color: color-mix(in srgb, var(--showcase-accent) 8%, color-mix(in srgb, var(--m-on-primary) 50%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .orb-2[b-h70xldgh5f] {
    border-color: color-mix(in srgb, var(--m-teal) 35%, transparent);
    background-color: color-mix(in srgb, var(--m-teal) 8%, color-mix(in srgb, var(--m-on-primary) 50%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .orb-3[b-h70xldgh5f] {
    border-color: color-mix(in srgb, var(--showcase-accent) 25%, color-mix(in srgb, var(--m-border) 30%, transparent));
    background-color: color-mix(in srgb, var(--showcase-accent) 5%, color-mix(in srgb, var(--m-on-primary) 40%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-top-surface[b-h70xldgh5f] {
    background-color: color-mix(in srgb, var(--m-surface) 80%, var(--showcase-accent) 20%);
    border-color: color-mix(in srgb, var(--m-teal) 30%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-glow[b-h70xldgh5f] {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--m-teal) 15%, transparent),
        transparent,
        transparent
    );
    opacity: 0.7;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-base[b-h70xldgh5f] {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--m-surface) 80%, var(--showcase-accent) 20%),
        color-mix(in srgb, var(--m-surface) 60%, var(--showcase-accent) 40%));
    border-color: color-mix(in srgb, var(--m-teal) 20%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-base[b-h70xldgh5f]::before {
    background-color: color-mix(in srgb, var(--showcase-accent) 4%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-trim[b-h70xldgh5f] {
    background-color: color-mix(in srgb, var(--m-teal) 40%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-controls[b-h70xldgh5f] {
    color: color-mix(in srgb, var(--m-teal) 50%, var(--m-text-2));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .primary-label[b-h70xldgh5f] {
    color: color-mix(in srgb, var(--m-teal) 80%, var(--m-text-2));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .plinth-floor-shadow[b-h70xldgh5f] {
    background-color: color-mix(in srgb, var(--showcase-accent) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .stage-artifact[b-h70xldgh5f] {
    filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--showcase-accent) 20%, transparent));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .icon-btn[b-h70xldgh5f] {
    background-color: color-mix(in srgb, var(--m-card) 60%, transparent);
    border-color: color-mix(in srgb, var(--showcase-accent) 20%, transparent);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .icon-btn:hover[b-h70xldgh5f] {
    background-color: var(--m-teal);
    color: var(--m-on-primary);
}
/* /Components/Vault/ComingSoonOverlay.razor.rz.scp.css */
/* =====================================================
   ComingSoonOverlay — shared dismissible overlay
   Uses --d-* cosmos tokens from app.css and --m-* Dragon Scale tokens.
   Accent color defaults to --d-teal; parent can override via
   --cs-accent custom property.
   ===================================================== */

.cs-overlay[b-obxnsq6sdw] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-bg) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
    animation: overlay-fade-in-b-obxnsq6sdw 0.35s ease-out both;
}

@keyframes overlay-fade-in-b-obxnsq6sdw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Peek button — top-right corner of the overlay */
.cs-peek-btn[b-obxnsq6sdw] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.875rem;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--m-border) 50%, transparent);
    background: color-mix(in srgb, var(--m-surface) 50%, transparent);
    color: var(--m-text-2);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cs-peek-btn .material-symbols-outlined[b-obxnsq6sdw] { font-size: 16px; }

.cs-peek-btn:hover[b-obxnsq6sdw] {
    background: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 12%, var(--m-surface));
    border-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 40%, transparent);
    color: var(--cs-accent, var(--d-teal));
}

.cs-peek-btn:focus-visible[b-obxnsq6sdw] {
    outline: 2px solid var(--cs-accent, var(--d-teal));
    outline-offset: 2px;
}

/* Restore button shown when overlay is dismissed */
.cs-restore-btn[b-obxnsq6sdw] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.875rem;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--cs-accent, var(--d-teal)) 35%, transparent);
    background: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 8%, transparent);
    color: var(--cs-accent, var(--d-teal));
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    z-index: 5;
}

.cs-restore-btn .material-symbols-outlined[b-obxnsq6sdw] { font-size: 16px; }

.cs-restore-btn:hover[b-obxnsq6sdw] {
    background: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 18%, transparent);
    border-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 55%, transparent);
}

.cs-restore-btn:focus-visible[b-obxnsq6sdw] {
    outline: 2px solid var(--cs-accent, var(--d-teal));
    outline-offset: 2px;
}

/* Content wrapper */
.cs-content[b-obxnsq6sdw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 4rem 2rem;
    gap: 1.25rem;
    text-align: center;
    position: relative;
}

/* Sparkles balance badge */
.cs-balance[b-obxnsq6sdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 1rem;
    border-radius: 99px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cs-accent, var(--d-teal));
    background-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-accent, var(--d-teal)) 25%, transparent);
    margin-bottom: 0.25rem;
}

.cs-balance .material-symbols-outlined[b-obxnsq6sdw] {
    font-size: 16px;
}

/* ---- Orb ---- */
.coming-soon-orb[b-obxnsq6sdw] {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 0.5rem;
}

.orb-ring[b-obxnsq6sdw] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    animation: orb-spin-b-obxnsq6sdw 8s linear infinite;
}

.orb-ring-1[b-obxnsq6sdw] {
    border-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 40%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--cs-accent, var(--d-teal)) 20%, transparent);
}

.orb-ring-2[b-obxnsq6sdw] {
    inset: 18px;
    border-color: color-mix(in srgb, var(--d-gold) 30%, transparent);
    animation-direction: reverse;
    animation-duration: 12s;
}

.orb-ring-3[b-obxnsq6sdw] {
    inset: -16px;
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    animation: orb-spin-b-obxnsq6sdw 20s linear infinite;
    border-style: dashed;
}

.orb-core[b-obxnsq6sdw] {
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 40% 35%,
        color-mix(in srgb, var(--d-primary) 60%, transparent) 0%,
        color-mix(in srgb, var(--d-surface) 90%, transparent) 100%
    );
    box-shadow:
        0 0 24px var(--d-glow-main),
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-accent, var(--d-teal));
    font-size: 36px;
    animation: orb-core-pulse-b-obxnsq6sdw 3s ease-in-out infinite;
}

@keyframes orb-core-pulse-b-obxnsq6sdw {
    0%, 100% { box-shadow: 0 0 24px var(--d-glow-main), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent); }
    50%       { box-shadow: 0 0 40px var(--d-glow-main), 0 0 16px var(--d-glow-teal), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent); }
}

@keyframes orb-spin-b-obxnsq6sdw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Label, heading, lore ---- */
.coming-soon-label[b-obxnsq6sdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.875rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-accent, var(--d-teal));
    background-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-accent, var(--d-teal)) 25%, transparent);
}

.coming-soon-heading[b-obxnsq6sdw] {
    font-family: var(--d-font-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
    line-height: 1.15;
}

.coming-soon-lore[b-obxnsq6sdw] {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--m-text-2);
    max-width: 480px;
    margin: 0;
}

/* ---- CTA buttons ---- */
.coming-soon-cta[b-obxnsq6sdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cs-accent, var(--d-teal));
    border: 1px solid color-mix(in srgb, var(--cs-accent, var(--d-teal)) 35%, transparent);
    background-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 8%, transparent);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    margin-top: 0.5rem;
}

.coming-soon-cta:hover[b-obxnsq6sdw] {
    background-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 18%, transparent);
    border-color: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 55%, transparent);
    color: var(--cs-accent, var(--d-teal));
}

.coming-soon-cta:focus-visible[b-obxnsq6sdw] {
    outline: 2px solid var(--cs-accent, var(--d-teal));
    outline-offset: 2px;
}

.coming-soon-cta .material-symbols-outlined[b-obxnsq6sdw] {
    font-size: 18px;
}

/* ---- Feature pills ---- */
.coming-soon-features[b-obxnsq6sdw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.feature-pill[b-obxnsq6sdw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--cs-accent, var(--d-teal)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-accent, var(--d-teal)) 20%, transparent);
    transition: background 0.2s, color 0.2s;
}

.feature-pill .material-symbols-outlined[b-obxnsq6sdw] { font-size: 15px; color: var(--cs-accent, var(--d-teal)); }

/* ---- Dual CTA row ---- */
.coming-soon-cta-row[b-obxnsq6sdw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.coming-soon-cta-secondary[b-obxnsq6sdw] {
    color: var(--m-text-2);
    border-color: color-mix(in srgb, var(--m-border) 50%, transparent);
    background-color: color-mix(in srgb, var(--m-surface) 30%, transparent);
}

.coming-soon-cta-secondary:hover[b-obxnsq6sdw] {
    color: var(--m-text);
    background-color: color-mix(in srgb, var(--m-surface) 60%, transparent);
    border-color: var(--m-border);
}

/* ---- Cosmos floating particles ---- */
.cosmos-particles[b-obxnsq6sdw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle[b-obxnsq6sdw] {
    position: absolute;
    border-radius: 50%;
    background: var(--cs-accent, var(--d-teal));
    opacity: 0.6;
    animation: float-particle-b-obxnsq6sdw linear infinite;
}

.p1[b-obxnsq6sdw] { width: 4px; height: 4px; left: 15%; top: 20%; animation-duration: 12s; animation-delay: 0s; }
.p2[b-obxnsq6sdw] { width: 3px; height: 3px; left: 70%; top: 15%; animation-duration: 16s; animation-delay: -4s; background: var(--d-gold); }
.p3[b-obxnsq6sdw] { width: 5px; height: 5px; left: 85%; top: 55%; animation-duration: 10s; animation-delay: -2s; }
.p4[b-obxnsq6sdw] { width: 3px; height: 3px; left: 25%; top: 75%; animation-duration: 14s; animation-delay: -6s; background: var(--m-primary); }
.p5[b-obxnsq6sdw] { width: 4px; height: 4px; left: 55%; top: 80%; animation-duration: 11s; animation-delay: -1s; background: var(--d-gold); }
.p6[b-obxnsq6sdw] { width: 2px; height: 2px; left: 40%; top: 35%; animation-duration: 18s; animation-delay: -8s; }

@keyframes float-particle-b-obxnsq6sdw {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-80px) translateX(20px); opacity: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .cosmos-particles .particle[b-obxnsq6sdw] { animation: none; display: none; }
    .orb-ring[b-obxnsq6sdw] { animation: none; }
    .coming-soon-orb[b-obxnsq6sdw] { animation: none; }
    .cs-overlay[b-obxnsq6sdw] { animation: none; }
}
/* /Components/Vault/ConstellationBackground.razor.rz.scp.css */
/* ConstellationBackground — subtle animated star pattern */

.constellation-bg[b-4tg02cxbfl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Twinkle animation on individual stars */
.star[b-4tg02cxbfl] {
    animation: twinkle-b-4tg02cxbfl 5s ease-in-out infinite;
}

.s1[b-4tg02cxbfl]  { animation-delay: 0s; }
.s2[b-4tg02cxbfl]  { animation-delay: -0.8s; }
.s3[b-4tg02cxbfl]  { animation-delay: -1.6s; }
.s4[b-4tg02cxbfl]  { animation-delay: -2.4s; }
.s5[b-4tg02cxbfl]  { animation-delay: -3.2s; }
.s6[b-4tg02cxbfl]  { animation-delay: -0.4s; }
.s7[b-4tg02cxbfl]  { animation-delay: -1.2s; }
.s8[b-4tg02cxbfl]  { animation-delay: -2.0s; }
.s9[b-4tg02cxbfl]  { animation-delay: -2.8s; }
.s10[b-4tg02cxbfl] { animation-delay: -3.6s; }
.s11[b-4tg02cxbfl] { animation-delay: -4.4s; }
.s12[b-4tg02cxbfl] { animation-delay: -0.6s; }

@keyframes twinkle-b-4tg02cxbfl {
    0%, 100% { opacity: var(--star-base-opacity, 0.25); }
    50%      { opacity: calc(var(--star-base-opacity, 0.25) + 0.25); }
}

/* Accent star pulse — slightly larger, slower */
.accent-star[b-4tg02cxbfl] {
    animation: accent-pulse-b-4tg02cxbfl 6s ease-in-out infinite;
}

.a1[b-4tg02cxbfl] { animation-delay: 0s; }
.a2[b-4tg02cxbfl] { animation-delay: -2s; }
.a3[b-4tg02cxbfl] { animation-delay: -4s; }

@keyframes accent-pulse-b-4tg02cxbfl {
    0%, 100% { opacity: 0.3; transform-origin: center; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.3); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .star[b-4tg02cxbfl],
    .accent-star[b-4tg02cxbfl] {
        animation: none;
    }
}

/* Light theme: more subtle */
:is(html[data-theme="light"], html[data-theme="bright"]) .constellation-bg[b-4tg02cxbfl] {
    opacity: 0.3;
}
/* /Components/Vault/EchoCard.razor.rz.scp.css */
.echo-card[b-g9811j8zf8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--m-card, #1e1e2e);
    border: 1px solid var(--m-border);
    text-align: center;
    min-width: 90px;
    max-width: 110px;
    transition: transform 0.2s ease;
}

.echo-card:hover[b-g9811j8zf8] {
    transform: translateY(-2px);
}

.echo-selected[b-g9811j8zf8] {
    border-color: var(--m-teal, #4ed7c8);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-teal, #4ed7c8) 30%, transparent);
}

/* Rarity glow */
.echo-rarity-common[b-g9811j8zf8] { border-color: var(--m-border); }
.echo-rarity-uncommon[b-g9811j8zf8] { border-color: color-mix(in srgb, var(--m-teal, #4ed7c8) 40%, transparent); }
.echo-rarity-rare[b-g9811j8zf8] { border-color: color-mix(in srgb, var(--m-primary, #5b3cc4) 50%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--m-primary) 10%, transparent); }
.echo-rarity-epic[b-g9811j8zf8] {
    border-color: color-mix(in srgb, var(--m-accent, #f6c453) 50%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-accent) 12%, transparent);
    animation: echo-glow-epic-b-g9811j8zf8 3s ease-in-out infinite;
}
.echo-rarity-legendary[b-g9811j8zf8] {
    border-color: color-mix(in srgb, var(--m-rarity-legendary) 50%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--m-rarity-legendary) 15%, transparent);
    animation: echo-glow-legendary-b-g9811j8zf8 2.5s ease-in-out infinite;
}

@keyframes echo-glow-epic-b-g9811j8zf8 {
    0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--m-accent) 12%, transparent); }
    50%      { box-shadow: 0 0 18px color-mix(in srgb, var(--m-accent) 22%, transparent), 0 0 4px color-mix(in srgb, var(--m-accent) 8%, transparent) inset; }
}

@keyframes echo-glow-legendary-b-g9811j8zf8 {
    0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--m-rarity-legendary) 15%, transparent); }
    50%      { box-shadow: 0 0 22px color-mix(in srgb, var(--m-rarity-legendary) 25%, transparent), 0 0 6px color-mix(in srgb, var(--m-rarity-legendary) 10%, transparent) inset; }
}

.echo-visual[b-g9811j8zf8] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.echo-icon-img[b-g9811j8zf8] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.echo-icon-fallback[b-g9811j8zf8] {
    font-size: 1.5rem;
    color: var(--m-teal, #4ed7c8);
}

.echo-name[b-g9811j8zf8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.echo-source[b-g9811j8zf8] {
    font-size: 0.65rem;
    color: var(--m-text-2);
    font-style: italic;
}

/* Focus (for future interactivity) */
.echo-card:focus-visible[b-g9811j8zf8] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .echo-card[b-g9811j8zf8] { transition: none; }
    .echo-card:hover[b-g9811j8zf8] { transform: none; }
    .echo-rarity-epic[b-g9811j8zf8],
    .echo-rarity-legendary[b-g9811j8zf8] { animation: none; }
}
/* /Components/Vault/FeatureStageBanner.razor.rz.scp.css */
/* FeatureStageBanner — lifecycle indicator for vault features */

/* ================================================================
   Stage 2: PREVIEW — prominent top banner
   ================================================================ */

.fsb-banner[b-3s0b10htgg] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.fsb-preview[b-3s0b10htgg] {
    background: color-mix(in srgb, var(--m-warning) 8%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--m-warning) 25%, transparent);
}

.fsb-accent-stripe[b-3s0b10htgg] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--m-warning);
    border-radius: 10px 0 0 10px;
}

.fsb-banner-content[b-3s0b10htgg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
}

.fsb-banner-icon[b-3s0b10htgg] {
    font-size: 1.25rem;
    color: var(--m-warning);
    flex-shrink: 0;
}

.fsb-banner-text[b-3s0b10htgg] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fsb-stage-label[b-3s0b10htgg] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-warning);
    white-space: nowrap;
}

.fsb-stage-desc[b-3s0b10htgg] {
    font-size: 0.8125rem;
    color: var(--m-text-2);
    line-height: 1.4;
}

.fsb-dismiss[b-3s0b10htgg] {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    /* WCAG AA: full-strength text token for ≥4.5:1 against warning-tinted card */
    color: var(--m-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.fsb-dismiss .material-symbols-outlined[b-3s0b10htgg] {
    font-size: 1rem;
    /* Explicit colour so the glyph cannot inherit a low-contrast colour
       from an outer container; matches the button's text token. */
    color: var(--m-text);
}

.fsb-dismiss:hover[b-3s0b10htgg] {
    background: color-mix(in srgb, var(--m-warning) 15%, transparent);
    /* Keep the icon at full-strength text on hover — warning-on-warning
       tint risks dropping below 4.5:1 in both themes. */
    color: var(--m-text);
}

.fsb-dismiss:hover .material-symbols-outlined[b-3s0b10htgg] {
    color: var(--m-text);
}

.fsb-dismiss:focus-visible[b-3s0b10htgg] {
    /* Primary focus ring gives a clearly distinct, high-contrast indicator
       against the warning-tinted background. */
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ================================================================
   Stage 3: EARLY ACCESS — floating dismissible pill
   ================================================================ */

.fsb-pill[b-3s0b10htgg] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    animation: fsb-pill-enter-b-3s0b10htgg 0.3s ease-out both;
}

.fsb-early-access[b-3s0b10htgg] {
    background: color-mix(in srgb, var(--m-teal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-teal) 30%, transparent);
    color: var(--m-teal);
}

.fsb-pill-icon[b-3s0b10htgg] {
    font-size: 1rem;
}

.fsb-pill-text[b-3s0b10htgg] {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsb-pill-dismiss[b-3s0b10htgg] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    margin-left: 0.125rem;
}

.fsb-pill-dismiss .material-symbols-outlined[b-3s0b10htgg] {
    font-size: 0.875rem;
}

.fsb-pill-dismiss:hover[b-3s0b10htgg] {
    opacity: 1;
    background: color-mix(in srgb, var(--m-teal) 20%, transparent);
}

.fsb-pill-dismiss:focus-visible[b-3s0b10htgg] {
    outline: 2px solid var(--m-teal);
    outline-offset: 2px;
    opacity: 1;
}

@keyframes fsb-pill-enter-b-3s0b10htgg {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .fsb-preview[b-3s0b10htgg] {
    background: color-mix(in srgb, var(--m-warning) 6%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-warning) 20%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .fsb-early-access[b-3s0b10htgg] {
    background: color-mix(in srgb, var(--m-teal) 8%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-teal) 25%, transparent);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .fsb-pill[b-3s0b10htgg] {
        animation: none;
    }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .fsb-banner-content[b-3s0b10htgg] {
        padding: 0.625rem 0.75rem 0.625rem 1rem;
    }

    .fsb-banner-text[b-3s0b10htgg] {
        flex-direction: column;
        gap: 0.125rem;
    }
}
/* /Components/Vault/LockedBundlePreviewCard.razor.rz.scp.css */
/* LockedBundlePreviewCard — visual mirror of VaultBundleCard with a "locked" treatment.
   Tokens only (--m-*); no hardcoded colors. Greyscale via CSS filter on the cover image. */

.locked-preview-card[b-k4owkzwrl2] {
    display: flex;
    flex-direction: column;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    min-width: 0;
    position: relative;
}

.locked-preview-card:hover[b-k4owkzwrl2] {
    border-color: color-mix(in srgb, var(--m-primary) 35%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--m-primary) 14%, transparent);
}

.locked-preview-card:focus-visible[b-k4owkzwrl2] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Cover ---- */
.locked-cover[b-k4owkzwrl2] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
}

.locked-cover-img[b-k4owkzwrl2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Desaturated + slightly dim so the locked state reads instantly. */
    filter: grayscale(85%) brightness(0.6);
    transition: filter 0.3s ease;
}

.locked-preview-card:hover .locked-cover-img[b-k4owkzwrl2] {
    filter: grayscale(60%) brightness(0.75);
}

.locked-cover-fallback[b-k4owkzwrl2] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--m-text-2) 60%, transparent);
    background: color-mix(in srgb, var(--m-surface) 60%, transparent);
}

.locked-cover-fallback .material-symbols-outlined[b-k4owkzwrl2] {
    font-size: 2.5rem;
    opacity: 0.5;
}

/* ---- Lock overlay ---- */
.locked-overlay[b-k4owkzwrl2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-bg) 30%, transparent) 0%,
        color-mix(in srgb, var(--m-bg) 55%, transparent) 100%
    );
    pointer-events: none;
}

.locked-icon[b-k4owkzwrl2] {
    font-size: 2.25rem;
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-surface) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    border-radius: 999px;
    padding: 0.5rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-bg) 50%, transparent);
}

/* ---- Info ---- */
.locked-info[b-k4owkzwrl2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem 1rem;
    flex: 1;
}

.locked-title[b-k4owkzwrl2] {
    font-family: var(--d-font-serif, var(--m-font-display, inherit));
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
    line-height: 1.3;
    /* Two-line clamp keeps cards even-height in the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.locked-hint[b-k4owkzwrl2] {
    font-size: 0.825rem;
    color: var(--m-text-2);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.locked-meta[b-k4owkzwrl2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.locked-stories[b-k4owkzwrl2],
.locked-status[b-k4owkzwrl2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.locked-status[b-k4owkzwrl2] {
    color: color-mix(in srgb, var(--m-text-2) 85%, transparent);
    font-weight: 600;
    letter-spacing: 0;
    text-align: right;
}

.locked-meta-icon[b-k4owkzwrl2] {
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .locked-preview-card[b-k4owkzwrl2],
    .locked-cover-img[b-k4owkzwrl2] {
        transition: none;
    }

    .locked-preview-card:hover[b-k4owkzwrl2] {
        transform: none;
    }
}
/* /Components/Vault/MarketCard.razor.rz.scp.css */
/* MarketCard — Starlight Market item card */

.market-card[b-yrfgubmtww] {
    min-width: 320px;
    background-color: var(--d-bg);
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.market-card.hover-gold:hover[b-yrfgubmtww] {
    border-color: var(--m-accent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-accent) 10%, transparent);
}

.market-card.hover-teal:hover[b-yrfgubmtww] {
    border-color: var(--m-teal);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-teal) 10%, transparent);
}

.market-card:focus-visible[b-yrfgubmtww] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Pin ---- */
.card-pin[b-yrfgubmtww] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.card-pin .material-symbols-outlined[b-yrfgubmtww] {
    font-size: 1.125rem;
    font-variation-settings: "FILL" 1;
}

.text-gold[b-yrfgubmtww] {
    color: var(--m-accent);
}

/* ---- Content top ---- */
.card-content-top[b-yrfgubmtww] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.card-image[b-yrfgubmtww] {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--m-surface) 80%, var(--m-bg) 20%);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--m-border) 20%, transparent);
}

.card-image-fallback[b-yrfgubmtww] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image-fallback .material-symbols-outlined[b-yrfgubmtww] {
    font-size: 2rem;
    color: var(--m-text-disabled);
}

.card-info[b-yrfgubmtww] {
    flex: 1;
    min-width: 0;
}

.item-name[b-yrfgubmtww] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.item-cost[b-yrfgubmtww] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--m-accent);
    margin-top: 0.125rem;
}

.item-cost .material-symbols-outlined[b-yrfgubmtww] {
    font-size: 0.75rem;
}

.item-cost span:last-child[b-yrfgubmtww] {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ---- Lore text ---- */
.item-lore[b-yrfgubmtww] {
    font-size: 11px;
    line-height: 1.6;
    color: var(--m-text-2);
    margin: 0;
    padding: 0 0.25rem;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Preview button ---- */
.btn-preview[b-yrfgubmtww] {
    width: 100%;
    padding: 0.5rem 0;
    background-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 40%, transparent);
    border-radius: 0.5rem;
    font-size: 10px;
    font-weight: 700;
    color: var(--m-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background-color 0.2s;
    cursor: pointer;
}

.market-card:hover .btn-preview[b-yrfgubmtww] {
    background-color: var(--m-primary);
    color: var(--m-on-primary);
}

.btn-preview:focus-visible[b-yrfgubmtww] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .market-card[b-yrfgubmtww] {
        min-width: 260px;
        padding: 0.75rem;
    }

    .card-image[b-yrfgubmtww] {
        width: 4rem;
        height: 4rem;
    }
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .market-card[b-yrfgubmtww] {
    background-color: var(--m-on-primary);
    border-color: color-mix(in srgb, var(--m-primary) 12%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--m-primary) 6%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .market-card.hover-gold:hover[b-yrfgubmtww] {
    border-color: var(--m-teal);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .market-card.hover-teal:hover[b-yrfgubmtww] {
    border-color: var(--m-teal);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card-image[b-yrfgubmtww] {
    background-color: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .item-cost[b-yrfgubmtww] {
    color: var(--m-teal);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-preview[b-yrfgubmtww] {
    background-color: color-mix(in srgb, var(--m-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-teal) 25%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .market-card:hover .btn-preview[b-yrfgubmtww] {
    background-color: var(--m-teal);
    color: var(--m-on-primary);
}

@media (prefers-reduced-motion: reduce) {
    .market-card[b-yrfgubmtww] {
        transition: none;
    }

    .btn-preview[b-yrfgubmtww] {
        transition: none;
    }
}
/* /Components/Vault/ProfileSwitcherBanner.razor.rz.scp.css */
/* ProfileSwitcherBanner — active-profile indicator + switcher for vault pages */

.psb-banner[b-zw1wn4km9f] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    /* Horizontal margin matches the vault subnav's 2rem inset so the banner
       sits in the same content gutter when placed directly under the global
       app header. Vertical margins give a little breathing room above the
       subnav rail / section content below. */
    margin: 0.75rem 2rem 0.5rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* ---- Current profile chunk ---- */

.psb-current[b-zw1wn4km9f] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}

.psb-avatar[b-zw1wn4km9f] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-primary) 18%, transparent);
    color: var(--m-primary);
    flex-shrink: 0;
}

.psb-avatar-img[b-zw1wn4km9f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psb-avatar-placeholder[b-zw1wn4km9f] {
    font-size: 1.5rem;
}

.psb-text[b-zw1wn4km9f] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.psb-label[b-zw1wn4km9f] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-text-2);
}

.psb-name[b-zw1wn4km9f] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--m-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.psb-age[b-zw1wn4km9f] {
    font-size: 0.8125rem;
    color: var(--m-text-2);
}

/* ---- Switch button ---- */

.psb-actions[b-zw1wn4km9f] {
    position: relative;
    flex-shrink: 0;
}

.psb-switch[b-zw1wn4km9f] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    background: transparent;
    color: var(--m-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.psb-switch:hover[b-zw1wn4km9f] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 55%, transparent);
}

.psb-switch:focus-visible[b-zw1wn4km9f] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.psb-switch .material-symbols-outlined[b-zw1wn4km9f] {
    font-size: 1.125rem;
    color: var(--m-primary);
}

.psb-chevron[b-zw1wn4km9f] {
    transition: transform 0.2s ease;
}

/* ---- Dropdown ---- */

.psb-backdrop[b-zw1wn4km9f] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.psb-menu[b-zw1wn4km9f] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 16rem;
    max-width: 22rem;
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    border-radius: 10px;
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border, rgba(255,255,255,0.08)));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    z-index: 50;
    animation: psb-menu-enter-b-zw1wn4km9f 0.15s ease-out both;
}

.psb-menu li[b-zw1wn4km9f] {
    margin: 0;
}

.psb-menu-item[b-zw1wn4km9f] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--m-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.psb-menu-item:hover[b-zw1wn4km9f],
.psb-menu-item:focus-visible[b-zw1wn4km9f] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    outline: none;
}

.psb-menu-item.is-active[b-zw1wn4km9f] {
    background: color-mix(in srgb, var(--m-primary) 18%, transparent);
}

.psb-menu-avatar[b-zw1wn4km9f] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--m-primary) 18%, transparent);
    color: var(--m-primary);
    flex-shrink: 0;
}

.psb-menu-avatar-img[b-zw1wn4km9f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psb-menu-avatar .material-symbols-outlined[b-zw1wn4km9f] {
    font-size: 1.375rem;
}

.psb-menu-text[b-zw1wn4km9f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.psb-menu-name[b-zw1wn4km9f] {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psb-menu-age[b-zw1wn4km9f] {
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.psb-menu-check[b-zw1wn4km9f] {
    font-size: 1.125rem;
    color: var(--m-primary);
    flex-shrink: 0;
}

@keyframes psb-menu-enter-b-zw1wn4km9f {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Light theme ---- */

:is(html[data-theme="light"], html[data-theme="bright"]) .psb-banner[b-zw1wn4km9f] {
    background: color-mix(in srgb, var(--m-primary) 6%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-primary) 18%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .psb-menu[b-zw1wn4km9f] {
    background: var(--m-card, #ffffff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .psb-menu[b-zw1wn4km9f] {
        animation: none;
    }

    .psb-chevron[b-zw1wn4km9f] {
        transition: none;
    }
}

/* ---- Mobile ---- */

/* Tighten the horizontal gutter on small viewports so the banner doesn't
   look floaty inside narrow containers. */
@media (max-width: 768px) {
    .psb-banner[b-zw1wn4km9f] {
        margin: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .psb-banner[b-zw1wn4km9f] {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0.5rem 0.75rem;
    }

    .psb-switch span:not(.material-symbols-outlined)[b-zw1wn4km9f] {
        display: none;
    }

    .psb-switch[b-zw1wn4km9f] {
        padding: 0.4rem 0.5rem;
    }

    .psb-menu[b-zw1wn4km9f] {
        right: auto;
        left: 0;
        min-width: min(18rem, calc(100vw - 2rem));
    }

    .psb-name[b-zw1wn4km9f] {
        max-width: 8rem;
    }
}
/* /Components/Vault/VaultBundleCard.razor.rz.scp.css */
.bundle-card[b-u6qb7a6zv7] {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: var(--m-card);
    border: 1px solid var(--m-border);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 200px;
}

.bundle-card:hover[b-u6qb7a6zv7] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m-bg) 25%, transparent);
}

.bundle-selected[b-u6qb7a6zv7] {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent) 30%, transparent);
}

/* Cover area */
.bundle-cover[b-u6qb7a6zv7] {
    position: relative;
    height: 120px;
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-card));
    overflow: hidden;
}

.bundle-cover-img[b-u6qb7a6zv7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bundle-cover-fallback[b-u6qb7a6zv7] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bundle-cover-fallback .material-symbols-outlined[b-u6qb7a6zv7] {
    font-size: 2.5rem;
    color: color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.bundle-category[b-u6qb7a6zv7] {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--m-accent) 85%, transparent);
    color: var(--m-on-accent);
}

/* Info area */
.bundle-info[b-u6qb7a6zv7] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.bundle-name[b-u6qb7a6zv7] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bundle-desc[b-u6qb7a6zv7] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--m-text-2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bundle-meta[b-u6qb7a6zv7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
}

.bundle-stories[b-u6qb7a6zv7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--m-text-2);
}

.bundle-meta-icon[b-u6qb7a6zv7] {
    font-size: 0.875rem;
}

.bundle-date[b-u6qb7a6zv7] {
    font-size: 0.65rem;
    color: var(--m-text-2);
}

/* Focus (for future interactivity) */
.bundle-card:focus-visible[b-u6qb7a6zv7] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bundle-card[b-u6qb7a6zv7] {
        transition: none;
    }
    .bundle-card:hover[b-u6qb7a6zv7] {
        transform: none;
    }
}

/* Light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .bundle-card:hover[b-u6qb7a6zv7] {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m-bg) 10%, transparent);
}
/* /Components/Vault/VaultCharacterHero.razor.rz.scp.css */
/* VaultCharacterHero scoped styles — Dragon Scale tokens.
   Mirrors the Strategy A overlay rule from CharacterCard.razor.css — base is
   the canvas, equipped cosmetic is absolute-positioned top-center over it.
   All colours flow from --m-* tokens so the hero auto-resolves for both
   Albino Dragon (light) and Obsidian Dragon (dark) themes; targeted theme
   overrides at the bottom only where the auto-resolve washes out. */

.vault-character-hero[b-nooxmq5eh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1.25rem auto;
    padding: 1rem;
    max-width: 280px;
    /* Pure-CSS focus affordance for keyboard users who land on the hero via
       Tab. The wrapper has role="img" so it's not focusable by default, but
       this future-proofs the styling if a parent makes it focusable. */
    outline: none;
}

.vault-character-hero:focus-visible[b-nooxmq5eh3] {
    outline: 2px solid var(--m-focus);
    outline-offset: 4px;
    border-radius: 18px;
}

/* The composed stage: relative parent so the absolute cosmetic overlay
   positions against the base, not the whole hero block. */
.vault-character-hero-stage[b-nooxmq5eh3] {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    box-shadow: var(--m-shadow-md);
    transition: box-shadow var(--m-dur-base, 200ms) var(--m-ease-smooth, ease);
}

.vault-character-hero:hover .vault-character-hero-stage[b-nooxmq5eh3],
.vault-character-hero:focus-visible .vault-character-hero-stage[b-nooxmq5eh3] {
    /* Tasteful elevation on hover/focus only — no JS hook, purely visual.
       Mirrors the .m-card-magic interaction pattern from brand.css. */
    box-shadow: var(--m-shadow-lg);
}

.vault-character-hero-base[b-nooxmq5eh3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vault-character-hero-base-fallback[b-nooxmq5eh3] {
    display: grid;
    place-items: center;
    color: var(--m-text-disabled);
    background: color-mix(in srgb, var(--m-primary) 6%, var(--m-surface));
}

.vault-character-hero-base-fallback .material-symbols-outlined[b-nooxmq5eh3] {
    font-size: 5rem;
}

/* Top-center anchor — single anchor point per PLAN §9.h (no per-item
   AnchorX/Y). Mirrors .character-cosmetic-overlay in CharacterCard.razor.css
   so the closet's purchase preview matches the vault hero composition. */
.vault-character-hero-overlay[b-nooxmq5eh3] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    margin: 0;
}

/* Skeleton shown while the composition is being fetched. Sized to match the
   stage so the hero block doesn't jump layout when the data arrives. */
.vault-character-hero-skeleton[b-nooxmq5eh3],
.vault-character-hero-empty[b-nooxmq5eh3] {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--m-surface) 88%, transparent);
    border: 1px dashed color-mix(in srgb, var(--m-text-2) 32%, var(--m-border));
    color: var(--m-text-disabled);
    box-shadow: var(--m-shadow-sm);
}

.vault-character-hero-skeleton .skeleton-icon[b-nooxmq5eh3],
.vault-character-hero-empty .empty-icon[b-nooxmq5eh3] {
    font-size: 4.5rem;
    opacity: 0.55;
}

.vault-character-hero-skeleton[b-nooxmq5eh3] {
    /* Subtle pulse so users know something's loading vs. a permanent empty
       silhouette. Respects prefers-reduced-motion below. */
    animation: hero-skeleton-pulse-b-nooxmq5eh3 var(--m-dur-slow, 350ms) var(--m-ease-smooth, ease-in-out) infinite;
    animation-duration: 1.4s;
}

.vault-character-hero-caption[b-nooxmq5eh3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-teal) 34%, var(--m-border));
    max-width: 220px;
    /* Match the badge-profile pill pattern from CharacterCard for visual
       consistency across the vault surface. */
}

.vault-character-hero-caption .hero-caption-icon[b-nooxmq5eh3] {
    font-size: 1rem;
    line-height: 1;
}

.vault-character-hero-caption .hero-caption-text[b-nooxmq5eh3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Obsidian Dragon polish ----
   Add a subtle primary-tinted arcane glow to the stage in dark theme so the
   composed character reads as the visual centerpiece against the darker
   surface. Mirrors the .m-card-magic dark-mode treatment in brand.css. */
[data-theme="dark"] .vault-character-hero-stage[b-nooxmq5eh3] {
    background: color-mix(in srgb, var(--m-surface) 96%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
    box-shadow: var(--m-shadow-md),
                0 0 18px color-mix(in srgb, var(--m-primary) 16%, transparent);
}

[data-theme="dark"] .vault-character-hero:hover .vault-character-hero-stage[b-nooxmq5eh3],
[data-theme="dark"] .vault-character-hero:focus-visible .vault-character-hero-stage[b-nooxmq5eh3] {
    box-shadow: var(--m-shadow-lg),
                0 0 24px color-mix(in srgb, var(--m-primary) 24%, transparent);
}

[data-theme="dark"] .vault-character-hero-skeleton[b-nooxmq5eh3],
[data-theme="dark"] .vault-character-hero-empty[b-nooxmq5eh3] {
    background: color-mix(in srgb, var(--m-surface) 86%, transparent);
}

/* ---- Albino / Bright polish ----
   The default tokens auto-resolve well for light, but the dashed empty-state
   border can read faint against the lighter --m-bg. Strengthen it slightly
   for legibility (mirrors the btn-ghost light-mode treatment in brand.css). */
:is([data-theme="light"], [data-theme="bright"]) .vault-character-hero-skeleton[b-nooxmq5eh3],
:is([data-theme="light"], [data-theme="bright"]) .vault-character-hero-empty[b-nooxmq5eh3] {
    border-color: color-mix(in srgb, var(--m-text-2) 42%, var(--m-selected-border));
}

@media (max-width: 480px) {
    .vault-character-hero-stage[b-nooxmq5eh3],
    .vault-character-hero-skeleton[b-nooxmq5eh3],
    .vault-character-hero-empty[b-nooxmq5eh3] {
        width: 160px;
        height: 160px;
    }
}

@keyframes hero-skeleton-pulse-b-nooxmq5eh3 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .vault-character-hero-skeleton[b-nooxmq5eh3] {
        animation: none;
    }
    .vault-character-hero-stage[b-nooxmq5eh3] {
        transition: none;
    }
}
/* /Components/Vault/VaultInspector.razor.rz.scp.css */
/* VaultInspector — deep-dive side panel for vault item details */

.vault-inspector[b-6l6yj0tb1t] {
    width: 24rem;
    display: flex;
    flex-direction: column;
    border-left: 1px solid color-mix(in srgb, var(--m-surface) 5%, transparent);
    background-color: color-mix(in srgb, var(--m-bg) 80%, transparent);
    backdrop-filter: blur(40px);
    max-height: 100vh;
    position: sticky;
    top: 0;
    animation: inspector-slide-in-b-6l6yj0tb1t 0.3s ease-out both;
}

@keyframes inspector-slide-in-b-6l6yj0tb1t {
    from {
        opacity: 0;
        transform: translateX(2rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.inspector-content[b-6l6yj0tb1t] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Custom scrollbar */
.custom-scrollbar[b-6l6yj0tb1t]::-webkit-scrollbar { width: 6px; }
.custom-scrollbar[b-6l6yj0tb1t]::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar[b-6l6yj0tb1t]::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--m-surface) 10%, transparent);
    border-radius: 20px;
}

/* ---- Header ---- */
.inspector-header[b-6l6yj0tb1t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.close-icon[b-6l6yj0tb1t] {
    background: none;
    border: none;
    color: var(--m-text-2);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.close-icon:hover[b-6l6yj0tb1t] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-surface) 10%, transparent);
}

.close-icon:focus-visible[b-6l6yj0tb1t] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.verified-badge[b-6l6yj0tb1t] {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    background-color: color-mix(in srgb, var(--m-accent) 5%, transparent);
}

.verified-badge p[b-6l6yj0tb1t] {
    font-size: 10px;
    font-family: var(--d-font-mono);
    color: var(--m-accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}

/* ---- Hero image ---- */
.inspector-hero-image[b-6l6yj0tb1t] {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1rem;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--m-surface) 5%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.spotlight[b-6l6yj0tb1t] {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--m-accent) 15%, transparent) 0%, transparent 70%);
}

.inspector-gradient-bg[b-6l6yj0tb1t] {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background: radial-gradient(circle at 50% 50%, var(--m-teal) 0%, transparent 50%);
}

.inspector-image[b-6l6yj0tb1t] {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 30px color-mix(in srgb, var(--m-teal) 40%, transparent));
}

.inspector-image-fallback[b-6l6yj0tb1t] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inspector-image-fallback .material-symbols-outlined[b-6l6yj0tb1t] {
    font-size: 4rem;
    color: var(--m-teal);
    opacity: 0.6;
}

/* ---- Details ---- */
.details-title-section[b-6l6yj0tb1t] {
    margin-bottom: 1.5rem;
}

.registry-label[b-6l6yj0tb1t] {
    font-family: var(--d-font-mono);
    font-size: 10px;
    color: var(--m-accent);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    margin-top: 0;
}

.inspector-item-name[b-6l6yj0tb1t] {
    font-family: var(--d-font-serif);
    font-size: 1.875rem;
    color: var(--m-text);
    font-style: italic;
    margin: 0;
    line-height: 1.2;
}

.inspector-item-lore[b-6l6yj0tb1t] {
    color: var(--m-text-2);
    font-size: 0.875rem;
    margin-top: 1rem;
    line-height: 1.625;
    font-style: italic;
}

/* ---- Stats grid ---- */
.stats-grid[b-6l6yj0tb1t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-box[b-6l6yj0tb1t] {
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--m-surface) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
}

.stat-label[b-6l6yj0tb1t] {
    font-size: 9px;
    font-family: var(--d-font-mono);
    color: var(--m-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
    margin-top: 0;
}

.stat-value[b-6l6yj0tb1t] {
    font-size: 1.25rem;
    font-family: var(--d-font-mono);
    margin: 0;
    color: var(--m-text);
}

.stat-value.teal[b-6l6yj0tb1t] { color: var(--m-teal); }
.stat-value.amber[b-6l6yj0tb1t] { color: var(--m-accent); }

/* ---- Metadata list ---- */
.meta-list[b-6l6yj0tb1t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
}

.meta-item[b-6l6yj0tb1t] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.meta-icon-container[b-6l6yj0tb1t] {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meta-icon-container.purple[b-6l6yj0tb1t] { background-color: color-mix(in srgb, var(--m-primary) 20%, transparent); }
.meta-icon-container.purple .meta-icon[b-6l6yj0tb1t] { color: var(--m-primary); font-size: 18px; }

.meta-icon-container.teal[b-6l6yj0tb1t] { background-color: color-mix(in srgb, var(--m-teal) 20%, transparent); }
.meta-icon-container.teal .meta-icon[b-6l6yj0tb1t] { color: var(--m-teal); font-size: 18px; }

.meta-label[b-6l6yj0tb1t] {
    font-size: 10px;
    color: var(--m-text-disabled);
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.meta-value[b-6l6yj0tb1t] {
    font-size: 0.75rem;
    color: var(--m-text-2);
    font-family: var(--d-font-mono);
    margin: 0;
    margin-top: 0.25rem;
}

/* ---- Action buttons ---- */
.inspector-actions[b-6l6yj0tb1t] {
    padding: 2rem;
    background-color: var(--d-bg);
    border-top: 1px solid color-mix(in srgb, var(--m-surface) 5%, transparent);
}

.btn-bid[b-6l6yj0tb1t] {
    width: 100%;
    padding: 1rem 0;
    border-radius: 9999px;
    background: linear-gradient(to right, var(--m-primary), var(--m-teal));
    color: var(--m-on-primary);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--m-text) 10%, transparent);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-bid:hover[b-6l6yj0tb1t] { opacity: 0.9; }

.btn-bid:focus-visible[b-6l6yj0tb1t] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.btn-archives[b-6l6yj0tb1t] {
    width: 100%;
    margin-top: 0.75rem;
    padding: 1rem 0;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--m-surface) 10%, transparent);
    background-color: transparent;
    color: var(--m-text-2);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-archives:hover[b-6l6yj0tb1t] {
    background-color: color-mix(in srgb, var(--m-surface) 5%, transparent);
}

.btn-archives:focus-visible[b-6l6yj0tb1t] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Mobile: full-width overlay ---- */
@media (max-width: 768px) {
    .vault-inspector[b-6l6yj0tb1t] {
        width: 100%;
        position: fixed;
        inset: 0;
        z-index: 50;
        border-left: none;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .vault-inspector[b-6l6yj0tb1t] {
        animation: none;
    }

    .btn-bid[b-6l6yj0tb1t],
    .btn-archives[b-6l6yj0tb1t] {
        transition: none;
    }
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .vault-inspector[b-6l6yj0tb1t] {
    background-color: color-mix(in srgb, var(--m-card) 78%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--m-accent) 15%, transparent);
    backdrop-filter: blur(40px) saturate(1.2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .spotlight[b-6l6yj0tb1t] {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--m-accent) 10%, transparent) 0%, transparent 70%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .stat-box[b-6l6yj0tb1t] {
    background-color: color-mix(in srgb, var(--m-surface) 40%, var(--m-card, #ffffff));
}
/* /Components/WarningModal.razor.rz.scp.css */
/* WarningModal — Dragon Scale alert dialog */

.wm-backdrop[b-3oo13uzulh] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--m-bg) 70%, transparent);
    backdrop-filter: blur(6px);
    z-index: 1040;
    animation: wm-fade-b-3oo13uzulh 0.2s ease-out;
}

.wm-dialog[b-3oo13uzulh] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 2rem));
    background: var(--m-card, #1e1e2e);
    border: 1px solid color-mix(in srgb, var(--m-warning) 25%, transparent);
    border-radius: 16px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
    z-index: 1050;
    animation: wm-slide-b-3oo13uzulh 0.25s ease-out;
}

@keyframes wm-fade-b-3oo13uzulh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wm-slide-b-3oo13uzulh {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- Header ---- */
.wm-header[b-3oo13uzulh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
}

.wm-title[b-3oo13uzulh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.wm-icon[b-3oo13uzulh] { font-size: 1.25rem; }
.wm-icon-warning[b-3oo13uzulh] { color: var(--m-warning); }
.wm-icon-error[b-3oo13uzulh] { color: var(--m-error, #ef4444); }
.wm-icon-info[b-3oo13uzulh] { color: var(--m-teal); }

.wm-close[b-3oo13uzulh] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--m-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wm-close:hover[b-3oo13uzulh] {
    background: color-mix(in srgb, var(--m-warning) 12%, transparent);
    color: var(--m-warning);
}

.wm-close:focus-visible[b-3oo13uzulh] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.wm-close .material-symbols-outlined[b-3oo13uzulh] { font-size: 1.125rem; }

/* ---- Body ---- */
.wm-body[b-3oo13uzulh] {
    padding: 1rem 1.5rem 1.25rem;
    color: var(--m-text-2);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ---- Checkbox toggle ---- */
.wm-toggle[b-3oo13uzulh] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1rem;
    cursor: pointer;
}

.wm-checkbox[b-3oo13uzulh] {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 4px;
    border: 2px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    background: var(--m-card);
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.wm-checkbox:checked[b-3oo13uzulh] {
    background: var(--m-primary);
    border-color: var(--m-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.wm-checkbox:focus-visible[b-3oo13uzulh] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.wm-toggle-text[b-3oo13uzulh] {
    font-size: 0.85rem;
    color: var(--m-text-2);
}

/* ---- Footer ---- */
.wm-footer[b-3oo13uzulh] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 1.5rem 1.25rem;
}

/* ---- Light theme ---- */
:is(html[data-theme="light"], html[data-theme="bright"]) .wm-dialog[b-3oo13uzulh] {
    background: var(--m-card, #ffffff);
    border-color: color-mix(in srgb, var(--m-warning) 20%, transparent);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .wm-backdrop[b-3oo13uzulh] {
    background: color-mix(in srgb, var(--m-bg) 50%, transparent);
}

/* Light-theme override targets the unchecked state only — see
   AccountSettingsModal.razor.css for the specificity-clobbers-:checked
   explanation. trace-2026-05-06-albino-dragon-checkbox.md. */
:is(html[data-theme="light"], html[data-theme="bright"]) .wm-checkbox:not(:checked)[b-3oo13uzulh] {
    background: var(--m-card, #ffffff);
    border-color: color-mix(in srgb, var(--m-text) 20%, transparent);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .wm-backdrop[b-3oo13uzulh],
    .wm-dialog[b-3oo13uzulh] {
        animation: none;
    }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .wm-dialog[b-3oo13uzulh] {
        width: calc(100vw - 1rem);
    }

    .wm-footer[b-3oo13uzulh] {
        flex-direction: column;
    }
}
/* /Pages/About.razor.rz.scp.css */
.about-shell[b-vvylypecud] {
  background: var(--m-bg);
  min-height: 100vh;
}

.about-cta[b-vvylypecud] {
  text-align: center;
  padding: 0 2.5rem 5rem;
  background: var(--m-bg);
}

.about-back-link[b-vvylypecud] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--m-text);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--m-text) 14%, transparent);
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-back-link:hover[b-vvylypecud] {
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  color: var(--m-primary);
  border-color: color-mix(in srgb, var(--m-primary) 35%, transparent);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .about-cta[b-vvylypecud] {
    padding: 0 1.25rem 3rem;
  }
}
/* /Pages/AchievementsPage.razor.rz.scp.css */
/* ============================================================
   AchievementsPage — vault-aligned layout
   Component CSS lives in Components/Achievements/*.razor.css
   ============================================================ */

.achievements-layout[b-oerliguke4] {
    --accent-purple: var(--m-primary);
    font-family: var(--d-font-display);
    color: var(--m-text);
    background-color: var(--d-bg);
    width: 100%;
}

[b-oerliguke4] .material-symbols-outlined {
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.cosmic-gradient[b-oerliguke4] {
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--m-surface) 40%, transparent) 0%,
        var(--d-bg) 100%
    );
}

.achievements-container[b-oerliguke4] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    width: 100%;
}

.achievements-body[b-oerliguke4] {
    padding: 1.25rem 0 1.5rem;
    position: relative;
    flex: 1;
    max-width: 1200px;
    margin-inline: auto;
    width: 100%;
}

@media (max-width: 1232px) {
    .achievements-body[b-oerliguke4] {
        padding-inline: 1rem;
    }
}

/* ---- Active profile context ----
   Compact-pill treatment for the shared <ProfileSwitcherBanner>, kept in visual
   parity with the Glowdome (CosmeticsCloset) page so the chip does not jump when
   the user flips between the two vault tabs.

   PARITY NOTE — top band (nav → pill): the pill renders 0.85rem below the global
   56px app header on BOTH pages, but that 0.85rem is produced differently because
   the parents differ. Here the banner is a direct child of the *un-padded*
   .achievements-container, so the whole top gap is the pill's own
   `margin-top: 0.85rem`. On Glowdome the banner lives inside .store-content, whose
   `padding: 1.5rem` (global store.css) is overridden to `padding-top: 0.85rem` by
   .cosmetics-content, and the pill there carries `margin-top: 0` so the parent
   padding owns the gap. Do NOT "simplify" both to the same margin value — that
   would re-introduce a vertical jump between the tabs. The same parity must hold at
   the ≤576px breakpoint, where this margin and Glowdome's .cosmetics-content
   padding-top both drop to 0.6rem (see the mobile override below).

   PARITY NOTE — pill → header: tightened from 2.5rem to 1.5rem (desktop) by zeroing
   the shared PageHeader's `margin-top: 1rem` per-page (see the .page-header override
   below). Here the residual gap is the pill's `margin-bottom: 0.25rem` +
   .achievements-body `padding-top: 1.25rem` = 1.5rem; on Glowdome it is the pill's
   own `margin-bottom: 1.5rem`. At ≤576px both resolve to 1.25rem
   (0.25 + 1rem body padding here; 1.25rem pill margin-bottom on Glowdome). */

.achievements-layout[b-oerliguke4]  .psb-banner {
    width: fit-content;
    max-width: calc(100% - 3rem);
    margin: 0.85rem auto 0.25rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 24%, transparent);
    box-shadow: var(--m-shadow-sm);
}

/* Pill → header gap: the shared PageHeader ships `margin-top: 1rem`; zero it
   page-scoped (matched on Glowdome) so the header card sits crisply under the
   active-profile pill. The extra `.achievements-header` class keeps this override
   above the PageHeader's own `.page-header` rule in the specificity cascade. */
.achievements-layout[b-oerliguke4]  .page-header.achievements-header {
    margin-top: 0;
}

.achievements-layout[b-oerliguke4]  .psb-avatar {
    width: 2rem;
    height: 2rem;
}

.achievements-layout[b-oerliguke4]  .psb-text {
    gap: 0.4rem;
}

.achievements-layout[b-oerliguke4]  .psb-switch {
    border-radius: 999px;
    padding-block: 0.35rem;
}

/* ---- Auth gate ---- */
.achievements-auth-gate[b-oerliguke4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.auth-gate-inner[b-oerliguke4] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.auth-gate-icon[b-oerliguke4] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-warning) 20%, transparent) 0%,
        color-mix(in srgb, var(--m-warning) 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-warning) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-gate-icon .material-symbols-outlined[b-oerliguke4] {
    font-size: 2rem;
    color: var(--m-warning);
}

.auth-gate-title[b-oerliguke4] {
    font-family: var(--d-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.auth-gate-body[b-oerliguke4] {
    color: var(--m-text-2);
    margin: 0;
}

.achievements-cta[b-oerliguke4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 80%, var(--m-accent)) 100%);
    color: var(--m-on-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.achievements-cta:hover[b-oerliguke4] {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: var(--m-on-primary);
    text-decoration: none;
}

.achievements-details-toggle[b-oerliguke4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.875rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    background: color-mix(in srgb, var(--m-card) 88%, transparent);
    color: var(--m-text-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-surface-elevated) 45%, transparent);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.achievements-details-toggle:hover[b-oerliguke4] {
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
    color: var(--m-text);
}

.achievements-details-toggle.active[b-oerliguke4] {
    border-color: color-mix(in srgb, var(--m-primary) 40%, var(--m-border));
    color: var(--m-primary);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--m-primary) 16%, transparent),
        0 3px 10px color-mix(in srgb, var(--m-primary) 14%, transparent);
}

.achievements-details-toggle .material-symbols-outlined[b-oerliguke4] {
    font-size: 1rem;
}

.achievements-details-toggle:focus-visible[b-oerliguke4] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

/* ---- Back button ---- */
.achievements-back-btn[b-oerliguke4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.875rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    background: transparent;
    color: var(--m-text-2);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.achievements-back-btn .material-symbols-outlined[b-oerliguke4] {
    font-size: 1rem;
}

.achievements-back-btn:hover[b-oerliguke4] {
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
    color: var(--m-text);
    border-color: color-mix(in srgb, var(--m-border) 100%, transparent);
}

.achievements-back-btn:focus-visible[b-oerliguke4] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* ---- Age-group typography overrides ---- */
/* ---- Mobile ---- */
@media (max-width: 576px) {
    .achievements-body[b-oerliguke4] {
        padding: 1rem;
    }

    .achievements-details-toggle[b-oerliguke4] {
        width: 100%;
    }

    /* Top band parity at ≤576px: Glowdome's .cosmetics-content padding-top drops to
       0.6rem here and its banner has margin-top: 0, so its nav → pill gap is 0.6rem.
       Match it here so the pill doesn't jump between tabs on phones. */
    .achievements-layout[b-oerliguke4]  .psb-banner {
        margin-top: 0.6rem;
    }
}

/* ---- Light theme ----
   --d-bg is intentionally dark (mixes --m-bg with 25% black) since it powers
   the "dark cosmos" overlay used by vault pages. In light/bright themes we
   undo that so the achievements page reads as a light surface, matching the
   rest of the chrome the user sees. */
:is(html[data-theme="light"], html[data-theme="bright"]) .achievements-layout[b-oerliguke4] {
    background-color: var(--m-bg);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .achievements-layout .cosmic-gradient[b-oerliguke4] {
    background:
        radial-gradient(
            circle at 30% 20%,
            color-mix(in srgb, var(--m-primary) 6%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 70% 80%,
            color-mix(in srgb, var(--m-teal) 6%, transparent) 0%,
            transparent 50%
        ),
        linear-gradient(180deg, var(--m-bg) 0%, var(--m-surface) 50%, color-mix(in srgb, var(--m-surface) 80%, var(--m-primary) 20%) 100%);
}

/* Achievements uses purple accent for the overlay */
[b-oerliguke4] .cs-overlay,
[b-oerliguke4] .cs-restore-btn {
    --cs-accent: var(--m-primary);
}

/* Override subnav accent for Achievements (purple) */
[b-oerliguke4] .vault-subnav {
    --subnav-accent: var(--m-primary);
}

@media (prefers-reduced-motion: reduce) {
    .achievements-cta[b-oerliguke4] {
        transition: none;
    }

    .achievements-cta:hover[b-oerliguke4] {
        transform: none;
    }
}
/* /Pages/Adventures.razor.rz.scp.css */
.adventures-page-shell[b-s0fviswcf5] {
    padding-top: 1rem;
}
/* /Pages/Authentication/AuthCallback.razor.rz.scp.css */
/* Login callback — matches home page: dark shell, purple accents, Mystira card style.
   Scoped to dark theme so this page always matches the Mystira home aesthetic. */

.callback-shell[b-lmioci2tyg] {
    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

.callback-shell[b-lmioci2tyg]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 50%),
        radial-gradient(900px circle at 80% 60%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 50%);
    opacity: 0.9;
}

.callback-content[b-lmioci2tyg] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.callback-logo-link[b-lmioci2tyg] {
    display: block;
    margin-bottom: 0.5rem;
}

.callback-logo[b-lmioci2tyg] {
    height: 72px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--m-primary) 50%, transparent));
}

.callback-card[b-lmioci2tyg] {
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    border: 1px solid var(--m-border);
    text-align: center;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 20%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 60%),
        var(--m-surface);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.callback-card--loading .callback-heading[b-lmioci2tyg] {
    margin-top: 1.5rem;
}

.callback-card--error[b-lmioci2tyg] {
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-error) 8%, transparent), transparent 60%),
        var(--m-surface);
    border-color: color-mix(in srgb, var(--m-error) 30%, var(--m-border));
}

.callback-spinner[b-lmioci2tyg] {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.spinner-ring[b-lmioci2tyg] {
    position: absolute;
    inset: 0;
    border: 3px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    border-top-color: var(--m-primary);
    border-radius: 50%;
    animation: callback-spin-b-lmioci2tyg 0.9s linear infinite;
}

.callback-spinner-icon[b-lmioci2tyg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: var(--m-primary);
    animation: callback-spin-b-lmioci2tyg 1.2s linear infinite reverse;
}

@keyframes callback-spin-b-lmioci2tyg {
    to { transform: rotate(360deg); }
}

.callback-error-icon[b-lmioci2tyg] {
    font-size: 2.5rem;
    color: var(--m-error);
    margin-bottom: 0.75rem;
}

.callback-heading[b-lmioci2tyg] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--m-text);
}

.callback-muted[b-lmioci2tyg],
.callback-message[b-lmioci2tyg] {
    margin: 0;
    color: var(--m-text-2);
    font-size: 1rem;
    line-height: 1.5;
}

.callback-muted[b-lmioci2tyg] {
    font-size: 0.95rem;
}

.callback-details[b-lmioci2tyg] {
    margin-top: 1.25rem;
    text-align: left;
}

.callback-details summary[b-lmioci2tyg] {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--m-text-2);
}

.callback-detail-text[b-lmioci2tyg] {
    margin: 0.5rem 0 0 0;
    padding: 1rem;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--m-surface-elevated) 90%, transparent);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    color: var(--m-text-2);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.callback-actions[b-lmioci2tyg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.callback-btn-primary[b-lmioci2tyg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--m-dur-fast) var(--m-ease-spring), box-shadow var(--m-dur-fast) var(--m-ease-smooth);
    background: var(--m-primary);
    color: var(--m-on-primary);
}

.callback-btn-primary:hover[b-lmioci2tyg] {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-glow);
}

.callback-btn-primary:focus-visible[b-lmioci2tyg] {
    outline: none;
    box-shadow: var(--m-ring), var(--m-shadow-glow);
}

.callback-btn-ghost[b-lmioci2tyg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.callback-btn-ghost:hover[b-lmioci2tyg] {
    background: var(--m-surface-hover);
    border-color: var(--m-selected-border);
}

/* Light mode: --m-border (#ded9ff) gives ~1.3:1 against light bg — below 3:1 UI minimum.
   Strengthen to --m-selected-border (#b8a9ff) which achieves ~3.1:1. */
:is(html[data-theme="light"], html[data-theme="bright"]) .callback-btn-ghost[b-lmioci2tyg] {
    border-color: var(--m-selected-border);
    background: var(--m-surface-hover);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .callback-btn-ghost:hover[b-lmioci2tyg] {
    border-color: color-mix(in srgb, var(--m-primary) 55%, var(--m-selected-border));
    background: var(--m-surface-selected);
}

@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-lmioci2tyg],
    .callback-spinner-icon[b-lmioci2tyg] { animation: none; }
    .callback-btn-primary:hover[b-lmioci2tyg] { transform: none; }
}
/* /Pages/Authentication/MagicLinkSent.razor.rz.scp.css */
.magic-shell[b-y2h2x4a7j5] {
    background:
        radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 45%),
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 45%);
    min-height: 100vh;
}

.magic-card[b-y2h2x4a7j5] {
    max-width: 560px;
    border-radius: 22px;
    border: 1px solid var(--m-border);
    background: color-mix(in srgb, var(--m-surface) 90%, transparent);
    box-shadow: var(--m-shadow-md);
}

.magic-card-body[b-y2h2x4a7j5] {
    padding: 2.25rem;
    text-align: center;
}

.magic-icon[b-y2h2x4a7j5] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    margin-bottom: 16px;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.magic-title[b-y2h2x4a7j5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 10px;
}

.magic-subtitle[b-y2h2x4a7j5] {
    color: var(--m-text-2);
    margin-bottom: 20px;
}

.magic-subtitle--muted[b-y2h2x4a7j5] {
    color: var(--m-text-3, var(--m-text-2));
    font-style: italic;
}

.magic-email[b-y2h2x4a7j5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-primary);
    font-weight: 600;
}

.magic-actions[b-y2h2x4a7j5] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 576px) {
    .magic-card-body[b-y2h2x4a7j5] {
        padding: 1.75rem;
    }
}
/* /Pages/Authentication/MagicVerify.razor.rz.scp.css */
.magic-shell[b-iugqoht9h2] {
    background:
        radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 45%),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 45%);
    min-height: 100vh;
}

.magic-card[b-iugqoht9h2] {
    max-width: 640px;
    border-radius: 22px;
    border: 1px solid var(--m-border);
    background: color-mix(in srgb, var(--m-surface) 90%, transparent);
    box-shadow: var(--m-shadow-md);
}

.magic-card-body[b-iugqoht9h2] {
    padding: 2.25rem;
    text-align: center;
}

.magic-loading[b-iugqoht9h2] {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.magic-icon[b-iugqoht9h2] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    margin-bottom: 16px;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.magic-title[b-iugqoht9h2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 10px;
}

.magic-subtitle[b-iugqoht9h2] {
    color: var(--m-text-2);
    margin-bottom: 18px;
}

.magic-actions[b-iugqoht9h2] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 576px) {
    .magic-card-body[b-iugqoht9h2] {
        padding: 1.75rem;
    }
}

.magic-loading-spinner[b-iugqoht9h2] {
    width: 48px;
    height: 48px;
    border: 3px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-top-color: var(--m-primary);
    border-radius: 50%;
    animation: magic-spin-b-iugqoht9h2 0.8s linear infinite;
}

@keyframes magic-spin-b-iugqoht9h2 {
    to { transform: rotate(360deg); }
}

.magic-error-alert[b-iugqoht9h2] {
    background: color-mix(in srgb, var(--m-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-error) 30%, transparent);
    color: var(--m-error);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
    .magic-loading-spinner[b-iugqoht9h2] {
        animation: none;
        border-top-color: var(--m-primary);
    }
}
/* /Pages/Authentication/ParentalConsent.razor.rz.scp.css */
/* Parental-consent landing page — matches AuthCallback's dark shell + Mystira card style.
   Adds a success variant tinted with the primary accent for the verified-state confirmation.
   Uses Dragon Scale tokens (--m-*) so it tracks the Albino / Obsidian theme switch. */

.parental-consent-shell[b-yax949fll3] {
    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

.parental-consent-shell[b-yax949fll3]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 50%),
        radial-gradient(900px circle at 80% 60%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 50%);
    opacity: 0.9;
}

.parental-consent-content[b-yax949fll3] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.parental-consent-logo-link[b-yax949fll3] {
    display: block;
    margin-bottom: 0.5rem;
}

.parental-consent-logo[b-yax949fll3] {
    height: 72px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--m-primary) 50%, transparent));
}

.parental-consent-card[b-yax949fll3] {
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    border: 1px solid var(--m-border);
    text-align: center;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 20%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 60%),
        var(--m-surface);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.parental-consent-card--loading .parental-consent-heading[b-yax949fll3] {
    margin-top: 1.5rem;
}

.parental-consent-card--success[b-yax949fll3] {
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 22%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-success, var(--m-teal)) 14%, transparent), transparent 60%),
        var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
}

.parental-consent-card--error[b-yax949fll3] {
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-error) 8%, transparent), transparent 60%),
        var(--m-surface);
    border-color: color-mix(in srgb, var(--m-error) 30%, var(--m-border));
}

.parental-consent-spinner[b-yax949fll3] {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.spinner-ring[b-yax949fll3] {
    position: absolute;
    inset: 0;
    border: 3px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    border-top-color: var(--m-primary);
    border-radius: 50%;
    animation: parental-consent-spin-b-yax949fll3 0.9s linear infinite;
}

.parental-consent-spinner-icon[b-yax949fll3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    color: var(--m-primary);
    animation: parental-consent-spin-b-yax949fll3 1.2s linear infinite reverse;
}

@keyframes parental-consent-spin-b-yax949fll3 {
    to { transform: rotate(360deg); }
}

.parental-consent-success-icon[b-yax949fll3] {
    font-size: 2.75rem;
    color: var(--m-primary);
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-primary) 45%, transparent));
}

.parental-consent-error-icon[b-yax949fll3] {
    font-size: 2.5rem;
    color: var(--m-error);
    margin-bottom: 0.75rem;
}

.parental-consent-heading[b-yax949fll3] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--m-text);
}

.parental-consent-muted[b-yax949fll3],
.parental-consent-message[b-yax949fll3] {
    margin: 0 0 0.5rem 0;
    color: var(--m-text-2);
    font-size: 1rem;
    line-height: 1.5;
}

.parental-consent-message strong[b-yax949fll3] {
    color: var(--m-text);
}

.parental-consent-muted[b-yax949fll3] {
    font-size: 0.95rem;
}

.parental-consent-actions[b-yax949fll3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.parental-consent-btn-primary[b-yax949fll3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--m-dur-fast) var(--m-ease-spring), box-shadow var(--m-dur-fast) var(--m-ease-smooth);
    background: var(--m-primary);
    color: var(--m-on-primary);
}

.parental-consent-btn-primary:hover[b-yax949fll3] {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-glow);
}

.parental-consent-btn-primary:focus-visible[b-yax949fll3] {
    outline: none;
    box-shadow: var(--m-ring), var(--m-shadow-glow);
}

.parental-consent-btn-ghost[b-yax949fll3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.parental-consent-btn-ghost:hover[b-yax949fll3] {
    background: var(--m-surface-hover);
    border-color: var(--m-selected-border);
}

/* Light mode contrast — see AuthCallback.razor.css for the rationale. */
:is(html[data-theme="light"], html[data-theme="bright"]) .parental-consent-btn-ghost[b-yax949fll3] {
    border-color: var(--m-selected-border);
    background: var(--m-surface-hover);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .parental-consent-btn-ghost:hover[b-yax949fll3] {
    border-color: color-mix(in srgb, var(--m-primary) 55%, var(--m-selected-border));
    background: var(--m-surface-selected);
}

@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-yax949fll3],
    .parental-consent-spinner-icon[b-yax949fll3] { animation: none; }
    .parental-consent-btn-primary:hover[b-yax949fll3] { transform: none; }
}
/* /Pages/AwardsPage.razor.rz.scp.css */
.awards-shell[b-6rxpanxm8l] {
    position: relative;
    min-height: calc(100vh - 56px);
    padding-bottom: 2rem;
    background:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--m-teal) 18%, transparent), transparent 45%),
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--m-glow) 14%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--m-bg) 92%, transparent), transparent 70%);
}

.awards-shell .container[b-6rxpanxm8l] {
    max-width: min(100%, 1340px);
}

/* ── Skeleton Loading State ──────────────────────────────── */

.skeleton-pulse[b-6rxpanxm8l] {
    animation: skeleton-shimmer-b-6rxpanxm8l 1.6s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 90%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%
    );
    background-size: 200% 100%;
    border-radius: 8px;
}

@keyframes skeleton-shimmer-b-6rxpanxm8l {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.awards-skeleton-hero[b-6rxpanxm8l] {
    height: 130px;
    border-radius: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.awards-skeleton-grid[b-6rxpanxm8l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.awards-skeleton-card[b-6rxpanxm8l] {
    background: var(--m-surface);
    border-radius: 16px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--m-text-2) 20%, transparent);
}

.awards-skeleton-avatar[b-6rxpanxm8l] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    flex-shrink: 0;
}

.awards-skeleton-line[b-6rxpanxm8l] {
    height: 14px;
    border-radius: 6px;
}

.awards-skeleton-line--wide[b-6rxpanxm8l] {
    width: 80%;
}

.awards-skeleton-line--narrow[b-6rxpanxm8l] {
    width: 55%;
}

.awards-hero[b-6rxpanxm8l] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0;
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--m-card) 84%, transparent),
            color-mix(in srgb, var(--m-primary) 7%, var(--m-card)));
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
    margin: 0 auto 1.5rem;
    animation: awardsFadeUp-b-6rxpanxm8l 0.6s ease both;
}

/* ── Hero Animated Blob Background ────────────────────── */

.awards-hero-bg[b-6rxpanxm8l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.awards-hero-blob-1[b-6rxpanxm8l] {
    position: absolute;
    left: -40px;
    top: -30px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-accent) 22%, transparent);
    filter: blur(55px);
    animation: awards-blob-1-b-6rxpanxm8l 11s ease-in-out infinite;
    will-change: transform;
}

.awards-hero-blob-2[b-6rxpanxm8l] {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-success) 18%, transparent);
    filter: blur(55px);
    animation: awards-blob-2-b-6rxpanxm8l 13s ease-in-out infinite;
    will-change: transform;
}

@keyframes awards-blob-1-b-6rxpanxm8l {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, 12px) scale(1.06); }
}

@keyframes awards-blob-2-b-6rxpanxm8l {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-14px, -10px) scale(1.05); }
}

.awards-hero-content[b-6rxpanxm8l] {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem 1.6rem;
}

.awards-hero-icon[b-6rxpanxm8l] {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--m-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 20%, transparent), color-mix(in srgb, var(--m-warning) 10%, transparent));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--m-primary) 12%, transparent);
    margin-bottom: 1rem;
}

.awards-hero-icon-symbol[b-6rxpanxm8l] {
    animation: awards-icon-sparkle-b-6rxpanxm8l 3s ease-in-out infinite;
    display: inline-block;
}

@keyframes awards-icon-sparkle-b-6rxpanxm8l {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--m-accent) 60%, transparent));
    }
    33% {
        transform: scale(1.12) rotate(-4deg);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--m-accent) 80%, transparent));
    }
    66% {
        transform: scale(1.08) rotate(4deg);
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--m-success) 70%, transparent));
    }
}

/* ── Badge Pill ──────────────────────────────────────── */

.awards-badge-pill[b-6rxpanxm8l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(
        135deg,
        var(--m-success),
        color-mix(in srgb, var(--m-success) 75%, var(--m-accent))
    );
    color: var(--m-on-primary);
    margin-bottom: 12px;
}

.awards-badge-pill .material-symbols-outlined[b-6rxpanxm8l] {
    font-size: 0.95rem;
}

.awards-title[b-6rxpanxm8l] {
    font-weight: 700;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    color: var(--m-text);
    margin: 0 0 0.5rem;
}

.awards-subtitle[b-6rxpanxm8l] {
    color: var(--m-text-2);
    margin: 0 auto;
    max-width: 560px;
    line-height: 1.55;
}

.awards-section[b-6rxpanxm8l] {
    margin-bottom: 20px;
}

.awards-grid[b-6rxpanxm8l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.award-card[b-6rxpanxm8l] {
    background: var(--m-surface);
    border-radius: 16px;
    padding: 16px 14px;
    display: grid;
    gap: 12px;
    align-items: center;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--m-text-2) 20%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--m-text) 12%, transparent);
    animation: awardsFadeUp-b-6rxpanxm8l 0.7s ease both;
}

.award-media[b-6rxpanxm8l] {
    display: flex;
    justify-content: center;
}

.award-img[b-6rxpanxm8l] {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 12px 20px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.fallback-icon[b-6rxpanxm8l] {
    font-size: 64px;
}

.placeholder-icon[b-6rxpanxm8l] {
    display: none;
    font-size: 64px;
}

.award-meta[b-6rxpanxm8l] {
    display: grid;
    gap: 4px;
}

.award-name[b-6rxpanxm8l] {
    font-weight: 700;
    color: var(--m-text);
    font-size: 0.95rem;
}

.award-owner[b-6rxpanxm8l] {
    font-size: 0.8rem;
    color: var(--m-text-disabled);
}

.awards-note[b-6rxpanxm8l] {
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin: 0 auto 1rem;
    border: 1px solid color-mix(in srgb, var(--m-text-2) 20%, var(--m-border));
    background: color-mix(in srgb, var(--m-card) 92%, transparent);
    box-shadow: var(--m-shadow-sm);
}

.awards-note--warning[b-6rxpanxm8l] {
    border-color: var(--m-warning-border);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--m-warning-bg) 90%, var(--m-card)),
            color-mix(in srgb, var(--m-card) 88%, transparent));
}

.awards-note-title[b-6rxpanxm8l] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 0.75rem;
}

.awards-note-body[b-6rxpanxm8l] {
    color: var(--m-text-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Markup uses <span class="material-symbols-outlined">, not <i>, so we target
   the actual icon element. The warning note then reads semantically amber in
   both themes. */
.awards-note--warning .awards-note-title .material-symbols-outlined[b-6rxpanxm8l] {
    color: var(--m-warning);
}

.awards-note--info .awards-note-title .material-symbols-outlined[b-6rxpanxm8l] {
    color: var(--m-info);
}

.awards-chip-row[b-6rxpanxm8l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.awards-chip[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-text) 8%, transparent);
    color: var(--m-text);
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.awards-actions[b-6rxpanxm8l] {
    text-align: center;
    margin-top: 1.6rem;
    display: grid;
    gap: 1rem;
}

.awards-actions-row[b-6rxpanxm8l] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.awards-action-btn[b-6rxpanxm8l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3rem;
    min-width: 10rem;
    padding: 0.8rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.awards-action-btn .material-symbols-outlined[b-6rxpanxm8l] {
    font-size: 1.2rem;
}

.awards-action-btn--primary[b-6rxpanxm8l] {
    background: var(--m-primary);
    color: var(--m-on-primary);
    box-shadow: var(--m-shadow-sm);
}

.awards-action-btn--secondary[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
    color: var(--m-text);
}

.awards-action-btn:hover[b-6rxpanxm8l] {
    transform: translateY(-1px);
    box-shadow: var(--m-shadow-md);
}

.awards-action-btn:focus-visible[b-6rxpanxm8l] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

.awards-sparkles[b-6rxpanxm8l] {
    display: grid;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto 1rem;
}

.awards-sparkle-card[b-6rxpanxm8l] {
    text-align: center;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--m-accent) 8%, var(--m-card)),
            color-mix(in srgb, var(--m-card) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--m-warning) 32%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
}

.awards-sparkle-head[b-6rxpanxm8l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    color: var(--m-text);
}

.awards-sparkle-icon[b-6rxpanxm8l] {
    color: var(--m-warning);
}

.awards-sparkle-value[b-6rxpanxm8l] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--m-warning);
}

.awards-sparkle-messages[b-6rxpanxm8l] {
    margin-top: 4px;
    display: grid;
    gap: 2px;
}

.awards-sparkle-message[b-6rxpanxm8l] {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--m-text-2) 85%, transparent);
}

.awards-sparkle-cta[b-6rxpanxm8l] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--m-warning);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--m-warning) 55%, transparent);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.awards-sparkle-cta:hover[b-6rxpanxm8l],
.awards-sparkle-cta:focus-visible[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-warning) 14%, transparent);
    border-color: var(--m-warning);
}

.awards-sparkle-cta .material-symbols-outlined[b-6rxpanxm8l] {
    font-size: 1.1rem;
}

.awards-link[b-6rxpanxm8l] {
    color: var(--m-text-2);
    font-size: 0.95rem;
}

.awards-link a[b-6rxpanxm8l] {
    color: var(--m-primary);
    text-decoration: underline;
}

[data-theme="dark"] .awards-shell[b-6rxpanxm8l] {
    background:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--m-primary) 12%, transparent), transparent 45%),
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--m-glow) 12%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--m-bg) 95%, transparent), transparent 70%);
}

[data-theme="dark"] .awards-hero[b-6rxpanxm8l] {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--m-surface) 74%, transparent),
            color-mix(in srgb, var(--m-primary) 10%, var(--m-bg)));
    border-color: color-mix(in srgb, var(--m-primary) 24%, transparent);
}

[data-theme="dark"] .awards-title[b-6rxpanxm8l] {
    color: var(--m-text);
}

[data-theme="dark"] .awards-subtitle[b-6rxpanxm8l] {
    color: color-mix(in srgb, var(--m-text-2) 90%, transparent);
}

[data-theme="dark"] .awards-link[b-6rxpanxm8l] {
    color: var(--m-text-2);
}

[data-theme="dark"] .awards-link a[b-6rxpanxm8l] {
    color: var(--m-text);
}

[data-theme="dark"] .awards-hero-blob-1[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-accent) 16%, transparent);
}

[data-theme="dark"] .awards-hero-blob-2[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-success) 14%, transparent);
}

[data-theme="dark"] .awards-skeleton-card[b-6rxpanxm8l] {
    background: color-mix(in srgb, var(--m-surface) 60%, transparent);
}

@keyframes awardsFadeUp-b-6rxpanxm8l {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .awards-hero-content[b-6rxpanxm8l] {
        padding: 1.6rem 1rem 1.25rem;
    }

    .awards-grid[b-6rxpanxm8l] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .awards-skeleton-grid[b-6rxpanxm8l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .awards-shell[b-6rxpanxm8l] {
        background:
            radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--m-teal) 16%, transparent), transparent 50%),
            linear-gradient(180deg, color-mix(in srgb, var(--m-bg) 92%, transparent), transparent 80%);
    }

    .awards-note[b-6rxpanxm8l],
    .awards-sparkle-card[b-6rxpanxm8l] {
        padding: 0.9rem;
    }

    .awards-actions-row[b-6rxpanxm8l] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .awards-action-btn[b-6rxpanxm8l] {
        width: 100%;
    }
}

/* AI Story Recap Card */
.awards-recap-card[b-6rxpanxm8l] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--m-teal) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-teal) 22%, transparent);
    margin-bottom: 24px;
    animation: awardsFadeUp-b-6rxpanxm8l 0.7s ease 0.15s both;
}

.awards-recap-icon[b-6rxpanxm8l] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 14%, transparent);
}

.awards-recap-body[b-6rxpanxm8l] {
    flex: 1;
    min-width: 0;
}

.awards-recap-title[b-6rxpanxm8l] {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m-teal);
    margin-bottom: 6px;
}

.awards-recap-text[b-6rxpanxm8l] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--m-text);
}

/* ── Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .awards-hero-blob-1[b-6rxpanxm8l],
    .awards-hero-blob-2[b-6rxpanxm8l],
    .awards-hero-icon-symbol[b-6rxpanxm8l],
    .awards-hero[b-6rxpanxm8l],
    .award-card[b-6rxpanxm8l],
    .awards-recap-card[b-6rxpanxm8l] {
        animation: none;
    }

    .skeleton-pulse[b-6rxpanxm8l] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 70%, transparent);
        background-size: 100% 100%;
    }
}
/* /Pages/CharacterAssignmentPage.razor.rz.scp.css */
/* Character Assignment Page Styles */

/* ── Scenario Banner ─────────────────────────────── */

.scenario-banner[b-8nk9o8mlxz] {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 24px 28px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
    backdrop-filter: blur(8px);
}

.scenario-banner-bg[b-8nk9o8mlxz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.scenario-banner-blob-1[b-8nk9o8mlxz] {
    position: absolute;
    left: -40px;
    top: -20px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-primary) 22%, transparent);
    filter: blur(50px);
    animation: assignment-blob-1-b-8nk9o8mlxz 10s ease-in-out infinite;
    will-change: transform;
}

.scenario-banner-blob-2[b-8nk9o8mlxz] {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-accent) 18%, transparent);
    filter: blur(50px);
    animation: assignment-blob-2-b-8nk9o8mlxz 12s ease-in-out infinite;
    will-change: transform;
}

.scenario-banner-stars[b-8nk9o8mlxz] {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image:
        radial-gradient(1.5px 1.5px at 30px 25px, color-mix(in srgb, var(--m-on-primary) 90%, transparent), transparent),
        radial-gradient(1px 1px at 100px 60px, color-mix(in srgb, var(--m-on-primary) 80%, transparent), transparent),
        radial-gradient(1.5px 1.5px at 180px 30px, color-mix(in srgb, var(--m-on-primary) 70%, transparent), transparent),
        radial-gradient(1px 1px at 260px 80px, color-mix(in srgb, var(--m-on-primary) 75%, transparent), transparent),
        radial-gradient(1.5px 1.5px at 350px 20px, color-mix(in srgb, var(--m-on-primary) 85%, transparent), transparent);
    background-repeat: repeat;
    background-size: 400px 120px;
}

@keyframes assignment-blob-1-b-8nk9o8mlxz {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, 10px) scale(1.05); }
}

@keyframes assignment-blob-2-b-8nk9o8mlxz {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-12px, -8px) scale(1.04); }
}

.scenario-banner-content[b-8nk9o8mlxz] {
    position: relative;
    z-index: 1;
}

.scenario-banner-title[b-8nk9o8mlxz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 12px;
    line-height: 1.2;
}

/* ── Badge Pills ─────────────────────────────────── */

.assignment-step-pill[b-8nk9o8mlxz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 75%, var(--m-accent)));
    color: var(--m-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.assignment-step-pill .material-symbols-outlined[b-8nk9o8mlxz] {
    font-size: 1rem;
}

.assignment-age-pill[b-8nk9o8mlxz] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--m-accent) 15%, transparent);
    color: var(--m-accent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
}

/* ── Assignment Progress Bar ─────────────────────── */

.assignment-progress[b-8nk9o8mlxz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assignment-progress-label[b-8nk9o8mlxz] {
    font-size: 0.8rem;
    color: var(--m-text-2);
    font-weight: 500;
}

.assignment-progress-track[b-8nk9o8mlxz] {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    overflow: hidden;
    max-width: 300px;
}

.assignment-progress-fill[b-8nk9o8mlxz] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 70%, var(--m-accent)));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

/* ── Card Skeleton ───────────────────────────────── */

.skeleton-pulse[b-8nk9o8mlxz] {
    animation: skeleton-shimmer-b-8nk9o8mlxz 1.6s ease-in-out infinite;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 90%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%);
    background-size: 200% 100%;
    border-radius: 8px;
}

@keyframes skeleton-shimmer-b-8nk9o8mlxz {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-banner[b-8nk9o8mlxz] {
    height: 130px;
    border-radius: 20px;
}

.skeleton-card[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-surface) 90%, transparent);
    border: 1px solid var(--m-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    min-height: 280px;
}

.skeleton-avatar[b-8nk9o8mlxz] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.skeleton-line[b-8nk9o8mlxz] {
    height: 14px;
    width: 100%;
    border-radius: 7px;
}

.w-65[b-8nk9o8mlxz] { width: 65%; }
.w-40[b-8nk9o8mlxz] { width: 40%; }

.skeleton-media-row[b-8nk9o8mlxz] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.skeleton-btn-sm[b-8nk9o8mlxz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.skeleton-assign[b-8nk9o8mlxz] {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    margin-top: auto;
}

/* ── Assignment Action Bar ───────────────────────── */

.assignment-action-bar[b-8nk9o8mlxz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--m-surface) 85%, transparent);
    border: 1px solid var(--m-border);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-text) 8%, transparent);
    flex-wrap: wrap;
}

.assignment-action-right[b-8nk9o8mlxz] {
    flex-wrap: wrap;
    align-items: center;
}

.btn-assignment-back[b-8nk9o8mlxz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--m-border);
    background: transparent;
    color: var(--m-text-2);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assignment-action-button[b-8nk9o8mlxz] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.assignment-action-button .material-symbols-outlined[b-8nk9o8mlxz],
.assignment-warning-action .material-symbols-outlined[b-8nk9o8mlxz] {
    font-size: 1.125rem;
    line-height: 1;
}

.assignment-primary-action[b-8nk9o8mlxz] {
    min-width: 148px;
    font-weight: 800;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--m-primary) 34%, transparent);
}

.assignment-needed-alert[b-8nk9o8mlxz] {
    border-color: var(--m-warning-border);
    background: var(--m-warning-bg);
    color: var(--m-text);
}

.assignment-needed-copy[b-8nk9o8mlxz],
.assignment-warning-action[b-8nk9o8mlxz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    line-height: 1.2;
}

.assignment-warning-action[b-8nk9o8mlxz] {
    border-color: var(--m-warning-border);
    color: var(--m-warning);
    background: color-mix(in srgb, var(--m-warning) 8%, transparent);
}

.assignment-warning-action:hover[b-8nk9o8mlxz],
.assignment-warning-action:focus-visible[b-8nk9o8mlxz] {
    border-color: var(--m-warning);
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-warning) 18%, transparent);
}

.assignment-toast[b-8nk9o8mlxz] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--m-text);
    background: var(--m-surface-elevated);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-sm);
}

.assignment-toast-undo[b-8nk9o8mlxz] {
    min-width: 44px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 10%, transparent);
    font-weight: 800;
}

.assignment-toast-undo:hover[b-8nk9o8mlxz],
.assignment-toast-undo:focus-visible[b-8nk9o8mlxz] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-teal) 18%, transparent);
}

.btn-assignment-back:hover[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
}

/* dark mode for new elements */
html[data-theme="dark"] .scenario-banner[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-surface) 70%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 25%, transparent);
}

html[data-theme="dark"] .assignment-action-bar[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-surface) 70%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scenario-banner-blob-1[b-8nk9o8mlxz],
    .scenario-banner-blob-2[b-8nk9o8mlxz] {
        animation: none;
    }

    .assignment-progress-fill[b-8nk9o8mlxz] {
        transition: none;
    }

    .skeleton-pulse[b-8nk9o8mlxz] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 70%, transparent);
    }
}



.loading-container[b-8nk9o8mlxz] {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.assignment-shell[b-8nk9o8mlxz] {
    background:
        radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 45%),
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 45%);
    border-radius: 22px;
    padding: 20px;
}

.assignment-header[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-surface) 88%, transparent);
    border-radius: 16px;
    border: 1px solid var(--m-border);
    padding: 14px 18px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--m-text) 8%, transparent);
}

.player-avatar-large[b-8nk9o8mlxz] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop[b-8nk9o8mlxz] {
    background-color: color-mix(in srgb, var(--m-text) 60%, transparent);
}

.modal-backdrop-dark[b-8nk9o8mlxz] {
    background-color: color-mix(in srgb, var(--m-text) 80%, transparent);
}

.character-avatar[b-8nk9o8mlxz] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--m-primary);
}

.character-avatar-placeholder[b-8nk9o8mlxz] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--m-surface);
    border: 3px solid var(--m-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text-2);
}

.player-avatar[b-8nk9o8mlxz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--m-primary);
}

.player-avatar-placeholder[b-8nk9o8mlxz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--m-surface);
    border: 2px solid var(--m-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text-2);
    font-size: 0.75rem;
}

.player-assignment .assigned-player[b-8nk9o8mlxz] {
    border: 1px solid var(--m-border);
    background-color: color-mix(in srgb, var(--m-surface) 90%, transparent);
}

.player-assignment .assigned-player:hover[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 12%, transparent);
}

/* Character card hover effects */
.character-card[b-8nk9o8mlxz] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative; /* For energy effect */
}

/* Energy card polish for character cards */
html[data-theme="dark"] .character-card.m-energy-card[b-8nk9o8mlxz]::after {
    background: var(--m-surface);
}

.character-card:hover[b-8nk9o8mlxz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--m-text) 16%, transparent);
}

.character-card.border-secondary[b-8nk9o8mlxz] {
    opacity: 0.7;
}

.character-card.border-secondary:hover[b-8nk9o8mlxz] {
    opacity: 1;
}

/* Media Controls */
.media-controls[b-8nk9o8mlxz] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* .btn-media* styling moved to CharacterCard.razor.css (the component that
   renders these buttons) — page-scoped rules here never reached them under
   Blazor CSS isolation. */

/* Assign Player Button */
.btn-assign-player[b-8nk9o8mlxz] {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 2px dashed color-mix(in srgb, var(--m-primary) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-primary) 6%, transparent);
    color: var(--m-primary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-assign-player span:not(.material-symbols-outlined)[b-8nk9o8mlxz] {
    display: inline-flex;
    align-items: center;
    min-height: 1.1rem;
}

.btn-assign-player:hover[b-8nk9o8mlxz] {
    border-style: solid;
    border-color: var(--m-primary);
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-text) 30%) 100%);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

/* Character assignment specific responsive */
@media (max-width: 768px) {
    .character-avatar[b-8nk9o8mlxz],
    .character-avatar-placeholder[b-8nk9o8mlxz] {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 576px) {
    .character-avatar[b-8nk9o8mlxz],
    .character-avatar-placeholder[b-8nk9o8mlxz] {
        width: 50px;
        height: 50px;
    }
}

/* ── Mobile compaction (≤576px) ──────────────────────────────────────
   Stakeholder feedback: the Assign Players screen was too bulky on phones.
   Trim page chrome — the shell padding (which overrides .py-4), the scenario
   banner, and the 2-up card-grid gutters — so more cards fit on screen.
   Desktop (≥576px) is intentionally untouched. */
@media (max-width: 576px) {
    .assignment-shell[b-8nk9o8mlxz] {
        padding: 12px;
        border-radius: 16px;
    }

    .scenario-banner[b-8nk9o8mlxz] {
        padding: 14px 16px;
        border-radius: 16px;
    }

    .scenario-banner-title[b-8nk9o8mlxz] {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    /* Tighten the card grid gutters (Bootstrap g-4 = 1.5rem). The custom
       properties cascade from the row to its columns, shrinking the gap
       between the two 2-up cards both horizontally and vertically. */
    .assignment-card-grid[b-8nk9o8mlxz] {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
}

/* Modal Styling */
.modal-content[b-8nk9o8mlxz] {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    box-shadow: 0 10px 40px color-mix(in srgb, var(--m-text) 20%, transparent);
}

.modal-header[b-8nk9o8mlxz] {
    border-bottom: 1px solid color-mix(in srgb, var(--m-primary) 15%, transparent);
    padding: 1.25rem 1.5rem;
}

.modal-title[b-8nk9o8mlxz] {
    font-weight: 600;
}

.modal-body[b-8nk9o8mlxz] {
    padding: 1.5rem;
}

.modal-footer[b-8nk9o8mlxz] {
    border-top: 1px solid color-mix(in srgb, var(--m-primary) 15%, transparent);
    padding: 1rem 1.5rem;
}

/* Modal Nav Tabs */
.modal-body .nav-tabs[b-8nk9o8mlxz] {
    border-bottom: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.modal-body .nav-tabs .nav-link[b-8nk9o8mlxz] {
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-body .nav-tabs .nav-link:hover[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    color: var(--m-primary);
}

.modal-body .nav-tabs .nav-link.active[b-8nk9o8mlxz] {
    background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary) 100%);
    color: var(--m-on-primary);
    border: none;
}

/* Form Controls in Modal */
.modal-body .form-control[b-8nk9o8mlxz],
.modal-body .form-select[b-8nk9o8mlxz] {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border: 2px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    transition: all 0.2s ease;
}

.modal-body .form-control:focus[b-8nk9o8mlxz],
.modal-body .form-select:focus[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.modal-body .form-label[b-8nk9o8mlxz] {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Assigned Player Card */
.assigned-player-card[b-8nk9o8mlxz] {
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 12px;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
    transition: all 0.2s ease;
}

.assigned-player-card:hover[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

/* AI Player Badge */
.ai-player-badge[b-8nk9o8mlxz] {
    background: linear-gradient(135deg, var(--m-info) 0%, color-mix(in srgb, var(--m-info) 85%, var(--m-text)) 100%);
    color: var(--m-on-primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Disabled Button Tooltip Container */
.btn-disabled-wrapper[b-8nk9o8mlxz] {
    position: relative;
    display: inline-block;
}

.btn-disabled-wrapper button:disabled[b-8nk9o8mlxz] {
    pointer-events: none;
}

.btn-disabled-wrapper:hover .disabled-tooltip[b-8nk9o8mlxz] {
    visibility: visible;
    opacity: 1;
}

.disabled-tooltip[b-8nk9o8mlxz] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--m-surface);
    color: var(--m-on-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    z-index: 1000;
}

.disabled-tooltip[b-8nk9o8mlxz]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--m-surface);
}

.profile-preview-backdrop[b-8nk9o8mlxz] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: color-mix(in srgb, var(--m-bg) 74%, transparent);
    backdrop-filter: blur(6px);
}

.profile-preview-dialog[b-8nk9o8mlxz] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: min(440px, calc(100vw - 2rem));
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 24%, var(--m-border));
    border-radius: 16px;
    background: var(--m-surface-elevated);
    color: var(--m-text);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}

.profile-preview-header[b-8nk9o8mlxz],
.profile-preview-footer[b-8nk9o8mlxz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-color: var(--m-border);
}

.profile-preview-header[b-8nk9o8mlxz] {
    border-bottom: 1px solid var(--m-border);
}

.profile-preview-header h3[b-8nk9o8mlxz] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--m-text);
}

.profile-preview-close[b-8nk9o8mlxz] {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--m-text-2);
    background: transparent;
}

.profile-preview-close:hover[b-8nk9o8mlxz],
.profile-preview-close:focus-visible[b-8nk9o8mlxz] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.profile-preview-body[b-8nk9o8mlxz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.profile-preview-avatar[b-8nk9o8mlxz] {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    overflow: hidden;
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
}

.profile-preview-avatar[b-8nk9o8mlxz]  img,
.profile-preview-avatar[b-8nk9o8mlxz]  .cached-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-preview-avatar .material-symbols-outlined[b-8nk9o8mlxz] {
    font-size: 2.5rem;
}

.profile-preview-copy[b-8nk9o8mlxz] {
    min-width: 0;
}

.profile-preview-name[b-8nk9o8mlxz] {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profile-preview-meta[b-8nk9o8mlxz] {
    margin-top: 0.35rem;
    color: var(--m-text-2);
    font-size: 0.9rem;
}

.profile-preview-bio[b-8nk9o8mlxz] {
    margin: 0.75rem 0 0;
    color: var(--m-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.profile-preview-footer[b-8nk9o8mlxz] {
    justify-content: flex-end;
    border-top: 1px solid var(--m-border);
}

/* Dark mode toggle support */
html[data-theme="dark"] .modal-content[b-8nk9o8mlxz] {
    background: var(--m-bg);
    border-color: var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .modal-header[b-8nk9o8mlxz] {
    border-bottom-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

html[data-theme="dark"] .modal-header .btn-close[b-8nk9o8mlxz] {
    filter: invert(1);
}

html[data-theme="dark"] .modal-footer[b-8nk9o8mlxz] {
    border-top-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

html[data-theme="dark"] .modal-body .nav-tabs[b-8nk9o8mlxz] {
    border-bottom-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

html[data-theme="dark"] .modal-body .nav-tabs .nav-link[b-8nk9o8mlxz] {
    color: var(--m-secondary);
}

html[data-theme="dark"] .modal-body .nav-tabs .nav-link:hover[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    color: var(--m-text-2);
}

html[data-theme="dark"] .modal-body .nav-tabs .nav-link.active[b-8nk9o8mlxz] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    color: var(--m-on-primary);
}

html[data-theme="dark"] .modal-body .form-control[b-8nk9o8mlxz],
html[data-theme="dark"] .modal-body .form-select[b-8nk9o8mlxz] {
    background: var(--m-bg);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-text);
}

html[data-theme="dark"] .modal-body .form-control[b-8nk9o8mlxz]::placeholder {
    color: var(--m-primary);
}

html[data-theme="dark"] .modal-body .form-control:focus[b-8nk9o8mlxz],
html[data-theme="dark"] .modal-body .form-select:focus[b-8nk9o8mlxz] {
    background: var(--m-bg);
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-text);
}

html[data-theme="dark"] .modal-body .form-label[b-8nk9o8mlxz] {
    color: var(--m-text);
}

html[data-theme="dark"] .modal-body .alert-info[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-text-2);
}

html[data-theme="dark"] .modal-body .alert-warning[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-warning) 15%, transparent);
    border-color: var(--m-warning);
    color: var(--m-warning-text, var(--m-text));
}

html[data-theme="dark"] .assigned-player-card[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
}

html[data-theme="dark"] .assigned-player-card:hover[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

html[data-theme="dark"] .character-card[b-8nk9o8mlxz] {
    background: var(--m-surface);
    border-color: var(--m-border);
}

html[data-theme="dark"] .character-card:hover[b-8nk9o8mlxz] {
    border-color: var(--m-primary);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

html[data-theme="dark"] .character-card .card-title[b-8nk9o8mlxz] {
    color: var(--m-text);
}

html[data-theme="dark"] .character-card .text-muted[b-8nk9o8mlxz] {
    color: var(--m-secondary) !important;
}

/* Loading and Error States */
.assignment-loading[b-8nk9o8mlxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.assignment-loading-icon[b-8nk9o8mlxz] {
    font-size: 3rem;
    color: var(--m-primary);
    animation: loading-pulse-b-8nk9o8mlxz 1.5s ease-in-out infinite;
    margin-bottom: 1rem;
}

@keyframes loading-pulse-b-8nk9o8mlxz {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.assignment-error-icon[b-8nk9o8mlxz] {
    font-size: 3rem;
    color: var(--m-text-2);
    margin-bottom: 1rem;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .assignment-loading-icon[b-8nk9o8mlxz] {
        animation: none;
    }
}

/* Dark mode for assign button (.btn-media* dark styling now lives in
   CharacterCard.razor.css). */
html[data-theme="dark"] .btn-assign-player[b-8nk9o8mlxz] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-secondary);
}

html[data-theme="dark"] .btn-assign-player:hover[b-8nk9o8mlxz] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .character-card[b-8nk9o8mlxz],
    .btn-assign-player[b-8nk9o8mlxz],
    .assigned-player-card[b-8nk9o8mlxz],
    .modal-body .nav-tabs .nav-link[b-8nk9o8mlxz],
    .modal-body .form-control[b-8nk9o8mlxz],
    .modal-body .form-select[b-8nk9o8mlxz],
    .disabled-tooltip[b-8nk9o8mlxz] {
        transition: none;
    }

    .character-card:hover[b-8nk9o8mlxz],
    .btn-assign-player:hover[b-8nk9o8mlxz] {
        transform: none;
    }
}
/* /Pages/ConsentRequiredPage.razor.rz.scp.css */
/* /profiles/consent-required landing page — Dragon Scale tokens.
   Mirrors the visual shell from Pages/Authentication/ParentalConsent.razor.css so
   both COPPA touchpoints feel like a single flow. All colours are tokenised via
   --m-* so the Albino / Obsidian / Bright themes track automatically. */

.consent-required-shell[b-1atpzm7jiu] {
    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

.consent-required-shell[b-1atpzm7jiu]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 50%),
        radial-gradient(900px circle at 80% 60%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 50%);
    opacity: 0.9;
}

.consent-required-content[b-1atpzm7jiu] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.consent-required-logo-link[b-1atpzm7jiu] {
    display: block;
    margin-bottom: 0.25rem;
}

.consent-required-logo[b-1atpzm7jiu] {
    height: 64px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--m-primary) 50%, transparent));
}

.consent-required-card[b-1atpzm7jiu] {
    width: 100%;
    border-radius: 24px;
    padding: 2.25rem 1.75rem;
    border: 1px solid var(--m-border);
    text-align: center;
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 20%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-teal) 12%, transparent), transparent 60%),
        var(--m-surface);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.consent-required-card--success[b-1atpzm7jiu] {
    background:
        radial-gradient(1200px circle at 20% 10%, color-mix(in srgb, var(--m-primary) 22%, transparent), transparent 55%),
        radial-gradient(900px circle at 70% 35%, color-mix(in srgb, var(--m-success, var(--m-teal)) 14%, transparent), transparent 60%),
        var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
}

.consent-required-icon[b-1atpzm7jiu] {
    font-size: 2.75rem;
    color: var(--m-primary);
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-primary) 45%, transparent));
}

.consent-required-icon > .material-symbols-outlined[b-1atpzm7jiu] {
    font-size: 2.75rem;
}

.consent-required-success-icon[b-1atpzm7jiu] {
    font-size: 2.75rem;
    color: var(--m-primary);
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m-primary) 45%, transparent));
}

.consent-required-success-icon > .material-symbols-outlined[b-1atpzm7jiu] {
    font-size: 2.75rem;
}

.consent-required-heading[b-1atpzm7jiu] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--m-text);
}

.consent-required-message[b-1atpzm7jiu] {
    margin: 0 0 1rem 0;
    color: var(--m-text-2);
    font-size: 1rem;
    line-height: 1.5;
}

.consent-required-message strong[b-1atpzm7jiu] {
    color: var(--m-text);
}

.consent-required-muted[b-1atpzm7jiu] {
    margin: 0 0 0.5rem 0;
    color: var(--m-text-2);
    font-size: 0.95rem;
    line-height: 1.45;
}

.consent-required-meta[b-1atpzm7jiu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: var(--m-text-2);
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, var(--m-border));
}

.consent-required-meta strong[b-1atpzm7jiu] {
    color: var(--m-text);
    font-weight: 600;
}

.consent-required-meta-icon[b-1atpzm7jiu] {
    font-size: 1.05rem;
    color: var(--m-primary);
}

.consent-required-detail[b-1atpzm7jiu] {
    margin: 0 0 1.5rem 0;
    color: var(--m-text-2);
    font-size: 0.95rem;
    line-height: 1.5;
}

.consent-required-form[b-1atpzm7jiu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.consent-required-field[b-1atpzm7jiu] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.consent-required-label[b-1atpzm7jiu] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--m-text);
}

.consent-required-input[b-1atpzm7jiu] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 1rem;
    line-height: 1.4;
    transition:
        border-color var(--m-dur-fast) var(--m-ease-smooth),
        box-shadow var(--m-dur-fast) var(--m-ease-smooth);
}

.consent-required-input[b-1atpzm7jiu]::placeholder {
    color: var(--m-text-2);
    opacity: 0.7;
}

.consent-required-input:focus-visible[b-1atpzm7jiu] {
    outline: none;
    border-color: var(--m-primary);
    box-shadow: var(--m-ring);
}

.consent-required-help-text[b-1atpzm7jiu] {
    font-size: 0.85rem;
    color: var(--m-text-2);
    line-height: 1.4;
}

.consent-required-alert[b-1atpzm7jiu] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.consent-required-alert--error[b-1atpzm7jiu] {
    background: color-mix(in srgb, var(--m-error) 10%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-error) 35%, var(--m-border));
    color: var(--m-text);
}

.consent-required-alert--warning[b-1atpzm7jiu] {
    background: color-mix(in srgb, var(--m-warning, var(--m-teal)) 10%, var(--m-surface));
    border: 1px solid color-mix(in srgb, var(--m-warning, var(--m-teal)) 35%, var(--m-border));
    color: var(--m-text);
}

.consent-required-alert-icon[b-1atpzm7jiu] {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.consent-required-alert--error .consent-required-alert-icon[b-1atpzm7jiu] {
    color: var(--m-error);
}

.consent-required-alert--warning .consent-required-alert-icon[b-1atpzm7jiu] {
    color: var(--m-warning, var(--m-teal));
}

.consent-required-actions[b-1atpzm7jiu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.consent-required-btn-primary[b-1atpzm7jiu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: var(--m-primary);
    color: var(--m-on-primary);
    transition:
        transform var(--m-dur-fast) var(--m-ease-spring),
        box-shadow var(--m-dur-fast) var(--m-ease-smooth);
}

.consent-required-btn-primary:hover:not(:disabled)[b-1atpzm7jiu] {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-glow);
}

.consent-required-btn-primary:focus-visible[b-1atpzm7jiu] {
    outline: none;
    box-shadow: var(--m-ring), var(--m-shadow-glow);
}

.consent-required-btn-primary:disabled[b-1atpzm7jiu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.consent-required-btn-ghost[b-1atpzm7jiu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    cursor: pointer;
    transition:
        background var(--m-dur-fast) var(--m-ease-smooth),
        border-color var(--m-dur-fast) var(--m-ease-smooth);
}

.consent-required-btn-ghost:hover[b-1atpzm7jiu] {
    background: var(--m-surface-hover);
    border-color: var(--m-selected-border);
}

.consent-required-spinner-inline[b-1atpzm7jiu] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--m-on-primary) 35%, transparent);
    border-top-color: var(--m-on-primary);
    border-radius: 50%;
    animation: consent-required-spin-b-1atpzm7jiu 0.8s linear infinite;
}

/* Light mode contrast — see ParentalConsent.razor.css for the rationale. */
:is(html[data-theme="light"], html[data-theme="bright"]) .consent-required-btn-ghost[b-1atpzm7jiu] {
    border-color: var(--m-selected-border);
    background: var(--m-surface-hover);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .consent-required-btn-ghost:hover[b-1atpzm7jiu] {
    border-color: color-mix(in srgb, var(--m-primary) 55%, var(--m-selected-border));
    background: var(--m-surface-selected);
}

@keyframes consent-required-spin-b-1atpzm7jiu {
    to { transform: rotate(360deg); }
}

/* Mobile-first; the shell already scales but tweak padding on small screens
   so the card hugs the viewport more tightly. */
@media (max-width: 480px) {
    .consent-required-shell[b-1atpzm7jiu] {
        padding: 1.25rem 0.75rem;
    }
    .consent-required-card[b-1atpzm7jiu] {
        padding: 1.75rem 1.25rem;
    }
    .consent-required-actions[b-1atpzm7jiu] {
        flex-direction: column;
        align-items: stretch;
    }
    .consent-required-btn-primary[b-1atpzm7jiu],
    .consent-required-btn-ghost[b-1atpzm7jiu] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consent-required-spinner-inline[b-1atpzm7jiu] {
        animation: none;
    }
    .consent-required-btn-primary:hover:not(:disabled)[b-1atpzm7jiu] {
        transform: none;
    }
}
/* /Pages/DemoPage.razor.rz.scp.css */
/* ── Shell ──────────────────────────────────────────────────── */

.demo-shell[b-92zy249nud] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--m-bg);
  color: var(--m-text);
}

/* ── Header ─────────────────────────────────────────────────── */

.demo-header[b-92zy249nud] {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--m-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--m-text) 8%, transparent);
}

.demo-home-link[b-92zy249nud] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Mid-story the logo is a non-interactive brand mark (no back navigation). */
.demo-home-link--static[b-92zy249nud] {
  cursor: default;
}

.demo-logo[b-92zy249nud] {
  height: 28px;
  width: auto;
}

.demo-story-label[b-92zy249nud] {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-header-home[b-92zy249nud] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.5rem 0.9rem;
  color: var(--m-text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--m-primary) 34%, var(--m-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--m-primary) 12%, transparent);
  font-size: 0.875rem;
  font-weight: 650;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.demo-header-home:hover[b-92zy249nud] {
  color: var(--m-on-primary);
  background: var(--m-primary);
  border-color: var(--m-primary);
}

.demo-header-home:focus-visible[b-92zy249nud] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

.demo-mute-btn[b-92zy249nud] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--m-text-2);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--m-text) 12%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.demo-mute-btn:hover[b-92zy249nud] {
  background: color-mix(in srgb, var(--m-text) 8%, transparent);
  color: var(--m-text);
}

.demo-mute-btn:focus-visible[b-92zy249nud] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

/* ── Main content ────────────────────────────────────────────── */

.demo-main[b-92zy249nud] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 56px;
}

/* ── Scene card ─────────────────────────────────────────────── */

.demo-scene[b-92zy249nud] {
  width: 100%;
  max-width: min(1120px, calc(100vw - 32px));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
  background: color-mix(in srgb, var(--m-surface) 76%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow:
    0 18px 54px color-mix(in srgb, var(--m-primary) 16%, transparent),
    var(--m-shadow-md);
}

.demo-scene.scene-enter[b-92zy249nud] {
  animation: ds-enter-b-92zy249nud 0.35s ease-out both;
}

.demo-scene.scene-exit[b-92zy249nud] {
  animation: ds-exit-b-92zy249nud 0.18s ease-in both;
}

@keyframes ds-enter-b-92zy249nud {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ds-exit-b-92zy249nud {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ── Scene image / video ─────────────────────────────────────── */

.demo-scene-image[b-92zy249nud] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(62vh, 640px);
  object-fit: cover;
}

.demo-scene-video[b-92zy249nud] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: color-mix(in srgb, var(--m-bg) 92%, var(--m-surface));
}

.demo-scene-video-container[b-92zy249nud] {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(62vh, 640px);
  background: color-mix(in srgb, var(--m-bg) 92%, var(--m-surface));
  overflow: hidden;
  position: relative;
  min-height: 360px;
}

.demo-scene-video-container .demo-scene-video[b-92zy249nud] {
  height: 100%;
  position: relative;
  z-index: 1;
}

/* ── Scene text content ──────────────────────────────────────── */

.demo-scene-content[b-92zy249nud] {
  padding: clamp(22px, 3vw, 34px);
}

.demo-scene-title[b-92zy249nud] {
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 700;
  color: var(--m-text);
  line-height: 1.25;
  margin: 0 0 12px;
}

.demo-scene-body[b-92zy249nud] {
  max-width: 74ch;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.7;
  color: var(--m-text-2);
}

.demo-scene-body p[b-92zy249nud] {
  margin: 0 0 0.75em;
}

.demo-scene-body p:last-child[b-92zy249nud] {
  margin-bottom: 0;
}

/* ── Actions ─────────────────────────────────────────────────── */

.demo-scene-actions[b-92zy249nud] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  animation: ds-actions-enter-b-92zy249nud 0.3s ease-out 0.15s both;
}

@keyframes ds-actions-enter-b-92zy249nud {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Buttons ─────────────────────────────────────────────────── */

.demo-btn[b-92zy249nud] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  font-size: 0.975rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: normal;
  line-height: 1.4;
}

.demo-btn:focus-visible[b-92zy249nud] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

.demo-btn-primary[b-92zy249nud] {
  background: linear-gradient(
    135deg,
    var(--m-primary) 0%,
    var(--m-secondary) 100%
  );
  color: var(--m-on-primary);
  border: none;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 30%, transparent);
  align-self: flex-start;
}

.demo-btn-primary:hover[b-92zy249nud] {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.demo-btn-choice[b-92zy249nud] {
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
  color: var(--m-text);
  border: 1px solid color-mix(in srgb, var(--m-accent) 15%, transparent);
  width: 100%;
  min-height: 52px;
  text-align: left;
  justify-content: flex-start;
}

.demo-btn-choice:hover[b-92zy249nud] {
  background: color-mix(in srgb, var(--m-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--m-accent) 30%, transparent);
  transform: translateX(4px);
}

/* ── Archetype reveal ────────────────────────────────────────── */

.demo-archetype-reveal[b-92zy249nud] {
  display: flex;
  flex-direction: column;
}

.demo-archetype-image[b-92zy249nud] {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.demo-archetype-body[b-92zy249nud] {
  padding: 24px 24px 0;
}

.demo-archetype-eyebrow[b-92zy249nud] {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 6px;
}

.demo-archetype-name[b-92zy249nud] {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--m-text);
  margin: 0 0 14px;
  line-height: 1.1;
}

.demo-archetype-desc[b-92zy249nud] {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--m-text-2);
  margin: 0;
}

.demo-archetype-cta[b-92zy249nud] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--m-text) 8%, transparent);
  margin-top: 24px;
}

.demo-archetype-cta-label[b-92zy249nud] {
  font-size: 0.875rem;
  color: var(--m-text-2);
  margin: 0;
  max-width: 360px;
}

.demo-btn-cta[b-92zy249nud] {
  width: 100%;
  max-width: 360px;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
  animation: ds-cta-pulse-b-92zy249nud 3s ease-in-out infinite;
}

@keyframes ds-cta-pulse-b-92zy249nud {
  0%,
  100% {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 30%, transparent);
  }
  50% {
    box-shadow:
      0 4px 24px color-mix(in srgb, var(--m-primary) 45%, transparent),
      0 0 48px color-mix(in srgb, var(--m-primary) 12%, transparent);
  }
}

.demo-home-cta[b-92zy249nud] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 1rem;
  font-size: 0.925rem;
  font-weight: 650;
  color: var(--m-text-2);
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--m-text) 12%, transparent);
  background: color-mix(in srgb, var(--m-text) 5%, transparent);
}

.demo-home-cta:hover[b-92zy249nud] {
  color: var(--m-text);
  border-color: color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
  background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.demo-home-cta:focus-visible[b-92zy249nud] {
  outline: 2px solid var(--m-primary);
  outline-offset: 2px;
}

/* ── Loading state ───────────────────────────────────────────── */

/* Full-viewport loading: the story fetch can be slow, so the screen must
   clearly read as "loading" rather than frozen. Fills the available space
   under the header and centres a visible spinner + label above the skeleton. */
.demo-loading[b-92zy249nud] {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  min-height: 60dvh;
}

.demo-loading-indicator[b-92zy249nud] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.demo-loading-spinner[b-92zy249nud] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--m-primary) 22%, transparent);
  border-top-color: var(--m-primary);
  animation: demo-spin-b-92zy249nud 0.8s linear infinite;
}

@keyframes demo-spin-b-92zy249nud {
  to {
    transform: rotate(360deg);
  }
}

.demo-loading-label[b-92zy249nud] {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--m-text-2);
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .demo-loading-spinner[b-92zy249nud] {
    animation-duration: 1.6s;
  }
}

/* ── Skeleton loading ────────────────────────────────────────── */

@keyframes skeleton-shimmer-b-92zy249nud {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-pulse[b-92zy249nud] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--m-surface-elevated) 80%, transparent) 25%,
    color-mix(in srgb, var(--m-surface-elevated) 50%, transparent) 50%,
    color-mix(in srgb, var(--m-surface-elevated) 80%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer-b-92zy249nud 1.5s ease-in-out infinite;
}

.demo-skeleton[b-92zy249nud] {
  width: 100%;
  max-width: min(1120px, calc(100vw - 32px));
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--m-text) 8%, transparent);
}

.demo-skeleton-image[b-92zy249nud] {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 360px;
  background: color-mix(in srgb, var(--m-text) 8%, transparent);
}

.demo-skeleton-lines[b-92zy249nud] {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-skeleton-line[b-92zy249nud] {
  height: 1rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--m-text) 8%, transparent);
}

/* ── Error state ─────────────────────────────────────────────── */

.demo-error[b-92zy249nud] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
  color: var(--m-text-2);
}

/* ── Light mode overrides ────────────────────────────────────── */

.demo-shell:is([data-theme="light"], [data-theme="bright"])[b-92zy249nud] {
  background: var(--m-bg);
}

.demo-shell:is([data-theme="light"], [data-theme="bright"]) .demo-scene[b-92zy249nud] {
  background: color-mix(in srgb, var(--m-surface) 95%, transparent);
  border-color: color-mix(in srgb, var(--m-secondary) 12%, transparent);
}

.demo-shell:is([data-theme="light"], [data-theme="bright"]) .demo-btn-choice[b-92zy249nud] {
  background: color-mix(in srgb, var(--m-surface) 90%, transparent);
}

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .demo-header[b-92zy249nud] {
    padding: 10px 12px;
  }

  .demo-header-home[b-92zy249nud] {
    min-height: 34px;
    padding-inline: 0.75rem;
  }

  .demo-main[b-92zy249nud] {
    padding: 16px 12px 40px;
  }

  .demo-scene-image[b-92zy249nud] {
    min-height: 220px;
  }
  .demo-scene-video[b-92zy249nud] {
    background: color-mix(in srgb, var(--m-bg) 92%, var(--m-surface));
  }
  .demo-scene-video-container[b-92zy249nud] {
    min-height: 220px;
  }

  .demo-archetype-image[b-92zy249nud] {
    height: 220px;
  }

  .demo-scene-content[b-92zy249nud] {
    padding: 16px 18px 20px;
  }

  .demo-scene-title[b-92zy249nud] {
    font-size: 1.35rem;
  }

  .demo-archetype-name[b-92zy249nud] {
    font-size: 1.5rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .demo-scene.scene-enter[b-92zy249nud],
  .demo-scene.scene-exit[b-92zy249nud],
  .demo-scene-actions[b-92zy249nud],
  .demo-btn-cta[b-92zy249nud] {
    animation: none;
  }

  .demo-btn-choice:hover[b-92zy249nud] {
    transform: none;
  }

  .demo-btn-primary:hover[b-92zy249nud] {
    transform: none;
  }
}
/* /Pages/Feedback.razor.rz.scp.css */
.feedback-page[b-lm82xr5e6r] {
    min-height: min(42rem, 70vh);
    padding: 1rem 0 1.5rem;
}

.feedback-shell[b-lm82xr5e6r] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 0;
}

/* The shared header carries PageHeader's own scope attribute, so ::deep is
   required to reach it. Zero its bottom margin so the .feedback-shell flex
   gap (1.25rem) owns the header→content rhythm instead of doubling it. */
.feedback-shell[b-lm82xr5e6r]  .page-header {
    margin-bottom: 0;
}

.feedback-open-link[b-lm82xr5e6r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}

.feedback-frame[b-lm82xr5e6r] {
    display: block;
    width: 100%;
    min-height: min(72vh, 760px);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    border-radius: 12px;
    background: var(--m-card);
}

@media (max-width: 1232px) {
    .feedback-page[b-lm82xr5e6r] {
        padding-inline: 1rem;
    }
}

.feedback-loading[b-lm82xr5e6r] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--m-text-2);
    font-weight: 600;
}

.feedback-loading .material-symbols-outlined[b-lm82xr5e6r] {
    color: var(--m-primary);
}
/* /Pages/GameSession/AwardsModal.razor.rz.scp.css */
/* Awards modal overlay and card */

@keyframes awards-overlay-enter-b-3hd9aorif3 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes awards-card-enter-b-3hd9aorif3 {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.awards-modal-overlay[b-3hd9aorif3] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--m-bg) 72%, transparent);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: awards-overlay-enter-b-3hd9aorif3 var(--m-dur-base, 200ms) var(--m-ease-out, ease-out) both;
}

.awards-modal-card[b-3hd9aorif3] {
    width: 92%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: awards-card-enter-b-3hd9aorif3 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.awards-modal-body[b-3hd9aorif3] {
    overflow: auto;
}

/* ── Badge items ── */
.badge-award-item[b-3hd9aorif3] {
    min-width: 130px;
    background: var(--m-surface-elevated);
    border-radius: 12px;
    padding: 1rem;
}

.badge-award-img[b-3hd9aorif3] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

/* ── OtherNoBadges — softer, exploratory tone ── */
.alert-other-no-badges[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-surface-elevated) 80%, transparent);
    border: 1px solid var(--m-text-2);
    color: var(--m-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

html[data-theme="dark"] .alert-other-no-badges[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-surface-elevated) 60%, transparent);
    border-color: color-mix(in srgb, var(--m-text-2) 50%, transparent);
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .awards-modal-card[b-3hd9aorif3] {
        max-height: 90vh;
    }

    .badge-award-item[b-3hd9aorif3] {
        min-width: 110px;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .awards-modal-overlay[b-3hd9aorif3] {
        animation: none;
    }

    .awards-modal-card[b-3hd9aorif3] {
        animation: none;
    }
}

/* ── Trophy icon ── */
.awards-trophy-icon[b-3hd9aorif3] {
    font-size: 3.5rem;
    color: var(--m-accent);
    display: block;
    margin-bottom: 0.75rem;
}

/* ── Subtitles ── */
.awards-subtitle[b-3hd9aorif3] {
    color: var(--m-text-2);
    font-size: 0.95rem;
}

/* ── Profile name under badge ── */
.award-icon[b-3hd9aorif3] {
    font-size: 4rem;
    color: var(--m-accent);
}

.awards-profile-name[b-3hd9aorif3] {
    color: var(--m-text-2);
    font-size: 0.8rem;
}

/* ── Sparkle award "spend" quick link ── */
.sparkle-award-cta[b-3hd9aorif3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sparkle-award-cta .material-symbols-outlined[b-3hd9aorif3] {
    font-size: 1.1rem;
}

.sparkle-award-icon[b-3hd9aorif3] {
    color: var(--m-accent);
}

/* ── Footer link text ── */
.awards-footer-text[b-3hd9aorif3] {
    color: var(--m-text-2);
    font-size: 0.875rem;
}

/* ── Age group alert (orange-amber) ── */
.alert-age-group[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-warning) 35%, transparent);
    color: var(--m-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

html[data-theme="dark"] .alert-age-group[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-warning) 30%, transparent);
}

/* ── Already played alert (teal-info) ── */
.alert-already-played[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

html[data-theme="dark"] .alert-already-played[b-3hd9aorif3] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 22%, transparent);
}
/* /Pages/GameSession/FinalScene.razor.rz.scp.css */
/* ── FinalScene celebration container ── */

@keyframes final-scene-enter-b-cmt1gd4snx {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes completion-pulse-b-cmt1gd4snx {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--m-accent) 40%, transparent));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 14px color-mix(in srgb, var(--m-accent) 65%, transparent));
    }
}

.final-scene-celebration[b-cmt1gd4snx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    text-align: center;
    background: radial-gradient(
        ellipse 70% 60% at 50% 30%,
        color-mix(in srgb, var(--m-accent) 10%, transparent),
        transparent 70%
    );
    border-radius: var(--m-radius-lg, 16px);
    animation: final-scene-enter-b-cmt1gd4snx 0.4s var(--m-ease-smooth, ease-out) both;
}

.completion-icon[b-cmt1gd4snx] {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--m-accent);
    margin-bottom: 1.25rem;
    animation: completion-pulse-b-cmt1gd4snx 2.4s var(--m-ease-smooth, ease-in-out) infinite;
    /* Material Symbols Outlined display settings */
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.completion-subtitle[b-cmt1gd4snx] {
    color: var(--m-text-2);
    margin-bottom: 0;
    font-size: 1rem;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .final-scene-celebration[b-cmt1gd4snx] {
        animation: none;
    }

    .completion-icon[b-cmt1gd4snx] {
        animation: none;
    }
}
/* /Pages/GameSession/GameSessionHeader.razor.rz.scp.css */
/* Game Session Header */
.game-session-header[b-bteni27l0j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--m-card);
    border-radius: 12px;
    border: 1px solid var(--m-border);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 6%, transparent);
}

.game-session-title-area[b-bteni27l0j] {
    flex: 1;
    min-width: 0;
}

.game-session-title[b-bteni27l0j] {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--m-primary);
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-text) 30%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}

.game-session-controls[b-bteni27l0j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Game Control Buttons */
.btn-game-control[b-bteni27l0j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 10px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.btn-game-control:disabled[b-bteni27l0j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-game-control .material-symbols-outlined[b-bteni27l0j] {
    font-size: 0.9rem;
}

/* Pause Button */
.btn-pause[b-bteni27l0j] {
    background: transparent;
    border-color: var(--m-text-2);
    color: var(--m-text-2);
}

.btn-pause:hover:not(:disabled)[b-bteni27l0j] {
    background: var(--m-text-2);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text-2) 25%, transparent);
}

/* Resume Button */
.btn-resume[b-bteni27l0j] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-text) 30%) 100%);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 25%, transparent);
}

.btn-resume:hover:not(:disabled)[b-bteni27l0j] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 80%, var(--m-text) 20%) 0%, color-mix(in srgb, var(--m-primary) 65%, var(--m-text) 35%) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 35%, transparent);
}

/* Exit Button */
.btn-exit[b-bteni27l0j] {
    background: color-mix(in srgb, var(--m-warning-bg) 72%, transparent);
    border-color: color-mix(in srgb, var(--m-warning) 46%, transparent);
    color: var(--m-warning);
}

.btn-exit:hover:not(:disabled)[b-bteni27l0j] {
    background: linear-gradient(135deg, var(--m-warning) 0%, color-mix(in srgb, var(--m-warning) 74%, var(--m-bg) 26%) 100%);
    border-color: var(--m-warning);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-warning) 30%, transparent);
}

/* Volume control group */
.volume-control[b-bteni27l0j] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-volume-icon[b-bteni27l0j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--m-text-2);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.btn-volume-icon:hover[b-bteni27l0j] {
    color: var(--m-primary);
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.btn-volume-icon .material-symbols-outlined[b-bteni27l0j] {
    font-size: 1.1rem;
}

/* Range slider — cross-browser token-aligned styling */
.volume-slider[b-bteni27l0j] {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    border-radius: 2px;
    background: var(--m-border);
    outline: none;
    cursor: pointer;
    /* Active track tint via accent-color (progressively enhanced) */
    accent-color: var(--m-primary);
}

/* Thumb — WebKit */
.volume-slider[b-bteni27l0j]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--m-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.volume-slider[b-bteni27l0j]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* Thumb — Firefox */
.volume-slider[b-bteni27l0j]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--m-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.volume-slider[b-bteni27l0j]::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

/* Track — Firefox (inactive portion) */
.volume-slider[b-bteni27l0j]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--m-border);
}

/* Focus ring — keyboard accessibility */
.volume-slider:focus-visible[b-bteni27l0j] {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Mystira logo styling */
.mystira-logo[b-bteni27l0j] {
    border-radius: 0.5rem;
    object-fit: contain;
}

/* Dark mode enhancements */
html[data-theme="dark"] .game-session-header[b-bteni27l0j] {
    background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-bg) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 30%, transparent);
}

html[data-theme="dark"] .btn-pause[b-bteni27l0j] {
    border-color: var(--m-text-2);
    color: var(--m-text-2);
}

html[data-theme="dark"] .btn-pause:hover:not(:disabled)[b-bteni27l0j] {
    background: color-mix(in srgb, var(--m-text-2) 70%, var(--m-bg));
    border-color: color-mix(in srgb, var(--m-text-2) 70%, var(--m-bg));
    color: var(--m-on-primary);
}

html[data-theme="dark"] .btn-resume[b-bteni27l0j] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 84%, var(--m-bg) 16%) 0%, color-mix(in srgb, var(--m-primary) 66%, var(--m-bg) 34%) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 86%, var(--m-on-primary) 14%);
    color: var(--m-on-primary);
}

html[data-theme="dark"] .btn-resume:hover:not(:disabled)[b-bteni27l0j] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 88%, var(--m-bg) 12%) 0%, color-mix(in srgb, var(--m-primary) 72%, var(--m-bg) 28%) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 90%, var(--m-on-primary) 10%);
    color: var(--m-on-primary);
}

html[data-theme="dark"] .btn-exit[b-bteni27l0j] {
    border-color: color-mix(in srgb, var(--m-warning) 72%, var(--m-on-primary));
    color: color-mix(in srgb, var(--m-warning) 76%, var(--m-on-primary));
}

html[data-theme="dark"] .btn-exit:hover:not(:disabled)[b-bteni27l0j] {
    background: linear-gradient(135deg, var(--m-warning) 0%, color-mix(in srgb, var(--m-warning) 82%, var(--m-bg)) 100%);
    border-color: color-mix(in srgb, var(--m-warning) 84%, var(--m-on-primary));
    color: var(--m-on-primary);
}

/* Light mode explicit overrides */
:is(html[data-theme="light"], html[data-theme="bright"]) .game-session-header[b-bteni27l0j] {
    background: var(--m-card);
    border-color: var(--m-border);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 6%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-pause[b-bteni27l0j] {
    border-color: var(--m-text-2);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-exit[b-bteni27l0j] {
    border-color: color-mix(in srgb, var(--m-warning) 55%, var(--m-on-primary));
    color: var(--m-warning);
}

/* Responsive Design */
@media (max-width: 768px) {
    .game-session-header[b-bteni27l0j] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding: 0.875rem;
    }

    .game-session-title[b-bteni27l0j] {
        font-size: 1.25rem;
    }

    .game-session-controls[b-bteni27l0j] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    .btn-game-control[b-bteni27l0j] {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
        min-width: 0;
    }

    .btn-game-control[b-bteni27l0j] {
        min-height: 2.5rem;
    }

    .btn-game-control span:not(.material-symbols-outlined)[b-bteni27l0j] {
        display: inline;
    }

    .volume-control[b-bteni27l0j] {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .mystira-logo[b-bteni27l0j] {
        display: none;
    }
}

@media (max-width: 480px) {
    .game-session-controls[b-bteni27l0j] {
        gap: 0.45rem;
    }

    .btn-game-control[b-bteni27l0j] {
        gap: 0.35rem;
        padding-inline: 0.5rem;
    }

    .volume-slider[b-bteni27l0j] {
        width: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-game-control[b-bteni27l0j] {
        transition: none;
    }

    .btn-game-control:hover[b-bteni27l0j] {
        transform: none;
    }
}

/* Light mode — Enchanted Scroll story area */
[b-bteni27l0j] .game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .game-session-header {
    background: color-mix(in srgb, var(--m-surface-elevated) 92%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
    box-shadow: var(--m-shadow-md);
}

[b-bteni27l0j] .game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .btn-game-control {
    background: var(--m-surface);
    color: var(--m-text);
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
}

[b-bteni27l0j] .game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .btn-game-control:hover {
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    border-color: var(--m-primary);
}
/* /Pages/GameSession/NoActiveAdventureState.razor.rz.scp.css */
.no-adventure-shell[b-kq8xm2l81t] {
    padding: 3rem 1rem;
    max-width: 500px;
    margin: auto;
}

.no-adventure-icon[b-kq8xm2l81t] {
    font-size: 3rem;
    color: var(--m-text-2);
    margin-bottom: 1rem;
    display: block;
}
/* /Pages/GameSession/RollScene.razor.rz.scp.css */
/* Roll Scene — dramatic dice roll experience */

.roll-scene[b-m6lg7frpgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Pre-roll prompt */
.roll-prompt[b-m6lg7frpgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: prompt-enter-b-m6lg7frpgw 0.4s ease-out both;
}

@keyframes prompt-enter-b-m6lg7frpgw {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.roll-prompt-flavour[b-m6lg7frpgw] {
    font-family: var(--d-font-serif, var(--m-font-body));
    font-size: 1rem;
    color: var(--m-text-2);
    font-style: italic;
    margin: 0;
}

/* Target number display */
.roll-target-display[b-m6lg7frpgw] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

.roll-target-label[b-m6lg7frpgw] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-text-2);
}

.roll-target-number[b-m6lg7frpgw] {
    font-family: var(--d-font-display, var(--m-font-body));
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--m-primary);
    line-height: 1;
    text-shadow: 0 0 20px color-mix(in srgb, var(--m-primary) 50%, transparent);
}

.roll-target-or-higher[b-m6lg7frpgw] {
    font-size: 0.8125rem;
    color: var(--m-text-2);
}

/* Dice stage — no fixed max-width so the die can breathe */
.roll-dice-stage[b-m6lg7frpgw] {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Result reveal */
.roll-result-reveal[b-m6lg7frpgw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    animation: result-enter-b-m6lg7frpgw 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes result-enter-b-m6lg7frpgw {
    from { opacity: 0; transform: scale(0.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Rolled number */
.result-number-wrap[b-m6lg7frpgw] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}

.result-rolled-label[b-m6lg7frpgw] {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-text-2);
    font-weight: 600;
}

.result-number[b-m6lg7frpgw] {
    font-family: var(--d-font-display, var(--m-font-body));
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
}

.result-success .result-number[b-m6lg7frpgw] {
    color: var(--m-primary);
    text-shadow: 0 0 32px color-mix(in srgb, var(--m-primary) 60%, transparent);
}

.result-failure .result-number[b-m6lg7frpgw] {
    color: var(--m-text-2);
    text-shadow: none;
}

.result-vs-target[b-m6lg7frpgw] {
    font-size: 0.875rem;
    color: var(--m-text-2);
}

/* Outcome strip */
.result-outcome[b-m6lg7frpgw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
}

.result-success .result-outcome[b-m6lg7frpgw] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
}

.result-failure .result-outcome[b-m6lg7frpgw] {
    background: color-mix(in srgb, var(--m-text-2) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
}

.result-outcome-icon[b-m6lg7frpgw] {
    font-size: 22px;
}

.result-success .result-outcome-icon[b-m6lg7frpgw] {
    color: var(--m-primary);
}

.result-failure .result-outcome-icon[b-m6lg7frpgw] {
    color: var(--m-text-2);
}

.result-outcome-message[b-m6lg7frpgw] {
    font-family: var(--d-font-serif, var(--m-font-body));
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--m-text);
}

/* Narrative text */
.result-narrative[b-m6lg7frpgw] {
    width: 100%;
    font-family: var(--d-font-serif, var(--m-font-body));
    font-size: 1rem;
    line-height: 1.75;
    color: var(--m-text);
    text-align: left;
}

/* Continue button */
.btn-continue[b-m6lg7frpgw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.875rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-on-primary);
    margin-top: 0.5rem;
}

.btn-continue .material-symbols-outlined[b-m6lg7frpgw] { font-size: 20px; }

.btn-continue-success[b-m6lg7frpgw] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, #000) 100%);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-continue-success:hover:not(:disabled)[b-m6lg7frpgw] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.btn-continue-neutral[b-m6lg7frpgw] {
    background: color-mix(in srgb, var(--m-surface) 80%, var(--m-bg));
    border: 1px solid var(--m-border);
    color: var(--m-text);
    box-shadow: none;
}

.btn-continue-neutral:hover:not(:disabled)[b-m6lg7frpgw] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
}

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

/* Spinner for processing state */
.continue-spinner[b-m6lg7frpgw] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--m-on-primary) 30%, transparent);
    border-top-color: var(--m-on-primary);
    border-radius: 50%;
    animation: spin-b-m6lg7frpgw 0.7s linear infinite;
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .roll-result-reveal[b-m6lg7frpgw],
    .roll-prompt[b-m6lg7frpgw] { animation: none; }
    .continue-spinner[b-m6lg7frpgw] { animation: none; border-top-color: var(--m-on-primary); }
}
/* /Pages/GameSession/SceneActionPanel.razor.rz.scp.css */
/* SceneActionPanel scoped styles */

.story-action-panel[b-2fbi7wlv2c] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.story-continue-button[b-2fbi7wlv2c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.4rem;
    min-width: min(100%, 18rem);
    margin: 0;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: var(--m-shadow-glow);
    animation: continue-invite-b-2fbi7wlv2c 2.8s var(--m-ease-smooth) infinite;
}

.continue-chevron[b-2fbi7wlv2c] {
    font-size: 0.85em;
}

@keyframes continue-invite-b-2fbi7wlv2c {
    0%,
    100% {
        box-shadow: var(--m-shadow-glow);
        transform: translateY(0);
    }
    50% {
        box-shadow: var(--m-shadow-accent);
        transform: translateY(-1px);
    }
}

@media (max-width: 768px) {
    .story-action-panel[b-2fbi7wlv2c],
    .story-continue-button[b-2fbi7wlv2c] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-continue-button[b-2fbi7wlv2c] {
        animation: none;
    }
}
/* /Pages/GameSessionPage.razor.rz.scp.css */
/* Game Session Page Styles */

.game-content[b-4wieh0zzwg] {
    padding: 2rem 0;
}

.game-session-page-container[b-4wieh0zzwg] {
    position: relative;
    min-height: calc(100vh - 56px);
    overflow-x: hidden;
    --_scene-glow: color-mix(in srgb, var(--m-teal) 24%, transparent);
    --_scene-wash-a: color-mix(in srgb, var(--m-teal) 18%, transparent);
    --_scene-wash-b: color-mix(in srgb, var(--m-accent) 14%, transparent);
    --_story-surface: color-mix(in srgb, var(--m-surface-elevated) 88%, transparent);
    --_story-border: color-mix(in srgb, var(--m-primary) 24%, var(--m-border));
}

/* Atmospheric background image — richer opacity for immersion */
.game-session-page-container[b-4wieh0zzwg]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('images/gamesession-background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.game-session-page-container[b-4wieh0zzwg]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, var(--_scene-wash-a), transparent 34%),
        radial-gradient(circle at 82% 18%, var(--_scene-wash-b), transparent 30%),
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--m-bg) 38%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
}

.game-session-page-container.scene-atmosphere-choice[b-4wieh0zzwg] {
    --_scene-glow: color-mix(in srgb, var(--m-accent) 28%, transparent);
    --_scene-wash-a: color-mix(in srgb, var(--m-accent) 18%, transparent);
    --_scene-wash-b: color-mix(in srgb, var(--m-teal) 18%, transparent);
}

.game-session-page-container.scene-atmosphere-challenge[b-4wieh0zzwg] {
    --_scene-glow: color-mix(in srgb, var(--m-glow) 28%, transparent);
    --_scene-wash-a: color-mix(in srgb, var(--m-glow) 16%, transparent);
    --_scene-wash-b: color-mix(in srgb, var(--m-warning) 18%, transparent);
}

.game-session-page-container.scene-atmosphere-magic[b-4wieh0zzwg] {
    --_scene-glow: color-mix(in srgb, var(--m-secondary) 30%, transparent);
    --_scene-wash-a: color-mix(in srgb, var(--m-secondary) 18%, transparent);
    --_scene-wash-b: color-mix(in srgb, var(--m-accent) 20%, transparent);
}

.game-session-page-container > *[b-4wieh0zzwg] {
    position: relative;
    z-index: 1;
}

/* Scene card — entrance animation on mount */
.scene-content[b-4wieh0zzwg] {
    position: relative;
    background: color-mix(in srgb, var(--m-surface-elevated) 72%, transparent);
    border-radius: 1rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 8%, transparent),
                0 0 56px var(--_scene-glow);
    padding: 0;
    margin-bottom: 2rem;
    border: 1px solid var(--_story-border);
    color: var(--m-text);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    animation: scene-card-enter-b-4wieh0zzwg 0.4s ease-out both;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@keyframes scene-card-enter-b-4wieh0zzwg {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inner content blocks */
.scene-content:hover[b-4wieh0zzwg] {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--m-text) 12%, transparent),
                0 0 64px var(--_scene-glow);
}

.scene-type-label[b-4wieh0zzwg] {
    color: var(--m-text-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.scene-book-layout[b-4wieh0zzwg] {
    display: grid;
    grid-template-rows: auto auto;
}

.scene-illustration-panel[b-4wieh0zzwg] {
    position: relative;
    min-height: 320px;
    overflow: visible;
    background:
        radial-gradient(circle at 24% 22%, var(--_scene-wash-a), transparent 34%),
        radial-gradient(circle at 76% 18%, var(--_scene-wash-b), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--m-primary) 8%, transparent), color-mix(in srgb, var(--m-bg) 18%, transparent));
}

.scene-illustration-backdrop[b-4wieh0zzwg] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--m-bg) 48%, transparent) 100%),
        radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--m-teal) 18%, transparent), transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.scene-visual-anchor[b-4wieh0zzwg] {
    position: absolute;
    left: clamp(1rem, 5vw, 4rem);
    bottom: clamp(0.75rem, 2.5vw, 2rem);
    z-index: 3;
}

.scene-character-image[b-4wieh0zzwg] {
    width: clamp(96px, 15vw, 172px);
    aspect-ratio: 1;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid color-mix(in srgb, var(--m-accent) 70%, var(--m-border));
    box-shadow: 0 16px 40px color-mix(in srgb, var(--m-text) 20%, transparent), 0 0 36px var(--_scene-glow);
}

.scene-illustration-panel[b-4wieh0zzwg]  .media-container {
    position: relative;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
}

.scene-illustration-panel[b-4wieh0zzwg]  .media-container img,
.scene-illustration-panel[b-4wieh0zzwg]  .media-container video {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.scene-story-panel[b-4wieh0zzwg] {
    position: relative;
    z-index: 4;
    margin: clamp(-1.5rem, -2vw, -0.75rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    padding: clamp(1rem, 2.4vw, 1.75rem);
    border-radius: 1rem;
    background: var(--_story-surface);
    border: 1px solid var(--_story-border);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--m-text) 18%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.scene-speaker-row[b-4wieh0zzwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

/* Identity cluster — keeps the avatar tucked tight against the name pill so the
   row's space-between only separates this cluster (left) from the type label
   (right), not three flat children. min-width: 0 lets a long name shrink/wrap
   rather than overflow on narrow phones. */
.scene-speaker-identity[b-4wieh0zzwg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.scene-speaker-label[b-4wieh0zzwg] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 13%, transparent);
    color: var(--m-primary);
    border: 1px solid color-mix(in srgb, var(--m-primary) 24%, transparent);
    font-weight: 800;
}

/* Small in-row character avatar — mirrors the over-image .scene-character-image
   styling at a compact size. Hidden on desktop because the over-image overlay
   already shows the character there; revealed at the mobile breakpoint where the
   overlay is hidden (see @media max-width: 768px below). */
.scene-speaker-avatar[b-4wieh0zzwg] {
    display: none;
    flex: 0 0 auto;
    width: 30px;
    aspect-ratio: 1;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--m-accent) 70%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
}

.scene-story-copy[b-4wieh0zzwg] {
    margin-bottom: 1rem;
}

.story-guide-unavailable[b-4wieh0zzwg] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.9rem;
    border-radius: 999px;
    color: var(--m-text-2);
    background: color-mix(in srgb, var(--m-surface-elevated) 92%, transparent);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-sm);
    pointer-events: none;
}

/* Choice button styles */
.choice-button[b-4wieh0zzwg] {
    min-width: 260px;
    max-width: 560px;
    flex: 1 1 auto;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Choice text is often a full sentence rather than a 1-2 word label, so
       allow buttons to grow vertically and bump the type size for readability.
       Audience is 3-5yo with a parent reading aloud — bias large. */
    padding: 1.25rem 1.75rem;
    min-height: 5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-text) 30%) 100%);
    border: 2px solid transparent;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 25%, transparent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    /* Ensure option text is white */
    color: var(--m-on-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--m-font-body), "Nunito", "Quicksand", sans-serif;
}

/* MarkdownRenderer wraps choice text in a <p>. Force that <p> to inherit the
   button's font sizing so future generic `.markdown-content p` rules can't
   silently shrink it. */
.choice-button .markdown-content[b-4wieh0zzwg],
.choice-button .markdown-content p[b-4wieh0zzwg] {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    font-weight: inherit;
}

/* Ensure progression buttons in scene content are always white, regardless of theme */
.scene-content .btn.btn-primary-custom[b-4wieh0zzwg],
.scene-content .choice-button[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

.scene-content .btn.btn-primary-custom *[b-4wieh0zzwg],
.scene-content .choice-button *[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

.scene-content .btn.btn-primary-custom:disabled[b-4wieh0zzwg],
.scene-content .btn.btn-primary-custom:focus[b-4wieh0zzwg],
.scene-content .btn.btn-primary-custom:hover[b-4wieh0zzwg],
.scene-content .choice-button:disabled[b-4wieh0zzwg],
.scene-content .choice-button:focus[b-4wieh0zzwg],
.scene-content .choice-button:hover[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

/* Awards modal / in-page cards primary action buttons */
.card .btn.btn-primary-custom[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

.card .btn.btn-primary-custom *[b-4wieh0zzwg],
.card .btn.btn-primary-custom:disabled[b-4wieh0zzwg],
.card .btn.btn-primary-custom:focus[b-4wieh0zzwg],
.card .btn.btn-primary-custom:hover[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

.choice-button[b-4wieh0zzwg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--m-on-primary) 20%, transparent) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.choice-button:hover[b-4wieh0zzwg] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-primary) 35%, transparent);
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-text)) 100%);
}

.choice-button:hover[b-4wieh0zzwg]::before {
    left: 100%;
}

.choice-button:active[b-4wieh0zzwg] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.choice-button:disabled[b-4wieh0zzwg] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.choice-button .markdown-content[b-4wieh0zzwg] {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    /* Inherit white color from button */
    color: inherit;
}

.choice-button .markdown-content p[b-4wieh0zzwg] {
    margin: 0;
    color: inherit;
}

.choice-button .markdown-content strong[b-4wieh0zzwg],
.choice-button .markdown-content b[b-4wieh0zzwg] {
    color: var(--m-on-primary);
}

/* Make links in markdown white as well */
.choice-button .markdown-content a[b-4wieh0zzwg] {
    color: inherit;
    text-decoration: underline;
}

.choice-button .markdown-content a:hover[b-4wieh0zzwg],
.choice-button .markdown-content a:focus[b-4wieh0zzwg] {
    color: color-mix(in srgb, var(--m-on-primary) 95%, transparent); /* slightly lighter on hover for feedback */
}

.media-container[b-4wieh0zzwg] {
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem 0;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 10%, transparent);
    transition: box-shadow 0.3s ease;
}

.media-container:hover[b-4wieh0zzwg] {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--m-text) 15%, transparent);
}

.media-container img[b-4wieh0zzwg],
.media-container video[b-4wieh0zzwg] {
    width: 100%;
    height: auto;
    display: block;
}

.media-container audio[b-4wieh0zzwg] {
    width: 100%;
    background: var(--m-text-2);
    border-radius: 0.5rem;
}

/* Audio Overlay Styles */
.image-overlay-container[b-4wieh0zzwg] {
    position: relative;
    width: 100%;
    display: block;
}

.btn-audio-overlay[b-4wieh0zzwg] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--m-primary); /* Fallback solid color */
    background: color-mix(in srgb, var(--m-primary) 90%, transparent);
    border: 2px solid var(--m-on-primary);
    color: var(--m-on-primary) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 30%, transparent);
    z-index: 999; /* Very high z-index */
}

.btn-audio-overlay .material-symbols-outlined[b-4wieh0zzwg] {
    color: var(--m-on-primary) !important;
}

.btn-audio-overlay:hover[b-4wieh0zzwg] {
    background: color-mix(in srgb, var(--m-primary) 85%, var(--m-text));
    transform: scale(1.1);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.btn-audio-overlay.playing[b-4wieh0zzwg] {
    background: var(--m-error);
    border-color: var(--m-on-primary);
    animation: pulse-audio-b-4wieh0zzwg 2s infinite;
}

@keyframes pulse-audio-b-4wieh0zzwg {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-error) 70%, transparent);
    }
    70% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--m-error) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-error) 0%, transparent);
    }
}

/* dice-roller-container intentionally removed — RollScene now handles layout */

/* Scene text — serif display font for narrative immersion */
.scene-content .lead[b-4wieh0zzwg] {
    color: var(--m-text);
    font-size: clamp(1.08rem, 1.3vw, 1.35rem);
    line-height: 1.75;
    font-family: var(--m-font-body), "Nunito", "Quicksand", sans-serif;
    letter-spacing: 0;
}

.scene-content .lead p[b-4wieh0zzwg] {
    color: var(--m-text);
}

.scene-content h3[b-4wieh0zzwg],
.scene-content h4[b-4wieh0zzwg],
.scene-content h5[b-4wieh0zzwg] {
    color: var(--m-text);
}

.scene-content .text-muted[b-4wieh0zzwg] {
    color: var(--m-text-2) !important;
}

.scene-content .markdown-content[b-4wieh0zzwg] {
    color: var(--m-text);
    font-family: var(--m-font-body), "Nunito", "Quicksand", sans-serif;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
}

.scene-content .markdown-content p[b-4wieh0zzwg] {
    color: var(--m-text);
}

.scene-content .markdown-content em[b-4wieh0zzwg] {
    color: var(--m-text-2);
}

/* Dark mode enhancements */
html[data-theme="dark"] .scene-content[b-4wieh0zzwg] {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 40%, transparent),
                0 0 40px color-mix(in srgb, var(--m-primary) 8%, transparent);
}

html[data-theme="dark"] .scene-content:hover[b-4wieh0zzwg] {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--m-text) 50%, transparent),
                0 0 60px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

html[data-theme="dark"] .media-container[b-4wieh0zzwg] {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 40%, transparent);
}

html[data-theme="dark"] .media-container:hover[b-4wieh0zzwg] {
    box-shadow: 0 6px 25px color-mix(in srgb, var(--m-text) 50%, transparent);
}

html[data-theme="dark"] .dice-roller-container[b-4wieh0zzwg] {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-text) 30%, transparent);
}

/* Exit Adventure button improvements */
[b-4wieh0zzwg] .btn-outline-danger {
    border-width: 2px;
    font-weight: 600;
}

html[data-theme="dark"][b-4wieh0zzwg]  .btn-outline-danger {
    color: color-mix(in srgb, var(--m-error) 70%, var(--m-on-primary));
    border-color: color-mix(in srgb, var(--m-error) 70%, var(--m-on-primary));
}

html[data-theme="dark"][b-4wieh0zzwg]  .btn-outline-danger:hover {
    background-color: color-mix(in srgb, var(--m-error) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-error) 80%, var(--m-on-primary));
    color: color-mix(in srgb, var(--m-error) 80%, var(--m-on-primary));
}

/* Scene transition skeleton */

@keyframes skeleton-shimmer-b-4wieh0zzwg {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-pulse[b-4wieh0zzwg] {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 50%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 25%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 50%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-4wieh0zzwg 1.6s ease-in-out infinite;
}

.scene-transition-skeleton[b-4wieh0zzwg] {
    background: var(--m-card);
    border-radius: 1rem;
    border: 1px solid var(--m-border);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--m-text) 8%, transparent),
                0 0 40px color-mix(in srgb, var(--m-primary) 8%, transparent);
    animation: scene-card-enter-b-4wieh0zzwg 0.3s ease-out both;
}

.scene-skeleton-media[b-4wieh0zzwg] {
    width: 100%;
    height: 240px;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.scene-skeleton-text[b-4wieh0zzwg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2rem;
}

.scene-skeleton-line[b-4wieh0zzwg] {
    height: 18px;
    width: 100%;
    border-radius: 6px;
}

.scene-skeleton-actions[b-4wieh0zzwg] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.scene-skeleton-btn[b-4wieh0zzwg] {
    height: 56px;
    flex: 1 1 180px;
    border-radius: 16px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scene-content[b-4wieh0zzwg] { animation: none; }
    .choice-button[b-4wieh0zzwg]::before { transition: none; }
    .skeleton-pulse[b-4wieh0zzwg] { animation: none; background: color-mix(in srgb, var(--m-border) 50%, transparent); }
    .scene-transition-skeleton[b-4wieh0zzwg] { animation: none; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .scene-content[b-4wieh0zzwg] {
        margin-bottom: 1rem;
    }

    /* On mobile a wide scene image renders short, so the desktop 320px floor
       leaves a large empty band before the story text. Let the panel collapse
       to the image; the character anchor (when present) overlaps it. */
    .scene-illustration-panel[b-4wieh0zzwg] {
        min-height: 0;
    }

    /* On phones the over-image character overlay covered the scene image, so
       it's hidden (below). Instead the character is shown as a "seam portrait":
       a larger avatar circle anchored top-left of the story panel that pulls UP
       to straddle the divider between the illustration panel (above) and the
       story panel (below), like a profile picture over a cover photo. The name
       pill sits directly BELOW the avatar (column cluster), and the type label
       stays top-right aligned near the name row. */
    .scene-visual-anchor[b-4wieh0zzwg] {
        display: none;
    }

    .scene-story-panel[b-4wieh0zzwg] {
        margin: 0.75rem;
        padding: 1rem;
    }

    /* Top-align the row so the "Choice moment" type label sits up near the name
       row rather than vertically centred against the taller column cluster. */
    .scene-speaker-row[b-4wieh0zzwg] {
        align-items: flex-start;
    }

    /* Identity becomes a vertical cluster on mobile: avatar above name pill.
       The negative top margin pulls the cluster up by ~half the avatar height
       so the avatar straddles the seam. .scene-illustration-panel is already
       overflow: visible and .scene-story-panel does not clip, so nothing cuts
       the overhang. */
    .scene-speaker-identity[b-4wieh0zzwg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        margin-top: -3rem;
    }

    /* Larger "portrait" avatar (was 30px) — reuses the same border/shadow tokens
       as the base rule, just resized and revealed for the mobile breakpoint. */
    .scene-speaker-avatar[b-4wieh0zzwg] {
        display: inline-flex;
        width: 60px;
    }

    .scene-illustration-panel[b-4wieh0zzwg]  .media-container img,
    .scene-illustration-panel[b-4wieh0zzwg]  .media-container video {
        max-height: 60vh;
    }

    .choice-button[b-4wieh0zzwg] {
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .game-content[b-4wieh0zzwg] {
        padding: 1rem 0;
    }
}

/* Light mode — Enchanted Scroll story area */
.game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .scene-content[b-4wieh0zzwg] {
    --_story-surface: color-mix(in srgb, var(--m-surface-elevated) 92%, transparent);
    background: color-mix(in srgb, var(--m-surface-elevated) 78%, transparent);
}

.game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .btn-audio-overlay[b-4wieh0zzwg] {
    background: var(--m-surface);
    color: var(--m-text);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
}

.game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .btn-audio-overlay:hover[b-4wieh0zzwg],
.game-session-page-container:is([data-theme="light"], [data-theme="bright"]) .btn-audio-overlay.playing[b-4wieh0zzwg] {
    background: color-mix(in srgb, var(--m-primary) 12%, var(--m-surface));
    border-color: var(--m-primary);
}
/* /Pages/Home.razor.rz.scp.css */
/* Home Page Styles */

.avatar-placeholder[b-lz8w8h0lpn] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.thumbnail-image[b-lz8w8h0lpn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section Headers */
.section-header[b-lz8w8h0lpn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--m-surface);
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--m-border);
}

.section-header h5[b-lz8w8h0lpn],
.section-header .section-title[b-lz8w8h0lpn] {
    font-weight: 700;
    color: var(--m-text);
    font-size: 1.125rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h5 i[b-lz8w8h0lpn],
.section-header .section-title i[b-lz8w8h0lpn] {
    color: var(--m-primary);
}

.section-header .btn-outline-secondary[b-lz8w8h0lpn] {
    border: 2px solid var(--m-border);
    color: var(--m-primary);
    background: var(--m-card);
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.section-header .btn-outline-secondary:hover[b-lz8w8h0lpn] {
    background: var(--m-surface-hover);
    border-color: var(--m-secondary);
    transform: translateY(-1px);
}

/* ---- Dark mode support ---- */

html[data-theme="dark"] .section-header[b-lz8w8h0lpn] {
    background: var(--m-bg);
    border-color: var(--m-border);
}

html[data-theme="dark"] .section-header h5[b-lz8w8h0lpn],
html[data-theme="dark"] .section-header .section-title[b-lz8w8h0lpn] {
    color: var(--m-text);
}

html[data-theme="dark"] .section-header h5 i[b-lz8w8h0lpn],
html[data-theme="dark"] .section-header .section-title i[b-lz8w8h0lpn] {
    color: var(--m-secondary);
}

html[data-theme="dark"] .section-header .btn-outline-secondary[b-lz8w8h0lpn] {
    background: var(--m-bg);
    border-color: var(--m-border);
    color: var(--m-primary);
}

html[data-theme="dark"] .section-header .btn-outline-secondary:hover[b-lz8w8h0lpn] {
    background: var(--m-bg);
    border-color: var(--m-primary);
}

/* ---- Light mode support ---- */

:is(html[data-theme="light"], html[data-theme="bright"]) .section-header[b-lz8w8h0lpn] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-header h5[b-lz8w8h0lpn],
:is(html[data-theme="light"], html[data-theme="bright"]) .section-header .section-title[b-lz8w8h0lpn] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-header h5 i[b-lz8w8h0lpn],
:is(html[data-theme="light"], html[data-theme="bright"]) .section-header .section-title i[b-lz8w8h0lpn] {
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-header .btn-outline-secondary[b-lz8w8h0lpn] {
    background: var(--m-surface);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .section-header .btn-outline-secondary:hover[b-lz8w8h0lpn] {
    background: var(--m-surface-hover);
    border-color: var(--m-secondary);
}

/* Skip Navigation Link */
.skip-link[b-lz8w8h0lpn] {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--m-primary);
    color: var(--m-on-primary);
    padding: 8px 16px;
    border-radius: 0 0 8px 0;
    z-index: 100;
    transition: top 0.2s ease;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.skip-link:focus[b-lz8w8h0lpn] {
    top: 0;
}

/* Content Area */
.home-content-area[b-lz8w8h0lpn] {
    padding-top: 0;
    margin-top: 0;
}
/* /Pages/ParentDashboard.razor.rz.scp.css */
/* ── Page Shell ───────────────────────────────────── */

.parent-shell[b-7bznxtfx1l] {
    background:
        radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 46%),
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--m-accent) 8%, transparent), transparent 44%);
}

.parent-state[b-7bznxtfx1l] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Hero Banner ──────────────────────────────────── */

.parent-hero-banner[b-7bznxtfx1l] {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 24px 28px;
    border-left: 3px solid var(--m-info);
    border-top: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-info) 8%, var(--m-bg)) 0%,
        var(--m-bg) 50%,
        color-mix(in srgb, var(--m-success) 6%, var(--m-bg)) 100%);
}

.parent-hero-bg[b-7bznxtfx1l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--m-border) 80%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
}

.parent-hero-content[b-7bznxtfx1l] {
    position: relative;
    z-index: 1;
}

.parent-hero-title[b-7bznxtfx1l] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--m-text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.parent-hero-subtitle[b-7bznxtfx1l] {
    font-size: 0.95rem;
    color: var(--m-text-2);
    margin-bottom: 0;
}

/* ── Badge Pill ───────────────────────────────────── */

.parent-dashboard-pill[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--m-info) 12%, transparent);
    color: var(--m-info);
    border: 1px solid color-mix(in srgb, var(--m-info) 30%, transparent);
}

.parent-dashboard-pill .material-symbols-outlined[b-7bznxtfx1l] {
    font-size: 1rem;
}

/* ── Hero Top Row + Invite CTA ────────────────────── */

/* Splits the hero banner's top row so the back button + section pill sit on the left
   and the primary invite CTA sits on the right. Wraps below 480px so the CTA stays
   tappable on phones without crowding the back button. */
.parent-hero-top-row[b-7bznxtfx1l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Primary invite CTA — same gradient + on-primary token as the canonical
   `profiles-new-btn` on `/profiles`, so the two surfaces feel like one product
   and the affordance carries across the app. Token-driven for theme parity. */
.parent-invite-btn[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 75%, var(--m-accent)));
    color: var(--m-on-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--m-primary) 35%, transparent);
}

.parent-invite-btn:hover[b-7bznxtfx1l] {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 45%, transparent);
}

.parent-invite-btn:focus-visible[b-7bznxtfx1l] {
    outline: 2px solid color-mix(in srgb, var(--m-primary) 55%, transparent);
    outline-offset: 2px;
}

.parent-invite-btn .material-symbols-outlined[b-7bznxtfx1l] {
    font-size: 1.1rem;
}

/* Same gradient affordance used inside the empty-state slot. Slightly larger
   padding because the empty state is a focal point, not a top-of-page secondary. */
.parent-empty-cta[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 75%, var(--m-accent)));
    color: var(--m-on-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
    margin-top: 4px;
}

.parent-empty-cta:hover[b-7bznxtfx1l] {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.parent-empty-cta:focus-visible[b-7bznxtfx1l] {
    outline: 2px solid color-mix(in srgb, var(--m-primary) 55%, transparent);
    outline-offset: 2px;
}

.parent-empty-cta .material-symbols-outlined[b-7bznxtfx1l] {
    font-size: 1.1rem;
}

/* ── Load Error Banner ────────────────────────────── */

/* Surfaced when the consent load fails (exception OR null response). Distinct
   from the inline alert-danger above because load failures benefit from a
   dedicated retry affordance rather than a dismissible toast. */
.parent-load-error[b-7bznxtfx1l] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--m-error) 35%, transparent);
    background: color-mix(in srgb, var(--m-error) 8%, var(--m-surface));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--m-error) 15%, transparent);
}

.parent-load-error-icon[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-error) 18%, transparent);
    color: var(--m-error);
    flex-shrink: 0;
}

.parent-load-error-icon .material-symbols-outlined[b-7bznxtfx1l] {
    font-size: 1.4rem;
}

.parent-load-error-content[b-7bznxtfx1l] {
    flex: 1;
    min-width: 0;
}

.parent-load-error-title[b-7bznxtfx1l] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--m-text);
    margin: 0 0 4px 0;
}

.parent-load-error-message[b-7bznxtfx1l] {
    font-size: 0.875rem;
    color: var(--m-text-2);
    margin: 0;
    line-height: 1.4;
}

.parent-load-error-retry[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--m-error);
    background: var(--m-surface);
    color: var(--m-error);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.parent-load-error-retry:hover:not(:disabled)[b-7bznxtfx1l] {
    background: var(--m-error);
    color: var(--m-on-primary);
    transform: translateY(-1px);
}

.parent-load-error-retry:focus-visible[b-7bznxtfx1l] {
    outline: 2px solid color-mix(in srgb, var(--m-error) 55%, transparent);
    outline-offset: 2px;
}

.parent-load-error-retry:disabled[b-7bznxtfx1l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.parent-load-error-retry .material-symbols-outlined[b-7bznxtfx1l] {
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .parent-load-error[b-7bznxtfx1l] {
        flex-wrap: wrap;
    }

    .parent-load-error-retry[b-7bznxtfx1l] {
        margin-left: auto;
    }
}

/* ── Back Button ──────────────────────────────────── */

.parent-back[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    background: color-mix(in srgb, var(--m-surface) 70%, transparent);
    color: var(--m-text);
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.parent-back:hover[b-7bznxtfx1l] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-primary);
}

/* ── Inline icon ↔ text alignment ─────────────────────
   Material Symbols glyphs render on the text baseline but inside a taller glyph
   box, so when placed inline next to text with only a margin utility (me-1/me-2)
   they float high relative to the adjacent copy. Rather than editing strings or
   restructuring the markup, we give each icon+text pairing a real centerline.

   Two techniques are used:
     1. Containers that are a single flow line (card titles, footer .btn actions)
        get `display: inline-flex; align-items: center` so the icon and the text
        share a vertical center — robust against Bootstrap's button line-height.
     2. The icons inside multi-line / wrapping contexts (the form-switch labels,
        which carry a nested <small class="d-block">) keep their inline flow but
        are pulled onto the text centerline with `vertical-align: middle` and a
        line-height match, since turning the whole label into a flex row would
        fight the form-switch input's own alignment.
   All affected icons remain aria-hidden; no copy, logic, or @code changes. */

/* 1a. Card titles that lead with an icon (AI Features, Research Data Sharing).
       inline-flex centers the .text-primary icon against the h5 text. The
       :has() guard scopes this to titles that actually contain a leading icon,
       so the icon-less profile-header title (child name) keeps its plain block
       flow and its stacked <small> age line is unaffected. */
.parent-shell .card-title:has(> .material-symbols-outlined)[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* The me-2 margin utility on the leading icon is redundant once gap owns the
   spacing; zero it so the gap is the single source of truth. */
.parent-shell .card-title .material-symbols-outlined[b-7bznxtfx1l] {
    margin-right: 0 !important;
    font-size: 1.25rem;
    line-height: 1;
}

/* 1b. Card-footer action buttons ("View Profile", "Revoke Consent"). Bootstrap's
       .btn line-height makes a leading inline icon sit high; inline-flex with a
       shared centerline fixes it without touching button padding. */
.parent-shell .card-footer .btn[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.parent-shell .card-footer .btn .material-symbols-outlined[b-7bznxtfx1l] {
    margin-right: 0 !important;
    font-size: 1.05rem;
    line-height: 1;
}

/* 2. Form-switch labels (AI Narrator / AI Co-Player / Research opt-in). The label
      wraps onto a second line via a nested <small class="d-block">, so we keep it
      in normal inline flow and pull the leading icon onto the first line's
      centerline. vertical-align: middle + a matched line-height stops the glyph
      floating above "Share anonymized data with researchers". */
.parent-shell .form-check-label .material-symbols-outlined[b-7bznxtfx1l] {
    vertical-align: middle;
    font-size: 1.15rem;
    line-height: 1;
    position: relative;
    top: -0.05em;
    margin-right: 0.35rem !important;
}

/* 3. Consent Status row: the label + badge were baseline-drifting. A flex row
      with align-items: center gives the badge a true centerline against the
      "Consent Status:" label. Targets the wrapping .mb-3 that holds the label
      and the status badge (the row immediately before the consent-details copy). */
.parent-shell .parent-consent-row[b-7bznxtfx1l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.parent-shell .parent-consent-row .fw-semibold[b-7bznxtfx1l] {
    margin-right: 0 !important;
}

/* 4. Created-date meta row: the calendar_month icon floated above the muted text.
      inline-flex centers the icon against the date copy. */
.parent-shell .parent-meta-row[b-7bznxtfx1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.parent-shell .parent-meta-row .material-symbols-outlined[b-7bznxtfx1l] {
    margin-right: 0 !important;
    font-size: 1rem;
    line-height: 1;
}

/* ── Cards ────────────────────────────────────────── */

.parent-card[b-7bznxtfx1l] {
    border-radius: 18px;
    border: 1px solid var(--m-border);
    background: color-mix(in srgb, var(--m-surface) 90%, transparent);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-text) 8%, transparent);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.parent-card:hover[b-7bznxtfx1l] {
    box-shadow: 0 16px 32px color-mix(in srgb, var(--m-primary) 12%, transparent);
    transform: translateY(-2px);
}

.parent-card .card-footer[b-7bznxtfx1l] {
    border-top: 1px solid var(--m-border);
}

/* ── Avatar ───────────────────────────────────────── */

.parent-avatar[b-7bznxtfx1l] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    color: var(--m-primary);
}

/* ── Skeleton Loading ─────────────────────────────── */

.skeleton-pulse[b-7bznxtfx1l] {
    animation: skeleton-shimmer-b-7bznxtfx1l 1.6s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 90%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%
    );
    background-size: 200% 100%;
    border-radius: 8px;
}

@keyframes skeleton-shimmer-b-7bznxtfx1l {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.parent-skeleton-banner[b-7bznxtfx1l] {
    height: 130px;
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* override gradient from skeleton-pulse with a flat tinted base */
    background: color-mix(in srgb, var(--m-surface) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    /* reset the shimmer from .skeleton-pulse applied to children instead */
    animation: none;
}

.parent-skeleton-pill[b-7bznxtfx1l] {
    width: 140px;
    height: 22px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.parent-skeleton-title[b-7bznxtfx1l] {
    width: 260px;
    height: 28px;
    border-radius: 6px;
}

.parent-skeleton-subtitle[b-7bznxtfx1l] {
    width: 380px;
    max-width: 80%;
    height: 16px;
    border-radius: 6px;
    margin-top: 8px;
}

.parent-skeleton-card[b-7bznxtfx1l] {
    border-radius: 18px;
    padding: 20px;
    min-height: 180px;
    border: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
    animation: none;
}

.parent-skeleton-card-title[b-7bznxtfx1l] {
    width: 120px;
    height: 20px;
    border-radius: 6px;
}

.parent-skeleton-card-line[b-7bznxtfx1l] {
    width: 100%;
    height: 14px;
    border-radius: 6px;
}

.parent-skeleton-card-toggle[b-7bznxtfx1l] {
    width: 80%;
    height: 18px;
    border-radius: 6px;
}

.parent-skeleton-card-btn[b-7bznxtfx1l] {
    width: 110px;
    height: 32px;
    border-radius: 8px;
}

.parent-skeleton-avatar-row[b-7bznxtfx1l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.parent-skeleton-avatar[b-7bznxtfx1l] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.parent-skeleton-name-block[b-7bznxtfx1l] {
    flex: 1;
}

.parent-skeleton-name[b-7bznxtfx1l] {
    width: 120px;
    height: 18px;
    border-radius: 6px;
}

.parent-skeleton-age[b-7bznxtfx1l] {
    width: 80px;
    height: 13px;
    border-radius: 6px;
}

/* ── Dark Mode ────────────────────────────────────── */

html[data-theme="dark"] .parent-hero-banner[b-7bznxtfx1l] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-info) 10%, var(--m-bg)) 0%,
        var(--m-bg) 50%,
        color-mix(in srgb, var(--m-success) 8%, var(--m-bg)) 100%);
    border-left-color: color-mix(in srgb, var(--m-info) 80%, var(--m-on-primary));
    border-top-color: color-mix(in srgb, var(--m-border) 40%, transparent);
    border-right-color: color-mix(in srgb, var(--m-border) 40%, transparent);
    border-bottom-color: color-mix(in srgb, var(--m-border) 40%, transparent);
}

html[data-theme="dark"] .parent-hero-bg[b-7bznxtfx1l] {
    opacity: 0.7;
}

html[data-theme="dark"] .parent-card[b-7bznxtfx1l] {
    background: color-mix(in srgb, var(--m-surface) 75%, transparent);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--m-text) 18%, transparent);
}

html[data-theme="dark"] .parent-back[b-7bznxtfx1l] {
    background: color-mix(in srgb, var(--m-surface) 60%, transparent);
}

html[data-theme="dark"] .parent-shell[b-7bznxtfx1l] {
    background:
        radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--m-primary) 8%, transparent), transparent 48%),
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--m-accent) 6%, transparent), transparent 45%);
}

html[data-theme="dark"] .parent-skeleton-card[b-7bznxtfx1l],
html[data-theme="dark"] .parent-skeleton-banner[b-7bznxtfx1l] {
    background: color-mix(in srgb, var(--m-surface) 50%, transparent);
    border-color: color-mix(in srgb, var(--m-border) 30%, transparent);
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 768px) {
    .parent-shell[b-7bznxtfx1l] {
        width: min(100% - 1.5rem, 1200px);
    }

    .parent-hero-banner[b-7bznxtfx1l] {
        padding: 20px 20px 18px;
    }

    .parent-hero-title[b-7bznxtfx1l] {
        font-size: 1.1rem;
    }

    .parent-skeleton-subtitle[b-7bznxtfx1l] {
        width: 90%;
    }

    .parent-skeleton-title[b-7bznxtfx1l] {
        width: 180px;
    }
}

/* ── Reduced Motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .skeleton-pulse[b-7bznxtfx1l] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 70%, transparent);
        background-size: unset;
    }

    .parent-card[b-7bznxtfx1l] {
        transition: none;
    }

    .parent-back[b-7bznxtfx1l] {
        transition: none;
    }

    .parent-invite-btn[b-7bznxtfx1l],
    .parent-invite-btn:hover[b-7bznxtfx1l],
    .parent-empty-cta[b-7bznxtfx1l],
    .parent-empty-cta:hover[b-7bznxtfx1l],
    .parent-load-error-retry[b-7bznxtfx1l],
    .parent-load-error-retry:hover[b-7bznxtfx1l] {
        transition: none;
        transform: none;
    }
}
/* /Pages/ProfilesPage.razor.rz.scp.css */
/* Profiles Page Styles */

.profiles-new-btn[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 36%, var(--m-border));
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 75%, var(--m-accent)));
    color: var(--m-on-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-primary) 22%, transparent);
}

.profiles-new-btn:hover[b-abjpxknk1b] {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.profiles-new-btn .material-symbols-outlined[b-abjpxknk1b] {
    font-size: 1.1rem;
}

.profiles-page-layout[b-abjpxknk1b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 1.25rem;
    align-items: start;
    min-height: 52vh;
}

.profiles-page-layout-empty[b-abjpxknk1b] {
    display: flex;
    justify-content: center;
}

.profiles-main-panel[b-abjpxknk1b] {
    min-width: 0;
}

.profiles-section-heading[b-abjpxknk1b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profiles-section-heading h2[b-abjpxknk1b],
.profiles-attention-header h2[b-abjpxknk1b],
.profiles-detail-card h2[b-abjpxknk1b],
.profiles-help-card h3[b-abjpxknk1b] {
    margin: 0;
    color: var(--m-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.profiles-section-heading p[b-abjpxknk1b],
.profiles-attention-header p[b-abjpxknk1b],
.profiles-help-card p[b-abjpxknk1b] {
    margin: 0.25rem 0 0;
    color: var(--m-text-2);
    font-size: 0.875rem;
    line-height: 1.45;
}

.profiles-mobile-selected[b-abjpxknk1b] {
    display: none;
}

.profiles-attention-section[b-abjpxknk1b] {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--m-warning) 30%, var(--m-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-warning-bg) 62%, transparent) 0%,
        color-mix(in srgb, var(--m-card) 88%, transparent) 100%
    );
    box-shadow: var(--m-shadow-sm);
}

.profiles-attention-header[b-abjpxknk1b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.profiles-attention-header h2[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.profiles-attention-header .material-symbols-outlined[b-abjpxknk1b] {
    color: var(--m-warning);
    font-size: 1.15rem;
}

.profiles-attention-grid[b-abjpxknk1b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 0.75rem;
}

.profiles-attention-card[b-abjpxknk1b] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.875rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--m-card) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, var(--m-border));
}

.profiles-attention-card-warning[b-abjpxknk1b] {
    border-left: 4px solid var(--m-warning);
}

.profiles-attention-card-info[b-abjpxknk1b] {
    border-left: 4px solid var(--m-info);
}

.profiles-attention-avatar[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-primary);
    border: 1px solid color-mix(in srgb, var(--m-primary) 26%, var(--m-border));
}

.profiles-attention-avatar[b-abjpxknk1b]  .profiles-attention-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profiles-attention-title-row[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.profiles-attention-title-row h3[b-abjpxknk1b] {
    margin: 0;
    color: var(--m-text);
    font-size: 1rem;
    font-weight: 700;
}

.profiles-attention-main p[b-abjpxknk1b] {
    margin: 0.25rem 0 0;
    color: var(--m-text-2);
    font-size: 0.825rem;
}

.profiles-attention-actions[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.profiles-status-chip[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.profiles-status-warning[b-abjpxknk1b] {
    color: var(--m-warning);
    background: var(--m-warning-bg);
    border: 1px solid var(--m-warning-border);
}

.profiles-status-info[b-abjpxknk1b] {
    color: var(--m-info);
    background: var(--m-info-bg);
    border: 1px solid var(--m-info-border);
}

.profiles-status-ready[b-abjpxknk1b] {
    color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-teal) 34%, transparent);
}

.profiles-detail-panel[b-abjpxknk1b] {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profiles-detail-card[b-abjpxknk1b],
.profiles-help-card[b-abjpxknk1b] {
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-card) 92%, transparent) 0%,
        color-mix(in srgb, var(--m-surface-elevated) 88%, transparent) 100%
    );
    box-shadow: var(--m-shadow-sm);
}

.profiles-detail-card[b-abjpxknk1b] {
    padding: 1rem;
}

.profiles-detail-kicker[b-abjpxknk1b] {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--m-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profiles-detail-avatar[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 0.875rem;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
    color: var(--m-primary);
}

.profiles-detail-avatar[b-abjpxknk1b]  .profiles-detail-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profiles-detail-list[b-abjpxknk1b] {
    display: grid;
    gap: 0.625rem;
    margin: 1rem 0;
}

.profiles-detail-list > div[b-abjpxknk1b] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--m-border) 65%, transparent);
}

.profiles-detail-list dt[b-abjpxknk1b] {
    color: var(--m-text-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.profiles-detail-list dd[b-abjpxknk1b] {
    margin: 0;
    color: var(--m-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
}

.profiles-detail-actions[b-abjpxknk1b] {
    display: grid;
    gap: 0.625rem;
}

.profiles-help-card[b-abjpxknk1b] {
    padding: 0.875rem;
}

.profiles-help-card .material-symbols-outlined[b-abjpxknk1b] {
    color: var(--m-teal);
    font-size: 1.35rem;
}

.profiles-grid-list .profile-card[b-abjpxknk1b] {
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.profiles-grid-list .profile-avatar-section[b-abjpxknk1b],
.profiles-grid-list .profile-info[b-abjpxknk1b],
.profiles-grid-list .profile-meta[b-abjpxknk1b],
.profiles-grid-list .profile-actions[b-abjpxknk1b] {
    margin: 0;
}

.profiles-grid-list .profile-avatar-section[b-abjpxknk1b] {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.profiles-grid-list .profile-info[b-abjpxknk1b] {
    grid-column: 2;
    grid-row: 1;
}

.profiles-grid-list .profile-avatar-wrapper[b-abjpxknk1b] {
    width: 100%;
    max-width: 150px;
}

.profiles-grid-list .profile-meta[b-abjpxknk1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    grid-column: 2;
    grid-row: 2;
}

.profiles-grid-list .profile-actions[b-abjpxknk1b] {
    align-self: center;
    grid-column: 3;
    grid-row: 1 / span 2;
    min-width: 150px;
}

@media (max-width: 768px) {
    .profiles-page-layout[b-abjpxknk1b] {
        grid-template-columns: 1fr;
    }

    .profiles-detail-panel[b-abjpxknk1b] {
        position: static;
    }

    .profiles-detail-card[b-abjpxknk1b] {
        display: none;
    }

    .profiles-mobile-selected[b-abjpxknk1b] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 1rem;
        padding: 0.75rem;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--m-card) 94%, transparent) 0%,
            color-mix(in srgb, var(--m-surface-elevated) 88%, transparent) 100%
        );
        box-shadow: var(--m-shadow-sm);
    }

    .profiles-mobile-selected-avatar[b-abjpxknk1b] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        overflow: hidden;
        border-radius: 12px;
        background: color-mix(in srgb, var(--m-primary) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
        color: var(--m-primary);
    }

    .profiles-mobile-selected-avatar[b-abjpxknk1b]  .profiles-mobile-selected-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .profiles-mobile-selected-copy[b-abjpxknk1b] {
        min-width: 0;
    }

    .profiles-mobile-selected-label[b-abjpxknk1b] {
        display: block;
        margin-bottom: 0.125rem;
        color: var(--m-text-2);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .profiles-mobile-selected-copy strong[b-abjpxknk1b] {
        display: block;
        overflow: hidden;
        color: var(--m-text);
        font-size: 0.95rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profiles-attention-card[b-abjpxknk1b],
    .profile-card.profiles-attention-card[b-abjpxknk1b] {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .profiles-attention-avatar[b-abjpxknk1b] {
        width: 48px;
        height: 48px;
    }

    .profiles-attention-actions[b-abjpxknk1b] {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .profiles-attention-actions .btn-profile-action[b-abjpxknk1b] {
        min-width: 0;
    }

    .profiles-section-heading[b-abjpxknk1b] {
        align-items: flex-start;
        flex-direction: column;
    }

    .profiles-grid-list .profile-card[b-abjpxknk1b] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .profiles-grid-list .profile-avatar-section[b-abjpxknk1b],
    .profiles-grid-list .profile-info[b-abjpxknk1b],
    .profiles-grid-list .profile-meta[b-abjpxknk1b],
    .profiles-grid-list .profile-actions[b-abjpxknk1b] {
        grid-column: auto;
        grid-row: auto;
    }

}

@media (max-width: 540px) {
    .profiles-attention-section[b-abjpxknk1b],
    .profiles-detail-card[b-abjpxknk1b],
    .profiles-help-card[b-abjpxknk1b] {
        border-radius: 14px;
    }

    .profile-actions[b-abjpxknk1b] {
        flex-wrap: wrap;
    }

    .profile-actions .btn-profile-action[b-abjpxknk1b] {
        flex-basis: calc(100% - 54px);
    }
}

/* ============================================================
   Skeleton Loading
   ============================================================ */

.profiles-skeleton[b-abjpxknk1b] {
    width: 100%;
}

.skeleton-banner[b-abjpxknk1b] {
    height: 220px;
    border-radius: 0 0 24px 24px;
    margin-bottom: 24px;
}

.skeleton-card[b-abjpxknk1b] {
    background: var(--m-surface);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--m-border);
}

.skeleton-avatar[b-abjpxknk1b] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

.skeleton-line[b-abjpxknk1b] {
    height: 14px;
    border-radius: 7px;
}

.skeleton-line-wide[b-abjpxknk1b] {
    width: 65%;
}

.skeleton-line-narrow[b-abjpxknk1b] {
    width: 45%;
}

.skeleton-btn-row[b-abjpxknk1b] {
    display: flex;
    gap: 8px;
    width: 100%;
}

.skeleton-btn[b-abjpxknk1b] {
    flex: 1;
    height: 40px;
    border-radius: 12px;
}

.skeleton-pulse[b-abjpxknk1b] {
    animation: skeleton-shimmer-b-abjpxknk1b 1.6s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 90%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%
    );
    background-size: 200% 100%;
    border-radius: 8px;
}

@keyframes skeleton-shimmer-b-abjpxknk1b {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

html[data-theme="dark"] .skeleton-card[b-abjpxknk1b] {
    background: var(--m-surface);
    border-color: var(--m-border);
}

.profiles-page-body[b-abjpxknk1b] {
    padding-top: 0.85rem;
}

.container-fluid.py-4[b-abjpxknk1b] {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 0 1.5rem !important;
    min-height: calc(100vh - 18rem);
}

/* ============================================================
   Empty State
   ============================================================ */

.profiles-empty-state[b-abjpxknk1b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, var(--m-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m-surface) 92%, transparent) 0%,
        color-mix(in srgb, var(--m-surface) 96%, transparent) 100%
    );
    box-shadow: 0 6px 24px color-mix(in srgb, var(--m-primary) 8%, transparent);
    gap: 16px;
}

.profiles-empty-icon-wrap[b-abjpxknk1b] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: profiles-breathe-b-abjpxknk1b 4s ease-in-out infinite;
}

@keyframes profiles-breathe-b-abjpxknk1b {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-primary) 20%, transparent); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 8px color-mix(in srgb, var(--m-primary) 6%, transparent); }
}

.profiles-empty-icon[b-abjpxknk1b] {
    font-size: 2.25rem;
    color: var(--m-primary);
}

.profiles-empty-heading[b-abjpxknk1b] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.profiles-empty-subtext[b-abjpxknk1b] {
    font-size: 0.95rem;
    color: var(--m-text-2);
    margin: 0;
    max-width: 380px;
}

.profiles-empty-cta[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, var(--m-primary), color-mix(in srgb, var(--m-primary) 75%, var(--m-accent)));
    color: var(--m-on-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
    margin-top: 4px;
}

.profiles-empty-cta:hover[b-abjpxknk1b] {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--m-primary) 40%, transparent);
}

.profiles-empty-cta .material-symbols-outlined[b-abjpxknk1b] {
    font-size: 1.1rem;
}

html[data-theme="dark"] .profiles-empty-state[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-surface) 0%, color-mix(in srgb, var(--m-surface) 85%, var(--m-bg)) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 25%, var(--m-border));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--m-bg) 45%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profiles-empty-state[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-card) 97%, transparent) 0%, color-mix(in srgb, var(--m-surface-elevated) 97%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
}

/* ============================================================
   Selected Profile Card Distinction
   ============================================================ */

.profile-card-selected[b-abjpxknk1b] {
    border-color: var(--m-primary) !important;
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--m-text) 8%, transparent),
        0 0 0 2px color-mix(in srgb, var(--m-primary) 35%, transparent),
        0 0 20px color-mix(in srgb, var(--m-primary) 20%, transparent) !important;
}

.profile-card-selected:hover[b-abjpxknk1b] {
    border-color: var(--m-primary) !important;
    box-shadow:
        0 14px 32px color-mix(in srgb, var(--m-primary) 22%, transparent),
        0 0 0 2px color-mix(in srgb, var(--m-primary) 50%, transparent),
        0 0 28px color-mix(in srgb, var(--m-primary) 28%, transparent) !important;
}

html[data-theme="dark"] .profile-card-selected[b-abjpxknk1b] {
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--m-bg) 40%, transparent),
        0 0 0 2px color-mix(in srgb, var(--m-primary) 50%, transparent),
        0 0 24px color-mix(in srgb, var(--m-primary) 30%, transparent) !important;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-card-selected[b-abjpxknk1b] {
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--m-primary) 10%, transparent),
        0 0 0 2px color-mix(in srgb, var(--m-primary) 40%, transparent),
        0 0 20px color-mix(in srgb, var(--m-primary) 18%, transparent) !important;
}

.loading-container[b-abjpxknk1b] {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-backdrop[b-abjpxknk1b] {
    background-color: color-mix(in srgb, var(--m-bg) 62%, transparent);
}

/* Profile Card Styles */
.profile-card[b-abjpxknk1b] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-surface) 92%, transparent) 0%,
        color-mix(in srgb, var(--m-surface-elevated) 95%, transparent) 100%);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, var(--m-border));
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--m-text) 8%, transparent);
    position: relative; /* Ensure the energy border is contained */
}

.pending-profile-card[b-abjpxknk1b] {
    border: 1px solid color-mix(in srgb, var(--m-warning) 42%, var(--m-border)) !important;
}

.profile-consent-status[b-abjpxknk1b] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.profile-consent-status .material-symbols-outlined[b-abjpxknk1b] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1.2;
}

.profile-consent-status-warning[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-warning) 38%, var(--m-border));
    color: color-mix(in srgb, var(--m-warning) 92%, var(--m-text));
}

.profile-consent-status-info[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-info) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-info) 34%, var(--m-border));
    color: color-mix(in srgb, var(--m-info) 88%, var(--m-text));
}

.consent-state-icon[b-abjpxknk1b] {
    font-size: 3rem;
}

.consent-state-icon-success[b-abjpxknk1b] {
    color: var(--m-success);
}

.consent-state-icon-warning[b-abjpxknk1b] {
    color: var(--m-warning);
}

/* Energy card polish for profile cards */
html[data-theme="dark"] .profile-card.m-energy-card[b-abjpxknk1b]::after {
    background: var(--m-surface);
}

.profile-card:hover[b-abjpxknk1b] {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 45%, var(--m-border));
}

.profile-card.profiles-attention-card[b-abjpxknk1b] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    text-align: left;
    padding: 0.875rem;
    border-radius: 14px;
    transform: none;
}

.profile-card.profiles-attention-card:hover[b-abjpxknk1b] {
    transform: none;
    box-shadow: var(--m-shadow-sm);
}

.btn-profile-action-paused[b-abjpxknk1b] {
    flex: 0 0 auto;
    min-width: 104px;
    background: color-mix(in srgb, var(--m-text-2) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-text-2) 22%, transparent);
    color: var(--m-text-2);
    box-shadow: none;
}

/* Avatar Section */
.profile-avatar-section[b-abjpxknk1b] {
    position: relative;
    margin-bottom: 14px;
    width: 100%;
}

/* 16:9 container for avatar on profile cards */
.profile-avatar-wrapper[b-abjpxknk1b] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--m-primary) 20%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--m-primary) 35%, transparent);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--m-primary) 12%, transparent);
}

.profile-avatar-wrapper[b-abjpxknk1b]  .profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-placeholder[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-text);
    font-size: 2rem;
}

.guest-badge[b-abjpxknk1b] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-teal) 0%, color-mix(in srgb, var(--m-teal) 75%, var(--m-bg) 25%) 100%);
    color: var(--m-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--m-teal) 35%, transparent);
    border: 2px solid var(--m-surface);
}

/* Profile Info */
.profile-info[b-abjpxknk1b] {
    margin-bottom: 14px;
    width: 100%;
}

.profile-name[b-abjpxknk1b] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-primary);
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-bg) 30%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-age-badge[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--m-primary);
}

/* Profile Meta */
.profile-meta[b-abjpxknk1b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
}

.meta-item[b-abjpxknk1b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--m-text-2);
    padding: 6px 12px;
    background: color-mix(in srgb, var(--m-primary) 6%, transparent);
    border-radius: 8px;
}

.meta-item i[b-abjpxknk1b] {
    font-size: 0.75rem;
    color: var(--m-primary);
}

.meta-item.meta-success[b-abjpxknk1b] {
    background: var(--m-success-bg);
    color: var(--m-success);
}

.meta-item.meta-success i[b-abjpxknk1b] {
    color: var(--m-success);
}

/* Action Buttons */
.profile-actions[b-abjpxknk1b] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.btn-profile-action[b-abjpxknk1b] {
    flex: 1 1 8.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-height: 44px;
}

.btn-profile-action i[b-abjpxknk1b] {
    font-size: 0.8rem;
}

.btn-profile-action-primary[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-teal) 0%, color-mix(in srgb, var(--m-teal) 72%, var(--m-primary)) 100%);
    border-color: var(--m-teal);
    color: var(--m-on-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-teal) 22%, transparent);
}

.btn-profile-action-primary:hover:not(:disabled)[b-abjpxknk1b] {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.btn-profile-action-secondary[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 9%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 28%, transparent);
    color: var(--m-primary);
}

.btn-profile-action-secondary:hover:not(:disabled)[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 44%, transparent);
    transform: translateY(-1px);
}

.btn-profile-icon-action[b-abjpxknk1b] {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 26%, var(--m-border));
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
    color: var(--m-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-profile-icon-action:hover[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
    transform: translateY(-1px);
}

.btn-profile-icon-danger[b-abjpxknk1b] {
    border-color: color-mix(in srgb, var(--m-error) 34%, var(--m-border));
    background: var(--m-error-bg);
    color: var(--m-error);
}

.btn-profile-icon-danger:hover[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-error) 20%, var(--m-error-bg));
    border-color: var(--m-error);
}

.btn-profile-action:disabled[b-abjpxknk1b] {
    opacity: 0.72;
    cursor: default;
    transform: none;
}

.btn-select[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-success) 35%, transparent);
    color: var(--m-success);
}

.btn-select:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 70%, var(--m-bg) 30%) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-success) 30%, transparent);
}

.btn-select-active[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 80%, var(--m-bg)) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
}

.btn-select-active:hover[b-abjpxknk1b] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-edit[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 35%, transparent);
    color: var(--m-primary);
}

.btn-edit:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 70%, var(--m-bg) 30%) 100%);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-primary) 30%, transparent);
}

.btn-delete[b-abjpxknk1b] {
    background: var(--m-error-bg);
    border-color: var(--m-error-border);
    color: var(--m-error);
}

.btn-delete:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-error) 0%, color-mix(in srgb, var(--m-error) 70%, var(--m-bg) 30%) 100%);
    border-color: var(--m-error);
    color: var(--m-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-error) 30%, transparent);
}

.modal-backdrop-dark[b-abjpxknk1b] {
    background-color: color-mix(in srgb, var(--m-bg) 78%, transparent);
}

html[data-theme="dark"] .modal-content[b-abjpxknk1b] {
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .modal-header[b-abjpxknk1b] {
    border-bottom-color: var(--m-surface-elevated);
}

html[data-theme="dark"] .modal-footer[b-abjpxknk1b] {
    border-top-color: var(--m-surface-elevated);
}

.modal-title-inline[b-abjpxknk1b],
.btn-with-icon[b-abjpxknk1b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-title-inline[b-abjpxknk1b] {
    min-width: 0;
    line-height: 1.25;
}

.modal-title-inline .material-symbols-outlined[b-abjpxknk1b],
.btn-with-icon .material-symbols-outlined[b-abjpxknk1b] {
    flex: 0 0 auto;
    line-height: 1;
}

.btn-with-icon[b-abjpxknk1b] {
    justify-content: center;
}

/* Center a lone footer button (e.g. the parental-consent "Done" confirmation).
   Bootstrap's .modal-footer defaults to justify-content: flex-end, which
   right-flushes a single button against the centered success message/icon.
   Multi-button footers (Cancel + action) keep the default right alignment. */
.modal-footer > .btn:only-child[b-abjpxknk1b] {
    margin-inline: auto;
}

html[data-theme="dark"] .modal-title[b-abjpxknk1b] {
    color: var(--m-text);
}

html[data-theme="dark"] .btn-close[b-abjpxknk1b] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .form-label[b-abjpxknk1b] {
    color: var(--m-secondary);
}

html[data-theme="dark"] .form-control[b-abjpxknk1b],
html[data-theme="dark"] .form-select[b-abjpxknk1b] {
    background-color: var(--m-surface);
    border-color: var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .form-control:focus[b-abjpxknk1b],
html[data-theme="dark"] .form-select:focus[b-abjpxknk1b] {
    background-color: var(--m-bg);
    border-color: var(--m-primary);
    color: var(--m-text);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

html[data-theme="dark"] .form-control.is-invalid[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-control.is-invalid[b-abjpxknk1b] {
    border-color: var(--m-error);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--m-error) 18%, transparent);
}

.invalid-feedback[b-abjpxknk1b] {
    color: var(--m-error);
    font-weight: 600;
}

html[data-theme="dark"] .form-control[b-abjpxknk1b]::placeholder {
    color: var(--m-secondary);
}

html[data-theme="dark"] .form-select option[b-abjpxknk1b] {
    background-color: var(--m-bg);
    color: var(--m-text);
}

html[data-theme="dark"] .alert-info[b-abjpxknk1b] {
    background-color: var(--m-info-bg);
    border-color: var(--m-info-border);
    color: var(--m-info);
}

html[data-theme="dark"] .alert-warning[b-abjpxknk1b] {
    background-color: var(--m-warning-bg);
    border-color: var(--m-warning-border);
    color: var(--m-warning);
}

html[data-theme="dark"] .card[b-abjpxknk1b] {
    background: var(--m-surface);
    border-color: var(--m-border);
}

html[data-theme="dark"] .card-title[b-abjpxknk1b] {
    color: var(--m-text);
}

html[data-theme="dark"] .btn-secondary[b-abjpxknk1b] {
    background-color: var(--m-surface-elevated);
    border-color: var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .btn-secondary:hover[b-abjpxknk1b] {
    background-color: var(--m-surface-hover);
    border-color: color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
}

/* Light mode overrides - ensures light mode when manually selected via toggle */
:is(html[data-theme="light"], html[data-theme="bright"]) .modal-content[b-abjpxknk1b] {
    background: var(--m-card);
    border: 1px solid color-mix(in srgb, var(--m-border) 80%, transparent);
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .modal-header[b-abjpxknk1b] {
    border-bottom-color: color-mix(in srgb, var(--m-border) 80%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .modal-footer[b-abjpxknk1b] {
    border-top-color: color-mix(in srgb, var(--m-border) 80%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .modal-title[b-abjpxknk1b] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-close[b-abjpxknk1b] {
    filter: none;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .form-label[b-abjpxknk1b] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .form-control[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-select[b-abjpxknk1b] {
    background-color: var(--m-card);
    border-color: color-mix(in srgb, var(--m-border) 80%, transparent);
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .form-control:focus[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-select:focus[b-abjpxknk1b] {
    background-color: var(--m-card);
    border-color: var(--m-primary);
    color: var(--m-text);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--m-primary) 25%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .form-control[b-abjpxknk1b]::placeholder {
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .form-select option[b-abjpxknk1b] {
    background-color: var(--m-card);
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .alert-info[b-abjpxknk1b] {
    background-color: var(--m-info-bg);
    border-color: var(--m-info-border);
    color: var(--m-info);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .alert-warning[b-abjpxknk1b] {
    background-color: var(--m-warning-bg);
    border-color: var(--m-warning-border);
    color: var(--m-warning);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-card) 85%, transparent);
    border-color: color-mix(in srgb, var(--m-border) 80%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .card-title[b-abjpxknk1b] {
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-secondary[b-abjpxknk1b] {
    background-color: var(--m-surface);
    border-color: var(--m-border);
    color: var(--m-text);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-secondary:hover[b-abjpxknk1b] {
    background-color: var(--m-surface-hover);
    border-color: color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
}

html[data-theme="dark"] .profile-card[b-abjpxknk1b] {
    background: var(--m-surface);
    border-color: var(--m-border);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-bg) 40%, transparent);
}

html[data-theme="dark"] .profile-card:hover[b-abjpxknk1b] {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-primary) 25%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
}

html[data-theme="dark"] .profile-avatar-image[b-abjpxknk1b] {
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
}

html[data-theme="dark"] .profile-avatar-placeholder[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-bg)) 100%);
}

html[data-theme="dark"] .guest-badge[b-abjpxknk1b] {
    border-color: var(--m-bg);
}

html[data-theme="dark"] .profile-name[b-abjpxknk1b] {
    color: var(--m-secondary); /* Fallback color for browsers that don't support background-clip */
    background: linear-gradient(135deg, var(--m-secondary) 0%, var(--m-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="dark"] .profile-age-badge[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 15%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-secondary);
}

html[data-theme="dark"] .meta-item[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    color: var(--m-text-2);
}

html[data-theme="dark"] .meta-item i[b-abjpxknk1b] {
    color: var(--m-secondary);
}

html[data-theme="dark"] .meta-item.meta-success[b-abjpxknk1b] {
    background: var(--m-success-bg);
    color: var(--m-success);
}

html[data-theme="dark"] .meta-item.meta-success i[b-abjpxknk1b] {
    color: var(--m-success);
}

html[data-theme="dark"] .btn-select[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-success) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-success) 40%, transparent);
    color: var(--m-success);
}

html[data-theme="dark"] .btn-select:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 70%, var(--m-bg)) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
}

html[data-theme="dark"] .btn-select-active[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 70%, var(--m-bg)) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
}

html[data-theme="dark"] .btn-edit[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 15%, transparent) 0%, color-mix(in srgb, var(--m-primary) 12%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-secondary);
}

html[data-theme="dark"] .btn-edit:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-bg)) 100%);
    border-color: var(--m-primary);
}

html[data-theme="dark"] .btn-delete[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-error) 15%, transparent);
    border-color: color-mix(in srgb, var(--m-error) 40%, transparent);
    color: var(--m-error);
}

html[data-theme="dark"] .btn-delete:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-error) 0%, color-mix(in srgb, var(--m-error) 70%, var(--m-bg)) 100%);
    border-color: var(--m-error);
}

/* Light mode explicit overrides for Profile Cards */
:is(html[data-theme="light"], html[data-theme="bright"]) .profile-card[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-card) 95%, transparent) 0%, color-mix(in srgb, var(--m-surface-elevated) 95%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--m-primary) 8%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-card:hover[b-abjpxknk1b] {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--m-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-avatar-image[b-abjpxknk1b] {
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-avatar-placeholder[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-bg)) 100%);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .guest-badge[b-abjpxknk1b] {
    border-color: var(--m-on-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-name[b-abjpxknk1b] {
    color: var(--m-primary); /* Fallback color for browsers that don't support background-clip */
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-bg)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-age-badge[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 10%, transparent) 0%, color-mix(in srgb, var(--m-primary) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 20%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 5%, transparent);
    color: var(--m-text-2);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item i[b-abjpxknk1b] {
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item.meta-success[b-abjpxknk1b] {
    background: var(--m-success-bg);
    color: var(--m-success);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item.meta-success i[b-abjpxknk1b] {
    color: var(--m-success);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-select[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-success) 30%, transparent);
    color: var(--m-success);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-select:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 70%, var(--m-bg)) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-select-active[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-success) 0%, color-mix(in srgb, var(--m-success) 70%, var(--m-bg)) 100%);
    border-color: var(--m-success);
    color: var(--m-on-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-edit[b-abjpxknk1b] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 10%, transparent) 0%, color-mix(in srgb, var(--m-primary) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-edit:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-primary) 0%, color-mix(in srgb, var(--m-primary) 85%, var(--m-bg)) 100%);
    border-color: var(--m-primary);
    color: var(--m-on-primary);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-delete[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-error) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-error) 30%, transparent);
    color: var(--m-error);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .btn-delete:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-error) 0%, color-mix(in srgb, var(--m-error) 70%, var(--m-bg)) 100%);
    border-color: var(--m-error);
    color: var(--m-on-primary);
}

/* Final action hierarchy pass. These selectors intentionally come after the
   legacy .btn-select/.btn-edit theme overrides because profile actions retain
   those classes for bUnit compatibility. */
.btn-profile-action.btn-profile-action-primary[b-abjpxknk1b],
html[data-theme="dark"] .btn-profile-action.btn-profile-action-primary[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-profile-action.btn-profile-action-primary[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-teal) 0%, color-mix(in srgb, var(--m-teal) 72%, var(--m-primary)) 100%);
    border-color: var(--m-teal);
    color: var(--m-on-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-teal) 22%, transparent);
}

.btn-profile-action.btn-profile-action-primary:hover:not(:disabled)[b-abjpxknk1b],
html[data-theme="dark"] .btn-profile-action.btn-profile-action-primary:hover:not(:disabled)[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-profile-action.btn-profile-action-primary:hover:not(:disabled)[b-abjpxknk1b] {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--m-teal) 30%, transparent);
}

.btn-profile-action.btn-profile-action-secondary[b-abjpxknk1b],
html[data-theme="dark"] .btn-profile-action.btn-profile-action-secondary[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-profile-action.btn-profile-action-secondary[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 9%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 28%, transparent);
    color: var(--m-primary);
    box-shadow: none;
}

.btn-profile-action.btn-profile-action-secondary:hover:not(:disabled)[b-abjpxknk1b],
html[data-theme="dark"] .btn-profile-action.btn-profile-action-secondary:hover:not(:disabled)[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-profile-action.btn-profile-action-secondary:hover:not(:disabled)[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--m-primary) 44%, transparent);
    color: var(--m-primary);
    transform: translateY(-1px);
}

.lock-icon[b-abjpxknk1b] {
    font-size: 3rem;
}

.empty-state-icon[b-abjpxknk1b] {
    font-size: 3rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .profile-card[b-abjpxknk1b],
    .profile-card:hover[b-abjpxknk1b],
    .btn-profile-action[b-abjpxknk1b],
    .btn-select:hover[b-abjpxknk1b],
    .btn-edit:hover[b-abjpxknk1b],
    .btn-delete:hover[b-abjpxknk1b],
    .profiles-new-btn[b-abjpxknk1b],
    .profiles-new-btn:hover[b-abjpxknk1b],
    .profiles-empty-cta[b-abjpxknk1b],
    .profiles-empty-cta:hover[b-abjpxknk1b] {
        transition: none;
        transform: none;
    }

    .profiles-empty-icon-wrap[b-abjpxknk1b] {
        animation: none;
    }

    .skeleton-pulse[b-abjpxknk1b] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 60%, transparent);
    }
}

/* ============================================================
   Theme Alignment Overrides
   Let Dragon Scale tokens own surfaces, text, and action states across
   light/bright/dark.
   ============================================================ */

.modal-backdrop[b-abjpxknk1b] {
    background-color: color-mix(in srgb, var(--m-bg) 62%, transparent);
}

.modal-backdrop-dark[b-abjpxknk1b] {
    background-color: color-mix(in srgb, var(--m-bg) 78%, transparent);
}

.btn-select[b-abjpxknk1b] {
    background: color-mix(in srgb, var(--m-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--m-teal) 35%, transparent);
    color: var(--m-teal);
}

.btn-select:hover[b-abjpxknk1b],
.btn-select-active[b-abjpxknk1b],
.btn-select-active:hover[b-abjpxknk1b] {
    background: linear-gradient(135deg, var(--m-teal) 0%, color-mix(in srgb, var(--m-teal) 72%, var(--m-primary)) 100%);
    border-color: var(--m-teal);
    color: var(--m-on-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-teal) 28%, transparent);
}

.btn-delete:hover[b-abjpxknk1b] {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--m-error) 28%, transparent);
}

html[data-theme="dark"] .modal-content[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .modal-content[b-abjpxknk1b] {
    background: var(--m-card);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    color: var(--m-text);
}

html[data-theme="dark"] .modal-title[b-abjpxknk1b],
html[data-theme="dark"] .card-title[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .modal-title[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .card-title[b-abjpxknk1b] {
    color: var(--m-text);
}

html[data-theme="dark"] .form-label[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-label[b-abjpxknk1b] {
    color: var(--m-text);
}

html[data-theme="dark"] .form-control[b-abjpxknk1b],
html[data-theme="dark"] .form-select[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-control[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-select[b-abjpxknk1b] {
    background-color: var(--m-surface);
    border-color: var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .form-control:focus[b-abjpxknk1b],
html[data-theme="dark"] .form-select:focus[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-control:focus[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .form-select:focus[b-abjpxknk1b] {
    background-color: var(--m-surface-elevated);
    border-color: var(--m-primary);
    color: var(--m-text);
}

html[data-theme="dark"] .form-control[b-abjpxknk1b]::placeholder,
:is(html[data-theme="light"], html[data-theme="bright"]) .form-control[b-abjpxknk1b]::placeholder {
    color: var(--m-text-2);
}

html[data-theme="dark"] .btn-secondary[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-secondary[b-abjpxknk1b] {
    background-color: var(--m-surface);
    border-color: var(--m-border);
    color: var(--m-text);
}

html[data-theme="dark"] .btn-secondary:hover[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .btn-secondary:hover[b-abjpxknk1b] {
    background-color: var(--m-surface-hover);
    border-color: color-mix(in srgb, var(--m-primary) 32%, var(--m-border));
    color: var(--m-text);
}

html[data-theme="dark"] .meta-item[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item[b-abjpxknk1b] {
    color: var(--m-text-2);
}

html[data-theme="dark"] .meta-item.meta-success[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item.meta-success[b-abjpxknk1b] {
    background: var(--m-success-bg);
    color: var(--m-success);
}

html[data-theme="dark"] .meta-item.meta-success i[b-abjpxknk1b],
:is(html[data-theme="light"], html[data-theme="bright"]) .meta-item.meta-success i[b-abjpxknk1b] {
    color: var(--m-success);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .profile-card[b-abjpxknk1b] {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--m-card) 94%, transparent) 0%,
            color-mix(in srgb, var(--m-surface-elevated) 92%, transparent) 100%
        );
    border-color: color-mix(in srgb, var(--m-primary) 20%, var(--m-border));
}
/* /Pages/RegistrationComplete.razor.rz.scp.css */
/* RegistrationComplete — post-auth registration data capture page */

.registration-form[b-9ina9og623] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Form groups ─────────────────────────────────── */

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

.form-label[b-9ina9og623] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-text);
}

.form-label-icon[b-9ina9og623] {
    font-size: 1.125rem;
    color: var(--m-primary);
}

/* ── Country selector ────────────────────────────── */

.country-select-wrapper[b-9ina9og623] {
    position: relative;
}

.country-search[b-9ina9og623] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.country-search:focus[b-9ina9og623] {
    outline: none;
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 15%, transparent);
}

.selected-country-badge[b-9ina9og623] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-text);
    font-size: 0.8rem;
    font-weight: 600;
}

.clear-country-btn[b-9ina9og623] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--m-text-secondary);
    font-size: 0.75rem;
}

.clear-country-btn .material-symbols-outlined[b-9ina9og623] {
    font-size: 0.875rem;
}

.country-dropdown[b-9ina9og623] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--m-surface);
    border: 1.5px solid var(--m-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-text) 10%, transparent);
    z-index: 10;
}

.country-option[b-9ina9og623] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.15s;
}

.country-option:hover[b-9ina9og623] {
    background: color-mix(in srgb, var(--m-primary) 8%, transparent);
}

.country-option--hint[b-9ina9og623] {
    color: var(--m-text-secondary);
    font-style: italic;
    cursor: default;
}

.country-code[b-9ina9og623] {
    font-size: 0.75rem;
    color: var(--m-text-secondary);
    font-weight: 600;
}

/* ── Consent checkboxes ──────────────────────────── */

.consent-group[b-9ina9og623] {
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-surface) 90%, var(--m-border));
    border: 1px solid var(--m-border);
}

.consent-label[b-9ina9og623] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--m-text);
    line-height: 1.4;
}

.consent-checkbox[b-9ina9og623] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--m-primary);
}

.consent-label a[b-9ina9og623] {
    color: var(--m-primary);
    text-decoration: underline;
    font-weight: 600;
}

.consent-label a:hover[b-9ina9og623] {
    color: var(--m-accent);
}

.consent-optional-hint[b-9ina9og623] {
    display: block;
    margin-top: 4px;
    color: color-mix(in srgb, var(--m-text) 70%, transparent);
    font-size: 0.78rem;
    font-style: italic;
}

/* ── Submit button ───────────────────────────────── */

.auth-btn--primary[b-9ina9og623] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: var(--m-primary);
    color: var(--m-on-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.auth-btn--primary:hover:not(:disabled)[b-9ina9og623] {
    opacity: 0.92;
    transform: translateY(-1px);
}

.auth-btn--primary:disabled[b-9ina9og623] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Pages/SignIn.razor.rz.scp.css */
/* SignIn-specific styles — shared auth styles live in app.css */

/* Auth skeleton — replaces AuthLoadingSpinner during sign-in flow */

@keyframes skeleton-shimmer-b-800sztzdu3 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-pulse[b-800sztzdu3] {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 30%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-800sztzdu3 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-pulse[b-800sztzdu3] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 60%, transparent);
    }
}

.auth-skeleton[b-800sztzdu3] {
    padding: 4px 0;
}

.auth-skeleton-header[b-800sztzdu3] {
    height: 28px;
    width: 70%;
    border-radius: 8px;
}

.auth-skeleton-line[b-800sztzdu3] {
    height: 14px;
    width: 100%;
    border-radius: 6px;
}

.auth-skeleton-btn[b-800sztzdu3] {
    height: 44px;
    width: 100%;
    border-radius: 12px;
}

.auth-skeleton-footer[b-800sztzdu3] {
    height: 14px;
    border-radius: 6px;
}

/* Dev-mode bypass banner — only visible in Development environment */
.dev-login-banner[b-800sztzdu3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--m-warning) 35%, transparent);
    background: color-mix(in srgb, var(--m-warning) 6%, transparent);
}

.dev-login-label[b-800sztzdu3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--m-warning) 80%, transparent);
    white-space: nowrap;
}

.dev-login-btn[b-800sztzdu3] {
    flex: 1;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--m-warning) 90%, transparent);
    background: color-mix(in srgb, var(--m-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-warning) 30%, transparent);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dev-login-btn:hover[b-800sztzdu3] {
    background: color-mix(in srgb, var(--m-warning) 18%, transparent);
}

.dev-login-btn:disabled[b-800sztzdu3] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Auth tab panel layout — height-stable tab switching
   ============================================ */

/* The wrapper is the sole height source. Both child panels are position:absolute
   so neither participates in flow layout. The explicit min-height is sized to
   fit the tallest panel (social: 3 buttons + help text + gaps ≈ 186px).
   The card height therefore never changes when switching tabs. */
.auth-tab-panels[b-800sztzdu3] {
    position: relative;
    min-height: 186px;
}

/* Active panel: absolutely positioned (same as hidden), but visible and
   interactive. z-index: 1 ensures it sits above the hidden sibling. */
.auth-tab-panel--active[b-800sztzdu3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Hidden panel: out of flow, invisible, and non-interactive.
   z-index: 0 places it behind the active panel. */
.auth-tab-panel--hidden[b-800sztzdu3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Social panel: stack three provider buttons with consistent spacing */
.auth-social-stack[b-800sztzdu3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* SignIn quickfacts — uses --m-primary for brand-colored pills (differs from SignUp's --m-accent) */
.auth-quickfacts[b-800sztzdu3] {
    margin-top: 12px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.auth-quickfacts span[b-800sztzdu3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    color: var(--m-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Light mode: stronger pill border and richer tint for WCAG readability */
:is(html[data-theme="light"], html[data-theme="bright"]) .auth-quickfacts span[b-800sztzdu3] {
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface));
    border-color: color-mix(in srgb, var(--m-primary) 40%, transparent);
    color: var(--m-text);
}
/* /Pages/SignUp.razor.rz.scp.css */
/* SignUp-specific styles — shared auth styles live in app.css */

/* Auth skeleton — replaces AuthLoadingSpinner during sign-up flow */

@keyframes skeleton-shimmer-b-8weof08t3t {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-pulse[b-8weof08t3t] {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--m-border) 60%, transparent) 25%,
        color-mix(in srgb, var(--m-border) 30%, transparent) 50%,
        color-mix(in srgb, var(--m-border) 60%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-8weof08t3t 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-pulse[b-8weof08t3t] {
        animation: none;
        background: color-mix(in srgb, var(--m-border) 60%, transparent);
    }
}

.auth-skeleton[b-8weof08t3t] {
    padding: 4px 0;
}

.auth-skeleton-header[b-8weof08t3t] {
    height: 28px;
    width: 70%;
    border-radius: 8px;
}

.auth-skeleton-line[b-8weof08t3t] {
    height: 14px;
    width: 100%;
    border-radius: 6px;
}

.auth-skeleton-btn[b-8weof08t3t] {
    height: 44px;
    width: 100%;
    border-radius: 12px;
}

.auth-skeleton-footer[b-8weof08t3t] {
    height: 14px;
    border-radius: 6px;
}

/* ============================================
   Auth tab panel layout — height-stable tab switching
   ============================================ */

/* The wrapper is the sole height source. Both child panels are position:absolute
   so neither participates in flow layout. The explicit min-height is sized to
   fit the tallest panel (social: 3 buttons + help text + gaps ≈ 186px).
   The card height therefore never changes when switching tabs. */
.auth-tab-panels[b-8weof08t3t] {
    position: relative;
    min-height: 186px;
}

/* Active panel: absolutely positioned (same as hidden), but visible and
   interactive. z-index: 1 ensures it sits above the hidden sibling. */
.auth-tab-panel--active[b-8weof08t3t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Hidden panel: out of flow, invisible, and non-interactive.
   z-index: 0 places it behind the active panel. */
.auth-tab-panel--hidden[b-8weof08t3t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Social panel: stack three provider buttons with consistent spacing */
.auth-social-stack[b-8weof08t3t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* SignUp quickfacts — uses --m-accent for a distinct visual feel (differs from SignIn's --m-primary) */
.auth-quickfacts[b-8weof08t3t] {
    margin-top: 12px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.auth-quickfacts span[b-8weof08t3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-accent) 30%, transparent);
    color: var(--m-text);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--m-text) 5%, transparent);
}
/* /Pages/Store/CosmeticShopPage.razor.rz.scp.css */
/* Cosmetic-shop scoped styles. The shared `store-*` chrome (.store-layout,
   .store-bundle, .store-buy-btn, …) is delivered by the GLOBAL stylesheet
   wwwroot/css/store.css — NOT this file and NOT Store.razor.css — because
   Blazor CSS isolation would otherwise scope those rules to a single
   component. Only the confirm-row affordance and the insufficient-balance
   helper are unique to this page and belong here. */

.cosmetic-confirm-row[b-90zmd0zn7w] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.cosmetic-confirm-row .store-buy-btn[b-90zmd0zn7w] {
    flex: 1;
}

.store-buy-btn-cancel[b-90zmd0zn7w] {
    padding: 0.625rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: transparent;
    color: var(--m-text-2);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.store-buy-btn-cancel:hover:not(:disabled)[b-90zmd0zn7w] {
    color: var(--m-text);
    border-color: color-mix(in srgb, var(--m-text) 25%, var(--m-border));
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
}

.store-buy-btn-cancel:focus-visible[b-90zmd0zn7w] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.store-buy-btn-cancel:disabled[b-90zmd0zn7w] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cosmetic-shortfall[b-90zmd0zn7w] {
    margin: 0.4rem 0 0 0;
    font-size: 0.75rem;
    color: var(--m-text-2);
    font-style: italic;
}
/* /Pages/Store/Store.razor.rz.scp.css */
/* Store — scoped styles.
 *
 * The shared `store-*` layout/chrome (container, hero, bundle grid, buttons,
 * theme overrides) lives in the GLOBAL stylesheet wwwroot/css/store.css so it
 * is reachable by all three consumers (Store.razor, CosmeticShopPage.razor,
 * CosmeticsCloset.razor). Blazor CSS isolation would otherwise scope those
 * rules to this component only. Do NOT re-add the chrome here.
 *
 * Only genuinely scoped rules belong in this file — in particular the `::deep`
 * combinator, which is invalid in a global (non-isolated) stylesheet. */

/* Override subnav accent for Store (teal, same as default). `::deep` reaches
   into the rendered <VaultSubnav /> child markup, so it must stay scoped. */
[b-ar4nvg25qf] .vault-subnav {
    --subnav-accent: var(--m-teal);
}
/* /Pages/Vault/CosmeticsCloset.razor.rz.scp.css */
/* CosmeticsCloset scoped styles.
 *
 * The shared `store-*` chrome (container, hero, bundle grid, buttons, theme
 * overrides) is delivered by the GLOBAL stylesheet wwwroot/css/store.css,
 * loaded via index.html. Rules below are page-specific: live preview layout,
 * selected/equipped card states, and closet/shop action affordances.
 */

.cosmetics-content[b-uck4u9elpf] {
    max-width: 1200px;
    padding-inline: 0;
    /* Top band (nav → pill): override the global .store-content `padding: 1.5rem`
       top so content starts higher under the 56px app header. The scope attribute
       (.cosmetics-content[b-hash], 0,2,0) outranks .store-content (0,1,0), so this
       wins regardless of source order. Matched to Achievements' pill margin-top.
       padding-bottom stays at store.css's 1.5rem (not set here). */
    padding-top: 0.85rem;
    transition: max-width 0.2s ease;
}

/* Expanded mode drops the width cap so the cosmetics grid can reflow into more
   columns. The character image stays unified in the overview card. */
.cosmetics-content.cosmetics-expanded[b-uck4u9elpf] {
    max-width: none;
    padding-inline: clamp(0.75rem, 1.25vw, 1.5rem);
}

/* ---- Active profile context ----
   Compact-pill treatment for the shared <ProfileSwitcherBanner> chip, matched
   to the Achievements page. Scoped under .cosmetics-content (Glowdome's own
   wrapper) via ::deep so it never affects the same banner on Treasury Vault or
   Trophy Room.

   PARITY NOTE — horizontal: Achievements renders the banner as a direct child of
   the *un-padded* .achievements-container, so there `max-width: calc(100% - 3rem)`
   + `margin: auto` is what produces the symmetric gutter. Glowdome's banner lives
   inside .store-content (GLOBAL store.css), which already applies inline padding.
   Re-using `calc(100% - 3rem)` here would DOUBLE the inset, so we use
   `max-width: 100%` + `margin: auto` and let the parent own the side gutter.

   PARITY NOTE — top band (nav → pill): owned by .cosmetics-content `padding-top`
   (0.85rem desktop / 0.6rem mobile), so the pill here keeps `margin-top: 0`. On
   Achievements the equivalent gap is the pill's own `margin-top`. Do NOT add a
   `margin-top` here or the gap will double.

   PARITY NOTE — pill → header: the pill's `margin-bottom` (1.5rem desktop /
   1.25rem mobile) is the entire gap, because the shared PageHeader's
   `margin-top: 1rem` is zeroed below (matched on Achievements, where the gap is
   pill margin-bottom 0.25rem + body padding-top, totalling the same 1.5/1.25rem). */
.cosmetics-content[b-uck4u9elpf]  .psb-banner {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-primary) 10%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 24%, transparent);
    box-shadow: var(--m-shadow-sm);
}

/* Pill → header gap: zero the shared PageHeader's `margin-top: 1rem` page-scoped
   (matched on Achievements) so the header card sits crisply under the pill. The
   extra `.cosmetics-page-header` class keeps this above PageHeader's own
   `.page-header` rule in the specificity cascade. */
.cosmetics-content[b-uck4u9elpf]  .page-header.cosmetics-page-header {
    margin-top: 0;
}

@media (max-width: 1232px) {
    .cosmetics-content[b-uck4u9elpf] {
        padding-inline: 1rem;
    }
}

.cosmetics-content[b-uck4u9elpf]  .psb-avatar {
    width: 2rem;
    height: 2rem;
}

.cosmetics-content[b-uck4u9elpf]  .psb-text {
    gap: 0.4rem;
}

.cosmetics-content[b-uck4u9elpf]  .psb-switch {
    border-radius: 999px;
    padding-block: 0.35rem;
}

.cosmetics-expand-toggle[b-uck4u9elpf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-card));
    color: var(--m-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cosmetics-expand-toggle .material-symbols-outlined[b-uck4u9elpf] {
    font-size: 1.1rem;
    color: var(--m-primary);
}

.cosmetics-expand-toggle:hover[b-uck4u9elpf] {
    background: color-mix(in srgb, var(--m-primary) 16%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 45%, var(--m-border));
}

.cosmetics-expand-toggle:focus-visible[b-uck4u9elpf] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

.cosmetics-expand-toggle.is-expanded[b-uck4u9elpf] {
    background: color-mix(in srgb, var(--m-primary) 22%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 55%, var(--m-border));
}

.cosmetics-page-header .store-balance[b-uck4u9elpf] {
    margin-top: 0;
}

.cosmetics-workspace[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.cosmetics-main[b-uck4u9elpf] {
    min-width: 0;
}

.cosmetics-look-overview[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.cosmetics-expanded .cosmetics-look-overview[b-uck4u9elpf] {
    max-width: min(100%, 1130px);
    margin-inline: auto;
}

.cosmetics-current-look[b-uck4u9elpf] {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--m-primary) 10%, var(--m-card)),
            color-mix(in srgb, var(--m-teal) 6%, var(--m-card))
        );
    border: 1px solid color-mix(in srgb, var(--m-primary) 28%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
}

.cosmetics-current-look-heading[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
}

.cosmetics-current-look-icon[b-uck4u9elpf] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-primary) 14%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--m-primary) 24%, transparent);
    color: var(--m-primary);
}

.cosmetics-current-look-icon .material-symbols-outlined[b-uck4u9elpf] {
    font-size: 1.6rem;
}

.cosmetics-current-look-copy[b-uck4u9elpf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.cosmetics-current-look-kicker[b-uck4u9elpf] {
    color: var(--m-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cosmetics-current-look-copy strong[b-uck4u9elpf] {
    color: var(--m-text);
    font-size: 0.95rem;
    line-height: 1.25;
}

.cosmetics-current-look-copy span:last-child[b-uck4u9elpf] {
    color: var(--m-text-2);
    font-size: 0.82rem;
}

.cosmetics-current-look-action[b-uck4u9elpf] {
    justify-self: start;
    white-space: nowrap;
}

.cosmetics-preview-actions[b-uck4u9elpf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.cosmetics-look-summary .cosmetics-current-look[b-uck4u9elpf] {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    /* Top-align the short "MY LOOK / BASE LOOK / 0 cosmetics owned / No cosmetic
       selected" copy beside the tall 16:9 preview stage. `align-self: start` stops
       this column from stretching to the stage's height within the section grid;
       `align-content: start` packs the icon+copy row to the top instead of letting
       the inherited `align-content: center` float it mid-card. (The inner
       `align-items: center` is kept so the face icon still centres against the text
       row.) */
    align-self: start;
    align-content: start;
}

.cosmetics-look-summary .cosmetics-current-look-copy .store-section-title[b-uck4u9elpf] {
    margin: 0;
    font-size: 1.3rem;
}

.cosmetics-current-look-copy p[b-uck4u9elpf] {
    margin: 0.25rem 0 0;
    color: var(--m-text-2);
    font-size: 0.85rem;
    line-height: 1.45;
}

.cosmetics-owned-composite[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 0;
    padding: 1.1rem;
    border-radius: 14px;
    background:
        radial-gradient(
            circle at 100% 0%,
            color-mix(in srgb, var(--m-accent) 8%, transparent),
            transparent 46%
        ),
        color-mix(in srgb, var(--m-card) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
    box-shadow: var(--m-shadow-sm);
}

.cosmetics-owned-composite.cosmetics-look-summary[b-uck4u9elpf] {
    /* Image-forward Glowdome preview: keep the title, stage, details, and
       actions in one column so the base look image is the first visual focus. */
    grid-template-columns: minmax(0, 1fr);
    max-width: min(100%, 760px);
    margin-inline: auto;
}

.cosmetics-owned-composite .store-section-title[b-uck4u9elpf] {
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}

.cosmetics-owned-composite-copy[b-uck4u9elpf] {
    min-width: 0;
}

.cosmetics-owned-composite-copy p[b-uck4u9elpf] {
    margin: 0;
    color: var(--m-text-2);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Wrapper owns the positioning context for the overlaid enlarge button, kept
   outside the role="img" stage so assistive tech still exposes the control. */
.cosmetics-owned-composite-stage-wrap[b-uck4u9elpf] {
    position: relative;
    min-width: 0;
    width: 100%;
}

.cosmetics-owned-composite-stage[b-uck4u9elpf] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: clamp(260px, 48vw, 460px);
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 22%, var(--m-border));
}

.cosmetics-look-details[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.cosmetics-look-detail[b-uck4u9elpf] {
    min-width: 0;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-primary) 7%, var(--m-card));
    border: 1px solid color-mix(in srgb, var(--m-primary) 18%, var(--m-border));
}

.cosmetics-look-detail span[b-uck4u9elpf],
.cosmetics-look-detail strong[b-uck4u9elpf] {
    display: block;
}

.cosmetics-look-detail span[b-uck4u9elpf] {
    margin-bottom: 0.25rem;
    color: var(--m-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cosmetics-look-detail strong[b-uck4u9elpf] {
    color: var(--m-text);
    font-size: 0.88rem;
    line-height: 1.3;
}

/* Enlarge affordance overlaid on the composite stage — opens the look
   lightbox so the layered image can be viewed without the stage's cropping. */
.cosmetics-look-enlarge[b-uck4u9elpf] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
    background: color-mix(in srgb, var(--m-card) 82%, transparent);
    color: var(--m-primary);
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.cosmetics-look-enlarge .material-symbols-outlined[b-uck4u9elpf] {
    font-size: 1.2rem;
}

.cosmetics-look-enlarge:hover[b-uck4u9elpf] {
    background: color-mix(in srgb, var(--m-primary) 18%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 50%, var(--m-border));
    transform: scale(1.05);
}

.cosmetics-look-enlarge:focus-visible[b-uck4u9elpf] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

:is(html[data-theme="light"], html[data-theme="bright"]) .cosmetics-owned-composite[b-uck4u9elpf],
:is(html[data-theme="light"], html[data-theme="bright"]) .cosmetics-current-look[b-uck4u9elpf] {
    border-color: color-mix(in srgb, var(--m-primary) 26%, var(--m-border));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--m-primary) 10%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .cosmetics-look-summary .cosmetics-current-look[b-uck4u9elpf] {
    border-color: transparent;
    box-shadow: none;
}

.cosmetics-preview-base[b-uck4u9elpf],
.cosmetics-preview-overlay[b-uck4u9elpf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cosmetics-preview-base-fallback[b-uck4u9elpf] {
    display: grid;
    place-items: center;
    color: var(--m-text-disabled);
    background: color-mix(in srgb, var(--m-primary) 6%, var(--m-surface));
}

.cosmetics-preview-base-fallback .material-symbols-outlined[b-uck4u9elpf] {
    font-size: 5rem;
}

.cosmetics-preview-overlay[b-uck4u9elpf] {
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.cosmetics-preview-overlay-trying[b-uck4u9elpf] {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--m-accent) 45%, transparent));
}

.cosmetics-card-grid[b-uck4u9elpf] {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.cosmetics-collection-section[b-uck4u9elpf] {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 1.5rem;
}

.cosmetics-content .store-section-title[b-uck4u9elpf] {
    font-size: 1.05rem;
    line-height: 1.25;
}

/* My Look grid: lay the owned cards out with flex so each card is capped at a
   third of the row. Without this, the shared auto-fit grid stretches a lone
   owned item across the full width, blowing up the thumbnail and cropping its
   artwork. Cards still wrap and keep a 210px minimum. */
.my-look-grid[b-uck4u9elpf] {
    display: flex;
    flex-wrap: wrap;
}

.my-look-grid > .cosmetic-card[b-uck4u9elpf] {
    flex: 1 1 210px;
    max-width: calc((100% - 2rem) / 3);
}

.cosmetic-card[b-uck4u9elpf] {
    min-height: 100%;
    cursor: pointer;
    position: relative;
}

.cosmetic-card:focus-visible[b-uck4u9elpf] {
    outline: 2px solid var(--m-focus);
    outline-offset: 3px;
}

.cosmetic-previewed[b-uck4u9elpf] {
    border-color: color-mix(in srgb, var(--m-accent) 58%, var(--m-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent) 38%, transparent),
                0 8px 24px color-mix(in srgb, var(--m-accent) 14%, transparent);
}

.cosmetic-equipped[b-uck4u9elpf] {
    border-color: color-mix(in srgb, var(--m-teal) 50%, var(--m-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--m-teal) 28%, transparent);
}

.cosmetic-equipped .store-bundle-badge[b-uck4u9elpf] {
    background: color-mix(in srgb, var(--m-teal) 90%, transparent);
    color: var(--m-on-primary);
}

.cosmetic-preview-badge[b-uck4u9elpf] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--m-accent) 88%, transparent);
    color: var(--m-on-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* The .cosmetic-thumbnail box + "fit, don't crop" image rules now live in the
   shared, non-scoped wwwroot/css/store.css so they survive CSS-isolation
   bundling and are shared with the standalone cosmetic shop. */

.cosmetic-card-state[b-uck4u9elpf] {
    margin: 0.1rem 0 0;
    color: var(--m-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-transform: uppercase;
}

.cosmetic-equipped .cosmetic-card-state[b-uck4u9elpf] {
    color: var(--m-teal);
}

.cosmetic-equipped-btn[b-uck4u9elpf] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.55rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cosmetic-equipped-actions[b-uck4u9elpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
}

.cosmetic-equipped-actions > *[b-uck4u9elpf] {
    flex: 1 1 9rem;
}

.closet-empty-note[b-uck4u9elpf] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--m-primary) 35%, var(--m-border));
    background: color-mix(in srgb, var(--m-primary) 8%, var(--m-card));
    font-size: 0.9rem;
    color: var(--m-text-2);
}

.closet-empty-note > .material-symbols-outlined[b-uck4u9elpf] {
    color: var(--m-primary);
    font-size: 1.6rem;
}

.closet-empty-note div[b-uck4u9elpf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.closet-empty-note strong[b-uck4u9elpf] {
    color: var(--m-text);
}

.closet-empty-link[b-uck4u9elpf] {
    margin-left: auto;
    flex-shrink: 0;
}

.cosmetic-confirm-row[b-uck4u9elpf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.store-buy-btn-cancel[b-uck4u9elpf] {
    padding: 0.625rem 0.85rem;
    min-height: 2.55rem;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: transparent;
    color: var(--m-text-2);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.store-buy-btn-cancel:hover:not(:disabled)[b-uck4u9elpf] {
    color: var(--m-text);
    border-color: color-mix(in srgb, var(--m-text) 25%, var(--m-border));
    background: color-mix(in srgb, var(--m-text) 6%, transparent);
}

.store-buy-btn-cancel:focus-visible[b-uck4u9elpf] {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

.store-buy-btn-cancel:disabled[b-uck4u9elpf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cosmetic-shortfall[b-uck4u9elpf] {
    margin: 0.4rem 0 0 0;
    font-size: 0.75rem;
    color: var(--m-text-2);
    font-style: italic;
}

[data-theme="dark"] .cosmetics-current-look[b-uck4u9elpf],
[data-theme="dark"] .cosmetics-owned-composite[b-uck4u9elpf] {
    box-shadow: var(--m-shadow-md),
                0 0 18px color-mix(in srgb, var(--m-primary) 12%, transparent);
}

[data-theme="dark"] .cosmetics-look-summary .cosmetics-current-look[b-uck4u9elpf] {
    box-shadow: none;
}

/* ── Enlarged "My Look" lightbox ─────────────────────────────────────────── */
.cosmetics-look-lightbox[b-uck4u9elpf] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--m-bg) 68%, transparent);
    backdrop-filter: blur(3px);
}

.cosmetics-look-lightbox-dialog[b-uck4u9elpf] {
    position: relative;
    width: min(92vw, 900px);
    max-height: 88vh;
    border-radius: 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--m-card) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
    box-shadow: var(--m-shadow-md);
}

.cosmetics-look-lightbox-close[b-uck4u9elpf] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
    background: color-mix(in srgb, var(--m-card) 85%, transparent);
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cosmetics-look-lightbox-close:hover[b-uck4u9elpf] {
    background: color-mix(in srgb, var(--m-primary) 16%, var(--m-card));
    border-color: color-mix(in srgb, var(--m-primary) 50%, var(--m-border));
}

.cosmetics-look-lightbox-close:focus-visible[b-uck4u9elpf] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

.cosmetics-look-lightbox-stage[b-uck4u9elpf] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 88vh;
    background: color-mix(in srgb, var(--m-surface) 92%, transparent);
}

@media (max-width: 960px) {
    .cosmetics-expand-toggle[b-uck4u9elpf] {
        display: none;
    }

    .cosmetics-workspace[b-uck4u9elpf] {
        grid-template-columns: 1fr;
    }

    .cosmetics-look-overview[b-uck4u9elpf] {
        grid-template-columns: 1fr;
    }

    .cosmetics-expanded .cosmetics-look-overview[b-uck4u9elpf] {
        grid-template-columns: 1fr;
    }

    .cosmetics-owned-composite[b-uck4u9elpf] {
        grid-template-columns: 1fr;
    }

    .cosmetics-look-details[b-uck4u9elpf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    /* Top band parity: drop nav → pill to 0.6rem (Achievements' pill margin-top
       matches). pill → header drops to 1.25rem via the pill's margin-bottom
       (Achievements resolves to the same 1.25rem). */
    .cosmetics-content[b-uck4u9elpf] {
        padding-top: 0.6rem;
    }

    .cosmetics-content[b-uck4u9elpf]  .psb-banner {
        margin: 0 auto 1.25rem;
    }

    .cosmetics-current-look[b-uck4u9elpf],
    .closet-empty-note[b-uck4u9elpf] {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .cosmetics-current-look-action[b-uck4u9elpf],
    .closet-empty-link[b-uck4u9elpf] {
        align-self: flex-start;
        margin-left: 0;
    }

    .my-look-grid > .cosmetic-card[b-uck4u9elpf] {
        max-width: 100%;
    }
}
/* /Pages/Vault/TreasuryVault.razor.rz.scp.css */
.vault-layout[b-gnn4573qdr] {
    --accent-amber: var(--m-accent);
    --accent-teal: var(--m-teal);
    font-family: var(--d-font-display);
    color: var(--m-text);
    background-color: var(--d-bg);
    width: 100%;
}

[b-gnn4573qdr] .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.vault-container[b-gnn4573qdr] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    width: 100%;
}

/* ---- Section shell (main) ----
   The section sub-nav was removed for the alpha nav reorg, so the shell now
   wraps only .vault-main. The >=900px flex row is retained so .vault-main
   continues to stretch full-width inside the shell. */
@media (min-width: 900px) {
    .vault-section-shell[b-gnn4573qdr] {
        display: flex;
        align-items: stretch;
        gap: 1rem;
    }

    .vault-main[b-gnn4573qdr] {
        flex: 1;
    }
}

/* ---- Main layout (body + inspector side-by-side) ---- */
.vault-main[b-gnn4573qdr] {
    display: flex;
    flex: 1;
    min-height: 0;
    /* Prevents grid/flex intrinsic-min-content from forcing horizontal overflow
       when this is itself a flex item inside .vault-section-shell at >=900px. */
    min-width: 0;
}

.vault-main.inspector-active .vault-body[b-gnn4573qdr] {
    flex: 1;
    min-width: 0;
}

/* ---- Content body ---- */
.vault-body[b-gnn4573qdr] {
    position: relative;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 1.5rem;
}

/* ---- Vault sections ---- */
.vault-section[b-gnn4573qdr] {
    margin-bottom: 2rem;
}

.vault-section-title[b-gnn4573qdr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--m-text);
}

.vault-section-icon[b-gnn4573qdr] {
    font-size: 1.25rem;
    color: var(--accent-amber);
}

.vault-section-count[b-gnn4573qdr] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-amber);
    background: color-mix(in srgb, var(--accent-amber) 12%, transparent);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
}

.vault-grid[b-gnn4573qdr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.vault-grid-small[b-gnn4573qdr] {
    gap: 0.75rem;
}

.nebula-bg[b-gnn4573qdr] {
    background: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--m-primary) 12%, transparent) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-teal) 12%, transparent) 0%, transparent 40%),
                var(--d-bg);
}

/* ---- Sparkles balance pill ---- */
.vault-balance[b-gnn4573qdr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent-amber);
    background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-amber) 25%, transparent);
    margin-bottom: 1.25rem;
}

.vault-balance .material-symbols-outlined[b-gnn4573qdr] { font-size: 16px; }
.vault-balance-label[b-gnn4573qdr] { font-size: 0.75rem; color: var(--m-text-2); margin-left: 0.125rem; }

/* ---- Empty state ---- */
.vault-empty[b-gnn4573qdr] {
    /* Local containment so sparkle pseudo-elements never bleed past the hero block. */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
}

.vault-empty-icon[b-gnn4573qdr] {
    /* Make this an in-flow, sized box so ::before / ::after can be scatter-anchored
       around the diamond without disturbing the column layout. */
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 3.5rem;
    color: var(--accent-amber);
    opacity: 0.65;
    margin-bottom: 0.5rem;
    animation: vault-empty-icon-pulse-b-gnn4573qdr 3.6s ease-in-out infinite;
    will-change: transform, filter;
}

@keyframes vault-empty-icon-pulse-b-gnn4573qdr {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-amber) 45%, transparent));
        opacity: 0.85;
    }
}

/* ---- Empty-state sparkle ambience (Option B polish) ----
   Two pseudo-elements act as point sources; each casts several `box-shadow`
   copies of itself to produce a cluster of small "stars" scattered around the
   diamond. Two independent animation cycles (different durations, different
   delays) keep the twinkle feeling organic rather than synchronized.

   Scoped to the empty-state hero — uses Dragon Scale tokens only. Both
   pseudo-elements are aria-hidden by default (decorative, no text content).
   Reduced-motion users get a static rendering (handled at the bottom of this
   file's reduced-motion media query). */
.vault-empty-icon[b-gnn4573qdr]::before,
.vault-empty-icon[b-gnn4573qdr]::after {
    content: "";
    position: absolute;
    /* Anchor at the visual center of the diamond glyph; the box-shadow list
       below scatters copies relative to this origin. */
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    /* Use a transparent background so the shadows are the only thing visible. */
    background: color-mix(in srgb, var(--accent-amber) 65%, transparent);
    pointer-events: none;
    /* Each shadow = one sparkle. Spread is intentionally non-uniform so the
       cluster reads as scattered, not gridded. Soft blur sells the "glow". */
    box-shadow:
        -68px -42px 4px color-mix(in srgb, var(--accent-amber) 70%, transparent),
         54px -58px 3px color-mix(in srgb, var(--m-primary) 60%, transparent),
        -82px  18px 4px color-mix(in srgb, var(--accent-amber) 55%, transparent);
    opacity: 0;
    animation: vault-empty-sparkle-a-b-gnn4573qdr 4.7s ease-in-out infinite;
    will-change: opacity, transform;
}

.vault-empty-icon[b-gnn4573qdr]::after {
    /* Mirror the cluster to the other diagonals + use a different rhythm so the
       two pseudo-elements never twinkle in lockstep. */
    box-shadow:
         72px  46px 3px color-mix(in srgb, var(--accent-amber) 65%, transparent),
        -48px  64px 4px color-mix(in srgb, var(--m-primary) 55%, transparent),
         88px -12px 3px color-mix(in srgb, var(--accent-amber) 50%, transparent);
    animation: vault-empty-sparkle-b-b-gnn4573qdr 3.1s ease-in-out infinite;
    animation-delay: -1.4s;
}

@keyframes vault-empty-sparkle-a-b-gnn4573qdr {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0);
    }
    20% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translateY(-2px);
    }
    55% {
        opacity: 0.25;
        transform: translate(-50%, -50%) translateY(-5px);
    }
    80% {
        opacity: 0.6;
        transform: translate(-50%, -50%) translateY(-7px);
    }
}

@keyframes vault-empty-sparkle-b-b-gnn4573qdr {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0);
    }
    35% {
        opacity: 0.7;
        transform: translate(-50%, -50%) translateY(-3px);
    }
    70% {
        opacity: 0.3;
        transform: translate(-50%, -50%) translateY(-6px);
    }
}

.vault-empty-title[b-gnn4573qdr] {
    font-family: var(--d-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.vault-empty-body[b-gnn4573qdr] {
    font-size: 0.9rem;
    color: var(--m-text-2);
    max-width: 440px;
    line-height: 1.6;
    margin: 0;
}

.vault-empty-actions[b-gnn4573qdr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.vault-empty-cta[b-gnn4573qdr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent-amber);
    border: 1px solid color-mix(in srgb, var(--accent-amber) 35%, transparent);
    background: color-mix(in srgb, var(--accent-amber) 8%, transparent);
    transition: background 0.2s, border-color 0.2s;
}

.vault-empty-cta:hover[b-gnn4573qdr] {
    background: color-mix(in srgb, var(--accent-amber) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-amber) 55%, transparent);
    color: var(--accent-amber);
}

.vault-empty-cta:focus-visible[b-gnn4573qdr] {
    outline: 2px solid var(--accent-amber);
    outline-offset: 2px;
}

.vault-empty-cta-secondary[b-gnn4573qdr] {
    color: var(--m-text-2);
    border-color: color-mix(in srgb, var(--m-border) 50%, transparent);
    background: color-mix(in srgb, var(--m-surface) 30%, transparent);
}

.vault-empty-cta-secondary:hover[b-gnn4573qdr] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-surface) 60%, transparent);
    border-color: var(--m-border);
}

.vault-empty-cta .material-symbols-outlined[b-gnn4573qdr] { font-size: 18px; }

/* ---- Locked-preview grid (Treasury Vault empty state, "Bundles to discover") ---- */
.vault-locked-preview-section[b-gnn4573qdr] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--m-border) 70%, transparent);
}

.vault-locked-heading[b-gnn4573qdr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-family: var(--d-font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--m-text);
}

.vault-locked-heading .material-symbols-outlined[b-gnn4573qdr] {
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--accent-amber) 80%, transparent);
}

.vault-locked-sub[b-gnn4573qdr] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--m-text-2);
    line-height: 1.5;
    max-width: 560px;
}

.vault-locked-grid[b-gnn4573qdr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 576px) {
    .vault-locked-grid[b-gnn4573qdr] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.75rem;
    }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
    .vault-body[b-gnn4573qdr] {
        padding: 1rem;
    }

    .vault-grid[b-gnn4573qdr] {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-layout *[b-gnn4573qdr] {
        transition: none;
    }

    .vault-empty-icon[b-gnn4573qdr] {
        animation: none;
    }

    /* Hide ambient sparkles entirely for reduced-motion users — twinkling
       point-lights are the kind of repetitive movement this preference targets. */
    .vault-empty-icon[b-gnn4573qdr]::before,
    .vault-empty-icon[b-gnn4573qdr]::after {
        animation: none;
        opacity: 0;
        display: none;
    }
}

/* ============================================================
   LIGHT THEME — Warm Alabaster (Albino Dragon)
   ============================================================ */

.vault-layout:is([data-theme="light"], [data-theme="bright"])[b-gnn4573qdr] {
    --accent-amber: var(--m-accent);
    background-color: var(--m-bg);
    color: var(--m-text);
}

.vault-layout:is([data-theme="light"], [data-theme="bright"]) .nebula-bg[b-gnn4573qdr] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-amber) 6%, transparent) 0%, transparent 50%),
        linear-gradient(315deg, color-mix(in srgb, var(--accent-amber) 4%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--m-primary) 8%, transparent) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-amber) 8%, transparent) 0%, transparent 40%),
        var(--m-bg);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .vault-empty-cta[b-gnn4573qdr] {
    color: var(--m-teal);
    border-color: color-mix(in srgb, var(--m-teal) 35%, transparent);
    background: color-mix(in srgb, var(--m-teal) 8%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .vault-empty-cta:hover[b-gnn4573qdr] {
    background: color-mix(in srgb, var(--m-teal) 18%, transparent);
    border-color: color-mix(in srgb, var(--m-teal) 55%, transparent);
    color: var(--m-teal);
}
/* /Pages/Vault/TrophyRoom.razor.rz.scp.css */
.trophy-layout[b-fbdsrv8i79] {
  --accent-gold: var(--m-accent);
  --accent-teal: var(--m-teal);
  font-family: var(--d-font-display);
  color: var(--m-text);
  background-color: var(--d-bg);
  width: 100%;
}

[b-fbdsrv8i79] .material-symbols-outlined {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.text-gold[b-fbdsrv8i79] {
  color: var(--accent-gold);
}
.text-teal[b-fbdsrv8i79] {
  color: var(--accent-teal);
}
.text-primary[b-fbdsrv8i79] {
  color: var(--m-primary);
}
.bg-primary[b-fbdsrv8i79] {
  background-color: var(--m-primary);
}

.cosmic-gradient[b-fbdsrv8i79] {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--m-surface) 40%, transparent) 0%,
    var(--d-bg) 100%
  );
}

.trophy-container[b-fbdsrv8i79] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
  width: 100%;
}

/* ---- Section shell (content) ----
   The section sub-nav was removed for the alpha nav reorg, so the shell now
   wraps only .trophy-content. The >=900px flex row is retained so
   .trophy-content continues to stretch full-width inside the shell. */
@media (min-width: 900px) {
    .trophy-section-shell[b-fbdsrv8i79] {
        display: flex;
        align-items: stretch;
        gap: 1rem;
    }

    .trophy-content[b-fbdsrv8i79] {
        flex: 1;
        /* Prevents intrinsic min-content (long titles, market scroll row)
           from forcing horizontal overflow inside the flex track. */
        min-width: 0;
    }
}

/* Trophy body padding */
.trophy-body[b-fbdsrv8i79] {
    padding: 1.5rem;
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Summary stats row */
.trophy-summary[b-fbdsrv8i79] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 15%, transparent);
    border-radius: 12px;
}

.trophy-stat[b-fbdsrv8i79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    animation: stat-reveal-b-fbdsrv8i79 0.5s ease-out both;
}

.trophy-stat:nth-child(1)[b-fbdsrv8i79] { animation-delay: 0s; }
.trophy-stat:nth-child(2)[b-fbdsrv8i79] { animation-delay: 0.1s; }
.trophy-stat:nth-child(3)[b-fbdsrv8i79] { animation-delay: 0.2s; }

@keyframes stat-reveal-b-fbdsrv8i79 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trophy-stat-value[b-fbdsrv8i79] {
    font-family: var(--d-font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.trophy-stat-label[b-fbdsrv8i79] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--m-text-2);
    font-weight: 600;
}

/* Mobile */
@media (max-width: 576px) {
    .trophy-body[b-fbdsrv8i79] {
        padding: 1rem;
    }

    .trophy-summary[b-fbdsrv8i79] {
        gap: 1rem;
        padding: 1rem;
    }

    .trophy-stat-value[b-fbdsrv8i79] {
        font-size: 1.35rem;
    }

    .trophy-footer[b-fbdsrv8i79] {
        padding: 1rem;
    }

    .gear-grid[b-fbdsrv8i79] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trophy-stat[b-fbdsrv8i79] {
        animation: none;
    }

    .stat-bar-fill[b-fbdsrv8i79] {
        transition: none;
    }

    .gear-slot[b-fbdsrv8i79] {
        transition: none;
    }
}

/* Light theme */
:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-summary[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--m-card, #ffffff));
}

/* Override subnav accent for Trophy Room (gold instead of default teal) */
[b-fbdsrv8i79] .vault-subnav {
  --subnav-accent: var(--accent-gold);
}

/* ---- Empty state ---- */
.trophy-empty[b-fbdsrv8i79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
}

.trophy-empty-icon[b-fbdsrv8i79] {
    font-size: 3.5rem;
    color: var(--accent-gold);
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.trophy-empty-title[b-fbdsrv8i79] {
    font-family: var(--d-font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    margin: 0;
}

.trophy-empty-body[b-fbdsrv8i79] {
    font-size: 0.9rem;
    color: var(--m-text-2);
    max-width: 440px;
    line-height: 1.6;
    margin: 0;
}

.trophy-empty-actions[b-fbdsrv8i79] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.trophy-empty-cta[b-fbdsrv8i79] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent-gold);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    transition: background 0.2s, border-color 0.2s;
}

.trophy-empty-cta:hover[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    color: var(--accent-gold);
}

.trophy-empty-cta-secondary[b-fbdsrv8i79] {
    color: var(--m-text-2);
    border-color: color-mix(in srgb, var(--m-border) 50%, transparent);
    background: color-mix(in srgb, var(--m-surface) 30%, transparent);
}

.trophy-empty-cta-secondary:hover[b-fbdsrv8i79] {
    color: var(--m-text);
    background: color-mix(in srgb, var(--m-surface) 60%, transparent);
    border-color: var(--m-border);
}

.trophy-empty-cta .material-symbols-outlined[b-fbdsrv8i79] {
    font-size: 18px;
}

.trophy-empty-cta:focus-visible[b-fbdsrv8i79] {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* --- Compass Progress panel --- */
.stats-container[b-fbdsrv8i79] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--m-surface) 6%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--m-border) 40%, transparent);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.panel-header[b-fbdsrv8i79] {
    margin-bottom: 0.5rem;
}

.panel-header h3[b-fbdsrv8i79] {
    font-family: var(--d-font-serif);
    font-size: 1.125rem;
    color: var(--m-text);
    margin: 0 0 0.25rem 0;
}

.panel-header p[b-fbdsrv8i79] {
    font-size: 0.75rem;
    color: var(--m-text-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.stat-group[b-fbdsrv8i79] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stat-header[b-fbdsrv8i79] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
}

.stat-axis-name[b-fbdsrv8i79] {
    font-weight: 600;
}

.stat-value[b-fbdsrv8i79] {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.stat-bar-track[b-fbdsrv8i79] {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--m-surface) 20%, transparent);
    overflow: hidden;
}

.stat-bar-fill[b-fbdsrv8i79] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
    min-width: 0;
}

.stat-sub[b-fbdsrv8i79] {
    font-size: 0.65rem;
    color: var(--m-text-2);
}

/* --- Gear section (placeholder) --- */
.gear-section[b-fbdsrv8i79] {
    padding: 1.25rem;
    background: color-mix(in srgb, var(--m-surface) 4%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--m-border) 30%, transparent);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.gear-section h4[b-fbdsrv8i79] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--m-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
}

.gear-section h4 .material-symbols-outlined[b-fbdsrv8i79] {
    font-size: 1.125rem;
    color: var(--accent-gold);
}

.gear-grid[b-fbdsrv8i79] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.gear-slot[b-fbdsrv8i79] {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--m-primary) 25%, transparent);
    background-color: color-mix(in srgb, var(--m-primary) 5%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.gear-slot .material-symbols-outlined[b-fbdsrv8i79] {
    color: var(--m-text-disabled);
    transition: color 0.2s;
}

.gear-slot:hover[b-fbdsrv8i79] {
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
}

.gear-slot:hover .material-symbols-outlined[b-fbdsrv8i79] {
    color: var(--accent-gold);
}

.gear-coming-soon[b-fbdsrv8i79] {
    font-size: 0.75rem;
    color: var(--m-text-2);
    margin: 0.75rem 0 0;
    font-style: italic;
}

.btn-equip[b-fbdsrv8i79] {
    width: 100%;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    background-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
    color: var(--m-text-disabled);
    border: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: not-allowed;
}

/* --- Footer: Starlight Market layout --- */
.trophy-footer[b-fbdsrv8i79] {
  background-color: color-mix(in srgb, var(--m-bg) 90%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--m-primary) 20%, transparent);
  padding: 1.25rem 2.5rem;
  position: relative;
  z-index: 40;
}

.footer-header[b-fbdsrv8i79] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.header-title-group[b-fbdsrv8i79] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-title-group h3[b-fbdsrv8i79] {
  font-family: var(--d-font-serif);
  font-size: 1.25rem;
  color: var(--m-text);
  margin: 0;
}

.view-all-btn[b-fbdsrv8i79] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.view-all-btn:hover[b-fbdsrv8i79] {
  text-decoration: underline;
}
.view-all-btn:focus-visible[b-fbdsrv8i79] {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
.view-all-btn .material-symbols-outlined[b-fbdsrv8i79] {
  font-size: 0.875rem;
}

.market-scroll-container[b-fbdsrv8i79] {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.market-scroll-container[b-fbdsrv8i79]::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   LIGHT MODE — Crystalline Frost (Cool teal-violet)
   ============================================================ */

/* --- Scoped variable overrides --- */
.trophy-layout:is([data-theme="light"], [data-theme="bright"])[b-fbdsrv8i79] {
    --accent-gold: var(--m-teal); /* gold→teal swap for light mode contrast — intentional */
}

/* --- Cosmic background → cool pearl gradient --- */
.trophy-layout:is([data-theme="light"], [data-theme="bright"]) .cosmic-gradient[b-fbdsrv8i79] {
    background:
        radial-gradient(
            circle at 30% 20%,
            color-mix(in srgb, var(--m-teal) 6%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 70% 80%,
            color-mix(in srgb, var(--m-primary) 6%, transparent) 0%,
            transparent 50%
        ),
        linear-gradient(180deg, var(--m-bg) 0%, var(--m-surface) 50%, color-mix(in srgb, var(--m-surface) 80%, var(--m-primary) 20%) 100%);
}

/* --- Stats + Gear → light overrides --- */
:is(html[data-theme="light"], html[data-theme="bright"]) .stats-container[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--m-teal) 4%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-teal) 15%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .gear-section[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--m-surface) 30%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-border) 40%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .gear-slot[b-fbdsrv8i79] {
    border-color: color-mix(in srgb, var(--m-primary) 15%, transparent);
    background-color: color-mix(in srgb, var(--m-primary) 4%, var(--m-bg));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .gear-slot:hover[b-fbdsrv8i79] {
    border-color: var(--m-teal);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .gear-slot:hover .material-symbols-outlined[b-fbdsrv8i79] {
    color: var(--m-teal);
}

/* --- Footer → cool frosted surface --- */
.trophy-layout:is([data-theme="light"], [data-theme="bright"]) .trophy-footer[b-fbdsrv8i79] {
    background-color: color-mix(in srgb, var(--m-card) 85%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--m-teal) 15%, transparent);
}

.trophy-layout:is([data-theme="light"], [data-theme="bright"]) .view-all-btn[b-fbdsrv8i79] {
    color: var(--m-teal);
}

/* --- Shimmer overlay → cool teal-violet crystalline refraction --- */
.trophy-layout:is([data-theme="light"], [data-theme="bright"]) .shimmer-effect[b-fbdsrv8i79]::after {
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        color-mix(in srgb, var(--m-teal) 8%, transparent),
        color-mix(in srgb, var(--m-primary) 4%, transparent),
        transparent 70%
    );
}

/* =====================================================
   Trophy card grid — completed adventure trophies
   ===================================================== */

.trophy-grid[b-fbdsrv8i79] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.trophy-card[b-fbdsrv8i79] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--m-card, #1e1e2e));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}

.trophy-card:hover[b-fbdsrv8i79] {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 9%, var(--m-card, #1e1e2e));
}

.trophy-card-icon[b-fbdsrv8i79] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trophy-card-icon .material-symbols-outlined[b-fbdsrv8i79] {
    font-size: 1.25rem;
    color: var(--accent-gold);
}

.trophy-card-body[b-fbdsrv8i79] {
    flex: 1;
    min-width: 0;
}

.trophy-card-title[b-fbdsrv8i79] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--m-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trophy-card-date[b-fbdsrv8i79] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--m-text-2);
    margin-top: 0.25rem;
}

.trophy-card-date .material-symbols-outlined[b-fbdsrv8i79] {
    font-size: 0.75rem;
    color: var(--m-text-2);
}

.trophy-card-badge[b-fbdsrv8i79] {
    flex-shrink: 0;
}

.trophy-card-badge .material-symbols-outlined[b-fbdsrv8i79] {
    font-size: 1.25rem;
    color: var(--accent-gold);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-card[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--m-teal) 4%, var(--m-card, #ffffff));
    border-color: color-mix(in srgb, var(--m-teal) 18%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-card:hover[b-fbdsrv8i79] {
    border-color: color-mix(in srgb, var(--m-teal) 40%, transparent);
    background: color-mix(in srgb, var(--m-teal) 9%, var(--m-card, #ffffff));
}

:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-card-icon[b-fbdsrv8i79] {
    background: color-mix(in srgb, var(--m-teal) 12%, transparent);
}

:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-card-icon .material-symbols-outlined[b-fbdsrv8i79],
:is(html[data-theme="light"], html[data-theme="bright"]) .trophy-card-badge .material-symbols-outlined[b-fbdsrv8i79] {
    color: var(--m-teal);
}

@media (max-width: 576px) {
    .trophy-grid[b-fbdsrv8i79] {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Trophy body — layout overrides kept with new summary
   ===================================================== */

/* Trophy Room uses gold accent for the overlay — set via --cs-accent */
[b-fbdsrv8i79] .cs-overlay,
[b-fbdsrv8i79] .cs-restore-btn {
    --cs-accent: var(--d-gold);
}
/* /Shared/DiscordWidget.razor.rz.scp.css */
/* Discord Floating Widget */
.discord-widget[b-gch92cj1rj] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInUp-b-gch92cj1rj 0.4s ease-out;
}

/* Collapsed state - circular button */
.discord-widget.collapsed[b-gch92cj1rj] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    box-shadow:
        0 4px 14px rgba(88, 101, 242, 0.4),
        0 0 0 0 rgba(88, 101, 242, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discord-widget.collapsed:hover[b-gch92cj1rj] {
    transform: scale(1.1) translateY(-2px);
    box-shadow:
        0 8px 24px rgba(88, 101, 242, 0.5),
        0 0 0 4px rgba(88, 101, 242, 0.15);
}

.discord-widget.collapsed:active[b-gch92cj1rj] {
    transform: scale(1.05);
}

/* Expanded state - card panel */
.discord-widget.expanded[b-gch92cj1rj] {
    width: 300px;
    max-height: 450px;
    border-radius: 16px;
    background: var(--m-surface);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    cursor: default;
    overflow: hidden;
}

/* Header */
.discord-widget-header[b-gch92cj1rj] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    color: var(--m-on-primary, #fff);
}

.discord-widget.collapsed .discord-widget-header[b-gch92cj1rj] {
    border: none;
    background: transparent;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Discord icon */
.discord-icon[b-gch92cj1rj] {
    position: relative;
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-on-primary, #fff);
}

.discord-widget.collapsed .discord-icon[b-gch92cj1rj] {
    font-size: 26px;
    width: 100%;
    height: 100%;
}

.discord-svg-icon[b-gch92cj1rj] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.discord-svg-muted[b-gch92cj1rj] {
    opacity: 0.5;
}

/* Status indicator dot */
.status-indicator[b-gch92cj1rj] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
}

.discord-widget.collapsed .status-indicator[b-gch92cj1rj] {
    bottom: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-width: 2px;
}

.status-indicator.online[b-gch92cj1rj] {
    background-color: #23A559;
    box-shadow: 0 0 8px rgba(35, 165, 89, 0.8);
    animation: pulse-online-b-gch92cj1rj 2s ease-in-out infinite;
}

.status-indicator.offline[b-gch92cj1rj] {
    background-color: #F23F43;
    box-shadow: 0 0 4px rgba(242, 63, 67, 0.5);
}

@keyframes pulse-online-b-gch92cj1rj {
    0%, 100% { box-shadow: 0 0 8px rgba(35, 165, 89, 0.8); }
    50% { box-shadow: 0 0 12px rgba(35, 165, 89, 1); }
}

/* Title and close button */
.discord-title[b-gch92cj1rj] {
    flex-grow: 1;
    margin-left: 12px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.btn-close-widget[b-gch92cj1rj] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--m-on-primary, #fff);
    font-size: 14px;
    cursor: pointer;
    padding: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-close-widget:hover[b-gch92cj1rj] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Body content */
.discord-widget-body[b-gch92cj1rj] {
    padding: 16px;
    max-height: 350px;
    overflow-y: auto;
    background: var(--m-surface);
}

.status-message[b-gch92cj1rj] {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--m-surface);
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--m-border);
}

.status-message .material-symbols-outlined[b-gch92cj1rj] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Notification form */
.notification-form[b-gch92cj1rj] {
    margin-top: 12px;
}

.notification-form .form-label[b-gch92cj1rj] {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--m-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-form .form-control[b-gch92cj1rj] {
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 14px;
}

.notification-form .form-control:focus[b-gch92cj1rj] {
    border-color: #5865F2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}

/* Discord button */
.btn-discord[b-gch92cj1rj] {
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    color: var(--m-on-primary, #fff);
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 16px;
    transition: all 0.2s ease;
}

.btn-discord:hover[b-gch92cj1rj] {
    background: linear-gradient(135deg, #4752C4 0%, #5B6EAE 100%);
    color: var(--m-on-primary, #fff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.35);
}

.btn-discord:active[b-gch92cj1rj] {
    transform: translateY(0);
}

/* Footer */
.widget-footer[b-gch92cj1rj] {
    padding-top: 12px;
    border-top: 1px solid var(--m-border);
    text-align: center;
}

.widget-footer small[b-gch92cj1rj] {
    font-size: 11px;
    opacity: 0.7;
}

.alert-sm[b-gch92cj1rj] {
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* Dark mode support */
[data-theme="dark"] .discord-widget.collapsed[b-gch92cj1rj] {
    box-shadow:
        0 4px 14px rgba(88, 101, 242, 0.3),
        0 0 0 0 rgba(88, 101, 242, 0.3);
}

[data-theme="dark"] .discord-widget.collapsed:hover[b-gch92cj1rj] {
    box-shadow:
        0 8px 24px rgba(88, 101, 242, 0.4),
        0 0 0 4px rgba(88, 101, 242, 0.1);
}

[data-theme="dark"] .discord-widget.expanded[b-gch92cj1rj] {
    background: var(--m-bg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .discord-widget-body[b-gch92cj1rj] {
    background: var(--m-bg);
}

[data-theme="dark"] .status-message[b-gch92cj1rj] {
    background: var(--m-surface-elevated);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .notification-form .form-control[b-gch92cj1rj] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--m-text);
}

[data-theme="dark"] .notification-form .form-control:focus[b-gch92cj1rj] {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .widget-footer[b-gch92cj1rj] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .discord-widget[b-gch92cj1rj] {
        bottom: 16px;
        right: 16px;
    }

    .discord-widget.collapsed[b-gch92cj1rj] {
        width: 50px;
        height: 50px;
    }

    .discord-widget.collapsed .discord-icon[b-gch92cj1rj] {
        font-size: 22px;
    }

    .discord-widget.expanded[b-gch92cj1rj] {
        width: calc(100vw - 32px);
        max-width: 300px;
        right: 16px;
    }
}

/* Animation for appearing */
@keyframes slideInUp-b-gch92cj1rj {
    from {
        transform: translateY(80px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discord-widget[b-gch92cj1rj] {
        animation: none;
    }

    .discord-widget.collapsed:hover[b-gch92cj1rj] {
        transform: none;
    }

    .status-indicator.online[b-gch92cj1rj] {
        animation: none;
    }
}

/* Inline mode — used when the widget is hosted inside a container (e.g. the
   Settings → Community section). Removes the fixed-position floating overlay
   styling so the widget sits in normal document flow under its parent. */
.discord-widget.discord-widget-inline[b-gch92cj1rj] {
    position: static;
    bottom: auto;
    right: auto;
    z-index: auto;
    animation: none;
}

.discord-widget.discord-widget-inline.expanded[b-gch92cj1rj] {
    width: 100%;
    max-width: 100%;
    max-height: none;
}

.discord-widget.discord-widget-inline.collapsed:hover[b-gch92cj1rj] {
    /* Subtle hover for the inline collapsed pill — no big translate/scale because
       a floating fab effect is wrong inside a settings card. */
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .discord-widget.discord-widget-inline[b-gch92cj1rj] {
        bottom: auto;
        right: auto;
    }

    .discord-widget.discord-widget-inline.expanded[b-gch92cj1rj] {
        width: 100%;
        max-width: 100%;
        right: auto;
    }
}
/* /Shared/EndpointSwitcher.razor.rz.scp.css */
/* EndpointSwitcher — styled to match DevToolsBar buttons */

/* Wrap groups the dropdown trigger with the always-visible URL + DB hint underneath.
   The hint MUST live outside .endpoint-switcher (the Bootstrap .dropdown element) so
   it isn't toggled by the dropdown's show/hide. */
.endpoint-switcher-wrap[b-heviqf2dvv] {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.es-hint[b-heviqf2dvv] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--m-text-2);
    padding: 0 0.15rem;
    max-width: 28rem;
}

.es-hint-line[b-heviqf2dvv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.es-hint-url[b-heviqf2dvv] {
    /* URL is the primary diagnostic — slightly more contrast than DB row. */
    color: color-mix(in srgb, var(--m-text-2) 90%, var(--m-text));
}

.es-hint-db[b-heviqf2dvv] {
    color: var(--m-text-2);
    font-weight: 500;
}

.es-trigger[b-heviqf2dvv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--m-secondary);
    color: var(--m-secondary);
    background: color-mix(in srgb, var(--m-secondary) 6%, transparent);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.es-trigger:hover[b-heviqf2dvv],
.es-trigger:focus-visible[b-heviqf2dvv] {
    background: color-mix(in srgb, var(--m-secondary) 18%, transparent);
}

.es-trigger .material-symbols-outlined[b-heviqf2dvv] {
    font-size: 1rem;
}

/* Dropdown caret — Bootstrap adds ::after for .dropdown-toggle */
.es-trigger[b-heviqf2dvv]::after {
    margin-left: 0.25rem;
    vertical-align: 0.1em;
    border-top-color: currentColor;
}

/* Dropdown menu — dark glass to match dev tools bar */
.endpoint-switcher .dropdown-menu[b-heviqf2dvv] {
    background: color-mix(in srgb, var(--m-surface-elevated) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m-bg) 20%, transparent);
    padding: 0.35rem 0;
    min-width: 200px;
    bottom: 100%;
    top: auto;
    margin-bottom: 0.25rem;
}

.endpoint-switcher .dropdown-header[b-heviqf2dvv] {
    color: var(--m-text-2);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.75rem;
}

.endpoint-switcher .dropdown-item[b-heviqf2dvv] {
    color: var(--m-text);
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    margin: 0 0.25rem;
    width: calc(100% - 0.5rem);
    transition: background 0.12s;
}

.endpoint-switcher .dropdown-item:hover[b-heviqf2dvv] {
    background: color-mix(in srgb, var(--m-primary) 12%, transparent);
    color: var(--m-text);
}

.endpoint-switcher .dropdown-item.active[b-heviqf2dvv] {
    background: color-mix(in srgb, var(--m-primary) 18%, transparent);
    color: var(--m-primary);
}

.endpoint-switcher .dropdown-divider[b-heviqf2dvv] {
    border-color: color-mix(in srgb, var(--m-border) 40%, transparent);
    margin: 0.25rem 0;
}

/* Health indicators */
.endpoint-health-dot[b-heviqf2dvv] {
    font-size: 0.5rem;
}

.endpoint-health-spinner[b-heviqf2dvv] {
    font-size: 0.625rem;
    animation: ep-spin-b-heviqf2dvv 1s linear infinite;
}

@keyframes ep-spin-b-heviqf2dvv {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .endpoint-health-spinner[b-heviqf2dvv] {
        animation: none;
    }
}

.active-check-icon[b-heviqf2dvv] {
    font-size: 0.875rem;
}
/* /Shared/EnvironmentIndicator.razor.rz.scp.css */
/* EnvironmentIndicator — Dragon Scale themed environment banner */

.environment-indicator[b-dr0jggk4n7] {
    position: relative;
    width: 100%;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    animation: env-slide-in-b-dr0jggk4n7 0.3s ease-out;
}

@keyframes env-slide-in-b-dr0jggk4n7 {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

.env-ind-icon[b-dr0jggk4n7] {
    font-size: 0.8rem;
    line-height: 1;
}

.env-ind-label[b-dr0jggk4n7] {
    font-weight: 700;
}

.env-ind-host[b-dr0jggk4n7] {
    opacity: 0.75;
    font-weight: 400;
}

/* Development — green */
.environment-indicator.env-development[b-dr0jggk4n7] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--m-success) 80%, var(--m-bg)),
        var(--m-success)
    );
    color: var(--m-on-primary);
}

/* Staging — amber */
.environment-indicator.env-staging[b-dr0jggk4n7] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--m-accent) 70%, var(--m-bg)),
        var(--m-accent)
    );
    color: var(--m-on-primary);
}

/* Local — brand purple */
.environment-indicator.env-local[b-dr0jggk4n7] {
    background: linear-gradient(90deg,
        var(--m-primary),
        color-mix(in srgb, var(--m-primary) 75%, var(--m-secondary))
    );
    color: var(--m-on-primary);
}

/* Unknown — neutral */
.environment-indicator.env-unknown[b-dr0jggk4n7] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--m-text-2) 60%, transparent),
        color-mix(in srgb, var(--m-text-2) 40%, transparent)
    );
    color: var(--m-on-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .environment-indicator[b-dr0jggk4n7] {
        animation: none;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Main Layout — page-level flex container only */
.page[b-95zq57ky67] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* /Shared/WhatsAppSupportWidget.razor.rz.scp.css */
.whatsapp-support[b-e0opwb18fh] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    animation: whatsapp-support-rise-b-e0opwb18fh 0.25s var(--m-ease-out);
}

.whatsapp-support-fab[b-e0opwb18fh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--m-primary) 38%, var(--m-border));
    border-radius: 50%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--m-primary) 86%, var(--m-teal)),
        color-mix(in srgb, var(--m-primary) 72%, var(--m-accent)));
    color: var(--m-on-primary);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--m-primary) 22%, transparent);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.whatsapp-support-fab:hover[b-e0opwb18fh] {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 9px 22px color-mix(in srgb, var(--m-primary) 28%, transparent);
}

.whatsapp-support-fab:focus-visible[b-e0opwb18fh] {
    outline: 2px solid var(--m-focus);
    outline-offset: 3px;
}

.whatsapp-support-fab .material-symbols-outlined[b-e0opwb18fh] {
    font-size: 1.35rem;
}

.whatsapp-support-panel[b-e0opwb18fh] {
    width: min(320px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--m-teal) 35%, var(--m-border));
    border-radius: 14px;
    background: var(--m-surface-elevated);
    box-shadow: var(--m-shadow-lg);
}

.whatsapp-support-header[b-e0opwb18fh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(135deg, var(--m-teal), color-mix(in srgb, var(--m-teal) 70%, var(--m-primary)));
    color: var(--m-on-primary);
}

.whatsapp-support-title[b-e0opwb18fh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.whatsapp-support-title .material-symbols-outlined[b-e0opwb18fh] {
    font-size: 1rem;
}

.whatsapp-support-close[b-e0opwb18fh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--m-on-primary) 14%, transparent);
    color: var(--m-on-primary);
    cursor: pointer;
}

.whatsapp-support-close:hover[b-e0opwb18fh] {
    background: color-mix(in srgb, var(--m-on-primary) 24%, transparent);
}

.whatsapp-support-close:focus-visible[b-e0opwb18fh] {
    outline: 2px solid var(--m-on-primary);
    outline-offset: 2px;
}

.whatsapp-support-close .material-symbols-outlined[b-e0opwb18fh] {
    font-size: 1rem;
}

.whatsapp-support-body[b-e0opwb18fh] {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem;
}

.whatsapp-support-body p[b-e0opwb18fh] {
    margin: 0;
    color: var(--m-text-2);
    font-size: 0.85rem;
    line-height: 1.4;
}

.whatsapp-support-attest[b-e0opwb18fh] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--m-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.whatsapp-support-attest input[b-e0opwb18fh] {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    accent-color: var(--m-teal);
    flex-shrink: 0;
}

.whatsapp-support-link[b-e0opwb18fh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--m-teal) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--m-teal) 18%, transparent);
    color: var(--m-text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.whatsapp-support-link:hover[b-e0opwb18fh] {
    border-color: var(--m-teal);
    background: color-mix(in srgb, var(--m-teal) 28%, transparent);
    color: var(--m-text);
}

.whatsapp-support-link:focus-visible[b-e0opwb18fh] {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
}

.whatsapp-support-link .material-symbols-outlined[b-e0opwb18fh] {
    color: var(--m-teal);
    font-size: 1rem;
}

.whatsapp-support-disabled[b-e0opwb18fh] {
    display: block;
    color: var(--m-text-2);
    font-size: 0.8rem;
}

.whatsapp-support.whatsapp-support-inline[b-e0opwb18fh] {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    animation: none;
}

.whatsapp-support.whatsapp-support-inline .whatsapp-support-panel[b-e0opwb18fh] {
    width: 100%;
    box-shadow: none;
}

@keyframes whatsapp-support-rise-b-e0opwb18fh {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .whatsapp-support[b-e0opwb18fh] {
        right: 16px;
        bottom: 16px;
    }

    .whatsapp-support-fab[b-e0opwb18fh] {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-support[b-e0opwb18fh] {
        animation: none;
    }

    .whatsapp-support-fab[b-e0opwb18fh],
    .whatsapp-support-fab:hover[b-e0opwb18fh] {
        transition: none;
        transform: none;
    }
}