/* /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;
    overflow-x: hidden;
}

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

[b-nfxrfz3ncw] .app-bottom-nav__item:hover {
    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;
}

[b-nfxrfz3ncw] .btn-primary:hover,
[b-nfxrfz3ncw] .btn-primary:focus {
    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);
}

[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-danger {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

[b-nfxrfz3ncw] .btn-outline-danger:hover {
    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);
}

.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;
}

.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;
}

    #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 */
.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] {
    border-color: #ffc107;
}

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

.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__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;
}

.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;
}

.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;
}

.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;
}

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

.articles-header[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

/* ------ Article list --------------------------------------- */

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

/* ------ Article card --------------------------------------- */

.article-card[b-tamtoo0m9b] {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    column-gap: 0.55rem;
    padding: 0.6rem 0.625rem 0.55rem;
    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;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    list-style: none;
}

/* Row 1, col 1: mini play button */
.article-card__play-btn[b-tamtoo0m9b] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.15);
    border: 1.5px solid rgba(37, 99, 235, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.article-card__play-btn svg[b-tamtoo0m9b] {
    width: 11px;
    height: 11px;
    color: var(--app-primary);
    margin-left: 1px; /* optical center for play triangle */
}

.article-card--active .article-card__play-btn[b-tamtoo0m9b] {
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.article-card--active .article-card__play-btn svg[b-tamtoo0m9b] {
    color: #fff;
}

/* Row 1, col 3: action buttons */
.article-card__actions[b-tamtoo0m9b] {
    display: flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
}

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

/* Active / playing card */
.article-card--active[b-tamtoo0m9b] {
    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);
}

/* Listened card — dimmed */
.article-card--listened[b-tamtoo0m9b] {
    opacity: 0.6;
}

.article-card--listened:hover[b-tamtoo0m9b] {
    opacity: 0.8;
}

/* Ghost card — last-played article kept visible in unlistened-only mode.
   Dashed border signals "navigate back here via ← Previous". */
.article-card--ghost[b-tamtoo0m9b] {
    opacity: 0.35;
    border-style: dashed;
}

.article-card--ghost:hover[b-tamtoo0m9b] {
    opacity: 0.7;
    border-style: solid;
}

/* Listened badge (checkmark icon) */
.article-card__listened-badge[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    color: rgba(74, 222, 128, 0.7);
    flex-shrink: 0;
}

.article-card__listened-badge svg[b-tamtoo0m9b] {
    width: 12px;
    height: 12px;
}

/* Replayed badge (repeat icon) */
.article-card__replayed-badge[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    color: rgba(251, 191, 36, 0.8);
    flex-shrink: 0;
}

.article-card__replayed-badge svg[b-tamtoo0m9b] {
    width: 12px;
    height: 12px;
}

/* Resume highlight — "Weiter hören" from another device */
.article-card--resume[b-tamtoo0m9b] {
    background: rgba(234, 179, 8, 0.07);
    border-color: rgba(234, 179, 8, 0.35);
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.1);
}

.article-card--resume .article-card__title[b-tamtoo0m9b] {
    color: #fde047;
    font-weight: 600;
}

.article-card__resume-badge[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #fde047;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ------ Card body (title + meta) --------------------------- */

.article-card__title[b-tamtoo0m9b] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--app-text);
    margin: 0;
    line-height: 1.35;
    align-self: center;
}

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

.article-card__meta[b-tamtoo0m9b] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    margin: 0.2rem 0 0;
    white-space: nowrap;
    overflow: hidden;
}

.article-card__feed[b-tamtoo0m9b] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.article-card__sep[b-tamtoo0m9b] {
    flex-shrink: 0;
}

.article-card__duration[b-tamtoo0m9b] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.article-card__age[b-tamtoo0m9b] {
    flex-shrink: 0;
}

/* ------ Summary snippet ------------------------------------ */

.article-card__summary[b-tamtoo0m9b] {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    color: var(--app-text-muted);
    margin: 0.25rem 0 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------ Playing waveform indicator (inside play button) ---- */

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

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

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

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

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

.article-card__link-btn[b-tamtoo0m9b] {
    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;
}

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

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

/* ------ Batch "bis hier gehört" button -------------------- */

.article-card__mark-btn[b-tamtoo0m9b] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    opacity: 0.45;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.article-card__mark-btn svg[b-tamtoo0m9b] {
    width: 16px;
    height: 16px;
}

.article-card__mark-btn:hover[b-tamtoo0m9b],
.article-card__mark-btn:focus-visible[b-tamtoo0m9b] {
    opacity: 1;
    color: var(--app-primary);
    background: rgba(37, 99, 235, 0.1);
}

@media (hover: none) {
    .article-card__mark-btn[b-tamtoo0m9b] { opacity: 0.55; }
    .article-card__mark-btn--unmark[b-tamtoo0m9b] { opacity: 1; }
}

.article-card__mark-btn--unmark[b-tamtoo0m9b] {
    opacity: 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; }
}

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

.articles-empty[b-tamtoo0m9b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem 2rem;
    gap: 0.75rem;
}

.articles-empty__icon[b-tamtoo0m9b] {
    width: 72px;
    height: 72px;
    color: var(--app-text-muted);
    opacity: 0.4;
}

.articles-empty__icon svg[b-tamtoo0m9b] {
    width: 100%;
    height: 100%;
}

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

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

.articles-empty__actions[b-tamtoo0m9b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.btn-primary-pill[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary-pill:hover[b-tamtoo0m9b] {
    background: var(--app-primary-hover);
    color: #fff;
}

.btn-outline-pill[b-tamtoo0m9b] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    border: 1.5px solid var(--app-border);
    background: transparent;
    color: var(--app-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-outline-pill:hover[b-tamtoo0m9b] {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

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

@media (min-width: 480px) {
    .article-card__title[b-tamtoo0m9b] {
        font-size: 1rem;
    }
}

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

.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);
}

.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);
}

.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;
}

.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;
}

.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;
}

.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__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;
}

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

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

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

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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);
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent;
    color: var(--app-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.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;
}

.vc-icon-btn--star[b-uc2788deao] { color: #60a5fa; }
.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);
}

.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; }
.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/Home.razor.rz.scp.css */
/* Landing page styles moved to app.css (CSS isolation doesn't reach HomeDe/HomeEn child components) */
/* /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);
}

.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);
}

.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 */
.oauth-btn--google:hover[b-pwshmo5qt5] {
    border-color: #4285F4;
    background: #f8fbff;
    color: var(--fv-text);
}

/* Microsoft — border turns Microsoft blue on 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 */
}

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

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

.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;
}

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

.audio-player-bar__track[b-6y3809tgn5] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

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

/* ------ Controls -------------------------------------------- */

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

.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;
}

.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--play[b-6y3809tgn5] {
    width: 40px;
    height: 40px;
    background: #2563eb;
    color: #fff;
}

.audio-player-bar__btn--play:hover[b-6y3809tgn5] {
    background: #1d4ed8;
    color: #fff;
}

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

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

/* ------ 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: 30px;
    height: 30px;
}

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

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