@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.nv5wbdzqw1.bundle.scp.css';

/* /Components/QrCodeDisplayDialog.razor.rz.scp.css */
/* QrCodeDisplayDialog.razor.css — scoped styles for QR code modal dialog */

.qr-dialog[b-rd5ped39zj] {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    animation: scaleIn var(--duration-slow) var(--ease-out) both;
    max-width: 400px;
    margin: 0 auto;
}

.qr-dialog__header[b-rd5ped39zj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
}

.qr-dialog__title[b-rd5ped39zj] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

[b-rd5ped39zj] .qr-dialog__close {
    min-width: 48px;
    min-height: 48px;
}

.qr-dialog__content[b-rd5ped39zj] {
    display: flex;
    flex-direction: column;
}

/* Loading & Error states */
.qr-dialog__state[b-rd5ped39zj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-10) 0;
    gap: var(--sp-4);
    text-align: center;
}

.qr-dialog__state-text[b-rd5ped39zj] {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--text-secondary);
    margin: 0;
}

.qr-dialog__error-icon[b-rd5ped39zj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* QR Code display */
.qr-dialog__qr-container[b-rd5ped39zj] {
    display: flex;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--surface-primary);
    border-radius: var(--sp-3);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--sp-5);
}

.qr-dialog__qr-image[b-rd5ped39zj] {
    width: 200px;
    height: 200px;
    border-radius: var(--sp-2);
}

/* Family ID display */
.qr-dialog__id-display[b-rd5ped39zj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-secondary);
    border-radius: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.qr-dialog__id-label[b-rd5ped39zj] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.qr-dialog__id-value[b-rd5ped39zj] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* Action buttons */
.qr-dialog__actions[b-rd5ped39zj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

[b-rd5ped39zj] .qr-dialog__actions fluent-button {
    min-height: 48px;
}

/* Help text */
.qr-dialog__help[b-rd5ped39zj] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--accent-subtle);
    border-radius: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}
/* /Components/Shared/AvatarUpload.razor.rz.scp.css */
.avatar-upload[b-4slm0sk50p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

.avatar-upload__preview[b-4slm0sk50p] {
    position: relative;
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-default);
    transition: border-color var(--duration-base) var(--ease-out);
}

.avatar-upload__preview:hover[b-4slm0sk50p] {
    border-color: var(--accent-primary);
}

.avatar-upload__preview:focus-visible[b-4slm0sk50p] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-color: var(--accent-primary);
}

.avatar-upload__image[b-4slm0sk50p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload__overlay[b-4slm0sk50p] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-inverse);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.avatar-upload__preview:hover .avatar-upload__overlay[b-4slm0sk50p] {
    opacity: 1;
}

.avatar-upload__input[b-4slm0sk50p] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[b-4slm0sk50p] .avatar-upload__remove {
    font-size: var(--text-sm);
    color: var(--error-primary);
}
/* /Components/Shared/BottomNavBar.razor.rz.scp.css */
.bottom-nav[b-i4zs74lg3k] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface-primary);
    border-top: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}

.bottom-nav__tab[b-i4zs74lg3k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px 0;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}

.bottom-nav__tab:focus[b-i4zs74lg3k] {
    outline: none;
}

.bottom-nav__tab:focus-visible[b-i4zs74lg3k] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.bottom-nav__tab--active[b-i4zs74lg3k] {
    color: var(--accent-primary);
}

.bottom-nav__indicator[b-i4zs74lg3k] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--accent-primary);
    border-radius: 0 0 2px 2px;
}

.bottom-nav__icon[b-i4zs74lg3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    position: relative;
}

.bottom-nav__badge[b-i4zs74lg3k] {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--error-primary);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: var(--font-bold);
    line-height: 16px;
    text-align: center;
    z-index: 1;
}

.bottom-nav__label[b-i4zs74lg3k] {
    font-size: var(--nav-label-size);
    font-weight: var(--font-medium);
    line-height: 1;
}

