/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/*
    Mirrors the #blazor-error-ui rules in MainLayout.razor.css. Blazor's scoped CSS
    rewrites these selectors with a per-component attribute, so the rules in
    MainLayout don't reach the error <div> rendered inside AuthLayout. Without these
    rules the error UI defaults to visible (browser default for <div>), which is why
    every /login page load showed "An unhandled error has occurred" even when nothing
    was actually wrong.
*/

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

    #blazor-error-ui .dismiss[b-9wvplworhd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-l7ubq7gqv9] {
    display: flex;
    min-height: 100vh;
}

.sidebar[b-l7ubq7gqv9] {
    width: 17.5rem;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-secondary);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-l7ubq7gqv9] {
    flex: 1;
    background: var(--bg-secondary);
    min-width: 0;
}

.content[b-l7ubq7gqv9] {
    padding: var(--spacing-10);
    max-width: auto; /*var(--container-3xl);*/
}

@media (max-width: 48rem) {
    .page[b-l7ubq7gqv9] {
        flex-direction: column;
    }

    .sidebar[b-l7ubq7gqv9] {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-secondary);
    }

    .content[b-l7ubq7gqv9] {
        padding: var(--spacing-6);
    }
}

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

    #blazor-error-ui .dismiss[b-l7ubq7gqv9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-header[b-a96t8vuwi7] {
    padding: var(--spacing-6) var(--spacing-5) var(--spacing-4);
    border-bottom: 1px solid var(--border-secondary);
}

.nav-title[b-a96t8vuwi7] {
    font-family: var(--font-family-display);
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-text-lg);
    color: var(--text-primary);
    margin: 0;
}

.nav-subtitle[b-a96t8vuwi7] {
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--text-tertiary);
    margin: var(--spacing-0-5) 0 0;
}

.nav-menu[b-a96t8vuwi7] {
    padding: var(--spacing-4) var(--spacing-3);
}

.nav-menu--scrollable[b-a96t8vuwi7] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.nav-menu--scrollable:hover[b-a96t8vuwi7] {
    scrollbar-color: var(--border-secondary) transparent;
}

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

.nav-menu--scrollable[b-a96t8vuwi7]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-menu--scrollable[b-a96t8vuwi7]::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.nav-menu--scrollable:hover[b-a96t8vuwi7]::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
}

.nav-menu--scrollable[b-a96t8vuwi7]::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-primary);
}

.nav-section-header[b-a96t8vuwi7] {
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-text-xs);
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 var(--spacing-3) var(--spacing-2);
}

.nav-section-header:not(:first-child)[b-a96t8vuwi7] {
    padding-top: var(--spacing-4);
}

[b-a96t8vuwi7] .nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-2);
    border-radius: var(--radius-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[b-a96t8vuwi7] .nav-link:hover {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
}

[b-a96t8vuwi7] .nav-link.active {
    background: var(--bg-brand-primary-alt);
    color: var(--text-brand-secondary);
    font-weight: var(--font-weight-semibold);
}

[b-a96t8vuwi7] .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* =========================================================================
 * FOOTER — theme toggle at bottom of sidebar
 * ========================================================================= */
.nav-footer[b-a96t8vuwi7] {
    padding: var(--spacing-4) var(--spacing-3);
    border-top: 1px solid var(--border-secondary);
}

.theme-toggle[b-a96t8vuwi7] {
    display: flex;
    width: 100%;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-1);
    gap: var(--spacing-1);
}

.theme-toggle-btn[b-a96t8vuwi7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1-5);
    flex: 1;
    padding: var(--spacing-1-5) var(--spacing-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-text-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.theme-toggle-btn:hover[b-a96t8vuwi7] {
    color: var(--text-secondary);
}

.theme-toggle-btn--active[b-a96t8vuwi7] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

.theme-toggle-btn--active:hover[b-a96t8vuwi7] {
    color: var(--text-primary);
}

.theme-toggle-btn svg[b-a96t8vuwi7] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* =========================================================================
 * USER SECTION — user info + logout above theme toggle
 * ========================================================================= */
.nav-user-section[b-a96t8vuwi7] {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--border-secondary);
    margin-top: auto;
}

.nav-user-info[b-a96t8vuwi7] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.nav-user-avatar[b-a96t8vuwi7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.nav-user-details[b-a96t8vuwi7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.nav-user-name[b-a96t8vuwi7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-role[b-a96t8vuwi7] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.nav-logout-btn[b-a96t8vuwi7] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
}

.nav-logout-btn:hover[b-a96t8vuwi7] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qv61a45wtt],
.components-reconnect-repeated-attempt-visible[b-qv61a45wtt],
.components-reconnect-failed-visible[b-qv61a45wtt],
.components-pause-visible[b-qv61a45wtt],
.components-resume-failed-visible[b-qv61a45wtt],
.components-rejoining-animation[b-qv61a45wtt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-retrying[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-failed[b-qv61a45wtt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-qv61a45wtt] {
    display: block;
}


#components-reconnect-modal[b-qv61a45wtt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-qv61a45wtt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-qv61a45wtt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-qv61a45wtt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-qv61a45wtt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-qv61a45wtt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-qv61a45wtt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-qv61a45wtt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-qv61a45wtt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-qv61a45wtt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-qv61a45wtt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-qv61a45wtt] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-qv61a45wtt] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-qv61a45wtt] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-qv61a45wtt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-qv61a45wtt] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-qv61a45wtt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-qv61a45wtt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-qv61a45wtt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/BadgeListPage.razor.rz.scp.css */
/* =============================================================
 * Badges — page-scoped primitives
 * Segmented filter, search, grid, and the chip row/caption
 * rendered inside each InfoCard's body. All styles bind to
 * design tokens.
 * ============================================================= */

/* ── Filter row ──
   Sits inside the FormSection header Actions slot. Segmented
   control on the left, search on the right. Wraps on narrow
   layouts. */
.bg-filter-row[b-4d6xh1zlc7] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width:auto;
}

.bg-segmented[b-4d6xh1zlc7] {
    display: inline-flex;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    gap: 2px;
}

.bg-segmented__btn[b-4d6xh1zlc7] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 5px var(--spacing-3);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.bg-segmented__btn:hover:not(.bg-segmented__btn--active)[b-4d6xh1zlc7] {
    color: var(--text-primary);
}

.bg-segmented__btn--active[b-4d6xh1zlc7] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

.bg-segmented__count[b-4d6xh1zlc7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bg-segmented__btn--active .bg-segmented__count[b-4d6xh1zlc7] {
    background: var(--bg-brand-primary);
    color: var(--text-brand-primary);
}

/* ── Search ── */
.bg-search[b-4d6xh1zlc7] {
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 280px;
}

.bg-search__i benput[b-4d6xh1zlc7] {
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bg-search__input:focus[b-4d6xh1zlc7] {
    outline: none;
    border-color: var(--border-brand);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--bg-brand-primary);
}

.bg-search__input[b-4d6xh1zlc7]::placeholder {
    color: var(--text-placeholder);
}

/* ── Grid ──
   4-col on wide viewports, gracefully degrades to auto-fit. */
.bg-grid[b-4d6xh1zlc7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-4);
}

@media (max-width: 1200px) {
    .bg-grid[b-4d6xh1zlc7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .bg-grid[b-4d6xh1zlc7] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* ── Grid-cell override ──
   Empty-variant InfoCards have a fixed 276px width. Inside our
   4-col grid cells we want them to stretch to fill the cell so
   the tile width stays uniform across the row. */
.bg-grid[b-4d6xh1zlc7]  .info-card-empty {
    width: 100%;
}
/* /Components/Pages/Admin/BookFormPage.razor.rz.scp.css */
/*
 * Physical edition row: 4-column inline grid (name, price, points, remove button).
 * No existing layout primitive covers this inline-form-row-with-destructive-action pattern.
 */
.edition-row[b-ho0admdt55] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    align-items: end;
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--border-secondary);
}

/* Reduce the visual area of orientation RadioCards to ~70% of the natural
 * square height. aspect-ratio: 7/5 (= 1.4) means visual height = 5/7 ≈ 71%
 * of card width, vs the default 1/1 square.
 * Cover art tracks this automatically via flex: 1 on .cover-uploader-shell. */
.orientation-cards-grid[b-ho0admdt55]  .radio-card__visual {
    aspect-ratio: 7 / 5;
}

/* Cover Image wrapper stretches to fill the grid cell so it matches
 * the adjacent Orientation column height (label + two square RadioCards). */
.cover-uploader-field[b-ho0admdt55] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cover-uploader-shell[b-ho0admdt55] {
    flex: 1;
    display: flex;
    min-height: 0;
    /* Hard cap so the uploaded preview image can't pull the grid row taller
       than the adjacent Orientation column. Without this, the <img>'s
       intrinsic height drives the row height after upload. */
    max-height: 180px;
    overflow: hidden;
}

.cover-uploader-shell[b-ho0admdt55]  .image-uploader {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Empty-state dropzone fills the wrapper */
.cover-uploader-shell[b-ho0admdt55]  .file-upload,
.cover-uploader-shell[b-ho0admdt55]  .file-upload-dropzone {
    flex: 1;
    min-height: 0;
}

.cover-uploader-shell[b-ho0admdt55]  .file-upload-dropzone {
    justify-content: center;
}

/* Preview-state: image fills the wrapper via object-fit cover,
 * buttons pinned to the bottom. */
.cover-uploader-shell[b-ho0admdt55]  .image-uploader__preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.cover-uploader-shell[b-ho0admdt55]  .image-uploader__preview > img {
    flex: 1;
    width: 100%;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover;
    min-height: 0;
}

/*
 * Page upload progress overlay — replaces the action button row while page images
 * are uploading (Pages tab). Outer row is a flex row with the progress block on the
 * left and the Cancel button on the right. The progress block must claim all leftover
 * width via flex: 1 + min-width: 0 (without min-width: 0 the flex item refuses to
 * shrink below its intrinsic content width, capping the bar at the status text length).
 */
/* .page-upload-progress* rules now live in BulkUploadProgress.razor.css —
   the markup moved into that component, so Blazor's CSS isolation made
   the parent-scoped rules dead-letters. Kept this comment as a breadcrumb. */
/* /Components/Pages/Admin/BookHubPage.razor.rz.scp.css */
.book-hub__stat-link[b-reo0kcul3d] {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.book-hub__stat-link:hover[b-reo0kcul3d] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.book-hub__stat-link:focus-visible[b-reo0kcul3d] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.book-hub__panels[b-reo0kcul3d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .book-hub__panels[b-reo0kcul3d] {
        grid-template-columns: 1fr 1fr;
    }
}

.book-hub__panel[b-reo0kcul3d] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.book-hub__panel-header[b-reo0kcul3d] {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-secondary);
}

.book-hub__panel-title[b-reo0kcul3d] {
    font-size: var(--font-size-text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1) 0;
}

.book-hub__panel-subtitle[b-reo0kcul3d] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
    margin: 0;
}

.book-hub__list[b-reo0kcul3d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.book-hub__list-item[b-reo0kcul3d] {
    border-bottom: 1px solid var(--border-secondary);
}

.book-hub__list-item:last-child[b-reo0kcul3d] {
    border-bottom: none;
}

.book-hub__list-link[b-reo0kcul3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-5);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.book-hub__list-link:hover[b-reo0kcul3d] {
    background: var(--bg-secondary);
}

.book-hub__list-link:focus-visible[b-reo0kcul3d] {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: var(--bg-secondary);
}

.book-hub__list-text[b-reo0kcul3d] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.book-hub__list-title[b-reo0kcul3d] {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-hub__list-meta[b-reo0kcul3d] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Admin/BulkImportExportPage.razor.rz.scp.css */
.bulk-page-grid[b-3xiplmpczw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

@media (max-width: 768px) {
    .bulk-page-grid[b-3xiplmpczw] {
        grid-template-columns: 1fr;
    }
}

.bulk-card[b-3xiplmpczw] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.bulk-card__header[b-3xiplmpczw] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.bulk-card__icon[b-3xiplmpczw] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bulk-card__icon--export[b-3xiplmpczw] {
    background: var(--color-brand-50, #f0f9ff);
    color: var(--primary);
}

.bulk-card__icon--import[b-3xiplmpczw] {
    background: var(--color-success-50, #f0fdf4);
    color: var(--success);
}

.bulk-card__title[b-3xiplmpczw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-1) 0;
}

.bulk-card__desc[b-3xiplmpczw] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

.bulk-card__body[b-3xiplmpczw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.bulk-export-row[b-3xiplmpczw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: 8px;
}

.bulk-export-info[b-3xiplmpczw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bulk-export-label[b-3xiplmpczw] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-export-hint[b-3xiplmpczw] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* File drop zone */
.bulk-file-drop[b-3xiplmpczw] {
    position: relative;
    border: 1.5px dashed var(--border-primary);
    border-radius: 8px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s;
    overflow: hidden;
}

.bulk-file-drop:hover[b-3xiplmpczw] {
    border-color: var(--primary);
}

.bulk-file-drop--selected[b-3xiplmpczw] {
    border-color: var(--success);
    border-style: solid;
}

.bulk-file-input[b-3xiplmpczw] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.bulk-file-placeholder[b-3xiplmpczw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--text-tertiary);
    font-size: 0.875rem;
    pointer-events: none;
}

.bulk-file-info[b-3xiplmpczw] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: var(--spacing-2) var(--spacing-3);
    pointer-events: none;
}

.bulk-file-size[b-3xiplmpczw] {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

/* Result panel */
.bulk-result[b-3xiplmpczw] {
    border-radius: 12px;
    padding: var(--spacing-4);
    border: 1px solid var(--border-secondary);
}

.bulk-result--success[b-3xiplmpczw] {
    background: var(--color-success-50, #f0fdf4);
    border-color: var(--success);
}

.bulk-result--error[b-3xiplmpczw] {
    background: var(--color-error-50, #fef2f2);
    border-color: var(--error);
}

.bulk-result--partial[b-3xiplmpczw] {
    background: var(--color-warning-50, #fffbeb);
    border-color: var(--warning, #f59e0b);
}

.bulk-result__header[b-3xiplmpczw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-3);
}

.bulk-result__title[b-3xiplmpczw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.bulk-result__stats[b-3xiplmpczw] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.bulk-stat[b-3xiplmpczw] {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
}

.bulk-stat--total[b-3xiplmpczw] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.bulk-stat--success[b-3xiplmpczw] {
    background: var(--color-success-100, #dcfce7);
    color: var(--success);
}

.bulk-stat--error[b-3xiplmpczw] {
    background: var(--color-error-100, #fee2e2);
    color: var(--error);
}

.bulk-result__errors-title[b-3xiplmpczw] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-2) 0;
}

.bulk-result__error-list[b-3xiplmpczw] {
    margin: 0;
    padding-left: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.bulk-result__error-list li[b-3xiplmpczw] {
    font-size: 0.8125rem;
    color: var(--error);
}
/* /Components/Pages/Admin/CategoryListPage.razor.rz.scp.css */
/* =============================================================
 * Categories — page-scoped primitives
 * Card grid with per-category tone rotation (brand / success /
 * warning / error). All styles bind to design tokens — no hex.
 * ============================================================= */

/* ── Grid ──
   3-col on wide viewports, auto-fit fallback for narrow layouts.
   Cards keep their rhythm even when a slideout or sidebar squeezes
   the content area. */
.cat-grid[b-78g437u60r] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-4);
}

@media (max-width: 1100px) {
    .cat-grid[b-78g437u60r] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ── Card ──
   Each card is a self-contained unit with a tone-coloured accent
   strip, identity header, meta row, and collectibles footer. The
   dashed "Add" tile at grid end shares the card's rhythm but
   signals affordance through borders alone. */
.cat-card[b-78g437u60r] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.cat-card:hover[b-78g437u60r] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-primary);
}

.cat-card__accent[b-78g437u60r] {
    height: 4px;
    width: 100%;
    background: currentColor;
}

/* Tone variants — drive the accent strip, avatar tile, chip chrome
   via currentColor. Each tone maps to a semantic portal lane. */
.cat-card--brand[b-78g437u60r] { color: var(--text-brand-primary); }
.cat-card--success[b-78g437u60r] { color: var(--text-success-primary); }
.cat-card--warning[b-78g437u60r] { color: var(--text-warning-primary); }
.cat-card--error[b-78g437u60r] { color: var(--text-error-primary); }

/* ── Card head ── */
.cat-card__head[b-78g437u60r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
}

.cat-card__identity[b-78g437u60r] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    min-width: 0;
    flex: 1 1 auto;
}

.cat-card__avatar[b-78g437u60r] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: currentColor;
}

.cat-card--brand .cat-card__avatar[b-78g437u60r] { background: var(--bg-brand-primary); }
.cat-card--success .cat-card__avatar[b-78g437u60r] { background: var(--bg-success-primary); }
.cat-card--warning .cat-card__avatar[b-78g437u60r] { background: var(--bg-warning-primary); }
.cat-card--error .cat-card__avatar[b-78g437u60r] { background: var(--error-50); }

.cat-card__avatar img[b-78g437u60r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-card__avatar svg[b-78g437u60r] {
    width: 22px;
    height: 22px;
}

.cat-card__heading[b-78g437u60r] {
    min-width: 0;
    flex: 1 1 auto;
}

.cat-card__name[b-78g437u60r] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.cat-card__desc[b-78g437u60r] {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.45;
    /* Two-line clamp keeps card heights consistent without clipping mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-card__more[b-78g437u60r] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}

.cat-card__more:hover[b-78g437u60r] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.cat-card__more svg[b-78g437u60r] {
    width: 18px;
    height: 18px;
}

/* ── Meta row ──
   Small key-value pairs showing collectible count and display order. */
.cat-card__meta[b-78g437u60r] {
    display: flex;
    gap: var(--spacing-5);
    padding: 0 var(--spacing-5) var(--spacing-4);
}

.cat-card__meta-item[b-78g437u60r] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-1);
}

.cat-card__meta-value[b-78g437u60r] {
    font-family: var(--font-display, inherit);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cat-card__meta-label[b-78g437u60r] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ── Collectibles footer ──
   Soft-tinted bay separated from the body by a dashed divider. */
.cat-card__collectibles[b-78g437u60r] {
    margin-top: auto;
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px dashed var(--border-secondary);
    background: var(--bg-secondary-subtle);
}

.cat-card__collectibles-head[b-78g437u60r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
}

.cat-card__collectibles-label[b-78g437u60r] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cat-card__manage[b-78g437u60r] {
    font-size: var(--text-xs);
    font-weight: 500;
    color: currentColor;
    text-decoration: none;
    transition: opacity 120ms ease;
}

.cat-card__manage:hover[b-78g437u60r] {
    opacity: 0.75;
    text-decoration: underline;
}

.cat-card__chips[b-78g437u60r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.cat-card__chip[b-78g437u60r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    color: currentColor;
    background: var(--bg-primary);
    border: 1px solid currentColor;
    /* Dilute the border at 30% so the chip feels calm, not loud.
       currentColor handles the text and icon; border gets opacity. */
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cat-card__chip svg[b-78g437u60r] {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.cat-card__chip--more[b-78g437u60r] {
    color: var(--text-tertiary);
    border-color: var(--border-secondary);
    background: var(--bg-primary);
}

.cat-card__empty[b-78g437u60r] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

/* ── Add tile ──
   Dashed placeholder that ends the grid. Hover flips it to the
   brand tone so it reads as an action rather than a ghost. */
.cat-card-add[b-78g437u60r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    min-height: 260px;
    padding: var(--spacing-5);
    border: 1px dashed var(--border-primary);
    border-radius: var(--radius-xl);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.cat-card-add:hover[b-78g437u60r] {
    border-color: var(--border-brand);
    color: var(--text-brand-primary);
    background: var(--bg-brand-primary);
}

.cat-card-add__plus[b-78g437u60r] {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.cat-card-add__label[b-78g437u60r] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.cat-card-add__hint[b-78g437u60r] {
    font-size: var(--text-xs);
    color: var(--text-quaternary);
}
/* /Components/Pages/Admin/CharacterListPage.razor.rz.scp.css */
/* Character cards grid — mirrors .coloring-card-grid on the sibling Coloring Pages
   page (no shared layout primitive covers an image-led card grid). auto-fill keeps
   each card a readable width and reflows responsively, instead of cramming a fixed
   8-across that squeezed cards to ~140px and clipped their action footer. */
.character-card-grid[b-lw6dqfg4ir] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

/* Count badge lives in InfoCard's ChildContent (body) slot so it renders below the
   title. It must NOT go in the Actions slot — that slot is a horizontal flex row,
   so a badge there sits beside the buttons and pushes them out of the card. */
.character-card__badges[b-lw6dqfg4ir] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

/* Three actions can't fit one row in a compact card. The InfoCard actions slot is a
   non-wrapping row, so this inner wrapper provides the wrap. */
.character-card__actions[b-lw6dqfg4ir] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}
/* /Components/Pages/Admin/CheckInRewardsPage.razor.rz.scp.css */
/* =============================================================
 * Check-In Rewards — page-scoped primitives
 * Visual escalation for the 7-day cycle + milestone tiles.
 * No hex colors: all styles bind to design tokens.
 * ============================================================= */

/* ── Streak toggle pairs the "Streak system" label with <Toggle>
   inside the FormSection header Actions slot. */
.cr-inline-toggle[b-i2tf27l74y] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}

.cr-inline-toggle__label[b-i2tf27l74y] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
}

/* ── 7-day cycle grid ──
   Auto-fit keeps the rhythm intact when the section narrows (slideouts,
   smaller viewports). On wide screens it lands as a 7-col row. */
.cr-cycle[b-i2tf27l74y] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing-3);
    align-items: end;
}

@media (max-width: 900px) {
    .cr-cycle[b-i2tf27l74y] {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    }
}

/* Reward tile — a colored bar whose min-height is driven inline by
   the razor so higher point values rise higher than lower ones. */
.cr-tile[b-i2tf27l74y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 0;
}

.cr-tile__bar[b-i2tf27l74y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-1);
    padding: var(--spacing-4) var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.cr-tile__bar:hover[b-i2tf27l74y] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.cr-tile__icon[b-i2tf27l74y] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-1);
}

.cr-tile__value[b-i2tf27l74y] {
    font-family: var(--font-display, inherit);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
}

.cr-tile__unit[b-i2tf27l74y] {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.cr-tile__caption[b-i2tf27l74y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.cr-tile__day[b-i2tf27l74y] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.cr-tile__tag[b-i2tf27l74y] {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Inline editor — matches the overall chrome without pulling in
   <InputField> (which is overkill for a single number). */
.cr-tile__input[b-i2tf27l74y] {
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cr-tile__input:focus[b-i2tf27l74y] {
    outline: none;
    border-color: var(--border-brand);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--bg-brand-primary);
}

/* Type variants — colored bar bodies + matching captions. */
.cr-tile--points .cr-tile__bar[b-i2tf27l74y] {
    background: var(--bg-brand-primary);
    border-color: var(--brand-200);
    color: var(--text-brand-primary);
}

.cr-tile--bonus .cr-tile__bar[b-i2tf27l74y] {
    background: var(--bg-success-primary);
    border-color: var(--border-success);
    color: var(--text-success-primary);
}

.cr-tile--bonus .cr-tile__tag[b-i2tf27l74y] {
    color: var(--text-success-primary);
}

.cr-tile--points .cr-tile__tag[b-i2tf27l74y] {
    color: var(--text-brand-primary);
}

/* ── Cycle summary ──
   Sits at the bottom of the section, echoing the tile color language. */
.cr-summary[b-i2tf27l74y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    margin-top: var(--spacing-5);
    background: var(--bg-secondary-subtle);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-lg);
}

.cr-summary__label[b-i2tf27l74y] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cr-summary__value[b-i2tf27l74y] {
    font-family: var(--font-display, inherit);
    font-size: var(--text-display-xs, var(--text-xl));
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cr-summary__value span[b-i2tf27l74y] {
    margin-left: var(--spacing-1);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: lowercase;
}

/* ── Milestones ──
   Horizontal tile: day-in-circle badge + title/points + edit action.
   The dashed "Add milestone" tile shares the rhythm but signals affordance. */
.cr-milestones[b-i2tf27l74y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-4);
}

@media (max-width: 900px) {
    .cr-milestones[b-i2tf27l74y] {
        grid-template-columns: 1fr;
    }
}

.cr-milestones--muted[b-i2tf27l74y] {
    opacity: 0.55;
}

.cr-milestone[b-i2tf27l74y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-warning);
    background: var(--bg-warning-primary);
}

.cr-milestone__badge[b-i2tf27l74y] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.cr-milestone__day[b-i2tf27l74y] {
    font-family: var(--font-display, inherit);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-warning-primary);
    line-height: 1;
}

.cr-milestone__unit[b-i2tf27l74y] {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-warning-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cr-milestone__text[b-i2tf27l74y] {
    flex: 1 1 auto;
    min-width: 0;
}

.cr-milestone__title[b-i2tf27l74y] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.cr-milestone__points[b-i2tf27l74y] {
    margin-top: 2px;
    font-family: var(--font-display, inherit);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-warning-primary);
}

.cr-milestone-add[b-i2tf27l74y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    border: 1px dashed var(--border-primary);
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.cr-milestone-add:hover:not(:disabled)[b-i2tf27l74y] {
    border-color: var(--border-brand);
    color: var(--text-brand-primary);
    background: var(--bg-brand-primary);
}

.cr-milestone-add:disabled[b-i2tf27l74y] {
    cursor: not-allowed;
    opacity: 0.7;
}

.cr-milestone-add__plus[b-i2tf27l74y] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.cr-milestone-add__hint[b-i2tf27l74y] {
    font-size: var(--text-xs);
    color: var(--text-quaternary);
}

/* ── Task stats footnote ──
   A one-line honesty caption that tags three of the four stats as
   demo values until the completion-aggregation endpoint ships. */
.cr-task-stats-footnote[b-i2tf27l74y] {
    margin-top: var(--spacing-2);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ── Daily tasks teaser rows ──
   Horizontal rows for up to 5 active tasks, sorted by DisplayOrder.
   Not clickable — hover gives a subtle surface to signal cohesion. */
.cr-task-list[b-i2tf27l74y] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.cr-task-row[b-i2tf27l74y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    transition: background 120ms ease;
}

.cr-task-row:hover[b-i2tf27l74y] {
    background: var(--bg-secondary-subtle);
    cursor: default; /* rows are read-only — no click affordance */
}

.cr-task-icon[b-i2tf27l74y] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-task-icon svg[b-i2tf27l74y] {
    width: 20px;
    height: 20px;
}

.cr-task-icon--brand[b-i2tf27l74y] {
    background: var(--bg-brand-primary);
    color: var(--text-brand-primary);
}

.cr-task-icon--success[b-i2tf27l74y] {
    background: var(--bg-success-primary);
    color: var(--text-success-primary);
}

.cr-task-icon--warning[b-i2tf27l74y] {
    background: var(--bg-warning-primary);
    color: var(--text-warning-primary);
}

.cr-task-icon--gray[b-i2tf27l74y] {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
}

.cr-task-body[b-i2tf27l74y] {
    flex: 1 1 auto;
    min-width: 0;
}

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

.cr-task-desc[b-i2tf27l74y] {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cr-task-trailing[b-i2tf27l74y] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 0 0 auto;
}

.cr-task-points[b-i2tf27l74y] {
    font-family: var(--font-display, inherit);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-brand-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Overflow footer ──
   Clickable row below the 5 visible tasks, linking to the full list. */
.cr-task-more[b-i2tf27l74y] {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background 120ms ease, color 120ms ease;
}

.cr-task-more:hover[b-i2tf27l74y] {
    background: var(--bg-secondary-subtle);
    color: var(--text-brand-primary);
    text-decoration: underline;
}
/* /Components/Pages/Admin/ColoringPageListPage.razor.rz.scp.css */
/* Scoped layout for the coloring pages grid — mirrors the character-card-grid
   pattern used by CharacterListPage (no shared layout primitive covers this grid). */
.coloring-card-grid[b-8j63xowhla] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

/* Badges + meta both sit inside InfoCard's ChildContent (body) slot so badges
   render below the title. Badges stack first (wrapping inline row), meta below.
   The small bottom margin separates the two blocks within the shared body slot. */
.coloring-card__badges[b-8j63xowhla] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-2);
}

.coloring-card__meta[b-8j63xowhla] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Tier-access checkbox group inside the mega modal's narrow (40%) form column.
   Single-column stack — the two-column form grid is too cramped at this width.
   No primitive covers a tight CheckboxItem stack, so this stays page-scoped. */
.coloring-tier-hint[b-8j63xowhla] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-2);
}

.coloring-tier-list[b-8j63xowhla] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
/* /Components/Pages/Admin/CommunityModerationPage.razor.rz.scp.css */
/* Community Moderation page — scoped styles.
   Only elements that have no matching layout primitive or UI component. */

/* Thumbnail in the DataTable "preview" column */
.cm-thumbnail[b-rpkc5wc8lm] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    display: block;
}

.cm-thumbnail--empty[b-rpkc5wc8lm] {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
}

/* Report tab: truncated comment preview text */
.cm-comment-preview[b-rpkc5wc8lm] {
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-text-sm);
}

/* Featured Picks: responsive card grid (auto-fit, same rhythm as coloring-card-grid) */
.cm-card-grid[b-rpkc5wc8lm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-4);
}

/* Badge + meta row inside the featured card ChildContent */
.cm-card-badges[b-rpkc5wc8lm] { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.cm-card-meta[b-rpkc5wc8lm] { font-size: var(--font-size-text-xs); color: var(--text-tertiary); margin-top: var(--spacing-1); }

/* Drawer: large artwork preview */
.cm-drawer-image-wrapper[b-rpkc5wc8lm] {
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
}

.cm-drawer-image[b-rpkc5wc8lm] {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
}

.cm-drawer-meta[b-rpkc5wc8lm] { margin-bottom: var(--spacing-4); }

/* Drawer footer: three buttons right-aligned */
.cm-drawer-footer[b-rpkc5wc8lm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
}
/* /Components/Pages/Admin/CreatorDetailPage.razor.rz.scp.css */
/* Hero card — avatar + name + badges. No existing layout primitive covers
   a horizontal identity block with a large avatar, so scope it here. */
.creator-hero[b-s8v90xopqx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
}

.creator-hero__body[b-s8v90xopqx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.creator-hero__name[b-s8v90xopqx] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.creator-hero__meta[b-s8v90xopqx] {
    color: var(--text-tertiary);
}

.creator-hero__dot[b-s8v90xopqx] {
    margin: 0 var(--spacing-1);
    color: var(--text-quaternary);
}

.creator-hero__badges[b-s8v90xopqx] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-top: var(--spacing-2);
}
/* /Components/Pages/Admin/CreatorEarningsAdminPage.razor.rz.scp.css */
/* Horizontal row of the 5 top-earner InfoCards. Cards keep their intrinsic
   .info-card-empty width (276px) and the row scrolls horizontally when the
   panel is narrower than the cards combined — which it is once Top earners
   lives inside the left column of layout-form-with-guide (~75% width). */
.top-earners-list[b-ht5i7orzwg] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-4);
    overflow-x: auto;
    /* InfoPanel's body (.info-panel-body) is a column flex with
       align-items: flex-start, which sizes a flex child to its CONTENT rather
       than stretching it to the panel width. Without an explicit width this
       row grows to the combined width of all 5 cards and overflows the panel
       instead of scrolling. width: 100% pins it to the panel body so the
       overflow-x scroll container actually engages. */
    width: 100%;
    /* Reveal a sliver of focus-ring / shadow when a card is focused without
       being clipped by the scroll container. */
    padding-bottom: var(--spacing-2);
}

    /* ::deep is required: .info-card is the root element of the InfoCard child
       component and lives in InfoCard's own CSS scope, so a plain
       `.top-earners-list > .info-card` selector from this page's scope never
       matches. ::deep pierces the scope boundary to reach the cards. */
    .top-earners-list[b-ht5i7orzwg]  .info-card {
        /* Hold each card at its native 276px width so the row scrolls instead
           of shrinking the cards into illegibility once the row is width-capped. */
        flex: 0 0 auto;
    }
    /* Flex row for the earnings badges rendered inside InfoCard's BadgeContent
   slot. InfoCard's .info-card-badge wrapper only supplies top margin — no
   inner layout — so we provide the flex strip here (same convention as
   MemberDetailPage's .member-identity-badges). */
    .top-earners-badges[b-ht5i7orzwg] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        flex-wrap: wrap;
    }

