/* MAL Import Button & Notification */
.mal-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #000;
    color: #f96d00;
    border: 1.5px solid #444;
    border-radius: 7px;
    font-size: 1.08rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transition: background 0.38s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s, transform 0.18s, border 0.18s, color 0.18s;
    outline: none;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
}
    
.mal-import-btn:hover {
    background: linear-gradient(90deg, #232323 0%, #181818 26%, #f96d00 100%);
    border-color: #888;
    color: #ff7f1a;
    transform: translateY(-2px) scale(1.04);
}
.mal-import-btn svg {
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
    fill: none;
    stroke: #f96d00;
    transition: stroke 0.18s;
}
.mal-import-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #2e51a2;
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1.08rem;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(46, 81, 162, 0.18);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.mal-import-toast.show {
    opacity: 1;
    pointer-events: auto;
}
 
.vertical-recommend-row {
    overflow-x: hidden;
    padding-left: 24px;
    padding-top: 24px;
    display: none;
    max-height: 500px;
    overflow-y: auto;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 0 0 12px 12px;

}
.vertical-recommend-row .horizontal-scroll-row {
    overflow-x: hidden !important;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    flex-direction: column;
}
.vertical-recommend-row .movie-card, .vertical-recommend-row .mini-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.vertical-recommend-row .row-title, .vertical-recommend-row .movie-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-height: 1.5em;
    line-height: 1.2;
    display: block;
}
.recommend-section{
    padding: 0 20px;
}
@media (max-width: 1810px) {
    .vertical-recommend-row {
        display: block !important;
    }
}
/* MovieInfo.html responsive tweaks */
@media (max-width: 1810px) {
    .vertical-recommend {
        display: none !important;
    }
}

#watchNowBtn {
  background: #f36a00 !important;
  background-image: none !important;
}
.movie-content {
    width: 100% !important;
}
.actor-section {
    width: 100% !important;
}
.movie-header-main-inner {
    min-width: 0 !important;
    width: 100%;
}
/* ── Global Scrollbar ─────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: #f96d00 #1a1a1a;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: #1a1a1a;
}
*::-webkit-scrollbar-thumb {
    background: #f96d00;
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
    background: #ff8c2a;
}

/* Sign In Modal Overlay (matches signup) */
.signin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.signin-overlay.active {
    opacity: 1;
    visibility: visible;
}

.signin-box {
    background: #0a0a0a;
    width: 400px;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #333;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 0 30px rgba(249, 109, 0, 0.1);
}

.signin-overlay.active .signin-box {
    transform: translateY(0);
}

.signin-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
}
.signin-close:hover {
    color: #fff;
}
.signin-box h2 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 2rem;
}
.signin-subtitle {
    color: #888;
    margin-bottom: 30px;
    font-size: 0.9rem;
}
/* Fade-up entrance for main content after loader */
/* MovieInfo Loading Overlay Animation (with fade and collapse) */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s;
    opacity: 1;
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    position: relative;
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(.4,2,.6,1), opacity 0.4s;
}
.loading-spinner.grow {
    transform: scale(1.18);
}
.loading-spinner.collapse {
    transform: scale(0.1);
    opacity: 0;
}


.loading-ring {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-top: 3px solid #b8001c !important; /* deep red */
    border-radius: 50%;
    animation: loading-rotate 2.5s infinite linear;
}
.loading-ring::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    border-top: 3px solid var(--accent-primary) !important; /* orange as is */
    border-radius: 50%;
    animation: loading-rotate 2s infinite linear;
}
.loading-ring::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-top: 3px solid #4e6a6e !important; /* greyish teal */
    border-radius: 50%;
    animation: loading-rotate 1s infinite linear;
}

@keyframes loading-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* MovieInfo Loading Overlay Animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 10013;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.loading-spinner {
    position: relative;
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-ring {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-top: 3px solid #32afa9;
    border-radius: 50%;
}
.loading-ring::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    border-top: 3px solid #f17362;
    border-radius: 50%;
    animation: loading-rotate 2s infinite linear;
}
.loading-ring::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-top: 3px solid #7e0cf5;
    border-radius: 50%;
    animation: loading-rotate 1s infinite linear;
}

@keyframes loading-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Match vertical-slider's slider to .orange-slider style */
.vertical-slider input[type="range"] {
    accent-color: #f96d00;
    width: 100%;
    cursor: pointer;
}
/* --- Movie Info + Recommendations Flex Layout --- */
.movie-flex-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto 32px auto;
    /* Remove forced height to prevent layout shift when modal opens */
    /* height: 100%; */
}
.movie-header {
    flex: 2 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: padding 0.3s;
    padding-top: 80px;
    padding-bottom: 0;
}
.movie-header.player-active {
    margin-top: 0;
    padding-top: 80px;
    padding-bottom: 48px;
}
.vertical-recommend {
    flex: 1 1 320px;
    height: 0;
    min-width: 280px;
    max-width: 350px;
    background: linear-gradient(180deg, #181818 0%, #222 100%);
    border-radius: 14px;
    box-shadow: 0 2px 16px #0004;
    padding: 18px 12px 18px 12px;
    margin-top: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.vertical-slider {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-right: 4px;
    min-height: 0;
}
.vertical-slider .mini-card {
    display: flex;
    width: 96%;
    flex-direction: row;
    align-items: center;
    background: #101010;
    border-radius: 10px;
    box-shadow: 0 1px 6px #0002;
    padding: 8px 10px;
    gap: 14px;
    transition: background 0.2s;
    cursor: pointer;
}
.vertical-slider .mini-card img {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}
.vertical-slider .mini-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Actor section custom styling */

/* --- VidSrc Modal --- */
#vidsrcModal.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,0.85);
}
#vidsrcModal.modal.show {
    display: block;
}
#vidsrcModal .modal-content {
    background: #181818;
    margin: 5vh auto;
    padding: 0;
    border-radius: 10px;
    width: 90vw;
    max-width: 900px;
    box-shadow: 0 0 30px #000a;
    position: relative;
}
#vidsrcModal .close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: #f96d00;
    cursor: pointer;
    z-index: 2;
}
#vidsrcModal .video-container {
    width: 100%;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#vidsrcModal iframe {
    width: 100%;
    height: 60vh;
    border: none;
    border-radius: 0 0 10px 10px;
}
/* API Status Indicator */
.api-status-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #333;
    margin-right: 6px;
    vertical-align: middle;
    transition: background 0.3s;
}
.api-status-online {
    background: #4caf50 !important;
}
.api-status-offline {
    background: #f44336 !important;
}
/* --- UNIVERSAL RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
}

.container, header, main {
    width: 100% !important;
    max-width: 2000px;
    margin: 0 auto;
    padding-bottom: 50px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* === LEFT SIDEBAR NAV === */
body {
    padding-left: max(220px, calc(50vw - 890px));
    padding-top: 68px;
    max-width: 2000px;
    
}

.left-sidebar {
    position: fixed;
    left: max(0px, calc(50vw - 1110px));
    top: 0;
    bottom: 0;
    width: 220px;
    background: #080808;
    border-right: 1px solid rgba(43, 43, 43, 1);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-logo-wrap {
    padding: 12.5px 22px ;
    /* padding-bottom: 29px; */
    border-bottom: 1px solid rgba(43, 43, 43, 0.8);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar-logo-img {
    height: 22px;
    flex-shrink: 0;
}

.sidebar-brand-mark {
    /* margin-left: 8px; */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar-brand-mark svg {
    /* width: 110px; */
    height: 42px;
    display: block;
}

.sidebar-nav-list {
    flex: 1;
    min-height: 0; /* allows flex item to shrink below its content size */
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

.sidebar-nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.91rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.sidebar-nav-list a:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}

.sidebar-nav-list a.sidebar-active {
    background: rgba(249, 109, 0, 0.12);
    color: #f96d00;
    border-left-color: #f96d00;
}

.sidebar-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

.sidebar-divider {
    height: 1px;
    background: rgba(43, 43, 43, 0.8);
    margin: 4px 12px;
    flex-shrink: 0;
}

.sidebar-mode-wrap {
    padding: 14px 16px;
    border-top: 1px solid rgba(43, 43, 43, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-mode-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}

/* ── Browse page hero-to-rows section label ────────────── */
.browse-section-header {
    padding: 32px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 28px;
}

.browse-section-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.browse-section-header h1::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 1.8rem;
    background: #f96d00;
    border-radius: 3px;
    flex-shrink: 0;
}

.browse-section-header p {
    color: rgba(255,255,255,0.45);
    font-size: 0.92rem;
    padding-left: 17px;
}

/* Anime row injected on indexMain: discovery-style image backdrop */
.anime-spawned-row {
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: clip;
    padding: 0 16px 10px;
    margin: 10px 0 18px;
    background: #0c0c0c;
}

.anime-row-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    filter: blur(4px);
    transform: scale(1.04);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.42s ease, background-image 0.42s ease;
}

.anime-row-bg.active {
    opacity: 0.40;
}

.anime-spawned-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50) 0%,
        rgba(0,0,0,0.30) 52%,
        rgba(0,0,0,0.10) 100%
    );
    z-index: 0;
}

.anime-spawned-row .row-header,
.anime-spawned-row .horizontal-scroll-row {
    position: relative;
    z-index: 1;
}

.anime-spawned-row .row-header {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 18px 0 10px;
    margin: 0 0 14px;
    backdrop-filter: none;
}

.anime-spawned-row .row-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.anime-spawned-row .row-title::before {
    content: '';
    position: static;
    width: 4px;
    height: 1rem;
    border-radius: 3px;
    background: #f96d00;
    flex-shrink: 0;
}

.anime-spawned-row .horizontal-scroll-row {
    margin-bottom: 6px;
    padding-top: 0;
}

/* Row header flex alignment */
.row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.row-header .row-title {
    margin-bottom: 0;
}


.row-arrows {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.row-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.75);
    font-size: 1.3rem;
    line-height: 0.86;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    padding: 0 0 5px;
    user-select: none;
}

.row-arrow-btn:hover {
    background: rgba(249, 109, 0, 0.18);
    border-color: #f96d00;
    color: #f96d00;
}

/* --- THE KINOPOISK NAVBAR --- */
.navbar {
    position: fixed;
    top: 0;
    left: max(220px, calc(50vw - 890px));
    right: max(0px, calc(50vw - 1110px));
    width: auto;
    max-width: 1780px;
    margin: 0;
    height: 68px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    border-bottom: 1px solid rgba(43,43,43,1);
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(12px);
    z-index: 1200;
    transition: background 0.4s ease;
}

/* Navbar inline page links */
.navbar-page-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    justify-content: space-between;
    display: none;
}

.navbar-page-links a {
    display: block;
    padding: 6px 13px;
    border-radius: 6px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.18s, background 0.18s;
}

.navbar-page-links a:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.navbar-page-links a.navbar-link-active {
    color: #f96d00;
    background: rgba(249,109,0,0.10);
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-right: 40px;
    cursor: pointer;
}

.logo span {
    font-weight: 100;
    color: #ccc;
}

.nav-links {
    display: none !important;
}

.nav-links.active {
    display: none !important;
}

@keyframes navUnravel {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-close-item {
    width: 100%;
    margin-bottom: 8px;
}

.nav-close-btn {
    width: 100%;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid #333;
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-close-btn:hover {
    background: rgba(40, 40, 40, 0.9);
    border-color: #f96d00;
}

.nav-overlay { display: none !important; }

.nav-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-links a:hover, .nav-links a.active {
    color: #fff;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nav-links li {
    width: 100%;
}

.nav-links li:last-child a {
    border-bottom: none;
}

.nav-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.logo-container,
.logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-link {
    text-decoration: none;
    display: none;
}

/* Search Bar */
.search-wrapper {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.search-box {
    position: relative;
    width: 50%;
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid #1e1e1e;
    border-radius: 36px;
    padding: 6px 15px;
    display: flex;
    align-items: center;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
    z-index: 1001;
}

.search-box.expanded {
    border-color: #f96d00 !important;
    width: 100%;
    position: absolute;
    border: 1px solid #333;

    right: 0;
    left: auto;
        background: rgba(20, 20, 20, 0.9) !important;
}

.search-wrapper.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 24px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.search-wrapper.search-overlay .search-box {
    position: relative;
    width: 90vw;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.search-wrapper.search-overlay .search-results-menu {
    position: relative;
    width: 90vw;
    left: auto;
    right: auto;
    margin-top: 12px;
    max-height: calc(100vh - 140px);
}

.search-box input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    outline: none !important;
    width: 100%;
}

/* Search Results Dropdown */
.search-results-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: min(520px, 90vw);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    max-height: 480px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.search-results-menu.search-results-modal {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    /* width: min(720px, 92vw); */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100vh - 130px);
    z-index: 16000;
}

.search-results-menu.active {
    display: block;
}

.search-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.search-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-item img {
    width: 50px !important;
    height: 75px !important;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.search-info h5 {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-info p {
    margin: 4px 0 0;
    color: #888;
    font-size: 0.8rem;
}

.search-results-menu::-webkit-scrollbar {
    width: 6px;
}

.search-results-menu::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

/* Account Dropdown */
.account-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 20px;
    transition: background 0.3s;
    z-index: 2001;
    position: relative;
}

.account-trigger:hover {
    background: rgba(255,255,255,0.1);
}

.grey-profile-pic, .large-profile-icon {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.grey-profile-pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #333;
    border: 1px solid #444;
    flex-shrink: 0;
    cursor: pointer;
}

.large-profile-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #333;
    border: 2px solid #f96d00;
}

.account-dropdown {
    position: absolute;
    top: 55px;
    right: 0;
    width: 220px;
    background: #141414;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 1000;
}

.account-dropdown.active {
    display: flex;
    animation: dropdownUnravel 0.3s ease-out;
}

@keyframes dropdownUnravel {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Notification bell ───────────────────────────────────────────── */
.notif-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: background 0.3s;
    flex-shrink: 0;
}

.notif-trigger:hover {
    background: rgba(255,255,255,0.08);
}

.notif-bell-icon {
    width: 21px;
    height: 21px;
    color: #ccc;
    transition: color 0.2s;
}

.notif-trigger:hover .notif-bell-icon {
    color: #fff;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #f96d00;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid #0c0c0c;
    pointer-events: none;
}

.notif-badge.hidden {
    display: none;
}

.notif-bell-icon.notif-pulsing {
    animation: notif-bell-pulse 2s ease-in-out infinite;
}

@keyframes notif-bell-pulse {
    0%, 100% {
        fill: #ccc;
        filter: drop-shadow(0 0 2px rgba(204, 204, 204, 0.4));
    }
    50% {
        fill: #f96d00;
        filter: drop-shadow(0 0 6px rgba(249, 109, 0, 0.8));
    }
}

.notif-dropdown {
    position: absolute;
    top: 45px;
    right: -6px;
    width: 320px;
    max-height: 420px;
    background: #141414;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    display: none;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 1000;
}

.notif-dropdown.active {
    display: flex;
    animation: dropdownUnravel 0.3s ease-out;
}

.notif-list {
    overflow-y: auto;
    max-height: 340px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-empty {
    color: rgba(255,255,255,0.35);
    font-size: 0.82rem;
    text-align: center;
    padding: 30px 10px;
    margin: 0;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.notif-item:hover {
    background: rgba(255,255,255,0.05);
}

.notif-item.unread {
    background: rgba(249,109,0,0.08);
}

.notif-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(249,109,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #f96d00;
}
.notif-item-icon svg {
    width: 18px;
    height: 18px;
}

.notif-item-body {
    min-width: 0;
    flex: 1;
}

.notif-item-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-item-time {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
}

.stat-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #aaa;
    margin: 8px 0;
}

.drop-link {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 0;
}

.drop-link:hover {
    color: #f96d00;
}

.login-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-code-row.hidden {
    display: flex !important;
    margin-bottom: 15px;
    overflow: hidden;
}

.login-code-row span {
    color: #fff;
}

.code-visibility-toggle {
    width: 32px;
    height: 32px;
    border: none !important;
    background: transparent !important;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.code-visibility-toggle svg {
    width: 20px;
    height: 20px;
}

.code-visibility-toggle:hover {
    color: #f96d00;
}

.code-visibility-toggle svg {
    width: 20px;
    height: 20px;
}

.code-visibility-toggle:hover {
    color: #f96d00;
}

.link-disabled {
    color: #555 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}

.drop-link[style*="display: none"] {
    margin: 0;
    padding: 0;
}

/* Logo Images */
.logo-img {
    height: 50px;
}

.logo-imgS {
    display: none;
    height: 30px;
}

/* Hamburger Menu — hidden in favour of left sidebar */
.hamburger {
    display: none !important;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background-color: white;
    transition: 0.3s;
}

.toggle-burger span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle-burger span:nth-child(2) {
    opacity: 0;
}

.toggle-burger span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Buttons */
.btn-save {
    background: #f96d00;
    color: white;
    border: none;
    padding: 12px 0;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(249, 109, 0, 0.3);
    transition: background 0.2s ease;
}

.btn-save:hover {
    background: #ff7d1a;
}

.btn-small {
    background: #f96d00;
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-top: 0;
    transition: all 0.2s;
}

.btn-small:hover {
    background: #ff7d16;
    transform: translateY(-1px);
}

.btn-small:active {
    transform: translateY(0);
}

.btn-unavailable {
    background-color: #555 !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    pointer-events: none;
    border: 1px solid #444 !important;
}

/* Profile Upload */
.profile-upload-wrapper {
    position: relative;
    display: inline-block;
}

.edit-pfp-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #f96d00;
    border: none;
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Sidebar Styles */
.account-sidebar {
    position: fixed;
    right: -350px;
    top: 0;
    width: 300px;
    height: 100%;
    background: #111;
    transition: right 0.4s ease;
    z-index: 10000;
}

.account-sidebar.active {
    right: 0 !important;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    margin-bottom: 20px;
}

.header-text-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar-header .large-profile-icon {
    width: 70px;
    height: 70px;
}

/* Settings Modal */
.settings-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 21000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    transition: all 0.3s ease;
}

.settings-modal-overlay.active {
    display: flex;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

#watch2getherModal .w2g-content {
    animation: slideUpModal 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#createThreadModal,
#addMovieModal {
    background: transparent;
    backdrop-filter: none;
}
.settings-content {
    background: #141414;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    padding: 0;
    border-radius: 12px;
    border: 1px solid #333;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
}

/* Settings modal layout fixes */
#settingsModal .settings-content {
    padding: 24px 30px 30px;
    max-height: 92vh;
    overflow-y: auto;
}

#settingsModal .close-settings {
    position: static;
    margin-left: auto;
    top: auto;
    right: auto;
    transform: none;
    /* background: rgba(0, 0, 0, 0.5); */
    color: #fff;
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border-bottom: 1px solid #2a2a2a;
    position: relative;
}

/* Report a Bug/Request Anime/Contact modals only - scoped rather than changing .modal-header
   globally, since the Settings modal (and anything else reusing that class) still wants it. */
.footer-form-content .modal-header {
    background: none;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

.modal-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    color: #888;
    margin: 6px 0 0 0;
}

.modal-uid {
    font-size: 0.75rem;
    color: #666;
    margin-top: 4px;
}

.close-settings {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease, background 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.close-settings svg {
    width: 18px;
    height: 18px;
}

.close-settings:hover {
    color: #f96d00 !important;
    /* background: rgba(255, 255, 255, 0.1); */
}

/* Add More Button in Header */
.btn-add-more {
    background: linear-gradient(135deg, #f96d00 0%, #e85d00 100%);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 109, 0, 0.4);
    margin-right: 50px;
}

.btn-add-more:hover {
    background: linear-gradient(135deg, #ff7d10 0%, #f96d00 100%);
    box-shadow: 0 4px 16px rgba(249, 109, 0, 0.6);
    transform: translateY(-1px);
}

/* Content Padding */
#addMoviesGrid {
    padding: 20px 30px;
    flex: 1;
    overflow-y: auto;
}

.settings-content > h2 {
    color: #f96d00;
}

.settings-section h3 {
    color: #f96d00;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
    align-items: stretch;
}

/* Grid items stretch to the row's tallest height by default -- giving each column a visible
   card boundary makes that equal height obvious instead of the shorter side just looking cut
   off against the modal's plain background. */
.settings-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    height: 100%;
}

.setting-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.hero-audio-setting{
    padding-left: 12px;
}
.setting-item label {
    font-size: 13px;
    color: #999;
    margin-bottom: 8px;
}
.setting-item input[type="text"],
.setting-item input[type="password"],
.setting-item input[type="email"],
.setting-item input[type="search"] {
    background: #222;
    border: 1px solid #444;
    padding: 10px;
    color: white;
    border-radius: 4px;
    width: 100%;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.setting-item input[type="text"]:focus,
.setting-item input[type="password"]:focus,
.setting-item input[type="email"]:focus,
.setting-item input[type="search"]:focus {
    outline: none;
    border-color: #f96d00;
}

.setting-item input[type="text"]::placeholder,
.setting-item input[type="password"]::placeholder,
.setting-item input[type="email"]::placeholder,
.setting-item input[type="search"]::placeholder {
    color: #666;
}

.setting-item input + input {
    margin-top: 8px;
}

.setting-hint {
    font-size: 12px;
    color: #999;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

#watch2getherModal .setting-hint {
    color: #aaa;
}

/* Watch2Gether modal -- its own visual identity, deliberately not settings-panel styling */
#watch2getherModal .w2g-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #141414 50%, #0f0f0f 100%), radial-gradient(circle at 30% 0%, rgba(249, 109, 0, 0.12) 0%, transparent 55%);
    background-color: #141414;
    width: 92%;
    max-width: 750px;
    max-height: 88vh;
    padding: 32px 28px 28px;
    border-radius: 18px;
    border: 1px solid rgba(249, 109, 0, 0.2);
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "hero hero"
        "status status"
        "left right"
        "left right"
        "left right";
    gap: 16px;
}

#watch2getherModal .w2g-content::-webkit-scrollbar {
    width: 8px;
}

#watch2getherModal .w2g-content::-webkit-scrollbar-track {
    background: transparent;
}

#watch2getherModal .w2g-content::-webkit-scrollbar-thumb {
    background: rgba(249, 109, 0, 0.3);
    border-radius: 4px;
}

