/* ============================================================
   JIMY PANEL v105  |  perapihan tema Emas + tema baru "Malam Emas"
   Dimuat SETELAH app.css, hanya menimpa. Hapus file ini (dan <link>-nya) untuk kembali ke tampilan lama.
   ============================================================ */

/* ---------- 1. logo JMP & mahkota: warna lewat variabel (lihat core.js) ---------- */
body.gold, body.dark {
  --lf0: #f6e2b0; --lf1: #d6ab68; --lf2: #9a7035;
  --lx0: #2a1c0e; --lx1: #32210f; --lx2: #3b2712; --lx3: #452e15; --lx4: #513719; --lx5: #5f4220;
  --lsh: #2a1c0e; --cr0: #e6c993; --cr1: #b58a50;
}
body.gold .logo .crown, body.dark .logo .crown { filter: drop-shadow(0 2px 4px rgba(120, 85, 35, .45)); }
body.gold .logo small, body.dark .logo small { color: var(--red); }

/* ---------- 2. Emas: kartu role / upgrade / pembayaran ikut krem (tadinya gelap sendiri) ---------- */
body.comic .upc, body.comic .rl, body.comic .pay-sum {
  background: var(--paper); color: var(--ink);
  --text: var(--ink); --muted: #6a5c4b; --dim: #7a6a55; --line: rgba(21, 18, 28, .18); --line2: var(--ink);
}
body.comic .upc .hd .price, body.comic .pay-sum .price { color: var(--ink); }
body.comic .upc ul { color: #4a3f33; }
body.comic .upc li::before { box-shadow: none; }
body.comic .upc.disabled { opacity: .72; }
body.gold .upc.red, body.gold .rl.owner, body.gold .rl.reseller, body.gold .rolecard { box-shadow: 5px 5px 0 var(--red); }
body.comic .upc .why, body.comic .upc .lock { color: #6a5c4b; }
body.comic .upc *:not(.pill):not(.btn):not(.ic):not(svg):not(i):not(.lock) { color: inherit; }
body.comic .upc .hd .ic { color: var(--red); }

/* ---------- 3. Emas: carousel menu = gaya kartu yang sama (outline tebal + bayangan keras), titik pager ikut palet ---------- */
body.comic .mcard { border: var(--bw) solid var(--ink); box-shadow: var(--hs); }
body.comic .mcard.on { border-color: var(--ink); box-shadow: 5px 5px 0 var(--red); }
body.comic .mdots .mdot { background: rgba(21, 18, 28, .25) !important; }
body.comic .mdots .mdot.on { background: var(--red) !important; box-shadow: none !important; }

/* ---------- 4. kontras ---------- */
body.comic { --muted: #6a5c4b; --dim: #7a6a55; }
body.gold .chip.on, body.gold .btn.ghost.sm.go, body.gold .sv .btn.ghost, body.gold .rolecard .btn.ghost { color: var(--ink); text-shadow: none; }
body.gold .chip.on .i, body.gold .btn.ghost.sm.go .i { color: var(--ink); }
body.gold .stat .k, body.gold .stat small { color: var(--muted); }

/* ---------- 5. tombol suara (SVG), swatch tema ---------- */
.sfxbtn { color: #1a1210; display: grid; place-items: center; padding: 0; }
.sfxbtn svg { display: block; }
body.dark .sfxbtn { color: #d9b26f; }
.tp-emas { background: #f4e4c4; box-shadow: 3px 3px 0 #15121c; }
.tp-emas b { background: rgba(21, 18, 28, .22); } .tp-emas b + b { background: #c9a06a; }
body.gold .themeopt.on, body.comic .themeopt.on { background: #ecd6a8; box-shadow: 3px 3px 0 var(--red); }
.tp-dark { background: #1d1812; } .tp-dark b { background: rgba(243, 233, 210, .28); } .tp-dark b + b { background: #d9b26f; }

/* ============================================================
   MALAM EMAS (class body.dark): tinta cokelat hangat + emas. Menggantikan hitam-biru + merah.
   ============================================================ */
body.dark {
  --bg: #14110d; --bg2: #19150f; --card: #1d1812; --card2: #241e17;
  --line: rgba(243, 233, 210, .10); --line2: rgba(243, 233, 210, .18);
  --red: #d9b26f; --red2: #b88f4a; --red-soft: rgba(217, 178, 111, .14); --red-line: rgba(217, 178, 111, .55);
  --glow: 0 8px 30px rgba(217, 178, 111, .16);
  --text: #f3e9d2; --muted: #b8a98f; --dim: #8f8068; --gold: #d9b26f;
  background: #14110d;
}
body.dark::before {
  background:
    radial-gradient(520px 280px at 100% 0, rgba(217, 178, 111, .13), transparent 62%),
    radial-gradient(480px 300px at 0 100%, rgba(150, 100, 40, .12), transparent 62%),
    linear-gradient(180deg, #17130e, #0f0c09);
}
body.dark .topbar { background: rgba(20, 17, 13, .9); border-bottom: 1px solid rgba(217, 178, 111, .16); }
body.dark .icon-btn { background: #241e17; border: 1px solid rgba(217, 178, 111, .22); color: var(--text); }
body.dark .tabbar { --bar-fill: #1a150f; --bar-line: rgba(217, 178, 111, .22); background: rgba(26, 21, 15, .94); border-color: rgba(217, 178, 111, .2); }
body.dark .tab { color: #9a8c75; }
body.dark .tab.on, body.dark .tabbar .tab.on { color: #e6c993; }
body.dark .wheel { --wbg: #2a2218; --tire: #d9b26f; --spoke: rgba(243, 233, 210, .26); box-shadow: 0 8px 20px rgba(217, 178, 111, .22); }
body.dark .wheel .wi { color: #e6c993; }
body.dark .card { background: var(--card); border-color: rgba(217, 178, 111, .14); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
body.dark .sv, body.dark .stat, body.dark .svx, body.dark .upc, body.dark .rl, body.dark .pay-sum, body.dark .rolecard {
  background: linear-gradient(160deg, #271f16, #17130e); border: 1px solid rgba(217, 178, 111, .18);
  --text: #f3e9d2; --muted: #b8a98f; --dim: #8f8068; --line: rgba(243, 233, 210, .1); --line2: rgba(243, 233, 210, .18);
}
body.dark .stat .v { font-family: var(--mono); font-weight: 700; color: #e6c993; }
body.dark .upc .hd .price { color: #e6c993; }
body.dark .upc ul { color: #cdbfa6; }
body.dark .field, body.dark .botask input { background: #120f0a; border-color: rgba(217, 178, 111, .24); color: var(--text); }
body.dark .chip { background: #241e17; color: var(--text); border-color: rgba(217, 178, 111, .22); }
body.dark .chip.on { background: #d9b26f; color: #1a1210; border-color: #d9b26f; }
body.dark .chip.hot { background: #3a2c12; border-color: #d9b26f; }
body.dark .btn.ghost { background: #241e17; color: var(--text); border-color: rgba(217, 178, 111, .22); }
body.dark .btn.primary { background: linear-gradient(180deg, #e6c993, #b88f4a); color: #1a1210; border-color: transparent; text-shadow: none; box-shadow: 0 6px 18px rgba(217, 178, 111, .22); }
body.dark .btn.primary .i { color: #1a1210; }
body.dark .btn.ghost.sm.go, body.dark .sv .btn.ghost, body.dark .rolecard .btn.ghost { background: #d9b26f; border-color: #b88f4a; color: #1a1210; text-shadow: none; }
body.dark .sheet, body.dark .drawer, body.dark .sidebar { background: #18140f; border-color: rgba(217, 178, 111, .16); }
body.dark .rb-say, body.dark .rb-say.big { background: #241e17; border-color: rgba(217, 178, 111, .22); color: var(--text); }
body.dark .logo.jmp svg { filter: drop-shadow(0 4px 8px rgba(217, 178, 111, .25)); }
body.dark .botfab { border-color: rgba(230, 201, 147, .85); background: #d9b26f; }
body.dark .pill.mute { background: rgba(243, 233, 210, .08); color: var(--muted); }
body.dark .pill.role { background: rgba(217, 178, 111, .16); border-color: rgba(217, 178, 111, .5); color: #e6c993; }
body.dark .themeopt { border-color: rgba(217, 178, 111, .22); }
body.dark .themeopt.on { border-color: #d9b26f; box-shadow: 0 0 0 3px rgba(217, 178, 111, .18); }
body.dark .navitem.on { background: linear-gradient(180deg, #e6c993, #b88f4a); color: #1a1210; }
body.dark .navitem.on .i { color: #1a1210; }
body.dark .avatar { background: linear-gradient(135deg, #e6c993, #b88f4a); color: #2a1d0e; border-color: transparent; }
body.dark .rq-big, body.dark .ld-hero { background: linear-gradient(135deg, #b88f4a, #5f4220); box-shadow: 0 6px 0 rgba(0, 0, 0, .45); }
body.dark .upcard { background: linear-gradient(100deg, #b88f4a, #7a5a2a); }
body.dark .upcard .arrow { background: #14110d; }
body.dark .rolepill.reseller { background: rgba(217, 178, 111, .14); border-color: rgba(217, 178, 111, .45); color: #e6c993; }

/* login (kartu gelap sudah keemasan, tinggal hangatkan warna dasarnya) */
body.dark .login.lg2 { background: #110e0a; }
body.dark .lg2c { background: #1d1812 !important; border-color: #6f5a3a !important; }
body.dark .lg2c .field { background: #120f0a; }
body.dark .lg2c .field input::placeholder { color: #85775f; }
body.dark .lg2alt, body.dark .lbsay, body.dark .lbsay::after { background: #261f16; }
body.dark .lg2f { background: #19140f; }
body.dark .ldiv::before, body.dark .ldiv::after { background: #3b3326; }
body.dark .sfxbtn { background: #261f16; }
body.dark .wmsg.th { background: #261f16; }

/* bagian-bagian lain yang masih memakai biru-ungu lama */
body.dark .stb.bot { background: #241e17; }
body.dark .tfile { background: rgba(243, 233, 210, .06); }

/* ---------- sisa warna lama (v105 putaran 2) ---------- */
/* Emas: kuning neon -> emas lembut, avatar ikut palet */
body.gold { --pop: #ebc66f; }
body.gold .avatar { background: linear-gradient(135deg, #e6c993, #b58a50) !important; color: #1a1210 !important; }
body.gold .icon-btn .badge, body.gold .pill.role, body.gold .pill.warn { background: var(--pop); }

/* swatch tema: bar aksen mengikuti tema masing-masing (selector lebih spesifik dari .themeopt .tp b + b) */
.themeopt .tp.tp-emas b + b { background: #c9a06a; }
.themeopt .tp.tp-dark b + b { background: #d9b26f; }
.themeopt .tp.tp-dark b { background: rgba(243, 233, 210, .28); }
.themeopt { white-space: nowrap; font-size: 13px; }

/* Malam Emas: buang glow merah/biru yang tersisa */
body.dark .icon-btn { box-shadow: none; }
body.dark .avatar { box-shadow: 0 6px 18px rgba(217, 178, 111, .25); }
body.dark .botfab { box-shadow: 0 8px 20px rgba(217, 178, 111, .3); }
body.dark .mdots .mdot { background: rgba(243, 233, 210, .22) !important; }
body.dark .mdots .mdot.on { background: #d9b26f !important; }
body.dark .upc .hd .ic { color: #d9b26f; }

/* ---------- Malam Emas: komponen yang di CSS dasar ditulis krem (#fffdf8) dan tidak pernah digelapkan ---------- */
body.dark .info { background: rgba(217, 178, 111, .07); border-color: rgba(217, 178, 111, .35); }
body.dark .info.teal { background: rgba(46, 226, 123, .06); border-color: rgba(46, 226, 123, .35); }
body.dark .pkg, body.dark .method, body.dark .rt, body.dark .dlpaste, body.dark .chatbar, body.dark .kv,
body.dark .cred .r, body.dark .payinfo, body.dark .drop, body.dark .tf, body.dark .cb {
  background: rgba(243, 233, 210, .05); border-color: rgba(217, 178, 111, .2); color: var(--text);
}
body.dark .meter { background: rgba(243, 233, 210, .1); }
body.dark .botchips .chip { background: #241e17; }
body.dark .pkg:hover { border-color: rgba(217, 178, 111, .45); }
body.dark .pkg.on, body.dark .rt.on { border-color: #d9b26f; background: linear-gradient(90deg, rgba(217, 178, 111, .16), rgba(217, 178, 111, .04)); box-shadow: 0 0 0 1px rgba(217, 178, 111, .35), 0 8px 26px rgba(217, 178, 111, .12); }
body.dark .pkg.on .ic { background: rgba(217, 178, 111, .25); color: #e6c993; }
body.dark .pkg.on .radio { background: #d9b26f; border-color: #d9b26f; box-shadow: 0 0 12px rgba(217, 178, 111, .5); }
body.dark .pkg.on .radio .i { color: #1a1210; }
body.dark textarea, body.dark .chatbar input { background: #120f0a; color: var(--text); border-color: rgba(217, 178, 111, .24); }
body.dark .formerr { background: rgba(255, 90, 95, .1); color: #ff8f93; }
body.dark .prof-hero { background: #1d1812; border-color: rgba(217, 178, 111, .16); box-shadow: none; }
body.dark .toast { background: #261f16; color: var(--text); }
body.dark .skel { background: linear-gradient(90deg, rgba(243, 233, 210, .04), rgba(243, 233, 210, .1), rgba(243, 233, 210, .04)); background-size: 200% 100%; }

/* ---------- Malam Emas putaran 3: tombol ikon, banner profil, tombol kirim ---------- */
body.dark .icon-btn, body.dark .topbar .icon-btn { border: 1px solid rgba(217, 178, 111, .25) !important; box-shadow: none !important; }
body.dark .icon-btn .badge { background: #d9b26f; color: #1a1210; border-color: #14110d; }
body.dark .pbanner, body.dark .pbox .pbanner { background: linear-gradient(135deg, #2a1c0e, #8a6a35 55%, #d9b26f) !important; }
body.dark .pbanner .btn, body.dark .pbanner .icon-btn { background: rgba(20, 17, 13, .65); color: #f3e9d2; border-color: rgba(243, 233, 210, .3); }
body.dark .cform .icon-btn.send { background: linear-gradient(180deg, #e6c993, #b88f4a) !important; color: #1a1210 !important; border-color: transparent !important; }
body.dark .usercard { background: rgba(243, 233, 210, .05); border-color: rgba(217, 178, 111, .2); }
body.dark .pill.off { background: rgba(255, 90, 95, .14); color: #ff8f93; border-color: rgba(255, 90, 95, .4); }
body.gold .pbanner, body.gold .pbox .pbanner { background: linear-gradient(135deg, #3a2a14, #a67c3d 55%, #e6c993) !important; }