/* Payout pipeline — overrides the default ProgressSteps linear-completion
   visual. All three statuses hold data simultaneously, so earlier steps are
   NOT "done" when the admin filters to a later one. Render every non-current
   step as a plain brand dot with readable title; keep only step-current
   visually selected via the default .step-current treatment.
   See: docs/superpowers/specs/2026-04-22-creator-earnings-payout-workflow-design.md */
.payout-pipeline .steps-dot .step.step-incomplete .step-indicator[b-ht5i7orzwg] {
    background: var(--brand-600);
}

.payout-pipeline .step.step-incomplete .step-title[b-ht5i7orzwg],
.payout-pipeline .step.step-incomplete .step-description[b-ht5i7orzwg] {
    color: inherit;
}

.payout-pipeline .step-connector-h[b-ht5i7orzwg] {
    background: var(--brand-600);
}
/* /Components/Pages/Admin/CreatorTierConfigPage.razor.rz.scp.css */
/* Page-local override: bump FormSection title to text-lg on the Creator
   Tier Configuration page only. ::deep is required because the <h3> is
   rendered inside the FormSection component's own scope. */
[b-iqi9yyvp4i] .form-section-title {
    font-size: var(--font-size-text-lg);
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dashboard-period-actions[b-5srdnynimy] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.dashboard-chart-grid[b-5srdnynimy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
}

@media (max-width: 768px) {
    .dashboard-chart-grid[b-5srdnynimy] {
        grid-template-columns: 1fr;
    }
}

.dashboard-chart-card[b-5srdnynimy] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}

.dashboard-chart-header[b-5srdnynimy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.dashboard-chart-title-group[b-5srdnynimy] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.dashboard-chart-title[b-5srdnynimy] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}

.dashboard-chart-header .dashboard-chart-title[b-5srdnynimy],
.dashboard-chart-title-group .dashboard-chart-title[b-5srdnynimy] {
    margin-bottom: 0;
}

.dashboard-chart-subtitle[b-5srdnynimy] {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.dashboard-metric-select[b-5srdnynimy] {
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-1) var(--spacing-3);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.dashboard-metric-select:hover[b-5srdnynimy],
.dashboard-metric-select:focus[b-5srdnynimy] {
    border-color: var(--border-brand);
    color: var(--text-primary);
}

/* ──────────────────────────────────────────────
 * "View all" link in chart header
 * ────────────────────────────────────────────── */
.dashboard-link[b-5srdnynimy] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-brand-secondary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-link:hover[b-5srdnynimy] {
    color: var(--text-brand-primary);
    text-decoration: underline;
}

/* ──────────────────────────────────────────────
 * Top Books — 3-col mini table (Book / Reads / Rating)
 * ────────────────────────────────────────────── */
.dashboard-table[b-5srdnynimy] {
    display: flex;
    flex-direction: column;
}

.dashboard-table__head[b-5srdnynimy],
.dashboard-table__row[b-5srdnynimy] {
    display: grid;
    grid-template-columns: 1fr 92px 72px;
    align-items: center;
    gap: var(--spacing-3);
}

.dashboard-table__head[b-5srdnynimy] {
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--border-secondary);
}

.dashboard-table__th[b-5srdnynimy] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-table__th--num[b-5srdnynimy],
.dashboard-table__cell--num[b-5srdnynimy] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dashboard-table__row[b-5srdnynimy] {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-tertiary);
}

.dashboard-table__row:last-child[b-5srdnynimy] {
    border-bottom: none;
}

.dashboard-table__title[b-5srdnynimy] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-table__meta[b-5srdnynimy] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.dashboard-table__cell--num[b-5srdnynimy] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-table__empty[b-5srdnynimy] {
    padding: var(--spacing-4) 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* ──────────────────────────────────────────────
 * Activity row — inline spans inside InfoRowItem PrimaryContent
 * (row chrome is owned by InfoRowItem)
 * ────────────────────────────────────────────── */
.dashboard-activity-actor[b-5srdnynimy] {
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-activity-action[b-5srdnynimy] {
    color: var(--text-tertiary);
}

.dashboard-activity-target[b-5srdnynimy] {
    font-weight: 500;
    color: var(--text-primary);
}

/* ──────────────────────────────────────────────
 * Brand-soft icon tile — used in InfoRowItem Leading slot
 * ────────────────────────────────────────────── */
.dashboard-icon-tile[b-5srdnynimy] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-brand-secondary);
    color: var(--fg-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-icon-tile svg[b-5srdnynimy] {
    width: 18px;
    height: 18px;
}

.dashboard-pending-row-link[b-5srdnynimy] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dashboard-pending-row-link:hover[b-5srdnynimy] {
    background: var(--bg-secondary-subtle);
}
/* /Components/Pages/Admin/DisplayStandFormPage.razor.rz.scp.css */
/*
 * Drag-and-drop reorder UI for the books-on-this-shelf list.
 * No layout primitive exists for "draggable list row + handle" — keep it scoped here.
 */

.stand-books-list[b-ns1eta0x5t] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.drag-row[b-ns1eta0x5t] {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
}

.drag-row__content[b-ns1eta0x5t] {
    flex: 1;
    min-width: 0;
}

.drag-handle[b-ns1eta0x5t] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2);
    color: var(--text-quaternary);
    cursor: grab;
    border-radius: var(--radius-md);
    transition: background-color 0.12s ease, color 0.12s ease;
    user-select: none;
}

    .drag-handle:hover[b-ns1eta0x5t] {
        background: var(--bg-secondary);
        color: var(--text-tertiary);
    }

    .drag-handle:active[b-ns1eta0x5t] {
        cursor: grabbing;
    }

/* Source row (the one being dragged) — fade so the user sees the original position is "lifted". */
.drag-row--dragging[b-ns1eta0x5t] {
    opacity: 0.5;
}

/* Target row (the one being hovered over) — top border indicates the drop slot. */
.drag-row--drop-target .drag-row__content[b-ns1eta0x5t] {
    box-shadow: inset 0 2px 0 0 var(--brand-600, #6941c6);
    border-radius: var(--radius-lg);
}
/* /Components/Pages/Admin/InvitationAcceptPage.razor.rz.scp.css */
.auth-container[b-nzicxbgdoe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-4);
}

.auth-card[b-nzicxbgdoe] {
    width: 100%;
    max-width: 480px;
}

.auth-header[b-nzicxbgdoe] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}
/* /Components/Pages/Admin/LoginPage.razor.rz.scp.css */
.auth-container[b-qei0n8gfgu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-4);
}

.auth-card[b-qei0n8gfgu] {
    width: 100%;
    max-width: 400px;
}

.auth-header[b-qei0n8gfgu] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.quick-login[b-qei0n8gfgu] {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-secondary);
}

.quick-login-grid[b-qei0n8gfgu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2);
}

.quick-login-btn[b-qei0n8gfgu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    border-left: 3px solid transparent;
}

.quick-login-btn:hover[b-qei0n8gfgu] {
    background: var(--bg-secondary);
    border-color: var(--border-brand);
}

.quick-login-role[b-qei0n8gfgu] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.quick-login-name[b-qei0n8gfgu] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}

.quick-login-btn--superadmin[b-qei0n8gfgu] { border-left-color: #7c3aed; }
.quick-login-btn--superadmin .quick-login-role[b-qei0n8gfgu] { color: #7c3aed; }

.quick-login-btn--schooladmin[b-qei0n8gfgu] { border-left-color: #2563eb; }
.quick-login-btn--schooladmin .quick-login-role[b-qei0n8gfgu] { color: #2563eb; }

.quick-login-btn--creator[b-qei0n8gfgu] { border-left-color: #059669; }
.quick-login-btn--creator .quick-login-role[b-qei0n8gfgu] { color: #059669; }

.quick-login-btn--parent[b-qei0n8gfgu] { border-left-color: #d97706; }
.quick-login-btn--parent .quick-login-role[b-qei0n8gfgu] { color: #d97706; }

.quick-login-btn--reviewer[b-qei0n8gfgu] { border-left-color: #dc2626; }
.quick-login-btn--reviewer .quick-login-role[b-qei0n8gfgu] { color: #dc2626; }
/* /Components/Pages/Admin/MemberDetailPage.razor.rz.scp.css */
/* Profile (3/5) + Subscription (2/5) split. No layout-* primitive matches
   this exact ratio (layout-dashboard-split is 7/3 with a sticky sidebar).
   Collapses to single column below 1024px. */
.member-profile-subscription[b-ajmukb1yyh] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-4);
    align-items: start;
}

@media (max-width: 1024px) {
    .member-profile-subscription[b-ajmukb1yyh] {
        grid-template-columns: 1fr;
    }
}

/* Identity badges rendered inside InfoCard's BadgeContent slot. InfoCard's
   .info-card-badge wrapper only supplies top margin — no inner layout — so
   we provide the flex strip here. */
.member-identity-badges[b-ajmukb1yyh] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* Badges-earned grid — small tiles inside the InfoPanel ChildContent.
   No layout primitive covers this compact auto-fill grid (layout-stat-cards
   is tuned for larger MetricItem tiles). */
.member-badges-grid[b-ajmukb1yyh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-3);
}

.member-badge-tile[b-ajmukb1yyh] {
    padding: var(--spacing-3);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.member-badge-tile__img[b-ajmukb1yyh] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto var(--spacing-2);
    display: block;
}

.member-badge-tile__name[b-ajmukb1yyh] {
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.member-badge-tile__date[b-ajmukb1yyh] {
    color: var(--text-tertiary);
}

/* Coloring album list — stacked ListItem rows inside the InfoPanel ChildContent.
   ListItem supplies the card chrome (border/radius/padding/flex); this wrapper
   only adds the gap between rows. */
.member-coloring-albums-list[b-ajmukb1yyh] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Thumbnail preview strip rendered in ListItem's DescriptionContent slot.
   ListItem provides no inner layout for arbitrary content, so we supply the
   flex row here (40×40 thumbs with spacing). */
.member-coloring-album-thumbs[b-ajmukb1yyh] {
    display: flex;
    gap: var(--spacing-1);
}

.member-coloring-album-thumb[b-ajmukb1yyh] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-secondary);
}

/* Artwork grid inside the album drill-in modal.
   Reuses member-badge-tile card chrome; no layout primitive covers
   this compact auto-fill square grid (same rationale as member-badges-grid). */
.member-coloring-artworks-grid[b-ajmukb1yyh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-3);
}

.member-coloring-artwork-thumb[b-ajmukb1yyh] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin: 0 auto var(--spacing-2);
    display: block;
}

.member-coloring-artwork-thumb--empty[b-ajmukb1yyh] {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.member-coloring-artwork-thumb--empty svg[b-ajmukb1yyh] {
    width: 32px;
    height: 32px;
}
/* /Components/Pages/Admin/ParentBillingPage.razor.rz.scp.css */
/* ParentBillingPage — exact port of the Claude Design "Billing" mockup.
   Same exact-port convention as Checkout (.pc), Wallet (.wl), Subscription (.sub):
   the design's own tokens are declared on `.bl` (verbatim from colors_and_type.css),
   sizing uses the design's px values, fonts inherit the portal, and the page sets no
   own padding/width — the portal `.content` (var(--spacing-10)) frames it. */

[data-theme="dark"] .bl[b-ks1wbwt7ew] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700); --gray-400: var(--gray-500);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-100: var(--brand-900); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.bl[b-ks1wbwt7ew] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-300: #D5D7DA; --gray-400: #A4A7AE;
    --brand-25: #F0F4FF; --brand-50: #E1E8FD; --brand-100: #C5D0FA; --brand-200: #A2B4F4;
    --brand-300: #7D96EC; --brand-500: #3F5FD6; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-300: #75E0A7; --success-500: #17B26A; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-500: #F79009; --warning-700: #B54708;
    --error-50: #FEF3F2; --error-300: #FDA29B; --error-500: #F04438; --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--fg1);
}

/* icons */
.bl-ico[b-ks1wbwt7ew] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bl-ico--sep[b-ks1wbwt7ew] { color: var(--fg5); }
.bl-ico--xs[b-ks1wbwt7ew] { width: 12px; height: 12px; }

/* states */
.bl-state[b-ks1wbwt7ew] { padding: 64px 24px; text-align: center; color: var(--fg3); font-size: 14px; }
.bl-state__actions[b-ks1wbwt7ew] { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* breadcrumb */
.bl-crumb[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 18px; }
.bl-crumb__current[b-ks1wbwt7ew] { color: var(--fg-brand); font-weight: 500; }

/* page header */
.bl-pagehead[b-ks1wbwt7ew] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.bl-pagehead__title[b-ks1wbwt7ew] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.bl-pagehead__sub[b-ks1wbwt7ew] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* buttons */
.bl-btn[b-ks1wbwt7ew] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap; font: inherit;
    box-shadow: var(--shadow-xs); transition: background 150ms, border-color 150ms; text-decoration: none;
}
.bl-btn--sm[b-ks1wbwt7ew] { height: 32px; padding: 0 12px; font-size: 13px; }
.bl-btn--sec[b-ks1wbwt7ew] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg2); }
.bl-btn--sec:hover[b-ks1wbwt7ew] { background: var(--gray-50); }
.bl-btn--pri[b-ks1wbwt7ew] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.bl-btn--pri:hover[b-ks1wbwt7ew] { background: var(--brand-700); border-color: var(--brand-700); }
.bl-btn:disabled[b-ks1wbwt7ew] { opacity: .55; cursor: not-allowed; }

/* tags */
.bl-tag[b-ks1wbwt7ew] { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1; border: 1px solid transparent; box-sizing: border-box; }
.bl-tag__dot[b-ks1wbwt7ew] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bl-tag--neutral[b-ks1wbwt7ew] { background: var(--gray-50); color: var(--fg2); border-color: var(--border2); }
.bl-tag--neutral .bl-tag__dot[b-ks1wbwt7ew] { background: var(--gray-400); }
.bl-tag--brand[b-ks1wbwt7ew] { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.bl-tag--success[b-ks1wbwt7ew] { background: var(--success-50); color: var(--success-700); border-color: var(--success-300); }
.bl-tag--success .bl-tag__dot[b-ks1wbwt7ew] { background: var(--success-500); }
.bl-tag--warning[b-ks1wbwt7ew] { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-300); }
.bl-tag--warning .bl-tag__dot[b-ks1wbwt7ew] { background: var(--warning-500); }
.bl-tag--error[b-ks1wbwt7ew] { background: var(--error-50); color: var(--error-700); border-color: var(--error-300); }
.bl-tag--error .bl-tag__dot[b-ks1wbwt7ew] { background: var(--error-500); }

/* brand glyphs */
.bl-brand[b-ks1wbwt7ew] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 17px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bl-brand--wallet[b-ks1wbwt7ew] { background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); }
.bl-brand--sm[b-ks1wbwt7ew] { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.bl-brand--xs[b-ks1wbwt7ew] { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }

/* generic card */
.bl-card[b-ks1wbwt7ew] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 24px; }
.bl-mt[b-ks1wbwt7ew] { margin-top: 20px; }
.bl-card__head[b-ks1wbwt7ew] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bl-card__title[b-ks1wbwt7ew] { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.bl-card__lead[b-ks1wbwt7ew] { margin: 2px 0 0; font-size: 13px; color: var(--fg4); }
.bl-link[b-ks1wbwt7ew] { font-size: 13px; font-weight: 500; color: var(--fg-brand); text-decoration: none; }
.bl-link--icon[b-ks1wbwt7ew] { display: inline-flex; align-items: center; gap: 4px; }
.bl-link:hover[b-ks1wbwt7ew] { color: var(--brand-700); }

/* ── top row ── */
.bl-toprow[b-ks1wbwt7ew] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: stretch; }

/* next invoice */
.bl-next[b-ks1wbwt7ew] { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--brand-25) 100%); border: 1px solid var(--brand-100); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; }
.bl-next__arcs[b-ks1wbwt7ew] { position: absolute; right: -50px; top: -50px; width: 240px; height: 240px; opacity: .12; }
.bl-next__arcs circle[b-ks1wbwt7ew] { stroke: var(--brand-700); stroke-width: 1.5; fill: none; }
.bl-next__top[b-ks1wbwt7ew] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; position: relative; }
.bl-next__label[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-700); }
.bl-next__label .bl-ico[b-ks1wbwt7ew] { width: 16px; height: 16px; color: var(--brand-700); }
.bl-next__amount[b-ks1wbwt7ew] { font-size: 44px; line-height: 48px; font-weight: 600; color: var(--fg1); letter-spacing: -0.03em; margin-bottom: 6px; position: relative; }
.bl-next__amount--muted[b-ks1wbwt7ew] { color: var(--fg4); }
.bl-next__when[b-ks1wbwt7ew] { font-size: 13px; color: var(--fg3); margin-bottom: 20px; position: relative; }
.bl-next__item[b-ks1wbwt7ew] { padding: 14px 16px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; margin-bottom: auto; position: relative; }
.bl-next__item-row[b-ks1wbwt7ew] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bl-next__item-title[b-ks1wbwt7ew] { font-size: 14px; font-weight: 600; color: var(--fg1); line-height: 20px; }
.bl-next__item-sub[b-ks1wbwt7ew] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.bl-next__item-amt[b-ks1wbwt7ew] { font-size: 14px; font-weight: 600; color: var(--fg1); white-space: nowrap; }
.bl-next__charged[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border2); font-size: 12px; color: var(--fg3); }
.bl-next__charged strong[b-ks1wbwt7ew] { color: var(--fg2); font-weight: 600; }
.bl-next__actions[b-ks1wbwt7ew] { display: flex; gap: 8px; margin-top: 16px; position: relative; }

/* ── spend overview ── */
.bl-spend[b-ks1wbwt7ew] { display: flex; flex-direction: column; }
.bl-seg[b-ks1wbwt7ew] { display: inline-flex; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 8px; padding: 2px; gap: 2px; flex: none; }
.bl-seg__btn[b-ks1wbwt7ew] { height: 26px; padding: 0 10px; border: none; border-radius: 6px; background: transparent; color: var(--fg3); font-weight: 500; font-size: 12px; cursor: pointer; font: inherit; }
.bl-seg__btn--on[b-ks1wbwt7ew] { background: var(--bg-primary); color: var(--fg1); font-weight: 600; box-shadow: var(--shadow-xs); }
.bl-spend__tiles[b-ks1wbwt7ew] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.bl-spend__tile[b-ks1wbwt7ew] { padding: 12px 14px; background: var(--gray-50); border-radius: 10px; }
.bl-spend__k[b-ks1wbwt7ew] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.bl-spend__v[b-ks1wbwt7ew] { font-size: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.bl-spend__delta[b-ks1wbwt7ew] { font-size: 11px; color: var(--success-700); margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.bl-spend__s[b-ks1wbwt7ew] { font-size: 11px; color: var(--fg4); margin-top: 6px; }
.bl-bars[b-ks1wbwt7ew] { display: flex; gap: 8px; padding: 0 2px; margin-top: auto; }
.bl-bars__col[b-ks1wbwt7ew] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bl-bars__track[b-ks1wbwt7ew] { width: 100%; height: 108px; display: flex; align-items: flex-end; }
.bl-bars__bar[b-ks1wbwt7ew] { width: 100%; min-height: 4px; border-radius: 6px; background: var(--brand-100); }
.bl-bars__bar--active[b-ks1wbwt7ew] { background: var(--brand-600); }
.bl-bars__bar--empty[b-ks1wbwt7ew] { background: var(--gray-100); }
.bl-bars__lbl[b-ks1wbwt7ew] { font-size: 10px; color: var(--fg4); font-weight: 500; }
.bl-bars__lbl--active[b-ks1wbwt7ew] { color: var(--fg1); font-weight: 600; }

/* ── payment methods ── */
.bl-pm__row[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border2); }
.bl-pm__row--last[b-ks1wbwt7ew] { border-bottom: none; }
.bl-pm__body[b-ks1wbwt7ew] { flex: 1; min-width: 0; }
.bl-pm__name[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg1); }
.bl-pm__sub[b-ks1wbwt7ew] { font-size: 12px; color: var(--fg4); margin-top: 2px; }

/* ── invoice table ── */
.bl-table[b-ks1wbwt7ew] { padding: 0; overflow: hidden; }
.bl-table__head[b-ks1wbwt7ew] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; flex-wrap: wrap; }
.bl-tabs[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border2); overflow-x: auto; }
.bl-tab[b-ks1wbwt7ew] { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; margin: 0 8px; border: none; background: transparent; color: var(--fg3); font-size: 14px; font-weight: 600; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.bl-tab:first-child[b-ks1wbwt7ew] { margin-left: 0; }
.bl-tab:hover[b-ks1wbwt7ew] { color: var(--fg1); }
.bl-tab--on[b-ks1wbwt7ew] { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.bl-tab__n[b-ks1wbwt7ew] { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: var(--gray-100); color: var(--fg4); }
.bl-tab--on .bl-tab__n[b-ks1wbwt7ew] { background: var(--brand-50); color: var(--brand-700); }

.bl-table__bar[b-ks1wbwt7ew] { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bl-pills[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-pill[b-ks1wbwt7ew] { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg-primary); color: var(--fg2); font-size: 13px; font-weight: 600; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 6px; }
.bl-pill--on[b-ks1wbwt7ew] { border-color: var(--brand-300); background: var(--brand-25); color: var(--brand-700); }
.bl-pills__n[b-ks1wbwt7ew] { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 9999px; background: var(--gray-100); color: var(--fg4); }
.bl-pill--on .bl-pills__n[b-ks1wbwt7ew] { background: var(--brand-100); color: var(--brand-700); }
.bl-search[b-ks1wbwt7ew] { position: relative; width: 280px; max-width: 100%; }
.bl-search .bl-ico[b-ks1wbwt7ew] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg4); }
.bl-search__input[b-ks1wbwt7ew] { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--border1); border-radius: 8px; background: var(--bg-primary); color: var(--fg1); font-size: 13px; outline: none; box-shadow: var(--shadow-xs); font: inherit; }
.bl-search__input:focus[b-ks1wbwt7ew] { border-color: var(--brand-500); }

.bl-table__scroll[b-ks1wbwt7ew] { overflow-x: auto; }
.bl-tbl[b-ks1wbwt7ew] { width: 100%; border-collapse: collapse; font-size: 13px; }
.bl-tbl thead tr[b-ks1wbwt7ew] { background: var(--gray-50); border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.bl-tbl th[b-ks1wbwt7ew] { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bl-tbl th:first-child[b-ks1wbwt7ew] { padding-left: 24px; }
.bl-tbl th:last-child[b-ks1wbwt7ew] { padding-right: 24px; }
.bl-tbl__r[b-ks1wbwt7ew] { text-align: right; }
.bl-tbl tbody tr[b-ks1wbwt7ew] { border-bottom: 1px solid var(--border2); }
.bl-tbl tbody tr:last-child[b-ks1wbwt7ew] { border-bottom: none; }
.bl-tbl td[b-ks1wbwt7ew] { padding: 14px 16px; color: var(--fg2); vertical-align: middle; }
.bl-tbl td:first-child[b-ks1wbwt7ew] { padding-left: 24px; }
.bl-tbl td:last-child[b-ks1wbwt7ew] { padding-right: 24px; }
.bl-tbl__ref[b-ks1wbwt7ew] { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); white-space: nowrap; }
.bl-tbl__nowrap[b-ks1wbwt7ew] { white-space: nowrap; }
.bl-tbl__desc[b-ks1wbwt7ew] { color: var(--fg1); font-weight: 500; }
.bl-method[b-ks1wbwt7ew] { display: inline-flex; align-items: center; gap: 8px; }
.bl-tbl__amt[b-ks1wbwt7ew] { font-weight: 600; color: var(--fg1); white-space: nowrap; }
.bl-tbl__amt--refunded[b-ks1wbwt7ew] { color: var(--fg4); text-decoration: line-through; }
.bl-tbl__empty[b-ks1wbwt7ew] { padding: 40px 24px; text-align: center; color: var(--fg4); }
.bl-iconbtn[b-ks1wbwt7ew] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg-primary); color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bl-iconbtn:hover[b-ks1wbwt7ew] { background: var(--gray-50); color: var(--fg1); }
.bl-table__foot[b-ks1wbwt7ew] { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--border2); background: var(--gray-50); }
.bl-table__count[b-ks1wbwt7ew] { font-size: 13px; color: var(--fg4); }
.bl-pager[b-ks1wbwt7ew] { display: flex; gap: 6px; }

/* ── bottom row ── */
.bl-botrow[b-ks1wbwt7ew] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 20px; }
.bl-dl[b-ks1wbwt7ew] { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 14px; column-gap: 16px; }
.bl-dl dt[b-ks1wbwt7ew] { font-size: 12px; color: var(--fg4); font-weight: 500; }
.bl-dl dd[b-ks1wbwt7ew] { margin: 0; font-size: 14px; color: var(--fg1); }
.bl-dl__row[b-ks1wbwt7ew] { display: flex; align-items: center; gap: 8px; }
.bl-dl__row--top[b-ks1wbwt7ew] { align-items: flex-start; line-height: 20px; }
.bl-dl__row--top .bl-ico[b-ks1wbwt7ew] { margin-top: 3px; }
.bl-dl__row .bl-ico[b-ks1wbwt7ew] { color: var(--fg4); }
.bl-dl__muted[b-ks1wbwt7ew] { color: var(--fg4); }
.bl-avatar[b-ks1wbwt7ew] { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.bl-toggles[b-ks1wbwt7ew] { display: flex; flex-direction: column; }
.bl-toggle-row[b-ks1wbwt7ew] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border2); }
.bl-toggle-row--last[b-ks1wbwt7ew] { border-bottom: none; }
.bl-toggle-row__title[b-ks1wbwt7ew] { font-size: 14px; font-weight: 500; color: var(--fg1); }
.bl-toggle-row__sub[b-ks1wbwt7ew] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.bl-toggle[b-ks1wbwt7ew] { position: relative; width: 40px; height: 24px; border-radius: 9999px; background: var(--gray-300); transition: background 150ms; flex: none; cursor: pointer; }
.bl-toggle--on[b-ks1wbwt7ew] { background: var(--brand-600); }
.bl-toggle__knob[b-ks1wbwt7ew] { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg-white); box-shadow: var(--shadow-sm); transition: left 150ms; }
.bl-toggle--on .bl-toggle__knob[b-ks1wbwt7ew] { left: 18px; }

/* help footer */
.bl-help[b-ks1wbwt7ew] { margin-top: 20px; padding: 14px 20px; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 12px; display: flex; align-items: center; gap: 12px; }
.bl-help .bl-ico[b-ks1wbwt7ew] { width: 16px; height: 16px; color: var(--fg4); }
.bl-help span[b-ks1wbwt7ew] { font-size: 13px; color: var(--fg2); }
.bl-help a[b-ks1wbwt7ew] { color: var(--fg-brand); font-weight: 500; text-decoration: none; }

@media (max-width: 1024px) {
    .bl-toprow[b-ks1wbwt7ew], .bl-botrow[b-ks1wbwt7ew] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .bl-spend__tiles[b-ks1wbwt7ew] { grid-template-columns: 1fr; }
    .bl-dl[b-ks1wbwt7ew] { grid-template-columns: 1fr; row-gap: 4px; }
    .bl-dl dt[b-ks1wbwt7ew] { margin-top: 10px; }
}
/* /Components/Pages/Admin/ParentCheckoutPage.razor.rz.scp.css */
/* ParentCheckoutPage — exact port of the Claude Design "Subscription Checkout".
   Per the user's "exact port" decision, this page reproduces the mockup literally
   rather than adapting into the portal's components. The design's own tokens are
   declared on `.pc` (copied verbatim from the design's colors_and_type.css) so
   colours/shadows match the source exactly; all sizing uses the design's px values.
   Fonts inherit the portal's family. */

[data-theme="dark"] .pc[b-dy90d2fk0o] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-50: var(--gray-900); --gray-300: var(--gray-700);
    --brand-50: var(--brand-950); --brand-700: var(--brand-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --success-50: var(--success-950); --success-300: var(--success-800); --success-700: var(--success-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.pc[b-dy90d2fk0o] {
    /* ---- design tokens (verbatim from colors_and_type.css) ---- */
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-300: #D5D7DA;
    --brand-50: #E1E8FD; --brand-600: #2847C4; --brand-700: #1A35AE;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-500: #F79009; --warning-600: #DC6803; --warning-700: #B54708;
    --success-50: #ECFDF3; --success-300: #75E0A7; --success-500: #17B26A; --success-700: #067647;
    --error-50: #FEF3F2; --error-300: #FDA29B; --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);

    /* No own page padding/width — the portal's `.content` already pads every page
       (var(--spacing-10)); adding more here made the checkout more inset than the
       Plans page. Let `.content` frame it identically. */
    color: var(--fg1);
}

/* ---- inline icons (no <Icon> component in the portal) ---- */
.pc-ico[b-dy90d2fk0o] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.pc-ico--lg[b-dy90d2fk0o] { width: 22px; height: 22px; stroke-width: 1.75; }
.pc-ico--sm[b-dy90d2fk0o] { width: 12px; height: 12px; }
.pc-ico--sep[b-dy90d2fk0o] { color: var(--fg5); }

/* ---- non-design functional states ---- */
.pc-state[b-dy90d2fk0o] {
    padding: 64px 24px;
    text-align: center;
    color: var(--fg3);
    font-size: 14px;
}

.pc-state__actions[b-dy90d2fk0o] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

/* ---- breadcrumb ---- */
.pc-crumb[b-dy90d2fk0o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fg4);
    margin-bottom: 18px;
}

.pc-crumb a[b-dy90d2fk0o] { color: var(--fg4); text-decoration: none; }
.pc-crumb a:hover[b-dy90d2fk0o] { color: var(--fg-brand); }
.pc-crumb__current[b-dy90d2fk0o] { color: var(--fg-brand); font-weight: 500; }

/* ---- page header ---- */
.pc-pagehead[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.pc-pagehead__title[b-dy90d2fk0o] {
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg1);
}

.pc-pagehead__sub[b-dy90d2fk0o] {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--fg3);
}

.pc-pagehead__back[b-dy90d2fk0o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg3);
    text-decoration: none;
}

.pc-pagehead__back:hover[b-dy90d2fk0o] { color: var(--fg1); }

/* ---- two-column body ---- */
.pc-body[b-dy90d2fk0o] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pc-main[b-dy90d2fk0o] { flex: 1; min-width: 0; }

.pc-rail[b-dy90d2fk0o] {
    position: sticky;
    top: 24px;
    align-self: flex-start;
    width: 360px;
    flex: none;
}

@media (max-width: 1024px) {
    .pc-body[b-dy90d2fk0o] { flex-direction: column; }
    .pc-rail[b-dy90d2fk0o] { width: 100%; position: static; }
}

/* ---- card chrome ---- */
.pc-card[b-dy90d2fk0o] {
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
    padding: 24px;
    margin-bottom: 20px;
}

.pc-card__head[b-dy90d2fk0o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.pc-card__title[b-dy90d2fk0o] {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--fg1);
    letter-spacing: -0.01em;
}

.pc-link[b-dy90d2fk0o] {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-brand);
    text-decoration: none;
}

.pc-link--icon[b-dy90d2fk0o] { display: inline-flex; align-items: center; gap: 4px; }
.pc-link:hover[b-dy90d2fk0o] { color: var(--brand-700); }

