/* =========================================================
   GLOBAL USER DARK MODE V1
   ORI tidak berubah.
   Hanya aktif saat:
   html[data-theme="dark"]
========================================================= */

:root{
    --dk-dark-bg:#06101f;
    --dk-dark-bg-2:#091629;
    --dk-dark-card:#0d1d31;
    --dk-dark-card-2:#10243c;
    --dk-dark-border:rgba(143,190,255,.14);
    --dk-dark-text:#f4f8ff;
    --dk-dark-muted:#96a9bf;
    --dk-dark-blue:#2097ff;
    --dk-dark-blue-soft:#73c2ff;
    --dk-dark-gold:#e7bc58;
    --dk-dark-green:#55dda1;
}


/* =========================================================
   BASE
========================================================= */

html[data-theme="dark"]{
    color-scheme:dark;
    background:#06101f;
}


html[data-theme="dark"] body{
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(22,111,210,.16),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #06101f 0%,
            #081526 100%
        ) !important;

    color:var(--dk-dark-text);
}


html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .wrapper > div{
    background:
        transparent !important;
}


/* =========================================================
   GENERIC TEXT
========================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6{
    color:var(--dk-dark-text);
}


html[data-theme="dark"] p,
html[data-theme="dark"] label{
    color:inherit;
}


html[data-theme="dark"] a{
    color:inherit;
}


/* =========================================================
   FORM / INPUT
========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    color:#f4f8ff !important;

    background:
        #0d1d31 !important;

    border-color:
        rgba(143,190,255,.18) !important;

    box-shadow:none;
}


html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#71859c !important;
}


html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
    -webkit-text-fill-color:#f4f8ff !important;

    box-shadow:
        0 0 0 1000px
        #0d1d31
        inset !important;
}


/* =========================================================
   TABLE
========================================================= */

html[data-theme="dark"] table{
    color:#eaf3ff;
}


html[data-theme="dark"] table th{
    color:#9eb4cc;

    background:#0b192b !important;
}


html[data-theme="dark"] table td{
    color:#eaf3ff;

    border-color:
        rgba(143,190,255,.10) !important;
}


/* =========================================================
   DEFAULT TOP NAV / HEADER
========================================================= */

html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .tn{
    color:#f4f8ff !important;

    background:
        rgba(7,20,37,.96) !important;

    border-color:
        rgba(143,190,255,.10) !important;
}


html[data-theme="dark"] .top-nav p,
html[data-theme="dark"] .top-nav div,
html[data-theme="dark"] .back-btn,
html[data-theme="dark"] .back-btn > div{
    color:#f4f8ff !important;
}


/* =========================================================
   DASHBOARD
========================================================= */

html[data-theme="dark"] .finance-home,
html[data-theme="dark"] .finance-top{
    background:
        linear-gradient(
            180deg,
            #020b18 0%,
            #061a34 18%,
            #092c54 35%,
            #081729 62%,
            #06101f 100%
        ) !important;
}


html[data-theme="dark"] .finance-header{
    background:transparent !important;
}


html[data-theme="dark"] .finance-name,
html[data-theme="dark"] .finance-header,
html[data-theme="dark"] .finance-header *{
    color:#f5f9ff;
}


html[data-theme="dark"] .finance-account-small,
html[data-theme="dark"] .finance-actions > *,
html[data-theme="dark"] .finance-promo,
html[data-theme="dark"] .finance-news-card,
html[data-theme="dark"] .finance-news-section,
html[data-theme="dark"] .finance-news-modal-box{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0c1a2c,
            #10253d
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;
}


html[data-theme="dark"] .finance-news-copy p,
html[data-theme="dark"] .finance-news-date,
html[data-theme="dark"] .finance-news-description{
    color:#9fb2c9 !important;
}


/* =========================================================
   PRODUCT
========================================================= */

html[data-theme="dark"] .pf-page{
    background:
        linear-gradient(
            180deg,
            #06101f 0%,
            #08172a 100%
        ) !important;
}


html[data-theme="dark"] .pf-header{
    background:transparent !important;
}


