@import 'Wetflix2App.Client.afs84d38jy.bundle.scp.css';

/* _content/Wetflix2App/Components/Account/Pages/Login.razor.rz.scp.css */
/* Login page */

.login-page[b-dc7mb5gufc] {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 24px);
    padding-left: max(clamp(16px, 3vw, 24px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 3vw, 24px), env(safe-area-inset-right));
    padding-top: max(clamp(16px, 3vw, 24px), env(safe-area-inset-top));
    padding-bottom: max(clamp(16px, 3vw, 24px), env(safe-area-inset-bottom));
    z-index: 0; /* background sits below; content above */
}

.login-center[b-dc7mb5gufc] {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    position: relative;
    z-index: 1; /* ensure above animated background layers */
}

.login-card[b-dc7mb5gufc] {
    border: 1px solid var(--border);
    background: rgba(15,17,23,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Brand bubble */
.brand-mark[b-dc7mb5gufc] {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}

/* Inputs feel a touch tighter on mobile */
@media (max-width: 480px) {
    .login-card .form-label[b-dc7mb5gufc] {
        margin-bottom: .35rem;
        font-size: .95rem;
    }

    .login-card .form-control[b-dc7mb5gufc] {
        padding: .55rem .75rem;
        font-size: .95rem;
    }
}

/* Responsive niceties */
@media (min-width: 992px) {
    .login-center[b-dc7mb5gufc] {
        max-width: 520px;
    }
}

/* Validation on dark */
.validation-message[b-dc7mb5gufc],
.text-danger[b-dc7mb5gufc] {
    color: var(--danger) !important;
}

/* Buttons full width on this screen */
.login-card .btn[b-dc7mb5gufc] {
    width: 100%;
}
/* _content/Wetflix2App/Components/Chart/ContentLineChart.razor.rz.scp.css */
/* Scoped to ContentLineChart */
.clc-empty[b-f7w6l4epnq] {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-dim);
    background: rgba(167,139,250,.06);
}
/* _content/Wetflix2App/Components/Common/ContentHistory.razor.rz.scp.css */
/* Keep cards horizontal — rely on existing .shelf-row flex.
   These rules ensure our wrapper behaves like a single card item. */
.history-card[b-u1dthq04g1] {
    display: inline-block;
    flex: 0 0 auto;
}

/* Anchor wraps the card and hosts the overlay without affecting flow */
.history-card__link[b-u1dthq04g1] {
    position: relative; /* overlay positioning context */
    display: inline-block; /* shrink-wrap to ContentCard’s fixed size */
    border-radius: 12px; /* match card rounding so overlay edges align */
}

/* Big, attention-grabbing CTA placed over the poster */
.continue-overlay[b-u1dthq04g1] {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 6; /* above ContentCard overlays (progress z=4) */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    /* glassy pill */
    background: rgba(15, 15, 22, .92);
    border: 1px solid rgba(129,140,248,.65);
    box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
    color: #eef0ff;
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
    /* invisible by default, visible on hover or on touch */
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
    pointer-events: none; /* click goes to the link anyway */
}

.history-card__link:hover .continue-overlay[b-u1dthq04g1],
.history-card__link:focus-visible .continue-overlay[b-u1dthq04g1] {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Touch devices: show by default for discoverability */
@media (hover: none) and (pointer: coarse) {
    .continue-overlay[b-u1dthq04g1] {
        opacity: 1;
    }
}

.continue-icon[b-u1dthq04g1] {
    font-size: 1rem;
    line-height: 1;
}

.continue-text[b-u1dthq04g1] {
    font-size: .9rem;
    text-transform: uppercase;
}

.continue-time[b-u1dthq04g1] {
    font-size: .85rem;
    opacity: .9;
    padding-left: .25rem;
}

/* High-contrast preference */
@media (prefers-contrast: more) {
    .continue-overlay[b-u1dthq04g1] {
        border-color: #fff;
    }
}
/* _content/Wetflix2App/Components/Common/DefaultHeroComponent.razor.rz.scp.css */
/* Theming via app.css variables */
.hero[b-gziik6cfxk] {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 10% -20%, rgba(96,165,250,.18), transparent 60%), radial-gradient(1200px 600px at 90% 120%, rgba(167,139,250,.18), transparent 60%), var(--surface);
}

.hero-inner[b-gziik6cfxk] {
    padding: 28px 20px;
    display: grid;
    gap: 10px;
    color: var(--text);
}

.hero-overline[b-gziik6cfxk] {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    font-size: .85rem;
}

.hero-title[b-gziik6cfxk] {
    margin: 0;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: .2px;
}

.hero-sub[b-gziik6cfxk] {
    margin: 0;
    color: var(--text-dim);
    max-width: 70ch;
}

.hero-actions[b-gziik6cfxk] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-cta[b-gziik6cfxk] {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    background: var(--surface);
    color: var(--text);
}

    .btn-cta:hover[b-gziik6cfxk] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }
/* _content/Wetflix2App/Components/Common/DefaultHeroImageComponent.razor.rz.scp.css */
/* Container grid with split options and image side */
.hero-img[b-f5w3my2m0y] {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    min-height: 260px;
}

/* Split presets */
.split-half[b-f5w3my2m0y] {
    grid-template-columns: 1fr 1fr;
}

.split-third[b-f5w3my2m0y] {
    grid-template-columns: 2fr 3fr;
}
/* ~40/60 */

@media (max-width: 720px) {
    .split-half[b-f5w3my2m0y], .split-third[b-f5w3my2m0y] {
        grid-template-columns: 1fr;
    }
}

/* Image left/right ordering */
.img-left .hero-img__media[b-f5w3my2m0y] {
    order: 0;
}

.img-left .hero-img__content[b-f5w3my2m0y] {
    order: 1;
}

.img-right .hero-img__media[b-f5w3my2m0y] {
    order: 1;
}

.img-right .hero-img__content[b-f5w3my2m0y] {
    order: 0;
}

.hero-img__media[b-f5w3my2m0y] {
    position: relative;
    min-height: 220px;
}

.hero-img__img[b-f5w3my2m0y] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-img__placeholder[b-f5w3my2m0y] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-dim);
    background: linear-gradient(135deg, #2b2b2b, #171717);
}

/* Fade between image and text block (direction depends on side) */
.hero-img__fade[b-f5w3my2m0y] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.img-left .hero-img__fade[b-f5w3my2m0y] {
    background: linear-gradient(90deg, rgba(15,17,23,0) 55%, rgba(15,17,23,.85) 85%, rgba(15,17,23,1) 100%);
}

.img-right .hero-img__fade[b-f5w3my2m0y] {
    background: linear-gradient(270deg, rgba(15,17,23,0) 55%, rgba(15,17,23,.85) 85%, rgba(15,17,23,1) 100%);
}

/* Text column */
.hero-img__content[b-f5w3my2m0y] {
    padding: 28px 20px;
    display: grid;
    gap: 10px;
    color: var(--text);
    background: radial-gradient(900px 500px at 20% 120%, rgba(96,165,250,.12), transparent 60%), radial-gradient(900px 500px at 80% -20%, rgba(167,139,250,.12), transparent 60%), var(--surface);
}

.hero-overline[b-f5w3my2m0y] {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    font-size: .85rem;
}

.hero-title[b-f5w3my2m0y] {
    margin: 0;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: .2px;
}

.hero-sub[b-f5w3my2m0y] {
    margin: 0;
    color: var(--text-dim);
    max-width: 70ch;
}

.hero-actions[b-f5w3my2m0y] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-cta[b-f5w3my2m0y] {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    background: var(--surface);
    color: var(--text);
}

    .btn-cta:hover[b-f5w3my2m0y] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }
/* _content/Wetflix2App/Components/Common/DefaultTableComponent.razor.rz.scp.css */
.tbl-root[b-zfy778d03z] {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
}

.tbl-title[b-zfy778d03z] {
    padding: 12px 14px 0 14px;
    font-weight: 800;
    letter-spacing: .2px;
}

.tbl-wrap[b-zfy778d03z] {
    width: 100%;
    overflow-x: auto; /* responsive */
    padding: 8px 12px 12px 12px;
    box-sizing: border-box;
}

.tbl[b-zfy778d03z] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .tbl thead th[b-zfy778d03z] {
        text-align: left;
        font-weight: 700;
        color: var(--text);
        background: linear-gradient(180deg, rgba(167,139,250,.10), rgba(96,165,250,.06));
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
        white-space: nowrap;
    }

    .tbl td[b-zfy778d03z] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .tbl tbody tr:last-child td[b-zfy778d03z] {
        border-bottom: 0;
    }

.hover tbody tr:hover[b-zfy778d03z] {
    background: rgba(167,139,250,.06);
}

.striped tbody tr:nth-child(2n)[b-zfy778d03z] {
    background: rgba(96,165,250,.04);
}

.dense .tbl td[b-zfy778d03z],
.dense .tbl thead th[b-zfy778d03z] {
    padding: 8px 10px;
}

.tbl-empty[b-zfy778d03z] {
    text-align: center;
    color: var(--text-dim);
    padding: 16px;
}
/* _content/Wetflix2App/Components/Common/GMessage/GMessagecomponent.razor.rz.scp.css */
/* File: Components/GMessageComponent.razor.css */
:root[b-r8e0vrcynn] {
    --gmsg-bg: #12121a;
    --gmsg-fg: #e8e8f0;
    --gmsg-muted: #a9adc4;
    --gmsg-indigo: #4c5bd4;
    --gmsg-blue: #2e7bb4;
    --gmsg-cyan: #3ea6c9;
    --gmsg-amber: #d6a845;
    --gmsg-red: #d64556;
    --gmsg-nuke: #ff3b3b;
    --gmsg-border: rgba(255,255,255,0.08);
    --gmsg-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.gmsg-banner[b-r8e0vrcynn] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gmsg-border);
    border-radius: 14px;
    color: var(--gmsg-fg);
    background: radial-gradient(1200px 1200px at -10% -50%, rgba(108,99,255,0.08), transparent 60%), linear-gradient(135deg, rgba(40,42,58,0.95), rgba(22,24,36,0.95));
    box-shadow: var(--gmsg-shadow);
    backdrop-filter: saturate(1.1) blur(6px);
    position: relative;
}

.gmsg-left[b-r8e0vrcynn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--gmsg-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.1));
}

.gmsg-content[b-r8e0vrcynn] {
    font-size: 0.98rem;
    line-height: 1.35rem;
}

.gmsg-desc[b-r8e0vrcynn] {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--gmsg-muted);
}

.gmsg-close[b-r8e0vrcynn] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--gmsg-fg);
    opacity: 0.85;
    padding: 0.3rem;
    border-radius: 10px;
    cursor: pointer;
}

    .gmsg-close:hover[b-r8e0vrcynn] {
        opacity: 1;
        background: rgba(255,255,255,0.06);
    }

/* Severity accents (left icon circle + subtle border-image) */
.gmsg-importance-none .gmsg-left[b-r8e0vrcynn] {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);
}

.gmsg-importance-debug .gmsg-left[b-r8e0vrcynn] {
    color: #7f8c8d;
    box-shadow: inset 0 0 0 2px rgba(127,140,141,0.45);
}

.gmsg-importance-info .gmsg-left[b-r8e0vrcynn] {
    color: var(--gmsg-cyan);
    box-shadow: inset 0 0 0 2px rgba(62,166,201,0.45);
}

.gmsg-importance-warning .gmsg-left[b-r8e0vrcynn] {
    color: var(--gmsg-amber);
    box-shadow: inset 0 0 0 2px rgba(214,168,69,0.55);
}

