* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, a, [role="button"] {
    touch-action: manipulation;
}

:root {
    --bg-primary: #121620;
    --bg-secondary: #191e2b;
    --bg-tertiary: #222838;
    --text-primary: #f8fafc;
    --text-secondary: #8e9bb0;
    --accent-blue: #0ecb81;
    --accent-blue-hover: #02c076;
    --accent-blue-dark: #0099cc;
    --border-color: rgba(255, 255, 255, 0.09);
    --positive: #0ecb81;
    --negative: #f6465d;
    --bottom-nav-height: 60px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;

    padding-bottom: var(--bottom-nav-height);
}

.wallet-body,
.profile-body,
.messages-list,
.messages-sidebar,
.assets-table,
.transactions-table,
.chatbot-messages,
.markets-table-container {
    -webkit-overflow-scrolling: touch;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ── iOS Auto-Zoom Prevention ──────────────────────────────────────────── */
/* iOS zooms in when input font-size < 16px. Force 16px on mobile. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

a { text-decoration: none; color: inherit; }

.header {
    background-color: rgba(13, 17, 28, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 14px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 8px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.logo:hover { opacity: 0.75; }

.logo-image {
    height: 28px;
    width: auto;
    object-fit: contain;
    display: block;
}

.logo-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.2px;
}

.nav-links {
    display: none;
    gap: 2px;
    align-items: center;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 7px;
    transition: color 0.15s, background 0.15s;
}
.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.05);
}
.nav-link.active {
    color: var(--text-primary);
    background: rgba(255,255,255,.06);
}

.nav-dot {
    width: 5px; height: 5px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    display: inline-block;
}

.nav-arrow { font-size: 9px; opacity: .5; }

/* Right side — tight icon cluster */
.header-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    border-radius: 9px;
    padding: 0;
}
.icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.07);
}
.icon-btn svg { width: 18px; height: 18px; }

/* Deposit button — compact on mobile */
.btn-primary {
    background: var(--accent-blue);
    color: var(--bg-primary);
    border: none;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    white-space: nowrap;
    transition: opacity 0.15s;
    letter-spacing: .01em;
}
.btn-primary:hover { opacity: .85; }

.btn-secondary {
    background: rgba(255,255,255,.07);
    color: var(--text-primary);
    border: none;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 34px;
    transition: background 0.15s;
}
.btn-secondary:hover { background: rgba(255,255,255,.11); }

.header-desktop-only { display: none; }

/* User chip (shown after login) */
.header-user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    max-width: 130px;
}
.header-user-chip:hover { background: rgba(255,255,255,.1); }

.header-user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.header-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70px;
}
.header-kyc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    flex-shrink: 0;
}
.header-kyc-dot.verified { background: var(--positive, #0ecb81); }

/* Auth buttons (logged out) */
.header-auth-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-login {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 7px;
    transition: color .15s, background .15s;
}
.btn-login:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.btn-signup {
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-primary);
    background: var(--accent-blue);
    padding: 6px 12px;
    border-radius: 7px;
    transition: opacity .15s;
}
.btn-signup:hover { opacity: .82; }

/* Notification dot */
.notif-dot-badge {
    position: absolute;
    top: 6px; right: 6px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--negative, #f6465d);
    border: 2px solid var(--bg-secondary);
}
.icon-btn { position: relative; }

.mobile-bottom-nav {
    display: none !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: rgba(13, 15, 22, 0.97);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
}

@media (min-width: 769px) {
    .mobile-bottom-nav, #mobileBottomNav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Force visible only on mobile screens */
@media (max-width: 768px) {
    .mobile-bottom-nav, #mobileBottomNav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    cursor: pointer;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.18s, transform 0.15s;
    text-decoration: none;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item svg {
    width: 22px; height: 22px;
    stroke: rgba(255, 255, 255, 0.45);
    transition: stroke 0.18s, filter 0.18s;
}
.mobile-nav-item:hover {
    color: rgba(255, 255, 255, 0.85);
}
.mobile-nav-item:hover svg {
    stroke: rgba(255, 255, 255, 0.85);
}
.mobile-nav-item.active {
    color: #00ff88;
}
.mobile-nav-item.active svg {
    stroke: #00ff88;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
}
.mobile-nav-item.active .mobile-nav-label {
    color: #00ff88;
    font-weight: 700;
}
.mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 2px;
    background: #00ff88;
    border-radius: 0 0 3px 3px;
}

.mobile-nav-icon {
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
}

.main-content {
    padding: 16px;
    min-height: calc(100vh - 56px - var(--bottom-nav-height));
}

.content-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.left-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.right-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.promo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
    margin-bottom: 4px;
    position: relative;
    padding: 24px 20px;
    border-radius: 16px;
    overflow: hidden;
}
.promo-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%,
        rgba(0, 212, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.promo-text > * { position: relative; z-index: 1; }

.promo-line-1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: -0.5px;
}
.promo-line-2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.promo-line-3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.learn-more {
    color: var(--text-primary);
    font-size: 14px;
    transition: color 0.2s;
    margin-bottom: 8px;
    display: inline-block;
}
.learn-more:hover { color: var(--accent-blue); }

.balance-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.eye-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    min-width: 32px;
    min-height: 32px;
}
.eye-btn:hover { color: var(--text-primary); }

.balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.balance-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.balance-usd {
    color: var(--text-primary);
    font-size: 14px;
}

.pnl { font-size: 13px; color: var(--text-secondary); }

.balance-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: nowrap;
}
.balance-actions .btn-primary  { flex: 1; justify-content: center; gap: 5px; font-size: 13px; padding: 9px 8px; }
.balance-actions .btn-secondary { flex: 1; justify-content: center; gap: 5px; font-size: 13px; padding: 9px 8px; }

/* Withdraw button — red tint, matches btn-secondary shape */
.btn-withdraw-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(246,70,93,.12);
    border: 1px solid rgba(246,70,93,.3);
    border-radius: 7px;
    color: var(--negative, #f6465d);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 34px;
    padding: 0 8px;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.btn-withdraw-action:hover {
    background: rgba(246,70,93,.2);
    border-color: rgba(246,70,93,.5);
}

.footer-text {
    font-size: 11px;
    color: var(--text-secondary);
    padding-top: 12px;
    line-height: 1.4;
}

.popular-section,
.news-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.section-tabs { display: flex; gap: 16px; }

.tab {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding-bottom: 4px;
    position: relative;
    transition: color 0.2s;
    background: transparent;
    border: none;
    min-height: 44px;
    display: flex;
    align-items: flex-end;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent-blue); }
.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background-color: var(--accent-blue);
}

.section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.view-all {
    color: var(--accent-blue);
    font-size: 11px;
    transition: color 0.2s;
}
.view-all:hover { color: var(--accent-blue-hover); }

.coins-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.coin-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    border-radius: 8px;
    transition: background-color 0.2s;
    cursor: pointer;
    min-height: 52px;
}
.coin-item:hover { background-color: var(--bg-tertiary); }