html[data-theme="dark"] .pf-intro,
html[data-theme="dark"] .pf-tabs,
html[data-theme="dark"] .pf-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .products > div{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0c1a2c,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


html[data-theme="dark"] .pf-intro p,
html[data-theme="dark"] .pf-card p{
    color:#9cb0c7 !important;
}


/* =========================================================
   TASK
========================================================= */

html[data-theme="dark"] .tf-page{
    background:
        linear-gradient(
            180deg,
            #030c1a 0%,
            #082449 18%,
            #07182c 37%,
            #06101f 100%
        ) !important;
}


html[data-theme="dark"] .tf-header{
    background:transparent !important;
}


html[data-theme="dark"] .tf-hero,
html[data-theme="dark"] .tf-task-card,
html[data-theme="dark"] .tf-card,
html[data-theme="dark"] .tf-task-top{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10253d
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


/* =========================================================
   PROFILE
========================================================= */

html[data-theme="dark"] .pr-page{
    background:
        linear-gradient(
            180deg,
            #030c1a 0%,
            #082449 18%,
            #07182c 36%,
            #06101f 100%
        ) !important;
}


html[data-theme="dark"] .pr-header{
    background:transparent !important;
}


html[data-theme="dark"] .pr-hero{
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(50,158,255,.20),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0a2447,
            #0b4b8b
        ) !important;

    border-color:
        rgba(143,190,255,.15) !important;
}


html[data-theme="dark"] .pr-stats,
html[data-theme="dark"] .pr-stat,
html[data-theme="dark"] .pr-menu,
html[data-theme="dark"] .pr-menu-item,
html[data-theme="dark"] .pr-section,
html[data-theme="dark"] .pr-card{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


/* =========================================================
   TEAM
========================================================= */

html[data-theme="dark"] .team-page,
html[data-theme="dark"] .team-finance,
html[data-theme="dark"] .team-wrapper{
    background:
        linear-gradient(
            180deg,
            #06101f,
            #081729
        ) !important;
}


html[data-theme="dark"] .team-card,
html[data-theme="dark"] .team-network-card,
html[data-theme="dark"] .team-summary,
html[data-theme="dark"] .team-level-card{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


/* =========================================================
   INCOME / MY ORDERS
========================================================= */

html[data-theme="dark"] .if-page,
html[data-theme="dark"] .if-wrapper{
    background:#06101f !important;
}


html[data-theme="dark"] .if-claim,
html[data-theme="dark"] .if-tabs,
html[data-theme="dark"] .if-card,
html[data-theme="dark"] .if-order,
html[data-theme="dark"] .if-item{
    color:#f4f8ff !important;

    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


/* =========================================================
   GENERIC USER CARDS
========================================================= */

html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .content-box,
html[data-theme="dark"] .form-box{
    color:#f4f8ff;

    background:
        #0d1d31 !important;

    border-color:
        rgba(143,190,255,.12) !important;
}


/* =========================================================
   MODAL / POPUP
========================================================= */

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .popup-content{
    color:#f4f8ff !important;

    background:
        #0d1d31 !important;

    border-color:
        rgba(143,190,255,.14) !important;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

html[data-theme="dark"] .dk-bottom-nav{
    background:
        transparent !important;
}


html[data-theme="dark"] .dk-bottom-nav-inner{
    background:
        rgba(7,18,32,.96) !important;

    border:
        1px solid
        rgba(143,190,255,.14) !important;

    box-shadow:
        0 -6px 28px
        rgba(0,0,0,.30) !important;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


html[data-theme="dark"] .dk-nav-item{
    color:#8396ab !important;
}


html[data-theme="dark"] .dk-nav-item.active,
html[data-theme="dark"] .dk-nav-item.active .dk-nav-text,
html[data-theme="dark"] .dk-nav-item.active iconify-icon{
    color:#72beff !important;
}


html[data-theme="dark"] .dk-nav-center-circle{
    color:#fff !important;

    background:
        linear-gradient(
            145deg,
            #126ac2,
            #249cff
        ) !important;

    border-color:
        rgba(255,255,255,.15) !important;

    box-shadow:
        0 7px 20px
        rgba(15,116,221,.30) !important;
}


/* =========================================================
   COPYRIGHT
========================================================= */

html[data-theme="dark"] .app-copyright-footer{
    color:#91a3b8;
}


html[data-theme="dark"] .app-copyright-brand{
    color:#d8e9ff !important;
}


html[data-theme="dark"] .app-copyright-text,
html[data-theme="dark"] .app-copyright-sub{
    color:#71849a !important;
}


/* =========================================================
   LOADER
========================================================= */

html[data-theme="dark"] .loader_boss{
    background:
        rgba(3,11,22,.94) !important;
}


html[data-theme="dark"] .l_text{
    color:#eaf3ff !important;
}


/* =========================================================
   AUTH / LOGIN / REGISTER
========================================================= */

html[data-theme="dark"] .premium-login-body,
html[data-theme="dark"] .auth-page,
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .register-page{
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(23,119,225,.20),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #050e1b,
            #07182b
        ) !important;
}


html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .register-card{
    color:#f4f8ff !important;

    background:
        rgba(12,28,48,.94) !important;

    border-color:
        rgba(143,190,255,.14) !important;
}


/* =========================================================
   PAYMENT LAYOUT
========================================================= */

html[data-theme="dark"] .payment,
html[data-theme="dark"] .payment-page,
html[data-theme="dark"] .pay-container{
    color:#f4f8ff !important;

    background:
        #071527 !important;
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.dk-theme-toggle{
    position:fixed;

    z-index:999999;

    top:
        max(
            10px,
            env(safe-area-inset-top)
        );

    right:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    padding:0;

    border:
        1px solid
        rgba(15,80,150,.13);

    border-radius:12px;

    color:#0a478d;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 6px 20px
        rgba(13,54,103,.12);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease;
}


.dk-theme-toggle:active{
    transform:scale(.92);
}


.dk-theme-toggle iconify-icon{
    pointer-events:none;
}


html[data-theme="dark"] .dk-theme-toggle{
    color:#ffd76e;

    background:
        rgba(13,31,52,.96);

    border-color:
        rgba(143,190,255,.17);

    box-shadow:
        0 6px 22px
        rgba(0,0,0,.26);
}


/* supaya tombol tidak terlalu menonjol di HP */
@media(max-width:430px){

    .dk-theme-toggle{
        width:35px;
        height:35px;

        top:
            max(
                8px,
                env(safe-area-inset-top)
            );

        right:8px;

        border-radius:11px;
    }

}


/* =========================================================
   SMOOTH TRANSITION
========================================================= */

html.theme-ready body,
html.theme-ready .wrapper,
html.theme-ready .dk-bottom-nav-inner,
html.theme-ready .app-copyright-footer,
html.theme-ready input,
html.theme-ready select,
html.theme-ready textarea{
    transition:
        background-color .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}



/* =========================================================
   GLOBAL DARK MODE V2
   COVER ALL USER VIEWS
========================================================= */


/* PAGE BACKGROUND */

html[data-theme="dark"] :where(
    .rf-page,
    .wf-page,
    .bf-page,
    .vf-page,
    .gf-page,
    .ih-page,
    .dh-page,
    .th-page,
    .bh-page,
    .pw-page,
    .transaction-page,
    .income-page,
    .bonus-page,
    .gift-page,
    .deposit-page,
    .withdraw-page,
    .bank-page,
    .vip-page
){
    background:#06101f !important;
    color:#eef6ff !important;
}


/* =========================================================
   COMMON FINANCE CONTAINERS
========================================================= */

html[data-theme="dark"] :where(
    [class*="-card"],
    [class*="-box"],
    [class*="-panel"],
    [class*="-section"],
    [class*="-summary"],
    [class*="-list"],
    [class*="-table"],
    [class*="-tabs"],
    [class*="-form"],
    [class*="-content"],
    [class*="-item"],
    [class*="-row"]
).dk-auto-dark-surface{
    background:
        linear-gradient(
            145deg,
            #0c1a2c,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.14) !important;
}


/* fallback auto surface */

html[data-theme="dark"] .dk-auto-dark-surface{
    background:
        #0d1d31 !important;

    border-color:
        rgba(143,190,255,.12) !important;
}


/* dark text found inside converted surfaces */

html[data-theme="dark"] .dk-auto-dark-text{
    color:#eaf3ff !important;
}


html[data-theme="dark"] .dk-auto-muted-text{
    color:#96a9bf !important;
}


/* =========================================================
   RECHARGE / DEPOSIT
========================================================= */

html[data-theme="dark"] :where(
    .rf-card,
    .rf-box,
    .rf-section,
    .rf-form,
    .rf-method,
    .rf-method-card,
    .rf-amount,
    .rf-summary,
    .rf-info,
    .rf-note,

    .deposit,
    .deposit .form,
    .amount,
    .tips,
    .select > div:first-of-type
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.13) !important;
    color:#eef6ff !important;
}


html[data-theme="dark"] .select > div:last-of-type{
    background:#0a182a !important;
    border-color:rgba(143,190,255,.14) !important;
}


/* =========================================================
   WITHDRAW
========================================================= */

html[data-theme="dark"] :where(
    .wf-card,
    .wf-box,
    .wf-section,
    .wf-quick,
    .wf-form,
    .wf-summary,
    .wf-info,
    .wf-note,
    .wf-bank,
    .withdraw > .w-amount,
    .channels,
    .description
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.13) !important;
    color:#eef6ff !important;
}


/* =========================================================
   BANK
========================================================= */

html[data-theme="dark"] :where(
    .bf-card,
    .bf-box,
    .bf-form,
    .bf-section,
    .bf-bank,
    .bf-account,
    .bf-note,
    .bf-info
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.13) !important;
    color:#eef6ff !important;
}


/* =========================================================
   VIP
========================================================= */

html[data-theme="dark"] :where(
    .vf-card,
    .vf-box,
    .vf-section,
    .vf-level,
    .vf-progress,
    .vf-benefit,
    .vf-info,
    .vf-summary
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.13) !important;
    color:#eef6ff !important;
}


/* =========================================================
   PASSWORD
========================================================= */

html[data-theme="dark"] :where(
    .pw-card,
    .pw-box,
    .pw-form,
    .pw-section,
    .pw-input,
    .pw-note,
    .pw-info
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.13) !important;
    color:#eef6ff !important;
}


/* =========================================================
   TRANSACTION / HISTORY
========================================================= */

html[data-theme="dark"] :where(
    .tt-card,
    .tt-tabs,
    .tt-tab,
    .tt-level-item,
    .tt-head,
    .tt-footer,

    .transactions > div:last-of-type > div,
    .transaction-card,
    .transaction-item,
    .transaction-list,

    .dh-card,
    .dh-item,
    .dh-list,
    .dh-tabs,

    .bh-card,
    .bh-item,
    .bh-list,
    .bh-tabs,

    .ih-card,
    .ih-item,
    .ih-list,
    .ih-tabs
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.12) !important;
    color:#eef6ff !important;
}


/* =========================================================
   TEAM
========================================================= */

html[data-theme="dark"] :where(
    .tf-summary,
    .tf-summary-grid,
    .tf-referral-card,
    .tf-ref-item,
    .tf-members-section,
    .tf-member-list,
    .tf-member-card,
    .tf-member-finance-item,
    .tf-levels,
    .tf-level-card,
    .tf-section,
    .tf-empty,
    .tf-qr,
    .team-card,
    .team-network-card,
    .team-summary,
    .team-level-card
){
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    color:#eef6ff !important;
}


/* =========================================================
   PRODUCT
========================================================= */

html[data-theme="dark"] :where(
    .pf-products,
    .pf-product-card,
    .pf-product-main,
    .pf-product-info,
    .pf-product-details,
    .pf-product-mini-grid,
    .pf-tabs,
    .pf-empty,
    .products > .items > .item,
    .products2 > div.item,
    .p-tabs > div
){
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    color:#eef6ff !important;
}


/* =========================================================
   PROFILE
========================================================= */

html[data-theme="dark"] :where(
    .pr-stat,
    .pr-menu-item,
    .pr-section,
    .pr-card,
    .pr-stats,
    .pr-menu
){
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;

    color:#eef6ff !important;
}


/* =========================================================
   TASK
========================================================= */

html[data-theme="dark"] :where(
    .tf-task-card,
    .tf-task-top,
    .tf-card
){
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;
}


/* =========================================================
   INCOME
========================================================= */

html[data-theme="dark"] :where(
    .if-claim,
    .if-tabs,
    .if-card,
    .if-order,
    .if-item,
    .orders > .claim
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.12) !important;
    color:#eef6ff !important;
}