@media (min-width: 768px) {
    .bottom-nav[b-i4zs74lg3k] {
        max-width: var(--page-max-width);
        margin: 0 auto;
        border-radius: var(--card-radius) var(--card-radius) 0 0;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state-component[b-ravrb2vlp4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    animation: fadeSlideUp var(--duration-entrance) var(--ease-out) both;
}

.empty-state-component__icon[b-ravrb2vlp4] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-subtle) 0%, var(--accent-muted) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-state-component__title[b-ravrb2vlp4] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.empty-state-component__description[b-ravrb2vlp4] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 260px;
    line-height: 1.55;
}
/* /Components/Shared/ErrorState.razor.rz.scp.css */
.error-state[b-99bzz8e84q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    animation: fadeSlideUp var(--duration-entrance) var(--ease-out) both;
}

.error-state__icon[b-99bzz8e84q] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--error-subtle) 0%, var(--surface-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-state__title[b-99bzz8e84q] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.error-state__message[b-99bzz8e84q] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 280px;
    line-height: 1.55;
}
/* /Components/Shared/KpiCard.razor.rz.scp.css */
.kpi-card[b-23wn3taib5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-4);
    background: var(--surface-elevated);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    animation: fadeSlideUp var(--duration-entrance) var(--ease-out) both;
}

.kpi-card--clickable[b-23wn3taib5] {
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
}

.kpi-card--clickable:hover[b-23wn3taib5] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-card--clickable:active[b-23wn3taib5] {
    transform: scale(0.98);
}

.kpi-card--clickable:focus-visible[b-23wn3taib5] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.kpi-card__icon[b-23wn3taib5] {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-2);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-subtle);
    color: var(--accent-primary);
}

/* Tint variants for icon backgrounds */
.kpi-card__icon.tint-saffron[b-23wn3taib5] {
    background: var(--saffron-subtle);
    color: var(--saffron-primary);
}
.kpi-card__icon.tint-success[b-23wn3taib5] {
    background: var(--success-subtle);
    color: var(--success-primary);
}
.kpi-card__icon.tint-info[b-23wn3taib5] {
    background: var(--info-subtle);
    color: var(--info-primary);
}

.kpi-card__value[b-23wn3taib5] {
    font-size: 34px;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}

.kpi-card__label[b-23wn3taib5] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-regular);
}

.kpi-card__trend[b-23wn3taib5] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    margin-top: var(--sp-2);
    padding: 2px var(--sp-2);
    border-radius: var(--badge-radius);
}

.kpi-card__trend--up[b-23wn3taib5] {
    color: var(--success-primary);
    background: var(--success-subtle);
}

.kpi-card__trend--down[b-23wn3taib5] {
    color: var(--error-primary);
    background: var(--error-subtle);
}

.kpi-card__trend--flat[b-23wn3taib5] {
    color: var(--text-tertiary);
    background: var(--surface-tertiary);
}
/* /Components/Shared/LoadingSkeleton.razor.rz.scp.css */
.loading-skeleton[b-1p13k22cow] {
    padding: var(--sp-4);
}

/* Shimmer base */
.skeleton-line[b-1p13k22cow],
.skeleton-circle[b-1p13k22cow],
.skeleton-cell[b-1p13k22cow] {
    background: linear-gradient(90deg,
        var(--surface-tertiary) 25%,
        var(--surface-secondary) 37%,
        var(--surface-tertiary) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--sp-1);
}

.skeleton-line--title[b-1p13k22cow] {
    height: 16px;
    width: 60%;
    margin-bottom: var(--sp-3);
}

.skeleton-line--text[b-1p13k22cow] {
    height: 12px;
    width: 100%;
    margin-bottom: var(--sp-2);
}

.skeleton-line--short[b-1p13k22cow] {
    width: 40%;
}

.skeleton-line--value[b-1p13k22cow] {
    height: 24px;
    width: 50%;
    margin: var(--sp-2) auto;
}

.skeleton-line--label[b-1p13k22cow] {
    height: 10px;
    width: 70%;
    margin: 0 auto;
}

/* Circle */
.skeleton-circle[b-1p13k22cow] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-circle--sm[b-1p13k22cow] {
    width: 32px;
    height: 32px;
}

.skeleton-circle--lg[b-1p13k22cow] {
    width: 64px;
    height: 64px;
}

/* Card */
.skeleton-card[b-1p13k22cow] {
    padding: var(--sp-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
}

/* List */
.skeleton-list-item[b-1p13k22cow] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
}

