/* =====================================================================
   UI 2026 — palet dasar, mode HITAM BIRU saja.
   Mode gelap permanen, warna utama hitam dan biru.
   Aturan emas:
   1. Setiap permukaan (card, tombol, badge) selalu punya PASANGAN
      background + teks dari token di bawah (rasio kontras >= 4.5:1).
   2. Icon memakai currentColor, jadi otomatis mengikuti pasangan itu.
   3. Dibungkus @layer sehingga !important di sini menang atas semua
      !important di CSS lama (comic/minecraft/style/modern).
   ===================================================================== */

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050814; --surface:#0d1629; --surface-2:#13203a; --surface-3:#1b3052;
  --text:#f2f7ff; --text-2:#aec3e0; --line:#29456d;
  --accent:#83b5ff; --accent-btn:#2563eb; --on-accent:#ffffff; --ring:rgba(54,127,255,.20);
  --ok:#5fe3a8; --ok-soft:#10382c; --ok-btn:#12805a;
  --warn:#ffd36b; --warn-soft:#3a2d0c;
  --bad:#ff9aa5; --bad-soft:#40192200; --bad-soft:#401922;
  --info:#8db0ff; --info-soft:#17284d;
  --purple:#c9b8ff; --purple-soft:#2a2150;
  --orange:#ffb883; --orange-soft:#3b2512;
  --shadow:0 10px 30px rgba(0,0,0,.35); --overlay:rgba(3,8,18,.74);
  --on-photo:#ffffff;
}
/* Nama variabel lama diarahkan ke token baru. */
html[data-theme]{
  --ink:var(--text); --muted:var(--text-2); --canvas:var(--bg); --canvas2:var(--surface-2);
  --elevated:var(--surface-2); --stroke:var(--line); --accent2:var(--ok);
  --panel:var(--surface); --green:var(--ok); --yellow:var(--warn);
  --mc-bg:var(--bg); --mc-bg2:var(--surface-2); --mc-card:var(--surface); --mc-text:var(--text); --mc-text2:var(--text-2);
  --mc-border:var(--line); --mc-green:var(--ok); --mc-blue:var(--accent); --mc-yellow:var(--warn);
  --mc-shadow:var(--shadow); --mc-shadow-sm:var(--shadow);
  --theme-text:var(--text); --theme-subtext:var(--text-2); --theme-button:var(--accent-btn); --theme-button-ink:var(--on-accent);
  --theme-soft:var(--surface-2); --theme-alert:var(--surface-2);
  --theme-icon:var(--text); --theme-icon-secondary:var(--text-2); --theme-icon-surface:var(--surface-2);
}