/* ---- plan hero ---- */
.pc-plan[b-dy90d2fk0o] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pc-plan__icon[b-dy90d2fk0o] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-50);
    color: var(--brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pc-plan__meta[b-dy90d2fk0o] { flex: 1; min-width: 0; }

.pc-plan__title[b-dy90d2fk0o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pc-plan__name[b-dy90d2fk0o] { font-size: 15px; font-weight: 600; color: var(--fg1); }

.pc-badge[b-dy90d2fk0o] {
    display: inline-flex;
    align-items: center;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding: 1px 8px;
    border-radius: 9999px;
}

.pc-plan__features[b-dy90d2fk0o] { font-size: 13px; color: var(--fg3); }

.pc-plan__price[b-dy90d2fk0o] { text-align: right; flex: none; display: flex; flex-direction: column; }
.pc-plan__price-main[b-dy90d2fk0o] { font-size: 18px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.pc-plan__price-sub[b-dy90d2fk0o] { font-size: 12px; color: var(--fg4); }

/* ---- facts row ---- */
.pc-facts[b-dy90d2fk0o] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border2);
}

.pc-facts__k[b-dy90d2fk0o] {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg4);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.pc-facts__v[b-dy90d2fk0o] { font-size: 14px; font-weight: 500; color: var(--fg1); }

/* ---- payment tiles ---- */
.pc-tiles[b-dy90d2fk0o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.pc-tiles--flush[b-dy90d2fk0o] { margin-bottom: 0; }

.pc-tile[b-dy90d2fk0o] {
    padding: 16px 18px;
    background: var(--gray-50);
    border: 1px solid var(--border2);
    border-radius: 12px;
}

.pc-tile__k[b-dy90d2fk0o] {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg4);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.pc-tile__v[b-dy90d2fk0o] {
    font-size: 24px;
    font-weight: 600;
    color: var(--fg1);
    letter-spacing: -0.02em;
    line-height: 30px;
}

/* ---- short-balance warning ---- */
.pc-warn[b-dy90d2fk0o] {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--warning-50);
    border: 1px solid var(--warning-300);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pc-warn__icon[b-dy90d2fk0o] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--warning-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pc-warn__body[b-dy90d2fk0o] { flex: 1; min-width: 0; }
.pc-warn__title[b-dy90d2fk0o] { font-size: 14px; font-weight: 600; color: var(--warning-700); margin-bottom: 2px; }
.pc-warn__text[b-dy90d2fk0o] { font-size: 13px; color: var(--warning-700); line-height: 20px; }

.pc-warn__btn[b-dy90d2fk0o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--warning-600);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    flex: none;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

/* ---- enough-balance confirmation ---- */
.pc-ok[b-dy90d2fk0o] {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--success-50);
    border: 1px solid var(--success-300);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-ok__icon[b-dy90d2fk0o] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--success-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pc-ok__text[b-dy90d2fk0o] { font-size: 13px; font-weight: 500; color: var(--success-700); }

/* bolder strokes for the small badge icons */
.pc-warn__icon .pc-ico[b-dy90d2fk0o],
.pc-ok__icon .pc-ico[b-dy90d2fk0o] { stroke-width: 2.5; }

.pc-err[b-dy90d2fk0o] {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--error-50);
    border: 1px solid var(--error-300);
    color: var(--error-700);
    font-size: 13px;
}

/* ---- order summary rail ---- */
.pc-summary[b-dy90d2fk0o] {
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.pc-summary__head[b-dy90d2fk0o] { padding: 20px 22px 14px; border-bottom: 1px solid var(--border2); }
.pc-summary__body[b-dy90d2fk0o] { padding: 16px 22px; }

.pc-sumline[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pc-sumline__title[b-dy90d2fk0o] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.pc-sumline__sub[b-dy90d2fk0o] { font-size: 12px; color: var(--fg4); }
.pc-sumline__amt[b-dy90d2fk0o] { font-size: 14px; font-weight: 600; color: var(--fg1); white-space: nowrap; }

.pc-promo-row[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--success-50);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--success-700);
}

.pc-promo[b-dy90d2fk0o] { display: flex; gap: 6px; margin-bottom: 14px; }

.pc-input[b-dy90d2fk0o] {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border1);
    font-size: 13px;
    color: var(--fg1);
    outline: none;
    background: var(--bg-primary);
    font: inherit;
}

.pc-input:focus[b-dy90d2fk0o] { border-color: var(--border-brand, var(--brand-500, #3F5FD6)); }

.pc-renew[b-dy90d2fk0o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
}

.pc-toggle[b-dy90d2fk0o] {
    width: 34px;
    height: 20px;
    border-radius: 9999px;
    background: var(--gray-300);
    position: relative;
    transition: background 150ms;
    flex: none;
}

.pc-toggle--on[b-dy90d2fk0o] { background: var(--brand-600); }

.pc-toggle__knob[b-dy90d2fk0o] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fg-white);
    box-shadow: var(--shadow-xs);
    transition: left 150ms;
}

.pc-toggle--on .pc-toggle__knob[b-dy90d2fk0o] { left: 16px; }

.pc-renew__body[b-dy90d2fk0o] { flex: 1; }
.pc-renew__title[b-dy90d2fk0o] { font-size: 13px; font-weight: 500; color: var(--fg1); line-height: 18px; }
.pc-renew__sub[b-dy90d2fk0o] { font-size: 11px; color: var(--fg4); line-height: 14px; }

.pc-total[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--border2);
}

.pc-total__label[b-dy90d2fk0o] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.pc-total__amt[b-dy90d2fk0o] { text-align: right; display: flex; flex-direction: column; }
.pc-total__pts[b-dy90d2fk0o] { font-size: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 28px; }
.pc-total__sub[b-dy90d2fk0o] { font-size: 11px; color: var(--fg4); }

.pc-summary__foot[b-dy90d2fk0o] {
    padding: 14px 22px 22px;
    background: var(--gray-50);
    border-top: 1px solid var(--border2);
}

/* primary CTA — shared by the confirm <button> and the top-up <a> */
.pc-cta[b-dy90d2fk0o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: var(--brand-600);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    font: inherit;
}

.pc-cta[b-dy90d2fk0o] { font-weight: 600; }
.pc-cta:hover[b-dy90d2fk0o] { background: var(--brand-700); color: #fff; }
.pc-cta:disabled[b-dy90d2fk0o] { opacity: .6; cursor: not-allowed; }

.pc-trust[b-dy90d2fk0o] {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 14px;
    font-size: 11px;
    color: var(--fg4);
}

.pc-trust__item[b-dy90d2fk0o] { display: inline-flex; align-items: center; gap: 4px; }

.pc-help[b-dy90d2fk0o] {
    margin-top: 14px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--fg3);
    line-height: 18px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pc-help a[b-dy90d2fk0o] { color: var(--fg-brand); font-weight: 500; text-decoration: none; }

/* ---- small buttons (states + promo Apply) ---- */
.pc-btn[b-dy90d2fk0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font: inherit;
}

.pc-btn--sm[b-dy90d2fk0o] { height: 36px; padding: 0 12px; font-size: 13px; }
.pc-btn--sec[b-dy90d2fk0o] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg1); }
.pc-btn--sec:hover[b-dy90d2fk0o] { background: var(--gray-50); }
.pc-btn--pri[b-dy90d2fk0o] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pc-btn--pri:hover[b-dy90d2fk0o] { background: var(--brand-700); }

@media (max-width: 560px) {
    .pc-tiles[b-dy90d2fk0o] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/ParentDashboardPage.razor.rz.scp.css */
/* ParentDashboardPage — exact port of the Claude Design "Dashboard" mockup.
   Same exact-port convention as Checkout (.pc) / Wallet (.wl) / Subscription (.sub)
   / Billing (.bl): the design's own tokens are declared on `.dl` (verbatim from
   colors_and_type.css), sizing uses the design's px values, fonts inherit the portal,
   and the page sets no own padding/width — the portal `.content` frames it. */

[data-theme="dark"] .dl[b-rqtfi7g3el] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.dl[b-rqtfi7g3el] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB;
    --brand-50: #E1E8FD; --brand-200: #A2B4F4; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-600: #079455; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-600: #DC6803; --warning-700: #B54708;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    color: var(--fg1);
}

.dl-ico[b-rqtfi7g3el] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dl-ico--sep[b-rqtfi7g3el] { color: var(--fg5); }
.dl-ico--xs[b-rqtfi7g3el] { width: 12px; height: 12px; }

.dl-state[b-rqtfi7g3el] { padding: 64px 24px; text-align: center; color: var(--fg3); font-size: 14px; }
.dl-state__actions[b-rqtfi7g3el] { margin-top: 16px; }

.dl-crumb[b-rqtfi7g3el] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 14px; }
.dl-crumb__current[b-rqtfi7g3el] { color: var(--fg-brand); font-weight: 500; }

/* buttons */
.dl-btn[b-rqtfi7g3el] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; font: inherit; box-shadow: var(--shadow-xs); transition: background 150ms, border-color 150ms; }
.dl-btn--sec[b-rqtfi7g3el] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg2); }
.dl-btn--sec:hover[b-rqtfi7g3el] { background: var(--gray-50); }
.dl-btn--pri[b-rqtfi7g3el] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.dl-btn--pri:hover[b-rqtfi7g3el] { background: var(--brand-700); border-color: var(--brand-700); }

/* welcome */
.dl-welcome[b-rqtfi7g3el] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.dl-welcome__title[b-rqtfi7g3el] { margin: 0; font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.dl-welcome__dash[b-rqtfi7g3el] { color: var(--fg4); font-weight: 500; }
.dl-welcome__sub[b-rqtfi7g3el] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }
.dl-welcome__actions[b-rqtfi7g3el] { display: flex; gap: 8px; }

/* quick links */
.dl-quick[b-rqtfi7g3el] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.dl-quick__tile[b-rqtfi7g3el] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; box-shadow: var(--shadow-xs); text-decoration: none; transition: border-color 150ms, box-shadow 150ms; }
.dl-quick__tile:hover[b-rqtfi7g3el] { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.dl-quick__icon[b-rqtfi7g3el] { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dl-quick__icon .dl-ico[b-rqtfi7g3el] { width: 18px; height: 18px; }
.dl-quick__body[b-rqtfi7g3el] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-quick__label[b-rqtfi7g3el] { font-size: 13px; font-weight: 600; color: var(--fg1); }
.dl-quick__sub[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-quick__chev[b-rqtfi7g3el] { color: var(--fg4); }

/* kid cards */
.dl-kids[b-rqtfi7g3el] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dl-kid[b-rqtfi7g3el] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); overflow: hidden; }
.dl-kid__top[b-rqtfi7g3el] { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border2); }
.dl-kid__av[b-rqtfi7g3el] { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.dl-kid__av--init[b-rqtfi7g3el] { color: #fff; font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.dl-kid__id[b-rqtfi7g3el] { flex: 1; min-width: 0; }
.dl-kid__namerow[b-rqtfi7g3el] { display: flex; align-items: center; gap: 8px; }
.dl-kid__name[b-rqtfi7g3el] { font-size: 16px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.dl-kid__age[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); }
.dl-streak[b-rqtfi7g3el] { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border-radius: 9999px; background: var(--warning-50); border: 1px solid var(--warning-300); font-size: 12px; font-weight: 600; color: var(--warning-700); }
.dl-streak .dl-ico[b-rqtfi7g3el] { color: var(--warning-600); }
.dl-kid__more[b-rqtfi7g3el] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg-primary); color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dl-kid__more:hover[b-rqtfi7g3el] { background: var(--gray-50); color: var(--fg1); }

.dl-kid__reading[b-rqtfi7g3el] { padding: 18px 20px; }
.dl-kid__eyebrow[b-rqtfi7g3el] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.dl-kid__bookrow[b-rqtfi7g3el] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dl-kid__cover[b-rqtfi7g3el] { width: 44px; height: 60px; border-radius: 6px; flex: none; object-fit: cover; box-shadow: var(--shadow-sm); }
.dl-kid__cover--ph[b-rqtfi7g3el] { position: relative; overflow: hidden; }
.dl-kid__cover--ph[b-rqtfi7g3el]::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.15); }
.dl-kid__bookmeta[b-rqtfi7g3el] { flex: 1; min-width: 0; }
.dl-kid__booktitle[b-rqtfi7g3el] { font-size: 14px; font-weight: 600; color: var(--fg1); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-kid__booksub[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.dl-kid__pct[b-rqtfi7g3el] { text-align: right; flex: none; }
.dl-kid__pct-n[b-rqtfi7g3el] { font-size: 13px; font-weight: 600; color: var(--fg1); }
.dl-kid__pct-l[b-rqtfi7g3el] { font-size: 11px; color: var(--fg4); }
.dl-kid__noread[b-rqtfi7g3el] { font-size: 13px; color: var(--fg4); padding: 8px 0 4px; }

.dl-bar[b-rqtfi7g3el] { height: 6px; background: var(--gray-100); border-radius: 9999px; overflow: hidden; }
.dl-bar--thin[b-rqtfi7g3el] { height: 5px; background: var(--gray-200); }
.dl-bar__fill[b-rqtfi7g3el] { height: 100%; border-radius: 9999px; }

.dl-kid__stats[b-rqtfi7g3el] { padding: 0 20px 18px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.dl-kid__today[b-rqtfi7g3el] { padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 10px; }
.dl-kid__today-head[b-rqtfi7g3el] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dl-kid__eyebrow--flush[b-rqtfi7g3el] { margin-bottom: 0; }
.dl-kid__today-min[b-rqtfi7g3el] { font-size: 12px; color: var(--fg3); }
.dl-kid__today-min strong[b-rqtfi7g3el] { color: var(--fg1); font-weight: 600; font-size: 15px; }
.dl-kid__stat[b-rqtfi7g3el] { padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.dl-kid__stat-n[b-rqtfi7g3el] { font-size: 18px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.dl-kid__stat-l[b-rqtfi7g3el] { font-size: 11px; color: var(--fg4); margin-top: 4px; font-weight: 500; }

/* generic card */
.dl-card[b-rqtfi7g3el] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 20px; }
.dl-card__head[b-rqtfi7g3el] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dl-card__title[b-rqtfi7g3el] { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.dl-card__lead[b-rqtfi7g3el] { margin: 2px 0 0; font-size: 13px; color: var(--fg4); }
.dl-card__lead strong[b-rqtfi7g3el] { color: var(--fg1); font-weight: 600; }
.dl-link[b-rqtfi7g3el] { font-size: 13px; font-weight: 500; color: var(--fg-brand); text-decoration: none; white-space: nowrap; }
.dl-link:hover[b-rqtfi7g3el] { color: var(--brand-700); }

.dl-empty[b-rqtfi7g3el] { text-align: center; padding: 40px 24px; }
.dl-empty__title[b-rqtfi7g3el] { font-size: 15px; font-weight: 600; color: var(--fg1); }
.dl-empty__text[b-rqtfi7g3el] { font-size: 13px; color: var(--fg4); margin: 4px 0 0; }

/* mid row */
.dl-midrow[b-rqtfi7g3el] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }

/* chart */
.dl-chart[b-rqtfi7g3el] { display: flex; flex-direction: column; }
.dl-legend[b-rqtfi7g3el] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-legend__item[b-rqtfi7g3el] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg3); }
.dl-legend__dot[b-rqtfi7g3el] { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dl-chart__plot[b-rqtfi7g3el] { padding: 4px 4px 0; margin-top: auto; }
.dl-chart__empty[b-rqtfi7g3el] { padding: 40px 8px; text-align: center; color: var(--fg4); font-size: 13px; }

/* approvals */
.dl-appr[b-rqtfi7g3el] { display: flex; flex-direction: column; }
.dl-appr__list[b-rqtfi7g3el] { display: flex; flex-direction: column; gap: 10px; }
.dl-appr__row[b-rqtfi7g3el] { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border2); border-radius: 12px; background: var(--bg-primary); }
.dl-appr__body[b-rqtfi7g3el] { flex: 1; min-width: 0; }
.dl-appr__title[b-rqtfi7g3el] { font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-appr__meta[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.dl-appr__actions[b-rqtfi7g3el] { display: flex; gap: 6px; flex: none; }
.dl-appr__btn[b-rqtfi7g3el] { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.dl-appr__btn:disabled[b-rqtfi7g3el] { opacity: .5; cursor: not-allowed; }
.dl-appr__btn--no[b-rqtfi7g3el] { background: var(--bg-primary); border-color: var(--border2); color: var(--fg3); }
.dl-appr__btn--no:hover:not(:disabled)[b-rqtfi7g3el] { background: var(--gray-50); color: var(--fg1); }
.dl-appr__btn--yes[b-rqtfi7g3el] { background: var(--brand-600); color: #fff; }
.dl-appr__btn--yes:hover:not(:disabled)[b-rqtfi7g3el] { background: var(--brand-700); }
.dl-appr__err[b-rqtfi7g3el] { margin-top: 10px; font-size: 12px; color: var(--error-700); }
.dl-appr__empty[b-rqtfi7g3el] { text-align: center; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; }
.dl-appr__empty-icon[b-rqtfi7g3el] { width: 40px; height: 40px; border-radius: 50%; background: var(--success-50); color: var(--success-600); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.dl-appr__empty-title[b-rqtfi7g3el] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.dl-appr__empty-text[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); margin-top: 2px; }

/* activity timeline */
.dl-timeline[b-rqtfi7g3el] { list-style: none; margin: 0; padding: 0; position: relative; }
.dl-timeline__rail[b-rqtfi7g3el] { position: absolute; left: 19px; top: 14px; bottom: 14px; width: 1px; background: var(--border2); }
.dl-tl[b-rqtfi7g3el] { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; position: relative; }
.dl-tl__icon[b-rqtfi7g3el] { width: 40px; height: 40px; border-radius: 50%; flex: none; z-index: 1; border: 2px solid var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; }
.dl-tl__icon--success[b-rqtfi7g3el] { background: var(--success-50); color: var(--success-700); }
.dl-tl__icon--brand[b-rqtfi7g3el] { background: var(--brand-50); color: var(--brand-700); }
.dl-tl__icon--warning[b-rqtfi7g3el] { background: var(--warning-50); color: var(--warning-700); }
.dl-tl__icon--neutral[b-rqtfi7g3el] { background: var(--gray-50); color: var(--fg3); }
.dl-tl__body[b-rqtfi7g3el] { flex: 1; min-width: 0; padding-top: 4px; }
.dl-tl__text[b-rqtfi7g3el] { font-size: 14px; color: var(--fg2); line-height: 20px; }
.dl-tl__text strong[b-rqtfi7g3el] { color: var(--fg1); font-weight: 600; }
.dl-tl__date[b-rqtfi7g3el] { font-size: 12px; color: var(--fg4); margin-top: 2px; }

@media (max-width: 1024px) {
    .dl-quick[b-rqtfi7g3el] { grid-template-columns: 1fr 1fr; }
    .dl-kids[b-rqtfi7g3el], .dl-midrow[b-rqtfi7g3el] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .dl-quick[b-rqtfi7g3el] { grid-template-columns: 1fr; }
    .dl-welcome__title[b-rqtfi7g3el] { font-size: 24px; line-height: 32px; }
}
/* /Components/Pages/Admin/ParentFamilyPage.razor.rz.scp.css */
.family-section[b-qsfxzif2mf] {
    margin-top: var(--spacing-5);
}

.family-section__title[b-qsfxzif2mf] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-3) 0;
}

.member-cards[b-qsfxzif2mf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-3);
}

.member-card[b-qsfxzif2mf] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    text-align: center;
}

.member-card--add[b-qsfxzif2mf] {
    border-style: dashed;
    cursor: pointer;
    transition: border-color 0.15s;
}

.member-card--add:hover[b-qsfxzif2mf] {
    border-color: var(--border-brand);
}

.member-card--full[b-qsfxzif2mf] {
    border-style: dashed;
    opacity: 0.5;
}

.member-card__avatar[b-qsfxzif2mf] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.member-card__avatar--placeholder[b-qsfxzif2mf] {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 16px;
    font-weight: 600;
}

.member-card__name[b-qsfxzif2mf] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.member-card__badges[b-qsfxzif2mf] {
    display: flex;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    justify-content: center;
}

.member-card__joined[b-qsfxzif2mf] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
/* /Components/Pages/Admin/ParentKidDetailPage.razor.rz.scp.css */
/* ParentKidDetailPage — redesigned to match the Parent Dashboard / My Kids design
   language. Tokens declared on `.kd` (same as `.dl`/`.kl`); px sizing; no own page
   padding (the portal `.content` frames it). */

[data-theme="dark"] .kd[b-05809kx2b2] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.kd[b-05809kx2b2] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB; --gray-300: #D5D7DA;
    --brand-25: #F0F4FF; --brand-50: #E1E8FD; --brand-200: #A2B4F4; --brand-500: #3F5FD6; --brand-600: #2847C4; --brand-700: #1A35AE; --brand-800: #102595;
    --success-50: #ECFDF3; --success-300: #75E0A7; --success-500: #17B26A; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-600: #DC6803; --warning-700: #B54708;
    --error-50: #FEF3F2; --error-300: #FDA29B; --error-600: #D92D20; --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    color: var(--fg1);
}

.kd-ico[b-05809kx2b2] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kd-ico--sep[b-05809kx2b2] { color: var(--fg5); }
.kd-ico--xs[b-05809kx2b2] { width: 12px; height: 12px; }

/* breadcrumb */
.kd-crumb[b-05809kx2b2] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 14px; }
.kd-crumb a[b-05809kx2b2] { color: var(--fg4); text-decoration: none; display: inline-flex; }
.kd-crumb a:hover[b-05809kx2b2] { color: var(--fg-brand); }
.kd-crumb__current[b-05809kx2b2] { color: var(--fg-brand); font-weight: 500; }

/* buttons */
.kd-btn[b-05809kx2b2] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; font: inherit; box-shadow: var(--shadow-xs); transition: background 150ms, border-color 150ms; }
.kd-btn--sm[b-05809kx2b2] { height: 32px; padding: 0 12px; font-size: 13px; }
.kd-btn--sec[b-05809kx2b2] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg2); }
.kd-btn--sec:hover[b-05809kx2b2] { background: var(--gray-50); }
.kd-btn--pri[b-05809kx2b2] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.kd-btn--pri:hover[b-05809kx2b2] { background: var(--brand-700); }
.kd-btn--ghost[b-05809kx2b2] { background: transparent; color: var(--fg2); box-shadow: none; }
.kd-btn--ghost:hover[b-05809kx2b2] { background: var(--gray-50); }
.kd-btn--danger[b-05809kx2b2] { background: var(--bg-primary); border-color: var(--error-300); color: var(--error-700); }
.kd-btn--danger:hover[b-05809kx2b2] { background: var(--error-50); }
.kd-btn:disabled[b-05809kx2b2] { opacity: .55; cursor: not-allowed; }

/* tags */
.kd-tag[b-05809kx2b2] { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1; border: 1px solid transparent; box-sizing: border-box; }
.kd-tag--neutral[b-05809kx2b2] { background: var(--gray-50); color: var(--fg2); border-color: var(--border2); }
.kd-tag--brand[b-05809kx2b2] { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.kd-tag--success[b-05809kx2b2] { background: var(--success-50); color: var(--success-700); border-color: var(--success-300); }
.kd-tag--warning[b-05809kx2b2] { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-300); }
.kd-tag--warning .kd-ico[b-05809kx2b2] { color: var(--warning-600); }

/* card + states */
.kd-card[b-05809kx2b2] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 20px; }
.kd-card__title[b-05809kx2b2] { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.kd-card__lead[b-05809kx2b2] { margin: 2px 0 0; font-size: 13px; color: var(--fg4); }
.kd-state[b-05809kx2b2] { padding: 40px 24px; text-align: center; color: var(--fg3); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kd-section-h[b-05809kx2b2] { font-size: 13px; font-weight: 600; color: var(--fg1); margin: 0 0 14px; }
.kd-dim[b-05809kx2b2] { opacity: .5; pointer-events: none; }

/* hero */
.kd-hero[b-05809kx2b2] { display: flex; align-items: center; gap: 18px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 20px 24px; margin-bottom: 20px; }
.kd-hero__av[b-05809kx2b2] { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.kd-hero__av--init[b-05809kx2b2] { background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-800) 100%); color: #fff; font-weight: 600; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; }
.kd-hero__body[b-05809kx2b2] { flex: 1; min-width: 0; }
.kd-hero__name[b-05809kx2b2] { margin: 0 0 8px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.kd-hero__tags[b-05809kx2b2] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-hero__edit[b-05809kx2b2] { flex: none; }

/* edit form */
.kd-edit[b-05809kx2b2] { margin-bottom: 20px; }
.kd-edit .kd-card__title[b-05809kx2b2] { margin-bottom: 16px; }
.kd-edit__alert[b-05809kx2b2] { margin-bottom: 16px; }
.kd-edit__grid[b-05809kx2b2] { margin-bottom: 4px; }
.kd-edit__foot[b-05809kx2b2] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border2); }

/* tabs */
.kd-tabs[b-05809kx2b2] { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--border2); margin-bottom: 20px; overflow-x: auto; }
.kd-tab[b-05809kx2b2] { height: 40px; padding: 0 2px; border: none; background: transparent; color: var(--fg3); font-size: 14px; font-weight: 600; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.kd-tab:hover:not(:disabled)[b-05809kx2b2] { color: var(--fg1); }
.kd-tab--on[b-05809kx2b2] { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.kd-tab:disabled[b-05809kx2b2] { cursor: default; }
.kd-tabpane[b-05809kx2b2] { margin-bottom: 8px; }

/* overview stat tiles */
.kd-stats[b-05809kx2b2] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kd-stat[b-05809kx2b2] { padding: 14px 16px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; box-shadow: var(--shadow-xs); }
.kd-stat-n[b-05809kx2b2] { font-size: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.kd-stat-l[b-05809kx2b2] { font-size: 12px; color: var(--fg4); margin-top: 6px; font-weight: 500; }

/* weekly bars */
.kd-chartcard[b-05809kx2b2] { margin-bottom: 20px; }
.kd-chartcard .kd-card__title[b-05809kx2b2] { margin-bottom: 18px; }
.kd-bars[b-05809kx2b2] { display: flex; gap: 6px; align-items: flex-end; }
.kd-bars__col[b-05809kx2b2] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.kd-bars__track[b-05809kx2b2] { width: 100%; height: 120px; display: flex; align-items: flex-end; }
.kd-bars__bar[b-05809kx2b2] { width: 100%; min-height: 4px; border-radius: 6px; background: var(--brand-100, #C5D0FA); }
.kd-bars__bar--active[b-05809kx2b2] { background: var(--brand-600); }
.kd-bars__bar--empty[b-05809kx2b2] { background: var(--gray-100); }
.kd-bars__lbl[b-05809kx2b2] { font-size: 10px; color: var(--fg4); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* bars (progress) */
.kd-bar[b-05809kx2b2] { height: 6px; background: var(--gray-100); border-radius: 9999px; overflow: hidden; flex: 1; min-width: 60px; }
.kd-bar__fill[b-05809kx2b2] { height: 100%; border-radius: 9999px; background: var(--brand-600); }

/* recent books */
.kd-books[b-05809kx2b2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.kd-book[b-05809kx2b2] { border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; background: var(--bg-primary); box-shadow: var(--shadow-xs); }
.kd-book__cover[b-05809kx2b2] { width: 100%; height: 140px; object-fit: cover; display: block; }
.kd-book__cover--ph[b-05809kx2b2] { display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--fg4); font-size: 12px; }
.kd-book__body[b-05809kx2b2] { padding: 12px; }
.kd-book__title[b-05809kx2b2] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-book__progrow[b-05809kx2b2] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kd-book__pct[b-05809kx2b2] { font-size: 12px; color: var(--fg4); white-space: nowrap; }

/* reading list rows */
.kd-list[b-05809kx2b2] { padding: 8px 20px; }
.kd-row[b-05809kx2b2] { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border2); }
.kd-row:last-child[b-05809kx2b2] { border-bottom: none; }
.kd-row__cover[b-05809kx2b2] { width: 36px; height: 48px; border-radius: 6px; object-fit: cover; flex: none; }
.kd-row__cover--ph[b-05809kx2b2] { display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--fg4); font-size: 10px; }
.kd-row__main[b-05809kx2b2] { flex: 1; min-width: 0; }
.kd-row__title[b-05809kx2b2] { font-size: 14px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-row__sub[b-05809kx2b2] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.kd-row__prog[b-05809kx2b2] { display: flex; align-items: center; gap: 8px; width: 160px; flex: none; }
.kd-row__pct[b-05809kx2b2] { font-size: 12px; color: var(--fg4); white-space: nowrap; }

/* pager */
.kd-pager[b-05809kx2b2] { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--border2); }
.kd-pager__info[b-05809kx2b2] { font-size: 13px; color: var(--fg4); }
.kd-pager__btns[b-05809kx2b2] { display: flex; gap: 6px; }

/* badges */
.kd-badges[b-05809kx2b2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kd-badge[b-05809kx2b2] { padding: 16px; border: 1px solid var(--border2); border-radius: 12px; text-align: center; background: var(--bg-primary); box-shadow: var(--shadow-xs); }
.kd-badge--locked[b-05809kx2b2] { opacity: .55; }
.kd-badge--locked .kd-badge__img[b-05809kx2b2] { filter: grayscale(100%); }
.kd-badge__img[b-05809kx2b2] { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 8px; display: block; }
.kd-badge__img--icon[b-05809kx2b2] { background: var(--success-50); color: var(--success-700); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.kd-badge--locked .kd-badge__img--icon[b-05809kx2b2] { background: var(--gray-100); color: var(--fg4); }
.kd-badge__name[b-05809kx2b2] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 2px; }
.kd-badge__sub[b-05809kx2b2] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.kd-badge__date[b-05809kx2b2] { font-size: 11px; color: var(--fg5); margin-top: 4px; }

/* activity filters */
.kd-filters[b-05809kx2b2] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.kd-filter[b-05809kx2b2] { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg-primary); color: var(--fg2); font-size: 13px; font-weight: 600; cursor: pointer; font: inherit; }
.kd-filter--on[b-05809kx2b2] { border-color: var(--brand-200); background: var(--brand-25); color: var(--brand-700); }

/* activity timeline */
.kd-timeline[b-05809kx2b2] { list-style: none; margin: 0; padding: 0; position: relative; }
.kd-timeline__rail[b-05809kx2b2] { position: absolute; left: 19px; top: 14px; bottom: 14px; width: 1px; background: var(--border2); }
.kd-tl[b-05809kx2b2] { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; position: relative; }
.kd-tl__icon[b-05809kx2b2] { width: 40px; height: 40px; border-radius: 50%; flex: none; z-index: 1; border: 2px solid var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; }
.kd-tl__icon--success[b-05809kx2b2] { background: var(--success-50); color: var(--success-700); }
.kd-tl__icon--brand[b-05809kx2b2] { background: var(--brand-50); color: var(--brand-700); }
.kd-tl__icon--warning[b-05809kx2b2] { background: var(--warning-50); color: var(--warning-700); }
.kd-tl__icon--neutral[b-05809kx2b2] { background: var(--gray-50); color: var(--fg3); }
.kd-tl__body[b-05809kx2b2] { flex: 1; min-width: 0; padding-top: 4px; }
.kd-tl__text[b-05809kx2b2] { font-size: 14px; color: var(--fg1); line-height: 20px; }
.kd-tl__meta[b-05809kx2b2] { font-size: 12px; color: var(--fg3); margin-top: 2px; }
.kd-tl__date[b-05809kx2b2] { font-size: 12px; color: var(--fg4); margin-top: 2px; }

/* danger zone */
.kd-danger[b-05809kx2b2] { margin-top: 24px; }
.kd-section-head[b-05809kx2b2] { margin-bottom: 14px; }
.kd-rows[b-05809kx2b2] { padding: 4px 20px; }
.kd-mrow[b-05809kx2b2] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border2); }
.kd-mrow--last[b-05809kx2b2] { border-bottom: none; }
.kd-mrow__body[b-05809kx2b2] { min-width: 0; }
.kd-mrow__title[b-05809kx2b2] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.kd-mrow__sub[b-05809kx2b2] { font-size: 13px; color: var(--fg4); margin-top: 2px; }

@media (max-width: 640px) {
    .kd-row__prog[b-05809kx2b2] { width: 100px; }
    .kd-mrow[b-05809kx2b2] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Pages/Admin/ParentKidsListPage.razor.rz.scp.css */
/* ParentKidsListPage — redesigned to match the Parent Dashboard design language.
   Design tokens declared on `.kl` (verbatim from the design's colors_and_type.css,
   same as `.dl`); sizing in px; no own page padding (the portal `.content` frames it). */

[data-theme="dark"] .kl[b-zb3ic0xnr8] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.kl[b-zb3ic0xnr8] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB;
    --brand-50: #E1E8FD; --brand-200: #A2B4F4; --brand-600: #2847C4; --brand-700: #1A35AE;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-600: #DC6803; --warning-700: #B54708;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    color: var(--fg1);
}

.kl-ico[b-zb3ic0xnr8] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kl-ico--sep[b-zb3ic0xnr8] { color: var(--fg5); }
.kl-ico--xs[b-zb3ic0xnr8] { width: 12px; height: 12px; }

/* breadcrumb */
.kl-crumb[b-zb3ic0xnr8] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 14px; }
.kl-crumb a[b-zb3ic0xnr8] { color: var(--fg4); display: inline-flex; }
.kl-crumb a:hover[b-zb3ic0xnr8] { color: var(--fg-brand); }
.kl-crumb__current[b-zb3ic0xnr8] { color: var(--fg-brand); font-weight: 500; }

/* header */
.kl-pagehead[b-zb3ic0xnr8] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.kl-pagehead__title[b-zb3ic0xnr8] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.kl-pagehead__sub[b-zb3ic0xnr8] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* buttons */
.kl-btn[b-zb3ic0xnr8] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; font: inherit; box-shadow: var(--shadow-xs); transition: background 150ms, border-color 150ms; }
.kl-btn--sec[b-zb3ic0xnr8] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg2); }
.kl-btn--sec:hover[b-zb3ic0xnr8] { background: var(--gray-50); }
.kl-btn--pri[b-zb3ic0xnr8] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.kl-btn--pri:hover[b-zb3ic0xnr8] { background: var(--brand-700); border-color: var(--brand-700); }

