/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== BASE ===== */
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f5f5f5; color: #1a1a1a; min-height: 100vh; }
a { color: #c8760a; text-decoration: none; }
a:hover { color: #a05e08; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ===== NAVBAR ===== */
.navbar { background: #fff; border-bottom: 2px solid #e8900a; position: sticky; top: 0; z-index: 999; padding: 0 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; height: 54px; }
.navbar .logo { font-size: 1.3rem; font-weight: 700; color: #e8900a; letter-spacing: 1px; text-decoration: none; }
.navbar ul { list-style: none; display: flex; gap: 20px; }
.navbar ul li a { color: #444; font-size: 0.9rem; transition: color 0.2s; }
.navbar ul li a:hover { color: #e8900a; text-decoration: none; }

/* ===== MAIN HEADER ===== */
.main-header { background: linear-gradient(135deg, #fff8ee 0%, #fef0d0 100%); padding: 28px 16px; text-align: center; border-bottom: 1px solid #e8d5b0; }
.main-header h1 { font-size: 1.6rem; color: #c8760a; margin-bottom: 6px; }
.main-header p { color: #888; font-size: 0.9rem; }

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
body > *:not(.navbar):not(.main-header):not(.footer):not(.tg-banner):not(footer) { max-width: 1200px; margin: 0 auto; padding: 16px; }
footer.footer { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }

/* ===== TELEGRAM BANNER ===== */
.tg-banner {
    background: linear-gradient(90deg, #0f2027 0%, #1a1a2e 40%, #16213e 100%);
    border-bottom: 1px solid rgba(41, 182, 246, 0.18);
    padding: 0;
    width: 100%;
}
.tg-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 0.84rem;
    flex-wrap: wrap;
}
.tg-icon {
    color: #29b6f6;
    display: flex;
    align-items: center;
    animation: tg-pulse 2.4s ease-in-out infinite;
}
@keyframes tg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.15); }
}
.tg-text {
    color: #b0bec5;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0288d1, #29b6f6);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 14px 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    transition: all 0.22s;
    box-shadow: 0 2px 10px rgba(41, 182, 246, 0.25);
}
.tg-btn:hover {
    background: linear-gradient(135deg, #0277bd, #0288d1);
    box-shadow: 0 4px 18px rgba(41, 182, 246, 0.4);
    transform: translateY(-1px);
}
.tg-arrow {
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.tg-btn:hover .tg-arrow { transform: translateX(3px); }

/* ===== SEARCH PAGE ===== */
.search-wrap { padding: 20px 16px; max-width: 1200px; margin: 0 auto; }
.search-heading { font-size: 1.1rem; color: #c8760a; margin-bottom: 16px; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.search-heading em { color: #1a1a1a; font-style: normal; }
.no-results { color: #888; padding: 30px 0; text-align: center; }

/* ===== FOOTER ===== */

/* ===== AD BLOCK ===== */
.custom-ad { text-align: center; margin: 16px auto; }

/* ===== SERVER BUTTONS ===== */
.custom-server { display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin: 4px; background: #fff; border: 1px solid #ddd; color: #c8760a; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.custom-server:hover { background: #e8900a; color: #fff; border-color: #e8900a; text-decoration: none; }

/* ===== GD BUTTON ===== */
.gd-btn { display: inline-block; padding: 7px 16px; background: #1a73e8; color: #fff; border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin: 4px; text-decoration: none; }
.gd-btn:hover { background: #1558b0; color: #fff; text-decoration: none; }

/* ===== SECTION HEADINGS ===== */
.Robiul { background: #fff8ee; border-left: 3px solid #e8900a; color: #c8760a; font-size: 0.95rem; font-weight: 700; padding: 8px 12px; margin: 14px 0 0; border-radius: 0 4px 4px 0; }

/* ===== MOVIE POSTER ===== */
.movielist { text-align: center; margin: 16px auto; }
.movielist img { border-radius: 8px; border: 2px solid #ddd; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-width: 200px; margin: 0 auto; }

/* ===== MOVIE CARDS (Homepage + Category) ===== */

/* Category page outer wrapper */
.cat-page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Section headings inside category pages */
.cat-page-wrap .Robiul {
    margin-top: 20px;
    margin-bottom: 4px;
}

.movie-cards-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 10px 0 4px;
}

@media (max-width: 768px) {
    .movie-cards-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}
.movie-card { position: relative; }
.movie-card-link {
    display: block;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e8d5b0;
    transition: transform 0.18s, box-shadow 0.18s;
}
.movie-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    text-decoration: none;
}
.movie-card-thumb {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 2:3 poster ratio */
    background: #e8e0d0;
    overflow: hidden;
}
.movie-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    border: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.movie-card-img.loaded { opacity: 1; }
.movie-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
    background: linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 100%);
}
.movie-card-img.loaded + .movie-card-placeholder { display: none; }
.movie-card-title {
    padding: 7px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    height: calc(1.3em * 7 + 14px);
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: #fff;
}
.movie-card-link:hover .movie-card-title { color: #e8900a; }

body.dark-mode .movie-card-link { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .movie-card-title { background: #1a1a1a; color: #e0e0e0; }
body.dark-mode .movie-card-thumb { background: #2a2a2a; }
body.dark-mode .movie-card-placeholder { background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%); color: #444; }
body.dark-mode .movie-card-title { background: #1a1a1a; color: #e0e0e0; }
body.dark-mode .movie-card-link:hover .movie-card-title { color: #e8900a; }

/* ===== MOVIE LIST & DETAIL ROWS ===== */
.Let,
div.Fmvideo[align="left"] {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 14px;
    font-size: 0.83rem;
    color: #444;
    max-width: 100%;
    margin: 0 auto;
}
.Let b { color: #c8760a; margin-right: 4px; }
.Let a,
div.Fmvideo[align="left"] a { color: #0ea5e9; font-size: 0.83rem; }
.Let a:hover,
div.Fmvideo[align="left"] a:hover { color: #0284c7; text-decoration: underline; }

/* Hide 20x20 icon images inside Fmvideo list items */
div.Fmvideo[align="left"] img { display: none; }

hr.movie-divider { border: none; border-top: 1px solid #e8d5b0; }

/* ===== GENRE + SCREENSHOTS ===== */
.L { max-width: 100%; margin: 0 auto; text-align: center; color: #555; font-size: 0.83rem; line-height: 1.8; }
.L b { color: #c8760a; }
.L img { border-radius: 4px; border: 1px solid #ddd; margin: 4px auto; max-width: 100%; }
.L a { color: #0ea5e9; font-size: 0.78rem; }
.L a:hover { color: #0284c7; }
.L:not(:has(img)) { background: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #eee; padding: 7px 14px; text-align: center; }

/* ===== DOWNLOAD BUTTONS ===== */
/* Bolly align=left = Categories list on homepage */
div.Bolly[align="left"] {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
}
div.Bolly[align="left"] b { font-size: 0; line-height: 0; display: inline; }
div.Bolly[align="left"] a { display: block; color: #0ea5e9; font-size: 0.83rem; line-height: 1.4; font-weight: normal; text-decoration: none; background: none; border: none; padding: 10px 14px; margin: 0; }
div.Bolly[align="left"] a:hover { color: #0284c7; text-decoration: underline; }
div.Bolly[align="left"] img { display: none !important; width: 0 !important; height: 0 !important; font-size: 0; }

/* ===== CATEGORIES ===== */
.cat-item { background: #fff; border-bottom: 1px solid #eee; padding: 10px 14px; font-size: 0.83rem; margin: 0; }
.cat-item a { color: #0ea5e9; text-decoration: none; display: block; }
.cat-item a:hover { color: #0284c7; text-decoration: underline; }

/* WATCH ONLINE button */
.watch-btn {
    display: inline-block !important;
    margin: 4px 6px;
    padding: 7px 18px;
    border-radius: 4px;
    font-size: 0.82rem !important;
    font-weight: 600;
    background: #e8900a !important;
    border: 1px solid #e8900a !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.15s;
}
.watch-btn:hover { background: #c8760a !important; color: #fff !important; text-decoration: none !important; }

/* Bolly without align = download buttons on detail page */
.Bolly {
    background: #fff;
    border: 1px solid #e8d5b0;
    border-radius: 8px;
    padding: 18px 14px;
    max-width: 420px;
    margin: 14px auto;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.Bolly br { display: none; }
.Bolly a {
    display: inline-block;
    margin: 4px 6px;
    padding: 7px 18px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #fff8ee;
    border: 1px solid #e8d5b0;
    color: #c8760a;
    transition: all 0.15s;
    text-decoration: none;
}
.Bolly a:hover { background: #e8900a; color: #fff; border-color: #e8900a; text-decoration: none; }
.Bolly a[href=""] { display: none; }
/* WATCH ONLINE — highlight */
.Bolly a[href*="strcloud"],
.Bolly a[href*="watch"],
.Bolly a[href*="WATCH"] {
    background: #e8900a;
    color: #fff;
    border-color: #e8900a;
}

/* ===== SEARCH FORM ===== */
.Fmvideo { margin: 10px auto; text-align: center; font-size: 0.82rem; color: #888; }
.Fmvideo form { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.Fmvideo input[type="text"] { background: #fff; border: 1px solid #ccc; border-radius: 4px; color: #1a1a1a; padding: 6px 12px; font-size: 0.82rem; width: 160px; }
.Fmvideo select { background: #fff; border: 1px solid #ccc; border-radius: 4px; color: #444; padding: 6px 8px; font-size: 0.8rem; }
.Fmvideo input[type="submit"] { background: #e8900a; border: none; border-radius: 4px; color: #fff; font-weight: 700; padding: 6px 14px; font-size: 0.82rem; cursor: pointer; }

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .navbar ul { gap: 12px; }
    .navbar .logo { font-size: 1.1rem; }
    .main-header h1 { font-size: 1.2rem; }
}

/* ===== DARK MODE ===== */
body.dark-mode { background: #121212; color: #e0e0e0; }
body.dark-mode a { color: #ffb347; }
body.dark-mode a:hover { color: #ffd080; }

body.dark-mode .navbar { background: #1e1e1e; border-bottom-color: #e8900a; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
body.dark-mode .navbar ul li a { color: #ccc; }
body.dark-mode .navbar ul li a:hover { color: #e8900a; }

body.dark-mode .main-header { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-bottom-color: #333; }
body.dark-mode .main-header h1 { color: #ffb347; }
body.dark-mode .main-header p { color: #888; }

body.dark-mode .Let,
body.dark-mode div.Fmvideo[align="left"] { background: #1e1e1e; border-bottom-color: #2a2a2a; color: #ccc; }
body.dark-mode .Let b { color: #ffb347; }
body.dark-mode .Let a,
body.dark-mode div.Fmvideo[align="left"] a { color: #60c0f0; }

body.dark-mode .Bolly { background: #1e1e1e; border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .Bolly a { background: #2a2a2a; border-color: #444; color: #ffb347; }
body.dark-mode .Bolly a:hover { background: #e8900a; color: #fff; border-color: #e8900a; }

body.dark-mode .cat-item { background: #1a1a1a; border-bottom-color: #2a2a2a; }
body.dark-mode .cat-item a { color: #60c0f0; }

/* ── Let / Fmvideo list rows ── */
body.dark-mode .Let,
body.dark-mode div.Fmvideo[align="left"] { background: #1e1e1e; border-bottom-color: #2a2a2a; color: #ccc; }
body.dark-mode .Let b { color: #ffb347; }
body.dark-mode .Let a,
body.dark-mode div.Fmvideo[align="left"] a { color: #60c0f0; }

body.dark-mode div.Bolly[align="left"] { background: #1e1e1e; }
body.dark-mode div.Bolly[align="left"] a { color: #60c0f0; }

body.dark-mode .Robiul { background: #2a2a2a; border-left-color: #e8900a; color: #ffb347; }

body.dark-mode .L { color: #bbb; }
body.dark-mode .L b { color: #ffb347; }
body.dark-mode .L img { border-color: #333; }
body.dark-mode .L:not(:has(img)) { background: #1e1e1e; border-color: #2a2a2a; color: #bbb; }

body.dark-mode .footer { background: #1e1e1e; border-top-color: #e8900a; }
body.dark-mode .footer-content p { color: #666; }
body.dark-mode .footer ul li a { color: #666; }

/* ── Telegram Banner ── */
body.dark-mode .tg-banner { background: linear-gradient(90deg, #0a1520 0%, #111827 40%, #0d1b2a 100%); border-bottom-color: rgba(41,182,246,0.12); }
body.dark-mode .tg-text { color: #78909c; }

/* ── Server Buttons ── */
body.dark-mode .custom-server { background: #1e1e1e; border-color: #333; color: #ffb347; }
body.dark-mode .custom-server:hover { background: #e8900a; color: #fff; border-color: #e8900a; }

/* ── GD Button ── */
body.dark-mode .gd-btn { background: #1558b0; }
body.dark-mode .gd-btn:hover { background: #0f3e80; }

/* ── Robiul (section headings) ── */
body.dark-mode .Robiul { background: #1f1a10; border-left-color: #e8900a; color: #ffb347; }

/* ── Movie poster ── */
body.dark-mode .movielist img { border-color: #333; }

/* ── Divider ── */
body.dark-mode hr.movie-divider { border-top-color: #2a2a2a; }

/* ── No results ── */
body.dark-mode .no-results { color: #555; }

/* ── Search heading (old duplicate) ── */
body.dark-mode .search-wrap .search-heading em { color: #e0e0e0; }

/* ── Cat-item links ── */
body.dark-mode .cat-item { background: #1a1a1a; border-bottom-color: #2a2a2a; }
body.dark-mode .cat-item a { color: #60c0f0; }

body.dark-mode .Fmvideo input[type="text"] { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.dark-mode .Fmvideo select { background: #2a2a2a; border-color: #444; color: #ccc; }

body.dark-mode .search-wrap .search-heading { color: #ffb347; border-bottom-color: #333; }
body.dark-mode .search-wrap .search-heading em { color: #e0e0e0; }

/* ===== DARK MODE TOGGLE BUTTON ===== */
#dark-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e8900a;
    color: #fff;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
#dark-toggle:hover { background: #c8760a; transform: scale(1.08); }
body.dark-mode #dark-toggle { background: #333; }
body.dark-mode #dark-toggle:hover { background: #555; }

/* ═══════════════════════════════════════════
   MOVIE DETAIL PAGE — Beautiful Layout
   ═══════════════════════════════════════════ */

.detail-page-wrap {
    max-width: 900px;
    margin: 24px auto;
    padding: 0 16px 40px;
}

/* ── TOP CARD: Poster + Info Side by Side ── */
.detail-top-card {
    display: flex;
    gap: 28px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8d5b0;
    box-shadow: 0 4px 28px rgba(0,0,0,0.08);
    padding: 24px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* ── POSTER ── */
.detail-poster {
    flex-shrink: 0;
    width: 350px;
}
.detail-poster img {
    width: 350px;
    height: 500px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #e8d5b0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: block;
}
.poster-fallback {
    width: 350px; height: 500px;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff8ee, #fde8c0);
    border: 2px solid #e8d5b0;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem;
}

/* ── INFO SIDE ── */
.detail-info { flex: 1; min-width: 0; }

.detail-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #c8760a;
    margin-bottom: 16px;
    line-height: 1.4;
    border-bottom: 2px solid #f0e0c0;
    padding-bottom: 10px;
}

/* Detail rows (L class) inside info panel */
.detail-meta .L {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    text-align: left !important;
    font-size: 0.84rem;
    color: #555;
    line-height: 1.9;
}
.detail-meta .L b { color: #c8760a; }
.detail-meta .L:not(:has(img)) {
    background: transparent !important;
    border: none !important;
    padding: 3px 0 !important;
    text-align: left !important;
}

/* ── SECTION LABEL ── */
.detail-section-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #c8760a;
    background: #fff8ee;
    border-left: 4px solid #e8900a;
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    margin: 20px 0 0;
}

/* ── DOWNLOAD BOX ── */
.detail-page-wrap .Bolly {
    max-width: 100%;
    border-radius: 10px;
    margin: 0 0 4px;
    padding: 20px 16px;
    text-align: center;
}

/* ── REST CONTENT (Screenshots etc) ── */
.detail-rest { margin-top: 4px; }

.detail-rest .Robiul {
    margin-top: 20px;
}

/* Screenshots grid inside detail */
.detail-rest .L:has(img) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8d5b0;
    padding: 14px;
    margin-top: 4px;
}
.detail-rest .L img {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #e8d5b0;
    display: block;
    margin: 0 !important;
}
.detail-rest .L center {
    display: contents;
}

/* ── DARK MODE — Detail Page ── */
body.dark-mode .detail-top-card {
    background: #1e1e1e;
    border-color: #2a2a2a;
    box-shadow: 0 4px 28px rgba(0,0,0,0.35);
}
body.dark-mode .detail-poster img { border-color: #333; }
body.dark-mode .poster-fallback {
    background: linear-gradient(160deg, #2a2a2a, #1a1a1a);
    border-color: #333;
}
body.dark-mode .detail-title { color: #ffb347; border-bottom-color: #2a2a2a; }
body.dark-mode .detail-meta .L { color: #aaa; }
body.dark-mode .detail-meta .L b { color: #ffb347; }
body.dark-mode .detail-section-label { background: #2a2a2a; color: #ffb347; }
body.dark-mode .detail-rest .L:has(img) {
    background: #1e1e1e;
    border-color: #2a2a2a;
}
body.dark-mode .detail-rest .L img { border-color: #333; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 600px) {
    .detail-top-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 18px 14px;
    }
    .detail-poster { width: 100%; }
    .detail-poster img { width: 100%; height: 420px; object-fit: cover; }
    .poster-fallback { width: 100%; height: 420px; }
    .detail-title { font-size: 1.05rem; text-align: center; }
    .detail-meta .L { text-align: center !important; }
    .detail-rest .L:has(img) { grid-template-columns: 1fr; }
}

/* ── SCREENSHOT CELL FIX ── */
.ss-cell {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e8d5b0;
    aspect-ratio: 16/9;
    background: #f0e8d8;
}
.ss-cell img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
    margin: 0 !important;
    transition: transform .2s;
}
.ss-cell img:hover { transform: scale(1.04); }
body.dark-mode .ss-cell { border-color: #2a2a2a; background: #1a1a1a; }

/* ── DETAIL META FIX: L div styling inside info panel ── */
.detail-meta .L {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed #f0e0c0 !important;
    padding: 5px 0 !important;
    text-align: left !important;
    font-size: .84rem;
    color: #555;
    line-height: 1.8;
}
.detail-meta .L:last-child { border-bottom: none !important; }
.detail-meta .L b { color: #c8760a; min-width: 90px; display: inline-block; }
body.dark-mode .detail-meta .L { border-bottom-color: #2a2a2a !important; color: #aaa; }
body.dark-mode .detail-meta .L b { color: #ffb347; }

/* ── DETAIL REST: disclaimer etc ── */
.detail-rest {
    margin-top: 14px;
    background: #fff8ee;
    border: 1px solid #e8d5b0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .78rem;
    color: #aaa;
    line-height: 1.6;
}
body.dark-mode .detail-rest { background: #1a1a1a; border-color: #2a2a2a; }

/* ── META ROW STYLES ── */
.meta-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed #f0e0c0;
    font-size: .84rem;
}
.meta-row:last-child { border-bottom: none; }
.meta-label {
    color: #c8760a;
    font-weight: 700;
    min-width: 100px;
    font-size: .81rem;
    flex-shrink: 0;
}
.meta-val { color: #444; line-height: 1.6; }

.meta-row-raw {
    padding: 4px 0;
    font-size: .83rem;
    color: #555;
    border-bottom: 1px dashed #f0e0c0;
    line-height: 1.7;
}
.meta-row-raw b { color: #c8760a; }
.meta-row-raw:last-child { border-bottom: none; }

body.dark-mode .meta-row { border-bottom-color: #2a2a2a; }
body.dark-mode .meta-label { color: #ffb347; }
body.dark-mode .meta-val { color: #ccc; }
body.dark-mode .meta-row-raw { border-bottom-color: #2a2a2a; color: #aaa; }
body.dark-mode .meta-row-raw b { color: #ffb347; }

@media (max-width: 600px) {
    .meta-label { min-width: 80px; font-size: .78rem; }
    .meta-row { gap: 5px; }
}

/* meta-label এর পরে : auto যোগ */
.meta-label::after { content: ' :'; }

/* ── BREADCRUMB ── */
.detail-breadcrumb {
    font-size: .82rem;
    color: var(--muted, #888);
    padding: 10px 4px 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e8d5b0;
}
.detail-breadcrumb a[href*="disclaimer"] { display: none; }
.detail-breadcrumb b:has(+ b a[href*="disclaimer"]) { display: none; }
.detail-breadcrumb a { color: #0ea5e9; text-decoration: none; }
.detail-breadcrumb a:hover { color: #0284c7; text-decoration: underline; }
body.dark-mode .detail-breadcrumb { border-bottom-color: #2a2a2a; color: #666; }
body.dark-mode .detail-breadcrumb a { color: #60c0f0; }

/* ── DISCLAIMER ── */
.detail-disclaimer {
    margin-top: 14px;
    background: #fff8ee;
    border: 1px dashed #e8d5b0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .76rem;
    color: #aaa;
    line-height: 1.6;
    text-align: center;
}
body.dark-mode .detail-disclaimer {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #555;
}

/* ── SEARCH HEADING ── */
.search-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
.search-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #c8760a;
    border-left: 4px solid #e8900a;
    background: #fff8ee;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 4px;
}
.search-heading em { color: #1a1a1a; font-style: normal; }
body.dark-mode .search-heading { background: #1e1e1e; color: #ffb347; }
body.dark-mode .search-heading em { color: #e0e0e0; }
body.dark-mode .search-wrap { background: transparent; }

/* ── RELATED MOVIES ── */
.related-movies-wrap {
    background: #fff;
    border: 1px solid #e8d5b0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}
.related-movie-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #f0e8d8;
    text-decoration: none;
    transition: background 0.18s;
}
.related-movie-item:last-child { border-bottom: none; }
.related-movie-item:hover { background: #fff8ee; text-decoration: none; }
.related-icon {
    color: #e8900a;
    font-size: .75rem;
    flex-shrink: 0;
}
.related-title {
    color: #0ea5e9;
    font-size: .84rem;
    line-height: 1.4;
}
.related-movie-item:hover .related-title { color: #0284c7; }

body.dark-mode .related-movies-wrap { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .related-movie-item { border-bottom-color: #2a2a2a; }
body.dark-mode .related-movie-item:hover { background: #2a2a2a; }
body.dark-mode .related-title { color: #60c0f0; }
body.dark-mode .related-icon { color: #ffb347; }


/* ═══════════════════════════════════════════
   404 ERROR PAGE
   ═══════════════════════════════════════════ */

.error-page-wrap {
    text-align: center;
    padding: 60px 20px 80px;
    max-width: 560px;
    margin: 0 auto;
}
.error-code {
    font-size: 7rem;
    font-weight: 900;
    color: #e8d5b0;
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 4px;
}
.error-icon { font-size: 3rem; margin-bottom: 16px; }
.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #c8760a;
    margin-bottom: 12px;
}
.error-desc {
    color: #888;
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 28px;
}
.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.sp-btn-ghost {
    background: #fff !important;
    color: #c8760a !important;
    border: 1px solid #e8d5b0 !important;
}
.sp-btn-ghost:hover { background: #fff8ee !important; }

.error-suggestions p {
    color: #aaa;
    font-size: 0.82rem;
    margin-bottom: 12px;
}
.error-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.error-links a {
    background: #fff;
    border: 1px solid #e8d5b0;
    color: #c8760a;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.18s;
}
.error-links a:hover {
    background: #e8900a;
    color: #fff;
    border-color: #e8900a;
    text-decoration: none;
}

/* Dark mode */
body.dark-mode .error-code { color: #2a2a2a; }
body.dark-mode .error-title { color: #ffb347; }
body.dark-mode .error-desc { color: #666; }
body.dark-mode .sp-btn-ghost {
    background: #1e1e1e !important;
    color: #ffb347 !important;
    border-color: #333 !important;
}
body.dark-mode .sp-btn-ghost:hover { background: #2a2a2a !important; }
body.dark-mode .error-links a {
    background: #1e1e1e;
    border-color: #2a2a2a;
    color: #ffb347;
}
body.dark-mode .error-links a:hover {
    background: #e8900a;
    color: #fff;
    border-color: #e8900a;
}


/* ═══════════════════════════════════════════════════════
   REDESIGNED NAVBAR + FOOTER + STATIC PAGES
   Font: Bebas Neue (headings) + DM Sans (body)
   ═══════════════════════════════════════════════════════ */

/* ── FONTS ── */
.logo-text, .sp-hero-title, .sp-404-bg, .sp-stat-num {
    font-family: 'Bebas Neue', 'Segoe UI', sans-serif;
}

/* ── NAVBAR ── */
.navbar {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #e8900a;
    position: sticky; top: 0; z-index: 999;
    padding: 0 20px;
    box-shadow: 0 2px 20px rgba(232,144,10,0.1);
}
.navbar .container {
    display: flex; align-items: center;
    justify-content: space-between;
    max-width: 1200px; margin: 0 auto; height: 58px;
}
.logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
}
.logo-icon { font-size: 1.4rem; }
.logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: #1a1a1a;
    letter-spacing: 1px;
    line-height: 1;
}
.logo-accent { color: #e8900a; }
.navbar ul {
    list-style: none; display: flex; gap: 4px;
}
.navbar ul li a {
    color: #555; font-size: 0.88rem; font-weight: 500;
    text-decoration: none; padding: 6px 14px;
    border-radius: 20px; transition: all 0.2s;
}
.navbar ul li a:hover {
    color: #e8900a; background: #fff8ee;
    text-decoration: none;
}
.nav-toggle {
    display: none; background: none; border: none;
    font-size: 1.4rem; cursor: pointer; color: #555; padding: 4px;
}

/* ── FOOTER ── */
.footer {
    background: #1a1a1a;
    color: #aaa;
    margin-top: 60px;
    border-top: 3px solid #e8900a;
    width: 100%;
}
.footer-inner {
    max-width: 100%; margin: 0 auto;
    padding: 48px 40px 36px;
    display: flex; gap: 48px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.footer-brand { flex: 1.4; min-width: 220px; }
.footer-brand .logo-text { color: #e0e0e0; }
.footer-tagline {
    color: #666; font-size: 0.82rem;
    line-height: 1.7; margin-top: 12px;
}
.footer-links-wrap { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
    color: #e8900a; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.footer-col a {
    color: #666; font-size: 0.85rem;
    text-decoration: none; transition: color 0.2s;
}
.footer-col a:hover { color: #e8900a; }
.footer-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 18px 24px;
    background: #111;
    border-top: 1px solid #1e1e1e;
    flex-wrap: wrap;
}
.footer-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
}
.footer-stat-icon { font-size: 1.4rem; }
.footer-stat-info { display: flex; flex-direction: column; }
.footer-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e8900a;
    line-height: 1.2;
}
.footer-stat-label {
    font-size: 0.72rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.footer-stat-divider {
    width: 1px;
    height: 36px;
    background: #2a2a2a;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .footer-stats { gap: 4px; }
    .footer-stat-item { padding: 8px 14px; }
    .footer-stat-divider { height: 24px; }
}
.footer-bottom {
    border-top: 1px solid #2a2a2a;
    padding: 16px 40px; text-align: center;
    max-width: 100%; margin: 0 auto;
}
.footer-bottom p { color: #444; font-size: 0.78rem; line-height: 1.8; }
.footer-disclaimer { color: #333 !important; font-size: 0.72rem !important; }

/* ── WRAP ── */
.sp-wrap {
    max-width: 1000px; margin: 0 auto;
    padding: 0 20px 60px;
}

/* ── HERO ── */
.sp-hero-film {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d1a00 60%, #1a0f00 100%);
    border-radius: 0 0 24px 24px;
    margin: 0 -20px 40px;
    padding: 64px 40px 56px;
    overflow: hidden;
    text-align: center;
}
.sp-hero-film::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(232,144,10,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(255,80,0,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.sp-hero-compact { padding: 48px 40px 40px; }
.sp-hero-content { position: relative; z-index: 1; }
.sp-eyebrow {
    display: inline-block;
    background: rgba(232,144,10,0.2);
    color: #e8900a;
    border: 1px solid rgba(232,144,10,0.4);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 16px;
}
.sp-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.8rem; line-height: 1.05;
    color: #ffffff; letter-spacing: 2px;
    margin-bottom: 14px;
}
.sp-accent { color: #e8900a; }
.sp-hero-sub {
    color: #888; font-size: 0.95rem;
    line-height: 1.7; max-width: 480px; margin: 0 auto;
}

/* ── FILM STRIP ── */
.film-strip {
    position: absolute; left: 0; right: 0; height: 18px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 12px,
        rgba(255,255,255,0.06) 12px, rgba(255,255,255,0.06) 20px
    );
}
.film-strip.top { top: 0; }
.film-strip.bottom { bottom: 0; }

/* ── STATS BAR ── */
.sp-stats-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0; background: #fff;
    border: 1px solid #e8d5b0; border-radius: 14px;
    padding: 20px 32px; margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    flex-wrap: wrap; gap: 16px;
}
.sp-stat { text-align: center; padding: 0 24px; }
.sp-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem; color: #e8900a;
    display: block; line-height: 1;
}
.sp-stat-label { color: #888; font-size: 0.78rem; display: block; margin-top: 2px; }
.sp-stat-div { width: 1px; height: 40px; background: #e8d5b0; }

/* ── SECTION LABEL ── */
.sp-section-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem; letter-spacing: 2px;
    color: #c8760a;
    padding-left: 14px;
    border-left: 4px solid #e8900a;
    margin: 36px 0 20px;
}

/* ── FEATURE GRID ── */
.sp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 8px;
}
.sp-feat-card {
    background: #fff;
    border: 1px solid #e8d5b0;
    border-radius: 12px;
    padding: 24px 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sp-feat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(232,144,10,0.12);
}
.sp-feat-icon { font-size: 1.8rem; margin-bottom: 12px; }
.sp-feat-card h3 {
    font-size: 0.92rem; font-weight: 700;
    color: #1a1a1a; margin-bottom: 6px;
}
.sp-feat-card p { color: #777; font-size: 0.82rem; line-height: 1.6; margin: 0; }

/* ── TAGS ── */
.sp-tags-wrap {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.sp-tag {
    background: #fff8ee;
    border: 1px solid #e8d5b0;
    color: #c8760a;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.82rem; font-weight: 600;
    transition: all 0.18s; cursor: default;
}
.sp-tag:hover { background: #e8900a; color: #fff; border-color: #e8900a; }

/* ── DISCLAIMER BOX ── */
.sp-disclaimer-box {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff8ee;
    border: 1px dashed #e8d5b0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 36px;
    font-size: 0.83rem; color: #888; line-height: 1.7;
}
.sp-disclaimer-icon { font-size: 1.3rem; flex-shrink: 0; }
.sp-disclaimer-box a { color: #e8900a; }

/* ── CONTACT LAYOUT ── */
.sp-contact-layout {
    display: flex; gap: 28px; align-items: flex-start;
    margin-top: 8px;
}
.sp-contact-form-wrap { flex: 1.5; }
.sp-contact-info { flex: 1; display: flex; flex-direction: column; gap: 12px; }

/* ── FORM ── */
.sp-form-row { display: flex; gap: 14px; }
.sp-form-row > * { flex: 1; }
.sp-form-group { margin-bottom: 16px; }
.sp-form-group label {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: #888; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 6px;
}
.sp-form input[type="text"],
.sp-form input[type="email"],
.sp-form select,
.sp-form textarea {
    width: 100%;
    background: #fff;
    border: 1.5px solid #e0d0b8;
    border-radius: 8px;
    color: #1a1a1a;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-form input:focus,
.sp-form select:focus,
.sp-form textarea:focus {
    border-color: #e8900a;
    box-shadow: 0 0 0 3px rgba(232,144,10,0.1);
}
.sp-form textarea { resize: vertical; min-height: 120px; }
.sp-submit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #e8900a; color: #fff;
    border: none; border-radius: 8px;
    padding: 12px 28px;
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
    text-decoration: none;
}
.sp-submit-btn:hover {
    background: #c8760a; transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232,144,10,0.35);
    color: #fff; text-decoration: none;
}
.sp-submit-btn span { transition: transform 0.2s; }
.sp-submit-btn:hover span { transform: translateX(4px); }

/* ── ALERTS ── */
.sp-alert-ok, .sp-alert-err {
    display: flex; gap: 12px; align-items: flex-start;
    border-radius: 8px; padding: 14px 16px;
    font-size: 0.85rem; margin-bottom: 18px; line-height: 1.6;
}
.sp-alert-ok { background: #f0fff4; border: 1px solid #a0d8b0; color: #1a5a2a; }
.sp-alert-err { background: #fff4f0; border: 1px solid #d8a0a0; color: #5a1a1a; }

/* ── INFO CARDS ── */
.sp-info-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff;
    border: 1px solid #e8d5b0;
    border-radius: 12px;
    padding: 18px 16px;
    transition: box-shadow 0.2s;
}
.sp-info-card:hover { box-shadow: 0 4px 16px rgba(232,144,10,0.1); }
.sp-info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.sp-info-card strong { color: #c8760a; font-size: 0.88rem; display: block; margin-bottom: 3px; }
.sp-info-card p { color: #777; font-size: 0.82rem; margin: 0; line-height: 1.5; }

/* ── LEGAL ── */
.sp-legal-wrap {
    display: flex; gap: 36px; align-items: flex-start; margin-top: 8px;
}
.sp-legal-toc {
    width: 180px; flex-shrink: 0;
    position: sticky; top: 72px;
    background: #fff; border: 1px solid #e8d5b0;
    border-radius: 12px; padding: 18px 16px;
}
.sp-toc-title {
    font-size: 0.72rem; font-weight: 700; color: #888;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.sp-legal-toc a {
    display: block; color: #777; font-size: 0.8rem;
    text-decoration: none; padding: 5px 0;
    border-bottom: 1px solid #f5f0e8;
    transition: color 0.18s;
}
.sp-legal-toc a:last-child { border-bottom: none; }
.sp-legal-toc a:hover { color: #e8900a; }
.sp-legal-body { flex: 1; }
.sp-legal-intro {
    background: #fff8ee; border-left: 4px solid #e8900a;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px; font-size: 0.88rem;
    color: #555; line-height: 1.7; margin-bottom: 28px;
}
.sp-legal-section {
    margin-bottom: 32px; padding-bottom: 32px;
    border-bottom: 1px solid #f0e8d8;
}
.sp-legal-section:last-child { border-bottom: none; }
.sp-legal-section h2 {
    display: flex; align-items: center; gap: 12px;
    font-size: 1rem; font-weight: 700;
    color: #1a1a1a; margin-bottom: 12px;
}
.sp-legal-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem; color: #e8900a;
    background: #fff8ee; border: 1px solid #e8d5b0;
    border-radius: 6px; padding: 2px 8px; line-height: 1.4;
    flex-shrink: 0;
}
.sp-legal-section p {
    color: #555; font-size: 0.87rem; line-height: 1.8; margin-bottom: 10px;
}
.sp-legal-section ul {
    padding-left: 18px; margin: 8px 0 12px;
}
.sp-legal-section ul li {
    color: #555; font-size: 0.87rem; line-height: 1.9;
}
.sp-legal-section ul li strong { color: #333; }
.sp-legal-section a { color: #e8900a; }
.sp-legal-section code {
    background: #fff0e0; color: #c8760a;
    padding: 1px 6px; border-radius: 4px; font-size: 0.84rem;
}

/* ── 404 ── */
.sp-404-wrap {
    text-align: center; padding: 80px 20px 60px;
    position: relative;
}
.sp-404-bg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14rem; line-height: 1;
    color: #f0e8d8; letter-spacing: 8px;
    position: absolute; top: 30px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none; user-select: none;
    z-index: 0;
}
.sp-404-reel {
    font-size: 3.5rem; position: relative; z-index: 1;
    margin-bottom: 16px; display: block;
    animation: reel-spin 3s linear infinite;
}
@keyframes reel-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.sp-404-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem; color: #1a1a1a;
    letter-spacing: 2px; position: relative; z-index: 1;
    margin-bottom: 12px;
}
.sp-404-desc {
    color: #888; font-size: 0.92rem; line-height: 1.8;
    position: relative; z-index: 1; margin-bottom: 32px;
}
.sp-404-actions {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap; margin-bottom: 32px;
    position: relative; z-index: 1;
}
.sp-ghost-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #c8760a;
    border: 1.5px solid #e8d5b0;
    border-radius: 8px; padding: 12px 28px;
    font-size: 0.9rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s;
}
.sp-ghost-btn:hover {
    background: #fff8ee; border-color: #e8900a;
    color: #e8900a; text-decoration: none;
}
.sp-404-links {
    display: flex; gap: 20px; justify-content: center;
    flex-wrap: wrap; position: relative; z-index: 1;
}
.sp-404-links a {
    color: #aaa; font-size: 0.82rem;
    text-decoration: none; transition: color 0.2s;
}
.sp-404-links a:hover { color: #e8900a; }

/* ── MOBILE ── */
@media (max-width: 768px) {
    .sp-hero-title { font-size: 2.6rem; }
    .sp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-contact-layout { flex-direction: column; }
    .sp-legal-wrap { flex-direction: column; }
    .sp-legal-toc { width: 100%; position: static; }
    .sp-form-row { flex-direction: column; }
    .sp-404-bg { font-size: 8rem; }
    .footer-inner { flex-direction: column; gap: 32px; }
    .navbar ul { display: none; flex-direction: column;
        position: absolute; top: 58px; left: 0; right: 0;
        background: #fff; border-top: 1px solid #e8d5b0;
        padding: 12px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        z-index: 999;
    }
    .navbar ul.open { display: flex; }
    .navbar ul li a { padding: 10px 24px; border-radius: 0; }
    .nav-toggle { display: block; }
    .navbar { position: relative; }
    .sp-stats-bar { gap: 12px; padding: 16px 20px; }
    .sp-stat { padding: 0 12px; }
    .sp-stat-div { display: none; }
}
@media (max-width: 480px) {
    .sp-features-grid { grid-template-columns: 1fr; }
    .sp-hero-title { font-size: 2rem; }
    .sp-hero-film { padding: 40px 20px 36px; margin: 0 -20px 28px; }
}

/* ═══════ DARK MODE ═══════ */
body.dark-mode .navbar {
    background: rgba(20,20,20,0.97);
    border-bottom-color: #e8900a;
}
body.dark-mode .logo-text { color: #e0e0e0; }
body.dark-mode .navbar ul li a { color: #aaa; }
body.dark-mode .navbar ul li a:hover { background: #1f1a10; color: #e8900a; }
body.dark-mode .navbar ul { background: #1a1a1a; border-top-color: #2a2a2a; }

body.dark-mode .sp-stats-bar { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .sp-stat-div { background: #2a2a2a; }
body.dark-mode .sp-feat-card { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .sp-feat-card h3 { color: #e0e0e0; }
body.dark-mode .sp-feat-card p { color: #888; }
body.dark-mode .sp-feat-card:hover { box-shadow: 0 8px 28px rgba(232,144,10,0.08); }
body.dark-mode .sp-tag { background: #1f1a10; border-color: #333; color: #ffb347; }
body.dark-mode .sp-tag:hover { background: #e8900a; color: #fff; border-color: #e8900a; }
body.dark-mode .sp-disclaimer-box { background: #1a1508; border-color: #2a2010; color: #666; }
body.dark-mode .sp-info-card { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .sp-info-card strong { color: #ffb347; }
body.dark-mode .sp-info-card p { color: #888; }
body.dark-mode .sp-form input,
body.dark-mode .sp-form select,
body.dark-mode .sp-form textarea {
    background: #1e1e1e; border-color: #333; color: #e0e0e0;
}
body.dark-mode .sp-form input:focus,
body.dark-mode .sp-form select:focus,
body.dark-mode .sp-form textarea:focus {
    border-color: #e8900a; box-shadow: 0 0 0 3px rgba(232,144,10,0.08);
}
body.dark-mode .sp-alert-ok { background: #0a1f0f; border-color: #1a4a20; color: #80c880; }
body.dark-mode .sp-alert-err { background: #1f0a0a; border-color: #4a1a1a; color: #c88080; }
body.dark-mode .sp-legal-toc { background: #1e1e1e; border-color: #2a2a2a; }
body.dark-mode .sp-toc-title { color: #666; border-bottom-color: #2a2a2a; }
body.dark-mode .sp-legal-toc a { color: #666; border-bottom-color: #2a2a2a; }
body.dark-mode .sp-legal-toc a:hover { color: #e8900a; }
body.dark-mode .sp-legal-intro { background: #1a1508; border-left-color: #e8900a; color: #aaa; }
body.dark-mode .sp-legal-section { border-bottom-color: #222; }
body.dark-mode .sp-legal-section h2 { color: #e0e0e0; }
body.dark-mode .sp-legal-num { background: #1f1a10; border-color: #333; }
body.dark-mode .sp-legal-section p,
body.dark-mode .sp-legal-section ul li { color: #aaa; }
body.dark-mode .sp-legal-section ul li strong { color: #ccc; }
body.dark-mode .sp-legal-section code { background: #1f1a10; color: #ffb347; }
body.dark-mode .sp-404-bg { color: #1e1e1e; }
body.dark-mode .sp-404-title { color: #e0e0e0; }
body.dark-mode .sp-ghost-btn { background: #1e1e1e; border-color: #333; color: #ffb347; }
body.dark-mode .sp-ghost-btn:hover { background: #2a2a2a; border-color: #e8900a; color: #e8900a; }
body.dark-mode .sp-404-links a { color: #444; }

/* ── Banner Ads ── */
.banner-ad {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 16px 0;
    border-radius: 8px;
}
.banner-ad iframe,
.banner-ad img,
.banner-ad ins {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════
   COMMENT SYSTEM
═══════════════════════════════════════ */
.comment-section { margin-top: 10px; }

.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.comment-item {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-left: 3px solid #e8900a;
    border-radius: 8px;
    padding: 14px 16px;
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.comment-name  { font-weight: 600; color: #e8900a; font-size: 0.9rem; }
.comment-stars { font-size: 0.8rem; letter-spacing: 1px; }
.comment-time  { font-size: 0.75rem; color: #555; margin-left: auto; }
.comment-body  { color: #ccc; font-size: 0.88rem; line-height: 1.6; }

.comment-empty {
    color: #555;
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
    border: 1px dashed #2a2a2a;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Form */
.comment-form-wrap {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 18px;
    margin-top: 8px;
}
.comment-form-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e8900a;
    margin-bottom: 14px;
}
.comment-form { display: flex; flex-direction: column; gap: 10px; }

.comment-form input[type="text"],
.comment-form textarea {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.88rem;
    padding: 10px 12px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s;
}
.comment-form input[type="text"]:focus,
.comment-form textarea:focus { border-color: #e8900a; }

/* Star picker */
.star-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #888;
}
.star-picker .star {
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.1s;
    user-select: none;
}
.star-picker .star:hover,
.star-picker .star.active { transform: scale(1.2); }

.comment-submit-btn {
    background: #e8900a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
}
.comment-submit-btn:hover    { background: #d07a00; }
.comment-submit-btn:disabled { background: #555; cursor: not-allowed; }

.comment-msg {
    display: none;
    font-size: 0.83rem;
    padding: 8px 12px;
    border-radius: 6px;
}
.comment-msg.success { background: #0a1a0a; color: #80c880; border: 1px solid #1a3a1a; }
.comment-msg.error   { background: #1a0a0a; color: #f08080; border: 1px solid #3a1a1a; }

/* Dark mode adjustments */
body.dark-mode .comment-item     { background: #111; border-color: #222; }
body.dark-mode .comment-form-wrap { background: #0f0f0f; }
body.dark-mode .comment-form input[type="text"],
body.dark-mode .comment-form textarea { background: #111; border-color: #222; }