.gmsg-importance-error .gmsg-left[b-r8e0vrcynn] {
    color: var(--gmsg-red);
    box-shadow: inset 0 0 0 2px rgba(214,69,86,0.60);
}

.gmsg-importance-nuklear .gmsg-left[b-r8e0vrcynn] {
    color: var(--gmsg-nuke);
    box-shadow: inset 0 0 0 2px rgba(255,59,59,0.70);
}

.bi[b-r8e0vrcynn] {
    font-size: 1.15rem;
    vertical-align: middle;
}
/* _content/Wetflix2App/Components/Common/LoadingComponent.razor.rz.scp.css */
/* Root */
.lc-root[b-qapzf49off] {
    position: relative;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--text);
    isolation: isolate;
    z-index: 1;
}

    .lc-root.lc-overlay[b-qapzf49off] {
        position: absolute;
        inset: 0;
    }

    .lc-root.lc-fullscreen[b-qapzf49off] {
        position: fixed;
        inset: 0;
    }

.lc-backdrop[b-qapzf49off] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(2px);
    z-index: -1;
}

/* Box */
.lc-box[b-qapzf49off] {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

/* Message */
.lc-msg[b-qapzf49off] {
    font-size: .98rem;
    color: var(--text-dim);
}

/* Spinner */
.lc-spinner[b-qapzf49off] {
    position: relative;
    width: 42px;
    height: 42px;
}

    .lc-spinner .ring[b-qapzf49off] {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: conic-gradient(from 0deg, var(--accent) 0 270deg, rgba(255,255,255,.06) 270deg 360deg);
        -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
        mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
        animation: lc-spin-b-qapzf49off 900ms linear infinite;
    }

    .lc-spinner .glow[b-qapzf49off] {
        position: absolute;
        inset: 6px;
        border-radius: 999px;
        background: radial-gradient(60% 60% at 50% 50%, rgba(167,139,250,.25), transparent 70%);
        filter: blur(.5px);
    }

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

/* Dots */
.lc-dots[b-qapzf49off] {
    display: inline-flex;
    gap: 6px;
    height: 14px;
    align-items: end;
}

    .lc-dots span[b-qapzf49off] {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent);
        opacity: .7;
        animation: lc-bounce-b-qapzf49off 1s ease-in-out infinite;
    }

        .lc-dots span:nth-child(2)[b-qapzf49off] {
            animation-delay: .15s;
        }

        .lc-dots span:nth-child(3)[b-qapzf49off] {
            animation-delay: .30s;
        }

@keyframes lc-bounce-b-qapzf49off {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .6;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Bar */
.lc-bar[b-qapzf49off] {
    position: relative;
    width: 220px;
    max-width: 60vw;
    height: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    border: 1px solid var(--border);
}

    .lc-bar > span[b-qapzf49off] {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        border-radius: 8px;
        animation: lc-bar-indeterminate-b-qapzf49off 1.2s linear infinite;
    }
        /* If width is set inline (determinate), stop the indeterminate animation */
        .lc-bar > span[style*="width"][b-qapzf49off] {
            animation: none;
        }

@keyframes lc-bar-indeterminate-b-qapzf49off {
    0% {
        transform: translateX(-100%);
        width: 35%;
    }

    50% {
        transform: translateX(20%);
        width: 40%;
    }

    100% {
        transform: translateX(120%);
        width: 35%;
    }
}

/* Skeleton cards for shelves */
.lc-skeletons[b-qapzf49off] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.lc-skel-card[b-qapzf49off] {
    border-radius: 10px;
    background: linear-gradient(110deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.06) 50%);
    background-size: 200% 100%;
    animation: lc-shimmer-b-qapzf49off 1s ease-in-out infinite;
    border: 1px solid var(--border);
}

@keyframes lc-shimmer-b-qapzf49off {
    0% {
        background-position: -120% 0;
    }

    100% {
        background-position: 120% 0;
    }
}
/* _content/Wetflix2App/Components/Common/PlayButton.razor.rz.scp.css */
.w-play-btn[b-nxcpeia1vl] {
    --ring: rgba(129,140,248,.55);
    --glow: rgba(129,140,248,.35);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: none;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .2px;
    background: linear-gradient(135deg,#6366f1, #8b5cf6 55%, #22d3ee);
    color: #0b0f17;
    box-shadow: 0 8px 30px var(--glow);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .w-play-btn:hover[b-nxcpeia1vl] {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 12px 44px var(--glow);
        filter: brightness(1.05);
    }

    .w-play-btn:active[b-nxcpeia1vl] {
        transform: translateY(0) scale(.99);
    }

    .w-play-btn:disabled[b-nxcpeia1vl] {
        opacity: .65;
        cursor: not-allowed;
        filter: grayscale(.2);
    }

    .w-play-btn i[b-nxcpeia1vl] {
        font-size: 1.25rem;
        display: inline-block;
    }
/* _content/Wetflix2App/Components/Content/ContentCard.razor.rz.scp.css */

/* Fixed-size box; width/height set inline */
.content-card[b-glth07kg93] {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    background: #0a0a0a; /* shows as letterbox with contain */
    user-select: none;
    flex: 0 0 auto; /* never shrink in flex rows */
    transform-origin: center;
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
}

    .content-card:hover[b-glth07kg93] {
        /* IMPORTANT: do NOT scale the container; it breaks overflow-x rows */
        transform: translateY(-6px);
        box-shadow: 0 18px 36px rgba(0,0,0,.55);
        z-index: 2;
    }

    .content-card .poster-wrap[b-glth07kg93] {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Poster scales for zoom; container size stays constant */
    .content-card .poster[b-glth07kg93] {
        width: 100%;
        height: 100%;
        object-position: center;
        display: block;
        transition: filter .18s ease, transform .18s ease;
        will-change: transform, filter;
    }

        .content-card .poster.contain[b-glth07kg93] {
            object-fit: contain;
        }

        /* Episodes (16:9) should fill without bars (crop as needed) */
        .content-card .poster.cover[b-glth07kg93] {
            object-fit: cover;
        }

    .content-card:hover .poster[b-glth07kg93] {
        transform: scale(1.08);
        filter: blur(1.5px) brightness(.88);
    }

    /* ---- WATCH PROGRESS (bottom -> top) ---- */
    .content-card .progress-rail[b-glth07kg93] {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2; /* above poster, below text overlay */
    }

    .content-card .progress-fill[b-glth07kg93] {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0; /* set inline */
        background: linear-gradient(0deg, rgba(129,140,248,.46) 0%, rgba(129,140,248,.22) 80%, rgba(129,140,248,.08) 100%);
        border-top: 1px solid rgba(129,140,248,.85);
        box-shadow: 0 -8px 18px rgba(129,140,248,.22) inset;
    }

    /* Overlay */
    .content-card .overlay[b-glth07kg93] {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: end start;
        padding: 10px;
        background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6) 85%, rgba(0,0,0,.85) 100%);
        opacity: 0;
        transition: opacity .18s ease;
        pointer-events: none;
        z-index: 3; /* ensure above progress overlay */
    }

    .content-card:hover .overlay[b-glth07kg93] {
        opacity: 1;
    }

.overlay-text[b-glth07kg93] {
    color: #fff;
    width: 100%;
    padding-right: 6px;
}

/* Stars */
.rating-stars[b-glth07kg93] {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 6px;
    line-height: 1;
}

    .rating-stars .star[b-glth07kg93] {
        font-size: 1rem;
        color: #888;
        opacity: .6;
        text-shadow: 0 0 2px rgba(0,0,0,.6);
    }

        .rating-stars .star.filled[b-glth07kg93] {
            color: #ffd166; /* warm yellow */
            opacity: 1;
        }

/* Title + badges */
.overlay-text .title[b-glth07kg93] {
    font-weight: 600;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.overlay-text .episode-badge[b-glth07kg93],
.overlay-text .series-badge[b-glth07kg93] {
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
}

/* Fallback block when no/broken image — same exact size as card */
.no-poster[b-glth07kg93] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2b2b2b, #171717);
    color: #cfcfcf;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    font-weight: 600;
}

/* === Watch progress enhancements (append-only, scoped to .content-card) === */

/* Subtle diagonal texture over the filled area */
.content-card .progress-stripes[b-glth07kg93] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0; /* set inline from component */
    pointer-events: none;
    z-index: 2; /* same layer as rail/fill, still under .overlay (z=3) */
    background: repeating-linear-gradient( 135deg, rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 8px, rgba(255,255,255,.05) 8px, rgba(255,255,255,.05) 16px );
    opacity: .35;
}

/* Soft glow at the current progress edge */
.content-card .progress-glow[b-glth07kg93] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0; /* set inline */
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 -10px 22px rgba(129,140,248,.42);
}

/* Make the existing fill a bit stronger without changing layout */
.content-card .progress-fill[b-glth07kg93] {
    /* keeps your existing gradient, just a touch bolder */
    filter: saturate(1.1) brightness(1.05);
}

/* Bottom-right percentage chip — sits above the hover overlay for readability */
.content-card .progress-chip[b-glth07kg93] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4; /* above .overlay (z=3) */
    padding: 3px 9px;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1.25;
    color: #eef0ff;
    background: rgba(15,15,22,.88);
    border: 1px solid rgba(129,140,248,.55);
    border-radius: 999px;
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 14px rgba(0,0,0,.35);
    pointer-events: none; /* don’t intercept clicks */
}

/* Top-left “Watched” label — compact and non-intrusive */
.content-card .progress-chip-label[b-glth07kg93] {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 4;
    padding: 2px 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #e8e9ff;
    background: rgba(99,102,241,.28);
    border: 1px solid rgba(129,140,248,.5);
    border-radius: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

/* === Tweaks: stronger stripes + thicker progress edge === */

/* Make stripes less transparent (more visible) */
.content-card .progress-stripes[b-glth07kg93] {
    opacity: .8; /* was .35 */
    background: repeating-linear-gradient( 135deg, rgba(255,255,255,.28) 0px, rgba(255,255,255,.28) 8px, rgba(255,255,255,.10) 8px, rgba(255,255,255,.10) 16px );
}

/* Thicken the top edge line of the fill and give it a touch more presence */
.content-card .progress-fill[b-glth07kg93] {
    border-top: 2px solid rgba(129,140,248,.95); /* was 1px */
    box-shadow: 0 -12px 24px rgba(129,140,248,.30) inset; /* slightly stronger */
}

/* Optional: boost for high-contrast users */
@media (prefers-contrast: more) {
    .content-card .progress-stripes[b-glth07kg93] {
        opacity: .75;
    }
}
/* _content/Wetflix2App/Components/Content/ContentList.razor.rz.scp.css */
.content-list[b-zd5ill75il] {
    display: block;
    margin: 16px 0 8px;
    /* width is controlled inline via --target-width + MaxWidth OR by FullWidth inline style */
}

    /* In case parent styles try to clamp width, this helps the visual intent.
   The actual full-bleed geometry is set inline for reliability. */
    .content-list.fullwidth[b-zd5ill75il] {
        /* no extra rules required; inline style sets the bleed.
       keep the class for future theming if needed */
    }

    .content-list .list-title[b-zd5ill75il] {
        color: #fff;
        font-weight: 700;
        margin: 0 4px 10px;
        letter-spacing: .3px;
    }

    .content-list .strip[b-zd5ill75il] {
        display: flex;
        flex-wrap: nowrap; /* single row */
        width: 100%; /* constrain viewport width so overflow can happen */
        overflow-x: auto; /* horizontal scrollbar appears only if needed */
        overflow-y: visible; /* let card hover-lift show */
        padding: 4px 2px 14px; /* extra bottom so the bar isn’t overlapped */
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        scrollbar-gutter: stable both-edges;
        scrollbar-width: thin;
        scrollbar-color: #6b7280 #111; /* thumb / track */
    }

        /* WebKit / Chromium scrollbar styling */
        .content-list .strip[b-zd5ill75il]::-webkit-scrollbar {
            height: 12px; /* horizontal bar height */
        }

        .content-list .strip[b-zd5ill75il]::-webkit-scrollbar-track {
            background: #111;
            border-radius: 6px;
        }

        .content-list .strip[b-zd5ill75il]::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #6b7280, #9ca3af);
            border-radius: 6px;
        }

            .content-list .strip[b-zd5ill75il]::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(180deg, #818cf8, #a5b4fc);
            }

        /* Prevent children from shrinking */
        .content-list .strip > *[b-zd5ill75il] {
            flex: 0 0 auto;
            scroll-snap-align: start;
        }