/* =========================================================
   BONUS / GIFT
========================================================= */

html[data-theme="dark"] :where(
    .gf-card,
    .gf-item,
    .gf-box,
    .gf-section,
    .gift-card,
    .gift-item,
    .bonus-card,
    .bonus-item,
    .voucher > div
){
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.12) !important;
    color:#eef6ff !important;
}


/* =========================================================
   INVITE / REFERRAL
========================================================= */

html[data-theme="dark"] .invite > div.tabs{
    background:#09182a !important;
}


html[data-theme="dark"] .invite > div.tabs > .active{
    background:#12365e !important;
    color:#fff !important;
}


html[data-theme="dark"] .invite > div.contents > div.friends > .table,
html[data-theme="dark"] .invite > div.contents > div.commisions > div{
    background:#0d1d31 !important;
    color:#eef6ff !important;
}


html[data-theme="dark"] .invite table tbody tr:nth-child(odd){
    background:#10243b !important;
}


/* =========================================================
   BOOTSTRAP DEPOSIT / PAYMENT
========================================================= */

html[data-theme="dark"] :where(
    .container,
    .container-fluid
) .card{
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.12) !important;
}


html[data-theme="dark"] :where(
    .bg-white,
    .bg-light,
    .table-light
){
    background-color:#0d1d31 !important;
    color:#eef6ff !important;
}


