:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
    --chart-toolbar-height: 44px;
}

/* --- Dark Theme (default) --- */
:root, .theme-dark {
    --bg-body: #131722;
    --bg-header: #1e2230;
    --bg-toolbar: #1e2230;
    --bg-sidebar: #1a1e2c;
    --bg-panel: #1e2230;
    --bg-hover: #2a2e3e;
    --bg-selected: #363a4a;
    --bg-input: #1e2230;
    --bg-overlay: rgba(30, 34, 48, 0.92);
    --bg-card: #1e2230;
    
    --border-color: #2a2e3e;
    
    --text-primary: #d1d4dc;
    --text-secondary: #868994;
    --text-tertiary: #5d6070;
    
    --accent-color: #2962ff;
    --accent-hover: #1e53e5;
    
    --success: #089981;
    --danger: #f23645;
    --warning: #f59e0b;

    /* Text-weight variants of the brand colors. The base --accent-color /
       --success / --danger values are tuned for fills (buttons, borders,
       badges) where they sit behind white text; used as foreground text on
       the dark panels they fall short of the WCAG AA 4.5:1 minimum, so
       text uses these lighter variants instead. They must also clear
       4.5:1 against the *tinted* chip backgrounds (e.g. the sequence
       switch's rgba red/green washes over the panel), which are lighter
       than the panel itself. The light theme darkens its variants for the
       same reason against its tinted chips. */
    --accent-text: #5d96ff;
    --success-text: #14b197;
    --danger-text: #ff4b5a;
    
    --shadow: rgba(0, 0, 0, 0.3);
    --modal-backdrop: rgba(0, 0, 0, 0.6);
}

/* --- Light Theme --- */
.theme-light {
    --bg-body: #f5f6f8;
    --bg-header: #ffffff;
    --bg-toolbar: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-panel: #ffffff;
    --bg-hover: #edeff2;
    --bg-selected: #dde0e6;
    --bg-input: #fafbfc;
    --bg-overlay: rgba(255, 255, 255, 0.92);
    --bg-card: #ffffff;
    
    --border-color: #d1d4dc;
    
    --text-primary: #131722;
    --text-secondary: #5d6070;
    --text-tertiary: #9d9fa8;
    
    --accent-color: #2962ff;
    --accent-hover: #1e53e5;
    
    --success: #089981;
    --danger: #f23645;
    --warning: #f59e0b;

    /* Text-weight variants (see the dark theme above). On the light panels
       the accent already clears 4.5:1 against white, but the green and red
       fills do not, so text gets darkened versions. */
    --accent-text: #2962ff;
    --success-text: #00745c;
    --danger-text: #d91d2c;
    
    --shadow: rgba(0, 0, 0, 0.08);
    --modal-backdrop: rgba(0, 0, 0, 0.35);
}

.theme-light .chart-wrapper {
    background: #ffffff;
}

.theme-light .left-panel-tab.active {
    background: #2962ff;
    color: #ffffff;
}

.theme-light .left-panel-tab.active:hover {
    background: #1e53e5;
}

.theme-light .overlay {
    background: rgba(255,255,255,0.95);
    border-color: #d1d4dc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.theme-light .overlay-mode-btn {
    background: #f5f6f8;
    color: #5d6070;
}

.theme-light .overlay-mode-btn.active {
    background: #2962ff;
    color: #ffffff;
}

.theme-light .sp-input,
.theme-light .sp-select {
    background: #fafbfc;
    border-color: #d1d4dc;
}

.theme-light .sp-input:focus,
.theme-light .sp-select:focus {
    border-color: #2962ff;
    box-shadow: 0 0 0 2px rgba(41,98,255,0.15);
}

.theme-light .modal-content {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.theme-light .live-pnl-badge {
    background: rgba(245,246,248,0.92);
    border-color: #d1d4dc;
}

.theme-light .center-btn {
    border-color: #d1d4dc;
}

.theme-light .center-btn:hover {
    background: #edeff2;
}

.theme-light .overlay-icon-btn {
    color: #5d6070;
}

.theme-light .overlay-icon-btn:hover {
    background: #edeff2;
}

.theme-light .lp-search-btn {
    background: #edeff2;
    border-color: #d1d4dc;
}

.theme-light .overlay-search-input {
    background: #fafbfc;
    border-color: #d1d4dc;
}

.theme-light .bottom-panel {
    border-top-color: #d1d4dc;
}

.theme-light .tab.active {
    background: #edeff2;
    color: #131722;
}

.theme-light .btn-primary {
    background: #2962ff;
    color: #ffffff;
}

.theme-light .btn-primary:hover {
    background: #1e53e5;
}

.theme-light .btn-secondary {
    background: #edeff2;
    color: #131722;
    border-color: #d1d4dc;
}

.theme-light .btn-secondary:hover {
    background: #dde0e6;
}

.theme-light .auth-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.theme-light .center-price {
    color: #131722;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.theme-dark .center-price {
    color: #089981;
}

/* --- Loading Overlay --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 15px;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 600;
}

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden; /* App-like feel */
}

