/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */ /* ───────────── Палитры тем: 9 тёмных + 4 светлых ───────────── Каждая тема — блок [data-theme] на . Кроме базовых токенов палитры здесь описаны производные (hover-состояния, стеклянные фоны, тени) и полная карта цветов canvas-графиков (--ch-*) и формаций (--fm-*). Значения читает js/themes.js → Theme.chart(). */ :root, [data-theme="classic"] { color-scheme: dark; --bg: #09090f; --surface: #12121c; --nav-bg: rgba(18, 18, 28, 0.82); --surface-hover: #1a1a2a; --border: #28283e; --border-light: #36365a; --text-primary: #efeff6; --text-secondary: #8a8aaa; --text-muted: #55557a; --accent: #00d4aa; --accent-glow: rgba(0, 212, 170, 0.25); --accent-soft: rgba(0, 212, 170, 0.07); --accent-soft-2: rgba(0, 212, 170, 0.12); --selected-bg: rgba(0, 212, 170, 0.06); --positive: #00d4aa; --negative: #ff6b6b; --header-bg: rgba(9, 9, 15, 0.60); --panel-tint: rgba(255, 255, 255, 0.008); --sidebar-bg: rgba(18, 18, 28, 0.40); --grid-line: rgba(255, 255, 255, 0.008); --overlay-bg: rgba(4, 4, 9, 0.72); --popup-bg: rgba(23, 23, 36, 0.95); --menu-bg: rgba(23, 23, 36, 0.50); --menu-hover: rgba(255, 255, 255, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.34); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.24), 0 20px 52px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(255, 255, 255, 0.90); --swatch-border: rgba(255, 255, 255, 0.25); --swatch-none-bg: rgba(18, 18, 28, 0.92); --swatch-glow: rgba(255, 255, 255, 0.40); --ch-bg: #12121c; --ch-axis-text: rgba(255, 255, 255, 0.40); --ch-axis-line: rgba(255, 255, 255, 0.06); --ch-vol-up: rgba(255, 255, 255, 0.20); --ch-vol-dn: rgba(255, 255, 255, 0.08); --ch-up: #ffffff; --ch-down: rgba(255, 255, 255, 0.70); --ch-line: rgba(255, 255, 255, 0.85); --ch-line-dot: rgba(255, 255, 255, 0.55); --ch-signal-bg: #ffffff; --ch-signal-fg: #0d0d16; --ch-price-label-bg: #00d4aa; --ch-price-label-fg: #12121c; --ch-price-line: rgba(0, 212, 170, 0.40); --ch-legend-label: rgba(255, 255, 255, 0.38); --ch-legend-val: rgba(255, 255, 255, 0.88); --ch-center-msg: rgba(255, 255, 255, 0.30); --ch-zone: rgba(255, 255, 255, 0.10); --ch-zone-stroke: rgba(255, 255, 255, 0.38); --ch-zone-draft: rgba(255, 255, 255, 0.14); --ch-zone-draft-stroke: rgba(255, 255, 255, 0.65); --fm-cascade: #FFC447; --fm-choch: #C792EA; --fm-retest: #FFD60A; --fm-breakout-long: #A3E635; --fm-breakout-short: #F87171; --ch-alert: #38BDF8; } /* ─── Канонические цвета линий формаций: НЕ зависят от темы ─── Canvas всегда красит уровни/каскады/сломы/ретесты этими значениями (FM_COLORS в js/formations.js — «единая палитра во всех темах»). Исключение — трендовые: они «белые» темы (var(--ch-up)). FAQ-легенда (ПК sidemenu.js и Lite mobile.html) ссылается сюда, а не на --positive/--negative темы: в Retro ink, например, --positive оранжевый, а истинный цвет уровня над ценой — этот зелёный. */ :root { --fm-c-long: #34D399; /* уровень/каскад над ценой (лонг), ▲ пробоя */ --fm-c-short: #F87171; /* уровень/каскад под ценой (шорт) */ --fm-c-choch: #C792EA; /* слом структуры (ChoCh) */ --fm-c-retest: #FFD60A; /* ретест, ◇ ромб */ } [data-theme="oled"] { color-scheme: dark; --bg: #000000; --surface: #0D0D0D; --nav-bg: rgba(13, 13, 13, 0.82); --surface-hover: #181818; --border: #1F1F1F; --border-light: #303030; --text-primary: #F0F0F0; --text-secondary: #A6A6A6; --text-muted: #6E6E6E; --accent: #38BDF8; --accent-glow: rgba(56, 189, 248, 0.25); --accent-soft: rgba(56, 189, 248, 0.08); --accent-soft-2: rgba(56, 189, 248, 0.14); --selected-bg: rgba(56, 189, 248, 0.07); --positive: #34D399; --negative: #F87171; --header-bg: rgba(0, 0, 0, 0.65); --panel-tint: rgba(255, 255, 255, 0.012); --sidebar-bg: rgba(13, 13, 13, 0.45); --grid-line: rgba(255, 255, 255, 0.010); --overlay-bg: rgba(0, 0, 0, 0.72); --popup-bg: rgba(13, 13, 13, 0.95); --menu-bg: rgba(13, 13, 13, 0.60); --menu-hover: rgba(255, 255, 255, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.34); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.22), 0 20px 50px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(255, 255, 255, 0.85); --swatch-border: rgba(255, 255, 255, 0.30); --swatch-none-bg: rgba(13, 13, 13, 0.92); --swatch-glow: rgba(255, 255, 255, 0.40); --ch-bg: #0D0D0D; --ch-axis-text: rgba(240, 240, 240, 0.42); --ch-axis-line: rgba(240, 240, 240, 0.09); --ch-vol-up: rgba(240, 240, 240, 0.22); --ch-vol-dn: rgba(240, 240, 240, 0.09); --ch-up: #F0F0F0; --ch-down: rgba(240, 240, 240, 0.72); --ch-line: rgba(240, 240, 240, 0.85); --ch-line-dot: rgba(240, 240, 240, 0.55); --ch-signal-bg: #F0F0F0; --ch-signal-fg: #000000; --ch-price-label-bg: #38BDF8; --ch-price-label-fg: #000000; --ch-price-line: rgba(56, 189, 248, 0.40); --ch-legend-label: rgba(240, 240, 240, 0.40); --ch-legend-val: rgba(240, 240, 240, 0.88); --ch-center-msg: rgba(240, 240, 240, 0.30); --ch-zone: rgba(240, 240, 240, 0.10); --ch-zone-stroke: rgba(240, 240, 240, 0.38); --ch-zone-draft: rgba(240, 240, 240, 0.14); --ch-zone-draft-stroke: rgba(240, 240, 240, 0.65); --fm-cascade: #FFC447; --fm-choch: #C792EA; --fm-retest: #FFD60A; --fm-breakout-long: #A3E635; --fm-breakout-short: #F87171; --ch-alert: #38BDF8; } [data-theme="titanium"] { color-scheme: dark; --bg: #0F1115; --surface: #161920; --nav-bg: rgba(22, 25, 32, 0.82); --surface-hover: #1D212B; --border: #232733; --border-light: #353B4C; --text-primary: #E2E8F0; --text-secondary: #A3AEC2; --text-muted: #718096; --accent: #C0A062; --accent-glow: rgba(192, 160, 98, 0.25); --accent-soft: rgba(192, 160, 98, 0.08); --accent-soft-2: rgba(192, 160, 98, 0.14); --selected-bg: rgba(192, 160, 98, 0.08); --positive: #4ADE80; --negative: #F87171; --header-bg: rgba(15, 17, 21, 0.65); --panel-tint: rgba(255, 255, 255, 0.012); --sidebar-bg: rgba(22, 25, 32, 0.45); --grid-line: rgba(255, 255, 255, 0.012); --overlay-bg: rgba(8, 9, 12, 0.72); --popup-bg: rgba(22, 25, 32, 0.96); --menu-bg: rgba(22, 25, 32, 0.70); --menu-hover: rgba(255, 255, 255, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 26px rgba(0, 0, 0, 0.32); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.22), 0 20px 50px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(255, 255, 255, 0.80); --swatch-border: rgba(255, 255, 255, 0.28); --swatch-none-bg: rgba(22, 25, 32, 0.92); --swatch-glow: rgba(255, 255, 255, 0.35); --ch-bg: #161920; --ch-axis-text: rgba(226, 232, 240, 0.45); --ch-axis-line: rgba(226, 232, 240, 0.09); --ch-vol-up: rgba(226, 232, 240, 0.22); --ch-vol-dn: rgba(226, 232, 240, 0.09); --ch-up: #E2E8F0; --ch-down: rgba(226, 232, 240, 0.72); --ch-line: rgba(226, 232, 240, 0.85); --ch-line-dot: rgba(226, 232, 240, 0.55); --ch-signal-bg: #E2E8F0; --ch-signal-fg: #0F1115; --ch-price-label-bg: #C0A062; --ch-price-label-fg: #0F1115; --ch-price-line: rgba(192, 160, 98, 0.40); --ch-legend-label: rgba(226, 232, 240, 0.42); --ch-legend-val: rgba(226, 232, 240, 0.90); --ch-center-msg: rgba(226, 232, 240, 0.32); --ch-zone: rgba(226, 232, 240, 0.10); --ch-zone-stroke: rgba(226, 232, 240, 0.40); --ch-zone-draft: rgba(226, 232, 240, 0.15); --ch-zone-draft-stroke: rgba(226, 232, 240, 0.65); --fm-cascade: #E0B15E; --fm-choch: #C792EA; --fm-retest: #FFD60A; --fm-breakout-long: #86EFAC; --fm-breakout-short: #FCA5A5; --ch-alert: #38BDF8; } [data-theme="quartz"] { color-scheme: dark; --bg: #0A0B10; --surface: #12131C; --nav-bg: rgba(18, 19, 28, 0.82); --surface-hover: #191B28; --border: #1E202E; --border-light: #30334A; --text-primary: #E6E8F2; --text-secondary: #A7ABC4; --text-muted: #6B708D; --accent: #818CF8; --accent-glow: rgba(129, 140, 248, 0.25); --accent-soft: rgba(129, 140, 248, 0.08); --accent-soft-2: rgba(129, 140, 248, 0.14); --selected-bg: rgba(129, 140, 248, 0.08); --positive: #34D399; --negative: #F87171; --header-bg: rgba(10, 11, 16, 0.65); --panel-tint: rgba(255, 255, 255, 0.012); --sidebar-bg: rgba(18, 19, 28, 0.45); --grid-line: rgba(230, 232, 242, 0.012); --overlay-bg: rgba(5, 6, 10, 0.72); --popup-bg: rgba(18, 19, 28, 0.96); --menu-bg: rgba(18, 19, 28, 0.70); --menu-hover: rgba(230, 232, 242, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.34); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.22), 0 20px 50px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(255, 255, 255, 0.85); --swatch-border: rgba(255, 255, 255, 0.30); --swatch-none-bg: rgba(18, 19, 28, 0.92); --swatch-glow: rgba(255, 255, 255, 0.40); --ch-bg: #12131C; --ch-axis-text: rgba(230, 232, 242, 0.45); --ch-axis-line: rgba(230, 232, 242, 0.09); --ch-vol-up: rgba(230, 232, 242, 0.22); --ch-vol-dn: rgba(230, 232, 242, 0.09); --ch-up: #E6E8F2; --ch-down: rgba(230, 232, 242, 0.72); --ch-line: rgba(230, 232, 242, 0.85); --ch-line-dot: rgba(230, 232, 242, 0.55); --ch-signal-bg: #E6E8F2; --ch-signal-fg: #0A0B10; --ch-price-label-bg: #818CF8; --ch-price-label-fg: #0A0B10; --ch-price-line: rgba(129, 140, 248, 0.40); --ch-legend-label: rgba(230, 232, 242, 0.42); --ch-legend-val: rgba(230, 232, 242, 0.90); --ch-center-msg: rgba(230, 232, 242, 0.32); --ch-zone: rgba(230, 232, 242, 0.10); --ch-zone-stroke: rgba(230, 232, 242, 0.40); --ch-zone-draft: rgba(230, 232, 242, 0.15); --ch-zone-draft-stroke: rgba(230, 232, 242, 0.65); --fm-cascade: #FFC447; --fm-choch: #C792EA; --fm-retest: #FFD60A; --fm-breakout-long: #A3E635; --fm-breakout-short: #F87171; --ch-alert: #38BDF8; } [data-theme="graphite"] { color-scheme: dark; --bg: #121212; --surface: #1A1A1A; --nav-bg: rgba(26, 26, 26, 0.82); --surface-hover: #232323; --border: #262626; --border-light: #383838; --text-primary: #E5E5E5; --text-secondary: #A3A3A3; --text-muted: #737373; --accent: #A3E635; --accent-glow: rgba(163, 230, 53, 0.22); --accent-soft: rgba(163, 230, 53, 0.08); --accent-soft-2: rgba(163, 230, 53, 0.14); --selected-bg: rgba(163, 230, 53, 0.07); --positive: #A3E635; --negative: #FF6B6B; --header-bg: rgba(18, 18, 18, 0.65); --panel-tint: rgba(255, 255, 255, 0.014); --sidebar-bg: rgba(26, 26, 26, 0.45); --grid-line: rgba(255, 255, 255, 0.014); --overlay-bg: rgba(0, 0, 0, 0.72); --popup-bg: rgba(26, 26, 26, 0.96); --menu-bg: rgba(26, 26, 26, 0.70); --menu-hover: rgba(255, 255, 255, 0.07); --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.34); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.22), 0 20px 50px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(255, 255, 255, 0.80); --swatch-border: rgba(255, 255, 255, 0.28); --swatch-none-bg: rgba(26, 26, 26, 0.92); --swatch-glow: rgba(255, 255, 255, 0.35); --ch-bg: #1A1A1A; --ch-axis-text: rgba(229, 229, 229, 0.45); --ch-axis-line: rgba(229, 229, 229, 0.09); --ch-vol-up: rgba(229, 229, 229, 0.22); --ch-vol-dn: rgba(229, 229, 229, 0.09); --ch-up: #E5E5E5; --ch-down: rgba(229, 229, 229, 0.72); --ch-line: rgba(229, 229, 229, 0.85); --ch-line-dot: rgba(229, 229, 229, 0.55); --ch-signal-bg: #E5E5E5; --ch-signal-fg: #121212; --ch-price-label-bg: #A3E635; --ch-price-label-fg: #121212; --ch-price-line: rgba(163, 230, 53, 0.40); --ch-legend-label: rgba(229, 229, 229, 0.42); --ch-legend-val: rgba(229, 229, 229, 0.90); --ch-center-msg: rgba(229, 229, 229, 0.32); --ch-zone: rgba(229, 229, 229, 0.10); --ch-zone-stroke: rgba(229, 229, 229, 0.40); --ch-zone-draft: rgba(229, 229, 229, 0.15); --ch-zone-draft-stroke: rgba(229, 229, 229, 0.65); --fm-cascade: #FFC447; --fm-choch: #C792EA; --fm-retest: #FFD60A; --fm-breakout-long: #4ADE80; --fm-breakout-short: #EF4444; --ch-alert: #38BDF8; } [data-theme="eink"] { color-scheme: light; --bg: #F7F7F7; --surface: #FFFFFF; --surface-hover: #EFEFEF; --nav-bg: rgba(255, 255, 255, 0.82); --border: #E6E6E6; --border-light: #CFCFCF; --text-primary: #0A0A0A; --text-secondary: #4A4A4A; --text-muted: #737373; --accent: #000000; --accent-glow: rgba(0, 0, 0, 0.15); --accent-soft: rgba(0, 0, 0, 0.05); --accent-soft-2: rgba(0, 0, 0, 0.09); --selected-bg: rgba(0, 0, 0, 0.05); --positive: #166534; --negative: #B91C1C; --header-bg: rgba(247, 247, 247, 0.78); --panel-tint: rgba(0, 0, 0, 0.015); --sidebar-bg: rgba(255, 255, 255, 0.55); --grid-line: rgba(0, 0, 0, 0.025); --overlay-bg: rgba(20, 20, 20, 0.35); --popup-bg: rgba(255, 255, 255, 0.97); --menu-bg: rgba(255, 255, 255, 0.92); --menu-hover: rgba(0, 0, 0, 0.06); --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 0, 0, 0.13); --chip-ring-outline: rgba(0, 0, 0, 0.60); --swatch-border: rgba(0, 0, 0, 0.30); --swatch-none-bg: rgba(255, 255, 255, 0.95); --swatch-glow: rgba(0, 0, 0, 0.30); --ch-bg: #FFFFFF; --ch-axis-text: rgba(10, 10, 10, 0.55); --ch-axis-line: rgba(10, 10, 10, 0.10); --ch-vol-up: rgba(10, 10, 10, 0.35); --ch-vol-dn: rgba(10, 10, 10, 0.15); --ch-up: #0A0A0A; --ch-down: rgba(10, 10, 10, 0.75); --ch-line: rgba(10, 10, 10, 0.85); --ch-line-dot: rgba(10, 10, 10, 0.50); --ch-signal-bg: #0A0A0A; --ch-signal-fg: #FFFFFF; --ch-price-label-bg: #0A0A0A; --ch-price-label-fg: #FFFFFF; --ch-price-line: rgba(10, 10, 10, 0.40); --ch-legend-label: rgba(10, 10, 10, 0.45); --ch-legend-val: rgba(10, 10, 10, 0.90); --ch-center-msg: rgba(10, 10, 10, 0.35); --ch-zone: rgba(10, 10, 10, 0.08); --ch-zone-stroke: rgba(10, 10, 10, 0.40); --ch-zone-draft: rgba(10, 10, 10, 0.12); --ch-zone-draft-stroke: rgba(10, 10, 10, 0.60); --fm-cascade: #B45309; --fm-choch: #6D28D9; --fm-retest: #CA8A04; --fm-breakout-long: #65A30D; --fm-breakout-short: #DC2626; --ch-alert: #38BDF8; } [data-theme="alabaster"] { color-scheme: light; --bg: #F9F9F8; --surface: #F3F3EF; --nav-bg: rgba(243, 243, 239, 0.82); --surface-hover: #EAEAE4; --border: #E2E2DC; --border-light: #C9C9C0; --text-primary: #1A1C1A; --text-secondary: #5B5E56; --text-muted: #82827C; --accent: #4A5D4E; --accent-glow: rgba(74, 93, 78, 0.22); --accent-soft: rgba(74, 93, 78, 0.08); --accent-soft-2: rgba(74, 93, 78, 0.14); --selected-bg: rgba(74, 93, 78, 0.08); --positive: #2F7D4F; --negative: #C24C4C; --header-bg: rgba(249, 249, 248, 0.78); --panel-tint: rgba(0, 0, 0, 0.012); --sidebar-bg: rgba(243, 243, 239, 0.55); --grid-line: rgba(26, 28, 26, 0.020); --overlay-bg: rgba(30, 32, 30, 0.35); --popup-bg: rgba(243, 243, 239, 0.97); --menu-bg: rgba(243, 243, 239, 0.92); --menu-hover: rgba(26, 28, 26, 0.06); --shadow: 0 1px 2px rgba(40, 42, 38, 0.05), 0 6px 20px rgba(40, 42, 38, 0.08); --shadow-hover: 0 2px 6px rgba(40, 42, 38, 0.06), 0 18px 44px rgba(40, 42, 38, 0.13); --chip-ring-outline: rgba(26, 28, 26, 0.55); --swatch-border: rgba(0, 0, 0, 0.25); --swatch-none-bg: rgba(243, 243, 239, 0.95); --swatch-glow: rgba(0, 0, 0, 0.25); --ch-bg: #F3F3EF; --ch-axis-text: rgba(26, 28, 26, 0.55); --ch-axis-line: rgba(26, 28, 26, 0.10); --ch-vol-up: rgba(26, 28, 26, 0.35); --ch-vol-dn: rgba(26, 28, 26, 0.15); --ch-up: #1A1C1A; --ch-down: rgba(26, 28, 26, 0.75); --ch-line: rgba(26, 28, 26, 0.85); --ch-line-dot: rgba(26, 28, 26, 0.50); --ch-signal-bg: #1A1C1A; --ch-signal-fg: #F3F3EF; --ch-price-label-bg: #1A1C1A; --ch-price-label-fg: #F3F3EF; --ch-price-line: rgba(26, 28, 26, 0.40); --ch-legend-label: rgba(26, 28, 26, 0.45); --ch-legend-val: rgba(26, 28, 26, 0.90); --ch-center-msg: rgba(26, 28, 26, 0.35); --ch-zone: rgba(26, 28, 26, 0.08); --ch-zone-stroke: rgba(26, 28, 26, 0.40); --ch-zone-draft: rgba(26, 28, 26, 0.12); --ch-zone-draft-stroke: rgba(26, 28, 26, 0.60); --fm-cascade: #B45309; --fm-choch: #6D28D9; --fm-retest: #CA8A04; --ch-alert: #38BDF8; } [data-theme="cashmere"] { color-scheme: light; --bg: #F0F0F0; --surface: #E8E8E8; --nav-bg: rgba(232, 232, 232, 0.82); --surface-hover: #DEDEDE; --border: #D4D4D4; --border-light: #B8B8B8; --text-primary: #171717; --text-secondary: #525252; --text-muted: #6B6B6B; --accent: #0F172A; --accent-glow: rgba(15, 23, 42, 0.18); --accent-soft: rgba(15, 23, 42, 0.06); --accent-soft-2: rgba(15, 23, 42, 0.11); --selected-bg: rgba(15, 23, 42, 0.06); --positive: #15803D; --negative: #B91C1C; --header-bg: rgba(240, 240, 240, 0.80); --panel-tint: rgba(0, 0, 0, 0.015); --sidebar-bg: rgba(232, 232, 232, 0.55); --grid-line: rgba(23, 23, 23, 0.022); --overlay-bg: rgba(23, 23, 23, 0.40); --popup-bg: rgba(232, 232, 232, 0.97); --menu-bg: rgba(232, 232, 232, 0.94); --menu-hover: rgba(23, 23, 23, 0.06); --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 0, 0, 0.13); --chip-ring-outline: rgba(23, 23, 23, 0.55); --swatch-border: rgba(0, 0, 0, 0.28); --swatch-none-bg: rgba(232, 232, 232, 0.95); --swatch-glow: rgba(0, 0, 0, 0.30); --ch-bg: #E8E8E8; --ch-axis-text: rgba(23, 23, 23, 0.55); --ch-axis-line: rgba(23, 23, 23, 0.10); --ch-vol-up: rgba(23, 23, 23, 0.35); --ch-vol-dn: rgba(23, 23, 23, 0.15); --ch-up: #171717; --ch-down: rgba(23, 23, 23, 0.75); --ch-line: rgba(23, 23, 23, 0.85); --ch-line-dot: rgba(23, 23, 23, 0.50); --ch-signal-bg: #171717; --ch-signal-fg: #E8E8E8; --ch-price-label-bg: #171717; --ch-price-label-fg: #E8E8E8; --ch-price-line: rgba(23, 23, 23, 0.40); --ch-legend-label: rgba(23, 23, 23, 0.45); --ch-legend-val: rgba(23, 23, 23, 0.90); --ch-center-msg: rgba(23, 23, 23, 0.35); --ch-zone: rgba(23, 23, 23, 0.08); --ch-zone-stroke: rgba(23, 23, 23, 0.40); --ch-zone-draft: rgba(23, 23, 23, 0.12); --ch-zone-draft-stroke: rgba(23, 23, 23, 0.60); --fm-cascade: #B45309; --fm-choch: #6D28D9; --fm-retest: #CA8A04; --fm-breakout-long: #84CC16; --fm-breakout-short: #E11D48; --ch-alert: #38BDF8; } /* ─── Retro Ink: чёрный, крем, сланец и оранжевый ─── */ [data-theme="retro"] { color-scheme: dark; --bg: #101114; --surface: #1B1D21; --nav-bg: rgba(27, 29, 33, 0.82); --surface-hover: #24272D; --border: #2E3238; --border-light: #3F454D; --text-primary: #E8D8C9; --text-secondary: #A8A094; --text-muted: #6B645A; --accent: #F3701E; --accent-glow: rgba(243, 112, 30, 0.28); --accent-soft: rgba(243, 112, 30, 0.09); --accent-soft-2: rgba(243, 112, 30, 0.15); --selected-bg: rgba(232, 216, 201, 0.06); --positive: #F3701E; --negative: #7C93B5; --header-bg: rgba(16, 17, 20, 0.65); --panel-tint: rgba(232, 216, 201, 0.012); --sidebar-bg: rgba(27, 29, 33, 0.45); --grid-line: rgba(232, 216, 201, 0.010); --overlay-bg: rgba(5, 5, 6, 0.72); --popup-bg: rgba(27, 29, 33, 0.95); --menu-bg: rgba(27, 29, 33, 0.60); --menu-hover: rgba(232, 216, 201, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 28px rgba(0, 0, 0, 0.34); --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.24), 0 20px 52px rgba(0, 0, 0, 0.50); --chip-ring-outline: rgba(232, 216, 201, 0.85); --swatch-border: rgba(232, 216, 201, 0.30); --swatch-none-bg: rgba(27, 29, 33, 0.92); --swatch-glow: rgba(232, 216, 201, 0.40); --ch-bg: #1B1D21; --ch-axis-text: rgba(232, 216, 201, 0.42); --ch-axis-line: rgba(232, 216, 201, 0.09); --ch-vol-up: rgba(232, 216, 201, 0.22); --ch-vol-dn: rgba(232, 216, 201, 0.09); --ch-up: #E8D8C9; --ch-down: rgba(232, 216, 201, 0.70); --ch-line: rgba(232, 216, 201, 0.85); --ch-line-dot: rgba(232, 216, 201, 0.55); --ch-signal-bg: #F3701E; --ch-signal-fg: #141414; --ch-price-label-bg: #F3701E; --ch-price-label-fg: #141414; --ch-price-line: rgba(243, 112, 30, 0.40); --ch-legend-label: rgba(232, 216, 201, 0.40); --ch-legend-val: rgba(232, 216, 201, 0.88); --ch-center-msg: rgba(232, 216, 201, 0.30); --ch-zone: rgba(124, 147, 181, 0.14); --ch-zone-stroke: rgba(124, 147, 181, 0.45); --ch-zone-draft: rgba(124, 147, 181, 0.18); --ch-zone-draft-stroke: rgba(124, 147, 181, 0.65); --fm-cascade: #F3701E; --fm-choch: #8FA3C4; --fm-retest: #FFB27A; --fm-breakout-long: #F3701E; --fm-breakout-short: #E11D48; --ch-alert: #38BDF8; } /* ───────────── Переключатель тем (кнопка + попап) ───────────── Палитра попапа фиксирована (--tp-*) и не наследуется от активной темы: тёмная по умолчанию, светлая на html[data-mode="light"]. Пункты остаются контрастными при любом переключении тёмные ↔ светлые. */ /* базовый стиль кнопок шапки — в layout.css (.form-btn, .theme-btn общий блок) */ .theme-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; } .theme-btn svg .half { fill: currentColor; stroke: none; } /* Прокрут иконки при смене темы колесом: крутится вокруг своего центра */ #themeBtn svg { transform-box: fill-box; transform-origin: center; } #themeBtn svg.spin-cw { animation: themeSpinCw 0.45s var(--ease); } #themeBtn svg.spin-ccw { animation: themeSpinCcw 0.45s var(--ease); } @keyframes themeSpinCw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes themeSpinCcw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .theme-popup { --tp-bg: rgba(24, 26, 33, 0.92); --tp-text: #F2F4F8; --tp-text-dim: #B9BFCC; --tp-label: #8B92A0; --tp-hover: rgba(255, 255, 255, 0.065); --tp-border: rgba(255, 255, 255, 0.10); --tp-shadow: 0 4px 14px rgba(0, 0, 0, 0.26), 0 24px 64px rgba(0, 0, 0, 0.46); } html[data-mode="light"] .theme-popup { --tp-bg: rgba(251, 251, 253, 0.94); --tp-text: #17191F; --tp-text-dim: #50565F; --tp-label: #878D97; --tp-hover: rgba(0, 0, 0, 0.05); --tp-border: rgba(0, 0, 0, 0.09); --tp-shadow: 0 4px 14px rgba(20, 24, 34, 0.09), 0 24px 64px rgba(20, 24, 34, 0.17); } .theme-popup { position: fixed; z-index: 400; width: 236px; max-height: min(74vh, 560px); overflow-y: auto; overflow-x: hidden; padding: 5px; background: var(--tp-bg); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--tp-border); border-radius: 14px; box-shadow: var(--tp-shadow); display: flex; flex-direction: column; gap: 1px; color: var(--tp-text); animation: mkRise 0.1s var(--ease) backwards; transform-origin: top right; } .theme-popup.hidden { display: none; } /* точка роста анимации — со стороны кнопки (направление ставит themes.js) */ .theme-popup[data-dir="bottom"] { transform-origin: bottom right; } .theme-popup[data-dir="left"] { transform-origin: top left; } .theme-popup[data-dir="right"] { transform-origin: top right; } .theme-popup::-webkit-scrollbar { width: 4px; } .theme-popup::-webkit-scrollbar-thumb { background: var(--tp-border); } .theme-group { font-family: var(--font-mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tp-label); padding: 8px 10px 4px; user-select: none; } .theme-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 8px; border: none; background: transparent; border-radius: 7px; cursor: pointer; text-align: left; transition: background 0.08s ease; } .theme-item:hover { background: var(--tp-hover); } /* точка-свотч: фон темы + акцентное ядро (заливается инлайн) */ .theme-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--tp-border); flex-shrink: 0; } .theme-item-name { font-size: 12px; font-weight: 500; color: var(--tp-text); letter-spacing: 0; white-space: nowrap; min-width: 0; } .theme-item.active .theme-item-name { color: var(--accent); font-weight: 600; } .theme-check { width: 12px; height: 12px; margin-left: auto; color: var(--accent); opacity: 0; transform: scale(0.6); transition: opacity 0.08s ease, transform 0.08s ease; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .theme-item.active .theme-check { opacity: 1; transform: scale(1); } /* замочек PRO: платные темы приглушены, пилюля вместо галки */ .theme-item.locked { opacity: 0.6; } .theme-item.locked .theme-check { display: none; } .theme-pro { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.8px; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--tp-border); color: var(--tp-label); flex-shrink: 0; } /* ───────────── Toast-уведомления (справа внизу) ───────────── */ .toast-wrap { position: fixed; right: 14px; bottom: 14px; z-index: 600; display: flex; flex-direction: column; gap: 7px; pointer-events: none; } .toast { --toast-accent: var(--accent); pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 10px; width: 286px; padding: 11px 10px 12px 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; cursor: pointer; overflow: hidden; opacity: 0; transform: translateX(14px); transition: opacity 0.12s var(--ease), transform 0.12s var(--ease); } .toast.show { opacity: 1; transform: none; } .toast.hide { opacity: 0; transform: translateX(10px); } /* акцентная кромка слева — цвет следует за темой через --toast-accent */ .toast::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--toast-accent); } .toast-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--toast-accent); margin-top: 4px; } .toast-main { flex: 1; min-width: 0; } .toast-title { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; } .toast-arrow { color: var(--toast-accent); font-weight: 700; } .toast-text { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; } .toast-close { flex-shrink: 0; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; border-radius: 5px; transition: color 0.07s ease, background 0.07s ease; display: none; } .toast-close:hover { color: var(--text-primary); background: var(--menu-hover); } /* ───────────── Виды уведомлений (настройка toastStyle) ───────────── */ /* compact: уже и плотнее */ .toast-compact { width: 232px; padding: 8px 8px 9px 12px; gap: 8px; } .toast-compact .toast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* solid: заливка акцентом — текст поверх */ .toast-solid { background: var(--toast-accent); border-color: transparent; } .toast-solid::before { display: none; } .toast-solid .toast-dot { background: #fff; } .toast-solid .toast-title, .toast-solid .toast-arrow, .toast-solid .toast-text { color: #fff; } /* neon: тёмная плашка со свечением акцента */ .toast-neon { border-color: var(--toast-accent); box-shadow: 0 0 18px -2px var(--toast-accent), 0 0 4px 0 var(--toast-accent); } .toast-neon .toast-dot { box-shadow: 0 0 8px 1px var(--toast-accent); } /* ───────────── Автоскрытие: полоска остатка + пауза под взглядом ── */ /* .timed ставит alerts.js вместе с --dur; .held — пока курсор на тосте */ .toast.timed { padding-bottom: 14px; } .toast.timed::after { content: ''; position: absolute; left: 14px; right: 10px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--toast-accent); opacity: 0.5; transform-origin: left center; animation: toastShrink var(--dur, 7000ms) linear forwards; } .toast.timed.held::after { animation-play-state: paused; } .toast-solid.timed::after { background: #fff; } @keyframes toastShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ───────────── FAQ ───────────── */ .faq { padding: 6px 0 4px; } .faq-block { margin: 0 0 8px; } .faq-block:last-child { margin-bottom: 2px; } .faq-block[open] { margin-bottom: 16px; } .faq-h { display: flex; align-items: center; gap: 9px; font-size: var(--fs-h); font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; padding: 7px 6px; border-radius: 8px; cursor: pointer; list-style: none; user-select: none; transition: background 0.08s ease; } .faq-h::-webkit-details-marker { display: none; } .faq-h::marker { content: ''; } .faq-h:hover { background: var(--menu-hover); } .faq-chev { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; stroke: var(--text-muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.1s var(--ease); } .faq-block[open] > .faq-h .faq-chev { transform: rotate(90deg); stroke: var(--accent); } .faq-body { padding: 6px 2px 8px; } .faq-n { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-mini); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .faq-table { width: 100%; border-collapse: collapse; } .faq-table td { padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: var(--fs-body); line-height: 1.5; color: var(--text-secondary); vertical-align: middle; } .faq-table tr:last-child td { border-bottom: none; } .faq-table td:first-child { width: 128px; padding-right: 12px; } .faq-table b { color: var(--text-primary); font-weight: 600; } .faq-kbd { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-mini); font-weight: 500; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-light); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; margin: 1px 1px; white-space: nowrap; } .faq-dim { color: var(--text-muted); font-size: var(--fs-mini); } .faq-note { font-size: var(--fs-small); line-height: 1.55; color: var(--text-secondary); } .faq-note b { color: var(--text-primary); } /* образцы линий легенды */ .faq-sw { display: inline-block; width: 46px; vertical-align: middle; } .faq-sw i { display: block; width: 100%; } /* образец каскада: две линии в цвете сторон */ .faq-casc { display: inline-flex; flex-direction: column; gap: 4px; width: 46px; vertical-align: middle; } .faq-casc i { display: block; width: 100%; } .faq-zone { display: inline-block; width: 46px; height: 14px; border-radius: 2px; opacity: 0.55; vertical-align: middle; } .faq-marks { display: inline-flex; align-items: center; gap: 8px; width: 46px; } /* фигуры маркеров — канонические цвета: ▲ пробоя = зелёный уровня, ◇ ретеста = жёлтый (canvas красит их цветом своей формации) */ .faq-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--fm-c-long); } .faq-dia { width: 9px; height: 9px; border: 2px solid var(--fm-c-retest); transform: rotate(45deg); margin-left: 2px; } /* ───────────── FAQ: демо жестов мыши ───────────── */ .faq-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .faq-demo { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 10px 9px; } .faq-demo-svg { width: 100%; height: auto; display: block; } .faq-demo-t { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); margin-top: 7px; } .faq-demo-d { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); margin-top: 2px; } /* сцены */ .faq-demo-svg .d-up { fill: var(--positive); } .faq-demo-svg .d-dn { fill: var(--negative); } .faq-demo-svg .d-wick-u { stroke: var(--positive); stroke-width: 1; opacity: 0.75; } .faq-demo-svg .d-wick-d { stroke: var(--negative); stroke-width: 1; opacity: 0.75; } .faq-demo-svg .d-mbody { fill: var(--ch-bg); stroke: var(--text-secondary); stroke-width: 2; } .faq-demo-svg .m-line { stroke: var(--text-muted); stroke-width: 1.5; } .faq-demo-svg .d-mid { fill: var(--accent); opacity: 0; } .faq-demo-svg .d-aline { stroke: var(--ch-alert); stroke-width: 1.5; transform-box: fill-box; transform-origin: left center; } .faq-demo-svg .d-adot { fill: var(--ch-alert); opacity: 0; transform-box: fill-box; transform-origin: center; } .faq-demo-svg .d-cur { fill: var(--accent); stroke: var(--ch-bg); stroke-width: 1; } /* уровень: точки кликов, риплы, линия */ .faq-demo-svg .d-lvl { fill: none; stroke: var(--ch-line, #e8e8e8); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; } .faq-demo-svg .d-apt1, .faq-demo-svg .d-apt2 { fill: var(--accent); opacity: 0; } .faq-demo-svg .d-rip1, .faq-demo-svg .d-rip2, .faq-demo-svg .d-rip-r { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .faq-demo-svg .d-cur-lvl { animation: dCurLvl 4s ease-in-out infinite; } .faq-demo-svg .d-rip1 { animation: dRip1 4s ease-out infinite; } .faq-demo-svg .d-rip2 { animation: dRip2 4s ease-out infinite; } .faq-demo-svg .d-apt1 { animation: dApt1 4s ease-in-out infinite; } .faq-demo-svg .d-apt2 { animation: dApt2 4s ease-in-out infinite; } .faq-demo-svg .d-lvl { animation: dLvl 4s ease-in-out infinite; } @keyframes dCurLvl { 0% { transform: translate(150px, 100px); } 12%, 22% { transform: translate(58px, 76px); } 15%, 19% { transform: translate(58px, 76px) scale(0.82); } 45%, 56% { transform: translate(168px, 44px); } 49%, 53% { transform: translate(168px, 44px) scale(0.82); } 86%, 100% { transform: translate(150px, 100px); } } @keyframes dRip1 { 0%, 12% { opacity: 0; transform: scale(0.3); } 16% { opacity: 0.9; transform: scale(0.5); } 30%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes dRip2 { 0%, 46% { opacity: 0; transform: scale(0.3); } 50% { opacity: 0.9; transform: scale(0.5); } 64%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes dApt1 { 0%, 13% { opacity: 0; } 17%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes dApt2 { 0%, 47% { opacity: 0; } 51%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes dLvl { 0%, 18% { stroke-dashoffset: 100; opacity: 1; } 55%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* зона: удержание колеса → рост прямоугольника */ .faq-demo-svg .d-hold { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; } .faq-demo-svg .d-zone { fill: var(--accent); fill-opacity: 0.14; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: top left; } .faq-demo-svg .d-hold { animation: dHold 4s ease-in-out infinite; } .faq-demo-svg .d-zone { animation: dZone 4s ease-in-out infinite; } .faq-demo-svg .d-cur-zone { animation: dCurZone 4s ease-in-out infinite; } @keyframes dHold { 0%, 20%, 100% { opacity: 0; } 5%, 9%, 14%, 18% { opacity: 0.9; } 7%, 11%, 16% { opacity: 0.15; } } @keyframes dZone { 0%, 22% { transform: scale(0); opacity: 0; } 27% { opacity: 1; } 58%, 84% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(1); opacity: 0; } } @keyframes dCurZone { 0% { transform: translate(150px, 100px); } 26% { transform: translate(70px, 34px); } 58%, 84% { transform: translate(154px, 80px); } 100% { transform: translate(150px, 100px); } } /* линейка: протяжка по диагонали */ .faq-demo-svg .d-rline { fill: none; stroke: var(--positive); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; } .faq-demo-svg .d-rrect { fill: var(--positive); fill-opacity: 0.08; opacity: 0; } .faq-demo-svg .d-rtxt { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; fill: var(--positive); opacity: 0; } .faq-demo-svg .d-cur-rule { animation: dCurRule 4s ease-in-out infinite; } .faq-demo-svg .d-rline { animation: dRDraw 4s ease-in-out infinite; } .faq-demo-svg .d-rrect, .faq-demo-svg .d-rtxt { animation: dRShow 4s ease-in-out infinite; } @keyframes dCurRule { 0% { transform: translate(150px, 100px); } 12% { transform: translate(58px, 80px); } 48%, 80% { transform: translate(152px, 40px); } 100% { transform: translate(150px, 100px); } } @keyframes dRDraw { 0%, 10% { stroke-dashoffset: 100; opacity: 1; } 48%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes dRShow { 0%, 46% { opacity: 0; } 54%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } } /* ПКМ-меню */ .faq-demo-svg .d-grid { stroke: var(--border-light); stroke-width: 1; } .faq-demo-svg .d-menu { fill: var(--surface); stroke: var(--border-light); stroke-width: 1; } .faq-demo-svg .d-mi { font-family: var(--font); font-size: var(--fs-micro); fill: var(--text-secondary); } .faq-demo-svg .d-menu-pop { transform-box: fill-box; transform-origin: top left; } .faq-demo-svg .d-cur-r { animation: dCurR 3.6s ease-in-out infinite; } .faq-demo-svg .d-rip-r { animation: dRipR 3.6s ease-out infinite; } .faq-demo-svg .d-menu-pop { animation: dMenuPop 3.6s ease-in-out infinite; } @keyframes dCurR { 0% { transform: translate(152px, 96px); } 16%, 78% { transform: translate(100px, 56px); } 20%, 24% { transform: translate(100px, 56px) scale(0.82); } 100% { transform: translate(152px, 96px); } } @keyframes dRipR { 0%, 17% { opacity: 0; transform: scale(0.3); } 21% { opacity: 0.9; transform: scale(0.5); } 35%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes dMenuPop { 0%, 20% { opacity: 0; transform: scale(0.7); } 29% { opacity: 1; transform: scale(1.03); } 35%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } } /* клик колесом → линия */ .faq-demo-svg .d-mid { animation: dMid 3s ease-in-out infinite; } .faq-demo-svg .d-aline { animation: dAline 3s ease-in-out infinite; } .faq-demo-svg .d-adot { animation: dAdot 3s ease-in-out infinite; } @keyframes dMid { 0%, 14%, 32%, 100% { opacity: 0; } 20%, 26% { opacity: 0.9; } } @keyframes dAline { 0%, 22% { transform: scaleX(0); opacity: 0; } 26% { opacity: 1; } 38%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } } @keyframes dAdot { 0%, 34% { opacity: 0; transform: scale(0.3); } 42%, 82% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } } /* Карта плотностей: мини-радар, ядро, вращение, переход на график */ .faq-demo-svg .d-den-track { fill: none; stroke: var(--border-light); stroke-width: 5; opacity: 0.55; } .faq-demo-svg .d-den-bid { fill: none; stroke: var(--positive); stroke-width: 5; stroke-linecap: round; } .faq-demo-svg .d-den-ask { fill: none; stroke: var(--negative); stroke-width: 5; stroke-linecap: round; } .faq-demo-svg .d-den-hub { fill: var(--ch-bg); stroke: var(--text-secondary); stroke-width: 1.5; } .faq-demo-svg .d-den-core { fill: var(--accent); } .faq-demo-svg .d-den-dot { fill: var(--positive); } .faq-demo-svg .d-den-edge { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 2; transform-box: fill-box; transform-origin: center; animation: dDenEdge 4s ease-in-out infinite; } .faq-demo-svg .d-den-wheel { fill: var(--ch-bg); stroke: var(--text-secondary); stroke-width: 1.5; } .faq-demo-svg .d-den-wtick { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; animation: dDenWheel 4s ease-in-out infinite; } .faq-demo-svg .d-den-range { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; fill: var(--text-secondary); text-anchor: middle; animation: dDenRange 4s ease-in-out infinite; /* свой класс вместо d-rtxt: у линейки своя анимация показа, наследовать её нельзя */ } @keyframes dDenEdge { 0%, 100% { transform: scale(0.96); opacity: 0.35; } 50% { transform: scale(1.06); opacity: 0.9; } } @keyframes dDenWheel { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(3px); opacity: 1; } } @keyframes dDenRange { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } .faq-demo-svg .d-den-ping { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dDenPing 6s ease-out infinite; } .faq-demo-svg .d-den-mode { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; text-anchor: middle; opacity: 0.25; } .faq-demo-svg .d-den-mode-all { animation: dDenModeAll 6s ease-in-out infinite; } .faq-demo-svg .d-den-mode-short { animation: dDenModeShort 6s ease-in-out infinite; } .faq-demo-svg .d-den-mode-long { animation: dDenModeLong 6s ease-in-out infinite; } .faq-demo-svg .d-den-cur-hub { animation: dDenCurHub 6s ease-in-out infinite; } @keyframes dDenPing { /* три импульса за цикл — под каждое переключение режима */ 0%, 8% { opacity: 0; transform: scale(0.4); } 12% { opacity: 0.85; transform: scale(0.7); } 24%, 32% { opacity: 0; transform: scale(2.2); } 36% { opacity: 0.85; transform: scale(0.7); } 48%, 62% { opacity: 0; transform: scale(2.2); } 68% { opacity: 0.85; transform: scale(0.7); } 82%, 100% { opacity: 0; transform: scale(2.2); } } @keyframes dDenModeAll { 0%, 3% { opacity: 0; } 6%, 30% { opacity: 1; fill: var(--text-primary); } 33%, 100% { opacity: 0; } } @keyframes dDenModeShort { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; fill: var(--negative); } 66%, 100% { opacity: 0; } } @keyframes dDenModeLong { 0%, 63% { opacity: 0; } 66%, 96% { opacity: 1; fill: var(--positive); } 99%, 100% { opacity: 0; } } @keyframes dDenCurHub { 0% { transform: translate(168px, 102px); } 9%, 84% { transform: translate(100px, 66px); } 11%, 15% { transform: translate(100px, 66px) scale(0.82); } 36%, 40% { transform: translate(100px, 66px) scale(0.82); } 69%, 73% { transform: translate(100px, 66px) scale(0.82); } 100% { transform: translate(168px, 102px); } } .faq-demo-svg .d-den-spin { /* явный центр в координатах viewBox: не зависит от геометрии содержимого, биение исключено в любом движке */ transform-box: view-box; transform-origin: 100px 68px; animation: dDenSpin 8s linear infinite; } .faq-demo-svg .d-den-swipe-head { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .faq-demo-svg .d-den-swipe { fill: none; stroke: var(--text-muted); stroke-width: 1.4; opacity: 0.8; } .faq-demo-svg .d-den-cur-spin { animation: dDenCurSpin 8s ease-in-out infinite; } @keyframes dDenSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dDenCurSpin { 0% { transform: translate(168px, 102px); } 15%, 75% { transform: translate(132px, 42px); } 40% { transform: translate(158px, 68px); } 60% { transform: translate(132px, 94px); } 100% { transform: translate(168px, 102px); } } .faq-demo-svg .d-den-wall { animation: dDenWall 6s ease-in-out infinite; } .faq-demo-svg .d-den-hit { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: dDenHit 6s ease-out infinite; } .faq-demo-svg .d-den-line { stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dDenLine 6s ease-in-out infinite; } .faq-demo-svg .d-den-pill { fill: var(--surface); stroke: var(--border-light); stroke-width: 1; opacity: 0; animation: dDenPill 6s ease-in-out infinite; } .faq-demo-svg .d-den-ptxt { font-family: var(--font-mono); font-size: 8px; font-weight: 600; fill: var(--text-secondary); text-anchor: middle; opacity: 0; animation: dDenPill 6s ease-in-out infinite; } .faq-demo-svg .d-den-lead { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dDenLead 6s ease-in-out infinite; } .faq-demo-svg .d-den-call { opacity: 0; animation: dDenCall 6s ease-in-out infinite; } .faq-demo-svg .d-den-sym { font-family: var(--font-mono); font-size: var(--fs-mini); font-weight: 600; fill: var(--text-primary); } .faq-demo-svg .d-den-vol { font-family: var(--font-mono); font-size: 8px; fill: var(--text-muted); } .faq-demo-svg .d-den-cur-wall { animation: dDenCurWall 6s ease-in-out infinite; } @keyframes dDenWall { 0%, 12% { opacity: 0.45; } 18%, 80% { opacity: 1; } 92%, 100% { opacity: 0.45; } } @keyframes dDenHit { 0%, 14% { opacity: 0; transform: scale(0.4); } 20% { opacity: 0.9; transform: scale(0.8); } 38%, 100% { opacity: 0; transform: scale(1.8); } } @keyframes dDenLead { 0%, 22% { stroke-dashoffset: 100; opacity: 1; } 46%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes dDenCall { 0%, 32% { opacity: 0; } 42%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes dDenLine { 0%, 44% { stroke-dashoffset: 100; opacity: 1; } 64%, 88% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes dDenPill { 0%, 56% { opacity: 0; } 64%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } } @keyframes dDenCurWall { 0% { transform: translate(168px, 102px); } 12%, 24% { transform: translate(79px, 72px); } 15%, 19% { transform: translate(79px, 72px) scale(0.82); } 55%, 82% { transform: translate(146px, 88px); } 100% { transform: translate(168px, 102px); } } @media (prefers-reduced-motion: reduce) { .faq-demo-svg * { animation: none !important; } } /* ───────────── Инструментальная панель (внутри фокус-модалки) ───────────── */ .toolbar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; align-items: center; pointer-events: auto; } .toolbar-handle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 18px; height: 58px; padding: 0; border: 1px solid var(--border-light); border-left: none; border-radius: 0 8px 8px 0; background: var(--popup-bg); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); color: var(--accent); cursor: pointer; transition: color 0.08s ease, width 0.1s var(--ease), box-shadow 0.08s ease; } .toolbar-handle svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.1s ease; } .toolbar-handle .tb-x { display: none; } .toolbar-handle:hover { width: 24px; box-shadow: 0 0 18px var(--accent-soft-2); } .toolbar.open .toolbar-handle svg:not(.tb-x) { transform: rotate(90deg) rotate(180deg); } .toolbar.open .toolbar-handle .tb-x { display: block; } .toolbar.open .toolbar-handle svg:not(.tb-x) { display: none; } .toolbar-panel { width: 40px; padding: 5px 4px; margin-left: 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--popup-bg); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity 0.1s var(--ease), transform 0.1s var(--ease); } .toolbar.open .toolbar-panel { opacity: 1; transform: none; pointer-events: auto; } .toolbar-btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 7px; color: var(--accent); cursor: pointer; transition: background 0.08s ease, color 0.08s ease, box-shadow 0.08s ease, transform 0.08s var(--ease-spring); } .toolbar-btn:hover { background: var(--accent-soft); color: var(--accent); transform: scale(1.06); } .toolbar-btn:active { background: var(--accent-soft-2); transform: scale(0.96); } .toolbar-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .toolbar-sep { width: 22px; height: 1px; background: var(--border); margin: 2px 0; }