html[data-theme="dark"] .table{
    --bs-table-bg:#0d1d31 !important;
    --bs-table-color:#eef6ff !important;
    --bs-table-border-color:rgba(143,190,255,.12) !important;
}


/* =========================================================
   MODALS
========================================================= */

html[data-theme="dark"] :where(
    .modal-content,
    .finance-news-modal-box,
    .b-modal > div,
    .chat-modal,
    .not > div > div
){
    background:#0d1d31 !important;
    color:#eef6ff !important;
    border-color:rgba(143,190,255,.13) !important;
}


/* =========================================================
   INPUT / SELECT / OPTION
========================================================= */

html[data-theme="dark"] option{
    background:#0d1d31 !important;
    color:#eef6ff !important;
}


html[data-theme="dark"] .input-g > div{
    background:#0d1d31 !important;
    border-color:rgba(143,190,255,.12) !important;
}


/* =========================================================
   GENERIC WHITE SURFACE HELPERS
========================================================= */

html[data-theme="dark"] :where(
    .bg-white,
    .white-bg,
    .white-card,
    .light-card,
    .surface-white,
    .surface-light
){
    background:#0d1d31 !important;
    color:#eef6ff !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html[data-theme="dark"] ::-webkit-scrollbar-track{
    background:#071425;
}


