/* ============================================================
   ProfitData — site palette

   One definition for every surface: the market pages, the platform,
   the chart and the journal. Keyed on the light theme, so the
   platform's black and dark themes stay exactly as they were and the
   theme toggle keeps working.

   Values come from the engine's news draft (market-events
   app/templates/news.html): indigo accent shading into cyan, white
   cards on a soft grey ground.
   ============================================================ */

/* Палитра платформы (common.css :root / [data-theme="dark"]) — канонический
   вид. Блок ниже добавляет к ней токены, которых не хватает сайтовым
   страницам, и не переопределяет рабочие поверхности. Светлая тема —
   альтернатива, переключается. Тёмная с 5 сентября 2026 ТЁМНО-СИНЯЯ. */
[data-theme="dark"] {
  --border-hi: rgba(255,255,255,.22);
  /* ── БЕЗ БИРЮЗЫ ──
     Заголовки и кнопки красились градиентом «фиолетовый → бирюзовый», и
     именно он читался как «голубой». В тёмной теме градиент теперь почти
     белый с едва заметным холодным концом: на чёрном это ярче любой краски,
     а голубизны в нём нет. Светлая тема НЕ ТРОНУТА — там фиолетовый по белому
     держит контраст, которого белым по белому не получить. */
  --accent-2:  #d2d2d6;
  --grad:      linear-gradient(120deg, #ffffff, #d3d3d6);
  /* Чернила на такой заливке обязаны быть тёмными: белым по белому кнопка
     превращается в пустое пятно. Отдельный токен, потому что те же правила
     работают и в светлой теме, где заливка тёмная, а чернила белые. */
  --on-grad:   #0a0c12;
  /* Размытые пятна под страницами конструктора, ИИ-режима, справочника и
     правовых страниц. Были фиолетовым и бирюзовым — в тёмной теме это и
     давало общий голубой налёт. Тут они нейтральные и светлые: свет, а не
     краска. */
  --glow-1:    #d2d7e6;
  --glow-2:    #aab1c4;
  --ring:      rgba(255,255,255,.55);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --hover:     #14151c;      /* row hover, one step off --bg2 */
  --surface:   rgba(11, 11, 17, .86);   /* translucent header / footer */
}

/* Без атрибута темы страница тёмная (см. common.css), поэтому значения по
   умолчанию — тёмные. Светлая тема переопределяет их НИЖЕ по файлу: вес у
   `:root` и `[data-theme="light"]` одинаковый, и решает порядок. Первая версия
   этого блока ставила `:root, [data-theme="light"]` в одну строку — и белые
   чернила побеждали в тёмной теме тоже, отчего надпись на белой кнопке
   пропадала. */
:root {
  /* ── ЦВЕТА КОДА ──
     Подсветка кода — это смысл, а не оформление, поэтому цвет ей оставлен. Но
     подобран он был под ЧЁРНЫЙ фон, и в светлой теме бледно-сиреневое слово
     на белом читалось еле-еле — поймано рендером светлой темы, не рассуждением.
     Поэтому цвета кода тоже идут из темы. */
  --code-kw:  #b9a6ff;   /* служебные слова */
  --code-ty:  #cbbcff;   /* виды значений */
  --code-str: #7dd3a0;   /* строки */
  --code-num: #f0b072;   /* числа */
  --on-grad: #0a0c12; --glow-1: #d8d8db; --glow-2: #b2b2b6;
        --ring: rgba(255,255,255,.55);
        /* Чернила на заливке --accent. В тёмной теме заливка светлая, значит
           чернила тёмные; в светлой наоборот. Без этого токена все «активная
           вкладка», «выбранный день», «кнопка добавить» стали бы белым по
           белому — ровно та беда, которую владелец уже ловил на кнопке Run. */
        --on-accent: #0a0c12; }
[data-theme="light"] { --on-grad: #fff; --glow-1: #6d5efc; --glow-2: #22b8cf;
                       --ring: #6d5efc; --on-accent: #fff;
                       --code-kw: #6d28d9; --code-ty: #7c3aed;
                       --code-str: #15803d; --code-num: #b45309; }




[data-theme="light"] {
  --hover:     #fbfbfe;
  --surface:   rgba(255,255,255,.85);
  --bg:        #f6f7fa;
  --bg2:       #ffffff;
  --bg3:       #f1f2f7;
  --bg4:       #eceef5;
  --border:    #e7e9f0;
  --border-hi: #d6dae6;
  --text:      #111624;
  --text2:     #6b7280;
  /* Был #98a0b0: на светлом фоне это 2.4:1, и описания ботов, подписи разделов
     и подсказки читались с трудом. Нашли ворота gates/contrast.mjs. В тёмной
     теме приглушённый серый я поднял ещё утром, а светлую не проверил. */
  --text3:     #737c8b;

  --accent:       #6d5efc;
  --accent-hover: #5b4cf0;
  --accent-2:     #22b8cf;
  --grad:         linear-gradient(120deg, #6d5efc, #22b8cf);

  --green:  #16a34a;
  --red:    #e11d48;
  --yellow: #a8740a;   /* был #d4960a: жёлтый по белому давал 2.5:1, пометки не читались */

  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.09);
}

/* ── СТЕКЛО ──
   Владелец: «попробуешь у карточек и меню сверху сделать эффект стекла?».
   Рецепт один на весь сайт: полупрозрачная подложка ПЛЮС размытие того, что
   под ней. Без размытия это просто дырка, сквозь которую видно текст снизу.

   Доля непрозрачности подобрана так, чтобы сквозь карточку читались световые
   пятна (.pd-glow), но НЕ читался текст под ней. В светлой теме доля выше:
   белое по белому теряет край быстрее, чем тёмное по тёмному.

   Стекло ставится ТОЛЬКО на карточки и шапку. Не на поля ввода, кнопки и
   мелкие плашки: там размытие ничего не показывает, а стоит дорого — каждый
   backdrop-filter это отдельный слой. По той же причине его нет на плотных
   рабочих поверхностях (платформа, график). */
/* ── ЧТО ИМЕННО ЗНАЧИТ «СТЕКЛО» ──
   Первый заход был неверным по сути: я сделал подложку карточки ТЕМНЕЕ фона
   (доля от --bg2), и карточка тонула в странице. Владелец прислал примеры —
   Revolut и cTrader — и там ровно наоборот. Общее у всех трёх снимков:
     · карточка СВЕТЛЕЕ фона: это белая плёнка малой доли поверх почти
       чёрного, а не затемнение;
     · жирное скругление — 18–24px, у кнопок и полей вовсе пилюля;
     · рамки нет; край держит сама плёнка и еле заметный блик по верхней
       кромке, а не линия в пиксель;
     · тени нет — глубину даёт светлота, а не подложенная чернота.
   Отсюда и рецепт ниже. В СВЕТЛОЙ теме плёнка не работает (белое по белому),
   там карточка остаётся белой, а край держит мягкая тень. */
:root {
  --glass-bg:     rgba(255,255,255,.055);
  --glass-bg-hi:  rgba(255,255,255,.085);   /* шапка и выделенное — на ступень светлее */
  --glass-line:   rgba(255,255,255,.07);
  --glass-sheen:  inset 0 1px 0 rgba(255,255,255,.06);
  --glass-blur:   blur(18px) saturate(130%);
  --glass-radius: 18px;
}
[data-theme="light"] {
  --glass-bg:    rgba(255,255,255,.72);
  --glass-bg-hi: rgba(255,255,255,.82);
  --glass-line:  rgba(16,24,40,.07);
  --glass-sheen: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
}

/* ── СВЕТОВЫЕ ПЯТНА ПОД СТРАНИЦЕЙ ──
   Владелец: «на этой странице были офигенные белые засветы, сделай на других
   так же (кроме главной и платформы)». Определение было в ЧЕТЫРЁХ местах сразу
   — в конструкторе, ИИ-режиме, справочнике и правовых страницах — и с разной
   силой: справочник и правовые я когда-то сам притушил, рассудив, что их долго
   читают. Раз просят одинаково, определение одно, и сила та, что понравилась
   владельцу (конструктор).

   Лежит ЗА содержимым (z-index: -1) и красит подложку сам: у body своя
   заливка, и без этого пятна оказались бы под ней и не были бы видны.
   Не ставится на главной (там своя фотография) и на рабочих поверхностях —
   платформе, графике, списке, — где фон под плотным интерфейсом должен быть
   ровным. */
.pd-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.pd-glow::before, .pd-glow::after {
  content: ''; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  filter: blur(120px); opacity: .30; }
.pd-glow::before { background: var(--glow-1); top: -22vw; left: -12vw; }
.pd-glow::after  { background: var(--glow-2); bottom: -26vw; right: -14vw; opacity: .22; }
:root[data-theme="light"] .pd-glow::before,
:root[data-theme="light"] .pd-glow::after { opacity: .16; }

/* ── Shared chrome ── */
[data-theme="light"] .app-header {
  background: var(--surface);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

[data-theme="light"] .nav-link.active { color: var(--text); font-weight: 600; }

[data-theme="light"] .badge-live {
  display: inline-flex; align-items: center; gap: 7px; animation: none;
  color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
}

[data-theme="light"] .ticker-bar { background: var(--bg2); }

[data-theme="light"] .btn-primary {
  background: var(--grad); color: #fff; border-color: transparent; font-weight: 600;
}
[data-theme="light"] .btn-primary:hover { filter: brightness(1.08); background: var(--grad); }

/* ── Platform workspace ──
   platform.css already draws everything from the tokens above, so the
   surfaces follow on their own. These are the few places where the
   workspace needs the extra lift that white-on-white otherwise loses. */
[data-theme="light"] #platformToolbar { background: var(--bg2); border-bottom: 1px solid var(--border); }
[data-theme="light"] .ws-panel { background: var(--bg2); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
[data-theme="light"] .panel-hd { background: var(--bg2); border-bottom: 1px solid var(--border); }
[data-theme="light"] .panel-body { background: var(--bg2); }

/* ── Wordmark ──
   Two artworks: dark-ink for light backgrounds, light-ink for dark ones.
   Driven by CSS background rather than two <img> tags so the browser fetches
   only the one in use and swaps instantly when the theme toggles. */
.logo-img {
  display: block;
  /* Рамка выше самой краски НАМЕРЕННО. При contain лого вписывается по ширине
     и занимает 19.3px из 30 — запас нужен подъёму под базовую линию меню.
     С прежними 24px подъём в 3.5px вылезал за рамку, и верх значка срезало. */
  height: 30px;
  width: 183px;                       /* 03.10.2026: знак крупнее и отдельно от слова, 1253x206, 6.08:1. Владелец: размер в шапке
                                         на десктопе — как в окне входа (значок 30px, слово 19.5px): 30px высоты = 183px ширины */
  /* Положение подобрано владельцем: между подъёмом под базовую линию меню
     (-3.5px, висело высоко) и совмещением центров краски (+1.6px, село низко).
     Рамка ниже намеренно выше самой краски — при contain сдвиг ограничен
     запасом между рамкой и вписанной картинкой, иначе срежет край. */
  background: url("/logo-light.png") left calc(50% - 2px) / contain no-repeat;
}
[data-theme="dark"] .logo-img,
[data-theme="dark"] .logo-img { background-image: url("/logo-dark.png"); }

/* ── ЗНАК ВЕРНУЛСЯ ──
   С 9 сентября знак был снят по просьбе владельца; 13 сентября он попросил
   вернуть. Возвращён удалением того блока целиком — правила выше не трогались
   ровно для этого: подбор положения краски делался вручную, и восстанавливать
   его по памяти не пришлось.

   Пока знак был снят, в ТЁМНОЙ теме он всё же проступал обрезанным куском:
   короткая запись `background: none` гасила и background-size, а правило с
   картинкой для тёмной темы весит больше и картинку возвращало — полотно
   1188px в рамке 140px. Сейчас это не беда, а причина не гасить картинку
   короткой записью, если знак снова попросят убрать. */

@media (max-width: 520px) { .logo-img { width: 160px; height: 27px; } }
.auth-logo .logo-img { width: 186px; height: 32px; }
/* На телефоне меню спрятано в бургер, места слева много — лого там было
   неоправданно мелким. */
/* На телефоне меню спрятано в бургер — выравнивать надпись не с чем,
   и подъём под базовую линию меню там только сажает лого выше центра.
   Возвращаем обычное центрирование. И само лого крупнее: слева пусто. */
@media (max-width: 768px) { .logo-img { background-position: left center; } }
@media (max-width: 520px) { .logo-img { width: 160px; height: 27px; } }
/* the auth dialog shows it larger */
.auth-logo .logo-img { height: 32px; width: 186px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════
   Navigation — grouped sections, search, mobile tab bar (js/nav.js)
   ══════════════════════════════════════════════════════════════ */
.pdnav-group { position: relative; }
.pdnav-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font);
}
/* Раньше здесь стоял символ ⌄ — он рисуется шрифтом и в мелком кегле
   выглядит обрубком. Теперь честный шеврон, размер задаётся атрибутами svg. */
.pdnav-caret { flex: none; opacity: .6; margin-left: 1px; transition: transform .16s; }
.pdnav-group.open .pdnav-caret { transform: rotate(180deg); }
.pdnav-group.open .pdnav-trigger { color: var(--text); }

.pdnav-menu {
  position: absolute; top: calc(100% + 7px); left: -6px; z-index: 300;
  min-width: 268px; padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(16,24,40,.14);
}
.pdnav-group.open .pdnav-menu { opacity: 1; visibility: visible; transform: none; }
/* Пункт — ссылка, а глобальное правило красит ссылки в акцент. Задаём
   цвет явно, иначе всё, что внутри не окрашено, уходит в синий. */
.pdnav-item { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text2); }
.pdnav-item:hover { background: var(--bg3); }
.pdnav-item.active b { color: var(--text); }
.pdnav-item b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.pdnav-item i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text3);
  line-height: 1.45; margin-top: 1px;
}

/* Standing call into the product, as on the reference site */
.pdnav-launch {
  /* Высота считается один в один с .btn (та с рамкой, эта без — добавляем
     прозрачную), иначе «Log in» и эта кнопка стоят разной высоты. */
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  border: 1px solid transparent;
  background: #fff; color: #000; white-space: nowrap;
  /* line-height ВНУТРИ сокращения: отдельной строкой его затирает сам `font:`,
     и кнопка выходила на два пикселя ниже соседнего «Log in». */
  font: 600 12.5px/17px var(--font);
}
.pdnav-launch:hover { background: #e6e6e6; }
/* В терминале шапка 42px — кнопка-призыв там прежней высоты, вровень с .btn. */
body.platform-page .pdnav-launch, body.chart-page .pdnav-launch {
  padding: 4px 13px; font: 600 11.5px/14px var(--font);
}
[data-theme="light"] .pdnav-launch { background: var(--grad); color: #fff; }
@media (max-width: 620px) { .pdnav-launch { display: none; } }

/* ── Search trigger ── */
.pdnav-search-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 13px 8px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg2);
  font: 500 13px var(--font); color: var(--text3);
}
.pdnav-search-btn:hover { border-color: var(--border-hi); color: var(--text2); }
/* В терминале шапка 42px — поиск там остаётся прежней высоты. */
body.platform-page .pdnav-search-btn, body.chart-page .pdnav-search-btn {
  padding: 4px 9px 4px 10px; font-size: 12px;
}
.pdnav-search-btn kbd {
  font: 600 10px var(--font); padding: 1px 5px; border-radius: 4px;
  background: var(--bg4); color: var(--text3);
}

/* ── Search overlay ── */
.pdnav-overlay {
  position: fixed; inset: 0; z-index: 500; padding: 12vh 16px 16px;
  background: rgba(17, 22, 36, .38); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
}
.pdnav-overlay[hidden] { display: none; }
.pdnav-search {
  width: 100%; max-width: 620px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16,24,40,.28); overflow: hidden;
}
.pdnav-search-top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border);
}
.pdnav-search-icon { font-size: 17px; color: var(--text3); }
.pdnav-search-top input {
  flex: 1; border: none; outline: none; background: none;
  font: 400 15px var(--font); color: var(--text);
}
.pdnav-search-top kbd {
  font: 600 10px var(--font); padding: 2px 6px; border-radius: 4px;
  background: var(--bg4); color: var(--text3);
}
.pdnav-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.pdnav-sec {
  padding: 9px 10px 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text3);
}
.pdnav-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px; align-items: center; padding: 8px 10px; border-radius: 9px;
}
.pdnav-row.on { background: var(--bg3); }
.pdnav-row-icon {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--bg4);
  font-size: 9.5px; font-weight: 700; color: var(--text2);
}
.pdnav-row-icon img { width: 100%; height: 100%; display: block; }
.pdnav-row-icon.news { background: rgba(109,94,252,.12); color: var(--accent); font-size: 13px; }
.pdnav-row-main { min-width: 0; }
.pdnav-row-main b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdnav-row-main i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdnav-row-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text3); background: var(--bg3); padding: 2px 7px; border-radius: 5px;
}
.pdnav-empty { padding: 12px 10px 16px; font-size: 12.5px; color: var(--text3); }

