/* =====================================================================
   TRADRLX DESIGN OVERLAY
   Loaded after main.css + custom.css to retokenize and modernize the UI.
   Built on top of the existing HSL token system in main.css.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

:root {
    /* ---------- Typography ---------- */
    --heading-font: "Outfit", "Inter", sans-serif;
    --body-font: "Inter", system-ui, -apple-system, sans-serif;

    --heading-one: clamp(2.25rem, 3vw + 1rem, 4.75rem);
    --heading-two: clamp(1.75rem, 1.8vw + 1rem, 3.25rem);
    --heading-three: clamp(1.5rem, 1.4vw + 1rem, 2.5rem);
    --heading-four: clamp(1.25rem, .55vw + 1rem, 1.625rem);
    --heading-five: clamp(1.0625rem, .3vw + 1rem, 1.25rem);

    /* ---------- Brand palette (indigo + emerald) ---------- */
    --base-h: 226;
    --base-s: 100%;
    --base-l: 59%;          /* #2E5BFF */

    --base-two-h: 160;
    --base-two-s: 84%;
    --base-two-l: 39%;      /* #10B981 */

    /* Status */
    --tx-success-h: 152; --tx-success-s: 69%; --tx-success-l: 41%;
    --tx-danger-h: 0;    --tx-danger-s: 84%;  --tx-danger-l: 60%;   /* #EF4444 */
    --tx-warning-h: 38;  --tx-warning-s: 92%; --tx-warning-l: 50%;
    --tx-info-h: 199;    --tx-info-s: 89%;    --tx-info-l: 48%;

    /* Surfaces — light theme */
    --tx-bg: 220 33% 98%;          /* page background */
    --tx-surface: 0 0% 100%;       /* cards / panels */
    --tx-surface-2: 220 25% 96%;   /* subtle */
    --tx-border: 220 15% 90%;
    --tx-text: 222 22% 12%;
    --tx-text-soft: 222 12% 42%;

    /* Radius / shadow scale */
    --tx-r-sm: 8px;
    --tx-r-md: 12px;
    --tx-r-lg: 16px;
    --tx-r-xl: 24px;

    --tx-shadow-xs: 0 1px 2px hsl(222 22% 12% / .06);
    --tx-shadow-sm: 0 2px 6px hsl(222 22% 12% / .06), 0 1px 2px hsl(222 22% 12% / .04);
    --tx-shadow-md: 0 8px 24px hsl(222 22% 12% / .08), 0 2px 6px hsl(222 22% 12% / .04);
    --tx-shadow-lg: 0 20px 50px hsl(226 60% 30% / .18);

    /* Gradients */
    --tx-gradient-brand: linear-gradient(135deg, hsl(226 100% 64%) 0%, hsl(252 95% 62%) 100%);
    --tx-gradient-accent: linear-gradient(135deg, hsl(160 84% 45%) 0%, hsl(190 90% 50%) 100%);
    --tx-gradient-hero: radial-gradient(1200px 600px at 80% -10%, hsl(226 100% 65% / .25), transparent 60%),
                        radial-gradient(900px 500px at -10% 100%, hsl(160 84% 45% / .18), transparent 60%);

    /* Rebind existing main.css tokens */
    --section-bg: var(--tx-bg);
    --border-color: var(--tx-border);
    --body-background: var(--tx-bg);
    --heading-color: var(--tx-text);
    --body-color: var(--tx-text-soft);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
    --tx-bg: 224 39% 6%;          /* near-black blue */
    --tx-surface: 224 33% 10%;
    --tx-surface-2: 224 30% 14%;
    --tx-border: 224 22% 20%;
    --tx-text: 220 25% 96%;
    --tx-text-soft: 220 12% 70%;

    --section-bg: var(--tx-bg);
    --border-color: var(--tx-border);
    --body-background: var(--tx-bg);
    --heading-color: var(--tx-text);
    --body-color: var(--tx-text-soft);

    --tx-shadow-md: 0 8px 24px hsl(222 80% 4% / .55), 0 2px 6px hsl(222 80% 4% / .35);
    --tx-shadow-lg: 0 24px 60px hsl(226 80% 4% / .65);
}

/* =====================================================================
   Global base
   ===================================================================== */
html { scroll-behavior: smooth; }

body {
    font-family: var(--body-font);
    background: hsl(var(--tx-bg));
    color: hsl(var(--tx-text-soft));
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text));
    letter-spacing: -0.02em;
    font-weight: 700;
}

p { color: hsl(var(--tx-text-soft)); line-height: 1.65; }

a { transition: color .2s ease; }
a:hover { color: hsl(var(--base-l-100)); }

::selection { background: hsl(var(--base) / .25); color: hsl(var(--tx-text)); }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    border-radius: var(--tx-r-md);
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 12px 22px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 8px 16px; font-size: .9rem; }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--pill { border-radius: 999px; }

.btn--base,
.btn-primary,
.bg--base {
    background: var(--tx-gradient-brand) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px hsl(var(--base) / .35);
}
.btn--base:hover,
.btn-primary:hover {
    box-shadow: 0 10px 28px hsl(var(--base) / .45);
    color: #fff !important;
}

.btn--outline,
.btn-outline-primary {
    background: transparent !important;
    color: hsl(var(--base)) !important;
    border: 1px solid hsl(var(--base) / .35) !important;
}
.btn--outline:hover,
.btn-outline-primary:hover {
    background: hsl(var(--base) / .08) !important;
    border-color: hsl(var(--base)) !important;
    color: hsl(var(--base)) !important;
}

.btn--success,
.btn-success { background: hsl(var(--base-two)) !important; border-color: hsl(var(--base-two)) !important; color: #fff !important; }
.btn--danger,
.btn-danger  { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; border: none !important; color: #fff !important; }

/* =====================================================================
   Forms
   ===================================================================== */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    color: hsl(var(--tx-text)) !important;
    border-radius: var(--tx-r-md) !important;
    padding: 12px 16px !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: none !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: hsl(var(--base) / .6) !important;
    box-shadow: 0 0 0 4px hsl(var(--base) / .15) !important;
    outline: none !important;
}
.form-label, label { color: hsl(var(--tx-text)); font-weight: 500; }
::placeholder { color: hsl(var(--tx-text-soft) / .8) !important; }

/* =====================================================================
   Cards / panels
   ===================================================================== */
.card,
.custom-card,
.dashboard-w,
.dashboard-card,
.card--style,
.feature-card,
.choose-card,
.invest-card,
.faq-card,
.crypto-card,
.blog-card,
.coin-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    box-shadow: var(--tx-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover,
.choose-card:hover,
.feature-card:hover,
.invest-card:hover,
.crypto-card:hover,
.blog-card:hover,
.coin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tx-shadow-md);
    border-color: hsl(var(--base) / .35);
}

.section-bg, .bg--section { background: hsl(var(--tx-surface-2)) !important; }
.section-bg-two { background: hsl(var(--tx-bg)) !important; }

/* =====================================================================
   Header / navigation
   ===================================================================== */
.header {
    background: hsl(var(--tx-bg) / .72) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid hsl(var(--tx-border) / .6);
    box-shadow: none !important;
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.header.scrolled,
.header.fixed-header,
.fixed-menu .header {
    background: hsl(var(--tx-bg) / .92) !important;
    box-shadow: var(--tx-shadow-sm) !important;
}
.navbar-brand.logo img { max-height: 38px; }

.nav-menu .nav-link {
    color: hsl(var(--tx-text)) !important;
    font-weight: 500;
    padding: 10px 14px !important;
    border-radius: var(--tx-r-sm);
    transition: background .2s ease, color .2s ease;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-item.active .nav-link {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / .08);
}

.login-registration-list .sign-in {
    color: hsl(var(--tx-text)) !important;
    font-weight: 500;
    margin-right: 8px;
}
.login-registration-list .sign-in:hover { color: hsl(var(--base)) !important; }

/* =====================================================================
   Hero / banner
   ===================================================================== */
.banner-section {
    position: relative;
    padding: 140px 0 100px !important;
    background:
        var(--tx-gradient-hero),
        hsl(var(--tx-bg));
    overflow: hidden;
}
.banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(hsl(var(--tx-border) / .35) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--tx-border) / .35) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    pointer-events: none;
}
.banner-section__shape-one { display: none !important; }
.banner-section .container { position: relative; z-index: 1; }

