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

/* --- COYTX EXCHANGE STYLING SYSTEM --- */
:root {
    --bg-workspace: #0b0e11;
    --bg-card: #161a25;
    --bg-input: #090d14;
    --bg-header: #12161f;
    
    --border-color: rgba(255, 255, 255, 0.06);
    --border-active: #2b66ff;
    
    --text-primary: #eaecef;
    --text-secondary: #848e9c;
    --text-muted: #475264;
    
    --color-buy: #00c087;
    --color-buy-hover: #02d899;
    --color-sell: #f03855;
    --color-sell-hover: #ff4d6a;
    --color-blue: #2b66ff;
    --color-blue-hover: #4077ff;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Fira Code', monospace;
    
    --header-height: 48px;

    /* Unified element design tokens */
    --border-radius-element: 8px;
    --border-radius-card: 12px;
    --border-input: #1a222f;
    --bg-input-unified: #090d14;
}

body.light-theme {
    background-color: #fafbfc !important;
    --bg-workspace: #f6f8fa;
    --bg-card: #ffffff;
    --bg-input: #f1f3f5;
    --bg-header: #ffffff;
    
    --border-color: rgba(0, 0, 0, 0.08);
    --border-active: #2b66ff;
    
    --text-primary: #1e2329;
    --text-secondary: #5e6673;
    --text-muted: #848e9c;
    
    --color-buy: #03a66d;
    --color-buy-hover: #00c087;
    --color-sell: #e82c4f;
    --color-sell-hover: #f03855;
    --color-blue: #2b66ff;
    --color-blue-hover: #1f4ec2;

    /* Unified element design tokens (Light theme overrides) */
    --border-input: rgba(0, 0, 0, 0.12);
    --bg-input-unified: #f1f3f5;
}

body.light-theme .text-green,
body.light-theme .text-green * {
    color: var(--color-buy) !important;
}
body.light-theme .text-red,
body.light-theme .text-red * {
    color: var(--color-sell) !important;
}
body.light-theme .text-dim,
body.light-theme .text-dim * {
    color: var(--text-muted) !important;
}
body.light-theme .text-blue,
body.light-theme .text-blue * {
    color: var(--color-blue) !important;
}


body.light-theme .logo-image {
    filter: brightness(0) saturate(100%) invert(27%) sepia(75%) saturate(2859%) hue-rotate(221deg) brightness(107%) contrast(106%) !important;
    opacity: 1;
}

body.light-theme .header-separator {
    color: rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .nav-link {
    color: #5e6673 !important;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
    color: #2b66ff !important;
}

body.light-theme .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #5e6673 !important;
}

body.light-theme .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1e2329 !important;
}

body.light-theme .header-social-btn {
    color: #8f9bb3 !important;
    background: transparent !important;
    border: none !important;
}

body.light-theme .header-social-btn:hover {
    color: #1e2329 !important;
    background: transparent !important;
    border: none !important;
}

/* Modals, Dropdowns, Drawers overrides */
body.light-theme .modal-content,
body.light-theme .modal-box,
body.light-theme .custom-modal,
body.light-theme .dropdown-menu,
body.light-theme .lang-dropdown,
body.light-theme .footer-dropdown-menu,
body.light-theme .notification-drawer,
body.light-theme .menu-drawer,
body.light-theme .mobile-drawer,
body.light-theme .drawer-content,
body.light-theme .dropdown-item {
    background-color: #ffffff !important;
    color: #1e2329 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .lang-dropdown span:hover,
body.light-theme .dropdown-item:hover,
body.light-theme .footer-dropdown-menu .dropdown-item:hover {
    background-color: #f1f3f5 !important;
    color: #1e2329 !important;
}

.dropdown-item.disabled,
.nav-dropdown-menu .dropdown-item.disabled,
.drawer-nav-link.disabled,
.footer-link-item a.disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.4) !important;
}

body.light-theme input, 
body.light-theme select, 
body.light-theme textarea {
    background-color: #f1f3f5 !important;
    color: #1e2329 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Prevent auto-zoom on input focus on iOS Safari & mobile devices globally */
@media screen and (max-width: 768px) {
    input, 
    select, 
    textarea,
    .form-input,
    .amount-input,
    .order-input-group input,
    .premium-input-field-row input,
    .tpsl-input-wrapper input,
    .search-box-container input,
    .modal-input {
        font-size: 16px !important;
        touch-action: manipulation;
    }
}

body.light-theme .mobile-menu-btn {
    color: #1e2329 !important;
}

/* Left Sidebar Asset List */
body.light-theme .left-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .search-box-container {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .search-box-container input {
    color: #1e2329 !important;
}
body.light-theme .search-box-container input::placeholder {
    color: #848e9c !important;
}
body.light-theme .filter-tab {
    background: transparent !important;
    color: #5e6673 !important;
    border-color: transparent !important;
}
body.light-theme .filter-tab.active {
    background: rgba(43, 102, 255, 0.08) !important;
    color: #2b66ff !important;
}
body.light-theme .pair-list-table-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #848e9c !important;
}
body.light-theme .pair-row:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .pair-row.active {
    background: rgba(43, 102, 255, 0.05) !important;
}

/* Center Section (Stats bar, toolbar, chart) */
body.light-theme .ticker-stats-bar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .ticker-header-divider,
body.light-theme .header-divider-vertical {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .ticker-stats-bar .active-pair-info .pair-name {
    color: #1e2329 !important;
}
body.light-theme .ticker-stats-bar .stat-item .lbl {
    color: #848e9c !important;
}
body.light-theme .ticker-stats-bar .stat-item .val {
    color: #1e2329 !important;
}
body.light-theme .chart-toolbar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .tf-btn {
    color: #5e6673 !important;
}
body.light-theme .tf-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .tf-btn.active {
    background: rgba(43, 102, 255, 0.08) !important;
    color: #2b66ff !important;
}
body.light-theme .indicator-tag {
    background: #f1f3f5 !important;
    color: #5e6673 !important;
}

/* Chart Statistics Overlays */
body.light-theme .overlay-stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
body.light-theme .overlay-stat-card .overlay-stat-label {
    color: #848e9c !important;
}
body.light-theme .overlay-stat-card .val {
    color: #1e2329 !important;
}
body.light-theme .overlay-stat-card .val.text-green {
    color: var(--color-buy) !important;
}
body.light-theme .overlay-stat-card .val.text-red {
    color: var(--color-sell) !important;
}
body.light-theme .stats-pnl-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #5e6673 !important;
}
body.light-theme .stats-pnl-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}

