/* ══════════════════════════════════════════════════════════════════════
   Журнал сделок «Команды» (CRM → Команда → Сделки), 23.09.2026
   Дизайн владельца «PnL Journal» (Claude Design) в цветах ПАНЕЛИ, обе темы.
   Разметка — Journal.dc.html, логика там же; здесь:
     1. токены дизайна (--bg/--s1/--tx…) → токены панели (--tj-*);
     2. раскладка экрана: шапка, статистика, график, календарь, список;
     3. слои поверх экрана (в портале #tj-layers): форма, настройки, карточка,
        тост, «＋»;
     4. наведение/фокус классами (движок панели не ставит !important у
        style-hover) — только там, где есть мышь;
     5. анимации (с приставкой tj-) и «меньше движения».
   Цвета числом здесь не пишем — только переменные темы панели.
   ══════════════════════════════════════════════════════════════════════ */

/* Узкий шрифт цифр для картинки «Карточка PnL» (OFL, лежит у нас; браузер
   качает его, только когда карточку открыли) */
@font-face {
  font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./assets/fonts/bebas-neue-latin.woff2') format('woff2');
}

/* ── 1. Токены ─────────────────────────────────────────────────────────── */
.swarm-app .tj {
  --tj-bg: var(--app-bg);
  --tj-s1: var(--surface);
  --tj-s2: var(--hover);
  --tj-s3: var(--elevated);
  --tj-bd: var(--border);
  --tj-bd2: var(--border-strong);
  --tj-tx: var(--text);
  --tj-mu: var(--text-2);
  --tj-di: var(--text-3);
  --tj-pos: var(--green);
  --tj-neg: var(--red);
  --tj-acc: var(--accent);
  --tj-acc-fg: var(--accent-contrast);
  --tj-on-strong: var(--text);
  --tj-seg-bg: var(--surface);
  --tj-seg-on: var(--elevated);
  --tj-seg-shadow: none;
  --tj-scrim: var(--crm-scrim);
  --tj-pop: var(--elevated);
  --tj-shadow: var(--rz-shadow-hi);
  --tj-ease: cubic-bezier(.32, .72, 0, 1);
  --tj-dur: 280ms;
  color: var(--tj-tx);
  font-variant-numeric: tabular-nums;
}
/* Светлая тема: «приподнятое» в панели белое, как и карточки — выбранный
   сегмент отличаем подложкой и лёгкой тенью */
.swarm-app.theme-light .tj {
  --tj-seg-bg: var(--hover);
  --tj-seg-on: var(--surface);
  --tj-s3: var(--hover);
  --tj-seg-shadow: var(--rz-shadow);
}