.banner-content__title {
    font-size: var(--heading-one);
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg, hsl(var(--tx-text)) 0%, hsl(var(--tx-text) / .75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.banner-content__title .highlighted,
.banner-content__title span {
    background: var(--tx-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.banner-content__desc {
    font-size: clamp(1rem, .25vw + 1rem, 1.15rem);
    color: hsl(var(--tx-text-soft));
    margin-bottom: 2rem;
    max-width: 560px;
}

.banner-right__thumb img,
.banner-right__shape img {
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-lg);
}
.banner-right__bg .bg { display: none; }

.single-slider {
    margin-top: 3rem;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 14px 22px;
    box-shadow: var(--tx-shadow-sm);
}
.single-slider__item { display: flex; align-items: center; }
.single-slider__desc { color: hsl(var(--tx-text)); font-weight: 500; }
.badge--success {
    background: hsl(var(--base-two) / .12) !important;
    color: hsl(var(--base-two)) !important;
    border-radius: 999px;
    padding: 4px 10px;
    margin-right: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}
.single-slider__link {
    color: hsl(var(--base)) !important;
    font-weight: 600;
    margin-left: 10px;
}

/* =====================================================================
   Section heading
   ===================================================================== */
.section-heading,
.section--title,
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.section-heading__title,
.section--title__heading,
.section-header__title {
    font-size: var(--heading-two);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: .75rem;
}
.section-heading__subtitle,
.section--title__subtitle {
    color: hsl(var(--tx-text-soft));
    max-width: 640px;
    margin: 0 auto;
}

section { padding: clamp(60px, 8vw, 110px) 0; }

/* =====================================================================
   Coin pair / market tables
   ===================================================================== */
.table {
    --bs-table-bg: transparent;
    color: hsl(var(--tx-text));
}
.table thead th {
    background: hsl(var(--tx-surface-2)) !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .78rem;
    border: none !important;
    padding: 14px 16px;
}
.table tbody td {
    border-color: hsl(var(--tx-border)) !important;
    padding: 14px 16px;
    vertical-align: middle;
}
.table tbody tr {
    transition: background .15s ease;
}
.table tbody tr:hover { background: hsl(var(--base) / .04) !important; }

.text--success, .text-success, .price-up { color: hsl(var(--base-two)) !important; font-weight: 600; }
.text--danger,  .text-danger,  .price-down { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; font-weight: 600; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer-section,
footer.footer {
    background: hsl(var(--tx-surface-2)) !important;
    color: hsl(var(--tx-text-soft));
    border-top: 1px solid hsl(var(--tx-border));
    padding: 80px 0 24px;
}
[data-theme="dark"] .footer-section,
[data-theme="dark"] footer.footer {
    background: hsl(224 45% 4%) !important;
}
.footer-section a,
.footer .footer-widget__link {
    color: hsl(var(--tx-text-soft)) !important;
}
.footer-section a:hover {
    color: hsl(var(--base-l-100)) !important;
}
.footer-widget__title,
.footer-section h3, .footer-section h4 {
    color: hsl(var(--tx-text)) !important;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.footer-bottom,
.copyright-area {
    border-top: 1px solid hsl(var(--tx-border));
    margin-top: 48px;
    padding-top: 24px;
    text-align: center;
}

/* =====================================================================
   Stat strip (used on hero / trust band — optional markup hook)
   ===================================================================== */
.tx-trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    padding: 32px;
    border-radius: var(--tx-r-lg);
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    box-shadow: var(--tx-shadow-sm);
    margin-top: 48px;
}
.tx-trust-strip .stat__value {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
    color: hsl(var(--tx-text));
    background: var(--tx-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.tx-trust-strip .stat__label {
    color: hsl(var(--tx-text-soft));
    font-size: .9rem;
    margin-top: 6px;
}

/* =====================================================================
   Feature / choose-us cards
   ===================================================================== */
.choose-card, .feature-card, .invest-card {
    padding: 28px;
}
.choose-card__icon, .feature-card__icon, .invest-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--tx-r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: hsl(var(--base) / .12);
    color: hsl(var(--base));
    font-size: 26px;
    margin-bottom: 18px;
}
.choose-card__title, .feature-card__title, .invest-card__title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

/* =====================================================================
   Auth / login / register
   ===================================================================== */
.account-section,
.login-section,
.register-section {
    min-height: 100vh;
    background:
        var(--tx-gradient-hero),
        hsl(var(--tx-bg));
}
.account-form-wrapper,
.account-card,
.auth-card,
.login-card,
.register-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-md);
    padding: 40px;
}

/* =====================================================================
   User dashboard
   ===================================================================== */
.user-sidebar,
.dashboard-sidebar {
    background: hsl(var(--tx-surface)) !important;
    border-right: 1px solid hsl(var(--tx-border)) !important;
}
.user-sidebar a,
.dashboard-sidebar a {
    color: hsl(var(--tx-text-soft)) !important;
    border-radius: var(--tx-r-sm);
    transition: background .2s ease, color .2s ease;
}
.user-sidebar a.active,
.user-sidebar a:hover,
.dashboard-sidebar a.active,
.dashboard-sidebar a:hover {
    background: hsl(var(--base) / .1) !important;
    color: hsl(var(--base)) !important;
}

.dashboard-card,
.user-card {
    border-radius: var(--tx-r-lg);
    padding: 24px;
}
.balance-card {
    background: var(--tx-gradient-brand) !important;
    color: #fff !important;
    border: none !important;
}
.balance-card * { color: #fff !important; }

/* =====================================================================
   P2P
   ===================================================================== */
.p2p-card, .p2p-trade-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    box-shadow: var(--tx-shadow-sm);
}

/* =====================================================================
   Misc polish
   ===================================================================== */
.scroll-top {
    background: var(--tx-gradient-brand) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: var(--tx-shadow-md);
    border: none !important;
}

.cookies-card {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-lg) !important;
    box-shadow: var(--tx-shadow-md) !important;
}

.preloader-wrapper { background: hsl(var(--tx-bg)) !important; }
.preloader .dot { background: hsl(var(--base)) !important; }

/* Theme switch polish */
.theme-switch .slider {
    background: hsl(var(--tx-surface-2)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
}

/* Pagination */
.pagination .page-link {
    border-radius: var(--tx-r-sm) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    color: hsl(var(--tx-text)) !important;
    background: hsl(var(--tx-surface)) !important;
    margin: 0 3px;
}
.pagination .page-item.active .page-link {
    background: var(--tx-gradient-brand) !important;
    border: none !important;
    color: #fff !important;
}

/* Breadcrumb / page banner */
.breadcrumb-section,
.inner-banner {
    background:
        var(--tx-gradient-hero),
        hsl(var(--tx-bg)) !important;
    padding: 100px 0 70px !important;
}

/* Tag chips */
.badge {
    border-radius: 999px;
    padding: .35em .8em;
    font-weight: 600;
}

/* Section dividers visual polish */
hr { border-color: hsl(var(--tx-border)); opacity: 1; }

/* Mega menu styling */
.mega-menu {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-lg) !important;
    box-shadow: var(--tx-shadow-md) !important;
    padding: 20px !important;
}
.mega-menu-list__item:hover {
    background: hsl(var(--base) / .06) !important;
    border-radius: var(--tx-r-md);
}
.mega-menu-list__title {
    color: hsl(var(--tx-text)) !important;
    font-weight: 600;
}
.mega-menu-list__desc { color: hsl(var(--tx-text-soft)) !important; }

/* Responsive hero tweaks */
@media (max-width: 991px) {
    .banner-section { padding: 110px 0 70px !important; }
    .banner-right { margin-top: 40px; }
}

/* =====================================================================
   Broker redesign extensions
   ===================================================================== */

/* ----- Market ticker tape (sits just below the header) ----- */
.tx-ticker-tape {
    background: hsl(var(--tx-surface));
    border-top: 1px solid hsl(var(--tx-border));
    border-bottom: 1px solid hsl(var(--tx-border));
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.tx-ticker-tape__track {
    display: flex;
    gap: 48px;
    width: max-content;
    padding: 12px 0;
    animation: tx-marquee 80s linear infinite;
}
.tx-ticker-tape:hover .tx-ticker-tape__track { animation-play-state: paused; }
.tx-ticker-tape__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: hsl(var(--tx-text));
    white-space: nowrap;
}
.tx-ticker-tape__item .symbol {
    font-weight: 700;
    letter-spacing: .02em;
}
.tx-ticker-tape__item .price { color: hsl(var(--tx-text-soft)); }
.tx-ticker-tape__item.up .change { color: hsl(var(--base-two)); font-weight: 600; }
.tx-ticker-tape__item.down .change { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); font-weight: 600; }
.tx-ticker-tape__dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: hsl(var(--tx-border));
}
@keyframes tx-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ----- Hero ticker card row (industry-standard broker hero affordance) ----- */
.tx-hero-tickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-top: 2rem;
}
.tx-ticker-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--tx-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.tx-ticker-card:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--tx-shadow-md);
}
.tx-ticker-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tx-ticker-card__sym {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    letter-spacing: -.01em;
}
.tx-ticker-card__name {
    font-size: .78rem;
    color: hsl(var(--tx-text-soft));
    text-transform: uppercase;
    letter-spacing: .06em;
}
.tx-ticker-card__price {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.4rem;
    color: hsl(var(--tx-text));
    line-height: 1.1;
}
.tx-ticker-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .85rem;
    padding: 4px 10px;
    border-radius: 999px;
    margin-top: 6px;
}
.tx-ticker-card.up .tx-ticker-card__delta {
    color: hsl(var(--base-two));
    background: hsl(var(--base-two) / .12);
}
.tx-ticker-card.down .tx-ticker-card__delta {
    color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l));
    background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12);
}
.tx-ticker-card__spark {
    position: absolute;
    right: -10px;
    bottom: -8px;
    width: 110px;
    height: 44px;
    opacity: .8;
    pointer-events: none;
}

/* ----- Tabbed instrument table ----- */
.tx-instruments {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-md);
    overflow: hidden;
}
.tx-instruments__tabs {
    display: flex;
    gap: 4px;
    padding: 12px 12px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid hsl(var(--tx-border));
}
.tx-instruments__tab {
    border: none;
    background: transparent;
    color: hsl(var(--tx-text-soft));
    font-weight: 600;
    font-size: .92rem;
    padding: 10px 16px;
    border-radius: var(--tx-r-md) var(--tx-r-md) 0 0;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    position: relative;
    bottom: -1px;
}
.tx-instruments__tab:hover { color: hsl(var(--tx-text)); }
.tx-instruments__tab.is-active {
    color: hsl(var(--base));
    background: hsl(var(--base) / .08);
    border-bottom: 2px solid hsl(var(--base));
}
.tx-instruments__panel {
    display: none;
    padding: 0;
}
.tx-instruments__panel.is-active { display: block; }
.tx-instruments table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.tx-instruments thead th {
    background: transparent !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 14px 20px;
    border-bottom: 1px solid hsl(var(--tx-border));
    font-weight: 600;
    text-align: left;
}
.tx-instruments tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid hsl(var(--tx-border) / .7);
    vertical-align: middle;
}
.tx-instruments tbody tr:last-child td { border-bottom: none; }
.tx-instruments tbody tr:hover { background: hsl(var(--base) / .04); }
.tx-instruments .sym-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tx-instruments .sym-cell__logo {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: hsl(var(--tx-surface-2));
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: hsl(var(--base));
    font-size: .85rem;
    border: 1px solid hsl(var(--tx-border));
}
.tx-instruments .sym-cell__meta { line-height: 1.15; }
.tx-instruments .sym-cell__code { color: hsl(var(--tx-text)); font-weight: 700; }
.tx-instruments .sym-cell__name { color: hsl(var(--tx-text-soft)); font-size: .82rem; }
.tx-instruments .pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
}
.tx-instruments .pill.up   { color: hsl(var(--base-two)); background: hsl(var(--base-two) / .12); }
.tx-instruments .pill.down { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12); }
.tx-instruments .trade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--tx-r-md);
    background: var(--tx-gradient-brand);
    color: #fff !important;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    box-shadow: 0 4px 12px hsl(var(--base) / .3);
    transition: transform .15s ease, box-shadow .2s ease;
}
.tx-instruments .trade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px hsl(var(--base) / .4);
    color: #fff !important;
}

/* ----- Feature split rows (image + content alternating) ----- */
.tx-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.tx-feature-row + .tx-feature-row { margin-top: 96px; }
.tx-feature-row.reverse > :first-child { order: 2; }
.tx-feature-row__media {
    position: relative;
    border-radius: var(--tx-r-xl);
    overflow: hidden;
    background: hsl(var(--tx-surface-2));
    aspect-ratio: 4 / 3;
    box-shadow: var(--tx-shadow-md);
}
.tx-feature-row__media img {
    width: 100%; height: 100%; object-fit: cover;
}
.tx-feature-row__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, hsl(var(--base) / .12), transparent 50%);
    pointer-events: none;
}
.tx-feature-row__eyebrow {
    display: inline-block;
    color: hsl(var(--base));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    margin-bottom: 14px;
}
.tx-feature-row__title {
    font-size: var(--heading-two);
    line-height: 1.1;
    margin-bottom: 18px;
}
.tx-feature-row__desc {
    color: hsl(var(--tx-text-soft));
    font-size: 1.05rem;
    margin-bottom: 24px;
}
.tx-feature-row__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 12px;
}
.tx-feature-row__list li {
    color: hsl(var(--tx-text));
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 500;
}
.tx-feature-row__list li::before {
    content: "";
    width: 22px; height: 22px;
    border-radius: 999px;
    background: hsl(var(--base-two) / .15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 5' stroke='%2310b981' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
    flex-shrink: 0;
    margin-top: 1px;
}
@media (max-width: 991px) {
    .tx-feature-row { grid-template-columns: 1fr; gap: 32px; }
    .tx-feature-row + .tx-feature-row { margin-top: 64px; }
    .tx-feature-row.reverse > :first-child { order: 0; }
}

/* ----- Asset class grid ----- */
.tx-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.tx-asset-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 24px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}
.tx-asset-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--tx-shadow-md);
}
.tx-asset-card__icon {
    width: 48px; height: 48px;
    border-radius: var(--tx-r-md);
    background: var(--tx-gradient-brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.tx-asset-card__name {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    font-size: 1.15rem;
    margin-bottom: 6px;
}
.tx-asset-card__meta {
    color: hsl(var(--tx-text-soft));
    font-size: .9rem;
    margin-bottom: 16px;
}
.tx-asset-card__cta {
    color: hsl(var(--base));
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex; align-items: center; gap: 4px;
}

/* ----- Big CTA band ----- */
.tx-cta-band {
    background: var(--tx-gradient-brand);
    border-radius: var(--tx-r-xl);
    padding: 56px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
    box-shadow: 0 30px 60px hsl(var(--base) / .35);
    position: relative;
    overflow: hidden;
}
.tx-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 240px at 90% -20%, rgba(255,255,255,.25), transparent 60%),
        radial-gradient(500px 220px at 0% 120%, rgba(0,0,0,.25), transparent 60%);
    pointer-events: none;
}
.tx-cta-band h2 {
    color: #fff !important;
    font-size: clamp(1.6rem, 1.6vw + 1rem, 2.6rem);
    margin: 0 0 14px;
    line-height: 1.1;
}
.tx-cta-band p { color: rgba(255,255,255,.85); margin: 0; font-size: 1.05rem; }
.tx-cta-band__actions {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
    position: relative; z-index: 1;
}
.tx-cta-band__actions .btn--base {
    background: #fff !important;
    color: hsl(var(--base)) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.tx-cta-band__actions .btn--outline {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.5) !important;
}
@media (max-width: 767px) {
    .tx-cta-band { grid-template-columns: 1fr; padding: 36px; }
    .tx-cta-band__actions { justify-content: flex-start; }
}