/* _content/Wetflix2App/Components/Content/ContentView.razor.rz.scp.css */
.content-view[b-tc90md674t] {
    padding: 18px 0 26px;
}

.cv-loading[b-tc90md674t],
.cv-error[b-tc90md674t] {
    color: #c9d3e8;
    padding: 20px 10px;
}

.cv-card[b-tc90md674t] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(17,20,27,.96);
    overflow: hidden;
    padding: 16px;
}

@media (max-width: 780px) {
    .cv-card[b-tc90md674t] {
        grid-template-columns: 1fr;
    }
}

.cv-left[b-tc90md674t] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.cv-right[b-tc90md674t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cv-meta[b-tc90md674t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cv-rating[b-tc90md674t] {
    color: #c3e88d;
    font-weight: 700;
}

.cv-title[b-tc90md674t] {
    margin: 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
}

.cv-sub[b-tc90md674t] {
    color: #9aa7c2;
}

.cv-desc[b-tc90md674t] {
    color: #cfd7ea;
}

.cv-actions[b-tc90md674t] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
/* _content/Wetflix2App/Components/Content/DetailMovieView.razor.rz.scp.css */
.movie-hero[b-wnoe5b84ga] {
    position: relative;
    width: min(1200px,100vw - 32px);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.hero-bg[b-wnoe5b84ga] {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    .hero-bg[b-wnoe5b84ga]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.78) 58%, rgba(10,12,16,.84) 100%);
    }

.hero-grid[b-wnoe5b84ga] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    padding: 24px;
}

.hero-poster[b-wnoe5b84ga] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-poster-img[b-wnoe5b84ga], .hero-poster-fallback[b-wnoe5b84ga] {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.hero-poster-fallback[b-wnoe5b84ga] {
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg,#2b2b2b,#171717);
    font-weight: 800;
    padding: 12px;
    text-align: center;
}

.breadcrumbs[b-wnoe5b84ga] {
    display: flex;
    gap: 6px;
    color: #cfd6ea;
    margin-bottom: 2px;
}

.crumb[b-wnoe5b84ga] {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 700;
}

    .crumb:hover[b-wnoe5b84ga] {
        text-decoration: underline;
    }

    .crumb.current[b-wnoe5b84ga] {
        color: #eaf0ff;
        font-weight: 800;
    }

.hero-title[b-wnoe5b84ga] {
    margin: 4px 0 6px;
    font-weight: 900;
    letter-spacing: .3px;
    color: #eaf0ff;
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
}

.hero-plot[b-wnoe5b84ga] {
    color: #cdd6f3;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.facts[b-wnoe5b84ga] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 4px 0 12px 0;
    list-style: none;
}

.chip[b-wnoe5b84ga] {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #c9d3e8;
}

.truncate[b-wnoe5b84ga] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.actions[b-wnoe5b84ga] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-outline[b-wnoe5b84ga] {
    appearance: none;
    border: 1px solid rgba(255,255,255,.24);
    background: transparent;
    color: #eaf0ff;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
}

    .btn-outline:hover[b-wnoe5b84ga] {
        background: rgba(255,255,255,.08);
    }

@media (max-width:980px) {
    .hero-grid[b-wnoe5b84ga] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width:820px) {
    .hero-grid[b-wnoe5b84ga] {
        grid-template-columns: 1fr;
    }
}
/* _content/Wetflix2App/Components/Content/DetailTVShowEpisodeView.razor.rz.scp.css */
.episode-view[b-kl4l4f52q7] {
    position: relative;
    width: min(1200px, 100vw - 32px);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.episode-view__bg[b-kl4l4f52q7] {
    position: absolute;
    inset: 0;
    background-image: var(--ep-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    .episode-view__bg[b-kl4l4f52q7]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.80) 36%, rgba(10,12,16,.66) 58%, rgba(10,12,16,.78) 100%);
    }

.episode-view__grid[b-kl4l4f52q7] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 22px;
    padding: 22px;
}

.episode-view__poster[b-kl4l4f52q7] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.episode-view__poster-img[b-kl4l4f52q7] {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.episode-view__poster-fallback[b-kl4l4f52q7] {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg, #2b2b2b, #171717);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    padding: 12px;
    text-align: center;
    font-weight: 700;
}

.episode-view__breadcrumbs[b-kl4l4f52q7] {
    display: flex;
    gap: 6px;
    color: #cfd6ea;
    margin-bottom: 2px;
}

.crumb[b-kl4l4f52q7] {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 700;
}

    .crumb:hover[b-kl4l4f52q7] {
        text-decoration: underline;
    }

    .crumb.current[b-kl4l4f52q7] {
        color: #eaf0ff;
        font-weight: 800;
        text-decoration: none;
    }

.episode-view__title[b-kl4l4f52q7] {
    margin: 4px 0 2px 0;
    font-weight: 800;
    letter-spacing: .2px;
    color: #eaf0ff;
}

.episode-view__subline[b-kl4l4f52q7] {
    color: #cfd6ea;
    font-weight: 600;
    margin-bottom: 6px;
}

.episode-view__plot[b-kl4l4f52q7] {
    color: #cdd6f3;
    margin: 4px 0 8px 0;
}

.episode-view__facts[b-kl4l4f52q7] {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 4px 0 10px 0;
    list-style: none;
    color: #c9d3e8;
}

    .episode-view__facts strong[b-kl4l4f52q7] {
        color: #eaf0ff;
        font-weight: 700;
    }

.episode-view__actions[b-kl4l4f52q7] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .episode-view__grid[b-kl4l4f52q7] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 820px) {
    .episode-view__grid[b-kl4l4f52q7] {
        grid-template-columns: 1fr;
    }
}
/* _content/Wetflix2App/Components/Content/DetailTVShowView.razor.rz.scp.css */
.show-hero[b-wkp40gqkyi] {
    position: relative;
    width: min(1200px,100vw - 32px);
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.hero-bg[b-wkp40gqkyi] {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    .hero-bg[b-wkp40gqkyi]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.78) 58%, rgba(10,12,16,.84) 100%);
    }

.hero-grid[b-wkp40gqkyi] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    padding: 24px;
}

.hero-poster[b-wkp40gqkyi] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-poster-img[b-wkp40gqkyi], .hero-poster-fallback[b-wkp40gqkyi] {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.hero-poster-fallback[b-wkp40gqkyi] {
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg,#2b2b2b,#171717);
    font-weight: 800;
    padding: 12px;
    text-align: center;
}

.breadcrumbs[b-wkp40gqkyi] {
    display: flex;
    gap: 6px;
    color: #cfd6ea;
    margin-bottom: 2px;
}

.crumb[b-wkp40gqkyi] {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 700;
}

    .crumb:hover[b-wkp40gqkyi] {
        text-decoration: underline;
    }

    .crumb.current[b-wkp40gqkyi] {
        color: #eaf0ff;
        font-weight: 800;
    }

.hero-title[b-wkp40gqkyi] {
    margin: 4px 0 2px 0;
    font-weight: 900;
    letter-spacing: .3px;
    color: #eaf0ff;
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
}

.hero-subline[b-wkp40gqkyi] {
    color: #cfd6ea;
    font-weight: 700;
    margin-bottom: 6px;
}

.hero-plot[b-wkp40gqkyi] {
    margin: 4px 0 10px 0;
    color: #cdd6f3;
    line-height: 1.5;
}

.facts[b-wkp40gqkyi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 4px 0 12px 0;
    list-style: none;
    color: #c9d3e8;
}

.chip[b-wkp40gqkyi] {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #c9d3e8;
}

.seasons[b-wkp40gqkyi] {
    margin-top: 8px;
    display: grid;
    gap: 10px;
}

.seasons-head[b-wkp40gqkyi] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.season-pills[b-wkp40gqkyi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .season-pills .pill[b-wkp40gqkyi] {
        appearance: none;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.10);
        color: #eaf0ff;
        padding: .45rem .8rem;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 800;
        transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }

        .season-pills .pill:hover[b-wkp40gqkyi] {
            transform: translateY(-1px);
            background: rgba(255,255,255,.14);
        }

        .season-pills .pill.active[b-wkp40gqkyi] {
            background: rgba(129,140,248,.25);
            border-color: rgba(129,140,248,.55);
        }

.episodes[b-wkp40gqkyi] {
    display: grid;
    gap: 8px;
}

.episode-row[b-wkp40gqkyi] {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(0,0,0,.25);
    overflow: hidden;
}

.episode-row__head[b-wkp40gqkyi] {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255,255,255,.05);
    color: #eaf0ff;
    border: none;
    text-align: left;
    cursor: pointer;
}

    .episode-row__head .code[b-wkp40gqkyi] {
        font-weight: 900;
        letter-spacing: .3px;
        color: #c7d2fe;
    }

    .episode-row__head .ttl[b-wkp40gqkyi] {
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .episode-row__head .dur[b-wkp40gqkyi] {
        color: #cfd6ea;
        font-size: .95rem;
    }

.episode-row__body[b-wkp40gqkyi] {
    padding: 12px 14px 14px;
}

.episode-row__plot[b-wkp40gqkyi] {
    margin: 0 0 10px 0;
    color: #cdd6f3;
}

.episode-row__actions[b-wkp40gqkyi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.btn-outline[b-wkp40gqkyi] {
    appearance: none;
    border: 1px solid rgba(255,255,255,.24);
    background: transparent;
    color: #eaf0ff;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
}

    .btn-outline:hover[b-wkp40gqkyi] {
        background: rgba(255,255,255,.08);
    }

.bottom-actions[b-wkp40gqkyi] {
    margin-top: 12px;
}

@media (max-width:980px) {
    .hero-grid[b-wkp40gqkyi] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width:820px) {
    .hero-grid[b-wkp40gqkyi] {
        grid-template-columns: 1fr;
    }
}


/* smooth cross-fade for poster image */
.hero-poster-img[b-wkp40gqkyi] {
    transition: opacity .45s ease;
    opacity: 1;
}

    .hero-poster-img.fading[b-wkp40gqkyi] {
        opacity: 0;
    }

/* (optional) slightly quicker background fade via the same timing is fine as-is */
/* _content/Wetflix2App/Components/Content/RatingDisplay.razor.rz.scp.css */
.rating-stars[b-6hwko8tf35] {
    display: inline-flex;
    gap: 2px;
    line-height: 1;
    user-select: none;
}

    .rating-stars .star[b-6hwko8tf35] {
        font-size: 1rem; /* md */
        color: #888;
        opacity: .6;
        text-shadow: 0 0 2px rgba(0,0,0,.6);
    }

        .rating-stars .star.filled[b-6hwko8tf35] {
            color: #ffd166; /* warm yellow */
            opacity: 1;
        }

    .rating-stars.size-sm .star[b-6hwko8tf35] {
        font-size: .85rem;
    }

    .rating-stars.size-lg .star[b-6hwko8tf35] {
        font-size: 1.2rem;
    }
/* _content/Wetflix2App/Components/Decor/BackgroundFX.razor.rz.scp.css */
/* Calm nebula + star parallax — smooth, subtle, on-brand */

.bgfx[b-q5r7a48z5t] {
    --fx-primary: #60a5fa;
    --fx-secondary: #a78bfa;
    --fx-opacity: .22; /* master opacity for the whole effect */
    pointer-events: none;
    opacity: var(--fx-opacity);
}

    .bgfx.fixed[b-q5r7a48z5t] {
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow: hidden;
    }

    .bgfx.abs[b-q5r7a48z5t] {
        position: absolute;
        inset: 0;
        z-index: -1;
        overflow: hidden;
    }

.layer[b-q5r7a48z5t] {
    position: absolute;
}

    /* ------------------------------------------------------------------ */
    /* Ambient haze (very soft, slow orbit/scale to keep background alive) */
    /* ------------------------------------------------------------------ */
    .layer.haze[b-q5r7a48z5t] {
        inset: -10%;
        background: radial-gradient(1100px 800px at 10% 0%, color-mix(in oklab, var(--fx-primary) 35%, transparent) 0 55%, transparent 70%), radial-gradient(1200px 900px at 100% 60%, color-mix(in oklab, var(--fx-secondary) 35%, transparent) 0 50%, transparent 70%), radial-gradient(1400px 1200px at 30% 120%, rgba(10,15,26,1) 0 60%, rgba(10,15,26,1) 75%);
        animation: fx-orbit-b-q5r7a48z5t 180s ease-in-out infinite, fx-breathe-b-q5r7a48z5t 28s ease-in-out infinite alternate;
        opacity: .9; /* overall wrapper still limits intensity */
    }

@keyframes fx-orbit-b-q5r7a48z5t {
    0% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(-2%, -1%, 0) rotate(2deg);
    }

    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }
}