/* --- Chart-Only Mode --- */
.chart-only .top-header,
.chart-only .mobile-tabs,
.chart-only .left-toolbar,
.chart-only .right-sidebar,
.chart-only .sidebar-overlay,
.chart-only .status-log,
.chart-only .settings-panel,
.chart-only .admin-panel {
    display: none !important;
}
.chart-only .main-grid {
    grid-template-columns: 0 1fr 0 !important;
}
.chart-only .chart-area,
.chart-only .chart-wrapper,
.chart-only #chart {
    width: 100vw !important;
    height: 100vh !important;
}

/* Fullscreen exit button (only visible in chart-only mode) */
.chart-exit-btn {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 9999;
    display: none;
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.chart-exit-btn:hover { background: var(--bg-hover); }
.chart-only .chart-exit-btn { display: block; }

/* --- Layout Grid --- */
/* --- Top Tabs --- */
.top-tabs {
    display: flex; /* Always visible now */
    justify-content: flex-end; /* Align tabs to the right */
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    padding: 5px;
    gap: 5px;
    flex-wrap: wrap; /* Allow tabs to wrap vertically */
    overflow-y: auto; /* Enable vertical scroll if they wrap too much */
    max-height: 100px; /* Prevent tabs from taking too much vertical space */
    -webkit-overflow-scrolling: touch;
}

.top-tabs .tab-btn {
    flex: 1 1 auto; /* Allow growth and shrinking */
    min-width: 80px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.top-tabs .tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.top-tabs .tab-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* @media query removed to keep tabs visible on desktop */

/* --- Backtest Results Modal --- */
.results-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.result-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.result-card label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.result-card .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.result-card .value.positive {
    color: var(--success-color);
}

.result-card .value.negative {
    color: var(--danger-color);
}

/* --- App Layout --- */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

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

.header-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-section.center {
    flex: 1;
    justify-content: center;
}

.logo {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
    margin-right: 16px;
}

/* Header Inputs */
.symbol-search-compact {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border-color);
    padding-left: 16px;
    gap: 8px;
}

#exchange-input {
    width: 60px;
    border: none;
    background: transparent;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-primary);
    text-align: right;
}

#scrip-input {
    width: 180px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-primary);
}

#scrip-input:focus, #exchange-input:focus {
    outline: none;
}

#instrument-search-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

#instrument-search-button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-radius: 4px;
}

/* Header Controls */
.header-select, .header-select-sm {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.header-select:hover {
    background: var(--bg-hover);
}

.header-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}

.header-link {
    font-size: 13px;
    color: var(--accent-color);
    text-decoration: none;
}

.header-btn, .btn-primary-sm {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.header-btn:hover, .btn-primary-sm:hover {
    background: var(--accent-hover);
}

.header-btn-icon {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
}

.header-btn-icon:hover {
    background: var(--bg-hover);
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.2s;
    line-height: 1;
}

.theme-toggle-btn:hover {
    background: var(--bg-hover);
}

.badge-danger {
    background: var(--danger);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* --- Main Content Area --- */
.main-grid {
    display: flex;
    flex: 1;
    overflow: hidden; /* Contain scrollbars */
}

/* Center Chart Area */
.chart-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-body);
    min-width: 0; /* Flexbox trick */
}