#watch2getherModal .w2g-content::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 109, 0, 0.5);
}
#watch2getherModal .w2g-hero {
    grid-area: hero;
}
#watch2getherModal #watch2getherHostingStatus {
    grid-area: status;
}
#watch2getherModal .w2g-card {
    grid-area: left;
}
/* Pins each stacked "left" column card (Your Code, Host a Session, Host Public Session,
   Add a Friend) to its own row instead of letting them all default to the same "left" area
   and overlap. Counted by :nth-of-type(N), N = card's position among ALL <div> children of
   .w2g-content (not just .w2g-card ones) - div #1 is w2g-hero, #2 is watch2getherHostingStatus,
   so the cards start at #3. Add another rule here (and another "left friends" row above) if a
   5th card is ever added to this column. */
#watch2getherModal .w2g-card:nth-of-type(3) {
    grid-row: 3;
}
#watch2getherModal .w2g-card:nth-of-type(4) {
    grid-row: 4;
}
#watch2getherModal .w2g-card:nth-of-type(5) {
    grid-row: 5;
}
#watch2getherModal .w2g-card-friends {
    grid-area: right;
    grid-row: 3 / span 3;
    max-height: 320px;
    overflow-y: auto;
}
#watch2getherModal .w2g-card-friends .w2g-friends-list {
    max-height: 250px;
    overflow-y: auto;
}
/* Add a Friend, when placed above the Friends list (watch2getherPublic.html), takes the
   top slot of the "right" column and pushes Friends into the remaining rows so the two
   cards don't land in the same grid cell and render on top of each other. */
#watch2getherModal .w2g-card-addfriend-top {
    grid-area: right;
    grid-row: 3;
}
#watch2getherModal .w2g-card-addfriend-top + .w2g-card-friends {
    grid-row: 4 / span 2;
    max-height: 100%;
}
#watch2getherModal .close-settings {
    position: absolute;
    top: 16px;
    right: 16px;
    /* background: rgba(255, 255, 255, 0.06); */
    /* border: 1px solid rgba(255, 255, 255, 0.12); */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}
#watch2getherModal .close-settings:hover {
    /* background: rgba(255, 255, 255, 0.1); */
    border-color: rgba(249, 109, 0, 0.3);
    color: #f96d00;
}

.w2g-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(249, 109, 0, 0.08) 0%, rgba(249, 109, 0, 0.03) 100%);
    border: 1px solid rgba(249, 109, 0, 0.25);
    border-radius: 14px;
    padding-right: 30px;
}
.w2g-hero-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f96d00;
    background: rgba(249, 109, 0, 0.12);
    border: 1px solid rgba(249, 109, 0, 0.25);
    border-radius: 10px;
}
.w2g-hero-icon svg {
    width: 28px;
    height: 28px;
}
.w2g-hero-text h2 {
    margin: 0 0 4px 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}
.w2g-hero-sub {
    margin: 0;
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.4;
}

.w2g-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 18px;
    transition: all 0.2s ease;
}
.w2g-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(249, 109, 0, 0.3);
}
.w2g-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.w2g-card-icon {
    display: flex;
    color: #f96d00;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.w2g-card-icon svg {
    width: 100%;
    height: 100%;
}
.w2g-card-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.w2g-card input[type="text"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 11px 14px;
    color: white;
    border-radius: 9px;
    width: 100%;
    font-size: 0.88rem;
    transition: all 0.2s;
}
.w2g-card input[type="text"]:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.w2g-card input[type="text"]:focus {
    outline: none;
    border-color: #f96d00;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(249, 109, 0, 0.1);
}
.w2g-card input[type="text"]::placeholder {
    color: #666;
}
.w2g-inline-form {
    display: flex;
    gap: 8px;
}
.w2g-inline-form input {
    flex: 1;
    min-width: 0;
}
.w2g-inline-form .btn-small {
    flex-shrink: 0;
    width: auto;
    padding: 0 16px;
}
#watch2getherOwnCode {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #f96d00 !important;
    cursor: text;
}
#watch2getherFriendCode,
#watch2getherAddFriendCode {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Currently-hosting live status card */
.w2g-live-card {
    background: rgba(249, 109, 0, 0.08);
    border: 1px solid rgba(249, 109, 0, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
}
.w2g-live-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.w2g-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f96d00;
    box-shadow: 0 0 0 rgba(249, 109, 0, 0.6);
    animation: w2gPulse 1.8s infinite;
    flex-shrink: 0;
}
@keyframes w2gPulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 109, 0, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(249, 109, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 109, 0, 0); }
}
.w2g-live-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}
.w2g-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.w2g-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    font-size: 12px;
    color: #eee;
}
.w2g-chip .w2g-avatar,
.w2g-chip .w2g-avatar-fallback {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.w2g-chip-name {
    white-space: nowrap;
}
.w2g-chip-give {
    background: rgba(249, 109, 0, 0.15);
    border: 1px solid rgba(249, 109, 0, 0.4);
    color: #f96d00;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    padding: 3px 8px;
}
.w2g-chip-give:hover {
    background: rgba(249, 109, 0, 0.3);
}
.w2g-chip-label {
    font-size: 10px;
    font-weight: 700;
    color: #4caf50;
    white-space: nowrap;
}
.w2g-chip-kick {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 0 0 2px;
}
.w2g-chip-kick:hover {
    color: #ff3b3b;
}
.w2g-live-card .btn-small {
    width: 100%;
}

/* Friend row: greyed-out Invite button when they're already in the active session */
.w2g-friend-row .btn-small:disabled {
    opacity: 0.4;
    cursor: default;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #888;
}

/* Persistent host bar -- shows on every page while hosting, like the viewer's status bar */
.w2g-hostbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 23000;
    background: #141414;
    border: 1px solid rgba(249, 109, 0, 0.35);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    width: 300px;
    max-width: calc(100vw - 40px);
    overflow: hidden;
}
.w2g-hostbar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    background: rgba(249, 109, 0, 0.08);
}
.w2g-hostbar-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex: 1;
}
.w2g-hostbar-count {
    font-size: 11px;
    color: #f96d00;
    background: rgba(249, 109, 0, 0.15);
    border-radius: 999px;
    padding: 1px 7px;
}
.w2g-hostbar-body {
    display: none;
    padding: 10px 12px;
    max-height: 320px;
    overflow-y: auto;
}
.w2g-hostbar.expanded .w2g-hostbar-body {
    display: block;
}
.w2g-hostbar-body .w2g-participants {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 8px;
}
.w2g-hostbar-body .w2g-chip {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px 5px 5px;
}
.w2g-hostbar-body .w2g-chip-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w2g-hostbar-body .btn-small {
    width: 100%;
}

.w2g-friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 297.328px;
    overflow-y: auto;
}
.w2g-friend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.w2g-avatar,
.w2g-avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}
.w2g-avatar {
    object-fit: cover;
    background: #222;
}
.w2g-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #f96d00;
    background: rgba(249, 109, 0, 0.14);
}
.w2g-friend-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.w2g-friend-name {
    font-size: 13px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w2g-friend-name.online {
    color: #6dcff6;
    font-weight: 600;
}
.w2g-friend-status {
    font-size: 11px;
    color: var(--text-secondary, #888);
}
.w2g-friend-row.offline {
    opacity: 0.6;
}
.w2g-friend-row .btn-small {
    width: auto;
    flex-shrink: 0;
    padding: 0 14px;
}

/* Steam-style avatar corner status badge */
.w2g-avatar-badge {
    position: relative;
    flex-shrink: 0;
    display: flex;
}
.w2g-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
    border: 2px solid #141414;
}
.w2g-status-dot.online {
    background: #4caf50;
}
.w2g-group-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #888);
    margin: 12px 0 6px;
    padding: 0 2px;
}
.w2g-group-header:first-child {
    margin-top: 0;
}

/* Floating Friends overlay (Shift+Tab) -- Steam-style, freely draggable */
#w2gFloatingFriends {
    position: fixed;
    top: 80px;
    right: 24px;
    left: auto;
    width: 260px;
    max-height: 420px;
    background: #141414;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    z-index: 24000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#w2gFloatingFriends.active {
    display: flex;
}
.w2g-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(249, 109, 0, 0.1);
    border-bottom: 1px solid #2a2a2a;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: grab;
    user-select: none;
}
.w2g-float-header:active {
    cursor: grabbing;
}
.w2g-float-close {
    background: none;
    border: none;
    color: #999;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.w2g-float-close svg {
    width: 16px;
    height: 16px;
}
.w2g-float-close:hover {
    color: #fff;
}
.w2g-float-body {
    padding: 10px 12px;
    overflow-y: auto;
}
.w2g-float-body .w2g-friend-row .btn-small {
    padding: 0 10px;
    font-size: 11px;
}

/* Shift+? shortcuts helper */
.w2g-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 25000;
    display: none;
    align-items: center;
    justify-content: center;
}
.w2g-shortcuts-overlay.active {
    display: flex;
}
.w2g-shortcuts-box {
    background: #141414;
    border: 1px solid #333;
    border-radius: 12px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.w2g-shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.w2g-shortcuts-list {
    padding: 10px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.w2g-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #ccc;
}
.w2g-shortcut-keys kbd {
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: #f96d00;
    font-family: 'Courier New', monospace;
}

/* Beta Notice */
.beta-notice-box {
    margin-top: 25px;
    padding: 15px;
    background: #000;
    border: 1px solid #f96d00;
    border-radius: 8px;
    font-size: 13px;
    color: #ccc;
    line-height: 1.5;
}

.beta-badge {
    background: #f96d00;
    color: #000;
    font-weight: bold;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 10px;
}

.beta-notice-box ul {
    margin: 10px 0;
    padding-left: 18px;
    color: #888;
}

.beta-small {
    font-size: 11px;
    color: #555;
    font-style: italic;
    margin-top: 10px;
}

/* Blurred Preview */
.blurred-preview {
    position: relative;
    width: 100%;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 5px;
}

.blurred-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
}

.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.blur-overlay span {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff;
    border: 1px solid #fff;
    padding: 4px 10px;
}

/* --- HERO BANNER --- */
.hero {
    /* min-height, not height: the box used to be pinned to a pure vh guess
       with its content layer pulled out of flow (position:absolute;inset:0
       on .hero-main-body below) so the two had zero relationship -- on a
       short/landscape viewport vh shrinks the box while the title/meta/desc
       stay full size, and overflow:hidden below just chops off whatever
       doesn't fit. min-height + height:auto + an in-flow content layer lets
       the box grow to whatever its content actually needs, using vh only as
       a floor for how tall it looks when content doesn't need the room. */
    min-height: clamp(420px, 65vh, 760px);
    height: auto;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?q=80&w=2070&auto=format&fit=crop') center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ─── indexMain.html: full-bleed trailer-background hero ─── */
.hero.hero-main-page {
    /* height: 88vh; */
    max-height: 960px;
    background: #000;
    overflow: hidden;
}

/* Raising the .hero-left-fade gradient to fully opaque at its bottom stop wasn't
   enough -- the line survived, so it's not the video content showing through a
   translucent overlay. More likely a GPU compositing seam where the scaled/
   transformed trailer iframe layer meets this box's overflow:hidden clip edge
   (a known hairline-seam issue with transformed layers on a clipped boundary).
   A solid mask pinned exactly to the bottom edge, above every other hero layer,
   hides it regardless of which of those it actually is. */
.hero.hero-main-page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #000;
    z-index: 25;
    pointer-events: none;
}

/* Trailer iframe covers entire hero */
.hero-bg-trailer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg-trailer iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* object-fit doesn't reliably apply to iframes (it's a replaced-element property, and
       browser support for iframes is patchy) - this was actually relying entirely on the flat
       scale(1.22) for overscan, same fragile fixed-multiplier issue as .hero-trailer-side
       iframe had (see that rule's own comment for the full "always-cover 16:9" derivation).
       Same fix here: width/height as one valid 16:9 pair in vw units, min-width/min-height as
       the other valid pair in vh units - these two are mathematically coupled (whichever one
       binds is decided by the same viewport-aspect comparison on both axes simultaneously), so
       the result is always an exact 16:9 box at least as large as the full viewport, guaranteed
       to cover this element (which is already inset:0 on the hero, i.e. viewport-width-ish) in
       both dimensions regardless of screen size or aspect ratio.
    */
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
    opacity: 0;
    /* Delayed relative to .hero-bg-poster's own (shorter, undelayed) fade-out just above -
       the poster dims out first, THEN the trailer fades in over it, instead of a flat
       crossfade where both happen at once. */
    transition: opacity 0.6s ease 0.25s;
}

.hero-bg-trailer iframe.trailer-ready {
    opacity: 1;
}

/* Poster shown behind the trailer iframe (z-index 0, iframe is unset/above it in DOM paint
   order) so there's never a flat-black gap while YouTube's iframe/API spins up - see
   setHeroTrailerSource's own comment. Blurred + darkened since this is a portrait poster
   crop, not a real 16:9 backdrop - reads as an intentional cinematic blur-behind rather than
   a wrong-aspect-ratio image. Fades out slightly BEFORE the iframe (no transition-delay here,
   a longer one on the iframe below) so there's a brief near-black dip between "poster visible"
   and "trailer visible" instead of a flat crossfade, per how this was asked for: dim, then
   the trailer loads in, then undims. */
.hero-bg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: blur(20px) brightness(0.55);
    transform: scale(1.1); /* hides the blur's own soft edge - also the zoom animation's start point */
    transition: opacity 0.45s ease;
    opacity: 1;
}
/* Slow Netflix-style Ken Burns creep while the poster is standing in for the not-yet-loaded
   trailer, instead of just sitting static - restarted per slide by toggling this class off and
   back on (see restartHeroPosterZoom in mainPageControls.js), since re-setting .src alone doesn't
   replay a finished keyframe animation. */
.hero-bg-poster.hero-poster-zoom {
    animation: heroPosterZoom 12s ease-out forwards;
}
@keyframes heroPosterZoom {
    from { transform: scale(1.1); }
    to { transform: scale(1.22); }
}
.hero-bg-poster.hero-poster-hidden {
    opacity: 0;
}

/* Gradient overlays: left-heavy for readability + bottom fade.
   The bottom fade used to start at only 75% black (0% stop), which let a sliver
   of whatever the trailer iframe's own bottom edge looked like -- a bright video
   frame, or just a compositing seam from the scaled/inset iframe -- show through
   as a thin light line right at the hero's bottom border. Fully opaque for the
   first stretch, then fading up, guarantees nothing behind it can show there. */
.hero-left-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to right, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0.1) 68%, transparent 100%),
        linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 10%, transparent 45%);
    pointer-events: none;
}

/* Content sits above overlays. In-flow (not position:absolute;inset:0) on
   purpose -- this is what actually drives .hero's height now (see .hero's
   min-height/height:auto comment above). The background layers
   (.hero-bg-trailer/.hero-overlay/.hero-left-fade, still inset:0 on .hero)
   stretch to cover whatever height this content ends up needing. */
.hero-main-body {
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 5% 40px 6%;
}

.hero-main-left {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Override .hero-content base padding when inside hero-main-page */
.hero.hero-main-page .hero-content {
    flex: unset;
    padding: 0;
}

.hero-spotlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f96d00;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero.hero-main-page .hero-title {
    font-size: clamp(2.5rem, 4.8vw, 4.6rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 28px rgba(0,0,0,0.9);
    text-transform: uppercase;
    margin: 0;
    transition: opacity 0.3s ease;
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-meta-rating { color: #f5c518; font-weight: 700; font-size: 1rem; }
.hero-meta-dot    { color: rgba(255,255,255,0.28); font-size: 1.1rem; }
.hero-meta-year,
.hero-meta-runtime { color: rgba(255,255,255,0.62); font-size: 0.9rem; }

.hero.hero-main-page .hero-desc {
    color: rgba(255,255,255,0.70);
    font-size: 0.94rem;
    line-height: 1.66;
    max-width: 450px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Poster card — right side of hero */
.hero-main-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Always vertically centered between the top and bottom of
       .hero-main-body (its flex parent) -- no per-breakpoint top/bottom
       offsets or margins, those are exactly what fought this before
       (a broken clamp() permanently stuck at 259px, then a media-query
       bottom/right/scale hack). No hardcoded offsets, so nothing to
       conflict with center as .hero-main-body's height changes. */
    align-self: center;
    gap: 0;
    flex-shrink: 0;
    margin-right: 2.2%;
    isolation: isolate;
    pointer-events: none;
}

.hero-main-poster::before {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -30px;
    width: 310px;
    height: 420px;
    border-radius: 28px;
    background: radial-gradient(86% 80% at 70% 68%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 54%, rgba(0, 0, 0, 0.08) 74%, rgba(0, 0, 0, 0) 100%);
    filter: blur(18px);
    z-index: 0;
    pointer-events: none;
}

.hero-main-poster::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 14px;
    width: 94px;
    height: 82%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
    z-index: 0;
    pointer-events: none;
}

.hero-main-poster img {
    position: relative;
    z-index: 1;
    width: 216px;
    height: 324px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow:
        0 44px 110px rgba(0, 0, 0, 0.62),
        0 22px 48px rgba(0, 0, 0, 0.46),
        inset 0 -52px 48px rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255,255,255,0.16);
    background: #0b0b0b;
    filter: saturate(0.82) brightness(0.90) contrast(0.93);
    opacity: 0.94;
}

.hero-poster-label {
    display: none;
}

/* .hero's height is now content-driven (min-height + height:auto, see
   above) so this no longer needs to force a box height for landscape phones
   -- the box already grows to fit. This just keeps proportions sane
   (smaller title/desc/poster) when there isn't much vertical room to work
   with, purely cosmetic. 
@media (max-height: 500px) and (orientation: landscape) {
    .hero.hero-main-page .hero-title {
        font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    }
    .hero.hero-main-page .hero-desc {
        -webkit-line-clamp: 2;
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .hero-main-left {
        gap: 8px;
    }
    .hero-meta-row {
        font-size: 0.8rem;
    }
    .hero-main-poster img {
        width: 110px;
        height: 165px;
    }
}
*/
/* ─── Two-panel discovery section (Trending + Schedule) ─── */
/* ── Discovery panels ──────────────────────────────────────────────── */
.discovery-two-col {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    margin-top: 30px;
    margin-bottom: 8px;
}

.discovery-two-col > .discovery-panel {
    flex: 0 0 48.5%;
    max-width: 48.5%;
    min-width: 0;
}

.discovery-panel {
    position: relative;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: clip; /* clips bg image but doesn't block child scroll containers */
    min-height: 240px;
}

/* Blurred backdrop image */
.discovery-panel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    z-index: 0;
    opacity: 0.42;
    transition: background-image 0.5s;
}

/* Bottom-heavy gradient: fades content in from black at bottom */
.discovery-panel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.45) 48%,
        rgba(0,0,0,0.92) 78%,
        #000 100%
    );
}

