/**
 * module: css/shell.css
 * stage: web-ui/shell (extracted from components/header.php 2026-10-19)
 * inputs: [data-theme=light|dark] on <html> (chrono_theme.js + header bootstrap)
 * outputs: public-site shell styles (tokens, layout, hero/cards/sidebar, light remap pack)
 * contracts:
 *   PRE:  header.php links this file versioned by filemtime, at the position the inline
 *         <style> used to occupy (after output.css + css/theme.css, before </head>).
 *   POST: identical cascade order to the former inline block (later than the token layer).
 *   INVARIANT: relocation only -- the declarations are byte-identical to the extracted block.
 */

:root {
            /* Primary Colors - Purple Gradient */
            --primary-50: #faf5ff;
            --primary-100: #f3e8ff;
            --primary-200: #e9d5ff;
            --primary-300: #d8b4fe;
            --primary-400: #c084fc;
            --primary-500: #a855f7;
            --primary-600: #9333ea;
            --primary-700: #7c3aed;
            --primary-800: #6b21a8;
            --primary-900: #581c87;

            /* Accent Colors */
            --accent-cyan: #22d3ee;
            --accent-emerald: #10b981;
            --accent-amber: #f59e0b;
            --accent-rose: #f43f5e;

            /* Background - Slate Dark */
            --bg-dark: #0f172a;
            --bg-darker: #020617;
            --bg-card: rgba(15, 23, 42, 0.8);
            --bg-glass: rgba(30, 41, 59, 0.7);

            /* Text */
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;

            /* Border */
            --border-light: rgba(255, 255, 255, 0.1);
            --border-glow: rgba(168, 85, 247, 0.4);

            /* Sidebar */
            --sidebar-width: 260px;
        }

        /* Chrono-Theme: light mode (aktif 06:00–17:59 waktu setempat). Dark = bawaan :root.
           INVARIANT: semua override light terpusat di sini; markup halaman tidak diubah. */
        [data-theme="light"] {
            --bg-dark: #f8fafc;
            --bg-darker: #e2e8f0;
            --bg-card: rgba(255, 255, 255, 0.94);
            --bg-glass: rgba(255, 255, 255, 0.9);
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #64748b;
            --border-light: rgba(15, 23, 42, 0.12);
        }

        [data-theme="light"] body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #ede9fe 100%);
            color: var(--text-primary);
        }

        [data-theme="light"] .app-sidebar {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.99) 100%);
        }

        [data-theme="light"] .mobile-topbar {
            background: #ffffff;
        }

        [data-theme="light"] .glass-card {
            background: rgba(255, 255, 255, 0.94);
        }

        [data-theme="light"] .sidebar-link {
            color: var(--text-secondary);
        }

        [data-theme="light"] .sidebar-link:hover {
            background: rgba(15, 23, 42, 0.05);
            color: var(--text-primary);
        }

        /* Progress cards: judul putih bawaan dark -> teks gelap di light (badge tombol dikecualikan). */
        [data-theme="light"] .card-header-main {
            background: rgba(255, 255, 255, 0.94);
        }

        [data-theme="light"] .card-header-main:hover {
            background: rgba(255, 255, 255, 1);
        }

        [data-theme="light"] .card-header-main h2,
        [data-theme="light"] .card-header-main h2 a {
            color: var(--text-primary);
        }

        [data-theme="light"] .accordion-wrapper {
            background: rgba(255, 255, 255, 0.92);
        }

        [data-theme="light"] .sticky-filter.scrolled .filter-pill {
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25);
        }

        /* Search inputs dark (progress/request) -> putih di light. */
        [data-theme="light"] .sticky-filter input,
        [data-theme="light"] input[class*="bg-black"] {
            background: #ffffff;
            color: var(--text-primary);
            border-color: rgba(15, 23, 42, 0.15);
        }

        [data-theme="light"] .sticky-filter input::placeholder,
        [data-theme="light"] input[class*="bg-black"]::placeholder {
            color: var(--text-muted);
        }

        /* Request list + rich text. */
        [data-theme="light"] .rich-text strong {
            color: var(--text-primary);
        }

        /* Showcase band: gelap translusen -> putih translusen di light. */
        [data-theme="light"] .showcase-container {
            background: rgba(255, 255, 255, 0.6);
        }

        [data-theme="light"] .sh-experimental {
            background: rgba(15, 23, 42, 0.04);
        }

        /* Game hero sinematik tetap gelap (pulau disengaja); hanya pastikan teks bawah terbaca. */
        [data-theme="light"] .game-hero-dark {
            color: #f8fafc;
        }

        /* Batch 2: remedi teks di dalam permukaan terang (game.php + accordion progress).
           Tombol/tautan berwarna dan blok kode dikecualikan agar teks putihnya tidak rusak. */
        [data-theme="light"] .glass-panel h1.text-white,
        [data-theme="light"] .glass-panel h2.text-white,
        [data-theme="light"] .glass-panel h3.text-white,
        [data-theme="light"] .glass-panel h4.text-white,
        [data-theme="light"] .accordion-wrapper h2.text-white {
            color: var(--text-primary);
        }

        [data-theme="light"] .glass-panel .text-white:not(button):not(a):not([class*="bg-"]):not(code),
        [data-theme="light"] .accordion-wrapper .text-white:not(button):not(a):not([class*="bg-"]):not(code) {
            color: var(--text-primary);
        }

        [data-theme="light"] .glass-panel .text-slate-300:not(button):not(a):not([class*="bg-"]):not(code),
        [data-theme="light"] .accordion-wrapper .text-slate-300:not(button):not(a):not([class*="bg-"]):not(code) {
            color: #334155;
        }

        [data-theme="light"] .glass-panel .text-slate-400:not(button):not(a):not([class*="bg-"]),
        [data-theme="light"] .accordion-wrapper .text-slate-400:not(button):not(a):not([class*="bg-"]) {
            color: var(--text-muted);
        }

        /* Pulau gelap yang disengaja di dalam panel terang: kembalikan teks terang. */
        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] .text-slate-300,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] .text-white,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] .text-slate-400 {
            color: #e2e8f0;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] .text-slate-500,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] .text-slate-600 {
            color: #94a3b8;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] [class*="text-amber-"] {
            color: #fbbf24;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] [class*="text-cyan-"] {
            color: #22d3ee;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] [class*="text-emerald-"] {
            color: #34d399;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] [class*="text-rose-"] {
            color: #fb7185;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-900"] [class*="text-blue-"] {
            color: #60a5fa;
        }

        /* Kartu preview pastel (ID/MS/TL): teks putih -> tinta di light. */
        [data-theme="light"] #txt-id,
        [data-theme="light"] #txt-ms,
        [data-theme="light"] #txt-tl {
            color: var(--text-primary);
        }

        /* Tombol nav preview + Admin Edit: slate gelap -> putih di light. */
        [data-theme="light"] .glass-panel button[class*="bg-slate-900"],
        [data-theme="light"] .accordion-wrapper button[class*="bg-slate-800"] {
            background-color: #ffffff;
            color: var(--text-secondary);
            border-color: rgba(15, 23, 42, 0.15);
        }

        [data-theme="light"] .glass-panel button[class*="bg-slate-900"]:hover {
            color: #ffffff;
        }

        /* Overlay gradien milestone + kotak author notes: gelapkan kembali di light. */
        [data-theme="light"] .glass-panel > div[class*="from-slate-900"] {
            opacity: 0;
        }

        [data-theme="light"] .glass-panel div[class*="bg-slate-950"] {
            background-color: rgba(255, 255, 255, 0.7);
        }

        /* Kotak peringatan amber: pekatkan di light. */
        [data-theme="light"] div[class*="amber-500/10"] {
            background-color: rgba(245, 158, 11, 0.14);
        }

        [data-theme="light"] .glass-panel [class*="text-amber-"],
        [data-theme="light"] .accordion-wrapper [class*="text-amber-"] {
            color: #b45309;
        }

        [data-theme="light"] .glass-panel p[class*="amber-200"],
        [data-theme="light"] .accordion-wrapper p[class*="amber-200"] {
            color: #92400e;
        }

        /* Teks aksen lain di dalam panel terang: sesuaikan ke varian 700. */
        [data-theme="light"] .glass-panel [class*="text-cyan-"],
        [data-theme="light"] .accordion-wrapper [class*="text-cyan-"] {
            color: #0e7490;
        }

        [data-theme="light"] .glass-panel [class*="text-emerald-"],
        [data-theme="light"] .accordion-wrapper [class*="text-emerald-"] {
            color: #047857;
        }

        [data-theme="light"] .glass-panel [class*="text-rose-"],
        [data-theme="light"] .accordion-wrapper [class*="text-rose-"] {
            color: #be123c;
        }

        [data-theme="light"] .glass-panel [class*="text-blue-"],
        [data-theme="light"] .accordion-wrapper [class*="text-blue-"] {
            color: #1d4ed8;
        }

        /* Border hairline di permukaan terang. */
        [data-theme="light"] .accordion-inner [class*="border-white"],
        [data-theme="light"] .glass-panel [class*="border-white"] {
            border-color: rgba(15, 23, 42, 0.1);
        }

        /* ── Batch 3: kontras tema terang halaman game + semua modal ──────────
           PRE: markup game.php ditulis dark-first; kartu bg-slate-900/60 tanpa
             backdrop-filter terkomposit terang di atas page terang, sehingga
             aturan "pulau gelap" Batch 2 (teks terang) justru menghancurkan
             kontras. Blok ini tampil SETELAH aturan Batch 2 dan menang pada
             spesifisitas setara.
           INVARIANT: dark mode tidak tersentuh (semua selector di bawah
             [data-theme="light"]). !important hanya untuk menaklukkan inline
             style; override class-vs-class tanpa !important mengikuti Batch 2. */

        /* Brand text: varian 400/300 terlalu terang di atas putih -> 700/600. */
        [data-theme="light"] .text-primary-400 { color: #6d28d9; }
        [data-theme="light"] .text-primary-300 { color: #7c3aed; }

        /* Intel cards: navy translusen -> tinted pastel hue per aksen. Hook
           via hover:border-* karena tiap kartu punya aksen hover unik. */
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"][class*="hover:border-purple-500"] { background-color: rgba(139, 92, 246, 0.09); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"][class*="hover:border-rose-500"] { background-color: rgba(244, 63, 94, 0.07); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"][class*="hover:border-cyan-500"] { background-color: rgba(6, 182, 212, 0.08); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"][class*="hover:border-indigo-500"] { background-color: rgba(99, 102, 241, 0.09); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"][class*="hover:border-emerald-500"] { background-color: rgba(16, 185, 129, 0.09); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/30"] { background-color: rgba(100, 116, 139, 0.12); }

        /* Teks di atas kartu pastel: kembalikan ke ink scale + aksen 700. */
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] .text-white,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/30"] .text-white { color: var(--text-primary); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] .text-slate-200 { color: var(--text-primary); }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] .text-slate-300,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/30"] .text-slate-300 { color: #334155; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] .text-slate-500,
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] .text-slate-600 { color: #475569; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-emerald-"] { color: #047857; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-blue-"] { color: #1d4ed8; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-purple-"] { color: #6d28d9; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-amber-"] { color: #b45309; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-cyan-"] { color: #0e7490; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-rose-"] { color: #be123c; }
        [data-theme="light"] .glass-panel div[class*="bg-slate-900/60"] [class*="text-indigo-"] { color: #4338ca; }

        /* Chip mono (count lines, N detected): span gelap -> putih. */
        [data-theme="light"] .glass-panel span[class*="bg-slate-900/50"] {
            background-color: rgba(255, 255, 255, 0.85);
            border-color: rgba(15, 23, 42, 0.12);
            color: #475569;
        }

        /* Hover baris archetype di terang. */
        [data-theme="light"] .glass-panel div[class*="hover:bg-slate-800/40"]:hover { background-color: rgba(15, 23, 42, 0.05); }

        /* Microcopy generik slate-500 di panel terang. */
        [data-theme="light"] .glass-panel .text-slate-500:not(button):not(a):not([class*="bg-"]) { color: #475569; }

        /* Kotak Source preview: netral terang + teks tinta. */
        [data-theme="light"] #translation-preview div[class*="bg-slate-900/40"] { background-color: rgba(255, 255, 255, 0.92); }
        [data-theme="light"] #translation-preview div[class*="bg-slate-900/40"] #txt-source { color: #334155; }

        /* Kotak pastel ID/MS/TL: perdalam tint agar berdefinisi di putih. */
        [data-theme="light"] #translation-preview div[class*="bg-primary-500/5"] { background-color: rgba(124, 58, 237, 0.07); }
        [data-theme="light"] #translation-preview div[class*="bg-cyan-500/5"] { background-color: rgba(6, 182, 212, 0.08); }
        [data-theme="light"] #translation-preview div[class*="bg-rose-500/5"] { background-color: rgba(244, 63, 94, 0.07); }

        /* Pipeline receipts (.report-item di luar .glass-panel). */
        [data-theme="light"] .report-item {
            background-color: rgba(255, 255, 255, 0.94);
            border-color: rgba(15, 23, 42, 0.1);
        }
        [data-theme="light"] .report-item .text-white { color: var(--text-primary); }
        [data-theme="light"] .report-item .text-slate-500 { color: #475569; }
        [data-theme="light"] .report-item div.bg-slate-900 {
            background-color: #ffffff;
            border-color: rgba(15, 23, 42, 0.12);
        }
        [data-theme="light"] .report-item [class*="text-emerald-"] { color: #047857; }
        [data-theme="light"] .report-item [class*="text-blue-"] { color: #1d4ed8; }
        [data-theme="light"] .report-item [class*="text-purple-"] { color: #6d28d9; }
        [data-theme="light"] .report-item [class*="text-amber-"] { color: #b45309; }
        [data-theme="light"] .report-item [class*="text-cyan-"] { color: #0e7490; }
        [data-theme="light"] .report-item [class*="text-rose-"] { color: #be123c; }
        [data-theme="light"] .report-item [class*="text-slate-"] { color: #475569; }
        .report-item:hover {
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 20px color-mix(in srgb, var(--primary-600) 25%, transparent);
        }
        [data-theme="light"] .report-item:hover {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 20px color-mix(in srgb, var(--primary-600) 20%, transparent);
        }

        /* ── Tabular Preview modal (#table-preview-modal, class-based) ── */
        [data-theme="light"] #table-preview-modal .modal-content {
            background-color: #ffffff;
            border-color: rgba(15, 23, 42, 0.12);
        }
        [data-theme="light"] #table-preview-modal .modal-content > div:first-child,
        [data-theme="light"] #table-preview-modal thead {
            background-color: #f1f5f9;
        }
        [data-theme="light"] #table-preview-modal h3 { color: var(--text-primary); }
        [data-theme="light"] #table-preview-modal button { color: var(--text-muted); }
        [data-theme="light"] #table-preview-modal button:hover {
            background-color: rgba(15, 23, 42, 0.06);
            color: var(--text-primary);
        }
        [data-theme="light"] #table-preview-modal .modal-content > div:nth-child(2) { background-color: #ffffff; }
        [data-theme="light"] #table-preview-modal table { color: #334155; }
        [data-theme="light"] #table-preview-modal thead { color: var(--text-muted); }
        [data-theme="light"] #table-preview-modal th,
        [data-theme="light"] #table-preview-modal td { border-color: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] #table-preview-modal tbody tr:hover { background-color: rgba(15, 23, 42, 0.04); }
        [data-theme="light"] #table-preview-modal td.text-slate-500 { color: var(--text-muted); }
        [data-theme="light"] #table-preview-modal td.text-slate-300 { color: #334155; }
        /* !important + filter:none: menaklukkan injeksi dinamis game.php
           (.text-primary-200 { color: brand !important; filter: brightness(1.3) })
           yang membuat kolom ID kuning tak terbaca di tema terang. */
        [data-theme="light"] #table-preview-modal td.text-primary-200 { color: #6d28d9 !important; filter: none !important; }
        [data-theme="light"] #table-preview-modal td.text-cyan-200 { color: #0e7490 !important; filter: none !important; }
        [data-theme="light"] #table-preview-modal td.text-rose-200 { color: #be123c !important; filter: none !important; }
        [data-theme="light"] #table-preview-modal td[class*="bg-slate-900"] { background-color: #f1f5f9; }

        /* ── Drawer archetype (campuran class + inline -> !important) ── */
        [data-theme="light"] #archetype-sidebar-panel { background: #ffffff !important; }
        [data-theme="light"] #archetype-sidebar-panel > div:first-child { background: #f8fafc !important; }
        [data-theme="light"] #archetype-sidebar-panel > div:last-child { background: #ffffff !important; }
        [data-theme="light"] #arc-sidebar-name.gradient-text {
            background: none;
            color: var(--text-primary);
            -webkit-text-fill-color: var(--text-primary);
        }
        [data-theme="light"] #archetype-sidebar-panel .text-purple-400 { color: #7e22ce; }
        [data-theme="light"] #archetype-sidebar-panel div[class*="bg-slate-950"] { background-color: #f1f5f9; }
        [data-theme="light"] #archetype-sidebar-panel div[class*="bg-slate-900/80"] { background-color: rgba(255, 255, 255, 0.92); }
        [data-theme="light"] #archetype-sidebar-panel div[class*="from-slate-950"] {
            background: linear-gradient(to top, rgba(255, 255, 255, 0.92), transparent);
        }
        [data-theme="light"] #arc-sidebar-weight-val { color: #0e7490 !important; }
        [data-theme="light"] #arc-sidebar-keywords span { color: #047857 !important; }
        [data-theme="light"] #arc-sidebar-quotes > div { background-color: #ffffff !important; }
        [data-theme="light"] #arc-sidebar-quotes [class*="text-cyan-"] { color: #0e7490; }
        [data-theme="light"] #arc-sidebar-quotes [class*="text-emerald-"] { color: #047857; }
        [data-theme="light"] #arc-sidebar-quotes [class*="text-rose-"] { color: #be123c; }

        /* ── Donor-gate modal (inline styles -> !important, terang penuh) ── */
        [data-theme="light"] #donor-gate-modal > div {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
        }
        [data-theme="light"] #donor-gate-modal h3 { color: var(--text-primary) !important; }
        [data-theme="light"] #donor-gate-modal p { color: #475569 !important; }
        [data-theme="light"] #donor-gate-modal strong { color: #92400e !important; }
        [data-theme="light"] #donor-gate-modal ul + p,
        [data-theme="light"] #donor-gate-modal div + p { color: var(--text-muted) !important; }
        [data-theme="light"] #donor-gate-modal ol span:last-child { color: #475569 !important; }
        [data-theme="light"] #donor-gate-modal ol strong { color: var(--text-primary) !important; }
        [data-theme="light"] #donor-gate-modal li { border-color: rgba(15, 23, 42, 0.1) !important; }
        [data-theme="light"] #donor-gate-modal li span:first-of-type { color: var(--text-primary) !important; }
        [data-theme="light"] #donor-gate-modal li > span[style*="color:#f59e0b"] { color: #92400e !important; }
        [data-theme="light"] #donor-gate-modal li > span[style*="color:#64748b"] { color: var(--text-muted) !important; }
        [data-theme="light"] #donor-gate-modal button[onclick="donorGoLogin()"] {
            border: 1px solid rgba(15, 23, 42, 0.15) !important;
        }
        [data-theme="light"] #donor-gate-modal a[href*="nexus"] { color: var(--text-muted) !important; }

        /* ── Metadata editor (inline styles -> !important) ── */
        [data-theme="light"] #edit-modal > div {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
        }
        [data-theme="light"] #edit-modal > div > div:first-child {
            background: #f8fafc !important;
            border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
        }
        [data-theme="light"] #edit-modal h3 { color: var(--text-primary) !important; }
        [data-theme="light"] #edit-modal label { color: #475569 !important; }
        [data-theme="light"] #edit-modal p { color: #475569 !important; }
        [data-theme="light"] #edit-modal [style*="rgba(15,23,42"] {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
        }
        [data-theme="light"] #edit-modal [style*="background:#020617"] { background: #f1f5f9 !important; }
        [data-theme="light"] #edit-modal input,
        [data-theme="light"] #edit-modal textarea,
        [data-theme="light"] #edit-modal select {
            background: #ffffff !important;
            color: var(--text-primary) !important;
            border-color: rgba(15, 23, 42, 0.15) !important;
        }
        [data-theme="light"] #edit-modal input::placeholder,
        [data-theme="light"] #edit-modal textarea::placeholder { color: var(--text-muted) !important; }
        [data-theme="light"] #edit-modal .ql-toolbar.ql-snow {
            background: #f1f5f9 !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
        }
        [data-theme="light"] #edit-modal .ql-container.ql-snow { background: #ffffff !important; }
        [data-theme="light"] #edit-modal .ql-editor { color: var(--text-primary) !important; }
        [data-theme="light"] #edit-modal .ql-editor.ql-blank::before { color: var(--text-muted) !important; }
        [data-theme="light"] #edit-modal > div > div:last-child {
            background: #f8fafc !important;
            border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
        }
        [data-theme="light"] #edit-modal button[onclick="closeEditModal()"] {
            background: #ffffff !important;
            color: var(--text-secondary) !important;
            border-color: rgba(15, 23, 42, 0.15) !important;
        }
        [data-theme="light"] #edit-modal #btn-card-refresh { color: #0e7490 !important; }
        [data-theme="light"] #edit-modal h4 { color: #b91c1c !important; }
        [data-theme="light"] #edit-modal div[style*="127,29,29"] p { color: #b91c1c !important; }

        /* ── Batch 4: unifikasi tema terang journal (posts.php + post.php) ────
           PRE: kedua file membawa <style> dark-first sendiri; hero/featured
             card + thumbnail foto disengaja tetap gelap (dark island).
           INVARIANT: hanya permukaan terang + teks yang di-remap; foto,
             overlay sinematik, dan lang-pill di atas hero tidak tersentuh. */

        /* posts.php: header + kartu list. */
        [data-theme="light"] .journal-title { color: var(--text-primary); }
        [data-theme="light"] .journal-title span {
            color: var(--text-primary);
            -webkit-text-stroke: 0;
        }
        [data-theme="light"] .journal-count { color: var(--text-muted); }
        [data-theme="light"] .journal-eyebrow { color: #6d28d9; }
        [data-theme="light"] .section-label { color: var(--text-muted); }
        [data-theme="light"] .section-label::after { background: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] .news-card {
            background: rgba(255, 255, 255, 0.94);
            border-color: rgba(15, 23, 42, 0.1);
        }
        [data-theme="light"] .news-card:hover { box-shadow: 0 20px 48px rgba(15, 23, 42, 0.15), 0 0 28px color-mix(in srgb, var(--primary-600) 20%, transparent); }
        [data-theme="light"] .card-date { color: var(--text-muted); }
        [data-theme="light"] .card-title { color: var(--text-primary); }
        [data-theme="light"] .news-card:hover .card-title { color: #6d28d9; }
        [data-theme="light"] .card-excerpt { color: #475569; }
        [data-theme="light"] .card-tag {
            color: var(--text-muted);
            border-color: rgba(15, 23, 42, 0.1);
            background: rgba(15, 23, 42, 0.04);
        }
        [data-theme="light"] .card-arrow { color: #7c3aed; }

        /* post.php: artikel + related + nav (hero tetap island gelap). */
        [data-theme="light"] .post-tags { border-bottom-color: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] .tag {
            color: #6d28d9;
            border-color: rgba(124, 58, 237, 0.3);
            background: rgba(124, 58, 237, 0.08);
        }
        [data-theme="light"] .tag:hover { color: #7c3aed; }
        [data-theme="light"] .post-article { color: #334155; }
        [data-theme="light"] .post-article .lang-section > p:first-of-type { color: var(--text-primary); }
        [data-theme="light"] .post-article h3 { color: var(--text-primary); }
        [data-theme="light"] .post-article h4 { color: var(--text-primary); }
        [data-theme="light"] .post-article h5 { color: #334155; }
        [data-theme="light"] .post-article ul li::marker { color: #7c3aed; }
        [data-theme="light"] .post-article blockquote {
            color: #475569;
            background: rgba(124, 58, 237, 0.07);
        }
        [data-theme="light"] .post-article strong, [data-theme="light"] .post-article b { color: var(--text-primary); }
        [data-theme="light"] .post-article img { border-color: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] .post-article a { color: #6d28d9; }
        [data-theme="light"] .post-article a:hover { color: #7c3aed; }
        [data-theme="light"] .post-divider::before, [data-theme="light"] .post-divider::after { background: rgba(15, 23, 42, 0.15); }
        [data-theme="light"] .related-section { border-top-color: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] .related-label { color: #6d28d9; }
        [data-theme="light"] .related-heading { color: var(--text-primary); }
        [data-theme="light"] .related-card {
            background: rgba(255, 255, 255, 0.94);
            border-color: rgba(15, 23, 42, 0.1);
        }
        [data-theme="light"] .related-card:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15), 0 0 24px color-mix(in srgb, var(--primary-600) 20%, transparent); }
        [data-theme="light"] .related-date { color: var(--text-muted); }
        [data-theme="light"] .related-match {
            color: #6d28d9;
            border-color: rgba(124, 58, 237, 0.3);
            background: rgba(124, 58, 237, 0.08);
        }
        [data-theme="light"] .related-title { color: var(--text-primary); }
        [data-theme="light"] .related-card:hover .related-title { color: #6d28d9; }
        [data-theme="light"] .post-footer-nav { border-top-color: rgba(15, 23, 42, 0.1); }
        [data-theme="light"] .back-link { color: #6d28d9; }
        [data-theme="light"] .back-link:hover { color: #7c3aed; }
        [data-theme="light"] .pl-mc:hover {
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 0 28px color-mix(in srgb, var(--primary-600) 20%, transparent);
        }

        /* Smooth day/night crossfade */
        body, .app-sidebar, .glass-card, .sidebar-link, .mobile-topbar {
            transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
        }

        /* Theme icon toggle (top bars only, icon-only; auto cycle preserved). */
        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .chrono-icon-btn {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            border: 1px solid transparent;
            background: transparent;
            color: var(--text-secondary);
            font-size: 17px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
            flex-shrink: 0;
        }

        .chrono-icon-btn:hover {
            color: var(--text-primary);
            border-color: var(--border-glow);
            background: rgba(127, 127, 157, 0.08);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, #1e1b4b 100%);
            color: var(--text-primary);
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        /* Animated Background - Removed radial gradients for performance */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-darker);
            pointer-events: none;
            z-index: -1;
        }

        /* ================================================================
           APP SHELL — Sidebar + Content Layout
           ================================================================ */

        .app-shell {
            display: flex;
            min-height: 100vh;
        }

        /* --- SIDEBAR (Desktop: fixed left | Mobile: overlay from left) --- */
        .app-sidebar {
            width: var(--sidebar-width);
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            height: 100dvh;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 6, 23, 0.99) 100%);
            border-right: 1px solid var(--border-light);
            z-index: 5;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* --- CONTENT AREA --- */
        .app-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            min-height: 100vh;
            width: calc(100% - var(--sidebar-width));
        }

        /* --- MOBILE TOPBAR (only on mobile) --- */
        .mobile-topbar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 100;
            background: #0f172a;
            /* Solid background instead of glass/blur */
            border-bottom: 1px solid var(--border-light);
            height: 56px;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }

        .topbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .topbar-logo {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 14px;
            color: white;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
        }

        .topbar-title {
            font-weight: 700;
            font-size: 16px;
            background: linear-gradient(90deg, var(--primary-300), var(--accent-cyan));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .topbar-toggle {
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            padding: 8px;
        }

        /* --- SIDEBAR BACKDROP (mobile only) --- */
        .sidebar-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            /* Lightened backdrop */
            z-index: 199;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .sidebar-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* --- SIDEBAR INTERNALS --- */
        .sidebar-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px;
            border-bottom: 1px solid var(--border-light);
            flex-shrink: 0;
        }

        .sidebar-logo {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            color: white;
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
            flex-shrink: 0;
        }

        .sidebar-brand-text {
            flex: 1;
        }

        .sidebar-brand-name {
            font-weight: 700;
            font-size: 15px;
            background: linear-gradient(90deg, var(--primary-300), var(--accent-cyan));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1.2;
        }

        .sidebar-brand-sub {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .sidebar-close-btn {
            display: none;
            /* Only shown on mobile */
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .sidebar-close-btn:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        .sidebar-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px 0;
            overscroll-behavior: contain;
        }

        .sidebar-body::-webkit-scrollbar {
            width: 4px;
        }

        .sidebar-body::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar-body::-webkit-scrollbar-thumb {
            background: var(--primary-800);
            border-radius: 2px;
        }

        .sidebar-section {
            padding: 0 12px;
            margin-bottom: 4px;
        }

        .sidebar-section-title {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--text-muted);
            padding: 14px 8px 6px;
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 10px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
            margin: 1px 0;
        }

        .sidebar-link:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        .sidebar-link.active {
            color: var(--accent-cyan);
            background: rgba(34, 211, 238, 0.1);
            font-weight: 600;
        }

        .sidebar-link.admin-link {
            color: var(--accent-amber);
        }

        .sidebar-link i {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .sidebar-game-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 12px;
            border-radius: 8px;
            font-size: 12.5px;
            font-weight: 400;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .sidebar-game-link:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.04);
        }

        .sidebar-game-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .sidebar-game-dot.released {
            background: var(--accent-emerald);
            box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
        }

        .sidebar-game-dot.wip {
            background: var(--accent-amber);
            box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
        }

        .sidebar-divider {
            height: 1px;
            background: var(--border-light);
            margin: 6px 16px;
        }

        .sidebar-footer {
            padding: 12px;
            border-top: 1px solid var(--border-light);
            flex-shrink: 0;
        }

        .sidebar-chat-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            border: none;
            font-size: 13px;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
        }

        .sidebar-chat-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
        }

        .sidebar-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: 10px;
            background: rgba(124, 58, 237, 0.08);
            border: 1px solid rgba(124, 58, 237, 0.15);
        }

        .sidebar-user-badge {
            background: linear-gradient(135deg, var(--accent-amber), #d97706);
            color: white;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ================================================================
           MOBILE RESPONSIVE
           ================================================================ */
        @media (max-width: 768px) {
            .app-sidebar {
                left: auto;
                right: 0;
                transform: translateX(100%);
                width: 280px;
                border-left: 1px solid var(--border-light);
                border-right: none;
                z-index: 200;
            }

            .app-sidebar.open {
                transform: translateX(0);
            }

            .app-content {
                margin-left: 0;
                width: 100%;
            }

            .mobile-topbar {
                display: flex;
            }

            .sidebar-close-btn {
                display: block;
            }
        }

        @media (min-width: 769px) {
            .sidebar-backdrop {
                display: none !important;
            }
        }

        /* ================================================================
           SHARED UTILITIES (used by all pages)
           ================================================================ */

        /* Glass Card - Removed blur for performance */
        .glass-card {
            background: rgba(30, 41, 59, 0.9);
            /* More opaque */
            border: 1px solid var(--border-light);
            border-radius: 16px;
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            border-color: var(--border-glow);
            box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
        }

        /* Gradient Text */
        .gradient-text {
            background: linear-gradient(90deg, var(--primary-300), var(--accent-cyan));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Badges */
        .badge-released {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .badge-wip {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .admin-badge {
            background: linear-gradient(135deg, var(--accent-amber), #d97706);
            color: white;
            padding: 4px 10px;
            border-radius: 9999px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 8px;
        }

        /* Progress Bar Glow */
        .progress-glow {
            box-shadow: 0 0 10px currentColor;
        }

        /* Modal Styles */
        .modal-container {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 300;
            background: rgba(0, 0, 0, 0.7);
            /* Lightened/Removed blur */
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .modal-container.active {
            display: flex;
        }

        .nexus-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 300;
            background: rgba(0, 0, 0, 0.8);
            align-items: center;
            justify-content: center;
        }

        .nexus-modal.active {
            display: flex;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-200 {
            animation-delay: 0.2s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .delay-400 {
            animation-delay: 0.4s;
        }

        .delay-500 {
            animation-delay: 0.5s;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-darker);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-700);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-600);
        }

        /* Async loading dots (shared across all async components) */
        .async-loading-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 12px 0;
        }

        .async-loading-dots span {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(168, 85, 247, 0.6);
            animation: async-dot-bounce 1.4s infinite ease-in-out both;
        }

        .async-loading-dots span:nth-child(2) {
            animation-delay: 0.16s;
        }

        .async-loading-dots span:nth-child(3) {
            animation-delay: 0.32s;
        }

        @keyframes async-dot-bounce {

            0%,
            80%,
            100% {
                transform: scale(0);
                opacity: 0.5;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Cinematic Page Transition Overlay */
        #page-transition {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background-color: rgba(2, 6, 23, 0);
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            pointer-events: none;
            transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Initial/Navigating state: Black + Blurred */
        #page-transition.active {
            background-color: rgba(2, 6, 23, 1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            pointer-events: auto;
        }

        /* Bottom Progress Bar Loader */
        #page-loader-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-500), var(--accent-cyan));
            z-index: 10001;
            box-shadow: 0 -2px 10px rgba(124, 58, 237, 0.5);
            transition: width 0.4s ease, opacity 0.5s ease;
        }

        #page-loader-bar.complete {
            width: 100% !important;
            opacity: 0;
        }