.coin-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.coin-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 4px;
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.coin-icon.btc { background-color: #F7931A; }
.coin-icon.eth { background-color: #627EEA; }
.coin-icon.bnb { background-color: #F3BA2F; }
.coin-icon.xrp { background-color: transparent; }
.coin-icon.xrp img { border-radius: 0; padding: 2px; }
.coin-icon.ton { background-color: #0088CC; }

.coin-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.coin-name { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.coin-ticker { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.coin-full { font-size: 11px; color: var(--text-secondary); }
.coin-price { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.coin-change {
    font-size: 12px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}
.coin-change.positive { color: var(--positive); }
.coin-change.negative { color: var(--negative); }

.news-list { display: flex; flex-direction: column; gap: 4px; }
.news-item {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 8px 6px;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.news-item:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.sliding-banner {
    width: 100%;
    background-color: var(--bg-primary);
    padding: 16px;
    margin-top: 8px;
}

.banner-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.banner-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 300%;
}

.banner-slide {
    width: 33.333%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.banner-image {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.3;
}

.banner-content {
    text-align: center;
    max-width: 600px;
    position: relative;
    z-index: 1;
}
.banner-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.banner-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.banner-btn {
    background-color: var(--accent-blue);
    color: var(--bg-primary);
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.2s;
}
.banner-btn:hover { background-color: var(--accent-blue-hover); }

.banner-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}
.banner-dots { display: flex; gap: 8px; align-items: center; }
.banner-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    min-width: 8px;
}
.banner-dot.active {
    background-color: var(--accent-blue);
    transform: scale(1.2);
}

.top-tokens-section {
    width: 100%;
    background-color: var(--bg-primary);
    padding: 32px 16px;
}

.top-tokens-container { max-width: 1400px; margin: 0 auto; }

.top-tokens-header {
    text-align: center;
    margin-bottom: 24px;
}
.top-tokens-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}
.top-tokens-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }

.top-tokens-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.token-card-large {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s ease;
}
.token-card-large:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.18);
}

.token-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.token-info-group { display: flex; align-items: center; gap: 14px; }

.token-logo-large {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 26px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #F7931A;
    position: relative;
    box-shadow: 0 6px 20px rgba(247, 147, 26, 0.4);
}
.token-logo-large img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 8px;
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.token-logo-large.btc-logo { background-color: #F7931A; }

.token-details { display: flex; flex-direction: column; gap: 4px; }
.token-pair { font-size: 16px; font-weight: 600; color: var(--text-primary); }

.token-change-large {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}
.token-change-large.positive {
    color: var(--positive);
    background-color: rgba(14, 203, 129, 0.1);
}
.token-change-large.negative {
    color: var(--negative);
    background-color: rgba(246, 70, 93, 0.1);
}

.token-price-group {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.token-price-large {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary); line-height: 1.2;
    transition: transform 0.3s ease-out, color 0.3s ease-out;
}
.token-price-label { font-size: 12px; color: var(--text-secondary); }

.chart-controls-bar {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.time-intervals {
    display: flex;
    gap: 4px;
    background-color: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}
.interval-btn {
    padding: 5px 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    min-height: 32px;
}
.interval-btn:hover { color: var(--text-primary); background-color: var(--bg-secondary); }
.interval-btn.active {
    background-color: var(--accent-blue);
    color: var(--bg-primary);
    font-weight: 600;
}

.token-chart-large {
    width: 100%;
    height: 220px;
    background-color: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.chart-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; }
.chart-glow-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: radial-gradient(ellipse at center top,
        rgba(0, 212, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.chart-svg { width: 100%; height: 100%; display: block; }
.chart-line { stroke-linecap: round; stroke-linejoin: round; transition: d 0.3s ease-out; }
.chart-area { transition: d 0.3s ease-out; }
.current-price-line { transition: x1 0.3s ease-out, x2 0.3s ease-out; }
.price-dot { transition: cx 0.3s ease-out, cy 0.3s ease-out; z-index: 3; }
.price-glow-edge {
    transition: cx 0.3s ease-out, cy 0.3s ease-out;
    animation: pulseGlowEdge 2s ease-in-out infinite; z-index: 2;
}
.price-glow-outer {
    transition: cx 0.3s ease-out, cy 0.3s ease-out;
    animation: pulseGlowOuter 2s ease-in-out infinite; z-index: 1;
}
@keyframes pulseGlowEdge {
    0%, 100% { opacity: 0.4; r: 8; }
    50% { opacity: 0.6; r: 10; }
}
@keyframes pulseGlowOuter {
    0%, 100% { opacity: 0.2; r: 12; }
    50% { opacity: 0.3; r: 16; }
}

.token-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.token-card-small {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: all 0.25s;
    cursor: pointer;
}
.token-card-small:hover {
    border-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.12);
}

.token-logo-small {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
    overflow: hidden; position: relative;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.token-logo-small img {
    width: 100%; height: 100%;
    object-fit: contain; border-radius: 50%;
    padding: 6px; display: block;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 1;
}
.token-logo-small.doge-logo { background-color: #C2A633; }
.token-logo-small.sol-logo  { background-color: #9945FF; }
.token-logo-small.mnt-logo  { background-color: #1a1a1a; border: 1px solid var(--border-color); }
.token-logo-small.usdc-logo { background-color: #2775CA; }
.token-logo-small.eth-logo  { background-color: #627EEA; }
.token-logo-small.bnb-logo  { background-color: #F3BA2F; }

.token-pair-small  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.token-price-small { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.token-change-small {
    font-size: 12px; font-weight: 600;
    padding: 3px 8px; border-radius: 6px; width: fit-content;
}
.token-change-small.positive {
    color: var(--positive); background-color: rgba(14, 203, 129, 0.12);
}
.token-change-small.negative {
    color: var(--negative); background-color: rgba(246, 70, 93, 0.12);
}

.features-section {
    width: 100%;
    background-color: var(--bg-secondary);
    padding: 32px 16px;
}
.features-container { max-width: 1400px; margin: 0 auto; }
.features-title {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feature-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: all 0.2s;
}
.feature-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}

.feature-icon-wrapper {
    width: 96px; height: 96px;
    border-radius: 20px;
    background-color: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.feature-image { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.feature-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.feature-title  { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.feature-description { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

.faq-section {
    width: 100%;
    background-color: var(--bg-primary);
    padding: 32px 16px;
}
.faq-container { max-width: 1400px; margin: 0 auto; }
.faq-title {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 24px;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq-item:hover,
.faq-item.active {
    border-bottom-color: var(--accent-blue);
}
.faq-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    min-height: 56px;
    user-select: none;
}
.faq-number {
    font-size: 13px; font-weight: 600;
    color: var(--accent-blue);
    min-width: 28px;
    flex-shrink: 0;
}
.faq-question {
    flex: 1;
    font-size: 14px; font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}
.faq-toggle {
    margin-left: auto;
    background: transparent; border: none;
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.faq-icon { font-size: 18px; transition: transform 0.2s; }
.faq-item.active .faq-toggle { color: var(--accent-blue); }
.faq-answer {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 0 16px 16px 40px;
    display: none;
}
.faq-answer p { margin: 0; }
.faq-answer .highlight { color: var(--accent-blue); font-weight: 600; }
.faq-item.active .faq-answer { display: block; }

.faq-item.open .faq-answer { display: block; }

.cta-section {
    width: 100%;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 40px 16px;
    text-align: center;
}
.cta-container { max-width: 600px; margin: 0 auto; }
.cta-title {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.3;
}
.cta-button {
    background-color: var(--accent-blue);
    color: var(--bg-primary);
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px; font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: background-color 0.2s;
}
.cta-button:hover { background-color: var(--accent-blue-hover); }

.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 0 16px;
}
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--border-color);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 280px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}
.footer-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
}
.footer-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.3px;
}

.footer-tagline {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-social-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.footer-social-icon:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--bg-primary);
    transform: translateY(-2px);
}

.footer-locale {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-locale-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 36px;
}
.footer-locale-btn:hover {
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
}
.footer-column-title {
    font-size: 13px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 11px;
}
.footer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-list a {
    font-size: 13px;
    color: var(--text-secondary);
    transition: color 0.2s;
    display: block;
    line-height: 1.4;
}
.footer-list a:hover { color: var(--accent-blue); }

.footer-bottom {
    padding: 16px 0;
}
.footer-bottom-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}
.footer-copyright {
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-bottom-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-bottom-links a {
    font-size: 12px;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--accent-blue); }

.wallet-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.wallet-modal.active { display: flex; }

.wallet-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.wallet-modal-content {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);

    width: 100%;
    height: 92vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10001;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}
@keyframes slideUpModal {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.wallet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.wallet-header h2 {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.wallet-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}
.wallet-close-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.wallet-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.wallet-balance-section { margin-bottom: 24px; }
.balance-header { margin-bottom: 16px; }
.balance-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 10px;
}
.balance-main {
    font-size: 28px; font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2; margin-bottom: 4px;
}
.balance-pnl {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.pnl-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-secondary);
}
.pnl-value { font-size: 13px; font-weight: 600; }
.pnl-value.positive { color: var(--positive); }
.pnl-value.negative { color: var(--negative); }

.wallet-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.wallet-action-btn {
    flex: 1;
    padding: 10px 14px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.2s;
}
.wallet-action-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.wallet-chart { height: 60px; margin-bottom: 8px; }
.wallet-chart canvas { width: 100%; height: 100%; }

.wallet-assets-section { margin-top: 24px; }
.assets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}
.assets-header h3 {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.assets-controls {
    display: flex; align-items: center; gap: 12px;
}
.assets-tabs {
    display: flex; gap: 0;
    background-color: var(--bg-secondary);
    border-radius: 6px; padding: 2px;
}
.asset-tab {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    min-height: 36px;
}
.asset-tab.active {
    background-color: var(--bg-primary);
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
}
.filter-checkbox {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer;
}

.assets-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.assets-table table { width: 100%; border-collapse: collapse; min-width: 500px; }
.assets-table thead { background-color: var(--bg-secondary); }
.assets-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.assets-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.assets-table tbody tr:hover { background-color: var(--bg-secondary); }
.asset-row td { padding: 12px; }

.asset-coin { display: flex; align-items: center; gap: 10px; }
.asset-icon {
    width: 36px; height: 36px;
    border-radius: 50%; overflow: hidden;
    background-color: #26A17B;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.asset-icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.asset-info { display: flex; flex-direction: column; gap: 2px; }
.asset-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.asset-full-name { font-size: 11px; color: var(--text-secondary); }
.asset-amount, .asset-price { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.asset-pnl { font-size: 13px; color: var(--text-secondary); }

.asset-sub-row { background-color: var(--bg-secondary); }
.asset-sub-row td { padding: 10px 12px 10px 58px; }
.sub-accounts { display: flex; flex-direction: column; gap: 6px; }
.sub-account { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.sub-account-label { color: var(--text-secondary); min-width: 54px; }
.sub-account-amount { color: var(--text-primary); font-weight: 500; flex: 1; }
.sub-account-trade {
    color: var(--accent-blue); font-weight: 500;
    transition: color 0.2s;
}
.sub-account-trade:hover { color: var(--accent-blue-hover); }

.wallet-transactions-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.transactions-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.transactions-header h3 {
    font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0;
}
.transactions-more-link {
    font-size: 13px; color: var(--text-secondary); transition: color 0.2s;
}
.transactions-more-link:hover { color: var(--accent-blue); }

.transactions-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.transactions-table table { width: 100%; border-collapse: collapse; min-width: 400px; }
.transactions-table thead { background-color: var(--bg-secondary); }
.transactions-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.transactions-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}
.transactions-table tbody tr:hover { background-color: var(--bg-secondary); }
.transactions-table tbody tr:last-child { border-bottom: none; }
.transaction-row td { padding: 12px; }

.transaction-type {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-primary);
}
.transaction-amount { font-size: 13px; font-weight: 600; }
.transaction-amount.positive { color: var(--positive); }
.transaction-amount.negative { color: var(--negative); }
.transaction-date { font-size: 12px; color: var(--text-secondary); }
.transaction-status { font-size: 12px; font-weight: 500; }
.transaction-status.completed { color: var(--positive); }
.transaction-status.pending  { color: var(--text-secondary); }
.transaction-status.failed   { color: var(--negative); }

.profile-modal {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: 62px; /* clear the mobile nav */
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.profile-modal.active { display: flex; }
.profile-modal-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.profile-modal-content {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    width: 100%; height: 90vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex; flex-direction: column;
    z-index: 10001;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}
.profile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.profile-header h2 {
    font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0;
}
.profile-close-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.profile-close-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.profile-body {
    padding: 16px;
    overflow-y: auto; flex: 1;
    -webkit-overflow-scrolling: touch;
}

.profile-user-section {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.profile-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); flex-shrink: 0;
}
.profile-user-info { display: flex; flex-direction: column; gap: 6px; }
.profile-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.profile-icons { display: flex; gap: 6px; }
.profile-icon-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 36px; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.2s;
}
.profile-icon-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.profile-details { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.profile-detail-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.copy-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    padding: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
    min-width: 28px; min-height: 28px;
}
.copy-btn:hover { color: var(--accent-blue); }

.profile-balance-section {
    background-color: var(--bg-secondary);
    border-radius: 12px; padding: 16px;
    margin-bottom: 20px; position: relative;
}
.profile-balance-header { margin-bottom: 16px; }
.profile-balance-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 10px;
}
.profile-balance-amount { margin-bottom: 12px; }
.profile-balance-main {
    font-size: 24px; font-weight: 700;
    color: var(--text-primary); line-height: 1.2;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.dropdown-arrow { font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.profile-balance-usd { font-size: 14px; color: var(--text-secondary); }
.profile-balance-pnl {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.profile-pnl-label { font-size: 13px; color: var(--text-secondary); }
.profile-pnl-value { font-size: 13px; font-weight: 600; }
.profile-pnl-value.positive { color: var(--positive); }
.profile-pnl-value.negative { color: var(--negative); }

.profile-actions {
    display: flex; gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.profile-action-btn {
    flex: 1; min-width: 80px;
    padding: 10px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-primary);
    font-size: 13px; font-weight: 500;
    cursor: pointer; min-height: 44px;
    transition: all 0.2s;
}
.profile-action-btn:hover {
    background-color: var(--bg-primary);
    border-color: var(--accent-blue);
}

.profile-chart { height: 60px; margin-top: 16px; }
.profile-chart canvas { width: 100%; height: 100%; }

.profile-markets-section {
    background-color: var(--bg-secondary);
    border-radius: 12px; padding: 16px;
}
.markets-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.markets-header h3 {
    font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0;
}
.markets-more-link {
    font-size: 13px; color: var(--text-secondary); transition: color 0.2s;
}
.markets-more-link:hover { color: var(--accent-blue); }

.markets-tabs {
    display: flex;
    background-color: var(--bg-primary);
    border-radius: 6px; padding: 2px;
    margin-bottom: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0;
}
.market-tab {
    padding: 8px 14px;
    background: transparent; border: none;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
    min-height: 36px;
}
.market-tab.active {
    background-color: var(--bg-secondary);
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
}

.markets-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.markets-table table { width: 100%; border-collapse: collapse; min-width: 420px; }
.markets-table thead { background-color: var(--bg-primary); }
.markets-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.markets-table tbody tr {
    border-bottom: 1px solid var(--border-color); transition: background-color 0.2s;
}
.markets-table tbody tr:hover { background-color: var(--bg-primary); }
.markets-table tbody tr:last-child { border-bottom: none; }
.market-row td { padding: 12px; }

.market-coin { display: flex; align-items: center; gap: 10px; }
.market-icon {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background-color: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.market-icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.market-info { display: flex; flex-direction: column; gap: 2px; }
.market-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.market-full-name { font-size: 11px; color: var(--text-secondary); }
.market-price { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.market-price-usd { font-size: 11px; color: var(--text-secondary); }
.market-change { font-size: 13px; font-weight: 600; }
.market-change.positive { color: var(--positive); }
.market-change.negative { color: var(--negative); }
.market-trade-btn {
    padding: 6px 14px;
    background-color: var(--accent-blue);
    border: none; border-radius: 6px;
    color: var(--bg-primary);
    font-size: 12px; font-weight: 600; cursor: pointer;
    min-height: 34px; transition: background-color 0.2s;
}
.market-trade-btn:hover { background-color: var(--accent-blue-hover); }

.messages-modal {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: 62px; /* clear the mobile nav */
    z-index: 10000; display: none;
    align-items: flex-end; justify-content: center;
}
.messages-modal.active { display: flex; }
.messages-modal-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.messages-modal-content {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    width: 100%; height: 90vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex; flex-direction: column;
    z-index: 10001;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}
.messages-header {
    display: flex; align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
    flex-wrap: wrap;
}
.messages-header h2 {
    font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1;
}
.messages-header-actions {
    display: flex; align-items: center; gap: 8px;
    margin-right: 8px;
}
.messages-icon-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.messages-icon-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }
.messages-filter {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px; padding: 6px 10px;
    color: var(--text-primary); font-size: 13px;
    cursor: pointer; outline: none;
    min-height: 36px;
}
.messages-close-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.messages-close-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.messages-body {
    display: flex; flex: 1; overflow: hidden;
    flex-direction: column; 
}

.messages-sidebar { display: none; }

.messages-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; color: var(--text-secondary);
    cursor: pointer; transition: all 0.2s; position: relative;
    min-height: 44px;
}
.messages-nav-item:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }
.messages-nav-item.active { background-color: var(--bg-tertiary); color: var(--text-primary); }
.messages-nav-item svg { flex-shrink: 0; }
.messages-nav-item span:first-of-type { flex: 1; font-size: 14px; }
.messages-badge {
    background-color: #F0B90B; color: var(--bg-primary);
    font-size: 11px; font-weight: 600;
    padding: 2px 6px; border-radius: 10px;
    min-width: 18px; text-align: center;
}

.messages-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.messages-category-title {
    padding: 16px;
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.messages-list {
    flex: 1; overflow-y: auto; padding: 0;
    -webkit-overflow-scrolling: touch;
}
.message-item {
    display: flex; align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s; cursor: pointer;
    min-height: 56px;
}
.message-item:hover { background-color: var(--bg-secondary); }
.message-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.message-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.message-description { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.message-view-more {
    font-size: 12px; color: var(--accent-blue);
    margin-top: 4px; transition: color 0.2s;
}
.message-view-more:hover { color: var(--accent-blue-hover); }
.message-meta {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 8px; margin-left: 12px;
}
.message-time { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

.deposit-modal {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: 62px; /* clear the mobile nav */
    z-index: 10000; display: none;
    align-items: flex-end; justify-content: center;
}
.deposit-modal.active { display: flex; }
.deposit-modal-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.deposit-modal-content {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    width: 100%; max-height: 90vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden; display: flex; flex-direction: column;
    z-index: 10001;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}
.deposit-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.deposit-header h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; }
.deposit-close-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.deposit-close-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.deposit-body {
    padding: 16px;
    overflow-y: auto; flex: 1;
    -webkit-overflow-scrolling: touch;
}
.deposit-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }

.deposit-coins-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.deposit-coin-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    cursor: pointer; transition: all 0.2s;
    min-height: 56px;
}
.deposit-coin-card:hover { border-color: var(--accent-blue); }
.deposit-coin-card.selected { border-color: var(--accent-blue); background-color: rgba(0, 212, 255, 0.08); }

.deposit-coin-icon {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    cursor: pointer; position: relative;
    transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
}
.deposit-coin-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
    background-color: rgba(30, 144, 255, 0.05);
}
.deposit-coin-card.selected {
    border-color: var(--accent-blue);
    background-color: rgba(30, 144, 255, 0.1);
}
.deposit-coin-icon { width: 40px; height: 40px; margin-bottom: 8px; }
.deposit-coin-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.deposit-coin-full-name { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.deposit-coin-check {
    position: absolute; top: 8px; right: 8px;
    color: var(--accent-blue); display: none;
}
.deposit-coin-card.selected .deposit-coin-check { display: block; }

.deposit-selected-info {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 16px; margin-bottom: 20px;
}
.deposit-selected-coin { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.deposit-selected-icon img { width: 32px; height: 32px; }
.deposit-selected-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.deposit-selected-details { flex: 1; }

.deposit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.deposit-action-btn {
    flex: 1; min-width: 100px;
    padding: 12px 16px;
    background-color: var(--accent-blue);
    border: none; border-radius: 8px;
    color: var(--bg-primary);
    font-size: 14px; font-weight: 600;
    cursor: pointer; min-height: 48px;
    transition: background-color 0.2s;
}
.deposit-action-btn:hover { background-color: var(--accent-blue-hover); }
.deposit-action-btn.secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.deposit-action-btn.secondary:hover { border-color: var(--accent-blue); }

.deposit-qr-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 62px;
    z-index: 99998; display: none;
    align-items: flex-end; justify-content: center;
}
.deposit-qr-modal.active { display: flex; }
.deposit-qr-modal-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
.deposit-qr-modal-content {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    width: 100%; max-height: 90vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden; display: flex; flex-direction: column;
    z-index: 99999;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}
.deposit-qr-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.deposit-qr-close-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.deposit-qr-close-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.deposit-qr-coin-info {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.qr-coin-icon {
    width: 38px; height: 38px; border-radius: 50%;
    overflow: hidden; background-color: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qr-coin-icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.qr-coin-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.qr-coin-network { font-size: 12px; color: var(--text-secondary); }

.deposit-qr-content {
    padding: 20px 16px;
    overflow-y: auto; flex: 1;
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 20px;
}
.deposit-qr-code-container {
    display: flex; justify-content: center; align-items: center;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: 12px;
}
.deposit-qr-image {
    width: 180px; height: 180px;
    object-fit: contain;
    border-radius: 8px;
}
.deposit-address-section { display: flex; flex-direction: column; gap: 8px; }
.deposit-address-label { font-size: 13px; color: var(--text-secondary); }
.deposit-address-wrapper {
    display: flex; align-items: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; padding: 10px 12px; gap: 8px;
}
.deposit-address {
    flex: 1; font-size: 12px;
    color: var(--text-primary);
    word-break: break-all; font-family: monospace;
}
.deposit-copy-btn {
    background: transparent; border: none;
    color: var(--accent-blue); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.2s; flex-shrink: 0;
}
.deposit-copy-btn:hover { background-color: rgba(0, 212, 255, 0.1); }

.deposit-memo-info {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.memo-label { font-size: 12px; color: var(--text-secondary); }
.memo-text { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.deposit-amount-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.deposit-amount-input-wrap {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.deposit-amount-input-wrap:focus-within {
    border-color: var(--accent-blue);
}
.deposit-amount-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 14px;
    min-width: 0;
}
.deposit-amount-input::placeholder { color: var(--text-secondary); font-weight: 400; }
.deposit-amount-coin {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-blue);
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    align-items: center;
    background: rgba(0,212,255,0.05);
}
.deposit-amount-hint {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.deposit-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background-color: rgba(246, 70, 93, 0.08);
    border: 1px solid rgba(246, 70, 93, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #f6465d;
    line-height: 1.5;
}
.deposit-warning svg { flex-shrink: 0; margin-top: 1px; }

.deposit-confirm-sent-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--positive);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 4px;
}
.deposit-confirm-sent-btn:hover { background-color: #0bb873; }
.deposit-confirm-sent-btn:active { transform: scale(0.98); }

/* ── Mobile Ultra-Minimal Optimization for Deposit QR Modal ────────────── */
@media (max-width: 767px) {
    .deposit-qr-modal {
        bottom: 0;
        align-items: flex-end;
    }
    .deposit-qr-modal-content {
        width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
        border: 1px solid var(--border-color);
        border-bottom: none;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    }
    .deposit-qr-header {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
    }
    .qr-coin-icon {
        width: 28px; height: 28px;
    }
    .qr-coin-name {
        font-size: 13px; font-weight: 700; line-height: 1.2;
    }
    .qr-coin-network {
        font-size: 10px; opacity: 0.7;
    }
    .deposit-qr-close-btn {
        min-width: 32px; min-height: 32px;
        width: 32px; height: 32px;
        padding: 4px; border-radius: 6px;
    }
    .deposit-qr-content {
        padding: 12px 14px;
        gap: 10px;
    }
    .deposit-qr-code-container {
        padding: 6px;
        border-radius: 10px;
        width: max-content;
        margin: 0 auto;
        background-color: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
    .deposit-qr-image {
        width: 115px; height: 115px;
        border-radius: 4px;
        display: block;
    }
    .deposit-address-section {
        gap: 3px;
    }
    .deposit-address-label {
        font-size: 10px; font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-secondary);
    }
    .deposit-address-wrapper {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
        background-color: var(--bg-tertiary);
    }
    .deposit-address {
        font-size: 11px;
        font-family: monospace;
        word-break: break-all;
        line-height: 1.3;
    }
    .deposit-copy-btn {
        min-width: 28px; min-height: 28px;
        width: 28px; height: 28px;
        padding: 4px;
    }
    .deposit-copy-btn svg {
        width: 15px; height: 15px;
    }
    .deposit-amount-section {
        gap: 3px;
    }
    .deposit-amount-input-wrap {
        border-radius: 8px;
        background-color: var(--bg-tertiary);
    }
    .deposit-amount-input {
        padding: 7px 10px;
        font-size: 13px;
        height: 36px;
    }
    .deposit-amount-coin {
        padding: 0 8px;
        font-size: 11px;
        height: 36px;
    }
    .deposit-amount-hint {
        font-size: 9.5px; opacity: 0.8;
    }
    .deposit-warning {
        padding: 6px 10px;
        font-size: 10px;
        gap: 6px;
        border-radius: 6px;
        line-height: 1.3;
    }
    .deposit-warning svg {
        width: 12px; height: 12px; flex-shrink: 0;
    }
    .deposit-confirm-sent-btn {
        min-height: 40px;
        height: 40px;
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 8px;
        font-weight: 700;
        margin-top: 2px;
    }
}

.deposit-waiting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px 20px 28px;
}

.deposit-waiting-spinner {
    position: relative;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.spinner-ring {
    position: absolute;
    inset: 0;
    width: 80px; height: 80px;
    animation: spinRing 2s linear infinite;
}
@keyframes spinRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spinner-track {
    stroke: var(--bg-tertiary);
    stroke-dasharray: 138;
    stroke-dashoffset: 0;
}
.spinner-fill {
    stroke: var(--accent-blue);
    stroke-dasharray: 138;
    stroke-dashoffset: 100;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--accent-blue));
}
.spinner-icon {
    position: relative;
    z-index: 1;
    color: var(--accent-blue);
    display: flex; align-items: center; justify-content: center;
}

.deposit-waiting-title {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    margin: 0; text-align: center;
}
.deposit-waiting-subtitle {
    font-size: 13px; color: var(--text-secondary);
    margin: -10px 0 0; text-align: center; line-height: 1.5;
}

.deposit-confirm-blocks {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
}
.confirm-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.confirm-block-line {
    width: 2px; height: 20px;
    background-color: var(--border-color);
    margin-left: 14px;
}
.confirm-block-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s;
}
.confirm-block-icon.waiting {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
}
.confirm-block-icon.pending {
    background-color: rgba(0, 212, 255, 0.1);
    border: 2px solid var(--accent-blue);
    color: var(--accent-blue);
    animation: pulseBorder 1.2s ease-in-out infinite;
}
.confirm-block-icon.done {
    background-color: var(--positive);
    border: 2px solid var(--positive);
    color: #fff;
}
@keyframes pulseBorder {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0); }
}
.confirm-block-info {
    display: flex; flex-direction: column; gap: 2px;
}
.confirm-block-label {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.confirm-block-status {
    font-size: 11px; color: var(--text-secondary);
}

.deposit-timer-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--accent-blue);
    font-weight: 500;
    width: 100%;
    justify-content: center;
}
#deposit-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.deposit-txid-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deposit-txid-label {
    font-size: 11px; color: var(--text-secondary);
}
.deposit-txid-value {
    font-size: 11px; color: var(--text-primary);
    font-family: monospace;
    word-break: break-all;
    background-color: var(--bg-tertiary);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.deposit-success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px 36px;
    text-align: center;
}
.deposit-success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background-color: rgba(14, 203, 129, 0.12);
    border: 2px solid var(--positive);
    display: flex; align-items: center; justify-content: center;
    color: var(--positive);
    animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes successPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.deposit-success-title {
    font-size: 20px; font-weight: 700;
    color: var(--text-primary); margin: 0;
}
.deposit-success-subtitle {
    font-size: 13px; color: var(--text-secondary);
    margin: -8px 0 0; line-height: 1.5; max-width: 280px;
}
.deposit-success-amount {
    font-size: 14px; font-weight: 600;
    color: var(--positive);
    background-color: rgba(14, 203, 129, 0.08);
    border: 1px solid rgba(14, 203, 129, 0.2);
    border-radius: 8px;
    padding: 10px 20px;
}
.deposit-success-close-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--accent-blue);
    color: var(--bg-primary);
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700;
    cursor: pointer; min-height: 48px;
    transition: background-color 0.2s;
    margin-top: 8px;
}
.deposit-success-close-btn:hover { background-color: var(--accent-blue-hover); }

.floating-help-btn {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 16px);
    right: 16px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
    transition: all 0.2s;
    color: var(--bg-primary);
}
.floating-help-btn:hover {
    background-color: var(--accent-blue-hover);
    transform: scale(1.05);
}

.chatbot-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 62px;
    z-index: 10000; display: none;
    align-items: flex-end; justify-content: center;
}
.chatbot-modal.active { display: flex; }
.chatbot-modal-overlay {
    position: absolute; inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.chatbot-container {
    position: relative;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    width: 100%; height: 88vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden; display: flex; flex-direction: column;
    z-index: 10001;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
    animation: slideUpModal 0.3s ease-out;
}

.chatbot-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}
.chatbot-header-left { display: flex; align-items: center; gap: 12px; flex: 1; }
.chatbot-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
    display: flex; align-items: center; justify-content: center;
    color: var(--bg-primary); flex-shrink: 0;
}
.chatbot-header-info { display: flex; flex-direction: column; gap: 2px; }
.chatbot-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.chatbot-status {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--positive);
}
.status-dot {
    width: 7px; height: 7px;
    background-color: var(--positive);
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.chatbot-close-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.2s;
}
.chatbot-close-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.chatbot-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    -webkit-overflow-scrolling: touch;
}
.chatbot-message { display: flex; gap: 10px; align-items: flex-start; }
.bot-message { flex-direction: row; }
.user-message { flex-direction: row-reverse; }