.discovery-panel-content {
    position: relative;
    z-index: 1;
    padding: 18px 16px 14px;
}

.discovery-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.discovery-panel-title {
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
}

.discovery-accent { color: #f96d00; }

.view-all-link {
    font-size: 0.77rem;
    color: rgba(255,255,255,0.38);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s;
}
.view-all-link:hover { color: #f96d00; }

/* Your Comments widget: anime/movie mode switch, replaces the old "Forum →"
   link now that the panel shows the user's own comments instead of forum
   threads. */
.cp-mode-switch {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 2px;
    flex-shrink: 0;
}
.cp-mode-btn {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    background: none;
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.cp-mode-btn:hover { color: #fff; }
.cp-mode-btn.active {
    background: #f96d00;
    color: #0c0c0c;
}

/* ── Disc cards — shared by trending + schedule ─────────────────────── */
.trending-cards-row,
.schedule-cards-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.trending-cards-row::-webkit-scrollbar,
.schedule-cards-row::-webkit-scrollbar { display: none; }

.trending-genre-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    margin-top: 14px;
    min-height: 34px;
}

.trending-genre-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 10px;
    border-radius: 36px;
    background: rgba(100, 106, 114, 0.1);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.trending-genre-mark {
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: var(--genre-accent, #f96d00);
    flex-shrink: 0;
    box-shadow: 0 0 10px color-mix(in srgb, var(--genre-accent, #f96d00) 45%, transparent);
}

.trending-genre-text {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.90);
    white-space: nowrap;
}

.disc-card {
    flex-shrink: 0;
    width: 112px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    text-decoration: none;
    display: block;
    background: #111;
}
.disc-card:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}

.disc-card-img {
    width: 100%;
    height: 158px;
    object-fit: cover;
    display: block;
}

/* Card bottom gradient */
.disc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.88) 100%);
    pointer-events: none;
}

/* Rank number — top left */
.disc-card-num {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 1.55rem;
    font-weight: 900;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
    line-height: 1;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}
/* 
.disc-card.rank-top-1 .disc-card-num { color: #f96d00; }
.disc-card.rank-top-2 .disc-card-num { color: rgba(249,109,0,0.72); }
.disc-card.rank-top-3 .disc-card-num { color: rgba(249,109,0,0.50); } */

.disc-card.rank-top-1 .disc-card-num { color: #ffffff; }
.disc-card.rank-top-2 .disc-card-num { color: rgba(255,255,255,0.9); }
.disc-card.rank-top-3 .disc-card-num { color: rgba(255,255,255,0.8); }
/* Target BOTH rows exclusively on the personal list page */
body.personal-list-page .trending-cards-row .disc-card-num,
body.personal-list-page .schedule-cards-row .disc-card-num {
    display: block !important;
    color: transparent !important;
    text-shadow: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Broadcast time badge — top right (schedule cards) */
.disc-card-time {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.60rem;
    font-weight: 800;
    color: #f96d00;
    background: rgba(0,0,0,0.72);
    border-radius: 4px;
    padding: 2px 5px;
    z-index: 2;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

/* Title + meta at card bottom */
.disc-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 7px 7px;
    z-index: 2;
}
.disc-card-title {
    font-size: 0.70rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.disc-card-meta {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.48);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unavailable card — greyed out, not clickable */
.disc-card.sch-unavailable {
    opacity: 0.30;
    filter: grayscale(0.85);
    pointer-events: none;
}
.disc-card-unavail {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 3px 6px;
    z-index: 3;
    white-space: nowrap;
}

/* ── Weekly schedule day tabs ─────────────────────────────────────── */
.schedule-day-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.schedule-day-tab {
    padding: 4px 9px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.42);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.schedule-day-tab:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.schedule-day-tab.sch-active { background: #f96d00; color: #fff; border-color: #f96d00; }

/* ── Full Calendar page ──────────────────────────────────────────── */
.calendar-page-wrap {
    padding: 60px 4% 60px;
}

.calendar-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 26px;
}

.calendar-page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.calendar-page-subtitle {
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    margin: 6px 0 0;
}

.calendar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-nav-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.calendar-nav-btn:hover { border-color: #f96d00; color: #f96d00; }

.calendar-range-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    min-width: 150px;
    text-align: center;
}

.cal-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.cal-month-weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    padding-bottom: 4px;
}

.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.cal-month-cell {
    position: relative;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    min-height: 84px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    transition: border-color 0.15s, background 0.15s;
}

.cal-month-cell.has-items {
    cursor: pointer;
}

.cal-month-cell.has-items:hover {
    border-color: rgba(249,109,0,0.45);
    background: #131313;
}

.cal-month-cell.other-month {
    opacity: 0.35;
}

.cal-month-cell.today {
    border-color: rgba(249,109,0,0.55);
    box-shadow: 0 0 0 1px rgba(249,109,0,0.25) inset;
}

.cal-month-daynum {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.cal-month-cell.today .cal-month-daynum { color: #f96d00; }

.cal-month-badge {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(249,109,0,0.14);
    color: #f96d00;
    border: 1px solid rgba(249,109,0,0.3);
}

.calendar-day-empty,
.calendar-day-loading {
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
    padding: 10px 4px;
    text-align: center;
}

/* ── Day popup (opened by clicking a date with releases) ───────────── */
.cal-day-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.cal-day-popup-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.cal-day-popup {
    width: 100%;
    max-width: 770px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.18s ease;
}

.cal-day-popup-overlay.open .cal-day-popup {
    transform: translateY(0) scale(1);
}

.cal-day-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cal-day-popup-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
}

.cal-day-popup-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.cal-day-popup-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.cal-day-popup-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 700px) {
    .calendar-page-header { flex-direction: column; align-items: flex-start; }
    .cal-month-cell { min-height: 64px; padding: 6px 4px; border-radius: 9px; }
    .cal-month-daynum { font-size: 0.7rem; }
    .cal-month-badge { font-size: 0.6rem; padding: 1px 6px; }
}
@media (max-width: 460px) {
    .cal-month-weekday { font-size: 0.6rem; }
    .cal-month-weekdays, .cal-month-grid { gap: 5px; }
    .cal-month-cell { min-height: 50px; padding: 4px 3px; }
}

/* Personal list discovery panels */
.personal-discovery-two-col .discovery-panel {
    min-height: 255px;
}

/* My List / My History no longer filter by mode (applyModeFilter is now a
   no-op in myList.js), so this switcher has nothing left to actually
   control -- hidden rather than left as a clickable control that does
   nothing when pressed. */
.personal-mode-pill {
    display: none;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #f96d00;
    border: 1px solid rgba(249, 109, 0, 0.45);
    background: rgba(249, 109, 0, 0.12);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.personal-mode-pill:hover {
    color: #ff8d3b;
    border-color: rgba(255, 141, 59, 0.66);
    background: rgba(249, 109, 0, 0.2);
}

.personal-mode-flyout {
    position: fixed;
    z-index: 100001;
    min-width: 140px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(249, 109, 0, 0.35);
    background: rgba(20, 20, 20, 0.97);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
    animation: personalModeFlyoutIn 0.18s ease;
}

.personal-mode-flyout.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.personal-mode-flyout.is-closing {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
}

@keyframes personalModeFlyoutIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.personal-mode-option {
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.personal-mode-option:hover,
.personal-mode-option:focus-visible {
    outline: none;
    background: rgba(249, 109, 0, 0.2);
    color: #ff9a51;
}

.personal-disc-card {
    cursor: pointer;
}

.personal-disc-card .disc-card-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    width: 25px;
    height: 25px;
    border: none !important;
    border-radius: 50%;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s, color 0.15s, background 0.15s;
}

.personal-disc-card .disc-card-remove-btn:hover {
    color: #e53935;
    background: rgba(0, 0, 0, 0.76);
    transform: scale(1.11);
}

.personal-disc-card .disc-card-remove-btn:focus,
.personal-disc-card .disc-card-remove-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.personal-discovery-empty {
    min-height: 158px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.82rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 16px;
}

.personal-discovery-empty a {
    color: #f96d00;
    text-decoration: none;
}


/* ── Page-load overlay (indexMain) ─────────────────────────────────────── */
.page-load-overlay {
    display: flex !important; /* visible by default — no display:none */
    flex-direction: column;
    gap: 20px;
    background: #000;
    z-index: 10100;
}

.page-load-label {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-top: 8px;
    font-family: inherit;
}

/* Greyed-out schedule items not found on TMDB */
.schedule-anime-item.sch-unavailable {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
    filter: grayscale(0.7);
    position: relative;
}

.schedule-anime-item.sch-unavailable:hover {
    background: transparent;
}

.sch-unavail-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   HOME WIDGETS — Quick Stats / Community Pulse / Random / News
   ══════════════════════════════════════════════════════════════ */

.home-widgets-area {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
    margin-bottom: 8px;
}

/* ── Quick Stats strip ──────────────────────────────────────── */
.qs-strip {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 20px;
}

.qs-strip-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.qs-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    flex-wrap: wrap;
}

.qs-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 20px;
}

.qs-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.qs-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
}

.qs-divider {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.qs-guest {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    padding: 0 8px;
}

.qs-skeleton {
    width: 200px;
    height: 28px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    animation: skeletonPulse 1.4s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
}

/* ── Split row (Community Pulse + Right column) ─────────────── */
.home-split-row {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.cp-panel {
    flex: 1 1 0;
    min-width: 0;
}

.home-widget-right-col {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Shared widget panel ────────────────────────────────────── */
.home-widget-panel {
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px 18px;
}

.home-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.home-widget-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Community Pulse ────────────────────────────────────────── */
.cp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-thread {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.cp-thread:hover {
    background: rgba(249,109,0,0.07);
    border-color: rgba(249,109,0,0.2);
}

.cp-thread-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cp-thread-gif {
    max-width: 100%;
    max-height: 160px;
    border-radius: 8px;
    display: block;
    margin: 2px 0 6px;
}

.cp-thread-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.38);
}

.cp-score { color: #f96d00; font-weight: 700; }
.cp-dot   { color: rgba(255,255,255,0.2); }

.cp-empty {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    padding: 10px 0;
}

/* ── Random Discovery panel ─────────────────────────────────── */
.rd-panel { flex-shrink: 0; }

.rd-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "dice copy"
        "btn btn";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
}

.rd-dice {
    grid-area: dice;
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
}

.rd-copy {
    grid-area: copy;
    min-width: 0;
}

.rd-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.38);
    margin: 0;
    line-height: 1.3;
}

.rd-btn {
    grid-area: btn;
    font-size: 0.8rem;
    padding: 8px 16px;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

/* ── Announcements panel ────────────────────────────────────── */
.ann-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ann-item {
    border-left: 2px solid #f96d00;
    padding-left: 10px;
}

.ann-date {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.32);
    margin-bottom: 2px;
    letter-spacing: 0.02em;
}

.ann-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #e8e8e8;
    margin-bottom: 3px;
}

.ann-body {
    font-size: 0.77rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
}

.hero-glass-container {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(30px);
    box-shadow: 0 0 80px 40px rgba(0, 0, 0, 0.95);
    position: static;
    margin-left: auto;
    transform: none;
}

.hero-content {
    flex: 1;
    padding: 60px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.hero-trailer-side {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-trailer-side iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* The classic "always-cover 16:9" pair: width/height as ONE valid 16:9 box in vw units,
       min-width/min-height as the OTHER valid 16:9 box in vh units. This is NOT the same as
       the previous attempt (width/height:100% + vh/vw mins) - mixing a container-relative base
       with viewport-relative mins left width and height governed by unrelated constraints, so
       the box could end up NOT actually 16:9 and still fall short in one dimension (confirmed
       live: still had black bars after that "fix"). These two pairs are mathematically coupled -
       whichever one wins is decided by the SAME width/height >=< comparison on both axes at
       once (100vw>=177.78vh iff 56.25vw>=100vh, since both reduce to the same viewport-aspect
       inequality), so the browser can never end up with a distorted, sub-16:9 result: it always
       resolves to an exact 16:9 box at least as large as the full viewport in both dimensions,
       which is always >= this panel's actual size. Excess is clipped by the container's own
       overflow:hidden - harmless, this is a background video with pointer-events disabled.
    */
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Used to have no fade at all - the iframe just appeared the instant its src was set,
       showing YouTube's own blank/loading frame (flat black) until playback actually started.
       Same delayed-relative-to-the-poster dim-then-reveal handoff as .hero-bg-trailer's iframe. */
    opacity: 0;
    transition: opacity 0.6s ease 0.25s;
}

.hero-trailer-side iframe.trailer-ready {
    opacity: 1;
}

/* Same poster-behind-the-iframe treatment as .hero-bg-trailer's version, sized for this
   panel instead of the full-bleed hero - see .hero-bg-poster's own comment for the reasoning. */
.hero-trailer-side .hero-bg-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: blur(10px) brightness(0.55);
    transform: scale(1.08);
    transition: opacity 0.45s ease;
    opacity: 1;
}
/* Same restartable Ken Burns creep as the full-bleed .hero-bg-poster - see its own comment. */
.hero-trailer-side .hero-bg-poster.hero-poster-zoom {
    animation: heroPosterZoomSide 12s ease-out forwards;
}
@keyframes heroPosterZoomSide {
    from { transform: scale(1.08); }
    to { transform: scale(1.2); }
}
.hero-trailer-side .hero-bg-poster.hero-poster-hidden {
    opacity: 0;
}

.hero-trailer-side::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0px rgba(0,0,0,0);
    transition: box-shadow 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.hero-trailer-side:hover::after {
    box-shadow: inset 0 0 100px 50px rgba(0,0,0,0.8);
    cursor: pointer;
}

/* Tooltip */
.trailer-tooltip {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 20;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.hero-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(249, 109, 0, 0.6);
    color: #f96d00;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    background: rgba(249, 109, 0, 0.08);
}

.hero-pref-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: absolute;
    top: 62px;
    left: 110px;
    z-index: 100;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #2a2a2a;
    padding: 12px 14px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
    max-width: 520px;
    width: max-content;
}

.hero-pref-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 36px;
    background: #1c1c1c;
    color: #e0e0e0;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-pref-chip strong {
    color: #f96d00;
    font-weight: 600;
}

.hero-pref-close {
    border: none;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
}

.hero-pref-close:hover {
    color: #fff;
}

.tooltip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #f96d00;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-family: monospace;
    font-size: 14px;
}

.hero-trailer-side:hover .trailer-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
}

/* Info Popup */
.info-popup {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    text-align: left;
}

.hero-trailer-side:hover .info-popup {
    opacity: 1;
    transform: translateY(0);
}

.info-icon {
    background: #f96d00;
    color: white;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
}

/* Hero Content */
.hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.1;
}

.hero-title.hero-title-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 40%;
}

.hero-meta {
    display: flex;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    font-weight: 600;
    color: #bbb;
}

.rating {
    background: #46d369;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
}

.hero-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ddd;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn {
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-play {
    background-color: #f96d00;
    color: #fff;
}

.btn-info {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    backdrop-filter: blur(10px);
    transition: background-color 0.2s ease, transform 0.2s;
}

.btn-info.in-my-list {
    background-color: #2ecc40;
    color: #fff;
}

.btn:hover {
    transform: scale(1.05);
}

/* Slider Controls */
.slider-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    user-select: none;
}

.slider-arrow:hover {
    color: #f96d00;
}

.arrow-left {
    left: 10px;
    background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, transparent 100%);
    justify-content: flex-start;
    user-select: none;
    user-select: none; 
    -webkit-user-select: none; 

    -webkit-tap-highlight-color: transparent;
}

.arrow-right {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.95) 0%, transparent 100%);
    justify-content: flex-end;
    padding-right: 20px;
    user-select: none; 
    -webkit-user-select: none; /* For Safari */

    -webkit-tap-highlight-color: transparent;
}

.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 30;
}

.dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #f96d00;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(249, 109, 0, 0.6);
}

.hero-content, 
.hero-trailer-side {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.content-hidden {
    opacity: 0;
    transform: translateY(10px);
}

/* --- MOVIE ROWS & CARDS --- */
.promo-section {
    position: relative;
    width: 100%;
    height: 350px;
    background: #000;
    overflow: hidden;
    margin: 60px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.marquee-track {
    display: flex;
    width: calc(200px * 20);
    animation: scrollMarquee 40s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-card {
    width: 200px;
    height: 300px;
    margin-right: 15px;
    border-radius: 8px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s;
}

.marquee-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.4;
}

.promo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    padding: 30px 50px;
    border-radius: 20px;
    border: 1px solid #f96d00;
    backdrop-filter: blur(5px);
}

.promo-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.promo-price {
    font-size: 1.5rem;
    color: #ccc;
}

.strike {
    text-decoration: line-through;
    color: #888;
    margin-right: 10px;
}

.free-text {
    color: #f96d00;
    font-weight: bold;
    font-size: 2rem;
}

.btn-claim {
    margin-top: 15px;
    padding: 10px 25px;
    background: rgba(255,255,255,0.1);
    border: 1px solid #f96d00;
    color: #f96d00;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.promo-section:hover .btn-claim {
    background: #f96d00;
    color: white;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Horizontal Scroll Rows */
.horizontal-scroll-row {
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
    gap: 15px;
    padding: 20px 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #f96d00 #111;
}

.horizontal-scroll-row::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll-row::-webkit-scrollbar-track {
    background: #111;
}

.horizontal-scroll-row::-webkit-scrollbar-thumb {
    background-color: #f96d00;
    border-radius: 10px;
}

.horizontal-scroll-row .grid-card {
    flex: 0 0 200px;
}
/* Movie Cards Grid */
.netflix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding-bottom: 50px;
}

/* Extra spacing between playlist cards */
.list-wrapper #playlistsGrid {
    gap: 18px;
}

.grid-card {
    position: relative;
    aspect-ratio: 2 / 3;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0s 0.1s;
    border-radius: 4px;
    overflow: visible;
}

.grid-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.card-rating-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    white-space: nowrap;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 3px;
}

.card-episode-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    pointer-events: none;
}

/* #rowRecommended ("Recommended for you") only - not #rowBecauseYouWatched (its cards run
   noticeably wider, confirmed live: the badges already fit fine there at this width, so
   columnizing it too just made it look inconsistent for no reason) and not every .grid-card
   site-wide. #rowRecommended's narrower cards stop fitting a full sub/dub/total row of pills
   next to the rating badge before the card itself is narrow enough to trigger any other
   responsive change - stacking the pills into a column instead keeps each one full width
   without needing to shrink the card. Bounded to a band (not just max-width) because by
   1300px the grid itself has already reflowed to fewer columns per row, freeing up enough
   width per card that the original row layout fits again - below that, this rule steps aside
   and the base (non-media) row/right-positioned rule applies on its own. */
