/* =====================================================
   akun.css - halaman Akun (langkah 1, 2026-10-17)
   Gaya dari halaman Akun Ketua app BukaOlshop (tema gelap) + soft clay pastel (tema terang),
   sesuai purwarupa final yang disetujui pemilik. Dimuat setelah app.css.
   ===================================================== */
.acc { --a-cyan: #00f9ff; --a-primary: #9069e9; --a-border: rgba(144,105,233,.25); --a-surface: #0e0e1c;
  --a-line: linear-gradient(90deg, transparent, #9069e9 20%, #00f9ff 50%, #ec3899 80%, transparent); }
html[data-tema="terang"] .acc { --a-cyan: #6744a6; --a-primary: #6744a6; --a-border: #eee4ed; --a-surface: #fffcf9;
  --a-line: linear-gradient(90deg, transparent, #e6d3f0 15%, #e6d3f0 85%, transparent); }

/* kepala akun */
.acc-top { position: relative; margin: -10px -12px 14px; padding: 18px 16px 18px; background: linear-gradient(to bottom, rgba(6,6,15,.98), rgba(8,8,18,.96)); }
.acc-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--a-line); }
html[data-tema="terang"] .acc-top { background: linear-gradient(112deg, #d8c3fa, #f4d5ec 55%, #d2e6fb); border-radius: 0 0 26px 26px; border-bottom: 2px solid #fff;
  box-shadow: 0 5px 0 rgba(121,88,173,.12), 0 12px 20px rgba(91,58,136,.12); }
html[data-tema="terang"] .acc-top::after { display: none; }
.acc-head { display: flex; align-items: center; gap: 14px; }
.acc-ava { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff;
  font: 700 22px "Plus Jakarta Sans", sans-serif; background: linear-gradient(145deg, #8f74d0, #edb6d5); border: 2px solid var(--a-primary); box-shadow: none; }
html[data-tema="terang"] .acc-ava { font-family: "Plus Jakarta Sans", sans-serif; border: 3px solid #fff; box-shadow: 0 0 0 2px #bca7e9; }
.acc-hi { font-size: 12px; color: var(--z-text3); }
html[data-tema="terang"] .acc-hi { color: #594b77; }
.acc-name { margin: 1px 0 4px; font-size: 18px; font-weight: 700; color: var(--a-cyan); overflow-wrap: anywhere; }
.acc-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--a-primary); background: rgba(144,105,233,.15); border: 1px solid rgba(144,105,233,.6); }
html[data-tema="terang"] .acc-chip { background: #fff; border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.acc-chip .i3d { width: 14px; height: 14px; }

/* kartu Status VIP */
.vip-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; border-radius: 16px;
  background: linear-gradient(125deg, rgba(58,34,112,.55), rgba(92,60,168,.4) 60%, rgba(56,70,160,.55)), #4E318F url("../img/latar-vip-gelap.webp") center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.22); color: #fff; }
html[data-tema="terang"] .vip-card { background: linear-gradient(125deg, rgba(255,255,255,.35), rgba(255,255,255,.15)), #E9E0FB url("../img/latar-vip-terang.webp") center / cover no-repeat;
  border: 2px solid #fff; box-shadow: var(--z-clay); color: #1B1730; border-radius: 20px; }
.vip-card .ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.14); }
html[data-tema="terang"] .vip-card .ico { background: #fff; box-shadow: var(--z-clay-s); }
.vip-card .ico .i3d { width: 30px; height: 30px; }
.vip-card .body { flex: 1; min-width: 0; }
.vip-card small { display: block; font-size: 11px; opacity: .85; letter-spacing: .03em; }
.vip-card b { display: block; font-size: 16px; line-height: 1.25; }
.vip-card .sub { display: block; font-size: 11.5px; opacity: .9; margin-top: 1px; }
.vip-card .z-btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 12px; color: #08404D; border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(180deg, #E6FCFF, #67E8F9); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #2A9DB3; }

/* 3 kotak cepat */
.acc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.acc-tiles a, .acc-tiles button { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 6px 12px; text-align: center; text-decoration: none; cursor: pointer;
  border-radius: 14px; background: var(--a-surface); border: 1px solid var(--a-border); color: var(--z-text); font: inherit; }
html[data-tema="terang"] .acc-tiles a, html[data-tema="terang"] .acc-tiles button { border: 2px solid #fff; box-shadow: var(--z-clay); border-radius: 20px; }
html[data-tema="terang"] .acc-tiles > :nth-child(1) { background: linear-gradient(145deg, #d8c3fa, #cbb2f2); }
html[data-tema="terang"] .acc-tiles > :nth-child(2) { background: linear-gradient(145deg, #fbd6e5, #f4b7d1); }
html[data-tema="terang"] .acc-tiles > :nth-child(3) { background: linear-gradient(145deg, #ffebbd, #ffdaa8); }
.acc-tiles .ti { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(144,105,233,.12); border: 1px solid var(--a-border); }
html[data-tema="terang"] .acc-tiles .ti { background: linear-gradient(145deg, #fff, #f3eaf9); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.acc-tiles .ti .i3d { width: 26px; height: 26px; }
.acc-tiles b { font-size: 13px; }
.acc-tiles small { font-size: 11px; line-height: 1.3; color: var(--z-text3); }
html[data-tema="terang"] .acc-tiles small { color: #594b77; }

/* grup menu */
.acc-group { margin-bottom: 12px; overflow: hidden; border-radius: 14px; background: var(--a-surface); border: 1px solid var(--a-border); }
html[data-tema="terang"] .acc-group { background: linear-gradient(145deg, #fffcf9, #faf2fa); border: 2px solid #fff; box-shadow: var(--z-clay); border-radius: 20px; }
.acc-gh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font: 700 11.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .5px; text-transform: uppercase;
  color: var(--z-text3); background: rgba(144,105,233,.07); border-bottom: 1px solid var(--a-border); }
html[data-tema="terang"] .acc-gh { font-family: "Plus Jakarta Sans", sans-serif; background: #f6eff8; color: #594b77; }
.acc-gh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9069e9; }
.acc-item { position: relative; width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: none;
  color: var(--z-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.acc-item + .acc-item::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--a-line); opacity: .5; }
.acc-item .ii { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(144,105,233,.1); border: 1px solid var(--a-border); }
html[data-tema="terang"] .acc-item .ii { background: linear-gradient(145deg, #fff, #f3eaf9); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.acc-item .ii .i3d, .acc-item .ii svg { width: 24px; height: 24px; }
.acc-item .mb { flex: 1; min-width: 0; }
.acc-item b { display: block; font-size: 13px; }
.acc-item small { display: block; margin-top: 2px; font-size: 11px; color: var(--z-text3); }
.acc-item .val { font-weight: 700; color: var(--z-money); }
.acc-item .chev { flex: none; color: var(--z-text3); font-size: 16px; }
.acc-item:disabled { opacity: .6; cursor: default; } /* 2026-11-03 tombol Bersihkan Cache saat memproses */
/* 2026-11-03 kartu Notifikasi di HP (Akun > Talent Diikuti) */
.push-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; }
.push-card[hidden] { display: none; }
.push-teks { flex: 1; min-width: 0; }
.push-teks b { display: block; font-size: 13px; color: var(--z-text); }
.push-teks small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--z-text3); }
.push-btn { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #9069c9; background: #9069c9; color: #fff;
  font: 800 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.push-btn.mati { background: transparent; color: var(--z-accent); }
.push-btn[hidden] { display: none; }
.push-btn:disabled { opacity: .6; cursor: default; }
.push-btn:focus-visible { outline: 3px solid #7049b4; outline-offset: 2px; }
/* 2026-10-22 jumlah notifikasi belum dibaca di menu Notifikasi */
.acc-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px;
  font: 800 11px/1 "Plus Jakarta Sans", sans-serif; color: #fff; background: #ef4444; }
.acc-badge[hidden] { display: none; }
.acc-item:focus-visible { outline: 3px solid #7049b4; outline-offset: -3px; border-radius: 12px; }
.logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 28px); min-height: 46px; margin: 8px 14px 14px; border-radius: 12px; cursor: pointer;
  font: 700 12.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .5px; color: #ff4444; background: linear-gradient(90deg, rgba(255,68,68,.15), rgba(255,68,68,.08)); border: 1px solid rgba(255,68,68,.3); }
html[data-tema="terang"] .logout { font-family: "Plus Jakarta Sans", sans-serif; color: #C62828; background: linear-gradient(145deg, #fff0f2, #fbd9df); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.logout .i3d { width: 18px; height: 18px; }
.logout[disabled] { opacity: .6; cursor: default; }
.acc-foot { text-align: center; padding: 10px 0 0; font-size: 11px; line-height: 1.8; color: var(--z-text3); }

/* sub-halaman (riwayat, pembelian, level, password, perangkat, data akun) */
.sub-view { display: none; }
.acc[data-view="riwayat"] [data-sub="riwayat"], .acc[data-view="pembelian"] [data-sub="pembelian"], .acc[data-view="level"] [data-sub="level"],
.acc[data-view="password"] [data-sub="password"], .acc[data-view="perangkat"] [data-sub="perangkat"], .acc[data-view="data"] [data-sub="data"],
.acc[data-view="ikuti"] [data-sub="ikuti"] { display: block; } /* 2026-11-03 + Talent Diikuti */
.acc[data-view="kritik"] [data-sub="kritik"] { display: block; } /* 2026-11-05 + Kritik & Saran */
.acc:not([data-view="utama"]) .main-view { display: none; }
.list { overflow: hidden; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; }
.row + .row { border-top: 1px solid var(--a-border); }
.row .ri { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(144,105,233,.12); }
.row .ri .i3d { width: 20px; height: 20px; }
.row b { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.row small { display: block; font-size: 11px; color: var(--z-text3); margin-top: 1px; }
.row .amt { text-align: right; font-weight: 800; font-size: 12.5px; white-space: nowrap; color: var(--z-text); }
.row .amt.plus { color: #00d4aa; }
html[data-tema="terang"] .row .amt.plus { color: #0E7A47; }
.row .amt small { font-weight: 600; }
.empty { padding: 22px 16px; text-align: center; color: var(--z-text3); font-size: 12.5px; }
.more { display: flex; width: 100%; margin-top: 10px; }
.msg { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; min-height: 0; }
.msg.err { color: #ff6b6b; } .msg.ok { color: #00d4aa; }
html[data-tema="terang"] .msg.err { color: #C62828; } html[data-tema="terang"] .msg.ok { color: #0E7A47; }
.msg:empty { display: none; }

/* level */
.lv-hero { padding: 16px; display: grid; gap: 10px; }
.lv-badge { display: flex; align-items: center; gap: 12px; }
.lv-badge .i3d { width: 44px; height: 44px; }
.lv-badge b { font-size: 22px; }
.lv-badge small { display: block; font-size: 12px; color: var(--z-text3); }
.lv-bar { height: 12px; border-radius: 99px; overflow: hidden; background: rgba(144,105,233,.18); }
html[data-tema="terang"] .lv-bar { background: #eadcf5; border: 2px solid #fff; box-shadow: inset 2px 2px 4px rgba(165,139,181,.3); height: 14px; }
.lv-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8958e4, #d72fa9, #ff8dbb); transition: width .4s; }
.lv-next { font-size: 12.5px; color: var(--z-text2); }
.lv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lv-table th, .lv-table td { padding: 10px 14px; text-align: left; }
.lv-table th { font-size: 11px; color: var(--z-text3); font-weight: 700; }
.lv-table tr + tr td { border-top: 1px solid var(--a-border); }
.lv-table tr.on td { font-weight: 800; color: var(--z-accent); }
.lv-note { margin-top: 10px; }

/* formulir */
.form { padding: 16px; display: grid; gap: 12px; }
.fld { display: grid; gap: 5px; }
.fld label { font-size: 12px; font-weight: 700; color: var(--z-text2); }
.fld input { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; font: 600 14px "Plus Jakarta Sans", sans-serif; color: var(--z-text);
  background: #0b0b18; border: 1px solid rgba(124,92,191,.55); }
html[data-tema="terang"] .fld input { background: #fff; border: 1px solid rgba(103,68,166,.35); }
.fld input:focus-visible { outline: 3px solid #7049b4; outline-offset: 1px; }
.form .z-btn { width: 100%; }
.form .z-btn[disabled], .z-btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* perangkat */
.dev-ico { font-size: 18px; color: var(--z-accent); }
.dev-now { display: inline-flex; height: 18px; align-items: center; padding: 0 7px; margin-left: 4px; border-radius: 99px; font-size: 10px; font-weight: 800; vertical-align: 1px;
  color: #052e16; background: #4ade80; }
.confirm { margin-top: 10px; padding: 14px; display: grid; gap: 10px; }
.confirm .btns { display: flex; gap: 8px; }
.confirm .btns .z-btn { flex: 1; }
.danger, html[data-tema="terang"] .danger { color: #fff; border-color: #ff8a8a; background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1d1d; }

/* cari + filter (riwayat & pembelian) - 2026-10-18 */
.tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
.find { position: relative; display: block; }
.find .fi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--z-text3); pointer-events: none; }
.find input, .sel select { width: 100%; min-height: 44px; border-radius: 12px; font: 600 13px "Plus Jakarta Sans", sans-serif; color: var(--z-text);
  background: #0b0b18; border: 1px solid rgba(124,92,191,.55); }
.find input { padding: 0 12px 0 36px; }
html[data-tema="terang"] .find input, html[data-tema="terang"] .sel select { background: #fff; border: 1px solid rgba(103,68,166,.35); }
.sel { position: relative; display: block; }
.sel select { -webkit-appearance: none; appearance: none; min-width: 118px; padding: 0 32px 0 12px; cursor: pointer; }
.sel .fi { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--z-accent); }
.find input:focus-visible, .sel select:focus-visible { outline: 3px solid #7049b4; outline-offset: 1px; }

/* Pembelian Saya: pilihan Live / Aplikasi - 2026-10-18 langkah 2b */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 10px 0; border-radius: 14px; background: #0b0b18; border: 1px solid rgba(124,92,191,.55); }
html[data-tema="terang"] .seg { background: #fff; border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.seg button { min-height: 38px; border: 0; border-radius: 10px; cursor: pointer; font: 700 12.5px "Plus Jakarta Sans", sans-serif; color: var(--z-text2); background: transparent;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.seg.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Live / Aplikasi / Video (2026-10-21) */
.seg button.on { color: #fff; background: linear-gradient(180deg, #8c62d9, #5b3ba8); }
html[data-tema="terang"] .seg button.on { color: #38205f; background: linear-gradient(145deg, #d9c2ff, #b08bf4); }
.seg button:focus-visible { outline: 3px solid #7049b4; outline-offset: 1px; }
/* 2026-10-22 Fase 5 CR-012 (pemilik): "Unduh di App" / "Tonton di Video" = tombol kecil .z-btn.sm.ghost (area sentuh 44px dari app.css),
   di bawah harga, tidak lebih menonjol dari info transaksi */
.buy-dl { display: flex; width: max-content; margin: 6px 0 0 auto; font-size: 11px; padding: 0 10px; white-space: nowrap; }

/* ikon mata di kolom password */
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--z-text2); cursor: pointer; font-size: 18px; }
.eye:focus-visible { outline: 3px solid #7049b4; }

/* rasa ketuk: tanpa kotak biru bawaan Android, ada efek tekan yang jelas (temuan pemilik 2026-10-18) */
.acc-item, .acc-tiles > *, .z-back, .z-btn, .logout, .eye, .vip-card .z-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.acc-item { transition: background-color .12s; }
.acc-item:active { background: rgba(144,105,233,.14); }
.acc-tiles > *, .logout, .z-back { transition: transform .12s; }
.acc-tiles > *:active, .logout:active, .z-back:active { transform: scale(.97); }

.acc-toast { position: fixed; left: 50%; bottom: calc(var(--z-nav-h) + 26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: #fff; background: #43335f; box-shadow: 0 8px 25px rgba(48,32,74,.4); }
.acc-toast[hidden] { display: none; }
.skeleton { height: 120px; border-radius: 16px; background: rgba(144,105,233,.1); }
.lv-tablebox { margin-top: 12px; }

/* 2026-10-21 malam pemilik: kartu Status VIP (mode gelap) gradasi toska tua -> hitam (toska = warna VIP/uang
   di aturan desain; emas & hitam polos ditolak). Tombol Join VIP berikon mahkota 3D, sudut lebih kotak,
   gradasi ungu -> hitam. Mode terang tidak berubah. */
html:not([data-tema="terang"]) .vip-card { background: linear-gradient(120deg, #0f3d46 0%, #0b252b 48%, #0c0f10 100%); border-color: rgba(144,105,233,.3); }
html:not([data-tema="terang"]) .vip-card .ico { background: rgba(255,255,255,.07); }
html:not([data-tema="terang"]) .vip-card .z-btn { min-height: 38px; padding: 0 12px; gap: 6px; border-radius: 8px; font-size: 12px; color: #fff; text-shadow: none;
  background: linear-gradient(135deg, #7c5cbf 0%, #3a2a66 45%, #0c0c0e 100%); border: 1px solid rgba(144,105,233,.55); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
html:not([data-tema="terang"]) .vip-card .z-btn:active { transform: scale(.97); box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.vip-card .z-btn .i3d { width: 16px; height: 16px; }
/* kepala akun, kolom isian, pilihan: hitam netral (dulu #0b0b18 kebiruan, tepi ungu tebal) */
html:not([data-tema="terang"]) .acc-top { background: linear-gradient(to bottom, rgba(9,9,11,.98), rgba(12,12,14,.96)); }
html:not([data-tema="terang"]) .fld input, html:not([data-tema="terang"]) .find input, html:not([data-tema="terang"]) .sel select,
html:not([data-tema="terang"]) .seg { background: #111113; border-color: rgba(144,105,233,.3); }
html:not([data-tema="terang"]) .acc-toast { background: #27272a; box-shadow: 0 8px 25px rgba(0,0,0,.45); }
/* panel luar: hitam netral + garis ungu tipis (pemilik setuju 2026-10-21 malam: batas panel jelas di latar hitam) */
html:not([data-tema="terang"]) .acc { --a-surface: #111113; --a-border: rgba(144,105,233,.3); }
html:not([data-tema="terang"]) .acc-tiles .ti, html:not([data-tema="terang"]) .acc-item .ii, html:not([data-tema="terang"]) .row .ri { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
html:not([data-tema="terang"]) .acc-item:active { background: rgba(255,255,255,.06); }
html:not([data-tema="terang"]) .skeleton { background: rgba(255,255,255,.06); }

/* ---------- 2026-10-22 Fase 5 CR-008 (pemilik): kartu Riwayat / Pembelian / Bantuan mendekati persegi ----------
   tinggi minimal = lebar kartu (kolom .z-wrap maks 620px - jarak tepi 24px - 2 celah 10px, dibagi 3). Bukan aspect-ratio:
   kartu ber-aspect-ratio tidak ikut disamakan tingginya oleh grid (uji 2026-10-22: Pembelian 113px, lainnya 105px).
   Isi yang lebih panjang tetap boleh memanjangkan kartu (ketiganya ikut sama tinggi), jadi label & ikon tidak terpotong. */
.acc-tiles a, .acc-tiles button { min-height: calc((min(100vw, 620px) - 44px) / 3); align-content: center; gap: 4px; padding: 8px 6px; }
/* 2026-10-23 revisi pemilik: jarak ikon-judul-keterangan lebih rapat, baris teks tidak renggang, teks tidak menyentuh tepi kartu */
.acc-tiles a, .acc-tiles button { gap: 2px; padding: 8px; }
.acc-tiles .ti { margin-bottom: 4px; }
.acc-tiles b { line-height: 1.2; }
.acc-tiles small { line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }
.acc-tiles .ti { width: 40px; height: 40px; }
.acc-tiles .ti .i3d { width: 24px; height: 24px; }

/* 2026-10-23 Fase 6 CR-021: tombol "Coba lagi" di pesan gagal memuat */
.msg .coba-lagi { margin: 6px auto 0; }
.msg.err:has(.coba-lagi) { display: grid; justify-items: center; }

/* 2026-10-31 pemilik: ikon Pusat Bantuan = emoji pin (ukuran setara ikon 3D) */
.acc-item .ii-emoji { font-size: 21px; line-height: 1; }

/* 2026-11-02 pemilik: lencana VIP di samping Lv + gambar VIP CARD (dulu kartu STATUS VIP .vip-card) */
.vip-chip { text-decoration: none; color: inherit; margin-left: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vip-chip.aktif { color: #7a4a00; background: linear-gradient(180deg, #fff6d6, #ffe59a); border-color: #f5d06b; }
html:not([data-tema="terang"]) .vip-chip.aktif { color: #ffe08a; background: rgba(245, 197, 66, .14); border-color: rgba(245, 197, 66, .45); }
.vip-chip .i3d { width: 14px; height: 14px; object-fit: contain; }
.vip-banner { display: block; margin: 0 0 12px; border-radius: 18px; overflow: hidden; line-height: 0; -webkit-tap-highlight-color: transparent; }
.vip-banner[hidden] { display: none; }
.vip-banner img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 227; }
.vip-banner:active { transform: scale(.985); }
.vip-banner .vb-gelap { display: none; }
html:not([data-tema="terang"]) .vip-banner .vb-terang { display: none; }
html:not([data-tema="terang"]) .vip-banner .vb-gelap { display: block; }

/* 2026-11-03 Talent Diikuti: foto talent bulat di kolom ikon */
.row .ri.ik-foto { overflow: hidden; border-radius: 50%; background: none; }
.row .ri.ik-foto img { width: 34px; height: 34px; object-fit: cover; }
#ikList[hidden] { display: none; }
/* 2026-11-05 pemilik: Kritik & Saran */
.fld textarea { width: 100%; min-height: 120px; padding: 10px 12px; border-radius: 12px; resize: vertical; box-sizing: border-box;
  font: 500 14px/1.5 "Plus Jakarta Sans", sans-serif; color: var(--z-text); background: #111113; border: 1px solid rgba(144,105,233,.3); }
html[data-tema="terang"] .fld textarea { background: #fff; border: 1px solid rgba(103,68,166,.35); }
.fld textarea:focus-visible { outline: 3px solid #7049b4; outline-offset: 1px; }
.kr-hitung { justify-self: end; font-size: 11px; color: var(--z-text3); }
.kr-label { font-size: 12px; font-weight: 700; color: var(--z-text2); }
.kr-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.kr-file { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; cursor: pointer;
  font: 700 13px "Plus Jakarta Sans", sans-serif; color: var(--z-accent); border: 1px dashed rgba(144,105,233,.6); }
.kr-input:focus-visible + .kr-preview, .kr-file:focus-within { outline: 3px solid #7049b4; outline-offset: 1px; }
.kr-preview { max-width: 100%; max-height: 260px; border-radius: 12px; object-fit: contain; justify-self: start; }
.kr-hapus { min-height: 36px; }
.kr-cek { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; font-weight: 600; color: var(--z-text2); }
.kr-cek input { width: 18px; height: 18px; accent-color: #7049b4; }
/* 2026-11-05 pemilik (revisi ke-2): kotak pemberitahuan lebih rapi - kotak bergaris tepi + garis aksen di sisi kiri, huruf biasa */
html .acc-toast, html:not([data-tema="terang"]) .acc-toast { width: max-content; max-width: min(calc(100% - 32px), 420px); padding: 12px 16px 12px 14px; border-radius: 14px;
  border: 1px solid rgba(144,105,233,.55); border-left: 4px solid #9069c9; background: #1b1724; color: #f4f2fa;
  font: 600 13.5px/1.45 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-tema="terang"] .acc-toast { background: #fff; color: #2b2140; border-color: rgba(103,68,166,.35); border-left-color: #6744a6; box-shadow: 0 10px 28px rgba(48,32,74,.18); }