@keyframes fx-breathe-b-q5r7a48z5t {
    0% {
        filter: brightness(1) blur(0px);
    }

    100% {
        filter: brightness(1.03) blur(0.5px);
    }
}

/* ------------------------------------------- */
/* Nebula blobs (slow float + tiny gentle tilt) */
/* ------------------------------------------- */
.layer.nebula[b-q5r7a48z5t] {
    width: 120vmax;
    height: 120vmax;
    filter: blur(60px);
    opacity: .9; /* visual opacity — master opacity still applies */
    transform: translate(-50%, -50%);
    animation: fx-floaty-b-q5r7a48z5t 45s ease-in-out infinite;
}

    .layer.nebula.n1[b-q5r7a48z5t] {
        left: 18%;
        top: 12%;
        animation-duration: 48s;
        background: radial-gradient(circle at 32% 34%, rgba(96,165,250,.55) 0 38%, transparent 62%), radial-gradient(circle at 68% 72%, rgba(167,139,250,.50) 0 36%, transparent 64%);
    }

    .layer.nebula.n2[b-q5r7a48z5t] {
        left: 84%;
        top: 72%;
        animation-duration: 54s;
        background: radial-gradient(circle at 38% 62%, rgba(167,139,250,.55) 0 40%, transparent 62%), radial-gradient(circle at 60% 40%, rgba(96,165,250,.48) 0 34%, transparent 66%);
    }

@keyframes fx-floaty-b-q5r7a48z5t {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.00);
    }

    50% {
        transform: translate(calc(-50% + 20px), calc(-50% - 18px)) rotate(1.2deg) scale(1.05);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.00);
    }
}

/* ------------------------------------------ */
/* Parallax stars — 3 layers with subtle drift */
/* ------------------------------------------ */
.layer.stars[b-q5r7a48z5t],
.layer.stars.s2[b-q5r7a48z5t],
.layer.stars.s3[b-q5r7a48z5t] {
    inset: -40%;
    mix-blend-mode: screen;
    will-change: transform, background-position;
    background-repeat: repeat;
}

/* Near (densest, a bit faster) */
.layer.stars[b-q5r7a48z5t] {
    animation: fx-drift-b-q5r7a48z5t 140s linear infinite;
    opacity: .55;
    background-size: 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px;
    background-image: radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.85) 50%, transparent 52%), radial-gradient(1px 1px at 56px 32px, rgba(255,255,255,.78) 50%, transparent 52%), radial-gradient(1px 1px at 108px 64px, rgba(255,255,255,.82) 50%, transparent 52%), radial-gradient(1px 1px at 140px 28px, rgba(255,255,255,.76) 50%, transparent 52%), radial-gradient(1px 1px at 30px 120px, rgba(255,255,255,.80) 50%, transparent 52%), radial-gradient(2px 2px at 90px 115px, rgba(167,139,250,.55) 50%, transparent 52%), radial-gradient(1px 1px at 140px 150px, rgba(255,255,255,.74) 50%, transparent 52%), radial-gradient(1px 1px at 170px 90px, rgba(255,255,255,.72) 50%, transparent 52%), radial-gradient(1px 1px at 18px 160px, rgba(255,255,255,.70) 50%, transparent 52%), radial-gradient(1px 1px at 70px 150px, rgba(255,255,255,.82) 50%, transparent 52%), radial-gradient(2px 2px at 40px 70px, rgba(96,165,250,.55) 50%, transparent 52%), radial-gradient(1px 1px at 120px 130px, rgba(255,255,255,.76) 50%, transparent 52%);
}

    /* Mid (slower, reverse) */
    .layer.stars.s2[b-q5r7a48z5t] {
        inset: -42%;
        animation: fx-drift-b-q5r7a48z5t 200s linear infinite reverse;
        opacity: .45;
        background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px;
        background-image: radial-gradient(1px 1px at 30px 40px, rgba(255,255,255,.60) 50%, transparent 52%), radial-gradient(1px 1px at 200px 60px, rgba(255,255,255,.55) 50%, transparent 52%), radial-gradient(1px 1px at 160px 90px, rgba(255,255,255,.58) 50%, transparent 52%), radial-gradient(1px 1px at 90px 180px, rgba(255,255,255,.60) 50%, transparent 52%), radial-gradient(2px 2px at 140px 130px, rgba(167,139,250,.45) 50%, transparent 52%), radial-gradient(1px 1px at 60px 200px, rgba(255,255,255,.58) 50%, transparent 52%), radial-gradient(1px 1px at 220px 210px, rgba(255,255,255,.52) 50%, transparent 52%), radial-gradient(1px 1px at 40px 120px, rgba(255,255,255,.56) 50%, transparent 52%), radial-gradient(1px 1px at 120px 220px, rgba(255,255,255,.58) 50%, transparent 52%), radial-gradient(1px 1px at 180px 160px, rgba(255,255,255,.57) 50%, transparent 52%), radial-gradient(2px 2px at 210px 30px, rgba(96,165,250,.45) 50%, transparent 52%), radial-gradient(1px 1px at 20px 220px, rgba(255,255,255,.52) 50%, transparent 52%);
    }

    /* Far (slowest, faintest) */
    .layer.stars.s3[b-q5r7a48z5t] {
        inset: -44%;
        animation: fx-drift-b-q5r7a48z5t 260s linear infinite;
        opacity: .38;
        background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px;
        background-image: radial-gradient(1px 1px at 60px 60px, rgba(255,255,255,.48) 50%, transparent 52%), radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(1px 1px at 280px 300px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(1px 1px at 200px 200px, rgba(255,255,255,.45) 50%, transparent 52%), radial-gradient(1px 1px at 140px 260px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(2px 2px at 300px 220px, rgba(167,139,250,.38) 50%, transparent 52%), radial-gradient(1px 1px at 240px 160px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(1px 1px at 40px 300px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(1px 1px at 300px 120px, rgba(255,255,255,.42) 50%, transparent 52%), radial-gradient(2px 2px at 80px 200px, rgba(96,165,250,.38) 50%, transparent 52%);
    }

/* Gentle twinkle overlay */
.layer.sparks[b-q5r7a48z5t] {
    inset: -40%;
    mix-blend-mode: screen;
    animation: fx-twinkle-b-q5r7a48z5t 3s ease-in-out infinite alternate;
    background: radial-gradient(1200px 800px at 15% 10%, rgba(255,255,255,.06), transparent 55%), radial-gradient(1000px 900px at 85% 78%, rgba(255,255,255,.05), transparent 60%);
    opacity: .50;
}

@keyframes fx-drift-b-q5r7a48z5t {
    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-15%, -8%, 0);
    }
}

@keyframes fx-twinkle-b-q5r7a48z5t {
    0% {
        opacity: .14;
        filter: brightness(1.0);
    }

    50% {
        opacity: .30;
        filter: brightness(1.06);
    }

    100% {
        opacity: .18;
        filter: brightness(1.0);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .layer.haze[b-q5r7a48z5t],
    .layer.nebula[b-q5r7a48z5t],
    .layer.stars[b-q5r7a48z5t],
    .layer.stars.s2[b-q5r7a48z5t],
    .layer.stars.s3[b-q5r7a48z5t],
    .layer.sparks[b-q5r7a48z5t] {
        animation: none !important;
    }
}
/* _content/Wetflix2App/Components/Dev/Democomponents.razor.rz.scp.css */
.hint[b-ujt05opoqs] {
    color: #bbb;
    margin-bottom: 12px;
}

.demo-row[b-ujt05opoqs] {
    display: flex;
    gap: 12px;
    margin: 10px 0 22px;
}

.click-info[b-ujt05opoqs] {
    color: #d3fbd8;
    background: #183a22;
    border: 1px solid #245c36;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-block;
    margin: 8px 0 18px;
}
/* _content/Wetflix2App/Components/Events/EventFeed.razor.rz.scp.css */
.event-feed[b-u8x8mlux2b] {
    max-height: 360px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    border-top: 1px solid rgba(0,0,0,.05);
    padding-top: .25rem;
}

.event-row[b-u8x8mlux2b] {
    display: grid;
    grid-template-columns: 80px 180px 1fr;
    gap: .5rem;
    padding: .25rem 0;
    border-bottom: 1px dashed rgba(0,0,0,.05);
}

    .event-row .time[b-u8x8mlux2b] {
        color: #6c757d;
    }

    .event-row .name[b-u8x8mlux2b] {
        font-weight: 600;
    }

    .event-row .msg[b-u8x8mlux2b] {
        white-space: pre-wrap;
        word-break: break-word;
    }
/* _content/Wetflix2App/Components/Issues/IssueCard.razor.rz.scp.css */
.issue-card.card[b-zo8cnydeh6] {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(12,14,18,.96);
    padding: 14px;
}

.issue-card__head[b-zo8cnydeh6] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.chip[b-zo8cnydeh6] {
    display: inline-block;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
}

.chip--status[b-zo8cnydeh6] {
    background: rgba(129,140,248,.15);
    border-color: rgba(129,140,248,.25);
}

.chip--type[b-zo8cnydeh6] {
    background: rgba(96,165,250,.15);
    border-color: rgba(96,165,250,.25);
}

.chip--link[b-zo8cnydeh6] {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.25);
}

.issue-card__title[b-zo8cnydeh6] {
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.issue-card__desc[b-zo8cnydeh6] {
    color: #c9d3e8;
    margin-bottom: 10px;
}

.issue-card__meta[b-zo8cnydeh6] {
    color: #9aa7c2;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.issue-card__history .hist-row[b-zo8cnydeh6] {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
}

    .issue-card__history .hist-row:last-child[b-zo8cnydeh6] {
        border-bottom: none;
    }

.issue-card__history .dot[b-zo8cnydeh6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a78bfa;
}

.issue-card__history .stat[b-zo8cnydeh6] {
    color: #fff;
    font-weight: 600;
}

.issue-card__history .time[b-zo8cnydeh6] {
    color: #9aa7c2;
    font-size: .85rem;
}

.issue-card__actions[b-zo8cnydeh6] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* _content/Wetflix2App/Components/Issues/IssueEditOverlay.razor.rz.scp.css */
.modal-backdrop[b-1q64ilsz8y] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2000;
}

.modal-pane[b-1q64ilsz8y] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(17,20,27,.98);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 16px;
    z-index: 2001;
    width: min(520px, 92vw);
}

.modal-actions[b-1q64ilsz8y] {
    display: flex;
    gap: 8px;
    justify-content: end;
    margin-top: 12px;
}

.form-label[b-1q64ilsz8y] {
    color: #9aa7c2;
    margin-top: 8px;
}

.form-select[b-1q64ilsz8y] {
    width: 100%;
    background: #0b0f17;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    padding: 8px;
}
/* _content/Wetflix2App/Components/Issues/IssueList.razor.rz.scp.css */
.issue-list[b-w7b72z8jb9] {
    margin-top: 8px;
}

.issue-list__toolbar[b-w7b72z8jb9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}

.form-select.compact[b-w7b72z8jb9] {
    padding: 6px 8px;
    border-radius: 8px;
    background: #0b0f17;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
}

.btn.compact[b-w7b72z8jb9] {
    padding: 6px 10px;
    border-radius: 8px;
}

.issue-empty[b-w7b72z8jb9] {
    color: #9aa7c2;
    padding: 12px;
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 10px;
}

.issue-grid[b-w7b72z8jb9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 900px) {
    .issue-grid[b-w7b72z8jb9] {
        grid-template-columns: 1fr 1fr;
    }
}
/* _content/Wetflix2App/Components/Issues/ReportIssue.razor.rz.scp.css */
.ri-backdrop[b-lxms699e9t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: grid;
    place-items: center;
    z-index: 9999;
}

.ri-modal[b-lxms699e9t] {
    width: min(720px, 96vw);
    background: radial-gradient(900px 500px at 15% -20%, rgba(96,165,250,.12), transparent 60%), radial-gradient(900px 500px at 85% 120%, rgba(167,139,250,.12), transparent 60%), rgba(12,14,18,.98);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    color: #e8eefc;
}

.ri-head[b-lxms699e9t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ri-title[b-lxms699e9t] {
    margin: 0;
    font-weight: 800;
}

.ri-x[b-lxms699e9t] {
    appearance: none;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

.ri-body[b-lxms699e9t] {
    padding: 14px 16px;
}

.ri-two[b-lxms699e9t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .ri-two[b-lxms699e9t] {
        grid-template-columns: 1fr 1fr;
    }
}

.ri-foot[b-lxms699e9t] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}
/* _content/Wetflix2App/Components/Layout/InlineSearch.razor.rz.scp.css */
/* ——— Inline Search (Navbar) ——— */

/* Make the whole widget a top layer and isolate its stacking context */
.nb-search[b-pliadxyjey] {
    position: relative; /* already present, re-affirm */
    isolation: isolate; /* start a new stacking context */
    z-index: 2147483000; /* huge, but under the box itself */
}
/* Toggle button */
.nb-search-btn[b-pliadxyjey] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .nb-search-btn:hover[b-pliadxyjey] {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.18);
    }

    .nb-search-btn:focus-visible[b-pliadxyjey] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(129,140,248,.35);
    }

    .nb-search-btn .label[b-pliadxyjey] {
        font-weight: 600;
    }

    .nb-search-btn .icon[b-pliadxyjey] {
        display: inline-flex;
        line-height: 0;
    }

        .nb-search-btn .icon svg[b-pliadxyjey] {
            width: 18px;
            height: 18px;
            display: block;
            color: currentColor;
        }