.skeleton-list-item + .skeleton-list-item[b-1p13k22cow] {
    border-top: 1px solid var(--border-subtle);
}

.skeleton-lines[b-1p13k22cow] {
    flex: 1;
}

/* KPI Row */
.skeleton-kpi-row[b-1p13k22cow] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.skeleton-kpi[b-1p13k22cow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
}

/* Calendar */
.skeleton-calendar[b-1p13k22cow] {
    padding: var(--sp-4);
}

.skeleton-grid[b-1p13k22cow] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.skeleton-cell[b-1p13k22cow] {
    aspect-ratio: 1;
    border-radius: var(--sp-2);
}

/* Avatar group */
.skeleton-avatar-group[b-1p13k22cow] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
/* /Components/Shared/MediaUpload.razor.rz.scp.css */
.media-upload__grid[b-7rp9rw0o2i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.media-upload__preview[b-7rp9rw0o2i] {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.media-upload__image[b-7rp9rw0o2i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-upload__remove[b-7rp9rw0o2i] {
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-1);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-out);
    /* Expand touch target to 48×48px without changing visual size */
    padding: 0;
}

.media-upload__remove[b-7rp9rw0o2i]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
}

.media-upload__remove:hover[b-7rp9rw0o2i] {
    background: rgba(0, 0, 0, 0.8);
}

.media-upload__remove:focus-visible[b-7rp9rw0o2i] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.media-upload__add[b-7rp9rw0o2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    aspect-ratio: 1;
    min-height: 48px;
    min-width: 48px;
    border: 2px dashed var(--border-default);
    border-radius: var(--sp-3);
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--duration-base) var(--ease-out);
    position: relative;
}

.media-upload__add:hover[b-7rp9rw0o2i] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-subtle);
}

.media-upload__add:focus-within[b-7rp9rw0o2i],
.media-upload__add:focus-visible[b-7rp9rw0o2i] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-color: var(--accent-primary);
}

.media-upload__add--disabled[b-7rp9rw0o2i] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.media-upload__add input[type="file"][b-7rp9rw0o2i] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.media-upload__add-label[b-7rp9rw0o2i] {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.media-upload__offline-hint[b-7rp9rw0o2i] {
    font-size: var(--text-sm);
    color: var(--warning-primary);
    margin-top: var(--sp-2);
}
/* /Components/Shared/MoreMenuSheet.razor.rz.scp.css */
/* ─── Backdrop overlay ───────────────────────────────────────────────────── */
.more-overlay[b-cnkmw15qut] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.more-overlay--open[b-cnkmw15qut] {
    opacity: 1;
    pointer-events: all;
}

/* ─── Sheet container — slides up from bottom ───────────────────────────── */
.more-sheet[b-cnkmw15qut] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 901;
    background: var(--surface-elevated);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04), 0 -8px 40px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Start below viewport — transition to visible */
    transform: translateY(100%);
    transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.more-sheet--open[b-cnkmw15qut] {
    transform: translateY(0);
}

/* ─── Drag handle ────────────────────────────────────────────────────────── */
.more-sheet__handle[b-cnkmw15qut] {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-default);
    margin: 12px auto 16px;
    flex-shrink: 0;
}

/* ─── Loading / empty / error states ────────────────────────────────────── */
.more-sheet__state[b-cnkmw15qut] {
    padding: 0 20px 20px;
}

/* ─── 3-column navigation grid (matches home quick-action cards) ─────────── */
.more-sheet__grid[b-cnkmw15qut] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 20px 16px;
}

