/* ============================================================================
   SWIDEPRIME · Light Brand Theme  (Exness-grade, white/trust)
   Loaded LAST in bit_gold so it wins the cascade. Turns the dark starfield
   template into a bright, clean, professional light experience while keeping
   the SWIDEPRIME Prime Palette and Breakout-S discipline.
   ----------------------------------------------------------------------------
   Surfaces : Paper #F7F9FC canvas · White #FFFFFF cards · Cloud #E3E9F4 lines
   Ink      : #0A0F1E headings · slate #5A6B8C body text
   Gold     : #F0B429 fills (ink text) · #B7791F gold-on-light text
   Signals  : Rise #16C784 · Fall #EA3943 · Signal #3E7BFA (market only)
   Type     : Space Grotesk display · Inter UI · IBM Plex Mono data
   ========================================================================== */

:root {
    --sp-ink:        #0A0F1E;
    --sp-slate:      #5A6B8C;   /* body text on light   */
    --sp-mute:       #8B98B8;
    --sp-paper:      #F7F9FC;
    --sp-white:      #FFFFFF;
    --sp-cloud:      #E3E9F4;
    --sp-line:       #E8EDF6;
    --sp-gold:       #F0B429;
    --sp-gold-deep:  #B7791F;
    --sp-mono:       "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

    /* keep --second_color meaning "ink" so `color:var(--second_color)` = dark text */
    --second_color:  #0A0F1E;

    --sp-shadow-sm:  0 1px 2px rgba(10,15,30,.06), 0 2px 8px rgba(10,15,30,.05);
    --sp-shadow:     0 4px 12px rgba(10,15,30,.06), 0 16px 40px rgba(10,15,30,.08);
    --sp-shadow-lg:  0 12px 28px rgba(10,15,30,.10), 0 30px 60px rgba(10,15,30,.12);
    --sp-radius:     16px;
}

/* ============================ 1 · Foundation ============================ */
body {
    background-color: var(--sp-paper) !important;
    color: var(--sp-slate) !important;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .003em;
}

h1,h2,h3,h4,h5,h6,
.hero__title,.section-title,.section-top-title,.box-header .title {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    color: var(--sp-ink) !important;
    letter-spacing: 0;
    font-weight: 700;
}

p { color: var(--sp-slate); }

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
a:hover { color: var(--sp-gold-deep); }

.text-white,
.p--color, .h--color, .para-white {
    color: var(--sp-ink) !important;
}

/* kill the dark starfield — irrelevant on a bright canvas */
.full-wh, .bg-animation, #stars, #stars2, #stars3, #stars4 { display: none !important; }

