/* * ============================================================================ * chart.css — TradeGrub Finance Charting Platform * Version: 2.x | Last updated: 2026-05-17 * ============================================================================ * * ARCHITECTURE * ------------ * Single-file stylesheet for the TradeGrub charting application. All layout, * component, and theme styles live here for zero-latency first paint (no * network waterfall). The file is structured as a flat cascade of logical * sections — no CSS-in-JS, no preprocessor dependency. * * NAMING CONVENTIONS * ------------------ * - BEM-lite: component prefix + element suffix (e.g. .tg-btn, .ab-overlay) * - Prefixes by feature area: * tb- = top toolbar tg- = drawing toolbar (tool groups) * cs- = chart settings ab- = alert builder * al- = alert list ai- = AI assistant * ot- = object tree od- = order drawer * dp- = drawing properties dd- = dropdown * qb- = quote bar ep- = emoji picker * fund-= fundamentals hd- = help demo widget * rp- = replay picker bc- = bar countdown * - State classes: .open, .active, .visible, .disabled, .recording * - Utility modifiers: .right, .left, .expanded * * THEME SYSTEM * ------------ * Dark theme is the default. All colors reference CSS custom properties * (design tokens) defined in :root. Light theme is activated by adding * `body.light-theme` which overrides token values and specific selectors * in the "Light Theme Overrides" section near the end of this file. * * LAYOUT MODEL * ------------ * [Top Toolbar — fixed 38px] * [Draw Toolbar (left|right|top|bottom)] + [Chart Canvas] + [Side Panels] * [Quote Bar — bottom strip] * Panels (settings, alerts, AI, object tree, fundamentals, order drawer) * slide in from the right edge at z-index 800+. * * SECTIONS (in order) * ------------------- * 0. CSS Variables / Design Tokens * 1. Reset & Base Layout * 2. Top Toolbar * 3. User Menu * 4. WebSocket Status Dot * 5. Symbol Chip, Resolution & Dropdown Panels * 6. Drawing Toolbar & Flyouts * 7. Chart Area & Loading * 8. Quote Info Bar * 9. Indicator Bar & Dialog * 10. Symbol Search Dialog * 11. Custom Date Range Dialog * 12. Preferences Dialog * 13. Chart Settings Panel (tabs, sections, controls) * 14. Custom Color Picker (HSV) * 15. Light Theme Overrides * 16. Alert Builder & Alert List * 17. Toast Notifications * 18. Responsive Breakpoints (768px, 480px, 500px height, 1920px+) * 19. Help Panel & Help Demo Widget * 20. Object Tree Panel * 21. AI Assistant Panel * 22. Fundamentals Panel * 23. Order Drawer * * Z-INDEX STACKING CONTEXT * ------------------------ * All positioned elements participate in the root stacking context. * Panels and modals layer predictably via these tiers: * * 10 — toolbar scroll buttons * 50 — draw toolbar, loading overlay, replay bar * 55 — draw button tooltips, replay picker overlay * 56 — replay pick line * 57 — replay pick label * 60 — replay picker dialog * 200 — toolbar dropdowns * 300 — market dropdown inside symbol dialog * 400 — flyout submenus * 500 — modal dialogs (symbol, indicator) & dd-submenu * 510 — object tree panel, fundamentals panel * 600 — preferences dialog, emoji picker * 700 — custom range dialog * 800 — chart settings slide-out, alert list, AI assistant, order drawer * 850 — alert builder overlay (above side panels) * 900 — custom color picker * 1000 — user dropdown (always on top for account actions) * 9999 — toast notifications (always visible) * * ============================================================================ */ /* ═══ 0. Design Tokens ═══ */ :root { /* Accent (keep existing) */ --accent: #69E1FB; --accent-rgb: 105, 225, 251; --accent-light: #1565C0; --accent-light-rgb: 21, 101, 192; /* Backgrounds */ --bg-primary: #131722; --bg-surface: #1e222d; --bg-input: #131722; --bg-hover: rgba(255,255,255,0.04); --bg-hover-strong: rgba(255,255,255,0.06); /* Text */ --text-primary: #d1d4dc; --text-secondary: #787b86; --text-muted: #9598a1; /* Borders */ --border-primary: #2a2e39; --border-subtle: #363a45; --border-separator: #4a4e59; /* Semantic */ --color-up: #26a69a; --color-down: #ef5350; --color-warning: #f7931a; --color-cta: #F0A500; --color-cta-hover: #d99400; /* Typography */ --font-primary: Inter, -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size-xs: 10px; --font-size-sm: 11px; --font-size-md: 13px; --font-size-lg: 15px; --font-size-xl: 16px; /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Sizing */ --toolbar-height: 38px; --draw-toolbar-width: 40px; } /* ═══ 1. Reset & Base Layout ═══ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-primary); background: var(--bg-primary); color: var(--text-primary); display: flex; flex-direction: column; } /* ═══ 2. Top Toolbar (single row, 38px height) ═══ */ #toolbar { display: flex; align-items: center; gap: 0; height: var(--toolbar-height); border-bottom: 1px solid var(--border-primary); background: var(--bg-surface); padding: 0 4px; user-select: none; position: relative; overflow-x: auto; scrollbar-width: none; } #toolbar::-webkit-scrollbar { display: none; } #toolbar > * { flex-shrink: 0; } .tb-scroll-btn { position: fixed; top: 0; width: 18px; height: var(--toolbar-height); display: none; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--accent); cursor: pointer; border: none; font-size: 8px; padding: 0; margin: 0; z-index: 10; transition: color 0.12s, background 0.12s; } .tb-scroll-btn:hover { background: var(--bg-hover-strong); color: var(--accent); } .tb-scroll-btn.visible { display: flex; } .tb-scroll-btn.left { left: 0; border-right: 1px solid var(--border-primary); } .tb-scroll-btn.right { right: 0; border-left: 1px solid var(--border-primary); } /* Cloud sync / Pro badge */ #cloudSyncIndicator.cloud-pro { display: flex !important; color: #69E1FB; background: rgba(105,225,251,0.08); border: 1px solid rgba(105,225,251,0.25); } #cloudSyncIndicator.cloud-simulated { display: flex !important; color: #f59e0b; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); } /* Replay bar */ .replay-bar { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: #1e222d; border: 1px solid #2a2e39; border-radius: 10px; padding: 4px 10px; z-index: 50; box-shadow: 0 4px 24px rgba(0,0,0,0.5); font-family: var(--font-family); user-select: none; } .replay-bar .replay-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: #787b86; cursor: pointer; transition: all 0.15s; } .replay-bar .replay-close:hover { background: #ef535033; color: #ef5350; } .replay-sep { width: 1px; height: 20px; background: #2a2e39; margin: 0 4px; } .replay-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: none; background: transparent; color: #d1d4dc; cursor: pointer; transition: all 0.15s; } .replay-btn:hover { background: #2a2e39; color: #fff; } .replay-btn.replay-play { width: 38px; height: 38px; border-radius: 50%; background: #2962ff; color: #fff; } .replay-btn.replay-play:hover { background: #1e53e5; } .replay-btn.replay-play.playing { background: #363a45; } .replay-btn.replay-play.playing:hover { background: #454a54; } .replay-speed { display: flex; gap: 2px; } .replay-speed-btn { padding: 4px 8px; border-radius: 4px; border: none; background: transparent; color: #787b86; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: var(--font-family); } .replay-speed-btn:hover { color: #d1d4dc; } .replay-speed-btn.active { background: #2962ff; color: #fff; } .replay-progress { display: flex; align-items: center; width: 160px; } .replay-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: #2a2e39; outline: none; cursor: pointer; } .replay-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #2962ff; cursor: pointer; border: 2px solid #1e222d; transition: transform 0.12s; } .replay-slider::-webkit-slider-thumb:hover { transform: scale(1.2); } .replay-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #2962ff; cursor: pointer; border: 2px solid #1e222d; } .replay-counter { font-size: 11px; color: #787b86; white-space: nowrap; min-width: 60px; text-align: right; } #replayBtn.active { color: #2962ff; } /* Replay start picker */ .replay-picker { position: fixed; top: 0; left: 0; background: #1e222d; border: 1px solid #2a2e39; border-radius: 10px; padding: 0; z-index: 60; box-shadow: 0 8px 32px rgba(0,0,0,0.6); font-family: var(--font-family); width: 280px; user-select: none; } .rp-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font-size: 14px; font-weight: 600; color: #d1d4dc; } .rp-close { margin-left: auto; background: none; border: none; color: #787b86; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .rp-close:hover { color: #d1d4dc; } .rp-section { padding: 8px 16px; } .rp-divider { height: 1px; background: #2a2e39; margin: 0; } .rp-label { font-size: 10px; color: #787b86; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; } .rp-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #363a45; background: transparent; color: #d1d4dc; font-size: 13px; cursor: pointer; transition: all 0.15s; font-family: var(--font-family); } .rp-option:hover { background: #2962ff22; border-color: #2962ff; color: #fff; } .rp-option.active { background: #2962ff22; border-color: #2962ff; color: #2962ff; } .rp-date-row { display: flex; gap: 6px; } .rp-date { flex: 1; background: #131722; border: 1px solid #363a45; border-radius: 6px; color: #d1d4dc; padding: 6px 10px; font-size: 12px; font-family: var(--font-family); outline: none; } .rp-date::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } .rp-date:focus { border-color: #2962ff; } .rp-go { background: #2962ff; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-family); transition: background 0.15s; } .rp-go:hover { background: #1e53e5; } .rp-presets { display: flex; flex-wrap: wrap; gap: 6px; } .rp-preset { flex: 1; min-width: 55px; padding: 7px 4px; border-radius: 6px; border: 1px solid #363a45; background: transparent; color: #d1d4dc; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: var(--font-family); text-align: center; } .rp-preset:hover { background: #2962ff22; border-color: #2962ff; color: #fff; } .replay-picker-overlay { position: fixed; inset: 0; z-index: 55; cursor: crosshair; background: rgba(0,0,0,0.15); } .replay-pick-line { position: fixed; top: 0; bottom: 0; width: 2px; background: #2962ff; pointer-events: none; z-index: 56; opacity: 0.7; } .replay-pick-label { position: fixed; z-index: 57; background: #2962ff; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; pointer-events: none; white-space: nowrap; font-family: var(--font-family); } .tb-item { position: relative; display: flex; align-items: center; height: 100%; padding: 0 8px; cursor: pointer; font-size: var(--font-size-md); color: var(--text-primary); transition: color 0.12s, background 0.12s; white-space: nowrap; } .tb-item:hover { color: var(--text-primary); background: var(--bg-hover); } .tb-item.disabled { opacity: 0.3; pointer-events: none; } .tb-item.active { color: var(--accent); } .tb-item.dd-open, .tb-item:has(.dropdown.open) { color: var(--accent); } .tb-item svg:not(.tb-caret) { width: 18px; height: 18px; fill: currentColor; margin-right: 2px; } .tb-widgets-btn svg { fill: none !important; } .tb-caret { width: 8px; height: 5px; margin-left: 4px; color: #787b86; flex-shrink: 0; } .tb-sep { width: 1px; height: 24px; background: var(--border-separator); margin: 0 4px; flex-shrink: 0; } /* ═══ Pinned Timeframes ═══ */ .pinned-res-bar { display: flex; align-items: center; gap: 2px; } .pinned-res-bar:empty { display: none; } .pinned-chip { padding: 2px 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-radius: 4px; white-space: nowrap; line-height: 1.4; } .pinned-chip:hover { color: var(--text-primary); background: var(--bg-hover); } .pinned-chip.active { color: var(--accent); } .dd-item[data-res], .dd-item[data-range], .dd-item[data-type], .dd-item[data-scale] { position: relative; padding-right: 28px; } .dd-item[data-ss] { position: relative; padding-right: 40px; } .dd-pin { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; opacity: 0; cursor: pointer; color: #787b86; transition: opacity .15s; } .dd-item[data-res]:hover .dd-pin, .dd-item[data-range]:hover .dd-pin, .dd-item[data-type]:hover .dd-pin, .dd-item[data-scale]:hover .dd-pin, .dd-item[data-ss]:hover .dd-pin, .dd-item[data-mode]:hover .dd-pin { opacity: 0.5; } .dd-pin.pinned { opacity: 1; color: var(--accent); } /* ═══ Drawing Properties (separate row below toolbar) ═══ */ #drawPropBar { display: none; align-items: center; gap: 2px; width: 100%; height: 32px; padding: 0 8px; box-sizing: border-box; background: var(--bg-secondary, #131722); border-bottom: 1px solid var(--border-primary, #2a2e39); overflow-x: auto; scrollbar-width: none; position: relative; } #drawPropBar::-webkit-scrollbar { display: none; } #drawPropBar > * { flex-shrink: 0; } #drawPropBar.visible { display: flex; } .dp-scroll-btn { position: sticky; top: 0; width: 18px; height: 30px; min-width: 18px; display: none; align-items: center; justify-content: center; background: var(--bg-secondary, #131722); color: var(--accent); cursor: pointer; border: none; font-size: 8px; padding: 0; margin: 0; z-index: 10; flex-shrink: 0; } .dp-scroll-btn:hover { background: var(--bg-hover-strong); color: var(--accent); } .dp-scroll-btn.visible { display: flex; } .dp-scroll-btn.left { left: 0; border-right: 1px solid var(--border-primary); } .dp-scroll-btn.right { right: 0; border-left: 1px solid var(--border-primary); } .dp-sep { width: 1px; height: 18px; background: var(--border-primary, #2a2e39); margin: 0 6px; flex-shrink: 0; } .dp-label { color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 0 6px; white-space: nowrap; } .dp-item { display: flex; align-items: center; padding: 0 4px; } .dp-color-swatch { width: 24px; height: 24px; border: 1px solid var(--border-primary); border-radius: 3px; cursor: pointer; padding: 2px; box-sizing: border-box; } .dp-color-inner { width: 100%; height: 100%; border-radius: 2px; } .dp-item select, .dp-item input[type="text"] { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: 3px; padding: 2px 6px; font-size: 11px; outline: none; } .dp-item select { cursor: pointer; } .dp-item input[type="text"] { width: 120px; } .dp-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 3px; cursor: pointer; color: var(--text-secondary); background: none; } .dp-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .dp-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } .dp-btn.dp-alert { color: var(--accent); } .dp-btn.dp-alert:hover { background: rgba(41,98,255,0.15); } .dp-btn.dp-delete { color: var(--color-down); } .dp-btn.dp-delete:hover { background: rgba(234,57,67,0.15); } .dp-btn.active { color: var(--accent); } .dp-panel { position: fixed; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); width: 260px; z-index: 1000; overflow: hidden; } .dp-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-primary); font-size: 12px; font-weight: 600; color: var(--text-primary); } .dp-panel-close { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; } .dp-panel-close:hover { color: var(--text-primary); } .dp-panel-body { padding: 10px 14px; max-height: 300px; overflow-y: auto; } .dp-panel-footer { padding: 8px 14px; border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; } .dp-panel-apply { background: var(--accent); color: #000; border: none; border-radius: 4px; padding: 5px 16px; font-size: 12px; font-weight: 600; cursor: pointer; } .dp-panel-apply:hover { opacity: 0.9; } .dp-coord-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .dp-coord-row label { font-size: 11px; color: var(--text-secondary); min-width: 52px; font-weight: 500; } .dp-coord-row input { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-primary); color: var(--text-primary); border-radius: 4px; padding: 4px 8px; font-size: 12px; font-family: var(--font-mono); outline: none; } .dp-coord-row input:focus { border-color: var(--accent); } .dp-coord-anchor { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 4px; } .dp-vis-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text-primary); cursor: pointer; } .dp-vis-row input[type="checkbox"] { accent-color: var(--accent); } .dp-vis-sep { height: 1px; background: var(--border-primary); margin: 4px 0; } .dp-screenshot-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-primary); border: 1px solid var(--accent); color: var(--text-primary); padding: 10px 20px; border-radius: 8px; font-size: 13px; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); animation: dp-toast-in 0.2s ease-out; } .dp-screenshot-toast button { background: var(--accent); color: #000; border: none; border-radius: 4px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } @keyframes dp-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ═══ 3. User Menu ═══ */ #userMenu { position: static; display: flex; align-items: center; height: 100%; padding: 0 2px 0 4px; cursor: pointer; } #userMenu .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-md); font-weight: 600; overflow: hidden; } #userMenu .signin-btn { font-size: 12px; color: var(--bg-primary); font-weight: 700; padding: 5px 14px; border: none; border-radius: var(--radius-sm); background: var(--color-cta); cursor: pointer; transition: background 0.15s; } #userMenu .signin-btn:hover { background: var(--color-cta-hover); } .user-dropdown { display: none; position: fixed; top: var(--toolbar-height); right: 4px; min-width: 160px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 1000; padding: 4px 0; } .user-dropdown.open { display: block; } .user-dropdown .ud-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: var(--font-size-md); color: var(--text-primary); cursor: pointer; transition: background 0.12s; } .user-dropdown .ud-item:hover { background: var(--bg-hover-strong); } .user-dropdown .ud-item svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.7; } .user-dropdown .ud-sep { height: 1px; background: var(--border-primary); margin: 4px 0; } /* ═══ 4. WebSocket Status Dot ═══ */ .ws-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--text-secondary); transition: background 0.3s; margin: 0 3px; cursor: pointer; pointer-events: auto; } .ws-dot.connected { background: var(--color-up); } .ws-dot.connecting { background: var(--color-warning); animation: wsPulse 1.2s ease-in-out infinite; } .ws-dot.error, .ws-dot.disconnected { background: var(--color-down); } .ws-dot.delayed { background: transparent; width: 14px; height: 14px; position: relative; } .ws-dot.delayed::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%235b8def' stroke-width='2'/%3E%3Cpath d='M8 4.5V8.5L10.5 10' stroke='%235b8def' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .ws-status-popover { position: fixed; z-index: 10000; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #eee); border: 1px solid var(--border-color, #444); border-radius: 8px; padding: 12px 16px; min-width: 280px; max-width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-size: 12px; line-height: 1.5; } .ws-pop-section { padding: 6px 0; } .ws-pop-section + .ws-pop-section { border-top: 1px solid var(--border-color, #333); } .ws-pop-row { display: flex; align-items: center; gap: 8px; } .ws-pop-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .ws-pop-heading { font-weight: 600; font-size: 14px; color: var(--color-up, #4caf50); } .ws-pop-detail { color: var(--text-secondary, #aaa); margin-top: 2px; font-size: 12px; } .ws-pop-label { color: var(--text-secondary, #888); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .ws-pop-source .ws-pop-detail { color: var(--text-primary); } .ws-pop-upgrade { background: var(--bg-secondary, #2a2a2a); border-radius: 6px; padding: 8px 12px !important; margin-top: 4px; } .ws-pop-feed-opt { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; border-radius: 4px; font-size: 12px; color: var(--text-secondary); transition: background 0.15s; } .ws-pop-feed-opt:hover { background: rgba(255,255,255,0.06); } .ws-pop-feed-opt.active { color: var(--text-primary); font-weight: 600; cursor: default; } .ws-pop-feed-opt.active:hover { background: transparent; } .ws-pop-tz { color: var(--text-secondary, #666); font-size: 11px; } .ws-pop-note { color: var(--text-secondary, #888); font-size: 11px; font-style: italic; border-top: 1px solid var(--border-color, #333); padding-top: 8px; } .ws-pop-timeline { padding: 8px 0; } .ws-pop-tl-bar { position: relative; height: 6px; background: var(--bg-secondary, #2a2a2a); border-radius: 3px; margin-bottom: 4px; } .ws-pop-tl-seg { position: absolute; top: 0; height: 100%; border-radius: 3px; } .ws-pop-tl-seg.pre { background: #e879f9; } .ws-pop-tl-seg.rth { background: var(--color-up, #4caf50); } .ws-pop-tl-seg.post { background: #fbbf24; } .ws-pop-tl-now { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-primary, #fff); border-radius: 1px; transform: translateX(-50%); } .ws-pop-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary, #888); } @keyframes wsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes wsRingSpin { to { transform: rotate(360deg); } } /* ═══ 5. Symbol Chip & Resolution ═══ */ #symbolChip { font-weight: 700; font-size: var(--font-size-lg); color: var(--text-primary); padding: 0 10px; display: flex; align-items: center; gap: 8px; height: 100%; cursor: pointer; } #symbolChip:hover { background: var(--bg-hover); } #symbolChip .arrow { font-size: 14px; color: var(--text-secondary); margin-left: 2px; } #symbolChip .sym-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: var(--border-subtle); margin-left: -7px; } /* Resolution display */ #resChip { font-weight: 600; font-size: var(--font-size-md); } /* ═══ 5. Dropdown Panels ═══ */ .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 200; min-width: 200px; max-height: 70vh; overflow-y: auto; scrollbar-color: var(--accent, #69E1FB) transparent; } .dropdown.open { display: block; } .dropdown.right { left: auto; right: 0; } .dd-header { padding: 8px 12px; font-size: var(--font-size-sm); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .dd-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-size: var(--font-size-md); font-weight: 400; color: var(--text-primary); cursor: pointer; transition: background 0.1s; } .dd-item:hover { background: var(--border-primary); } .dd-item.active { color: var(--accent); } .dd-item .shortcut { font-size: var(--font-size-sm); color: var(--text-secondary); margin-left: auto; white-space: nowrap; padding-left: 12px; } .layout-apply-btn:hover { color: var(--text-primary) !important; background: var(--accent) !important; } .dd-more-toggle { display: flex; align-items: center; } .dd-more-toggle .dd-more-caret { transition: transform .15s; } .dd-more-toggle.expanded { color: var(--accent, #2962ff); background: rgba(41,98,255,0.08); border-radius: 4px; } .dd-more-toggle.expanded .dd-more-caret { transform: rotate(180deg); } .dd-more-section .dd-item { padding-left: 16px; } /* Auto-fit button badge & dropdown */ .autofit-badge { font-size: 9px; font-weight: 700; color: var(--accent); margin-left: 1px; } .autofit-dropdown { min-width: 180px; } .autofit-dropdown .dd-item { position: relative; padding-right: 40px; } /* Symbol search inside dropdown */ .dd-search { padding: 8px 12px; border-bottom: 1px solid var(--border-primary); } .dd-search input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; } .dd-search input:focus { outline: none; border-color: var(--accent); } /* Chart type icons in dropdown */ .dd-item .ct-icon { width: 20px; margin-right: 8px; display: inline-flex; } /* ═══ 6. Drawing Toolbar (moveable, Adobe-style groups with flyout submenus) ═══ * The toolbar uses data-pos attribute ("left"|"right"|"top"|"top-bar"|"bottom") * to switch between column (vertical) and row (horizontal) layouts. * Flyout submenus position themselves relative to the toolbar edge. */ #drawToolbar { background: var(--bg-surface); z-index: 50; display: flex; align-items: center; } #drawToolbar[data-pos="left"] { width: var(--draw-toolbar-width); flex-shrink: 0; flex-direction: column; padding-top: 4px; border-right: 1px solid var(--border-primary); position: relative; } #drawToolbar[data-pos="right"] { width: var(--draw-toolbar-width); flex-shrink: 0; flex-direction: column; padding-top: 4px; border-left: 1px solid var(--border-primary); order: 2; position: relative; } #drawToolbar[data-pos="left"] .tg-scroll-area, #drawToolbar[data-pos="right"] .tg-scroll-area { display: flex; flex-direction: column; align-items: center; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } #drawToolbar[data-pos="left"] .tg-scroll-area::-webkit-scrollbar, #drawToolbar[data-pos="right"] .tg-scroll-area::-webkit-scrollbar { display: none; } #drawToolbar[data-pos="top"] .tg-scroll-area, #drawToolbar[data-pos="top-bar"] .tg-scroll-area, #drawToolbar[data-pos="bottom"] .tg-scroll-area { display: flex; flex-direction: row; align-items: center; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } #drawToolbar[data-pos="top"] .tg-scroll-area::-webkit-scrollbar, #drawToolbar[data-pos="top-bar"] .tg-scroll-area::-webkit-scrollbar, #drawToolbar[data-pos="bottom"] .tg-scroll-area::-webkit-scrollbar { display: none; } .tg-scroll-btn { width: 100%; height: 20px; display: none; align-items: center; justify-content: center; background: var(--bg-surface); color: var(--accent); cursor: pointer; border: none; font-size: 10px; flex-shrink: 0; transition: color 0.12s, background 0.12s; position: relative; z-index: 2; } .tg-scroll-btn:hover { background: var(--bg-hover-strong); } .tg-scroll-btn.visible { display: flex; } .tg-scroll-btn.top { border-bottom: 1px solid var(--border-primary); } .tg-scroll-btn.bottom { border-top: 1px solid var(--border-primary); } #drawToolbar[data-pos="top"] .tg-scroll-btn, #drawToolbar[data-pos="top-bar"] .tg-scroll-btn, #drawToolbar[data-pos="bottom"] .tg-scroll-btn { display: none !important; } #drawToolbar[data-pos="bottom"] { height: var(--draw-toolbar-width); width: 100%; justify-content: center; gap: 2px; padding: 0 8px; border-top: 1px solid var(--border-primary); } #drawToolbar[data-pos="top"], #drawToolbar[data-pos="top-bar"] { height: var(--draw-toolbar-width); width: 100%; justify-content: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--border-primary); } #drawToolbar[data-pos="top"] .tg-flyout, #drawToolbar[data-pos="top-bar"] .tg-flyout { top: calc(100% + 4px); left: 0; } #drawToolbar[data-pos="top"] .draw-sep-v, #drawToolbar[data-pos="top-bar"] .draw-sep-v { display: none; } #drawToolbar[data-pos="top"] .draw-sep-h, #drawToolbar[data-pos="top-bar"] .draw-sep-h { display: inline-block; } /* Tool group button */ .tg-group { position: relative; width: 34px; height: 34px; margin: 1px; } .tg-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); transition: color 0.12s, background 0.12s; border: none; background: none; white-space: nowrap; gap: 8px; font-size: var(--font-size-md); font-family: inherit; position: relative; z-index: 1; } .tg-btn .btn-text { display: none; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--bg-surface); color: var(--text-primary); font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); box-shadow: 2px 0 8px rgba(0,0,0,0.4); white-space: nowrap; pointer-events: none; z-index: 55; } #drawToolbar[data-pos="right"] .tg-btn .btn-text { left: auto; right: calc(100% + 8px); } #drawToolbar[data-pos="top"] .tg-btn .btn-text, #drawToolbar[data-pos="top-bar"] .tg-btn .btn-text, #drawToolbar[data-pos="bottom"] .tg-btn .btn-text { display: none !important; } #drawToolbar[data-pos="left"] .tg-group:not(:has(.tg-flyout.open)):hover .tg-btn .btn-text, #drawToolbar[data-pos="right"] .tg-group:not(:has(.tg-flyout.open)):hover .tg-btn .btn-text { display: block; } .tg-btn:hover { color: var(--text-primary); background: var(--bg-hover-strong); } .tg-btn.active, .tg-group.flyout-open > .tg-btn { color: var(--accent); background: rgba(var(--accent-rgb),0.1); } /* When a flyout is open, dim other active buttons so only the open group highlights */ #drawToolbar:has(.flyout-open) .tg-btn.active { color: var(--text-secondary); background: transparent; } #drawToolbar:has(.flyout-open) .tg-group.flyout-open > .tg-btn { color: var(--accent); background: rgba(var(--accent-rgb),0.1); } .tg-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } /* Small triangle indicator in bottom-right corner — signals that a group has a flyout submenu */ .tg-group.has-sub .tg-btn::after { content: ''; position: absolute; bottom: 2px; right: 2px; border: 3px solid transparent; border-bottom-color: var(--text-secondary); border-right-color: var(--text-secondary); } .tg-group.has-sub .tg-btn.active::after, .tg-group.has-sub.flyout-open > .tg-btn::after { border-bottom-color: var(--accent); border-right-color: var(--accent); } #drawToolbar[data-pos="right"] .tg-group.has-sub .tg-btn::after { right: auto; left: 2px; border-right-color: transparent; border-left-color: var(--text-secondary); } #drawToolbar[data-pos="right"] .tg-group.has-sub .tg-btn.active::after, #drawToolbar[data-pos="right"] .tg-group.has-sub.flyout-open > .tg-btn::after { border-right-color: transparent; border-left-color: var(--accent); } #drawToolbar[data-pos="bottom"] .tg-group.has-sub .tg-btn::after { bottom: auto; top: 2px; border-bottom-color: transparent; border-top-color: var(--text-secondary); } #drawToolbar[data-pos="bottom"] .tg-group.has-sub .tg-btn.active::after, #drawToolbar[data-pos="bottom"] .tg-group.has-sub.flyout-open > .tg-btn::after { border-bottom-color: transparent; border-top-color: var(--accent); } /* Flyout submenu — positioned off the toolbar edge via per-position rules below */ .tg-flyout { display: none; position: absolute; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 400; min-width: 180px; padding: 4px 0; white-space: nowrap; max-height: 70vh; overflow-y: auto; } .tg-flyout::-webkit-scrollbar { width: 5px; } .tg-flyout::-webkit-scrollbar-track { background: transparent; } .tg-flyout::-webkit-scrollbar-thumb { background: var(--accent, #69E1FB); border-radius: 3px; } .tg-flyout.open { display: block; } /* Flyout position per toolbar position */ #drawToolbar[data-pos="left"] .tg-flyout { left: calc(100% + 4px); top: 0; } #drawToolbar[data-pos="left"] #drawPosMenu { top: auto; bottom: 0; } #drawToolbar[data-pos="right"] .tg-flyout { right: calc(100% + 4px); top: 0; } #drawToolbar[data-pos="right"] #drawPosMenu { top: auto; bottom: 0; } #drawToolbar[data-pos="bottom"] .tg-flyout { bottom: calc(100% + 4px); left: 0; } .tg-flyout-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: var(--font-size-md); color: var(--text-primary); cursor: pointer; transition: background 0.1s; } .tg-flyout-item:hover { background: var(--border-primary); } .tg-flyout-item.active { color: var(--accent); background: rgba(var(--accent-rgb),0.08); } .tg-flyout-item svg { width: 16px; height: 16px; flex-shrink: 0; } .tg-flyout-header { padding: 5px 14px; font-size: var(--font-size-xs); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .draw-sep-v { width: 24px; height: 1px; background: var(--border-separator); margin: 4px 0; } .draw-sep-h { width: 1px; height: 24px; background: var(--border-separator); margin: 0 4px; } #drawToolbar[data-pos="left"] .draw-sep-h, #drawToolbar[data-pos="right"] .draw-sep-h { display: none; } #drawToolbar[data-pos="bottom"] .draw-sep-v { display: none; } #drawToolbar[data-pos="bottom"] .draw-sep-h { display: inline-block; } /* Drawing toolbar — light theme overrides */ #drawToolbar.light-theme .tg-btn { color: #131722; } #drawToolbar.light-theme .tg-btn:hover { color: #131722; background: rgba(0,0,0,0.05); } #drawToolbar.light-theme .tg-btn.active, #drawToolbar.light-theme .tg-group.flyout-open > .tg-btn { color: var(--accent-light); background: rgba(var(--accent-light-rgb),0.08); } #drawToolbar.light-theme .tg-flyout { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } #drawToolbar.light-theme .tg-flyout-item { color: #131722; } #drawToolbar.light-theme .tg-flyout-item:hover { background: #f0f3fa; } #drawToolbar.light-theme .tg-flyout-item.active { color: var(--accent-light); background: rgba(var(--accent-light-rgb),0.06); } #drawToolbar.light-theme .tg-flyout-header { color: #9598a1; } #drawToolbar.light-theme .draw-sep-v { background: #e0e3eb; } #drawToolbar.light-theme .draw-sep-h { background: #e0e3eb; } #drawToolbar.light-theme .tg-group.has-sub .tg-btn.active::after, #drawToolbar.light-theme .tg-group.has-sub.flyout-open > .tg-btn::after { border-bottom-color: var(--accent-light); border-right-color: var(--accent-light); } #drawToolbar.light-theme[data-pos="right"] .tg-group.has-sub .tg-btn.active::after, #drawToolbar.light-theme[data-pos="right"] .tg-group.has-sub.flyout-open > .tg-btn::after { border-right-color: transparent; border-left-color: var(--accent-light); } #drawToolbar.light-theme[data-pos="bottom"] .tg-group.has-sub .tg-btn.active::after, #drawToolbar.light-theme[data-pos="bottom"] .tg-group.has-sub.flyout-open > .tg-btn::after { border-bottom-color: transparent; border-top-color: var(--accent-light); } #drawToolbar.light-theme .tg-btn .btn-text { background: #fff; color: #131722; box-shadow: 2px 0 8px rgba(0,0,0,0.12); } /* ── Widget Toolbar & Panel ── */ #widgetToolbar { display: flex; flex-direction: column; align-items: center; width: var(--draw-toolbar-width); flex-shrink: 0; background: var(--bg-surface); border-left: 1px solid var(--border-primary); padding: 4px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; } #widgetToolbar::-webkit-scrollbar { display: none; } .wt-icons { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; } .wt-icon-btn { width: 34px; height: 34px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; color: var(--text-primary); transition: background 0.15s, color 0.15s; padding: 0; } .wt-icon-btn:hover { background: var(--bg-hover); } .wt-icon-btn.active { color: var(--accent); background: rgba(var(--accent-rgb, 105,225,251), 0.1); } .wt-icon-btn svg { width: 18px; height: 18px; } .wt-manage-btn { width: 28px; height: 28px; border-radius: 4px; margin-top: auto; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--border-primary); color: var(--text-secondary); cursor: pointer; padding: 0; margin-bottom: 4px; } .wt-manage-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); } #widgetPanel { display: flex; flex-direction: column; flex-shrink: 0; width: 40%; position: relative; background: var(--bg-primary); border-left: 1px solid var(--border-primary); transition: width 0.2s ease; min-width: 0; } #widgetPanel.wt-closed { width: 0; border-left: none; overflow: hidden; } .wp-resize-handle { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; } .wp-resize-handle:hover, .wp-resize-handle.active { background: var(--accent); opacity: 0.3; } .wp-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; height: 32px; min-width: 240px; } .wp-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .wp-header-actions { display: flex; align-items: center; gap: 4px; } .wp-collapse-all-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; line-height: 1; border-radius: 3px; } .wp-collapse-all-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .wp-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; line-height: 1; border-radius: 3px; display: flex; align-items: center; } .wp-close:hover { background: var(--bg-hover); color: var(--text-primary); } .wp-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 240px; scrollbar-width: thin; } .wp-widget-section { border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .wp-widget-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-primary); user-select: none; } .wp-widget-header:hover { background: var(--bg-hover); } .wp-widget-header .wp-collapse-icon { width: 12px; height: 12px; transition: transform 0.15s; color: var(--text-secondary); } .wp-widget-section.collapsed .wp-collapse-icon { transform: rotate(-90deg); } .wp-widget-section.collapsed .wp-widget-body { display: none; } .wp-widget-header .wp-remove-btn { margin-left: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; font-size: 14px; line-height: 1; opacity: 0; } .wp-widget-header:hover .wp-remove-btn { opacity: 1; } .wp-widget-header .wp-remove-btn:hover { color: #ef5350; } .wp-widget-body { position: relative; } .wp-widget-frame { width: 100%; border: none; display: block; background: var(--bg-primary); } .wp-widget-loading { display: flex; align-items: center; justify-content: center; height: 100px; color: var(--text-secondary); font-size: 11px; } /* Widget manager modal */ #widgetManagerModal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 900; } .wm-dialog { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 12px; width: 480px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,0.4); } .wm-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-primary); font-size: 14px; font-weight: 600; color: var(--text-primary); } .wm-close { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; } .wm-close:hover { color: var(--text-primary); } .wm-search { padding: 8px 16px; border-bottom: 1px solid var(--border-primary); } .wm-search input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text-primary); outline: none; box-sizing: border-box; } .wm-search input:focus { border-color: var(--accent); } .wm-body { flex: 1; overflow-y: auto; padding: 8px 0; } .wm-category { padding: 4px 16px 2px; font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .wm-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; transition: background 0.12s; } .wm-item:hover { background: var(--bg-hover); } .wm-item-icon { width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0; } .wm-item-name { font-size: 13px; color: var(--text-primary); flex: 1; } .wm-item-toggle { width: 32px; height: 18px; border-radius: 9px; position: relative; background: var(--bg-input); border: 1px solid var(--border-primary); cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .wm-item-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-secondary); transition: transform 0.2s, background 0.2s; } .wm-item-toggle.on { background: var(--accent); border-color: var(--accent); } .wm-item-toggle.on::after { transform: translateX(14px); background: #000; } .wm-item-drag { width: 16px; color: var(--text-secondary); cursor: grab; opacity: 0.25; display: flex; align-items: center; touch-action: none; } .wm-item:hover .wm-item-drag { opacity: 0.6; } .wm-item-drag:hover { opacity: 1 !important; } .wm-footer { padding: 10px 16px; border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; } .wm-done { background: var(--accent); color: #000; border: none; border-radius: 6px; padding: 6px 20px; font-size: 12px; font-weight: 600; cursor: pointer; } .wm-done:hover { opacity: 0.9; } /* Layout count badges */ .layout-counts { display: flex; gap: 4px; padding: 8px 12px; flex-wrap: wrap; } .layout-count-btn { width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); border: 1px solid transparent; font-size: 12px; font-weight: 600; transition: all 0.12s; user-select: none; } .layout-count-btn:hover { color: var(--text-primary); border-color: var(--border-primary); } .layout-count-btn.selected { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); } .layout-count-btn[data-count="all"] { width: auto; padding: 0 8px; font-size: 11px; } /* Layout variation icons */ .layout-variants { display: flex; gap: 6px; padding: 6px 12px 8px; flex-wrap: wrap; max-height: none; overflow-y: auto; scrollbar-width: thin; } .layout-variants.show-all { flex-direction: column; gap: 0; } .layout-variants.show-all .layout-row { display: flex; align-items: center; gap: 3px; padding: 3px 0; border-top: 1px solid var(--border-primary); flex-wrap: nowrap; } .layout-variants.show-all .layout-row:first-child { border-top: none; } .layout-variants.show-all .layout-opt { width: 34px; height: 24px; } .layout-variants.show-all .layout-opt svg { width: 26px; height: 18px; } .layout-row-label { width: 22px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: right; margin-right: 4px; } .layout-opt { width: 52px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); border: 1px solid transparent; transition: color 0.12s, border-color 0.12s; } .layout-opt:hover { color: var(--text-primary); border-color: var(--border-primary); } .layout-opt.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); } .layout-opt svg { width: 40px; height: 30px; } .sync-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; background: var(--border-primary); color: var(--text-primary); transition: all 0.12s; user-select: none; } .sync-tag:hover { background: rgba(255,255,255,0.12); } .sync-tag.active { background: var(--accent); color: #131722; } .sync-tag.active::before { content: '✓ '; font-weight: 700; } /* Draw chip in top toolbar — also uses flyout submenus */ #drawDropdown { min-width: 220px; max-height: none; overflow: visible; } #drawDropdown .dd-header { padding: 6px 12px; } #drawDropdown .dd-sep { height: 1px; background: var(--border-primary); margin: 4px 0; } /* Submenu support */ .dd-item.has-sub { position: relative; } .dd-item.has-sub::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--text-secondary); pointer-events: none; } .dd-item.has-sub > .dd-submenu { display: none; position: absolute; left: calc(100% - 4px); top: -4px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 190px; padding: 4px 0; z-index: 500; white-space: nowrap; padding-left: 4px; max-height: 70vh; overflow-y: auto; } .dd-item.has-sub > .dd-submenu::-webkit-scrollbar { width: 5px; } .dd-item.has-sub > .dd-submenu::-webkit-scrollbar-track { background: transparent; } .dd-item.has-sub > .dd-submenu::-webkit-scrollbar-thumb { background: var(--accent, #69E1FB); border-radius: 3px; } .dd-item.has-sub:hover > .dd-submenu { display: block; } .dd-item.has-sub > .dd-submenu.dd-submenu-up { top: auto; bottom: -4px; } .dd-item.has-sub > .dd-submenu > .dd-item { padding-left: 12px; } /* ═══ 7. Chart Area & Loading ═══ */ #chartWrap { display: flex; width: 100%; flex: 1; min-height: 0; position: relative; } #chart { flex: 1; min-height: 200px; } #chartGrid:not([data-layout="1"]) #chart { min-height: 0; } #tgBranding { display:flex; align-items:center; justify-content:center; padding:6px 0; opacity:0.9; transition:opacity .2s; line-height:0; flex-shrink:0; } #tgBranding:hover { opacity:1; } #tgBranding img { border-radius:4px; display:block; } /* ── Multi-chart grid layouts ── */ #chartGrid { flex: 1; min-height: 0; display: grid; gap: 2px; background: var(--border-primary); grid-template-columns: 1fr; grid-template-rows: 1fr; } #chartGrid[data-layout="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; background: none; } #chartGrid[data-layout="1"] .chart-panel { border: none; } #chartGrid[data-layout="2h"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } #chartGrid[data-layout="2v"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3"] .chart-panel:first-child { grid-row: 1 / 3; } #chartGrid[data-layout="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="8"] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="12"] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } #chartGrid[data-layout="16"] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; } /* 3-panel variations */ #chartGrid[data-layout="3v"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; } #chartGrid[data-layout="3h"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } #chartGrid[data-layout="3rl"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3rl"] .chart-panel:nth-child(3) { grid-row: 1 / 3; } #chartGrid[data-layout="3tb"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3tb"] .chart-panel:first-child { grid-column: 1 / 3; } #chartGrid[data-layout="3bt"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3bt"] .chart-panel:nth-child(3) { grid-column: 1 / 3; } /* 4-panel variations */ #chartGrid[data-layout="4v"] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; } #chartGrid[data-layout="4h"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; } #chartGrid[data-layout="4lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } #chartGrid[data-layout="4lr"] .chart-panel:first-child { grid-row: 1 / 4; } #chartGrid[data-layout="4rl"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } #chartGrid[data-layout="4rl"] .chart-panel:nth-child(4) { grid-row: 1 / 4; } #chartGrid[data-layout="4tb"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="4tb"] .chart-panel:first-child { grid-column: 1 / 4; } #chartGrid[data-layout="4bt"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="4bt"] .chart-panel:nth-child(4) { grid-column: 1 / 4; } /* 6-panel variations */ #chartGrid[data-layout="6v"] { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="6h"] { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); } #chartGrid[data-layout="6g"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } /* 8-panel variations */ #chartGrid[data-layout="8g"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="8v"] { grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="8h"] { grid-template-columns: 1fr; grid-template-rows: repeat(8, 1fr); } /* 10-panel */ #chartGrid[data-layout="10"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="10g"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); } /* 12-panel variations */ #chartGrid[data-layout="12g"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="12h"] { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; } /* 5-panel layouts */ #chartGrid[data-layout="5"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="5"] .chart-panel:nth-child(4) { grid-column: 1 / 2; } #chartGrid[data-layout="5"] .chart-panel:nth-child(5) { grid-column: 2 / 4; } #chartGrid[data-layout="5v"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="5h"] { grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr); } #chartGrid[data-layout="5lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="5lr"] .chart-panel:first-child { grid-row: 1 / 5; } #chartGrid[data-layout="5tb"] { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="5tb"] .chart-panel:first-child { grid-column: 1 / 5; } /* 6-panel extra */ #chartGrid[data-layout="6lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); } #chartGrid[data-layout="6lr"] .chart-panel:first-child { grid-row: 1 / 6; } #chartGrid[data-layout="6tb"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="6tb"] .chart-panel:first-child { grid-column: 1 / 6; } /* 7-panel layouts */ #chartGrid[data-layout="7"] { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="7"] .chart-panel:nth-child(5) { } #chartGrid[data-layout="7v"] { grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="7h"] { grid-template-columns: 1fr; grid-template-rows: repeat(7, 1fr); } #chartGrid[data-layout="7lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); } #chartGrid[data-layout="7lr"] .chart-panel:first-child { grid-row: 1 / 7; } #chartGrid[data-layout="7tb"] { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="7tb"] .chart-panel:first-child { grid-column: 1 / 7; } /* 8-panel extra */ #chartGrid[data-layout="8lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, 1fr); } #chartGrid[data-layout="8lr"] .chart-panel:first-child { grid-row: 1 / 8; } #chartGrid[data-layout="8tb"] { grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="8tb"] .chart-panel:first-child { grid-column: 1 / 8; } /* 9-panel layouts */ #chartGrid[data-layout="9"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } #chartGrid[data-layout="9v"] { grid-template-columns: repeat(9, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="9h"] { grid-template-columns: 1fr; grid-template-rows: repeat(9, 1fr); } #chartGrid[data-layout="9g"] { grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="9g"] .chart-panel:nth-child(6) { } #chartGrid[data-layout="9lr"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, 1fr); } #chartGrid[data-layout="9lr"] .chart-panel:first-child { grid-row: 1 / 9; } /* 10-panel extra */ #chartGrid[data-layout="10v"] { grid-template-columns: repeat(10, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="10h"] { grid-template-columns: 1fr; grid-template-rows: repeat(10, 1fr); } #chartGrid[data-layout="10lr"]{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, 1fr); } #chartGrid[data-layout="10lr"] .chart-panel:first-child { grid-row: 1 / 10; } /* 12-panel extra */ #chartGrid[data-layout="12v"] { grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="12lr"]{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(11, 1fr); } #chartGrid[data-layout="12lr"] .chart-panel:first-child { grid-row: 1 / 12; } /* 14-panel layouts */ #chartGrid[data-layout="14"] { grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="14g"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 1fr); } #chartGrid[data-layout="14v"] { grid-template-columns: repeat(14, 1fr); grid-template-rows: 1fr; } #chartGrid[data-layout="14h"] { grid-template-columns: 1fr; grid-template-rows: repeat(14, 1fr); } #chartGrid[data-layout="14lr"]{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(13, 1fr); } #chartGrid[data-layout="14lr"] .chart-panel:first-child { grid-row: 1 / 14; } /* 16-panel variation */ #chartGrid[data-layout="16g"] { grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr 1fr; } .chart-panel { position: relative; min-height: 0; overflow: hidden; background: var(--bg-primary); border: 1px solid transparent; } .chart-panel.active { border-color: var(--accent); } .chart-panel .panel-chart { width: 100%; height: 100%; } .chart-panel .panel-label { position: absolute; top: 4px; left: 8px; z-index: 2; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); padding: 1px 6px; border-radius: 3px; pointer-events: none; opacity: 0.85; } .chart-panel .panel-quote { position: absolute; top: 4px; left: 8px; right: 8px; z-index: 2; display: none; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: 11px; pointer-events: none; line-height: 1.4; } .chart-panel .panel-quote.visible { display: flex; } .chart-panel.quote-on .panel-label { display: none !important; } /* Sync group dot on each panel */ .panel-sync-dot { position: absolute; top: 4px; right: 8px; z-index: 3; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid var(--text-secondary); opacity: 0.5; transition: opacity 0.15s, transform 0.15s; pointer-events: auto; } .panel-sync-dot:hover { opacity: 1; transform: scale(1.2); } .panel-sync-dot.assigned { border-color: transparent; opacity: 0.9; } .panel-sync-dot.assigned:hover { opacity: 1; } /* Pop-out button on each panel */ .panel-popout-btn { position: absolute; top: 3px; right: 50px; z-index: 3; width: 18px; height: 18px; cursor: pointer; opacity: 0; transition: opacity 0.15s; pointer-events: auto; color: var(--text-secondary); } .chart-panel:hover .panel-popout-btn { opacity: 0.6; } .panel-popout-btn:hover { opacity: 1 !important; } /* Maximize button on each panel */ .panel-maximize-btn { position: absolute; top: 3px; right: 28px; z-index: 3; width: 18px; height: 18px; cursor: pointer; opacity: 0; transition: opacity 0.15s; pointer-events: auto; color: var(--text-secondary); } .chart-panel:hover .panel-maximize-btn { opacity: 0.6; } .panel-maximize-btn:hover { opacity: 1 !important; } #chartGrid.panel-maximized .chart-panel { display: none; } #chartGrid.panel-maximized .chart-panel.maximized { display: block; grid-column: 1 / -1; grid-row: 1 / -1; } #chartGrid.panel-maximized .chart-panel.maximized .panel-maximize-btn { opacity: 0.6; } /* Sync group picker dropdown */ .sync-group-picker { z-index: 1000; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 8px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); max-width: 200px; } .sgp-item { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; } .sgp-item:hover { transform: scale(1.25); box-shadow: 0 0 6px rgba(255,255,255,0.3); } .sgp-item.active { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px currentColor; } .sgp-none { border: 2px solid var(--text-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .sgp-none.active { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-secondary); } /* Settings panel sync group list */ .cs-sync-group-list { display: flex; flex-direction: column; gap: 8px; } .csg-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; gap: 8px; } .csg-label { font-size: 12px; color: var(--text-primary); white-space: nowrap; min-width: 120px; } .csg-palette { display: flex; gap: 4px; flex-wrap: wrap; } .csg-dot { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; transition: transform 0.12s; display: flex; align-items: center; justify-content: center; } .csg-dot:hover { transform: scale(1.3); } .csg-dot.active { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px currentColor; } .csg-none { border: 2px solid var(--text-secondary); color: var(--text-secondary); } .chart-panel .panel-quote .pq-sym { font-weight: 700; color: var(--text-primary); } .chart-panel .panel-quote .pq-price { font-weight: 600; color: var(--text-primary); } .chart-panel .panel-quote .pq-change { font-weight: 500; } .chart-panel .panel-quote .pq-change.up { color: var(--color-up); } .chart-panel .panel-quote .pq-change.down { color: var(--color-down); } .chart-panel .panel-quote .pq-latest { display: inline-flex; gap: 8px; align-items: center; } .chart-panel .panel-quote .pq-sep { color: var(--text-secondary); opacity: 0.4; margin: 0 4px; font-size: 10px; } .chart-panel .panel-quote .pq-ohlcv { color: var(--text-secondary); } .chart-panel .panel-quote .pq-val { color: var(--text-primary); } .chart-panel .panel-quote .pq-val.down { color: var(--color-down); } .chart-panel { container-type: inline-size; } .chart-panel .panel-quote .pq-trading { display: inline-flex; align-items: center; gap: 6px; } @container (max-width: 700px) { .panel-quote .pq-trading { flex-basis: 100%; } } .chart-panel .panel-quote .pq-order { pointer-events: auto; border: none; border-radius: 4px; padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer; color: #131722; white-space: nowrap; } .chart-panel .panel-quote .pq-order.sell { background: var(--color-down); } .chart-panel .panel-quote .pq-order.buy { background: var(--color-up); } .chart-panel .panel-quote .pq-spread { font-size: 11px; color: var(--text-primary); font-weight: 600; } .chart-panel .panel-quote .pq-settings { pointer-events: auto; border: none; cursor: pointer; color: var(--text-secondary); padding: 0; display: flex; align-items: center; background: none; } .chart-panel .panel-quote .pq-settings:hover { color: var(--text-primary); } .chart-panel .panel-quote .pq-panel-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; pointer-events: auto; } .chart-panel .panel-quote .pq-action-btn { cursor: pointer; color: var(--text-secondary); opacity: 0.6; transition: opacity 0.15s, color 0.15s; display: flex; align-items: center; } .chart-panel .panel-quote .pq-action-btn:hover { opacity: 1; color: var(--text-primary); } .chart-panel .panel-quote .pq-sync-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-secondary); } .chart-panel.quote-on .panel-sync-dot, .chart-panel.quote-on .panel-popout-btn, .chart-panel.quote-on .panel-maximize-btn { display: none !important; } /* ── Trading buttons dock (top-left, separate from quote bar) ── */ .chart-panel .panel-trading { position: absolute; top: 28px; left: 8px; z-index: 3; display: none; align-items: center; gap: 4px; pointer-events: none; } .chart-panel.active .panel-trading.visible { display: flex; } .chart-panel .panel-trading .pq-order { pointer-events: auto; border: none; border-radius: 4px; padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; color: #fff; white-space: nowrap; opacity: 0.88; transition: opacity 0.15s; } .chart-panel .panel-trading .pq-order:hover { opacity: 1; } .chart-panel .panel-trading .pq-order.sell { background: var(--color-down); } .chart-panel .panel-trading .pq-order.buy { background: var(--color-up); } .chart-panel .panel-trading .pq-spread { font-size: 10px; color: var(--text-secondary); padding: 0 2px; } .chart-panel .panel-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; font-size: 16px; color: var(--text-secondary); background: var(--bg-primary); } .chart-panel .panel-loading .loading-dots { display: flex; gap: 6px; } .chart-panel .panel-loading .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #f59e0b); animation: loadPulse 1.4s ease-in-out infinite; } .chart-panel .panel-loading .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .chart-panel .panel-loading .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes loadPulse { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } #chartClock { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } #chartClock .clock-tz { font-size: 10px; opacity: 0.7; } /* ── Bottom status bar (connection status, candle count, alerts) ── */ #status { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bg-surface); border-top: 1px solid var(--border-primary); font-size: var(--font-size-sm); color: var(--text-secondary); } #status .live { color: var(--color-up); } #saveCloudBtn:hover { color: var(--text-primary) !important; } .st-sep { width: 1px; height: 16px; background: var(--border-primary); margin: 0 8px; flex-shrink: 0; } #status .bb-alert { position: relative; margin-left: auto; cursor: pointer; display: flex; align-items: center; padding: 2px 4px; border-radius: 3px; transition: background 0.12s; } #status .bb-alert:hover { background: var(--bg-hover-strong); color: var(--text-primary); } #status .bb-alert svg { width: 14px; height: 14px; fill: currentColor; } #status .bb-alert .bb-dot, #bbAlert .bb-dot { position: absolute; top: 4px; right: 0px; width: 7px; height: 7px; border-radius: 50%; background: #e0c56c; display: none; } #status .bb-alert .bb-dot.visible, #bbAlert .bb-dot.visible { display: block; } .bb-tooltip { display: none; position: absolute; bottom: calc(100% + 4px); right: 0; background: var(--border-primary); color: var(--text-primary); font-size: var(--font-size-sm); padding: 4px 10px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } #status .bb-alert:hover .bb-tooltip { display: block; } /* ── Loading overlay (centered on chart, pointer-events:none so chart is still scrollable) ── */ .loading-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-secondary); font-size: 18px; z-index: 50; pointer-events: none; text-align: center; line-height: 1.6; } /* ═══ 8. Quote Info Bar ═══ * Displays: last price, change, volume, OHLCV for the hovered bar, * simulated bid/ask buttons, and a settings gear. */ #quoteBar { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-primary); font-family: var(--font-primary); height: var(--toolbar-height); } #quoteBar .qb-price { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); } #quoteBar .qb-change { font-size: 12px; font-weight: 600; } #quoteBar .qb-change.up { color: var(--color-up); } #quoteBar .qb-change.down { color: var(--color-down); } #quoteBar .qb-label { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 600; margin-right: 3px; } #quoteBar .qb-value { font-size: 12px; color: var(--text-primary); } #quoteBar .qb-sep { width: 1px; height: 20px; background: var(--border-separator); flex-shrink: 0; } #quoteBar .qb-ohlcv { display: flex; align-items: center; gap: 10px; font-size: 12px; } #quoteBar .qb-ohlcv .o-label { color: var(--text-secondary); margin-right: 2px; } #quoteBar .qb-ohlcv .o-val { color: var(--color-up); } #quoteBar .qb-ohlcv .o-val.down { color: var(--color-down); } #quoteBar .qb-spread { font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 30px; text-align: center; } .qb-spacer { flex: 1; } .qb-order-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; border: none; font-family: inherit; transition: opacity 0.15s; font-size: 12px; font-weight: 600; color: var(--bg-primary); white-space: nowrap; } .qb-order-btn:hover { opacity: 0.85; } .qb-order-btn.sell { background: var(--color-down); } .qb-order-btn.buy { background: var(--color-up); } .qb-order-btn .btn-size { font-size: var(--font-size-sm); opacity: 0.8; } .qb-settings-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); margin-left: 4px; transition: color 0.12s, background 0.12s; } .qb-settings-btn svg { width: 24px; height: 24px; } .qb-settings-btn:hover { color: var(--text-primary); background: var(--bg-hover-strong); } body.light-theme .qb-settings-btn:hover { color: #131722; background: rgba(0,0,0,0.05); } /* ═══ 9. Indicator Bar & Dialog ═══ * The indicator bar shows tags for each active indicator below the quote bar. * The indicator dialog is a modal with tabs: Predefined, Custom, Marketplace. */ #indicatorBar { display: none; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; background: var(--bg-surface); border-bottom: 1px solid var(--border-primary); font-size: 11px; min-height: 24px; flex-wrap: wrap; } #indicatorBar.visible { display: flex; } .ind-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 7px; background: var(--border-primary); border-radius: 4px; color: var(--text-primary); } .ind-tag.ind-hidden { opacity: 0.45; } .ind-tag .ind-label { white-space: nowrap; } .ind-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); line-height: 1; width: 18px; height: 18px; border-radius: 3px; } .ind-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .ind-remove { font-size: 14px; font-weight: 600; color: var(--color-down); } .ind-remove:hover { color: #ff4d4d; } .ind-tag.ind-hidden .ind-eye { color: #fbbf24; } .ind-settings-pop { background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 6px; padding: 10px 12px; min-width: 180px; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.35); } .ind-pop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ind-pop-title { font-weight: 600; font-size: 12px; color: var(--text-primary); } .ind-pop-close { cursor: pointer; color: var(--text-secondary); font-size: 18px; line-height: 1; padding: 0 2px; } .ind-pop-close:hover { color: var(--text-primary); } .ind-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .ind-pop-label { font-size: 11px; color: var(--text-secondary); text-transform: capitalize; } .ind-pop-input { width: 64px; padding: 3px 6px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-primary); background: var(--bg-input); color: var(--text-primary); text-align: center; outline: none; } .ind-pop-input:focus { border-color: var(--accent); } .ind-pop-actions { display: flex; justify-content: flex-end; margin-top: 8px; } .ind-pop-apply { padding: 4px 14px; font-size: 11px; font-weight: 600; border-radius: 4px; border: none; background: var(--accent); color: #131722; cursor: pointer; } .ind-pop-apply:hover { opacity: 0.9; } /* ── Indicator Dialog ── */ #indicatorDialog { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; } #indicatorDialog.open { display: block; } .ind-panel { position: absolute; top: 38px; left: 0; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); width: 640px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden; } /* Side-drawer mode: when Custom tab is active, dock to the right */ #indicatorDialog.ind-drawer-mode { top: 0; left: auto; right: 0; bottom: 0; } #indicatorDialog.ind-drawer-mode .ind-panel { position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; left: auto; width: 640px; min-width: 360px; max-width: 90vw; max-height: none; border-radius: 0; border-left: 1px solid var(--border-primary); border-right: none; border-top: none; border-bottom: none; animation: csSlideIn 0.2s ease-out; } .ind-drawer-resize { display: none; position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; } #indicatorDialog.ind-drawer-mode .ind-drawer-resize { display: block; } .ind-drawer-resize:hover, .ind-drawer-resize:active { background: var(--accent, #2962ff); } .ind-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-primary); } .ind-panel-header h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin: 0; } .ind-panel-header .close-btn { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 0 4px; } .ind-panel-header .close-btn:hover { color: var(--text-primary); } .ind-search { padding: 10px 16px; border-bottom: 1px solid var(--border-primary); } .ind-search input { width: 100%; background: var(--bg-input); border: 2px solid var(--accent); color: var(--text-primary); padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; } .ind-search input:focus { outline: none; } .ind-search input::placeholder { color: var(--text-secondary); } .ind-tabs { display: flex; border-bottom: 1px solid var(--border-primary); } .ind-tab { padding: 9px 18px; font-size: var(--font-size-md); color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; font-weight: 500; } .ind-tab:hover { color: var(--text-primary); } .ind-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .ind-content { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; } #indBuiltin { flex: 1; overflow-y: auto; min-height: 0; } #indicatorDialog.ind-drawer-mode .ind-content { overflow: hidden; min-height: 0; } /* Built-in list */ .ind-category { padding: 8px 16px 4px; font-size: var(--font-size-sm); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .ind-row { display: flex; align-items: center; padding: 9px 16px; cursor: pointer; transition: background 0.1s; gap: 12px; } .ind-row:hover { background: var(--border-primary); } .ind-row .ind-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .ind-row .ind-info { flex: 1; } .ind-row .ind-name { font-size: var(--font-size-md); font-weight: 600; color: var(--text-primary); } .ind-row .ind-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 1px; } .ind-row .ind-badge { font-size: var(--font-size-xs); font-weight: 600; padding: 2px 8px; border-radius: 3px; flex-shrink: 0; } .ind-badge-overlay { background: rgba(var(--accent-rgb),0.15); color: #5b8def; } .ind-badge-oscillator { background: rgba(171,71,188,0.15); color: #ab47bc; } .ind-badge-pattern { background: rgba(255,152,0,0.15); color: #ff9800; } .ind-badge-strategy { background: rgba(168,85,247,0.15); color: #a855f7; } .pub-sort-opt { font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: color 0.15s; } .pub-sort-opt:hover { color: var(--text-primary); } .pub-sort-opt.active { color: var(--accent); font-weight: 600; } .ind-cat-chips { display: flex; gap: 6px; padding: 8px 16px; flex-wrap: wrap; } .ind-cat-chip { font-size: var(--font-size-sm); padding: 5px 12px; border-radius: var(--radius-xl); background: rgba(255,255,255,0.06); color: var(--text-primary, #d1d4dc); cursor: pointer; border: 1px solid rgba(255,255,255,0.12); transition: all 0.15s; white-space: nowrap; font-weight: 500; } .ind-cat-chip:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); } .ind-cat-chip.active { background: rgba(105,225,251,0.15); color: #69E1FB; border-color: rgba(105,225,251,0.4); font-weight: 600; } .chip-count { font-size: 10px; opacity: 0.6; margin-left: 3px; } .ind-badge-custom { background: rgba(255,152,0,0.15); color: #ff9800; } .ind-badge-published { background: rgba(38,166,154,0.15); color: var(--color-up); } .ind-row .ind-add { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 4px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .ind-row .ind-add:hover { border-color: var(--accent); color: var(--accent); } .ind-row .ind-view { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .ind-row .ind-view:hover { border-color: var(--accent); color: var(--accent); } /* Custom script editor */ .ind-editor { padding: 0; display: none; flex-direction: column; gap: 0; flex: 1; min-height: 0; overflow: hidden; } .ind-editor.visible { display: flex; } .script-list-panel { width: 180px; min-width: 180px; border-right: 1px solid var(--border-primary); overflow-y: auto; padding: 0; font-size: 12px; } .script-list-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-primary); font-weight: 600; color: var(--text-primary); } .btn-new-script { background: none; border: 1px solid var(--border-primary); color: var(--text-secondary); height: 22px; border-radius: 4px; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; white-space: nowrap; } .btn-new-script:hover { border-color: var(--accent); color: var(--accent); } .btn-script-io { background: none; border: 1px solid var(--border-primary); color: var(--text-secondary); min-width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .btn-script-io:hover { border-color: var(--accent); color: var(--accent); } .script-section-label { padding: 8px 12px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; } .script-list-item { padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text-primary); position: relative; } .script-list-item:hover { background: var(--bg-hover); } .script-list-item.active { background: var(--accent-bg); color: var(--accent); } .script-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .script-del, .script-dup { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; padding: 2px; flex-shrink: 0; } .script-list-item:hover .script-del, .script-list-item:hover .script-dup { display: flex; align-items: center; } .script-del:hover { color: #F44336; } .script-dup:hover { color: var(--accent); } .script-item-date { display: block; font-size: 9px; color: var(--text-secondary); margin-top: 1px; } .pine-badge { background: #1e3a2f; color: #4CAF50; font-size: 9px; padding: 1px 4px; border-radius: 3px; font-weight: 700; letter-spacing: 0.3px; } .ind-editor-header { display: flex; align-items: center; justify-content: space-between; } .ind-editor-header input { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-md); font-weight: 600; width: 200px; } .ind-editor-header input:focus { outline: none; border-color: var(--accent); } .ind-editor textarea { width: 100%; min-height: 200px; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--color-up); padding: 12px; border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--font-size-md); line-height: 1.5; resize: vertical; tab-size: 4; } .ind-editor textarea:focus { outline: none; border-color: var(--accent); } .ind-editor .CodeMirror { background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--font-size-md); line-height: 1.5; height: auto; flex: 1; min-height: 120px; color: var(--color-up); overflow: hidden; } .ind-editor .CodeMirror-scroll { max-height: none; } .ind-editor .CodeMirror-focused { border-color: var(--accent); } .ind-editor .CodeMirror-gutters { background: var(--bg-secondary); border-right: 1px solid var(--border-primary); } .ind-editor .CodeMirror-linenumber { color: var(--text-tertiary); } .ind-editor .CodeMirror-cursor { border-left-color: var(--text-primary); } .ind-editor .CodeMirror-selected { background: rgba(42,98,255,0.2); } @keyframes slideUpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ind-editor-actions { display: flex; gap: 8px; justify-content: flex-start; padding: 10px 14px; flex-shrink: 0; } .ind-editor-actions button { padding: 6px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .btn-primary { background: var(--accent); color: #131722; border: none; } .btn-primary:hover { background: #1e53e5; } .btn-secondary { background: none; color: var(--text-secondary); border: 1px solid var(--border-subtle); } .btn-secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); } .btn-publish { background: none; color: var(--color-up); border: 1px solid var(--color-up); } .btn-publish:hover { background: rgba(38,166,154,0.1); } .btn-danger { background: none; color: #F44336; border: 1px solid #F44336; } .btn-danger:hover { background: rgba(244,67,54,0.1); } .ind-lang-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-primary); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--text-secondary); } .ind-lang-note .py-icon { background: linear-gradient(135deg, #306998, #ffd43b); color: #fff; font-weight: 800; width: 22px; height: 22px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } /* Published / Marketplace */ #indPublished { flex: 1; overflow-y: auto; min-height: 0; } .pub-card { margin: 8px 16px; padding: 14px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); cursor: pointer; transition: border-color 0.15s; } .pub-card:hover { border-color: var(--border-subtle); } .pub-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pub-card-header .pub-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--border-subtle); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-primary); } .pub-card-header .pub-name { font-size: 14px; font-weight: 700; color: var(--text-primary); } .pub-card-header .pub-author { font-size: var(--font-size-sm); color: var(--text-secondary); } .pub-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 8px; } .pub-card-meta { display: flex; gap: 16px; font-size: var(--font-size-sm); color: var(--text-secondary); } .pub-card-meta span { display: flex; align-items: center; gap: 4px; } .pub-card-meta .likes { color: var(--color-down); } .pub-card-meta .lang { color: var(--color-up); } /* ═══ 10. Symbol Search Dialog ═══ * (See #symbolDialog styles further below) */ /* ═══ 12. Preferences Dialog ═══ */ #prefDialog { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--bg-primary); } #prefDialog.open { display: flex; flex-direction: column; } .pref-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .pref-header .pref-back { cursor: pointer; color: var(--text-primary); display: flex; align-items: center; background: none; border: none; padding: 4px; } .pref-header .pref-back:hover { color: #fff; } .pref-header .pref-back svg { width: 20px; height: 20px; fill: currentColor; } .pref-header .pref-title-group { display: flex; align-items: center; gap: 8px; } .pref-header .pref-icon svg { width: 18px; height: 18px; fill: var(--color-down); } .pref-header .pref-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); } .pref-header .pref-info { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-primary); font-size: 12px; color: var(--text-secondary); cursor: pointer; } .pref-header .pref-info:hover { color: var(--text-primary); border-color: var(--text-secondary); } .pref-header .pref-info svg { width: 14px; height: 14px; fill: var(--accent); } .pref-body { flex: 1; overflow-y: auto; padding: 0; } /* Avatar section */ .pref-avatar { display: flex; justify-content: center; padding: 24px 0 16px; } .pref-avatar .avatar-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--text-secondary); border: 3px solid var(--color-up); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; } /* Menu sections */ .pref-section { border-top: 8px solid #0d1117; } .pref-section:first-child { border-top: none; } .pref-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--bg-hover); cursor: pointer; transition: background 0.12s; } .pref-row:hover { background: var(--bg-hover); } .pref-row:last-child { border-bottom: none; } .pref-row .pr-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pref-row .pr-icon svg { width: 20px; height: 20px; fill: currentColor; } .pref-row .pr-label { flex: 1; font-size: 14px; color: var(--text-primary); } .pref-row .pr-value { font-size: var(--font-size-md); color: var(--text-secondary); } .pref-row .pr-arrow { color: var(--text-secondary); font-size: 16px; } .pref-row .pr-chevron svg { width: 16px; height: 16px; fill: var(--text-secondary); } .pref-row .pr-toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--border-primary); position: relative; cursor: pointer; transition: background 0.2s; } .pref-row .pr-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); transition: transform 0.2s, background 0.2s; } .pref-row .pr-toggle.on, .pref-row .pr-toggle.active { background: var(--color-up); } .pref-row .pr-toggle.on::after, .pref-row .pr-toggle.active::after { transform: translateX(18px); background: #fff; } .pr-toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--border-primary); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .pr-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); transition: transform 0.2s, background 0.2s; } .pr-toggle.active { background: var(--color-up); } .pr-toggle.active::after { transform: translateX(18px); background: #fff; } /* Language sub-page */ .lang-list { padding: 0; } .lang-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--bg-hover); } .lang-item:hover { background: var(--bg-hover); } .lang-item.selected { background: rgba(var(--accent-rgb),0.1); } .lang-item .lang-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lang-item.selected .lang-radio { border-color: var(--accent); } .lang-item.selected .lang-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .lang-item .lang-info { display: flex; flex-direction: column; } .lang-item .lang-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .lang-item .lang-sub { font-size: var(--font-size-sm); color: var(--text-secondary); } /* ── Symbol Search Dialog (continued) ── */ #symbolDialog { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(0,0,0,0.6); justify-content: center; align-items: flex-start; padding-top: 60px; } #symbolDialog.open { display: flex; } .sym-panel { background: var(--bg-surface); border-radius: var(--radius-lg); width: 520px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 16px 64px rgba(0,0,0,0.6); overflow: hidden; } .sym-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-primary); } .sym-header h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin: 0; } .sym-header .market-sel { position: relative; display: flex; align-items: center; gap: 6px; background: var(--border-primary); padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-md); color: var(--text-primary); cursor: pointer; } .sym-header .market-sel:hover { background: var(--border-subtle); } .sym-header .market-sel .caret { font-size: 14px; color: var(--text-secondary); } .market-dropdown { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 300; min-width: 160px; } .market-dropdown.open { display: block; } .market-opt { display: flex; align-items: center; gap: 8px; padding: 8px 14px; min-width: 140px; font-size: var(--font-size-md); color: var(--text-primary); cursor: pointer; transition: background 0.1s; } .market-opt:hover { background: var(--border-primary); } .market-opt.active { color: var(--accent); } .mk-check { margin-left: auto; font-size: 14px; font-weight: 700; } .market-opt:not(.active) .mk-check { display: none !important; } .sym-header .close-btn { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; } .sym-header .close-btn:hover { color: var(--text-primary); } .sym-search { padding: 10px 16px; border-bottom: 1px solid var(--border-primary); } .sym-search input { width: 100%; background: var(--bg-input); border: 2px solid var(--accent); color: var(--text-primary); padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--font-size-lg); font-weight: 500; } .sym-search input:focus { outline: none; } .sym-search input::placeholder { color: var(--text-secondary); } .sym-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-primary); } .sym-tab { padding: 8px 16px; font-size: var(--font-size-md); color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; } .sym-tab:hover { color: var(--text-primary); } .sym-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .sym-discover { border-bottom: 1px solid var(--border-primary); } .sym-discover-tabs { display: flex; padding: 0 16px; gap: 0; border-bottom: 1px solid var(--border-primary); } .sd-tab { background: none; border: none; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.15s; } .sd-tab:hover { color: var(--text-primary); } .sd-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .sym-discover-body { padding: 10px 16px; min-height: 48px; max-height: 140px; overflow-y: auto; } .sym-discover-body .sd-empty { font-size: 12px; color: var(--text-secondary); padding: 8px 0; text-align: center; } .sym-discover-body .sd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sym-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--border-primary); border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.12s; } .sym-chip:hover { background: var(--border-subtle); transform: translateY(-1px); } .sym-chip .sc-remove { font-size: 14px; color: var(--text-secondary); line-height: 1; margin-left: 2px; } .sym-chip .sc-remove:hover { color: var(--color-down); } .sym-results { flex: 1; overflow-y: auto; min-height: 200px; } .sym-row { display: flex; align-items: center; padding: 10px 16px; cursor: pointer; transition: background 0.1s; gap: 10px; border-bottom: 1px solid #1a1e2a; } .sym-row:hover { background: var(--border-primary); } .sym-row img.sym-icon { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: var(--border-subtle); flex-shrink: 0; } .sym-row div.sym-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--border-subtle); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 700; color: var(--text-secondary); flex-shrink: 0; } .sym-row .sym-ticker { font-size: 14px; font-weight: 700; color: var(--text-primary); min-width: 70px; } .sym-row .sym-type { font-size: var(--font-size-xs); font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; flex-shrink: 0; } .sym-type-stock { background: rgba(var(--accent-rgb),0.15); color: #5b8def; } .sym-type-etf { background: rgba(239,83,80,0.15); color: var(--color-down); } .sym-type-adr { background: rgba(255,152,0,0.15); color: #ff9800; } .sym-type-crypto { background: rgba(38,166,154,0.15); color: var(--color-up); } .sym-row .sym-name { flex: 1; font-size: var(--font-size-md); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sym-row .sym-exchange { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; } .sym-footer { padding: 6px 16px; border-top: 1px solid var(--border-primary); font-size: var(--font-size-sm); color: var(--text-secondary); text-align: center; } /* ═══ 11. Custom Date Range Dialog ═══ */ #customRangeDialog .cr-field { color:var(--text-secondary);font-size:12px;font-weight:600; } #customRangeDialog .cr-field label { display:block;margin-bottom:4px; } #customRangeDialog .cr-row { display:flex;gap:12px;align-items:flex-end; } #customRangeDialog .cr-row > div { flex:1; } #customRangeDialog select, #customRangeDialog input[type="date"], #customRangeDialog input[type="number"] { display:block;width:100%;margin-top:4px;padding:8px 10px;background:var(--bg-input); border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-md);box-sizing:border-box; } #customRangeDialog input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } #customRangeDialog select:focus, #customRangeDialog input:focus { border-color:var(--accent);outline:none; } #customRangeDates { display:none; gap:12px; } #customRangeDates.visible { display:flex; } #customRangeDialog .cr-btns { display:flex;gap:8px;margin-top:16px; } #customRangeDialog .cr-btns button { flex:1;padding:10px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer; } #customRangeDialog .btn-apply { background:var(--accent);color:#131722; } #customRangeDialog .btn-apply:hover { background:#1e53e5; } #customRangeDialog .btn-cancel { background:var(--border-primary);color:var(--text-primary); } #customRangeDialog .btn-cancel:hover { background:var(--border-subtle); } /* ═══ 13. Chart Settings Panel (slide-out from right) ═══ */ #chartSettingsPanel { display: none; position: fixed; right: 0; top: var(--toolbar-height, 38px); bottom: 0; z-index: 800; width: 420px; } #chartSettingsPanel.open { display: flex; } #chartSettingsPanel .cs-overlay { display: none; } .cs-panel { width: 100%; height: 100%; background: var(--bg-surface); border-left: 1px solid var(--border-primary); display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,0.4); animation: csSlideIn 0.2s ease-out; } /* Slide-in animation: panel enters from the right edge */ @keyframes csSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .cs-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-primary); } .cs-header h3 { margin: 0; font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); } .cs-header .close-btn { background: none; border: none; color: var(--text-secondary); font-size: 22px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: color 0.12s, background 0.12s; } .cs-header .close-btn:hover { color: var(--text-primary); background: var(--bg-hover-strong); } /* Search bar */ .cs-search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border-primary); } .cs-search-icon { color: var(--text-secondary); flex-shrink: 0; } .cs-search input { flex: 1; background: none; border: none; color: var(--text-primary); font-size: var(--font-size-md); font-family: inherit; outline: none; } .cs-search input::placeholder { color: var(--border-separator); } .cs-search-clear { display: none; background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1; } .cs-search-clear:hover { color: var(--text-primary); } .cs-search.has-query .cs-search-clear { display: block; } body.light-theme .cs-search { border-color: #e0e3eb; } body.light-theme .cs-search input { color: #131722; } body.light-theme .cs-search input::placeholder { color: #c8ccd8; } /* Tab layout */ .cs-layout { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .cs-nav { display: flex; border-bottom: 1px solid var(--border-primary); padding: 0 4px; overflow-x: auto; flex-shrink: 0; gap: 0; } .cs-nav-item { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; color: var(--text-secondary); font-weight: 600; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .cs-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .cs-nav-item:hover { color: var(--text-primary); } .cs-nav-item.active { color: var(--text-primary); border-bottom-color: #e88514; } .cs-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .cs-body { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: var(--accent-light) #1a1a1a; } .cs-body::-webkit-scrollbar { width: 8px; } .cs-body::-webkit-scrollbar-track { background: #1a1a1a; } .cs-body::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: 4px; } .cs-body::-webkit-scrollbar-thumb:hover { background: #22b8d9; } .cs-tab-pane { display: none; } .cs-tab-pane.active { display: block; } .cs-section { padding: 4px 10px; border-bottom: 1px solid var(--border-primary); } .cs-section:last-child { border-bottom: none; } .cs-section.cs-inline { display: flex; align-items: center; gap: 6px; padding: 2px 10px; border-bottom: none; } .cs-inline .cs-section-title { margin: 0; flex-shrink: 0; min-width: auto; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-primary); } .cs-inline > span:first-child { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-primary); min-width: auto; } .cs-inline .cs-field { flex: 1; } .cs-section-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .cs-hint { font-size: var(--font-size-md); color: var(--text-secondary); margin: 4px 0 8px; line-height: 1.4; } /* Dropdowns & inputs */ .cs-field { flex: 1; } .cs-field label { display: none; } .cs-field select, .cs-field .cs-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 3px 8px; border-radius: var(--radius-md); font-size: 13px; font-weight: 400; cursor: pointer; appearance: none; font-family: inherit; } .cs-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23787b86' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .cs-field select:focus, .cs-field .cs-input:focus { outline: none; border-color: var(--accent); } .cs-input { cursor: text !important; } /* Checkbox options list */ .cs-opt-list { display: flex; flex-direction: column; gap: 0; } .cs-opt { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-md); color: var(--text-primary); cursor: pointer; user-select: none; padding: 2px 4px; border-radius: var(--radius-sm); transition: background 0.12s; } .cs-opt:hover { background: var(--bg-hover); } .cs-opt input { display: none; } .cs-checkmark { width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .cs-checkmark::after { content: ''; display: none; width: 4px; height: 8px; border: solid var(--bg-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; } .cs-opt input:checked ~ .cs-checkmark, .cs-check input:checked ~ .cs-checkmark, .cs-reorder-check input:checked ~ .cs-checkmark { background: var(--accent); border-color: var(--accent); } .cs-opt input:checked ~ .cs-checkmark::after, .cs-check input:checked ~ .cs-checkmark::after, .cs-reorder-check input:checked ~ .cs-checkmark::after { display: block; } /* Inline select */ .cs-inline-select { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 4px 24px 4px 8px; border-radius: var(--radius-md); font-size: var(--font-size-md); font-weight: 600; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23787b86' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .cs-inline-select:focus { outline: none; border-color: var(--accent); } /* Reorder list */ .cs-reorder-list { display: flex; flex-direction: column; gap: 3px; } .cs-reorder-item { display: flex; align-items: center; gap: 8px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 6px 10px; cursor: default; transition: border-color 0.12s, background 0.12s; } .cs-reorder-item:hover { border-color: var(--border-subtle); } .cs-reorder-item.dragging { opacity: 0.4; } .cs-reorder-item.cs-locked .cs-checkmark { opacity: 0.4; cursor: not-allowed; } .cs-reorder-item.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); } .cs-reorder-check { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; } .cs-reorder-check input { display: none; } .cs-reorder-label { flex: 1; font-size: var(--font-size-md); font-weight: 600; color: var(--text-primary); } .cs-reorder-grip { color: var(--border-separator); cursor: grab; display: flex; align-items: center; transition: color 0.12s; } .cs-reorder-grip:hover { color: var(--text-secondary); } .cs-reorder-grip:active { cursor: grabbing; } /* Color swatches */ .cs-color-grid { display: flex; flex-direction: column; gap: 8px; } .cs-color-row { display: flex; align-items: center; justify-content: space-between; } .cs-color-label { font-size: var(--font-size-md); color: var(--text-primary); font-weight: 500; } .cs-color-pair { display: flex; gap: 8px; align-items: center; } .cs-color-row-inline { display: flex; align-items: center; gap: 10px; padding-top: 8px; } .cs-color-swatch { position: relative; width: 36px; height: 36px; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, box-shadow 0.1s; overflow: hidden; } .cs-color-swatch:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .cs-color-swatch input[type="color"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .cs-color-swatch.up { background: var(--color-up); } .cs-color-swatch.down { background: var(--color-down); } .cs-color-swatch.single { background: var(--bg-primary); border: 1px solid var(--border-subtle); } .cs-color-swatch svg { width: 20px; height: 20px; pointer-events: none; } /* Extended hours */ .cs-ext-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cs-ext-row:last-child { margin-bottom: 0; } .cs-ext-label { font-size: var(--font-size-md); color: var(--text-primary); font-weight: 500; min-width: 100px; } .cs-time-input { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 10px; border-radius: var(--radius-md); font-size: 12px; font-family: inherit; } .cs-time-input:focus { outline: none; border-color: var(--accent); } .cs-time-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } /* Toggle switch */ .cs-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .cs-toggle input { opacity: 0; width: 0; height: 0; } .cs-toggle-slider { position: absolute; inset: 0; background: var(--border-subtle); border-radius: 20px; cursor: pointer; transition: background 0.2s; } .cs-toggle-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .cs-toggle input:checked + .cs-toggle-slider { background: var(--accent); } .cs-toggle input:checked + .cs-toggle-slider::before { transform: translateX(16px); background: var(--bg-primary); } /* Footer */ .cs-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border-primary); gap: 12px; } .cs-template-wrap { position: relative; } .cs-template-menu-btn { background: var(--border-primary); border: none; color: var(--text-secondary); width: 32px; height: 32px; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.12s, background 0.12s; } .cs-template-menu-btn:hover { color: var(--text-primary); background: var(--border-subtle); } .cs-template-dropdown { display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 6px; min-width: 200px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding: 4px 0; z-index: 10; } .cs-template-dropdown.open { display: block; } .cs-tmpl-item { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background 0.12s; display: flex; align-items: center; gap: 10px; } .cs-tmpl-item svg { opacity: 0.7; flex-shrink: 0; } .cs-tmpl-item:hover { background: var(--bg-hover-strong); } .cs-tmpl-item.danger { color: var(--text-secondary); } .cs-tmpl-item.danger:hover { color: var(--color-down); } .cs-tmpl-sep { height: 1px; background: var(--border-primary); margin: 4px 0; } .cs-footer-btns { display: flex; gap: 8px; } .cs-btn-cancel { background: none; border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 16px; border-radius: 5px; font-size: var(--font-size-md); font-weight: 600; cursor: pointer; transition: background 0.12s; } .cs-btn-cancel:hover { background: var(--bg-hover); } .cs-btn-ok { background: var(--accent); border: none; color: var(--bg-primary); padding: 6px 20px; border-radius: 5px; font-size: var(--font-size-md); font-weight: 600; cursor: pointer; transition: background 0.12s; } .cs-btn-ok:hover { opacity: 0.85; } /* Light theme */ body.light-theme .cs-panel { background: #fff; border-color: #e0e3eb; box-shadow: -8px 0 32px rgba(0,0,0,0.1); } body.light-theme .cs-header { border-color: #e0e3eb; } body.light-theme .cs-header h3 { color: #131722; } body.light-theme .cs-header .close-btn:hover { color: #131722; background: rgba(0,0,0,0.05); } body.light-theme .cs-nav { border-color: #e0e3eb; } body.light-theme .cs-nav-item { color: #787b86; } body.light-theme .cs-nav-item:hover { color: #131722; } body.light-theme .cs-nav-item.active { color: var(--accent-light); border-bottom-color: var(--color-cta); } body.light-theme .cs-section { border-color: #e0e3eb; } body.light-theme .cs-body { scrollbar-color: var(--accent-light) #f0f0f0; } body.light-theme .cs-body::-webkit-scrollbar-track { background: #f0f0f0; } body.light-theme .cs-body::-webkit-scrollbar-thumb { background: var(--accent-light); } body.light-theme .cs-body::-webkit-scrollbar-thumb:hover { background: #22b8d9; } body.light-theme .cs-color-label { color: #131722; } body.light-theme .cs-ext-label { color: #131722; } body.light-theme .cs-section-title { color: var(--accent-light); } body.light-theme .cs-opt { color: #131722; } body.light-theme .cs-opt:hover { background: rgba(0,0,0,0.03); } body.light-theme .cs-field select, body.light-theme .cs-field .cs-input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .cs-time-input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .cs-time-input::-webkit-calendar-picker-indicator { filter: none; } body.light-theme .cs-color-swatch.single { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .cs-toggle-slider { background: #c8ccd8; } body.light-theme .cs-checkmark { border-color: #c8ccd8; } body.light-theme .cs-overlay { background: rgba(0,0,0,0.2); } body.light-theme .cs-footer { border-color: #e0e3eb; } body.light-theme .cs-template-menu-btn { background: #f0f3fa; color: #787b86; } body.light-theme .cs-template-menu-btn:hover { background: #e0e3eb; color: #131722; } body.light-theme .cs-template-dropdown { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } body.light-theme .cs-tmpl-item { color: #131722; } body.light-theme .cs-tmpl-item:hover { background: rgba(0,0,0,0.04); } body.light-theme .cs-tmpl-item.danger { color: #c8ccd8; } body.light-theme .cs-tmpl-sep { background: #e0e3eb; } body.light-theme .cs-btn-cancel { border-color: #e0e3eb; color: #131722; } body.light-theme .cs-btn-cancel:hover { background: rgba(0,0,0,0.03); } body.light-theme .cs-inline-select { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .cs-reorder-item { background: #f0f3fa; border-color: #e0e3eb; } body.light-theme .cs-reorder-item:hover { border-color: #c8ccd8; } body.light-theme .cs-reorder-item.drag-over { border-color: var(--accent-light); background: rgba(var(--accent-light-rgb),0.04); } body.light-theme .cs-reorder-label { color: #131722; } body.light-theme .cs-reorder-grip { color: #c8ccd8; } body.light-theme .cs-reorder-grip:hover { color: var(--text-secondary); } .cs-qb-appearance-sep { height: 1px; background: var(--border-primary, #2a2e39); margin: 10px 0 6px; } .cs-qb-appearance-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #787b86); padding: 0 0 4px; } body.light-theme .cs-qb-appearance-sep { background: #e0e3eb; } /* ═══ 14. Custom Color Picker (HSV gradient + hue/opacity sliders) ═══ * Fixed-position overlay (z-index:900) anchored near the clicked swatch. * Contains a canvas-rendered saturation-brightness gradient, a hue range * slider with a rainbow background, an opacity slider, preset swatches, * and a hex input field. */ .tg-cp { display: none; position: fixed; z-index: 900; width: 264px; background: var(--bg-surface); border: 1px solid var(--border-primary); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); padding: 12px; font-family: var(--font-primary); user-select: none; } .tg-cp.open { display: block; } .tg-cp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .tg-cp-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .tg-cp-close { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .tg-cp-close:hover { color: var(--text-primary); background: var(--bg-hover-strong); } .tg-cp-gradient { position: relative; width: 240px; height: 140px; border-radius: var(--radius-md); overflow: hidden; cursor: crosshair; margin-bottom: 10px; } .tg-cp-gradient canvas { display: block; width: 100%; height: 100%; } .tg-cp-cursor { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.5); pointer-events: none; transform: translate(-50%, -50%); top: 0; left: 100%; } .tg-cp-hue-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tg-cp-preview { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border-subtle); } .tg-cp-hue { flex: 1; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 6px; outline: none; cursor: pointer; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } .tg-cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--border-subtle); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; } .tg-cp-opacity-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .tg-cp-label { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 600; min-width: 44px; } .tg-cp-opacity { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; outline: none; cursor: pointer; background: linear-gradient(to right, transparent, #fff); } .tg-cp-opacity::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--border-subtle); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; } .tg-cp-opacity-val { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; min-width: 32px; text-align: right; } .tg-cp-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .tg-cp-preset { width: 22px; height: 22px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid rgba(255,255,255,0.08); transition: transform 0.1s, box-shadow 0.1s; } .tg-cp-preset:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .tg-cp-hex-row { display: flex; align-items: center; gap: 8px; } .tg-cp-hex { flex: 1; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 10px; border-radius: 5px; font-size: var(--font-size-md); font-weight: 600; font-family: 'SF Mono', Menlo, monospace; letter-spacing: 0.5px; } .tg-cp-hex:focus { outline: none; border-color: var(--accent); } /* Color picker light theme */ body.light-theme .tg-cp { background: #fff; border-color: #e0e3eb; box-shadow: 0 12px 40px rgba(0,0,0,0.12); } body.light-theme .tg-cp-close:hover { color: #131722; background: rgba(0,0,0,0.05); } body.light-theme .tg-cp-preview { border-color: #e0e3eb; } body.light-theme .tg-cp-hue::-webkit-slider-thumb { border-color: #c8ccd8; } body.light-theme .tg-cp-opacity::-webkit-slider-thumb { border-color: #c8ccd8; } body.light-theme .tg-cp-opacity-val { color: #131722; } body.light-theme .tg-cp-preset { border-color: rgba(0,0,0,0.08); } body.light-theme .tg-cp-hex { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } /* ═══ 15. Global Light Theme Overrides ═══ * Applied when body has .light-theme class. Overrides backgrounds from dark * (#131722, #1e222d) to light (#fff, #f8f9fd), border colors from #2a2e39 * to #e0e3eb, and text colors from #d1d4dc to #131722. Each dialog/component * has its own light-theme block below. */ body.light-theme { color: #131722; } body.light-theme #toolbar { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .tb-scroll-btn { background: #f8f9fd; } body.light-theme .tb-item { color: #131722; } body.light-theme .tb-item:hover { color: #131722; background: rgba(0,0,0,0.04); } body.light-theme .tb-item.active { color: var(--accent-light); } body.light-theme .tb-item.tb-ai-btn { color: #0097a7; } body.light-theme .tb-item.tb-ai-btn:hover { color: #00838f; background: rgba(0,151,167,0.08); } body.light-theme .tb-sep { background: #c8ccd8; } body.light-theme #cloudSyncIndicator.cloud-pro { color: #1565C0; background: rgba(21,101,192,0.08); border-color: rgba(21,101,192,0.25); } body.light-theme #drawPropBar { background: #f8f9fd; border-bottom-color: #e0e3eb; } body.light-theme .dp-sep { background: #c8ccd8; } body.light-theme .dp-label { color: #131722; } body.light-theme .dp-btn { color: #131722; } body.light-theme .dp-btn:hover { color: #131722; background: rgba(0,0,0,0.05); } body.light-theme .dp-item select, body.light-theme .dp-item input[type="text"] { background: #fff; color: #131722; border-color: #e0e3eb; } body.light-theme .dp-scroll-btn { background: #f8f9fd; color: #131722; border-color: #e0e3eb; } body.light-theme .wt-icon-btn { color: #131722; } body.light-theme .wt-icon-btn.active { color: var(--accent-light); background: rgba(var(--accent-light-rgb),0.08); } body.light-theme .wt-manage-btn { color: #131722; border-color: #9598a1; } body.light-theme #widgetToolbar { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme #symbolChip { color: #131722; } body.light-theme #symbolChip:hover { background: rgba(0,0,0,0.04); } body.light-theme #symbolChip .sym-logo { background: #e0e3eb; } body.light-theme .dropdown { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } body.light-theme .dd-item { color: #131722; } body.light-theme .dd-item:hover { background: #f0f3fa; } body.light-theme .dd-item.active { color: var(--accent-light); } body.light-theme .dd-sep { background: #e0e3eb; } body.light-theme .dd-search input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .user-dropdown { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } body.light-theme .user-dropdown .ud-item { color: #131722; } body.light-theme .user-dropdown .ud-item:hover { background: #f0f3fa; } body.light-theme .user-dropdown .ud-sep { background: #e0e3eb; } body.light-theme #quoteBar { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme #quoteBar .qb-price { color: #131722; } body.light-theme #quoteBar .qb-value { color: #131722; } body.light-theme #quoteBar .qb-sep { background: #c8ccd8; } body.light-theme #indicatorBar { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .dd-item.has-sub > .dd-submenu { background: #fff; border-color: #e0e3eb; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } body.light-theme .layout-opt.active { color: var(--accent-light); border-color: var(--accent-light); background: rgba(var(--accent-light-rgb),0.08); } body.light-theme .sync-tag { background: #e0e3eb; color: #131722; } body.light-theme .sync-tag:hover { background: #d1d4dc; } body.light-theme .sync-tag.active { background: var(--accent-light); color: #131722; } body.light-theme .sync-group-picker { background: #fff; border-color: #e0e3eb; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } body.light-theme .sgp-item:hover { box-shadow: 0 0 6px rgba(0,0,0,0.15); } body.light-theme .panel-sync-dot { border-color: #9598a1; } /* Symbol Dialog */ body.light-theme #symbolDialog { background: rgba(0,0,0,0.3); } body.light-theme .sym-panel { background: #fff; border-color: #e0e3eb; box-shadow: 0 12px 40px rgba(0,0,0,0.15); } body.light-theme .sym-header { border-color: #e0e3eb; } body.light-theme .sym-header h3 { color: #131722; } body.light-theme .sym-header .close-btn { color: #787b86; } body.light-theme .sym-header .close-btn:hover { color: #131722; } body.light-theme .sym-header .market-sel { background: #f0f3fa; border-color: #e0e3eb; } body.light-theme .sym-header .market-sel:hover { background: #e0e3eb; } body.light-theme .sym-search { border-color: #e0e3eb; } body.light-theme .sym-search input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .sym-tabs { border-color: #e0e3eb; } body.light-theme .sym-tab { color: #787b86; } body.light-theme .sym-tab:hover { color: #131722; } body.light-theme .sym-popular { border-color: #e0e3eb; } body.light-theme .sym-chip { background: #f0f3fa; color: #131722; border-color: #e0e3eb; } body.light-theme .sym-chip:hover { background: #e0e3eb; } body.light-theme .sym-row { border-color: #f0f3fa; } body.light-theme .sym-row:hover { background: #f0f3fa; } body.light-theme .sym-row .sym-ticker { color: #131722; } body.light-theme .sym-row .sym-name { color: #787b86; } body.light-theme .sym-row div.sym-icon { background: #e0e3eb; color: #787b86; } body.light-theme .sym-footer { color: #787b86; border-color: #e0e3eb; } body.light-theme .market-dropdown { background: #fff; border-color: #e0e3eb; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } body.light-theme .market-opt:hover { background: #f0f3fa; } body.light-theme .market-opt { color: #131722; } /* Replay picker */ body.light-theme .replay-picker { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } body.light-theme .rp-header { color: #131722; } body.light-theme .rp-close { color: #787b86; } body.light-theme .rp-close:hover { color: #131722; } body.light-theme .rp-divider { background: #e0e3eb; } body.light-theme .rp-label { color: #787b86; } body.light-theme .rp-option { border-color: #d0d3dd; color: #131722; } body.light-theme .rp-option:hover { background: #2962ff11; border-color: #2962ff; color: #131722; } body.light-theme .rp-option.active { background: #2962ff11; border-color: #2962ff; color: #2962ff; } body.light-theme .rp-date { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } body.light-theme .rp-date::-webkit-calendar-picker-indicator { filter: none; } body.light-theme .rp-preset { border-color: #d0d3dd; color: #131722; } body.light-theme .rp-preset:hover { background: #2962ff11; border-color: #2962ff; color: #131722; } body.light-theme .replay-bar { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .replay-sep { background: #e0e3eb; } body.light-theme .replay-btn { color: #131722; } body.light-theme .replay-btn:hover { background: #f0f3fa; color: #131722; } body.light-theme .replay-speed-btn { color: #787b86; } body.light-theme .replay-speed-btn:hover { color: #131722; } body.light-theme .replay-counter { color: #131722; } /* Indicator Dialog */ body.light-theme .ind-panel { background: #fff; border-color: #e0e3eb; box-shadow: 0 8px 32px rgba(0,0,0,0.15); } body.light-theme .ind-panel-header { border-color: #e0e3eb; } body.light-theme .ind-panel-header h3 { color: #131722; } body.light-theme .ind-panel-header .close-btn { color: #787b86; } body.light-theme .ind-panel-header .close-btn:hover { color: #131722; } body.light-theme .ind-search { border-color: #e0e3eb; } body.light-theme .ind-search input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .ind-tabs { border-color: #e0e3eb; } body.light-theme .ind-tab { color: #787b86; } body.light-theme .ind-tab:hover { color: #131722; } body.light-theme .ind-tab.active { color: var(--accent-light); border-bottom-color: var(--color-cta); } body.light-theme .ind-cat-chip { background: #f0f3fa; color: #434651; border-color: #d6dce6; font-weight: 500; } body.light-theme .ind-cat-chip:hover { background: #e4e8f0; border-color: #b8bfcc; } body.light-theme .ind-cat-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; } body.light-theme .ind-row { border-color: #f0f3fa; color: #131722; } body.light-theme .ind-row:hover { background: #f0f3fa; } body.light-theme .ind-row .ind-desc { color: #787b86; } body.light-theme .ind-editor { background: #fff; } body.light-theme .ind-editor-header input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .ind-lang-note { background: #f0f3fa; border-color: #e0e3eb; color: #787b86; } body.light-theme #customIndCode { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .pub-card { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .pub-card:hover { border-color: #c8ccd8; } body.light-theme .pub-card-header .pub-name { color: #131722; } body.light-theme .pub-card-desc { color: #787b86; } body.light-theme .pub-sort-opt { color: #787b86; } body.light-theme .pub-sort-opt.active { color: var(--accent-light); } body.light-theme #pubSortBar { border-color: #e0e3eb; } /* Preferences Dialog */ body.light-theme #prefDialog { background: #fff; } body.light-theme .pref-header { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .pref-header .pref-title { color: #131722; } body.light-theme .pref-header .pref-back { color: #787b86; } body.light-theme .pref-header .pref-back:hover { color: #131722; } body.light-theme .pref-header .pref-info { color: #787b86; border-color: #e0e3eb; } body.light-theme .pref-header .pref-info:hover { color: #131722; border-color: #787b86; } body.light-theme .pref-section { border-color: #f0f3fa; } body.light-theme .pref-row { border-color: #f0f3fa; } body.light-theme .pref-row:hover { background: rgba(0,0,0,0.02); } body.light-theme .pref-row .pr-label { color: #131722; } /* Custom Range Dialog */ body.light-theme #customRangeDialog > div { background: #fff; border-color: #e0e3eb; } body.light-theme #customRangeDialog h3 { color: #131722; } body.light-theme #customRangeDialog select, body.light-theme #customRangeDialog input { background: #f8f9fd; border-color: #e0e3eb; color: #131722; } body.light-theme .btn-cancel { background: #f0f3fa; color: #131722; } body.light-theme .btn-cancel:hover { background: #e0e3eb; } /* Preset theme grid */ .cs-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cs-preset-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 8px; border: 1px solid #2a2e39; background: transparent; color: #d1d4dc; cursor: pointer; font-size: 11px; transition: border-color 0.15s, background 0.15s; } .cs-preset-btn:hover { border-color: #69E1FB; background: rgba(105,225,251,0.06); } .cs-preset-btn.active { border-color: #69E1FB; background: rgba(105,225,251,0.1); } .cs-preset-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #3a3e49; } body.light-theme .cs-preset-btn { border-color: #e0e3eb; color: #131722; } body.light-theme .cs-preset-btn:hover { border-color: #2563eb; background: rgba(37,99,235,0.06); } /* Compare tags */ .compare-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: 2px; border-radius: 4px; font-size: 12px; font-weight: 600; background: rgba(105,225,251,0.1); color: #69E1FB; cursor: default; } .compare-tag .compare-remove { cursor: pointer; opacity: 0.6; margin-left: 2px; font-size: 14px; line-height: 1; } .compare-tag .compare-remove:hover { opacity: 1; } .compare-scale-btn { cursor: pointer; opacity: 0; font-size: 9px; font-weight: 700; padding: 1px 3px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: opacity 0.15s; } .compare-tag:hover .compare-scale-btn { opacity: 0.7; } .compare-scale-btn:hover { opacity: 1 !important; background: rgba(255,255,255,0.15); } /* Backtest Panel */ .bt-panel { background: #1e222d; border-top: 1px solid #2a2e39; font-family: var(--font-family); font-size: 12px; color: #d1d4dc; max-height: 340px; overflow: hidden; display: flex; flex-direction: column; } .bt-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #2a2e39; flex-shrink: 0; } .bt-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .bt-config { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } .bt-config label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #787b86; white-space: nowrap; } .bt-config input { width: 72px; padding: 3px 6px; border-radius: 4px; border: 1px solid #363a45; background: #131722; color: #d1d4dc; font-size: 11px; font-family: var(--font-family); outline: none; } .bt-config input:focus { border-color: #2962ff; } .bt-config input[type="checkbox"] { width: auto; } .bt-mtf-toggle { font-size: 11px; color: #787b86; display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; border-left: 1px solid #363a45; padding-left: 8px; } .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #e2e8f0; text-align: center; padding: 6px 16px; font-size: 12px; font-family: var(--font-family); display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .offline-banner .offline-icon { font-size: 14px; } @media (max-width: 600px) { .offline-banner { font-size: 11px; padding: 5px 10px; } } .collab-dialog { max-width: 420px; width: 90vw; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 8px; color: var(--text-primary); font-family: var(--font-family); } .collab-section { display: flex; flex-direction: column; gap: 10px; } .collab-step { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .collab-code { width: 100%; min-height: 72px; max-height: 120px; background: #1a1a2e; color: #e2e8f0; border: 1px solid var(--border-primary); border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 11px; padding: 8px; resize: vertical; word-break: break-all; box-sizing: border-box; } .collab-action-btn { background: #2962ff; color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-family); } .collab-action-btn:hover { background: #1e4fcc; } .collab-join-btn { background: transparent; border: 1px solid #2962ff; color: #2962ff; } .collab-join-btn:hover { background: rgba(41,98,255,0.1); } .collab-copy-btn { background: #363a45; color: #d1d4dc; border: none; border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-family); align-self: flex-start; } .collab-copy-btn:hover { background: #474d5a; } .collab-disconnect-btn { background: transparent; border: 1px solid var(--color-down); color: var(--color-down); } .collab-disconnect-btn:hover { background: rgba(239,83,80,0.1); } .collab-status-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .collab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .collab-dot.connected { background: #26a69a; animation: collabPulse 2s infinite; } @keyframes collabPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .collab-indicator { width: 6px; height: 6px; border-radius: 50%; background: #26a69a; display: inline-block; animation: collabPulse 2s infinite; } .collab-timer { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .collab-peer-list { display: flex; flex-direction: column; gap: 4px; } .collab-peer { display: flex; align-items: center; gap: 6px; font-size: 12px; } .collab-status-msg { font-size: 11px; color: var(--text-secondary); padding: 0 16px 12px; min-height: 16px; } .collab-mini-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border-primary); user-select: none; } .collab-mini-bar:hover { background: rgba(255,255,255,0.03); } .collab-mini-bar .collab-dot { flex-shrink: 0; } .collab-mini-bar #collabMiniTimer { margin-left: auto; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 400; } .collab-expand-icon { font-size: 10px; opacity: 0.5; transition: transform 0.2s; } .collab-expanded-body { padding: 12px 16px; } .collab-mini-bar.collapsed .collab-expand-icon { transform: rotate(-90deg); } .collab-waiting { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: rgba(41,98,255,0.08); border-radius: 6px; font-size: 12px; color: var(--text-secondary); } .collab-waiting-spinner { width: 14px; height: 14px; border: 2px solid rgba(41,98,255,0.3); border-top-color: #2962ff; border-radius: 50%; animation: collabSpin 0.8s linear infinite; flex-shrink: 0; } @keyframes collabSpin { to { transform: rotate(360deg); } } .collab-collapsed .dialog-header { display: none !important; } .collab-collapsed { min-height: auto; } .collab-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; margin: 8px 0; } .collab-toggle input { accent-color: #2962ff; } .remote-cursor { position: absolute; pointer-events: none; transition: transform 0.1s linear; } .remote-cursor-dot { width: 8px; height: 8px; border-radius: 50%; } .remote-cursor-label { font-size: 10px; color: #fff; padding: 1px 4px; border-radius: 3px; white-space: nowrap; margin-top: 2px; margin-left: -4px; } @media (max-width: 600px) { .collab-dialog { max-width: 100vw; width: 100vw; border-radius: 0; } .collab-code { min-height: 60px; font-size: 10px; } .collab-action-btn { padding: 10px 16px; } } .bt-rerun { background: #2962ff; color: #fff; border: none; border-radius: 4px; padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font-family); } .bt-rerun:hover { background: #1e53e5; } .bt-close { background: none; border: none; color: #787b86; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .bt-close:hover { color: #d1d4dc; } .bt-metrics { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border-bottom: 1px solid #2a2e39; flex-shrink: 0; } .bt-stat { flex: 1; min-width: 100px; padding: 8px 12px; border-right: 1px solid #2a2e39; display: flex; flex-direction: column; gap: 2px; } .bt-stat:last-child { border-right: none; } .bt-stat-label { font-size: 10px; color: #787b86; text-transform: uppercase; letter-spacing: 0.3px; } .bt-stat-value { font-size: 13px; font-weight: 600; } .bt-trades-wrap { overflow: auto; flex: 1; } .bt-trades { width: 100%; border-collapse: collapse; } .bt-trades th { position: sticky; top: 0; background: #1e222d; padding: 6px 10px; text-align: left; font-size: 10px; color: #787b86; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid #2a2e39; } .bt-trades td { padding: 5px 10px; border-bottom: 1px solid #1a1e2a; font-size: 12px; } .bt-trades tr:hover td { background: #2a2e3920; } .bt-no-trades { padding: 20px; text-align: center; color: #787b86; } .ind-scale { width: 24px; height: 24px; } .ind-scale svg { width: 18px; height: 18px; } .ind-backtest { color: #a855f7; padding: 0 4px; width: 26px; height: 26px; } .ind-backtest svg { width: 22px; height: 22px; } .ind-backtest:hover { color: #c084fc; } body.light-theme .bt-panel { background: #fff; border-color: #e0e3eb; color: #131722; } body.light-theme .bt-header { border-color: #e0e3eb; } body.light-theme .bt-config label { color: #787b86; } body.light-theme .bt-config input { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } body.light-theme .bt-metrics { border-color: #e0e3eb; } body.light-theme .bt-stat { border-color: #e0e3eb; } body.light-theme .bt-stat-label { color: #787b86; } body.light-theme .bt-trades th { background: #fff; border-color: #e0e3eb; } body.light-theme .bt-trades td { border-color: #f0f3fa; } body.light-theme .bt-trades tr:hover td { background: #f0f3fa; } body.light-theme .bt-close { color: #787b86; } body.light-theme .bt-close:hover { color: #131722; } .bt-trade-highlight td { background: #a855f720 !important; outline: 1px solid #a855f7; } body.light-theme .bt-trade-highlight td { background: #a855f715 !important; } .bt-trade-tooltip { position: absolute; top: 8px; right: 8px; z-index: 50; background: #1e222dee; border: 1px solid #363a45; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #d1d4dc; line-height: 1.6; pointer-events: none; white-space: nowrap; } body.light-theme .bt-trade-tooltip { background: #ffffffe8; border-color: #e0e3eb; color: #131722; } .evt-popup { position: absolute; z-index: 60; background: #1e222dee; border: 1px solid #363a45; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: #d1d4dc; line-height: 1.5; min-width: 160px; max-width: 300px; pointer-events: auto; } .evt-popup-type { font-weight: 600; font-size: 13px; color: #e0e3eb; margin-bottom: 4px; } .evt-popup-detail { color: #b2b5be; white-space: pre-wrap; } body.light-theme .evt-popup { background: #ffffffe8; border-color: #e0e3eb; color: #131722; } body.light-theme .evt-popup-type { color: #131722; } body.light-theme .evt-popup-detail { color: #4a4e59; } .bt-loading { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); border-radius: 4px; } .bt-spinner { width: 32px; height: 32px; border: 3px solid #a855f740; border-top-color: #a855f7; border-radius: 50%; animation: bt-spin 0.8s linear infinite; } @keyframes bt-spin { to { transform: rotate(360deg); } } .bt-mc { background: #a855f7; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; } .bt-mc:hover { background: #9333ea; } .bt-mc-panel { padding: 8px 12px; border-top: 1px solid #363a45; } .bt-mc-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; } .bt-mc-header label { display: flex; align-items: center; gap: 4px; } .bt-mc-header input { width: 70px; background: #131722; border: 1px solid #363a45; color: #d1d4dc; border-radius: 3px; padding: 2px 4px; font-size: 11px; } .bt-mc-run { background: #a855f7; color: #fff; border: none; border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 11px; } .bt-mc-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 8px; } .bt-mc-table th, .bt-mc-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #1a1e2a; } .bt-mc-table th:first-child, .bt-mc-table td:first-child { text-align: left; } .bt-mc-hist { width: 100%; max-width: 400px; height: 120px; } body.light-theme .bt-mc-panel { border-color: #e0e3eb; } body.light-theme .bt-mc-header input { background: #fff; border-color: #e0e3eb; color: #131722; } body.light-theme .bt-mc-table td { border-color: #f0f3fa; } .bt-sweep { background: #2962ff; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; } .bt-sweep:hover { background: #1e50d9; } .bt-sweep-panel { padding: 8px 12px; border-top: 1px solid #363a45; } .bt-sweep-header { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 8px; } .bt-sweep-run { background: #2962ff; color: #fff; border: none; border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 11px; } .bt-sweep-params { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .bt-sweep-param { display: flex; align-items: center; gap: 4px; font-size: 11px; } .bt-sweep-param input { width: 50px; background: #131722; border: 1px solid #363a45; color: #d1d4dc; border-radius: 3px; padding: 2px 4px; font-size: 11px; } .bt-sweep-table { width: 100%; border-collapse: collapse; font-size: 11px; max-height: 200px; overflow: auto; display: block; } .bt-sweep-table th, .bt-sweep-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #1a1e2a; white-space: nowrap; } .bt-sweep-table th:first-child, .bt-sweep-table td:first-child { text-align: left; } .bt-sweep-table thead { position: sticky; top: 0; background: #1e222d; } body.light-theme .bt-sweep-panel { border-color: #e0e3eb; } body.light-theme .bt-sweep-param input { background: #fff; border-color: #e0e3eb; color: #131722; } body.light-theme .bt-sweep-table td { border-color: #f0f3fa; } body.light-theme .bt-sweep-table thead { background: #fff; } /* Emoji Picker */ #emojiPicker { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1e222d; border: 1px solid #363a45; border-radius: 12px; width: 360px; height: 420px; z-index: 600; box-shadow: 0 12px 40px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; font-family: Inter, system-ui, sans-serif; } .ep-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; } .ep-title { font-size: 13px; font-weight: 600; color: #d1d4dc; } .ep-header { padding: 6px 12px 6px; } .ep-search-wrap { display: flex; align-items: center; gap: 6px; background: #131722; border: 1px solid #363a45; border-radius: 8px; padding: 6px 10px; } .ep-search { flex: 1; background: none; border: none; outline: none; color: #d1d4dc; font-size: 13px; font-family: inherit; } .ep-search::placeholder { color: #787b86; } .ep-close { background: none; border: none; color: #787b86; cursor: pointer; padding: 4px; line-height: 1; transition: color 0.15s, background 0.15s; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .ep-close:hover { color: #d1d4dc; background: #2a2e39; } .ep-search-clear { background: none; border: none; color: #787b86; font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; transition: color 0.15s; } .ep-search-clear:hover { color: #d1d4dc; } .ep-tabs { display: flex; gap: 2px; padding: 2px 10px 6px; border-bottom: 1px solid #2a2e39; overflow-x: auto; flex-shrink: 0; } .ep-tabs::-webkit-scrollbar { display: none; } .ep-tab { font-size: 18px; width: 32px; height: 32px; border: none; background: none; cursor: pointer; border-radius: 6px; flex-shrink: 0; transition: background 0.15s; display: flex; align-items: center; justify-content: center; } .ep-tab:hover { background: #2a2e39; } .ep-tab.active { background: #363a45; } .ep-body { flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-content: start; } .ep-body::-webkit-scrollbar { width: 6px; } .ep-body::-webkit-scrollbar-track { background: transparent; } .ep-body::-webkit-scrollbar-thumb { background: var(--accent, #69E1FB); border-radius: 3px; } .ep-btn { font-size: 24px; width: 40px; height: 40px; border: none; background: none; cursor: pointer; border-radius: 6px; transition: background 0.12s, transform 0.1s; display: flex; align-items: center; justify-content: center; } .ep-btn:hover { background: #2a2e39; transform: scale(1.15); } .ep-empty { grid-column: 1 / -1; text-align: center; color: #787b86; font-size: 13px; padding: 40px 0; } .ep-mode-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2e39; flex-shrink: 0; } .ep-mode-tab { flex: 1; padding: 8px 0; border: none; background: none; color: #787b86; font-size: 12px; font-weight: 500; cursor: pointer; transition: color 0.15s, border-color 0.15s; border-bottom: 2px solid transparent; } .ep-mode-tab:hover { color: var(--text-primary); } .ep-mode-tab.active { color: var(--accent, #69E1FB); border-bottom-color: var(--accent, #69E1FB); } .ep-sticker-btn { padding: 2px; } .ep-sticker-btn img { width: 36px; height: 36px; object-fit: contain; } .ep-icon-btn { color: var(--text-secondary); } .ep-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; } .ep-icon-btn:hover { color: var(--text-primary); } .ep-icon-loading { display: inline-block; width: 16px; height: 16px; border: 2px solid #363a45; border-top-color: var(--accent, #69E1FB); border-radius: 50%; animation: ep-spin 0.6s linear infinite; } .ep-icon-err { color: #787b86; font-size: 14px; } @keyframes ep-spin { to { transform: rotate(360deg); } } /* ═══ ALERT BUILDER DIALOG ═══ */ /* Modal overlay + multi-step form for creating price/indicator alerts. */ .ab-overlay { display: none; position: fixed; inset: 0; z-index: 850; background: rgba(0,0,0,0.55); align-items: flex-start; justify-content: center; padding-top: 5vh; } .ab-overlay.open { display: flex; } .ab-panel { background: #1a1e2a; border: 1px solid #2a2e39; border-radius: 10px; width: 820px; max-width: 95vw; max-height: 88vh; box-shadow: 0 12px 48px rgba(0,0,0,0.7); font-family: Inter, -apple-system, system-ui, sans-serif; animation: abSlideIn 0.15s ease-out; display: flex; flex-direction: column; } .ab-body { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent, #69E1FB) transparent; } .ab-body::-webkit-scrollbar { width: 6px; } .ab-body::-webkit-scrollbar-track { background: transparent; } .ab-body::-webkit-scrollbar-thumb { background: var(--accent, #69E1FB); border-radius: 3px; } @keyframes abSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ab-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid #2a2e39; } .ab-titlebar-text { font-size: 15px; font-weight: 700; color: #d1d4dc; letter-spacing: 0.3px; } .ab-titlebar-close { background: none; border: none; color: #787b86; font-size: 22px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; line-height: 1; } .ab-titlebar-close:hover { color: #d1d4dc; background: #2a2e39; } .ab-icon-btn { background: none; border: none; color: #787b86; cursor: pointer; padding: 4px; border-radius: 4px; } .ab-icon-btn:hover { color: #d1d4dc; background: #2a2e39; } /* ── Steps ── */ .ab-step { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 24px; border-bottom: 1px solid #2a2e39; } .ab-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #1a1a2e; flex-shrink: 0; } .ab-step-blue { background: #6b9fdb; } .ab-step-green { background: #5fb87a; } .ab-step-orange { background: #d4a054; } .ab-step-header { display: flex; align-items: center; gap: 10px; width: 100%; } .ab-step-title { font-size: 15px; font-weight: 700; color: #d1d4dc; text-transform: uppercase; letter-spacing: 0.5px; } .ab-step-subtitle { font-size: 13px; color: #787b86; } /* ── Pills ── */ .ab-pill { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 600; cursor: default; } .ab-pill-blue { background: #6b9fdb; color: #1a1a2e; } .ab-pill-green { background: #5fb87a; color: #1a1a2e; font-size: 11px; padding: 3px 10px; border-radius: 4px; } .ab-symbol-search { display: inline-flex; align-items: center; background: #131722; border: 1px solid #2a2e39; border-radius: 6px; overflow: hidden; } .ab-symbol-input { background: transparent; border: none; color: #d1d4dc; padding: 6px 12px; font-size: 14px; font-weight: 700; width: 80px; outline: none; } .ab-symbol-sep { width: 1px; height: 20px; background: #2a2e39; flex-shrink: 0; } .ab-symbol-search-btn { background: none; border: none; color: #787b86; cursor: pointer; padding: 6px 8px; display: flex; align-items: center; } .ab-symbol-search-btn:hover { color: #d1d4dc; } .ab-price-last { font-size: 16px; color: #d1d4dc; font-weight: 700; } .ab-price-change { font-size: 13px; color: #26a69a; font-weight: 600; } .ab-price-change.negative { color: #ef5350; } /* ── Keywords (WHERE / THEN) ── */ .ab-keyword { font-size: 13px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; } .ab-keyword-yellow { color: #e0c56c; } /* ── Condition rows (inline like reference UI) ── */ .ab-condition-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; padding-left: 20px; flex-wrap: wrap; } .ab-condition-row + .ab-condition-row { margin-top: 4px; } .ab-condition-row .ab-keyword { width: 50px; text-align: right; flex-shrink: 0; } .ab-condition-row .ab-pill { flex-shrink: 0; } .ab-condition-row .ab-field { width: 150px; flex: 0 1 150px; min-width: 0; } .ab-condition-row .ab-operator { width: 170px; flex: 0 1 170px; min-width: 0; } .ab-condition-row .ab-value { width: 100px; flex: 0 1 100px; min-width: 0; } .ab-select-inline { background: #131722; border: 1px solid #2a2e39; color: #d1d4dc; padding: 7px 30px 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23787b86'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .ab-select-inline:focus { border-color: #69E1FB; outline: none; } .ab-input-inline { background: #131722; border: 1px solid #2a2e39; color: #d1d4dc; padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; width: 110px; } .ab-input-inline:focus { border-color: #69E1FB; outline: none; } .ab-message-input { width: 100%; } /* ── Remove button (×) ── */ .ab-row-remove { background: #3d2c2c; border: none; color: #d4837a; width: 26px; height: 26px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .ab-row-remove:hover { background: #4d3333; } /* ── Action row ── */ .ab-action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; padding-left: 20px; } .ab-action-row + .ab-action-row { margin-top: 6px; } /* ── Add links ── */ .ab-add-link { background: none; border: none; color: #5fb87a; font-size: 13px; cursor: pointer; padding: 8px 0; font-weight: 600; display: flex; align-items: center; padding-left: 20px; margin-top: 4px; width: 100%; } .ab-add-link:hover { opacity: 0.8; } /* ── Options grid ── */ .ab-options-grid { display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; padding: 16px 24px; border-top: 1px solid #2a2e39; align-items: center; } .ab-opt-label { font-size: 13px; color: #787b86; } /* ── Footer ── */ .ab-footer { display: flex; justify-content: space-between; padding: 16px 24px; border-top: 1px solid #2a2e39; } .ab-btn { padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s; display: inline-flex; align-items: center; } .ab-btn:hover { opacity: 0.85; } .ab-btn-reset { background: none; color: #ef4444; border: 1px solid #ef4444; } .ab-btn-test { background: none; color: #e0c56c; border: 1px solid #e0c56c; } .ab-btn-save { background: #3b82f6; color: #131722; font-weight: 700; } /* ═══ ALERT LIST PANEL ═══ */ /* Right-side slide-out showing active/triggered alerts; z-index 800. */ #alertListPanel { display: none; position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; width: 340px; max-width: 100vw; background: var(--bg-surface, #1e222d); border-left: 1px solid var(--border-primary, #2a2e39); z-index: 800; box-shadow: -4px 0 16px rgba(0,0,0,0.3); font-family: Inter, -apple-system, system-ui, sans-serif; flex-direction: column; animation: csSlideIn 0.2s ease-out; } #alertListPanel.open { display: flex; } .al-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-primary, #2a2e39); } .al-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #d1d4dc); } .al-badge { display: inline-block; background: var(--accent, #69E1FB); color: #131722; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 6px; min-width: 18px; text-align: center; } .al-header-actions { display: flex; gap: 8px; align-items: center; } .al-action-btn { background: none; border: 1px solid var(--border-primary, #2a2e39); color: var(--text-secondary, #787b86); font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; } .al-action-btn:hover { color: var(--text-primary, #d1d4dc); border-color: var(--text-secondary, #787b86); } .al-tabs { display: flex; border-bottom: 1px solid var(--border-primary, #2a2e39); padding: 0 16px; } .al-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary, #787b86); font-size: 12px; padding: 10px 14px; cursor: pointer; font-weight: 500; } .al-tab.active { color: var(--accent, #69E1FB); border-bottom-color: var(--accent, #69E1FB); } .al-list { flex: 1; overflow-y: auto; padding: 8px 0; } .al-alert-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-primary, #2a2e39); cursor: pointer; } .al-alert-row:hover { background: var(--bg-hover, #2a2e39); } .al-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .al-status-dot.active { background: #FFD700; } .al-status-dot.triggered { background: #26a69a; } .al-status-dot.expired { background: #787b86; } .al-status-dot.disabled { background: #4a4a4a; } .al-alert-info { flex: 1; min-width: 0; } .al-alert-symbol { font-size: 12px; font-weight: 700; color: var(--text-primary, #d1d4dc); } .al-alert-condition { font-size: 11px; color: var(--text-secondary, #787b86); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-alert-meta { font-size: 10px; color: var(--text-secondary, #787b86); margin-top: 1px; } .al-alert-meta.triggered { color: #e0c56c; } .al-alert-actions { display: flex; gap: 4px; flex-shrink: 0; } .al-alert-actions button { background: none; border: none; color: var(--text-secondary, #787b86); cursor: pointer; padding: 4px; border-radius: 4px; font-size: 12px; } .al-alert-actions button:hover { color: var(--text-primary, #d1d4dc); background: var(--bg-hover, #2a2e39); } .al-toggle { position: relative; width: 32px; height: 18px; cursor: pointer; } .al-toggle input { opacity: 0; width: 0; height: 0; } .al-toggle-slider { position: absolute; inset: 0; background: #4a4a4a; border-radius: 9px; transition: background 0.2s; } .al-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; bottom: 2px; left: 2px; transition: transform 0.2s; } .al-toggle input:checked + .al-toggle-slider { background: var(--accent, #69E1FB); } .al-toggle input:checked + .al-toggle-slider::before { transform: translateX(14px); } .al-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-secondary, #787b86); font-size: 13px; } /* ═══ TOAST NOTIFICATIONS ═══ */ /* Fixed bottom-right toasts for alerts, errors, and confirmations; z-index 9999. */ .tg-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: linear-gradient(135deg, #1e222d 0%, #252a37 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 18px; min-width: 300px; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); font-family: Inter, -apple-system, system-ui, sans-serif; animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: flex-start; gap: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .tg-toast.tg-toast-alert { border-left: 3px solid #26a69a; } .tg-toast.tg-toast-success { border-left: 3px solid #26a69a; } .tg-toast-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(38,166,154,0.12); } .tg-toast-alert .tg-toast-icon { background: rgba(38,166,154,0.15); color: #26a69a; } .tg-toast-body { flex: 1; min-width: 0; padding-top: 1px; } .tg-toast-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .tg-toast-sym { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; color: var(--text-primary, #d1d4dc); } .tg-toast-sym img { width: 14px; height: 14px; border-radius: 50%; } .tg-toast-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #d1d4dc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tg-toast-msg { font-size: 12px; color: var(--text-secondary, #9598a1); margin-top: 3px; line-height: 1.4; } .tg-toast-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .tg-toast-action { background: none; border: none; font-size: 12px; font-weight: 500; color: #69E1FB; cursor: pointer; padding: 0; transition: color 0.15s; } .tg-toast-action:hover { color: #9aebff; } .tg-toast-time { font-size: 11px; color: var(--text-secondary, #787b86); margin-left: auto; } .tg-toast-close { background: none; border: none; color: #787b86; cursor: pointer; font-size: 18px; padding: 2px; line-height: 1; border-radius: 6px; transition: background 0.15s, color 0.15s; flex-shrink: 0; margin-top: -2px; margin-right: -4px; } .tg-toast-close:hover { background: rgba(255,255,255,0.06); color: #d1d4dc; } .tg-toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #26a69a, #69E1FB); border-radius: 0 0 12px 12px; animation: toastProgress var(--toast-duration, 6s) linear forwards; } @keyframes toastSlideUp { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes toastProgress { from { width: 100%; } to { width: 0%; } } /* ═══ RESPONSIVE BREAKPOINTS ═══ */ /* 768px: tablet — collapse toolbar labels, stack panels full-width. * 480px: phone — further compaction. * 500px height: constrain flyout/dropdown max-heights. * 1920px+: widen side panels for ultrawide displays. */ @media (max-width: 768px) { /* Toolbar: compact, scrollable */ #toolbar { height: 36px; padding: 0 4px; gap: 2px; } .tb-item { padding: 4px 6px; font-size: 12px; min-width: 0; } .tb-item#indicatorChip > .tb-label, .tb-item#drawChip > .tb-label { display: none; } .tb-item svg:not(.tb-caret) { width: 16px; height: 16px; margin-right: 0; } .tb-caret { width: 6px; height: 4px; margin-left: 2px; } #symbolChip svg { margin-left: 0; } .tb-sep { height: 20px; margin: 0 2px; } .tb-scroll-btn { height: 36px; background: var(--bg-surface, #1e222d); } /* Quote bar: compact but readable */ #quoteBar { height: 34px; padding: 0 8px; gap: 6px; overflow-x: auto; } #quoteBar .qb-price { font-size: 14px !important; } #quoteBar .qb-change { font-size: 13px !important; } #quoteBar .qb-label { font-size: 12px !important; } #quoteBar .qb-value { font-size: 13px !important; } #quoteBar .qb-ohlcv { display: none; } #quoteBar .qb-sep { display: none; } /* Dropdowns: full width on small screens */ #toolbar .dropdown { max-width: calc(100vw - 8px) !important; } #toolbar .dropdown.right { left: auto !important; right: 0 !important; } #drawDropdown { min-width: 180px; max-height: 70vh; overflow-y: auto; scrollbar-width: none; } #drawDropdown::-webkit-scrollbar { display: none; } /* Layout panel responsive */ #layoutDropdown { min-width: auto !important; width: calc(100vw - 16px); max-width: 340px; right: 0; } #layoutDropdown > div[style*="flex"] { max-width: 100% !important; flex-wrap: wrap !important; } #emojiPicker { width: calc(100vw - 24px); max-width: 360px; } /* Indicator dialog dropdown — full width on mobile */ #indicatorDialog.ind-drawer-mode { left: 0 !important; right: 0 !important; } .ind-panel, #indicatorDialog.ind-drawer-mode .ind-panel { position: fixed !important; width: 100vw !important; left: 0 !important; right: 0 !important; min-width: 0 !important; max-width: 100vw !important; border-radius: 0 !important; animation: none !important; transform: none !important; box-sizing: border-box !important; overflow-x: hidden !important; } body { overflow-x: hidden; } /* Indicator panel: everything border-box on mobile */ .ind-panel *, .ind-panel *::before, .ind-panel *::after { box-sizing: border-box !important; } .ind-panel { border: none !important; } .ind-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; } .ind-row .ind-icon { width: 28px; height: 28px; } .ind-row .ind-info { flex: 1; min-width: 0; } .ind-row .ind-name { font-size: 13px; } .ind-row .ind-desc { font-size: 11px; } .ind-row .ind-badge { font-size: 10px; padding: 1px 6px; } .ind-row .ind-add, .ind-row .ind-view { padding: 3px 8px; font-size: 11px; } .ind-panel-header { padding: 10px 10px 8px; } .ind-panel-header h3 { font-size: 16px; } .ind-search { padding: 8px 10px; } .ind-search input { width: 100%; font-size: 16px; padding: 8px 10px; } .ind-cat-chips { padding: 6px 10px; gap: 4px; } .ind-cat-chip { padding: 4px 8px; font-size: 11px; } .ind-tabs { padding: 0 10px; } /* Help dialog */ .help-dialog { width: 100vw !important; left: 0 !important; } .help-resize { display: none !important; } .help-body { position: relative; } .help-nav { width: 40px !important; min-width: 40px !important; padding: 4px 0 !important; overflow-y: auto; scrollbar-width: none; } .help-nav::-webkit-scrollbar { display: none; } .help-nav-label { display: none !important; } .help-nav-icon { margin-right: 0 !important; } .help-nav-item { padding: 8px 0 !important; justify-content: center !important; display: flex !important; } .help-nav.mobile-open { width: 180px !important; min-width: 180px !important; padding: 8px 0 !important; border-right: 1px solid var(--border-primary, #2a2e39) !important; overflow-y: auto; position: absolute !important; z-index: 6; background: var(--bg-surface, #1e222d); left: 0; top: 0; bottom: 0; } .help-nav.mobile-open .help-nav-label { display: inline !important; } .help-nav.mobile-open .help-nav-icon { margin-right: 8px !important; } .help-nav.mobile-open .help-nav-item { justify-content: flex-start !important; padding: 8px 12px !important; } .help-content { padding: 12px 14px; } .help-mobile-toggle { display: none !important; } /* Settings panel: full width on mobile */ #chartSettingsPanel { width: 100%; left: 0; } .cs-panel { width: 100%; max-width: 100vw; } /* Settings panel inline grids: narrower labels */ .cs-collapse-body .cs-section.cs-inline, .cs-advanced-body .cs-section.cs-inline { grid-template-columns: 100px 1fr; } /* Alert builder */ .ab-panel { width: 100%; border-radius: 0; max-width: 100vw; } #alertListPanel { width: 100%; left: 0; } .ab-condition-row { flex-wrap: wrap; gap: 4px; } .ab-condition-row .ab-field, .ab-condition-row .ab-operator, .ab-condition-row .ab-value { flex: 1 1 100%; width: auto; } .ab-condition-row .ab-keyword { width: auto; text-align: left; } /* AI panel: full width overlay */ #aiAssistantPanel { width: 100vw; } /* Object tree: full width */ .ot-panel { width: 100vw !important; left: 0 !important; right: 0 !important; display: none !important; transform: none !important; border-left: none !important; box-sizing: border-box !important; } .ot-panel.open { display: flex !important; } .ot-header { padding: 12px 16px !important; } .ot-close { font-size: 24px !important; padding: 4px 8px !important; } /* Fundamentals panel: full width */ .fund-panel { width: 100vw; } /* Order drawer: full width */ #orderDrawer { width: 100%; } /* Sync group picker: constrain to viewport */ .sync-group-picker { max-width: calc(100vw - 16px); } /* Panel buttons: larger touch target on mobile */ .panel-popout-btn { width: 28px; height: 28px; } .panel-maximize-btn { width: 28px; height: 28px; } /* Draw toolbar (left sidebar): narrower */ #drawToolbar { width: 36px; } #drawToolbar .tg-btn { width: 30px; height: 30px; } #drawToolbar .btn-text { display: none; } .tg-flyout { left: 36px; } /* Chart grid: single column on mobile */ #chartGrid[data-layout="2h"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } #chartGrid[data-layout="3"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } #chartGrid[data-layout="3"] .chart-panel:first-child { grid-row: auto; } #chartGrid[data-layout="4"] { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="6"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); } /* New layout mobile overrides */ #chartGrid[data-layout="3v"], #chartGrid[data-layout="3h"], #chartGrid[data-layout="3rl"], #chartGrid[data-layout="3tb"], #chartGrid[data-layout="3bt"] { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); } #chartGrid[data-layout="3rl"] .chart-panel:nth-child(3), #chartGrid[data-layout="3tb"] .chart-panel:first-child, #chartGrid[data-layout="3bt"] .chart-panel:nth-child(3) { grid-row: auto; grid-column: auto; } #chartGrid[data-layout="4v"], #chartGrid[data-layout="4h"], #chartGrid[data-layout="4lr"], #chartGrid[data-layout="4rl"], #chartGrid[data-layout="4tb"], #chartGrid[data-layout="4bt"] { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="4lr"] .chart-panel:first-child, #chartGrid[data-layout="4rl"] .chart-panel:nth-child(4), #chartGrid[data-layout="4tb"] .chart-panel:first-child, #chartGrid[data-layout="4bt"] .chart-panel:nth-child(4) { grid-row: auto; grid-column: auto; } #chartGrid[data-layout="6v"], #chartGrid[data-layout="6h"], #chartGrid[data-layout="6g"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); } #chartGrid[data-layout="8g"], #chartGrid[data-layout="8v"], #chartGrid[data-layout="8h"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); } #chartGrid[data-layout="10"], #chartGrid[data-layout="10g"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); } #chartGrid[data-layout="12g"], #chartGrid[data-layout="12h"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); } #chartGrid[data-layout="16g"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, 1fr); } /* Branding */ #tgBranding { margin-bottom: 8px; padding: 4px 0; } #tgBranding img { width: 18px; height: 18px; } /* Toast: centered bottom */ .tg-toast { right: 8px; left: 8px; bottom: 16px; min-width: auto; max-width: none; } /* Widget panel: hide sidebar toolbar, show toolbar button, full-width bottom sheet */ #widgetToolbar { display: none; } #widgetPanel { position: fixed; bottom: 0; left: 0; right: 0; width: 100% !important; height: 50vh; z-index: 800; border-left: none; border-top: 1px solid var(--border-primary); transition: height 0.2s ease; } #widgetPanel.wt-closed { height: 0; } .wp-resize-handle { display: none; } } @media (max-width: 480px) { /* Extra-small: hide more toolbar items */ .tb-item#drawChip > .tb-label, .tb-item#indicatorChip > .tb-label { display: none; } .tb-item { padding: 4px 3px; } /* Symbol chip: truncate */ #symbolChip .sym-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; } /* Indicator bar: scroll horizontally */ #indicatorBar { overflow-x: auto; flex-wrap: nowrap; } #indicatorBar::-webkit-scrollbar { display: none; } /* Settings: stack label/control vertically */ .cs-collapse-body .cs-section.cs-inline, .cs-advanced-body .cs-section.cs-inline { grid-template-columns: 1fr; } /* Fund tabs: scroll horizontally */ .fund-tabs { overflow-x: auto; scrollbar-width: none; } .fund-tabs::-webkit-scrollbar { display: none; } .fund-tab { white-space: nowrap; font-size: 11px; padding: 6px 8px; } } @media (min-width: 1920px) { #chartSettingsPanel { width: 480px; } .fund-panel { width: 440px; } #orderDrawer { width: 400px; } .ot-panel { width: 380px; } #aiAssistantPanel { width: 480px; } } @media (max-height: 500px) { #drawDropdown { max-height: 60vh; } .tg-flyout { max-height: 55vh; } .dd-item.has-sub > .dd-submenu { max-height: 55vh; } } /* ─── Keyboard Shortcuts Tab ─── */ .cs-shortcut-hint { font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; } .cs-shortcut-list { display: flex; flex-direction: column; gap: 4px; } .cs-shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 4px; } .cs-shortcut-row:hover { background: var(--bg-hover); } .cs-shortcut-label { font-size: 13px; color: var(--text-primary); } .cs-shortcut-key { background: var(--bg-hover-strong, #2a2e39); border: 1px solid var(--border-primary); border-radius: 4px; padding: 4px 10px; font-size: 12px; font-family: monospace; color: var(--text-secondary); cursor: pointer; min-width: 80px; text-align: center; transition: border-color 0.15s, background 0.15s; } .cs-shortcut-key:hover { border-color: var(--accent); color: var(--text-primary); } .cs-shortcut-key.recording { border-color: var(--accent); background: rgba(var(--accent-rgb, 33,150,243), 0.1); color: var(--accent); animation: pulse-border 1s infinite; } @keyframes pulse-border { 0%,100% { border-color: var(--accent); } 50% { border-color: transparent; } } .cs-btn-reset-shortcuts { background: transparent; border: 1px solid var(--border-primary); color: var(--text-secondary); padding: 8px 16px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .cs-btn-reset-shortcuts:hover { border-color: #ef5350; color: #ef5350; } body.light-theme .cs-shortcut-key { background: #f0f3fa; border-color: #e0e3eb; color: #4a4a4a; } body.light-theme .cs-shortcut-key:hover { border-color: var(--accent-light); color: #131722; } body.light-theme .cs-shortcut-key.recording { background: rgba(33,150,243,0.06); } body.light-theme .cs-btn-reset-shortcuts { border-color: #e0e3eb; color: #4a4a4a; } /* ─── Chart Settings Reset Button ─── */ .cs-btn-reset { background: transparent; border: 1px solid var(--border-primary); color: var(--text-secondary); padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-right: auto; transition: border-color 0.15s, color 0.15s; } .cs-btn-reset:hover { border-color: #ef5350; color: #ef5350; } body.light-theme .cs-btn-reset { border-color: #e0e3eb; color: #4a4a4a; } body.light-theme .cs-btn-reset:hover { border-color: #ef5350; color: #ef5350; } .cs-btn-preview { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: #d1d4dc; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .cs-btn-preview:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff; } body.light-theme .cs-btn-preview { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #4a4a4a; } body.light-theme .cs-btn-preview:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.2); color: #131722; } /* ─── Collapsible sections ─── */ .cs-collapsible { border-bottom: 1px solid var(--border-subtle); } .cs-expand-all { display: flex; justify-content: flex-end; padding: 2px 10px 0; gap: 6px; } .cs-expand-all button { background: none; border: none; color: var(--text-secondary, #787b86); font-size: 11px; cursor: pointer; padding: 1px 5px; border-radius: 3px; } .cs-expand-all button:hover { color: var(--accent, #e88514); background: rgba(255,255,255,0.04); } .cs-section-header { display: flex; align-items: center; gap: 4px; padding: 6px 10px; cursor: pointer; user-select: none; } .cs-section-header:hover { background: var(--hover-bg, rgba(255,255,255,0.04)); } .cs-section-header .cs-section-title { margin: 0; } .cs-collapse-icon { transition: transform 0.2s ease; flex-shrink: 0; color: var(--text-secondary, #787b86); } .cs-collapsible.collapsed .cs-collapse-icon { transform: rotate(-90deg); } .cs-collapse-body { padding: 2px 10px 4px 30px; overflow: hidden; } .cs-collapse-body .cs-section.cs-inline { border-bottom: none; padding: 2px 0; gap: 6px; display: grid; grid-template-columns: 120px 1fr; align-items: center; } .cs-collapse-body .cs-inline > span:first-child { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-primary); } .cs-collapse-body .cs-field select, .cs-collapse-body .cs-field .cs-input { font-weight: 400; font-size: 13px; padding: 3px 8px; } .cs-collapsible.collapsed .cs-collapse-body { display: none; } /* Advanced toggle */ .cs-advanced-toggle { display: flex; align-items: center; gap: 3px; padding: 3px 0; cursor: pointer; font-size: 12px; color: var(--text-secondary, #787b86); user-select: none; } .cs-advanced-toggle:hover { color: var(--accent, #e88514); } .cs-advanced-toggle .cs-collapse-icon { transition: transform 0.2s ease; } .cs-advanced-toggle.open .cs-collapse-icon { transform: rotate(90deg); } .cs-advanced-body { padding: 0 0 0 8px; } .cs-advanced-body .cs-section.cs-inline { padding: 2px 0; gap: 6px; border-bottom: none; display: grid; grid-template-columns: 120px 1fr; align-items: center; } .cs-advanced-body .cs-inline .cs-section-title, .cs-advanced-body .cs-inline > span:first-child { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-primary); } .cs-advanced-body .cs-field select, .cs-advanced-body .cs-field .cs-input { font-weight: 400; font-size: 13px; padding: 3px 8px; } .cs-advanced-body .cs-opt-list { gap: 0; } .cs-advanced-body .cs-opt { padding: 2px 4px; } /* Range slider row */ .cs-range-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; } .cs-range-row span:first-child { min-width: 44px; } .cs-range { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border-subtle, #363a45); border-radius: 2px; outline: none; } .cs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent, #e88514); cursor: pointer; } .cs-range-val { min-width: 36px; text-align: right; font-size: 12px; color: var(--text-secondary, #787b86); } /* Margin inputs — 3-column grid for aligned labels/inputs/units */ .cs-margin-grid { display: grid; grid-template-columns: 60px 70px auto; gap: 6px 10px; align-items: center; padding: 4px 0; font-size: 13px; } .cs-margin-label { color: var(--text-primary, #d1d4dc); font-size: 13px; font-weight: 400; } .cs-margin-input { width: 100%; padding: 4px 8px; border: 1px solid var(--border-subtle, #363a45); border-radius: 4px; background: var(--surface, #1e222d); color: var(--text-primary, #d1d4dc); font-size: 13px; text-align: center; } .cs-margin-unit { font-size: 12px; color: var(--text-secondary, #787b86); } /* ─── Bar Countdown ─── */ .tb-bar-countdown { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); padding: 0 8px; } .bc-bars { color: var(--text-secondary); } .bc-timer { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; } /* ═══ HELP PANEL ═══ */ /* Full-screen overlay with left nav + markdown-rendered content area. */ .help-dialog { position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; width: 520px; max-width: 100vw; z-index: 800; display: none; animation: csSlideIn 0.2s ease-out; } .help-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; } .help-resize:hover, .help-resize:active { background: var(--accent, #2962ff); } .help-dialog.open { display: flex; } .help-dialog-inner { width: 100%; height: 100%; background: var(--bg-surface, #1e222d); border-radius: 0; border-left: 1px solid var(--border-primary, #2a2e39); display: flex; flex-direction: column; overflow: hidden; box-shadow: -4px 0 16px rgba(0,0,0,0.3); } .help-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-primary, #2a2e39); flex-shrink: 0; } .help-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #d1d4dc); white-space: nowrap; } .help-search { flex: 1; background: var(--bg-primary, #131722); border: 1px solid var(--border-primary, #2a2e39); border-radius: 6px; padding: 7px 12px; font-size: 13px; color: var(--text-primary, #d1d4dc); outline: none; transition: border-color 0.15s; } .help-search:focus { border-color: var(--accent, #69E1FB); } .help-search::placeholder { color: var(--text-secondary, #787b86); } .help-close { background: none; border: none; color: var(--text-secondary, #787b86); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px; } .help-close:hover { color: var(--text-primary, #d1d4dc); background: rgba(255,255,255,0.05); } .help-body { display: flex; flex: 1; overflow: hidden; } .help-nav-wrap { display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid var(--border-primary, #2a2e39); transition: width 0.18s ease, min-width 0.18s ease; } .help-nav-scroll-btn { width: 100%; height: 20px; display: none; align-items: center; justify-content: center; background: var(--bg-surface, #1e222d); color: var(--accent, #69E1FB); cursor: pointer; border: none; font-size: 10px; flex-shrink: 0; transition: color 0.12s, background 0.12s; } .help-nav-scroll-btn:hover { background: var(--bg-hover-strong, #2a2e39); } .help-nav-scroll-btn.visible { display: flex; } .help-nav-scroll-btn.top { border-bottom: 1px solid var(--border-primary, #2a2e39); } .help-nav-scroll-btn.bottom { border-top: 1px solid var(--border-primary, #2a2e39); } .help-nav { width: 130px; flex-shrink: 0; overflow-y: auto; padding: 8px 0; flex: 1; min-height: 0; scrollbar-width: none; transition: width 0.18s ease, min-width 0.18s ease, padding 0.18s ease; } .help-nav::-webkit-scrollbar { display: none; } .help-nav.nav-collapsed { width: 40px; min-width: 40px; padding: 4px 0; overflow-y: auto; scrollbar-width: none; } .help-nav.nav-collapsed::-webkit-scrollbar { display: none; } .help-nav.nav-collapsed .help-nav-label { display: none; } .help-nav.nav-collapsed .help-nav-icon { margin-right: 0; } .help-nav.nav-collapsed .help-nav-item { padding: 8px 0; justify-content: center; } .help-nav-item { display: flex; align-items: center; padding: 8px 16px; font-size: 12px; color: var(--text-secondary, #787b86); cursor: pointer; transition: background 0.1s, color 0.1s; text-decoration: none; } .help-nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 8px; } .help-nav-label { white-space: nowrap; } .help-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text-primary, #d1d4dc); } .help-nav-item.active { color: var(--accent, #69E1FB); background: rgba(105,225,251,0.06); } .help-mobile-toggle { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; color: var(--text-secondary, #787b86); background: none; border: none; flex-shrink: 0; } .help-mobile-toggle:hover { color: var(--text-primary, #d1d4dc); } .help-content { flex: 1; overflow-y: auto; padding: 20px 24px; font-size: 13px; line-height: 1.7; color: var(--text-primary, #d1d4dc); } .help-content h1 { font-size: 20px; font-weight: 700; margin: 0 0 16px; } .help-content h2 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--text-primary, #d1d4dc); } .help-content h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; } .help-content p { margin: 0 0 10px; } .help-content ul, .help-content ol { margin: 0 0 10px; padding-left: 20px; } .help-content li { margin: 4px 0; } .help-content code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; } .help-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; } .help-content th, .help-content td { padding: 6px 10px; border: 1px solid var(--border-primary, #2a2e39); text-align: left; } .help-content th { background: rgba(255,255,255,0.03); font-weight: 600; } .help-content strong { color: var(--text-primary, #d1d4dc); } .help-content hr { border: none; border-top: 1px solid var(--border-primary, #2a2e39); margin: 16px 0; } .help-no-results { text-align: center; padding: 40px; color: var(--text-secondary, #787b86); font-size: 13px; } /* ═══ OBJECT TREE PANEL ═══ */ /* Right-side panel listing all chart objects (drawings, indicators) in a * tree hierarchy; z-index 510, slides in from right. */ .ot-panel { position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; width: 280px; background: var(--bg-primary, #1e222d); border-left: 1px solid var(--border-primary, #2a2e39); z-index: 510; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .ot-panel.open { transform: translateX(0); } .ot-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-primary, #2a2e39); font-size: 14px; font-weight: 600; color: var(--text-primary, #d1d4dc); } .ot-close { background: none; border: none; color: var(--text-secondary, #787b86); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.15s; } .ot-close:hover { color: var(--text-primary, #d1d4dc); } .ot-section { flex: 1; display: flex; flex-direction: column; min-height: 0; } .ot-section-title { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #787b86); } .ot-count { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 1px 6px; font-size: 10px; min-width: 16px; text-align: center; } .ot-list { overflow-y: auto; flex: 1; padding: 2px 0; } .ot-item { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 32px; cursor: default; transition: background 0.1s; } .ot-item:hover { background: rgba(255,255,255,0.04); } .ot-item.selected { background: rgba(105,225,251,0.08); } .ot-item.hidden .ot-name { opacity: 0.4; } .ot-color { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .ot-color-pick { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; cursor: pointer; position: relative; border: 1px solid rgba(255,255,255,0.2); } .ot-name { flex: 1; font-size: 12px; color: var(--text-primary, #d1d4dc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .ot-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; } .ot-item:hover .ot-actions { opacity: 1; } .ot-item.selected .ot-actions { opacity: 1; } .ot-actions button { background: none; border: none; color: var(--text-secondary, #787b86); cursor: pointer; padding: 3px; border-radius: 3px; display: flex; align-items: center; transition: color 0.15s, background 0.15s; } .ot-actions button:hover { color: var(--text-primary, #d1d4dc); background: rgba(255,255,255,0.06); } .ot-item.locked .ot-lock { color: var(--accent, #69E1FB); } .ot-item.hidden .ot-eye { color: var(--accent, #69E1FB); } .ot-alert:hover { color: var(--accent, #2962ff) !important; } .ot-delete:hover { color: #f44336 !important; } .ot-footer { padding: 12px 16px; border-top: 1px solid var(--border-primary, #2a2e39); } .ot-footer-btn { width: 100%; padding: 8px; border: none; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--text-secondary, #787b86); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ot-footer-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #d1d4dc); } .ot-footer-btn.ot-danger:hover { background: rgba(244,67,54,0.12); color: #f44336; } /* ═══ HELP DEMO WIDGET ═══ */ /* Animated interactive demos embedded within help articles; renders a * miniature chart canvas with step-by-step guided overlays. */ .help-demo { position: relative; width: 100%; aspect-ratio: 480 / 280; border-radius: 6px; background: #131722; overflow: hidden; margin-bottom: 20px; border: 1px solid #2a2e39; user-select: none; font-family: Inter, -apple-system, system-ui, sans-serif; display: flex; flex-direction: column; } .hd-toolbar { display: flex; align-items: center; height: 38px; min-height: 38px; gap: 0; border-bottom: 1px solid #2a2e39; background: #1e222d; padding: 0 4px; } .hd-tb-item { display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 100%; font-size: 13px; color: #787b86; cursor: default; white-space: nowrap; transition: background 0.15s, color 0.15s; } .hd-tb-item:hover, .hd-tb-item.hd-active { color: #d1d4dc; background: rgba(255,255,255,0.04); } .hd-tb-item svg:not(.hd-caret) { width: 18px; height: 18px; fill: currentColor; margin-right: 2px; flex-shrink: 0; } .hd-tb-item .hd-caret { width: 8px; height: 5px; margin-left: 4px; color: #787b86; } .hd-tb-item.hd-active { color: #69E1FB; } .hd-tb-sym { font-weight: 700; font-size: 15px; color: #d1d4dc; } .hd-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #26a69a; margin-right: 4px; vertical-align: middle; flex-shrink: 0; } img.hd-sym-logo { display: inline-block; width: 20px; height: 20px; border-radius: 50%; margin-right: 5px; vertical-align: middle; flex-shrink: 0; object-fit: cover; background: #363a45; } .hd-sep { width: 1px; height: 24px; background: #4a4e59; margin: 0 4px; flex-shrink: 0; } .hd-dr-bar { font-size: 10px; font-weight: 600; color: #787b86; letter-spacing: 1px; white-space: nowrap; } /* Body: draw sidebar + chart side by side */ .hd-body { display: flex; flex: 1; min-height: 0; } /* Left draw toolbar */ .hd-draw-sidebar { width: 40px; min-width: 40px; display: flex; flex-direction: column; align-items: center; padding: 3px 0; background: #1e222d; border-right: 1px solid #2a2e39; gap: 2px; } .hd-draw-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: #787b86; cursor: default; position: relative; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .hd-draw-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } .hd-draw-btn:hover { color: #d1d4dc; background: rgba(255,255,255,0.06); } .hd-draw-btn.active { color: #69E1FB; background: rgba(105,225,251,0.1); } .hd-draw-sep { height: 1px; width: 32px; background: #2a2e39; margin: 2px 0; flex-shrink: 0; } .hd-draw-btn.has-sub::after { content: ''; position: absolute; bottom: 3px; right: 3px; width: 0; height: 0; border: 3px solid transparent; border-bottom-color: #787b86; border-right-color: #787b86; } .hd-draw-btn.active.has-sub::after { border-bottom-color: #69E1FB; border-right-color: #69E1FB; } /* Chart area */ .hd-chart { position: relative; flex: 1; background: #131722; overflow: hidden; min-width: 0; } .hd-trade-line { position: absolute; left: 0; right: 0; height: 0; display: flex; align-items: center; z-index: 4; } .hd-tl-chip { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; margin-left: 4px; letter-spacing: 0.3px; } .hd-tl-rule { flex: 1; border-top: 1.5px dashed #ef5350; min-width: 0; } .hd-tl-price { font-size: 8px; font-weight: 700; padding: 2px 4px; color: #fff; white-space: nowrap; flex-shrink: 0; border-radius: 2px 0 0 2px; } .hd-side-panel { width: 170px; flex-shrink: 0; background: #1e222d; border-left: 1px solid #2a2e39; font-size: 9px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } .hd-sp-row { display: flex; align-items: center; gap: 3px; padding: 4px 5px; border-bottom: 1px solid #2a2e39; } .hd-sp-check { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #555; flex-shrink: 0; } .hd-sp-check.checked { background: #90caf9; border-color: #90caf9; } .hd-sp-side { padding: 2px 0; border-radius: 3px; font-size: 8px; font-weight: 800; text-align: center; width: 28px; flex-shrink: 0; color: #000; } .hd-sp-side.buy { background: #26a69a; } .hd-sp-side.sell { background: #ef5350; } .hd-sp-side.stop { background: #ef5350; } .hd-sp-input-box { flex: 1; min-width: 0; background: #131722; border: 1px solid #2a2e39; border-radius: 3px; padding: 6px 3px 2px; position: relative; } .hd-sp-input-lbl { position: absolute; top: 1px; left: 3px; font-size: 7px; color: #787b86; font-weight: 600; text-transform: uppercase; } .hd-sp-input-val { font-size: 9px; color: #d1d4dc; font-weight: 500; display: block; margin-top: 2px; } .hd-sp-select { background: #131722; border: 1px solid #2a2e39; border-radius: 3px; padding: 3px 2px; font-size: 8px; font-weight: 700; color: #d1d4dc; width: 28px; text-align: center; flex-shrink: 0; } .hd-sp-total-strip { display: flex; border-bottom: 1px solid #2a2e39; background: #1e222d; } .hd-sp-total-item { flex: 1; text-align: center; padding: 3px 2px; border-right: 1px solid #2a2e39; } .hd-sp-total-item:last-child { border-right: none; } .hd-sp-total-lbl { font-size: 7px; font-weight: 700; color: #787b86; text-transform: uppercase; display: block; } .hd-sp-total-val { font-size: 9px; font-weight: 700; color: #53b1fd; display: block; } .hd-sp-place-btn { display: block; width: calc(100% - 10px); margin: 6px 5px; padding: 5px 0; border-radius: 4px; border: none; background: #448aff; color: #0d1117; font-size: 9px; font-weight: 800; text-align: center; letter-spacing: 0.5px; } .hd-sp-place-btn.highlight { box-shadow: 0 0 8px rgba(68,138,255,0.6); } /* Order drawer header sections */ .hd-sp-header-row { display: flex; align-items: center; gap: 4px; padding: 5px 5px 3px; } .hd-sp-acct-badge { width: 22px; height: 22px; border-radius: 50%; background: #5c4a1e; color: #c9a84c; font-size: 7px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #7a6830; } .hd-sp-acct-info { flex: 1; min-width: 0; } .hd-sp-acct-name { font-size: 9px; font-weight: 600; color: #d1d4dc; display: block; } .hd-sp-acct-broker { font-size: 7px; color: #787b86; display: block; } .hd-sp-close { font-size: 12px; color: #787b86; cursor: pointer; flex-shrink: 0; padding: 0 2px; } .hd-sp-sym-row { padding: 0 5px 4px; } .hd-sp-sym-name { font-size: 12px; font-weight: 800; color: #d1d4dc; } .hd-sp-sym-exch { font-size: 8px; color: #787b86; } .hd-sp-quote-strip { display: flex; border-top: 1px solid #2a2e39; border-bottom: 1px solid #2a2e39; } .hd-sp-quote-item { flex: 1; text-align: center; padding: 3px 1px; border-right: 1px solid #2a2e39; } .hd-sp-quote-item:last-child { border-right: none; } .hd-sp-quote-lbl { font-size: 6px; font-weight: 700; color: #787b86; text-transform: uppercase; display: block; letter-spacing: 0.3px; } .hd-sp-quote-val { font-size: 9px; font-weight: 600; color: #53b1fd; display: block; } .hd-sp-quote-val.mark { color: #26a69a; } .hd-sp-kpi-strip { display: flex; border-bottom: 1px solid #2a2e39; } .hd-sp-kpi-item { flex: 1; text-align: center; padding: 3px 1px; border-right: 1px solid #2a2e39; } .hd-sp-kpi-item:last-child { border-right: none; } .hd-sp-kpi-lbl { font-size: 6px; font-weight: 700; color: #787b86; text-transform: uppercase; display: block; letter-spacing: 0.3px; } .hd-sp-kpi-val { font-size: 9px; font-weight: 600; color: #26a69a; display: block; } .hd-sp-qty-bar { display: flex; align-items: center; gap: 3px; padding: 4px 5px; border-bottom: 1px solid #2a2e39; } .hd-sp-qty-toggle { font-size: 8px; font-weight: 800; padding: 2px 0; border-radius: 3px; background: #26a69a; color: #000; border: none; width: 32px; text-align: center; flex-shrink: 0; } .hd-sp-pos { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px; } .hd-sp-pos-lbl { font-size: 7px; font-weight: 700; color: #787b86; } .hd-sp-pos-val { font-size: 9px; font-weight: 700; color: #53b1fd; } .hd-chart-label { position: absolute; top: 2px; left: 4px; z-index: 3; font-size: 10px; font-weight: 400; color: #787b86; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 50px); } .hd-chart-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity 0.45s ease; } .hd-dropdown { position: absolute; z-index: 8; min-width: 160px; max-height: 200px; overflow-y: auto; white-space: nowrap; background: #1e222d; border: 1px solid #2a2e39; border-radius: 4px; padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-4px) scaleY(0.96); transform-origin: top left; transition: opacity 0.15s, transform 0.15s; pointer-events: none; } .hd-dropdown.hd-visible { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; } .hd-dd-header { padding: 4px 16px; font-size: 12px; font-weight: 600; color: #d1d4dc; } .hd-dd-row { display: flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 13px; color: #787b86; transition: background 0.1s, color 0.1s; } .hd-dd-row.active { color: #69E1FB; } .hd-dd-row.hd-hover { background: #2a2e39; color: #d1d4dc; } .hd-dd-icon { display: inline-flex; align-items: center; width: 16px; flex-shrink: 0; } .hd-dd-add { margin-left: auto; color: #69E1FB; font-weight: 600; font-size: 13px; } .hd-sym-panel { min-width: 240px; max-height: 260px; padding: 0; border-radius: 6px; } .hd-sp-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #2a2e39; } .hd-sp-input { color: #787b86; font-size: 12px; } .hd-sp-filters { display: flex; gap: 2px; padding: 6px 10px 0; } .hd-sp-filter { font-size: 10px; color: #787b86; padding: 2px 6px; border-radius: 3px; } .hd-sp-filter.active { background: #2a2e39; color: #d1d4dc; } .hd-sp-tabs { display: flex; gap: 8px; padding: 4px 10px; border-bottom: 1px solid #2a2e39; } .hd-sp-tab { font-size: 10px; color: #787b86; padding-bottom: 3px; } .hd-sp-tab.active { color: #2962ff; border-bottom: 2px solid #2962ff; } .hd-sp-list { overflow-y: auto; max-height: 160px; } .hd-sym-panel .hd-dd-row { padding: 5px 10px; gap: 8px; } .hd-sp-logo { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #363a45; } .hd-sp-info { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .hd-sp-sym { font-size: 12px; font-weight: 600; color: #d1d4dc; } .hd-sp-badge { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 2px; line-height: 1.2; } .hd-sp-badge.stock { background: #26a69a33; color: #26a69a; } .hd-sp-badge.etf { background: #ef535033; color: #ef5350; } .hd-sp-badge.crypto { background: #ff980033; color: #ff9800; } .hd-sp-name { font-size: 10px; color: #787b86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-sp-exchange { font-size: 9px; color: #787b86; margin-left: auto; flex-shrink: 0; } .hd-ind-panel { min-width: 260px; max-height: 280px; padding: 0; border-radius: 6px; } .hd-ip-header { padding: 10px 12px 6px; font-size: 12px; font-weight: 600; color: #d1d4dc; border-bottom: 1px solid #2a2e39; } .hd-ip-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #2a2e39; } .hd-ip-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2e39; } .hd-ip-tab { font-size: 11px; color: #787b86; padding: 6px 10px; } .hd-ip-tab.active { color: #2962ff; border-bottom: 2px solid #2962ff; } .hd-ip-list { overflow-y: auto; max-height: 160px; } .hd-ind-panel .hd-dd-row { padding: 6px 12px; } .hd-ip-icon { font-size: 12px; flex-shrink: 0; } .hd-ip-name { font-size: 12px; color: #d1d4dc; flex: 1; } .hd-layout-panel { min-width: 290px; max-height: none; padding: 0; border-radius: 6px; } .hd-lp-header { padding: 8px 12px; font-size: 12px; font-weight: 600; color: #d1d4dc; } .hd-lp-grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 6px 12px 12px; } .hd-lp-opt { width: 40px; height: 30px; border: 1px solid #2a2e39; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #787b86; cursor: pointer; } .hd-lp-opt.active { border-color: #2962ff; color: #2962ff; } .hd-lp-opt svg { width: 32px; height: 24px; } .hd-sp-header { padding: 8px 12px; font-size: 12px; font-weight: 600; color: #d1d4dc; border-bottom: 1px solid #2a2e39; } .hd-sync-panel { min-width: 180px; max-height: none; padding: 0; border-radius: 6px; } .hd-sync-list .hd-dd-row { justify-content: space-between; } .hd-sync-label { font-size: 12px; color: #d1d4dc; } .hd-sync-toggle { font-size: 16px; color: #787b86; } .hd-sync-toggle.on { color: #2962ff; } .hd-alert-panel { min-width: 280px; max-width: 310px; max-height: none; padding: 0; border-radius: 8px; } .hd-ap-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #d1d4dc; border-bottom: 1px solid #2a2e39; } .hd-ap-section { padding: 8px 14px; border-bottom: 1px solid #2a2e39; } .hd-ap-section-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2962ff; color: #fff; font-size: 10px; font-weight: 700; margin-right: 6px; } .hd-ap-section-title { font-size: 11px; font-weight: 600; color: #787b86; text-transform: uppercase; letter-spacing: 0.5px; } .hd-ap-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; flex-wrap: wrap; } .hd-ap-chip { background: #2a2e39; border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #d1d4dc; white-space: nowrap; } .hd-ap-chip.accent { background: #2962ff22; color: #2962ff; } .hd-ap-input { background: #1e222d; border: 1px solid #363a45; border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #d1d4dc; width: 60px; text-align: center; } .hd-ap-actions { display: flex; gap: 8px; padding: 10px 14px; justify-content: flex-end; } .hd-ap-btn { border-radius: 4px; padding: 6px 14px; font-size: 11px; font-weight: 600; cursor: pointer; border: none; } .hd-ap-btn.primary { background: #2962ff; color: #fff; } .hd-ap-btn.secondary { background: #2a2e39; color: #d1d4dc; } .hd-ap-btn.outline { background: transparent; border: 1px solid #363a45; color: #787b86; } .hd-context-menu { min-width: 200px; max-height: none; padding: 4px 0; border-radius: 6px; } .hd-ctx-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; color: #d1d4dc; cursor: pointer; } .hd-ctx-row:hover { background: #2a2e39; } .hd-ctx-row .hd-ctx-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #787b86; } .hd-ctx-row .hd-ctx-short { margin-left: auto; font-size: 10px; color: #787b86; } .hd-ctx-divider { height: 1px; background: #2a2e39; margin: 4px 0; } .hd-settings-panel { min-width: 240px; max-height: 280px; padding: 0; border-radius: 6px; } .hd-set-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2e39; } .hd-set-tab { font-size: 11px; color: #787b86; padding: 6px 10px; } .hd-set-tab.active { color: #2962ff; border-bottom: 2px solid #2962ff; } .hd-set-list .hd-dd-row { justify-content: space-between; } .hd-set-label { font-size: 12px; color: #d1d4dc; } .hd-set-val { font-size: 11px; color: #787b86; background: #2a2e39; padding: 2px 8px; border-radius: 3px; } .hd-set-colors { display: flex; gap: 4px; } .hd-set-colors span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #363a45; } .hd-alert-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ef5350; margin-left: 2px; vertical-align: top; } .hd-alerts-list { min-width: 260px; max-height: none; padding: 0; border-radius: 8px; } .hd-al-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #2a2e39; } .hd-al-header .hd-al-bell { color: #787b86; display: flex; align-items: center; } .hd-al-header .hd-al-title { font-size: 14px; font-weight: 600; color: #d1d4dc; } .hd-al-header .hd-al-badge { background: #26a69a; color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; } .hd-al-header .hd-al-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .hd-al-header .hd-al-clear { font-size: 11px; color: #787b86; background: #2a2e39; border: 1px solid #363a45; border-radius: 4px; padding: 3px 10px; } .hd-al-header .hd-al-close { font-size: 16px; color: #787b86; cursor: pointer; } .hd-al-tabs { display: flex; gap: 0; border-bottom: 1px solid #2a2e39; } .hd-al-tab { font-size: 12px; color: #787b86; padding: 8px 14px; position: relative; } .hd-al-tab.active { color: #2962ff; } .hd-al-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #2962ff; } .hd-al-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: #787b86; } .hd-al-empty svg { margin-bottom: 12px; opacity: 0.4; } .hd-al-empty .hd-al-empty-title { font-size: 13px; color: #787b86; margin-bottom: 4px; } .hd-al-empty .hd-al-empty-sub { font-size: 11px; color: #555; } .hd-al-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #2a2e39; } .hd-al-item .hd-al-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .hd-al-item .hd-al-info { flex: 1; } .hd-al-item .hd-al-sym { font-size: 12px; font-weight: 600; color: #d1d4dc; } .hd-al-item .hd-al-cond { font-size: 10px; color: #787b86; } .hd-layout-menu { min-width: 180px; padding: 4px 0; border-radius: 6px; } .hd-layout-menu .hd-dd-row { padding: 8px 14px; gap: 10px; color: #d1d4dc; font-size: 13px; } .hd-lm-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; } .hd-lm-label { flex: 1; } .hd-lm-short { color: #787b86; font-size: 11px; } .hd-lm-divider { height: 1px; background: #363a45; margin: 4px 0; } .hd-lm-danger { color: #ef5350 !important; } .hd-lm-auto { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #787b86; } .hd-lm-cb { width: 12px; height: 12px; border: 1px solid #787b86; border-radius: 2px; display: inline-block; } .hd-avatar { width: 26px; height: 26px; border-radius: 50%; background: #7b6b4f; color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid #4db6ac; } .hd-user-menu { min-width: 200px; padding: 6px 0; } .hd-um-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; } .hd-um-row:hover { background: rgba(255,255,255,0.04); } .hd-um-email { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12px; color: #787b86; } .hd-um-icon { flex-shrink: 0; display: flex; align-items: center; } .hd-um-label { flex: 1; } .hd-um-eye { flex-shrink: 0; opacity: 0.5; cursor: pointer; } .hd-tf-panel { min-width: 170px; padding: 0; border-radius: 6px; } .hd-tf-panel .hd-dd-row { padding: 8px 16px; font-size: 13px; color: #d1d4dc; } .hd-tf-panel .hd-dd-row.active { color: #26a69a; } .hd-tf-header { padding: 10px 16px 4px; font-size: 10px; font-weight: 700; color: #787b86; letter-spacing: 0.5px; border-top: 1px solid #363a45; } .hd-tf-header:first-of-type { border-top: none; } .hd-tf-custom { color: #d1d4dc; font-weight: 600; font-size: 14px; border-bottom: 1px solid #363a45; padding: 10px 16px; } .hd-ct-panel { min-width: 180px; padding: 4px 0; border-radius: 6px; } .hd-ct-panel .hd-dd-row { padding: 8px 16px; color: #d1d4dc; font-size: 13px; } .hd-ct-panel .hd-dd-row.active { background: #2a2e39; color: #d1d4dc; } .hd-ct-panel .hd-dd-row .hd-dd-icon { color: #787b86; } .hd-ct-panel .hd-dd-row.active .hd-dd-icon { color: #69E1FB; } .hd-ct-divider { height: 1px; background: #363a45; margin: 4px 0; } .hd-ct-more { color: #787b86; display: flex; justify-content: space-between; } .hd-ct-more .hd-dd-icon { font-size: 16px; letter-spacing: 2px; } .hd-cmp-panel { min-width: 240px; max-height: none; padding: 0; border-radius: 6px; } .hd-cmp-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; } .hd-cmp-input { flex: 1; background: #131722; border: 1px solid #2a2e39; border-radius: 4px; padding: 6px 10px; color: #d1d4dc; font-size: 12px; } .hd-cmp-chips { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; } .hd-cmp-chip { display: flex; align-items: center; gap: 4px; background: #2a2e39; color: #d1d4dc; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; } .hd-cmp-x { color: #787b86; font-size: 13px; cursor: pointer; } .hd-prefs-panel { min-width: 260px; max-height: 280px; padding: 0; border-radius: 6px; } .hd-pref-list .hd-dd-row { justify-content: flex-start; gap: 8px; } .hd-pref-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; } .hd-ip-cats { display: flex; gap: 4px; padding: 6px 10px; flex-wrap: wrap; } .hd-ip-cat { font-size: 10px; color: #787b86; padding: 3px 8px; border-radius: 12px; border: 1px solid #2a2e39; white-space: nowrap; } .hd-ip-cat.active { background: rgba(41,98,255,0.15); color: #2962ff; border-color: rgba(41,98,255,0.3); } .hd-ip-cat-n { font-size: 9px; color: #787b86; } .hd-ip-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .hd-ip-desc { font-size: 9px; color: #787b86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-ip-type { font-size: 9px; color: #787b86; background: #2a2e39; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } .hd-lp-divider { height: 1px; background: #2a2e39; margin: 4px 0; } .hd-lp-sync { display: flex; gap: 6px; padding: 6px 12px 12px; } .hd-sync-pill { font-size: 11px; color: #787b86; padding: 4px 12px; border-radius: 16px; border: 1px solid #2a2e39; } .hd-sync-pill.on { color: #d1d4dc; border-color: #363a45; background: #2a2e39; } .hd-sync-pill.on::before { content: '✓ '; font-weight: 700; } .hd-chip-bar { position: absolute; top: 22px; left: 4px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 3; } .hd-ind-chip { display: flex; align-items: center; gap: 3px; padding: 2px 6px; background: rgba(30,34,45,0.85); border-radius: 3px; font-size: 10px; color: #787b86; white-space: nowrap; transition: opacity 0.2s; } .hd-ind-chip.hd-chip-hidden { opacity: 0.35; } .hd-ind-chip.hd-chip-hidden .hd-ic-label { text-decoration: line-through; } .hd-ic-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .hd-ic-label { color: #d1d4dc; font-weight: 600; } .hd-ic-val { color: #787b86; } .hd-ic-actions { display: none; gap: 2px; margin-left: 2px; } .hd-chip-hover .hd-ic-actions { display: flex; } .hd-ic-btn { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 2px; color: #787b86; cursor: pointer; } .hd-ic-btn:hover { color: #d1d4dc; background: #2a2e39; } .hd-toast { position: absolute; bottom: 12px; right: 12px; z-index: 12; background: linear-gradient(135deg,#1e222d,#252a37); border: 1px solid #2a2e39; border-radius: 10px; padding: 10px 14px; min-width: 180px; font-size: 11px; color: #d1d4dc; opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; backdrop-filter: blur(8px); } .hd-toast.hd-visible { opacity: 1; transform: translateY(0); } .hd-toast-title { font-weight: 700; font-size: 12px; margin-bottom: 4px; } .hd-toast-sym { display: inline-flex; align-items: center; gap: 4px; background: #2a2e39; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-bottom: 4px; } .hd-toast-sym .hd-ic-dot { width: 5px; height: 5px; } .hd-toast-body { color: #787b86; font-size: 10px; } .hd-toast-progress { height: 2px; background: #2962ff; border-radius: 1px; margin-top: 6px; animation: toastShrink 3s linear forwards; } @keyframes toastShrink { from { width: 100%; } to { width: 0%; } } .help-demo-cursor { position: absolute; width: 16px; height: 20px; pointer-events: none; z-index: 10; will-change: left, top; } .help-demo-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); } .help-demo-click { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgba(105,225,251,0.4); pointer-events: none; z-index: 9; transform: translate(-50%, -50%) scale(0); opacity: 1; } .help-demo-click.hd-animate { animation: hdClickPulse 0.45s ease-out forwards; } @keyframes hdClickPulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } .help-demo-callout { position: absolute; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); background: linear-gradient(135deg, rgba(105,225,251,0.22) 0%, rgba(41,98,255,0.18) 100%); border: 1px solid rgba(105,225,251,0.45); border-radius: 8px; padding: 6px 14px; white-space: nowrap; pointer-events: none; z-index: 11; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(105,225,251,0.2), 0 4px 12px rgba(0,0,0,0.3); opacity: 0; transform: scale(0.92); transition: opacity 0.3s ease, transform 0.3s ease; } .help-demo-callout.hd-visible { opacity: 1; transform: scale(1.0); } .help-demo-callout::after { content: ''; position: absolute; width: 7px; height: 7px; background: rgba(105,225,251,0.18); border: 1px solid rgba(105,225,251,0.45); transform: rotate(45deg); } .help-demo-callout.hd-arrow-up::after { top: -4px; left: 50%; margin-left: -3px; border-bottom: none; border-right: none; } .help-demo-callout.hd-arrow-down::after { bottom: -4px; left: 50%; margin-left: -3px; border-top: none; border-left: none; } .help-demo-callout.hd-arrow-left::after { left: -4px; top: 50%; margin-top: -3px; border-top: none; border-right: none; } .help-demo-callout.hd-arrow-right::after { right: -4px; top: 50%; margin-top: -3px; border-bottom: none; border-left: none; } .hd-controls { position: absolute; bottom: 0; left: 40px; right: 0; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: rgba(19,23,34,0.9); opacity: 0; transition: opacity 0.3s; z-index: 12; } .help-demo:hover .hd-controls { opacity: 1; } /* AI Chat Demo */ .ai-chat-demo { overflow: hidden; border-radius: 10px; } .aid-panel { display: flex; flex-direction: column; height: 100%; background: #131722; position: relative; } .aid-header { padding: 10px 14px; font-size: 13px; color: #d1d4dc; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .aid-star { color: var(--accent, #2962ff); } .aid-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; } .aid-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .aid-messages::-webkit-scrollbar { width: 4px; } .aid-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; } .aid-msg { padding: 10px 14px; border-radius: 12px; font-size: 11px; line-height: 1.5; max-width: 92%; animation: aidFadeIn 0.3s; } .aid-msg-user { background: #69E1FB; color: #131722; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; } .aid-msg-ai { background: rgba(255,255,255,0.06); color: #d1d4dc; align-self: flex-start; border-bottom-left-radius: 4px; } .aid-typing-dots { display: flex; gap: 4px; padding: 12px 16px; } .aid-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #787b86; animation: aidBounce 1.2s infinite; } .aid-typing-dots span:nth-child(2) { animation-delay: 0.15s; } .aid-typing-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes aidBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } @keyframes aidFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .aid-input-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.06); } .aid-input { flex: 1; background: rgba(255,255,255,0.05); border-radius: 20px; padding: 8px 14px; font-size: 11px; color: #787b86; min-height: 16px; } .aid-send { width: 30px; height: 30px; border-radius: 50%; background: #69E1FB; color: #131722; display: flex; align-items: center; justify-content: center; font-size: 12px; } .aid-scene-label { display: none; } .aid-green { color: #4caf50; } .aid-cyan { color: #69E1FB; } .aid-dim { color: #787b86; font-size: 10px; } .aid-chart { background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px; margin: 6px 0; overflow: hidden; } .aid-chart-title { font-size: 9px; color: #787b86; margin-bottom: 4px; font-weight: 600; } .aid-indicators { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .aid-ind-row { font-size: 10px; display: flex; gap: 6px; align-items: center; } .aid-ind-label { font-weight: 600; color: #d1d4dc; min-width: 60px; } .aid-metrics { display: flex; gap: 8px; margin-bottom: 8px; } .aid-metric { flex: 1; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px; text-align: center; } .aid-metric-val { font-size: 13px; font-weight: 700; color: #d1d4dc; } .aid-metric-label { font-size: 9px; color: #787b86; margin-top: 2px; } .aid-order-confirm { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.08); } .aid-order-header { font-size: 12px; font-weight: 700; margin-bottom: 8px; } .aid-order-details { display: flex; flex-direction: column; gap: 4px; } .aid-order-row { display: flex; justify-content: space-between; font-size: 11px; } .aid-order-row span:first-child { color: #787b86; } .aid-order-status { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(76,175,80,0.1); font-size: 11px; font-weight: 600; text-align: center; } .aid-positions { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .aid-pos-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .aid-pos-sym { font-weight: 700; color: #d1d4dc; min-width: 40px; } /* AI Demo — Toolbar Intro Scene */ .aid-toolbar-scene { height: 100%; display: flex; flex-direction: column; background: #131722; position: relative; } .aid-mini-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #1e222d; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 11px; color: #d1d4dc; } .aid-tb-logo { display: flex; align-items: center; } .aid-tb-sym { font-weight: 700; font-size: 12px; } .aid-tb-search { display: flex; align-items: center; margin-left: -2px; } .aid-tb-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.08); flex-shrink: 0; } .aid-tb-item { color: #787b86; font-size: 10px; display: flex; align-items: center; gap: 3px; white-space: nowrap; } .aid-tb-spacer { flex: 1; } .aid-tb-ai { color: #69E1FB; font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: all 0.2s; font-weight: bold; } .aid-tb-ai-pulse { animation: aidPulse 0.6s ease-in-out infinite; background: rgba(105,225,251,0.15); } .aid-tb-ai-clicked { background: rgba(105,225,251,0.25); transform: scale(0.9); } @keyframes aidPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } .aid-tb-clock { color: #787b86; font-size: 10px; white-space: nowrap; } .aid-mini-info { padding: 3px 10px; font-size: 9px; color: #787b86; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; overflow: hidden; } .aid-mini-chart { flex: 1; position: relative; overflow: hidden; background: #131722; } .aid-mini-chart svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } .aid-callout { position: absolute; top: 50px; right: 60px; background: #69E1FB; color: #131722; padding: 8px 14px; border-radius: 8px; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity 0.4s; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .aid-callout::after { content: ''; position: absolute; top: -5px; right: 24px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #69E1FB; } @keyframes aidSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .hd-play-pause { background: none; border: none; color: #787b86; cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; } .hd-play-pause:hover { color: #d1d4dc; } .hd-slider { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #2a2e39; border-radius: 2px; outline: none; cursor: pointer; } .hd-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #2962ff; cursor: pointer; } .hd-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #2962ff; border: none; cursor: pointer; } .hd-step-label { font-size: 10px; color: #787b86; flex-shrink: 0; min-width: 28px; text-align: right; } /* ═══ AI ASSISTANT PANEL ═══ */ /* Right-side chat panel for AI-powered analysis; z-index 800, 420px wide. * Contains message thread, input area, and suggestion chips. */ .tb-item.tb-ai-btn { color: #69E1FB; } .tb-item.tb-ai-btn:hover { color: #9aeeff; background: rgba(105,225,251,0.1); } #aiAssistantPanel { display: none; position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--bg-surface, #1e222d); border-left: 1px solid var(--border-primary, #2a2e39); z-index: 800; box-shadow: -4px 0 16px rgba(0,0,0,0.3); font-family: Inter, -apple-system, system-ui, sans-serif; flex-direction: column; animation: csSlideIn 0.2s ease-out; } #aiAssistantPanel.open { display: flex; } .ai-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-primary, #2a2e39); flex-shrink: 0; } .ai-header-title, .ai-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #d1d4dc); display: flex; align-items: center; gap: 8px; } .ai-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; flex-shrink: 0; cursor: default; } .ai-status-dot.disconnected { background: #787b86; } .ai-status-dot.partial { background: #f0a830; } .ai-provider-tabs { display: flex; gap: 4px; margin: 0 20px 16px; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 3px; } .ai-provider-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; border: none; border-radius: 6px; background: none; color: #787b86; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .ai-provider-tab:hover { background: rgba(255,255,255,0.06); color: #d1d4dc; } .ai-provider-tab.active { background: rgba(255,255,255,0.1); color: #d1d4dc; } .ai-tab-badge { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(76,175,80,0.2); color: #4caf50; font-weight: 700; } .ai-tab-connected { color: #4caf50; font-size: 8px; margin-left: 2px; } .ai-provider-setup { padding: 0 20px; } .ai-settings-label { padding: 8px 14px; font-size: 11px; color: #787b86; border-bottom: 1px solid rgba(255,255,255,0.06); } .ai-settings-menu { position: absolute; right: 0; top: 100%; background: #1e222d; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 4px 0; z-index: 10; min-width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .ai-settings-item { padding: 8px 14px; font-size: 12px; color: #d1d4dc; cursor: pointer; white-space: nowrap; } .ai-settings-item:hover { background: rgba(255,255,255,0.06); } .ai-header-actions { display: flex; gap: 4px; align-items: center; position: relative; } .ai-header-actions button { background: none; border: none; color: var(--text-secondary, #787b86); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .ai-header-actions button:hover { color: var(--text-primary, #d1d4dc); background: rgba(255,255,255,0.06); } .ai-setup { padding: 20px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; } .ai-setup-hero { text-align: center; padding: 20px 10px 24px; } .ai-setup-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #d1d4dc); margin-bottom: 8px; } .ai-setup-desc { font-size: 12.5px; color: var(--text-secondary, #787b86); line-height: 1.6; max-width: 320px; margin: 0 auto; } .ai-oauth-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; border: 1px solid var(--border-primary, #2a2e39); border-radius: 10px; background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; margin-bottom: 10px; } .ai-oauth-btn:hover { background: #f1f3f4; border-color: #dadce0; } .ai-oauth-btn:active { transform: scale(0.99); } .ai-oauth-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ai-oauth-btn span:first-of-type { flex: 1; text-align: left; } .ai-oauth-badge { font-size: 10px; background: #e8f0fe; color: #1a73e8; padding: 3px 8px; border-radius: 4px; font-weight: 700; } .ai-oauth-google { border-color: #dadce0; } .ai-oauth-google:hover { border-color: #4285f4; background: #f1f3f4; } .ai-oauth-btn { text-decoration: none; } .ai-key-paste { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .ai-key-paste .ai-input { flex: 1; font-size: 12px; } .ai-setup-powered { text-align: center; font-size: 11px; color: var(--text-secondary, #787b86); margin-top: 14px; line-height: 1.5; } .ai-setup-footer { margin-top: auto; padding-top: 20px; } .ai-setup-features { display: flex; flex-direction: column; gap: 8px; } .ai-feature-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary, #787b86); } .ai-feature-item svg { color: #4caf50; flex-shrink: 0; } .ai-connect-error { font-size: 11px; color: #f44336; } .ai-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; } .ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .ai-welcome { text-align: center; padding: 40px 20px; color: var(--text-secondary, #787b86); } .ai-welcome svg { width: 48px; height: 48px; fill: var(--text-secondary, #787b86); opacity: 0.4; margin-bottom: 12px; } .ai-welcome p { font-size: 13px; line-height: 1.6; margin: 0; } .ai-welcome-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .ai-welcome-suggestions button { background: rgba(255,255,255,0.04); border: 1px solid var(--border-primary, #2a2e39); color: var(--text-primary, #d1d4dc); font-size: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.15s; } .ai-welcome-suggestions button:hover { background: rgba(255,255,255,0.08); } .ai-msg-user { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent, #69E1FB); color: #131722; font-size: 13px; line-height: 1.5; } .ai-msg-assistant { align-self: flex-start; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,0.06); color: var(--text-primary, #d1d4dc); font-size: 13px; line-height: 1.5; } /* Rich AI response components */ .ai-r-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .ai-r-metric { flex: 1; min-width: 70px; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px; text-align: center; } .ai-r-metric-val { font-size: 14px; font-weight: 700; color: #d1d4dc; } .ai-r-metric-label { font-size: 9px; color: #787b86; margin-top: 2px; } .ai-r-indicators { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; } .ai-r-ind-row { font-size: 11px; display: flex; gap: 6px; align-items: center; } .ai-r-ind-label { font-weight: 600; color: #d1d4dc; min-width: 65px; } .ai-r-table-wrap { margin: 8px 0; overflow-x: auto; } .ai-r-table { width: 100%; border-collapse: collapse; font-size: 11px; } .ai-r-table th { text-align: left; padding: 5px 8px; color: #787b86; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 10px; } .ai-r-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); } .ai-r-code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; font-size: 11px; } .ai-r-list { margin: 6px 0; padding-left: 16px; } .ai-r-list li { margin: 2px 0; font-size: 12px; } .ai-r-verdict { margin-top: 8px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 3px solid; font-size: 12px; } .ai-r-verdict .aid-green { border-color: #4caf50; } .ai-r-verdict .aid-red { border-color: #f44336; } .ai-r-verdict .aid-cyan { border-color: #69E1FB; } .ai-msg-assistant .aid-green { color: #4caf50; } .ai-msg-assistant .aid-red { color: #f44336; } .ai-msg-assistant .aid-cyan { color: #69E1FB; } .ai-msg-assistant .aid-dim { color: #787b86; font-size: 10px; } .ai-welcome-examples { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; width: 100%; max-width: 280px; } .ai-welcome-example { padding: 8px 14px; border-radius: 10px; font-size: 12px; color: #d1d4dc; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); transition: all 0.15s; text-align: left; } .ai-welcome-example:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } .ai-tool-call { align-self: flex-start; max-width: 85%; border: 1px solid var(--border-primary, #2a2e39); border-radius: 8px; overflow: hidden; font-size: 12px; } .ai-tool-call-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: var(--text-secondary, #787b86); background: rgba(255,255,255,0.03); } .ai-tool-call-header:hover { background: rgba(255,255,255,0.06); } .ai-tool-call-body { display: none; padding: 8px 12px; border-top: 1px solid var(--border-primary, #2a2e39); font-family: monospace; font-size: 11px; color: var(--text-secondary, #787b86); max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } .ai-tool-call.expanded .ai-tool-call-body { display: block; } .ai-typing { display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary, #787b86); animation: aiTypingBounce 1.2s infinite; } .ai-typing span:nth-child(2) { animation-delay: 0.2s; } .ai-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes aiTypingBounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } } .ai-input-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-primary, #2a2e39); flex-shrink: 0; } .ai-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border-primary, #2a2e39); border-radius: 20px; background: var(--bg-primary, #131722); color: var(--text-primary, #d1d4dc); font-size: 13px; outline: none; } .ai-input:focus { border-color: var(--accent, #2962ff); } .ai-send-btn { background: var(--accent, #69E1FB); border: none; color: #131722; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; } .ai-send-btn:hover { opacity: 0.85; } .ai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Scripting help demo */ .sc-demo-layout { display: flex; flex: 1; min-height: 0; gap: 0; } .sc-editor-pane { flex: 0 0 52%; display: flex; flex-direction: column; border-right: 1px solid #2a2e39; } .sc-chart-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; } .sc-editor-tabs { display: flex; align-items: center; gap: 0; padding: 0 8px; height: 28px; background: #1e222d; border-bottom: 1px solid #2a2e39; font-size: 11px; } .sc-tab { padding: 4px 10px; color: #787b86; cursor: default; border-bottom: 2px solid transparent; } .sc-tab.active { color: #d1d4dc; border-bottom-color: #2962ff; } .sc-tab-spacer { flex: 1; } .sc-lang-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: linear-gradient(135deg, #306998, #ffd43b); color: #fff; letter-spacing: 0.3px; } .sc-lang-badge.sc-pine-badge { background: linear-gradient(135deg, #1a73e8, #4caf50); } .sc-code-area { flex: 1; display: flex; overflow: hidden; background: #131722; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px; line-height: 1.6; } .sc-line-nums { padding: 6px 6px 6px 4px; color: #4a4e59; text-align: right; min-width: 22px; user-select: none; border-right: 1px solid #2a2e39; font-size: 10px; line-height: 1.6; } .sc-code { flex: 1; padding: 6px 8px; margin: 0; color: #d1d4dc; white-space: pre; overflow: hidden; } .sc-code-line { white-space: pre; } .sc-kw { color: #c678dd; } .sc-str { color: #98c379; } .sc-num { color: #e5c07b; } .sc-cmt { color: #5c6370; font-style: italic; } .sc-editor-footer { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-top: 1px solid #2a2e39; background: #1e222d; } .sc-btn-apply { padding: 3px 12px; background: #2962ff; color: #fff; border: none; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: default; transition: all 0.15s; } .sc-btn-apply.sc-btn-flash { background: #1e53e5; box-shadow: 0 0 8px rgba(41,98,255,0.5); } .sc-btn-save { padding: 3px 10px; background: none; color: #787b86; border: 1px solid #363a45; border-radius: 3px; font-size: 10px; cursor: default; } .sc-status { margin-left: auto; font-size: 10px; } .sc-running { color: #f59e0b; } .sc-success { color: #26a69a; } .sc-chart-header { padding: 4px 8px; font-size: 11px; color: #787b86; border-bottom: 1px solid #2a2e39; background: #1e222d; } .sc-sym { color: #d1d4dc; font-weight: 700; } .sc-tf { color: #787b86; margin-left: 4px; } .sc-price { color: #26a69a; margin-left: 8px; } .sc-chart-canvas { flex: 1; background: #131722; overflow: hidden; } .sc-chip-bar { display: flex; gap: 4px; padding: 4px 6px; min-height: 22px; background: #1e222d; border-top: 1px solid #2a2e39; flex-wrap: wrap; } .sc-chip { font-size: 9px; padding: 1px 6px; border-radius: 3px; border: 1px solid; color: #d1d4dc; } .sc-chip.sc-pine { position: relative; } .sc-chip.sc-pine::before { content: 'Pine'; font-size: 7px; color: #4caf50; margin-right: 3px; } .sc-scene-label { text-align: center; padding: 4px 0; font-size: 11px; color: #787b86; font-weight: 600; letter-spacing: 0.5px; background: #1e222d; border-top: 1px solid #2a2e39; } /* ═══ FUNDAMENTALS PANEL ═══ */ /* Right-side panel showing financial data (earnings, ratios, etc.); * z-index 510, 380px wide with tabbed sections. */ .fund-panel { position: fixed; top: var(--toolbar-height, 38px); right: 0; bottom: 0; width: 380px; background: var(--bg-primary, #1e222d); border-left: 1px solid var(--border-primary, #2a2e39); z-index: 510; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .fund-panel.open { transform: translateX(0); } .fund-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border-primary, #2a2e39); font-size: 13px; font-weight: 600; color: var(--text-primary, #d1d4dc); } .fund-title { white-space: nowrap; } .fund-symbol { font-size: 12px; color: var(--accent, #2962ff); margin-left: auto; } .fund-close { background: none; border: none; color: var(--text-secondary, #787b86); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; } .fund-close:hover { color: var(--text-primary, #d1d4dc); } .fund-tabs { display: flex; border-bottom: 1px solid var(--border-primary, #2a2e39); padding: 0 8px; gap: 0; } .fund-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary, #787b86); font-size: 11px; padding: 8px 10px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .fund-tab:hover { color: var(--text-primary, #d1d4dc); } .fund-tab.active { color: var(--accent, #2962ff); border-bottom-color: var(--accent, #2962ff); } .fund-body { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; } .fund-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; color: var(--text-secondary, #787b86); font-size: 12px; } .fund-spinner { width: 24px; height: 24px; border: 2px solid var(--border-primary, #2a2e39); border-top-color: var(--accent, #2962ff); border-radius: 50%; animation: fund-spin 0.8s linear infinite; } @keyframes fund-spin { to { transform: rotate(360deg); } } .fund-section { margin-bottom: 16px; } .fund-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #787b86); margin-bottom: 8px; } .fund-table { width: 100%; border-collapse: collapse; font-size: 12px; } .fund-table th { text-align: left; padding: 4px 8px 4px 0; color: var(--text-secondary, #787b86); font-weight: 500; font-size: 11px; border-bottom: 1px solid var(--border-primary, #2a2e39); } .fund-table td { padding: 5px 8px 5px 0; color: var(--text-primary, #d1d4dc); border-bottom: 1px solid rgba(42,46,57,0.4); } .fund-table tr:last-child td { border-bottom: none; } .fund-val-pos { color: #26a69a; } .fund-val-neg { color: #ef5350; } .fund-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; } .fund-badge-buy { background: rgba(38,166,154,0.15); color: #26a69a; } .fund-badge-sell { background: rgba(239,83,80,0.15); color: #ef5350; } .fund-badge-hold { background: rgba(120,123,134,0.15); color: #787b86; } .fund-empty { color: var(--text-secondary, #787b86); font-size: 12px; text-align: center; padding: 30px 0; } .fund-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; border-bottom: 1px solid rgba(42,46,57,0.3); } .fund-kv:last-child { border-bottom: none; } .fund-kv-label { color: var(--text-secondary, #787b86); } /* ═══ ORDER DRAWER ═══ */ /* Right-side slide-out for buy/sell order entry; z-index 800, 360px wide. * Contains account selector, order type tabs, quantity/price inputs. */ #orderDrawer { position: fixed; right: 0; top: var(--toolbar-height, 38px); bottom: 0; width: 360px; background: var(--bg-surface); border-left: 1px solid var(--border-primary); box-shadow: -8px 0 32px rgba(0,0,0,0.45); display: flex; flex-direction: column; z-index: 800; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } #orderDrawer.open { transform: translateX(0); } @keyframes odSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .od-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .od-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .od-account-row { display: flex; align-items: center; gap: 8px; } .od-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; } .od-account-name { font-size: 12px; font-weight: 600; color: var(--text-primary); } .od-account-broker { font-size: 10px; color: var(--text-secondary); text-transform: capitalize; margin-top: 1px; } .od-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 22px; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.12s, background 0.12s; flex-shrink: 0; } .od-close:hover { color: var(--text-primary); background: var(--bg-hover-strong); } .od-symbol-row { display: flex; align-items: baseline; gap: 6px; } .od-symbol { font-size: 18px; font-weight: 700; color: var(--text-primary); } .od-symbol-exch { font-size: 11px; color: var(--text-secondary); } /* Price strip */ .od-prices { display: flex; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .od-price-item { flex: 1; padding: 10px 0; text-align: center; border-right: 1px solid var(--border-primary); } .od-price-item:last-child { border-right: none; } .od-price-label { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-secondary); text-transform: uppercase; display: block; margin-bottom: 4px; } .od-price-val { font-size: 13px; font-weight: 600; color: #53b1fd; } /* ── Shared QTY bar ───────────────────────────────────────────────────────── */ .od-qty-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .od-qty-toggle { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 0; border-radius: 4px; border: 1px solid var(--border-primary); width: 73px; text-align: center; cursor: pointer; background: var(--bg-surface); color: var(--text-secondary); transition: background 0.12s, color 0.12s; flex-shrink: 0; box-sizing: border-box; } .od-qty-toggle.active { background: #26a69a; color: #000; border-color: #26a69a; } /* Qty input with floating label — same pattern as price inputs */ .od-qty-input-wrap { position: relative; flex: 1; min-width: 0; } .od-qty-input { width: 100%; height: 40px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 5px; color: var(--text-primary); font-size: 13px; font-weight: 500; padding: 17px 8px 5px 8px; box-sizing: border-box; font-family: inherit; transition: border-color 0.12s; } .od-qty-input:focus { outline: none; border-color: var(--accent); } .od-qty-input-wrap:focus-within .od-price-float-lbl { color: var(--accent); } /* ── Three order rows (BUY / SELL / STOP) ────────────────────────────────── */ .od-order-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } /* Disabled rows keep full opacity — checkbox controls whether the order is sent */ .od-order-check { width: 15px; height: 15px; accent-color: #90caf9; flex-shrink: 0; cursor: pointer; margin: 0; } .od-side-btn { width: 52px; padding: 6px 0; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; border: none; cursor: default; flex-shrink: 0; text-align: center; color: #000; } .od-side-btn.buy { background: #26a69a; } .od-side-btn.sell { background: #F05350; } .od-side-btn.stop { background: #F05350; } /* Price input with floating label (matches main app OutlineInputBorder + labelText) */ .od-price-wrap { position: relative; flex: 1; min-width: 0; } .od-price-float-lbl { position: absolute; top: 5px; left: 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); pointer-events: none; z-index: 1; line-height: 1; } .od-row-price { width: 100%; height: 40px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 5px; color: var(--text-primary); font-size: 13px; font-weight: 500; padding: 17px 8px 5px 8px; box-sizing: border-box; font-family: inherit; transition: border-color 0.12s; } .od-row-price:focus { outline: none; border-color: var(--accent); } /* Focused label turns accent color */ .od-price-wrap:focus-within .od-price-float-lbl { color: var(--accent); } /* Native select — simple, reliable cross-platform */ .od-row-select { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 5px; color: var(--text-primary); font-size: 11px; font-weight: 700; padding: 5px 4px; cursor: pointer; font-family: inherit; transition: border-color 0.12s; flex-shrink: 0; width: 62px; min-width: 62px; height: 40px; box-sizing: border-box; } .od-row-select:focus { outline: none; border-color: var(--accent); } /* ── Totals strip (matches main app's Material card with spaceEvenly layout) ── */ .od-totals-strip { display: flex; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; background: var(--bg-surface); } .od-total-item { flex: 1; padding: 9px 4px; text-align: center; border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .od-total-item:last-child { border-right: none; } .od-total-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .od-total-val { font-size: 13px; font-weight: 700; color: #53b1fd; white-space: nowrap; } /* Place Order button */ .od-place-btn { display: block; width: 100%; padding: 14px 0; border-radius: 8px; border: none; font-size: 13px; font-weight: 800; letter-spacing: 0.8px; cursor: pointer; margin-bottom: 10px; transition: filter 0.15s, opacity 0.15s; } .od-place-btn:hover:not(:disabled) { filter: brightness(1.1); } .od-place-btn:active:not(:disabled) { filter: brightness(0.9); } .od-place-btn:disabled { opacity: 0.65; cursor: default; } .od-place-btn { background: #448aff; color: #0d1117; } /* Order placement in-progress pill — matches Flutter SpinKitDoubleBounce */ @keyframes od-double-bounce { 0%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; } } .od-loading-pill { width: 100%; height: 50px; border-radius: 25px; background: #111; position: relative; margin-bottom: 10px; } .od-bounce { width: 32px; height: 32px; border-radius: 50%; background: #26a69a; position: absolute; top: 50%; left: 50%; animation: od-double-bounce 2s ease-in-out infinite; } .od-bounce2 { animation-delay: -1s; } /* ── Goldring date + routing rows ────────────────────────────────────────── */ .od-row-extra { padding: 8px 16px; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .od-date-btn { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; border: none; } .od-routing-inner { display: flex; align-items: center; gap: 10px; } .od-routing-label { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); flex-shrink: 0; } .od-routing-select { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 5px; color: var(--text-primary); font-size: 13px; padding: 7px 8px; cursor: pointer; font-family: inherit; } .od-routing-select:focus { outline: none; border-color: var(--accent); } /* KPI row (investment / buying power) — same flat style as price strip */ .od-kpi { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border-primary); } .od-kpi-item { flex: 1; padding: 9px 0; text-align: center; border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; gap: 3px; } .od-kpi-item:last-child { border-right: none; } .od-kpi-loading { opacity: 0.5; } /* POS badge in qty row */ .od-row-qty { align-items: flex-end; } .od-pos-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 130px; min-width: 130px; flex-shrink: 0; box-sizing: border-box; } .od-pos-label { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-secondary); text-transform: uppercase; } .od-pos-val { font-size: 13px; font-weight: 700; color: #53b1fd; } /* Footer */ .od-footer { padding: 12px 16px 20px; flex-shrink: 0; border-top: 1px solid var(--border-primary); } .od-slide-wrap { position: relative; height: 56px; border-radius: 28px; overflow: hidden; background: var(--border-primary); border: 1px solid var(--border-subtle); user-select: none; -webkit-user-select: none; } .od-slide-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 28px; transition: width 0.05s; pointer-events: none; } .od-slide-fill.buy { background: rgba(38,166,154,0.35); } .od-slide-fill.sell { background: rgba(239,83,80,0.35); } .od-slide-fill.stop { background: rgba(240,83,80,0.35); } .od-slide-fill.multi { background: rgba(68,138,255,0.35); } .od-slide-thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; cursor: grab; transition: left 0.05s; z-index: 2; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.4); } .od-slide-thumb.buy { background: #26a69a; color: #fff; } .od-slide-thumb.sell { background: #F05350; color: #fff; } .od-slide-thumb.stop { background: #F05350; color: #fff; } .od-slide-thumb.multi { background: #448aff; color: #fff; } .od-slide-thumb:active { cursor: grabbing; } .od-slide-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: rgba(255,255,255,0.55); pointer-events: none; transition: opacity 0.15s; padding-left: 56px; } .od-slide-wrap.confirming .od-slide-text { opacity: 0; } .od-slide-wrap.loading .od-slide-thumb { cursor: default; } .od-slide-wrap.loading .od-slide-text { opacity: 1; color: var(--text-primary); padding-left: 0; } .od-slide-wrap.done .od-slide-text { color: #26a69a; padding-left: 0; } /* Success banner at bottom of screen */ .od-success-banner { position: fixed; bottom: 0; left: 0; right: 360px; z-index: 810; background: rgba(38,166,154,0.92); backdrop-filter: blur(4px); padding: 14px 20px; display: flex; align-items: center; gap: 10px; animation: odBannerIn 0.3s ease-out; } .od-success-banner.sell-banner { background: rgba(239,83,80,0.92); } @keyframes odBannerIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .od-banner-text { font-size: 14px; font-weight: 700; color: #000; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { #orderDrawer { width: 100%; top: 0; } .od-success-banner { right: 0; } } /* Light theme overrides for order drawer */ body.light-theme #orderDrawer { background: #fff; border-color: #e0e3eb; box-shadow: -8px 0 32px rgba(0,0,0,0.12); } body.light-theme .od-header { border-color: #e0e3eb; } body.light-theme .od-account-name { color: #131722; } body.light-theme .od-account-broker { color: #787b86; } body.light-theme .od-close { color: #787b86; } body.light-theme .od-close:hover { color: #131722; background: rgba(0,0,0,0.06); } body.light-theme .od-symbol { color: #131722; } body.light-theme .od-symbol-exch { color: #787b86; } body.light-theme .od-prices { border-color: #e0e3eb; } body.light-theme .od-price-item { border-color: #e0e3eb; } body.light-theme .od-price-label { color: #787b86; } body.light-theme .od-kpi { border-color: #e0e3eb; } body.light-theme .od-kpi-item { border-color: #e0e3eb; } body.light-theme .od-pos-val { color: var(--accent-light); } body.light-theme .od-footer { border-color: #e0e3eb; } body.light-theme .od-slide-wrap { background: #e0e3eb; border-color: #c8ccd8; } body.light-theme .od-slide-text { color: rgba(0,0,0,0.45); } body.light-theme .od-qty-bar { border-color: #e0e3eb; } body.light-theme .od-qty-toggle { border-color: #e0e3eb; color: #787b86; } body.light-theme .od-qty-toggle.active { color: #000; border-color: #26a69a; } body.light-theme .od-qty-input { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } body.light-theme .od-qty-input-wrap:focus-within .od-price-float-lbl { color: #26a69a; } body.light-theme .od-order-row { border-color: #e0e3eb; } body.light-theme .od-price-float-lbl { color: #787b86; } body.light-theme .od-price-wrap:focus-within .od-price-float-lbl { color: #26a69a; } body.light-theme .od-row-price { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } body.light-theme .od-row-select { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } body.light-theme .od-totals-strip { background: #f8f9fd; border-color: #e0e3eb; } body.light-theme .od-total-item { border-color: #e0e3eb; } body.light-theme .od-total-lbl { color: #787b86; } body.light-theme .od-row-extra { border-color: #e0e3eb; } body.light-theme .od-routing-label { color: #787b86; } body.light-theme .od-routing-select { background: #f4f5f8; border-color: #d0d3dd; color: #131722; } .fund-kv-value { color: var(--text-primary, #d1d4dc); font-weight: 500; } /* ═══ 24. Widget Mode ═══ */ /* Activated by ?mode=widget — only applies when body.widget-mode class is present. */ /* indicators and draw: icon only, hide text label */ body.widget-mode #indicatorChip .tb-label, body.widget-mode #drawChip .tb-label { display: none !important; }