/* ==========================================================================
   binance-theme.css — Binance-style dark theme for the trading platform
   ==========================================================================
   Complete visual overhaul: dark background (#0B0E11), Binance yellow accent
   (#FCD535), green (#0ECB81) / red (#F6465D) for buy/sell, glass sidebar,
   compact data-dense layouts, mobile-first responsive.
   Loads AFTER main.css, custom.css and pro-theme.css — overrides win.
   ========================================================================== */

/* ---- 1. ROOT TOKENS ---- */

:root {
    /* Binance color palette — adjusted to match Figma design */
    --bn-bg:          #000000;
    --bn-bg-elevated: #101010;
    --bn-bg-hover:    #1A1A1A;
    --bn-bg-active:   #2B2B2B;
    --bn-border:      #2B2B2B;
    --bn-border-light:#1A1A1A;
    --bn-text:        #EAECEF;
    --bn-text-secondary: #848E9C;
    --bn-text-muted:  #5E6673;
    --bn-yellow:      #E0F090;
    --bn-yellow-dark: #C0D070;
    --bn-yellow-hover:#E0F090;
    --bn-green:       #009030;
    --bn-green-bg:    rgba(0, 144, 48, 0.1);
    --bn-red:         #E01000;
    --bn-red-bg:      rgba(224, 16, 0, 0.1);
    --bn-blue:        #4A8DFF;

    /* Override template tokens to Binance values */
    --body-bg-h: 220;
    --body-bg-s: 10%;
    --body-bg-l: 5%;
    --body-bg: var(--body-bg-h) var(--body-bg-s) var(--body-bg-l);

    --body-h: 220;
    --body-s: 6%;
    --body-l: 55%;
    --body-color: var(--body-h) var(--body-s) var(--body-l);

    --section-bg: 220 10% 7%;
    --card-bg: 220 10% 6%;

    /* Base color -> Binance yellow */
    --base-h: 45;
    --base-s: 96%;
    --base-l: 58%;
    --base: var(--base-h) var(--base-s) var(--base-l);

    --success: 158 96% 40%;
    --danger: 352 91% 57%;
    --warning: 38 96% 56%;

    --border-color: 220 10% 18%;

    /* Font */
    --heading-font: "Inter", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --body-font: "Inter", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- 2. GLOBAL RESETS ---- */

body {
    background-color: var(--bn-bg) !important;
    color: var(--bn-text) !important;
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bn-text) !important;
    font-family: var(--heading-font) !important;
}

a {
    color: var(--bn-text-secondary);
    transition: color 0.15s ease;
}

a:hover {
    color: var(--bn-yellow);
    text-decoration: none;
}

/* ---- 3. SCROLLBAR ---- */

* {
    scrollbar-width: thin;
    scrollbar-color: #2B3139 transparent;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #2B3139;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #3a4049;
}

/* ---- 4. BUTTONS ---- */

.btn--base {
    background: var(--bn-yellow) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    transition: background 0.15s ease, opacity 0.15s ease !important;
}

.btn--base:hover {
    background: var(--bn-yellow-dark) !important;
    color: #000 !important;
    opacity: 0.9;
}

.btn--base:active {
    transform: scale(0.98);
}

.btn--base.outline {
    background: transparent !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
}

.btn--base.outline:hover {
    border-color: var(--bn-yellow) !important;
    color: var(--bn-yellow) !important;
    background: transparent !important;
}

.btn--sm {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ---- 5. SIDEBAR (Binance-style left nav) ---- */

.dashboard-fluid .sidebar-menu {
    background: var(--bn-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--bn-border-light) !important;
    width: 240px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Fix dashboard right content width — must match sidebar width */
.dashboard-fluid .dashboard__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    background: var(--bn-bg) !important;
}

.dashboard-fluid .dashboard__right {
    width: calc(100% - 240px) !important;
    margin-left: 0 !important;
    flex: 1;
    min-width: 0;
    background: var(--bn-bg) !important;
}

@media screen and (max-width: 1199px) {
    .dashboard-fluid .dashboard__right {
        width: 100% !important;
    }
}

.dashboard-fluid .sidebar-logo {
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.dashboard-fluid .sidebar-logo img {
    height: 32px;
    filter: brightness(0) invert(1);
}

.dashboard-fluid .sidebar-menu-list {
    padding: 8px 0;
}

.dashboard-fluid .sidebar-menu-list__item {
    margin: 1px 8px;
}

.dashboard-fluid .sidebar-menu-list__link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    color: var(--bn-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    border: none !important;
}

.dashboard-fluid .sidebar-menu-list__link:hover {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-text) !important;
    transform: none !important;
}

.dashboard-fluid .sidebar-menu-list__link .icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--bn-text-secondary);
}

.dashboard-fluid .sidebar-menu-list__item.active > a {
    background: var(--bn-bg-active) !important;
    color: var(--bn-yellow) !important;
    box-shadow: none !important;
}

.dashboard-fluid .sidebar-menu-list__item.active > a::before {
    display: none !important;
}

.dashboard-fluid .sidebar-menu-list__item.active > a .icon {
    color: var(--bn-yellow);
}

/* ---- 6. TOPBAR ---- */

.dashboard-header {
    background: var(--bn-bg) !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
    box-shadow: none !important;
    height: 56px;
    display: flex;
    align-items: center;
}

.dashboard-header__inner {
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copy-link input.copyText {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text-secondary) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
}

.copy-link__button {
    background: var(--bn-bg-hover) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text-secondary) !important;
}

.user-info__name {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.user-info-dropdown {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    padding: 4px !important;
}

.user-info-dropdown__link {
    color: var(--bn-text-secondary) !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

.user-info-dropdown__link:hover {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-text) !important;
}

.trade-btn {
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* ---- 7. DASHBOARD BODY ---- */

.dashboard-body {
    background: var(--bn-bg) !important;
    padding: 24px !important;
    min-height: calc(100vh - 56px);
}

.dashboardBodyNav {
    padding: 0 0 16px 0;
}

/* ---- 8. HERO BALANCE CARD (Binance portfolio card) ---- */

.pro-hero {
    background: linear-gradient(135deg, var(--bn-bg-elevated), var(--bn-bg-hover)) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 12px !important;
    padding: 28px 32px !important;
    margin-bottom: 20px !important;
    position: relative;
    overflow: hidden;
}

.pro-hero__glow {
    position: absolute;
    top: -40%;
    right: -5%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 213, 53, 0.08), transparent 70%);
    pointer-events: none;
}

.pro-hero__label {
    font-size: 12px !important;
    color: var(--bn-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px !important;
}

.pro-hero__amount {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: var(--bn-text) !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.5px;
}

.pro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.pro-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px !important;
    border-radius: 4px !important;
    border: 1px solid var(--bn-border) !important;
    background: var(--bn-bg-elevated) !important;
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pro-hero__btn:hover {
    border-color: var(--bn-yellow) !important;
    color: var(--bn-yellow) !important;
    transform: none !important;
}

.pro-hero__btn--primary {
    background: var(--bn-yellow) !important;
    border-color: var(--bn-yellow) !important;
    color: #000 !important;
}

.pro-hero__btn--primary:hover {
    background: var(--bn-yellow-dark) !important;
    color: #000 !important;
    border-color: var(--bn-yellow-dark) !important;
}

/* Hero stats row */
.pro-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--bn-border-light);
}

.pro-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}

.pro-hero__stat-label {
    font-size: 11px;
    color: var(--bn-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pro-hero__stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bn-text);
}

/* ---- 9. CARDS ---- */

.custom--card,
.right-sidebar,
.transection {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.custom--card .card-header,
.right-sidebar__header {
    border-bottom: 1px solid var(--bn-border-light) !important;
    padding: 16px 20px !important;
}

.right-sidebar__header h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bn-text) !important;
}

.right-sidebar__header p {
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
}