@media (max-width: 1580px) and (min-width: 1301px) {
    #rowRecommended .card-episode-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        /* Moved under the rating badge on the LEFT instead of staying pinned top-right - one
           combined left-aligned stack (rating, then dub/sub/total each on their own line)
           reads as one unit instead of two badges awkwardly anchored to opposite corners. */
        left: 8px;
        right: auto;
        top: 36px;
    }
}

.ep-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.ep-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ep-badge-sub { background: #4ade80; color: #ffffff; }
.ep-badge-dub { background: #ef4444; color: #ffffff; }
/* No real (English) dub found - showing animego.me's Russian dub count instead. Blue on purpose,
   never red, so it can never be mistaken for a real English dub count at a glance. */
.ep-badge-dub-ru { background: #3b82f6; color: #ffffff; }
.ep-badge-total { background: #6b7280; color: #ffffff; }
/* Not yet released (unaired TV show or an unreleased movie) - a distinct amber, never the sub/
   dub/total colors, so it never reads as a real (and possibly wrong) episode count. */
.ep-badge-upcoming { background: #f59e0b; color: #1a1a1a; }

/* Used where the badges sit inline in normal document flow (e.g. calendar list rows)
   instead of overlaid on a poster corner. */
.card-episode-badges.inline {
    position: static;
    display: inline-flex;
    pointer-events: auto;
}

.card-title-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 44px 10px 8px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.92) 50%);
    border-radius: 0 0 8px 8px;
    pointer-events: none;
    z-index: 10;
}

.card-title-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    white-space: normal;
    word-break: break-word;
    letter-spacing: 0.01em;
    line-height: 1.25;
    padding: 0 2px;
    max-height: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-title-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
    padding: 2px;
}

.grid-card:hover {
    transform: scale(1.1) translateY(-20px);
    z-index: 100;
    box-shadow: 0 20px 40px rgba(0,0,0,0.85);
    transition-delay: 0.2s;
}

#myListGrid .grid-card:hover, #myHistoryGrid .grid-card:hover {
    transform: scale(1.15) translateY(-20px);
    z-index: 100;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition-delay: 0.2s;
}

/* Default hover overlay */
.card-hover-info {
    position: absolute;
    top: -40%;
    left: 0;
    width: 100%;
    height: 180%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    overflow: hidden;
}

.grid-card:hover .card-hover-info {
    opacity: 0;
}

/* My List scoped changes (Inner shadows & positioning) */
#myListGrid .card-hover-info, #myHistoryGrid .card-hover-info {
    top: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    display: flex;
}

#myListGrid .grid-card:hover .card-hover-info, #myHistoryGrid .grid-card:hover .card-hover-info {
    opacity: 1;
    pointer-events: auto;
}

.hover-preview {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #000;
}

.card-trailer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hover-meta {
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.5));
}

.hover-meta-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.hover-meta-stats {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: #cfcfcf;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.hover-meta-desc {
    font-size: 0.78rem;
    color: #b3b3b3;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hover-meta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hover-info {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #f96d00;
    color: #f96d00;
    font-size: 0.8rem;
    text-decoration: none;
}

/* Fullscreen hover modal */
.hover-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 4000;
}

.hover-modal.active {
    opacity: 1;
}

.hover-modal-dialog {
    width: min(900px, 92vw);
    background: #0b0b0b;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.85);
    transform: translateY(10px);
    transition: transform 0.2s ease;
}

.hover-modal.active .hover-modal-dialog {
    transform: translateY(0);
}

.hover-modal-media {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.hover-modal-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hover-modal-body {
    padding: 20px 24px 24px;
}

.hover-modal-body h2 {
    margin-bottom: 8px;
    font-size: 1.4rem;
}

.hover-modal-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #cfcfcf;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.hover-modal-body p {
    color: #b3b3b3;
    line-height: 1.6;
    margin: 0;
}

.hover-modal-actions {
    margin-top: 16px;
}

.hover-modal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: #f96d00;
    color: #111;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;

}

.hover-modal-link:hover {
    filter: brightness(1.05);
}

/* Default hover layout */
.hover-btns {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 15px;
    width: auto;
    margin: 0;
    z-index: 10;
}

/* My List scoped layouts */
#myListGrid .hover-btns, #myHistoryGrid .hover-btns {
    position: absolute;
    inset: 0; /* Cover the whole card */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    transform: none;
    pointer-events: none; /* Let clicks pass through empty space */
}

#myListGrid .hover-btns button, #myHistoryGrid .hover-btns button {
    pointer-events: auto; /* Enable clicks on the buttons themselves */
}

#myListGrid .hover-play, #myHistoryGrid .hover-play {
    margin-bottom: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none; /* Removed border */
}

#myListGrid .hover-remove, #myHistoryGrid .hover-remove {
    position: absolute;
    right: 10px;
    top: -1px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #aaa;
    width: auto;
    height: auto;
    padding: 5px;
    box-shadow: none; /* No shadow */
}

.hover-play, .hover-add, .hover-remove {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.hover-play {
    color: #f96d00;
    font-size: 20px;
    padding-left: 4px;
}

.hover-add, .hover-remove {
    color: #f96d00;
}

.hover-play:hover, .hover-add:hover, .hover-remove:hover {
    background: rgba(20, 20, 20, 0);
    border-color: #f96d00;
    transform: scale(1.15);
}

#myListGrid .hover-play:hover, #myHistoryGrid .hover-play:hover {
    transform: translate(-50%, -50%) scale(1.15); /* Override the translate for the list play button */
}

#myListGrid .hover-remove.hover-delete-btn:hover, #myHistoryGrid .hover-remove.hover-delete-btn:hover {
    transform: scale(1.15); /* Override the translate for the delete button */
}

.hover-remove img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Trash-bin delete button — turns red on hover, NO focus outline/border */
.hover-delete-btn {
    color: #aaa;
    transition: color 0.18s, transform 0.18s;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.hover-delete-btn:focus,
.hover-delete-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.hover-delete-btn:hover {
    color: #e53935 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: scale(1.15);
}

.info-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0));
    text-align: left;
}

.info-text h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    top: 16px;
    right: 16px;
    transform: none;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
}

.match-score {
    font-size: 0.8rem;
    color: #000;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5c518;
    padding: 2px 6px;
    border-radius: 4px;
}

.rating-pill {
    font-size: 0.8rem;
    color: #000;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5c518;
    padding: 2px 6px;
    border-radius: 4px;
}

.age-rating {
    border: 1px solid rgba(255,255,255,0.4);
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
}

/* Add Movie Card */
.add-card {
    background: #1a1a1a;
    border: 2px dashed #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.add-card:hover {
    border-color: #f96d00;
    background: #222;
    transform: scale(1.05);
}

.add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.plus-btn {
    width: 50px;
    height: 50px;
    background: #252525;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.plus-btn svg {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.add-text {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.add-card:hover .plus-btn {
    transform: scale(1.15);
    background: #333;
}

.add-card:hover .add-text {
    color: #fff;
}

.hover-add svg {
    width: 30px;
    height: 30px;
}

/* Card Badge */
.card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Card Overlay Effects */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 270px;
    background: radial-gradient(circle, rgba(0,0,0,0.1) 30%, #000 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.movie-card:hover .card-overlay {
    opacity: 1;
}

.play-icon-svg {
    width: 60px;
    height: 60px;
    fill: white;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    transform: scale(0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.movie-card:hover .play-icon-svg {
    transform: scale(1);
}

/* Filter Panel */
.filter-btn {
    background: #f96d00;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.filter-btn:hover {
    transform: scale(1.05);
}

.filter-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background: #111;
    border-radius: 12px;
    margin-bottom: 20px;
}

.filter-panel.open {
    max-height: 1000px;
    border: 1px solid #333;
    padding: 20px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
}

.filter-group label {
    font-size: 0.9rem;
    color: #ccc;
    font-weight: bold;
    height: 20px;
}

.filter-input {
    background: #222;
    border: 1px solid #444;
    color: white;
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.filter-input:focus {
    border-color: #f96d00;
    outline: none;
}

.orange-slider {
    accent-color: #f96d00;
    width: 100%;
    cursor: pointer;
}

.apply-btn {
    background: #f96d00;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.apply-btn:hover {
    background: #f96d00;
    color: white;
}

/* My List Page */
.list-wrapper {
    padding: 120px 4% 50px;
    min-height: 100vh;
    background-color: #000000;
    /* background-color: #141414; */
}

.list-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: #e5e5e5;
}

/* Movie Detail Overlay */
.movie-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.movie-detail-overlay.active {
    opacity: 1;
    visibility: visible;
}

.overlay-wrapper {
    width: 90%;
    max-width: 2000px;
    height: 90%;
    background: #0a0a0a;
    border-radius: 20px;
    border: 1px solid #333;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 100px rgba(0,0,0,1);
    transform: scale(0.95);
    transition: transform 0.4s ease;
    scroll-behavior: smooth;
}

.movie-detail-overlay.active .overlay-wrapper {
    transform: scale(1);
}

.overlay-content {
    display: flex;
    flex-direction: column;
}

.video-max-section {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-max-section iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.stats-sidebar {
    padding: 60px;
}

.description-block {
    margin: 30px 0;
    line-height: 1.8;
    color: #ccc;
    font-size: 1.1rem;
}

@keyframes highlightDesc {
    0% { background: rgba(249, 109, 0, 0.2); }
    100% { background: transparent; }
}

#descSection:target {
    animation: highlightDesc 2s ease-out;
}

/* Stat Badges */
.stat-group {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
    font-weight: 700;
}

.stat-label {
    display: none;
}

#statRating, #statRatingOverlay,
#statDate, #statDateOverlay,
#statRuntime, #statRuntimeOverlay {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
}

#statRating, #statRatingOverlay {
    background: #46d369;
    color: #000;
}

#statDate, #statDateOverlay {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#statRuntime, #statRuntimeOverlay {
    background: #333;
    color: #fff;
}

/* Cast Grid */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin-top: 25px;
}

.cast-grid li {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #161616;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #222;
    transition: all 0.3s ease;
}

.cast-grid li:hover {
    background: #222;
    border-color: #f96d00;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(249, 109, 0, 0.2);
    cursor: default;
}

.actor-pic {
    width: 55px;
    height: 55px;
    background: #333;
    border-radius: 50%;
    flex-shrink: 0;
}
.player-section-divider-Downloads{
    display: none;
}
.cast-grid p {
    font-weight: 600;
    color: #f96d00;
}

/* Overlay Close Button */
.overlay-close {
    position: fixed;
    top: 30px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-icon-svg {
    width: 24px;
    height: 24px;
    filter: invert(1);
}

.overlay-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg) scale(1.1);
}

.overlay-close:hover .close-icon-svg {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(3deg) brightness(102%) contrast(105%);
}

/* Streaming Buttons */
.watch-on-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #222;
    width: 100%;
}

.streaming-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 40px;
    margin-top: 25px;
    align-items: center;
}

.stream-btn {
    height: 70px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
}

.stream-btn:hover {
    transform: translateY(-10px) scale(1.05);
}

.stream-btn:hover img {
    filter: brightness(1.8) drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
}

.stream-btn:hover[href*="kinopoisk"] img {
    filter: brightness(1.3) drop-shadow(0 0 30px rgba(255, 102, 0, 0.7));
}

/* External Redirect Popup */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 22000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.confirm-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.confirm-modal-box {
    background: #111;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #333;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.confirm-modal-box h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #fff;
}

.confirm-modal-box p {
    color: #bbb;
    margin-bottom: 30px;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-confirm {
    background: #f96d00;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-cancel {
    background: #222;
    color: #999;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-confirm:hover {
    transform: scale(1.03);
}

.btn-cancel:hover {
    background: #333;
    color: #fff;
}

/* Notification Toast */
#notification-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #f96d00;
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast-hidden {
    bottom: -100px !important;
    opacity: 0;
}

/* Limit Toast */
.limit-toast {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(249, 109, 0, 0.5);
    color: #f96d00;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    z-index: 21001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: min(520px, calc(100vw - 40px));
    word-break: break-word;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #f96d00;
    width: 100%;
    animation: progressShrink 3s linear forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translate(-50%, -30px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes progressShrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* Custom Toast */
.custom-toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e50914;
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 9999;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-toast.show {
    top: 30px;
}

.heroicon-wrap {
    display: inline-flex;
    width: 1.05em;
    height: 1.05em;
    margin: 0 .16em;
    vertical-align: -.15em;
    align-items: center;
    justify-content: center;
}

.heroicon {
    display: block;
    width: 100%;
    height: 100%;
    flex: none;
}

.custom-toast::before {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url('/svg/check-circle.svg') center / contain no-repeat;
    mask: url('/svg/check-circle.svg') center / contain no-repeat;
}

/* Shortcuts toast */
.shortcuts-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: #111;
    color: #eee;
    border: 1px solid #2a2a2a;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 380px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
}

.shortcuts-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.shortcuts-toast-title {
    font-weight: 700;
    color: #f96d00;
    margin-bottom: 6px;
}

.shortcuts-toast-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.shortcuts-toast-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d6d6d6;
    font-size: 0.82rem;
    white-space: nowrap;
}

.shortcut-key {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    color: #f0f0f0;
}

/* --- COMPANY INFO --- */
.about-section {
    padding: 80px 20px;
    border-top: 1px solid #1a1a1a;
    margin-top: 60px;
}

/* --- AD SECTION --- */
.ad-section {
    padding: 60px 20px 20px;
        padding-top: 0;
}

.ad-card {
    border: 1px dashed rgba(249, 109, 0, 0.5);
    border-radius: 20px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(249, 109, 0, 0.12), rgba(0, 0, 0, 0.8));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.ad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    color: #f96d00;
    border: 1px solid rgba(249, 109, 0, 0.5);
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
    font-weight: 700;
}

.ad-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.ad-text h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.ad-text p {
    color: #b3b3b3;
    line-height: 1.6;
    max-width: 520px;
}

.ad-cta {
    background: #f96d00;
    border: none;
    color: #111;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 24px rgba(249, 109, 0, 0.35);
}

.ad-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(249, 109, 0, 0.45);
}

.about-grid {
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-text {
    flex: 1.5;
    min-width: 320px;
}

.about-text h2 {
    color: #f96d00;
    font-size: 2.2rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.about-text p {
    color: #b3b3b3;
    line-height: 1.8;
    font-size: 1.15rem;
    max-width: 650px;
}

.device-support {
    flex: 1;
    min-width: 320px;
    background: linear-gradient(145deg, #0f0f0f, #050505);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #222;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.device-support h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
}

.device-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 20px;
    padding: 0;
}

.device-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #888;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.device-icon {
    /* background: #1a1a1a; */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(249, 109, 0, 0.25);
    font-size: 24px;
    transition: all 0.3s ease;
}

.device-list li:hover .device-icon {
    border-color: #f96d00;
    color: #f96d00;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(249, 109, 0, 0.2);
}

.device-list li:hover .device-name {
    color: #fff;
}

/* --- INTRO LANDING SECTIONS --- */
.intro-section {
    padding: 70px 20px 40px;
}

.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: center;
}

.intro-copy h2 {
    font-size: 2.4rem;
    margin-bottom: 16px;
}

.intro-copy p {
    color: #b3b3b3;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 24px;
}

.intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.intro-cards {
    display: grid;
    gap: 16px;
}