.more-sheet__grid-item[b-cnkmw15qut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    min-height: 80px;
    background: var(--surface-primary);
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.more-sheet__grid-item:hover[b-cnkmw15qut] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.more-sheet__grid-item:active[b-cnkmw15qut] {
    transform: scale(0.96);
    box-shadow: var(--shadow-sm);
}

.more-sheet__grid-item:focus-visible[b-cnkmw15qut] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ─── Grid icon container (colored pill, matches home quick-action icons) ── */
.more-sheet__grid-icon[b-cnkmw15qut] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.more-sheet__grid-icon--accent[b-cnkmw15qut]  { background: var(--accent-subtle);    color: var(--accent-primary); }
.more-sheet__grid-icon--warning[b-cnkmw15qut] { background: var(--warning-subtle);   color: var(--warning-primary); }
.more-sheet__grid-icon--saffron[b-cnkmw15qut] { background: var(--saffron-subtle);   color: var(--saffron-hover); }
.more-sheet__grid-icon--error[b-cnkmw15qut]   { background: var(--error-subtle);     color: var(--error-primary); }
.more-sheet__grid-icon--info[b-cnkmw15qut]    { background: var(--info-subtle);      color: var(--info-primary); }
.more-sheet__grid-icon--success[b-cnkmw15qut] { background: var(--success-subtle);   color: var(--success-primary); }
.more-sheet__grid-icon--neutral[b-cnkmw15qut] { background: var(--surface-tertiary); color: var(--text-secondary); }

/* ─── Grid item label ────────────────────────────────────────────────────── */
.more-sheet__grid-label[b-cnkmw15qut] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

/* ─── Full-width utility rows (theme toggle, logout) ────────────────────── */
.more-sheet__row[b-cnkmw15qut] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    min-height: 56px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease;
}

.more-sheet__row:hover[b-cnkmw15qut]  { background: var(--surface-tertiary); }
.more-sheet__row:active[b-cnkmw15qut] { background: var(--surface-inset); }

.more-sheet__row:focus-visible[b-cnkmw15qut] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    background: var(--accent-subtle);
}

.more-sheet__row--danger[b-cnkmw15qut] { color: var(--error-primary); }

.more-sheet__row-icon[b-cnkmw15qut] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-subtle);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.more-sheet__row-icon--danger[b-cnkmw15qut] {
    background: var(--error-subtle);
    color: var(--error-primary);
}

.more-sheet__row-label[b-cnkmw15qut] { flex: 1; }

/* ─── Divider ────────────────────────────────────────────────────────────── */
.more-sheet__divider[b-cnkmw15qut] {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-default) 30%, var(--border-default) 70%, transparent);
    opacity: 0.5;
    margin: 4px 20px;
}

/* ─── Side-by-side utility buttons (theme + logout) ─────────────────────── */
.more-sheet__utility-row[b-cnkmw15qut] {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
}

.more-sheet__utility-btn[b-cnkmw15qut] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    min-height: 72px;
    background: var(--surface-primary);
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.more-sheet__utility-btn:hover[b-cnkmw15qut]  { background: var(--surface-secondary); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05); }
.more-sheet__utility-btn:active[b-cnkmw15qut] { transform: scale(0.96); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); }

.more-sheet__utility-btn:focus-visible[b-cnkmw15qut] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.more-sheet__utility-btn--danger[b-cnkmw15qut] { color: var(--error-primary); }

.more-sheet__utility-icon[b-cnkmw15qut] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-subtle);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.more-sheet__utility-icon--danger[b-cnkmw15qut] {
    background: var(--error-subtle);
    color: var(--error-primary);
}

.more-sheet__utility-label[b-cnkmw15qut] {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    text-align: center;
}

/* ─── Bottom spacer so last row clears the safe-area / inertia ──────────── */
.more-sheet__bottom-spacer[b-cnkmw15qut] {
    height: 20px;
    flex-shrink: 0;
}
/* /Components/Shared/OfflineBanner.razor.rz.scp.css */
.offline-banner[b-syvduh6g92] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--warning-subtle);
    border-bottom: 1px solid var(--warning-primary);
    color: var(--warning-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    animation: fadeSlideUp var(--duration-base) var(--ease-out);
}

.offline-banner__text[b-syvduh6g92] {
    font-weight: var(--font-semibold);
}

.offline-banner__detail[b-syvduh6g92] {
    color: var(--text-secondary);
    font-weight: var(--font-regular);
}

.offline-banner__dismiss[b-syvduh6g92] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: 50%;
    transition: background var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.offline-banner__dismiss:hover[b-syvduh6g92] {
    background: var(--surface-tertiary);
}

.offline-banner__dismiss:focus-visible[b-syvduh6g92] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
/* /Components/Shared/PageShell.razor.rz.scp.css */
.page-shell-header[b-33y0jg5s9q] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 16px;
    background: var(--header-bg);
    border: none;
    box-shadow: var(--header-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: visible;
}