.right-sidebar__number {
    color: var(--bn-text) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.right-sidebar__item {
    border-bottom: 1px solid var(--bn-border-light) !important;
    padding: 12px 20px !important;
    transition: background 0.12s ease;
}

.right-sidebar__item:hover {
    background: var(--bn-bg-hover) !important;
}

.right-sidebar__item-name {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.right-sidebar__item-name span {
    color: var(--bn-text-secondary) !important;
    font-size: 11px !important;
}

.right-sidebar__item-number {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ---- 10. DASHBOARD CARDS (stat widgets) ---- */

.dashboard-card {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    transition: border-color 0.15s ease;
}

.dashboard-card:hover {
    border-color: var(--bn-yellow) !important;
    transform: none !important;
    box-shadow: none !important;
}

.dashboard-card__coin-name {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.dashboard-card__coin-title {
    color: var(--bn-text) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.dashboard-card__icon {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ---- 11. TRANSACTION / ORDER LIST ITEMS ---- */

.transection__title {
    color: var(--bn-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.transection__item {
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
    transition: background 0.12s ease;
}

.transection__item:hover {
    background: var(--bn-bg-hover) !important;
}

.transection__item:last-child {
    border-bottom: none;
}

.transection__content-title h6 {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.transection__content-desc {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

.transection__date-number {
    color: var(--bn-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.transection__date-text {
    color: var(--bn-text-muted) !important;
    font-size: 10px !important;
    text-transform: uppercase;
}

/* Avatar circles for buy/sell indicators */
.pro-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.pro-avatar--success {
    background: var(--bn-green-bg) !important;
    color: var(--bn-green) !important;
}

.pro-avatar--danger {
    background: var(--bn-red-bg) !important;
    color: var(--bn-red) !important;
}

/* ---- 12. TABLES ---- */

.table-wrapper {
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: var(--bn-bg-elevated) !important;
}

.table {
    color: var(--bn-text) !important;
    margin-bottom: 0 !important;
}

.table thead tr th {
    background: var(--bn-bg) !important;
    color: var(--bn-text-secondary) !important;
    border-bottom: 1px solid var(--bn-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 12px 16px !important;
    white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid var(--bn-border-light) !important;
    transition: background 0.12s ease;
}

.table tbody tr:hover td {
    background: var(--bn-bg-hover) !important;
}

.table tbody td {
    color: var(--bn-text) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    vertical-align: middle;
}

.table-responsive {
    border-radius: 8px;
}

/* ---- 13. BADGES ---- */

.badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
}

.badge--success {
    background: var(--bn-green-bg) !important;
    color: var(--bn-green) !important;
}

.badge--danger {
    background: var(--bn-red-bg) !important;
    color: var(--bn-red) !important;
}

.badge--warning {
    background: rgba(252, 213, 53, 0.1) !important;
    color: var(--bn-yellow) !important;
}

.badge--primary {
    background: var(--bn-bg-active) !important;
    color: var(--bn-text) !important;
}

.badge--dark {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-text-secondary) !important;
}

/* ---- 14. TEXT COLORS ---- */

.text--success {
    color: var(--bn-green) !important;
}

.text--danger {
    color: var(--bn-red) !important;
}

.text--base {
    color: var(--bn-yellow) !important;
}

.text--warning {
    color: var(--bn-yellow-dark) !important;
}

.text-white {
    color: var(--bn-text) !important;
}

/* ---- 15. FORMS ---- */

.form--control,
.form-control {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    transition: border-color 0.15s ease;
}

.form--control:focus,
.form-control:focus {
    background: var(--bn-bg) !important;
    border-color: var(--bn-yellow) !important;
    color: var(--bn-text) !important;
    box-shadow: 0 0 0 1px rgba(252, 213, 53, 0.2) !important;
}

.form--control::placeholder,
.form-control::placeholder {
    color: var(--bn-text-muted) !important;
}

.input-group-text {
    background: var(--bn-bg-hover) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text-secondary) !important;
}

.form-label,
label {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

/* ---- 16. ALERTS ---- */

.alert {
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
}

.alert--danger {
    background: var(--bn-red-bg) !important;
    border: 1px solid rgba(246, 70, 93, 0.3) !important;
    border-left: 3px solid var(--bn-red) !important;
    color: var(--bn-red) !important;
}

.alert--warning {
    background: rgba(252, 213, 53, 0.08) !important;
    border: 1px solid rgba(252, 213, 53, 0.2) !important;
    border-left: 3px solid var(--bn-yellow) !important;
}

.alert-heading {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ---- 17. TABS ---- */

.dashboard-header-menu__link,
.table-header-menu__link {
    color: var(--bn-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease;
}

.dashboard-header-menu__link:hover,
.table-header-menu__link:hover {
    color: var(--bn-text) !important;
    background: var(--bn-bg-hover) !important;
}

.dashboard-header-menu__link.active,
.table-header-menu__link.active {
    color: var(--bn-yellow) !important;
    background: rgba(252, 213, 53, 0.08) !important;
}

/* ---- 18. TRADING TERMINAL ---- */

.trading-section {
    background: var(--bn-bg) !important;
    padding: 0 !important;
}

.trading-section .container {
    max-width: 100% !important;
    padding: 0 !important;
}

.trading-left,
.trading-right,
.trading-middle,
.order-form-wrapper {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
}

.trading-header {
    background: var(--bn-bg-elevated) !important;
    border-bottom: 1px solid var(--bn-border) !important;
    padding: 12px 16px !important;
}

/* Order book */
.sell-side-order-list .price__item {
    color: var(--bn-red) !important;
}

.buy-side-order-list .price__item {
    color: var(--bn-green) !important;
}

.trading-left__list {
    padding: 4px 12px !important;
    border-radius: 2px !important;
    transition: background 0.1s ease;
    font-size: 12px !important;
}

.trading-left__list:hover {
    background: var(--bn-bg-hover) !important;
}

/* Trading chart */
.trading-chart-pro {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    margin-top: 0 !important;
}

/* Buy/Sell form tabs */
.trade-tab__link {
    color: var(--bn-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
}

.trade-tab__link.active {
    color: var(--bn-text) !important;
}

/* Buy button = green, Sell button = red (Binance style) */
.buy-form .btn--base,
.btn--buy {
    background: var(--bn-green) !important;
    color: #fff !important;
}

.buy-form .btn--base:hover,
.btn--buy:hover {
    background: rgba(14, 203, 129, 0.85) !important;
    color: #fff !important;
}

.sell-form .btn--base,
.btn--sell {
    background: var(--bn-red) !important;
    color: #fff !important;
}

.sell-form .btn--base:hover,
.btn--sell:hover {
    background: rgba(246, 70, 93, 0.85) !important;
    color: #fff !important;
}

/* Pair list sidebar */
.trading-sidebar {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Market ticker bar */
.pro-ticker {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px 0;
}

.pro-ticker__item {
    font-size: 12px !important;
    color: var(--bn-text-secondary) !important;
    padding: 0 20px;
    white-space: nowrap;
}

.pro-ticker__item b {
    color: var(--bn-text) !important;
    font-weight: 600 !important;
}

.pro-ticker__at {
    color: var(--bn-text-muted) !important;
}

/* ---- 19. BOTTOM NAV (mobile) ---- */

.pro-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bn-bg-elevated) !important;
    border-top: 1px solid var(--bn-border) !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
    z-index: 1000;
    height: 56px;
}

.pro-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--bn-text-secondary) !important;
    font-size: 10px !important;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 6px;
    transition: color 0.15s ease;
}

.pro-bottomnav__item i {
    font-size: 20px;
}

.pro-bottomnav__item.active {
    color: var(--bn-yellow) !important;
}

.pro-bottomnav__item--fab {
    background: var(--bn-yellow) !important;
    color: #000 !important;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    margin-top: -20px;
    box-shadow: 0 4px 12px rgba(252, 213, 53, 0.3);
    justify-content: center;
}

.pro-bottomnav__item--fab i {
    font-size: 22px;
}

/* ---- 20. MODAL ---- */

.modal-content {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 12px !important;
}

.modal-header {
    border-bottom: 1px solid var(--bn-border-light) !important;
    padding: 16px 20px !important;
}

.modal-title {
    color: var(--bn-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.modal-body {
    color: var(--bn-text-secondary) !important;
    padding: 20px !important;
}

.btn-close {
    color: var(--bn-text-secondary) !important;
}

/* ---- 21. SELECT2 DARK ---- */

.select2-dropdown {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--bn-bg) !important;
    border-color: var(--bn-border) !important;
    border-radius: 4px !important;
    height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bn-text) !important;
    line-height: 42px !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--bn-bg-hover) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bn-bg-active) !important;
    color: var(--bn-yellow) !important;
}

/* ---- 22. PRELOADER ---- */

.preloader {
    background: var(--bn-bg) !important;
}

/* ---- 23. SECURITY PAGE ---- */

.security-tab-nav {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.security-tab-nav .nav-link {
    color: var(--bn-text-secondary) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.security-tab-nav .nav-link.active {
    background: var(--bn-yellow) !important;
    color: #000 !important;
}

.sesscard {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
}

.sesscard:hover {
    border-color: var(--bn-yellow) !important;
    background: var(--bn-bg-hover) !important;
}

.sesscard.current {
    border-color: var(--bn-green) !important;
    background: var(--bn-green-bg) !important;
}

.sesscard__icon {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
}

.sesscard__title {
    color: var(--bn-text) !important;
}

.sesscard__meta {
    color: var(--bn-text-secondary) !important;
}

.sesscard__revoke {
    border-color: var(--bn-red) !important;
    color: var(--bn-red) !important;
    background: transparent !important;
}

.sesscard__revoke:hover {
    background: var(--bn-red-bg) !important;
}

/* ---- 24. DEPOSIT / WITHDRAW FORMS ---- */

.deposit__button {
    background: var(--bn-yellow) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.deposit__button:hover {
    background: var(--bn-yellow-dark) !important;
}

/* ---- 25. PAGINATION ---- */

.pagination .page-link {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text-secondary) !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    font-size: 13px !important;
}

.pagination .page-link:hover {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
    border-color: var(--bn-yellow) !important;
}

.pagination .active .page-link {
    background: var(--bn-yellow) !important;
    color: #000 !important;
    border-color: var(--bn-yellow) !important;
}

/* ---- 26. EMPTY STATES ---- */

.empty-thumb p {
    color: var(--bn-text-muted) !important;
}

/* ---- 27. OFFCANVAS ---- */

.offcanvas {
    background: var(--bn-bg-elevated) !important;
    border-left: 1px solid var(--bn-border) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--bn-border-light) !important;
}

/* ==========================================================================
   28. RESPONSIVE — MOBILE FIRST
   ========================================================================== */

@media screen and (max-width: 1199px) {
    /* Sidebar becomes drawer */
    .dashboard-fluid .sidebar-menu {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }

    .dashboard-fluid .sidebar-menu.active,
    .dashboard-fluid .sidebar-menu.show {
        transform: translateX(0);
    }

    .dashboard-fluid .dashboard__right {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .sidebar-overlay.show,
    .sidebar-overlay.active {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .dashboard-body {
        padding: 16px !important;
        padding-bottom: 70px !important;
    }

    /* Topbar: hide ref link on mobile */
    .dashboard-header__left {
        display: none !important;
    }

    .dashboard-header__inner {
        padding: 0 16px;
    }
}

@media screen and (max-width: 767px) {
    .pro-hero {
        padding: 20px 16px !important;
        border-radius: 8px !important;
    }

    .pro-hero__amount {
        font-size: 1.6rem !important;
    }

    .pro-hero__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pro-hero__stat-value {
        font-size: 1rem;
    }

    .pro-hero__btn {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Stack dashboard columns */
    .dashboard-body .row {
        margin: 0;
    }

    /* Tables become card-like */
    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        margin-bottom: 8px;
        border: 1px solid var(--bn-border) !important;
        border-radius: 8px;
        padding: 8px 0;
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .table tbody td::before {
        content: attr(data-label);
        color: var(--bn-text-secondary);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
    }

    /* Trading terminal: stack vertically */
    .trading-section .row {
        flex-direction: column;
    }

    .trading-section .row > [class*="col-"] {
        width: 100%;
        margin-bottom: 8px;
        padding: 0 12px;
    }

    /* Bottom nav visible */
    .pro-bottomnav {
        display: flex !important;
    }

    /* Hide topbar trade button on small screens */
    .trade-btn {
        display: none !important;
    }

    /* Dashboard cards: 2 columns on mobile */
    .dashboard-card-wrapper .col-sm-6 {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 480px) {
    .pro-hero__stats {
        grid-template-columns: 1fr 1fr;
    }

    .pro-hero__actions {
        flex-direction: row;
    }

    .pro-hero__btn {
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .dashboard-body {
        padding: 12px !important;
        padding-bottom: 70px !important;
    }
}

/* ==========================================================================
   29. UTILITY OVERRIDES
   ========================================================================== */

.bg-color {
    background: var(--bn-bg) !important;
}

.fs-14 {
    font-size: 13px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-18 {
    font-size: 16px !important;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-align {
    display: flex;
    align-items: center;
}

/* Skeleton loading shimmer */
.skeleton {
    background: var(--bn-bg-elevated) !important;
}

/* Dashboard right panel (wallet overview) */
.dashboard-right {
    padding: 0;
}

/* Fix dashboard layout spacing */
.dashboard__inner {
    background: var(--bn-bg) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

.dashboard__right {
    background: var(--bn-bg) !important;
    width: calc(100% - 240px) !important;
    margin-left: 0 !important;
    flex: 1;
    min-width: 0;
}

@media (max-width: 1199px) {
    .dashboard__right {
        width: 100% !important;
    }
}

/* Override pro-theme.css glow effects with Binance subtler version */
body.theme-no-glow .pro-hero__glow {
    display: none !important;
}

body.theme-surface-slate .dashboard-fluid .sidebar-menu {
    background: #131722 !important;
}

body.theme-surface-flat .pro-hero,
body.theme-surface-flat .dashboard-card,
body.theme-surface-flat .right-sidebar {
    background: var(--bn-bg-elevated) !important;
}

/* ==========================================================================
   30. PRINT FONT (Inter from Google Fonts)
   ========================================================================== */

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

/* ==========================================================================
   31. TRADING TERMINAL — Binance Pro layout
   ========================================================================== */

/* Remove default page padding, make trading full-width */
.trading-section {
    background: var(--bn-bg) !important;
    padding: 0 !important;
    min-height: calc(100vh - 56px);
}

.trading-section .container.custom--container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.trading-section .row {
    margin: 0 !important;
    --bs-gutter-x: 0;
}

.trading-section .row > [class*="col-"] {
    padding: 0 !important;
}

/* ---- 31.1 Pair header bar (symbol + price + stats) ---- */

.trading-header {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 0;
    border-bottom: 1px solid var(--bn-border) !important;
}

.trading-header__title {
    color: var(--bn-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.3px;
}

.trading-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trading-header .text--base,
.trading-header span.fs-12 {
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.trading-header-number,
.trading-header__number {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.trading-header .up,
.trading-header [class*="up"] {
    color: var(--bn-green) !important;
}

.trading-header .down,
.trading-header [class*="down"] {
    color: var(--bn-red) !important;
}

/* ---- 31.2 Order Book ---- */

.trading-left {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.trading-left__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.trading-left__top-title {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.trading-left__top .nav-pills .nav-item {
    margin: 0 2px;
}

.trading-left__top .nav-pills .nav-link {
    color: var(--bn-text-secondary) !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    background: transparent !important;
    font-weight: 500 !important;
    transition: all 0.12s ease;
}

.trading-left__top .nav-pills .nav-link.active {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
}

.trading-left__top .nav-pills .nav-link:hover {
    color: var(--bn-text) !important;
}

/* Order book header row */
.trading-left__header {
    padding: 6px 16px !important;
    font-size: 11px !important;
    color: var(--bn-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.trading-left__header .price__title,
.trading-left__header .amount__title,
.trading-left__header .total__title {
    font-size: 11px !important;
    color: var(--bn-text-muted) !important;
    font-weight: 500 !important;
}

/* Order book rows */
.trading-left__list {
    padding: 3px 16px !important;
    font-size: 12px !important;
    font-family: "Inter", monospace !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background 0.08s ease;
    position: relative;
}

.trading-left__list:hover {
    background: var(--bn-bg-hover) !important;
}

.trading-left__list .price__item,
.trading-left__list .amount__item,
.trading-left__list .total__item {
    font-size: 12px !important;
    font-weight: 500 !important;
    list-style: none;
}

/* Sell side = red */
.sell-side-order-list .price__item {
    color: var(--bn-red) !important;
}

/* Buy side = green */
.buy-side-order-list .price__item {
    color: var(--bn-green) !important;
}

.trading-left__list .amount__item,
.trading-left__list .total__item {
    color: var(--bn-text-secondary) !important;
}

/* Highlight my orders */
.trading-left__list.has-my-order {
    background: rgba(252, 213, 53, 0.05) !important;
}

.trading-left__list.has-my-order::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bn-yellow);
}

/* Order book middle price */
.trading-left__bottom-title {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    background: var(--bn-bg) !important;
    border-top: 1px solid var(--bn-border-light) !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.trading-left__bottom-title .up,
.trading-left__bottom-title [class*="up"] {
    color: var(--bn-green) !important;
}

.trading-left__bottom-title .down,
.trading-left__bottom-title [class*="down"] {
    color: var(--bn-red) !important;
}

/* ---- 31.3 Buy/Sell form ---- */

.trading-bottom {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    padding: 16px !important;
}

.trading-bottom__header {
    margin-bottom: 16px !important;
}

.trading-bottom .nav-pills .nav-item {
    margin-right: 4px;
}

.trading-bottom .nav-pills .nav-link {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    background: transparent !important;
    transition: all 0.12s ease;
}

.trading-bottom .nav-pills .nav-link.active {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
}

.trading-bottom .nav-pills .nav-link:hover {
    color: var(--bn-text) !important;
}

/* Buy/Sell form wrapper */
.trading-bottom__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 767px) {
    .trading-bottom__wrapper {
        grid-template-columns: 1fr;
    }
}

/* Form labels and inputs in trade form */
.trading-bottom label,
.trading-bottom .form-label {
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px !important;
}

.trading-bottom .form--control,
.trading-bottom .form-control {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 38px;
}

.trading-bottom .input-group-text {
    background: var(--bn-bg-hover) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

/* Available balance display */
.trading-bottom .avl-bal,
.trading-bottom .available-balance {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

/* Range slider */
.buy-amount-range,
.sell-amount-range {
    display: flex;
    gap: 4px;
    margin: 8px 0;
}

.range-list__number {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 4px;
    color: var(--bn-text-secondary) !important;
    font-size: 11px !important;
    cursor: pointer;
    transition: all 0.12s ease;
}

.range-list__number:hover,
.range-list__number.active {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
    border-color: var(--bn-yellow) !important;
}

/* UI slider overrides */
.ui-slider {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 4px !important;
    height: 4px !important;
}

.ui-slider .ui-widget-header {
    background: var(--bn-yellow) !important;
    border-radius: 4px !important;
}

.ui-slider .ui-state-default,
.ui-slider .ui-slider-handle {
    background: var(--bn-yellow) !important;
    border: 2px solid var(--bn-bg) !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer;
}

/* Buy/Sell buttons */
.trading-bottom .btn--base,
.btn--base-two {
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    transition: all 0.15s ease !important;
}

/* Buy = green Binance */
.buy-form .btn--base,
.buy-form .btn--base-two,
.btn--buy,
.buy-btn .btn--base,
.buy-btn .btn--base-two,
.buy-btn-sm {
    background: var(--bn-green) !important;
    color: #fff !important;
    border: none !important;
}

.buy-form .btn--base:hover,
.buy-form .btn--base-two:hover,
.btn--buy:hover,
.buy-btn .btn--base:hover,
.buy-btn-sm:hover {
    background: rgba(14, 203, 129, 0.85) !important;
    color: #fff !important;
}

/* Sell = red Binance */
.sell-form .btn--base,
.sell-form .btn--base-two,
.btn--sell,
.sell-btn .btn--danger,
.sell-btn-sm {
    background: var(--bn-red) !important;
    color: #fff !important;
    border: none !important;
}

.sell-form .btn--base:hover,
.sell-form .btn--base-two:hover,
.btn--sell:hover,
.sell-btn .btn--danger:hover,
.sell-btn-sm:hover {
    background: rgba(246, 70, 93, 0.85) !important;
    color: #fff !important;
}

/* Mobile fixed buy/sell bar */
.trading-bottom__fixed {
    position: sticky;
    bottom: 56px;
    z-index: 100;
    background: var(--bn-bg-elevated) !important;
    border-top: 1px solid var(--bn-border) !important;
    padding: 8px 12px !important;
}

.trading-bottom__footer {
    gap: 8px;
}

.trading-bottom__button {
    flex: 1;
}

/* ---- 31.4 Market list sidebar (pair list) ---- */

.trading-right {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.trading-right__top {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.trading-right__title {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.trading-right__top .input--group {
    position: relative;
}

.trading-right__top .form--control.style-two {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 4px !important;
    color: var(--bn-text) !important;
    font-size: 12px !important;
    padding: 6px 12px 6px 32px !important;
    height: 32px;
}

.trading-right__top .search-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: var(--bn-text-muted) !important;
    padding: 0 !important;
}

/* Market tabs (swiper) */
.trading-right__tab .nav-pills .nav-link {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    background: transparent !important;
    white-space: nowrap;
}

.trading-right__tab .nav-pills .nav-link.active {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
}

/* Market list header */
.trading-market__header {
    padding: 6px 16px !important;
    font-size: 11px !important;
    color: var(--bn-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

/* Market list rows */
.market__list {
    padding: 8px 16px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    margin: 0 !important;
    transition: background 0.08s ease;
    cursor: pointer;
}

.market__list:hover {
    background: var(--bn-bg-hover) !important;
}

.market__pair-item a {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none;
}

.market__pair-item a:hover {
    color: var(--bn-yellow) !important;
}

.market__pair-icon.favorite-btn {
    color: var(--bn-text-muted) !important;
    font-size: 12px !important;
    margin-right: 8px;
    cursor: pointer;
}

.market__pair-icon.favorite-btn.text--gold,
.market__pair-icon.favorite-btn:hover {
    color: var(--bn-yellow) !important;
}

.market__change-item,
.market__price-item {
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: "Inter", monospace !important;
}

.market__change-item .up,
.market__price-item .up,
.market__change-item [class*="up"],
.market__price-item [class*="up"] {
    color: var(--bn-green) !important;
}

.market__change-item .down,
.market__price-item .down,
.market__change-item [class*="down"],
.market__price-item [class*="down"] {
    color: var(--bn-red) !important;
}

/* ---- 31.5 Trade history ---- */

.trading-right__bottom {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-top: none !important;
}

.trading-history__title {
    color: var(--bn-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
    background: var(--bn-bg-elevated) !important;
}

.history__list {
    padding: 4px 16px !important;
    font-size: 12px !important;
    font-family: "Inter", monospace !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    cursor: pointer;
    transition: background 0.08s ease;
}

.history__list:hover {
    background: var(--bn-bg-hover) !important;
}

.history__amount-item {
    color: var(--bn-green) !important;
    font-weight: 500 !important;
}

.history__amount-item.text-danger {
    color: var(--bn-red) !important;
}

.history__price-item {
    color: var(--bn-text-secondary) !important;
}

.history__date-item {
    color: var(--bn-text-muted) !important;
    font-size: 11px !important;
}

/* ---- 31.6 My orders table in trade page ---- */

.trading-table {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    margin-top: 8px;
}

.trading-table__header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.trading-table__title {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.trading-table .nav-pills .nav-link {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    background: transparent !important;
}

.trading-table .nav-pills .nav-link.active {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
}

.table-wrapper-two {
    background: var(--bn-bg-elevated) !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.table-two thead tr th {
    background: var(--bn-bg) !important;
    color: var(--bn-text-muted) !important;
    border-bottom: 1px solid var(--bn-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 10px 16px !important;
    white-space: nowrap;
}

.table-two tbody tr {
    border-bottom: 1px solid var(--bn-border-light) !important;
}

.table-two tbody tr:hover td {
    background: var(--bn-bg-hover) !important;
}

.table-two tbody td {
    color: var(--bn-text) !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
}

/* Order amount/rate inline edit */
.order--amount-rate-wrapper .order-amount {
    font-size: 12px !important;
    color: var(--bn-text) !important;
    font-weight: 500 !important;
}

.amount-rate-update {
    color: var(--bn-text-muted) !important;
    cursor: pointer;
    margin-left: 4px;
}

.amount-rate-update:hover {
    color: var(--bn-yellow) !important;
}

/* ---- 31.7 Trading layout grid ---- */

@media (min-width: 1200px) {
    .trading-section .row {
        display: grid !important;
        grid-template-columns: 280px 1fr 320px;
        gap: 0;
    }

    .trading-section .row > .col-xl-3:first-child {
        grid-column: 1;
    }

    .trading-section .row > .col-xl-9 {
        grid-column: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .trading-section .row > .col-xl-3:last-child {
        grid-column: 3;
    }
}

/* ---- 31.8 Chart container ---- */

.trading-chart-pro,
[id*="tradingView"],
.tradingview-chart-container {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
}

/* ---- 31.9 Trading sidebar wrapper ---- */

.trading-sidebar {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.trading-sidebar .trading-right {
    border: none !important;
    flex: 1;
}

.trading-sidebar .trading-right__bottom {
    border-top: 1px solid var(--bn-border) !important;
}

/* ---- 31.10 Mobile trading layout ---- */

@media (max-width: 1199px) {
    .trading-section .row {
        display: flex !important;
        flex-direction: column;
    }

    .trading-section .row > [class*="col-"] {
        width: 100%;
        margin-bottom: 0;
    }

    .trading-header {
        gap: 16px;
        padding: 12px 16px !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .trading-header__title {
        font-size: 18px !important;
    }

    .trading-left {
        max-height: 320px;
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .trading-header {
        gap: 12px;
    }

    .trading-header > div {
        min-width: 70px;
    }

    .trading-bottom {
        padding: 12px !important;
    }

    .trading-bottom__wrapper {
        gap: 12px;
    }

    .market__list {
        padding: 8px 12px !important;
    }

    .trading-left__list {
        padding: 3px 12px !important;
        font-size: 11px !important;
    }

    .history__list {
        padding: 4px 12px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   32. SECURITY / SESSIONS PAGE — Binance-style
   ========================================================================== */

/* ---- 32.1 Tab navigation ---- */

.security-tab-nav {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    display: inline-flex;
    gap: 2px;
    margin-bottom: 20px !important;
    flex-wrap: wrap;
}

.security-tab-nav .nav-item {
    margin: 0;
}

.security-tab-nav .nav-link {
    color: var(--bn-text-secondary) !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.security-tab-nav .nav-link:hover {
    color: var(--bn-text) !important;
    background: var(--bn-bg-hover) !important;
}

.security-tab-nav .nav-link.active {
    background: var(--bn-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
}

.security-tab-nav .badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

.security-tab-nav .nav-link.active .badge--dark {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #000 !important;
}

/* ---- 32.2 Session cards ---- */

.sesscard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sesscard {
    background: var(--bn-bg) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.15s ease;
}

.sesscard:hover {
    border-color: var(--bn-text-muted) !important;
    background: var(--bn-bg-hover) !important;
}

.sesscard.current {
    border-color: var(--bn-green) !important;
    background: var(--bn-green-bg) !important;
}

.sesscard.current:hover {
    background: rgba(14, 203, 129, 0.12) !important;
}

.sesscard__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.sesscard__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bn-bg-hover) !important;
    color: var(--bn-yellow) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.sesscard.current .sesscard__icon {
    background: var(--bn-green-bg) !important;
    color: var(--bn-green) !important;
}

.sesscard__title {
    color: var(--bn-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sesscard__badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sesscard__badge--current {
    background: var(--bn-green-bg) !important;
    color: var(--bn-green) !important;
}

.sesscard__meta {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.4;
}

.sesscard__revoke {
    background: transparent !important;
    border: 1px solid var(--bn-red) !important;
    color: var(--bn-red) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.sesscard__revoke:hover {
    background: var(--bn-red) !important;
    color: #fff !important;
}

/* ---- 32.3 Card wrapper ---- */

.custom--card {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.custom--card .card-body {
    padding: 20px !important;
}

/* ---- 32.4 2FA tab ---- */

#tab-2fa .custom--card .card-body {
    padding: 40px 20px !important;
}

#tab-2fa i.la-lock {
    font-size: 48px !important;
    color: var(--bn-yellow) !important;
    margin-bottom: 12px;
}

#tab-2fa h5 {
    color: var(--bn-text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

#tab-2fa p {
    color: var(--bn-text-secondary) !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 32.5 Login history table ---- */

#tab-history .table thead tr th {
    background: var(--bn-bg) !important;
    color: var(--bn-text-muted) !important;
    border-bottom: 1px solid var(--bn-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 12px 16px !important;
}

#tab-history .table tbody tr {
    border-bottom: 1px solid var(--bn-border-light) !important;
}

#tab-history .table tbody tr:hover td {
    background: var(--bn-bg-hover) !important;
}

#tab-history .table tbody td {
    color: var(--bn-text) !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
}

/* ---- 32.6 Empty states ---- */

.sesscard-list ~ .text-center p,
.custom--card .text-center p {
    color: var(--bn-text-muted) !important;
    font-size: 13px !important;
}

/* ---- 32.7 Mobile sessions ---- */

@media (max-width: 767px) {
    .security-tab-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .security-tab-nav .nav-link {
        padding: 8px 14px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .sesscard {
        padding: 12px 14px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sesscard__left {
        width: 100%;
    }

    .sesscard__revoke {
        width: 100%;
        text-align: center;
    }

    .sesscard__meta {
        font-size: 11px !important;
        word-break: break-word;
    }

    #tab-history .table thead {
        display: none;
    }

    #tab-history .table tbody tr {
        display: block;
        margin-bottom: 8px;
        border: 1px solid var(--bn-border) !important;
        border-radius: 8px;
        padding: 4px 0;
    }

    #tab-history .table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    #tab-history .table tbody td::before {
        content: attr(data-label);
        color: var(--bn-text-muted);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
    }
}

/* ==========================================================================
   33. TRADING PAGE OVERRIDES — remove legacy inline styles
   ========================================================================== */

/* Override the inline <style> in trade/index.blade.php */
.cookies-card {
    background-color: var(--bn-bg-elevated) !important;
    color: var(--bn-text-secondary) !important;
}

.has-mega-menu .mega-menu {
    background: var(--bn-bg-elevated) !important;
}

/* Override my_order.blade.php inline styles */
.custom--modal .modal-content {
    background-color: var(--bn-bg-elevated) !important;
    border-radius: 12px !important;
    border: 1px solid var(--bn-border) !important;
}

.custom--modal .modal-title {
    color: var(--bn-text) !important;
}

.custom--modal .modal-header,
.custom--modal .modal-footer {
    border-color: var(--bn-border-light) !important;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
    background: var(--bn-bg-hover) !important;
}

/* Confirmation modal */
.confirmation-modal .modal-content {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 12px !important;
}

.confirmation-modal .modal-body {
    color: var(--bn-text-secondary) !important;
}

/* ---- 33.1 Trade page container fix ---- */

body:has(.trading-section) .dashboard-body,
.trading-section ~ * {
    padding: 0 !important;
}

/* When on trade page, remove dashboard chrome */
.trading-section .container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---- 33.2 Deposit offcanvas on trade page ---- */

#deposit-canvas.offcanvas {
    background: var(--bn-bg-elevated) !important;
    border-left: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
}

#deposit-canvas .offcanvas-header {
    border-bottom: 1px solid var(--bn-border-light) !important;
    padding: 16px 20px !important;
}

#deposit-canvas .offcanvas-header span {
    color: var(--bn-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

#deposit-canvas .offcanvas-body {
    padding: 20px !important;
}

#deposit-canvas .form-label {
    color: var(--bn-text-secondary) !important;
    font-size: 12px !important;
}

#deposit-canvas .list-group-item {
    background: var(--bn-bg) !important;
    border-color: var(--bn-border-light) !important;
    color: var(--bn-text) !important;
    font-size: 13px !important;
    padding: 10px 0 !important;
}

#deposit-canvas .empty-gateway span {
    color: var(--bn-text-muted) !important;
}

/* ==========================================================================
   34. DASHBOARD — Balance + Chart side by side (Binance portfolio layout)
   ========================================================================== */

.bn-dashboard-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .bn-dashboard-top {
        grid-template-columns: 1fr;
    }
}

/* ---- Portfolio chart card ---- */

.bn-portfolio-chart {
    background: var(--bn-bg-elevated);
    border: 1px solid var(--bn-border);
    border-radius: 12px;
    overflow: hidden;
}

.bn-portfolio-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bn-border-light);
}

.bn-portfolio-chart__header h5 {
    color: var(--bn-text);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.bn-portfolio-chart__tabs {
    display: flex;
    gap: 2px;
    background: var(--bn-bg);
    border-radius: 6px;
    padding: 2px;
}

.bn-pf-tab {
    background: transparent;
    border: none;
    color: var(--bn-text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.bn-pf-tab:hover {
    color: var(--bn-text);
}

.bn-pf-tab.active {
    background: var(--bn-bg-hover);
    color: var(--bn-yellow);
}

.bn-portfolio-chart__body {
    padding: 8px 12px 12px;
}

.bn-portfolio-chart__body .apexcharts-canvas {
    background: transparent !important;
}

.bn-portfolio-chart__body .apexcharts-tooltip {
    background: var(--bn-bg-elevated) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.bn-portfolio-chart__body .apexcharts-tooltip-title {
    background: var(--bn-bg-hover) !important;
    border-color: var(--bn-border-light) !important;
    color: var(--bn-text) !important;
    font-weight: 600 !important;
}

.bn-portfolio-chart__body .apexcharts-xaxistooltip,
.bn-portfolio-chart__body .apexcharts-yaxistooltip {
    background: var(--bn-bg-elevated) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}

.bn-portfolio-chart__body .apexcharts-gridline {
    stroke: var(--bn-border-light) !important;
}

/* Make hero card fill its grid cell */
.bn-dashboard-top .pro-hero {
    margin-bottom: 0 !important;
    height: 100%;
}

/* ==========================================================================
   35. TRADING TERMINAL — "LumaTrade" lime widget (Figma redesign)
   ========================================================================== */

/* Remove legacy trading-section padding */
.trading-section {
    background: var(--bn-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.trading-section .container.custom--container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== Page backdrop (lime) — scoped to /trade only ===== */

.lm-trade {
    --lm-page-bg: #dcff69;
    --lm-page-bg-soft: #e6ff8f;
    --lm-card-bg: #101010;
    --lm-card-bg-soft: #161616;
    --lm-accent: #cbff4d;
    --lm-accent-dark: #a6e02a;
    --lm-border: rgba(255, 255, 255, 0.08);
    --lm-radius-xl: 28px;
    --lm-radius-lg: 20px;
    --lm-radius-md: 14px;

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    background: linear-gradient(160deg, var(--lm-page-bg-soft) 0%, var(--lm-page-bg) 55%);
    padding: 28px 28px 40px;
}

/* ===== Dark rounded card ===== */

.lm-card {
    background: var(--lm-card-bg);
    border-radius: var(--lm-radius-xl);
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== Hero: chart+markets (left) / swap panel (right) ===== */

.lm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.lm-hero-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Pair header (compact) ===== */

.lm-hero-left .bn-pair-header {
    padding: 0;
    background: transparent;
    border: none;
}

.bn-pair-header__symbol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bn-pair-header__icon-group {
    display: inline-flex;
    align-items: center;
}

.bn-pair-header__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lm-accent);
    color: #0a0a0a;
    font-size: 12px;
    font-weight: 800;
    border: 2px solid var(--lm-card-bg);
}

.bn-pair-header__icon--market {
    margin-left: -10px;
    background: #4a8dff;
    color: #fff;
}

.bn-pair-header__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bn-text-secondary) !important;
    margin: 0 !important;
}

.bn-pair-header__star {
    color: var(--bn-text-muted);
    cursor: pointer;
    font-size: 14px;
}

.lm-trade .bn-pair-header__stats {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.lm-trade .bn-pair-header__stat--price .bn-pair-header__stat-label {
    display: none;
}

.lm-trade .bn-pair-header__stat--price .bn-pair-header__stat-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    color: var(--bn-text) !important;
}

.lm-trade .bn-pair-header__stat--change .bn-pair-header__stat-label {
    display: none;
}

.lm-trade .bn-pair-header__stat--change .bn-pair-header__stat-value {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bn-green-bg);
    color: var(--bn-green) !important;
}

.lm-trade .bn-pair-header__stat--change .bn-pair-header__stat-value.down {
    background: var(--bn-red-bg);
    color: var(--bn-red) !important;
}

.lm-trade .bn-pair-header__stat:nth-child(n+3) {
    display: none;
}

/* ===== Chart ===== */

.lm-chart {
    border-radius: var(--lm-radius-lg);
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    overflow: hidden;
}

.lm-chart .trading-chart-pro {
    border: none !important;
    border-radius: 0 !important;
}

.lm-chart .trading-chart-pro__toolbar {
    background: transparent;
    border-bottom: 1px solid var(--lm-border);
    padding: 10px 16px;
}

.lm-chart .tc-interval {
    border-radius: 999px;
}

.lm-chart .tc-interval.active {
    color: #0a0a0a;
    background: var(--lm-accent);
}

.lm-chart .trading-chart-pro__ohlc {
    display: none;
}

.lm-chart .trading-chart-pro__body {
    height: 300px;
    background: transparent;
}

/* ===== Markets table (compact rows, inline under chart) ===== */

.lm-markets .trading-right {
    background: transparent;
    border: none;
    padding: 0;
}

.lm-markets .trading-right__top {
    display: none;
}

.lm-markets .trading-market__header {
    padding: 0 4px 8px;
    color: var(--bn-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lm-markets .market-wrapper {
    max-height: 220px;
    overflow-y: auto;
}

.lm-markets .market__list {
    padding: 10px 4px;
    border-radius: var(--lm-radius-md);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lm-border);
    margin: 0 !important;
}

.lm-markets .market__list:hover {
    background: var(--lm-card-bg-soft);
}

.lm-markets .market__pair-item a {
    color: var(--bn-text);
    font-weight: 600;
}

/* ===== Right: Buy/Sell swap panel ===== */

.lm-hero-right {
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    padding: 18px;
}

/* The legacy .trading-bottom box (bg/border/padding, forced with !important
   in section 31) must not draw its own box here — .lm-hero-right is already
   the single unified card, so strip it to avoid a double-boxed look. */
.lm-swap.trading-bottom {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* .buy-sell (the buy_form/sell_form <form> itself, main.css) is width:50%
   by default — a leftover from the old two-column layout where Buy and
   Sell sat side by side. Here each form is the whole panel on its own
   (buy/sell are toggled via .lm-swap-tabs, not shown side by side), so it
   needs the full column width, not half of it. */
.lm-hero-right .buy-sell {
    width: 100%;
}

/* That old side-by-side layout also drew a 1px divider down the middle
   (.trading-bottom__wrapper::before, main.css) to separate the two forms.
   With only one form showing at a time it just left a stray vertical line
   through the panel. */
.lm-hero-right .trading-bottom__wrapper::before {
    display: none;
}

.lm-swap-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 14px;
}

.lm-swap-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--bn-text-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 9px 0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lm-swap-tab.active {
    background: var(--lm-accent);
    color: #0a0a0a;
}

.lm-swap .trading-bottom__header {
    margin-bottom: 18px;
}

/* Limit/Market/Stop Limit: the row is a Bootstrap flex nav (wraps by
   default), and at this panel's width "Stop Limit" was wrapping onto its
   own line — right where the active tab's ::after underline (bottom:-15px,
   see .custom--tab.tab-three .nav-link::after in main.css) lands, so the
   underline bar visually sliced through the wrapped text. Keep the row on
   one line instead of fighting the underline's offset. */
.lm-swap .tab-three {
    flex-wrap: nowrap;
}

.lm-swap .tab-three .nav-link {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
}

.lm-swap .tab-three .nav-link.active {
    color: var(--lm-accent) !important;
}

.lm-swap-panes {
    display: block !important;
}

.lm-swap-pane--hidden {
    display: none !important;
}

/* "Available" balance row */
.lm-hero-right .buy-sell__wrapper {
    background: transparent;
    border-bottom: 1px solid var(--lm-border);
    padding: 0 0 12px;
    margin-bottom: 4px;
}

.lm-hero-right .buy-sell__title {
    color: var(--bn-text-secondary);
    font-weight: 500;
}

/* Amount/price rows: the legacy markup absolutely-positions the label and
   currency badge over the input (tuned for a narrower sidebar column), which
   collides with the text at this panel's width. Rebuild each row as a plain
   flex pill instead of fighting that positioning system. */
.lm-hero-right .buy-sell__price {
    padding: 8px 0 0;
}

.lm-hero-right .input--group.group-two {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    padding: 10px 14px;
}

/* Total row only: reserve room below the label/value/currency line for the
   absolutely-positioned "Fee x%" note (see .fs-10.float-end below) so it
   doesn't sit on top of them. */
.lm-hero-right .input--group.group-two:has(.fs-10.float-end) {
    padding-bottom: 26px;
}

.lm-hero-right .buy-sell__price-title {
    position: static;
    transform: none;
    width: auto;
    order: 1;
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--bn-text-muted);
}

.lm-hero-right .buy-sell__price-btc {
    position: static;
    transform: none;
    right: auto;
    order: 3;
    flex: 0 0 auto;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--bn-text-secondary);
}

.lm-hero-right .form--control.style-three {
    order: 2;
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    font-size: 16px !important;
    font-weight: 700;
    color: var(--bn-text) !important;
    text-align: right;
    /* type="number" spin buttons default back in at this width/weight —
       this panel has no use for them. */
    -moz-appearance: textfield;
}

/* The amount/total placeholders are a computed min-max range (see
   CoinPair::buyPlaceHolder()/sellPlaceHolder()) — e.g. "0.0001-1,000.0000"
   — routinely too wide for this column, so it was overflowing past the
   pill and colliding with the BTC/USDT badge next to it. Shrink and clip
   with an ellipsis, but ONLY while the placeholder itself is showing: a
   typed/real value (Price's server-rendered rate, or anything the user
   enters) keeps the full 16px weight with no clipping — .style-three
   above stays the source of truth for that state. */
.lm-hero-right .form--control.style-three:placeholder-shown {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-hero-right .form--control.style-three::-webkit-outer-spin-button,
.lm-hero-right .form--control.style-three::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lm-hero-right .form--control.style-three:focus {
    outline: none;
    border-color: transparent !important;
}

/* The "Fee x%" note (.fs-10.float-end) lives inside the same flex row as
   the label/input/currency (.input--group.group-two, above) — as a flex
   item it had almost no width left to sit in and wrapped one letter per
   line. Take it out of the flex flow and dock it in the reserved strip
   at the bottom of the pill instead (see the :has() rule above). */
.lm-hero-right .buy-sell__price .fs-10.float-end {
    position: absolute;
    right: 14px;
    bottom: 8px;
    float: none;
    white-space: nowrap;
    color: var(--bn-text-muted);
    margin: 0 !important;
}

/* Percent range slider */
.lm-hero-right .ui-slider .ui-widget-header {
    background: var(--lm-accent) !important;
}

.lm-hero-right .ui-slider .ui-state-default,
.lm-hero-right .ui-slider .ui-slider-handle {
    background: var(--lm-accent) !important;
    border-color: var(--lm-card-bg-soft) !important;
}

.lm-hero-right .range-list__number:hover,
.lm-hero-right .range-list__number.active {
    background: rgba(203, 255, 77, 0.12) !important;
    color: var(--lm-accent) !important;
    border-color: var(--lm-accent) !important;
}

.lm-hero-right .buy-btn,
.lm-hero-right .sell-btn {
    background: var(--lm-accent) !important;
    border-color: var(--lm-accent) !important;
    color: #0a0a0a !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 12px 0 !important;
    margin-top: 6px;
}

.lm-hero-right .buy-btn:hover,
.lm-hero-right .sell-btn:hover {
    background: var(--lm-accent-dark) !important;
    border-color: var(--lm-accent-dark) !important;
}

.lm-hero-right .login-btn {
    border-radius: 999px !important;
    border: 1px solid var(--lm-border) !important;
}

/* ===== Lower panels: Order Book / My Orders / History ===== */

.lm-panels {
    border-top: 1px solid var(--lm-border);
    padding-top: 18px;
}

.lm-panels .trading-left,
.lm-panels .trading-table,
.lm-panels .trading-right__bottom {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.lm-panels .custom--tab .nav-link.active {
    background: var(--lm-accent) !important;
    color: #0a0a0a !important;
}

/* ===== Mobile tabs / fixed buy-sell bar (unchanged structure, re-skinned) ===== */

.bn-trade-mobile-tabs {
    background: var(--lm-card-bg);
    border-top: 1px solid var(--lm-border);
    padding: 12px;
    border-radius: var(--lm-radius-lg) var(--lm-radius-lg) 0 0;
}

/* ===== Responsive ===== */

@media (max-width: 1199px) {
    .lm-trade {
        padding: 16px;
    }

    .lm-card {
        padding: 16px;
    }

    .lm-hero {
        grid-template-columns: 1fr;
    }

    .lm-trade .bn-pair-header__stat:nth-child(n+3) {
        display: flex;
    }

    .bn-pair-header {
        gap: 16px;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .bn-pair-header__stats {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .lm-trade {
        padding: 10px;
    }

    .lm-card {
        padding: 12px;
        border-radius: var(--lm-radius-lg, 20px);
    }

    .bn-pair-header {
        padding: 10px 12px;
        gap: 12px;
    }

    .bn-pair-header__title {
        font-size: 18px;
    }

    .bn-pair-header__stats {
        gap: 12px;
    }

    .bn-pair-header__stat-label {
        font-size: 10px;
    }

    .bn-pair-header__stat-value {
        font-size: 12px;
    }

    .lm-chart .trading-chart-pro__body {
        height: 260px;
    }

    .lm-chart .trading-chart-pro__toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }
}


/* ==========================================================================
   36. HOMEPAGE — "Staco" Web3/DeFi landing redesign (Figma), scoped to
       .lm-home so nothing outside the homepage is affected.
   ========================================================================== */

.lm-home {
    --lm-mint: #4cefa8;
    --lm-mint-dark: #21b880;
    --lm-mint-bg: rgba(76, 239, 168, 0.12);
    --lm-card-bg: #141518;
    --lm-card-bg-soft: #1b1d21;
    --lm-border: rgba(255, 255, 255, 0.07);
    --lm-radius-xl: 32px;
    --lm-radius-lg: 24px;
    --lm-radius-md: 16px;
    overflow: hidden;
}

.lm-home .text--base {
    color: var(--lm-mint) !important;
}

.lm-home .lm-eyebrow {
    display: inline-block;
    color: var(--lm-mint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.lm-home .section-heading__desc.mx-auto {
    max-width: 620px;
}

/* ===== Scroll reveal ===== */

.lm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .lm-reveal {
        transform: none;
        transition: opacity 0.3s ease;
    }
}

/* ===== Tilt cards ===== */

.lm-tilt {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

/* ===== Hero ===== */

.lm-home-hero {
    position: relative;
    padding-top: 200px;
}

.lm-parallax-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.lm-parallax-shape--one {
    top: -60px;
    left: -10%;
    opacity: 0.7;
}

.lm-parallax-shape--two {
    top: -180px;
    right: -10%;
    opacity: 0.6;
}

.lm-hero-content__title {
    font-size: var(--heading-one);
    font-weight: 700;
    color: hsl(var(--static-white));
    margin-bottom: 18px;
    line-height: 1.1;
}

.lm-hero-content__desc {
    color: hsl(var(--static-white) / 0.6);
    font-size: 15px;
    max-width: 520px;
    margin: 0 auto 34px;
}

.lm-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lm-mint) !important;
    color: #06110c !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    transition: all 0.15s ease;
}

.lm-btn-pill:hover {
    background: var(--lm-mint-dark) !important;
    color: #06110c !important;
    transform: translateY(-2px);
}

.lm-btn-pill--muted {
    background: rgba(255, 255, 255, 0.07) !important;
    color: hsl(var(--static-white)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.lm-btn-pill--muted:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: hsl(var(--static-white)) !important;
}

.lm-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    color: hsl(var(--static-white)) !important;
    border: 1px solid var(--lm-border) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    transition: all 0.15s ease;
}

/* ==========================================================================
   37. MOBILE RESPONSIVE — Trading page + global mobile adaptations
   Targets: ≤767px (phones), ≤1199px (tablets)
   ========================================================================== */

/* ---- Header / Nav ---- */
@media (max-width: 991px) {
    .header .navbar-collapse {
        background: var(--bn-bg-elevated, #1b1d21);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .header .navbar-nav .nav-link {
        padding: 14px 8px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Mega-menu: hidden on mobile (sub-links shown directly instead) */
    .header .has-mega-menu .mega-menu {
        display: none !important;
    }

    /* Mobile: Trade label (not clickable, just a section header) */
    .header .lm-mobile-nav-label {
        padding: 14px 8px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--bn-text-muted, #848e9c);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        display: block;
    }

    /* Mobile: sub-navigation links (SPOT, P2P) — always visible */
    .header .lm-mobile-subnav {
        list-style: none;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .header .lm-mobile-subnav__item {
        list-style: none;
    }

    .header .lm-mobile-subnav__link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 8px 12px 24px;
        font-size: 14px;
        font-weight: 500;
        color: var(--bn-text, #fff);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        transition: background 0.15s ease;
    }

    .header .lm-mobile-subnav__link:active,
    .header .lm-mobile-subnav__link:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--lm-mint, #4cefa8);
    }

    .header .lm-mobile-subnav__link i {
        font-size: 16px;
        width: 20px;
        text-align: center;
        color: var(--lm-mint, #4cefa8);
    }

    .header-right {
        display: none !important;
    }

    .header .navbar-toggler {
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    .header .navbar-brand img {
        max-height: 36px;
        width: auto;
    }

    /* Mobile login/register buttons inside collapsed menu */
    .header .login-registration-list {
        gap: 8px;
    }

    .header .login-registration-list .sign-in,
    .header .login-registration-list .btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 575px) {
    .header .container {
        padding: 0 12px;
    }

    .header .navbar {
        padding: 8px 0;
    }

    .header .navbar-brand img {
        max-height: 30px;
    }
}

/* ---- Trading page: pair header ---- */
@media (max-width: 767px) {
    .lm-trade .bn-pair-header__stat--price .bn-pair-header__stat-value {
        font-size: 24px !important;
    }

    .lm-trade .bn-pair-header__stat:nth-child(n+3) {
        display: flex !important;
    }

    .bn-pair-header__stats {
        gap: 10px !important;
        font-size: 11px;
    }

    .bn-pair-header__stat-label {
        font-size: 9px !important;
    }

    .bn-pair-header__stat-value {
        font-size: 11px !important;
    }

    /* Pair header: horizontal scroll on mobile instead of wrapping */
    .lm-trade .bn-pair-header {
        padding: 10px 12px;
    }

    .lm-trade .bn-pair-header__symbol {
        margin-bottom: 8px;
    }

    .lm-trade .bn-pair-header__title {
        font-size: 16px !important;
    }

    .lm-trade .bn-pair-header__icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    /* Stats: horizontal scrollable strip */
    .lm-trade .bn-pair-header__stats {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .lm-trade .bn-pair-header__stats::-webkit-scrollbar {
        display: none;
    }

    .lm-trade .bn-pair-header__stat {
        flex-shrink: 0;
    }
}

/* ---- Trading page: chart ---- */
@media (max-width: 767px) {
    .lm-chart .trading-chart-pro__body {
        height: 220px !important;
    }

    .lm-chart .trading-chart-pro__toolbar {
        padding: 6px 8px !important;
        flex-wrap: wrap;
        gap: 4px;
    }

    .lm-chart .tc-interval {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* ---- Trading page: markets list ---- */
@media (max-width: 767px) {
    .lm-markets .market-wrapper {
        max-height: 180px;
    }

    .lm-markets .market__list {
        padding: 8px 4px;
        font-size: 12px;
    }
}

/* ---- Buy/Sell mobile slide-up panel ---- */
@media (max-width: 1199px) {
    /* Make the mobile buy/sell visible on all mobile sizes, not just sm */
    .lm-trade .col-sm-12 > .d-sm-block.d-md-none,
    .lm-trade .col-sm-12 > .d-xl-none {
        display: block !important;
    }
}

@media (max-width: 767px) {
    /* Add bottom padding so fixed BUY/SELL bar doesn't cover content */
    .lm-trade {
        padding-bottom: 70px !important;
    }

    /* Fixed BUY/SELL bar at bottom */
    .lm-trade .trading-bottom__fixed {
        background: var(--lm-card-bg, #101010) !important;
        padding: 8px 12px !important;
        border-top: 1px solid var(--lm-border, rgba(255,255,255,0.08));
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .lm-trade .trading-bottom__footer {
        gap: 8px;
    }

    .lm-trade .trading-bottom__button {
        flex: 1;
    }

    .lm-trade .buy-btn-sm,
    .lm-trade .sell-btn-sm {
        padding: 12px 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
    }

    .lm-trade .buy-btn-sm {
        background: var(--bn-green, #0ecb81) !important;
        color: #fff !important;
        border: none !important;
    }

    .lm-trade .sell-btn-sm {
        background: var(--bn-red, #f6465d) !important;
        color: #fff !important;
        border: none !important;
    }

    /* Slide-up panel for buy/sell form */
    .lm-trade .buy-sell-one,
    .lm-trade .buy-sell-two {
        background: var(--lm-card-bg, #101010) !important;
        padding: 16px !important;
        padding-top: 40px !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 99999;
    }

    .lm-trade .buy-sell-one.buy-sell-one-show,
    .lm-trade .buy-sell-two.buy-sell-two-show {
        bottom: 0 !important;
    }

    /* Close button */
    .lm-trade .sidebar__close {
        top: 12px;
        right: 16px;
        color: var(--bn-text-secondary, #848e9c);
        font-size: 20px;
        z-index: 100000;
    }

    /* Form fields in mobile panel */
    .lm-trade .buy-sell-one .buy-sell__wrapper,
    .lm-trade .buy-sell-two .buy-sell__wrapper {
        padding: 10px 0 !important;
        background: transparent !important;
        border-bottom: 1px solid var(--lm-border, rgba(255,255,255,0.08));
    }

    .lm-trade .buy-sell-one .input--group.group-two,
    .lm-trade .buy-sell-two .input--group.group-two {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--lm-border, rgba(255,255,255,0.08));
        border-radius: 12px;
        padding: 10px 12px;
    }

    .lm-trade .buy-sell-one .form--control.style-three,
    .lm-trade .buy-sell-two .form--control.style-three {
        font-size: 15px !important;
        text-align: right;
    }

    .lm-trade .buy-sell-one .buy-sell__price-title,
    .lm-trade .buy-sell-two .buy-sell__price-title {
        font-size: 11px;
    }

    .lm-trade .buy-sell-one .buy-sell__price-btc,
    .lm-trade .buy-sell-two .buy-sell__price-btc {
        font-size: 11px;
    }

    /* Range slider */
    .lm-trade .buy-sell-one .range-list,
    .lm-trade .buy-sell-two .range-list {
        gap: 4px;
    }

    .lm-trade .buy-sell-one .range-list__number,
    .lm-trade .buy-sell-two .range-list__number {
        font-size: 11px;
        padding: 6px 4px;
        border-radius: 8px;
    }

    /* Submit button */
    .lm-trade .buy-sell-one .buy-btn,
    .lm-trade .buy-sell-one .sell-btn,
    .lm-trade .buy-sell-two .buy-btn,
    .lm-trade .buy-sell-two .sell-btn {
        border-radius: 12px !important;
        padding: 14px 0 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .lm-trade .buy-sell-one .buy-btn,
    .lm-trade .buy-sell-two .buy-btn {
        background: var(--bn-green, #0ecb81) !important;
        color: #fff !important;
        border: none !important;
    }

    .lm-trade .buy-sell-one .sell-btn,
    .lm-trade .buy-sell-two .sell-btn {
        background: var(--bn-red, #f6465d) !important;
        color: #fff !important;
        border: none !important;
    }
}

/* ---- Mobile tabs (Chart / Order Book / Market / History) ---- */
@media (max-width: 1199px) {
    .bn-trade-mobile-tabs {
        margin-top: 12px;
    }

    .bn-trade-mobile-tabs .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
    }

    .bn-trade-mobile-tabs .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .bn-trade-mobile-tabs .nav-item {
        flex-shrink: 0;
    }

    .bn-trade-mobile-tabs .nav-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 14px;
    }
}

@media (max-width: 767px) {
    .bn-trade-mobile-tabs {
        padding: 10px !important;
        border-radius: 16px 16px 0 0 !important;
        background: var(--lm-card-bg, #101010) !important;
        margin-top: 8px;
    }

    .bn-trade-mobile-tabs .nav-link {
        font-size: 12px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }

    .bn-trade-mobile-tabs .nav-link.active {
        background: var(--lm-accent, #cbff4d) !important;
        color: #0a0a0a !important;
    }

    /* Tab content: ensure enough height for order book */
    .bn-trade-mobile-tabs .tab-content {
        min-height: 280px;
    }
}

/* ---- Order Book mobile ---- */
@media (max-width: 767px) {
    .lm-trade .trading-left,
    .bn-trade-mobile-tabs .trading-left {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .lm-trade .trading-left__top,
    .bn-trade-mobile-tabs .trading-left__top {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
    }

    .lm-trade .trading-left__top-title,
    .bn-trade-mobile-tabs .trading-left__top-title {
        font-size: 14px !important;
    }

    .lm-trade .trading-left__header,
    .bn-trade-mobile-tabs .trading-left__header {
        font-size: 10px !important;
        gap: 4px;
        padding: 4px 0;
    }

    .lm-trade .trading-left__list,
    .bn-trade-mobile-tabs .trading-left__list {
        font-size: 11px !important;
        padding: 6px 4px !important;
        gap: 4px;
    }

    .lm-trade .price__item,
    .lm-trade .amount__item,
    .lm-trade .total__item,
    .bn-trade-mobile-tabs .price__item,
    .bn-trade-mobile-tabs .amount__item,
    .bn-trade-mobile-tabs .total__item {
        font-size: 11px !important;
    }

    /* Stack buy/sell vertically on very small screens */
    .lm-trade .trading-left .d-flex.d-xl-block.flex-wrap,
    .bn-trade-mobile-tabs .trading-left .d-flex.d-xl-block.flex-wrap {
        flex-direction: column !important;
    }

    .lm-trade .trading-left__buy,
    .lm-trade .trading-left__bottom,
    .bn-trade-mobile-tabs .trading-left__buy,
    .bn-trade-mobile-tabs .trading-left__bottom {
        width: 100% !important;
    }

    /* Order book max height for scroll */
    .lm-trade .sell-side-order-list,
    .lm-trade .buy-side-order-list,
    .bn-trade-mobile-tabs .sell-side-order-list,
    .bn-trade-mobile-tabs .buy-side-order-list {
        max-height: 220px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Order book: All/Sell/Buy tabs compact */
    .lm-trade .change-order-type,
    .bn-trade-mobile-tabs .change-order-type {
        padding: 2px 6px !important;
    }

    .lm-trade .change-order-type button,
    .bn-trade-mobile-tabs .change-order-type button {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* ---- Mobile tabs (Chart / Order Book / Market / History) ---- */
@media (max-width: 1199px) {
    .bn-trade-mobile-tabs {
        margin-top: 12px;
    }

    .bn-trade-mobile-tabs .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bn-trade-mobile-tabs .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .bn-trade-mobile-tabs .nav-item {
        flex-shrink: 0;
    }

    .bn-trade-mobile-tabs .nav-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 14px;
    }
}

@media (max-width: 767px) {
    .bn-trade-mobile-tabs {
        padding: 10px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .bn-trade-mobile-tabs .nav-link {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* ---- Trade history table ---- */
@media (max-width: 767px) {
    .lm-trade .trading-table,
    .lm-trade .trading-right__bottom,
    .bn-trade-mobile-tabs .trading-table,
    .bn-trade-mobile-tabs .trading-right__bottom {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lm-trade .trading-table table,
    .lm-trade .trading-right__bottom table,
    .bn-trade-mobile-tabs .trading-table table,
    .bn-trade-mobile-tabs .trading-right__bottom table {
        min-width: 400px;
    }

    .lm-trade .trading-table th,
    .lm-trade .trading-table td,
    .lm-trade .trading-right__bottom th,
    .lm-trade .trading-right__bottom td,
    .bn-trade-mobile-tabs .trading-table th,
    .bn-trade-mobile-tabs .trading-table td,
    .bn-trade-mobile-tabs .trading-right__bottom th,
    .bn-trade-mobile-tabs .trading-right__bottom td {
        font-size: 11px !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* Trade history: compact list */
    .lm-trade .history__list,
    .bn-trade-mobile-tabs .history__list {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }

    .lm-trade .trading-market__header,
    .bn-trade-mobile-tabs .trading-market__header {
        font-size: 10px !important;
    }

    /* Markets list in mobile tab */
    .bn-trade-mobile-tabs .trading-right {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .bn-trade-mobile-tabs .trading-right__top {
        padding: 8px 0;
    }

    .bn-trade-mobile-tabs .trading-right__title {
        font-size: 14px !important;
    }

    .bn-trade-mobile-tabs .market__list {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    .bn-trade-mobile-tabs .market__pair-item a {
        font-size: 12px !important;
    }

    .bn-trade-mobile-tabs .market-wrapper {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Swiper tabs for markets */
    .bn-trade-mobile-tabs .swiper {
        padding: 0 20px;
    }

    .bn-trade-mobile-tabs .swiper-button-next-two,
    .bn-trade-mobile-tabs .swiper-button-prev-two {
        display: none !important;
    }
}

/* ---- My Orders table ---- */
@media (max-width: 767px) {
    .lm-panels .trading-table {
        overflow-x: auto;
    }

    .lm-panels .trading-table table {
        min-width: 500px;
    }

    .lm-panels table th,
    .lm-panels table td {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* ---- General page responsive ---- */
@media (max-width: 767px) {
    /* Footer */
    .lm-trade + footer,
    footer .footer__bottom {
        padding: 16px 0 !important;
    }

    footer .container {
        padding: 0 12px;
    }

    /* Cookies card */
    .cookies-card {
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        padding: 12px !important;
    }

    /* Backdrop for buy/sell slide-up */
    .lm-trade-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99990;
    }

    .lm-trade-scrim.lm-trade-scrim--show {
        display: block;
    }
}

/* ---- Very small phones (≤380px) ---- */
@media (max-width: 380px) {
    .lm-trade {
        padding: 6px !important;
    }

    .lm-card {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .lm-trade .bn-pair-header__stat--price .bn-pair-header__stat-value {
        font-size: 20px !important;
    }

    .lm-trade .buy-btn-sm,
    .lm-trade .sell-btn-sm {
        font-size: 12px !important;
        padding: 10px 0 !important;
    }

    .lm-trade .trading-left__list {
        font-size: 10px !important;
    }
}

/* ---- Landscape phone ---- */
@media (max-width: 900px) and (orientation: landscape) {
    .lm-chart .trading-chart-pro__body {
        height: 180px !important;
    }

    .lm-trade .sell-side-order-list,
    .lm-trade .buy-side-order-list {
        max-height: 120px;
    }
}

/* ---- User dashboard / home responsive ---- */
@media (max-width: 767px) {
    .user-dashboard .card,
    .user-home .card {
        margin-bottom: 12px;
    }

    .user-dashboard .col-md-6,
    .user-home .col-md-6 {
        padding: 0 6px;
    }

    .dashboard-card__icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .dashboard-card__value {
        font-size: 18px !important;
    }
}

/* ---- Login / Register responsive ---- */
@media (max-width: 767px) {
    .auth-wrapper {
        padding: 16px !important;
    }

    .auth-wrapper .card {
        border-radius: 16px !important;
        padding: 20px 16px !important;
    }

    .auth-wrapper input[type="text"],
    .auth-wrapper input[type="email"],
    .auth-wrapper input[type="password"] {
        font-size: 16px !important; /* prevents iOS zoom */
    }
}

/* ---- Admin responsive ---- */
@media (max-width: 991px) {
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 9999;
        transition: left 0.2s ease;
        overflow-y: auto;
    }

    .admin-sidebar.sidebar-open {
        left: 0;
    }

    .admin-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .admin-sidebar-toggle {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .admin-dashboard .card {
        margin-bottom: 10px;
    }

    .admin-dashboard table {
        font-size: 12px;
    }

    .admin-dashboard table th,
    .admin-dashboard table td {
        padding: 6px !important;
    }
}

/* ---- Prevent iOS input zoom ---- */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* But keep small inputs in trading panel */
    .lm-trade .form--control.style-three {
        font-size: 15px !important;
    }
}

/* ---- Touch-friendly: larger tap targets ---- */
@media (max-width: 767px) {
    .nav-link,
    .btn,
    button {
        min-height: 40px;
    }

    .lm-trade .range-list__number {
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lm-trade .change-order-type button {
        min-height: 32px;
        padding: 4px 10px;
    }
}

.lm-btn-outline:hover {
    border-color: var(--lm-mint) !important;
    color: var(--lm-mint) !important;
}

/* ==========================================================================
   38. HOMEPAGE MOBILE RESPONSIVE — full page adaptation
   Targets: ≤1199px (tablet), ≤767px (phone), ≤575px (small phone), ≤380px
   ========================================================================== */

/* ---- Hero section ---- */
@media (max-width: 1199px) {
    .lm-home-hero {
        padding-top: 140px !important;
    }

    .lm-hero-content__title {
        font-size: 40px !important;
    }

    .lm-hero-content__desc {
        font-size: 15px !important;
        max-width: 480px !important;
    }
}

@media (max-width: 767px) {
    .lm-home-hero {
        padding-top: 100px !important;
        padding-bottom: 40px;
    }

    .lm-hero-content__title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }

    .lm-hero-content__desc {
        font-size: 13px !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
        line-height: 1.5;
    }

    .lm-hero-content__button .lm-btn-pill {
        padding: 11px 22px !important;
        font-size: 13px !important;
    }

    /* Parallax shapes: hide on mobile (performance + clutter) */
    .lm-parallax-shape {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .lm-hero-content__title {
        font-size: 24px !important;
    }

    .lm-hero-content__desc {
        font-size: 12px !important;
    }
}

/* ---- News ticker ---- */
@media (max-width: 767px) {
    .lm-news-ticker {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }

    .lm-news-ticker__item {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    .lm-news-ticker__item .badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
}

/* ---- Chain marquee ---- */
@media (max-width: 767px) {
    .lm-chain-marquee__label {
        margin-top: 30px !important;
        margin-bottom: 12px !important;
        font-size: 10px !important;
    }

    .lm-chain-chip {
        font-size: 11px !important;
        padding: 4px 10px !important;
        gap: 4px !important;
    }

    .lm-chain-chip__icon {
        width: 20px !important;
        height: 20px !important;
    }

    .lm-chain-chip__icon img {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ---- Stats cards ---- */
@media (max-width: 767px) {
    .lm-stats {
        gap: 10px !important;
    }

    .lm-stat-card {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }

    .lm-stat-card__number {
        font-size: 18px !important;
    }

    .lm-stat-card__label {
        font-size: 10px !important;
    }
}

@media (max-width: 380px) {
    .lm-stat-card__number {
        font-size: 15px !important;
    }
}

/* ---- Section spacing (py-120 → smaller on mobile) ---- */
@media (max-width: 767px) {
    .lm-home .py-120 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .lm-home .py-60 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .lm-home .section-heading {
        margin-bottom: 24px !important;
    }

    .lm-home .section-heading__title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .lm-home .section-heading__desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .lm-home .lm-eyebrow {
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-width: 380px) {
    .lm-home .section-heading__title {
        font-size: 19px !important;
    }
}

/* ---- Choose Us / Features cards ---- */
@media (max-width: 767px) {
    .lm-features .coincheck-item {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    .lm-features .coincheck-item__icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .lm-features .coincheck-item__title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .lm-features .coincheck-item__desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Hide decorative shape on mobile */
    .lm-features .coincheck-section__shape {
        display: none !important;
    }
}

/* ---- Partners grid ---- */
@media (max-width: 767px) {
    .lm-partners__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .lm-partners__badge {
        font-size: 11px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    .lm-partners__badge-icon {
        width: 10px !important;
        height: 10px !important;
    }

    .lm-partners__glow {
        display: none !important;
    }
}

/* ---- Product / Explore section ---- */
@media (max-width: 767px) {
    .lm-explore-card {
        padding: 20px 16px !important;
        border-radius: 18px !important;
    }

    .lm-explore-card__thumb {
        margin-top: 16px;
    }

    .lm-explore-card__thumb img {
        width: 100% !important;
        height: auto !important;
        border-radius: 14px;
    }

    .lm-feature-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    .lm-feature-card__title {
        font-size: 16px !important;
    }

    .lm-feature-card__desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .lm-feature-card__list li {
        font-size: 12px !important;
    }

    .lm-feature-card__thumb img {
        border-radius: 14px;
    }

    .product-section__shape {
        display: none !important;
    }
}

/* ---- Ecosystem / How to invest ---- */
@media (max-width: 767px) {
    .lm-ecosystem-diagram__nodes {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .lm-ecosystem-node {
        padding: 14px !important;
        border-radius: 14px !important;
        text-align: center !important;
    }

    .lm-ecosystem-node__title {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .lm-ecosystem-node__desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .lm-ecosystem-globe {
        display: none !important;
    }

    .invest__button .lm-btn-pill {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
}

/* ---- Coin pair table ---- */
@media (max-width: 991px) {
    .lm-coin-pair .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lm-coin-pair .coin-pair-list-table {
        min-width: 600px;
    }
}

@media (max-width: 767px) {
    .lm-coin-pair .table-wrapper {
        border-radius: 14px;
    }

    .lm-coin-pair .table-header-menu {
        flex-wrap: wrap;
        gap: 6px;
    }

    .lm-coin-pair .table-header-menu__link {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .lm-coin-pair .market-list__left .btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .lm-coin-pair table th,
    .lm-coin-pair table td {
        font-size: 11px !important;
        padding: 8px 6px !important;
        white-space: nowrap;
    }

    .lm-coin-pair .customer__name {
        font-size: 12px !important;
    }

    .lm-coin-pair .pair-thumb img {
        width: 22px !important;
        height: 22px !important;
    }

    .lm-coin-pair .table-section__shape {
        display: none !important;
    }
}

/* ---- Crypto currency cards ---- */
@media (max-width: 767px) {
    .lm-currency .currency-item {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .lm-currency .currency-item__icon img {
        width: 32px !important;
        height: 32px !important;
    }

    .lm-currency .currency-item__coin-title {
        font-size: 14px !important;
    }

    .lm-currency .currency-item__coin-name {
        font-size: 10px !important;
    }

    .lm-currency .currency-item__content-number {
        font-size: 15px !important;
    }
}

@media (max-width: 380px) {
    .lm-currency .currency-item__content-number {
        font-size: 13px !important;
    }
}

/* ---- FAQ section ---- */
@media (max-width: 767px) {
    .lm-faq .faq-thumb {
        margin-top: 20px;
    }

    .lm-faq .faq-thumb img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 16px;
    }

    .lm-faq .accordion-button {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }

    .lm-faq .accordion-body {
        font-size: 12px !important;
        padding: 10px 14px !important;
        line-height: 1.5;
    }
}

/* ---- Blog cards ---- */
@media (max-width: 767px) {
    .lm-blog .lm-blog-card {
        border-radius: 14px !important;
    }

    .lm-blog .lm-blog-card__thumb img {
        border-radius: 12px 12px 0 0;
        height: 140px !important;
        object-fit: cover;
    }

    .lm-blog .lm-blog-card__content {
        padding: 12px !important;
    }

    .lm-blog .lm-blog-card__date {
        font-size: 10px !important;
    }

    .lm-blog .lm-blog-card__title {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .lm-blog .ongoing-campaign__title {
        font-size: 22px !important;
    }
}

/* ---- Subscribe section ---- */
@media (max-width: 767px) {
    .lm-subscribe .subscribe-wrapper {
        padding: 24px 16px !important;
        border-radius: 18px !important;
    }

    .lm-subscribe .subscribe-wrapper__subtitle {
        font-size: 11px !important;
    }

    .lm-subscribe .subscribe-wrapper__title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }

    .lm-subscribe .subscribe-wrapper__form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .lm-subscribe .subscribe-wrapper__form .form--control {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .lm-subscribe .subscribe-wrapper__form .btn {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    .lm-subscribe .subscribe-wrapper__shape,
    .lm-subscribe .subscribe-wrapper__shape-one {
        display: none !important;
    }
}

/* ---- Community / Social grid ---- */
@media (max-width: 767px) {
    .lm-community {
        padding: 40px 0 !important;
    }

    .lm-community__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .lm-community__card {
        padding: 16px 10px !important;
        border-radius: 14px !important;
    }

    .lm-community__icon {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .lm-community__title {
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .lm-community__grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Footer ---- */
@media (max-width: 767px) {
    .footer-area .py-60 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .footer-area .footer-item {
        margin-bottom: 20px;
    }

    .footer-area .footer-item__logo img {
        max-height: 36px;
        width: auto;
    }

    .footer-area .footer-item__desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-top: 10px;
    }

    .footer-area .footer-item__title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .footer-area .footer-menu__item {
        margin-bottom: 6px !important;
    }

    .footer-area .footer-menu__link {
        font-size: 12px !important;
    }

    .footer-area .bottom-footer__text {
        font-size: 11px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .footer-area .social-list {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 10px;
    }

    .footer-area .social-list__link {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .footer-area .bottom-footer__style {
        flex-direction: column !important;
        text-align: center;
    }
}

/* ---- Container padding on mobile ---- */
@media (max-width: 767px) {
    .lm-home .container {
        padding: 0 14px;
    }
}

@media (max-width: 380px) {
    .lm-home .container {
        padding: 0 10px;
    }
}

/* ---- Disable tilt/parallax effects on touch devices ---- */
@media (hover: none) and (pointer: coarse) {
    .lm-tilt {
        transform: none !important;
        transition: none !important;
    }

    .lm-parallax-shape {
        display: none !important;
    }
}

/* ---- Reduce motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    .lm-chain-marquee__track {
        animation: none !important;
    }

    .lm-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ===== Chain marquee (two rows, opposite directions) ===== */

.lm-chain-marquee__label {
    margin-top: 60px;
    margin-bottom: 18px;
    color: hsl(var(--static-white) / 0.4);
    font-size: 11px;
}

.lm-chain-marquee {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lm-chain-marquee__track {
    display: flex;
    gap: 12px;
    width: max-content;
}

.lm-chain-marquee__track--left {
    animation: lm-marquee-left 32s linear infinite;
}

.lm-chain-marquee__track--right {
    animation: lm-marquee-right 32s linear infinite;
}

@keyframes lm-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes lm-marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lm-chain-marquee__track {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
    }
}

.lm-chain-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    padding: 7px 16px 7px 7px;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--static-white) / 0.8);
    white-space: nowrap;
}

.lm-chain-chip__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    flex: 0 0 auto;
}

.lm-chain-chip__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== News ticker (banner.element promos) ===== */

.lm-news-ticker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.lm-news-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    color: hsl(var(--static-white) / 0.7);
    max-width: 100%;
}

.lm-news-ticker__item:hover {
    color: var(--lm-mint);
    border-color: var(--lm-mint);
}

.lm-news-ticker__item .badge--success {
    background: var(--lm-mint-bg);
    color: var(--lm-mint);
    flex: 0 0 auto;
}

/* ===== Stats ===== */

.lm-stats {
    margin-top: 56px;
}

.lm-stat-card {
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    min-height: 130px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 10px 24px 28px;
}

.lm-stat-card__number {
    font-size: 24px;
    font-weight: 700;
    color: hsl(var(--static-white));
    display: block;
}

.lm-stat-card__label {
    font-size: 13px;
    color: hsl(var(--static-white) / 0.5);
    margin-top: 4px;
    display: block;
}

@media (max-width: 575px) {
    .lm-stat-card {
        border-radius: var(--lm-radius-lg);
        padding: 18px 10px 18px 20px;
        min-height: 100px;
    }

    .lm-stat-card__number {
        font-size: 19px;
    }
}

/* ===== Features (choose_us) — no card box, glow icon ===== */

.lm-features .row.justify-content-center,
.lm-feature-cards.justify-content-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.lm-features .coincheck-item {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.lm-features .coincheck-item__icon {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-mint);
    font-size: 26px;
    margin-bottom: 22px;
}

.lm-features .coincheck-item__icon::before {
    content: "";
    position: absolute;
    inset: -14px;
    background: radial-gradient(circle, var(--lm-mint-bg), transparent 70%);
    filter: blur(4px);
    z-index: -1;
}

.lm-features .coincheck-item__desc {
    max-width: 320px;
}

/* ===== Partners ===== */

.lm-partners {
    position: relative;
}

.lm-partners__glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 220px;
    background: radial-gradient(ellipse, var(--lm-mint-bg), transparent 70%);
    pointer-events: none;
}

.lm-partners__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 34px;
}

.lm-partners__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    padding: 16px 18px;
    color: hsl(var(--static-white) / 0.6);
    font-weight: 600;
    font-size: 14px;
    text-align: left;
}

.lm-partners__badge-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .lm-partners__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .lm-partners__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Explore card + feature cards (product) ===== */

.lm-explore-card {
    position: relative;
    background: linear-gradient(135deg, rgba(76, 239, 168, 0.1), var(--lm-card-bg) 55%);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-xl);
    padding: 48px;
    overflow: hidden;
}

.lm-explore__button {
    margin-top: 24px;
}

.lm-explore-card__thumb {
    position: relative;
    text-align: center;
}

.lm-explore-card__thumb img {
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

.lm-feature-cards {
    margin-top: 24px;
}

.lm-feature-card {
    position: relative;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    padding: 30px;
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
}

.lm-feature-card__thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: var(--lm-radius-md);
    overflow: hidden;
}

.lm-feature-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lm-feature-card__pattern {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: repeating-linear-gradient(45deg, var(--lm-mint-bg) 0 10px, transparent 10px 20px);
    -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
    mask-image: radial-gradient(circle, #000 40%, transparent 72%);
    pointer-events: none;
}

.lm-feature-card__body {
    position: relative;
    z-index: 1;
}

.lm-feature-card__title {
    color: hsl(var(--static-white));
    margin-bottom: 8px;
}

.lm-feature-card__desc {
    color: hsl(var(--static-white) / 0.55);
    font-size: 13px;
    margin: 0;
}

.lm-feature-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lm-feature-card__list li {
    position: relative;
    padding-left: 16px;
    color: hsl(var(--static-white) / 0.65);
    font-size: 13px;
}

.lm-feature-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lm-mint);
}

/* ===== Ecosystem diagram (how_to_invest) ===== */

.lm-ecosystem-diagram {
    position: relative;
    margin-top: 56px;
    padding-bottom: 40px;
}

.lm-ecosystem-diagram__lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    z-index: 0;
}

.lm-ecosystem-diagram__nodes {
    display: grid;
    grid-template-columns: repeat(var(--lm-node-count, 5), 1fr);
    gap: 16px;
    position: relative;
    z-index: 1;
}

.lm-ecosystem-node {
    text-align: center;
}

.lm-ecosystem-node__title {
    color: hsl(var(--static-white));
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.lm-ecosystem-node__desc {
    display: none;
}

.lm-ecosystem-globe {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 160px;
    margin: 40px auto 0;
    border-radius: 320px 320px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 100%, rgba(255,255,255,0.5), transparent 12%),
        radial-gradient(circle at 65% 92%, rgba(255,255,255,0.4), transparent 10%),
        radial-gradient(ellipse at 20% 60%, #2fbf71 0 18%, transparent 19%),
        radial-gradient(ellipse at 70% 50%, #2fbf71 0 22%, transparent 23%),
        radial-gradient(ellipse at 45% 85%, #1f8f56 0 16%, transparent 17%),
        linear-gradient(180deg, #1c6dd0 0%, #144f9c 60%, #0c3266 100%);
    box-shadow: 0 -30px 80px rgba(76, 239, 168, 0.18);
}

.lm-ecosystem-globe__glow {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 380px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(76, 239, 168, 0.35), transparent 70%);
}

@media (max-width: 767px) {
    .lm-ecosystem-globe {
        width: 220px;
        height: 110px;
    }
}

/* ===== Coin pair / currency sections ===== */

.lm-currency .currency-item,
.lm-coin-pair .table-wrapper {
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
}

.lm-currency .currency-item {
    padding: 18px;
}

/* ===== FAQ ===== */

.lm-faq .accordion-item {
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border) !important;
    border-radius: var(--lm-radius-md) !important;
    overflow: hidden;
}

/* ===== Blog cards ===== */

.lm-blog-card {
    display: block;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    overflow: hidden;
    height: 100%;
}

.lm-blog-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.lm-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lm-blog-card:hover .lm-blog-card__thumb img {
    transform: scale(1.05);
}

.lm-blog-card__content {
    padding: 18px 20px 22px;
}

.lm-blog-card__date {
    font-size: 11px;
    color: hsl(var(--static-white) / 0.4);
}

.lm-blog-card__title {
    color: hsl(var(--static-white));
    margin: 6px 0 0;
    font-size: 16px;
}

/* ===== Subscribe ===== */

.lm-subscribe {
    position: relative;
    text-align: center;
}

.lm-subscribe .subscribe-wrapper {
    background: transparent !important;
    border: none;
    text-align: center;
    padding: 0;
}

.lm-subscribe .subscribe-wrapper__shape,
.lm-subscribe .subscribe-wrapper__shape-one {
    display: none;
}

.lm-subscribe .subscribe-wrapper__item {
    max-width: 480px;
    margin: 0 auto;
}

.lm-subscribe .subscribe-wrapper__item::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, var(--lm-mint), #0a4a34);
    margin: 0 auto 18px;
}

.lm-subscribe .subscribe-wrapper__subtitle {
    display: block;
    color: var(--lm-mint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.lm-subscribe .subscribe-wrapper__title {
    font-size: 30px;
}

.lm-subscribe .subscribe-wrapper__form {
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    margin-top: 26px;
}

.lm-subscribe .subscribe-wrapper__form .form--control {
    background: transparent !important;
    border: none !important;
}

.lm-subscribe .subscribe-wrapper__form .btn {
    background: var(--lm-mint) !important;
    color: #06110c !important;
    border-radius: 999px !important;
    border: none !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
}

/* ===== Community cards (before global footer) ===== */

.lm-community {
    padding: 20px 0 80px;
}

.lm-community__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.lm-community__card {
    display: block;
    background: var(--lm-card-bg-soft);
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-md);
    padding: 20px;
}

.lm-community__icon {
    display: inline-flex;
    color: hsl(var(--static-white) / 0.7);
    font-size: 18px;
    margin-bottom: 14px;
}

.lm-community__title {
    display: block;
    color: hsl(var(--static-white));
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .lm-community__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Responsive ===== */

@media (max-width: 1199px) {
    .lm-home-hero {
        padding-top: 160px;
    }

    .lm-explore-card {
        padding: 34px;
    }
}

@media (max-width: 991px) {
    .lm-home-hero {
        padding-top: 130px;
    }
}

@media (max-width: 767px) {
    .lm-home-hero {
        padding-top: 110px;
    }

    .lm-hero-content__title {
        font-size: 32px;
    }

    .lm-explore-card {
        padding: 26px;
        border-radius: var(--lm-radius-lg);
    }

    .lm-feature-cards .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .lm-feature-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .lm-ecosystem-diagram__nodes {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 24px;
    }

    .lm-ecosystem-diagram__lines {
        display: none;
    }
}

@media (max-width: 575px) {
    .lm-ecosystem-diagram__nodes {
        grid-template-columns: 1fr !important;
    }
}