/**
 * css/media_theme.css
 * BỘ CHẾ ĐỘ HIỂN THỊ SÁNG / TỐI TOÀN DIỆN (DAY / NIGHT THEME SYSTEM)
 * Chuẩn Cổ Phong Hoàng Kim / Bạch Ngọc Thư Phòng (Parchment & Ivory Aesthetic)
 * Đồng bộ 100% xuyên suốt hệ sinh thái Đa Phương Tiện:
 * - Hí: xem_phim.html (Màn Danh Sách, Shorts 9:16, Màn Chi Tiết/Player, Bình Luận Đa Cấp)
 * - Cầm: thinh_phong_cac.html (Màn Danh Sách, Spotlight, 10 Cổ Khúc, Publishers, Albums, Live, Mâm Đĩa Than)
 * - Họa: thu_vien_anh.html (Màn Danh Sách, Thể Loại, Modal Lightbox Xem Tranh 4K, Bình Luận)
 * - Đàm Đạo: tu_lau.html (Bảng Tin, Bình Phẩm, Phòng Live)
 * - Hồ Sơ Media: ho_so_media.html (Tổng Quan, Tác Phẩm Đã Post, Lưu Trữ, Lịch Sử, Studio)
 * - Tàng Thư: doc_truyen.html & tu_nghia_duong.html
 */

/* ==========================================================================
   1. CẤU TRÚC TOÀN TRANG & LỚP NỀN AMBIENT PARALLAX (BASE & BACKDROP)
   ========================================================================== */
:root {
    color-scheme: light dark;
    --media-light-canvas: #fbfbfa;
    --media-light-canvas-soft: #f5f5f3;
    --media-light-card: rgba(255, 255, 255, 0.96);
    --media-light-card-solid: #ffffff;
    --media-light-sticky: rgba(251, 251, 250, 0.92);
    --media-light-backdrop-top: rgba(251, 251, 250, 0.97);
    --media-light-backdrop-mid: rgba(251, 251, 250, 0.94);
    --media-light-backdrop-btm: #fbfbfa;
    --media-light-border: rgba(15, 23, 42, 0.07);
    --media-light-border-strong: rgba(15, 23, 42, 0.13);
    --media-light-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.05);
    --media-light-shadow-hover: 0 10px 26px -6px rgba(15, 23, 42, 0.09);
}

:root:has(> head > meta[name="color-scheme"][content="dark"]),
html.dark {
    color-scheme: dark;
}

:root:has(> head > meta[name="color-scheme"][content="light"]),
html.light {
    color-scheme: light;
}

body.light-theme {
    background-color: var(--media-light-canvas) !important;
    color: #1e293b !important;
}

/* Lớp Nền Ambient Parallax Trên Toàn Trang & Các Phân Hệ (Sáng Thanh Nhã, Không Bị Xỉn) */
body.light-theme #main-bg-parallax,
body.light-theme .fixed.inset-0.bg-\[\#07090e\],
body.light-theme .fixed.inset-0.bg-\[\#090c13\],
body.light-theme .fixed.inset-0.bg-\[\#060911\],
body.light-theme .fixed.inset-0.bg-\[\#04070f\] {
    background-color: var(--media-light-canvas) !important;
}

body.light-theme .fixed.inset-0 > div[class*="bg-gradient-to-b"],
body.light-theme .fixed.inset-0 > div[class*="from-[#090c13]"],
body.light-theme .fixed.inset-0 > div[class*="from-[#07090e]"],
body.light-theme .fixed.inset-0 > div[class*="from-[#06080e]"],
body.light-theme .fixed.inset-0 > div[class*="from-[#080c14]"],
body.light-theme .fixed.inset-0 > div[class*="from-[#04070f]"],
body.light-theme .fixed.inset-0 > div[class*="from-[#060911]"] {
    background: linear-gradient(to bottom, var(--media-light-backdrop-top), var(--media-light-backdrop-mid), var(--media-light-backdrop-btm)) !important;
}

body.light-theme .fixed.inset-0 > div[class*="radial-gradient"] {
    opacity: 0.25 !important;
}

body.light-theme .fixed.inset-0 > img {
    opacity: 0.04 !important;
    filter: blur(24px) saturate(0.7) brightness(1.15) !important;
}

/* Tầng Nền Khán Đài 3D Sàn Sao Cho Toàn Bộ Phân Hệ Hồ Sơ (ho_so*.html) */
body.light-theme > div.absolute.inset-0.z-0,
body.light-theme #player-full-modal > div.absolute.inset-0.z-0 {
    background: var(--media-light-canvas) !important;
}

body.light-theme > div.absolute.inset-0.z-0 > img,
body.light-theme #player-full-modal > div.absolute.inset-0.z-0 > img {
    opacity: 0.04 !important;
    filter: blur(20px) saturate(0.6) brightness(1.15) !important;
}

body.light-theme > div.absolute.inset-0.z-0 > div:not(.infinite-floor-perspective),
body.light-theme #player-full-modal > div.absolute.inset-0.z-0 > div:not(.infinite-floor-perspective) {
    background: linear-gradient(to bottom, var(--media-light-backdrop-top), rgba(251, 251, 250, 0.78), var(--media-light-backdrop-btm)) !important;
}

body.light-theme .infinite-floor-plane svg circle,
body.light-theme .infinite-floor-plane svg line,
body.light-theme .infinite-floor-plane svg path {
    stroke: rgba(180, 83, 9, 0.16) !important;
}

/* Thanh Cuộn Tự Tùy Chỉnh Sang Tông Ấm */
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.16) !important;
}
body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.28) !important;
}

/* Bôi Đen Chọn Chữ (Selection Highlight) */
body.light-theme ::selection {
    background-color: rgba(245, 158, 11, 0.3) !important;
    color: #78350f !important;
}

/* ==========================================================================
   2. THANH ĐIỀU HƯỚNG BÊN TRÁI (#main-sidebar) & MENU POPUP CÀI ĐẶT
   ========================================================================== */