html[data-theme="dark"] ::-webkit-scrollbar-thumb{
    background:#1b4268;
}



/* =========================================================
   PRODUCT + TEAM DARK FIX V3
========================================================= */


/* =========================================================
   MY TEAM - BODY / WRAPPER
========================================================= */

html[data-theme="dark"] body:has(.tf-page),
html[data-theme="dark"] body:has(.tf-page) .wrapper,
html[data-theme="dark"] body:has(.tf-page) .wrapper > div,
html[data-theme="dark"] .tf-page{
    background:
        linear-gradient(
            180deg,
            #04101e 0%,
            #07172a 35%,
            #06101f 100%
        ) !important;

    color:#eef6ff !important;
}


/* jangan hilangkan background art admin */
html[data-theme="dark"] .tf-page-art{
    opacity:.22 !important;
}


/* HEADER */

html[data-theme="dark"] .tf-header{
    background:transparent !important;
}


html[data-theme="dark"] .tf-brand-copy strong,
html[data-theme="dark"] .tf-brand-copy span{
    color:#f4f8ff !important;
}


html[data-theme="dark"] .tf-header-action{
    background:#0d1d31 !important;

    border-color:
        rgba(143,190,255,.15) !important;

    color:#ddecff !important;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.20) !important;
}


/* SUMMARY */

html[data-theme="dark"] .tf-summary{
    color:#f4f8ff !important;

    border-color:
        rgba(143,190,255,.14) !important;
}


html[data-theme="dark"] .tf-summary-grid > div{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;

    color:#eef6ff !important;
}


html[data-theme="dark"] .tf-summary-grid p,
html[data-theme="dark"] .tf-summary-grid span:not(.tf-stat-icon){
    color:#9db0c7 !important;
}


html[data-theme="dark"] .tf-summary-grid strong{
    color:#f7fbff !important;
}


/* SECTION */

html[data-theme="dark"] .tf-section{
    background:transparent !important;
}


html[data-theme="dark"] .tf-section-heading,
html[data-theme="dark"] .tf-section-heading h3,
html[data-theme="dark"] .tf-section-heading strong{
    color:#edf6ff !important;
}


/* REFERRAL */

html[data-theme="dark"] .tf-referral-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    box-shadow:
        0 6px 20px
        rgba(0,0,0,.18) !important;
}


html[data-theme="dark"] .tf-qr{
    background:#132740 !important;

    border-color:
        rgba(143,190,255,.16) !important;
}


html[data-theme="dark"] .tf-ref-item{
    color:#eef6ff !important;
}


html[data-theme="dark"] .tf-ref-item span,
html[data-theme="dark"] .tf-ref-item small,
html[data-theme="dark"] .tf-referral-info p{
    color:#9db0c7 !important;
}


html[data-theme="dark"] .tf-ref-divider{
    background:
        rgba(143,190,255,.12) !important;
}


/* LEVELS */

html[data-theme="dark"] .tf-level-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    color:#eef6ff !important;
}


html[data-theme="dark"] .tf-level-card.active{
    background:
        linear-gradient(
            145deg,
            #0c2545,
            #104b82
        ) !important;
}


html[data-theme="dark"] .tf-level-card span,
html[data-theme="dark"] .tf-level-card small{
    color:#a8bad0 !important;
}


html[data-theme="dark"] .tf-level-card strong{
    color:#f5f9ff !important;
}


/* MEMBERS */

html[data-theme="dark"] .tf-member-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.16) !important;
}


html[data-theme="dark"] .tf-member-name{
    color:#f4f8ff !important;
}


html[data-theme="dark"] .tf-member-main p,
html[data-theme="dark"] .tf-member-main small{
    color:#97abc3 !important;
}


html[data-theme="dark"] .tf-member-finance-item,
html[data-theme="dark"] .tf-member-finance-item.deposit,
html[data-theme="dark"] .tf-member-finance-item.withdraw,
html[data-theme="dark"] .tf-member-finance-item.purchase,
html[data-theme="dark"] .tf-member-finance-item.commission{
    background:#101f33 !important;

    border-color:
        rgba(143,190,255,.10) !important;
}


html[data-theme="dark"] .tf-member-finance-item > span{
    color:#94a9c0 !important;
}


html[data-theme="dark"] .tf-member-finance-item strong{
    color:#f1f7ff !important;
}


/* EMPTY */

html[data-theme="dark"] .tf-empty{
    background:#0d1d31 !important;

    border-color:
        rgba(143,190,255,.16) !important;

    color:#c7d6e8 !important;
}


/* =========================================================
   TEAM ANALYTICS / TA
========================================================= */

html[data-theme="dark"] .ta-kpi,
html[data-theme="dark"] .ta-panel,
html[data-theme="dark"] .ta-level-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.12) !important;

    color:#eef6ff !important;
}


html[data-theme="dark"] .ta-level-stats > div{
    background:#102239 !important;
}


html[data-theme="dark"] .ta-level-stats small{
    color:#91a7bf !important;
}


html[data-theme="dark"] .ta-level-stats strong{
    color:#f4f8ff !important;
}


html[data-theme="dark"] .ta-donut::before{
    background:#0d1d31 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(143,190,255,.10) !important;
}


html[data-theme="dark"] .ta-donut-center strong{
    color:#f4f8ff !important;
}


/* =========================================================
   TEAM TRADING CARD
========================================================= */

html[data-theme="dark"] .tt-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.18) !important;
}


html[data-theme="dark"] .tt-tabs{
    background:#09182a !important;
}


html[data-theme="dark"] .tt-tab{
    color:#849bb5 !important;
}


html[data-theme="dark"] .tt-tab.active{
    background:#174c7f !important;

    color:#fff !important;
}


html[data-theme="dark"] .tt-level-item{
    background:#102239 !important;

    border-color:
        rgba(143,190,255,.10) !important;
}


/* =========================================================
   PRODUCT BODY
========================================================= */

html[data-theme="dark"] body:has(.pf-page),
html[data-theme="dark"] body:has(.pf-page) .wrapper,
html[data-theme="dark"] body:has(.pf-page) .wrapper > div,
html[data-theme="dark"] .pf-page{
    background:
        linear-gradient(
            180deg,
            #04101e 0%,
            #07172a 42%,
            #06101f 100%
        ) !important;

    color:#eef6ff !important;
}


/* HEADER */

html[data-theme="dark"] .pf-header{
    background:transparent !important;
}


html[data-theme="dark"] .pf-brand-copy strong,
html[data-theme="dark"] .pf-brand-copy span{
    color:#f4f8ff !important;
}


/* INTRO */

html[data-theme="dark"] .pf-intro{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;
}


html[data-theme="dark"] .pf-intro h1,
html[data-theme="dark"] .pf-intro h2,
html[data-theme="dark"] .pf-intro strong{
    color:#f5f9ff !important;
}


