/* NOKOS ARMUFA — universal mobile contrast patch, 2026-11-04
   White/light surfaces -> dark readable text.
   Blue/dark surfaces -> white readable text.
   Covers ALL existing EJS templates including deposit, admin, auth and API.
   Pure CSS: does not change payment/API JS, form IDs or URLs.
   @layer pop precedes earlier unlayered legacy styles declared on pages. */
@layer pop {
  html[data-design="armufa-modern"] {
    color-scheme:light!important;
    --sy-ink:#122745;--sy-muted:#586d89;--sy-blue:#1159d5;
    --sy-pale:#edf4ff;--sy-white:#fff;
  }
  /* Reset the old theme's inherited white WebKit text fill. It otherwise keeps
     text invisible even when the CSS color is dark (Android Chromium). */
  html[data-design="armufa-modern"] body :where(*):not(svg):not(path),
  html[data-design="armufa-modern"] body :where(*::before,*::after) {
    -webkit-text-fill-color:currentColor!important;
  }
  /* Shared readable base for every template. */
  html[data-design="armufa-modern"] body :is(.mc-page,.mc-card,.adm-card,.cfg-card,.seo-card,.ac-card,.docs-panel,.docs-endpoint,.docs-base-url,.docs-key,.docs-jump-nav,.mc-receipt,.mc-order-item,.mc-empty,.mc-table-wrap,.mc-modal,.auth-card,.sy-recent,.sy-overview-card,.quick-link,.akey,.account-drawer-inner){
    color:#122745!important;
    --text:#122745;--ink:#122745;--text-2:#586d89;
  }
  html[data-design="armufa-modern"] body :is(.mc-card,.adm-card,.cfg-card,.seo-card,.ac-card,.docs-panel,.docs-endpoint,.docs-base-url,.docs-key,.mc-receipt,.mc-order-item,.mc-modal,.auth-card,.akey) :is(h1,h2,h3,h4,h5,h6,strong,b,.mc-section-title,.mc-label,.mc-stat-value,.value){color:#122745!important}
  html[data-design="armufa-modern"] body :is(.mc-card,.adm-card,.cfg-card,.seo-card,.ac-card,.docs-panel,.docs-endpoint,.docs-key,.mc-receipt,.mc-order-item,.auth-card,.akey) :is(p,small,.mc-stat-label,.adm-help,.seo-help,.docs-muted,.mc-receipt-row .label,.qris-dismiss-note){color:#4c6281!important}
  html[data-design="armufa-modern"] body :is(.mc-card,.adm-card,.cfg-card,.seo-card,.ac-card,.docs-panel,.docs-endpoint,.mc-receipt,.mc-order-item,.auth-card) :is(label,.mc-label,.mc-section-title){color:#192e4d!important}
  /* Explicit text color for controls with a pale background. */
  html[data-design="armufa-modern"] body :is(.mc-btn-outline,.mc-btn-ghost,.btn-outline,.docs-button.dark,.akey-btn:not(.is-primary),.mc-tab,.mc-amount-btn,.otp-shop-server,.docs-jump-nav a,.docs-filters button:not(.active),.docs-code-tabs button:not(.active),.docs-key button,.docs-response-example summary,.mc-back-btn,.mc-menu-item,.sy-user-chip,.sy-login-link,.qris-dismiss-note){
    color:#163e70!important;-webkit-text-fill-color:#163e70!important;
  }
  html[data-design="armufa-modern"] body :is(.mc-btn-outline,.mc-btn-ghost,.btn-outline,.docs-button.dark,.akey-btn:not(.is-primary),.mc-tab,.mc-amount-btn,.otp-shop-server,.docs-jump-nav a,.docs-filters button:not(.active),.docs-code-tabs button:not(.active),.docs-key button,.mc-back-btn){
    background:#edf4ff!important;border-color:#cedeef!important;
  }
  html[data-design="armufa-modern"] body :is(.mc-amount-btn,.mc-tab,.docs-filters button,.docs-code-tabs button,.akey-btn,.docs-button,.mc-btn,.btn) :is(i,span,strong,b){color:inherit!important;-webkit-text-fill-color:currentColor!important}
  /* Every filled blue button has white foreground, including nested icons/text. */
  html[data-design="armufa-modern"] body :is(.mc-btn-primary,.mc-btn-success,.mc-btn-warning,.btn-primary,.btn-gold,.docs-send,.docs-button:not(.dark),.akey-btn.is-primary,.sy-primary-button,.adm-save,.mc-topup-action,.mc-amount-btn.selected,.mc-amount-btn.active,.docs-filters button.active,.docs-code-tabs button.active){
    background:linear-gradient(135deg,#2678f2,#1155d2)!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    border-color:#1455c1!important;text-shadow:none!important;
  }
  html[data-design="armufa-modern"] body :is(.mc-btn-primary,.mc-btn-success,.mc-btn-warning,.btn-primary,.btn-gold,.docs-send,.docs-button:not(.dark),.akey-btn.is-primary,.sy-primary-button,.adm-save,.mc-amount-btn.selected,.mc-amount-btn.active,.docs-filters button.active,.docs-code-tabs button.active) :is(span,i,b,strong,small){
    color:#fff!important;-webkit-text-fill-color:#fff!important;
  }
  html[data-design="armufa-modern"] body :is(.mc-btn-danger,.mc-btn-red,.mc-dialog-btn-danger,.qris-dismiss-btn,.account-drawer-logout){
    background:#b92e4b!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#9c2340!important;
  }
  html[data-design="armufa-modern"] body :is(.mc-btn-danger,.mc-btn-red,.mc-dialog-btn-danger,.qris-dismiss-btn) :is(i,span){color:#fff!important;-webkit-text-fill-color:#fff!important}
  /* Modal/documentation action buttons must not inherit white text on white bg. */
  html[data-design="armufa-modern"] body .docs-cover .docs-button:not(.dark),
  html[data-design="armufa-modern"] body .docs-base-url .docs-button,
  html[data-design="armufa-modern"] body .docs-endpoint .docs-button:not(.dark){
    background:linear-gradient(135deg,#0b397e,#0c4eb8)!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    border:1px solid #0b397e!important;
  }
  html[data-design="armufa-modern"] body .docs-cover .docs-button.dark{
    background:#fff!important;color:#153c77!important;
    -webkit-text-fill-color:#153c77!important;border:1px solid #cedcf2!important;
  }
  html[data-design="armufa-modern"] body .docs-cover .docs-button.dark :is(i,span,b){color:#153c77!important;-webkit-text-fill-color:#153c77!important}
  html[data-design="armufa-modern"] body .docs-cover .docs-kicker{
    display:inline-block!important;width:fit-content!important;
    padding:4px 8px!important;border-radius:6px!important;
    background:#0d418e!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
    letter-spacing:.11em!important;
  }
  html[data-design="armufa-modern"] body .docs-cover :is(h1,p){color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body .docs-cover h1 em{color:#c5e4ff!important;-webkit-text-fill-color:#c5e4ff!important}
  html[data-design="armufa-modern"] body .docs-panel .docs-kicker{color:#1551a5!important;-webkit-text-fill-color:#1551a5!important}
  html[data-design="armufa-modern"] body .docs-base-url>span,
  html[data-design="armufa-modern"] body .docs-base-url>code,
  html[data-design="armufa-modern"] body .docs-key>label,
  html[data-design="armufa-modern"] body .docs-key>small{color:#1b3f69!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .docs-panel :is(.docs-note,.docs-auth,.docs-method,.docs-request-status,.docs-count,.docs-label,.docs-confirm){-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .docs-panel .docs-code,
  html[data-design="armufa-modern"] body .docs-panel .docs-code code{
    background:#101e37!important;color:#ecf5ff!important;-webkit-text-fill-color:#ecf5ff!important;
  }
  html[data-design="armufa-modern"] body .docs-panel .docs-code-tabs{background:#e8f1ff!important;color:#234369!important}
  html[data-design="armufa-modern"] body .docs-panel .docs-method{background:#dceaff!important;color:#0b479a!important}
  html[data-design="armufa-modern"] body .docs-panel .docs-method.post{background:#1b62ce!important;color:#fff!important}
  /* Top Up Saldo: the balance header is blue even when not in dashboard. */
  html[data-design="armufa-modern"] body .mc-page>.mc-balance-card,
  html[data-design="armufa-modern"] body .mc-balance-card{
    background:linear-gradient(135deg,#1047aa,#176ce9)!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    border:1px solid #4287ea!important;
    border-radius:16px!important;
  }
  html[data-design="armufa-modern"] body .mc-balance-card :is(.mc-balance-label,.mc-balance-amount,.mc-balance-amount span,.bal-rp,.bal-num){color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body .mc-balance-card>div :is(div,span,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body .mc-balance-card :is(a.mc-topup-btn,button.mc-topup-btn),
  html[data-design="armufa-modern"] body .mc-balance-card :is(a.mc-topup-btn,button.mc-topup-btn) :is(i,span){
    background:#fff!important;color:#144d9e!important;-webkit-text-fill-color:#144d9e!important;border-color:#fff!important;
  }
  html[data-design="armufa-modern"] body .mc-page>.mc-balance-card{
    min-height:112px!important;padding:15px!important;margin-bottom:12px!important;gap:7px!important;
  }
  html[data-design="armufa-modern"] body .mc-page>.mc-balance-card .mc-balance-amount{font-size:clamp(24px,7vw,34px)!important;line-height:1.18!important}
  html[data-design="armufa-modern"] body .mc-page .mc-amount-grid{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  html[data-design="armufa-modern"] body .mc-page .mc-amount-btn{min-height:39px!important;padding:7px 4px!important;font-size:11px!important;border-radius:9px!important}
  html[data-design="armufa-modern"] body .mc-page .mc-amount-btn:is(.active,.selected){background:#195fda!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body .mc-page .mc-qr-box{background:#fff!important;color:#152b4a!important}
  html[data-design="armufa-modern"] body .mc-page .mc-receipt{background:#f3f7ff!important;color:#152b4a!important}
  html[data-design="armufa-modern"] body .mc-page .mc-receipt-row :is(.label,.value){color:#193553!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .mc-page .mc-receipt-row .mc-status{color:#80531a!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .mc-page .mc-alert{color:#274462!important;-webkit-text-fill-color:#274462!important}
  html[data-design="armufa-modern"] body .mc-page .mc-alert :is(strong,b,span,i){color:inherit!important;-webkit-text-fill-color:currentColor!important}
  /* Uniform legible white cards and dark text: orders, users, settings, modals. */
  html[data-design="armufa-modern"] body :is(.adm-grid,.adm-grid-2,.mc-table-wrap,.mc-order-item,.mc-menu-item,.mc-receipt,.mc-stats-grid,.mc-card) :is(.mc-badge,.mc-status){-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"][data-admin] body :is(.adm-card,.cfg-card,.seo-card,.ac-card,.mc-card) :is(.adm-card-head,.adm-card-head h2,.adm-card-head h3,.mc-label,.adm-help,.seo-help){color:#193555!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"][data-admin] body :is(.ac-hero,.adm-hero),
  html[data-design="armufa-modern"][data-admin] body :is(.ac-hero,.adm-hero) :is(h1,h2,h3,h4,p,span,strong,b,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body :is(.key-hero,.sy-menu-bar),
  html[data-design="armufa-modern"] body :is(.key-hero,.sy-menu-bar) :is(h1,h2,h3,p,span,strong,b,i,a){color:#fff!important;-webkit-text-fill-color:#fff!important}
  html[data-design="armufa-modern"] body .sy-drawer :is(.account-drawer-who h2,.account-drawer-who p,.sy-drawer-links a,.sy-drawer-links a i){color:#173252!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .sy-drawer .account-drawer-links>a.account-drawer-logout,
  html[data-design="armufa-modern"] body .sy-drawer .account-drawer-links>a.account-drawer-logout i{color:#ad3348!important;-webkit-text-fill-color:#ad3348!important;background:transparent!important}
  html[data-design="armufa-modern"] body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){color:#172f53!important;-webkit-text-fill-color:#172f53!important;background:#f9fbff!important}
  html[data-design="armufa-modern"] body :is(input,textarea)::placeholder{color:#687f9f!important;-webkit-text-fill-color:#687f9f!important;opacity:1!important}
  html[data-design="armufa-modern"] body :is(.auth-card,.auth-footer,.auth-divider,.auth-card .auth-title,.auth-card .auth-sub){color:#173252!important;-webkit-text-fill-color:currentColor!important}
  html[data-design="armufa-modern"] body .auth-card .mc-btn-primary{color:#fff!important;-webkit-text-fill-color:#fff!important}
  /* Status chips can use subtle backgrounds, never white letters on them. */
  html[data-design="armufa-modern"] body :is(.mc-status-pending,.mc-status-waiting,.mc-status-processing){background:#fff3d9!important;color:#86571b!important;-webkit-text-fill-color:#86571b!important}
  html[data-design="armufa-modern"] body :is(.mc-status-success,.mc-status-completed){background:#e2f8ed!important;color:#11684c!important;-webkit-text-fill-color:#11684c!important}
  html[data-design="armufa-modern"] body :is(.mc-status-failed,.mc-status-canceled,.mc-status-error){background:#ffe9ee!important;color:#a92c45!important;-webkit-text-fill-color:#a92c45!important}
  /* Tiny screens: keep API, deposit and other action buttons visible. */
  @media(max-width:560px){
    html[data-design="armufa-modern"] body .docs-cover-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
    html[data-design="armufa-modern"] body .docs-cover-actions .docs-button{min-width:0!important;width:100%!important;font-size:10px!important;padding:8px 6px!important;white-space:normal!important;text-align:center!important;overflow-wrap:anywhere!important}
    html[data-design="armufa-modern"] body .docs-base-url .docs-button{display:flex!important;width:100%!important;min-height:36px!important;justify-content:center!important}
    html[data-design="armufa-modern"] body .qris-payment-actions .mc-btn{min-height:39px!important}
    html[data-design="armufa-modern"] body .mc-card{padding:12px!important}
  }
}

/* Final exception: payment cancellation is a filled dark-red action, never white-on-white. */
@layer pop {
 html[data-design="armufa-modern"] body .mc-page .qris-payment-actions button.mc-btn.qris-dismiss-btn,
 html[data-design="armufa-modern"] body .mc-page .qris-payment-actions button.mc-btn.qris-dismiss-btn:hover {
   background:#b42f4a!important;background-image:none!important;
   color:#fff!important;-webkit-text-fill-color:#fff!important;
   border:1px solid #9f2540!important;box-shadow:none!important;
 }
 html[data-design="armufa-modern"] body .mc-page .qris-payment-actions button.mc-btn.qris-dismiss-btn :is(span,i){color:#fff!important;-webkit-text-fill-color:#fff!important}
 /* Render text and inline emphasis as natural prose inside payment alerts. */
 html[data-design="armufa-modern"] body .mc-page .mc-alert {display:block!important;line-height:1.55!important}
 html[data-design="armufa-modern"] body .mc-page .mc-alert>i:first-child {display:inline!important;margin-right:6px!important}
 html[data-design="armufa-modern"] body .mc-page .mc-alert>strong {display:inline!important}
}