/* ----- Risk disclosure band (above footer) ----- */
.tx-risk-band {
    background: hsl(var(--tx-surface-2));
    border-top: 1px solid hsl(var(--tx-border));
    border-bottom: 1px solid hsl(var(--tx-border));
    padding: 28px 0;
}
.tx-risk-band__inner {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}
.tx-risk-band__icon {
    width: 56px; height: 56px;
    border-radius: 999px;
    background: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l) / .15);
    color: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
}
.tx-risk-band__title {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    margin: 0 0 6px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tx-risk-band__text {
    font-size: .88rem;
    color: hsl(var(--tx-text-soft));
    margin: 0;
    line-height: 1.6;
}

/* ----- Footer extensions (multi-column richer) ----- */
.footer-area {
    background: hsl(var(--tx-surface-2)) !important;
    border-top: 1px solid hsl(var(--tx-border));
    color: hsl(var(--tx-text-soft));
}
[data-theme="dark"] .footer-area { background: hsl(224 45% 5%) !important; }
.footer-item__title {
    color: hsl(var(--tx-text)) !important;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 18px;
    font-weight: 700;
}
.footer-item__desc {
    color: hsl(var(--tx-text-soft));
    line-height: 1.7;
    font-size: .92rem;
    max-width: 380px;
}
.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu__item { margin-bottom: 10px; }
.footer-menu__link {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .92rem;
    transition: color .2s ease, padding .2s ease;
    text-decoration: none;
}
.footer-menu__link:hover {
    color: hsl(var(--base)) !important;
    padding-left: 4px;
}
.footer-item__logo img { max-height: 38px; margin-bottom: 18px; }
.bottom-footer {
    background: hsl(var(--tx-bg));
    border-top: 1px solid hsl(var(--tx-border));
}
[data-theme="dark"] .bottom-footer { background: hsl(224 45% 4%); }
.bottom-footer__text { color: hsl(var(--tx-text-soft)); font-size: .85rem; }
.social-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.social-list__link {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    color: hsl(var(--tx-text-soft)) !important;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
    text-decoration: none;
}
.social-list__link:hover {
    background: var(--tx-gradient-brand);
    color: #fff !important;
    border-color: transparent;
    transform: translateY(-2px);
}

/* Trust logos strip (regulators / payments) */
.tx-trust-logos {
    display: flex; flex-wrap: wrap; gap: 36px;
    align-items: center; justify-content: center;
    padding: 28px 0;
    border-top: 1px dashed hsl(var(--tx-border));
    border-bottom: 1px dashed hsl(var(--tx-border));
    margin-top: 36px;
}
.tx-trust-logos span {
    color: hsl(var(--tx-text-soft));
    font-weight: 600;
    letter-spacing: .04em;
    font-size: .9rem;
    opacity: .8;
    transition: opacity .2s ease, color .2s ease;
}
.tx-trust-logos span:hover { opacity: 1; color: hsl(var(--tx-text)); }

/* Hero buttons row spacing override */
.banner-content__button .btn + .btn { margin-left: 0; }

/* =====================================================================
   Account-tier cards
   ===================================================================== */
.tx-accounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.tx-account-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    padding: 28px 24px;
    box-shadow: var(--tx-shadow-sm);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tx-account-card:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--base) / .45);
    box-shadow: var(--tx-shadow-md);
}
.tx-account-card.is-featured {
    border-color: hsl(var(--base) / .55);
    background:
        linear-gradient(180deg, hsl(var(--base) / .06), transparent 60%),
        hsl(var(--tx-surface));
}
.tx-account-card.is-featured::before {
    content: "Popular";
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--tx-gradient-brand);
    padding: 4px 10px;
    border-radius: 999px;
}
.tx-account-card__name {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.4rem;
    color: hsl(var(--tx-text));
    margin-bottom: 4px;
    letter-spacing: -.01em;
}
.tx-account-card__tagline {
    color: hsl(var(--tx-text-soft));
    font-size: .85rem;
    margin-bottom: 22px;
    min-height: 1.5em;
}
.tx-account-card__deposit {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 2.25rem;
    background: var(--tx-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 4px;
}
.tx-account-card__deposit-label {
    font-size: .75rem;
    color: hsl(var(--tx-text-soft));
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 22px;
}
.tx-account-card__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 12px;
    flex: 1;
}
.tx-account-card__specs li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed hsl(var(--tx-border));
    font-size: .88rem;
}
.tx-account-card__specs li:last-child { border-bottom: none; padding-bottom: 0; }
.tx-account-card__specs .k {
    color: hsl(var(--tx-text-soft));
    font-weight: 500;
}
.tx-account-card__specs .v {
    color: hsl(var(--tx-text));
    font-weight: 600;
    text-align: right;
}
.tx-account-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: var(--tx-r-md);
    border: 1px solid hsl(var(--base) / .35);
    background: transparent;
    color: hsl(var(--base)) !important;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.tx-account-card__cta:hover {
    background: var(--tx-gradient-brand);
    color: #fff !important;
    border-color: transparent;
    transform: translateY(-1px);
}
.tx-account-card.is-featured .tx-account-card__cta {
    background: var(--tx-gradient-brand);
    color: #fff !important;
    border-color: transparent;
}
.tx-account-card.is-featured .tx-account-card__cta:hover {
    filter: brightness(1.05);
}

/* =====================================================================
   Mini centered CTA block
   ===================================================================== */
.tx-mini-cta {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.tx-mini-cta__title {
    font-size: var(--heading-two);
    line-height: 1.1;
    margin-bottom: 18px;
    background: linear-gradient(180deg, hsl(var(--tx-text)) 0%, hsl(var(--tx-text) / .75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tx-mini-cta__desc {
    color: hsl(var(--tx-text-soft));
    font-size: 1.05rem;
    margin-bottom: 28px;
}
.tx-mini-cta__actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* =====================================================================
   Feature pill grid ("We Lead The Way")
   ===================================================================== */
.tx-pillgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 48px;
}
.tx-pill-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tx-pill-card:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--tx-shadow-sm);
}
.tx-pill-card__icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--tx-r-md);
    background: hsl(var(--base) / .1);
    color: hsl(var(--base));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.tx-pill-card__text {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text));
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.25;
    letter-spacing: -.005em;
}

/* =====================================================================
   Phase 2 — Market / Crypto / Trade pages
   ===================================================================== */

/* ----- Page banner (hero used on market & crypto pages) ----- */
.tx-page-banner {
    position: relative;
    padding: 120px 0 80px;
    background:
        var(--tx-gradient-hero),
        hsl(var(--tx-bg));
    overflow: hidden;
}
.tx-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(hsl(var(--tx-border) / .35) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--tx-border) / .35) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    pointer-events: none;
}
.tx-page-banner .container { position: relative; z-index: 1; }
.tx-page-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--base));
    background: hsl(var(--base) / .1);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    margin-bottom: 18px;
}
.tx-page-banner__title {
    font-size: clamp(2rem, 2.5vw + 1rem, 3.75rem);
    line-height: 1.05;
    font-weight: 800;
    margin: 0 0 14px;
    background: linear-gradient(180deg, hsl(var(--tx-text)) 0%, hsl(var(--tx-text) / .75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tx-page-banner__desc {
    color: hsl(var(--tx-text-soft));
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 0 28px;
}
.tx-page-banner__search {
    max-width: 540px;
    position: relative;
}
.tx-page-banner__search input {
    width: 100%;
    padding: 16px 22px 16px 50px !important;
    border-radius: 999px !important;
    background: hsl(var(--tx-surface)) !important;
    box-shadow: var(--tx-shadow-sm);
}
.tx-page-banner__search::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--tx-text-soft));
    pointer-events: none;
    z-index: 1;
}
.tx-page-banner__stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.tx-page-banner__stats .stat {
    border-left: 2px solid hsl(var(--base) / .35);
    padding-left: 16px;
}
.tx-page-banner__stats .stat__value {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.5rem;
    color: hsl(var(--tx-text));
    line-height: 1;
}
.tx-page-banner__stats .stat__label {
    font-size: .8rem;
    color: hsl(var(--tx-text-soft));
    margin-top: 4px;
}

/* ----- Coin widget cards (top exchanges / highlight / new) ----- */
.market-overview-card {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-xl) !important;
    box-shadow: var(--tx-shadow-sm) !important;
    padding: 24px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.market-overview-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--base) / .35) !important;
    box-shadow: var(--tx-shadow-md) !important;
}
.market-overview-card__header {
    border-bottom: 1px solid hsl(var(--tx-border));
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.market-overview-card__header h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text)) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-overview-card__header h6::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: hsl(var(--base-two));
    box-shadow: 0 0 0 4px hsl(var(--base-two) / .18);
}
.market-overview-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.market-overview-card__item {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--tx-r-md);
    transition: background .15s ease;
}
.market-overview-card__item:hover { background: hsl(var(--base) / .05); }
.market-overview-card__item .coin-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: hsl(var(--tx-text));
    font-weight: 600;
    font-size: .92rem;
}
.market-overview-card__item .coin-name img {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: hsl(var(--tx-surface-2));
    padding: 3px;
    border: 1px solid hsl(var(--tx-border));
}
.market-overview-card__item .coin-text {
    color: hsl(var(--tx-text));
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.market-overview-card__item .coin-percentage {
    font-weight: 600;
    font-size: .85rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: hsl(var(--tx-surface-2));
    text-align: center;
    min-width: 70px;
}
.market-overview-card__item .coin-percentage .text-success,
.market-overview-card__item .coin-percentage .price-up {
    color: hsl(var(--base-two)) !important;
}
.market-overview-card__item .coin-percentage .text-danger,
.market-overview-card__item .coin-percentage .price-down {
    color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important;
}

/* ----- Market/crypto table polish ----- */
.coin-pair-list-table {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    overflow: hidden;
    box-shadow: var(--tx-shadow-sm);
}
.coin-pair-list-table thead th {
    background: hsl(var(--tx-surface-2)) !important;
    color: hsl(var(--tx-text-soft)) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .76rem;
    padding: 16px 20px;
    border: none !important;
    font-weight: 600;
}
.coin-pair-list-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid hsl(var(--tx-border) / .7) !important;
    vertical-align: middle;
    color: hsl(var(--tx-text));
    font-variant-numeric: tabular-nums;
}
.coin-pair-list-table tbody tr:last-child td { border-bottom: none !important; }
.coin-pair-list-table tbody tr { transition: background .15s ease; }
.coin-pair-list-table tbody tr:hover { background: hsl(var(--base) / .04); }

/* Hide decorative table-section background shapes — keep clean */
.table-section__shape { display: none !important; }
.table-section { background: hsl(var(--tx-bg)); }

/* Search bar on listing pages */
.market-list-search {
    max-width: 320px;
    position: relative;
}
.market-list-search input {
    border-radius: 999px !important;
    padding: 12px 16px 12px 42px !important;
    background: hsl(var(--tx-surface)) !important;
}
.market-list-search::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--tx-text-soft));
    pointer-events: none;
    z-index: 1;
    font-size: .9rem;
}

/* Load-more button */
.load-more-market-list {
    background: transparent !important;
    border: 1px solid hsl(var(--base) / .35) !important;
    color: hsl(var(--base)) !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
}
.load-more-market-list:hover {
    background: hsl(var(--base) / .08) !important;
    border-color: hsl(var(--base)) !important;
}

/* market-overview wrapper — strip its old section bg, hero now handles it */
.market-overview.section-bg { background: transparent !important; }
.market-overview { padding-top: 0 !important; }

/* =====================================================================
   Trade page — full dark, panelized
   The trade route forces data-theme="dark" via the <html> attribute so
   all hsl(var(--tx-*)) tokens resolve to the dark surface palette.
   ===================================================================== */
.trading-section {
    background: hsl(var(--tx-bg)) !important;
    padding: 12px 0 !important;
    color: hsl(var(--tx-text));
}
.trading-section.bg-color { background: hsl(var(--tx-bg)) !important; }
.trading-section .custom--container { padding-inline: 14px; max-width: 1600px; }

/* Generic panel — every widget sits inside one of these card surfaces */
.trading-section .trading-header,
.trading-section .trading-left,
.trading-section .trading-right,
.trading-section .trading-right__bottom,
.trading-section .trading-bottom,
.trading-section .trading-bottom__tab,
.trading-section .trading-chart,
.trading-section .trading-sidebar > * {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-md) !important;
    box-shadow: none !important;
}

