/* Dark mode styles — extracted from inline <style> for performance */

/* Dark Mode styles */
body.dark #donate {
    background: linear-gradient(135deg, #d81b60, #c62828);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
@media (hover: hover) {
    body.dark #donate:hover {
        box-shadow: 0 0 15px rgba(198, 40, 40, 0.4);
    }
}
body.dark #theme-toggle #dark-icon {
    display: none !important;
}
body.dark #theme-toggle #light-icon {
    display: block !important;
}
body:not(.dark) #theme-toggle #light-icon {
    display: none !important;
}
body:not(.dark) #theme-toggle #dark-icon {
    display: block !important;
}
/* ============================================================
   DARK MODE — UNIFIED THEME
   All rules scoped to body.dark — light mode untouched
   ============================================================ */
body.dark {
    background-color: #1a1a1a !important;
    color: #B5B5B5 !important;
}
body.dark .bg-gray-002 { background-color: #1a1a1a !important; }
body.dark .bg-gray-50,
body.dark .bg-slate-50 { background-color: #1a1a1a !important; }
body.dark .bg-white { background-color: #202020 !important; }
body.dark span.bg-white { background-color: #fff !important; }
body.dark .bg-gray-100,
body.dark .bg-slate-100 { background-color: #252525 !important; }
body.dark .border-gray-100,
body.dark .border-gray-200,
body.dark .border-gray-300,
body.dark .border-slate-100,
body.dark .border-slate-200 { border-color: #333 !important; }
body.dark .divide-gray-100 > * + * { border-color: #333 !important; }
body.dark .text-color-body-001,
body.dark .text-gray-800,
body.dark .text-gray-900,
body.dark .text-slate-800,
body.dark .text-slate-900 { color: #B5B5B5 !important; }
body.dark .text-gray-700,
body.dark .text-gray-600,
body.dark .text-slate-600 { color: #9a9a9a !important; }
body.dark .text-gray-500,
body.dark .text-gray-400,
body.dark .text-slate-500,
body.dark .text-slate-400 { color: #808080 !important; }
body.dark .text-blue-001 { color: #6b8fc7 !important; }
body.dark .post-tab { color: #8a8a8a !important; }
body.dark .post-tab.border-red-500 { color: #f87171 !important; }
body.dark [class*="hover:bg-blue-50"]:hover,
body.dark [class*="hover:bg-green-50"]:hover,
body.dark [class*="hover:bg-gray-100"]:hover,
body.dark [class*="hover:bg-slate-50"]:hover { background-color: #2a2a2a !important; }
body.dark [class*="bg-gray-100/80"],
body.dark [class*="bg-gray-50/80"] { background-color: #282828 !important; }
body.dark .shadow-sm,
body.dark .shadow { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }
body.dark textarea,
body.dark input[type="text"],
body.dark input[type="search"],
body.dark input[type="number"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark select { background-color: #2a2a2a !important; color: #B5B5B5 !important; border-color: #444 !important; border-width: 1px !important; }
body.dark textarea::placeholder,
body.dark input::placeholder { color: #666 !important; }
body.dark .text-blue-500 { color: #60a5fa !important; }
body.dark .border-gray-300 { border-color: #444 !important; }
body.dark .font-content { color: #B5B5B5 !important; }
/* TinyMCE editor dark mode */
body.dark .tox-tinymce { border-color: #444 !important; background-color: #2a2a2a !important; }
body.dark .tox .tox-edit-area__iframe { background-color: #202020 !important; }
body.dark .tox .tox-editor-header { background-color: #2a2a2a !important; border-color: #444 !important; box-shadow: none !important; }
body.dark .tox .tox-toolbar-overlord { background-color: transparent !important; }
body.dark .tox .tox-toolbar { background-color: transparent !important; }
body.dark .tox .tox-toolbar__primary { background: none !important; background-color: #2a2a2a !important; border-color: #444 !important; }
body.dark .tox .tox-statusbar { background-color: #2a2a2a !important; border-color: #444 !important; color: #888 !important; }
body.dark .tox .tox-tbtn { color: #ccc !important; }
body.dark .tox .tox-tbtn svg { fill: #ccc !important; }
body.dark .tox .tox-tbtn:hover { background-color: #3d3d3d !important; }
body.dark .tox .tox-mbtn { color: #ccc !important; }
body.dark .tox .tox-mbtn:hover { background-color: #3d3d3d !important; }
body.dark .tox .tox-split-button:hover { background-color: #3d3d3d !important; }
body.dark .tox .tox-menu { background-color: #2a2a2a !important; border-color: #444 !important; }
body.dark .tox .tox-collection__item { color: #ccc !important; }
body.dark .tox .tox-collection__item:hover { background-color: #3d3d3d !important; }
body.dark .tox { border-color: #444 !important; }
/* CKEditor dark mode */
body.dark .cke_chrome { border-color: #444 !important; }
body.dark .cke_inner { background: #2a2a2a !important; }
body.dark .cke_top { background: #2a2a2a !important; border-bottom: 1px solid #444 !important; }
body.dark .cke_bottom { background: #2a2a2a !important; border-top: 1px solid #444 !important; }
body.dark .cke_toolgroup { background: #202020 !important; border-color: #444 !important; }
body.dark .cke_button { background: transparent !important; }
body.dark .cke_button:hover { background: #333 !important; }
body.dark .cke_button_icon { filter: invert(0.8) !important; }
body.dark .cke_combo_text { color: #ccc !important; }
body.dark .cke_combo_button { background: #202020 !important; border-color: #444 !important; }
body.dark .cke_combo_button:hover { background: #333 !important; }
body.dark .cke_contents { border-color: #444 !important; background-color: #202020 !important; }
body.dark .cke_maximized { background-color: #202020 !important; }
/* -- Global color softener: dim all bright accents in dark mode -- */
body.dark .text-green-001,
body.dark .text-green-002,
body.dark .text-green-003,
body.dark .text-green-head { color: #4a8f89 !important; }
body.dark .border-green-001,
body.dark .border-green-head,
body.dark .border-green-200,
body.dark .border-green-400 { border-color: #2d5955 !important; }
body.dark .text-red-001,
body.dark .text-red-002 { color: #b35560 !important; }
body.dark .text-blue-001 { color: #5a7aa8 !important; }
body.dark .bg-green-head,
body.dark .bg-green-001 { background-color: #2d5955 !important; }
body.dark .bg-red-001,
body.dark .bg-red-002 { background-color: #7a2e36 !important; }
body.dark .text-amber-400 { color: #b89630 !important; }
body.dark .text-yellow-500 { color: #b89630 !important; }
body.dark .text-red-700 { color: #9a3a3a !important; }
body.dark .text-red-500 { color: #c85050 !important; }
body.dark .border-red-500 { border-color: #7a3030 !important; }
body.dark .tkb-card { background: #2a2a2a !important; border-color: #3a3a3a !important; }
body.dark .tkb-card:hover { background: #333 !important; border-color: #444 !important; box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; }
body.dark .tkb-name { color: #B5B5B5 !important; }
body.dark .tkb-rank-1 { border-color: rgba(245,158,11,.35) !important; background: linear-gradient(135deg, #2a2518, #332a15) !important; }
body.dark .tkb-rank-2 { border-color: rgba(249,115,22,.25) !important; background: linear-gradient(135deg, #2a2218, #332515) !important; }
body.dark .tkb-rank-3 { border-color: rgba(59,130,246,.25) !important; background: linear-gradient(135deg, #1a2233, #1e2a3d) !important; }
body.dark .sidebar-tab { color: #808080 !important; background-color: transparent !important; }
body.dark .sidebar-tab.border-red-500 { color: #f87171 !important; background-color: rgba(220,38,38,.15) !important; }
body.dark .text-slate-700 { color: #B5B5B5 !important; }
body.dark .text-red-600 { color: #f87171 !important; }
body.dark [class*="divide-slate"] > :not(:last-child) { border-color: #333 !important; }
body.dark [class*="divide-gray"] > :not(:last-child) { border-color: #333 !important; }
body.dark [class*="border-slate-5"],
body.dark [class*="border-slate-1"] { border-color: #333 !important; }
body.dark .border-b { border-color: #333 !important; }
body.dark [class*="bg-red-50"] { background-color: rgba(220,38,38,.15) !important; }
body.dark .avatar-frame-wrap img,
body.dark img.rounded.bg-center.bg-cover,
body.dark .tkb-avatar img { filter: brightness(0.8); }
body.dark [class*="hover:bg-indigo-100"]:hover { background-color: rgba(99,102,241,.15) !important; }
body.dark .bg-indigo-100 { background-color: rgba(99,102,241,.15) !important; }
body.dark .text-indigo-600 { color: #818cf8 !important; }
body.dark .text-amber-600 { color: #d97706 !important; }
body.dark .border-indigo-200 { border-color: rgba(99,102,241,.3) !important; }
body.dark .border-amber-200 { border-color: rgba(217,119,6,.3) !important; }
body.dark .border-red-200 { border-color: rgba(220,38,38,.3) !important; }
body.dark [class*="hover:bg-slate-50"]:hover,
body.dark [class*="hover:bg-blue-50"]:hover { background-color: #2a2a2a !important; }
body.dark .tkb-scroll::-webkit-scrollbar-thumb { background: #444; }
/* Targeted dark mode for header tabs and chapter bars */
body.dark .header-tabs-wrapper {
    background-color: #202020 !important;
    border-bottom-color: transparent !important;
}
body.dark .header-tabs-wrapper a {
    background-color: #2a2a2a !important;
    border-color: transparent !important;
    color: #B5B5B5 !important;
}
body.dark .prev-chapter, body.dark .next-chapter {
    background-color: #2a2a2a !important;
    border-color: transparent !important;
    color: #81d4fa !important;
}
body.dark .seamless-dark-bg {
    background-color: #202020 !important;
}
body.dark #chapter_001 {
    /* background-color: #252525;
    color: #ccc; */
    background-color: #202020;
    color: #B5B5B5;
    --tw-bg-opacity: 1;
    line-height: 1.8;
}
body.dark #light-icon {
    display: block;
}
body.dark #dark-icon {
    display: none;
}
body:not(.dark) #light-icon {
    display: none;
}
body:not(.dark) #dark-icon {
    display: block;
}
body.dark #chapter_001 h2 {
    color: #B6BABF;
}
body.dark #chapter_001 h3 {
    color: #B6BABF;
}
body.dark #chapter_001 h4 {
    color: #B6BABF;
}

/* ============================================================
   HKL dark UI normalization
   Keep the red brand, normalize copied Tailwind v4 surfaces.
   ============================================================ */
body.dark {
    --hkl-page: #171717;
    --hkl-surface: #202020;
    --hkl-surface-soft: #252525;
    --hkl-surface-muted: #2a2a2a;
    --hkl-border: #333333;
    --hkl-text: #d4d4d4;
    --hkl-muted: #8a8a8a;
    --hkl-brand: #da4453;
    --hkl-brand-soft: rgba(218, 68, 83, .16);
}

body.dark .site-topbar {
    background: #7a2e36 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

body.dark .site-topbar .bg-red-001,
body.dark .site-topbar .bg-red-002 {
    background-color: #6f2730 !important;
}

body.dark .site-topbar .site-menu-button span,
body.dark .site-topbar button span.bg-white {
    background-color: #fff !important;
}

body.dark .site-search-input {
    background-color: rgba(255, 255, 255, .92) !important;
    border-color: transparent !important;
    color: #1f2937 !important;
}

body.dark .site-search-input::placeholder {
    color: #6b7280 !important;
}

body.dark .site-subnav {
    background: var(--hkl-surface) !important;
    border-bottom: 1px solid var(--hkl-border);
}

body.dark .site-subnav-links {
    align-items: center;
}

body.dark .site-subnav a {
    color: #c7c7c7 !important;
    border-radius: 6px;
}

body.dark .site-subnav a:hover {
    color: #f0717d !important;
    background-color: var(--hkl-brand-soft) !important;
}

body.dark .site-home-tabs,
body.dark .site-sidebar-tab-list {
    background-color: var(--hkl-surface-soft) !important;
    border-color: var(--hkl-border) !important;
}

body.dark .site-home-tab,
body.dark .site-sidebar-tab {
    color: var(--hkl-muted) !important;
    border-color: transparent !important;
}

body.dark .site-home-tab-active,
body.dark .site-sidebar-tab.bg-white {
    background-color: var(--hkl-surface) !important;
    color: #f0717d !important;
    border-color: rgba(218, 68, 83, .45) !important;
}

body.dark .site-post-list,
body.dark .site-latest-chapters,
body.dark .site-sidebar-tab-panel {
    background-color: var(--hkl-surface) !important;
    border: 1px solid var(--hkl-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}

body.dark .site-post-card,
body.dark .site-latest-row,
body.dark .site-sidebar-book-row {
    border-color: var(--hkl-border) !important;
    color: var(--hkl-text) !important;
}

body.dark .site-post-card:hover,
body.dark .site-latest-row:hover,
body.dark .site-sidebar-book-row:hover {
    background-color: var(--hkl-surface-soft) !important;
}

body.dark .site-post-list a:not(.text-red-001),
body.dark .site-latest-chapters a:not(.text-red-001),
body.dark .site-sidebar-tab-panel a {
    color: var(--hkl-text) !important;
}

body.dark .site-post-list a:hover,
body.dark .site-latest-chapters a:hover,
body.dark .site-sidebar-tab-panel a:hover {
    color: #f0717d !important;
}

body.dark .cultivation-board {
    color: var(--hkl-text) !important;
}

body.dark .cultivation-board .board-header {
    background: linear-gradient(135deg, #161616, #23171a) !important;
    border: 1px solid var(--hkl-border);
    border-bottom: 0;
}

body.dark .cultivation-board .board-sub {
    color: var(--hkl-muted) !important;
}

body.dark .cultivation-scroll {
    background: #181818 !important;
    border: 1px solid var(--hkl-border);
    border-top: 0;
}

body.dark .cultivation-card {
    background: var(--hkl-surface) !important;
    box-shadow: inset 0 0 0 1px var(--hkl-border), 0 8px 18px rgba(0, 0, 0, .18) !important;
}

body.dark .cultivation-card:hover {
    background: var(--hkl-surface-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(218, 68, 83, .35), 0 10px 22px rgba(0, 0, 0, .28) !important;
}

body.dark .cultivation-card .name {
    color: var(--hkl-text) !important;
}

body.dark .rank-1 .cultivation-card {
    background: linear-gradient(135deg, rgba(218, 68, 83, .18), var(--hkl-surface)) !important;
    box-shadow: inset 0 0 0 2px rgba(218, 68, 83, .62), 0 12px 26px rgba(218, 68, 83, .18) !important;
}

body.dark .rank-2 .cultivation-card {
    background: linear-gradient(135deg, rgba(249, 115, 22, .14), var(--hkl-surface)) !important;
}

body.dark .rank-3 .cultivation-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, .12), var(--hkl-surface)) !important;
}

body.dark .chapter-nav-bar,
body.dark .chapter-comments-title,
body.dark .chapter-comments-panel {
    background-color: var(--hkl-surface) !important;
    border-color: var(--hkl-border) !important;
    color: var(--hkl-text) !important;
}

body.dark .chapter-nav-bar span {
    background-color: var(--hkl-surface-soft) !important;
    border-color: var(--hkl-border) !important;
    color: var(--hkl-text) !important;
}

body.dark [class^="bg-white/"],
body.dark [class*=" bg-white/"],
body.dark [class^="bg-slate-50"],
body.dark [class*=" bg-slate-50"],
body.dark [class^="bg-gray-50"],
body.dark [class*=" bg-gray-50"] {
    background-color: var(--hkl-surface) !important;
}

body.dark [class^="bg-slate-100"],
body.dark [class*=" bg-slate-100"],
body.dark [class^="bg-gray-100"],
body.dark [class*=" bg-gray-100"],
body.dark [class^="bg-gray-200"],
body.dark [class*=" bg-gray-200"] {
    background-color: var(--hkl-surface-soft) !important;
}

body.dark [class^="bg-cyan-50"],
body.dark [class*=" bg-cyan-50"],
body.dark [class^="bg-sky-50"],
body.dark [class*=" bg-sky-50"],
body.dark [class^="bg-blue-50"],
body.dark [class*=" bg-blue-50"],
body.dark [class^="bg-teal-50"],
body.dark [class*=" bg-teal-50"] {
    background-color: rgba(56, 189, 248, .12) !important;
}

body.dark [class^="bg-indigo-50"],
body.dark [class*=" bg-indigo-50"],
body.dark [class^="bg-violet-50"],
body.dark [class*=" bg-violet-50"],
body.dark [class^="bg-purple-50"],
body.dark [class*=" bg-purple-50"] {
    background-color: rgba(129, 140, 248, .14) !important;
}

body.dark [class^="bg-emerald-50"],
body.dark [class*=" bg-emerald-50"],
body.dark [class^="bg-green-50"],
body.dark [class*=" bg-green-50"] {
    background-color: rgba(16, 185, 129, .12) !important;
}

body.dark [class^="bg-amber-50"],
body.dark [class*=" bg-amber-50"],
body.dark [class^="bg-orange-50"],
body.dark [class*=" bg-orange-50"],
body.dark [class^="bg-yellow-50"],
body.dark [class*=" bg-yellow-50"] {
    background-color: rgba(217, 119, 6, .14) !important;
}

body.dark [class^="bg-rose-50"],
body.dark [class*=" bg-rose-50"],
body.dark [class^="bg-red-50"],
body.dark [class*=" bg-red-50"] {
    background-color: rgba(218, 68, 83, .16) !important;
}

body.dark [class^="from-slate-50"],
body.dark [class*=" from-slate-50"],
body.dark [class^="from-gray-50"],
body.dark [class*=" from-gray-50"],
body.dark [class^="from-indigo-50"],
body.dark [class*=" from-indigo-50"],
body.dark [class^="from-violet-50"],
body.dark [class*=" from-violet-50"],
body.dark [class^="from-purple-50"],
body.dark [class*=" from-purple-50"],
body.dark [class^="from-cyan-50"],
body.dark [class*=" from-cyan-50"],
body.dark [class^="from-amber-50"],
body.dark [class*=" from-amber-50"],
body.dark [class^="to-slate-50"],
body.dark [class*=" to-slate-50"],
body.dark [class^="to-gray-50"],
body.dark [class*=" to-gray-50"],
body.dark [class^="to-indigo-50"],
body.dark [class*=" to-indigo-50"],
body.dark [class^="to-violet-50"],
body.dark [class*=" to-violet-50"],
body.dark [class^="to-purple-50"],
body.dark [class*=" to-purple-50"],
body.dark [class^="to-emerald-50"],
body.dark [class*=" to-emerald-50"],
body.dark [class^="to-teal-50"],
body.dark [class*=" to-teal-50"] {
    background-image: linear-gradient(135deg, var(--hkl-surface), var(--hkl-surface-soft)) !important;
}

body.dark [class^="border-cyan"],
body.dark [class*=" border-cyan"],
body.dark [class^="border-sky"],
body.dark [class*=" border-sky"],
body.dark [class^="border-blue"],
body.dark [class*=" border-blue"],
body.dark [class^="border-teal"],
body.dark [class*=" border-teal"],
body.dark [class^="border-indigo"],
body.dark [class*=" border-indigo"],
body.dark [class^="border-violet"],
body.dark [class*=" border-violet"],
body.dark [class^="border-purple"],
body.dark [class*=" border-purple"],
body.dark [class^="border-emerald"],
body.dark [class*=" border-emerald"],
body.dark [class^="border-green"],
body.dark [class*=" border-green"],
body.dark [class^="border-amber"],
body.dark [class*=" border-amber"],
body.dark [class^="border-orange"],
body.dark [class*=" border-orange"],
body.dark [class^="border-yellow"],
body.dark [class*=" border-yellow"],
body.dark [class^="border-rose"],
body.dark [class*=" border-rose"],
body.dark [class^="border-red"],
body.dark [class*=" border-red"] {
    border-color: rgba(255, 255, 255, .12) !important;
}

body.dark [class^="text-cyan-"],
body.dark [class*=" text-cyan-"],
body.dark [class^="text-sky-"],
body.dark [class*=" text-sky-"],
body.dark [class^="text-blue-"],
body.dark [class*=" text-blue-"],
body.dark [class^="text-teal-"],
body.dark [class*=" text-teal-"] {
    color: #7dd3fc !important;
}

body.dark [class^="text-indigo-"],
body.dark [class*=" text-indigo-"],
body.dark [class^="text-violet-"],
body.dark [class*=" text-violet-"],
body.dark [class^="text-purple-"],
body.dark [class*=" text-purple-"],
body.dark [class^="text-fuchsia-"],
body.dark [class*=" text-fuchsia-"] {
    color: #c4b5fd !important;
}

body.dark [class^="text-emerald-"],
body.dark [class*=" text-emerald-"],
body.dark [class^="text-green-"],
body.dark [class*=" text-green-"] {
    color: #86efac !important;
}

body.dark [class^="text-amber-"],
body.dark [class*=" text-amber-"],
body.dark [class^="text-orange-"],
body.dark [class*=" text-orange-"],
body.dark [class^="text-yellow-"],
body.dark [class*=" text-yellow-"] {
    color: #fcd34d !important;
}

body.dark [class^="text-rose-"],
body.dark [class*=" text-rose-"],
body.dark [class^="text-red-"],
body.dark [class*=" text-red-"] {
    color: #f87171 !important;
}

body.dark .text-white,
body.dark [class*=" text-white"] {
    color: #ffffff !important;
}

body.dark label[class*="bg-white"],
body.dark div[class*="bg-white/"],
body.dark span[class*="bg-white/"] {
    background-color: var(--hkl-surface-soft) !important;
    color: var(--hkl-text) !important;
}

body.dark table,
body.dark thead,
body.dark tbody,
body.dark tr {
    border-color: var(--hkl-border) !important;
}

body.dark code {
    background-color: var(--hkl-surface-muted) !important;
    border-color: var(--hkl-border) !important;
}

body.dark .site-home-tab-active,
body.dark .site-sidebar-tab.bg-white {
    border-color: rgba(218, 68, 83, .45) !important;
}