/* When open, fade the button so the input can "replace" it visually */
.nb-search.open .nb-search-btn[b-pliadxyjey] {
    opacity: 0;
    pointer-events: none;
}

/* Morph layer: overlays button area */
.nb-search-box[b-pliadxyjey] {
    position: absolute;
    top: 0;
    left: 0;
    width: min(560px, 90vw);
    z-index: 2147483647; /* max practical z-index */
}

/* Input */
.nb-search-input[b-pliadxyjey] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(12,14,18,.96);
    color: #fff;
    border-radius: 12px 12px 0 0;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .nb-search-input[b-pliadxyjey]::placeholder {
        color: #9aa7c2;
        opacity: .9;
    }

    .nb-search-input:focus[b-pliadxyjey] {
        border-color: rgba(129,140,248,.55);
        box-shadow: 0 0 0 2px rgba(129,140,248,.25);
    }

/* Results panel */
.nb-search-panel[b-pliadxyjey] {
    width: 100%;
    max-height: 420px;
    overflow: auto;
    background: rgba(17,20,27,.96);
    border: 1px solid rgba(255,255,255,.15);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Empty/placeholder */
.nb-search-empty[b-pliadxyjey] {
    padding: 14px 12px;
    color: #c9d3e8;
}

/* Hit row */
.nb-hit[b-pliadxyjey] {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .12s ease;
}

    .nb-hit:last-child[b-pliadxyjey] {
        border-bottom: none;
    }

    .nb-hit:hover[b-pliadxyjey], .nb-hit:focus-visible[b-pliadxyjey] {
        background: rgba(255,255,255,.06);
        outline: none;
    }

/* Thumb */
.nb-hit-thumb[b-pliadxyjey] {
    width: 52px;
    height: 78px;
    object-fit: cover;
    border-radius: 6px;
    background: #0b0f17;
}

/* Text */
.nb-hit-title[b-pliadxyjey] {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}

.nb-hit-sub[b-pliadxyjey] {
    color: #9aa7c2;
    font-size: .9rem;
}

/* Rating */
.nb-hit-rating[b-pliadxyjey] {
    color: #c3e88d;
    font-weight: 700;
    margin-left: 8px;
}

/* Type pill */
.pill[b-pliadxyjey] {
    display: inline-block;
    padding: 2px 6px;
    font-size: .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

/* Scrollbar (WebKit) */
.nb-search-panel[b-pliadxyjey]::-webkit-scrollbar {
    width: 10px;
}

.nb-search-panel[b-pliadxyjey]::-webkit-scrollbar-track {
    background: #111;
    border-radius: 6px;
}

.nb-search-panel[b-pliadxyjey]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b7280, #9ca3af);
    border-radius: 6px;
}

    .nb-search-panel[b-pliadxyjey]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #818cf8, #a5b4fc);
    }

/* Small viewports */
@media (max-width: 420px) {
    .nb-search-box[b-pliadxyjey] {
        left: 0;
        right: 0;
        width: calc(100vw - 24px);
    }
}
/* _content/Wetflix2App/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-lnnxhhia91] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lnnxhhia91] {
    flex: 1;
}

.sidebar[b-lnnxhhia91] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-lnnxhhia91] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-lnnxhhia91]  a, .top-row[b-lnnxhhia91]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-lnnxhhia91]  a:hover, .top-row[b-lnnxhhia91]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-lnnxhhia91]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-lnnxhhia91] {
        justify-content: space-between;
    }

    .top-row[b-lnnxhhia91]  a, .top-row[b-lnnxhhia91]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-lnnxhhia91] {
        flex-direction: row;
    }

    .sidebar[b-lnnxhhia91] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-lnnxhhia91] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-lnnxhhia91]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-lnnxhhia91], article[b-lnnxhhia91] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-lnnxhhia91] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-lnnxhhia91] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Wetflix2App/Components/Layout/NavBar.razor.rz.scp.css */
/* Only styles for the NavBar + its child components */
.nav-root[b-z06x9zlkwq] {
    width: 100%;
}

    /* Reach into DefaultNavbar/UserNavbar (child components) */
    .nav-root[b-z06x9zlkwq]  .navbar-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between; /* LEFT group | RIGHT group */
        min-height: 56px;
        width: 100%;
    }

    .nav-root[b-z06x9zlkwq]  .nb-left,
    .nav-root[b-z06x9zlkwq]  .nb-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .nav-root[b-z06x9zlkwq]  .nb-inline {
        display: inline;
    }

    /* Theme colors for nav items (beat global <a> rule) */
    .nav-root[b-z06x9zlkwq]  .nb-brand,
    .nav-root[b-z06x9zlkwq]  .nb-link {
        color: var(--text) !important; /* light text on dark */
        text-decoration: none;
        opacity: .95;
        padding: 6px 0;
    }

        .nav-root[b-z06x9zlkwq]  .nb-brand:hover,
        .nav-root[b-z06x9zlkwq]  .nb-link:hover {
            color: var(--accent-2) !important; /* purple hover */
            opacity: 1;
        }

        /* Highlight active NavLink */
        .nav-root[b-z06x9zlkwq]  .nb-link.active {
            color: var(--accent) !important;
            opacity: 1;
        }

    /* Button look for Logout */
    .nav-root[b-z06x9zlkwq]  .nb-button {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
    }

        .nav-root[b-z06x9zlkwq]  .nb-button:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
/* _content/Wetflix2App/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0p9va9ml7g] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-0p9va9ml7g] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-0p9va9ml7g] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-0p9va9ml7g] {
    font-size: 1.1rem;
}

.bi[b-0p9va9ml7g] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-0p9va9ml7g] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-0p9va9ml7g] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-0p9va9ml7g] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0p9va9ml7g] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0p9va9ml7g]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-0p9va9ml7g]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-0p9va9ml7g]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-0p9va9ml7g] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-0p9va9ml7g] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0p9va9ml7g] {
        display: none;
    }

    .nav-scrollable[b-0p9va9ml7g] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/Wetflix2App/Components/MainApp/DetailOverlay.razor.rz.scp.css */
/* Backdrop (global background blur while overlay active) */
.app-modal-backdrop[b-j2j3h23nk6] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 90;
    backdrop-filter: blur(2px);
}

/* Modal container */
.app-modal[b-j2j3h23nk6] {
    position: fixed;
    inset: 0;
    z-index: 91;
    padding: 20px; /* breathing room */
    pointer-events: none; /* clicks pass through except on shell */
}

/* Center the shell exactly, let the shell scroll internally if too tall */
.app-modal-shell[b-j2j3h23nk6] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(1100px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
    pointer-events: auto; /* enable interaction inside overlay */
}

