/* Mahkota Theme Engine v21. All new pages inherit theme via bootstrap.php. */
:root{--mp-accent:#e50000;--mp-accent2:#ad0000;--mp-shadow:#690000;--mp-panel:#200000;--mp-base:#100000;--mp-glow:#ff4141;--mp-highlight:#ffd03c;--mp-line:#ff2020;--mp-contrast:#fff;--red:var(--mp-accent);--darkred:var(--mp-accent2);--line:var(--mp-line);--gold:var(--mp-highlight)}
html[data-mp-theme="red"]{--mp-accent:#e50000;--mp-accent2:#ad0000;--mp-shadow:#690000;--mp-panel:#200000;--mp-base:#100000;--mp-glow:#ff4141;--mp-highlight:#ffd03c;--mp-line:#ff2020;}
html[data-mp-theme="yellow"]{--mp-accent:#ffe600;--mp-accent2:#d39a00;--mp-shadow:#9c6800;--mp-panel:#191600;--mp-base:#090900;--mp-glow:#fff35a;--mp-highlight:#fff7ad;--mp-line:#ffea00;}
html[data-mp-theme="cyan"]{--mp-accent:#00d9ff;--mp-accent2:#006cff;--mp-shadow:#004a9b;--mp-panel:#071b37;--mp-base:#020b1c;--mp-glow:#42f4ff;--mp-highlight:#c8faff;--mp-line:#00e7ff;}
html[data-mp-theme="navy"]{--mp-accent:#007bff;--mp-accent2:#1231ce;--mp-shadow:#072f91;--mp-panel:#071434;--mp-base:#02071b;--mp-glow:#4cbaff;--mp-highlight:#e4c96b;--mp-line:#258dff;}
html[data-mp-theme="orange"]{--mp-accent:#ff8900;--mp-accent2:#d96800;--mp-shadow:#783300;--mp-panel:#271300;--mp-base:#120b04;--mp-glow:#ffc047;--mp-highlight:#ffd06b;--mp-line:#ff9500;}
html[data-mp-theme="green"]{--mp-accent:#28ed00;--mp-accent2:#159b0a;--mp-shadow:#145c17;--mp-panel:#09280c;--mp-base:#041207;--mp-glow:#b5ff3c;--mp-highlight:#e2ff5d;--mp-line:#43f600;}
html[data-mp-theme="maroon"]{--mp-accent:#bd061d;--mp-accent2:#67000e;--mp-shadow:#300007;--mp-panel:#160005;--mp-base:#080003;--mp-glow:#f12647;--mp-highlight:#d8b34a;--mp-line:#c60d2b;}

/* Shell and backgrounds */
html body{background:linear-gradient(180deg,color-mix(in srgb,var(--mp-panel) 80%,transparent),color-mix(in srgb,var(--mp-base) 94%,transparent)),var(--bg-image,none) center top/cover fixed,var(--mp-base)!important}
html body .top,html body .topbar,html body .mobile-top,html body .mobile-header{background:linear-gradient(105deg,var(--mp-accent2),var(--mp-accent),var(--mp-accent2))!important;border-color:var(--mp-line)!important}
html body .ticker,html body .notice-bar,html body .announcement{background:linear-gradient(100deg,var(--mp-accent),var(--mp-accent2))!important;border-color:var(--mp-line)!important}
html body .category-nav{border-color:var(--mp-line)!important}
html body .side-card,html body .payment-panel,html body .content-panel,html body .panel,html body .member-panel,html body .form-panel,html body .account-card,html body .transaction-card,html body .footer,html body footer{background-color:var(--mp-panel)!important;border-color:var(--mp-line)!important}
html body .side-card,html body .payment-panel,html body .content-panel,html body .panel{background-image:linear-gradient(155deg,var(--mp-panel),var(--mp-base))!important}
/* Buttons, borders and effects */
html body .side-links a,html body .payment-item,html body .bottom-nav,html body .btn.red,html body .btn-red,html body .btn-primary,html body button[type=submit]:not(.gold),html body .mobile-actions a,html body .nav-btn{background:linear-gradient(180deg,var(--mp-accent),var(--mp-accent2))!important;border-color:var(--mp-line)!important;box-shadow:0 1px 8px color-mix(in srgb,var(--mp-glow) 35%,transparent)!important}
html body .side-links a:hover,html body .btn:hover,html body button[type=submit]:hover{box-shadow:0 0 14px color-mix(in srgb,var(--mp-glow) 65%,transparent)!important}
html body .side-links a,html body .payment-item,html body .payment-logo,html body .meter,html body .sidebar,html body .sidebar a,html body .sidebar-menu a,html body .mobile-menu a,html body .drawer a,html body .modal,html body .popup,html body .register-wrap,html body .deposit-wrap,html body .withdraw-wrap,html body .history-wrap,html body .bank-card,html body .payment-method,html body .favorite-card,html body .slot-card,html body .table-wrap,html body table,html body th,html body td,html body input,html body select,html body textarea{border-color:var(--mp-line)!important}
html body .sidebar,html body .sidebar-menu,html body .mobile-menu,html body .drawer,html body .offcanvas{background-color:var(--mp-base)!important}
html body .sidebar a:hover,html body .mobile-menu a:hover,html body .drawer a:hover{background:var(--mp-panel)!important}
html body .meter,html body .progress,html body .progress-bar{background-color:var(--mp-accent2)!important}
html body .gold,html body .btn.gold{background:linear-gradient(180deg,color-mix(in srgb,var(--mp-highlight) 60%,white),var(--mp-highlight))!important;border-color:var(--mp-highlight)!important;color:#151515!important}
html body .outline,html body .btn-outline,html body .status-pill{border-color:var(--mp-highlight)!important;color:var(--mp-highlight)!important}
html body .brand-fallback,html body .eyebrow,html body .section-heading,html body .side-card h3,html body .payment-panel h3{color:var(--mp-highlight)!important}
html body input:focus,html body select:focus,html body textarea:focus{outline:1px solid var(--mp-glow)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--mp-glow) 22%,transparent)!important}
html body a:focus-visible,html body button:focus-visible{outline:2px solid var(--mp-highlight)!important;outline-offset:2px}
/* Member/account details and transaction status containers */
html body .member-detail-v4,html body .member-data-v4>div,html body .history-panel,html body .rekening-card,html body .account-box{background:linear-gradient(145deg,var(--mp-panel),var(--mp-base))!important;border-color:var(--mp-line)!important}
html body .member-detail-v4 h2{color:var(--mp-highlight)!important}
/* Preserve semantic success/error/online status colors for readability. */
@media(max-width:800px){html body .sidebar,html body .mobile-menu,html body .drawer{border-color:var(--mp-line)!important}}

/* Navigation models */
.category-nav{position:relative;isolation:isolate}
.category-nav.nav-model-v{margin:0 auto;width:100%;padding-bottom:12px;border:0!important;background:transparent!important;clip-path:polygon(0 0,100% 0,100% 55%,97% 55%,94% 100%,6% 100%,3% 55%,0 55%)}
.category-nav.nav-model-v:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--mp-highlight),var(--mp-accent));clip-path:inherit}
.category-nav.nav-model-v:after{content:"";position:absolute;inset:0 2px 3px;z-index:-1;background:repeating-linear-gradient(45deg,#111 0,#111 12px,#060606 12px,#060606 24px);clip-path:inherit}
.category-nav.nav-model-custom{background-image:var(--mp-nav-image)!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;border:0!important}
@media(max-width:768px){.category-nav.nav-model-v{padding-bottom:8px;clip-path:polygon(0 0,100% 0,100% 75%,97% 75%,94% 100%,6% 100%,3% 75%,0 75%)}}

/* V22: polished luminous presets. Effects follow the theme variables globally. */
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .top,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .topbar,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .mobile-top,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .mobile-header{
 background:linear-gradient(115deg,var(--mp-base) 0%,var(--mp-accent2) 52%,var(--mp-base) 100%)!important;
 box-shadow:inset 0 -2px 0 var(--mp-line),0 4px 18px color-mix(in srgb,var(--mp-glow) 35%,transparent)!important;
}
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .ticker,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .notice-bar,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .announcement{
 background:linear-gradient(100deg,var(--mp-accent2),var(--mp-accent),var(--mp-accent2))!important;
 box-shadow:0 2px 15px color-mix(in srgb,var(--mp-glow) 48%,transparent)!important;
}
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .side-links a,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .payment-item,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .btn-red,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .btn-primary,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body button[type=submit]:not(.gold){
 background:linear-gradient(180deg,color-mix(in srgb,var(--mp-accent) 88%,white),var(--mp-accent2))!important;
 border:1px solid var(--mp-line)!important;
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mp-highlight) 60%,transparent),0 0 13px color-mix(in srgb,var(--mp-glow) 48%,transparent)!important;
}
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .side-card,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .payment-panel,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .content-panel,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"]) body .panel{
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mp-highlight) 15%,transparent),0 0 12px color-mix(in srgb,var(--mp-glow) 16%,transparent)!important;
}
html[data-mp-theme="yellow"] body .side-links a,
html[data-mp-theme="yellow"] body .btn-red,
html[data-mp-theme="yellow"] body .btn-primary,
html[data-mp-theme="yellow"] body button[type=submit]:not(.gold){color:#171100!important;text-shadow:none!important}
/* Focus and mobile inherit the same palette, not separate hard-coded colors. */

/* V23: full-width luminous headers and accessible foregrounds.
   Scoped to presets; new pages inherit through the shared bootstrap theme engine. */
html[data-mp-theme="yellow"]{--mp-header-ink:#171000;--mp-header-bright:#ffe900;--mp-header-deep:#f1ad00}
html[data-mp-theme="cyan"]{--mp-header-ink:#00182b;--mp-header-bright:#00e9ff;--mp-header-deep:#009cff}
html[data-mp-theme="navy"]{--mp-header-ink:#fff;--mp-header-bright:#116bff;--mp-header-deep:#0726b6}
html[data-mp-theme="orange"]{--mp-header-ink:#1c0b00;--mp-header-bright:#ffab00;--mp-header-deep:#ff7100;--mp-accent:#ff9d00;--mp-accent2:#ff6900;--mp-line:#ff9c00;--mp-glow:#ffc24a}
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .top,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .topbar,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .mobile-top,
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .mobile-header{
 background:linear-gradient(105deg,var(--mp-header-deep) 0%,var(--mp-header-bright) 32%,var(--mp-header-bright) 72%,var(--mp-header-deep) 100%)!important;
 color:var(--mp-header-ink)!important;
 border-color:var(--mp-line)!important;
 box-shadow:inset 0 2px 0 color-mix(in srgb,var(--mp-glow) 75%,white),inset 0 -2px 0 var(--mp-line),0 3px 15px color-mix(in srgb,var(--mp-glow) 35%,transparent)!important;
}
/* Keep text legible on bright headers, including nested labels and icons. */
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body :is(.top,.topbar,.mobile-top,.mobile-header) :is(.brand,.brand-fallback,.member-status,.member-status-chip,.member-status-icon,.balance,.username,.mobile-menu-toggle,.menu-toggle){color:var(--mp-header-ink)!important;text-shadow:none!important}
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body :is(.top,.topbar,.mobile-top,.mobile-header) :is(.member-status-chip,.member-status a,.member-status button,.menu-toggle,.mobile-menu-toggle){border-color:color-mix(in srgb,var(--mp-header-ink) 70%,transparent)!important}
/* Header action pills retain a dark surface on bright themes for clear contrast. */
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="orange"]) body :is(.top,.topbar,.mobile-top,.mobile-header) :is(.member-status-chip,.member-status a,.member-status button){background:linear-gradient(180deg,color-mix(in srgb,var(--mp-header-deep) 18%,#121212),#100e0b)!important;color:var(--mp-glow)!important}
html[data-mp-theme="navy"] body :is(.top,.topbar,.mobile-top,.mobile-header) :is(.member-status-chip,.member-status a,.member-status button){background:linear-gradient(180deg,#071a50,#020c2c)!important;color:#fff!important}
/* Mobile footer bar: theme-colored background, icon labels and raised transaction action. */
@media(max-width:768px){
 html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .bottom-nav{
  background:linear-gradient(180deg,var(--mp-header-bright),var(--mp-header-deep))!important;
  border-top:2px solid var(--mp-line)!important;
  box-shadow:0 -4px 16px color-mix(in srgb,var(--mp-glow) 35%,transparent)!important;
 }
 html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .bottom-nav :is(a,button,span,small){color:var(--mp-header-ink)!important;text-shadow:none!important}
 html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="navy"],[data-mp-theme="orange"]) body .bottom-nav :is(.bottom-main,button.bottom-main){background:linear-gradient(180deg,var(--mp-header-bright),var(--mp-header-deep))!important;border:2px solid var(--mp-line)!important;box-shadow:0 0 14px color-mix(in srgb,var(--mp-glow) 60%,transparent)!important}
}
/* V24 — shared component palette. Keep all member pages driven by data-mp-theme.
   Do not style brand images, uploaded backgrounds or semantic success/error states. */
:root{
 --mp-surface:var(--mp-panel);--mp-surface-raised:color-mix(in srgb,var(--mp-panel) 80%,var(--mp-accent) 20%);
 --mp-border-soft:color-mix(in srgb,var(--mp-line) 54%,var(--mp-base));
 --mp-text-soft:#dedbe0;--mp-button-ink:#111;
 --mp-button-top:color-mix(in srgb,var(--mp-accent) 84%,white);
 --mp-button-bottom:var(--mp-accent2);
}
html[data-mp-theme="red"]{--mp-button-ink:#fff}
html[data-mp-theme="navy"]{--mp-button-ink:#fff}
html[data-mp-theme="maroon"]{--mp-button-ink:#fff}
html[data-mp-theme="orange"]{--mp-button-ink:#160b00}
html[data-mp-theme="cyan"]{--mp-button-ink:#041629}
html[data-mp-theme="yellow"]{--mp-button-ink:#191400}
html[data-mp-theme="green"]{--mp-button-ink:#061200}
/* All layout surfaces, including inline-styled account/transaction pages */
html body :is(.mp-panel,.mp-head,.mp-body,.ht-panel,.ht-head,.ht-body,.register-wrap,.login-dialog,.login-modal .login-dialog,.mobile-drawer:not([hidden]),.footer,.footer-payments,.footer-grid,.activity-panel,.favorites){border-color:var(--mp-border-soft)!important}
html body :is(.mp-panel,.mp-head,.mp-body,.ht-panel,.ht-head,.ht-body,.register-wrap,.login-dialog,.login-modal .login-dialog){background:var(--mp-surface)!important}
html body :is(.mp-bank,.mp-account-card,.mp-card,.ht-item,.ht-empty,.ht-tabs a:not(.active),.ht-filter a:not(.active)){
 background:linear-gradient(155deg,var(--mp-surface-raised),var(--mp-surface))!important;
 border-color:var(--mp-border-soft)!important;
}
html body .mp-account input:checked+.mp-account-card{background:var(--mp-surface-raised)!important;border-color:var(--mp-line)!important;box-shadow:0 0 0 1px var(--mp-line),0 0 12px color-mix(in srgb,var(--mp-glow) 22%,transparent)!important}
html body :is(.mp-head h1,.mp-card h2,.ht-head h1,.ht-kind,.ht-field .ht-bank,.mp-bank-caption,.mp-account-tag,.mp-bank-number,.mp-account-number,.mp-manage,.mp-bottom a,.register-wrap h1,.login-dialog h2,.login-dialog p a,.favorites h2){color:var(--mp-highlight)!important}
html body :is(.mp-head p,.mp-hint,.mp-muted,.mp-section-label,.mp-bank-owner,.mp-account-owner,.ht-head p,.ht-note,.ht-privacy,.ht-field small){color:var(--mp-text-soft)!important}
html body :is(.mp-control,.ht-custom input,.register-wrap input,.register-wrap select,.login-dialog input){border-color:var(--mp-line)!important}
html body :is(.mp-control,.ht-custom input,.register-wrap input,.register-wrap select,.login-dialog input):focus{border-color:var(--mp-glow)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mp-glow) 24%,transparent)!important}
/* Primary actions and selected tabs use the same theme instead of permanent gold. */
html body :is(.mp-submit,.register-submit,.login-submit,.ht-tabs a.active,.ht-filter a.active,.ht-custom button,.mp-copy){
 background:linear-gradient(180deg,var(--mp-button-top),var(--mp-button-bottom))!important;
 border-color:var(--mp-line)!important;color:var(--mp-button-ink)!important;
 box-shadow:0 0 13px color-mix(in srgb,var(--mp-glow) 42%,transparent)!important;
}
html body :is(.ht-tabs a,.ht-filter a,.ht-item,.ht-empty,.ht-details,.mp-account-check){border-color:var(--mp-border-soft)!important}
html body .mp-account input:checked+.mp-account-card .mp-account-check{background:var(--mp-accent)!important;border-color:var(--mp-line)!important;color:var(--mp-button-ink)!important}
/* Removing a bank account is a destructive action, so keep its warning red. */
/* Carousel cards, moving activity cards and empty favorite placeholders */
html body .favorites{background:linear-gradient(90deg,color-mix(in srgb,var(--mp-base) 93%,transparent),color-mix(in srgb,var(--mp-panel) 90%,transparent),color-mix(in srgb,var(--mp-base) 93%,transparent))!important;border-top:2px solid var(--mp-line)!important;border-bottom:2px solid var(--mp-line)!important}
html body :is(.favorite-tile,.favorite-tile>.img-placeholder){background-color:var(--mp-surface-raised)!important;border-color:var(--mp-line)!important}
html body .favorite-tile>.img-placeholder{background-image:repeating-linear-gradient(135deg,transparent 0 13px,color-mix(in srgb,var(--mp-accent) 17%,transparent) 13px 24px)!important}
html body :is(.activity-item,.payment-grid-item){background:linear-gradient(180deg,var(--mp-button-top),var(--mp-button-bottom))!important;border-color:var(--mp-line)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mp-glow) 50%,white)!important}
html body :is(.activity-person,.activity-item strong){color:var(--mp-button-ink)!important}
html body .activity-panel h3{color:var(--mp-highlight)!important;border-color:var(--mp-border-soft)!important}
html body .payment-grid-item>.img-placeholder{background:var(--mp-surface)!important;color:var(--mp-highlight)!important}
html body :is(.payment-grid-item,.payment-item,.footer-payments,.footer-bottom){border-color:var(--mp-line)!important}
html body .footer{background:var(--mp-base)!important;border-top:2px solid var(--mp-line)!important}
html body .footer-payments{border-left-color:var(--mp-border-soft)!important;border-top-color:var(--mp-border-soft)!important}
html body .footer-bottom{border-top:1px dashed var(--mp-line)!important}
html body .footer a:hover{color:var(--mp-highlight)!important}
html body .footer-brand{color:var(--mp-highlight)!important}
/* Side drawer and its separators are never maroon unless maroon is selected. */
html body .mobile-drawer:not([hidden]){background:var(--mp-base)!important;border-left:1px solid var(--mp-border-soft)!important}
html body .mobile-drawer:not([hidden]) a{border-bottom:1px solid var(--mp-border-soft)!important}
html body .mobile-drawer:not([hidden]) .drawer-title{color:var(--mp-highlight)!important}
html body .mobile-drawer:not([hidden]) .drawer-title button{background:var(--mp-accent)!important;color:var(--mp-button-ink)!important;border:1px solid var(--mp-line)!important}
/* Existing neutral text and warnings remain legible; avoid changing uploaded imagery. */

/* V25: Theme consistency — applies to all non-original-red presets.
   Keep images, online/success/error status semantics unchanged. */
html:not([data-mp-theme="red"]) body :is(.slider,.promo-card,.secondary,.content-panel,.activity-panel,.favorites,.favorite-tile,.payment-panel,.payment-grid-item,.footer-payments,.footer-bottom){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body .slider{background:radial-gradient(circle at 50% 40%,var(--mp-panel),var(--mp-base))!important;box-shadow:0 0 10px color-mix(in srgb,var(--mp-glow) 18%,transparent)!important}
html:not([data-mp-theme="red"]) body .slide-arrow{background:linear-gradient(155deg,var(--mp-accent),var(--mp-accent2))!important;border:2px solid var(--mp-line)!important;color:var(--mp-button-ink)!important;box-shadow:0 0 10px color-mix(in srgb,var(--mp-glow) 45%,transparent)!important}
html:not([data-mp-theme="red"]) body .promo-card{background:linear-gradient(115deg,var(--mp-base),var(--mp-panel),var(--mp-base))!important}
html:not([data-mp-theme="red"]) body .secondary{background:linear-gradient(120deg,var(--mp-base),var(--mp-panel))!important}
html:not([data-mp-theme="red"]) body :is(.social-links a,.footer-social a,.social-icons a){background:linear-gradient(155deg,var(--mp-accent),var(--mp-accent2))!important;border:1px solid var(--mp-line)!important;box-shadow:0 0 8px color-mix(in srgb,var(--mp-glow) 35%,transparent)!important;color:var(--mp-button-ink)!important}
html:not([data-mp-theme="red"]) body :is(.social-links a,.footer-social a,.social-icons a) .img-placeholder{background:transparent!important;border:0!important;color:inherit!important}
html:not([data-mp-theme="red"]) body :is(.menu-button,.menu-toggle,.mobile-menu-toggle){border-color:var(--mp-line)!important;box-shadow:0 0 8px color-mix(in srgb,var(--mp-glow) 25%,transparent)!important}
html:not([data-mp-theme="red"]) body :is(.member-actions,.account-actions,.member-nav,.transaction-actions,.member-tabs,.mobile-actions){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body :is(.member-actions,.account-actions,.member-nav,.transaction-actions,.member-tabs) :is(a,button){border-color:var(--mp-line)!important;box-shadow:0 0 8px color-mix(in srgb,var(--mp-glow) 20%,transparent)!important}
html:not([data-mp-theme="red"]) body :is(.bottom-nav,.bottom-nav .bottom-main){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body .bottom-nav .bottom-main{background:linear-gradient(160deg,var(--mp-accent),var(--mp-accent2))!important;box-shadow:0 0 14px color-mix(in srgb,var(--mp-glow) 50%,transparent)!important}
html:not([data-mp-theme="red"]) body :is(.bottom-nav a,.bottom-nav span,.bottom-nav small){text-shadow:none!important}
html[data-mp-theme="green"] body .bottom-nav :is(a,span,small,button){color:#061600!important;text-shadow:none!important}
html[data-mp-theme="green"] body .bottom-nav .bottom-main :is(span,small){color:#061600!important}
/* Only neutral placeholders are recolored; uploaded images are not altered. */
html:not([data-mp-theme="red"]) body :is(.favorite-tile,.slot-card,.promo-card) .img-placeholder{border-color:var(--mp-line)!important;color:var(--mp-highlight)!important}

/* V26: exact selectors found in the current member project. */
html:not([data-mp-theme="red"]) body :is(.member-status-chip,.member-status-refresh){
 background:linear-gradient(145deg,var(--mp-panel),var(--mp-base))!important;
 border:1px solid var(--mp-line)!important;
 box-shadow:0 0 9px color-mix(in srgb,var(--mp-glow) 32%,transparent)!important;
 color:var(--mp-highlight)!important;
}
html:not([data-mp-theme="red"]) body :is(.member-status-chip,.member-status-refresh) :is(.member-status-value,.member-status-icon){color:var(--mp-highlight)!important;text-shadow:none!important}
html:not([data-mp-theme="red"]) body .member-actions-v4 :is(.btn,.btn.gold,.btn.outline){
 background:linear-gradient(155deg,var(--mp-accent),var(--mp-accent2))!important;
 border:1px solid var(--mp-line)!important;
 color:var(--mp-button-ink)!important;
 box-shadow:0 0 10px color-mix(in srgb,var(--mp-glow) 30%,transparent)!important;
}
html:not([data-mp-theme="red"]) body .member-detail-v4{border-color:var(--mp-line)!important;background:linear-gradient(145deg,var(--mp-panel),var(--mp-base))!important}
html:not([data-mp-theme="red"]) body .member-data-v4>div{border-color:var(--mp-border-soft)!important;background:linear-gradient(145deg,var(--mp-panel),var(--mp-base))!important}
html:not([data-mp-theme="red"]) body :is(.member-detail-v4 h2,.member-data-v4 small){color:var(--mp-highlight)!important}
html:not([data-mp-theme="red"]) body .member-status-refresh:hover{background:var(--mp-accent)!important;color:var(--mp-button-ink)!important}
html:not([data-mp-theme="red"]) body :is(.social-links a,.footer-social a){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body :is(.slide-arrow,.slider,.footer-bottom,.footer-payments){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body :is(.mobile-drawer,.mobile-drawer a,.drawer-title,.bottom-nav){border-color:var(--mp-line)!important}
html:not([data-mp-theme="red"]) body .member-actions-v4 .btn:hover{filter:brightness(1.12)}
/* Bright themes: high contrast inside controls. */
html:is([data-mp-theme="yellow"],[data-mp-theme="cyan"],[data-mp-theme="orange"],[data-mp-theme="green"]) body .member-actions-v4 .btn{color:#101010!important}
html[data-mp-theme="green"] body .bottom-nav :is(a,button,span,small){color:#061600!important}

/* FIX TOMBOL PROFIL - SEMUA 7 TEMA */
html[data-mp-theme] .side-card .btn.gold,
html[data-mp-theme] .side-card .btn.outline {
    background: linear-gradient(
        135deg,
        var(--mp-accent),
        var(--mp-accent2)
    ) !important;

    border: 1px solid var(--mp-line) !important;
    color: #ffffff !important;

    box-shadow: 0 0 10px var(--mp-shadow) !important;
    text-decoration: none;
    transition: all .2s ease;
}

/* Tulisan gelap pada tema terang */
html[data-mp-theme="yellow"] .side-card .btn,
html[data-mp-theme="cyan"] .side-card .btn,
html[data-mp-theme="orange"] .side-card .btn,
html[data-mp-theme="green"] .side-card .btn {
    color: #101010 !important;
}

/* Efek hover */
html[data-mp-theme] .side-card .btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 16px var(--mp-glow) !important;
}


/* ==============================================================
   MAHKOTA DARK UNIFIED V27
   Neutral UI surfaces are PERMANENT across all theme presets.
   Theme accents are retained in main navigation and primary actions.
   ============================================================= */
html[data-mp-theme] {
  --mp-neutral-outer: #0e1013;
  --mp-neutral-card: #111316;
  --mp-neutral-inner: #191b1e;
  --mp-neutral-stroke: #3b3f45;
  --mp-neutral-copy: #f4f5f6;
  --mp-neutral-muted: #b4b7bc;
  --mp-credit-a: #34373c;
  --mp-credit-b: #202328;
  --mp-credit-line: #797e86;
}

/* Main forms: fixed graphite black for every website theme. */
html[data-mp-theme] body :is(.register-wrap,.mp-panel,.ht-panel,.transaction-form,.transaction-info,
 .login-dialog,.transaction-popup-card,.member-page > .content-panel,
 .member-detail-v4,.content-panel.expandable-article,
 .favorites,.promo-card,.secondary,.service,.side-card:not(:has(.side-links)),
 .mp-promo-empty) {
  background: linear-gradient(155deg,#111316,#090a0d) !important;
  background-color:#101114 !important;
  border-color:#36393f !important;
  box-shadow:0 12px 32px rgba(0,0,0,.34) !important;
}
html[data-mp-theme] body :is(.mp-head,.mp-body,.ht-head,.ht-body) {
  background:#101114 !important;
  color:#f4f5f6 !important;
}
html[data-mp-theme] body :is(.member-detail-v4,.member-data-v4 > div,
 .member-profile-grid > .side-card,.ht-item,.ht-empty,.ht-field,
 .rekening-card,.account-box,.mp-info,.mp-section,.register-errors:not(.mp-error)) {
  background:linear-gradient(155deg,#17191d,#0e1013) !important;
  border-color:#44474e !important;
  box-shadow:none !important;
  color:#f4f5f6 !important;
}
/* Prevent bright theme text colors from affecting account headings. */
html[data-mp-theme] body :is(.member-detail-v4 h2,.member-profile-grid h3,
 .member-page .content-panel > h1,.mp-head h1,.ht-head h1,.register-wrap h1,
 .login-dialog h2) { color:#fff !important; }
html[data-mp-theme] body :is(.member-data-v4 small,.ht-field small,.member-page .content-panel > p,
 .mp-head p,.ht-head p,.register-intro,.login-dialog p) { color:#b5b8bf !important; }
html[data-mp-theme] body .member-data-v4 strong { color:#fff !important; }

/* Favorite slots: keep two animated rows and original tile dimensions. */
html[data-mp-theme] body .favorites{
  background:linear-gradient(180deg,rgba(15,16,19,.96),rgba(8,9,12,.97)) !important;
  border-top:1px solid #474950 !important;
  border-bottom:1px solid #474950 !important;
}
html[data-mp-theme] body .favorite-tile,
html[data-mp-theme] body .favorite-tile > .img-placeholder{
  background:#17191c !important;
  border-color:#50545a !important;
}
html[data-mp-theme] body .favorite-tile > .img-placeholder{
  background:repeating-linear-gradient(135deg,#1a1d20 0,#1a1d20 13px,#121417 13px,#121417 26px) !important;
  color:#e2e3e6 !important;
}

/* Article panel is content, not a red themed promotional box. */
html[data-mp-theme] body .expandable-article,
html[data-mp-theme] body .content-panel:has(.article-body){
  background:#101114 !important;
  border:1px solid #3c4045 !important;
}
html[data-mp-theme] body .expandable-article:not(.expanded) .article-body:after{
  background:linear-gradient(to bottom,transparent,#101114) !important;
}

/* Deposit + Withdraw bank cards: fixed metallic gray credit-card finish. */
html[data-mp-theme] body :is(.mp-bank,.mp-account-card,.mp-primary-account,.mp-secondary-account){
  background:linear-gradient(140deg,#373b42 0%,#282c32 55%,#1c2025 100%) !important;
  border:1px solid #7a8089 !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 20px rgba(0,0,0,.22) !important;
  color:#fff !important;
}
html[data-mp-theme] body .mp-account input:checked + .mp-account-card{
  background:linear-gradient(140deg,#454a51,#282c32 62%,#1c2025) !important;
  border:2px solid #bec3cb !important;
  box-shadow:0 0 0 1px #15171b,0 8px 20px #0005 !important;
}
html[data-mp-theme] body :is(.mp-bank-caption,.mp-account-tag,.mp-bank-name,
 .mp-bank-number,.mp-bank-owner,.mp-account-bank,.mp-account-number,.mp-account-owner){
  color:#f5f6f7 !important;
}
html[data-mp-theme] body .mp-account-check{border-color:#d6d9de !important;}
html[data-mp-theme] body .mp-account input:checked + .mp-account-card .mp-account-check{
  background:#d9dce0 !important;border-color:#d9dce0 !important;color:#17191c !important;
}

/* Inputs stay legible on dark surfaces, regardless of accent theme. */
html[data-mp-theme] body :is(.register-grid input,.register-grid select,.mp-control,
 .transaction-fields input,.transaction-fields select,
 .login-dialog input,.ht-custom input,.ht-custom select){
  background:#f5f6f7 !important;
  color:#151719 !important;
  border:1px solid #a9adb4 !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .login-dialog input{
  background:#191b20 !important;
  color:#fff !important;
  border:1px solid #50545a !important;
}
html[data-mp-theme] body :is(.mp-control,.register-grid input,.register-grid select,
 .login-dialog input):focus-visible{
  border-color:#a8adb6 !important;
  outline:2px solid #a8adb6 !important;
  outline-offset:1px !important;
}

/* Account overview typography, buttons, and layout. No changes to form data. */
html[data-mp-theme] body .member-page > .content-panel{
  padding:clamp(16px,2vw,28px) !important;
  border-radius:16px !important;
}
html[data-mp-theme] body .member-page .member-profile-grid{
  gap:14px !important;
  margin-top:18px !important;
}
html[data-mp-theme] body .member-page .member-profile-grid > .side-card{
  padding:20px !important;
  border-radius:12px !important;
  min-width:0 !important;
  margin:0 !important;
}
html[data-mp-theme] body .member-page .member-profile-grid .btn,
html[data-mp-theme] body .member-actions-v4 .btn{
  background:#21242a !important;
  border:1px solid #50545b !important;
  color:#f5f6f7 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:750 !important;
  min-height:38px;
}
html[data-mp-theme] body .member-page .member-profile-grid .btn:hover,
html[data-mp-theme] body .member-actions-v4 .btn:hover{
  background:#30343b !important;border-color:#888d96 !important;
}
html[data-mp-theme] body .member-detail-v4{padding:clamp(17px,2vw,26px) !important;margin-top:17px !important;}
html[data-mp-theme] body .member-data-v4{gap:11px !important;}
html[data-mp-theme] body .member-data-v4 > div{border-radius:9px !important;padding:13px 15px !important;}
html[data-mp-theme] body .member-actions-v4{margin-top:16px !important;gap:8px !important;}

/* Member ID bar: black pills, username & IDR white, numeric balance green. */
html[data-mp-theme] body .top-inner .member-status{
  background:#24262b !important;border:1px solid #4d5158 !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .top-inner :is(.member-status-chip,.member-status-user,.member-status-money){
  background:#0b0d10 !important;border-color:#25282e !important;
  box-shadow:none !important;color:#fff !important;
}
html[data-mp-theme] body .top-inner .member-status-user .member-status-value{
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
html[data-mp-theme] body .top-inner .member-status-money .member-status-value{
  color:#53f080 !important;-webkit-text-fill-color:#53f080 !important;
  text-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-refresh{
  background:#33363c !important;border-color:#4c5159 !important;
  box-shadow:none !important;color:#fff !important;
}
@media(max-width:768px){
  html[data-mp-theme] body .member-page .member-profile-grid > .side-card{padding:16px !important;}
}


/* ============================================================
   V28 - PRECISION CORRECTIONS (ALL SEVEN THEMES)
   Maintain existing account bar dimensions, spacing and layout.
   ============================================================ */
/* Deposit bank matches Withdraw graphite card, without theme colours. */
html[data-mp-theme] body .mp-page .mp-bank,
html[data-mp-theme] body .mp-page .mp-account-card,
html[data-mp-theme] body .mp-bank,
html[data-mp-theme] body .mp-account-card {
  background:linear-gradient(145deg,#3b3e43 0%,#303339 52%,#23262b 100%) !important;
  background-color:#303339 !important;
  border:1px solid #9ba0a8 !important;
  box-shadow:inset 0 1px 0 #ffffff1b,0 8px 20px #0004 !important;
  color:#f5f5f5 !important;
}
html[data-mp-theme] body .mp-account input:checked + .mp-account-card {
  background:linear-gradient(145deg,#3d4147,#282b30) !important;
  border:2px solid #c5c8cf !important;
  box-shadow:0 5px 18px #0004 !important;
}
html[data-mp-theme] body :is(.mp-bank-caption,.mp-bank-name,.mp-bank-number,.mp-bank-owner,
.mp-account-tag,.mp-account-bank,.mp-account-number,.mp-account-owner){color:#f8f9fa !important;}
/* Keep bank-copy functional, but neutral-gray instead of cyan/yellow. */
html[data-mp-theme] body .mp-copy {
  background:linear-gradient(180deg,#656b73,#444950) !important;
  border:1px solid #89909a !important;
  box-shadow:none !important;
  color:#fff !important;
}
/* Popup login stays almost black; main MASUK action follows active theme. */
html[data-mp-theme] body .login-modal .login-dialog {
  background:linear-gradient(150deg,#121418,#08090c) !important;
  border:1px solid #4b4f56 !important;
  box-shadow:0 24px 65px #000b !important;
}
html[data-mp-theme] body .login-modal .login-dialog .login-submit {
  background:linear-gradient(180deg,var(--mp-accent),var(--mp-accent2)) !important;
  border:1px solid var(--mp-line) !important;
  color:var(--mp-button-ink,#fff) !important;
  box-shadow:none !important;
}
/* CAPTCHA border, refresh and frame stay graphite on any theme. */
html[data-mp-theme] body .register-wrap .captcha-row img,
html[data-mp-theme] body #captcha-image {
  background:#24262b !important;
  border:1px solid #6b7078 !important;
  box-shadow:none !important;
}
html[data-mp-theme] body #captcha-refresh {
  background:linear-gradient(180deg,#545960,#33373d) !important;
  border:1px solid #9298a0 !important;
  color:#fff !important;
  box-shadow:none !important;
}
html[data-mp-theme] body #captcha-refresh:hover{background:#626971 !important;}
/* Header account bar: colour change ONLY, not size/shape. */
html[data-mp-theme] body .top-inner .member-status{
  background:linear-gradient(180deg,#363636,#242424) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-chip{
  background:#0c0c0d !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-user .member-status-value,
html[data-mp-theme] body .top-inner .member-status-money .mp-balance-currency{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html[data-mp-theme] body .top-inner .member-status-money .mp-balance-amount{
  color:#53f080 !important;
  -webkit-text-fill-color:#53f080 !important;
}
html[data-mp-theme] body .top-inner .member-status-money .member-status-value:not(:has(.mp-balance-amount)){
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html[data-mp-theme] body .top-inner .member-status-refresh{
  background:#3a3a3a !important;
  color:#f3f4f6 !important;
  border:0 !important;
  box-shadow:none !important;
}


/* ============================================================
   V29 — DRAWER DARK + ORIGINAL MEMBER STATUS GEOMETRY
   Keep original V20/V21 layout dimensions and JS untouched.
   Colors alone are fixed across all seven theme presets.
   ============================================================ */

/* Slide-out menu: charcoal, neutral separators and close button. */
html[data-mp-theme] body .mobile-drawer:not([hidden]) {
  background:#0d0e10 !important;
  background-image:none !important;
  border-color:#303238 !important;
  box-shadow:-14px 0 36px #0009 !important;
}
html[data-mp-theme] body .mobile-drawer:not([hidden]) a {
  background:transparent !important;
  border-bottom:1px solid #2c2f35 !important;
  color:#f4f4f5 !important;
}
html[data-mp-theme] body .mobile-drawer:not([hidden]) a:hover,
html[data-mp-theme] body .mobile-drawer:not([hidden]) a:focus-visible {
  background:#1c1e22 !important;
}
html[data-mp-theme] body .mobile-drawer:not([hidden]) .drawer-title {
  color:#f5f5f5 !important;
}
html[data-mp-theme] body .mobile-drawer:not([hidden]) .drawer-title button {
  background:#23262b !important;
  border:1px solid #555961 !important;
  color:#fff !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .mobile-drawer:not([hidden]) .drawer-title button:hover {
  background:#373b42 !important;
}

/* Only the header DAFTAR action: black card, light label. */
html[data-mp-theme] body .mobile-auth-bar > a.btn.red,
html[data-mp-theme] body .desktop-login > a.btn.outline {
  background:#0b0d10 !important;
  background-image:none !important;
  border:1px solid #565b64 !important;
  color:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html[data-mp-theme] body .mobile-auth-bar > a.btn.red:hover,
html[data-mp-theme] body .desktop-login > a.btn.outline:hover {
  background:#24272d !important;
}

/* Member status: do NOT change width, padding, height, flex, margin,
   grid position or border radius — these stay in assets/style.css. */
html[data-mp-theme] body .top-inner .member-status {
  background:linear-gradient(180deg,#303236,#1f2023) !important;
  border-color:#4a4d54 !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-chip,
html[data-mp-theme] body .top-inner .member-status-user,
html[data-mp-theme] body .top-inner .member-status-money {
  background:#0a0b0d !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-user .member-status-value,
html[data-mp-theme] body .top-inner .member-status-money .mp-balance-currency {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-money .mp-balance-amount {
  color:#53f080 !important;
  -webkit-text-fill-color:#53f080 !important;
  text-shadow:none !important;
}
html[data-mp-theme] body .top-inner .member-status-money .member-status-value:not(:has(.mp-balance-amount)) {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html[data-mp-theme] body .top-inner .member-status-refresh {
  background:#32353a !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  color:#f5f5f5 !important;
}
html[data-mp-theme] body .top-inner .member-status-refresh:hover {
  background:#41454b !important;
  color:#fff !important;
}
@media(max-width:768px) {
  /* Restore the mobile outer bar styling from style.css V21. */
  html[data-mp-theme] body .top .top-inner > .member-status {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* V32 - WARNA SAJA: ID dan SALDO hitam pada ketujuh tema.
   Tidak mengatur width, height, padding, flex, grid, margin, border-radius,
   maupun posisi. Semua bentuk tetap mengikuti assets/style.css. */
html[data-mp-theme] body .top .top-inner .member-status .member-status-chip,
html[data-mp-theme] body .top .top-inner .member-status .member-status-user,
html[data-mp-theme] body .top .top-inner .member-status .member-status-money {
    background-color: #0b0b0c !important;
    background-image: none !important;
}

/* Username dan awalan IDR putih; nominal saldo hijau. */
html[data-mp-theme] body .top .top-inner .member-status-user .member-status-value,
html[data-mp-theme] body .top .top-inner .member-status-money .mp-balance-currency {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html[data-mp-theme] body .top .top-inner .member-status-money .mp-balance-amount {
    color: #58ff46 !important;
    -webkit-text-fill-color: #58ff46 !important;
}

/* Refresh hanya digelapkan warnanya, tanpa mengubah bentuk tombol. */
html[data-mp-theme] body .top .top-inner .member-status-refresh {
    background-color: #363636 !important;
    background-image: none !important;
}

/* Pada mobile, pertahankan latar pembungkus transparan (layout V21).
   Jangan mengubah aturan bentuk dari style.css. */
@media (max-width: 768px) {
    html[data-mp-theme] body .top .top-inner > .member-status {
        background-color: transparent !important;
        background-image: none !important;
    }
}