::selection { background: var(--sp-gold); color: var(--sp-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--sp-paper); }
::-webkit-scrollbar-thumb { background: #CBD5E8; border-radius: 8px; border: 2px solid var(--sp-paper); }
::-webkit-scrollbar-thumb:hover { background: #B4C1DA; }

/* prices, balances, order ids → tabular mono, honest and aligned */
.odometer, .balance, .amount, code, kbd,
.calculator-result, .package-card .price, .d-widget .amount,
td[data-label="Amount"], td[data-label="Trx"], td[data-label="Transaction"] {
    font-family: var(--sp-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* generous section rhythm, alternating white / paper */
section { position: relative; }
.section--bg, .cureency-section { background-color: var(--sp-paper) !important; }

/* =============================== 2 · Header ============================= */
.header__bottom {
    background-color: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sp-line) !important;
}
.header.menu-fixed .header__bottom {
    background-color: rgba(255,255,255,.94) !important;
    box-shadow: var(--sp-shadow-sm);
    border-bottom: 1px solid var(--sp-line) !important;
}

.header .main-menu li a { color: var(--sp-ink) !important; font-weight: 500; }
.header .main-menu li a:hover,
.header .main-menu li a:focus,
.header .main-menu li.active > a { color: var(--sp-gold-deep) !important; }
.header .main-menu li.menu_has_children > a::before { color: var(--sp-slate); }

/* dropdown → white card, ink links */
.header .main-menu li .sub-menu {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    box-shadow: var(--sp-shadow) !important;
    border-radius: 12px;
}
.header .main-menu li .sub-menu li { border-bottom: 1px solid var(--sp-line) !important; }
.header .main-menu li .sub-menu li a { color: var(--sp-ink) !important; }
.header .main-menu li .sub-menu li a:hover {
    background-color: rgba(240,180,41,.10) !important;
    color: var(--sp-gold-deep) !important;
    text-decoration: none;
}

.navbar-collapse { background-color: var(--sp-white) !important; }
@media (max-width:1199px){
    .navbar-collapse { border: 1px solid var(--sp-cloud); border-radius: 14px; box-shadow: var(--sp-shadow); }
}

.menu-toggle:before, .menu-toggle:after, span.menu-toggle { background-color: var(--sp-ink) !important; }
.account-menu .icon i { background-color: var(--sp-gold); color: var(--sp-ink); }

/* =============================== 3 · Hero =============================== */
/* keep the banner image but lay an ink scrim so white hero copy stays crisp */
.hero { padding-top: 250px; }
.hero::before {
    display: block !important;
    background: linear-gradient(90deg, rgba(7,11,22,.82) 0%, rgba(7,11,22,.55) 42%, rgba(7,11,22,.12) 72%, rgba(7,11,22,0) 100%) !important;
    opacity: 1 !important;
}
.hero .text-white,
.hero__title .text-white { color: #fff !important; }
.hero__title { color: #fff !important; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero .base--color { color: var(--sp-gold) !important; }
.hero p.text-white { color: rgba(255,255,255,.9) !important; }

/* inner-hero (breadcrumb pages) → clean ink band */
.inner-hero::before {
    background: linear-gradient(120deg, #0A0F1E 0%, #13203D 100%) !important;
    opacity: 1 !important;
}

/* content sections that sat on dark image scrims → bright, clean light bands.
   The abstract bg image survives as a whisper under a paper wash. */
.overlay--one::before,
.overlay--radial::before,
.about-section::before {
    background: rgba(247,249,252,.94) !important;
    background-image: none !important;
    opacity: 1 !important;
}
.overlay--one, .overlay--radial, .about-section { background-color: var(--sp-paper); }

/* gold as *text* on light must use the deep tone for contrast (guide) */
.base--color { color: var(--sp-gold-deep) !important; }
.hero .base--color { color: var(--sp-gold) !important; }

/* why-choose feature cards → white cards, not dark glass */
.choose-card {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 14px !important;
    box-shadow: var(--sp-shadow) !important;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.choose-card:hover {
    transform: translateY(-5px);
    border-color: rgba(240,180,41,.5) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}
.choose-card__icon, .choose-card__icon.base--color, .choose-card__icon i { color: var(--sp-gold-deep) !important; }
.choose-card__title, .choose-card__title.base--color { color: var(--sp-ink) !important; }

/* closing CTA → deliberate ink panel with gold action (a premium dark accent) */
.cta-wrapper {
    background: linear-gradient(120deg, #0A0F1E 0%, #13203D 100%) !important;
    border: 1px solid rgba(240,180,41,.25);
    border-radius: 20px !important;
    box-shadow: var(--sp-shadow-lg);
    padding: 56px 40px;
}
.cta-wrapper .title, .cta-wrapper h2, .cta-wrapper p { color: #fff !important; }
.cta-wrapper p { color: rgba(234,240,250,.8) !important; }

/* ============================== 4 · Buttons ============================= */
.btn--base, .btn {
    border-radius: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
}
.btn--base {
    background-color: var(--sp-gold) !important;
    color: #0A0F1E !important;
    box-shadow: 0 6px 18px rgba(240,180,41,.28) !important;
    border: 0 !important;
}
.btn--base:hover, .btn--base:focus, .btn--base:active {
    background-color: #FFC53D !important;
    color: #0A0F1E !important;
    box-shadow: 0 10px 26px rgba(240,180,41,.36) !important;
    transform: translateY(-1px);
}
.btn--base.active { background-color: var(--sp-gold-deep) !important; }

/* secondary / bordered → clean white ghost with ink text */
.border-btn, .cmn-btn2 {
    background-color: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    border: 1px solid var(--sp-cloud) !important;
    box-shadow: var(--sp-shadow-sm) !important;
}
.border-btn:hover, .cmn-btn2:hover {
    background-color: var(--sp-white) !important;
    color: var(--sp-gold-deep) !important;
    border-color: var(--sp-gold) !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.2) !important;
    transform: translateY(-1px);
}
.read-btn { background-color: rgba(240,180,41,.14); color: var(--sp-gold-deep); }

/* ======================= 5 · Cards & surfaces ========================== */
.card, .card .card-header, .cmn-accordion .card,
.package-card, .profit-calculator-wrapper, .brand-item,
.blog-card, .account-card, .contact-wrapper, .sidebar .widget {
    background-color: var(--sp-white) !important;
}

.card, .package-card, .profit-calculator-wrapper, .blog-card,
.account-card, .contact-wrapper, .sidebar .widget, .cmn-accordion .card {
    border: 1px solid var(--sp-cloud) !important;
    border-radius: var(--sp-radius) !important;
    box-shadow: var(--sp-shadow) !important;
}
.card .card-header { border-bottom: 1px solid var(--sp-line) !important; }

/* plan / package cards lift on hover — the beautiful moment */
.package-card, .blog-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.package-card:hover, .blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(240,180,41,.55) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}

/* work / step icon chips → gold tint on ink glyph */
.work-card__icon { background-color: rgba(240,180,41,.12) !important; }
.work-card__icon .step-number { background-color: var(--sp-gold) !important; color: var(--sp-ink) !important; }
.d-widget .icon { background-color: rgba(240,180,41,.14) !important; color: var(--sp-gold-deep) !important; }

/* ============================== 6 · Tables ============================= */
.table { background-color: var(--sp-white) !important; border-radius: 14px; overflow: hidden; }
.table thead { background-color: var(--sp-paper) !important; }
.table thead tr th {
    background-color: var(--sp-paper) !important;
    color: var(--sp-ink) !important;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    border-bottom: 1px solid var(--sp-cloud) !important;
}
.table tbody tr td { border-color: var(--sp-line) !important; color: var(--sp-slate); }
.deposit-history-page .table tbody tr td *,
.deposit-history-page .modal-content,
.deposit-history-page .modal-content * {
    color: inherit;
}
.deposit-history-page .table tbody tr td,
.deposit-history-page .table tbody tr td small,
.deposit-history-page .modal-content,
.invest-live-note,
.widget-note {
    color: var(--sp-slate) !important;
}
.deposit-history-page .table tbody tr td strong,
.deposit-history-page .table tbody tr td .fw-bold,
.deposit-history-page .modal-title,
.live-invest-profit,
.live-projected-balance {
    color: var(--sp-ink) !important;
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background-color: var(--sp-paper) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(227,233,244,.35) !important; }

/* =============================== 7 · Forms ============================= */
.form-control, .form--control, textarea, select, .nice-select,
.select2-container--default .select2-selection--single {
    background-color: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 10px !important;
    color: var(--sp-ink) !important;
}
.form-control::placeholder, .form--control::placeholder { color: var(--sp-mute) !important; }
.form-control:focus, .form--control:focus, textarea:focus, select:focus, .nice-select.open {
    border-color: var(--sp-gold) !important;
    box-shadow: 0 0 0 3px rgba(240,180,41,.18) !important;
}
label, .form-label { color: var(--sp-ink); font-weight: 500; }
.input-group-text {
    background-color: var(--sp-paper) !important;
    border: 1px solid var(--sp-cloud) !important;
    color: var(--sp-gold-deep) !important;
}
.select2-dropdown { background: var(--sp-white) !important; border: 1px solid var(--sp-cloud) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sp-gold) !important; color: var(--sp-ink) !important;
}

/* ============================== 8 · Footer ============================= */
.footer { border-top: 1px solid var(--sp-cloud); background-color: var(--sp-white); }
.footer::before { background: var(--sp-white) !important; opacity: 1 !important; }
.footer__bottom { background-color: var(--sp-paper) !important; border-top: 1px solid var(--sp-line); }
.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6 { color: var(--sp-ink) !important; }
.footer p, .footer li, .footer a { color: var(--sp-slate) !important; }
.footer-short-menu li a, .social-link-list li a { color: var(--sp-slate) !important; }
.footer-short-menu li a:hover, .social-link-list li a:hover { color: var(--sp-gold-deep) !important; }

/* ============================ 9 · Odds & ends ========================== */
.scroll-to-top .scroll-icon {
    background-color: var(--sp-gold) !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.35);
}
.scroll-to-top .scroll-icon i { color: var(--sp-ink) !important; }

.preloader { background-color: var(--sp-paper) !important; }

.cookies-card, .cookie__wrapper {
    background: var(--sp-white) !important;
    color: var(--sp-slate) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 16px;
    box-shadow: var(--sp-shadow-lg) !important;
}

.modal-content { background-color: var(--sp-white); border: 1px solid var(--sp-cloud); border-radius: 18px; }
.modal-header, .modal-footer { border-color: var(--sp-line); }

.nav-tabs.custom--style .nav-item .nav-link,
.nav-tabs.custom--style-two .nav-item .nav-link { color: var(--sp-slate); }
.nav-tabs.custom--style .nav-item .nav-link.active,
.nav-tabs.custom--style-two .nav-item .nav-link.active { color: var(--sp-gold-deep); }

/* dashboard shell (logged-in area) */
.sidebar, .dashboard { background-color: var(--sp-paper) !important; }
.sidebar { border-right: 1px solid var(--sp-cloud); }

/* disabled / readonly fields → light, not dark */
.form-control:disabled, .form-control[readonly],
.form--control:disabled, .form--control[readonly] {
    background-color: #EEF2F9 !important;
    color: var(--sp-mute) !important;
    border-color: var(--sp-cloud) !important;
}
.invest-badge__thumb__mask { background: var(--sp-cloud) !important; }

/* accessible gold focus ring */
a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 2px solid rgba(240,180,41,.85); outline-offset: 2px;
}

/* ======================= 10 · Modern User App Shell ====================== */
html[data-swide-theme="dark"] {
    --sp-ink: #F7FAFC;
    --sp-slate: #B8C3D8;
    --sp-mute: #8795B0;
    --sp-paper: #080D18;
    --sp-white: #101827;
    --sp-cloud: #243149;
    --sp-line: #1B263B;
    --sp-gold-deep: #F7C948;
    --second_color: #F7FAFC;
    --sp-shadow-sm: 0 1px 2px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.22);
    --sp-shadow: 0 12px 32px rgba(0,0,0,.32);
    --sp-shadow-lg: 0 18px 46px rgba(0,0,0,.42);
}

html[data-swide-theme="dark"] body {
    background-color: var(--sp-paper) !important;
    color: var(--sp-slate) !important;
}

html[data-swide-theme="dark"] .page-wrapper,
html[data-swide-theme="dark"] .section-wrapper,
html[data-swide-theme="dark"] .sp-dashboard {
    background: var(--sp-paper) !important;
}

.sp-user-header .header__bottom {
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid var(--sp-line) !important;
    box-shadow: 0 1px 0 rgba(10,15,30,.03);
}

.sp-user-header.menu-fixed .header__bottom {
    background: rgba(255,255,255,.96) !important;
}

html[data-swide-theme="dark"] .sp-user-header .header__bottom,
html[data-swide-theme="dark"] .sp-user-header.menu-fixed .header__bottom {
    background: rgba(16,24,39,.92) !important;
    border-bottom-color: var(--sp-line) !important;
}

.sp-user-header .navbar {
    min-height: 72px;
}

.sp-user-header .site-logo img {
    max-width: 168px;
    width: auto;
    max-height: 44px;
    object-fit: contain;
}

.sp-site-logo {
    display: inline-flex;
    align-items: center;
}

.sp-logo-on-dark {
    display: none;
}

html[data-swide-theme="dark"] .sp-logo-on-light {
    display: none;
}

html[data-swide-theme="dark"] .sp-logo-on-dark {
    display: block;
}

.sp-main-menu {
    gap: 6px;
    margin-left: 28px !important;
}

.sp-main-menu > li {
    display: flex;
    align-items: center;
}

.sp-user-header .main-menu > li + li {
    margin-left: 0 !important;
}

.sp-user-header .main-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 12px !important;
    border-radius: 10px;
    color: var(--sp-slate) !important;
    font-size: 14px;
    font-weight: 700 !important;
    letter-spacing: 0;
}

.sp-user-header .main-menu > li > a i {
    color: var(--sp-mute);
    font-size: 18px;
    line-height: 1;
}

.sp-user-header .main-menu > li.active > a,
.sp-user-header .main-menu > li > a:hover,
.sp-user-header .main-menu > li > a:focus {
    background: rgba(240,180,41,.13) !important;
    color: var(--sp-ink) !important;
}

.sp-user-header .main-menu > li.active > a i,
.sp-user-header .main-menu > li > a:hover i,
.sp-user-header .main-menu > li > a:focus i {
    color: var(--sp-gold-deep);
}

.sp-user-header .main-menu li.menu_has_children > a::before {
    right: -1px;
    top: 10px;
    color: var(--sp-mute);
}

.sp-user-header .main-menu li .sub-menu {
    width: 250px;
    left: 0;
    top: calc(100% + 12px);
    padding: 8px !important;
    background: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 14px !important;
    box-shadow: var(--sp-shadow) !important;
}

.sp-user-header .main-menu li .sub-menu li {
    border-bottom: 0 !important;
}

.sp-user-header .main-menu li .sub-menu li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px !important;
    border-radius: 10px;
    color: var(--sp-slate) !important;
    font-size: 13.5px;
    font-weight: 650;
}

.sp-user-header .main-menu li .sub-menu li a i {
    color: var(--sp-mute);
    font-size: 17px;
    width: 18px;
    text-align: center;
}

.sp-user-header .main-menu li .sub-menu li a:hover,
.sp-user-header .main-menu li .sub-menu li a:focus {
    background: rgba(240,180,41,.12) !important;
    color: var(--sp-ink) !important;
    text-decoration: none !important;
}

.sp-user-header .main-menu li .sub-menu li a:hover i,
.sp-user-header .main-menu li .sub-menu li a:focus i {
    color: var(--sp-gold-deep);
}

.sp-nav-right,
.sp-mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-mobile-actions {
    display: none;
    margin-left: auto;
}

.sp-theme-toggle,
.sp-avatar-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 700;
    line-height: 1;
}

.sp-theme-toggle {
    width: auto;
    min-width: 40px;
    padding: 0 12px;
    cursor: pointer;
}

.sp-theme-toggle i,
.sp-avatar-link i {
    font-size: 19px;
}

.sp-theme-icon-dark,
html[data-swide-theme="dark"] .sp-theme-icon-light {
    display: none;
}

html[data-swide-theme="dark"] .sp-theme-icon-dark {
    display: inline-flex;
}

.sp-theme-toggle:hover,
.sp-avatar-link:hover {
    border-color: var(--sp-gold);
    color: var(--sp-gold-deep) !important;
}

.sp-menu-toggle {
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 10px;
    background: var(--sp-white) !important;
    box-shadow: var(--sp-shadow-sm);
}

.sp-hamburger {
    width: 18px;
    height: 14px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.sp-hamburger span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: var(--sp-ink);
}

.sp-menu-toggle:hover,
.sp-menu-toggle:focus {
    border-color: var(--sp-gold) !important;
}

@media (max-width: 1199px) {
    .sp-user-header .navbar {
        min-height: 62px;
    }

    .sp-mobile-actions {
        display: flex;
    }

    .sp-menu-toggle {
        display: inline-flex;
        margin-left: 10px;
    }

    .sp-nav-right .sp-theme-toggle,
    .sp-nav-right .sp-avatar-link {
        display: none;
    }

    .sp-user-header .navbar-collapse {
        background: var(--sp-white) !important;
        border: 1px solid var(--sp-cloud);
        border-radius: 16px;
        box-shadow: var(--sp-shadow);
        margin-top: 12px;
        padding: 12px !important;
    }

    .sp-main-menu {
        gap: 2px;
        margin-left: 0 !important;
    }

    .sp-main-menu > li {
        display: block;
    }

    .sp-user-header .main-menu > li > a {
        display: flex;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px !important;
    }

    .sp-user-header .main-menu li.menu_has_children > a::before {
        display: block;
        top: 11px;
        right: 10px;
    }

    .sp-user-header .main-menu li .sub-menu {
        width: 100%;
        margin: 4px 0 8px;
        padding: 5px !important;
        box-shadow: none !important;
        background: var(--sp-paper) !important;
    }
}