/* Single root-level Close button (top-right of the shell/card) */
.app-modal-close[b-j2j3h23nk6] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    /* size/shape */
    padding: 6px 12px;
    line-height: 1.2;
    border-radius: 999px;
    /* make it stand out (override bootstrap outline) */
    background: linear-gradient(180deg, #ef4444, #dc2626) !important; /* red */
    color: #fff !important;
    border: 1px solid rgba(0,0,0,.35) !important;
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    /* depth + motion */
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .app-modal-close:hover[b-j2j3h23nk6] {
        filter: brightness(1.05);
        box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
        transform: translateY(-1px);
    }

    .app-modal-close:active[b-j2j3h23nk6] {
        transform: translateY(0);
        filter: brightness(.97);
    }

    .app-modal-close:focus-visible[b-j2j3h23nk6] {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

/* Support for placeholder/fallback cards used in TVShow/Episode paths */
.app-modal-card[b-j2j3h23nk6] {
    width: 100%;
    background: rgba(20,22,28,.96);
    border: 1px solid var(--border);
    border-radius: 16px;
}

/* Small screens */
@media (max-width: 576px) {
    .app-modal[b-j2j3h23nk6] {
        padding: 12px;
    }

    .app-modal-shell[b-j2j3h23nk6] {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }
}
/* _content/Wetflix2App/Components/MainApp/MainApp.razor.rz.scp.css */
/* Root */
.app-root[b-b5ph4iznl9] {
    position: relative;
    z-index: 0;
}

/* Shelves container spacing */
.container.shelves[b-b5ph4iznl9] {
    padding-block: 16px 28px;
}

/* ---------- Full-bleed wrapper for the trio row ---------- */
.trio-outer[b-b5ph4iznl9] {
    /* Make this section bleed to full viewport width even inside a .container */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    /* Nice breathing room matching hero paddings */
    padding-inline: clamp(12px, 4vw, 32px);
    margin-block: 10px 18px;
}

/* ---------- Trio row (Random + Request CTA + Top Pick) ---------- */
.request-cta .rc-actions[b-b5ph4iznl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.request-cta .rc-actions--browse[b-b5ph4iznl9] {
    margin-top: 6px;
}

.request-cta .rc-actions--request[b-b5ph4iznl9] {
    margin-top: 4px;
}

.request-cta .rc-divider[b-b5ph4iznl9] {
    margin: 14px 0;
    border-color: rgba(255,255,255,.14);
}

.request-cta .rc-sub--muted[b-b5ph4iznl9] {
    color: #cfd6ea;
    opacity: .9;
}

.trio-row[b-b5ph4iznl9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .trio-row[b-b5ph4iznl9] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Only show Top Pick on large screens; the 3rd column appears at ≥1200px */
.top-pick[b-b5ph4iznl9] {
    display: none;
}

@media (min-width: 1200px) {
    .trio-row[b-b5ph4iznl9] {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .top-pick[b-b5ph4iznl9] {
        display: flex;
    }
}

/* Keep card heights visually consistent */
.trio-row > .card[b-b5ph4iznl9],
.trio-row > .pick-card[b-b5ph4iznl9] {
    min-height: 100%;
}

/* ---------- Request Content CTA ---------- */
.request-cta[b-b5ph4iznl9] {
    position: relative;
    background: radial-gradient(600px 320px at 10% -20%, rgba(96,165,250,.18), transparent 60%), radial-gradient(520px 280px at 110% 20%, rgba(167,139,250,.18), transparent 60%), linear-gradient(180deg, rgba(12,14,18,.96), rgba(12,14,18,.96));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 16px;
    overflow: hidden;
}

.request-cta__inner[b-b5ph4iznl9] {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

@media (min-width: 768px) {
    .request-cta__inner[b-b5ph4iznl9] {
        padding: 26px 24px;
    }
}

@media (min-width: 1200px) {
    .request-cta__inner[b-b5ph4iznl9] {
        padding: 30px 28px;
    }
}

.rc-overline[b-b5ph4iznl9] {
    color: #9aa7c2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .75rem;
    margin-bottom: 6px;
}

.rc-title[b-b5ph4iznl9] {
    margin: 0 0 4px 0;
    color: #ffffff;
    font-weight: 800;
}

.rc-sub[b-b5ph4iznl9] {
    margin: 0 0 12px 0;
    color: #c9d3e8;
}
/* _content/Wetflix2App/Components/MainApp/Overlay/DetailMovieOverlay.razor.rz.scp.css */
/* The card itself lives inside .app-modal-shell and fills its width */
.movie-hero[b-d0abk6h7tw] {
    position: relative;
    width: 100%;
    min-height: 520px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Blurred poster backdrop INSIDE the card */
.movie-hero__bg[b-d0abk6h7tw] {
    position: absolute;
    inset: 0;
    background-image: var(--movie-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    /* Contrast gradient for readability */
    .movie-hero__bg[b-d0abk6h7tw]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.80) 36%, rgba(10,12,16,.66) 58%, rgba(10,12,16,.78) 100%);
    }

/* Foreground two-column layout */
.movie-hero__content[b-d0abk6h7tw] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr; /* poster | meta */
    gap: 22px;
    padding: 22px;
}

/* Poster block */
.movie-hero__poster[b-d0abk6h7tw] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie-hero__poster-img[b-d0abk6h7tw] {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.movie-hero__poster-fallback[b-d0abk6h7tw] {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg, #2b2b2b, #171717);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    padding: 12px;
    text-align: center;
    font-weight: 700;
}

/* Right-side meta */
.movie-hero__meta[b-d0abk6h7tw] {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    color: #eaf0ff;
}

.movie-hero__pill[b-d0abk6h7tw] {
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    color: #dfe6ff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}

.movie-hero__title[b-d0abk6h7tw] {
    margin: 2px 0 4px 0;
    font-weight: 800;
    letter-spacing: .2px;
}

.movie-hero__plot[b-d0abk6h7tw] {
    margin: 0 0 8px 0;
    color: #cdd6f3;
}

.movie-hero__facts[b-d0abk6h7tw] {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 4px 0 8px 0;
    list-style: none;
    color: #c9d3e8;
}

    .movie-hero__facts strong[b-d0abk6h7tw] {
        color: #eaf0ff;
        font-weight: 700;
    }

.movie-hero__truncate[b-d0abk6h7tw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movie-hero__actions[b-d0abk6h7tw] {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsive breakpoints */
@media (max-width: 980px) {
    .movie-hero__content[b-d0abk6h7tw] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 820px) {
    .movie-hero__content[b-d0abk6h7tw] {
        grid-template-columns: 1fr;
    }

    .movie-hero[b-d0abk6h7tw] {
        min-height: 0;
    }
}
/* _content/Wetflix2App/Components/MainApp/Overlay/DetailTVShowEpisodeOverlay.razor.rz.scp.css */
/* Card-like hero (inside .app-modal-shell) */
.episode-hero[b-hmd2qqnhn2] {
    position: relative;
    width: min(1100px, 100vw - 32px);
    min-height: 520px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Blurred, zoomed poster background inside the card */
.episode-hero__bg[b-hmd2qqnhn2] {
    position: absolute;
    inset: 0;
    background-image: var(--ep-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    .episode-hero__bg[b-hmd2qqnhn2]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.80) 36%, rgba(10,12,16,.66) 58%, rgba(10,12,16,.78) 100% );
    }

/* Two-column layout */
.episode-hero__content[b-hmd2qqnhn2] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr; /* poster | meta */
    gap: 22px;
    padding: 22px;
}

/* Poster */
.episode-hero__poster[b-hmd2qqnhn2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.episode-hero__poster-img[b-hmd2qqnhn2] {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.episode-hero__poster-fallback[b-hmd2qqnhn2] {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg, #2b2b2b, #171717);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    padding: 12px;
    text-align: center;
    font-weight: 700;
}

/* Meta (right) */
.episode-hero__meta[b-hmd2qqnhn2] {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    color: #eaf0ff;
}

.episode-hero__pill[b-hmd2qqnhn2] {
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    color: #dfe6ff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}

/* Parent show link */
.episode-hero__showlink[b-hmd2qqnhn2] {
    all: unset;
    cursor: pointer;
    display: inline-block;
    color: #a5b4fc;
    font-weight: 700;
    border-bottom: 1px dashed rgba(165,180,252,.35);
    padding-bottom: 1px;
}

    .episode-hero__showlink:hover[b-hmd2qqnhn2] {
        color: #c7d2fe;
        border-bottom-color: rgba(199,210,254,.8);
    }

.episode-hero__title[b-hmd2qqnhn2] {
    margin: 2px 0 0 0;
    font-weight: 800;
    letter-spacing: .2px;
}

.episode-hero__subline[b-hmd2qqnhn2] {
    color: #cfd6ea;
    font-weight: 600;
    margin-bottom: 4px;
}

.episode-hero__plot[b-hmd2qqnhn2] {
    margin: 4px 0 8px 0;
    color: #cdd6f3;
}

.episode-hero__facts[b-hmd2qqnhn2] {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 4px 0 8px 0;
    list-style: none;
    color: #c9d3e8;
}

    .episode-hero__facts strong[b-hmd2qqnhn2] {
        color: #eaf0ff;
        font-weight: 700;
    }

.episode-hero__truncate[b-hmd2qqnhn2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actions */
.episode-hero__actions[b-hmd2qqnhn2] {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsive */
@media (max-width: 980px) {
    .episode-hero__content[b-hmd2qqnhn2] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 820px) {
    .episode-hero__content[b-hmd2qqnhn2] {
        grid-template-columns: 1fr;
    }

    .episode-hero[b-hmd2qqnhn2] {
        min-height: 0;
    }
}
/* _content/Wetflix2App/Components/MainApp/Overlay/DetailTVShowOverlay.razor.rz.scp.css */
/* Card-like hero */
.show-hero[b-elbvziztol] {
    position: relative;
    width: min(1100px, 100vw - 32px);
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255,255,255,0.14));
    background: rgba(18,20,26,.9);
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Blurred poster bg inside the card */
.show-hero__bg[b-elbvziztol] {
    position: absolute;
    inset: 0;
    background-image: var(--show-bg);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.15) brightness(.55);
    transform: scale(1.12);
    z-index: 0;
}

    .show-hero__bg[b-elbvziztol]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.80) 36%, rgba(10,12,16,.66) 58%, rgba(10,12,16,.78) 100% );
    }

/* Foreground grid */
.show-hero__content[b-elbvziztol] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 22px;
    padding: 22px;
}

/* Poster */
.show-hero__poster[b-elbvziztol] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.show-hero__poster-img[b-elbvziztol] {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    background: #0b0f17;
}

.show-hero__poster-fallback[b-elbvziztol] {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #cfd6ea;
    background: linear-gradient(135deg, #2b2b2b, #171717);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    padding: 12px;
    text-align: center;
    font-weight: 700;
}

/* Meta (right) */
.show-hero__meta[b-elbvziztol] {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    color: #eaf0ff;
}

.show-hero__pill[b-elbvziztol] {
    display: inline-block;
    font-weight: 700;
    font-size: .85rem;
    color: #dfe6ff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}

.show-hero__title[b-elbvziztol] {
    margin: 2px 0 0 0;
    font-weight: 800;
    letter-spacing: .2px;
}

.show-hero__subline[b-elbvziztol] {
    color: #cfd6ea;
    font-weight: 600;
    margin-bottom: 4px;
}

.show-hero__plot[b-elbvziztol] {
    margin: 4px 0 8px 0;
    color: #cdd6f3;
}

.show-hero__facts[b-elbvziztol] {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 4px 0 8px 0;
    list-style: none;
    color: #c9d3e8;
}

    .show-hero__facts strong[b-elbvziztol] {
        color: #eaf0ff;
        font-weight: 700;
    }

.show-hero__truncate[b-elbvziztol] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seasons / Episodes */
.show-hero__seasons[b-elbvziztol] {
    margin-top: 6px;
    display: grid;
    gap: 10px;
}

.show-hero__seasons-head[b-elbvziztol] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.show-hero__season-pills[b-elbvziztol] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .show-hero__season-pills .pill[b-elbvziztol] {
        appearance: none;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.10);
        color: #eaf0ff;
        padding: 6px 10px;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 700;
        transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }

        .show-hero__season-pills .pill:hover[b-elbvziztol] {
            transform: translateY(-1px);
            background: rgba(255,255,255,.14);
        }

        .show-hero__season-pills .pill.active[b-elbvziztol] {
            background: rgba(129,140,248,.25);
            border-color: rgba(129,140,248,.55);
        }

/* Episodes list */
.show-hero__episodes[b-elbvziztol] {
    display: grid;
    gap: 8px;
}

.episode-row[b-elbvziztol] {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(0,0,0,.25);
    overflow: hidden;
}

.episode-row__head[b-elbvziztol] {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,.05);
    color: #eaf0ff;
    border: none;
    text-align: left;
    cursor: pointer;
}

    .episode-row__head .code[b-elbvziztol] {
        font-weight: 800;
        letter-spacing: .3px;
        color: #c7d2fe;
    }

    .episode-row__head .ttl[b-elbvziztol] {
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .episode-row__head .dur[b-elbvziztol] {
        color: #cfd6ea;
        font-size: .95rem;
    }

.episode-row__body[b-elbvziztol] {
    padding: 10px 12px 12px;
}

.episode-row__plot[b-elbvziztol] {
    margin: 0 0 8px 0;
    color: #cdd6f3;
}

.episode-row__actions[b-elbvziztol] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Responsive */
@media (max-width: 980px) {
    .show-hero__content[b-elbvziztol] {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 820px) {
    .show-hero__content[b-elbvziztol] {
        grid-template-columns: 1fr;
    }

    .show-hero[b-elbvziztol] {
        min-height: 0;
    }
}
/* _content/Wetflix2App/Components/MainApp/RandomPickCard.razor.rz.scp.css */
.pick-card.random[b-9uszy0r7cf] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(17, 20, 27, 0.92);
    border-radius: 16px;
    overflow: hidden;
}

/* Media banner */
.pick-card .pc-media[b-9uszy0r7cf] {
    position: relative;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    box-shadow: inset 0 -70px 90px rgba(0,0,0,.6);
}

@media (min-width: 1200px) {
    .pick-card .pc-media[b-9uszy0r7cf] {
        height: 240px;
    }
}

/* Chip */
.pick-card .pc-chip[b-9uszy0r7cf] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    color: #0b0f17;
    font-weight: 800;
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Body */
.pick-card .pc-body[b-9uszy0r7cf] {
    padding: 16px 16px 20px 16px;
}

.pick-card .pc-title[b-9uszy0r7cf] {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0;
}

.pick-card .pc-rating[b-9uszy0r7cf] {
    display: inline-block;
    font-weight: 700;
    color: #c3e88d;
    font-size: .9rem;
}

.pick-card .pc-desc[b-9uszy0r7cf] {
    margin: 0;
    color: #c9d3e8;
}
/* _content/Wetflix2App/Components/MainApp/TopPickCard.razor.rz.scp.css */
.pick-card.top[b-buud21u6s0] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    background: radial-gradient(600px 320px at 10% -20%, rgba(96,165,250,.10), transparent 60%), radial-gradient(520px 280px at 110% 20%, rgba(167,139,250,.10), transparent 60%), linear-gradient(180deg, rgba(17,20,27,.96), rgba(17,20,27,.96));
    border-radius: 16px;
    overflow: hidden;
    min-height: 100%;
}

    /* Media banner */
    .pick-card.top .pc-media[b-buud21u6s0] {
        position: relative;
        height: 220px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #0f1218;
    }

@media (min-width: 1200px) {
    .pick-card.top .pc-media[b-buud21u6s0] {
        height: 240px;
    }
}

.pick-card.top .pc-media-fade[b-buud21u6s0] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.75) 100%);
    pointer-events: none;
}

/* Chip */
.pick-card.top .pc-chip[b-buud21u6s0] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    color: #0b0f17;
    font-weight: 800;
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Body */
.pick-card.top .pc-body[b-buud21u6s0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 18px 16px;
}

/* Meta row */
.pick-card.top .pc-meta[b-buud21u6s0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Rating */
.pick-card.top .pc-rating[b-buud21u6s0] {
    display: inline-block;
    font-weight: 700;
    color: #c3e88d;
    font-size: .9rem;
}

/* Title + sub */
.pick-card.top .pc-title[b-buud21u6s0] {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0;
}

.pick-card.top .pc-sub[b-buud21u6s0] {
    font-size: .9rem;
}

/* Description */
.pick-card.top .pc-desc[b-buud21u6s0] {
    margin: 0;
    color: #c9d3e8;
}

/* Actions */
.pick-card.top .pc-actions[b-buud21u6s0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
/* _content/Wetflix2App/Components/Management/Db/GMessageManagement.razor.rz.scp.css */
/* File: Components/Management/GMessageManagement.razor.css */
:root[b-0n2xe3li1t] {
    --gmm-bg: #12121a;
    --gmm-fg: #e8e8f0;
    --gmm-muted: #a9adc4;
    --gmm-indigo: #4c5bd4;
    --gmm-blue: #2e7bb4;
    --gmm-cyan: #3ea6c9;
    --gmm-amber: #d6a845;
    --gmm-red: #d64556;
    --gmm-nuke: #ff3b3b;
    --gmm-border: rgba(255,255,255,0.08);
    --gmm-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.gmm-header h4[b-0n2xe3li1t] {
    color: var(--gmm-fg);
}

/* Table wrapper */
.gmm-table-wrapper[b-0n2xe3li1t] {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid var(--gmm-border);
    border-radius: 14px;
    box-shadow: var(--gmm-shadow);
    overflow: hidden;
}

.gmm-table :where(th, td)[b-0n2xe3li1t] {
    vertical-align: middle;
}

.gmm-msg-text[b-0n2xe3li1t] {
    color: var(--gmm-fg);
    font-weight: 500;
}

.gmm-msg-desc[b-0n2xe3li1t] {
    font-size: .9rem;
}

/* Row accent hints */
.gmm-row-debug[b-0n2xe3li1t] {
    box-shadow: inset 4px 0 0 rgba(127,140,141,0.55);
}

.gmm-row-info[b-0n2xe3li1t] {
    box-shadow: inset 4px 0 0 rgba(62,166,201,0.55);
}

.gmm-row-warning[b-0n2xe3li1t] {
    box-shadow: inset 4px 0 0 rgba(214,168,69,0.65);
}

.gmm-row-error[b-0n2xe3li1t] {
    box-shadow: inset 4px 0 0 rgba(214,69,86,0.75);
}

.gmm-row-nuklear[b-0n2xe3li1t] {
    box-shadow: inset 4px 0 0 rgba(255,59,59,0.9);
}

/* Drawer */
.gmm-drawer-backdrop[b-0n2xe3li1t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
}

.gmm-drawer[b-0n2xe3li1t] {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(560px, 100vw);
    background: linear-gradient(135deg, rgba(40,42,58,0.98), rgba(22,24,36,0.98));
    border-left: 1px solid var(--gmm-border);
    box-shadow: -8px 0 30px rgba(0,0,0,0.5);
    padding: 1rem 1.1rem;
    z-index: 1050;
    color: var(--gmm-fg);
}

/* Modal (delete confirm) */
.gmm-modal-backdrop[b-0n2xe3li1t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000;
}

.gmm-modal[b-0n2xe3li1t] {
    position: fixed;
    z-index: 2010;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 92vw);
    background: linear-gradient(180deg, rgba(40,42,58,0.98), rgba(22,24,36,0.98));
    border: 1px solid var(--gmm-border);
    box-shadow: var(--gmm-shadow);
    border-radius: 14px;
    overflow: hidden;
    color: var(--gmm-fg);
}

.gmm-modal-header[b-0n2xe3li1t], .gmm-modal-footer[b-0n2xe3li1t] {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--gmm-border);
}

.gmm-modal-footer[b-0n2xe3li1t] {
    border-top: 1px solid var(--gmm-border);
    border-bottom: 0;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.gmm-modal-body[b-0n2xe3li1t] {
    padding: 1rem;
}
/* _content/Wetflix2App/Components/Management/ManagementHome.razor.rz.scp.css */
/* Scoped to ManagementHome */
.mg-container[b-nnt63kz6t5] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 8px 40px;
    color: var(--text);
}

.mg-hero[b-nnt63kz6t5] {
    border: 1px solid var(--border);
    background: radial-gradient(900px 500px at 15% -20%, rgba(96,165,250,.12), transparent 60%), radial-gradient(900px 500px at 85% 120%, rgba(167,139,250,.12), transparent 60%), var(--surface);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}

.mg-title[b-nnt63kz6t5] {
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 26px);
    margin: 0 0 6px 0;
}

.mg-sub[b-nnt63kz6t5] {
    color: var(--text-dim);
    margin: 0;
}

.mg-section[b-nnt63kz6t5] {
    margin-top: 18px;
}

.mg-h3[b-nnt63kz6t5] {
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 10px 0;
}

.mg-grid[b-nnt63kz6t5] {
    display: grid;
    gap: 12px;
}

@media (min-width: 720px) {
    .mg-grid[b-nnt63kz6t5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mg-card[b-nnt63kz6t5] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

    .mg-card:hover[b-nnt63kz6t5] {
        transform: translateY(-2px);
        border-color: var(--accent);
        box-shadow: 0 8px 28px rgba(0,0,0,.25);
    }

.mg-card-head[b-nnt63kz6t5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.mg-emoji[b-nnt63kz6t5] {
    font-size: 20px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.mg-card-title[b-nnt63kz6t5] {
    font-weight: 700;
}

.mg-card-sub[b-nnt63kz6t5] {
    color: var(--text-dim);
    font-size: .95rem;
}

.mg-card-foot[b-nnt63kz6t5] {
    justify-self: end;
    font-weight: 700;
    color: var(--accent);
}
/* _content/Wetflix2App/Components/Management/Stats/MainStats.razor.rz.scp.css */
.kpi[b-x989omvzr9] {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: .75rem .9rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.kpi-label[b-x989omvzr9] {
    font-size: .8rem;
    letter-spacing: .02em;
    color: #9aa4b2;
}

.kpi-value[b-x989omvzr9] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #e9edf6;
}
/* _content/Wetflix2App/Components/Management/Usr/UserCreate.razor.rz.scp.css */
.uc[b-q1ica12h1d] {
    background: var(--surface);
    border: 1px solid var(--border);
}
/* _content/Wetflix2App/Components/Management/Usr/UserManagement.razor.rz.scp.css */
/* scoped: root container + tabs look good in dark theme */
.um-wrap[b-94m1a1fkh8] {
    color: var(--text);
}

.um-tabs .nav-link[b-94m1a1fkh8] {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--border);
}

    .um-tabs .nav-link.active[b-94m1a1fkh8] {
        color: var(--text);
        background: var(--surface);
        border-color: var(--border);
    }
/* _content/Wetflix2App/Components/Management/Usr/UsersList.razor.rz.scp.css */
.ul-wrap[b-2kgxdggwxb] {
    color: var(--text);
}

.ul-table[b-2kgxdggwxb] {
    background: var(--surface);
    border-color: var(--border);
}

    .ul-table thead th[b-2kgxdggwxb] {
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

    .ul-table td[b-2kgxdggwxb] {
        border-bottom: 1px solid var(--border);
    }

.ul-row:hover[b-2kgxdggwxb] {
    background: rgba(167,139,250,.06);
    cursor: pointer;
}

.ul-expand-inner[b-2kgxdggwxb] {
    padding: 8px;
    background: rgba(96,165,250,.05);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.ul-cols[b-2kgxdggwxb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .ul-cols[b-2kgxdggwxb] {
        grid-template-columns: 1fr;
    }
}

.ul-kv[b-2kgxdggwxb] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
}

    .ul-kv:last-child[b-2kgxdggwxb] {
        border-bottom: 0;
    }

    .ul-kv .k[b-2kgxdggwxb] {
        color: var(--text-dim);
    }

.mono[b-2kgxdggwxb] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* modal */
.ul-modal-backdrop[b-2kgxdggwxb] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1000;
}

.ul-modal[b-2kgxdggwxb] {
    position: fixed;
    z-index: 1001;
    left: 50%;
    top: 10vh;
    transform: translateX(-50%);
    width: min(720px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.mini-loading[b-2kgxdggwxb] {
    color: var(--text-dim);
    padding: 8px 0;
}
/* _content/Wetflix2App/Components/Management/Usr/UserStatsPanel.razor.rz.scp.css */
/* scoped: cards + simple loading text */
.usp .card[b-4lt9da76xc] {
    background: var(--surface);
    border: 1px solid var(--border);
}

.usp .mini-loading[b-4lt9da76xc] {
    color: var(--text-dim);
    padding: 10px 0;
}
/* _content/Wetflix2App/Components/Pages/About/About.razor.rz.scp.css */
/* ===== About page scope (only affects the About page) ===== */

.about-container[b-pckznscsr7] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    color: var(--text);
}

/* HERO (no deployment styles here) */
:where(.about-container)[b-pckznscsr7]  .about-hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
    background: radial-gradient(1200px 600px at 10% -20%, rgba(96,165,250,.18), transparent 60%), radial-gradient(1200px 600px at 90% 120%, rgba(167,139,250,.18), transparent 60%), var(--surface);
}

:where(.about-container)[b-pckznscsr7]  .about-hero-inner {
    padding: 32px 24px;
    display: grid;
    gap: 14px;
}

:where(.about-container)[b-pckznscsr7]  .ah-title {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
}

:where(.about-container)[b-pckznscsr7]  .ah-sub {
    color: var(--text-dim);
    max-width: 70ch;
}

:where(.about-container)[b-pckznscsr7]  .ah-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

:where(.about-container)[b-pckznscsr7]  .btn-cta,
:where(.about-container)[b-pckznscsr7]  .btn-ghost {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
}

:where(.about-container)[b-pckznscsr7]  .btn-cta {
    background: var(--surface);
    color: var(--text);
}

    :where(.about-container)[b-pckznscsr7]  .btn-cta:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }

:where(.about-container)[b-pckznscsr7]  .btn-ghost {
    background: transparent;
    color: var(--text);
}

    :where(.about-container)[b-pckznscsr7]  .btn-ghost:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }

/* FEATURES */
:where(.about-container)[b-pckznscsr7]  .features {
    display: grid;
    gap: 14px;
    margin: 28px 0;
}

@media (min-width: 720px) {
    :where(.about-container)[b-pckznscsr7]  .features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

:where(.about-container)[b-pckznscsr7]  .feature-card {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 8px;
    color: var(--text);
}

:where(.about-container)[b-pckznscsr7]  .fc-title {
    font-weight: 700;
}

:where(.about-container)[b-pckznscsr7]  .fc-sub {
    color: var(--text-dim);
}

/* CREDITS */
:where(.about-container)[b-pckznscsr7]  .credits {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    margin: 0 0 28px;
    display: grid;
    gap: 10px;
    color: var(--text);
}

:where(.about-container)[b-pckznscsr7]  .cred-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

:where(.about-container)[b-pckznscsr7]  .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(96,165,250,.2), rgba(167,139,250,.2));
}

:where(.about-container)[b-pckznscsr7]  .credit-name {
    font-weight: 700;
}

:where(.about-container)[b-pckznscsr7]  .credit-link {
    color: var(--accent);
    text-decoration: none;
}

    :where(.about-container)[b-pckznscsr7]  .credit-link:hover {
        color: var(--accent-2);
        text-decoration: underline;
    }

/* CTA */
:where(.about-container)[b-pckznscsr7]  .cta {
    border: 1px solid var(--border);
    background: radial-gradient(900px 500px at 20% 120%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 500px at 80% -20%, rgba(167,139,250,.18), transparent 60%), var(--surface);
    border-radius: 14px;
    padding: 18px;
    display: grid;
    gap: 8px;
    text-align: center;
    color: var(--text);
}

:where(.about-container)[b-pckznscsr7]  .cta-title {
    font-weight: 800;
    font-size: clamp(18px, 2.6vw, 22px);
}

:where(.about-container)[b-pckznscsr7]  .cta-sub {
    color: var(--text-dim);
}

/* NOTE: No .deploy / .deploy-table styles here.
   Deployment styles live in Components/About/DeploymentInfo.razor.css */
/* _content/Wetflix2App/Components/Pages/About/DeploymentInfo.razor.rz.scp.css */
/* ===== Deployment & Runtime table (scoped to DeploymentInfo component) ===== */

.deploy[b-yj8t8t8aic] {
    display: block; /* ensure it's a block that can stretch */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    margin: 8px 0 28px;
    color: var(--text);
}

/* Table MUST fill container width */
.deploy-table[b-yj8t8t8aic] {
    display: table; /* explicit */
    width: 100% !important; /* take full inner width of .deploy */
    max-width: 100%;
    box-sizing: border-box;
    border-collapse: collapse; /* no gaps that can look like reduced width */
    table-layout: auto; /* let browser size cols naturally */
    background: var(--surface);
    color: var(--text);
}

    /* Header */
    .deploy-table thead th[b-yj8t8t8aic] {
        text-align: left;
        font-weight: 700;
        color: var(--text);
        background: linear-gradient(180deg, rgba(167,139,250,.10), rgba(96,165,250,.06));
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
    }

    .deploy-table thead .status-col[b-yj8t8t8aic] {
        width: 72px; /* fixed status gutter */
        text-align: center;
    }

    /* Cells */
    .deploy-table th[b-yj8t8t8aic],
    .deploy-table td[b-yj8t8t8aic] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    /* last row border cleanup */
    .deploy-table tbody tr:last-child td[b-yj8t8t8aic] {
        border-bottom: 0;
    }

    /* Row hover */
    .deploy-table tbody tr:hover[b-yj8t8t8aic] {
        background: rgba(167,139,250,.06);
    }

    /* Columns — keep labels tidy but allow wrapping; value can wrap freely */
    .deploy-table .label[b-yj8t8t8aic] {
        color: var(--text-dim);
        font-weight: 600;
        white-space: nowrap; /* looks cleaner on wide screens */
    }

    .deploy-table .value[b-yj8t8t8aic] {
        color: var(--text);
        white-space: normal; /* wrap text as needed */
        overflow-wrap: anywhere; /* break long tokens/URLs */
    }

    .deploy-table .status[b-yj8t8t8aic] {
        text-align: center;
        width: 72px;
    }

    .deploy-table .ok[b-yj8t8t8aic] {
        color: var(--success);
        font-weight: 900;
    }

/* Chips inside the table */
.chip[b-yj8t8t8aic] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(96,165,250,.10);
    color: var(--text);
    font-size: .9rem;
}

    .chip.ok[b-yj8t8t8aic] {
        background: rgba(101,212,142,.12);
        border-color: rgba(101,212,142,.35);
    }

    .chip.warn[b-yj8t8t8aic] {
        background: rgba(255,209,102,.12);
        border-color: rgba(255,209,102,.35);
    }

/* Responsive: let labels wrap on small screens so we never overflow */
@media (max-width: 640px) {
    .deploy-table .label[b-yj8t8t8aic] {
        white-space: normal;
    }
}
/* _content/Wetflix2App/Components/Pages/Home.razor.rz.scp.css */
/* ===== Landing (scoped) ===== */
.landing[b-f973r5vxvp] {
    display: grid;
    gap: 28px;
    color: var(--text);
}

/* HERO */
.hero[b-f973r5vxvp] {
    position: relative;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
}

.hero-bg[b-f973r5vxvp] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 600px at 10% -20%, rgba(96,165,250,.18), transparent 60%), radial-gradient(1200px 600px at 90% 120%, rgba(167,139,250,.18), transparent 60%);
}

.hero-inner[b-f973r5vxvp] {
    position: relative;
    padding: clamp(22px, 4vw, 36px);
    display: grid;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hero-logo[b-f973r5vxvp] {
    width: clamp(160px, 30vw, 260px);
    height: auto;
    justify-self: center;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,.45));
}