/* states */
.kl-state[b-zb3ic0xnr8] { padding: 48px 24px; text-align: center; color: var(--fg3); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.kl-card[b-zb3ic0xnr8] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); }

.kl-empty[b-zb3ic0xnr8] { padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kl-empty__icon[b-zb3ic0xnr8] { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.kl-empty__title[b-zb3ic0xnr8] { font-size: 18px; font-weight: 600; color: var(--fg1); margin-bottom: 6px; }
.kl-empty__text[b-zb3ic0xnr8] { font-size: 14px; color: var(--fg3); margin: 0 0 20px; max-width: 420px; }

/* grid */
.kl-grid[b-zb3ic0xnr8] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

/* kid card (matches the dashboard kid card) */
.kl-kid[b-zb3ic0xnr8] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); overflow: hidden; cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
.kl-kid:hover[b-zb3ic0xnr8] { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.kl-kid__top[b-zb3ic0xnr8] { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border2); }
.kl-kid__av[b-zb3ic0xnr8] { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.kl-kid__av--init[b-zb3ic0xnr8] { color: #fff; font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.kl-kid__id[b-zb3ic0xnr8] { flex: 1; min-width: 0; }
.kl-kid__namerow[b-zb3ic0xnr8] { display: flex; align-items: center; gap: 8px; }
.kl-kid__name[b-zb3ic0xnr8] { font-size: 16px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kid__age[b-zb3ic0xnr8] { font-size: 12px; color: var(--fg4); flex: none; }
.kl-streak[b-zb3ic0xnr8] { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border-radius: 9999px; background: var(--warning-50); border: 1px solid var(--warning-300); font-size: 12px; font-weight: 600; color: var(--warning-700); }
.kl-streak .kl-ico[b-zb3ic0xnr8] { color: var(--warning-600); }
.kl-kid__chev[b-zb3ic0xnr8] { color: var(--fg4); flex: none; }

.kl-kid__reading[b-zb3ic0xnr8] { padding: 18px 20px; }
.kl-kid__eyebrow[b-zb3ic0xnr8] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.kl-kid__bookrow[b-zb3ic0xnr8] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kl-kid__cover[b-zb3ic0xnr8] { width: 44px; height: 60px; border-radius: 6px; flex: none; object-fit: cover; box-shadow: var(--shadow-sm); }
.kl-kid__cover--ph[b-zb3ic0xnr8] { position: relative; overflow: hidden; }
.kl-kid__cover--ph[b-zb3ic0xnr8]::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.15); }
.kl-kid__bookmeta[b-zb3ic0xnr8] { flex: 1; min-width: 0; }
.kl-kid__booktitle[b-zb3ic0xnr8] { font-size: 14px; font-weight: 600; color: var(--fg1); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kid__booksub[b-zb3ic0xnr8] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.kl-kid__pct[b-zb3ic0xnr8] { text-align: right; flex: none; }
.kl-kid__pct-n[b-zb3ic0xnr8] { font-size: 13px; font-weight: 600; color: var(--fg1); }
.kl-kid__pct-l[b-zb3ic0xnr8] { font-size: 11px; color: var(--fg4); }
.kl-kid__noread[b-zb3ic0xnr8] { font-size: 13px; color: var(--fg4); padding: 8px 0 4px; }

.kl-bar[b-zb3ic0xnr8] { height: 6px; background: var(--gray-100); border-radius: 9999px; overflow: hidden; }
.kl-bar__fill[b-zb3ic0xnr8] { height: 100%; border-radius: 9999px; }

.kl-kid__stats[b-zb3ic0xnr8] { padding: 0 20px 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.kl-kid__stat[b-zb3ic0xnr8] { padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px; text-align: center; }
.kl-kid__stat-n[b-zb3ic0xnr8] { font-size: 18px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.kl-kid__stat-l[b-zb3ic0xnr8] { font-size: 11px; color: var(--fg4); margin-top: 4px; font-weight: 500; }

/* add-a-kid tile */
.kl-add[b-zb3ic0xnr8] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; padding: 24px; background: var(--gray-50); border: 1px dashed var(--border1); border-radius: 16px; cursor: pointer; font: inherit; transition: border-color 150ms, background 150ms; }
.kl-add:hover[b-zb3ic0xnr8] { border-color: var(--brand-200); background: var(--bg-primary); }
.kl-add__icon[b-zb3ic0xnr8] { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.kl-add__icon .kl-ico[b-zb3ic0xnr8] { width: 18px; height: 18px; }
.kl-add__label[b-zb3ic0xnr8] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.kl-add__sub[b-zb3ic0xnr8] { font-size: 12px; color: var(--fg4); }

@media (max-width: 560px) {
    .kl-grid[b-zb3ic0xnr8] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/ParentOrderDetailPage.razor.rz.scp.css */
/* ParentOrderDetailPage — parent-portal design language (root `.od`, same tokens as
   `.ol`/`.st`/`.pr`). Focused, width-capped column; no own page padding (portal
   `.content` frames it). Fonts inherit from the portal. */

[data-theme="dark"] .od[b-cafh6g04jn] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800);
    --brand-50: var(--brand-950); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3);
}

.od[b-cafh6g04jn] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-25: #FCFCFD; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-300: #D5D7DA;
    --brand-50: #E1E8FD; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-700: #B54708;
    --error-50: #FEF3F2; --error-600: #D92D20; --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    color: var(--fg1);
    max-width: 880px;
}

.od-ico[b-cafh6g04jn] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.od-ico--sep[b-cafh6g04jn] { color: var(--fg5); }
.od-ico--md[b-cafh6g04jn] { width: 18px; height: 18px; }
.od-ico--lg[b-cafh6g04jn] { width: 28px; height: 28px; }

/* breadcrumb */
.od-crumb[b-cafh6g04jn] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 16px; flex-wrap: wrap; }
.od-crumb a[b-cafh6g04jn] { color: var(--fg4); display: inline-flex; }
.od-crumb a:hover[b-cafh6g04jn] { color: var(--fg-brand); }
.od-crumb__current[b-cafh6g04jn] { color: var(--fg-brand); font-weight: 500; }

/* page header */
.od-pagehead[b-cafh6g04jn] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.od-pagehead__main[b-cafh6g04jn] { min-width: 0; }
.od-pagehead__title[b-cafh6g04jn] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.od-pagehead__sub[b-cafh6g04jn] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* states */
.od-state[b-cafh6g04jn] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; color: var(--fg3); font-size: 14px; }
.od-empty[b-cafh6g04jn] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; }
.od-empty__icon[b-cafh6g04jn] { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.od-empty__title[b-cafh6g04jn] { font-size: 16px; font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.od-empty__text[b-cafh6g04jn] { font-size: 13px; color: var(--fg3); max-width: 360px; margin-bottom: 16px; }

/* card */
.od-card[b-cafh6g04jn] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.od-card__head[b-cafh6g04jn] { padding: 20px 24px 16px; border-bottom: 1px solid var(--border2); }
.od-card__heading[b-cafh6g04jn] { min-width: 0; }
.od-card__title[b-cafh6g04jn] { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.od-card__desc[b-cafh6g04jn] { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fg3); }
.od-card__body[b-cafh6g04jn] { padding: 22px 24px; }

/* pills */
.od-pill[b-cafh6g04jn] { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.od-pill--brand[b-cafh6g04jn] { background: var(--brand-50); color: var(--brand-700); }
.od-pill--success[b-cafh6g04jn] { background: var(--success-50); color: var(--success-700); }
.od-pill--warning[b-cafh6g04jn] { background: var(--warning-50); color: var(--warning-700); }
.od-pill--gray[b-cafh6g04jn] { background: var(--gray-100); color: var(--fg3); }

/* status tracker */
.od-track[b-cafh6g04jn] { display: flex; align-items: flex-start; padding: 4px 8px; }
.od-track__step[b-cafh6g04jn] { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 84px; flex: none; }
.od-step__node[b-cafh6g04jn] { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--bg-primary); border: 1.5px solid var(--border1); color: var(--fg4); }
.od-step__node--done[b-cafh6g04jn] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.od-step__node--active[b-cafh6g04jn] { box-shadow: 0 0 0 4px var(--brand-50); }
.od-step__label[b-cafh6g04jn] { font-size: 12px; font-weight: 500; color: var(--fg4); text-align: center; }
.od-step__label--on[b-cafh6g04jn] { color: var(--fg1); font-weight: 600; }
.od-track__line[b-cafh6g04jn] { flex: 1; height: 2px; background: var(--border2); align-self: flex-start; margin: 15px 4px 0; border-radius: 2px; }
.od-track__line--on[b-cafh6g04jn] { background: var(--brand-600); }

/* cancelled banner */
.od-cancel[b-cafh6g04jn] { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--error-50); border: 1px solid var(--error-300); color: var(--error-700); font-size: 14px; font-weight: 500; }
.od-cancel .od-ico[b-cafh6g04jn] { color: var(--error-600); }

/* details / summary grid */
.od-grid[b-cafh6g04jn] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.od-grid .od-card[b-cafh6g04jn] { margin-bottom: 0; }

/* key-value */
.od-kv[b-cafh6g04jn] { display: grid; grid-template-columns: auto 1fr; gap: 14px 20px; margin: 0; }
.od-kv dt[b-cafh6g04jn] { font-size: 13px; color: var(--fg4); }
.od-kv dd[b-cafh6g04jn] { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg1); text-align: right; }
.od-id[b-cafh6g04jn] { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--fg2); word-break: break-all; }

/* summary */
.od-sum__row[b-cafh6g04jn] { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--fg2); padding-bottom: 14px; }
.od-sum__total[b-cafh6g04jn] { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border2); font-size: 16px; font-weight: 700; color: var(--fg1); }
.od-sum__pay[b-cafh6g04jn] { margin-top: 10px; font-size: 12px; color: var(--fg4); }

/* note + footer */
.od-note[b-cafh6g04jn] { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin: 20px 0; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--border2); font-size: 13px; line-height: 20px; color: var(--fg3); }
.od-note .od-ico[b-cafh6g04jn] { color: var(--fg4); margin-top: 1px; }
.od-foot[b-cafh6g04jn] { display: flex; }

@media (max-width: 640px) {
    .od-grid[b-cafh6g04jn] { grid-template-columns: 1fr; }
    .od-track__step[b-cafh6g04jn] { width: 64px; }
}
/* /Components/Pages/Admin/ParentOrderListPage.razor.rz.scp.css */
/* ParentOrderListPage — restyled to the parent-portal design language.
   Tokens declared on `.ol` (same set as `.st`/`.pr`/`.bl`); sizing in px. No own
   page padding — the portal `.content` frames it. Fonts inherit from the portal. */

[data-theme="dark"] .ol[b-9wdouxdod9] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800);
    --brand-50: var(--brand-950); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-700: var(--warning-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3);
}

.ol[b-9wdouxdod9] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-25: #FCFCFD; --gray-50: #FAFAFA; --gray-100: #F5F5F5;
    --brand-50: #E1E8FD; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-700: #B54708;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    color: var(--fg1);
}

.ol-ico[b-9wdouxdod9] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ol-ico--sep[b-9wdouxdod9] { color: var(--fg5); }
.ol-ico--lg[b-9wdouxdod9] { width: 28px; height: 28px; }

/* breadcrumb + header */
.ol-crumb[b-9wdouxdod9] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 16px; }
.ol-crumb a[b-9wdouxdod9] { color: var(--fg4); display: inline-flex; }
.ol-crumb a:hover[b-9wdouxdod9] { color: var(--fg-brand); }
.ol-crumb__current[b-9wdouxdod9] { color: var(--fg-brand); font-weight: 500; }
.ol-pagehead[b-9wdouxdod9] { margin-bottom: 28px; }
.ol-pagehead__title[b-9wdouxdod9] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.ol-pagehead__sub[b-9wdouxdod9] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* card */
.ol-card[b-9wdouxdod9] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); overflow: hidden; }
.ol-card__head[b-9wdouxdod9] { padding: 20px 24px 16px; border-bottom: 1px solid var(--border2); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ol-card__heading[b-9wdouxdod9] { min-width: 0; }
.ol-card__title[b-9wdouxdod9] { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.ol-card__desc[b-9wdouxdod9] { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fg3); }
.ol-card__body[b-9wdouxdod9] { padding: 20px 24px 22px; }
.ol-count[b-9wdouxdod9] { flex: none; font-size: 12px; font-weight: 600; color: var(--fg3); background: var(--gray-100); border-radius: 9999px; padding: 4px 10px; }

/* states */
.ol-state[b-9wdouxdod9] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; color: var(--fg3); font-size: 14px; }
.ol-empty[b-9wdouxdod9] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; }
.ol-empty__icon[b-9wdouxdod9] { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ol-empty__title[b-9wdouxdod9] { font-size: 16px; font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.ol-empty__text[b-9wdouxdod9] { font-size: 13px; color: var(--fg3); max-width: 360px; }

/* table */
.ol-tablewrap[b-9wdouxdod9] { overflow-x: auto; }
.ol-table[b-9wdouxdod9] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ol-table thead th[b-9wdouxdod9] { text-align: left; font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; background: var(--gray-25); border-bottom: 1px solid var(--border2); white-space: nowrap; }
.ol-table tbody td[b-9wdouxdod9] { padding: 14px 16px; border-bottom: 1px solid var(--border2); color: var(--fg2); vertical-align: middle; }
.ol-table tbody tr:last-child td[b-9wdouxdod9] { border-bottom: none; }
.ol-table .ol-c[b-9wdouxdod9] { text-align: center; }
.ol-table .ol-r[b-9wdouxdod9] { text-align: right; }
.ol-row[b-9wdouxdod9] { cursor: pointer; transition: background 120ms; }
.ol-row:hover[b-9wdouxdod9] { background: var(--gray-50); }
.ol-id[b-9wdouxdod9] { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 600; color: var(--fg3); }
.ol-total[b-9wdouxdod9] { font-weight: 600; color: var(--fg1); white-space: nowrap; }
.ol-date[b-9wdouxdod9] { color: var(--fg3); white-space: nowrap; }
.ol-view[b-9wdouxdod9] { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--fg-brand); white-space: nowrap; }
.ol-view .ol-ico[b-9wdouxdod9] { width: 13px; height: 13px; }

/* pills */
.ol-pill[b-9wdouxdod9] { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.ol-pill--brand[b-9wdouxdod9] { background: var(--brand-50); color: var(--brand-700); }
.ol-pill--success[b-9wdouxdod9] { background: var(--success-50); color: var(--success-700); }
.ol-pill--warning[b-9wdouxdod9] { background: var(--warning-50); color: var(--warning-700); }
.ol-pill--gray[b-9wdouxdod9] { background: var(--gray-100); color: var(--fg3); }

/* paging */
.ol-paging[b-9wdouxdod9] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--border2); }
.ol-paging__info[b-9wdouxdod9] { font-size: 13px; color: var(--fg3); }
.ol-paging__btns[b-9wdouxdod9] { display: flex; gap: 8px; }
.ol-pgbtn[b-9wdouxdod9] { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border1); background: var(--bg-primary); font: inherit; font-size: 14px; font-weight: 600; color: var(--fg2); cursor: pointer; box-shadow: var(--shadow-xs); }
.ol-pgbtn:hover:not(:disabled)[b-9wdouxdod9] { background: var(--gray-50); }
.ol-pgbtn:disabled[b-9wdouxdod9] { opacity: .5; cursor: default; }
/* /Components/Pages/Admin/ParentProfilePage.razor.rz.scp.css */
/* ParentProfilePage — exact port of the "Profile.html" design.
   Design tokens declared on `.pr` (verbatim from the bundle's colors_and_type.css,
   same set as `.dl`/`.kl`); sizing in px. No own page padding/width — the portal
   `.content` (padding: var(--spacing-10)) frames the page like every other parent
   page; cards just cap their reading width. Fonts inherit from the portal. */

[data-theme="dark"] .pr[b-fciowtb9rr] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.pr[b-fciowtb9rr] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4; --fg-error: #D92D20;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5;
    --brand-50: #E1E8FD; --brand-600: #2847C4;
    --success-50: #ECFDF3; --success-500: #17B26A; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-500: #F79009; --warning-700: #B54708;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    color: var(--fg1);
}

/* Account-style page reads better with a capped column, left-aligned like siblings. */
.pr-crumb[b-fciowtb9rr], .pr-pagehead[b-fciowtb9rr], .pr-flash[b-fciowtb9rr], .pr-state[b-fciowtb9rr], .pr-card[b-fciowtb9rr] { max-width: 760px; }

.pr-ico[b-fciowtb9rr] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pr-ico--sep[b-fciowtb9rr] { color: var(--fg5); }
.pr-ico--xs[b-fciowtb9rr] { width: 12px; height: 12px; }
.pr-ico--md[b-fciowtb9rr] { width: 18px; height: 18px; }

/* breadcrumb */
.pr-crumb[b-fciowtb9rr] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 16px; }
.pr-crumb a[b-fciowtb9rr] { color: var(--fg4); display: inline-flex; }
.pr-crumb a:hover[b-fciowtb9rr] { color: var(--fg-brand); }
.pr-crumb__current[b-fciowtb9rr] { color: var(--fg-brand); font-weight: 500; }

/* page header */
.pr-pagehead[b-fciowtb9rr] { margin-bottom: 28px; }
.pr-pagehead__title[b-fciowtb9rr] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.pr-pagehead__sub[b-fciowtb9rr] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* flash / loading */
.pr-flash[b-fciowtb9rr] { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 20px; border-radius: 10px; background: var(--success-50); border: 1px solid var(--success-200); color: var(--success-700); font-size: 14px; font-weight: 500; }
.pr-flash .pr-ico[b-fciowtb9rr] { color: var(--success-500); }
.pr-flash__x[b-fciowtb9rr] { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--success-700); display: inline-flex; padding: 2px; }
.pr-state[b-fciowtb9rr] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; color: var(--fg3); font-size: 14px; }

/* section card */
.pr-card[b-fciowtb9rr] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.pr-card__head[b-fciowtb9rr] { padding: 20px 24px 16px; border-bottom: 1px solid var(--border2); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pr-card__heading[b-fciowtb9rr] { min-width: 0; }
.pr-card__title[b-fciowtb9rr] { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.pr-card__desc[b-fciowtb9rr] { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fg3); }
.pr-card__body[b-fciowtb9rr] { padding: 20px 24px 22px; }
.pr-card__foot[b-fciowtb9rr] { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border2); }
.pr-inline-alert[b-fciowtb9rr] { margin-top: 14px; }

/* Danger zone — destructive account actions. Subtle red border + error-toned
   title distinguish the delete-account card; falls back to the neutral border
   token if the global error scale isn't in scope. Page-specific by design. */
.pr-card--danger[b-fciowtb9rr] { border-color: var(--error-300, var(--border1)); }
.pr-card__title--danger[b-fciowtb9rr] { color: var(--fg-error); }
.pr-danger__copy[b-fciowtb9rr] { margin: 0 0 16px; font-size: 13px; line-height: 20px; color: var(--fg3); }
.pr-danger__actions[b-fciowtb9rr] { display: flex; gap: 8px; margin-top: 16px; }

/* account grid */
.pr-grid2[b-fciowtb9rr] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }

/* photo */
.pr-photo[b-fciowtb9rr] { display: flex; align-items: center; gap: 20px; }
.pr-photo__av-wrap[b-fciowtb9rr] { position: relative; flex: none; }
.pr-photo__av[b-fciowtb9rr] { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-xs); display: block; }
.pr-photo__av--init[b-fciowtb9rr] { background: var(--brand-600); color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; justify-content: center; }
.pr-photo__edit[b-fciowtb9rr] { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border1); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); cursor: pointer; color: var(--fg3); padding: 0; }
.pr-photo__edit:hover:not(:disabled)[b-fciowtb9rr] { color: var(--fg-brand); border-color: var(--brand-600); }
.pr-photo__edit:disabled[b-fciowtb9rr] { cursor: default; opacity: .6; }
.pr-photo__side[b-fciowtb9rr] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-photo__btns[b-fciowtb9rr] { display: flex; gap: 8px; }
.pr-photo__hint[b-fciowtb9rr] { font-size: 12px; color: var(--fg4); }
.pr-photo__err[b-fciowtb9rr] { font-size: 12px; color: var(--fg-error); }

/* email / password row */
.pr-row[b-fciowtb9rr] { display: flex; align-items: center; gap: 14px; }
.pr-row__icon[b-fciowtb9rr] { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--fg3); }
.pr-row__main[b-fciowtb9rr] { flex: 1; min-width: 0; }
.pr-row__titleline[b-fciowtb9rr] { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.pr-row__title[b-fciowtb9rr] { font-size: 14px; font-weight: 600; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; }
.pr-row__title--dots[b-fciowtb9rr] { letter-spacing: 0.18em; }
.pr-row__sub[b-fciowtb9rr] { font-size: 12px; color: var(--fg4); }

/* badge */
.pr-badge[b-fciowtb9rr] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; }
.pr-badge__dot[b-fciowtb9rr] { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pr-badge--success[b-fciowtb9rr] { background: var(--success-50); color: var(--success-700); }
.pr-badge--success .pr-badge__dot[b-fciowtb9rr] { background: var(--success-500); }
.pr-badge--warning[b-fciowtb9rr] { background: var(--warning-50); color: var(--warning-700); }
.pr-badge--warning .pr-badge__dot[b-fciowtb9rr] { background: var(--warning-500); }

@media (max-width: 560px) {
    .pr-grid2[b-fciowtb9rr] { grid-template-columns: 1fr; }
    .pr-photo[b-fciowtb9rr] { flex-wrap: wrap; }
}
/* /Components/Pages/Admin/ParentSettingsPage.razor.rz.scp.css */
/* ParentSettingsPage — exact port of the "Settings.html" design.
   Design tokens declared on `.st` (verbatim from the bundle's colors_and_type.css,
   same set as `.pr`/`.dl`); sizing in px. No own page padding — the portal `.content`
   frames the page; content elements cap their reading width, left-aligned like
   sibling parent pages. Fonts inherit from the portal. */

[data-theme="dark"] .st[b-gmbofu6yiy] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.st[b-gmbofu6yiy] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4; --fg-error: #D92D20;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-25: #FCFCFD; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-300: #D5D7DA;
    --brand-50: #E1E8FD; --brand-200: #A2B4F4; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-500: #17B26A; --success-700: #067647;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    color: var(--fg1);
}

.st-crumb[b-gmbofu6yiy], .st-pagehead[b-gmbofu6yiy], .st-card[b-gmbofu6yiy] { max-width: 800px; }

.st-ico[b-gmbofu6yiy] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.st-ico--sep[b-gmbofu6yiy] { color: var(--fg5); }
.st-ico--md[b-gmbofu6yiy] { width: 18px; height: 18px; }
.st-ico--lg[b-gmbofu6yiy] { width: 28px; height: 28px; }

/* breadcrumb + header */
.st-crumb[b-gmbofu6yiy] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 16px; }
.st-crumb a[b-gmbofu6yiy] { color: var(--fg4); display: inline-flex; }
.st-crumb a:hover[b-gmbofu6yiy] { color: var(--fg-brand); }
.st-crumb__current[b-gmbofu6yiy] { color: var(--fg-brand); font-weight: 500; }
.st-pagehead[b-gmbofu6yiy] { margin-bottom: 28px; }
.st-pagehead__title[b-gmbofu6yiy] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.st-pagehead__sub[b-gmbofu6yiy] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

.st-state[b-gmbofu6yiy] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; color: var(--fg3); font-size: 14px; }

/* section card */
.st-card[b-gmbofu6yiy] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.st-card__head[b-gmbofu6yiy] { padding: 20px 24px 16px; border-bottom: 1px solid var(--border2); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-card__heading[b-gmbofu6yiy] { min-width: 0; }
.st-card__title[b-gmbofu6yiy] { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.st-card__desc[b-gmbofu6yiy] { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--fg3); }
.st-card__body[b-gmbofu6yiy] { padding: 20px 24px 22px; }
.st-card__body--rows[b-gmbofu6yiy] { padding: 8px 24px; }

/* badges + links */
.st-badge[b-gmbofu6yiy] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 18px; }
.st-badge--brand[b-gmbofu6yiy] { background: var(--brand-50); color: var(--brand-700); }
.st-link[b-gmbofu6yiy] { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg2); cursor: pointer; }
.st-link:hover[b-gmbofu6yiy] { background: var(--gray-50); }
.st-link--brand[b-gmbofu6yiy] { color: var(--fg-brand); }
.st-iconbtn[b-gmbofu6yiy] { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 8px; border: none; background: transparent; color: var(--fg4); cursor: pointer; }
.st-iconbtn:hover[b-gmbofu6yiy] { background: var(--error-50); color: var(--fg-error); }

/* empty state */
.st-empty[b-gmbofu6yiy] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; }
.st-empty__icon[b-gmbofu6yiy] { width: 52px; height: 52px; border-radius: 12px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.st-empty__title[b-gmbofu6yiy] { font-size: 15px; font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.st-empty__text[b-gmbofu6yiy] { font-size: 13px; color: var(--fg3); margin-bottom: 16px; max-width: 360px; }

/* address cards */
.st-addr-list[b-gmbofu6yiy] { display: flex; flex-direction: column; gap: 12px; }
.st-addr[b-gmbofu6yiy] { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; padding: 16px 18px; transition: box-shadow 150ms, border-color 150ms; }
.st-addr:hover[b-gmbofu6yiy] { box-shadow: var(--shadow-sm); }
.st-addr--default[b-gmbofu6yiy] { border-color: var(--brand-200); }
.st-addr__icon[b-gmbofu6yiy] { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--gray-50); color: var(--fg3); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.st-addr__icon--default[b-gmbofu6yiy] { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.st-addr__main[b-gmbofu6yiy] { flex: 1; min-width: 0; }
.st-addr__nameline[b-gmbofu6yiy] { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.st-addr__name[b-gmbofu6yiy] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.st-addr__lines[b-gmbofu6yiy] { font-size: 13px; line-height: 20px; color: var(--fg2); }
.st-addr__sub[b-gmbofu6yiy] { color: var(--fg3); }
.st-addr__actions[b-gmbofu6yiy] { display: flex; align-items: center; gap: 4px; flex: none; }

/* notifications — inline save/error affordances */
.st-saving[b-gmbofu6yiy] { font-size: 12px; font-weight: 500; color: var(--fg4); white-space: nowrap; }
.st-inline-err[b-gmbofu6yiy] { font-size: 13px; color: var(--fg-error); padding-top: 12px; }

/* select rows (language) + privacy rows */
.st-srow[b-gmbofu6yiy], .st-prow[b-gmbofu6yiy] { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border2); }
.st-prow[b-gmbofu6yiy] { align-items: flex-start; }
.st-srow--last[b-gmbofu6yiy], .st-prow--last[b-gmbofu6yiy] { border-bottom: none; }
.st-srow__label[b-gmbofu6yiy] { min-width: 0; flex: 1; }
.st-srow__title[b-gmbofu6yiy] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.st-srow__hint[b-gmbofu6yiy] { font-size: 13px; color: var(--fg3); margin-top: 2px; line-height: 20px; }
.st-prow__tgl[b-gmbofu6yiy] { flex: none; padding-top: 2px; }
.st-select[b-gmbofu6yiy] { height: 38px; padding: 0 12px; border-radius: 8px; background: var(--bg-primary); border: 1px solid var(--border1); box-shadow: var(--shadow-xs); font: inherit; font-size: 14px; font-weight: 500; color: var(--fg1); cursor: pointer; min-width: 220px; flex: none; }
.st-select:focus[b-gmbofu6yiy] { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(63,95,214,.18); }

/* client-state toggle (design's 36×20 switch) */
.st-tgl[b-gmbofu6yiy] { width: 36px; height: 20px; border-radius: 9999px; border: none; background: var(--gray-300); position: relative; cursor: pointer; padding: 0; flex: none; transition: background 150ms; }
.st-tgl--on[b-gmbofu6yiy] { background: var(--brand-600); }
.st-tgl__dot[b-gmbofu6yiy] { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg-white); box-shadow: var(--shadow-xs); transition: left 150ms; }
.st-tgl--on .st-tgl__dot[b-gmbofu6yiy] { left: 18px; }

@media (max-width: 560px) {
    .st-srow[b-gmbofu6yiy] { flex-wrap: wrap; }
    .st-select[b-gmbofu6yiy] { min-width: 0; width: 100%; }
}
/* /Components/Pages/Admin/ParentSubscriptionPage.razor.rz.scp.css */
/* ParentSubscriptionPage — exact port of the Claude Design "My Subscription".
   Per the user's "exact port" decision (matching the Checkout + Wallet pages),
   this reproduces the mockup literally rather than adapting into portal components.
   The design's own tokens are declared on `.sub` (copied verbatim from the design's
   colors_and_type.css) so colours/shadows match the source; sizing uses the design's
   px values. Fonts inherit the portal's family. No own page padding/width — the
   portal's `.content` already frames every page (var(--spacing-10)). */

[data-theme="dark"] .sub[b-9zwndwjtg6] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300); --fg-error: var(--error-400);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-25: var(--gray-900); --gray-50: var(--gray-900); --gray-100: var(--gray-800); --gray-200: var(--gray-800); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-200: var(--success-800); --success-300: var(--success-800); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-300: var(--warning-800); --warning-700: var(--warning-300);
    --error-50: var(--error-950); --error-300: var(--error-800); --error-600: var(--error-400); --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4);
}

.sub[b-9zwndwjtg6] {
    /* ---- design tokens (verbatim from colors_and_type.css) ---- */
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E9EAEB; --gray-300: #D5D7DA; --gray-400: #A4A7AE;
    --brand-25: #F0F4FF; --brand-50: #E1E8FD; --brand-100: #C5D0FA; --brand-200: #A2B4F4;
    --brand-500: #3F5FD6; --brand-600: #2847C4; --brand-700: #1A35AE; --brand-800: #102595;
    --success-50: #ECFDF3; --success-300: #75E0A7; --success-500: #17B26A; --success-600: #079455; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-300: #FEC84B; --warning-500: #F79009; --warning-700: #B54708;
    --error-50: #FEF3F2; --error-300: #FDA29B; --error-500: #F04438; --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);

    color: var(--fg1);
}

/* ---- inline icons (no <Icon> component in the portal) ---- */
.sub-ico[b-9zwndwjtg6] {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex: none;
}

.sub-ico--sep[b-9zwndwjtg6] { color: var(--fg5); }

/* ---- functional (non-design) states ---- */
.sub-state[b-9zwndwjtg6] { padding: 64px 24px; text-align: center; color: var(--fg3); font-size: 14px; }
.sub-state__actions[b-9zwndwjtg6] { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* ---- breadcrumb ---- */
.sub-crumb[b-9zwndwjtg6] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 18px; }
.sub-crumb a[b-9zwndwjtg6] { color: var(--fg4); text-decoration: none; }
.sub-crumb a:hover[b-9zwndwjtg6] { color: var(--fg-brand); }
.sub-crumb__current[b-9zwndwjtg6] { color: var(--fg-brand); font-weight: 500; }

