:root {
    /* ===== BINANCE THEME — #181a20 dark canvas + Binance yellow accents ===== */
    --bg-dark: #181a20;          /* main canvas / chart — Binance charcoal (from screenshot) */
    --bg-panel: #1e2329;         /* panels (slightly lifted) */
    --bg-panel-light: #252b33;   /* elevated surfaces */
    --bg-hover: #2b3139;         /* hover */
    --text-primary: #eaecef;     /* Binance primary text */
    --text-secondary: #848e9c;   /* Binance muted text */
    --border-color: #2b3139;     /* Binance hairline border */

    /* Binance yellow accent (logo + Deposit button color) */
    --color-gold: #fcd535;       /* primary accent / active states (Deposit yellow) */
    --color-gold-bright: #ffd54a;/* highlights */
    --color-gold-deep: #f0b90b;  /* logo / deep gold */

    --color-buy: #2ebd85;        /* buy = Binance green */
    --color-sell: #f6465d;       /* sell = Binance red */
    --color-yellow: #fcd535;     /* Binance yellow (logo, EMA) */
    --color-green: #0ecb81;
    --color-red: #f6465d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-size: 13px;
    height: 100vh;
    overflow: hidden;
}

.terminal-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* TOP BAR */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
}

.top-left, .top-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo {
    color: var(--color-yellow);
    font-weight: 700;
    font-size: 20px;
    margin-right: 24px;
    letter-spacing: -1px;
}

.tabs {
    display: flex;
    height: 100%;
}

.tab {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border-color);
    position: relative;
    font-weight: 500;
}

.tab.active {
    color: var(--text-primary);
    background-color: var(--bg-panel);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
}

.tab:hover:not(.active) {
    background-color: var(--bg-hover);
}

.tab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border-color);
}

.account-type {
    display: flex;
    align-items: center;
    margin-right: 20px;
    font-size: 12px;
}

