/* ═══════════════════════════════════════════════════════════════════════════
   LAPISAN TEMA SELURUH WEBSITE  —  BERKAS INI DIBANGKITKAN, JANGAN DIEDIT
   Sumber pembangkit: scratchpad/gen_theme.py

   Situs ini memuat DUA rancangan yang berlawanan:
     - web utama & dasbor : aslinya TERANG  -> di sini dibuat lawan GELAP
     - panel admin        : aslinya GELAP   -> di sini dibuat lawan TERANG

   Karena itu setiap aturan diberi cakupan ketat:
       [data-theme="dark"]  body:not(.admin-page)   ... web utama & dasbor
       [data-theme="light"] body.admin-page         ... panel admin
   Tanpa pembatasan itu, aturan "teks putih jadi hitam" milik admin ikut
   terpakai di dasbor dan membuat tulisan hilang di latar gelap.

   Daftar kelasnya diambil langsung dari berkas sumber (index.html, admin.html,
   dan seluruh src/**/*.js), jadi cakupannya mengikuti markup yang benar-benar
   ada — bukan tebakan.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }


/* ─── Komponen khusus web utama & dasbor (asalnya dari style.css) ────────── */
[data-theme="dark"] body:not(.admin-page) { background-color: #14161a !important; color: #e7eaee !important; }
[data-theme="dark"] body:not(.admin-page) .sidebar { background: #1b1e24 !important; border-color: #272b32 !important; }
[data-theme="dark"] body:not(.admin-page) .main-content { background-color: #14161a !important; }
[data-theme="dark"] body:not(.admin-page).stats-mode #stats { background: #14161a !important; }
[data-theme="dark"] body:not(.admin-page) .card,
[data-theme="dark"] body:not(.admin-page) .project-card,
[data-theme="dark"] body:not(.admin-page) .scroll-part-table {
    background: #1b1e24 !important; border-color: #272b32 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.30) !important; }
[data-theme="dark"] body:not(.admin-page) .project-card-icon-btn {
    background: #22262d !important; border-color: #272b32 !important; color: #aab2bc !important; }
[data-theme="dark"] body:not(.admin-page) .project-card-icon-btn:hover {
    background: #2a2f37 !important; border-color: #EE4D2D !important; color: #ff7e67 !important; }
[data-theme="dark"] body:not(.admin-page) .project-card-count { color: #8f98a3 !important; }
[data-theme="dark"] body:not(.admin-page) .project-card-count i { color: #79828d !important; }
[data-theme="dark"] body:not(.admin-page) .nav-btn { color: #aab2bc !important; }
[data-theme="dark"] body:not(.admin-page) .nav-btn:hover { background-color: #22262d !important; color: #e7eaee !important; }
[data-theme="dark"] body:not(.admin-page) .table-input:not([readonly]) {
    background-color: #22262d !important; border-color: #31363e !important; color: #e7eaee !important; }
[data-theme="dark"] body:not(.admin-page) .table-input:not([readonly]):focus {
    background-color: #2b2016 !important; border-color: #EE4D2D !important; }
[data-theme="dark"] body:not(.admin-page) input:read-only { color: #aab2bc !important; }
[data-theme="dark"] body:not(.admin-page) input[readonly][data-field="mainLink"],
[data-theme="dark"] body:not(.admin-page) input[readonly][data-field="link2"] { color: #7aa7ff !important; }
[data-theme="dark"] body:not(.admin-page) .table-th-sticky {
    background-color: #22262d !important; border-bottom-color: #31363e !important; color: #aab2bc !important; }
[data-theme="dark"] body:not(.admin-page) .status-success { background-color: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.45) !important; }
[data-theme="dark"] body:not(.admin-page) .status-error   { background-color: rgba(239,68,68,.14) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.45) !important; }
[data-theme="dark"] body:not(.admin-page) .input-error    { background-color: rgba(239,68,68,.12) !important; }
[data-theme="dark"] body:not(.admin-page) .slider { background-color: #2a2f37 !important; }
[data-theme="dark"] body:not(.admin-page) th { background-color: #22262d !important; color: #aab2bc !important; }
[data-theme="dark"] body:not(.admin-page) td { border-color: #272b32 !important; }
[data-theme="dark"] body:not(.admin-page) hr { border-color: #272b32 !important; }
[data-theme="dark"] body:not(.admin-page) input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] body:not(.admin-page) textarea,
[data-theme="dark"] body:not(.admin-page) select {
    background-color: #22262d !important; color: #e7eaee !important; border-color: #31363e !important; }
[data-theme="dark"] body:not(.admin-page) input::placeholder,
[data-theme="dark"] body:not(.admin-page) textarea::placeholder { color: #79828d !important; }
[data-theme="dark"] body:not(.admin-page) .shadow-sm,
[data-theme="dark"] body:not(.admin-page) .shadow,
[data-theme="dark"] body:not(.admin-page) .shadow-md,
[data-theme="dark"] body:not(.admin-page) .shadow-lg,
[data-theme="dark"] body:not(.admin-page) .shadow-xl,
[data-theme="dark"] body:not(.admin-page) .shadow-2xl { box-shadow: 0 8px 26px rgba(0,0,0,.42) !important; }

/* Kelas utilitas web utama & dasbor */
[data-theme="dark"] body:not(.admin-page) .bg-\[\#F8F9FA\] { background-color: #14161a !important }
[data-theme="dark"] body:not(.admin-page) .bg-amber-50 { background-color: rgba(245,158,11,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-blue-100 { background-color: rgba(59,130,246,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-blue-50 { background-color: rgba(59,130,246,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-emerald-50 { background-color: rgba(16,185,129,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-gray-100 { background-color: #22262d !important }
[data-theme="dark"] body:not(.admin-page) .bg-gray-200 { background-color: #2a2f37 !important }
[data-theme="dark"] body:not(.admin-page) .bg-gray-50 { background-color: #14161a !important }
[data-theme="dark"] body:not(.admin-page) .bg-green-100 { background-color: rgba(34,197,94,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-green-50 { background-color: rgba(34,197,94,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-orange-100 { background-color: rgba(249,115,22,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-orange-50 { background-color: rgba(249,115,22,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-pink-100 { background-color: rgba(236,72,153,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-purple-100 { background-color: rgba(168,85,247,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-purple-50 { background-color: rgba(168,85,247,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-red-100\/60 { background-color: rgba(239,68,68,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-red-50 { background-color: rgba(239,68,68,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-red-50\/40 { background-color: rgba(239,68,68,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .bg-white { background-color: #1b1e24 !important }
[data-theme="dark"] body:not(.admin-page) .bg-white\/10 { background-color: rgba(27,30,36,0.35) !important }
[data-theme="dark"] body:not(.admin-page) .bg-white\/20 { background-color: rgba(27,30,36,0.45) !important }
[data-theme="dark"] body:not(.admin-page) .bg-white\/5 { background-color: rgba(27,30,36,0.3) !important }
[data-theme="dark"] body:not(.admin-page) .bg-white\/90 { background-color: rgba(27,30,36,1.0) !important }
[data-theme="dark"] body:not(.admin-page) .bg-yellow-100 { background-color: rgba(234,179,8,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .border-amber-100 { border-color: rgba(245,158,11,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-amber-200\/50 { border-color: rgba(245,158,11,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-blue-100 { border-color: rgba(59,130,246,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-gray-100 { border-color: #272b32 !important }
[data-theme="dark"] body:not(.admin-page) .border-gray-200 { border-color: #31363e !important }
[data-theme="dark"] body:not(.admin-page) .border-gray-200\/60 { border-color: #31363e !important }
[data-theme="dark"] body:not(.admin-page) .border-gray-300 { border-color: #31363e !important }
[data-theme="dark"] body:not(.admin-page) .border-gray-50 { border-color: #272b32 !important }
[data-theme="dark"] body:not(.admin-page) .border-green-100 { border-color: rgba(34,197,94,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-green-200 { border-color: rgba(34,197,94,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-orange-100 { border-color: rgba(249,115,22,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-orange-200 { border-color: rgba(249,115,22,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-purple-100 { border-color: rgba(168,85,247,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-red-100 { border-color: rgba(239,68,68,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-red-200 { border-color: rgba(239,68,68,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-red-200\/50 { border-color: rgba(239,68,68,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .border-white { border-color: rgba(255,255,255,0.12) !important }
[data-theme="dark"] body:not(.admin-page) .border-white\/10 { border-color: rgba(255,255,255,0.12) !important }
[data-theme="dark"] body:not(.admin-page) .focus\:ring-orange-100:focus { --tw-ring-color: rgba(249,115,22,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .from-orange-50 { --tw-gradient-from: rgba(249,115,22,0.16) !important }
[data-theme="dark"] body:not(.admin-page) .from-purple-50\/40 { --tw-gradient-from: rgba(168,85,247,0.16) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-amber-100:hover { background-color: rgba(245,158,11,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-gray-100:hover { background-color: #22262d !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-gray-200:hover { background-color: #2a2f37 !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-gray-50:hover { background-color: #14161a !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-gray-50\/50:hover { background-color: #14161a !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-orange-100:hover { background-color: rgba(249,115,22,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-red-100:hover { background-color: rgba(239,68,68,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.14) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:bg-white:hover { background-color: #1b1e24 !important }
[data-theme="dark"] body:not(.admin-page) .hover\:border-orange-200:hover { border-color: rgba(249,115,22,0.28) !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-blue-500:hover { color: #60a5fa !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-blue-600:hover { color: #60a5fa !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-green-500:hover { color: #4ade80 !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-green-700:hover { color: #4ade80 !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-orange-500:hover { color: #fb923c !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-orange-600:hover { color: #fb923c !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-purple-600:hover { color: #c084fc !important }
[data-theme="dark"] body:not(.admin-page) .hover\:text-red-500:hover { color: #f87171 !important }
[data-theme="dark"] body:not(.admin-page) .text-amber-500 { color: #fbbf24 !important }
[data-theme="dark"] body:not(.admin-page) .text-amber-600 { color: #fbbf24 !important }
[data-theme="dark"] body:not(.admin-page) .text-blue-500 { color: #60a5fa !important }
[data-theme="dark"] body:not(.admin-page) .text-blue-600 { color: #60a5fa !important }
[data-theme="dark"] body:not(.admin-page) .text-emerald-600 { color: #34d399 !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-300 { color: #79828d !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-400 { color: #8f98a3 !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-500 { color: #aab2bc !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-600 { color: #aab2bc !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-700 { color: #c9d0d8 !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-800 { color: #e7eaee !important }
[data-theme="dark"] body:not(.admin-page) .text-gray-900 { color: #e7eaee !important }
[data-theme="dark"] body:not(.admin-page) .text-green-500 { color: #4ade80 !important }
[data-theme="dark"] body:not(.admin-page) .text-green-600 { color: #4ade80 !important }
[data-theme="dark"] body:not(.admin-page) .text-green-700 { color: #4ade80 !important }
[data-theme="dark"] body:not(.admin-page) .text-orange-500 { color: #fb923c !important }
[data-theme="dark"] body:not(.admin-page) .text-orange-700\/80 { color: #fb923c !important }
[data-theme="dark"] body:not(.admin-page) .text-orange-800 { color: #fb923c !important }
[data-theme="dark"] body:not(.admin-page) .text-pink-500 { color: #f472b6 !important }
[data-theme="dark"] body:not(.admin-page) .text-purple-500 { color: #c084fc !important }
[data-theme="dark"] body:not(.admin-page) .text-purple-600 { color: #c084fc !important }
[data-theme="dark"] body:not(.admin-page) .text-red-500 { color: #f87171 !important }
[data-theme="dark"] body:not(.admin-page) .text-red-500\/80 { color: #f87171 !important }
[data-theme="dark"] body:not(.admin-page) .text-red-600 { color: #f87171 !important }
[data-theme="dark"] body:not(.admin-page) .text-red-700 { color: #f87171 !important }
[data-theme="dark"] body:not(.admin-page) .text-yellow-700 { color: #facc15 !important }
[data-theme="dark"] body:not(.admin-page) .to-orange-100\/30 { --tw-gradient-to: rgba(249,115,22,0.16) !important }


/* ─── Komponen khusus panel admin (asalnya dari admin.css) ───────────────── */
[data-theme="light"] body.admin-page { background-color: #f5f6f8 !important; color: #16191d !important; }
[data-theme="light"] body.admin-page .admin-sidebar,
[data-theme="light"] body.admin-page .admin-topbar {
    background: #ffffff !important; border-color: #e4e7eb !important;
    box-shadow: 0 0 30px rgba(0,0,0,.06) !important; }
[data-theme="light"] body.admin-page .stat-card,
[data-theme="light"] body.admin-page .chart-card,
[data-theme="light"] body.admin-page .admin-card,
[data-theme="light"] body.admin-page .prompt-card,
[data-theme="light"] body.admin-page .store-product-card {
    background: #ffffff !important; border-color: #e4e7eb !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important; }
[data-theme="light"] body.admin-page .stat-card:hover,
[data-theme="light"] body.admin-page .store-product-card:hover,
[data-theme="light"] body.admin-page .project-item:hover { border-color: #d8dce1 !important; }
[data-theme="light"] body.admin-page .stat-label { color: #6e7680 !important; }
[data-theme="light"] body.admin-page .stat-value { color: #16191d !important; }
[data-theme="light"] body.admin-page .admin-nav-btn { color: #565e67 !important; }
[data-theme="light"] body.admin-page .admin-nav-btn:hover { background: #f1f2f4 !important; color: #16191d !important; }
[data-theme="light"] body.admin-page .admin-nav-btn.active { background: rgba(238,77,45,.12) !important; color: #d9430f !important; }
[data-theme="light"] body.admin-page .prompt-header { border-bottom-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page .prompt-preview-text { color: #6e7680 !important; }
[data-theme="light"] body.admin-page .prompt-full-text {
    color: #3c434b !important; background: #f1f2f4 !important; border-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page .prompt-expand-btn { color: #8b939c !important; }
[data-theme="light"] body.admin-page .btn-ghost { background: #f1f2f4 !important; color: #3c434b !important; }
[data-theme="light"] body.admin-page .btn-ghost:hover { background: #e9ebee !important; color: #16191d !important; }
[data-theme="light"] body.admin-page #users-table-body tr { border-bottom-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page #users-table-body tr:hover { background: #f1f2f4 !important; }
[data-theme="light"] body.admin-page .plan-free { background: #e9ebee !important; color: #565e67 !important; }
[data-theme="light"] body.admin-page .status-active { color: #15803d !important; }
[data-theme="light"] body.admin-page .status-inactive { color: #8b939c !important; }
[data-theme="light"] body.admin-page .project-item { background: #f1f2f4 !important; border-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page .prompt-tab-btn { background: #f1f2f4 !important; color: #565e67 !important; }
[data-theme="light"] body.admin-page .prompt-tab-btn:hover { background: #e9ebee !important; color: #16191d !important; }
[data-theme="light"] body.admin-page .template-name-badge {
    background: #f1f2f4 !important; color: #565e67 !important; border-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page .prompt-plat-btn {
    background: #f1f2f4 !important; color: #565e67 !important; border-color: #d8dce1 !important; }
[data-theme="light"] body.admin-page .prompt-plat-btn:hover { background: #e9ebee !important; color: #16191d !important; }
[data-theme="light"] body.admin-page .prompt-plat-btn.selected { color: #b8360f !important; }
[data-theme="light"] body.admin-page .banner-drop { background: #f1f2f4 !important; border-color: rgba(0,0,0,.14) !important; }
[data-theme="light"] body.admin-page .banner-drop:hover { background: #e9ebee !important; }
[data-theme="light"] body.admin-page .banner-drop.has-file { background: #ffffff !important; border-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page table th { background: #f1f2f4 !important; color: #565e67 !important; }
[data-theme="light"] body.admin-page table td { border-color: #e4e7eb !important; }
[data-theme="light"] body.admin-page input:not([type=checkbox]):not([type=radio]),
[data-theme="light"] body.admin-page textarea,
[data-theme="light"] body.admin-page select {
    background: #ffffff !important; color: #16191d !important; border-color: #d8dce1 !important; }
[data-theme="light"] body.admin-page input::placeholder,
[data-theme="light"] body.admin-page textarea::placeholder { color: #8b939c !important; }
[data-theme="light"] body.admin-page .mg-switch { background: rgba(0,0,0,.09) !important; border-color: rgba(0,0,0,.13) !important; }
[data-theme="light"] body.admin-page .mg-switch.is-open { background: #16a34a !important; border-color: #16a34a !important; }
[data-theme="light"] body.admin-page .mg-switch.is-closed { background: #dc2626 !important; border-color: #dc2626 !important; }
[data-theme="light"] body.admin-page .mg-pill-open { background: rgba(22,163,74,.13) !important; color: #15803d !important; }
[data-theme="light"] body.admin-page .mg-pill-closed { background: rgba(220,38,38,.13) !important; color: #b91c1c !important; }
[data-theme="light"] body.admin-page ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18) !important; }

/* Kelas utilitas panel admin */
[data-theme="light"] body.admin-page .bg-\[\#0D0D0F\] { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-\[\#111113\] { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-\[\#17171A\] { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-\[\#17171a\] { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-\[\#EE4D2D\] { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-\[\#EE4D2D\]\/10 { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-white { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .bg-white\/10 { background-color: rgba(0,0,0,0.08) !important }
[data-theme="light"] body.admin-page .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important }
[data-theme="light"] body.admin-page .border-white\/10 { border-color: rgba(0,0,0,0.18) !important }
[data-theme="light"] body.admin-page .border-white\/5 { border-color: rgba(0,0,0,0.12) !important }
[data-theme="light"] body.admin-page .focus\:border-\[\#EE4D2D\]:focus { border-color: #e4e7eb !important }
[data-theme="light"] body.admin-page .hover\:bg-white:hover { background-color: #ffffff !important }
[data-theme="light"] body.admin-page .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.08) !important }
[data-theme="light"] body.admin-page .hover\:bg-white\/15:hover { background-color: rgba(0,0,0,0.1) !important }
[data-theme="light"] body.admin-page .hover\:bg-white\/20:hover { background-color: rgba(0,0,0,0.1) !important }
[data-theme="light"] body.admin-page .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important }
[data-theme="light"] body.admin-page .hover\:text-white:hover { color: #16191d !important }
[data-theme="light"] body.admin-page .placeholder-white\/25::placeholder { color: #8b939c !important }
[data-theme="light"] body.admin-page .placeholder-white\/30::placeholder { color: #8b939c !important }
[data-theme="light"] body.admin-page .text-\[\#EE4D2D\] { color: #16191d !important }
[data-theme="light"] body.admin-page .text-amber-400 { color: #d97706 !important }
[data-theme="light"] body.admin-page .text-blue-400 { color: #2563eb !important }
[data-theme="light"] body.admin-page .text-emerald-400 { color: #059669 !important }
[data-theme="light"] body.admin-page .text-green-400 { color: #16a34a !important }
[data-theme="light"] body.admin-page .text-orange-400 { color: #ea580c !important }
[data-theme="light"] body.admin-page .text-pink-400 { color: #db2777 !important }
[data-theme="light"] body.admin-page .text-purple-400 { color: #9333ea !important }
[data-theme="light"] body.admin-page .text-red-400 { color: #dc2626 !important }
[data-theme="light"] body.admin-page .text-red-400\/70 { color: #dc2626 !important }
[data-theme="light"] body.admin-page .text-sky-400 { color: #0284c7 !important }
[data-theme="light"] body.admin-page .text-white { color: #16191d !important }
[data-theme="light"] body.admin-page .text-white\/20 { color: #a2a9b1 !important }
[data-theme="light"] body.admin-page .text-white\/30 { color: #8b939c !important }
[data-theme="light"] body.admin-page .text-white\/40 { color: #6e7680 !important }
[data-theme="light"] body.admin-page .text-white\/50 { color: #565e67 !important }
[data-theme="light"] body.admin-page .text-white\/60 { color: #565e67 !important }
[data-theme="light"] body.admin-page .text-white\/70 { color: #3c434b !important }
[data-theme="light"] body.admin-page .text-white\/80 { color: #3c434b !important }
[data-theme="light"] body.admin-page .text-white\/90 { color: #16191d !important }
[data-theme="light"] body.admin-page .text-yellow-400 { color: #ca8a04 !important }


/* ─── Halaman bootcamp (gelap bawaan) ────────────────────────────────────
   Halaman ini sudah rapi memakai variabel warna sendiri, jadi cukup
   variabelnya yang dibalik untuk memberi versi terang. */
[data-theme="light"] body.bootcamp-page {
    --bg:       #f5f6f8;
    --surface:  #ffffff;
    --surface2: #f1f2f4;
    --border:   #e4e7eb;
    --text:     #16191d;
    --muted:    #6e7680;
    background: var(--bg); color: var(--text);
}

/* ─── Halaman dokumentasi API (gelap bawaan) ─────────────────────────── */
[data-theme="light"] body.dark-page { background-color: #f5f6f8 !important; color: #16191d !important; }

/* Kelas utilitas halaman dokumentasi API */
[data-theme="light"] body.dark-page .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important }
[data-theme="light"] body.dark-page .border-white\/10 { border-color: rgba(0,0,0,0.18) !important }
[data-theme="light"] body.dark-page .border-white\/5 { border-color: rgba(0,0,0,0.12) !important }
[data-theme="light"] body.dark-page .divide-white\/5 > * + * { border-color: rgba(0,0,0,0.12) !important }
[data-theme="light"] body.dark-page .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.08) !important }
[data-theme="light"] body.dark-page .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important }
[data-theme="light"] body.dark-page .hover\:border-white\/5:hover { border-color: rgba(0,0,0,0.12) !important }
[data-theme="light"] body.dark-page .hover\:text-white:hover { color: #16191d !important }
[data-theme="light"] body.dark-page .text-blue-400 { color: #2563eb !important }
[data-theme="light"] body.dark-page .text-emerald-400 { color: #059669 !important }
[data-theme="light"] body.dark-page .text-green-400 { color: #16a34a !important }
[data-theme="light"] body.dark-page .text-orange-400 { color: #ea580c !important }
[data-theme="light"] body.dark-page .text-red-400 { color: #dc2626 !important }
[data-theme="light"] body.dark-page .text-white { color: #16191d !important }
[data-theme="light"] body.dark-page .text-white\/30 { color: #8b939c !important }
[data-theme="light"] body.dark-page .text-white\/40 { color: #6e7680 !important }
[data-theme="light"] body.dark-page .text-white\/50 { color: #565e67 !important }
[data-theme="light"] body.dark-page .text-white\/60 { color: #565e67 !important }
[data-theme="light"] body.dark-page .text-white\/70 { color: #3c434b !important }
[data-theme="light"] body.dark-page .text-white\/80 { color: #3c434b !important }
[data-theme="light"] body.dark-page .text-white\/90 { color: #16191d !important }
[data-theme="light"] body.dark-page .text-yellow-400 { color: #ca8a04 !important }

/* ─── Layar kecil ────────────────────────────────────────────────────────
   Bilah kendali tetap di pojok kanan atas (lebih ringkas). !important karena
   gaya dasar disuntik theme.js setelah berkas ini dimuat; hanya top yang
   dipakai supaya bilah tidak memanjang setinggi layar. Gambar/tabel tidak
   lagi memaksa halaman geser menyamping. */
@media (max-width: 720px) {
    .page-tools { top: 12px !important; bottom: auto !important; right: 12px !important;
                  height: auto !important; padding: 4px 6px; }
    .page-tools .theme-btn { width: 28px; height: 28px; }
    .lang-switch button { padding: 4px 7px; }
}
@media (max-width: 900px) {
    img, video, canvas, iframe { max-width: 100%; }
    .card, .admin-card, .stat-card, .chart-card, .prompt-card, .store-product-card { max-width: 100%; }
    /* Tabel lebar tetap bisa digulir sendiri, bukan mendorong seluruh halaman. */
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }
    pre { overflow-x: auto; }
}

/* ─── Halaman statistik (dimuat sebagai iframe) ──────────────────────────
   Aplikasi statistik memakai variabel warnanya sendiri, jadi cukup
   variabelnya yang ditimpa — seluruh kartu, tabel, dan grafiknya ikut. */
[data-theme="dark"] {
    --bg-color:     #14161a;
    --panel-bg:     #1b1e24;
    --panel-border: rgba(255,255,255,.08);
    --text-main:    #e7eaee;
    --text-muted:   #98a1ab;
    --card-shadow:  0 4px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] body { background: var(--bg-color) !important; color: var(--text-main) !important; }

/* ─── Batang gulir: tanpa tombol panah bawaan Windows ────────────────────── */
::-webkit-scrollbar-button { display: none !important; height: 0 !important; width: 0 !important; }
[data-theme="dark"] body:not(.admin-page) ::-webkit-scrollbar-thumb { background: #343a42; border-radius: 4px; }
[data-theme="dark"] body:not(.admin-page) ::-webkit-scrollbar-track { background: transparent; }

/* ─── Bilah kendali kanan atas ikut tema ─────────────────────────────────── */
[data-theme="light"] body.admin-page .page-tools { --tools-bg:#ffffff; --tools-line:rgba(0,0,0,.10); --tools-ink:#4b535c; }
[data-theme="dark"]  body.admin-page .page-tools { --tools-bg:#17171a; --tools-line:rgba(255,255,255,.12); --tools-ink:#cbd2da; }