/* ── 2. Экран ──────────────────────────────────────────────────────────── */
.tj-root { font-size: 13.5px; min-width: 0; }
.tj-head { display: flex; align-items: center; gap: 14px; min-height: 40px; margin-bottom: 12px; }
.tj-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tj-logo { width: 24px; height: 24px; border-radius: 7px; background: var(--tj-tx); color: var(--tj-bg); display: grid; place-items: center; }
.tj-logo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tj-brand__t { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; }
.tj-body { display: flex; flex-direction: column; gap: 12px; }
.tj-fade { animation: tj-fadeIn .25s ease both; }
.tj-skel { border-radius: 12px; background: var(--skel); }
.tj-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tj-mu { color: var(--tj-mu); }
.tj-di { color: var(--tj-di); }
.tj-nw { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-num { text-align: right; white-space: nowrap; }
.tj-card { border: 1px solid var(--tj-bd); border-radius: 12px; background: var(--tj-s1); min-width: 0; }
.tj-card__t { font-weight: 500; }

/* иконки */
.tj svg[class^="tj-ic"], .tj svg[class*=" tj-ic"] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tj .tj-ic12 { width: 12px; height: 12px; }
.tj .tj-ic13 { width: 13px; height: 13px; }
.tj .tj-ic14 { width: 14px; height: 14px; }
.tj .tj-ic15 { width: 15px; height: 15px; }
.tj .tj-ic16 { width: 16px; height: 16px; stroke-width: 1.8; }
.tj .tj-ic22 { width: 22px; height: 22px; }
.tj .tj-ic-bold { stroke-width: 2.4; }

/* сегменты (период, вид сделки, настройки карточки) */
.tj-seg { display: flex; padding: 2px; border-radius: 9px; background: var(--tj-seg-bg); border: 1px solid var(--tj-bd); }
.tj-seg--head { margin-left: 10px; }
/* узкая полоса периода: 1Д · 7Д · 30Д · Всё и шире — «Месяц ▾» (в нём название месяца) */
.tj-seg--full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); position: relative; }
.tj-seg--types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--tj-bg); }
.tj-seg--flex { background: var(--tj-bg); }
.tj-seg--flex .tj-seg__b { flex: 1; }
.tj-seg--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--tj-bg); }
.tj-seg__b {
  border: 0; padding: 5px 12px; border-radius: 7px; background: transparent; color: var(--tj-mu);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tj-seg--full .tj-seg__b, .tj-seg--types .tj-seg__b { padding: 7px 0; }
.tj-seg--full .tj-seg__b { font-size: 13px; }
.tj-seg__b.is-on { background: var(--tj-seg-on); color: var(--tj-tx); box-shadow: var(--tj-seg-shadow); }

/* период «Месяц ▾»: последний сегмент открывает окошко с месяцами года.
   На компьютере окошко висит под кнопкой, на телефоне — во всю ширину полосы */
.tj-mwrap { position: relative; display: flex; min-width: 0; }
.tj-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.tj .tj-mbtn .tj-mchev { opacity: .7; transition: transform .2s var(--tj-ease); }
.tj .tj-mbtn.is-open .tj-mchev { transform: rotate(180deg); }
.tj-seg--full .tj-mwrap { position: static; }
.tj-seg--full .tj-mbtn { width: 100%; }
.tj-mp {
  position: absolute; top: calc(100% + 8px); right: -3px; z-index: 30; width: 304px; box-sizing: border-box;
  padding: 12px 12px 14px; border-radius: 12px; background: var(--tj-pop); border: 1px solid var(--tj-bd2);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; cursor: default;
  transform-origin: top right; animation: tj-pop .16s var(--tj-ease) both;
}
.tj-seg--full .tj-mp { left: -1px; right: -1px; width: auto; transform-origin: top center; }
.tj-mp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tj-mp__c {
  height: 48px; border: 0; border-radius: 8px; padding: 0 4px; font: inherit; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .15s, box-shadow .2s;
}
.tj-mp__c:disabled { cursor: default; }
.tj-mp__m { font-size: 12.5px; font-weight: 500; }
.tj-mp__p { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 100%; }
.tj-seg--full .tj-mp__c { height: 54px; }
.tj-seg--full .tj-mp__m { font-size: 13.5px; }
.tj-seg--full .tj-mp__p { font-size: 12px; }
/* стрелка, которой дальше листать некуда (календарь в режиме месяца, годы) */
.tj .tj-ibtn:disabled, .tj .tj-ibtn[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }

/* кнопки */
.tj-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; border: 0; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.tj-btn--primary { background: var(--tj-acc); color: var(--tj-acc-fg); }
.tj-btn--line { background: transparent; border: 1px solid var(--tj-bd2); color: var(--tj-tx); font-weight: 500; }
.tj-btn--ghost { background: transparent; border: 1px solid var(--tj-bd2); color: var(--tj-mu); font-weight: 500; }
.tj-btn--sm { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; color: var(--tj-mu); }
.tj-btn--wide { width: 100%; height: 42px; border-radius: 9px; font-size: 14px; }
.tj-kbd { font-size: 11px; opacity: .55; font-weight: 500; }
.tj-ibtn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--tj-bd); background: transparent; color: var(--tj-mu);
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.tj-ibtn--sm { width: 28px; height: 28px; border-radius: 7px; }
.tj-ibtn--row { width: 28px; height: 28px; border: 0; border-radius: 7px; color: var(--tj-di); }
.tj-ibtn--plain { width: 32px; height: 32px; border: 0; }
.tj-link { border: 0; background: transparent; color: var(--tj-mu); cursor: pointer; padding: 0; font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tj-bd2); align-self: flex-start; }
.tj-link--tx { color: var(--tj-tx); }