/* Outer right sidebar wrapper — no card, it's a column of cards */
.trading-section .trading-sidebar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row gutters between panels */
.trading-section > .container > .row,
.trading-section > .container-fluid > .row,
.trading-section .custom--container > .row {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;
}
.trading-section .row.gy-2 { --bs-gutter-y: 8px !important; }
.trading-section [class*="pe-lg-1"], .trading-section [class*="ps-lg-1"] { padding-left: 4px !important; padding-right: 4px !important; }

/* ----- Pair header strip (price ticker bar) ----- */
.trading-section .trading-header {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 22px !important;
    margin-bottom: 0 !important;
}
.trading-section .trading-header__title {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text)) !important;
    font-size: 1.05rem;
    margin: 0;
    padding-right: 16px;
    border-right: 1px solid hsl(var(--tx-border));
}
.trading-section .trading-header > div { line-height: 1.15; }
.trading-section .trading-header .text--base {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .68rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}
.trading-section .trading-header-number,
.trading-section .trading-header__number {
    color: hsl(var(--tx-text)) !important;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .95rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ----- Order book (left column) ----- */
.trading-section .trading-left {
    padding: 12px !important;
    height: 100%;
    overflow: hidden;
}
.trading-section .trading-left__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--tx-border));
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.trading-section .trading-left__top-title,
.trading-section .trading-left__bottom-title {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text)) !important;
    font-size: .82rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px;
}
.trading-section .trading-left__header,
.trading-section .trading-market__header {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 6px !important;
    border-bottom: 1px solid hsl(var(--tx-border));
    font-weight: 600;
}
.trading-section .trading-market__header > div { color: hsl(var(--tx-text-soft)); }
.trading-section .trading-left__list,
.trading-section .order-list {
    list-style: none;
    padding: 4px 6px !important;
    margin: 0 0 1px !important;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--tx-text));
    border-radius: var(--tx-r-sm);
    transition: background .12s ease;
    background-clip: padding-box !important;
}
.trading-section .order-list:hover { filter: brightness(1.15); }
.trading-section .order-list.has-my-order { outline: 1px solid hsl(var(--base) / .5); }

/* Order book buy/sell coloring */
.trading-section .sell-side-order-list-header,
.trading-section .sell-list-wrapper .order-list { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }
.trading-section .buy-side-order-list-header,
.trading-section .left-two .order-list { color: hsl(var(--base-two)); }

/* ----- Chart panel ----- */
.trading-section .trading-chart {
    padding: 0 !important;
    overflow: hidden;
    min-height: 480px;
}
.trading-section .trading-chart iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; border-radius: var(--tx-r-md); }

/* ----- Buy/Sell trading-bottom area ----- */
.trading-section .trading-bottom {
    padding: 14px !important;
    margin-top: 8px;
}
.trading-section .trading-bottom__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--tx-border));
    padding-bottom: 10px;
    margin-bottom: 12px !important;
}
.trading-section .trading-bottom__header h5,
.trading-section .trading-bottom__header h6 {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text)) !important;
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.trading-section .trading-bottom__wrapper { padding: 4px 0; }
.trading-section .trading-bottom__fixed { margin-top: 12px; }
.trading-section .trading-bottom__footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.trading-section .trading-bottom__button {
    border-radius: var(--tx-r-md);
    overflow: hidden;
}
.trading-section .trading-bottom__button .btn,
.trading-section .trading-bottom__button button,
.trading-section .trading-bottom__button a {
    width: 100%;
    padding: 12px 14px !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
    border: none;
    border-radius: var(--tx-r-md);
    color: #fff !important;
}
.trading-section .trading-bottom__button.buy-btn .btn,
.trading-section .trading-bottom__button.buy-btn button,
.trading-section .trading-bottom__button.buy-btn a { background: hsl(var(--base-two)) !important; box-shadow: 0 6px 16px hsl(var(--base-two) / .35); }
.trading-section .trading-bottom__button.sell-btn .btn,
.trading-section .trading-bottom__button.sell-btn button,
.trading-section .trading-bottom__button.sell-btn a { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; box-shadow: 0 6px 16px hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .35); }

/* ----- Buy/Sell form internals ----- */
.trading-section .buy-sell,
.trading-section .buy-sell-form {
    background: hsl(var(--tx-surface-2)) !important;
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-md);
    padding: 14px !important;
}
.trading-section .buy-sell__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.trading-section .buy-sell__title {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin: 0;
}
.trading-section .buy-sell__price {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-sm) !important;
    padding: 8px 10px !important;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trading-section .buy-sell__price input {
    background: transparent !important;
    border: none !important;
    color: hsl(var(--tx-text)) !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums;
    flex: 1;
    font-size: .92rem;
}
.trading-section .buy-sell__price-title { color: hsl(var(--tx-text-soft)) !important; }
.trading-section .buy-sell__price-btc { color: hsl(var(--tx-text-soft)) !important; font-weight: 600; }

/* ----- Right sidebar pair list ----- */
.trading-section .trading-right {
    padding: 12px !important;
    overflow: hidden;
}
.trading-section .trading-right__top { padding-bottom: 8px; border-bottom: 1px solid hsl(var(--tx-border)); margin-bottom: 8px; }
.trading-section .trading-right__title {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text)) !important;
    margin: 0 0 8px;
    font-size: .82rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
.trading-section .trading-right__tab .swiper-slide {
    color: hsl(var(--tx-text-soft));
    font-weight: 600;
    font-size: .82rem;
    padding: 6px 10px;
    border-radius: var(--tx-r-sm);
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.trading-section .trading-right__tab .swiper-slide.active,
.trading-section .trading-right__tab .swiper-slide-active {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / .12) !important;
}
.trading-section .market.pair-list .row,
.trading-section .pair-list .row {
    margin: 0;
    padding: 6px 4px;
    font-size: .8rem;
    border-radius: var(--tx-r-sm);
    transition: background .12s ease;
    font-variant-numeric: tabular-nums;
}
.trading-section .pair-list .row:hover { background: hsl(var(--base) / .08); cursor: pointer; }

/* ----- Trade history panel ----- */
.trading-section .trading-right__bottom { padding: 12px !important; }
.trading-section .trading-history { padding: 0 !important; }
.trading-section .trading-history__title {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text)) !important;
    font-size: .82rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin: 0 0 8px;
}