.chart-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* ===== TradingView-style Top Symbol Header ===== */
.tv-chart-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 14px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: nowrap;
    overflow-x: auto;
}
.tv-symbol-block { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px 14px; min-width: 0; }
.tv-symbol-name {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; letter-spacing: .2px;
}
.tv-price-block { display: flex; align-items: baseline; gap: 8px; }
.tv-ltp { font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tv-change { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tv-change.up { color: var(--success); }
.tv-change.down { color: var(--danger); }
.tv-ohlc {
    flex: 0 0 auto;
    font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
    display: flex; flex-wrap: nowrap; gap: 14px; white-space: nowrap;
}
.tv-ohlc span { display: inline-flex; gap: 4px; white-space: nowrap; }
.tv-ohlc span b { color: var(--text-primary); font-weight: 600; }
.tv-stats-block { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tv-chip {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    background: var(--bg-hover); color: var(--text-secondary);
    border: 1px solid var(--border-color); white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.tv-chip b { color: var(--text-primary); font-weight: 600; }
.tv-mode-block { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.tv-mode-block .overlay-mode-group { margin: 0; }

/* Docked floating trade bar */
.tv-trade-bar {
    background: rgba(19, 23, 34, 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}

#chart, .chart-tab-content {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Force minimum height */
    flex: 1 1 auto;
}

.chart-overlays {
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* Let clicks pass through to chart */
    z-index: 50; /* Keep under center controls */
}

.overlay-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}
 
/* Fullscreen Watchlist Removed */

.overlay {
    position: absolute;
    top: 45px;
    left: 12px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 2px 6px var(--shadow);
    pointer-events: auto;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    backdrop-filter: blur(4px);
}

.overlay-title {
    font-weight: 700;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.overlay-param {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.overlay-param span {
    font-weight: 600;
    color: var(--text-primary);
}

.overlay-badge {
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px var(--shadow);
    pointer-events: auto;
}

.overlay-badge.price { color: var(--accent-color); }
.overlay-badge.signal { color: var(--text-secondary); }

/* === Settings Panel (left sidebar, replaces overlay) === */
.settings-panel {
    width: 320px;
    min-width: 260px;
    max-width: 360px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100%;
}

/* --- Left Panel Tab Bar --- */
.left-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-body);
    flex-shrink: 0;
}

.left-panel-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

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

.left-panel-tab.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    background: var(--bg-body);
}

/* --- Left Panel Tab Content --- */
.left-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* --- Watchlist Tab --- */
.lp-watchlist-search {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.lp-watchlist-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mobile tab bar — hidden on desktop, shown on mobile via media query */
.mobile-tabs {
    display: none;
}
.chart-left-controls {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.combined-overlay-panel {
    background: var(--bg-panel);
    border: none;
    border-radius: 0;
    padding: 10px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
}

.overlay-settings-part {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* On smaller screens hide the settings panel */
@media (max-width: 768px) {
    .settings-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .settings-panel.active {
        display: flex;
    }
}

/* --- Center Chart Controls (PnL & Trade Buttons) --- */
.chart-center-controls {
    pointer-events: none;
}

.chart-center-controls .overlay-pnl-section,
.chart-center-controls .overlay-buttons-section {
    pointer-events: auto;
}

.chart-center-controls .live-pnl-badge {
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 6px var(--shadow);
}

.chart-center-controls .center-btn {
    pointer-events: auto;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px var(--shadow);
    cursor: pointer;
    transition: transform 0.05s ease-in-out;
}
.chart-center-controls .center-btn:active { transform: translateY(1px); }
.chart-center-controls .center-btn.buy { background: var(--success); color: #fff; }
.chart-center-controls .center-btn.sell { background: var(--danger); color: #fff; }
.chart-center-controls .center-btn.square { background: var(--warning); color: #000; }

.overlay-pnl-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.overlay-buttons-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recommended-strategy {
    color: var(--success) !important;
    font-weight: bold !important;
}

.indicator-close-strategy {
    color: #f23645 !important;
    font-weight: bold !important;
}

.sp-param-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.sp-param-row label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.sp-param-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    font-style: italic;
}

.sp-param-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.sp-param-invalid {
    border-color: var(--danger) !important;
    background: rgba(242, 54, 69, 0.1) !important;
}

/* Toggle switch for boolean params */
.sp-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.sp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    transition: 0.2s;
}

.sp-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: 0.2s;
}

.sp-switch input:checked + .sp-slider {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.sp-switch input:checked + .sp-slider::before {
    transform: translateX(18px);
    background: #fff;
}

/* Per-bot tab strip above the chart */
.bot-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-panel);
    flex: 0 0 auto;
}

.bot-tabs::-webkit-scrollbar {
    height: 6px;
}

.bot-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.bot-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.15s;
}

.bot-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.bot-tab.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.bot-tab .bot-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}

.bot-tab .bot-tab-dot.running { background: #089981; }
.bot-tab .bot-tab-dot.paused { background: #ff9800; }
.bot-tab .bot-tab-dot.stopped { background: #888; }

.bot-tab .bot-tab-close {
    margin-left: 2px;
    opacity: 0.6;
    font-size: 14px;
    line-height: 1;
}

.bot-tab .bot-tab-close:hover {
    opacity: 1;
    color: var(--danger);
}

/* Chart sub-panel tabs (Price / Indicator / Order Flow) */
.chart-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-panel);
    flex: 0 0 auto;
}

.chart-tab-btn {
    padding: 5px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
}

.chart-tab-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.chart-tab-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.center-btn {
    padding: 6px 12px;
    font-size: 14px;
    width: 100%;
    text-align: center;
}

.overlay-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.overlay-row:last-child {
    margin-bottom: 0;
}

.overlay-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.overlay-input-group label {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 10px;
}

.overlay-number-input {
    width: 45px;
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    height: 24px;
}

/* Specific widths for different inputs */
#overlay-lots-input { width: 35px; }
#overlay-sl-points-input, #overlay-tp-points-input { width: 45px; }

.overlay-select-sm {
    padding: 2px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    height: 24px;
}

.overlay-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.center-price {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    background: rgba(30,34,48,0.9);
    border: 1px solid var(--border-color);
    padding: 6px 16px;
    border-radius: 6px;
    pointer-events: auto;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.chart-ohlc-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-family: monospace;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 70;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--shadow);
}

.center-buttons {
    display: flex;
    gap: 12px;
}

.center-btn {
    pointer-events: auto;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px var(--shadow);
    cursor: pointer;
    transition: transform 0.05s ease-in-out;
}
.center-btn:active { transform: translateY(1px); }
.center-btn.buy { background: var(--success); color: #fff; }
.center-btn.sell { background: var(--danger); color: #fff; }
.center-btn.square { background: var(--warning); color: #000; }
.center-btn.placing { opacity: 0.55; cursor: progress; pointer-events: none; filter: saturate(0.6); animation: placing-pulse 0.9s ease-in-out infinite; }
@keyframes placing-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }

/* Live PnL badge positioned above the center price */
.live-pnl-badge {
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    pointer-events: auto;
    box-shadow: 0 2px 6px var(--shadow);
}
.live-pnl-badge.pnl-positive { color: var(--success); }
.live-pnl-badge.pnl-negative { color: var(--danger); }

/* Bottom Panel */
/* Bottom log panel — chart-first. It boots COLLAPSED to the height of its own
   tab row (~30px): the row doubles as a live one-line ticker of the newest
   status message, and clicking it (or a tab, or Show Log) unfolds the panel to
   read the full log or the trade table. The chart owns everything else. */
.bottom-panel {
    height: 30px; /* collapsed: tab/ticker row only */
    border-top: 1px solid var(--border-color);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: height 0.18s ease;
}

.bottom-panel.log-open {
    height: 200px;
}

.bottom-panel .bottom-content {
    display: none;
}

.bottom-panel.log-open .bottom-content {
    display: block;
}

/* The collapsed strip's live status ticker: the newest log line, one line,
   ellipsized. It is a button so it unfolds the panel like the toggle does. */
#log-ticker {
    flex: 1;
    min-width: 0;
    margin-left: 10px;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}

#log-ticker:hover {
    color: var(--text-primary);
}

.bottom-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-body);
}

.tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

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

.tab.active {
    color: var(--accent-color);
    background: var(--bg-panel);
    border-bottom: 2px solid var(--accent-color);
}

.bottom-content {
    flex: 1;
    overflow: auto;
    padding: 8px;
    font-size: 12px;
    font-family: monospace;
}

/* Right Sidebar */
.right-sidebar {
    width: 450px;
    border-left: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto; /* Enable vertical scrolling for the whole sidebar */
    max-height: 100%;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto; /* Sections take natural height, allowing sidebar to scroll */
    min-height: 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.section-header {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-body);
}

.btn-icon-sm {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-secondary);
}

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