/* полоса статистики: линии 1px между ячейками — фон контейнера через gap */
.tj-stats { display: grid; gap: 1px; background: var(--tj-bd); border: 1px solid var(--tj-bd); border-radius: 12px; overflow: hidden; }
.tj-stat { background: var(--tj-s1); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj-stat__k { font-size: 12px; color: var(--tj-mu); }
.tj-stat__hero { font-weight: 600; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; transition: color .3s; }
.tj-stat__v { font-size: 20px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-stat__s { font-size: 12px; color: var(--tj-di); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* кривая капитала */
.tj-mid { display: grid; gap: 12px; align-items: stretch; }
.tj-eq { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 12px; }
.tj-eq__plot { position: relative; flex: 1; touch-action: pan-y; cursor: crosshair; }
.tj-eq__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: tj-reveal .9s var(--tj-ease) both; }
.tj-eq__base { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--tj-bd2); pointer-events: none; transition: top .6s var(--tj-ease); }
.tj-eq__vline { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--tj-bd2); opacity: 0; pointer-events: none; will-change: transform; }
.tj-eq__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--tj-tx); box-shadow: 0 0 0 3px var(--tj-s1); opacity: 0; pointer-events: none; will-change: transform; }
.tj-eq__tip {
  position: absolute; top: -8px; left: 0; padding: 6px 9px; border-radius: 7px; background: var(--tj-s3); border: 1px solid var(--tj-bd2);
  box-shadow: var(--tj-shadow); font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; display: flex; flex-direction: column; gap: 2px; z-index: 2; will-change: transform;
}
.tj-eq__x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tj-di); }

/* календарь PnL */
.tj-cal { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.tj-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.tj-cal__wd { font-size: 10.5px; color: var(--tj-di); text-align: center; padding-bottom: 2px; }
.tj-cal__c {
  aspect-ratio: 1; border: 0; border-radius: 6px; padding: 2px; font: inherit; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 0; transition: transform .15s, box-shadow .2s;
}
.tj-cal__p { font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; max-width: 100%; }
.tj-cal__foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tj-di); margin-top: auto; }
.tj-cal__foot b { font-weight: 500; }

/* список сделок */
.tj-list { overflow: hidden; }
.tj-list__h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--tj-bd); flex-wrap: wrap; }
.tj-chip { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--tj-bd2); background: var(--tj-s2); color: var(--tj-tx); border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer; }
.tj-search { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--tj-bg); border: 1px solid var(--tj-bd); transition: border-color .15s; box-sizing: border-box; }
.tj-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; color: var(--tj-tx); font-family: inherit; }
.tj input::placeholder { color: var(--tj-di); }
.tj-thead { display: grid; gap: 12px; padding: 8px 16px; font-size: 11.5px; color: var(--tj-di); border-bottom: 1px solid var(--tj-bd); }
.tj-day { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.tj-day__h { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--tj-bg); border-bottom: 1px solid var(--tj-bd); font-size: 12px; }
.tj-day__t { color: var(--tj-tx); font-weight: 500; }
.tj-tr { display: grid; gap: 12px; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--tj-bd); cursor: pointer; transition: background .12s; }
.tj-tr__sym { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-tr__io { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-mr { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--tj-bd); cursor: pointer; }
.tj-mr__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tj-mr__sym { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-mr__sub { font-size: 12px; color: var(--tj-di); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-mr__r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.tj-mr__pnl { font-weight: 600; font-size: 14px; }
.tj .is-flash { animation: tj-flash 1.4s ease-out; }
.tj-more { display: flex; justify-content: center; padding: 12px; }
.tj-empty { padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--tj-mu); }
.tj [data-tj-row]:focus-visible { outline: 2px solid var(--tj-acc); outline-offset: -2px; }

/* ── 3. Слои поверх экрана (портал #tj-layers) ─────────────────────────── */
.tj-layers { position: relative; }
.tj-fab {
  position: fixed; right: 16px; z-index: 31; width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: var(--tj-acc); color: var(--tj-acc-fg); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--tj-shadow); transition: transform .15s; animation: tj-rise .3s var(--tj-ease) both;
}
.tj-scrim {
  position: fixed; inset: 0; z-index: 40; background: var(--tj-scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--tj-dur) ease;
}
.tj-scrim--set { z-index: 44; }
.tj-scrim--card { z-index: 50; }
.tj-scrim.is-on { opacity: 1; pointer-events: auto; }

/* форма сделки: справа 420px (компьютер) / шторка снизу 90dvh (телефон) */
.tj-drawer {
  position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  transform: translateX(100%); transition: transform var(--tj-dur) var(--tj-ease), visibility 0s linear var(--tj-dur);
  background: var(--tj-s1); border-left: 1px solid var(--tj-bd2); display: flex; flex-direction: column;
  will-change: transform; visibility: hidden; box-shadow: var(--tj-shadow);
}
.tj-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--tj-dur) var(--tj-ease); }
/* закрывающаяся шторка ещё видна — но нажать в ней уже ничего нельзя */
.tj-drawer:not(.is-open) { pointer-events: none; }
.tj-drawer.is-mob {
  top: auto; left: 0; width: auto; height: 90dvh; border-left: 0; border-top: 1px solid var(--tj-bd2);
  border-radius: 16px 16px 0 0; transform: translateY(100%);
}
.tj-drawer.is-mob.is-open { transform: translateY(0); }
.tj-grab { padding: 10px 0 0; display: grid; place-items: center; touch-action: none; cursor: grab; flex-shrink: 0; }
.tj-grab span { width: 36px; height: 4px; border-radius: 4px; background: var(--tj-bd2); }
.tj-panel__h { display: flex; align-items: center; gap: 6px; padding: 14px 12px 12px 20px; border-bottom: 1px solid var(--tj-bd); flex-shrink: 0; }
.tj-panel__t { font-weight: 600; font-size: 15px; flex: 1; }
.tj-panel__b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.tj-panel__f { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tj-bd); flex-shrink: 0; }
.tj-note { font-size: 12.5px; color: var(--tj-mu); padding: 10px 12px; border-radius: 8px; background: var(--tj-bg); border: 1px dashed var(--tj-bd2); line-height: 1.45; }
.tj-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.tj-field, .tj-field__in { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tj-field__l { font-size: 12px; color: var(--tj-mu); }
.tj-input {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 8px; box-sizing: border-box;
  background: var(--tj-bg); border: 1px solid var(--tj-bd2); transition: border-color .15s;
}
.tj-input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; font-family: inherit; font-weight: 500; color: var(--tj-tx); }
.tj-input__u { font-size: 12px; color: var(--tj-di); }
.tj-input--set { width: 112px; height: 36px; padding: 0 10px; flex-shrink: 0; }
.tj-input--nick { height: 36px; padding: 0 10px; }
.tj-side { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; height: 40px; box-sizing: border-box; border-radius: 8px; background: var(--tj-bg); border: 1px solid var(--tj-bd); }
.tj-side button { border: 0; border-radius: 6px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.tj-sum { padding: 14px 16px; border-radius: 10px; background: var(--tj-bg); border: 1px solid var(--tj-bd); display: flex; flex-direction: column; gap: 5px; }
.tj-sum__v { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; transition: color .2s; }
.tj-sum__m { font-size: 12.5px; color: var(--tj-mu); }
.tj-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--tj-mu); }
.tj-dt { height: 34px; padding: 0 10px; border-radius: 8px; background: var(--tj-bg); border: 1px solid var(--tj-bd2); color: var(--tj-tx); outline: none; font-family: inherit; color-scheme: dark; animation: tj-rise .2s ease both; }
.swarm-app.theme-light .tj-dt { color-scheme: light; }