/* ----- Trading-bottom tab (orders / history strip) ----- */
.trading-section .trading-bottom__tab { padding: 6px 6px 0 !important; }
.trading-section .nav-tabs {
    border-bottom: 1px solid hsl(var(--tx-border)) !important;
    margin: 0 -6px;
    padding: 0 6px;
}
.trading-section .nav-tabs .nav-link {
    border: none !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-weight: 600;
    padding: 10px 14px !important;
    border-radius: var(--tx-r-sm) var(--tx-r-sm) 0 0 !important;
    font-size: .82rem;
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.trading-section .nav-tabs .nav-link.active {
    color: hsl(var(--base)) !important;
    border-bottom: 2px solid hsl(var(--base)) !important;
}

/* ----- Tables inside trade panels ----- */
.trading-section .table {
    background: transparent !important;
    color: hsl(var(--tx-text)) !important;
    margin: 0;
}
.trading-section .table th {
    background: transparent !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .68rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid hsl(var(--tx-border)) !important;
    border-top: none !important;
    padding: 8px 10px !important;
    font-weight: 600;
}
.trading-section .table td {
    border-color: hsl(var(--tx-border) / .5) !important;
    padding: 8px 10px !important;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    color: hsl(var(--tx-text)) !important;
    vertical-align: middle;
}

/* Status pills in tables */
.trading-section .badge { font-weight: 600; }

/* Swiper nav buttons on pair-list tabs */
.swiper-button-next-two,
.swiper-button-prev-two {
    background: hsl(var(--tx-surface-2)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: 999px !important;
    color: hsl(var(--tx-text)) !important;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Buy/sell action buttons in the trade panel (generic fallback) */
.trading-section .btn--success,
.trading-section .btn-success { background: hsl(var(--base-two)) !important; border: none !important; color: #fff !important; }
.trading-section .btn--danger,
.trading-section .btn-danger  { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; border: none !important; color: #fff !important; }
.trading-section .btn--base,
.trading-section .btn-primary { background: var(--tx-gradient-brand) !important; border: none !important; }

/* Deposit offcanvas — match dark surface */
.offcanvas {
    background: hsl(var(--tx-surface)) !important;
    color: hsl(var(--tx-text)) !important;
    border-color: hsl(var(--tx-border)) !important;
}
.offcanvas .form-control,
.offcanvas .form-select { background: hsl(var(--tx-surface-2)) !important; }
.offcanvas .input-group-text { background: hsl(var(--tx-surface-2)) !important; border-color: hsl(var(--tx-border)) !important; color: hsl(var(--tx-text-soft)) !important; }
.offcanvas .list-group-item {
    background: transparent !important;
    border-color: hsl(var(--tx-border)) !important;
    color: hsl(var(--tx-text)) !important;
}
.offcanvas-header { border-bottom: 1px solid hsl(var(--tx-border)); }
.offcanvas .btn-close { filter: invert(1) brightness(1.5); }

/* Hide preloader on trade page faster — avoid flash */
[data-theme="dark"] .preloader-wrapper { background: hsl(var(--tx-bg)) !important; }

/* =====================================================================
   Phase 4 — Auth (login / register / forgot) split-screen
   ===================================================================== */
.account {
    min-height: 100vh;
    background: hsl(var(--tx-bg));
    display: flex;
}
.account-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    min-height: 100vh;
    width: 100%;
}
@media (max-width: 991px) {
    .account-inner { grid-template-columns: 1fr; }
}

/* ---- Left side (brand panel) ---- */
.account-left {
    position: relative;
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 500px at 80% -10%, hsl(var(--base) / .30), transparent 60%),
        radial-gradient(700px 460px at -10% 110%, hsl(var(--base-two) / .25), transparent 60%),
        linear-gradient(180deg, hsl(224 38% 8%) 0%, hsl(224 45% 5%) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.account-left::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.account-left__logo img { max-height: 40px; filter: brightness(1.15); }
.account-left__content { margin-top: 64px; max-width: 460px; }
.account-left__subtitle,
.account-left__subtitle-two {
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.account-left__title,
.account-left__title-two {
    color: #fff !important;
    font-family: var(--heading-font);
    font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
}
.account-left__title-two-style {
    background: linear-gradient(135deg, hsl(160 84% 60%), hsl(190 90% 65%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.account-left__thumb,
.account-left__thumb-two {
    margin-top: auto;
    align-self: center;
    max-width: 480px;
}
.account-left__thumb img,
.account-left__thumb-two img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

/* ---- Right side (form panel) ---- */
.account-right-wrapper {
    background: hsl(var(--tx-bg));
    padding: 28px 56px 40px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
@media (max-width: 575px) {
    .account-right-wrapper { padding: 24px 20px 32px; }
    .account-left { padding: 32px 24px; }
}
.account-content__top { margin-bottom: 32px; }
.account-content__member {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}
.account-content__member-text { color: hsl(var(--tx-text-soft)); margin: 0; font-size: .92rem; }
.account-link {
    color: hsl(var(--base)) !important;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid hsl(var(--base) / .35);
    transition: background .2s ease, color .2s ease;
    font-size: .9rem;
}
.account-link:hover {
    background: hsl(var(--base));
    color: #fff !important;
}
.account-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-content { width: 100%; max-width: 480px; }
.account-form {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    padding: 40px;
    box-shadow: var(--tx-shadow-md);
}
@media (max-width: 575px) {
    .account-form { padding: 28px 22px; }
}
.account-form__title {
    color: hsl(var(--tx-text)) !important;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
}
.account-form__desc {
    color: hsl(var(--tx-text-soft));
    margin-bottom: 26px;
    font-size: .95rem;
}
.account-form .form-group { margin-bottom: 16px; }
.account-form .form--label,
.account-form .form-label {
    color: hsl(var(--tx-text));
    font-weight: 500;
    font-size: .88rem;
    margin-bottom: 6px;
}
.account-form .forget-password {
    color: hsl(var(--base));
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}
.account-form .forget-password:hover { text-decoration: underline; }
.account-form .password-show-hide {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--tx-text-soft));
    cursor: pointer;
    z-index: 2;
}
.account-form .form-check-input {
    background-color: hsl(var(--tx-surface)) !important;
    border-color: hsl(var(--tx-border)) !important;
}
.account-form .form-check-input:checked {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
}
.account-form .btn--base {
    padding: 14px 22px !important;
    font-size: 1rem;
    margin-top: 6px;
}

/* OR divider */
.other-option {
    position: relative;
    text-align: center;
    margin: 22px 0;
}
.other-option::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: hsl(var(--tx-border));
}
.other-option__text {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: hsl(var(--tx-surface));
    color: hsl(var(--tx-text-soft));
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Social provider buttons */
.social-provider,
.social-provider-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.social-provider a,
.social-provider-list a,
.social-provider .btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px !important;
    border-radius: var(--tx-r-md) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    background: hsl(var(--tx-surface-2)) !important;
    color: hsl(var(--tx-text)) !important;
    text-decoration: none;
    font-weight: 500;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.social-provider a:hover,
.social-provider-list a:hover {
    background: hsl(var(--base) / .08) !important;
    border-color: hsl(var(--base) / .35) !important;
    transform: translateY(-1px);
}

/* Bottom footer inside auth */
.account-right-wrapper .bottom-footer__text { color: hsl(var(--tx-text-soft)); font-size: .82rem; }
.account-right-wrapper .bottom-footer__right { text-align: right; }
.account-right-wrapper .bottom-footer__right-link {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .82rem;
    text-decoration: none;
    margin-left: 14px;
}
.account-right-wrapper .bottom-footer__right-link:hover { color: hsl(var(--base)) !important; }
@media (max-width: 575px) {
    .account-right-wrapper .bottom-footer__right { text-align: left; }
    .account-right-wrapper .bottom-footer__right-link { margin-left: 0; margin-right: 14px; }
}

/* =====================================================================
   Phase 4 — User dashboard
   ===================================================================== */

/* ---- Sidebar ---- */
.sidebar-menu {
    background: hsl(var(--tx-surface)) !important;
    border-right: 1px solid hsl(var(--tx-border));
    box-shadow: var(--tx-shadow-sm);
}
.sidebar-menu__inner { padding: 18px 14px; }
.sidebar-logo {
    padding: 10px 8px 24px;
    border-bottom: 1px solid hsl(var(--tx-border));
    margin-bottom: 16px;
}
.sidebar-logo__link img { max-height: 36px; }
.sidebar-menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sidebar-menu-list__item { margin: 0; }
.sidebar-menu-list__link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 11px 14px !important;
    border-radius: var(--tx-r-md) !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-weight: 500;
    font-size: .94rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    position: relative;
}
.sidebar-menu-list__link:hover {
    background: hsl(var(--base) / .08) !important;
    color: hsl(var(--tx-text)) !important;
}
.sidebar-menu-list__link.active,
.sidebar-menu-list__link.sidebar-menu-list__link--active,
li.active > .sidebar-menu-list__link {
    background: var(--tx-gradient-brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px hsl(var(--base) / .35);
}
.sidebar-menu-list__link .icon {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.sidebar-menu-list__link .text { font-family: var(--body-font); }
.sidebar-menu__close {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: hsl(var(--tx-surface-2));
    color: hsl(var(--tx-text)) !important;
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute;
    top: 14px; right: 14px;
    cursor: pointer;
    z-index: 5;
}

/* ---- Top bar ---- */
.dashboard-header {
    background: hsl(var(--tx-bg) / .82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid hsl(var(--tx-border));
    padding: 14px 24px !important;
    position: sticky;
    top: 0;
    z-index: 10;
}
.dashboard-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dashboard-header__right { display: flex; align-items: center; gap: 14px; }

/* Referral copy-link pill */
.copy-link {
    display: inline-flex;
    align-items: center;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: 999px;
    overflow: hidden;
    padding: 4px 4px 4px 14px;
    box-shadow: var(--tx-shadow-xs);
    max-width: 480px;
}
.copy-link .copyText {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px 8px 0 !important;
    font-size: .85rem;
    color: hsl(var(--tx-text)) !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 0;
    width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.copy-link__button {
    background: var(--tx-gradient-brand) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}
.copy-link__button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px hsl(var(--base) / .4); }

.dashboard-header__right .trade-btn {
    border-radius: 999px !important;
    padding: 8px 16px !important;
}

/* User dropdown */
.user-info { position: relative; }
.user-info__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.user-info__button:hover { border-color: hsl(var(--base) / .4); box-shadow: var(--tx-shadow-xs); }
.user-info__button::before {
    content: "";
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--tx-gradient-brand);
    flex-shrink: 0;
}
.user-info__name {
    color: hsl(var(--tx-text)) !important;
    font-weight: 600;
    font-size: .9rem;
    margin: 0;
}
.user-info-dropdown {
    list-style: none;
    padding: 8px;
    margin: 0;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    box-shadow: var(--tx-shadow-md);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 20;
}
.user-info:hover .user-info-dropdown,
.user-info:focus-within .user-info-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-info-dropdown__item { margin: 0; }
.user-info-dropdown__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--tx-r-md);
    color: hsl(var(--tx-text)) !important;
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
}
.user-info-dropdown__link:hover {
    background: hsl(var(--base) / .08);
    color: hsl(var(--base)) !important;
}
.user-info-dropdown__link .icon { color: hsl(var(--tx-text-soft)); }
.user-info-dropdown__link:hover .icon { color: hsl(var(--base)); }

/* ---- Dashboard widget cards ---- */
.dashboard-card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.dashboard-card {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-lg) !important;
    padding: 22px !important;
    box-shadow: var(--tx-shadow-sm) !important;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.dashboard-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsl(var(--base) / .06), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.dashboard-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--base) / .35) !important;
    box-shadow: var(--tx-shadow-md) !important;
}
.dashboard-card:hover::after { opacity: 1; }
.dashboard-card__icon {
    width: 52px; height: 52px;
    border-radius: var(--tx-r-md);
    background: hsl(var(--base) / .1) !important;
    color: hsl(var(--base)) !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.dashboard-card__icon.text--success { background: hsl(var(--base-two) / .12) !important; color: hsl(var(--base-two)) !important; }
.dashboard-card__icon.text--danger  { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12) !important; color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; }
.dashboard-card__content { flex: 1; min-width: 0; }
.dashboard-card__coin-name {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin: 0 0 6px !important;
    text-decoration: none;
    display: block;
}
.dashboard-card__coin-title {
    color: hsl(var(--tx-text)) !important;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.45rem;
    margin: 0 !important;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Existing balance-card stays — already styled in Phase 1 */
.balance-card { padding: 28px !important; }
.balance-card .dashboard-card__coin-name,
.balance-card .dashboard-card__coin-title { color: #fff !important; }

/* ---- Generic content tables inside dashboard pages ---- */
.user-card,
.custom-card,
.card--style {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-lg) !important;
    box-shadow: var(--tx-shadow-sm) !important;
    padding: 24px !important;
}

/* Tab strip used on dashboard subpages */
.nav-tabs.dashboard-tabs {
    border-bottom: 1px solid hsl(var(--tx-border)) !important;
    margin-bottom: 18px;
}
.nav-tabs.dashboard-tabs .nav-link {
    border: none !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-weight: 600;
    padding: 12px 18px !important;
    border-radius: var(--tx-r-sm) var(--tx-r-sm) 0 0 !important;
}
.nav-tabs.dashboard-tabs .nav-link.active {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / .08) !important;
    border-bottom: 2px solid hsl(var(--base)) !important;
}

/* Tooltip polish */
.tooltip-inner {
    background: hsl(var(--tx-text)) !important;
    color: hsl(var(--tx-bg)) !important;
    border-radius: var(--tx-r-sm) !important;
    font-size: .78rem;
    padding: 6px 10px !important;
}

/* Body-overlay backdrop (used when sidebar opens on mobile) */
.body-overlay,
.sidebar-overlay { background: hsla(224 39% 6% / .55) !important; backdrop-filter: blur(2px); }

/* =====================================================================
   Phase 4b — Restructured user dashboard
   Loaded after dashboard/css/main.css via master.blade.php
   ===================================================================== */

/* The master layout wraps everything in .dashboard-body — ensure it has
   the surface background and consistent padding. */
.dashboard-body {
    background: hsl(var(--tx-bg)) !important;
    padding: 20px 24px 40px !important;
}
.dashboard__right { background: hsl(var(--tx-bg)); min-height: 100vh; }

/* ----- Breadcrumb ----- */
.dash-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dash-breadcrumb__title {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text));
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    padding-right: 18px;
    border-right: 1px solid hsl(var(--tx-border));
}
.dash-breadcrumb__crumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: hsl(var(--tx-text-soft));
    font-size: .9rem;
}
.dash-breadcrumb__crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: hsl(var(--tx-text-soft));
    opacity: .5;
}
.dash-breadcrumb__crumbs a {
    color: hsl(var(--tx-text-soft));
    text-decoration: none;
    transition: color .2s ease;
}
.dash-breadcrumb__crumbs a:hover { color: hsl(var(--base)); }
.dash-breadcrumb__crumbs [aria-current="page"] { color: hsl(var(--tx-text)); font-weight: 500; }

/* ----- Notification / KYC / 2FA alert blocks ----- */
.dash-notices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.dash-alert {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    align-items: center;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-left: 4px solid hsl(var(--base));
    border-radius: var(--tx-r-lg);
    padding: 18px 22px;
    box-shadow: var(--tx-shadow-sm);
}
.dash-alert--danger  { border-left-color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }
.dash-alert--warning { border-left-color: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l)); }
.dash-alert--info    { border-left-color: hsl(var(--tx-info-h) var(--tx-info-s) var(--tx-info-l)); }
.dash-alert--success { border-left-color: hsl(var(--base-two)); }

.dash-alert__icon {
    width: 52px; height: 52px;
    border-radius: var(--tx-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: hsl(var(--base) / .12);
    color: hsl(var(--base));
}
.dash-alert--danger  .dash-alert__icon { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12); color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }
.dash-alert--warning .dash-alert__icon { background: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l) / .12); color: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l)); }
.dash-alert--info    .dash-alert__icon { background: hsl(var(--tx-info-h) var(--tx-info-s) var(--tx-info-l) / .12); color: hsl(var(--tx-info-h) var(--tx-info-s) var(--tx-info-l)); }
.dash-alert--success .dash-alert__icon { background: hsl(var(--base-two) / .12); color: hsl(var(--base-two)); }

.dash-alert__title { color: hsl(var(--tx-text)) !important; margin: 0 0 4px; font-size: 1rem; font-weight: 700; font-family: var(--heading-font); }
.dash-alert__text { color: hsl(var(--tx-text-soft)); margin: 0; font-size: .9rem; line-height: 1.55; }
.dash-alert__text strong { color: hsl(var(--tx-text)); }
.dash-alert__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: hsl(var(--base) / .1);
    color: hsl(var(--base)) !important;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.dash-alert__cta:hover { background: hsl(var(--base)); color: #fff !important; }
.dash-alert--danger  .dash-alert__cta { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12); color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; }
.dash-alert--danger  .dash-alert__cta:hover { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); color: #fff !important; }

@media (max-width: 575px) {
    .dash-alert { grid-template-columns: 48px 1fr; }
    .dash-alert__cta { grid-column: 1 / -1; justify-self: start; }
}

/* ----- Balance hero card (the gradient one) ----- */
.tx-balance-hero {
    background: var(--tx-gradient-brand);
    color: #fff;
    border-radius: var(--tx-r-xl);
    padding: 26px 26px 20px;
    width: 100%;
    box-shadow: 0 20px 50px hsl(var(--base) / .35);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tx-balance-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(500px 220px at 110% -10%, rgba(255,255,255,.25), transparent 60%),
        radial-gradient(400px 200px at -10% 110%, rgba(0,0,0,.25), transparent 60%);
    pointer-events: none;
}
.tx-balance-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.tx-balance-hero__label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .75rem;
    color: rgba(255,255,255,.78);
    font-weight: 600;
    margin-bottom: 6px;
}
.tx-balance-hero__amount {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tx-balance-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}
.tx-balance-hero__chart {
    margin: 18px -26px 12px;
    position: relative;
    z-index: 1;
    height: 88px;
}
.tx-balance-hero__chart svg { width: 100%; height: 100%; display: block; }
.tx-balance-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}
.tx-balance-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--tx-r-md);
    background: rgba(255,255,255,.15);
    color: #fff !important;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.2);
    transition: background .2s ease, transform .15s ease;
}
.tx-balance-hero__btn:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); color: #fff !important; }
.tx-balance-hero__btn--primary {
    background: #fff;
    color: hsl(var(--base)) !important;
    border-color: transparent;
}
.tx-balance-hero__btn--primary:hover { background: rgba(255,255,255,.92); color: hsl(var(--base)) !important; }

