/* NOIR BLUE — single permanent dark theme. The UI layer intentionally overrides
   the prior design layer, including older !important properties. */
html,html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#050814;
  --surface:#0c1528;
  --surface-2:#12213b;
  --surface-3:#1a3154;
  --text:#f4f8ff;
  --text-2:#afc3e1;
  --line:#294367;
  --accent:#89baff;
  --accent-btn:#2563eb;
  --on-accent:#ffffff;
  --ring:rgba(61,131,255,.22);
  --info:#89baff;
  --info-soft:#162d52;
  --purple:#b9cbff;
  --purple-soft:#19264b;
  --orange:#f5be80;
  --orange-soft:#39291b;
  --shadow:0 16px 42px rgba(0,0,0,.42);
  --overlay:rgba(2,5,14,.82);
  --ink:var(--text);
  --muted:var(--text-2);
  --canvas:var(--bg);
  --canvas2:var(--surface-2);
  --elevated:var(--surface-2);
  --stroke:var(--line);
  --theme-text:var(--text);
  --theme-subtext:var(--text-2);
  --theme-button:var(--accent-btn);
  --theme-button-ink:var(--on-accent);
  --theme-icon:var(--text);
  --theme-icon-secondary:var(--text-2);
  --theme-icon-surface:var(--surface-2);
  --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-blue:var(--accent);
  --mc-shadow:var(--shadow);
  scrollbar-color:#2b4773 #080d1a;
}
@layer ui {
html[data-theme] body.mc-body,
html[data-theme] body.comic-landing {
  background-color:var(--bg)!important;
  background-image:radial-gradient(ellipse 74% 48% at 100% -8%,rgba(18,77,187,.22),transparent 70%),radial-gradient(ellipse 65% 50% at -15% 58%,rgba(12,44,118,.14),transparent 75%),linear-gradient(145deg,#050814,#070e1e 66%,#050814)!important;
  color:var(--text)!important;
}
html[data-theme] body :is(.mc-header,.nav,.docs-nav) {
  background:rgba(5,10,24,.91)!important;
  border-bottom:1px solid rgba(72,128,211,.30)!important;
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 7px 30px rgba(0,0,0,.20)!important;
}
html[data-theme] body :is(.mc-bottom-nav,.mc-admin-nav,.docs-sidebar,.adm-savebar,.mc-order-sticky) {
  background:rgba(10,19,38,.96)!important;
  border-color:var(--line)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme] body :is(.mc-card,.mc-stat-card,.mc-service-card,.mc-server-card,.mc-country-card,.mc-profile-card,.mc-balance-card,.auth-card,.mc-receipt,.mc-empty,.mc-pending-card,.mc-chat-card,.mc-broadcast-card,.otp-provider-card,.otp-wallet,.otp-summary>.mc-card,.otp-topup-area,.adm-card,.adm-link,.mc-admin-entry,.mc-notice,.quick-link,.api-doc-button,.docs-panel,.docs-cover,.docs-endpoint,.docs-key,.docs-note,.docs-table-wrap,.docs-facts,.reveal-card,.copy-box,.key-hero,.mc-table-wrap,.landing-promo-shell,.feature,.step,.phone,.mini-card,.balance-card,.cta-box,.rumahotp-panel,.rumahotp-hero) {
  color:var(--text)!important;
  background:linear-gradient(155deg,rgba(17,35,66,.98),rgba(9,17,33,.99))!important;
  border:1px solid var(--line)!important;
  box-shadow:inset 0 1px 0 rgba(156,191,255,.055),0 10px 26px rgba(0,0,0,.20)!important;
}
html[data-theme] body :is(.mc-banner,.hero) {
  color:var(--text)!important;
  background:radial-gradient(ellipse at 80% 5%,rgba(37,99,235,.20),transparent 65%),linear-gradient(138deg,#0b1932,#091122)!important;
  border-color:var(--line)!important;
  box-shadow:0 16px 50px rgba(0,0,0,.29)!important;
}
html[data-theme] body :is(.mc-banner-title,.mc-logo-text,.mc-section-title,.adm-hero h1,.otp-heading h1,.hero h1,.docs-cover h1,.auth-title) {color:#f7fbff!important; text-shadow:none!important}
html[data-theme] body :is(.mc-banner-sub,.section-sub,.adm-hero p,.adm-help,.otp-footnote,.docs-muted,.docs-panel>p,.docs-sidebar>p,.feature p,.step p,.hero-copy>p,.mc-server-id,.mc-label,.mc-stat-label,.mc-empty p) {color:var(--text-2)!important}
html[data-theme] body :is(.mc-card,.mc-page,.docs-wrap,.docs-nav,.mc-admin-nav,.mc-bottom-nav,.nav,.hero) :is(i.fas,i.far,i.fab,i.fa-solid,i.fa-regular,i.fa-brands) {color:inherit!important}
html[data-theme] body :is(.mc-nav-icon,.mc-service-icon,.mc-server-icon,.mc-stat-icon,.mc-pending-icon,.otp-provider-icon,.feature-icon,.quick-icon,.adm-ico,.adm-hero-ico,.mc-logo-icon,.brand-logo,.mini-logo,.brand-logo-preview) {
  color:var(--accent)!important;
  background:linear-gradient(145deg,#193763,#112340)!important;
  border:1px solid rgba(113,170,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(137,186,255,.07)!important;
}
html[data-theme] body :is(.mc-nav-icon,.mc-service-icon,.mc-server-icon,.mc-stat-icon,.mc-pending-icon,.otp-provider-icon,.feature-icon,.quick-icon,.adm-ico,.adm-hero-ico,.mc-logo-icon,.brand-logo,.mini-logo,.brand-logo-preview) i {color:var(--accent)!important}
html[data-theme] body :is(.mc-nav-item.active,.mc-admin-nav-item.active,.docs-filters button.active,.mc-tab.active,.op-card.active,.mc-amount-btn.active) {
  color:#eaf3ff!important;
  background:rgba(37,99,235,.23)!important;
  border-color:rgba(125,177,255,.35)!important;
  box-shadow:inset 0 0 0 1px rgba(108,159,255,.10)!important;
}
html[data-theme] body :is(.mc-nav-item.active,.mc-admin-nav-item.active) i {color:var(--accent)!important}
html[data-theme] body :is(.mc-input,.mc-select,input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select,.docs-search input,.docs-params input,.docs-key input) {
  color:var(--text)!important;
  background-color:#0a1529!important;
  border-color:#38557c!important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.12)!important;
}
html[data-theme] body :is(input,textarea)::placeholder{color:#8ea7cc!important;opacity:1}
html[data-theme] body :is(input,textarea,select,.mc-input):focus-visible {outline:2px solid var(--accent)!important;outline-offset:1px!important;border-color:var(--accent)!important}
html[data-theme] body select option{background:#0c1528!important;color:var(--text)!important}
html[data-theme] body :is(.mc-btn-primary,.mc-btn-success,.btn-gold,.mc-topup-btn,.mc-nav-deposit-btn,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-banner-link,.landing-promo-cta,.user-promo-cta,.adm-save) {
  color:#fff!important;
  background:linear-gradient(135deg,#3279ff,#1749ba)!important;
  border:1px solid #548dff!important;
  box-shadow:0 7px 20px rgba(24,85,211,.28),inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:none!important;
}
html[data-theme] body :is(.mc-btn-primary,.mc-btn-success,.btn-gold,.mc-topup-btn,.mc-nav-deposit-btn,.docs-button:not(.dark),.docs-send,.otp-create,.rumahotp-create-btn,.mc-banner-link,.landing-promo-cta,.user-promo-cta,.adm-save) :is(i,span,b,strong,small) {color:#fff!important}
html[data-theme] body :is(.mc-btn-outline,.btn-dark,.docs-button.dark,.otp-reveal,.rumahotp-refresh-btn,.adm-eye,.docs-filters button,.docs-code-tabs button,.mc-tab,.mc-amount-btn,.theme-switch,.mc-back-btn) {
  background:#122441!important;color:var(--text)!important;border:1px solid #37547f!important;
}
html[data-theme] body :is(.mc-btn-outline,.btn-dark,.docs-button.dark,.otp-reveal,.rumahotp-refresh-btn,.adm-eye,.docs-filters button,.docs-code-tabs button,.mc-tab,.mc-amount-btn,.mc-back-btn) i {color:inherit!important}
html[data-theme] body :is(.mc-btn,.btn,.docs-button,.quick-link,.mc-service-card,.mc-country-card,.mc-server-card,.mc-admin-entry,.otp-provider-card,.adm-link,.mc-admin-nav-item,.mc-nav-item,.mc-input,.docs-endpoint,.feature,.step) {
  transition:transform .27s cubic-bezier(.2,.9,.3,1), box-shadow .27s ease, background-color .25s ease, border-color .25s ease, color .25s ease!important;
}
html[data-theme] body :is(.mc-btn,.btn,.docs-button,.mc-nav-item,.mc-admin-nav-item,.adm-link,.quick-link,.mc-service-card,.mc-country-card,.mc-server-card,.feature,.step,.otp-provider-card,.docs-endpoint):focus-visible {outline:2px solid var(--accent)!important;outline-offset:3px!important}
html[data-theme] body :is(.mc-alert,.mc-notice,.otp-status,.otp-pill,.mc-status,.docs-request-status,.adm-pill) {border-color:var(--line)!important;color:var(--text)!important}
html[data-theme] body :is(.mc-balance-badge,.mc-balance-card,.otp-history-row,.mc-table thead,.mc-receipt-row,.docs-code,.docs-live-response,.otp-config-form,.mc-order-sticky) {background:#111f38!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme] body :is(.docs-code,.docs-code code,.docs-code pre,.docs-response-example code,.mc-receipt-row code) {color:#b6d7ff!important;background:#071126!important}
html[data-theme] body :is(.docs-kicker,.docs-label,.eyebrow,.section-kicker,.hero h1 span,.docs-cover h1 em,.docs-facts b,.docs-section-head .docs-count) {color:var(--accent)!important}
html[data-theme] body :is(.hero-tag,.eyebrow,.docs-label,.preview-label,.section-kicker) {background:rgba(39,101,227,.14)!important;border-color:rgba(93,153,255,.35)!important;color:var(--accent)!important}
html[data-theme] body :is(.docs-method,.docs-auth,.docs-count,.docs-note,.docs-kicker) {border-color:var(--line)!important}
html[data-theme] body :is(.docs-sidebar a,.docs-footer a,.adm-link-copy strong,.mc-logo,.brand,.feature h3,.step h3,.mc-table td,.mc-table th,.mc-receipt-row,.otp-provider-title strong) {color:var(--text)!important}
html[data-theme] body :is(.mc-chat-input,.mc-chat-composer,.mc-input-wrap,.docs-key>div,.otp-key-line){background:transparent!important}
html[data-theme] body :is(.landing-promo-overlay,.user-promo-overlay) :is(span,strong,small,i) {color:#fff!important;text-shadow:0 2px 6px #000!important}
html[data-theme] body :is(.landing-promo-shell,.mc-card,.otp-provider-card,.mc-banner,.docs-cover,.hero,.mc-balance-card,.auth-card,.cta-box){position:relative}
html[data-theme] body :is(.adm-savebar,.mc-order-sticky){box-shadow:0 8px 40px rgba(0,0,0,.55)!important}
html[data-theme] body a[href="/admin/setting-otp"]>.mc-card {background:linear-gradient(118deg,#0e2752,#091a32)!important;border:1px solid #487cc5!important}
html[data-theme] body a[href="/admin/setting-otp"]>.mc-card [style*="linear-gradient"]{background:linear-gradient(135deg,#438dff,#2254bf)!important;color:#fff!important;box-shadow:0 6px 16px rgba(37,99,235,.28)!important}
html[data-theme] body a[href="/admin/setting-otp"]>.mc-card :is(i,strong){color:#eaf3ff!important}
html[data-theme] body :is(.rumahotp-quick-amounts button.active,.rumahotp-quick-amounts button:hover){background:#2563eb!important;color:#fff!important;border-color:#6ba6ff!important;box-shadow:none!important}
html[data-theme] body :is(.promo-dropzone,.brand-logo-upload-row,.mc-profile-card,.mc-empty){background:#101c32!important;color:var(--text)!important}
html[data-theme] body :is(.mc-logo-icon,.brand-logo) img{object-fit:contain}
/* Decorative dynamics: subtle lighting, not distracting from checkout or reading. */
html[data-theme] body .mc-banner::after {content:"";position:absolute;z-index:0;right:-12%;top:-48%;width:56%;height:165%;background:radial-gradient(ellipse,rgba(52,124,255,.17),transparent 70%);pointer-events:none;animation:noirAura 9s ease-in-out infinite alternate}
html[data-theme] body :is(.mc-banner,.hero) > *{position:relative;z-index:1}
html[data-theme] body .otp-status.up > i {animation:noirStatus 2.5s ease-in-out infinite}
html[data-theme] body .mc-skeleton {background:linear-gradient(95deg,#10203c,#254672,#10203c)!important;background-size:240% 100%!important;animation:noirSkeleton 2.1s linear infinite!important}
html[data-theme] body .mc-btn-primary:not(:disabled):hover,html[data-theme] body .btn-gold:hover,html[data-theme] body .docs-send:hover {background:linear-gradient(135deg,#4789ff,#205bdb)!important;box-shadow:0 10px 26px rgba(37,99,235,.39)!important}
@media (hover:hover) and (pointer:fine){
 html[data-theme] body :is(.mc-card,.otp-provider-card,.quick-link,.mc-service-card,.mc-server-card,.mc-country-card,.adm-link,.feature,.step):hover {border-color:#5a8cde!important;box-shadow:0 15px 32px rgba(0,0,0,.30),0 0 0 1px rgba(84,147,255,.10)!important}
 html[data-theme] body :is(.quick-link,.mc-service-card,.mc-server-card,.mc-country-card,.adm-link,.feature,.step):hover{transform:translateY(-4px)}
 html[data-theme] body :is(.mc-btn,.btn,.docs-button,.otp-create):not(:disabled):hover{transform:translateY(-2px)}
 html[data-theme] body :is(.mc-nav-item,.mc-admin-nav-item):hover{color:var(--accent)!important;background:rgba(37,99,235,.14)!important}
}
html.noir-motion body .noir-reveal{animation:noirReveal .64s cubic-bezier(.2,.78,.25,1) both}
html.noir-motion body .noir-tap-ink{position:fixed;pointer-events:none;z-index:9999;width:20px;height:20px;border:2px solid rgba(125,183,255,.92);border-radius:100%;box-shadow:0 0 16px rgba(37,99,235,.55);animation:noirRipple .49s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes noirReveal{from{opacity:.25;transform:translateY(19px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes noirRipple{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(3.5)}}
@keyframes noirAura{from{transform:translateX(-4%) scale(.9);opacity:.55}to{transform:translateX(9%) scale(1.15);opacity:1}}
@keyframes noirStatus{50%{box-shadow:0 0 0 6px rgba(53,202,149,.16),0 0 15px rgba(53,202,149,.38)}}
@keyframes noirSkeleton{to{background-position-x:-240%}}
@media (prefers-reduced-motion:reduce){html[data-theme] body *,html[data-theme] body *::before,html[data-theme] body *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}
@layer ui {
  html[data-theme] body.comic-landing .hero::before {
    background:radial-gradient(circle,rgba(35,104,247,.19),transparent 70%)!important;
  }
  html[data-theme] body.comic-landing .hero::after {
    background-image:linear-gradient(rgba(71,141,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(71,141,255,.045) 1px,transparent 1px)!important;
  }
  html[data-theme] body.comic-landing :is(.mini-card i,.trust-row i,.step b,.mini-logo i,.brand-logo i) {
    color:var(--accent)!important;
  }
  html[data-theme] body.comic-landing .step b {
    background:rgba(52,118,237,.19)!important;
    border:1px solid rgba(137,186,255,.3)!important;
  }
  html[data-theme] body.comic-landing .cta-box {
    background:radial-gradient(ellipse at 50% 120%,rgba(37,99,235,.24),transparent 55%),linear-gradient(160deg,#101f3d,#070d1b)!important;
  }
  html[data-theme] body.comic-landing .landing-promo-cta,
  html[data-theme] body.comic-landing .user-promo-cta {
    background:linear-gradient(135deg,#3279ff,#1749ba)!important;
    color:#fff!important;
  }
  html[data-theme] body .mc-admin-nav-inner a:focus-visible,
  html[data-theme] body .mc-header-actions a:focus-visible {
    outline:2px solid var(--accent)!important;outline-offset:3px;
  }
}

/* OTP admin: readable stored key viewer and two clear actions */
html[data-theme] body .otp-stored-line {display:flex;align-items:stretch;gap:8px}
html[data-theme] body .otp-stored-line .otp-saved-key {flex:1;min-width:0}
html[data-theme] body .otp-show-saved{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:0 15px;min-height:43px;border-radius:11px}
html[data-theme] body .otp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
html[data-theme] body .otp-actions button{min-height:42px}
html[data-theme] body .otp-danger{color:#ffb7c2!important;border-color:rgba(244,95,114,.55)!important;background:#3a1b2b!important}
html[data-theme] body .otp-danger:hover{background:#532138!important;color:#fff!important}
html[data-theme] body .otp-help{font-size:12px;line-height:1.6;color:var(--text-2)!important;margin-top:8px}
@media(max-width:430px){html[data-theme] body .otp-show-saved{padding:0 10px;font-size:12px}html[data-theme] body .otp-actions>.mc-btn{flex:1 1 auto}}

/* Telegram image preview in admin settings */
html[data-theme] body .tg-image-settings{margin-top:14px}
html[data-theme] body .tg-image-preview{display:flex;justify-content:center;align-items:center;min-height:110px;margin-top:9px;padding:10px;border:1px dashed #3c5d88;border-radius:13px;background:linear-gradient(145deg,#0a172e,#0d2445);color:#9eb8dc;font-size:12px;overflow:hidden}
html[data-theme] body .tg-image-preview img{display:block;max-height:160px;width:100%;object-fit:contain;border-radius:8px}
html[data-theme] body .tg-image-preview img[hidden],html[data-theme] body .tg-image-preview span[hidden]{display:none!important}

html[data-theme] body .otp-doc-link{display:inline-flex;gap:7px;align-items:center;color:#8fbfff!important;font-size:12px;text-decoration:underline;text-underline-offset:3px;margin-top:12px}
html[data-theme] body .otp-doc-link i{color:#8fbfff!important}