/* ---- empty state ---- */
.sub-empty[b-9zwndwjtg6] {
    background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px;
    box-shadow: var(--shadow-xs); padding: 56px 24px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}

.sub-empty__icon[b-9zwndwjtg6] {
    width: 56px; height: 56px; border-radius: 14px; flex: none;
    background: var(--brand-50); color: var(--brand-700);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}

.sub-empty__title[b-9zwndwjtg6] { font-size: 18px; font-weight: 600; color: var(--fg1); margin-bottom: 6px; }
.sub-empty__text[b-9zwndwjtg6] { font-size: 14px; color: var(--fg3); margin: 0 0 20px; max-width: 420px; }

/* ---- page header ---- */
.sub-pagehead[b-9zwndwjtg6] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.sub-pagehead__title[b-9zwndwjtg6] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.sub-pagehead__sub[b-9zwndwjtg6] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }

/* ---- buttons ---- */
.sub-btn[b-9zwndwjtg6] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap; font: inherit;
    box-shadow: var(--shadow-xs); transition: background 150ms, border-color 150ms;
}

.sub-btn--lg[b-9zwndwjtg6] { height: 44px; padding: 0 18px; }
.sub-btn--sec[b-9zwndwjtg6] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg2); }
.sub-btn--sec:hover[b-9zwndwjtg6] { background: var(--gray-50); }
.sub-btn--pri[b-9zwndwjtg6] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.sub-btn--pri:hover[b-9zwndwjtg6] { background: var(--brand-700); border-color: var(--brand-700); }

/* ---- tags / badges ---- */
.sub-tag[b-9zwndwjtg6] {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
    border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1;
    border: 1px solid transparent; box-sizing: border-box;
}

.sub-tag__dot[b-9zwndwjtg6] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sub-tag--neutral[b-9zwndwjtg6] { background: var(--gray-50); color: var(--fg2); border-color: var(--border2); }
.sub-tag--neutral .sub-tag__dot[b-9zwndwjtg6] { background: var(--gray-400); }
.sub-tag--brand[b-9zwndwjtg6]   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.sub-tag--brand .sub-tag__dot[b-9zwndwjtg6] { background: var(--brand-500); }
.sub-tag--success[b-9zwndwjtg6] { background: var(--success-50); color: var(--success-700); border-color: var(--success-300); }
.sub-tag--success .sub-tag__dot[b-9zwndwjtg6] { background: var(--success-500); }
.sub-tag--warning[b-9zwndwjtg6] { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-300); }
.sub-tag--warning .sub-tag__dot[b-9zwndwjtg6] { background: var(--warning-500); }
.sub-tag--error[b-9zwndwjtg6]   { background: var(--error-50); color: var(--error-700); border-color: var(--error-300); }
.sub-tag--error .sub-tag__dot[b-9zwndwjtg6] { background: var(--error-500); }

/* ════ Current plan hero ════ */
.sub-hero[b-9zwndwjtg6] {
    background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px;
    box-shadow: var(--shadow-xs); overflow: hidden; margin-bottom: 20px;
}

.sub-hero__top[b-9zwndwjtg6] { display: flex; align-items: flex-start; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--border2); }

/* plan glyph */
.sub-glyph[b-9zwndwjtg6] {
    width: 64px; height: 64px; border-radius: 16px; flex: none; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-800) 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--shadow-sm);
}

.sub-glyph__arcs[b-9zwndwjtg6] { position: absolute; inset: 0; width: 64px; height: 64px; opacity: .35; fill: none; stroke: #fff; stroke-width: 1; }
.sub-glyph__mark[b-9zwndwjtg6] { position: relative; width: 29px; height: 29px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sub-hero__id[b-9zwndwjtg6] { flex: 1; min-width: 0; }
.sub-hero__titlerow[b-9zwndwjtg6] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.sub-hero__title[b-9zwndwjtg6] { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; }
.sub-hero__tier[b-9zwndwjtg6] { color: var(--fg3); font-weight: 500; }
.sub-hero__desc[b-9zwndwjtg6] { margin: 0; font-size: 14px; color: var(--fg3); line-height: 20px; }

.sub-hero__price[b-9zwndwjtg6] { text-align: right; flex: none; }
.sub-hero__price-main[b-9zwndwjtg6] { font-size: 28px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.sub-hero__price-sub[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); margin-top: 4px; }

/* meta grid */
.sub-hero__meta[b-9zwndwjtg6] {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 24px;
    padding: 20px 28px; align-items: center; border-bottom: 1px solid var(--border2);
}

.sub-cell[b-9zwndwjtg6] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sub-cell__k[b-9zwndwjtg6] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; }
.sub-cell__v[b-9zwndwjtg6] { font-size: 15px; font-weight: 600; color: var(--fg1); line-height: 20px; }
.sub-cell__s[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); line-height: 16px; }

.sub-ring-wrap[b-9zwndwjtg6] { display: flex; align-items: center; gap: 12px; padding-left: 8px; border-left: 1px solid var(--border2); }
.sub-ring[b-9zwndwjtg6] { width: 72px; height: 72px; position: relative; flex: none; }
.sub-ring__track[b-9zwndwjtg6] { fill: none; stroke: var(--gray-100); stroke-width: 6; }
.sub-ring__fill[b-9zwndwjtg6] { fill: none; stroke: var(--brand-500); stroke-width: 6; stroke-linecap: round; }
.sub-ring__center[b-9zwndwjtg6] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sub-ring__num[b-9zwndwjtg6] { font-size: 22px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 1; }
.sub-ring__lbl[b-9zwndwjtg6] { font-size: 10px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.sub-ring__side[b-9zwndwjtg6] { display: flex; flex-direction: column; gap: 2px; }
.sub-ring__date[b-9zwndwjtg6] { font-size: 13px; font-weight: 500; color: var(--fg2); line-height: 18px; }

/* hero footer */
.sub-hero__foot[b-9zwndwjtg6] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: var(--gray-50); flex-wrap: wrap; }
.sub-hero__note[b-9zwndwjtg6] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg3); }
.sub-hero__note .sub-ico[b-9zwndwjtg6] { color: var(--fg4); }
.sub-hero__actions[b-9zwndwjtg6] { display: flex; gap: 8px; }

/* ════ Two-column grid ════ */
.sub-grid[b-9zwndwjtg6] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; align-items: start; }

@media (max-width: 1024px) {
    .sub-grid[b-9zwndwjtg6] { grid-template-columns: 1fr; }
    .sub-hero__meta[b-9zwndwjtg6] { grid-template-columns: 1fr 1fr; }
    .sub-ring-wrap[b-9zwndwjtg6] { grid-column: 1 / -1; border-left: none; padding-left: 0; padding-top: 12px; border-top: 1px solid var(--border2); }
}

/* ---- generic card ---- */
.sub-card[b-9zwndwjtg6] {
    background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px;
    box-shadow: var(--shadow-xs); padding: 24px; margin-bottom: 20px;
}

.sub-card__head[b-9zwndwjtg6] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sub-card__head--tx[b-9zwndwjtg6] { align-items: flex-start; }
.sub-card__title[b-9zwndwjtg6] { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.sub-card__lead[b-9zwndwjtg6] { margin: 0 0 16px; font-size: 13px; color: var(--fg4); }
.sub-card__lead--tight[b-9zwndwjtg6] { margin: 2px 0 0; }
.sub-link[b-9zwndwjtg6] { font-size: 13px; font-weight: 500; color: var(--fg-brand); text-decoration: none; white-space: nowrap; }
.sub-link:hover[b-9zwndwjtg6] { color: var(--brand-700); }
.sub-muted[b-9zwndwjtg6] { font-size: 13px; color: var(--fg4); }

/* ---- feature list ---- */
.sub-feats[b-9zwndwjtg6] { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.sub-feat[b-9zwndwjtg6] { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 18px; color: var(--fg2); }
.sub-feat__mark[b-9zwndwjtg6] { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--success-50); color: var(--success-600); display: inline-flex; align-items: center; justify-content: center; }
.sub-feat__mark .sub-ico[b-9zwndwjtg6] { width: 12px; height: 12px; }

/* ---- active readers ---- */
.sub-readers[b-9zwndwjtg6] { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border2); }
.sub-readers__title[b-9zwndwjtg6] { margin-bottom: 10px; }
.sub-readers__chips[b-9zwndwjtg6] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sub-chip[b-9zwndwjtg6] { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border2); border-radius: 9999px; background: var(--bg-primary); }
.sub-chip__av[b-9zwndwjtg6] { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.sub-chip__av--init[b-9zwndwjtg6] { background: var(--brand-600); color: #fff; font-weight: 600; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sub-chip__name[b-9zwndwjtg6] { font-size: 13px; font-weight: 500; color: var(--fg2); }
.sub-chip__meta[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); }
.sub-chip--add[b-9zwndwjtg6] { padding: 0 12px; height: 32px; border-style: dashed; border-color: var(--border1); background: transparent; font-size: 13px; font-weight: 500; color: var(--fg3); cursor: pointer; font: inherit; }
.sub-chip--add:hover[b-9zwndwjtg6] { background: var(--gray-50); }
.sub-readers__foot[b-9zwndwjtg6] { margin-top: 10px; font-size: 12px; color: var(--fg4); }

/* ---- billing source ---- */
.sub-source[b-9zwndwjtg6] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border2); border-radius: 12px; background: var(--gray-50); }
.sub-source__icon[b-9zwndwjtg6] { width: 40px; height: 40px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); display: flex; align-items: center; justify-content: center; }
.sub-source__body[b-9zwndwjtg6] { flex: 1; min-width: 0; }
.sub-source__row[b-9zwndwjtg6] { display: flex; align-items: center; gap: 8px; }
.sub-source__name[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.sub-source__bal[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.sub-source__bal strong[b-9zwndwjtg6] { color: var(--fg2); font-weight: 600; }

/* ---- auto-renew toggle ---- */
.sub-renew[b-9zwndwjtg6] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border2); border-radius: 12px; margin-top: 10px; }
.sub-renew__title[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.sub-renew__sub[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.sub-toggle[b-9zwndwjtg6] { position: relative; width: 40px; height: 24px; border-radius: 9999px; background: var(--gray-300); transition: background 150ms; flex: none; cursor: pointer; }
.sub-toggle--on[b-9zwndwjtg6] { background: var(--brand-600); }
.sub-toggle__knob[b-9zwndwjtg6] { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg-white); box-shadow: var(--shadow-sm); transition: left 150ms; }
.sub-toggle--on .sub-toggle__knob[b-9zwndwjtg6] { left: 18px; }

/* ---- next charge summary ---- */
.sub-next[b-9zwndwjtg6] { margin-top: 14px; padding: 14px 16px; background: var(--brand-25); border: 1px solid var(--brand-100); border-radius: 12px; }
.sub-next__row[b-9zwndwjtg6] { display: flex; justify-content: space-between; align-items: center; }
.sub-next__row + .sub-next__row[b-9zwndwjtg6] { margin-top: 6px; }
.sub-next__k[b-9zwndwjtg6] { font-size: 12px; color: var(--fg3); }
.sub-next__v[b-9zwndwjtg6] { font-size: 13px; font-weight: 600; color: var(--fg1); }
.sub-next__amt[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--brand-700); }

/* ---- transactions ---- */
.sub-tx-actions[b-9zwndwjtg6] { display: flex; align-items: center; gap: 8px; flex: none; }
.sub-pill[b-9zwndwjtg6] {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: 8px; border: 1px solid var(--border1); background: var(--bg-primary);
    font-size: 13px; font-weight: 500; color: var(--fg2); cursor: pointer; font: inherit;
}
.sub-pill:hover[b-9zwndwjtg6] { background: var(--gray-50); }
.sub-pill:disabled[b-9zwndwjtg6] { opacity: .55; cursor: not-allowed; }

.sub-tx-empty[b-9zwndwjtg6] { padding: 40px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.sub-tx-empty__icon[b-9zwndwjtg6] { width: 44px; height: 44px; border-radius: 12px; background: var(--gray-50); color: var(--fg4); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sub-tx-empty__title[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.sub-tx-empty__text[b-9zwndwjtg6] { font-size: 13px; color: var(--fg4); margin-top: 2px; }

.sub-tx-list[b-9zwndwjtg6] { margin-top: 8px; }
.sub-tx[b-9zwndwjtg6] { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border2); }
.sub-tx--last[b-9zwndwjtg6] { border-bottom: none; }
.sub-tx__icon[b-9zwndwjtg6] { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--brand-50); color: var(--brand-700); display: flex; align-items: center; justify-content: center; }
.sub-tx__icon .sub-ico[b-9zwndwjtg6] { width: 18px; height: 18px; }
.sub-tx__body[b-9zwndwjtg6] { flex: 1; min-width: 0; }
.sub-tx__title[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--fg1); line-height: 20px; }
.sub-tx__sub[b-9zwndwjtg6] { font-size: 12px; color: var(--fg4); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sub-tx__dot[b-9zwndwjtg6] { color: var(--fg5); }
.sub-tx__amt[b-9zwndwjtg6] { text-align: right; min-width: 110px; flex: none; }
.sub-tx__amt-main[b-9zwndwjtg6] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.sub-tx__amt-sub[b-9zwndwjtg6] { font-size: 11px; color: var(--fg4); margin-top: 2px; }
.sub-receipt[b-9zwndwjtg6] {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
    border-radius: 8px; border: 1px solid var(--border1); background: var(--bg-primary);
    font-size: 12px; font-weight: 500; color: var(--fg2); cursor: pointer; font: inherit; flex: none;
}
.sub-receipt:hover[b-9zwndwjtg6] { background: var(--gray-50); }
.sub-receipt .sub-ico[b-9zwndwjtg6] { width: 13px; height: 13px; }

/* ---- footer help ---- */
.sub-help[b-9zwndwjtg6] { margin-top: 4px; padding: 14px 20px; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 12px; display: flex; align-items: center; gap: 12px; }
.sub-help .sub-ico[b-9zwndwjtg6] { width: 16px; height: 16px; color: var(--fg4); }
.sub-help span[b-9zwndwjtg6] { font-size: 13px; color: var(--fg2); }
.sub-help a[b-9zwndwjtg6] { color: var(--fg-brand); font-weight: 500; text-decoration: none; }

@media (max-width: 640px) {
    .sub-feats[b-9zwndwjtg6] { grid-template-columns: 1fr; }
    .sub-hero__top[b-9zwndwjtg6] { flex-wrap: wrap; }
    .sub-hero__price[b-9zwndwjtg6] { text-align: left; width: 100%; }
    .sub-tx__amt[b-9zwndwjtg6] { min-width: 90px; }
}
/* /Components/Pages/Admin/ParentSubscriptionPlansPage.razor.rz.scp.css */
/* ParentSubscriptionPlansPage — page-scoped styles.

   The portal's design system doesn't ship a pricing-card component, so this
   page renders card chrome directly. Every value below resolves to a design
   token — colours, spacing, radius, shadow, typography — so future token
   updates flow through. Only the *composition* (small name + dominant price
   + tagline + profile pill + check-circle features) is page-specific.

   The 3-up / 2-up grid plus the popular-card highlight follow the Claude
   Design reference (`design-refs/subscription-plans-pkg/project/plans.jsx`). */

/* ── Toolbar: labelled plan-type + billing toggles ──────────────────────────
   Lives inside PageHeader's Actions slot so the heading and the controls
   share a single row at desktop widths. */
.plans-toolbar[b-lj0kzpsmde] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
}

.plans-toolbar__group[b-lj0kzpsmde] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.plans-toolbar__label[b-lj0kzpsmde] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-quaternary);
}

/* ── Plan grid: 3 tier cards on the top row, 2 on the bottom row ──────────────
   Six equal columns; each card spans two. The bottom pair is inset by one
   column on each side so it sits centred under the top row. This layout
   assumes the five consumer tiers (Free + four paid). minmax(0, 1fr) — not a
   bare 1fr — keeps every column the same width with long feature labels. */
.plans-grid[b-lj0kzpsmde] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-5);
    align-items: stretch;
    margin-top: var(--spacing-2);
}

/* Top row — cards 1-3, two columns each. */
.plans-grid > .plan-card:nth-child(1)[b-lj0kzpsmde],
.plans-grid > .plan-card:nth-child(2)[b-lj0kzpsmde],
.plans-grid > .plan-card:nth-child(3)[b-lj0kzpsmde] { grid-column: span 2; }

/* Bottom row — cards 4-5, two columns each, left-aligned under cards 1-2 so
   the row starts flush with the top row (the right two columns stay empty). */
.plans-grid > .plan-card:nth-child(4)[b-lj0kzpsmde] { grid-column: 1 / span 2; grid-row: 2; }
.plans-grid > .plan-card:nth-child(5)[b-lj0kzpsmde] { grid-column: 3 / span 2; grid-row: 2; }

/* Cards stack vertically on narrow screens (still equal width). */
@media (max-width: 1024px) {
    .plans-grid[b-lj0kzpsmde] { grid-template-columns: 1fr; }
    .plans-grid > .plan-card:nth-child(n)[b-lj0kzpsmde] { grid-column: auto; grid-row: auto; }
}

/* Loading shimmer — simple 3-up grid in the shape of the tier cards. */
.plans-skeleton-grid[b-lj0kzpsmde] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-5);
    margin-top: var(--spacing-2);
}

@media (max-width: 1024px) {
    .plans-skeleton-grid[b-lj0kzpsmde] { grid-template-columns: 1fr; }
}

/* ── Plan card: chrome + vertical rhythm ────────────────────────────────────
   The check-circle background uses --feature-check-bg (set by the default and
   popular rules below) so the feature bullet styling can reference one token
   without branching on the popular variant inside the bullet rules. */
.plan-card[b-lj0kzpsmde] {
    --feature-check-bg: var(--bg-success-primary);
    --feature-check-fg: var(--text-success-primary);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xs);
    min-width: 0;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.plan-card--popular[b-lj0kzpsmde] {
    --feature-check-bg: var(--brand-100);
    --feature-check-fg: var(--brand-700);
    background: var(--brand-25);
    border: 1.5px solid var(--brand-300);
    box-shadow: var(--shadow-sm);
}

/* Dark theme — the popular card uses brand PRIMITIVES (brand-25/100/300/700) that
   don't flip with the theme, so it rendered as a bright near-white panel with
   washed-out text. Remap to dark brand shades so it reads as a dark brand-tinted
   highlight. (Normal cards already use semantic tokens and flip on their own.) */
[data-theme="dark"] .plan-card--popular[b-lj0kzpsmde] {
    --feature-check-bg: var(--brand-800);
    --feature-check-fg: var(--brand-300);
    background: var(--brand-950);
    border-color: var(--brand-700);
}
[data-theme="dark"] .plan-card--popular .plan-card__name[b-lj0kzpsmde] { color: var(--brand-300); }

.plan-card__head[b-lj0kzpsmde] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-1);
    min-height: 1.5rem;
}

.plan-card__name[b-lj0kzpsmde] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.plan-card--popular .plan-card__name[b-lj0kzpsmde] {
    color: var(--brand-700);
}

.plan-card__tagline[b-lj0kzpsmde] {
    margin: 0 0 var(--spacing-4);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-tertiary);
    min-height: 2.6em;
}

/* Price block — the visual hero of the card. */
.plan-price[b-lj0kzpsmde] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-1);
}

.plan-price__amount[b-lj0kzpsmde] {
    font-family: var(--font-display, inherit);
    font-size: var(--font-size-display-sm);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.plan-price__period[b-lj0kzpsmde] {
    font-size: var(--text-sm);
    color: var(--text-quaternary);
    font-weight: 500;
}

.plan-price__sub[b-lj0kzpsmde] {
    margin: var(--spacing-1) 0 var(--spacing-4);
    min-height: 1.125rem;
    font-size: var(--text-xs);
    color: var(--text-quaternary);
}

/* Profile pill — bordered row that anchors the "Up to N kid profiles" line. */
.plan-card__profiles[b-lj0kzpsmde] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

/* Popular card lifts the pill onto white so the brand tint behind it reads
   clean rather than muddy. */
.plan-card--popular .plan-card__profiles[b-lj0kzpsmde] {
    background: var(--bg-primary);
}

.plan-card__profiles-icon[b-lj0kzpsmde] {
    flex: none;
    color: var(--text-tertiary);
}

/* ── Feature list ─────────────────────────────────────────────────────────── */
.plan-features[b-lj0kzpsmde] {
    list-style: none;
    margin: 0 0 var(--spacing-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1 1 auto;
}

.plan-features__item[b-lj0kzpsmde] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

.plan-features__check[b-lj0kzpsmde] {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--feature-check-bg);
    color: var(--feature-check-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* Full-width CTA inside the card footer. Button has no Full param, so the
   flex wrapper stretches the underlying .btn. */
.plan-cta[b-lj0kzpsmde] {
    display: flex;
}

.plan-cta[b-lj0kzpsmde]  .btn {
    flex: 1;
}

/* ── Footnote: cancel policy ─────────────────────────────────────────────────
   Icon + text sit together flush to the left edge of the box. */
.plans-footnote[b-lj0kzpsmde] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
}

.plans-footnote__icon[b-lj0kzpsmde] {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plans-footnote__body[b-lj0kzpsmde] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-tertiary);
}

.plans-footnote__body strong[b-lj0kzpsmde] {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.25rem;
}

.plans-footnote__body a[b-lj0kzpsmde] {
    color: var(--text-brand-primary);
    font-weight: 500;
    text-decoration: none;
}

.plans-footnote__body a:hover[b-lj0kzpsmde] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/ParentWalletPage.razor.rz.scp.css */
/* ParentWalletPage — exact port of the Claude Design "Wallet" mockup.
   Design tokens declared on `.wl` (verbatim from the design's colors_and_type.css);
   sizing uses the design's literal px values. Fonts inherit the portal. No own page
   padding — the portal `.content` frames it (matches the Plans/Checkout pages). */

[data-theme="dark"] .wl[b-phy6ef7l9t] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-50: var(--gray-900); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-700: var(--warning-300);
    --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4); --shadow-md: 0 4px 8px -2px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
}

.wl[b-phy6ef7l9t] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-300: #D5D7DA;
    --brand-25: #F0F4FF; --brand-50: #E1E8FD; --brand-100: #C5D0FA; --brand-200: #A2B4F4;
    --brand-500: #3F5FD6; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-500: #17B26A; --success-600: #079455; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-700: #B54708;
    --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    --shadow-md: 0 2px 4px -2px rgba(10,13,18,.06), 0 4px 8px -2px rgba(10,13,18,.10);

    color: var(--fg1);
}

/* icons */
.wl-ico[b-phy6ef7l9t] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wl-ico--lg[b-phy6ef7l9t] { width: 28px; height: 28px; stroke-width: 1.75; }
.wl-ico--sm[b-phy6ef7l9t] { width: 13px; height: 13px; }
.wl-ico--sep[b-phy6ef7l9t] { color: var(--fg5); }

/* breadcrumb */
.wl-crumb[b-phy6ef7l9t] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 18px; }
.wl-crumb a[b-phy6ef7l9t] { color: var(--fg4); text-decoration: none; }
.wl-crumb__current[b-phy6ef7l9t] { color: var(--fg-brand); font-weight: 500; }

/* page header */
.wl-pagehead[b-phy6ef7l9t] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.wl-pagehead__title[b-phy6ef7l9t] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.wl-pagehead__sub[b-phy6ef7l9t] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }
.wl-pagehead__back[b-phy6ef7l9t] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg3); text-decoration: none; }
.wl-pagehead__back:hover[b-phy6ef7l9t] { color: var(--fg1); }

/* balance hero */
.wl-hero[b-phy6ef7l9t] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.wl-hero__arcs[b-phy6ef7l9t] { position: absolute; right: -60px; top: -60px; opacity: .18; }
.wl-hero__row[b-phy6ef7l9t] { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wl-hero__left[b-phy6ef7l9t] { flex: 1; min-width: 260px; }
.wl-hero__label[b-phy6ef7l9t] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; opacity: .85; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.wl-hero__amount[b-phy6ef7l9t] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.wl-hero__num[b-phy6ef7l9t] { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.wl-hero__unit[b-phy6ef7l9t] { font-size: 18px; font-weight: 500; opacity: .85; }
.wl-hero__sub[b-phy6ef7l9t] { font-size: 13px; opacity: .85; }
.wl-hero__actions[b-phy6ef7l9t] { display: flex; gap: 10px; flex: none; }

.wl-hero__btn[b-phy6ef7l9t] {
    height: 44px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
    font: inherit;
}

.wl-hero__btn--solid[b-phy6ef7l9t] { padding: 0 20px; background: var(--fg-white); color: var(--brand-800); box-shadow: var(--shadow-sm); }
.wl-hero__btn--solid:hover[b-phy6ef7l9t] { color: var(--brand-900); }
.wl-hero__btn--ghost[b-phy6ef7l9t] { padding: 0 18px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.wl-hero__btn--ghost:disabled[b-phy6ef7l9t] { opacity: .7; cursor: not-allowed; }

/* stats */
.wl-stats[b-phy6ef7l9t] { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.wl-stat[b-phy6ef7l9t] { flex: 1; min-width: 180px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; padding: 14px 16px; }
.wl-stat__k[b-phy6ef7l9t] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.wl-stat__v[b-phy6ef7l9t] { font-size: 20px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 26px; }
.wl-stat__v--ok[b-phy6ef7l9t] { color: var(--success-700); }
.wl-stat__v--err[b-phy6ef7l9t] { color: var(--error-700); }
.wl-stat__sub[b-phy6ef7l9t] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.wl-stat__sub--muted[b-phy6ef7l9t] { color: var(--fg5); }

/* card chrome */
.wl-card[b-phy6ef7l9t] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 24px; margin-bottom: 24px; }
#wl-topup[b-phy6ef7l9t] { scroll-margin-top: 16px; }
.wl-card:last-child[b-phy6ef7l9t] { margin-bottom: 0; }
.wl-card__head[b-phy6ef7l9t] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.wl-card__title[b-phy6ef7l9t] { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.wl-card__lead[b-phy6ef7l9t] { margin: 0 0 20px; font-size: 13px; color: var(--fg3); }
.wl-card__lead--muted[b-phy6ef7l9t] { color: var(--fg4); margin-bottom: 16px; }
.wl-hint[b-phy6ef7l9t] { font-size: 12px; color: var(--fg4); display: inline-flex; align-items: center; gap: 6px; }
.wl-empty-note[b-phy6ef7l9t] { font-size: 13px; color: var(--fg4); margin: 0 0 24px; }

/* top-up two-column */
.wl-topup[b-phy6ef7l9t] { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 880px) { .wl-topup[b-phy6ef7l9t] { grid-template-columns: 1fr; } }

.wl-steplabel[b-phy6ef7l9t] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wl-stepnum[b-phy6ef7l9t] { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wl-steptext[b-phy6ef7l9t] { font-size: 13px; font-weight: 600; color: var(--fg1); }

/* shared radio */
.wl-radio[b-phy6ef7l9t] { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 3px; border: 1.5px solid var(--border1); background: var(--bg-primary); transition: all 150ms; }
.wl-radio--on[b-phy6ef7l9t] { border: 5px solid var(--brand-600); }

/* bundles */
.wl-bundles[b-phy6ef7l9t] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
@media (max-width: 560px) { .wl-bundles[b-phy6ef7l9t] { grid-template-columns: 1fr; } }

.wl-bundle[b-phy6ef7l9t] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms, box-shadow 150ms;
    font: inherit;
    color: inherit;
}

.wl-bundle:hover:not(:disabled)[b-phy6ef7l9t] { border-color: var(--brand-200); }
.wl-bundle--sel[b-phy6ef7l9t] { border: 2px solid var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.wl-bundle:disabled[b-phy6ef7l9t] { opacity: .6; cursor: not-allowed; }
.wl-bundle__tag[b-phy6ef7l9t] { position: absolute; top: -9px; right: 12px; }
.wl-bundle__body[b-phy6ef7l9t] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-bundle__line[b-phy6ef7l9t] { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.wl-bundle__num[b-phy6ef7l9t] { font-size: 20px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; }
.wl-bundle__unit[b-phy6ef7l9t] { font-size: 12px; font-weight: 500; color: var(--fg3); }
.wl-bundle__bonus[b-phy6ef7l9t] { font-size: 12px; font-weight: 600; color: var(--success-700); margin-left: 4px; }
.wl-bundle__pay[b-phy6ef7l9t] { font-size: 13px; color: var(--fg2); font-weight: 500; margin-bottom: 6px; }
.wl-bundle__blurb[b-phy6ef7l9t] { font-size: 12px; color: var(--fg4); line-height: 16px; }

/* badges */
.wl-badge[b-phy6ef7l9t] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 9999px; }
.wl-badge--brand[b-phy6ef7l9t] { background: var(--brand-50); color: var(--brand-700); }
.wl-badge--ok[b-phy6ef7l9t] { background: var(--success-50); color: var(--success-700); }
.wl-badge--warn[b-phy6ef7l9t] { background: var(--warning-50); color: var(--warning-700); }
.wl-badge--ok[b-phy6ef7l9t]::before,
.wl-badge--warn[b-phy6ef7l9t]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* methods */
.wl-methods[b-phy6ef7l9t] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .wl-methods[b-phy6ef7l9t] { grid-template-columns: 1fr; } }

.wl-method[b-phy6ef7l9t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: var(--bg-primary);
    box-shadow: var(--shadow-xs);
    transition: all 150ms;
    text-align: left;
    font: inherit;
    color: inherit;
}

.wl-method:hover:not(:disabled)[b-phy6ef7l9t] { border-color: var(--brand-200); }
.wl-method--sel[b-phy6ef7l9t] { border: 2px solid var(--brand-500); background: var(--brand-25); box-shadow: 0 0 0 4px var(--brand-50); }
.wl-method--off[b-phy6ef7l9t] { opacity: .55; cursor: not-allowed; }
.wl-method:disabled[b-phy6ef7l9t] { cursor: not-allowed; }
.wl-method .wl-radio[b-phy6ef7l9t] { width: 16px; height: 16px; margin-top: 0; }

.wl-glyph[b-phy6ef7l9t] { width: 28px; height: 28px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; flex: none; }
.wl-method__text[b-phy6ef7l9t] { display: flex; flex-direction: column; min-width: 0; }
.wl-method__label[b-phy6ef7l9t] { font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 18px; }
.wl-method__hint[b-phy6ef7l9t] { font-size: 11px; color: var(--fg4); line-height: 14px; }

/* QR panel */
.wl-qr[b-phy6ef7l9t] {
    border-radius: 14px;
    border: 1px dashed var(--border1);
    background: var(--gray-50);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 280px;
}

.wl-qr--ready[b-phy6ef7l9t] { border: 1px solid var(--brand-200); background: var(--brand-25); }
.wl-qr__placeholder[b-phy6ef7l9t] { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fg4); }
.wl-qr__img[b-phy6ef7l9t] { width: 172px; height: 172px; background: var(--fg-white); border-radius: 12px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; padding: 12px; }
.wl-qr__img img[b-phy6ef7l9t] { width: 144px; height: 144px; }
.wl-qr__title[b-phy6ef7l9t] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 2px; }
.wl-qr__title-muted[b-phy6ef7l9t] { font-size: 14px; font-weight: 600; color: var(--fg2); }
.wl-qr__hint[b-phy6ef7l9t] { font-size: 12px; color: var(--fg3); line-height: 18px; max-width: 220px; }
.wl-qr__ok[b-phy6ef7l9t] { width: 48px; height: 48px; border-radius: 50%; background: var(--success-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

.wl-spinner[b-phy6ef7l9t] { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--brand-100); border-top-color: var(--brand-600); animation: wl-spin-b-phy6ef7l9t .8s linear infinite; }
@keyframes wl-spin-b-phy6ef7l9t { to { transform: rotate(360deg); } }

/* receipt summary */
.wl-receipt[b-phy6ef7l9t] { margin-top: 14px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 12px; }
.wl-receipt__row[b-phy6ef7l9t] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wl-receipt__row--bonus[b-phy6ef7l9t] { margin-bottom: 0; padding-top: 8px; border-top: 1px dashed var(--border2); }
.wl-receipt__k[b-phy6ef7l9t] { font-size: 12px; color: var(--fg3); }
.wl-receipt__v[b-phy6ef7l9t] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.wl-receipt__k-ok[b-phy6ef7l9t] { font-size: 12px; color: var(--success-700); font-weight: 500; }
.wl-receipt__v-ok[b-phy6ef7l9t] { font-size: 13px; font-weight: 600; color: var(--success-700); }

/* transaction header actions */
.wl-tx-actions[b-phy6ef7l9t] { display: flex; gap: 8px; }
.wl-pill[b-phy6ef7l9t] { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border1); background: var(--bg-primary); font-size: 13px; color: var(--fg2); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.wl-pill:hover:not(:disabled)[b-phy6ef7l9t] { background: var(--gray-50); }
.wl-pill:disabled[b-phy6ef7l9t] { opacity: .7; cursor: default; }
.wl-ico--flip[b-phy6ef7l9t] { transform: rotate(180deg); }

/* filter/sort dropdown */
.wl-filter[b-phy6ef7l9t] { position: relative; }
.wl-menu-backdrop[b-phy6ef7l9t] { position: fixed; inset: 0; z-index: 40; }
.wl-menu[b-phy6ef7l9t] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 184px;
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.wl-menu__label[b-phy6ef7l9t] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px 2px; }
.wl-menu__item[b-phy6ef7l9t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: none;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--fg1);
    cursor: pointer;
    text-align: left;
}
.wl-menu__item:hover[b-phy6ef7l9t] { background: var(--gray-50); }
.wl-menu__item.is-active[b-phy6ef7l9t] { color: var(--fg-brand); font-weight: 600; }
.wl-menu__item.is-active[b-phy6ef7l9t]::after { content: "✓"; }
.wl-menu__sep[b-phy6ef7l9t] { height: 1px; background: var(--border2); margin: 6px 0; }

/* show-more */
.wl-tx-more[b-phy6ef7l9t] { text-align: center; margin-top: 14px; }
.wl-linkbtn[b-phy6ef7l9t] { background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-brand); padding: 4px 8px; }
.wl-linkbtn:hover[b-phy6ef7l9t] { color: var(--brand-700); }