.type-real {
    color: var(--color-yellow);
    background: rgba(255, 183, 77, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}

.type-zero {
    color: var(--text-secondary);
    margin-right: 16px;
}

.balance {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.currency {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
    font-size: 12px;
}

.icon-group {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 24px;
    color: var(--text-secondary);
    font-size: 16px;
}

.icon-group i:hover {
    color: var(--text-primary);
    cursor: pointer;
}

.btn-deposit {
    background-color: var(--bg-panel-light);
    color: var(--text-primary);
    border: none;
    padding: 8px 24px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-deposit:hover {
    background-color: var(--bg-hover);
}

/* MAIN LAYOUT GRID */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* PRIMARY SIDEBAR */
.sidebar-primary {
    width: 48px;
    flex-shrink: 0;
    background-color: var(--bg-dark);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-menu {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    width: 100%;
}

.sidebar-icons {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.side-icon {
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
}

.side-icon:hover {
    color: var(--text-primary);
}

/* SECONDARY SIDEBAR */
.sidebar-secondary {
    width: 40px;
    flex-shrink: 0;
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 16px;
    overflow-y: auto;
}

.sidebar-secondary::-webkit-scrollbar {
    display: none;
}

.tool-icon {
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.tool-icon:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* WORKSPACE */
.workspace {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
    position: relative;
}

/* CHART TOOLBAR */
.chart-toolbar {
    height: 40px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: var(--bg-dark);
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.timeframes {
    display: flex;
    gap: 12px;
    color: var(--text-secondary);
    align-items: center;
}

.timeframes span {
    cursor: pointer;
    font-weight: 500;
}

.timeframes span.active {
    color: var(--color-gold);
}

.timeframes span:hover {
    color: var(--text-primary);
}

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

.chart-types, .indicators, .actions {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.chart-types i, .indicators i, .actions i {
    font-size: 14px;
}

.indicators:hover {
    color: var(--text-primary);
}

.save-status {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
    text-align: right;
    cursor: pointer;
}

.pl-indicator {
    background-color: rgba(242, 54, 69, 0.1);
    color: var(--color-red);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-right > i {
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: 12px;
}

/* CHART AREA */
.chart-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.chart-watermark {
    position: absolute;
    top: 16px;
    left: 16px;
    pointer-events: none;
    z-index: 10;
}

.chart-watermark .symbol {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.05);
}

/* BOTTOM POSITIONS TABS */
.positions-tabs {
    height: 32px;
    background-color: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.pos-tab {
    color: var(--text-secondary);
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.pos-tab.active {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.pos-tab .badge {
    background-color: var(--bg-panel-light);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 6px;
}

.spacer {
    flex: 1;
}

.positions-tabs > i {
    color: var(--text-secondary);
    cursor: pointer;
}

/* ACCOUNT FOOTER */
.account-footer {
    height: 32px;
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 11px;
    color: var(--text-secondary);
}

.account-stats {
    display: flex;
    gap: 16px;
}

.account-stats strong {
    color: var(--text-primary);
    font-weight: 600;
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-actions strong {
    font-weight: 600;
}

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

.btn-close-all {
    background-color: var(--bg-panel-light);
    color: var(--text-primary);
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* RIGHT ORDER PANEL */
.order-panel {
    width: 280px;
    background-color: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.panel-header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    font-weight: 600;
    display: flex;
    align-items: center;
}

.panel-header > i {
    color: var(--text-secondary);
    cursor: pointer;
}

.panel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dropdown-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.buy-sell-buttons {
    display: flex;
    gap: 8px;
}

.action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-btn.sell {
    border-color: rgba(242, 54, 69, 0.3);
}

.action-btn.buy {
    border-color: rgba(33, 150, 243, 0.3);
}

.action-btn.sell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(242, 54, 69, 0.1) 0%, rgba(242, 54, 69, 0) 100%);
}

.action-btn.buy::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0) 100%);
}

.action-btn .label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    z-index: 1;
}

.action-btn.sell .label { color: var(--color-red); }
.action-btn.buy .label { color: var(--color-buy); }

.action-btn .price {
    font-size: 16px;
    font-weight: 400;
    z-index: 1;
}

.action-btn .large {
    font-size: 24px;
    font-weight: 700;
}

.action-btn .small {
    font-size: 14px;
    vertical-align: top;
}

.spread-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.percent-left { color: var(--color-red); }
.percent-right { color: var(--color-buy); }

.spread-bar {
    flex: 1;
    height: 2px;
    background-color: var(--color-buy);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spread-fill {
    position: absolute;
    left: 0;
    height: 100%;
    background-color: var(--color-red);
}

.spread-value {
    background-color: var(--bg-panel);
    padding: 0 4px;
    color: var(--text-secondary);
    z-index: 1;
    font-size: 10px;
}

.order-type-tabs {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.order-type-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    background-color: var(--bg-dark);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.order-type-tabs .tab:first-child {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.order-type-tabs .tab:last-child {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.order-type-tabs .tab.active {
    background-color: var(--bg-panel-light);
    color: var(--text-primary);
    border-color: var(--bg-panel-light);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-label {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
}

.input-control {
    display: flex;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 36px;
    align-items: center;
}

.input-control input {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 0 12px;
    width: 60px;
    flex: 1;
    outline: none;
    font-size: 13px;
}

.input-control input.text-muted {
    color: var(--text-secondary);
}

.input-control .unit {
    color: var(--text-secondary);
    font-size: 11px;
    margin-right: 8px;
}

.ctrl-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 100%;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn:hover {
    background-color: var(--bg-panel-light);
    color: var(--text-primary);
}

/* ===== BINANCE CONNECT BUTTON ===== */
.btn-binance-settings {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    background: linear-gradient(135deg, rgba(243, 186, 47, 0.12), rgba(243, 186, 47, 0.05));
    border: 1px solid rgba(243, 186, 47, 0.35);
    color: #f3ba2f;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 16px;
    position: relative;
}

.btn-binance-settings:hover {
    background: linear-gradient(135deg, rgba(243, 186, 47, 0.22), rgba(243, 186, 47, 0.10));
    border-color: rgba(243, 186, 47, 0.6);
    box-shadow: 0 0 12px rgba(243, 186, 47, 0.2);
}

.btn-binance-settings.active-connected {
    border-color: rgba(8, 153, 129, 0.5);
    color: #089981;
    background: linear-gradient(135deg, rgba(8, 153, 129, 0.12), rgba(8, 153, 129, 0.05));
}

.connection-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.4s ease;
}

.connection-dot.disconnected {
    background-color: #f23645;
    box-shadow: 0 0 5px rgba(242, 54, 69, 0.6);
}

.connection-dot.connected {
    background-color: #089981;
    box-shadow: 0 0 5px rgba(8, 153, 129, 0.8);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(8, 153, 129, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(8, 153, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(8, 153, 129, 0); }
}

/* ===== API MODAL ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

.modal-box {
    background: #1e2329;
    border: 1px solid #2b3139;
    border-radius: 12px;
    width: 460px;
    max-width: 95vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    transform: translateY(-16px) scale(0.97);
    transition: transform 0.25s ease;
}

.modal-backdrop.active .modal-box {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #2b3139;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #eaecef;
}

.modal-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.modal-close {
    background: none;
    border: none;
    color: #848e9c;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s;
}
.modal-close:hover { color: #eaecef; }

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

.modal-desc {
    font-size: 12px;
    color: #848e9c;
    line-height: 1.6;
}

.modal-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2b3139;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #848e9c;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #848e9c;
    transition: background 0.3s;
}
.status-dot.success { background: #089981; box-shadow: 0 0 6px rgba(8,153,129,0.6); }
.status-dot.warning { background: #f3ba2f; box-shadow: 0 0 6px rgba(243,186,47,0.6); }
.status-dot.error   { background: #f23645; box-shadow: 0 0 6px rgba(242,54,69,0.6); }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #848e9c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-with-eye {
    display: flex;
    align-items: center;
    background: #181a20;
    border: 1px solid #2b3139;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.input-with-eye:focus-within {
    border-color: #f3ba2f;
}

.input-with-eye input {
    flex: 1;
    background: none;
    border: none;
    color: #eaecef;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    font-family: 'Inter', monospace;
}

.input-with-eye input::placeholder { color: #4a505e; }

.eye-btn {
    background: none;
    border: none;
    color: #848e9c;
    padding: 0 14px;
    cursor: pointer;
    font-size: 13px;
    height: 100%;
    transition: color 0.2s;
}
.eye-btn:hover { color: #eaecef; }

.modal-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(243, 186, 47, 0.06);
    border: 1px solid rgba(243, 186, 47, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 11px;
    color: #a08a3a;
    line-height: 1.5;
}

.modal-notice i {
    color: #f3ba2f;
    margin-top: 2px;
    flex-shrink: 0;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.btn-cancel {
    flex: 1;
    background: #252b33;
    border: 1px solid #2b3139;
    color: #848e9c;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cancel:hover { background: #363a47; color: #eaecef; }

.btn-connect {
    flex: 2;
    background: linear-gradient(135deg, #f3ba2f, #e0a020);
    border: none;
    color: #000;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.btn-connect:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(243,186,47,0.35); }
.btn-connect:disabled { opacity: 0.7; cursor: not-allowed; }
.btn-connect.connected { background: linear-gradient(135deg, #089981, #067a68); color: #fff; }


/* CUSTOM CHART OVERLAYS */
.chart-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 60px); /* Exclude right price axis */
    height: 100%;
    pointer-events: none;
    z-index: 9;
}

.chart-label-line {
    position: absolute;
    left: 40%;
    transform: translateY(-50%);
    display: none; /* Managed by JS */
    align-items: center;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    pointer-events: auto;
    background-color: #181a20;
    height: 24px;
}

.lot-badge {
    background-color: #fcd535;
    color: #ffffff;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.status-badge {
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.close-btn {
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* TP Styling */
.tp-line {
    border: 1px solid #089981;
}
.tp-status {
    color: #089981;
    border-right: 1px solid rgba(8, 153, 129, 0.3);
}
.tp-line .close-btn {
    color: #089981;
}
.tp-line .close-btn:hover {
    background-color: rgba(8, 153, 129, 0.1);
}

/* Position Styling */
.pos-line {
    border: 1px solid #fcd535;
}
.pos-status {
    color: #fcd535;
    border-right: 1px solid rgba(41, 98, 255, 0.3);
}
.pos-line .close-btn {
    color: #fcd535;
}
.pos-line .close-btn:hover {
    background-color: rgba(41, 98, 255, 0.1);
}

/* SL Styling */
.sl-line {
    border: 1px solid #fcd535;
}
.sl-status {
    color: #fcd535;
    border-right: 1px solid rgba(255, 183, 77, 0.3);
}
.sl-line .close-btn {
    color: #fcd535;
}
.sl-line .close-btn:hover {
    background-color: rgba(255, 183, 77, 0.1);
}


/* ============================================================
   ADDED FUNCTIONAL STYLES
   ============================================================ */

/* --- Tabs (dynamic) --- */
.tabs .tab span { white-space: nowrap; }
.tab-close {
    margin-left: 8px;
    font-size: 10px;
    opacity: 0;
    transition: opacity .15s;
}
.tab:hover .tab-close { opacity: .6; }
.tab-close:hover { opacity: 1 !important; color: #f23645; }

/* --- Balance + Spot breakdown --- */
.balance { position: relative; }
.balance-sub {
    font-size: 9px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 600;
    text-transform: uppercase;
}
.balance-pop {
    position: absolute;
    top: 30px;
    right: 0;
    width: 280px;
    background: #1e2329;
    border: 1px solid #2b3139;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    padding: 12px 14px;
    z-index: 200;
    display: none;
    cursor: default;
}
.balance-pop.open { display: block; }
.bp-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-secondary); margin-bottom: 8px; font-weight: 600;
}
.bp-total { font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.bp-list { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.bp-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    font-size: 12px;
    padding: 5px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.bp-row span:first-child { color: var(--text-primary); font-weight: 600; }
.bp-row span:nth-child(2) { color: var(--text-secondary); text-align: right; }
.bp-val { color: #089981; text-align: right; }

/* --- Bar close countdown (right axis) --- */
.bar-countdown {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    margin-top: 22px;            /* sits just below the price axis label */
    background: #089981;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 11;
    pointer-events: none;
    display: none;
    align-items: center;
    min-width: 44px;
    justify-content: center;
}

/* --- Pair search modal --- */
.pair-modal-box { width: 540px; max-width: 95vw; display: flex; flex-direction: column; max-height: 78vh; }
.pair-search-wrap {
    position: relative;
    padding: 14px 24px 6px;
}
.pair-search-icon {
    position: absolute;
    left: 38px; top: 26px;
    color: var(--text-secondary);
    font-size: 13px;
}
.pair-search-wrap input {
    width: 100%;
    background: #181a20;
    border: 1px solid #2b3139;
    border-radius: 8px;
    padding: 10px 14px 10px 36px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.pair-search-wrap input:focus { border-color: #f3ba2f; }
.pair-categories {
    display: flex;
    gap: 8px;
    padding: 8px 24px 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #2b3139;
}
.pair-cat-btn {
    background: #181a20;
    border: 1px solid #2b3139;
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}
.pair-cat-btn:hover { color: var(--text-primary); }
.pair-cat-btn.active {
    background: rgba(243,186,47,0.12);
    border-color: rgba(243,186,47,0.4);
    color: #f3ba2f;
}
.pair-list {
    overflow-y: auto;
    padding: 6px 12px 14px;
}
.pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.pair-row:hover { background: rgba(255,255,255,0.04); }
.pair-base { font-weight: 700; color: var(--text-primary); }
.pair-quote { color: var(--text-secondary); font-size: 12px; }
.pair-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pair-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pair-icon {
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #2b3139;
}
.pair-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-icon.letter { color: #f3ba2f; font-size: 12px; font-weight: 700; }
.pair-name { display: flex; align-items: baseline; gap: 2px; }
.pair-name { min-width: 0; }
.pair-fullname { margin-left: 7px; font-size: 11.5px; color: var(--text-secondary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* only cut when the row is really full (full name on hover) */
.pair-row-left { flex: 1 1 auto; margin-right: 10px; }
.pair-row-info { flex: 1 1 auto; overflow: hidden; }
.pair-row-right { flex: none; }
.pair-vol { font-size: 10.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pair-row-right { display: flex; align-items: center; gap: 14px; }
.pair-price { color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.pair-change { font-size: 12px; font-weight: 600; min-width: 64px; text-align: right; }
.pair-change.up { color: #089981; }
.pair-change.down { color: #f23645; }
.pair-price { border-radius: 4px; padding: 1px 3px; }
.pair-price.flash-up { animation: pairFlashUp .8s ease-out; }
.pair-price.flash-down { animation: pairFlashDown .8s ease-out; }
@keyframes pairFlashUp { from { background: rgba(8,153,129,0.28); color: #0ecb81; } to { background: transparent; } }
@keyframes pairFlashDown { from { background: rgba(242,54,69,0.28); color: #f6465d; } to { background: transparent; } }
.pair-add {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(243,186,47,0.12);
    color: #f3ba2f;
    font-size: 11px;
}
.pair-add.added { background: rgba(8,153,129,0.15); color: #089981; }
.pair-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 30px;
    font-size: 13px;
}

/* --- Toast --- */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e2329;
    border: 1px solid #2b3139;
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 2000;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.buy   { border-color: rgba(252,213,53,0.5); }
#toast.sell  { border-color: rgba(243,186,47,0.5); }
#toast.error { border-color: rgba(242,54,69,0.6); }

/* compact quick-read popup pill */
.tt-hint {
  position: fixed; top: 70px; left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.9);
  background: #0ecb81; color: #fff;
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.tt-hint.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.tt-hint.buy  { background: #0ecb81; }
.tt-hint.sell { background: #f6465d; }
body.light .tt-hint { box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* --- Buy/Sell snappier feedback --- */
.action-btn { transition: transform .06s ease, filter .12s ease; user-select: none; }
.action-btn:hover { filter: brightness(1.15); }
.action-btn:active { transform: scale(0.97); }

/* ============================================================
   v2 — Trade ticket / draggable TP-SL / TradingView tools
   ============================================================ */

/* trade lines span full chart width with the badge cluster on the right */
.chart-label-line {
    left: 0;
    right: 0;
    width: 100%;
    justify-content: flex-end;
    background: transparent;
    border: none;
    overflow: visible;
    padding-right: 8px;
}
/* the coloured horizontal rule */
.chart-label-line::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 0;
    border-top: 1px dashed currentColor;
    opacity: .55;
    z-index: 0;
}
.chart-label-line.pos-line   { color: #fcd535; }
.chart-label-line.sl-line    { color: #f3ba2f; }
.chart-label-line.tp-line    { color: #089981; }
.chart-label-line.sl-redline { color: #f23645; }

/* the badge cluster sits above the rule */
.chart-label-line > * { position: relative; z-index: 1; }
.chart-label-line .lot-badge,
.chart-label-line .status-badge,
.chart-label-line .close-btn,
.chart-label-line .tk-btn,
.chart-label-line .grip {
    background-color: #181a20;
    height: 22px;
    display: flex;
    align-items: center;
}
.chart-label-line .lot-badge { border-radius: 3px 0 0 3px; }
.chart-label-line .status-badge { background:#181a20; }
.chart-label-line .close-btn { border-radius: 0 3px 3px 0; }

/* entry (committed) line: solid rule + boxed cluster */
.chart-label-line.pos-line::before,
.chart-label-line.sl-line::before { border-top-style: solid; opacity:.7; }
.chart-label-line.pos-line .lot-badge { background:#fcd535; color:#fff; }
.chart-label-line.sl-line  .lot-badge { background:#f3ba2f; color:#000; }

/* preview ticket */
.ticket-line .tk-btn {
    border: 1px dotted currentColor;
    color: inherit;
    background: #181a20;
    padding: 0 8px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-right: 4px;
    border-radius: 3px;
}
.ticket-line .tk-tp { color:#089981; }
.ticket-line .tk-sl { color:#f23645; }
.ticket-line .tk-btn.on { border-style:solid; }
.ticket-line .tk-tp.on { background:rgba(8,153,129,0.18); }
.ticket-line .tk-sl.on { background:rgba(242,54,69,0.18); }

/* tp / sl badges + amounts */
.tp-badge { background:#089981 !important; color:#fff !important; }
.sl-badge { background:#f23645 !important; color:#fff !important; }
.tp-status { color:#089981; }
.sl-redline .sl-status { color:#f23645; }

/* draggable grip */
.draggable { cursor: ns-resize; }
.draggable .grip {
    cursor: ns-resize;
    color: var(--text-secondary);
    padding: 0 6px;
    border-radius: 0 3px 3px 0;
}
.draggable:hover .grip { color: var(--text-primary); }
.chart-label-line .close-btn { cursor: pointer; padding: 0 8px; }

/* ---- TradingView-style left toolbar ---- */
.sidebar-secondary { gap: 6px; padding-top: 10px; }
.tool-icon {
    width: 30px; height: 30px;
    border-radius: 5px;
    font-size: 15px;
    transition: background .12s, color .12s;
}
.tool-icon.active {
    background: rgba(252,213,53,0.16);
    color: #fcd535;
}
.tool-sep {
    width: 22px;
    height: 1px;
    background: var(--border-color);
    margin: 2px 0;
}

/* ============================================================
   v3 — image-2 style trade tickets + axis price tags
   ============================================================ */
.chart-overlays { z-index: 9; }

/* full-width line; box floated right */
.tline {
    position: absolute;
    left: 0; right: 0;
    transform: translateY(-50%);
    height: 0;
    display: none;                 /* JS sets flex */
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;          /* line doesn't block chart */
    color: #fcd535;
    z-index: 9;
    padding-right: 80px;        /* gap between the label pill and the right price scale */
}
.tline::before {                   /* the horizontal rule */
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    border-top: 1px solid currentColor;
    opacity: .65;
}
.tline.tp::before,
.tline.sl::before { border-top-style: dashed; }
.tline.entry::before { opacity: .8; }

/* the boxed label */
.tbox {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    height: 24px;
    background: #181a20;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.tbox.draggable { cursor: ns-resize; }

/* order-box position gear + popup */
.ticket-gear { background:none; border:none; color:#848e9c; cursor:pointer; padding:6px 8px; margin-left:6px; border-radius:6px; font-size:14px; display:flex; align-items:center; }
.ticket-gear:hover { color:#eaecef; background:rgba(255,255,255,0.06); }
.ticket-gear.active { color:#fcd535; background:rgba(252,213,53,0.14); }
.align-menu { position:fixed; z-index:70; width:236px; background:#1e2329; border:1px solid #2b3139;
    border-radius:11px; box-shadow:0 16px 44px rgba(0,0,0,0.55); padding:13px; display:flex; flex-direction:column; gap:11px; }
.align-menu[hidden] { display:none; }
.align-head { font-size:12.5px; font-weight:700; color:#eaecef; }
.align-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.align-row > span { font-size:12px; color:#b7bdc6; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.align-row input[type=range] { flex:1; max-width:120px; accent-color:#fcd535; cursor:pointer; }
.align-reset { background:#fcd535; border:1px solid #fcd535; color:#000; border-radius:7px; padding:7px; font-size:12px; cursor:pointer; font-weight:600; }
.align-reset:hover { background:#e6c130; }
.align-sep { height:1px; background:#2b3139; margin:1px 0; }
.vol-seg { display:flex; gap:4px; width:100%; flex:1 1 100%; background:#12151c; border:1px solid #2b3139; border-radius:8px; padding:3px; }
.vol-seg button { flex:1; border:none; background:transparent; color:#9aa3b2; font-size:11.5px; font-weight:600; padding:6px 4px; border-radius:6px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
.vol-seg button:hover { color:#cfd3dc; }
.vol-seg button.on { background:#fcd535; color:#000; }
body.light .vol-seg { background:#f1f3f6; border-color:#e0e3e8; }
body.light .vol-seg button { color:#5b6472; }
body.light .vol-seg button.on { color:#000; }
.align-row input[type=color] { width:46px; height:26px; padding:0; border:1px solid #2b3139; border-radius:6px; background:transparent; cursor:pointer; }
.align-row input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
.align-row input[type=color]::-webkit-color-swatch { border:none; border-radius:4px; }
/* candle color settings */
.candle-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.candle-tog { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#eaecef; cursor:pointer; user-select:none; }
.candle-tog input[type=checkbox] { width:15px; height:15px; accent-color:#fcd535; cursor:pointer; }
.candle-sw { display:flex; gap:8px; }
.candle-sw input[type=color] { width:34px; height:30px; padding:0; border:1px solid #2b3139; border-radius:7px; background:transparent; cursor:pointer; }
.candle-sw input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
.candle-sw input[type=color]::-webkit-color-swatch { border:none; border-radius:5px; }
body.light .candle-tog { color:#1f2329; }
body.light .candle-sw input[type=color] { border-color:#e0e3e8; }
body.light .align-sep { background:#e0e3e8; }
body.light .align-row input[type=color] { border-color:#e0e3e8; }
body.light .align-menu { background:#fff; border-color:#e0e3e8; }
body.light .align-head { color:#1e2329; }
body.light .align-row > span { color:#5b6472; }
body.light .ticket-gear { color:#5b6472; }

/* "Set TP/SL automatically" toggle in the toolbar */
.autotpsl { display:flex; align-items:center; gap:8px; margin-left:6px; padding-left:12px; border-left:1px solid var(--border,#2b3139); }
.autotpsl-label { font-size:12.5px; color:var(--text-dim,#9aa3b2); white-space:nowrap; font-weight:500; }
.toggle-sw { width:38px; height:21px; border-radius:999px; background:#363c47; border:none; position:relative; cursor:pointer; padding:0; transition:background .18s ease; flex:0 0 auto; }
.toggle-sw .knob { position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:#aeb6c2; transition:left .18s ease, background .18s ease; }
.toggle-sw.on { background:#fcd535; }
.toggle-sw.on .knob { left:19.5px; background:#000; }
/* "TP = SL ×" ratio picker (auto TP from SL) */
.tpratio { display:flex; align-items:center; gap:7px; margin-left:10px; padding-left:12px; border-left:1px solid var(--border,#2b3139); }
.tpratio-label { font-size:12.5px; color:var(--text-dim,#9aa3b2); white-space:nowrap; font-weight:500; }
.tpratio-seg { display:flex; gap:2px; background:#12151c; border:1px solid #2b3139; border-radius:7px; padding:2px; }
.tpratio-seg button { background:none; border:none; color:#848e9c; font:inherit; font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:5px; cursor:pointer; line-height:1.2; font-variant-numeric:tabular-nums; }
.tpratio-seg button:hover { color:#eaecef; }
.tpratio-seg button.active { background:#fcd535; color:#000; }
body.light .tpratio-label { color:#5b6472; }
body.light .tpratio-seg { background:#f2f4f7; border-color:#e0e3e8; }
body.light .tpratio-seg button:hover { color:#1e2329; }
body.light .tpratio-seg button.active { color:#000; }
body.light .autotpsl-label { color:#5b6472; }
body.light .toggle-sw { background:#cdd3dc; }

/* docked TP/SL chips that sit left of the position label — grab & drag to re-place */
.tbadges { display:flex; align-items:center; gap:6px; margin-right:8px; pointer-events:auto; position:relative; z-index:3; }
.tbadge {
    height:22px; display:flex; align-items:center; padding:0 9px;
    border-radius:5px; font-size:11px; font-weight:800; letter-spacing:.3px;
    background:#181a20; border:1.5px dashed currentColor; cursor:grab;
    box-shadow:0 2px 8px rgba(0,0,0,0.35); user-select:none; touch-action:none;
}
.tbadge:hover { background:#1c2230; }
.tbadge:active { cursor:grabbing; }
.tbadge.tp { color:#089981; }
.tbadge.sl { color:#f3ba2f; }
body.light .tbadge { background:#ffffff; }
body.light .tbadge:hover { background:#f2f4f7; }

.tbox .seg {
    display: flex;
    align-items: center;
    padding: 0 9px;
    color: var(--text-primary);
    border-right: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tbox .seg:last-child { border-right: none; }
.tbox .seg.vol { font-weight: 700; }
.tbox .seg.confirm {
    font-weight: 700; letter-spacing:.2px;
    transition: filter .12s ease, transform .08s ease;
    animation: confirmBlink 1s ease-in-out infinite;   /* pulses until pressed (element is removed on confirm/cancel) */
}
.tbox .seg.confirm:hover { filter: brightness(1.12); animation: none; }  /* steady while you aim to click */
.tbox .seg.confirm:active { transform: scale(.97); }
@keyframes confirmBlink {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50%      { opacity: .55; box-shadow: 0 0 10px 1px rgba(255,255,255,.35); }
}
@media (prefers-reduced-motion: reduce) {
    .tbox .seg.confirm { animation: none; }
}
.tbox .seg.pl  { font-weight: 600; }
.tbox .seg[data-role="close"] {
    cursor: pointer;
    color: inherit;
    padding: 0 8px;
}
.tbox .seg[data-role="close"]:hover { background: rgba(255,255,255,0.08); }

/* preview TP/SL toggle chips */
.tbox .seg.tk {
    cursor: pointer;
    border: 1px dotted;
    margin: 3px 0 3px 4px;
    border-radius: 4px;
    padding: 0 7px;
    font-size: 11px;
    border-right: 1px dotted;
}
.tbox .seg.tk-tp { color: #089981; border-color: #089981; }
.tbox .seg.tk-sl { color: #f23645; border-color: #f23645; }
.tbox .seg.tk.on.tk-tp { background: rgba(8,153,129,0.2); border-style: solid; }
.tbox .seg.tk.on.tk-sl { background: rgba(242,54,69,0.2); border-style: solid; }

/* right-edge colored price tags (like image 2) */
.axis-tags {
    position: absolute;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
}
.axis-tag {
    position: absolute;
    right: 2px;
    transform: translateY(-50%);
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================
   v4 — bulletproof drag: full-line grab strip + box stacking
   ============================================================ */
.tbox {
    position: relative;
    z-index: 2;
    touch-action: none;
    user-select: none;
}
/* invisible full-width strip over the line so you can grab anywhere */
.tline .hit {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 22px;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: ns-resize;
    z-index: 1;
    background: transparent;
}
.tbox .seg { user-select: none; }

/* ============================================================
   v5 — visible drag handle + reliable grab
   ============================================================ */
.tline .handle {
    position: absolute;
    left: 58%;
    top: 0;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
    pointer-events: auto;
    cursor: ns-resize;
    z-index: 3;
    touch-action: none;
}
.tline .handle:hover { transform: scale(1.25); }
.tline .hit { touch-action: none; }
.tbox.draggable { cursor: ns-resize; }

/* ============================================================
   v6 — minimal panel: only Sell/Buy + Volume (buy-button sized)
   ============================================================ */
.order-panel .panel-body {
    padding: 16px;
    gap: 16px;
}
/* Volume row: control sized exactly like the Buy button, right-aligned under it */
.order-panel #grpVolume {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}
.order-panel #grpVolume .input-label { display: none; }
.order-panel #grpVolume .input-control {
    width: 140px;            /* same as the Buy button */
    flex: none;
}
.order-panel #grpVolume .input-control input {
    width: auto;
    flex: 1;
    min-width: 0;
}
.order-panel #grpVolume .ctrl-btn { width: 22px; flex: none; }

/* ============================================================
   v7 — full-width chart + transparent floating order controls
   ============================================================ */
.main-layout { position: relative; }

/* Order panel floats over the chart, fully transparent so the chart
   extends to the full right. Only the controls catch clicks. */
.order-panel {
    position: absolute;
    top: 0;
    right: 0;            /* default — flush in the top-right corner (sliders full-left) */
    width: auto;
    background: transparent;
    border: none;
    z-index: 30;
    pointer-events: none;
}
.order-panel .panel-body {
    padding: 0;
    gap: 8px;
    background: transparent;
    align-items: flex-end;
}

/* Buy button — transparent, faint outline, clickable (stacked: label over price) */
.order-panel .buy-sell-buttons { gap: 8px; display: flex; justify-content: flex-end; }
.order-panel .action-btn {
    pointer-events: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    width: 140px;
    box-sizing: border-box;
    padding: 8px 14px;
    backdrop-filter: blur(2px);
}
.order-panel .action-btn::before { display: none; }   /* remove gradient box */
.order-panel .action-btn.buy  { border-color: rgba(252,213,53,0.35); }
.order-panel .action-btn:hover { background: rgba(255,255,255,0.04); }

/* Volume — exactly under the Buy button, same width; internals shrink to fit */
.order-panel #grpVolume { justify-content: flex-end; }
.order-panel #grpVolume .input-control {
    pointer-events: auto;
    width: 140px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px 0 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(2px);
}
.order-panel #grpVolume .input-control input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    text-align: left;
    font-size: 13px;
}
.order-panel #grpVolume .input-control .unit { font-size: 10px; margin: 0 2px; }
.order-panel #grpVolume .ctrl-btn { width: 22px; height: 100%; flex: none; font-size: 15px; }

/* ============================================================
   v7 — floating transparent order controls; chart full width
   ============================================================ */
.main-layout { position: relative; }

/* order panel floats over the top-right of the chart; chart fills full width */
.order-panel {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 250px;
    background: transparent;
    border: none;
    z-index: 20;
    pointer-events: none;          /* chart behind stays interactive */
}
.order-panel .panel-body {
    padding: 0;
    gap: 8px;
    pointer-events: none;
}
.order-panel .buy-sell-buttons,
.order-panel #grpVolume { pointer-events: auto; }

/* Sell/Buy: subtle translucent so they blend over the chart but stay readable */
.order-panel .action-btn {
    background: rgba(28, 32, 43, 0.95);
    backdrop-filter: blur(6px);
    padding: 10px 0;
}
.order-panel .action-btn.sell { border-color: rgba(242, 54, 69, 0.4); }
.order-panel .action-btn.buy  { border-color: rgba(41, 98, 255, 0.4); }
.order-panel .action-btn::before { display: none; }   /* drop the inner gradient */

/* Volume: compact control (50 + USDT + -/+), exactly Buy-button width, under it */
.order-panel #grpVolume { flex-direction: row; width: 100%; justify-content: flex-end; }
.order-panel #grpVolume .input-label { display: none; }
.order-panel #grpVolume .input-control {
    width: 140px;          /* same as the Buy button */
    flex: none;
    height: 34px;
    padding: 0 4px 0 10px;
    gap: 2px;
    background: rgba(28, 32, 43, 0.95);
    backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,0.10);
}
.order-panel #grpVolume .input-control input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}
.order-panel #grpVolume .input-control .unit { font-size: 10px; margin: 0 2px; }
.order-panel #grpVolume .ctrl-btn { width: 22px; flex: none; font-size: 15px; }

/* ---- LIVE / SIM toggle ---- */
.live-toggle{
  display:inline-flex; align-items:center; gap:7px; height:34px;
  background:rgba(14,203,129,0.12); border:1px solid rgba(14,203,129,0.5); color:#0ecb81;
  padding:7px 12px; border-radius:8px; font-weight:700; font-size:12px;
  letter-spacing:.5px; cursor:pointer; transition:all .15s; margin-right:8px;
}
.live-toggle:hover{ background:rgba(14,203,129,0.2); }
.live-toggle .live-dot{
  width:8px; height:8px; border-radius:50%; background:#0ecb81;
  box-shadow:0 0 0 0 rgba(242,54,69,0); transition:all .15s;
}
.live-toggle.on{
  background:rgba(242,54,69,.12); border-color:#f23645; color:#f23645;
}
.live-toggle.on:hover{ background:rgba(242,54,69,.2); }
.live-toggle.on .live-dot{
  background:#f23645; box-shadow:0 0 0 4px rgba(242,54,69,.18);
  animation:livePulse 1.4s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(242,54,69,.45); }
  70%{ box-shadow:0 0 0 6px rgba(242,54,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,54,69,0); }
}

/* ---- Crosshair price + % tag (TradingView-style, follows cursor on right axis) ---- */
.crosshair-tag {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    z-index: 13;
    pointer-events: none;
}
.crosshair-tag .ct-add {
    pointer-events: auto;
    cursor: pointer;
    width: 22px; height: 22px;
    flex: none;
    border-radius: 50%;
    border: none;
    background: #363a45;
    color: #eaecef;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.crosshair-tag .ct-body {
    background: #363a45;
    color: #eaecef;
    border-radius: 7px;
    padding: 3px 8px;
    min-width: 56px;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-variant-numeric: tabular-nums;
}
.crosshair-tag .ct-price { font-size: 12px; font-weight: 600; color: #eaecef; line-height: 1.2; }
.crosshair-tag .ct-pct   { font-size: 10px; font-weight: 600; line-height: 1.15; }
.crosshair-tag.up   .ct-pct { color: #0ecb81; }
.crosshair-tag.down .ct-pct { color: #f6465d; }

/* ---- Drawing tools (trend/ray/rect/channel/path) ---- */
.draw-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}
.draw-handles { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.draw-handles .dh-del {
    position: absolute;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: #1c2127;
    border: 1px solid #2b3139;
    color: #f6465d;
    font-size: 11px; line-height: 1;
    display: none; align-items: center; justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 11;
}
.draw-handles .dh-del:hover { background: #f6465d; color: #fff; }

/* ---- Draggable drawing handles ---- */
.draw-handles .dh-pt,
.draw-handles .dh-move {
    position: absolute;
    border-radius: 50%;
    pointer-events: auto;
    z-index: 12;
    display: none;
    box-sizing: border-box;
}
.draw-handles .dh-pt {
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    background: #fff;
    border: 2px solid #fcd535;
    cursor: grab;
}
.draw-handles .dh-pt:active { cursor: grabbing; }
.draw-handles .dh-move {
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    background: rgba(252,213,53,0.85);
    border: 2px solid #fff;
    cursor: move;
}
.draw-handles .dh-move:active { cursor: grabbing; }

.tool-icon .tool-svg { display:block; }

/* ---- Demo deposit button + popup ---- */
.deposit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 203, 129, 0.12);
    border: 1px solid rgba(14, 203, 129, 0.5);
    color: #0ecb81;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 8px;
    transition: background .15s;
}
.deposit-btn:hover { background: rgba(14, 203, 129, 0.22); }

.deposit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.deposit-overlay.open { opacity: 1; visibility: visible; }
.deposit-card {
    width: 320px;
    max-width: 90vw;
    background: rgba(22, 26, 34, 0.72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.deposit-overlay.open .deposit-card { transform: translateY(0) scale(1); opacity: 1; }
.deposit-card .dm-title { font-size: 17px; font-weight: 700; color: #eaecef; }
.deposit-card .dm-sub { font-size: 12px; color: #848e9c; margin: 4px 0 16px; }
.deposit-card input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #eaecef;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 14px;
    outline: none;
}
.deposit-card input:focus { border-color: #0ecb81; }
.deposit-card .dm-actions { display: flex; gap: 10px; margin-top: 16px; }
.deposit-card .dm-actions button {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 11px 0;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.deposit-card .dm-cancel { background: rgba(255,255,255,0.08); color: #c7ccd6; }
.deposit-card .dm-cancel:hover { background: rgba(255,255,255,0.14); }
.deposit-card .dm-add { background: #0ecb81; color: #06170f; }
.deposit-card .dm-add:hover { background: #10d98a; }

/* ---- Position history button (bottom of toolbar) ---- */
.history-btn {
    margin-top: auto;
    margin-bottom: 6px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(41, 98, 255, 0.10);
    border: 1px solid rgba(41, 98, 255, 0.35);
    color: #6f9bff;
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.history-btn:hover { background: rgba(252,213,53,0.22); color: #9bbcff; transform: translateY(-1px); }
.theme-btn {
    margin-bottom: 12px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--bg-panel-light);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.theme-btn:hover { color: var(--text-primary); transform: translateY(-1px); }

/* ---- History popup (animated) ---- */
.history-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.30);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.history-overlay.open { opacity: 1; visibility: visible; }
.history-card {
    width: 690px; max-width: 92vw; max-height: 78vh;
    display: flex; flex-direction: column;
    background: rgba(20, 24, 32, 0.55);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.5);
    overflow: hidden;
    transform: translateY(46px) scale(0.88);
    opacity: 0;
    transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.history-overlay.open .history-card { transform: translateY(0) scale(1); opacity: 1; }
.history-card .hc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.history-card .hc-title { font-size: 16px; font-weight: 700; color: #eaecef; }
.history-card .hc-close { background: none; border: none; color: #848e9c; font-size: 22px; cursor: pointer; line-height: 1; transition:.15s; }
.history-card .hc-close:hover { color: #eaecef; }
.history-card .hc-summary {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 12px 18px; font-size: 12px; color: #b7bdc6;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.history-card .hc-summary b { color: #eaecef; }
.history-card .hc-list {
    overflow-y: auto;
    padding: 8px 10px 14px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    transform: translateZ(0);
}
.history-card .hc-empty { color: #848e9c; text-align: center; padding: 40px 0; font-size: 13px; }
.hc-more {
    display: block; width: calc(100% - 8px); margin: 8px 4px 4px;
    padding: 10px; border-radius: 10px; cursor: pointer;
    background: rgba(252,213,53,0.12); border: 1px solid rgba(252,213,53,0.3);
    color: #5b8cff; font-size: 12.5px; font-weight: 700; letter-spacing:.2px;
    transition: background .15s ease, transform .12s ease;
}
.hc-more:hover { background: rgba(252,213,53,0.2); }
.hc-more:active { transform: scale(0.98); }
.hc-more .hc-more-c { color: #848e9c; font-weight: 500; font-size: 11px; margin-left: 4px; }
.hc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 11px 12px;
    border-radius: 10px;
    margin: 4px 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    content-visibility: auto;
    contain-intrinsic-size: 0 62px;
    animation: hcRowIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hcRowIn { from { opacity:0; transform: translateY(16px) scale(.96); } to { opacity:1; transform: none; } }
.hc-row .hc-r1 { font-weight: 700; font-size: 13px; color: #eaecef; }
.hc-row .hc-pl { font-weight: 700; font-size: 13px; text-align: right; }
.hc-row .hc-meta { font-size: 11px; color: #848e9c; }
.hc-row .hc-fee { font-size: 11px; color: #f0a020; text-align: right; }
.hc-row .side-buy { color: #0ecb81; }
.hc-row .side-sell { color: #f6465d; }

/* ============================================================
   LIGHT THEME
   ============================================================ */
body.light {
    --bg-dark: #f5f7fa;
    --bg-panel: #ffffff;
    --bg-panel-light: #eef1f5;
    --bg-hover: #e7ebf0;
    --text-primary: #1e2329;
    --text-secondary: #707a8a;
    --border-color: #e6e8eb;
}
body.light .chart-watermark { color: rgba(0,0,0,0.05); }

/* order panel translucent surfaces -> light */
body.light .order-panel .action-btn { background: rgba(255,255,255,0.96); border-color: rgba(0,0,0,0.14); }
body.light .order-panel .action-btn:hover { background: rgba(245,247,250,0.97); }
body.light .order-panel #grpVolume .input-control { background: rgba(255,255,255,0.96); border-color: rgba(0,0,0,0.14); }
body.light .order-panel .action-btn .label,
body.light .order-panel .input-control input { color: #1e2329; }

/* crosshair tag */
body.light .crosshair-tag .ct-add,
body.light .crosshair-tag .ct-body { background: #ffffff; color: #1e2329; border: 1px solid #e6e8eb; }

/* balance popup */
body.light .balance-pop { background: #ffffff; border-color: #e6e8eb; color: #1e2329; }

/* deposit + history cards -> light glass */
body.light .deposit-overlay, body.light .history-overlay { background: rgba(0,0,0,0.18); }
body.light .deposit-card { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.10); box-shadow: 0 20px 60px rgba(0,0,0,0.22); }
body.light .history-card {
    background: rgba(255,255,255,0.66); border-color: rgba(0,0,0,0.10);
    box-shadow: 0 30px 90px rgba(0,0,0,0.20);
}
body.light .deposit-card .dm-title, body.light .history-card .hc-title { color: #1e2329; }
body.light .deposit-card input { background: #f2f4f7; border-color: #d8dce1; color: #1e2329; }
body.light .deposit-card .dm-cancel { background: rgba(0,0,0,0.06); color: #444c56; }
body.light .hc-row { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light .hc-row .hc-r1 { color: #1e2329; }
body.light .history-card .hc-close { color: #707a8a; }

/* theme button reflects light */
body.light .theme-btn { background: #eef1f5; border-color: #e0e3e8; color: #5e6673; }

/* scrollbars / misc text already use vars */

/* Trade-line label pills + axis tags -> light & transparent in light theme */
body.light .tbox {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
body.light .tbox .seg { border-right-color: rgba(0,0,0,0.08); }
body.light .tbox .seg[data-role="close"]:hover { background: rgba(0,0,0,0.06); }
body.light .axis-tag { box-shadow: 0 1px 4px rgba(0,0,0,0.18); }

/* light theme: crosshair price text + toast */
body.light .crosshair-tag .ct-price { color: #1e2329; }
body.light .crosshair-tag .ct-add { color: #1e2329; }
body.light #toast {
    background: #ffffff;
    border: 1.5px solid #6cbf4a;
    color: #5aa330;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}

/* light theme: pair/api modals */
body.light .modal-box { background: #ffffff; border-color: #e6e8eb; box-shadow: 0 24px 64px rgba(0,0,0,0.22); }
body.light .modal-header { border-bottom-color: #e6e8eb; }
body.light .modal-title { color: #1e2329; }
body.light .modal-close { color: #707a8a; }
body.light .modal-close:hover { color: #1e2329; }
body.light .pair-search-wrap input { background: #f2f4f7; border-color: #d8dce1; color: #1e2329; }
body.light .pair-categories { border-bottom-color: #e6e8eb; }
body.light .pair-cat-btn { background: #f2f4f7; border-color: #e0e3e8; }
body.light .pair-row:hover { background: rgba(0,0,0,0.04); }
body.light .pair-icon { background: #eaecef; }
body.light .modal-box input, body.light .modal-box textarea { background: #f2f4f7; border-color: #d8dce1; color: #1e2329; }

/* light theme: Buy button -> deposit (green) style */
body.light .order-panel .action-btn.buy {
    background: rgba(14,203,129,0.10);
    border-color: rgba(14,203,129,0.5);
}
body.light .order-panel .action-btn.buy:hover { background: rgba(14,203,129,0.18); }
body.light .order-panel .action-btn.buy .label { color: #0ecb81; }

/* light theme: all OTHER labels (not tp/sl/position) -> green outlined pill */
body.light .crosshair-tag .ct-body,
body.light .crosshair-tag .ct-add,
body.light .tline.hl .tbox {
    background: #ffffff !important;
    border: 1.5px solid #6cbf4a !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: #5aa330 !important;
}
body.light .crosshair-tag .ct-price { color: #5aa330; }
body.light .tline.hl .tbox .seg { color: #5aa330; border-right-color: rgba(108,191,74,0.3); }
body.light .bar-countdown {
    background: #ffffff !important;
    border: 1.5px solid #6cbf4a;
    color: #5aa330 !important;
    border-radius: 999px;
    padding: 2px 8px;
}

/* light theme: top buttons + buy -> clean outlined pill (white bg, accent outline) */
body.light .live-toggle {
    background: #ffffff; border-color: rgba(14,203,129,0.6); color: #0ecb81; border-radius: 999px;
}
body.light .live-toggle:hover { background: rgba(14,203,129,0.08); }
body.light .live-toggle .live-dot { background: #0ecb81; }
body.light .live-toggle.on { background: #ffffff; border-color: rgba(242,54,69,0.6); color: #f23645; }
body.light .live-toggle.on:hover { background: rgba(242,54,69,0.08); }
body.light .live-toggle.on .live-dot { background: #f23645; }

body.light .deposit-btn {
    background: #ffffff; border-color: rgba(14,203,129,0.6); color: #0ecb81; border-radius: 999px;
}
body.light .deposit-btn:hover { background: rgba(14,203,129,0.08); }

body.light .btn-binance-settings {
    background: #ffffff; border-color: rgba(243,186,47,0.6); color: #f3ba2f; border-radius: 999px;
}
body.light .btn-binance-settings:hover { background: rgba(243,186,47,0.08); }

body.light .order-panel .action-btn.buy {
    background: #ffffff; border-color: rgba(14,203,129,0.6); border-radius: 14px;
}
body.light .order-panel .action-btn.buy:hover { background: rgba(14,203,129,0.08); }
body.light .order-panel .action-btn.buy .label { color: #0ecb81; }

/* dark theme: Demo / Deposit / Binance Connect match the Buy button (blue, translucent) */
body:not(.light) .live-toggle,
body:not(.light) .deposit-btn,
body:not(.light) .btn-binance-settings {
    background: rgba(30,34,45,0.55);
    border: 1px solid rgba(252,213,53,0.4);
    color: #fcd535;
}
body:not(.light) .live-toggle:hover,
body:not(.light) .deposit-btn:hover,
body:not(.light) .btn-binance-settings:hover { background: rgba(252,213,53,0.14); }
body:not(.light) .live-toggle .live-dot { background: #fcd535; box-shadow: none; animation: none; }
/* keep LIVE (on) state red as a warning */
body:not(.light) .live-toggle.on {
    background: rgba(242,54,69,0.12); border-color: rgba(242,54,69,0.6); color: #f23645;
}
body:not(.light) .live-toggle.on .live-dot { background: #f23645; }

/* dark theme: Spot logo uses buy-button blue */
body:not(.light) .logo { color: #fcd535; }

/* ===== Tool style popover (drawing color & thickness) ===== */
.tool-settings-pop {
    position: fixed;
    z-index: 1500;
    width: 196px;
    background: #1e2329;
    border: 1px solid #2b3139;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    padding: 12px 14px 14px;
}
.tool-settings-pop[hidden] { display: none; }
.tool-settings-pop .ts-title { font-size: 12px; font-weight: 700; color: #eaecef; margin-bottom: 10px; }
.tool-settings-pop .ts-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #848e9c; margin: 8px 0 6px; }
.tool-settings-pop .ts-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ts-color {
    width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent; box-sizing: border-box;
    transition: transform .12s;
}
.ts-color:hover { transform: scale(1.12); }
.ts-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.ts-width {
    min-width: 38px; height: 30px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #181a20; border: 1px solid #2b3139; border-radius: 6px;
    color: #eaecef; font-size: 11px; cursor: pointer;
}
.ts-width .ts-bar { background: currentColor; width: 16px; border-radius: 2px; }
.ts-width.active { border-color: #fcd535; color: #fcd535; background: rgba(252,213,53,0.12); }
.tool-icon#toolSettingsBtn.active { color: #fcd535; }

/* light theme */
body.light .tool-settings-pop { background:#ffffff; border-color:#e6e8eb; box-shadow:0 16px 48px rgba(0,0,0,0.18); }
body.light .tool-settings-pop .ts-title { color:#1e2329; }
body.light .ts-width { background:#f2f4f7; border-color:#e0e3e8; color:#1e2329; }
body.light .ts-width.active { border-color:#fcd535; color:#fcd535; background:rgba(252,213,53,0.10); }
body.light .ts-color.active { border-color:#1e2329; box-shadow:0 0 0 2px rgba(0,0,0,0.15); }

/* ===== Floating draw toolbar (above selected drawing) ===== */
.draw-toolbar {
    position: fixed;
    z-index: 1600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: #1c2030;
    border: 1px solid #2b3139;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    transform: translateX(-50%);
}
.draw-toolbar[hidden] { display: none; }
.draw-toolbar .dtb-sep { width: 1px; height: 22px; background: #2b3139; }
.draw-toolbar .dtb-colors { display: flex; gap: 6px; }
.draw-toolbar .dtb-widths { display: flex; gap: 5px; }
.dtb-color {
    width: 18px; height: 18px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent; box-sizing: border-box;
    transition: transform .12s;
}
.dtb-color:hover { transform: scale(1.15); }
.dtb-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.dtb-w {
    min-width: 34px; height: 26px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    background: #181a20; border: 1px solid #2b3139; border-radius: 6px;
    color: #c7ccd6; font-size: 10px; font-weight: 600; cursor: pointer;
}
.dtb-w.active { border-color: #fcd535; color: #fcd535; background: rgba(252,213,53,0.14); }
.dtb-del {
    background: none; border: none; color: #f6465d; cursor: pointer;
    font-size: 13px; padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.dtb-del:hover { background: rgba(246,70,93,0.14); }

/* light theme */
body.light .draw-toolbar { background:#ffffff; border-color:#e6e8eb; box-shadow:0 12px 36px rgba(0,0,0,0.18); }
body.light .draw-toolbar .dtb-sep { background:#e6e8eb; }
body.light .dtb-w { background:#f2f4f7; border-color:#e0e3e8; color:#1e2329; }
body.light .dtb-w.active { border-color:#fcd535; color:#fcd535; background:rgba(252,213,53,0.10); }
body.light .dtb-color.active { border-color:#1e2329; box-shadow:0 0 0 2px rgba(0,0,0,0.15); }

/* opacity slider in draw toolbar */
.draw-toolbar .dtb-opacity { display: flex; align-items: center; gap: 7px; }
.draw-toolbar .dtb-opacity input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 78px; height: 4px; border-radius: 3px;
    background: #3a4150; outline: none; cursor: pointer;
}
.draw-toolbar .dtb-opacity input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: #fcd535; border: 2px solid #fff; cursor: pointer;
}
.draw-toolbar .dtb-opacity input[type=range]::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fcd535; border: 2px solid #fff; cursor: pointer;
}
.draw-toolbar .dtb-opacity span { font-size: 10px; color: #c7ccd6; min-width: 32px; font-weight: 600; }
body.light .draw-toolbar .dtb-opacity input[type=range] { background: #d8dce1; }
body.light .draw-toolbar .dtb-opacity span { color: #1e2329; }

/* ===== Page-load entrance animations ===== */
@keyframes introDown  { from{opacity:0; transform:translateY(-16px);} to{opacity:1; transform:translateY(0);} }
@keyframes introUp    { from{opacity:0; transform:translateY(16px);}  to{opacity:1; transform:translateY(0);} }
@keyframes introLeft  { from{opacity:0; transform:translateX(-16px);} to{opacity:1; transform:translateX(0);} }
@keyframes introRight { from{opacity:0; transform:translateX(22px);}  to{opacity:1; transform:translateX(0);} }
@keyframes introScale { from{opacity:0; transform:scale(.985);}       to{opacity:1; transform:scale(1);} }

/* graph */
.chart-area { animation: introScale .8s ease-out .12s both; }

/* top bar pieces (staggered) */
.top-bar .logo                 { animation: introLeft .55s cubic-bezier(.2,.7,.3,1) .05s both; }
.top-bar .tabs                 { animation: introLeft .55s cubic-bezier(.2,.7,.3,1) .12s both; }
.top-bar .live-toggle          { animation: introDown .5s cubic-bezier(.2,.7,.3,1) .30s both; }.top-bar .btn-binance-settings { animation: introDown .5s cubic-bezier(.2,.7,.3,1) .38s both; }
.top-bar .deposit-btn          { animation: introDown .5s cubic-bezier(.2,.7,.3,1) .46s both; }
.top-bar .balance              { animation: introDown .5s cubic-bezier(.2,.7,.3,1) .54s both; }

/* order panel */
.order-panel { animation: introRight .6s cubic-bezier(.2,.7,.3,1) .28s both; }

/* timeframe bar */
.chart-toolbar { animation: introDown .55s cubic-bezier(.2,.7,.3,1) .10s both; }

/* left drawing tools (staggered) */
.sidebar-secondary > * { animation: introLeft .5s cubic-bezier(.2,.7,.3,1) both; opacity:0; }
.sidebar-secondary > *:nth-child(1){ animation-delay:.16s }
.sidebar-secondary > *:nth-child(2){ animation-delay:.21s }
.sidebar-secondary > *:nth-child(3){ animation-delay:.26s }
.sidebar-secondary > *:nth-child(4){ animation-delay:.31s }
.sidebar-secondary > *:nth-child(5){ animation-delay:.36s }
.sidebar-secondary > *:nth-child(6){ animation-delay:.41s }
.sidebar-secondary > *:nth-child(7){ animation-delay:.46s }
.sidebar-secondary > *:nth-child(8){ animation-delay:.51s }
.sidebar-secondary > *:nth-child(9){ animation-delay:.56s }
.sidebar-secondary > *:nth-child(10){ animation-delay:.61s }

/* ===== Right-click context menu (Buy Stop) ===== */
.ctx-menu {
    position: fixed;
    z-index: 1700;
    min-width: 184px;
    padding: 6px;
    background: rgba(28,32,46,0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    transform-origin: top left;
    animation: ctxIn .16s cubic-bezier(.2,.8,.3,1) both;
}
.ctx-menu[hidden] { display: none; }
@keyframes ctxIn {
    from { opacity: 0; transform: scale(.92) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ctx-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: #eaecef;
    cursor: pointer; transition: background .12s;
}
.ctx-item i { color: #0ecb81; font-size: 13px; }
.ctx-item:hover { background: rgba(14,203,129,0.16); }
.ctx-item .ctx-price { margin-left: auto; font-variant-numeric: tabular-nums; color: #0ecb81; font-weight: 700; }
body.light .ctx-menu { background: rgba(255,255,255,0.82); border-color: rgba(0,0,0,0.08); box-shadow: 0 18px 50px rgba(0,0,0,0.18); }
body.light .ctx-item { color: #1e2329; }
body.light .ctx-item:hover { background: rgba(14,203,129,0.12); }

/* frozen crosshair lines (held while hovering the price tag/+) */
.frz-line { position: absolute; pointer-events: none; z-index: 9; }
.frz-h { left: 0; right: 0; height: 0; border-top: 1px dashed #848e9c; }
.frz-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed #848e9c; }
body.light .frz-h { border-top-color: #9aa4b2; }
body.light .frz-v { border-left-color: #9aa4b2; }

/* ===== Fullscreen button + enter animation ===== */
.fs-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    margin-right: 8px;
    background: rgba(30,34,45,0.55);
    border: 1px solid rgba(252,213,53,0.4);
    border-radius: 9px;
    color: #fcd535; font-size: 14px; cursor: pointer;
    transition: background .15s, transform .12s;
}
.fs-btn:hover { background: rgba(252,213,53,0.16); transform: translateY(-1px); }
.fs-btn:active { transform: scale(.9); }
body.light .fs-btn { background:#ffffff; border-color: rgba(14,203,129,0.6); color:#0ecb81; }
body.light .fs-btn:hover { background: rgba(14,203,129,0.10); }

@keyframes fsZoom {
    0%   { opacity:0;  transform: scale(.92);  filter: blur(9px); }
    55%  { opacity:1;  transform: scale(1.014); filter: blur(0); }
    100% { opacity:1;  transform: scale(1);     filter: blur(0); }
}
body.fs-anim .terminal-container { animation: fsZoom .62s cubic-bezier(.22,.9,.28,1) both; }
.top-bar .fs-btn { animation: introDown .5s cubic-bezier(.2,.7,.3,1) .26s both; }

/* ===== Dual (split) chart ===== */
.charts-row { display: flex; flex: 1; min-height: 0; min-width: 0; }
.charts-row > .chart-area { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; }
.chart-area-2 { display: none; border-left: 1px solid var(--border-color); }
body.dual .chart-area-2 { display: block; }
#dualChartBtn.active { background: rgba(14,203,129,0.18); }
#keepPosBtn.active { background: rgba(14,203,129,0.18); border-color: rgba(14,203,129,0.7); color: #0ecb81; }
body.light #keepPosBtn.active { background: rgba(14,203,129,0.14); }
body.light #dualChartBtn.active { background: rgba(14,203,129,0.14); }

/* dual mode: the ACTIVE (trading) chart gets a green inset border; the other is clickable */
body.dual .chart-area { cursor: pointer; transition: box-shadow .15s ease; }
body.dual .chart-area.active-chart { box-shadow: inset 0 0 0 2px rgba(14,203,129,0.45); cursor: default; }
body.dual .chart-area:not(.active-chart):hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.10); }
body.light.dual .chart-area:not(.active-chart):hover { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08); }
body.dual .chart-area:not(.active-chart) .chart-overlays,
body.dual .chart-area:not(.active-chart) .draw-handles,
body.dual .chart-area:not(.active-chart) .draw-layer { pointer-events: none; }

/* ===== Indicators button + dropdown ===== */
.indicators-btn{
    display:inline-flex; align-items:center; gap:6px;
    margin-left:10px; padding:4px 10px; height:26px;
    background:transparent; border:none; cursor:pointer;
    color:var(--text-secondary); font-size:12.5px; font-weight:600; font-family:inherit;
    border-radius:4px; transition:background .15s,color .15s;
}
.indicators-btn:hover{ background:rgba(255,255,255,0.06); color:var(--text-primary); }
.indicators-btn.active{ background:rgba(252,213,53,0.15); color:#fcd535; }
.indicators-btn.active:hover{ background:rgba(14,203,129,0.22); }
.indicators-btn i{ font-size:13px; }
body.light .indicators-btn:hover{ background:rgba(0,0,0,0.05); }

.ind-menu{
    position:fixed; top:46px; left:300px; z-index:60; width:280px;
    background:var(--bg-panel); border:1px solid var(--border-color);
    border-radius:10px; padding:8px; box-shadow:0 12px 34px rgba(0,0,0,0.5);
    animation:indMenuIn .14s ease;
}
@keyframes indMenuIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.ind-menu-head{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--text-secondary); padding:4px 6px 8px; }
.ind-row{ padding:8px 6px; border-top:1px solid var(--border-color); }
.ind-row:first-of-type{ border-top:none; }
.ind-tog{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px;
    font-weight:600; color:var(--text-primary); }
.ind-tog input{ width:15px; height:15px; accent-color:#fcd535; cursor:pointer; }
.ind-set{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0 23px; }
.ind-set label{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-secondary); }
.ind-set input[type="number"]{ width:50px; height:24px; padding:2px 6px; background:var(--bg-dark);
    border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary); font-size:12px; }
.ind-set input[type="color"]{ width:30px; height:24px; padding:0; border:1px solid var(--border-color);
    border-radius:5px; background:transparent; cursor:pointer; }
.ind-set select{ height:24px; padding:1px 6px; background:var(--bg-dark); border:1px solid var(--border-color);
    border-radius:5px; color:var(--text-primary); font-size:12px; cursor:pointer; }
.ind-note{ font-size:11px; color:var(--text-secondary); font-style:italic; }

/* EMA multi-list + section header inside indicators menu */
.ind-sec-head{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--text-primary); }
.ind-add{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; font-size:11px; font-weight:600;
    background:rgba(252,213,53,0.15); color:#4d8bff; border:none; border-radius:5px; cursor:pointer; font-family:inherit; }
.ind-add:hover{ background:rgba(252,213,53,0.25); }
.ema-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ema-item{ display:flex; align-items:center; gap:8px; }
.ema-item .ema-fields{ display:flex; align-items:center; gap:8px; flex:1; }
.ema-item label{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-secondary); }
.ema-item input[type="number"]{ width:46px; height:24px; padding:2px 5px; background:var(--bg-dark);
    border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary); font-size:12px; }
.ema-item input[type="color"]{ width:28px; height:24px; padding:0; border:1px solid var(--border-color);
    border-radius:5px; background:transparent; cursor:pointer; }
.ema-del{ background:none; border:none; color:#f6465d; cursor:pointer; font-size:13px; padding:2px 4px; opacity:.75; }
.ema-del:hover{ opacity:1; }
.ema-empty{ font-size:11px; color:var(--text-secondary); font-style:italic; }

/* EMA enable checkbox in list rows */
.ema-tog{ display:flex; align-items:center; }
.ema-tog input{ width:15px; height:15px; accent-color:#fcd535; cursor:pointer; }

/* small delete (×) button on Volume / RSI sub-panes */
.pane-del{
    position:absolute; left:6px; z-index:30; width:18px; height:18px;
    display:none; align-items:center; justify-content:center;
    border-radius:4px; cursor:pointer; padding:0;
    background:rgba(30,34,45,0.85); color:#f6465d; border:1px solid var(--border-color);
    font-size:14px; line-height:1; font-weight:700;
}
.pane-del:hover{ background:rgba(242,70,93,0.22); color:#ff6b7d; }
body.light .pane-del{ background:rgba(255,255,255,0.9); }

/* pretty left→right reveal sweep when an indicator is added */
.ind-sweep{
    position:absolute; top:0; bottom:0; left:-180px; width:180px; z-index:9;
    pointer-events:none; will-change:left,opacity; filter:blur(2px);
    background:linear-gradient(90deg,
        rgba(252,213,53,0) 0%,
        rgba(252,213,53,0.10) 38%,
        rgba(130,180,255,0.34) 50%,
        rgba(252,213,53,0.10) 62%,
        rgba(252,213,53,0) 100%);
    animation:indSweep .72s cubic-bezier(.22,.61,.36,1) forwards;
}
.ind-sweep::after{   /* a crisp leading edge line for extra polish */
    content:''; position:absolute; top:0; bottom:0; right:78px; width:1.5px;
    background:linear-gradient(180deg, transparent, rgba(160,200,255,0.55), transparent);
}
@keyframes indSweep{
    0%{ left:-180px; opacity:0; }
    12%{ opacity:1; }
    88%{ opacity:1; }
    100%{ left:100%; opacity:0; }
}
body.light .ind-sweep{
    background:linear-gradient(90deg,
        rgba(252,213,53,0) 0%,
        rgba(252,213,53,0.08) 38%,
        rgba(252,213,53,0.20) 50%,
        rgba(252,213,53,0.08) 62%,
        rgba(252,213,53,0) 100%);
}

/* Fib settings gear in floating toolbar */
.dtb-gear{ background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:13px; padding:4px 6px; border-radius:5px; }
.dtb-gear:hover{ color:var(--text-primary); background:rgba(255,255,255,0.08); }

/* Fib settings popup */
.fib-menu{
    position:fixed; z-index:120; width:250px; max-height:70vh; overflow:auto;
    background:var(--bg-panel); border:1px solid var(--border-color); border-radius:10px;
    padding:10px; box-shadow:0 14px 40px rgba(0,0,0,0.55); animation:indMenuIn .14s ease;
}
.fib-head{ font-size:12px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.fib-opts{ display:flex; flex-direction:column; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--border-color); }
.fib-opts label{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.fib-opts input[type="number"]{ width:50px; height:24px; padding:2px 6px; background:var(--bg-dark);
    border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary); font-size:12px; }
.fib-chk input{ width:15px; height:15px; accent-color:#fcd535; cursor:pointer; }
.fib-levels-head{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-secondary); margin:8px 0 6px; letter-spacing:.4px; }
.fib-levels{ display:flex; flex-direction:column; gap:5px; }
.fib-lvl{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-primary); }
.fib-lvl input[type="checkbox"]{ width:15px; height:15px; accent-color:#fcd535; cursor:pointer; }
.fib-lvl input[type="color"]{ width:28px; height:22px; padding:0; border:1px solid var(--border-color); border-radius:4px; background:transparent; cursor:pointer; margin-left:auto; }
.fib-lvl .fib-r{ min-width:54px; font-variant-numeric:tabular-nums; }

/* Fib floating toolbar: hide colour/opacity/width (fib uses its own per-level settings) */
.draw-toolbar.fib-mode .dtb-colors,
.draw-toolbar.fib-mode .dtb-opacity,
.draw-toolbar.fib-mode .dtb-widths,
.draw-toolbar.fib-mode .dtb-sep{ display:none; }

/* Editable fib level ratio input */
.fib-r-input{ width:56px; height:24px; padding:2px 6px; background:var(--bg-dark);
    border:1px solid var(--border-color); border-radius:5px; color:var(--text-primary);
    font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
.fib-r-input:focus{ outline:none; border-color:#fcd535; }
.fib-pct{ font-size:12px; color:var(--text-secondary); margin-right:2px; }

/* ===== Exchange picker (transparent, animated) ===== */
.exch-overlay{
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,0.30); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.exch-overlay.open{ opacity:1; visibility:visible; }
.exch-card{
    width:440px; max-width:92vw;
    background:rgba(22,26,34,0.94); backdrop-filter:blur(22px) saturate(1.4);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid rgba(255,255,255,0.14); border-radius:18px;
    box-shadow:0 30px 90px rgba(0,0,0,0.5); padding:18px 20px 22px;
    transform:translateY(40px) scale(0.9); opacity:0;
    transition:transform .46s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.exch-overlay.open .exch-card{ transform:none; opacity:1; }
.exch-head{ display:flex; align-items:center; justify-content:space-between; }
.exch-title{ font-size:16px; font-weight:800; color:#eaecef; }
.exch-close{ background:rgba(255,255,255,0.06); border:none; color:#aeb4be; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; transition:.15s; }
.exch-close:hover{ background:rgba(246,70,93,0.85); color:#fff; transform:rotate(90deg); }
.exch-sub{ font-size:12px; color:#848e9c; margin:4px 0 16px; }
.exch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.exch-opt{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:18px 8px 14px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    opacity:0; transform:translateY(14px) scale(.94);
    animation:exchIn .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0ms);
}
@keyframes exchIn{ to{ opacity:1; transform:none; } }
.exch-overlay:not(.open) .exch-opt{ animation:none; opacity:0; transform:translateY(14px) scale(.94); }
.exch-opt:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.4); }
.exch-opt:active{ transform:translateY(-1px) scale(.99); }
.exch-logo{ width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:#0d1017; border:1px solid rgba(255,255,255,0.10); overflow:hidden; }
.exch-name{ font-size:13px; font-weight:700; color:#eaecef; }
.exch-dot{ position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%;
    background:#5b6675; box-shadow:0 0 0 2px rgba(0,0,0,0.25); transition:.2s; }
.exch-dot.connected{ background:#0ecb81; box-shadow:0 0 0 2px rgba(14,203,129,0.25), 0 0 10px rgba(14,203,129,0.6); }
.wm{ font-weight:900; letter-spacing:-0.5px; }
.wm-bybit{ font-weight:800; font-size:17px; color:#fff; letter-spacing:.5px; font-style:normal; }
.wm-bybit span{ color:#f7a600; }
body.light .exch-card{ background:rgba(255,255,255,0.96); border-color:rgba(0,0,0,0.1); }
body.light .exch-title,body.light .exch-name{ color:#1e2329; }
body.light .exch-opt{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.10); }
body.light .exch-logo{ background:#0d1017; border-color:rgba(0,0,0,0.12); }

/* =========================================================================
   MOBILE / RESPONSIVE
   ========================================================================= */

/* dynamic viewport height so the chart fills correctly under mobile URL bars */
@media (max-width: 900px){
  body, .terminal-container { height: 100vh; height: 100dvh; }
}

/* ---------- TABLET & below (≤900px) ---------- */
@media (max-width: 900px){
  .top-bar { padding: 0 10px; }
  .logo { font-size: 18px; margin-right: 12px; }
  .top-left { flex: 1 1 auto; min-width: 0; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .top-right { flex-shrink: 0; gap: 6px; }
  .btn-binance-settings { padding: 7px 10px; }
  .chart-toolbar { padding: 0 8px; }
  .toolbar-left { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .toolbar-left::-webkit-scrollbar { display: none; }
  .timeframes { gap: 8px; }
}

/* ---------- PHONE (≤560px) ---------- */
@media (max-width: 560px){
  /* top bar wraps into TWO rows so nothing is cut off:
     row 1 = logo + tabs + search, row 2 = controls + balance */
  .top-bar { height: auto; min-height: 46px; padding: 6px 8px; flex-wrap: wrap; row-gap: 6px; }
  .top-left  { flex: 1 1 100%; min-width: 0; height: auto; order: 1; }
  .top-right { flex: 1 1 100%; min-width: 0; height: auto; order: 2; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .logo { font-size: 16px; margin-right: 10px; }

  /* tabs scrollable, take the slack on row 1 */
  .tabs { gap: 4px; flex: 1 1 auto; min-width: 0; }

  /* fullscreen still not needed; everything else now fits on its own row */
  #fullscreenBtn { display: none !important; }
  .fs-btn { padding: 6px 8px; }

  /* LIVE toggle compact */
  .live-toggle { padding: 6px 9px; font-size: 11px; margin-right: 0; }

  /* Binance Connect & Deposit keep their full labels — there's room on row 2 now */
  .btn-binance-settings { font-size: 12px; padding: 7px 11px; margin-right: 0; }
  .btn-binance-settings i { font-size: 13px; }
  .deposit-btn { font-size: 12px; padding: 7px 11px; margin-right: 0; }
  .deposit-btn i { font-size: 12px; }

  /* balance pinned to the far right of row 2 */
  .balance { font-size: 15px; margin-left: auto; }
  .balance .currency { font-size: 10px; }
  .balance .balance-sub { display: none; }

  /* drawing rail thinner */
  .sidebar-secondary { width: 34px; gap: 12px; }
  .tool-icon { width: 22px; height: 22px; font-size: 13px; }
  .history-btn, .theme-btn { font-size: 13px; }

  /* chart toolbar: scrollable row, tighter */
  .chart-toolbar { height: 38px; padding: 0 6px; }
  .timeframes { gap: 6px; font-size: 12px; }
  .indicators-btn { padding: 4px 7px; }
  .indicators-btn span { display: none; }            /* icon-only indicators */
  .autotpsl { margin-left: 4px; padding-left: 8px; gap: 6px; }
  .autotpsl-label { display: none; }                 /* keep just the toggle */
  .tpratio { margin-left: 4px; padding-left: 8px; gap: 4px; }
  .tpratio-label { font-size: 11px; }
  .tpratio-seg button { padding: 3px 5px; }
  .autotpsl::before { content: "TP/SL"; font-size: 11px; color: var(--text-dim,#9aa3b2); font-weight:500; }
  #showTpSlWrap::before { content: "Show"; }
  #autoTrendWrap::before { content: "Trend"; }

  /* floating order ticket: keep top-right but slimmer */
  .order-panel { top: 6px; right: 8px; width: 168px; }
  .order-panel .action-btn { padding: 8px 0; }
  .order-panel .action-btn .label { font-size: 11px; }
  .order-panel .action-btn .price { font-size: 14px; }
  .order-panel #grpVolume .input-control { width: 120px; height: 32px; }

  /* position / TP-SL labels a touch smaller so they don't dominate */
  .tbox { font-size: 11px; }
  .tbox .seg { padding: 0 6px; }
  .tbadge { height: 20px; padding: 0 7px; font-size: 10px; }
  .tline { padding-right: 56px; }

  /* modals fill the screen nicely */
  .modal-box { width: 95vw; }
  .modal-body { padding: 14px 16px 18px; }
  .ind-menu, .ctx-menu { max-width: 94vw; }

  /* history popup full width */
  .history-card { width: 95vw; max-width: 95vw; max-height: 82vh; }
  .history-card .hc-list > * { width: 100% !important; max-width: 100% !important; }

  /* dual charts stack vertically instead of cramped side-by-side */
  .charts-row { flex-direction: column; }
  .chart-area-2 { border-left: none; border-top: 1px solid var(--border-color); }

  /* exchange picker fits */
  .exch-card { width: 95vw; max-width: 95vw; }

  /* floating draw toolbar (colors / opacity / width): stay centered & inside the screen,
     wrap to multiple rows instead of overflowing off the right edge */
  .draw-toolbar {
    left: 50% !important; right: auto !important;
    max-width: calc(100vw - 12px);
    flex-wrap: wrap; justify-content: center; row-gap: 8px; gap: 8px; padding: 7px 10px;
  }
  .draw-toolbar .dtb-colors { flex-wrap: wrap; justify-content: center; }
  .draw-toolbar .dtb-opacity input[type=range] { width: 70px; }
  .draw-toolbar .dtb-sep { display: none; }   /* drop dividers when wrapped */
}

/* very small phones */
@media (max-width: 380px){
  .logo { display: none; }                 /* reclaim space for tabs */
  .order-panel { width: 150px; }
  .order-panel #grpVolume .input-control { width: 108px; }
}

/* =========================================================================
   BINANCE THEME — signature refinements (appended; overrides above)
   ========================================================================= */

/* Brand logo: Binance-yellow with a soft sheen. */
body:not(.light) .logo {
    color: transparent;
    background: linear-gradient(100deg, #f0b90b 0%, #fcd535 30%, #fff3c4 46%, #fcd535 60%, #f0b90b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 16px rgba(252,213,53,0.25);
}

/* Active tab: Binance-yellow underline + faint glow */
.tab.active::after {
    background: linear-gradient(90deg, #f0b90b, #fcd535, #f0b90b);
    box-shadow: 0 0 8px rgba(252,213,53,0.45);
}
.tab.active { color: #fcd535; }

/* Binance-style neutral scrollbars (flat, not yellow) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #181a20; }
::-webkit-scrollbar-thumb {
    background: #2b3139;
    border-radius: 6px;
    border: 2px solid #181a20;
}
::-webkit-scrollbar-thumb:hover { background: #474d57; }
* { scrollbar-color: #2b3139 #181a20; }

/* Primary call-to-action (Connect / settings) — yellow sheen on hover */
body:not(.light) .btn-binance-settings:hover,
body:not(.light) .deposit-btn:hover {
    border-color: rgba(252,213,53,0.7);
    box-shadow: 0 0 0 1px rgba(252,213,53,0.25), 0 0 14px rgba(252,213,53,0.18);
    color: #fcd535;
}

/* =========================================================================
   LIGHT THEME — segmented (Futures/Perp) look for pair tabs + tool select,
   plus dark-yellow Spot logo. (Light theme only.)
   ========================================================================= */

/* Spot logo: same yellow as the pair-selection pill */
body.light .logo { color: #fcd535; }

/* Pair tabs -> segmented pill group, same look as .vol-seg (Futures/Perp) */
body.light .tabs {
    align-self: center;
    align-items: center;
    height: auto;
    gap: 4px;
    padding: 3px;
    background: #f1f3f6;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    margin: 0 8px 0 4px;
}
body.light .tab {
    border-right: none;
    border-radius: 6px;
    padding: 6px 14px;
    gap: 6px;
    color: #5b6472;
    font-weight: 600;
    transition: background .15s, color .15s;
}
body.light .tab:hover:not(.active) { background: #e7ebf0; color: #1e2329; }
body.light .tab.active {
    background: #ffe273;
    color: #000;
}
body.light .tab.active::after { display: none; }   /* drop the underline; the pill is the active state now */
body.light .tab-close:hover { color: #f23645 !important; }

/* Tool select -> active tool = solid yellow pill, same as an active seg button (slightly lighter yellow) */
body.light .tool-icon { transition: background .15s, color .15s; }
body.light .tool-icon:hover:not(.active) { background: #e7ebf0; color: #1e2329; }
body.light .tool-icon.active {
    background: #ffe273;
    color: #000;
}
body.light .tool-icon#toolSettingsBtn.active { color: #000; }

/* Time frame bar -> segmented pill group, same look as the pair tabs (light theme only) */
body.light .timeframes {
    gap: 4px;
    padding: 3px;
    background: #f1f3f6;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
}
body.light .timeframes span {
    padding: 5px 11px;
    border-radius: 6px;
    color: #5b6472;
    font-weight: 600;
    transition: background .15s, color .15s;
}
body.light .timeframes span:hover:not(.active) { background: #e7ebf0; color: #1e2329; }
body.light .timeframes span.active {
    background: #ffe273;
    color: #000;
}

/* Live Data + Signals buttons -> active = solid yellow pill, same as the tab/tool selection (light theme only) */
body.light .indicators-btn { border-radius: 6px; }
body.light .indicators-btn.active {
    background: #ffe273;
    color: #000;
}
body.light .indicators-btn.active:hover {
    background: #ffd84a;
    color: #000;
}

/* Spot logo: flat #fcd535 in BOTH themes (dark theme previously used a gold gradient) */
body:not(.light) .logo,
body.light .logo {
    color: #fcd535;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #fcd535;
    text-shadow: none;
}

/* Futures / Perp segmented buttons -> same lighter yellow as the rest (light theme only) */
body.light .vol-seg button.on { background: #ffe273; color: #000; }

/* =========================================================================
   LIGHT THEME — Position History: less transparency + visible "Trades" count
   ========================================================================= */
/* Card near-solid (was 0.66 -> chart bled through); soft panel grey */
body.light .history-card {
    background: rgba(238,241,245,0.985);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    border-color: rgba(0,0,0,0.10);
}
/* Rows: solid white cards on the grey panel (no chart showing through) */
body.light .hc-row {
    background: #ffffff;
    border-color: #e3e7ec;
}
/* Summary labels + the Trades number readable on light */
body.light .history-card .hc-summary { color: #5b6472; }
body.light .history-card .hc-summary b { color: #1e2329; }

/* Light theme: neutral light scrollbars (global scrollbar was near-black -> showed as a black bar on light modals/lists) */
body.light ::-webkit-scrollbar-track { background: #eef1f5; }
body.light ::-webkit-scrollbar-thumb {
    background: #c4cad3;
    border-radius: 6px;
    border: 2px solid #eef1f5;
}
body.light ::-webkit-scrollbar-thumb:hover { background: #aab1bd; }
body.light * { scrollbar-color: #c4cad3 #eef1f5; }


/* ============================================================
   HORIZONTAL RAY  (TradingView-style tool + settings dialog)
   ============================================================ */
.draw-axis-tags { z-index: 11; }
.draw-axis-tags .axis-tag { font-weight: 600; }
.draw-handles .dh-pt.locked { cursor: default; opacity: .75; }
.draw-handles .dh-pt.locked.slide { opacity: 1; border-color: #f3ba2f; }   /* locked trend line: ends slide along the line */

/* floating toolbar extras (line style / clone / lock) */
.draw-toolbar .dtb-styles { display: flex; gap: 5px; }
.draw-toolbar .dtb-styles[hidden], .draw-toolbar .dtb-sep[hidden] { display: none; }
.dtb-ls {
    width: 34px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: #181a20; border: 1px solid #2b3139; border-radius: 6px; color: #c7ccd6; cursor: pointer; padding: 0;
}
.dtb-ls.active { border-color: #fcd535; color: #fcd535; background: rgba(252,213,53,0.14); }
.dtb-gear.on { color: #fcd535; }
body.light .dtb-ls { background:#f2f4f7; border-color:#e0e3e8; color:#1e2329; }
body.light .dtb-ls.active { border-color:#fcd535; color:#c99400; background:rgba(252,213,53,0.14); }

/* settings dialog */
.hray-dlg {
    position: fixed; z-index: 1650; width: 390px; max-width: calc(100vw - 16px);
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55); color: var(--text-primary); font-size: 13px;
    animation: indMenuIn .14s ease;
}
.hray-dlg[hidden], .hr-pane[hidden], .hr-colorpop[hidden], .hr-tpl-menu[hidden] { display: none; }
.hr-head { display: flex; align-items: center; padding: 14px 16px 8px; cursor: move; user-select: none; }
.hr-title { font-size: 17px; font-weight: 700; flex: 1; }
.hr-x { background: none; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 5px; }
.hr-x:hover { color: var(--text-primary); background: var(--bg-hover); }
.hr-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border-color); }
.hr-tabs button {
    background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; padding: 9px 9px 8px; cursor: pointer; margin-bottom: -1px;
}
.hr-tabs button:hover { color: var(--text-primary); }
.hr-tabs button.on { color: var(--text-primary); border-bottom-color: #2962ff; }
.hr-body { padding: 14px 16px 6px; min-height: 176px; }
.hr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hr-lbl { min-width: 104px; color: var(--text-primary); }
.hr-chk { cursor: pointer; }
.hr-chk input, .hr-vis input[type=checkbox] { width: 16px; height: 16px; accent-color: #2962ff; cursor: pointer; }
.hr-swatch {
    width: 34px; height: 30px; padding: 4px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
    background: var(--bg-dark); border: 1px solid var(--border-color);
}
.hr-swatch:hover { border-color: var(--text-secondary); }
.hr-swatch i {
    display: block; width: 100%; height: 100%; border-radius: 3px;
    background-image: linear-gradient(var(--c,#2962ff),var(--c,#2962ff)),
        repeating-conic-gradient(#b8bcc6 0% 25%, #ffffff 0% 50%);
    background-size: auto, 8px 8px;
}
.hr-seg { display: flex; gap: 5px; }
.hr-seg button, .hr-tog {
    min-width: 40px; height: 30px; padding: 0 7px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 6px;
    color: var(--text-primary); cursor: pointer; font-size: 12px;
}
.hr-tog { min-width: 32px; font-size: 14px; }
.hr-tog i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.hr-seg button:hover, .hr-tog:hover { border-color: var(--text-secondary); }
.hr-seg button.on, .hr-tog.on { border-color: #2962ff; background: rgba(41,98,255,0.16); color: #5b8cff; }
body.light .hr-seg button.on, body.light .hr-tog.on { color: #2962ff; }
.hray-dlg select, .hray-dlg input[type=number], .hray-dlg textarea {
    height: 30px; padding: 3px 8px; background: var(--bg-dark); border: 1px solid var(--border-color);
    border-radius: 6px; color: var(--text-primary); font-size: 13px; outline: none; min-width: 0;
}
.hray-dlg select:focus, .hray-dlg input[type=number]:focus, .hray-dlg textarea:focus { border-color: #2962ff; }
.hray-dlg textarea { width: 100%; height: auto; min-height: 84px; padding: 8px; resize: vertical; margin-bottom: 12px; line-height: 1.35; }
.hray-dlg [data-pane="coords"] input[type=number] { flex: 1; }
.hr-hint { font-size: 11.5px; color: var(--text-secondary); margin: -4px 0 10px; }
.hr-vis { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hr-vis-row { display: flex; align-items: center; gap: 10px; }
.hr-vis-row label { display: flex; align-items: center; gap: 9px; min-width: 110px; cursor: pointer; }
.hr-vis-row input[type=number] { width: 64px; }
.hr-vis-row .hr-dash { color: var(--text-secondary); }
.hr-vis-row.off input[type=number] { opacity: .45; }
.hr-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border-color); }
.hr-grow { flex: 1; }
.hr-btn {
    height: 32px; padding: 0 14px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600;
    background: transparent; border: 1px solid var(--border-color); color: var(--text-primary);
}
.hr-btn:hover { background: var(--bg-hover); }
.hr-btn.primary { background: #2962ff; border-color: #2962ff; color: #fff; }
.hr-btn.primary:hover { background: #1e53e5; }
.hr-btn i { font-size: 10px; margin-left: 5px; }
.hr-tpl { position: relative; }
.hr-tpl-menu {
    position: absolute; left: 0; bottom: 38px; min-width: 210px; padding: 5px; z-index: 2;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}
.hr-tpl-menu div { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.hr-tpl-menu div:hover { background: var(--bg-hover); }

/* colour popover (palette + custom + opacity) */
.hr-colorpop {
    position: fixed; z-index: 1660; width: 252px; padding: 10px;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.55);
}
.hr-pal { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 10px; }
.hr-pal span { aspect-ratio: 1; border-radius: 3px; cursor: pointer; border: 1px solid rgba(128,128,128,0.35); box-sizing: border-box; }
.hr-pal span:hover { transform: scale(1.18); }
.hr-pal span.on { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.hr-cp-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.hr-cp-row > span { min-width: 52px; }
.hr-cp-row input[type=color] { width: 44px; height: 24px; padding: 0; border: 1px solid var(--border-color); border-radius: 4px; background: transparent; cursor: pointer; }
.hr-cp-row input[type=range] { flex: 1; accent-color: #2962ff; min-width: 0; }
.hr-cp-row b { min-width: 38px; text-align: right; color: var(--text-primary); font-weight: 600; }

/* right-click menu on a ray */
.hray-ctx .ctx-item i { color: var(--text-secondary); width: 14px; text-align: center; }
.hray-ctx .ctx-item:hover { background: rgba(41,98,255,0.18); }
.hray-ctx .ctx-item.danger, .hray-ctx .ctx-item.danger i { color: #f6465d; }
.hray-ctx .ctx-item.danger:hover { background: rgba(246,70,93,0.14); }

@media (max-width: 480px){
    .hray-dlg { width: calc(100vw - 16px); }
    .hr-lbl { min-width: 84px; }
}

/* ============================================================
   TRADINGVIEW-STYLE DRAWING TOOLS (all tools)
   ============================================================ */
/* floating toolbar: compact icon buttons + dropdowns */
.draw-toolbar { gap: 4px; padding: 5px 8px; }
.dtb-b {
    position: relative; height: 30px; min-width: 32px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: none; border-radius: 6px; color: #d1d4dc; font-size: 13px; cursor: pointer; line-height: 1;
}
.dtb-b[hidden], .dtb-dd[hidden] { display: none; }
.dtb-b:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dtb-b.on { color: #5b8cff; background: rgba(41,98,255,0.16); }
.dtb-b b { font-size: 14px; font-weight: 700; font-family: Georgia, 'Times New Roman', serif; }
.dtb-b span { font-size: 12px; font-weight: 600; }
.dtb-colorbtn { padding-bottom: 5px; }
.dtb-colorbtn .dtb-bar { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,0.35); }
.dtb-b.dtb-del { color: #f6465d; font-size: 13px; padding: 0 7px; }
.dtb-b.dtb-del:hover { background: rgba(246,70,93,0.14); color: #f6465d; }
.dtb-dd { position: relative; display: inline-flex; }
.dtb-menu {
    position: absolute; top: 36px; left: 0; min-width: 150px; padding: 5px; z-index: 5;
    background: #1c2030; border: 1px solid #2b3139; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,0.5);
}
.dtb-menu[hidden] { display: none; }
.dtb-menu div { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; color: #d1d4dc; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.dtb-menu div:hover { background: rgba(255,255,255,0.08); }
.dtb-menu div.on { color: #5b8cff; background: rgba(41,98,255,0.14); }
body.light .dtb-b { color: #434651; }
body.light .dtb-b:hover { background: rgba(0,0,0,0.06); color: #131722; }
body.light .dtb-b.on { color: #2962ff; }
body.light .dtb-menu { background: #ffffff; border-color: #e6e8eb; box-shadow: 0 12px 34px rgba(0,0,0,0.18); }
body.light .dtb-menu div { color: #131722; }
body.light .dtb-menu div:hover { background: rgba(0,0,0,0.05); }
body.light .dtb-menu div.on { color: #2962ff; }

/* settings dialog: extra rows used by the other tools */
.hr-body { max-height: min(62vh, 520px); overflow-y: auto; }
.hr-row { flex-wrap: nowrap; }
.hr-row.hr-wrap { flex-wrap: wrap; row-gap: 10px; column-gap: 16px; }
.hr-row .hr-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.hr-row .hr-chk.hr-lblw { min-width: 104px; }
.hr-row .hr-chk + .hr-chk { margin-left: 8px; }
.hr-row.hr-wrap .hr-chk + .hr-chk { margin-left: 0; }
.hr-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin: 4px 0 10px; }
.hr-pane .hr-row > input[type=number] { flex: 1; min-width: 0; }
.hr-swatch.sm { width: 28px; height: 26px; padding: 3px; }
.hr-range { flex: 1; min-width: 0; accent-color: #2962ff; }
.hr-pct { min-width: 40px; text-align: right; font-weight: 600; font-size: 12px; }
.hr-fib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.hr-fib-lv { display: flex; align-items: center; gap: 7px; }
.hr-fib-lv input[type=checkbox] { width: 16px; height: 16px; accent-color: #2962ff; cursor: pointer; flex-shrink: 0; }
.hr-fib-lv input[type=number] { flex: 1; min-width: 0; width: 60px; }
.hray-dlg input:disabled { opacity: .45; }

/* left toolbar toggles (magnet / stay in drawing mode / lock all / hide all) */
.tool-icon.tool-toggle.active { background: rgba(41,98,255,0.18); color: #5b8cff; }
body.light .tool-icon.tool-toggle.active { background: rgba(41,98,255,0.12); color: #2962ff; }
.draw-handles .dh-pt { border-color: #2962ff; }

/* ============================================================
   POSITION / TP / SL BADGES — 10% smaller + hovered badge comes to the front
   ============================================================ */
/* 1) size: every dimension × 0.90 */
.tbox { height: 21.6px; font-size: 10.8px; border-width: 1.35px; border-radius: 5.4px; box-shadow: 0 2px 7px rgba(0,0,0,0.35); }
.tbox .seg { padding: 0 8.1px; }
.tbox .seg[data-role="close"] { padding: 0 7.2px; }
.tbox .seg.tk { font-size: 9.9px; padding: 0 6.3px; margin: 2.7px 0 2.7px 3.6px; border-radius: 3.6px; }
.tbadges { gap: 5.4px; margin-right: 7.2px; }
.tbadge { height: 19.8px; padding: 0 8.1px; font-size: 9.9px; border-width: 1.35px; border-radius: 4.5px; letter-spacing: .27px; }
.tline .hit { height: 20px; }
@media (max-width: 560px){
  .tbox { font-size: 9.9px; }
  .tbox .seg { padding: 0 5.4px; }
  .tbadge { height: 18px; padding: 0 6.3px; font-size: 9px; }
}

/* 2) stacking: a row no longer forms its own layer, so ALL badges sit above ALL the invisible
      grab-strips (a neighbour's strip used to cover part of a badge), and the badge under the
      arrow — or the last one pressed — is lifted above the others. */
.tline { transform: none; z-index: auto; }
.tline::before { z-index: 0; }
.tline .hit { z-index: 1; }
.tbox { z-index: 2; }
.tbadges { z-index: 3; }
.tline.tl-top .tbox, .tline.tl-top .tbadges { z-index: 6; }
.tline:hover .tbox, .tline:hover .tbadges { z-index: 8; }
.tline:hover .tbox { box-shadow: 0 0 0 1.5px currentColor, 0 3px 10px rgba(0,0,0,0.5); }
body.light .tline:hover .tbox { background: #ffffff; box-shadow: 0 0 0 1.5px currentColor, 0 3px 10px rgba(0,0,0,0.2); }

/* ============================================================
   LIVE POSITIONS vs BINANCE panel + "TP/SL not on Binance" warning chip
   ============================================================ */
.lp-card { width: 760px; }
.lp-row .lp-wide { grid-column: 1 / -1; line-height: 1.45; }
.lp-row .lp-wide b { color: #eaecef; }
.lp-row .hc-pl { white-space: nowrap; }
.lp-btn {
    height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #eaecef;
}
.lp-btn:hover { background: rgba(255,255,255,0.12); }
.lp-btn.danger { color: #f6465d; border-color: rgba(246,70,93,0.45); }
.lp-btn.danger:hover { background: rgba(246,70,93,0.14); }
.tbox .seg.warn { font-size: 1.05em; padding: 0 6px; }
body.light .lp-row .lp-wide b { color: #1e2329; }
body.light .lp-btn { background: #f2f4f7; border-color: #d8dce1; color: #1e2329; }
body.light .lp-btn.danger { color: #f6465d; }
@media (max-width: 560px){ .lp-row .hc-pl { grid-column: 1 / -1; text-align: left; } }
.lp-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #848e9c; margin: 14px 8px 4px; }
.lp-btn.primary { background: #2962ff; border-color: #2962ff; color: #fff; }
.lp-btn.primary:hover { background: #1e53e5; }
.lp-btn:disabled { opacity: .6; cursor: default; }
body.light .lp-btn.primary { background: #2962ff; border-color: #2962ff; color: #fff; }
.lp-auto { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #eaecef; }
.lp-auto input { width: 15px; height: 15px; accent-color: #2962ff; cursor: pointer; }
body.light .lp-auto { color: #1e2329; }

/* ============================================================
   POSITION / TP / SL BADGES — another 20% smaller (every dimension × 0.80)
   and half the gap to the price scale (was ~71px → ~35px)
   ============================================================ */
.tline { padding-right: 44px; }
.tbox { height: 17.3px; font-size: 8.64px; border-width: 1.08px; border-radius: 4.32px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.tbox .seg { padding: 0 6.48px; }
.tbox .seg[data-role="close"] { padding: 0 5.76px; }
.tbox .seg.tk { font-size: 7.92px; padding: 0 5.04px; margin: 2.16px 0 2.16px 2.88px; border-radius: 2.88px; }
.tbadges { gap: 4.32px; margin-right: 5.76px; }
.tbadge { height: 15.84px; padding: 0 6.48px; font-size: 7.92px; border-width: 1.08px; border-radius: 3.6px; letter-spacing: .22px; }
@media (max-width: 560px){
  .tline { padding-right: 32px; }
  .tbox { font-size: 7.92px; }
  .tbox .seg { padding: 0 4.32px; }
  .tbadge { height: 14.4px; padding: 0 5.04px; font-size: 7.2px; }
}

/* ============================================================
   LIVE PRICE TAG on the price scale: last price + bar-close timer joined as ONE tag.
   Sits above the entry / TP / SL price tags (z 12 > 11); the crosshair tag (13) stays on top of it.
   ============================================================ */
.live-tag {
    position: absolute;
    right: 0;
    transform: translateY(-9px);           /* the price row is centred on the price */
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #089981;
    color: #fff;
    border-radius: 2px;
    z-index: 12;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    overflow: hidden;
}
.live-tag .lt-price { height: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; text-align: left; white-space: nowrap; }
.live-tag .lt-timer { height: 15px; line-height: 15px; padding: 0 5px; font-size: 10.5px; font-weight: 600; text-align: left;
    background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.18); white-space: nowrap; }
/* trade lines / badges / their price tags are cut at the bottom time scale (height set by JS) */
.chart-overlays, .axis-tags { overflow: hidden; }

/* ===== Key lock (password) + guide link ===== */
.label-opt { font-weight: 500; color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: 11px; }
.form-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
.notice-link { display: inline-block; margin-top: 8px; margin-right: 14px; color: #f3ba2f; font-weight: 600; text-decoration: none; }
.notice-link:hover { text-decoration: underline; }
.unlock-box { width: 420px; max-width: 94vw; }
.unlock-foot { margin-top: 14px; text-align: center; font-size: 12px; }
.unlock-foot a { color: var(--text-secondary); text-decoration: none; }
.unlock-foot a:hover { color: #f3ba2f; text-decoration: underline; }