/* Watchlist */
.watchlist-container {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.watchlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.watchlist-item {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
}

.watchlist-item:hover {
    background-color: var(--bg-hover);
}

.watchlist-item-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
}

.watchlist-stats {
    display: flex;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
}

.watchlist-stats span {
    white-space: nowrap;
}

.watchlist-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-xs {
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-panel);
    cursor: pointer;
    font-weight: 500;
}

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

.search-results-dropdown {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    max-height: 300px;
    overflow-y: auto;
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.search-results-dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}

.search-results-dropdown li:hover,
.search-results-dropdown li.selected {
    background-color: var(--bg-hover);
    color: var(--accent-color);
}

/* Order Panel */
.order-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-buy {
    background-color: var(--accent-color); /* Blue for Buy usually, or Green */
    background-color: var(--success); /* Green for Buy */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    flex: 1;
}

.btn-sell {
    background-color: var(--danger);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    flex: 1;
}

.btn-danger {
    background-color: var(--danger);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    flex: 1;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    flex: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
}

.btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    flex: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

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

.btn-sm {
    padding: 6px 10px;
    font-size: 11px;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.3;
}

.bot-card:hover {
    border-color: var(--accent-color);
    cursor: default;
}

.bot-card-selected {
    border-color: var(--accent-color);
    box-shadow: 0 0 4px rgba(77, 163, 255, 0.3);
}

.btn-warning {
    background-color: var(--warning);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
}