/* Pages that host a single platform panel keep the workspace chrome out of the
   way. The `hidden` attribute is not enough: platform.css gives these elements an
   explicit display, which beats the UA stylesheet. */
.site-hidden { display: none !important; }

/* ── Burger menu (narrow screens) ── */
.pdnav-burger { display: none; }

@media (max-width: 1024px) {
  /* Below this the grouped nav collapses into the burger, as on the reference */
  .app-nav { display: none; }
  .pdnav-search-label, .pdnav-search-btn kbd { display: none; }

  .pdnav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 30px; padding: 0 6px; cursor: pointer;
    border: none; background: none; order: -1; margin-right: 2px;
  }
  .pdnav-burger span {
    display: block; height: 1.6px; border-radius: 2px; background: var(--text);
    transition: transform .18s, opacity .18s;
  }
  .pdnav-burger.on span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .pdnav-burger.on span:nth-child(2) { opacity: 0; }
  .pdnav-burger.on span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

  /* the workspace pages carry their own hamburger — ours replaces it */
  body.pdnav-has-burger .mob-burger { display: none !important; }
}

.pdnav-drawer { position: fixed; inset: 0; z-index: 450; background: var(--bg); }
.pdnav-drawer[hidden] { display: none; }
body.pdnav-drawer-open { overflow: hidden; }