@media (max-width: 480px) {
    .sp-user-header .site-logo img {
        max-width: 132px;
    }

    .sp-theme-toggle span {
        display: none;
    }

    .sp-theme-toggle,
    .sp-avatar-link,
    .sp-menu-toggle {
        width: 36px;
        height: 36px;
        padding: 0;
    }
}

/* =================== 11 · Accounting Dashboard Experience ================= */
.sp-dashboard {
    min-height: calc(100vh - 72px);
    padding: 120px 0 60px;
    background:
        linear-gradient(180deg, rgba(240,180,41,.09), rgba(247,249,252,0) 280px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-dashboard {
    background:
        linear-gradient(180deg, rgba(240,180,41,.08), rgba(8,13,24,0) 280px),
        var(--sp-paper) !important;
}

.sp-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(240,180,41,.35);
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(240,180,41,.11);
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-dashboard-header h1 {
    margin: 10px 0 5px;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
    color: var(--sp-ink) !important;
}

.sp-dashboard-header p {
    max-width: 720px;
    margin: 0;
    color: var(--sp-slate);
    font-size: 14.5px;
}

.sp-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.sp-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 750;
}

.sp-action i {
    font-size: 18px;
    color: var(--sp-gold-deep);
}

.sp-action-primary {
    background: var(--sp-gold) !important;
    border-color: var(--sp-gold) !important;
    color: #0A0F1E !important;
}

.sp-action-primary i {
    color: #0A0F1E;
}

.sp-snapshot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.sp-snapshot-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow-sm);
}

.sp-snapshot-pill span {
    color: var(--sp-mute);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-snapshot-pill strong {
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 13.5px;
}

.sp-alert-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.sp-dashboard-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 15px;
    border: 1px solid var(--sp-cloud);
    border-radius: 12px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow-sm);
}

.sp-dashboard-alert i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 18px;
}

.sp-dashboard-alert strong {
    display: block;
    color: var(--sp-ink);
    font-size: 14px;
    line-height: 1.25;
}

.sp-dashboard-alert span {
    display: block;
    color: var(--sp-slate);
    font-size: 13.5px;
    line-height: 1.45;
}

.sp-dashboard-alert a {
    color: var(--sp-gold-deep);
    font-weight: 750;
}

.sp-alert-success i { color: #16C784; }
.sp-alert-info i { color: #3E7BFA; }
.sp-alert-warning i { color: #D97706; }
.sp-alert-danger i { color: #EA3943; }

.sp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.sp-kpi-card,
.sp-panel {
    background: var(--sp-white);
    border: 1px solid var(--sp-cloud);
    border-radius: 16px;
    box-shadow: var(--sp-shadow);
}

.sp-kpi-card {
    min-height: 164px;
    padding: 18px;
}

.sp-kpi-featured {
    border-color: rgba(240,180,41,.58);
    background:
        linear-gradient(140deg, rgba(240,180,41,.16), rgba(255,255,255,0) 70%),
        var(--sp-white);
}

html[data-swide-theme="dark"] .sp-kpi-featured {
    background:
        linear-gradient(140deg, rgba(240,180,41,.14), rgba(16,24,39,0) 70%),
        var(--sp-white);
}

.sp-card-head,
.sp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sp-card-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(240,180,41,.16);
    color: var(--sp-gold-deep);
}

.sp-card-icon i {
    font-size: 19px;
}

.sp-card-icon-blue { background: rgba(62,123,250,.12); color: #3E7BFA; }
.sp-card-icon-green { background: rgba(22,199,132,.12); color: #16C784; }
.sp-card-icon-amber { background: rgba(245,158,11,.14); color: #D97706; }

.sp-kpi-label {
    margin-left: auto;
    color: var(--sp-mute);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-align: right;
    text-transform: uppercase;
}

.sp-kpi-value {
    margin-top: 22px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: clamp(22px, 2.4vw, 31px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
    word-break: break-word;
}

.sp-kpi-split {
    display: grid;
    gap: 5px;
    margin-top: 14px;
}

.sp-kpi-split span,
.sp-trend-row span:last-child {
    color: var(--sp-slate);
    font-size: 12.5px;
}

.sp-trend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}

.sp-trend {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-family: var(--sp-mono);
    font-size: 12px;
    font-weight: 800;
}

.sp-trend-up {
    background: rgba(22,199,132,.12);
    color: #0E9F6E;
}

.sp-trend-down {
    background: rgba(234,57,67,.12);
    color: #EA3943;
}

.sp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.sp-panel {
    grid-column: span 4;
    padding: 18px;
    min-width: 0;
}

.sp-panel-wide {
    grid-column: span 8;
}

.sp-panel-head {
    margin-bottom: 14px;
}

.sp-panel-head h3 {
    margin: 0 0 4px;
    color: var(--sp-ink) !important;
    font-size: 17px;
    line-height: 1.2;
}

.sp-panel-head p {
    margin: 0;
    color: var(--sp-slate);
    font-size: 12.5px;
    line-height: 1.45;
}

.sp-panel-badge,
.sp-panel-link {
    white-space: nowrap;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    padding: 5px 10px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 11px;
    font-weight: 800;
}

.sp-panel-link {
    color: var(--sp-gold-deep);
}

.sp-chart-controls {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.sp-chart-range {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.sp-chart-range:hover,
.sp-chart-range:focus,
.sp-chart-range.active {
    border-color: var(--sp-gold);
    background: rgba(240,180,41,.16);
    color: var(--sp-ink);
}

.sp-chart-wrap {
    position: relative;
    height: 330px;
    min-height: 330px;
}

.sp-chart-wrap-sm {
    height: 215px;
    min-height: 215px;
}

.sp-chart-empty,
.sp-empty-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--sp-cloud);
    border-radius: 12px;
    color: var(--sp-slate);
    text-align: center;
}

.sp-empty-state i {
    color: var(--sp-gold-deep);
    font-size: 30px;
}

.sp-empty-state a {
    color: var(--sp-gold-deep);
    font-weight: 800;
}

.sp-allocation-list,
.sp-status-list,
.sp-total-list,
.sp-invest-monitor {
    display: grid;
    gap: 10px;
}

.sp-allocation-list div,
.sp-total-list div,
.sp-status-top,
.sp-pending-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sp-allocation-list span,
.sp-total-list span,
.sp-status-top span,
.sp-invest-main span:last-child,
.sp-invest-values span {
    color: var(--sp-slate);
    font-size: 12.5px;
}

.sp-allocation-list strong,
.sp-total-list strong,
.sp-status-top strong,
.sp-invest-name,
.sp-invest-values strong {
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-weight: 800;
}

.sp-status-item {
    display: grid;
    gap: 8px;
}

.sp-status-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--sp-paper);
}

.sp-status-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.sp-status-success { background: #16C784; }
.sp-status-warning { background: #F0B429; }
.sp-status-danger { background: #EA3943; }

.sp-pending-strip {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 12.5px;
}

.sp-pending-strip strong {
    color: var(--sp-ink);
    font-family: var(--sp-mono);
}

.sp-invest-row {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    background: var(--sp-paper);
}

.sp-invest-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sp-invest-name {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 15px;
}

.sp-invest-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--sp-cloud);
}

.sp-invest-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #F0B429, #16C784);
}

.sp-invest-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sp-invest-values div {
    min-width: 0;
}

.sp-invest-values strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    word-break: break-word;
}

.sp-transactions-panel {
    margin-top: 18px;
}

.sp-data-table {
    margin-bottom: 0;
}

.sp-mono {
    font-family: var(--sp-mono);
    font-variant-numeric: tabular-nums;
}

html[data-swide-theme="dark"] .table,
html[data-swide-theme="dark"] .table thead,
html[data-swide-theme="dark"] .table thead tr th,
html[data-swide-theme="dark"] .modal-content,
html[data-swide-theme="dark"] .card,
html[data-swide-theme="dark"] .account-card,
html[data-swide-theme="dark"] .contact-wrapper,
html[data-swide-theme="dark"] .profit-calculator-wrapper,
html[data-swide-theme="dark"] .blog-card,
html[data-swide-theme="dark"] .package-card {
    background-color: var(--sp-white) !important;
    color: var(--sp-slate) !important;
}

html[data-swide-theme="dark"] .table tbody tr:hover {
    background-color: rgba(240,180,41,.08) !important;
}

html[data-swide-theme="dark"] .table tbody tr td,
html[data-swide-theme="dark"] .table tbody tr td *,
html[data-swide-theme="dark"] .modal-content,
html[data-swide-theme="dark"] .modal-content * {
    color: inherit;
}

html[data-swide-theme="dark"] .table thead tr th,
html[data-swide-theme="dark"] .modal-title,
html[data-swide-theme="dark"] .sp-data-table .sp-mono,
html[data-swide-theme="dark"] .table .text-primary {
    color: var(--sp-ink) !important;
}

html[data-swide-theme="dark"] .badge.bg-info,
html[data-swide-theme="dark"] .badge.bg-primary {
    color: #fff !important;
}

@media (max-width: 1199px) {
    .sp-dashboard {
        padding-top: 104px;
    }

    .sp-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-panel,
    .sp-panel-wide {
        grid-column: span 12;
    }
}

@media (max-width: 767px) {
    .sp-dashboard {
        padding-top: 96px;
        padding-bottom: 36px;
    }

    .sp-dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-dashboard-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .sp-action {
        flex: 1 1 auto;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sp-snapshot-pill {
        width: 100%;
        justify-content: space-between;
    }

    .sp-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sp-kpi-card,
    .sp-panel {
        border-radius: 14px;
        padding: 15px;
    }

    .sp-chart-wrap {
        height: 280px;
        min-height: 280px;
    }

    .sp-invest-main,
    .sp-invest-values {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .sp-invest-main {
        display: grid;
    }

    .sp-panel-head {
        flex-direction: column;
    }

    .sp-chart-controls {
        justify-content: flex-start;
        width: 100%;
    }

    .sp-chart-range {
        flex: 1 1 calc(50% - 6px);
    }
}

/* =================== 12 · User Area Contrast Hardening =================== */
.sp-user-header .language_switcher::after,
.sp-user-header .language_switcher__caption .text,
.sp-user-header .language_switcher__list .text {
    color: var(--sp-ink) !important;
}

.sp-user-header .language_switcher__list {
    background: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px !important;
    box-shadow: var(--sp-shadow) !important;
}

.sp-user-header .language_switcher__item a {
    border-bottom-color: var(--sp-line) !important;
}

.sp-user-header .language_switcher__item:hover,
.sp-user-header .language_switcher__item.selected {
    background: rgba(240,180,41,.12) !important;
}

.sp-snapshot-pill span,
.sp-kpi-label {
    color: var(--sp-slate) !important;
}

.sp-data-table .badge.bg-info,
.deposit-history-page .badge.bg-info,
html[data-swide-theme="dark"] .badge.bg-info {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
}

.sp-data-table .badge.bg-primary,
.deposit-history-page .badge.bg-primary,
html[data-swide-theme="dark"] .badge.bg-primary {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}

html[data-swide-theme="dark"] .btn--base,
html[data-swide-theme="dark"] .btn--base.text-white,
html[data-swide-theme="dark"] .btn--base:hover,
html[data-swide-theme="dark"] .btn--base:focus {
    color: #0A0F1E !important;
}

html[data-swide-theme="dark"] [class*="table-responsive--"] tbody tr,
html[data-swide-theme="dark"] [class*="table-responsive--"] tbody tr:nth-child(odd),
html[data-swide-theme="dark"] [class*="table-responsive--"] tr th,
html[data-swide-theme="dark"] [class*="table-responsive--"] tr td {
    background-color: var(--sp-white) !important;
    color: var(--sp-slate) !important;
}

html[data-swide-theme="dark"] [data-label]::before {
    color: var(--sp-ink) !important;
}

html[data-swide-theme="dark"] .sp-data-table .text-primary,
html[data-swide-theme="dark"] .sp-data-table .sp-mono {
    color: var(--sp-ink) !important;
}

/* =================== 13 · Professional Deposit Page =================== */
.sp-deposit-page {
    min-height: calc(100vh - 72px);
    padding: 122px 0 72px;
    background:
        radial-gradient(circle at 8% 0%, rgba(240,180,41,.13), transparent 32%),
        linear-gradient(180deg, rgba(62,123,250,.055), rgba(247,249,252,0) 320px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-deposit-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(240,180,41,.10), transparent 34%),
        linear-gradient(180deg, rgba(62,123,250,.08), rgba(8,13,24,0) 320px),
        var(--sp-paper) !important;
}

.sp-deposit-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.sp-deposit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    border: 1px solid rgba(240,180,41,.38);
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(240,180,41,.12);
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-deposit-topbar h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    font-weight: 850;
}

.sp-deposit-topbar p {
    max-width: 720px;
    margin: 0;
    color: var(--sp-slate);
    font-size: 15px;
    line-height: 1.65;
}

.sp-deposit-history-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    border: 1px solid var(--sp-cloud);
    border-radius: 12px;
    padding: 11px 15px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 750;
}

.sp-deposit-history-link i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-deposit-history-link:hover,
.sp-deposit-history-link:focus {
    border-color: var(--sp-gold);
    color: var(--sp-gold-deep) !important;
    text-decoration: none;
}

.sp-deposit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
    gap: 18px;
    align-items: start;
}

.sp-deposit-card {
    min-width: 0;
    border: 1px solid var(--sp-cloud);
    border-radius: 18px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
}

.sp-deposit-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--sp-line);
    padding: 18px 20px;
}

