/* ============================================================
   theme.css — dua palet warna situs EducativeAI, dipilih lewat tombol tema
   (assets/theme.js). Dimuat SETELAH gaya halaman, sehingga:
   1) variabel warna halaman ditimpa per palet;
   2) warna yang tertanam langsung di gaya halaman (gradien ungu, topbar gelap,
      tombol berwarna) ikut diseragamkan.
   Palet 1 "Zaitun" : #F5EFE3 krem · #4F5B2A zaitun · #B8892D oker · #D8C9A8 pasir
   Palet 2 "Persik" : #FFFAF3 krem · #FFF2DB persik muda · #FFE5BF persik · #F62440 merah
   ============================================================ */

html[data-theme="zaitun"]{
  --bg:#F5EFE3; --surface:#FFFCF6; --surface2:#EFE6D3; --surface3:#E6DAC1; --surface-card:#FFFCF6;
  --text:#2F3519; --text2:#4C5233; --text3:#686B4E; --muted:#686B4E;
  --accent:#4F5B2A; --accent-dark:#3C4520; --accent-mid:#4F5B2A; --accent-text:#4F5B2A;
  --accent-light:rgba(79,91,42,.12); --on-accent:#FFFFFF; --accent-rgb:79,91,42;
  --accent2:#B8892D; --accent3:#B8892D; --gold:#B8892D;
  --purple:#4F5B2A; --purple-light:rgba(79,91,42,.12); --teal:#4F5B2A; --teal-light:rgba(79,91,42,.10);
  --border:#D8C9A8; --border2:#E6DAC1;
  --success:#3F7A3A; --success-light:rgba(63,122,58,.12); --error:#B23A2A; --danger:#B23A2A; --danger-light:rgba(178,58,42,.10);
  --warning:#8C6212; --warning-light:rgba(184,137,45,.16);
  --shadow:0 1px 3px rgba(47,53,25,.08); --shadow-lg:0 12px 32px rgba(47,53,25,.12);
  --t-topbar:rgba(245,239,227,.88); --t-heading:#2F3519; --t-hl:#B8892D; --t-chip:#EFE6D3;
  color-scheme:light;
}
html[data-theme="persik"]{
  --bg:#FFFAF3; --surface:#FFFFFF; --surface2:#FFF2DB; --surface3:#FFE5BF; --surface-card:#FFFFFF;
  --text:#3A1F14; --text2:#5E3B2B; --text3:#80604F; --muted:#80604F;
  --accent:#F62440; --accent-dark:#C8102E; --accent-mid:#F62440; --accent-text:#C8102E;
  --accent-light:rgba(246,36,64,.10); --on-accent:#FFFFFF; --accent-rgb:246,36,64;
  --accent2:#E07A1F; --accent3:#E07A1F; --gold:#E07A1F;
  --purple:#C8102E; --purple-light:rgba(246,36,64,.10); --teal:#C8102E; --teal-light:rgba(246,36,64,.08);
  --border:#F5D3A6; --border2:#FFE5BF;
  --success:#2E7D4F; --success-light:rgba(46,125,79,.12); --error:#C8102E; --danger:#C8102E; --danger-light:rgba(200,16,46,.10);
  --warning:#9A5A0E; --warning-light:rgba(224,122,31,.14);
  --shadow:0 1px 3px rgba(58,31,20,.08); --shadow-lg:0 12px 32px rgba(58,31,20,.12);
  --t-topbar:rgba(255,250,243,.9); --t-heading:#3A1F14; --t-hl:#F62440; --t-chip:#FFF2DB;
  color-scheme:light;
}

/* ── Dasar ───────────────────────────────────────────────────────────────── */
html[data-theme] body{background:var(--bg)!important;color:var(--text)!important;}
html[data-theme] a{color:var(--accent-text);}
html[data-theme] body::before, html[data-theme] body::after,
html[data-theme] .orb, html[data-theme] .orb1, html[data-theme] .orb2, html[data-theme] .orb3{display:none!important;}

/* ── Topbar & navigasi ───────────────────────────────────────────────────── */
html[data-theme] .topbar{background:var(--t-topbar)!important;border-bottom:1px solid var(--border2)!important;box-shadow:none!important;}
html[data-theme] .brand, html[data-theme] .brand-name, html[data-theme] .topbar-name{color:var(--text)!important;}
html[data-theme] .brand-icon, html[data-theme] .brand-mark, html[data-theme] .logo-badge, html[data-theme] .logo-dot{background:var(--accent)!important;color:var(--on-accent)!important;}
html[data-theme] .nav-pill, html[data-theme] .nav-link, html[data-theme] .topbar-pill, html[data-theme] .back-btn{
  background:var(--surface)!important;color:var(--text2)!important;border:1px solid var(--border)!important;}
