/* == BERKAS TURUNAN (dihasilkan scripts/bangun-tema-turunan.js, jangan disunting tangan) ==
   Tema hgi = badan hud.css + web/tema-sumber/hgi.lapisan.css.
   Sunting salah satu sumbernya, lalu jalankan: npm run tema:bangun */
/* == JEMBATAN TOKEN (dihasilkan storefrontTema, jangan disunting tangan) == */
html[data-tema="hgi"]{
  --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="hgi"] :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="hgi"] .ident-foot{--ident-accent:var(--t-on-bg-link)!important}
/* Baris tautan kebijakan juga duduk di kanvas, bukan di kartu. */
html[data-tema="hgi"] .ident-kebijakan a{color:var(--t-on-bg-muted)}
html[data-tema="hgi"] .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="hgi"] body{color:var(--t-on-bg)}
html[data-tema="hgi"] :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="hgi"] .b-eyebrow{background:var(--t-accent-soft);color:var(--t-accent-text)}
html[data-tema="hgi"] :is(.b-lead,.b-date,.b-pager-info,.b-crumb,.b-foot){color:var(--t-on-bg-muted)}
html[data-tema="hgi"] :is(.b-card,.b-pager a){background:var(--t-surface);border-color:var(--t-line);color:var(--t-text)}
html[data-tema="hgi"] .b-card a{color:inherit}
html[data-tema="hgi"] .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="hgi"] .b-body :is(h2,h3,h4,strong,b){color:var(--t-text)}
html[data-tema="hgi"] .b-body a{color:var(--t-accent-text)}
html[data-tema="hgi"] :is(.b-more,.b-card:hover h2,.b-pager a){color:var(--t-accent-text)}
html[data-tema="hgi"] :is(.b-foot a,.b-crumb a:hover){color:var(--t-on-bg-link)}
html[data-tema="hgi"] .b-crumb a{color:var(--t-on-bg-muted)}
html[data-tema="hgi"] .b-body blockquote{border-color:var(--t-accent)}
html[data-tema="hgi"]{--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="hgi"] body{font-family:var(--t-font)}
html[data-tema="hgi"] :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="hgi"]{
  --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="hgi"] body{color:var(--txt);background:var(--h-kanvas);-webkit-font-smoothing:antialiased}
html[data-tema="hgi"] :is(input,select,textarea){color:var(--txt);color-scheme:dark}
html[data-tema="hgi"] ::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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] .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="hgi"] .hdr{height:55px;padding-block:0}
html[data-tema="hgi"] .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="hgi"] .brand{justify-content:flex-start;gap:10px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] :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="hgi"] .ident-wordmark[style*="--logo-nama"]{-webkit-mask-position:left center;mask-position:left center}
html[data-tema="hgi"] #brand-name{font:600 16px/1 var(--h-disp);letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hgi"] .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="hgi"] .hdr-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"]
   (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="hgi"] .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="hgi"] .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="hgi"] :is(.pwa-pasang-meta,.pwa-pasang-teks,.pwa-pasang-aksi){display:contents}
html[data-tema="hgi"] .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="hgi"] .pwa-pasang-ikon:has(img){background:#0e1219}
html[data-tema="hgi"] .pwa-pasang-ikon img{object-fit:contain}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .pwa-pasang-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="hgi"] .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="hgi"] .pwa-pasang:not(:has(.pwa-pasang-btn)) .pwa-pasang-judul{grid-column:1/-1}
html[data-tema="hgi"] .pwa-pasang-sub{grid-column:1/-1;grid-row:3;margin-top:2px;color:var(--muted)}
html[data-tema="hgi"] .pwa-pasang-sub b{color:var(--h-putih);font-weight:700}
html[data-tema="hgi"] .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="hgi"] .pwa-pasang-nanti{display:none}
html[data-tema="hgi"] .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="hgi"] .topup-artikel{display:none}
html[data-tema="hgi"] .ta-kepala{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
html[data-tema="hgi"] .ta-kepala h2{margin:0}
html[data-tema="hgi"] .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="hgi"] :is(.ta-sorotan,.ta-daftar a){display:block;color:inherit;text-decoration:none}
html[data-tema="hgi"] .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="hgi"] .ta-tgl{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}
html[data-tema="hgi"] .ta-sorotan .ta-tgl{margin-top:10px}
html[data-tema="hgi"] .ta-tgl b{color:var(--h-biru-teks);font-weight:700}
html[data-tema="hgi"] .ta-sorotan h3{margin:4px 0 0;color:var(--h-putih);font:800 17px/1.3 var(--t-font)}
html[data-tema="hgi"] .ta-daftar{margin:14px -14px -14px;padding:0;list-style:none}
html[data-tema="hgi"] .ta-daftar a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--h-line)}
html[data-tema="hgi"] .ta-baris-img{flex:0 0 112px;width:112px;height:63px;object-fit:cover;border-radius:3px;background:var(--h-g2)}
html[data-tema="hgi"] .ta-baris-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
html[data-tema="hgi"] .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="hgi"] :is(.ta-sorotan:hover h3,.ta-daftar a:hover b){color:var(--h-biru-teks)}

/* ── Hero (bila dinyalakan domain) ─────────────────────────────────────── */
html[data-tema="hgi"] .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="hgi"] .hero:not(.hero-mati)::before{content:"";position:absolute;inset:7px;z-index:3;background:var(--h-siku);pointer-events:none}
html[data-tema="hgi"] .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="hgi"] .hero h1{font:600 23px/1.04 var(--h-disp);letter-spacing:.06em;text-transform:uppercase;text-shadow:none}
html[data-tema="hgi"] .hero .h1-kw{font:400 12px/1.3 var(--t-font);letter-spacing:0;text-transform:none;color:#c9ced5;opacity:1}
html[data-tema="hgi"] .hero p{color:#b9bfc8;opacity:1;text-shadow:none}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .event-slider{border-radius:0;box-shadow:0 0 0 1px var(--h-line-2);background:var(--h-g0)}
html[data-tema="hgi"] .event-slider::after{content:"";position:absolute;inset:7px;z-index:1;background:var(--h-siku);opacity:.9;pointer-events:none}
html[data-tema="hgi"] .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="hgi"] .event-dots{gap:5px;margin-top:10px}
/* Garis 2px, bidang ketuk tetap 12px. */
html[data-tema="hgi"] .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="hgi"] .event-dots button.is-on{width:26px;background:linear-gradient(var(--h-putih),var(--h-putih)) center/100% 2px no-repeat}
html[data-tema="hgi"] .event-dots button:focus-visible{outline:2px solid var(--h-putih);outline-offset:2px}

/* ── Kartu langkah ─────────────────────────────────────────────────────── */
html[data-tema="hgi"] .card{margin-bottom:12px;padding:16px 14px 14px}
html[data-tema="hgi"] .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="hgi"] .user-id-head h2{margin:0}
/* Nomor langkah "01": angka dari HTML, nol di depannya dari ::before. */
html[data-tema="hgi"] .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="hgi"] .card h2 .num::before{content:"0"}

/* Isian */
html[data-tema="hgi"] input{border:1px solid var(--h-line-2);background:var(--h-field);color:var(--h-putih)}
html[data-tema="hgi"] :is(input,textarea)::placeholder{color:#6d747e;opacity:1}
html[data-tema="hgi"] 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="hgi"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount){font-family:var(--h-disp);font-weight:500;letter-spacing:.14em}
html[data-tema="hgi"] :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="hgi"] .wallet-topup-input input{background:transparent}
html[data-tema="hgi"] .user-id-row{gap:6px}
html[data-tema="hgi"] .user-id-row #game-id{height:48px}
html[data-tema="hgi"] :is(#check-btn,#track-go){height:48px;padding:0 18px;font-size:13px;line-height:1}
html[data-tema="hgi"] #bulk-preview-btn{min-height:44px;padding:0 18px;font-size:12px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .user-id-row #user-id-guide-btn img{filter:grayscale(1) brightness(1.5)}
html[data-tema="hgi"] .user-id-copy{color:var(--muted);font-size:12.5px;line-height:1.6}
html[data-tema="hgi"] .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="hgi"] .buyer.err{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.08);color:var(--h-rose)}
html[data-tema="hgi"] .id-mode{gap:0;padding:0;border:1px solid var(--h-line);border-radius:0;background:transparent}
html[data-tema="hgi"] .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="hgi"] .tabs{gap:0;margin:0 0 14px}
html[data-tema="hgi"] .tabs button,html[data-tema="hgi"] .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="hgi"] :is(.tabs button,.tabs a)+:is(button,a){margin-left:-1px}

/* ── Nominal: kartu tegak, harga putih ─────────────────────────────────── */
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .prod .ic img{width:30px;height:30px;font-size:9px;line-height:1.1}
html[data-tema="hgi"] .prod.prod-image-native .ic{background:transparent;box-shadow:none}
html[data-tema="hgi"] .prod.prod-image-native .ic img{width:40px;height:40px}
html[data-tema="hgi"] .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="hgi"] .prod .n small{color:var(--muted);font:400 11px/1.3 var(--t-font);letter-spacing:0;text-transform:none}
html[data-tema="hgi"] .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="hgi"] .prod-price strong,html[data-tema="hgi"] .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="hgi"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .prod-coret{gap:2px 4px;margin-bottom:-1px}
html[data-tema="hgi"] .prod-coret del{letter-spacing:0}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .prod.active:has(.prod-diskon)::before{top:5px}
html[data-tema="hgi"] .prod.active:has(.prod-diskon)::after{top:10px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .prod.active:has(.promo-badge)::before,html[data-tema="hgi"] .prod.active:has(.promo-badge)::after{content:none}
html[data-tema="hgi"] .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="hgi"] .flash-products{padding-top:11px}
html[data-tema="hgi"] .promo-copy{margin-top:8px}
html[data-tema="hgi"] .promo-copy b{color:var(--t-promo);font-size:10px;letter-spacing:.12em}
html[data-tema="hgi"] .promo-copy small{color:var(--muted);font-size:10.5px}
html[data-tema="hgi"] .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="hgi"] .flash-ticket{background:var(--t-promo);color:var(--h-putih);font-size:9.5px;letter-spacing:.16em}
html[data-tema="hgi"] .flash-sale-head h3{color:var(--h-putih);font-size:14px;letter-spacing:.12em}
html[data-tema="hgi"] .flash-sale-head p{color:var(--muted)}
html[data-tema="hgi"] .flash-products .prod{border-color:var(--h-line);background:rgba(0,0,0,.28)}
html[data-tema="hgi"] .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="hgi"] .catalog-empty{color:var(--muted)}

/* ── Email ─────────────────────────────────────────────────────────────── */
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .email-help[data-kind="error"]::before{border-color:var(--h-rose);color:var(--h-rose)}

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

/* ── Bilah Total: kaca grafit bersiku ──────────────────────────────────── */
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .summary>div:has(#sum-product:not(:empty))::before{content:none}
html[data-tema="hgi"] .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="hgi"] #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="hgi"] #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="hgi"] .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="hgi"] .bantuan-tg:hover{box-shadow:0 14px 30px rgba(0,0,0,.6)}
html[data-tema="hgi"] .bantuan-avatar{border-radius:0;background:transparent;box-shadow:none}
html[data-tema="hgi"] .bantuan-avatar>img{border-radius:0}
html[data-tema="hgi"] .bantuan-avatar-fallback{color:var(--h-putih);font:600 13px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="hgi"] .bantuan-channel-badge{border-color:var(--h-g1)}
html[data-tema="hgi"] .bantuan-copy small{font-family:var(--h-disp);letter-spacing:.14em}

/* ── Navigasi bawah: garis bawah putih + tombol tengah berlian ─────────── */
html[data-tema="hgi"] .bnav{background:var(--h-g0);border-top:1px solid var(--h-line);box-shadow:none}
html[data-tema="hgi"] .bnav a{gap:6px;color:#7f8792;font-size:9.5px;line-height:1;letter-spacing:.12em}
html[data-tema="hgi"] .bnav svg{width:21px;height:21px}
html[data-tema="hgi"] .bnav a[aria-current="page"]{color:var(--h-putih);font-weight:600}
html[data-tema="hgi"] .bnav a[aria-current="page"] svg{fill:none;stroke-width:2}
html[data-tema="hgi"] .bnav a[aria-current="page"]::before{display:none}
html[data-tema="hgi"] .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="hgi"] .bnav a:focus-visible{outline:2px solid var(--h-putih);outline-offset:-4px;border-radius:0}
html[data-tema="hgi"] .bnav li.center a{color:var(--h-putih)}
html[data-tema="hgi"] .bnav li.center a[aria-current="page"]::after{display:none}
html[data-tema="hgi"] .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="hgi"] .bnav .bnav-fab svg{width:22px;height:22px;stroke:var(--h-g1);stroke-width:2;transform:rotate(-45deg)}
html[data-tema="hgi"] .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="hgi"] .bnav li.center a[aria-current="page"] .bnav-fab svg{fill:none;stroke-width:2.2}
html[data-tema="hgi"] .bnav li.center a:active .bnav-fab{transform:translateX(-50%) rotate(45deg) scale(.94)}
html[data-tema="hgi"] .bnav li.center a:focus-visible .bnav-fab{outline:2px solid var(--h-amber);outline-offset:5px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .bnav li.center .bnav-dot.pts{top:-36px;left:calc(50% + 15px)}

/* ── Halaman ───────────────────────────────────────────────────────────── */
html[data-tema="hgi"] .page-head{padding:22px 2px 12px}
html[data-tema="hgi"] .page-head h1{color:var(--h-putih);font-size:26px;font-weight:600;line-height:1.08;letter-spacing:.08em}
html[data-tema="hgi"] .page-head p{margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.55}
html[data-tema="hgi"] .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="hgi"] .section-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-aksen);transform:rotate(45deg)}
html[data-tema="hgi"] .page-head .section-kicker{margin-bottom:10px}
html[data-tema="hgi"] .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="hgi"] .page-back:hover{background:rgba(255,255,255,.06)}
html[data-tema="hgi"] :is(.btn-full,.nota-btn){padding:15px 14px;font-size:12px;line-height:1.1;letter-spacing:.18em}
html[data-tema="hgi"] :is(.btn-full.btn-outline,.nota-btn-sekunder){border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] :is(.btn-full.btn-outline,.nota-btn-sekunder):hover{background:rgba(255,255,255,.06)}
html[data-tema="hgi"] .muted{color:var(--muted)}
html[data-tema="hgi"] .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="hgi"] .payment-card::before{display:none}
html[data-tema="hgi"] .pay-page{padding:20px 16px 16px}
html[data-tema="hgi"] .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="hgi"] .pay-kicker::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="hgi"] .pay-page h3{margin:10px 0 16px;color:var(--h-putih);font-size:17px;line-height:1.2;letter-spacing:.14em}
html[data-tema="hgi"] .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="hgi"] .pay-invoice-label{color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.2em}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .pay-funding-breakdown{margin-top:14px;padding-top:12px;border-top:1px dashed var(--h-line-2)}
html[data-tema="hgi"] .pay-funding-breakdown span{color:var(--muted);font-size:12.5px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .pay-steps{gap:6px;margin:2px 0 16px}
html[data-tema="hgi"] .pay-step{gap:6px;color:var(--t-subtle);font-size:10px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
html[data-tema="hgi"] .pay-step.active,html[data-tema="hgi"] .pay-step.done{color:var(--h-putih)}
html[data-tema="hgi"] .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="hgi"] .pay-step.done .pay-step-dot{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hgi"] .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="hgi"] .pay-step-line.done{background:var(--h-mint)}
/* Kepala status: amber saat menunggu, mint berhasil, merah muda gagal. */
html[data-tema="hgi"] .pay-state-head{gap:12px;padding:14px;border:1px solid rgba(232,192,122,.32);background:rgba(232,192,122,.06)}
html[data-tema="hgi"] .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="hgi"] .pay-status.ok .pay-state-head{border-color:rgba(158,232,191,.32);background:rgba(158,232,191,.06)}
html[data-tema="hgi"] .pay-status.ok .pay-state-symbol{border-color:rgba(158,232,191,.55);background:transparent;color:var(--h-mint)}
html[data-tema="hgi"] .pay-status.err .pay-state-head{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06)}
html[data-tema="hgi"] .pay-status.err .pay-state-symbol{border-color:rgba(255,143,143,.55);background:transparent;color:var(--h-rose)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .order-ticket-top b{color:var(--h-putih);font:600 19px/1 var(--h-disp);letter-spacing:.14em;text-shadow:none}
html[data-tema="hgi"] .order-full-id{color:var(--muted)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .order-ticket-actions button:last-child{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hgi"] .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="hgi"] .pay-email-note b{color:var(--h-putih);font-weight:600}
html[data-tema="hgi"] .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="hgi"] #pay-body img{padding:10px;border-radius:0;background:#fff}
/* Bingkai bidik di sekeliling gambar QR. */
html[data-tema="hgi"] #pay-body img{box-shadow:0 0 0 6px var(--h-g1),0 0 0 7px var(--h-line-2)}
html[data-tema="hgi"] .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="hgi"] .track-order-card{overflow:visible}
html[data-tema="hgi"] .track-status-head{gap:14px;padding:16px;background:transparent;border-bottom:1px solid var(--h-line)}
html[data-tema="hgi"] :is(.track-order-card.ok,.track-order-card.err) .track-status-head{background:transparent;border-bottom-color:var(--h-line)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] :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="hgi"] .track-overline{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.22em}
html[data-tema="hgi"] :is(.track-order-card.ok,.track-order-card.err) .track-overline{color:var(--muted)}
html[data-tema="hgi"] .track-status-head strong{margin-top:6px;color:var(--h-putih);font-size:19px;line-height:1.1;letter-spacing:.1em}
html[data-tema="hgi"] .track-status-head p{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
html[data-tema="hgi"] .track-status-head small{color:var(--t-subtle)}
html[data-tema="hgi"] .track-buyer{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hgi"] .track-avatar{font-size:12px;font-weight:600;letter-spacing:.06em}
html[data-tema="hgi"] .track-buyer span:not(.track-avatar){color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.18em}
html[data-tema="hgi"] .track-buyer strong{color:var(--h-putih);font:600 14px/1.25 var(--h-disp);letter-spacing:.04em}
html[data-tema="hgi"] .track-detail-grid{border:1px solid var(--h-line)}
html[data-tema="hgi"] .track-detail-grid>div{background:rgba(0,0,0,.18)}
html[data-tema="hgi"] .track-detail-grid>div:nth-child(odd){border-right-color:var(--h-line)}
html[data-tema="hgi"] .track-detail-grid>div:nth-child(-n+2){border-bottom-color:var(--h-line)}
html[data-tema="hgi"] .track-detail-grid span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.16em}
html[data-tema="hgi"] .track-detail-grid b{color:var(--h-putih);font:500 12.5px/1.35 var(--h-disp);letter-spacing:.03em}
html[data-tema="hgi"] .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="hgi"] .track-ticket span{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.2em}
html[data-tema="hgi"] .track-ticket b{margin-top:8px;color:var(--h-putih);font:600 18px/1 var(--h-disp);letter-spacing:.1em}
html[data-tema="hgi"] .track-ticket button{min-height:40px;padding:0 12px;font-size:10.5px;line-height:1;letter-spacing:.1em}
html[data-tema="hgi"] .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="hgi"] .track-error{border-color:rgba(255,143,143,.36);background:rgba(255,143,143,.06);color:var(--h-rose)}
html[data-tema="hgi"] .track-security{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="hgi"] .track-security span{color:var(--muted)}
html[data-tema="hgi"] .refund-box{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hgi"] .refund-box[style]{color:var(--err-tx)!important}
html[data-tema="hgi"] .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="hgi"] .st-badge{font-family:var(--h-disp);letter-spacing:.1em;text-transform:uppercase}

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

/* Menu akun / tautan halaman */
html[data-tema="hgi"] :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="hgi"] :is(.account-menu a,.account-menu button):hover{background:rgba(255,255,255,.05)}
html[data-tema="hgi"] :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="hgi"] .account-menu a>i{color:var(--t-subtle)}
html[data-tema="hgi"] .account-menu button.danger{color:var(--h-rose)}
html[data-tema="hgi"] .account-menu button.danger>span{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hgi"] .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="hgi"] .login-card .login-back{border:0;background:transparent;color:var(--muted);font-size:11px}

/* ── Akun: kartu anggota & check-in ────────────────────────────────────── */
html[data-tema="hgi"] .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="hgi"] .player-pass::before{display:none}
html[data-tema="hgi"] .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="hgi"] .wallet-pass::after{content:"TOKOMD // DOMPET"}
html[data-tema="hgi"] .player-pass-top{position:relative;align-items:flex-start;flex-wrap:wrap;row-gap:10px}
html[data-tema="hgi"] .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="hgi"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:rgba(255,255,255,.06)}
html[data-tema="hgi"] .avatar-initials{font-family:var(--h-disp);font-weight:600}
html[data-tema="hgi"] .player-identity strong{color:var(--h-putih);font-size:17px;line-height:1.15;letter-spacing:.1em}
html[data-tema="hgi"] .player-identity>span{margin-top:5px;color:var(--muted);font-size:12px}
html[data-tema="hgi"] .player-identity-actions{gap:6px;margin-top:10px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .player-identity{flex:1 1 calc(100% - 68px)}
html[data-tema="hgi"] .player-pass-top>.tier-chip{position:static;align-self:flex-start;max-width:none;width:auto}
html[data-tema="hgi"] .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="hgi"] .tier-chip::before{content:"";width:5px;height:5px;flex:0 0 5px;background:var(--h-amber);transform:rotate(45deg)}
html[data-tema="hgi"] .account-meters{gap:1px;margin:18px 0 0;padding:0;border:1px solid var(--h-line);background:var(--h-line)}
html[data-tema="hgi"] .account-meters>div{padding:12px 14px;background:rgba(14,16,19,.94)}
html[data-tema="hgi"] .account-meters>div+div{padding-left:14px;border-left:0}
html[data-tema="hgi"] .account-meters span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="hgi"] .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="hgi"] .tier-progress{margin-top:14px}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .tier-track span{border-radius:0;background:repeating-linear-gradient(90deg,var(--h-putih) 0 10px,transparent 10px 13px)}
html[data-tema="hgi"] :is(.profile-editor,.avatar-picker){border:1px solid var(--h-line);background:rgba(0,0,0,.3);box-shadow:none}
html[data-tema="hgi"] .profile-editor>label{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hgi"] .profile-editor input{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-field);color:var(--h-putih)}
html[data-tema="hgi"] .profile-cancel{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] #acct-name-help,html[data-tema="hgi"] .avatar-picker>span,html[data-tema="hgi"] .avatar-save-status{color:var(--muted)}
html[data-tema="hgi"] .profile-editor-status{color:var(--h-amber)}
html[data-tema="hgi"] .avatar-options button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] .avatar-options button[aria-pressed="true"]{border-color:var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hgi"] .checkin-card{gap:12px;padding:16px}
html[data-tema="hgi"] .checkin-mark{width:42px;height:42px;border-color:var(--h-putih);font-size:13px;font-weight:600;letter-spacing:.04em}
html[data-tema="hgi"] .checkin-card strong{color:var(--h-putih);font-size:12.5px;line-height:1.2;letter-spacing:.14em}
html[data-tema="hgi"] .checkin-card>div>span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
html[data-tema="hgi"] .checkin-card button{min-height:44px;padding:0 14px;font-size:10.5px;line-height:1;letter-spacing:.14em}
html[data-tema="hgi"] .checkin-days{gap:5px}
html[data-tema="hgi"] .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="hgi"] .checkin-days li>span{font:500 8.5px/1 var(--h-disp);letter-spacing:.08em;text-transform:uppercase}
html[data-tema="hgi"] .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="hgi"] .checkin-days li>small{color:#d6dbe1;font:600 9.5px/1 var(--h-disp)}
html[data-tema="hgi"] .checkin-days li.done{border-color:var(--h-line);background:transparent}
html[data-tema="hgi"] .checkin-days li.done>b{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hgi"] .checkin-days li.today{border-color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-putih)}
html[data-tema="hgi"] .checkin-days li.bonus{border-color:rgba(232,192,122,.5);background:transparent}
html[data-tema="hgi"] .checkin-days li.bonus>b{border-color:rgba(232,192,122,.6);color:var(--h-amber)}
html[data-tema="hgi"] .checkin-days li.bonus>small{color:var(--h-amber)}
html[data-tema="hgi"] .account-rank{border-color:rgba(232,192,122,.4)}
html[data-tema="hgi"] .account-rank span{color:var(--h-amber);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hgi"] .account-rank strong{color:var(--h-putih);font-family:var(--h-disp);font-weight:600}
html[data-tema="hgi"] .account-rank small{color:var(--muted)}
html[data-tema="hgi"] .spender-card::after{display:none}
html[data-tema="hgi"] .spender-head h2{color:var(--h-putih);font-size:15px;letter-spacing:.14em}
html[data-tema="hgi"] .spender-head p{color:var(--muted)}
html[data-tema="hgi"] .spender-trophy{width:40px;height:40px;flex-basis:40px;color:var(--h-amber);border-color:rgba(232,192,122,.55)}
html[data-tema="hgi"] .spender-periods{gap:0;padding:0;border:1px solid var(--h-line);background:transparent}
html[data-tema="hgi"] .spender-periods button{border-radius:0;color:var(--muted);font-size:10.5px;letter-spacing:.12em}
html[data-tema="hgi"] .spender-list li{border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hgi"] .spender-rank{color:var(--t-subtle);font-family:var(--h-disp)}
html[data-tema="hgi"] .spender-list li:first-child .spender-rank{color:var(--h-amber)}
html[data-tema="hgi"] .spender-person strong{color:var(--h-putih)}
html[data-tema="hgi"] .spender-person small{color:var(--muted)}
html[data-tema="hgi"] .spender-list li>b{color:var(--h-putih);font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="hgi"] :is(.spender-state,.spender-zone){color:var(--muted)}

/* ── Saldo ─────────────────────────────────────────────────────────────── */
html[data-tema="hgi"] .wallet-pass-top{align-items:flex-start}
html[data-tema="hgi"] .wallet-pass-mark{width:52px;height:52px;flex-basis:52px;border-color:var(--h-putih);font-size:16px;font-weight:600}
html[data-tema="hgi"] .wallet-pass-copy .section-kicker{color:var(--muted)}
html[data-tema="hgi"] .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="hgi"] .wallet-pass-copy small{margin-top:4px;color:var(--muted);font-size:12px}
html[data-tema="hgi"] .wallet-pass-top>.tier-chip{flex:0 0 auto}
html[data-tema="hgi"] .wallet-pass-balance{border-top:1px dashed var(--h-line-2)}
html[data-tema="hgi"] .wallet-pass-balance span{color:var(--muted);font-size:9.5px;font-weight:500;letter-spacing:.22em}
html[data-tema="hgi"] .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="hgi"] .wallet-pass .wallet-pass-meters{margin-top:14px;padding:0;border:1px solid var(--h-line)}
html[data-tema="hgi"] .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="hgi"] .wallet-pass-btn b{border-radius:0;background:rgba(14,16,19,.16)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .wallet-topup-head h4{color:var(--h-putih);font-size:15px;letter-spacing:.12em}
html[data-tema="hgi"] .wallet-topup-head p{color:var(--muted)}
html[data-tema="hgi"] .wallet-topup-steps{color:var(--muted);letter-spacing:.1em}
html[data-tema="hgi"] .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="hgi"] .wallet-topup-steps .active{color:var(--h-putih)}
html[data-tema="hgi"] .wallet-topup-steps li:not(:last-child)::after{height:1px;background:var(--h-line-2)}
html[data-tema="hgi"] :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="hgi"] .wallet-topup-presets button{color:#d6dbe1;font:600 13px/1.1 var(--h-disp);letter-spacing:.02em}
html[data-tema="hgi"] .wallet-topup-input{border:1px solid var(--h-line-2);background:var(--h-field)}
html[data-tema="hgi"] .wallet-topup-input:focus-within{border-color:var(--h-putih);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
html[data-tema="hgi"] .wallet-topup-input b{color:var(--muted);font-family:var(--h-disp)}
html[data-tema="hgi"] .wallet-topup-custom>small{color:var(--muted)}
html[data-tema="hgi"] :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="hgi"] .wallet-topup-error{border-color:rgba(255,143,143,.36);color:var(--h-rose)}
html[data-tema="hgi"] .wallet-topup-quote-head span{color:var(--muted)}
html[data-tema="hgi"] .wallet-topup-method-logo{border:0;border-radius:0;background:#fff}
html[data-tema="hgi"] .wallet-topup-methods button small{color:var(--muted)}
html[data-tema="hgi"] .wallet-topup-methods button>strong{font-family:var(--h-disp);letter-spacing:.02em}
html[data-tema="hgi"] .wallet-topup-breakdown{border:1px solid rgba(158,232,191,.3);background:rgba(158,232,191,.06);color:var(--h-mint)}
html[data-tema="hgi"] .wallet-topup-submit{min-height:48px;padding:0 14px;font-size:12px;line-height:1.1;letter-spacing:.14em}
html[data-tema="hgi"] .wallet-topup-message{color:var(--muted)}
html[data-tema="hgi"] .wallet-topup-instruction{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--muted)}
html[data-tema="hgi"] .wallet-topup-instruction img{border-radius:0;background:#fff}
html[data-tema="hgi"] .wallet-topup-va strong{color:var(--h-putih);font-family:var(--h-disp)}
html[data-tema="hgi"] .wallet-topup-active{border:1px solid rgba(232,192,122,.4);background:rgba(232,192,122,.06)}
html[data-tema="hgi"] .wallet-topup-active-head strong{color:var(--h-amber)}
html[data-tema="hgi"] .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="hgi"] .wallet-topup-record.process{border-left-color:var(--h-putih)}
html[data-tema="hgi"] .wallet-topup-record.done{border-left-color:var(--h-mint)}
html[data-tema="hgi"] .wallet-topup-record.fail{border-left-color:var(--h-rose)}
html[data-tema="hgi"] .wallet-topup-record button{border:1px solid var(--h-putih);background:var(--h-putih);color:var(--h-g1)}
html[data-tema="hgi"] .account-subhead strong{color:var(--h-putih);font-size:12px;letter-spacing:.14em}
html[data-tema="hgi"] .account-subhead span{color:var(--muted)}
html[data-tema="hgi"] .account-subhead button{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:9.5px}
html[data-tema="hgi"] :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="hgi"] .account-entry{border:1px solid var(--h-line);background:rgba(0,0,0,.22);color:var(--txt)}
html[data-tema="hgi"] .entry-kicker{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.16em}
html[data-tema="hgi"] :is(.entry-main small,.entry-main>span:not(.entry-kicker)){color:var(--muted)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .entry-status.ok{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hgi"] .entry-status.err{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hgi"] .entry-value>strong{font-family:var(--h-disp);font-weight:600;letter-spacing:.02em}
html[data-tema="hgi"] .mutation-sign.pos{border-color:rgba(158,232,191,.5);background:transparent;color:var(--h-mint)}
html[data-tema="hgi"] .mutation-sign.neg{border-color:rgba(255,143,143,.5);background:transparent;color:var(--h-rose)}
html[data-tema="hgi"] .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="hgi"] :is(.account-list-state,.account-loading){color:var(--muted)}
html[data-tema="hgi"] .account-loading{border:1px solid var(--h-line);background:var(--h-panel)}
html[data-tema="hgi"] .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="hgi"] :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="hgi"] .bulk-field>span{color:var(--muted);font-family:var(--h-disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hgi"] .bulk-secondary{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11px}
html[data-tema="hgi"] :is(.bulk-summary,.bulk-confirm-detail){border:1px solid var(--h-line);background:rgba(0,0,0,.22)}
html[data-tema="hgi"] .bulk-hist{border:1px solid var(--h-line-2);background:transparent;color:var(--muted);font-size:10px}
html[data-tema="hgi"] .bulk-hist.is-active{border-color:var(--h-putih);color:var(--h-putih)}
html[data-tema="hgi"] .bulk-chip{font-family:var(--h-disp);letter-spacing:.08em}
html[data-tema="hgi"] .bulk-no{border:1px solid var(--h-line-2);color:var(--h-putih)}
html[data-tema="hgi"] .bulk-confirm-no{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}

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

/* ── Overlay ───────────────────────────────────────────────────────────── */
html[data-tema="hgi"] :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="hgi"] :is(.paycard h3,.tg-miniapp-install-card h3){color:var(--h-putih);letter-spacing:.12em}
html[data-tema="hgi"] .tg-miniapp-install-card p{color:var(--muted)}
html[data-tema="hgi"] .tg-miniapp-install-later{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] .close{border:1px solid var(--h-line-2);background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] #event-popup-close{border:1px solid var(--h-line-2);border-radius:0;background:var(--h-g1);color:var(--h-putih)}
html[data-tema="hgi"] .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="hgi"] .event-popup-card{width:min(92vw,420px,calc((100vh - 150px) * .75))}
html[data-tema="hgi"] .event-popup-body{border-radius:0}
html[data-tema="hgi"] .event-popup-cta{font-size:12px;letter-spacing:.16em}
html[data-tema="hgi"] .bulk-done-mark{color:var(--h-mint);border-color:rgba(158,232,191,.55)}
html[data-tema="hgi"] .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="hgi"] :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="hgi"] .card h2{font-size:16px}
html[data-tema="hgi"] .page-head h1{font-size:28px;letter-spacing:-.01em}
html[data-tema="hgi"] .prod .n{color:#c4cbd6;font-size:13px;line-height:1.3}
html[data-tema="hgi"] :is(.account-menu a,.account-menu button){font-size:14px;letter-spacing:0}
html[data-tema="hgi"] .paym-n{font-size:13.5px}
html[data-tema="hgi"] .player-identity strong{font-size:18px}
html[data-tema="hgi"] .track-status-head strong{font-size:20px}
/* Label kecil tetap kapital Tomorrow, jaraknya dirapatkan dari .14–.24em. */
html[data-tema="hgi"] :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="hgi"] :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="hgi"] .faq-item summary::after{border-radius:4px}
html[data-tema="hgi"] .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="hgi"] :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="hgi"] :is(.user-id-card-flow,.product-card,.topup-artikel){background:var(--h-siku),var(--h-panel)}
html[data-tema="hgi"] .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="hgi"] .summary{background:var(--h-siku),rgba(17,21,29,.94)}
html[data-tema="hgi"] .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="hgi"] :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="hgi"] .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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] .prod.active::before{background:var(--brand)}
html[data-tema="hgi"] .prod.active::after{border-color:var(--brand-on,#fff)}
html[data-tema="hgi"] :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="hgi"] :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="hgi"] .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="hgi"] .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="hgi"] .bnav .bnav-fab svg{stroke:var(--brand-on,#fff)}
html[data-tema="hgi"] .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="hgi"] .bnav a[aria-current="page"]{color:var(--h-biru-teks)}
html[data-tema="hgi"] .bnav a[aria-current="page"]::after{background:var(--brand)}
/* Angka besar: tetap terang supaya terbaca, pendarnya biru merek. */
html[data-tema="hgi"] :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="hgi"] 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="hgi"] .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="hgi"] .prod{padding:9px 9px;grid-template-columns:36px minmax(0,1fr);column-gap:8px}
  html[data-tema="hgi"] .prod .ic{width:36px;height:36px}
  html[data-tema="hgi"] .prod.prod-image-native .ic img{width:36px;height:36px}
  /* Chip kategori lengket di ponsel: latarnya ikut panel kartu */
  html[data-tema="hgi"] .tabs{margin:0 -4px 12px;padding:4px;background:rgba(19,22,26,.97)}
}
@media (max-width:400px){
  html[data-tema="hgi"] #buy-btn{padding-inline:12px;font-size:11px;letter-spacing:.06em}
  html[data-tema="hgi"] #sum-price{font-size:19px}
  /* Serapat Klasik: 40px ikon + dua baris teks, tanpa ruang kosong di atas-bawah. */
  html[data-tema="hgi"] .prod{min-height:84px}
  html[data-tema="hgi"] :is(.tabs button,.tabs a){padding:12px 10px;font-size:10.5px;letter-spacing:.08em}
  html[data-tema="hgi"] .card h2{font-size:14px;letter-spacing:.12em}
  /* Satu baris saja: takik berlian tiket duduk sejajar garis putusnya. */
  html[data-tema="hgi"] .order-ticket-top span{font-size:9.5px;letter-spacing:.12em;white-space:nowrap}
  html[data-tema="hgi"] .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="hgi"] body{background:#07080a}
  html[data-tema="hgi"] body::before{background:var(--h-kanvas);box-shadow:0 0 0 1px #1a1d22,0 24px 60px rgba(0,0,0,.6)}
  html[data-tema="hgi"] .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="hgi"]{--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="hgi"] body{background:var(--h-kanvas)}
  html[data-tema="hgi"] 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="hgi"] .hdr{max-width:none;margin:0;height:72px;padding-inline:var(--h-tepi);justify-content:flex-start;gap:14px}
  html[data-tema="hgi"] .brand{flex:0 0 auto;justify-content:flex-start}
  html[data-tema="hgi"] #brand-name{font-size:19px}
  html[data-tema="hgi"] .brand img{height:40px}
  html[data-tema="hgi"] .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="hgi"] .wrap{max-width:calc(var(--h-kolom) + 2 * var(--h-sisi));padding:28px var(--h-sisi) 64px}
  html[data-tema="hgi"] .tabs{top:76px}

  /* Bilah nav bawah naik ke header: baris tautan, slot tengah jadi tombol putih. */
  html[data-tema="hgi"] .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="hgi"] .bnav ul{display:flex;align-items:center;gap:2px;height:72px;max-width:none;margin:0}
  html[data-tema="hgi"] .bnav a{flex-direction:row;gap:8px;height:42px;padding:0 14px;font-size:11px;letter-spacing:.14em}
  html[data-tema="hgi"] .bnav svg{width:17px;height:17px}
  html[data-tema="hgi"] .bnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  html[data-tema="hgi"] .bnav a[aria-current="page"]::after{display:none}
  html[data-tema="hgi"] .bnav a:hover{background:rgba(255,255,255,.06)}
  /* Slot tengah (Masuk/Saldo/Akun) pindah ke ujung kanan, jadi tombol putih. */
  html[data-tema="hgi"] .bnav li.center{order:9}
  html[data-tema="hgi"] .bnav li.center a{margin-left:12px;padding:0 18px;justify-content:center;background:var(--brand);color:var(--brand-on,#fff)}
  html[data-tema="hgi"] .bnav li.center a:hover{background:color-mix(in srgb,var(--brand) 86%,var(--h-putih))}
  html[data-tema="hgi"] .bnav li.center a[aria-current="page"]{box-shadow:none}
  /* Slot tengah jadi tombol di header: heksagon ponsel dilepas. */
  html[data-tema="hgi"] .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="hgi"] .bnav .bnav-fab svg{width:17px;height:17px;stroke:var(--brand-on,#fff);stroke-width:2;transform:none}
  html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .summary::after{content:none}
  html[data-tema="hgi"] #buy-btn{grid-column:2;max-width:230px;min-height:46px;padding-block:10px}
  html[data-tema="hgi"] .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="hgi"] body[data-page="topup"].total-sembunyi .bantuan-tg{bottom:28px}
  html[data-tema="hgi"] .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="hgi"] :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="hgi"] :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="hgi"] #view-topup>.topup-artikel{display:block}
  /* Kolom kanan: sisanya, digeser selebar kolom kiri + jaraknya. */
  html[data-tema="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] :is(#view-nota,#view-masuk){max-width:760px;margin-inline:auto}
  html[data-tema="hgi"] .page-head h1{font-size:34px}
  html[data-tema="hgi"] .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="hgi"] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[data-tema="hgi"] .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="hgi"] .prod .ic{grid-row:1/3;grid-column:1;width:44px;height:44px;margin:0}
  html[data-tema="hgi"] .prod.prod-image-native .ic img{width:44px;height:44px}
  html[data-tema="hgi"] .prod .n{grid-row:1;grid-column:2}
  html[data-tema="hgi"] .prod-price{grid-row:2;grid-column:2;margin:0;padding:0;gap:5px}
  html[data-tema="hgi"] .prod .p{grid-row:2;grid-column:2;margin:0;padding:0}
  html[data-tema="hgi"] .flash-products{grid-auto-columns:minmax(230px,1fr)}

  /* Halaman luar (blog, artikel, kebijakan) ikut kolom dan header yang sama. */
  html[data-tema="hgi"] .b-top{max-width:none;margin:0}
  html[data-tema="hgi"] .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="hgi"] .b-brand img:not(.b-wordmark){height:40px;width:40px}
  html[data-tema="hgi"] .b-brand img.b-wordmark{height:26px;width:auto;max-width:220px}
  html[data-tema="hgi"] .b-top .b-brand span{font-size:19px}
  /* Merek berhenti melar supaya segel duduk di sebelahnya, bukan di bawah nav. */
  html[data-tema="hgi"] .b-brand{flex:0 0 auto}
  html[data-tema="hgi"] .b-page{max-width:760px;padding-bottom:4rem}
  html[data-tema="hgi"] .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="hgi"] #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="hgi"] #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="hgi"] .hdr .pwa-pasang-hdr{justify-content:center;width:auto;aspect-ratio:1;padding:0}
  html[data-tema="hgi"] .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="hgi"] .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="hgi"] 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="hgi"] #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="hgi"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary[hidden]{display:none}
  html[data-tema="hgi"] body.ruang-total-kiri .wrap{padding-bottom:170px}
}

/* == HALAMAN LUAR: bilah merek blog & kebijakan ===================== */
html[data-tema="hgi"] .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="hgi"] .b-brand{justify-content:flex-start;gap:10px;color:var(--txt)}
html[data-tema="hgi"] .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="hgi"] .b-brand img:not(.b-wordmark){order:0;margin-left:0;border-radius:0;box-shadow:none}
html[data-tema="hgi"] .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="hgi"] .b-back{border:1px solid var(--h-line-2);border-radius:0;background:transparent;color:var(--h-putih)}
html[data-tema="hgi"] .b-back:hover{background:rgba(255,255,255,.08)}
html[data-tema="hgi"] :is(.b-card,.b-pager a){border-radius:0}
html[data-tema="hgi"] .b-body{border-radius:0;background:var(--h-siku),var(--h-g2)}
html[data-tema="hgi"] .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="hgi"] .b-body h2{padding-left:0;border-left:0;letter-spacing:.02em}
html[data-tema="hgi"] .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="hgi"] .b-body li::marker{color:var(--h-putih)}
html[data-tema="hgi"] .b-body blockquote{border-left:2px solid var(--h-putih);border-radius:0;background:rgba(255,255,255,.04)}
html[data-tema="hgi"] .b-more{font-family:var(--h-disp);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hgi"] .b-pager a{border-radius:0}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .k-halaman .card li::marker{color:var(--h-putih)}
html[data-tema="hgi"] .k-halaman .card b{color:var(--h-putih)}
html[data-tema="hgi"] .k-halaman .card a{color:var(--h-putih);text-decoration:underline;text-underline-offset:3px}
html[data-tema="hgi"] .k-halaman .account-menu{border:1px solid var(--h-line);border-radius:0;background:var(--h-panel)}
html[data-tema="hgi"] .k-kaki{border-top-color:var(--h-line)}
html[data-tema="hgi"] .k-kaki small{color:var(--t-subtle);font-family:var(--h-disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .idcek-toko{display:flex;align-items:center;justify-content:center;min-height:30px;margin:0 34px 6px}
html[data-tema="hgi"] .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="hgi"] .idcek-toko-nama[hidden]{display:none}
html[data-tema="hgi"] .idcek-wordmark{display:block;width:auto;height:28px;max-width:210px;margin:0;border-radius:0;object-fit:contain}
html[data-tema="hgi"] .idcek-wordmark[hidden]{display:none}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .idcek-hias{display:none}
html[data-tema="hgi"] .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="hgi"] .idcek-panel{gap:12px;padding:0;border-radius:0;background:var(--idk-panel);box-shadow:none}
html[data-tema="hgi"] .idcek-baris{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
html[data-tema="hgi"] .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="hgi"] .idcek-ikon svg{width:20px;height:20px}
html[data-tema="hgi"] .idcek-ikon-nama{color:var(--h-amber)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .idcek-nilai.panjang{font-size:16px;line-height:22px}
html[data-tema="hgi"] .idcek-nilai.sangat-panjang{font-size:14px;line-height:19px;letter-spacing:0}
html[data-tema="hgi"] .idcek-catatan{margin:14px 4px 0;color:var(--idk-catatan)}
html[data-tema="hgi"] .idcek-aksi{margin:14px 0 0}
html[data-tema="hgi"] .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="hgi"] .idcek-ubah{background:transparent;color:var(--h-putih);box-shadow:inset 0 0 0 1px var(--h-line-2)}
html[data-tema="hgi"] .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="hgi"][data-kartu="memanjang"] #products .prod{--k-harga:18px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .n{font-size:12.5px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 9px);right:auto;left:41px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active::after{top:calc(50% + 14px);right:auto;left:49px}
@media (min-width:1180px){
  html[data-tema="hgi"][data-kartu="memanjang"] #products.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:360px){
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-harga:15px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .n{font-size:11.5px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active::before{top:calc(50% + 7px);left:35px}
  html[data-tema="hgi"][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="hgi"] .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="hgi"] .notif-beli-ikon{border-radius:4px;box-shadow:0 0 0 1px var(--h-line-2)}
html[data-tema="hgi"] .notif-beli-teks b{color:var(--h-putih)}
html[data-tema="hgi"] .notif-beli-tutup{border-radius:4px}
html[data-tema="hgi"] .notif-beli-tutup:hover{background:rgba(255,255,255,.08);color:var(--h-putih)}
html[data-tema="hgi"] :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="hgi"]{--ul-emas:#f2b23a;--ul-kosong:rgba(214,226,255,.18)}
html[data-tema="hgi"] :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="hgi"] :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="hgi"] :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="hgi"] .ul-tanda{width:auto;height:auto;padding:4px 6px;border:1px solid var(--h-line-2);background:transparent}
html[data-tema="hgi"] .ul-tanda svg{width:11px;height:11px}
html[data-tema="hgi"] .ul-skor-angka b{font-size:46px;color:var(--h-putih)}
html[data-tema="hgi"] .ul-sebaran i{height:4px;border-radius:0;background:var(--h-line)}
html[data-tema="hgi"] .ul-sebaran i::before{border-radius:0}
html[data-tema="hgi"] .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="hgi"] .ul-puas b{color:var(--h-mint)}
html[data-tema="hgi"] .ul-puas::before{content:"";width:6px;height:6px;flex:0 0 6px;background:var(--h-mint);transform:rotate(45deg)}
html[data-tema="hgi"] .ul-tag-ringkas span{border:1px solid var(--h-line);background:var(--h-field);font-size:12px;color:var(--txt)}
html[data-tema="hgi"] .ul-item{border-color:var(--h-line);background:var(--h-panel);box-shadow:none}
html[data-tema="hgi"] .ul-geser .ul-item{background:var(--h-field)}
html[data-tema="hgi"] .ul-avatar{background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hgi"] .ul-nama small{color:var(--h-mint)}
html[data-tema="hgi"] .ul-produk{font-size:10px;color:var(--muted)}
html[data-tema="hgi"] .ul-item-tag span{border:1px solid var(--h-line);background:transparent}
html[data-tema="hgi"] .ul-balasan{border-left:2px solid var(--brand);border-radius:0;background:var(--h-biru-tipis)}
html[data-tema="hgi"] .ul-balasan b{color:var(--h-biru-teks)}
/* Kartu bintang di panel bayar: panel cekung bertepi emas tipis. */
html[data-tema="hgi"] .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="hgi"] .ul-ajak-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ul-emas)}
html[data-tema="hgi"] .ul-ajak-kicker::before{content:"";width:6px;height:6px;background:var(--ul-emas);transform:rotate(45deg)}
html[data-tema="hgi"] .ul-ajak b.ul-ajak-judul{font-size:16.5px;font-weight:700;color:var(--h-putih)}
html[data-tema="hgi"] .ul-pilih svg{stroke:color-mix(in srgb,var(--h-putih) 34%,transparent)}
html[data-tema="hgi"] .ul-pilih button.on svg{stroke:var(--ul-emas)}
html[data-tema="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .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="hgi"] .ul-ajak.terkirim b{font-size:12px;color:var(--h-putih)}
html[data-tema="hgi"] .ul-ajak.terkirim p{color:var(--txt)}
html[data-tema="hgi"] .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="hgi"] .ul-latar{background:var(--t-scrim)}
html[data-tema="hgi"] .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="hgi"] .ul-pegangan{border-radius:0;background:var(--h-line-2)}
html[data-tema="hgi"] .ul-lembar-kepala span{font-size:10.5px;color:var(--muted)}
html[data-tema="hgi"] .ul-produk-baris{border:1px solid var(--h-line);background:var(--h-field)}
html[data-tema="hgi"] :is(.ul-produk-baris img,.ul-produk-ikon){background:var(--h-g3)}
html[data-tema="hgi"] .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="hgi"] .ul-label-nilai{font-size:11.5px;color:var(--ul-emas)}
html[data-tema="hgi"] .ul-label-nilai.rendah{color:var(--h-rose)}
html[data-tema="hgi"] .ul-chips button{border-color:var(--h-line);background:transparent;color:var(--txt)}
html[data-tema="hgi"] .ul-chips button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hgi"] .ul-isian>span{font-size:10px;color:var(--muted)}
html[data-tema="hgi"] .ul-isian textarea{border-color:var(--h-line);background:var(--h-field);color:var(--txt)}
html[data-tema="hgi"] .ul-isian textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--h-biru-tipis)}
html[data-tema="hgi"] .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="hgi"] .ul-catatan-cs a{border-color:var(--h-line-2);background:transparent;color:var(--h-putih);font-size:11.5px}
html[data-tema="hgi"] .ul-kirim{min-height:50px;background:var(--brand);color:var(--brand-on,#fff);font-size:13px;letter-spacing:.2em}
html[data-tema="hgi"] .ul-kirim:disabled{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--h-line);opacity:1}
html[data-tema="hgi"] .ul-nanti{font-size:13px}
/* Lacak & nota: baris cekung seperti isi kartu lacak lainnya. */
html[data-tema="hgi"] .ul-lacak{border-color:var(--h-line);background:var(--h-field)}
html[data-tema="hgi"] .ul-lacak span{font-size:10px;color:var(--muted)}
html[data-tema="hgi"] .ul-status{font-size:9.5px;letter-spacing:.12em}
html[data-tema="hgi"] .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="hgi"] .ul-status.tinjau{border:1px solid color-mix(in srgb,var(--ul-emas) 40%,transparent);background:transparent;color:var(--ul-emas)}
html[data-tema="hgi"] .ul-status.sembunyi{border:1px solid var(--h-line);background:transparent;color:var(--muted)}
/* Halaman /ulasan. */
html[data-tema="hgi"] .ul-saring button{border-color:var(--h-line);background:var(--h-panel);color:var(--txt)}
html[data-tema="hgi"] .ul-saring button.on{border-color:var(--brand);background:var(--h-biru-tipis);color:var(--h-biru-teks)}
html[data-tema="hgi"] .ul-kabar{border-color:var(--h-line);background:var(--h-siku),var(--h-panel)}
html[data-tema="hgi"] .ul-kosong-daftar{border-color:var(--h-line);color:var(--muted)}
/* == /ULASAN TOKO ==================================================== */

/* == LAPISAN LOBI HGI ===============================================
   SUMBER lapisan tema hgi (eksklusif hgiofficial.com). Berkas tema yang
   sesungguhnya (web/site/tema/hgi.css) DIHASILKAN oleh
   scripts/bangun-tema-turunan.js: badan hud.css dengan awalan
   html[data-tema="hgi"], 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, bilah Total, nav bawah bertombol tengah,
   desktop 1120px dua kolom dengan nav naik ke kepala. KULIT = bahasa visual
   game Higgs Games Island (opsi G "Lobi HGI", Taka 9 Okt 2026), diambil dari
   tangkapan layar resmi Google Play: langit lobi ungu-magenta berkilau,
   jendela pop-up ungu berbingkai emas mengkilap, kartu mode bergradasi,
   huruf bulat tebal (Lilita One) bergaris ungu tua, tombol timbul berkilau
   dengan bibir bawah tebal, koin emas, pita kayu bergaris emas. Gambar,
   maskot, dan logo game TIDAK dipakai — hanya gayanya, semuanya CSS.

   Peran warna:
     warna merek domain = aksi & uang (Cek, Pilih Pembayaran, Bayar, tombol
       Masuk desktop). hgiofficial.com memakai hijau seperti tombol "WIN";
       gradien timbulnya diturunkan dari var(--brand), jadi tidak ada --brand
       di berkas ini;
     emas   = bingkai, pilihan aktif (tab, nominal, metode), koin langkah,
       poin, total;
     kuning = harga; putih/krem bergaris ungu tua = judul.

   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.
   Warna padat TIDAK boleh jadi lapisan latar non-terakhir (`#fff padding-box,
   … border-box` dibuang browser): bingkai emas memakai linear-gradient(c,c).
   Folder tema-sumber TIDAK disajikan express.static (hanya web/site). */
@font-face{font-family:"Nunito";font-style:normal;font-weight:500 900;font-display:swap;src:url('huruf/nunito-500-900.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:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url('huruf/lilita-one-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}

html[data-tema="hgi"]{
  /* Palet tema */
  --hg-u0:#1b0532;--hg-u1:#2e0a50;--hg-u2:#3d0e68;--hg-u3:#5b1f91;--hg-u4:#7c33b8;--hg-u5:#a84fda;
  --hg-teks:#ffffff;--hg-redup:#ead8f8;--hg-redup-2:#cdb2e8;
  --hg-tepi:#2a0748;
  --hg-emas:#ffd54a;--hg-harga:#ffe25c;--hg-krem:#fff6cf;--hg-coklat:#5a2a00;--hg-tepi-emas:#7a3f06;
  --hg-hijau-tx:#c4ffa6;--hg-rose:#ffb8c4;--hg-rose-bidang:linear-gradient(180deg,#e3506f,#b31f42);
  --hg-disp:"Lilita One","Nunito",system-ui,sans-serif;
  --hg-teks-f:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Emas mengkilap: bingkai jendela, bingkai tipis kartu, pil aktif, koin. */
  --hg-bingkai:linear-gradient(180deg,#fff6c2 0%,#ffd84f 26%,#eba21f 58%,#ffe58a 80%,#b9720f 100%);
  --hg-bingkai-tipis:linear-gradient(180deg,#fff1a6,#e9a321 55%,#ffe07a 80%,#c07a12);
  --hg-bingkai-aktif:linear-gradient(180deg,#fffbd6,#ffe14a 40%,#ff9f00);
  --hg-emas-bidang:linear-gradient(180deg,#fff19a 0%,#ffd23a 45%,#f39a12 100%);
  --hg-emas-bayang:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(160,80,0,.25),0 3px 0 #a85a06;
  --hg-koin:radial-gradient(circle at 34% 28%,#fffbe0 0 14%,#ffe066 34%,#f4b52a 64%,#c97c10 100%);
  --hg-koin-bayang:inset 0 0 0 2px rgba(255,248,200,.9),inset 0 -3px 0 rgba(150,80,0,.35),0 0 0 2px var(--hg-tepi-emas),0 3px 0 2px var(--hg-tepi-emas);
  /* Pita kayu bergaris emas (bilah Total, kepala halaman luar). */
  --hg-kayu:linear-gradient(180deg,#9a5528 0%,#7a3f1a 48%,#55290c 100%);
  --hg-kayu-garis:inset 0 3px 0 #ffd75a,inset 0 4px 0 #8a4b0c,inset 0 5px 0 rgba(255,255,255,.12);
  /* Jendela pop-up ungu: kilau atas, bibir bawah, bayangan jatuh. */
  --hg-panel:linear-gradient(180deg,#7c33b8 0%,#5b1f91 42%,#46166f 100%);
  --hg-panel-bayang:inset 0 2px 0 rgba(255,200,255,.38),inset 0 -3px 0 rgba(0,0,0,.14),0 5px 0 #250640,0 20px 30px -18px rgba(0,0,0,.6);
  --hg-kartu:linear-gradient(160deg,#9d44d2 0%,#7a2ab5 52%,#5c1d92 100%);
  --hg-kartu-aktif:linear-gradient(160deg,#a945d8 0%,#8a30c8 55%,#6a20a6 100%);
  --hg-kartu-tebal:#300752;
  /* Cekungan di dalam jendela (isian, daftar, kotak keterangan). */
  --hg-cekung:rgba(26,5,48,.42);
  --hg-cekung-bayang:inset 0 2px 5px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08);
  /* Kartu pilihan kecil (metode, saldo/poin, preset): ungu bergaris emas tipis. */
  --hg-pilihan:linear-gradient(180deg,#6d2aa5,#4f1a82);
  --hg-pilihan-aktif:linear-gradient(180deg,#9442cf,#6a23a6);
  --hg-kanvas:
    radial-gradient(1.6px 1.6px at 22% 28%,rgba(255,244,190,.9),transparent 70%) 0 0/170px 170px,
    radial-gradient(1.2px 1.2px at 72% 64%,rgba(255,255,255,.75),transparent 70%) 0 0/130px 130px,
    radial-gradient(2px 2px at 48% 82%,rgba(255,200,250,.6),transparent 70%) 0 0/230px 230px,
    radial-gradient(95% 420px at 50% -60px,rgba(255,110,214,.5),transparent 72%) no-repeat,
    radial-gradient(60% 50% at 100% 100%,rgba(110,60,255,.35),transparent 72%) no-repeat,
    linear-gradient(180deg,#5c1784 0%,#3d0e68 42%,#240840 100%);
  /* Aksi = warna merek domain, timbul seperti tombol "WIN": sorot atas, badan, bibir bawah. */
  --hg-a1:color-mix(in oklab,var(--brand) 62%,#fff);
  --hg-a3:color-mix(in oklab,var(--brand) 80%,#000);
  --hg-a-tepi:color-mix(in oklab,var(--brand) 48%,#000);
  --hg-aksi:linear-gradient(180deg,var(--hg-a1) 0%,var(--brand) 45%,var(--hg-a3) 100%);
  --hg-aksi-hover:linear-gradient(180deg,color-mix(in oklab,var(--brand) 50%,#fff) 0%,color-mix(in oklab,var(--brand) 88%,#fff) 45%,var(--brand) 100%);
  --hg-aksi-bayang:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.16),0 4px 0 var(--hg-a-tepi),0 10px 16px -8px rgba(0,0,0,.55);
  /* Tulisan putih bergaris 8 arah + bibir: putih di hijau terang cuma ±2:1, garis
     tua (putih : garis >7:1) yang membuatnya terbaca di warna merek apa pun. */
  --hg-aksi-garis:1.5px 0 0 var(--hg-a-tepi),-1.5px 0 0 var(--hg-a-tepi),0 1.5px 0 var(--hg-a-tepi),0 -1.5px 0 var(--hg-a-tepi),
    1px 1px 0 var(--hg-a-tepi),-1px 1px 0 var(--hg-a-tepi),1px -1px 0 var(--hg-a-tepi),-1px -1px 0 var(--hg-a-tepi),0 3px 0 var(--hg-a-tepi);
  --hg-judul-garis:2px 0 0 var(--hg-tepi),-2px 0 0 var(--hg-tepi),0 2px 0 var(--hg-tepi),0 -2px 0 var(--hg-tepi),1.5px 1.5px 0 var(--hg-tepi),-1.5px 1.5px 0 var(--hg-tepi),
    1.5px -1.5px 0 var(--hg-tepi),-1.5px -1.5px 0 var(--hg-tepi),0 4px 0 var(--hg-tepi);
  --hg-harga-garis:1.5px 0 0 #3a0a5e,-1.5px 0 0 #3a0a5e,0 1.5px 0 #3a0a5e,0 -1.5px 0 #3a0a5e,1px 1px 0 #3a0a5e,-1px 1px 0 #3a0a5e,1px -1px 0 #3a0a5e,-1px -1px 0 #3a0a5e,0 3px 0 #3a0a5e;
  --hg-total-garis:2px 0 0 #4a1f04,-2px 0 0 #4a1f04,0 2px 0 #4a1f04,0 -2px 0 #4a1f04,1.5px 1.5px 0 #4a1f04,-1.5px 1.5px 0 #4a1f04,1.5px -1.5px 0 #4a1f04,-1.5px -1.5px 0 #4a1f04,0 4px 0 #4a1f04;

  /* Token inti & HUD dipetakan ulang: kanvas ungu, panel ungu, teks putih. */
  --bg:#2e0a50;--card:#4f1a7e;--txt:#ffffff;--muted:#ead8f8;--line:rgba(255,213,74,.4);
  --gold:#ffd54a;--gold-d:#c98a00;
  --ok-bg:rgba(98,212,52,.2);--ok-tx:#c4ffa6;--err-bg:rgba(255,90,110,.22);--err-tx:#ffc0c8;
  --t-bg:#2e0a50;--t-frame:#1b0532;--t-surface:#4f1a7e;--t-field:#2a0948;--t-fill:#5b1f91;--t-line:rgba(255,213,74,.4);
  --t-text:#ffffff;--t-muted:#ead8f8;--t-subtle:#cdb2e8;
  --t-accent:var(--brand);--t-accent-d:var(--brand-d);--t-accent-text:#ffe25c;--t-accent-soft:rgba(255,213,74,.16);--t-accent-line:rgba(255,213,74,.45);--t-on-accent:var(--brand-on,#fff);
  --t-deep:#1b0532;--t-deep-2:#2e0a50;--t-on-deep:#fff;--t-on-deep-muted:rgba(255,235,252,.78);--t-scrim:rgba(18,3,34,.8);
  --t-ok:#62d434;--t-ok-d:#2ea51c;--t-ok-soft:rgba(98,212,52,.2);--t-ok-text:#c4ffa6;
  --t-err:#ff6b85;--t-err-d:#c22a4c;--t-err-soft:rgba(255,90,110,.22);--t-err-line:rgba(255,130,150,.5);--t-err-text:#ffc0c8;
  --t-warn-soft:rgba(255,213,74,.16);--t-warn-line:rgba(255,213,74,.45);--t-warn-text:#ffe08a;
  --t-gold:#ffd54a;--t-gold-d:#c98a00;--t-gold-soft:rgba(255,213,74,.18);--t-gold-text:#ffe08a;--t-on-gold:#3a2600;--t-promo:#ff4fa3;
  --t-font:var(--hg-teks-f);--t-font-display:var(--hg-disp);
  --t-on-bg:#fff6fb;--t-on-bg-muted:rgba(255,235,252,.86);--t-on-bg-link:#ffd54a;
  --h-disp:var(--hg-disp);
  --h-g0:#1b0532;--h-g1:#2e0a50;--h-g2:#3d0e68;--h-g3:#4f1a7e;
  --h-panel:#4f1a7e;--h-field:rgba(26,5,48,.45);
  --h-line:rgba(255,213,74,.22);--h-line-2:rgba(255,213,74,.42);
  --h-aksen:#ffd54a;
  --h-putih:#ffffff;
  --h-biru:#ffd54a;--h-biru-teks:#ffe08a;--h-biru-terang:#ffffff;
  --h-biru-tipis:rgba(255,213,74,.16);--h-biru-cincin:rgba(255,213,74,.55);
  --h-mint:#c4ffa6;--h-amber:#ffd54a;--h-rose:#ffb8c4;
  --h-siku:linear-gradient(transparent,transparent);
  --h-kanvas:var(--hg-kanvas);
}
html[data-tema="hgi"] body{color:var(--txt);background:var(--hg-kanvas);background-attachment:fixed;font-family:var(--hg-teks-f)}
html[data-tema="hgi"] :is(input,select,textarea){color:#fff;color-scheme:dark}
html[data-tema="hgi"] ::selection{background:rgba(255,213,74,.4);color:#fff}
/* Panggung lobi: sinar lampu tipis dari atas, di belakang isi. */
html[data-tema="hgi"] body::after{content:"";position:fixed;inset:0 0 auto;height:70vh;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from -90deg at 50% -6%,rgba(255,220,255,.07) 0 4deg,transparent 4deg 13deg);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}

/* Label kecil kapital: Nunito tebal, bukan Tomorrow berjarak lebar. */
html[data-tema="hgi"] :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(--hg-teks-f);font-weight:800}
/* Jarak huruf: daftar SAMA dengan "label kecil" badan HUD (0,3,2, memuat .tabs button dan
   .bnav a) supaya menang; nilainya lewat --hg-jarak yang disetel per komponen. */
html[data-tema="hgi"] :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:var(--hg-jarak,.05em)}
html[data-tema="hgi"] :is(.tabs button,.tabs a,.bnav a){--hg-jarak:.02em}
html[data-tema="hgi"] .summary-assurance{--hg-jarak:.02em;text-transform:none}

/* Sudut membulat ala jendela game. Badan HUD memaku sudut 4px lewat satu daftar
   ber-ID (#check-btn, .user-id-row #user-id-guide-btn → (1,2,1)); daftar yang SAMA
   di sini menang karena datang sesudahnya, dan nilainya diambil dari --hg-sudut.
   :where() memberi tiap anggota nilai bawaannya sendiri (kekhususan 0,1,1) supaya
   nilai milik panel induk tidak terwariskan ke tombol di dalamnya; aturan per
   komponen di bawahnya cukup kelas biasa. Untuk anggota daftar ini, ubah sudut
   lewat --hg-sudut, bukan border-radius. */
html[data-tema="hgi"] :where(.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){--hg-sudut:14px}
html[data-tema="hgi"] :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:var(--hg-sudut)}
/* Jendela besar 22px, kartu nominal 16px, tombol 16px, isian & kotak kecil 14px (bawaan). */
html[data-tema="hgi"] :is(.card,.account-menu,.player-pass,.checkin-card,.account-rank,.track-order-card,.seo-artikel,.cs-card,
  .paycard,.tg-miniapp-install-card,.b-body){--hg-sudut:22px}
html[data-tema="hgi"] :is(.b-card,.b-pager a){--hg-sudut:20px}
html[data-tema="hgi"] :is(.prod,.order-ticket,.btn-full,.nota-btn,.seo-toggle,.wallet-topup-submit,.wallet-pass-btn,.bulk-confirm-yes,
  .event-popup-cta,.profile-save,.tg-miniapp-install-confirm,.player-avatar,.wallet-pass-mark,.checkin-card button,
  .track-ticket button,.order-ticket-actions button,.pay-invoice,.checkout-benefits,.bantuan-tg){--hg-sudut:16px}
html[data-tema="hgi"] :is(#check-btn,#track-go,#buy-btn,#bulk-preview-btn){--hg-sudut:16px}
html[data-tema="hgi"] .pay-invoice{--hg-sudut:18px}
html[data-tema="hgi"] .summary{--hg-sudut:22px 22px 0 0}
html[data-tema="hgi"] :is(.buyer,.tier-chip,.entry-status,.seo-route span,.flash-ticket,.wallet-topup-steps span){--hg-sudut:999px}
html[data-tema="hgi"] :is(.card h2 .num,.user-id-row #user-id-guide-btn,.bantuan-avatar,.close,#event-popup-close,.pay-step-dot,
  .track-status-icon,.pay-state-symbol,.spender-avatar,.event-nav){--hg-sudut:50%}
html[data-tema="hgi"] :is(.paym-ic,.mutation-sign){--hg-sudut:8px}
html[data-tema="hgi"] .promo-badge{--hg-sudut:0 0 8px 8px}

/* Judul, nama, dan menu: Lilita One seperti tulisan di game. 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. Nama nominal (.prod .n) TIDAK ikut: label kapital
   kecil lebih terbaca dalam Nunito tebal, seperti label kartu mode di game. */
html[data-tema="hgi"] :is(.card h2,.page-head h1,.pay-page h3,.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(--hg-disp);font-style:normal;font-weight:400;letter-spacing:.01em;text-transform:none}

/* ── Kepala: ungu lobi bergaris emas di bawah ─────────────────────── */
html[data-tema="hgi"] .hdr{color:#fff;border-bottom:0;background:linear-gradient(180deg,#4b1574,#2f0a4e);
  box-shadow:inset 0 -3px 0 #ffd54a,inset 0 -4px 0 #8a4b0c,0 10px 20px -12px rgba(0,0,0,.7)}
/* Nama toko: krem bergaris ungu tua seperti logo game. */
html[data-tema="hgi"] #brand-name{color:var(--hg-krem);font:400 23px/1.1 var(--hg-disp);letter-spacing:.01em;text-transform:none;
  text-shadow:1.5px 0 0 var(--hg-tepi),-1.5px 0 0 var(--hg-tepi),0 1.5px 0 var(--hg-tepi),0 -1.5px 0 var(--hg-tepi),0 3px 0 var(--hg-tepi)}
/* Logo berbingkai emas tebal seperti bingkai avatar game. */
html[data-tema="hgi"] .brand img#brand-logo{border-radius:10px;box-shadow:0 0 0 2px #ffd84f,0 0 0 4px var(--hg-tepi-emas),0 3px 0 3px var(--hg-tepi-emas)}
/* Logo nama (bila diunggah) tampil APA ADANYA, warna asli gambarnya (Taka 17 Okt 2026:
   logo HGI OFFICIAL putih + lencana biru ✓ berubah jadi siluet putih polos). Mask &
   rantai filter badan HUD dibatalkan di kepala, bilah blog, kaki, dan pop-up Cek ID;
   tema HUD lain tetap mewarnai logo nama dengan warna merek. */
html[data-tema="hgi"] .brand img#brand-wordmark{filter:none}
html[data-tema="hgi"] :is(.brand img#brand-wordmark,.b-brand img.b-wordmark,.ident-wordmark)[style*="--logo-nama"]{
  filter:none;object-position:left center;background:none;-webkit-mask:none;mask:none}
html[data-tema="hgi"] .hdr-back{border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-tema="hgi"] .hdr-back:hover{background:rgba(255,255,255,.2)}
/* Tombol pasang aplikasi di kepala = pil emas mengkilap. */
html[data-tema="hgi"] .pwa-pasang-hdr{height:34px;padding:0 12px;border:0;border-radius:12px;background:var(--hg-emas-bidang);color:var(--hg-coklat);
  box-shadow:var(--hg-emas-bayang);font:400 13px/1 var(--hg-disp);letter-spacing:.02em;text-transform:none;text-shadow:0 1px 0 rgba(255,255,255,.55)}
html[data-tema="hgi"] .pwa-pasang-hdr:hover{filter:brightness(1.05)}

/* ── Hero (bila domain menyalakannya): gambar + kabut ungu, bingkai emas ─ */
html[data-tema="hgi"] .hero:not(.hero-mati){color:#fff;border:3px solid transparent;border-radius:22px;
  background:linear-gradient(90deg,rgba(46,10,80,.95) 0%,rgba(46,10,80,.8) 42%,rgba(46,10,80,.15) 74%,rgba(46,10,80,0) 100%) padding-box,
    linear-gradient(0deg,rgba(27,5,50,.85),transparent 48%) padding-box,
    var(--hero-gambar,url('/assets/tokohiggs-hero-resmi-mitra-bergaransi.webp')) center/cover padding-box,
    var(--hg-bingkai) border-box!important;
  box-shadow:0 5px 0 #250640,0 20px 30px -18px rgba(0,0,0,.6)}
html[data-tema="hgi"] .hero .badge{border:0;border-radius:999px;padding:5px 11px 6px;background:var(--hg-emas-bidang);color:var(--hg-coklat);
  box-shadow:var(--hg-emas-bayang);font:400 12px/1 var(--hg-disp);letter-spacing:.03em;text-transform:none}
html[data-tema="hgi"] .hero h1{color:var(--hg-krem);font:400 36px/1.02 var(--hg-disp);letter-spacing:.005em;text-transform:none;text-shadow:var(--hg-judul-garis)}
html[data-tema="hgi"] .hero .h1-kw{color:#f3e4ff;font:700 15px/1.3 var(--hg-teks-f);letter-spacing:.01em;text-transform:none;text-shadow:none}
html[data-tema="hgi"] .hero p{color:rgba(255,240,255,.9)}
html[data-tema="hgi"] .hero-trust span{gap:6px;border:0;border-radius:999px;background:rgba(27,5,50,.78);box-shadow:inset 0 0 0 1px rgba(255,213,74,.45);
  color:#fff;font:800 12px/1.1 var(--hg-teks-f);letter-spacing:.02em;text-transform:none}
html[data-tema="hgi"] .hero-trust b{width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--hg-koin);color:var(--hg-coklat);
  font:900 9px/14px var(--hg-teks-f);text-align:center;transform:none}

/* ── Banner event ───────────────────────────────────────────────────── */
html[data-tema="hgi"] .event-slider{border:3px solid transparent;border-radius:20px;background:linear-gradient(var(--hg-u0),var(--hg-u0)) padding-box,var(--hg-bingkai) border-box;
  box-shadow:0 5px 0 #250640}
html[data-tema="hgi"] .event-nav{border-radius:50%;background:rgba(27,5,50,.8);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,213,74,.6)}
html[data-tema="hgi"] .event-dots button{border-radius:999px;background:linear-gradient(rgba(255,235,252,.4),rgba(255,235,252,.4)) center/100% 4px no-repeat}
html[data-tema="hgi"] .event-dots button.is-on{background:linear-gradient(var(--hg-emas),var(--hg-emas)) center/100% 4px no-repeat}
html[data-tema="hgi"] .event-dots button:focus-visible{outline-color:var(--hg-emas)}

/* ── Panel: jendela pop-up ungu berbingkai emas ─────────────────────── */
html[data-tema="hgi"] :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:3px solid transparent;border-radius:22px;clip-path:none;color:var(--txt);
  background:var(--hg-panel) padding-box,var(--hg-bingkai) border-box;box-shadow:var(--hg-panel-bayang)}
html[data-tema="hgi"] .card{margin-bottom:16px;padding:16px 14px 16px}

/* ── Judul kartu: Lilita krem bergaris ungu tua + koin langkah ──────── */
/* :is() ber-ID: badan HUD memaku warna judul lewat :is(…,#sum-price,…) (1,1,1). */
html[data-tema="hgi"] :is(#sum-price,.card h2,.player-identity strong,.track-status-head strong,.seo-artikel h2,.pay-page h3){color:var(--hg-krem)}
html[data-tema="hgi"] .card h2{gap:10px;margin:0 0 16px;font:400 22px/1.1 var(--hg-disp);letter-spacing:.01em;text-transform:none;text-shadow:var(--hg-judul-garis)}
/* Nomor langkah: koin emas bertepi cokelat. */
html[data-tema="hgi"] .card h2 .num{display:inline-grid;place-items:center;width:34px;min-width:34px;height:34px;flex:0 0 34px;padding:0;border:0;border-radius:50%;
  background:var(--hg-koin);box-shadow:var(--hg-koin-bayang);font:400 17px/1 var(--hg-disp);letter-spacing:0;text-shadow:0 1px 0 rgba(255,255,255,.6);transform:none}
html[data-tema="hgi"] .card h2 .num::before{content:none}
html[data-tema="hgi"] .user-id-head{position:relative}
html[data-tema="hgi"] .user-id-head h2{flex:1 1 auto;margin:0}

/* ── Isian: cekungan ungu tua bertepi tebal ─────────────────────────── */
/* :is() ber-ID: daftar sudut 4px di badan HUD (1,1,1) memuat input. */
html[data-tema="hgi"] :is(input,textarea,select,#contact-email){border:2px solid #a76ae2;border-radius:14px;background:#2a0948;color:#fff;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.22)}
html[data-tema="hgi"] :is(input,textarea)::placeholder{color:#c9a8e8;opacity:1}
html[data-tema="hgi"] :is(input,textarea,select,#contact-email):focus{border-color:var(--hg-emas);background:#2a0948;box-shadow:inset 0 3px 0 rgba(0,0,0,.22),0 0 0 3px rgba(255,213,74,.3)}
html[data-tema="hgi"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount){font-family:var(--hg-teks-f);font-weight:800;letter-spacing:.03em}
html[data-tema="hgi"] :is(#game-id,#track-input,#login-code,#wallet-topup-amount)::placeholder{font-family:var(--hg-teks-f);font-weight:600;letter-spacing:0}
html[data-tema="hgi"] .user-id-row{gap:8px;align-items:stretch}
html[data-tema="hgi"] .user-id-row #game-id{height:52px;font-size:18px;line-height:1}
html[data-tema="hgi"] #track-input{height:52px;font-size:17px}
html[data-tema="hgi"] #contact-email{height:50px;padding-left:14px;font:700 15px/1 var(--hg-teks-f)}
/* Tombol panduan User ID: koin emas "?" (gambar panduan domain diganti tanda tanya). */
html[data-tema="hgi"] .user-id-row #user-id-guide-btn{width:46px;min-width:46px;height:46px;flex-basis:46px;align-self:center;border:0;border-radius:50%;
  background:var(--hg-koin);box-shadow:var(--hg-koin-bayang)}
html[data-tema="hgi"] .user-id-row #user-id-guide-btn:is(:hover,:focus-visible){border:0;background:var(--hg-koin);box-shadow:var(--hg-koin-bayang),0 0 0 5px rgba(255,213,74,.35)}
html[data-tema="hgi"] .user-id-row #user-id-guide-btn img{display:none}
html[data-tema="hgi"] .user-id-row #user-id-guide-btn::before{content:"?";color:var(--hg-coklat);font:400 24px/1 var(--hg-disp);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-tema="hgi"] .user-id-copy{color:var(--hg-redup);font-size:13px;line-height:1.55}
html[data-tema="hgi"] .buyer{min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:rgba(98,212,52,.2);
  box-shadow:inset 0 0 0 1.5px rgba(150,240,110,.5);color:var(--hg-hijau-tx);font:800 15px/1.25 var(--hg-teks-f);letter-spacing:.01em}
html[data-tema="hgi"] .buyer.err{background:rgba(255,90,110,.22);box-shadow:inset 0 0 0 1.5px rgba(255,140,160,.5);color:var(--hg-rose)}
html[data-tema="hgi"] .id-mode{padding:4px;border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .id-mode button{border-radius:10px;color:rgba(255,240,255,.82);font:800 12px/1 var(--hg-teks-f);letter-spacing:.03em}

/* ── Tombol aksi & uang: timbul berkilau warna merek, tulisan Lilita bergaris ── */
/* 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="hgi"] 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:16px;background:var(--hg-aksi);color:#fff;box-shadow:var(--hg-aksi-bayang);
  font-family:var(--hg-disp);font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] 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(--hg-aksi-hover)}
html[data-tema="hgi"] 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,.5),0 2px 0 var(--hg-a-tepi)}
html[data-tema="hgi"] 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:16px;background:linear-gradient(180deg,#6a3d8f,#4f2a70);color:#d9c4ee;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 3px 0 #2c0d48;
  opacity:1;font-family:var(--hg-disp);font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;text-shadow:0 1.5px 0 rgba(30,5,50,.6)}
/* Tombol aksi kecil (badan HUD 10,5-12px): tulisan bergaris butuh huruf cukup besar
   supaya garis tepinya tidak memakan isi huruf. */
html[data-tema="hgi"] 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="hgi"] :is(#check-btn,#track-go){height:52px;min-width:76px;padding:0 18px;font-size:19px;line-height:1}
html[data-tema="hgi"] #bulk-preview-btn{min-height:46px;font-size:16px}
html[data-tema="hgi"] 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:3px solid var(--hg-emas);outline-offset:3px}
/* Tombol sekunder: ungu muda bergaris emas tipis. */
html[data-tema="hgi"] :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:2px solid transparent;border-radius:14px;background:var(--hg-pilihan) padding-box,var(--hg-bingkai-tipis) border-box;color:#fff;
  box-shadow:0 3px 0 var(--hg-kartu-tebal);font-family:var(--hg-disp);font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;
  text-shadow:0 1.5px 0 var(--hg-tepi)}
html[data-tema="hgi"] :is(.btn-full.btn-outline,.nota-btn-sekunder,.page-back):hover{background:var(--hg-pilihan-aktif) padding-box,var(--hg-bingkai-tipis) border-box}
html[data-tema="hgi"] :is(.btn-full,.nota-btn){padding:15px 14px;font-size:18px;line-height:1.1}
html[data-tema="hgi"] .bulk-hist.is-active{color:var(--hg-coklat);background:var(--hg-emas-bidang);box-shadow:var(--hg-emas-bayang);text-shadow:none}

/* ── Tab kategori: jalur cekung, tab aktif = pil emas mengkilap ─────── */
html[data-tema="hgi"] .tabs{gap:4px;margin:0 0 16px;padding:5px;border:0;border-radius:18px;background:rgba(22,4,42,.55);clip-path:none;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.06)}
html[data-tema="hgi"] .tabs button,html[data-tema="hgi"] .tabs a{padding:11px 12px;border:0;border-radius:14px;background:transparent;color:#efdffb;
  clip-path:none;font:400 15.5px/1 var(--hg-disp);letter-spacing:.02em;text-transform:none;box-shadow:none}
html[data-tema="hgi"] :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="hgi"] :is(#cats,#id-mode) :is(button.active,a.active,button.is-on){border-color:transparent;background:var(--hg-emas-bidang);color:var(--hg-coklat);
  text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:var(--hg-emas-bayang)}

/* ── Kartu nominal = kartu mode game ────────────────────────────────── */
html[data-tema="hgi"] .grid{gap:10px}
html[data-tema="hgi"] .prod{grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:6px;min-height:92px;padding:11px 11px 12px;
  border:2px solid transparent;border-radius:16px;clip-path:none;color:#fff;
  background:var(--hg-kartu) padding-box,var(--hg-bingkai-tipis) border-box;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 var(--hg-kartu-tebal),0 8px 14px -8px rgba(0,0,0,.5)}
html[data-tema="hgi"] .prod:hover{border-color:transparent;filter:brightness(1.06)}
html[data-tema="hgi"] .prod .ic{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.18);box-shadow:0 0 0 2px #ffe27a,0 2px 0 2px rgba(60,20,0,.35)}
html[data-tema="hgi"] .prod.prod-image-native .ic{background:transparent;box-shadow:0 0 0 2px #ffe27a,0 2px 0 2px rgba(60,20,0,.35)}
html[data-tema="hgi"] .prod.prod-image-native .ic img{width:44px;height:44px;border-radius:12px}
html[data-tema="hgi"] .prod .n{color:#fff;font:800 13px/1.2 var(--hg-teks-f);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere;
  text-shadow:0 1.5px 0 #3a0a60,0 0 6px rgba(40,0,70,.45)}
html[data-tema="hgi"] .prod .n small{color:var(--hg-redup);font:700 11px/1.3 var(--hg-teks-f);text-transform:none;text-shadow:none}
/* Harga kuning bergaris ungu tua. #products/#flash-products: badan HUD memaku warna &
   pendar harga lewat :is(#sum-price,.prod-price strong,…) (1,1,1). */
html[data-tema="hgi"] .prod-price{gap:5px}
/* Ukuran harga dari LEBAR KOLOM HARGA kartu, bukan lebar layar: Lilita bergaris lebar,
   dan dengan vw harga jutaan meluber di ponsel, tablet, dan grid tiga kolom desktop
   (Taka 12 Okt 2026). Kolom harga jadi container. Dasar (rak Flash Sale, kartu SSR .p
   sebelum app.js): "Rp 3.000.000" ≈ 6,3x ukuran huruf + garis ±3px, dibatasi 13-20px.
   Di susunan memanjang .prod-price display:contents (bukan container) dan harganya
   berukuran sendiri. Ukuran vw lebih dulu = cadangan browser tanpa cqi (iOS < 16):
   tanpa itu seluruh deklarasi font gugur dan huruf Lilita ikut hilang. */
html[data-tema="hgi"] :is(#products,#flash-products) .prod-price{container-type:inline-size}
html[data-tema="hgi"] :is(#products,#flash-products) :is(.prod-price strong,.prod .p){color:var(--hg-harga);font:400 clamp(13px,4.2vw,18px)/1 var(--hg-disp);
  font-size:clamp(13px,calc((100cqi - 4px) / 6.4),20px);letter-spacing:.01em;text-shadow:var(--hg-harga-garis);white-space:nowrap}
/* Grid nominal: harga TETAP di samping ikon (harga di bawah gambar ditolak Taka). Per
   kartu (Taka 12 Okt 2026): "Rp" sebaris bila harga utuh muat >= 16px di kolomnya; bila
   tidak, "Rp" kecil naik ke atas angka dan angkanya sebesar mungkin (maks. 20px). Jumlah
   digit dari app.js (data-digit). Faktor = lebar terlebar dibagi ukuran huruf, terukur:
   --kp harga utuh ("Rp 3.000.000" 6,27; "Rp 455.000" 5,23), --k angka saja ("3.000.000"
   4,91; "455.000" 3,86). Ambang @container = 16 x --kp + 4px garis. */
html[data-tema="hgi"] #products .prod-price[data-digit]{--k:5.5;--kp:6.85}
html[data-tema="hgi"] #products .prod-price:is([data-digit="1"],[data-digit="2"],[data-digit="3"]){--k:1.8;--kp:3.3}
html[data-tema="hgi"] #products .prod-price[data-digit="4"]{--k:2.6;--kp:3.95}
html[data-tema="hgi"] #products .prod-price[data-digit="5"]{--k:3.35;--kp:4.8}
html[data-tema="hgi"] #products .prod-price[data-digit="6"]{--k:4;--kp:5.4}
html[data-tema="hgi"] #products .prod-price[data-digit="7"]{--k:4.95;--kp:6.35}
html[data-tema="hgi"] #products .prod-price[data-digit] strong{font-size:clamp(11px,calc((100cqi - 4px) / var(--k)),20px)}
html[data-tema="hgi"] #products .prod-price strong .rp{display:block;margin:0 0 2px;font-size:max(9px,.58em);line-height:1;letter-spacing:.05em}
@container (min-width:57px){
  html[data-tema="hgi"] #products .prod-price:is([data-digit="1"],[data-digit="2"],[data-digit="3"]) strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price:is([data-digit="1"],[data-digit="2"],[data-digit="3"]) strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
@container (min-width:68px){
  html[data-tema="hgi"] #products .prod-price[data-digit="4"] strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price[data-digit="4"] strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
@container (min-width:81px){
  html[data-tema="hgi"] #products .prod-price[data-digit="5"] strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price[data-digit="5"] strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
@container (min-width:91px){
  html[data-tema="hgi"] #products .prod-price[data-digit="6"] strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price[data-digit="6"] strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
@container (min-width:106px){
  html[data-tema="hgi"] #products .prod-price[data-digit="7"] strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price[data-digit="7"] strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
@container (min-width:114px){
  html[data-tema="hgi"] #products .prod-price[data-digit="8"] strong{font-size:clamp(16px,calc((100cqi - 4px) / var(--kp)),20px)}
  html[data-tema="hgi"] #products .prod-price[data-digit="8"] strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
}
html[data-tema="hgi"] .prod-price del{color:var(--hg-redup-2);font:700 12px/1 var(--hg-teks-f)}
html[data-tema="hgi"] .prod-points{padding:3px 8px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff3a8,#ffcf3a);color:var(--hg-coklat);
  box-shadow:0 1.5px 0 #b86a08;font:900 10.5px/1 var(--hg-teks-f);letter-spacing:.01em}
html[data-tema="hgi"] .prod-diskon{border:0;border-radius:999px;background:var(--hg-u2);color:#fff;font:900 11px/1 var(--hg-teks-f)}
html[data-tema="hgi"] .prod-diskon.prod-diskon-promo{background:var(--t-promo);color:#fff}
html[data-tema="hgi"] .promo-badge{top:-2px;right:12px;padding:3px 9px 4px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#ff7ab8,#ff2e7e);color:#fff;
  font:400 11.5px/1 var(--hg-disp);letter-spacing:.03em;box-shadow:0 2px 0 #b1135a}
/* Terpilih: bingkai emas tebal bercahaya + lencana centang hijau. */
html[data-tema="hgi"] :is(#products,#flash-products) .prod.active{border-color:transparent;color:#fff;
  background:var(--hg-kartu-aktif) padding-box,var(--hg-bingkai-aktif) border-box;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 2px #fff1a0,0 0 20px 2px rgba(255,210,60,.65),0 3px 0 var(--hg-kartu-tebal)}
html[data-tema="hgi"] .prod.active .n{padding-right:24px;color:#fff}
html[data-tema="hgi"] .prod.active::before{top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#9df25a,#2fae1f);transform:none;
  box-shadow:0 0 0 2px #fff,0 2px 0 2px #1b6b0e}
html[data-tema="hgi"] .prod.active::after{top:13px;right:16px;border-color:#fff}
html[data-tema="hgi"] .promo-copy b{color:#ffb3d9}
html[data-tema="hgi"] .promo-copy small{color:var(--hg-redup)}
html[data-tema="hgi"] .flash-sale{border:0;border-radius:16px;background:linear-gradient(180deg,rgba(255,61,139,.24),rgba(255,61,139,.08));box-shadow:inset 0 0 0 2px rgba(255,140,190,.55)}
html[data-tema="hgi"] .flash-ticket{border-radius:999px;background:linear-gradient(180deg,#ff7ab8,#ff2e7e);color:#fff;font:400 12px/1 var(--hg-disp);letter-spacing:.04em}
html[data-tema="hgi"] .flash-sale-head h3{color:#fff;font:400 19px/1.1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .flash-sale-head p{color:rgba(255,240,255,.8)}
html[data-tema="hgi"] .catalog-empty{color:rgba(255,240,255,.84)}

/* ── Susunan MEMANJANG (pilihan domain di Susunan kartu) ────────────── */
/* Bawaan tema kotak seperti HUD; bila domain memilih "Memanjang", server
   memasang data-kartu="memanjang" dan kerangka style.css + blok memanjang
   HUD aktif. Di sini hanya kulitnya: kantong ikon kiri, nama besar, harga
   kuning besar di kanan. Lajur nama tidak boleh lebih sempit dari isinya yang
   tak terpecah (pil poin): kerangka membiarkannya menyusut ke 0, dan baris coret
   + "Promo -N%" Lilita yang lebar mendorong lajur harga ke 48% sampai teks poin
   keluar dari pilnya. Baris coret yang tak muat pindah baris di lajurnya sendiri. */
html[data-tema="hgi"][data-kartu="memanjang"] #products.grid{gap:10px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-ikon:56px;min-height:86px;column-gap:14px;padding:10px 14px 10px 10px;
  grid-template-columns:var(--k-ikon) minmax(min-content,1fr) fit-content(48%)}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .ic{border-radius:14px;overflow:hidden}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .ic img{object-fit:cover;border-radius:14px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .n{font-size:clamp(14px,4.2vw,17px);line-height:1.1}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active .n{padding-right:0}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .prod-price>strong{font-size:clamp(18px,5.4vw,22px)}
/* Harga di lajur kanan sebaris: "Rp" kembali seukuran angka. */
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .prod-price>strong .rp{display:inline;margin:0;font-size:inherit;letter-spacing:inherit}
/* Centang terpilih di sudut kantong ikon: pojok kanan atas milik harga. */
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active::before{top:6px;right:auto;left:6px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .prod.active::after{top:11px;right:auto;left:14px}
html[data-tema="hgi"][data-kartu="memanjang"] #products .promo-badge{top:-2px;right:14px}
/* Ponsel < 390px: ikon 56px + pil poin + "Rp 3.000.000" tidak muat sebaris. */
@media (max-width:389px){
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-ikon:48px;column-gap:12px}
}
/* Desktop lebar (>=1180px): daftar dua lajur (badan HUD), kartu cuma ±290px. Ukuran ponsel
   (ikon 56px, harga 22px) membuat harga jutaan memeras lajur nama sampai pil poin meluber.
   Di 900-1179px daftarnya satu lajur; ukuran di blok DESKTOP di bawah sudah cukup. */
@media (min-width:1180px){
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-ikon:44px;column-gap:10px;padding:10px 12px 10px 10px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .n{font-size:14.5px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .prod-price>strong{font-size:18px}
}

/* ── Email & langkah bayar ──────────────────────────────────────────── */
html[data-tema="hgi"] .email-help{margin-top:10px;padding:10px 12px;border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang);
  color:var(--hg-redup);font-size:12.5px;line-height:1.55}
html[data-tema="hgi"] .email-help::before{border:0;border-radius:50%;background:var(--hg-koin);color:var(--hg-coklat);font-family:var(--hg-disp);font-weight:400}
html[data-tema="hgi"] .email-help[data-kind="error"]{background:rgba(255,90,110,.22);color:var(--hg-rose)}
html[data-tema="hgi"] .email-help[data-kind="error"]::before{background:var(--hg-rose-bidang);color:#fff}
html[data-tema="hgi"] .checkout-benefits{padding:12px;border:0;border-radius:16px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] :is(.checkout-benefits-head,.external-pay-head)>span{color:#fff;font:400 15px/1 var(--hg-disp);letter-spacing:.03em;text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] :is(.checkout-benefits-head,.external-pay-head) small{color:var(--hg-redup)}
html[data-tema="hgi"] .external-pay-head{border-top:1px solid rgba(255,213,74,.3)}
html[data-tema="hgi"] :is(.benefit-card,.paym,.wallet-topup-methods button,.wallet-topup-presets button){border:2px solid transparent;border-radius:14px;color:#fff;
  background:var(--hg-pilihan) padding-box,var(--hg-bingkai-tipis) border-box;box-shadow:0 3px 0 var(--hg-kartu-tebal)}
html[data-tema="hgi"] :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="hgi"] :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-color:transparent;color:#fff;background:var(--hg-pilihan-aktif) padding-box,var(--hg-bingkai-aktif) border-box;
  box-shadow:0 0 0 2px #fff1a0,0 0 16px rgba(255,210,60,.6),0 3px 0 var(--hg-kartu-tebal)}
html[data-tema="hgi"] .benefit-card.locked{background:linear-gradient(rgba(60,20,100,.6),rgba(60,20,100,.6)) padding-box,var(--hg-bingkai-tipis) border-box;color:var(--hg-redup)}
html[data-tema="hgi"] .benefit-card b{color:#fff;font:400 15px/1.1 var(--hg-disp);letter-spacing:.02em;text-transform:none}
html[data-tema="hgi"] .benefit-card strong{color:var(--hg-harga);font:400 17px/1.1 var(--hg-disp)}
html[data-tema="hgi"] .benefit-card.locked strong{color:var(--hg-redup)}
html[data-tema="hgi"] .benefit-card small{color:var(--hg-redup)}
html[data-tema="hgi"] .benefit-icon{border:0;border-radius:12px;background:var(--hg-emas-bidang);color:var(--hg-coklat);font:400 13px/1 var(--hg-disp)}
html[data-tema="hgi"] .benefit-icon.wallet{background:var(--hg-aksi);text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .benefit-icon.points{background:var(--hg-koin);color:var(--hg-coklat)}
html[data-tema="hgi"] .benefit-note{color:var(--hg-redup)}
/* Tinta ikon & avatar. Badan HUD mewarnai semuanya lewat :is(…,.card h2 .num) (0,3,2).
   Daftar yang SAMA di sini menyerahkan warnanya ke --hg-ikon-tx (bawaan putih), yang
   boleh disetel per ikon tanpa harus menandingi kekhususan itu lagi. */
html[data-tema="hgi"] :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(--hg-ikon-tx,#fff)}
/* Bidang emas/koin bertinta cokelat; ikon dompet (bidang warna merek) tetap putih. */
html[data-tema="hgi"] :is(.checkin-mark,.spender-trophy,.benefit-icon:not(.wallet)){--hg-ikon-tx:var(--hg-coklat)}
html[data-tema="hgi"] .card h2 .num{--hg-ikon-tx:var(--hg-coklat)}
html[data-tema="hgi"] :is(.bulk-done-mark,.mutation-sign.pos){--hg-ikon-tx:var(--hg-hijau-tx)}
html[data-tema="hgi"] .mutation-sign.neg{--hg-ikon-tx:var(--hg-rose)}
html[data-tema="hgi"] .tg-miniapp-install-mark{border:0;border-radius:14px;background:var(--hg-kartu)}
html[data-tema="hgi"] .paym-ic{border-radius:8px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.2)}
html[data-tema="hgi"] .paym-n{color:#fff;font:700 13.5px/1.25 var(--hg-teks-f)}
html[data-tema="hgi"] :is(.paym-p,.paym.active .paym-p){color:var(--hg-harga);font:400 18px/1 var(--hg-disp);letter-spacing:.01em;text-shadow:0 2px 0 #3a0a5e}
html[data-tema="hgi"] .paym.is-unavailable{opacity:.6}
html[data-tema="hgi"] .paym-internal{background:linear-gradient(180deg,#2f7a2a,#1f5a1c) padding-box,var(--hg-bingkai-tipis) border-box}
html[data-tema="hgi"] .paym-internal .paym-ic{border:0;background:rgba(255,255,255,.18);color:var(--hg-hijau-tx)}
html[data-tema="hgi"] #pay-note{color:var(--hg-redup)}

/* ── Bilah Total: pita kayu bergaris emas, total kuning bergaris cokelat ── */
/* #summary (ID): sudut 4px badan HUD datang dari daftar :is() ber-ID (1,1,1). */
html[data-tema="hgi"] #summary{padding:10px 10px 10px 16px;border:0;color:#fff;
  background:var(--hg-kayu);box-shadow:var(--hg-kayu-garis),0 -10px 24px -10px rgba(0,0,0,.5)}
html[data-tema="hgi"] .summary-assurance{border-bottom:1px solid rgba(255,215,90,.3);color:#ffe58a;font:800 12px/1.1 var(--hg-teks-f);letter-spacing:.03em}
html[data-tema="hgi"] .summary>div::before{color:rgba(255,240,215,.84);font:800 12px/1.2 var(--hg-teks-f);letter-spacing:.03em;text-transform:none}
html[data-tema="hgi"] .summary>div:has(#sum-product:not(:empty)) #sum-product{color:rgba(255,240,215,.86);font:800 12.5px/1.2 var(--hg-teks-f);letter-spacing:.02em;text-transform:uppercase}
html[data-tema="hgi"] #sum-price{color:var(--hg-harga);font:400 28px/1 var(--hg-disp);letter-spacing:.01em;text-shadow:var(--hg-total-garis)}
html[data-tema="hgi"] #buy-btn{min-height:50px;padding:6px 18px;font-size:17px;line-height:1.05;white-space:normal}

/* ── Tombol CS melayang ─────────────────────────────────────────────── */
html[data-tema="hgi"] .bantuan-tg{border:2px solid transparent;border-radius:18px;color:#fff;
  background:linear-gradient(180deg,#5b1f91,#3d0e68) padding-box,var(--hg-bingkai-tipis) border-box;box-shadow:0 4px 0 #250640,0 10px 22px rgba(10,0,20,.55)}
html[data-tema="hgi"] .bantuan-tg:hover{filter:brightness(1.08)}
html[data-tema="hgi"] .bantuan-avatar{border-radius:50%;background:var(--hg-koin);box-shadow:0 0 0 2px var(--hg-tepi-emas)}
html[data-tema="hgi"] .bantuan-avatar>img{border-radius:50%}
html[data-tema="hgi"] .bantuan-avatar-fallback{color:var(--hg-coklat);font:400 15px/1 var(--hg-disp);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-tema="hgi"] .bantuan-channel-badge{border-color:#3d0e68}
html[data-tema="hgi"] .bantuan-copy small{color:#ffe58a;font-family:var(--hg-teks-f);font-weight:800;letter-spacing:.04em}

/* ── Navigasi bawah: bilah ungu bergaris emas, tombol tengah koin emas ── */
html[data-tema="hgi"] .bnav{background:linear-gradient(180deg,#3c0d60,#250740);border-top:0;box-shadow:inset 0 2px 0 #ffd54a,inset 0 3px 0 #8a4b0c,0 -8px 22px rgba(10,0,20,.45)}
html[data-tema="hgi"] .bnav a{color:rgba(255,235,252,.74);font:800 11.5px/1 var(--hg-teks-f);letter-spacing:.01em;text-transform:none}
html[data-tema="hgi"] .bnav a[aria-current="page"]{color:var(--hg-emas)}
html[data-tema="hgi"] .bnav a[aria-current="page"]::after{bottom:3px;width:22px;height:4px;margin-left:-11px;border-radius:999px;background:var(--hg-emas);
  box-shadow:0 0 10px rgba(255,213,74,.7);transform:none}
html[data-tema="hgi"] .bnav a:focus-visible{outline:2px solid var(--hg-emas)}
html[data-tema="hgi"] .bnav li.center a{color:var(--hg-emas)}
html[data-tema="hgi"] .bnav .bnav-fab{top:-22px;width:54px;height:54px;border:0;border-radius:50%;background:var(--hg-koin);transform:translateX(-50%);
  box-shadow:inset 0 0 0 3px rgba(255,248,200,.9),0 0 0 3px var(--hg-tepi-emas),0 0 0 7px #2b0848,0 8px 16px -6px rgba(0,0,0,.5)}
html[data-tema="hgi"] .bnav .bnav-fab svg{width:24px;height:24px;stroke:var(--hg-coklat);stroke-width:2.3;transform:none;filter:none}
html[data-tema="hgi"] .bnav li.center a[aria-current="page"] .bnav-fab{background:var(--hg-koin);
  box-shadow:inset 0 0 0 3px rgba(255,248,200,.9),0 0 0 3px var(--hg-tepi-emas),0 0 0 7px #2b0848,0 0 0 9px var(--hg-emas)}
html[data-tema="hgi"] .bnav li.center a:active .bnav-fab{transform:translateX(-50%) translateY(2px)}
html[data-tema="hgi"] .bnav li.center a:focus-visible .bnav-fab{outline-color:var(--hg-emas)}
html[data-tema="hgi"] .bnav .bnav-dot{border-radius:50%;background:#ff5c7f;transform:none}
html[data-tema="hgi"] .bnav .bnav-dot.pts{border-radius:999px;background:var(--hg-emas-bidang);color:var(--hg-coklat);font:900 9.5px/1 var(--hg-teks-f)}

/* ── Halaman: judul krem bergaris di atas kanvas ────────────────────── */
html[data-tema="hgi"] .page-head::before{width:44px;height:6px;margin-bottom:12px;border-radius:999px;background:var(--hg-emas-bidang);box-shadow:0 2px 0 #a85a06}
/* Judul di kanvas: lewat ID halamannya, karena badan HUD memaku warnanya (1,1,1). */
html[data-tema="hgi"] :is(#view-pesanan,#view-saldo,#view-akun,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head h1{color:var(--hg-krem);
  font:400 34px/1.05 var(--hg-disp);letter-spacing:.005em;text-transform:none;text-shadow:var(--hg-judul-garis)}
html[data-tema="hgi"] .page-head p{color:rgba(255,240,255,.84)}
html[data-tema="hgi"] .section-kicker{color:#ffe08a}
html[data-tema="hgi"] :is(.card,.player-pass,.wallet-topup-card,.account-spender-card,.checkin-card) .section-kicker{color:#ffe08a}
html[data-tema="hgi"] .page-head .section-kicker{color:var(--hg-emas)}
html[data-tema="hgi"] .section-kicker::before{width:12px;height:12px;border-radius:50%;background:var(--hg-koin);transform:none}
html[data-tema="hgi"] .muted{color:var(--hg-redup)}
html[data-tema="hgi"] .msg{border:0;border-radius:14px;background:rgba(255,90,110,.22);box-shadow:inset 0 0 0 1.5px rgba(255,140,160,.5);color:var(--hg-rose)}
html[data-tema="hgi"] footer.foot{color:rgba(255,235,252,.66)}

/* ── Menu akun, bantuan, info ───────────────────────────────────────── */
html[data-tema="hgi"] :is(.account-menu a,.account-menu button){border-top-color:rgba(255,213,74,.2);color:#fff;
  font:400 17px/1 var(--hg-disp);letter-spacing:.01em;text-transform:none}
html[data-tema="hgi"] :is(.account-menu a,.account-menu button):hover{background:rgba(255,255,255,.08)}
html[data-tema="hgi"] :is(.account-menu a,.account-menu button)>span{border:0;border-radius:12px;background:var(--hg-koin);color:var(--hg-coklat);font:400 14px/1 var(--hg-disp)}
html[data-tema="hgi"] .account-menu a>i{color:var(--hg-emas)}
html[data-tema="hgi"] .account-menu button.danger{color:var(--hg-rose)}
html[data-tema="hgi"] .account-menu button.danger>span{border:0;background:var(--hg-rose-bidang);color:#fff}
html[data-tema="hgi"] .account-session-note{color:rgba(255,235,252,.74)}
html[data-tema="hgi"] .faq-item{border-top-color:rgba(255,213,74,.22)}
html[data-tema="hgi"] .faq-item summary{color:#fff;font:800 15px/1.35 var(--hg-teks-f)}
html[data-tema="hgi"] .faq-item summary::after,html[data-tema="hgi"] .seo-faq summary::after{border:0;border-radius:50%;background:var(--hg-koin);color:var(--hg-coklat)}
html[data-tema="hgi"] .faq-item[open] summary::after{background:var(--hg-emas-bidang);color:var(--hg-coklat)}
html[data-tema="hgi"] .faq-item p{color:var(--hg-redup)}
html[data-tema="hgi"] .cs-avatar{border:0;border-radius:14px;background:var(--hg-aksi);color:#fff;box-shadow:0 3px 0 var(--hg-a-tepi);
  font:400 17px/1 var(--hg-disp);text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .cs-copy b{color:#fff;font:400 19px/1.1 var(--hg-disp)}
html[data-tema="hgi"] :is(.cs-copy small,.cs-go){color:var(--hg-redup)}
html[data-tema="hgi"] .info-posts li{border-top-color:rgba(255,213,74,.22)}
html[data-tema="hgi"] .info-posts a{color:#fff}
html[data-tema="hgi"] .info-posts a:hover b{color:var(--hg-harga)}
html[data-tema="hgi"] :is(.info-more,.info-brand){color:var(--hg-harga)}
html[data-tema="hgi"] :is(.info-promo-list,.info-leaderboard-list) img{border-color:rgba(255,213,74,.35);border-radius:12px}
html[data-tema="hgi"] .login-card :is(label,.muted){color:var(--hg-redup)}
html[data-tema="hgi"] .login-card input{height:52px}
html[data-tema="hgi"] .login-card .login-back{color:var(--hg-harga)}
html[data-tema="hgi"] :is(.account-loading,.account-error){border:0;border-radius:14px;background:var(--h-panel);color:var(--hg-redup)}
html[data-tema="hgi"] .account-error{background:rgba(255,90,110,.22);color:var(--hg-rose)}

/* ── Akun: kartu anggota, check-in, peringkat ───────────────────────── */
html[data-tema="hgi"] .player-pass{color:#fff;
  background:radial-gradient(70% 140px at 100% 0,rgba(255,213,74,.22),transparent 70%) padding-box,var(--hg-panel) padding-box,var(--hg-bingkai) border-box}
html[data-tema="hgi"] .player-pass::after{content:"HGI STORE · MEMBER";color:rgba(255,224,138,.75);border-left-color:rgba(255,213,74,.3);font:400 10px/1 var(--hg-disp);letter-spacing:.28em}
html[data-tema="hgi"] .wallet-pass::after{content:"HGI STORE · DOMPET"}
html[data-tema="hgi"] .player-avatar{border:0;border-radius:16px;background:var(--hg-kartu);color:#fff;outline:3px solid #ffd84f;outline-offset:0;
  box-shadow:0 0 0 5px var(--hg-tepi-emas)}
html[data-tema="hgi"] :is(.avatar-orbit,.avatar-bolt,.avatar-crown,.avatar-nova,.avatar-jade,.avatar-pixel,.avatar-initials){background:var(--hg-kartu)}
html[data-tema="hgi"] .player-identity strong{font:400 23px/1.05 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .player-identity>span{color:var(--hg-redup)}
html[data-tema="hgi"] .tier-chip{border:0;border-radius:999px;background:var(--hg-emas-bidang);color:var(--hg-coklat);font:900 11px/1 var(--hg-teks-f)}
html[data-tema="hgi"] .tier-chip::before{background:var(--hg-coklat)}
html[data-tema="hgi"] .account-meters{border:0;border-radius:14px;overflow:hidden;background:rgba(255,213,74,.3)}
html[data-tema="hgi"] .account-meters>div{background:#3d0e68}
html[data-tema="hgi"] .account-meters span{color:var(--hg-redup)}
html[data-tema="hgi"] :is(#view-akun,#view-saldo) :is(.account-meters strong,.wallet-pass-balance strong){color:var(--hg-harga);text-shadow:0 2px 0 #3a0a5e;font-family:var(--hg-disp);font-style:normal;font-weight:400}
html[data-tema="hgi"] .tier-progress>div:first-child{color:var(--hg-redup)}
html[data-tema="hgi"] .tier-progress b{color:#fff}
html[data-tema="hgi"] .tier-track{border-radius:999px;background:rgba(26,5,48,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
html[data-tema="hgi"] .tier-track span{border-radius:999px;background:var(--hg-emas-bidang)}
html[data-tema="hgi"] :is(.profile-editor,.avatar-picker){border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .profile-editor>label{color:var(--hg-redup)}
html[data-tema="hgi"] .profile-editor-status{color:#ffe08a}
html[data-tema="hgi"] .avatar-options button{border:0;border-radius:12px;background:var(--hg-pilihan);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,213,74,.4)}
html[data-tema="hgi"] .avatar-options button[aria-pressed="true"]{background:var(--hg-emas-bidang);color:var(--hg-coklat);box-shadow:var(--hg-emas-bayang)}
html[data-tema="hgi"] .checkin-mark{border:0;border-radius:14px;background:var(--hg-koin);font:400 15px/1 var(--hg-disp)}
html[data-tema="hgi"] .checkin-card strong{color:#fff;font:400 18px/1.1 var(--hg-disp);text-transform:none}
html[data-tema="hgi"] .checkin-card>div>span{color:var(--hg-redup)}
html[data-tema="hgi"] .checkin-days li{border:0;border-radius:12px;background:var(--hg-cekung);color:var(--hg-redup);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .checkin-days li>b{border:0;border-radius:10px;background:rgba(255,255,255,.1);color:var(--hg-redup)}
html[data-tema="hgi"] .checkin-days li>small{color:#fff}
html[data-tema="hgi"] .checkin-days li.done>b{background:rgba(98,212,52,.3);color:var(--hg-hijau-tx)}
html[data-tema="hgi"] .checkin-days li.today{box-shadow:inset 0 0 0 2px var(--hg-emas)}
html[data-tema="hgi"] .checkin-days li.bonus{background:rgba(255,213,74,.16);box-shadow:inset 0 0 0 1.5px rgba(255,213,74,.5)}
html[data-tema="hgi"] .checkin-days li.bonus>b{background:var(--hg-koin);color:var(--hg-coklat)}
html[data-tema="hgi"] .checkin-days li.bonus>small{color:#ffe08a}
/* Hari ini (belum check-in) dan periode peringkat aktif: aturan aktif HUD (0,4,3). */
html[data-tema="hgi"] #view-akun :is(.checkin-days li.today:not(.done)>b,.spender-periods button[aria-selected="true"]){border:0;background:var(--hg-emas-bidang);color:var(--hg-coklat)}
html[data-tema="hgi"] .account-rank span{color:#ffe08a}
html[data-tema="hgi"] .account-rank strong{color:#fff}
html[data-tema="hgi"] .account-rank small{color:var(--hg-redup)}
html[data-tema="hgi"] .spender-head h2{color:var(--hg-krem);font:400 21px/1.1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .spender-head p{color:var(--hg-redup)}
html[data-tema="hgi"] .spender-trophy{border:0;border-radius:14px;background:var(--hg-koin)}
html[data-tema="hgi"] .spender-periods{border:0;border-radius:12px;background:var(--hg-cekung);padding:3px;box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .spender-periods button{border-radius:10px;color:rgba(255,240,255,.8);font:800 12.5px/1 var(--hg-teks-f)}
html[data-tema="hgi"] .spender-list li{border:0;border-radius:12px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .spender-rank{color:var(--hg-redup-2)}
html[data-tema="hgi"] .spender-list li:first-child .spender-rank{color:var(--hg-emas)}
html[data-tema="hgi"] .spender-person strong{color:#fff}
html[data-tema="hgi"] .spender-person small{color:var(--hg-redup)}
html[data-tema="hgi"] .spender-list li>b{color:var(--hg-harga)}
html[data-tema="hgi"] .spender-avatar{border:0;border-radius:50%;background:var(--hg-kartu);color:#fff}

/* ── Saldo ──────────────────────────────────────────────────────────── */
html[data-tema="hgi"] .wallet-pass-mark{border:0;border-radius:16px;background:var(--hg-aksi);color:#fff;font:400 19px/1 var(--hg-disp);text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .wallet-pass-copy strong{color:#fff;font:400 19px/1.1 var(--hg-disp)}
html[data-tema="hgi"] .wallet-pass-copy small{color:var(--hg-redup)}
html[data-tema="hgi"] .wallet-pass-balance{border-top:1px dashed rgba(255,213,74,.45)}
html[data-tema="hgi"] :is(#view-akun,#view-saldo) .wallet-pass-balance strong{font-size:38px}
html[data-tema="hgi"] .wallet-pass .wallet-pass-meters{border:0;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,213,74,.3)}
html[data-tema="hgi"] .wallet-pass-btn b{border-radius:8px;background:rgba(0,0,0,.32)}
html[data-tema="hgi"] .wallet-topup-mark{border:0;border-radius:14px;background:var(--hg-aksi);color:#fff;text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .wallet-topup-mark span{background:var(--hg-emas)}
html[data-tema="hgi"] .wallet-topup-head h4{color:var(--hg-krem);font:400 21px/1.1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] :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(--hg-redup)}
html[data-tema="hgi"] .wallet-topup-steps span{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:var(--hg-redup)}
html[data-tema="hgi"] #wallet-topup-card .wallet-topup-steps .active span{background:var(--hg-emas-bidang);color:var(--hg-coklat)}
html[data-tema="hgi"] .wallet-topup-steps .active{color:#fff}
html[data-tema="hgi"] .wallet-topup-steps li:not(:last-child)::after{background:rgba(255,213,74,.35)}
html[data-tema="hgi"] :is(#wallet-topup-form legend,.wallet-topup-custom>span:first-child,.account-filter label>span){color:var(--hg-redup)}
/* Kotak cari & status riwayat duduk langsung di kanvas ungu: labelnya terang.
   ID panel: aturan label di atas memuat #wallet-topup-form, kekhususan (1,1,2). */
html[data-tema="hgi"] :is(#acct-panel-transactions,#acct-panel-wallet,#acct-panel-points) .account-filter label>span{color:rgba(255,240,255,.9)}
html[data-tema="hgi"] .wallet-topup-presets button{color:#fff;font:400 17px/1.1 var(--hg-disp)}
html[data-tema="hgi"] .wallet-topup-input{border:0;border-radius:14px;background:#2a0948;box-shadow:inset 0 0 0 2px #a76ae2,inset 0 3px 0 rgba(0,0,0,.22)}
html[data-tema="hgi"] .wallet-topup-input:focus-within{box-shadow:inset 0 0 0 2px var(--hg-emas),0 0 0 3px rgba(255,213,74,.3)}
html[data-tema="hgi"] .wallet-topup-input b{color:var(--hg-redup)}
html[data-tema="hgi"] :is(.wallet-topup-quote>p,.wallet-topup-instruction,.wallet-topup-record,.account-entry){border:0;border-radius:14px;background:var(--hg-cekung);color:var(--hg-redup);
  box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .wallet-topup-error{border:0;border-radius:14px;background:rgba(255,90,110,.22);color:var(--hg-rose)}
html[data-tema="hgi"] .wallet-topup-breakdown{border:0;border-radius:14px;background:rgba(98,212,52,.2);color:var(--hg-hijau-tx)}
html[data-tema="hgi"] .wallet-topup-active{border:0;border-radius:14px;background:rgba(255,213,74,.16);box-shadow:inset 0 0 0 1.5px rgba(255,213,74,.5)}
html[data-tema="hgi"] .wallet-topup-active-head strong{color:#ffe08a}
html[data-tema="hgi"] .wallet-topup-record{border-left:4px solid var(--hg-emas)}
html[data-tema="hgi"] .wallet-topup-record.process{border-left-color:var(--hg-u5)}
html[data-tema="hgi"] .wallet-topup-record.done{border-left-color:#62d434}
html[data-tema="hgi"] .wallet-topup-record.fail{border-left-color:#ff6b85}
html[data-tema="hgi"] .wallet-topup-va strong{color:#fff}
html[data-tema="hgi"] .wallet-topup-methods button>strong{color:#fff}
html[data-tema="hgi"] .account-subhead strong{color:var(--hg-krem);font:400 19px/1.1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .account-subhead span{color:rgba(255,240,255,.8)}
html[data-tema="hgi"] :is(.account-filter input,.account-filter select){border:2px solid #a76ae2;border-radius:14px;background:#2a0948;color:#fff}
html[data-tema="hgi"] .entry-kicker{color:var(--hg-redup)}
html[data-tema="hgi"] :is(.entry-main small,.entry-main>span:not(.entry-kicker)){color:var(--hg-redup)}
html[data-tema="hgi"] .entry-main strong{color:#fff}
html[data-tema="hgi"] .entry-value>strong{color:var(--hg-harga);font-family:var(--hg-disp);font-style:normal;font-weight:400}
html[data-tema="hgi"] .entry-status{border:0;border-radius:999px;background:rgba(255,213,74,.2);color:#ffe08a;font:900 11px/1 var(--hg-teks-f)}
html[data-tema="hgi"] .entry-status.ok{background:rgba(98,212,52,.24);color:var(--hg-hijau-tx)}
html[data-tema="hgi"] .entry-status.err{background:rgba(255,90,110,.24);color:var(--hg-rose)}
html[data-tema="hgi"] .mutation-sign{border:0;border-radius:10px}
html[data-tema="hgi"] .mutation-sign.pos{background:rgba(98,212,52,.24)}
html[data-tema="hgi"] .mutation-sign.neg{background:rgba(255,90,110,.24)}
html[data-tema="hgi"] :is(.account-list-state){color:rgba(255,240,255,.82)}

/* ── Pesanan & lacak ────────────────────────────────────────────────── */
html[data-tema="hgi"] .track-status-head{border-bottom-color:rgba(255,213,74,.25)}
html[data-tema="hgi"] .track-status-head strong{font:400 24px/1.05 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] :is(.track-overline,.track-status-head p,.track-status-head small){color:var(--hg-redup)}
html[data-tema="hgi"] :is(.track-buyer,.track-security,.refund-box){border:0;border-radius:14px;background:var(--hg-cekung);color:var(--hg-redup);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .track-buyer strong{color:#fff}
html[data-tema="hgi"] .track-avatar{border:0;border-radius:12px;background:var(--hg-kartu)}
html[data-tema="hgi"] .track-detail-grid{border:0;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,213,74,.3)}
html[data-tema="hgi"] .track-detail-grid>div{background:var(--hg-cekung)}
html[data-tema="hgi"] .track-detail-grid>div:nth-child(odd){border-right-color:rgba(255,213,74,.2)}
html[data-tema="hgi"] .track-detail-grid>div:nth-child(-n+2){border-bottom-color:rgba(255,213,74,.2)}
html[data-tema="hgi"] .track-detail-grid span{color:var(--hg-redup)}
html[data-tema="hgi"] .track-detail-grid b{color:#fff;font:400 15px/1.3 var(--hg-disp)}
html[data-tema="hgi"] .track-ticket{border-top:1px dashed rgba(255,213,74,.45);background:var(--hg-cekung);color:#fff}
html[data-tema="hgi"] .track-ticket span{color:var(--hg-redup)}
html[data-tema="hgi"] .track-ticket b{color:var(--hg-harga);font:400 22px/1 var(--hg-disp);text-shadow:0 2px 0 #3a0a5e}
html[data-tema="hgi"] .track-error{border:0;border-radius:14px;background:rgba(255,90,110,.22);color:var(--hg-rose)}
html[data-tema="hgi"] :is(.track-status-icon,.pay-state-symbol){border:0;border-radius:50%;background:var(--hg-koin);color:var(--hg-coklat);box-shadow:var(--hg-koin-bayang)}
html[data-tema="hgi"] :is(.track-order-card.ok .track-status-icon,.pay-status.ok .pay-state-symbol){border:0;background:var(--hg-aksi);color:#fff;text-shadow:var(--hg-aksi-garis);box-shadow:0 3px 0 var(--hg-a-tepi)}
html[data-tema="hgi"] :is(.track-order-card.err .track-status-icon,.pay-status.err .pay-state-symbol){border:0;background:var(--hg-rose-bidang);color:#fff;box-shadow:0 3px 0 #8a1534}
html[data-tema="hgi"] :is(.track-status-icon,.pay-state-symbol).has-asset{background:#fff;box-shadow:0 0 0 2px #ffd84f}
html[data-tema="hgi"] :is(.tx-kepala h2,.tx-judul-kolom){font-family:var(--hg-disp);font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none}
html[data-tema="hgi"] .st-badge{font-family:var(--hg-teks-f);font-style:normal;font-weight:900;letter-spacing:.03em}

/* ── Pembayaran /pesanan/<nomor> ────────────────────────────────────── */
html[data-tema="hgi"] .pay-page h3{font:400 22px/1.1 var(--hg-disp);letter-spacing:.01em;text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .pay-kicker{color:var(--hg-hijau-tx)}
html[data-tema="hgi"] .pay-kicker::before{width:12px;height:12px;border-radius:50%;background:var(--hg-koin);transform:none}
/* Tagihan: papan kayu bergaris emas, total kuning besar. */
html[data-tema="hgi"] .pay-invoice{border:3px solid transparent;border-radius:18px;clip-path:none;color:#fff;
  background:var(--hg-kayu) padding-box,var(--hg-bingkai) border-box;box-shadow:inset 0 2px 0 rgba(255,220,160,.35),0 4px 0 #3a1a06}
html[data-tema="hgi"] .pay-invoice-label{color:rgba(255,240,215,.84)}
html[data-tema="hgi"] #pay .pay-invoice-amount{color:var(--hg-harga);font:400 40px/1 var(--hg-disp);text-shadow:var(--hg-total-garis)}
html[data-tema="hgi"] .pay-invoice-product{color:#fff;font:400 16px/1.3 var(--hg-disp);text-transform:none}
html[data-tema="hgi"] .pay-funding-breakdown{border-top-color:rgba(255,255,255,.3)}
html[data-tema="hgi"] .pay-funding-breakdown span{color:rgba(255,240,215,.84)}
html[data-tema="hgi"] .pay-funding-breakdown b{color:#fff}
html[data-tema="hgi"] .pay-nota-link{color:#fff}
html[data-tema="hgi"] .payment-card .pay-status{border-top-color:rgba(255,213,74,.25);color:#fff}
html[data-tema="hgi"] .pay-step{color:var(--hg-redup-2)}
html[data-tema="hgi"] .pay-step.active,html[data-tema="hgi"] .pay-step.done{color:#fff}
html[data-tema="hgi"] .pay-step-dot{border:0;border-radius:50%;background:rgba(255,255,255,.14);color:var(--hg-redup);font:400 14px/1 var(--hg-disp)}
/* .pay-steps: aturan aktif HUD (0,4,3). */
html[data-tema="hgi"] .pay-steps .pay-step.active .pay-step-dot{border:0;background:var(--hg-koin);color:var(--hg-coklat);box-shadow:0 0 0 2px var(--hg-tepi-emas)}
html[data-tema="hgi"] .pay-step.done .pay-step-dot{border:0;background:var(--hg-aksi);color:#fff;text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .pay-step-line{background:rgba(255,255,255,.18)}
html[data-tema="hgi"] .pay-step-line.done{background:var(--brand)}
html[data-tema="hgi"] .pay-state-head{border:0;border-radius:14px;background:rgba(255,213,74,.16);box-shadow:inset 0 0 0 1.5px rgba(255,213,74,.45)}
html[data-tema="hgi"] .pay-status.ok .pay-state-head{border:0;background:rgba(98,212,52,.2);box-shadow:inset 0 0 0 1.5px rgba(150,240,110,.45)}
html[data-tema="hgi"] .pay-status.err .pay-state-head{border:0;background:rgba(255,90,110,.22);box-shadow:inset 0 0 0 1.5px rgba(255,140,160,.45)}
html[data-tema="hgi"] .pay-state-head strong{color:#fff;font:400 17px/1.2 var(--hg-disp)}
html[data-tema="hgi"] .pay-state-head p{color:var(--hg-redup)}
html[data-tema="hgi"] .order-ticket{border:2px solid transparent;border-radius:16px;background:var(--hg-pilihan) padding-box,var(--hg-bingkai-tipis) border-box;color:#fff;box-shadow:0 3px 0 var(--hg-kartu-tebal)}
html[data-tema="hgi"] .order-ticket::before,html[data-tema="hgi"] .order-ticket::after{display:none}
html[data-tema="hgi"] .order-ticket-top{color:var(--hg-redup)}
html[data-tema="hgi"] .order-ticket-top b{color:var(--hg-harga);font:400 22px/1 var(--hg-disp);text-shadow:0 2px 0 #3a0a5e}
html[data-tema="hgi"] .order-full-id{color:var(--hg-redup)}
html[data-tema="hgi"] .order-ticket-actions{border-top-color:rgba(255,213,74,.35)}
html[data-tema="hgi"] .pay-email-note{color:var(--hg-redup)}
html[data-tema="hgi"] .pay-email-note b{color:#fff}
html[data-tema="hgi"] .va{border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang);color:#fff}
html[data-tema="hgi"] #pay-body img{border-radius:14px;box-shadow:0 0 0 6px #fff,0 0 0 9px #ffd84f}
html[data-tema="hgi"] .visual-logo-fallback{border-radius:12px;background:#fff;color:var(--hg-u2);box-shadow:0 0 0 2px #ffd84f}

/* ── Panduan toko, blok nominal, jelajah ────────────────────────────── */
html[data-tema="hgi"] .seo-artikel{--seo-soft:rgba(26,5,48,.35);--seo-line:rgba(255,213,74,.28)}
html[data-tema="hgi"] .seo-artikel h2{font:400 24px/1.15 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .seo-artikel h3{color:#fff;font:400 19px/1.2 var(--hg-disp)}
html[data-tema="hgi"] .seo-eyebrow{color:#ffe08a}
html[data-tema="hgi"] .seo-eyebrow span{border-radius:50%;background:var(--hg-koin);transform:none}
html[data-tema="hgi"] .seo-lead{color:#f6eaff}
html[data-tema="hgi"] :is(.seo-copy p,.seo-step-list li){color:#f1e3fc}
html[data-tema="hgi"] .seo-block-label{color:#ead8f8}
html[data-tema="hgi"] .seo-route span{border:0;border-radius:999px;background:var(--hg-cekung);color:#fff;box-shadow:var(--hg-cekung-bayang);font:800 12px/1.2 var(--hg-teks-f)}
html[data-tema="hgi"] .seo-route i{color:var(--hg-redup-2)}
html[data-tema="hgi"] .seo-step-list li::before{border:0;border-radius:50%;background:var(--hg-koin);color:var(--hg-coklat);font:400 13px/1 var(--hg-disp);text-shadow:none}
html[data-tema="hgi"] .seo-faq{border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .seo-faq[open]{background:rgba(26,5,48,.55)}
html[data-tema="hgi"] .seo-faq summary{color:#fff}
html[data-tema="hgi"] .seo-faq p{color:var(--hg-redup)}
html[data-tema="hgi"] .seo-return{border-top-color:rgba(255,213,74,.28);background:var(--hg-cekung);color:#fff}
html[data-tema="hgi"] .seo-return small{color:var(--hg-redup)}
html[data-tema="hgi"] .seo-artikel .seo-return b{border:0;border-radius:12px;background:var(--hg-aksi);color:#fff;text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] .seo-jelajah{border:0;border-radius:16px;background:var(--h-panel);color:var(--hg-redup)}
html[data-tema="hgi"] .seo-jelajah a{color:var(--hg-harga);font-family:var(--hg-disp);font-style:normal;font-weight:400}
/* Blok halaman nominal duduk LANGSUNG di kanvas ungu (di luar .seo-artikel):
   teksnya terang, tautannya emas. */
html[data-tema="hgi"] .seo-produk{color:var(--t-on-bg)}
html[data-tema="hgi"] .seo-produk a{color:var(--hg-emas)}
html[data-tema="hgi"] .seo-produk h3{color:var(--hg-krem);font:400 23px/1.15 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .seo-produk .seo-block-label{color:var(--t-on-bg-muted)}
html[data-tema="hgi"] .seo-produk .faq-item{border-top-color:rgba(255,213,74,.22)}
html[data-tema="hgi"] .seo-produk .faq-item summary{color:#fff}
html[data-tema="hgi"] .seo-produk .faq-item p{color:var(--t-on-bg-muted)}

/* ── Kaki identitas (di kanvas) ─────────────────────────────────────── */
html[data-tema="hgi"] .ident-foot{--ident-accent-d:#fff;border-top-color:rgba(255,213,74,.28)}
html[data-tema="hgi"] .ident-mark{border-radius:12px}
html[data-tema="hgi"] .ident-name{color:var(--hg-krem);font:400 21px/1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .ident-wordmark{filter:none}
html[data-tema="hgi"] .ident-legal{color:var(--t-on-bg-muted)}
html[data-tema="hgi"] .ident-legal-nama{color:#fff}
html[data-tema="hgi"] .ident-segel>span{border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,213,74,.4)}
html[data-tema="hgi"] .ident-segel svg{color:var(--hg-emas)}
html[data-tema="hgi"] .ident-kontak a{border-bottom-color:rgba(255,235,252,.35)}
html[data-tema="hgi"] .ident-kebijakan a[aria-current="page"]{color:#fff;text-decoration-color:var(--hg-emas)}

/* ── Overlay, pop-up Cek ID, notifikasi ─────────────────────────────── */
html[data-tema="hgi"] :is(.paycard,.tg-miniapp-install-card){border:3px solid transparent;border-radius:22px;color:#fff;
  background:var(--hg-panel) padding-box,var(--hg-bingkai) border-box;box-shadow:inset 0 2px 0 rgba(255,200,255,.38),0 5px 0 #250640,0 24px 60px rgba(10,0,20,.6)}
html[data-tema="hgi"] :is(.paycard h3,.tg-miniapp-install-card h3){color:var(--hg-krem);font:400 21px/1.1 var(--hg-disp);text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .tg-miniapp-install-card p{color:var(--hg-redup)}
html[data-tema="hgi"] .close{border:0;border-radius:50%;background:var(--hg-rose-bidang);color:#fff;box-shadow:0 0 0 2px #fff,0 3px 0 2px #8a1534}
html[data-tema="hgi"] #event-popup-close{border:0;border-radius:50%;background:var(--hg-rose-bidang);color:#fff;box-shadow:0 0 0 2px #fff,0 3px 0 2px #8a1534}
html[data-tema="hgi"] .event-popup-card{border-radius:18px;background:var(--hg-u0);box-shadow:0 0 0 3px #ffd84f,0 0 0 5px var(--hg-tepi-emas),0 24px 60px rgba(10,0,20,.6)}
html[data-tema="hgi"] .event-popup-body{border-radius:18px 18px 0 0}
html[data-tema="hgi"] .bulk-done-mark{border:0;border-radius:14px;background:rgba(98,212,52,.24)}
html[data-tema="hgi"] .bulk-done-note{border-radius:14px;background:var(--hg-cekung);color:var(--hg-redup)}
/* Pop-up Cek ID: konsep HUD awal tanpa logo (Taka 9 Okt 2026, medali & sayap dibuang) dalam
   kulit Lobi HGI: jendela ungu berbingkai emas, nama toko krem bergaris ungu tua (atau logo
   nama warna asli), panel cekung, ikon koin emas, tombol timbul. #idcek-overlay: daftar sudut
   4px badan HUD (1,1,1) memuat .paycard; sudutnya sendiri lewat --hg-sudut (22px). */
html[data-tema="hgi"] #idcek-overlay .paycard.idcek-kartu{
  --idk-a:#7c33b8;--idk-b:#3d0e68;--idk-merek:var(--hg-krem);--idk-nama:var(--hg-krem);--idk-judul:#ffe08a;
  --idk-panel:var(--hg-cekung);--idk-pil:#2a0948;--idk-pil-garis:rgba(255,213,74,.45);
  --idk-teks:#fff;--idk-label:var(--hg-redup);--idk-ikon:var(--hg-koin);--idk-ikon-tx:var(--hg-coklat);--idk-ikon-garis:transparent;
  --idk-catatan:#ffe9a8;
  border:3px solid transparent;background:linear-gradient(180deg,var(--idk-a),var(--idk-b)) padding-box,var(--hg-bingkai) border-box;
  box-shadow:inset 0 2px 0 rgba(255,200,255,.38),0 5px 0 #250640,0 24px 48px -12px rgba(10,0,20,.75)}
html[data-tema="hgi"] .idcek-toko-nama{font:400 26px/1.1 var(--hg-disp);letter-spacing:.01em;text-transform:none;text-shadow:var(--hg-judul-garis)}
/* Logo nama di pop-up juga warna asli gambarnya, sama dengan kepala (bukan mask krem). */
html[data-tema="hgi"] .idcek-wordmark[style*="--logo-nama"]{object-position:center;background:none;-webkit-mask:none;mask:none}
html[data-tema="hgi"] #idcek-overlay .idcek-judul{color:var(--idk-judul);font:800 12.5px/1.3 var(--hg-teks-f);letter-spacing:.08em;text-transform:uppercase;text-shadow:none}
html[data-tema="hgi"] .idcek-panel{padding:14px 12px 12px;border-radius:16px;box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .idcek-ikon{border-radius:50%;box-shadow:var(--hg-koin-bayang)}
html[data-tema="hgi"] .idcek-ikon-nama{color:var(--hg-coklat)}
html[data-tema="hgi"] .idcek-label{font:800 12px/1.2 var(--hg-teks-f);letter-spacing:.05em}
html[data-tema="hgi"] .idcek-nilai{border-radius:14px;font:400 22px/26px var(--hg-disp);letter-spacing:.02em}
html[data-tema="hgi"] .idcek-tutup{top:-12px;right:-10px;width:36px;height:36px;border:0;border-radius:50%;background:var(--hg-rose-bidang);color:#fff;
  box-shadow:0 0 0 2px #fff,0 3px 0 2px #8a1534}
html[data-tema="hgi"] .idcek-aksi button{min-height:50px;border-radius:16px;font:400 18px/1 var(--hg-disp);letter-spacing:.02em}
html[data-tema="hgi"] :is(.pwa-pasang,.notif-beli){border:2px solid transparent;border-radius:18px;color:#fff;
  background:linear-gradient(180deg,rgba(91,31,145,.98),rgba(46,10,80,.98)) padding-box,var(--hg-bingkai-tipis) border-box;
  box-shadow:0 4px 0 #250640,0 22px 48px -14px rgba(10,0,20,.85)}
html[data-tema="hgi"] .pwa-pasang::after{background:rgba(255,213,74,.4)}
html[data-tema="hgi"] :is(.pwa-pasang-judul,.notif-beli-teks b,.pwa-pasang-sub b){color:#fff}
html[data-tema="hgi"] :is(.pwa-pasang-sub,.pwa-pasang-waktu,.pwa-pasang-tutup,.notif-beli-teks){color:rgba(255,235,252,.8)}
html[data-tema="hgi"] :is(.pwa-pasang-tutup,.notif-beli-tutup):hover{background:rgba(255,255,255,.1);color:#fff}
html[data-tema="hgi"] .pwa-pasang-app{color:var(--hg-emas);font:400 14px/1 var(--hg-disp);letter-spacing:.02em}
html[data-tema="hgi"] .pwa-pasang-btn{border:0;border-radius:12px;background:var(--hg-aksi);color:#fff;box-shadow:var(--hg-aksi-bayang);
  font:400 14px/1 var(--hg-disp);text-shadow:var(--hg-aksi-garis)}
html[data-tema="hgi"] :is(.pwa-pasang-ikon,.notif-beli-ikon){border-radius:10px;box-shadow:0 0 0 2px #ffd84f}

/* ── Pesan massal ───────────────────────────────────────────────────── */
html[data-tema="hgi"] :is(.bulk-field select,.bulk-field textarea){border:2px solid #a76ae2;border-radius:14px;background:#2a0948;color:#fff}
html[data-tema="hgi"] .bulk-field>span{color:var(--hg-redup)}
html[data-tema="hgi"] :is(.bulk-summary,.bulk-confirm-detail){border:0;border-radius:14px;background:var(--hg-cekung);box-shadow:var(--hg-cekung-bayang)}
html[data-tema="hgi"] .bulk-no{border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff}

/* ── Halaman luar: blog & kebijakan ─────────────────────────────────── */
html[data-tema="hgi"] .b-top{color:#fff;border-bottom:0;background:linear-gradient(180deg,#4b1574,#2f0a4e);
  box-shadow:inset 0 -3px 0 #ffd54a,inset 0 -4px 0 #8a4b0c}
html[data-tema="hgi"] .b-brand span{color:var(--hg-krem);font:400 24px/1 var(--hg-disp);letter-spacing:.01em;text-transform:none;
  text-shadow:1.5px 0 0 var(--hg-tepi),-1.5px 0 0 var(--hg-tepi),0 1.5px 0 var(--hg-tepi),0 -1.5px 0 var(--hg-tepi),0 3px 0 var(--hg-tepi)}
html[data-tema="hgi"] .b-brand img:not(.b-wordmark){border-radius:10px;box-shadow:0 0 0 2px #ffd84f}
html[data-tema="hgi"] .b-brand img.b-wordmark{filter:none}
html[data-tema="hgi"] .b-back{border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-tema="hgi"] .b-back:hover{background:rgba(255,255,255,.2)}
html[data-tema="hgi"] :is(.b-card,.b-pager a){border:3px solid transparent;border-radius:20px;color:#fff;
  background:var(--hg-panel) padding-box,var(--hg-bingkai) border-box;box-shadow:var(--hg-panel-bayang)}
html[data-tema="hgi"] .b-pager a:hover{filter:brightness(1.08)}
html[data-tema="hgi"] :is(.b-title,.b-art-title){color:var(--hg-krem);font-family:var(--hg-disp);font-style:normal;font-weight:400;text-transform:none;text-shadow:var(--hg-judul-garis)}
html[data-tema="hgi"] .b-body{border:3px solid transparent;border-radius:22px;clip-path:none;color:#f6eaff;
  background:var(--hg-panel) padding-box,var(--hg-bingkai) border-box;box-shadow:var(--hg-panel-bayang)}
html[data-tema="hgi"] .b-body :is(h2,h3,h4,strong,b){color:#fff}
html[data-tema="hgi"] .b-body h2::before{width:12px;height:12px;margin:0 10px 3px 0;border-radius:50%;background:var(--hg-koin);transform:none}
html[data-tema="hgi"] .b-body li::marker{color:var(--hg-emas)}
html[data-tema="hgi"] .b-body blockquote{border-left:4px solid var(--hg-emas);border-radius:0 12px 12px 0;background:var(--hg-cekung)}
html[data-tema="hgi"] .b-body a{color:var(--hg-harga)}
html[data-tema="hgi"] .b-eyebrow{border-radius:999px;background:var(--hg-emas-bidang);color:var(--hg-coklat);box-shadow:none}
html[data-tema="hgi"] .b-more{color:var(--hg-harga)}
html[data-tema="hgi"] .k-halaman .card{border:3px solid transparent;border-radius:22px;clip-path:none;
  background:var(--hg-panel) padding-box,var(--hg-bingkai) border-box;box-shadow:var(--hg-panel-bayang)}
html[data-tema="hgi"] .k-halaman .card h2{color:var(--hg-krem);font:400 21px/1.15 var(--hg-disp);letter-spacing:.01em;text-transform:none;text-shadow:0 2px 0 var(--hg-tepi)}
html[data-tema="hgi"] .k-halaman .card li::marker{color:var(--hg-emas)}
html[data-tema="hgi"] :is(.k-halaman .card b){color:#fff}
html[data-tema="hgi"] .k-halaman .card a{color:var(--hg-harga)}
html[data-tema="hgi"] .k-halaman .account-menu{border:0;border-radius:16px;background:var(--h-panel)}
html[data-tema="hgi"] .k-kaki{border-top-color:rgba(255,213,74,.28)}
html[data-tema="hgi"] .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="hgi"] .bnav{background:linear-gradient(180deg,#3c0d60,#250740)}
}
@media (max-width:700px){
  /* Chip kategori lengket: latarnya pekat supaya kartu tidak tembus saat digulir. */
  html[data-tema="hgi"] .tabs{margin:0 0 14px;background:#2e0a50}
  /* Ikon 36px: kolom harga di sampingnya selebar mungkin untuk harga jutaan. */
  html[data-tema="hgi"] .prod{grid-template-columns:36px minmax(0,1fr);column-gap:8px;padding:10px 9px 11px 10px}
  html[data-tema="hgi"] .prod .ic,html[data-tema="hgi"] .prod.prod-image-native .ic img{width:36px;height:36px}
  html[data-tema="hgi"] .prod .n{font-size:12.5px}
  html[data-tema="hgi"] .card h2{font-size:21px}
  /* Kolom tombol sempit: tulisan bergaris Lilita lebih lebar dari huruf teks. */
  html[data-tema="hgi"] body #buy-btn#buy-btn{padding-inline:10px;font-size:15px;letter-spacing:0;white-space:nowrap}
}
@media (max-width:400px){
  html[data-tema="hgi"] #sum-price{font-size:24px}
  html[data-tema="hgi"] :is(.tabs button,.tabs a){padding:11px 8px;font-size:14.5px;letter-spacing:.01em}
  html[data-tema="hgi"] :is(#check-btn,#track-go){min-width:66px;padding:0 14px}
  html[data-tema="hgi"] .user-id-row #game-id{font-size:16px}
}
@media (max-width:359px){
  /* Kolom di samping ikon tinggal 57-73px: pil poin, angka coret, dan label persen sedikit
     lebih kecil dan boleh pecah baris supaya tidak keluar kartu. */
  html[data-tema="hgi"] #products .prod-points{padding:3px 6px;font-size:9.5px;line-height:1.1;white-space:normal}
  html[data-tema="hgi"] #products .prod-price del{font-size:10.5px;white-space:normal}
  html[data-tema="hgi"] #products .prod-diskon{padding:2px 5px;font-size:10px;white-space:normal}
}
@media (max-width:340px){
  /* Ponsel 320px: kolom tinggal sempit; tombol dirapatkan supaya teks contoh muat. */
  html[data-tema="hgi"] .user-id-row #game-id{padding-left:12px;font-size:14px}
  html[data-tema="hgi"] :is(#check-btn,#track-go){min-width:56px;padding:0 10px;font-size:17px}
  html[data-tema="hgi"] .user-id-row #user-id-guide-btn{width:40px;min-width:40px;height:40px;flex-basis:40px}
  html[data-tema="hgi"] body #buy-btn#buy-btn{font-size:14px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-ikon:46px;column-gap:10px;padding:9px 11px 9px 9px}
}
@media (min-width:701px){
  html[data-tema="hgi"] body{background:var(--hg-kanvas);background-attachment:fixed}
  html[data-tema="hgi"] body::before{background:var(--hg-kanvas);box-shadow:0 0 0 2px rgba(255,213,74,.35),0 24px 60px rgba(10,0,20,.7)}
}

/* ══ DESKTOP (kerangka HUD mulai 900px: kolom 1120px, nav naik ke kepala) ═ */
@media (min-width:900px){
  html[data-tema="hgi"] body::before{content:"HGI STORE  ·  HIGGS GAMES ISLAND";background:none;box-shadow:none;color:rgba(255,213,74,.35);
    font:400 13px/1 var(--hg-disp);letter-spacing:.5em}
  html[data-tema="hgi"] .hdr{height:76px}
  html[data-tema="hgi"] #brand-name{font-size:27px}
  html[data-tema="hgi"] .brand img#brand-logo{height:44px;max-width:110px}
  html[data-tema="hgi"] .bnav{height:76px;background:transparent;box-shadow:none}
  html[data-tema="hgi"] .bnav ul{height:76px}
  /* Tautan kepala: pil; yang aktif emas mengkilap seperti tab game. */
  html[data-tema="hgi"] .bnav a{height:42px;padding:0 16px;border-radius:14px;color:rgba(255,240,255,.88);font:400 16px/1 var(--hg-disp);letter-spacing:.02em}
  html[data-tema="hgi"] .bnav a:hover{background:rgba(255,255,255,.1)}
  html[data-tema="hgi"] .bnav a[aria-current="page"]{background:var(--hg-emas-bidang);color:var(--hg-coklat);box-shadow:var(--hg-emas-bayang);text-shadow:0 1px 0 rgba(255,255,255,.55)}
  html[data-tema="hgi"] .bnav a[aria-current="page"]::after{display:none}
  /* Slot tengah (Masuk/Saldo/Akun) di ujung kanan: tombol timbul warna merek. */
  html[data-tema="hgi"] .bnav li.center a{margin-left:14px;padding:0 20px;border-radius:14px;background:var(--hg-aksi);color:#fff;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--hg-a-tepi);text-shadow:var(--hg-aksi-garis)}
  html[data-tema="hgi"] .bnav li.center a:hover{background:var(--hg-aksi-hover)}
  html[data-tema="hgi"] .bnav li.center a[aria-current="page"]{background:var(--hg-aksi);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--hg-a-tepi);text-shadow:var(--hg-aksi-garis)}
  html[data-tema="hgi"] .bnav .bnav-fab{position:static;top:auto;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;transform:none}
  html[data-tema="hgi"] .bnav .bnav-fab svg{width:17px;height:17px;stroke:#fff;filter:drop-shadow(0 1px 0 var(--hg-a-tepi))}
  html[data-tema="hgi"] .bnav li.center a[aria-current="page"] .bnav-fab{background:transparent;box-shadow:none}
  html[data-tema="hgi"] .bnav li.center a:active .bnav-fab{transform:none}
  html[data-tema="hgi"] .wrap{padding-top:32px}
  html[data-tema="hgi"] .tabs{top:84px}
  html[data-tema="hgi"] :is(#view-pesanan,#view-saldo,#view-akun,#view-masuk,#view-bantuan,#view-info,#view-nota) .page-head h1{font-size:44px}
  html[data-tema="hgi"] .card h2{font-size:25px}
  html[data-tema="hgi"] .summary{--hg-sudut:22px}
  html[data-tema="hgi"] #summary{border:3px solid transparent;background:var(--hg-kayu) padding-box,var(--hg-bingkai) border-box;
    box-shadow:inset 0 2px 0 rgba(255,220,160,.3),0 5px 0 #3a1a06}
  html[data-tema="hgi"] #buy-btn{max-width:260px;min-height:52px;font-size:18px}
  html[data-tema="hgi"] .prod{min-height:96px}
  html[data-tema="hgi"] .prod .n{font-size:13.5px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod{--k-ikon:52px;column-gap:12px}
  html[data-tema="hgi"][data-kartu="memanjang"] #products .prod .n{font-size:16px}

  /* 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="hgi"] #view-topup:not(:has(>#topup-artikel:not([hidden])))>#summary{box-shadow:inset 0 2px 0 rgba(255,220,160,.3),0 5px 0 #3a1a06,0 18px 40px -12px rgba(10,0,20,.8)}
}
/* == /LAPISAN LOBI HGI ============================================== */

/* == 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="hgi"] :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="hgi"] :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 ================================================== */