/* /Components/Layout/AppLayout.razor.rz.scp.css */
/* ============================================================
   AppLayout — authenticated app shell
   Mobile-first, desktop sidebar at >= 768px
   ============================================================ */

/* ------ Outer shell ----------------------------------------- */

.app-layout[b-nfxrfz3ncw] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
}

/* ------ Header ---------------------------------------------- */

.app-header[b-nfxrfz3ncw] {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
    height: var(--app-header-height);
    flex-shrink: 0;
}

.app-header__inner[b-nfxrfz3ncw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
}

.app-header__brand[b-nfxrfz3ncw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--app-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.app-header__brand:hover[b-nfxrfz3ncw] {
    color: var(--app-primary);
    text-decoration: none;
}

.app-header__brand-icon[b-nfxrfz3ncw] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.app-header__actions[b-nfxrfz3ncw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ------ Avatar ---------------------------------------------- */

.app-avatar[b-nfxrfz3ncw] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
}

/* ------ Body (sidebar + content) ---------------------------- */

.app-body[b-nfxrfz3ncw] {
    display: flex;
    flex: 1;
    /* on mobile: stacked, no sidebar visible */
    /* leave room for sticky bottom nav */
    padding-bottom: var(--app-bottom-nav-height);
}

/* ------ Sidebar (desktop only) ------------------------------ */

.app-sidebar[b-nfxrfz3ncw] {
    width: var(--app-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: var(--app-header-height);
    height: calc(100vh - var(--app-header-height));
    overflow-y: auto;
    background: var(--app-bg);
    border-right: 1px solid var(--app-border);
    flex-direction: column;
    padding: 1rem 0;
    transition: top 0.2s ease, height 0.2s ease;
}

/* When the audio player bar is visible, push the sidebar down so it no longer
   overlaps with the player and its scrollable area is sized correctly. */
.app-layout:has(.audio-player-bar--visible) .app-sidebar[b-nfxrfz3ncw] {
    top: calc(var(--app-header-height) + var(--app-player-height));
    height: calc(100vh - var(--app-header-height) - var(--app-player-height));
}

.app-sidebar__nav[b-nfxrfz3ncw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 0.5rem;
}

[b-nfxrfz3ncw] .app-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--app-text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

[b-nfxrfz3ncw] .app-sidebar__link:hover {
    color: var(--app-text);
    background: var(--app-bg-surface-hover);
    text-decoration: none;
}

[b-nfxrfz3ncw] .app-sidebar__link.active {
    color: var(--app-primary);
    background: var(--app-active-bg);
}

.app-sidebar__icon[b-nfxrfz3ncw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.app-sidebar__icon svg[b-nfxrfz3ncw] {
    width: 100%;
    height: 100%;
}

/* ------ Main content area ----------------------------------- */

.app-content[b-nfxrfz3ncw] {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    /* `clip`, not `hidden`: per the CSS overflow spec, setting overflow-x to
       anything other than `visible` or `clip` forces overflow-y to compute as
       `auto`, which turns this element into a sticky-positioning containing
       block for its descendants (e.g. Articles.razor's .articles-header) instead
       of the viewport. WebKit has a known history of not sticking correctly in
       that implicitly-promoted case (confirmed independently: Chromium sticks
       fine at a real mobile viewport, so this genuinely is an engine gap, not a
       layout bug). `clip` is explicitly exempt from that promotion rule, so
       descendants stick against the viewport again — the same mechanism
       .app-header/.app-sidebar already rely on. Same visual clipping either way.
       Supported since Safari 16 / Chrome 90 / Firefox 69, well within this app's
       target range. */
    overflow-x: clip;
}

/* ------ Bottom Navigation (mobile only) --------------------- */

.app-bottom-nav[b-nfxrfz3ncw] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--app-bottom-nav-height);
    background: var(--app-bg);
    border-top: 1px solid var(--app-border);
    align-items: stretch;
}

[b-nfxrfz3ncw] .app-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: var(--app-text-muted);
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.25rem 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    [b-nfxrfz3ncw] .app-bottom-nav__item:hover {
        color: var(--app-text);
        text-decoration: none;
    }
}

[b-nfxrfz3ncw] .app-bottom-nav__item:active {
    color: var(--app-text);
    text-decoration: none;
}

[b-nfxrfz3ncw] .app-bottom-nav__item.active {
    color: var(--app-primary);
}

.app-bottom-nav__icon[b-nfxrfz3ncw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
}

.app-bottom-nav__icon svg[b-nfxrfz3ncw] {
    width: 100%;
    height: 100%;
}

.app-bottom-nav__label[b-nfxrfz3ncw] {
    line-height: 1;
}

/* ------ Desktop overrides (>= 768px) ------------------------ */

@media (min-width: 768px) {
    .app-body[b-nfxrfz3ncw] {
        /* no bottom nav on desktop */
        padding-bottom: 0;
    }
}

/* ============================================================
   Shared dark-theme overrides for Bootstrap components
   Applied to all pages within AppLayout — avoids per-page duplication.
   ============================================================ */

/* ------ Buttons -------------------------------------------- */

[b-nfxrfz3ncw] .btn-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}

@media (hover: hover) {
    [b-nfxrfz3ncw] .btn-primary:hover {
        background-color: var(--app-primary-hover);
        border-color: var(--app-primary-hover);
    }
}