.page-shell-header__left[b-33y0jg5s9q] {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.page-shell-header__title[b-33y0jg5s9q] {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.025em;
}

.page-shell-header__title:focus[b-33y0jg5s9q],
.page-shell-header__title:focus-visible[b-33y0jg5s9q] {
    outline: none;
}

.page-shell-header__right[b-33y0jg5s9q] {
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 4px;
    padding-right: 2px;
    overflow: visible;
}

[b-33y0jg5s9q] .page-shell-back {
    min-width: 48px;
    min-height: 48px;
}

[b-33y0jg5s9q] .page-shell-header__right fluent-button,
[b-33y0jg5s9q] .page-shell-header__right button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}
/* /Components/Shared/PaymentSheet.razor.rz.scp.css */
/* PaymentSheet.razor.css — scoped styles for the payment bottom sheet */

.payment-sheet__backdrop[b-cc3ncn4cpg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 800;
    animation: fadeIn-b-cc3ncn4cpg var(--duration-base) var(--ease-out);
}

.payment-sheet[b-cc3ncn4cpg] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-primary);
    border-radius: var(--sp-6) var(--sp-6) 0 0;
    padding: var(--sp-3) var(--sp-6) var(--sp-10);
    z-index: 801;
    box-shadow: var(--shadow-xl);
    animation: slideUp-b-cc3ncn4cpg var(--duration-slow) var(--ease-spring);
    max-height: 80vh;
    overflow-y: auto;
}

.payment-sheet__handle[b-cc3ncn4cpg] {
    width: var(--sp-10);
    height: var(--sp-1);
    background: var(--border-default);
    border-radius: 2px;
    margin: 0 auto var(--sp-5);
}

.payment-sheet__header[b-cc3ncn4cpg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
}

.payment-sheet__title[b-cc3ncn4cpg] {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.payment-sheet__close[b-cc3ncn4cpg] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: var(--text-md);
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: var(--sp-2);
    transition: background var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.payment-sheet__close:hover[b-cc3ncn4cpg] {
    background: var(--surface-tertiary);
}

.payment-sheet__close:active[b-cc3ncn4cpg] {
    background: var(--surface-inset);
}

.payment-sheet__close:focus-visible[b-cc3ncn4cpg] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    background: var(--accent-subtle);
}

.payment-sheet__body[b-cc3ncn4cpg] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.payment-sheet__row[b-cc3ncn4cpg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.payment-sheet__label[b-cc3ncn4cpg] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.payment-sheet__value[b-cc3ncn4cpg] {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-align: right;
    max-width: 60%;
}

.payment-sheet__amount[b-cc3ncn4cpg] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.payment-sheet__footer[b-cc3ncn4cpg] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Buttons */
.payment-sheet__btn[b-cc3ncn4cpg] {
    width: 100%;
    min-height: var(--btn-height);
    padding: 0 var(--sp-5);
    border-radius: var(--btn-radius);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: none;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.payment-sheet__btn:active[b-cc3ncn4cpg] {
    transform: scale(0.98);
}

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

.payment-sheet__btn:focus-visible[b-cc3ncn4cpg] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.payment-sheet__btn--primary[b-cc3ncn4cpg] {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.payment-sheet__btn--primary:hover:not(:disabled)[b-cc3ncn4cpg] {
    background: var(--accent-hover);
}

.payment-sheet__btn--ghost[b-cc3ncn4cpg] {
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

.payment-sheet__btn--ghost:hover:not(:disabled)[b-cc3ncn4cpg] {
    background: var(--surface-tertiary);
}

/* Processing state */
.payment-sheet__processing[b-cc3ncn4cpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12) 0;
    gap: var(--sp-5);
}

.payment-sheet__processing-text[b-cc3ncn4cpg] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* Result states */
.payment-sheet__result[b-cc3ncn4cpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-10) 0 var(--sp-5);
    gap: var(--sp-3);
    text-align: center;
}

.payment-sheet__result-icon[b-cc3ncn4cpg] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-primary);
    color: var(--text-inverse);
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-sheet__result-icon--error[b-cc3ncn4cpg] {
    background: var(--error-primary);
}

.payment-sheet__result-title[b-cc3ncn4cpg] {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.payment-sheet__result-sub[b-cc3ncn4cpg] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--sp-4);
}