/* transaction empty + list */
.wl-tx-empty[b-phy6ef7l9t] { padding: 40px 24px; text-align: center; }
.wl-tx-empty__icon[b-phy6ef7l9t] { width: 48px; height: 48px; border-radius: 12px; background: var(--gray-50); border: 1px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--fg4); }
.wl-tx-empty__title[b-phy6ef7l9t] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.wl-tx-empty__text[b-phy6ef7l9t] { font-size: 13px; color: var(--fg4); }

.wl-tx[b-phy6ef7l9t] { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border2); }
.wl-tx:last-child[b-phy6ef7l9t] { border-bottom: none; }
.wl-tx__icon[b-phy6ef7l9t] { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--gray-50); color: var(--fg3); display: flex; align-items: center; justify-content: center; }
.wl-tx__icon--credit[b-phy6ef7l9t] { background: var(--success-50); color: var(--success-600); }
.wl-tx__body[b-phy6ef7l9t] { flex: 1; min-width: 0; }
.wl-tx__label[b-phy6ef7l9t] { font-size: 14px; font-weight: 500; color: var(--fg1); }
.wl-tx__date[b-phy6ef7l9t] { font-size: 12px; color: var(--fg4); }
.wl-tx__amt[b-phy6ef7l9t] { text-align: right; min-width: 96px; }
.wl-tx__pts[b-phy6ef7l9t] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.wl-tx__pts--credit[b-phy6ef7l9t] { color: var(--success-700); }
.wl-tx__ks[b-phy6ef7l9t] { font-size: 11px; color: var(--fg4); }

/* small buttons */
.wl-btn[b-phy6ef7l9t] { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font: inherit; }
.wl-btn--sm[b-phy6ef7l9t] { height: 34px; padding: 0 12px; font-size: 13px; }
.wl-btn--pri[b-phy6ef7l9t] { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.wl-btn--pri:hover[b-phy6ef7l9t] { background: var(--brand-700); }
.wl-btn--sec[b-phy6ef7l9t] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg1); }
.wl-btn--sec:hover[b-phy6ef7l9t] { background: var(--gray-50); }
/* /Components/Pages/Admin/PointPackageListPage.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Point Package Cards
   -------------------
   Pricing-style grid for the Point Packages admin page.
   No existing layout primitive fits — cards need per-item framing
   (icon, points, price, banner) that `layout-stat-cards` doesn't
   handle. Kept scoped; tokens only, no raw hex.
   ───────────────────────────────────────────────────────────── */

.point-package-grid[b-k2at9n5z88] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-4);
}

.point-package-card[b-k2at9n5z88] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.point-package-card:hover[b-k2at9n5z88] {
    box-shadow: var(--shadow-sm);
}

.point-package-card--popular[b-k2at9n5z88] {
    border-color: var(--brand-solid, var(--brand-600));
    box-shadow: var(--shadow-sm);
}

.point-package-card__banner[b-k2at9n5z88] {
    background: var(--brand-solid, var(--brand-600));
    color: var(--text-white, #fff);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--spacing-1) 0;
}

.point-package-card__body[b-k2at9n5z88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-6) var(--spacing-5);
    gap: var(--spacing-1);
    flex: 1;
}

.point-package-card__icon[b-k2at9n5z88] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    background: var(--brand-50);
    color: var(--brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-3);
}

.point-package-card__icon svg[b-k2at9n5z88] {
    width: 1.75rem;
    height: 1.75rem;
}

.point-package-card__name[b-k2at9n5z88] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    margin: 0;
}

.point-package-card__points[b-k2at9n5z88] {
    font-size: var(--text-4xl, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: var(--spacing-1) 0 0;
    line-height: 1;
}

.point-package-card__points-label[b-k2at9n5z88] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin: 0;
}

.point-package-card__bonus[b-k2at9n5z88] {
    margin-top: var(--spacing-2);
}

.point-package-card__price[b-k2at9n5z88] {
    width: 100%;
    border-top: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
    padding: var(--spacing-3) 0;
    margin: var(--spacing-4) 0;
}

.point-package-card__price-value[b-k2at9n5z88] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.point-package-card__price-unit[b-k2at9n5z88] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: var(--spacing-1) 0 0;
}

.point-package-card__description[b-k2at9n5z88] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 var(--spacing-4);
    flex: 1;
}

.point-package-card__actions[b-k2at9n5z88] {
    display: flex;
    gap: var(--spacing-2);
    width: 100%;
}

.point-package-card__actions[b-k2at9n5z88]  .btn {
    flex: 1;
}
/* /Components/Pages/Admin/PreorderCampaignFormPage.razor.rz.scp.css */
/* SectionFooter sits inside layout-form-with-guide > layout-body (a nested
   grid column), not the page-level layout-body. The global rule in layouts.css
   gives .layout-body > .section-footer a -32px left margin + 64px extra width
   to span past the page-shell's 32px padding — that's correct at page level
   but misaligns the footer with the form column above when nested.

   ::deep is required because SectionFooter is a child component — its rendered
   .section-footer div lives outside this page's scoped-CSS attribute scope.

   These overrides pin the footer to the column's edges and add a single
   top border that aligns with the form sections. */
.layout-form-with-guide .layout-body[b-7993zc4tku]  > .section-footer {
    position: static;
    width: auto;
    margin-left: 0;
    padding: var(--spacing-4) 0 0 0;
    border-top: 1px solid var(--border-secondary);
    background: transparent;
}
/* /Components/Pages/Admin/PriceChangeRequestQueuePage.razor.rz.scp.css */
.review-reason[b-a0bppkbiy3] {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border-left: 3px solid var(--border-secondary);
    background: var(--bg-secondary);
    font-style: italic;
    color: var(--text-secondary);
    border-radius: 2px;
}

.review-reason--muted[b-a0bppkbiy3] {
    color: var(--text-tertiary);
    font-style: normal;
}

.price-timeline[b-a0bppkbiy3] {
    padding: var(--spacing-3) var(--spacing-4);
}

.reject-panel[b-a0bppkbiy3] {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--error-200, var(--border-secondary));
    background: var(--error-50, var(--bg-secondary));
    border-radius: var(--radius-md);
}
/* /Components/Pages/Admin/ReviewTemplateListPage.razor.rz.scp.css */
/*
 * Stage-selector cards that act as a segmented tab control.
 * MetricItem (simple-icon variant) supplies the visual chrome; this button
 * wrapper adds click/keyboard semantics and an active-state accent. No other
 * stage-tab pattern exists in the design system yet, and Button/Tabs don't
 * fit the stat-card shape.
 */

.review-stage-tab[b-qxbgb7xhvp] {
    /* Button reset so only the nested MetricItem renders visually. */
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-xl);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* Active stage: brand-tinted fill + 2px outer ring via box-shadow so neighbours
   don't reflow on toggle. Border stays at its default 1px so the edge is crisp.
   `::deep` lets the scoped selector pierce into the MetricItem root (.metric-item)
   rendered by the child component. */
.review-stage-tab--active[b-qxbgb7xhvp]  .metric-item {
    background-color: var(--bg-brand-primary);
    box-shadow: 0 0 0 2px var(--border-brand-solid);
}

/* Keyboard focus: outline (not box-shadow) so it stacks cleanly on top of the
   active ring without either visually cancelling the other. */
.review-stage-tab:focus-visible[b-qxbgb7xhvp] {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/SchoolChangePlanPage.razor.rz.scp.css */
/* Reuse the tier card pattern from ParentSubscriptionPlansPage */
/* 3-column grid for tier cards */
.tier-cards[b-a1oflb15hx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

@media (max-width: 768px) {
    .tier-cards[b-a1oflb15hx] {
        grid-template-columns: 1fr;
    }
}

.tier-card[b-a1oflb15hx] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.tier-card--current[b-a1oflb15hx] {
    border-color: var(--border-brand);
    background: var(--bg-brand-secondary);
}

.tier-card__name[b-a1oflb15hx] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tier-card__price[b-a1oflb15hx] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-brand-primary);
    margin: 0;
}

.tier-card__features[b-a1oflb15hx] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 1;
}

.tier-card__features li[b-a1oflb15hx] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding-left: var(--spacing-4);
    position: relative;
}

.tier-card__features li[b-a1oflb15hx]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--text-brand-primary);
    font-weight: 600;
}

/* Plan action buttons area */
.tier-card__actions[b-a1oflb15hx] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Clickable plan option replacing the long button text */
.plan-option[b-a1oflb15hx] {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.plan-option:hover[b-a1oflb15hx] {
    border-color: var(--border-brand);
    background: var(--bg-brand-secondary);
}

.plan-option__header[b-a1oflb15hx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-option__period[b-a1oflb15hx] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.plan-option__details[b-a1oflb15hx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.plan-option__price[b-a1oflb15hx] {
    font-weight: 600;
    color: var(--text-brand-primary);
}
/* /Components/Pages/Admin/SchoolDashboardPage.razor.rz.scp.css */
/* ─── Date range segmented control (in page header actions) ──────── */
.dashboard-range-toggle[b-ar7dmb4849] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
}

.dashboard-range-toggle__item[b-ar7dmb4849] {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms, color 150ms, box-shadow 150ms;
}

.dashboard-range-toggle__item:hover[b-ar7dmb4849] {
    color: var(--text-primary);
}

.dashboard-range-toggle__item--active[b-ar7dmb4849] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

/* ─── Grid row wrapper ─────────────────────────────────────────────── */
.dashboard-grid-2[b-ar7dmb4849] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media (max-width: 960px) {
    .dashboard-grid-2[b-ar7dmb4849] {
        grid-template-columns: 1fr;
    }
}

/* ─── Card shell ───────────────────────────────────────────────────── */
.dashboard-card[b-ar7dmb4849] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.dashboard-card__head[b-ar7dmb4849] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.dashboard-card__head--row[b-ar7dmb4849] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card__title[b-ar7dmb4849] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-body);
}

.dashboard-card__subtitle[b-ar7dmb4849] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
}

.dashboard-card__body[b-ar7dmb4849] {
    padding: 16px 20px 20px;
}

/* Variant: no divider between head and body (used when rows handle their own dividers) */
.dashboard-card--flush .dashboard-card__head[b-ar7dmb4849] {
    /* keep the head divider — rows below handle their own */
}

/* ─── Grade comparison row ─────────────────────────────────────────── */
.dashboard-grade-row[b-ar7dmb4849] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-tertiary, var(--border-secondary));
}

.dashboard-grade-row--last[b-ar7dmb4849] {
    border-bottom: none;
}

.dashboard-grade-row__head[b-ar7dmb4849] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dashboard-grade-row__name[b-ar7dmb4849] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-grade-row__count[b-ar7dmb4849] {
    font-size: 12px;
    color: var(--text-quaternary, var(--text-tertiary));
    margin-left: 8px;
}

.dashboard-grade-row__top[b-ar7dmb4849] {
    font-size: 12px;
    color: var(--text-quaternary, var(--text-tertiary));
}

.dashboard-grade-row__top strong[b-ar7dmb4849] {
    font-weight: 600;
    color: var(--text-secondary);
}

.dashboard-grade-row__stats[b-ar7dmb4849] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dashboard-grade-row__stat-head[b-ar7dmb4849] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.dashboard-grade-row__stat-head span[b-ar7dmb4849] {
    font-size: 11px;
    color: var(--text-quaternary, var(--text-tertiary));
}

.dashboard-grade-row__stat-head strong[b-ar7dmb4849] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-body);
}

/* ─── Top Readers rows ─────────────────────────────────────────────── */
.dashboard-reader-row[b-ar7dmb4849] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-tertiary, var(--border-secondary));
}

.dashboard-reader-row--last[b-ar7dmb4849] {
    border-bottom: none;
    padding-bottom: 16px;
}

.dashboard-reader-row__rank[b-ar7dmb4849] {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-quaternary, var(--text-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.dashboard-reader-row__rank--top[b-ar7dmb4849] {
    background: var(--brand-50);
    color: var(--brand-700);
}

.dashboard-reader-row__name[b-ar7dmb4849] {
    flex: 1;
    min-width: 0;
}

.dashboard-reader-row__name-primary[b-ar7dmb4849] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-reader-row__name-secondary[b-ar7dmb4849] {
    font-size: 12px;
    color: var(--text-quaternary, var(--text-tertiary));
}

.dashboard-reader-row__stats[b-ar7dmb4849] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex: none;
}

.dashboard-reader-row__books[b-ar7dmb4849] {
    font-weight: 600;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.dashboard-reader-row__minutes[b-ar7dmb4849] {
    color: var(--text-quaternary, var(--text-tertiary));
    width: 50px;
    text-align: right;
}

.dashboard-reader-row__streak[b-ar7dmb4849] {
    color: var(--text-quaternary, var(--text-tertiary));
    font-weight: 500;
    width: 36px;
    text-align: right;
}

.dashboard-reader-row__streak--hot[b-ar7dmb4849] {
    color: var(--success-600);
}

.dashboard-reader-row__streak span[b-ar7dmb4849] {
    font-size: 11px;
    margin-left: 1px;
}

/* ─── Popular Books rows ──────────────────────────────────────────── */
.dashboard-book-row[b-ar7dmb4849] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-tertiary, var(--border-secondary));
}

.dashboard-book-row--last[b-ar7dmb4849] {
    border-bottom: none;
    padding-bottom: 18px;
}

.dashboard-book-row__cover[b-ar7dmb4849] {
    flex: none;
    width: 36px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, var(--bg-secondary));
}

.dashboard-book-row__meta[b-ar7dmb4849] {
    flex: 1;
    min-width: 0;
}

.dashboard-book-row__title[b-ar7dmb4849] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-book-row__author[b-ar7dmb4849] {
    font-size: 12px;
    color: var(--text-quaternary, var(--text-tertiary));
}

.dashboard-book-row__reads[b-ar7dmb4849] {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* ─── Engagement insights tiles ────────────────────────────────────── */
.dashboard-insights[b-ar7dmb4849] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 720px) {
    .dashboard-insights[b-ar7dmb4849] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-insight[b-ar7dmb4849] {
    padding: 20px 24px;
    border-right: 1px solid var(--border-secondary);
}

.dashboard-insight--last[b-ar7dmb4849],
.dashboard-insight:last-child[b-ar7dmb4849] {
    border-right: none;
}

.dashboard-insight__value[b-ar7dmb4849] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--font-display, var(--font-body));
}

.dashboard-insight__label[b-ar7dmb4849] {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-insight__desc[b-ar7dmb4849] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-quaternary, var(--text-tertiary));
}

.dashboard-insight__trend[b-ar7dmb4849] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* ─── Empty state (within cards) ──────────────────────────────────── */
.dashboard-empty[b-ar7dmb4849] {
    padding: 24px 4px;
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
}

.dashboard-empty--padded[b-ar7dmb4849] {
    padding: 32px 24px;
}
/* /Components/Pages/Admin/SchoolGroupListPage.razor.rz.scp.css */
/* ─── Groups grid ───────────────────────────────────────────────
   Two-column responsive card grid. Reference: School Admin Portal
   design. Primary visuals (title, body, footer) come from InfoPanel
   and ComponentCard; this file only contributes the grid shell
   and the top accent stripe that differentiates each group card. */

.school-groups__grid[b-twj19s5qu8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

@media (max-width: 960px) {
    .school-groups__grid[b-twj19s5qu8] {
        grid-template-columns: 1fr;
    }
}

/* ─── Accent stripe ────────────────────────────────────────────
   The InfoPanel itself is unstyled here — we add a 4px top bar via
   a ::before on the wrapper so the card chrome stays owned by
   InfoPanel's CSS. Accent slot is driven by [data-accent="1..6"]. */
.school-groups__card[b-twj19s5qu8] {
    position: relative;
    padding-top: 4px;
    border-radius: var(--radius-xl, 12px);
    background: var(--brand-500);
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.school-groups__card:hover[b-twj19s5qu8] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.school-groups__card[data-accent="2"][b-twj19s5qu8] { background: var(--brand-600); }
.school-groups__card[data-accent="3"][b-twj19s5qu8] { background: var(--brand-700); }
.school-groups__card[data-accent="4"][b-twj19s5qu8] { background: var(--success-500); }
.school-groups__card[data-accent="5"][b-twj19s5qu8] { background: var(--warning-500); }
.school-groups__card[data-accent="6"][b-twj19s5qu8] { background: var(--error-500); }

/* InfoPanel sits inside the wrapper. The 4px of wrapper padding-top
   becomes the colored stripe; the InfoPanel fills the rest. */
.school-groups__card[b-twj19s5qu8]  .info-panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: 100%;
}

/* ─── Title slot ───────────────────────────────────────────────
   InfoPanel TitleContent is used to stack name + description, which
   the default Title prop doesn't support. */
.school-groups__card-heading[b-twj19s5qu8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.school-groups__card-title[b-twj19s5qu8] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.school-groups__card-subtitle[b-twj19s5qu8] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* ─── CTA in footer ───────────────────────────────────────────── */
.school-groups__card-cta[b-twj19s5qu8] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-brand-secondary, var(--primary-600));
    text-decoration: none;
}

.school-groups__card-cta:hover[b-twj19s5qu8] {
    text-decoration: underline;
}

/* ─── Ghost "Create Group" tile ───────────────────────────────── */
.school-groups__ghost[b-twj19s5qu8] {
    cursor: pointer;
}

.school-groups__ghost[b-twj19s5qu8]  .component-card {
    height: 100%;
}
/* /Components/Pages/Admin/SchoolMemberProgressPage.razor.rz.scp.css */
/* Student progress page — scoped styles
   Structure comes from layout-body + layout-stat-cards + InfoCard +
   InfoPanel + SectionHeader + DataTable. Identity-hero avatar uses the
   Avatar UI component (Size="2xl"); this file contributes:
     • the split grid for (chart | breakdown)
     • the reading-breakdown row layout
     • book-cell composition inside the DataTable */