.message-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background-color: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--text-secondary);
}
.bot-avatar {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
    color: var(--bg-primary);
}
.message-text {
    max-width: 75%; padding: 10px 14px;
    border-radius: 14px; font-size: 13px; line-height: 1.5;
}
.bot-message .message-text {
    background-color: var(--bg-tertiary); color: var(--text-primary);
    border-radius: 4px 14px 14px 14px;
}
.bot-message .message-text a {
    color: var(--accent-blue, #00f2fe);
    text-decoration: underline;
    font-weight: 500;
    word-break: break-all;
    transition: opacity 0.2s ease;
}
.bot-message .message-text a:hover {
    opacity: 0.85;
}
.user-message .message-text {
    background-color: var(--accent-blue); color: var(--bg-primary);
    border-radius: 14px 4px 14px 14px;
}

.typing-indicator { display: flex; align-items: center; gap: 10px; }
.typing-dots { display: flex; gap: 4px; padding: 12px 14px; background-color: var(--bg-tertiary); border-radius: 14px; }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typingBounce 1.2s infinite;
    display: block;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.chatbot-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    display: flex; flex-direction: column; gap: 10px;
}
.chatbot-quick-actions {
    display: flex; gap: 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.quick-action-btn {
    padding: 6px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    white-space: nowrap; min-height: 34px;
    transition: all 0.2s;
}
.quick-action-btn:hover {
    border-color: var(--accent-blue); color: var(--accent-blue);
}
.chatbot-input-wrapper {
    display: flex; align-items: center; gap: 10px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px; padding: 6px 6px 6px 16px;
}
.chatbot-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 14px;
    min-height: 36px; resize: none;
}
.chatbot-input::placeholder { color: var(--text-secondary); }
.chatbot-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--bg-primary); flex-shrink: 0;
    transition: background-color 0.2s;
}
.chatbot-send-btn:hover { background-color: var(--accent-blue-hover); }

.square-dropdown {
    position: absolute;
    top: 56px; left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; padding: 12px;
    width: calc(100% - 32px); max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999; display: none;
}
.dropdown-item {
    display: flex; align-items: flex-start;
    gap: 10px; padding: 10px;
    border-radius: 8px; cursor: pointer;
    transition: background-color 0.2s;
    min-height: 48px;
}
.dropdown-item:hover { background-color: var(--bg-tertiary); }
.dropdown-icon { color: var(--accent-blue); flex-shrink: 0; }
.dropdown-content { flex: 1; }
.dropdown-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.dropdown-desc { font-size: 13px; color: var(--text-secondary); }

.trading-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px - var(--bottom-nav-height));
    background-color: var(--bg-primary);
}

.trading-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trading-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.trading-pair-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.trading-pair {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.trading-type {
    font-size: 11px;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    padding: 2px 6px;
}
.trading-price-info { display: flex; flex-direction: column; gap: 2px; }
.last-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--positive);
}
.price-usd { font-size: 12px; color: var(--text-secondary); }

.trading-header-stats {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.stat-item { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.stat-label { font-size: 10px; color: var(--text-secondary); }
.stat-value { font-size: 12px; color: var(--text-primary); font-weight: 500; }

.trading-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-status {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: rgba(14, 203, 129, 0.1);
    color: var(--positive);
    font-weight: 600;
}

.trading-mobile-tabs {
    display: flex;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.trading-mobile-tab {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    min-height: 44px;
    transition: all 0.2s;
}
.trading-mobile-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.trading-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.trading-panel-hidden { display: none !important; }

.order-book-panel {
    background-color: var(--bg-secondary);
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
}

.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.panel-tab {
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
    transition: all 0.2s;
}
.panel-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

.order-book-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }
.order-book-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4px 12px;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}
.order-book-sell,
.order-book-buy { display: flex; flex-direction: column; }

.order-book-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 3px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
    min-height: 24px;
    align-items: center;
}
.order-book-row:hover { background-color: var(--bg-tertiary); }
.order-book-row span { font-size: 11px; font-weight: 500; position: relative; z-index: 1; }

.order-book-row.sell .price { color: var(--negative); }
.order-book-row.buy  .price { color: var(--positive); }

.order-book-row.sell-row span:first-child { color: var(--negative); }
.order-book-row.buy-row  span:first-child { color: var(--positive); }

