/* ===== Apex Commerce polish (on top of Skote) ===== */
:root{--apx-radius:12px;--apx-shadow:0 2px 12px rgba(18,38,63,.06);--apx-shadow-hover:0 8px 24px rgba(18,38,63,.10)}
body{background:#f5f6fb}
.card{border:0;border-radius:var(--apx-radius);box-shadow:var(--apx-shadow)}
.card-header{border-top-left-radius:var(--apx-radius)!important;border-top-right-radius:var(--apx-radius)!important;border-bottom:1px solid #eff2f7}
.card-footer{border-top:1px solid #eff2f7;border-bottom-left-radius:var(--apx-radius)!important;border-bottom-right-radius:var(--apx-radius)!important}
.btn{border-radius:8px}
.btn-rounded{border-radius:30px}
.form-control,.form-select,.input-group-text{border-radius:8px}
.input-group>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.input-group>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.form-control:focus,.form-select:focus{border-color:#556ee6;box-shadow:0 0 0 .2rem rgba(85,110,230,.15)}
.modal-content{border:0;border-radius:14px}
.table>thead.table-light th{font-weight:600;color:#495057;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;background:#f8f9fc}
.table>tbody tr{transition:background .15s}
.table-hover>tbody tr:hover,.table>tbody tr:hover{background:#fafbff}
.badge{font-weight:600;padding:.4em .7em;border-radius:20px}
.badge i{font-size:1.05em;vertical-align:-1px;margin-right:2px}
.alert{border:0;border-radius:10px;display:flex;gap:10px;align-items:flex-start}
.alert>i.alert-ico{font-size:20px;line-height:1.1}
.alert-dismissible .btn-close{top:50%;transform:translateY(-50%);padding:.9rem}

/* soft colour helpers (Skote bg-soft) */
.bg-primary.bg-soft,.soft-primary{background-color:rgba(85,110,230,.14)!important;color:#556ee6}
.bg-success.bg-soft,.soft-success{background-color:rgba(52,195,143,.16)!important;color:#1f9e70}
.bg-warning.bg-soft,.soft-warning{background-color:rgba(241,180,76,.18)!important;color:#c98a16}
.bg-info.bg-soft,.soft-info{background-color:rgba(80,165,241,.16)!important;color:#2a86d8}
.bg-danger.bg-soft,.soft-danger{background-color:rgba(244,106,106,.15)!important;color:#e04848}

/* page title */
.page-title-box{padding-bottom:18px}
.page-title-box h4{font-weight:700}
.page-subtitle{color:#74788d;font-size:13px;margin-top:4px}

/* stat cards */
.stat-card{transition:transform .15s,box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--apx-shadow-hover)}
.stat-card .stat-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}
.stat-card h4{font-weight:700}

/* welcome card */
.welcome-card{background:linear-gradient(135deg,#2a3042 0%,#3b4468 100%);color:#fff;overflow:hidden;position:relative}
.welcome-card .text-white-50{color:rgba(255,255,255,.7)!important}
.welcome-card .wc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.25)}
.welcome-card .wc-coin{position:absolute;right:-30px;top:-30px;width:180px;opacity:.12;pointer-events:none}
.welcome-card .form-control{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:12px;background:#fff;color:#495057;box-shadow:var(--apx-shadow);text-align:center;font-weight:600;transition:transform .15s,box-shadow .15s}
.quick-action:hover{color:#556ee6;transform:translateY(-2px);box-shadow:var(--apx-shadow-hover)}
.quick-action i{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
@media (max-width:575px){.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* how it works */
.how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;counter-reset:hs}
.how-step{position:relative;padding:14px 14px 14px 52px;border-radius:12px;background:#fff;box-shadow:var(--apx-shadow);min-height:64px}
.how-step::before{counter-increment:hs;content:counter(hs);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;background:rgba(85,110,230,.14);color:#556ee6;font-weight:700;display:flex;align-items:center;justify-content:center}
.how-step b{display:block;color:#343a40;margin-bottom:2px}
.how-step span{color:#74788d;font-size:12.5px}
.step-badge{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#556ee6;color:#fff;font-size:12px;font-weight:700;align-items:center;justify-content:center;margin-right:6px}

/* wizard progress (auth) */
.wizard-steps{display:flex;gap:8px;margin-bottom:20px}
.wizard-steps .ws{flex:1;text-align:center;font-size:12px;color:#74788d}
.wizard-steps .ws::before{content:"";display:block;height:4px;border-radius:4px;background:#e9ebec;margin-bottom:6px}
.wizard-steps .ws.done::before,.wizard-steps .ws.active::before{background:#556ee6}
.wizard-steps .ws.active{color:#556ee6;font-weight:600}

/* auth pages */
.account-pages{min-height:100vh;margin:0!important;padding:48px 0;background:radial-gradient(circle at 10% 10%,rgba(85,110,230,.12),transparent 40%),radial-gradient(circle at 90% 90%,rgba(52,195,143,.10),transparent 40%),#f5f6fb}
.account-pages .card{box-shadow:0 10px 40px rgba(18,38,63,.10)}

/* password eye + strength */
.pw-toggle{border-left:0;background:#fff;color:#74788d}
.pw-toggle:hover{color:#556ee6}
.input-group .form-control.pw-field{border-right:0}
.pw-meter{height:4px;border-radius:4px;background:#e9ebec;margin-top:6px;overflow:hidden}
.pw-meter>span{display:block;height:100%;width:0;transition:width .2s,background .2s}
.pw-meter-label{font-size:12px;margin-top:3px}

/* sidebar */
.vertical-menu #sidebar-menu ul li a{border-radius:8px;margin:1px 10px;padding-left:14px}
#sidebar-menu ul li a.active,#sidebar-menu ul li.mm-active>a{background:rgba(255,255,255,.06)}

/* mobile bottom nav (user panel) */
.bottom-nav{display:none}
@media (max-width:991.98px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1005;background:#fff;box-shadow:0 -2px 12px rgba(18,38,63,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:#74788d;padding:4px 0}
  .bottom-nav a i{font-size:22px}
  .bottom-nav a.active{color:#556ee6;font-weight:600}
  body.has-bottom-nav .footer{padding-bottom:80px}
  body.has-bottom-nav .page-content{padding-bottom:90px}
}

/* existing components */
.coin-3d{width:36px;height:36px;border-radius:50%;box-shadow:0 2px 8px rgba(241,180,76,.5)}
.product-card{transition:transform .15s,box-shadow .15s}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--apx-shadow-hover)}
.product-card .product-img{height:200px;display:flex;align-items:center;justify-content:center;background:#f8f9fc;border-radius:10px;overflow:hidden}
.product-card .product-img img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .25s}
.product-card:hover .product-img img{transform:scale(1.04)}
.product-card .card-body{display:flex;flex-direction:column}
.product-card .product-actions{margin-top:auto}
.thumb-sm{width:48px;height:48px;object-fit:contain;background:#f8f9fc;border-radius:8px}
.table-img{width:44px;height:44px;object-fit:cover;border-radius:8px;cursor:zoom-in}
.pay-account{border:2px solid #e9ebec;border-radius:10px;padding:12px 14px;cursor:pointer;display:block;transition:border-color .15s,background .15s}
.pay-account:hover{border-color:#aab6f2}
.btn-check:checked + .pay-account{border-color:#556ee6;background:rgba(85,110,230,.05)}
.btn-check:checked + .pay-account::after{content:"\2713  Selected";display:block;margin-top:6px;font-size:12px;font-weight:600;color:#556ee6}
.copy-inline{cursor:pointer}
.camera-box video,.camera-box canvas{width:100%;max-height:320px;border-radius:10px;background:#000}
.proof-preview{max-height:220px;border-radius:10px;border:1px solid #e9ebec}
.timeline-simple{list-style:none;padding-left:0;margin:0}
.timeline-simple li{position:relative;padding:0 0 16px 26px;border-left:2px solid #e9ebec;margin-left:8px}
.timeline-simple li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline-simple li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#556ee6;box-shadow:0 0 0 3px rgba(85,110,230,.18)}
.chat-msg{max-width:80%;padding:10px 14px;border-radius:12px;margin-bottom:10px}
.chat-msg.me{background:rgba(85,110,230,.1);margin-left:auto;border-bottom-right-radius:4px}
.chat-msg.them{background:#f3f4f8;border-bottom-left-radius:4px}
.gallery-thumb{width:64px;height:64px;object-fit:contain;background:#f8f9fc;border:2px solid #e9ebec;border-radius:8px;cursor:pointer}
.gallery-thumb.active{border-color:#556ee6}
.product-main-img{height:360px;display:flex;align-items:center;justify-content:center;background:#f8f9fc;border-radius:12px}
.product-main-img img{max-height:100%;max-width:100%;object-fit:contain}
.empty-state{text-align:center;padding:32px 12px;color:#74788d}
.empty-state i{font-size:42px;color:#c3cbe4;display:block;margin-bottom:8px}

/* referral tree */
.ref-tree-wrap{overflow-x:auto;padding-bottom:10px}
.ref-tree{display:inline-block;min-width:100%;text-align:center}
.ref-tree ul{padding-top:20px;position:relative;display:flex;justify-content:center;margin:0;padding-left:0}
.ref-tree li{list-style:none;position:relative;padding:20px 6px 0;text-align:center}
.ref-tree li::before,.ref-tree li::after{content:"";position:absolute;top:0;right:50%;border-top:2px solid #ced4da;width:50%;height:20px}
.ref-tree li::after{right:auto;left:50%;border-left:2px solid #ced4da}
.ref-tree li:only-child::after,.ref-tree li:only-child::before{display:none}
.ref-tree li:only-child{padding-top:0}
.ref-tree li:first-child::before,.ref-tree li:last-child::after{border:0 none}
.ref-tree li:last-child::before{border-right:2px solid #ced4da;border-radius:0 5px 0 0}
.ref-tree li:first-child::after{border-radius:5px 0 0 0}
.ref-tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid #ced4da;width:0;height:20px}
.ref-tree > ul{padding-top:0}
.tree-node{display:inline-block;width:108px;padding:10px 6px;border:1px solid #e9ebec;border-radius:12px;background:#fff;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s}
.tree-node:hover{border-color:#556ee6;box-shadow:0 6px 16px rgba(85,110,230,.18);transform:translateY(-2px)}
.tree-node img{width:42px;height:42px;border-radius:50%;object-fit:cover;margin-bottom:6px}
.tree-node .tn-name{font-size:12px;font-weight:600;color:#343a40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-node .tn-level{display:inline-block;margin-top:4px;font-size:11px;padding:1px 8px;border-radius:10px;background:#eff2f7;color:#495057}
.tree-node.root{border-color:#556ee6;background:rgba(85,110,230,.06)}
.tree-node.root .tn-level{background:#556ee6;color:#fff}
.otp-input{letter-spacing:12px;font-size:26px;text-align:center;font-weight:700}
.chart-box{position:relative;height:300px}

/* ================= Theme toggle ================= */
.dash-banner{border-radius:var(--apx-radius);overflow:hidden;box-shadow:var(--apx-shadow);margin-bottom:24px;background:#0f3b2c}
.dash-banner .carousel-item img{width:100%;aspect-ratio:16/9;max-height:420px;object-fit:cover;display:block}
.dash-banner .carousel-indicators [data-bs-target]{width:9px;height:9px;border-radius:50%;border:0;margin:0 4px}
.dash-banner .carousel-control-prev,.dash-banner .carousel-control-next{width:44px;opacity:.85}
.order-track{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:4px 0 2px}
.ot-step{flex:1;min-width:62px;text-align:center;position:relative}
.ot-step::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:3px;background:#e9ebec;z-index:0}
.ot-step:first-child::before{display:none}
.ot-step.done::before,.ot-step.current::before{background:#34c38f}
.ot-dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#eff2f7;color:#74788d;font-size:17px;border:3px solid #fff}
.ot-step.done .ot-dot{background:#34c38f;color:#fff}
.ot-step.current .ot-dot{background:#556ee6;color:#fff;box-shadow:0 0 0 4px rgba(85,110,230,.2)}
.ot-label{display:block;font-size:11.5px;margin-top:4px;color:#74788d;line-height:1.2}
.ot-step.current .ot-label{color:#556ee6;font-weight:700}
.ot-step.done .ot-label{color:#1f9e70}
[data-bs-theme=dark] .ot-step::before{background:#3b4360}
[data-bs-theme=dark] .ot-dot{background:#32394e;border-color:var(--apx-card)}
.value-note{font-size:11.5px;color:#74788d}
.wallet-hero{background:linear-gradient(135deg,#0f3b2c 0%,#1d5a43 100%);color:#fff}
.wallet-hero .text-white-50{color:rgba(255,255,255,.7)!important}
.wallet-hero h2,.wallet-hero h4,.wallet-hero b{color:#fff!important}
.wallet-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.wallet-split>div{background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}
.terms-body{max-width:860px;margin:0 auto;line-height:1.75}
.terms-body h3{font-size:17px;margin-top:26px}
.terms-body ul{padding-left:1.2rem}
[dir=rtl] .terms-body ul{padding-left:0;padding-right:1.2rem}
[dir=rtl] .terms-body{font-family:"Noto Nastaliq Urdu",serif;line-height:2.3;font-size:15.5px}
.terms-quote{border-radius:10px;background:rgba(85,110,230,.08);padding:14px 18px;font-weight:600;text-align:center}
.terms-check{list-style:none;padding:0!important}
.terms-check li{margin-bottom:6px}
.terms-check li::before{content:"\2611";color:#34c38f;margin-inline-end:8px}
@media (max-width:767.98px){.dash-banner{margin-bottom:12px}.ot-label{font-size:10.5px}.ot-dot{width:28px;height:28px;font-size:14px}.ot-step::before{top:13px}}
.cur-switch{display:inline-flex;background:#eff2f7;border-radius:20px;padding:3px;margin-right:6px;height:34px}
.cur-switch a{display:flex;align-items:center;padding:0 12px;border-radius:17px;font-size:12.5px;font-weight:700;color:#74788d;white-space:nowrap;transition:background .15s,color .15s}
.cur-switch a.active{background:#556ee6;color:#fff;box-shadow:0 2px 6px rgba(85,110,230,.35)}
.cur-switch a:not(.active):hover{color:#556ee6}
[data-bs-theme=dark] .cur-switch{background:#32394e}
[data-bs-theme=dark] .cur-switch a{color:#a6b0cf}
[data-bs-theme=dark] .cur-switch a.active{color:#fff}
.pay-choice{border:2px solid #e9ebec;border-radius:10px;padding:10px 12px;cursor:pointer;display:block;height:100%;transition:border-color .15s,background .15s}
.btn-check:checked + .pay-choice{border-color:#556ee6;background:rgba(85,110,230,.06)}
.btn-check:disabled + .pay-choice{opacity:.55;cursor:not-allowed}
[data-bs-theme=dark] .pay-choice{border-color:var(--apx-line)}
.coin-price{display:flex;align-items:center;gap:6px;font-weight:700}
.coin-price img{width:20px;height:20px;border-radius:50%}
.fx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:rgba(85,110,230,.1);color:#556ee6;font-size:12px;font-weight:600}
@media (max-width:575.98px){.cur-switch a{padding:0 9px}.cur-switch{margin-right:2px}}
.theme-toggle{display:flex;align-items:center;justify-content:center}
.auth-theme-toggle{position:fixed;top:16px;right:16px;z-index:10;width:44px;height:44px;border-radius:50%;padding:0;box-shadow:var(--apx-shadow)}

/* ================= Dark mode ================= */
[data-bs-theme=dark]{
  --apx-bg:#1d2130;--apx-card:#2a3042;--apx-card-2:#2e3446;--apx-line:#353c54;--apx-text:#a6b0cf;--apx-head:#eff2f7;
  --apx-shadow:0 2px 12px rgba(0,0,0,.25);--apx-shadow-hover:0 8px 24px rgba(0,0,0,.35);
  --bs-body-bg:#1d2130;--bs-body-color:#a6b0cf;--bs-border-color:#353c54;--bs-heading-color:#eff2f7;--bs-emphasis-color:#eff2f7;
  --bs-secondary-bg:#2a3042;--bs-tertiary-bg:#2e3446;--bs-secondary-color:#8a93b2;color-scheme:dark}
[data-bs-theme=dark] body{background:var(--apx-bg);color:var(--apx-text)}
[data-bs-theme=dark] #page-topbar,[data-bs-theme=dark] .footer{background:var(--apx-card);color:var(--apx-text);box-shadow:0 1px 0 var(--apx-line)}
[data-bs-theme=dark] .navbar-header .header-item,[data-bs-theme=dark] #vertical-menu-btn{color:var(--apx-text)}
[data-bs-theme=dark] .card,[data-bs-theme=dark] .modal-content,[data-bs-theme=dark] .dropdown-menu{background:var(--apx-card);color:var(--apx-text);border-color:var(--apx-line)}
[data-bs-theme=dark] .card-header,[data-bs-theme=dark] .card-footer,[data-bs-theme=dark] .modal-header,[data-bs-theme=dark] .modal-footer{background:transparent;border-color:var(--apx-line)}
[data-bs-theme=dark] h1,[data-bs-theme=dark] h2,[data-bs-theme=dark] h3,[data-bs-theme=dark] h4,[data-bs-theme=dark] h5,[data-bs-theme=dark] h6,
[data-bs-theme=dark] .card-title,[data-bs-theme=dark] .text-dark,[data-bs-theme=dark] .text-body,[data-bs-theme=dark] .modal-title,[data-bs-theme=dark] b,[data-bs-theme=dark] strong,[data-bs-theme=dark] th{color:var(--apx-head)!important}
[data-bs-theme=dark] .welcome-card h4,[data-bs-theme=dark] .welcome-card b{color:#fff!important}
[data-bs-theme=dark] .text-muted{color:#8a93b2!important}
[data-bs-theme=dark] .page-content a:not(.btn):not(.quick-action):not(.nav-link):not(.dropdown-item){color:#8ea0f0}
[data-bs-theme=dark] .welcome-card{background:linear-gradient(135deg,#303857 0%,#465184 100%)}
[data-bs-theme=dark] .bottom-nav a{color:#8a93b2}
[data-bs-theme=dark] .bottom-nav a.active{color:#8ea0f0}
[data-bs-theme=dark] .btn-primary{background-color:#556ee6!important;border-color:#556ee6!important;color:#fff!important}
[data-bs-theme=dark] .btn-success{background-color:#34c38f!important;border-color:#34c38f!important;color:#fff!important}
[data-bs-theme=dark] .btn-info{background-color:#50a5f1!important;border-color:#50a5f1!important;color:#fff!important}
[data-bs-theme=dark] .btn-warning{background-color:#f1b44c!important;border-color:#f1b44c!important;color:#fff!important}
[data-bs-theme=dark] .btn-danger{background-color:#f46a6a!important;border-color:#f46a6a!important;color:#fff!important}
[data-bs-theme=dark] .btn-secondary{background-color:#74788d!important;border-color:#74788d!important;color:#fff!important}
[data-bs-theme=dark] .btn-primary:hover,[data-bs-theme=dark] .btn-success:hover,[data-bs-theme=dark] .btn-info:hover,[data-bs-theme=dark] .btn-warning:hover,[data-bs-theme=dark] .btn-danger:hover,[data-bs-theme=dark] .btn-secondary:hover{filter:brightness(1.1)}
[data-bs-theme=dark] .btn-outline-danger{color:#f79a9a;border-color:#f46a6a}
[data-bs-theme=dark] .btn-outline-danger:hover{background:#f46a6a;color:#fff}
[data-bs-theme=dark] .btn i,[data-bs-theme=dark] .btn b{color:inherit!important}
[data-bs-theme=dark] .btn-link{color:#8ea0f0}
[data-bs-theme=dark] .table{--bs-table-color:var(--apx-text);--bs-table-bg:transparent;--bs-table-border-color:var(--apx-line);--bs-table-striped-bg:var(--apx-card-2);--bs-table-hover-bg:var(--apx-card-2);color:var(--apx-text)}
[data-bs-theme=dark] .table>thead.table-light th,[data-bs-theme=dark] .table-light{--bs-table-bg:#32394e;background:#32394e!important;color:#c3cbe4!important;border-color:var(--apx-line)}
[data-bs-theme=dark] .table>tbody tr:hover{background:var(--apx-card-2)}
[data-bs-theme=dark] .table td,[data-bs-theme=dark] .table th{border-color:var(--apx-line)}
[data-bs-theme=dark] .form-control,[data-bs-theme=dark] .form-select,[data-bs-theme=dark] .input-group-text{background-color:var(--apx-card-2);border-color:var(--apx-line);color:#d3d9ec}
[data-bs-theme=dark] .form-control::placeholder{color:#6f7897}
[data-bs-theme=dark] .form-control:disabled,[data-bs-theme=dark] .form-control[readonly]{background-color:#262b3c}
[data-bs-theme=dark] .form-check-input{background-color:var(--apx-card-2);border-color:#4a5270}
[data-bs-theme=dark] .form-check-input:checked{background-color:#556ee6;border-color:#556ee6}
[data-bs-theme=dark] .form-label,[data-bs-theme=dark] .form-check-label{color:#c3cbe4}
[data-bs-theme=dark] .btn-light,[data-bs-theme=dark] .pw-toggle{background:#32394e;border-color:#32394e;color:#c3cbe4}
[data-bs-theme=dark] .btn-light:hover{background:#3b4360;color:#fff}
[data-bs-theme=dark] .btn-outline-primary{color:#8ea0f0;border-color:#556ee6}
[data-bs-theme=dark] .bg-light,[data-bs-theme=dark] .bg-white{background-color:#32394e!important}
[data-bs-theme=dark] .border,[data-bs-theme=dark] .border-top,[data-bs-theme=dark] .border-bottom{border-color:var(--apx-line)!important}
[data-bs-theme=dark] .dropdown-item{color:var(--apx-text)}
[data-bs-theme=dark] .dropdown-item:hover,[data-bs-theme=dark] .dropdown-item:focus{background:#32394e;color:#fff}
[data-bs-theme=dark] .nav-tabs-custom{border-color:var(--apx-line)}
[data-bs-theme=dark] .nav-tabs-custom .nav-link,[data-bs-theme=dark] .nav-pills .nav-link{color:var(--apx-text)}
[data-bs-theme=dark] .nav-tabs-custom .nav-link.active{color:#8ea0f0;background:transparent}
[data-bs-theme=dark] .nav-pills .nav-link.active{background:#556ee6;color:#fff}
[data-bs-theme=dark] .badge.bg-light{background:#32394e!important;color:#c3cbe4!important}
[data-bs-theme=dark] .alert-info{background:rgba(80,165,241,.15);color:#8cc5f7}
[data-bs-theme=dark] .alert-success{background:rgba(52,195,143,.15);color:#6fdcb3}
[data-bs-theme=dark] .alert-warning{background:rgba(241,180,76,.15);color:#f5c979}
[data-bs-theme=dark] .alert-danger{background:rgba(244,106,106,.15);color:#f79a9a}
[data-bs-theme=dark] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
[data-bs-theme=dark] .how-step,[data-bs-theme=dark] .quick-action,[data-bs-theme=dark] .tree-node,[data-bs-theme=dark] .bottom-nav{background:var(--apx-card)}
[data-bs-theme=dark] .quick-action{color:#c3cbe4}
[data-bs-theme=dark] .how-step b,[data-bs-theme=dark] .tree-node .tn-name{color:var(--apx-head)!important}
[data-bs-theme=dark] .tree-node{border-color:var(--apx-line)}
[data-bs-theme=dark] .tree-node .tn-level{background:#32394e;color:#c3cbe4}
[data-bs-theme=dark] .tree-node.root{background:rgba(85,110,230,.15)}
[data-bs-theme=dark] .ref-tree li::before,[data-bs-theme=dark] .ref-tree li::after,[data-bs-theme=dark] .ref-tree ul ul::before{border-color:#4a5270}
[data-bs-theme=dark] .product-card .product-img,[data-bs-theme=dark] .product-main-img,[data-bs-theme=dark] .thumb-sm,[data-bs-theme=dark] .gallery-thumb{background:#f1f3f9}
[data-bs-theme=dark] .pay-account{border-color:var(--apx-line)}
[data-bs-theme=dark] .btn-check:checked + .pay-account{background:rgba(85,110,230,.12)}
[data-bs-theme=dark] .chat-msg.them{background:var(--apx-card-2)}
[data-bs-theme=dark] .chat-msg.me{background:rgba(85,110,230,.2)}
[data-bs-theme=dark] .pw-meter,[data-bs-theme=dark] .wizard-steps .ws::before{background:#3b4360}
[data-bs-theme=dark] .timeline-simple li{border-left-color:var(--apx-line)}
[data-bs-theme=dark] .empty-state i{color:#4a5270}
[data-bs-theme=dark] .account-pages{background:radial-gradient(circle at 10% 10%,rgba(85,110,230,.18),transparent 40%),radial-gradient(circle at 90% 90%,rgba(52,195,143,.10),transparent 40%),#1d2130}
[data-bs-theme=dark] .account-pages .bg-primary.bg-soft{background:rgba(85,110,230,.22)!important}
[data-bs-theme=dark] .avatar-title.bg-light{background:#32394e!important}
[data-bs-theme=dark] .img-thumbnail{background:var(--apx-card);border-color:var(--apx-line)}
[data-bs-theme=dark] .list-group-item{background:var(--apx-card);border-color:var(--apx-line);color:var(--apx-text)}

/* ================= Laptop screens: render at 80% (like browser zoom 80%) ================= */
@media (min-width:992px) and (max-width:1680px){
  html{zoom:.8}
  .account-pages{min-height:125vh}
  .modal{width:125vw!important;height:125vh!important}
}
/* Popup overlay always covers the whole screen (works with any page/browser zoom) */
.modal-backdrop,.offcanvas-backdrop{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:300vw!important;height:300vh!important}

/* ================= Responsive / mobile ================= */
@media (max-width:991.98px){
  .page-content{padding-left:0!important;padding-right:0!important}
  .quick-actions{margin-top:0}
}
@media (max-width:767.98px){
  .page-content{padding-top:calc(70px + 10px)!important}
  .page-content>.container-fluid,.footer>.container-fluid{padding-left:8px!important;padding-right:8px!important}
  .row{--bs-gutter-x:10px}
  .card{margin-bottom:10px;border-radius:10px}
  .card-body{padding:14px}
  .card-header,.card-footer{padding:12px 14px}
  .page-title-box{padding-bottom:10px;flex-direction:column;align-items:flex-start!important}
  .page-title-box h4{font-size:17px!important}
  .page-subtitle{font-size:12.5px}
  .page-title-box .d-flex.gap-2.flex-wrap{margin-top:8px}
  .stat-card .card-body{padding:12px}
  .stat-card h4{font-size:15px}
  .stat-card p{font-size:12px}
  .stat-card .stat-ico{width:38px;height:38px;font-size:19px;border-radius:10px}
  .stat-card .ms-3{margin-left:8px!important}
  .chart-box{height:230px}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .how-step{padding:10px 10px 10px 42px;min-height:0}
  .how-step::before{left:10px;top:10px;width:24px;height:24px;font-size:12px}
  .welcome-card .card-body{padding:16px!important}
  .welcome-card h4{font-size:16px}
  .quick-actions{gap:8px}
  .quick-action{padding:12px 4px;font-size:12px}
  .quick-action i{width:38px;height:38px;font-size:19px}
  .table{font-size:13px}
  .table td,.table th{padding:.55rem .5rem}
  .table-nowrap td,.table-nowrap th{white-space:nowrap}
  .nav-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .nav-pills .nav-link{white-space:nowrap;padding:.4rem .75rem}
  .nav-tabs-custom{flex-wrap:nowrap;overflow-x:auto}
  .nav-tabs-custom .nav-link{white-space:nowrap}
  .modal-dialog{margin:.5rem}
  .modal-body{padding:14px}
  .product-card .product-img{height:130px}
  .product-card h5{font-size:13.5px!important}
  .product-card .product-actions{flex-direction:column}
  .product-card .product-actions .btn{padding:.35rem .5rem;font-size:12.5px}
  .product-main-img{height:260px}
  .alert{padding:.65rem .8rem;font-size:13px}
  .tree-node{width:88px;padding:8px 4px}
  .tree-node img{width:34px;height:34px}
  .ref-tree li{padding:18px 3px 0}
  .navbar-header{padding:0 8px 0 0}
  .navbar-brand-box{width:auto!important;padding:0 10px!important}
  .header-item{padding:0 8px}
  .footer{left:0!important;font-size:12px;padding:12px 8px}
  .chat-msg{max-width:92%}
  .auth-theme-toggle{top:10px;right:10px;width:40px;height:40px}
  .account-pages{padding:24px 0}
  .account-pages .container{padding-left:10px;padding-right:10px}
}
@media (max-width:399.98px){
  .how-steps{grid-template-columns:1fr}
  .stat-card h4{font-size:14px}
}