/* Right Order Sidebar */
body.light-theme .right-sidebar {
    background: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .bot-monitoring-panel {
    background: #ffffff !important;
}
body.light-theme .premium-order-panel {
    color: #1e2329 !important;
}
body.light-theme .premium-margin-tabs {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .premium-margin-tab:not(.active):hover {
    color: #1e2329 !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .premium-dir-tabs {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .premium-dir-tab:not(.active):hover {
    color: #1e2329 !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .premium-custom-select .custom-select-trigger {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .premium-custom-select .custom-select-options {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .custom-select-option {
    color: #5e6673 !important;
}
body.light-theme .custom-select-option:hover {
    color: #1e2329 !important;
    background: #f1f3f5 !important;
}
body.light-theme .custom-select-option.active {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .premium-input-box {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .premium-input-field-row input {
    color: #1e2329 !important;
}
body.light-theme .premium-input-unit {
    color: #848e9c !important;
}
body.light-theme #user-balance-val {
    color: #5e6673 !important;
}
body.light-theme .premium-percent-btn {
    background: #e4e7ec !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .premium-percent-btn:hover {
    background: #d8dbdf !important;
    color: #1e2329 !important;
}
body.light-theme .premium-percent-btn.active {
    background: rgba(43, 102, 255, 0.15) !important;
    border-color: rgba(43, 102, 255, 0.35) !important;
    color: #2b66ff !important;
    box-shadow: none !important;
}
body.light-theme .premium-leverage-btn {
    background: #e4e7ec !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .premium-leverage-btn:hover {
    background: #d8dbdf !important;
    color: #1e2329 !important;
}
body.light-theme .premium-leverage-btn.active {
    background: rgba(43, 102, 255, 0.15) !important;
    border-color: rgba(43, 102, 255, 0.35) !important;
    color: #2b66ff !important;
    box-shadow: none !important;
}
body.light-theme .premium-tpsl-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
body.light-theme .tpsl-input-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .tpsl-input-wrapper input {
    color: #1e2329 !important;
}
body.light-theme .tpsl-input-wrapper input:focus {
    color: #2b66ff !important;
}
body.light-theme .tpsl-step-btn {
    color: #5e6673 !important;
}
body.light-theme .tpsl-step-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .tpsl-quick-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .tpsl-quick-btn:hover {
    background: #f1f3f5 !important;
    color: #1e2329 !important;
}
body.light-theme .tpsl-quick-btn.active {
    background: rgba(43, 102, 255, 0.08) !important;
    color: #2b66ff !important;
    border-color: rgba(43, 102, 255, 0.25) !important;
    box-shadow: none !important;
}
body.light-theme .premium-checkbox-left span {
    color: #1e2329 !important;
}

/* Bottom Terminal */
body.light-theme .bottom-terminal-panel {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .terminal-tab-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .term-tab {
    color: #5e6673 !important;
}
body.light-theme .term-tab:hover {
    color: #1e2329 !important;
}
body.light-theme .term-tab.active {
    color: #2b66ff !important;
}
body.light-theme .term-tab.active::after {
    background: #2b66ff !important;
}
body.light-theme .history-table th {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #848e9c !important;
}
body.light-theme .history-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #1e2329 !important;
}
body.light-theme .history-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.01) !important;
}
body.light-theme .history-expand-wrapper button {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .history-expand-wrapper button:hover {
    background: #f1f3f5 !important;
    color: #1e2329 !important;
}
body.light-theme .terminal-logs-box {
    background: #ffffff !important;
    color: #1e2329 !important;
}
body.light-theme .log-line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Mobile Drawer overrides in light-theme */
body.light-theme .mobile-drawer {
    background: #ffffff !important;
    color: #1e2329 !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .drawer-settings-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .drawer-lang-trigger {
    color: #5e6673 !important;
}
body.light-theme .drawer-lang-dropdown {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .drawer-lang-dropdown span {
    color: #5e6673 !important;
}
body.light-theme .drawer-lang-dropdown span:hover {
    background: #f1f3f5 !important;
    color: #1e2329 !important;
}
body.light-theme .drawer-theme-toggle {
    color: #5e6673 !important;
}
body.light-theme .drawer-theme-toggle .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}

body.light-theme .drawer-nav-link {
    color: #5e6673 !important;
}
body.light-theme .drawer-nav-link:hover,
body.light-theme .drawer-nav-link.active {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .drawer-nav-link ion-icon {
    color: #8f9bb3 !important;
}
body.light-theme .drawer-nav-link:hover ion-icon,
body.light-theme .drawer-nav-link.active ion-icon {
    color: #2b66ff !important;
}

/* Light Theme: Header-right and Notification drawer buttons */
body.light-theme .app-header .header-notif-btn,
body.light-theme .app-header .header-user-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .app-header .header-notif-btn:hover,
body.light-theme .app-header .header-user-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1e2329 !important;
}

/* Light Theme: Notification Drawer overrides */
body.light-theme .notification-drawer {
    background: #ffffff !important;
    color: #1e2329 !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .notif-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .notif-close-btn {
    color: #5e6673 !important;
}
body.light-theme .notif-close-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .notif-item {
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .notif-title {
    color: #1e2329 !important;
}
body.light-theme .notif-desc {
    color: #5e6673 !important;
}
body.light-theme .notif-time {
    color: #848e9c !important;
}
body.light-theme .notif-date-line {
    background: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .notif-date-label {
    color: #848e9c !important;
}

/* Light Theme: Leverage Grid overrides */
body.light-theme .premium-leverage-grid {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light Theme: Grid Separators and Borders */
body.light-theme .pair-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .pair-list-table-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .history-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Light Theme: Help Center overrides */
body.light-theme .docs-h1,
body.light-theme .docs-h2,
body.light-theme .faq-title,
body.light-theme .article-title,
body.light-theme .modal-header h3,
body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .form-textarea {
    color: #1e2329 !important;
}
body.light-theme .sidebar-link:hover,
body.light-theme .sidebar-link.active {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .back-home-btn:hover {
    color: #2b66ff !important;
}
body.light-theme .support-form-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .form-textarea {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .form-input:focus,
body.light-theme .form-select:focus,
body.light-theme .form-textarea:focus {
    border-color: #2b66ff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(43, 102, 255, 0.1) !important;
}
body.light-theme .faq-item,
body.light-theme .article-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .article-card:hover {
    border-color: rgba(43, 102, 255, 0.4) !important;
    background: #ffffff !important;
}
body.light-theme .modal-content {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .modal-close-btn {
    color: #848e9c !important;
}
body.light-theme .modal-close-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .faq-content {
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Light Theme: Legal/Documentation Pages overrides */
body.light-theme .privacy-hero {
    background: linear-gradient(135deg, rgba(43, 102, 255, 0.08) 0%, rgba(43, 102, 255, 0.02) 100%) !important;
    border: 1px solid rgba(43, 102, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .hero-text h1 {
    color: #1e2329 !important;
}
body.light-theme .doc-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .doc-section h2,
body.light-theme .doc-section h3 {
    color: #1e2329 !important;
}
body.light-theme .doc-section p, 
body.light-theme .doc-section li {
    color: #5e6673 !important;
}
body.light-theme .address-box {
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .sidebar-menu .sidebar-link:hover {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .sidebar-menu .sidebar-link.active {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.12) !important;
    border-left-color: #2b66ff !important;
}

/* Light Theme: Wallet overrides */
body.light-theme .wallet-title {
    color: #1e2329 !important;
}
body.light-theme .wallet-subtitle {
    color: #5e6673 !important;
}
body.light-theme .wallet-history-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .wallet-history-btn:hover {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .account-type-tabs {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .account-tab:not(.active) {
    color: #5e6673 !important;
    background: transparent !important;
}
body.light-theme .account-tab:not(.active):hover {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--text-primary) !important;
}
body.light-theme .account-tab.active {
    background: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    color: #ffffff !important;
}
body.light-theme .balance-card-main {
    background: linear-gradient(135deg, #e4e7ec 0%, #f1f3f5 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03) !important;
}
body.light-theme .balance-label {
    color: #5e6673 !important;
}
body.light-theme .balance-value {
    color: #1e2329 !important;
}
body.light-theme .balance-btc-value {
    color: #5e6673 !important;
}
body.light-theme .pnl-label {
    color: #5e6673 !important;
}
body.light-theme .balance-action-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .balance-action-btn:hover {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}


body.light-theme .period-buttons {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .period-btn {
    color: #5e6673 !important;
}
body.light-theme .period-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .period-btn.active {
    background: #ffb61a !important;
    color: #07090e !important;
}
body.light-theme .board-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .leaderboard-table th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #848e9c !important;
}
body.light-theme .leaderboard-table td {
    color: #1e2329 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .user-rank-box {
    background: linear-gradient(135deg, rgba(255, 182, 26, 0.08) 0%, #ffffff 100%) !important;
    border: 1px solid rgba(255, 182, 26, 0.3) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .user-rank-label {
    color: #5e6673 !important;
}
body.light-theme .rank-col {
    color: #5e6673 !important;
}
body.light-theme .rank-normal {
    color: #5e6673 !important;
}
body.light-theme .leaderboard-table tr.my-row {
    background: rgba(255, 182, 26, 0.08) !important;
}


body.light-theme .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .stat-value {
    color: #1e2329 !important;
}
body.light-theme .task-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .task-title {
    color: #1e2329 !important;
}
body.light-theme .task-desc {
    color: #5e6673 !important;
}
body.light-theme .task-icon-wrapper {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .task-progress-bar-bg {
    background: #e4e7ec !important;
}
body.light-theme .faq-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .faq-question {
    color: #1e2329 !important;
}
body.light-theme .faq-answer {
    color: #5e6673 !important;
}


body.light-theme .affiliate-stats-grid .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .promo-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .promo-title {
    color: #1e2329 !important;
}
body.light-theme .promo-input {
    background: #f1f3f5 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .promo-input:focus {
    border-color: #2b66ff !important;
    background: #ffffff !important;
}
body.light-theme .promo-input:disabled {
    background: #e4e7ec !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #848e9c !important;
}
body.light-theme .referrals-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .referrals-table th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #848e9c !important;
}
body.light-theme .referrals-table td {
    color: #1e2329 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Light Theme: Status Page overrides */
body.light-theme .status-hero {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 255, 136, 0.02) 100%) !important;
    border: 1px solid rgba(0, 255, 136, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 255, 136, 0.05) !important;
}
body.light-theme .status-hero.degraded {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.08) 0%, rgba(255, 159, 67, 0.02) 100%) !important;
    border: 1px solid rgba(255, 159, 67, 0.25) !important;
    box-shadow: 0 8px 32px rgba(255, 159, 67, 0.05) !important;
}
body.light-theme .hero-info h1 {
    color: #1e2329 !important;
}
body.light-theme .metric-value {
    color: #1e2329 !important;
}
body.light-theme .status-section-title {
    color: #1e2329 !important;
}
body.light-theme .service-name {
    color: #1e2329 !important;
}
body.light-theme .uptime-title {
    color: #1e2329 !important;
}
body.light-theme .incident-title {
    color: #1e2329 !important;
}

/* Light Theme: Blog Page overrides */
body.light-theme {
    color: #1e2329 !important;
}
body.light-theme .blog-hero {
    background: linear-gradient(135deg, rgba(43, 102, 255, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme .blog-hero h1 {
    background: linear-gradient(135deg, #1e2329 0%, #2b66ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.light-theme .filter-btn {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .filter-btn:hover {
    border-color: rgba(43, 102, 255, 0.4) !important;
    color: #1e2329 !important;
}
body.light-theme .filter-btn.active {
    background: #2b66ff !important;
    border-color: #2b66ff !important;
    color: #ffffff !important;
}
body.light-theme .blog-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .blog-card:hover {
    border-color: rgba(43, 102, 255, 0.35) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .card-cover {
    background: linear-gradient(135deg, #f1f3f5 0%, #e4e7ec 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .card-cover::after {
    background: linear-gradient(to bottom, transparent 40%, rgba(255, 255, 255, 0.8) 100%) !important;
}
body.light-theme .card-title {
    color: #1e2329 !important;
}
body.light-theme .blog-card:hover .card-title {
    color: #2b66ff !important;
}
body.light-theme .card-text {
    color: #5e6673 !important;
}
body.light-theme .card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .single-article-view {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .back-blog-btn {
    color: #5e6673 !important;
}
body.light-theme .back-blog-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .article-cover-large {
    background: linear-gradient(135deg, #f1f3f5 0%, #e4e7ec 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .article-title-main {
    color: #1e2329 !important;
}
body.light-theme .article-meta-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .article-body-content {
    color: #5e6673 !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #06090e;
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html:has(body.trade-page),
body.trade-page {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.trade-page > main {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.trade-page .exchange-workspace {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.trade-page .workspace-column {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.trade-page .left-sidebar {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.trade-page .pair-list-wrapper {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

body.trade-page .right-sidebar {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
}

body.trade-page .center-content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Prevent input autofill white/yellow background in modern browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input, #1f2633) inset !important;
    -webkit-text-fill-color: var(--text-primary, #ffffff) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Top Header */
.app-header {
    height: var(--header-height);
    background-color: var(--bg-header);
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    z-index: 1900;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
}

.header-left .header-separator {
    color: rgba(255, 255, 255, 0.12);
    font-size: 14px;
    font-weight: 300;
    margin-right: 16px;
}

.logo-image {
    height: 20px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.nav-links {
    display: flex;
    gap: 16px;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 0;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.nav-link ion-icon {
    font-size: 14px;
}

.nav-link:hover, .nav-link.active {
    color: white;
}

.nav-link.disabled, .footer-link.disabled, .footer-links-row a.disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
}

.login-btn {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    margin-right: 0;
    padding: 0 16px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background-color: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.login-btn:active {
    transform: translateY(0.5px);
}

.create-account-btn {
    background: #2563eb;
    color: white;
    border: none;
    outline: none;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: 0 14px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
}

.create-account-btn:hover {
    background: #1d4ed8;
}
.create-account-btn:active {
    transform: translateY(0.5px);
}

.lang-selector-globe {
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0 10px;
    height: 28px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.lang-selector-globe:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.lang-dropdown {
    position: absolute;
    top: 32px;
    right: 0;
    background-color: #0c1017;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 200;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
    min-width: 130px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.2s;
}

.lang-dropdown::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.lang-selector-globe:hover .lang-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.lang-dropdown span {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.lang-dropdown span:hover {
    background-color: rgba(255,255,255,0.06);
    color: white;
}

/* Workspace Core Layout */
.exchange-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    min-height: 0;
    background-color: var(--bg-workspace);
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exchange-workspace.left-collapsed {
    grid-template-columns: 0px 1fr 280px;
}

.workspace-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--border-color);
}

.workspace-column:last-child {
    border-right: none;
}

/* LEFT COLUMN: Market Pairs */
.left-sidebar {
    background-color: var(--bg-workspace);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.exchange-workspace.left-collapsed .left-sidebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.search-box-container {
    height: 52px;
    padding: 0 10px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.search-box-container input {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 6px 10px 6px 28px;
    border-radius: 6px;
    outline: none;
}

.search-box-container input:focus {
    border-color: var(--border-active);
}

.pair-filter-tabs {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.filter-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.filter-tab.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.pair-list-table-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    padding: 6px 12px;
    font-size: 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.pair-list-table-header span:nth-child(2) {
    text-align: right;
}
.pair-list-table-header span:nth-child(3) {
    text-align: right;
}

.pair-list-wrapper {
    flex: 1;
    overflow-y: auto;
}

.pair-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    padding: 8px 12px;
    font-size: 11.5px;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.01);
    transition: background-color 0.2s ease;
}

.pair-row:hover {
    background-color: rgba(255, 255, 255, 0.045);
}

.pair-row.active {
    background-color: rgba(43, 102, 255, 0.08);
}

.pair-row-symbol {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.pair-row-symbol .star-icon {
    font-size: 11px;
    color: var(--text-muted);
}

.pair-row-symbol .star-icon.active {
    color: #f0a000;
}

.pair-row-price {
    text-align: right;
    font-family: var(--font-mono);
}

.pair-row-change {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
}

/* MIDDLE COLUMN: Ticker Info & Canvas Chart */
.center-content {
    background-color: var(--bg-workspace);
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Ticker stats bar */
.ticker-stats-bar {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.active-pair-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
}

.ticker-header-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.08);
    margin-right: 24px;
}

.active-pair-info .star-icon {
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.active-pair-info .star-icon.active {
    color: #f0a000;
}

.active-pair-info .pair-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.active-pair-info .highlight-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono);
    margin-left: 12px;
    transition: color 0.2s ease;
}

.active-pair-info .highlight-price.text-green,
#ticker-price.text-green {
    color: var(--color-buy, #00c087) !important;
}

.active-pair-info .highlight-price.text-red,
#ticker-price.text-red {
    color: var(--color-sell, #ff3b57) !important;
}

.stats-grid {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-item .lbl {
    font-size: 9.5px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
}

.stat-item .val {
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}

.chart-container-panel {
    position: relative;
    z-index: 10;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 420px !important;
    height: auto !important;
    border-bottom: 1px solid var(--border-color);
}

.chart-container-panel.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: var(--bg-workspace) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

.chart-fullscreen-btn:hover {
    color: var(--text-primary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .chart-fullscreen-btn {
    color: var(--text-secondary) !important;
}

body.light-theme .chart-fullscreen-btn:hover {
    color: var(--text-primary) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.chart-toolbar {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.01);
    position: relative;
}

.timeframe-selectors {
    display: flex;
    gap: 4px;
}

.tf-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.tf-btn.active, .tf-btn:hover {
    color: white;
    background-color: rgba(255,255,255,0.05);
}

.toolbar-divider {
    width: 1px;
    height: 14px;
    background-color: var(--border-color);
    margin: 0 12px;
}

.technical-indicators-display {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
}

.technical-indicators-display::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar in Chrome/Safari */
}

.indicator-tag {
    font-size: 9.5px;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.indicator-tag:hover {
    opacity: 0.8;
}

.indicator-tag.inactive {
    opacity: 0.35 !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.indicator-tag.ema9 {
    border-color: #00ff88;
    color: #00ff88;
}

.indicator-tag.ema21 {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.indicator-tag.rsi {
    border-color: #e91e63;
    color: #e91e63;
}

.indicator-tag.bollinger {
    border-color: #9c27b0;
    color: #9c27b0;
}

.indicator-tag.sma20 {
    border-color: #ff9800;
    color: #ff9800;
}

.indicators-tooltip-bubble {
    position: absolute;
    background: var(--color-blue);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    white-space: nowrap;
    cursor: pointer;
    animation: bounceTooltip 2s infinite ease-in-out;
}

.indicators-tooltip-bubble .tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-blue);
}

@keyframes bounceTooltip {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Indicators Dropdown Container */
.indicators-dropdown-container {
    position: relative;
    display: inline-block;
}

/* Indicators Dropdown Button */
.indicators-dropdown-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.indicators-dropdown-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

body.light-theme .indicators-dropdown-btn {
    color: #5e6673 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
}

body.light-theme .indicators-dropdown-btn:hover {
    color: #1e2329 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Indicators Dropdown Menu */
.indicators-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background-color: #161a1e;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    padding: 6px 0;
}

body.light-theme .indicators-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.indicators-dropdown-menu.show {
    display: block;
}

/* Indicator Dropdown Item */
.dropdown-indicator-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    cursor: pointer;
    gap: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-indicator-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

body.light-theme .dropdown-indicator-item {
    color: #5e6673 !important;
}

body.light-theme .dropdown-indicator-item:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #1e2329 !important;
}

.dropdown-indicator-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    background: #090d14;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    outline: none;
    margin: 0;
    flex-shrink: 0;
}

.dropdown-indicator-item input[type="checkbox"]:hover {
    border-color: #5e6673;
}

.dropdown-indicator-item input[type="checkbox"]:checked {
    background: #090d14;
    border-color: #5e6673;
}

.dropdown-indicator-item input[type="checkbox"]:checked::after {
    content: "";
    width: 3.5px;
    height: 6.5px;
    border: solid #2b66ff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
}

body.light-theme .dropdown-indicator-item input[type="checkbox"] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .dropdown-indicator-item input[type="checkbox"]:checked {
    background: #ffffff !important;
    border-color: #2b66ff !important;
}

.dropdown-indicator-item .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* TradingView Link Button */
.tradingview-link-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.tradingview-link-btn:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.5);
    background-color: rgba(59, 130, 246, 0.08);
}

.tradingview-link-btn.active {
    background: var(--color-blue) !important;
    color: white !important;
    border-color: var(--color-blue) !important;
}

body.light-theme .tradingview-link-btn {
    color: #5e6673 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
}

body.light-theme .tradingview-link-btn:hover {
    color: #2b66ff !important;
    border-color: rgba(43, 102, 255, 0.5) !important;
    background-color: rgba(43, 102, 255, 0.08) !important;
}

.canvas-wrapper {
    flex: 1 1 auto !important;
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
}

#exchangeChart {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bottom Terminal Panels */
.bottom-terminal-panel {
    height: 180px !important;
    min-height: 180px !important;
    flex: 0 0 180px !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--bg-workspace) !important;
}

.terminal-tab-header {
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.01);
    box-sizing: border-box;
}

.terminal-tab-header .tab-buttons {
    display: flex;
    height: 100%;
}

.term-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    padding: 0 16px;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}

.term-tab.active {
    color: #ffffff !important;
    border-bottom: 2px solid var(--color-blue, #2b66ff) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ai-badge-tab {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(43, 102, 255, 0.15);
    color: var(--color-blue);
    border: 1px solid rgba(43, 102, 255, 0.2);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

.terminal-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.terminal-body.hidden {
    display: none !important;
}

.terminal-logs-box {
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-line {
    word-break: break-all;
}

/* Tables styling */
.history-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.history-table th {
    padding: 8px 16px;
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-workspace);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.history-table td {
    padding: 8px 16px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.no-history-row td {
    color: var(--text-muted);
    padding: 30px 0;
}

.history-table tbody tr.no-history-row {
    cursor: default !important;
}

.history-table tbody tr.no-history-row:hover {
    background-color: transparent !important;
}

.history-table tbody tr {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.history-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.035);
}

.history-table tbody tr.selected-trade-row {
    background-color: rgba(79, 195, 247, 0.08) !important;
    box-shadow: inset 3px 0 0 0 var(--color-blue);
}

@keyframes selectedRowFlash {
    0% { background-color: rgba(79, 195, 247, 0.4); }
    100% { background-color: rgba(79, 195, 247, 0.08); }
}

.history-table tbody tr.selected-flash {
    animation: selectedRowFlash 1s ease-out;
}

.close-position-btn {
    background: rgba(240, 56, 85, 0.15);
    color: #f03855;
    border: 1px solid rgba(240, 56, 85, 0.3);
    border-radius: 4px;
    padding: 0 8px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.close-position-btn:hover {
    background: #f03855;
    color: #ffffff;
}

.edit-tpsl-btn {
    background: rgba(43, 102, 255, 0.15);
    color: var(--color-blue);
    border: 1px solid rgba(43, 102, 255, 0.3);
    border-radius: 4px;
    padding: 0;
    height: 20px;
    width: 20px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.edit-tpsl-btn:hover {
    background: var(--color-blue);
    color: #ffffff;
}

.edit-tpsl-btn ion-icon {
    font-size: 13px;
    margin: 0;
}

/* RIGHT COLUMN: Order Form */
.right-sidebar {
    background-color: var(--bg-workspace);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 13px 14px 14px 14px;
    box-sizing: border-box;
}

.order-form-panel {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.action-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--bg-input);
    border-radius: 6px;
    padding: 3px;
}

.action-tab {
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.action-tab.buy.active {
    background-color: var(--color-buy);
    color: white;
}

.action-tab.sell.active {
    background-color: var(--color-sell);
    color: white;
}

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

.type-tab {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.type-tab.active {
    color: white;
    border-bottom-color: var(--border-active);
}

.balance-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.balance-row .lbl {
    color: var(--text-secondary);
}

.balance-row .val {
    color: white;
    font-weight: 600;
}

.deposit-link {
    color: var(--color-blue);
    text-decoration: none;
    margin-left: 4px;
}

.deposit-link:hover {
    text-decoration: underline;
}

/* Inputs styled nested */
.order-input-group {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    align-items: center;
    padding: 6px 12px;
}

.order-input-group:focus-within {
    border-color: var(--border-active);
}

.group-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.order-input-group input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    width: 100%;
}

/* Remove spin arrows from input number */
.order-input-group input::-webkit-outer-spin-button,
.order-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.group-unit {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
}

/* Submit trading button */
.btn-submit-order {
    width: 100%;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: white;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    background-color: var(--color-blue);
    transition: background-color 0.15s;
    margin-top: 4px;
}

.btn-submit-order:hover {
    background-color: var(--color-blue-hover);
}

.btn-submit-order.buy {
    background-color: var(--color-buy);
}
.btn-submit-order.buy:hover {
    background-color: var(--color-buy-hover);
}

.btn-submit-order.sell {
    background-color: var(--color-sell);
}
.btn-submit-order.sell:hover {
    background-color: var(--color-sell-hover);
}

/* AI Forecast Receipt overlay */
.forecast-receipt-card {
    background-color: rgba(255,255,255,0.02);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    animation: toastSlideIn 0.25s ease-out;
}

.forecast-receipt-card.hidden {
    display: none !important;
}

.receipt-header {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--color-blue);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 4px;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}

.receipt-row .lbl {
    color: var(--text-secondary);
}

.receipt-row .val {
    font-family: var(--font-mono);
    font-weight: 700;
}

.form-stats-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-footer-row {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
}

.stat-footer-row .lbl {
    color: var(--text-secondary);
}

.stat-footer-row .val {
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Badges */
.pos-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
}

.pos-badge.up {
    background-color: rgba(0, 192, 135, 0.12);
    color: var(--color-buy);
}

.pos-badge.down {
    background-color: rgba(240, 56, 85, 0.12);
    color: var(--color-sell);
}

.status-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.status-badge.pending {
    background-color: rgba(43, 102, 255, 0.12);
    color: #4fc3f7;
}

.status-badge.success {
    background-color: rgba(0, 192, 135, 0.12);
    color: var(--color-buy);
}

.status-badge.failed {
    background-color: rgba(240, 56, 85, 0.12);
    color: var(--color-sell);
}

/* Toast alert */
.toast-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    max-width: 300px;
    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-card.hidden {
    display: none !important;
}

.toast-icon {
    font-size: 18px;
}

.toast-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.toast-body strong {
    font-size: 12px;
    color: white;
}

.toast-body p {
    font-size: 10.5px;
    color: var(--text-secondary);
}

/* Colors text helper */
.text-green { color: var(--color-buy); }
.text-red { color: var(--color-sell); }
.text-dim { color: var(--text-muted); }
.text-blue { color: var(--color-blue); }

@keyframes toastSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Bot Stats Card */
.bot-stats-card {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.stats-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bot-status-dot.green {
    background-color: var(--color-buy);
    box-shadow: 0 0 8px var(--color-buy);
}

.bot-status-dot.red {
    background-color: var(--color-sell);
    box-shadow: 0 0 8px var(--color-sell);
}

.stats-card-header .title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.5px;
}

.stats-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stats-box {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-box .lbl {
    font-size: 9px;
    color: var(--text-secondary);
}

.stats-box .val {
    font-size: 11.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    color: white;
}

/* Bot Monitoring Panel */
.bot-monitoring-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
}

.bot-live-feed-card {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
}

.bot-live-feed-card .feed-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.bot-live-feed-card .pulse-icon {
    font-size: 14px;
    color: var(--color-buy);
    animation: beaconPulse 1.5s infinite;
}

.feed-lines-box {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

.feed-line {
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 6px;
    animation: feedFadeIn 0.2s ease-out;
}

.feed-line.success {
    border-left-color: var(--color-buy);
    color: var(--color-buy);
}

.feed-line.fail {
    border-left-color: var(--color-sell);
    color: var(--color-sell);
}

.feed-line.info {
    border-left-color: var(--color-blue);
    color: var(--color-blue);
}

.feed-line.text-dim {
    color: var(--text-secondary);
}

@keyframes beaconPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes feedFadeIn {
    from { transform: translateX(5px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- PREMIUM FOOTER BAR --- */
.app-footer {
    background-color: var(--bg-header);
    border-top: 1px solid var(--border-color);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    user-select: none;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    margin-top: auto !important;
}

.footer-disclaimer {
    font-size: 9px;
    line-height: 1.5;
    color: var(--text-muted);
    opacity: 0.55;
    text-align: justify;
}

.footer-disclaimer .warning-label {
    color: var(--color-sell);
    font-weight: 700;
}

.footer-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Footer Search */
.footer-search {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    width: 200px;
    transition: all 0.2s ease;
}

.footer-search:focus-within {
    border-color: var(--color-blue);
    background-color: rgba(255, 255, 255, 0.05);
}

.footer-search ion-icon {
    font-size: 13px;
    margin-right: 6px;
    color: var(--text-muted);
}

.footer-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 11px;
    width: 100%;
}

/* Footer Links */
.footer-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: white;
}

.footer-link ion-icon {
    font-size: 12px;
}

/* Footer Status Indicators */
.footer-status-indicators {
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-indicator-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.status-indicator-link ion-icon {
    font-size: 13px;
    margin-right: -1px;
}

.status-indicator-link:hover {
    color: white;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

@keyframes dotPulse {
    0% { transform: scale(1); box-shadow: 0 0 6px var(--color-buy); }
    50% { transform: scale(1.25); box-shadow: 0 0 10px var(--color-buy); }
    100% { transform: scale(1); box-shadow: 0 0 6px var(--color-buy); }
}

.status-indicator .dot.green {
    background-color: var(--color-buy);
    box-shadow: 0 0 6px var(--color-buy);
    animation: dotPulse 2s infinite ease-in-out;
}

.status-indicator.latency {
    font-family: var(--font-mono), monospace !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
}

#footer-live-clock {
    min-width: auto !important;
}

#latency-indicator {
    min-width: auto !important;
}

.status-indicator.latency ion-icon {
    font-size: 11px;
    color: var(--color-buy);
}

/* Custom Premium Futures Panel Styles */
.premium-order-panel {
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 0;
    color: #ffffff;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: none;
}

.premium-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #8a919e;
}

.premium-panel-header .leverage-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}

.premium-panel-header .leverage-toggle input[type="checkbox"] {
    accent-color: var(--color-blue);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.premium-margin-tabs {
    display: flex;
    background: #090d14;
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
    border: 1px solid #1a222f;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

.premium-margin-tab {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: #8a919e;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
    text-transform: uppercase;
}

.premium-margin-tab:not(.active):hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.premium-margin-tab.active {
    background: var(--color-blue);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(43, 102, 255, 0.25);
}

.premium-dir-tabs {
    display: flex;
    background: #090d14;
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
    border: 1px solid #1a222f;
}

.premium-dir-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: #8a919e;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}

.premium-dir-tab:not(.active):hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.premium-dir-tab.buy.active {
    background: var(--color-blue);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(43, 102, 255, 0.25);
}

.premium-dir-tab.sell.active {
    background: #f03855;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(240, 56, 85, 0.25);
}

.premium-type-tabs {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #19202c;
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.premium-type-tab {
    font-size: 11px;
    font-weight: 600;
    color: #5f6673;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.premium-type-tab:not(.active):hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.premium-type-tab.active {
    color: #2b66ff;
    background: rgba(43, 102, 255, 0.1);
}

.premium-input-box {
    background: #090d14;
    border: 1px solid #1a222f;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.premium-input-box:focus-within {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.premium-input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #5f6673;
    font-weight: 600;
}

.premium-input-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.premium-input-field-row input {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    width: 70%;
    outline: none;
    padding: 0;
    font-family: var(--font-sans);
}

.premium-input-unit {
    color: #8a919e;
    font-size: 13px;
    font-weight: 700;
}

.premium-percent-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.premium-percent-btn {
    flex: 1;
    background: #131924;
    border: 1px solid #1c2433;
    color: #8a919e;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}

.premium-percent-btn:hover {
    background: #1c2433;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}

.premium-percent-btn.active {
    background: rgba(43, 102, 255, 0.15);
    border-color: rgba(43, 102, 255, 0.35);
    color: #2b66ff;
    box-shadow: none !important;
}

.premium-leverage-grid {
    display: flex;
    background: #090d14;
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
    border: 1px solid #1a222f;
}

.premium-leverage-btn {
    flex: 1;
    padding: 5px 0;
    border: 1px solid transparent;
    background: transparent;
    color: #5f6673;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}

.premium-leverage-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

.premium-leverage-btn.active {
    background: rgba(43, 102, 255, 0.12);
    color: #2b66ff;
    border: 1px solid rgba(43, 102, 255, 0.35);
    box-shadow: none !important;
    padding: 5px 0;
}

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

.premium-collateral-toggle {
    display: flex;
    background: #090d14;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.premium-collateral-tab {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #5f6673;
    cursor: pointer;
    transition: all 0.15s;
}

.premium-collateral-tab.active {
    background: rgba(43, 102, 255, 0.15);
    color: #2b66ff;
}

.premium-review-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.premium-review-btn.buy {
    background: var(--color-buy);
}

.premium-review-btn.sell {
    background: #f03855;
}

.premium-review-btn:not(.disabled):not(:disabled):hover {
    filter: brightness(1.05);
}

.premium-review-btn:disabled,
.premium-review-btn.disabled {
    background: #1c2433 !important;
    color: #5f6673 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.premium-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #8a919e;
}

.premium-checkbox-left {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.premium-checkbox-left input[type="checkbox"] {
    accent-color: var(--color-blue);
    cursor: pointer;
}

/* TP/SL Card styling */
.premium-tpsl-card {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

.premium-tpsl-card .premium-input-box {
    flex: 1;
    min-width: 0;
}

.tpsl-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.tpsl-pct-label {
    font-size: 10px;
    font-weight: 700;
    display: none; /* hidden when disabled */
}

.tpsl-input-wrapper {
    display: flex;
    align-items: center;
    background: #131924;
    border: 1px solid #1c2433;
    border-radius: 6px;
    padding: 2px;
}

.tpsl-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: #8a919e;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    outline: none;
    width: 100%;
    font-family: var(--font-sans);
}

.tpsl-input-wrapper input:focus {
    color: #ffffff;
}

.tpsl-step-btn {
    background: transparent;
    border: none;
    color: #8a919e;
    font-size: 16px;
    font-weight: 600;
    width: 28px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tpsl-step-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.tpsl-unit {
    font-size: 10px;
    color: #5f6673;
    font-weight: 700;
    margin-right: 6px;
}

.tpsl-quick-row {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.tpsl-quick-btn {
    flex: 1;
    background: #18202d;
    border: 1px solid transparent;
    color: #5f6673;
    border-radius: 6px;
    padding: 4px 0;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}

.tpsl-quick-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.tpsl-quick-btn.active {
    background: rgba(37, 99, 235, 0.15);
    color: #ffffff;
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: none !important;
}
.chart-stats-overlay {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    flex-wrap: nowrap; /* Prevent cards from wrapping vertically during transition */
    gap: 8px;
    z-index: 100;
    pointer-events: none; /* Let clicks pass through to chart canvas! */
    max-width: 1200px;
    opacity: 1;
    transform: translateX(0);
    overflow: hidden; /* Prevent visual overflow during transition */
}

.chart-stats-overlay.overlay-collapsed {
    max-width: 0px !important;
    opacity: 0 !important;
    transform: translateX(-20px) !important;
    gap: 0px !important;
}

.chart-stats-toggle-handle {
    position: absolute;
    left: 0;
    top: 10px;
    width: 14px;
    height: 48px;
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 102;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
}

.chart-stats-toggle-handle:hover {
    background-color: var(--primary-color) !important;
    color: #000000 !important;
    border-color: var(--primary-color) !important;
}

body.light-theme .chart-stats-toggle-handle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

.chart-stats-overlay.hidden {
    display: none !important;
}

.overlay-stat-card {
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
    pointer-events: auto; /* Capture clicks inside cards */
}

.pnl-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pnl-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-pnl-btn {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
    align-self: center;
}

.stats-pnl-btn:hover {
    color: #ffffff;
    background-color: rgba(43, 102, 255, 0.15);
    border-color: rgba(43, 102, 255, 0.45);
    box-shadow: 0 2px 8px rgba(43, 102, 255, 0.2);
}

.stats-pnl-btn:active {
    transform: none;
}

.stats-pnl-btn ion-icon {
    font-size: 11px !important;
}

.overlay-stat-label {
    font-size: 8px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.overlay-stat-card .val {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-mono);
}

.overlay-stat-card .val.text-green {
    color: var(--color-buy) !important;
}

.overlay-stat-card .val.text-red {
    color: var(--color-sell) !important;
}

/* Real-time price update flash animations */
@keyframes flashGreen {
    0% { color: #00c087; text-shadow: 0 0 8px rgba(0, 192, 135, 0.7); }
    100% { color: #00c087; text-shadow: none; }
}

@keyframes flashRed {
    0% { color: #ff3b57; text-shadow: 0 0 8px rgba(255, 59, 87, 0.7); }
    100% { color: #ff3b57; text-shadow: none; }
}

.price-flash-up {
    color: #00c087 !important;
    animation: flashGreen 0.6s ease-out;
}

.price-flash-down {
    color: #ff3b57 !important;
    animation: flashRed 0.6s ease-out;
}

/* Footer Single Running Line Marquee / Ticker */
.footer-seo-marquee-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 0 !important;
    margin: 20px 0 !important;
    position: relative !important;
    display: block !important;
}

.footer-seo-marquee-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    animation: footerSeoMarquee 45s linear infinite !important;
    will-change: transform;
    width: max-content !important;
}

.footer-seo-marquee-wrapper:hover .footer-seo-marquee-content {
    animation-play-state: paused !important;
}

@keyframes footerSeoMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.footer-seo-marquee-content a,
.footer-seo-marquee-content a:visited,
.footer-seo-marquee-content a:link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #848e9c !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    height: 26px !important;
    box-sizing: border-box !important;
}

.footer-seo-marquee-content a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    text-decoration: none !important;
}

.footer-seo-marquee-content .seo-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.footer-company-docs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-company-docs .company-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #8a919e);
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
}
.footer-company-docs .footer-separator {
    color: rgba(255, 255, 255, 0.15);
    font-size: 11px;
    font-weight: 300;
}

.sidebar-risk-card {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 12px;
    box-sizing: border-box;
}

.risk-card-header {
    margin-bottom: 6px;
}

.flag-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.flag-en {
    background-image: url('https://flagcdn.com/us.svg');
}
.flag-ru {
    background-image: url('https://flagcdn.com/ru.svg');
}
.flag-es {
    background-image: url('https://flagcdn.com/es.svg');
}
.flag-de {
    background-image: url('https://flagcdn.com/de.svg');
}
.flag-fr {
    background-image: url('https://flagcdn.com/fr.svg');
}
.flag-zh {
    background-image: url('https://flagcdn.com/cn.svg');
}
.lang-dropdown .flag-circle {
    margin-right: 6px;
}
.lang-selector-globe {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* AI Copy Trading Toggle Switch */
.copy-trading-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    user-select: none;
}

.copy-trading-switch-wrapper .switch-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.copy-trading-switch-wrapper .switch-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    margin: 0;
}

.switch-toggle input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

.hidden {
    display: none !important;
}

.switch-toggle .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a222f;
    transition: .3s;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.switch-toggle .switch-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 2px;
    bottom: 2px;
    background-color: #5f6673;
    transition: .3s;
    border-radius: 50%;
}

.switch-toggle input:checked + .switch-slider {
    background-color: rgba(43, 102, 255, 0.15);
    border-color: rgba(43, 102, 255, 0.35);
}

.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(12px);
    background-color: var(--color-blue);
    box-shadow: 0 0 6px rgba(43, 102, 255, 0.6);
}

.demo-toggle-wrapper input:checked + .switch-slider {
    background-color: rgba(255, 159, 10, 0.15) !important;
    border-color: rgba(255, 159, 10, 0.45) !important;
}

.demo-toggle-wrapper input:checked + .switch-slider:before {
    background-color: #ff9f0a !important;
    box-shadow: 0 0 6px rgba(255, 159, 10, 0.6) !important;
}

.copy-trading-switch-wrapper input:checked ~ .switch-label {
    color: white;
}

/* Header Divider and Expand Button */
.header-divider-vertical {
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 0;
}

.terminal-expand-btn, .sound-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    box-sizing: border-box;
}

.terminal-expand-btn ion-icon, .sound-toggle-btn ion-icon {
    font-size: 15px !important;
}

.terminal-expand-btn:hover, .sound-toggle-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
}

.terminal-expand-btn:active {
    transform: scale(0.92);
}

/* Expanded Terminal state toggles */
.workspace-column.center-content.terminal-expanded .chart-container-panel {
    display: none !important;
}

.workspace-column.center-content.terminal-expanded .bottom-terminal-panel {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Hide default browser spinners for number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Premium Social Media Icons styling in Header */
.header-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 8px;
}

.header-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
    opacity: 0.6;
}

.header-social-btn ion-icon {
    font-size: 16px !important;
}

.header-social-btn:hover {
    color: white !important;
    opacity: 1 !important;
}

/* Header Support & Theme Toggle Buttons styling */
.header-support-btn,
.theme-toggle-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-decoration: none;
}

.header-support-btn:hover,
.theme-toggle-btn:hover {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.light-theme .header-support-btn {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #5e6673 !important;
}

body.light-theme .header-support-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1e2329 !important;
}

.empty-state-cell {
    text-align: center !important;
    padding: 60px 20px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-family: var(--font-sans);
}

/* Premium Daily PnL Statistics Button & Modal */
.stats-history-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 3px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
}

.stats-history-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.stats-history-btn ion-icon {
    font-size: 14px !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-content {
    background: #12161f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.daily-stats-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.summary-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-card .label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card .val {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: #ffffff;
}

.summary-card .val.positive {
    color: var(--color-buy);
}

.summary-card .val.negative {
    color: var(--color-sell);
}

.daily-table-container {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.01);
}

.daily-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.daily-stats-table th, .daily-stats-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.daily-stats-table th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-weight: 500;
}

.daily-stats-table tr:last-child td {
    border-bottom: none;
}

.daily-stats-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.daily-report-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.daily-report-download:hover {
    background-color: rgba(43, 102, 255, 0.15);
}

.daily-stats-table tr.algo-update-row:hover {
    background: transparent !important;
}

.algorithm-update-divider {
    text-align: center;
    padding: 12px 0 !important;
    background: rgba(43, 102, 255, 0.08) !important;
    border-top: 1px dashed var(--color-blue) !important;
    border-bottom: 1px dashed var(--color-blue) !important;
}

.algorithm-update-divider span {
    color: var(--color-blue);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.daily-report-download ion-icon {
}

.premium-custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    background: #090d14;
    border: 1px solid #1a222f;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-family: var(--font-sans);
}

.premium-custom-select.active .custom-select-trigger,
.custom-select-trigger:hover {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.select-chevron {
    font-size: 12px;
    color: #8a919e;
    transition: transform 0.2s ease;
}

.premium-custom-select.active .select-chevron {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #0d121c;
    border: 1px solid #1a222f;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
    animation: selectSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-options.hidden {
    display: none !important;
}

.custom-select-option {
    padding: 10px 12px;
    color: #8a919e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    font-family: var(--font-sans);
}

.custom-select-option:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.custom-select-option.active {
    color: var(--color-blue);
    background: rgba(43, 102, 255, 0.08);
}

@keyframes selectSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back to Live button floating overlay */
.back-to-live-btn {
    position: absolute;
    bottom: 65px;
    right: 75px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
    pointer-events: auto;
    opacity: 1;
}

.back-to-live-btn ion-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.back-to-live-btn:hover {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(43, 102, 255, 0.35);
}

.back-to-live-btn:hover ion-icon {
    transform: translateX(2px);
}

.back-to-live-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
}

.console-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    text-decoration: none;
    box-sizing: border-box;
}

.console-btn:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    color: white !important;
}

.console-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   MOBILE & RESPONSIVE BASE STYLES
   ========================================================================== */
.mobile-menu-btn {
    display: none;
}

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

.mobile-drawer-overlay {
    display: none;
}

/* ==========================================================================
   MOBILE & RESPONSIVE MEDIA QUERIES (Adaptive Layouts)
   ========================================================================== */

@media (max-width: 992px) {
    :root {
        --header-height: 52px;
    }
    /* Header Adaptations */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--text-primary);
        cursor: pointer;
        padding: 4px;
        margin-right: 8px;
    }

    .header-separator,
    .nav-links,
    .header-socials,
    .app-header .lang-selector-globe,
    .app-header .theme-toggle-btn {
        display: none !important;
    }

    .mobile-drawer .drawer-auth-section,
    .mobile-drawer .drawer-divider:first-of-type {
        display: none !important;
    }

    .app-header {
        padding: 0 12px;
        height: 52px;
        justify-content: space-between;
    }

    .header-right {
        gap: 8px;
    }

    .mobile-header-demo-toggle {
        display: none !important;
    }

    /* Mobile Drawer Overlay & Sliding Panel */
    .mobile-drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh !important;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 100000 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block !important;
    }

    .mobile-drawer-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 86vw;
        height: 100dvh !important;
        background: #111622 !important;
        backdrop-filter: blur(16px);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        padding: 16px 16px 60px 16px !important;
        box-sizing: border-box;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateX(-100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer-overlay.open .mobile-drawer {
        transform: translateX(0);
    }

    .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .drawer-header .logo-image {
        height: 26px;
    }

    .close-drawer-btn {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 20px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .close-drawer-btn:active {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(0.92);
        color: #ffffff;
    }

    .drawer-nav-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: stretch !important;
    }

    .drawer-nav-link {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 12px;
        padding: 10px 12px;
        color: #94a3b8;
        text-decoration: none;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .drawer-nav-link ion-icon {
        font-size: 22px;
        flex-shrink: 0;
    }

    .drawer-nav-link:hover,
    .drawer-nav-link:active,
    .drawer-nav-link.active {
        color: #ffffff;
        background: rgba(0, 85, 255, 0.12) !important;
    }

    .drawer-nav-link.active::after {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 3px;
        background: #0055ff;
        border-radius: 0 4px 4px 0;
        box-shadow: 0 0 8px #0055ff;
    }

    .drawer-nav-link.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .drawer-divider {
        height: 1px;
        background-color: rgba(255, 255, 255, 0.04);
        margin: 16px 0;
    }

    /* Circular Socials Row */
    .drawer-socials-row {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 4px 8px;
    }

    .drawer-social-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8f9bb3;
        font-size: 14px;
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .drawer-social-circle:active,
    .drawer-social-circle:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .drawer-footer {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .drawer-footer-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 8px;
        margin-top: 16px;
        margin-bottom: 8px;
        text-align: left;
        padding: 0 10px;
        font-size: 11px;
    }

    .drawer-footer-links .link-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .drawer-footer-links a {
        color: var(--text-secondary, #8f9bb3);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .drawer-footer-links a:hover {
        color: #ffffff;
    }

    .drawer-footer-links a.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    .drawer-copyright {
        font-size: 10px;
        color: var(--text-muted);
        text-align: center;
        font-weight: 500;
        letter-spacing: 0.5px;
        padding-bottom: 8px;
    }

    /* Footer Adaptations */
    .app-footer {
        padding: 8px 12px;
        position: relative;
    }

    .footer-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-company-docs {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .footer-status-indicators {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.03);
        padding-top: 8px;
    }

    .footer-separator {
        display: none;
    }
}

/* Trading Terminal (index.html) Responsive Layout */
@media (max-width: 992px) {
    /* Mobile Tab selectors styling */
    .mobile-workspace-tabs {
        display: flex !important;
        background-color: var(--bg-header) !important;
        border-bottom: 1px solid var(--border-color) !important;
        height: 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .workspace-tab {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        color: var(--text-secondary) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        box-shadow: none !important;
        outline: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .workspace-tab ion-icon {
        font-size: 16px !important;
    }

    .workspace-tab:hover {
        color: var(--text-primary) !important;
    }

    .workspace-tab.active {
        color: var(--color-blue, #2b66ff) !important;
        border-bottom: 2px solid var(--color-blue, #2b66ff) !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Main Workspace Restructuring */
    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .exchange-workspace {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: calc(100vh - 52px - 30px - 40px - 32px) !important;
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Hide columns by default, show when mobile-active */
    .exchange-workspace .left-sidebar,
    .exchange-workspace .center-content,
    .exchange-workspace .right-sidebar {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        height: auto !important;
        min-height: 100% !important;
        min-width: 0 !important;
    }

    .exchange-workspace .left-sidebar.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .exchange-workspace .center-content.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .exchange-workspace .right-sidebar.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
    }

    /* Column Internal Layout Adjustments */
    .ticker-stats-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 44px !important;
        padding: 0 12px !important;
        gap: 12px !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background-color: var(--bg-header) !important;
        border-bottom: 1px solid var(--border-color) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .ticker-stats-bar::-webkit-scrollbar {
        display: none !important;
    }

    .ticker-stats-bar .active-pair-info {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-right: 0 !important;
        padding-bottom: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .ticker-stats-bar .active-pair-info .pair-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .ticker-stats-bar .active-pair-info .highlight-price {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-left: 2px !important;
        white-space: nowrap !important;
    }

    .ticker-header-divider {
        width: 1px !important;
        height: 16px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        margin: 0 4px !important;
        flex-shrink: 0 !important;
    }

    .stats-grid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        width: auto !important;
        border: none !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .stat-item {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 !important;
        border: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .stat-item .lbl {
        font-size: 11px !important;
        color: var(--text-secondary) !important;
        white-space: nowrap !important;
    }

    .stat-item .val {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
    }

    .chart-container-panel {
        height: auto !important;
        min-height: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: var(--bg-workspace) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .chart-toolbar {
        height: 32px !important;
        padding: 0 12px !important;
        border-bottom: 1px solid var(--border-color) !important;
        background-color: rgba(255, 255, 255, 0.01) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .chart-fullscreen-btn {
        display: none !important;
    }

    .copy-trading-switch-wrapper {
        display: none !important;
    }

    .canvas-wrapper {
        height: 420px !important;
        min-height: 360px !important;
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #exchangeChart {
        width: 100% !important;
    }

    .chart-stats-overlay:not(.hidden) {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 6px !important;
        padding: 0 !important;
        background: transparent !important;
        border-bottom: none !important;
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        z-index: 100 !important;
        pointer-events: none !important;
        scrollbar-width: none !important;
    }

    .chart-stats-overlay::-webkit-scrollbar {
        display: none !important;
    }

    .overlay-stat-card {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 4px 8px !important;
        background: rgba(13, 20, 33, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        pointer-events: auto !important;
        flex-shrink: 0 !important;
    }

    .overlay-stat-label {
        font-size: 8px !important;
        color: var(--text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
    }

    .overlay-stat-card .val {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }

    .bottom-terminal-panel {
        height: auto !important;
        min-height: unset !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: var(--bg-workspace) !important;
    }

    .terminal-tab-header {
        flex-direction: row !important;
        height: 38px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    .terminal-tab-header::-webkit-scrollbar {
        display: none !important;
    }
    
    .terminal-tab-header .tab-buttons {
        display: flex !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    .term-tab {
        padding: 0 12px !important;
        font-size: 11.5px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .copy-trading-switch-wrapper {
        display: none !important;
    }

    .terminal-expand-btn {
        display: none !important;
    }

    .copy-trading-switch-wrapper .header-divider-vertical:last-of-type {
        display: none !important;
    }

    /* Drawer Auth Section styling */
    .drawer-auth-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 4px;
        margin-top: 10px;
    }

    .drawer-login-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.02);
        color: var(--text-primary) !important;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    .drawer-login-btn:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .drawer-register-btn {
        display: block;
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 6px;
        background: var(--color-blue);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        box-sizing: border-box;
    }

    .drawer-register-btn:hover {
        background: #1d4ed8;
    }

    /* Hide auth buttons in main header on very small screens */
    @media (max-width: 576px) {
        .app-header .login-btn {
            display: inline-flex !important;
            font-size: 11px !important;
            padding: 0 10px !important;
            height: 28px !important;
            margin-right: 0 !important;
        }
        .app-header .login-btn ion-icon {
            font-size: 14px !important;
            margin-right: 4px !important;
        }
        .lang-selector-globe {
            height: 28px !important;
            padding: 0 8px !important;
            margin-left: 6px !important;
            font-size: 11px !important;
        }
        .lang-selector-globe .flag-circle {
            width: 14px !important;
            height: 14px !important;
        }
        .lang-selector-globe ion-icon {
            font-size: 8px !important;
        }
        .lang-dropdown {
            top: 32px !important;
        }
        .app-header .login-btn {
            display: none !important;
        }
        .app-header .create-account-btn {
            padding: 0 10px !important;
            font-size: 11px !important;
            height: 28px !important;
            border-radius: 6px !important;
            display: flex !important;
        }
        .app-header .web3-connect-btn {
            display: flex !important;
            padding: 6px 10px !important;
            font-size: 11px !important;
            border-radius: 6px !important;
            margin-right: 4px !important;
            height: auto !important;
            min-height: 0 !important;
        }
        .app-header .web3-connect-btn span.disconnect-label {
            display: none !important;
        }
    }

    /* Scrollable tables inside tab panels */
    .terminal-body {
        overflow-x: auto !important;
        overflow-y: auto !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .terminal-body:has(.no-history-row) {
        overflow-x: hidden !important;
    }

    .history-table,
    .forecast-history-table {
        min-width: 800px !important;
        width: 800px !important;
    }

    .history-table:has(.no-history-row),
    .forecast-history-table:has(.no-history-row) {
        min-width: 100% !important;
        width: 100% !important;
    }

    .history-table:has(.no-history-row) thead,
    .forecast-history-table:has(.no-history-row) thead {
        display: none !important;
    }
}

/* Markets Page Mobile Layout */
@media (max-width: 992px) {
    /* Simplified mobile footer bar */
    .footer-separator,
    .footer-links,
    .footer-company-docs {
        display: none !important;
    }

    .footer-status-indicators {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

    .footer-status-indicators .status-indicator-link {
        display: none !important;
    }

    .footer-status-indicators .status-indicator {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 11px !important;
        color: var(--text-secondary) !important;
    }

    .footer-status-indicators .status-indicator .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        display: inline-block !important;
    }

    .footer-status-indicators .status-indicator .dot.green {
        background-color: #0ecb81 !important;
        box-shadow: 0 0 6px #0ecb81 !important;
    }

    .footer-status-bar {
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        flex-direction: row !important;
        height: 100% !important;
    }

    .app-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        z-index: 2100 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: var(--bg-header) !important;
        border-top: none !important;
        padding: 0 12px !important;
    }

    .markets-container {
        padding: 16px 12px !important;
        height: auto !important;
        overflow: auto !important;
    }

    .markets-header-section {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .markets-search-wrapper {
        width: 100% !important;
    }

    .markets-search-input {
        width: 100% !important;
    }

    .markets-tabs-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .markets-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-top: 12px;
    }

    .markets-table {
        min-width: 600px;
    }
}

/* Informational & Support Pages (Fees, Help Docs, API Docs) Mobile Layout */
@media (max-width: 992px) {
    /* Docs Layout Adjustments */
    .docs-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: auto !important;
        margin-top: 60px !important;
        padding: 12px !important;
        gap: 20px !important;
    }

    .docs-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 12px 0 20px 0 !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
    }

    .docs-content {
        padding: 12px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grid layout adjustments */
    .fee-tiers-grid,
    .api-features-grid,
    .status-metrics-grid,
    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .support-card {
        padding: 20px 16px !important;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    /* Tables scrollability */
    .table-container {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px;
    }

    .params-table {
        display: table !important;
        width: 100% !important;
        min-width: 700px !important;
    }

    .endpoint-url {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 12px !important;
        word-break: break-all !important;
    }
}

/* ==========================================================================
   MOBILE UX IMPROVEMENTS (Change Badges, Floating Actions & Lists)
   ========================================================================== */

.change-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}
.change-badge.positive {
    background: rgba(14, 203, 129, 0.15);
    color: #0ecb81;
}
.change-badge.negative {
    background: rgba(240, 56, 85, 0.15);
    color: #f03855;
}

.mobile-floating-action-bar {
    display: none;
}

.history-expand-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 12px;
    width: 100%;
    background: transparent;
}
.history-expand-wrapper button {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.history-expand-wrapper button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.history-expand-wrapper button ion-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
}

@media (max-width: 992px) {
    /* Main body spacing for bottom floating actions */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.has-floating-bar {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mobile-floating-action-bar {
        position: fixed !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; /* height of mobile bottom nav + safe area */
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: rgba(11, 14, 20, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-top: 1px solid var(--border-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 0 16px !important;
        z-index: 2050 !important;
        box-sizing: border-box !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    .mobile-floating-action-bar.hidden {
        display: none !important;
    }
    .mobile-action-btn {
        flex: 1;
        height: 42px;
        border: none;
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        cursor: pointer;
        transition: transform 0.1s ease, filter 0.2s ease;
    }
    .mobile-action-btn:active {
        transform: scale(0.98);
    }
    .mobile-action-btn.buy {
        background-color: var(--color-blue);
        box-shadow: 0 4px 12px rgba(43, 102, 255, 0.2);
    }
    .mobile-action-btn.sell {
        background-color: var(--color-sell);
        box-shadow: 0 4px 12px rgba(246, 70, 93, 0.2);
    }

    /* Horizontal scroll lists cleanups */
    .chart-stats-overlay::-webkit-scrollbar,
    .technical-indicators-display::-webkit-scrollbar {
        display: none !important;
    }
    .chart-stats-overlay,
    .technical-indicators-display {
        scrollbar-width: none !important;
    }

    .technical-indicators-display {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
        width: auto !important;
        max-width: 100% !important;
        padding: 2px 0 !important;
    }
}

/* ==========================================================================
   GLOBAL NEWS TICKER SYSTEM
   ========================================================================== */
.news-ticker-bar {
    background: var(--bg-workspace) !important;
    border-bottom: 1px solid var(--border-color);
    height: 28px;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 11px;
    font-family: var(--font-sans);
    position: sticky;
    top: var(--header-height);
    z-index: 900;
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .news-ticker-bar {
        height: 22px !important;
    }
    .ticker-item {
        padding: 0 15px !important;
    }
    .ticker-item span {
        font-size: 9.5px !important;
    }
    .ticker-item .ticker-tag {
        font-size: 9.5px !important;
    }
}

.ticker-label {
    background: var(--bg-header) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    z-index: 10;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    gap: 6px;
}

.ticker-label-dot {
    width: 4px;
    height: 4px;
    background-color: var(--text-muted);
    border-radius: 50%;
    display: inline-block;
}

.ticker-content-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%;
}

.ticker-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 100%;
    animation: tickerMarquee 150s linear infinite;
}

.ticker-content-wrapper:hover .ticker-content {
    animation-play-state: paused;
}

@keyframes tickerMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

.ticker-item {
    display: flex;
    align-items: center;
    padding: 0 30px;
    color: var(--text-secondary);
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ticker-item:hover span {
    color: var(--text-primary) !important;
}

.ticker-item:hover .ticker-tag.positive {
    color: var(--color-buy-hover, #02d899) !important;
}
.ticker-item:hover .ticker-tag.negative {
    color: var(--color-sell-hover, #ff4d6a) !important;
}
.ticker-item:hover .ticker-tag.neutral {
    color: var(--text-primary, #eaecef) !important;
}

.ticker-item::after {
    content: "|";
    color: var(--text-muted);
    position: absolute;
    right: 0;
    opacity: 0.4;
}

.ticker-item span {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 11px;
}

.ticker-item .ticker-tag {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticker-item .ticker-tag.positive {
    color: var(--color-buy, #00c087) !important;
}
.ticker-item .ticker-tag.negative {
    color: var(--color-sell, #f03855) !important;
}
.ticker-item .ticker-tag.neutral {
    color: var(--text-secondary, #848e9c) !important;
}

.ticker-item .ticker-tag::after {
    content: " :";
    color: var(--text-muted);
    margin-right: 8px;
}

@media (max-width: 992px) {
    .ticker-label {
        display: none !important;
    }
}


/* --- Premium Glassmorphism Auth/Wallet/Settings Modals --- */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 7, 12, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.auth-modal-content {
    background: linear-gradient(135deg, rgba(17, 22, 32, 0.95) 0%, rgba(10, 14, 22, 0.98) 100%);
    border: 1px solid rgba(43, 102, 255, 0.2);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    padding: 32px;
    position: relative;
    font-family: var(--font-sans);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-modal-overlay:not(.hidden) .auth-modal-content {
    transform: scale(1) translateY(0);
}

.auth-modal-content.wallet {
    max-width: 680px;
}

.auth-modal-content.settings {
    max-width: 480px;
}

.auth-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.auth-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.auth-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.auth-modal-close:hover {
    color: #ffffff;
}

/* Forms styling */
.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.auth-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #8a919e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: #5f6673;
}

.auth-input {
    width: 100%;
    background: #090d14;
    border: 1px solid #1a222f;
    border-radius: 8px;
    padding: 12px 14px 12px 42px;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 14px;
    transition: all 0.15s ease;
}

.auth-input:focus {
    border-color: var(--color-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 102, 255, 0.15);
}

/* Password Strength Meter */
.password-strength-container {
    margin-top: -10px;
    margin-bottom: 18px;
}

.strength-bar-wrapper {
    display: flex;
    gap: 4px;
    height: 4px;
    margin-bottom: 8px;
}

.strength-segment {
    flex: 1;
    background: #1c2433;
    border-radius: 2px;
    transition: background 0.2s ease;
}

/* Strength Colors */
.strength-weak { background: #f03855; }
.strength-medium { background: #ff9f1a; }
.strength-strong { background: #ffc000; }
.strength-excellent { background: #00c087; }

.strength-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.strength-tip-item {
    font-size: 11px;
    color: #5f6673;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.strength-tip-item.valid {
    color: #00c087;
}

.strength-tip-item ion-icon {
    font-size: 12px;
}

/* Checkboxes */
.auth-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    cursor: pointer;
}

.auth-checkbox-row input[type="checkbox"] {
    accent-color: var(--color-blue);
    margin-top: 3px;
    cursor: pointer;
}

.auth-checkbox-label {
    font-size: 12px;
    color: #8a919e;
    line-height: 1.4;
    user-select: none;
}

.auth-checkbox-label a {
    color: var(--color-blue);
    text-decoration: none;
}

.auth-checkbox-label a:hover {
    text-decoration: underline;
}

/* Submit Button */
.auth-submit-btn {
    width: 100%;
    background: var(--color-blue);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
    box-shadow: none;
}

.auth-submit-btn:hover {
    background-color: var(--color-blue-hover);
    transform: none;
    box-shadow: none;
}

.auth-submit-btn:active {
    transform: none;
}

.auth-submit-btn:disabled {
    background: #1c2433;
    color: #5f6673;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-switch-link {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #ffffff;
}

.auth-switch-link span[onclick] {
    color: var(--color-blue);
    cursor: pointer;
    font-weight: 600;
}

.auth-switch-link span[onclick]:hover {
    text-decoration: underline;
}

/* OTP (Verification) Inputs */
.otp-inputs-wrapper {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
}

.otp-input {
    width: 56px;
    height: 56px;
    background: #090d14;
    border: 1px solid #1a222f;
    border-radius: 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-sans);
    transition: all 0.15s ease;
}

.otp-input:focus {
    border-color: var(--color-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 102, 255, 0.15);
}

.otp-attempts-left {
    text-align: center;
    font-size: 12px;
    color: #ff4a68;
    margin-bottom: 12px;
    font-weight: 500;
}

.otp-resend-container {
    text-align: center;
    font-size: 13px;
    color: #8a919e;
}

.otp-resend-btn {
    color: var(--color-blue);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.otp-resend-btn:disabled {
    color: #5f6673;
    cursor: not-allowed;
    font-weight: 400;
}

/* Dynamic Header Buttons */
.header-wallet-btn, .header-user-btn,
.drawer-wallet-btn, .drawer-user-btn {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-wallet-btn {
    background: rgba(43, 102, 255, 0.08);
    border: 1px solid rgba(43, 102, 255, 0.2);
    color: var(--color-blue);
    padding: 0 14px;
}

.header-wallet-btn:hover {
    background: rgba(43, 102, 255, 0.15);
    color: #ffffff;
}

.header-user-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: #8a919e;
    width: 32px;
    padding: 0;
    margin-left: 8px;
}

.header-user-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: #5f6673;
}

/* Mobile Drawer Buttons */
.drawer-wallet-btn {
    width: 100%;
    background: rgba(43, 102, 255, 0.08);
    border: 1px solid rgba(43, 102, 255, 0.2);
    color: var(--color-blue);
    height: 40px;
    font-size: 14px;
    margin-bottom: 8px;
}

.drawer-user-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: #8a919e;
    height: 40px;
    font-size: 14px;
}

/* Wallet Table & Balance styling */
.wallet-balance-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a222f;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.wallet-balance-label {
    font-size: 12px;
    color: #8a919e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.wallet-balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.wallet-balance-sub {
    font-size: 14px;
    color: #5f6673;
}

.wallet-assets-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-assets-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.wallet-assets-table th, .wallet-assets-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #1a222f;
    font-size: 13px;
}

.wallet-assets-table th {
    color: #8a919e;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.wallet-assets-table td {
    color: #ffffff;
}

.wallet-assets-table .asset-name-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.wallet-assets-table .asset-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.wallet-actions-row {
    display: flex;
    gap: 12px;
}

.wallet-action-btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    border: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.wallet-action-btn.deposit {
    background: var(--color-blue);
    color: white;
}

.wallet-action-btn.deposit:hover {
    background: var(--color-blue-hover);
}

.wallet-action-btn.withdraw {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #1a222f;
    color: #ffffff;
}

.wallet-action-btn.withdraw:hover {
    background: rgba(255, 255, 255, 0.08);
}

.wallet-action-btn.trade {
    background: rgba(43, 102, 255, 0.08);
    border: 1px solid rgba(43, 102, 255, 0.2);
    color: var(--color-blue);
}

.wallet-action-btn.trade:hover {
    background: rgba(43, 102, 255, 0.15);
}

/* Secondary Views: Deposit and Withdrawal Forms */
.wallet-subview {
    margin-top: 12px;
}

.wallet-back-btn {
    background: none;
    border: none;
    color: #8a919e;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

.wallet-back-btn:hover {
    color: #ffffff;
}

.deposit-qr-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-qr-card img {
    max-width: 100%;
    max-height: 100%;
}

.deposit-address-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a222f;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: monospace;
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 20px;
}

.deposit-copy-btn {
    background: none;
    border: none;
    color: var(--color-blue);
    font-size: 16px;
    cursor: pointer;
}

.deposit-copy-btn:hover {
    color: #ffffff;
}

/* Big Logout Button */
.settings-logout-btn {
    width: 100%;
    background: rgba(240, 56, 85, 0.08);
    border: 1px solid rgba(240, 56, 85, 0.2);
    color: #f03855;
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 24px;
    transition: all 0.15s ease;
}

.settings-logout-btn:hover {
    background: #f03855;
    color: white;
}

/* Prevent iOS mobile keyboard zoom by setting input sizes to at least 16px */
@media screen and (max-width: 768px) {
    input, select, textarea, .custom-select-trigger, .custom-option {
        font-size: 16px !important;
    }
}

/* Cookie Consent Banner Styling */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
    background: #0f141d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    transform: translateY(100px);
    opacity: 0;
}
.cookie-banner.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
.cookie-banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: white;
    font-family: var(--font-sans);
}
.cookie-banner-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}
.cookie-banner-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.cookie-banner-btn-later {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
}
.cookie-banner-btn-later:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}
.cookie-banner-btn-accept {
    background: var(--color-blue);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-sans);
}
.cookie-banner-btn-accept:hover {
    background: var(--color-blue-hover);
}

@media (max-width: 480px) {
    .cookie-banner {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none !important;
    }
}

/* Light Theme Cookie Consent Banner & Mobile Action Bar Overrides */
body.light-theme .cookie-banner {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
body.light-theme .cookie-banner-title {
    color: #1e2329 !important;
}
body.light-theme .cookie-banner-btn-later {
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #5e6673 !important;
}
body.light-theme .cookie-banner-btn-later:hover {
    color: #1e2329 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .mobile-floating-action-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
}
body.light-theme .mobile-action-btn.buy {
    box-shadow: 0 4px 12px rgba(43, 102, 255, 0.15) !important;
}
body.light-theme .mobile-action-btn.sell {
    box-shadow: 0 4px 12px rgba(232, 44, 79, 0.15) !important;
}
body.light-theme .premium-review-btn:disabled,
body.light-theme .premium-review-btn.disabled {
    background: #e4e7ec !important;
    color: #848e9c !important;
}

/* Footer & Switch overrides */
body.light-theme .footer-company-docs .company-text {
    color: var(--text-secondary) !important;
}
body.light-theme .footer-company-docs .footer-separator {
    color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .footer-link:hover,
body.light-theme .footer-dropdown-toggle:hover,
body.light-theme .status-indicator-link:hover {
    color: var(--text-primary) !important;
}
body.light-theme .switch-toggle .switch-slider {
    background-color: #e3e6e9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .switch-toggle .switch-slider:before {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .switch-toggle input:checked + .switch-slider {
    background-color: rgba(43, 102, 255, 0.2) !important;
    border-color: rgba(43, 102, 255, 0.4) !important;
}
body.light-theme .switch-toggle input:checked + .switch-slider:before {
    background-color: var(--color-blue) !important;
    box-shadow: none !important;
}
body.light-theme .demo-toggle-wrapper input:checked + .switch-slider {
    background-color: rgba(255, 159, 10, 0.2) !important;
    border-color: rgba(255, 159, 10, 0.4) !important;
}
body.light-theme .demo-toggle-wrapper input:checked + .switch-slider:before {
    background-color: #ff9f0a !important;
    box-shadow: none !important;
}
body.light-theme .copy-trading-switch-wrapper input:checked ~ .switch-label {
    color: var(--text-primary) !important;
}

/* Inactive leverage buttons in light mode */
body.light-theme .premium-leverage-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
}
body.light-theme .premium-leverage-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--text-primary) !important;
}
body.light-theme .premium-leverage-btn.active {
    background: rgba(43, 102, 255, 0.1) !important;
    border-color: rgba(43, 102, 255, 0.35) !important;
    color: #2b66ff !important;
    box-shadow: none !important;
}

/* Additional Light Theme Accessibility Patches */
body.light-theme .app-header .login-btn,
body.light-theme .login-btn {
    color: var(--text-primary) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme .app-header .login-btn ion-icon,
body.light-theme .login-btn ion-icon {
    color: var(--text-primary) !important;
}
body.light-theme .app-header .login-btn:hover,
body.light-theme .login-btn:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--text-primary) !important;
}
body.light-theme .drawer-login-btn {
    color: var(--text-primary) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme .drawer-login-btn ion-icon {
    color: var(--text-primary) !important;
}
body.light-theme .drawer-login-btn:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--text-primary) !important;
}
body.light-theme .chart-stats-overlay {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .status-indicator.latency {
    color: #848e9c !important;
}
body.light-theme .status-indicator.latency ion-icon {
    color: var(--color-blue) !important;
}
body.light-theme .lang-selector-globe {
    color: var(--text-primary) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}
body.light-theme .lang-selector-globe:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--text-primary) !important;
}
body.light-theme .lang-selector-globe ion-icon {
    color: var(--text-primary) !important;
}

body:has(.auth-page-wrapper) #global-header,
body:has(.auth-page-wrapper) #global-footer,
body:has(.auth-page-wrapper) #global-news-ticker,
body:has(.auth-page-wrapper) .news-ticker-bar,
body:has(.auth-page-wrapper) .footer-seo-marquee-wrapper,
body.auth-page #global-header,
body.auth-page #global-footer,
body.auth-page #global-news-ticker,
body.auth-page .news-ticker-bar,
body.auth-page .footer-seo-marquee-wrapper {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Light Theme: Auth Modal & Login Page Overrides */
body.light-theme.auth-page-body {
    background: radial-gradient(circle at 50% 50%, rgba(43, 102, 255, 0.04) 0%, transparent 60%),
                radial-gradient(circle at 0% 0%, rgba(43, 102, 255, 0.05) 0%, transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(0, 192, 135, 0.03) 0%, transparent 45%),
                #f6f8fa !important;
}
body.light-theme .auth-card,
body.light-theme .auth-modal-content {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .auth-card-title,
body.light-theme .auth-modal-title {
    color: #1e2329 !important;
}
body.light-theme .auth-form-label {
    color: #5e6673 !important;
}
body.light-theme .auth-input {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .auth-input:focus {
    background: #ffffff !important;
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 2px rgba(43, 102, 255, 0.1) !important;
}
body.light-theme .password-toggle-icon {
    color: #848e9c !important;
}
body.light-theme .password-toggle-icon:hover {
    color: #1e2329 !important;
}
body.light-theme .auth-switch-link,
body.light-theme .auth-switch-link-below {
    color: #5e6673 !important;
}
body.light-theme .strength-segment {
    background: #e4e7ec !important;
}
body.light-theme .strength-tip-item {
    color: #848e9c !important;
}
body.light-theme .strength-tip-item.valid {
    color: #00c087 !important;
}
body.light-theme .auth-checkbox-label {
    color: #5e6673 !important;
}
body.light-theme .otp-input,
body.light-theme .totp-input {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .otp-input:focus,
body.light-theme .totp-input:focus {
    background: #ffffff !important;
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 2px rgba(43, 102, 255, 0.1) !important;
}
body.light-theme .otp-resend-container {
    color: #5e6673 !important;
}
.back-to-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a919e;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 8px 16px;
    backdrop-filter: blur(8px);
    cursor: pointer;
    font-family: var(--font-sans);
}

.back-to-home-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}

body.light-theme .back-to-home-link {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
    color: #5e6673 !important;
}
body.light-theme .back-to-home-link:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1e2329 !important;
}
body.light-theme .auth-submit-btn:disabled {
    background: #e4e7ec !important;
    color: #848e9c !important;
}

/* Light Theme: API Docs & Fees Pages Overrides */
body.light-theme .docs-h1 {
    background: none !important;
    -webkit-text-fill-color: #1e2329 !important;
    color: #1e2329 !important;
}
body.light-theme .docs-h2 {
    color: #1e2329 !important;
}
body.light-theme .docs-text strong {
    color: #1e2329 !important;
}
body.light-theme .params-table th {
    color: #5e6673 !important;
    background: #f1f3f5 !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .params-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    color: #1e2329 !important;
}
body.light-theme .params-table td[style*="color: white"],
body.light-theme .params-table td[style*="color:white"] {
    color: #1e2329 !important;
}
body.light-theme .endpoint-url {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .endpoint-url .copy-btn {
    color: #848e9c !important;
}
body.light-theme .endpoint-url .copy-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .docs-sidebar {
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .sidebar-link {
    color: #5e6673 !important;
}
body.light-theme .sidebar-link:hover,
body.light-theme .sidebar-link.active {
    color: #2b66ff !important;
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .code-tab-btn {
    color: #848e9c !important;
}
body.light-theme .code-tab-btn.active,
body.light-theme .code-tab-btn:hover {
    color: #1e2329 !important;
}
body.light-theme .code-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .code-wrapper {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme h3[style*="color: white"],
body.light-theme h3[style*="color:white"],
body.light-theme h3[style*="color: #ffffff"],
body.light-theme h3[style*="color:#ffffff"],
body.light-theme h4[style*="color: white"],
body.light-theme h4[style*="color:white"],
body.light-theme span[style*="color: white"],
body.light-theme span[style*="color:white"] {
    color: #1e2329 !important;
}
body.light-theme .back-home-btn {
    color: #5e6673 !important;
}
body.light-theme .back-home-btn:hover {
    color: #2b66ff !important;
}
body.light-theme .console-panel {
    background: #f8f9fa !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .support-card-section {
    background: rgba(43, 102, 255, 0.04) !important;
    border-color: rgba(43, 102, 255, 0.12) !important;
}

/* Light Theme: Futures Spec Page Overrides */
body.light-theme .specs-hero h1 {
    background: none !important;
    -webkit-text-fill-color: #1e2329 !important;
    color: #1e2329 !important;
}
body.light-theme .pair-btn:hover {
    color: #2b66ff !important;
    border-color: #2b66ff !important;
}
body.light-theme .pair-btn.active {
    background: #2b66ff !important;
    border-color: #2b66ff !important;
    color: #ffffff !important;
}
body.light-theme .specs-table th {
    background: #f1f3f5 !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .specs-table td {
    color: #1e2329 !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .specs-table tr:hover td {
    background: #f8f9fa !important;
}
body.light-theme .param-name {
    color: #5e6673 !important;
}
body.light-theme .param-value.highlight {
    color: #0ecb81 !important;
}
body.light-theme .info-body h3 {
    color: #1e2329 !important;
}
body.light-theme .info-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light Theme: Profile Log Out Hover Override */
body.light-theme .settings-logout-btn:hover {
    background: #f03855 !important;
    color: #ffffff !important;
}

/* Light Theme: Daily PnL Statistics Modals Overrides */
body.light-theme .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .modal-header h3 {
    color: #1e2329 !important;
}
body.light-theme .modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}
body.light-theme .summary-card {
    background: #f8f9fa !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .summary-card .val {
    color: #1e2329 !important;
}
body.light-theme .summary-card .val.positive {
    color: #00c087 !important;
}
body.light-theme .summary-card .val.negative {
    color: #f03855 !important;
}
body.light-theme .daily-table-container {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
}
body.light-theme .daily-stats-table th {
    background: #f1f3f5 !important;
    color: #5e6673 !important;
}
body.light-theme .daily-stats-table th, 
body.light-theme .daily-stats-table td {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e2329 !important;
}
body.light-theme .daily-stats-table tbody tr:hover {
    background: #f8f9fa !important;
}
body.light-theme .algorithm-update-divider {
    background: rgba(43, 102, 255, 0.08) !important;
}
body.light-theme .algorithm-update-divider span {
    color: #2b66ff !important;
}

/* Fullscreen Chart Layout & Sidebar Styles */
.chart-main-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    width: 100%;
}

.chart-fullscreen-sidebar {
    display: none;
    width: 300px;
    border-right: 1px solid var(--border-color);
    background: #0f141d;
    flex-shrink: 0;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
    z-index: 10;
}

body.light-theme .chart-fullscreen-sidebar {
    background: #ffffff;
}

/* Fullscreen Chart Overrides */
body.chart-is-fullscreen .chart-container-panel.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: var(--bg-workspace) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
}

body.chart-is-fullscreen .chart-container-panel.fullscreen .canvas-wrapper {
    height: 100% !important;
    flex: 1 !important;
}

body.chart-is-fullscreen .chart-container-panel.fullscreen .chart-stats-overlay:not(.hidden) {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    z-index: 100 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: calc(100% - 20px) !important;
}

/* Custom styling for quiet hours time inputs */
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

body.light-theme input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0);
}

/* Direction vertical indicator bar for trade history */
.history-table td.time-cell {
    position: relative;
    padding-left: 24px !important;
}

.trade-direction-indicator {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.trade-direction-indicator.up {
    background-color: var(--color-buy);
    box-shadow: 0 0 8px var(--color-buy);
}

.trade-direction-indicator.down {
    background-color: var(--color-sell);
    box-shadow: 0 0 8px var(--color-sell);
}

.custom-option.disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* DEX Mode Custom CSS Extensions */
.dex-mode-active .network-select-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(43, 102, 255, 0.4) !important;
}

.dex-mode-active .token-select-trigger:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.dex-mode-active .swap-direction-switch:hover {
    transform: scale(1.1) rotate(180deg);
    color: #fff !important;
    border-color: rgba(43, 102, 255, 0.5) !important;
}

.dex-mode-active .slippage-btn.active {
    background: var(--color-blue) !important;
    color: #fff !important;
    border-color: var(--color-blue) !important;
    font-weight: 700;
}

.dex-mode-active .slippage-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
}

.dex-mode-active .wallet-option-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(43, 102, 255, 0.4) !important;
}

.dex-mode-active .token-select-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: rgba(255, 255, 255, 0.01) !important;
    margin-bottom: 6px !important;
}

.dex-mode-active .token-select-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(43, 102, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

.dex-mode-active .pair-row.active {
    background: rgba(43, 102, 255, 0.08) !important;
    border-left: 3px solid var(--color-blue) !important;
}

.dex-mode-active .pair-row:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dex-mode-active #dex-action-btn:hover:not(:disabled) {
    box-shadow: none !important;
}

.dex-mode-active #dex-action-btn:active:not(:disabled) {
    box-shadow: none !important;
}

/* Pulse animation for live updates */
@keyframes livePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }
}

.dex-mode-active .live-pulse-dot {
    animation: livePulse 2s infinite;
}

/* Custom scrollbars for left lists */
#dex-token-list-container::-webkit-scrollbar {
    width: 4px;
}
#dex-token-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Responsive workspace heights for DEX */
@media (max-width: 900px) {
    .dex-mode-active #dex-column-markets,
    .dex-mode-active #dex-column-chart,
    .dex-mode-active #dex-column-trade {
        display: none !important;
    }
    
    .dex-mode-active #dex-column-markets.mobile-active,
    .dex-mode-active #dex-column-chart.mobile-active,
    .dex-mode-active #dex-column-trade.mobile-active {
        display: flex !important;
        flex: 1 !important;
    }
}

/* Fallback stock token logo */
.token-logo-placeholder {
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Hide scrollbars for slippage scroll container */
.slippage-scroll-container::-webkit-scrollbar {
    display: none !important;
}
.slippage-scroll-container {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ==========================================================================
   PREMIUM BUTTON STYLING UPGRADE
   ========================================================================== */

/* 1. Primary Action Blue Buttons */
.btn-primary,
.btn-create-link,
.btn-pay-now,
#dex-action-btn,
.create-account-btn,
.drawer-register-btn,
.header-wallet-btn,
.drawer-wallet-btn,
.console-btn,
.submit-btn,
.security-row-btn,
#add-token-wallet-btn,
.auth-submit-btn,
.buy-submit-btn,
.buy-shares-btn-wallet,
.premium-leverage-btn.active,
.tpsl-quick-btn.active,
.premium-margin-tab.active,
.premium-percent-btn.active,
.partial-close-btn.active,
.account-tab.active,
.asset-action-btn.trade-btn,
.task-btn:not(.claim):not(.disabled):not(.claimed-btn),
.filter-btn.active,
.slippage-btn.active,
.tab-btn.active,
.code-tab-btn.active {
    background: linear-gradient(180deg, #0055ff 0%, #0033cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 85, 255, 0.4) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Specific size adjustments for Wallet Button in Header */
.header-wallet-btn {
    height: 36px !important;
    padding: 0 18px !important;
    gap: 8px !important;
}

.btn-primary:hover:not(:disabled),
#dex-action-btn:hover:not(:disabled),
.create-account-btn:hover:not(:disabled),
.drawer-register-btn:hover:not(:disabled),
.header-wallet-btn:hover:not(:disabled),
.drawer-wallet-btn:hover:not(:disabled),
.console-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.security-row-btn:hover:not(:disabled),
#add-token-wallet-btn:hover:not(:disabled),
.auth-submit-btn:hover:not(:disabled),
.buy-submit-btn:hover:not(:disabled),
.buy-shares-btn-wallet:hover:not(:disabled),
.premium-leverage-btn.active:hover,
.tpsl-quick-btn.active:hover,
.premium-margin-tab.active:hover,
.premium-percent-btn.active:hover,
.partial-close-btn.active:hover,
.account-tab.active:hover,
.asset-action-btn.trade-btn:hover:not(:disabled),
.task-btn:not(.claim):not(.disabled):not(.claimed-btn):hover,
.filter-btn.active:hover,
.slippage-btn.active:hover,
.tab-btn.active:hover,
.code-tab-btn.active:hover {
    background: linear-gradient(180deg, #1a66ff 0%, #0044ff 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 85, 255, 0.55) !important;
    color: #ffffff !important;
    transform: none !important;
}

.btn-primary:active:not(:disabled),
#dex-action-btn:active:not(:disabled),
.create-account-btn:active:not(:disabled),
.drawer-register-btn:active:not(:disabled),
.header-wallet-btn:active:not(:disabled),
.drawer-wallet-btn:active:not(:disabled),
.console-btn:active:not(:disabled),
.submit-btn:active:not(:disabled),
.security-row-btn:active:not(:disabled),
#add-token-wallet-btn:active:not(:disabled),
.auth-submit-btn:active:not(:disabled),
.premium-leverage-btn.active:active,
.tpsl-quick-btn.active:active,
.premium-margin-tab.active:active,
.premium-percent-btn.active:active,
.partial-close-btn.active:active,
.account-tab.active:active,
.asset-action-btn.trade-btn:active:not(:disabled),
.task-btn:not(.claim):not(.disabled):not(.claimed-btn):active,
.filter-btn.active:active,
.slippage-btn.active:active,
.tab-btn.active:active,
.code-tab-btn.active:active {
    box-shadow: 0 2px 8px rgba(0, 85, 255, 0.3) !important;
    transform: none !important;
}

.btn-primary:disabled,
#dex-action-btn:disabled,
.create-account-btn:disabled,
.drawer-register-btn:disabled,
.header-wallet-btn:disabled,
.drawer-wallet-btn:disabled,
.console-btn:disabled,
.submit-btn:disabled,
.security-row-btn:disabled,
.btn-submit-order:disabled,
#add-token-wallet-btn:disabled,
.auth-submit-btn:disabled,
.premium-review-btn.buy.disabled,
.premium-review-btn.buy:disabled,
.mobile-action-btn.buy:disabled,
.asset-action-btn.trade-btn:disabled,
.task-btn.disabled,
.task-btn:disabled {
    background: #1c2433 !important;
    color: #5f6673 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 1.5. Green Action Buttons (Buy, Open Long) */
.btn-submit-order:not(.sell),
.premium-dir-tab.buy.active,
.premium-review-btn.buy,
.mobile-action-btn.buy {
    background: linear-gradient(180deg, #00c087 0%, #009668 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 192, 135, 0.4) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-submit-order:not(.sell):hover:not(:disabled),
.premium-dir-tab.buy.active:hover,
.premium-review-btn.buy:hover:not(.disabled):not(:disabled),
.mobile-action-btn.buy:hover:not(:disabled) {
    background: linear-gradient(180deg, #02d899 0%, #00ab78 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 192, 135, 0.55) !important;
    color: #ffffff !important;
    transform: none !important;
}

.btn-submit-order:not(.sell):active:not(:disabled),
.premium-dir-tab.buy.active:active,
.premium-review-btn.buy:active:not(.disabled):not(:disabled),
.mobile-action-btn.buy:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(0, 192, 135, 0.3) !important;
    transform: none !important;
}

/* 2. Red Action Buttons (Sell, Close Position Confirm) */
.btn-submit-order.sell,
#close-confirm-action-btn,
.premium-dir-tab.sell.active,
.premium-review-btn.sell,
.mobile-action-btn.sell {
    background: linear-gradient(180deg, #ff3b57 0%, #cc0022 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(255, 59, 87, 0.4) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-submit-order.sell:hover:not(:disabled),
#close-confirm-action-btn:hover:not(:disabled),
.premium-dir-tab.sell.active:hover,
.premium-review-btn.sell:hover:not(.disabled):not(:disabled),
.mobile-action-btn.sell:hover:not(:disabled) {
    background: linear-gradient(180deg, #ff5c73 0%, #ee002b 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 59, 87, 0.55) !important;
    color: #ffffff !important;
    transform: none !important;
}

.btn-submit-order.sell:active:not(:disabled),
#close-confirm-action-btn:active:not(:disabled),
.premium-dir-tab.sell.active:active,
.premium-review-btn.sell:active:not(.disabled):not(:disabled),
.mobile-action-btn.sell:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(255, 59, 87, 0.3) !important;
    transform: none !important;
}

.btn-submit-order.sell:disabled,
#close-confirm-action-btn:disabled,
.premium-review-btn.sell.disabled,
.premium-review-btn.sell:disabled,
.mobile-action-btn.sell:disabled {
    background: #1c2433 !important;
    color: #5f6673 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2.5 Loading states and spinners for order placement & position closure */
.inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: inlineSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}

@keyframes inlineSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.premium-review-btn.loading,
.premium-review-btn.loading:disabled {
    opacity: 0.85 !important;
    cursor: wait !important;
    pointer-events: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.premium-review-btn.buy.loading,
.premium-review-btn.buy.loading:disabled {
    background: linear-gradient(180deg, #00c087 0%, #009668 100%) !important;
}

.premium-review-btn.sell.loading,
.premium-review-btn.sell.loading:disabled {
    background: linear-gradient(180deg, #ff3b57 0%, #cc0022 100%) !important;
}

#close-confirm-action-btn.loading,
#close-confirm-action-btn.loading:disabled {
    background: linear-gradient(180deg, #ff3b57 0%, #cc0022 100%) !important;
    color: #ffffff !important;
    opacity: 0.85 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.close-position-btn.loading,
.close-position-btn.loading:disabled {
    opacity: 0.7 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

/* 3. Orange Action Buttons (Reset Demo Balance, Claim Rewards) */
button[onclick*="resetDemoBalance"],
button[onclick*="executeDemoReset"],
.task-btn.claim {
    background: linear-gradient(180deg, #ffb03a 0%, #ff9f0a 100%) !important;
    border: none !important;
    color: #121418 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(255, 159, 10, 0.4) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

button[onclick*="resetDemoBalance"]:hover:not(:disabled),
button[onclick*="executeDemoReset"]:hover:not(:disabled),
.task-btn.claim:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffc05a 0%, #ffb92b 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 159, 10, 0.55) !important;
    color: #121418 !important;
    transform: none !important;
}

button[onclick*="resetDemoBalance"]:active:not(:disabled),
button[onclick*="executeDemoReset"]:active:not(:disabled),
.task-btn.claim:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(255, 159, 10, 0.3) !important;
    transform: none !important;
}

button[onclick*="resetDemoBalance"]:disabled,
button[onclick*="executeDemoReset"]:disabled,
.task-btn.claim.disabled,
.task-btn.claim:disabled {
    background: #1c2433 !important;
    color: #5f6673 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Premium spring toggle transitions */
.premium-leverage-btn,
.premium-percent-btn,
.tpsl-quick-btn,
.premium-margin-tab,
.partial-close-btn,
.slippage-btn,
.premium-dir-tab,
.tab-btn,
.period-btn,
.filter-btn,
.account-tab {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 6px !important;
}

.premium-leverage-btn.active,
.premium-percent-btn.active,
.tpsl-quick-btn.active,
.premium-margin-tab.active,
.partial-close-btn.active,
.slippage-btn.active,
.premium-dir-tab.active,
.premium-dir-tab.buy.active,
.premium-dir-tab.sell.active,
.tab-btn.active,
.period-btn.active,
.filter-btn.active,
.account-tab.active {
    transform: scale(1.04) !important;
}

/* Responsive adjustments for desktop ticker stats bar on narrower screens */
@media (min-width: 993px) and (max-width: 1350px) {
    .stats-grid {
        gap: 12px !important;
    }
    .active-pair-info {
        margin-right: 12px !important;
    }
    .ticker-header-divider {
        margin-right: 12px !important;
    }
    /* Hide BTC volume to save space on intermediate viewports */
    .stats-grid .stat-item:nth-child(3) {
        display: none !important;
    }
}
@media (min-width: 993px) and (max-width: 1100px) {
    /* Also hide USDT volume to save space on tight viewports */
    .stats-grid .stat-item:nth-child(4) {
        display: none !important;
    }
    .active-pair-info .pair-name {
        font-size: 14px !important;
    }
    .active-pair-info .highlight-price {
        font-size: 14px !important;
        margin-left: 6px !important;
    }
    .active-pair-info .change-badge {
        font-size: 11px !important;
    }
}

@media (max-width: 992px) {
    .indicators-tooltip-bubble {
        white-space: normal !important;
        max-width: 250px !important;
        width: max-content !important;
        text-align: center !important;
        z-index: 2000 !important;
    }
    .indicators-dropdown-menu {
        z-index: 2000 !important;
    }
}

@media (min-width: 993px) {
    .chart-container-panel {
        flex: none !important;
        height: 400px;
        resize: vertical;
        overflow: hidden;
        min-height: 250px;
        max-height: calc(100vh - 120px);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important;
    }
    
    .chart-container-panel.fullscreen {
        resize: none !important;
        height: 100vh !important;
        max-height: none !important;
        width: 100vw !important;
        max-width: none !important;
    }
    
    .bottom-terminal-panel {
        flex: 1 !important;
        height: auto !important;
        min-height: 150px;
    }
}

/* Custom Checkbox Button Styling */
.premium-checkbox-left,
.hide-zero-wrapper,
.auth-checkbox-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #8a919e !important;
    cursor: pointer !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    user-select: none !important;
    white-space: nowrap !important;
    height: auto !important;
}

.premium-checkbox-left:hover,
.hide-zero-wrapper:hover,
.auth-checkbox-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Hide native checkbox input completely but keep it accessible for mobile tap events */
.premium-checkbox-left input[type="checkbox"],
.hide-zero-wrapper input[type="checkbox"],
.auth-checkbox-row input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Checked State styles */
.premium-checkbox-left:has(input[type="checkbox"]:checked),
.hide-zero-wrapper:has(input[type="checkbox"]:checked),
.auth-checkbox-row:has(input[type="checkbox"]:checked) {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

/* Light theme overrides */
body.light-theme .premium-checkbox-left,
body.light-theme .hide-zero-wrapper,
body.light-theme .auth-checkbox-row {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #5f6673 !important;
}

body.light-theme .premium-checkbox-left:hover,
body.light-theme .hide-zero-wrapper:hover,
body.light-theme .auth-checkbox-row:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a222f !important;
}

body.light-theme .premium-checkbox-left:has(input[type="checkbox"]:checked),
body.light-theme .hide-zero-wrapper:has(input[type="checkbox"]:checked),
body.light-theme .auth-checkbox-row:has(input[type="checkbox"]:checked) {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Resize Tooltip Styles */
.resize-tooltip-bubble {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background: var(--color-blue);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    white-space: nowrap;
    cursor: pointer;
    animation: bounceTooltipDown 2s infinite ease-in-out;
}

.resize-tooltip-bubble .tooltip-arrow {
    position: absolute;
    top: 100%;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-blue);
}

@keyframes bounceTooltipDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

/* TP/SL Card Beautiful Custom Styling */
.premium-tpsl-card .premium-input-box {
    background: #090d14 !important;
    border: 1px solid #1a222f !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.premium-tpsl-card .premium-input-box:hover {
    background: #0e141f !important;
    border-color: #243042 !important;
}

.premium-tpsl-card .premium-input-box:has(input[type="checkbox"]:checked) {
    border-color: rgba(43, 102, 255, 0.45) !important;
    background: rgba(43, 102, 255, 0.06) !important;
    box-shadow: 0 0 12px rgba(43, 102, 255, 0.1) !important;
}

.premium-tpsl-card .premium-checkbox-left {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    width: 100% !important;
    justify-content: center !important;
    color: #8a919e !important;
    transition: color 0.2s !important;
}

.premium-tpsl-card .premium-input-box:has(input[type="checkbox"]:checked) .premium-checkbox-left {
    color: #ffffff !important;
}

/* Sidebar Collapse Toggle Handle */
.sidebar-toggle-handle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 48px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.sidebar-toggle-handle:hover {
    background-color: var(--primary-color);
    color: #000000;
}

@media (max-width: 768px) {
    .sidebar-toggle-handle {
        display: none !important;
    }
    .chart-stats-toggle-handle {
        display: none !important;
    }
    .chart-stats-overlay.overlay-collapsed {
        position: static !important;
        max-width: 1200px !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        overflow: visible !important;
        gap: 8px !important;
    }
    .date-year {
        display: block;
        margin-top: 2px;
    }
    
    /* Make mobile chart toolbar horizontally scrollable */
    .chart-toolbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        touch-action: pan-x !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .chart-toolbar::-webkit-scrollbar {
        display: none !important;
    }
    .timeframe-selectors,
    .toolbar-divider,
    .indicators-dropdown-container,
    .tradingview-link-btn {
        flex-shrink: 0 !important;
    }
    .tradingview-link-btn.active {
        background: var(--color-blue) !important;
        color: white !important;
        border-color: var(--color-blue) !important;
    }
}

.share-pnl-btn {
    background: rgba(43, 102, 255, 0.15) !important;
    color: var(--color-blue) !important;
    border: 1px solid rgba(43, 102, 255, 0.3) !important;
    border-radius: 4px;
    padding: 0;
    height: 20px;
    width: 20px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.share-pnl-btn:hover {
    background: var(--color-blue) !important;
    color: #ffffff !important;
}

.share-pnl-btn ion-icon {
    font-size: 13px;
    margin: 0;
}

/* New TP/SL Vertical Layout Styles */
.premium-tpsl-card-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
}

.tpsl-roi-subtitle {
    color: #5e6673 !important;
    font-weight: normal !important;
    font-size: 11px !important;
    margin-left: 4px;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tpsl-section-box {
    border: 1px solid #1a222f;
    border-radius: 8px;
    background: #090d14;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tpsl-section-box:hover {
    border-color: #243042;
}

.tpsl-section-box:has(input[type="checkbox"]:checked) {
    border-color: rgba(43, 102, 255, 0.35);
    background: rgba(43, 102, 255, 0.03);
}

.tpsl-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.tpsl-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpsl-title-box input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    background: #090d14;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    outline: none;
}

.tpsl-title-box input[type="checkbox"]:hover {
    border-color: #5e6673;
}

.tpsl-title-box input[type="checkbox"]:checked {
    background: #090d14;
    border-color: #5e6673;
}

.tpsl-title-box input[type="checkbox"]:checked::after {
    content: "";
    width: 3.5px;
    height: 6.5px;
    border: solid #2b66ff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 1px;
}

body.light-theme .tpsl-title-box input[type="checkbox"] {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .tpsl-title-box input[type="checkbox"]:checked {
    background: #ffffff;
    border-color: #2b66ff;
}

.tpsl-title-text {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
}

.tpsl-chevron {
    color: #5e6673;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.tpsl-chevron.rotated {
    transform: rotate(180deg);
}

.tpsl-expanded-content {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.tpsl-fields-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.tpsl-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tpsl-field-group.trigger-group {
    flex: 2;
}

.tpsl-field-group.roi-group {
    flex: 1.2;
}

.tpsl-field-label {
    font-size: 10px;
    color: #848e9c;
    font-weight: 500;
}

.tpsl-input-with-select {
    display: flex;
    background: #0b1118;
    border: 1px solid #1c2735;
    border-radius: 6px;
    overflow: hidden;
    height: 32px;
    box-sizing: border-box;
}

.tpsl-input-with-select input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    height: 100% !important;
}

.tpsl-input-with-select select {
    border: none !important;
    outline: none !important;
    background: #1c2735 !important;
    color: #e2e8f0 !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    cursor: pointer !important;
    height: 100% !important;
    max-width: 90px;
}

.tpsl-roi-input-wrapper {
    display: flex;
    align-items: center;
    background: #0b1118;
    border: 1px solid #1c2735;
    border-radius: 6px;
    height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
}

.tpsl-roi-input-wrapper input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 12px !important;
    min-width: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.tpsl-roi-percent-badge {
    color: #848e9c;
    font-size: 12px;
    font-weight: 600;
}

.tpsl-slider-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tpsl-slider-container input[type="range"] {
    width: 100%;
    cursor: pointer;
    height: 4px;
    background: #1c2735;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.tpsl-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2b66ff;
    cursor: pointer;
}

.tpsl-slider-marks {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #5e6673;
    padding: 0 2px;
}

.tpsl-description-card {
    background: #0b1118;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #848e9c;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.tpsl-description-card .green-text {
    color: #0ecb81 !important;
    font-weight: 600;
    margin-top: 2px;
}

.tpsl-description-card .red-text {
    color: #f6465d !important;
    font-weight: 600;
    margin-top: 2px;
}

/* Light Theme Overrides */
body.light-theme .tpsl-section-box {
    border-color: rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

body.light-theme .tpsl-section-box:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-theme .tpsl-section-box:has(input[type="checkbox"]:checked) {
    border-color: rgba(43, 102, 255, 0.25);
    background: rgba(43, 102, 255, 0.02);
}

body.light-theme .tpsl-title-text {
    color: #1e2329;
}

body.light-theme .tpsl-input-with-select {
    background: #f0f2f5;
    border-color: #e0e2e5;
}

body.light-theme .tpsl-input-with-select input {
    color: #1e2329 !important;
}

body.light-theme .tpsl-input-with-select select {
    background: #e0e2e5 !important;
    color: #1e2329 !important;
}

body.light-theme .tpsl-roi-input-wrapper {
    background: #f0f2f5;
    border-color: #e0e2e5;
}

body.light-theme .tpsl-roi-input-wrapper input {
    color: #1e2329 !important;
}

body.light-theme .tpsl-description-card {
    background: #f8f9fa;
    color: #474f5a;
    border-color: rgba(0, 0, 0, 0.03);
}

/* Chart Only Mode */
body.chart-only-mode {
    background-color: var(--bg-workspace) !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
}
body.chart-only-mode #global-header,
body.chart-only-mode #global-news-ticker,
body.chart-only-mode .news-ticker-bar,
body.chart-only-mode #global-footer,
body.chart-only-mode .app-footer,
body.chart-only-mode .left-sidebar,
body.chart-only-mode .right-sidebar,
body.chart-only-mode .bottom-terminal-panel,
body.chart-only-mode .ticker-stats-bar,
body.chart-only-mode .mobile-tab-navigation,
body.chart-only-mode .mobile-workspace-tabs,
body.chart-only-mode .mobile-floating-action-bar,
body.chart-only-mode .sidebar-toggle-handle,
body.chart-only-mode .chart-fullscreen-btn,
body.chart-only-mode .chart-popout-btn,
body.chart-only-mode .header-divider-vertical,
body.chart-only-mode .chart-stats-overlay,
body.chart-only-mode .chart-stats-toggle-handle {
    display: none !important;
}
body.chart-only-mode .exchange-workspace {
    height: 100vh !important;
    max-height: 100vh !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.chart-only-mode .center-content {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
body.chart-only-mode .chart-container-panel {
    height: 100vh !important;
    max-height: 100vh !important;
    flex: 1 !important;
    resize: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
}
body.chart-only-mode .chart-main-area {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
}
body.chart-only-mode .canvas-wrapper {
    flex: 1 !important;
    height: calc(100vh - 40px) !important;
    min-height: calc(100vh - 40px) !important;
}
body.chart-only-mode .chart-toolbar {
    margin-right: 12px !important;
}
.chart-popout-btn:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-hover) !important;
}

/* Terminal Page Footer Styles */
body.trade-page .app-footer {
    background-color: #07090e !important;
    padding: 4px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}
body.trade-page .app-footer,
body.trade-page .app-footer * {
    font-size: 10px !important;
    color: #5e6673 !important;
}
body.trade-page .app-footer .footer-link:hover,
body.trade-page .app-footer .status-indicator-link:hover,
body.trade-page .app-footer .footer-link:hover *,
body.trade-page .app-footer .status-indicator-link:hover * {
    color: #848e9c !important;
}
body.trade-page .app-footer .status-indicator .dot {
    width: 5px !important;
    height: 5px !important;
}
body.trade-page .app-footer .status-indicator .dot.green {
    background-color: #0b8f5c !important;
    box-shadow: 0 0 3px rgba(11, 143, 92, 0.4) !important;
    animation: none !important;
}

/* History table scroll fixes for mobile */
#terminal-history-view {
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.history-table-wrapper {
    overflow-x: auto !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

/* Hide chart popout button on mobile screens */
@media (max-width: 992px) {
    .chart-popout-btn {
        display: none !important;
    }
}

/* Fix switcher button rounding and disable scale overflow globally */
.premium-dir-tabs,
.premium-margin-tabs {
    border-radius: 12px !important;
    padding: 3px !important;
}

.premium-dir-tab,
.premium-dir-tab.buy.active,
.premium-dir-tab.sell.active,
.premium-margin-tab,
.premium-margin-tab.active {
    border-radius: 9px !important;
    transform: none !important;
}

.premium-dir-tab:hover,
.premium-dir-tab:active,
.premium-dir-tab.active:hover,
.premium-dir-tab.active:active,
.premium-dir-tab.buy.active:hover,
.premium-dir-tab.buy.active:active,
.premium-dir-tab.sell.active:hover,
.premium-dir-tab.sell.active:active,
.premium-margin-tab:hover,
.premium-margin-tab:active,
.premium-margin-tab.active:hover,
.premium-margin-tab.active:active {
    transform: none !important;
}

/* Share PnL Modal Styles */
.share-pnl-modal-btn-primary {
    width: 100%;
    font-family: var(--font-primary), sans-serif;
    background: linear-gradient(180deg, #2b66ff 0%, #124ec2 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(43, 102, 255, 0.35);
    transition: all 0.2s ease;
}
.share-pnl-modal-btn-primary:hover {
    background: linear-gradient(180deg, #3b76ff 0%, #1a5cdd 100%);
    box-shadow: 0 6px 20px rgba(43, 102, 255, 0.5);
}
.share-pnl-modal-btn-primary:active {
    transform: scale(0.98);
}
.share-pnl-modal-btn-secondary {
    width: 100%;
    font-family: var(--font-primary), sans-serif;
    background: rgba(255, 255, 255, 0.04);
    color: #eaecf0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.share-pnl-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.share-pnl-modal-btn-secondary:active {
    transform: scale(0.98);
}


/* ==========================================================================
   UNIFIED ELEMENT DESIGN SYSTEM (GLOBAL OVERRIDES WITH !IMPORTANT)
   ========================================================================== */

/* 1. Global Forms & Input Controls */
body:not(.trade-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not([type="image"]):not(.borderless-input):not(.swap-number-input):not(#header-search-input),
body:not(.trade-page) select,
body:not(.trade-page) textarea,
body:not(.trade-page) .auth-input,
body:not(.trade-page) .otp-input,
body:not(.trade-page) .settings-input,
body:not(.trade-page) .search-box-container input,
body:not(.trade-page) .order-input-group input,
body:not(.trade-page) .order-input-wrapper input,
body:not(.trade-page) .premium-input-field-row input,
body:not(.trade-page) .tpsl-input-wrapper input,
body:not(.trade-page) .tpsl-input-with-select input,
body:not(.trade-page) .tpsl-roi-input-wrapper input,
body:not(.trade-page) .markets-search-input,
body:not(.trade-page) .footer-search input {
    background: var(--bg-input-unified) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--border-radius-element) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* Focus styles for ALL input elements */
body:not(.trade-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not([type="image"]):not(.borderless-input):not(.swap-number-input):not(#header-search-input):focus,
body:not(.trade-page) select:focus,
body:not(.trade-page) textarea:focus,
body:not(.trade-page) .auth-input:focus,
body:not(.trade-page) .otp-input:focus,
body:not(.trade-page) .settings-input:focus,
body:not(.trade-page) .search-box-container input:focus,
body:not(.trade-page) .order-input-group input:focus,
body:not(.trade-page) .order-input-wrapper input:focus,
body:not(.trade-page) .premium-input-field-row input:focus,
body:not(.trade-page) .tpsl-input-wrapper input:focus,
body:not(.trade-page) .tpsl-input-with-select input:focus,
body:not(.trade-page) .tpsl-roi-input-wrapper input:focus,
body:not(.trade-page) .markets-search-input:focus,
body:not(.trade-page) .footer-search input:focus {
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 2px rgba(43, 102, 255, 0.15) !important;
    background: var(--bg-input-unified) !important;
}

/* Helper class for borderless transparent inputs */
.borderless-input,
.swap-number-input {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:not(.trade-page) input.swap-number-input,
body:not(.trade-page) input.borderless-input,
body:not(.trade-page) input.swap-number-input:focus,
body:not(.trade-page) input.borderless-input:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* Placeholder colors */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Autofill states */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input-unified) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* 2. Global Buttons & Tabs Rounding */
button,
input[type="button"],
input[type="submit"],
.btn,
[class*="btn-"]:not([class*="-row"]):not([class*="-group"]):not([class*="-wrapper"]):not([class*="-container"]):not([class*="-area"]):not([class*="-bar"]):not([class*="-box"]),
[class*="-btn"]:not([class*="-row"]):not([class*="-group"]):not([class*="-wrapper"]):not([class*="-container"]):not([class*="-area"]):not([class*="-bar"]):not([class*="-box"]),
.btn-primary,
.btn-secondary,
.btn-submit,
.submit-btn,
.auth-submit-btn,
.settings-logout-btn,
.drawer-register-btn,
.drawer-wallet-btn,
.header-wallet-btn,
.console-btn,
.security-row-btn,
.task-btn,
.tab-btn,
.filter-btn,
.slippage-btn,
.btn-submit-order,
.share-pnl-modal-btn-primary,
.share-pnl-modal-btn-secondary {
    border-radius: var(--border-radius-element) !important; /* Force unified 8px rounding */
    font-family: var(--font-sans) !important;
}

/* Primary Blue Action Buttons Overrides */
.btn-primary,
.submit-btn,
.auth-submit-btn,
.btn-submit,
.create-account-btn,
.drawer-register-btn,
.header-wallet-btn,
.drawer-wallet-btn,
.console-btn,
.security-row-btn,
.share-pnl-modal-btn-primary,
#add-token-wallet-btn,
#dex-action-btn,
.btn-submit-stake,
.btn-stake,
.btn-redeem,
.btn-unstake,
.btn-commit,
.copy-btn-new,
.widget-trade-btn,
.btn-submit-listing,
.promo-trade-btn {
    background: linear-gradient(180deg, #0055ff 0%, #0033cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0, 85, 255, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-primary:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.auth-submit-btn:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.create-account-btn:hover:not(:disabled),
.drawer-register-btn:hover:not(:disabled),
.header-wallet-btn:hover:not(:disabled),
.drawer-wallet-btn:hover:not(:disabled),
.console-btn:hover:not(:disabled),
.security-row-btn:hover:not(:disabled),
.share-pnl-modal-btn-primary:hover,
#add-token-wallet-btn:hover:not(:disabled),
#dex-action-btn:hover:not(:disabled),
.btn-submit-stake:hover:not(:disabled),
.btn-stake:hover:not(:disabled),
.btn-redeem:hover:not(:disabled),
.btn-unstake:hover:not(:disabled),
.btn-commit:hover:not(:disabled),
.copy-btn-new:hover:not(:disabled),
.widget-trade-btn:hover:not(:disabled),
.btn-submit-listing:hover:not(:disabled),
.promo-trade-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #1a66ff 0%, #0044ff 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 85, 255, 0.45) !important;
}

.btn-primary:active:not(:disabled),
.submit-btn:active:not(:disabled),
.auth-submit-btn:active:not(:disabled),
.btn-submit:active:not(:disabled),
.share-pnl-modal-btn-primary:active,
.btn-submit-stake:active:not(:disabled),
.btn-stake:active:not(:disabled),
.btn-redeem:active:not(:disabled),
.btn-unstake:active:not(:disabled),
.btn-commit:active:not(:disabled),
.copy-btn-new:active:not(:disabled),
.widget-trade-btn:active:not(:disabled),
.btn-submit-listing:active:not(:disabled),
.promo-trade-btn:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(0, 85, 255, 0.2) !important;
}

/* Secondary & Cancel Buttons Overrides */
.btn-secondary,
.btn-cancel,
.btn-edit,
.btn-close,
.share-pnl-modal-btn-secondary,
.tab-btn:not(.active),
.filter-btn:not(.active),
.slippage-btn:not(.active),
.period-btn:not(.active) {
    background: #1f2633 !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

body.light-theme .btn-secondary,
body.light-theme .btn-cancel,
body.light-theme .btn-edit,
body.light-theme .btn-close,
body.light-theme .share-pnl-modal-btn-secondary,
body.light-theme .tab-btn:not(.active),
body.light-theme .filter-btn:not(.active) {
    background: #ffffff !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled),
.btn-edit:hover:not(:disabled),
.share-pnl-modal-btn-secondary:hover,
.tab-btn:not(.active):hover,
.filter-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.light-theme .btn-secondary:hover:not(:disabled),
body.light-theme .btn-cancel:hover:not(:disabled),
body.light-theme .btn-edit:hover:not(:disabled),
body.light-theme .share-pnl-modal-btn-secondary:hover {
    background: #f1f3f5 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Green (Buy) and Red (Sell) buttons */
.btn-submit-order:not(.sell),
.premium-dir-tab.buy.active,
.premium-review-btn.buy,
.mobile-action-btn.buy {
    background: linear-gradient(180deg, #00c087 0%, #009668 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius-element) !important;
    box-shadow: 0 4px 14px rgba(0, 192, 135, 0.4) !important;
}

.btn-submit-order.sell,
#close-confirm-action-btn,
.premium-dir-tab.sell.active,
.premium-review-btn.sell,
.mobile-action-btn.sell {
    background: linear-gradient(180deg, #ff3b57 0%, #cc0022 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius-element) !important;
    box-shadow: 0 4px 14px rgba(255, 59, 87, 0.4) !important;
}

/* 3. Checkboxes & Custom Checkmarks Alignment */
.custom-checkmark {
    border-radius: 4px !important;
    background: var(--bg-input-unified) !important;
    border: 1px solid var(--border-input) !important;
    transition: all 0.2s ease !important;
}

.custom-checkbox-container:hover .custom-checkmark {
    border-color: var(--color-blue) !important;
}

.custom-checkbox-container input:checked ~ .custom-checkmark {
    background: linear-gradient(180deg, #0055ff 0%, #0033cc 100%) !important;
    border-color: rgba(0, 85, 255, 0.4) !important;
    box-shadow: 0 0 8px rgba(0, 85, 255, 0.3) !important;
}

.premium-checkbox-left,
.hide-zero-wrapper,
.auth-checkbox-row {
    border-radius: var(--border-radius-element) !important;
    border: 1px solid var(--border-input) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body.light-theme .premium-checkbox-left,
body.light-theme .hide-zero-wrapper,
body.light-theme .auth-checkbox-row {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: var(--border-input) !important;
}

/* Fix mobile auto-zoom on input focus */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Order Book in Right Side of Chart (COYTX Terminal Style) */
.terminal-orderbook-panel {
    width: 225px;
    height: 100%;
    background: #0b0f17;
    border-left: 1px solid var(--border-color, #1a2336);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    font-family: 'Fira Code', monospace;
    user-select: none;
}

@media (max-width: 992px) {
    .terminal-orderbook-panel {
        display: none !important;
    }
}

.orderbook-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #1a2336);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #090d14;
}

.orderbook-title {
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.orderbook-precision-tags {
    display: flex;
    align-items: center;
    gap: 4px;
}

.precision-tag {
    font-size: 10px;
    color: #64748b;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
}

.orderbook-cols-header {
    padding: 4px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 9.5px;
    color: #64748b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: #090d14;
}

.orderbook-asks-list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    padding: 2px 0;
}

.orderbook-bids-list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
}

.orderbook-row {
    position: relative;
    padding: 2px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 10.5px;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.orderbook-row:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.orderbook-depth-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    transition: width 0.2s ease;
}

.orderbook-row.ask .orderbook-depth-bar {
    background: rgba(244, 63, 94, 0.12);
}

.orderbook-row.ask .ob-price {
    color: #f43f5e;
    font-weight: 600;
    z-index: 1;
}

.orderbook-row.bid .orderbook-depth-bar {
    background: rgba(16, 185, 129, 0.12);
}

.orderbook-row.bid .ob-price {
    color: #10b981;
    font-weight: 600;
    z-index: 1;
}

.ob-size {
    text-align: right;
    color: #cbd5e1;
    z-index: 1;
}

.ob-total {
    text-align: right;
    color: #64748b;
    z-index: 1;
}

.orderbook-mid-bar {
    padding: 6px 10px;
    background: #070a10;
    border-top: 1px solid var(--border-color, #1a2336);
    border-bottom: 1px solid var(--border-color, #1a2336);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.orderbook-mid-price {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.orderbook-spread-text {
    font-size: 9.5px;
    color: #64748b;
}