html[data-theme="dark"] .pf-intro p{
    color:#9db0c7 !important;
}


/* TABS */

html[data-theme="dark"] .pf-tabs,
html[data-theme="dark"] .p-tabs > div{
    background:#09182a !important;

    border-color:
        rgba(143,190,255,.12) !important;
}


html[data-theme="dark"] .pf-tabs a,
html[data-theme="dark"] .pf-tabs button{
    color:#94a8c0 !important;
}


html[data-theme="dark"] .pf-tabs .active{
    background:#174b7c !important;

    color:#fff !important;
}


/* PRODUCT CARD */

html[data-theme="dark"] .pf-product-card{
    background:
        linear-gradient(
            145deg,
            #0d1d31,
            #10243b
        ) !important;

    border-color:
        rgba(143,190,255,.13) !important;

    box-shadow:
        0 6px 19px
        rgba(0,0,0,.18) !important;
}


html[data-theme="dark"] .pf-product-main,
html[data-theme="dark"] .pf-product-info,
html[data-theme="dark"] .pf-product-details,
html[data-theme="dark"] .pf-product-action{
    background:transparent !important;
}


html[data-theme="dark"] .pf-product-title,
html[data-theme="dark"] .pf-product-title strong{
    color:#f4f8ff !important;
}


html[data-theme="dark"] .pf-product-price{
    color:#d9eaff !important;
}


/* detail kecil yang masih putih */

html[data-theme="dark"] .pf-product-details > div{
    background:#102239 !important;

    border:
        1px solid
        rgba(143,190,255,.08) !important;
}


html[data-theme="dark"] .pf-product-details span{
    color:#91a6be !important;
}


html[data-theme="dark"] .pf-product-details strong{
    color:#f1f7ff !important;
}


/* mini grid */

html[data-theme="dark"] .pf-product-mini-grid > div{
    background:#102239 !important;

    border-color:
        rgba(143,190,255,.08) !important;
}


html[data-theme="dark"] .pf-product-mini-grid span{
    color:#91a6be !important;
}


html[data-theme="dark"] .pf-product-mini-grid strong{
    color:#f4f8ff !important;
}


/* EMPTY */

html[data-theme="dark"] .pf-empty{
    background:#0d1d31 !important;

    border-color:
        rgba(143,190,255,.16) !important;

    color:#c4d5e8 !important;
}


/* =========================================================
   PRODUCT MODAL
========================================================= */

html[data-theme="dark"] .b-modal{
    background:
        rgba(1,8,17,.78) !important;
}


html[data-theme="dark"] .b-modal > div{
    background:#0d1d31 !important;

    color:#eef6ff !important;

    border:
        1px solid
        rgba(143,190,255,.13) !important;
}


html[data-theme="dark"] .b-modal p,
html[data-theme="dark"] .b-modal span{
    color:#d7e5f5;
}


/* =========================================================
   KEEP IMPORTANT COLORS
========================================================= */

html[data-theme="dark"] .tf-stat-icon.tf-blue{
    background:#102d4d !important;
    color:#72b9ff !important;
}


html[data-theme="dark"] .tf-stat-icon.tf-gold{
    background:#322916 !important;
    color:#e5bd61 !important;
}


html[data-theme="dark"] .tf-stat-icon.tf-green{
    background:#103226 !important;
    color:#6be3ad !important;
}


html[data-theme="dark"] .ta-kpi-icon.green{
    background:#103226 !important;
}


html[data-theme="dark"] .ta-kpi-icon.gold{
    background:#322916 !important;
}


html[data-theme="dark"] .ta-kpi-icon.purple{
    background:#241d3a !important;
}


/* =========================================================
   FINAL FORCE FOR EXACT PAGE SURFACES
========================================================= */

html[data-theme="dark"] .pf-page :where(
    .pf-product-card,
    .pf-product-details > div,
    .pf-product-mini-grid > div,
    .pf-empty
),
html[data-theme="dark"] .tf-page :where(
    .tf-header-action,
    .tf-summary-grid > div,
    .tf-referral-card,
    .tf-qr,
    .tf-level-card,
    .tf-member-card,
    .tf-member-finance-item,
    .tf-empty,
    .ta-kpi,
    .ta-panel,
    .ta-level-card,
    .ta-level-stats > div,
    .tt-card,
    .tt-tabs,
    .tt-level-item
){
    background-color:#0d1d31 !important;
}