/* /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-card-grid[b-lw6dqfg4ir] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

@media (max-width: 1600px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 1440px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .character-card-grid[b-lw6dqfg4ir] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /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/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;
    /* Reveal a sliver of focus-ring / shadow when a card is focused without
       being clipped by the scroll container. */
    padding-bottom: var(--spacing-2);
}

    .top-earners-list > .info-card[b-ht5i7orzwg] {
        /* Hold each card at its native width so the row scrolls instead of
           crushing the cards into illegibility on narrow viewports. */
        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);
}
/* /Components/Pages/Admin/ParentCheckoutPage.razor.rz.scp.css */
.checkout-layout[b-dy90d2fk0o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
    max-width: 560px;
}

.checkout-card[b-dy90d2fk0o] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
}

.checkout-card__title[b-dy90d2fk0o] {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-4) 0;
}

.checkout-summary[b-dy90d2fk0o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.checkout-summary__row[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.checkout-summary__row--total[b-dy90d2fk0o] {
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-primary);
}

.checkout-summary__divider[b-dy90d2fk0o] {
    border-top: 1px solid var(--border-secondary);
}

.payment-options[b-dy90d2fk0o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.payment-option[b-dy90d2fk0o] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s;
}

.payment-option--active[b-dy90d2fk0o] {
    border-color: var(--border-brand);
    background: var(--bg-brand-secondary);
}

.payment-option--disabled[b-dy90d2fk0o] {
    opacity: 0.5;
    cursor: not-allowed;
}

.payment-option__content[b-dy90d2fk0o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.payment-option__label[b-dy90d2fk0o] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.payment-option__detail[b-dy90d2fk0o] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.payment-option__warning[b-dy90d2fk0o] {
    font-size: var(--text-xs);
    color: var(--text-error-primary);
    font-weight: 500;
}

.checkout-actions[b-dy90d2fk0o] {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-3);
}
/* /Components/Pages/Admin/ParentDashboardPage.razor.rz.scp.css */
.kid-card[b-rqtfi7g3el] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kid-card:hover[b-rqtfi7g3el] {
    border-color: var(--border-brand, var(--primary));
    box-shadow: var(--shadow-xs);
}
/* /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 */
/* Hero card — avatar + name + badges. No layout primitive covers a horizontal
   identity block with a large avatar, so scope it here. Mirrors
   MemberDetailPage.razor.css / CreatorDetailPage.razor.css. */
.parent-kid-hero[b-05809kx2b2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
}

.parent-kid-hero__body[b-05809kx2b2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.parent-kid-hero__name[b-05809kx2b2] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.parent-kid-hero__badges[b-05809kx2b2] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* Mini Save/Cancel footer inside the edit InfoPanel. */
.profile-edit-footer[b-05809kx2b2] {
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
    margin-top: var(--spacing-4);
}

/* Dim tabs while in edit mode so the scope of the edit is clear. */
.tabs-disabled[b-05809kx2b2] {
    opacity: 0.5;
    pointer-events: none;
}
/* /Components/Pages/Admin/ParentKidsListPage.razor.rz.scp.css */
.kids-grid[b-zb3ic0xnr8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

.kid-card[b-zb3ic0xnr8] {
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-xs);
}

.kid-card:hover[b-zb3ic0xnr8] {
    border-color: var(--border-brand);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.kid-card__header[b-zb3ic0xnr8] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.kid-card__avatar[b-zb3ic0xnr8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.kid-card__avatar-fallback[b-zb3ic0xnr8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-brand-secondary);
    color: var(--text-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: 600;
    flex-shrink: 0;
}

.kid-card__info[b-zb3ic0xnr8] {
    flex: 1;
    min-width: 0;
}

.kid-card__name[b-zb3ic0xnr8] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kid-card__badges[b-zb3ic0xnr8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.kid-card__stats[b-zb3ic0xnr8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    border-top: 1px solid var(--border-secondary);
    padding-top: var(--spacing-4);
}

.kid-card__stat[b-zb3ic0xnr8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.kid-card__stat-value[b-zb3ic0xnr8] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.kid-card__stat-label[b-zb3ic0xnr8] {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.2;
}
/* /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);
}

.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/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/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 on the left, breakdown table on the right. */
.pool-share-grid[b-8msfb30bw5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--spacing-6);
    align-items: start;
}
.pool-share-chart[b-8msfb30bw5] { min-width: 0; }
@media (max-width: 1100px) {
    .pool-share-grid[b-8msfb30bw5] { grid-template-columns: 1fr; }
}

/* 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/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/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/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);
}