/* окна: настройки и карточка — по центру (компьютер) / шторка (телефон) */
.tj-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -48%); opacity: 0; pointer-events: none;
  transition: transform var(--tj-dur) var(--tj-ease), opacity .2s ease; border-radius: 14px; background: var(--tj-s1);
  border: 1px solid var(--tj-bd2); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100dvh - 48px);
}
.tj-modal.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
/* закрытое окно не ловит Tab с клавиатуры */
.tj-modal:not(.is-open) { visibility: hidden; transition: transform var(--tj-dur) var(--tj-ease), opacity .2s ease, visibility 0s linear var(--tj-dur); }
.tj-modal--set { z-index: 45; width: min(440px, calc(100vw - 32px)); }
.tj-modal--card { z-index: 51; width: min(1080px, calc(100vw - 48px)); will-change: transform; }
.tj-modal.is-mob { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: translateY(100%); opacity: 1; border-radius: 16px 16px 0 0; max-height: 92dvh; }
.tj-modal.is-mob.is-open { transform: translateY(0); }
.tj-set { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tj-bd); }
.tj-set__h { font-size: 12px; color: var(--tj-di); margin-top: 2px; }
.tj-set__foot { font-size: 12px; color: var(--tj-di); }
.tj-cs { flex: 1; min-height: 0; overflow: auto; display: flex; gap: 20px; padding: 18px 20px 20px; }
.tj-cs__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* карточка итогов листается: свайп по картинке, листалка «‹ 2 / 4 ›» в ряду кнопок */
.tj-cs__stage { position: relative; touch-action: pan-y pinch-zoom; }
.tj-pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tj-pager__t { min-width: 44px; text-align: center; font-size: 12.5px; color: var(--tj-mu); }
.tj-seg--wrap { flex-wrap: wrap; }
/* стиль картинки (05–06.10.2026): кнопки по 4 в ряд (стилей 7 — два ряда), влезают в панель настроек 280 px */
.tj-seg--styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--tj-bg); }   /* стилей 8 — два ряда по 4 */
.tj-seg--styles .tj-seg__b { padding-left: 2px; padding-right: 2px; }
/* галочки «Показывать» */
.tj-chks { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-chk {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 7px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--tj-bd2); background: transparent; color: var(--tj-mu); font: inherit; font-size: 12.5px;
  transition: color .15s, border-color .15s, background .15s;
}
.tj-chk__box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--tj-bd2); display: grid; place-items: center; box-sizing: border-box; color: transparent; transition: background .15s, border-color .15s; }
.tj-chk.is-on { color: var(--tj-tx); background: var(--tj-s2); }
.tj-chk.is-on .tj-chk__box { background: var(--tj-acc); border-color: var(--tj-acc); color: var(--tj-acc-fg); }
@media (pointer: coarse) { .tj-chk { height: 36px; } }
.tj-cs__canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--tj-bg); border: 1px solid var(--tj-bd); }
.tj-cs__opts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tj-cs__sub { font-size: 12px; color: var(--tj-di); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-opt { display: flex; flex-direction: column; gap: 8px; }
.tj-swatch { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; transition: box-shadow .15s, transform .15s; }
/* сохранение картинки (06.10.2026): подсказка под кнопками на iPhone и крупный просмотр —
   запасной путь, если меню «Поделиться» не открылось (картинку держат пальцем → «Сохранить в Фото») */
.tj-save-hint { flex-basis: 100%; font-size: 12px; line-height: 1.4; color: var(--tj-mu); }
.tj-hq { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; }
.tj-hq__img { max-width: 100%; max-height: 70vh; border-radius: 12px; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.tj-hq__hint { color: #f4f4f5; font-size: 15px; text-align: center; }
.tj-bgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tj-bg { display: flex; flex-direction: column; gap: 5px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--tj-mu); font: inherit; font-size: 11.5px; }
.tj-bg > span { display: block; width: 100%; height: 40px; border-radius: 8px; transition: box-shadow .15s; }
.tj-bg__add { display: grid !important; place-items: center; border: 1px dashed var(--tj-bd2); box-sizing: border-box; color: var(--tj-mu); }
.tj-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--tj-tx); text-align: left; font: inherit; }
.tj-toggle__t { width: 34px; height: 20px; border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; }
.tj-toggle__t span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; transition: transform .2s var(--tj-ease); }