body.light-theme #main-sidebar {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Mobile Drawer Sidebar vẫn cần nền che mờ khi bật rộng */
@media (max-width: 767px) {
    body.light-theme #main-sidebar {
        background-color: rgba(251, 251, 250, 0.98) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
    }
}

body.light-theme #main-sidebar .sidebar-text:not(.sidebar-section-label),
body.light-theme #main-sidebar .tv-menu-btn:not(.active) span,
body.light-theme #main-sidebar .tv-menu-btn:not(.active) i {
    color: #334155 !important;
}

body.light-theme #main-sidebar .sidebar-section-label,
body.light-theme #main-sidebar [role="heading"].sidebar-text {
    color: #64748b !important;
}

body.light-theme #main-sidebar [role="group"].border-t {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-theme #main-sidebar .tv-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

body.light-theme #main-sidebar .tv-menu-btn.active {
    font-weight: 700 !important;
}

body.light-theme #main-sidebar .tv-menu-btn.active.text-amber-400,
body.light-theme #main-sidebar .tv-menu-btn.active .text-amber-400 {
    color: #b45309 !important;
}

body.light-theme #main-sidebar .tv-menu-btn.active.text-sky-400,
body.light-theme #main-sidebar .tv-menu-btn.active .text-sky-400,
body.light-theme #main-sidebar .tv-menu-btn.active.text-cyan-400,
body.light-theme #main-sidebar .tv-menu-btn.active .text-cyan-400 {
    color: #0369a1 !important;
}

body.light-theme #main-sidebar .tv-menu-btn.active.text-emerald-400,
body.light-theme #main-sidebar .tv-menu-btn.active .text-emerald-400 {
    color: #047857 !important;
}

body.light-theme #main-sidebar a[href="tu_lau.html"] {
    color: #92400e !important;
}

body.light-theme #main-sidebar a[href="tu_lau.html"]:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 3 Trụ Cột Đa Phương Tiện (Hí • Cầm • Họa) */
body.light-theme .sidebar-top-icons a:not([class*="text-amber-400"]):not([class*="text-cyan-400"]):not([class*="text-emerald-400"]) span,
body.light-theme .sidebar-top-icons a:not([class*="text-amber-400"]):not([class*="text-cyan-400"]):not([class*="text-emerald-400"]) i {
    color: #475569 !important;
}
body.light-theme .sidebar-top-icons a:hover span,
body.light-theme .sidebar-top-icons a:hover i {
    color: #0f172a !important;
}

/* Popup Cài Đặt Nhanh (Bottom Left) */
body.light-theme .group\/settings > div[class*="absolute"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #0f172a !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .group\/settings button,
body.light-theme .group\/settings a {
    color: #334155 !important;
}
body.light-theme .group\/settings button:hover,
body.light-theme .group\/settings a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}
body.light-theme .group\/settings span[class*="text-slate-400"] {
    color: #475569 !important;
}
body.light-theme .group\/settings [class*="bg-white/5"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
}

/* ==========================================================================
   2b. MENU HỆ SINH THÁI KỲ MỘNG (.eco-menu-link — MÀU MẶC ĐỊNH ĐỒNG NHẤT)
   ========================================================================== */
#main-sidebar .eco-menu-link {
    color: #94a3b8;
}
#main-sidebar .eco-menu-link i {
    color: inherit;
}
#main-sidebar .eco-menu-link:hover,
#main-sidebar .eco-menu-link:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}
#main-sidebar .eco-menu-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}
body.light-theme #main-sidebar .sidebar-section-label,
body.light-theme #main-sidebar h2.sidebar-section-label {
    color: #64748b !important;
}
body.light-theme #main-sidebar .eco-menu-link {
    color: #475569 !important;
}
body.light-theme #main-sidebar .eco-menu-link i {
    color: inherit !important;
}
body.light-theme #main-sidebar .eco-menu-link:hover,
body.light-theme #main-sidebar .eco-menu-link:focus-visible {
    color: #0f172a !important;
    background-color: rgba(15, 23, 42, 0.06) !important;
}
@media (forced-colors: active) {
    #main-sidebar .eco-menu-link:focus-visible {
        outline: 2px solid Highlight;
    }
}

/* ==========================================================================
   2c. CỤM USER & AVATAR Ở PANEL TRÁI (#subdomain-auth-widget)
   Mặc định không viền, không nền, không đổ bóng; chỉ hiển thị khi hover / click / focus-visible.
   ========================================================================== */
.subdomain-auth-trigger {
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.subdomain-auth-avatar {
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .subdomain-auth-trigger:hover {
        background-color: rgba(30, 41, 59, 0.62);
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 4px 14px -2px rgba(2, 6, 23, 0.45);
    }

    .subdomain-auth-trigger:hover .subdomain-auth-avatar {
        background-color: rgba(15, 23, 42, 0.45);
        border-color: rgba(251, 191, 36, 0.5);
        transform: scale(1.04);
    }

    .subdomain-auth-trigger:hover .subdomain-auth-pill {
        background-color: rgba(245, 158, 11, 0.28);
    }
}

.subdomain-auth-trigger:focus-visible {
    background-color: rgba(30, 41, 59, 0.62);
    border-color: rgba(245, 158, 11, 0.42);
    box-shadow: 0 4px 14px -2px rgba(2, 6, 23, 0.45);
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 2px;
}

.subdomain-auth-trigger:active {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 2px 10px -2px rgba(2, 6, 23, 0.55);
    transform: scale(0.985);
}

.subdomain-auth-trigger:is(:focus-visible, :active) .subdomain-auth-avatar {
    background-color: rgba(15, 23, 42, 0.5);
    border-color: rgba(251, 191, 36, 0.6);
}

body.light-theme .subdomain-auth-trigger,
body.light-theme .subdomain-auth-avatar {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    body.light-theme .subdomain-auth-trigger:hover {
        background-color: rgba(15, 23, 42, 0.06) !important;
        border-color: rgba(180, 83, 9, 0.4) !important;
        box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.12) !important;
    }

    body.light-theme .subdomain-auth-trigger:hover .subdomain-auth-avatar {
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(180, 83, 9, 0.45) !important;
    }

    body.light-theme .subdomain-auth-trigger:hover .subdomain-auth-pill {
        background-color: rgba(217, 119, 6, 0.22);
    }
}

body.light-theme .subdomain-auth-trigger:focus-visible {
    background-color: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(180, 83, 9, 0.45) !important;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.12) !important;
    outline: 2px solid #b45309;
    outline-offset: 2px;
}

body.light-theme .subdomain-auth-trigger:active {
    background-color: rgba(180, 83, 9, 0.1) !important;
    border-color: rgba(180, 83, 9, 0.6) !important;
    box-shadow: 0 2px 8px -2px rgba(180, 83, 9, 0.18) !important;
}

body.light-theme .subdomain-auth-trigger:is(:focus-visible, :active) .subdomain-auth-avatar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(180, 83, 9, 0.55) !important;
}

body.light-theme .subdomain-auth-name {
    color: #0f172a;
}

body.light-theme .subdomain-auth-sub {
    color: #475569;
}

body.light-theme .subdomain-auth-pill {
    background-color: rgba(217, 119, 6, 0.14);
    color: #92400e;
}

body.light-theme .subdomain-auth-pill i,
body.light-theme .subdomain-auth-pill span {
    color: #92400e;
}

#main-sidebar:is(.collapsed, .sidebar-collapsed) .subdomain-auth-trigger {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

#main-sidebar:is(.collapsed, .sidebar-collapsed) .subdomain-auth-trigger-inner {
    justify-content: center !important;
    flex: initial !important;
}

@media (forced-colors: active) {
    .subdomain-auth-trigger:hover,
    .subdomain-auth-trigger:focus-visible,
    .subdomain-auth-trigger:active {
        border-color: Highlight !important;
        outline: 2px solid Highlight;
    }
}

/* ==========================================================================
   3. THANH DANH MỤC TOP STICKY & Ô TÌM KIẾM
   ========================================================================== */
body.light-theme .sticky.top-0,
body.light-theme [class*="bg-[#090c13]/95"],
body.light-theme [class*="bg-[#07090e]/95"],
body.light-theme [class*="bg-[#06080e]/95"],
body.light-theme [class*="bg-[#060911]/90"],
body.light-theme [class*="bg-[#060911]/95"],
body.light-theme header[class*="bg-black/40"],
body.light-theme footer[class*="bg-black/60"],
body.light-theme #game-detail-drawer-footer {
    background-color: var(--media-light-sticky) !important;
    backdrop-filter: blur(16px) !important;
}

body.light-theme #game-detail-drawer,
body.light-theme [class*="bg-[#0c101a]"],
body.light-theme [class*="bg-[#060911]"] {
    background-color: var(--media-light-card-solid) !important;
    border-color: var(--media-light-border-strong) !important;
}

/* Filter Pills Chưa Chọn */
body.light-theme .cat-pill:not(.bg-gold-gradient):not(.bg-emerald-500):not(.bg-cyan-500):not(.bg-amber-500):not([class*="from-cyan"]):not([class*="from-emerald"]):not(.active),
body.light-theme .uni-pill:not(.bg-gold-gradient):not(.active),
body.light-theme button[data-cat]:not(.bg-gold-gradient):not(.active),
body.light-theme button[data-universe]:not(.bg-gold-gradient):not(.active) {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .cat-pill:not(.bg-gold-gradient):not(.bg-emerald-500):not(.bg-cyan-500):not(.bg-amber-500):not([class*="from-cyan"]):not([class*="from-emerald"]):not(.active):hover,
body.light-theme .uni-pill:not(.bg-gold-gradient):not(.active):hover,
body.light-theme button[data-cat]:not(.bg-gold-gradient):not(.active):hover,
body.light-theme button[data-universe]:not(.bg-gold-gradient):not(.active):hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}
body.light-theme .cat-pill.bg-emerald-500,
body.light-theme .cat-pill.bg-emerald-500 * {
    background-color: #047857 !important;
    color: #ffffff !important;
    border-color: #065f46 !important;
}

/* Sidebar Navigation Tàng Thư Các: sạch sẽ không đóng khung xám mọi dòng */
body.light-theme .tangthu-nav-btn:not(.active) {
    background-color: transparent !important;
    color: #475569 !important;
    border-color: transparent !important;
}
body.light-theme .tangthu-nav-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}
body.light-theme .tangthu-nav-btn.active {
    background-color: rgba(245, 158, 11, 0.16) !important;
    color: #92400e !important;
    border-color: rgba(217, 119, 6, 0.35) !important;
    font-weight: 700 !important;
}
body.light-theme .tangthu-nav-btn.active i {
    color: #b45309 !important;
}

/* Input Tìm Kiếm & Các Form Nhập Liệu */
body.light-theme input[type="text"],
body.light-theme input[type="search"],
body.light-theme textarea,
body.light-theme select {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: #94a3b8 !important;
}

/* ==========================================================================
   4. TIÊU ĐỀ, CHỮ, PHÔNG CHỮ & ĐỘ TƯƠNG PHẢN (TYPOGRAPHY)
   ========================================================================== */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: #0f172a !important;
}

body.light-theme .text-white {
    color: #0f172a !important;
}

/* Bảo toàn màu trắng cho các Badge màu nổi bật & Nút bấm chính */
body.light-theme [class*="bg-rose-"].text-white,
body.light-theme [class*="bg-rose-"] .text-white,
body.light-theme [class*="bg-emerald-"].text-white,
body.light-theme [class*="bg-emerald-"] .text-white,
body.light-theme [class*="bg-cyan-"].text-white,
body.light-theme [class*="bg-cyan-"] .text-white,
body.light-theme [class*="bg-blue-"].text-white,
body.light-theme [class*="bg-blue-"] .text-white,
body.light-theme [class*="bg-purple-"].text-white,
body.light-theme [class*="bg-purple-"] .text-white,
body.light-theme .bg-amber-600.text-white,
body.light-theme .bg-amber-600 .text-white,
body.light-theme .bg-amber-700.text-white,
body.light-theme .bg-amber-700 .text-white,
body.light-theme .cat-pill[class*="from-cyan"],
body.light-theme .cat-pill[class*="from-emerald"],
body.light-theme .cat-pill[class*="from-cyan"] *,
body.light-theme .cat-pill[class*="from-emerald"] * {
    color: #ffffff !important;
}
body.light-theme .cat-pill.bg-gold-gradient,
body.light-theme .cat-pill.bg-gold-gradient * {
    color: #000000 !important;
}

body.light-theme .text-slate-100,
body.light-theme .text-slate-200,
body.light-theme .text-slate-300,
body.light-theme [class*="text-slate-300/"] {
    color: #1e293b !important;
}

body.light-theme .text-slate-400,
body.light-theme .text-slate-500,
body.light-theme [class*="text-slate-400/"] {
    color: #475569 !important;
}

body.light-theme .text-amber-100,
body.light-theme .text-amber-200,
body.light-theme .text-amber-200\/90,
body.light-theme .text-amber-300,
body.light-theme .text-amber-300\/90,
body.light-theme .text-amber-300\/80,
body.light-theme .text-amber-300\/70 {
    color: #92400e !important;
}

body.light-theme .text-amber-400,
body.light-theme .text-amber-400\/90,
body.light-theme .text-amber-400\/80,
body.light-theme .text-amber-400\/70,
body.light-theme .text-yellow-300,
body.light-theme .text-yellow-400 {
    color: #b45309 !important;
}

/* Bảo toàn chữ kem sáng trên con dấu & nhãn thể loại nền đậm */
body.light-theme .seal-vermilion,
body.light-theme .seal-vermilion *,
body.light-theme [class*="from-red-"] .text-rose-100,
body.light-theme .bg-rose-700.text-amber-100,
body.light-theme .bg-emerald-700.text-amber-100,
body.light-theme .bg-purple-700.text-amber-100,
body.light-theme .bg-cyan-700.text-amber-100,
body.light-theme .bg-amber-700.text-amber-100,
body.light-theme .bg-rose-600.text-amber-100,
body.light-theme .bg-emerald-600.text-amber-100 {
    color: #fffbeb !important;
}

body.light-theme .text-cyan-300,
body.light-theme .text-cyan-400,
body.light-theme [class*="text-cyan-300"],
body.light-theme [class*="text-cyan-400"],
body.light-theme .text-sky-300,
body.light-theme .text-sky-400,
body.light-theme [class*="text-sky-300"],
body.light-theme [class*="text-sky-400"] {
    color: #0369a1 !important;
}

body.light-theme .text-emerald-300,
body.light-theme .text-emerald-400,
body.light-theme [class*="text-emerald-300"],
body.light-theme [class*="text-emerald-400"] {
    color: #047857 !important;
}

body.light-theme .text-rose-300,
body.light-theme .text-rose-400,
body.light-theme [class*="text-rose-300"],
body.light-theme [class*="text-rose-400"] {
    color: #be123c !important;
}

body.light-theme .text-purple-300,
body.light-theme .text-purple-400,
body.light-theme [class*="text-purple-300"],
body.light-theme [class*="text-purple-400"] {
    color: #7c3aed !important;
}

body.light-theme .text-orange-300,
body.light-theme .text-orange-400,
body.light-theme [class*="text-orange-300"],
body.light-theme [class*="text-orange-400"] {
    color: #ea580c !important;
}

/* Gradient Hoàng Kim sang trọng trên nền sáng */
body.light-theme .text-gold-gradient {
    background: linear-gradient(135deg, #78350f 0%, #b45309 45%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   5. CÁC THẺ CARD NỘI DUNG (TRACK, VIDEO, ART, PUBLISHER, ALBUM)
   ========================================================================== */
body.light-theme .album-card,
body.light-theme .video-card,
body.light-theme .photo-card,
body.light-theme article[id^="post-card-"],
body.light-theme [class*="bg-slate-900"]:not(.subdomain-auth-trigger):not(.subdomain-auth-avatar):not(#profile-back-btn):not(#tangthu-profile-back-btn):not(#tulau-profile-back-btn):not([class~="bg-transparent"]),
body.light-theme [class*="bg-slate-950"]:not(.subdomain-auth-trigger):not(.subdomain-auth-avatar):not(#profile-back-btn):not(#tangthu-profile-back-btn):not(#tulau-profile-back-btn):not([class~="bg-transparent"]),
body.light-theme [class*="bg-white/[0.02]"],
body.light-theme [class*="bg-white/[0.03]"],
body.light-theme [class*="bg-white/[0.04]"] {
    background-color: var(--media-light-card) !important;
    box-shadow: var(--media-light-shadow) !important;
    border: 1px solid var(--media-light-border) !important;
}

body.light-theme [class*="bg-gradient-to-"][class*="from-slate-9"]:not(.inset-0):not(:has(> img)),
body.light-theme [class*="bg-gradient-to-"][class*="from-[#0"]:not(.inset-0):not(:has(> img)) {
    background-image: none !important;
    background-color: var(--media-light-card-solid) !important;
    border: 1px solid var(--media-light-border) !important;
    box-shadow: var(--media-light-shadow-sm) !important;
}

/* Hộp phụ, thanh nhập liệu chat, vùng thông số & cột phải ở mọi phân hệ (Hồ Sơ, Tửu Lầu, Sự Kiện, Game) */
body.light-theme #live-chat-messages,
body.light-theme #live-chat-input,
body.light-theme [class*="bg-slate-800"]:not(.subdomain-auth-trigger):not(.subdomain-auth-avatar):not(#profile-back-btn):not(#tangthu-profile-back-btn):not(#tulau-profile-back-btn):not([class~="bg-transparent"]),
body.light-theme div[class*="bg-black/20"]:not(.fixed.inset-0),
body.light-theme div[class*="bg-black/25"]:not(.fixed.inset-0),
body.light-theme div[class*="bg-black/30"]:not(.fixed.inset-0),
body.light-theme div[class*="bg-black/40"]:not(.fixed.inset-0):not([id$="-modal"]),
body.light-theme div[class*="bg-black/50"]:not(.fixed.inset-0):not([id$="-modal"]),
body.light-theme input[class*="bg-black/"],
body.light-theme select[class*="bg-black/"],
body.light-theme textarea[class*="bg-black/"] {
    background-color: var(--media-light-canvas-soft) !important;
    color: #0f172a !important;
    border-color: var(--media-light-border) !important;
}

body.light-theme #tu-lau-right-rail [class*="bg-white/"] {
    background-color: rgba(15, 23, 42, 0.025) !important;
    border-color: var(--media-light-border) !important;
}

body.light-theme #tu-lau-right-rail [class*="hover:bg-white/"]:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Bảo toàn hộp nhúng video stream live & badge phủ trên ảnh bìa */
body.light-theme .aspect-video.bg-black\/80 {
    background-color: #020617 !important;
}

/* Bảo toàn chữ sáng & pill kính mờ đè lên ảnh bìa tối có lớp phủ gradient (Hồ Sơ Tửu Lầu, Banner Mùa Giải) */
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) h1,
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) h2,
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) h3,
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) .text-white {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
}
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) [class*="text-slate-"],
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) .text-slate-300 {
    color: #e2e8f0 !important;
}
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) [class*="text-amber-2"],
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) [class*="text-amber-3"] {
    color: #fde68a !important;
}
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) [class*="bg-black/"],
body.light-theme div.relative.overflow-hidden:has(> img):has(> div[class*="bg-gradient-to-t"]) [class*="bg-amber-500/20"] {
    background-color: rgba(15, 23, 42, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.light-theme .relative > span[class*="bg-black/"],
body.light-theme .relative .absolute span[class*="bg-black/"],
body.light-theme .relative > span[class*="bg-slate-9"],
body.light-theme .relative .absolute span[class*="bg-slate-9"],
body.light-theme .relative button[class*="bg-black/60"],
body.light-theme .relative button[class*="bg-slate-9"] {
    background-color: rgba(15, 23, 42, 0.78) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

/* Nút lọc Sự Kiện (.pill-btn) & Nút đổi Sáng/Tối (.eco-theme-toggle-btn) */
body.light-theme .pill-btn {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #334155 !important;
    border: 1px solid var(--media-light-border-strong) !important;
}

body.light-theme .pill-btn.active {
    background-color: rgba(245, 158, 11, 0.16) !important;
    color: #92400e !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}

.eco-theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.eco-theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

body.light-theme .eco-theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--media-light-border-strong) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .eco-theme-toggle-btn:hover {
    background-color: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}

/* Chữ gradient vàng trong Hồ Sơ & Tiêu đề: chuyển sang tông đồng đậm dễ đọc trên nền sáng */
body.light-theme h1.bg-clip-text.text-transparent,
body.light-theme .text-transparent.bg-clip-text[class*="from-amber"] {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #92400e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Loại bỏ đổ bóng đen nặng trên chữ/icon khi ở nền sáng */
body.light-theme header [class*="drop-shadow-["],
body.light-theme nav [class*="drop-shadow-["],
body.light-theme span[class*="drop-shadow-["],
body.light-theme h1[class*="drop-shadow-["],
body.light-theme h2[class*="drop-shadow-["],
body.light-theme div[class*="drop-shadow-[0_2px"],
body.light-theme div[class*="drop-shadow-[0_4px"],
body.light-theme i[class*="drop-shadow-["] {
    --tw-drop-shadow: none !important;
    filter: none !important;
}

body.light-theme img[class*="drop-shadow-[0_0_"] {
    --tw-drop-shadow: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12)) !important;
}

/* Thanh cuộn thanh nhã ở chế độ Sáng */
body.light-theme .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2) !important;
}

body.light-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 83, 9, 0.45) !important;
}

/* Thẻ Spotlight Hero */
body.light-theme #hero-spotlight-section p,
body.light-theme #hero-spotlight-section span:not([class*="bg-"]):not(.seal-vermilion) {
    color: #334155 !important;
}

/* Nền khối phẳng mờ */
body.light-theme .bg-white\/5,
body.light-theme .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .hover\:bg-white\/5:hover,
body.light-theme .hover\:bg-white\/10:hover,
body.light-theme .hover\:bg-white\/15:hover {
    background-color: rgba(0, 0, 0, 0.07) !important;
}

body.light-theme .border-white\/5,
body.light-theme .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   6. MÀN CHI TIẾT & BÌNH LUẬN (UNIFIED DETAIL UX & TRÌNH PHÁT ĐA PHƯƠNG TIỆN)
   ========================================================================== */
/* Header Unified Detail UX & Switcher 4 Trụ Cột (Phim • Truyện • Ảnh • Nhạc) */
body.light-theme #unified-detail-header,
body.light-theme .unified-detail-nav {
    background-color: var(--media-light-sticky) !important;
}

body.light-theme .unified-detail-nav a:not(.active),
body.light-theme .unified-detail-nav button:not(.active) {
    color: #475569 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .unified-detail-nav a:hover,
body.light-theme .unified-detail-nav button:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

/* Panel Bình Luận Đa Cấp Bên Phải */
body.light-theme #movie-comments-panel,
body.light-theme #thinh-phong-social-widget,
body.light-theme .comments-container-box {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme #movie-comments-panel .comment-item,
body.light-theme .social-comment-card {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-theme #movie-comments-panel .comment-item p,
body.light-theme .social-comment-card p {
    color: #1e293b !important;
}

body.light-theme #movie-comments-panel input,
body.light-theme #movie-comments-panel textarea,
body.light-theme .social-comment-card textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Danh Sách Tập Phim (Episodes Switcher) */
body.light-theme .episode-btn:not(.active) {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #334155 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .episode-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}
body.light-theme .episode-btn.active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   7. THÍNH PHONG CÁC (CẦM): MINI-PLAYER DOCK & MÂM QUAY ĐĨA THAN
   ========================================================================== */
body.light-theme #floating-mini-player {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #view-media-player {
    background: transparent !important;
}

body.light-theme #player-track-hanzi {
    color: rgba(180, 83, 9, 0.12) !important;
}

body.light-theme #companion-movie-link,
body.light-theme #companion-gallery-link {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #player-embedded-playlist [class*="bg-white/"] {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Thanh Sóng Âm (Waveform) & Bộ Điều Khiển */
body.light-theme #waveform-bars .waveform-bar {
    background-color: rgba(180, 83, 9, 0.35) !important;
}
body.light-theme #waveform-bars .waveform-bar.active {
    background-color: #d97706 !important;
}

/* ==========================================================================
   8. THƯ VIỆN ẢNH (HỌA): LIGHTBOX XEM TRANH 4K CHUYÊN NGHIỆP
   ========================================================================== */
body.light-theme #lightbox-modal {
    background-color: rgba(251, 251, 250, 0.98) !important;
}

body.light-theme #lightbox-modal #lb-title {
    color: #0f172a !important;
}

body.light-theme #lightbox-modal #lb-caption {
    color: #475569 !important;
}

body.light-theme #lightbox-modal button,
body.light-theme #lightbox-modal a {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme #lightbox-modal button:hover,
body.light-theme #lightbox-modal a:hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================================================
   9. HỒ SƠ MEDIA (ho_so_media.html): TỔNG QUAN, BÀI ĐÃ ĐĂNG & CREATOR STUDIO
   ========================================================================== */
body.light-theme #media-profile-back-btn {
    color: #334155 !important;
}
body.light-theme #media-profile-back-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

body.light-theme nav button[id^="media-tab-btn-"]:not(.text-amber-300) {
    color: #475569 !important;
}
body.light-theme nav button[id^="media-tab-btn-"]:not(.text-amber-300):hover {
    color: #0f172a !important;
}

body.light-theme #composer-content-type {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================================================
   10. TOAST NOTIFICATION & DIALOGS
   ========================================================================== */
body.light-theme #toast-message {
    background-color: #0f172a !important;
    color: #fef08a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}


/* ==========================================================================
   11. TÀNG THƯ CÁC — THẺ SƠN MÀI, GÁY SÁCH, BÌA & READER SURFACE CÔ LẬP
   ========================================================================== */
body.light-theme .hover\:bg-slate-800:hover,
body.light-theme .hover\:bg-slate-800\/80:hover {
    background-color: rgba(245, 158, 11, 0.12) !important;
}
body.light-theme .hover\:text-white:hover {
    color: #0f172a !important;
}
body.light-theme #theater-controls-overlay .hover\:text-white:hover {
    color: #ffffff !important;
}
body.light-theme .hover\:text-amber-200:hover,
body.light-theme .hover\:text-amber-300:hover,
body.light-theme .group:hover .group-hover\:text-amber-300 {
    color: #b45309 !important;
}

/* Bảo toàn chữ kem trong nút/con dấu trong Hero Spotlight */
body.light-theme #hero-spotlight-section .seal-vermilion,
body.light-theme #hero-spotlight-section .seal-vermilion * {
    color: #fffbeb !important;
}

/* Thẻ Sơn Mài -> Thẻ Giấy Tuyên Thành / Ngà Sáng */
body.light-theme .lacquer-card {
    background: linear-gradient(145deg, #ffffff 0%, var(--media-light-canvas-soft) 100%) !important;
    border: 1px solid var(--media-light-border-strong) !important;
    box-shadow: var(--media-light-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
body.light-theme .lacquer-card.cursor-pointer:hover,
body.light-theme article.lacquer-card:hover {
    border-color: rgba(217, 119, 6, 0.42) !important;
    box-shadow: var(--media-light-shadow-hover), inset 0 1px 0 #ffffff !important;
}

body.light-theme #post-input {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
}

/* Làm dịu gáy sách cổ trên nền sáng */
body.light-theme .book-spine-effect {
    box-shadow: -3px 2px 10px rgba(120, 80, 20, 0.12), inset 3px 0 0 rgba(180, 130, 50, 0.35), 0 8px 24px -6px rgba(120, 80, 20, 0.12) !important;
}
body.light-theme .book-spine-effect::before {
    background: linear-gradient(90deg, rgba(180, 130, 50, 0.22), transparent) !important;
}

/* Thống kê & nhãn phủ trực tiếp trên nền tối của ảnh bìa */
body.light-theme .cover-overlay-stats,
body.light-theme .cover-overlay-stats span {
    color: #f8fafc !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}
body.light-theme .cover-overlay-stats .text-rose-400 {
    color: #fda4af !important;
}
body.light-theme .cover-overlay-stats .text-amber-400 {
    color: #fcd34d !important;
}
body.light-theme .cover-overlay-vis {
    backdrop-filter: blur(8px);
    background-color: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fef3c7 !important;
}

/* Banner Đọc Tiếp & Cổng Quyền Đọc & Mục Lục Nhanh */
body.light-theme #resume-reading-container > div,
body.light-theme #reader-access-gate {
    background-image: linear-gradient(135deg, rgba(255, 251, 235, 0.92), #ffffff 60%, var(--media-light-canvas-soft)) !important;
    background-color: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
    box-shadow: var(--media-light-shadow-hover) !important;
}

body.light-theme .quick-toc-item:not(.active) {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
}
body.light-theme .quick-toc-item:not(.active):hover {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #92400e !important;
}
body.light-theme .quick-toc-item.active {
    background-color: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
    color: #92400e !important;
}

/* Trạng thái nút chọn màu giấy đang kích hoạt */
.paper-tone-btn.active-paper-tone {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    transform: scale(1.08);
}

/* Cô lập Bạch Giấy Sáng (hoạt động cả khi trang đang ở Dark Mode) */
#reader-paper-container.reader-light-surface {
    color-scheme: light;
    background: linear-gradient(160deg, #fffdf9 0%, #f8fafc 100%) !important;
    border-color: rgba(180, 140, 75, 0.32) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.14) !important;
}
#reader-paper-container.reader-light-surface h1,
#reader-paper-container.reader-light-surface h2,
#reader-paper-container.reader-light-surface h3,
#reader-paper-container.reader-light-surface h4,
#reader-paper-container.reader-light-surface .text-white,
#reader-paper-container.reader-light-surface .text-slate-100,
#reader-paper-container.reader-light-surface .text-slate-200 {
    color: #0f172a !important;
}
#reader-paper-container.reader-light-surface p,
#reader-paper-container.reader-light-surface #reader-content,
#reader-paper-container.reader-light-surface #reader-content p,
#reader-paper-container.reader-light-surface .text-slate-300 {
    color: #1e293b !important;
}
#reader-paper-container.reader-light-surface .text-slate-400,
#reader-paper-container.reader-light-surface .text-slate-500 {
    color: #475569 !important;
}
#reader-paper-container.reader-light-surface .text-amber-100,
#reader-paper-container.reader-light-surface .text-amber-200,
#reader-paper-container.reader-light-surface .text-amber-300,
#reader-paper-container.reader-light-surface .text-amber-300\/80 {
    color: #92400e !important;
}
#reader-paper-container.reader-light-surface .text-amber-400 {
    color: #b45309 !important;
}
#reader-paper-container.reader-light-surface .seal-vermilion,
#reader-paper-container.reader-light-surface .seal-vermilion *,
#reader-paper-container.reader-light-surface .bg-rose-700.text-amber-100,
#reader-paper-container.reader-light-surface .bg-emerald-700.text-amber-100,
#reader-paper-container.reader-light-surface .bg-purple-700.text-amber-100,
#reader-paper-container.reader-light-surface .bg-cyan-700.text-amber-100,
#reader-paper-container.reader-light-surface .bg-amber-700.text-amber-100,
#reader-paper-container.reader-light-surface .bg-rose-600.text-amber-100,
#reader-paper-container.reader-light-surface .bg-emerald-600.text-amber-100 {
    color: #fffbeb !important;
}
#reader-paper-container.reader-light-surface .text-emerald-100,
#reader-paper-container.reader-light-surface .text-emerald-300 {
    color: #047857 !important;
}
#reader-paper-container.reader-light-surface [class*="bg-slate-900"],
#reader-paper-container.reader-light-surface [class*="bg-slate-950"],
#reader-paper-container.reader-light-surface [class*="bg-black\/"],
#reader-paper-container.reader-light-surface textarea,
#reader-paper-container.reader-light-surface input {
    background-color: rgba(241, 245, 249, 0.92) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
#reader-paper-container.reader-light-surface [class*="border-white/"] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}
#reader-paper-container.reader-light-surface .text-gold-gradient {
    background: linear-gradient(135deg, #b45309 0%, #92400e 50%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
#reader-paper-container.reader-light-surface .bg-amber-600.text-white,
#reader-paper-container.reader-light-surface [class*="bg-emerald-"].text-white,
#reader-paper-container.reader-light-surface [class*="bg-rose-"].text-white {
    color: #ffffff !important;
}

/* Cô lập Giấy Đọc Tối / Hoàng Thư / Trúc Giản khi trang đang ở Light Mode */
body.light-theme #reader-paper-container.reader-dark-surface {
    color-scheme: dark;
    color: #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface[data-paper-tone="amber"] {
    background: #1c1815 !important;
    border-color: rgba(245, 158, 11, 0.42) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface[data-paper-tone="dark"] {
    background: #080b12 !important;
    border-color: #1e293b !important;
}
body.light-theme #reader-paper-container.reader-dark-surface[data-paper-tone="bamboo"] {
    background: #0a1410 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface h1,
body.light-theme #reader-paper-container.reader-dark-surface h2,
body.light-theme #reader-paper-container.reader-dark-surface h3,
body.light-theme #reader-paper-container.reader-dark-surface h4,
body.light-theme #reader-paper-container.reader-dark-surface .text-white,
body.light-theme #reader-paper-container.reader-dark-surface .text-slate-100 {
    color: #f8fafc !important;
}
body.light-theme #reader-paper-container.reader-dark-surface p,
body.light-theme #reader-paper-container.reader-dark-surface .text-slate-200,
body.light-theme #reader-paper-container.reader-dark-surface .text-slate-300 {
    color: #cbd5e1 !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-slate-400 {
    color: #94a3b8 !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-slate-500 {
    color: #64748b !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-100,
body.light-theme #reader-paper-container.reader-dark-surface #reader-content.text-amber-100\/90,
body.light-theme #reader-paper-container.reader-dark-surface #reader-content.text-amber-100\/90 > p {
    color: rgba(254, 243, 199, 0.92) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-emerald-100,
