/* Card Container */
.okx-wallet-info-card {
    background: radial-gradient(circle at 50% -10%, #1e1e1e, #0f0f0f 80%);
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 30px 20px;
    box-shadow: inset 0 0 10px rgba(0, 179, 134, 0.05), 0 0 20px rgba(0, 0, 0, 0.3);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.okx-wallet-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid transparent;
    background: linear-gradient(90deg, rgba(0, 179, 134, 0.4), rgba(0, 255, 163, 0.2)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
}

.okx-wallet-info-card:hover::before {
    opacity: 1;
}

.okx-wallet-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 179, 134, 0.15);
}

/* Total Value Section */
.okx-wallet-total-label {
    font-size: 10px;
    color: #9aa0a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.okx-wallet-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #00b386, #00ffa3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Coin Balance Section */
.okx-wallet-balance {
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: inset 0 0 8px rgba(0, 179, 134, 0.05);
    max-width: 340px;
    margin: 0 auto;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.okx-wallet-balance:hover {
    border-color: #00b386;
    box-shadow: 0 0 12px rgba(0, 179, 134, 0.15);
}

.okx-coin-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #1f1f1f;
    object-fit: cover;
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.15);
    margin-right: 12px;
}

/* Text Styling */
.okx-wallet-balance-label {
    font-size: 13px;
    color: #9aa0a6;
    margin-bottom: 3px;
}