.intro-card {
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.intro-card h4 {
    margin-bottom: 8px;
    color: #f96d00;
}

.intro-card p {
    color: #b3b3b3;
    line-height: 1.6;
}

.feature-section {
    padding: 40px 20px 60px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.feature-card {
    background: linear-gradient(145deg, #0c0c0c, #050505);
    border: 1px solid #1f1f1f;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.feature-card h3 {
    margin-bottom: 10px;
}

.feature-card p {
    color: #b3b3b3;
    line-height: 1.6;
    margin-bottom: 14px;
}

.feature-link {
    color: #f96d00;
    text-decoration: none;
    font-weight: 600;
}

.roadmap-section {
    padding: 60px 40px 70px;
    border-top: 2px solid rgba(249, 109, 0, 0.25);
    background: linear-gradient(180deg, #0a0a0a 0%, #080808 100%);
}

.roadmap-section .roadmap-header {
    margin-bottom: 36px;
}

.roadmap-section .roadmap-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.roadmap-section .roadmap-header p {
    color: #888;
    font-size: 1rem;
    margin: 0;
}

.movie-header {
    /* Remove row-based flex for movie-header, use column for stacking header and player */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    height: auto;
}
.movie-header-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    min-height: 0;
}
.vertical-recommend {
    flex: 0 0 350px;
    min-width: 280px;
    max-width: 430px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 0 14px 14px 0;
    box-shadow: 0 2px 16px #0004;
    padding: 18px 12px 18px 12px;
    margin-top: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.roadmap-card {
    background: #111;
    border: 1px solid #1e1e1e;
    border-left: 3px solid #f96d00;
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    min-height: 140px;
}

.roadmap-card:hover {
    background: #161616;
    border-left-color: #ff8c00;
    transform: translateY(-2px);
}

.roadmap-card h4 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.roadmap-card p {
    color: #888;
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.roadmap-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(249, 109, 0, 0.15);
    color: #f96d00;
    border: 1px solid rgba(249, 109, 0, 0.3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    width: fit-content;
}

.roadmap-tag.reached {
    background: rgba(70, 211, 105, 0.12);
    color: #46d369;
    border-color: rgba(70, 211, 105, 0.3);
}

.cta-strip {
    width: 97%;
    margin: 40px auto 70px;
    padding: 50px 35px 50px;
    background: linear-gradient(135deg, rgba(249, 109, 0, 0.15), rgba(0,0,0,0.7));
    border: 1px solid rgba(249, 109, 0, 0.3);
    border-radius: 20px;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 20px;
}

.cta-strip .cta-device-support {
    flex: 0 0 min(360px, 100%);
    min-width: 280px;
    margin-left: auto;
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 14, 14, 0.95), rgba(6, 6, 6, 0.92));
    border: 1px solid rgba(249, 109, 0, 0.24);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.cta-strip .cta-device-support h3 {
    margin-bottom: 14px;
    text-align: left;
    font-size: 1.05rem;
}

.cta-strip .cta-device-support .device-list {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 10px;
}

.cta-strip .cta-device-support .device-list li {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(249, 109, 0, 0.11);
    border: 1px solid rgb(93 41 0 / 25%);
}

.cta-strip .cta-device-support .device-icon {
    font-size: 1rem;
}

.cta-strip .cta-device-support .device-name {
    font-size: 0.8rem;
}

.cta-strip p {
    color: #b3b3b3;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    gap: 12px;
    min-width: 40%;

}

.apply-btn.ghost-btn {
    background: transparent;
    border: 1px solid #f96d00;
    color: #f96d00;
}

/* --- MOVIE INFO PAGE --- */
.movie-header {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
}

.backdrop-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(30px) brightness(0.25);
    transform: scale(1.1);
    z-index: -1;
}

.movie-content {
    display: flex;
    gap: 50px;
    width: 95%;
    max-width: 2000px;
    z-index: 10;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 20px 0px 0 0;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.movie-poster-large {
    max-width: 270px;
    max-height: 405px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    object-fit: cover;
}

.movie-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.movie-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.1;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.movie-meta {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.tag {
    padding: 4px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 0.85rem;
}

.imdb-tag {
    background: #f5c518;
    color: #000;
    border: none;
    font-weight: 800;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.btn-watch {
    padding: 12px 30px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1.13rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, box-shadow 0.18s, transform 0.13s, filter 0.18s;
    display: flex;
    align-items: center;
    gap: 8px;
    /* box-shadow:
        0 2px 16px 0 rgba(249, 109, 0, 0.22),
        0 0 0 2px #f96d0044,
        0 0 16px 2px rgba(255, 160, 40, 0.18),
        0 0 32px 0 rgba(255, 140, 0, 0.10); */
    box-shadow: 0 2px 12px 0 rgba(249, 109, 0, 0.01), 0 0 0 1.5px #f96d0033;
    filter: drop-shadow(0 0 8px #ffb34755);
}

.btn-watch:hover {
    background: #333;
    box-shadow:
        0 6px 32px 0 rgba(249, 109, 0, 0.38),
        0 0 0 3px #ffb34755,
        0 0 32px 6px rgba(255, 180, 70, 0.22),
        0 0 48px 0 rgba(255, 140, 0, 0.18);
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08) drop-shadow(0 0 12px #ffb34788);
}

.btn-list {
    background: linear-gradient(90deg, #232323 0%, #232323 100%);
    /* border: 1px solid #f96d00; */
    color: #fff;
    box-shadow:
        0 2px 12px 0 rgba(249, 109, 0, 0.01),
        0 0 0 1.5px #f96d0033;
    filter: drop-shadow(0 0 6px #f96d0033);
}

.btn-list:hover {
    background: linear-gradient(90deg, #333 0%, #444 100%);
    box-shadow:
        0 6px 24px 0 rgba(249, 109, 0, 0.18),
        0 0 0 2.5px #ffb34755;
    filter: brightness(1.08) drop-shadow(0 0 10px #ffb34755);
}
/* Keep Watch Now as the primary orange action. The secondary movie actions should be quiet
   neutral controls rather than carrying the same orange outline/glow. */
.action-buttons .btn-secondary-action,
.action-buttons .btn-secondary-action:hover {
    border: none;
    box-shadow: none;
    filter: none;
}

.tech-specs-container {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

#playlistGenres.tech-specs-container {
    padding: 20px 30px;
}

.tech-badge {
    border: 1px solid #444;
    color: #888;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s;
}

.tech-badge:hover {
    border-color: #f96d00;
    color: #fff;
}

.tech-badge.gold {
    border-color: #ffd700;
    color: #ffd700;
}

.scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.scrollable-content::-webkit-scrollbar {
    width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #f96d00;
    border-radius: 10px;
}

.movie-plot {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ddd;
    margin-bottom: 30px;
}

.details-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px 20px;
    font-size: 0.95rem;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 8px;
}

.detail-label {
    color: #888;
    font-weight: 600;
}

.detail-value {
    color: #eee;
}

/* Recommendation Section */
.recommend-section {
    max-width: 2000px;
    margin: 60px auto;
    /* padding: 0 5%; */
}

.row-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    padding-left: 18px;
    position: relative;
}

.row-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--row-accent, #f96d00) 0%, transparent 100%);
}

/* Cycle accent colors across rows */
.row:nth-child(8n+1)  { --row-accent: #f96d00; } /* orange — primary */
.row:nth-child(8n+2)  { --row-accent: #e84545; } /* red */
.row:nth-child(8n+3)  { --row-accent: #f5b942; } /* amber/gold */
.row:nth-child(8n+4)  { --row-accent: #00b4a6; } /* teal */
.row:nth-child(8n+5)  { --row-accent: #8b5cf6; } /* purple */
.row:nth-child(8n+6)  { --row-accent: #3b82f6; } /* blue */
.row:nth-child(8n+7)  { --row-accent: #22c55e; } /* green */
.row:nth-child(8n+0)  { --row-accent: #e91e8c; } /* pink */

/* Browse page row spacing */
.browse-rows .row {
    margin: 0 0 36px;
}

.browse-rows .row-title {
    font-size: 1.2rem;
    margin-bottom: 0;
    letter-spacing: 0.3px;
}

/* ── Browse personal row backdrop (indexBrowse only, separate from anime-spawned-row) ── */
.browse-personal-row {
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: clip;
    padding: 0 16px 10px;
    margin: 0 0 14px;
    background: #0c0c0c;
}
.browse-row-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    filter: blur(4px);
    transform: scale(1.04);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.42s ease, background-image 0.42s ease;
}
.browse-row-bg.active {
    opacity: 0.38;
}
#topGenreSection{
    display: none !important;
}
.browse-personal-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.12) 100%);
    z-index: 0;
    pointer-events: none;
}
.browse-personal-row .row-header,
.browse-personal-row .horizontal-scroll-row {
    position: relative;
    z-index: 1;
}
.browse-personal-row .row-header {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 14px 0 10px;
    margin: 0 0 12px;
    backdrop-filter: none;
}
.continue-watching-section {
    position: relative;
    background: #0c0c0c;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px 18px 16px;
    margin: 0 0 14px;
    overflow: hidden;
}
.continue-watching-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}
.continue-watching-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    max-height: 120px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 14px;
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.continue-watching-card:hover {
    transform: translateY(-2px);
    background-color: rgba(255,255,255,0.06);
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}
.continue-watching-card-poster {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.continue-watching-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.continue-watching-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.continue-watching-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2rem;
}
.continue-watching-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #ccc;
    font-size: 0.92rem;
}
.continue-watching-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.continue-watching-meta-item svg {
    width: 18px;
    height: 18px;
    color: #f5c518;
    flex-shrink: 0;
}
.continue-watching-play-btn {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.continue-watching-play-btn:hover {
    transform: translateY(-1px);
    background: #f96d00;
    border-color: #f96d00;
    color: #111;
    box-shadow: 0 12px 30px rgba(249,109,0,0.24);
}
.continue-watching-play-btn svg {
    width: 20px;
    height: 20px;
}
@media (max-width: 768px) {
    .continue-watching-card {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        max-height: none;
    }
    .continue-watching-card-poster {
        width: 100%;
        height: 188px;
    }
    .continue-watching-card-body {
        width: 100%;
    }
    .continue-watching-play-btn {
        align-self: flex-end;
    }
}
/* 2-row grid for Recommended section that fills the full panel height */
#recommendedSection {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#recommendedSection .browse-grid-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden !important;
    align-content: stretch;
}
#recommendedSection .browse-grid-row .grid-card {
    flex: initial !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

/* ── Personal sections side-by-side layout ── */
.personal-sections-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2%;
    margin-bottom: 8px;
}
.personal-sections-flex > .row,
.personal-sections-flex > .personal-left-stack {
    width: 48%;
    min-width: 0;
}
.personal-sections-flex > .personal-left-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
@media (max-width: 768px) {
    .personal-sections-flex {
        flex-direction: column;
    }
    .personal-sections-flex > .row,
    .personal-sections-flex > .personal-left-stack {
        width: 100%;
    }
}

/* Personalized section labels get an accent treatment */
.browse-rows .row-title.browse-personal-label {
    color: #f96d00;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

/* Empty-state placeholder inside a personal row */
.browse-empty-state {
    color: #666;
    font-size: 0.9rem;
    padding: 18px 10px;
    font-style: italic;
}

.browse-rows .horizontal-scroll-row {
    gap: 18px;
    padding: 5px 0 24px;
}

/* ── Playlist browse row cards ─────────────────────────── */
.playlist-browse-card {
    position: relative;
    flex: 0 0 200px;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.playlist-browse-card:hover {
    transform: scale(1.05);
}

.playlist-browse-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.25s ease;
}

.playlist-browse-card:hover img {
    filter: brightness(0.3);
}

.playlist-browse-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    opacity: 0;
    transition: opacity 0.25s ease;
    text-align: center;
    pointer-events: none;
}

.playlist-browse-card:hover .playlist-browse-overlay {
    opacity: 1;
}

.playlist-browse-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.playlist-browse-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    word-break: break-word;
}

.playlist-browse-count {
    font-size: 0.78rem;
    color: #ccc;
}
/* ───────────────────────────────────────────────────────── */

.row-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.styled-select {
    background: #222;
    color: #f96d00;
    border: 1px solid #444;
    padding: 5px 15px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    font-weight: bold;
}

.styled-select:hover {
    border-color: #f96d00;
}

.row-title span {
    color: #f96d00;
    font-size: 0.9rem;
    margin-left: 10px;
}

.movie-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 25px;
    scroll-behavior: smooth;
}

.movie-row::-webkit-scrollbar {
    height: 6px;
}

.movie-row::-webkit-scrollbar-thumb {
    background: #f96d00;
    border-radius: 10px;
}

.movie-row::-webkit-scrollbar-track {
    background: #111;
}

.mini-card {
    min-width: 180px;
    background: var(--bg-card);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.mini-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-secondary);
}

/* Playlist Card Styles */
.playlist-card {
    display: flex;
    flex-direction: column;
    max-height: 450px;
    min-width: 250px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
}

.playlist-card .mini-info {
    padding: 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    border-bottom: 2px solid var(--accent-primary);
}

.playlist-card .mini-info h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.playlist-movie-count {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin: 8px 0;
}

.playlist-votes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.vote-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--accent-primary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.vote-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.vote-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.vote-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.vote-count {
    font-size: 0.95rem;
    color: var(--text-primary);
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

.playlist-desc-modal {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.35;
}

.playlist-actions {
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 0 0 12px 12px;
}

.playlist-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.playlist-movies-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
}

.playlist-movie-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.playlist-movie-item img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.playlist-movie-item:hover img {
    transform: scale(1.05);
}

.playlist-movie-item span {
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Create Playlist Modal Styling */
.create-playlist-modal .settings-content {
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 22px 22px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.create-playlist-modal .modal-header {
    border-radius: 36px ;    
    border-bottom: 0px solid #222;
}

.create-playlist-modal .modal-title {
    color: #f96d00;
}

.create-playlist-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.create-playlist-modal .input-group input {
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px;
}

.create-playlist-modal .input-group label {
    color: #aaa;
}

.create-playlist-modal .desc-field label {
    display: block;
    color: #aaa;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.create-playlist-modal .desc-field textarea {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    resize: none;
}

.create-playlist-modal .desc-field:focus,
.create-playlist-modal .input-group input:focus {
    outline: none;
    border-color: #f96d00;
    box-shadow: 0 0 0 2px rgba(249, 109, 0, 0.2);
}

.create-playlist-modal .apply-btn {
    background: #f96d00;
    color: #111;
    border: none;
}

.create-playlist-modal .apply-btn:hover {
    background: #ff7f1f;
}

/* Playlist comments */
.playlist-comments {
    margin-top: 18px;
    padding: 16px;
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 10px;
}

.playlist-comments h3 {
    color: #f96d00;
    margin-bottom: 10px;
    font-size: 1rem;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 1000px;
    overflow-y: auto;
    padding-right: 6px;
}

.comment-item {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 12px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.comment-user {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.comment-date {
    color: #777;
    font-size: 0.75rem;
}

.comment-text {
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.35;
}

.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.comment-uid {
    color: #777;
    font-size: 0.75rem;
}

.comment-delete-btn {
    background: transparent;
    border: 1px solid #333;
    color: #aaa;
    border-radius: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.comment-delete-btn:hover {
    border-color: #f96d00;
    color: #f96d00;
}

.comment-votes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.comment-vote-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f96d00;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease;
}

.comment-vote-btn:hover {
    transform: translateY(-1px);
    border-color: #f96d00;
}

.comment-vote-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.comment-vote-count {
    font-size: 0.85rem;
    color: #ddd;
}

.comment-form {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.comment-form input {
    flex: 1;
    height: 38px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
}

.comment-form input:focus {
    outline: none;
    border-color: #f96d00;
    box-shadow: 0 0 0 2px rgba(249, 109, 0, 0.2);
}

.comment-form .apply-btn {
    white-space: nowrap;
}

.comment-form .apply-btn {
    background: #f96d00;
    color: #fff;
    border: none;
}

.comment-form .apply-btn:hover {
    background: #ff7f1f;
}

/* Add-to-playlist picker modal */
.playlist-picker-modal {
    width: 40%;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
}

.playlist-picker-body {
    padding: 18px 24px 24px;
}

.playlist-picker-subtitle {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.playlist-picker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}

.playlist-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #2a2a2a;
    background: #141414;
    border-radius: 10px;
}

.playlist-picker-info {
    flex: 1;
    min-width: 0;
}

.playlist-picker-info h4 {
    color: #fff;
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.playlist-picker-info p {
    color: #777;
    margin: 0;
    font-size: 0.85rem;
}

.playlist-picker-add {
    background: #f96d00;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    height: 36px;
    min-width: 70px;
    flex: 0 0 auto;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.playlist-picker-add:disabled {
    background: #333;
    color: #888;
    border: 1px solid #444;
    cursor: not-allowed;
    opacity: 0.8;
    pointer-events: none;
}

.playlist-picker-add:disabled:hover,
.playlist-picker-add:disabled:active,
.playlist-picker-add:disabled:focus {
    background: #333;
    color: #888;
    border-color: #444;
    box-shadow: none;
}

.playlist-picker-add:hover {
    background: #ff7f1f;
}

.playlist-movie-count {
    font-size: 0.85rem;
    color: #888;
}

.playlist-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}

.playlist-genres .tech-badge {
    font-size: 10px;
    padding: 3px 8px;
}

.playlist-movies-list {
    flex: 1;
    overflow-y: auto;
    background: #111;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
}

.playlist-movies-list::-webkit-scrollbar {
    width: 6px;
}

.playlist-movies-list::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.playlist-movies-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.playlist-movies-list::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.playlist-movie-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #1a1a1a;
    border-radius: 6px;
    margin-bottom: 6px;
    transition: background 0.2s ease;
}

.playlist-movie-item:hover {
    background: #252525;
}

.playlist-movie-item img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.playlist-movie-item span {
    flex: 1;
    font-size: 0.9rem;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.playlist-actions {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #181818;
    border-top: 1px solid #333;
}

/* Playlist Modal Items (YouTube Music Style) */
#playlistMovies {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding: 0 30px !important;
}

#playlistMovies::-webkit-scrollbar {
    width: 8px;
}

#playlistMovies::-webkit-scrollbar-track {
    background: #0a0a0a;
}

#playlistMovies::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

#playlistMovies::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.playlist-modal-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background 0.2s ease;
    position: relative;
}

.playlist-modal-item:hover {
    background: #252525;
}

.playlist-modal-item img {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px;
    min-height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.playlist-modal-info {
    flex: 1;
    min-width: 0;
}

.playlist-modal-info h4 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}

.playlist-modal-info h4:hover {
    color: #f96d00;
}

.playlist-modal-desc {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-modal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-badge {
    font-size: 0.85rem;
    color: #f96d00;
    font-weight: 600;
}

.btn-remove-from-playlist {
    background: #2a1a1a;
    border: 1px solid #4a2a2a;
    color: #ff5555;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-remove-from-playlist:hover {
    background: #3a1a1a;
    border-color: #ff5555;
    transform: scale(1.1);
}

/* Style Add More Button */
#addMoreToPlaylistBtn {
    background: linear-gradient(135deg, #f96d00 0%, #e85d00 100%);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 109, 0, 0.3);
}

#addMoreToPlaylistBtn:hover {
    background: linear-gradient(135deg, #ff7d10 0%, #f96d00 100%);
    box-shadow: 0 4px 12px rgba(249, 109, 0, 0.5);
    transform: translateY(-2px);
}

#loadMoreMoviesBtn {
    background: linear-gradient(135deg, #f96d00 0%, #e85d00 100%);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 109, 0, 0.3);
}

#loadMoreMoviesBtn:hover {
    background: linear-gradient(135deg, #ff7d10 0%, #f96d00 100%);
    box-shadow: 0 4px 12px rgba(249, 109, 0, 0.5);
    transform: translateY(-2px);
}

.hit-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f96d00;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.mini-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.mini-info {
    padding: 12px;
    background: #111;
    text-overflow: hidden;
}

.mini-info h4 {
    font-size: 0.95rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-info p {
    font-size: 0.85rem;
    color: #888;
}

/* YouTube Trailer Modal */
.modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    width: 85%;
    max-width: 1000px;
    background: #000;
    border: 1px solid #333;
    border-radius: 12px;
    transform: scale(0.9);
    transition: transform 0.5s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: -40px;
    right: -10px;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal svg {
    width: 28px;
    height: 28px;
}

.close-modal:hover {
    color: #f96d00;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.trailer-nav-controls {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #111;
}

.nav-btn {
    background: #f96d00;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.nav-btn:hover {
    background: #ff8522;
    transform: scale(1.05);
}

.nav-btn:disabled {
    background: #444;
    cursor: not-allowed;
}

.blur-active .movie-header,
.blur-active .recommend-section,
.blur-active .navbar {
    filter: blur(15px) brightness(0.4);
    pointer-events: none;
    transition: filter 0.6s ease;
}

body.blur-active {
    overflow: hidden !important;
}


/* --- SIGNUP MODAL --- */
.signup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.signup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.signup-box {
    background: #0a0a0a;
    width: 400px;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #333;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 0 30px rgba(249, 109, 0, 0.1);
}

.signup-overlay.active .signup-box {
    transform: translateY(0);
}

.signup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-close svg {
    width: 20px;
    height: 20px;
}

.signup-close:hover {
    color: #fff;
}

.signup-box h2 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 2rem;
}

.signup-subtitle {
    color: #888;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group input {
    width: 100%;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.input-group textarea {
    width: 100%;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
    resize: vertical;
    min-height: 120px;
}

.input-group input:focus {
    border-color: #f96d00;
}

.input-group textarea:focus {
    border-color: #f96d00;
}

.input-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    top: 0;
    left: 10px;
    background: #0a0a0a;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #f96d00;
}

.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
    top: 0;
    left: 10px;
    background: #0a0a0a;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #f96d00;
}

.btn-signup {
    width: 100%;
    padding: 15px;
    background: #f96d00;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-signup:hover {
    transform: scale(1.02);
}

.divider {
    text-align: center;
    margin: 20px 0;
    color: #444;
    font-size: 0.8rem;
    position: relative;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: #222;
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.btn-google {
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* --- FOOTER --- */
.site-footer {
    background-color: #050505;
    background-image: linear-gradient(180deg, rgba(5,5,5,0.86), rgba(5,5,5,0.94)), url('/img/footer.jpg');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    border-top: 1px solid #222;
    padding: 36px 0 24px;
    margin-top: auto;
    font-size: 0.95rem;
    color: #999;
}

.footer-content {
    width: 96%;
    max-width: 2000px;
    margin: 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-brand h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.footer-brand h3 span {
    color: #f96d00;
}

.footer-desc {
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 300px;
}

.footer-col h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    text-decoration: none;
    color: #999;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col a:hover {
    color: #f96d00;
    padding-left: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #fff;
}

.social-btn:hover {
    background: #f96d00;
    transform: translateY(-3px);
}

.social-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-bottom {
    border-top: 1px solid #222;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    font-size: 0.85rem;
}

.legal-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.legal-links a {
    text-decoration: none;
    color: #777;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: #fff;
}

/* --- FOOTER v2 (redesigned footer content, indexMain.html first) --- */
.footer-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}

.footer-cat-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.footer-cat-btn:hover {
    background: rgba(249,109,0,0.15);
    border-color: rgba(249,109,0,0.5);
    color: #f96d00;
}

.footer-brand-logo-link {
    display: flex;
    justify-content: flex-start;
    margin: 4px 0 20px;
}
.footer-brand-logo-svg {
    width: 160px;
    height: auto;
}

.footer-help-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.footer-help-link {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.footer-help-link:hover { color: #f96d00; }
.footer-help-dot { color: #444; }

.footer-friends-section {
    max-width: 480px;
    margin: 0 0 24px;
    text-align: left;
}
.footer-friends-title {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.footer-friends-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}
.footer-friend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 5px 12px 5px 6px;
    font-size: 0.8rem;
    color: #ccc;
}
.footer-friend-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #333 center/cover;
    flex-shrink: 0;
    position: relative;
}
.footer-friend-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #050505;
    background: #555;
}
.footer-friend-chip.online .footer-friend-status-dot { background: #34c759; }
.footer-friend-chip.offline { opacity: 0.55; }
.footer-friends-empty {
    color: #666;
    font-size: 0.85rem;
}

/* --- FOOTER FORM MODALS (Report a Bug / Request Anime / Contact Us) --- */
.footer-form-content {
    max-width: 520px;
}
.footer-form-body {
    padding: 24px 26px 26px;
    overflow-y: auto;
}
.footer-form-field {
    margin-bottom: 16px;
}
.footer-form-field label {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}
.footer-form-field input[type="text"],
.footer-form-field input[type="email"],
.footer-form-field select,
.footer-form-field textarea {
    width: 100%;
    background: #222;
    border: 1px solid #444;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.footer-form-field input:focus,
.footer-form-field select:focus,
.footer-form-field textarea:focus {
    outline: none;
    border-color: #f96d00;
}
.footer-form-field textarea {
    resize: vertical;
    min-height: 90px;
}
.footer-form-category {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.footer-form-category-btn {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #999;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
.footer-form-category-btn.active {
    border-color: #f96d00;
    color: #f96d00;
    background: rgba(249,109,0,0.1);
}
.footer-media-picker {
    position: relative;
    margin-bottom: 16px;
}
.footer-media-picker-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 5;
    display: none;
}
.footer-media-picker-results.active { display: block; }
.footer-media-picker-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    align-items: center;
}
.footer-media-picker-item:hover { background: rgba(249,109,0,0.1); }
.footer-media-picker-item img {
    width: 36px;
    height: 52px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.footer-media-picker-item-info {
    font-size: 0.82rem;
    color: #ccc;
}
.footer-media-selected {
    display: none;
    align-items: center;
    gap: 10px;
    background: rgba(249,109,0,0.08);
    border: 1px solid rgba(249,109,0,0.3);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #fff;
}
.footer-media-selected.active { display: flex; }
.footer-media-selected img {
    width: 32px;
    height: 46px;
    object-fit: cover;
    border-radius: 3px;
}
.footer-media-selected-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.footer-id-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.footer-form-submit {
    width: 100%;
    background: #f96d00;
    border: none;
    color: #fff;
    font-weight: 800;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 6px;
    transition: background 0.2s ease;
}
.footer-form-submit:hover { background: #ff8420; }
.footer-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.footer-form-status {
    font-size: 0.82rem;
    margin-top: 10px;
    text-align: center;
}
.footer-form-status.success { color: #34c759; }
.footer-form-status.error { color: #e5534b; }

@media (max-width: 600px) {
    .footer-id-row { grid-template-columns: 1fr; }
    .footer-form-category { flex-direction: column; }
}

/* --- PRIVATE LIST LOCK --- */
.locked-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.locked-box {
    background: #000;
    border: 2px solid #f96d00;
    padding: 60px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 40px rgba(249, 109, 0, 0.4);
}

.btn-locked-signin {
    background: #f96d00;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-locked-signin:hover {
    transform: scale(1.05);
    background: #ff7d1a;
}

/* Promo Section Anchor */
#promoMarquee {
    scroll-margin-top: 100px;
}

.noborder {
    border-bottom: none !important;
}

/* --- COMMENTS (movie page, threaded) --- */
.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comments-title svg {
    width: 22px;
    height: 22px;
    color: #f96d00;
}

.comments-count {
    color: #888;
    font-weight: 400;
    font-size: 0.85em;
}

.comments-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #888;
}

.comments-sort svg {
    width: 16px;
    height: 16px;
}

.comments-sort select {
    background: #161616;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.comment-composer {
    display: flex;
    gap: 12px;
    margin: 16px 0 24px;
}

.comment-composer-avatar {
    flex-shrink: 0;
}

.comment-composer-body {
    flex: 1;
    background: #161616;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px 16px;
}

.comment-signin-hint {
    display: block;
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.comment-signin-hint a {
    color: #f96d00;
    text-decoration: none;
    font-weight: 600;
}

.comment-signin-hint a:hover {
    text-decoration: underline;
}

.comment-fmt-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.comment-fmt-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.comment-fmt-btn svg {
    width: 16px;
    height: 16px;
}

.comment-fmt-btn:hover:not(:disabled) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.comment-fmt-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.comment-emoji-wrap {
    position: relative;
    display: inline-flex;
}

.comment-gif-wrap {
    position: relative;
    display: inline-flex;
}

.comment-emoji-picker {
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    width: 336px;
}

.comment-emoji-option {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-emoji-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.comment-gif-picker {
    position: absolute;
    top: 34px;
    left: 0;
    z-index: 200;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    width: 350px;
    max-height: 468px;
    display: flex;
    flex-direction: column;
}

.gif-picker-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.gif-search-input {
    padding: 8px 10px;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 14px;
}

.gif-search-input:focus {
    outline: none;
    border-color: #666;
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    max-height: 400px;
}

.gif-option {
    background: none;
    border: 1px solid #333;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    transition: all 0.2s;
}

.gif-option:hover {
    border-color: #666;
    transform: scale(1.05);
}

.comment-composer textarea {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 6px;
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
}

.comment-composer textarea:focus {
    border-color: #f96d00;
    outline: none;
}

.comment-composer textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.comment-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

.comment-composer-actions .btn-save {
    width: auto;
    padding: 8px 18px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-composer-actions .btn-save svg {
    width: 18px;
    height: 18px;
}
.btn-save{
    box-shadow:none;
}
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Wraps composer + list together so the loading overlay below can cover both as one piece
   instead of just the list - covers whatever area they take up at any screen size since it's
   sized off this relative parent, not fixed pixels. */
.comments-body {
    position: relative;
}

.comments-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 14px);
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.comments-loading-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.comments-loading-overlay .comments-loading-ring {
    width: clamp(1.5rem, 4vw, 2.75rem);
    height: clamp(1.5rem, 4vw, 2.75rem);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary, #f96d00);
    border-radius: 50%;
    animation: loading-rotate 0.8s linear infinite;
}

.comments-loading-overlay .comments-loading-text {
    color: #ddd;
    font-size: clamp(0.8rem, 1.6vw, 1rem);
}

.comment-row {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #222;
}

.comment-row.comment-reply {
    padding: 12px 0;
    border-bottom: none;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #333;
    flex-shrink: 0;
}

.comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-weight: 700;
    font-size: 0.9rem;
}

.comment-body-wrap {
    flex: 1;
    min-width: 0;
}

.comment-meta-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.comment-username {
    color: #f96d00;
    font-weight: 700;
    font-size: 0.92rem;
}

.comment-time {
    color: #666;
    font-size: 0.78rem;
}

.comment-text {
    color: #ddd;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-spoiler {
    background: #333;
    color: transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s ease, background 0.15s ease;
}

.comment-spoiler.revealed {
    background: transparent;
    color: inherit;
}

.comment-quote {
    margin: 6px 0;
    padding: 4px 12px;
    border-left: 3px solid #f96d00;
    color: #aaa;
    background: rgba(255, 255, 255, 0.03);
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.comment-vote-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.comment-vote-btn:hover {
    color: #f96d00;
    background: rgba(249, 109, 0, 0.1);
}

.comment-score {
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.comment-reply-btn,
.comment-delete-btn-text {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    margin-left: 4px;
    border-radius: 4px;
}

.comment-reply-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.comment-delete-btn-text:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

.comment-reply-composer {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-reply-composer textarea {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 8px;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.88rem;
}

.comment-reply-composer .btn-small {
    align-self: flex-end;
}

.comment-show-replies-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 10px;
    padding: 4px 0;
}

.comment-show-replies-btn:hover {
    color: #f96d00;
}

.comment-replies-wrap {
    margin-top: 4px;
    padding-left: 16px;
    border-left: 2px solid #262626;
}

/* Search Results Page */
.results-container {
    padding: 100px 50px;
    background: #000;
    min-height: 100vh;
}

.results-header {
    margin-bottom: 30px;
    color: #fff;
}

.results-header span {
    color: #f96d00;
}

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.movie-card {
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.movie-card:hover {
    transform: scale(1.05);
}

.movie-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

.movie-card-info {
    padding: 15px;
    color: #fff;
}

.movie-card-info h3 {
    margin: 0;
    font-size: 1rem;
}

.movie-card-info p {
    margin: 5px 0 0;
    color: #888;
    font-size: 0.8rem;
}

/* Movie Info: Forum CTA bar */
.forum-cta-bar {
    margin: 30px auto 10px;
    background: #0f0f0f;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.forum-cta-text h3 {
    margin: 0 0 6px 0;
    color: #fff;
    font-size: 1.1rem;
}

.forum-cta-text p {
    margin: 0;
    color: #bbb;
    font-size: 0.9rem;
}

.forum-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f96d00;
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    white-space: nowrap;
}

.forum-cta-action:hover {
    background: #ff7b1a;
    transform: translateY(-2px);
}


@media (max-width: 700px) {
    #recommendedSection .browse-grid-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 8px;
    }
    #recommendedSection .browse-grid-row .grid-card {
        min-height: 220px;
    }
    .forum-cta-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .forum-cta-action {
        width: 100%;
        justify-content: center;
    }
}

/* Hover effect for playlist and post items */
.playlist-item:hover,
.post-item:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-secondary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* Playlist movie search (Add More modal) */
.playlist-search-wrapper {
    margin: 10px 0 14px;
    position: relative;
}

.playlist-search-results {
    position: relative;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.playlist-search-results.active {
    display: block;
}

.playlist-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.playlist-search-item:last-child {
    border-bottom: none;
}

.playlist-search-item img {
    width: 50px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-tertiary);
}

.playlist-search-info {
    flex: 1;
}

.playlist-search-info h5 {
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.playlist-search-info p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.playlist-search-add {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f96d00;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.playlist-search-add:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.reviews-section{
    margin-top: 20px;
}
.playlist-search-loading,
.playlist-search-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
@media (max-width: 1100px) {
    .movie-poster-large{
        width: 250px;
    }
}
@media (max-width: 868px) {
    .cta-strip {
        align-items: flex-start;
    }
    .movie-poster-large{
        width: 100%;
    }
    .movie-content{
        flex-direction: column;
    }
    .cta-strip > div:first-child {
        width: 100%;
        text-align: center;
    }

    .cta-actions {
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /* .cta-actions .apply-btn {
        width: min(360px, 100%);
        text-align: center;
    } */

    .cta-strip .cta-device-support {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        flex: 1 1 100%;
    }

    .cta-strip .cta-device-support h3 {
        text-align: center;
    }
}

@media (max-width: 770px) {
    .logo-imgS {
        height: 24px;
    }

    .site-footer {
        padding: 60px 0 24px;
    }

    .footer-content {
        width: 94%;
    }

    .footer-grid {
        gap: 28px;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }


}

@media (max-width: 680px) {

    .logo-imgS {
        height: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 580px) {
    .action-buttons{
        flex-direction: column;
    }

    .logo-imgS {
        height: 20px;
        display: block;
    }

    .footer-content {
        width: 92%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .footer-brand{
        display: none;
    }
    .footer-col h4 {
        text-align: center;
    }

    .footer-col ul {
        text-align: center;
    }

    .footer-col li {
        margin-bottom: 10px;
    }

    .legal-links {
        justify-content: center;
    }
}

@media (max-width: 385px) {
    .search-box {
        width: auto;
    }
}
@media (max-width: 460px) {
    .logo-imgS {
        display: none;
    }

}

/* ── Movies / Anime Mode Toggle (Nav slider) ─────────────────── */
.mode-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 8px;
}

.mode-toggle-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #666;
    transition: color 0.2s;
    letter-spacing: 0.04em;
    white-space: nowrap;
    user-select: none;
}

/* Active side lit up */
.mode-toggle-wrap .mode-toggle-label:first-child { color: #f96d00; }
.mode-toggle-wrap.anime-active .mode-toggle-label:first-child { color: #555; }
.mode-toggle-wrap.anime-active .mode-toggle-label:last-child  { color: #f96d00; }

.mode-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.mode-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.mode-toggle-slider {
    position: absolute;
    inset: 0;
    background: #222;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    border: 1px solid #3a3a3a;
}

.mode-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #666;
    border-radius: 50%;
    transition: transform 0.25s, background 0.25s;
}

.mode-toggle-switch input:checked + .mode-toggle-slider {
    background: rgba(249, 109, 0, 0.15);
    border-color: rgba(249, 109, 0, 0.5);
}

.mode-toggle-switch input:checked + .mode-toggle-slider::before {
    transform: translateX(18px);
    background: #f96d00;
}

@media (max-width: 768px) {
    .mode-toggle-wrap {
        margin: 0 4px;
        gap: 5px;
    }
    .mode-toggle-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 500px) {
    .mode-toggle-label {
        display: none;
    }
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

 
/* ── Player Overlay Controls — Movie Player Buttons & Quality Selector ────────────────── */
#moviePlayerFrameWrap {
    position: relative;
}
#moviePlayerFrameWrap button,
#moviePlayerFrameWrap select {
   
    /* bottom: 12px; */
    /* top: 5px; */
    left: 5px;
    /* background: rgba(0,0,0,0.6); */
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    /* backdrop-filter: blur(4px); */
    transition: background 0.2s ease, transform 0.2s ease;
}
 
#moviePlayerFrameWrap button:hover,
#moviePlayerFrameWrap select:hover {
    background: rgba(0,0,0,0.5);
}

/* Double/multi-click skip-10 feedback (see wireDoubleClickZones in moviePlayer.js) - a big,
   translucent icon over whichever side was clicked, showing the running total for the current
   click burst. */
.kaa-skip-overlay {
    position: absolute;
    top: 50%;
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 20;
}
.kaa-skip-overlay--left { left: 0; }
.kaa-skip-overlay--right { right: 0; }
.kaa-skip-overlay--visible { opacity: 1; }
.kaa-skip-overlay-icon svg { width: 168px; height: 168px; fill: rgba(40,40,40,0.5); }
.kaa-skip-overlay-label {
    color: rgba(40,40,40,0.5);
    font-size: 4.5rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin-top: -90px;
}
/* Shared Styles */
#btnBack10,
#btnForward10,
#btnPiP {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ff8000;
}

/* Hover States */
#btnBack10:hover,
#btnForward10:hover,
#btnPiP:hover {
    color: #ff9d33;
}

/* Positioning */
#btnBack10    { left: 12px; }
#btnForward10 { left: 60px; }
#btnPiP       { left: 108px; }
#btnFullscreen { right: 12px; }

#moviePlayerFrameWrap select,
#btnBack10,
#btnForward10,
#btnFullscreen,
#btnPiP {
    display: none !important;
}
/* THE ACTUAL USEFUL SHIT */
/* Was #F1D6AB (light gold) - Plyr uses this variable directly for things our other #ff8000
   overrides below don't touch (progress bar fill, volume slider thumb/track), so the player
   looked gold in some spots and orange in others. Matches the embed player (server.js) now -
   one consistent orange throughout. */
:root {
    --plyr-color-main: #ff8000;
}

/* .player-main-pane/#moviePlayerFrameWrap (movieInfo.html) never actually had this rule despite
   the "aspect-ratio:16/9" comment left on .player-main-pane in the HTML - with nothing sizing it,
   the video/iframe/plyr container all fell back to the browser's default replaced-element size
   (300x150), squishing the whole player down to ~150px tall regardless of how wide the page is. */
.player-main-pane {
    width: 100%;
    aspect-ratio: 16 / 9;
}
#moviePlayerFrameWrap {
    height: 100%;
}

.plyr {
    border-radius: 12px;
}

.plyr--video {
    background: #000;
}

.plyr__control:hover {
    background: rgba(241,214,171,.2);
}
/* Entire settings popup */
/* Main controls background */
.plyr--video .plyr__control--overlaid {
    background: rgba(255, 128, 0, 0.9);
}

.plyr--full-ui input[type=range] {
    color: #ff8000;
}

/* Bottom control bar */
.plyr--video .plyr__controls {
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.85)
    );
    backdrop-filter: blur(3px);
}

/* Buttons */
.plyr__control {
    color: #ffffff;
}

.plyr__control:hover,
.plyr__control[aria-expanded="true"] {
    background: #ff8000;
    color: #fff;
}

/* Settings menu */
.plyr__menu__container {
    background: #121212 !important;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* Submenu panels (e.g. the captions language list) have no built-in cap, so a
   long language list (Kino's OpenSubtitles tracks can run 30-40+) just grows
   past the player instead of scrolling. Cap it and let it scroll internally. */
.plyr__menu__container [role="menu"] {
    max-height: min(50vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ff8000 #1a1a1a;
}

.plyr__menu__container [role="menu"]::-webkit-scrollbar {
    width: 6px;
}

.plyr__menu__container [role="menu"]::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.plyr__menu__container [role="menu"]::-webkit-scrollbar-thumb {
    background: #ff8000;
    border-radius: 3px;
}

/* Menu items */
.plyr__menu__container .plyr__control {
    color: #e0e0e0;
}

.plyr__menu__container .plyr__control:hover {
    background: rgba(255,128,0,.15);
    color: #ff8000;
}

/* Currently selected item */
.plyr__menu__container .plyr__control[aria-checked="true"] {
    background: rgba(255,128,0,.2);
    color: #ff8000;
}

/* EN / RU badges */
.plyr__badge {
    background: #ff8000;
    color: #000;
}

/* Back button */
.plyr__control--back {
    border-bottom: 1px solid #222;
    background: #181818;
}

/* Settings icon rotation */
.plyr__control[aria-expanded="true"] svg {
    transform: rotate(90deg);
}
button[data-plyr="settings"][aria-haspopup="true"]:has(.plyr__menu__value:contains("undefined")) {
    display:none;
}

/* Volume: same treatment as the public embed player - stock Plyr reserves 60-90px of permanent
   horizontal space for the range track even though it's only ever touched to mute/adjust for a
   second, which squeezes the progress/duration bar next to it. Popping it up as a vertical
   slider above the button on hover/focus (hidden by default, only takes space when open) frees
   that width back up, same idea as YouTube's own volume control. */
/* Values kept in sync with the late-loading override in movieInfo.html's own <head> (declared
   after plyr.css, which is what actually makes it win - see that block's own comment). This copy
   is a fallback/reference; !important throughout for the same reason as that one. */
.plyr__volume { position: relative !important; }
.plyr__volume input[type="range"] {
    position: absolute !important;
    bottom: calc(100% + 30px) !important;
    left: calc(50% + 5px) !important;
    /* rotated range inputs measure their OWN width along the now-vertical track, so "width" here
       is the slider's vertical length once turned upright, not its (invisible) horizontal footprint */
    width: 70px !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: translateX(-50%) rotate(-90deg) !important;
    transform-origin: center !important;
    backdrop-filter: blur(3px);
    border-radius: 6px !important;
    padding: 8px 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    margin: 0 !important;
}
/* Invisible hover-bridge spanning the gap between the button and the popped-up slider (currently
   30px, matching "bottom: calc(100% + 30px)" above - keep in sync if that gap ever changes).
   Without it, moving the mouse from the button straight up toward the slider crosses a dead
   strip that isn't part of .plyr__volume's own hover area, so :hover disengages and the slider
   vanishes right as you try to reach it. */
.plyr__volume::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    width: 70px;
    height: 30px;
}
.plyr__volume:hover input[type="range"],
.plyr__volume:focus-within input[type="range"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Captions Settings (font size/color/weight + manual sync offset) - see injectCcSettingsMenu in
   moviePlayer.js. Different providers ship separately-timed rips of the same episode, so a
   caption borrowed from a different provider than the one actually serving the video can drift
   out of sync - not fixable at the source, so this gives the viewer a manual +-1s nudge instead.
   --cc-size/--cc-color/--cc-weight are set on :root by applyCcStyle(). */
.plyr__caption {
    font-size: var(--cc-size, 1.05vw) !important;
    color: var(--cc-color, #fff) !important;
    font-weight: var(--cc-weight, 400) !important;
    background: transparent !important;
    padding: 0 !important;
}
/* Background off by default - Plyr's own caption box otherwise always sits on a solid black
   backing. html.cc-bg-on is toggled by applyCcStyle() based on ccPrefs.bg; a plain var()-based
   background/padding pair can't branch on "is this transparent or not" in CSS itself, so the
   "on" state's background/padding are their own rule instead. */
html.cc-bg-on .plyr__caption {
    background: rgba(0,0,0,.8) !important;
    padding: .2em .5em !important;
    border-radius: 3px;
}
.cc-settings-panel { padding: 10px 0; }
.cc-settings-panel .plyr__control--back { width: 100%; }
.cc-settings-note { padding: 4px 14px 12px; margin: 0; font-size: 0.78rem; line-height: 1.4; color: #999; }
.cc-settings-row { padding: 6px 14px; }
.cc-settings-row label { display: block; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #999; margin-bottom: 8px; }
.cc-settings-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-settings-choices button { border: 1px solid #2d2d2d; background: #1a1a1a; color: #ddd;
    border-radius: 6px; padding: 5px 10px; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.cc-settings-choices button:hover { border-color: #ff8000; }
.cc-settings-choices button.active { background: #ff8000; border-color: #ff8000; color: #000; font-weight: 600; }
.cc-color-swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; position: relative; }
.cc-color-swatch.active { border-color: #ff8000; box-shadow: 0 0 0 2px #ff8000; }
.cc-offset-row { display: flex; align-items: center; gap: 10px; }
.cc-offset-row button { width: 34px; height: 30px; border: 1px solid #2d2d2d; background: #1a1a1a;
    color: #fff; border-radius: 6px; cursor: pointer; font-size: 1rem; font-family: inherit; }
.cc-offset-row button:hover { border-color: #ff8000; color: #ff8000; }
.cc-offset-value { min-width: 46px; text-align: center; font-size: 0.85rem; color: #eee; font-variant-numeric: tabular-nums; }
/* The download panel's own copy of this same panel (see renderCcBurnStylePanel in
   moviePlayer.js) isn't inside a Plyr dropdown, so it needs its own visual container to read as
   a distinct sub-section of the burn row instead of loose controls. */
.cc-burn-style { margin-top: 10px; padding: 10px 4px 4px; border-top: 1px solid #2a2a2a; }
.cc-burn-style .cc-settings-row { padding: 6px 0; }
.kaa-download-btn-top {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 42px !important;
    height: 42px;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .25s ease,
        background .2s ease;

    background: rgba(0,0,0,.65);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    z-index: 999;
}
.download-progress-fill{
    transition: width .15s linear;
}
.download-progress-fill-secondary{
    background: linear-gradient(90deg, #ffb366 0%, #ff8000 100%);
    box-shadow: 0 0 10px rgba(249, 109, 0, 0.45);
}
.download-modal-warning {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #e63c3c;
    text-align: center;
    line-height: 1.35;
}
.download-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
}
.download-modal-overlay.collapsed {
    display: none !important;
}
.download-modal-content {
    width: min(460px, calc(100vw - 24px));
    background: linear-gradient(180deg, #111 0%, #090909 100%);
    border: 1px solid rgba(255, 128, 0, 0.35);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 128, 0, 0.08) inset;
    padding: 22px 20px 18px;
    color: #f3f3f3;
    font-family: inherit;
}
.download-dock {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 28px));
    pointer-events: none;
}
.download-dock-card {
    pointer-events: auto;
    background: linear-gradient(180deg, #111 0%, #090909 100%);
    border: 1px solid rgba(255, 128, 0, 0.35);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    padding: 10px;
    color: #f3f3f3;
    overflow: hidden;
}
.download-dock-card.collapsed .download-dock-body {
    display: none;
}
.download-dock-card.done {
    opacity: 0.9;
}
.download-dock-card-row {
    display: grid;
    grid-template-columns: 54px 1fr 32px;
    gap: 10px;
    align-items: center;
}
.download-dock-thumb {
    width: 54px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    background: #1b1b1b;
    border: 1px solid rgba(255, 128, 0, 0.2);
}
.download-dock-meta {
    min-width: 0;
}
.download-dock-title {
    color: #fff;
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-dock-episode {
    color: #ffb366;
    font-size: 0.8rem;
    margin-top: 2px;
}
.download-dock-status {
    color: #c8c8c8;
    font-size: 0.76rem;
    margin-top: 4px;
}
.download-dock-collapse {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: #1e1e1e;
    color: #ff8000;
    font-size: 1rem;
    cursor: pointer;
}
.download-dock-body {
    margin-top: 10px;
}
.download-dock-subline {
    margin-top: 8px;
    color: #ffb366;
    font-size: 0.8rem;
    line-height: 1.3;
}
.download-modal-title {
    margin: 0 0 14px 0;
    color: #ff8000;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.download-modal-text {
    color: #d5d5d5;
    text-align: center;
    line-height: 1.35;
}
.download-modal-subheading {
    margin: 14px 0 8px;
    color: #ffb366;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#downloadSubsHint{
    color: #e63c3c;
    margin-top:5px;
}
.downloadButtonMovieInfoParent{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.download-progress-track {
    width: 100%;
    height: 14px;
    background: #1d1d1d;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 128, 0, 0.15);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
.download-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff6a00 0%, #ff9a3d 100%);
    border-radius: inherit;
    transition: width .15s linear;
    box-shadow: 0 0 10px rgba(255, 128, 0, 0.35);
}
.download-subs-choice {
    display: flex;
    color: #f96d00;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 10px 0 4px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.download-subs-choice input {
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    margin: 0;
    border: 1px solid #4a4a4a;
    border-radius: 3px;
    background: #252525;
    cursor: pointer;
}
.download-subs-choice input:checked {
    background: #ff8000;
    border-color: #ff9b38;
}
.download-subs-choice input:checked::after {
    content: "✓";
    color: #171717;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}
.download-subs-hint {
    margin: 2px 0 10px;
    color: #ffb366;
    font-size: 0.9rem;
}
.download-subs-picker-wrap {
    margin: 6px 0 10px;
}
.download-subs-picker {
    width: 100%;
    box-sizing: border-box;
    background: #161616;
    color: #f5f5f5;
    border: 1px solid #2d2d2d;
    border-radius: 10px;
    padding: 8px 30px 8px 10px;
    font-size: 0.95rem;
    outline: none;
    box-shadow: 0 2px 8px rgba(255, 128, 0, 0.12);
    /* Without this the browser draws its own native dropdown-arrow control on the right side of
       the box - on hover/focus that native control paints its own (light/white) background,
       clashing with the dark theme around it. appearance:none removes it entirely in favor of
       a CSS-drawn chevron below, so there's no native widget left to mismatch on hover. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}
.download-subs-picker:focus {
    border-color: #ff8000;
    box-shadow: 0 0 0 2px rgba(255, 128, 0, 0.15);
}
.download-subs-picker:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.anime-download-panel {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    padding: 12px 14px;
    background: #040404;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}
.anime-download-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.anime-download-panel__title {
    color: #ff8000;
    font-weight: 700;
    font-size: 0.9rem;
}
.anime-download-panel__close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}
.anime-download-panel__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.anime-download-panel__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}
/* Both download panels have six independent controls. Use a real grid on desktop so every
   column uses the player width rather than letting a flex row leave a dead strip at the end. */
#animeDownloadPanel .anime-download-panel__row,
#movieDownloadPanel .anime-download-panel__row {
    display: grid;
    grid-template-columns: minmax(145px, 1.25fr) minmax(70px, 0.65fr) minmax(70px, 0.65fr) minmax(180px, 1.35fr) minmax(155px, 1.2fr) minmax(105px, 0.9fr);
    gap: 16px;
}
#animeDownloadPanel .anime-download-panel__row > *,
#movieDownloadPanel .anime-download-panel__row > * {
    min-width: 0;
}
#animeDownloadPanel .anime-download-panel__burn,
#movieDownloadPanel .anime-download-panel__burn {
    min-width: 0;
    max-width: none;
}
#animeDownloadPanel .anime-download-panel__go,
#movieDownloadPanel .anime-download-panel__go {
    min-width: 0;
    align-items: stretch;
}
#animeDownloadPanel .anime-download-panel__go-btn,
#movieDownloadPanel .anime-download-panel__go-btn {
    width: 100%;
}
.anime-download-panel__label {
    font-size: 0.78rem;
    color: #999;
    margin-bottom: 4px;
}
.anime-download-panel__group {
    flex-direction: column;
    align-items: stretch;
}
.anime-download-panel .anime-download-panel__group .audio-btn {
    width: 100%;
    margin: 0;
}
/* Panel buttons reuse .audio-btn for styling but shouldn't carry its glow - too busy against
   this many stacked buttons in one small panel. */
.anime-download-panel .audio-btn {
    box-shadow: none;
}
.anime-download-panel .audio-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.anime-download-panel__hsub {
    display: none;
}
/* VidV's own file list (#dlVidvaultRow) can carry a lot more buttons than every other row here
   (up to ~5 file options plus one per subtitle language, 15+ total for a well-subbed episode) -
   the shared .anime-download-panel__group column layout above reads fine for 3-5 buttons but
   turns into an unreasonably long single-column list at that count, worse on mobile where the
   whole panel is already narrow. Wraps into a real grid instead - fixed-column-count on mobile
   (2 columns fits this panel's narrow width better than an auto-fill minmax that would still
   collapse to 1 on a small viewport), auto-fill on wider screens.
   #animeDownloadPanel .anime-download-panel__row ITSELF is a CSS grid with 6 fixed column
   tracks (one per the panel's original 6 children - see that rule above), not flex -
   `flex: 1 1 100%` on dlVidvaultWrap was a pure no-op there and it was just landing in
   whatever narrow implicit cell grid auto-placement gave it, same problem the subtitle
   divider label below had. `grid-column: 1 / -1` is the actual way to span every column in a
   grid parent - used on both dlVidvaultWrap itself (so its row gets the full panel width to
   work with) and the "Subtitles" divider inside it (so file options and subtitle buttons
   don't get squeezed into whatever single narrow auto-placed column they'd otherwise land in). */
#dlVidvaultWrap {
    grid-column: 1 / -1;
}
#dlVidvaultRow.anime-download-panel__group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}
#dlVidvaultRow .audio-btn {
    width: 100%;
    white-space: normal;
    line-height: 1.25;
    padding: 8px 10px;
}
#dlVidvaultRow .anime-download-panel__label {
    grid-column: 1 / -1;
    margin-top: 6px;
}
@media (max-width: 520px) {
    #dlVidvaultRow.anime-download-panel__group {
        grid-template-columns: repeat(2, 1fr);
    }
}
.anime-download-panel__burn {
    min-width: 180px;
    max-width: 260px;
    flex: 0 1 auto;
}
.anime-download-panel__burn-label {
    justify-content: flex-start;
    margin: 0 0 6px;
    font-size: 0.85rem;
}
.anime-download-panel__go {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.anime-download-panel__go-btn {
    padding: 8px 20px;
}
.anime-download-panel__status {
    color: #999;
    font-size: 0.85rem;
}
.anime-download-panel__hint {
    font-size: 0.75rem;
    color: #777;
}
.plyr:hover .kaa-download-btn-top,
.plyr.plyr--paused .kaa-download-btn-top,
.plyr.plyr--stopped .kaa-download-btn-top {
    opacity: 1;
    pointer-events: auto;
}
.kaa-download-btn-top:hover {
    background: #ff8000;
}
.specialVisibilityExpemption{
    display: block !important;
}
.kaa-download-btn-top svg {
    width: 20px;
    height: 20px;
}
/* On tablet widths the desktop six-column row has no room once the navigation rail is present.
   Keep the quick source/type/quality controls together, then give compression and subtitle
   options their own usable rows instead of allowing them to clip horizontally. */
@media (max-width: 1100px) {
    #animeDownloadPanel .anime-download-panel__row,
    #movieDownloadPanel .anime-download-panel__row {
        grid-template-columns: minmax(125px, 1.35fr) minmax(70px, 0.7fr) minmax(70px, 0.7fr);
        gap: 12px;
    }
    #animeDownloadPanel #dlCompressionWrap,
    #movieDownloadPanel #mdlCompressionWrap {
        grid-column: 1 / -1;
    }
    #animeDownloadPanel #dlBurnWrap,
    #movieDownloadPanel #mdlBurnWrap {
        grid-column: 1 / span 2;
    }
    #animeDownloadPanel .anime-download-panel__go,
    #movieDownloadPanel .anime-download-panel__go {
        grid-column: 3;
        align-self: end;
    }
}

@media (max-width: 660px) {
    .anime-download-panel {
        padding: 12px;
    }
    #animeDownloadPanel .anime-download-panel__row,
    #movieDownloadPanel .anime-download-panel__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    #animeDownloadPanel .anime-download-panel__row > :first-child,
    #movieDownloadPanel .anime-download-panel__row > :first-child,
    #animeDownloadPanel #dlCompressionWrap,
    #movieDownloadPanel #mdlCompressionWrap,
    #animeDownloadPanel #dlBurnWrap,
    #movieDownloadPanel #mdlBurnWrap,
    #animeDownloadPanel .anime-download-panel__go,
    #movieDownloadPanel .anime-download-panel__go {
        grid-column: 1 / -1;
    }
    #animeDownloadPanel #dlSourceRow,
    #movieDownloadPanel #mdlSourceRow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #animeDownloadPanel #dlSourceRow .audio-btn:last-child,
    #movieDownloadPanel #mdlSourceRow .audio-btn:last-child {
        grid-column: 1 / -1;
    }
    .anime-download-panel__burn-label {
        line-height: 1.25;
    }
}

@media (max-width: 430px) {
    #animeDownloadPanel .anime-download-panel__row,
    #movieDownloadPanel .anime-download-panel__row {
        grid-template-columns: minmax(0, 1fr);
    }
    #animeDownloadPanel .anime-download-panel__row > *,
    #movieDownloadPanel .anime-download-panel__row > * {
        grid-column: 1 / -1;
    }
}
.kaa-download-menu {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(2px);
}
.kaa-download-menu__card {
    width: min(210px, 100%);
    max-height: calc(100% - 12px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: #0b0b0b;
    color: #f5f5f5;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62);
    font-size: 14px;
}
.kaa-download-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 5px 8px;
    font-weight: 700;
}
.kaa-download-menu__close {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #aaa;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.kaa-download-menu__close:hover { background: #252525; color: #fff; }
.kaa-download-menu__section-label {
    padding: 6px 6px 4px;
    color: #a3a3a3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.kaa-download-menu__options { display: grid; gap: 2px; }
.kaa-download-menu__audio { grid-template-columns: 1fr 1fr; }
.kaa-download-menu__option,
.kaa-download-menu__start {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    padding: 7px 9px;
    background: transparent;
    color: #f5f5f5;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.kaa-download-menu__option:hover { background: #252525; }
.kaa-download-menu__option.active {
    background: #252525;
    color: #fff;
    font-weight: 700;
}
.kaa-download-menu__start {
    width: 100%;
    margin-top: 10px;
    background: #f5f5f5;
    color: #101010;
    font-weight: 800;
    text-align: center;
}
.kaa-download-menu__start:hover { background: #fff; }
.kaa-download-menu__loading { padding: 14px 6px; color: #bbb; text-align: center; }
/* ── RESPONSIVE MEDIA QUERIES (1200px → 620px) ────────────────── */
@media (max-width: 1386px) {
    .navbar-page-links{
        display: none;
    }
    .search-box{
        width: 45%;
    }
    /* Below here the 4 action buttons (Watch Now/Trailer/List/Playlist) started running out of
       row width - with no white-space:nowrap the button LABELS themselves used to wrap mid-word
       ("Watch"/"Now" stacked) instead of the row just flowing to a second line, which looked
       broken rather than responsive. nowrap+flex-wrap on .action-buttons (see base rules) now
       makes a full row wrap cleanly instead; tightening padding/font here just buys a bit more
       room before that wrap needs to happen at all. */
    .btn-watch {
        padding: 12px 22px;
        font-size: 1.05rem;
    }
}

@media (max-width: 1200px) {
    .movie-header{
        padding: 40px 20px !important;
    }
    .cta-strip {
        display: block;
    }
    .hero{
        min-height: clamp(32vh, 52vh, 650px);
    }
    .browse-page .hero {
        height: auto;
        max-height: none;
    }
    .browse-page .hero-glass-container {
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        overflow: hidden;
    }
    .browse-page .hero-content {
        grid-area: 1 / 1;
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 60px 8% 40px;
        background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 80%);
        box-shadow: inset 2px 0 0 rgba(0,0,0,0.9);
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }
    .browse-page .hero-trailer-side {
        grid-area: 1 / 1;
        position: relative;
        width: 100%; height: 100%;
        min-height: auto;
        border: 0 !important;
        z-index: 1;
        opacity: 0.5;
        pointer-events: none;
        background: transparent;
        clip-path: inset(1px);
    }
    .browse-page .hero-trailer-side::after,
    .browse-page .hero-trailer-side .trailer-tooltip {
        display: none !important;
    }
    .browse-page .slider-indicators {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        justify-content: center;
        width: 100%;
        padding: 14px 0 18px;
    }
    .hero-desc{
        max-width: none;
    }
        .movie-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .movie-poster-large {
        margin-bottom: 18px;
        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.62), 0 22px 48px rgba(0, 0, 0, 0.46), inset 0 -52px 48px rgba(0, 0, 0, 0.24);
        width: 100%;
        max-width: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.1) 68%, transparent 100%), linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 45%);
    }
    
    .action-buttons {
        /* order: 2; */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 12px;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    .movie-info-col {
        width: 100%;
    }
    .movie-poster-large-wrap {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .movie-poster-large-fade {
        position: absolute;
        left: 0; right: 0; bottom: 0; top: 0;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.38) 55%, rgba(0,0,0,0.0) 100%);
        border-radius: 18px;
    }
    .movie-poster-large {
        position: relative;
        z-index: 1;
    }
}
@media (max-width: 1120px) {
    .navbar-page-links {
        display: none;
    }
    .search-box{
        width: 60%;
    }
}
@media (max-width: 1100px) {
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-desc {
        display: -webkit-box;
        line-clamp: 4;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 67%;
    }
    .episode-list-section{
        height: 500px !important;
    }
}
.player-block-meta,
.player-block-downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-block-meta{
  justify-content: center;
  align-items: center;
}

.watch-more-label {
  font-size: 20px;
}

@media (max-width: 1000px) {
    .watch-more-label {
        font-size: 22px;
    }
    .downloadTextNextoBtn{
        display: none;
    }
    .player-episode
    { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        height: 100%; 
    }
    #animeDownloadWrap{
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0 !important;
        margin: 0 !important;
         gap: 12px;
    }
    .player-block-left{
        flex-direction: column !important;
        justify-content:left !important;
        align-content: center !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .player-info{
        display: none;
    }
        .two-column-layout{
        grid-template-columns: none !important;
    }
    .player-block{
        flex-direction: column;
    }
    .movie-title{
        overflow:visible;
        white-space: normal;
    }
    .btn-watch, .btn-list{
        padding: 15px;
        font-size: 1rem;
    }


    .discovery-two-col {
        display: block;
    }
    .discovery-two-col > .discovery-panel {        
        max-width: 100%;
        display: block;
    }
    .hero-main-poster{
            transform: scale(0.9);
    }
}

/* .personal-sections-flex used to block-ify inside the 1000px breakpoint above (alongside a lot
   of unrelated player/download rules) - by 1000px it was already too squashed before the layout
   had adapted, so this got its own earlier breakpoint instead. Kept as a separate block (not
   folded back into 1000px) specifically so it stays easy to retune independently of everything
   else sharing that width. */
@media (max-width: 1300px) {
    .personal-sections-flex {
        display: block;
        gap: 0;
    }
    .personal-sections-flex > .row,
    .personal-sections-flex > .personal-left-stack {
        width: 100%;
        min-width: 0;
    }
    .personal-sections-flex > .row {
        margin-bottom: 14px;
    }
    .personal-sections-flex > .personal-left-stack {
        column-gap: 4%;
        row-gap: 14px;
        align-items: stretch;
    }
    .personal-left-stack > #topGenreSection,
    .personal-left-stack > #becauseYouWatchedSection {
        width: 100%;
        margin: 0;
    }
    .personal-left-stack > #historyRowSection,
    .personal-left-stack > #watchStatusSection {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 850px) {
    .personal-sections-flex > .personal-left-stack {
        display: block;
    }
    .search-box{
        width: 80%;
       }
               .sidebar-nav-list {
        padding: 10px 8px;
        align-items: center;
    }
    .navbar{
        width: 90%;
        left: 69px;
        right: 0;
    }
    .home-split-row {
        display: block;
    }
    .left-sidebar {
        width: 70px;
        /* 55px */
    }
    .sidebar-brand-mark{
        display: none;
    }
    .sidebar-logo-wrap {
        padding: 12.5px 10px;
        justify-content: center;
    }
    .sidebar-logo-wrap .logo-link {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .sidebar-logo-wrap .logo-img {
        height: 38px;
    }
    body:not(.personal-list-page) {
        padding-left: max(70px, calc(50vw - 890px));
    }
    body.personal-list-page {
        padding-left: max(70px, calc(50vw - 890px));
    }
    .slider-indicators{
        bottom: 20px;
    }
/* Personal List Specific Styles */
body.personal-list-page .grid-card {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    aspect-ratio: 2/3 !important;
    font-size: 0.85rem;
}
@media (max-width: 850px) {
    body.personal-list-page .netflix-grid {
        grid-template-columns: 1fr !important;
    }
    body.personal-list-page .grid-card {
        width: 80vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin: 0 auto;
    }
    .movie-header{
        padding: 20px !important;
    }
}
    /* .sidebar-logo-wrap {
        justify-content: center;
        padding: 14px 10px 16px;
    } */
    /* .sidebar-nav-list {
        padding: 10px 8px;
        align-items: center;
    } */
    .sidebar-nav-list li {
        width: 100%;
    }
    .sidebar-nav-list a {
        justify-content: center;
        gap: 0;
        padding: 10px 8px;
    }
    .sidebar-nav-list a span {
        display: none;
    }
    .sidebar-nav-icon {
        width: 20px;
        height: 20px;
    }
    .sidebar-mode-wrap {
        justify-content: center;
        padding: 12px 8px;
    }
    .sidebar-mode-label {
        display: none;
    }
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero{
        min-height: clamp(32vh, 50vh, 640px);
    }
}

@media (max-width: 770px) {
    .movie-title{
        font-size: 2.6rem;
    }
    .hero-main-poster{
            transform: scale(0.7);
    }
    .hero-buttons .btn-play, .hero-buttons .btn-info {
        transform: scale(0.8);
    }
    .hero-buttons{
        gap: 0;
        padding: 0;
        /* padding: 15px 25px; */
    }
    .two-column-layout{
        grid-template-columns: none !important;
    }
    .session-host-info{
    flex-wrap: wrap;
    }
    .session-host-text {
        flex: 1; 
    }
    .join-btn {
    width: 100%; /* Forces the button to take up the full row underneath */
    margin-top: 8px; /* Adds space between the top row and the button */
}
}
@media (max-width: 730px) {
    .player-block-left{
        flex-direction: column !important;
    }
    .player-block-meta{
        align-items: start;
        margin-bottom: 14px;
    }
    .player-section-divider-Downloads{
        display: block;
    }
    .movie-title {
        word-break: break-word;
        hyphens: auto;
    }
    #watch2getherModal .w2g-content {
        display: flex;
        flex-direction: column;
        max-width: 92%;
    }
    .action-buttons{
        flex-direction: column;
    }
    .movie-plot{
        margin-bottom: 5px;
    }
    .btn-list, .btn-watch{
        width: 80%;
        min-width: 160px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        font-size: 1.08rem;
        letter-spacing: 0.01em;
        cursor: pointer;
        margin-right: 8px;
    }
    .roadmap-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    #animeRowPopular .grid-card {
        width: 50% !important;
        min-width: 50% !important;
        flex: 0 0 50% !important;
    }
    .hero{
        min-height: clamp(28vh, 50vh, 470px);
    }
    /* .slider-arrow{
        display: none;
    } */
    .hero.hero-main-page .hero-desc {
        max-width: 280px;
    }
    .hero-meta-row{
        display: none;
    }
    .qs-strip{
        flex-direction: column;
    }
           .slider-arrow{
        display: none;
    }
}

@media (max-width: 620px) {
    /* Logo clone injected into nav.navbar on mobile (js/mainPageControls.js
       injectLogoIntoNavbar) -- was previously a pile of inline styles set from
       JS on every clone; centralized here so it can be tuned in one place. */
        .hero-main-poster{
            display: none;
        }

        .w2g-hostbar{
            bottom: 75px;

        }
       .mobile-navbar-logo {
        display: flex;
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        width: auto;
        height: auto;
        padding: 12px 16px 12px 0;
        border: none;
        background: transparent;
        flex-shrink: 0;
    }

    /* 1. Give the list items relative positioning so the pseudo-element sticks to them */
    .sidebar-nav-list li {
        position: relative;
        /* Ensure your existing flex/layout code for the li remains here */
    }

    /* 2. Create the 80% divider line on every item EXCEPT the last one */
    .sidebar-nav-list li:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;           /* Snaps the divider line to the right edge of the li */
        top: 10%;           /* Centers it vertically (10% top + 80% height = 90%, leaving 10% bottom) */
        width: 1px;         /* Divider thickness */
        height: 80%;        /* Restricts the line to 80% of the li height */
        background-color: #202020;
    }
    .hero-title{
        font-size: clamp(2.2rem, 4vw, 1.8rem) !important;
    }
    .hero-desc{
        max-width: 200px;
        overflow: hidden;
    }
    .navbar{
        width: 100%;
        left: 0;
        right: 0;
        padding: 0 12px;
        gap: 8px;
    }
    /* Top navbar was way too cramped below ~600px -- Home/Browse/etc already
       moved to the bottom bar by this point, so free up room for the search
       box specifically by trimming the other nav-tools items. */
    .nav-tools {
        gap: 10px;
    }
    .search-box {
        width: 100%;
    }
    #navUsername {
        display: none;
    }
    .account-trigger {
        gap: 0;
        padding: 4px;
    }
    body:not(.personal-list-page) {
        padding-left: max(0px, calc(50vw - 890px));
    }
    .hero-main-body {
        font-size: 0.85rem;
    }
    .hero-main-body h1 {
        font-size: clamp(2.2rem, 4vw, 1.8rem) !important;
    }
    .hero-main-body p {
        font-size: 0.8rem !important;
    }
    .hero-buttons {
        display: none;
        flex-direction: column;
        gap: 10px;
        width:50%;
        font-size: 0.9rem;
    }
    .hero-buttons .apply-btn,
    .hero-buttons .btn-secondary {
        width: 100%;
    }
    body{
        padding-left: max(60px, calc(50vw - 890px));
    }

    .hero.hero-main-page .hero-desc {
        max-width: 200px;
    }
    .hero{
        min-height: clamp(28vh, 39vh, 470px);
    }
    
    /* Mobile Bottom Sidebar */
    .left-sidebar {
        display: none;
    }
    .bottom-sidebar {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 78px;
        background: #080808;
        border-top: 1px solid rgba(43, 43, 43, 0.9);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        z-index: 1300;
        top: auto;
        border-right: none;
        padding: 0;
    }
    .bottom-sidebar .sidebar-logo-wrap {
        display: none;
    }
    .bottom-sidebar .sidebar-nav-list {
        flex-direction: row;
        gap: 0;
        overflow: hidden;
        padding: 8px;
        flex: 1;
        align-items: center;
        justify-content: space-around;
        /* 1. Remove standard border-right */
        border-right: none;
        /* 2. Add relative positioning so the pseudo-element aligns to this container */
        position: relative;
    }
    /* Home/Playlists/Forum/Calendar collapse into the "More" popup instead of
       taking a row slot -- their <li> stays in the DOM (data-nav-overflow
       marks them in every page's markup) so JS can clone them into the popup,
       it's just not shown here. */
    .bottom-sidebar .sidebar-nav-list li[data-nav-overflow="true"] {
        display: none;
    }

    /* 3. Create the fake 80% border */
    .bottom-sidebar .sidebar-nav-list::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;           /* Centers it vertically (10% top + 80% height + 10% bottom = 100%) */
        width: 1px;         /* Border thickness */
        height: 60%;        /* Your specific height */
        background-color: #202020;
    }
    /* .bottom-sidebar .sidebar-nav-list {
        flex-direction: row;
        gap: 0;
        overflow: hidden;
        padding: 8px;
        flex: 1;
        align-items: center;
        justify-content: space-around;
        border-right: 1px solid #202020;
    } */
    .sidebar-mode-wrap{
        border:none;
    }
    .bottom-sidebar .sidebar-nav-list li {
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    .bottom-sidebar .sidebar-nav-list a {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px;
        border-radius: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 0.7rem;
        gap: 3px;
        flex: 1;
        width: 100%;
    }
    .bottom-sidebar .sidebar-nav-list a span {
        display: inline;
        font-size: 0.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bottom-sidebar .sidebar-nav-list a:hover {
        background: rgba(255,255,255,0.05);
        border-bottom-color: #f96d00;
    }
    .bottom-sidebar .sidebar-nav-list a.sidebar-active {
        background: rgba(249, 109, 0, 0.08);
        color: #f96d00;
        border-bottom-color: #f96d00;
    }
    .bottom-sidebar .sidebar-mode-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        flex-shrink: 0;
        /* Requested row order: AnimeMode, Browse, Movies, My List,
           Watch2Gether, More -- mode-wrap is last in the DOM, order:-1 pulls
           it to the front without touching markup order in every page. */
        order: -1;
    }

    /* "More" trigger button -- lives in its own <li> appended to
       .sidebar-nav-list (see mainPageControls.js), so it inherits the same
       per-item flex:1 sizing as Browse/Movies/My List/Watch2Gether from
       ".bottom-sidebar .sidebar-nav-list li" instead of competing 1-for-1
       against the whole list as a sibling (that made it ~4x too wide). This
       button itself just needs to fill that li, same as the a tags do. */
    .mobile-nav-more-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        padding: 8px;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        color: rgba(255, 255, 255, 0.62);
        font-size: 0.65rem;
        font-family: inherit;
        cursor: pointer;
    }
    .mobile-nav-more-btn:hover,
    .mobile-nav-more-btn.active {
        background: rgba(255, 255, 255, 0.05);
        border-bottom-color: #f96d00;
        color: #fff;
    }

    /* Overflow popup: vertical menu, rightmost side, smooth in/out. Stays in
       the DOM at all times so the transition can play both ways; toggled
       purely via the .open class. */
    .mobile-nav-overflow-panel {
        position: fixed;
        right: 12px;
        bottom: calc(78px + 10px);
        z-index: 1301;
        display: flex;
        flex-direction: column;
        min-width: 200px;
        background: #101010;
        border: 1px solid rgba(43, 43, 43, 1);
        border-radius: 12px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
        padding: 6px;
        gap: 2px;
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        transform-origin: bottom right;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .mobile-nav-overflow-panel.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        z-index: 23001;
    }
    .mobile-nav-overflow-close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        width: 100%;
        padding: 4px 0 8px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(43, 43, 43, 0.8);
        margin-bottom: 4px;
        color: rgba(255, 255, 255, 0.45);
        cursor: pointer;
    }
    .mobile-nav-overflow-close svg {
        width: 18px;
        height: 18px;
    }
    .mobile-nav-overflow-close:hover {
        color: #fff;
    }
    .mobile-nav-overflow-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .mobile-nav-overflow-list a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .mobile-nav-overflow-list a:hover,
    .mobile-nav-overflow-list a.sidebar-active {
        background: rgba(249, 109, 0, 0.12);
        color: #f96d00;
    }
    .mobile-nav-overflow-list .sidebar-nav-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .bottom-sidebar .sidebar-mode-wrap .sidebar-mode-label {
        display: none;
    }
    /* Scaling the whole switch (not just track width/height by hand) keeps
       the knob size/travel proportioned automatically -- was too small to
       comfortably tap on a real screen. Default (center) transform-origin
       grew it symmetrically outward, pushing the left edge past the screen
       edge since it's the first item in the row -- pin growth to the right
       only so it expands into the row instead of off the left side. */
    .bottom-sidebar .mode-toggle-switch {
        transform: scale(1.5);
        transform-origin: left center;
    }
    .bottom-sidebar .mode-toggle-slider {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .bottom-sidebar .mode-toggle-slider::after {
        content: "M";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 6px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.65rem;
        z-index: 0;
        pointer-events: none;
    }
    .bottom-sidebar .mode-toggle-switch input:checked + .mode-toggle-slider::after {
        content: "⛩";
        justify-content: flex-start;
        padding-left: 6px;
    }
    .bottom-sidebar .mode-toggle-slider::before {
        z-index: 1;
    }
    .sidebar-nav-icon {
        width: 16px;
        height: 16px;
    }
    body {
        padding-left: max(60px, calc(50vw - 890px));
        padding-bottom: 88px;
    }
    #recommendedSection .browse-grid-row{
        grid-template-columns: repeat(3, 1fr);
    }
    .card-title-name{
        font-size: 0.8rem;
        
    }
    .slider-indicators{
        bottom: 50px;
    }
    body.personal-list-page {
        /* padding-left: max(70px, calc(50vw - 890px)); */
        padding-left: 20px;
        padding-right: 20px;
    padding-top: 50px;
}
}
@media (max-width: 510px) {
.logo-img{
    height: 40px;
}
    .actor-block-name{
        font-size: 0.9rem;
    }
    .actor-block{
        max-width: 210px !important;
        margin-bottom: 0;
    }
    .actor-block-pic{
        width: 60px;
        height: 60px;
    }
    #ctaPrimaryBtn, #ctaSecondaryBtn{
        max-width: 60%;
    }
    .about-text{
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    }
    #ctaSecondaryBtn{
        margin-bottom: 10px;
    }
    .hero {
        min-height: clamp(28vh, 50vh, 470px);
    }
    .disc-card{
        width: 85px;
    }
    .roadmap-section{
        padding: 60px 12px 70px;
    }
    .settings-grid{
        display: block;
    }
    .device-list{
        grid-template-columns: repeat(1, minmax(110px, 1fr));
    }
    .movie-header {
        padding: 10px !important;
    }
    .movie-title{
        font-size: 2.3rem;
        overflow-wrap: break-word;
        word-break: break-all;
        hyphens: auto;
    }
    #dotMovieMetaSpec{
        display: none;
    }
    .movie-meta{
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 16px; 
    }
    .row-header-flex{
        align-items:start;
        flex-direction: column;
    }
    .reviews-section{
        padding-left: 0;
        padding-right: 10px;
        padding-bottom: 0;
    }
    .comments-list{
        padding: 0;
    }
    .movie-plot{
        font-size: 1rem;
    }
    .btn-list, .btn-watch {
        width: 90%;
    }
    .movie-content{
        gap: 20px;
    }
    .detail-value{
        word-break: break-word;
        hyphens: auto;
    }
    .details-grid{
        gap: 10px 5px;
    }
}