.student-progress__hero-badges[b-hndkmll2d6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

/* ─── Split row: chart + breakdown ────────────────────────────── */
.student-progress__split[b-hndkmll2d6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media (max-width: 960px) {
    .student-progress__split[b-hndkmll2d6] {
        grid-template-columns: 1fr;
    }
}

/* ─── Reading Activity heatmap ────────────────────────────────
   4 weeks × 7 days grid. Each row is a CSS grid with a fixed 68px
   label column and 7 equal cells. Colors come from the brand palette;
   data-intensity="0..3" drives the background.
   width:100% overrides InfoPanel's .info-panel-body flex-start default,
   which would otherwise shrink this wrapper to its intrinsic width. */
.student-progress__heatmap[b-hndkmll2d6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    width: 100%;
}

.student-progress__heatmap-header[b-hndkmll2d6],
.student-progress__heatmap-row[b-hndkmll2d6] {
    display: grid;
    grid-template-columns: 68px repeat(7, 1fr);
    gap: var(--spacing-1);
    align-items: center;
}

.student-progress__heatmap-label[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
}

.student-progress__heatmap-day[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    color: var(--text-quaternary);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Fixed height instead of aspect-ratio 1/1 — the square ratio made cells
   stretch to ~60-80px tall in a wide panel. A fixed 22px height keeps the
   panel vertically compact while the cells still grow horizontally to fill
   the 7 columns. */
.student-progress__heatmap-cell[b-hndkmll2d6] {
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--gray-100, var(--bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
    transition: transform 120ms ease;
}

.student-progress__heatmap-cell:hover[b-hndkmll2d6] {
    transform: scale(1.05);
}

.student-progress__heatmap-cell[data-intensity="0"][b-hndkmll2d6] { background: var(--gray-100, var(--bg-secondary)); }
.student-progress__heatmap-cell[data-intensity="1"][b-hndkmll2d6] { background: var(--brand-200, #DDD6FE); color: var(--brand-800, var(--text-primary)); }
.student-progress__heatmap-cell[data-intensity="2"][b-hndkmll2d6] { background: var(--brand-400, #A78BFA); color: #fff; }
.student-progress__heatmap-cell[data-intensity="3"][b-hndkmll2d6] { background: var(--brand-600, var(--primary-600)); color: #fff; }
.student-progress__heatmap-cell[data-intensity="-1"][b-hndkmll2d6] { background: transparent; }

.student-progress__heatmap-legend[b-hndkmll2d6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    justify-content: flex-end;
    margin-top: var(--spacing-2);
    font-size: 11px;
    color: var(--text-quaternary);
}

.student-progress__heatmap-legend .student-progress__heatmap-cell[b-hndkmll2d6] {
    width: 14px;
    height: 14px;
}

/* ─── Performance Overview ──────────────────────────────────────
   Padding/margins kept compact so the panel's vertical height stays
   close to the heatmap's — font sizes restored to their original
   design-system scale. */
.student-progress__perf-stats[b-hndkmll2d6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    width: 100%;
}

.student-progress__perf-tile[b-hndkmll2d6] {
    text-align: center;
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.student-progress__perf-value[b-hndkmll2d6] {
    font-size: var(--font-size-display-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    line-height: 1;
}

.student-progress__perf-value--brand[b-hndkmll2d6]   { color: var(--brand-600, var(--primary-600)); }
.student-progress__perf-value--success[b-hndkmll2d6] { color: var(--success-600); }
.student-progress__perf-value--warning[b-hndkmll2d6] { color: var(--warning-600); }

.student-progress__perf-label[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
    margin-top: var(--spacing-1);
    font-weight: var(--font-weight-semibold);
}

.student-progress__perf-sub[b-hndkmll2d6] {
    font-size: var(--font-size-text-xs);
    color: var(--text-quaternary);
    margin-top: 2px;
}

.student-progress__perf-heading[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-2);
}

/* ─── Reading by Category ──────────────────────────────────────
   Horizontal bars with a fixed name column on the left and a count
   column on the right, matching the reference design. Bar fill is
   proportional to the row's count / maxCount, so the top category
   always renders a fully-filled bar. */
.student-progress__category[b-hndkmll2d6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
}

.student-progress__category-row[b-hndkmll2d6] {
    display: grid;
    grid-template-columns: 80px 1fr 28px;
    align-items: center;
    gap: var(--spacing-3);
}

.student-progress__category-name[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    color: var(--text-secondary);
}

.student-progress__category-bar[b-hndkmll2d6] {
    height: 6px;
    background: var(--gray-100, var(--bg-secondary));
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
}

.student-progress__category-fill[b-hndkmll2d6] {
    height: 100%;
    background: var(--brand-500, var(--primary-500));
    border-radius: var(--radius-full, 9999px);
    transition: width 200ms ease;
}

.student-progress__category-count[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ─── Books section ───────────────────────────────────────────── */
.student-progress__books[b-hndkmll2d6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Book cell (cover + title) inside DataTable */
.student-progress__book-cell[b-hndkmll2d6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.student-progress__book-cover[b-hndkmll2d6] {
    width: 36px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex: none;
}

.student-progress__book-cover--placeholder[b-hndkmll2d6] {
    background: var(--bg-tertiary);
    color: var(--text-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-progress__book-cover--placeholder svg[b-hndkmll2d6] {
    width: 18px;
    height: 18px;
}

.student-progress__book-title[b-hndkmll2d6] {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.student-progress__mono[b-hndkmll2d6] {
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}
/* /Components/Pages/Admin/SchoolProfilePage.razor.rz.scp.css */
/* Scoped styles for SchoolProfilePage.
   Structure comes from layout-dashboard-split / layout-form-row /
   layout-stat-cards + InfoCard + InfoPanel + MetricItem.
   Identity-hero logo uses the Avatar UI component (Size="2xl"); this
   file only supplies:
     • the hero-badge row beneath the identity title
     • read-only field value styling inside layout-form-row
     • the adoption progress footer styling
*/

/* ─── Identity hero (InfoCard ChildContent) ──────── */
.school-profile__hero-badges[b-2a4c4gcw3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.school-profile__hero-meta[b-2a4c4gcw3h] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
}

/* ─── School info field grid ───────────────────────────────────
   The School information panel renders fields via the info-panel-field
   primitive (label above value), arranged in a 2-column info-panel-grid.
   The --full modifier spans both columns — used for Address and
   Description where the value line is longer or multi-line. */
[b-2a4c4gcw3h] .school-profile__field--full {
    grid-column: 1 / -1;
}

/* Pre-wrap long read-only values (description, address) so line breaks
   entered in edit mode are preserved when viewing. */
[b-2a4c4gcw3h] .school-profile .info-panel-field-value {
    white-space: pre-wrap;
}

/* ─── Members list ─────────────────────────────────────────────── */
.school-profile__link[b-2a4c4gcw3h] {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand, var(--brand-600));
    text-decoration: none;
}

.school-profile__link:hover[b-2a4c4gcw3h] {
    text-decoration: underline;
}

.school-profile__member-list[b-2a4c4gcw3h] {
    display: flex;
    flex-direction: column;
}

/* Name + role badge on the primary line of each member row */
[b-2a4c4gcw3h] .school-profile .info-row__primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.school-profile__member-name[b-2a4c4gcw3h] {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* ─── Sidebar adoption footer ──────────────────────────────────── */
.school-profile__adoption[b-2a4c4gcw3h] {
    width: 100%;
}

.school-profile__adoption-header[b-2a4c4gcw3h] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-text-sm);
}

.school-profile__adoption-header span[b-2a4c4gcw3h] {
    color: var(--text-tertiary);
}

.school-profile__adoption-header strong[b-2a4c4gcw3h] {
    color: var(--text-brand, var(--brand-600));
    font-weight: var(--font-weight-semibold);
}
/* /Components/Pages/Admin/SchoolStaffListPage.razor.rz.scp.css */
/* Filter row: role pills. No layout primitive covers a horizontal pill-group row. */
.staff-list__filters[b-raue7ejh5u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.staff-list__filter-group[b-raue7ejh5u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* Avatar + name stacked in the name cell. */
.staff-list__name-cell[b-raue7ejh5u] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
/* /Components/Pages/Admin/SchoolStudentListPage.razor.rz.scp.css */
/* Filter row: group pills + sort bar side-by-side.
   No layout primitive covers a horizontal pill-group + sort-label row. */
.student-list__filters[b-2tu4l4t9uq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.student-list__filter-group[b-2tu4l4t9uq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.student-list__sort-row[b-2tu4l4t9uq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
}

/* Muted label before sort pills — no typography token covers this specific use. */
.student-list__sort-label[b-2tu4l4t9uq] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Avatar + name + sub-text stacked in the student cell. */
.student-list__name-cell[b-2tu4l4t9uq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
/* /Components/Pages/Admin/SchoolWalletPage.razor.rz.scp.css */
/* SchoolWalletPage — styling twin of ParentWalletPage ("/parent/wallet").
   This is a deliberate, page-scoped port of the Claude Design "Wallet" mockup:
   the org wallet must look pixel-identical to the member wallet, and the
   design-system base components (RadioGroup tiles, MetricItem, InfoPanel) cannot
   express the bundle-card / payment-glyph / QR-panel treatment. Blazor scoped CSS
   keeps these `.wl-*` rules confined to this page (the parent page carries its own
   copy). Design tokens are declared on `.wl` (verbatim from the design's
   colors_and_type.css); sizing uses the design's literal px values. */

[data-theme="dark"] .wl[b-8to13ccaq9] {
    --fg1: var(--text-primary); --fg2: var(--text-secondary); --fg3: var(--text-tertiary); --fg4: var(--text-quaternary); --fg5: var(--fg-quinary);
    --fg-brand: var(--brand-300);
    --border1: var(--gray-700); --border2: var(--gray-800);
    --gray-50: var(--gray-900); --gray-300: var(--gray-700);
    --brand-25: var(--brand-950); --brand-50: var(--brand-950); --brand-200: var(--brand-800); --brand-700: var(--brand-300);
    --success-50: var(--success-950); --success-600: var(--success-400); --success-700: var(--success-300);
    --warning-50: var(--warning-950); --warning-700: var(--warning-300);
    --error-700: var(--error-300);
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.36), 0 1px 2px -1px rgba(0,0,0,.4); --shadow-md: 0 4px 8px -2px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
}

.wl[b-8to13ccaq9] {
    --fg1: #181D27; --fg2: #414651; --fg3: #535862; --fg4: #717680; --fg5: #A4A7AE;
    --fg-brand: #2847C4;
    --border1: #D5D7DA; --border2: #E9EAEB;
    --gray-50: #FAFAFA; --gray-300: #D5D7DA;
    --brand-25: #F0F4FF; --brand-50: #E1E8FD; --brand-100: #C5D0FA; --brand-200: #A2B4F4;
    --brand-500: #3F5FD6; --brand-600: #2847C4; --brand-700: #1A35AE;
    --success-50: #ECFDF3; --success-500: #17B26A; --success-600: #079455; --success-700: #067647;
    --warning-50: #FFFAEB; --warning-700: #B54708;
    --error-700: #B42318;
    --shadow-xs: 0 1px 2px 0 rgba(10,13,18,.05);
    --shadow-sm: 0 1px 2px -1px rgba(10,13,18,.10), 0 1px 3px 0 rgba(10,13,18,.10);
    --shadow-md: 0 2px 4px -2px rgba(10,13,18,.06), 0 4px 8px -2px rgba(10,13,18,.10);

    color: var(--fg1);
}

/* icons */
.wl-ico[b-8to13ccaq9] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wl-ico--lg[b-8to13ccaq9] { width: 28px; height: 28px; stroke-width: 1.75; }
.wl-ico--sm[b-8to13ccaq9] { width: 13px; height: 13px; }
.wl-ico--sep[b-8to13ccaq9] { color: var(--fg5); }

/* breadcrumb */
.wl-crumb[b-8to13ccaq9] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg4); margin-bottom: 18px; }
.wl-crumb a[b-8to13ccaq9] { color: var(--fg4); text-decoration: none; }
.wl-crumb__current[b-8to13ccaq9] { color: var(--fg-brand); font-weight: 500; }

/* page header */
.wl-pagehead[b-8to13ccaq9] { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.wl-pagehead__title[b-8to13ccaq9] { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg1); }
.wl-pagehead__sub[b-8to13ccaq9] { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--fg3); }
.wl-pagehead__back[b-8to13ccaq9] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--fg3); text-decoration: none; }
.wl-pagehead__back:hover[b-8to13ccaq9] { color: var(--fg1); }

/* balance hero */
.wl-hero[b-8to13ccaq9] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.wl-hero__arcs[b-8to13ccaq9] { position: absolute; right: -60px; top: -60px; opacity: .18; }
.wl-hero__row[b-8to13ccaq9] { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wl-hero__left[b-8to13ccaq9] { flex: 1; min-width: 260px; }
.wl-hero__label[b-8to13ccaq9] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; opacity: .85; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.wl-hero__amount[b-8to13ccaq9] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.wl-hero__num[b-8to13ccaq9] { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.wl-hero__unit[b-8to13ccaq9] { font-size: 18px; font-weight: 500; opacity: .85; }
.wl-hero__sub[b-8to13ccaq9] { font-size: 13px; opacity: .85; }
.wl-hero__actions[b-8to13ccaq9] { display: flex; gap: 10px; flex: none; }

.wl-hero__btn[b-8to13ccaq9] {
    height: 44px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
    font: inherit;
}

.wl-hero__btn--solid[b-8to13ccaq9] { padding: 0 20px; background: var(--fg-white); color: var(--brand-800); box-shadow: var(--shadow-sm); }
.wl-hero__btn--solid:hover[b-8to13ccaq9] { color: var(--brand-900); }
.wl-hero__btn--ghost[b-8to13ccaq9] { padding: 0 18px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.wl-hero__btn--ghost:disabled[b-8to13ccaq9] { opacity: .7; cursor: not-allowed; }

/* stats */
.wl-stats[b-8to13ccaq9] { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.wl-stat[b-8to13ccaq9] { flex: 1; min-width: 180px; background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 12px; padding: 14px 16px; }
.wl-stat__k[b-8to13ccaq9] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.wl-stat__v[b-8to13ccaq9] { font-size: 20px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; line-height: 26px; }
.wl-stat__v--ok[b-8to13ccaq9] { color: var(--success-700); }
.wl-stat__v--err[b-8to13ccaq9] { color: var(--error-700); }
.wl-stat__sub[b-8to13ccaq9] { font-size: 12px; color: var(--fg4); margin-top: 2px; }
.wl-stat__sub--muted[b-8to13ccaq9] { color: var(--fg5); }

/* org-specific: no-subscription banner (kept consistent with the wl aesthetic) */
.wl-banner[b-8to13ccaq9] { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--warning-50); border: 1px solid var(--warning-700); margin-bottom: 24px; }
.wl-banner__icon[b-8to13ccaq9] { color: var(--warning-700); margin-top: 1px; }
.wl-banner__title[b-8to13ccaq9] { font-size: 13px; font-weight: 600; color: var(--warning-700); }
.wl-banner__text[b-8to13ccaq9] { font-size: 12px; color: var(--fg3); margin-top: 2px; }

/* card chrome */
.wl-card[b-8to13ccaq9] { background: var(--bg-primary); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow-xs); padding: 24px; margin-bottom: 24px; }
#wl-topup[b-8to13ccaq9] { scroll-margin-top: 16px; }
.wl-card:last-child[b-8to13ccaq9] { margin-bottom: 0; }
.wl-card__head[b-8to13ccaq9] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.wl-card__title[b-8to13ccaq9] { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--fg1); letter-spacing: -0.01em; }
.wl-card__lead[b-8to13ccaq9] { margin: 0 0 20px; font-size: 13px; color: var(--fg3); }
.wl-card__lead--muted[b-8to13ccaq9] { color: var(--fg4); margin-bottom: 16px; }
.wl-hint[b-8to13ccaq9] { font-size: 12px; color: var(--fg4); display: inline-flex; align-items: center; gap: 6px; }
.wl-empty-note[b-8to13ccaq9] { font-size: 13px; color: var(--fg4); margin: 0 0 24px; }

/* top-up two-column */
/* 70/30 two-column. width:100% so the grid stretches inside InfoPanel's
   flex-column body (align-items:flex-start would otherwise size it to content). */
.wl-topup[b-8to13ccaq9] { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,3fr); gap: 24px; align-items: start; width: 100%; }
@media (max-width: 880px) { .wl-topup[b-8to13ccaq9] { grid-template-columns: 1fr; } }

.wl-steplabel[b-8to13ccaq9] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wl-stepnum[b-8to13ccaq9] { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wl-steptext[b-8to13ccaq9] { font-size: 13px; font-weight: 600; color: var(--fg1); }

/* shared radio */
.wl-radio[b-8to13ccaq9] { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 3px; border: 1.5px solid var(--border1); background: var(--bg-primary); transition: all 150ms; }
.wl-radio--on[b-8to13ccaq9] { border: 5px solid var(--brand-600); }

/* bundles */
.wl-bundles[b-8to13ccaq9] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
@media (max-width: 560px) { .wl-bundles[b-8to13ccaq9] { grid-template-columns: 1fr; } }

.wl-bundle[b-8to13ccaq9] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    transition: border-color 150ms, box-shadow 150ms;
    font: inherit;
    color: inherit;
}

.wl-bundle:hover:not(:disabled)[b-8to13ccaq9] { border-color: var(--brand-200); }
.wl-bundle--sel[b-8to13ccaq9] { border: 2px solid var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.wl-bundle:disabled[b-8to13ccaq9] { opacity: .6; cursor: not-allowed; }
.wl-bundle__tag[b-8to13ccaq9] { position: absolute; top: -9px; right: 12px; }
.wl-bundle__body[b-8to13ccaq9] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-bundle__line[b-8to13ccaq9] { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.wl-bundle__num[b-8to13ccaq9] { font-size: 20px; font-weight: 600; color: var(--fg1); letter-spacing: -0.02em; }
.wl-bundle__unit[b-8to13ccaq9] { font-size: 12px; font-weight: 500; color: var(--fg3); }
.wl-bundle__bonus[b-8to13ccaq9] { font-size: 12px; font-weight: 600; color: var(--success-700); margin-left: 4px; }
.wl-bundle__pay[b-8to13ccaq9] { font-size: 13px; color: var(--fg2); font-weight: 500; margin-bottom: 6px; }
.wl-bundle__blurb[b-8to13ccaq9] { font-size: 12px; color: var(--fg4); line-height: 16px; }

/* badges */
.wl-badge[b-8to13ccaq9] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 9999px; }
.wl-badge--brand[b-8to13ccaq9] { background: var(--brand-50); color: var(--brand-700); }
.wl-badge--ok[b-8to13ccaq9] { background: var(--success-50); color: var(--success-700); }
.wl-badge--warn[b-8to13ccaq9] { background: var(--warning-50); color: var(--warning-700); }
.wl-badge--ok[b-8to13ccaq9]::before,
.wl-badge--warn[b-8to13ccaq9]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* methods */
.wl-methods[b-8to13ccaq9] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .wl-methods[b-8to13ccaq9] { grid-template-columns: 1fr; } }

.wl-method[b-8to13ccaq9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: var(--bg-primary);
    box-shadow: var(--shadow-xs);
    transition: all 150ms;
    text-align: left;
    font: inherit;
    color: inherit;
}

.wl-method:hover:not(:disabled)[b-8to13ccaq9] { border-color: var(--brand-200); }
.wl-method--sel[b-8to13ccaq9] { border: 2px solid var(--brand-500); background: var(--brand-25); box-shadow: 0 0 0 4px var(--brand-50); }
.wl-method--off[b-8to13ccaq9] { opacity: .55; cursor: not-allowed; }
.wl-method:disabled[b-8to13ccaq9] { cursor: not-allowed; }
.wl-method .wl-radio[b-8to13ccaq9] { width: 16px; height: 16px; margin-top: 0; }

.wl-glyph[b-8to13ccaq9] { width: 28px; height: 28px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; flex: none; }
.wl-method__text[b-8to13ccaq9] { display: flex; flex-direction: column; min-width: 0; }
.wl-method__label[b-8to13ccaq9] { font-size: 13px; font-weight: 600; color: var(--fg1); line-height: 18px; }
.wl-method__hint[b-8to13ccaq9] { font-size: 11px; color: var(--fg4); line-height: 14px; }

/* QR panel */
.wl-qr[b-8to13ccaq9] {
    border-radius: 14px;
    border: 1px dashed var(--border1);
    background: var(--gray-50);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 280px;
}

.wl-qr--ready[b-8to13ccaq9] { border: 1px solid var(--brand-200); background: var(--brand-25); }
.wl-qr__placeholder[b-8to13ccaq9] { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fg4); }
.wl-qr__img[b-8to13ccaq9] { width: 172px; height: 172px; background: var(--fg-white); border-radius: 12px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; padding: 12px; }
.wl-qr__img img[b-8to13ccaq9] { width: 144px; height: 144px; }
.wl-qr__title[b-8to13ccaq9] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 2px; }
.wl-qr__title-muted[b-8to13ccaq9] { font-size: 14px; font-weight: 600; color: var(--fg2); }
.wl-qr__hint[b-8to13ccaq9] { font-size: 12px; color: var(--fg3); line-height: 18px; max-width: 220px; }
.wl-qr__ok[b-8to13ccaq9] { width: 48px; height: 48px; border-radius: 50%; background: var(--success-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

.wl-spinner[b-8to13ccaq9] { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--brand-100); border-top-color: var(--brand-600); animation: wl-spin-b-8to13ccaq9 .8s linear infinite; }
@keyframes wl-spin-b-8to13ccaq9 { to { transform: rotate(360deg); } }

/* receipt summary */
.wl-receipt[b-8to13ccaq9] { margin-top: 14px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--border2); border-radius: 12px; }
.wl-receipt__row[b-8to13ccaq9] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wl-receipt__row--bonus[b-8to13ccaq9] { margin-bottom: 0; padding-top: 8px; border-top: 1px dashed var(--border2); }
.wl-receipt__k[b-8to13ccaq9] { font-size: 12px; color: var(--fg3); }
.wl-receipt__v[b-8to13ccaq9] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.wl-receipt__k-ok[b-8to13ccaq9] { font-size: 12px; color: var(--success-700); font-weight: 500; }
.wl-receipt__v-ok[b-8to13ccaq9] { font-size: 13px; font-weight: 600; color: var(--success-700); }

/* transaction header actions */
.wl-tx-actions[b-8to13ccaq9] { display: flex; gap: 8px; }
.wl-pill[b-8to13ccaq9] { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border1); background: var(--bg-primary); font-size: 13px; color: var(--fg2); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.wl-pill:hover:not(:disabled)[b-8to13ccaq9] { background: var(--gray-50); }
.wl-pill:disabled[b-8to13ccaq9] { opacity: .7; cursor: default; }
.wl-ico--flip[b-8to13ccaq9] { transform: rotate(180deg); }

/* filter/sort dropdown */
.wl-filter[b-8to13ccaq9] { position: relative; }
.wl-menu-backdrop[b-8to13ccaq9] { position: fixed; inset: 0; z-index: 40; }
.wl-menu[b-8to13ccaq9] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 184px;
    background: var(--bg-primary);
    border: 1px solid var(--border2);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.wl-menu__label[b-8to13ccaq9] { font-size: 11px; font-weight: 600; color: var(--fg4); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px 2px; }
.wl-menu__item[b-8to13ccaq9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: none;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--fg1);
    cursor: pointer;
    text-align: left;
}
.wl-menu__item:hover[b-8to13ccaq9] { background: var(--gray-50); }
.wl-menu__item.is-active[b-8to13ccaq9] { color: var(--fg-brand); font-weight: 600; }
.wl-menu__item.is-active[b-8to13ccaq9]::after { content: "\2713"; }
.wl-menu__sep[b-8to13ccaq9] { height: 1px; background: var(--border2); margin: 6px 0; }

/* show-more */
.wl-tx-more[b-8to13ccaq9] { text-align: center; margin-top: 14px; }
.wl-linkbtn[b-8to13ccaq9] { background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-brand); padding: 4px 8px; }
.wl-linkbtn:hover[b-8to13ccaq9] { color: var(--brand-700); }

/* transaction empty + list */
.wl-tx-empty[b-8to13ccaq9] { padding: 40px 24px; text-align: center; }
.wl-tx-empty__icon[b-8to13ccaq9] { width: 48px; height: 48px; border-radius: 12px; background: var(--gray-50); border: 1px solid var(--border2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--fg4); }
.wl-tx-empty__title[b-8to13ccaq9] { font-size: 14px; font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.wl-tx-empty__text[b-8to13ccaq9] { font-size: 13px; color: var(--fg4); }

/* full width inside InfoPanel's flex-column body (align-items:flex-start) */
.wl-tx-list[b-8to13ccaq9] { width: 100%; }
.wl-tx[b-8to13ccaq9] { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border2); }
.wl-tx:last-child[b-8to13ccaq9] { border-bottom: none; }
.wl-tx__icon[b-8to13ccaq9] { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--gray-50); color: var(--fg3); display: flex; align-items: center; justify-content: center; }
.wl-tx__icon--credit[b-8to13ccaq9] { background: var(--success-50); color: var(--success-600); }
.wl-tx__body[b-8to13ccaq9] { flex: 1; min-width: 0; }
.wl-tx__label[b-8to13ccaq9] { font-size: 14px; font-weight: 500; color: var(--fg1); }
.wl-tx__date[b-8to13ccaq9] { font-size: 12px; color: var(--fg4); }
.wl-tx__amt[b-8to13ccaq9] { text-align: right; min-width: 96px; }
.wl-tx__pts[b-8to13ccaq9] { font-size: 14px; font-weight: 600; color: var(--fg1); }
.wl-tx__pts--credit[b-8to13ccaq9] { color: var(--success-700); }
.wl-tx__ks[b-8to13ccaq9] { font-size: 11px; color: var(--fg4); }

/* small buttons */
.wl-btn[b-8to13ccaq9] { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font: inherit; }
.wl-btn--sm[b-8to13ccaq9] { height: 34px; padding: 0 12px; font-size: 13px; }
.wl-btn--pri[b-8to13ccaq9] { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.wl-btn--pri:hover[b-8to13ccaq9] { background: var(--brand-700); }
.wl-btn--sec[b-8to13ccaq9] { background: var(--bg-primary); border-color: var(--border1); color: var(--fg1); }
.wl-btn--sec:hover[b-8to13ccaq9] { background: var(--gray-50); }
/* /Components/Pages/Admin/SeriesCategoriesPage.razor.rz.scp.css */
.series-categories__section[b-906lbmrnt5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.series-categories__section-header[b-906lbmrnt5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.series-categories__section-title[b-906lbmrnt5] {
    margin: 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-text-lg);
    line-height: var(--line-height-text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.hub-card-initial[b-906lbmrnt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-family-display);
    font-size: 3.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand-primary);
    line-height: 1;
}
/* /Components/Pages/Admin/SubmissionReaderPage.razor.rz.scp.css */
.submission-reader[b-iuj1kyapzp] {
    min-height: 100vh;
    background: var(--bg-secondary);
    margin: calc(var(--spacing-10) * -1);
    padding-bottom: 0;
    display: flex;
    align-items: stretch;
}

.submission-reader__main[b-iuj1kyapzp] {
    flex: 0 0 70%;
    min-width: 0;
    overflow-y: auto;
    max-height: 100vh;
    padding-bottom: var(--spacing-12);
}

.submission-reader__review-panel[b-iuj1kyapzp] {
    flex: 0 0 30%;
    min-width: 0;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-secondary);
    max-height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
}

.submission-reader__topbar[b-iuj1kyapzp] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-xs);
}

.submission-reader__topbar-inner[b-iuj1kyapzp] {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--spacing-4) var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.submission-reader__title[b-iuj1kyapzp] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.submission-reader__author[b-iuj1kyapzp] {
    margin-left: var(--spacing-2);
    font-weight: 400;
    color: var(--text-tertiary);
}

.submission-reader__meta[b-iuj1kyapzp] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.submission-reader__pages[b-iuj1kyapzp] {
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    /* Zoom: 40rem at 1.0x (narrower to fit inside 70% column) — driven by --reader-zoom */
    max-width: calc(40rem * var(--reader-zoom, 1));
    transition: max-width 0.15s ease-out;
}

.submission-reader__page[b-iuj1kyapzp] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Anchor scroll lands above the sticky topbar */
    scroll-margin-top: 5rem;
}

/* ── Toolbar tools ── */
.submission-reader__tools[b-iuj1kyapzp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.submission-reader__tool-group[b-iuj1kyapzp] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-tertiary);
}

.submission-reader__page-input[b-iuj1kyapzp] {
    width: 3.25rem;
    border: 0;
    background: transparent;
    padding: 4px var(--spacing-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
    border-radius: var(--radius-sm);
}

.submission-reader__page-input:focus[b-iuj1kyapzp] {
    background: var(--bg-secondary);
}

/* Hide native number-input spinner arrows */
.submission-reader__page-input[b-iuj1kyapzp]::-webkit-outer-spin-button,
.submission-reader__page-input[b-iuj1kyapzp]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.submission-reader__page-input[b-iuj1kyapzp] {
    -moz-appearance: textfield;
}

.submission-reader__count[b-iuj1kyapzp] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.submission-reader__icon-btn[b-iuj1kyapzp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.submission-reader__icon-btn:hover:not(:disabled)[b-iuj1kyapzp] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.submission-reader__icon-btn:disabled[b-iuj1kyapzp] {
    opacity: 0.4;
    cursor: not-allowed;
}

.submission-reader__zoom-label[b-iuj1kyapzp] {
    min-width: 44px;
    border: 0;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.submission-reader__zoom-label:hover[b-iuj1kyapzp] {
    color: var(--primary);
}

.submission-reader__print[b-iuj1kyapzp] {
    border: 1px solid var(--border-secondary);
    width: 32px;
    height: 32px;
}

/* ── Print stylesheet — hide all chrome, let pages flow naturally ── */
@media print {
    .submission-reader[b-iuj1kyapzp] {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .submission-reader__main[b-iuj1kyapzp] {
        flex: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .submission-reader__topbar[b-iuj1kyapzp],
    .submission-reader__review-panel[b-iuj1kyapzp],
    .submission-reader__page-actions[b-iuj1kyapzp],
    .submission-reader__state[b-iuj1kyapzp] {
        display: none !important;
    }
    .submission-reader__pages[b-iuj1kyapzp] {
        max-width: none !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .submission-reader__page[b-iuj1kyapzp] {
        box-shadow: none !important;
        border-radius: 0 !important;
        page-break-after: always;
        break-after: page;
    }
    .submission-reader__page-number[b-iuj1kyapzp] {
        border-bottom: 0 !important;
        background: transparent !important;
    }
}

.submission-reader__page-number[b-iuj1kyapzp] {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-secondary);
    background: var(--bg-secondary-subtle, var(--bg-secondary));
}

.submission-reader__page-image[b-iuj1kyapzp] {
    width: 100%;
    height: auto;
    display: block;
}

.submission-reader__page-empty[b-iuj1kyapzp] {
    padding: var(--spacing-12);
    text-align: center;
    color: var(--text-quaternary);
    font-size: 0.875rem;
}

.submission-reader__captions[b-iuj1kyapzp] {
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.submission-reader__state[b-iuj1kyapzp] {
    max-width: 32rem;
    margin: var(--spacing-12) auto;
    padding: 0 var(--spacing-6);
}

/* ═══════════════════════════════════════════ */
/*  REVIEW PANEL                                */
/* ═══════════════════════════════════════════ */

.submission-reader__panel-state[b-iuj1kyapzp] {
    padding: var(--spacing-6);
}

.submission-reader__panel-header[b-iuj1kyapzp] {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-secondary);
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 5;
}

.submission-reader__panel-title[b-iuj1kyapzp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.submission-reader__panel-status[b-iuj1kyapzp] {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.submission-reader__panel-status--saving[b-iuj1kyapzp] {
    color: var(--primary);
}

.submission-reader__panel-status--error[b-iuj1kyapzp] {
    color: var(--error-600, #d92d20);
}

.submission-reader__panel-spinner[b-iuj1kyapzp] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: submission-reader-spin-b-iuj1kyapzp 0.8s linear infinite;
}

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

.submission-reader__panel-retry[b-iuj1kyapzp] {
    margin-left: var(--spacing-1);
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

.submission-reader__panel-body[b-iuj1kyapzp] {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* ── Progress list ── */

.submission-reader__progress-list[b-iuj1kyapzp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-2);
}

.submission-reader__progress-row-wrapper[b-iuj1kyapzp] {
    display: flex;
    flex-direction: column;
}

.submission-reader__progress-row[b-iuj1kyapzp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease-out;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.submission-reader__progress-row:hover[b-iuj1kyapzp] {
    background: var(--bg-secondary);
}

.submission-reader__progress-check-btn[b-iuj1kyapzp] {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.submission-reader__progress-check-btn:disabled[b-iuj1kyapzp] {
    cursor: not-allowed;
    opacity: 0.6;
}

.submission-reader__progress-check[b-iuj1kyapzp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.submission-reader__progress-check.is-reviewed[b-iuj1kyapzp] {
    background: var(--success-50, var(--bg-secondary));
    color: var(--success-600, var(--text-primary));
}

.submission-reader__progress-label[b-iuj1kyapzp] {
    flex: 1;
    font-variant-numeric: tabular-nums;
}

.submission-reader__progress-comment-icon[b-iuj1kyapzp] {
    font-size: 12px;
}

.submission-reader__progress-chevron[b-iuj1kyapzp] {
    color: var(--text-quaternary);
    font-size: 14px;
}

.submission-reader__progress-expanded[b-iuj1kyapzp] {
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-1);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.submission-reader__expanded-actions[b-iuj1kyapzp] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
}

/* ── Panel footer (submit) ── */

.submission-reader__panel-footer[b-iuj1kyapzp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.submission-reader__panel-tip[b-iuj1kyapzp] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════ */
/*  PAGE CARD HOVER ACTIONS                     */
/* ═══════════════════════════════════════════ */

.submission-reader__page[b-iuj1kyapzp] {
    position: relative;
}

.submission-reader__page-actions[b-iuj1kyapzp] {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    display: flex;
    gap: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 2;
}

.submission-reader__page:hover .submission-reader__page-actions[b-iuj1kyapzp],
.submission-reader__page:focus-within .submission-reader__page-actions[b-iuj1kyapzp] {
    opacity: 1;
}

.submission-reader__page-action-btn[b-iuj1kyapzp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease-out;
    box-shadow: var(--shadow-xs);
}

.submission-reader__page-action-btn:hover[b-iuj1kyapzp] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.submission-reader__page-action-btn.is-active-review[b-iuj1kyapzp] {
    background: var(--success-50, #ecfdf3);
    color: var(--success-700, #027a48);
    border-color: var(--success-200, #abefc6);
}

.submission-reader__page-action-btn.is-active-comment[b-iuj1kyapzp] {
    background: var(--primary-50, var(--bg-secondary));
    color: var(--primary);
    border-color: var(--primary-200, var(--border-primary));
}

/* ─── Overall Review: submitted read-only display ─── */
.submission-reader__overall-readonly[b-iuj1kyapzp] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* /Components/Pages/Admin/SubscribersPage.razor.rz.scp.css */
/* Scoped styles for SubscribersPage. Populated incrementally in tasks 14-24. */

.subs-kpi-link[b-pqxat93ch8] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.subs-kpi-link:hover[b-pqxat93ch8] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.subs-kpi-link:focus-visible[b-pqxat93ch8] {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

.subs-filter-bar[b-pqxat93ch8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: flex-end;
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
}

.subs-filter-bar__field[b-pqxat93ch8] {
    min-width: 160px;
    flex: 1 1 160px;
}

.subs-filter-bar__actions[b-pqxat93ch8] {
    display: flex;
    gap: var(--spacing-2);
}

.subs-filter-chips[b-pqxat93ch8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.subs-slideout-section[b-pqxat93ch8] {
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-secondary);
}

.subs-slideout-section:first-child[b-pqxat93ch8] {
    border-top: none;
    padding-top: 0;
}

.subs-slideout-section__title[b-pqxat93ch8] {
    text-transform: uppercase;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-2);
}

.subs-seat-row[b-pqxat93ch8] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
}

.subs-seat-avatar[b-pqxat93ch8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
}

.subs-timeline-row[b-pqxat93ch8] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* /Components/Pages/Admin/SubscriptionDetailPage.razor.rz.scp.css */
/* Seat rows are clickable anchors to the member progress page; reset default anchor styling
   so InfoRowItem's own typography and hover treatment shows through. */
.subs-seat-link[b-ojelecz42i] {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.subs-seat-link:hover[b-ojelecz42i] {
    background: var(--bg-secondary);
}

.subs-seat-link:focus-visible[b-ojelecz42i] {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/SubscriptionManagementPage.razor.rz.scp.css */
/*
 * Page-scoped styles for /admin/subscriptions/catalog.
 *
 * Per CLAUDE.md §13 (Components-First, Custom CSS as Last Resort):
 *  - The 320px / 1fr master-detail grid has no matching layout primitive:
 *    `layout-settings` adds a bordered shell, `layout-dashboard-split` is 70/30
 *    with a sidebar on the right, `layout-portal` is a 3-column nav layout.
 *    A plain 2-column grid with a fixed 320px left column is cleanest here.
 *  - Everything else (FieldPanel, InfoPanel, MetricItem, DataTable, Badge,
 *    Placeholder, layout-stat-cards, layout-empty-state) comes from existing
 *    components and layout primitives.
 */

.subscription-split[b-ed04su9hor] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--spacing-6);
    align-items: start;
}

@media (max-width: 1024px) {
    .subscription-split[b-ed04su9hor] {
        grid-template-columns: 1fr;
    }
}

.subscription-tier-list[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* Summary FieldPanel ("All Tiers") needs an explicit bg-primary surface
   because field-panel-card is transparent by default. Scoped via ::deep so
   only the summary card at the top of the tier list is affected, not global
   FieldPanels. */
.subscription-tier-list[b-ed04su9hor]  .field-panel-card {
    background-color: var(--bg-primary);
}

/* Inline stats row inside the "All Tiers" FieldPanel ValueContent */
.subscription-tier-summary__stats[b-ed04su9hor] {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.subscription-tier-summary__stats strong[b-ed04su9hor] {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Brand-soft icon tile for the InfoRowItem Leading slot in the tier list.
   Fits inside info-row__lead's 40×40 frame. */
.subscription-tier-icon[b-ed04su9hor] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-brand-secondary);
    color: var(--fg-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-tier-icon svg[b-ed04su9hor] {
    width: 18px;
    height: 18px;
}

/* Right detail column */
.subscription-tier-detail[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-width: 0;
}

/* Header actions cluster inside InfoPanel HeaderActions slot */
.subscription-detail-actions[b-ed04su9hor] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* Subsection inside the tier detail InfoPanel body
   (heading + inline content — no card chrome, lives inside InfoPanel's body) */
.subscription-section[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

.subscription-section__heading[b-ed04su9hor] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subscription-section__badges[b-ed04su9hor] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.subscription-section__muted[b-ed04su9hor] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Rich header inside InfoPanel.TitleContent — icon tile + stacked title/description.
   Typography classes (info-card-title / info-card-description) are reused from InfoCard. */
.subscription-tier-head[b-ed04su9hor] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-width: 0;
}

.subscription-tier-head__icon[b-ed04su9hor] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-brand-secondary);
    color: var(--fg-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.subscription-tier-head__icon svg[b-ed04su9hor] {
    width: 22px;
    height: 22px;
}

.subscription-tier-head__text[b-ed04su9hor] {
    min-width: 0;
}

/* Make Members "—" placeholder visibly illustrative */
.subscription-stats__muted[b-ed04su9hor] {
    color: var(--text-quaternary);
}

/* Features list — 2-col checklist grid with leading check icons */
.subscription-features__grid[b-ed04su9hor] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-2) var(--spacing-4);
}

@media (max-width: 640px) {
    .subscription-features__grid[b-ed04su9hor] {
        grid-template-columns: 1fr;
    }
}

.subscription-features__item[b-ed04su9hor] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.subscription-features__check[b-ed04su9hor] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--fg-success-primary);
}

/* ── Add Books mega modal — layout + staged preview column ─────────────── */
/* Scoped because:
   - No existing list primitive wraps a stack of ListItem rows with a consistent
     surface + gap treatment for preview/cart contexts.
   - The mega modal default max-width (80rem) is sized for the BookFormPage
     translations editor. The picker pattern benefits from more horizontal real
     estate, so we bump max-width +15% (to 92rem) only for this page's modal. */

/* +15% wider mega modal for the picker. Global base is min(95vw, 80rem). */
[b-ed04su9hor] .modal-overlay.modal-mega .modal-panel {
    max-width: min(95vw, 92rem);
}

/* 65/35 grid override on the shared layout-mega-modal-body. */
.add-books-grid[b-ed04su9hor] {
    grid-template-columns: 65% 35%;
}

/* Left pane hosts the DataTable + scroll sentinel. The DataTable provides its
   own toolbar (search + column-filter dropdown + sort dropdown in list mode),
   so we don't need the outer InputField the previous design used. */
.add-books-left[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--border-secondary);
}

/* Hide DataTable's pagination strip — endless scroll replaces it. Scoped so we
   only suppress it for the picker's table, not every DataTable on the page. */
.add-books-left[b-ed04su9hor]  .pagination {
    display: none;
}

/* InfoRow leading slot is fixed-size for Avatar; book covers are portrait, so
   nudge the Avatar to a slightly taller aspect while keeping the row height.
   We keep Avatar's own chrome but shape its <img> for books. */
.add-books-left[b-ed04su9hor]  .info-row-list .avatar img {
    object-fit: cover;
    object-position: center;
}

.add-books-loading-more[b-ed04su9hor] {
    padding: var(--spacing-2) 0;
}

.add-books-end-of-list[b-ed04su9hor] {
    padding: var(--spacing-3) 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* IntersectionObserver sentinel — zero height, invisible, purely for scroll detection. */
.add-books-sentinel[b-ed04su9hor] {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
}

/* Right pane surface. Uses bg-secondary to visually separate from the working
   left pane. Header gets its own mini-toolbar. */
.add-books-right[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    background: var(--bg-secondary);
}

.add-books-right__head[b-ed04su9hor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.add-books-right__head-text[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0-5);
}

.add-books-right__head-text .text-sm-semibold[b-ed04su9hor] {
    color: var(--text-primary);
}

.add-books-right__head-text .text-xs-regular[b-ed04su9hor] {
    color: var(--text-tertiary);
}

.mega-modal-staged-list[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

.mega-modal-staged-list[b-ed04su9hor]  .list-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
}

/* Trash action button inside the ListItem Actions slot — small, gray by default,
   switches to error fg on hover to match destructive-row affordance patterns. */
.mega-modal-staged-remove[b-ed04su9hor] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--fg-quaternary);
    cursor: pointer;
    transition: color 120ms ease-out, background-color 120ms ease-out;
}

.mega-modal-staged-remove:hover[b-ed04su9hor] {
    color: var(--fg-error-primary);
    background: var(--bg-error-primary-subtle, var(--bg-secondary));
}

.mega-modal-staged-remove:focus-visible[b-ed04su9hor] {
    outline: none;
    box-shadow: var(--focus-ring-gray);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Tier "Included Features" editor (Create/Edit Tier modal).
 * No layout primitive exists for a "text input + trailing remove button"
 * row, so we scope the flex wrapper here. Kept tiny and purely structural;
 * all chrome comes from InputField + Button components + design tokens.
 * ───────────────────────────────────────────────────────────────────── */
.tier-features-section[b-ed04su9hor] {
    margin-top: var(--spacing-4);
}

.tier-features-list[b-ed04su9hor] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.tier-features-row[b-ed04su9hor] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.tier-features-row__input[b-ed04su9hor] {
    flex: 1;
    min-width: 0;
}

.tier-features-empty[b-ed04su9hor] {
    margin: var(--spacing-3) 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.tier-features-add[b-ed04su9hor] {
    margin-top: var(--spacing-3);
}
/* /Components/Pages/Admin/SubscriptionPoolPage.razor.rz.scp.css */
/* Page-scoped styles for /admin/subscription-pool.
   Kept minimal; each block has a justifying reason for why a primitive
   didn't fit. Tokens only — no raw colors, no raw shadows. */

/* 70/30 split override: layout-form-with-guide defaults to 1fr / 340px.
   This page wants a wider guide rail (~30%) for the calculation explainer. */
.pool-guide-split[b-8msfb30bw5] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

/* Small breathing room under page alerts before the main grid starts. */
.pool-alert-spacer[b-8msfb30bw5] {
    margin-bottom: var(--spacing-3);
}

/* Period picker row — horizontal: two narrow dropdowns + primary action.
   layout-form-grid is a 2-col form grid; this is a 3-col action bar instead. */
.pool-period-row[b-8msfb30bw5] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.pool-period-field[b-8msfb30bw5] { min-width: 10rem; flex: 0 0 auto; }
.pool-period-action[b-8msfb30bw5] { flex: 0 0 auto; }

/* Creator-share visualisation: donut stacked above the breakdown table,
   single column so the chart reads as a summary of the table below it. */
.pool-share-grid[b-8msfb30bw5] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}
.pool-share-chart[b-8msfb30bw5] { min-width: 0; }

/* Creator cell inside the DataTable — small avatar + name inline.
   DataTable's CellTemplate returns content that drops inside a <td>;
   this is the flex row for that cell only. */
.pool-creator-cell[b-8msfb30bw5] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 0;
}
.pool-creator-name[b-8msfb30bw5] {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Emphasis for money cells (pool contribution / share amount). */
.pool-cell-strong[b-8msfb30bw5] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Confirm row — two right-aligned actions below the preview. */
.pool-confirm-row[b-8msfb30bw5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
}

/* TipPanel footer link — matches the "read more" links used elsewhere. */
.pool-footer-link[b-8msfb30bw5] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--text-brand);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}
.pool-footer-link:hover[b-8msfb30bw5] { text-decoration: underline; }
.pool-footer-link svg[b-8msfb30bw5] { width: 14px; height: 14px; }
/* /Components/Pages/Admin/TierSimulationPage.razor.rz.scp.css */
/* "Pool mode" eyebrow label above the tabs. */
.tier-sim-eyebrow[b-69cpylb51z] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0 0 var(--spacing-1) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* "Recomputing..." indicator shown while a debounced sim run is in flight. */
.tier-sim-recomputing[b-69cpylb51z] {
    color: var(--brand-600);
    font-size: var(--text-sm);
    padding-bottom: var(--spacing-2);
}

/* Multiplier panel: one row per tier (label | multiplier group). No layout
   primitive covers this inline slider-row pattern. width:100% is required
   because InfoPanel's body is a flex-start column. */
.tier-sim-multipliers[b-69cpylb51z] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%;
}

.tier-sim-multiplier-row[b-69cpylb51z] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--spacing-3);
    align-items: center;
}

.tier-sim-multiplier-label[b-69cpylb51z] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Multiplier control: slider + number entry kept as one tight pair so the
   editable value sits right beside the slider it mirrors. */
.tier-sim-mult-group[b-69cpylb51z] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.tier-sim-mult-slider[b-69cpylb51z] {
    flex: 1;
    min-width: 0;
}

.tier-sim-multiplier-number[b-69cpylb51z] {
    flex: 0 0 84px;
}

/* Formula section: plain-language paragraph, symbolic line, worked-example
   table. None has a design-system component equivalent. */
.tier-sim-formula-plain[b-69cpylb51z] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-3) 0;
}

.tier-sim-formula-symbolic[b-69cpylb51z] {
    font-family: var(--font-family-mono, monospace);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    margin: 0 0 var(--spacing-4) 0;
}

.tier-sim-formula-note[b-69cpylb51z] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: var(--spacing-3) 0 0 0;
}

.tier-sim-worked[b-69cpylb51z] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.tier-sim-worked th[b-69cpylb51z],
.tier-sim-worked td[b-69cpylb51z] {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--border-secondary);
}

.tier-sim-worked th[b-69cpylb51z] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tier-sim-worked tfoot td[b-69cpylb51z] {
    font-weight: 600;
    border-bottom: none;
}

/* Right-align the gainers/losers toggle above the movers table. */
.tier-sim-movers-tabs[b-69cpylb51z] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-3);
}

/* Horizontal control bar: pool-mode tabs + hypothetical-pool input. */
.tier-sim-inputs-bar[b-69cpylb51z] {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-end;
    flex-wrap: wrap;
}

.tier-sim-pool-input[b-69cpylb51z] {
    min-width: 220px;
}

/* Config panel body: spaces the total-creators field, the per-tier rows,
   and the percentage-sum Tip. Used in both cohort modes. */
.tier-sim-config-body[b-69cpylb51z] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    width: 100%;
}

/* Total-creators field (Hypothetical population mode). */
.tier-sim-pop-total[b-69cpylb51z] {
    max-width: 220px;
}

/* Combined per-tier row (Hypothetical population mode): tier label |
   population % | score zone (output / engagement / quality sliders +
   derived score) | multiplier group | derived weight. */
.tier-sim-combined-row[b-69cpylb51z] {
    display: grid;
    grid-template-columns: 160px 90px 1fr 1.5fr 96px;
    gap: var(--spacing-3);
    align-items: center;
}

/* Column headings above the combined rows. */
.tier-sim-combined-head[b-69cpylb51z] {
    display: grid;
    grid-template-columns: 160px 90px 1fr 1.5fr 96px;
    gap: var(--spacing-3);
    align-items: center;
}

.tier-sim-combined-head > span[b-69cpylb51z],
.tier-sim-combined-head .tier-sim-score-zone > span[b-69cpylb51z] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Read-only derived value (Score, Weight) shown in the combined row. */
.tier-sim-derived[b-69cpylb51z] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* The weight value is the row's headline figure - emphasised. */
.tier-sim-derived--weight[b-69cpylb51z] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Total-weight footer, aligned to the combined-row grid. */
.tier-sim-combined-foot[b-69cpylb51z] {
    display: grid;
    grid-template-columns: 160px 90px 1fr 1.5fr 96px;
    gap: var(--spacing-3);
}

.tier-sim-combined-foot__label[b-69cpylb51z] {
    grid-column: 1 / 5;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Wrapper around each score-factor slider inside the score zone so its
   "below" value label has room; min-width:0 lets the fluid slider
   shrink with its grid column. */
.tier-sim-score-factor[b-69cpylb51z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Score-calculation zone: wraps the three factor sliders and the derived
   score behind a subtle tinted band, so the columns that *build* the score
   read as one group, set apart from Tier / Pop % / multiplier / weight.
   Repeated on the header and every row; the negative block margin equals
   half the parent row gap, so consecutive bands meet and form one
   continuous panel. No component or layout primitive covers a column-group
   background that spans a multi-row grid. */
.tier-sim-score-zone[b-69cpylb51z] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 56px;
    gap: var(--spacing-3);
    align-items: center;
    min-width: 0;
    padding: var(--spacing-1) var(--spacing-3);
    margin-block: calc(var(--spacing-2) / -2);
    background: var(--bg-secondary);
}

/* Header band: flush to the top of the panel, top corners rounded. */
.tier-sim-combined-head .tier-sim-score-zone[b-69cpylb51z] {
    margin-top: 0;
    padding-block: var(--spacing-2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Last tier row: closes the panel with rounded bottom corners. The footer
   is the final child of .tier-sim-multipliers, so the last data row is the
   second-to-last child. */
.tier-sim-combined-row:nth-last-child(2) .tier-sim-score-zone[b-69cpylb51z] {
    margin-bottom: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* /Components/Pages/Creator/CreatorAnalyticsPage.razor.rz.scp.css */
/* Page-scoped styles for Creator Analytics. Keep minimal — prefer components + layout primitives. */
/* /Components/Pages/Creator/CreatorBookFormPage.razor.rz.scp.css */
/*
 * Physical edition row: 4-column inline grid (name, price, points, remove button).
 * No existing layout primitive covers this inline-form-row-with-destructive-action pattern.
 */
.edition-row[b-t451ii50xl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    align-items: end;
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--border-secondary);
}

/*
 * Make the connector BEFORE the last step (Analytics) dotted
 * to visually distinguish it from the main wizard flow.
 *
 * Targets: the left-side connector of the last .step in the stepper.
 * The last step's indicator-row has two connectors: left (real) and right (spacer).
 * We want the left connector (.step-connector-h:first-child) to be dashed.
 */
[b-t451ii50xl] .steps > .step:last-child .step-indicator-row > .step-connector-h:first-child {
    background: none;
    border-top: 2px dashed var(--border-secondary);
    height: 0;
}

/* When the connector is active (previous step complete or current), use brand color */
[b-t451ii50xl] .steps > .step:last-child .step-indicator-row > .step-connector-h.step-connector-active:first-child {
    background: none;
    border-top-color: var(--brand-600);
}

/* Past price-change history disclosure (Manage tab > Pricing section) */
.past-changes-details[b-t451ii50xl] {
    margin-top: var(--spacing-3);
    border-top: 1px solid var(--border-secondary);
    padding-top: var(--spacing-3);
}
.past-changes-details summary[b-t451ii50xl] {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.past-changes-list[b-t451ii50xl] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}
.past-changes-item[b-t451ii50xl] {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}
.past-changes-item__delta[b-t451ii50xl] { color: var(--text-primary); }
.past-changes-item__meta[b-t451ii50xl] { color: var(--text-tertiary); }
.past-changes-item__reason[b-t451ii50xl] {
    width: 100%;
    margin-top: var(--spacing-1);
    padding-left: var(--spacing-3);
    border-left: 2px solid var(--border-secondary);
    color: var(--text-secondary);
    font-style: italic;
}

/* Rejection slip — quiet editorial treatment shown in the Book Lifecycle
   panel when a submission has been rejected. The eyebrow row carries the
   error tone; the reason itself is rendered as a quoted reviewer's note. */
.lifecycle-rejection[b-t451ii50xl] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-error-secondary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.lifecycle-rejection__head[b-t451ii50xl] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--text-error-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lifecycle-rejection__head svg[b-t451ii50xl] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.lifecycle-rejection__stage[b-t451ii50xl] {
    margin-left: var(--spacing-1);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}
.lifecycle-rejection__reason[b-t451ii50xl] {
    margin: 0;
    padding-left: var(--spacing-3);
    border-left: 2px solid var(--text-error-primary);
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-xs);
    line-height: 1.5;
}
.lifecycle-rejection__link[b-t451ii50xl] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-error-primary);
    text-decoration: none;
    transition: gap 120ms ease;
}
.lifecycle-rejection__link:hover[b-t451ii50xl] {
    text-decoration: underline;
    gap: var(--spacing-2);
}
.lifecycle-rejection__link svg[b-t451ii50xl] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* .page-upload-progress* rules now live in BulkUploadProgress.razor.css —
   the markup moved into that component, so Blazor's CSS isolation made
   the parent-scoped rules dead-letters. Kept this comment as a breadcrumb. */
/* /Components/Pages/Creator/CreatorDashboardPage.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
 * DASHBOARD LAYOUT: Single 70/30 grid for entire page
 * ------------------------------------------------------------------------- */
.dashboard-layout[b-mq1affluae] {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--spacing-6);
    align-items: start;
}

.dashboard-layout__main[b-mq1affluae] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.dashboard-layout__sidebar[b-mq1affluae] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    position: sticky;
    top: var(--spacing-4);
}

@media (max-width: 1024px) {
    .dashboard-layout[b-mq1affluae] {
        grid-template-columns: 1fr;
    }

    .dashboard-layout__sidebar[b-mq1affluae] {
        position: static;
    }
}

/* ---------------------------------------------------------------------------
 * TIER PROGRESS BAR (inside InfoPanel footer)
 * ------------------------------------------------------------------------- */
.creator-tier-progress[b-mq1affluae] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
}

.creator-tier-progress__header[b-mq1affluae] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.creator-tier-progress__label[b-mq1affluae] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.creator-tier-progress__value[b-mq1affluae] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-brand-secondary);
}