.sp-deposit-card-head span:first-child {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-deposit-card-head h2 {
    margin: 0;
    color: var(--sp-ink) !important;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.sp-selected-method,
.sp-summary-currency {
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.sp-deposit-page .payment-system-list,
.sp-deposit-page .gateway-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.sp-method-list {
    display: grid;
    gap: 10px;
    max-height: min(642px, calc(100vh - 260px));
    overflow-y: auto;
    padding: 18px;
}

.sp-method-list::-webkit-scrollbar {
    width: 8px;
}

.sp-method-list::-webkit-scrollbar-thumb {
    border: 2px solid var(--sp-white);
    border-radius: 999px;
    background: #c8d2e4;
}

.sp-method-card {
    position: relative;
    display: grid;
    grid-template-columns: 26px 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    border: 1px solid var(--sp-line) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    background: var(--sp-paper);
    color: var(--sp-slate);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sp-method-card:hover,
.sp-method-card:focus-within {
    border-color: rgba(240,180,41,.55) !important;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow-sm);
    transform: translateY(-1px);
}

.sp-method-card:has(.gateway-input:checked) {
    border-color: rgba(240,180,41,.78) !important;
    background: linear-gradient(135deg, rgba(240,180,41,.16), rgba(255,255,255,0) 70%), var(--sp-white);
    box-shadow: 0 0 0 3px rgba(240,180,41,.13), var(--sp-shadow-sm);
}

html[data-swide-theme="dark"] .sp-method-card:has(.gateway-input:checked) {
    background: linear-gradient(135deg, rgba(240,180,41,.14), rgba(16,24,39,0) 72%), var(--sp-white);
}

.sp-method-check {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-cloud);
    border-radius: 50%;
    background: var(--sp-white);
    color: transparent;
    font-size: 15px;
}

.sp-method-card:has(.gateway-input:checked) .sp-method-check {
    border-color: var(--sp-gold);
    background: var(--sp-gold);
    color: #0A0F1E;
}

.sp-method-media {
    width: 58px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    background: #ffffff;
}

.sp-method-media img {
    max-width: 50px;
    max-height: 34px;
    object-fit: contain;
}

.sp-method-copy {
    min-width: 0;
}

.sp-method-copy strong {
    display: block;
    overflow: hidden;
    color: var(--sp-ink);
    font-size: 14.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-method-copy small {
    display: block;
    margin-top: 4px;
    color: var(--sp-mute);
    font-size: 12px;
    line-height: 1.35;
}

.sp-method-code {
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 5px 8px;
    background: var(--sp-white);
    color: var(--sp-slate);
    font-family: var(--sp-mono);
    font-size: 11px;
    font-weight: 800;
}

.sp-method-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 250px;
    border: 1px dashed var(--sp-cloud);
    border-radius: 14px;
    padding: 24px;
    color: var(--sp-slate);
    text-align: center;
}

.sp-method-empty i {
    color: var(--sp-gold-deep);
    font-size: 30px;
}

.sp-method-empty strong {
    color: var(--sp-ink);
}

.sp-more-methods {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 12px !important;
    background: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    font-weight: 800;
}

.sp-summary-panel {
    position: sticky;
    top: 96px;
}

.sp-amount-field,
.sp-quick-amounts,
.sp-deposit-summary-list,
.sp-crypto-message,
.sp-deposit-assurance,
.sp-deposit-submit {
    margin: 18px 20px 0;
}

.sp-amount-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 800;
}

.sp-deposit-amount-group {
    overflow: hidden;
    border: 1px solid var(--sp-cloud);
    border-radius: 14px;
    background: var(--sp-white);
    box-shadow: 0 0 0 4px rgba(227,233,244,.28);
}

.sp-deposit-amount-group .input-group-text {
    min-width: 54px;
    justify-content: center;
    border: 0 !important;
    border-right: 1px solid var(--sp-line) !important;
    border-radius: 0 !important;
    background: var(--sp-paper) !important;
    color: var(--sp-gold-deep) !important;
    font-family: var(--sp-mono);
    font-size: 18px;
    font-weight: 850;
}

.sp-deposit-amount-input,
.sp-deposit-amount-input.form-control,
.sp-deposit-amount-input.form--control {
    height: 62px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    font-family: var(--sp-mono);
    font-size: 24px;
    font-weight: 800;
    text-align: right;
}

.sp-deposit-amount-input::placeholder {
    color: var(--sp-mute) !important;
}

.sp-deposit-amount-input:focus {
    box-shadow: none !important;
}

.sp-deposit-amount-group:focus-within {
    border-color: var(--sp-gold);
    box-shadow: 0 0 0 4px rgba(240,180,41,.18);
}

.sp-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sp-amount-chip {
    min-height: 36px;
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    background: var(--sp-paper);
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 12px;
    font-weight: 850;
}

.sp-amount-chip:hover,
.sp-amount-chip:focus {
    border-color: var(--sp-gold);
    background: rgba(240,180,41,.13);
    color: var(--sp-ink);
}

.sp-deposit-summary-list {
    display: grid;
    gap: 9px;
}

.sp-deposit-page .deposit-info.sp-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    padding: 12px;
    background: var(--sp-paper);
}

.sp-deposit-page .deposit-info__title,
.sp-deposit-page .deposit-info__input {
    max-width: none;
}

.sp-deposit-page .deposit-info__title .text,
.sp-deposit-page .deposit-info__input .text {
    color: var(--sp-slate) !important;
    font-size: 13px;
}

.sp-deposit-page .deposit-info__input .text {
    color: var(--sp-ink) !important;
    font-family: var(--sp-mono);
    font-weight: 850;
}

.sp-deposit-page .deposit-info__title .has-icon {
    gap: 6px;
}

.processing-fee-info,
.proccessing-fee-info {
    color: var(--sp-gold-deep);
    cursor: help;
}

.sp-summary-total {
    border-color: rgba(240,180,41,.42) !important;
    background: rgba(240,180,41,.12) !important;
    color: var(--sp-ink) !important;
}

.sp-summary-total .deposit-info__title .text,
.sp-summary-total .deposit-info__input .text {
    color: var(--sp-ink) !important;
    font-size: 14px;
}

.sp-crypto-message {
    align-items: flex-start;
    gap: 8px;
    border: 1px solid rgba(62,123,250,.25);
    border-radius: 12px;
    padding: 12px;
    background: rgba(62,123,250,.08);
    color: var(--sp-slate);
    font-size: 13px;
}

