/* prime.css — Prime Video storefront theme layer (loaded last)
   Navy canvas, left-aligned text nav, landscape carousels, blue CTA. */

:root { --blue-cta: var(--accent); }
body { background: var(--bg); letter-spacing: 0; }

/* ───────── NAVBAR ───────── */
.rf-navbar { background: linear-gradient(180deg, rgba(15,23,30,.95) 0%, rgba(15,23,30,.6) 60%, transparent 100%); }
.rf-navbar.scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.nav-inner { max-width: none; justify-content: flex-start; gap: 2.2rem; }
.nav-left { gap: .6rem; }
.nav-links { flex: 0 1 auto; justify-content: flex-start; gap: .25rem; }
.nav-right { margin-left: auto; }

.rf-logo { font-size: 1.7rem; text-transform: lowercase; letter-spacing: -.045em; font-weight: 700; position: relative; padding-bottom: .5rem; }
.rf-logo span { color: var(--ink); }
.rf-logo::after { /* swoosh underline in accent */
    content: ''; position: absolute; left: 8%; right: 6%; bottom: .12rem; height: .55rem;
    border-bottom: 3px solid var(--accent); border-radius: 0 0 60% 60% / 0 0 100% 100%;
}
.footer-logo { font-size: 1.2rem; }

.nav-link { font-size: 1rem; font-weight: 500; color: var(--ink2); padding: .6rem .85rem; border-radius: var(--r-sm); background: none !important; }
.nav-link::after { content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 2px; background: #fff; border-radius: 2px; transform: scaleX(0); transition: transform .2s var(--ease); }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.1) !important; }
.nav-link.active { color: #fff; font-weight: 700; }
.nav-link.active::after { transform: scaleX(1); }

.icon-btn:hover { background: rgba(255,255,255,.12); }
.profile-btn { border-radius: 50%; background: var(--bg3); width: 38px; height: 38px; }
.profile-btn:hover { border-color: #fff; transform: none; }
.watchlist-badge, .notif-dot { color: #fff; border-color: var(--bg); }
.profile-menu, .toast { border-radius: var(--r-md); }
.profile-menu-item:hover, .sidebar-link:hover { background: rgba(255,255,255,.08); }
.sidebar-link.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: #fff; }

/* ───────── BUTTONS ───────── */
.cf-btn { border-radius: var(--r-sm); font-weight: 700; }
.cf-btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
.cf-btn-primary:hover { background: var(--accent-hover); transform: none; box-shadow: none; }
.cf-btn-secondary, .cf-btn-ghost { background: rgba(255,255,255,.12); border: 0; }
.cf-btn-secondary:hover, .cf-btn-ghost:hover { background: rgba(255,255,255,.22); transform: none; }
.cf-btn-lg { padding: 1rem 2rem; font-size: 1.05rem; border-radius: 8px; gap: .6rem; }
.toggle input:checked + .toggle-slider::before { background: #fff; }
.filter-chip.active { background: #fff; color: #0F171E; }
.filter-tabs { background: transparent; border: 0; gap: .5rem; padding: 0; }
.filter-chip { background: rgba(255,255,255,.1); border-radius: var(--r-full); padding: .5rem 1.1rem; font-size: .85rem; }
.filter-chip:hover { background: rgba(255,255,255,.2); color: #fff; }
.avatar-opt.active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.back-btn { background: rgba(255,255,255,.1); border: 0; border-radius: var(--r-full); }
.back-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.load-more-btn { background: rgba(255,255,255,.1); border: 0; }
.load-more-btn:hover { background: rgba(255,255,255,.2); color: #fff; transform: none; }

/* ───────── HERO ───────── */
.hero-section { height: min(80vh, 780px); min-height: 520px; margin-bottom: 0; }
.hero-slide { background-position: right 20%; }
.hero-overlay {
    background:
        linear-gradient(90deg, var(--bg) 0%, rgba(15,23,30,.92) 22%, rgba(15,23,30,.55) 42%, rgba(15,23,30,0) 68%),
        linear-gradient(0deg, var(--bg) 0%, rgba(15,23,30,.7) 12%, transparent 42%),
        linear-gradient(180deg, rgba(15,23,30,.75) 0%, transparent 18%);
}
.hero-content { left: clamp(16px, 3vw, 48px); bottom: clamp(3.5rem, 9vw, 6rem); max-width: min(560px, 50%); }
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem; background: none; color: var(--accent);
    font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0; margin-bottom: .8rem;
}
.hero-title { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; text-shadow: none; margin-bottom: 1rem; }
.hero-meta { font-size: .95rem; color: var(--ink); font-weight: 500; gap: .6rem; }
.hero-meta .rating { color: #fff; }
.hero-meta .badge-outline { border-radius: 4px; border-color: rgba(255,255,255,.55); font-weight: 600; }
.genre-tag { background: none; padding: 0; color: var(--ink2); font-size: .9rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
.genre-tag + .genre-tag::before { content: '•'; margin: 0 .55rem; color: var(--ink4); }
.hero-genres { gap: 0; margin-bottom: .9rem; }
.hero-overview { color: rgba(255,255,255,.85); font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.5rem; }
.hero-actions { align-items: center; gap: .85rem; }
.hero-circle-btn {
    width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, transform .2s var(--ease);
}
.hero-circle-btn:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
.hero-indicators { left: auto; right: clamp(16px, 3vw, 48px); bottom: 2rem; gap: .5rem; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero-dot.active { width: 8px; background: #fff; transform: scale(1.25); }

/* ───────── ROWS ───────── */
.content-rows { padding: 0 0 3rem; margin-top: -2.5rem; position: relative; z-index: 3; }
.row-section { margin-bottom: 1.6rem; }
.row-header { max-width: none; padding: 0 clamp(16px, 3vw, 48px) .15rem; justify-content: flex-start; }
.row-title { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; }
.row-more, .row-link-btn { display: inline-flex; align-items: center; gap: .15rem; font-size: .9rem; font-weight: 600; color: var(--accent); padding: .3rem .4rem; }
.row-more { margin-left: .6rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.row-section:hover .row-more, .row-more:focus-visible { opacity: 1; transform: none; }
.row-header .row-link-btn { margin-left: auto; color: var(--ink3); }
.row-more:hover, .row-link-btn:hover { color: var(--accent-hover); }

.cards-scroll { gap: .75rem; padding: .9rem clamp(16px, 3vw, 48px) 1.4rem; scroll-snap-type: x mandatory; scroll-padding-left: clamp(16px, 3vw, 48px); }
.cards-scroll .cf-card.land { width: clamp(230px, 22vw, 330px); }

/* landscape card */
.cf-card { transition: transform .22s var(--ease); }
.cf-card:hover { transform: scale(1.04); z-index: 4; }
.card-poster-wrap { border: 0; border-radius: var(--r-md); background: var(--bg3); }
.cf-card:hover .card-poster-wrap { box-shadow: 0 0 0 2px #fff, 0 12px 28px rgba(0,0,0,.6); }
.cf-card.land .card-poster-wrap { aspect-ratio: 16/9; }
.cf-card.land .card-play-overlay { background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0) 60%); align-items: flex-end; justify-content: flex-start; padding: .7rem; }
.cf-card.land .play-icon { width: 40px; height: 40px; background: #fff; }
.card-play-overlay { border-radius: var(--r-md); }
.play-icon svg { fill: #0F171E; }
.card-bookmark { background: rgba(15,23,30,.85); top: .5rem; right: .5rem; }
.card-bookmark.saved { color: #fff; background: var(--accent); border-color: var(--accent); }
.cf-card.land .card-bookmark { top: auto; bottom: .7rem; right: .7rem; }

.prime-tag {
    position: absolute; top: .5rem; left: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(15,23,30,.82); color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .01em;
    padding: .22rem .5rem .22rem .4rem; border-radius: 4px; line-height: 1; text-transform: lowercase;
}
.card-badge { background: rgba(15,23,30,.85); border-radius: 4px; }
.card-info { padding: .55rem .1rem 0; }
.card-title { font-size: .92rem; font-weight: 500; color: var(--ink); margin-bottom: .15rem; }
.card-rating { color: var(--ink2); }
.card-sub { font-size: .78rem; color: var(--ink3); }
.cf-card.continue-card { width: clamp(230px, 22vw, 330px); }
.card-progress-bar { background: var(--accent); }
.cf-card.continue-card .card-progress-wrap { height: 4px; background: rgba(255,255,255,.3); }

/* carousel arrows — tall edge buttons like Prime */
.carousel-arrow {
    top: 2.1rem; bottom: 3.5rem; height: auto; width: clamp(36px, 3.2vw, 52px); border-radius: 0; border: 0;
    background: linear-gradient(90deg, rgba(15,23,30,.9), transparent); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.carousel-arrow.right { background: linear-gradient(270deg, rgba(15,23,30,.9), transparent); right: 0; }
.carousel-arrow.left { left: 0; }
.carousel-arrow:hover { background: linear-gradient(90deg, rgba(15,23,30,.97), rgba(15,23,30,.1)); transform: none; }
.carousel-arrow.right:hover { background: linear-gradient(270deg, rgba(15,23,30,.97), rgba(15,23,30,.1)); }

/* Top 10 */
.top10-row .row-title::before {
    content: 'TOP 10'; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
    padding: .28rem .5rem; border-radius: 4px; line-height: 1;
}
.top10-card { padding-left: 5.4rem; min-width: 250px; margin-right: .5rem; }
.top10-rank { font-size: 9.5rem; left: .2rem; bottom: -.9rem; line-height: .8; -webkit-text-stroke: 3px rgba(255,255,255,.85); opacity: 1; }
.top10-poster { border: 0; border-radius: var(--r-md); }
.top10-card:hover { transform: scale(1.04); }
.top10-card:hover .top10-poster { box-shadow: 0 0 0 2px #fff, var(--shadow-md); }

/* skeleton */
.cf-card.skeleton:hover { transform: none; }
.cf-card.skeleton.land .card-poster-wrap { aspect-ratio: 16/9; }
.cf-card.skeleton.land { width: clamp(230px, 22vw, 330px); }

/* ───────── GRIDS / PAGES ───────── */
.page-header, .category-header, .category-grid, .details-body, .footer-inner { max-width: none; }
.category-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.page-title, .category-title { letter-spacing: -.02em; }
.search-bar { border-radius: var(--r-full); background: rgba(255,255,255,.1); border: 1px solid transparent; padding: .8rem 1.3rem; }
.search-bar:focus-within { border-color: #fff; background: rgba(255,255,255,.14); }
.recent-chip { background: rgba(255,255,255,.1); border: 0; border-radius: var(--r-full); }
.settings-group, .setting-item { border-color: var(--border); }

/* details */
.details-hero-bg::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(15,23,30,.85) 22%, rgba(15,23,30,.3) 60%, rgba(15,23,30,.55) 100%); }
.details-title { text-shadow: none; letter-spacing: -.03em; }
.details-meta .rating { color: #fff; }
.details-genre-tag { background: rgba(255,255,255,.12); }
.details-poster { border: 0; border-radius: var(--r-md); }

/* ───────── BOTTOM NAV (mobile) ───────── */
.bottom-nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--border); }
.bottom-nav-item { color: var(--ink3); font-size: .68rem; }
.bottom-nav-item.active { color: #fff; }
.bottom-nav-item.active svg { stroke: #fff; }

/* ───────── FOOTER ───────── */
.rf-footer { border-top: 1px solid var(--border); margin-top: 1rem; }
.footer-right a { color: var(--ink2); }
.heart { color: var(--ink3); animation: none; }

/* ───────── RESPONSIVE ───────── */
@media (max-width: 1024px) {
    .nav-inner { gap: 1rem; }
    .nav-left { gap: .25rem; }
}
@media (max-width: 767px) {
    .hero-section { height: auto; min-height: 0; aspect-ratio: 4/5; max-height: 78vh; }
    .hero-overlay {
        background: linear-gradient(0deg, var(--bg) 0%, rgba(15,23,30,.85) 38%, rgba(15,23,30,.1) 70%),
                    linear-gradient(180deg, rgba(15,23,30,.7) 0%, transparent 22%);
    }
    .hero-slide { background-position: 70% 15%; }
    .hero-content { max-width: 100%; left: 16px; right: 16px; bottom: 2.6rem; }
    .hero-badge { font-size: .9rem; }
    .hero-title { font-size: 1.9rem; }
    .hero-meta { font-size: .82rem; }
    .hero-genres, .hero-overview { display: none; }
    .hero-actions .cf-btn-lg { padding: .85rem 1.5rem; font-size: .95rem; flex: 1; justify-content: center; }
    .hero-circle-btn { width: 46px; height: 46px; }
    .hero-indicators { right: auto; left: 0; right: 0; justify-content: center; bottom: .8rem; }
    .content-rows { margin-top: -.5rem; }
    .cards-scroll .cf-card.land, .cf-card.continue-card, .cf-card.skeleton.land { width: 62vw; max-width: 260px; }
    .cards-scroll .cf-card:hover { transform: none; }
    .top10-card { padding-left: 3.6rem; min-width: 190px; }
    .top10-rank { font-size: 6.5rem; left: 0; bottom: -.5rem; -webkit-text-stroke: 2px rgba(255,255,255,.85); }
    .row-more { opacity: 1; transform: none; }
    .carousel-arrow { display: none; }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .nav-link::after { display: none; }
}

/* ═════════════════════════════════════════════════════════
   PART 2 — player, details, episodes, genres, settings,
   sidebar, footer, motion & accessibility polish
   ═════════════════════════════════════════════════════════ */

/* ───────── SMOOTHNESS & A11Y ───────── */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
:focus { outline: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.cf-card:focus-visible .card-poster-wrap, .top10-card:focus-visible .top10-poster { box-shadow: 0 0 0 3px #fff; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page.active { animation: pageIn .38s var(--ease) both; }
.cf-card, .top10-card, .episode-card, .genre-card, .hero-circle-btn, .cf-btn, .icon-btn { will-change: transform; }
.cf-btn:active, .hero-circle-btn:active { transform: scale(.97); }
img.lazy { transition: opacity .5s ease; }
.card-poster-wrap img { transition: transform .5s var(--ease), opacity .5s ease; }
.cf-card:hover .card-poster-wrap img { transform: scale(1.05); }
.cards-scroll { scroll-behavior: smooth; }
.rf-navbar { transition: background .3s, box-shadow .3s; }
::-webkit-scrollbar-thumb { background: #3a4a5a; }

/* ───────── DETAILS ───────── */
.details-hero { height: min(78vh, 700px); min-height: 460px; }
.details-hero-bg { background-position: right 20%; transform: scale(1.02); }
.details-hero-bg::after {
    background:
        linear-gradient(90deg, var(--bg) 0%, rgba(15,23,30,.92) 24%, rgba(15,23,30,.5) 48%, rgba(15,23,30,0) 72%),
        linear-gradient(0deg, var(--bg) 0%, rgba(15,23,30,.65) 14%, transparent 45%),
        linear-gradient(180deg, rgba(15,23,30,.75) 0%, transparent 20%);
}
.details-hero-inner { max-width: none; padding: 0 clamp(16px, 3vw, 48px) clamp(2rem, 5vw, 3.5rem); align-items: flex-end; }
.details-poster { display: none; }
.details-info { max-width: min(640px, 100%); animation: fadeUp .5s var(--ease) both; }
.details-info .hero-badge { margin-bottom: .7rem; }
.details-title { font-size: clamp(2.1rem, 4.6vw, 3.8rem); margin-bottom: .9rem; }
.details-meta { color: var(--ink); font-size: .95rem; gap: .5rem .8rem; }
.details-meta .badge-outline { border-radius: 4px; border-color: rgba(255,255,255,.55); font-weight: 600; }
.details-genres { gap: 0; margin-bottom: 1rem; }
.details-genre-tag { background: none; padding: 0; color: var(--ink2); font-size: .9rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
.details-genre-tag + .details-genre-tag::before { content: '•'; margin: 0 .55rem; color: var(--ink4); }
.details-synopsis { color: rgba(255,255,255,.88); font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.6rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.details-actions { align-items: center; gap: .85rem; }
.hero-circle-btn svg { width: 22px; height: 22px; }
.hero-circle-btn.saved { background: var(--accent); border-color: var(--accent); }
.details-body { padding: 1.5rem clamp(16px, 3vw, 48px) 4rem; }
.section-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .9rem; letter-spacing: -.01em; }

/* cast */
.cast-scroll { gap: 1.1rem; margin-bottom: 2.4rem; }
.cast-card { width: 104px; }
.cast-photo { width: 84px; height: 84px; border: 0; background: var(--bg3); transition: transform .25s var(--ease); }
.cast-card:hover .cast-photo { transform: scale(1.06); }
.cast-name { font-size: .85rem; font-weight: 600; }

/* seasons + episodes (vertical Prime list) */
.season-tabs { gap: .5rem; border-bottom: 0; padding-bottom: 1rem; margin-bottom: .4rem; }
.season-tab { background: rgba(255,255,255,.1); border: 0; border-radius: var(--r-full); padding: .55rem 1.15rem; font-size: .88rem; color: #fff; }
.season-tab:hover { background: rgba(255,255,255,.2); }
.season-tab.active { background: #fff; color: #0F171E; border: 0; }
.episodes-grid { grid-template-columns: 1fr; gap: 0; max-width: 980px; }
.episode-card { background: none; border: 0; border-radius: var(--r-md); padding: .9rem; gap: 1.2rem; align-items: center; }
.episode-card + .episode-card { border-top: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); }
.episode-card:hover { background: rgba(255,255,255,.07); transform: none; box-shadow: none; border-color: transparent; }
.episode-thumb-wrap { position: relative; flex-shrink: 0; width: clamp(150px, 20vw, 240px); aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: var(--bg3); }
.episode-thumb { width: 100%; height: 100%; border-radius: 0; display: block; transition: transform .4s var(--ease); }
.episode-card:hover .episode-thumb { transform: scale(1.05); }
.ep-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.ep-play svg { width: 40px; height: 40px; padding: 11px 9px 11px 13px; border-radius: 50%; background: rgba(15,23,30,.85); border: 2px solid #fff; box-sizing: border-box; }
.episode-card:hover .ep-play { opacity: 1; }
.ep-title { font-size: 1rem; font-weight: 600; -webkit-line-clamp: 1; margin-bottom: .1rem; }
.ep-index { color: var(--ink2); font-weight: 500; }
.ep-num { color: var(--ink3); font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 0 0 .4rem; display: block; }
.ep-overview { font-size: .88rem; color: var(--ink2); -webkit-line-clamp: 3; line-height: 1.5; }

/* similar row inside details */
.details-body .cards-scroll { margin: 0 calc(-1 * clamp(16px, 3vw, 48px)); padding-left: clamp(16px, 3vw, 48px) !important; padding-right: clamp(16px, 3vw, 48px) !important; }

/* ───────── GENRES (category tiles) ───────── */
.genres-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.genre-card {
    display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; min-height: 110px;
    padding: 1.1rem 1.2rem; border: 0; border-radius: var(--r-md); font-size: 1.1rem; font-weight: 700; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.3), transparent 60%), linear-gradient(135deg, var(--g1, #1A98FF), var(--g2, #0b3a66)); transition: transform .25s var(--ease), box-shadow .25s;
}
.genre-card::before { display: none; }
.genre-card::after { content: '›'; position: absolute; right: 1rem; top: .7rem; font-size: 1.6rem; font-weight: 400; opacity: .7; transition: transform .25s var(--ease); }
.genre-card:hover { border-color: transparent; transform: scale(1.03); box-shadow: 0 0 0 2px #fff, var(--shadow-md); }
.genre-card:hover::after { transform: translateX(4px); }
.genre-card:nth-child(6n+1) { --g1: #1A98FF; --g2: #0a3b73; }
.genre-card:nth-child(6n+2) { --g1: #7c3aed; --g2: #2a1463; }
.genre-card:nth-child(6n+3) { --g1: #e11d48; --g2: #5b0f24; }
.genre-card:nth-child(6n+4) { --g1: #0d9488; --g2: #0a3b38; }
.genre-card:nth-child(6n+5) { --g1: #d97706; --g2: #5a3103; }
.genre-card:nth-child(6n+6) { --g1: #4f46e5; --g2: #1b1a55; }

/* ───────── SETTINGS / PROFILE ───────── */
.settings-container { max-width: 820px; }
.settings-group { background: var(--surface); border: 0; border-radius: var(--r-md); padding: 1.1rem 1.5rem; margin-bottom: 1.2rem; }
.settings-group-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: #fff; padding: .2rem 0 .7rem; }
.setting-item { border-top: 1px solid rgba(255,255,255,.08); padding: 1rem 0; }
.setting-label { font-size: .98rem; font-weight: 600; }
.setting-desc { font-size: .83rem; }
.setting-input { background: rgba(255,255,255,.08); border: 1px solid transparent; border-radius: var(--r-sm); padding: .65rem .9rem; }
.setting-input:focus { border-color: #fff; background: rgba(255,255,255,.12); }
.avatar-opt { background: rgba(255,255,255,.08); border: 2px solid transparent; border-radius: 50%; width: 52px; height: 52px; }
.avatar-opt:hover { background: rgba(255,255,255,.16); border-color: transparent; }
.avatar-opt.active { border-color: #fff; background: rgba(255,255,255,.14); }
.accent-dot.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #fff; }
.toggle-slider { background: rgba(255,255,255,.22); border: 0; }
.toggle-slider::before { background: #fff; }
.toggle input:checked + .toggle-slider { background: var(--accent); }
.cf-btn-danger { background: rgba(255,255,255,.1); color: #ff6b73; border: 0; }
.cf-btn-danger:hover { background: rgba(229,9,20,.85); color: #fff; }

/* profile menu + sidebar */
.profile-menu { background: #1B2530; border: 0; box-shadow: 0 14px 40px rgba(0,0,0,.6); border-radius: var(--r-md); }
.profile-menu-head { border-bottom: 1px solid rgba(255,255,255,.08); }
.profile-menu-item { font-size: .92rem; padding: .7rem .85rem; }
.rf-sidebar { background: var(--bg); border-right: 0; box-shadow: 8px 0 40px rgba(0,0,0,.6); width: 300px; }
.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-link { font-size: 1.02rem; font-weight: 500; padding: .8rem 1rem; position: relative; }
.sidebar-link.active { font-weight: 700; }
.sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); text-transform: none; letter-spacing: 0; font-size: .78rem; }
.sidebar-overlay { background: rgba(0,0,0,.65); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* search overlay */
.search-overlay { background: var(--bg); }
.search-container { max-width: 1280px; padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
.search-results { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.search-close { background: rgba(255,255,255,.1); }
.recent-title { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); font-weight: 700; }

/* empty states + toast + misc */
.empty-icon { background: rgba(255,255,255,.08); border: 0; }
.empty-state h3 { font-size: 1.4rem; }
.cf-toast { background: #fff; color: #0F171E; border: 0; border-radius: var(--r-sm); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.category-grid.list-view .cf-card { background: var(--surface); border: 0; }
.category-grid.list-view .cf-card:hover { transform: none; background: #26323f; }
.view-toggle { background: rgba(255,255,255,.1); border: 0; border-radius: 50%; }
.view-toggle:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ───────── FOOTER ───────── */
.rf-footer { margin: 3rem clamp(16px, 3vw, 48px) 1rem; padding: 2rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { flex-direction: column; justify-content: center; gap: .8rem; text-align: center; }
.footer-copy { font-size: .82rem; color: var(--ink3); }
.footer-right { justify-content: center; font-size: .82rem; }

/* ───────── MOBILE (part 2) ───────── */
@media (max-width: 767px) {
    .details-hero { height: auto; min-height: 0; aspect-ratio: 4/5; max-height: 80vh; }
    .details-hero-bg::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(15,23,30,.88) 40%, rgba(15,23,30,.1) 72%), linear-gradient(180deg, rgba(15,23,30,.7) 0%, transparent 22%); }
    .details-hero-bg { background-position: 70% 15%; }
    .details-hero-inner { flex-direction: row; padding: 0 16px 1.4rem; }
    .details-title { font-size: 1.9rem; }
    .details-synopsis { font-size: .92rem; -webkit-line-clamp: 3; }
    .details-genres { display: none; }
    .details-actions .cf-btn-lg { flex: 1; justify-content: center; padding: .85rem 1.2rem; }
    .hero-circle-btn { width: 46px; height: 46px; }
    .episode-card { flex-direction: row; padding: .7rem .3rem; gap: .8rem; }
    .episode-thumb-wrap { width: 118px; }
    .ep-overview { display: none; }
    .ep-title { font-size: .92rem; }
    .genres-grid { grid-template-columns: repeat(2, 1fr); }
    .genre-card { min-height: 84px; font-size: .98rem; padding: .9rem; }
    .rf-sidebar { width: 82vw; }
}

/* ═════════════════════════════════════════════════════════
   PART 3 — final polish
   ═════════════════════════════════════════════════════════ */

/* search: hide native clear button (we have our own close), no double ring */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-bar input:focus-visible { outline: none; }
.search-bar:focus-within { box-shadow: 0 0 0 1px #fff; }
.search-msg { color: var(--ink2); padding: 2rem 0; font-size: 1rem; }

/* sidebar: active item reads like Prime's drawer */
.sidebar-link.active { background: rgba(255,255,255,.08); }
.sidebar-link { border-radius: var(--r-md); }
.sidebar-header { padding: 1.1rem 1.25rem 1.1rem 1.5rem; }

/* richer, calmer hover on pointer devices; none on touch */
@media (hover: none) {
    .cf-card:hover, .top10-card:hover { transform: none; }
    .cf-card:hover .card-poster-wrap, .top10-card:hover .top10-poster { box-shadow: none; }
    .cf-card:hover .card-poster-wrap img { transform: none; }
    .card-play-overlay { display: none; }
    .carousel-arrow { display: none; }
}

/* shimmer that matches the navy palette */
.cf-card.skeleton .card-poster-wrap,
.cf-card.skeleton .card-title-skel,
.cf-card.skeleton .card-sub-skel,
.hero-skeleton > div {
    background: linear-gradient(90deg, #16202A 0%, #223040 50%, #16202A 100%);
    background-size: 600px 100%;
}

/* Prime-style details meta spacing and action row */
.details-actions .hero-circle-btn { flex-shrink: 0; }
.details-meta .rating { font-weight: 700; }
.details-body .section-title { margin-top: .4rem; }
.episode-card { cursor: pointer; }
.episode-card:focus-visible { outline-offset: -2px; }
.cast-char { color: var(--ink3); font-size: .75rem; }

/* tabular numbers for ratings / years so rows align */
.card-sub, .hero-meta, .details-meta { font-variant-numeric: tabular-nums; }

/* buttons: consistent focus + press feedback */
.cf-btn:focus-visible, .hero-circle-btn:focus-visible, .pl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cf-btn-primary:active { background: var(--accent-dark); }

/* toast sits above the bottom-nav and is never clipped */
.cf-toast { max-width: min(92vw, 420px); text-align: center; }

/* confirm-style empty state buttons */
.empty-state .cf-btn { margin-top: .4rem; padding: .85rem 1.8rem; }

/* footer */
.rf-footer { margin-top: 2rem; }
.footer-right a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.footer-right a:hover { color: #fff; text-decoration-color: #fff; }

/* page / overlay transitions */
.search-overlay { transition: opacity .25s ease, transform .25s var(--ease); transform: translateY(8px); }
.search-overlay.visible { transform: none; }

/* never let the page scroll under the player or drawer */
body:has(.player-overlay.visible) .bottom-nav,
body:has(.player-overlay.visible) .cf-toast { z-index: 1; }
body:has(.player-overlay.visible) .cf-toast { z-index: 10000; }