@keyframes slideUp-b-cc3ncn4cpg {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes fadeIn-b-cc3ncn4cpg {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Shared/PullToRefresh.razor.rz.scp.css */
.pull-to-refresh[b-ehied6a9wi] {
    position: relative;
}

.pull-to-refresh__indicator[b-ehied6a9wi] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) 0;
    animation: fadeSlideUp var(--duration-base) var(--ease-out);
}
/* /Components/Shared/SectionHeader.razor.rz.scp.css */
.section-header[b-06putm6r67] {
    display: flex;
    /* center: clean vertical alignment for single-line titles with action buttons */
    align-items: center;
    justify-content: space-between;
    margin-top: var(--sp-6, 24px);
    margin-bottom: var(--sp-4, 16px);
    padding: 0 var(--page-padding-x, 20px);
}

.section-header__text[b-06putm6r67] {
    flex: 1;
    min-width: 0;
}

.section-header__title[b-06putm6r67] {
    /* 17px bold: premium apps (Spotify, Headspace, Calm, Apple Music) universally use
       ~17px for mobile section headers. This lets the weight (700 bold vs 600 semibold
       for card titles) provide hierarchy rather than fighting for px on a 390px screen.
       20px at this viewport causes wrapping when paired with action buttons. */
    font-size: var(--text-md, 17px);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-tight, 1.2);
    /* Safety net: section header titles NEVER wrap in premium apps.
       Any overflow is truncated with ellipsis — wrapping is never acceptable. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-header__subtitle[b-06putm6r67] {
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: var(--sp-1) 0 0;
}

.section-header__action[b-06putm6r67] {
    flex-shrink: 0;
    margin-left: var(--sp-3);
}

/* Constrain FluentButton / plain button height in action slot so it
   doesn't eat into the margin-bottom spacing below the header. */
[b-06putm6r67] .section-header__action fluent-button,
[b-06putm6r67] .section-header__action button {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary);
    padding: 4px 12px;
    min-height: unset;
    height: auto;
    line-height: 1.4;
}
/* /Components/Shared/StarRating.razor.rz.scp.css */
.star-rating[b-977omsit1z] {
    display: inline-flex;
    gap: var(--sp-1);
}

.star-rating__star[b-977omsit1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: 50%;
    transition: all var(--duration-fast) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.star-rating__star:focus-visible[b-977omsit1z] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.star-rating__star:not(:disabled):hover[b-977omsit1z] {
    transform: scale(1.15);
}

.star-rating__star:not(:disabled):active[b-977omsit1z] {
    transform: scale(0.95);
}

.star-rating__star--filled[b-977omsit1z] {
    color: var(--saffron-primary);
    animation: scaleIn var(--duration-fast) var(--ease-spring) both;
}

.star-rating__star:disabled[b-977omsit1z] {
    cursor: default;
    opacity: 0.8;
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
.status-badge[b-a989ztus6e] {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    min-height: 22px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--font-medium);
    line-height: 1.35;
    white-space: nowrap;
}

.status-badge--default[b-a989ztus6e] {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

.status-badge--accent[b-a989ztus6e] {
    background: var(--accent-subtle);
    color: var(--accent-primary);
}

.status-badge--success[b-a989ztus6e] {
    background: var(--success-subtle);
    color: var(--success-primary);
}

.status-badge--warning[b-a989ztus6e] {
    background: var(--warning-subtle);
    color: var(--warning-primary);
}

.status-badge--error[b-a989ztus6e] {
    background: var(--error-subtle);
    color: var(--error-primary);
}

.status-badge--info[b-a989ztus6e] {
    background: var(--info-subtle);
    color: var(--info-primary);
}

.status-badge--saffron[b-a989ztus6e] {
    background: var(--saffron-subtle);
    color: var(--saffron-primary);
}

/* Pill variant — full-round for inline chips/tags */
.status-badge--pill[b-a989ztus6e] {
    border-radius: 9999px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-xfvq0o03em] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--surface-secondary);
}

.app-content[b-xfvq0o03em] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    scroll-behavior: smooth;
}