.pdnav-drawer-panel {
  height: 100%; display: flex; flex-direction: column;
  animation: pdnav-fade .16s ease-out;
}
@keyframes pdnav-fade { from { opacity: .4 } to { opacity: 1 } }

.pdnav-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: 64px; flex-shrink: 0; border-bottom: 1px solid var(--border);
}
.pdnav-d-close {
  display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px;
  border: none; background: none; cursor: pointer; color: var(--text);
}

.pdnav-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }

/* One tall row per section, separated by a hairline — the reference's rhythm */
.pdnav-d-row {
  display: flex; align-items: center; width: 100%;
  padding: 22px 2px; border-bottom: 1px solid var(--border);
  font: 400 19px/1.2 var(--font); color: var(--text2);
  cursor: pointer; list-style: none; text-align: left; background: none;
}
.pdnav-d-row.as-button { border: none; border-bottom: 1px solid var(--border); }
.pdnav-d-row::-webkit-details-marker { display: none; }
.pdnav-d-row:hover, .pdnav-d-row.active { color: var(--text); }
.pdnav-d-caret { margin-left: auto; color: var(--text3); transition: transform .18s; }
.pdnav-d-group[open] .pdnav-d-caret { transform: rotate(180deg); }
.pdnav-d-group[open] .pdnav-d-row { border-bottom-color: transparent; color: var(--text); }