@layer ui{
/* ---------- Halaman ---------- */
html[data-theme] body.mc-body,html[data-theme] body.comic-landing{background:var(--bg)!important;background-image:radial-gradient(ellipse at 70% -20%,var(--ring),transparent 60%)!important;color:var(--text)!important}
html[data-theme] body :is(.mc-header,.mc-topbar,.nav,.docs-nav){background:color-mix(in srgb,var(--bg) 90%,transparent)!important;border-color:var(--line)!important;color:var(--text)!important;box-shadow:none!important}
html[data-theme] body .mc-topbar{display:flex;align-items:center;gap:12px}

/* ---------- Teks dasar: ikut tema, kecuali yang punya warna sendiri ---------- */
:where(html[data-theme] body :where(.mc-page,.mc-topbar,.mc-header,.mc-bottom-nav,.mc-admin-nav,.mc-modal-overlay,.docs-wrap,.docs-nav,.auth-wrapper,.nav,.hero,.features,.steps,.cta,.footer,.otp-admin,.rumahotp-admin-page,.promo-admin-page,.mc-chat-page,.mc-profile-header)
 :is(h1,h2,h3,h4,h5,h6,p,span,div,a,li,label,legend,summary,strong,b,em,td,th,dt,dd,code,small,button):not([style*="color"]):not(.mc-badge):not(.mc-status):not(.otp-status):not(.otp-pill):not(.mc-alert *):not(.mc-btn-primary):not(.mc-btn-success):not(.mc-btn-danger):not(.mc-btn-warning):not(.btn-gold):not(.docs-method):not(.mc-toast *)){color:var(--text)!important;text-shadow:none!important}
/* teks sekunder */
html[data-theme] body :is(small,.mc-label,.mc-stat-label,.mc-server-id,.mc-topbar-sub,.mc-profile-email,.mc-balance-label,.mc-banner-sub,.mc-chat-subtitle,.auth-sub,.section-sub,.docs-muted,.seo-help,.cfg-help,.cfg-note,.github-help,.brand-logo-help,.bc-reply-time,.mc-order-meta,.mc-avatar-modal-subtitle,.rumahotp-note,.rumahotp-label,.rumahotp-kicker,.otp-footnote,.otp-not-supported,.otp-overline,.otp-topup-title small,.otp-wallet>span,.otp-wallet small,.otp-provider-title span,.otp-summary span,.bal-meta,.mc-section-sub,.mc-receipt .label,.mc-country-header,.mc-chat-counter,.mc-chat-rule,.promo-info-chip,.seo-count,.seo-counter,.pending-section small,.quick-link small,.api-doc-button small,.mc-admin-entry-copy span,.mc-cs-card small,.account-key-label,.hero-copy>p,.feature p,.step p,.cta-box p,.docs-facts span,.docs-sidebar small,.docs-auth,.mini-head small,.mini-card small):not([style*="color"]){color:var(--text-2)!important}
html[data-theme] body :is(.mc-label,.rumahotp-label,.rumahotp-kicker,.otp-overline) i{color:var(--text-2)!important}

/* ---------- Permukaan ---------- */
html[data-theme] body :is(.mc-card,.mc-stat-card,.mc-pending-card,.mc-service-card,.mc-country-card,.mc-country-item,.mc-server-card,.mc-server-item,.mc-empty,.mc-profile-card,.auth-card,.mc-receipt,.mc-table-wrap,.mc-cs-card,.mc-chat-card,.mc-broadcast-card,.mc-notice,.quick-link,.api-doc-button,.mc-admin-entry,.support-link,.refresh-pending,.mc-order-item,.mc-order-sticky,.mc-balance-card,.mc-search,.cfg-card,.seo-card,.promo-slide-card,.promo-upload-card,.rumahotp-hero,.rumahotp-balance-card,.rumahotp-panel,.rumahotp-history-item,.otp-history-row,.docs-panel,.docs-endpoint,.docs-cover,.docs-sidebar,.docs-key,.docs-note,.docs-link-card,.key-hero,.reveal-card,.copy-box,.op-card,.mc-qr-box,.mc-otp-box,.mc-timer){background:var(--surface)!important;background-image:none!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;outline:none!important}
html[data-theme] body :is(.mc-service-icon,.mc-server-info,.mc-country-header,.mc-receipt-row,.otp-wallet,.rumahotp-invoice>div,.rumahotp-amount-input,.rumahotp-form-intro,.mc-amount-btn,.mc-tab,.docs-filters button,.random-key-note,.promo-dropzone,.promo-info-chip,.mc-avatar-picker){background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme] body :is(.mc-service-card,.mc-country-item,.mc-server-item,.quick-link,.api-doc-button,.mc-admin-entry,.mc-menu-item,.op-card,.mc-amount-btn):hover{border-color:var(--accent)!important}
html[data-theme] body :is(.op-card.active,.mc-amount-btn.active,.mc-tab.active,.docs-filters button.active,.rumahotp-quick-amounts button.active){background:var(--info-soft)!important;border-color:var(--accent)!important;color:var(--text)!important}
html[data-theme] body :is(.mc-table thead,.mc-table th){background:var(--surface-2)!important;color:var(--text)!important}
html[data-theme] body :is(.mc-table td,.mc-table th,.mc-receipt-row,.mc-divider,hr){border-color:var(--line)!important}

/* ---------- Hero beranda ---------- */
html[data-theme] body .mc-banner{background:var(--surface)!important;background-image:none!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
html[data-theme] body :is(.mc-banner-title,.mc-banner-sub){color:var(--text)!important}
html[data-theme] body .mc-banner-sub{color:var(--text-2)!important}
html[data-theme] body .hero-tag{background:var(--accent-btn)!important;color:var(--on-accent)!important;border:0!important}
html[data-theme] body .mc-banner-icons :is(i,span,a){color:var(--text)!important}
html[data-theme] body .sim-art,html[data-theme] body .mc-banner :is(.sim-art,.sim-art *){color:var(--surface-3)!important;opacity:1}
html[data-theme] body .mc-banner-link{background:var(--accent-btn)!important;color:var(--on-accent)!important;border:0!important}
html[data-theme] body .mc-banner-link *{color:var(--on-accent)!important}

/* ---------- Saldo / header ---------- */
html[data-theme] body .mc-balance-badge{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-theme] body :is(.mc-balance-amount,.bal-num,.bal-rp){color:var(--text)!important}
html[data-theme] body :is(.theme-switch,.comic-doc-link,.mc-back-btn){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-theme] body .mc-header-actions>a[title="Admin Dashboard"]{background:var(--warn-soft)!important;color:var(--warn)!important;border:1px solid var(--warn)!important}
html[data-theme] body .mc-header-actions>a[title="Admin Dashboard"] i{color:var(--warn)!important}

/* ---------- Navigasi bawah & admin ---------- */
html[data-theme] body .mc-bottom-nav{background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
html[data-theme] body :is(.mc-nav-item,.mc-admin-nav-item){background:transparent!important;color:var(--text-2)!important;border:1px solid transparent!important;box-shadow:none!important}
html[data-theme] body :is(.mc-nav-item,.mc-admin-nav-item) :is(span,i,div){color:inherit!important}
html[data-theme] body :is(.mc-nav-item.active,.mc-admin-nav-item.active){background:var(--info-soft)!important;color:var(--accent)!important;border-color:var(--line)!important}
html[data-theme] body .mc-nav-icon{background:transparent!important;color:inherit!important;border:0!important;box-shadow:none!important}
html[data-theme] body .mc-nav-item.active .mc-nav-icon{background:transparent!important}
html[data-theme] body .mc-nav-deposit .mc-nav-deposit-btn{background:var(--accent-btn)!important;color:var(--on-accent)!important;border:2px solid var(--surface)!important}
html[data-theme] body .mc-nav-deposit .mc-nav-deposit-btn i{color:var(--on-accent)!important}
html[data-theme] body .mc-nav-deposit{background:transparent!important}
html[data-theme] body .mc-nav-deposit span{color:var(--text-2)!important}
html[data-theme] body .mc-nav-deposit.active span{color:var(--accent)!important}
html[data-theme] body .mc-admin-nav{background:var(--bg)!important;border-bottom:1px solid var(--line)!important}

/* ---------- Tombol ---------- */
html[data-theme] body :is(.mc-btn,.btn,.docs-button,.mc-page-btn,.mc-topup-btn,.otp-reveal,.rumahotp-btn,.rumahotp-refresh-btn,.cfg-copy,.cfg-clear,.promo-upload-btn,.promo-save-btn,.promo-delete-btn,.oauth-btn,.balance-edit-btn,.toggle-user-btn){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important;text-shadow:none!important}
html[data-theme] body :is(.mc-btn,.btn,.docs-button,.mc-page-btn,.mc-topup-btn,.otp-reveal,.rumahotp-btn,.cfg-copy,.cfg-clear,.promo-upload-btn,.promo-save-btn,.promo-delete-btn,.oauth-btn,.balance-edit-btn,.toggle-user-btn) :is(i,span,svg,b,strong,small){color:inherit!important}
html[data-theme] body :is(.mc-btn-primary,.btn-gold,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-topup-btn,.promo-save-btn,.copy-btn,.landing-promo-cta,.user-promo-cta,.mc-page-btn.active,.mc-chat-send,.seo-save){background:var(--accent-btn)!important;color:var(--on-accent)!important;border:1px solid transparent!important}
html[data-theme] body :is(.mc-btn-primary,.btn-gold,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-topup-btn,.promo-save-btn,.copy-btn,.landing-promo-cta,.user-promo-cta,.mc-page-btn.active,.mc-chat-send,.seo-save) :is(i,span,svg,b,strong,small){color:var(--on-accent)!important}
html[data-theme] body .mc-btn-success{background:var(--ok-btn)!important;color:#fff!important;border:1px solid transparent!important}
html[data-theme] body .mc-btn-success :is(i,span,svg,b,strong){color:#fff!important}
html[data-theme] body :is(.mc-btn-danger,.promo-delete-btn){background:var(--bad-soft)!important;color:var(--bad)!important;border:1px solid var(--bad)!important}
html[data-theme] body :is(.mc-btn-danger,.promo-delete-btn) :is(i,span,svg){color:var(--bad)!important}
html[data-theme] body .mc-btn-warning{background:var(--warn-soft)!important;color:var(--warn)!important;border:1px solid var(--warn)!important}
html[data-theme] body .mc-btn-warning :is(i,span){color:var(--warn)!important}
html[data-theme] body .mc-btn-outline,html[data-theme] body .btn-dark,html[data-theme] body .docs-button.dark{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important}
html[data-theme] body :is(.mc-btn,.btn,button):disabled{opacity:.55!important;cursor:not-allowed}
html[data-theme] body .mc-btn:focus-visible,html[data-theme] body button:focus-visible,html[data-theme] body a:focus-visible{outline:3px solid var(--ring)!important;outline-offset:2px}

/* ---------- Form ---------- */
html[data-theme] body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select,.mc-input,.form-control,.seo-textarea,.promo-textarea,.mc-chat-input,.bc-reply-input,.mc-search input){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-theme] body :is(input,textarea)::placeholder{color:var(--text-2)!important;opacity:.85}
html[data-theme] body :is(input,textarea,select):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--ring)!important;outline:0}
html[data-theme] body select option{background:var(--surface)!important;color:var(--text)!important}
html[data-theme] body :is(.mc-input-icon>i,.mc-input-right,.mc-input-right i){color:var(--text-2)!important;background:transparent!important}
html[data-theme] body input[type=checkbox],html[data-theme] body input[type=radio]{accent-color:var(--accent-btn)}
html[data-theme] body input[type=file]{color:var(--text)!important;background:var(--surface-2)!important;border:1px dashed var(--line)!important}
html[data-theme] body .promo-toggle-track{background:var(--surface-3)!important;border:1px solid var(--line)!important}

/* ---------- Badge, status, alert ---------- */
html[data-theme] body :is(.mc-badge,.mc-badge-gray,.mc-status,.otp-pill,.cfg-tag,.live-badge,.bc-type-badge,.rumahotp-status){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;text-shadow:none!important}
html[data-theme] body :is(.mc-badge-green,.mc-status-completed,.mc-status-success,.mc-status-paid,.otp-status.up,.rumahotp-status.online,.rumahotp-status.on,.live-badge,.cfg-tag.ok,.cfg-tag.on){background:var(--ok-soft)!important;color:var(--ok)!important;border-color:transparent!important}
html[data-theme] body :is(.mc-badge-yellow,.mc-badge-orange,.mc-status-pending,.mc-status-waiting,.checking){background:var(--warn-soft)!important;color:var(--warn)!important;border-color:transparent!important}
html[data-theme] body :is(.mc-badge-red,.mc-status-cancelled,.mc-status-canceled,.mc-status-failed,.mc-status-expired,.otp-status.down,.rumahotp-status.offline){background:var(--bad-soft)!important;color:var(--bad)!important;border-color:transparent!important}
html[data-theme] body :is(.mc-badge-blue,.mc-status-processing){background:var(--info-soft)!important;color:var(--info)!important;border-color:transparent!important}
html[data-theme] body :is(.mc-badge,.mc-status,.otp-status,.otp-pill,.live-badge,.rumahotp-status) :is(i,span){color:inherit!important}
html[data-theme] body .mc-alert{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html[data-theme] body .mc-alert :is(i,span,strong,p,a,b){color:inherit!important}
html[data-theme] body .mc-alert-success{background:var(--ok-soft)!important;color:var(--ok)!important;border-color:var(--ok)!important}
html[data-theme] body .mc-alert-error{background:var(--bad-soft)!important;color:var(--bad)!important;border-color:var(--bad)!important}
html[data-theme] body :is(.mc-alert-warning,.verify-note,.reveal-warning){background:var(--warn-soft)!important;color:var(--warn)!important;border-color:var(--warn)!important}
html[data-theme] body :is(.verify-note,.reveal-warning) :is(i,span){color:inherit!important}
html[data-theme] body .mc-alert-info{background:var(--info-soft)!important;color:var(--info)!important;border-color:var(--info)!important}
html[data-theme] body .otp-status.up i,html[data-theme] body .otp-online-dot{background:var(--ok)}
html[data-theme] body .otp-status.down i{background:var(--bad)}

/* ---------- Icon: selalu ikut pasangan induknya ---------- */
html[data-theme] body :is(i.fas,i.far,i.fab,i.fa,i.fa-solid,i.fa-regular,i.fa-brands):not([style*="color"]){color:inherit!important}
html[data-theme] body :is(.mc-section-title,.mc-card-title,.otp-topup-title,.rumahotp-panel-title,.seo-card-title,.cfg-url-title)>i{color:var(--accent)!important}
html[data-theme] body :is(.mc-balance-label,.mc-notice,.api-doc-button,.quick-link,.mc-order-top,.mc-chat-image-button,.mc-chat-profile-link-avatar) i:not([style*="color"]){color:var(--text)!important}
html[data-theme] body .api-doc-button>i:first-child{color:var(--accent)!important}
html[data-theme] body :is(.mc-stat-icon,.mc-service-icon,.mc-server-icon,.mc-pending-icon,.mc-cs-icon,.quick-icon,.otp-provider-icon,.rumahotp-balance-icon,.rumahotp-history-icon,.mc-toggle-icon,.promo-upload-icon,.promo-drop-icon,.feature-icon,.op-card-icon){background:var(--info-soft)!important;color:var(--info)!important;border:0!important;box-shadow:none!important}
html[data-theme] body :is(.mc-stat-icon,.mc-service-icon,.mc-server-icon,.mc-pending-icon,.mc-cs-icon,.quick-icon,.otp-provider-icon,.rumahotp-balance-icon,.rumahotp-history-icon,.mc-toggle-icon,.promo-upload-icon,.promo-drop-icon,.feature-icon,.op-card-icon) :is(i,svg){color:inherit!important}
html[data-theme] body .mc-stat-icon.green{background:var(--ok-soft)!important;color:var(--ok)!important}
html[data-theme] body .mc-stat-icon.orange{background:var(--orange-soft)!important;color:var(--orange)!important}
html[data-theme] body .mc-stat-icon.purple{background:var(--purple-soft)!important;color:var(--purple)!important}
html[data-theme] body .mc-stat-icon.blue{background:var(--info-soft)!important;color:var(--info)!important}
html[data-theme] body .mc-empty>i,html[data-theme] body .mc-chat-empty>i{color:var(--text-2)!important}
html[data-theme] body .mc-logo-icon,html[data-theme] body .brand-logo,html[data-theme] body .mini-logo{background:var(--accent-btn)!important;color:var(--on-accent)!important;border:0!important;box-shadow:none!important}
html[data-theme] body .mc-logo-icon i{color:var(--on-accent)!important}
html[data-theme] body :is(.quick-link>i:last-child,.api-doc-button>i:last-child,.mc-admin-entry-arrow,.mc-menu-item-arrow){color:var(--text-2)!important}

/* ---------- Profil ---------- */
html[data-theme] body .mc-profile-header{background:linear-gradient(180deg,var(--surface-2),var(--bg))!important;background-image:linear-gradient(180deg,var(--surface-2),var(--bg))!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important}
html[data-theme] body :is(.mc-profile-name){color:var(--text)!important}
html[data-theme] body .mc-avatar,html[data-theme] body .mc-avatar-profile,html[data-theme] body .mc-avatar-preview{background:var(--surface-3)!important;color:var(--text)!important;border:3px solid var(--accent)!important;box-shadow:var(--shadow)!important}
html[data-theme] body .mc-avatar :is(i,.mc-avatar-fallback){color:var(--text)!important}
html[data-theme] body :is(.mc-avatar-edit,.mc-avatar-preview-camera){background:var(--accent-btn)!important;color:var(--on-accent)!important;border:2px solid var(--bg)!important}
html[data-theme] body :is(.mc-avatar-edit,.mc-avatar-preview-camera) i{color:var(--on-accent)!important}
html[data-theme] body .mc-menu-item{background:transparent!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
html[data-theme] body .mc-menu-item:last-child{border-bottom:0!important}
html[data-theme] body .mc-menu-item:hover{background:var(--surface-2)!important}
html[data-theme] body .mc-menu-item>span:not([style*="color"]){color:var(--text)!important}
html[data-theme] body .mc-menu-item>i:first-child{background:var(--info-soft)!important;color:var(--info)!important;border:0!important}
html[data-theme] body .mc-menu-item.danger,html[data-theme] body .mc-menu-item.danger>span{color:var(--bad)!important}
html[data-theme] body .mc-menu-item.danger>i:first-child{background:var(--bad-soft)!important;color:var(--bad)!important}
html[data-theme] body .mc-admin-entry{background:var(--warn-soft)!important;border:1px solid var(--warn)!important}
html[data-theme] body .mc-admin-entry-icon{background:var(--surface)!important;color:var(--warn)!important;border:1px solid var(--warn)!important}
html[data-theme] body .mc-admin-entry-icon i{color:var(--warn)!important}
html[data-theme] body .mc-admin-entry-copy strong{color:var(--warn)!important}
html[data-theme] body .mc-admin-entry-copy span{color:var(--text)!important}

/* ---------- Modal ---------- */
html[data-theme] body .mc-modal-overlay{background:var(--overlay)!important}
html[data-theme] body :is(.mc-modal,.otp-modal,.mc-chat-lightbox-card){background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important}
html[data-theme] body .mc-modal-handle{background:var(--line)!important}
html[data-theme] body :is(.mc-modal-close,.otp-modal-close,.mc-chat-lightbox-close){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important}
html[data-theme] body .otp-modal-backdrop{background:var(--overlay)!important}

/* ---------- Caption di atas foto banner (selalu putih di atas overlay gelap) ---------- */
html[data-theme] body :is(.user-promo-overlay,.landing-promo-overlay) :is(strong,span,b,p,i,small){color:var(--on-photo)!important;text-shadow:0 2px 8px rgba(0,0,0,.7)!important}
html[data-theme] body :is(.user-promo-arrow,.landing-promo-arrow){background:rgba(0,0,0,.55)!important;color:var(--on-photo)!important;border:1px solid rgba(255,255,255,.6)!important}
html[data-theme] body :is(.user-promo-arrow,.landing-promo-arrow) i{color:var(--on-photo)!important}

/* ---------- Tautan & kode ---------- */
html[data-theme] body :is(.mc-page,.docs-wrap) a:not([class]){color:var(--accent)!important;text-decoration:underline}
html[data-theme] body :is(code,pre,.docs-code,.copy-box code){background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme] body .copy-box{background:var(--surface-2)!important}
html[data-theme] body .rumahotp-qr-image,html[data-theme] body #otpDepositQr img,html[data-theme] body .mc-qr-box img{background:#fff!important}

/* ---------- Skeleton & garis ---------- */
html[data-theme] body .mc-skeleton{background:linear-gradient(95deg,var(--surface-2),var(--surface-3),var(--surface-2))!important;background-size:220% 100%!important}

/* ---------- Permukaan terbalik (tombol/label berwarna): teks + icon selalu kontras ---------- */
html[data-theme] body :is(.mc-btn-primary,.btn-gold,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-topup-btn,.promo-save-btn,.copy-btn,.landing-promo-cta,.user-promo-cta,.mc-page-btn.active,.mc-chat-send,.seo-save,.hero-tag,.mc-banner-link,.mc-nav-deposit-btn,.mc-avatar-edit,.mc-avatar-preview-camera,.mc-logo-icon,.brand-logo,.mini-logo,.docs-count,.docs-expand.on),
html[data-theme] body :is(.mc-btn-primary,.btn-gold,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-topup-btn,.promo-save-btn,.copy-btn,.landing-promo-cta,.user-promo-cta,.mc-page-btn.active,.mc-chat-send,.seo-save,.hero-tag,.mc-banner-link,.mc-nav-deposit-btn,.mc-avatar-edit,.mc-avatar-preview-camera,.mc-logo-icon,.brand-logo,.mini-logo,.docs-count) *{background-color:transparent;color:var(--on-accent)!important;text-shadow:none!important}
html[data-theme] body :is(.mc-btn-primary,.btn-gold,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-topup-btn,.promo-save-btn,.copy-btn,.landing-promo-cta,.user-promo-cta,.mc-page-btn.active,.mc-chat-send,.seo-save,.hero-tag,.mc-banner-link,.docs-count){background:var(--accent-btn)!important;background-image:none!important;border-color:transparent!important}
html[data-theme] body :is(.mc-btn-success,.mc-btn-success *){color:#fff!important}
html[data-theme] body :is(.github-badge,.docs-method,.docs-method.post,.preview-label,.eyebrow,.section-kicker,.docs-kicker,.docs-label){background:var(--info-soft)!important;color:var(--info)!important;border:1px solid transparent!important;text-shadow:none!important}
html[data-theme] body :is(.github-badge,.docs-method,.preview-label,.eyebrow,.section-kicker,.docs-kicker,.docs-label) *{color:inherit!important}
html[data-theme] body .docs-method.post{background:var(--ok-soft)!important;color:var(--ok)!important}
html[data-theme] body :is(.docs-cover em,.docs-cover h1 em,.hero h1 span,.hero h1 em){background:transparent!important;color:var(--accent)!important}
html[data-theme] body :is(.docs-cover-art,.docs-cover-art *){background:var(--surface-2)!important;color:var(--text)!important}
html[data-theme] body :is(.cfg-note,.github-note,.seo-help,.cfg-help,.mc-chat-live,.mc-chat-counter,.github-failure){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important}
html[data-theme] body :is(.cfg-note,.github-note,.mc-chat-live,.github-failure) :is(*){color:inherit!important}
html[data-theme] body :is(.cfg-note,.github-note) a{color:var(--accent)!important;text-decoration:underline}
html[data-theme] body :is(.cfg-note,.github-note,.mc-chat-live) code{background:var(--surface-3)!important}

/* ---------- Kartu API Key (akun) ---------- */
html[data-theme] body .akey{padding:18px!important;margin:0 0 16px!important}
html[data-theme] body .akey-head{display:flex;align-items:center;gap:12px}
html[data-theme] body .akey-ico{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:14px;background:var(--info-soft)!important;color:var(--info)!important;font-size:18px}
html[data-theme] body .akey-ico i{color:inherit!important}
html[data-theme] body .akey-title{min-width:0;flex:1}
html[data-theme] body .akey-title small{display:block;font-size:10px;letter-spacing:1.4px;font-weight:900;color:var(--text-2)!important}
html[data-theme] body .akey-title h2{margin:2px 0 0!important;font-size:18px!important;line-height:1.2;color:var(--text)!important}
html[data-theme] body .akey-state{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap;background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)}
html[data-theme] body .akey-state i{font-size:7px;color:inherit!important}
html[data-theme] body .akey-state b{color:inherit!important;font-weight:900}
html[data-theme] body .akey-state[data-state=active]{background:var(--ok-soft)!important;color:var(--ok)!important;border-color:transparent}
html[data-theme] body .akey-state[data-state=legacy]{background:var(--warn-soft)!important;color:var(--warn)!important;border-color:transparent}
html[data-theme] body .akey-state[data-state=error]{background:var(--bad-soft)!important;color:var(--bad)!important;border-color:transparent}
html[data-theme] body .akey-msg{margin:12px 0!important;font-size:12.5px;line-height:1.6;color:var(--text-2)!important}
html[data-theme] body .akey-label{display:block;margin:0 0 7px;font-size:11px;font-weight:800;color:var(--text-2)!important}
html[data-theme] body .akey-field{display:flex;gap:8px;align-items:stretch}
html[data-theme] body .akey-field input{flex:1;min-width:0;padding:12px 13px!important;border-radius:12px!important;font:700 14px ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.5px}
html[data-theme] body .akey-eye{width:46px;flex:0 0 46px;border-radius:12px!important;display:grid;place-items:center;background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;cursor:pointer}
html[data-theme] body .akey-eye i{color:inherit!important}
html[data-theme] body .akey-value small{display:block;margin-top:8px;font-size:11.5px;line-height:1.55;color:var(--text-2)!important}
html[data-theme] body .akey-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
html[data-theme] body .akey-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 12px;border-radius:13px!important;font-size:13px;font-weight:800;text-decoration:none!important;cursor:pointer;background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important;transition:transform .15s ease,border-color .15s ease}
html[data-theme] body .akey-btn:hover{border-color:var(--accent)!important}
html[data-theme] body .akey-btn:active{transform:scale(.97)}
html[data-theme] body .akey-btn[hidden]{display:none!important}
html[data-theme] body .akey-btn i,html[data-theme] body .akey-btn span{color:inherit!important}
html[data-theme] body .akey-btn.is-primary{background:var(--accent-btn)!important;color:var(--on-accent)!important;border-color:transparent!important}
html[data-theme] body .akey-btn.is-primary :is(i,span){color:var(--on-accent)!important}
@media(max-width:380px){html[data-theme] body .akey-actions{grid-template-columns:1fr}}

/* ---------- Misc perbaikan hasil audit ---------- */
html[data-theme] body :is(.promo-slide-number){background:var(--surface-3)!important;color:var(--text)!important}
html[data-theme] body :is(.promo-slide-state){background:var(--surface-2)!important;color:var(--text-2)!important}
html[data-theme] body :is(.promo-slide-state.on){background:var(--ok-soft)!important;color:var(--ok)!important}
html[data-theme] body :is(.step b,.step>span.num,.step-num,.step .num){background:var(--accent-btn)!important;color:var(--on-accent)!important;border:0!important}
html[data-theme] body :is(.account-key-card button,#retrySavedKey){background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* ---------- Pengaturan Admin ---------- */
html[data-theme] body .mc-admin-nav-inner{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html[data-theme] body .mc-admin-nav-inner::-webkit-scrollbar{display:none}
html[data-theme] body .mc-admin-nav-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px!important;font-size:12.5px;font-weight:800;white-space:nowrap;text-decoration:none!important}
html[data-theme] body .mc-admin-nav-item:hover{background:var(--surface-2)!important}
html[data-theme] body .adm-page{max-width:760px;padding-bottom:110px!important}
html[data-theme] body .adm-hero{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
html[data-theme] body .adm-hero-ico{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;font-size:22px;background:var(--accent-btn)!important;color:var(--on-accent)!important}
html[data-theme] body .adm-hero-ico i{color:inherit!important}
html[data-theme] body .adm-hero h1{margin:0 0 3px!important;font-size:24px!important;line-height:1.15;color:var(--text)!important}
html[data-theme] body .adm-hero p{margin:0!important;font-size:13px;line-height:1.5;color:var(--text-2)!important}
html[data-theme] body .adm-links{display:grid;gap:10px;margin-bottom:16px}
html[data-theme] body .adm-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;text-decoration:none!important;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;transition:border-color .15s ease,transform .15s ease}
html[data-theme] body .adm-link:hover{border-color:var(--accent)!important}
html[data-theme] body .adm-link:active{transform:scale(.985)}
html[data-theme] body .adm-link-ico,html[data-theme] body .adm-ico{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;font-size:17px;background:var(--info-soft)!important;color:var(--info)!important}
html[data-theme] body .adm-link-ico i,html[data-theme] body .adm-ico i{color:inherit!important}
html[data-theme] body .adm-link-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html[data-theme] body .adm-link-copy strong{font-size:14px;color:var(--text)!important}
html[data-theme] body .adm-link-copy small{font-size:12px;color:var(--text-2)!important}
html[data-theme] body .adm-link>i:last-child{color:var(--text-2)!important}
html[data-theme] body .adm-chips{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 0;margin:0 0 6px;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px)}
html[data-theme] body .adm-chips::-webkit-scrollbar{display:none}
html[data-theme] body .adm-chips a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:800;text-decoration:none!important;background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line)!important}
html[data-theme] body .adm-chips a i{color:var(--accent)!important}
html[data-theme] body .adm-chips a:hover{border-color:var(--accent)!important}
html[data-theme] body .adm-form{display:grid;gap:14px}
html[data-theme] body .adm-card{padding:18px!important;margin:0!important;scroll-margin-top:64px}
html[data-theme] body .adm-card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
html[data-theme] body .adm-card-head>div{flex:1;min-width:0}
html[data-theme] body .adm-card-head h2{margin:0!important;font-size:17px!important;color:var(--text)!important}
html[data-theme] body .adm-card-head p{margin:2px 0 0!important;font-size:12.5px;line-height:1.45;color:var(--text-2)!important}
html[data-theme] body .adm-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}
html[data-theme] body .adm-pill i{color:inherit!important}
html[data-theme] body .adm-pill.ok{background:var(--ok-soft)!important;color:var(--ok)!important}
html[data-theme] body .adm-pill.warn{background:var(--warn-soft)!important;color:var(--warn)!important}
html[data-theme] body .adm-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
@media(max-width:520px){html[data-theme] body .adm-grid-2{grid-template-columns:1fr}}
html[data-theme] body .adm-form .mc-input-group{margin-bottom:14px}
html[data-theme] body .adm-form .mc-label{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:12.5px;font-weight:800}
html[data-theme] body .adm-form .mc-input{width:100%;min-height:46px;padding:11px 13px;border-radius:12px!important}
html[data-theme] body .adm-help{margin:7px 0 0!important;font-size:12px;line-height:1.55;color:var(--text-2)!important}
html[data-theme] body .adm-help a{color:var(--accent)!important;text-decoration:underline}
html[data-theme] body .adm-help i{color:inherit!important}
html[data-theme] body .mc-input-wrap{position:relative;display:block}
html[data-theme] body .mc-input-wrap .mc-input{padding-right:48px}
html[data-theme] body .adm-eye{position:absolute;right:4px;top:4px;bottom:4px;width:40px;display:grid;place-items:center;border:0!important;border-radius:9px;background:transparent!important;color:var(--text-2)!important;cursor:pointer}
html[data-theme] body .adm-eye:hover{background:var(--surface-3)!important;color:var(--text)!important}
html[data-theme] body .adm-eye i{color:inherit!important}
html[data-theme] body .adm-check{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13px;font-weight:700;cursor:pointer;color:var(--text)!important}
html[data-theme] body .adm-check.adm-danger{color:var(--bad)!important}
html[data-theme] body .adm-check.adm-danger span,html[data-theme] body .adm-check.adm-danger i{color:var(--bad)!important}
html[data-theme] body .adm-switch{display:flex;align-items:center;gap:14px;cursor:pointer;padding:12px 14px;border-radius:14px;background:var(--surface-2)!important;border:1px solid var(--line)}
html[data-theme] body .adm-switch-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html[data-theme] body .adm-switch-copy strong{font-size:14px;color:var(--text)!important}
html[data-theme] body .adm-switch-copy small{font-size:12px;line-height:1.5;color:var(--text-2)!important}
html[data-theme] body .adm-switch input{position:absolute;opacity:0;pointer-events:none}
html[data-theme] body .adm-switch-ui{position:relative;flex:0 0 50px;width:50px;height:30px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);transition:background .2s ease}
html[data-theme] body .adm-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text-2);transition:transform .2s ease,background .2s ease}
html[data-theme] body .adm-switch input:checked~.adm-switch-ui{background:var(--accent-btn);border-color:transparent}
html[data-theme] body .adm-switch input:checked~.adm-switch-ui::after{transform:translateX(20px);background:#fff}
html[data-theme] body .adm-switch input:focus-visible~.adm-switch-ui{outline:3px solid var(--ring);outline-offset:2px}
html[data-theme] body .adm-open{margin-top:12px;text-decoration:none!important;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px}
html[data-theme] body .adm-savebar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 10px 10px 16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border:1px solid var(--line)!important;box-shadow:0 12px 40px rgba(0,0,0,.25)!important;backdrop-filter:blur(14px)}
html[data-theme] body .adm-savebar>span{font-size:12px;color:var(--text-2)!important;line-height:1.4}
html[data-theme] body .adm-savebar>span i{color:inherit!important}
html[data-theme] body .adm-save{flex:0 0 auto;min-height:46px;padding:0 20px!important;font-weight:900;border-radius:13px!important}
@media(max-width:440px){html[data-theme] body .adm-savebar>span{display:none}html[data-theme] body .adm-save{width:100%}}
html[data-theme] body :is(.brand-logo-upload-row,.brand-logo-upload-info){color:var(--text)!important}
html[data-theme] body .brand-logo-upload-row{display:flex;gap:14px;align-items:flex-start}
html[data-theme] body .brand-logo-preview{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;border-radius:16px;overflow:hidden;background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important}
html[data-theme] body .brand-logo-preview img{width:100%;height:100%;object-fit:contain}
html[data-theme] body .brand-logo-preview i{color:var(--text)!important;font-size:24px}
html[data-theme] body .brand-logo-help,html[data-theme] body .brand-favicon-source{margin-top:7px;font-size:12px;line-height:1.55;color:var(--text-2)!important}
html[data-theme] body .brand-logo-remove{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13px;font-weight:700;color:var(--bad)!important;cursor:pointer}
html[data-theme] body .brand-logo-remove span,html[data-theme] body .brand-logo-remove i{color:var(--bad)!important}
html[data-theme] body .brand-logo-upload-info{flex:1;min-width:0}