/* тост с «Отменить» */
.tj-toast {
  position: fixed; left: 50%; z-index: 70; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: transform var(--tj-dur) var(--tj-ease), opacity .2s; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 14px; border-radius: 10px; background: var(--tj-s3); border: 1px solid var(--tj-bd2);
  box-shadow: var(--tj-shadow); white-space: nowrap; max-width: calc(100vw - 24px); min-height: 40px; box-sizing: border-box;
}
.tj-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; visibility: visible; }
.tj-toast:not(.is-on) { visibility: hidden; transition: transform var(--tj-dur) var(--tj-ease), opacity .2s, visibility 0s linear .2s; }
.tj-toast__m { overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.tj-toast__act { height: 28px; border: 0; background: var(--tj-acc); color: var(--tj-acc-fg); border-radius: 7px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tj-toast__undo { height: 28px; border: 0; background: transparent; color: var(--tj-mu); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12.5px; cursor: pointer; }

/* страница под открытой шторкой не едет (телефон) */
html.tj-lock, html.tj-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* ── 4. Наведение и фокус ─────────────────────────────────────────────── */
@media (hover: hover) {
  .tj .tj-hv-tx:hover { color: var(--tj-tx) !important; border-color: var(--tj-bd2) !important; }
  .tj .tj-hv-row:hover { background: var(--tj-s2) !important; }
  .tj .tj-hv-icon:hover { color: var(--tj-tx) !important; background: var(--tj-s2) !important; }
  .tj .tj-hv-neg:hover { color: var(--tj-neg) !important; background: var(--tj-s2) !important; }
  .tj .tj-hv-op:hover { opacity: .88; }
  .tj .tj-seg__b:not(.is-on):hover { color: var(--tj-tx); }
  .tj .tj-cal__c[style*="pointer"]:hover { transform: scale(1.06) !important; }
  .tj .tj-mp__c:not(:disabled):hover { transform: scale(1.04); }
  .tj .tj-swatch:hover { transform: scale(1.08); }
}
.tj .tj-fw:focus-within { border-color: var(--tj-acc) !important; }
.tj .tj-press:active { transform: scale(.94); }
.tj button:focus-visible, .tj input:focus-visible { outline: 2px solid var(--tj-acc); outline-offset: 2px; }
.tj .tj-input input:focus-visible, .tj .tj-search input:focus-visible { outline: none; }

/* ── Телефон: поля 16px (иначе iPhone приближает), кнопки под палец ───── */
.tj-drawer.is-mob .tj-ibtn--plain, .tj-modal.is-mob .tj-ibtn--plain { width: 40px; height: 40px; }
.tj.is-narrow .tj-head { gap: 10px; }
.tj.is-narrow .tj-stat { padding: 14px 16px; }
/* «Enter» на кнопке «Сохранить» и «N» — подсказки клавиатуры, телефону не нужны */
.tj-drawer.is-mob .tj-kbd { display: none; }
/* стрелки годов в окошке месяцев — под палец */
@media (pointer: coarse) { .tj-mp .tj-ibtn--sm { width: 38px; height: 38px; } }

/* ── 6. Окно сделки с графиком (05.10.2026) ─────────────────────────────
   Фьючерс, спот, тренч: слева настоящий график цены (journal-chart.js), справа
   форма. Компьютер — окно по центру; телефон — шторка: график сверху, форма
   под ним листается. Остальные виды (Earn, IDO, записи без цен) — прежняя
   панель справа. */
.tj-trade { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tj-trade__form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tj-drawer.is-chart:not(.is-mob) {
  top: 50%; left: 50%; right: auto; bottom: auto; width: min(1240px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px));
  border: 1px solid var(--tj-bd2); border-radius: 14px; overflow: hidden; transform: translate(-50%, -48%); opacity: 0;
  transition: transform var(--tj-dur) var(--tj-ease), opacity .2s ease, visibility 0s linear var(--tj-dur);
}
.tj-drawer.is-chart.is-open:not(.is-mob) { transform: translate(-50%, -50%); opacity: 1; transition: transform var(--tj-dur) var(--tj-ease), opacity .2s ease; }
.tj-drawer.is-chart:not(.is-mob) .tj-trade { display: grid; grid-template-columns: minmax(0, 1fr) 392px; }
.tj-drawer.is-chart:not(.is-mob) .tj-trade__form { border-left: 1px solid var(--tj-bd); }
.tj-drawer.is-chart.is-mob { height: 94dvh; }
.tj-drawer.is-chart.is-mob .tj-chp { flex: 0 0 auto; border-bottom: 1px solid var(--tj-bd); }
.tj-drawer.is-chart.is-mob .tj-chp__plot { height: clamp(200px, 32dvh, 300px); flex: none; }
/* Телефон (07.10.2026, владелец: «график вылазит на полстраницы, вниз ничего не пролистать»): на iPhone
   график с панелью занимал ~380px, а листаемой форме оставалось ~60px. Теперь окно листается ЦЕЛИКОМ:
   график сверху уезжает вверх, под ним вся форма; «Итог» и «Сохранить» прилипают к низу экрана.
   Вертикальный жест по самому графику тоже листает (vertTouchDrag: false в journal-chart.js). */
.tj-drawer.is-chart.is-mob .tj-trade { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tj-drawer.is-chart.is-mob .tj-trade__form { flex: none; min-height: auto; }
.tj-drawer.is-chart.is-mob .tj-panel__b { flex: none; overflow: visible; }
.tj-drawer.is-chart.is-mob .tj-panel__f { position: sticky; bottom: 0; z-index: 3; background: var(--tj-s1); }
/* панель над графиком — в две строки вместо трёх: название и кнопки «Вход/Выход», ниже таймфреймы */
.tj-drawer.is-chart.is-mob .tj-chp__bar { gap: 8px; padding: 8px 12px; }
.tj-drawer.is-chart.is-mob .tj-chp__src { flex: 1 1 0; min-width: 0; order: 0; }
.tj-drawer.is-chart.is-mob .tj-chp__tools { order: 1; flex: none; }
.tj-drawer.is-chart.is-mob .tj-seg--tf { order: 2; flex: 1 1 100%; }
.tj-drawer.is-chart.is-mob .tj-seg--tf .tj-seg__b { flex: 1 1 0; }

/* панель графика */
.tj-chp { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tj-bg); }
.tj-chp__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--tj-bd); flex-wrap: wrap; }
.tj-chp__src { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 160px; font-size: 12.5px; font-weight: 500; color: var(--tj-mu); }
.tj-seg--tf .tj-seg__b { padding: 4px 9px; font-size: 12px; }
.tj-chp__tools { display: flex; align-items: center; gap: 6px; }
.tj-tool {
  height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--tj-bd2); background: transparent; color: var(--tj-tx);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.tj-tool.is-on { background: var(--tj-acc); border-color: var(--tj-acc); color: var(--tj-acc-fg); }
