/* ==========================================================================
   TRADME — "TRADING TERMINAL" SKIN  (fresh dark direction)
   --------------------------------------------------------------------------
   This is a SKIN layer loaded AFTER tradme-modern.css. It only re-skins the
   VISUAL layer toward a deep-black, neon cyan + profit-green "trading desk"
   aesthetic (glow, glass, grid texture, monospace figures).

   It changes NOTHING about geometry, markup, PHP, forms, AJAX or MLM logic.
   Strategy: tradme-modern.css is token-driven (var(--tm-*)), so re-defining
   the tokens here cascades the new identity to every component for free; we
   then retint the few hard-coded blue spots and add the neon/glow signature.

   Scope: the authenticated DASHBOARD (.l-main / login) becomes the full dark
   terminal. Public marketing pages stay light but inherit the new accent.
   ========================================================================== */

/* ---- 0. Token overrides — flips the whole identity in one place --------- */
:root {
    /* neon accents */
    --tm-primary:    #22D3EE;   /* neon cyan (was blue)        */
    --tm-primary-600:#06B6D4;
    --tm-cyan:       #22D3EE;
    --tm-mint:       #00E5A0;   /* profit green — the signature */
    --tm-mint-600:   #00C389;
    --tm-danger:     #FF5C7A;   /* spec danger (overrides legacy #EF4444) */

    /* near-black terminal surfaces */
    --tm-d-bg-1:     #060B14;
    --tm-d-bg-2:     #02040A;
    --tm-d-surface:  rgba(255,255,255,.035);
    --tm-d-surface-2:rgba(255,255,255,.055);
    --tm-d-border:   rgba(110,231,240,.14);   /* faint cyan hairline */
    --tm-d-text:     #E5EEF6;
    --tm-d-text-2:   #94A3B8;   /* spec secondary text; better contrast than #7E91A8 */

    /* the brand gradient: cyan -> teal -> profit green */
    --tm-grad:       linear-gradient(120deg, #22D3EE 0%, #06B6D4 48%, #00E5A0 100%);
    --tm-grad-soft:  linear-gradient(120deg, rgba(34,211,238,.16), rgba(0,229,160,.16));

    /* glow shadows (the terminal signature) */
    --tm-glow-cyan:  0 0 0 1px rgba(34,211,238,.22), 0 10px 34px rgba(8,145,178,.18);
    --tm-glow-mint:  0 8px 26px rgba(0,229,160,.30);
    --tm-shadow-d:   0 14px 40px rgba(0,0,0,.6);
}

/* ---- 1. Terminal background: deep black + faint trading grid ------------ */
.l-main,
.l-main.bg-purple,
.bg-purple,
.last_transaction_wrapper.bg-purple {
    background:
        radial-gradient(900px 520px at 112% -12%, rgba(34,211,238,.12), transparent 55%),
        radial-gradient(820px 540px at -12% 4%, rgba(0,229,160,.10), transparent 55%),
        linear-gradient(180deg, var(--tm-d-bg-1) 0%, var(--tm-d-bg-2) 100%) !important;
    position: relative;
}
/* hair-thin grid overlay reads like a chart canvas; sits under content */
.l-main::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(110,231,240,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,231,240,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent);
    pointer-events: none;
    z-index: 0;
}
.l-main > * { position: relative; z-index: 1; }

/* ---- 2. Top navbar — blacker glass, cyan hairline ---------------------- */
.cp_navi_main_wrapper.inner_header_wrapper.dashboard_header_middle.float_left,
.cp_navi_main_wrapper.inner_header_wrapper {
    background: rgba(3,6,14,.78) !important;
    border-bottom: 1px solid var(--tm-d-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.5) !important;
}
.cp_navi_main_wrapper.tm-scrolled {
    background: rgba(2,4,10,.92) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.65), 0 1px 0 rgba(34,211,238,.18) !important;
}

/* ---- 3. Sidebar — black rail, neon active glow ------------------------- */
.l-sidebar {
    background: linear-gradient(180deg, #060B14 0%, #02040A 100%) !important;
    border-right: 1px solid var(--tm-d-border) !important;
    box-shadow: 6px 0 34px rgba(0,0,0,.55) !important;
}
.l-sidebar .c-menu__item__inner i.fas,
.l-sidebar .crm_navi_icon i.fas {
    color: var(--tm-cyan) !important;
    background: rgba(34,211,238,.08) !important;
    border: 1px solid rgba(34,211,238,.20) !important;
}
.c-menu > ul:hover .crm_navi_icon i.fas {
    background: var(--tm-grad) !important;
    color: #04121A !important;
    box-shadow: var(--tm-glow-mint) !important;
}
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
    color: #04121A !important;
    box-shadow: 0 0 0 1px rgba(0,229,160,.4), 0 8px 22px rgba(0,229,160,.3) !important;
}

/* ---- 4. Stat / investment cards — glass + neon edge + lift glow --------- */
.l-main .investment_box_wrapper,
.l-main .investment_box_wrapper.box-style-1,
.l-main .box-style-1 {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--tm-d-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.l-main .investment_box_wrapper::after {
    content: "";
    position: absolute; top: -40%; right: -30%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(34,211,238,.18), transparent 65%);
    pointer-events: none;
}
.l-main .investment_box_wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.55) !important;
    box-shadow: var(--tm-glow-cyan), 0 22px 50px rgba(0,0,0,.6) !important;
}
.l-main .investment_icon_wrapper i {
    color: var(--tm-cyan) !important;
    background: rgba(34,211,238,.10) !important;
    border: 1px solid rgba(34,211,238,.28) !important;
}