.depth-bg {
    position: absolute; top: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
}
.order-book-row.sell .depth-bg,
.order-book-row.sell-row .depth-bg { background-color: rgba(246, 70, 93, 0.08); }
.order-book-row.buy .depth-bg,
.order-book-row.buy-row  .depth-bg { background-color: rgba(14, 203, 129, 0.08); }

.order-book-row .qty   { text-align: center; color: var(--text-secondary); }
.order-book-row .total { text-align: right;  color: var(--text-secondary); }

.order-book-mid {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 12px; gap: 8px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}
.mid-price { font-size: 14px; font-weight: 700; color: var(--positive); }
.mid-usd   { font-size: 11px; color: var(--text-secondary); }

.order-book-depth {
    display: flex; padding: 6px 12px; gap: 8px;
    align-items: center;
}

.depth-buy, .depth-sell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
}
.depth-buy { color: var(--positive); }
.depth-sell { color: var(--negative); }

.depth-bar {
    flex: 1;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}
.depth-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.depth-buy .depth-fill  { background-color: var(--positive); }
.depth-sell .depth-fill { background-color: var(--negative); }

.recent-trades-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.trades-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 6px 12px;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}
.trades-list { display: flex; flex-direction: column; }
.trade-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4px 12px; min-height: 26px;
    align-items: center; cursor: pointer;
    transition: background-color 0.15s;
}
.trade-row:hover { background-color: var(--bg-tertiary); }
.trade-row span { font-size: 11px; font-weight: 500; }
.trade-row.buy  span:first-child { color: var(--positive); }
.trade-row.sell span:first-child { color: var(--negative); }

.chart-panel {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.chart-tabs {
    display: flex; gap: 0;
    background-color: var(--bg-secondary);
    border-radius: 6px; padding: 2px;
}
.chart-tab {
    padding: 5px 12px;
    background: transparent; border: none;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer; border-radius: 4px;
    transition: all 0.2s; min-height: 32px;
}
.chart-tab.active { background-color: var(--bg-tertiary); color: var(--text-primary); }

.chart-view-options { display: flex; gap: 4px; }
.view-btn {
    padding: 5px 10px;
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    border-radius: 4px; font-size: 12px;
    min-height: 32px; transition: all 0.2s;
}
.view-btn.active, .view-btn:hover {
    background-color: var(--bg-secondary); color: var(--text-primary);
}

.chart-timeframes {
    display: flex; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.timeframe-btn {
    padding: 5px 10px;
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    border-radius: 4px; font-size: 11px;
    white-space: nowrap; min-height: 32px;
    transition: all 0.2s;
}
.timeframe-btn.active { background-color: rgba(0, 212, 255, 0.1); color: var(--accent-blue); font-weight: 600; }
.timeframe-btn:hover  { background-color: var(--bg-secondary); color: var(--text-primary); }

.chart-container-trading {
    flex: 1; position: relative; min-height: 240px;
    overflow: hidden;
}
.chart-container-trading canvas { width: 100% !important; height: 100% !important; display: block; }

.chart-ohlc {
    padding: 6px 12px;
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}
.chart-ohlc span {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex; gap: 4px; align-items: center;
}

.chart-ohlc span span,
.chart-ohlc span b {
    color: var(--text-primary);
    font-weight: 600;
}
.ohlc-change { font-size: 11px; font-weight: 600; }
.ohlc-change.positive { color: var(--positive); }
.ohlc-change.negative { color: var(--negative); }

.volume-chart {
    height: 60px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.volume-chart canvas,
#volumeCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.trade-panel {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.chart-quick-trade {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 12px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .chart-quick-trade { display: none; }
}

.quick-trade-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.quick-trade-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 40px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}
.quick-trade-btn.quick-buy.active,
.quick-trade-btn.quick-buy:hover {
    background-color: var(--positive);
    color: #fff;
}
.quick-trade-btn.quick-sell.active,
.quick-trade-btn.quick-sell:hover {
    background-color: var(--negative);
    color: #fff;
}

.quick-trade-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quick-trade-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quick-trade-label {
    font-size: 12px;
    color: var(--text-secondary);
    width: 52px;
    flex-shrink: 0;
}
.quick-trade-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.quick-trade-input-wrap:focus-within {
    border-color: var(--accent-blue);
}
.quick-trade-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    min-width: 0;
}
.quick-trade-unit {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 10px;
    flex-shrink: 0;
}

.quick-trade-pct {
    display: flex;
    gap: 6px;
}
.quick-pct-btn {
    flex: 1;
    padding: 6px 4px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 32px;
}
.quick-pct-btn:hover,
.quick-pct-btn.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background-color: rgba(0, 212, 255, 0.08);
}

.quick-trade-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
}
.quick-trade-info b {
    color: var(--text-primary);
    font-weight: 600;
}

.quick-submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.2s;
}
.quick-submit-buy {
    background-color: var(--positive);
    color: #fff;
}
.quick-submit-buy:hover { background-color: #0bb873; }
.quick-submit-sell {
    background-color: var(--negative);
    color: #fff;
}
.quick-submit-sell:hover { background-color: #d93a52; }

.trade-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.trade-tab {
    padding: 10px 14px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    min-height: 44px; transition: all 0.2s;
}
.trade-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.trade-tab.buy.active  { color: var(--positive); border-bottom-color: var(--positive); }
.trade-tab.sell.active { color: var(--negative); border-bottom-color: var(--negative); }

.margin-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    font-size: 12px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.toggle-switch {
    position: relative; width: 34px; height: 18px;
    cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; inset: 0;
    background-color: var(--bg-tertiary);
    border-radius: 9px; transition: all 0.2s;
    cursor: pointer;
}
.toggle-slider::before {
    content: '';
    position: absolute; height: 12px; width: 12px;
    left: 3px; bottom: 3px;
    background-color: var(--text-secondary);
    border-radius: 50%; transition: all 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--accent-blue); }
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background-color: var(--bg-primary);
}

.trade-actions {
    display: flex; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.trade-action-btn {
    padding: 6px 14px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    white-space: nowrap; min-height: 34px;
    transition: all 0.2s;
}
.trade-action-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.trade-action-btn.active { background-color: var(--accent-blue); color: var(--bg-primary); border-color: var(--accent-blue); }

.buy-btn  { color: var(--positive) !important; border-color: var(--positive) !important; }
.sell-btn { color: var(--negative) !important; border-color: var(--negative) !important; }
.buy-btn.active  { background-color: var(--positive) !important; color: var(--bg-primary) !important; }
.sell-btn.active { background-color: var(--negative) !important; color: var(--bg-primary) !important; }

.order-type-tabs {
    display: flex; gap: 0; padding: 10px 12px 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.order-type-btn {
    padding: 8px 14px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    min-height: 40px; transition: all 0.2s;
}
.order-type-btn.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

.trade-form { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; color: var(--text-secondary); }

.input-wrapper {
    display: flex; align-items: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px; overflow: hidden;
    transition: border-color 0.2s;
}
.input-wrapper:focus-within { border-color: var(--accent-blue); }

.trade-input {
    flex: 1; padding: 9px 12px;
    background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 13px;
    min-height: 40px;
}
.input-suffix {
    padding: 0 12px;
    font-size: 12px; color: var(--text-secondary);
    border-left: 1px solid var(--border-color);
    height: 100%; display: flex; align-items: center;
    background-color: var(--bg-tertiary);
    white-space: nowrap;
}

.quantity-slider-container { padding: 4px 0; }
.quantity-slider {
    width: 100%; height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 2px; outline: none;
    cursor: pointer;
}
.quantity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
}
.slider-marks {
    display: flex; justify-content: space-between;
    padding-top: 4px;
}
.slider-marks span { font-size: 10px; color: var(--text-secondary); }

.balance-info { display: flex; flex-direction: column; gap: 4px; }
.balance-row {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-secondary);
}
.balance-row span:last-child { color: var(--text-primary); font-weight: 500; }

.trade-options { display: flex; flex-direction: column; gap: 6px; }
.checkbox-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer; min-height: 32px;
}
.checkbox-label input { cursor: pointer; }

.trade-select {
    width: 100%; padding: 8px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px; color: var(--text-primary);
    font-size: 13px; outline: none;
    cursor: pointer; min-height: 40px;
    appearance: none; -webkit-appearance: none;
}