.tj-chp__plot { position: relative; flex: 1; min-height: 260px; }
.tj-chp__cv { position: absolute; inset: 0; }
.tj-chp__msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(420px, 86%); text-align: center;
  font-size: 13px; line-height: 1.45; color: var(--tj-mu); pointer-events: none;
}
.tj-chp__hint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; border-radius: 8px; background: var(--tj-s1); border: 1px solid var(--tj-acc); box-shadow: var(--tj-shadow);
  font-size: 12.5px; white-space: nowrap; animation: tj-rise .2s var(--tj-ease) both;
}
/* живая цена — пульсирующая точка */
.tj-live { width: 7px; height: 7px; border-radius: 50%; background: var(--tj-pos); flex-shrink: 0; box-shadow: 0 0 0 0 var(--tj-pos); animation: tj-pulse 2s ease-out infinite; }

/* где торговали: биржа / сеть */
.tj-place { display: flex; flex-direction: column; gap: 8px; }
.tj-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-pill {
  height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--tj-bd2); background: transparent; color: var(--tj-mu);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.tj-pill.is-on { background: var(--tj-s3); color: var(--tj-tx); border-color: var(--tj-tx); }
.tj-pill.is-dim { opacity: .45; }
.tj-hint { font-size: 12px; color: var(--tj-di); }