/* Bot action buttons (big icons, side by side) */
.bot-action-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.bot-action-btn:hover { opacity: 0.85; }
.bot-action-btn:active { opacity: 0.7; }
.start-btn { background: #00856d; color: #fff; }
.stop-btn  { background: #e42837; color: #fff; }
.select-btn { background: var(--bg-hover, #2a2e39); color: var(--text-primary, #fff); border: 1px solid var(--border-color, #3a3e49); }

.w-100 { width: 100%; }

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

/* Form inputs in Order Panel */
.order-panel input[type="number"] {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
}

/* Modal */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: var(--modal-backdrop); 
}

.modal-content {
    background-color: var(--bg-card);
    margin: 10% auto; 
    padding: 20px;
    border: 1px solid var(--border-color);
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
}

.close-button {
    color: var(--text-tertiary);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- Auth Pages (Modern Redesign) --- */
.full-page-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    background-color: var(--bg-body);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow-y: auto;
    padding: 20px;
}

.auth-card {
    background: var(--bg-card);
    width: 100%;
    max-width: 440px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px var(--shadow), 0 8px 10px -6px var(--shadow);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.auth-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.input-wrapper label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

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

.forgot-link {
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: none;
}

.input-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.1);
}

.input-field svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.input-field input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    outline: none;
    color: var(--text-primary);
}

.primary-btn {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 8px;
}

.primary-btn:hover {
    background-color: var(--accent-hover);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
}

.disclaimer-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.disclaimer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.disclaimer-section p {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Helper for hidden */
.hidden { display: none !important; }

/* Mode Switching Buttons */
.mode-button-group {
    display: flex;
    background: var(--bg-hover);
    padding: 2px;
    border-radius: 6px;
    gap: 2px;
}

.mode-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    text-transform: uppercase;
}

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

.mode-btn.active {
    background: var(--bg-card);
    color: var(--accent-color);
    box-shadow: 0 1px 3px var(--shadow);
}

.mode-btn[data-mode="LIVE"].active {
    color: var(--danger);
}

.mode-btn[data-mode="PAPER"].active {
    color: var(--success);
}

/* Radio Group Compact */
.radio-group.compact {
    display: flex;
    gap: 8px;
}

.radio-group.compact label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Chart Overlays */

/* --- Mobile / Responsive Styles --- */
@media (max-width: 768px) {
    body {
        overflow-y: auto;
        height: auto;
    }

    .app-layout {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .main-grid {
        flex-direction: column;
        position: relative;
        height: auto;
        overflow: visible;
    }

    /* Modal Responsive */
    .modal-content {
        width: 90%;
        margin: 20% auto;
    }

    /* Header Responsive */
    .top-header {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        padding: 8px 16px;
    }

    .header-section {
        gap: 8px;
    }

    .header-section.center {
        order: 3;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
        display: none;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-section.center.active {
        display: flex;
    }
    
    .header-group {
        margin-bottom: 8px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left-toolbar {
        display: none; 
    }

    /* Chart Area */
    .chart-area {
        width: 100%;
        height: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Bottom Panel */
    .bottom-panel {
        height: auto;
        flex: 1;
        min-height: 120px;
    }

    /* ---- Mobile Tab Bar ---- */
    .mobile-tabs {
        display: flex !important;   /* always show on mobile */
        gap: 0;
        padding: 0;
        background: var(--bg-header);
        border-bottom: 2px solid var(--border-color);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .mobile-tabs .tab-btn {
        flex: 1;
        padding: 10px 4px;
        border: none;
        border-bottom: 3px solid transparent;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
    }
    .mobile-tabs .tab-btn.active {
        color: var(--accent-color);
        border-bottom-color: var(--accent-color);
        background: var(--bg-hover);
    }

    /* Settings panel on mobile — full width, scrollable */
    .settings-panel {
        display: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .settings-panel.active {
        display: flex;
        flex-direction: column;
    }

    /* Combined overlay panel fills available space */
    .combined-overlay-panel {
        padding: 12px;
    }

    /* Risk fields — 3 columns on mobile too */
    .sp-row-risk {
        gap: 8px;
    }
    .sp-input-risk {
        width: 100%;
    }

    .right-sidebar {
        display: none;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        position: relative;
        right: auto;
        top: auto;
        border-left: none;
        box-shadow: none;
    }
    .right-sidebar.active {
        display: block;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .header-btn, .btn-primary-sm, .auth-button, .btn-buy, .btn-sell, .btn-primary, .btn-warning {
        padding: 10px 16px;
    }

    .watchlist-item {
        padding: 12px 16px;
    }
    
    .symbol-search-compact {
        flex: 1;
    }
    
    #scrip-input {
        width: 100%;
        min-width: 100px;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* === Overlay Styles (merged from overlay_styles.css) === */
/* --- Chart Settings Overlay --- */
.chart-settings-overlay-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    pointer-events: auto;
    margin-bottom: 10px;
    width: 100%;
    max-width: 500px;
}

.overlay-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.overlay-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    flex: 1;
    min-width: 100px;
    width: 100%;
}

.overlay-mode-group {
    display: flex;
    background: var(--bg-hover);
    padding: 2px;
    border-radius: 6px;
    gap: 2px;
}

.overlay-mode-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    text-transform: uppercase;
}

.overlay-mode-btn.active {
    background: var(--bg-card);
    /* accent-text, not accent-color: as foreground text on the card it needs
       the 4.5:1 AA ratio the fill-tuned accent doesn't provide. */
    color: var(--accent-text);
    box-shadow: 0 1px 3px var(--shadow);
}

/* Inactive options are de-emphasised by dropping to the secondary grey, but
   that lands at 3.86:1 on the group's #2a2e3e backing — under AA for 11px
   text. Primary text keeps the muted-look hierarchy while clearing 4.5:1. */
.overlay-mode-btn:not(.active) {
    color: var(--text-primary);
}

.overlay-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-hover);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.overlay-input-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.overlay-number-input {
    width: 60px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    text-align: center;
}

.overlay-icon-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-icon-btn:hover {
    background: #e0e3eb;
}

.overlay-search-container {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px 4px;
    flex: 1;
    min-width: 200px;
}

.overlay-exchange-select {
    border: none;
    background: var(--bg-hover);
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    border-radius: 4px;
    margin-right: 4px;
    outline: none;
    cursor: pointer;
}

.overlay-search-input {
    width: 100px;
    padding: 2px 4px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 24px;
}

.overlay-watchlist-section {
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
    padding-top: 4px;
}

.overlay-watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 2px;
    padding: 0 3px;
}

.overlay-watchlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.overlay-watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 3px;
    font-size: 10px;
    border-radius: 3px;
    margin-bottom: 1px;
    line-height: 1.3;
    cursor: pointer;
}

.overlay-watchlist-item:hover {
    background: rgba(0,0,0,0.02);
}

.overlay-icon-btn-sm {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
    
    .center-btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    #overlay-buy-btn,
    #overlay-sell-btn,
    #overlay-sqoff-btn {
        font-size: 14px;
        padding: 8px 12px;
    }



/* ============================================================
   Settings Panel — Structured Row Layout
   ============================================================ */

/* Symbol bar at top */
.sp-symbol-bar {
    padding: 6px 4px 2px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.sp-symbol-name {
    font-weight: 700;
    color: var(--accent-text);
    font-size: 13px;
}

/* Generic row */
.sp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.sp-row:last-child { border-bottom: none; }

.sp-row-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Field: label + input stacked */
.sp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-field-full {
    flex: 1;
    min-width: 0;
}
.sp-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Inputs */
.sp-input {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
}
.sp-input:focus { border-color: var(--accent-color); }
.sp-input-sm { width: 52px; }
.sp-input-risk { width: 60px; text-align: center; }

/* Selects */
.sp-select {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    width: 100%;
    cursor: pointer;
}
.sp-select:focus { border-color: var(--accent-color); }
.sp-select-sm { width: auto; }

/* Row 3 — Risk (SL / TSL / TGT) */
.sp-row-risk {
    justify-content: space-between;
    gap: 4px;
}
.sp-risk-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.sp-risk-header {
    display: flex;
    align-items: center;
    gap: 3px;
}
.sp-checkbox {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

/* Row 4 — column layout for dropdowns */
.sp-row-col {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* Row 5 — action buttons */
.sp-row-actions {
    justify-content: space-between;
    gap: 4px;
    padding-top: 6px;
}
.sp-action-btn {
    flex: 1;
    padding: 5px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: opacity 0.15s;
}
.sp-action-btn:hover { opacity: 0.85; }
/* The red fill is darkened to #c81e2c so the white label clears WCAG AA
   (4.5:1). The base --danger #f23645 is tuned for the same red used as
   *foreground* text on the dark panels (where it passes); behind white text
   on a fill it does not, hence the distinct darker fill here. */
.sp-btn-danger  { background: #c81e2c;  color: #fff; border-color: #c81e2c; }
.sp-btn-primary { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.sp-btn-secondary { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-color); }

/* Row — icon buttons row */
.sp-row-icons {
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.sp-row-icons .overlay-icon-btn {
    flex: 1;
    font-size: 11px;
    padding: 4px 6px;
    white-space: nowrap;
    justify-content: center;
}

/* --- Settings Panel: Inline Indicator List --- */
.sp-ind-count {
    font-weight: 400;
    color: var(--accent-color);
    font-size: 10px;
    margin-left: 4px;
}

.sp-ind-box {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-body);
    max-height: 130px;
    overflow-y: auto;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sp-ind-loading {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 8px;
}

.sp-ind-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-primary);
    transition: background 0.1s;
    user-select: none;
}

.sp-ind-item:hover {
    background: var(--bg-hover);
}

.sp-ind-item input[type="checkbox"] {
    flex-shrink: 0;
}

.sp-ind-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Native dropdown/input popups match the theme */
select, input, textarea { color-scheme: dark; }
.theme-light select, .theme-light input, .theme-light textarea { color-scheme: light; }
select option { background-color: var(--bg-input); color: var(--text-primary); }

/* Embedded Inter (served locally, no Google Fonts dependency) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
}

/* ================================================================
   Chart-first layout
   The chart owns the whole window. Every other control collapses
   into a dock section that drops over the chart's left edge from the
   bot-name bar, and nothing stays open unless it was asked for.
   ================================================================ */

/* The sidebar's sections were relocated into #chart-dock-panels at boot, so
   the aside must never come back - not on mobile, not in chart-only mode. */
.settings-panel.docked {
    display: none !important;
}

/* --- Bot bar: the trading bot's name with the dock buttons beside it --- */
.chart-bot-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-width: 0;
}

.chart-bar-brand {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--accent-color);
    white-space: nowrap;
}

.chart-bot-bar .sp-symbol-bar {
    flex: 0 0 auto;
}

.chart-bot-bar #subscription-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chart-bot-bar .left-panel-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 3px;
    border-bottom: none;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chart-bot-bar .left-panel-tab {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    border-bottom-width: 1px;
}

.chart-bot-bar .left-panel-tab .lp-icon {
    margin-right: 4px;
}

.chart-bot-bar .left-panel-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Lit = this section is open. Press it again to collapse it. */
.chart-bot-bar .left-panel-tab.active {
    color: var(--accent-color);
    background: var(--bg-hover);
    border-color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.chart-bar-btn {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 9px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.chart-bar-btn:hover,
.chart-bar-btn.active {
    color: var(--accent-color);
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

/* Profile leads the tab row; a divider separates it from the settings tabs. */
.chart-bot-bar .left-panel-tab.lp-lead {
    font-weight: 600;
}
.chart-bot-bar .left-panel-tab.lp-after-lead {
    margin-left: 10px;
    border-left: 1px solid var(--border-color);
    padding-left: 10px;
}

/* Sequence master switch: red/off by default, green when trades are armed. */
.chart-bar-btn.seq-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-weight: 600;
    cursor: pointer;
}
.chart-bar-btn.seq-btn[data-seq-off] {
    color: var(--danger-text);
    border-color: var(--danger-text);
    background: rgba(242, 54, 69, 0.08);
}
.chart-bar-btn.seq-btn[data-seq-on] {
    color: var(--success-text);
    border-color: var(--success-text);
    background: rgba(8, 153, 129, 0.12);
}
.chart-bar-btn.seq-btn[data-seq-on]:hover {
    background: rgba(8, 153, 129, 0.2);
}
.chart-bar-btn.seq-btn .seq-ic {
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 900px) {
    .chart-bar-brand { display: none; }
    .chart-bot-bar .left-panel-tab .lp-text { display: none; }
    .chart-bot-bar .left-panel-tab .lp-icon { margin-right: 0; }
}

/* --- The dock: one section at a time, over the chart's left edge --- */
.chart-dock-panels {
    position: absolute;
    left: 0;
    top: var(--chart-dock-top, 74px);
    bottom: 0;
    width: 360px;
    max-width: 48vw;
    z-index: 30;
    /* An open section sits in this column, but the column itself must never
       swallow a click meant for the chart underneath it. */
    pointer-events: none;
}

.chart-dock-panels > * {
    pointer-events: auto;
}

.chart-dock-panels > .left-panel-content,
.chart-dock-panels > .modal {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 0;
    z-index: auto;
    background-color: var(--bg-panel);
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 10px 0 26px rgba(0, 0, 0, .45);
    overflow: hidden;
}

/* A docked dialog stops being a dialog: its backdrop, centering, rounded card
   and fixed width all get in the way of a panel that now fills the column. */
.chart-dock-panels > .modal > .modal-content {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 16px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--bg-panel);
    overflow-y: auto;
    overflow-x: hidden;
}

/* A docked section is sized by its content, not squeezed into the column: the
   sidebar's sections are flex columns whose children would otherwise shrink to
   fit and silently cut off their last row with nothing to scroll to. */
.chart-dock-panels > .left-panel-content {
    overflow-y: auto;
    overflow-x: hidden;
}

.chart-dock-panels > .left-panel-content > * {
    flex-shrink: 0;
}

.chart-dock-panels > .left-panel-content .combined-overlay-panel {
    flex: 0 0 auto;
}

/* Chart-only hands back the bot bar and the tab strip as well, so the chart
   really does get every pixel until Esc steps back. */
.chart-only .chart-bot-bar,
.chart-only #chart-tab-strip,
.chart-only .chart-dock-panels,
.chart-only .bottom-panel {
    display: none !important;
}

/* ============ CHART TAB STRIP ============
   The strip floats over the chart's top-left corner like a browser tab bar
   instead of claiming its own row, so every pixel it used to take goes back
   to the candles. It sits below the dock column (z 30) and the dock's top
   edge is measured to stop under it. */
#chart-tab-strip {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    max-width: calc(100% - 16px);
    background: var(--bg-panel);
    background: color-mix(in srgb, var(--bg-panel) 86%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

#chart-tab-strip::-webkit-scrollbar {
    display: none;
}

/* ============ AUTO IP UPDATE ============
   The Shoonya portal flow is nine browser steps, so every step gets a line. */
.ip-update-steps {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.75;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ip-update-steps:empty::before {
    content: "Waiting for the first step…";
    color: var(--text-tertiary);
}

.ip-update-step-error {
    color: #f23645;
}

.ip-update-status {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.ip-update-status.is-success { color: #089981; }
.ip-update-status.is-error { color: #f23645; }

.ip-update-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.ip-update-actions button {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
}

.ip-update-actions button:hover { background: var(--bg-hover); }

#shoonya-backupip-btn:disabled,
#broker-update-ip-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPTIONS split view — in options mode the underlying chart keeps 50% of the
   chart area and the selected CE / PE legs share the other half, so all three
   candles stay on screen while the bot runs.
   ═══════════════════════════════════════════════════════════════════════════ */
#chart-panels.opt-mode {
    display: flex;
    flex-direction: row;
    gap: 1px;
}

/* The panels are absolutely positioned (one fills the area) — in split mode
   they become a real 50% flex column so the leg charts can sit beside them.
   `!important` is required: the inline style on every .chart-panel wins. */
#chart-panels.opt-mode > .chart-panel {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 50%;
    min-width: 0;
}

/* The two legs are stacked one over the other (horizontal divider) so each
   gets the full width of the right half instead of a narrow side-by-side
   column. */
.opt-split {
    display: none;
    flex: 1 1 0%;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
}

#chart-panels.opt-mode > .opt-split {
    display: flex;
}

.opt-split-cell {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-body);
}

.opt-chart-host {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.opt-chart-badge {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(20, 20, 31, .82);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    pointer-events: none;
    max-width: calc(100% - 12px);
    overflow: hidden;
    white-space: nowrap;
}

.opt-chart-badge .opt-side {
    font-weight: 700;
    letter-spacing: .04em;
}

.opt-chart-badge [data-opt-cell-side="CE"] .opt-side,
.opt-split-cell[data-opt-cell="CE"] .opt-side { color: #089981; }
.opt-split-cell[data-opt-cell="PE"] .opt-side { color: #f23645; }

.opt-chart-badge .opt-name {
    color: var(--text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.opt-chart-badge .opt-ltp {
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
}

.opt-chart-badge .opt-pnl {
    font-size: 16px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
}

.opt-empty-note {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
    text-align: center;
    padding: 0 8px;
}

/* ================================================================
   CHART SETTINGS PANEL
   Chart Settings is a dock section beside the chart, not an overlay
   dialog: a fixed header, a scrolling body of grouped fields, and a
   fixed Apply/Reset footer so the actions stay reachable however far
   the body scrolls.
   ================================================================ */

#chart-settings-modal > .modal-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 6vh auto;
    padding: 0;
    width: min(460px, 94vw);
    max-height: 86vh;
    overflow: hidden;
}

/* Once docked the panel fills the dock column instead of floating. */
.chart-dock-panels #chart-settings-modal > .modal-content {
    margin: 0;
    width: auto;
    max-width: none;
    max-height: none;
}

#chart-settings-modal .modal-content { border: 1px solid var(--border-color); border-radius: 10px; }
.chart-dock-panels #chart-settings-modal .modal-content { border: none; border-radius: 0; }

/* --- Header --- */
#chart-settings-modal .cs-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
}

#chart-settings-modal .cs-head-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#chart-settings-modal .cs-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
}

/* The chip names the chart type whose fields are on screen, so the panel
   says what it is drawing rather than leaving that to the button pressed. */
#chart-settings-modal .cs-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(41, 98, 255, .45);
    background: rgba(41, 98, 255, .14);
    color: var(--accent-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chart-settings-modal .cs-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

#chart-settings-modal .cs-close:hover { background: var(--bg-hover); color: var(--text-primary); }
#chart-settings-modal .cs-close:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }

/* --- Scrolling body --- */
#chart-settings-modal .cs-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-panel);
}

#chart-settings-modal .cs-body::-webkit-scrollbar { width: 8px; }
#chart-settings-modal .cs-body::-webkit-scrollbar-track { background: transparent; }
#chart-settings-modal .cs-body::-webkit-scrollbar-thumb {
    background: var(--bg-selected);
    border-radius: 4px;
}
#chart-settings-modal .cs-body::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* --- Groups --- */
#chart-settings-modal .cs-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
}

#chart-settings-modal .cs-group-title {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#chart-settings-modal .cs-hint {
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

#chart-settings-modal .cs-group-hint { margin: -2px 0 0; }

#chart-settings-modal .cs-note {
    margin: 0;
    padding: 5px 7px;
    font-size: 10px;
    color: var(--accent-text);
    background: var(--bg-hover);
    border-radius: 5px;
}

#chart-settings-modal .cs-readout {
    min-height: 21px;
    font-variant-numeric: tabular-nums;
}

#chart-settings-modal .cs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    line-height: 1.5;
    word-break: break-word;
}

/* --- Fields --- */
#chart-settings-modal .cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

#chart-settings-modal .cs-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#chart-settings-modal .cs-field-full { grid-column: 1 / -1; }

#chart-settings-modal .cs-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#chart-settings-modal .sp-input,
#chart-settings-modal .sp-select {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--bg-input);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#chart-settings-modal .sp-input:focus,
#chart-settings-modal .sp-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(41, 98, 255, .18);
}