.submit-trade-btn {
    width: 100%; padding: 13px;
    border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; min-height: 48px;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.buy-submit  { background-color: var(--positive); color: #fff; }
.sell-submit { background-color: var(--negative); color: #fff; }
.buy-submit:hover  { background-color: #0ab26e; }
.sell-submit:hover { background-color: #e03050; }

.positions-panel {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    min-height: 200px;
}
.positions-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.positions-tab {
    padding: 10px 14px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    min-height: 40px; transition: all 0.2s;
}
.positions-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

.positions-content { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }

.positions-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-header {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.6fr 0.6fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr 0.7fr;
    padding: 8px 12px;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
    min-width: 700px;
}
.table-header span { font-size: 10px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.table-body { display: flex; flex-direction: column; min-width: 700px; }
.table-row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.6fr 0.6fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr 0.7fr;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    align-items: center; gap: 4px;
    transition: background-color 0.15s;
    min-height: 44px;
    min-width: 700px;
}
.table-row:hover { background-color: var(--bg-primary); }
.table-row span { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-empty {
    padding: 40px 16px;
    text-align: center; color: var(--text-secondary);
    font-size: 13px;
}
.action-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px; background: transparent;
    color: var(--text-secondary); font-size: 11px;
    cursor: pointer; min-height: 28px;
    transition: all 0.2s;
}
.action-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.markets-page {
    min-height: calc(100vh - 56px - var(--bottom-nav-height));
    background-color: var(--bg-primary);
    padding: 16px;
}
.markets-container { max-width: 1400px; margin: 0 auto; }

.markets-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.markets-title-section { display: flex; flex-direction: column; gap: 6px; }
.markets-title-section h1 {
    font-size: 22px; font-weight: 700;
    color: var(--text-primary);
}
.markets-description { font-size: 13px; color: var(--text-secondary); }
.markets-more-link {
    font-size: 13px; color: var(--accent-blue); transition: color 0.2s;
}
.markets-more-link:hover { color: var(--accent-blue-hover); }

.markets-controls {
    display: flex; flex-direction: column; gap: 10px;
}
.markets-search {
    display: flex; align-items: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; padding: 0 12px; gap: 8px;
    height: 44px;
}
.markets-search-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 14px;
}
.markets-search-input::placeholder { color: var(--text-secondary); }

.markets-filters {
    display: flex; gap: 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.markets-filter-select {
    padding: 8px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-primary);
    font-size: 12px; cursor: pointer;
    outline: none; white-space: nowrap;
    min-height: 40px;
    appearance: none; -webkit-appearance: none;
}

.markets-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.markets-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}
.markets-table thead { background-color: var(--bg-secondary); }
.markets-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.markets-table th:hover { color: var(--text-primary); }
.markets-table th .sort-icon { margin-left: 4px; color: var(--text-secondary); }
.markets-table th.sortable { position: relative; }

.markets-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s; cursor: pointer;
}
.markets-table tbody tr:hover { background-color: var(--bg-secondary); }
.markets-table tbody tr:last-child { border-bottom: none; }
.markets-table td { padding: 12px; }

.market-coin-name {
    display: flex; align-items: center; gap: 10px;
}
.coin-symbol { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.coin-full-name { font-size: 11px; color: var(--text-secondary); }

.markets-table .col-volume,
.markets-table .col-cap { display: none; }

.market-volume { font-size: 13px; color: var(--text-primary); }
.market-cap    { font-size: 13px; color: var(--text-primary); }
.market-actions { display: flex; gap: 6px; }
.market-action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    min-height: 34px; transition: all 0.2s;
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}
.market-action-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.market-action-btn.trade {
    background-color: var(--accent-blue);
    color: var(--bg-primary); border-color: var(--accent-blue);
}
.market-action-btn.trade:hover { background-color: var(--accent-blue-hover); }

@media (min-width: 768px) {

    /* Keep bottom nav visible on tablets — only hide on full desktop (1024px+) */



    /* Restore full-screen overlays on desktop — mobile nav is hidden */
    .profile-modal, .deposit-modal, .messages-modal,
    .chatbot-modal, .deposit-qr-modal, .swap-picker {
        bottom: 0;
    }

    .nav-links { display: flex; }
    .header-desktop-only { display: flex; }
    .header-container { height: 56px; }
    .header { padding: 0 28px; }

    .header-right { gap: 4px; }
    .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }

    .main-content { padding: 24px; }
    .content-container {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 24px;
    }

    .promo-line-1, .promo-line-2, .promo-line-3 {
        font-size: 40px;
    }
    .balance-amount { font-size: 42px; }

    .banner-slide { min-height: 200px; padding: 40px; }
    .banner-content h3 { font-size: 28px; }

    .top-tokens-section { padding: 48px 24px; }
    .top-tokens-title { font-size: 36px; }
    .top-tokens-content {
        display: grid;
        grid-template-columns: 1fr 0.7fr;
        gap: 24px;
    }
    .token-chart-large { height: 320px; }
    .token-cards-grid { grid-template-columns: repeat(3, 1fr); }
    .token-price-large { font-size: 28px; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .features-title { font-size: 32px; }

    .faq-title { font-size: 32px; }

    .cta-title { font-size: 32px; }

    .footer-container {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 40px;
        align-items: start;
    }
    .footer-left { margin-bottom: 0; }
    .footer-links { grid-template-columns: repeat(4, 1fr); }
    .footer-bottom-container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .wallet-modal,
    .profile-modal,
    .messages-modal,
    .deposit-modal,
    .deposit-qr-modal,
    .chatbot-modal {
        align-items: center;
    }
    .wallet-modal-content,
    .profile-modal-content {
        width: 90%;
        max-width: 1200px;
        height: auto;
        max-height: 90vh;
        border-radius: 12px;
        animation: none;
    }
    .messages-modal-content {
        width: 90%;
        max-width: 1000px;
        height: auto;
        max-height: 90vh;
        border-radius: 12px;
        animation: none;
    }
    .deposit-modal-content,
    .deposit-qr-modal-content {
        width: 90%;
        max-width: 600px;
        height: auto;
        border-radius: 12px;
        animation: none;
    }
    .chatbot-container {
        width: 400px;
        height: 600px;
        border-radius: 16px;
        position: absolute;
        bottom: 90px; right: 24px;
        animation: none;
    }

    .messages-body { flex-direction: row; }
    .messages-sidebar {
        display: flex;
        flex-direction: column;
        width: 220px;
        border-right: 1px solid var(--border-color);
        padding: 12px 0;
        overflow-y: auto;
    }

    .floating-help-btn { bottom: 24px; }

    .profile-actions {
        position: absolute;
        right: 20px; top: 20px;
        flex-direction: column;
        width: 100px;
        flex-wrap: nowrap;
    }
    .profile-balance-section { padding-right: 130px; }

    .markets-controls { flex-direction: row; align-items: center; }
    .markets-search { flex: 1; }
    .markets-table .col-volume { display: table-cell; }

    .trading-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    .trading-header-stats { flex: 1; }

    .trading-mobile-tabs { display: none; }

    .trading-page {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
    }
    .trading-container {
        flex-direction: row;
        height: calc(100vh - 175px);
        overflow: hidden;
    }
    .order-book-panel {
        width: 220px;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        flex-shrink: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .chart-panel {
        flex: 1;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        overflow: hidden;
    }
    .trade-panel {
        width: 260px;
        border-bottom: none;
        flex-shrink: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .positions-panel {
        width: 100%;
        min-height: 160px;
        max-height: 200px;
    }

    .deposit-coins-grid { grid-template-columns: repeat(3, 1fr); }

    .promo-text { padding: 32px; }

    .markets-table .col-volume { display: table-cell; }
}

@media (min-width: 1024px) {

    body { padding-bottom: 0; }

    /* Hide the mobile bottom nav on desktop */
    .mobile-bottom-nav { display: none !important; }

    .main-content { padding: 32px 24px; }

    .promo-line-1, .promo-line-2, .promo-line-3 { font-size: 56px; }
    .balance-amount { font-size: 48px; }
    .promo-text { padding: 40px; }

    .top-tokens-section { padding: 60px 24px; }
    .top-tokens-title { font-size: 42px; }
    .token-chart-large { height: 450px; }
    .token-price-large { font-size: 32px; }

    .banner-content h3 { font-size: 32px; }
    .banner-slide { min-height: 240px; }

    .features-title { font-size: 38px; }

    .faq-title { font-size: 38px; }
    .cta-title { font-size: 38px; }

    .order-book-panel { width: 240px; }
    .trade-panel { width: 300px; }

    .markets-table .col-volume { display: table-cell; }
    .markets-table .col-cap    { display: table-cell; }

    .footer-top { flex-direction: row; align-items: flex-start; gap: 48px; }
    .footer-brand { flex-shrink: 0; }
    .footer-links { grid-template-columns: repeat(3, 1fr); flex: 1; }
    .footer-bottom-container { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1280px) {
    .trading-container { height: calc(100vh - 110px); }
    .order-book-panel { width: 260px; }
    .trade-panel { width: 320px; }
    .footer-links { grid-template-columns: repeat(6, 1fr); }
}

.positive { color: var(--positive); }
.negative { color: var(--negative); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }

.divider {
    width: 100%; height: 1px;
    background-color: var(--border-color);
    margin: 16px 0;
}

.search-btn {
    background: transparent; border: none;
    color: var(--text-secondary); cursor: pointer;
    min-width: 36px; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.2s;
}
.search-btn:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.assets-search-filter { display: flex; align-items: center; gap: 10px; }

.sort-arrow { margin-left: 4px; color: var(--text-secondary); cursor: pointer; font-size: 10px; }
.sort-icon   { font-size: 10px; color: var(--text-secondary); }
.sortable    { cursor: pointer; }

.deposit-selected-coin {
    display: flex; align-items: center; gap: 12px;
    flex: 1;
}

.deposit-qr-coin-info { display: flex; align-items: center; gap: 10px; }

.chatbot-modal.active { display: flex; }

.w-full { width: 100%; }

@keyframes drawChart {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeInArea {
    to { opacity: 1; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.coin-item,
.token-card-small,
.market-tab,
.trading-mobile-tab,
.panel-tab,
.tab,
.banner-dot,
.faq-header {
    user-select: none;
    -webkit-user-select: none;
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.badge-counter {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: var(--negative);
    border: 2px solid var(--bg-secondary);
}

@media (max-width: 767px) {
    .trade-input, .chatbot-input, .markets-search-input {
        font-size: 16px !important;
    }
}

/* --- Redesigned Markets Tab --- */
.markets-page {
    background-color: #050505;
    color: #fff;
    min-height: calc(100vh - 56px - var(--bottom-nav-height));
    padding: 16px;
}
.markets-container {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.market-search-bar {
    display: flex;
    align-items: center;
    background-color: #1a1a20;
    border-radius: 20px;
    padding: 10px 16px;
    margin-bottom: 24px;
}
.market-search-bar svg {
    color: #666;
    margin-right: 10px;
}
.market-search-bar input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    outline: none;
    font-size: 14px;
}
.market-search-bar input::placeholder { color: #666; }

.market-title-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.market-title-bar svg { margin-right: 12px; }
.market-title-bar h1 {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.market-pills {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.market-pills::-webkit-scrollbar { display: none; }
.market-pill {
    background-color: transparent;
    border: 1px solid #333;
    color: #888;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.market-pill.active {
    border-color: #555;
    color: #fff;
    background-color: rgba(255,255,255,0.05);
}

#new-markets-table {
    width: 100%;
    border-collapse: collapse;
}
#new-markets-table th {
    color: #666;
    font-size: 11px;
    font-weight: 400;
    padding-bottom: 12px;
    border-bottom: 1px solid #1a1a20;
    text-align: left;
    white-space: nowrap;
}
#new-markets-table td {
    padding: 14px 0;
    border-bottom: 1px solid #141418;
    vertical-align: middle;
}
#new-markets-table tr:last-child td { border-bottom: none; }
#new-markets-table tr:hover td { background-color: rgba(255,255,255,0.02); cursor: pointer; }

.market-coin-info { display: flex; align-items: center; }
.coin-icon-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}
.coin-icon-fallback {
    width: 32px; height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: bold; font-size: 14px;
}
.market-coin-names { display: flex; flex-direction: column; }
.coin-full-name-new { font-size: 15px; color: #fff; }
.coin-pair-new { font-size: 11px; color: #666; margin-top: 2px; }

.market-price-new { font-size: 14px; color: #fff; }
.market-price-usd-new { font-size: 11px; color: #666; margin-top: 2px; }

.market-change-new { font-size: 14px; }
.market-change-new.positive { color: #22c55e; }
.market-change-new.negative { color: #ef4444; }


/* ══════════════════════════════════════════════════════════════
   NEW WALLET UI
══════════════════════════════════════════════════════════════ */

/* Balance card */
.wlt-balance-card {
    background: linear-gradient(135deg, #1a2035 0%, #0d1421 100%);
    border: 1px solid rgba(240,185,11,.18);
    border-radius: 16px;
    padding: 22px 20px 16px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.wlt-balance-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(240,185,11,.12) 0%, transparent 70%);
    pointer-events: none;
}
.wlt-bal-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: .03em;
}
.wlt-bal-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.wlt-bal-num {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.5px;
    transition: opacity .3s;
}
.wlt-bal-cur {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.wlt-bal-usd {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.wlt-sparkline-wrap {
    margin: 0 -20px 14px;
    height: 56px;
    opacity: .85;
}
.wlt-pnl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.wlt-pnl-label { font-size: 12px; color: var(--text-secondary); }
.wlt-pnl-val   { font-size: 13px; font-weight: 700; color: var(--positive, #0ecb81); }
.wlt-pnl-val.neg { color: var(--negative, #f6465d); }

/* Hidden state */
.wlt-hidden .wlt-bal-num,
.wlt-hidden .wlt-bal-usd,
.wlt-hidden .wlt-pnl-val { filter: blur(8px); user-select: none; }

/* Action buttons */
.wlt-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.wlt-act-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 8px 12px;
    cursor: pointer;
    transition: background .15s, transform .1s, border-color .15s;
    color: var(--text-primary);
}
.wlt-act-btn:hover  { background: var(--bg-tertiary); border-color: rgba(240,185,11,.35); transform: translateY(-1px); }
.wlt-act-btn:active { transform: translateY(0); }
.wlt-act-btn span   { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.wlt-act-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}

/* Section header */
.wlt-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.wlt-hide-small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
}
.wlt-hide-small input { cursor: pointer; accent-color: var(--accent-blue, #f0b90b); }

/* Asset rows */
.wlt-assets-panel {
    background: #141824 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    margin-bottom: 24px !important;
}
#wlt-assets, .wlt-assets { display: flex !important; flex-direction: column !important; width: 100% !important; }
.wlt-asset-loading { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 13px; }

.wlt-asset-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.wlt-asset-row:last-child { border-bottom: none !important; }
.wlt-asset-row:hover, .wlt-asset-row:active { background: rgba(255,255,255,0.05) !important; }

.wlt-asset-icon {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; font-weight: 700 !important; color: #fff !important;
}
.wlt-asset-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.wlt-asset-info { flex: 1; min-width: 0; }
.wlt-asset-sym  { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.wlt-asset-full { font-size: 11px; color: var(--text-secondary); }

.wlt-asset-mid { text-align: center; flex: 1; }
.wlt-asset-price { font-size: 12px; color: var(--text-secondary); }
.wlt-asset-chg { font-size: 12px; font-weight: 600; }
.wlt-asset-chg.up { color: var(--positive, #0ecb81); }
.wlt-asset-chg.dn { color: var(--negative, #f6465d); }

.wlt-asset-right { text-align: right; }
.wlt-asset-amount { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.wlt-asset-usd    { font-size: 11px; color: var(--text-secondary); }

/* Transaction list */
.wlt-txlist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.wlt-tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 10px;
    cursor: default;
    transition: background .12s;
}
.wlt-tx-row:hover { background: var(--bg-secondary); }
.wlt-tx-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wlt-tx-icon.dep { background: rgba(14,203,129,.12); }
.wlt-tx-icon.wit { background: rgba(246,70,93,.12); }
.wlt-tx-info { flex: 1; }
.wlt-tx-type { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wlt-tx-date { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.wlt-tx-right { text-align: right; }
.wlt-tx-amount     { font-size: 14px; font-weight: 700; }
.wlt-tx-amount.dep { color: var(--positive, #0ecb81); }
.wlt-tx-amount.wit { color: var(--negative, #f6465d); }
.wlt-tx-status { font-size: 11px; font-weight: 600; margin-top: 2px; }
.wlt-tx-status.pending  { color: #f59e0b; }
.wlt-tx-status.confirmed,
.wlt-tx-status.approved { color: var(--positive, #0ecb81); }
.wlt-tx-status.rejected { color: var(--negative, #f6465d); }

/* Empty state */
.wlt-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}
.wlt-empty svg { display: block; margin: 0 auto 10px; opacity: .4; }

@media (max-width: 380px) {
    .wlt-actions { grid-template-columns: repeat(2, 1fr); }
    .wlt-bal-num { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   INVESTMENT PORTFOLIO SECTION
══════════════════════════════════════════════════════════════ */
.invest-section      { padding: 40px 0 0; background: var(--bg-primary); }
.invest-container    { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.invest-header       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.invest-header-left  { display: flex; align-items: center; gap: 10px; }
.invest-icon-wrap    { width: 34px; height: 34px; border-radius: 10px; background: rgba(240,185,11,.12); display: flex; align-items: center; justify-content: center; }
.invest-title        { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.invest-more         { font-size: 13px; font-weight: 600; color: var(--accent-blue,#f0b90b); text-decoration: none; transition: opacity .15s; }
.invest-more:hover   { opacity: .75; }
.invest-sub          { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; }
.invest-list         { display: flex; flex-direction: column; gap: 12px; }

/* Card */
.invest-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
}
.invest-card:hover { border-color: var(--accent-blue,#f0b90b); transform: translateY(-1px); }

.invest-card-top     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.invest-coin-icons   { display: flex; align-items: center; }
.invest-coin-icon    { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bg-secondary); margin-right: -8px; overflow: hidden; flex-shrink: 0; }
.invest-coin-icon img{ width: 100%; height: 100%; object-fit: cover; }
.invest-coin-fb      { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; border: 2px solid var(--bg-secondary); margin-right: -8px; flex-shrink: 0; }
.invest-card-name    { margin-left: 20px; }
.invest-card-title   { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.invest-card-rate    { font-size: 12px; font-weight: 600; color: var(--positive,#0ecb81); margin-top: 2px; }
.invest-card-meta    { text-align: right; }
.invest-card-meta span{ display: block; font-size: 11px; color: var(--text-secondary); }

.invest-card-bottom  { display: flex; align-items: flex-end; justify-content: space-between; }
.invest-card-info    { flex: 1; }
.invest-card-days    { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.invest-card-range   { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.invest-btn {
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 20px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}
.invest-btn:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════════
   STATS SECTION
══════════════════════════════════════════════════════════════ */
.stats-section {
    margin: 40px 16px;
    background: linear-gradient(135deg, #0d1421 0%, #1a2035 100%);
    border: 1px solid rgba(240,185,11,.15);
    border-radius: 20px;
    overflow: hidden;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.stats-container    { padding: 32px 24px; }
.stats-headline     { font-size: 20px; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.3; margin-bottom: 6px; }
.stats-brand        { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 28px; }
.stats-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-bottom: 28px; }
.stat-val           { font-size: 30px; font-weight: 800; color: var(--text-primary); letter-spacing: -.5px; line-height: 1; }
.stat-val span      { font-size: 18px; font-weight: 700; color: var(--accent-blue,#f0b90b); }
.stat-label         { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.stats-trade-btn {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 14px;
    background: var(--accent-blue,#f0b90b);
    color: var(--bg-primary);
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.stats-trade-btn:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════════════════════ */
.about-section    { padding: 40px 0; }
.about-container  { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.about-icon-wrap  { width: 38px; height: 38px; border-radius: 12px; background: rgba(167,139,250,.12); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.about-title      { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; }
.about-text       { font-size: 14px; color: var(--text-secondary); line-height: 1.75; }

/* ══════════════════════════════════════════════════════════════
   NEWS FEED SECTION
══════════════════════════════════════════════════════════════ */
.news-feed-section   { padding: 0 0 40px; }
.news-feed-container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.news-feed-tabs      { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.news-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 18px;
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.news-tab.active  { color: var(--text-primary); border-bottom-color: var(--accent-blue,#f0b90b); }
.news-tab:hover   { color: var(--text-primary); }
.news-feed-list   { display: flex; flex-direction: column; gap: 14px; }

/* News card */
.news-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
}
.news-card:hover  { border-color: var(--accent-blue,#f0b90b); }
.news-card-body   { padding: 14px 14px 10px; }
.news-card-time   { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.news-card-stats  { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.news-card-stat   { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.news-card-title  { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 10px; }
.news-card-img    { width: 100%; height: 160px; object-fit: cover; display: block; }
.news-card-excerpt{ padding: 10px 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; border-top: 1px solid var(--border-color); }
.news-card-footer { padding: 8px 14px 12px; display: flex; align-items: center; justify-content: space-between; }
.news-card-coin   { font-size: 12px; font-weight: 600; color: var(--positive,#0ecb81); }
.news-skeleton {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    height: 200px;
    animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Investment modal */
.invest-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
    z-index: 10000; display: flex; align-items: flex-end; justify-content: center;
}
.invest-modal-content {
    background: var(--bg-secondary); border-radius: 20px 20px 0 0;
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
    padding: 24px 20px 32px; animation: slideUpModal .3s ease-out;
}
.invest-modal-title  { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.invest-modal-rate   { font-size: 14px; color: var(--positive,#0ecb81); font-weight: 600; margin-bottom: 20px; }
.invest-modal-row    { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.invest-modal-row:last-of-type { border-bottom: none; }
.invest-modal-lbl    { color: var(--text-secondary); }
.invest-modal-val    { color: var(--text-primary); font-weight: 600; }
.invest-modal-input-wrap { margin: 16px 0 8px; }
.invest-modal-input-wrap label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.invest-modal-input {
    width: 100%; padding: 12px 14px; background: var(--bg-tertiary);
    border: 1px solid var(--border-color); border-radius: 10px;
    color: var(--text-primary); font-size: 15px; box-sizing: border-box;
    outline: none; transition: border-color .15s;
}
.invest-modal-input:focus { border-color: var(--accent-blue,#f0b90b); }
.invest-modal-avail  { font-size: 12px; color: var(--text-secondary); margin-bottom: 16px; }
.invest-modal-err    { font-size: 13px; color: var(--negative,#f6465d); min-height: 18px; margin-bottom: 10px; }
.invest-modal-submit {
    width: 100%; padding: 14px; background: var(--accent-blue,#f0b90b);
    color: var(--bg-primary); border: none; border-radius: 10px;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.invest-modal-submit:hover { opacity: .85; }
.invest-modal-success { text-align: center; padding: 10px 0 0; }
.invest-modal-success svg { display: block; margin: 0 auto 12px; }

/* ══════════════════════════════════════════════════════════════
   NEW HERO SECTION
══════════════════════════════════════════════════════════════ */
.hero-section {
    background: var(--bg-primary);
    padding: 20px 16px 24px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -60px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0,212,255,.18) 0%, rgba(0,212,255,.06) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(240,185,11,.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.hero-wrap { position: relative; z-index: 1; }
.hero-wrap {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Left */
.hero-left    { flex: 1; min-width: 0; }
.hero-badge   { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent-blue,#f0b90b); background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.2); border-radius: 20px; padding: 4px 10px; margin-bottom: 10px; }
.hero-title   { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.15; margin: 0 0 6px; letter-spacing: -.5px; }
.hero-title-accent { color: var(--accent-blue,#f0b90b); }
.hero-sub     { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5; }

.hero-balance-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(240,185,11,.04) 100%);
    border: 1px solid rgba(240,185,11,.15);
    border-radius: 14px;
    padding: 16px;
}
.hero-bal-label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.hero-eye { background: none; border: none; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; padding: 0; }
.hero-eye:hover { color: var(--text-primary); }
.hero-bal-num { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: -.5px; }
.hero-bal-cur { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.hero-bal-usd { font-size: 12px; color: var(--text-secondary); margin: 2px 0 14px; }

.hero-btns    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-btn-dep, .hero-btn-wit, .hero-btn-trd, .hero-btn-swp {
    display: flex; align-items: center; gap: 5px;
    border: none; border-radius: 8px; padding: 9px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: opacity .15s; white-space: nowrap;
}
.hero-btn-dep { background: var(--accent-blue,#f0b90b); color: var(--bg-primary); }
.hero-btn-wit { background: rgba(246,70,93,.12); color: #f6465d; border: 1px solid rgba(246,70,93,.25); }
.hero-btn-trd { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); }
.hero-btn-dep:hover, .hero-btn-wit:hover, .hero-btn-trd:hover, .hero-btn-swp:hover { opacity: .8; }

/* Right */
.hero-right   { width: 220px; flex-shrink: 0; display: none; }
.hero-coins-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; }
.hero-coins-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.hero-see-all { font-size: 11px; color: var(--accent-blue,#f0b90b); text-decoration: none; font-weight: 600; }
.hero-coin-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background .12s; }
.hero-coin-item:last-child { border-bottom: none; }
.hero-coin-item:hover { background: rgba(255,255,255,.02); border-radius: 6px; }
.hero-coin-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.hero-coin-icon img { width: 100%; height: 100%; object-fit: cover; }
.hero-coin-info { flex: 1; min-width: 0; }
.hero-coin-sym  { display: block; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.hero-coin-name { display: block; font-size: 10px; color: var(--text-secondary); }
.hero-coin-right { text-align: right; }
.hero-coin-price { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.hero-coin-chg  { font-size: 10px; font-weight: 600; }
.hero-coin-chg.positive { color: var(--positive,#0ecb81); }
.hero-coin-chg.negative { color: var(--negative,#f6465d); }

/* Desktop: show right panel, side-by-side */
@media (min-width: 768px) {
    .hero-section { padding: 28px 24px 32px; }
    .hero-right   { display: block; }
    .hero-title   { font-size: 34px; }
    .hero-bal-num { font-size: 32px; }
    .hero-btns    { grid-template-columns: repeat(4,1fr); gap: 8px; }
}
@media (min-width: 1024px) {
    .hero-title   { font-size: 42px; }
    .hero-right   { width: 260px; }
}

/* More News button */
.news-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 14px;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.news-more-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue,#f0b90b);
    color: var(--accent-blue,#f0b90b);
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM PROFILE MODAL — v2
══════════════════════════════════════════════════════════════ */
.prf-content {
    display: flex !important; flex-direction: column; gap: 0;
    padding: 0 !important; overflow-y: auto; max-height: 92vh;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.prf-header {
    background: linear-gradient(160deg,#0a0f1e 0%,#111827 60%,#0a1628 100%);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 52px 20px 24px; text-align: center; position: relative; overflow: hidden;
}
.prf-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(0,212,255,.12) 0%, transparent 70%);
    pointer-events: none;
}
.prf-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: rgba(255,255,255,.08); border: none; cursor: pointer;
    color: var(--text-secondary); width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.prf-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.prf-avatar-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.prf-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg,#00d4ff 0%,#0099cc 100%);
    color: #07121d; font-size: 30px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    box-shadow: 0 0 0 3px rgba(0,212,255,.25), 0 8px 24px rgba(0,212,255,.2);
}
.prf-avatar-ring {
    position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid rgba(0,212,255,.3);
    animation: prfRingPulse 2.5s ease-in-out infinite;
}
@keyframes prfRingPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.04)} }
.prf-name  { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 2px; letter-spacing: -.2px; }
.prf-email { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 10px; }
.prf-uid-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 4px 10px;
    font-size: 11px; color: rgba(255,255,255,.5); font-family: monospace; margin-bottom: 12px;
}
.prf-uid-copy { background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);display:flex;align-items:center;transition:color .15s; }
.prf-uid-copy:hover { color: var(--accent-blue,#00d4ff); }
.prf-badges { display: flex; align-items: center; justify-content: center; gap: 8px; }
.prf-badge { display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em; }
.prf-badge-active { background:rgba(14,203,129,.12);color:#0ecb81;border:1px solid rgba(14,203,129,.25); }
.prf-badge-dot { width:6px;height:6px;border-radius:50%;background:currentColor;animation:prfDotPulse 1.4s infinite; }
@keyframes prfDotPulse { 50%{opacity:.35} }
.prf-kyc-badge { font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;background:rgba(246,70,93,.15);color:#f6465d;border:1px solid rgba(246,70,93,.3); }
.prf-kyc-badge.verified { background:rgba(14,203,129,.12);color:#0ecb81;border-color:rgba(14,203,129,.3); }
.prf-kyc-badge.pending  { background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.3); }
/* Balance card */
.prf-balance-card { padding:20px 20px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border-color); }
.prf-balance-label { font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px; }
.prf-balance-main  { display:flex;align-items:baseline;gap:6px; }
.prf-balance-num   { font-size:32px;font-weight:800;color:var(--text-primary);letter-spacing:-.5px; }
.prf-balance-cur   { font-size:14px;color:var(--text-secondary); }
.prf-balance-usd   { font-size:12px;color:var(--text-secondary);margin-top:3px; }
.prf-sparkline     { display:block;height:44px;margin:10px -20px 0;width:calc(100% + 40px);opacity:.85; }
.prf-quick-actions { display:flex;gap:8px;padding:14px 0 18px; }
.prf-qa-btn { flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:12px 6px;cursor:pointer;transition:all .15s;color:var(--text-secondary);font-size:11px;font-weight:600; }
.prf-qa-btn:hover { border-color:var(--accent-blue,#00d4ff);color:var(--text-primary);transform:translateY(-1px); }
.prf-qa-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; }
.prf-qa-deposit .prf-qa-icon { background:rgba(14,203,129,.12);color:#0ecb81; }
.prf-qa-withdraw .prf-qa-icon { background:rgba(246,70,93,.1);color:#f6465d; }
.prf-qa-trade .prf-qa-icon { background:rgba(0,212,255,.1);color:#00d4ff; }
.prf-qa-deposit:hover { border-color:#0ecb81; }
.prf-qa-withdraw:hover { border-color:#f6465d; }
.prf-qa-trade:hover { border-color:#00d4ff; }
/* Stats */
.prf-stats-row { display:flex;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:14px 20px;gap:0; }
.prf-stat { flex:1;text-align:center; }
.prf-stat-val { font-size:15px;font-weight:700;color:var(--text-primary); }
.prf-stat-val.positive { color:var(--positive,#0ecb81); }
.prf-stat-lbl { font-size:10px;color:var(--text-secondary);margin-top:2px;text-transform:uppercase;letter-spacing:.04em; }
.prf-stat-divider { width:1px;height:32px;background:var(--border-color);flex-shrink:0; }
/* KYC banner */
.prf-kyc-banner { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 16px;padding:14px 16px;background:linear-gradient(135deg,rgba(240,185,11,.07) 0%,rgba(240,185,11,.03) 100%);border:1px solid rgba(240,185,11,.25);border-radius:14px;cursor:pointer;transition:border-color .15s; }
.prf-kyc-banner:hover { border-color:rgba(240,185,11,.5); }
.prf-kyc-banner-left { display:flex;align-items:center;gap:12px;flex:1; }
.prf-kyc-banner-icon { width:40px;height:40px;border-radius:12px;flex-shrink:0;background:rgba(240,185,11,.12);border:1px solid rgba(240,185,11,.2);display:flex;align-items:center;justify-content:center; }
.prf-kyc-banner-title { font-size:13px;font-weight:700;color:#f0b90b; }
.prf-kyc-banner-sub   { font-size:11px;color:var(--text-secondary);margin-top:2px; }
.prf-kyc-banner-btn { background:rgba(240,185,11,.15);border:1px solid rgba(240,185,11,.3);border-radius:8px;padding:7px 13px;color:#f0b90b;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s; }
.prf-kyc-banner-btn:hover { background:rgba(240,185,11,.25); }
/* Section headers */
.prf-section-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px; }
.prf-section-title { font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.07em; }
.prf-see-all { font-size:11px;color:var(--accent-blue,#00d4ff);cursor:pointer;background:none;border:none;font-weight:600;padding:0; }
/* Assets */
.prf-assets { padding:0 16px 4px;display:flex;flex-direction:column;gap:2px; }
.prf-asset-loading { padding:12px 4px;font-size:13px;color:var(--text-secondary); }
.prf-asset-row { display:flex;align-items:center;gap:10px;padding:10px 4px;border-radius:10px;transition:all .12s;cursor:pointer; }
.prf-asset-row:hover { background:var(--bg-secondary);padding:10px 10px; }
.prf-asset-icon { width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0; }
.prf-asset-icon img { width:100%;height:100%;object-fit:cover; }
.prf-asset-name { flex:1; }
.prf-asset-sym  { font-size:13px;font-weight:700;color:var(--text-primary); }
.prf-asset-full { font-size:11px;color:var(--text-secondary); }
.prf-asset-right { text-align:right; }
.prf-asset-price { font-size:13px;font-weight:600;color:var(--text-primary); }
.prf-asset-alloc { font-size:10px;color:var(--text-secondary);margin-top:1px; }
/* Transactions */
.prf-txlist { padding:0 16px;display:flex;flex-direction:column;gap:2px; }
.prf-tx-row { display:flex;align-items:center;gap:10px;padding:10px 4px;border-radius:10px;transition:all .12s; }
.prf-tx-row:hover { background:var(--bg-secondary);padding:10px 10px; }
.prf-tx-icon { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.prf-tx-icon.dep { background:rgba(14,203,129,.12); }
.prf-tx-icon.wit { background:rgba(246,70,93,.1); }
.prf-tx-info { flex:1; }
.prf-tx-type { font-size:13px;font-weight:600;color:var(--text-primary); }
.prf-tx-date { font-size:10px;color:var(--text-secondary);margin-top:1px; }
.prf-tx-amount { font-size:13px;font-weight:700; }
.prf-tx-amount.dep { color:var(--positive,#0ecb81); }
.prf-tx-amount.wit { color:var(--negative,#f6465d); }
.prf-tx-status { font-size:10px;font-weight:600;margin-top:2px;text-align:right; }
.prf-tx-status.confirmed,.prf-tx-status.approved { color:var(--positive,#0ecb81); }
.prf-tx-status.pending  { color:#f59e0b; }
.prf-tx-status.rejected { color:var(--negative,#f6465d); }
/* Account details card */
.prf-details-card { margin:0 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;overflow:hidden; }
.prf-detail-row { display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-color);font-size:13px; }
.prf-detail-row:last-child { border-bottom:none; }
.prf-detail-lbl { color:var(--text-secondary);display:flex;align-items:center;gap:7px; }
.prf-detail-val { color:var(--text-primary);font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.prf-detail-val.positive { color:var(--positive,#0ecb81); }
/* KYC full button */
.prf-kyc-full-btn { display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:14px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;text-align:left;width:calc(100% - 32px); }
.prf-kyc-full-btn:hover { border-color:#f0b90b;background:rgba(240,185,11,.05);color:#f0b90b; }
.prf-kyc-full-btn svg:first-child { color:#f0b90b;flex-shrink:0; }
/* Logout */
.prf-logout-btn { display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:12px 16px 28px;padding:13px;background:transparent;border:1px solid rgba(246,70,93,.3);border-radius:12px;color:#f6465d;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s; }
.prf-logout-btn:hover { background:rgba(246,70,93,.08);border-color:rgba(246,70,93,.5); }
/* Details list (fallback for old pages that still use it) */
.prf-details-list { padding:0 16px 4px; }

/* ══════════════════════════════════════════════════════════════
   ABOUT SECTION — REDESIGNED
══════════════════════════════════════════════════════════════ */
.about-section-new  { padding: 40px 16px; }
.about-new-container{ max-width: 720px; margin: 0 auto; }
.about-new-inner {
    background: linear-gradient(135deg, #0d1421 0%, #1a2035 60%, #0d1421 100%);
    border: 1px solid rgba(167,139,250,.2);
    border-radius: 20px;
    padding: 28px 24px 24px;
    position: relative;
    overflow: hidden;
}
.about-new-inner::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(167,139,250,.12) 0%, transparent 70%);
    pointer-events: none;
}
.about-new-inner::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(240,185,11,.07) 0%, transparent 70%);
    pointer-events: none;
}

.about-new-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.about-new-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 13px;
    background: rgba(167,139,250,.12);
    border: 1px solid rgba(167,139,250,.2);
    display: flex; align-items: center; justify-content: center;
}
.about-new-label {
    font-size: 11px; font-weight: 700; color: #00d4ff;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px;
}
.about-new-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; }

.about-new-text {
    font-size: 14px; color: var(--text-secondary); line-height: 1.75;
    margin-bottom: 24px;
    position: relative; z-index: 1;
}

/* Three pillars */
.about-new-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
    position: relative; z-index: 1;
}
.about-pillar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 14px;
}
.about-pillar-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.about-pillar-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.about-pillar-desc  { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.about-new-cta {
    display: block; width: 100%;
    padding: 14px;
    background: var(--accent-blue, #f0b90b);
    color: var(--bg-primary);
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
    position: relative; z-index: 1;
}
.about-new-cta:hover { opacity: .85; }

@media (min-width: 600px) {
    .about-new-pillars { grid-template-columns: repeat(3, 1fr); }
    .about-pillar { flex-direction: column; }
}
@media (min-width: 768px) {
    .about-section-new  { padding: 40px 24px; }
    .about-new-inner    { padding: 36px 32px 32px; }
    .about-new-title    { font-size: 24px; }
}


/* ══════════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE — HOME PAGE
   Fixes all sections that were displaying in mobile layout on desktop
══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* ── Hero ─────────────────────────────────────────────────── */
    .hero-section          { padding: 40px 32px 48px; }
    .hero-wrap             { gap: 40px; align-items: center; }
    .hero-right            { display: block; width: 280px; }
    .hero-title            { font-size: 38px; }
    .hero-sub              { font-size: 15px; }
    .hero-bal-num          { font-size: 34px; }
    .hero-btns             { grid-template-columns: repeat(4,1fr); gap: 10px; }
    .hero-btn-dep,
    .hero-btn-wit,
    .hero-btn-trd,
    .hero-btn-swp          { padding: 10px 18px; font-size: 13px; justify-content: center; }

    /* ── Banner ───────────────────────────────────────────────── */
    .sliding-banner        { padding: 24px 32px; }
    .banner-slide          { min-height: 220px; padding: 48px 40px; }
    .banner-content h3     { font-size: 28px; }
    .banner-content p      { font-size: 15px; }

    /* ── Top Tokens ───────────────────────────────────────────── */
    .top-tokens-section    { padding: 56px 32px; }
    .top-tokens-title      { font-size: 36px; }
    .top-tokens-subtitle   { font-size: 16px; }
    .top-tokens-content    {
        display: grid;
        grid-template-columns: 1fr 0.65fr;
        gap: 28px;
        align-items: start;
    }
    .token-chart-large     { height: 360px; }
    .token-cards-grid      { grid-template-columns: repeat(3, 1fr); }
    .token-price-large     { font-size: 30px; }
    .token-logo-large      { width: 72px; height: 72px; }

    /* ── Features ─────────────────────────────────────────────── */
    .features-section      { padding: 56px 32px; }
    .features-title        { font-size: 36px; }
    .features-grid         { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feature-card          { padding: 28px 20px; gap: 18px; }
    .feature-icon-wrapper  { width: 80px; height: 80px; }
    .feature-title         { font-size: 17px; }
    .feature-description   { font-size: 13px; }

    /* ── Investment Portfolio ──────────────────────────────────── */
    .invest-section        { padding: 56px 0 0; }
    .invest-container      { padding: 0 32px; }
    .invest-title          { font-size: 24px; }
    .invest-sub            { font-size: 14px; margin-bottom: 28px; }
    .invest-list           {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* ── Stats ─────────────────────────────────────────────────── */
    .stats-section         { margin: 56px 32px; }
    .stats-container       { padding: 48px 40px; }
    .stats-headline        { font-size: 26px; }
    .stats-grid            {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    .stat-item             {
        border-right: 1px solid rgba(255,255,255,.08);
        padding: 0 24px;
        text-align: center;
    }
    .stat-item:first-child { padding-left: 0; }
    .stat-item:last-child  { border-right: none; padding-right: 0; }
    .stat-val              { font-size: 38px; }
    .stat-val span         { font-size: 22px; }
    .stat-label            { font-size: 13px; }

    /* ── News Feed ─────────────────────────────────────────────── */
    .news-feed-section     { padding: 0 0 56px; }
    .news-feed-container   { padding: 0 32px; }
    .news-feed-list        {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .news-card-img         { height: 180px; }
    .news-card-title       { font-size: 16px; }

    /* ── About / Mission ───────────────────────────────────────── */
    .about-section-new     { padding: 56px 32px; }
    .about-new-inner       { padding: 40px 48px; }
    .about-new-title       { font-size: 28px; }
    .about-new-text        { font-size: 15px; }

    /* ── FAQ ────────────────────────────────────────────────────── */
    .faq-section           { padding: 56px 32px; }
    .faq-container         { max-width: 860px; }
    .faq-title             { font-size: 36px; }
    .faq-question          { font-size: 15px; }

    /* ── CTA ─────────────────────────────────────────────────────── */
    .cta-section           { padding: 72px 32px; }
    .cta-title             { font-size: 38px; }
    .cta-button            { padding: 16px 48px; font-size: 17px; }
}

@media (min-width: 1024px) {

    /* ── Hero ─────────────────────────────────────────────────── */
    .hero-section          { padding: 56px 48px 64px; }
    .hero-title            { font-size: 52px; }
    .hero-right            { width: 320px; }
    .hero-sub              { font-size: 16px; }

    /* ── Top Tokens ───────────────────────────────────────────── */
    .top-tokens-section    { padding: 72px 48px; }
    .top-tokens-title      { font-size: 44px; }
    .token-chart-large     { height: 460px; }
    .token-cards-grid      { grid-template-columns: repeat(3, 1fr); }

    /* ── Features ─────────────────────────────────────────────── */
    .features-section      { padding: 72px 48px; }
    .features-title        { font-size: 44px; }
    .features-grid         {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    /* ── Investment Portfolio ──────────────────────────────────── */
    .invest-section        { padding: 72px 0 0; }
    .invest-container      { padding: 0 48px; }
    .invest-list           { grid-template-columns: repeat(3, 1fr); }

    /* ── Stats ─────────────────────────────────────────────────── */
    .stats-section         { margin: 72px 48px; }
    .stats-container       { padding: 56px 48px; }
    .stats-headline        { font-size: 30px; }
    .stat-val              { font-size: 44px; }

    /* ── News Feed ─────────────────────────────────────────────── */
    .news-feed-section     { padding: 0 0 72px; }
    .news-feed-container   { padding: 0 48px; }
    .news-feed-list        { grid-template-columns: repeat(3, 1fr); }

    /* ── About ─────────────────────────────────────────────────── */
    .about-section-new     { padding: 72px 48px; }

    /* ── FAQ ─────────────────────────────────────────────────── */
    .faq-section           { padding: 72px 48px; }
    .faq-title             { font-size: 44px; }

    /* ── CTA ─────────────────────────────────────────────────── */
    .cta-section           { padding: 96px 48px; }
    .cta-title             { font-size: 48px; }
}

@media (min-width: 1280px) {

    /* ── Hero ─────────────────────────────────────────────────── */
    .hero-wrap             { max-width: 1200px; }
    .hero-right            { width: 380px; }
    .hero-coins-card       { padding: 20px; }

    /* ── Containers ────────────────────────────────────────────── */
    .top-tokens-container,
    .features-container,
    .invest-container,
    .news-feed-container,
    .faq-container,
    .stats-section         { max-width: 1200px; }

    /* ── Features: all 5 in one row ────────────────────────────── */
    .features-grid         { gap: 24px; }

    /* ── News 3 columns ────────────────────────────────────────── */
    .news-feed-list        { grid-template-columns: repeat(3, 1fr); gap: 24px; }

    /* ── Investment 3 columns ──────────────────────────────────── */
    .invest-list           { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}


/* ── Quick Action Grid ─────────────────────────────────────────────────────── */
.qa-section {
    background: var(--bg-primary);
    padding: 16px 8px 8px;
    max-width: 520px;
    margin: 0 auto;
}

.qa-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 4px 0 16px;
}

.qa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    width: 72px;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.qa-btn:active { transform: scale(.91); }

.qa-ico {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
    transition: filter .15s;
}
.qa-btn:hover .qa-ico {
    filter: drop-shadow(0 4px 14px rgba(30,136,229,.35));
}

.qa-btn span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.35;
    letter-spacing: .1px;
}
.qa-btn:hover span { color: var(--text-primary); }

@media (min-width: 400px) {
    .qa-btn  { width: 80px; }
    .qa-ico  { width: 60px; height: 60px; }
    .qa-btn span { font-size: 12px; }
}
@media (min-width: 640px) {
    .qa-section { max-width: 680px; padding: 20px 16px 10px; }
    .qa-ico  { width: 64px; height: 64px; }
    .qa-btn span { font-size: 13px; }
}
@media (min-width: 768px) {
    .qa-section { max-width: 860px; }
    .qa-row { padding: 6px 0 20px; }
}


/* ── Wallet Trade History rows ──────────────────────────────────────────────── */
.wlt-trade-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background .12s;
}
.wlt-trade-row:hover { background: rgba(255,255,255,.03); }
.wlt-trade-row:last-child { border-bottom: none; }

.wlt-trade-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}
.wlt-trade-badge.win     { background: rgba(14,203,129,.15); color: #0ecb81; }
.wlt-trade-badge.loss    { background: rgba(246,70,93,.12);  color: #f6465d; }
.wlt-trade-badge.pending { background: rgba(0,212,255,.1);   color: #00d4ff; }

/* ── Order Detail Sheet (shared across trading + wallet) ──────────────────── */
.st-order-modal {
    position: fixed; inset: 0; z-index: 25000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: stFadeIn .2s ease;
}
.st-order-sheet {
    width: min(480px, 100%);
    background: #0d1117;
    border-radius: 22px 22px 0 0;
    padding: 0 0 32px;
    animation: sheetUp .25s cubic-bezier(.25,.8,.25,1);
    max-height: 92dvh;
    overflow-y: auto;
}
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes stFadeIn { from { opacity: 0 } to { opacity: 1 } }

.st-order-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #1a1f2e;
    position: sticky; top: 0; background: #0d1117; z-index: 1;
}
.st-order-header-title { font-size: 16px; font-weight: 700; color: #d1d4dc; }
.st-order-header-close {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255,255,255,.07); border: none;
    color: #787b86; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.st-order-header-close:hover { background: rgba(239,83,80,.15); color: #ef5350; }

.st-order-pair-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 20px 8px; gap: 12px;
}
.st-order-pair { font-size: 18px; font-weight: 800; color: #d1d4dc; flex-shrink: 0; }
.st-order-id   { font-size: 10px; color: #4b5058; font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; }

.st-order-badges { display: flex; gap: 8px; padding: 0 20px 16px; }
.st-order-badge {
    padding: 4px 11px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.st-order-badge.up   { background: rgba(14,203,129,.15); color: #0ecb81; border: 1px solid rgba(14,203,129,.25); }
.st-order-badge.down { background: rgba(239,83,80,.15);  color: #ef5350; border: 1px solid rgba(239,83,80,.25); }
.st-order-badge.dur  { background: rgba(0,212,255,.1);   color: #00d4ff; border: 1px solid rgba(0,212,255,.2); }

.st-order-rows { padding: 0 20px; }
.st-order-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid #131722;
}
.st-order-row:last-child { border-bottom: none; }
.st-order-row .k { font-size: 13px; color: #787b86; }
.st-order-row .v { font-size: 13px; font-weight: 600; color: #d1d4dc; font-variant-numeric: tabular-nums; text-align: right; }
.st-order-row .v .pos,
.st-order-row .v.pos  { color: #0ecb81; }
.st-order-row .v .neg,
.st-order-row .v.neg  { color: #f6465d; }
.st-order-row .v .win { color: #0ecb81; }
.st-order-row .v .loss { color: #f6465d; }

.st-order-footer { padding: 20px 20px 0; }
.st-order-footer button {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    font-size: 14px; font-weight: 800; cursor: pointer;
    background: linear-gradient(135deg,#1e88e5,#1565c0); color: #fff;
    transition: opacity .15s;
}
.st-order-footer button:hover { opacity: .88; }


/* ══════════════════════════════════════════════════════════════
   PROFILE MODAL — MOBILE SHEET BEHAVIOUR
══════════════════════════════════════════════════════════════ */

/* Desktop: centred dialog — restore full overlay since nav is hidden */
@media (min-width: 768px) {
    .profile-modal  { align-items: center; bottom: 0; }
    .deposit-modal  { align-items: center; bottom: 0; }
    .messages-modal { align-items: center; bottom: 0; }
    .profile-modal-content {
        width: 90%; max-width: 480px;
        height: auto; max-height: 90vh;
        border-radius: 20px;
        animation: prfFadeIn .2s ease !important;
    }
    @keyframes prfFadeIn {
        from { opacity:0; transform:translateY(-12px) scale(.98); }
        to   { opacity:1; transform:none; }
    }
}

/* Mobile: bottom sheet */
@media (max-width: 767px) {
    .profile-modal { align-items: flex-end; }
    .profile-modal-content {
        width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 90dvh;
        animation: prfSlideUp .28s cubic-bezier(.25,.8,.25,1) !important;
    }
    @keyframes prfSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Drag handle at top */
    .prf-content::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,.18);
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
    }

    /* Header tighter on mobile */
    .prf-header { padding: 18px 16px 20px; }
    .prf-avatar { width: 64px; height: 64px; font-size: 26px; }
    .prf-avatar-ring { inset: -4px; }
    .prf-name  { font-size: 17px; }
    .prf-email { font-size: 11px; margin-bottom: 8px; }

    /* Balance numbers compact */
    .prf-balance-card { padding: 16px 16px 0; }
    .prf-balance-num  { font-size: 28px; }
    .prf-balance-cur  { font-size: 13px; }
    .prf-sparkline    { margin: 8px -16px 0; width: calc(100% + 32px); height: 38px; }

    /* Quick actions: equal thirds */
    .prf-quick-actions { gap: 6px; padding: 12px 0 14px; }
    .prf-qa-btn   { padding: 10px 4px; font-size: 10px; border-radius: 10px; }
    .prf-qa-icon  { width: 32px; height: 32px; border-radius: 8px; }
    .prf-qa-icon svg { width: 16px; height: 16px; }

    /* Stats row compact */
    .prf-stats-row  { padding: 12px 16px; }
    .prf-stat-val   { font-size: 14px; }
    .prf-stat-lbl   { font-size: 9px; }

    /* KYC banner */
    .prf-kyc-banner       { margin: 10px 12px; padding: 12px 14px; border-radius: 12px; }
    .prf-kyc-banner-icon  { width: 36px; height: 36px; border-radius: 10px; }
    .prf-kyc-banner-title { font-size: 12px; }
    .prf-kyc-banner-sub   { font-size: 10px; }
    .prf-kyc-banner-btn   { padding: 6px 11px; font-size: 11px; border-radius: 7px; }

    /* Sections */
    .prf-section-header { padding: 14px 16px 6px; }

    /* Assets + txlist */
    .prf-assets  { padding: 0 12px 4px; }
    .prf-txlist  { padding: 0 12px; }
    .prf-asset-row, .prf-tx-row { padding: 9px 4px; }
    .prf-asset-row:hover, .prf-tx-row:hover { padding: 9px 8px; }

    /* Details card */
    .prf-details-card { margin: 0 12px; border-radius: 12px; }
    .prf-detail-row   { padding: 11px 14px; font-size: 12px; }
    .prf-detail-lbl   { font-size: 12px; }

    /* KYC full button */
    .prf-kyc-full-btn {
        margin: 10px 12px 0;
        width: calc(100% - 24px);
        padding: 13px 14px;
        font-size: 13px;
        border-radius: 12px;
    }

    /* Logout */
    .prf-logout-btn {
        width: calc(100% - 24px);
        margin: 10px 12px 24px;
        padding: 12px;
        font-size: 13px;
        border-radius: 10px;
    }

    /* UID chip */
    .prf-uid-chip { font-size: 10px; padding: 3px 8px; }
}

/* Very small screens */
@media (max-width: 360px) {
    .prf-balance-num  { font-size: 24px; }
    .prf-qa-btn       { padding: 8px 2px; font-size: 9px; }
    .prf-qa-icon      { width: 28px; height: 28px; }
}


/* ══════════════════════════════════════════════════════════════
   SWAP MODAL — BITNova style
══════════════════════════════════════════════════════════════ */

/* Hero swap button */
.hero-btn-swp {
    background: rgba(0,255,136,.08);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,.25) !important;
}
.hero-btn-swp:hover { background: rgba(0,255,136,.16); opacity: 1; }

/* Modal backdrop */
.swap-modal {
    display: none; position: fixed; inset: 0; z-index: 10100;
    align-items: center; justify-content: center; padding: 12px;
    background: rgba(0,0,0,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 480px) {
    .swap-modal { align-items: flex-end; padding: 0; }
}
.swap-modal.active { display: flex; }
.swap-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* Card */
.swap-card {
    position: relative; z-index: 1;
    width: min(370px, 100%);
    background: #161b26;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: trfSlideUp .25s cubic-bezier(0.16,1,0.3,1);
}
@media (max-width: 480px) {
    .swap-card { width: 100%; border-radius: 18px 18px 0 0; border-bottom: none; }
}

.swap-drag-handle {
    display: none; width: 32px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.2); margin: 8px auto 2px;
}
@media (max-width: 480px) {
    .swap-drag-handle { display: block; }
}

/* Header */
.swap-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 8px;
    font-size: 13px; font-weight: 700; color: #f8fafc;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.swap-close {
    background: rgba(255,255,255,.06); border: none; cursor: pointer;
    color: #8e9bb0; width: 26px; height: 26px; border-radius: 6px;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.swap-close:hover { background: rgba(255,255,255,.12); color: #f8fafc; }

/* Rate bar */
.swap-rate-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px;
    background: rgba(14,203,129,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 11px;
}
.swap-rate-label { color: #64748b; font-weight: 600; }
.swap-rate-val   { color: #0ecb81; font-weight: 700; font-family: monospace; }

/* Section */
.swap-section {
    padding: 10px 16px 8px;
}
.swap-section-label {
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}

/* Input row */
.swap-row {
    display: flex; align-items: center; gap: 8px;
    background: #1e2433;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 3px 4px 3px 8px;
    transition: border-color .15s;
}
.swap-row:focus-within { border-color: #0ecb81; }

.swap-coin-btn {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.06); border: none; cursor: pointer;
    color: #f8fafc; font-size: 11px; font-weight: 600;
    padding: 5px 9px; border-radius: 7px; white-space: nowrap;
    transition: background .15s; flex-shrink: 0;
}
.swap-coin-btn:hover { background: rgba(255,255,255,.12); }
.swap-coin-img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

.swap-input {
    flex: 1; background: none; border: none; outline: none;
    color: #f8fafc; font-size: 15px; font-weight: 700;
    padding: 6px 4px; min-width: 0;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}
.swap-input::placeholder { color: #475569; }
.swap-input-receive { color: #0ecb81; }

/* Balance row */
.swap-balance-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 0; font-size: 10px; color: #64748b;
}
.swap-max-btn {
    background: rgba(14,203,129,.12); border: 1px solid rgba(14,203,129,.25);
    border-radius: 4px; padding: 1px 6px; color: #0ecb81;
    font-size: 9px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.swap-max-btn:hover { background: rgba(14,203,129,.22); }

/* Flip button */
.swap-flip-wrap {
    display: flex; justify-content: center;
    margin: -11px 0; position: relative; z-index: 2;
}
.swap-flip-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: #161b26;
    border: 1px solid rgba(14,203,129,.3);
    color: #0ecb81; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s ease; box-shadow: 0 0 0 3px #161b26;
}
.swap-flip-btn:hover {
    background: rgba(14,203,129,.15);
    border-color: #0ecb81;
    color: #fff;
    transform: rotate(180deg);
}

/* Details */
.swap-details {
    padding: 6px 16px 2px;
    display: flex; flex-direction: column; gap: 4px;
}
.swap-detail-row {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #64748b;
}
.swap-detail-row span:last-child { color: #cbd5e1; font-weight: 600; }

/* Error */
.swap-error {
    padding: 4px 16px 0; font-size: 11px; color: #f6465d;
    min-height: 14px; font-weight: 600;
}

/* Submit button */
.swap-submit-btn {
    width: calc(100% - 32px); margin: 12px 16px 16px;
    padding: 11px; border: none; border-radius: 10px;
    background: #0ecb81;
    color: #090d14; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.swap-submit-btn:hover:not(:disabled) {
    background: #00c076;
}
.swap-submit-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Coin Picker sheet ─────────────────────────────────────── */
.swap-picker {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 62px;
    z-index: 10200;
    align-items: flex-end; justify-content: center;
}
.swap-picker.active { display: flex; }
.swap-picker-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.65); backdrop-filter: blur(6px); cursor: pointer;
}
.swap-picker-sheet {
    position: relative; z-index: 1;
    width: min(440px,100%);
    background: #191e2b;          /* --bg2 */
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(255,255,255,.09);
    border-bottom: none; max-height: 70vh;
    display: flex; flex-direction: column;
    animation: swapSheetUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes swapSheetUp { from{transform:translateY(100%)} to{transform:none} }

.swap-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 15px; font-weight: 800; color: #f8fafc;
    border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.swap-picker-search-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: #222838;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0; color: #8e9bb0;
}
.swap-picker-search {
    flex: 1; background: none; border: none; outline: none;
    color: #f8fafc; font-size: 14px; font-family: inherit;
}
.swap-picker-search::placeholder { color: #64748b; }
.swap-picker-list { overflow-y: auto; flex: 1; padding: 8px 0 16px; }
.swap-picker-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; cursor: pointer; transition: background .12s;
}
.swap-picker-item:hover { background: rgba(255,255,255,.04); }
.swap-picker-info { flex: 1; }
.swap-picker-sym  { font-size: 14px; font-weight: 700; color: #f8fafc; }
.swap-picker-name { font-size: 11px; color: #8e9bb0; margin-top: 2px; }
.swap-picker-price{ font-size: 12px; color: #8e9bb0; font-family: monospace; }

/* Mobile adjustments */
@media (max-width: 480px) {
    .swap-card { width: 100%; border-radius: 18px 18px 0 0; border-bottom: none; }
    .swap-modal { align-items: flex-end; padding: 0; }
}

@media (min-width: 768px) {
    .swap-picker { bottom: 0; }
}

/* ── BITNova PWA Install App Modal & Notifications ── */
.BITNova-install-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(11, 14, 17, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.BITNova-install-overlay.active {
    opacity: 1;
    visibility: visible;
}

.BITNova-install-card {
    background: #181a20;
    border: 1px solid rgba(240, 185, 11, 0.25);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(240, 185, 11, 0.15);
    text-align: center;
    position: relative;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
.BITNova-install-overlay.active .BITNova-install-card {
    transform: scale(1) translateY(0);
}

.BITNova-install-icon-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 185, 11, 0.2), rgba(240, 185, 11, 0.05));
    border: 2px solid rgba(240, 185, 11, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(240, 185, 11, 0.3);
}
.BITNova-install-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
}

.BITNova-install-title {
    font-size: 20px;
    font-weight: 700;
    color: #eaecef;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.BITNova-install-subtitle {
    font-size: 13px;
    color: #848e9c;
    line-height: 1.5;
    margin: 0 0 20px;
}

.BITNova-ios-steps {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    text-align: left;
}
.BITNova-ios-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #d1d4dc;
    margin-bottom: 10px;
    line-height: 1.4;
}
.BITNova-ios-step:last-child {
    margin-bottom: 0;
}
.BITNova-ios-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0b90b;
    color: #0b0e11;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.BITNova-install-btn-main {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #f0b90b;
    color: #0b0e11;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(240, 185, 11, 0.3);
}
.BITNova-install-btn-main:hover {
    background: #fcd535;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(240, 185, 11, 0.4);
}
.BITNova-install-btn-close {
    background: transparent;
    border: none;
    color: #848e9c;
    font-size: 13px;
    font-weight: 600;
    margin-top: 14px;
    cursor: pointer;
    transition: color 0.2s;
}
.BITNova-install-btn-close:hover {
    color: #eaecef;
}

.BITNova-modal-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #848e9c;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}
.BITNova-modal-close-x:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #eaecef;
}

/* Hide top category selector across application */
.db-topbar-nav {
    display: none !important;
}

/* ── Mobile Input Auto-Zoom Prevention & Viewport Stability ───────── */
html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .swap-input,
    .BITNova-trf-input,
    #bnc-input {
        font-size: 16px !important;
    }
}