.okx-wallet-balance-value {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.text-accent {
    color: #00ffa3;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Hover Glow for Entire Card */
.okx-wallet-info-card:hover .okx-wallet-balance {
    border-color: #00ffa3;
}

/* Responsive */
@media (max-width: 576px) {
    .okx-wallet-info-card {
        padding: 22px 14px;
    }

    .okx-wallet-total-value {
        font-size: 18px;
    }

    .okx-wallet-balance {
        padding: 12px 14px;
    }

    .okx-coin-logo {
        width: 34px;
        height: 34px;
    }
}


.okx-select {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    padding: 10px 14px;
    appearance: none;
}

.okx-select:focus {
    border-color: #00b386;
    box-shadow: 0 0 0 2px rgba(0, 179, 134, 0.25);
    outline: none;
}


/* --- Futures Section --- */
.okx-futures-container {
    background: #111;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    border: 1px solid #1f1f1f;
}

.okx-total-label {
    color: #9aa0a6;
    font-size: 13px;
    font-weight: 500;
}

.okx-eye {
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: 0.2s;
}

.okx-eye:hover {
    color: #00b386;
}

.okx-futures-value {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.okx-futures-sub {
    font-size: 12px;
    color: #9aa0a6;
}

.okx-futures-breakdown {
    margin-top: 20px;
}

.okx-futures-label {
    color: #9aa0a6;
    font-size: 13px;
}

.okx-futures-value-sm {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.okx-futures-value-sm.highlight {
    color: #00b386;
}

.okx-futures-breakdown .d-flex {
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 10px;
}

.okx-futures-breakdown .d-flex:last-child {
    border-bottom: none;
}

@media (max-width: 480px) {
    .okx-futures-container {
        padding: 14px;
    }

    .okx-futures-value {
        font-size: 22px;
    }

    .okx-futures-value-sm {
        font-size: 16px;
    }
}

/* --- Header Row --- */
.okx-wallet-header {
    background: #101010;
    border-bottom: 1px solid #1e1e1e;
    color: #9aa0a6;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
}

/* --- Wallet Card --- */
.okx-wallet-item {
    background: #161616;
    border: 1px solid #1e1e1e;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
    transition: 0.25s ease;
    cursor: pointer;
}

.okx-wallet-item:hover {
    border-color: #00b386;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.2);
    transform: translateY(-2px);
}

/* --- Wallet Info --- */
.okx-wallet-symbol {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.okx-wallet-sub {
    font-size: 13px;
    color: #9aa0a6;
}

.okx-wallet-balance {
    font-size: 14px;
    line-height: 1.4;
}

.okx-wallet-balance small {
    color: #9aa0a6;
    margin-right: 4px;
}

/* --- Buttons --- */
.okx-wallet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.okx-btn-mini {
    display: inline-flex;
    align-items: center;
    background: #1c1c1c;
    border: 1px solid #333;
    color: #eee;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: 0.25s ease;
}

.okx-btn-mini:hover {
    background: #00b386;
    border-color: #00b386;
    color: #fff;
}

.okx-btn-mini-icon {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    filter: brightness(0) invert(1);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .okx-wallet-header {
        display: none;
    }

    .okx-wallet-item {
        flex-direction: column;
        gap: 6px;
    }

    .okx-wallet-actions {
        justify-content: flex-start;
    }

    .okx-btn-mini {
        flex: 1;
        justify-content: center;
    }
}

/* ---------- Layout ---------- */
.okx-assets-container {
    background: #0d0d0d;
    color: #fff;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Tabs ---------- */
.okx-assets-tabs {
    border-bottom: 1px solid #1a1a1a;
    background: #111;
    margin-bottom: 0;
}

.okx-assets-tabs .nav-link {
    color: #aaa;
    border: none;
    font-size: 15px;
    transition: 0.3s;
}

.okx-assets-tabs .nav-item.active .nav-link,
.okx-assets-tabs .nav-link:hover {
    color: #00b386;
    border-bottom: 2px solid #00b386;
    background: #141414;
}

/* ---------- Overview Box ---------- */
.okx-overview {
    background: linear-gradient(180deg, #0f0f0f 0%, #141414 100%);
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0, 179, 134, 0.05);
    padding: 30px 20px;
}

/* ---------- Total Assets ---------- */
.okx-total-assets {
    color: #fff;
}

.okx-total-label {
    font-size: 14px;
    color: #9aa0a6;
    margin-bottom: 6px;
}

.okx-total-value {
    font-size: 36px;
    font-weight: 700;
}

.okx-total-sub {
    font-size: 13px;
    color: #777;
    margin-top: 3px;
}

/* --- Button Group (Always Single Row, Responsive) --- */
.okx-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    /* ✅ Keep in one row */
    gap: 10px;
    margin-top: 1rem;
    overflow-x: auto;
    /* ✅ Prevent breaking; allow smooth horizontal scroll on tiny screens */
    padding: 0 6px;
    scrollbar-width: none;
    /* Hide scrollbar */
}

.okx-btn-group::-webkit-scrollbar {
    display: none;
}

/* --- Button Styling --- */
.okx-btn {
    flex: 1 1 0;
    /* ✅ Keeps 3 buttons in one line */
    background: #212121;
    border: 1px solid #333;
    color: #eee;
    border-radius: 10px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.okx-btn:hover {
    background: #00b386;
    border-color: #00b386;
    color: #fff;
    transform: translateY(-1px);
}

.okx-btn-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    transition: 0.25s ease;
}

.okx-btn:hover .okx-btn-icon {
    filter: brightness(1.2) saturate(1.6);
}

/* --- Responsive Adjustment --- */
@media (max-width: 480px) {
    .okx-btn {
        max-width: 120px;
        /* ✅ Slightly smaller buttons */
        padding: 13px;
        font-size: 14px;
    }
}


/* ---------- Grid / Cards ---------- */
.okx-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .okx-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.okx-card {
    background: #161616;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 18px 16px;
    color: #ddd;
    transition: 0.25s ease;
}

.okx-card-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.okx-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.okx-card-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #fff;
}

.okx-card-link {
    font-size: 12px;
    color: #00b386;
    text-decoration: none;
    cursor: pointer;
}

.okx-card-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px dashed #262626;
    font-size: 14px;
}

.okx-card-row:first-child {
    border-top: none;
}

.okx-hover:hover {
    border-color: #00b386;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.2);
    transform: translateY(-2px);
}

/* ---------- Section Title ---------- */
.okx-section-title {
    color: #9aa0a6;
    font-size: 13px;
    letter-spacing: 1px;
}

.okx-assets-container {
    background: #0d0d0d;
    color: #fff;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Tabs */
.okx-assets-tabs {
    border-bottom: 1px solid #1a1a1a;
    background: #111;
}

.okx-assets-tabs .nav-link {
    color: #aaa;
    border: none;
    font-size: 15px;
    transition: 0.3s;
}

.okx-assets-tabs .nav-item.active .nav-link,
.okx-assets-tabs .nav-link:hover {
    color: #00b386;
    border-bottom: 2px solid #00b386;
    background: #141414;
}

/* Overview / Spot / Futures Box */
.okx-assets-box {
    background: #141414;
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 25px 20px;
    margin: 0 10px;
    box-shadow: 0 0 20px rgba(0, 179, 134, 0.05);
}

/* Total Asset Section */
.okx-total-assets {
    color: #fff;
}

.okx-total-label {
    font-size: 14px;
    color: #9aa0a6;
}


.okx-total-sub {
    font-size: 13px;
    color: #777;
    margin-top: 3px;
}

/* Buttons (Responsive) */
.okx-btn-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
}

.okx-btn-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    margin-right: 6px;
    transition: 0.25s ease;
}

.okx-btn:hover .okx-btn-icon {
    filter: brightness(1.2) saturate(1.6);
}

@media (max-width: 480px) {
    .okx-btn {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Grid / Card */
.okx-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .okx-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.okx-card {
    background: #161616;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 18px 16px;
    color: #ddd;
    transition: 0.25s ease;
}

.okx-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.okx-card-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #fff;
}

.okx-card-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.okx-card-link {
    font-size: 12px;
    color: #00b386;
    text-decoration: none;
}

.okx-card-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px dashed #262626;
    font-size: 14px;
}

.okx-card-row:first-child {
    border-top: none;
}

.okx-hover:hover {
    border-color: #00b386;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.2);
    transform: translateY(-2px);
}

/* Spot/Futures Assets */
.okx-asset-header {
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 8px;
    margin-bottom: 8px;
    color: #9aa0a6;
    font-size: 12px;
}

.okx-portfolio-item {
    border-bottom: 1px solid #1a1a1a;
    padding: 14px 0;
    font-size: 14px;
}

.okx-coin-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.okx-balance-value {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

/* Futures Summary */
.okx-futures-summary>.d-flex {
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
}

.okx-futures-summary>.d-flex:last-child {
    border-bottom: none;
}

/* Section Titles */
.okx-section-title {
    color: #9aa0a6;
    font-size: 13px;
    letter-spacing: 1px;
}

/* --- Wallet List (Spot Tab) --- */
.okx-wallet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.okx-wallet-item {
    background: #161616;
    border: 1px solid #1e1e1e;
    border-radius: 10px;
    padding: 14px 16px;
    transition: 0.25s ease;
    cursor: pointer;
}

.okx-wallet-item:hover {
    border-color: #00b386;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.2);
    transform: translateY(-2px);
}

.okx-wallet-info {
    line-height: 1.4;
}

.okx-wallet-symbol {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.okx-wallet-sub {
    font-size: 13px;
    color: #9aa0a6;
}

.okx-wallet-balance {
    font-size: 15px;
    line-height: 1.4;
}

.okx-wallet-balance small {
    color: #9aa0a6;
    margin-right: 3px;
}

.okx-wallet-balance .fw-semibold {
    color: #fff;
    font-size: 15px;
}

.okx-coin-logo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0d0d0d;
    border: 1px solid #222;
}

@media (max-width: 480px) {
    .okx-wallet-item {
        padding: 12px 14px;
    }

    .okx-wallet-symbol {
        font-size: 14px;
    }

    .okx-wallet-balance .fw-semibold {
        font-size: 14px;
    }
}

/* Tabs */
.okx-tab-card {
    background: #141414;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
}

.okx-tabs a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #aaa;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.okx-tabs a.active,
.okx-tabs a:hover {
    color: #00b386;
    border-color: #00b386;
}

/* QR */
.okx-qr {
    border-radius: 12px;
    background: #0d0d0d;
    padding: 10px;
    border: 1px solid #1f1f1f;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.1);
}

/* Address */
.okx-address {
    font-size: 13px;
    color: #ccc;
    word-break: break-all;
}

.okx-btn-sm {
    background: #00b386;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    transition: 0.25s;
}

.okx-btn-sm:hover {
    background: #00d49d;
}

/* Upload */
.okx-upload-preview {
    display: block;
    width: 160px;
    border-radius: 10px;
    margin: 0 auto;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 179, 134, 0.15);
}

/* Inputs */
.okx-input {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    padding: 10px 14px;
    width: 100%;
}

.okx-input:focus {
    border-color: #00b386;
    box-shadow: 0 0 0 2px rgba(0, 179, 134, 0.25);
    outline: none;
}

/* Buttons */

.okx-submit-btn {
    background: linear-gradient(90deg, #00b386, #00ffa3);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    padding: 12px 0;
    transition: 0.3s;
}

.okx-submit-btn:hover {
    opacity: 0.9;
}

/* Warning Card */
.okx-warning {
    background: #161616;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
}

.okx-warning-text {
    font-size: 12px;
    color: #ffce5a;
    line-height: 1.4;
}

/* Section Title */
.okx-section-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.okx-label {
    color: #9aa0a6;
    font-size: 13px;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}



/* Language */

.okx-language-list {
    display: flex;
    flex-direction: column;
    background: #141414;
    border-radius: 14px;
    overflow: hidden;
}

.okx-language-item {
    padding: 14px 18px;
    background: #161616;
    border-bottom: 1px solid #1f1f1f;
    color: #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s ease;
    cursor: pointer;
}

.okx-language-item:hover {
    background: #1d1d1d;
    color: #fff;
    box-shadow: inset 0 0 10px rgba(0, 179, 134, 0.15);
}

.okx-language-item.active {
    background: rgba(0, 179, 134, 0.08);
    border-left: 3px solid #00b386;
}

.okx-language-item.active .okx-language-text {
    color: #00ffa3;
    font-weight: 600;
}

.okx-lang-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.okx-language-text {
    font-size: 14px;
    color: #eee;
}

@media (max-width: 480px) {
    .okx-language-item {
        padding: 12px 14px;
    }

    .okx-language-text {
        font-size: 13px;
    }
}



/** **/

/* ============ ORDER SWITCH ============ */
.order-switch {
    width: 100%;
    text-align: center;
}

.order-switch-group {
    display: flex;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #242424;
    height: 38px;
}

/* Shared button base */
.order-switch-btn {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
    color: #a3a3a3;
    background: #242424;
    cursor: pointer;
}

/* Left side (Buy) — one consistent diagonal cut ( / ) */
.order-switch-btn--buy {
    clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
    z-index: 2;
}

/* Right side (Sell) — keep flat, overlap slightly for clean seam */
.order-switch-btn--sell {
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -8px;
    /* overlap diagonal joint */
    z-index: 1;
}

/* Active BUY (Green) */
.order-switch-btn--buy-active {
    background: linear-gradient(90deg, #00b386 0%, #02a86b 100%);
    color: #fff !important;
    z-index: 3;
}

/* Active SELL (Red) */
.order-switch-btn--sell-active {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    color: #fff !important;
    z-index: 3;
}

/* Inactive state (Grey) */
.order-switch-btn--inactive {
    background: #242424;
    color: #dddddd;
}

/* Subtle hover for feedback */
.order-switch-btn:hover {
    filter: brightness(1.08);
}

.order-percent-group {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.order-percent-btn {
    flex: 1;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #7d8180;
    background: #242424;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
    transition: all 0.25s ease;
}

.order-percent-btn:hover:not(:disabled) {
    background: #00b386;
    color: #fff;
}

.order-percent-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* *** */


/* =============================
   TRADE HISTORY SECTION (Scoped)
   ============================= */

.trade-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Scrollbar styling */
.trade-history-list::-webkit-scrollbar {
    width: 4px;
}

.trade-history-list::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

/* Card item */
.trade-history-item {
    background: #242424;
    border-radius: 10px;
    padding: 14px 14px;
    border: 1px solid #2c2e36;
    transition: all 0.25s ease;
}

.trade-history-item:hover {
    background: #262830;
    border-color: #00b38655;
}

/* Header */
.trade-history-header {
    font-weight: 600;
    color: #fff;
}

.trade-history-date {
    font-size: 14px;
    color: #9ca3af;
}

.trade-history-text {
    font-size: 14px;
    color: #9ca3af;
}

.trade-history-type {
    font-size: 13px;
    font-weight: 600;
}

/* Body */
.trade-history-body {
    font-size: 13px;
    color: #e5e7eb;
}

/* Empty State */
.trade-history-empty {
    opacity: 0.8;
}

.trade-history-empty-img {
    max-width: 120px;
}

.trade-history-empty-text {
    color: #9ca3af;
    font-size: 13px;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 480px) {
    .trade-history-item {
        padding: 10px 14px;
    }

    .trade-history-body {
        font-size: 14px;
    }

    .trade-history-type {
        font-size: 14px;
    }
}

/* ***** */

/* Container */
.kline-contract-order {
    padding: 8px 10px;
    background: #0b0e11;
    color: #fff;
}

/* Section Label */
.kline-label {
    display: block;
    color: #aaa;
    font-size: 13px;
    margin-bottom: 4px;
}

/* Select Input */
.kline-select {
    width: 100%;
    background: #1a1d1f;
    color: #fff;
    border: 1px solid #2a2e31;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

/* Duration scroll list */
.kline-duration-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.kline-duration-item {
    min-width: 100px;
    text-align: center;
    background: #1a1d1f;
    border: 1px solid #2a2e31;
    border-radius: 10px;
    padding: 10px 5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.kline-duration-item:hover {
    border-color: #00b386;
}

.kline-duration-active {
    border-color: #00b386;
    background: #11291f;
}

.kline-duration-time {
    font-weight: bold;
    font-size: 14px;
}

.kline-duration-yield {
    color: #9ca3af;
    font-size: 12px;
}

/* Input */
.kline-input {
    width: 100%;
    background: #1a1d1f;
    border: 1px solid #2a2e31;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
    text-align: left;
}

.kline-input:focus {
    border-color: #00b386;
}

/* Summary Box */
.kline-summary-box {
    background: #14171a;
    border: 1px solid #1e2124;
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font-size: 13px;
}

.kline-summary-label {
    color: #9ca3af;
    font-size: 12px;
}

.kline-summary-value {
    font-weight: 600;
}

/* Balance */
.kline-balance-box {
    background: #14171a;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Action Buttons */
.kline-action-row {
    margin-top: 10px;
    gap: 10px;
}

.kline-btn-buy,
.kline-btn-sell {
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 0;
    transition: all 0.25s ease;
}

.kline-btn-buy {
    background: #00b386;
}

.kline-btn-sell {
    background: #e03c3c;
}

.kline-btn-buy:disabled,
.kline-btn-sell:disabled {
    background: #2a2e31;
    color: #777;
    cursor: not-allowed;
}

/* Scrollbar */
.kline-duration-scroll::-webkit-scrollbar {
    height: 5px;
}

.kline-duration-scroll::-webkit-scrollbar-thumb {
    background: #2a2e31;
    border-radius: 3px;
}

/* **** */

/* Base Container */
.kline-contract-orders {
    background: #0b0e11;
    color: #fff;
    font-size: 13px;
    padding: 10px;
}

/* Table */
.kline-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    color: #e6e8ea;
}

.kline-orders-table thead th {
    font-size: 12px;
    color: #8b949e;
    border-bottom: 1px solid #1f2329;
    padding: 8px;
    text-align: center;
}

.kline-orders-table tbody td,
.kline-orders-table tbody th {
    background: #14161a;
    border: none;
    padding: 10px 6px;
    text-align: center;
    border-radius: 4px;
}

.kline-orders-table tbody tr:hover td {
    background: #1a1d21;
    cursor: pointer;
}

/* Mobile Cards */
.kline-order-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kline-order-card {
    background: #14161a;
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.2s ease;
}

.kline-order-card:hover {
    background: #1a1d21;
    transform: translateY(-1px);
}

.kline-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.kline-order-card-body small {
    color: #aaa;
}

/* No Orders */
.kline-no-orders-img {
    width: 80px;
}

/* **/
/* === Order Book Layout === */
.orderbook-container {
    background: #0b0e11;
    border-radius: 10px;
    font-size: 13px;
    padding: 10px;
    color: #fff;
}

.orderbook-header {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
}

.orderbook-list {
    position: relative;
}

/* === Each Row === */
.orderbook-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    cursor: default;
    margin-bottom: 1px;
}

/* === Depth Background Gradient === */
.orderbook-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(var(--depth) * 1%);
    opacity: 0.25;
    transition: width 0.2s ease;
}

.orderbook-ask::before {
    background: #ff4d4f;
}

.orderbook-bid::before {
    background: #00b386;
}

/* === Hover Effect === */
.orderbook-row:hover::before {
    opacity: 0.4;
}

.orderbook-row span {
    position: relative;
    z-index: 2;
}

/* === Current Price === */
.orderbook-current {
    padding: 8px 0;
}

.orderbook-price {
    font-weight: 700;
    font-size: 18px;
}



/* Main wrapper */
.binance-slider-wrapper {
    width: 100%;
    position: relative;
    padding: 4px 5px;
    touch-action: pan-y;
}

/* Horizontal line */
.binance-track {
    position: relative;
    height: 4px;
    background: #1e4bff;
    border-radius: 3px;
    margin: 22px 0 16px 0;
    /* extra height for mobile thumbs */
}

/* Points */
.binance-point {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #1e4bff;
    border-radius: 50%;
    border: 2px solid #1e4bff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* IMPORTANT: allow slider touches */
}

/* Position points */
.binance-point:nth-child(1) {
    left: 0%;
}

.binance-point:nth-child(2) {
    left: 25%;
}

.binance-point:nth-child(3) {
    left: 50%;
}

.binance-point:nth-child(4) {
    left: 75%;
}

.binance-point:nth-child(5) {
    left: 100%;
}

/* The real slider */
.binance-real-slider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    /* FIX: larger touch zone for mobile */
    top: 8px;
    /* centers thumb over track */
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    z-index: 10;
}

/* Remove native style */
.binance-real-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}

/* Slider thumb (white circle) */
.binance-real-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 2px solid #1e4bff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 99;
    margin-top: -9px;
    /* FIX: align thumb vertically with track */
}

/* Labels (0%, 25%, 50%, ...) */
.binance-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 2px;
    font-size: 12px;
    color: #ffffff;
    user-select: none;
}

.binance-labels span {
    cursor: pointer;
}


/* Binance-style futures stats card */
.futures-stats-card {
    background: #111;
    border-radius: 10px;
    padding: 16px 8px;
    margin-top: 20px;
    margin-bottom: 0px;
    border: 1px solid #1b1b1b;
}

/* Title */
.stat-title {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Value */
.stat-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

/* PnL color logic */
.stat-green {
    color: #1DB954 !important;
    /* Binance green */
}

.stat-red {
    color: #E64545 !important;
    /* Binance red */
}

.stat-yellow {
    color: #ffce4e !important;
    /* Warning color */
}


/*************************
    GENERAL CARD
*************************/
.fut-card {
    background: #0f1115;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid #1e222d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    color: #d6dae1;
}

/*************************
    HEADER
*************************/
.fut-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fut-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fut-symbol-block {
    display: flex;
    flex-direction: column;
    margin-top: -2px;
}

.fut-symbol {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.fut-sub {
    font-size: 12px;
    opacity: 0.7;
}

.fut-cross {
    font-size: 12px;
    opacity: 0.6;
}

.fut-cross-value {
    font-size: 14px;
    color: #fff;
    text-align: right;
}

/*************************
     TAG
*************************/
.fut-tag {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    font-family: serif;
}

.fut-tag-long {
    background: #2cb670;
}

.fut-tag-short {
    background: #ce3d3d;
}

/*************************
     TYPOGRAPHY
*************************/
.fut-label {
    font-size: 13px;
    opacity: 0.55;
}

.fut-value-big {
    font-size: 22px;
    font-weight: 700;
}

.fut-value-sm {
    font-size: 14px;
    font-weight: 400;
    color: #c3c3c3;
}

/*************************
     SECTIONS
*************************/
.fut-section {
    display: flex;
    justify-content: space-between;
    margin: 14px 0;
}

.fut-grid {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}

.fut-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
}

.fut-divider {
    height: 1px;
    background: #20232d;
    margin: 16px 0;
}

/*************************
     COLORS
*************************/
.fut-green {
    color: #28d57a !important;
}

.fut-red {
    color: #ff4e4e !important;
}

.fut-yellow {
    color: #ffcc57 !important;
}

/*************************
     BUTTONS
*************************/
.fut-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fut-btn {
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    border: none;
}

.fut-btn-primary {
    background: #2cb670;
    color: #fff;
}

.fut-btn-blue {
    background: #0054ff;
    color: #fff;
}

.fut-btn-outline {
    border: 1px solid #46474d;
    background: transparent;
    color: #cfd3d8;
}

.leverage-indicator {
    display: flex;
    gap: 3px;
}

.leverage-indicator span {
    width: 5px;
    height: 16px;
    background: #555;
    /* grey default */
    border-radius: 2px;
}

.leverage-indicator .bar-active {
    background: #5ed29b;
    /* green color like your UI */
}







/* WRAPPER */
.mpg-trans-wrapper {
    background: #0d0d0d;
    padding: 15px;
    margin-top: 15px;
}

/* CARD */
.mpg-trans-card {
    background: #1a1a1a;
    border-radius: 14px;
    padding: 18px 16px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ROW */
.mpg-trans-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* LEFT AREA */
.mpg-trans-date {
    font-size: 12px;
    opacity: 0.55;
    margin-bottom: 6px;
    color: #ccc;
}

.mpg-trans-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    max-width: 220px;
    line-height: 1.3;
}

/* RIGHT AREA */
.mpg-trans-amount {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}

.mpg-trans-green {
    color: #13ff9c;
}

.mpg-trans-red {
    color: #ff4f4f;
}

/* EMPTY */
.mpg-trans-empty img {
    width: 130px;
    opacity: 0.6;
    margin-top: 40px;
}


/* MAIN CARD */
.okx-modal-content {
    background: #121212 !important;
    border-radius: 14px !important;
    padding: 10px 0;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* HEADER */
.okx-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 20px;
}

.okx-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.okx-modal-close {
    color: #aaa !important;
    opacity: 0.8;
    text-shadow: none !important;
}

.okx-modal-close:hover {
    opacity: 1;
}

/* BODY */
.okx-modal-body {
    padding: 20px;
    text-align: center;
    font-size: 15px;
    color: #cfcfcf;
    line-height: 1.5;
}

/* FOOTER */
.okx-modal-footer {
    border-top: none !important;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
}

/* BUTTONS */
.okx-btn-cancel {
    flex: 1;
    margin-right: 8px;
    background: #1f1f1f !important;
    border: none !important;
    color: #d0d0d0 !important;
    border-radius: 10px !important;
    padding: 10px 0;
    font-weight: 600;
}

.okx-btn-cancel:hover {
    background: #262626 !important;
}

.okx-btn-confirm {
    flex: 1;
    margin-left: 8px;
    background: #2682ff !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 0;
    font-weight: 600;
}

.okx-btn-confirm:hover {
    background: #1a6ce3 !important;
}


.okx-history-chip {
    background: #161616;
    border: 1px solid #222;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin: 3px;
    cursor: pointer;
    transition: 0.2s;
}

.okx-history-chip:hover {
    background: #222;
    color: #fff;
}

.favorite-star {
    margin-right: 10px;
    cursor: pointer;
}

.fav-active {
    color: #f6d24a !important;
}

.fav-inactive {
    color: #555 !important;
}

.favorite-btn {
    padding: 4px;
    cursor: pointer;
    margin-right: 6px;
}

.favorite-btn .material-icons {
    font-size: 20px;
}



/* ========== News Header ========== */
.bn-news-header {
    padding: 14px 16px;
    border-bottom: 1px solid #1f2328;
}

.bn-news-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* ========== News Item ========== */
.bn-news-item {
    padding: 14px 16px;
    border-bottom: 1px solid #1a1d25;
    background: #0b0e11;
    transition: background .18s ease;
}

.bn-news-item:hover {
    background: #0f131a;
}

/* Headline */
.bn-news-headline {
    color: #e5e7eb;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Description */
.bn-news-desc {
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Footer */
.bn-news-footer {
    font-size: 12px;
    color: #6b7280;
}

.bn-news-date {
    display: inline-block;
}

.bn-news-category {
    display: inline-block;
    color: #f0b90b;
}




/* COUNTRY PAGE — NO ABSOLUTE, NO FIXED */
.country-page {
    width: 100%;
    min-height: calc(100vh - 60px);
    background: #111;
    color: #fff;
    overflow-y: auto;
    padding-bottom: 40px;
}

/* header */
.country-header {
    padding: 18px 20px;
    border-bottom: 1px solid #333;
    font-size: 18px;
    font-weight: bold;
}

.country-header .close-btn {
    font-size: 26px;
    color: #aaa;
}

/* search bar */
.country-search {
    padding: 12px 20px;
    position: relative;
}

.country-search input {
    width: 100%;
    padding: 12px 40px;
    border-radius: 10px;
    border: none;
    background: #222;
    color: #fff;
    font-size: 16px;
}

.country-search .search-icon {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    color: #777;
}

/* list */
.country-list .country-item {
    padding: 14px 20px;
    border-bottom: 1px solid #222;
    font-size: 16px;
    cursor: pointer;
}

.country-item:hover {
    background: #222;
}



.futures-type-switch {
    display: flex;
    width: 100%;
}

.futures-type-switch a {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    background: #111;
    color: #d1d1d1;
    border: 1px solid #6c757d;
    border-radius: 2px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.15s ease-in-out;
}

.futures-type-switch a:last-child {
    margin-right: 0;
    /* remove right space on last button */
}

.futures-type-switch a.active {
    background: #5ad4bb;
    color: #fff;
    border-color: #5ad4bb;
}

.futures-type-switch a:hover {
    opacity: 0.85;
}



.price-box-market {
    background: #242424;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    /* aligns value left + unit right */
    align-items: center;
    border: 0;
    font-weight: 200;
}


/* Center version */
.price-box-market.center {
    justify-content: center;
    /* center horizontally */
    text-align: center;
}

.price-box-market.center .value,
.price-box-market.center .unit {
    margin: 0 4px;
    /* nice spacing between them when centered */
}


/* Value text */
.price-box-market .value {
    font-weight: 400;
}

/* Unit text (USDT) */
.price-box-market .unit {
    margin-left: 10px;
    color: #bfbfbf;
    font-weight: 300;
}



.market-toggle-box {
    display: flex;
    width: 100%;
}

.market-toggle-box a {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    background: #1a1a1a;
    color: #c7c7c7;
    font-size: 12px;
    cursor: pointer;
    transition: 0.15s ease-in-out;
}

.market-toggle-box a:first-child {
    border-radius: 4px 0 0 4px;
}

.market-toggle-box a:last-child {
    border-radius: 0 4px 4px 0;
}

.market-toggle-box a.active {
    background: #4c4f63;
    /* exact highlight color from your screenshot */
    color: #fff;
    border-color: #4c4f63;
}



.futures-longshort-switch {
    display: flex;
    width: 100%;
}

.futures-longshort-switch a {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    color: #c5c8d0;
    font-size: 14px;
    cursor: pointer;
    transition: .15s ease-in-out;
}


.futures-longshort-switch a.active {
    background: #62ceb8;
    /* exact highlight color */
    border-color: #62ceb8;
    color: #fff;
}


.deliveryx-wrapper {
    width: 100%;
}

.deliveryx-title {
    color: #cfcfcf;
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}

/* 4-column layout exactly like screenshot */
.deliveryx-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px;
}

.deliveryx-item {
    background: #242424;
    text-align: center;
    cursor: pointer;
    transition: .18s ease-in-out;
}

.deliveryx-time {
    font-size: 12px;
    color: white;
    font-weight: lighter;
    padding: 12px 0;
    background-color: #474b62;
}

.deliveryx-yield {
    background: #222020;
    color: #d0d0d0;
    font-size: 12px;
    font-weight: 500;
    padding: 12px 0;
}

/* Active state (blue) */
.deliveryx-item.active {
    background: #3d7bff !important;
}

.deliveryx-item.active .deliveryx-time {
    color: white;
    background: #3d7bff !important;
}


.deliveryx-item.active .deliveryx-yield {
    color: white;
    background: #2e60cd !important;
}



.okx-asset-list {
    margin-top: 10px;
}

.okx-asset-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #1b1b1b;
}

.okx-asset-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #d7d9e0;
}

.okx-asset-icon {
    width: 22px;
    opacity: 0.8;
}

.okx-asset-right {
    text-align: right;
}

.okx-asset-amount {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.okx-asset-sub {
    color: #8e94a3;
    font-size: 13px;
}




/*** */
.okx-asset-wallet {
    margin-top: 10px;
}

.okx-asset-item {
    padding: 18px 0;
    border-bottom: 1px solid #1b1b1b;
}

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

.okx-asset-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.okx-asset-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.okx-asset-symbol {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.okx-asset-right {
    text-align: right;
}

.okx-asset-total {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.okx-asset-sub {
    font-size: 13px;
    color: #8e94a3;
}

.okx-asset-bottom {
    margin-top: 14px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal columns */
    text-align: center;
    /* center all text inside columns */
}

.okx-asset-col {
    text-align: center;
    /* force column text to center */
}

.okx-asset-label {
    font-size: 13px;
    font-weight: 600;
    color: #a5a7b0;
    margin-bottom: 2px;
}

.okx-asset-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
}


/* ===================== */
/* YOUR SHARE CARD STYLE */
/* ===================== */

.bn-share-card {
    position: relative;
    background: linear-gradient(145deg, #0b0c0f, #1c1d21);
    padding: 25px;
    border-radius: 12px;
    color: #fff;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

/* Header */
.bn-share-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bn-logo {
    width: 36px;
    height: auto;
}

.bn-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.bn-title {
    color: #5941d9;
    font-size: 16px;
    font-weight: 800;
}

.bn-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #5941d9;
    letter-spacing: 0.5px;
}

/* Info row */
.bn-info-row {
    margin-top: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dcdcdc;
}

.bn-divider {
    opacity: 0.6;
}

/* Profit */
.bn-profit {
    font-size: 38px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* Prices */
.bn-price-block {
    margin-top: 10px;
    font-size: 14px;
}

.bn-price-label {
    color: #b9b9b9;
}

.bn-price-value {
    color: #f0b90b;
    font-weight: 600;
    font-size: 16px;
}

/* Bottom row */
.bn-bottom-row {
    display: flex;
    margin-top: 25px;
    align-items: center;
}

.bn-qr canvas {
    width: 80px !important;
    height: 80px !important;
}

.bn-ref {
    margin-left: 18px;
    display: flex;
    flex-direction: column;
}

.bn-ref-label {
    color: #c7c7c7;
    font-size: 12px;
}

.bn-ref-code {
    font-size: 22px;
    font-weight: 700;
    margin-top: -2px;
}

.bn-ref-note {
    margin-top: -3px;
    color: #f0b90b;
    font-size: 12px;
}

/* Background rocket */
.bn-rocket {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 230px;
    opacity: 0.15;
    pointer-events: none;
}

/* End Share */



.vd-order-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.vd-order-label {
    color: #ccc;
}

.vd-order-value {
    color: #fff;
    text-align: right;
    font-weight: bold;
}

.vd-text-green {
    color: #2ecc71 !important;
}

.vd-text-red {
    color: #e74c3c !important;
}