.pdnav-d-sub { padding: 0 0 18px 2px; border-bottom: 1px solid var(--border); }
.pdnav-d-item {
  display: block; padding: 11px 0 11px 14px; font-size: 16px; color: var(--text3);
  border-left: 1px solid var(--border); margin-left: 2px;
}
.pdnav-d-item:hover { color: var(--text); }
.pdnav-d-item.active { color: var(--text); }

.pdnav-drawer-foot { padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0)); flex-shrink: 0; }
.pdnav-d-cta {
  display: block; text-align: center; padding: 16px; border-radius: 12px;
  background: #fff; color: #000; font-size: 16px; font-weight: 600;
}
.pdnav-d-cta:hover { background: #e9e9e9; }
[data-theme="light"] .pdnav-d-cta { background: var(--grad); color: #fff; }



/* Мобильное меню: блок аккаунта (03.10.2026) */
.pdnav-d-acct { display: flex; flex-direction: column; gap: 10px; flex: none; }
.pdnav-d-acct a, .pdnav-d-acct button { flex: none; width: 100%; display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.pdnav-d-login, .pdnav-d-acct-out { background: transparent; color: var(--text); border: 1px solid var(--border, rgba(255,255,255,.18)); }
.pdnav-d-signup { background: var(--text); color: var(--bg); border: 0; }
.pdnav-d-acct-name { background: transparent; color: var(--text); border: 1px solid var(--border, rgba(255,255,255,.18)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }