/* =============================================================
   THEME SAKURA — โหมดสว่างโทนขาวซากุระ (ครีม + เบจ + taupe)
   ไฟล์นี้ override เฉพาะโหมดสว่าง (.dark-theme ไม่โดนแตะ)
   ใช้ตัวแปรจาก style.css :root
   - พื้นหลังสุด        #F5F4F0 (--bg-main)
   - กรอบครีมเบจ        #F3EFE6 (--panel-cream)
   - กรอบขาวบริสุทธิ์   #FDFCFB (--panel-white)
   - เส้นขอบ            #DDD7CB (--line)
   - ตัวอักษร           #756961 (--ink) / เข้ม #5B5048 (--ink-strong)
   - สีเน้นซากุระหม่น    #D98A9E (--accent) / เข้ม #B86B80 (--accent-deep)
   ============================================================= */

/* ---------- พื้นหลัง + scrollbar ---------- */
body:not(.dark-theme) {
    background: var(--bg-main);
    color: var(--ink);
}
html:has(body:not(.dark-theme)) { scrollbar-color: var(--accent) #ECE8DF; }
html:has(body:not(.dark-theme))::-webkit-scrollbar-track { background-color: #ECE8DF; }
html:has(body:not(.dark-theme))::-webkit-scrollbar-track:hover { background-color: #E4DFD4; }

/* ---------- ตัววิ่งข่าวบนสุด (acmeticker) ---------- */
body:not(.dark-theme) .acme-news-ticker {
    border: 1px solid var(--line);
    background: var(--panel-white);
    border-radius: 10px;
    overflow: hidden;
}
body:not(.dark-theme) .acme-news-ticker-label {
    background: var(--accent);
    color: #fff;
}
body:not(.dark-theme) .acme-news-ticker-box ul li a { color: var(--ink); }
body:not(.dark-theme) .acme-news-ticker-box ul li a span { color: var(--accent-deep); font-weight: 600; }

/* ---------- Header ---------- */
body:not(.dark-theme) .header-area .header-top .header-info-right .header-social li a {
    color: var(--accent-deep);
    background: var(--panel-white);
    border: 1px solid var(--line);
}
body:not(.dark-theme) .header-area .header-top .header-info-right .header-social li a:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
body:not(.dark-theme) .header-social { border-right-color: var(--line) !important; }
body:not(.dark-theme) #login-section a { color: var(--ink) !important; }
body:not(.dark-theme) #login-section a:hover { color: var(--accent-deep) !important; }

/* เมนูโปรไฟล์ (dropdown หลัง login) */
body:not(.dark-theme) .user-dropdown-menu {
    background: var(--panel-white);
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(120, 105, 90, 0.18);
}
body:not(.dark-theme) .coin-section {
    background: var(--panel-cream) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
body:not(.dark-theme) .coin-balance { color: #C99313; }
body:not(.dark-theme) .btn-topup { background: var(--accent); }
body:not(.dark-theme) .btn-topup:hover { background: var(--accent-deep); }
body:not(.dark-theme) .menu-list li a { color: var(--ink); }
body:not(.dark-theme) .menu-list li a:hover { background: #F4ECEA; color: var(--accent-deep); }
body:not(.dark-theme) .user-name { color: var(--ink-strong); }
body:not(.dark-theme) .user-handle { color: #A39687; }

/* ---------- กรอบฝั่งซ้าย: นิยายออกใหม่ / อัพเดทใหม่ ---------- */
body:not(.dark-theme) .home-rail {
    background: var(--panel-cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(120, 105, 90, 0.08);
}
body:not(.dark-theme) .rail-head h3 { color: #A8616E; }
body:not(.dark-theme) .rail-head h3 i { color: var(--accent); }
body:not(.dark-theme) .rail-empty { color: #A39687; }
body:not(.dark-theme) .nv-title { color: var(--ink-strong); }
body:not(.dark-theme) .nv-time { color: #A39687; }
body:not(.dark-theme) .nv-cover { background: #EFEAE0; }
body:not(.dark-theme) .nv-card:hover {
    filter: drop-shadow(0 4px 10px rgba(184, 107, 128, 0.45));
}
body:not(.dark-theme) .rail-arrow {
    background: rgba(253, 252, 251, 0.92);
    color: var(--accent-deep);
    border: 1px solid var(--line);
    box-shadow: 0 3px 12px rgba(120, 105, 90, 0.2);
}
body:not(.dark-theme) .rail-arrow:hover { background: #fff; }

/* ---------- กรอบฝั่งขวา: จัดอันดับนิยาย ---------- */
body:not(.dark-theme) .rank-box {
    background: var(--panel-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(120, 105, 90, 0.08);
}
body:not(.dark-theme) .rank-head {
    color: #A8616E;
    background: #F6E9E7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    text-shadow: none;
}
body:not(.dark-theme) .rank-item { border-bottom: 1px solid #EFEAE2; }
body:not(.dark-theme) .rank-item:hover { background: #F8F1EE; }
body:not(.dark-theme) .rank-title { color: var(--ink-strong); }
body:not(.dark-theme) .rank-stats { color: var(--ink); }
body:not(.dark-theme) .rank-stats i { color: var(--accent-deep); }
body:not(.dark-theme) .rank-num { color: #A39687; }
body:not(.dark-theme) .rank-cover { background: #EFEAE0; }

/* ---------- หัวข้อ "นิยายทั้งหมด" ---------- */
body:not(.dark-theme) .section-tittle {
    -webkit-text-fill-color: #A8616E;
    -webkit-text-stroke-width: 0;
    color: #A8616E;
}
body:not(.dark-theme) .section-tittle i { color: var(--accent); }
body:not(.dark-theme) .section-tittle::after {
    background-color: var(--accent);
    box-shadow: 28px 5px 0px 0px var(--accent);
    opacity: 0.45;
}

/* ---------- การ์ดนิยาย (นิยายทั้งหมด + ชั้นหนังสือ) ---------- */
body:not(.dark-theme) .block2 {
    background: var(--panel-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: 0 3px 14px rgba(120, 105, 90, 0.08);
}
body:not(.dark-theme) .block2-txt-child1 a { color: var(--ink-strong); }
body:not(.dark-theme) .block2-txt-child1 a:hover { color: var(--accent-deep); }
body:not(.dark-theme) .update-badge {
    border-color: var(--accent);
    background-color: rgba(217, 138, 158, 0.08);
    color: var(--accent-deep);
}
body:not(.dark-theme) .block2:hover .update-badge {
    background-color: var(--accent);
    color: #fff;
}

/* pagination นิยายทั้งหมด */
body:not(.dark-theme) .pg-btn {
    border-color: var(--line);
    background: var(--panel-white);
    color: var(--accent-deep);
}
body:not(.dark-theme) .pg-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent), #E5A9B8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 14px rgba(217, 138, 158, 0.4);
}
body:not(.dark-theme) .pg-btn.pg-active {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 16px rgba(184, 107, 128, 0.45);
}
body:not(.dark-theme) .pg-ellipsis { color: var(--accent-deep); }

/* ---------- หน้าเมนูเรื่อง (MENU): การ์ดรายละเอียด + กลุ่มตอน ---------- */
body:not(.dark-theme) .nt-card {
    background: var(--panel-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(120, 105, 90, 0.1);
}
body:not(.dark-theme) .nt-card::before {
    background: radial-gradient(circle, rgba(217, 138, 158, 0.16) 0%, transparent 70%);
}
body:not(.dark-theme) .custom-cover {
    box-shadow: 0 10px 28px rgba(120, 105, 90, 0.25);
}
body:not(.dark-theme) .custom-cover:hover {
    box-shadow: 0 16px 36px rgba(184, 107, 128, 0.35);
}
body:not(.dark-theme) .novel-title { color: #A8616E; }
body:not(.dark-theme) .novel-description {
    color: var(--ink);
    border-left-color: var(--accent);
}
body:not(.dark-theme) .genre-tag {
    background: #F6E9E7;
    color: #A8616E;
    border: 1px solid var(--line);
}
body:not(.dark-theme) .nt-btn-read {
    background: var(--panel-cream);
    color: #A8616E;
    border: 2px solid var(--line);
}
body:not(.dark-theme) .nt-btn-read:hover {
    background: linear-gradient(135deg, var(--accent), #E5A9B8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(217, 138, 158, 0.4);
}
body:not(.dark-theme) .nt-btn-ticket {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 4px 14px rgba(184, 107, 128, 0.3);
}
body:not(.dark-theme) .nt-btn-ticket:hover {
    background: linear-gradient(135deg, var(--accent-deep), #A85A70);
    box-shadow: 0 8px 20px rgba(168, 90, 112, 0.4);
}
body:not(.dark-theme) .heart-icon { stroke: var(--accent-deep); }
body:not(.dark-theme) .heart-container input:checked + .heart-icon {
    fill: var(--accent-deep);
    stroke: var(--accent-deep);
    filter: drop-shadow(0 2px 8px rgba(184, 107, 128, 0.5));
}

body:not(.dark-theme) .collection-item {
    background: var(--panel-cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
}
body:not(.dark-theme) .collection-item:hover {
    background: #EFE8DA;
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(120, 105, 90, 0.14);
}
body:not(.dark-theme) .group-title { color: var(--ink-strong); }
body:not(.dark-theme) .chapter-range { color: #A39687; }
body:not(.dark-theme) .badge-free { color: var(--accent-deep); }
body:not(.dark-theme) .badge-ticket {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 2px 8px rgba(184, 107, 128, 0.3);
}
/* ปลดล็อกแล้ว — เปลี่ยนจากแดงจัดเป็นโทนซากุระเข้ม */
body:not(.dark-theme) .collection-item.is-unlocked {
    background: rgba(217, 138, 158, 0.1);
    border-color: var(--accent-deep);
    box-shadow: 0 0 12px rgba(184, 107, 128, 0.35);
}
body:not(.dark-theme) .collection-item.is-unlocked:hover {
    background: rgba(217, 138, 158, 0.16);
    box-shadow: 0 6px 18px rgba(184, 107, 128, 0.4);
}

/* เส้นคั่นหัวใจ */
body:not(.dark-theme) .luxury-divider {
    background-image: linear-gradient(to right, rgba(217,138,158,0), rgba(217,138,158,0.75), rgba(217,138,158,0));
    box-shadow: 0 0 12px rgba(217, 138, 158, 0.4);
}
body:not(.dark-theme) .luxury-divider::after {
    color: var(--accent-deep);
    background: var(--bg-main);
}

/* breadcrumb */
body:not(.dark-theme) .breadcrumb-item a { color: var(--ink); }
body:not(.dark-theme) .breadcrumb-item a:hover { color: var(--accent-deep); }
body:not(.dark-theme) .breadcrumb > .active,
body:not(.dark-theme) .breadcrumb-item + .breadcrumb-item::before { color: #A39687; }

/* ---------- กล่องคอมเมนต์ ---------- */
body:not(.dark-theme) .chat-count-header { color: var(--ink-strong); }
body:not(.dark-theme) .chat-user-img,
body:not(.dark-theme) .chat-user-avatar img { border-color: var(--accent); }
body:not(.dark-theme) .chat-input-box,
body:not(.dark-theme) .reply-input-box {
    background: var(--panel-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(120, 105, 90, 0.07);
}
body:not(.dark-theme) .chat-textarea,
body:not(.dark-theme) .reply-textarea { color: var(--ink-strong); }
body:not(.dark-theme) .chat-textarea::placeholder,
body:not(.dark-theme) .reply-textarea::placeholder { color: #A39687; }
body:not(.dark-theme) .chat-send-btn,
body:not(.dark-theme) .reply-send-btn { color: var(--accent-deep); }
body:not(.dark-theme) .chat-send-btn:hover,
body:not(.dark-theme) .reply-send-btn:hover { color: var(--accent); }
body:not(.dark-theme) .comment-name { color: var(--ink-strong); }
body:not(.dark-theme) .comment-text { color: var(--ink); }
body:not(.dark-theme) .comment-actions,
body:not(.dark-theme) .reply-btn { color: #A39687; }
body:not(.dark-theme) .reply-btn:hover { color: var(--accent-deep); }
body:not(.dark-theme) .read-more-inline,
body:not(.dark-theme) .read-less-block { color: var(--accent-deep); }
body:not(.dark-theme) .edit-comment-btn:hover {
    color: var(--accent-deep);
    background: rgba(217, 138, 158, 0.12);
}
body:not(.dark-theme) .edit-textarea {
    border-color: var(--line);
    background: var(--panel-white);
    color: var(--ink-strong);
}
body:not(.dark-theme) .edit-save-btn { background: var(--accent-deep); }
body:not(.dark-theme) .edit-save-btn:hover:not(:disabled) { background: var(--accent); }

/* ---------- Login modal ---------- */
body:not(.dark-theme) .bg-dark-custom {
    background-color: rgba(253, 252, 251, 0.82);
    border: 1px solid var(--line);
    box-shadow: 0 15px 35px rgba(120, 105, 90, 0.22);
}
body:not(.dark-theme) .txt-header-modal {
    color: #A8616E !important;
    text-shadow: none;
}
body:not(.dark-theme) .btn-close-modal {
    color: var(--ink);
    text-shadow: none;
}
body:not(.dark-theme) .line-divider { border-top-color: var(--line); }
body:not(.dark-theme) .form-control-dark {
    background-color: #fff !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-strong) !important;
}
body:not(.dark-theme) .form-control-dark:focus {
    background-color: #fff !important;
    border-color: var(--accent) !important;
}
body:not(.dark-theme) .form-control-dark::placeholder { color: #A39687 !important; }
body:not(.dark-theme) .btn-login-purple {
    background-color: var(--accent-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: 0 8px 22px rgba(184, 107, 128, 0.35);
}
body:not(.dark-theme) .btn-login-purple:hover {
    background-color: #A85A70;
    box-shadow: 0 10px 26px rgba(184, 107, 128, 0.45);
}
body:not(.dark-theme) .auth-tabs { background: #EFEAE2; }
body:not(.dark-theme) .auth-tab { color: var(--ink); }
body:not(.dark-theme) .auth-tab.active {
    background: #fff;
    color: var(--accent-deep);
    box-shadow: 0 2px 8px rgba(120, 105, 90, 0.15);
}

/* ---------- กระดิ่งแจ้งเตือน ---------- */
body:not(.dark-theme) #notification-dropdown {
    background: rgba(253, 252, 251, 0.92);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(120, 105, 90, 0.18);
}
body:not(.dark-theme) .notif-header { border-bottom-color: var(--line); }
body:not(.dark-theme) .notif-header span { color: var(--ink-strong); }
body:not(.dark-theme) #notif-mark-all { color: var(--accent-deep); }
body:not(.dark-theme) #notif-mark-all:hover { background: rgba(217, 138, 158, 0.12); }
body:not(.dark-theme) .notif-tabs { border-bottom-color: var(--line); }
body:not(.dark-theme) .notif-tab { color: var(--ink); }
body:not(.dark-theme) .notif-tab:hover { background: rgba(217, 138, 158, 0.1); }
body:not(.dark-theme) .notif-tab.active {
    background: rgba(217, 138, 158, 0.16);
    color: var(--accent-deep);
}
body:not(.dark-theme) .notif-item { border-bottom-color: #EFEAE2; }
body:not(.dark-theme) .notif-item:hover { background: #F8F1EE; }
body:not(.dark-theme) .notif-item.is-new { background: rgba(217, 138, 158, 0.12); }
body:not(.dark-theme) .notif-item.is-new:hover { background: rgba(217, 138, 158, 0.2); }
body:not(.dark-theme) .notif-title { color: var(--ink-strong); }
body:not(.dark-theme) .notif-time { color: var(--ink); }
body:not(.dark-theme) .notif-item img { background: #EFEAE0; }
body:not(.dark-theme) .notif-empty { color: #A39687; }
body:not(.dark-theme) #notification-bell-btn i { color: var(--accent-deep); }
body:not(.dark-theme) #notification-bell-btn:hover { background: rgba(217, 138, 158, 0.12); }
body:not(.dark-theme) #notification-badge { box-shadow: 0 0 0 2px var(--bg-main); }

/* ---------- หน้าเติมตั๋ว (Topup) ---------- */
body:not(.dark-theme) .topup-header h2 { color: var(--ink-strong); }
body:not(.dark-theme) .topup-header p { color: var(--ink); }
body:not(.dark-theme) .balance-box {
    background: var(--panel-cream);
    border: 1px solid var(--line);
    color: #C99313;
}
body:not(.dark-theme) .step-label { color: var(--ink-strong); }
body:not(.dark-theme) .step-num { background: var(--accent-deep); }
body:not(.dark-theme) .pay-amount-highlight { color: var(--accent-deep); }
body:not(.dark-theme) .pkg-card {
    background: var(--panel-white);
    border: 1px solid var(--line);
}
body:not(.dark-theme) .pkg-card:hover { border-color: var(--accent); }
body:not(.dark-theme) .pkg-card.selected {
    background: #F6E9E7;
    border-color: var(--accent-deep);
}
body:not(.dark-theme) .pkg-tickets { color: var(--ink-strong); }
body:not(.dark-theme) .pkg-label { color: #A39687; }
body:not(.dark-theme) .pkg-price { color: var(--accent-deep); }
body:not(.dark-theme) .qr-box { border: 1px solid var(--line); }
body:not(.dark-theme) .qr-caption strong { color: var(--accent-deep); }
body:not(.dark-theme) .slip-upload-label {
    background: var(--panel-cream);
    border: 2px dashed var(--accent);
    color: var(--ink);
}
body:not(.dark-theme) .slip-upload-label:hover { background: #EFE8DA; }
body:not(.dark-theme) .topup-note { color: #A39687; }
body:not(.dark-theme) .topup-note a { color: var(--accent-deep); }

/* ---------- หน้าตั้งค่า (Setting) ---------- */
body:not(.dark-theme) .sakura-content-box {
    background: var(--panel-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 32px rgba(120, 105, 90, 0.14);
}
body:not(.dark-theme) .profile-icon-wrapper {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(120, 105, 90, 0.22);
}
body:not(.dark-theme) .profile-input-group label { color: var(--accent-deep); }
body:not(.dark-theme) .profile-input-group input {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-strong);
}
body:not(.dark-theme) .btn-save-profile {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 6px 18px rgba(184, 107, 128, 0.35);
}

/* ---------- หน้าอ่านนิยาย: ปรับเฉพาะพื้นหลังให้กลืนธีม ---------- */
/* (พื้นหลังหลักมาจาก --secondary-color ใน style.css อยู่แล้ว) */

/* ============================================================
   ส่วนที่เพิ่มเติม — ครอบส่วนที่ยังขาดหายไป
   ============================================================ */

/* ---------- Header / Sticky bar พื้นหลัง ---------- */
body:not(.dark-theme) .header-area {
    background: var(--bg-main);
    border-bottom: 1px solid var(--line);
}
body:not(.dark-theme) .sticky-bar {
    background: var(--bg-main) !important;
    box-shadow: 0 0 12px rgba(184, 107, 128, 0.14) !important;
    border-bottom: 1px solid var(--line);
}
body:not(.dark-theme) .header-area .header-top {
    background: var(--bg-main);
}
/* ปุ่ม close "X" มือถือ slicknav */
body:not(.dark-theme) .slicknav_menu .slicknav_icon-bar {
    background: var(--ink-strong) !important;
}
body:not(.dark-theme) .slicknav_menu {
    background: var(--panel-white) !important;
    border-bottom: 1px solid var(--line);
}
body:not(.dark-theme) .slicknav_nav a {
    color: var(--ink) !important;
}
body:not(.dark-theme) .slicknav_nav a:hover {
    color: var(--accent-deep) !important;
    background: rgba(217, 138, 158, 0.1) !important;
}

/* ---------- Profile avatar border ---------- */
body:not(.dark-theme) .profile-avatar-wrapper {
    border-color: var(--accent) !important;
    background: var(--panel-white);
}
/* icon bell hover */
body:not(.dark-theme) #notification-bell-btn:hover {
    background: rgba(217, 138, 158, 0.12) !important;
}

/* ---------- Notification dropdown — light theme ---------- */
body:not(.dark-theme) #notification-dropdown {
    background: rgba(253, 252, 251, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(120, 105, 90, 0.18);
}
body:not(.dark-theme) .notif-header {
    border-bottom-color: var(--line);
}
body:not(.dark-theme) .notif-header span {
    color: var(--ink-strong);
}
body:not(.dark-theme) #notif-mark-all {
    color: var(--accent-deep);
}
body:not(.dark-theme) #notif-mark-all:hover {
    background: rgba(217, 138, 158, 0.12);
}
body:not(.dark-theme) .notif-tabs {
    border-bottom-color: var(--line);
}
body:not(.dark-theme) .notif-tab {
    color: var(--ink);
}
body:not(.dark-theme) .notif-tab:hover {
    background: rgba(217, 138, 158, 0.1);
}
body:not(.dark-theme) .notif-tab.active {
    background: rgba(217, 138, 158, 0.16);
    color: var(--accent-deep);
}

/* ---------- Login Modal — แก้สีให้เข้าธีมซากุระ ---------- */
/* overlay พื้นหลัง modal */
body:not(.dark-theme) .overlay-modal1 {
    background-color: rgba(200, 180, 170, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* กล่อง modal */
body:not(.dark-theme) .bg-dark-custom {
    background-color: rgba(253, 252, 251, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow: 0 15px 40px rgba(120, 105, 90, 0.22);
}
/* ปุ่ม X ปิด modal */
body:not(.dark-theme) .btn-close-modal {
    color: var(--ink-strong) !important;
    text-shadow: none !important;
}
body:not(.dark-theme) .btn-close-modal:hover {
    color: var(--accent-deep) !important;
}
/* ปุ่ม login เปลี่ยนจากน้ำเงินเป็นซากุระ */
body:not(.dark-theme) .btn-login-purple {
    background-color: var(--accent-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(184, 107, 128, 0.35) !important;
}
body:not(.dark-theme) .btn-login-purple:hover {
    background-color: #A85A70 !important;
    box-shadow: 0 10px 26px rgba(184, 107, 128, 0.45) !important;
    transform: translateY(-1px);
}
/* ปุ่ม Register (btn-red-admin) ปรับให้เข้าธีม */
body:not(.dark-theme) .btn-red-admin {
    background-color: rgba(184, 107, 128, 0.8) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(184, 107, 128, 0.4) !important;
    box-shadow: 0 8px 22px rgba(184, 107, 128, 0.28) !important;
}
body:not(.dark-theme) .btn-red-admin:hover {
    background-color: var(--accent-deep) !important;
    box-shadow: 0 10px 26px rgba(184, 107, 128, 0.4) !important;
}
/* Auth tabs */
body:not(.dark-theme) .auth-tabs {
    background: #EFEAE2;
}
body:not(.dark-theme) .auth-tab {
    color: var(--ink);
}
body:not(.dark-theme) .auth-tab.active {
    background: #fff;
    color: var(--accent-deep);
    box-shadow: 0 2px 8px rgba(120, 105, 90, 0.15);
}

/* ---------- Topup page — ปรับโทนการ์ดแพ็กเกจ ---------- */
body:not(.dark-theme) .pkg-card {
    background: var(--panel-white) !important;
    border: 2px solid var(--line) !important;
}
body:not(.dark-theme) .pkg-card:hover {
    border-color: var(--accent) !important;
}
body:not(.dark-theme) .pkg-card.selected {
    background: #F6E9E7 !important;
    border-color: var(--accent-deep) !important;
}
body:not(.dark-theme) .pkg-tickets {
    color: var(--ink-strong) !important;
}
body:not(.dark-theme) .pkg-label {
    color: #A39687 !important;
}
body:not(.dark-theme) .pkg-price {
    color: var(--accent-deep) !important;
}
body:not(.dark-theme) .slip-upload-label {
    background: var(--panel-cream) !important;
    border-color: var(--accent) !important;
    color: var(--ink) !important;
}
body:not(.dark-theme) .slip-upload-label:hover {
    background: #EFE8DA !important;
}

/* ---------- ซากุระ canvas: ลด opacity ในโหมดสว่างให้นุ่มขึ้น ---------- */
body:not(.dark-theme) #sakura {
    opacity: 0.45;
}

/* ---------- user-dropdown-menu เส้นขอบ + สี separator ---------- */
body:not(.dark-theme) .dark-hr {
    border-top-color: var(--line) !important;
}
/* สีตัวหนังสือ top-info / เข้าสู่ระบบ */
body:not(.dark-theme) ul.top-info li p.info-text {
    color: var(--ink) !important;
}

/* ---------- User dropdown menu (เก่า) ---------- */
body:not(.dark-theme) .profile-dropdown-content {
    background-color: var(--panel-white) !important;
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(120, 105, 90, 0.18);
}
body:not(.dark-theme) .profile-dropdown-content a.dropdown-item {
    color: var(--ink) !important;
}
body:not(.dark-theme) .profile-dropdown-content a.dropdown-item:hover {
    background: #F4ECEA !important;
    color: var(--accent-deep) !important;
}
body:not(.dark-theme) .user-info strong {
    color: var(--ink-strong) !important;
}
body:not(.dark-theme) .user-info span {
    color: #A39687 !important;
}


/* ============================================================
   DARK THEME OVERRIDES (RAIN & STREETLIGHT THEME)
   ปรับ UI และกรอบในโหมดมืดให้เข้ากับแสงโคมไฟ (ส้มทอง)
   ============================================================ */

/* Panels and Rails */
body.dark-theme .home-rail,
body.dark-theme .rank-box,
body.dark-theme .bg-dark-custom,
body.dark-theme #notification-dropdown,
body.dark-theme .profile-dropdown-content,
body.dark-theme .header-area,
body.dark-theme .sticky-bar,
body.dark-theme .header-top {
    background: var(--panel-dark) !important;
    border: 1px solid var(--line-dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* เฉพาะ header ให้มนแค่ด้านล่างถ้าต้องการ แต่จริงๆ header ปกติไม่มน ข้าม border-radius ไปสำหรับ header */
body.dark-theme .header-area,
body.dark-theme .sticky-bar,
body.dark-theme .header-top {
    border-radius: 0 !important;
}

body.dark-theme .rail-head h3 i,
body.dark-theme .rank-stats i,
body.dark-theme .nv-time i,
body.dark-theme .pkg-price,
body.dark-theme .rank-num {
    color: var(--accent) !important;
}

/* Covers and Images placeholders */
body.dark-theme .nv-cover,
body.dark-theme .rank-cover,
body.dark-theme .pkg-card {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid var(--line-dark) !important;
    border-radius: 8px !important;
}

body.dark-theme .nv-card:hover {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5)) drop-shadow(0 0 22px rgba(245, 158, 11, 0.2)) !important;
}

/* Navigation & Arrows */
body.dark-theme .rail-arrow {
    background: rgba(10, 10, 10, 0.95) !important;
    color: var(--accent) !important;
    border: 1px solid var(--line-dark) !important;
    border-radius: 50% !important;
}
body.dark-theme .rail-arrow:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--text-color) !important;
}

/* Pagination */
body.dark-theme .pg-btn {
    background: rgba(10, 10, 10, 0.8) !important;
    color: var(--accent) !important;
    border: 1px solid var(--line-dark) !important;
    border-radius: 8px !important;
}
body.dark-theme .pg-btn:hover:not(:disabled),
body.dark-theme .pg-btn.pg-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(245, 158, 11, 0.3) !important;
    border-color: transparent !important;
}
body.dark-theme .pg-ellipsis { color: var(--accent) !important; }

/* Rank head gradient */
body.dark-theme .rank-head {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
    color: var(--text-color) !important;
    border-radius: 12px 12px 0 0 !important;
}
body.dark-theme .rank-item {
    border-bottom: 1px solid var(--line-dark) !important;
}
body.dark-theme .rank-item:hover {
    background: rgba(245, 158, 11, 0.08) !important;
}

/* Topup Cards */
body.dark-theme .pkg-card.selected {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: var(--accent) !important;
}
body.dark-theme .slip-upload-label {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px dashed var(--line-dark) !important;
    border-radius: 12px !important;
    color: var(--text-color) !important;
}
body.dark-theme .slip-upload-label:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

/* Notification Tabs & Buttons */
body.dark-theme .notif-header,
body.dark-theme .notif-tabs {
    border-bottom: 1px solid var(--line-dark) !important;
}
body.dark-theme #notif-mark-all {
    color: var(--accent) !important;
    border-radius: 6px !important;
}
body.dark-theme #notif-mark-all:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}
body.dark-theme .notif-tab {
    color: var(--text-color) !important;
    border-radius: 8px !important;
}
body.dark-theme .notif-tab.active {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--accent) !important;
}
body.dark-theme .notif-tab:hover {
    background: rgba(245, 158, 11, 0.08) !important;
}

/* Buttons */
body.dark-theme .btn-login-purple,
body.dark-theme .btn-red-admin {
    background-color: var(--accent-deep) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.25) !important;
    color: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.dark-theme .btn-login-purple:hover,
body.dark-theme .btn-red-admin:hover {
    background-color: var(--accent) !important;
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.4) !important;
}

body.dark-theme .profile-avatar-wrapper {
    border-color: var(--accent) !important;
    background: var(--panel-dark) !important;
    border-radius: 50% !important;
}

body.dark-theme .auth-tabs {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid var(--line-dark) !important;
    border-radius: 12px !important;
}
body.dark-theme .auth-tab.active {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--accent) !important;
    border-radius: 10px !important;
}