@media (max-width: 470px) {
.bottom-sidebar .mode-toggle-switch{
        transform: scale(1.2);
}

}

@media (max-width: 450px) {
    .netflix-grid{
        grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
    }
}
@media (max-width: 380px) {
    .horizontal-scroll-row .grid-card{
        flex: 0 0 140px;
    }
    .watch-more-label {
        font-size: 18px;
    }
    #recommendedSection .browse-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
    #recommendedSection .browse-grid-row .grid-card {
        min-height: 240px;
    }
    /* "Watch2Gether" is the longest label in the bottom nav row -- swap it
       for "W2G" once things get this tight. CSS can't edit text content
       directly, so the real text is zeroed out and a ::after supplies the
       shorter replacement instead. */
    .bottom-sidebar a[href="/html/watch2getherPublic.html"] span {
        font-size: 0;
    }
    .bottom-sidebar a[href="/html/watch2getherPublic.html"] span::after {
        content: "W2G";
        font-size: 0.65rem;
    }
    .netflix-grid {
        grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
    }
}

/* Player loading overlay (movieInfo.html) - shown while a stream is being resolved, so the
   iframe/video area going small/blank mid-load reads as "loading" instead of "broken", which was
   prompting people to panic-click other servers. */
.player-loading-overlay {
    position: absolute; inset: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; background: rgba(0,0,0,0.82); pointer-events: none;
}
.player-loading-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid rgba(255,128,0,0.25); border-top-color: #ff8000;
    animation: player-loading-spin 0.85s linear infinite;
}
.player-loading-text { color: #eee; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px; }
@keyframes player-loading-spin { to { transform: rotate(360deg); } }

/* Season-cards row (movieInfo.html player) - blurred-cover blocks with a dot-matrix overlay */
.season-cards-row { width:100%; margin-top:18px; }
.season-cards-title { color:#ff8000; font-size:1.05rem; font-weight:700; margin:0 0 10px 0; }
/* overflow:visible, not auto - cards wrap now (32% width, 3/row) so horizontal scroll was never
   needed, and auto meant the hover lift/scale on a card could nudge this into scrollbar territory. */
/* justify-content:space-between stretched a partial last row (e.g. 8 cards at 3-per-row
   leaves 2 on the final row) to the far edges, leaving an ugly empty gap in the middle
   instead of the cards just sitting left-aligned next to each other. flex-start + an
   explicit gap keeps consistent spacing on full AND partial rows - 3 cards at 32% width
   plus 2 gaps at 2% each fills the same 100% a full row already did. */
.season-cards-list { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:2%; overflow:visible; padding-bottom:6px; }
.season-card {
    position:relative; flex:0 0 auto; width:32%; height:92px;
    border-radius:14px; overflow:hidden; cursor:pointer; background:#111;
    /* Outer elevation shadow + an inset vignette that darkens the rounded corners relative to
       the center - inset shadows clip to border-radius automatically, so the corners read
       darker without needing a separate masked layer. */
    box-shadow:0 2px 12px #0007, inset 0 0 18px 6px rgba(0,0,0,0.75);
    transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border:2px solid transparent; display:flex; align-items:center; justify-content:center;
}
.season-card:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 24px #000a, inset 0 0 18px 6px rgba(0,0,0,0.75); }
.season-card.active { border-color:#f96d00; box-shadow:0 0 0 1px rgba(249,109,0,0.35), 0 8px 20px #0009, inset 0 0 18px 6px rgba(0,0,0,0.75); }
.season-card-cover {
    position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; display:block;
    filter:blur(10px) brightness(0.42) saturate(1.15); z-index:1;
}
/* Small dotted grid overlay - the "frit matrix" texture, like a windshield's dot-fade band */
.season-card::after {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1.5px);
    background-size:7px 7px; opacity:0.55;
}
.season-card-shadow {
    position:relative; z-index:3; width:100%; padding:6px 12px; text-align:center;
    background:none; pointer-events:none;
}
.season-card-label { color:#fff; font-size:0.95rem; font-weight:700; line-height:1.25; text-shadow:0 1px 5px #000d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.season-card.active .season-card-label { color:#f96d00; }
.season-card-sub { color:#cfcfcf; font-size:0.7rem; font-weight:600; margin-top:3px; opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 4px #000d; }

/* THIS NEEDS TO OVERRIDE SHIT DO NOT PUT IT FURTHER UP */
.hidden {
    display: none;
}
/* THIS NEEDS TO OVERRIDE SHIT DO NOT PUT IT FURTHER UP */