/* ----- Quick-stats horizontal row ----- */
.tx-stat-row {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-sm);
    width: 100%;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
}
.tx-stat-row__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 140px;
}
.tx-stat-row__icon {
    width: 48px; height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 6px;
    background: hsl(var(--base) / .1);
    color: hsl(var(--base));
}
.tx-stat-row__icon--brand   { background: hsl(var(--base) / .12); color: hsl(var(--base)); }
.tx-stat-row__icon--success { background: hsl(var(--base-two) / .12); color: hsl(var(--base-two)); }
.tx-stat-row__icon--warning { background: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l) / .14); color: hsl(var(--tx-warning-h) var(--tx-warning-s) var(--tx-warning-l)); }
.tx-stat-row__icon--info    { background: hsl(var(--tx-info-h) var(--tx-info-s) var(--tx-info-l) / .12); color: hsl(var(--tx-info-h) var(--tx-info-s) var(--tx-info-l)); }
.tx-stat-row__value {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    font-size: 1.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tx-stat-row__label {
    color: hsl(var(--tx-text-soft));
    font-size: .82rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}
.tx-stat-row__divider {
    width: 1px;
    align-self: stretch;
    background: hsl(var(--tx-border));
}
@media (max-width: 575px) {
    .tx-stat-row__divider { display: none; }
    .tx-stat-row { padding: 22px; }
}

/* ----- Generic dashboard card (shared by mini-chart wrapper, place-trade,
         recent activity, BTC value etc.) ----- */
.tx-dash-card {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-xl) !important;
    box-shadow: var(--tx-shadow-sm) !important;
    padding: 24px;
    width: 100%;
}
.tx-dash-card--flush { padding: 0; overflow: hidden; }
.tx-dash-card--flush .tradingview-widget-container { padding: 0; }
.tx-dash-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.tx-dash-card__title {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text)) !important;
    font-weight: 700;
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.tx-dash-card__menu {
    background: transparent;
    border: 1px solid hsl(var(--tx-border));
    color: hsl(var(--tx-text-soft));
    width: 32px; height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.tx-dash-card__menu:hover { background: hsl(var(--base) / .1); color: hsl(var(--base)); }
.tx-dash-card__link {
    color: hsl(var(--base)) !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tx-dash-card__hr { border: none; border-top: 1px solid hsl(var(--tx-border)); margin: 18px 0; }
.tx-dash-card__sublabel {
    color: hsl(var(--tx-text-soft));
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 10px;
}

.tx-dash-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* BTC balance display inside the side card */
.tx-btc-value__label {
    color: hsl(var(--tx-text-soft));
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 4px;
}
.tx-btc-value__amount {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text));
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.tx-btc-value__unit {
    font-size: .85rem;
    font-weight: 600;
    color: hsl(var(--tx-text-soft));
    margin-left: 4px;
    letter-spacing: .04em;
}
.tx-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tx-quick-actions .btn { padding: 11px 14px !important; font-size: .92rem; }

/* ----- Quick-trade form ----- */
.tx-quicktrade { margin: 0; }
.tx-quicktrade .form-label {
    color: hsl(var(--tx-text)) !important;
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: 6px;
}
.tx-quicktrade .form-control,
.tx-quicktrade .form-select {
    background: hsl(var(--tx-surface-2)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    color: hsl(var(--tx-text)) !important;
    font-size: .92rem;
}
.tx-quicktrade .form-control:focus,
.tx-quicktrade .form-select:focus {
    border-color: hsl(var(--base) / .6) !important;
    box-shadow: 0 0 0 4px hsl(var(--base) / .15) !important;
}
.tx-quicktrade__hint {
    display: block;
    color: hsl(var(--tx-text-soft));
    margin-top: 10px;
    text-align: center;
    font-size: .8rem;
}

/* ----- Recent orders / transactions list ----- */
.tx-dash-list { display: flex; flex-direction: column; gap: 4px; }
.tx-dash-list__row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: var(--tx-r-md);
    transition: background .15s ease;
}
.tx-dash-list__row:hover { background: hsl(var(--base) / .04); }
.tx-dash-list__date {
    width: 56px; height: 56px;
    background: hsl(var(--tx-surface-2));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.tx-dash-list__date .day {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text)) !important;
    font-size: 1.1rem;
}
.tx-dash-list__date .mon {
    color: hsl(var(--tx-text-soft));
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
    font-weight: 600;
}
.tx-dash-list__body { min-width: 0; }
.tx-dash-list__title {
    color: hsl(var(--tx-text)) !important;
    font-weight: 600;
    font-size: .92rem;
    margin: 0 0 2px;
}
.tx-dash-list__title .badge { font-size: .72rem; }
.tx-dash-list__desc {
    color: hsl(var(--tx-text-soft));
    font-size: .82rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-dash-list__status { text-align: right; font-weight: 600; flex-shrink: 0; }
.tx-dash-list__empty {
    text-align: center;
    padding: 32px 20px;
    color: hsl(var(--tx-text-soft));
}
.tx-dash-list__empty i { font-size: 38px; opacity: .5; display: block; margin-bottom: 8px; }
.tx-dash-list__empty p { margin: 0; font-size: .9rem; }

/* TradingView mini widget container — keep neutral background, no extra padding */
.tradingview-widget-container { background: transparent; }
.tradingview-widget-copyright { display: none !important; }

/* Old user-dashboard right-sidebar drawer — make it match dark token */
.dashboard-right .right-sidebar {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: var(--tx-r-lg) !important;
    padding: 18px !important;
}
.dashboard-right .right-sidebar__number { color: hsl(var(--tx-text)) !important; }
.dashboard-right .right-sidebar__item { color: hsl(var(--tx-text)) !important; }

@media (max-width: 991px) {
    .dashboard-body { padding: 16px !important; }
    .tx-stat-row { padding: 22px 16px; }
}

/* =====================================================================
   Phase 4c — Auth defensive overrides
   main.css declares .account-inner as flex with .account-left fixed at
   width:40% and absolute-positioned thumbs at huge paddings. Force the
   grid layout and neutralise the absolute thumb positioning so the
   split-screen renders correctly.
   ===================================================================== */
.account { display: block !important; }
.account-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    min-height: 100vh !important;
    overflow: visible !important;
    width: 100% !important;
}
.account-left,
.account-right,
.account-right-wrapper {
    width: auto !important;
    flex: initial !important;
}
.account-left {
    padding: 40px 56px !important;
    background-color: transparent !important;
    overflow: hidden;
}
.account-left__thumb,
.account-left__thumb-two,
.account-left__thumb-three {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    margin-top: auto;
    align-self: center;
    max-width: 480px;
    width: 100%;
}
.account-left__thumb img,
.account-left__thumb-two img,
.account-left__thumb-three img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
.account-left__title::before,
.account-left__title-three::before {
    display: none !important;
}
.account-right {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 !important;
}
.account-content {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 !important;
}
.account-content__top {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.account-form .form-group {
    position: relative;
}
.account-form .form--control,
.account-form .form-control {
    width: 100% !important;
}
.account-form-area {
    padding: 0 !important;
    background: transparent !important;
}
@media (max-width: 991px) {
    .account-inner { grid-template-columns: 1fr !important; }
    .account-left  { padding: 32px 24px !important; }
}
@media (max-width: 767px) {
    .account-left  { display: none !important; }
}

/* =====================================================================
   Phase 4d — Hardening: kill every legacy .account* media-query padding
   in main.css and the Bootstrap row negative-margin overflow at the
   bottom of the auth panel.
   ===================================================================== */
.account-right,
.account-right-wrapper {
    background: transparent !important;
}
.account-right-wrapper {
    background: hsl(var(--tx-bg)) !important;
    padding: 28px 56px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow: visible !important;
}
.account-right {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
}
/* Mobile-down padding for the form panel */
@media (max-width: 991px) {
    .account-right-wrapper { padding: 24px 28px 32px !important; }
}
@media (max-width: 575px) {
    .account-right-wrapper { padding: 20px 16px 28px !important; }
    .account-form          { padding: 26px 20px !important; }
}

/* Top bar inside the form panel — keep it tidy and right-aligned */
.account-content__top {
    margin: 0 0 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}
.account-content__member {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px !important;
    margin: 0 !important;
}
.account-content__member-text { margin: 0; }

/* Neutralise the legacy 40×40 round theme-switch slider so it matches the
   rest of the toggle styling on the auth panel. */
.account-right-wrapper .theme-switch-wrapper { margin: 0 !important; }
.account-right-wrapper .theme-switch .slider {
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: hsl(var(--tx-surface-2)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
}
.account-right-wrapper .theme-switch .slider i {
    font-size: 12px !important;
    color: hsl(var(--tx-text-soft)) !important;
}

/* Bottom footer row inside .account-right-wrapper — kill Bootstrap's
   negative gutter so it doesn't cause horizontal overflow inside the
   padded wrapper. */
.account-right-wrapper > .row {
    margin: 24px 0 0 !important;
    --bs-gutter-x: 0 !important;
    width: 100% !important;
}
.account-right-wrapper > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.account-right-wrapper > .row .bottom-footer__right {
    text-align: right;
}
@media (max-width: 575px) {
    .account-right-wrapper > .row .bottom-footer__right { text-align: left; }
}

/* Form-check (Remember Me) alignment */
.account-form .form-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-left: 0 !important;
    margin: 8px 0 18px;
}
.account-form .form-check-input {
    margin: 0 !important;
    float: none !important;
    flex-shrink: 0;
}
.account-form .form-check-label {
    margin: 0 !important;
    color: hsl(var(--tx-text-soft));
    font-size: .92rem;
    cursor: pointer;
}

/* The .position-relative wrapper around the password input needs the
   icon vertically centred against the input height, not the wrapper. */
.account-form .form-group .position-relative { display: block; }
.account-form .position-relative .password-show-hide {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--tx-text-soft));
    cursor: pointer;
    z-index: 2;
}

/* Neutralise legacy .account-form-area / .account-left__title::before
   decorative chevrons that main.css positions absolutely. */
.account-left__title::before,
.account-left__title-two::before,
.account-left__title-three::before,
.account-left__subtitle-two img { display: none !important; }