html[data-theme] body .adm-page{display:flex!important;flex-direction:column;gap:14px}
html[data-theme] body .adm-page>*{margin:0!important}
html[data-theme] body .adm-chips{top:58px;margin:0!important;padding:8px 0}
html[data-theme] body .adm-form{margin:0!important}
html[data-theme] body .adm-hero{margin:0!important}
html[data-theme] body .adm-card{scroll-margin-top:120px}

html[data-theme] body .key-page{display:flex!important;flex-direction:column;gap:14px;padding-top:16px!important}
html[data-theme] body .key-page>*{margin:0!important}
html[data-theme] body :is(.mc-topbar){padding:12px 16px!important}
html[data-theme] body .mc-topbar-title{font-size:17px;font-weight:900;color:var(--text)!important}
html[data-theme] body .key-hero-icon{background:var(--warn-soft)!important;color:var(--warn)!important}
html[data-theme] body .key-hero-icon i{color:inherit!important}
html[data-theme] body .key-hero-copy>span{color:var(--text-2)!important}
html[data-theme] body .key-status{background:var(--surface-2)!important;color:var(--text-2)!important}
html[data-theme] body .key-status.on{background:var(--ok-soft)!important;color:var(--ok)!important}
html[data-theme] body .key-status i{color:inherit!important}
html[data-theme] body .section-head>div:first-child{background:var(--info-soft)!important;color:var(--info)!important}
html[data-theme] body .section-head>div:first-child i{color:inherit!important}
html[data-theme] body .active-key-card .active-row>i{color:var(--ok)!important}
html[data-theme] body .active-row span{color:var(--ok)!important}
}