/* тренч (07.10.2026): CA первым полем — найденный токен плашкой, токены с тем же тикером на выбор */
.tj-ca { display: flex; flex-direction: column; gap: 8px; }
.tj-ca .tj-input input { font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace); font-weight: 400; letter-spacing: -.01em; }
.tj-ca__spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--tj-bd2); border-top-color: var(--tj-acc);
  animation: tj-spin .8s linear infinite;
}
.tj-ca__found, .tj-ca__cand {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--tj-bd2); background: var(--tj-s2); animation: tj-pop .18s var(--tj-ease) both;
}
.tj-ca__cand { width: 100%; font: inherit; color: var(--tj-tx); text-align: left; cursor: pointer; background: transparent; }
.tj-ca__cands { display: flex; flex-direction: column; gap: 6px; }
.tj-ca__logo { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--tj-s3); }
.tj-ca__logo--sm { width: 26px; height: 26px; }
.tj-ca__mono { display: grid; place-items: center; color: var(--tj-acc-fg); font-weight: 700; font-size: 13px; }
.tj-ca__logo--sm.tj-ca__mono { font-size: 11.5px; }
.tj-ca__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tj-ca__name { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; }
.tj-ca__name b { font-weight: 600; white-space: nowrap; }
.tj-ca__nm { color: var(--tj-mu); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-ca__meta { color: var(--tj-di); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* тренч без времени отметок: «Найти время по MC» */
.tj-mcfind {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed var(--tj-bd2); background: var(--tj-s2);
}
.tj-mcfind .tj-hint { line-height: 1.4; }
.tj-mcfind__b { flex: none; }
.tj-mcfind__b:disabled { opacity: .55; cursor: default; }
@media (max-width: 560px) { .tj-mcfind { flex-direction: column; align-items: stretch; } }
/* в узкой панели картинки PnL — столбиком; таймфрейм картинки — 7 кнопок в одну строку */
.tj-mcfind--card { flex-direction: column; align-items: stretch; gap: 8px; }
.tj-seg--tfc { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); }
.tj-seg--tfc .tj-seg__b { padding-left: 0; padding-right: 0; }
@keyframes tj-spin { to { transform: rotate(360deg); } }

/* входы и выходы */
.tj-legs { display: flex; flex-direction: column; gap: 14px; }
.tj-legs__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tj-legs__b { display: flex; flex-direction: column; gap: 6px; }
.tj-legs__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; }
.tj-legs__t .tj-di { font-size: 11.5px; font-weight: 400; }
.tj-leg { display: grid; grid-template-columns: 14px minmax(0, 1fr) 76px 92px auto auto; align-items: center; gap: 6px; }
/* «поставить на графике»: эта строка ждёт нажатия на свечу */
.tj .tj-leg__aim.is-on { color: var(--tj-acc-fg); background: var(--tj-acc); }
.tj-leg__n { font-size: 11.5px; font-weight: 600; text-align: center; }
.tj-input--leg { height: 36px; padding: 0 9px; }
.tj-leg__ro { height: 36px; display: flex; align-items: center; padding: 0 9px; border-radius: 8px; border: 1px dashed var(--tj-bd2); font-size: 12px; color: var(--tj-mu); white-space: nowrap; overflow: hidden; }
.tj-leg__time {
  height: 36px; border-radius: 8px; border: 1px solid var(--tj-bd); background: transparent; color: var(--tj-mu); font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
}
.tj-leg__time.is-miss { border-style: dashed; color: var(--tj-di); }
.tj-leg.is-warn .tj-leg__n { color: var(--amber) !important; }
.tj-leg__warn { margin-left: 20px; font-size: 12px; line-height: 1.4; color: var(--amber); }
.tj-legs__note { margin: 2px 0 10px; }
/* лимит позиции на бирже (27.10.2026): серым — сколько даёт биржа, красным — такой
   объём или плечо биржа не даст (монеты нет, торги стоят, урезка по монете) */