html[data-theme] .nav-pill:hover, html[data-theme] .nav-link:hover, html[data-theme] .topbar-pill:hover, html[data-theme] .back-btn:hover{color:var(--accent-text)!important;border-color:var(--accent)!important;}

/* ── Judul: gradien → warna solid ────────────────────────────────────────── */
html[data-theme] h1, html[data-theme] h2, html[data-theme] .hero h1, html[data-theme] .hero h2, html[data-theme] .hero-title,
html[data-theme] .sec-title, html[data-theme] .page-title, html[data-theme] .stat-num, html[data-theme] .price-amount,
html[data-theme] .price-hero, html[data-theme] .price-val, html[data-theme] .how-num, html[data-theme] .scard-num, html[data-theme] .kode-num{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:var(--t-heading)!important;}
html[data-theme] h1 span, html[data-theme] h1 em, html[data-theme] .hero h1 span, html[data-theme] .hero-title em,
html[data-theme] .price-amount, html[data-theme] .price-hero, html[data-theme] .price-val{color:var(--t-hl)!important;-webkit-text-fill-color:var(--t-hl)!important;}
html[data-theme] .stat-num.ok{color:var(--success)!important;-webkit-text-fill-color:var(--success)!important;}
html[data-theme] .stat-num.danger{color:var(--danger)!important;-webkit-text-fill-color:var(--danger)!important;}
html[data-theme] .stat-num.info{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important;}
html[data-theme] .hero-sub, html[data-theme] .subtitle, html[data-theme] .card-desc, html[data-theme] .feat-title,
html[data-theme] .feature-title, html[data-theme] .card-feat, html[data-theme] .stat-label{color:var(--text2)!important;}
html[data-theme] .card-title, html[data-theme] .scard-title, html[data-theme] .section-title, html[data-theme] .upload-title,
html[data-theme] .uz-title, html[data-theme] .rb-title, html[data-theme] .result-banner-title, html[data-theme] .modal-title,
html[data-theme] .success-title, html[data-theme] .preview-title{color:var(--text)!important;}

/* ── Lencana / label kecil ───────────────────────────────────────────────── */
html[data-theme] .hero-badge, html[data-theme] .hero-eyebrow, html[data-theme] .chip-new, html[data-theme] .comp-badge,
html[data-theme] .fi-badge, html[data-theme] .drop-pill, html[data-theme] .price-badge, html[data-theme] .sec-eyebrow{
  background:var(--t-chip)!important;color:var(--accent-text)!important;border:1px solid var(--border)!important;}
html[data-theme] .chip-hot{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;}
html[data-theme] .hero-dot, html[data-theme] .hero-feat-dot, html[data-theme] .feat-dot{background:var(--accent2)!important;}

/* ── Kartu & panel ───────────────────────────────────────────────────────── */
html[data-theme] .card, html[data-theme] .tool-card, html[data-theme] .feat-card, html[data-theme] .feature, html[data-theme] .how-card,
html[data-theme] .how-wrap, html[data-theme] .trust-bar, html[data-theme] .scard, html[data-theme] .search-card, html[data-theme] .section-card,
html[data-theme] .result-card, html[data-theme] .progress-card, html[data-theme] .access-card, html[data-theme] .contact-card,
html[data-theme] .review-card, html[data-theme] .stat-box, html[data-theme] .apa-card, html[data-theme] .modal-box,
html[data-theme] .success-box, html[data-theme] .panel-right, html[data-theme] .article-preview{
  background:var(--surface)!important;border-color:var(--border)!important;box-shadow:var(--shadow)!important;}
html[data-theme] .tool-card::before{display:none!important;}
html[data-theme] .tool-card:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-lg)!important;}
html[data-theme] .card-icon-wrap, html[data-theme] .uz-icon, html[data-theme] .upload-icon-wrap, html[data-theme] .file-ico,
html[data-theme] .icon-blue, html[data-theme] .icon-sky, html[data-theme] .icon-teal, html[data-theme] .icon-purple, html[data-theme] .icon-amber{
  background:var(--accent-light)!important;border-color:var(--border)!important;}
html[data-theme] .card-price-row{background:var(--surface2)!important;border-color:var(--border)!important;}
html[data-theme] .upload-zone, html[data-theme] .drop{background:var(--surface2)!important;border-color:var(--border)!important;}
html[data-theme] .upload-zone:hover, html[data-theme] .drop:hover, html[data-theme] .drop.over, html[data-theme] .upload-zone.dragging{border-color:var(--accent)!important;background:var(--accent-light)!important;}

/* ── Tombol ──────────────────────────────────────────────────────────────── */
html[data-theme] .submit-btn, html[data-theme] .btn-primary, html[data-theme] .pay-btn, html[data-theme] .btn-pay, html[data-theme] .gen-btn,
html[data-theme] .upload-cta, html[data-theme] .dl-btn, html[data-theme] .btn-dl, html[data-theme] .prev-btn-dl, html[data-theme] .verify-btn,
html[data-theme] .btn-verify, html[data-theme] .search-btn, html[data-theme] .download-btn, html[data-theme] .edu-btn:not(.ghost), html[data-theme] .btn-err.primary{
  background:var(--accent)!important;background-image:none!important;color:var(--on-accent)!important;border-color:var(--accent)!important;box-shadow:none!important;}
html[data-theme] .submit-btn:hover:not(:disabled), html[data-theme] .btn-primary:hover:not(:disabled), html[data-theme] .gen-btn:hover:not(:disabled),
html[data-theme] .dl-btn:hover, html[data-theme] .btn-dl:hover, html[data-theme] .pay-btn:hover, html[data-theme] .btn-pay:hover,
html[data-theme] .search-btn:hover:not(:disabled), html[data-theme] .verify-btn:hover{background:var(--accent-dark)!important;}
html[data-theme] .card-btn, html[data-theme] .btn-blue, html[data-theme] .btn-sky, html[data-theme] .btn-teal, html[data-theme] .btn-purple, html[data-theme] .btn-amber,
html[data-theme] .btn-secondary, html[data-theme] .btn-ghost, html[data-theme] .reset-btn, html[data-theme] .btn-reset, html[data-theme] .copy-btn,
html[data-theme] .prev-btn-back, html[data-theme] .rm-btn, html[data-theme] .edu-btn.ghost{
  background:var(--accent-light)!important;color:var(--accent-text)!important;border:1px solid var(--border)!important;}

/* ── Tab & pilihan ───────────────────────────────────────────────────────── */
html[data-theme] .tab-btn, html[data-theme] .lang-tab, html[data-theme] .pay-tab, html[data-theme] .access-tab, html[data-theme] .apa-tab,
html[data-theme] .journal-btn, html[data-theme] .section-btn, html[data-theme] .lang-btn{background:var(--surface)!important;color:var(--text2)!important;border-color:var(--border)!important;}
html[data-theme] .tab-btn.active, html[data-theme] .lang-tab.active, html[data-theme] .pay-tab.active, html[data-theme] .access-tab.active,
html[data-theme] .apa-tab.active, html[data-theme] .journal-btn.selected, html[data-theme] .section-btn.selected, html[data-theme] .lang-btn.active{
  background:var(--accent-light)!important;color:var(--accent-text)!important;border-color:var(--accent)!important;}

/* ── Isian ───────────────────────────────────────────────────────────────── */
html[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=file]), html[data-theme] select, html[data-theme] textarea{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;}
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder{color:var(--text3)!important;}
html[data-theme] input[type=checkbox], html[data-theme] input[type=radio]{accent-color:var(--accent);}

/* ── Kotak status ────────────────────────────────────────────────────────── */
html[data-theme] .warn-box, html[data-theme] .warn-pay, html[data-theme] .pay-warn, html[data-theme] .info-warn, html[data-theme] .kode-info, html[data-theme] .warn{
  background:var(--warning-light)!important;color:var(--warning)!important;border-color:var(--border)!important;}
html[data-theme] .err-box, html[data-theme] .error-box, html[data-theme] .pay-err, html[data-theme] .error-msg{background:var(--danger-light)!important;color:var(--danger)!important;border-color:var(--danger-light)!important;}
html[data-theme] .result-banner, html[data-theme] .file-info, html[data-theme] .edu-ok-banner.show{background:var(--success-light)!important;border-color:var(--success-light)!important;}
html[data-theme] .result-banner *, html[data-theme] .file-info .file-name, html[data-theme] .file-name-disp{color:var(--success)!important;-webkit-text-fill-color:var(--success)!important;}
html[data-theme] .cite-mark{background:var(--warning-light)!important;color:var(--warning)!important;}
html[data-theme] .prog-track, html[data-theme] .progress-track{background:var(--surface3)!important;}
html[data-theme] .prog-fill, html[data-theme] .progress-fill{background:var(--accent)!important;}
html[data-theme] .footer, html[data-theme] .site-foot, html[data-theme] .footer-note{color:var(--text3)!important;border-color:var(--border2)!important;}
html[data-theme] .footer a, html[data-theme] .site-foot a{color:var(--text3)!important;}
html[data-theme] .preview-modal, html[data-theme] .modal-bg{background:rgba(0,0,0,.45)!important;}

/* ── Tombol pilihan tema ─────────────────────────────────────────────────── */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:100px;
  border:1px solid var(--border,#ccc);background:var(--surface,#fff);color:var(--text2,#333);font:600 12px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  cursor:pointer;flex-shrink:0;white-space:nowrap;}
.theme-toggle:hover{border-color:var(--accent,#888);}
.theme-toggle:focus-visible{outline:2px solid var(--accent,#888);outline-offset:2px;}
.theme-toggle .sw{display:inline-flex;}
.theme-toggle .sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);margin-left:-3px;}
.theme-toggle .sw i:first-child{margin-left:0;}
.theme-toggle.floating{position:fixed;right:16px;bottom:16px;z-index:9999;box-shadow:0 4px 14px rgba(0,0,0,.15);}
@media(max-width:640px){.theme-toggle .tt-label{display:none;}.theme-toggle{padding:0 9px;}}

/* ── Logo SVG di halaman informasi (Cek Pesanan, FAQ, Syarat, Refund, Privasi) ── */
html[data-theme] .topbar svg [fill="#1D4ED8"]{fill:var(--accent);}
html[data-theme] .topbar svg [fill="#F59E0B"]{fill:var(--accent2);}
html[data-theme] .topbar a span[style*="#1D4ED8"]{color:var(--text)!important;}
html[data-theme] .topbar a span[style*="#F59E0B"]{color:var(--accent2)!important;}

/* ── Panel admin (admin.php memakai nama variabel sendiri) ───────────────── */
html[data-theme] .admin-ui{
  --s1:var(--surface); --s2:var(--surface2); --b:var(--border); --t:var(--text); --m:var(--text3);
  --a:var(--accent); --a2:var(--accent2); --ok:var(--success); --er:var(--danger); --wa:var(--warning);}
html[data-theme] .admin-ui .top{background:var(--t-topbar)!important;}
html[data-theme] .admin-ui .tabs a{color:var(--text2);}
html[data-theme] .admin-ui .tabs a.on, html[data-theme] .admin-ui .tabs a:hover{background:var(--accent-light);color:var(--accent-text);}
html[data-theme] .admin-ui .btn{background:var(--surface);color:var(--text);border-color:var(--border);}
html[data-theme] .admin-ui .btn:hover{border-color:var(--accent);}
html[data-theme] .admin-ui .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
html[data-theme] .admin-ui .btn.danger{color:var(--danger);}
html[data-theme] .admin-ui .linkbtn, html[data-theme] .admin-ui a{color:var(--accent-text);}
html[data-theme] .admin-ui .alert.ok{background:var(--success-light);border-color:var(--success-light);color:var(--success);}
html[data-theme] .admin-ui .alert.err{background:var(--danger-light);border-color:var(--danger-light);color:var(--danger);}
html[data-theme] .admin-ui .alert.warn{background:var(--warning-light);border-color:var(--border);color:var(--warning);}
html[data-theme] .admin-ui .p-approved{background:var(--success-light);color:var(--success);}
html[data-theme] .admin-ui .p-pending{background:var(--warning-light);color:var(--warning);}
html[data-theme] .admin-ui .p-used{background:var(--accent-light);color:var(--accent-text);}
html[data-theme] .admin-ui .p-failed, html[data-theme] .admin-ui .p-creating{background:var(--danger-light);color:var(--danger);}
html[data-theme] .admin-ui code, html[data-theme] .admin-ui .path, html[data-theme] .admin-ui pre.log{background:var(--surface2);border-color:var(--border);color:var(--text);}
html[data-theme] .admin-ui input:focus, html[data-theme] .admin-ui select:focus, html[data-theme] .admin-ui textarea:focus{outline-color:var(--accent);}