/* == BERKAS TURUNAN (dihasilkan scripts/bangun-tema-turunan.js, jangan disunting tangan) ==
   Tema topbos = badan hud.css + web/tema-sumber/topbos.lapisan.css.
   Sunting salah satu sumbernya, lalu jalankan: npm run tema:bangun */
/* == JEMBATAN TOKEN (dihasilkan storefrontTema, jangan disunting tangan) == */
html[data-tema="topbos"]{
  --t-bg:var(--bg,#f4f6fa);--t-frame:color-mix(in srgb,var(--bg,#f4f6fa) 82%,var(--txt,#162033));
  --t-surface:var(--card,#fff);--t-field:color-mix(in srgb,var(--card,#fff) 95%,var(--txt,#162033));
  --t-fill:color-mix(in srgb,var(--card,#fff) 92%,var(--txt,#162033));--t-line:var(--line,#dfe5ee);
  --t-text:var(--txt,#162033);--t-muted:var(--muted,#667085);--t-subtle:color-mix(in srgb,var(--muted,#667085) 70%,var(--card,#fff));
  --t-on-bg:var(--txt,#162033);--t-on-bg-muted:var(--muted,#667085);
  --t-on-bg-link:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent:var(--brand,#4f7cff);--t-accent-d:var(--brand-d,#3959be);--t-on-accent:#fff;
  --t-accent-text:color-mix(in srgb,var(--brand,#4f7cff) 78%,var(--txt,#162033));
  --t-accent-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --t-accent-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee));
  --t-deep:color-mix(in srgb,var(--brand-d,#3959be) 30%,#0b1224);--t-deep-2:color-mix(in srgb,var(--brand,#4f7cff) 38%,#101a33);
  --t-on-deep:#fff;--t-on-deep-muted:rgba(255,255,255,.74);--t-scrim:rgba(6,8,14,.64);
  --t-ok:#22a95b;--t-ok-d:#13804a;--t-ok-soft:var(--ok-bg,#e9f9ef);--t-ok-text:var(--ok-tx,#0b7a3b);
  --t-err:#e5534b;--t-err-d:#a8261e;--t-err-soft:var(--err-bg,#fdecec);--t-err-text:var(--err-tx,#b42318);
  --t-err-line:color-mix(in srgb,var(--err-tx,#b42318) 30%,var(--card,#fff));
  --t-warn-soft:color-mix(in srgb,var(--gold,#f6b60c) 16%,var(--card,#fff));--t-warn-line:color-mix(in srgb,var(--gold,#f6b60c) 42%,var(--card,#fff));
  --t-warn-text:color-mix(in srgb,var(--gold-d,#d98e00) 62%,var(--txt,#162033));
  --t-gold:var(--gold,#f6b60c);--t-gold-d:var(--gold-d,#d98e00);--t-gold-soft:color-mix(in srgb,var(--gold,#f6b60c) 34%,var(--card,#fff));
  --t-gold-text:color-mix(in srgb,var(--gold-d,#d98e00) 85%,var(--txt,#162033));--t-on-gold:#2f2200;--t-promo:#d92d83;
  --t-font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--t-font-display:var(--t-font);
}
/* Kontrol formulir tidak mewarisi huruf; tema berhuruf sendiri butuh ini. */
html[data-tema="topbos"] :is(input,select,textarea){font-family:inherit}
/* Kaki identitas duduk di atas kanvas halaman, bukan di atas kartu, jadi
   aksennya memakai warna tautan-di-kanvas: warna merek apa adanya nyaris
   hilang di tema berkanvas gelap (Domino, Arena, Nebula). */
html[data-tema="topbos"] .ident-foot{--ident-accent:var(--t-on-bg-link)!important}
/* Baris tautan kebijakan juga duduk di kanvas, bukan di kartu. */
html[data-tema="topbos"] .ident-kebijakan a{color:var(--t-on-bg-muted)}
html[data-tema="topbos"] .ident-kebijakan a:hover{color:var(--t-on-bg-link)}
/* Cangkang halaman blog dan kebijakan: gayanya inline dan tidak memuat
   style.css, jadi permukaan dan teksnya dipetakan ke token di sini —
   sekali untuk semua tema. Isi artikel diberi panel supaya tetap terbaca
   di atas kanvas bertekstur atau gelap. */
html[data-tema="topbos"] body{color:var(--t-on-bg)}
html[data-tema="topbos"] :is(.b-title,.b-art-title,.b-lead,.b-date,.b-crumb,.b-pager-info,.b-foot){color:var(--t-on-bg)}
html[data-tema="topbos"] .b-eyebrow{background:var(--t-accent-soft);color:var(--t-accent-text)}
html[data-tema="topbos"] :is(.b-lead,.b-date,.b-pager-info,.b-crumb,.b-foot){color:var(--t-on-bg-muted)}
html[data-tema="topbos"] :is(.b-card,.b-pager a){background:var(--t-surface);border-color:var(--t-line);color:var(--t-text)}
html[data-tema="topbos"] .b-card a{color:inherit}
html[data-tema="topbos"] .b-body{padding:16px 18px;border:1px solid var(--t-line);border-radius:16px;
  background:var(--t-surface);color:var(--t-text)}
html[data-tema="topbos"] .b-body :is(h2,h3,h4,strong,b){color:var(--t-text)}
html[data-tema="topbos"] .b-body a{color:var(--t-accent-text)}
html[data-tema="topbos"] :is(.b-more,.b-card:hover h2,.b-pager a){color:var(--t-accent-text)}
html[data-tema="topbos"] :is(.b-foot a,.b-crumb a:hover){color:var(--t-on-bg-link)}
html[data-tema="topbos"] .b-crumb a{color:var(--t-on-bg-muted)}
html[data-tema="topbos"] .b-body blockquote{border-color:var(--t-accent)}
html[data-tema="topbos"]{--brand-soft:color-mix(in srgb,var(--brand,#4f7cff) 12%,var(--card,#fff));
  --brand-line:color-mix(in srgb,var(--brand,#4f7cff) 32%,var(--line,#dfe5ee))}
/* Huruf tema ikut ke halaman luar: tema bukan hanya warna. */
html[data-tema="topbos"] body{font-family:var(--t-font)}
html[data-tema="topbos"] :is(.b-brand,.b-title,.b-art-title,.b-card h2,.b-body h2,.b-body h3){font-family:var(--t-font-display)}
/* == /JEMBATAN TOKEN == */

/* ══ Tema HUD — signature TokoMD (eksklusif, lihat hanyaDomain di storefrontTema) ══
   Antarmuka taktis minimal: grafit + putih, garis rambut, siku putih di sudut
   panel, label kapital berjarak lebar, penanda berlian. Aturan warna:
   putih = aksi umum dan pilihan aktif; warna MEREK domain (biru TokoMD) hanya
   untuk tombol yang memindahkan uang (blok AKSEN MEREK di akhir berkas);
   mint = berhasil, amber = menunggu/tier/poin, merah muda = galat.
   Siku digambar sebagai LAPISAN LATAR ber-origin border-box (--h-siku), bukan
   ::before: tidak bentrok dengan pseudo-elemen bawaan dan tidak ikut
   terpotong overflow:hidden. Semua sudut persegi. */

@font-face{font-family:"Tomorrow";font-style:normal;font-weight:500;font-display:swap;src:url('huruf/tomorrow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tomorrow";font-style:normal;font-weight:600;font-display:swap;src:url('huruf/tomorrow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url('huruf/hanken-grotesk-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Palet & token ─────────────────────────────────────────────────────── */
html[data-tema="topbos"]{
  --gold:#dcb576;--gold-d:#bb944f;
  --bg:#11151d;--card:#171c26;--txt:#dde2ea;--muted:#949cab;--line:#2b3140;
  --ok-bg:#12211b;--ok-tx:#93dcb5;--err-bg:#2a181b;--err-tx:#f08a8a;
  --t-bg:#11151d;--t-frame:#0c0f16;--t-surface:#171c26;--t-field:#0e1219;--t-fill:#1d2330;--t-line:#2b3140;
  --t-text:#dde2ea;--t-muted:#949cab;--t-subtle:#7f8796;
  --t-accent:var(--h-putih);--t-accent-d:#cfd6e2;--t-accent-text:var(--h-putih);--t-accent-soft:#232a38;--t-accent-line:#3b4353;--t-on-accent:#11151d;
  --t-deep:#0e1219;--t-deep-2:#171c26;--t-on-deep:#dde2ea;--t-on-deep-muted:#949cab;--t-scrim:rgba(5,7,12,.84);
  --t-ok:#93dcb5;--t-ok-d:#57b389;--t-ok-soft:#12211b;--t-ok-text:#93dcb5;
  --t-err:#f08a8a;--t-err-d:#bd5757;--t-err-soft:#2a181b;--t-err-line:#572d31;--t-err-text:#f08a8a;
  --t-warn-soft:#241f16;--t-warn-line:#53462c;--t-warn-text:#dcb576;
  --t-gold:#dcb576;--t-gold-d:#bb944f;--t-gold-soft:#282218;--t-gold-text:#dcb576;--t-on-gold:#1a1408;--t-promo:#f06a84;
  --t-font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--t-font-display:"Tomorrow","Arial Narrow",system-ui,sans-serif;
  /* Teks dan tautan yang duduk langsung di kanvas (blog, kebijakan, kaki identitas). */
  --t-on-bg:#dde2ea;--t-on-bg-muted:#949cab;--t-on-bg-link:var(--h-aksen);
  --h-disp:"Tomorrow","Arial Narrow",system-ui,sans-serif;
  /* Grafit bersemburat biru: warna khas TokoMD masuk lewat nada abu-abunya,
     bukan lewat bidang berwarna baru. */
  --h-g0:#0e1219;--h-g1:#11151d;--h-g2:#171c26;--h-g3:#1d2330;
  --h-panel:rgba(23,28,38,.84);--h-field:rgba(0,0,0,.26);
  --h-line:rgba(214,226,255,.13);--h-line-2:rgba(214,226,255,.24);
  /* Aksen: penanda berlian, strip kepala halaman, pendar. */
  --h-aksen:#8fb6ff;
  /* Bidang terang: dipakai untuk teks dan label, BUKAN lagi untuk tombol dan
     pilihan aktif — sejak 24 Sep 2026 peran itu dipegang biru merek. Putih
     pekat sendiri sudah diredupkan karena menyilaukan di layar lebar. */
  --h-putih:#e4e8ee;
  /* Biru TokoMD di atas grafit: garis dan ikon memakai nada muda supaya tetap
     terbaca, bidangnya memakai var(--brand) apa adanya. */
  --h-biru:#7ea4ff;--h-biru-teks:#bed2ff;--h-biru-terang:#eaf0ff;
  --h-biru-tipis:color-mix(in srgb,var(--brand) 20%,transparent);
  --h-biru-cincin:color-mix(in srgb,var(--brand) 55%,transparent);
  --h-mint:#93dcb5;--h-amber:#dcb576;--h-rose:#f08a8a;
  --h-siku:
    linear-gradient(var(--h-biru),var(--h-biru)) left top/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) left top/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) right top/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) right top/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) left bottom/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) left bottom/1.5px 12px no-repeat border-box,
    linear-gradient(var(--h-biru),var(--h-biru)) right bottom/12px 1.5px no-repeat border-box,linear-gradient(var(--h-biru),var(--h-biru)) right bottom/1.5px 12px no-repeat border-box;
  --h-kanvas:
    radial-gradient(90% 340px at 50% -60px,rgba(120,160,255,.08),rgba(255,255,255,0) 70%) no-repeat,
    repeating-linear-gradient(90deg,rgba(214,226,255,.022) 0 1px,transparent 1px 48px),
    #11151d;
}
html[data-tema="topbos"] body{color:var(--txt);background:var(--h-kanvas);-webkit-font-smoothing:antialiased}
html[data-tema="topbos"] :is(input,select,textarea){color:var(--txt);color-scheme:dark}
html[data-tema="topbos"] ::selection{background:rgba(255,255,255,.3);color:var(--h-putih)}

/* ── Pola bersama ──────────────────────────────────────────────────────────
   :where() = kekhususan nol (cukup html[data-tema] = 0,1,1) supaya aturan per
   komponen di bawah tetap bisa menimpanya. :is() hanya bila aturan dasar yang
   harus dikalahkan lebih khusus. */
/* Huruf label: Tomorrow kapital berjarak lebar */
html[data-tema="topbos"] :where(.card h2,.page-head h1,.pay-page h3,.pay-kicker,.pay-invoice-label,.pay-invoice-product,.pay-step,.order-ticket-top,.track-overline,.track-status-head strong,.track-ticket span,.track-detail-grid span,.track-buyer span:not(.track-avatar),.page-back,.info-more,.section-kicker,.summary-assurance,.checkout-benefits-head>span,.external-pay-head>span,.tabs button,.tabs a,.id-mode button,.player-identity strong,.player-identity-actions button,.tier-chip,.account-meters span,.wallet-pass-balance span,.checkin-card strong,.spender-head h2,.spender-periods button,.wallet-topup-head h4,.wallet-topup-steps,#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-subhead strong,.account-subhead button,.account-filter label>span,.transaction-entry>button,.entry-status,.account-more,.wallet-pass-btn,.wallet-topup-record button,.track-nota-link,.refund-opt button,.login-card .login-back,.profile-editor button,.order-ticket-actions button,.seo-eyebrow,.seo-block-label,.seo-return small,.ident-segel>span,.paycard h3,.tg-miniapp-install-card h3,.bulk-confirm-actions button,.tg-miniapp-install-actions button,.event-popup-cta,.flash-sale-head h3,.promo-copy b,.benefit-card b,.account-menu a,.account-menu button,.bnav a,.btn-full,.nota-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.pay-nota-link,.account-session-note,.pwa-pasang-hdr,.flash-ticket,.promo-badge,.bulk-secondary,.bulk-hist,.b-back){font-family:var(--h-disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
/* Tombol umum: putih pekat berteks grafit (ID dasar butuh :is berkekhususan ID) */
html[data-tema="topbos"] :is(#check-btn,#track-go,#bulk-preview-btn){border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);font-family:var(--h-disp);font-weight:600;letter-spacing:.2em;text-transform:uppercase;box-shadow:none}
html[data-tema="topbos"] :where(.btn-full,.nota-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.profile-save,.tg-miniapp-install-confirm,.event-popup-cta,.bulk-confirm-yes){border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);box-shadow:none}
html[data-tema="topbos"] :is(#check-btn,#track-go,#bulk-preview-btn,.btn-full,.nota-btn,.seo-toggle,.checkin-card button,.track-ticket button,.profile-save,.tg-miniapp-install-confirm,.event-popup-cta):hover{background:#dfe3e8}
html[data-tema="topbos"] :is(#buy-btn,#check-btn,#track-go,.wallet-topup-submit,.checkin-card button,.tg-miniapp-install-confirm,.btn-full):disabled{background:transparent;color:#737a84;box-shadow:inset 0 0 0 1px var(--h-line);opacity:1}
html[data-tema="topbos"] :is(#check-btn,#track-go,#buy-btn,#bulk-preview-btn,.btn-full,.nota-btn,.tabs button,.tabs a,.seo-toggle,.prod,.paym,.benefit-card):focus-visible{outline:2px solid var(--h-putih);outline-offset:2px}
/* Pilihan aktif: putih pekat */
html[data-tema="topbos"] :is(.tabs button.active,.tabs a.active,.id-mode button.is-on,.spender-periods button[aria-selected="true"],.wallet-topup-steps .active span,.pay-step.active .pay-step-dot,.checkin-days li.today:not(.done)>b){border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1);box-shadow:none}
/* Panel bersiku */
html[data-tema="topbos"] :where(.card,.checkin-card,.account-spender-card,.wallet-topup-card,.player-pass,.account-rank,.track-order-card,.seo-artikel){border:1px solid var(--h-line);border-radius:0;background:var(--h-siku),var(--h-panel);box-shadow:none}
/* Panel tanpa siku: daftar menu dan kartu CS */
html[data-tema="topbos"] :where(.account-menu,.cs-card){border:1px solid var(--h-line);border-radius:0;background:var(--h-panel);box-shadow:none}
/* Kartu pilihan kecil (metode, saldo/poin, preset) */
html[data-tema="topbos"] :where(.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button){border:1px solid var(--h-line);border-radius:0;background:rgba(0,0,0,.28);color:var(--txt);box-shadow:none;transform:none}
html[data-tema="topbos"] :where(.prod,.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button):hover{border-color:var(--h-line-2);transform:none}
html[data-tema="topbos"] :is(.benefit-card.active,.paym.active,.wallet-topup-methods button.active,.wallet-topup-presets button[aria-pressed="true"]){border-color:var(--h-putih);background:rgba(255,255,255,.08);color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
/* Ikon: kotak bergaris */
html[data-tema="topbos"] :where(.benefit-icon,.checkin-mark,.spender-trophy,.wallet-pass-mark,.track-avatar,.bulk-done-mark,.tg-miniapp-install-mark,.seo-return b,.mutation-sign,.spender-avatar,.cs-avatar){border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);box-shadow:none;font-family:var(--h-disp)}
/* WAJIB: display di aturan tema ini mengalahkan [hidden] bawaan peramban.
   Elemen yang disembunyikan app.js lewat atribut hidden harus tetap hilang. */
html[data-tema="topbos"] :is(.buyer,.page-back,.tier-chip,.section-kicker,.pay-kicker,.pay-nota-link,.track-nota-link,.email-help)[hidden]{display:none}
/* Sudut persegi untuk kotak kecil lain */
html[data-tema="topbos"] :where(input,select,textarea,.account-filter select,.bulk-field select,.bulk-field textarea,.email-help,.checkout-benefits,.pay-invoice,.pay-state-head,.order-ticket,.pay-email-note,.va,.track-buyer,.track-detail-grid,.refund-box,.track-error,.track-security,.btn-outline,.nota-btn-sekunder,.info-promo-list img,.info-leaderboard-list img,.account-loading,.account-error,.profile-editor,.avatar-picker,.avatar-options button,.wallet-topup-input,.wallet-topup-quote>p,.wallet-topup-error,.wallet-topup-record,.wallet-topup-instruction,.wallet-topup-active,.wallet-topup-breakdown,.account-entry,.account-subhead button,.account-more,.spender-list li,.spender-periods,.bulk-secondary,.bulk-summary,.bulk-rows-report,.bulk-warn,.bulk-confirm-detail,.bulk-confirm-actions button,.tg-miniapp-install-actions button,.seo-jelajah,.seo-route,.seo-block,.seo-faq,.ident-mark,.bantuan-avatar,.track-status-icon,.pay-state-symbol,.close,.paycard,.tg-miniapp-install-card,.event-popup-card,.event-popup-body,.flash-sale,.st-badge,.bulk-chip,.bulk-no,.bulk-hist,.entry-status,.transaction-entry>button,.track-nota-link,.refund-opt button,.wallet-pass-btn,.wallet-pass-btn b,.pay-status){border-radius:0}

/* ── Header: kaca grafit + garis rambut ────────────────────────────────── */
html[data-tema="topbos"] .hdr{color:var(--txt);background:rgba(14,16,19,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--h-line);box-shadow:none}
/* Tinggi kepala dipaku, sama dengan bilah merek blog & kebijakan: tanpa ini
   tombol kembali (34px) di bilah blog membuatnya 4px lebih tinggi dari kepala
   beranda. 54px isi + 1px garis bawah; desktop menimpanya jadi 72px. */
html[data-tema="topbos"] .hdr{height:55px;padding-block:0}
html[data-tema="topbos"] .b-top-in{height:54px;padding-block:0}
/* Logo persegi di KIRI, di depan logo nama; pojok kanan milik segel Mitra resmi. */
html[data-tema="topbos"] .brand{justify-content:flex-start;gap:10px}
html[data-tema="topbos"] .brand img#brand-logo{order:0;margin-left:0;border-radius:0;box-shadow:none}
/* Logo nama tokomd (gambar putih) diwarnai biru merek #4f7cff lewat rantai filter. */
html[data-tema="topbos"] .brand img#brand-wordmark{margin-right:0;filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
/* Rantai filter di atas hanya CADANGAN: Safari iPhone menghitungnya lain dan
   biru TokoMD tampil UNGU. Bila server menulis --logo-nama (kepala, bilah
   blog, kaki), logo nama digambar sebagai mask berisi warna merek — warnanya
   persis sama di semua browser dan ikut Warna utama domain. Isi gambarnya
   digeser keluar kotak (object-position), jadi yang tampak hanya latar
   berwarna merek yang dipotong mengikuti bentuk logo. */
html[data-tema="topbos"] :is(.brand img#brand-wordmark,.b-brand img.b-wordmark,.ident-wordmark)[style*="--logo-nama"]{
  filter:none;object-position:-99999px 0;background:var(--brand);
  -webkit-mask:var(--logo-nama) center/contain no-repeat;mask:var(--logo-nama) center/contain no-repeat}
/* Logo nama kaki rata kiri (object-position left center di style.css). */
html[data-tema="topbos"] .ident-wordmark[style*="--logo-nama"]{-webkit-mask-position:left center;mask-position:left center}
html[data-tema="topbos"] #brand-name{font:600 16px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] .hdr-back{width:34px;height:34px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] .hdr-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="topbos"] .hdr .link{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--txt)}
/* Slot aksi kepala kosong = tersembunyi, sama seperti Klasik (segel "Mitra resmi"
   dekoratif yang dulu mengisinya dibuang 28 Sep 2026 atas permintaan Taka). */
html[data-tema="topbos"] .pwa-pasang-hdr{height:30px;padding:0 10px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:10px;line-height:1;letter-spacing:.14em}
html[data-tema="topbos"] .pwa-pasang-hdr:hover{background:rgba(255,255,255,.08)}
/* Notifikasi "Pasang aplikasi". Gayanya disuntik pwa/install.js sebagai kartu
   PUTIH ala heads-up Android, dan suntikan itu masuk ke <head> BELAKANGAN —
   tetapi aturan di sini tetap menang karena berawalan html[data-tema="topbos"]
   (0,2,1) melawan .pwa-pasang polos (0,1,0). Jadi tema lain tidak ikut
   berubah sama sekali: kartu putihnya tetap seperti sekarang.
   Gaya HUD (siku, nama kapital Tomorrow, sudut 4px) dengan susunan
   NOTIFIKASI SISTEM (±104px, dulu ±146px dengan baris tombol sendiri):
     [ikon] TOKOMD · sekarang ............ [×]
     Pasang di layar utama   [PASANG APLIKASI]
     Buka toko langsung dari ikon, tanpa ...
                  ───  (pegangan: seret ke atas untuk menutup)
   Pembungkus meta/teks/aksi dibuat display:contents supaya isinya jadi sel
   grid tanpa mengubah markup install.js. "Nanti" dibuang (× dan seret sudah
   menutup). Di iOS/manual tanpa tombol, judul memakai lebar penuh dan
   kalimat petunjuknya tetap di baris ketiga. */
html[data-tema="topbos"] .pwa-pasang{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;padding:9px 8px 15px 13px;border:1px solid var(--h-line-2);border-radius:4px;background:var(--h-siku),rgba(17,21,29,.95);color:var(--txt);box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
/* Pegangan seret di tepi bawah: penanda bahwa ini notifikasi yang bisa
   disingkirkan ke atas, bukan kotak dialog yang menunggu jawaban. */
html[data-tema="topbos"] .pwa-pasang::after{content:"";position:absolute;left:50%;bottom:6px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:var(--h-line-2)}
html[data-tema="topbos"] :is(.pwa-pasang-meta,.pwa-pasang-teks,.pwa-pasang-aksi){display:contents}
html[data-tema="topbos"] .pwa-pasang-ikon{grid-column:1;grid-row:1;width:20px;height:20px;margin-right:8px;border-radius:4px;box-shadow:0 0 0 1px var(--h-line-2);font-size:10px}
html[data-tema="topbos"] .pwa-pasang-ikon:has(img){background:#0e1219}
html[data-tema="topbos"] .pwa-pasang-ikon img{object-fit:contain}
html[data-tema="topbos"] .pwa-pasang-app{grid-column:2;grid-row:1;color:var(--h-biru-teks);font-family:var(--h-disp);font-weight:600;letter-spacing:.14em}
html[data-tema="topbos"] .pwa-pasang-waktu{grid-column:3;grid-row:1;justify-self:start;margin-left:6px;color:var(--muted);font-family:var(--h-disp);letter-spacing:.1em}
html[data-tema="topbos"] .pwa-pasang-tutup{grid-column:4;grid-row:1;justify-self:end;width:26px;height:26px;border-radius:4px;color:var(--muted)}
html[data-tema="topbos"] .pwa-pasang-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="topbos"] .pwa-pasang-judul{grid-column:1/4;grid-row:2;margin-top:4px;color:var(--h-putih);font-family:var(--t-font);font-weight:700;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tema="topbos"] .pwa-pasang:not(:has(.pwa-pasang-btn)) .pwa-pasang-judul{grid-column:1/-1}
html[data-tema="topbos"] .pwa-pasang-sub{grid-column:1/-1;grid-row:3;margin-top:2px;color:var(--muted)}
html[data-tema="topbos"] .pwa-pasang-sub b{color:var(--h-putih);font-weight:700}
html[data-tema="topbos"] .pwa-pasang-btn{grid-column:4;grid-row:2;margin:4px 0 0 12px;padding:7px 12px;border:1px solid var(--brand);border-radius:4px;background:var(--brand);color:var(--brand-on,#fff);font-family:var(--h-disp);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;box-shadow:none}
html[data-tema="topbos"] .pwa-pasang-nanti{display:none}
html[data-tema="topbos"] .pwa-pasang :focus-visible{outline-color:var(--h-putih)}

/* ── Artikel terbaru: kolom kiri Top Up desktop ─────────────────────────
   Server hanya mengisinya untuk tema HUD (kartuArtikelTopup di server.js),
   meniru susunan /blog: yang terbaru jadi sorotan bergambar besar, sisanya
   baris ringkas bergambar 112px. Di bawah 900px halaman satu kolom, jadi
   kartu ini disembunyikan (gambar lazy-nya pun tidak diunduh); blok desktop
   menyalakannya kembali dan menaruhnya di bawah kartu Masukan ID. */
html[data-tema="topbos"] .topup-artikel{display:none}
html[data-tema="topbos"] .ta-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
html[data-tema="topbos"] .ta-kepala h2{margin:0}
html[data-tema="topbos"] .ta-semua{color:var(--h-biru-teks);font:600 10px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
html[data-tema="topbos"] :is(.ta-sorotan,.ta-daftar a){display:block;color:inherit;text-decoration:none}
html[data-tema="topbos"] .ta-sorotan-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--h-g2)}
html[data-tema="topbos"] .ta-tgl{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
html[data-tema="topbos"] .ta-sorotan .ta-tgl{margin-top:10px}
html[data-tema="topbos"] .ta-tgl b{color:var(--h-biru-teks);font-weight:700}
html[data-tema="topbos"] .ta-sorotan h3{margin:4px 0 0;color:var(--h-putih);font:800 17px/1.3 var(--t-font)}
html[data-tema="topbos"] .ta-daftar{margin:14px -14px -14px;padding:0;list-style:none}
html[data-tema="topbos"] .ta-daftar a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--h-line)}
html[data-tema="topbos"] .ta-baris-img{flex:0 0 112px;width:112px;height:63px;object-fit:cover;border-radius:3px;background:var(--h-g2)}
html[data-tema="topbos"] .ta-baris-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
html[data-tema="topbos"] .ta-baris-teks b{display:-webkit-box;overflow:hidden;color:var(--h-putih);font-size:14px;font-weight:700;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[data-tema="topbos"] :is(.ta-sorotan:hover h3,.ta-daftar a:hover b){color:var(--h-biru-teks)}

/* ── Hero (bila dinyalakan domain) ─────────────────────────────────────── */
html[data-tema="topbos"] .hero:not(.hero-mati){
  color:var(--txt);border:1px solid var(--h-line-2);border-radius:0;box-shadow:none;background-color:var(--h-g1);
  background-image:linear-gradient(90deg,rgba(14,16,19,.97) 0%,rgba(14,16,19,.86) 44%,rgba(14,16,19,.25) 76%,rgba(14,16,19,0) 100%),linear-gradient(0deg,rgba(14,16,19,.7),transparent 45%),var(--hero-gambar,url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp'))!important;
}
html[data-tema="topbos"] .hero:not(.hero-mati)::before{content:"";position:absolute;inset:7px;z-index:3;background:var(--h-siku);pointer-events:none}
html[data-tema="topbos"] .hero .badge{border:1px solid var(--h-line-2);border-radius:0;padding:5px 9px;background:rgba(14,16,19,.72);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--h-putih);font:500 9px/1.2 var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
html[data-tema="topbos"] .hero h1{font:600 23px/1.04 var(--h-disp);letter-spacing:.06em;text-transform:uppercase;text-shadow:none}
html[data-tema="topbos"] .hero .h1-kw{font:400 12px/1.3 var(--t-font);letter-spacing:0;text-transform:none;color:#c9ced5;opacity:1}
html[data-tema="topbos"] .hero p{color:#b9bfc8;opacity:1;text-shadow:none}
html[data-tema="topbos"] .hero-trust span{gap:6px;border:1px solid var(--h-line-2);border-radius:0;background:rgba(14,16,19,.86);box-shadow:none;color:var(--h-putih);font:600 8.5px/1.1 var(--h-disp);letter-spacing:.06em;text-transform:uppercase}
/* Centang di chip keunggulan jadi berlian mint kecil. */
html[data-tema="topbos"] .hero-trust b{width:6px;height:6px;flex:0 0 6px;border-radius:0;background:var(--h-mint);font-size:0;transform:rotate(45deg)}

/* ── Banner event ──────────────────────────────────────────────────────── */
html[data-tema="topbos"] .event-slider{border-radius:0;box-shadow:0 0 0 1px var(--h-line-2);background:var(--h-g0)}
html[data-tema="topbos"] .event-slider::after{content:"";position:absolute;inset:7px;z-index:1;background:var(--h-siku);opacity:.9;pointer-events:none}
html[data-tema="topbos"] .event-nav{border-radius:0;background:rgba(14,16,19,.82);color:var(--h-putih);box-shadow:0 0 0 1px var(--h-line-2)}
html[data-tema="topbos"] .event-dots{gap:5px;margin-top:10px}
/* Garis 2px, bidang ketuk tetap 12px. */
html[data-tema="topbos"] .event-dots button{width:12px;height:12px;border-radius:0;background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) center/100% 2px no-repeat}
html[data-tema="topbos"] .event-dots button.is-on{width:26px;background:linear-gradient(var(--h-putih),var(--h-putih)) center/100% 2px no-repeat}
html[data-tema="topbos"] .event-dots button:focus-visible{outline:2px solid var(--h-putih);outline-offset:2px}

/* ── Kartu langkah ─────────────────────────────────────────────────────── */
html[data-tema="topbos"] .card{margin-bottom:12px;padding:16px 14px 14px}
html[data-tema="topbos"] .card h2{gap:12px;margin:0 0 14px;color:var(--h-putih);font-size:15px;font-weight:600;line-height:1.15;letter-spacing:.16em}
html[data-tema="topbos"] .user-id-head h2{margin:0}
/* Nomor langkah "01": angka dari HTML, nol di depannya dari ::before. */
html[data-tema="topbos"] .card h2 .num{width:auto;height:auto;flex:0 0 auto;padding:4px 6px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:500 11px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="topbos"] .card h2 .num::before{content:"0"}

/* Isian */
html[data-tema="topbos"] input{border:1px solid var(--h-line-2);background:var(--h-field);color:var(--h-putih)}
html[data-tema="topbos"] :is(input,textarea)::placeholder{color:#6d747e;opacity:1}
html[data-tema="topbos"] input:focus{border-color:var(--h-putih);background:rgba(0,0,0,.44);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html[data-tema="topbos"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount){font-family:var(--h-disp);font-weight:500;letter-spacing:.14em}
html[data-tema="topbos"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount)::placeholder{font-family:var(--t-font);font-weight:400;letter-spacing:.01em}
html[data-tema="topbos"] .wallet-topup-input input{background:transparent}
html[data-tema="topbos"] .user-id-row{gap:6px}
html[data-tema="topbos"] .user-id-row #game-id{height:48px}
html[data-tema="topbos"] :is(#check-btn,#track-go){height:48px;padding:0 18px;font-size:13px;line-height:1}
html[data-tema="topbos"] #bulk-preview-btn{min-height:44px;padding:0 18px;font-size:12px}
html[data-tema="topbos"] .user-id-row #user-id-guide-btn{width:48px;min-width:48px;height:48px;flex-basis:48px;border:1px solid var(--h-line-2);border-radius:0;background:transparent}
html[data-tema="topbos"] .user-id-row #user-id-guide-btn:is(:hover,:focus-visible){border-color:var(--h-putih);background:rgba(255,255,255,.06);box-shadow:none}
/* Ikon panduan milik domain berwarna; di HUD dibuat satu warna. */
html[data-tema="topbos"] .user-id-row #user-id-guide-btn img{filter:grayscale(1) brightness(1.5)}
html[data-tema="topbos"] .user-id-copy{color:var(--muted);font-size:12.5px;line-height:1.6}
html[data-tema="topbos"] .buyer{display:flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid rgba(158,232,191,.32);border-radius:0;background:rgba(158,232,191,.08);color:var(--h-mint);font:500 14px/1.3 var(--t-font)}
html[data-tema="topbos"] .buyer.err{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.08);color:var(--h-rose)}
html[data-tema="topbos"] .id-mode{gap:0;padding:0;border:1px solid var(--h-line);border-radius:0;background:transparent}
html[data-tema="topbos"] .id-mode button{padding:8px 12px;border-radius:0;color:var(--muted);font-size:10.5px;letter-spacing:.12em}

/* ── Kategori: satu bilah bersegmen ────────────────────────────────────── */
html[data-tema="topbos"] .tabs{gap:0;margin:0 0 14px}
html[data-tema="topbos"] .tabs button,html[data-tema="topbos"] .tabs a{padding:13px 12px;border:1px solid var(--h-line);border-radius:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.1em;box-shadow:none}
html[data-tema="topbos"] :is(.tabs button,.tabs a)+:is(button,a){margin-left:-1px}

/* ── Nominal: kartu tegak, harga putih ─────────────────────────────────── */
html[data-tema="topbos"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Susunan isi kartu sama dengan Klasik yang dipakai pembeli sekarang: ikon di
   kiri, nama dan harga di kanan, chip poin berwarna di bawah harga. Versi
   awal menumpuk ikon di atas nama sehingga kartu ponsel tinggi dan longgar. */
html[data-tema="topbos"] .prod{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:5px;min-height:88px;padding:10px 11px;border:1px solid var(--h-line);border-radius:0;background:rgba(0,0,0,.28);color:var(--txt);box-shadow:none}
html[data-tema="topbos"] .prod .ic{grid-row:1/3;grid-column:1;width:40px;height:40px;margin:0;border-radius:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--h-line);font-size:20px;overflow:hidden}
html[data-tema="topbos"] .prod .ic img{width:30px;height:30px;font-size:9px;line-height:1.1}
html[data-tema="topbos"] .prod.prod-image-native .ic{background:transparent;box-shadow:none}
html[data-tema="topbos"] .prod.prod-image-native .ic img{width:40px;height:40px}
html[data-tema="topbos"] .prod .n{grid-row:1;grid-column:2;min-width:0;color:#c9ced5;font:600 11.5px/1.3 var(--h-disp);letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
html[data-tema="topbos"] .prod .n small{color:var(--muted);font:400 11px/1.3 var(--t-font);letter-spacing:0;text-transform:none}
html[data-tema="topbos"] .prod-price{grid-row:2;grid-column:2;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
/* Harga mengikuti lebar layar: 18px hanya muat di kolom lebar. Di ponsel dua
   kolom (kolom teks 89-104px) harga tujuh angka seperti Rp 1.210.000 meluap
   keluar kartu, jadi ukurannya clamp 13-18px lewat vw, jarak huruf 0, dan
   boleh patah di spasi ("Rp" / angka) sebagai pengaman terakhir. */
html[data-tema="topbos"] .prod-price strong,html[data-tema="topbos"] .prod .p{color:var(--h-putih);font:600 clamp(12px,3.5vw,18px)/1.05 var(--h-disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
html[data-tema="topbos"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
html[data-tema="topbos"] .prod-price del{color:var(--t-subtle);font:500 11px/1 var(--h-disp);letter-spacing:.04em}
/* Chip poin: bidang amber seperti Klasik (token warn-soft/warn-text ada di kedua
   tema), bukan teks abu-abu berpenanda berlian. */
html[data-tema="topbos"] .prod-points{gap:0;padding:3px 7px;border:0;border-radius:4px;background:var(--t-warn-soft);color:var(--t-warn-text);font:700 10.5px/1 var(--t-font);letter-spacing:0;white-space:nowrap}
html[data-tema="topbos"] .prod-points::before{display:none}
/* Harga coret domain: label garis rambut bersiku, huruf teknis, warna --h-aksen
   (biru pucat di HUD gelap, biru merek di HUD Terang). Bukan tombol warna merek
   padat (khusus tombol yang memindahkan uang), bukan amber (poin dan tier),
   bukan merah muda (galat). */
html[data-tema="topbos"] .prod-coret{gap:2px 4px;margin-bottom:-1px}
html[data-tema="topbos"] .prod-coret del{letter-spacing:0}
html[data-tema="topbos"] .prod-diskon{padding:2px 3px;border:1px solid color-mix(in srgb,var(--h-aksen) 55%,transparent);border-radius:0;background:color-mix(in srgb,var(--h-aksen) 10%,transparent);color:var(--h-aksen);font:600 9.5px/1 var(--h-disp);letter-spacing:.02em}
html[data-tema="topbos"] .prod-diskon.prod-diskon-promo{border-color:transparent;background:var(--t-promo);color:var(--h-putih)}
/* Berlian tanda terpilih naik sedikit pada kartu bercoret supaya tidak
   menimpa label persen di baris kedua. */
html[data-tema="topbos"] .prod.active:has(.prod-diskon)::before{top:5px}
html[data-tema="topbos"] .prod.active:has(.prod-diskon)::after{top:10px}
html[data-tema="topbos"] .prod.active{border-color:var(--h-putih);background:rgba(255,255,255,.08);color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="topbos"] .prod.active .n{padding-right:24px;color:var(--h-putih)}
/* Centang di dalam berlian putih, pojok kanan atas. Kartu berlencana promo
   memakai pojok itu untuk lencananya, jadi centangnya tidak dipasang. */
html[data-tema="topbos"] .prod.active::before{content:"";position:absolute;top:11px;right:11px;width:22px;height:22px;background:var(--h-putih);transform:rotate(45deg) scale(.82);pointer-events:none}
html[data-tema="topbos"] .prod.active::after{content:"";position:absolute;top:16px;right:19px;width:5px;height:9px;border:solid var(--h-g1);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
html[data-tema="topbos"] .prod.active:has(.promo-badge)::before,html[data-tema="topbos"] .prod.active:has(.promo-badge)::after{content:none}
html[data-tema="topbos"] .promo-badge{top:-8px;right:10px;padding:2px 7px;border-radius:0;background:var(--t-promo);color:var(--h-putih);font-size:9px;line-height:1.2;letter-spacing:.12em}
/* Badge di garis tepi atas (di pojok dalam ia menimpa nama produk); rak yang
   digulir menyamping butuh ruang di atas supaya badge tidak terpotong. */
html[data-tema="topbos"] .flash-products{padding-top:11px}
html[data-tema="topbos"] .promo-copy{margin-top:8px}
html[data-tema="topbos"] .promo-copy b{color:var(--t-promo);font-size:10px;letter-spacing:.12em}
html[data-tema="topbos"] .promo-copy small{color:var(--muted);font-size:10.5px}
html[data-tema="topbos"] .flash-sale{border:1px solid rgba(255,107,134,.35);border-radius:0;background:rgba(255,107,134,.05);box-shadow:none}
html[data-tema="topbos"] .flash-ticket{background:var(--t-promo);color:var(--h-putih);font-size:9.5px;letter-spacing:.16em}
html[data-tema="topbos"] .flash-sale-head h3{color:var(--h-putih);font-size:14px;letter-spacing:.12em}
html[data-tema="topbos"] .flash-sale-head p{color:var(--muted)}
html[data-tema="topbos"] .flash-products .prod{border-color:var(--h-line);background:rgba(0,0,0,.28)}
html[data-tema="topbos"] .flash-products .prod.active{border-color:var(--h-putih);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="topbos"] .catalog-empty{color:var(--muted)}

/* ── Email ─────────────────────────────────────────────────────────────── */
html[data-tema="topbos"] .email-help{margin-top:10px;padding:10px 12px;border:1px solid var(--h-line);background:rgba(255,255,255,.03);color:var(--muted);font-size:12px;line-height:1.55}
html[data-tema="topbos"] .email-help::before{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="topbos"] .email-help[data-kind="error"]{border-color:rgba(255,143,143,.45);background:rgba(255,143,143,.06);color:var(--h-rose)}
html[data-tema="topbos"] .email-help[data-kind="error"]::before{border-color:var(--h-rose);color:var(--h-rose)}

/* ── Langkah 4: saldo/poin + metode ────────────────────────────────────── */
html[data-tema="topbos"] .checkout-benefits{padding:12px;border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] :is(.checkout-benefits-head,.external-pay-head)>span{color:var(--h-putih);font-size:10.5px;letter-spacing:.18em}
html[data-tema="topbos"] :is(.checkout-benefits-head,.external-pay-head) small{color:var(--muted);font-size:11.5px}
html[data-tema="topbos"] .benefit-grid{gap:8px}
html[data-tema="topbos"] .benefit-card{grid-template-columns:30px minmax(0,1fr);align-items:start;gap:9px;padding:10px}
html[data-tema="topbos"] .benefit-card.locked{background:transparent;color:var(--muted)}
html[data-tema="topbos"] .benefit-card b{color:var(--h-putih);font-size:11px;line-height:1.2;letter-spacing:.12em}
html[data-tema="topbos"] .benefit-card strong{margin-top:3px;color:#d6dbe1;font:600 14px/1.15 var(--h-disp)}
html[data-tema="topbos"] .benefit-card small{margin-top:3px;color:var(--t-subtle);font-size:10.5px}
html[data-tema="topbos"] .benefit-icon{width:30px;height:30px;font-size:11px;font-weight:600;letter-spacing:.04em}
html[data-tema="topbos"] :is(.benefit-icon.wallet,.benefit-icon.points){background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] .benefit-note{color:var(--muted);font-size:12px}
/* Kepala metode bertumpuk: label kapital di atas, keterangan di bawahnya. */
html[data-tema="topbos"] .external-pay-head{flex-direction:column;align-items:flex-start;gap:6px;margin:16px 0 12px;padding-top:16px;border-top:1px solid var(--h-line)}
html[data-tema="topbos"] .external-pay-head small{text-align:left}
html[data-tema="topbos"] .paygrid{gap:10px}
html[data-tema="topbos"] .paym{gap:9px;padding:10px 12px 12px}
/* Strip logo tetap PUTIH: logo metode bayar bertinta gelap. */
html[data-tema="topbos"] .paym-ic{height:26px;padding:0 9px;border-radius:0;background:#fff}
html[data-tema="topbos"] .paym-ic-fb{height:auto;padding:0;background:transparent}
html[data-tema="topbos"] .paym-n{color:var(--txt);font:500 13px/1.25 var(--t-font)}
html[data-tema="topbos"] .paym-p{margin-top:6px;color:#d6dbe1;font:600 14px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="topbos"] .paym.active .paym-p{color:var(--h-putih);font-weight:600}
html[data-tema="topbos"] .paym.is-unavailable{border-color:var(--h-line);background:transparent;opacity:.62}
html[data-tema="topbos"] .paym-unavailable-label{color:var(--muted)}
html[data-tema="topbos"] .paygrid-minta .paym{border-color:var(--h-putih)}
html[data-tema="topbos"] .paym-internal{border-color:rgba(158,232,191,.45);background:rgba(158,232,191,.06)}
html[data-tema="topbos"] .paym-internal .paym-ic{width:44px;height:44px;border:1px solid rgba(158,232,191,.55);border-radius:0;background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] #pay-note{color:var(--muted)}

/* ── Bilah Total: kaca grafit bersiku ──────────────────────────────────── */
html[data-tema="topbos"] .summary{gap:0 4px;padding:9px 8px 9px 14px;border:1px solid var(--h-line-2);border-bottom:0;border-radius:0;background:var(--h-siku),rgba(14,16,19,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -8px 22px rgba(0,0,0,.12)}
html[data-tema="topbos"] .summary-assurance{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--h-line);color:var(--h-mint);font-size:10px;font-weight:500;line-height:1.1;letter-spacing:.14em}
html[data-tema="topbos"] .summary>div::before{color:var(--muted);font:500 10.5px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase}
/* Nama produk menggantikan label "Total" begitu ada yang dipilih. */
html[data-tema="topbos"] .summary>div:has(#sum-product:not(:empty))::before{content:none}
html[data-tema="topbos"] .summary>div:has(#sum-product:not(:empty)) #sum-product{display:block;overflow:hidden;color:var(--muted);font:500 10.5px/1.2 var(--h-disp);letter-spacing:.1em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
html[data-tema="topbos"] #sum-price{margin-top:5px;color:var(--h-putih);font:600 22px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-tema="topbos"] #buy-btn{padding:6px 16px;border:0;border-radius:0;background:var(--h-putih);color:var(--h-g1);font:600 12px/1.15 var(--h-disp);letter-spacing:.1em;text-transform:uppercase;white-space:normal;box-shadow:none}

/* Tombol CS melayang: kotak bergaris, lencana Telegram tetap */
html[data-tema="topbos"] .bantuan-tg{border:1px solid var(--h-line-2);border-radius:0;background:rgba(14,16,19,.92);color:var(--h-putih);box-shadow:0 12px 26px rgba(0,0,0,.5)}
html[data-tema="topbos"] .bantuan-tg:hover{box-shadow:0 14px 30px rgba(0,0,0,.6)}
html[data-tema="topbos"] .bantuan-avatar{border-radius:0;background:transparent;box-shadow:none}
html[data-tema="topbos"] .bantuan-avatar>img{border-radius:0}
html[data-tema="topbos"] .bantuan-avatar-fallback{color:var(--h-putih);font:600 13px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="topbos"] .bantuan-channel-badge{border-color:var(--h-g1)}
html[data-tema="topbos"] .bantuan-copy small{font-family:var(--h-disp);letter-spacing:.14em}

/* ── Navigasi bawah: garis bawah putih + tombol tengah berlian ─────────── */
html[data-tema="topbos"] .bnav{background:var(--h-g0);border-top:1px solid var(--h-line);box-shadow:none}
html[data-tema="topbos"] .bnav a{gap:6px;color:#7f8792;font-size:9.5px;line-height:1;letter-spacing:.12em}
html[data-tema="topbos"] .bnav svg{width:21px;height:21px}
html[data-tema="topbos"] .bnav a[aria-current="page"]{color:var(--h-putih);font-weight:600}
html[data-tema="topbos"] .bnav a[aria-current="page"] svg{fill:none;stroke-width:2}
html[data-tema="topbos"] .bnav a[aria-current="page"]::before{display:none}
html[data-tema="topbos"] .bnav a[aria-current="page"]::after{content:"";position:absolute;bottom:4px;left:50%;width:18px;height:2px;margin-left:-9px;background:var(--h-putih)}
html[data-tema="topbos"] .bnav a:focus-visible{outline:2px solid var(--h-putih);outline-offset:-4px;border-radius:0}
html[data-tema="topbos"] .bnav li.center a{color:var(--h-putih)}
html[data-tema="topbos"] .bnav li.center a[aria-current="page"]::after{display:none}
html[data-tema="topbos"] .bnav .bnav-fab{top:-20px;width:44px;height:44px;border:0;border-radius:0;background:var(--h-putih);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-line-2)}
html[data-tema="topbos"] .bnav .bnav-fab svg{width:22px;height:22px;stroke:var(--h-g1);stroke-width:2;transform:rotate(-45deg)}
html[data-tema="topbos"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--h-putih);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-putih)}
html[data-tema="topbos"] .bnav li.center a[aria-current="page"] .bnav-fab svg{fill:none;stroke-width:2.2}
html[data-tema="topbos"] .bnav li.center a:active .bnav-fab{transform:translateX(-50%) rotate(45deg) scale(.94)}
html[data-tema="topbos"] .bnav li.center a:focus-visible .bnav-fab{outline:2px solid var(--h-amber);outline-offset:5px}
html[data-tema="topbos"] .bnav .bnav-dot{top:10px;left:calc(50% + 9px);width:7px;height:7px;border:0;border-radius:0;background:var(--h-rose);transform:rotate(45deg)}
html[data-tema="topbos"] .bnav .bnav-dot.pts{z-index:2;top:5px;left:calc(50% + 8px);width:auto;height:auto;padding:3px 5px;border-radius:0;background:var(--h-amber);color:var(--h-g1);font:600 9px/1 var(--h-disp);letter-spacing:.04em;transform:none}
html[data-tema="topbos"] .bnav li.center .bnav-dot.pts{top:-36px;left:calc(50% + 15px)}

/* ── Halaman ───────────────────────────────────────────────────────────── */
html[data-tema="topbos"] .page-head{padding:22px 2px 12px}
html[data-tema="topbos"] .page-head h1{color:var(--h-putih);font-size:26px;font-weight:600;line-height:1.08;letter-spacing:.08em}
html[data-tema="topbos"] .page-head p{margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.55}
html[data-tema="topbos"] .section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.24em}
html[data-tema="topbos"] .section-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-aksen);transform:rotate(45deg)}
html[data-tema="topbos"] .page-head .section-kicker{margin-bottom:10px}
html[data-tema="topbos"] .page-back{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:16px 0 4px;padding:0 12px;border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px;line-height:1;letter-spacing:.16em}
html[data-tema="topbos"] .page-back:hover{background:rgba(255,255,255,.06)}
html[data-tema="topbos"] :is(.btn-full,.nota-btn){padding:15px 14px;font-size:12px;line-height:1.1;letter-spacing:.18em}
html[data-tema="topbos"] :is(.btn-full.btn-outline,.nota-btn-sekunder){border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] :is(.btn-full.btn-outline,.nota-btn-sekunder):hover{background:rgba(255,255,255,.06)}
html[data-tema="topbos"] .muted{color:var(--muted)}
html[data-tema="topbos"] .msg{border-radius:0;border:1px solid rgba(255,143,143,.36);background:rgba(255,143,143,.08);color:var(--h-rose)}

/* ── Pembayaran /pesanan/<nomor> ───────────────────────────────────────── */
html[data-tema="topbos"] .payment-card::before{display:none}
html[data-tema="topbos"] .pay-page{padding:20px 16px 16px}
html[data-tema="topbos"] .pay-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:0;color:var(--h-mint);font-size:10.5px;font-weight:500;letter-spacing:.2em}
html[data-tema="topbos"] .pay-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="topbos"] .pay-page h3{margin:10px 0 16px;color:var(--h-putih);font-size:17px;line-height:1.2;letter-spacing:.14em}
html[data-tema="topbos"] .pay-invoice{padding:18px 18px 16px;border:1px solid var(--h-line-2);background:var(--h-siku),rgba(0,0,0,.3);box-shadow:none}
html[data-tema="topbos"] .pay-invoice-label{color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.2em}
html[data-tema="topbos"] .pay-invoice-amount{margin-top:12px;color:var(--h-putih);font:600 34px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="topbos"] .pay-invoice-product{margin-top:10px;color:#c9ced5;font-size:11.5px;font-weight:500;line-height:1.3;letter-spacing:.14em}
html[data-tema="topbos"] .pay-funding-breakdown{margin-top:14px;padding-top:12px;border-top:1px dashed var(--h-line-2)}
html[data-tema="topbos"] .pay-funding-breakdown span{color:var(--muted);font-size:12.5px}
html[data-tema="topbos"] .pay-funding-breakdown b{color:var(--h-putih);font:600 12.5px/1.2 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="topbos"] .pay-nota-link{display:inline-flex;align-items:center;min-height:36px;margin-top:8px;color:var(--h-putih);font-size:11px;letter-spacing:.12em;text-decoration:underline;text-underline-offset:4px}
html[data-tema="topbos"] .payment-card .pay-status{margin-top:20px;padding:18px 0 0;border-top:1px solid var(--h-line);background:transparent;color:var(--txt)}
/* Tiga langkah + dua garis harus muat di 390px: jarak huruf .14em membuat
   "SELESAI" terpotong di tepi kartu, jadi dirapatkan. */
html[data-tema="topbos"] .pay-steps{gap:6px;margin:2px 0 16px}
html[data-tema="topbos"] .pay-step{gap:6px;color:var(--t-subtle);font-size:10px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
html[data-tema="topbos"] .pay-step.active,html[data-tema="topbos"] .pay-step.done{color:var(--h-putih)}
html[data-tema="topbos"] .pay-step-dot{width:26px;height:26px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:600 11.5px/1 var(--h-disp);box-shadow:none}
html[data-tema="topbos"] .pay-step.done .pay-step-dot{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] .pay-step-line{flex:1 1 auto;width:auto;min-width:6px;height:1px;border-radius:0;background:var(--h-line-2)}
html[data-tema="topbos"] .pay-step-line.done{background:var(--h-mint)}
/* Kepala status: amber saat menunggu, mint berhasil, merah muda gagal. */
html[data-tema="topbos"] .pay-state-head{gap:12px;padding:14px;border:1px solid rgba(232,192,122,.32);background:rgba(232,192,122,.06)}
html[data-tema="topbos"] .pay-state-symbol{width:36px;height:36px;flex-basis:36px;border:1px solid rgba(232,192,122,.5);background:transparent;color:var(--h-amber);box-shadow:none;font-family:var(--h-disp)}
html[data-tema="topbos"] .pay-status.ok .pay-state-head{border-color:rgba(158,232,191,.32);background:rgba(158,232,191,.06)}
html[data-tema="topbos"] .pay-status.ok .pay-state-symbol{border-color:rgba(158,232,191,.55);background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] .pay-status.err .pay-state-head{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06)}
html[data-tema="topbos"] .pay-status.err .pay-state-symbol{border-color:rgba(255,143,143,.55);background:transparent;color:var(--h-rose)}
html[data-tema="topbos"] .pay-state-head strong{color:var(--h-putih);font:600 13px/1.3 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="topbos"] .pay-state-head p{margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.5}
/* Tiket nomor pesanan dengan dua takik berlian di sisi. */
html[data-tema="topbos"] .order-ticket{padding:14px 16px 16px;border:1px solid var(--h-line-2);background:rgba(0,0,0,.3);color:var(--txt);box-shadow:none;overflow:visible}
html[data-tema="topbos"] .order-ticket::after{content:"";position:absolute;inset:auto;top:53px;right:-5px;width:9px;height:9px;opacity:1;border:1px solid var(--h-line-2);background:var(--h-g1);transform:rotate(45deg)}
html[data-tema="topbos"] .order-ticket::before{content:"";position:absolute;top:53px;left:-5px;width:9px;height:9px;border:1px solid var(--h-line-2);background:var(--h-g1);transform:rotate(45deg)}
html[data-tema="topbos"] .order-ticket-top{align-items:baseline;min-height:30px;color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.18em}
html[data-tema="topbos"] .order-ticket-top b{color:var(--h-putih);font:600 19px/1 var(--h-disp);letter-spacing:.14em;text-shadow:none}
html[data-tema="topbos"] .order-full-id{color:var(--muted)}
html[data-tema="topbos"] .order-ticket-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--h-line-2)}
html[data-tema="topbos"] .order-ticket-actions button{min-height:44px;padding:8px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:10.5px;line-height:1.1;letter-spacing:.12em}
html[data-tema="topbos"] .order-ticket-actions button:last-child{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="topbos"] .pay-email-note{gap:10px;padding:0;border:0;background:transparent;color:var(--muted);font-size:12.5px;line-height:1.55}
html[data-tema="topbos"] .pay-email-note b{color:var(--h-putih);font-weight:600}
html[data-tema="topbos"] .va{border:1px solid var(--h-line-2);background:rgba(0,0,0,.3);color:var(--h-putih);font-family:var(--h-disp);letter-spacing:.1em}
html[data-tema="topbos"] #pay-body img{padding:10px;border-radius:0;background:#fff}
/* Bingkai bidik di sekeliling gambar QR. */
html[data-tema="topbos"] #pay-body img{box-shadow:0 0 0 6px var(--h-g1),0 0 0 7px var(--h-line-2)}
html[data-tema="topbos"] .visual-logo-fallback{border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--h-line-2);color:var(--h-putih);font-family:var(--h-disp)}

/* ── Lacak pesanan & nota ──────────────────────────────────────────────── */
html[data-tema="topbos"] .track-order-card{overflow:visible}
html[data-tema="topbos"] .track-status-head{gap:14px;padding:16px;background:transparent;border-bottom:1px solid var(--h-line)}
html[data-tema="topbos"] :is(.track-order-card.ok,.track-order-card.err) .track-status-head{background:transparent;border-bottom-color:var(--h-line)}
html[data-tema="topbos"] .track-status-icon{width:44px;height:44px;flex-basis:44px;border:1px solid rgba(232,192,122,.55);background:transparent;color:var(--h-amber);box-shadow:none;font-family:var(--h-disp)}
html[data-tema="topbos"] .track-order-card.ok .track-status-icon{border-color:rgba(158,232,191,.55);background:transparent;color:var(--h-mint);box-shadow:none}
html[data-tema="topbos"] .track-order-card.err .track-status-icon{border-color:rgba(255,143,143,.55);background:transparent;color:var(--h-rose);box-shadow:none}
html[data-tema="topbos"] :is(.track-status-icon,.pay-state-symbol).has-asset{border-color:var(--h-line-2);background:transparent;box-shadow:none;color:var(--txt)}
html[data-tema="topbos"] .track-overline{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.22em}
html[data-tema="topbos"] :is(.track-order-card.ok,.track-order-card.err) .track-overline{color:var(--muted)}
html[data-tema="topbos"] .track-status-head strong{margin-top:6px;color:var(--h-putih);font-size:19px;line-height:1.1;letter-spacing:.1em}
html[data-tema="topbos"] .track-status-head p{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
html[data-tema="topbos"] .track-status-head small{color:var(--t-subtle)}
html[data-tema="topbos"] .track-buyer{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .track-avatar{font-size:12px;font-weight:600;letter-spacing:.06em}
html[data-tema="topbos"] .track-buyer span:not(.track-avatar){color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.18em}
html[data-tema="topbos"] .track-buyer strong{color:var(--h-putih);font:600 14px/1.25 var(--h-disp);letter-spacing:.04em}
html[data-tema="topbos"] .track-detail-grid{border:1px solid var(--h-line)}
html[data-tema="topbos"] .track-detail-grid>div{background:rgba(0,0,0,.18)}
html[data-tema="topbos"] .track-detail-grid>div:nth-child(odd){border-right-color:var(--h-line)}
html[data-tema="topbos"] .track-detail-grid>div:nth-child(-n+2){border-bottom-color:var(--h-line)}
html[data-tema="topbos"] .track-detail-grid span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.16em}
html[data-tema="topbos"] .track-detail-grid b{color:var(--h-putih);font:500 12.5px/1.35 var(--h-disp);letter-spacing:.03em}
html[data-tema="topbos"] .track-ticket{flex-wrap:wrap;padding:14px 14px 14px 16px;border-top:1px dashed var(--h-line-2);background:rgba(0,0,0,.3);color:var(--txt)}
html[data-tema="topbos"] .track-ticket span{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.2em}
html[data-tema="topbos"] .track-ticket b{margin-top:8px;color:var(--h-putih);font:600 18px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="topbos"] .track-ticket button{min-height:40px;padding:0 12px;font-size:10.5px;line-height:1;letter-spacing:.1em}
html[data-tema="topbos"] .track-nota-link{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--h-line-2);color:var(--h-putih);font-size:10.5px;letter-spacing:.1em}
html[data-tema="topbos"] .track-error{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06);color:var(--h-rose)}
html[data-tema="topbos"] .track-security{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="topbos"] .track-security span{color:var(--muted)}
html[data-tema="topbos"] .refund-box{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .refund-box[style]{color:var(--err-tx)!important}
html[data-tema="topbos"] .refund-opt button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11px;letter-spacing:.1em}
html[data-tema="topbos"] .st-badge{font-family:var(--h-disp);letter-spacing:.1em;text-transform:uppercase}

/* ── Bantuan & Info ────────────────────────────────────────────────────── */
html[data-tema="topbos"] .faq-item{border-top-color:var(--h-line)}
html[data-tema="topbos"] .faq-item summary{color:var(--txt);font-size:14px;font-weight:600}
html[data-tema="topbos"] .faq-item summary::after,html[data-tema="topbos"] .seo-faq summary::after{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="topbos"] .faq-item[open] summary::after{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="topbos"] .faq-item p{color:var(--muted)}
html[data-tema="topbos"] .cs-copy small{color:var(--muted)}
html[data-tema="topbos"] .cs-copy b{color:var(--h-putih);font:600 14px/1.2 var(--h-disp);letter-spacing:.08em}
html[data-tema="topbos"] .cs-go{color:var(--muted)}
html[data-tema="topbos"] :is(.info-promo-list,.info-leaderboard-list) img{border-color:var(--h-line)}
html[data-tema="topbos"] .info-posts li{border-top-color:var(--h-line)}
html[data-tema="topbos"] .info-posts a{color:var(--txt)}
html[data-tema="topbos"] .info-posts a b{font-weight:600;font-size:14px}
html[data-tema="topbos"] .info-posts a:hover b{color:var(--h-putih);text-decoration:underline;text-underline-offset:3px}
html[data-tema="topbos"] .info-more{color:var(--h-putih);font-size:11.5px;text-decoration:underline;text-underline-offset:4px}
html[data-tema="topbos"] .info-brand{color:var(--h-putih)}

/* Menu akun / tautan halaman */
html[data-tema="topbos"] :is(.account-menu a,.account-menu button){min-height:54px;padding:0 16px;border-top-color:var(--h-line);color:var(--h-putih);font-size:12px;line-height:1;letter-spacing:.14em}
html[data-tema="topbos"] :is(.account-menu a,.account-menu button):hover{background:rgba(255,255,255,.05)}
html[data-tema="topbos"] :is(.account-menu a,.account-menu button)>span{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);box-shadow:none;font:600 11px/1 var(--h-disp);letter-spacing:0}
html[data-tema="topbos"] .account-menu a>i{color:var(--t-subtle)}
html[data-tema="topbos"] .account-menu button.danger{color:var(--h-rose)}
html[data-tema="topbos"] .account-menu button.danger>span{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="topbos"] .account-session-note{margin-top:12px;color:var(--t-subtle);font-size:10px;font-weight:500;letter-spacing:.14em;text-align:center}
html[data-tema="topbos"] .login-card .login-back{border:0;background:transparent;color:var(--muted);font-size:11px}

/* ── Akun: kartu anggota & check-in ────────────────────────────────────── */
html[data-tema="topbos"] .player-pass{padding:18px 36px 18px 18px;border-color:var(--h-line-2);background:var(--h-siku),linear-gradient(135deg,rgba(255,255,255,.07) 0 22%,rgba(255,255,255,0) 22%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),rgba(20,23,28,.9);color:var(--txt)}
/* Label tegak di tepi kanan: tanda eksklusif tema ini. ::before bawaan
   (takik tiket) dimatikan; ::after dipakai untuk labelnya. */
html[data-tema="topbos"] .player-pass::before{display:none}
html[data-tema="topbos"] .player-pass::after{content:"TOKOMD // MEMBER";top:18px;right:10px;bottom:18px;left:auto;width:auto;height:auto;padding-left:6px;border-left:1px solid var(--h-line);border-radius:0;background:none;color:rgba(255,255,255,.34);font:500 8px/1 var(--h-disp);letter-spacing:.34em;text-align:center;writing-mode:vertical-rl;pointer-events:none}
html[data-tema="topbos"] .wallet-pass::after{content:"TOKOMD // DOMPET"}
html[data-tema="topbos"] .player-pass-top{position:relative;align-items:flex-start;flex-wrap:wrap;row-gap:10px}
html[data-tema="topbos"] .player-avatar{width:56px;height:56px;flex:0 0 56px;border:1px solid var(--h-putih);border-radius:0;background:rgba(255,255,255,.06);box-shadow:none;outline:1px solid var(--h-line);outline-offset:4px;color:var(--h-putih);font-size:24px}
html[data-tema="topbos"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:rgba(255,255,255,.06)}
html[data-tema="topbos"] .avatar-initials{font-family:var(--h-disp);font-weight:600}
html[data-tema="topbos"] .player-identity strong{color:var(--h-putih);font-size:17px;line-height:1.15;letter-spacing:.1em}
html[data-tema="topbos"] .player-identity>span{margin-top:5px;color:var(--muted);font-size:12px}
html[data-tema="topbos"] .player-identity-actions{gap:6px;margin-top:10px}
html[data-tema="topbos"] .player-identity-actions button{height:30px;padding:0 9px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font-size:9.5px;letter-spacing:.12em}
html[data-tema="topbos"] .profile-result{color:var(--muted)}
/* Chip tier duduk di barisnya sendiri di bawah avatar. Sebelumnya dipaku
   absolut di 72px dari atas, padahal tombol "Ubah nama" tumbuh di kolom yang
   sama dan berhenti persis di ketinggian itu — begitu namanya pendek (dua
   baris identitas saja) keduanya saling menimpa. Barisnya dipaksa lewat
   flex-basis kolom identitas: avatar 56px + gap 12px + sisa = satu baris
   penuh, jadi chip selalu turun. */
html[data-tema="topbos"] .player-identity{flex:1 1 calc(100% - 68px)}
html[data-tema="topbos"] .player-pass-top>.tier-chip{position:static;align-self:flex-start;max-width:none;width:auto}
html[data-tema="topbos"] .tier-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--h-amber);border-radius:0;background:transparent;color:var(--h-amber);font-size:10px;line-height:1;letter-spacing:.2em}
html[data-tema="topbos"] .tier-chip::before{content:"";width:5px;height:5px;flex:0 0 5px;background:var(--h-amber);transform:rotate(45deg)}
html[data-tema="topbos"] .account-meters{gap:1px;margin:18px 0 0;padding:0;border:1px solid var(--h-line);background:var(--h-line)}
html[data-tema="topbos"] .account-meters>div{padding:12px 14px;background:rgba(14,16,19,.94)}
html[data-tema="topbos"] .account-meters>div+div{padding-left:14px;border-left:0}
html[data-tema="topbos"] .account-meters span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="topbos"] .account-meters strong{margin-top:7px;color:var(--h-putih);font:600 18px/1 var(--h-disp);letter-spacing:.02em;font-variant-numeric:tabular-nums}
html[data-tema="topbos"] .tier-progress{margin-top:14px}
html[data-tema="topbos"] .tier-progress>div:first-child{color:var(--muted);font:500 10px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase}
html[data-tema="topbos"] .tier-progress b{color:var(--h-putih);font:600 10.5px/1.2 var(--h-disp);letter-spacing:.04em;text-transform:none;font-variant-numeric:tabular-nums}
/* Bilah kemajuan bersegmen ala HUD. */
html[data-tema="topbos"] .tier-track{height:8px;margin-top:10px;border-radius:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 10px,transparent 10px 13px)}
html[data-tema="topbos"] .tier-track span{border-radius:0;background:repeating-linear-gradient(90deg,var(--h-putih) 0 10px,transparent 10px 13px)}
html[data-tema="topbos"] :is(.profile-editor,.avatar-picker){border:1px solid var(--h-line);background:rgba(0,0,0,.3);box-shadow:none}
html[data-tema="topbos"] .profile-editor>label{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="topbos"] .profile-editor input{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-field);color:var(--h-putih)}
html[data-tema="topbos"] .profile-cancel{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] #acct-name-help,html[data-tema="topbos"] .avatar-picker>span,html[data-tema="topbos"] .avatar-save-status{color:var(--muted)}
html[data-tema="topbos"] .profile-editor-status{color:var(--h-amber)}
html[data-tema="topbos"] .avatar-options button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] .avatar-options button[aria-pressed="true"]{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="topbos"] .checkin-card{gap:12px;padding:16px}
html[data-tema="topbos"] .checkin-mark{width:42px;height:42px;border-color:var(--h-putih);font-size:13px;font-weight:600;letter-spacing:.04em}
html[data-tema="topbos"] .checkin-card strong{color:var(--h-putih);font-size:12.5px;line-height:1.2;letter-spacing:.14em}
html[data-tema="topbos"] .checkin-card>div>span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
html[data-tema="topbos"] .checkin-card button{min-height:44px;padding:0 14px;font-size:10.5px;line-height:1;letter-spacing:.14em}
html[data-tema="topbos"] .checkin-days{gap:5px}
html[data-tema="topbos"] .checkin-days li{gap:7px;padding:8px 0 9px;border:1px solid var(--h-line);border-radius:0;background:transparent;color:var(--t-subtle)}
html[data-tema="topbos"] .checkin-days li>span{font:500 8.5px/1 var(--h-disp);letter-spacing:.08em;text-transform:uppercase}
html[data-tema="topbos"] .checkin-days li>b{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font:600 11px/1 var(--h-disp)}
html[data-tema="topbos"] .checkin-days li>small{color:#d6dbe1;font:600 9.5px/1 var(--h-disp)}
html[data-tema="topbos"] .checkin-days li.done{border-color:var(--h-line);background:transparent}
html[data-tema="topbos"] .checkin-days li.done>b{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] .checkin-days li.today{border-color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="topbos"] .checkin-days li.bonus{border-color:rgba(232,192,122,.5);background:transparent}
html[data-tema="topbos"] .checkin-days li.bonus>b{border-color:rgba(232,192,122,.6);color:var(--h-amber)}
html[data-tema="topbos"] .checkin-days li.bonus>small{color:var(--h-amber)}
html[data-tema="topbos"] .account-rank{border-color:rgba(232,192,122,.4)}
html[data-tema="topbos"] .account-rank span{color:var(--h-amber);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="topbos"] .account-rank strong{color:var(--h-putih);font-family:var(--h-disp);font-weight:600}
html[data-tema="topbos"] .account-rank small{color:var(--muted)}
html[data-tema="topbos"] .spender-card::after{display:none}
html[data-tema="topbos"] .spender-head h2{color:var(--h-putih);font-size:15px;letter-spacing:.14em}
html[data-tema="topbos"] .spender-head p{color:var(--muted)}
html[data-tema="topbos"] .spender-trophy{width:40px;height:40px;flex-basis:40px;color:var(--h-amber);border-color:rgba(232,192,122,.55)}
html[data-tema="topbos"] .spender-periods{gap:0;padding:0;border:1px solid var(--h-line);background:transparent}
html[data-tema="topbos"] .spender-periods button{border-radius:0;color:var(--muted);font-size:10.5px;letter-spacing:.12em}
html[data-tema="topbos"] .spender-list li{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .spender-rank{color:var(--t-subtle);font-family:var(--h-disp)}
html[data-tema="topbos"] .spender-list li:first-child .spender-rank{color:var(--h-amber)}
html[data-tema="topbos"] .spender-person strong{color:var(--h-putih)}
html[data-tema="topbos"] .spender-person small{color:var(--muted)}
html[data-tema="topbos"] .spender-list li>b{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="topbos"] :is(.spender-state,.spender-zone){color:var(--muted)}

/* ── Saldo ─────────────────────────────────────────────────────────────── */
html[data-tema="topbos"] .wallet-pass-top{align-items:flex-start}
html[data-tema="topbos"] .wallet-pass-mark{width:52px;height:52px;flex-basis:52px;border-color:var(--h-putih);font-size:16px;font-weight:600}
html[data-tema="topbos"] .wallet-pass-copy .section-kicker{color:var(--muted)}
html[data-tema="topbos"] .wallet-pass-copy strong{margin-top:6px;color:var(--h-putih);font:600 16px/1.2 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="topbos"] .wallet-pass-copy small{margin-top:4px;color:var(--muted);font-size:12px}
html[data-tema="topbos"] .wallet-pass-top>.tier-chip{flex:0 0 auto}
html[data-tema="topbos"] .wallet-pass-balance{border-top:1px dashed var(--h-line-2)}
html[data-tema="topbos"] .wallet-pass-balance span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="topbos"] .wallet-pass-balance strong{color:var(--h-putih);font:600 34px/1.05 var(--h-disp);letter-spacing:.01em;text-shadow:none}
html[data-tema="topbos"] .wallet-pass .wallet-pass-meters{margin-top:14px;padding:0;border:1px solid var(--h-line)}
html[data-tema="topbos"] .wallet-pass-btn{min-height:46px;border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px;letter-spacing:.16em}
html[data-tema="topbos"] .wallet-pass-btn b{border-radius:0;background:rgba(14,16,19,.16)}
html[data-tema="topbos"] .wallet-topup-mark{border:1px solid var(--h-putih);border-radius:0;background:transparent;color:var(--h-putih);font-family:var(--h-disp);box-shadow:none}
/* Lencana "+" di sudut tanda Rp jadi berlian mint kecil. */
html[data-tema="topbos"] .wallet-topup-mark span{width:12px;height:12px;right:-6px;top:-6px;border:0;border-radius:0;background:var(--h-mint);font-size:0;transform:rotate(45deg)}
html[data-tema="topbos"] .wallet-topup-head h4{color:var(--h-putih);font-size:15px;letter-spacing:.12em}
html[data-tema="topbos"] .wallet-topup-head p{color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-steps{color:var(--muted);letter-spacing:.1em}
html[data-tema="topbos"] .wallet-topup-steps span{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--muted);font-family:var(--h-disp)}
html[data-tema="topbos"] .wallet-topup-steps .active{color:var(--h-putih)}
html[data-tema="topbos"] .wallet-topup-steps li:not(:last-child)::after{height:1px;background:var(--h-line-2)}
html[data-tema="topbos"] :is(#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-filter label>span){color:var(--muted);font-weight:500;letter-spacing:.16em}
html[data-tema="topbos"] .wallet-topup-presets button{color:#d6dbe1;font:600 13px/1.1 var(--h-disp);letter-spacing:.02em}
html[data-tema="topbos"] .wallet-topup-input{border:1px solid var(--h-line-2);background:var(--h-field)}
html[data-tema="topbos"] .wallet-topup-input:focus-within{border-color:var(--h-putih);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html[data-tema="topbos"] .wallet-topup-input b{color:var(--muted);font-family:var(--h-disp)}
html[data-tema="topbos"] .wallet-topup-custom>small{color:var(--muted)}
html[data-tema="topbos"] :is(.wallet-topup-quote>p,.wallet-topup-error){border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-error{border-color:rgba(255,143,143,.36);color:var(--h-rose)}
html[data-tema="topbos"] .wallet-topup-quote-head span{color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-method-logo{border:0;border-radius:0;background:#fff}
html[data-tema="topbos"] .wallet-topup-methods button small{color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-methods button>strong{font-family:var(--h-disp);letter-spacing:.02em}
html[data-tema="topbos"] .wallet-topup-breakdown{border:1px solid rgba(158,232,191,.3);background:rgba(158,232,191,.06);color:var(--h-mint)}
html[data-tema="topbos"] .wallet-topup-submit{min-height:48px;padding:0 14px;font-size:12px;line-height:1.1;letter-spacing:.14em}
html[data-tema="topbos"] .wallet-topup-message{color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-instruction{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--muted)}
html[data-tema="topbos"] .wallet-topup-instruction img{border-radius:0;background:#fff}
html[data-tema="topbos"] .wallet-topup-va strong{color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="topbos"] .wallet-topup-active{border:1px solid rgba(232,192,122,.4);background:rgba(232,192,122,.06)}
html[data-tema="topbos"] .wallet-topup-active-head strong{color:var(--h-amber)}
html[data-tema="topbos"] .wallet-topup-record{border:1px solid var(--h-line);border-left:3px solid var(--h-amber);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .wallet-topup-record.process{border-left-color:var(--h-putih)}
html[data-tema="topbos"] .wallet-topup-record.done{border-left-color:var(--h-mint)}
html[data-tema="topbos"] .wallet-topup-record.fail{border-left-color:var(--h-rose)}
html[data-tema="topbos"] .wallet-topup-record button{border:1px solid var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="topbos"] .account-subhead strong{color:var(--h-putih);font-size:12px;letter-spacing:.14em}
html[data-tema="topbos"] .account-subhead span{color:var(--muted)}
html[data-tema="topbos"] .account-subhead button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:9.5px}
html[data-tema="topbos"] :is(.account-filter input,.account-filter select){border:1px solid var(--h-line-2);border-radius:0;background:var(--h-field);color:var(--h-putih)}
html[data-tema="topbos"] .account-entry{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="topbos"] .entry-kicker{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="topbos"] :is(.entry-main small,.entry-main>span:not(.entry-kicker)){color:var(--muted)}
html[data-tema="topbos"] .transaction-entry>button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:10px;letter-spacing:.12em}
html[data-tema="topbos"] .entry-status{border:1px solid rgba(232,192,122,.5);background:transparent;color:var(--h-amber);font-size:8.5px;font-weight:600;letter-spacing:.12em}
html[data-tema="topbos"] .entry-status.ok{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] .entry-status.err{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="topbos"] .entry-value>strong{font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="topbos"] .mutation-sign.pos{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="topbos"] .mutation-sign.neg{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="topbos"] .account-more{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:10.5px;letter-spacing:.14em}
html[data-tema="topbos"] :is(.account-list-state,.account-loading){color:var(--muted)}
html[data-tema="topbos"] .account-loading{border:1px solid var(--h-line);background:var(--h-panel)}
html[data-tema="topbos"] .account-error{border:1px solid rgba(255,143,143,.36);background:rgba(255,143,143,.06);color:var(--h-rose)}

/* Pesan massal: cukup ikut token; isian & tombol sekunder digelapkan */
html[data-tema="topbos"] :is(.bulk-field select,.bulk-field textarea){border:1px solid var(--h-line-2);background:var(--h-field);color:var(--h-putih)}
html[data-tema="topbos"] .bulk-field>span{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] .bulk-secondary{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11px}
html[data-tema="topbos"] :is(.bulk-summary,.bulk-confirm-detail){border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .bulk-hist{border:1px solid var(--h-line-2);background:transparent;color:var(--muted);font-size:10px}
html[data-tema="topbos"] .bulk-hist.is-active{border-color:var(--h-putih);color:var(--h-putih)}
html[data-tema="topbos"] .bulk-chip{font-family:var(--h-disp);letter-spacing:.08em}
html[data-tema="topbos"] .bulk-no{border:1px solid var(--h-line-2);color:var(--h-putih)}
html[data-tema="topbos"] .bulk-confirm-no{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}

/* ── Artikel panduan, jelajah, kaki identitas ─────────────────────────── */
html[data-tema="topbos"] .seo-jelajah{border:1px solid var(--h-line);background:var(--h-panel);color:var(--muted)}
html[data-tema="topbos"] .seo-jelajah a{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.06em}
html[data-tema="topbos"] .seo-produk a{color:var(--t-on-bg-link)}
html[data-tema="topbos"] .seo-artikel{--seo-soft:rgba(0,0,0,.22);--seo-line:rgba(255,255,255,.14)}
html[data-tema="topbos"] .seo-article-head{background:transparent}
html[data-tema="topbos"] .seo-article-head::after{display:none}
html[data-tema="topbos"] .seo-eyebrow{gap:10px;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.22em}
html[data-tema="topbos"] .seo-eyebrow span{width:6px;height:6px;flex:0 0 6px;border-radius:0;background:var(--h-aksen);transform:rotate(45deg)}
html[data-tema="topbos"] .seo-artikel h2{color:var(--h-putih);font:600 21px/1.25 var(--h-disp);letter-spacing:.03em;text-wrap:balance}
html[data-tema="topbos"] .seo-artikel h3{color:var(--h-putih);font:600 16px/1.35 var(--h-disp);letter-spacing:.04em}
html[data-tema="topbos"] .seo-toggle{min-height:44px;margin-top:14px;padding:0 16px;font-size:11px;line-height:1;letter-spacing:.16em}
html[data-tema="topbos"] .seo-lead{color:#c9ced5}
html[data-tema="topbos"] .seo-article-lead{background:transparent}
html[data-tema="topbos"] .seo-route{gap:6px;padding:0;border:0;background:transparent;box-shadow:none}
html[data-tema="topbos"] .seo-route span{padding:8px 6px;border:1px solid var(--h-line-2);color:var(--h-putih);font:500 10px/1.2 var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
html[data-tema="topbos"] .seo-route i{color:var(--t-subtle)}
html[data-tema="topbos"] .seo-article-body{background:transparent}
html[data-tema="topbos"] .seo-block{border:0;border-top:1px solid var(--h-line);background:transparent;box-shadow:none}
html[data-tema="topbos"] .seo-block::before{display:none}
html[data-tema="topbos"] .seo-block-label{color:var(--t-subtle);font-size:9.5px;font-weight:500;letter-spacing:.24em}
html[data-tema="topbos"] .seo-copy p{color:#c9ced5}
html[data-tema="topbos"] .seo-step-list li{color:#c9ced5}
html[data-tema="topbos"] .seo-step-list li::before{content:"0" counter(seo-step);flex:0 0 30px;width:30px;height:26px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih);font:600 11px/1 var(--h-disp);letter-spacing:.06em;box-shadow:none}
html[data-tema="topbos"] .seo-faq{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="topbos"] .seo-faq[open]{background:rgba(255,255,255,.03)}
html[data-tema="topbos"] .seo-faq summary{color:var(--txt);font-weight:600}
html[data-tema="topbos"] .seo-faq p{color:var(--muted)}
html[data-tema="topbos"] .seo-return{border-top:1px solid var(--h-line);background:rgba(255,255,255,.04);color:var(--h-putih)}
html[data-tema="topbos"] .seo-return small{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.2em;opacity:1}
html[data-tema="topbos"] .seo-return span{font:600 13.5px/1.3 var(--h-disp);letter-spacing:.06em}
html[data-tema="topbos"] .seo-return b{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="topbos"] .seo-return:hover b{background:var(--h-putih)}
html[data-tema="topbos"] footer.foot{color:var(--t-subtle)}
html[data-tema="topbos"] .ident-foot{--ident-accent-d:var(--h-putih);border-top-color:var(--h-line)}
html[data-tema="topbos"] .ident-segel>span{gap:8px;padding:0 10px;min-height:30px;border:1px solid var(--h-line-2);border-radius:0;background:transparent;box-shadow:none;color:#d6dbe1;font-size:10px;font-weight:500;letter-spacing:.14em}
html[data-tema="topbos"] .ident-mark{border-radius:0;box-shadow:none}
html[data-tema="topbos"] .ident-name{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Logo nama kaki halaman (gambar hitam) diwarnai biru merek, sama dengan kepala. */
html[data-tema="topbos"] .ident-wordmark{filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
html[data-tema="topbos"] .ident-legal{color:var(--t-subtle)}
html[data-tema="topbos"] .ident-legal-nama{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
html[data-tema="topbos"] .ident-kontak a{border-bottom-color:var(--h-line-2)}
html[data-tema="topbos"] .ident-kebijakan a{font-family:var(--h-disp);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
html[data-tema="topbos"] .ident-copy{font-family:var(--h-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ── Overlay ───────────────────────────────────────────────────────────── */
html[data-tema="topbos"] :is(.paycard,.tg-miniapp-install-card){border:1px solid var(--h-line-2);background:var(--h-siku),var(--h-g2);color:var(--txt);box-shadow:0 24px 60px rgba(0,0,0,.6)}
html[data-tema="topbos"] :is(.paycard h3,.tg-miniapp-install-card h3){color:var(--h-putih);letter-spacing:.12em}
html[data-tema="topbos"] .tg-miniapp-install-card p{color:var(--muted)}
html[data-tema="topbos"] .tg-miniapp-install-later{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] .close{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] #event-popup-close{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-g1);color:var(--h-putih)}
html[data-tema="topbos"] .event-popup-card{border-radius:0;background:var(--h-g0);box-shadow:0 0 0 1px var(--h-line-2),0 24px 60px rgba(0,0,0,.6)}
/* Lebar kartu ikut poster. Kartu bawaan selebar 420px, tetapi gambarnya
   dibatasi setinggi layar (max-height 100vh - 150px, object-fit contain):
   di desktop poster tegak jadi lebih sempit dari kartu dan menyisakan bidang
   kosong di kiri-kanan (terlihat jelas di HUD Terang). Batas ¾ tinggi itu =
   lebar poster 3:4 (ukuran pop-up TokoMD); poster yang lebih lebar dari 3:4
   tetap pas tanpa bidang kosong, hanya sedikit lebih kecil. */
html[data-tema="topbos"] .event-popup-card{width:min(92vw,420px,calc((100vh - 150px) * .75))}
html[data-tema="topbos"] .event-popup-body{border-radius:0}
html[data-tema="topbos"] .event-popup-cta{font-size:12px;letter-spacing:.16em}
html[data-tema="topbos"] .bulk-done-mark{color:var(--h-mint);border-color:rgba(158,232,191,.55)}
html[data-tema="topbos"] .bulk-done-note{border-radius:0;background:rgba(0,0,0,.22);color:var(--muted)}

/* ── Kekakuan dikendurkan ──────────────────────────────────────────────────
   Versi pertama menulis SEMUA dengan kapital berjarak lebar, tanpa satu pun
   lengkung, dan memberi siku ke tiap panel. Ketiganya membuat toko terbaca
   seperti panel mesin dan melelahkan dibaca. Yang DIPERTAHANKAN: angka dan
   label kecil tetap Tomorrow kapital, sudut tetap tegas (4px, bukan 12px),
   dan siku tetap ada — hanya di panel utama, sehingga kembali jadi tanda,
   bukan pengulangan. */
/* 1 · Nama, judul, dan menu kembali huruf biasa (Hanken), bukan kapital. */
html[data-tema="topbos"] :is(.card h2,.page-head h1,.pay-page h3,.prod .n,.paym-n,.account-menu a,.account-menu button,
  .player-identity strong,.checkin-card strong,.spender-head h2,.seo-artikel h2,.seo-artikel h3,.track-status-head strong,
  .benefit-card b,.benefit-card strong,.wallet-topup-head h4,.faq-item summary,.info-posts a b,.cs-copy b,.pay-invoice-product,
  .track-buyer strong,.track-detail-grid b,.entry-main strong,.account-subhead strong,.ident-name,.ident-legal-nama,
  .b-brand span,.flash-sale-head h3,.wallet-pass-copy strong,.seo-return span){
  font-family:var(--t-font);text-transform:none;letter-spacing:.005em;font-weight:700;
}
html[data-tema="topbos"] .card h2{font-size:16px}
html[data-tema="topbos"] .page-head h1{font-size:28px;letter-spacing:-.01em}
html[data-tema="topbos"] .prod .n{color:#c4cbd6;font-size:13px;line-height:1.3}
html[data-tema="topbos"] :is(.account-menu a,.account-menu button){font-size:14px;letter-spacing:0}
html[data-tema="topbos"] .paym-n{font-size:13.5px}
html[data-tema="topbos"] .player-identity strong{font-size:18px}
html[data-tema="topbos"] .track-status-head strong{font-size:20px}
/* Label kecil tetap kapital Tomorrow, jaraknya dirapatkan dari .14–.24em. */
html[data-tema="topbos"] :is(.section-kicker,.summary-assurance,.pay-kicker,.track-overline,.pay-invoice-label,
  .account-meters span,.wallet-pass-balance span,.bnav a,.tabs button,.tabs a,.order-ticket-top span,.track-ticket span,
  .checkout-benefits-head>span,.external-pay-head>span,.track-detail-grid span,.track-buyer span:not(.track-avatar),
  .entry-status,.tier-chip,.seo-eyebrow,.seo-block-label,.ident-segel>span,.ident-kebijakan a,.ident-copy,
  .account-session-note){letter-spacing:.1em}
/* 2 · Sudut 4px, bukan bidang miring. Geometri ala Arena — sudut kartu
   dipotong, tombol dan tab jajar genjang, ikon heksagon — dicoba 23 Sep 2026
   lalu DITOLAK: bidang miring yang bertumpuk membuat halaman gelisah dan
   kartu nominal terlihat penyok. Yang dipakai: kartu besar tetap tegas,
   kotak kecil sedikit lunak. */
html[data-tema="topbos"] :is(.card,.prod,.paym,.benefit-card,.account-menu,.player-pass,.checkin-card,.account-rank,
  .track-order-card,.seo-artikel,.summary,.pay-invoice,.order-ticket,.pay-state-head,.checkout-benefits,.email-help,
  input,textarea,select,.account-filter select,.btn-full,.nota-btn,.btn-outline,.nota-btn-sekunder,#check-btn,#track-go,
  #buy-btn,#bulk-preview-btn,.seo-toggle,.wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn,
  .tabs button,.tabs a,.id-mode,.id-mode button,.benefit-icon,.checkin-mark,.wallet-pass-mark,.track-avatar,.spender-avatar,
  .spender-trophy,.player-avatar,.tier-chip,.pay-step-dot,.wallet-topup-presets button,.wallet-topup-methods button,
  .account-entry,.entry-status,.paym-ic,.track-buyer,.track-detail-grid,.cs-card,.account-more,.account-subhead button,
  .hdr-back,.user-id-row #user-id-guide-btn,.bantuan-tg,.bantuan-avatar,.seo-route span,.seo-faq,.transaction-entry>button,
  .track-nota-link,.checkin-days li,.checkin-days li>b,.avatar-options button,.profile-editor,.avatar-picker,.mutation-sign,
  .wallet-topup-input,.wallet-topup-record,.wallet-topup-instruction,.wallet-topup-active,.spender-list li,.spender-periods,
  .page-back,.event-nav,.paycard,.tg-miniapp-install-card,.close,#event-popup-close,.buyer,.msg,.track-error,.refund-box,
  .refund-opt button,.bulk-secondary,.bulk-summary,.bulk-confirm-detail,.pwa-pasang-hdr,.hdr .link,.b-card,.b-pager a,.b-body,
  .bulk-confirm-yes,.event-popup-cta,.order-ticket-actions button,.btn-ghost,.profile-save,.tg-miniapp-install-confirm,
  .bulk-done-mark,.tg-miniapp-install-mark,.seo-return b,.cs-avatar,.wallet-topup-mark,.track-status-icon,.pay-state-symbol,
  .promo-badge,.flash-ticket,.card h2 .num,.wallet-topup-steps span){border-radius:4px}
html[data-tema="topbos"] .faq-item summary::after{border-radius:4px}
html[data-tema="topbos"] .bnav .bnav-fab{border-radius:6px}
/* 3 · Siku hanya di panel utama: kartu langkah, kartu anggota, bilah Total,
   dan tagihan — supaya siku kembali jadi tanda, bukan pengulangan. */
html[data-tema="topbos"] :is(.checkin-card,.account-spender-card,.wallet-topup-card,.account-rank,.track-order-card,.seo-artikel,
  .paycard,.tg-miniapp-install-card,.b-body){background:var(--h-panel)}
html[data-tema="topbos"] :is(.user-id-card-flow,.product-card,.topup-artikel){background:var(--h-siku),var(--h-panel)}
html[data-tema="topbos"] .player-pass{background:var(--h-siku),linear-gradient(135deg,rgba(255,255,255,.06) 0 22%,rgba(255,255,255,0) 22%),repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 7px),rgba(23,28,38,.9)}
html[data-tema="topbos"] .summary{background:var(--h-siku),rgba(17,21,29,.94)}
html[data-tema="topbos"] .pay-invoice{background:var(--h-siku),rgba(0,0,0,.26)}
/* 4 · Pendar biru tipis pada angka besar, dan strip di kepala halaman —
   peran yang di Arena dipegang pendar oranye. */
html[data-tema="topbos"] :is(#sum-price,.prod-price strong,.pay-invoice-amount,.wallet-pass-balance strong,.account-meters strong){
  text-shadow:0 0 16px rgba(120,160,255,.35);
}
html[data-tema="topbos"] .page-head::before{content:"";display:block;width:34px;height:3px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--h-aksen),rgba(199,215,248,0));box-shadow:0 0 10px rgba(120,160,255,.5)}
/* Judul dan angka besar sedikit lebih terang dari teks badan. */
html[data-tema="topbos"] :is(.card h2,.page-head h1,.player-identity strong,#sum-price,.pay-invoice-amount,.prod-price strong,
  .track-status-head strong,.seo-artikel h2,.account-meters strong,.wallet-pass-balance strong){color:#eef2f8}

/* ── Biru TokoMD memimpin ──────────────────────────────────────────────────
   Versi pertama memakai PUTIH sebagai warna aksi dan menyimpan biru merek
   hanya untuk tombol yang memindahkan uang. Akibatnya toko tidak terbaca
   sebagai TokoMD lagi: biru yang dihafal pembeli cuma muncul sekali per
   halaman. Sejak 24 Sep 2026 biru merek yang memimpin — pilihan aktif,
   tombol, siku, ikon, tombol tengah nav. KEPALA dan KANVAS sengaja TETAP
   grafit: pita biru di kepala membuatnya kembali seperti tema Klasik. */
html[data-tema="topbos"] :is(.tabs button.active,.tabs a.active,.id-mode button.is-on,.spender-periods button[aria-selected="true"],
  .wallet-topup-steps .active span,.pay-step.active .pay-step-dot,.checkin-days li.today:not(.done)>b){
  border-color:var(--brand);background:var(--brand);color:var(--brand-on,#fff)}
html[data-tema="topbos"] :is(#check-btn,#track-go,#bulk-preview-btn,.btn-full:not(.btn-outline),.nota-btn,.seo-toggle,
  .wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.bulk-confirm-yes,.event-popup-cta,
  .profile-save,.tg-miniapp-install-confirm,.order-ticket-actions button:last-child):not(:disabled){
  border-color:var(--brand);background:var(--brand);color:var(--brand-on,#fff)}
html[data-tema="topbos"] :is(.prod.active,.paym.active,.benefit-card.active,.flash-products .prod.active,
  .wallet-topup-methods button.active,.wallet-topup-presets button[aria-pressed="true"]){
  border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-terang);box-shadow:inset 0 0 0 1px var(--brand)}
html[data-tema="topbos"] .prod.active::before{background:var(--brand)}
html[data-tema="topbos"] .prod.active::after{border-color:var(--brand-on,#fff)}
html[data-tema="topbos"] :is(.btn-outline,.nota-btn-sekunder,.page-back){border-color:var(--h-biru-cincin);color:var(--h-biru-teks)}
/* Ikon, penanda langkah, dan avatar: garis biru muda, bukan putih. */
html[data-tema="topbos"] :is(.benefit-icon,.checkin-mark,.spender-trophy,.wallet-pass-mark,.track-avatar,.bulk-done-mark,
  .tg-miniapp-install-mark,.seo-return b,.mutation-sign,.spender-avatar,.cs-avatar,.wallet-topup-mark,.card h2 .num){
  border-color:var(--h-biru-cincin);color:var(--h-biru-teks)}
html[data-tema="topbos"] .player-avatar{border-color:var(--h-biru);color:var(--h-biru-terang)}
/* Tombol tengah bilah nav ponsel. Di layar lebar slot ini jadi tombol header,
   dan blok "Lebar khusus" di bawah yang mengembalikannya. */
html[data-tema="topbos"] .bnav .bnav-fab{background:var(--brand);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--h-biru-cincin)}
html[data-tema="topbos"] .bnav .bnav-fab svg{stroke:var(--brand-on,#fff)}
html[data-tema="topbos"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--brand);box-shadow:0 0 0 5px var(--h-g0),0 0 0 6px var(--brand)}
html[data-tema="topbos"] .bnav a[aria-current="page"]{color:var(--h-biru-teks)}
html[data-tema="topbos"] .bnav a[aria-current="page"]::after{background:var(--brand)}
/* Angka besar: tetap terang supaya terbaca, pendarnya biru merek. */
html[data-tema="topbos"] :is(#sum-price,.prod-price strong,.pay-invoice-amount,.wallet-pass-balance strong,.account-meters strong){
  color:var(--h-biru-terang);text-shadow:0 0 18px var(--h-biru-tipis)}
html[data-tema="topbos"] input:focus{border-color:var(--brand);background:rgba(0,0,0,.44);box-shadow:0 0 0 3px var(--h-biru-tipis)}

/* ── Lebar khusus ──────────────────────────────────────────────────────── */
@media (max-width:700px){
  /* Nama nominal 12px seperti Klasik supaya dua baris tetap ringkas. */
  html[data-tema="topbos"] .prod .n{font-size:12px}
  /* Kartu dua kolom di ponsel: ikon 36px, jarak 8px, tepi 9px supaya kolom teks
     cukup untuk harga tujuh angka (Rp 5.950.000) satu baris mulai 390px; di
     360px harga sebesar itu patah jadi "Rp" / angka, tidak pernah keluar kartu. */
  html[data-tema="topbos"] .prod{padding:9px 9px;grid-template-columns:36px minmax(0,1fr);column-gap:8px}
  html[data-tema="topbos"] .prod .ic{width:36px;height:36px}
  html[data-tema="topbos"] .prod.prod-image-native .ic img{width:36px;height:36px}
  /* Chip kategori lengket di ponsel: latarnya ikut panel kartu */
  html[data-tema="topbos"] .tabs{margin:0 -4px 12px;padding:4px;background:rgba(19,22,26,.97)}
}
@media (max-width:400px){
  html[data-tema="topbos"] #buy-btn{padding-inline:12px;font-size:11px;letter-spacing:.06em}
  html[data-tema="topbos"] #sum-price{font-size:19px}
  /* Serapat Klasik: 40px ikon + dua baris teks, tanpa ruang kosong di atas-bawah. */
  html[data-tema="topbos"] .prod{min-height:84px}
  html[data-tema="topbos"] :is(.tabs button,.tabs a){padding:12px 10px;font-size:10.5px;letter-spacing:.08em}
  html[data-tema="topbos"] .card h2{font-size:14px;letter-spacing:.12em}
  /* Satu baris saja: takik berlian tiket duduk sejajar garis putusnya. */
  html[data-tema="topbos"] .order-ticket-top span{font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
  html[data-tema="topbos"] .order-ticket-top b{font-size:17px;letter-spacing:.1em}
}
@media (max-width:350px){
  /* Layar paling sempit: nama toko lebih penting daripada segel. */
}
@media (min-width:701px){
  html[data-tema="topbos"] body{background:#07080a}
  html[data-tema="topbos"] body::before{background:var(--h-kanvas);box-shadow:0 0 0 1px #1a1d22,0 24px 60px rgba(0,0,0,.6)}
  html[data-tema="topbos"] .bnav a{font-size:10px}
}

/* ══ LAYAR LEBAR: dua kolom, navigasi naik ke header ══════════════════════
   Etalase memakai satu tata letak untuk semua lebar (kolom 520px + bingkai,
   lihat blok FASE 3 di style.css). HUD keluar dari situ mulai 900px: kolom
   paling lebar 1120px, kiri (--h-kiri, 360-440px) mengapung untuk yang
   ditindak, sisanya untuk yang panjang dibaca, dan bilah nav bawah pindah ke
   header sebagai tautan. Semuanya CSS di berkas tema, jadi hanya domain
   bertema HUD (dan turunannya) yang berubah.

   Ambang 900px, bukan 1100px lagi (Taka 16 Okt 2026): HP dalam mode desktop
   (Chrome Android, Safari iPhone) merender selebar 980px, laptop yang
   diperbesar 125% (1366px jadi ±1093px) dan jendela setengah layar (960px)
   juga di bawah 1100px — semuanya dulu jatuh ke bingkai ponsel 520px. Supaya
   muat: kolom kiri lentur, tepi minimal --h-sisi (dulu isi menempel ke tepi
   layar di 1100-1180px karena .wrap tanpa padding samping), dan di bawah
   1180px kartu nominal dua kolom + Memanjang satu lajur (blok 1180px di
   bawah). Di bawah 900px logo + lima tautan kepala mulai berdesakan dan kolom
   User ID terpotong, jadi di sana tetap bingkai ponsel.

   Pembagian kolom mengikuti URUTAN DOM: float kiri yang muncul lebih dulu
   menahan kolom kanan (float tidak boleh lebih tinggi dari float sebelumnya),
   jadi yang di kiri selalu elemen paling awal di halamannya. */
@media (min-width:900px){
  /* --h-kiri lebar kolom kiri, --h-sela jarak antarkolom, --h-sisi tepi minimal kiri-kanan.
     --h-kiri bersatuan vw, bukan %: bilah Total yang menempel di kiri bawah (fixed, acuannya
     layar) memakainya juga, jadi lebarnya sama persis dengan kolom kiri di dalam .wrap.
     --h-tepi = jarak isi ke tepi layar; kepala dan nav memakainya supaya sejajar dengan isi. */
  html[data-tema="topbos"]{--nav-h:0px;--h-kolom:1120px;--h-kiri:clamp(360px,38vw,440px);--h-sela:24px;--h-sisi:28px;
    --h-tepi:max(var(--h-sisi),calc((100% - var(--h-kolom)) / 2))}
  /* Bingkai kolom ponsel dilepas; ::before-nya dipakai ulang jadi label tegak
     (baru tampil mulai 1280px, lihat blok sesudah blok ini). */
  html[data-tema="topbos"] body{background:var(--h-kanvas)}
  html[data-tema="topbos"] body::before{
    content:"TOKOMD // TOP UP HGI // MITRA RESMI";position:fixed;left:34px;top:132px;bottom:auto;width:auto;
    transform:rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;background:none;box-shadow:none;
    color:rgba(255,255,255,.2);font:500 12px/1 var(--h-disp);letter-spacing:.6em;text-transform:uppercase;pointer-events:none;
  }
  /* Header: merek + segel di kiri, navigasi di kanan. */
  html[data-tema="topbos"] .hdr{max-width:none;margin:0;height:72px;padding-inline:var(--h-tepi);justify-content:flex-start;gap:14px}
  html[data-tema="topbos"] .brand{flex:0 0 auto;justify-content:flex-start}
  html[data-tema="topbos"] #brand-name{font-size:19px}
  html[data-tema="topbos"] .brand img{height:40px}
  html[data-tema="topbos"] .brand img#brand-wordmark{height:26px;max-width:220px}
  /* Jarak 28px ke kepala: tanpa ini banner dan kartu nominal menempel ke
     bilah kepala, karena jarak atas elemen pembuka kolom sengaja dibuang
     supaya kedua kolom mulai sejajar. Padding samping --h-sisi: di layar yang
     lebih sempit dari kolom, isi tetap berjarak dari tepi dan sejajar kepala. */
  html[data-tema="topbos"] .wrap{max-width:calc(var(--h-kolom) + 2 * var(--h-sisi));padding:28px var(--h-sisi) 64px}
  html[data-tema="topbos"] .tabs{top:76px}

  /* Bilah nav bawah naik ke header: baris tautan, slot tengah jadi tombol putih. */
  html[data-tema="topbos"] .bnav{position:fixed;top:0;right:var(--h-tepi);bottom:auto;left:auto;z-index:17;width:auto;height:72px;padding:0;background:transparent;border-top:0;box-shadow:none;transform:none}
  html[data-tema="topbos"] .bnav ul{display:flex;align-items:center;gap:2px;height:72px;max-width:none;margin:0}
  html[data-tema="topbos"] .bnav a{flex-direction:row;gap:8px;height:42px;padding:0 14px;font-size:11px;letter-spacing:.14em}
  html[data-tema="topbos"] .bnav svg{width:17px;height:17px}
  html[data-tema="topbos"] .bnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  html[data-tema="topbos"] .bnav a[aria-current="page"]::after{display:none}
  html[data-tema="topbos"] .bnav a:hover{background:rgba(255,255,255,.06)}
  /* Slot tengah (Masuk/Saldo/Akun) pindah ke ujung kanan, jadi tombol putih. */
  html[data-tema="topbos"] .bnav li.center{order:9}
  html[data-tema="topbos"] .bnav li.center a{margin-left:12px;padding:0 18px;justify-content:center;background:var(--brand);color:var(--brand-on,#fff)}
  html[data-tema="topbos"] .bnav li.center a:hover{background:color-mix(in srgb,var(--brand) 86%,var(--h-putih))}
  html[data-tema="topbos"] .bnav li.center a[aria-current="page"]{box-shadow:none}
  /* Slot tengah jadi tombol di header: heksagon ponsel dilepas. */
  html[data-tema="topbos"] .bnav .bnav-fab{position:static;width:auto;height:auto;top:auto;margin:0;border:0;background:transparent;box-shadow:none;transform:none}
  html[data-tema="topbos"] .bnav .bnav-fab svg{width:17px;height:17px;stroke:var(--brand-on,#fff);stroke-width:2;transform:none}
  html[data-tema="topbos"] .bnav li.center a:active .bnav-fab{transform:none}
  /* Lencana duduk di SUDUT tautan, bukan di atas tulisannya: di header
     tautannya berbaris (ikon + label), jadi posisi tengah ala ponsel menimpa
     teks. */
  html[data-tema="topbos"] .bnav li :is(.bnav-dot,.bnav-dot.pts){top:-7px;right:-8px;left:auto}

  /* Bilah Total (status pesanan + tombol bayar) tidak melayang lagi di lebar ini
     (keputusan Taka 8 Okt 2026): ia ikut aliran halaman di kolom kanan, tepat di bawah
     kartu Pembayaran, jadi baru terlihat sesudah digulir ke bawah dan tidak menutup
     kartu kolom kiri. Muncul sesudah nominal dipilih seperti di ponsel (atribut hidden
     dari updateSummary); tidak menyingkir saat digulir karena tidak menempel ke layar. */
  html[data-tema="topbos"] .summary{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;margin:0 0 16px calc(var(--h-kiri) + var(--h-sela));grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:9px 9px 9px 15px;border-bottom:1px solid var(--h-line-2);box-shadow:none;transform:none}
  html[data-tema="topbos"] .summary::after{content:none}
  html[data-tema="topbos"] #buy-btn{grid-column:2;max-width:230px;min-height:46px;padding-block:10px}
  html[data-tema="topbos"] .bantuan-tg{right:var(--h-tepi);bottom:28px}
  /* Bilah Total tidak lagi di bawah layar, jadi CS tidak ikut turun saat bilah
     tersembunyi/menyingkir (aturan body.total-sembunyi di style.css). */
  html[data-tema="topbos"] body[data-page="topup"].total-sembunyi .bantuan-tg{bottom:28px}
  html[data-tema="topbos"] .summary.menyingkir{transform:none}

  /* ── Dua kolom ──────────────────────────────────────────────────────── */
  /* :not([hidden]) WAJIB: display di sini mengalahkan [hidden] bawaan, dan
     tanpa itu halaman yang sedang tertutup ikut tampil (Akun menampilkan
     Top Up). */
  html[data-tema="topbos"] :is(#view-topup,#view-pesanan,#view-bantuan,#view-info,.account-body,.account-panel):not([hidden]){display:flow-root}
  /* Kolom kiri: elemen paling awal di tiap halaman. Judul halaman TIDAK ikut —
     ia melebar di atas kedua kolom (lihat daftar "selebar halaman"), supaya
     kartu pertama kiri dan kanan mulai di ketinggian yang sama. Waktu judul
     masih ikut kolom kiri, kartu kanan naik sampai ~110px di atas kartu kiri
     dan halaman terbaca miring. */
  /* Pesanan tidak punya kolom kiri (Taka 8 Okt 2026): tamu dan pembeli yang masuk sama-sama
     memakai lebar penuh, kotak cek nomor di atas tabel transaksi terbaru. Masukan ID Top Up
     ada di kolom kanan, di atas Pilih Nominal (lihat daftar kolom kanan). */
  html[data-tema="topbos"] :is(
    #view-topup>section.hero:not(.hero-mati),#view-topup>#event-banner,
    #view-bantuan>.bantuan-cs,#view-bantuan>.card:not(.faq-card),
    #view-info>#info-leaderboard,#view-info>#info-promo,
    #acct-panel-overview>.player-pass,#acct-panel-wallet>.player-pass,
    #view-topup>.topup-artikel
  ){float:left;clear:left;width:var(--h-kiri)}
  /* Kartu artikel terbaru hanya hidup di sini (lihat blok "Artikel terbaru"). */
  html[data-tema="topbos"] #view-topup>.topup-artikel{display:block}
  /* Kolom kanan: sisanya, digeser selebar kolom kiri + jaraknya. */
  html[data-tema="topbos"] :is(
    #view-topup>.user-id-card-flow,#view-topup>.product-card,#view-topup>.card[aria-labelledby="checkout-email-title"],#view-topup>#pay-methods-card,#view-topup>#msg,
    #view-pesanan>#pay,
    #view-bantuan>.faq-card,#view-bantuan>.account-menu,
    #view-info>#info-blog,#view-info>#info-poin,#view-info>.card:not(#info-leaderboard):not(#info-promo),#view-info>.account-menu,
    #acct-panel-overview>:not(.player-pass),#acct-panel-wallet>:not(.player-pass)
  ){margin-left:calc(var(--h-kiri) + var(--h-sela));width:auto}
  /* Selebar halaman: judul di atas kedua kolom, sisanya di bawah keduanya. */
  html[data-tema="topbos"] :is(.seo-artikel,.seo-jelajah,footer.foot,.ident-foot,.page-head,.account-loading,.account-error){clear:both;margin-left:0;width:auto;float:none}
  /* Kedua kolom mulai di garis yang sama: jarak atas elemen pembuka dibuang,
     jaraknya sudah dipegang judul di atasnya. */
  html[data-tema="topbos"] :is(#view-topup>#event-banner,#view-topup>section.hero,#acct-panel-overview>.checkin-card){margin-top:0}
  /* Halaman baca: satu kolom di tengah. */
  html[data-tema="topbos"] :is(#view-nota,#view-masuk){max-width:760px;margin-inline:auto}
  html[data-tema="topbos"] .page-head h1{font-size:34px}
  html[data-tema="topbos"] .page-head p{max-width:52ch}

  /* Kartu nominal: dua kolom (tiga mulai 1180px, panel kanan baru ±640px), ikon di
     samping nama. Di 900-1179px panel kanan ±445-640px: tiga kolom = kartu ±140-195px,
     dan di 1100px (kartu 184px) harga enam digit pun patah baris; dua kolom memuat semua. */
  html[data-tema="topbos"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-tema="topbos"] .prod{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:12px;row-gap:6px;min-height:90px;padding:12px 14px}
  html[data-tema="topbos"] .prod .ic{grid-row:1/3;grid-column:1;width:44px;height:44px;margin:0}
  html[data-tema="topbos"] .prod.prod-image-native .ic img{width:44px;height:44px}
  html[data-tema="topbos"] .prod .n{grid-row:1;grid-column:2}
  html[data-tema="topbos"] .prod-price{grid-row:2;grid-column:2;margin:0;padding:0;gap:5px}
  html[data-tema="topbos"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0}
  html[data-tema="topbos"] .flash-products{grid-auto-columns:minmax(230px,1fr)}

  /* Halaman luar (blog, artikel, kebijakan) ikut kolom dan header yang sama. */
  html[data-tema="topbos"] .b-top{max-width:none;margin:0}
  html[data-tema="topbos"] .b-top-in{max-width:none;height:71px;padding-inline:var(--h-tepi);gap:14px}
  /* Ukuran merek sama dengan kepala beranda desktop (logo 40px, logo nama 26px). */
  html[data-tema="topbos"] .b-brand img:not(.b-wordmark){height:40px;width:40px}
  html[data-tema="topbos"] .b-brand img.b-wordmark{height:26px;width:auto;max-width:220px}
  html[data-tema="topbos"] .b-top .b-brand span{font-size:19px}
  /* Merek berhenti melar supaya segel duduk di sebelahnya, bukan di bawah nav. */
  html[data-tema="topbos"] .b-brand{flex:0 0 auto}
  html[data-tema="topbos"] .b-page{max-width:760px;padding-bottom:4rem}
  html[data-tema="topbos"] .k-halaman{max-width:760px}

  /* ── Kolom kiri SELAMA domain belum punya artikel ──────────────────── */
  /* Server mengisi #topup-artikel hanya bila Blog domain menyala DAN ada artikel terbit
     (TEMA_ARTIKEL_KIRI di server.js). Selama slot itu kosong, kolom kiri tidak dibiarkan
     kosong: kartu Masukan ID pindah ke kiri dan lengket saat daftar nominal digulir,
     bilah Total + tombol bayar menempel di kiri bawah layar (opsi B, keputusan Taka
     9 Okt 2026 untuk TopBos, 12 Okt 2026 untuk seluruh keluarga HUD). Begitu artikel
     terbit, susunannya kembali seperti di atas (ID kanan atas, Total di bawah kartu
     Pembayaran). Isi di bawah kedua kolom tetap selebar penuh; kartu ID BERHENTI di
     batasnya: sticky CSS tidak bisa berhenti di tengah #view-topup, jadi app.js
     (pasangBatasKolomKiri) menghitung --kolom-kiri-atas. --kolom-kiri:1 = penanda mode
     untuk app.js. (Grid tidak dipakai: Chrome membatasi sticky di grid ke seluruh kontainer.) */
  html[data-tema="topbos"] #view-topup:not(:has(>#topup-artikel:not([hidden]))){--kolom-kiri:1}
  /* #view-topup diulang: daftar kolom kanan di atas (margin-left kolom kiri + sela) memuat
     #view-info>.card:not(#info-leaderboard):not(#info-promo), jadi kekhususan :is()-nya (3,2,1). */
  html[data-tema="topbos"] #view-topup#view-topup:not(:has(>#topup-artikel:not([hidden])))>.user-id-card-flow{float:left;clear:left;width:var(--h-kiri);margin:0 0 14px;position:sticky;top:var(--kolom-kiri-atas,100px)}
}
/* Desktop sempit (900-1099px): tulisan tombol "Pasang Aplikasi" di kepala (±160px) menabrak
   tautan Top Up — di 900px tertimpa ±85px. Tinggal ikon panah-ke-bawah, persegi setinggi
   tombolnya, sama dengan perlakuan layar sangat sempit di pwa/install.js; namanya tetap
   terbaca pembaca layar lewat aria-label tombol. */
@media (min-width:900px) and (max-width:1099px){
  html[data-tema="topbos"] .hdr .pwa-pasang-hdr{justify-content:center;width:auto;aspect-ratio:1;padding:0}
  html[data-tema="topbos"] .hdr .pwa-pasang-hdr span{display:none}
}
/* Panel kanan baru selebar ±640px mulai 1180px: kartu nominal tiga kolom. */
@media (min-width:1180px){
  html[data-tema="topbos"] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Label tegak (body::before di blok 900px) duduk di left:34px; baru ada ruang di sisi
   kiri isi mulai ±1265px (tepi = (lebar - 1120px) / 2). Di bawahnya ia menyelip di
   belakang kartu dan hanya mengintip di celah, jadi disembunyikan. Lapisan turunan
   hanya mengganti content/warnanya, jadi display:none ini berlaku untuk semuanya. */
@media (min-width:900px) and (max-width:1279px){
  html[data-tema="topbos"] body::before{display:none}
}
/* Bilah Total di kiri bawah hanya bila jendela cukup tinggi: hero (±200px) + Masukan ID
   (±250px) + bilah (±130px) mulai 108px dari atas. Di jendela lebih pendek (laptop 1366x768
   ±650px) bilah itu menutupi kartu ID sebelum halaman digulir, jadi di sana bilah Total
   tetap di bawah kartu Pembayaran seperti susunan berartikel. Selama ia menempel,
   body.ruang-total-kiri (app.js) memberi ruang di dasar halaman supaya kaki halaman
   terbaca saat digulir mentok. Bayangan dapat ditimpa lapisan turunan. */
@media (min-width:900px) and (min-height:700px){
  html[data-tema="topbos"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary{position:fixed;left:var(--h-tepi);right:auto;bottom:28px;z-index:15;
    width:var(--h-kiri);margin:0;grid-template-columns:minmax(0,1fr) auto;transform:none;
    box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
  html[data-tema="topbos"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary[hidden]{display:none}
  html[data-tema="topbos"] body.ruang-total-kiri .wrap{padding-bottom:170px}
}

/* == HALAMAN LUAR: bilah merek blog & kebijakan ===================== */
html[data-tema="topbos"] .b-top{color:var(--txt);background:rgba(14,16,19,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--h-line);box-shadow:none}
html[data-tema="topbos"] .b-brand{justify-content:flex-start;gap:10px;color:var(--txt)}
html[data-tema="topbos"] .b-brand span{font:600 16px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
/* Logo persegi di kiri, sama dengan bilah merek etalase. */
html[data-tema="topbos"] .b-brand img:not(.b-wordmark){order:0;margin-left:0;border-radius:0;box-shadow:none}
html[data-tema="topbos"] .b-brand img.b-wordmark{margin-right:0;filter:brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(2274%) hue-rotate(212deg) brightness(106%) contrast(114%)}
html[data-tema="topbos"] .b-back{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih)}
html[data-tema="topbos"] .b-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="topbos"] :is(.b-card,.b-pager a){border-radius:0}
html[data-tema="topbos"] .b-body{border-radius:0;background:var(--h-siku),var(--h-g2)}
html[data-tema="topbos"] .b-eyebrow{border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px var(--h-line-2);color:var(--h-putih);font-family:var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
/* Isi artikel: aksen warna merek cangkang (garis judul, kutipan, butir)
   diganti penanda putih — merek hanya untuk tombol yang menagih. */
html[data-tema="topbos"] .b-body h2{padding-left:0;border-left:0;letter-spacing:.02em}
html[data-tema="topbos"] .b-body h2::before{content:"";display:inline-block;width:7px;height:7px;margin:0 12px 3px 1px;background:var(--h-putih);transform:rotate(45deg)}
html[data-tema="topbos"] .b-body li::marker{color:var(--h-putih)}
html[data-tema="topbos"] .b-body blockquote{border-left:2px solid var(--h-putih);border-radius:0;background:rgba(255,255,255,.04)}
html[data-tema="topbos"] .b-more{font-family:var(--h-disp);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] .b-pager a{border-radius:0}
html[data-tema="topbos"] .b-pager a:hover{border-color:var(--h-putih);background:rgba(255,255,255,.06)}
/* Halaman kebijakan menyalin gaya kartu etalase di bawah .k-halaman, yang
   lebih khusus daripada aturan panel di atas: dipetakan ulang di sini. */
html[data-tema="topbos"] .k-halaman .card{border:1px solid var(--h-line);border-radius:0;background:var(--h-siku),var(--h-panel);box-shadow:none}
html[data-tema="topbos"] .k-halaman .card h2{color:var(--h-putih);font:600 14px/1.2 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] .k-halaman .card li::marker{color:var(--h-putih)}
html[data-tema="topbos"] .k-halaman .card b{color:var(--h-putih)}
html[data-tema="topbos"] .k-halaman .card a{color:var(--h-putih);text-decoration:underline;text-underline-offset:3px}
html[data-tema="topbos"] .k-halaman .account-menu{border:1px solid var(--h-line);border-radius:0;background:var(--h-panel)}
html[data-tema="topbos"] .k-kaki{border-top-color:var(--h-line)}
html[data-tema="topbos"] .k-kaki small{color:var(--t-subtle);font-family:var(--h-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] .ident-kebijakan a[aria-current="page"]{color:var(--h-putih);text-decoration-color:var(--h-putih)}
/* == /HALAMAN LUAR ================================================== */

/* == POP-UP CEK ID ================================================== */
/* Konsep HUD awal (5 Okt 2026), dikembalikan Taka 9 Okt 2026 untuk SEMUA keluarga HUD
   (HUD dan semua turunannya): cangkang .paycard HUD bersiku bergaris rambut,
   tanpa gambar kepala — medali ikon domain + sayap daun emas (8 Okt) dibuang. Kepala
   kartu = NAMA TOKO: logo nama domain (gambar seperti tokomd; digambar sebagai mask
   berwarna --idk-merek lewat --logo-nama, sama dengan kepala toko) atau tulisan nama
   toko, lalu judul "Pastikan akun tujuan" kapital renggang. Ikon & pil bergaris, tombol
   setuju putih (merek hanya untuk tombol uang). Warna lewat --idk-* supaya lapisan
   turunan cukup mengganti token (style.css: .idcek-toko display:none di tema lain). */
html[data-tema="topbos"] .paycard.idcek-kartu{
  --idk-merek:var(--brand);--idk-nama:var(--h-putih);--idk-judul:var(--t-muted);
  --idk-panel:transparent;--idk-pil:var(--h-field);--idk-pil-garis:var(--h-line);
  --idk-teks:var(--h-putih);--idk-label:var(--t-muted);--idk-ikon:transparent;--idk-ikon-tx:var(--h-putih);--idk-ikon-garis:var(--h-line-2);
  --idk-catatan:var(--h-amber);
  max-width:348px;margin-top:14px;padding:20px 18px 18px;color:var(--idk-catatan)}
html[data-tema="topbos"] .idcek-toko{display:flex;align-items:center;justify-content:center;min-height:30px;margin:0 34px 6px}
html[data-tema="topbos"] .idcek-toko-nama{color:var(--idk-nama);font:600 18px/1.2 var(--h-disp);letter-spacing:.12em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere}
html[data-tema="topbos"] .idcek-toko-nama[hidden]{display:none}
html[data-tema="topbos"] .idcek-wordmark{display:block;width:auto;height:28px;max-width:210px;margin:0;border-radius:0;object-fit:contain}
html[data-tema="topbos"] .idcek-wordmark[hidden]{display:none}
html[data-tema="topbos"] .idcek-wordmark[style*="--logo-nama"]{object-position:-99999px 0;background:var(--idk-merek);
  -webkit-mask:var(--logo-nama) center/contain no-repeat;mask:var(--logo-nama) center/contain no-repeat}
html[data-tema="topbos"] .paycard .idcek-judul{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip:auto;white-space:normal;text-align:center}
html[data-tema="topbos"] .paycard .idcek-judul{color:var(--idk-judul);font:500 11px/1.3 var(--h-disp);letter-spacing:.2em;text-transform:uppercase;text-shadow:none}
html[data-tema="topbos"] .idcek-hias{display:none}
html[data-tema="topbos"] .idcek-tutup{top:10px;right:10px;width:32px;height:32px;border:0;border-radius:0;background:transparent;color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-line-2)}
html[data-tema="topbos"] .idcek-panel{gap:12px;padding:0;border-radius:0;background:var(--idk-panel);box-shadow:none}
html[data-tema="topbos"] .idcek-baris{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
html[data-tema="topbos"] .idcek-ikon{width:44px;height:44px;margin:0;border-radius:0;background:var(--idk-ikon);color:var(--idk-ikon-tx);box-shadow:inset 0 0 0 1px var(--idk-ikon-garis)}
html[data-tema="topbos"] .idcek-ikon svg{width:20px;height:20px}
html[data-tema="topbos"] .idcek-ikon-nama{color:var(--h-amber)}
html[data-tema="topbos"] .idcek-label{margin:0 0 4px 1px;font:600 10.5px/1.2 var(--h-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--idk-label)}
html[data-tema="topbos"] .idcek-nilai{min-height:40px;padding:7px 12px;border:1px solid var(--idk-pil-garis);border-radius:0;background:var(--idk-pil);font:500 19px/24px var(--h-disp);letter-spacing:.06em;color:var(--idk-teks)}
html[data-tema="topbos"] .idcek-nilai.panjang{font-size:16px;line-height:22px}
html[data-tema="topbos"] .idcek-nilai.sangat-panjang{font-size:14px;line-height:19px;letter-spacing:0}
html[data-tema="topbos"] .idcek-catatan{margin:14px 4px 0;color:var(--idk-catatan)}
html[data-tema="topbos"] .idcek-aksi{margin:14px 0 0}
html[data-tema="topbos"] .idcek-aksi button{min-height:46px;border-radius:0;font:600 13px/1 var(--h-disp);letter-spacing:.16em;text-transform:uppercase}
html[data-tema="topbos"] .idcek-ubah{background:transparent;color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-line-2)}
html[data-tema="topbos"] .idcek-benar{background:var(--h-putih);color:var(--h-g1);box-shadow:none}
/* == /POP-UP CEK ID ================================================= */

/* == SUSUNAN KARTU: MEMANJANG ======================================== */
/* Pilihan domain "memanjang" (kerangka di style.css): harga besar di kanan.
   Berlian terpilih pindah ke sudut ikon karena pojok kanan atas kini milik
   harga. Desktop lebar (>=1180px) punya panel ±640px: daftarnya dua lajur,
   bukan baris sepanjang panel. Desktop sempit (900-1179px) panelnya ±445-640px:
   dua lajur di sana memeras nama sampai patah per huruf, jadi tetap satu lajur
   (aturan style.css). Turunan HUD mewarisi blok ini (npm run tema:bangun). */
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod{--k-harga:18px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .n{font-size:12.5px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 9px);right:auto;left:41px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::after{top:calc(50% + 14px);right:auto;left:49px}
@media (min-width:1180px){
  html[data-tema="topbos"][data-kartu="memanjang"] #products.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:360px){
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod{--k-harga:15px}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .n{font-size:11.5px}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 7px);left:35px}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::after{top:calc(50% + 12px);left:43px}
}
/* == /SUSUNAN KARTU ================================================== */

/* == TRANSAKSI TERBARU & NOTIFIKASI PEMBELIAN ======================== */
/* Notifikasi pembelian memakai bentuk notifikasi HUD yang sama dengan ajakan
   pasang aplikasi (siku, sudut 4px, panel gelap 95%); keduanya tidak pernah
   tampil bersamaan. Daftar transaksi memakai .card HUD apa adanya. HUD Terang
   mewarisi blok ini (npm run tema:bangun) dan menerangkannya di lapisannya. */
html[data-tema="topbos"] .notif-beli{border:1px solid var(--h-line-2);border-radius:4px;background:var(--h-siku),rgba(17,21,29,.95);color:var(--txt);box-shadow:0 22px 48px -14px rgba(0,0,0,.82)}
html[data-tema="topbos"] .notif-beli-ikon{border-radius:4px;box-shadow:0 0 0 1px var(--h-line-2)}
html[data-tema="topbos"] .notif-beli-teks b{color:var(--h-putih)}
html[data-tema="topbos"] .notif-beli-tutup{border-radius:4px}
html[data-tema="topbos"] .notif-beli-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="topbos"] :is(.tx-kepala h2,.tx-judul-kolom){font-family:var(--h-disp);letter-spacing:.1em;text-transform:uppercase}
/* Desktop: halaman Pesanan tanpa kolom kiri, jadi daftar ini selalu lebar penuh (tabel
   lima kolom lewat container query style.css) untuk tamu maupun pembeli yang masuk. */
/* == /TRANSAKSI TERBARU & NOTIFIKASI PEMBELIAN ======================= */

/* == ULASAN TOKO ===================================================== */
/* Kosakata HUD: panel bersiku tipis, label kapital Tomorrow berjarak lebar,
   sudut 4px, penanda berlian. Bintang tetap emas; biru merek memimpin tombol
   kirim seperti aksi lain. Warna permukaan lewat --h-* supaya HUD Terang
   (turunan berkas ini) cukup menukar beberapa nada di lapisannya. */
html[data-tema="topbos"]{--ul-emas:#f2b23a;--ul-kosong:rgba(214,226,255,.18)}
html[data-tema="topbos"] :is(.ul-ajak,.ul-lembar,.ul-lacak,.ul-item,.ul-produk-baris,.ul-catatan-cs,.ul-isian textarea,.ul-catatan-cs a,
  .ul-kirim,.ul-tanda,.ul-ajak-ikon,.ul-chips button,.ul-saring button,.ul-tag-ringkas span,.ul-item-tag span,.ul-status,.ul-kabar,.ul-galat,
  .ul-kosong-daftar,.ul-avatar,.ul-produk-baris img,.ul-produk-ikon,.ul-tutup,.ul-pilih button){border-radius:4px}
/* Label kapital Tomorrow, sama dengan label HUD lain. */
html[data-tema="topbos"] :is(.ul-ajak-kicker,.ul-lembar-kepala span,.ul-label-nilai,.ul-lacak span,
  .ul-produk,.ul-isian>span,.ul-kirim,.ul-status,.ul-ajak.terkirim b,.ul-ajak.terkirim a,.ul-catatan-cs a){font-family:var(--h-disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="topbos"] :is(.ul-skor-angka b,.ul-sebaran em,.ul-sebaran li span,.ul-avatar){font-family:var(--h-disp);font-weight:600;letter-spacing:0}
/* Seksi beranda: kartu HUD biasa; penanda bintang menggantikan nomor langkah. */
html[data-tema="topbos"] .ul-tanda{width:auto;height:auto;padding:4px 6px;border:1px solid var(--h-line-2);background:transparent}
html[data-tema="topbos"] .ul-tanda svg{width:11px;height:11px}
html[data-tema="topbos"] .ul-skor-angka b{font-size:46px;color:var(--h-putih)}
html[data-tema="topbos"] .ul-sebaran i{height:4px;border-radius:0;background:var(--h-line)}
html[data-tema="topbos"] .ul-sebaran i::before{border-radius:0}
html[data-tema="topbos"] .ul-puas{padding:9px 10px;border:1px solid color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 7%,transparent);font-size:12.5px}
html[data-tema="topbos"] .ul-puas b{color:var(--h-mint)}
html[data-tema="topbos"] .ul-puas::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="topbos"] .ul-tag-ringkas span{border:1px solid var(--h-line);background:var(--h-field);font-size:12px;color:var(--txt)}
html[data-tema="topbos"] .ul-item{border-color:var(--h-line);background:var(--h-panel);box-shadow:none}
html[data-tema="topbos"] .ul-geser .ul-item{background:var(--h-field)}
html[data-tema="topbos"] .ul-avatar{background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="topbos"] .ul-nama small{color:var(--h-mint)}
html[data-tema="topbos"] .ul-produk{font-size:10px;color:var(--muted)}
html[data-tema="topbos"] .ul-item-tag span{border:1px solid var(--h-line);background:transparent}
html[data-tema="topbos"] .ul-balasan{border-left:2px solid var(--brand);border-radius:0;background:var(--h-biru-tipis)}
html[data-tema="topbos"] .ul-balasan b{color:var(--h-biru-teks)}
/* Kartu bintang di panel bayar: panel cekung bertepi emas tipis. */
html[data-tema="topbos"] .ul-ajak{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 6%,transparent)}
html[data-tema="topbos"] .ul-ajak-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ul-emas)}
html[data-tema="topbos"] .ul-ajak-kicker::before{content:"";width:6px;height:6px;background:var(--ul-emas);transform:rotate(45deg)}
html[data-tema="topbos"] .ul-ajak b.ul-ajak-judul{font-size:16.5px;font-weight:700;color:var(--h-putih)}
html[data-tema="topbos"] .ul-pilih svg{stroke:color-mix(in srgb,var(--h-putih) 34%,transparent)}
html[data-tema="topbos"] .ul-pilih button.on svg{stroke:var(--ul-emas)}
html[data-tema="topbos"] .ul-ajak.terkirim{border-color:color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 7%,transparent)}
html[data-tema="topbos"] .ul-ajak.terkirim.tinjau{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 7%,transparent)}
html[data-tema="topbos"] .ul-ajak-ikon{background:color-mix(in srgb,var(--h-mint) 20%,transparent);color:var(--h-mint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h-mint) 40%,transparent)}
html[data-tema="topbos"] .ul-ajak.tinjau .ul-ajak-ikon{background:color-mix(in srgb,var(--ul-emas) 20%,transparent);color:var(--ul-emas);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ul-emas) 45%,transparent)}
html[data-tema="topbos"] .ul-ajak.terkirim b{font-size:12px;color:var(--h-putih)}
html[data-tema="topbos"] .ul-ajak.terkirim p{color:var(--txt)}
html[data-tema="topbos"] .ul-ajak.terkirim a{font-size:11px;color:var(--h-biru-teks)}
/* Lembar: panel bersiku, garis merek di tepi atas, siku hanya di dua sudut atas. */
html[data-tema="topbos"] .ul-latar{background:var(--t-scrim)}
html[data-tema="topbos"] .ul-lembar{border-top:2px solid var(--brand);color:var(--txt);box-shadow:0 -10px 30px rgba(0,0,0,.5);
  background:linear-gradient(var(--brand),var(--brand)) left 0 top 0/1.5px 14px no-repeat,linear-gradient(var(--brand),var(--brand)) right 0 top 0/1.5px 14px no-repeat,var(--h-g2)}
html[data-tema="topbos"] .ul-pegangan{border-radius:0;background:var(--h-line-2)}
html[data-tema="topbos"] .ul-lembar-kepala span{font-size:10.5px;color:var(--muted)}
html[data-tema="topbos"] .ul-produk-baris{border:1px solid var(--h-line);background:var(--h-field)}
html[data-tema="topbos"] :is(.ul-produk-baris img,.ul-produk-ikon){background:var(--h-g3)}
html[data-tema="topbos"] .ul-produk-baris b{font-family:var(--h-disp);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--h-putih)}
html[data-tema="topbos"] .ul-label-nilai{font-size:11.5px;color:var(--ul-emas)}
html[data-tema="topbos"] .ul-label-nilai.rendah{color:var(--h-rose)}
html[data-tema="topbos"] .ul-chips button{border-color:var(--h-line);background:transparent;color:var(--txt)}
html[data-tema="topbos"] .ul-chips button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="topbos"] .ul-isian>span{font-size:10px;color:var(--muted)}
html[data-tema="topbos"] .ul-isian textarea{border-color:var(--h-line);background:var(--h-field);color:var(--txt)}
html[data-tema="topbos"] .ul-isian textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--h-biru-tipis)}
html[data-tema="topbos"] .ul-catatan-cs{border-color:color-mix(in srgb,var(--ul-emas) 40%,transparent);background:color-mix(in srgb,var(--ul-emas) 7%,transparent);color:var(--txt)}
html[data-tema="topbos"] .ul-catatan-cs a{border-color:var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px}
html[data-tema="topbos"] .ul-kirim{min-height:50px;background:var(--brand);color:var(--brand-on,#fff);font-size:13px;letter-spacing:.2em}
html[data-tema="topbos"] .ul-kirim:disabled{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--h-line);opacity:1}
html[data-tema="topbos"] .ul-nanti{font-size:13px}
/* Lacak & nota: baris cekung seperti isi kartu lacak lainnya. */
html[data-tema="topbos"] .ul-lacak{border-color:var(--h-line);background:var(--h-field)}
html[data-tema="topbos"] .ul-lacak span{font-size:10px;color:var(--muted)}
html[data-tema="topbos"] .ul-status{font-size:9.5px;letter-spacing:.12em}
html[data-tema="topbos"] .ul-status.tayang{border:1px solid color-mix(in srgb,var(--h-mint) 30%,transparent);background:color-mix(in srgb,var(--h-mint) 8%,transparent);color:var(--h-mint)}
html[data-tema="topbos"] .ul-status.tinjau{border:1px solid color-mix(in srgb,var(--ul-emas) 40%,transparent);background:transparent;color:var(--ul-emas)}
html[data-tema="topbos"] .ul-status.sembunyi{border:1px solid var(--h-line);background:transparent;color:var(--muted)}
/* Halaman /ulasan. */
html[data-tema="topbos"] .ul-saring button{border-color:var(--h-line);background:var(--h-panel);color:var(--txt)}
html[data-tema="topbos"] .ul-saring button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="topbos"] .ul-kabar{border-color:var(--h-line);background:var(--h-siku),var(--h-panel)}
html[data-tema="topbos"] .ul-kosong-daftar{border-color:var(--h-line);color:var(--muted)}
/* == /ULASAN TOKO ==================================================== */

/* == LAPISAN TOPBOS ================================================
   SUMBER lapisan tema topbos (eksklusif topbos.id). Berkas tema yang
   sesungguhnya (web/site/tema/topbos.css) DIHASILKAN oleh
   scripts/bangun-tema-turunan.js: badan hud.css dengan awalan
   html[data-tema="topbos"], jembatan tokennya sendiri, lalu lapisan ini
   disisipkan tepat SEBELUM blok AKSEN MEREK. Sunting di sini (atau di
   hud.css), lalu jalankan `npm run tema:bangun`.

   KERANGKA = HUD: urutan langkah 01-04, bilah Total, nav bawah bertombol
   tengah, desktop 1120px dua kolom dengan nav naik ke kepala. KULIT = toko
   topbos.com/m/ (Taka 9 Okt 2026): kanvas ungu tua, panel lavender bersudut
   kiri-atas & kanan-bawah dipotong miring, papan nominal ungu bergradasi,
   tombol 3D bertulisan krem miring, tab pil miring, judul Barlow Condensed
   tebal miring. topbos.com menggambar tombol & angkanya sebagai PNG; di
   sini semuanya CSS, jadi harga tetap dari server dan tanpa unduhan gambar.
   Logo, maskot, dan gambar milik topbos.com TIDAK dipakai — hanya gayanya.

   Peran warna:
     warna merek domain = aksi & uang (Cek, harga, Pilih Pembayaran, Bayar,
       tombol tengah nav). topbos.id memakai hijau #20cc7c; gradien 3D-nya
       diturunkan dari var(--brand), jadi tidak ada --brand di berkas ini;
     magenta = pilihan aktif (tab, nominal, metode);
     emas    = total, poin, tombol Masuk/Akun desktop;
     tinta navy di atas lavender, putih di atas kanvas ungu.

   Kekhususan: lapisan duduk SESUDAH badan HUD, jadi pemilih yang sama
   panjangnya sudah menang. Aturan HUD yang memakai ID di dalam :is()
   (#sum-price, #check-btn, …) ditimpa dengan :is() ber-ID juga; tombol uang
   memakai awalan `body` karena blok AKSEN MEREK (1,3,2) datang sesudahnya.
   Folder tema-sumber TIDAK disajikan express.static (hanya web/site). */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url('huruf/barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url('huruf/barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url('huruf/barlow-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url('huruf/barlow-condensed-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url('huruf/barlow-condensed-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:700;font-display:swap;src:url('huruf/barlow-condensed-700-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url('huruf/barlow-condensed-800-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html[data-tema="topbos"]{
  /* Palet tema */
  --tb-u0:#140f3d;--tb-u1:#1d1656;--tb-u2:#2a2178;--tb-u3:#3d349a;--tb-u4:#5a48c6;--tb-u5:#7e66de;
  --tb-l1:#eeeafd;--tb-l3:#c9bdf2;--tb-l4:#a996ec;
  --tb-tinta:#21166b;--tb-tinta-2:#3f3584;--tb-redup:#544c8e;--tb-redup-2:#857cbb;
  --tb-emas:#ffe27a;--tb-krem:#fff4c2;
  --tb-mg-1:#f472dc;--tb-mg-2:#c84fe6;--tb-mg-3:#9b3fd6;
  --tb-rose:#a3163d;
  --tb-c:16px;--tb-c-kecil:10px;
  --tb-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --tb-teks:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Bentuk khas: sudut kiri-atas & kanan-bawah dipotong miring. clip-path ikut
     memotong garis tepi, jadi sisi miringnya diberi garis lewat lapisan latar. */
  --tb-potong:polygon(var(--tb-c) 0,100% 0,100% calc(100% - var(--tb-c)),calc(100% - var(--tb-c)) 100%,0 100%,0 var(--tb-c));
  --tb-potong-kecil:polygon(var(--tb-c-kecil) 0,100% 0,100% calc(100% - var(--tb-c-kecil)),calc(100% - var(--tb-c-kecil)) 100%,0 100%,0 var(--tb-c-kecil));
  --tb-tepi-miring:
    linear-gradient(135deg,transparent 11px,rgba(255,255,255,.95) 11px 12.6px,transparent 12.6px) left top/26px 26px no-repeat,
    linear-gradient(315deg,transparent 11px,rgba(255,255,255,.95) 11px 12.6px,transparent 12.6px) right bottom/26px 26px no-repeat;
  --tb-tepi-miring-kecil:
    linear-gradient(135deg,transparent 6.8px,rgba(255,255,255,.95) 6.8px 8.2px,transparent 8.2px) left top/18px 18px no-repeat,
    linear-gradient(315deg,transparent 6.8px,rgba(255,255,255,.95) 6.8px 8.2px,transparent 8.2px) right bottom/18px 18px no-repeat;
  --tb-panel:linear-gradient(180deg,#f6f4ff 0%,#e9e4fc 46%,#ddd5f8 100%);
  --tb-panel-bayang:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 0 3px rgba(126,102,222,.22),inset 0 -14px 26px -18px rgba(90,64,200,.35);
  --tb-papan:linear-gradient(180deg,#3b3297 0%,#5440bd 52%,#7a62dc 100%);
  --tb-kartu:linear-gradient(180deg,#faf9ff 0%,#ebe6fd 55%,#dcd3f8 100%);
  --tb-kartu-aktif:linear-gradient(180deg,#fff 0%,#f6e9ff 55%,#ecd5fb 100%);
  /* Bidang magenta bertulisan putih (tab aktif, lencana, hari ini) lebih tua dari cincin
     pilihan --tb-mg-2: putih di #c84fe6 cuma 3,7:1, di #a332c9 5,4:1. */
  --tb-magenta:linear-gradient(180deg,#bf4bdc 0%,#a332c9 55%,#8a28b8 100%);
  --tb-emas-bidang:linear-gradient(180deg,#ffe98f,#ffcf3a 50%,#f0a800);
  --tb-angka:linear-gradient(180deg,#8a33db 0%,#4a1fa8 100%);
  --tb-kanvas:
    radial-gradient(120% 420px at 50% -120px,rgba(162,132,255,.42),transparent 70%) no-repeat,
    radial-gradient(60% 50% at 100% 40%,rgba(64,214,255,.10),transparent 70%) no-repeat,
    radial-gradient(60% 50% at 0% 75%,rgba(232,92,214,.12),transparent 70%) no-repeat,
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#2a2178 0%,#1d1656 38%,#160f45 100%);
  /* Aksi = warna merek domain, dibuat 3D: sorot atas, badan, bibir bawah. */
  --tb-a1:color-mix(in oklab,var(--brand) 70%,#fff);
  --tb-a3:color-mix(in oklab,var(--brand) 82%,#000);
  --tb-a-tepi:color-mix(in oklab,var(--brand) 55%,#000);
  --tb-aksi:linear-gradient(180deg,var(--tb-a1) 0%,var(--brand) 42%,var(--tb-a3) 100%);
  --tb-aksi-hover:linear-gradient(180deg,color-mix(in oklab,var(--brand) 55%,#fff) 0%,color-mix(in oklab,var(--brand) 88%,#fff) 42%,var(--brand) 100%);
  --tb-aksi-bayang:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.16),0 3px 0 var(--tb-a-tepi),0 9px 16px -6px color-mix(in srgb,var(--tb-a-tepi) 70%,transparent);
  /* Tulisan krem bergaris gelap seperti tombol harga topbos: garisnya (bibir 3D) yang
     menjaga keterbacaan, jadi tetap terbaca di warna merek terang maupun gelap. */
  --tb-aksi-tx:#fff4c2;
  /* Garis tepi krem 8 arah + bibir bawah: krem di hijau merek hanya ~1,9:1, jadi garis
     hijau tua (krem : garis 5,8:1) yang membuat tulisan terbaca. 4 arah saja bolong di sudut. */
  --tb-aksi-garis:1px 0 0 var(--tb-a-tepi),-1px 0 0 var(--tb-a-tepi),0 1px 0 var(--tb-a-tepi),0 -1px 0 var(--tb-a-tepi),
    1px 1px 0 var(--tb-a-tepi),-1px 1px 0 var(--tb-a-tepi),1px -1px 0 var(--tb-a-tepi),-1px -1px 0 var(--tb-a-tepi),0 2px 0 var(--tb-a-tepi);

  /* Token inti & HUD dipetakan ulang: panel terang, kanvas gelap. */
  --bg:#1d1656;--card:#eeeafd;--txt:#2d2373;--muted:#544c8e;--line:#cfc5f3;
  --gold:#ffd45a;--gold-d:#c98a00;
  --ok-bg:#dcf7ea;--ok-tx:#0b7a47;--err-bg:#ffe3ea;--err-tx:#a3163d;
  --t-bg:#1d1656;--t-frame:#140f3d;--t-surface:#eeeafd;--t-field:#ffffff;--t-fill:#e0d9f8;--t-line:#cfc5f3;
  --t-text:#2d2373;--t-muted:#544c8e;--t-subtle:#857cbb;
  --t-accent:var(--brand);--t-accent-d:var(--brand-d);--t-accent-text:#7b2fc4;--t-accent-soft:#f4e6fd;--t-accent-line:#e3b8f5;--t-on-accent:var(--brand-on,#fff);
  --t-deep:#1d1656;--t-deep-2:#2a2178;--t-on-deep:#fff;--t-on-deep-muted:rgba(232,226,255,.74);--t-scrim:rgba(14,9,44,.78);
  --t-ok:#16b46c;--t-ok-d:#0b8a50;--t-ok-soft:#dcf7ea;--t-ok-text:#0b7a47;
  --t-err:#ff5c7f;--t-err-d:#a3163d;--t-err-soft:#ffe3ea;--t-err-line:#ffb3c4;--t-err-text:#a3163d;
  --t-warn-soft:#fff1c4;--t-warn-line:#f3d27a;--t-warn-text:#7a4f00;
  --t-gold:#ffd45a;--t-gold-d:#c98a00;--t-gold-soft:#fff1c4;--t-gold-text:#7a4f00;--t-on-gold:#3a2600;--t-promo:#ff3d8b;
  --t-font:var(--tb-teks);--t-font-display:var(--tb-disp);
  --t-on-bg:#f1edff;--t-on-bg-muted:rgba(225,218,255,.78);--t-on-bg-link:#ffe27a;
  --h-disp:var(--tb-disp);
  --h-g0:#140f3d;--h-g1:#1d1656;--h-g2:#2a2178;--h-g3:#3d349a;
  --h-panel:#ebe7fc;--h-field:#ffffff;
  --h-line:rgba(70,48,180,.16);--h-line-2:rgba(70,48,180,.3);
  --h-aksen:#ffe27a;
  /* Di HUD gelap "bidang terang" untuk teks di atas grafit; di sini tinta navy di atas lavender. */
  --h-putih:#21166b;
  --h-biru:#7e66de;--h-biru-teks:#5a3fc4;--h-biru-terang:#21166b;
  --h-biru-tipis:rgba(200,79,230,.12);--h-biru-cincin:rgba(126,102,222,.55);
  --h-mint:#0b7a47;--h-amber:#8a5a00;--h-rose:#a3163d;
  --h-siku:linear-gradient(transparent,transparent);
  --h-kanvas:var(--tb-kanvas);
}
html[data-tema="topbos"] body{color:var(--txt);background:var(--tb-kanvas);background-attachment:fixed;font-family:var(--tb-teks)}
html[data-tema="topbos"] :is(input,select,textarea){color:var(--tb-tinta);color-scheme:light}
html[data-tema="topbos"] ::selection{background:rgba(200,79,230,.28);color:var(--tb-tinta)}

/* Label kecil kapital: Barlow Condensed tebal, bukan Tomorrow berjarak lebar. */
html[data-tema="topbos"] :is(.section-kicker,.summary-assurance,.pay-kicker,.track-overline,.pay-invoice-label,
  .account-meters span,.wallet-pass-balance span,.order-ticket-top span,.track-ticket span,
  .checkout-benefits-head>span,.external-pay-head>span,.track-detail-grid span,.track-buyer span:not(.track-avatar),
  .entry-status,.tier-chip,.seo-eyebrow,.seo-block-label,.ident-segel>span,.ident-kebijakan a,.ident-copy,
  .account-session-note){font-family:var(--tb-disp);font-weight:700;letter-spacing:.06em}

/* Judul, nama, dan menu: Barlow Condensed tebal miring kapital ala topbos.
   Daftarnya SAMA dengan daftar "kekakuan dikendurkan" di badan HUD (yang
   mengembalikannya ke huruf teks biasa) supaya kekhususannya sama (0,3,1)
   dan aturan ini menang karena datang sesudahnya. Yang sengaja TIDAK ikut
   (tetap huruf teks Barlow tebal dari badan HUD): pertanyaan FAQ, nama metode
   bayar, judul artikel Info, dan judul baris riwayat — kalimat panjang. */
html[data-tema="topbos"] :is(.card h2,.page-head h1,.pay-page h3,.prod .n,.account-menu a,.account-menu button,
  .player-identity strong,.checkin-card strong,.spender-head h2,.seo-artikel h2,.seo-artikel h3,.track-status-head strong,
  .benefit-card b,.benefit-card strong,.wallet-topup-head h4,.cs-copy b,.pay-invoice-product,
  .track-buyer strong,.track-detail-grid b,.account-subhead strong,.ident-name,.ident-legal-nama,
  .b-brand span,.flash-sale-head h3,.wallet-pass-copy strong,.seo-return span){
  font-family:var(--tb-disp);font-style:italic;font-weight:800;letter-spacing:.005em;text-transform:uppercase}

/* ── Kepala: kaca ungu tua, garis sorot warna merek ─────────────────── */
html[data-tema="topbos"] .hdr{color:#fff;border-bottom:0;background:linear-gradient(180deg,rgba(44,33,128,.95),rgba(29,22,86,.93));
  box-shadow:inset 0 -1px 0 rgba(190,170,255,.32),0 10px 24px -12px rgba(8,4,32,.8)}
html[data-tema="topbos"] .hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 8%,color-mix(in srgb,var(--brand) 80%,#fff) 50%,transparent 92%)}
/* Nama toko: putih ke krem, bayangan ungu tebal. drop-shadow, bukan text-shadow:
   text-shadow menimpa isi gradien background-clip:text. Padding kanan = ruang
   ekor huruf miring yang kalau tidak terpotong kotak latarnya. */
html[data-tema="topbos"] #brand-name{padding-right:4px;color:transparent;background:linear-gradient(180deg,#fff 30%,#ffeaa3 100%);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #3a2a9e) drop-shadow(0 0 10px rgba(170,140,255,.55));
  font:italic 800 26px/1.1 var(--tb-disp);letter-spacing:.01em;text-transform:uppercase}
html[data-tema="topbos"] .brand img#brand-logo{border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
/* Logo nama (bila diunggah) putih di atas kepala ungu, bukan warna merek. */
html[data-tema="topbos"] .brand img#brand-wordmark{filter:brightness(0) invert(1)}
html[data-tema="topbos"] :is(.brand img#brand-wordmark,.b-brand img.b-wordmark,.ident-wordmark)[style*="--logo-nama"]{background:#fff}
html[data-tema="topbos"] .hdr-back{border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-tema="topbos"] .hdr-back:hover{background:rgba(255,255,255,.2)}
/* Tombol pasang aplikasi di kepala = tombol "Download" ala topbos. */
html[data-tema="topbos"] .pwa-pasang-hdr{height:34px;padding:0 13px;border:0;border-radius:9px;background:var(--tb-aksi);color:var(--tb-aksi-tx);
  box-shadow:var(--tb-aksi-bayang);font:italic 800 13px/1 var(--tb-disp);letter-spacing:.04em;text-transform:uppercase;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .pwa-pasang-hdr:hover{background:var(--tb-aksi-hover)}

/* ── Hero (bila domain menyalakannya): gambar + kabut ungu, potong miring ─ */
html[data-tema="topbos"] .hero:not(.hero-mati){color:#fff;border:0;clip-path:var(--tb-potong);background-color:var(--tb-u1);
  background-image:linear-gradient(90deg,rgba(29,22,86,.96) 0%,rgba(29,22,86,.82) 42%,rgba(29,22,86,.18) 74%,rgba(29,22,86,0) 100%),
    linear-gradient(0deg,rgba(20,15,61,.85),transparent 48%),var(--hero-gambar,url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp'))!important;
  box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.55)}
html[data-tema="topbos"] .hero:not(.hero-mati)::before{inset:0;background:var(--tb-tepi-miring)}
html[data-tema="topbos"] .hero .badge{border:0;border-radius:4px;padding:5px 10px 6px;background:var(--tb-magenta);color:#fff;transform:skewX(-10deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);font:italic 800 12px/1 var(--tb-disp);letter-spacing:.04em;text-transform:uppercase}
html[data-tema="topbos"] .hero h1{padding-right:4px;color:transparent;background:linear-gradient(180deg,#fff 35%,#ffeaa3);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #2a1d86);font:italic 800 38px/1 var(--tb-disp);letter-spacing:.005em;text-transform:uppercase}
html[data-tema="topbos"] .hero .h1-kw{color:#e6defe;-webkit-text-fill-color:#e6defe;font:italic 700 16px/1.25 var(--tb-disp);letter-spacing:.02em;text-transform:none}
html[data-tema="topbos"] .hero p{color:rgba(232,226,255,.88)}
html[data-tema="topbos"] .hero-trust span{gap:6px;border:0;border-radius:4px;background:rgba(20,15,61,.78);box-shadow:inset 0 0 0 1px rgba(210,195,255,.35);
  color:#fff;font:italic 800 12px/1.1 var(--tb-disp);letter-spacing:.03em;text-transform:uppercase}
html[data-tema="topbos"] .hero-trust b{width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--tb-aksi);color:#fff;text-shadow:var(--tb-aksi-garis);
  font:800 9px/14px var(--tb-teks);text-align:center;transform:none}

/* ── Banner event ───────────────────────────────────────────────────── */
html[data-tema="topbos"] .event-slider{border-radius:0;clip-path:var(--tb-potong);box-shadow:none;background:var(--tb-u0)}
html[data-tema="topbos"] .event-slider::after{inset:0;opacity:1;background:var(--tb-tepi-miring)}
html[data-tema="topbos"] .event-nav{border-radius:50%;background:rgba(20,15,61,.8);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.5)}
html[data-tema="topbos"] .event-dots button{border-radius:2px;background:linear-gradient(rgba(225,218,255,.35),rgba(225,218,255,.35)) center/100% 3px no-repeat}
html[data-tema="topbos"] .event-dots button.is-on{background:linear-gradient(var(--tb-emas),var(--tb-emas)) center/100% 3px no-repeat}
html[data-tema="topbos"] .event-dots button:focus-visible{outline-color:var(--tb-emas)}

/* ── Panel lavender bersudut miring ─────────────────────────────────── */
html[data-tema="topbos"] :is(.card,.checkin-card,.account-spender-card,.wallet-topup-card,.player-pass,.account-rank,.track-order-card,.seo-artikel,
  .user-id-card-flow,.product-card,.topup-artikel,.account-menu,.cs-card){
  border:0;clip-path:var(--tb-potong);color:var(--txt);background:var(--tb-tepi-miring),var(--tb-panel);box-shadow:var(--tb-panel-bayang)}
html[data-tema="topbos"] .card{margin-bottom:14px;padding:18px 16px 16px}
/* Papan nominal: ungu bergradasi bergaris miring, kartu lavender di dalamnya. */
html[data-tema="topbos"] .product-card{
  background:var(--tb-tepi-miring),radial-gradient(90% 220px at 50% 0,rgba(255,255,255,.16),transparent 70%) no-repeat,
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px),var(--tb-papan);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 3px rgba(255,255,255,.08)}

/* ── Judul kartu: tebal miring + lencana langkah + gema nomor langkah ── */
/* :is() ber-ID: badan HUD memaku warna judul lewat :is(…,#sum-price,…) (1,1,1). */
html[data-tema="topbos"] :is(#sum-price,.card h2,.player-identity strong,.track-status-head strong,.seo-artikel h2,.pay-page h3){color:var(--tb-tinta)}
html[data-tema="topbos"] #view-topup{counter-reset:tb-langkah}
html[data-tema="topbos"] .card h2{position:relative;gap:10px;margin:0 0 16px;font:italic 800 22px/1.05 var(--tb-disp);letter-spacing:.005em;text-transform:uppercase}
html[data-tema="topbos"] #view-topup>.product-card>h2{color:#fff;text-shadow:0 2px 0 rgba(30,18,110,.55)}
html[data-tema="topbos"] .card h2:has(.num){counter-increment:tb-langkah}
/* Gema bergaris di belakang judul (di topbos.com: gema teks "AKUN HGI"; di sini
   nomor langkah, karena teks judul tidak bisa dibaca CSS). */
html[data-tema="topbos"] .card h2:has(.num)::after{content:"0" counter(tb-langkah);position:absolute;right:2px;top:50%;z-index:0;
  transform:translateY(-52%);color:transparent;-webkit-text-stroke:1.3px rgba(90,64,200,.2);font:italic 800 54px/1 var(--tb-disp);pointer-events:none}
html[data-tema="topbos"] #view-topup>.product-card>h2:has(.num)::after{-webkit-text-stroke-color:rgba(255,255,255,.22)}
/* Lencana langkah: jajar genjang warna merek berbayang ungu, seperti tanda garis miring topbos. */
html[data-tema="topbos"] .card h2 .num{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:34px;height:24px;
  flex:0 0 auto;padding:0 8px 0 7px;border:0;border-radius:3px;background:var(--tb-aksi);color:#fff;transform:skewX(-14deg);
  box-shadow:4px 0 0 var(--tb-u5),inset 0 1px 0 rgba(255,255,255,.5);font:italic 800 14px/1 var(--tb-disp);letter-spacing:.02em;
  /* Hijau terang tetap (Taka 9 Okt 2026: lebih bagus daripada hijau tua); putih di
     hijau terang cuma 2,3:1, jadi angkanya diberi garis hijau tua seperti tombol. */
  text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .user-id-head{position:relative}
html[data-tema="topbos"] .user-id-head h2{flex:1 1 auto;margin:0}

/* ── Isian ──────────────────────────────────────────────────────────── */
/* :is() ber-ID: daftar sudut 4px di badan HUD (1,1,1) memuat input. */
html[data-tema="topbos"] :is(input,textarea,select,#contact-email){border:1.5px solid var(--tb-l4);border-radius:10px;background:#fff;color:var(--tb-tinta);
  box-shadow:inset 0 2px 0 rgba(90,64,200,.08),0 0 0 3px rgba(255,255,255,.7)}
html[data-tema="topbos"] :is(input,textarea)::placeholder{color:#756cab;opacity:1}
html[data-tema="topbos"] :is(input,textarea,select,#contact-email):focus{border-color:var(--tb-mg-2);background:#fff;box-shadow:0 0 0 3px rgba(200,79,230,.22)}
html[data-tema="topbos"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount){font-family:var(--tb-disp);font-style:italic;font-weight:700;letter-spacing:.04em}
html[data-tema="topbos"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount)::placeholder{font-family:var(--tb-disp);font-style:italic;font-weight:700;letter-spacing:.02em}
html[data-tema="topbos"] .user-id-row{gap:8px;align-items:stretch}
/* Kotak User ID topbos: putih, ikon pensil, sudut kanan-bawah lebih bulat. */
html[data-tema="topbos"] .user-id-row #game-id{height:54px;padding-left:44px;border-radius:12px 12px 22px 12px;font-size:19px;line-height:1;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-4.6L15.6 4.8a2 2 0 0 1 2.8 0l.8.8a2 2 0 0 1 0 2.8L8.6 19 4 20z' fill='%237a5ce6'/%3E%3Cpath d='M14.4 6l3.6 3.6' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 14px center/20px no-repeat}
html[data-tema="topbos"] #track-input{height:54px;border-radius:12px 12px 22px 12px;font-size:18px}
html[data-tema="topbos"] #contact-email{height:50px;padding-left:14px;font:600 15px/1 var(--tb-teks)}
/* Tombol panduan User ID = bola "?" warna merek. Gambar panduan domain diganti tanda tanya. */
html[data-tema="topbos"] .user-id-row #user-id-guide-btn{width:44px;min-width:44px;height:44px;flex-basis:44px;align-self:center;border:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--tb-a1) 0,var(--brand) 48%,var(--tb-a3) 100%);
  box-shadow:0 3px 0 var(--tb-a-tepi),0 6px 12px -4px rgba(10,20,40,.45),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-tema="topbos"] .user-id-row #user-id-guide-btn:is(:hover,:focus-visible){border:0;background:radial-gradient(circle at 35% 30%,var(--tb-a1) 0,var(--brand) 60%,var(--tb-a3) 100%);
  box-shadow:0 3px 0 var(--tb-a-tepi),0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent)}
html[data-tema="topbos"] .user-id-row #user-id-guide-btn img{display:none}
html[data-tema="topbos"] .user-id-row #user-id-guide-btn::before{content:"?";color:var(--tb-aksi-tx);font:italic 800 24px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .user-id-copy{color:var(--tb-redup);font-size:13px;line-height:1.55}
html[data-tema="topbos"] .buyer{min-height:46px;padding:10px 14px;border:0;border-radius:10px;background:linear-gradient(90deg,#dcf7ea,#eefcf5);
  box-shadow:inset 0 0 0 1.5px rgba(22,180,108,.45);color:#0a7444;font:italic 700 16px/1.25 var(--tb-disp);letter-spacing:.02em}
html[data-tema="topbos"] .buyer.err{background:#ffe8ee;box-shadow:inset 0 0 0 1.5px rgba(214,51,95,.4);color:var(--tb-rose)}
html[data-tema="topbos"] .id-mode{padding:3px;border:0;border-radius:9px;background:var(--tb-u2);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
html[data-tema="topbos"] .id-mode button{border-radius:7px;color:rgba(255,255,255,.72);font:italic 700 12px/1 var(--tb-disp);letter-spacing:.04em}

/* ── Tombol aksi & uang: 3D warna merek, tulisan krem miring ────────── */
/* Awalan body: blok AKSEN MEREK (#buy-btn, #pay-body a.btn-full …, (1,3,2))
   datang SESUDAH lapisan ini dan akan menimpanya dengan warna polos. */
html[data-tema="topbos"] body :is(#check-btn,#track-go,#bulk-preview-btn,#buy-btn,.btn-full:not(.btn-outline),.nota-btn:not(.nota-btn-sekunder),.seo-toggle,
  .wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.bulk-confirm-yes,.event-popup-cta,
  .profile-save,.tg-miniapp-install-confirm,.order-ticket-actions button:last-child,#pay-body a.btn-full,.idcek-benar):not(:disabled){
  border:0;border-radius:10px;background:var(--tb-aksi);color:var(--tb-aksi-tx);box-shadow:var(--tb-aksi-bayang);
  font-family:var(--tb-disp);font-style:italic;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] body :is(#check-btn,#track-go,#bulk-preview-btn,#buy-btn,.btn-full:not(.btn-outline),.nota-btn:not(.nota-btn-sekunder),.seo-toggle,
  .wallet-topup-submit,.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.bulk-confirm-yes,.event-popup-cta,
  .profile-save,.tg-miniapp-install-confirm,.order-ticket-actions button:last-child,#pay-body a.btn-full,.idcek-benar):hover:not(:disabled){background:var(--tb-aksi-hover)}
html[data-tema="topbos"] body :is(#check-btn,#track-go,#buy-btn,.btn-full,.nota-btn,.wallet-topup-submit,.checkin-card button,.idcek-benar):active:not(:disabled){
  transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 var(--tb-a-tepi)}
html[data-tema="topbos"] body :is(#buy-btn,#check-btn,#track-go,.wallet-topup-submit,.checkin-card button,.tg-miniapp-install-confirm,.btn-full):disabled{
  border:0;border-radius:10px;background:linear-gradient(180deg,#d9d3f3,#c6bdea);color:#6f66a6;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 #aaa0d8;
  opacity:1;font-family:var(--tb-disp);font-style:italic;font-weight:800;text-transform:uppercase;text-shadow:none}
/* Tombol aksi kecil (badan HUD 10,5-12px): krem bergaris butuh huruf cukup besar supaya
   garis tepinya tidak memakan isi huruf. */
html[data-tema="topbos"] body :is(.checkin-card button,.track-ticket button,.wallet-pass-btn.primary,.seo-toggle,.order-ticket-actions button:last-child,
  .event-popup-cta,.tg-miniapp-install-confirm,.profile-save,.wallet-topup-submit,.bulk-confirm-yes,.pwa-pasang-btn,.pwa-pasang-hdr){font-size:14px}
html[data-tema="topbos"] :is(#check-btn,#track-go){height:54px;min-width:78px;padding:0 18px;font-size:19px;line-height:1}
html[data-tema="topbos"] #bulk-preview-btn{min-height:46px;font-size:16px}
html[data-tema="topbos"] body :is(#check-btn,#track-go,#buy-btn,#bulk-preview-btn,.btn-full,.nota-btn,.tabs button,.tabs a,.seo-toggle,.prod,.paym,.benefit-card):focus-visible{
  outline:2px solid var(--tb-mg-2);outline-offset:2px}
/* Tombol sekunder: lavender bergaris ungu. */
html[data-tema="topbos"] :is(.btn-full.btn-outline,.nota-btn-sekunder,.page-back,.order-ticket-actions button:not(:last-child),.track-nota-link,.account-more,
  .account-subhead button,.player-identity-actions button,.refund-opt button,.bulk-secondary,.idcek-ubah,.profile-cancel,.tg-miniapp-install-later,
  .wallet-pass-btn:not(.primary),.wallet-topup-record button,.transaction-entry>button,.bulk-confirm-no,.bulk-hist){
  border:0;border-radius:10px;background:linear-gradient(180deg,#fff,#ece7fd);color:var(--tb-u3);
  box-shadow:inset 0 0 0 1.5px var(--tb-l4),0 2px 0 var(--tb-l3);font-family:var(--tb-disp);font-style:italic;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
html[data-tema="topbos"] :is(.btn-full.btn-outline,.nota-btn-sekunder,.page-back):hover{background:linear-gradient(180deg,#fff,#f4f0ff)}
html[data-tema="topbos"] :is(.btn-full,.nota-btn){padding:15px 14px;font-size:17px;line-height:1.1}
html[data-tema="topbos"] .bulk-hist.is-active{color:#fff;background:var(--tb-magenta);box-shadow:none}

/* ── Tab kategori: lajur gelap berujung miring, aktif magenta ─────────── */
html[data-tema="topbos"] .tabs{gap:4px;margin:0 0 16px;padding:4px 10px;border:0;border-radius:0;background:rgba(18,12,60,.55);
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
html[data-tema="topbos"] .tabs button,html[data-tema="topbos"] .tabs a{padding:11px 16px;border:0;border-radius:0;background:transparent;color:rgba(236,230,255,.8);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font:italic 800 15px/1 var(--tb-disp);letter-spacing:.03em;text-transform:none;box-shadow:none}
html[data-tema="topbos"] :is(.tabs button,.tabs a)+:is(button,a){margin-left:0}
/* #cats/#id-mode: aturan aktif HUD (0,4,3) lebih panjang dari pemilih kelas biasa. */
html[data-tema="topbos"] :is(#cats,#id-mode) :is(button.active,a.active,button.is-on){border-color:transparent;background:var(--tb-magenta);color:#fff;
  text-shadow:0 1px 0 rgba(90,20,120,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

/* ── Kartu nominal (susunan kotak) ──────────────────────────────────── */
html[data-tema="topbos"] .grid{gap:10px}
html[data-tema="topbos"] .prod{grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:7px;min-height:96px;padding:11px 11px 12px;border:0;
  clip-path:var(--tb-potong-kecil);color:var(--tb-tinta);
  background:var(--tb-tepi-miring-kecil),linear-gradient(90deg,rgba(255,255,255,.55) 0 58px,transparent 58px),var(--tb-kartu);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 -10px 18px -12px rgba(90,64,200,.45)}
html[data-tema="topbos"] .prod:hover{border:0;filter:brightness(1.03)}
html[data-tema="topbos"] .prod .ic{width:44px;height:44px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fff,#e9e2ff 70%);box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .prod.prod-image-native .ic{background:transparent;box-shadow:none}
html[data-tema="topbos"] .prod.prod-image-native .ic img{width:44px;height:44px;filter:drop-shadow(0 3px 3px rgba(60,30,140,.28))}
/* Nama nominal: ungu bergradasi seperti angka koin topbos. */
html[data-tema="topbos"] .prod .n{color:transparent;background:var(--tb-angka);-webkit-background-clip:text;background-clip:text;
  font:italic 800 17px/1.05 var(--tb-disp);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:anywhere}
html[data-tema="topbos"] .prod .n small{color:var(--tb-redup);-webkit-text-fill-color:var(--tb-redup);font:600 11px/1.3 var(--tb-teks);text-transform:none}
/* Harga = tombol harga topbos: 3D warna merek, krem miring. #products/#flash-products:
   badan HUD memaku warna & pendar harga lewat :is(#sum-price,.prod-price strong,…) (1,1,1). */
html[data-tema="topbos"] .prod-price{gap:5px}
html[data-tema="topbos"] :is(#products,#flash-products) :is(.prod-price strong,.prod .p){display:inline-block;padding:6px 10px 7px;border-radius:8px;background:var(--tb-aksi);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.14),0 2.5px 0 var(--tb-a-tepi);
  color:var(--tb-aksi-tx);font:italic 800 clamp(14px,4.1vw,18px)/1 var(--tb-disp);letter-spacing:.01em;text-shadow:var(--tb-aksi-garis);white-space:nowrap}
html[data-tema="topbos"] .prod-price del{color:var(--tb-redup-2);font:italic 700 12px/1 var(--tb-disp)}
html[data-tema="topbos"] .prod-points{padding:3px 7px;border-radius:5px;background:linear-gradient(180deg,#fff6cf,#ffe48a);color:#7a4f00;
  box-shadow:inset 0 0 0 1px rgba(201,138,0,.35);font:italic 800 11.5px/1 var(--tb-disp);letter-spacing:.02em}
html[data-tema="topbos"] .prod-diskon{border:0;border-radius:4px;background:var(--tb-u3);color:#fff;font:italic 800 11px/1 var(--tb-disp)}
html[data-tema="topbos"] .prod-diskon.prod-diskon-promo{background:var(--t-promo);color:#fff}
html[data-tema="topbos"] .promo-badge{top:-1px;right:12px;padding:3px 8px 4px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#ff6fb0,#ff2e7e);color:#fff;
  font:italic 800 11px/1 var(--tb-disp);letter-spacing:.04em;box-shadow:0 2px 0 #b1135a}
/* Terpilih: cincin magenta + lencana centang bulat. */
html[data-tema="topbos"] :is(#products,#flash-products) .prod.active{border:0;color:var(--tb-tinta);
  background:var(--tb-tepi-miring-kecil),linear-gradient(90deg,rgba(255,255,255,.6) 0 58px,transparent 58px),var(--tb-kartu-aktif);
  box-shadow:inset 0 0 0 2.5px var(--tb-mg-2),inset 0 0 0 5px rgba(255,255,255,.85),inset 0 -10px 18px -12px rgba(200,79,230,.6)}
html[data-tema="topbos"] .prod.active .n{padding-right:24px;color:transparent}
html[data-tema="topbos"] .prod.active::before{top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--tb-magenta);transform:none;box-shadow:0 2px 0 var(--tb-mg-3)}
html[data-tema="topbos"] .prod.active::after{top:13px;right:16px;border-color:#fff}
html[data-tema="topbos"] .promo-copy b{color:#9b1f6b}
html[data-tema="topbos"] .promo-copy small{color:var(--tb-redup)}
html[data-tema="topbos"] .flash-sale{border:0;border-radius:12px;background:linear-gradient(180deg,rgba(255,61,139,.22),rgba(255,61,139,.06));box-shadow:inset 0 0 0 1.5px rgba(255,140,190,.55)}
html[data-tema="topbos"] .flash-ticket{border-radius:4px;background:linear-gradient(180deg,#ff6fb0,#ff2e7e);color:#fff;font:italic 800 12px/1 var(--tb-disp);letter-spacing:.06em}
html[data-tema="topbos"] .flash-sale-head h3{color:#fff;font:italic 800 18px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .flash-sale-head p{color:rgba(240,234,255,.78)}
html[data-tema="topbos"] .catalog-empty{color:rgba(240,234,255,.82)}

/* ── Susunan MEMANJANG (= daftar Koin topbos.com) ───────────────────── */
/* Bawaan tema tetap kotak seperti HUD; topbos.id memilih "Memanjang" di
   setelan Susunan kartu domain (Studio Branding), jadi server memasang
   data-kartu="memanjang" dan kerangka style.css + blok memanjang HUD aktif.
   Di sini hanya kulitnya: ikon besar di kantong kiri bertepi miring, nama
   besar ungu, poin di bawahnya, harga tombol 3D di kanan. */
html[data-tema="topbos"][data-kartu="memanjang"] #products.grid{gap:10px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod{--k-ikon:62px;min-height:92px;column-gap:16px;padding:10px 14px 10px 10px;
  background:var(--tb-tepi-miring-kecil),
    linear-gradient(103deg,rgba(255,255,255,.75) 0 82px,rgba(126,102,222,.28) 82px 83.5px,transparent 83.5px),var(--tb-kartu)}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active{
  background:var(--tb-tepi-miring-kecil),
    linear-gradient(103deg,rgba(255,255,255,.8) 0 82px,rgba(200,79,230,.35) 82px 83.5px,transparent 83.5px),var(--tb-kartu-aktif)}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .ic{border-radius:0;background:transparent;box-shadow:none;overflow:visible}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .ic img{object-fit:contain}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .n{font-size:clamp(17px,5.4vw,22px);line-height:1}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active .n{padding-right:0}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .prod-price>strong{padding:9px 13px 10px;font-size:clamp(14px,4.6vw,19px)}
/* Poin di bawah nama, ungu muda seperti angka bonus "+1,500,000" topbos. */
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .prod-points{margin:5px 0 0;padding:0;background:none;box-shadow:none;
  color:#5e44c9;font:italic 700 15px/1 var(--tb-disp)}
/* Centang terpilih di sudut kantong ikon: pojok kanan atas milik harga. */
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::before{top:6px;right:auto;left:6px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active::after{top:11px;right:auto;left:14px}
html[data-tema="topbos"][data-kartu="memanjang"] #products .promo-badge{top:-1px;right:14px}

/* ── Email & langkah bayar ──────────────────────────────────────────── */
html[data-tema="topbos"] .email-help{margin-top:10px;padding:10px 12px;border:0;border-radius:10px;background:rgba(126,102,222,.1);color:var(--tb-tinta-2);font-size:12.5px;line-height:1.55}
html[data-tema="topbos"] .email-help::before{border:0;border-radius:50%;background:var(--tb-u4);color:#fff;font-family:var(--tb-disp)}
html[data-tema="topbos"] .email-help[data-kind="error"]{background:#ffe8ee;color:var(--tb-rose)}
html[data-tema="topbos"] .email-help[data-kind="error"]::before{background:var(--tb-rose);color:#fff}
html[data-tema="topbos"] .checkout-benefits{padding:12px;border:0;border-radius:12px;background:rgba(126,102,222,.1);box-shadow:inset 0 0 0 1px rgba(126,102,222,.2)}
html[data-tema="topbos"] :is(.checkout-benefits-head,.external-pay-head)>span{color:var(--tb-tinta);font:italic 800 15px/1 var(--tb-disp);letter-spacing:.03em;text-transform:uppercase}
html[data-tema="topbos"] :is(.checkout-benefits-head,.external-pay-head) small{color:var(--tb-redup)}
html[data-tema="topbos"] .external-pay-head{border-top:1px dashed rgba(126,102,222,.4)}
html[data-tema="topbos"] :is(.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button){border:0;border-radius:12px;background:#fff;color:var(--tb-tinta);
  box-shadow:inset 0 0 0 1.5px var(--tb-l3),0 2px 0 var(--tb-l3)}
html[data-tema="topbos"] :is(.prod,.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button):hover{transform:none}
/* #view-topup/#wallet-topup-card: aturan aktif HUD :is(.prod.active,…) (0,4,1). */
html[data-tema="topbos"] :is(#view-topup,#wallet-topup-card) :is(.benefit-card.active,.paym.active,.wallet-topup-methods button.active,.wallet-topup-presets button[aria-pressed="true"]){
  border:0;background:linear-gradient(180deg,#fff,#f8ecff);color:var(--tb-tinta);box-shadow:inset 0 0 0 2.5px var(--tb-mg-2),0 2px 0 var(--tb-mg-3)}
html[data-tema="topbos"] .benefit-card.locked{background:rgba(255,255,255,.55);color:var(--tb-redup)}
html[data-tema="topbos"] .benefit-card b{color:var(--tb-tinta);font:italic 800 14px/1.1 var(--tb-disp);letter-spacing:.02em;text-transform:uppercase}
html[data-tema="topbos"] .benefit-card strong{color:var(--tb-u3);font:italic 800 17px/1.1 var(--tb-disp)}
html[data-tema="topbos"] .benefit-card.locked strong{color:var(--tb-redup)}
html[data-tema="topbos"] .benefit-card small{color:var(--tb-redup)}
html[data-tema="topbos"] .benefit-icon{border:0;border-radius:9px;background:var(--tb-magenta);color:#fff;font:italic 800 13px/1 var(--tb-disp)}
html[data-tema="topbos"] .benefit-icon.wallet{background:var(--tb-aksi);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .benefit-icon.points{background:linear-gradient(180deg,#ffe27a,#f2b400);color:#5a3a00}
html[data-tema="topbos"] .benefit-note{color:var(--tb-redup)}
/* Tinta ikon & avatar. Badan HUD mewarnai semuanya ungu lewat :is(…,.card h2 .num) (0,3,2):
   ungu di avatar ungu (1,1:1) dan "Rp" ungu di ikon hijau. Daftar yang SAMA di sini
   menyerahkan warnanya ke --tb-ikon-tx (bawaan putih), yang boleh disetel per ikon
   tanpa harus menandingi kekhususan itu lagi. */
html[data-tema="topbos"] :is(.benefit-icon,.checkin-mark,.spender-trophy,.wallet-pass-mark,.track-avatar,.bulk-done-mark,
  .tg-miniapp-install-mark,.seo-return b,.mutation-sign,.spender-avatar,.cs-avatar,.wallet-topup-mark,.card h2 .num){
  border-color:transparent;color:var(--tb-ikon-tx,#fff)}
html[data-tema="topbos"] :is(.checkin-mark,.spender-trophy,.benefit-icon.points){--tb-ikon-tx:#4a2c00}
html[data-tema="topbos"] :is(.bulk-done-mark,.mutation-sign.pos){--tb-ikon-tx:#0a7444}
html[data-tema="topbos"] .mutation-sign.neg{--tb-ikon-tx:var(--tb-rose)}
html[data-tema="topbos"] .tg-miniapp-install-mark{border:0;border-radius:12px;background:var(--tb-papan)}
html[data-tema="topbos"] .paym-ic{border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #ece8fb}
html[data-tema="topbos"] .paym-n{color:var(--tb-tinta-2);font:600 13.5px/1.25 var(--tb-teks)}
html[data-tema="topbos"] :is(.paym-p,.paym.active .paym-p){color:transparent;background:var(--tb-angka);-webkit-background-clip:text;background-clip:text;
  font:italic 800 18px/1 var(--tb-disp);letter-spacing:.01em}
html[data-tema="topbos"] .paym.is-unavailable{background:rgba(255,255,255,.5);opacity:.7}
html[data-tema="topbos"] .paym-internal{background:#e9f7ef;box-shadow:inset 0 0 0 1.5px rgba(22,180,108,.5)}
html[data-tema="topbos"] .paym-internal .paym-ic{border:0;background:#dcf7ea;color:var(--h-mint)}
html[data-tema="topbos"] #pay-note{color:var(--tb-redup)}

/* ── Bilah Total: ungu tua bertepi lavender, total krem besar ────────── */
/* #summary (ID): sudut 4px badan HUD datang dari daftar :is() ber-ID (1,1,1). */
html[data-tema="topbos"] #summary{padding:10px 10px 10px 16px;border:0;border-radius:16px 16px 0 0;color:#fff;
  background:radial-gradient(70% 120% at 0 0,rgba(162,132,255,.35),transparent 70%),linear-gradient(180deg,rgba(52,40,146,.97),rgba(29,22,86,.97));
  box-shadow:inset 0 1.5px 0 rgba(210,195,255,.55),0 -10px 26px -8px rgba(10,5,40,.55)}
html[data-tema="topbos"] .summary-assurance{border-bottom:1px solid rgba(210,195,255,.18);color:#7ff0bb;font:italic 700 12px/1.1 var(--tb-disp);letter-spacing:.04em}
html[data-tema="topbos"] .summary>div::before{color:rgba(225,218,255,.72);font:italic 700 12.5px/1.2 var(--tb-disp);letter-spacing:.04em;text-transform:uppercase}
html[data-tema="topbos"] .summary>div:has(#sum-product:not(:empty)) #sum-product{color:rgba(225,218,255,.8);font:italic 700 13px/1.2 var(--tb-disp);letter-spacing:.03em;text-transform:uppercase}
html[data-tema="topbos"] #sum-price{color:var(--tb-emas);font:italic 800 26px/1 var(--tb-disp);letter-spacing:.01em;text-shadow:0 2px 0 #3a1f8a,0 0 18px rgba(255,212,90,.35)}
html[data-tema="topbos"] #buy-btn{min-height:48px;padding:6px 18px;font-size:17px;line-height:1.05;white-space:normal}

/* ── Tombol CS melayang ─────────────────────────────────────────────── */
html[data-tema="topbos"] .bantuan-tg{border:0;border-radius:16px;background:linear-gradient(180deg,#3d349a,#241b6e);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.45),0 10px 22px rgba(10,5,40,.55)}
html[data-tema="topbos"] .bantuan-tg:hover{box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.65),0 12px 26px rgba(10,5,40,.6)}
html[data-tema="topbos"] .bantuan-avatar{border-radius:50%;background:var(--tb-aksi)}
html[data-tema="topbos"] .bantuan-avatar>img{border-radius:50%}
html[data-tema="topbos"] .bantuan-avatar-fallback{color:#fff;font:italic 800 15px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .bantuan-channel-badge{border-color:#241b6e}
html[data-tema="topbos"] .bantuan-copy small{color:#7ff0bb;font-family:var(--tb-disp);font-style:italic;font-weight:700;letter-spacing:.04em}

/* ── Navigasi bawah: bilah ungu tua, tombol tengah permata warna merek ── */
html[data-tema="topbos"] .bnav{background:linear-gradient(180deg,#2a2178,#17104a);border-top:0;box-shadow:inset 0 1.5px 0 rgba(190,170,255,.4),0 -8px 22px rgba(10,5,40,.45)}
html[data-tema="topbos"] .bnav a{color:rgba(214,206,255,.66);font:italic 700 12px/1 var(--tb-disp);letter-spacing:.03em;text-transform:none}
html[data-tema="topbos"] .bnav a[aria-current="page"]{color:#fff}
html[data-tema="topbos"] .bnav a[aria-current="page"]::after{bottom:3px;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--tb-a1);
  box-shadow:0 0 10px color-mix(in srgb,var(--brand) 80%,transparent);transform:skewX(-20deg)}
html[data-tema="topbos"] .bnav a:focus-visible{outline:2px solid var(--tb-emas)}
html[data-tema="topbos"] .bnav li.center a{color:#fff}
html[data-tema="topbos"] .bnav .bnav-fab{top:-22px;width:50px;height:50px;border-radius:14px;background:var(--tb-aksi);transform:translateX(-50%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.16),0 3px 0 var(--tb-a-tepi),0 0 0 5px #241b6e,0 0 0 6.5px rgba(190,170,255,.45)}
html[data-tema="topbos"] .bnav .bnav-fab svg{width:24px;height:24px;stroke:#fff;stroke-width:2.2;transform:none;filter:drop-shadow(0 1px 0 var(--tb-a-tepi))}
html[data-tema="topbos"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--tb-aksi);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--tb-a-tepi),0 0 0 5px #241b6e,0 0 0 6.5px var(--tb-a1)}
html[data-tema="topbos"] .bnav li.center a:active .bnav-fab{transform:translateX(-50%) translateY(2px)}
html[data-tema="topbos"] .bnav li.center a:focus-visible .bnav-fab{outline-color:var(--tb-emas)}
html[data-tema="topbos"] .bnav .bnav-dot{border-radius:50%;background:#ff5c7f;transform:none}
html[data-tema="topbos"] .bnav .bnav-dot.pts{border-radius:5px;background:linear-gradient(180deg,#ffe27a,#f2b400);color:#4a2f00;font:italic 800 10px/1 var(--tb-disp)}

/* ── Halaman: judul putih tebal miring di atas kanvas ───────────────── */
html[data-tema="topbos"] .page-head::before{width:44px;height:6px;margin-bottom:12px;border-radius:2px;transform:skewX(-24deg);
  background:linear-gradient(90deg,var(--brand) 0 55%,var(--tb-u5) 55%);box-shadow:0 0 12px color-mix(in srgb,var(--brand) 45%,transparent)}
/* Judul di kanvas: lewat ID halamannya, karena badan HUD memaku warnanya (1,1,1). */
html[data-tema="topbos"] :is(#view-pesanan,#view-saldo,#view-akun,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head h1{color:#fff;font:italic 800 34px/1 var(--tb-disp);letter-spacing:0;text-transform:uppercase;
  text-shadow:0 3px 0 #2a1d86,0 0 22px rgba(170,140,255,.45)}
html[data-tema="topbos"] .page-head p{color:rgba(229,222,255,.82)}
/* Label kecil: ungu di dalam panel lavender (emas di sana 1,0:1); emas hanya di kanvas.
   Daftar panel memakai :is() (0,3,1) karena badan HUD memaku .wallet-pass-copy .section-kicker. */
html[data-tema="topbos"] .section-kicker{color:var(--h-biru-teks)}
html[data-tema="topbos"] :is(.card,.player-pass,.wallet-topup-card,.account-spender-card,.checkin-card) .section-kicker{color:var(--h-biru-teks)}
html[data-tema="topbos"] .page-head .section-kicker{color:var(--tb-emas)}
html[data-tema="topbos"] .section-kicker::before{width:14px;height:5px;border-radius:1px;background:var(--brand);transform:skewX(-24deg)}
html[data-tema="topbos"] .muted{color:var(--tb-redup)}
html[data-tema="topbos"] .msg{border:0;border-radius:10px;background:#ffe8ee;box-shadow:inset 0 0 0 1.5px rgba(214,51,95,.35);color:var(--tb-rose)}
html[data-tema="topbos"] footer.foot{color:rgba(229,222,255,.62)}

/* ── Menu akun, bantuan, info ───────────────────────────────────────── */
html[data-tema="topbos"] :is(.account-menu a,.account-menu button){border-top-color:rgba(126,102,222,.18);color:var(--tb-tinta);
  font:italic 800 17px/1 var(--tb-disp);letter-spacing:.01em;text-transform:uppercase}
html[data-tema="topbos"] :is(.account-menu a,.account-menu button):hover{background:rgba(255,255,255,.5)}
html[data-tema="topbos"] :is(.account-menu a,.account-menu button)>span{border:0;border-radius:9px;background:var(--tb-papan);color:#fff;font:italic 800 13px/1 var(--tb-disp)}
html[data-tema="topbos"] .account-menu a>i{color:var(--tb-u4)}
html[data-tema="topbos"] .account-menu button.danger{color:var(--tb-rose)}
html[data-tema="topbos"] .account-menu button.danger>span{border:0;background:linear-gradient(180deg,#ff7d98,#d6335f);color:#fff}
html[data-tema="topbos"] .account-session-note{color:rgba(225,218,255,.7)}
html[data-tema="topbos"] .faq-item{border-top-color:rgba(126,102,222,.2)}
html[data-tema="topbos"] .faq-item summary{color:var(--tb-tinta);font:700 15px/1.35 var(--tb-teks)}
html[data-tema="topbos"] .faq-item summary::after,html[data-tema="topbos"] .seo-faq summary::after{border:0;border-radius:50%;background:var(--tb-u4);color:#fff}
html[data-tema="topbos"] .faq-item[open] summary::after{background:var(--tb-magenta);color:#fff}
html[data-tema="topbos"] .faq-item p{color:var(--tb-tinta-2)}
html[data-tema="topbos"] .cs-avatar{border:0;border-radius:12px;background:var(--tb-aksi);color:#fff;box-shadow:0 2px 0 var(--tb-a-tepi);
  font:italic 800 16px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .cs-copy b{color:var(--tb-tinta);font:italic 800 18px/1.1 var(--tb-disp)}
html[data-tema="topbos"] :is(.cs-copy small,.cs-go){color:var(--tb-redup)}
html[data-tema="topbos"] .info-posts li{border-top-color:rgba(126,102,222,.2)}
html[data-tema="topbos"] .info-posts a{color:var(--tb-tinta)}
html[data-tema="topbos"] .info-posts a:hover b{color:var(--tb-u3)}
html[data-tema="topbos"] :is(.info-more,.info-brand){color:var(--tb-u3)}
html[data-tema="topbos"] :is(.info-promo-list,.info-leaderboard-list) img{border-color:rgba(126,102,222,.25);border-radius:10px}
html[data-tema="topbos"] .login-card :is(label,.muted){color:var(--tb-redup)}
html[data-tema="topbos"] .login-card input{height:52px}
html[data-tema="topbos"] .login-card .login-back{color:var(--tb-u4)}
html[data-tema="topbos"] :is(.account-loading,.account-error){border:0;border-radius:12px;background:var(--h-panel);color:var(--tb-redup)}
html[data-tema="topbos"] .account-error{background:#ffe8ee;color:var(--tb-rose)}

/* ── Akun: kartu anggota, check-in, peringkat ───────────────────────── */
html[data-tema="topbos"] .player-pass{color:var(--tb-tinta);
  background:var(--tb-tepi-miring),linear-gradient(135deg,rgba(126,102,222,.16) 0 22%,transparent 22%),
    repeating-linear-gradient(115deg,rgba(90,64,200,.04) 0 2px,transparent 2px 9px),var(--tb-panel)}
html[data-tema="topbos"] .player-pass::after{content:"TOPBOS // MEMBER";color:rgba(70,48,180,.6);border-left-color:rgba(126,102,222,.25);font:italic 800 9px/1 var(--tb-disp);letter-spacing:.32em}
html[data-tema="topbos"] .wallet-pass::after{content:"TOPBOS // DOMPET"}
html[data-tema="topbos"] .player-avatar{border:0;border-radius:14px;background:var(--tb-papan);color:#fff;outline:2px solid rgba(255,255,255,.9);outline-offset:0;
  box-shadow:0 0 0 4px rgba(126,102,222,.35)}
html[data-tema="topbos"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:var(--tb-papan)}
html[data-tema="topbos"] .player-identity strong{font:italic 800 22px/1.05 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .player-identity>span{color:var(--tb-redup)}
html[data-tema="topbos"] .tier-chip{border:0;border-radius:4px;background:var(--tb-emas-bidang);color:#4a2c00;font:italic 800 11px/1 var(--tb-disp)}
html[data-tema="topbos"] .tier-chip::before{background:#4a2c00}
html[data-tema="topbos"] .account-meters{border:0;border-radius:12px;overflow:hidden;background:rgba(126,102,222,.25)}
html[data-tema="topbos"] .account-meters>div{background:#fff}
html[data-tema="topbos"] .account-meters span{color:var(--tb-redup)}
html[data-tema="topbos"] :is(#view-akun,#view-saldo) :is(.account-meters strong,.wallet-pass-balance strong){color:var(--tb-u3);text-shadow:none;font-family:var(--tb-disp);font-style:italic;font-weight:800}
html[data-tema="topbos"] .tier-progress>div:first-child{color:var(--tb-redup)}
html[data-tema="topbos"] .tier-progress b{color:var(--tb-tinta)}
html[data-tema="topbos"] .tier-track{border-radius:4px;background:repeating-linear-gradient(90deg,rgba(90,64,200,.16) 0 10px,transparent 10px 13px)}
html[data-tema="topbos"] .tier-track span{border-radius:4px;background:repeating-linear-gradient(90deg,var(--tb-mg-2) 0 10px,transparent 10px 13px)}
html[data-tema="topbos"] :is(.profile-editor,.avatar-picker){border:0;border-radius:12px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .profile-editor>label{color:var(--tb-redup)}
html[data-tema="topbos"] .profile-editor-status{color:#7a4f00}
html[data-tema="topbos"] .avatar-options button{border:0;border-radius:10px;background:#fff;color:var(--tb-tinta);box-shadow:inset 0 0 0 1.5px var(--tb-l3)}
html[data-tema="topbos"] .avatar-options button[aria-pressed="true"]{background:var(--tb-magenta);color:#fff;box-shadow:none}
html[data-tema="topbos"] .checkin-mark{border:0;border-radius:12px;background:var(--tb-emas-bidang);color:#4a2c00;font:italic 800 14px/1 var(--tb-disp)}
html[data-tema="topbos"] .checkin-card strong{color:var(--tb-tinta);font:italic 800 17px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .checkin-card>div>span{color:var(--tb-redup)}
html[data-tema="topbos"] .checkin-days li{border:0;border-radius:10px;background:#fff;color:var(--tb-redup);box-shadow:inset 0 0 0 1px var(--tb-l3)}
html[data-tema="topbos"] .checkin-days li>b{border:0;border-radius:8px;background:#ece7fd;color:var(--tb-redup)}
html[data-tema="topbos"] .checkin-days li>small{color:var(--tb-tinta)}
html[data-tema="topbos"] .checkin-days li.done>b{background:#dcf7ea;color:var(--h-mint)}
html[data-tema="topbos"] .checkin-days li.today{box-shadow:inset 0 0 0 2px var(--tb-mg-2)}
html[data-tema="topbos"] .checkin-days li.bonus{background:#fff8e1;box-shadow:inset 0 0 0 1px #f3d27a}
html[data-tema="topbos"] .checkin-days li.bonus>b{background:var(--tb-emas-bidang);color:#4a2c00}
html[data-tema="topbos"] .checkin-days li.bonus>small{color:#7a4f00}
/* Hari ini (belum check-in) dan periode peringkat aktif: aturan aktif HUD (0,4,3). */
html[data-tema="topbos"] #view-akun :is(.checkin-days li.today:not(.done)>b,.spender-periods button[aria-selected="true"]){border:0;background:var(--tb-magenta);color:#fff}
html[data-tema="topbos"] .account-rank span{color:#7a4f00}
html[data-tema="topbos"] .account-rank strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .account-rank small{color:var(--tb-redup)}
html[data-tema="topbos"] .spender-head h2{color:var(--tb-tinta);font:italic 800 20px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .spender-head p{color:var(--tb-redup)}
html[data-tema="topbos"] .spender-trophy{border:0;border-radius:12px;background:var(--tb-emas-bidang);color:#4a2c00}
html[data-tema="topbos"] .spender-periods{border:0;border-radius:9px;background:var(--tb-u2);padding:3px}
html[data-tema="topbos"] .spender-periods button{border-radius:7px;color:rgba(255,255,255,.75);font:italic 700 12.5px/1 var(--tb-disp)}
html[data-tema="topbos"] .spender-list li{border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--tb-l3)}
html[data-tema="topbos"] .spender-rank{color:var(--tb-redup-2)}
html[data-tema="topbos"] .spender-list li:first-child .spender-rank{color:#8a5a00}
html[data-tema="topbos"] .spender-person strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .spender-person small{color:var(--tb-redup)}
html[data-tema="topbos"] .spender-list li>b{color:var(--tb-u3)}
html[data-tema="topbos"] .spender-avatar{border:0;border-radius:50%;background:var(--tb-papan);color:#fff}

/* ── Saldo ──────────────────────────────────────────────────────────── */
html[data-tema="topbos"] .wallet-pass-mark{border:0;border-radius:14px;background:var(--tb-aksi);color:#fff;font:italic 800 18px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .wallet-pass-copy strong{color:var(--tb-tinta);font:italic 800 18px/1.1 var(--tb-disp)}
html[data-tema="topbos"] .wallet-pass-copy small{color:var(--tb-redup)}
html[data-tema="topbos"] .wallet-pass-balance{border-top:1px dashed rgba(126,102,222,.45)}
html[data-tema="topbos"] :is(#view-akun,#view-saldo) .wallet-pass-balance strong{font-size:38px}
html[data-tema="topbos"] .wallet-pass .wallet-pass-meters{border:0;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--tb-l3)}
html[data-tema="topbos"] .wallet-pass-btn b{border-radius:6px;background:rgba(0,0,0,.2)}
html[data-tema="topbos"] .wallet-topup-mark{border:0;border-radius:12px;background:var(--tb-aksi);color:#fff;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .wallet-topup-mark span{background:var(--tb-emas)}
html[data-tema="topbos"] .wallet-topup-head h4{color:var(--tb-tinta);font:italic 800 20px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] :is(.wallet-topup-head p,.wallet-topup-steps,.wallet-topup-custom>small,.wallet-topup-message,.wallet-topup-quote-head span,.wallet-topup-methods button small){color:var(--tb-redup)}
html[data-tema="topbos"] .wallet-topup-steps span{border:0;border-radius:6px;background:#ece7fd;color:var(--tb-redup)}
html[data-tema="topbos"] #wallet-topup-card .wallet-topup-steps .active span{background:var(--tb-magenta);color:#fff}
html[data-tema="topbos"] .wallet-topup-steps .active{color:var(--tb-tinta)}
html[data-tema="topbos"] .wallet-topup-steps li:not(:last-child)::after{background:var(--tb-l3)}
html[data-tema="topbos"] :is(#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-filter label>span){color:var(--tb-redup)}
/* Kotak cari & status riwayat duduk langsung di kanvas ungu tua: labelnya terang.
   ID panel: aturan label di atas memuat #wallet-topup-form, kekhususan (1,1,2). */
html[data-tema="topbos"] :is(#acct-panel-transactions,#acct-panel-wallet,#acct-panel-points) .account-filter label>span{color:rgba(225,218,255,.88)}
html[data-tema="topbos"] .wallet-topup-presets button{color:var(--tb-tinta);font:italic 800 16px/1.1 var(--tb-disp)}
html[data-tema="topbos"] .wallet-topup-input{border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--tb-l4)}
html[data-tema="topbos"] .wallet-topup-input:focus-within{box-shadow:inset 0 0 0 1.5px var(--tb-mg-2),0 0 0 3px rgba(200,79,230,.22)}
html[data-tema="topbos"] .wallet-topup-input b{color:var(--tb-redup)}
html[data-tema="topbos"] :is(.wallet-topup-quote>p,.wallet-topup-instruction,.wallet-topup-record,.account-entry){border:0;border-radius:10px;background:#fff;color:var(--tb-tinta-2);
  box-shadow:inset 0 0 0 1px var(--tb-l3)}
html[data-tema="topbos"] .wallet-topup-error{border:0;border-radius:10px;background:#ffe8ee;color:var(--tb-rose)}
html[data-tema="topbos"] .wallet-topup-breakdown{border:0;border-radius:10px;background:#dcf7ea;color:#0a7444}
html[data-tema="topbos"] .wallet-topup-active{border:0;border-radius:10px;background:#fff8e1;box-shadow:inset 0 0 0 1px #f3d27a}
html[data-tema="topbos"] .wallet-topup-active-head strong{color:#7a4f00}
html[data-tema="topbos"] .wallet-topup-record{border-left:4px solid #f2b400}
html[data-tema="topbos"] .wallet-topup-record.process{border-left-color:var(--tb-u4)}
html[data-tema="topbos"] .wallet-topup-record.done{border-left-color:#16b46c}
html[data-tema="topbos"] .wallet-topup-record.fail{border-left-color:var(--tb-rose)}
html[data-tema="topbos"] .wallet-topup-va strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .wallet-topup-methods button>strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .account-subhead strong{color:#fff;font:italic 800 18px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .account-subhead span{color:rgba(225,218,255,.75)}
html[data-tema="topbos"] :is(.account-filter input,.account-filter select){border:1.5px solid var(--tb-l4);border-radius:10px;background:#fff;color:var(--tb-tinta)}
html[data-tema="topbos"] .entry-kicker{color:var(--tb-redup)}
html[data-tema="topbos"] :is(.entry-main small,.entry-main>span:not(.entry-kicker)){color:var(--tb-redup)}
html[data-tema="topbos"] .entry-main strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .entry-value>strong{color:var(--tb-u3);font-family:var(--tb-disp);font-style:italic;font-weight:800}
html[data-tema="topbos"] .entry-status{border:0;border-radius:5px;background:#fff1c4;color:#7a4f00;font:italic 800 11px/1 var(--tb-disp)}
html[data-tema="topbos"] .entry-status.ok{background:#dcf7ea;color:#0a7444}
html[data-tema="topbos"] .entry-status.err{background:#ffe3ea;color:var(--tb-rose)}
html[data-tema="topbos"] .mutation-sign{border:0;border-radius:8px}
html[data-tema="topbos"] .mutation-sign.pos{background:#dcf7ea;color:#0a7444}
html[data-tema="topbos"] .mutation-sign.neg{background:#ffe3ea;color:var(--tb-rose)}
html[data-tema="topbos"] :is(.account-list-state){color:rgba(225,218,255,.78)}

/* ── Pesanan & lacak ────────────────────────────────────────────────── */
html[data-tema="topbos"] .track-status-head{border-bottom-color:rgba(126,102,222,.2)}
html[data-tema="topbos"] .track-status-head strong{font:italic 800 24px/1.05 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] :is(.track-overline,.track-status-head p,.track-status-head small){color:var(--tb-redup)}
html[data-tema="topbos"] :is(.track-buyer,.track-security,.refund-box){border:0;border-radius:10px;background:rgba(255,255,255,.6);color:var(--tb-tinta-2);box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .track-buyer strong{color:var(--tb-tinta)}
html[data-tema="topbos"] .track-avatar{border:0;border-radius:10px;background:var(--tb-papan);color:#fff}
html[data-tema="topbos"] .track-detail-grid{border:0;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .track-detail-grid>div{background:rgba(255,255,255,.6)}
html[data-tema="topbos"] .track-detail-grid>div:nth-child(odd){border-right-color:rgba(126,102,222,.2)}
html[data-tema="topbos"] .track-detail-grid>div:nth-child(-n+2){border-bottom-color:rgba(126,102,222,.2)}
html[data-tema="topbos"] .track-detail-grid span{color:var(--tb-redup)}
html[data-tema="topbos"] .track-detail-grid b{color:var(--tb-tinta);font:italic 700 15px/1.3 var(--tb-disp)}
html[data-tema="topbos"] .track-ticket{border-top:1px dashed rgba(126,102,222,.45);background:rgba(126,102,222,.1);color:var(--tb-tinta)}
html[data-tema="topbos"] .track-ticket span{color:var(--tb-redup)}
html[data-tema="topbos"] .track-ticket b{color:var(--tb-tinta);font:italic 800 22px/1 var(--tb-disp)}
html[data-tema="topbos"] .track-error{border:0;border-radius:10px;background:#ffe8ee;color:var(--tb-rose)}
html[data-tema="topbos"] :is(.track-status-icon,.pay-state-symbol){border:0;border-radius:12px;background:linear-gradient(180deg,#ffe27a,#f2b400);color:#4a2f00;box-shadow:none}
html[data-tema="topbos"] :is(.track-order-card.ok .track-status-icon,.pay-status.ok .pay-state-symbol){border:0;background:var(--tb-aksi);color:#fff;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] :is(.track-order-card.err .track-status-icon,.pay-status.err .pay-state-symbol){border:0;background:linear-gradient(180deg,#ff7d98,#d6335f);color:#fff}
html[data-tema="topbos"] :is(.track-status-icon,.pay-state-symbol).has-asset{background:#fff;box-shadow:inset 0 0 0 1px var(--tb-l3)}
html[data-tema="topbos"] :is(.tx-kepala h2,.tx-judul-kolom){font-family:var(--tb-disp);font-style:italic;font-weight:800;letter-spacing:.02em}
html[data-tema="topbos"] .st-badge{font-family:var(--tb-disp);font-style:italic;font-weight:800;letter-spacing:.04em}

/* ── Pembayaran /pesanan/<nomor> ────────────────────────────────────── */
html[data-tema="topbos"] .pay-page h3{font:italic 800 22px/1.1 var(--tb-disp);letter-spacing:.01em;text-transform:uppercase}
html[data-tema="topbos"] .pay-kicker{color:#0a7444}
html[data-tema="topbos"] .pay-kicker::before{width:14px;height:5px;background:var(--brand);transform:skewX(-24deg)}
/* Tagihan: papan ungu seperti papan nominal, total emas besar. */
html[data-tema="topbos"] .pay-invoice{border:0;clip-path:var(--tb-potong-kecil);background:var(--tb-tepi-miring-kecil),var(--tb-papan);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
html[data-tema="topbos"] .pay-invoice-label{color:rgba(229,222,255,.78)}
html[data-tema="topbos"] #pay .pay-invoice-amount{color:var(--tb-emas);font:italic 800 40px/1 var(--tb-disp);text-shadow:0 3px 0 #2a1d86}
html[data-tema="topbos"] .pay-invoice-product{color:#fff;font:italic 700 15px/1.3 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .pay-funding-breakdown{border-top-color:rgba(255,255,255,.3)}
html[data-tema="topbos"] .pay-funding-breakdown span{color:rgba(229,222,255,.78)}
html[data-tema="topbos"] .pay-funding-breakdown b{color:#fff}
html[data-tema="topbos"] .pay-nota-link{color:#fff}
html[data-tema="topbos"] .payment-card .pay-status{border-top-color:rgba(126,102,222,.2);color:var(--tb-tinta)}
html[data-tema="topbos"] .pay-step{color:var(--tb-redup-2)}
html[data-tema="topbos"] .pay-step.active,html[data-tema="topbos"] .pay-step.done{color:var(--tb-tinta)}
html[data-tema="topbos"] .pay-step-dot{border:0;border-radius:8px;background:#e0d9f8;color:var(--tb-redup);font:italic 800 13px/1 var(--tb-disp)}
/* .pay-steps: aturan aktif HUD (0,4,3). */
html[data-tema="topbos"] .pay-steps .pay-step.active .pay-step-dot{border:0;background:var(--tb-magenta);color:#fff}
html[data-tema="topbos"] .pay-step.done .pay-step-dot{border:0;background:var(--tb-aksi);color:#fff;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .pay-step-line{background:#d0c6f3}
html[data-tema="topbos"] .pay-step-line.done{background:var(--brand)}
html[data-tema="topbos"] .pay-state-head{border:0;border-radius:12px;background:#fff7dc;box-shadow:inset 0 0 0 1.5px rgba(201,138,0,.3)}
html[data-tema="topbos"] .pay-status.ok .pay-state-head{border:0;background:#e6f8ee;box-shadow:inset 0 0 0 1.5px rgba(22,180,108,.35)}
html[data-tema="topbos"] .pay-status.err .pay-state-head{border:0;background:#ffe8ee;box-shadow:inset 0 0 0 1.5px rgba(214,51,95,.35)}
html[data-tema="topbos"] .pay-state-head strong{color:var(--tb-tinta);font:italic 800 16px/1.2 var(--tb-disp)}
html[data-tema="topbos"] .pay-state-head p{color:var(--tb-tinta-2)}
html[data-tema="topbos"] .order-ticket{border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--tb-l3);color:var(--tb-tinta)}
html[data-tema="topbos"] .order-ticket::before,html[data-tema="topbos"] .order-ticket::after{display:none}
html[data-tema="topbos"] .order-ticket-top{color:var(--tb-redup)}
html[data-tema="topbos"] .order-ticket-top b{color:var(--tb-tinta);font:italic 800 22px/1 var(--tb-disp);text-shadow:none}
html[data-tema="topbos"] .order-full-id{color:var(--tb-redup)}
html[data-tema="topbos"] .order-ticket-actions{border-top-color:rgba(126,102,222,.35)}
html[data-tema="topbos"] .pay-email-note{color:var(--tb-tinta-2)}
html[data-tema="topbos"] .pay-email-note b{color:var(--tb-tinta)}
html[data-tema="topbos"] .va{border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--tb-l3);color:var(--tb-tinta)}
html[data-tema="topbos"] #pay-body img{border-radius:12px;box-shadow:0 0 0 6px #fff,0 0 0 7.5px var(--tb-l4)}
html[data-tema="topbos"] .visual-logo-fallback{border-radius:10px;background:#fff;color:var(--tb-tinta);box-shadow:inset 0 0 0 1px var(--tb-l3)}

/* ── Panduan toko, blok nominal, jelajah ────────────────────────────── */
/* Panel artikel lavender: badan HUD memaku abu terang #c9ced5 untuk grafit. */
html[data-tema="topbos"] .seo-artikel{--seo-soft:rgba(126,102,222,.1);--seo-line:rgba(126,102,222,.25)}
html[data-tema="topbos"] .seo-artikel h2{font:italic 800 24px/1.15 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .seo-artikel h3{color:var(--tb-tinta);font:italic 800 18px/1.2 var(--tb-disp)}
html[data-tema="topbos"] .seo-eyebrow{color:var(--tb-redup)}
html[data-tema="topbos"] .seo-eyebrow span{border-radius:1px;background:var(--brand);transform:skewX(-24deg)}
html[data-tema="topbos"] .seo-lead{color:color-mix(in srgb,var(--txt) 78%,var(--muted))}
html[data-tema="topbos"] :is(.seo-copy p,.seo-step-list li){color:color-mix(in srgb,var(--txt) 86%,var(--muted))}
html[data-tema="topbos"] .seo-block-label{color:var(--muted)}
html[data-tema="topbos"] .seo-route span{border:0;border-radius:6px;background:#fff;color:var(--tb-tinta);box-shadow:inset 0 0 0 1px var(--tb-l3);font:italic 800 12px/1.2 var(--tb-disp)}
html[data-tema="topbos"] .seo-route i{color:var(--tb-redup-2)}
html[data-tema="topbos"] .seo-step-list li::before{border:0;border-radius:4px;background:var(--tb-aksi);color:#fff;font:italic 800 12px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .seo-faq{border:0;border-radius:10px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .seo-faq[open]{background:#fff}
html[data-tema="topbos"] .seo-faq summary{color:var(--tb-tinta)}
html[data-tema="topbos"] .seo-faq p{color:var(--tb-tinta-2)}
html[data-tema="topbos"] .seo-return{border-top-color:rgba(126,102,222,.25);background:rgba(126,102,222,.1);color:var(--tb-tinta)}
html[data-tema="topbos"] .seo-return small{color:var(--tb-redup)}
html[data-tema="topbos"] .seo-artikel .seo-return b{border:0;border-radius:8px;background:var(--tb-aksi);color:#fff;text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] .seo-jelajah{border:0;border-radius:12px;background:var(--h-panel);color:var(--tb-redup)}
html[data-tema="topbos"] .seo-jelajah a{color:var(--tb-u3);font-family:var(--tb-disp);font-style:italic;font-weight:800}
/* Blok halaman nominal duduk LANGSUNG di kanvas ungu (di luar .seo-artikel):
   teksnya terang, tautannya emas. */
html[data-tema="topbos"] .seo-produk{color:var(--t-on-bg)}
html[data-tema="topbos"] .seo-produk a{color:var(--tb-emas)}
html[data-tema="topbos"] .seo-produk h3{color:#fff;font:italic 800 22px/1.15 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .seo-produk .seo-block-label{color:var(--t-on-bg-muted)}
html[data-tema="topbos"] .seo-produk .faq-item{border-top-color:rgba(225,218,255,.2)}
html[data-tema="topbos"] .seo-produk .faq-item summary{color:#fff}
html[data-tema="topbos"] .seo-produk .faq-item p{color:var(--t-on-bg-muted)}

/* ── Kaki identitas (di kanvas) ─────────────────────────────────────── */
html[data-tema="topbos"] .ident-foot{--ident-accent-d:#fff;border-top-color:rgba(190,170,255,.25)}
html[data-tema="topbos"] .ident-mark{border-radius:10px}
html[data-tema="topbos"] .ident-name{color:#fff;font:italic 800 20px/1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .ident-wordmark{filter:brightness(0) invert(1)}
html[data-tema="topbos"] .ident-legal{color:var(--t-on-bg-muted)}
html[data-tema="topbos"] .ident-legal-nama{color:#fff}
html[data-tema="topbos"] .ident-segel>span{border:0;border-radius:6px;background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(210,195,255,.35)}
html[data-tema="topbos"] .ident-segel svg{color:var(--tb-emas)}
html[data-tema="topbos"] .ident-kontak a{border-bottom-color:rgba(225,218,255,.35)}
html[data-tema="topbos"] .ident-kebijakan a[aria-current="page"]{color:#fff;text-decoration-color:var(--tb-emas)}

/* ── Overlay, pop-up Cek ID, notifikasi ─────────────────────────────── */
html[data-tema="topbos"] :is(.paycard,.tg-miniapp-install-card){border:0;border-radius:16px;background:var(--tb-panel);color:var(--txt);box-shadow:inset 0 0 0 1.5px #fff,0 24px 60px rgba(10,5,40,.6)}
html[data-tema="topbos"] :is(.paycard h3,.tg-miniapp-install-card h3){color:var(--tb-tinta);font:italic 800 20px/1.1 var(--tb-disp);text-transform:uppercase}
html[data-tema="topbos"] .tg-miniapp-install-card p{color:var(--tb-redup)}
html[data-tema="topbos"] .close{border:0;border-radius:50%;background:var(--tb-u3);color:#fff}
html[data-tema="topbos"] #event-popup-close{border:0;border-radius:50%;background:var(--tb-u3);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
html[data-tema="topbos"] .event-popup-card{border-radius:14px;background:var(--tb-u0);box-shadow:0 0 0 1.5px rgba(210,195,255,.5),0 24px 60px rgba(10,5,40,.6)}
html[data-tema="topbos"] .event-popup-body{border-radius:14px 14px 0 0}
html[data-tema="topbos"] .bulk-done-mark{border:0;border-radius:12px;background:#dcf7ea;color:var(--h-mint)}
html[data-tema="topbos"] .bulk-done-note{border-radius:10px;background:rgba(126,102,222,.1);color:var(--tb-redup)}
/* Pop-up Cek ID: konsep HUD awal tanpa logo (Taka 9 Okt 2026, medali & sayap dibuang) dalam
   kulit TopBos: bingkai ungu bergradasi, nama toko krem tebal miring (atau logo nama krem),
   panel lavender, pil putih, tombol 3D. #idcek-overlay: daftar sudut 4px badan HUD (1,1,1)
   memuat .paycard. */
html[data-tema="topbos"] #idcek-overlay .paycard.idcek-kartu{
  --idk-a:#5a48c6;--idk-b:#2a2178;--idk-merek:#fff4c2;--idk-nama:#fff4c2;--idk-judul:rgba(232,226,255,.86);
  --idk-panel:linear-gradient(180deg,#f6f4ff,#e3dcfa);--idk-pil:#fff;--idk-pil-garis:var(--tb-l3);
  --idk-teks:#21166b;--idk-label:#625a9c;--idk-ikon:linear-gradient(180deg,#7e66de,#4a36b3);--idk-ikon-tx:#fff;--idk-ikon-garis:transparent;
  --idk-catatan:#ffe9a8;
  border:0;border-radius:18px;background:linear-gradient(180deg,var(--idk-a),var(--idk-b));
  box-shadow:inset 0 0 0 2px rgba(210,195,255,.6),0 24px 48px -12px rgba(10,5,40,.75)}
html[data-tema="topbos"] .idcek-toko-nama{padding-right:3px;font:italic 800 25px/1.05 var(--tb-disp);letter-spacing:.01em;text-shadow:0 2px 0 #2a1d86}
html[data-tema="topbos"] #idcek-overlay .idcek-judul{color:var(--idk-judul);font:italic 700 13px/1.3 var(--tb-disp);letter-spacing:.08em;text-transform:uppercase;text-shadow:none}
html[data-tema="topbos"] .idcek-panel{padding:14px 12px 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #fff}
html[data-tema="topbos"] .idcek-ikon{border-radius:12px}
html[data-tema="topbos"] .idcek-ikon-nama{color:#ffe27a}
html[data-tema="topbos"] .idcek-label{font:italic 800 12px/1.2 var(--tb-disp);letter-spacing:.06em}
html[data-tema="topbos"] .idcek-nilai{border:0;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--tb-l3);font:italic 800 22px/26px var(--tb-disp);letter-spacing:.02em}
html[data-tema="topbos"] .idcek-tutup{top:-12px;right:-10px;width:36px;height:36px;border:2px solid #ffd0db;border-radius:50%;
  background:linear-gradient(180deg,#ff7d98,#d6335f);color:#fff;box-shadow:0 4px 10px rgba(10,5,40,.45)}
html[data-tema="topbos"] .idcek-aksi button{min-height:50px;border-radius:12px;font:italic 800 17px/1 var(--tb-disp);letter-spacing:.04em}
html[data-tema="topbos"] :is(.pwa-pasang,.notif-beli){border:0;border-radius:14px;background:linear-gradient(180deg,rgba(52,40,146,.98),rgba(29,22,86,.98));color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.45),0 22px 48px -14px rgba(10,5,40,.85)}
html[data-tema="topbos"] .pwa-pasang::after{background:rgba(210,195,255,.4)}
html[data-tema="topbos"] :is(.pwa-pasang-judul,.notif-beli-teks b,.pwa-pasang-sub b){color:#fff}
html[data-tema="topbos"] :is(.pwa-pasang-sub,.pwa-pasang-waktu,.pwa-pasang-tutup,.notif-beli-teks){color:rgba(225,218,255,.75)}
html[data-tema="topbos"] :is(.pwa-pasang-tutup,.notif-beli-tutup):hover{background:rgba(255,255,255,.1);color:#fff}
html[data-tema="topbos"] .pwa-pasang-app{color:var(--tb-emas);font:italic 800 13px/1 var(--tb-disp);letter-spacing:.04em}
html[data-tema="topbos"] .pwa-pasang-btn{border:0;border-radius:9px;background:var(--tb-aksi);color:var(--tb-aksi-tx);box-shadow:var(--tb-aksi-bayang);
  font:italic 800 13px/1 var(--tb-disp);text-shadow:var(--tb-aksi-garis)}
html[data-tema="topbos"] :is(.pwa-pasang-ikon,.notif-beli-ikon){border-radius:6px;box-shadow:0 0 0 1px rgba(210,195,255,.45)}

/* ── Pesan massal ───────────────────────────────────────────────────── */
html[data-tema="topbos"] :is(.bulk-field select,.bulk-field textarea){border:1.5px solid var(--tb-l4);border-radius:10px;background:#fff;color:var(--tb-tinta)}
html[data-tema="topbos"] .bulk-field>span{color:var(--tb-redup)}
html[data-tema="topbos"] :is(.bulk-summary,.bulk-confirm-detail){border:0;border-radius:10px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(126,102,222,.25)}
html[data-tema="topbos"] .bulk-no{border:0;border-radius:6px;background:#ece7fd;color:var(--tb-tinta)}

/* ── Halaman luar: blog & kebijakan ─────────────────────────────────── */
html[data-tema="topbos"] .b-top{color:#fff;border-bottom:0;background:linear-gradient(180deg,rgba(44,33,128,.95),rgba(29,22,86,.93));
  box-shadow:inset 0 -1px 0 rgba(190,170,255,.32)}
html[data-tema="topbos"] .b-brand span{color:#fff;font:italic 800 24px/1 var(--tb-disp);letter-spacing:.01em;text-transform:uppercase}
html[data-tema="topbos"] .b-brand img:not(.b-wordmark){border-radius:10px}
html[data-tema="topbos"] .b-brand img.b-wordmark{filter:brightness(0) invert(1)}
html[data-tema="topbos"] .b-back{border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-tema="topbos"] .b-back:hover{background:rgba(255,255,255,.2)}
html[data-tema="topbos"] :is(.b-card,.b-pager a){border:0;border-radius:12px;background:var(--tb-panel);color:var(--tb-tinta);box-shadow:var(--tb-panel-bayang)}
html[data-tema="topbos"] .b-pager a:hover{background:var(--tb-kartu-aktif)}
html[data-tema="topbos"] :is(.b-title,.b-art-title){color:#fff;font-family:var(--tb-disp);font-style:italic;font-weight:800;text-transform:uppercase}
html[data-tema="topbos"] .b-body{border:0;border-radius:0;clip-path:var(--tb-potong);background:var(--tb-tepi-miring),var(--tb-panel);color:var(--tb-tinta);box-shadow:var(--tb-panel-bayang)}
html[data-tema="topbos"] .b-body :is(h2,h3,h4,strong,b){color:var(--tb-tinta)}
html[data-tema="topbos"] .b-body h2::before{width:14px;height:5px;margin:0 10px 5px 0;border-radius:1px;background:var(--brand);transform:skewX(-24deg)}
html[data-tema="topbos"] .b-body li::marker{color:var(--tb-u4)}
html[data-tema="topbos"] .b-body blockquote{border-left:3px solid var(--tb-mg-2);border-radius:0 8px 8px 0;background:rgba(126,102,222,.1)}
html[data-tema="topbos"] .b-body a{color:#6a2bc0}
html[data-tema="topbos"] .b-eyebrow{border-radius:4px;background:var(--tb-magenta);color:#fff;box-shadow:none}
html[data-tema="topbos"] .b-more{color:#6a2bc0}
html[data-tema="topbos"] .k-halaman .card{border:0;clip-path:var(--tb-potong);background:var(--tb-tepi-miring),var(--tb-panel);box-shadow:var(--tb-panel-bayang)}
html[data-tema="topbos"] .k-halaman .card h2{color:var(--tb-tinta);font:italic 800 20px/1.15 var(--tb-disp);letter-spacing:.01em;text-transform:uppercase}
html[data-tema="topbos"] .k-halaman .card li::marker{color:var(--tb-u4)}
html[data-tema="topbos"] :is(.k-halaman .card b){color:var(--tb-tinta)}
html[data-tema="topbos"] .k-halaman .card a{color:#6a2bc0}
html[data-tema="topbos"] .k-halaman .account-menu{border:0;border-radius:12px;background:var(--h-panel)}
html[data-tema="topbos"] .k-kaki{border-top-color:rgba(190,170,255,.25)}
html[data-tema="topbos"] .k-kaki small{color:var(--t-on-bg-muted)}

/* ── Lebar khusus ───────────────────────────────────────────────────── */
@media (max-width:899px){
  /* Bilah nav bawah hanya di ponsel/tablet; di desktop ia menyatu ke kepala. */
  html[data-tema="topbos"] .bnav{background:linear-gradient(180deg,#2a2178,#17104a)}
}
@media (max-width:700px){
  /* Chip kategori lengket: latarnya pekat supaya kartu tidak tembus saat digulir. */
  html[data-tema="topbos"] .tabs{margin:0 0 14px;padding:4px 10px;background:rgba(18,12,60,.92)}
  html[data-tema="topbos"] .prod{grid-template-columns:40px minmax(0,1fr);column-gap:8px;padding:10px 9px 11px 10px;
    background:var(--tb-tepi-miring-kecil),linear-gradient(90deg,rgba(255,255,255,.55) 0 54px,transparent 54px),var(--tb-kartu)}
  html[data-tema="topbos"] :is(#products,#flash-products) .prod.active{
    background:var(--tb-tepi-miring-kecil),linear-gradient(90deg,rgba(255,255,255,.6) 0 54px,transparent 54px),var(--tb-kartu-aktif)}
  html[data-tema="topbos"] .prod .ic,html[data-tema="topbos"] .prod.prod-image-native .ic img{width:40px;height:40px}
  html[data-tema="topbos"] .prod .n{font-size:16px}
}
@media (max-width:400px){
  html[data-tema="topbos"] #sum-price{font-size:23px}
  html[data-tema="topbos"] #buy-btn{padding-inline:14px;font-size:15px;letter-spacing:.03em}
  html[data-tema="topbos"] .card h2{font-size:20px}
  html[data-tema="topbos"] :is(.tabs button,.tabs a){padding:11px 12px;font-size:14px;letter-spacing:.02em}
  html[data-tema="topbos"] :is(#check-btn,#track-go){min-width:68px;padding:0 14px}
  /* Kolom User ID tinggal ±180px di 360px (CEK + "?" di sebelahnya): 19px memotong
     teks contoh "Masukkan User ID". */
  html[data-tema="topbos"] .user-id-row #game-id{padding-left:38px;background-position:12px center;font-size:16px}
}
@media (max-width:340px){
  /* Ponsel 320px: kolom tinggal ±78px; tombol dirapatkan dan huruf 14px supaya teks contoh muat. */
  html[data-tema="topbos"] .user-id-row #game-id{padding-left:32px;background-position:10px center;background-size:16px;font-size:14px}
  html[data-tema="topbos"] :is(#check-btn,#track-go){min-width:58px;padding:0 10px}
  html[data-tema="topbos"] .user-id-row #user-id-guide-btn{width:40px;min-width:40px;height:40px;flex-basis:40px}
  /* Memanjang di layar sempit: ikon & harga mengecil, nama boleh dua baris. */
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod{--k-ikon:50px;column-gap:12px;padding:9px 11px 9px 9px;
    background:var(--tb-tepi-miring-kecil),linear-gradient(103deg,rgba(255,255,255,.75) 0 66px,rgba(126,102,222,.28) 66px 67.5px,transparent 67.5px),var(--tb-kartu)}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active{
    background:var(--tb-tepi-miring-kecil),linear-gradient(103deg,rgba(255,255,255,.8) 0 66px,rgba(200,79,230,.35) 66px 67.5px,transparent 67.5px),var(--tb-kartu-aktif)}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .prod-price>strong{padding:8px 10px 9px}
}
@media (min-width:701px){
  html[data-tema="topbos"] body{background:var(--tb-kanvas);background-attachment:fixed}
  html[data-tema="topbos"] body::before{background:var(--tb-kanvas);box-shadow:0 0 0 1px rgba(190,170,255,.25),0 24px 60px rgba(8,4,32,.7)}
}

/* ══ DESKTOP (kerangka HUD mulai 900px: kolom 1120px, nav naik ke kepala) ═ */
@media (min-width:900px){
  html[data-tema="topbos"] body::before{content:"TOPBOS // TOP UP HIGGS GAMES ISLAND";background:none;box-shadow:none;color:rgba(214,204,255,.22);
    font:italic 800 14px/1 var(--tb-disp);letter-spacing:.5em}
  html[data-tema="topbos"] .hdr{height:76px}
  html[data-tema="topbos"] #brand-name{font-size:30px}
  html[data-tema="topbos"] .bnav{height:76px;background:transparent;box-shadow:none}
  html[data-tema="topbos"] .bnav ul{height:76px}
  /* Tautan kepala: pil miring; yang aktif warna merek seperti tab "Toko" topbos. */
  html[data-tema="topbos"] .bnav a{height:42px;padding:0 18px;color:rgba(232,226,255,.84);font:italic 800 16px/1 var(--tb-disp);letter-spacing:.02em;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
  html[data-tema="topbos"] .bnav a:hover{background:rgba(255,255,255,.1)}
  /* Hijau terang seperti tab "Toko" topbos (Taka 9 Okt 2026); tulisan bergaris hijau tua. */
  html[data-tema="topbos"] .bnav a[aria-current="page"]{background:var(--tb-aksi);color:#fff;box-shadow:none;text-shadow:var(--tb-aksi-garis)}
  /* Slot tengah (Masuk/Saldo/Akun) di ujung kanan: tombol emas. */
  html[data-tema="topbos"] .bnav li.center a{margin-left:14px;padding:0 22px;border-radius:10px;clip-path:none;background:var(--tb-emas-bidang);color:#4a2c00;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 3px 0 #b07400;text-shadow:none}
  html[data-tema="topbos"] .bnav li.center a:hover{background:linear-gradient(180deg,#fff0ad,#ffd659 50%,#f6b20d)}
  html[data-tema="topbos"] .bnav li.center a[aria-current="page"]{box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 3px 0 #b07400}
  html[data-tema="topbos"] .bnav .bnav-fab{position:static;top:auto;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;transform:none}
  html[data-tema="topbos"] .bnav .bnav-fab svg{width:17px;height:17px;stroke:#4a2c00;filter:none}
  html[data-tema="topbos"] .bnav li.center a[aria-current="page"] .bnav-fab{background:transparent;box-shadow:none}
  html[data-tema="topbos"] .bnav li.center a:active .bnav-fab{transform:none}
  html[data-tema="topbos"] .wrap{padding-top:32px}
  html[data-tema="topbos"] .tabs{top:84px}
  html[data-tema="topbos"] :is(#view-pesanan,#view-saldo,#view-akun,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head h1{font-size:46px}
  html[data-tema="topbos"] .card h2{font-size:25px}
  html[data-tema="topbos"] #summary{border-radius:0;clip-path:var(--tb-potong-kecil);box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.5)}
  html[data-tema="topbos"] #buy-btn{max-width:260px;min-height:52px;font-size:19px}
  html[data-tema="topbos"] .prod{min-height:100px}
  html[data-tema="topbos"] .prod .n{font-size:18px}
  /* Memanjang desktop: ikon 54px, nama 19px. Dua lajur mulai 1180px (panel kanan ±640px),
     satu lajur di 900-1179px (badan HUD); ukuran ini cukup untuk keduanya. */
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod{--k-ikon:54px;column-gap:12px;
    background:var(--tb-tepi-miring-kecil),linear-gradient(103deg,rgba(255,255,255,.75) 0 72px,rgba(126,102,222,.28) 72px 73.5px,transparent 73.5px),var(--tb-kartu)}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod.active{
    background:var(--tb-tepi-miring-kecil),linear-gradient(103deg,rgba(255,255,255,.8) 0 72px,rgba(200,79,230,.35) 72px 73.5px,transparent 73.5px),var(--tb-kartu-aktif)}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .n{font-size:19px}
  html[data-tema="topbos"][data-kartu="memanjang"] #products .prod .prod-price>strong{font-size:17px;padding:8px 11px 9px}

  /* Kolom kiri selama domain belum punya artikel (Masukan ID lengket, bilah Total di kiri
     bawah, kartu ID berhenti di batas kolom) kini di badan HUD (hud.css) untuk seluruh
     keluarga HUD; lapisan ini hanya memberi bayangan bilah Total khas tema. */
}
@media (min-width:900px) and (min-height:700px){
  html[data-tema="topbos"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary{box-shadow:inset 0 0 0 1.5px rgba(210,195,255,.5),0 18px 40px -12px rgba(8,4,32,.8)}
}
/* == /LAPISAN TOPBOS ================================================ */

/* == AKSEN MEREK (terbatas) ======================================== */
/* Sejak 24 Sep 2026 warna merek memimpin seluruh aksi (lihat blok "Biru
   TokoMD memimpin"), jadi blok ini tidak lagi satu-satunya tempat biru
   muncul. Ia tetap ada karena tombol yang MEMINDAHKAN UANG — pilih
   pembayaran, bayar, isi saldo, konfirmasi pesan massal — wajib biru penuh
   walau aturan di atas berubah, dan karena hover-nya diatur di sini.
   Keadaan mati dikecualikan lewat :not(:disabled): #pay-body a.btn-full
   membuat :is() di sini lebih khusus daripada aturan :disabled di atas. */
html[data-tema="topbos"] :is(#buy-btn,.wallet-topup-submit,.wallet-pass-btn.primary,.bulk-confirm-yes,#pay-body a.btn-full):not(:disabled){border-color:var(--brand);background:var(--brand);color:var(--brand-on,var(--h-putih))}
html[data-tema="topbos"] :is(#buy-btn,.wallet-topup-submit,.wallet-pass-btn.primary,.bulk-confirm-yes,#pay-body a.btn-full):hover:not(:disabled){background:color-mix(in srgb,var(--brand) 86%,var(--h-putih))}
/* == /AKSEN MEREK ================================================== */