body.light-theme #reader-paper-container.reader-dark-surface #reader-content.text-emerald-100\/90,
body.light-theme #reader-paper-container.reader-dark-surface #reader-content.text-emerald-100\/90 > p {
    color: rgba(209, 250, 229, 0.92) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-200,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-200\/90 {
    color: #fde68a !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-300,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-300\/90,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-300\/80,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-300\/70 {
    color: #fcd34d !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-400,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-400\/90,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-400\/80,
body.light-theme #reader-paper-container.reader-dark-surface .text-amber-400\/70 {
    color: #fbbf24 !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .seal-vermilion,
body.light-theme #reader-paper-container.reader-dark-surface .seal-vermilion * {
    color: #fffbeb !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-rose-400 {
    color: #fb7185 !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-emerald-300,
body.light-theme #reader-paper-container.reader-dark-surface .text-emerald-400 {
    color: #34d399 !important;
}
body.light-theme #reader-paper-container.reader-dark-surface .text-gold-gradient {
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.light-theme #reader-paper-container.reader-dark-surface [class*="bg-slate-900"],
body.light-theme #reader-paper-container.reader-dark-surface [class*="bg-slate-950"],
body.light-theme #reader-paper-container.reader-dark-surface [class*="bg-black\/"],
body.light-theme #reader-paper-container.reader-dark-surface textarea,
body.light-theme #reader-paper-container.reader-dark-surface input {
    background-color: rgba(15, 23, 42, 0.78) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface #reader-access-gate {
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98) 60%, rgba(69, 26, 3, 0.45)) !important;
    background-color: #020617 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
body.light-theme #reader-paper-container.reader-dark-surface [class*="border-white/"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================================
   QUICK SETTINGS POPOVER (TOP LAYER API) & FOCUS/THEATER MODE CONTROLS
   ============================================================================ */
.eco-qs-popover {
    position: fixed !important;
    inset: auto;
    margin: 0;
    z-index: 9999;
    min-width: 14rem;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(2, 6, 23, 0.96);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(245, 158, 11, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.eco-qs-popover[popover]:not(:popover-open):not(.is-open),
.eco-qs-popover.hidden {
    display: none !important;
}

.eco-qs-popover[popover]:popover-open,
.eco-qs-popover.is-open {
    display: flex !important;
    flex-direction: column;
}

.eco-qs-popover button,
.eco-qs-popover a {
    color: inherit;
    text-align: left;
}

#main-sidebar.collapsed .sidebar-bottom-bar .eco-qs-popover button,
#main-sidebar.collapsed .sidebar-bottom-bar .eco-qs-popover a,
#main-sidebar.sidebar-collapsed .sidebar-bottom-bar .eco-qs-popover button,
#main-sidebar.sidebar-collapsed .sidebar-bottom-bar .eco-qs-popover a,
#main-sidebar.collapsed .eco-qs-popover button,
#main-sidebar.collapsed .eco-qs-popover a,
#main-sidebar.sidebar-collapsed .eco-qs-popover button,
#main-sidebar.sidebar-collapsed .eco-qs-popover a {
    justify-content: space-between !important;
    padding: 0.375rem 0.625rem !important;
    width: 100% !important;
}

#main-sidebar.collapsed .sidebar-bottom-bar .eco-qs-popover .eco-qs-stepper-btn,
#main-sidebar.sidebar-collapsed .sidebar-bottom-bar .eco-qs-popover .eco-qs-stepper-btn,
#main-sidebar.collapsed .eco-qs-popover .eco-qs-stepper-btn,
#main-sidebar.sidebar-collapsed .eco-qs-popover .eco-qs-stepper-btn {
    justify-content: center !important;
    width: auto !important;
    padding: 0.25rem 0.55rem !important;
}

.eco-qs-popover button:focus-visible,
.eco-qs-popover a:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
    background-color: rgba(245, 158, 11, 0.14);
}

.group\/settings > button[aria-expanded="true"] {
    color: #fcd34d;
    background-color: rgba(255, 255, 255, 0.12);
}

.group\/settings > button[aria-expanded="true"] i.fa-gear {
    transform: rotate(90deg);
}

body.light-theme .eco-qs-popover {
    background-color: rgba(255, 253, 249, 0.97) !important;
    color: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(180, 83, 9, 0.08) !important;
}

body.light-theme .eco-qs-popover .border-white\/10,
body.light-theme .eco-qs-popover .border-white\/15 {
    border-color: rgba(148, 163, 184, 0.25) !important;
}

body.light-theme .eco-qs-popover .bg-white\/5,
body.light-theme .eco-qs-popover .bg-white\/10 {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .eco-qs-popover button:hover,
body.light-theme .eco-qs-popover a:hover {
    background-color: rgba(15, 23, 42, 0.07) !important;
    color: #0f172a !important;
}

body.light-theme .eco-qs-popover .text-slate-300,
body.light-theme .eco-qs-popover .text-slate-200 {
    color: #1e293b !important;
}

body.light-theme .eco-qs-popover .text-slate-400 {
    color: #475569 !important;
}

body.light-theme .eco-qs-popover .text-amber-300 {
    color: #b45309 !important;
}

body.light-theme .eco-qs-popover .text-purple-300 {
    color: #7e22ce !important;
}

body.light-theme .eco-qs-popover .text-cyan-300 {
    color: #0e7490 !important;
}

body.light-theme .eco-qs-popover .text-rose-300 {
    color: #be123c !important;
}

body.light-theme .eco-qs-popover .text-emerald-300,
body.light-theme .eco-qs-popover .text-emerald-400 {
    color: #047857 !important;
}

body.light-theme .eco-qs-popover .eco-qs-stepper-btn {
    background-color: rgba(15, 23, 42, 0.07) !important;
    color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

body.light-theme .eco-qs-popover .eco-qs-stepper-btn:hover {
    background-color: rgba(217, 119, 6, 0.16) !important;
    color: #92400e !important;
}

/* Theater Mode / Focus helpers */
#tu-lau-right-rail.theater-dimmed {
    opacity: 0.22;
    filter: blur(1.5px);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

#tu-lau-right-rail.theater-dimmed:hover,
#tu-lau-right-rail.theater-dimmed:focus-within {
    opacity: 1;
    filter: none;
}

.eco-exit-theater-pill {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: #fef3c7;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.eco-exit-theater-pill:hover {
    transform: translateY(-1px);
    background: rgba(30, 41, 59, 0.96);
}

body.light-theme .eco-exit-theater-pill {
    color: #92400e;
    background: rgba(255, 251, 235, 0.95);
    border-color: rgba(217, 119, 6, 0.45);
}

body.hide-view-counts .view-count-badge {
    display: none !important;
}