#chart-settings-modal .sp-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Percent-of-price inputs sit beside their checkbox, not full width. */
#chart-settings-modal .sp-input-sm { width: 62px; flex: 0 0 auto; }

#chart-settings-modal .cs-select { cursor: pointer; }

#chart-settings-modal .cs-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

#chart-settings-modal .cs-unit {
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

#chart-settings-modal .cs-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

#chart-settings-modal .cs-switch input:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

#chart-settings-modal .cs-textarea {
    width: 100%;
    padding: 6px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
}

#chart-settings-modal .cs-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(41, 98, 255, .18);
}

/* --- Segmented control (candle range mode) --- */
#chart-settings-modal .cs-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

#chart-settings-modal .cs-seg-opt {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

#chart-settings-modal .cs-seg-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#chart-settings-modal .cs-seg-opt span {
    display: block;
    padding: 4px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}

#chart-settings-modal .cs-seg-opt:hover span { background: var(--bg-hover); color: var(--text-primary); }

#chart-settings-modal .cs-seg-opt input:checked + span {
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 1px 3px var(--shadow);
}

#chart-settings-modal .cs-seg-opt input:focus-visible + span { outline: 2px solid var(--accent-color); outline-offset: 1px; }

/* --- Legend dots on the colour-coded chart types --- */
#chart-settings-modal .cs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 10px;
    color: var(--text-tertiary);
}