.tj-lim {
  display: flex; flex-direction: column; gap: 3px; margin: 8px 0 2px; padding: 8px 10px 8px 12px; border-radius: 10px;
  border: 1px solid var(--tj-bd); border-left: 3px solid var(--tj-bd2); background: var(--tj-s2);
  font-size: 12.5px; line-height: 1.4; color: var(--tj-mu); overflow-wrap: anywhere;
}
.tj-lim__h { color: var(--tj-tx); font-weight: 500; }
.tj-lim__l { color: var(--tj-di); font-size: 12px; }
.tj-lim.is-ok .tj-lim__h { color: var(--tj-mu); font-weight: 400; }
.tj-lim.is-bad {
  border-color: color-mix(in srgb, var(--tj-neg) 45%, transparent); border-left-color: var(--tj-neg);
  background: color-mix(in srgb, var(--tj-neg) 9%, var(--tj-s1));
}
.tj-lim.is-bad .tj-lim__h { color: var(--tj-neg); font-weight: 600; }
.tj-lim.is-bad .tj-lim__l { color: var(--tj-mu); }
.tj-lim--card { margin: 0 0 4px; }
/* ликвидация позиции (27.10.2026): тем же янтарём, что пунктир и зона на графике */
.tj-liq { border-left-color: var(--amber, #E2A93E); }
.tj-liq .tj-lim__h { color: var(--amber, #E2A93E); }
.tj-tool--liq.is-on { background: var(--amber, #E2A93E); border-color: var(--amber, #E2A93E); color: #141416; }
.tj-dt--leg { margin-left: 20px; align-self: flex-start; }
/* на телефоне сумме — шире (в 62px «300 $» обрезалось до «30»), время — короче */
.tj-drawer.is-mob .tj-leg { grid-template-columns: 12px minmax(0, 1fr) 76px 78px auto auto; gap: 5px; }
.tj-drawer.is-mob .tj-input--leg { padding: 0 7px; }
.tj-drawer.is-mob .tj-leg__time { font-size: 11.5px; padding: 0 4px; }

/* итог в подвале окна сделки */
.tj-fres { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--tj-mu); }
.tj-fres__v { font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }

/* открытые сделки над списком */
.tj-day--open .tj-day__h { gap: 8px; }

@media (hover: hover) {
  .tj .tj-tool:not(.is-on):not(:disabled):hover, .tj .tj-pill:not(.is-on):hover, .tj .tj-leg__time:hover, .tj .tj-ca__cand:hover { color: var(--tj-tx); border-color: var(--tj-tx); }
}

/* ── 5. Анимации ──────────────────────────────────────────────────────── */
@keyframes tj-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tj-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tj-pos) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes tj-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tj-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tj-flash { 0% { background: var(--tj-s3); } 100% { background: transparent; } }
@keyframes tj-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tj-shakeA { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes tj-shakeB { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .tj *, .tj-layers * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}