.hero-title[b-f973r5vxvp] {
    font-size: clamp(22px, 4.4vw, 40px);
    font-weight: 800;
    letter-spacing: .2px;
    margin: 6px 0 0 0;
    color: var(--text);
}

.hero-sub[b-f973r5vxvp] {
    color: var(--text-dim);
    max-width: 75ch;
    margin: 0 auto;
}

.hero-actions[b-f973r5vxvp] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-cta[b-f973r5vxvp],
.btn-ghost[b-f973r5vxvp] {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    line-height: 1;
}

.btn-cta[b-f973r5vxvp] {
    background: var(--surface);
    color: var(--text);
}

    .btn-cta:hover[b-f973r5vxvp] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }

.btn-ghost[b-f973r5vxvp] {
    background: transparent;
    color: var(--text);
}

    .btn-ghost:hover[b-f973r5vxvp] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }

/* SHELVES (real data) */
.shelves[b-f973r5vxvp] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.shelf-heading[b-f973r5vxvp] {
    font-weight: 800;
    letter-spacing: .2px;
    margin: 2px 0;
}

/* ContentList already styles its inner strip; we only need spacing */
.shelves :where(.content-list)[b-f973r5vxvp] {
    margin-top: 2px;
}

/* Single CTA (fallback / legacy). Kept in case you use it elsewhere on the page. */
.cta[b-f973r5vxvp] {
    max-width: 1100px;
    margin: 0 auto 8px;
    border: 1px solid var(--border);
    background: radial-gradient(900px 500px at 20% 120%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 500px at 80% -20%, rgba(167,139,250,.18), transparent 60%), var(--surface);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    display: grid;
    gap: 10px;
}

