/* ============================================================================ Дизайн-токены (задача 153, вариант «Терминал»). Один набор значений на обе темы через light-dark(): первое значение — светлая, второе — тёмная. Режим выбирает color-scheme на : по умолчанию тёмная, data-theme="light" — светлая, data-theme="auto" — как в системе. Переключатель — theme_controller.js, состояние в localStorage. ========================================================================== */ :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Поверхности */ --bg: light-dark(#f5f5f7, #181a20); --bg-deep: light-dark(#eaecef, #0b0e11); --panel: light-dark(#ffffff, #1e2329); --panel-2: light-dark(#f3f4f6, #2b3139); --field: light-dark(#f8f9fa, #14171c); --line: light-dark(#e3e5e8, #2b3139); --line-2: light-dark(#eef0f2, #22272e); --line-strong: light-dark(#c9ccd1, #474d57); /* Текст */ --text: light-dark(#1e2329, #eaecef); --text-strong: light-dark(#000000, #ffffff); --text-2: light-dark(#474d57, #b7bdc6); --muted: light-dark(#707a8a, #848e9c); --muted-2: light-dark(#929aa5, #5e6673); --muted-3: light-dark(#b7bdc6, #474d57); /* Акцент (жёлтый терминала) и состояния */ --accent: light-dark(#c99400, #f0b90b); --accent-soft: light-dark(#a67c00, #f8d33a); --accent-strong: light-dark(#8f6a00, #d9a600); --accent-ink: light-dark(#ffffff, #181a20); --accent-bg: light-dark(rgba(201, 148, 0, 0.12), rgba(240, 185, 11, 0.12)); --accent-line: light-dark(rgba(201, 148, 0, 0.45), rgba(240, 185, 11, 0.45)); --up: light-dark(#1a9e6a, #0ecb81); --up-soft: light-dark(#157f55, #7ee2b8); --up-bg: light-dark(rgba(26, 158, 106, 0.12), rgba(14, 203, 129, 0.12)); --up-line: light-dark(rgba(26, 158, 106, 0.45), rgba(14, 203, 129, 0.45)); --down: light-dark(#e0364f, #f6465d); --down-soft: light-dark(#b52a40, #fba1ad); --down-bg: light-dark(rgba(224, 54, 79, 0.12), rgba(246, 70, 93, 0.12)); --down-line: light-dark(rgba(224, 54, 79, 0.45), rgba(246, 70, 93, 0.45)); --warn: light-dark(#b7860b, #f0b90b); --warn-soft: light-dark(#8f6a00, #f8d33a); --warn-bg: light-dark(rgba(183, 134, 11, 0.1), rgba(240, 185, 11, 0.1)); --warn-line: light-dark(rgba(183, 134, 11, 0.45), rgba(240, 185, 11, 0.45)); /* Геометрия и тени */ --r: 4px; --r-lg: 6px; --r-pill: 999px; --shadow: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4)); --shadow-panel: light-dark(0 1px 2px rgba(0, 0, 0, 0.06), none); --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); color: var(--text); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="auto"] { color-scheme: light dark; } * { box-sizing: border-box; } body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } .positive { color: var(--up); } .negative { color: var(--down); } /* --------------------------------------------------------------------------- Шапка: 48px, слева марка и вкладки разделов, справа килзоны, тема, профиль. Второй уровень (Рынок / Админка / Профиль) — полоса .subnav под шапкой, выпадашка на вкладке остаётся для перехода из любого места. ------------------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); } .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .brand-mark { width: 20px; height: 20px; border-radius: 3px; background: var(--accent); } /* Заглушка имени до финального названия (задача 153) — пунктир снизу. */ .brand-name.is-placeholder { color: var(--muted); font-weight: 600; border-bottom: 1px dashed var(--muted); } .nav-links { display: flex; align-items: stretch; align-self: stretch; gap: 2px; } .nav-links > a, .nav-links > .nav-dropdown > summary { display: inline-flex; align-items: center; height: 100%; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; white-space: nowrap; } .nav-links > a:hover, .nav-links > .nav-dropdown > summary:hover { color: var(--text); } .nav-links > a.is-active, .nav-links > .nav-dropdown.is-active > summary { color: var(--text); border-bottom-color: var(--accent); } .topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--muted); } .topbar-right > a, .topbar-right > form { display: inline-flex; } .topbar-right > a, .link-button { color: var(--muted); font-weight: 600; } .topbar-right > a:hover, .link-button:hover { color: var(--text); } .link-button { padding: 0; border: 0; background: transparent; cursor: pointer; } .nav-dropdown { position: relative; display: flex; } .nav-dropdown summary { cursor: pointer; list-style: none; user-select: none; } .nav-dropdown summary::-webkit-details-marker { display: none; } .nav-dropdown summary::after { content: ' ▾'; font-size: 10px; opacity: 0.7; } .nav-dropdown[open] summary { color: var(--text); } .nav-dropdown-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 20; display: flex; flex-direction: column; min-width: 190px; padding: 6px; gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: 0 8px 24px var(--shadow); } .nav-dropdown-menu a { padding: 6px 10px; border-radius: var(--r); color: var(--text-2); font-size: 13px; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a.is-active { background: var(--panel-2); color: var(--text); text-decoration: none; } .subnav { position: sticky; top: 48px; z-index: 9; display: flex; align-items: stretch; gap: 2px; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; } .subnav a { display: inline-flex; align-items: center; padding: 0 10px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; } .subnav a:hover { color: var(--text); } .subnav a.is-active { color: var(--text); border-bottom-color: var(--accent); } /* Переключатель темы: три состояния по кругу (тёмная → светлая → как в системе) */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); } .theme-toggle i { display: inline-block; width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--accent); } :root[data-theme="light"] .theme-toggle i { background: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); } :root[data-theme="auto"] .theme-toggle i { background: linear-gradient(90deg, var(--accent) 50%, var(--line-strong) 50%); } .flash-alert { background: var(--down-bg); color: var(--down-soft); } /* Мониторинг килзон в левом слоте шапки (задача 152): пилюля с активным окном, клик раскрывает все пять. Раскрывается ВЛЕВО — в отличие от nav-dropdown, который висит у правого края. */ .killzone-nav { position: relative; } .killzone-nav summary { display: flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--up-line); border-radius: var(--r-pill); background: var(--up-bg); color: var(--up-soft); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; } .killzone-nav summary::-webkit-details-marker { display: none; } .killzone-nav summary::after { content: ' ▾'; font-size: 11px; opacity: 0.7; } .killzone-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--up); box-shadow: 0 0 0 3px var(--shadow); } .killzone-till { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; } /* Между окнами: серая пилюля с именем ближайшей зоны и отсчётом до неё. */ .killzone-nav.is-idle summary { border-color: var(--line-strong); background: transparent; color: var(--muted); } .killzone-nav.is-idle .killzone-dot { background: var(--muted-2); box-shadow: none; } .killzone-menu { position: absolute; top: calc(100% + 10px); left: 0; display: flex; flex-direction: column; min-width: 320px; padding: 8px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-panel); z-index: 20; } .killzone-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: var(--r); color: var(--muted-2); font-size: 12px; } .killzone-row .name { flex: 1; font-weight: 700; white-space: nowrap; } .killzone-row .win { font-variant-numeric: tabular-nums; opacity: 0.8; } .killzone-row .left { min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; } .killzone-row.is-live { background: var(--up-bg); color: var(--up-soft); } .killzone-row.is-live .name::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: var(--r-pill); background: var(--up); vertical-align: 1px; } .killzone-menu-foot { margin: 4px 0 0; padding: 7px 10px 2px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 11px; } .app-shell { display: grid; min-height: calc(100vh - 48px); place-items: center; padding: 32px 16px; } .intro-card { width: min(100%, 640px); padding: 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-panel); } .intro-card h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; } .intro-card p { max-width: 560px; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; } .page-shell { width: min(1600px, 100%); margin: 0 auto; padding: 12px 16px 28px; } .page-shell.narrow { width: min(560px, 100%); padding-top: 32px; } .page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 12px; } .page-header h1, .panel h1, .panel h2 { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .page-header p, .panel p, .list-item span, .hint { color: var(--muted); } .eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .panel { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-panel); } .grid { display: grid; gap: 12px; } .two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form { display: grid; gap: 12px; } .form label, .chart-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; } .form input, .form select, .chart-controls select { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field); color: var(--text); font-size: 13px; } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; } .button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 700; } .button-danger { border-color: var(--down-line); color: var(--down-soft); } .button-danger:hover { border-color: var(--down); background: var(--down-line); color: var(--down-soft); } .button.small { min-height: 26px; padding: 0 9px; font-size: 11px; } .list { display: grid; gap: 6px; } .list-item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); } .list-item.wide { grid-template-columns: 1fr auto; align-items: center; } .exchange-account-card { gap: 12px; } .exchange-account-card-header, .account-balances-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; } .exchange-account-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .account-balances { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .account-balances-header h3 { margin: 0; color: var(--text); font-size: 16px; } .balance-sync-meta, .balance-empty { color: var(--muted); font-size: 13px; } .balance-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); } .balance-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; } .balance-table th, .balance-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--text); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; } .balance-table th:first-child, .balance-table td:first-child, .balance-table th:nth-child(2), .balance-table td:nth-child(2), .balance-table th:nth-child(7), .balance-table td:nth-child(7), .balance-table th:last-child, .balance-table td:last-child { text-align: left; } .balance-table th { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .balance-table tbody tr:last-child td { border-bottom: 0; } .balance-table td:first-child { display: grid; gap: 3px; } .balance-table td:first-child span, .balance-table td:nth-child(5) span { color: var(--muted); } .balance-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); font-size: 12px; font-weight: 600; } .balance-status.fresh { border-color: var(--up-line); color: var(--up-soft); } .balance-status.stale { border-color: var(--warn-line); color: var(--warn-soft); } .profile-page { width: min(1600px, 100%); } .profile-orders-panel { display: grid; gap: 12px; margin-top: 12px; padding: 0; overflow: hidden; } .profile-orders-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px 0; } .profile-orders-header h2 { margin: 0; color: var(--text); font-size: 14px; } .profile-orders-header p { margin: 2px 0 0; font-size: 12px; } .profile-orders-count { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .profile-orders-filter-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; align-items: end; gap: 8px; padding: 0 14px; } .profile-orders-filter-form label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600; } .profile-orders-filter-form select { width: 100%; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field); color: var(--text); font-size: 12px; } .profile-orders-filter-actions, .profile-order-actions { display: flex; flex-wrap: wrap; gap: 8px; } .profile-orders-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .profile-orders-summary div { display: grid; gap: 3px; min-height: 60px; padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .profile-orders-summary span, .profile-orders-summary em { font-size: 11px; font-style: normal; line-height: 1.3; } .profile-orders-summary span { font-size: 11px; font-weight: 500; } .profile-orders-summary strong { color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .profile-orders-summary strong.positive { color: var(--up); } .profile-orders-summary strong.negative { color: var(--down); } .profile-orders-summary em { font-size: 12px; font-style: normal; line-height: 1.35; } .profile-orders-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .profile-orders-list-head, .profile-order-summary { display: grid; grid-template-columns: minmax(140px, 1fr) 116px minmax(100px, 0.8fr) 64px minmax(120px, 0.9fr) minmax(94px, 0.7fr) minmax(150px, 1fr) minmax(170px, 1.1fr); gap: 10px; align-items: center; } .profile-orders-list-head { padding: 6px 12px 6px 40px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 500; } .profile-orders-list-head a, .admin-results-table th a, .server-sort-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; } .profile-orders-list-head a::after, .admin-results-table th a::after, .server-sort-link::after { content: "↕"; color: var(--muted-2); font-size: 10px; } .profile-orders-list-head a.sorted-asc::after, .admin-results-table th a.sorted-asc::after, .server-sort-link.sorted-asc::after { content: "↑"; color: var(--accent); } .profile-orders-list-head a.sorted-desc::after, .admin-results-table th a.sorted-desc::after, .server-sort-link.sorted-desc::after { content: "↓"; color: var(--accent); } .profile-order-item { border-bottom: 1px solid var(--line-2); background: transparent; } .profile-order-item[open] { background: var(--panel-2); } .profile-order-summary { position: relative; min-height: 30px; padding: 7px 12px 7px 40px; cursor: pointer; list-style: none; } .profile-order-summary::-webkit-details-marker { display: none; } .profile-order-summary::before { content: "+"; position: absolute; top: 11px; left: 12px; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--muted); font-size: 12px; font-weight: 700; } .profile-order-item[open] .profile-order-summary::before { content: "-"; color: var(--accent); } .profile-order-summary span { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; } .profile-order-summary > span { display: grid; gap: 3px; } .profile-order-summary strong { color: var(--text); font-size: 13px; font-weight: 600; } .profile-order-summary em, .profile-order-detail-grid span, .profile-order-events span, .profile-order-events em { color: var(--muted); font-size: 12px; font-style: normal; } .profile-order-summary .long { color: var(--up); } .profile-order-summary .short { color: var(--down); } .profile-order-details { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); } .profile-order-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .profile-order-detail-grid div { display: grid; gap: 4px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .profile-order-detail-grid strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; } .profile-order-subsection { display: grid; gap: 10px; } .profile-order-subsection h3 { margin: 0; color: var(--text); font-size: 15px; } .profile-order-mini-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); } .profile-order-mini-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; } .profile-order-mini-table th, .profile-order-mini-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .profile-order-mini-table th:first-child, .profile-order-mini-table td:first-child, .profile-order-mini-table th:nth-child(2), .profile-order-mini-table td:nth-child(2) { text-align: left; } .profile-order-mini-table th { color: var(--muted); font-size: 11px; font-weight: 500; } /* Листинг funding (макет A): время принта и метка пула — приглушённой припиской в ячейке; принт в ближайшие минуты — акцентом. */ .funding-rates-table td em { margin-left: 6px; color: var(--muted); font-style: normal; } .funding-rates-table td.funding-rates-soon, .funding-rates-table td.funding-rates-soon em { color: var(--accent); font-weight: 600; } /* Тень XM на /paper (задача 75.1, макет B): график, маячок включения и две таблицы в ряд — книга и недели. */ .shadow-chart { min-width: 0; margin: 14px 0 6px; padding: 10px 12px 4px; border: 1px solid var(--line); border-radius: var(--r); } .shadow-chart svg { display: block; max-width: 100%; } .shadow-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; color: var(--muted); font-size: 13px; } .shadow-legend i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; } .shadow-legend .shadow-swatch-xm { background: var(--down); } .shadow-legend .shadow-swatch-tsmom { background: var(--up); } .shadow-beacon { min-width: 0; margin: 8px 0 14px; padding: 8px 12px; border-radius: var(--r); background: var(--line); color: var(--text-2); font-size: 13px; } .shadow-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; } .shadow-split > div { min-width: 0; } /* Пустая книга — недели на всю ширину, а не в тесной половине. */ .shadow-split-stacked { grid-template-columns: minmax(0, 1fr); } .shadow-split .profile-order-mini-table { width: 100%; min-width: 0; } .shadow-split .profile-order-mini-table th, .shadow-split .profile-order-mini-table td { padding-right: 8px; padding-left: 8px; } .shadow-subhead { margin: 0 0 8px; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } .shadow-note { margin: 0; color: var(--muted); font-size: 13px; } .shadow-tag { margin-left: 4px; padding: 1px 5px; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--muted); font-size: 10px; } /* Хартбит пула (AUDIT п.11): свежих пар меньше 90% пула — неделя посчитана на молча суженной вселенной. */ .shadow-pool, .shadow-nowrap, #xm_shadow .profile-orders-count { white-space: nowrap; } .shadow-split .shadow-week-short td { background: var(--warn-bg); } .shadow-split .shadow-week-short .shadow-pool { color: var(--warn-soft); font-weight: 700; } .profile-order-events { display: grid; gap: 8px; } .profile-order-events div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .profile-order-events strong { color: var(--text); font-size: 13px; } .order-status-badge { display: inline-flex; align-items: center; width: max-content; min-height: 20px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); color: var(--text-2); font-size: 11px; font-weight: 600; } .order-status-badge.pending_submit, .order-status-badge.submitted, .order-status-badge.accepted, .order-status-badge.executing, .order-status-badge.ready, .order-status-badge.triggered, .order-status-badge.cancel_requested { border-color: var(--accent-line); color: var(--accent-soft); } .order-status-badge.partially_filled { border-color: var(--warn-line); color: var(--warn-soft); } .order-status-badge.filled { border-color: var(--up-line); color: var(--up-soft); } .order-status-badge.protected, .order-status-badge.closed_tp, .order-status-badge.completed, .order-status-badge.all_done { border-color: var(--up-line); color: var(--up-soft); } .order-status-badge.unprotected, .order-status-badge.exit_failed { border-color: var(--warn-line); color: var(--warn-soft); } .order-status-badge.closed_sl { border-color: var(--down-line); color: var(--down-soft); } .order-status-badge.closed_exit { border-color: var(--muted-2); color: var(--text-2); } .order-status-badge.canceled, .order-status-badge.rejected, .order-status-badge.expired, .order-status-badge.invalidated, .order-status-badge.failed, .order-status-badge.sync_lost { border-color: var(--down-line); color: var(--down-soft); } .listing-pagination-meta, .listing-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .listing-pagination { justify-content: flex-end; } .listing-pagination-button { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); color: var(--text-2); cursor: pointer; font-size: 12px; font-weight: 600; } .listing-pagination-button.disabled { cursor: default; opacity: 0.45; } .auto-trading-config-card { display: grid; gap: 12px; } .auto-trading-form { display: grid; gap: 12px; } .auto-trading-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .auto-trading-settings-grid label { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .auto-trading-settings-grid input, .auto-trading-settings-grid select { width: 100%; min-height: 30px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .auto-trading-settings-grid .toggle-row { display: flex; align-items: center; gap: 10px; min-height: 30px; } .auto-trading-settings-grid .toggle-row input { width: auto; min-height: auto; } .risk-mode-field[hidden] { display: none; } .setting-label { display: flex; align-items: center; gap: 7px; min-width: 0; } .setting-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; color: var(--text-2); font-size: 13px; font-weight: 600; } .setting-toggle-row .toggle-row { flex: 1; } .setting-help-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent-soft); cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1; } .setting-help-button:hover, .setting-help-button:focus-visible { border-color: var(--accent); background: var(--accent-bg); outline: none; } .settings-popover-backdrop[hidden] { display: none; } .settings-popover-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 14px; background: var(--field); backdrop-filter: blur(10px); } .settings-popover-panel { display: grid; gap: 10px; width: min(100%, 480px); padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); box-shadow: var(--shadow-panel); } .settings-popover-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .settings-popover-header h2 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.2; } .settings-popover-close { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel); color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1; } .settings-popover-close:hover, .settings-popover-close:focus-visible { border-color: var(--accent); color: var(--text-strong); outline: none; } .settings-popover-panel p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; } .settings-popover-example { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--up-bg); border-radius: var(--r); background: var(--up-bg); } .settings-popover-example span { color: var(--up-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .risk-preset-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .risk-preset-card { display: grid; gap: 5px; min-height: 60px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .risk-preset-card.active { border-color: var(--accent-line); background: var(--accent-bg); } .risk-preset-card strong { color: var(--text); font-size: 14px; } .risk-preset-card span, .risk-preset-card small { color: var(--muted); font-size: 12px; line-height: 1.35; } .auto-trading-overrides { display: grid; gap: 12px; } .auto-trading-overrides h3 { margin: 0 0 10px; color: var(--text); font-size: 15px; } .setting-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .setting-chip-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } .setting-chip-grid.pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 260px; overflow: auto; padding-right: 4px; } .setting-chip-grid label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--text-2); font-size: 13px; } .setting-chip-grid .pair-symbol { font-weight: 700; } .setting-chip-grid .pair-market-label { color: var(--muted); font-size: 12px; font-weight: 700; } .strategy-setting-grid { display: grid; gap: 8px; } .strategy-setting-row { display: grid; grid-template-columns: 72px minmax(180px, 1fr) minmax(160px, 220px); align-items: center; gap: 10px; min-height: 30px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .strategy-setting-row span { color: var(--text-2); font-size: 13px; font-weight: 600; } .strategy-setting-row select { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .checkboxes { display: flex; gap: 10px; } .checkboxes label { display: flex; align-items: center; gap: 8px; } .flash { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; } .flash-notice { background: var(--up-bg); color: var(--up-soft); } .flash-alert, .form-errors { padding: 10px 12px; border: 1px solid var(--down-line); border-radius: var(--r); } .form-errors { padding: 8px 12px; border-radius: var(--r-lg); } .chart-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .chart-panel { padding: 0; overflow: hidden; } .chart-status { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); } /* Комбобокс символа графика (задача 85) */ .symbol-picker { position: relative; } .symbol-picker-input { width: 100%; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); color: var(--text); } .symbol-picker-input:focus { outline: none; border-color: var(--accent-line); } .symbol-picker-list { position: absolute; top: calc(100% + 6px); left: 0; width: min(340px, 90vw); z-index: 30; max-height: 420px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); padding: 6px; box-shadow: var(--shadow-panel); font-weight: 500; font-size: 13px; } .symbol-picker-list[hidden] { display: none; } .symbol-picker-group { padding: 8px 8px 4px; color: var(--muted-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .symbol-picker-note { padding: 6px 10px; color: var(--muted-2); font-size: 12px; } .symbol-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r); color: var(--text-2); cursor: pointer; } .symbol-picker-option:hover, .symbol-picker-option.active { background: var(--accent-bg); color: var(--accent-soft); } .symbol-picker-option.current { color: var(--text); font-weight: 700; } .symbol-picker-option.other { color: var(--muted); } .symbol-picker-option mark { background: transparent; color: var(--accent-soft); font-weight: 600; } .symbol-picker-star { border: 0; background: transparent; color: var(--muted-3); font-size: 15px; line-height: 1; padding: 2px 4px; cursor: pointer; } .symbol-picker-star.on { color: var(--warn); } .symbol-picker-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px 4px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 11px; } .chart-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; } .chart-toggle input[type="checkbox"] { width: auto; margin: 0; } .signal-explanation-details { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.86rem; color: var(--muted); } .chart-container { position: relative; min-height: 620px; } .strategy-performance { border-top: 1px solid var(--line); background: var(--field); } .signal-history { border-top: 1px solid var(--line); background: var(--field); } .chart-positions { border-top: 1px solid var(--line); background: var(--field); } .performance-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px; } .performance-header.compact { align-items: center; } .performance-header h2 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.2; } .performance-kicker { margin: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .performance-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .performance-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--muted); font-size: 12px; white-space: nowrap; } .performance-filter strong { color: var(--text); font-weight: 600; } .performance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .performance-metric { display: grid; gap: 6px; min-height: 104px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .performance-metric span, .performance-metric em, .performance-loading, .performance-empty { color: var(--muted); } .performance-metric span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .performance-metric strong { color: var(--text); font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .performance-metric strong.positive { color: var(--up); } .performance-metric strong.negative { color: var(--down); } .performance-metric em { font-size: 12px; font-style: normal; line-height: 1.35; } .performance-loading, .performance-empty { font-size: 14px; } .performance-empty { padding: 0 18px 18px; } .signal-history-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px; } .signal-history-header.compact { align-items: center; } .signal-history-header h2 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.2; } .chart-positions-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px; } .chart-positions-header.compact { align-items: center; } .chart-positions-header h2 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.2; } .signal-history-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); } .chart-positions-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); } .signal-history-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; } .chart-positions-table { width: 100%; min-width: 1140px; border-collapse: collapse; font-size: 13px; } .signal-history-table th, .signal-history-table td, .chart-positions-table th, .chart-positions-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--text); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; } .signal-history-table th:first-child, .signal-history-table td:first-child, .signal-history-table th:nth-child(2), .signal-history-table td:nth-child(2), .signal-history-table th:nth-child(3), .signal-history-table td:nth-child(3), .signal-history-table th:nth-child(4), .signal-history-table td:nth-child(4), .signal-history-table th:last-child, .signal-history-table td:last-child, .chart-positions-table th:first-child, .chart-positions-table td:first-child, .chart-positions-table th:nth-child(2), .chart-positions-table td:nth-child(2), .chart-positions-table th:nth-child(3), .chart-positions-table td:nth-child(3), .chart-positions-table th:nth-child(4), .chart-positions-table td:nth-child(4), .chart-positions-table th:nth-child(5), .chart-positions-table td:nth-child(5), .chart-positions-table th:last-child, .chart-positions-table td:last-child { text-align: left; } .signal-history-table th, .chart-positions-table th { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .signal-history-table th.sortable, .chart-positions-table th.sortable { cursor: pointer; user-select: none; } .signal-history-table th.sortable::after, .chart-positions-table th.sortable::after { content: "↕"; display: inline-block; margin-left: 6px; color: var(--muted-2); font-size: 10px; } .signal-history-table th.sorted-asc::after, .chart-positions-table th.sorted-asc::after { content: "↑"; color: var(--accent); } .signal-history-table th.sorted-desc::after, .chart-positions-table th.sorted-desc::after { content: "↓"; color: var(--accent); } .signal-history-table td:first-child, .chart-positions-table td:first-child { display: grid; gap: 3px; } .signal-history-table td:first-child span, .chart-positions-table td:first-child span { color: var(--muted); } .signal-history-table tbody tr { cursor: pointer; } .signal-history-table tbody tr:hover, .signal-history-table tbody tr.selected { background: var(--panel-2); } .chart-positions-table tbody tr.settled { opacity: 0.48; } .chart-positions-table tbody tr.settled:hover { opacity: 0.72; } .signal-history-table .long, .chart-positions-table .long { color: var(--up); } .signal-history-table .short, .chart-positions-table .short { color: var(--down); } .signal-history-table .positive { color: var(--up); } .signal-history-table .negative { color: var(--down); } .chart-position-tool-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; } .chart-position-tool-toggle input { position: relative; width: 36px; height: 20px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); appearance: none; background: var(--panel); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease; } .chart-position-tool-toggle input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 0.16s ease, background 0.16s ease; } .chart-position-tool-toggle input:checked { border-color: var(--up-line); background: var(--up-bg); } .chart-position-tool-toggle input:checked::before { transform: translateX(16px); background: var(--up); } .chart-positions-spoiler { border-top: 1px solid var(--line); } .chart-positions-spoiler summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; user-select: none; } .chart-positions-spoiler summary::marker { color: var(--accent); } .chart-positions-spoiler summary strong { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); font-size: 12px; letter-spacing: 0; } .signal-status-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); font-size: 12px; font-weight: 600; } .signal-status-badge.ready { border-color: var(--accent-line); color: var(--accent-soft); } .signal-status-badge.triggered { border-color: var(--warn-line); color: var(--warn-soft); } .signal-status-badge.pending_submit, .signal-status-badge.submitted, .signal-status-badge.accepted, .signal-status-badge.executing, .signal-status-badge.partially_filled, .signal-status-badge.cancel_requested { border-color: var(--accent-line); color: var(--accent-soft); } .signal-status-badge.protected { border-color: var(--up-line); color: var(--up-soft); } .signal-status-badge.closed_tp, .signal-status-badge.all_done { border-color: var(--up-line); color: var(--up-soft); } .signal-status-badge.closed_sl { border-color: var(--down-line); color: var(--down-soft); } .signal-status-badge.closed_exit { border-color: var(--muted-2); color: var(--text-2); } .signal-status-badge.unprotected, .signal-status-badge.exit_failed, .signal-status-badge.filtered { border-color: var(--warn-line); color: var(--warn-soft); } .signal-status-badge.completed { border-color: var(--up-line); color: var(--up-soft); } .signal-status-badge.invalidated { border-color: var(--down-line); color: var(--down-soft); } .signal-status-badge.expired, .signal-status-badge.sync_lost { border-color: var(--line-strong); color: var(--text-2); } .signal-status-badge.canceled, .signal-status-badge.rejected, .signal-status-badge.failed { border-color: var(--down-line); color: var(--down-soft); } .strategy-results-page { width: min(1600px, 100%); } .observability-events-page { width: min(1600px, 100%); } .admin-results-hero { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 3.2fr); gap: 20px; margin-bottom: 18px; } .admin-results-title h2 { margin: 0; color: var(--text); font-size: 15px; } .admin-results-filters { margin-bottom: 18px; } .admin-results-refresh-status, .admin-results-refresh-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .admin-results-refresh-meta { margin: -4px 0 12px; } .admin-results-filter-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; gap: 10px; } .admin-results-filter-form label { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .admin-results-filter-form select, .admin-results-filter-form input { width: 100%; min-height: 30px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .admin-backtest-form-panel { display: grid; gap: 12px; margin-bottom: 18px; } .admin-backtest-form { display: grid; gap: 12px; } .backtest-form-group { display: grid; gap: 4px; } /* SP-2: display:grid лейблов/групп перебивает UA-правило [hidden] — скрытые фильтром поля обязаны исчезать по-настоящему */ .admin-backtest-form label[hidden], .backtest-form-group[hidden], .backtest-intervals .setting-chip-grid label[hidden] { display: none; } .backtest-form-group .setting-section-title { padding-bottom: 8px; border-bottom: 1px solid var(--line); } .backtest-form-group-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; } .admin-backtest-form label { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .admin-backtest-form input, .admin-backtest-form select { width: 100%; min-height: 30px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .admin-backtest-form-actions { display: flex; align-items: center; } /* Карточка стратегии: «Сохранить» и «Бэктест по карточке» — компактный ряд пилюль, а не растянутый сабмит с зажатой ссылкой. */ .strategy-settings-form .admin-backtest-form-actions { gap: 12px; } .strategy-settings-form .admin-backtest-form-actions .button { flex: none; width: auto; white-space: nowrap; } .admin-results-filter-actions { display: flex; gap: 8px; } .admin-backtest-exclusion-form { display: grid; gap: 12px; } .admin-backtest-exclusion-form fieldset { display: grid; gap: 10px; min-width: 0; padding: 0; border: 0; } .admin-backtest-exclusion-form legend { margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .admin-backtest-exclusion-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .admin-backtest-exclusion-options label { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); color: var(--text-2); font-size: 13px; font-weight: 600; } .admin-backtest-exclusion-options input { width: 16px; height: 16px; accent-color: var(--accent); } .admin-results-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .admin-results-metrics div { display: grid; gap: 3px; min-height: 60px; padding: 10px 14px; border-right: 1px solid var(--line); background: var(--panel); } .admin-results-metrics div:last-child { border-right: 0; } .admin-results-metrics span, .admin-results-metrics em, .admin-strategy-stats span, .admin-strategy-card-footer span, .admin-results-table span { color: var(--muted); } .admin-results-metrics span { font-size: 11px; font-weight: 500; } .admin-results-metrics strong { color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .admin-results-metrics em { font-size: 11px; font-style: normal; } .positive { color: var(--up) !important; } .negative { color: var(--down) !important; } .admin-strategy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .admin-strategy-card { display: grid; gap: 12px; } .admin-strategy-card-header, .admin-strategy-card-footer { display: flex; align-items: start; justify-content: space-between; gap: 10px; } .admin-strategy-card-header h2 { margin: 0; font-size: 15px; } .admin-strategy-card-header > strong { color: var(--up); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; } .admin-strategy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .admin-strategy-stats span, .admin-strategy-card-footer span { display: grid; gap: 4px; font-size: 12px; } .admin-strategy-stats strong, .admin-strategy-card-footer strong { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; } .admin-results-table-panel { display: grid; gap: 12px; } .admin-results-table-wrap { overflow-x: auto; } .admin-results-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; } .admin-results-table th, .admin-results-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; } .admin-results-table th:first-child, .admin-results-table td:first-child, .admin-results-table th:nth-child(2), .admin-results-table td:nth-child(2) { text-align: left; } .admin-results-table th { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; } .admin-results-table th.sortable { cursor: pointer; user-select: none; } .admin-results-table th.sortable::after { content: "↕"; display: inline-block; margin-left: 6px; color: var(--muted-2); font-size: 10px; } .admin-results-table th.sorted-asc::after { content: "↑"; color: var(--accent); } .admin-results-table th.sorted-desc::after { content: "↓"; color: var(--accent); } .admin-results-table td { color: var(--text); } /* Граница у СТРОКИ, а не у ячейки: первая колонка — grid-контейнер, её коробка не тянется на высоту строки, и линия рисовалась поперёк ячейки (кривой отчёркнутый символ на /signals). */ .admin-results-table tbody td { border-bottom: 0; } .admin-results-table tbody tr { border-bottom: 1px solid var(--line-2); } .admin-results-table td:first-child { display: grid; gap: 3px; } .admin-results-table tbody tr:hover { background: var(--panel-2); } .backtest-status-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text-2); font-size: 11px; } .backtest-status-badge.completed, .backtest-status-badge.take_profit { border-color: var(--up-line); color: var(--up-soft); } .backtest-status-badge.queued, .backtest-status-badge.running, .backtest-status-badge.open { border-color: var(--accent-line); color: var(--accent-soft); } .backtest-status-badge.pending, .backtest-status-badge.partial, .backtest-status-badge.expired, .backtest-status-badge.skipped { border-color: var(--warn-line); color: var(--warn-soft); } .backtest-status-badge.failed, .backtest-status-badge.stop_loss { border-color: var(--down-line); color: var(--down-soft); } .observability-events-filter-form { grid-template-columns: repeat(5, minmax(0, 1fr)); } .observability-events-table { min-width: 1280px; } .observability-events-table th:nth-child(3), .observability-events-table td:nth-child(3), .observability-events-table th:nth-child(6), .observability-events-table td:nth-child(6), .observability-events-table th:nth-child(7), .observability-events-table td:nth-child(7), .observability-events-table th:nth-child(9), .observability-events-table td:nth-child(9), .observability-events-table th:nth-child(10), .observability-events-table td:nth-child(10) { text-align: left; } .observability-events-table td:nth-child(3), .observability-events-table td:nth-child(6), .observability-events-table td:nth-child(7), .observability-events-table td:nth-child(9) { display: grid; gap: 3px; } .observability-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; } .observability-badge.info, .observability-badge.success, .observability-badge.submitted, .observability-badge.filled { border-color: var(--up-line); color: var(--up-soft); } .observability-badge.warning, .observability-badge.blocked, .observability-badge.accepted, .observability-badge.partially_filled { border-color: var(--warn-line); color: var(--warn-soft); } .observability-badge.error, .observability-badge.failed, .observability-badge.rejected { border-color: var(--down-line); color: var(--down-soft); } .observability-event-details { max-width: 360px; } .observability-event-details summary { color: var(--accent); cursor: pointer; font-weight: 700; } .observability-event-details h3 { margin: 12px 0 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .observability-event-details pre { max-height: 260px; margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--text-2); font-size: 11px; line-height: 1.5; text-align: left; white-space: pre-wrap; } .admin-backtest-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .admin-backtest-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; } .admin-backtest-kv div { display: grid; gap: 6px; min-height: 56px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .admin-backtest-kv dt { color: var(--muted); font-size: 12px; font-weight: 700; } .admin-backtest-kv dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .json-preview summary { color: var(--accent); cursor: pointer; } .json-preview pre { max-width: 640px; max-height: 280px; margin: 10px 0 0; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--text-2); font-size: 12px; text-align: left; white-space: pre-wrap; } .admin-backtest-trades-table, .admin-backtest-events-table { min-width: 1120px; } .admin-backtest-events-table th:last-child, .admin-backtest-events-table td:last-child { text-align: left; } .exchange-rate-limits-page { width: min(1600px, 100%); } .exchange-limit-grid { display: grid; gap: 12px; margin-bottom: 18px; } .exchange-limit-card { display: grid; gap: 12px; } .exchange-limit-meter { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--panel-2); } .exchange-limit-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--up), var(--accent)); } .exchange-limit-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); } .exchange-limit-warning { margin: 0; color: var(--warn); } .exchange-limit-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .exchange-limit-table { min-width: 520px; } .chart-ohlc-legend { position: absolute; z-index: 3; top: 12px; left: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.2; pointer-events: none; backdrop-filter: blur(10px); } .chart-ohlc-legend[hidden] { display: none; } .chart-ohlc-legend strong { color: var(--text); font-weight: 600; } .chart-ohlc-legend strong.up { color: var(--up); } .chart-ohlc-legend strong.down { color: var(--down); } .chart-ohlc-time { color: var(--muted); } code { display: block; padding: 12px; overflow-x: auto; border-radius: var(--r-lg); background: var(--field); color: var(--accent-soft); } @media (max-width: 780px) { .page-header { align-items: start; flex-direction: column; } .nav-dropdown[open] { flex-basis: 100%; } .nav-dropdown-menu { position: static; min-width: 0; padding: 4px 0 0 12px; border: 0; background: transparent; box-shadow: none; } .two-columns, .chart-controls, .performance-grid, .admin-results-hero, .admin-results-metrics, .exchange-limit-metrics, .exchange-limit-breakdowns, .admin-strategy-grid, .admin-results-filter-form, .admin-backtest-form, .backtest-form-group-fields, .admin-backtest-detail-grid, .admin-backtest-kv, .profile-orders-filter-form, .profile-orders-summary, .profile-orders-list-head, .profile-order-summary, .profile-order-detail-grid, .shadow-split, .auto-trading-settings-grid, .risk-preset-grid, .setting-chip-grid, .setting-chip-grid.compact, .setting-chip-grid.pairs, .list-item.wide { grid-template-columns: 1fr; } .strategy-setting-row { grid-template-columns: 1fr; align-items: stretch; } .profile-orders-list-head { display: none; } .profile-order-summary::before { top: 12px; } .performance-header { align-items: start; flex-direction: column; } .signal-history-header, .chart-positions-header { align-items: start; flex-direction: column; } .performance-filters { justify-content: flex-start; } .admin-results-metrics div { border-right: 0; border-bottom: 1px solid var(--line); } .admin-results-metrics div:last-child { border-bottom: 0; } } .strategy-settings-form { display: grid; gap: 12px; } .strategy-settings-form .strategy-enabled-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; font-weight: 600; } .strategy-settings-form .strategy-enabled-toggle input { width: 16px; height: 16px; } .strategy-settings-form .strategy-toggle-row { display: flex; flex-wrap: wrap; gap: 8px 24px; } .setting-section-title { margin: 0 0 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .setting-hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; } .strategy-symbols-warning { color: var(--warn); } .strategy-symbols-block { display: grid; gap: 10px; justify-items: start; } .strategy-symbols-block .setting-section-title, .strategy-symbols-block .setting-hint { margin: 0; } .strategy-settings-form .setting-chip-grid input[type='checkbox'] { width: 14px; height: 14px; flex: none; } .admin-backtest-form .backtest-intervals { grid-column: 1 / -1; display: grid; gap: 8px; } .admin-backtest-form .setting-chip-grid label { display: flex; align-items: center; gap: 8px; } .admin-backtest-form .setting-chip-grid input[type='checkbox'] { width: 14px; height: 14px; min-height: auto; } .scan-market-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .scan-market-filters-count { margin-left: auto; color: var(--muted); font-size: 13px; } .scan-verdict-fits { color: var(--up); font-weight: 600; } .scan-verdict-borderline { color: var(--warn); } .scan-verdict-unfit { color: var(--muted-2); } .scan-onboarding-form { display: flex; gap: 8px; margin-bottom: 14px; } .scan-onboarding-form input[type='text'], .scan-onboarding-form select { min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .symbol-scan-history { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); } .batch-progress { display: grid; gap: 12px; } .batch-progress-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .batch-progress-actions { display: flex; gap: 8px; } .batch-progress-bar { height: 10px; border-radius: var(--r); overflow: hidden; background: var(--line); } .batch-progress-fill { height: 100%; border-radius: var(--r); background: var(--accent); transition: width 0.6s ease; } .batch-progress-meta { margin: 0; color: var(--muted); font-size: 13px; } .batch-progress-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; } .batch-progress-hint.stale { color: var(--down); font-weight: 700; } .batch-run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; } .batch-run-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); min-height: 20px; } .batch-run-item.failed { color: var(--down); } .batch-run-item.completed { color: var(--up); } .batch-run-item.pending { opacity: 0.55; } .batch-run-label { min-width: 96px; font-weight: 600; } .batch-run-bar { flex: 1; height: 6px; border-radius: var(--r); overflow: hidden; background: var(--line); } .batch-run-fill { display: block; height: 100%; border-radius: var(--r); background: var(--accent); transition: width 0.6s ease; } .batch-run-pct { min-width: 34px; text-align: right; } /* Универсальный тег-пикер (tag_picker_controller): бокс-«инпут» без ввода, чипы выбранного, выпадающий список опций с группами. */ .tag-picker { position: relative; display: grid; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; } .tag-picker-box { width: 100%; min-height: 30px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--muted-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; text-align: left; font-size: 13px; } .tag-picker-placeholder { font-weight: 500; } .tag-picker-chips { display: contents; } .tag-picker-chip { border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent-soft); padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; } /* Лайв-петля (CB): чипы состава/клеймов на странице рана */ .combined-symbol-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; } .combined-symbol-chips span { border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent-soft); padding: 3px 10px; font-size: 12px; font-weight: 600; } .combined-loop-hint { margin-top: 12px; color: var(--text-muted, var(--muted)); font-size: 13px; } .tag-picker-chip:hover { background: var(--down-bg); border-color: var(--down-line); color: var(--down-soft); } .tag-picker-list[hidden] { display: none; } .tag-picker-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; } .tag-picker-group { flex-basis: 100%; padding: 6px 6px 2px; color: var(--muted-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tag-picker-option { border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text-2); padding: 5px 10px; font-size: 12px; cursor: pointer; } .tag-picker-option:hover { border-color: var(--accent-line); color: var(--accent-soft); } .tag-picker-option.selected { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-soft); } /* Карта ликвидаций */ .liquidity-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 28px; } .liquidity-controls form { display: flex; gap: 12px; } .liquidity-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } .liquidity-controls select { min-width: 140px; } .liquidity-controls input[type="range"] { width: 180px; accent-color: var(--accent); } .liquidity-controls output { color: var(--text); font-variant-numeric: tabular-nums; } .liquidity-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .liquidity-chips { display: flex; flex-wrap: wrap; gap: 8px; } .liquidity-chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); font-size: 13px; font-variant-numeric: tabular-nums; } .liquidity-chip .side-short { color: var(--down); } .liquidity-chip .side-long { color: var(--up); } .liquidity-chip .dim, .liquidity-tip .dim { color: var(--muted); } .liquidity-coverage { margin: 0; color: var(--muted); font-size: 13px; } .liquidity-chart { position: relative; } .liquidity-chart canvas { display: block; width: 100%; } .liquidity-tip { position: absolute; z-index: 3; display: none; padding: 7px 10px; border: 1px solid var(--accent-line); border-radius: var(--r); background: var(--panel); font-size: 13px; line-height: 1.5; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; } .liquidity-backfill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .liquidity-backfill p { margin: 0; } /* Модалка графика поверх страницы позиций */ .chart-modal-open { padding: 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline dotted; } .chart-modal-open:hover { color: var(--accent-soft); } .chart-modal-dialog { width: min(1240px, 94vw); height: min(880px, 92vh); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--text); } .chart-modal-dialog::backdrop { background: var(--field); } .chart-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); } .chart-modal-close { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; } .chart-modal-close:hover { color: var(--text); } .chart-modal-frame { display: block; width: 100%; height: calc(100% - 45px); border: 0; background: var(--bg); } /* Витрина сигналов (задача 105): панель фильтров, сортируемые заголовки, бейдж рынка рядом с символом. */ .signals-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; } .signals-filter-bar label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .signals-filter-bar select, .signals-filter-bar input[type="text"] { background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); padding: 6px 8px; font-size: 13px; } .signals-filter-bar .grow { flex: 1 1 160px; } .signals-filter-bar input.narrow { width: 76px; } .signals-filter-count { margin-left: auto; padding-bottom: 7px; font-size: 12px; color: var(--muted); } .sortable-head { display: inline-flex; align-items: center; gap: 4px; color: inherit; white-space: nowrap; } .sortable-head.active { color: var(--accent); } .signals-symbol-cell .market-badge { display: inline-block; padding: 1px 6px; border-radius: var(--r); border: 1px solid var(--line-strong); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .signals-symbol-cell .market-badge.futures { border-color: var(--accent-line); color: var(--accent); } /* Карточка сигнала (задача 77): уровни с копированием, лента событий из журнала, график окна сигнала и заглушка быстрого входа. */ .signal-card-split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 10px; align-items: start; } .signal-col { display: grid; gap: 10px; align-content: start; } .signal-levels { display: grid; gap: 5px; } .signal-level-row { display: grid; grid-template-columns: 62px 108px 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .signal-level-row > span { color: var(--muted); font-size: 12px; } .copy-value { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .copy-value strong { font-size: 14px; } .copy-value button { border: 0; background: none; color: var(--muted-2); padding: 0; line-height: 0; cursor: pointer; } .copy-value button:hover { color: var(--text); } .copy-value svg { width: 13px; height: 13px; } .copy-value .copy-value-check, .copy-value.copied .copy-value-icon { display: none; } .copy-value.copied .copy-value-check { display: inline; } .copy-value.copied button { color: var(--up); } .signal-feed { display: grid; gap: 0; } .signal-feed-item { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0 10px; border-bottom: 1px solid var(--line); } .signal-feed-item:last-child { border-bottom: 0; } .signal-feed-time { color: var(--muted); font-size: 12px; } .signal-feed-body strong { display: block; font-size: 13px; margin-bottom: 3px; } .signal-feed-body p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; } .signal-feed-dot { color: var(--accent); } .signal-feed-dot.done { color: var(--up); } .signal-feed-dot.warn { color: var(--warn); } .signal-feed-dot.bad { color: var(--down); } .signal-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } .signal-chart-head span { color: var(--muted); font-size: 12px; } .signal-chart { width: 100%; min-height: 360px; } .entry-form { display: grid; gap: 10px; } .entry-form-note { font-size: 11px; color: var(--warn); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 7px 9px; background: var(--warn-bg); margin: 0; } .entry-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .entry-form label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .entry-form input, .entry-form select { background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); padding: 7px 8px; font-size: 13px; font-variant-numeric: tabular-nums; } .entry-form-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); } .entry-form-toggle > div { display: grid; gap: 2px; } .entry-form-toggle strong { font-size: 12px; } .entry-form-toggle span { font-size: 11px; color: var(--muted); } .entry-form .switch { position: relative; width: 40px; height: 22px; flex: 0 0 auto; } .entry-form .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .entry-form .switch > span { position: absolute; inset: 0; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--panel-2); pointer-events: none; } .entry-form .switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted-2); transition: transform 0.12s ease; } .entry-form .switch input:checked + span { border-color: var(--accent); background: var(--accent-line); } .entry-form .switch input:checked + span::after { transform: translateX(18px); background: var(--accent); } .entry-form-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .entry-form-actions span { font-size: 11px; color: var(--muted-2); } .entry-form.entry-form-blocked .entry-form-note { border-color: var(--warn); background: var(--warn-bg); } @media (max-width: 900px) { .signal-card-split { grid-template-columns: minmax(0, 1fr); } } /* Уведомления: страница-сплит «каналы | подписки выбранного» (задача 83) */ .notifications-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; } .notification-channel.is-active { box-shadow: inset 3px 0 0 var(--accent, var(--accent)); } .notification-meta { font-size: 12px; opacity: 0.75; } .notification-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin: 14px 0 6px; } .notification-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; } .notification-stats b { display: block; font-size: 15px; } .notification-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; } @media (max-width: 900px) { .notifications-split { grid-template-columns: minmax(0, 1fr); } } /* Лимиты исходящих: адресаты слева, сводка справа (задача 83, Э8) */ .outbound-limit-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; } .outbound-limit-bar { height: 6px; border-radius: var(--r); background: var(--line); overflow: hidden; min-width: 90px; } .outbound-limit-bar i { display: block; height: 100%; background: var(--accent); } .outbound-limit-side .admin-results-metrics { grid-template-columns: 1fr; } @media (max-width: 1000px) { .outbound-limit-split { grid-template-columns: minmax(0, 1fr); } } /* --- Ручной терминал на странице графика (задача 148, макет «правый рельс») --- Плотная стенка: числа моноширинные и выровненные, строки узкие, поля не торчат на экране — подробности уровня открываются попапом. */ .terminal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; } .terminal-main { display: grid; gap: 12px; min-width: 0; } .terminal-rail, .terminal-book { padding: 12px; font-size: 12px; } .terminal-rail-head h3, .terminal-book-head h3, .terminal-section { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .terminal-rail-head h3 { font-size: 14px; letter-spacing: 0; text-transform: none; color: inherit; } .terminal-section { margin-top: 16px; } .terminal-book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .terminal-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .terminal-kv { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--line); } /* Подпись не переносится: длинное значение («+1.5% · триггер … · стоп …») должно переноситься само, а не ломать подпись «включён при» в столбик. */ .terminal-kv span:first-child { color: var(--text-2); white-space: nowrap; } .terminal-kv span:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } /* Каждая строка стенки — своя сетка, поэтому дорожки обязаны быть minmax(0, …): у голой `fr` минимум — ширина содержимого, и длинное «tsmom_daily + smart_money_v1_mod» раздвигало колонки своей строки — та съезжала против шапки и соседей. С нулём все строки делят ширину одинаково, а длинный текст переносится внутри ячейки. */ .terminal-wall-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--line); cursor: pointer; } .terminal-wall-row > * { overflow-wrap: anywhere; } .terminal-wall-row:hover { background: var(--line); } .terminal-wall-head { color: var(--text-2); cursor: default; } .terminal-wall-row.is-active { background: var(--accent-bg); } .terminal-level-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto; cursor: default; } /* Безубыток: процент и куда переносить стоп — строкой, кнопки — своей строкой под ними. Раньше форма жила в .terminal-kv (сетка «подпись | значение»): кнопка уезжала под select, «%» — под поле, а контролы наследовали моноширинный шрифт числа. */ .terminal-breakeven { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .terminal-breakeven label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .terminal-breakeven input, .terminal-breakeven select { height: 28px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); } .terminal-breakeven input { width: 56px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .terminal-breakeven select { flex: 1 1 auto; min-width: 0; } .terminal-breakeven .button { min-height: 28px; padding: 0 12px; font-size: 12px; } .terminal-breakeven-actions { display: flex; flex-basis: 100%; gap: 8px; } /* Чужой уровень — тот, что поставлен руками на бирже: помечаем полосой, чтобы его нельзя было спутать с нашим планом. */ .terminal-level-row.is-foreign { border-left: 2px solid var(--down); padding-left: 4px; } .terminal-edit { border: 0; padding: 0 2px; background: none; color: var(--accent); font-size: 12px; cursor: pointer; } .terminal-slots { margin-left: auto; font-variant-numeric: tabular-nums; } .terminal-popover { position: fixed; right: 32px; bottom: 32px; z-index: 40; width: 320px; box-shadow: var(--shadow-panel); } /* .settings-popover-panel задаёт display: grid и этим перебивает UA-правило [hidden]: попап «Уровень» висел открытым и пустым с первой загрузки. */ .terminal-popover[hidden] { display: none; } @media (max-width: 1200px) { .terminal-layout { grid-template-columns: minmax(0, 1fr); } .terminal-wall-row:not(.terminal-level-row) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr); } .terminal-wall-row span:nth-child(n + 6) { display: none; } } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .page-header p { margin: 0; font-size: 12px; } .mono { font-family: var(--mono); font-size: 12px; } .profile-order-summary:hover { background: var(--panel-2); } .page-header h1 { font-size: 16px; } /* Фокус полей — акцентом, а не системным синим */ input:focus-visible, select:focus-visible, textarea:focus-visible, .button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 0; } /* Телефон (PWA): шапка ужимается до марки, килзон и темы; разделы уезжают в нижнюю панель вкладок .mobile-tabs (layouts/application). */ .mobile-tabs { display: none; } @media (max-width: 780px) { .topbar { height: 44px; gap: 10px; padding: 0 12px; } .brand-name, .nav-links, .theme-toggle span, .topbar-right > a { display: none; } .topbar-right { gap: 8px; } .theme-toggle { padding: 3px 4px; } .subnav { top: 44px; padding: 0 8px; } .page-shell { padding: 8px 8px 84px; } .flash { padding: 8px 12px; } .mobile-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); } .mobile-tabs a { display: grid; gap: 3px; justify-items: center; color: var(--muted); font-size: 10px; font-weight: 600; } .mobile-tabs a i { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: var(--r-lg); opacity: 0.6; } .mobile-tabs a.is-active { color: var(--accent); } .mobile-tabs a.is-active i { opacity: 1; } } @media (max-width: 780px) { .profile-orders-summary, .admin-results-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-orders-summary div, .admin-results-metrics div { min-height: 0; padding: 8px 10px; } } .profile-orders-count { flex-shrink: 0; white-space: nowrap; } /* ============================================================ Square (задача 94): лента /square и список авторов /square/authors. Раскладка ленты — как у Binance Square: колонка постов до 680px + правая колонка 320px; ниже 960px — одна колонка, правая колонка уходит под ленту. Классы с префиксом sq-; реакции/кнопки/чипы — место под стадии 2–4. ============================================================ */ .sq-layout { display: grid; grid-template-columns: minmax(0, 680px) 320px; gap: 16px; margin-top: 12px; align-items: start; justify-content: center; } .sq-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .sq-tabs a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; } .sq-tabs a.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .sq-post { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--line); } .sq-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-strong); font-weight: 700; font-size: 13px; } .sq-body { min-width: 0; } .sq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sq-name { font-weight: 600; color: var(--text); } .sq-when { color: var(--muted); font-size: 12px; white-space: nowrap; } .sq-head > .sq-when { flex-shrink: 0; } .sq-text { margin: 6px 0 8px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; } .sq-cash { color: var(--accent); font-weight: 600; } .sq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; } .sq-chips .shadow-tag { margin-left: 0; } .sq-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 8px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line-strong); font-size: 12px; font-variant-numeric: tabular-nums; } .sq-react { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 6px; } .sq-react .spacer { flex: 1; } .sq-actions { display: flex; gap: 6px; } .sq-empty { margin: 0; padding: 24px 4px; color: var(--muted); } .sq-pagination { padding: 12px 4px 0; } .sq-pagination .listing-pagination-meta { margin-right: auto; } /* Липнет под шапкой и сабнавом (48 + 36). */ .sq-rail { display: grid; gap: 12px; position: sticky; top: 96px; } .sq-rail .list-item { grid-template-columns: 1fr auto; align-items: center; } .sq-rail .list-item strong { font-variant-numeric: tabular-nums; } .sq-rail .sq-filters { margin-bottom: 0; } .sq-rail .sq-filters label { flex: 1 1 110px; } .sq-rail .sq-filters select { width: 100%; } /* Мои авторы */ .sq-stack { display: grid; gap: 12px; margin-top: 12px; } .sq-add-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; } .sq-add-form label { display: grid; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 600; } .sq-add-form input { min-width: 320px; min-height: 30px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--field); color: var(--text); font-size: 13px; } .sq-add-form .hint { align-self: center; } .sq-authors-table td { white-space: nowrap; } .sq-authors-table .sq-error { max-width: 240px; white-space: normal; text-align: left; } .sq-row-actions form { display: inline-block; margin-left: 4px; } /* Стадия 2: разбор поста — trade-card, перевод, привязка к нити, нить. */ .side-long { color: var(--up); } .side-short { color: var(--down); } .sq-translate { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline dotted; } .sq-translate + .sq-text { margin-top: 4px; } .sq-trans { margin: 0 0 8px; padding-left: 8px; border-left: 2px solid var(--line-strong); color: var(--muted); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; } .sq-parse-state { margin: 0 0 8px; font-size: 12px; } .sq-trade { display: grid; gap: 6px; margin: 6px 0 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel-2); } .sq-trade-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; } .sq-trade-head strong { font-size: 14px; } .sq-trade-head .shadow-tag { margin-left: 0; } .sq-trade-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; font-size: 12px; font-variant-numeric: tabular-nums; } .sq-trade-grid > div { min-width: 0; overflow-wrap: anywhere; } .sq-trade-grid span { display: block; color: var(--muted); font-size: 11px; } .sq-trade-grid em { display: block; color: var(--muted); font-size: 11px; font-style: italic; } .sq-suspicious { display: inline; color: var(--warn); font-weight: 700; cursor: help; } .sq-inline-form { display: inline; } .sq-inline-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline dotted; } .sq-link-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; } .sq-link-form select { max-width: 100%; } /* Нити поста списком (пост может быть в нескольких нитях) и свёрнутое «+ ещё нить» у поста, который уже в нити. */ .sq-thread-links { display: grid; gap: 2px; margin: 2px 0 6px; } .sq-add-thread { margin-top: 4px; } .sq-add-thread > summary { display: inline-block; list-style: none; color: var(--accent); font-size: 12px; text-decoration: underline dotted; cursor: pointer; } .sq-add-thread > summary::-webkit-details-marker { display: none; } /* Картинки поста — только на страницах нити и поста (лента их не грузит): миниатюрами, клик разворачивает на всю ширину (square_images_controller). */ .sq-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .sq-image { display: block; width: 128px; height: 128px; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: zoom-in; } .sq-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .sq-image.is-expanded { flex-basis: 100%; width: 100%; height: auto; cursor: zoom-out; } .sq-image.is-expanded img { height: auto; max-height: 85vh; object-fit: contain; } .sq-post-page { max-width: 860px; } /* Страница нити: график + снимок + хронология слева, статус и «прицепить» справа 360px; ниже 960px — одна колонка. */ .sq-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; margin-top: 12px; align-items: start; } .sq-thread-side { display: grid; gap: 10px; align-content: start; } .sq-thread-side h2 { margin-bottom: 0; } .sq-thread-actions { display: flex; gap: 6px; } .sq-thread-actions form { display: inline; } .sq-quote { color: var(--muted); font-size: 12px; font-style: italic; } .sq-metrics { margin-top: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .sq-feed-post { display: grid; gap: 4px; } /* «● Апдейт · стоп → БУ 142 · модель 0.88 · отцепить» — одной строкой, как на макете; блочный strong ленты сигналов здесь не нужен. */ .sq-feed-post strong { display: inline; margin-bottom: 0; } .sq-feed-post .sq-trans { margin: 0; font-size: 12px; } .sq-feed-post .shadow-tag { margin-left: 0; } .sq-attach .list-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .sq-attach .list-item form { display: inline; } /* Сводки (стадия 4): полоса исходов рисуется на фоне ВСЕХ нитей — пустой хвост это неоценённые, а не «нет данных», поэтому фон полосы виден. */ .sq-bar { display: flex; height: 10px; width: 160px; border-radius: 3px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); } .sq-bar i { display: block; height: 100%; } .sq-bar .take, .sq-legend .take { background: var(--up); } .sq-bar .stop, .sq-legend .stop { background: var(--down); } .sq-bar .breakeven, .sq-legend .breakeven { background: var(--accent); } .sq-bar .none, .sq-legend .none { background: var(--muted); } .sq-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; } .sq-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; } .sq-legend .unrated { border: 1px solid var(--line); } /* Ворота точности (стадия 5): счётчик сверенных до порога n. */ .sq-progress { height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .sq-progress i { display: block; height: 100%; background: var(--accent); } /* Форма оценки нити в правой колонке страницы нити. */ .sq-rating-form { display: grid; gap: 8px; } .sq-rating-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .sq-rating-form select, .sq-rating-form textarea { width: 100%; max-width: 100%; } @media (max-width: 960px) { .sq-layout, .sq-split { grid-template-columns: minmax(0, 1fr); } .sq-rail { position: static; } .sq-add-form input { min-width: 0; width: 100%; } .sq-trade-grid, .sq-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Пробник funding-принта (задача 178): журнал кругов с раскрытием протокола. */ .probe-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--muted); font-size: 12px; } .probe-table-panel, .probe-skips { margin-top: 14px; } .probe-table .probe-row { cursor: pointer; } /* у td:first-child таблицы результатов display: grid — он ломает colspan */ .admin-results-table .probe-detail td { display: table-cell; text-align: left; background: var(--panel-2); color: var(--text-2); } .probe-legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 6px 0; } .probe-legs b { color: var(--text); font-weight: 600; } @media (max-width: 900px) { .probe-legs { grid-template-columns: 1fr; } }