[b-nfxrfz3ncw] .btn-primary:focus,
[b-nfxrfz3ncw] .btn-primary:active {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

[b-nfxrfz3ncw] .btn-outline-secondary {
    color: var(--app-text-muted);
    border-color: var(--app-border);
}

@media (hover: hover) {
    [b-nfxrfz3ncw] .btn-outline-secondary:hover {
        background-color: var(--app-bg-surface-hover);
        border-color: var(--app-border);
        color: var(--app-text);
    }
}

[b-nfxrfz3ncw] .btn-outline-secondary:active {
    background-color: var(--app-bg-surface-hover);
    border-color: var(--app-border);
    color: var(--app-text);
}

[b-nfxrfz3ncw] .btn-outline-danger {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

@media (hover: hover) {
    [b-nfxrfz3ncw] .btn-outline-danger:hover {
        background-color: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.6);
        color: #fca5a5;
    }
}

[b-nfxrfz3ncw] .btn-outline-danger:active {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

/* ------ Forms ---------------------------------------------- */

[b-nfxrfz3ncw] .form-control,
[b-nfxrfz3ncw] .form-select {
    background-color: var(--app-bg);
    border-color: var(--app-border);
    color: var(--app-text);
    font-size: 0.875rem;
}

[b-nfxrfz3ncw] .form-control:focus,
[b-nfxrfz3ncw] .form-select:focus {
    background-color: var(--app-bg);
    border-color: var(--app-primary);
    color: var(--app-text);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

[b-nfxrfz3ncw] .form-control::placeholder {
    color: var(--app-text-muted);
}

[b-nfxrfz3ncw] .form-label {
    color: var(--app-text);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

[b-nfxrfz3ncw] .form-text {
    color: var(--app-text-muted);
    font-size: 0.75rem;
}

[b-nfxrfz3ncw] .form-check-input {
    background-color: var(--app-bg);
    border-color: var(--app-border);
}

[b-nfxrfz3ncw] .form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

[b-nfxrfz3ncw] .form-check-label {
    color: var(--app-text);
    font-size: 0.875rem;
}

/* ------ Alerts --------------------------------------------- */

[b-nfxrfz3ncw] .alert {
    font-size: 0.875rem;
    border-radius: 8px;
}

/* ------ Text muted ----------------------------------------- */

[b-nfxrfz3ncw] .text-muted {
    color: var(--app-text-muted) !important;
}

/* ------ Blazor error UI ------------------------------------ */

#blazor-error-ui[b-nfxrfz3ncw] {
    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-nfxrfz3ncw] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    background: none;
    border: none;
    font-size: 1rem;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* ============================================================
   PublicLayout — header, footer, outer shell
   ============================================================ */

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

/* ------ Header ---------------------------------------------- */

.public-header[b-v3tyoimhyo] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fv-border);
}

.public-header__inner[b-v3tyoimhyo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.public-header__brand[b-v3tyoimhyo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--fv-text);
}

@media (hover: hover) {
    .public-header__brand:hover[b-v3tyoimhyo] {
        text-decoration: none;
        color: var(--fv-primary);
    }
}

/* Microphone icon via inline SVG background */
.public-header__brand-icon[b-v3tyoimhyo] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.public-header__brand-name[b-v3tyoimhyo] {
    background: var(--fv-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.public-header__nav[b-v3tyoimhyo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ------ Main content --------------------------------------- */

.public-main[b-v3tyoimhyo] {
    flex: 1;
}

/* ------ Footer --------------------------------------------- */

.public-footer[b-v3tyoimhyo] {
    background: var(--fv-surface);
    border-top: 1px solid var(--fv-border);
    padding: 1.5rem 0;
}

.public-footer__inner[b-v3tyoimhyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.public-footer__copy[b-v3tyoimhyo] {
    font-size: 0.875rem;
    color: var(--fv-text-muted);
}

.public-footer__links[b-v3tyoimhyo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
}

.public-footer__links a[b-v3tyoimhyo] {
    font-size: 0.875rem;
    color: var(--fv-text-muted);
    text-decoration: none;
}

@media (hover: hover) {
    .public-footer__links a:hover[b-v3tyoimhyo] {
        color: var(--fv-primary);
        text-decoration: underline;
    }
}

@media (min-width: 640px) {
    .public-footer__inner[b-v3tyoimhyo] {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ------ Blazor error UI ------------------------------------ */

#blazor-error-ui[b-v3tyoimhyo] {
    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-v3tyoimhyo] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    background: none;
    border: none;
    font-size: 1rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l00qk5k2sw],
.components-reconnect-repeated-attempt-visible[b-l00qk5k2sw],
.components-reconnect-failed-visible[b-l00qk5k2sw],
.components-pause-visible[b-l00qk5k2sw],
.components-resume-failed-visible[b-l00qk5k2sw],
.components-rejoining-animation[b-l00qk5k2sw] {
    display: none;
}

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


#components-reconnect-modal[b-l00qk5k2sw] {
    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-l00qk5k2sw 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

@media (hover: hover) {
    #components-reconnect-modal button:hover[b-l00qk5k2sw] {
        background-color: #3b6ea2;
    }
}

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

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

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

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

@keyframes components-rejoining-animation-b-l00qk5k2sw {
    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/App/Admin.razor.rz.scp.css */
/* ============================================================
   READ THIS BEFORE TOUCHING TEXT COLOR ON THIS PAGE.
   Admin has hit "text is invisible" bugs from this more than once — the
   trap keeps re-forming because the cause lives in a DIFFERENT file
   (AppLayout.razor.css) than the symptom (this page).

   AppLayout.razor.css applies ::deep .form-control/.form-select/.form-label/
   .text-muted overrides to EVERY page rendered under the app shell,
   unconditionally — it assumes dark text/inputs sit on a DARK .card. That's
   only true for pages wrapped in ".settings-page" (Settings/Billing/
   MergeAccounts), which app.css recolors to match. Admin is NOT one of
   those pages (its dashboard needs to be wider than the 680px settings-page
   cap), so its cards stay plain white Bootstrap default — meaning anything
   that inherits AppLayout's dark-theme text color here renders near-invisible
   against white.

   The block below is the fix: it resets form-control/select/label back to
   normal light-theme colors, scoped to this page, with !important so it
   reliably wins regardless of CSS-isolation bundling order.

   If you add a NEW element here that uses a raw Bootstrap class also styled
   by AppLayout.razor.css's ::deep rules (check that file for the full list —
   .text-muted is already handled by its own !important there, but any
   future ::deep addition there is a candidate) — this file needs a matching
   reset, or check it against a WHITE background before shipping.
   ============================================================ */
[b-7epw32jv08] .form-control,
[b-7epw32jv08] .form-select {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

[b-7epw32jv08] .form-control:focus,
[b-7epw32jv08] .form-select:focus {
    background-color: #fff !important;
    color: #212529 !important;
}

[b-7epw32jv08] .form-label {
    color: #212529 !important;
}

.admin-kpi-grid[b-7epw32jv08] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-kpi-value[b-7epw32jv08] {
    font-size: 2rem;
    font-weight: 700;
}

.admin-kpi-label[b-7epw32jv08] {
    font-size: 0.75rem;
    color: var(--fv-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-kpi-card--warning[b-7epw32jv08] {
    background-color: #ffc107;
    border-color: #ffc107;
}

.admin-kpi-card--warning .admin-kpi-value[b-7epw32jv08],
.admin-kpi-card--warning .admin-kpi-label[b-7epw32jv08] {
    color: #212529;
}

.admin-kpi-card--danger[b-7epw32jv08] {
    background-color: #dc3545;
    border-color: #dc3545;
}

.admin-kpi-card--danger .admin-kpi-value[b-7epw32jv08],
.admin-kpi-card--danger .admin-kpi-label[b-7epw32jv08] {
    color: #fff;
}

.activity-dot[b-7epw32jv08] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.activity-dot--green[b-7epw32jv08]  { background: #198754; }
.activity-dot--yellow[b-7epw32jv08] { background: #ffc107; }
.activity-dot--grey[b-7epw32jv08]   { background: #adb5bd; }
.activity-dot--none[b-7epw32jv08]   { background: #dee2e6; border: 1px solid #adb5bd; }

.capacity-light[b-7epw32jv08] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.capacity-light--green[b-7epw32jv08]  { background: #198754; }
.capacity-light--yellow[b-7epw32jv08] { background: #ffc107; }
.capacity-light--red[b-7epw32jv08]    { background: #dc3545; }
/* /Components/Pages/App/Articles.razor.rz.scp.css */
/* ============================================================
   Articles.razor.css — Scoped styles for the Articles / Player page
   Mobile-first, minimum supported width: 375px
   ============================================================ */

/* ------ Pull-to-refresh indicator -------------------------- */

.pull-indicator[b-tamtoo0m9b] {
    position: fixed;
    top: var(--app-header-height); /* JS overrides this dynamically at gesture start */
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scales from the top edge — never moves up into the sticky bars */
    transform: scale(0);
    transform-origin: top center;
    opacity: 0;
    pointer-events: none;
    z-index: 210; /* above header (200) and player bar (190) */
    background: linear-gradient(to bottom, var(--app-bg) 60%, transparent 100%);
}

.pull-indicator__spinner[b-tamtoo0m9b] {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--app-border);
    border-top-color: var(--app-primary);
}

.pull-indicator--refreshing .pull-indicator__spinner[b-tamtoo0m9b] {
    animation: pull-spin-b-tamtoo0m9b 0.7s linear infinite;
}

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

/* ------ Page wrapper --------------------------------------- */

.articles-page[b-tamtoo0m9b] {
    padding: 1rem;
    max-width: 680px;
    margin: 0 auto;
}


/* ------ Cross-device resume prompt ------------------------- */

.resume-prompt[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.75rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 12px;
    animation: resume-prompt-in-b-tamtoo0m9b 0.25s ease-out;
}

@keyframes resume-prompt-in-b-tamtoo0m9b {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.resume-prompt__icon[b-tamtoo0m9b] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: rgba(147, 197, 253, 0.9);
}

.resume-prompt__body[b-tamtoo0m9b] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.resume-prompt__label[b-tamtoo0m9b] {
    font-size: 0.75rem;
    color: rgba(147, 197, 253, 0.7);
    font-weight: 500;
    line-height: 1.2;
}

.resume-prompt__title[b-tamtoo0m9b] {
    font-size: 0.8125rem;
    color: #e2e8f0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.resume-prompt__remote-controls[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.resume-prompt__btn-continue[b-tamtoo0m9b] {
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: none;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
}

@media (hover: hover) {
    .resume-prompt__btn-continue:hover[b-tamtoo0m9b] {
        background: var(--app-primary-hover);
    }
}

.resume-prompt__btn-continue:active[b-tamtoo0m9b] {
    transform: scale(0.95);
}

.resume-prompt__btn-dismiss[b-tamtoo0m9b] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .resume-prompt__btn-dismiss:hover[b-tamtoo0m9b] {
        background: rgba(255, 255, 255, 0.08);
        color: var(--app-text);
    }
}

.resume-prompt__btn-dismiss svg[b-tamtoo0m9b] {
    width: 14px;
    height: 14px;
}

/* ------ Processing-paused banner --------------------------- */

.articles-paused-banner[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 10px;
    font-size: 0.8125rem;
    color: #fde047;
    line-height: 1.4;
}

.articles-paused-banner__icon[b-tamtoo0m9b] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    opacity: 0.9;
}

.articles-paused-banner__text[b-tamtoo0m9b] {
    flex: 1;
    min-width: 0;
}

.articles-paused-banner__btn[b-tamtoo0m9b] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid rgba(234, 179, 8, 0.5);
    background: transparent;
    color: #fde047;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .articles-paused-banner__btn:hover:not(:disabled)[b-tamtoo0m9b] {
        background: rgba(234, 179, 8, 0.15);
        border-color: rgba(234, 179, 8, 0.7);
    }
}

.articles-paused-banner__btn:disabled[b-tamtoo0m9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------ Queue status banner -------------------------------- */

.articles-queue-banner[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.4;
    animation: resume-prompt-in-b-tamtoo0m9b 0.25s ease-out;
}

.articles-queue-banner__icon[b-tamtoo0m9b] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    opacity: 0.85;
}

.articles-queue-banner__text[b-tamtoo0m9b] {
    flex: 1;
    min-width: 0;
}

/* Green — subtle info */
.articles-queue-banner--green[b-tamtoo0m9b] {
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: rgba(147, 197, 253, 0.9);
}

/* Yellow — moderate wait */
.articles-queue-banner--yellow[b-tamtoo0m9b] {
    background: rgba(234, 179, 8, 0.07);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #fde047;
}

/* Red — delayed */
.articles-queue-banner--red[b-tamtoo0m9b] {
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #fca5a5;
}

/* ------ Compress old audio banner --------------------------- */

.articles-compress-banner[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 10px;
    font-size: 0.8125rem;
    color: rgba(147, 197, 253, 0.9);
    line-height: 1.4;
    flex-wrap: wrap;
}

.articles-compress-banner__icon[b-tamtoo0m9b] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    opacity: 0.85;
}

.articles-compress-banner__text[b-tamtoo0m9b] {
    flex: 1;
    min-width: 0;
}

.articles-compress-banner__actions[b-tamtoo0m9b] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.articles-compress-banner__btn[b-tamtoo0m9b] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1.5px solid rgba(37, 99, 235, 0.4);
    background: transparent;
    color: rgba(147, 197, 253, 0.9);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.articles-compress-banner__btn--confirm[b-tamtoo0m9b] {
    background: rgba(37, 99, 235, 0.85);
    border-color: rgba(37, 99, 235, 0.85);
    color: #fff;
}

@media (hover: hover) {
    .articles-compress-banner__btn:hover:not(:disabled)[b-tamtoo0m9b] {
        background: rgba(37, 99, 235, 0.15);
        border-color: rgba(37, 99, 235, 0.6);
    }

    .articles-compress-banner__btn--confirm:hover:not(:disabled)[b-tamtoo0m9b] {
        background: rgba(37, 99, 235, 1);
    }
}

.articles-compress-banner__btn:disabled[b-tamtoo0m9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------ One-time refresh window: header trigger + popup ------ */

.articles-refill-btn[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.25rem;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-bg-surface);
    color: var(--app-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .articles-refill-btn:hover[b-tamtoo0m9b] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.articles-refill-btn svg[b-tamtoo0m9b] {
    width: 17px;
    height: 17px;
}

.articles-refill-btn__badge-bg[b-tamtoo0m9b] {
    fill: var(--app-bg-surface);
    transition: fill 0.15s;
}

@media (hover: hover) {
    .articles-refill-btn:hover .articles-refill-btn__badge-bg[b-tamtoo0m9b] {
        fill: var(--app-bg-surface-hover);
    }
}

.articles-refill__overlay[b-tamtoo0m9b] {
    position: fixed;
    inset: 0;
    z-index: 195;
    background: transparent;
}

.articles-one-time__popup[b-tamtoo0m9b] {
    position: absolute;
    top: calc(100% + 4px);
    left: 1rem;
    z-index: 196;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 260px;
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.articles-one-time__heading[b-tamtoo0m9b] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text);
    text-align: center;
}

.articles-one-time__custom[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.articles-one-time__input[b-tamtoo0m9b] {
    width: 4.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1.5px solid var(--app-border);
    background: var(--app-bg);
    color: var(--app-text);
    font-size: 0.9rem;
    text-align: center;
}

.articles-one-time__input:focus[b-tamtoo0m9b] {
    outline: none;
    border-color: var(--app-primary);
}

.articles-one-time__divider[b-tamtoo0m9b] {
    height: 1px;
    background: var(--app-border);
}

.articles-one-time__presets[b-tamtoo0m9b] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.articles-one-time__preset[b-tamtoo0m9b] {
    flex: 1 1 0;
    padding: 0.35rem 0;
    border-radius: 999px;
    border: 1.5px solid rgba(37, 99, 235, 0.4);
    background: transparent;
    color: rgba(147, 197, 253, 0.9);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .articles-one-time__preset:hover:not(:disabled)[b-tamtoo0m9b] {
        background: rgba(37, 99, 235, 0.15);
        border-color: rgba(37, 99, 235, 0.6);
    }
}

.articles-one-time__preset:disabled[b-tamtoo0m9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

.articles-one-time__cancel[b-tamtoo0m9b] {
    padding: 0;
    border: none;
    background: none;
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .articles-one-time__cancel:hover:not(:disabled)[b-tamtoo0m9b] {
        color: var(--app-text);
        text-decoration: underline;
    }
}

.articles-one-time__cancel:disabled[b-tamtoo0m9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------ Header row ----------------------------------------- */

.articles-header[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Sticky against the real viewport (AppLayout.razor.css's .app-content now uses
       overflow-x: clip instead of hidden, so it no longer becomes an accidental
       sticky containing block — see that file for why). Offset below the global
       app-header; the :has() rule in app.css pushes it further down when the
       persistent audio player bar is also visible, mirroring .app-sidebar. */
    position: sticky;
    top: var(--app-header-height);
    z-index: 150; /* below filter-dropdown popover (195/196), above scrolling content */
    background: var(--app-bg);
    margin: 0 -1rem 1rem -1rem;
    padding: 0.75rem 1rem 0.5rem;
}

.articles-title[b-tamtoo0m9b] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.articles-count[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    line-height: 1.4;
    letter-spacing: 0;
}

.articles-duration[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Header actions group */
.articles-header__actions[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Filter button */
.articles-filter-btn[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-surface);
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .articles-filter-btn:hover[b-tamtoo0m9b] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.articles-filter-btn svg[b-tamtoo0m9b] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.articles-filter-btn--active[b-tamtoo0m9b] {
    color: var(--app-primary);
    border-color: var(--app-primary);
    background: var(--app-bg-surface-hover);
}

.articles-filter-label[b-tamtoo0m9b] {
    line-height: 1;
}

/* Unified filter dropdown (Replayed + Tags, single-select) */
.articles-filter-dropdown[b-tamtoo0m9b] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.articles-filter-dropdown__overlay[b-tamtoo0m9b] {
    position: fixed;
    inset: 0;
    z-index: 195;
    background: transparent;
}

.articles-filter-dropdown__menu[b-tamtoo0m9b] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 196;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.25rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-bg-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.articles-filter-dropdown__item[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.articles-filter-dropdown__item svg[b-tamtoo0m9b] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (hover: hover) {
    .articles-filter-dropdown__item:hover[b-tamtoo0m9b] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.articles-filter-dropdown__item--active[b-tamtoo0m9b] {
    color: var(--app-primary);
    background: var(--app-bg-surface-hover);
}

.articles-sort-btn[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-surface);
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .articles-sort-btn:hover[b-tamtoo0m9b] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.articles-sort-btn svg[b-tamtoo0m9b] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.articles-sort-label[b-tamtoo0m9b] {
    line-height: 1;
}

.articles-window-btn[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-surface);
    color: var(--app-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}

@media (hover: hover) {
    .articles-window-btn:hover[b-tamtoo0m9b] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.articles-window-btn svg[b-tamtoo0m9b] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.articles-window-label[b-tamtoo0m9b] {
    line-height: 1;
}

/* ------ Loading skeleton ----------------------------------- */

.articles-loading[b-tamtoo0m9b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-card--skeleton[b-tamtoo0m9b] {
    pointer-events: none;
}

.skeleton-line[b-tamtoo0m9b] {
    height: 14px;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-tamtoo0m9b 1.4s infinite;
}

.skeleton-line--title[b-tamtoo0m9b] {
    width: 72%;
}

.skeleton-line--meta[b-tamtoo0m9b] {
    width: 40%;
    height: 11px;
    margin-bottom: 0;
}

.skeleton-line--summary[b-tamtoo0m9b] {
    width: 90%;
    height: 11px;
    margin-bottom: 0;
}

@keyframes skeleton-shimmer-b-tamtoo0m9b {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ------ Responsive adjustments ----------------------------- */

/* On narrow screens: title takes full width, action buttons wrap to next row */
@media (max-width: 539px) {
    .articles-header[b-tamtoo0m9b] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .articles-title[b-tamtoo0m9b] {
        width: 100%;
    }
}
/* /Components/Pages/App/Billing.razor.rz.scp.css */
.billing-section--plans[b-z6qb477lvz] {
    margin-top: 2.5rem;
}

.billing-plans-grid[b-z6qb477lvz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.billing-plan-card[b-z6qb477lvz] {
    background: var(--app-bg);
    border: 1.5px solid var(--app-border);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.15s;
}

.billing-plan-card--active[b-z6qb477lvz] {
    border-color: var(--app-primary);
    background: var(--app-active-bg);
}

.billing-plan-card__header[b-z6qb477lvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.billing-plan-card__name[b-z6qb477lvz] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--app-text);
}

.billing-plan-badge[b-z6qb477lvz] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15em 0.55em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
    white-space: nowrap;
}

.billing-plan-badge--popular[b-z6qb477lvz] {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}

.billing-plan-card__price[b-z6qb477lvz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.2;
}

.billing-plan-card__price-sub[b-z6qb477lvz] {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    font-weight: 400;
}

.billing-plan-card__features[b-z6qb477lvz] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.billing-plan-card__features li[b-z6qb477lvz] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    padding-left: 1.25rem;
    position: relative;
}

.billing-plan-card__features li[b-z6qb477lvz]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--app-primary);
    font-weight: 700;
}
/* /Components/Pages/App/Feeds.razor.rz.scp.css */
/* ============================================================
   Feeds.razor.css — Feed Management Page
   Mobile-first. Uses CSS custom properties from AppLayout.
   ============================================================ */

/* ------ Page container ------------------------------------- */

.feeds-page[b-ehcmguweyq] {
    max-width: 680px;
}

/* ------ Page header ---------------------------------------- */

.feeds-header[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.feeds-title[b-ehcmguweyq] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.feeds-add-btn[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--app-border);
    background: var(--app-bg-surface);
    color: var(--app-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.feeds-add-btn svg[b-ehcmguweyq] {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .feeds-add-btn:hover[b-ehcmguweyq] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
        border-color: var(--app-primary);
    }
}

.feeds-add-btn--active[b-ehcmguweyq] {
    background: var(--app-active-bg);
    color: var(--app-primary);
    border-color: var(--app-primary);
}

.feeds-add-btn--active svg[b-ehcmguweyq] {
    transform: rotate(45deg);
}

/* ------ Add form panel ------------------------------------- */

.feeds-form-panel[b-ehcmguweyq] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    animation: feeds-slide-down-b-ehcmguweyq 0.15s ease-out;
}

@keyframes feeds-slide-down-b-ehcmguweyq {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feeds-form-panel__inner[b-ehcmguweyq] {
    padding: 1.25rem;
}

.feeds-form-panel__title[b-ehcmguweyq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0 0 1rem;
}

.feeds-form-group[b-ehcmguweyq] {
    margin-bottom: 0.875rem;
}

.feeds-form-label[b-ehcmguweyq] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--app-text-muted);
    margin-bottom: 0.375rem;
}

.feeds-form-optional[b-ehcmguweyq] {
    font-weight: 400;
    opacity: 0.75;
}

.feeds-form-input[b-ehcmguweyq] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    background: var(--app-bg);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}

.feeds-form-input[b-ehcmguweyq]::placeholder {
    color: var(--app-text-muted);
    opacity: 0.6;
}

.feeds-form-input:focus[b-ehcmguweyq] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.feeds-form-input:disabled[b-ehcmguweyq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.feeds-form-actions[b-ehcmguweyq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.125rem;
}

/* ------ Buttons -------------------------------------------- */

.feeds-btn[b-ehcmguweyq] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.feeds-btn:disabled[b-ehcmguweyq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.feeds-btn--primary[b-ehcmguweyq] {
    background: var(--app-primary);
    color: #fff;
    border-color: var(--app-primary);
}

@media (hover: hover) {
    .feeds-btn--primary:not(:disabled):hover[b-ehcmguweyq] {
        background: var(--app-primary-hover);
        border-color: var(--app-primary-hover);
    }
}

.feeds-btn--secondary[b-ehcmguweyq] {
    background: var(--app-bg-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

@media (hover: hover) {
    .feeds-btn--secondary:not(:disabled):hover[b-ehcmguweyq] {
        background: var(--app-bg-surface-hover);
    }
}

.feeds-btn--ghost[b-ehcmguweyq] {
    background: transparent;
    color: var(--app-text-muted);
    border-color: transparent;
}

@media (hover: hover) {
    .feeds-btn--ghost:not(:disabled):hover[b-ehcmguweyq] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

.feeds-btn--danger[b-ehcmguweyq] {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

@media (hover: hover) {
    .feeds-btn--danger:not(:disabled):hover[b-ehcmguweyq] {
        background: #dc2626;
        border-color: #dc2626;
    }
}

/* ------ Spinner -------------------------------------------- */

.feeds-spinner[b-ehcmguweyq] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: feeds-spin-b-ehcmguweyq 0.65s linear infinite;
    flex-shrink: 0;
}

.feeds-spinner--lg[b-ehcmguweyq] {
    width: 24px;
    height: 24px;
    border-width: 2.5px;
}

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

/* ------ Alerts --------------------------------------------- */

.feeds-alert[b-ehcmguweyq] {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.875rem;
    line-height: 1.4;
}

.feeds-alert--error[b-ehcmguweyq] {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.feeds-alert--success[b-ehcmguweyq] {
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.feeds-alert--warning[b-ehcmguweyq] {
    background: rgba(234, 179, 8, 0.1);
    color: #fde047;
    border: 1px solid rgba(234, 179, 8, 0.25);
    margin-bottom: 0.75rem;
}

.feeds-alert--info[b-ehcmguweyq] {
    background: rgba(37, 99, 235, 0.1);
    color: #93c5fd;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

/* ------ Global processing toggle --------------------------- */

.feeds-processing-toggle[b-ehcmguweyq] {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
}

.feeds-toggle-row[b-ehcmguweyq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.feeds-toggle-label[b-ehcmguweyq] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--app-text);
}

.feeds-toggle-hint[b-ehcmguweyq] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    padding-left: 2.75rem; /* align under switch label */
}

/* ------ Feed card: inactive state + actions ---------------- */

.feeds-card--inactive[b-ehcmguweyq] {
    opacity: 0.5;
}

.feeds-card__actions[b-ehcmguweyq] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    align-self: start;
}

.feeds-card__toggle[b-ehcmguweyq] {
    cursor: pointer;
    margin-top: 0 !important;
}

/* ------ Loading state -------------------------------------- */

.feeds-loading[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--app-text-muted);
    font-size: 0.9375rem;
    padding: 2rem 0;
}

/* ------ Empty state ---------------------------------------- */

.feeds-empty[b-ehcmguweyq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1rem;
    gap: 0.25rem;
}

.feeds-empty__icon[b-ehcmguweyq] {
    width: 48px;
    height: 48px;
    color: var(--app-text-muted);
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.feeds-empty__icon svg[b-ehcmguweyq] {
    width: 100%;
    height: 100%;
}

.feeds-empty__text[b-ehcmguweyq] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-text);
    margin: 0;
}

.feeds-empty__sub[b-ehcmguweyq] {
    font-size: 0.875rem;
    color: var(--app-text-muted);
    margin: 0 0 1rem;
}

/* ------ Category groups ------------------------------------ */

.feeds-group[b-ehcmguweyq] {
    margin-bottom: 1rem;
}

.feeds-group__header[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 0 0.375rem;
    margin: 0;
}

.feeds-group__count[b-ehcmguweyq] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--app-text-muted);
    background: var(--app-bg);
    border-radius: 10px;
    padding: 0.05rem 0.425rem;
    opacity: 0.7;
}

/* ------ Feed list ------------------------------------------ */

.feeds-list[b-ehcmguweyq] {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feeds-card[b-ehcmguweyq] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
    .feeds-card:hover[b-ehcmguweyq] {
        border-color: var(--app-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.feeds-card__body[b-ehcmguweyq] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    padding: 0.875rem 1rem;
}

.feeds-card__title[b-ehcmguweyq] {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.35;
    align-self: center;
    min-width: 0;
}

.feeds-card__lang-notice[b-ehcmguweyq] {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0.125rem 0 0;
    font-size: 0.8rem;
    color: var(--app-text-muted);
}

.feeds-card__lang-notice a[b-ehcmguweyq] {
    color: var(--app-accent, #0d6efd);
}

.feeds-card__meta[b-ehcmguweyq] {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}

.feeds-card__url[b-ehcmguweyq] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feeds-card__dot[b-ehcmguweyq] {
    flex-shrink: 0;
}

.feeds-card__count[b-ehcmguweyq] {
    flex-shrink: 0;
}

.feeds-card__delete[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 4px 0 4px 8px;
    transition: background 0.15s, color 0.15s;
}

.feeds-card__delete svg[b-ehcmguweyq] {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .feeds-card__delete:hover[b-ehcmguweyq] {
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
    }
}

/* ------ Kebab menu button ---------------------------------- */

.feeds-card__menu-btn[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 4px 0 4px 8px;
    transition: background 0.15s, color 0.15s;
}

.feeds-card__menu-btn svg[b-ehcmguweyq] {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .feeds-card__menu-btn:hover[b-ehcmguweyq] {
        background: var(--app-bg-surface-hover);
        color: var(--app-text);
    }
}

/* ------ Overflow menu -------------------------------------- */

.feeds-overflow-wrap[b-ehcmguweyq] { position: relative; }

.feeds-overflow-backdrop[b-ehcmguweyq] {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.feeds-overflow-menu[b-ehcmguweyq] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 201;
    min-width: 160px;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    animation: feeds-fade-in-b-ehcmguweyq 0.1s ease-out;
}

.feeds-overflow-item[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: 7px;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    color: var(--app-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.feeds-overflow-item + .feeds-overflow-item[b-ehcmguweyq] {
    margin-top: 2px;
}

.feeds-overflow-item svg[b-ehcmguweyq] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--app-text-muted);
}

@media (hover: hover) {
    .feeds-overflow-item:hover[b-ehcmguweyq] {
        background: var(--app-bg-surface-hover);
    }
}

.feeds-overflow-item--danger[b-ehcmguweyq] { color: #f87171; }

.feeds-overflow-item--danger svg[b-ehcmguweyq] { color: #f87171; }

@media (hover: hover) {
    .feeds-overflow-item--danger:hover[b-ehcmguweyq] {
        background: rgba(239, 68, 68, 0.12);
    }
}

/* ------ OPML section --------------------------------------- */

.feeds-section[b-ehcmguweyq] {
    border-top: 1px solid var(--app-border);
    padding-top: 1.25rem;
    margin-top: 0.75rem;
}

.feeds-section__title[b-ehcmguweyq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0 0 0.375rem;
}

.feeds-section__desc[b-ehcmguweyq] {
    font-size: 0.875rem;
    color: var(--app-text-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.feeds-opml-input[b-ehcmguweyq] {
    position: relative;
}

.feeds-file-input[b-ehcmguweyq] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.feeds-file-label[b-ehcmguweyq] {
    cursor: pointer;
}

.feeds-file-label svg[b-ehcmguweyq] {
    width: 16px;
    height: 16px;
}

/* ------ Delete confirm dialog ------------------------------ */

.feeds-dialog-backdrop[b-ehcmguweyq] {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: feeds-fade-in-b-ehcmguweyq 0.12s ease-out;
}

@keyframes feeds-fade-in-b-ehcmguweyq {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feeds-dialog[b-ehcmguweyq] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    animation: feeds-dialog-up-b-ehcmguweyq 0.15s ease-out;
}

@keyframes feeds-dialog-up-b-ehcmguweyq {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.feeds-dialog__title[b-ehcmguweyq] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--app-text);
    margin: 0 0 0.75rem;
}

.feeds-dialog__body[b-ehcmguweyq] {
    font-size: 0.9375rem;
    color: var(--app-text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.feeds-dialog__body strong[b-ehcmguweyq] {
    color: var(--app-text);
    font-weight: 600;
}

.feeds-dialog__actions[b-ehcmguweyq] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ------ Discover panel ------------------------------------ */

.feeds-form-panel__desc[b-ehcmguweyq] {
    font-size: 0.875rem;
    color: var(--app-text-muted, #6c757d);
    margin: 0 0 1rem;
}

.feeds-discover-list[b-ehcmguweyq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feeds-discover-item[b-ehcmguweyq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--app-border, rgba(0,0,0,0.08));
}

.feeds-discover-item:last-child[b-ehcmguweyq] {
    border-bottom: none;
}

.feeds-discover-item__info[b-ehcmguweyq] {
    flex: 1;
    min-width: 0;
}

.feeds-discover-item__title[b-ehcmguweyq] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feeds-discover-item__meta[b-ehcmguweyq] {
    font-size: 0.75rem;
    color: var(--app-text-muted, #6c757d);
}

.feeds-btn--compact[b-ehcmguweyq] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    min-width: 6rem;
}

/* ------ Desktop tweaks (>= 768px) -------------------------- */

@media (min-width: 768px) {
    .feeds-title[b-ehcmguweyq] {
        font-size: 1.5rem;
    }

    .feeds-form-panel__inner[b-ehcmguweyq] {
        padding: 1.5rem;
    }

    .feeds-form-actions[b-ehcmguweyq] {
        flex-wrap: nowrap;
    }
}
/* /Components/Pages/App/Settings.razor.rz.scp.css */
/* Settings.razor.css
   Shared settings-page layout classes (.settings-*, etc.) have been
   moved to app.css so they work in all settings-like pages (Billing, etc.)
   without Blazor CSS isolation breaking them.
   This file intentionally left minimal. */
/* /Components/Pages/App/Submit.razor.rz.scp.css */
/* ============================================================
   Submit page — URL submission for on-demand summarization
   Mobile-first
   ============================================================ */

/* ------ Page wrapper --------------------------------------- */

.submit-page[b-yd9vqyrxz1] {
    max-width: 680px;
}

.submit-page__header[b-yd9vqyrxz1] {
    margin-bottom: 1.5rem;
}

.submit-page__title[b-yd9vqyrxz1] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    color: var(--app-text);
}

.submit-page__lead[b-yd9vqyrxz1] {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ------ Form ----------------------------------------------- */

.submit-form[b-yd9vqyrxz1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.submit-form__field[b-yd9vqyrxz1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.submit-form__label[b-yd9vqyrxz1] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--app-text);
}

.submit-form__input[b-yd9vqyrxz1] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.submit-form__input[b-yd9vqyrxz1]::placeholder {
    color: var(--app-text-muted);
}

.submit-form__input:focus[b-yd9vqyrxz1] {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.submit-form__input:disabled[b-yd9vqyrxz1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.submit-form__input--error[b-yd9vqyrxz1] {
    border-color: #ef4444;
}

.submit-form__input--error:focus[b-yd9vqyrxz1] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.submit-form__error[b-yd9vqyrxz1] {
    margin: 0;
    font-size: 0.8125rem;
    color: #ef4444;
}

.submit-form__button[b-yd9vqyrxz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--app-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    align-self: flex-start;
    min-width: 9rem;
}

@media (hover: hover) {
    .submit-form__button:hover:not(:disabled)[b-yd9vqyrxz1] {
        background: var(--app-primary-hover);
    }
}

.submit-form__button:disabled[b-yd9vqyrxz1] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ------ Spinner -------------------------------------------- */

.submit-form__spinner[b-yd9vqyrxz1] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-yd9vqyrxz1 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ------ Result card ---------------------------------------- */

.submit-result[b-yd9vqyrxz1] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.submit-result__icon-row[b-yd9vqyrxz1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.submit-result__check[b-yd9vqyrxz1] {
    width: 1.125rem;
    height: 1.125rem;
    color: #22c55e;
    flex-shrink: 0;
}

.submit-result__headline[b-yd9vqyrxz1] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--app-text);
}

.submit-result__details[b-yd9vqyrxz1] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.submit-result__row[b-yd9vqyrxz1] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.submit-result__row dt[b-yd9vqyrxz1] {
    color: var(--app-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.submit-result__row dt[b-yd9vqyrxz1]::after {
    content: ":";
}

.submit-result__row dd[b-yd9vqyrxz1] {
    margin: 0;
    color: var(--app-text);
    word-break: break-all;
}

.submit-result__info[b-yd9vqyrxz1] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--app-text-muted);
    line-height: 1.5;
}

.submit-result__link[b-yd9vqyrxz1] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--app-active-bg);
    color: var(--app-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .submit-result__link:hover[b-yd9vqyrxz1] {
        background: rgba(37, 99, 235, 0.22);
        border-color: rgba(37, 99, 235, 0.3);
        text-decoration: none;
        color: var(--app-primary);
    }
}

/* ------ API error ------------------------------------------ */

.submit-error[b-yd9vqyrxz1] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #fca5a5;
    margin-bottom: 1.25rem;
}

/* ------ Notice --------------------------------------------- */

.submit-page__notice[b-yd9vqyrxz1] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ------ Submission history --------------------------------- */

.submit-history[b-yd9vqyrxz1] {
    margin-top: 2rem;
    border-top: 1px solid var(--app-border);
    padding-top: 1.25rem;
}

.submit-history__title[b-yd9vqyrxz1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.submit-history__empty[b-yd9vqyrxz1] {
    font-size: 0.875rem;
    color: var(--app-text-muted);
    margin: 0;
}

/* ------ Submission cards (mirrors article-card layout) ----- */

.submit-card-list[b-yd9vqyrxz1] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.submit-card[b-yd9vqyrxz1] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
    .submit-card:hover[b-yd9vqyrxz1] {
        border-color: rgba(148, 163, 184, 0.4);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.submit-card--active[b-yd9vqyrxz1] {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* ------ Play button ---------------------------------------- */

.submit-card__play-btn[b-yd9vqyrxz1] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
}

.submit-card__play-btn--playable[b-yd9vqyrxz1] {
    background: var(--app-primary);
    color: #fff;
}

@media (hover: hover) {
    .submit-card__play-btn--playable:hover[b-yd9vqyrxz1] {
        background: var(--app-primary-hover);
    }
}

.submit-card__play-btn--playable:active[b-yd9vqyrxz1] {
    transform: scale(0.92);
}

.submit-card--active .submit-card__play-btn--playable[b-yd9vqyrxz1] {
    background: var(--app-primary-hover);
}

.submit-card__play-btn--waiting[b-yd9vqyrxz1] {
    background: rgba(100, 116, 139, 0.15);
    color: var(--app-text-muted);
    cursor: default;
}

.submit-card__play-btn--error[b-yd9vqyrxz1] {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    cursor: default;
}

.submit-card__play-btn svg[b-yd9vqyrxz1] {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.submit-card__play-btn--waiting svg[b-yd9vqyrxz1],
.submit-card__play-btn--error svg[b-yd9vqyrxz1] {
    margin-left: 0;
}

/* ------ Animated playing bars ------------------------------ */

.playing-indicator[b-yd9vqyrxz1] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.playing-indicator__bar[b-yd9vqyrxz1] {
    display: block;
    width: 3px;
    background: #fff;
    border-radius: 2px;
    animation: submit-playing-bar-b-yd9vqyrxz1 0.9s ease-in-out infinite;
}

.playing-indicator__bar:nth-child(1)[b-yd9vqyrxz1] { height: 6px;  animation-delay: 0s; }
.playing-indicator__bar:nth-child(2)[b-yd9vqyrxz1] { height: 12px; animation-delay: 0.2s; }
.playing-indicator__bar:nth-child(3)[b-yd9vqyrxz1] { height: 8px;  animation-delay: 0.4s; }

@keyframes submit-playing-bar-b-yd9vqyrxz1 {
    0%, 100% { transform: scaleY(0.4); }
    50%       { transform: scaleY(1); }
}

/* ------ Card body ------------------------------------------ */

.submit-card__body[b-yd9vqyrxz1] {
    flex: 1;
    min-width: 0;
}

.submit-card__title[b-yd9vqyrxz1] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--app-text);
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.submit-card--active .submit-card__title[b-yd9vqyrxz1] {
    color: var(--app-primary);
    font-weight: 600;
}

.submit-card__meta[b-yd9vqyrxz1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
}

.submit-card__source[b-yd9vqyrxz1] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.submit-card__sep[b-yd9vqyrxz1] {
    flex-shrink: 0;
}

.submit-card__summary[b-yd9vqyrxz1] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    margin: 0.3rem 0 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.submit-card__status[b-yd9vqyrxz1] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    white-space: nowrap;
}

.submit-card__status--failed[b-yd9vqyrxz1],
.submit-card__status--error[b-yd9vqyrxz1] {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.submit-card__status--processing[b-yd9vqyrxz1] {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}

.submit-card__status--pending[b-yd9vqyrxz1],
.submit-card__status--waiting[b-yd9vqyrxz1] {
    background: rgba(100, 116, 139, 0.15);
    color: var(--app-text-muted);
}

/* ------ External link button ------------------------------- */

.submit-card__link-btn[b-yd9vqyrxz1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--app-text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    margin-top: 3px;
}

@media (hover: hover) {
    .submit-card__link-btn:hover[b-yd9vqyrxz1] {
        color: var(--app-primary);
        background: rgba(37, 99, 235, 0.1);
    }
}

.submit-card__link-btn svg[b-yd9vqyrxz1] {
    width: 14px;
    height: 14px;
}

/* ------ Delete button -------------------------------------- */

.submit-card__delete-btn[b-yd9vqyrxz1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    margin-top: 3px;
}

@media (hover: hover) {
    .submit-card__delete-btn:hover[b-yd9vqyrxz1] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

.submit-card__delete-btn svg[b-yd9vqyrxz1] {
    width: 14px;
    height: 14px;
}

.submit-card__delete-btn--confirm[b-yd9vqyrxz1] {
    color: #22c55e;
}

@media (hover: hover) {
    .submit-card__delete-btn--confirm:hover[b-yd9vqyrxz1] {
        color: #22c55e;
        background: rgba(34, 197, 94, 0.12);
    }
}

.submit-card__delete-btn--cancel[b-yd9vqyrxz1] {
    color: var(--app-text-muted);
}

@media (hover: hover) {
    .submit-card__delete-btn--cancel:hover[b-yd9vqyrxz1] {
        color: var(--app-text);
        background: rgba(100, 116, 139, 0.15);
    }
}

/* ------ Credits warning ------------------------------------ */

.submit-credits-warning[b-yd9vqyrxz1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #fde047;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.submit-credits-warning__icon[b-yd9vqyrxz1] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ------ Desktop adjustments -------------------------------- */

@media (min-width: 768px) {
    .submit-page__title[b-yd9vqyrxz1] {
        font-size: 1.75rem;
    }

    .submit-form__button[b-yd9vqyrxz1] {
        padding: 0.625rem 1.5rem;
    }
}
/* /Components/Pages/App/Voices.razor.rz.scp.css */
/* ============================================================
   Voices page — scoped CSS (v3)
   ============================================================ */

.voices-page[b-uc2788deao] {
    max-width: 680px;
}

/* ------ Header row ----------------------------------------- */

.voices-header[b-uc2788deao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.voices-title[b-uc2788deao] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
}

/* ------ Section headings ------------------------------------ */

.voices-section-title[b-uc2788deao] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    margin-bottom: 0.625rem;
}

/* ------ Create card ----------------------------------------- */

.voices-create-card[b-uc2788deao] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
}

/* ------ Type tiles ------------------------------------------ */

.type-tiles[b-uc2788deao] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.type-tile[b-uc2788deao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    background: var(--app-bg);
    border: 1.5px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .type-tile:hover[b-uc2788deao] {
        border-color: rgba(148, 163, 184, 0.5);
        background: rgba(255, 255, 255, 0.03);
    }
}

.type-tile.selected[b-uc2788deao] {
    border-color: var(--app-primary);
    background: rgba(37, 99, 235, 0.1);
}

.tile-icon[b-uc2788deao] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.tile-icon--describe[b-uc2788deao] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.tile-icon--upload[b-uc2788deao] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.tile-icon--record[b-uc2788deao] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.tile-title[b-uc2788deao] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--app-text);
}

.tile-desc[b-uc2788deao] {
    font-size: 0.7rem;
    color: var(--app-text-muted);
    line-height: 1.35;
}

/* ------ File picker ----------------------------------------- */

.file-pick-row[b-uc2788deao] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.file-input-hidden[b-uc2788deao] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    /* pointer-events: none intentionally omitted:
       iOS Safari requires the input to receive the click
       forwarded by the label; pointer-events:none blocks this */
}

.file-choose-btn[b-uc2788deao] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.file-choose-btn svg[b-uc2788deao] {
    width: 13px;
    height: 13px;
}

.file-pick-name[b-uc2788deao] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.file-pick-name.chosen[b-uc2788deao] {
    color: var(--app-text);
}

/* ------ Language accordion ---------------------------------- */

.lang-accordion[b-uc2788deao] {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
}

.lang-accordion-header[b-uc2788deao] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background: var(--app-bg-surface);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}

@media (hover: hover) {
    .lang-accordion-header:hover[b-uc2788deao] {
        background: rgba(255, 255, 255, 0.03);
    }
}

.lang-name[b-uc2788deao] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--app-text);
    flex: 1;
}

.lang-count[b-uc2788deao] {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.lang-toggle[b-uc2788deao] {
    margin: 0;
}

.lang-toggle .form-check-input[b-uc2788deao] {
    cursor: pointer;
}

.lang-chevron[b-uc2788deao] {
    width: 16px;
    height: 16px;
    color: var(--app-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lang-accordion-header.open .lang-chevron[b-uc2788deao] {
    transform: rotate(180deg);
}

.lang-accordion-body[b-uc2788deao] {
    padding: 0.625rem;
    border-top: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ------ Voice card ------------------------------------------ */

.voice-card[b-uc2788deao] {
    display: flex;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
    .voice-card:hover[b-uc2788deao] {
        border-color: rgba(148, 163, 184, 0.35);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.voice-card--editing[b-uc2788deao] {
    border-color: var(--app-primary);
}

.vc-strip[b-uc2788deao] {
    width: 4px;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    border-radius: 0;
}

.vc-strip--ready[b-uc2788deao]      { background: #4ade80; }
.vc-strip--pending[b-uc2788deao]    { background: #facc15; animation: strip-pulse-b-uc2788deao 2s ease-in-out infinite; }
.vc-strip--processing[b-uc2788deao] { background: #60a5fa; animation: strip-pulse-b-uc2788deao 1.5s ease-in-out infinite; }
.vc-strip--error[b-uc2788deao]      { background: #f87171; }

@keyframes strip-pulse-b-uc2788deao {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.vc-body[b-uc2788deao] {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
}

.vc-top[b-uc2788deao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.vc-label[b-uc2788deao] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-badges[b-uc2788deao] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ------ Type chip ------------------------------------------- */

.vc-type-chip[b-uc2788deao] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    margin-bottom: 0.4rem;
    white-space: nowrap;
}

.vc-type-chip svg[b-uc2788deao] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.vc-type-chip--described[b-uc2788deao] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.vc-type-chip--uploaded[b-uc2788deao] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.vc-type-chip--recorded[b-uc2788deao] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.vc-desc[b-uc2788deao] {
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

/* ------ Action row ------------------------------------------ */

.vc-actions[b-uc2788deao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vc-actions-left[b-uc2788deao] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vc-actions-right[b-uc2788deao] {
    flex-shrink: 0;
}

/* ------ Source switcher (edit replace-audio) ---------------- */

.source-switcher[b-uc2788deao] {
    display: inline-flex;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    overflow: hidden;
}

.source-opt[b-uc2788deao] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    min-height: 44px;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.source-opt svg[b-uc2788deao] {
    width: 13px;
    height: 13px;
}

@media (hover: hover) {
    .source-opt:hover[b-uc2788deao] {
        background: rgba(255, 255, 255, 0.05);
        color: var(--app-text);
    }
}

.source-opt.active[b-uc2788deao] {
    background: rgba(37, 99, 235, 0.2);
    color: #93c5fd;
}

.source-opt + .source-opt[b-uc2788deao] {
    border-left: 1px solid var(--app-border);
}

/* ------ Preview button (standalone SVG, no base circle) ---- */

.vc-preview-svg-btn[b-uc2788deao] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .vc-preview-svg-btn:hover[b-uc2788deao] {
        color: var(--app-text);
    }
}

.vc-preview-svg-btn:disabled[b-uc2788deao] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vc-preview-svg-btn--playing[b-uc2788deao] {
    color: var(--app-primary);
}

/* ------ Status badges -------------------------------------- */

.voices-badge[b-uc2788deao] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.voices-badge--ready[b-uc2788deao] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.voices-badge--pending[b-uc2788deao] {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    animation: badge-pulse-b-uc2788deao 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-uc2788deao {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.voices-badge--processing[b-uc2788deao] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    animation: badge-pulse-b-uc2788deao 1.5s ease-in-out infinite;
}

.voices-badge--error[b-uc2788deao] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.voices-badge--default[b-uc2788deao] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* ------ Play button ---------------------------------------- */

.voices-play-btn[b-uc2788deao] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--app-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .voices-play-btn:hover[b-uc2788deao] {
        background: var(--app-primary-hover);
    }
}

.voices-play-btn:active[b-uc2788deao] {
    transform: scale(0.9);
}

.voices-play-btn--playing[b-uc2788deao] {
    background: var(--app-primary-hover);
}

.voices-play-btn:disabled[b-uc2788deao] {
    opacity: 0.5;
    cursor: not-allowed;
}

.voices-play-btn svg[b-uc2788deao] {
    width: 18px;
    height: 18px;
}

.voices-play-btn__spinner[b-uc2788deao] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: voices-spin-b-uc2788deao 0.7s linear infinite;
}

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

/* ------ Credit cost indicator ------------------------------ */

.voices-btn-cost[b-uc2788deao] {
    font-size: 0.68em;
    font-weight: 500;
    opacity: 0.7;
    background: rgba(128, 128, 128, 0.15);
    border-radius: 999px;
    padding: 0.1em 0.5em;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.btn-primary .voices-btn-cost[b-uc2788deao] {
    background: rgba(255, 255, 255, 0.2);
}

/* ------ Reseed notice -------------------------------------- */

.voices-reseed-note[b-uc2788deao] {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin: 0.375rem 0 0;
}

/* ------ Consent box ---------------------------------------- */

.voices-consent-box[b-uc2788deao] {
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    padding: 0.75rem;
}

.voices-consent-box .form-check-label[b-uc2788deao] {
    font-size: 0.8125rem;
    color: var(--app-text);
    line-height: 1.5;
}

/* ------ Edit form ------------------------------------------ */

.voices-edit-form .form-label-sm[b-uc2788deao] {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    margin-bottom: 0.25rem;
}

/* ------ Confirmation overlay ------------------------------- */

.voices-overlay[b-uc2788deao] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: voices-fade-in-b-uc2788deao 0.12s ease-out;
}

@keyframes voices-fade-in-b-uc2788deao {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.voices-dialog[b-uc2788deao] {
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 360px;
    width: 100%;
    font-size: 0.9375rem;
    color: var(--app-text);
    animation: voices-dialog-up-b-uc2788deao 0.15s ease-out;
}

@keyframes voices-dialog-up-b-uc2788deao {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ------ Empty state ---------------------------------------- */

.voices-empty[b-uc2788deao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1rem;
    gap: 0.5rem;
}

.voices-empty__waves[b-uc2788deao] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 48px;
    margin-bottom: 0.75rem;
    opacity: 0.45;
}

.wave-bar[b-uc2788deao] {
    display: inline-block;
    width: 5px;
    border-radius: 3px;
    background: var(--app-primary);
    animation: wave-anim-b-uc2788deao 1.4s ease-in-out infinite;
}

.wave-bar:nth-child(1)[b-uc2788deao]  { height: 14px; animation-delay: 0s;    }
.wave-bar:nth-child(2)[b-uc2788deao]  { height: 22px; animation-delay: 0.1s;  }
.wave-bar:nth-child(3)[b-uc2788deao]  { height: 32px; animation-delay: 0.2s;  }
.wave-bar:nth-child(4)[b-uc2788deao]  { height: 42px; animation-delay: 0.3s;  }
.wave-bar:nth-child(5)[b-uc2788deao]  { height: 36px; animation-delay: 0.4s;  }
.wave-bar:nth-child(6)[b-uc2788deao]  { height: 48px; animation-delay: 0.5s;  }
.wave-bar:nth-child(7)[b-uc2788deao]  { height: 36px; animation-delay: 0.4s;  }
.wave-bar:nth-child(8)[b-uc2788deao]  { height: 42px; animation-delay: 0.3s;  }
.wave-bar:nth-child(9)[b-uc2788deao]  { height: 32px; animation-delay: 0.2s;  }
.wave-bar:nth-child(10)[b-uc2788deao] { height: 22px; animation-delay: 0.1s;  }
.wave-bar:nth-child(11)[b-uc2788deao] { height: 14px; animation-delay: 0s;    }

@keyframes wave-anim-b-uc2788deao {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50%       { transform: scaleY(1);   opacity: 1;   }
}

.voices-empty__title[b-uc2788deao] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0;
}

.voices-empty__sub[b-uc2788deao] {
    font-size: 0.9rem;
    color: var(--app-text-muted);
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}

.voices-empty__cta[b-uc2788deao] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    margin-top: 0.5rem;
    border: none;
    border-radius: 999px;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .voices-empty__cta:hover[b-uc2788deao] {
        background: var(--app-primary-hover);
    }
}

/* ------ Recorder ------------------------------------------- */

.voices-record-prompt[b-uc2788deao] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 0.75rem;
}

.voices-record-prompt__label[b-uc2788deao] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-text-muted);
    margin-bottom: 0.25rem;
}

.voices-record-prompt__text[b-uc2788deao] {
    font-size: 0.875rem;
    color: var(--app-text);
    line-height: 1.5;
}

.voices-recorder[b-uc2788deao] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.voices-recorder__btn[b-uc2788deao] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.voices-recorder__btn:disabled[b-uc2788deao] {
    opacity: 0.5;
    cursor: not-allowed;
}

.voices-recorder__btn--record[b-uc2788deao] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

@media (hover: hover) {
    .voices-recorder__btn--record:hover[b-uc2788deao] {
        background: rgba(239, 68, 68, 0.25);
    }
}

.voices-recorder__btn--stop[b-uc2788deao] {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
}

@media (hover: hover) {
    .voices-recorder__btn--stop:hover[b-uc2788deao] {
        background: #ef4444;
    }
}

.voices-recorder__dot[b-uc2788deao] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f87171;
    animation: badge-pulse-b-uc2788deao 1s ease-in-out infinite;
}

.voices-recorder__square[b-uc2788deao] {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 2px;
}

.voices-recorder__timer[b-uc2788deao] {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--app-text-muted);
}

/* ------ Action button sizing -------------------------------- */

/* 44px touch target for every button on the Voices page.
   .voices-dialog is outside .voices-page (fixed overlay) so listed separately. */
.voices-page .btn[b-uc2788deao],
.voices-dialog .btn[b-uc2788deao] {
    min-height: 44px;
}

/* ------ Icon button (round, 44×44) ------------------------------ */

.vc-icon-btn[b-uc2788deao] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    padding-top: 14px;
    background: transparent;
    color: var(--app-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .vc-icon-btn:hover[b-uc2788deao] {
        background: rgba(255, 255, 255, 0.07);
        color: var(--app-text);
    }
}

.vc-icon-btn:disabled[b-uc2788deao] {
    opacity: 0.35;
    cursor: not-allowed;
}

.vc-icon-btn svg[b-uc2788deao] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.vc-icon-btn__label[b-uc2788deao] {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--app-text-muted);
    line-height: 1;
    pointer-events: none;
}

.vc-icon-btn--star[b-uc2788deao] { color: #60a5fa; }
@media (hover: hover) {
    .vc-icon-btn--star:hover[b-uc2788deao] {
        background: rgba(59, 130, 246, 0.12); color: #93c5fd;
    }
}

/* ------ Overflow menu ------------------------------------------- */

.vc-overflow-wrap[b-uc2788deao] { position: relative; }

.vc-overflow-backdrop[b-uc2788deao] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.vc-overflow-menu[b-uc2788deao] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    min-width: 240px;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 11;
    animation: voices-fade-in-b-uc2788deao 0.1s ease-out;
}

.vc-overflow-item[b-uc2788deao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    width: 100%;
    font-size: 0.875rem;
    color: var(--app-text);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.vc-overflow-item + .vc-overflow-item[b-uc2788deao] {
    border-top: 1px solid var(--app-border);
}

@media (hover: hover) {
    .vc-overflow-item:hover[b-uc2788deao] {
        background: rgba(255, 255, 255, 0.05);
    }
}

.vc-overflow-item svg[b-uc2788deao] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
}

.vc-overflow-item--danger[b-uc2788deao] { color: #f87171; }
@media (hover: hover) {
    .vc-overflow-item--danger:hover[b-uc2788deao] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.vc-overflow-cost[b-uc2788deao] {
    font-size: 0.7rem;
    color: var(--app-text-muted);
    background: rgba(128, 128, 128, 0.15);
    border-radius: 999px;
    padding: 0.1em 0.5em;
    margin-left: auto;
}

/* ------ iOS form-control zoom prevention -------------------- */

/* iOS Safari zooms in when font-size < 16px on a focused input.
   Override for small controls within the Voices page on mobile. */
@media (max-width: 768px) {
    .voices-page .form-control-sm[b-uc2788deao],
    .voices-page .form-select-sm[b-uc2788deao] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Demo/DemoArticle.razor.rz.scp.css */
.demo-article[b-7p1jjpxg2k] {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.demo-article__notice[b-7p1jjpxg2k] {
    margin-bottom: 2rem;
    padding: 0.65rem 0.9rem;
    border-left: 3px solid #d0a215;
    background: rgba(208, 162, 21, 0.08);
    border-radius: 0 4px 4px 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6b5a1e;
}

.demo-article__header[b-7p1jjpxg2k] {
    margin-bottom: 2rem;
}

.demo-article__kicker[b-7p1jjpxg2k] {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a7f87;
}

.demo-article__header h1[b-7p1jjpxg2k] {
    margin: 0 0 0.75rem;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    line-height: 1.2;
    font-weight: 700;
}

.demo-article__meta[b-7p1jjpxg2k] {
    margin: 0;
    font-size: 0.87rem;
    color: #7a7f87;
}

.demo-article__body p[b-7p1jjpxg2k] {
    margin: 0 0 1.15rem;
    font-size: 1.06rem;
    line-height: 1.68;
}

.demo-article__back[b-7p1jjpxg2k] {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6e8ec;
    font-size: 0.9rem;
}
/* /Components/Pages/Demo/DemoIndex.razor.rz.scp.css */
.demo-index[b-y1vf5h0669] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.demo-index__header h1[b-y1vf5h0669] {
    margin: 0 0 0.75rem;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
}

.demo-index__intro[b-y1vf5h0669] {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4a5058;
}

.demo-index__notice[b-y1vf5h0669] {
    padding: 0.75rem 1rem;
    border-left: 3px solid #d0a215;
    background: rgba(208, 162, 21, 0.08);
    border-radius: 0 4px 4px 0;
    font-size: 0.87rem;
    line-height: 1.5;
    color: #6b5a1e;
}

.demo-index__section[b-y1vf5h0669] {
    margin-top: 2.75rem;
}

.demo-index__section h2[b-y1vf5h0669] {
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 650;
}

.demo-index__subheading[b-y1vf5h0669] {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #7a7f87;
}

.demo-index__hint[b-y1vf5h0669] {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: #6b7280;
}

.demo-index__steps[b-y1vf5h0669] {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.65;
}

.demo-index__steps li[b-y1vf5h0669] {
    margin-bottom: 0.6rem;
}

.demo-feed-list[b-y1vf5h0669] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.demo-feed-list__item[b-y1vf5h0669] {
    padding: 0.9rem 1rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    background: #fbfbfc;
}

.demo-feed-list__title[b-y1vf5h0669] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.demo-feed-list__badge[b-y1vf5h0669] {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #eef1f6;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #5a616b;
}

.demo-feed-list__url[b-y1vf5h0669] {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    color: #1f2937;
}

.demo-feed-list__meta[b-y1vf5h0669] {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #7a7f87;
}

.demo-article-list[b-y1vf5h0669] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-article-list li[b-y1vf5h0669] {
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f1f4;
    font-size: 0.93rem;
    line-height: 1.5;
}

.demo-article-list__sep[b-y1vf5h0669] {
    margin: 0 0.4rem;
    color: #c2c6cd;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page styles live in app.css, not here: the hero player card is a shared
   PlaybackControls component, and Blazor CSS isolation never reaches a child component's
   markup. Keeping the whole landing block in one place avoids a half-scoped stylesheet. */
/* /Components/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Login.razor — Login Page Styles
   ============================================================ */

.login-page[b-pwshmo5qt5] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(100vh - 3.5rem - 4rem); /* subtract header + footer */
    padding: 2.5rem 1rem 3rem;
    background: linear-gradient(160deg, #f0f5ff 0%, #faf5ff 100%);
}

.login-card[b-pwshmo5qt5] {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid var(--fv-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* ------ Card Header --------------------------------------- */

.login-card__header[b-pwshmo5qt5] {
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--fv-border);
}

.login-card__logo[b-pwshmo5qt5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
    color: var(--fv-text);
}

@media (hover: hover) {
    .login-card__logo:hover[b-pwshmo5qt5] {
        text-decoration: none;
    }
}

.login-card__logo-icon[b-pwshmo5qt5] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10a7 7 0 0 1-14 0'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='8' y1='22' x2='16' y2='22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.login-card__logo-name[b-pwshmo5qt5] {
    background: var(--fv-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-card__title[b-pwshmo5qt5] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--fv-text);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.login-card__sub[b-pwshmo5qt5] {
    font-size: 0.9rem;
    color: var(--fv-text-muted);
    margin: 0;
}

/* ------ Card Body ----------------------------------------- */

.login-card__body[b-pwshmo5qt5] {
    padding: 1.75rem 2rem 2rem;
}

/* ------ OAuth Buttons ------------------------------------- */

.oauth-buttons[b-pwshmo5qt5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oauth-btn[b-pwshmo5qt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--fv-border);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    background: #ffffff;
    color: var(--fv-text);
}

@media (hover: hover) {
    .oauth-btn:hover:not(:disabled)[b-pwshmo5qt5] {
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.oauth-btn:disabled[b-pwshmo5qt5] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.oauth-btn__icon[b-pwshmo5qt5] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

/* Google — border turns Google blue on hover */
@media (hover: hover) {
    .oauth-btn--google:hover[b-pwshmo5qt5] {
        border-color: #4285F4;
        background: #f8fbff;
        color: var(--fv-text);
    }
}

/* Microsoft — border turns Microsoft blue on hover */
@media (hover: hover) {
    .oauth-btn--microsoft:hover[b-pwshmo5qt5] {
        border-color: #00A4EF;
        background: #f5fbff;
        color: var(--fv-text);
    }
}

/* Meta — border turns Meta blue on hover */
.oauth-btn--meta[b-pwshmo5qt5] {
    /* nothing special at rest */
}

@media (hover: hover) {
    .oauth-btn--meta:hover[b-pwshmo5qt5] {
        border-color: #1877F2;
        background: #f3f7ff;
        color: var(--fv-text);
    }
}

/* Apple — solid black per Apple Sign-In HIG */
.oauth-btn--apple[b-pwshmo5qt5] {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

@media (hover: hover) {
    .oauth-btn--apple:hover[b-pwshmo5qt5] {
        background: #1a1a1a;
        color: #ffffff;
        border-color: #1a1a1a;
    }
}

/* ------ Divider ------------------------------------------- */

.login-card__divider[b-pwshmo5qt5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--fv-text-muted);
    font-size: 0.8rem;
}

.login-card__divider[b-pwshmo5qt5]::before,
.login-card__divider[b-pwshmo5qt5]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fv-border);
}

/* ------ Consent box --------------------------------------- */

.login-consent[b-pwshmo5qt5] {
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.6;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.login-consent--required[b-pwshmo5qt5] {
    border: 2px solid #f59e0b;
    background: #fffbeb;
    animation: consent-pulse-b-pwshmo5qt5 2s ease-in-out infinite;
}

.login-consent--accepted[b-pwshmo5qt5] {
    border: 2px solid #22c55e;
    background: #f0fdf4;
}

@keyframes consent-pulse-b-pwshmo5qt5 {
    0%, 100% { border-color: #f59e0b; }
    50%       { border-color: #fbbf24; }
}

.login-consent a[b-pwshmo5qt5] {
    color: var(--fv-primary);
    text-decoration: none;
}

@media (hover: hover) {
    .login-consent a:hover[b-pwshmo5qt5] {
        text-decoration: underline;
    }
}

.login-consent__hint[b-pwshmo5qt5] {
    text-align: center;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: #b45309;
}

/* ------ No passwords / legal ------------------------------ */

.login-card__no-passwords[b-pwshmo5qt5] {
    text-align: center;
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--fv-text-muted);
}
/* /Components/Shared/AppToast.razor.rz.scp.css */
.app-toast[b-1v6jmd5lh2] {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    white-space: nowrap;
    pointer-events: none;
    animation: app-toast-in-b-1v6jmd5lh2 0.2s ease-out;
}

.app-toast--success[b-1v6jmd5lh2] {
    background: rgba(20, 83, 45, 0.95);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: rgb(134, 239, 172);
}

.app-toast--error[b-1v6jmd5lh2] {
    background: rgba(127, 29, 29, 0.95);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: rgb(252, 165, 165);
}

@keyframes app-toast-in-b-1v6jmd5lh2 {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* /Components/Shared/AudioPlayerBar.razor.rz.scp.css */
/* ============================================================
   AudioPlayerBar — compact sticky player bar
   Slides in from top (below the app header) when a playlist
   is loaded. 60px height, dark background.
   ============================================================ */

.audio-player-bar[b-6y3809tgn5] {
    position: sticky;
    top: 48px; /* matches --app-header-height */
    z-index: 190;
    /* Height-based show/hide: 0→60px so the layout shift is smooth, not a sudden
       60px jump when the element is added to the DOM. transform: translateY(-100%)
       looks smooth visually but the 60px layout space is already there on first
       render, causing an immediate page-height jump. */
    height: 0;
    overflow: hidden;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.audio-player-bar--visible[b-6y3809tgn5] {
    height: var(--app-player-height); /* 60px */
    opacity: 1;
    pointer-events: auto;
}

/* ------ Take-over banner (remote-mode) -----------------------
   Another device owns playback and this circuit is idle: the bar
   shows "playing elsewhere" + remote controls + a "Continue here"
   takeover button. Tinted so it reads as a distinct banner, not
   just another player state. */

.audio-player-bar:has(.audio-player-bar__track--remote)[b-6y3809tgn5] {
    background: rgba(56, 189, 248, 0.08);
    border-bottom-color: rgba(56, 189, 248, 0.35);
}

.audio-player-bar__track--remote[b-6y3809tgn5] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.audio-player-bar__remote-label[b-6y3809tgn5] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #38bdf8;
}

/* ------ Track title ----------------------------------------- */

.audio-player-bar__track[b-6y3809tgn5] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audio-player-bar__title[b-6y3809tgn5] {
    display: block;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: #e2e8f0;
    font-weight: 500;
}

.audio-player-bar__text-rules-badge[b-6y3809tgn5] {
    flex: 0 0 auto;
    display: inline-flex;
    color: #94a3b8;
    cursor: help;
}

/* ------ Icon button base -------------------------------------
   Play/pause/next/previous/stop variants moved to PlaybackControls.razor.css
   (that component owns that markup — see note there). This base rule stays
   here too because AudioPlayerBar's own action buttons (Read/ScrollTo below)
   are written directly in this file's markup and need it in this scope. */

.audio-player-bar__btn[b-6y3809tgn5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .audio-player-bar__btn:hover[b-6y3809tgn5] {
        color: #f1f5f9;
        background: rgba(255, 255, 255, 0.08);
    }
}

.audio-player-bar__btn:active[b-6y3809tgn5] {
    background: rgba(255, 255, 255, 0.12);
}

.audio-player-bar__btn svg[b-6y3809tgn5] {
    width: 16px;
    height: 16px;
}

/* ------ Time display ---------------------------------------- */

.audio-player-bar__time[b-6y3809tgn5] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: #64748b;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.audio-player-bar__time-sep[b-6y3809tgn5] {
    padding: 0 0.0625rem;
}

/* Hide time on very small screens */
@media (max-width: 360px) {
    .audio-player-bar__time[b-6y3809tgn5] {
        display: none;
    }
}

/* ------ Actions (article link + locate) --------------------- */

.audio-player-bar__actions[b-6y3809tgn5] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* <a> tags used as icon buttons need display:flex */
a.audio-player-bar__btn[b-6y3809tgn5] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.audio-player-bar__btn--action[b-6y3809tgn5] {
    width: 40px;
    height: auto;
    border-radius: 6px;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    margin-top: 12px;
}

/* Mini-Player opens a separate playback surface (not a page-content action like
   Read/Tag/Hinspringen) — extra gap sets it apart from that group. */
.audio-player-bar__btn--mini-player[b-6y3809tgn5] {
    margin-right: 14px;
}

.audio-player-bar__btn--action svg[b-6y3809tgn5] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.audio-player-bar__btn-label[b-6y3809tgn5] {
    font-size: 0.5rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Take-over "Continue here" button — overrides the generic 40px icon-button
   shape (must come after .audio-player-bar__btn--action so it wins the
   cascade: both classes are applied together on the same element). */
.audio-player-bar__btn--continue[b-6y3809tgn5] {
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 0.375rem;
    margin-top: 0;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--app-primary);
}

.audio-player-bar__btn--continue:disabled[b-6y3809tgn5] {
    opacity: 0.6;
    cursor: default;
}

@media (hover: hover) {
    .audio-player-bar__btn--continue:hover[b-6y3809tgn5] {
        background: var(--app-primary-hover);
    }
}

.audio-player-bar__btn--continue svg[b-6y3809tgn5] {
    width: 16px;
    height: 16px;
}

.audio-player-bar__btn--continue .audio-player-bar__btn-label[b-6y3809tgn5] {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ------ Autoscroll popover (click-toggle, mirrors TagMenu) --- */

.audio-player-bar__scroll-wrap[b-6y3809tgn5] {
    position: relative;
    display: flex;
}

/* Small satellite trigger next to Hinspringen (which keeps its own click action) —
   opens/closes the Autoscroll popover. Narrower than the standard 40px action
   button since it carries no label, just a chevron. */
.audio-player-bar__btn--autoscroll-toggle[b-6y3809tgn5] {
    width: 24px;
    margin-left: -6px;
}

.audio-player-bar__btn--autoscroll-toggle svg[b-6y3809tgn5] {
    width: 14px;
    height: 14px;
}

.audio-player-bar__btn--autoscroll-toggle--active[b-6y3809tgn5] {
    color: var(--app-primary, #2563eb);
}

.audio-player-bar__autoscroll-overlay[b-6y3809tgn5] {
    position: fixed;
    inset: 0;
    z-index: 195;
    background: transparent;
}

.audio-player-bar__autoscroll-popup[b-6y3809tgn5] {
    /* Anchored to a fixed top-right slot below the bar, exactly like TagMenu's
       popover (audio-player-bar__tag-menu) — not measured off the triggering
       button. This is deliberately not JS-positioned: hover+measured-position
       previously raced with layout shifts and could clip past the bar's right
       edge; a fixed, pre-verified-to-fit slot sidesteps both. Only one of
       TagMenu/Autoscroll can be visible at a time in practice — opening either
       first dismisses the other via its own full-viewport overlay. */
    position: fixed;
    top: 112px; /* header (48px) + bar (60px) + 4px gap; bar is always docked at top */
    right: 12px;
    z-index: 196; /* matches TagMenu's popover layer */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--app-border, #334155);
    border-radius: 8px;
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 0.75rem;
    color: #e2e8f0;
    white-space: nowrap;
}

/* ------ Tag popover -------------------------------------------
   Moved to TagMenu.razor.css — that component owns this markup. */

/* ------ Progress bar ---------------------------------------- */

.audio-player-bar__progress-wrap[b-6y3809tgn5] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    cursor: pointer;
    padding: 0;
}

.audio-player-bar__progress-wrap:focus[b-6y3809tgn5] {
    outline: none;
}

.audio-player-bar__progress-wrap:focus-visible[b-6y3809tgn5] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.audio-player-bar__progress-track[b-6y3809tgn5] {
    width: 100%;
    height: 100%;
    background: #334155;
    position: relative;
    overflow: hidden;
}

.audio-player-bar__progress-fill[b-6y3809tgn5] {
    height: 100%;
    background: #2563eb;
    transition: width 0.1s linear;
}
/* /Components/Shared/PlaybackControls.razor.rz.scp.css */
/* ============================================================
   PlaybackControls — shared play/pause/next/previous/stop button row.
   Used by both AudioPlayerBar (local playback) and the Articles
   cross-device resume banner (remote playback). Blazor CSS isolation
   only scopes markup written in the owning .razor file, so these rules
   must live here — they used to sit in AudioPlayerBar.razor.css and
   silently stopped applying once PlaybackControls became its own
   component (the rendered buttons never get AudioPlayerBar's scope
   attribute).
   ============================================================ */

.audio-player-bar__controls[b-04axzd2yls] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.audio-player-bar__btn[b-04axzd2yls] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .audio-player-bar__btn:hover[b-04axzd2yls] {
        color: #f1f5f9;
        background: rgba(255, 255, 255, 0.08);
    }
}

.audio-player-bar__btn:active[b-04axzd2yls] {
    background: rgba(255, 255, 255, 0.12);
}

.audio-player-bar__btn--play[b-04axzd2yls] {
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: #fff;
}

@media (hover: hover) {
    .audio-player-bar__btn--play:hover[b-04axzd2yls] {
        background: #1d4ed8;
        color: #fff;
    }
}

.audio-player-bar__btn svg[b-04axzd2yls] {
    width: 16px;
    height: 16px;
}

.audio-player-bar__btn--play svg[b-04axzd2yls] {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------
   Declarative mode (static SSR, public landing page).
   Both glyphs are in the DOM; the ancestor .is-playing class that
   publicplayer.js toggles on #sf-showcase decides which one shows.
   Blazor scopes only the *last* compound selector, so the ancestor
   part of these rules matches markup outside this component.
   ------------------------------------------------------------ */

.audio-player-bar__glyph[b-04axzd2yls] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-player-bar__glyph--pause[b-04axzd2yls] {
    display: none;
}

.is-playing .audio-player-bar__glyph--play[b-04axzd2yls] {
    display: none;
}

.is-playing .audio-player-bar__glyph--pause[b-04axzd2yls] {
    display: flex;
}

/* ------ Theme: landing ------------------------------------- */

/* The landing showcase is a DARK instrument panel on an otherwise light page, so this theme
   cannot reuse the light-ground colours above. It reads the global --fv-* tokens directly:
   custom properties inherit through the shadow of CSS isolation, so a scoped rule can use them
   even though it cannot be reached by an unscoped rule from app.css. That asymmetry is the
   reason the theming lives here as a parameter rather than as an override in app.css — the
   scoped [b-xxxx] selectors would out-specify anything written from outside. */

.audio-player-bar__controls--landing[b-04axzd2yls] {
    justify-content: center;
    gap: 1rem;
    padding: 1.1rem 0 1.35rem;
}

.audio-player-bar__controls--landing .audio-player-bar__btn[b-04axzd2yls] {
    color: var(--fv-player-muted);
}

@media (hover: hover) {
    .audio-player-bar__controls--landing .audio-player-bar__btn:hover[b-04axzd2yls] {
        color: var(--fv-player-ink);
        background: rgba(255, 255, 255, 0.08);
    }
}

/* One of the three sanctioned uses of the brand gradient (hero accent word, player glow, this). */
.audio-player-bar__controls--landing .audio-player-bar__btn--play[b-04axzd2yls] {
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--fv-gradient);
}

@media (hover: hover) {
    .audio-player-bar__controls--landing .audio-player-bar__btn--play:hover[b-04axzd2yls] {
        color: #fff;
        background: var(--fv-gradient);
        filter: brightness(1.08);
    }
}
/* /Components/Shared/TagMenu.razor.rz.scp.css */
/* ============================================================
   TagMenu — tag-toggle popover, embedded both in AudioPlayerBar
   and in the Articles cross-device resume banner. Blazor CSS
   isolation only scopes markup written in the owning .razor file,
   so this component needs its own copy of the shared icon-button
   base/variant rules (AudioPlayerBar.razor.css keeps its own copy
   for the Read/ScrollTo buttons it renders directly).
   ============================================================ */

.audio-player-bar__btn[b-dbrnokocn8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .audio-player-bar__btn:hover[b-dbrnokocn8] {
        color: #f1f5f9;
        background: rgba(255, 255, 255, 0.08);
    }
}

.audio-player-bar__btn:active[b-dbrnokocn8] {
    background: rgba(255, 255, 255, 0.12);
}

.audio-player-bar__btn--action[b-dbrnokocn8] {
    width: 40px;
    height: auto;
    border-radius: 6px;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    margin-top: 12px;
}

.audio-player-bar__btn--action svg[b-dbrnokocn8] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.audio-player-bar__btn-label[b-dbrnokocn8] {
    font-size: 0.5rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* ------ Tag popover ------------------------------------------ */

.audio-player-bar__tag-wrap[b-dbrnokocn8] {
    position: relative;
}

.audio-player-bar__tag-overlay[b-dbrnokocn8] {
    position: fixed;
    inset: 0;
    z-index: 195;
    background: transparent;
}

.audio-player-bar__tag-menu[b-dbrnokocn8] {
    /* The player bar animates height:0 -> 60px with overflow:hidden, which would
       clip a position:absolute popover regardless of z-index; position:fixed escapes
       that clipping ancestor. The resume banner has no such clipping, but fixed
       positioning works fine there too. */
    position: fixed;
    top: 112px; /* header (48px) + bar (60px) + 4px gap; bar is always docked at top */
    right: 12px;
    z-index: 196;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.25rem;
    border: 1px solid var(--app-border, #334155);
    border-radius: 8px;
    background: var(--app-bg-surface, #1e293b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Only the curator "featured" toggle can fail (showcase cap reached / R2 error) — ordinary tags
   take the optimistic JS path and never render this. */
.audio-player-bar__tag-error[b-dbrnokocn8] {
    margin: 0;
    padding: 0.4rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.12);
    border-radius: 5px;
}

.audio-player-bar__tag-item[b-dbrnokocn8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.audio-player-bar__tag-item svg[b-dbrnokocn8] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

@media (hover: hover) {
    .audio-player-bar__tag-item:hover[b-dbrnokocn8] {
        background: #273349;
    }
}

.audio-player-bar__tag-item--active[b-dbrnokocn8] {
    color: var(--app-primary, #2563eb);
}
/* /Components/Shared/UiHintBubble.razor.rz.scp.css */
/* ============================================================
   UiHintBubble — one-time coach-mark speech bubble
   Wraps a single target element; bubble appears below it.
   ============================================================ */

/* Positioning anchor — inline-flex so it doesn't break the
   parent flex/grid layout (same footprint as the wrapped child). */
.uih-anchor[b-7rsj8vu5sk] {
    position: relative;
    display: inline-flex;
}

/* Bubble — appears below-right of the anchor, tail points up */
.uih-bubble[b-7rsj8vu5sk] {
    position: absolute;
    top: calc(100% + 10px);
    right: -4px;
    width: 220px;
    background: #1e3a5f;
    border: 1px solid #2563eb;
    border-radius: 10px;
    padding: 0.75rem 0.875rem 0.625rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    /* prevent bubble from triggering card click */
    pointer-events: auto;
}

/* Tail — border triangle pointing UP toward the target button */
.uih-bubble[b-7rsj8vu5sk]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    border: 7px solid transparent;
    border-bottom-color: #2563eb;
}

.uih-bubble[b-7rsj8vu5sk]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 11px;
    border: 6px solid transparent;
    border-bottom-color: #1e3a5f;
}

.uih-bubble__title[b-7rsj8vu5sk] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.3rem;
}

.uih-bubble__body[b-7rsj8vu5sk] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 0.625rem;
}

.uih-bubble__footer[b-7rsj8vu5sk] {
    display: flex;
    justify-content: flex-end;
}

.uih-bubble__got-it[b-7rsj8vu5sk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

@media (hover: hover) {
    .uih-bubble__got-it:hover[b-7rsj8vu5sk] {
        background: #1d4ed8;
    }
}

.uih-bubble__got-it:active[b-7rsj8vu5sk] {
    background: #1d4ed8;
}

.uih-bubble__got-it svg[b-7rsj8vu5sk] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Anchor-to-target (floating) mode — JS sets position:fixed + top/left against a
   target painted outside this component (the JS-owned article list). The anchor is
   a zero-size point at the target's bottom-left, so the bubble is offset from there
   rather than from a wrapped child's right edge. */
.uih-anchor--floating[b-7rsj8vu5sk] {
    display: block;
    width: 0;
    height: 0;
}

.uih-anchor--floating .uih-bubble[b-7rsj8vu5sk] {
    top: 8px;      /* just below the anchored target */
    right: auto;
    left: -8px;    /* nudge so the up-tail sits over the target button */
}

.uih-anchor--floating .uih-bubble[b-7rsj8vu5sk]::before {
    right: auto;
    left: 12px;
}

.uih-anchor--floating .uih-bubble[b-7rsj8vu5sk]::after {
    right: auto;
    left: 13px;
}