/* The brand panel needs explicit min-height so on tall screens it fills */
.account-left {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Custom-dropdown lang switcher in the top bar — match the pill size */
.account-content__top .custom--dropdown { margin: 0; }
.account-content__top .custom--dropdown__selected {
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
}

/* =====================================================================
   Phase 4e — Text-color hardening for auth + dashboard
   main.css forces a global --heading-color and bakes its own .form--label
   / .form--control colors. These overrides lock text contrast on both
   sides of the auth split-screen and across the dashboard surfaces.
   ===================================================================== */

/* ---- Auth brand panel (always dark, regardless of site theme) ---- */
.account-left,
.account-left * {
    /* default body text on the brand panel — soft white for paragraphs */
    color: rgba(255, 255, 255, .85);
}
.account-left h1,
.account-left h2,
.account-left h3,
.account-left h4,
.account-left h5,
.account-left h6 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}
.account-left__subtitle,
.account-left__subtitle-two {
    color: rgba(255, 255, 255, .72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .72);
}
.account-left__title,
.account-left__title-two {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    background: none !important;          /* kill any gradient-clip from main.css */
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
/* The "highlighted" span inside the register title — gradient back on for
   just that token. */
.account-left__title-two .account-left__title-two-style,
.account-left__title-two-style {
    background: linear-gradient(135deg, hsl(160 84% 65%), hsl(190 90% 70%)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---- Auth form panel (right side, light surface) ---- */
.account-right-wrapper,
.account-right-wrapper * {
    /* Reset any rgba/transparent inherited from .account-left * cascade */
}
.account-form__title,
.account-form h1, .account-form h2, .account-form h3, .account-form h4, .account-form h5, .account-form h6 {
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
.account-form__desc { color: hsl(var(--tx-text-soft)) !important; }
.account-form .form-label,
.account-form .form--label {
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
    font-weight: 500;
    margin-bottom: 8px;
}
.account-form .form-control,
.account-form .form--control,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="number"],
.account-form textarea,
.account-form select {
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
    background: hsl(var(--tx-surface)) !important;
    border-color: hsl(var(--tx-border)) !important;
}
.account-form ::placeholder,
.account-form input::placeholder { color: hsl(var(--tx-text-soft) / .75) !important; opacity: 1 !important; }
.account-form .form-check-label {
    color: hsl(var(--tx-text)) !important;
    font-weight: 500;
}
.account-form .forget-password { color: hsl(var(--base)) !important; font-weight: 600; }

.account-content__member-text { color: hsl(var(--tx-text)) !important; opacity: 1; }
.account-content__top .account-link { color: hsl(var(--base)) !important; }

/* "OR" divider chip should always read against the surface */
.other-option__text {
    color: hsl(var(--tx-text-soft)) !important;
    background: hsl(var(--tx-surface)) !important;
}

/* Bottom legal links */
.account-right-wrapper .bottom-footer__text,
.account-right-wrapper .bottom-footer__right-text,
.account-right-wrapper .bottom-footer__right-link {
    color: hsl(var(--tx-text-soft)) !important;
}
.account-right-wrapper .bottom-footer__right-link:hover { color: hsl(var(--base)) !important; }

/* ---- Home / page-banner gradient-clipped headings ---- */
.banner-content__title,
.tx-page-banner__title,
.tx-blog-hero__title,
.tx-mini-cta__title {
    /* Solid fallback color first — if the gradient clip fails the text
       still renders. */
    color: hsl(var(--tx-text));
    background-image: linear-gradient(180deg, hsl(var(--tx-text)) 0%, hsl(var(--tx-text) / .82) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.banner-content__title .highlighted,
.banner-content__title span,
.banner-content__title b,
.banner-content__title strong {
    color: hsl(var(--base));
    background-image: var(--tx-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Dashboard text hardening ---- */
.dashboard-body,
.dashboard-body p,
.dashboard-body li {
    color: hsl(var(--tx-text-soft));
}
.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6 {
    color: hsl(var(--tx-text)) !important;
}
.dash-breadcrumb__title { color: hsl(var(--tx-text)) !important; }
.dash-breadcrumb__crumbs a { color: hsl(var(--tx-text-soft)) !important; }
.dash-breadcrumb__crumbs [aria-current="page"] { color: hsl(var(--tx-text)) !important; }

.dash-alert__title { color: hsl(var(--tx-text)) !important; }
.dash-alert__text  { color: hsl(var(--tx-text-soft)) !important; }
.dash-alert__text strong { color: hsl(var(--tx-text)) !important; }

/* Balance hero gradient card — always white text */
.tx-balance-hero,
.tx-balance-hero * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}
.tx-balance-hero .tx-balance-hero__label { color: rgba(255, 255, 255, .78) !important; }
.tx-balance-hero__pill { color: #ffffff !important; }
.tx-balance-hero__btn { color: #ffffff !important; }
.tx-balance-hero__btn--primary { color: hsl(var(--base)) !important; -webkit-text-fill-color: hsl(var(--base)); }

/* Stat row + dash cards */
.tx-stat-row__value,
.tx-dash-card__title,
.tx-btc-value__amount { color: hsl(var(--tx-text)) !important; }
.tx-stat-row__label,
.tx-dash-card__sublabel,
.tx-btc-value__label { color: hsl(var(--tx-text-soft)) !important; }

/* Quick-trade form labels and controls */
.tx-quicktrade .form-label {
    color: hsl(var(--tx-text)) !important;
    font-weight: 500;
}
.tx-quicktrade .form-control,
.tx-quicktrade .form-select {
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
}
.tx-quicktrade .form-control::placeholder { color: hsl(var(--tx-text-soft) / .75) !important; opacity: 1 !important; }
.tx-quicktrade .form-select option { color: hsl(var(--tx-text)); background: hsl(var(--tx-surface)); }
.tx-quicktrade__hint { color: hsl(var(--tx-text-soft)) !important; }

/* Recent orders / transactions list */
.tx-dash-list__title { color: hsl(var(--tx-text)) !important; }
.tx-dash-list__desc  { color: hsl(var(--tx-text-soft)) !important; }
.tx-dash-list__date .day { color: hsl(var(--tx-text)) !important; }
.tx-dash-list__date .mon { color: hsl(var(--tx-text-soft)) !important; }

/* Sidebar nav text — main.css sometimes inlines hsl(var(--white)) */
.sidebar-menu-list__link,
.sidebar-menu-list__link .text { color: hsl(var(--tx-text-soft)) !important; }
.sidebar-menu-list__link:hover,
.sidebar-menu-list__link:hover .text { color: hsl(var(--tx-text)) !important; }
.sidebar-menu-list__link.active,
.sidebar-menu-list__link.active .text,
.sidebar-menu-list__link.active .icon { color: #ffffff !important; }

/* Top bar text */
.dashboard-header,
.dashboard-header * { color: hsl(var(--tx-text)); }
.copy-link .copyText { color: hsl(var(--tx-text)) !important; -webkit-text-fill-color: hsl(var(--tx-text)); }
.user-info__name { color: hsl(var(--tx-text)) !important; }
.user-info-dropdown__link { color: hsl(var(--tx-text)) !important; }
.user-info-dropdown__link:hover { color: hsl(var(--base)) !important; }

/* =====================================================================
   FP-Hero — 5-slide outer carousel with one inner symbol carousel
   ===================================================================== */
.fp-hero {
    position: relative;
    background:
        radial-gradient(1200px 600px at 20% -10%, hsl(var(--base) / .20), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, hsl(var(--base-two) / .15), transparent 60%),
        hsl(var(--tx-bg));
    padding: 60px 0 80px;
    overflow: hidden;
}
[data-theme="dark"] .fp-hero {
    background:
        radial-gradient(1200px 600px at 20% -10%, hsl(var(--base) / .28), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, hsl(var(--base-two) / .20), transparent 60%),
        hsl(var(--tx-bg));
}
.fp-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(hsl(var(--tx-border) / .35) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--tx-border) / .35) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
    pointer-events: none;
}
.fp-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ----- Slides ----- */
.fp-hero__slide {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    min-height: 520px;
    padding: 24px 0 48px;
}
@media (max-width: 991px) {
    .fp-hero__slide { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 16px 0 40px; }
}

.fp-hero__title {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: clamp(1.85rem, 2vw + 1rem, 3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
    background: none !important;
    margin: 0 0 18px;
}
.fp-hero__desc {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 560px;
}

.fp-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.fp-hero__actions--center { justify-content: center; }

.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 24px;
    border-radius: var(--tx-r-md);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    border: 1px solid transparent;
}
.fp-btn:hover { transform: translateY(-2px); }
.fp-btn--red {
    background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .35);
}
.fp-btn--red:hover  { background: hsl(var(--tx-danger-h) var(--tx-danger-s) calc(var(--tx-danger-l) - 6%)) !important; color: #fff !important; }
.fp-btn--gray {
    background: hsl(var(--tx-surface-2)) !important;
    color: hsl(var(--tx-text)) !important;
    border-color: hsl(var(--tx-border)) !important;
}
.fp-btn--gray:hover { background: hsl(var(--tx-surface)) !important; color: hsl(var(--tx-text)) !important; }

/* ----- Image side ----- */
.fp-hero__media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.fp-hero__media img,
.fp-hero__svg {
    max-width: 100%;
    max-height: 440px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px hsl(var(--base) / .25));
}
.fp-floating { animation: fp-float 5s ease-in-out infinite; }
@keyframes fp-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ----- Slide 4 — symbols ----- */
.fp-hero__slide--symbols {
    display: block !important;
    text-align: center;
    padding: 24px 0 56px;
    position: relative;
}
.fp-symbol-wrapper {
    position: relative;
    max-width: 100%;
    padding: 0 24px;
}
.fp-hero__slide--symbols .fp-hero__title,
.fp-hero__slide--symbols .fp-hero__desc {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Floating decoration SVGs */
.fp-fly {
    position: absolute;
    top: 0;
    width: 110px;
    height: 320px;
    pointer-events: none;
    display: none;
}
@media (min-width: 992px) {
    .fp-fly { display: block; }
}
.fp-fly--left  { left: -10px; }
.fp-fly--right { right: -10px; }
.fp-fly__item {
    position: absolute;
    width: 64px; height: 64px;
    border-radius: 999px;
    background: hsl(var(--tx-surface));
    box-shadow: 0 12px 30px hsl(var(--base) / .25);
    animation: fp-float 6s ease-in-out infinite;
}
.fp-fly__item svg { width: 100%; height: 100%; display: block; }
.fp-fly--left  .fp-fly__item--1 { left: 8px;   top: 14px;  animation-delay: 0s;   }
.fp-fly--left  .fp-fly__item--2 { left: 56px;  top: 110px; animation-delay: 1.2s; }
.fp-fly--left  .fp-fly__item--3 { left: 0;     top: 220px; animation-delay: 2.4s; }
.fp-fly--right .fp-fly__item--1 { right: 8px;  top: 30px;  animation-delay: .6s;  }
.fp-fly--right .fp-fly__item--2 { right: 50px; top: 130px; animation-delay: 1.8s; }
.fp-fly--right .fp-fly__item--3 { right: 0;    top: 232px; animation-delay: 3s;   }

/* Inner symbol carousel */
.fp-symbol-carousel {
    margin: 28px auto 28px;
    max-width: 920px;
}
.fp-symbol-carousel .slick-list { padding: 14px 0; }
.fp-symbol-carousel .slick-slide { padding: 0 8px; }
.fp-symbol-carousel .slick-track { display: flex !important; align-items: stretch; }

.fp-symbol-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 16px 12px 14px;
    text-align: center;
    box-shadow: var(--tx-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}
.fp-symbol-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--tx-shadow-md);
}
.fp-symbol-card__title {
    font-family: var(--heading-font);
    color: hsl(var(--tx-text)) !important;
    font-weight: 600;
    font-size: .92rem;
    margin: 0;
}
.fp-symbol-card__icon {
    width: 42px; height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 4px 0 6px;
}
.fp-symbol-card__ask {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text)) !important;
    font-size: 1.15rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.fp-symbol-card.up   .fp-symbol-card__ask { color: hsl(var(--base-two)) !important; }
.fp-symbol-card.down .fp-symbol-card__ask { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)) !important; }
.fp-symbol-card__spread {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: hsl(var(--tx-text-soft));
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
}
.fp-symbol-card.up   .fp-symbol-card__spread > span:first-child { color: hsl(var(--base-two)); }
.fp-symbol-card.down .fp-symbol-card__spread > span:first-child { color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }
.fp-symbol-card__sub {
    color: hsl(var(--tx-text-soft));
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-top: 1px;
}
.fp-symbol-card__cta {
    margin-top: 6px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--tx-r-sm);
    background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l));
    color: #fff !important;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: background .2s ease, transform .15s ease;
}
.fp-symbol-card__cta:hover {
    transform: translateY(-1px);
    background: hsl(var(--tx-danger-h) var(--tx-danger-s) calc(var(--tx-danger-l) - 6%));
    color: #fff !important;
}

/* Slick arrows on the inner carousel */
.fp-symbol-carousel .slick-prev,
.fp-symbol-carousel .slick-next {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: hsl(var(--tx-surface)) !important;
    border: 1px solid hsl(var(--tx-border)) !important;
    box-shadow: var(--tx-shadow-sm);
    z-index: 2;
}
.fp-symbol-carousel .slick-prev::before,
.fp-symbol-carousel .slick-next::before {
    color: hsl(var(--tx-text));
    font-family: 'Line Awesome Free';
    font-weight: 900;
    opacity: 1;
    font-size: 14px;
}
.fp-symbol-carousel .slick-prev::before { content: "\f060"; }
.fp-symbol-carousel .slick-next::before { content: "\f061"; }
.fp-symbol-carousel .slick-prev { left: -8px; }
.fp-symbol-carousel .slick-next { right: -8px; }