/* ---- 5. Money figures — neon monospace glow (the trading signature) ----- */
.userdescc dd,
.stat-item span,
.invest_table td:last-child,
.ft_abt_text_wrapper .timer,
.account_top_information .timer {
    font-family: var(--tm-mono) !important;
    letter-spacing: -.01em;
    text-shadow: 0 0 18px rgba(34,211,238,.28);
}
.stat-item span { color: #EAFBFF !important; }

/* directional P&L helpers (cyan up / red down) — used where markup allows */
.tm-up, .text-success, .l-main .text-success,
.invest_table td.up, td.profit {
    color: var(--tm-mint) !important;
    text-shadow: 0 0 14px rgba(0,229,160,.35);
}
.tm-down, .text-danger, .l-main .text-danger,
.invest_table td.down, td.loss {
    color: #FF5C77 !important;
    text-shadow: 0 0 14px rgba(255,92,119,.35);
}

/* ---- 6. User info / balance panel — cyan->green aurora ------------------ */
.account_top_information {
    background:
        linear-gradient(120deg, rgba(34,211,238,.18), rgba(0,229,160,.14)) !important;
    border: 1px solid rgba(34,211,238,.28) !important;
    box-shadow: var(--tm-glow-cyan) !important;
}
.account_top_information::before {
    background: radial-gradient(600px 240px at 90% -30%, rgba(0,229,160,.30), transparent 60%) !important;
}
.userdescc dd { color: #EAFBFF !important; }

/* ---- 7. Tables — neon hover + cyan sticky header ----------------------- */
.crm_customer_table_main_wrapper {
    background: rgba(255,255,255,.025) !important;
    border: 1px solid var(--tm-d-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.myTable.table thead th,
table.datatables thead th,
.crm_customer_table_inner_Wrapper thead th {
    background: rgba(2,6,14,.97) !important;
    color: #BFF6FF !important;
    border-bottom: 1px solid rgba(34,211,238,.22) !important;
}
.myTable.table tbody tr:hover,
table.datatables tbody tr:hover,
.crm_customer_table_inner_Wrapper tbody tr:hover { background: rgba(34,211,238,.08) !important; }

/* ---- 8. Buttons — neon gradient + glow, ghost cyan --------------------- */
.btn.btn-primary,
a.btn.btn-primary,
input[type="submit"],
button[type="submit"],
button[name="submit_deposit"],
.login_btn .btn-primary,
.mlm-copy-btn {
    background: var(--tm-grad) !important;
    /* color: #04121A !important; */
    font-weight: 700 !important;
    box-shadow: var(--tm-glow-mint) !important;
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
button[name="submit_deposit"]:hover,
.mlm-copy-btn:hover {
    box-shadow: 0 14px 34px rgba(0,229,160,.5) !important;
    filter: brightness(1.06) saturate(1.1);
}
.btn.btn-secondary,
a.btn.btn-secondary {
    background: rgba(34,211,238,.08) !important;
    border: 1px solid rgba(34,211,238,.34) !important;
    color: #BFF6FF !important;
}
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover { background: rgba(34,211,238,.16) !important; }

/* ---- 9. Forms — neon focus ring ---------------------------------------- */
.form-control:focus,
.form-control.require:focus,
.nice-select.open {
    border-color: var(--tm-cyan) !important;
    box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 0 22px rgba(34,211,238,.16) !important;
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(34,211,238,.5) !important;
}

/* ---- 10. Badges / status — retint default to cyan, keep semantic green/red */
.no_badge {
    background: rgba(34,211,238,.14) !important;
    color: #8DEBFF !important;
    border: 1px solid rgba(34,211,238,.30) !important;
}
.no_badge.purple { background: rgba(0,229,160,.14) !important; color: #6BF3C6 !important; border-color: rgba(0,229,160,.32) !important; }
.tm-badge-approved, .badge-approved { background: rgba(0,229,160,.16) !important; color: #6BF3C6 !important; border-color: rgba(0,229,160,.36) !important; }
.alert-info { background: rgba(34,211,238,.13) !important; color: #8DEBFF !important; border-color: rgba(34,211,238,.32) !important; }

/* ---- 11. Section accents + headings rail (auto via --tm-grad) ----------- */
.page_title_section,
.page_title_section.dashboard_title {
    background: linear-gradient(120deg, #02040A 0%, #06121E 55%, #021A1A 100%) !important;
    border-bottom: 1px solid var(--tm-d-border) !important;
}
.page_title_section::after {
    background:
        radial-gradient(620px 200px at 12% -40%, rgba(34,211,238,.32), transparent 60%),
        radial-gradient(520px 200px at 90% 140%, rgba(0,229,160,.26), transparent 60%) !important;
}

/* ---- 12. MLM widgets / referral cards — neon edge ---------------------- */
.mlm-stats .stat-item:hover,
.referral-slots .slot:hover,
.referral-slots > div:hover { border-color: rgba(34,211,238,.5) !important; box-shadow: var(--tm-glow-cyan) !important; }

/* ---- 13. Login / register — black aurora + cyan-green banner ----------- */
.login_wrapper {
    background:
        radial-gradient(800px 420px at 110% -10%, rgba(34,211,238,.16), transparent 55%),
        radial-gradient(720px 460px at -10% 110%, rgba(0,229,160,.12), transparent 55%),
        linear-gradient(180deg, var(--tm-d-bg-1), var(--tm-d-bg-2)) !important;
}
.login_top_box { box-shadow: var(--tm-glow-cyan), var(--tm-shadow-d) !important; }
.login_banner_wrapper {
    background: linear-gradient(150deg, #06B6D4 0%, #0E7490 45%, #00E5A0 100%) !important;
}
.login_banner_wrapper * { color: #04121A !important; }

/* ---- 14. Neon scrollbar + selection ------------------------------------ */
::selection { background: rgba(34,211,238,.26); color: #EAFBFF; }
.l-main::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #22D3EE, #00E5A0) !important;
    border-radius: 8px;
}
#return-to-top {
    background: var(--tm-grad) !important;
    color: #04121A !important;
    box-shadow: var(--tm-glow-mint) !important;
}

/* ---- 15. Subtle live "pulse" on the primary balance figure ------------- */
@keyframes tmPulse {
    0%,100% { text-shadow: 0 0 16px rgba(34,211,238,.22); }
    50%     { text-shadow: 0 0 26px rgba(0,229,160,.45); }
}
.account_top_information .userdescc dd:first-of-type { animation: tmPulse 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .account_top_information .userdescc dd:first-of-type { animation: none !important; }
}

/* ==========================================================================
   16. PUBLIC MARKETING PAGES — UNIFIED DARK FINTECH IDENTITY
   --------------------------------------------------------------------------
   Goal: home / about / services / packages / investment-plan / contact must
   feel like the SAME product as the dashboard (Binance / Bybit / TradingView).
   We flip the public canvas dark and OVERRIDE the light "royal white" rules
   that tradme-modern.css Section 15 applied (selectors mirrored 1:1 so these
   later, equally-specific rules win). Visual layer only — no markup/logic.
   ========================================================================== */

/* ---- 16.0 Global dark canvas (kills the light flash on public pages) ---- */
body { background: var(--tm-d-bg-2) !important; color: var(--tm-d-text); }

/* every section that was painted light -> transparent over the dark canvas */
.bg-light,
.transaction_wrapper.bg-light,
.our_services_wrapper.bg-light,
.investors_wrapper.bg-light,
.our_services_wrapper,
.contact_section,
.about_main_wrapper,
.sv_about_wrapper,
.calculator_wrapper,
.testimonial_wrapper,
.global_community_wrapper,
.works_wrapper { background-color: transparent !important; }

/* default body copy on public sections -> light slate (was navy = invisible) */
.bg-light,
.our_services_wrapper,
.contact_section,
.about_main_wrapper,
.sv_about_wrapper { color: var(--tm-d-text) !important; }
.our_services_wrapper p,
.contact_section p,
.about_main_wrapper p,
.sv_about_wrapper p,
.investors_wrapper p { color: var(--tm-d-text-2) !important; }

/* ---- 16.1 Section headings -> white title, cyan eyebrow, gradient rule -- */
.bg-light .heading_wrapper_dark h3,
.our_services_wrapper .heading_wrapper_dark h3,
.our_services_wrapper .sv_heading_wraper h3,
.contact_section .sv_heading_wraper h3,
.contact_section .heading_wrapper_dark h3,
.about_main_wrapper h3,
.about_story_wrapper h3,
.sv_about_wrapper h3,
.sv_heading_wraper h3,
.sv_heading_wraper h3.h-dark,
.heading_wrapper_dark h3.h-dark { color: #fff !important; }
.our_services_wrapper .heading_wrapper_dark h4,
.contact_section .heading_wrapper_dark h4,
.sv_heading_wraper h4,
.bg-light .heading_wrapper_dark h4 { color: var(--tm-cyan) !important; letter-spacing: .16em; text-transform: uppercase; }
.heading_wrapper_dark h3:after,
.sv_heading_wraper h3:after { background: var(--tm-grad) !important; box-shadow: 0 0 14px rgba(34,211,238,.5); }

/* ---- 16.2 HERO / slider — terminal glow over the banner ----------------- */
.slider-area { background: var(--tm-d-bg-2) !important; }
.slider-area .banner_img_top img { opacity: .42; filter: saturate(1.1) contrast(1.05); }
.slider-area::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(820px 480px at 78% 30%, rgba(34,211,238,.22), transparent 58%),
        radial-gradient(680px 460px at 12% 88%, rgba(0,229,160,.16), transparent 58%),
        linear-gradient(180deg, rgba(2,4,10,.72) 0%, rgba(2,4,10,.40) 45%, var(--tm-d-bg-2) 100%);
    pointer-events: none; z-index: 1;
}
.slider-area .carousel-captions .content { z-index: 2; }
.slider-area .content h2 { color: var(--tm-cyan) !important; text-shadow: 0 0 18px rgba(34,211,238,.4); }
.slider-area .content h3 {
    color: #fff !important;
    text-shadow: 0 8px 40px rgba(0,0,0,.6);
}
/* hero "start now" CTA -> neon gradient pill */
.slider_btn ul li a,
.slider_btn a {
    background: var(--tm-grad) !important;
    color: #04121A !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    box-shadow: var(--tm-glow-mint) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.slider_btn ul li a:hover,
.slider_btn a:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,229,160,.5) !important; filter: brightness(1.06); }
.carousel-indicators li { background: rgba(34,211,238,.35) !important; }
.carousel-indicators li.active { background: var(--tm-cyan) !important; box-shadow: 0 0 12px rgba(34,211,238,.7); }

/* ---- 16.3 Service / feature / package / about cards -> glass + neon ----- */
.service_box,
.feature_box,
.our_services_wrapper .investment_box_wrapper,
.investors_wrapper .investment_border_wrapper,
.inves_slider_cntn .investment_border_wrapper,
.packages_wrapper .investment_box_wrapper,
.investment_plan_wrapper .investment_box_wrapper {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.service_box:hover,
.feature_box:hover,
.our_services_wrapper .investment_box_wrapper:hover,
.inves_slider_cntn .investment_border_wrapper:hover,
.packages_wrapper .investment_box_wrapper:hover,
.investment_plan_wrapper .investment_box_wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,.5) !important;
    box-shadow: var(--tm-glow-cyan), 0 22px 50px rgba(0,0,0,.6) !important;
}
/* card titles & text on dark */
.our_services_wrapper .investment_content_wrapper h1,
.our_services_wrapper .investment_content_wrapper h1 a,
.service_box .investment_content_wrapper h1 a,
.feature_box .investment_content_wrapper h1 a,
.investment_content_wrapper h1,
.investment_content_wrapper h1 a { color: #fff !important; }
.our_services_wrapper .investment_content_wrapper p,
.service_box p, .feature_box p,
.investment_content_wrapper p { color: var(--tm-d-text-2) !important; }
/* keep the colour-coded icon circles but make them glow on dark */
.investment_icon_circle {
    background: rgba(34,211,238,.10) !important;
    border: 1px solid rgba(34,211,238,.26) !important;
    box-shadow: 0 0 22px rgba(34,211,238,.16);
}
.investment_icon_circle.red_info_circle  { background: rgba(255,92,119,.12) !important; border-color: rgba(255,92,119,.30) !important; box-shadow: 0 0 22px rgba(255,92,119,.16); }
.investment_icon_circle.green_info_circle { background: rgba(0,229,160,.12) !important; border-color: rgba(0,229,160,.30) !important; box-shadow: 0 0 22px rgba(0,229,160,.16); }
.investment_icon_circle.pink_info_circle  { background: rgba(244,114,182,.12) !important; border-color: rgba(244,114,182,.30) !important; }
.investment_icon_circle i,
.service_box i, .feature_box i,
.our_services_wrapper .investment_box_wrapper i { color: var(--tm-cyan) !important; }
.investment_icon_circle.red_info_circle i  { color: #FF7A93 !important; }
.investment_icon_circle.green_info_circle i { color: var(--tm-mint) !important; }

/* ---- 16.4 Testimonials -> glass cards ----------------------------------- */
.testimonial_slide_main_wrapper,
.testimonial_slide_main_wrapper.dark_top_testimonial,
.dark_testimonial_wrapper,
.ts_client_cont_wrapper {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.testimonial_slide_main_wrapper p,
.ts_client_cont_wrapper p { color: var(--tm-d-text) !important; }
.ts_client_social_wrapper h4,
.testimonial_slide_main_wrapper h4,
.ts_client_cont_wrapper h4 { color: #fff !important; }
.testimonial_wrapper .investment_overlay { background: transparent !important; }

/* ---- 16.5 Live transaction widget — retint accents to brand cyan -------- */
.tx-wrap { border: 1px solid var(--tm-d-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.tx-eyebrow { color: var(--tm-cyan) !important; }
.tx-live .tx-dot { background: var(--tm-mint) !important; box-shadow: 0 0 10px rgba(0,229,160,.8) !important; }
.tx-tab.on { background: var(--tm-grad) !important; color: #04121A !important; }

/* ---- 16.6 Contact form on dark -> glass inputs -------------------------- */
.contact_section .form-control,
.contact_section input[type="text"],
.contact_section input[type="email"],
.contact_section input[type="tel"],
.contact_section textarea,
.wpcf7 .form-control,
.wpcf7-form input.wpcf7-form-control:not([type="submit"]),
.wpcf7-form textarea {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--tm-d-border) !important;
    color: var(--tm-d-text) !important;
}
.contact_section .form-control::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--tm-d-text-2) !important; }
.contact_section .form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--tm-cyan) !important;
    box-shadow: 0 0 0 4px rgba(34,211,238,.16), 0 0 22px rgba(34,211,238,.14) !important;
}

/* ---- 16.7 "How it works" checklist + misc public chips ------------------ */
.work_checklist_wrapper li a { color: var(--tm-d-text) !important; }
.work_checklist_wrapper li a i { color: var(--tm-cyan) !important; }
.work_content_wrap h1,
.works_wrapper h1,
.global_community_wrapper h1,
.global_community_wrapper h3 { color: #fff !important; }

/* ---- 16.8 Counter circles (About) numbers stay readable on dark -------- */
.counter_cntnt_box h1, .counter_cntnt_box h2, .counter_cntnt_box .timer { color: #fff !important; }
.counter_cntnt_box p { color: var(--tm-d-text-2) !important; }

/* ---- 16.9 Calculator widget already dark (#1f2937) -> add neon edge ----- */
.calculator_portion { border: 1px solid var(--tm-d-border) !important; box-shadow: var(--tm-glow-cyan) !important; }
.calculator_portion *,
.caluclator_text_wrapper { color: var(--tm-d-text) !important; }

/* ---- 16.10 HERO image -> floating "investment growth" glass visual ------ */
/* CSS-only (no markup): the hero product image gets a neon drop shadow, a
   floating glass card with an upward sparkline, and a soft glow orb — the
   "market data inspired" hero without touching any PHP/logic. */
@keyframes tmFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes tmFloat2  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

.slider_main_img_wrapper { position: relative; }
.slider_main_img_wrapper img {
    position: relative; z-index: 2;
    filter: drop-shadow(0 30px 60px rgba(0,229,160,.20)) drop-shadow(0 10px 24px rgba(34,211,238,.16));
}
/* floating glass card with an upward growth sparkline (inline SVG data-uri) */
.slider_main_img_wrapper::before {
    content: "";
    position: absolute; z-index: 3;
    right: -4%; bottom: 10%;
    width: 188px; height: 96px;
    border-radius: 16px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='188' height='96'><polyline points='14,74 44,60 74,66 104,40 134,46 174,16' fill='none' stroke='%2300E5A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><circle cx='174' cy='16' r='4' fill='%2322D3EE'/></svg>") no-repeat 10px 8px,
        linear-gradient(180deg, rgba(18,24,38,.92), rgba(11,18,32,.92));
    border: 1px solid rgba(34,211,238,.30);
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 26px rgba(0,229,160,.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: tmFloat 6s ease-in-out infinite;
}
/* soft neon glow orb floating opposite the card */
.slider_main_img_wrapper::after {
    content: "";
    position: absolute; z-index: 1;
    left: -6%; top: 6%;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.30), transparent 65%);
    filter: blur(6px);
    animation: tmFloat2 7s ease-in-out infinite;
}
@media (max-width: 991px) {
    .slider_main_img_wrapper::before { right: 0; bottom: 4%; width: 150px; height: 80px; }
    .slider_main_img_wrapper::after  { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .slider_main_img_wrapper::before,
    .slider_main_img_wrapper::after { animation: none !important; }
}

/* ==========================================================================
   17. PREMIUM FINTECH HERO (.tmh-*)  — the new two-column homepage hero
   Replaces the legacy carousel (which is hidden below). Pure presentation.
   ========================================================================== */
/* hide ONLY the homepage carousel (it has .float_left); 404 also uses
   .slider-area (.over-hidden) and must stay visible */
.slider-area.float_left { display: none !important; }

.tmh-hero {
    position: relative;
    /* overflow: hidden; */
    padding: 150px 0 90px;
    background:
        radial-gradient(900px 520px at 88% 8%, rgba(34,211,238,.14), transparent 55%),
        radial-gradient(820px 540px at -6% 30%, rgba(0,229,160,.10), transparent 55%),
        linear-gradient(180deg, var(--tm-d-bg-1) 0%, var(--tm-d-bg-2) 100%);
}
.tmh-hero__glow {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(110,231,240,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,231,240,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(80% 70% at 60% 20%, #000, transparent 75%);
    mask-image: radial-gradient(80% 70% at 60% 20%, #000, transparent 75%);
}
.tmh-hero .container { position: relative; z-index: 2; }
.tmh-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px; align-items: center;
}

/* ---- Left column ------------------------------------------------------- */
.tmh-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(34,211,238,.10);
    border: 1px solid rgba(34,211,238,.30);
    color: #BFF6FF; font-size: 13px; font-weight: 600; letter-spacing: .02em;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tmh-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-mint); box-shadow: 0 0 10px rgba(0,229,160,.9); animation: tmhBlink 1.8s ease-in-out infinite; }
@keyframes tmhBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.tmh-hero__title {
    margin: 22px 0 14px;
    font-family: var(--tm-font);
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.04; font-weight: 800; letter-spacing: -.025em;
    color: #fff;
}
.tmh-grad {
    background: var(--tm-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tmh-hero__sub { color: var(--tm-cyan); font-size: clamp(17px,1.5vw,21px); font-weight: 600; margin: 0 0 14px; }
.tmh-hero__desc { color: var(--tm-d-text-2); font-size: 16.5px; line-height: 1.7; max-width: 560px; margin: 0 0 28px; }

.tmh-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.tmh-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 14px;
    font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
    cursor: pointer; text-decoration: none;
}
.tmh-btn--primary { background: var(--tm-grad); color: #04121A !important; box-shadow: var(--tm-glow-mint); }
.tmh-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,229,160,.5); filter: brightness(1.06); }
.tmh-btn--ghost { background: rgba(34,211,238,.07); color: #BFF6FF !important; border: 1px solid rgba(34,211,238,.34); }
.tmh-btn--ghost:hover { background: rgba(34,211,238,.16); transform: translateY(-3px); }

.tmh-trust { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 22px; }
.tmh-trust li { color: var(--tm-d-text-2); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.tmh-trust li i { color: var(--tm-cyan); }

.tmh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 640px; }
.tmh-stat { padding-left: 14px; border-left: 2px solid; border-image: var(--tm-grad) 1; }
.tmh-stat__num { font-family: var(--tm-mono); font-size: clamp(20px,2vw,27px); font-weight: 700; color: #fff; text-shadow: 0 0 18px rgba(34,211,238,.25); }
.tmh-stat__label { color: var(--tm-d-text-2); font-size: 12.5px; font-weight: 500; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Right column: trading-terminal preview ---------------------------- */
.tmh-hero__right { position: relative; min-height: 420px; }
.tmh-terminal {
    position: relative; z-index: 2;
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    border-radius: 22px; padding: 24px;
    box-shadow: var(--tm-glow-cyan), 0 30px 70px rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation: tmFloat 8s ease-in-out infinite;
}
.tmh-terminal__head { display: flex; align-items: flex-start; justify-content: space-between; }
.tmh-terminal__eyebrow { color: var(--tm-d-text-2); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.tmh-terminal__value { font-family: var(--tm-mono); font-size: 30px; font-weight: 700; color: #fff; margin-top: 4px; text-shadow: 0 0 22px rgba(34,211,238,.3); }
.tmh-terminal__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--tm-mint); }
.tmh-terminal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-mint); box-shadow: 0 0 10px rgba(0,229,160,.9); animation: tmhBlink 1.6s ease-in-out infinite; }
.tmh-terminal__chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(0,229,160,.14); border: 1px solid rgba(0,229,160,.32); }

.tmh-chart { margin: 14px 0 6px; }
.tmh-chart__line { stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: tmhDraw 2.4s cubic-bezier(.22,.61,.36,1) forwards .3s; filter: drop-shadow(0 0 6px rgba(34,211,238,.5)); }
.tmh-chart__area { opacity: 0; animation: tmhFade 1.2s ease forwards 1.6s; }
@keyframes tmhDraw { to { stroke-dashoffset: 0; } }
@keyframes tmhFade { to { opacity: 1; } }

.tmh-terminal__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tmh-tile { background: rgba(255,255,255,.04); border: 1px solid var(--tm-d-border); border-radius: 12px; padding: 12px 14px; }
.tmh-tile__label { display: block; color: var(--tm-d-text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.tmh-tile__val { display: block; font-family: var(--tm-mono); font-weight: 700; font-size: 17px; color: #fff; margin-top: 3px; }

/* up / down semantic colour */
.tmh-up { color: var(--tm-mint) !important; }
.tmh-down { color: var(--tm-danger, #FF5C7A) !important; }

/* ---- Floating mini cards ----------------------------------------------- */
.tmh-card {
    position: absolute; z-index: 3;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: 15px;
    background: rgba(18,24,38,.92);
    border: 1px solid var(--tm-d-border);
    box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 24px rgba(34,211,238,.12);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tmh-card__ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.28); color: var(--tm-cyan); font-size: 16px; }
.tmh-card__t { color: var(--tm-d-text-2); font-size: 11.5px; font-weight: 500; }
.tmh-card__v { font-family: var(--tm-mono); font-weight: 700; font-size: 15.5px; color: #fff; margin-top: 2px; }
.tmh-card--profit { top: 6%;  right: -3%;  animation: tmFloat 6.5s ease-in-out infinite; }
.tmh-card--wallet { top: 44%; left: -7%;   animation: tmFloat2 7.5s ease-in-out infinite; }
.tmh-card--profit .tmh-card__ico { background: rgba(0,229,160,.14); border-color: rgba(0,229,160,.30); color: var(--tm-mint); }
.tmh-card--ref    { bottom: 2%;  right: 6%;  animation: tmFloat2 6.8s ease-in-out infinite; }
.tmh-card--ref .tmh-card__ico { background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.32); color: #C4B5FD; }

/* ---- Hero responsive --------------------------------------------------- */
@media (max-width: 991px) {
    .tmh-hero { padding: 120px 0 70px; }
    .tmh-hero__grid { grid-template-columns: 1fr; gap: 60px; }
    .tmh-hero__right { min-height: 360px; margin-top: 10px; }
    .tmh-card--wallet { left: 0; }
    .tmh-card--profit { right: 0; }
}
@media (max-width: 575px) {
    .tmh-hero { padding: 104px 0 56px; }
    .tmh-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
    .tmh-card--ref { display: none; }
    .tmh-terminal__value { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmh-terminal, .tmh-card, .tmh-badge__dot, .tmh-terminal__dot { animation: none !important; }
    .tmh-chart__line { stroke-dashoffset: 0; animation: none !important; }
    .tmh-chart__area { opacity: 1; animation: none !important; }
}

/* ==========================================================================
   18. PUBLIC CONTRAST PASS — legacy colour classes & bg-image sections
   Ensures no low-contrast text survives on the unified dark theme.
   ========================================================================== */

/* "Trade Smarter" coins section + generic Bootstrap helpers */
.coins-wrapper .title, .coins-wrapper .title span,
.section-head .title, .section-head .title span,
.section-title, .section-title *,
.default-section-title, .default-section-title *,
.uni-banner-text, .uni-banner-text *,
.sub_title_section { color: #fff !important; }
.text-primary { color: var(--tm-cyan) !important; }
.coins-wrapper .sub-title, .sub-title.text-primary { color: var(--tm-cyan) !important; }
.list-style-1 li { color: var(--tm-d-text-2) !important; }

/* About-page wrappers */
.sv_money_wrapper h1, .sv_money_wrapper h2, .sv_money_wrapper h3,
.sv_abt_content_wrapper h1, .sv_abt_content_wrapper h2, .sv_abt_content_wrapper h3,
.border_about_wrapper h1, .border_about_wrapper h2, .border_about_wrapper h3,
.counter_section h1, .counter_section h2, .counter-section2 h1,
.global_comm_wraper h1, .zero_commisition h1, .start_invest_wrap h1,
.work_content_wrap h1 { color: #fff !important; }
.sv_money_text_wrapper p, .sv_abt_content_wrapper p, .border_about_wrapper p,
.global_comm_wraper p, .zero_commisition h4, .counter_section p { color: var(--tm-d-text-2) !important; }

/* legacy "about_btn" CTAs (calculate returns / join now) -> neon button */
.about_btn a, .calc_btn a, .start_invest_wrap .about_btn a {
    background: var(--tm-grad) !important;
    color: #04121A !important; font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: var(--tm-glow-mint) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.about_btn a:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,229,160,.5) !important; }

/* calculator chart labels / amounts readable on dark */
.chart-label .amt, .chart-label .sub, .calc-price, .mf-yAxis,
.calc-amt p { color: #fff !important; }
.chart-label .sub { color: var(--tm-d-text-2) !important; }

/* Investor "top performers" slider card text */
.inves_heading_txt h1, .inves_heading_txt h1 a { color: #fff !important; }
.inves_heading_txt p { color: var(--tm-mint) !important; font-family: var(--tm-mono); }

/* Dark scrim over light background-image sections so content stays legible */
.calculator_wrapper, .live_rates_wrapper, .global_community_wrapper,
.work_banner_wrapper, .testimonial_wrapper { position: relative; }
.calculator_wrapper::before, .live_rates_wrapper::before,
.global_community_wrapper::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(2,4,10,.86), rgba(2,4,10,.78));
}
.calculator_wrapper > *, .live_rates_wrapper > *,
.global_community_wrapper > * { position: relative; z-index: 1; }
.work_banner_wrapper img { opacity: .5; filter: saturate(1.05); }

/* ---- 18.1 Packages / pricing page (legacy markup) -> dark glass --------- */
.pricing-area, .package-box { background: transparent !important; }
.pricing-item, .pricing-body {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
    color: var(--tm-d-text) !important;
}
.package-hading, .pricing-body h4, .pricing-item h4 { color: #fff !important; }
.package-box p, .pricing-body p, .list li, .list .check { color: var(--tm-d-text-2) !important; }
.list .check::before, .list li::marker { color: var(--tm-mint) !important; }
.price, .price.price2 {
    display: inline-block;
    font-family: var(--tm-mono) !important; color: #04121A !important;
    background: var(--tm-grad) !important;
    padding: 6px 14px !important; border-radius: 10px !important;
    box-shadow: var(--tm-glow-mint) !important;
}
.filter-btn {
    background: rgba(34,211,238,.07) !important;
    color: #BFF6FF !important;
    border: 1px solid rgba(34,211,238,.30) !important;
    border-radius: 10px !important; padding: 9px 16px !important;
    transition: all .2s ease !important;
}
.filter-btn.active, .filter-btn:hover { background: var(--tm-grad) !important; color: #04121A !important; border-color: transparent !important; }
.main-btn {
    background: var(--tm-grad) !important; color: #04121A !important;
    border-radius: 12px !important; font-weight: 700 !important;
    box-shadow: var(--tm-glow-mint) !important;
}

/* ==========================================================================
   19. INTERNAL PAGE HERO (.tmh-phero) — reusable banner for About/Contact/
   Services/Packages/Investment Plans (template-parts/page-hero.php)
   ========================================================================== */
.tmh-phero {
    position: relative; overflow: hidden;
    padding: 140px 0 56px;
    background:
        radial-gradient(720px 360px at 85% 10%, rgba(34,211,238,.16), transparent 58%),
        radial-gradient(620px 360px at 0% 90%, rgba(0,229,160,.12), transparent 58%),
        linear-gradient(180deg, var(--tm-d-bg-1) 0%, var(--tm-d-bg-2) 100%);
    border-bottom: 1px solid var(--tm-d-border);
}
.tmh-phero__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(110,231,240,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,231,240,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(75% 80% at 70% 10%, #000, transparent 78%);
    mask-image: radial-gradient(75% 80% at 70% 10%, #000, transparent 78%);
}
.tmh-phero__orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); }
.tmh-phero__orb--1 { width: 180px; height: 180px; top: 8%; right: 6%;  background: radial-gradient(circle, rgba(34,211,238,.30), transparent 65%); animation: tmFloat 7s ease-in-out infinite; }
.tmh-phero__orb--2 { width: 130px; height: 130px; bottom: -6%; left: 10%; background: radial-gradient(circle, rgba(0,229,160,.26), transparent 65%); animation: tmFloat2 8s ease-in-out infinite; }
.tmh-phero .container { position: relative; z-index: 2; }
.tmh-phero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.tmh-phero__head { flex: 1 1 360px; }

.tmh-crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin-bottom: 16px; }
.tmh-crumb a { color: var(--tm-d-text-2); text-decoration: none; transition: color .2s ease; }
.tmh-crumb a:hover { color: var(--tm-cyan); }
.tmh-crumb i { color: var(--tm-d-text-2); font-size: 11px; }
.tmh-crumb__cur { color: var(--tm-cyan); font-weight: 600; }

.tmh-phero__title { margin: 0 0 12px; font-family: var(--tm-font); font-size: clamp(30px,4vw,48px); font-weight: 800; letter-spacing: -.025em; color: #fff; line-height: 1.06; }
.tmh-phero__sub { color: var(--tm-d-text-2); font-size: 16px; line-height: 1.65; max-width: 540px; margin: 0; }

.tmh-phero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 0 1 440px; }
.tmh-phero__stat {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px; border-radius: 15px;
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.42);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tmh-phero__stat:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.5); box-shadow: var(--tm-glow-cyan); }
.tmh-phero__ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.28); color: var(--tm-cyan); font-size: 16px; }
.tmh-phero__num { display: block; font-family: var(--tm-mono); font-weight: 700; font-size: 21px; color: #fff; line-height: 1.1; text-shadow: 0 0 16px rgba(34,211,238,.22); }
.tmh-phero__lbl { display: block; color: var(--tm-d-text-2); font-size: 12px; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 991px) {
    .tmh-phero { padding: 120px 0 44px; }
    .tmh-phero__inner { align-items: flex-start; }
    .tmh-phero__stats { flex: 1 1 100%; }
}
@media (max-width: 575px) {
    .tmh-phero { padding: 104px 0 36px; }
    .tmh-phero__stats { grid-template-columns: 1fr; }
    .tmh-phero__num { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmh-phero__orb--1, .tmh-phero__orb--2 { animation: none !important; }
}

/* ---- 19.1 Services page cards (.service-card-3) + section title --------- */
.service, .service-4, .gallery-section-area, .breadcrumbs-area { background: transparent !important; }
.default-section-title h6, .section-title .span, .section-title span.span { color: var(--tm-cyan) !important; letter-spacing: .14em; text-transform: uppercase; }
.default-section-title h3, .section-title h2, .section-title h3 { color: #fff !important; }
.service-card-3 {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.service-card-3:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.5) !important; box-shadow: var(--tm-glow-cyan), 0 22px 50px rgba(0,0,0,.6) !important; }
.service-card-text-3 i { color: var(--tm-cyan) !important; }
.service-card-text-3 h4, .service-card-text-3 h4 a { color: #fff !important; }
.service-card-text-3 p { color: var(--tm-d-text-2) !important; }
.read-more-btn {
    color: var(--tm-cyan) !important; font-weight: 600 !important;
    transition: color .2s ease, letter-spacing .2s ease !important;
}
.read-more-btn:hover { color: var(--tm-mint) !important; letter-spacing: .02em; }

/* ==========================================================================
   20. DASHBOARD ANALYTICS (.tm-analytics)  — TradingView / Binance style
   Stat cards + ApexCharts panels on my-account.php. Presentational only.
   ========================================================================== */
.tm-analytics { margin: 0 0 30px; }
.tm-an__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tm-an__eyebrow { color: var(--tm-cyan); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tm-an__title { color: #fff !important; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; }
.tm-an__live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--tm-mint); padding: 6px 13px; border-radius: 999px; background: rgba(0,229,160,.10); border: 1px solid rgba(0,229,160,.28); }
.tm-an__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-mint); box-shadow: 0 0 10px rgba(0,229,160,.9); animation: tmhBlink 1.6s ease-in-out infinite; }

/* stat cards */
.tm-cards { display: inline-flex; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.tm-card {
    position: relative; overflow: hidden;
    padding: 18px 18px 14px;
    border-radius: var(--tm-radius);
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.42);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tm-card:hover { transform: translateY(-5px); border-color: rgba(34,211,238,.5); box-shadow: var(--tm-glow-cyan); }
.tm-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tm-card__ico { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.tm-ico-cyan   { background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.28); color: var(--tm-cyan); }
.tm-ico-mint   { background: rgba(0,229,160,.12);  border: 1px solid rgba(0,229,160,.28);  color: var(--tm-mint); }
.tm-ico-violet { background: rgba(167,139,250,.14);border: 1px solid rgba(167,139,250,.30); color: #C4B5FD; }
.tm-ico-amber  { background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.30);  color: #FBBF24; }
.tm-card__trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tm-trend-up   { color: #6BF3C6; background: rgba(0,229,160,.12); }
.tm-trend-down { color: #FF7A93; background: rgba(255,92,122,.12); }
.tm-trend-flat { color: var(--tm-d-text-2); background: rgba(255,255,255,.05); }
.tm-card__val { font-family: var(--tm-mono); font-size: 25px; font-weight: 700; color: #fff; line-height: 1.1; text-shadow: 0 0 18px rgba(34,211,238,.22); }
.tm-card__label { color: var(--tm-d-text-2); font-size: 12.5px; font-weight: 500; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.tm-card__spark { display: block; width: 100%; height: 26px; margin-top: 10px; color: rgba(34,211,238,.45); }

/* chart panels */
.tm-panel {
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    border-radius: var(--tm-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.tm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tm-panel__title { color: #fff !important; font-size: 17px; font-weight: 700; margin: 3px 0 0; }
.tm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tm-chart-box { min-height: 300px; }
.tm-note { color: var(--tm-d-text-2); font-size: 12px; margin: 8px 0 0; display: flex; align-items: center; gap: 7px; }
.tm-note i { color: var(--tm-cyan); }

/* range toggle */
.tm-range { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-d-border); }
.tm-range__btn { background: transparent; border: 0; color: var(--tm-d-text-2); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: all .18s ease; }
.tm-range__btn:hover { color: #fff; }
.tm-range__btn.is-on { background: var(--tm-grad); color: #04121A; box-shadow: 0 4px 14px rgba(0,229,160,.3); }

/* ApexCharts dark-theme hardening */
.tm-panel .apexcharts-tooltip { background: #0B1220 !important; border: 1px solid var(--tm-d-border) !important; color: var(--tm-d-text) !important; box-shadow: var(--tm-shadow-d) !important; }
.tm-panel .apexcharts-tooltip-title { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid var(--tm-d-border) !important; }
.tm-panel .apexcharts-legend-text { color: var(--tm-d-text-2) !important; }
.tm-panel .apexcharts-xaxis-label, .tm-panel .apexcharts-yaxis-label { fill: var(--tm-d-text-2); }
.tm-panel .apexcharts-gridline { stroke: rgba(110,231,240,.10); }

/* analytics responsive */
@media (max-width: 1199px) { .tm-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px)  { .tm-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 575px)  { .tm-cards { grid-template-columns: 1fr; } .tm-card__val { font-size: 22px; } }

/* ==========================================================================
   21. BINARY MLM TREE (.gctree-*) — premium network visualization
   Restyles display_user_mlm_info() output. !important on legacy .slot /
   .empty-slot / .referral-slots / .mlm-tree-list beats the in-body <style>.
   ========================================================================== */
.gctree-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; }
.gctree-head h4 { color: #fff !important; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; margin: 0; }
.gctree-head h4 i { color: var(--tm-cyan); }

/* toolbar / zoom */
.gctree-toolbar { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-d-border); }
.gctree-zoom { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--tm-d-border); background: rgba(34,211,238,.06); color: var(--tm-cyan); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .18s ease; }
.gctree-zoom:hover { background: var(--tm-grad); color: #04121A; border-color: transparent; transform: translateY(-1px); }
.gctree-zoom__val { font-family: var(--tm-mono); font-size: 13px; color: var(--tm-d-text-2); min-width: 46px; text-align: center; }

/* viewport (scroll + pan) + zoom canvas */
.gctree-viewport {
    position: relative; overflow: auto;
    max-height: 580px; padding: 18px;
    border-radius: 16px;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(34,211,238,.06), transparent 60%),
        linear-gradient(180deg, rgba(2,4,10,.5), rgba(2,4,10,.7));
    border: 1px solid var(--tm-d-border);
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    background-image: linear-gradient(rgba(110,231,240,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(110,231,240,.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.gctree-viewport.is-panning { cursor: grabbing; }
.gctree-canvas { transform-origin: 0 0; transition: transform .14s ease, margin .14s ease; width: max-content; min-width: 100%; }
.gctree-canvas .referral-slots { display: grid !important; grid-template-columns: 1fr 1fr; gap: 26px !important; margin: 0 !important; min-width: 660px; }

/* root left/right slots */
.gctree-rootslot.slot, .referral-slots .slot.gctree-rootslot {
    background: rgba(18,24,38,.85) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    text-align: left !important;
}
.gctree-rootslot--left  { border-top: 3px solid var(--tm-cyan) !important; }
.gctree-rootslot--right { border-top: 3px solid var(--tm-mint) !important; }
.gctree-rootslot h5 { color: #fff !important; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.gctree-rootslot--left h5 i  { color: var(--tm-cyan); }
.gctree-rootslot--right h5 i { color: var(--tm-mint); }

/* lists & connectors */
.gctree-root, .gctree-branch, .mlm-tree-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.gctree-leg { position: relative; padding-left: 4px; margin-top: 12px; }
.gctree-leg--left  { --gc-rail: rgba(34,211,238,.45); }
.gctree-leg--right { --gc-rail: rgba(0,229,160,.45); }
.gctree-leg__tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tm-d-text-2); padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--tm-d-border); margin-bottom: 8px; }
.gctree-leg--left .gctree-leg__tag  { color: #8DEBFF; border-color: rgba(34,211,238,.3); }
.gctree-leg--right .gctree-leg__tag { color: #6BF3C6; border-color: rgba(0,229,160,.3); }
.gctree-leg > ul { position: relative; margin-left: 10px !important; padding-left: 22px !important; }
.gctree-leg > ul::before { content: ""; position: absolute; left: 8px; top: -4px; bottom: 16px; width: 2px; background: var(--gc-rail, rgba(148,163,184,.3)); border-radius: 2px; }
.gctree-li { position: relative; margin: 10px 0 !important; }
.gctree-leg > ul > .gctree-li::before { content: ""; position: absolute; left: -14px; top: 27px; width: 14px; height: 2px; background: var(--gc-rail, rgba(148,163,184,.3)); }

/* node card */
.gctree-card {
    display: inline-flex; align-items: center; gap: 12px;
    min-width: 240px; max-width: 320px;
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(18,24,38,.92);
    border: 1px solid var(--tm-d-border);
    border-left: 3px solid transparent;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    cursor: pointer; list-style: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
}
summary.gctree-card { display: flex; }
summary.gctree-card::-webkit-details-marker { display: none; }
.gctree-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.55); box-shadow: var(--tm-glow-cyan); z-index: 5; }
.gctree-card--active  { border-left-color: var(--tm-mint); }
.gctree-card--inactive { opacity: .9; }
.gctree-rk--diamond { border-left-color: var(--tm-cyan); }
.gctree-rk--gold    { border-left-color: #FBBF24; }
.gctree-rk--silver  { border-left-color: #CBD5E1; }
.gctree-rk--bronze  { border-left-color: #D9A066; }

.gctree-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #04121A; background: var(--tm-grad); box-shadow: 0 0 18px rgba(34,211,238,.3); }
.gctree-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gctree-name { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gctree-id { color: var(--tm-d-text-2); font-weight: 500; font-family: var(--tm-mono); font-size: 11.5px; }
.gctree-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gctree-rank { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gctree-rank i { font-size: 9px; }
.gctree-rank--diamond { color: #22D3EE; background: rgba(34,211,238,.14); }
.gctree-rank--gold    { color: #FBBF24; background: rgba(245,158,11,.14); }
.gctree-rank--silver  { color: #CBD5E1; background: rgba(148,163,184,.16); }
.gctree-rank--bronze  { color: #D9A066; background: rgba(217,160,102,.14); }
.gctree-rank--new     { color: var(--tm-d-text-2); background: rgba(255,255,255,.05); }
.gctree-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.04); }
.gctree-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-d-text-2); }
.gctree-status--active { color: #6BF3C6; background: rgba(0,229,160,.12); }
.gctree-status--active .gctree-status__dot { background: var(--tm-mint); box-shadow: 0 0 8px rgba(0,229,160,.9); }
.gctree-status--inactive { color: var(--tm-d-text-2); }
.gctree-vol { display: flex; align-items: center; gap: 8px; font-family: var(--tm-mono); font-size: 11.5px; color: var(--tm-d-text-2); }
.gctree-vol b { color: #fff; font-weight: 700; }
.gctree-vol__l i { color: var(--tm-cyan); }
.gctree-vol__r i { color: var(--tm-mint); }
.gctree-vol__sep { width: 1px; height: 12px; background: var(--tm-d-border); }
.gctree-caret { margin-left: auto; color: var(--tm-d-text-2); font-size: 12px; transition: transform .2s ease; }
.gctree-d[open] > summary .gctree-caret { transform: rotate(180deg); color: var(--tm-cyan); }

/* empty / available slot */
.gctree-empty, .empty-slot {
    color: var(--tm-d-text-2) !important; font-style: normal !important;
    padding: 12px 14px !important;
    border: 1.5px dashed var(--tm-d-border) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.02) !important;
    font-size: 12.5px; display: inline-flex; align-items: center;
}
.gctree-empty span i, .empty-slot span i { color: var(--tm-cyan); margin-right: 6px; }

/* minimap + hint */
.gctree-minimap { position: absolute; right: 14px; bottom: 14px; width: 124px; height: 84px; border: 1px solid var(--tm-d-border); border-radius: 10px; background: rgba(2,4,10,.78); overflow: hidden; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.gctree-minimap::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(110,231,240,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(110,231,240,.10) 1px, transparent 1px); background-size: 12px 12px; }
.gctree-minimap__view { position: absolute; left: 0; top: 0; width: 40px; height: 30px; border: 1.5px solid var(--tm-cyan); background: rgba(34,211,238,.14); border-radius: 4px; box-shadow: 0 0 10px rgba(34,211,238,.4); }
.gctree-hint { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tm-d-text-2); padding: 5px 11px; border-radius: 999px; background: rgba(2,4,10,.7); border: 1px solid var(--tm-d-border); transition: opacity .4s ease; pointer-events: none; }
.gctree-hint i { color: var(--tm-cyan); }

@media (max-width: 767px) {
    .gctree-canvas .referral-slots { grid-template-columns: 1fr !important; min-width: 520px; }
    .gctree-viewport { max-height: 460px; }
    .gctree-minimap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gctree-canvas { transition: none !important; }
}

/* ==========================================================================
   22. RESPONSIVE FOUNDATION — overflow guard, container, fluid type scale
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { min-width: 0; }
@media (max-width: 575px) { .container, .container-fluid { padding-left: 16px; padding-right: 16px; } }

/* Fluid typography system (Desktop→Mobile per spec). Reuses real heading
   classes so sizes are consistent site-wide without per-page overrides. */
.tmh-hero__title { font-size: clamp(28px, 4.6vw, 56px) !important; }            /* Hero 56→28 */
.tmh-phero__title { font-size: clamp(26px, 4vw, 44px) !important; }
.global_comm_wraper h1, .sv_money_text_wrapper h1, .sv_money_text_wrapper h2,
.zero_commisition h1, .work_content_wrap h1, .works_wrapper h1,
.sv_abt_content_wrapper h1, .coins-wrapper .title, .section-head .title {
    font-size: clamp(24px, 3.4vw, 40px) !important;                              /* H1 40→24 */
    line-height: 1.12;
}
.sv_heading_wraper h3, .heading_wrapper_dark h3, .default-section-title h3,
.section-title h2, .our_services_wrapper .sv_heading_wraper h3 {
    font-size: clamp(20px, 2.6vw, 32px) !important;                              /* H2 32→20 */
    line-height: 1.2;
}
.investment_content_wrapper h1, .service-card-text-3 h4, .tm-panel__title,
.gctree-rootslot h5 { font-size: clamp(16px, 1.6vw, 22px) !important; }         /* H3-ish */

/* ==========================================================================
   23. SECTION SPACING RHYTHM — consistent vertical rhythm, smaller on mobile
   ========================================================================== */
.our_services_wrapper, .testimonial_wrapper, .investors_wrapper,
.calculator_wrapper, .live_rates_wrapper, .global_community_wrapper,
.transaction_wrapper, .works_wrapper, .sv_about_wrapper, .sv_money_wrapper,
.contact_section, .coins-wrapper, .service.service-4, .gallery-section-area,
.counter_section, .tmh-phero {
    padding-top: clamp(50px, 8vw, 120px);
    padding-bottom: clamp(50px, 8vw, 120px);
}
@media (max-width: 991px) {
    .our_services_wrapper, .testimonial_wrapper, .investors_wrapper,
    .calculator_wrapper, .live_rates_wrapper, .global_community_wrapper,
    .transaction_wrapper, .works_wrapper, .sv_about_wrapper, .sv_money_wrapper,
    .contact_section, .coins-wrapper, .service.service-4, .gallery-section-area,
    .counter_section { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 575px) {
    .our_services_wrapper, .testimonial_wrapper, .investors_wrapper,
    .calculator_wrapper, .live_rates_wrapper, .global_community_wrapper,
    .transaction_wrapper, .works_wrapper, .sv_about_wrapper, .sv_money_wrapper,
    .contact_section, .coins-wrapper, .service.service-4, .gallery-section-area,
    .counter_section { padding-top: 50px; padding-bottom: 50px; }
}

/* ==========================================================================
   24. PREMIUM CALCULATOR — glass card, neon chart (logic untouched)
   ========================================================================== */
.calculator_wrapper .calculator_portion {
    background: rgba(18,24,38,.85) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--tm-glow-cyan), 0 18px 44px rgba(0,0,0,.5) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: 24px !important;
}
.caluclator_text_wrapper { margin-bottom: 16px; }
.caluclator_text_wrapper > p { color: var(--tm-d-text-2) !important; font-weight: 600; margin-bottom: 8px; }
.caluclator_text_wrapper .dollar_wrap { display: flex; flex-direction: column; gap: 8px; color: #fff !important; font-weight: 600; }
.caluclator_text_wrapper input,
#investmentAmount, input#investmentAmount {
    width: 100% !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--tm-d-border) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-family: var(--tm-mono) !important; font-size: 16px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.caluclator_text_wrapper input:focus, #investmentAmount:focus {
    border-color: var(--tm-cyan) !important;
    box-shadow: 0 0 0 4px rgba(34,211,238,.16), 0 0 22px rgba(34,211,238,.14) !important;
    outline: none;
}
.calculator_wrapper .mutualfunds-calculator {
    background: rgba(255,255,255,.025); border: 1px solid var(--tm-d-border);
    border-radius: 18px; padding: 18px;
}
/* neon-ify the existing inline SVG chart (logic/markup untouched) */
#graph #path2, .mf-chart #path2 { stroke: var(--tm-cyan) !important; filter: drop-shadow(0 0 6px rgba(34,211,238,.6)); }
#graph #path1, .mf-chart #path1 { stroke: rgba(0,229,160,.35) !important; }
#graph line, .mf-chart line { stroke: rgba(110,231,240,.12) !important; }
.chart-label .amt, #totalReturns { color: #fff !important; font-family: var(--tm-mono) !important; text-shadow: 0 0 16px rgba(34,211,238,.3); }
.chart-label .sub { color: var(--tm-d-text-2) !important; }
.calc-amt .calc-price, #dailyReturns {
    color: var(--tm-mint) !important; font-family: var(--tm-mono) !important;
    font-weight: 700 !important; text-shadow: 0 0 18px rgba(0,229,160,.3);
}
.mf-yAxis { color: var(--tm-d-text-2) !important; }

/* ==========================================================================
   25. COMPONENT RESPONSIVE FIXES
   ========================================================================== */
/* equal-height cards (features / services / top investors / counters) */
.our_services_wrapper .row, .investors_wrapper .row, .counter-section2 .row { display: flex; flex-wrap: wrap; }
.our_services_wrapper .row > [class*="col-"],
.investors_wrapper .row > [class*="col-"],
.counter-section2 .row > [class*="col-"] { display: flex; }
.our_services_wrapper .service_box, .our_services_wrapper .feature_box,
.investors_wrapper .inves_slider_cntn, .counter_cntnt_box { width: 100%; }
.service_box, .feature_box { display: flex; flex-direction: column; text-align: center; align-items: center; }
.service_box .investment_content_wrapper, .feature_box .investment_content_wrapper { flex: 1 1 auto; }
.service_box .investment_icon_circle, .feature_box .investment_icon_circle { margin-left: auto; margin-right: auto; }
/* remove the stray decorative ring artifact inside feature/service cards */
.service_box .investment_border_wrapper, .feature_box .investment_border_wrapper { display: none !important; }

/* market ticker strip — contained, on-brand, no page overflow */
.gc-market-ticker-wrap { overflow: hidden !important; max-width: 100%; }
.gc-mt-price { color: #fff !important; font-family: var(--tm-mono) !important; }
.gc-mt-label { color: var(--tm-d-text-2) !important; }
.gc-mt-change.up { color: var(--tm-mint) !important; }
.gc-mt-change.down { color: var(--tm-danger, #FF5C7A) !important; }

/* coins live rates — horizontal scroll instead of overflow on mobile */
.live_rates_wrapper .calculator_portion { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#liveTickerList { min-width: 0; }
@media (max-width: 575px) { #liveTickerList { min-width: 420px; } }

/* testimonials — equal height, readable on mobile */
.testimonial_slide_main_wrapper { height: 100%; }
@media (max-width: 575px) { .testimonial_slide_main_wrapper { padding: 20px !important; } }

/* top investors — circular images, contained */
.inves_img_wrapper img { width: 100%; height: auto; }

/* footer — clean mobile stacking */
@media (max-width: 767px) {
    .footer_main_wrapper { text-align: center; }
    .footer_main_wrapper .wrapper_second_useful ul { padding-left: 0; }
    .counter-section .ft_about_icon { justify-content: center; }
    .copyright_wrapper { flex-direction: column; gap: 10px; text-align: center; }
}

/* hero — mobile polish: wrap CTAs, hide heavy decorative cards on small */
@media (max-width: 767px) {
    .tmh-cta { width: 100%; }
    .tmh-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
    .tmh-hero__right { min-height: 320px; }
    .tmh-card { display: none !important; }   /* keep the terminal preview, drop floating chips */
    .tmh-trust { gap: 14px; }
}

/* tables: never break layout — scroll horizontally on small screens */
@media (max-width: 767px) {
    .table-responsive, .crm_customer_table_main_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .myTable.table, table.datatables { min-width: 560px; }
}

/* ==========================================================================
   26. LUCKY DRAW + FINAL CONSISTENCY SWEEP
   ========================================================================== */
/* Lucky draw cards -> consistent glass (page already uses dark inline text) */
.card-like, .gc-lucky-hero, .gc-lucky-side {
    background: rgba(18,24,38,.85) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
    padding: 22px !important;
}
.gc-lucky-win.card-like { background: rgba(0,229,160,.06) !important; box-shadow: var(--tm-glow-cyan) !important; }  /* keep its inline green border */
.gc-lucky-wrap, .gc-lucky-winner-home { color: var(--tm-d-text); }
.gc-lucky-hero h4, .gc-lucky-side h3, .gc-lucky-side h4 { color: #fff !important; }
.gc-lucky-stats dt { color: var(--tm-d-text-2) !important; }
.gc-lucky-stats dd { color: #fff !important; }
.gc-lucky-winner-home { border-bottom-color: var(--tm-d-border) !important; }
/* prize participant number -> neon mono */
.gc-lucky-hero p[style*="28px"] { font-family: var(--tm-mono) !important; }

/* ---- Consistency sweep: unify radius / shadow / button shape ----------- */
.btn, .tmh-btn, .main-btn, .read-more-btn, .filter-btn, .mlm-copy-btn,
.about_btn a, .edit_profile_btn a, .gctree-zoom {
    border-radius: 12px;
}
/* normalise every themed card to one radius + one shadow family */
.investment_box_wrapper, .crm_customer_table_main_wrapper, .change_password_wrapper,
.view_profile_wrapper, .payment_transfer_Wrapper, .tm-card, .tm-panel,
.service-card-3, .gctree-card, .card-like, .login_top_box {
    border-radius: var(--tm-radius) !important;
}
/* kill stray horizontal scroll from wide content (without touching the
   Bootstrap gutter system, which other layouts rely on) */
.l-main, .account_wrapper, .tm-analytics, main { max-width: 100%; }

/* dashboard analytics: tighten on very small screens */
@media (max-width: 575px) {
    .tm-analytics { margin-bottom: 22px; }
    .tm-panel { padding: 16px; }
    .tm-chart-box { min-height: 260px; }
}

/* ==========================================================================
   27. FULL TEMPLATE COVERAGE — blog / single / page / archive / search / 404
   / gallery / single-services / sidebar & widgets. CSS-only; brings every
   remaining legacy template into the dark fintech system (no PHP touched).
   ========================================================================== */

/* ---- 27.1 Unify ALL legacy page banners into the premium hero look ------ */
.uni-banner, .breadcrumbs-area, .ttm-page-title, .single-page,
.main-banner.services-banner, .page-header {
    position: relative; overflow: hidden;
    padding: clamp(96px, 14vw, 150px) 0 clamp(40px, 6vw, 58px) !important;
    background-color: var(--tm-d-bg-1) !important;
    border-bottom: 1px solid var(--tm-d-border);
}
.uni-banner::before, .breadcrumbs-area::before, .ttm-page-title::before,
.single-page::before, .main-banner.services-banner::before, .page-header::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(700px 340px at 85% 8%, rgba(34,211,238,.16), transparent 58%),
        radial-gradient(560px 320px at 4% 92%, rgba(0,229,160,.12), transparent 58%),
        linear-gradient(180deg, rgba(2,4,10,.82), rgba(2,4,10,.7)),
        linear-gradient(rgba(110,231,240,.04) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(110,231,240,.04) 1px, transparent 1px) 0 0 / 44px 44px;
}
/* floating particle orb */
.uni-banner::after, .breadcrumbs-area::after, .ttm-page-title::after, .page-header::after {
    content: ""; position: absolute; top: 14%; right: 8%; width: 140px; height: 140px;
    border-radius: 50%; pointer-events: none; filter: blur(8px);
    background: radial-gradient(circle, rgba(34,211,238,.28), transparent 65%);
    animation: tmFloat 7s ease-in-out infinite;
}
.uni-banner > .container, .breadcrumbs-area > .container, .ttm-page-title > .container,
.single-page > .container, .main-banner.services-banner > .container-fluid,
.page-header > .container { position: relative; z-index: 1; }

/* banner titles + breadcrumbs */
.uni-banner-text h1, .breadcrumbs-content h1, .ttm-page-title .title,
.page-header h3, .single-page .page-content h2 {
    color: #fff !important; font-weight: 800 !important; letter-spacing: -.02em;
    font-size: clamp(26px, 4vw, 44px) !important;
}
.single-page .page-content h2 { font-size: clamp(56px, 10vw, 110px) !important; background: var(--tm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.uni-banner-text ul li, .uni-banner-text ul li a,
.breadcrumbs-content ul li, .breadcrumbs-content ul li a,
.breadcrumb-wrapper span, .breadcrumb-wrapper a,
.page-breadcrumb, .page-breadcrumb a { color: var(--tm-d-text-2) !important; }
.uni-banner-text ul li:last-child, .breadcrumbs-content ul li.active,
.breadcrumb-wrapper span:last-child, .page-breadcrumb { color: var(--tm-cyan) !important; }
.uni-banner-text ul li a:hover, .breadcrumb-wrapper a:hover, .page-breadcrumb a:hover { color: #fff !important; }

/* ---- 27.2 Light section utilities -> transparent on dark ---------------- */
.bg-f9faff, .bg-f4f4f4, .bg-eee, .gray-bg, .grey-bg,
.blog, .sidebar-page-container, .service-details, .booking, .main-content,
.project-two, .blog-page, .ptb-100.bg-f9faff { background: transparent !important; }

/* ---- 27.3 Content cards (blog / sidebar / testimonial / gallery) -------- */
.blog-card, .recent-news-card, .sidebar-card, .testimonial-card,
.post-details .inner-box, .project-two__single, .single-page .page-content,
.comment-list .comment-body, article.hentry {
    background: rgba(18,24,38,.85) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.blog-card { overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.blog-card:hover, .testimonial-card:hover, .project-two__single:hover {
    transform: translateY(-5px); border-color: rgba(34,211,238,.5) !important; box-shadow: var(--tm-glow-cyan), 0 22px 50px rgba(0,0,0,.6) !important;
}
.blog-card-text, .post-details .inner-box, .sidebar-card, .single-page .page-content { padding: clamp(16px, 2.4vw, 26px) !important; }
.project-two__image img { border-radius: 12px; width: 100%; }

/* headings & body text on dark */
.blog-card-text h4, .blog-card-text h4 a, .recent-news-card h5, .recent-news-card h5 a,
.sidebar-card h3, .testimonial-card h4, .testimonial-footer-intro h4,
.post-details h1, .post-details h2, .post-details h3, .post-details h4,
.blog-content h1, .blog-content h2, .blog-content h3,
.entry-title, .entry-title a, .page-title, .project-two h2,
.single-page .page-content h4, .default-section-title h3, .default-section-title h6 { color: #fff !important; }
.default-section-title h6 { color: var(--tm-cyan) !important; }
.blog-card-text p, .post-content, .post-content p, .post-content li,
.blog-content p, .entry-content, .entry-content p, .entry-summary,
.recent-news-card p, .testimonial-card p, .single-page .page-content p,
.opening-card li, .blog-date li, .blog-date li i, .testimonial-footer-intro p,
.no-results .page-content, .comment-content { color: var(--tm-d-text-2) !important; }
.post-content a, .blog-content a, .entry-content a { color: var(--tm-cyan) !important; }
.sidebar-card li a { color: var(--tm-d-text) !important; transition: color .2s ease; }
.sidebar-card li a:hover, .recent-news-card h5 a:hover { color: var(--tm-cyan) !important; }
.sidebar-card li a i { color: var(--tm-cyan) !important; }
.testimonial-card .stars i, .testimonial-card .stars li i { color: var(--tm-warning) !important; }
.testimonial-card .flaticon-right-quote, .testimonial-card > i { color: var(--tm-cyan) !important; }

/* ---- 27.4 Sidebar & widget layout polish -------------------------------- */
.sidebar-content { color: var(--tm-d-text); }
.sidebar-card { margin-bottom: 20px !important; }
.sidebar-card ul { list-style: none; padding-left: 0; margin: 0; }
.sidebar-card.opening-card li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--tm-d-border); padding: 9px 0; }
.recent-news-card { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.recent-news-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; flex: 0 0 60px; }
.widget, .widget-title, .wp-block-heading { color: var(--tm-d-text) !important; }
.widget-title, .widget h2, .widget h3 { color: #fff !important; }

/* ---- 27.5 Buttons / tags / pagination across legacy templates ----------- */
.web-btn, .default-button, .default-button-3, .blog-card-category, .read-more-btn.btn {
    background: var(--tm-grad) !important; color: #04121A !important;
    border: none !important; border-radius: 12px !important;
    box-shadow: var(--tm-glow-mint) !important; font-weight: 700 !important;
}
.web-btn:hover, .default-button:hover, .default-button-3:hover { transform: translateY(-2px); filter: brightness(1.06); }
.blog-card-category { padding: 5px 12px !important; font-size: 12px; }
.page-numbers, .nav-links a, .nav-links .page-numbers, .posts-navigation a,
.pagination a, .navigation a, .post-navigation a {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(34,211,238,.07) !important; color: #BFF6FF !important;
    border: 1px solid var(--tm-d-border) !important; border-radius: 10px !important;
    padding: 8px 14px !important; transition: all .18s ease;
}
.page-numbers.current, .page-numbers:hover, .nav-links a:hover, .pagination a:hover { background: var(--tm-grad) !important; color: #04121A !important; border-color: transparent !important; }

/* ---- 27.6 404 search box + generic legacy inputs ------------------------ */
.blog-search input, .search-form .search-field, input.search-field {
    width: 100%;
    background: rgba(255,255,255,.05) !important; border: 1px solid var(--tm-d-border) !important;
    color: #fff !important; border-radius: 12px !important; padding: 13px 16px !important;
}
.blog-search input:focus { border-color: var(--tm-cyan) !important; box-shadow: 0 0 0 4px rgba(34,211,238,.16) !important; outline: none; }
.blog-search a, .blog-search .primary-color { color: var(--tm-cyan) !important; }
.single-page .page-content p { font-size: 16px; }

/* ---- 27.7 single-services hero text + booking section ------------------- */
.banner-text-area, .banner-text-area * { color: #fff !important; }
.banner-text-area p, .service-details p { color: var(--tm-d-text-2) !important; }
.booking-form-area { background: rgba(18,24,38,.85); border: 1px solid var(--tm-d-border); border-radius: var(--tm-radius); padding: clamp(18px,2.5vw,28px); }

/* ---- 27.8 archive grid spacing ----------------------------------------- */
.project-two .row.high-gutters { row-gap: 18px; }
.archive .page-title, .page-title { font-size: clamp(22px, 3vw, 34px) !important; }

/* ==========================================================================
   28. FINAL QA & POLISH — accessibility, safety nets, state utilities
   ========================================================================== */

/* 28.1 Reveal safety net — if JS is disabled, never leave content invisible
   (the .tm-reveal opacity:0 is only safe when JS adds .tm-in). */
@media (scripting: none) { .tm-reveal { opacity: 1 !important; } }
.no-js .tm-reveal { opacity: 1 !important; }

/* 28.2 Keyboard focus for custom interactive controls (consistent neon ring) */
.tm-range__btn:focus-visible, .gctree-zoom:focus-visible,
.tx-tab:focus-visible, .filter-btn:focus-visible, .mlm-copy-btn:focus-visible,
.gctree-d > summary:focus-visible, summary.gctree-card:focus-visible,
.carousel-indicators li:focus-visible, .read-more-btn:focus-visible {
    outline: 3px solid rgba(34,211,238,.55) !important;
    outline-offset: 2px;
    border-radius: 10px;
}
summary.gctree-card:focus-visible { border-color: var(--tm-cyan) !important; }
/* remove default marker but keep summary keyboard-operable */
details > summary { outline: none; }
/* skip-link friendliness + reduced motion already global in tradme-modern §11 */

/* 28.3 Danger colour unified to spec (#FF5C7A) for status states */
.alert-danger { background: rgba(255,92,122,.14) !important; color: #FFB1C0 !important; border-color: rgba(255,92,122,.34) !important; }
.tm-badge-rejected, .badge-rejected { background: rgba(255,92,122,.16) !important; color: #FFB1C0 !important; border-color: rgba(255,92,122,.36) !important; }
.tm-trend-down { color: #FFB1C0 !important; background: rgba(255,92,122,.12) !important; }

/* 28.4 LOADING state — buttons (.is-loading) + skeleton shimmer (opt-in) */
@keyframes tmSpin { to { transform: rotate(360deg); } }
@keyframes tmShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.btn.is-loading, .tmh-btn.is-loading, .mlm-copy-btn.is-loading, .web-btn.is-loading {
    color: transparent !important; pointer-events: none; position: relative;
}
.btn.is-loading::after, .tmh-btn.is-loading::after, .mlm-copy-btn.is-loading::after, .web-btn.is-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid rgba(4,18,26,.45); border-top-color: #04121A;
    border-radius: 50%; animation: tmSpin .7s linear infinite;
}
.tm-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
    background-size: 200% 100%; animation: tmShimmer 1.4s ease-in-out infinite;
    border-radius: 10px; min-height: 14px;
}

/* 28.5 EMPTY state — consistent dark dashed panel (opt-in .tm-empty) */
.tm-empty {
    text-align: center; color: var(--tm-d-text-2);
    padding: 36px 24px; border: 1px dashed var(--tm-d-border);
    border-radius: var(--tm-radius); background: rgba(255,255,255,.02);
}
.tm-empty i { color: var(--tm-cyan); font-size: 28px; display: block; margin-bottom: 10px; opacity: .8; }

/* 28.6 Micro-interaction consistency — unified hover lift + tap feedback */
.btn, .tmh-btn, .main-btn, .web-btn, .default-button, .tm-card, .blog-card,
.service-card-3, .gctree-card, .tmh-phero__stat, .investment_box_wrapper,
.mlm-copy-btn { will-change: transform; }
.btn:active, .tmh-btn:active, .main-btn:active, .web-btn:active,
.mlm-copy-btn:active, .gctree-zoom:active, .tm-range__btn:active { transform: translateY(0) scale(.985); }

/* 28.7 Prevent content reflow/jank from web fonts + lazy images */
img[loading], img[data-src] { background: rgba(255,255,255,.03); }
.tm-card__val, .tmh-stat__num, .userdescc dd, .stat-item span { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   29. DAILY EARNINGS CALENDAR (.tm-cal) — premium activity tracker
   Presentational shell around existing earning records (daily-earning.php).
   ========================================================================== */
.tm-cal {
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    border-radius: var(--tm-radius);
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: clamp(16px, 2.4vw, 26px);
    margin: 0 0 26px;
}
.tm-cal__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.tm-cal__h { color: #fff !important; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; }
.tm-cal__nav { display: inline-flex; align-items: center; gap: 8px; }
.tm-cal__navbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--tm-d-border); background: rgba(34,211,238,.07); color: var(--tm-cyan); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .18s ease; }
.tm-cal__navbtn:hover:not(:disabled) { background: var(--tm-grad); color: #04121A; border-color: transparent; transform: translateY(-1px); }
.tm-cal__navbtn:disabled { opacity: .35; cursor: not-allowed; }
.tm-cal__title { font-weight: 700; color: #fff; min-width: 116px; text-align: center; font-size: 15px; }
.tm-cal__select { background: rgba(255,255,255,.05); border: 1px solid var(--tm-d-border); color: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
.tm-cal__select option { background: #0B1220; color: #fff; }

/* stat chips */
.tm-cal__stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.tm-cal__stat { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--tm-d-border); transition: transform .2s ease, border-color .2s ease; }
.tm-cal__stat:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.45); box-shadow: var(--tm-glow-cyan); }
.tm-cal__si { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.tm-ico-danger { background: rgba(255,92,122,.14); border: 1px solid rgba(255,92,122,.3); color: #FF8DA3; }
.tm-cal__stat b { display: block; color: #fff; font-family: var(--tm-mono); font-size: 18px; font-weight: 700; line-height: 1.1; }
.tm-cal__stat b small { font-size: 11px; color: var(--tm-d-text-2); font-family: var(--tm-font); }
.tm-cal__stat span { color: var(--tm-d-text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

/* legend */
.tm-cal__legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12.5px; color: var(--tm-d-text-2); }
.tm-cal__legend b { color: #fff; font-family: var(--tm-mono); }
.tm-cal__legend-roi { margin-left: auto; }
.tm-cal__legend-roi i { color: var(--tm-cyan); margin-right: 5px; }
.tm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.tm-dot--mint { background: var(--tm-mint); box-shadow: 0 0 8px rgba(0,229,160,.7); }
.tm-dot--danger { background: var(--tm-danger); }
.tm-dot--cyan { background: var(--tm-cyan); box-shadow: 0 0 8px rgba(34,211,238,.7); }
.tm-dot--muted { background: #334155; }

/* month grid */
.tm-cal__viewport { position: relative; overflow: hidden; }
.tm-cal__month { display: none; }
.tm-cal__month.is-active { display: block; animation: tmCalFade .35s ease; }
.tm-cal__month.is-active.tm-slide-r { animation: tmCalR .35s ease; }
.tm-cal__month.is-active.tm-slide-l { animation: tmCalL .35s ease; }
@keyframes tmCalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmCalR { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tmCalL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.tm-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tm-cal__wd { text-align: center; color: var(--tm-d-text-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px; }

.tm-cal__day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 74px; padding: 6px 4px;
    border-radius: 12px; border: 1px solid var(--tm-d-border);
    background: rgba(255,255,255,.02); color: var(--tm-d-text);
    cursor: pointer; font-family: var(--tm-font);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tm-cal__day:hover:not(.is-blank):not(.is-future) { transform: translateY(-3px); z-index: 2; }
.tm-cal__day.is-blank { background: transparent; border-color: transparent; cursor: default; }
.tm-cal__dnum { font-family: var(--tm-mono); font-size: 13px; font-weight: 700; color: #fff; align-self: flex-start; margin-left: 4px; }
.tm-cal__st { font-size: 10.5px; color: var(--tm-d-text-2); font-weight: 600; }
.tm-cal__amt { font-family: var(--tm-mono); font-size: 11.5px; font-weight: 700; }
.tm-cal__chk, .tm-cal__x { font-size: 13px; }

/* states */
.tm-cal__day.is-claimed { background: rgba(0,229,160,.1); border-color: rgba(0,229,160,.4); box-shadow: 0 0 0 1px rgba(0,229,160,.15), 0 6px 18px rgba(0,229,160,.16); }
.tm-cal__day.is-claimed:hover { box-shadow: 0 0 0 1px rgba(0,229,160,.4), 0 10px 26px rgba(0,229,160,.3); }
.tm-cal__day.is-claimed .tm-cal__chk { color: var(--tm-mint); }
.tm-cal__day.is-claimed .tm-cal__amt { color: #6BF3C6; }
.tm-cal__day.is-missed { background: rgba(255,92,122,.08); border-color: rgba(255,92,122,.32); }
.tm-cal__day.is-missed .tm-cal__x { color: var(--tm-danger); }
.tm-cal__day.is-missed .tm-cal__st { color: #FF8DA3; }
.tm-cal__day.is-today { background: rgba(34,211,238,.1); border-color: var(--tm-cyan); box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 22px rgba(34,211,238,.25); }
.tm-cal__day.is-today .tm-cal__st { color: var(--tm-cyan); }
.tm-cal__day.is-future { background: rgba(255,255,255,.015); border-color: rgba(51,65,85,.5); color: #334155; cursor: not-allowed; opacity: .8; }
.tm-cal__day.is-future .tm-cal__dnum { color: #475569; }
.tm-cal__day.is-rest { opacity: .65; }
.tm-cal__day.is-pre { opacity: .35; cursor: default; background: transparent; border-color: rgba(148,163,184,.12); }
.tm-cal__day.is-pre .tm-cal__dnum { color: var(--tm-d-text-2); }
.tm-cal__day.is-sunday { background: rgba(203,213,225,.05); border-color: rgba(148,163,184,.18); opacity: .72; cursor: default; }
.tm-cal__day.is-sunday .tm-cal__dnum, .tm-cal__day.is-sunday .tm-cal__st { color: var(--tm-d-text-2); }
.tm-dot--sun { background: #CBD5E1; box-shadow: 0 0 6px rgba(203,213,225,.5); }

/* day-detail modal */
.tm-cal-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2,4,10,.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.tm-cal-modal.is-open { display: flex; animation: tmCalFade .2s ease; }
.tm-cal-modal__card { position: relative; width: 100%; max-width: 360px; background: rgba(18,24,38,.96); border: 1px solid var(--tm-d-border); border-radius: 18px; box-shadow: var(--tm-glow-cyan), 0 30px 70px rgba(0,0,0,.7); padding: 24px; animation: tmCalR .25s ease; }
.tm-cal-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--tm-d-text-2); font-size: 22px; line-height: 1; cursor: pointer; }
.tm-cal-modal__close:hover { color: #fff; }
.tm-cal-modal__date { color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 14px; padding-right: 24px; }
.tm-cal-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.tm-cal-modal__row:last-child { border-bottom: none; }
.tm-cal-modal__row span { color: var(--tm-d-text-2); font-size: 13px; }
.tm-cal-modal__row b { color: #fff; font-family: var(--tm-mono); font-weight: 700; }
.tm-tone-mint { color: var(--tm-mint) !important; } .tm-tone-danger { color: #FF8DA3 !important; } .tm-tone-muted { color: var(--tm-d-text-2) !important; }

/* redesigned history table extras */
.tm-earn-mono { font-family: var(--tm-mono) !important; color: var(--tm-d-text-2) !important; }
.tm-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tm-status--mint { background: rgba(0,229,160,.14); color: #6BF3C6; border: 1px solid rgba(0,229,160,.34); }
.tm-status--amber { background: rgba(245,158,11,.14); color: #FCD34D; border: 1px solid rgba(245,158,11,.34); }
.tm-status--cyan { background: rgba(34,211,238,.14); color: #8DEBFF; border: 1px solid rgba(34,211,238,.32); }

/* responsive */
@media (max-width: 991px) { .tm-cal__stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
    .tm-cal__day { min-height: 60px; }
    .tm-cal__amt { font-size: 10px; }
    .tm-cal__grid { gap: 5px; }
    .tm-cal__legend-roi { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
    .tm-cal__stats { grid-template-columns: repeat(2, 1fr); }
    .tm-cal__day { min-height: 50px; padding: 4px 2px; border-radius: 9px; }
    .tm-cal__day .tm-cal__amt, .tm-cal__day .tm-cal__st { display: none; }   /* compact: dot + day only */
    .tm-cal__day.is-claimed::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-mint); box-shadow: 0 0 6px rgba(0,229,160,.8); }
    .tm-cal__day.is-missed::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-danger); }
    .tm-cal__day .tm-cal__chk, .tm-cal__day .tm-cal__x { display: none; }
    .tm-cal__wd { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-cal__month.is-active, .tm-cal-modal.is-open, .tm-cal-modal__card { animation: none !important; }
}

/* ==========================================================================
   30. DASHBOARD LAYOUT & SPACING SYSTEM (8px rhythm: 8/16/24/32/48/64)
   Removes the legacy arbitrary gaps (margin-top:205px, padding:50px) that
   pushed content down and left big voids before the footer. Layout-only.
   ========================================================================== */
/* ROOT-CAUSE FIX (Issue #1/#2): the 205px top margin is NOT a stray gap — it is
   the theme's clearance for the FIXED navbar + FIXED .page_title_section banner
   (and the fixed sidebar at top:202px). style.css/responsive.css calibrate it
   per breakpoint (205 desktop / 196 ≤1650 / 0 mobile where the banner becomes
   position:relative). Flattening it slid the card UP behind the fixed banner.
   So we DO NOT override margin-top; we only clearfix the floated children (the
   avatar floats, so the box collapsed and the next section overlapped/gapped)
   and add one 24px rhythm gap below it. */
.account_top_information { overflow: hidden; margin-bottom: 24px; }
.l-main .account_wrapper { padding: 24px 24px 0 !important; }
.l-main .last_transaction_wrapper,
.l-main .last_transaction_wrapper.float_left { padding: 24px !important; }
.l-main .crm_customer_table_main_wrapper { padding: 16px !important; padding-top: 0 !important; }
.l-main .sv_heading_wraper { margin-bottom: 16px !important; }

/* footer hugs the content (kill the void before the footer) */
.l-main { padding-bottom: 32px !important; }
.footer_main_wrapper { margin-top: 0 !important; }

/* Short dashboard pages (e.g. Lucky Draw): fill the viewport so the footer does
   not ride up under the fixed sidebar, and OFFSET the global footer past the
   sidebar width on desktop so the fixed sidebar never overlaps footer content. */
@media (min-width: 992px) {
    body:has(.l-sidebar) .l-main { min-height: calc(100vh - 160px); }
    /* Offset the global footer past the 250px fixed sidebar so its left edge is
       never hidden underneath it (matches .l-main padding-left:250px). */
    body:has(.l-sidebar) .footer_main_wrapper { padding-left: 250px; }
    body:has(.l-sidebar) .footer_main_wrapper .container { max-width: 100%; }
}

/* Dashboard content must ALWAYS be fully visible. The scroll-reveal fade
   (.tm-reveal{opacity:0} → JS adds .tm-in) is meant for marketing pages; inside
   the dashboard (.l-main) it can leave below-fold sections dim/hidden (My
   Referrals: Team Points, referral links, network tree, history, ledger). Force
   them visible here — public pages keep the animation. */
.l-main .tm-reveal { opacity: 1 !important; animation: none !important; }
.l-main .user-mlm-info, .l-main .user-mlm-info *,
.l-main .account_wrapper, .l-main .account_wrapper *,
.l-main .view_profile_wrapper_top, .l-main .view_profile_wrapper_top *,
.l-main .direct-referrals, .l-main .gctree-viewport, .l-main .referral-slots,
.l-main .last_transaction_wrapper {
    opacity: 1 !important; filter: none !important; -webkit-filter: none !important;
    visibility: visible !important; pointer-events: auto !important;
}

/* equal-height team-points + consistent gaps */
.mlm-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 16px !important; align-items: stretch; margin: 16px 0 !important; }
.mlm-stats .stat-item { height: 100%; margin: 0 !important; }
.referral-links { margin: 16px 0 !important; }
.link-item { margin: 8px 0 !important; }
.referral-slots { gap: 16px !important; align-items: start; }

/* analytics + tree consistent rhythm */
.tm-analytics { margin-bottom: 24px !important; }
.tm-cards, .tm-grid-2 { gap: 16px !important; }
.tm-panel { margin-bottom: 16px !important; }
.gctree-viewport { max-height: 440px; }
.direct-referrals { margin-top: 16px !important; }

@media (max-width: 991px) {
    /* mobile: theme already sets .account_top_information margin-top:0 and the
       banner to position:relative — do NOT re-add a top margin. Only tighten
       the inner section padding. */
    .l-main .account_wrapper, .l-main .last_transaction_wrapper { padding: 16px !important; }
}

/* ==========================================================================
   31. MY RANK PAGE — premium achievement experience (overrides inline purple
   <style> in my-rank.php; layout/visual only, no rank logic touched)
   ========================================================================== */
.rank-page { min-height: auto !important; background: transparent !important; }
.rank-page.l-main { padding: 24px !important; }

/* rank progression grid — equal-height glass cards */
.rank-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; align-items: stretch; }
.rank-card {
    display: flex; flex-direction: column; height: 100%;
    background: rgba(18,24,38,.85) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 16px !important; padding: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
    color: var(--tm-d-text) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rank-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.45) !important; box-shadow: var(--tm-glow-cyan) !important; }
.rank-card h3 { color: #fff !important; margin: 0 0 2px !important; }
.rank-card > p { color: var(--tm-d-text-2) !important; margin: 0 0 12px !important; font-size: 13px; }
.rank-card.active-rank { border-color: rgba(0,229,160,.5) !important; box-shadow: 0 0 0 1px rgba(0,229,160,.25), 0 12px 34px rgba(0,229,160,.22) !important; }
.rank-card.active-rank::before { content: "CURRENT"; align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #04121A; background: var(--tm-grad); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }

.rank-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 !important; border-bottom: 1px solid rgba(148,163,184,.12) !important; }
.rank-line span { color: var(--tm-d-text-2) !important; font-size: 12.5px; }
.rank-line strong { color: #fff !important; font-family: var(--tm-mono); font-size: 13px; text-align: right; }

/* neon progress bar (existing inline width:X% on inner div is kept) */
.rank-progress { margin-top: auto !important; height: 8px !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; overflow: hidden; margin-top: 14px !important; }
.rank-progress > div { height: 100% !important; background: var(--tm-grad) !important; box-shadow: 0 0 12px rgba(0,229,160,.5); border-radius: 999px; transition: width .9s cubic-bezier(.22,.61,.36,1); }

/* reward thumb with graceful fallback (gradient + medal behind the image) */
.rank-reward-thumb {
    width: 72px; height: 72px; border-radius: 16px; margin-bottom: 14px !important;
    background: var(--tm-grad); position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 22px rgba(34,211,238,.25);
}
.rank-reward-thumb::before { content: "\f559"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #04121A; font-size: 26px; position: absolute; }
.rank-reward-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* header card + rank-history table -> dark glass (were purple inline) */
.rank-header-card { background: rgba(18,24,38,.85) !important; border: 1px solid var(--tm-d-border) !important; border-radius: 16px !important; }
.rank-header-left h2 { color: #fff !important; }
.rank-header-left p, .rank-header-right, .rank-meta-row { color: var(--tm-d-text-2) !important; }
.rank-header-right b, .rank-header-right strong, .rank-meta-row b { color: #fff !important; font-family: var(--tm-mono); }
.rank-page table { color: var(--tm-d-text) !important; }
.rank-page table th { color: #fff !important; border-bottom-color: var(--tm-d-border) !important; }
.rank-page table td { border-bottom-color: rgba(148,163,184,.12) !important; }
.rank-page > div[style*="1e064f"] { background: rgba(18,24,38,.85) !important; border-color: var(--tm-d-border) !important; }

@media (max-width: 575px) { .rank-grid { grid-template-columns: 1fr 1fr !important; } .rank-header-card { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   32. NEXT-RANK CARD + RANK JOURNEY TIMELINE (my-rank.php, presentational)
   ========================================================================== */
.tm-nextrank {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 26px;
    background: rgba(18,24,38,.85);
    border: 1px solid rgba(251,191,36,.28);
    border-radius: 16px; padding: 24px; margin-bottom: 16px;
    box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.tm-nextrank::before { content: ""; position: absolute; top: -40%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(251,191,36,.16), transparent 60%); pointer-events: none; }
.tm-nextrank__info { flex: 1 1 auto; position: relative; z-index: 1; }
.tm-nextrank__eyebrow { color: #FBBF24; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.tm-nextrank__name { color: #fff; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 18px; }
.tm-nextrank__name i { color: var(--tm-d-text-2); margin: 0 8px; font-size: .8em; }
.tm-gold { color: #FBBF24 !important; }
.tm-nextrank__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tm-nextrank__grid span { display: block; color: var(--tm-d-text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tm-nextrank__grid b { display: block; color: #fff; font-family: var(--tm-mono); font-size: 17px; font-weight: 700; margin-top: 4px; }

/* progress ring */
.tm-nextrank__ring { flex: 0 0 auto; position: relative; z-index: 1; }
.tm-ring { position: relative; width: 132px; height: 132px; }
.tm-ring svg { width: 100%; height: 100%; }
.tm-ring__bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.tm-ring__fg { fill: none; stroke: var(--tm-cyan); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 - 327 * var(--pct, 0) / 100); transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1.3s cubic-bezier(.22,.61,.36,1); filter: drop-shadow(0 0 6px rgba(34,211,238,.55)); }
.tm-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tm-ring__label b { color: #fff; font-family: var(--tm-mono); font-size: 27px; font-weight: 800; line-height: 1; }
.tm-ring__label small { color: var(--tm-d-text-2); font-size: 11px; margin-top: 3px; }

/* journey timeline — vertical (desktop) */
.tm-timeline-wrap { background: rgba(18,24,38,.85); border: 1px solid var(--tm-d-border); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; }
.tm-timeline-head { color: #fff; font-weight: 700; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; }
.tm-timeline-head i { color: var(--tm-cyan); }
.tm-timeline { display: flex; flex-direction: column; }
.tm-tl__item { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 22px; }
.tm-tl__item:last-child { padding-bottom: 0; }
.tm-tl__item:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--tm-d-border); z-index: 0; }
.tm-tl__item.is-done::before { background: linear-gradient(180deg, var(--tm-mint), rgba(0,229,160,.3)); }
.tm-tl__node { position: relative; z-index: 1; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid var(--tm-d-border); background: #0B1728; transition: all .25s ease; }
.tm-tl__item.is-done .tm-tl__node { border-color: var(--tm-mint); background: var(--tm-mint); color: #04121A; box-shadow: 0 0 14px rgba(0,229,160,.5); }
.tm-tl__item.is-current .tm-tl__node { border-color: var(--tm-cyan); color: var(--tm-cyan); animation: tmTlPulse 2s ease-in-out infinite; }
.tm-tl__item.is-locked .tm-tl__node { border-color: #334155; color: #475569; }
.tm-tl__name { color: #fff; font-weight: 700; display: block; }
.tm-tl__item.is-locked .tm-tl__name { color: var(--tm-d-text-2); }
.tm-tl__req { color: var(--tm-d-text-2); font-family: var(--tm-mono); font-size: 12px; }
@keyframes tmTlPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,.16), 0 0 16px rgba(34,211,238,.5); } 50% { box-shadow: 0 0 0 7px rgba(34,211,238,.05), 0 0 24px rgba(34,211,238,.8); } }

/* horizontal timeline on mobile */
@media (max-width: 767px) {
    .tm-timeline { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .tm-tl__item { flex-direction: column; text-align: center; gap: 8px; padding: 0 14px 0 0; min-width: 86px; }
    .tm-tl__item:not(:last-child)::before { left: 36px; top: 17px; bottom: auto; width: 50px; height: 2px; }
    .tm-tl__body { display: flex; flex-direction: column; }
    .tm-nextrank { flex-direction: column; align-items: stretch; }
    .tm-nextrank__grid { grid-template-columns: 1fr 1fr; }
    .tm-ring { margin: 4px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .tm-tl__item.is-current .tm-tl__node { animation: none !important; } .tm-ring__fg { transition: none !important; } }

/* ==========================================================================
   33. ANALYTICS EMPTY-STATE refinement (charts with no real data)
   ========================================================================== */
#tmPortfolioEmpty, #tmEarningsEmpty, #tmIncomeEmpty { flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; }
.tm-empty__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--tm-grad); color: #04121A !important; font-weight: 700; padding: 9px 18px; border-radius: 12px; box-shadow: var(--tm-glow-mint); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.tm-empty__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,229,160,.5); }

/* ==========================================================================
   34. KPI grid flow (6 cards) + QUICK STATS strip + ACTIVITY TIMELINE
   ========================================================================== */
.tm-cards { grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)) !important; }

/* quick stats */
.tm-qs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-bottom: 18px; }
.tm-qs__item { background: rgba(255,255,255,.03); border: 1px solid var(--tm-d-border); border-radius: 12px; padding: 12px 14px; transition: border-color .2s ease, transform .2s ease; }
.tm-qs__item:hover { border-color: rgba(34,211,238,.4); transform: translateY(-2px); }
.tm-qs__l { display: block; color: var(--tm-d-text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-qs__v { font-family: var(--tm-mono); font-weight: 700; font-size: 16px; color: #fff; }
.tm-qs__v--up { color: #6BF3C6; }
.tm-qs__v--cy { color: #8DEBFF; }
.tm-qs__v--muted { color: var(--tm-d-text); }

/* activity timeline */
.tm-tline { display: flex; flex-direction: column; }
.tm-tline__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.1); transition: background .15s ease; }
.tm-tline__item:last-child { border-bottom: none; }
.tm-tline__item:hover { background: rgba(34,211,238,.04); border-radius: 10px; }
.tm-tline__ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.tm-tline__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tm-tline__label { color: #fff; font-weight: 600; font-size: 14px; }
.tm-tline__time { color: var(--tm-d-text-2); font-size: 12px; }
.tm-tline__amt { font-family: var(--tm-mono); font-weight: 700; font-size: 14.5px; white-space: nowrap; flex: 0 0 auto; }
.tm-tline__item .tm-status { flex: 0 0 auto; }

@media (max-width: 1199px) { .tm-qs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
    .tm-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .tm-qs { grid-template-columns: repeat(2, 1fr); }
    .tm-tline__item .tm-status { display: none; }
    .tm-tline__item { gap: 10px; }
}
@media (max-width: 380px) {
    .tm-cards { grid-template-columns: 1fr !important; }
    .tm-qs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   35. SIDEBAR — icon + label on ONE row (Issue #4)
   Root cause: dashboard-sidebar.php puts the icon and the label in TWO separate
   <li> inside .crm_drop_second_ul, but style.css sets
   ".c-menu > ul { flex-direction: column }" → they stack vertically.
   Fix: make each menu <ul> a nowrap horizontal, vertically-centered row.
   ========================================================================== */
.l-sidebar .c-menu > ul.crm_drop_second_ul,
.l-sidebar .c-menu ul.crm_drop_second_ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    margin: 4px 10px !important;
    padding: 0 8px !important;
    min-height: 48px;                       /* 48px professional row height */
    border-radius: 12px;
    transition: background .2s ease, box-shadow .2s ease;
}
.l-sidebar .crm_drop_second_ul > li.crm_navi_icon,
.l-sidebar .crm_drop_second_ul > .crm_navi_icon {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    flex: 0 0 auto; display: flex !important; align-items: center;
}
.l-sidebar .crm_drop_second_ul > li.c-menu__item,
.l-sidebar .crm_drop_second_ul > .c-menu__item {
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex !important; align-items: center;
}
.l-sidebar .crm_drop_second_ul > .c-menu__item a { display: block; width: 100%; padding: 0 !important; }
.l-sidebar .crm_drop_second_ul .c-menu__item__inner { float: none !important; width: auto !important; margin: 0 !important; display: inline-flex !important; }
.l-sidebar .c-menu-item__title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2; margin: 0; font-size: 14px;
}
/* hover: cyan glow (whole row) */
.l-sidebar .crm_drop_second_ul:hover {
    background: rgba(34,211,238,.08);
    box-shadow: inset 0 0 0 1px rgba(34,211,238,.22), 0 0 16px rgba(34,211,238,.12);
}
.l-sidebar .crm_drop_second_ul:hover .c-menu-item__title { color: #fff !important; }
.l-sidebar .crm_drop_second_ul:hover .crm_navi_icon i.fas { color: #04121A !important; background: var(--tm-grad) !important; border-color: transparent !important; }
/* active: gradient row (class added in dashboard-sidebar.php) */
.l-sidebar .crm_drop_second_ul.is-active {
    background: var(--tm-grad);
    box-shadow: var(--tm-glow-mint);
}
.l-sidebar .crm_drop_second_ul.is-active .c-menu-item__title { color: #04121A !important; font-weight: 700; }
.l-sidebar .crm_drop_second_ul.is-active .crm_navi_icon i.fas { color: #04121A !important; background: rgba(4,18,26,.14) !important; border-color: transparent !important; }

/* ==========================================================================
   36. COMPACT DASHBOARD HEADER SYSTEM  (replaces the 205px fixed-stack)
   Root cause of wasted space: BOTH the navbar (.inner_header_wrapper) AND the
   breadcrumb (.page_title_section) were position:fixed (~103 + ~99px), so the
   first .l-main child needed 205px clearance.
   New architecture (Binance/Bybit style): navbar stays fixed (sticky); the
   breadcrumb becomes a COMPACT bar in NORMAL FLOW (clears the navbar once);
   .account_top_information then needs only 16-24px rhythm — no magic number.
   Two tunable tokens drive the whole stack; sidebar top is DERIVED from them.
   ========================================================================== */
:root {
    --tm-nav-h: 104px;  /* fixed-navbar height — must fully clear the logo/menu */
    --tm-bc-h:  48px;   /* compact breadcrumb height */
}

/* 36.1 trim the fixed navbar's height (menu link padding was 15/25) */
.main_top_wrapper .mainmenu ul li a,
.inner_header_wrapper .main_top_wrapper .mainmenu ul li a { padding-top: 10px !important; padding-bottom: 10px !important; }
.inner_header_wrapper { padding-bottom: 6px !important; }

/* 36.2 breadcrumb -> compact bar, NORMAL FLOW, clears the fixed navbar once.
   Keeps the dark style + glow (from §11). */
.page_title_section, .page_title_section.dashboard_title {
    position: relative !important;
    margin-top: var(--tm-nav-h) !important;
    padding: 0 !important;
    min-height: var(--tm-bc-h);
    display: flex; align-items: center;
}
.page_title_section .page_header { width: 100%; padding: 8px 0 !important; }
.page_title_section .page_header h1 { font-size: clamp(16px, 1.9vw, 21px) !important; margin: 0 !important; line-height: 1.25; }
.page_title_section .sub_title_section, .page_title_section .sub_title { margin: 0 !important; }
.page_title_section .sub_title li, .page_title_section .sub_title a { font-size: 12.5px; }

/* 36.3 sidebar top = DERIVED from nav + breadcrumb (no arbitrary 202) */
.l-sidebar { top: calc(var(--tm-nav-h) + var(--tm-bc-h)) !important; padding-top: 16px !important; }

/* 36.4 account top info: rhythm only (no 205 magic clearance) + compact card */
.account_top_information { margin-top: 20px !important; }
.rank-page.account_top_information { margin-top: 20px !important; }
.account_top_information:not(.l-main) { padding: 18px 20px !important; }
.account_top_information .useriimg img, .useriimg img { max-width: 100px; height: auto; }
.account_top_information .userdet h3 { font-size: 17px !important; }

/* 36.5 neutralise the legacy 200px fixed-portion clearance (those pages now use
   in-flow banners / the new page-hero, so the big top margin is a stray gap) */
.fixed_portion { margin-top: 0 !important; }

/* 36.6 DENSITY (Task 5): tighter rhythm so profile + analytics + KPIs sit above the fold */
.tm-analytics { margin-bottom: 20px !important; }
.tm-cards, .tm-grid-2 { gap: 14px !important; }
.tm-qs { gap: 8px !important; margin-bottom: 14px !important; }
.tm-panel { padding: 16px !important; margin-bottom: 14px !important; }
.l-main .sv_heading_wraper { margin-bottom: 12px !important; }
.l-main .account_wrapper { padding-top: 16px !important; }

/* 36.7 responsive: on mobile the navbar + banner are already in normal flow
   (theme sets them position:relative ≤991) and the sidebar is hidden, so the
   breadcrumb needs no navbar clearance. */
@media (max-width: 991px) {
    .page_title_section, .page_title_section.dashboard_title { margin-top: 0 !important; }
    .account_top_information { margin-top: 16px !important; }
}

/* ==========================================================================
   37. DEPOSIT METHOD TABS (deposit.php — PIN vs Manual USD Account)
   ========================================================================== */
.gc-dep-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.gc-dep-tabbtn {
    flex: 1 1 auto; min-width: 140px;
    background: rgba(34,211,238,.07); color: #BFF6FF;
    border: 1px solid var(--tm-d-border); border-radius: 12px;
    padding: 11px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
    transition: all .18s ease;
}
.gc-dep-tabbtn:hover { background: rgba(34,211,238,.14); }
.gc-dep-tabbtn.is-on { background: var(--tm-grad); color: #04121A; border-color: transparent; box-shadow: var(--tm-glow-mint); }
.gc-dep-tab { animation: tmCalFade .3s ease; }
/* Single-column auth cards (Set-new-password / reset) have NO banner beside the
   form, so the form wrapper must fill the card instead of the 55% width used in
   the 2-column login/register layout (which keeps a banner + form side by side).
   :only-child matches only when there's no .login_banner_wrapper sibling. */
.login_top_box > .login_form_wrapper:only-child {
    width: 100% !important;
    padding: 44px 40px !important;
    float: none !important;
}
@media (max-width: 575px) {
    .login_top_box > .login_form_wrapper:only-child { padding: 30px 20px !important; }
}

/* Dashboard dropdowns — keep the native option list dark + readable (matches the
   USD deposit dropdown). Covers the Withdraw currency/wallet selects too. */
#gc-tab-usd select.form-control option,
.l-main select.form-control option { background: #0B1220; color: #fff; }
.l-main select.form-control { color-scheme: dark; }
@media (max-width: 575px) { .gc-dep-tabbtn { flex: 1 1 100%; } }

/* ==========================================================================
   38. AUTH INLINE VALIDATION (login / register / forgot / reset)
   Field-level errors + red border/icon/glow + top summary alert.
   ========================================================================== */
.gc-auth-summary { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; animation: gcShake .4s ease, tmCalFade .3s ease; }
.form-control.gc-invalid, input.gc-invalid, textarea.gc-invalid {
    border-color: #FF5C7A !important;
    box-shadow: 0 0 0 3px rgba(255,92,122,.16), 0 0 16px rgba(255,92,122,.20) !important;
    animation: gcShake .35s ease;
}
.gc-field-error {
    display: flex; align-items: center; gap: 6px;
    color: #FF8DA3; font-size: 12.5px; font-weight: 600; line-height: 1.3;
    margin-top: 7px; animation: tmCalFade .25s ease;
}
.gc-field-error i { color: #FF5C7A; font-size: 12px; }
.alert.gc-auth-summary.alert-success i { color: #00E5A0; }
@keyframes gcShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .gc-auth-summary, .form-control.gc-invalid, .gc-field-error { animation: none !important; } }

/* ============================================================ §39 honeypot + password strength */
/* Honeypot: hidden from humans but present in DOM for bots. Never use display:none
   alone (some bots skip those); push it off-screen + zero interaction. */
.gc-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.gc-hp * { pointer-events: none !important; }

/* Password strength meter */
.gc-strength { margin: 16px 2px 0; clear: both; }
.gc-strength-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    overflow: hidden;
}
.gc-strength-bar i {
    display: block;
    height: 5%;
    width: 0;
    border-radius: 999px;
    background: #94A3B8;
    transition: width .25s ease, background-color .25s ease;
}
.gc-strength-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #94A3B8;
}
.gc-strength.is-weak   .gc-strength-bar i { background: #FF5C7A; }
.gc-strength.is-weak   .gc-strength-label { color: #FF5C7A; }
.gc-strength.is-ok     .gc-strength-bar i { background: #F5B301; }
.gc-strength.is-ok     .gc-strength-label { color: #F5B301; }
.gc-strength.is-strong .gc-strength-bar i { background: #00E5A0; }
.gc-strength.is-strong .gc-strength-label { color: #00E5A0; }

/* ============================================================ §40 UNIFIED DASHBOARD TOP-INFO
 * One standardized "User Top Information" header (template-parts/account-topinfo.php)
 * used on every dashboard page. Namespaced under .tm-topinfo so none of the legacy
 * .account_top_information look applies; only the header-clearance margin is kept.
 * Premium trading-terminal style: dark glass cards, neon cyan, profit green.
 */
.account_top_information.tm-topinfo {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
    padding: 20px !important;
    background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92)) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--tm-shadow-d);
    overflow: visible !important;
    min-height: 0 !important;
    color: var(--tm-d-text);
    z-index: 2;
}
.account_top_information.tm-topinfo::before { display: none !important; }
.tm-topinfo .account_overlay { display: none !important; }

/* ---- LEFT: identity ---- */
.tm-topinfo__id {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex: 1 1 320px;
    min-width: 280px;
}
.tm-topinfo__avatar { position: relative; flex: 0 0 auto; }
.tm-topinfo__avatar img {
    width: 84px; height: 84px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--tm-d-border);
    box-shadow: var(--tm-glow-cyan);
    background: #0B1220;
}
.tm-topinfo__online {
    position: absolute; right: -4px; bottom: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--tm-mint);
    border: 3px solid #0B1220;
    box-shadow: 0 0 0 2px rgba(0,229,160,.35);
    animation: tmOnlinePulse 2.2s ease-in-out infinite;
}
@keyframes tmOnlinePulse { 0%,100% { box-shadow: 0 0 0 2px rgba(0,229,160,.35); } 50% { box-shadow: 0 0 0 6px rgba(0,229,160,0); } }

.tm-topinfo__idbody { min-width: 0; flex: 1 1 auto; }
.tm-topinfo__namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.tm-topinfo__name {
    margin: 0 !important;
    font-size: 20px !important; line-height: 1.2;
    font-weight: 800; color: #fff !important;
    letter-spacing: .2px;
}
.tm-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 5px 9px; border-radius: 999px;
    border: 1px solid var(--tm-d-border);
    background: var(--tm-d-surface);
    white-space: nowrap;
}
.tm-badge i { font-size: 11px; }
.tm-badge--verify   { color: var(--tm-mint); border-color: rgba(0,229,160,.35); background: rgba(0,229,160,.10); }
.tm-badge--unverify { color: var(--tm-danger); border-color: rgba(255,92,122,.35); background: rgba(255,92,122,.10); }
.tm-badge--rank     { color: #F5B301; border-color: rgba(245,179,1,.35); background: rgba(245,179,1,.10); }

.tm-topinfo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.tm-topinfo__handle { color: var(--tm-cyan); font-weight: 700; font-size: 13px; }
.tm-topinfo__uid { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-d-text-2); font-size: 13px; }
.tm-topinfo__uid b { color: var(--tm-d-text); font-family: "JetBrains Mono", ui-monospace, monospace; }
.tm-topinfo__copy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border-radius: 8px; cursor: pointer;
    border: 1px solid var(--tm-d-border);
    background: var(--tm-d-surface); color: var(--tm-cyan);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tm-topinfo__copy:hover { background: rgba(34,211,238,.14); transform: translateY(-1px); }
.tm-topinfo__copy.is-copied { color: var(--tm-mint); border-color: rgba(0,229,160,.4); background: rgba(0,229,160,.12); }

.tm-topinfo__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; color: var(--tm-d-text-2); font-size: 12.5px; }
.tm-topinfo__sub i { color: var(--tm-cyan); margin-right: 4px; }
.tm-topinfo__status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--tm-d-text-2); }
.tm-topinfo__status i { font-size: 8px; color: var(--tm-d-text-2); }
.tm-topinfo__status.is-active { color: var(--tm-mint); }
.tm-topinfo__status.is-active i { color: var(--tm-mint); }

.tm-topinfo__prog { max-width: 340px; }
.tm-topinfo__progbar { height: 7px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.tm-topinfo__progbar i { display: block; height: 100%; border-radius: 999px; background: var(--tm-grad); transition: width .6s ease; }
.tm-topinfo__progtxt { display: block; margin-top: 6px; font-size: 11.5px; color: var(--tm-d-text-2); }

/* ---- RIGHT: stats grid ---- */
.tm-topinfo__stats {
    flex: 2 1 520px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-content: stretch;
}
.tm-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(18,24,38,.85);
    border: 1px solid var(--tm-d-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 92px;
}
.tm-stat:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.4); box-shadow: var(--tm-glow-cyan); }
.tm-stat__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--tm-grad-soft); color: var(--tm-cyan);
    font-size: 13px; margin-bottom: 2px;
}
.tm-stat__label { font-size: 11.5px; color: var(--tm-d-text-2); font-weight: 600; letter-spacing: .2px; }
.tm-stat__val { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tm-stat__note { font-size: 10.5px; color: var(--tm-d-text-2); }

.tm-stat--mint   .tm-stat__ico { color: var(--tm-mint);  background: rgba(0,229,160,.14); }
.tm-stat--profit .tm-stat__ico { color: var(--tm-mint);  background: rgba(0,229,160,.14); }
.tm-stat--profit .tm-stat__val { color: var(--tm-mint); }
.tm-stat--amber  .tm-stat__ico { color: #F5B301; background: rgba(245,179,1,.14); }
.tm-stat--violet .tm-stat__ico { color: #A78BFA; background: rgba(167,139,250,.14); }

.tm-stat--roi .tm-stat__roi { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.tm-stat--roi .tm-stat__roi i { font-size: 9px; }
.tm-stat--roi.is-on  .tm-stat__ico { color: var(--tm-mint); background: rgba(0,229,160,.14); }
.tm-stat--roi.is-on  .tm-stat__roi { color: var(--tm-mint); }
.tm-stat--roi.is-off .tm-stat__ico { color: var(--tm-danger); background: rgba(255,92,122,.14); }
.tm-stat--roi.is-off .tm-stat__roi { color: var(--tm-danger); }

/* ---- tooltips (scoped) ---- */
.tm-topinfo [data-tip] { position: relative; }
.tm-topinfo [data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: #0B1220; color: #E5EEF6;
    border: 1px solid var(--tm-d-border);
    padding: 5px 9px; border-radius: 8px;
    font-size: 11px; font-weight: 600; line-height: 1;
    box-shadow: var(--tm-shadow-d);
    z-index: 40; pointer-events: none;
}

/* ============================================================ responsive */
@media (max-width: 1200px) {
    .tm-topinfo__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
    .account_top_information.tm-topinfo { flex-direction: column; }
    .tm-topinfo__id, .tm-topinfo__stats { flex: 1 1 100%; width: 100%; }
    .tm-topinfo__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .account_top_information.tm-topinfo { padding: 16px !important; gap: 16px; }
    .tm-topinfo__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tm-topinfo__avatar img { width: 72px; height: 72px; }
    .tm-topinfo__name { font-size: 18px !important; }
}
@media (max-width: 560px) {
    .tm-topinfo__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tm-topinfo__prog { max-width: 100%; }
    .tm-stat { padding: 12px; min-height: 86px; }
    .tm-stat__val { font-size: 16px; }
    .tm-topinfo [data-tip]:hover::after { display: none; }
}
@media (max-width: 380px) {
    .account_top_information.tm-topinfo { padding: 14px !important; }
    .tm-topinfo__id { gap: 12px; }
    .tm-topinfo__avatar img { width: 64px; height: 64px; }
    .tm-stat { padding: 10px; min-height: 82px; }
    .tm-stat__ico { width: 26px; height: 26px; font-size: 12px; }
    .tm-stat__val { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-topinfo__online, .tm-stat, .tm-topinfo__progbar i, .tm-topinfo__copy { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   41. PUBLIC PAGE BANNER — RESPONSIVE (About / Contact / Blog / default page)
   The internal hero (.tmh-phero) and legacy banners (.uni-banner, .ttm-page-title,
   .breadcrumbs-area, .page-header, .single-page) reserve large TOP padding to
   clear the FIXED desktop navbar. On <=991 the navbar drops into NORMAL FLOW as a
   full-width float (.cp_navi_main_wrapper.float_left = float:left;width:100%), and
   the banner block did NOT clear it, so the breadcrumb + title collapsed under /
   behind the bar ("hides on mobile/tablet"). Fix = CLEAR the float (height-
   independent) + compact padding, and let the content wrap. Presentational only.
   ========================================================================== */

/* 41.1  992-1199: fixed navbar, keep a safe clearance if the menu wraps a row. */
@media (min-width: 992px) and (max-width: 1199px) {
    .tmh-phero { padding-top: 150px; }
    .uni-banner, .breadcrumbs-area, .ttm-page-title, .single-page,
    .main-banner.services-banner, .page-header { padding-top: 150px !important; }
}

/* 41.2  <=991: navbar is an in-flow full-width float -> CLEAR it, then a compact,
   height-independent top gap so the breadcrumb always sits right under the bar. */
@media (max-width: 991px) {
    .tmh-phero,
    .uni-banner, .breadcrumbs-area, .ttm-page-title, .single-page,
    .main-banner.services-banner, .page-header {
        clear: both !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }
    .tmh-phero__inner { gap: 24px; }
    .tmh-phero__head  { flex: 1 1 100%; }
    .tmh-crumb        { flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; }
    .tmh-phero__title { margin-bottom: 10px; }
    .tmh-phero__sub   { font-size: 15px; }
    /* legacy breadcrumb lists -> wrap instead of clipping off-screen */
    .uni-banner-text ul, .breadcrumb-wrapper,
    .breadcrumbs-content ul, .page-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
}

/* 41.3  phones */
@media (max-width: 575px) {
    .tmh-phero,
    .uni-banner, .breadcrumbs-area, .ttm-page-title, .single-page,
    .main-banner.services-banner, .page-header {
        padding-top: 30px !important;
        padding-bottom: 24px !important;
    }
    .tmh-phero__title, .uni-banner-text h1, .ttm-page-title .title,
    .breadcrumbs-content h1, .page-header h3 { font-size: clamp(22px, 6.5vw, 30px) !important; }
    .tmh-crumb, .uni-banner-text ul li, .uni-banner-text ul li a { font-size: 12px; }
}

/* ============================================================ §43 KYC VERIFICATION
 * Premium dark KYC flow (kyc.php) + global withdrawal banner. Presentational only. */
.gc-kyc-wrap { max-width: 920px; margin: 20px auto 40px; padding: 0 4px; }
.gc-kyc-card {
    background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92));
    border: 1px solid var(--tm-d-border);
    border-radius: 18px;
    box-shadow: var(--tm-shadow-d);
    padding: 26px;
    margin-bottom: 18px;
    color: var(--tm-d-text);
}
.gc-kyc-h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
.gc-kyc-muted { color: var(--tm-d-text-2); font-size: 14px; line-height: 1.65; }
.gc-kyc-btn { margin-top: 18px; display: inline-block; }

/* badges */
.gc-kyc-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 8px 0; }
.gc-kyc-badge--soon    { background: rgba(148,163,184,.16); color: #94A3B8; }
.gc-kyc-badge--pending { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-kyc-badge--ok      { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-kyc-badge--bad     { background: rgba(255,92,122,.14); color: var(--tm-danger); }

/* coming-soon + state cards */
.gc-kyc-soon, .gc-kyc-state { text-align: center; }
.gc-kyc-soon h2, .gc-kyc-state h2 { color: #fff; font-size: 22px; font-weight: 800; margin: 10px 0 6px; }
.gc-kyc-soon__ico, .gc-kyc-state__ico {
    width: 72px; height: 72px; margin: 0 auto; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    background: var(--tm-grad-soft); color: var(--tm-cyan);
}
.gc-kyc-state__ico--pending { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-kyc-state__ico--ok      { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-kyc-state__ico--bad     { background: rgba(255,92,122,.14); color: var(--tm-danger); }

.gc-kyc-meta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 16px; }
.gc-kyc-meta > div { background: rgba(255,255,255,.04); border: 1px solid var(--tm-d-border); border-radius: 12px; padding: 12px 18px; min-width: 150px; }
.gc-kyc-meta span { display: block; font-size: 11.5px; color: var(--tm-d-text-2); text-transform: uppercase; letter-spacing: .03em; }
.gc-kyc-meta strong { font-size: 15px; color: #fff; }

/* step headers */
.gc-kyc-stephead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gc-kyc-stepnum { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #04121A; background: var(--tm-grad); box-shadow: var(--tm-glow-mint); }

/* agreement policy */
.gc-kyc-policy { border: 1px solid var(--tm-d-border); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); }
.gc-kyc-policy__head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--tm-d-border); background: rgba(34,211,238,.05); }
.gc-kyc-policy__logo { height: 40px; width: auto; }
.gc-kyc-policy__head h4 { margin: 0; color: #fff; font-size: 16px; font-weight: 800; }
.gc-kyc-policy__body { padding: 18px; max-height: 260px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--tm-d-text); }
.gc-kyc-policy__body::-webkit-scrollbar { width: 8px; }
.gc-kyc-policy__body::-webkit-scrollbar-thumb { background: rgba(34,211,238,.3); border-radius: 8px; }

.gc-kyc-agree-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 2px 0; font-size: 14px; color: var(--tm-d-text); cursor: pointer; }
.gc-kyc-agree-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: #22D3EE; }

/* documents grid + uploads */
.gc-kyc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.gc-kyc-uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.gc-kyc-upload {
    display: flex; flex-direction: column; gap: 6px; cursor: pointer;
    border: 1.5px dashed var(--tm-d-border); border-radius: 14px; padding: 16px; text-align: center;
    background: rgba(255,255,255,.02); transition: border-color .2s ease, background .2s ease;
}
.gc-kyc-upload:hover { border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.05); }
.gc-kyc-upload__label { font-weight: 700; color: #fff; font-size: 13.5px; }
.gc-kyc-upload__label i { color: var(--tm-cyan); margin-right: 5px; }
.gc-kyc-upload__hint { font-size: 11.5px; color: var(--tm-d-text-2); }
.gc-kyc-upload input[type=file] { font-size: 12px; color: var(--tm-d-text-2); }
.gc-kyc-upload__pv { display: none; width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-top: 6px; border: 1px solid var(--tm-d-border); }

/* approved certificate preview */
.gc-kyc-cert-preview { border: 1px solid var(--tm-d-border); border-radius: 14px; padding: 18px; background: rgba(255,255,255,.02); }
.gc-kyc-cert-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gc-kyc-cert-pic { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--tm-d-border); }
.gc-kyc-cert-agree { font-size: 13px; color: var(--tm-d-text-2); line-height: 1.6; margin-bottom: 14px; }
.gc-kyc-imgrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gc-kyc-imgrow figure { margin: 0; }
.gc-kyc-imgrow img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; border: 1px solid var(--tm-d-border); }
.gc-kyc-imgrow figcaption { text-align: center; font-size: 12px; color: var(--tm-d-text-2); margin-top: 5px; }

/* global withdrawal banner */
#gc-kyc-banner {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 99980; width: calc(100% - 32px); max-width: 620px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(18,24,38,.98), rgba(9,14,24,.98));
    border: 1px solid rgba(245,179,1,.4); box-shadow: 0 18px 50px rgba(0,0,0,.55);
    color: #E5EEF6;
}
.gc-kyc-banner__ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(245,179,1,.16); color: #F5B301; }
.gc-kyc-banner__txt { flex: 1 1 auto; font-size: 13.5px; line-height: 1.4; }
.gc-kyc-banner__btn { flex: 0 0 auto; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; text-decoration: none; color: #04121A !important; background: linear-gradient(120deg, #F5B301, #FFCE4D); }
.gc-kyc-banner__x { background: none; border: none; color: #94A3B8; font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; }

/* responsive */
@media (max-width: 768px) {
    .gc-kyc-card { padding: 20px; }
    .gc-kyc-grid2 { grid-template-columns: 1fr; }
    .gc-kyc-uploads { grid-template-columns: 1fr; }
    .gc-kyc-imgrow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .gc-kyc-wrap { margin-top: 14px; }
    .gc-kyc-card { padding: 16px; border-radius: 14px; }
    .gc-kyc-policy__head { flex-wrap: wrap; }
    .gc-kyc-meta > div { min-width: 0; flex: 1 1 40%; }
    .gc-kyc-imgrow { grid-template-columns: 1fr; }
    #gc-kyc-banner { flex-wrap: wrap; bottom: 10px; }
    .gc-kyc-banner__txt { flex: 1 1 100%; order: 2; }
}


/* ============================================================ §44 KYC CHIP + SUPPORT */
/* KYC status chip in the top-info card */
.tm-kyc-chip { text-decoration: none !important; }
.tm-kyc-chip--ok      { color: var(--tm-mint); border-color: rgba(0,229,160,.35); background: rgba(0,229,160,.10); }
.tm-kyc-chip--pending { color: #F5B301; border-color: rgba(245,179,1,.35); background: rgba(245,179,1,.10); }
.tm-kyc-chip--bad     { color: var(--tm-danger); border-color: rgba(255,92,122,.35); background: rgba(255,92,122,.10); }
.tm-kyc-chip--none    { color: #94A3B8; border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.12); }
.tm-kyc-chip--soon    { color: #94A3B8; border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.12); }

/* Support page */
.gc-sup-wrap { max-width: 940px; margin: 20px auto 40px; padding: 0 4px; }
.gc-sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .gc-sup-grid { grid-template-columns: 1fr; } }
.gc-sup-card {
    background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92));
    border: 1px solid var(--tm-d-border); border-radius: 16px; box-shadow: var(--tm-shadow-d);
    padding: 22px; margin-bottom: 18px; color: var(--tm-d-text);
}
.gc-sup-h2 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.gc-sup-muted { color: var(--tm-d-text-2); font-size: 13px; }
.gc-sup-btn { margin-top: 14px; }
.gc-sup-back { color: var(--tm-cyan); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 10px; }
.gc-sup-thead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gc-sup-thead h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; }
.gc-sup-meta { color: var(--tm-d-text-2); font-size: 13px; margin: 6px 0 14px; }

.gc-sup-list { display: flex; flex-direction: column; gap: 10px; }
.gc-sup-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,.03); border: 1px solid var(--tm-d-border);
    transition: border-color .2s ease, background .2s ease;
}
.gc-sup-item:hover { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.05); }
.gc-sup-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-sup-item__main strong { color: #fff; }

.gc-sup-chip { flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.gc-sup-chip--open     { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-sup-chip--reopened { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-sup-chip--closed   { background: rgba(148,163,184,.16); color: #94A3B8; }

.gc-sup-thread { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 18px; }
.gc-sup-msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tm-d-border); }
.gc-sup-msg--user  { background: rgba(255,255,255,.03); }
.gc-sup-msg--admin { background: rgba(34,211,238,.07); border-color: rgba(34,211,238,.28); }
.gc-sup-msg__head { font-size: 12px; color: var(--tm-d-text-2); margin-bottom: 6px; }
.gc-sup-msg__head strong { color: #fff; }
.gc-sup-msg__body { font-size: 14px; line-height: 1.6; color: var(--tm-d-text); }
.gc-sup-reply textarea { width: 100%; }
.gc-sup-closed { color: #F5B301; font-size: 13px; margin: 6px 0; }

@media (max-width: 480px) {
    .gc-sup-wrap { margin-top: 14px; }
    .gc-sup-card { padding: 16px; }
}


/* ============================================================ §45 WALLET LEDGER / PORTFOLIO */
.gc-led-wrap { max-width: 1040px; margin: 20px auto 40px; padding: 0 4px; }
.gc-led-card {
    /* background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92)); */
    border: 1px solid var(--tm-d-border); border-radius: 16px; box-shadow: var(--tm-shadow-d);
    padding: 22px; margin-bottom: 18px; color: var(--tm-d-text);
}
.gc-led-h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.gc-led-h3 i { color: var(--tm-cyan); margin-right: 7px; }
.gc-led-muted { color: var(--tm-d-text-2); font-size: 13px; margin: 0 0 14px; }
.gc-led-empty { color: var(--tm-d-text-2); text-align: center; padding: 18px 0; }

.gc-led-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gc-led-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.gc-led-table th { text-align: left; color: var(--tm-d-text-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--tm-d-border); white-space: nowrap; }
.gc-led-table td { padding: 11px 12px; border-bottom: 1px solid rgba(148,163,184,.1); color: var(--tm-d-text); vertical-align: middle; }
.gc-led-table tr:hover td { background: rgba(34,211,238,.04); }
.gc-led-table .ta-r { text-align: right; }
.gc-led-table code { color: var(--tm-cyan); background: rgba(34,211,238,.08); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.gc-led-cr { color: var(--tm-mint); font-weight: 600; }
.gc-led-dr { color: var(--tm-danger); font-weight: 600; }
.gc-led-new { color: #F5B301; font-size: 11px; font-weight: 700; margin-left: 6px; }

.gc-led-st { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.gc-led-st--available, .gc-led-st--approved, .gc-led-st--credited, .gc-led-st--success, .gc-led-st--paid { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-led-st--pending { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-led-st--rejected, .gc-led-st--failed { background: rgba(255,92,122,.14); color: var(--tm-danger); }

/* portfolio cards */
.gc-port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gc-port-card { background: rgba(255,255,255,.03); border: 1px solid var(--tm-d-border); border-radius: 14px; padding: 16px; }
.gc-port-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gc-port-num { font-size: 12px; color: var(--tm-d-text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.gc-port-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.gc-port-badge--on { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-port-badge--off { background: rgba(148,163,184,.16); color: #94A3B8; }
.gc-port-amt { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.gc-port-dates { display: flex; justify-content: space-between; font-size: 12px; color: var(--tm-d-text-2); margin-bottom: 10px; }
.gc-port-bar { height: 8px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.gc-port-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tm-grad); transition: width .6s ease; }
.gc-port-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--tm-d-text-2); margin-top: 7px; }

@media (max-width: 600px) {
    .gc-led-card { padding: 16px; }
    .gc-port-grid { grid-template-columns: 1fr; }
}


/* ============================================================ §46 RETURN POLICY */
.gc-rp-wrap { max-width: 900px; margin: 20px auto 40px; padding: 0 4px; }
.gc-rp-card {
    background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92));
    border: 1px solid var(--tm-d-border); border-radius: 16px; box-shadow: var(--tm-shadow-d);
    padding: 24px; margin-bottom: 18px; color: var(--tm-d-text);
}
.gc-rp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gc-rp-head h2 { margin: 0; color: #fff; font-size: 19px; font-weight: 800; }
.gc-rp-step { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #04121A; background: var(--tm-grad); }
.gc-rp-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tm-cyan); margin: 18px 0 10px; }
.gc-rp-h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.gc-rp-h3 i { color: var(--tm-cyan); margin-right: 7px; }
.gc-rp-muted { color: var(--tm-d-text-2); font-size: 14px; line-height: 1.65; }
.gc-rp-btn { margin-top: 16px; }

.gc-rp-policy p { color: var(--tm-d-text); font-size: 14.5px; line-height: 1.7; }
.gc-rp-policy ul { margin: 10px 0; padding-left: 20px; }
.gc-rp-policy li { color: var(--tm-d-text-2); font-size: 14px; line-height: 1.9; }
.gc-rp-policy li strong { color: #fff; }
.gc-rp-quote { margin-top: 14px; padding: 14px 16px; border-left: 3px solid #F5B301; background: rgba(245,179,1,.08); border-radius: 8px; color: #EAD9A8; font-size: 13.5px; line-height: 1.6; }

.gc-rp-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 2px 0; font-size: 14px; color: var(--tm-d-text); cursor: pointer; }
.gc-rp-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: #22D3EE; }
.gc-rp-check[hidden], .gc-rp-check input[hidden] { display: none; }

.gc-rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .gc-rp-grid2 { grid-template-columns: 1fr; } }

.gc-rp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gc-rp-summary > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--tm-d-border); border-radius: 12px; }
.gc-rp-summary span { color: var(--tm-d-text-2); font-size: 13px; }
.gc-rp-summary b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.gc-rp-summary .gc-rp-neg b { color: var(--tm-danger); }
.gc-rp-summary .gc-rp-final { grid-column: 1 / -1; border-color: rgba(0,229,160,.4); background: rgba(0,229,160,.08); }
.gc-rp-summary .gc-rp-final span { color: #fff; font-weight: 700; }
.gc-rp-summary .gc-rp-final b { color: var(--tm-mint); font-size: 20px; }
@media (max-width: 640px) { .gc-rp-summary { grid-template-columns: 1fr; } }

/* state cards */
.gc-rp-state { text-align: center; }
.gc-rp-state h2 { margin: 10px 0 6px; }
.gc-rp-ico { width: 70px; height: 70px; margin: 0 auto; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.gc-rp-ico--exit { background: rgba(255,92,122,.14); color: var(--tm-danger); }
.gc-rp-ico--pending { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-rp-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12px; text-transform: uppercase; margin: 8px 0; }
.gc-rp-badge--exit { background: rgba(255,92,122,.14); color: var(--tm-danger); }
.gc-rp-badge--pending { background: rgba(245,179,1,.14); color: #F5B301; }

/* history table */
.gc-rp-scroll { overflow-x: auto; }
.gc-rp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.gc-rp-table th { text-align: left; color: var(--tm-d-text-2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--tm-d-border); }
.gc-rp-table td { padding: 11px 12px; border-bottom: 1px solid rgba(148,163,184,.1); color: var(--tm-d-text); }
.gc-rp-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.gc-rp-st--pending { background: rgba(245,179,1,.14); color: #F5B301; }
.gc-rp-st--approved { background: rgba(34,113,177,.16); color: #7cc0ff; }
.gc-rp-st--paid { background: rgba(0,229,160,.14); color: var(--tm-mint); }
.gc-rp-st--rejected { background: rgba(255,92,122,.14); color: var(--tm-danger); }

@media (max-width: 480px) { .gc-rp-wrap { margin-top: 14px; } .gc-rp-card { padding: 18px; } }


/* ============================================================ §47 HOME "HOW IT WORKS" PREMIUM PILLS
 * Additive polish for the home How-It-Works steps (complements §16-18 which only
 * set text/icon colour). Presentational only. */
.work_checklist_wrapper { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-left: 0; list-style: none; }
.work_checklist_wrapper li { list-style: none; }
.work_checklist_wrapper li a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(110,231,240,.16);
    font-weight: 600; font-size: 15px;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.work_checklist_wrapper li a:hover {
    transform: translateX(5px);
    border-color: rgba(34,211,238,.5);
    background: rgba(34,211,238,.07);
}
.work_checklist_wrapper li a i {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, rgba(34,211,238,.18), rgba(0,229,160,.18));
    font-size: 17px;
}
@media (max-width: 575px) {
    .work_checklist_wrapper li a { font-size: 14px; padding: 12px 14px; }
    .work_checklist_wrapper li a i { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
}


/* ============================================================ §48 DAILY-EARNING CLAIM BAR (above calendar) */
.tm-claimbar {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center; margin: 4px 0 22px;
    padding: 20px; border-radius: 16px;
    background: linear-gradient(160deg, rgba(18,24,38,.92), rgba(9,14,24,.92));
    border: 1px solid var(--tm-d-border); box-shadow: var(--tm-shadow-d);
}
.tm-claimbtn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 800; letter-spacing: .2px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tm-claimbtn i { font-size: 17px; }
.tm-claimbtn.is-ready {
    color: #04121A; background: linear-gradient(120deg, #22D3EE, #00E5A0);
    box-shadow: 0 10px 30px rgba(0,229,160,.34);
}
.tm-claimbtn.is-ready:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,229,160,.46); filter: brightness(1.05); }
.tm-claimbtn.is-done {
    color: var(--tm-mint); background: rgba(0,229,160,.12);
    border: 1px solid rgba(0,229,160,.4); box-shadow: none;
}
.tm-claimbtn.is-locked {
    color: #94A3B8; background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.28); box-shadow: none;
}
.tm-claimbar__note { color: var(--tm-d-text-2); font-size: 12.5px; line-height: 1.6; max-width: 720px; }
.tm-claimbar__note strong { color: #fff; }
.tm-claimbar__locked {
    padding: 12px 18px; border-radius: 12px; font-size: 14px;
    color: #F5B301; background: rgba(245,179,1,.10); border: 1px solid rgba(245,179,1,.32);
}
@media (max-width: 575px) {
    .tm-claimbar { padding: 16px; }
    .tm-claimbtn { padding: 13px 22px; font-size: 15px; width: 100%; justify-content: center; }
}


/* ============================================================ §49 hide the daily-earning stats row
 * User request: remove the stat cards (Deposit Date, Expiry, ROI Period, Trading
 * Days, Claimed/Missed/Remaining, Total Earned, Current ROI) under the "Daily
 * Earnings Tracker" heading. Heading + month arrows + the calendar stay. The PHP
 * that computes those values still runs (some vars feed the calendar), only the
 * presentational row is hidden. */
.tm-cal__stats { display: none !important; }

/* ============================================================ §50 CRYPTO DEPOSIT — company wallet address box
 * Used by the "Deposit From USD Account" form: when a user picks a currency
 * (BTC/ETH/USDT) the admin-configured company wallet is shown with a Copy
 * button. Dark premium look, fully responsive. Presentational only. */
.gc-md-wallet {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
    margin-top: 4px;
}
.gc-md-wallet__addr {
    flex: 1 1 240px; min-width: 0;
    display: block; padding: 12px 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13.5px; line-height: 1.5; color: #E7ECF5; word-break: break-all;
    background: rgba(9,14,24,.9); border: 1px solid var(--tm-d-border, #2a3550);
    border-radius: 12px;
}
.gc-md-wallet__copy {
    flex: 0 0 auto; padding: 0 22px; min-height: 44px;
    border: none; border-radius: 12px; cursor: pointer;
    font-size: 13px; font-weight: 800; letter-spacing: .6px; color: #04121A;
    background: linear-gradient(120deg, #22D3EE, #00E5A0);
    box-shadow: 0 8px 22px rgba(0,229,160,.30);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.gc-md-wallet__copy:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,229,160,.42); filter: brightness(1.05); }
.gc-md-wallet__copy:active { transform: translateY(0); }
.gc-md-wallet__msg {
    display: none; margin-top: 8px; padding: 8px 12px; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; color: #00E5A0;
    background: rgba(0,229,160,.12); border: 1px solid rgba(0,229,160,.34);
}
.gc-md-wallet__none {
    display: none; margin-top: 8px; font-size: 12.5px; color: #F5B301;
}
@media (max-width: 575px) {
    .gc-md-wallet__copy { flex: 1 1 100%; padding: 12px; }
}

/* ============================================================ §51 PASSWORD SHOW / HIDE TOGGLE
 * The eye button is injected by tradme-modern.js next to every password input
 * (login, registration, forgot-password reset, change password). Vertical
 * centering works for both the Bootstrap .form-control and the pill-shaped
 * .change_field inputs. Presentational only. */
.gc-pw-wrap { position: relative; display: block; width: 100%; }
.gc-pw-wrap > input { width: 100%; padding-right: 48px !important; }
/* Hide the browser's own password reveal control so it can't double up with ours. */
.gc-pw-wrap > input::-ms-reveal,
.gc-pw-wrap > input::-ms-clear { display: none; }
.gc-pw-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    height: 38px; width: 40px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; border: none; border-radius: 50%;
    background: transparent; cursor: pointer;
    color: #94A3B8; font-size: 16px; line-height: 1;
    transition: color .15s ease, background .15s ease;
}
.gc-pw-toggle:hover { color: #22D3EE; background: rgba(34,211,238,.10); }
.gc-pw-toggle:focus { outline: none; color: #22D3EE; }
.gc-pw-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(34,211,238,.45); }
.gc-pw-toggle i {
    pointer-events: none;
    position: revert;
}
/* ============================================================ §52 AUTH + RETURN card fixes
 * (a) Login/auth cards: the submit button lives in .about_btn.login_btn.float_left
 *     (floated). Status alerts (email verified / reset success) rendered AFTER it
 *     were overlapping the floated button and blocking clicks. Clear the float so
 *     alerts sit BELOW the button and it stays clickable (desktop + mobile). */
.login_form_wrapper .alert { clear: both; position: relative; }
.login_form_wrapper .about_btn { margin-bottom: 10px; }

/* (b) Return-policy state cards (Under Review / Investment Returned): the <h2>
 *     heading had no colour → rendered dark/invisible on the dark card. */
.gc-rp-card h2, .gc-rp-state h2 { color: #fff !important; }