.sp-crypto-message:not(.d-none) {
    display: flex !important;
}

.sp-crypto-message i {
    color: #3E7BFA;
    font-size: 18px;
}

.sp-deposit-submit {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px) !important;
    margin-bottom: 0;
    font-size: 15px;
}

.sp-deposit-submit:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: grayscale(.15);
    transform: none !important;
    box-shadow: none !important;
}

.sp-deposit-assurance {
    display: grid;
    gap: 9px;
    margin-bottom: 20px;
    border-top: 1px solid var(--sp-line);
    padding-top: 16px;
}

.sp-deposit-assurance div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--sp-slate);
    font-size: 12.5px;
    line-height: 1.45;
}

.sp-deposit-assurance i {
    color: #16C784;
    font-size: 17px;
    line-height: 1.2;
}

html[data-swide-theme="dark"] .sp-method-media {
    background: #ffffff;
}

html[data-swide-theme="dark"] .sp-deposit-amount-input,
html[data-swide-theme="dark"] .sp-deposit-amount-input.form-control,
html[data-swide-theme="dark"] .sp-deposit-amount-input.form--control {
    background: var(--sp-white) !important;
    color: var(--sp-ink) !important;
}

html[data-swide-theme="dark"] .sp-deposit-amount-group .input-group-text,
html[data-swide-theme="dark"] .sp-amount-chip,
html[data-swide-theme="dark"] .sp-deposit-page .deposit-info.sp-summary-row,
html[data-swide-theme="dark"] .sp-selected-method,
html[data-swide-theme="dark"] .sp-summary-currency {
    background: #0C1424 !important;
}

@media (max-width: 1199px) {
    .sp-deposit-page {
        padding-top: 104px;
    }

    .sp-deposit-layout {
        grid-template-columns: 1fr;
    }

    .sp-summary-panel {
        position: static;
    }

    .sp-method-list {
        max-height: none;
    }
}

@media (max-width: 767px) {
    .sp-deposit-page {
        padding-top: 96px;
        padding-bottom: 42px;
    }

    .sp-deposit-topbar,
    .sp-deposit-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-deposit-history-link {
        width: 100%;
    }

    .sp-method-card {
        grid-template-columns: 24px 52px minmax(0, 1fr);
    }

    .sp-method-code {
        grid-column: 3;
        justify-self: start;
    }

    .sp-quick-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-deposit-page .deposit-info.sp-summary-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-deposit-page .deposit-info__input {
        width: 100%;
        text-align: left;
    }

    .sp-deposit-amount-input,
    .sp-deposit-amount-input.form-control,
    .sp-deposit-amount-input.form--control {
        font-size: 21px;
    }
}

@media (max-width: 420px) {
    .sp-deposit-submit {
        width: calc(100% - 28px) !important;
    }

    .sp-method-list,
    .sp-deposit-card-head,
    .sp-amount-field,
    .sp-quick-amounts,
    .sp-deposit-summary-list,
    .sp-crypto-message,
    .sp-deposit-assurance,
    .sp-deposit-submit {
        margin-left: 14px;
        margin-right: 14px;
    }

    .sp-deposit-card-head,
    .sp-method-list {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =================== 14 · Professional Plan Page =================== */
.sp-plan-page {
    min-height: calc(100vh - 72px);
    padding: 124px 0 72px;
    background:
        radial-gradient(circle at 8% 0%, rgba(240,180,41,.13), transparent 32%),
        linear-gradient(180deg, rgba(62,123,250,.055), rgba(247,249,252,0) 330px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-plan-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(240,180,41,.10), transparent 34%),
        linear-gradient(180deg, rgba(62,123,250,.08), rgba(8,13,24,0) 330px),
        var(--sp-paper) !important;
}

.sp-plan-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.sp-plan-eyebrow,
.sp-plan-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-plan-eyebrow {
    margin-bottom: 10px;
    border: 1px solid rgba(240,180,41,.38);
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(240,180,41,.12);
}

.sp-plan-hero h1 {
    max-width: 850px;
    margin: 0 0 8px;
    color: var(--sp-ink) !important;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 850;
}

.sp-plan-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--sp-slate);
    font-size: 15px;
    line-height: 1.65;
}

.sp-plan-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.sp-plan-secondary-action,
.sp-plan-action,
.sp-invest-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
}

.sp-plan-secondary-action,
.sp-invest-back {
    min-height: 44px;
    border: 1px solid var(--sp-cloud);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 750;
}

.sp-plan-secondary-action i,
.sp-invest-back i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-plan-secondary-action-gold {
    background: var(--sp-gold) !important;
    border-color: var(--sp-gold) !important;
    color: #0A0F1E !important;
}

.sp-plan-secondary-action-gold i {
    color: #0A0F1E;
}

.sp-plan-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid var(--sp-cloud);
    border-radius: 18px;
    padding: 20px;
    background: var(--sp-white);
    color: var(--sp-slate);
    box-shadow: var(--sp-shadow);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sp-plan-card:hover {
    border-color: rgba(240,180,41,.58);
    box-shadow: var(--sp-shadow-lg);
    transform: translateY(-3px);
}

.sp-plan-featured {
    border-color: rgba(240,180,41,.58);
    background:
        linear-gradient(145deg, rgba(240,180,41,.13), rgba(255,255,255,0) 62%),
        var(--sp-white);
}

html[data-swide-theme="dark"] .sp-plan-featured {
    background:
        linear-gradient(145deg, rgba(240,180,41,.12), rgba(16,24,39,0) 62%),
        var(--sp-white);
}

.sp-plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.sp-plan-card-head h3 {
    margin: 6px 0 0;
    color: var(--sp-ink) !important;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 850;
}

