:root{--color-primary:#14284c;--color-primary-dark:#0d1c36;--color-primary-light:#294576;--brand-navy:#101f3b;--brand-gold:#ffc557;--brand-ink:#14213b}
body.scarab-guest,body.scarab-user,body.scarab-admin,body.scarab-auth,body.scarab-admin-auth{color:var(--brand-ink)}
body.scarab-guest nav.fixed{background:#101f3bf2;border-color:#354c70;box-shadow:0 14px 35px #08172b35}
body.scarab-guest nav.fixed img[src*="scarabpay-logo"]{max-width:180px;max-height:48px;object-fit:contain;background:white;border-radius:9px;padding:5px}
body.scarab-guest nav.fixed a:hover{color:#ffd278}
body.scarab-guest footer{background:#101f3b;color:#e8eef8}
body.scarab-guest footer img[src*="scarabpay-logo"]{max-width:185px;width:100%;background:white;padding:6px;border-radius:10px}
body.scarab-guest footer a:hover{color:#ffd278}
body.scarab-guest section:not(.scarab-hero):not(.scarab-choices) h1,body.scarab-guest section:not(.scarab-hero):not(.scarab-choices) h2{color:#14213b}
body.scarab-guest section:not(.scarab-hero):not(.scarab-choices) .rounded-3xl{box-shadow:0 14px 32px #14284c11}
body.scarab-guest :is(a,button)[class*="bg-[#635bfe"],body.scarab-guest :is(a,button)[class*="bg-[#635BFE"]{background:#14284c;color:white}
body.scarab-guest :is(a,button)[class*="text-[#635bfe"],body.scarab-guest :is(a,button)[class*="text-[#635BFE"]{color:#14284c}
body.scarab-guest :is(input,textarea,select):focus{outline-color:#dba741;border-color:#dba741}
body.scarab-user,body.scarab-admin{background:#f4f7fb}
body.scarab-user aside,body.scarab-admin #admin-sidebar{background:#101f3b;color:#e6ecf5;border-color:#304569}
body.scarab-user aside>div,body.scarab-user aside nav,body.scarab-admin #admin-sidebar nav{background:#101f3b;border-color:#304569}
body.scarab-user aside a:has(img[src*="scarabpay-logo"]),body.scarab-admin #admin-sidebar a:has(img[src*="scarabpay-logo"]){background:#fff;border-radius:10px;padding:3px 7px;margin:8px}
body.scarab-user aside img[src*="scarabpay-logo"],body.scarab-admin #admin-sidebar img[src*="scarabpay-logo"]{max-width:175px;max-height:55px;width:auto;object-fit:contain}
body.scarab-user aside nav a,body.scarab-admin #admin-sidebar nav a{color:#dfe8f4}
body.scarab-user aside nav a:hover,body.scarab-admin #admin-sidebar nav a:hover{color:white;background:#294576}
body.scarab-user aside nav a[class*="bg-[#635BFE"],body.scarab-admin #admin-sidebar nav a[class*="bg-[#635BFE"]{background:#f1be58;color:#14213b;font-weight:700}
body.scarab-user>div>header,body.scarab-admin>div>header{background:#fff;border-bottom:1px solid #e1e8f2}
body.scarab-user main,body.scarab-admin main{scrollbar-color:#aebed2 transparent}
body.scarab-user main .bg-primary,body.scarab-admin main .bg-primary{background:#14284c}
body.scarab-user main .text-primary,body.scarab-admin main .text-primary{color:#99620c}
body.scarab-user main .border-primary,body.scarab-admin main .border-primary{border-color:#dcac4f}
body.scarab-user main :is(button,a)[class*="bg-[#635BFE"],body.scarab-admin main :is(button,a)[class*="bg-[#635BFE"]{background:#14284c;color:white}
body.scarab-user main [class*="text-[#635BFE"],body.scarab-admin main [class*="text-[#635BFE"]{color:#14284c}
body.scarab-admin main .grid>div.bg-white{border-top:2px solid #e6b34e}
body.scarab-user main>div,body.scarab-admin main>div{color:#14213b}
body.scarab-auth>div,body.scarab-admin-auth>div{background:radial-gradient(circle at 80% 15%,#29446d,#101f3b 58%,#0b182f)}
body.scarab-auth main,body.scarab-admin-auth main>div{background:#fff!important;border:1px solid #e6c783;box-shadow:0 24px 65px #030b1e65}
body.scarab-auth main img[src*="scarabpay-logo"],body.scarab-admin-auth img[src*="scarabpay-logo"]{max-width:240px;width:100%;height:auto;object-fit:contain}
body.scarab-auth footer{color:#f5e5c3}
body.scarab-auth footer a:hover,body.scarab-admin-auth a:hover{color:#f3ba4c}
body.scarab-auth :is(button,a).bg-primary,body.scarab-admin-auth :is(button,a).bg-primary{background:#14284c;color:white}
body.scarab-auth :is(input,textarea):focus,body.scarab-admin-auth :is(input,textarea):focus{border-color:#dbaa44;outline-color:#dbaa44}
@media(max-width:1023px){body.scarab-user .fixed.bottom-0{background:#fff;border-top:2px solid #edbe64}body.scarab-user .fixed.bottom-0 a[class*="text-[#635BFE"]{color:#14284c}}

/* Replace legacy violet panels without touching transaction status colors. */
body.scarab-guest [class*="bg-[#635bfe"],body.scarab-guest [class*="bg-[#635BFE"],body.scarab-user [class*="bg-[#635bfe"],body.scarab-user [class*="bg-[#635BFE"],body.scarab-admin [class*="bg-[#635bfe"],body.scarab-admin [class*="bg-[#635BFE"]{background-color:#14284c}
body.scarab-guest [class*="border-[#635bfe"],body.scarab-user [class*="border-[#635BFE"],body.scarab-admin [class*="border-[#635BFE"]{border-color:#e0ae4d}
body.scarab-guest [class*="text-[#635bfe"],body.scarab-user [class*="text-[#635bfe"],body.scarab-user [class*="text-[#635BFE"],body.scarab-admin [class*="text-[#635BFE"]{color:#14284c}
body.scarab-user main .header[class*="bg-[linear-gradient"]{background:linear-gradient(115deg,#101f3b,#2a4877)!important;color:white}
body.scarab-user main :is(button,a)[class*="bg-[#EFEFFF"]{background:#f8efd9;color:#14213b}
body.scarab-auth main :is(h1,h2),body.scarab-admin-auth main :is(h1,h2){color:#14213b}
body.scarab-user :is(input,select,textarea):focus,body.scarab-admin :is(input,select,textarea):focus{outline-color:#d9a847;border-color:#d9a847}

body.scarab-admin-auth header a:has(img[src*="scarabpay-logo"]){background:white;border-radius:12px;padding:7px 16px}
body.scarab-admin-auth main>div{border-radius:20px}

body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="bg-[#83c8ff"],body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="bg-[#83C8FF"]{background-color:#b77e22}
body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="text-[#83c8ff"],body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="text-[#83C8FF"]{color:#a66c12}
body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="border-[#83c8ff"],body:is(.scarab-guest,.scarab-user,.scarab-admin,.scarab-auth,.scarab-admin-auth) [class*="border-[#83C8FF"]{border-color:#e0b557}
body.scarab-guest footer [class*="bg-[#736bfe"]{background:#294576}
body.scarab-auth [class*="text-[#635BFE"],body.scarab-admin-auth [class*="text-[#635BFE"]{color:#14284c}

/* Public subpage heroes: replace the legacy violet-to-cyan gradient. */
body.scarab-guest section.hero{background:radial-gradient(circle at 78% 32%,#29456e 0%,#142847 42%,#0b182f 100%)!important;color:#fff;isolation:isolate}
body.scarab-guest section.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(#f2bd57 1px,transparent 1.5px);background-size:28px 28px;opacity:.17;mask-image:linear-gradient(90deg,transparent 20%,#000 100%);z-index:0}
body.scarab-guest section.hero>div[class*="bg-[url"]{display:none}
body.scarab-guest section.hero h1{color:#fff!important;font-weight:800;letter-spacing:-.035em}
body.scarab-guest section.hero p{color:#dbe6f6!important}
body.scarab-guest section.hero .rounded-full{border-color:#e9bc6388;background:#ffffff12;color:#ffe0a0}
body.scarab-guest section.hero svg.fill-white{fill:#fff}
body.scarab-guest section:not(.hero):not(.scarab-hero) h2{color:#14213b}
body.scarab-guest section:not(.hero):not(.scarab-hero) [class*="border-[#83C8FF"]{border-color:#dfbc77;box-shadow:0 14px 30px #14284c10}
body.scarab-guest section:not(.hero):not(.scarab-hero) [class*="text-[#2563eb"]{color:#9b6511}
body.scarab-guest section:not(.hero):not(.scarab-hero) [class*="bg-[#eff6ff"]{background:#fff8e9}
body.scarab-guest section:not(.hero):not(.scarab-hero) [class*="bg-[#F7F7FF"]{background:#f7f9fc}
@media(max-width:640px){body.scarab-guest section.hero{min-height:400px!important}body.scarab-guest section.hero h1{font-size:2.3rem}}

/* Customer dashboard theme. Keep every rule within the customer body scope. */
body.scarab-user {
 --scarab-primary:#007a5a;
 --scarab-primary-hover:#00664b;
 --scarab-primary-soft:#e7f5ef;
 --scarab-bg:#f6f8f7;
 --scarab-surface:#fff;
 --scarab-text:#17212b;
 --scarab-text-muted:#687783;
 --scarab-border:#e3eae7;
 --scarab-danger:#dc3545;
 --color-primary:var(--scarab-primary);
 --color-primary-dark:var(--scarab-primary-hover);
 --brand-ink:var(--scarab-text);
 background:var(--scarab-bg);
 color:var(--scarab-text);
}
body.scarab-user .scarab-customer-sidebar,
body.scarab-user .scarab-customer-sidebar>div,
body.scarab-user .scarab-customer-sidebar nav {
 background:var(--scarab-surface);
 color:var(--scarab-text);
 border-color:var(--scarab-border);
}
body.scarab-user .scarab-customer-sidebar {
 border-inline-end:1px solid var(--scarab-border);
}
body.scarab-user .scarab-customer-sidebar nav {
 margin-top:8px;
 padding-inline:12px;
 box-shadow:none;
}
body.scarab-user .scarab-customer-sidebar nav a {
 color:var(--scarab-text-muted);
 border-radius:12px;
}
body.scarab-user .scarab-customer-sidebar nav a:hover,
body.scarab-user .scarab-customer-sidebar nav a.scarab-nav-inactive:hover {
 color:var(--scarab-primary);
 background:var(--scarab-primary-soft);
}
body.scarab-user .scarab-customer-sidebar nav a.scarab-nav-active {
 color:var(--scarab-primary);
 background:var(--scarab-primary-soft);
 font-weight:700;
}
body.scarab-user .scarab-customer-sidebar nav a.scarab-nav-active svg,
body.scarab-user .scarab-customer-sidebar nav a:hover svg {color:var(--scarab-primary)}
body.scarab-user .scarab-customer-sidebar nav form button {color:var(--scarab-danger)}
body.scarab-user .scarab-customer-sidebar nav form button:hover {background:#fff1f2}
body.scarab-user .scarab-customer-sidebar nav hr {border-color:var(--scarab-border)}
body.scarab-user .scarab-customer-sidebar nav .bg-primary {background:var(--scarab-primary)}
body.scarab-user .scarab-customer-sidebar nav a:has(img[src*="scarabpay-logo"]) {background:transparent}
body.scarab-user .scarab-customer-header {
 background:var(--scarab-surface);
 color:var(--scarab-text);
 border:1px solid var(--scarab-border);
 box-shadow:none;
}
body.scarab-user .scarab-customer-header :is(button,a):focus-visible,
body.scarab-user .scarab-customer-sidebar :is(button,a):focus-visible,
body.scarab-user .scarab-mobile-nav :is(button,a):focus-visible {
 outline:2px solid var(--scarab-primary);outline-offset:2px;
}
body.scarab-user .scarab-customer-header :is(a,button)[class*="text-[#635BFE"],
body.scarab-user .scarab-customer-header :is(a,button)[class*="hover:text-[#635BFE"]:hover,
body.scarab-user .scarab-customer-header .text-primary {color:var(--scarab-primary)}
body.scarab-user .scarab-customer-header [class*="bg-[#635BFE"] {background:var(--scarab-primary-soft);color:var(--scarab-primary)}
body.scarab-user .scarab-customer-header :is(button,a):hover {border-color:var(--scarab-border)}
body.scarab-user .scarab-customer-header [class*="hover:bg-[#635BFE"]:hover {background:var(--scarab-primary-soft)}
body.scarab-user main {scrollbar-color:#bccbc4 transparent}
body.scarab-user main .bg-primary {background:var(--scarab-primary)}
body.scarab-user main .text-primary {color:var(--scarab-primary)}
body.scarab-user main .border-primary {border-color:var(--scarab-primary)}
body.scarab-user main :is(button,a)[class*="bg-[#635BFE"] {background:var(--scarab-primary);color:#fff}
body.scarab-user main [class*="text-[#635BFE"],
body.scarab-user main [class*="text-[#635bfe"] {color:var(--scarab-primary)}
body.scarab-user :is(input,select,textarea):focus {outline-color:var(--scarab-primary);border-color:var(--scarab-primary)}
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 {
 background:var(--scarab-surface);
 border-top:1px solid var(--scarab-border);
 box-shadow:0 -4px 20px #17212b0b;
}
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 a[class*="text-[#635BFE"],
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 button[class*="text-[#635BFE"],
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 button[class*="text-[#635BFE"]:hover {
 color:var(--scarab-primary);
}
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 img,
body.scarab-user .scarab-mobile-nav [x-show="mobileMoreOpen"] img {filter:grayscale(1);opacity:.75}
body.scarab-user .scarab-mobile-nav .fixed.bottom-0 a[class*="text-[#635BFE"] img,
body.scarab-user .scarab-mobile-nav [x-show="mobileMoreOpen"] a[class*="text-[#635BFE"] img {filter:none;opacity:1}
body.scarab-user .scarab-mobile-nav [x-show="mobileMoreOpen"] {
 border-color:var(--scarab-border);
 box-shadow:0 12px 30px #17212b18;
}
body.scarab-user .scarab-mobile-nav [x-show="mobileMoreOpen"] a[class*="text-[#635BFE"] {
 color:var(--scarab-primary);
 background:var(--scarab-primary-soft);
}
body.scarab-user .scarab-mobile-nav [x-show="mobileMoreOpen"] a:hover {
 background:var(--scarab-primary-soft);
}

/* Phase 1.1: compact customer navigation and header, without altering other shells. */
body.scarab-user .scarab-customer-sidebar>div:first-child {
 height:68px;
 flex-shrink:0;
}
body.scarab-user .scarab-customer-sidebar nav {
 margin-top:6px;
 padding-block:13px;
}
body.scarab-user .scarab-customer-sidebar nav a:not(:has(img[src*="scarabpay-logo"])) {
 min-height:43px;
 padding-block:9px;
 padding-inline:11px;
}
body.scarab-user .scarab-customer-sidebar nav a svg {
 width:21px;
 height:21px;
 flex-shrink:0;
}
body.scarab-user .scarab-customer-header {
 min-height:64px;
 padding-block:7px;
 padding-inline:17px;
 gap:8px;
}
body.scarab-user .scarab-customer-header>div.ms-auto {
 align-items:center;
 gap:10px;
}
body.scarab-user .scarab-customer-header>div.ms-auto :is(a,button) {
 transition:background-color .18s,color .18s,border-color .18s;
}
@media(min-width:1024px) {
 body.scarab-user .scarab-customer-header {min-height:62px}
 body.scarab-user .scarab-customer-header>div.ms-auto {gap:12px}
}
@media(max-width:1023px) {
 body.scarab-user .scarab-customer-header {min-height:0}
}