#chart-settings-modal .cs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 2px;
    vertical-align: middle;
}

#chart-settings-modal .cs-dot-green { background: var(--success); }
#chart-settings-modal .cs-dot-red { background: var(--danger); }
#chart-settings-modal .cs-dot-blue { background: var(--accent-color); }
#chart-settings-modal .cs-dot-amber { background: var(--warning); }
#chart-settings-modal .cs-dot-grey { background: var(--text-tertiary); }

/* --- Strategy params keep their own renderer markup --- */
#chart-settings-modal .cs-params .sp-param-row {
    margin-bottom: 8px;
    gap: 3px;
}

#chart-settings-modal .cs-params .sp-param-row label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

#chart-settings-modal .cs-params .sp-param-empty {
    padding: 2px 0;
    font-size: 11px;
}

/* --- Footer actions --- */
#chart-settings-modal .cs-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 9px 12px;
    background: var(--bg-header);
    border-top: 1px solid var(--border-color);
}

#chart-settings-modal .cs-btn {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

#chart-settings-modal .cs-btn-apply {
    flex: 1 1 auto;
    background: var(--accent-color);
    color: #fff;
}

#chart-settings-modal .cs-btn-apply:hover { background: var(--accent-hover); }

#chart-settings-modal .cs-btn-ghost {
    flex: 0 0 auto;
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

#chart-settings-modal .cs-btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
#chart-settings-modal .cs-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* Light theme: the chip and the accent fill need the darker text token. */
.theme-light #chart-settings-modal .cs-chip { color: var(--accent-text); }
.theme-light #chart-settings-modal .cs-body { background: var(--bg-panel); }

/* Narrow dock column: single-column grids so nothing clips. */
@media (max-width: 520px) {
    #chart-settings-modal .cs-grid { grid-template-columns: 1fr; }
}