.sp-plan-badge {
    border: 1px solid rgba(240,180,41,.38);
    border-radius: 999px;
    padding: 6px 9px;
    background: rgba(240,180,41,.13);
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.sp-plan-return {
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    padding: 16px;
    background: var(--sp-paper);
}

.sp-plan-return span,
.sp-plan-return small,
.sp-plan-facts span {
    display: block;
    color: var(--sp-mute);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sp-plan-return strong {
    display: block;
    margin: 6px 0 3px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 34px;
    line-height: 1;
}

.sp-plan-return small {
    color: var(--sp-slate);
    letter-spacing: 0;
    text-transform: none;
}

.sp-plan-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sp-plan-facts div {
    min-width: 0;
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    padding: 12px;
    background: var(--sp-paper);
}

.sp-plan-facts strong {
    display: block;
    margin-top: 5px;
    color: var(--sp-ink);
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.sp-plan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.sp-plan-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    padding: 6px 9px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 12px;
    font-weight: 750;
}

.sp-plan-tags i {
    color: var(--sp-gold-deep);
}

.sp-plan-action {
    min-height: 46px;
    border-radius: 12px;
    padding: 12px 15px;
    background: var(--sp-gold);
    color: #0A0F1E !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.28);
    font-weight: 850;
}

.sp-plan-action:hover,
.sp-plan-action:focus {
    background: #FFC53D;
    color: #0A0F1E !important;
    transform: translateY(-1px);
}

/* =================== 15 · Full Page Investment Flow =================== */
.sp-invest-page {
    min-height: calc(100vh - 72px);
    padding: 118px 0 72px;
    background:
        radial-gradient(circle at 92% 0%, rgba(22,199,132,.10), transparent 28%),
        linear-gradient(180deg, rgba(240,180,41,.08), rgba(247,249,252,0) 320px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-invest-page {
    background:
        radial-gradient(circle at 92% 0%, rgba(22,199,132,.08), transparent 30%),
        linear-gradient(180deg, rgba(240,180,41,.07), rgba(8,13,24,0) 320px),
        var(--sp-paper) !important;
}

.sp-invest-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.sp-invest-topbar > span {
    color: var(--sp-mute);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-invest-layout {
    display: grid;
    grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: start;
}

.sp-invest-plan-card,
.sp-invest-workspace,
.sp-invest-empty,
.sp-invest-form {
    border: 1px solid var(--sp-cloud);
    border-radius: 18px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
}

.sp-invest-plan-card {
    position: sticky;
    top: 96px;
    padding: 22px;
}

.sp-invest-plan-card h1 {
    margin: 8px 0 18px;
    color: var(--sp-ink) !important;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    font-weight: 850;
}

.sp-invest-plan-return {
    border: 1px solid rgba(240,180,41,.32);
    border-radius: 16px;
    padding: 16px;
    background: rgba(240,180,41,.12);
}

.sp-invest-plan-return span,
.sp-invest-plan-return small,
.sp-invest-plan-grid span,
.sp-invest-review span {
    display: block;
    color: var(--sp-mute);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sp-invest-plan-return strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 36px;
    line-height: 1;
}

.sp-invest-plan-return small {
    color: var(--sp-slate);
    letter-spacing: 0;
    text-transform: none;
}

.sp-invest-plan-grid {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.sp-invest-plan-grid div,
.sp-invest-review div {
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    padding: 12px;
    background: var(--sp-paper);
}

.sp-invest-plan-grid strong,
.sp-invest-review strong {
    display: block;
    margin-top: 5px;
    color: var(--sp-ink);
    font-size: 14px;
    line-height: 1.3;
}

.sp-invest-capital-note {
    margin: 14px 0 0;
    border-left: 3px solid var(--sp-gold);
    padding-left: 12px;
    color: var(--sp-slate);
    font-size: 13px;
    line-height: 1.55;
}

.sp-invest-form {
    display: grid;
    gap: 0;
    overflow: hidden;
}

.sp-invest-step {
    padding: 22px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-invest-step-head {
    margin-bottom: 16px;
}

.sp-invest-step-head span {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-invest-step-head h2 {
    margin: 0 0 5px;
    color: var(--sp-ink) !important;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 850;
}

.sp-invest-step-head p {
    max-width: 700px;
    margin: 0;
    color: var(--sp-slate);
    font-size: 13.5px;
    line-height: 1.55;
}

.sp-invest-amount-wrap label,
.sp-invest-option label {
    display: block;
    margin-bottom: 8px;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 800;
}

.sp-invest-amount-group {
    overflow: hidden;
    border: 1px solid var(--sp-cloud);
    border-radius: 14px;
    background: var(--sp-white);
    box-shadow: 0 0 0 4px rgba(227,233,244,.28);
}

.sp-invest-amount-group .input-group-text {
    min-width: 56px;
    justify-content: center;
    border: 0 !important;
    border-right: 1px solid var(--sp-line) !important;
    border-radius: 0 !important;
    background: var(--sp-paper) !important;
    color: var(--sp-gold-deep) !important;
    font-family: var(--sp-mono);
    font-size: 18px;
    font-weight: 850;
}

.sp-invest-amount-group .form-control {
    height: 62px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    font-family: var(--sp-mono);
    font-size: 24px;
    font-weight: 850;
    text-align: right;
}

.sp-invest-amount-group:focus-within {
    border-color: var(--sp-gold);
    box-shadow: 0 0 0 4px rgba(240,180,41,.18);
}

.sp-invest-amount-wrap small,
.sp-invest-option small {
    display: block;
    margin-top: 7px;
    color: var(--sp-slate);
    font-size: 12.5px;
    line-height: 1.45;
}

.sp-funding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sp-funding-card {
    position: relative;
    min-height: 94px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 14px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sp-funding-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sp-funding-card:hover,
.sp-funding-card:focus-within {
    border-color: rgba(240,180,41,.55);
    background: var(--sp-white);
    box-shadow: var(--sp-shadow-sm);
    transform: translateY(-1px);
}

.sp-funding-card:has(input:checked) {
    border-color: rgba(240,180,41,.78);
    background: linear-gradient(135deg, rgba(240,180,41,.14), rgba(255,255,255,0) 70%), var(--sp-white);
    box-shadow: 0 0 0 3px rgba(240,180,41,.12), var(--sp-shadow-sm);
}

html[data-swide-theme="dark"] .sp-funding-card:has(input:checked) {
    background: linear-gradient(135deg, rgba(240,180,41,.12), rgba(16,24,39,0) 70%), var(--sp-white);
}

.sp-funding-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(240,180,41,.14);
    color: var(--sp-gold-deep);
}

.sp-funding-icon i {
    font-size: 20px;
}

.sp-funding-card strong {
    display: block;
    color: var(--sp-ink);
    font-size: 14px;
    line-height: 1.3;
}

.sp-funding-card small {
    display: block;
    margin-top: 4px;
    color: var(--sp-slate);
    font-size: 12.5px;
    line-height: 1.4;
}

.sp-gateway-fees {
    margin-top: 12px;
    border: 1px solid rgba(62,123,250,.24);
    border-radius: 13px;
    padding: 12px;
    background: rgba(62,123,250,.08);
}

.sp-gateway-fees span,
.sp-gateway-fees small {
    color: var(--sp-slate);
    font-size: 12.5px;
}

.sp-gateway-fees strong {
    display: block;
    margin: 4px 0;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
}

.sp-invest-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sp-invest-option {
    min-width: 0;
}

.sp-invest-option .input-group-text {
    color: var(--sp-gold-deep) !important;
    font-weight: 800;
}

.sp-schedule-fields {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 14px;
    background: var(--sp-paper);
}

.sp-schedule-fields.is-visible {
    display: grid;
}

.sp-invest-review {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-invest-review strong {
    font-family: var(--sp-mono);
    word-break: break-word;
}

.sp-invest-alert {
    margin: 18px 22px 0;
    border: 1px solid rgba(234,57,67,.24);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(234,57,67,.08);
    color: #EA3943;
    font-size: 13px;
    font-weight: 750;
}

.sp-invest-submit {
    width: calc(100% - 44px) !important;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 22px 22px;
    font-size: 15px;
}

.sp-invest-submit:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: grayscale(.15);
    transform: none !important;
    box-shadow: none !important;
}

.sp-invest-empty {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 460px;
    padding: 36px;
    text-align: center;
}

.sp-invest-empty i {
    color: var(--sp-gold-deep);
    font-size: 44px;
}

.sp-invest-empty h2 {
    margin: 0;
    color: var(--sp-ink) !important;
}

.sp-invest-empty p {
    max-width: 560px;
    margin: 0;
    color: var(--sp-slate);
    line-height: 1.6;
}

html[data-swide-theme="dark"] .sp-invest-amount-group .input-group-text,
html[data-swide-theme="dark"] .sp-invest-plan-grid div,
html[data-swide-theme="dark"] .sp-invest-review div,
html[data-swide-theme="dark"] .sp-schedule-fields {
    background: #0C1424 !important;
}

@media (max-width: 1199px) {
    .sp-plan-page,
    .sp-invest-page {
        padding-top: 104px;
    }

    .sp-invest-layout {
        grid-template-columns: 1fr;
    }

    .sp-invest-plan-card {
        position: static;
    }
}

@media (max-width: 991px) {
    .sp-plan-hero,
    .sp-invest-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-plan-hero-actions,
    .sp-plan-secondary-action,
    .sp-invest-back {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sp-plan-page,
    .sp-invest-page {
        padding-top: 96px;
        padding-bottom: 44px;
    }

    .sp-plan-facts,
    .sp-funding-grid,
    .sp-invest-options,
    .sp-schedule-fields,
    .sp-invest-review {
        grid-template-columns: 1fr;
    }

    .sp-plan-card,
    .sp-invest-plan-card,
    .sp-invest-step {
        padding: 16px;
    }

    .sp-invest-review {
        padding: 16px;
    }

    .sp-invest-alert {
        margin-left: 16px;
        margin-right: 16px;
    }

    .sp-invest-submit {
        width: calc(100% - 32px) !important;
        margin-left: 16px;
        margin-right: 16px;
    }

    .sp-invest-amount-group .form-control {
        font-size: 21px;
    }
}

/* =================== 16 · Account Shell & My Investments =================== */
.sp-account-shell {
    --sp-user-header-offset: 92px;
}

.sp-account-shell > .section-wrapper--account {
    min-height: calc(100vh - var(--sp-user-header-offset));
    padding-top: var(--sp-user-header-offset);
    background: var(--sp-paper);
}

.sp-account-shell > .section-wrapper--account > .sp-dashboard,
.sp-account-shell > .section-wrapper--account > .sp-plan-page,
.sp-account-shell > .section-wrapper--account > .sp-invest-page,
.sp-account-shell > .section-wrapper--account > .sp-deposit-page,
.sp-account-shell > .section-wrapper--account > .sp-investments-page {
    margin-top: calc(var(--sp-user-header-offset) * -1);
}

.sp-account-shell > .section-wrapper--account > .cmn-section,
.sp-account-shell > .section-wrapper--account > .pt-60,
.sp-account-shell > .section-wrapper--account > .pt-120,
.sp-account-shell > .section-wrapper--account > section.pt-60,
.sp-account-shell > .section-wrapper--account > div.pt-60,
.sp-account-shell > .section-wrapper--account > section.pt-120,
.sp-account-shell > .section-wrapper--account > div.pt-120 {
    padding-top: 24px !important;
}

.sp-investments-page {
    min-height: calc(100vh - 72px);
    padding: 124px 0 60px;
    background:
        linear-gradient(180deg, rgba(240,180,41,.08), rgba(247,249,252,0) 300px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-investments-page {
    background:
        linear-gradient(180deg, rgba(240,180,41,.07), rgba(8,13,24,0) 300px),
        var(--sp-paper) !important;
}

.sp-investments-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.sp-investments-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(240,180,41,.38);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(240,180,41,.12);
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-investments-header h1 {
    margin: 10px 0 5px;
    color: var(--sp-ink) !important;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    font-weight: 850;
}

.sp-investments-header p {
    max-width: 760px;
    margin: 0;
    color: var(--sp-slate);
    line-height: 1.6;
}

.sp-investments-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.sp-investment-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.sp-investment-summary-card,
.sp-investments-panel,
.sp-invest-card,
.sp-capital-modal .modal-content {
    border: 1px solid var(--sp-cloud);
    border-radius: 16px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
}

.sp-investment-summary-card {
    min-width: 0;
    padding: 16px;
}

.sp-investment-summary-card span,
.sp-investment-summary-card small {
    display: block;
    color: var(--sp-slate);
}

.sp-investment-summary-card span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sp-investment-summary-card strong {
    display: block;
    margin-top: 8px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.08;
    word-break: break-word;
}

.sp-investment-summary-card small {
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.45;
}

.sp-investments-panel {
    overflow: hidden;
}

.sp-investments-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-investments-panel-head h2 {
    margin: 0 0 4px;
    color: var(--sp-ink) !important;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 850;
}

.sp-investments-panel-head p {
    margin: 0;
    color: var(--sp-slate);
    font-size: 13px;
    line-height: 1.5;
}

.sp-investments-panel-head > span {
    flex: 0 0 auto;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.sp-invest-history {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.sp-invest-card {
    padding: 16px;
    box-shadow: var(--sp-shadow-sm);
}

.sp-invest-card-top,
.sp-invest-progress-row,
.sp-invest-card-actions,
.sp-invest-plan-title {
    display: flex;
    align-items: center;
}

.sp-invest-card-top {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.sp-invest-plan-title {
    min-width: 0;
    gap: 12px;
}

.sp-invest-plan-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240,180,41,.14);
    color: var(--sp-gold-deep);
}

.sp-invest-plan-icon i {
    font-size: 22px;
}

.sp-invest-plan-label {
    display: block;
    color: var(--sp-mute);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-invest-plan-title h3 {
    margin: 2px 0 2px;
    color: var(--sp-ink) !important;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 850;
}

.sp-invest-plan-title p {
    margin: 0;
    color: var(--sp-slate);
    font-size: 12.5px;
}

.sp-invest-plan-title p strong {
    color: var(--sp-ink);
    font-family: var(--sp-mono);
}

.sp-invest-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.sp-status-running {
    background: rgba(22,199,132,.12);
    color: #0E9F6E;
}

.sp-status-completed {
    background: rgba(62,123,250,.12);
    color: #2F65D8;
}

.sp-status-canceled {
    background: rgba(234,57,67,.12);
    color: #D92D3A;
}

html[data-swide-theme="dark"] .sp-status-running { color: #48D597; }
html[data-swide-theme="dark"] .sp-status-completed { color: #7EA6FF; }
html[data-swide-theme="dark"] .sp-status-canceled { color: #FF7780; }

.sp-invest-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.sp-invest-metric {
    min-width: 0;
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    padding: 12px;
    background: var(--sp-paper);
}

.sp-invest-metric span,
.sp-invest-metric small {
    display: block;
    color: var(--sp-slate);
}

.sp-invest-metric span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-invest-metric strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 18px;
    line-height: 1.15;
    word-break: break-word;
}

.sp-invest-live-metric strong {
    color: var(--sp-gold-deep);
}

.sp-invest-metric small {
    font-size: 12px;
    line-height: 1.45;
}

.sp-invest-progress-row {
    gap: 12px;
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    padding: 12px;
    background: var(--sp-white);
}

.sp-invest-progress-copy {
    min-width: 190px;
}

.sp-invest-progress-copy span {
    display: block;
    color: var(--sp-mute);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-invest-progress-copy strong {
    display: block;
    margin-top: 3px;
    color: var(--sp-ink);
    font-size: 13px;
    line-height: 1.35;
}

.sp-invest-progress {
    position: relative;
    flex: 1 1 auto;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--sp-cloud);
}

.sp-invest-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sp-gold), #16C784);
}

.sp-invest-progress-percent {
    min-width: 56px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

.sp-invest-card-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.sp-invest-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    padding: 9px 12px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: var(--sp-shadow-sm);
}

.sp-invest-action i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-invest-action:hover,
.sp-invest-action:focus {
    border-color: var(--sp-gold);
    color: var(--sp-gold-deep) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.sp-investments-pagination {
    margin: 0;
    padding: 0 16px 18px;
}

.sp-investment-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 340px;
    padding: 32px;
    text-align: center;
}

.sp-investment-empty span {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(240,180,41,.14);
    color: var(--sp-gold-deep);
}

.sp-investment-empty i {
    font-size: 30px;
}

.sp-investment-empty h3 {
    margin: 0;
    color: var(--sp-ink) !important;
    font-size: 22px;
}

.sp-investment-empty p {
    max-width: 540px;
    margin: 0;
    color: var(--sp-slate);
    line-height: 1.6;
}

.sp-capital-modal .modal-content {
    overflow: hidden;
    color: var(--sp-slate);
}

.sp-capital-modal .modal-header {
    align-items: flex-start;
    background: var(--sp-paper);
}

.sp-capital-modal .modal-header span {
    display: block;
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-capital-modal .modal-title {
    display: block;
    margin-top: 4px;
    color: var(--sp-ink) !important;
    font-size: 18px;
}

.sp-modal-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    background: var(--sp-white);
    color: var(--sp-ink);
}

.sp-capital-modal label {
    color: var(--sp-ink);
    font-weight: 800;
}

.sp-capital-modal small {
    display: block;
    margin-top: 7px;
    color: var(--sp-slate);
    line-height: 1.45;
}

@media (max-width: 1199px) {
    .sp-account-shell {
        --sp-user-header-offset: 84px;
    }

    .sp-user-header .navbar-collapse {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }

    .sp-investment-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .sp-investments-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-investments-actions,
    .sp-investments-actions .sp-action {
        width: 100%;
    }

    .sp-invest-metric-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .sp-account-shell {
        --sp-user-header-offset: 76px;
    }

    .sp-investments-page {
        padding-top: 104px;
        padding-bottom: 44px;
    }

    .sp-investment-summary {
        grid-template-columns: 1fr;
    }

    .sp-investments-panel-head,
    .sp-invest-card-top,
    .sp-invest-progress-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-invest-progress-copy,
    .sp-invest-progress,
    .sp-invest-progress-percent,
    .sp-invest-card-actions,
    .sp-invest-action {
        width: 100%;
    }

    .sp-invest-progress-percent {
        text-align: left;
    }
}

/* =================== 17 · Professional Public Header =================== */
.sp-public-header .header__bottom {
    background: rgba(255,255,255,.90) !important;
    border-bottom: 1px solid var(--sp-line) !important;
    box-shadow: 0 1px 0 rgba(10,15,30,.04);
}

.sp-public-header.menu-fixed .header__bottom {
    background: rgba(255,255,255,.96) !important;
    box-shadow: var(--sp-shadow-sm);
}

.sp-public-header .navbar {
    min-height: 76px;
}

.sp-public-logo {
    display: inline-flex;
    align-items: center;
}

.sp-public-header .site-logo img {
    width: auto;
    max-width: 174px;
    max-height: 46px;
    object-fit: contain;
}

.sp-public-menu {
    gap: 6px;
    margin-left: 24px !important;
}

.sp-public-header .main-menu > li + li {
    margin-left: 0 !important;
}

.sp-public-header .main-menu > li > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 9px 12px !important;
    color: var(--sp-slate) !important;
    font-size: 14px;
    font-weight: 750 !important;
    letter-spacing: 0;
}

.sp-public-header .main-menu > li.active > a,
.sp-public-header .main-menu > li > a:hover,
.sp-public-header .main-menu > li > a:focus {
    background: rgba(240,180,41,.13) !important;
    color: var(--sp-ink) !important;
    text-decoration: none !important;
}

.sp-public-nav-right,
.sp-public-mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-public-mobile-actions {
    display: none;
    margin-left: auto;
}

.sp-public-action,
.sp-public-icon-action,
.sp-public-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 800;
    line-height: 1;
}

.sp-public-action {
    min-height: 42px;
    gap: 8px;
    padding: 10px 14px;
}

.sp-public-icon-action,
.sp-public-menu-toggle {
    width: 40px;
    height: 40px;
}

.sp-public-action i,
.sp-public-icon-action i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-public-action-primary {
    border-color: var(--sp-gold) !important;
    background: var(--sp-gold) !important;
    color: #0A0F1E !important;
    box-shadow: 0 8px 22px rgba(240,180,41,.24);
}

.sp-public-action-primary i {
    color: #0A0F1E;
}

.sp-public-action:hover,
.sp-public-action:focus,
.sp-public-icon-action:hover,
.sp-public-icon-action:focus,
.sp-public-menu-toggle:hover,
.sp-public-menu-toggle:focus {
    border-color: var(--sp-gold);
    color: var(--sp-gold-deep) !important;
    text-decoration: none !important;
}

.sp-public-action-primary:hover,
.sp-public-action-primary:focus {
    background: #FFC53D !important;
    color: #0A0F1E !important;
}

.sp-public-menu-toggle {
    display: none;
    padding: 0 !important;
}

.sp-public-header .language_switcher::after,
.sp-public-header .language_switcher__caption .text,
.sp-public-header .language_switcher__list .text {
    color: var(--sp-ink) !important;
}

.sp-public-header .language_switcher__list {
    background: var(--sp-white) !important;
    border: 1px solid var(--sp-cloud);
    border-radius: 10px;
    box-shadow: var(--sp-shadow);
}

.sp-public-header .language_switcher__item:hover,
.sp-public-header .language_switcher__item.selected {
    background: rgba(240,180,41,.12);
}

@media (max-width: 1199px) {
    .sp-public-header .navbar {
        min-height: 64px;
    }

    .sp-public-mobile-actions,
    .sp-public-menu-toggle {
        display: inline-flex;
    }

    .sp-public-header .navbar-collapse {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        margin-top: 12px;
        border: 1px solid var(--sp-cloud);
        border-radius: 16px;
        padding: 12px !important;
        background: var(--sp-white) !important;
        box-shadow: var(--sp-shadow);
    }

    .sp-public-menu {
        gap: 2px;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .sp-public-header .main-menu > li > a {
        width: 100%;
        min-height: 42px;
        display: flex;
        padding: 10px 12px !important;
    }

    .sp-public-nav-right {
        align-items: stretch;
        flex-direction: column;
        margin: 10px 0 0 !important;
        padding-top: 12px;
        border-top: 1px solid var(--sp-line);
    }

    .sp-public-nav-right .sp-public-action {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .sp-public-header .site-logo img {
        max-width: 136px;
    }

    .sp-public-icon-action,
    .sp-public-menu-toggle {
        width: 36px;
        height: 36px;
    }
}

/* =================== 18 · Professional Withdraw Page =================== */
.sp-withdraw-page {
    min-height: calc(100vh - 72px);
    padding: 124px 0 60px;
    background:
        linear-gradient(180deg, rgba(240,180,41,.08), rgba(247,249,252,0) 300px),
        var(--sp-paper);
    color: var(--sp-slate);
}

html[data-swide-theme="dark"] .sp-withdraw-page {
    background:
        linear-gradient(180deg, rgba(240,180,41,.07), rgba(8,13,24,0) 300px),
        var(--sp-paper) !important;
}

.sp-account-shell > .section-wrapper--account > .sp-withdraw-page {
    margin-top: calc(var(--sp-user-header-offset) * -1);
}

.sp-withdraw-topbar,
.sp-withdraw-card-head,
.sp-withdraw-balance-row,
.sp-withdraw-layout {
    display: flex;
}

.sp-withdraw-topbar {
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.sp-withdraw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(240,180,41,.38);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(240,180,41,.12);
    color: var(--sp-gold-deep);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-withdraw-topbar h1 {
    margin: 10px 0 5px;
    color: var(--sp-ink) !important;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.05;
    font-weight: 850;
}

.sp-withdraw-topbar p {
    max-width: 760px;
    margin: 0;
    color: var(--sp-slate);
    line-height: 1.6;
}

.sp-withdraw-history-link,
.sp-calculator-invest-now {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--sp-cloud);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--sp-white);
    color: var(--sp-ink) !important;
    box-shadow: var(--sp-shadow-sm);
    font-weight: 800;
    text-decoration: none !important;
}

.sp-withdraw-history-link i,
.sp-calculator-invest-now i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-withdraw-history-link:hover,
.sp-withdraw-history-link:focus,
.sp-calculator-invest-now:hover,
.sp-calculator-invest-now:focus {
    border-color: var(--sp-gold);
    color: var(--sp-gold-deep) !important;
}

.sp-calculator-invest-now {
    width: 100%;
    margin-top: 14px;
    background: var(--sp-gold) !important;
    border-color: var(--sp-gold) !important;
    color: #0A0F1E !important;
}

.sp-calculator-invest-now i {
    color: #0A0F1E;
}

.sp-withdraw-balance-row {
    gap: 14px;
    margin-bottom: 16px;
}

.sp-withdraw-balance-card,
.sp-withdraw-card {
    border: 1px solid var(--sp-cloud);
    border-radius: 16px;
    background: var(--sp-white);
    box-shadow: var(--sp-shadow);
}

.sp-withdraw-balance-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px;
}

.sp-withdraw-balance-card span,
.sp-withdraw-balance-card small {
    display: block;
    color: var(--sp-slate);
}

.sp-withdraw-balance-card span {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sp-withdraw-balance-card strong {
    display: block;
    margin-top: 7px;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.1;
    word-break: break-word;
}

.sp-withdraw-balance-card small {
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.45;
}

.sp-withdraw-layout {
    align-items: flex-start;
    gap: 16px;
}

.sp-withdraw-method-panel {
    flex: 1 1 54%;
    min-width: 0;
    overflow: hidden;
}

.sp-withdraw-summary-panel {
    position: sticky;
    top: 96px;
    flex: 1 1 46%;
    min-width: 360px;
    overflow: hidden;
}

.sp-withdraw-card-head {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--sp-line);
}

.sp-withdraw-card-head span,
.sp-withdraw-card-head strong,
.sp-withdraw-currency {
    color: var(--sp-slate);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sp-withdraw-card-head h2 {
    margin: 5px 0 0;
    color: var(--sp-ink) !important;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 850;
}

.sp-withdraw-card-head strong,
.sp-withdraw-currency {
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--sp-paper);
    color: var(--sp-gold-deep);
    white-space: nowrap;
}

.sp-withdraw-method-list {
    max-height: 620px;
    display: grid !important;
    gap: 10px;
    overflow-y: auto;
    padding: 16px !important;
    background: transparent !important;
}

.sp-withdraw-method-card {
    position: relative;
    min-height: 118px;
    display: grid;
    grid-template-columns: 42px 86px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 14px;
    background: var(--sp-paper);
    color: var(--sp-slate);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sp-withdraw-method-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.sp-withdraw-method-card:hover,
.sp-withdraw-method-card:focus-within {
    border-color: rgba(240,180,41,.55);
    background: var(--sp-white);
    box-shadow: var(--sp-shadow-sm);
    transform: translateY(-1px);
}

.sp-withdraw-method-card:has(input:checked) {
    border-color: rgba(240,180,41,.78);
    background: linear-gradient(135deg, rgba(240,180,41,.14), rgba(255,255,255,0) 70%), var(--sp-white);
    box-shadow: 0 0 0 3px rgba(240,180,41,.12), var(--sp-shadow-sm);
}

.sp-withdraw-method-check {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    background: var(--sp-white);
    color: transparent;
}

.sp-withdraw-method-card:has(input:checked) .sp-withdraw-method-check {
    border-color: var(--sp-gold);
    background: var(--sp-gold);
    color: #0A0F1E;
}

.sp-withdraw-method-media {
    width: 86px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    background: var(--sp-white);
}

.sp-withdraw-method-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-withdraw-method-copy {
    min-width: 0;
}

.sp-withdraw-method-copy strong {
    display: block;
    color: var(--sp-ink);
    font-size: 16px;
    line-height: 1.25;
}

.sp-withdraw-method-copy small {
    display: block;
    margin-top: 4px;
    color: var(--sp-slate);
    font-size: 12px;
    line-height: 1.35;
}

.sp-withdraw-method-code {
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    padding: 6px 9px;
    background: var(--sp-white);
    color: var(--sp-gold-deep);
    font-family: var(--sp-mono);
    font-size: 11px;
    font-weight: 850;
}

.sp-more-withdraw-methods {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--sp-cloud);
    border-radius: 12px;
    background: var(--sp-white);
    color: var(--sp-ink);
    font-weight: 800;
}

.sp-withdraw-amount-field,
.sp-withdraw-quick-amounts,
.sp-withdraw-summary-list,
.sp-withdraw-validation,
.sp-withdraw-account-note,
.sp-withdraw-submit {
    margin: 16px 18px 0;
}

.sp-withdraw-amount-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--sp-ink);
    font-size: 13px;
    font-weight: 800;
}

.sp-withdraw-amount-group {
    overflow: hidden;
    border: 1px solid var(--sp-cloud);
    border-radius: 14px;
    background: var(--sp-white);
    box-shadow: 0 0 0 4px rgba(227,233,244,.28);
}

.sp-withdraw-amount-group .input-group-text {
    min-width: 56px;
    justify-content: center;
    border: 0 !important;
    border-right: 1px solid var(--sp-line) !important;
    border-radius: 0 !important;
    background: var(--sp-paper) !important;
    color: var(--sp-gold-deep) !important;
    font-family: var(--sp-mono);
    font-size: 18px;
    font-weight: 850;
}

.sp-withdraw-amount-group .form-control {
    height: 62px;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sp-white) !important;
    color: var(--sp-ink) !important;
    font-family: var(--sp-mono);
    font-size: 24px;
    font-weight: 850;
    text-align: right;
}

.sp-withdraw-amount-group:focus-within {
    border-color: var(--sp-gold);
    box-shadow: 0 0 0 4px rgba(240,180,41,.18);
}

.sp-withdraw-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sp-withdraw-amount-chip {
    min-height: 36px;
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    background: var(--sp-paper);
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 12px;
    font-weight: 850;
}

.sp-withdraw-amount-chip:hover,
.sp-withdraw-amount-chip:focus {
    border-color: var(--sp-gold);
    background: rgba(240,180,41,.13);
}

.sp-withdraw-summary-list {
    display: grid;
    gap: 10px;
}

.sp-withdraw-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--sp-line);
    border-radius: 13px;
    padding: 12px;
    background: var(--sp-paper);
}

.sp-withdraw-summary-row span {
    color: var(--sp-slate);
    font-size: 12.5px;
    font-weight: 750;
}

.sp-withdraw-summary-row strong {
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 13px;
    text-align: right;
}

.sp-withdraw-summary-total {
    border-color: rgba(240,180,41,.42);
    background: rgba(240,180,41,.10);
}

.sp-withdraw-validation {
    border: 1px solid rgba(234,57,67,.24);
    border-radius: 12px;
    padding: 12px;
    background: rgba(234,57,67,.08);
    color: #D92D3A;
    font-size: 13px;
    font-weight: 750;
}

.sp-withdraw-validation.is-ready {
    border-color: rgba(22,199,132,.28);
    background: rgba(22,199,132,.10);
    color: #0E9F6E;
}

html[data-swide-theme="dark"] .sp-withdraw-validation { color: #FF7780; }
html[data-swide-theme="dark"] .sp-withdraw-validation.is-ready { color: #48D597; }

.sp-withdraw-account-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-left: 3px solid var(--sp-gold);
    padding-left: 12px;
    color: var(--sp-slate);
    font-size: 12.5px;
    line-height: 1.5;
}

.sp-withdraw-account-note i {
    color: var(--sp-gold-deep);
    font-size: 18px;
}

.sp-withdraw-account-note strong {
    color: var(--sp-ink);
}

.sp-withdraw-submit {
    width: calc(100% - 36px) !important;
    min-height: 52px;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sp-withdraw-submit:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: grayscale(.15);
    transform: none !important;
    box-shadow: none !important;
}

.sp-withdraw-holiday,
.sp-withdraw-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 360px;
    padding: 36px;
    text-align: center;
}

.sp-withdraw-holiday > i,
.sp-withdraw-empty > i {
    color: var(--sp-gold-deep);
    font-size: 44px;
}

.sp-withdraw-holiday h2,
.sp-withdraw-empty h2 {
    margin: 0;
    color: var(--sp-ink) !important;
}

.sp-withdraw-holiday p,
.sp-withdraw-empty p {
    margin: 0;
    color: var(--sp-slate);
}

.sp-withdraw-countdown {
    border: 1px solid var(--sp-cloud);
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--sp-paper);
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-weight: 850;
}

@media (max-width: 1199px) {
    .sp-withdraw-page {
        padding-top: 104px;
    }

    .sp-withdraw-layout {
        flex-direction: column;
    }

    .sp-withdraw-method-panel,
    .sp-withdraw-summary-panel {
        width: 100%;
        flex-basis: auto;
        min-width: 0;
    }

    .sp-withdraw-summary-panel {
        position: static;
    }
}

@media (max-width: 991px) {
    .sp-withdraw-topbar,
    .sp-withdraw-balance-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-withdraw-history-link,
    .sp-withdraw-balance-card {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sp-withdraw-page {
        padding-top: 96px;
        padding-bottom: 44px;
    }

    .sp-withdraw-method-card {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .sp-withdraw-method-media {
        grid-column: 1 / -1;
        width: 100%;
        height: 120px;
    }

    .sp-withdraw-method-code {
        align-self: start;
    }

    .sp-withdraw-quick-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-withdraw-summary-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-withdraw-summary-row strong {
        text-align: left;
    }
}

/* =================== 19 · Team Section Refinement =================== */
.team-card {
    height: 100%;
    max-width: 230px;
    margin: 0 auto;
    border: 1px solid var(--sp-cloud) !important;
    border-radius: 14px !important;
    padding: 16px 14px 14px !important;
    background: var(--sp-white) !important;
    box-shadow: var(--sp-shadow-sm) !important;
    text-align: center;
}

.team-card:hover {
    border-color: rgba(240,180,41,.58) !important;
    background: var(--sp-white) !important;
    box-shadow: var(--sp-shadow) !important;
    transform: translateY(-3px);
}

.team-card__thumb {
    width: 140px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid rgba(240, 180, 41, .32);
    border-radius: 16px;
    background: var(--sp-paper);
    box-shadow: 0 12px 26px rgba(10, 15, 30, .10);
}

.team-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
    border-radius: 0 !important;
}

.team-card__content {
    padding: 14px 8px 4px !important;
}

.team-card__content .name {
    color: var(--sp-ink) !important;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 850;
}

.team-card__content .designation {
    display: inline-flex;
    margin-top: 4px;
    color: var(--sp-gold-deep);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 575px) {
    .team-card {
        max-width: 205px;
    }

    .team-card__thumb {
        width: 124px;
    }
}