.creator-tier-progress__track[b-mq1affluae] {
    height: 6px;
    background: var(--border-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.creator-tier-progress__fill[b-mq1affluae] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
    min-width: 2px;
}

.creator-tier-progress__next[b-mq1affluae] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ---------------------------------------------------------------------------
 * CHART GRID + CARDS
 * ------------------------------------------------------------------------- */
.dashboard-chart-grid[b-mq1affluae] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

@media (max-width: 768px) {
    .dashboard-chart-grid[b-mq1affluae] {
        grid-template-columns: 1fr;
    }
}

.dashboard-chart-card[b-mq1affluae] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}

.dashboard-chart-title[b-mq1affluae] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
/* /Components/Pages/Creator/CreatorSubmissionStatusPage.razor.rz.scp.css */
/* Vertical stack of FieldPanel cards inside the "Submission Versions"
   InfoPanel. No layout primitive fits: layout-aside-stack is for the rail
   level, and layout-body is for page-level rhythm. A scoped flex column
   with the design-system spacing token keeps the chrome on FieldPanel. */
.version-list[b-ekcjhu89yi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
}

/* Reviewer's Page Notes — vertical stack of FieldPanel cards, each with
   a thumbnail + comment body composition inside its ValueContent slot.
   No layout primitive fits "image + text row inside a card", so a small
   scoped block lays it out. Sizing uses design-system spacing tokens. */
.page-comment-list[b-ekcjhu89yi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
}

.page-comment-row[b-ekcjhu89yi] {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.page-comment-thumb[b-ekcjhu89yi] {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-secondary);
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.page-comment-thumb--empty[b-ekcjhu89yi] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    text-align: center;
}

.page-comment-body[b-ekcjhu89yi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    flex: 1;
    min-width: 0;
}

.page-comment-text[b-ekcjhu89yi] {
    margin: 0;
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.page-comment-meta[b-ekcjhu89yi] {
    margin: 0;
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-text-xs);
    color: var(--text-tertiary);
}
/* /Components/SamplePages/PatientListPage.razor.rz.scp.css */
/* ==========================================================================
 * PatientListPage — Showcase-specific styles only
 * ========================================================================== */

/* -- Fullscreen toggle (showcase only, not part of the reusable pattern) -- */
.fullscreen-toggle-btn[b-xqpb13b0k6] {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--text-quaternary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.fullscreen-toggle-btn:hover[b-xqpb13b0k6] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}
/* /Components/UI/BulkPageUploadModal.razor.rz.scp.css */
/* Scoped to BulkPageUploadModal — only structural layout for the per-state
   bodies. FileUpload, InfoRowItem, Modal, Tip, Alert, Badge own their own
   chrome; we only add the wrapper, hidden modifier, and review/batch UIs. */

/* Body wrapper — flex column that fills the mega-modal's body. State-specific
   content blocks below choose whether to stretch (PickFolder grows the
   dropzone) or sit at the top (Loading / Review / BatchManage own their own
   sizing). */
.bulk-page-upload-body[b-syul3m1jlw] {
    padding: 0 var(--spacing-2xl);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bulk-page-upload-pick[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    flex: 1 1 auto;
    min-height: 0;
}

/* Reach into the FileUpload component (Blazor's CSS isolation otherwise
   stops at the component boundary) to make the dropzone fill the available
   modal body height. min-height keeps the dropzone usable on short viewports
   where flex:1 would otherwise collapse it. */
.bulk-page-upload-pick[b-syul3m1jlw]  .file-upload {
    flex: 1 1 auto;
    min-height: 0;
}

.bulk-page-upload-pick[b-syul3m1jlw]  .file-upload-dropzone {
    flex: 1 1 auto;
    min-height: 320px;
    justify-content: center;
}

/* The FileUpload stays mounted across state transitions because Blazor reads
   file bytes via JS interop on the live <input> element. We hide the wrapper
   via display:none in non-PickFolder states. */
.bulk-page-upload-pick--hidden[b-syul3m1jlw] {
    display: none;
}

.bulk-page-upload-pick__error[b-syul3m1jlw] {
    margin-top: var(--spacing-2);
}

/* ── Loading state ── */

.bulk-page-upload-loading[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8) 0;
}

.bulk-page-upload-loading__text[b-syul3m1jlw] {
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-page-upload-loading__filename[b-syul3m1jlw] {
    color: var(--text-tertiary);
    font-size: var(--font-size-text-sm);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Review state (≤200 small-batch path) ── */

.bulk-page-upload-review[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.bulk-page-upload-review__summary[b-syul3m1jlw] {
    color: var(--text-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-page-upload-review__skipped[b-syul3m1jlw] {
    color: var(--text-tertiary);
}

.bulk-page-upload-review__grid[b-syul3m1jlw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-3);
    max-height: 44vh;
    overflow-y: auto;
    padding: var(--spacing-2);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.bulk-page-upload-review__tile[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    position: relative;
}

.bulk-page-upload-review__page-num[b-syul3m1jlw] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--brand-600);
    color: var(--text-white);
    border-radius: var(--radius-full);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-text-xs);
    font-weight: 600;
}

.bulk-page-upload-review__thumb[b-syul3m1jlw] {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    background: var(--bg-tertiary);
}

.bulk-page-upload-review__name[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* ── Position state (≤200 path) ── */

.bulk-page-upload-position[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.bulk-page-upload-position__after-input[b-syul3m1jlw] {
    max-width: 240px;
    margin-left: var(--spacing-8);
}

/* ── Preview state (≤200 path) ── */

.bulk-page-upload-preview[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.bulk-page-upload-preview__summary[b-syul3m1jlw] {
    color: var(--text-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-page-upload-preview__skipped[b-syul3m1jlw] {
    color: var(--text-tertiary);
}

.bulk-page-upload-preview__scroll[b-syul3m1jlw] {
    max-height: 50vh;
    overflow-y: auto;
}

/* ── BatchManage state (>200 split-pane batch upload manager) ─────────────── */

.bulk-batch[b-syul3m1jlw] {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 0;
    height: 70vh;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
}

/* Left rail: scrollable list of batches with status indicators. */

.bulk-batch__rail[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    min-height: 0;
}

.bulk-batch__rail-header[b-syul3m1jlw] {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border-primary);
}

.bulk-batch__rail-title[b-syul3m1jlw] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-batch__rail-subtitle[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.bulk-batch__rail-list[b-syul3m1jlw] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.bulk-batch__rail-footer[b-syul3m1jlw] {
    padding: var(--spacing-2) var(--spacing-3);
    border-top: 1px solid var(--border-primary);
    background: var(--bg-primary);
}

.bulk-batch__card[b-syul3m1jlw] {
    appearance: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: inherit;
    font: inherit;
}

.bulk-batch__card:hover[b-syul3m1jlw] {
    border-color: var(--brand-300);
    background: var(--bg-primary-hover, var(--bg-primary));
}

.bulk-batch__card--selected[b-syul3m1jlw] {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px var(--brand-100);
}

.bulk-batch__card--done[b-syul3m1jlw] { border-left: 4px solid var(--success-500); }
.bulk-batch__card--uploading[b-syul3m1jlw] { border-left: 4px solid var(--brand-600); }
.bulk-batch__card--partial[b-syul3m1jlw] { border-left: 4px solid var(--warning-500); }
.bulk-batch__card--pending[b-syul3m1jlw] { border-left: 4px solid var(--border-primary); }

.bulk-batch__card-row[b-syul3m1jlw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
}

.bulk-batch__card-num[b-syul3m1jlw] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-batch__card-status[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
}

.bulk-batch__card--done .bulk-batch__card-status[b-syul3m1jlw] { color: var(--success-700); }
.bulk-batch__card--uploading .bulk-batch__card-status[b-syul3m1jlw] { color: var(--brand-700); }
.bulk-batch__card--partial .bulk-batch__card-status[b-syul3m1jlw] { color: var(--warning-700); }

.bulk-batch__card-pages[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-secondary);
}

.bulk-batch__card-meta[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.bulk-batch__card-meta--error[b-syul3m1jlw] {
    color: var(--text-error-primary);
}

.bulk-batch__card-progress[b-syul3m1jlw] {
    margin-top: var(--spacing-1);
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.bulk-batch__card-progress-fill[b-syul3m1jlw] {
    height: 100%;
    background: var(--brand-600);
    transition: width 0.2s;
}

/* Right panel: selected batch detail. */

.bulk-batch__panel[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    overflow-y: auto;
    min-height: 0;
}

.bulk-batch__panel-header[b-syul3m1jlw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--border-primary);
}

.bulk-batch__panel-title[b-syul3m1jlw] {
    font-size: var(--font-size-text-md);
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-batch__panel-subtitle[b-syul3m1jlw] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.bulk-batch__status-pill[b-syul3m1jlw] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-text-xs);
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

.bulk-batch__status-pill--done[b-syul3m1jlw] {
    background: var(--success-50);
    color: var(--success-700);
    border-color: var(--success-200);
}

.bulk-batch__status-pill--uploading[b-syul3m1jlw] {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-200);
}

.bulk-batch__status-pill--partial[b-syul3m1jlw] {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-200);
}

.bulk-batch__section-label[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: var(--spacing-2);
}

.bulk-batch__position[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.bulk-batch__position--locked[b-syul3m1jlw] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1);
    color: var(--text-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-batch__position--locked .bulk-batch__section-label[b-syul3m1jlw] {
    margin-bottom: 0;
    margin-right: var(--spacing-2);
    display: inline-block;
}

.bulk-batch__position-lock-note[b-syul3m1jlw] {
    color: var(--text-tertiary);
    font-size: var(--font-size-text-xs);
}

.bulk-batch__grid[b-syul3m1jlw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    max-height: 38vh;
    overflow-y: auto;
}

.bulk-batch__tile[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    position: relative;
}

.bulk-batch__tile--failed[b-syul3m1jlw] {
    border-color: var(--error-500);
    background: var(--error-50);
}

.bulk-batch__tile-num[b-syul3m1jlw] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--brand-600);
    color: var(--text-white);
    border-radius: var(--radius-full);
    min-width: 22px;
    height: 22px;
    padding: 0 var(--spacing-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-text-xs);
    font-weight: 600;
}

.bulk-batch__tile-check[b-syul3m1jlw],
.bulk-batch__tile-fail[b-syul3m1jlw] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-text-xs);
    font-weight: 700;
    color: var(--text-white);
}

.bulk-batch__tile-check[b-syul3m1jlw] { background: var(--success-500); }
.bulk-batch__tile-fail[b-syul3m1jlw] { background: var(--error-500); }

.bulk-batch__tile-thumb[b-syul3m1jlw] {
    width: 100%;
    height: 100px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    background: var(--bg-tertiary);
}

.bulk-batch__tile-name[b-syul3m1jlw] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.bulk-batch__action[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: auto;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-primary);
}

.bulk-batch__action-error[b-syul3m1jlw] {
    color: var(--text-error-primary);
    font-size: var(--font-size-text-sm);
}

.bulk-batch__progress[b-syul3m1jlw] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.bulk-batch__progress-row[b-syul3m1jlw] {
    font-size: var(--font-size-text-sm);
    color: var(--text-primary);
}

.bulk-batch__progress-failed[b-syul3m1jlw] {
    color: var(--text-error-primary);
    font-weight: 500;
}

.bulk-batch__progress-remaining[b-syul3m1jlw] {
    color: var(--text-tertiary);
}

.bulk-batch__progress-rate[b-syul3m1jlw] {
    font-size: var(--font-size-text-sm);
    color: var(--text-secondary);
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.bulk-batch__progress-rate--muted[b-syul3m1jlw] {
    color: var(--text-tertiary);
    font-style: italic;
}

.bulk-batch__progress-footer[b-syul3m1jlw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-2);
    border-top: 1px dashed var(--border-secondary);
}

.bulk-batch__warning[b-syul3m1jlw] {
    color: var(--text-warning-primary);
    font-size: var(--font-size-text-sm);
}
/* /Components/UI/BulkUploadProgress.razor.rz.scp.css */
/* BulkUploadProgress — both slim (≤200) and rich (>200) layouts live here.
   The .page-upload-progress* rules used to live on the parent pages' scoped
   CSS, but Blazor's scope tags only match elements rendered inside the
   parent's own render tree — moving the markup into a child component made
   those rules dead-letters. They're scoped here now so flex:1 actually
   stretches the bar to fill the available width. */

/* ── Slim layout (≤200 files) ── */

/* Outer row: progress block claims all available width via flex:1; cancel
   button sits at flex-end (its container is flex:0 0 auto so it never grows). */
.page-upload-progress-row[b-o8solpnh5v] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-3);
    align-items: center;
    width: 100%;
}

/* Progress block must claim all leftover width — without min-width:0 the flex
   item refuses to shrink below its intrinsic content width, capping the bar
   at the status text length. */
.page-upload-progress[b-o8solpnh5v] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: var(--spacing-2);
    align-content: center;
}

.page-upload-progress__status[b-o8solpnh5v] {
    font-size: var(--font-size-text-sm);
    color: var(--text-tertiary);
}

.page-upload-progress__actions[b-o8solpnh5v] {
    flex: 0 0 auto;
    margin-left: auto; /* defensive: ensures flex-end placement even if siblings change */
}

.bulk-upload-progress[b-o8solpnh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.bulk-upload-progress__bar[b-o8solpnh5v] {
    width: 100%;
}

.bulk-upload-progress__breakdown[b-o8solpnh5v] {
    font-size: var(--font-size-text-sm);
    color: var(--text-primary);
}

.bulk-upload-progress__count strong[b-o8solpnh5v] {
    font-weight: 600;
}

.bulk-upload-progress__failed[b-o8solpnh5v] {
    color: var(--text-error-primary);
    font-weight: 500;
}

.bulk-upload-progress__remaining[b-o8solpnh5v] {
    color: var(--text-tertiary);
}

.bulk-upload-progress__rate[b-o8solpnh5v] {
    font-size: var(--font-size-text-sm);
    color: var(--text-secondary);
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.bulk-upload-progress__rate--muted[b-o8solpnh5v] {
    color: var(--text-tertiary);
    font-style: italic;
}

.bulk-upload-progress__sep[b-o8solpnh5v] {
    color: var(--text-quaternary);
}

.bulk-upload-progress__inflight[b-o8solpnh5v] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.bulk-upload-progress__inflight-label[b-o8solpnh5v] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bulk-upload-progress__inflight-list[b-o8solpnh5v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.bulk-upload-progress__inflight-pill[b-o8solpnh5v] {
    display: inline-block;
    padding: 2px var(--spacing-2);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-text-xs);
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-upload-progress__footer[b-o8solpnh5v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    padding-top: var(--spacing-2);
    border-top: 1px dashed var(--border-secondary);
}

.bulk-upload-progress__warning[b-o8solpnh5v] {
    font-size: var(--font-size-text-sm);
    color: var(--text-warning-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.bulk-upload-progress__warning-icon[b-o8solpnh5v] {
    font-size: 1.1em;
}
/* /Components/UI/Creator/ProfileSummaryCard.razor.rz.scp.css */
.profile-summary[b-ob60b5sfqm] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-6);
    align-items: start;
    padding: var(--spacing-6);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.profile-summary__avatar[b-ob60b5sfqm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-summary__avatar img[b-ob60b5sfqm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-summary__avatar-fallback[b-ob60b5sfqm] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
}

.profile-summary__body[b-ob60b5sfqm] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 0;
}

.profile-summary__identity[b-ob60b5sfqm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.profile-summary__name[b-ob60b5sfqm] {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.profile-summary__meta[b-ob60b5sfqm] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.profile-summary__meta-sep[b-ob60b5sfqm] {
    opacity: 0.5;
}

.profile-summary__tagline[b-ob60b5sfqm] {
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

.profile-summary__stats[b-ob60b5sfqm] {
    display: flex;
    gap: var(--spacing-6);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-secondary);
    margin-top: var(--spacing-2);
    flex-wrap: wrap;
}

.profile-summary__stat[b-ob60b5sfqm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-summary__stat-value[b-ob60b5sfqm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-summary__stat-label[b-ob60b5sfqm] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.profile-summary__actions[b-ob60b5sfqm] {
    display: flex;
    gap: var(--spacing-2);
    align-items: flex-start;
}

.profile-summary--compact[b-ob60b5sfqm] {
    grid-template-columns: auto 1fr auto;
    padding: var(--spacing-3) var(--spacing-6);
}

.profile-summary--compact .profile-summary__tagline[b-ob60b5sfqm],
.profile-summary--compact .profile-summary__stats[b-ob60b5sfqm],
.profile-summary--compact .profile-summary__meta[b-ob60b5sfqm] {
    display: none;
}

.profile-summary--compact .profile-summary__avatar[b-ob60b5sfqm] {
    width: 40px;
    height: 40px;
}
/* /Components/UI/LockedSection.razor.rz.scp.css */
/* Blur + upsell overlay for tier-gated sections. Scoped; the only custom CSS this feature needs. */
.locked-section[b-7gugrazctr] { position: relative; }
.locked-section__content--blurred[b-7gugrazctr] {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
}
.locked-section__overlay[b-7gugrazctr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.locked-section__card[b-7gugrazctr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    max-width: 380px;
    padding: var(--spacing-2xl);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.locked-section__icon[b-7gugrazctr] { color: var(--text-brand-secondary); }
.locked-section__sub[b-7gugrazctr] { color: var(--text-tertiary); }
/* /Components/UI/MetricBar.razor.rz.scp.css */
.metric-bar[b-eafibamgsf] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.metric-bar__track[b-eafibamgsf] {
    width: 40px;
    height: 5px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    flex: none;
}

.metric-bar__fill[b-eafibamgsf] {
    height: 100%;
    border-radius: 3px;
    transition: width 180ms ease;
}

.metric-bar__fill--high[b-eafibamgsf] { background: var(--success-500, #16a34a); }
.metric-bar__fill--mid[b-eafibamgsf]  { background: var(--primary, #2563eb); }
.metric-bar__fill--low[b-eafibamgsf]  { background: var(--warning-500, #f59e0b); }

.metric-bar__value[b-eafibamgsf] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    min-width: 2.5rem;
}
/* /Components/UI/SvgUploader.razor.rz.scp.css */
/* SvgUploader — fills its host column (the mega-modal media pane). The dropzone
   (empty) or preview (filled) flexes to take the full available height, with an
   optional error line pinned below. Chrome comes from the FileUpload child
   component; these scoped rules only handle the fill/stretch behavior, which no
   layout primitive covers. ::deep reaches the child FileUpload's markup. */
.svg-uploader[b-i0nzkriovo] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    min-height: 0;
}

/* Empty state — stretch the FileUpload dropzone to fill the pane. */
.svg-uploader__drop[b-i0nzkriovo] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.svg-uploader__drop[b-i0nzkriovo]  .file-upload {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.svg-uploader__drop[b-i0nzkriovo]  .file-upload-dropzone {
    flex: 1;
}

/* dropzone style nests a bordered __panel inside an unbordered wrapper —
   stretch the panel so the bordered card fills the column, not just its content. */
.svg-uploader__drop[b-i0nzkriovo]  .file-upload-dropzone__panel {
    flex: 1;
    height: 100%;
}

/* Filled state — preview card fills the pane; line-art SVGs read best on white. */
.svg-uploader__preview[b-i0nzkriovo] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: var(--spacing-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.svg-uploader__preview img[b-i0nzkriovo] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.svg-uploader__actions[b-i0nzkriovo] {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.svg-uploader__status[b-i0nzkriovo] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.svg-uploader__error[b-i0nzkriovo] {
    flex-shrink: 0;
    color: var(--text-error-primary);
    font-size: var(--text-sm);
}
/* /Components/UI/WithdrawalDetailsSlideout.razor.rz.scp.css */
/* Scoped styles for WithdrawalDetailsSlideout.
   layout-slideout-body provides the outer scroll container.
   These classes handle section grouping and typography within the slideout body. */

.wds-section[b-39o6eozcs7] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-5);
    border-bottom: 1px solid var(--border-secondary);
}

.wds-section:last-child[b-39o6eozcs7] {
    border-bottom: none;
    padding-bottom: 0;
}

.wds-section__title[b-39o6eozcs7] {
    font-size: var(--font-size-text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wds-amount[b-39o6eozcs7] {
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Minimal spacing wrapper around InfoRowItem list — no border/card chrome needed */
.wds-detail-rows[b-39o6eozcs7] {
    margin-top: var(--spacing-1);
}

.wds-note[b-39o6eozcs7] {
    font-size: var(--font-size-text-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-1);
}