/* Slick dots on the outer hero */
.fp-hero__slides .slick-dots {
    bottom: 8px;
    text-align: center;
}
.fp-hero__slides .slick-dots li { margin: 0 4px; }
.fp-hero__slides .slick-dots li button {
    width: 12px; height: 12px;
    padding: 0;
}
.fp-hero__slides .slick-dots li button::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 999px;
    background: hsl(var(--tx-border));
    opacity: 1;
    transition: background .2s ease, transform .2s ease;
    position: absolute; top: 0; left: 0;
}
.fp-hero__slides .slick-dots li.slick-active button::before {
    background: var(--tx-gradient-brand);
    transform: scale(1.15);
}

/* Strip below hero (CMS-managed promo items) */
.fp-hero__strip-wrap { margin-top: 20px; }

/* =====================================================================
   FP-Products — tabbed instrument table (single table, hidden rows)
   ===================================================================== */
.fp-products { padding: 80px 0; background: hsl(var(--tx-bg)) !important; }
[data-theme="dark"] .fp-products { background: hsl(var(--tx-bg)) !important; }

.fp-products__heading {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 40px;
}
.fp-products__title {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.5vw + 1rem, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: hsl(var(--tx-text)) !important;
    -webkit-text-fill-color: hsl(var(--tx-text));
    background: none !important;
    margin: 0 0 16px;
}
.fp-products__desc {
    color: hsl(var(--tx-text-soft)) !important;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

/* Wrapper for tabs + table */
.fp-instruments {
    max-width: 1040px;
    margin: 0 auto;
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-md);
    overflow: hidden;
}

/* Tab row */
.fp-instruments__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 14px 14px 0;
    border-bottom: 1px solid hsl(var(--tx-border));
    background: hsl(var(--tx-surface-2));
}
.fp-instruments__tab {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    color: hsl(var(--tx-text-soft));
    font-weight: 600;
    font-size: .9rem;
    padding: 12px 14px;
    border-radius: var(--tx-r-md) var(--tx-r-md) 0 0;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    position: relative;
    bottom: -1px;
}
.fp-instruments__tab:hover { color: hsl(var(--tx-text)); background: hsl(var(--tx-surface)); }
.fp-instruments__tab.is-active {
    color: hsl(var(--base)) !important;
    background: hsl(var(--tx-surface)) !important;
    border-bottom: 3px solid hsl(var(--base));
}
.fp-instruments__tab .title { font-family: var(--heading-font); }
@media (max-width: 575px) {
    .fp-instruments__tab { flex: 0 0 auto; padding: 10px 12px; font-size: .82rem; }
}

/* Table */
.fp-instruments__table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: hsl(var(--tx-surface));
}
.fp-instruments__table thead th {
    background: transparent !important;
    color: hsl(var(--tx-text-soft)) !important;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    padding: 16px 22px;
    border-bottom: 1px solid hsl(var(--tx-border));
    text-align: left;
}
.fp-instruments__table thead th.num { text-align: right; }
.fp-instruments__table tbody td {
    padding: 14px 22px;
    border-bottom: 1px solid hsl(var(--tx-border) / .6);
    vertical-align: middle;
    color: hsl(var(--tx-text));
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.fp-instruments__table tbody td.num { text-align: right; }
.fp-instruments__table tbody tr:last-child td { border-bottom: none; }
.fp-instruments__row { transition: background .15s ease; }
.fp-instruments__row:hover { background: hsl(var(--base) / .04); }

/* Symbol cell */
.fp-sym {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fp-sym__logo {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: hsl(var(--base) / .12);
    color: hsl(var(--base));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .92rem;
    flex-shrink: 0;
    border: 1px solid hsl(var(--base) / .25);
}
.fp-sym__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.fp-sym__code {
    color: hsl(var(--tx-text)) !important;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.005em;
}
.fp-sym__name {
    color: hsl(var(--tx-text-soft));
    font-size: .8rem;
}

/* Spread pill with up/down colour */
.fp-spread {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    background: hsl(var(--tx-surface-2));
    color: hsl(var(--tx-text));
}
.fp-spread.up   { background: hsl(var(--base-two) / .12); color: hsl(var(--base-two)); }
.fp-spread.down { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12); color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }

/* Crypto rows: when the live polling sets up/down on the <tr>, paint the
   inline data-spread pill to match. */
.fp-instruments__row.up   [data-spread] { background: hsl(var(--base-two) / .12); color: hsl(var(--base-two)); }
.fp-instruments__row.down [data-spread] { background: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l) / .12); color: hsl(var(--tx-danger-h) var(--tx-danger-s) var(--tx-danger-l)); }

@media (max-width: 575px) {
    .fp-instruments__table thead { display: none; }
    .fp-instruments__table tbody td {
        padding: 10px 16px;
        font-size: .88rem;
    }
    .fp-sym__name { font-size: .72rem; }
}

/* ----- Why-trade-here strip (small CTA below tables) ----- */
.tx-why-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 56px;
}
.tx-why-strip__item {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 22px 24px;
    text-align: left;
    transition: transform .25s ease, border-color .25s ease;
}
.tx-why-strip__item:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--base) / .35);
}
.tx-why-strip__icon {
    width: 42px; height: 42px;
    border-radius: var(--tx-r-md);
    background: var(--tx-gradient-brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    font-size: 20px;
}
.tx-why-strip__title {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    font-size: 1.02rem;
    margin-bottom: 4px;
}
.tx-why-strip__desc {
    color: hsl(var(--tx-text-soft));
    font-size: .88rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 767px) {
    .tx-page-banner { padding: 90px 0 60px; }
}

/* =====================================================================
   Phase 3 — Content pages (about / contact / blog / policy / generic)
   ===================================================================== */

/* Compact page banner variant for content pages */
.tx-page-banner--compact {
    padding: 100px 0 60px;
}
.tx-page-banner--compact .tx-page-banner__title {
    font-size: clamp(1.75rem, 1.8vw + 1rem, 2.75rem);
}
.tx-page-banner__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: hsl(var(--tx-text-soft));
    margin-bottom: 18px;
}
.tx-page-banner__breadcrumb a {
    color: hsl(var(--tx-text-soft));
    text-decoration: none;
    transition: color .2s ease;
}
.tx-page-banner__breadcrumb a:hover { color: hsl(var(--base)); }
.tx-page-banner__breadcrumb i { font-size: .7rem; opacity: .5; }
.tx-page-banner__breadcrumb [aria-current="page"] { color: hsl(var(--tx-text)); font-weight: 500; }

/* Long-form prose container — used for policy / cookie / pages / blog details */
.tx-content-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-sm);
    padding: 48px;
}
@media (max-width: 767px) {
    .tx-content-card { padding: 28px; }
}
.tx-prose {
    color: hsl(var(--tx-text));
    font-size: 1.02rem;
    line-height: 1.75;
}
.tx-prose > * + * { margin-top: 1.1em; }
.tx-prose h1, .tx-prose h2, .tx-prose h3, .tx-prose h4 {
    color: hsl(var(--tx-text));
    font-family: var(--heading-font);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-top: 2em;
}
.tx-prose h1 { font-size: 2.1rem; }
.tx-prose h2 { font-size: 1.7rem; }
.tx-prose h3 { font-size: 1.35rem; }
.tx-prose h4 { font-size: 1.15rem; }
.tx-prose p, .tx-prose li { color: hsl(var(--tx-text-soft)); }
.tx-prose a {
    color: hsl(var(--base));
    text-decoration: underline;
    text-decoration-color: hsl(var(--base) / .35);
    text-underline-offset: 3px;
}
.tx-prose a:hover { text-decoration-color: hsl(var(--base)); }
.tx-prose ul, .tx-prose ol { padding-left: 1.4em; }
.tx-prose ul li { list-style: none; position: relative; padding-left: 0; }
.tx-prose ul li::before {
    content: "";
    position: absolute;
    left: -1.2em;
    top: .65em;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: hsl(var(--base));
}
.tx-prose blockquote {
    border-left: 3px solid hsl(var(--base));
    background: hsl(var(--base) / .05);
    padding: 16px 22px;
    border-radius: 0 var(--tx-r-md) var(--tx-r-md) 0;
    margin: 1.4em 0;
    color: hsl(var(--tx-text));
    font-style: italic;
}
.tx-prose hr {
    border: none;
    border-top: 1px solid hsl(var(--tx-border));
    margin: 2em 0;
}
.tx-prose img {
    max-width: 100%;
    border-radius: var(--tx-r-lg);
    margin: 1em 0;
}
.tx-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: .94rem;
}
.tx-prose table th, .tx-prose table td {
    border: 1px solid hsl(var(--tx-border));
    padding: 10px 14px;
    text-align: left;
}
.tx-prose table th { background: hsl(var(--tx-surface-2)); font-weight: 600; }
.tx-prose code {
    background: hsl(var(--tx-surface-2));
    padding: 2px 6px;
    border-radius: var(--tx-r-sm);
    font-size: .92em;
    color: hsl(var(--base));
}

/* ----- Contact page ----- */
.tx-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 991px) {
    .tx-contact-grid { grid-template-columns: 1fr; }
}
.tx-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tx-contact-card {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-lg);
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tx-contact-card:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--base) / .4);
    box-shadow: var(--tx-shadow-sm);
}
.tx-contact-card__icon {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: var(--tx-r-md);
    background: var(--tx-gradient-brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.tx-contact-card__label {
    color: hsl(var(--tx-text-soft));
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 2px;
}
.tx-contact-card__value {
    color: hsl(var(--tx-text));
    font-weight: 600;
    font-size: 1.05rem;
    word-break: break-word;
}
.tx-contact-card__value a {
    color: hsl(var(--tx-text)) !important;
    text-decoration: none;
}
.tx-contact-card__value a:hover { color: hsl(var(--base)) !important; }

.tx-contact-form {
    background: hsl(var(--tx-surface));
    border: 1px solid hsl(var(--tx-border));
    border-radius: var(--tx-r-xl);
    box-shadow: var(--tx-shadow-md);
    padding: 36px;
}
.tx-contact-form .form-group { margin-bottom: 18px; }
.tx-contact-form textarea { min-height: 140px; }
.tx-contact-form .form-label,
.tx-contact-form .form--label {
    color: hsl(var(--tx-text));
    font-weight: 500;
    margin-bottom: 8px;
}

/* ----- Blog details ----- */
.tx-blog-hero {
    position: relative;
    padding: 120px 0 60px;
    background:
        var(--tx-gradient-hero),
        hsl(var(--tx-bg));
}
.tx-blog-hero .container { position: relative; z-index: 1; }
.tx-blog-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: hsl(var(--tx-text-soft));
    font-size: .9rem;
    margin-bottom: 14px;
}
.tx-blog-hero__meta i { color: hsl(var(--base)); }
.tx-blog-hero__title {
    font-size: clamp(1.8rem, 2vw + 1rem, 3.25rem);
    line-height: 1.1;
    max-width: 920px;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(180deg, hsl(var(--tx-text)) 0%, hsl(var(--tx-text) / .75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tx-blog-thumb {
    border-radius: var(--tx-r-xl);
    overflow: hidden;
    box-shadow: var(--tx-shadow-md);
    margin-bottom: 32px;
}
.tx-blog-thumb img { width: 100%; display: block; }
.tx-blog-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid hsl(var(--tx-border));
}
.tx-blog-share__label {
    font-family: var(--heading-font);
    font-weight: 700;
    color: hsl(var(--tx-text));
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
    margin: 0;
}
.tx-blog-share .social-list { gap: 10px; }
.tx-blog-share .social-list a,
.tx-blog-share .social-list__icon {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: hsl(var(--tx-surface-2));
    color: hsl(var(--tx-text-soft)) !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid hsl(var(--tx-border));
    transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
    text-decoration: none;
}
.tx-blog-share .social-list a:hover,
.tx-blog-share .social-list__icon:hover {
    background: var(--tx-gradient-brand);
    color: #fff !important;
    border-color: transparent;
    transform: translateY(-2px);
}