.cta-title[b-f973r5vxvp] {
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 24px);
}

.cta-sub[b-f973r5vxvp] {
    color: var(--text-dim);
}

.cta-actions[b-f973r5vxvp] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- NEW: Side-by-side CTAs (stack on small screens) --- */
.cta-grid[b-f973r5vxvp] {
    max-width: 1100px;
    margin: 0 auto 8px;
    display: grid;
    gap: 16px;
}

@media (min-width: 900px) {
    .cta-grid[b-f973r5vxvp] {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

/* Reuse the .cta look inside the grid, but ensure full-width cards */
.cta-grid .cta[b-f973r5vxvp] {
    margin: 0;
    max-width: none;
    height: 100%;
    display: grid;
    grid-auto-rows: max-content;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    background: radial-gradient(900px 500px at 20% 120%, rgba(96,165,250,.12), transparent 60%), radial-gradient(900px 500px at 80% -20%, rgba(167,139,250,.12), transparent 60%), var(--surface);
    color: var(--text);
}

.cta-grid .cta-title[b-f973r5vxvp] {
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 22px);
}

.cta-grid .cta-sub[b-f973r5vxvp] {
    color: var(--text-dim);
}

.cta-grid .cta-actions[b-f973r5vxvp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.cta-grid .btn-cta[b-f973r5vxvp],
.cta-grid .btn-ghost[b-f973r5vxvp] {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
}

.cta-grid .btn-cta[b-f973r5vxvp] {
    background: var(--surface);
    color: var(--text);
}

    .cta-grid .btn-cta:hover[b-f973r5vxvp] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }

.cta-grid .btn-ghost[b-f973r5vxvp] {
    background: transparent;
    color: var(--text);
}

    .cta-grid .btn-ghost:hover[b-f973r5vxvp] {
        border-color: var(--accent);
        color: var(--accent);
        background: rgba(96,165,250,.08);
    }